update static content

add new images update navbar logo placeholder elements remove loaderContext
RotaractMora · Nov 14, 2024 · 8ca2cfe · 8ca2cfe
1 parent 0792d8f
commit 8ca2cfe
Show file tree

Hide file tree

Showing 19 changed files with 399 additions and 127 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -11,7 +11,7 @@
   "dependencies": {
     "@heroicons/react": "^2.1.5",
     "@react-three/fiber": "^8.17.10",
-    "@tabler/icons-react": "^3.21.0",
+    "@tabler/icons-react": "^3.22.0",
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.1.1",
     "cobe": "^0.6.3",

diff --git a/public/Images/logo/RUR20_small.png b/public/Images/logo/RUR20_small.png
diff --git a/public/Images/sessions/career insights.png b/public/Images/sessions/career insights.png
diff --git a/public/Images/sessions/flagship.png b/public/Images/sessions/flagship.png
diff --git a/public/Images/sessions/global.png b/public/Images/sessions/global.png
diff --git a/public/Images/sessions/heads up.png b/public/Images/sessions/heads up.png
diff --git a/public/Images/sessions/image_1.png b/public/Images/sessions/image_1.png
diff --git a/public/Images/sessions/resume centre.png b/public/Images/sessions/resume centre.png
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
@@ -2,8 +2,7 @@
 
 import localFont from "next/font/local";
 import "./globals.css";
-import React, { useEffect, useState } from "react";
-import { LoadedProvider } from "@/context/loadStateContext";
+import React, {  useState } from "react";
 
 
 const geistSans = localFont({
@@ -19,10 +18,6 @@ const geistMono = localFont({
 
 export const ThemeContext = React.createContext<any>(null);
 
-export const handleTheme = () => {
-
-}
-
 
 export default function RootLayout({children}: Readonly<{ children: React.ReactNode }>) {
 
@@ -54,15 +49,15 @@ export default function RootLayout({children}: Readonly<{ children: React.ReactN
 
   return (
     <ThemeContext.Provider value={[setTheme,tougleTheme,currentTheme]}>
-      <LoadedProvider>
+
 
     <html className={theme} lang="en">
       <body className={`${geistSans.variable} ${geistMono.variable} dark:bg-dark-gradient bg-light-gradient antialiased`} >
         {children}
       </body>
-    </html>
+    </html>    
+
 
-      </LoadedProvider>
     </ThemeContext.Provider>
   );
 

diff --git a/src/app/page.tsx b/src/app/page.tsx
@@ -3,7 +3,7 @@
 import { HeroParallax } from "@/components/ui/hero-parallax";
 import RootLayout from "./layout";
 import { FloatingNav } from "@/components/ui/floating-navbar";
-import React, { useEffect, useState } from "react";
+import React, { Suspense, useEffect, useState } from "react";
 import RUR_IMG1 from "../../public/Images/RUR (1).jpg"
 import RUR_IMG2 from "../../public/Images/RUR (2).jpg"
 import RUR_IMG3 from "../../public/Images/RUR (3).jpg"
@@ -19,11 +19,8 @@ import RUR_IMG12 from "../../public/Images/RUR (12).jpg"
 import RUR_IMG13 from "../../public/Images/RUR (13).jpg"
 import RUR_IMG14 from "../../public/Images/RUR (14).jpg"
 import RUR_IMG15 from "../../public/Images/RUR (15).jpg"
-import SPONSOR1 from "../../public/Images/partners/Dimo-logo-1.svg"
-import SPONSOR2 from "../../public/Images/partners/JKH Logo.png"
-import SPONSOR3 from "../../public/Images/partners/Logo_of_MAS_Holdings.png"
-import SPONSOR4 from "../../public/Images/partners/lseg.png"
-import { Timeline ,ITimelineEntry } from "@/components/ui/timeline";
+import SPONSOR from "../../public/Images/partners/the-ai-team.png"
+import { Timeline } from "@/components/ui/timeline";
 
 import LampLighting from "@/components/ui/lamp";
 import { GlareCard } from "@/components/ui/glare-card";
@@ -33,15 +30,13 @@ import ReachUsSection from "@/components/blocks/reach-us-section";
 import Footer from "@/components/blocks/footer";
 import { GridBackground } from "@/components/ui/backgrounds";
 import { ISponsor } from "@/interfaces/ISponsors";
-import { addSponsor, deleteSponsor, getSponsors } from "@/services/sponsors.service";
-import { addTimeLineEvent, deleteTimeLineEvent, getTimeLineEvents } from "@/services/timeline.service";
+import {  getSponsors } from "@/services/sponsors.service";
+import {  getTimeLineEvents } from "@/services/timeline.service";
 import { ITimelineData } from "@/interfaces/ITimeline";
-import { title } from "process";
-import { addFile, deleteFile } from "@/services/firebaseStorage.service";
-import { getDownloadURL, getStorage, ref } from "firebase/storage";
-import { Timestamp } from "firebase/firestore";
-import { useLoadState , LoadedProvider } from "@/context/loadStateContext";
-import { loadProjectInfo } from "next/dist/build/webpack-config";
+import { MultiStepLoader } from "@/components/ui/multi-step-loader";
+import { HeroHighlight, Highlight } from "@/components/ui/hero-highlight";
+import { Highlighter } from "@/components/blocks/hilight";
+import {  HomeIcon, ClockIcon , MegaphoneIcon , PhoneArrowUpRightIcon } from "@heroicons/react/24/solid";
 
 
 export const products = [
@@ -139,17 +134,26 @@ export const products = [
 ];
 
 
-
-
-
 const navItms = [
   {
-    name:'Home',
-    link:'/home',
+    name: 'Home',
+    link: '/',
+    icon: <HomeIcon />,
+  },
+  {
+    name: 'Timeline',
+    link: '#timeline',
+    icon: <ClockIcon />,
+  },
+  {
+    name: 'Sponsors',
+    link: '#sponsors',
+    icon: <MegaphoneIcon />,
   },
   {
-    name:'Register',
-    link:'/register',
+    name: 'Reach Us',
+    link: '#reach_us',
+    icon: <PhoneArrowUpRightIcon />,
   },
 ];
 
@@ -221,23 +225,14 @@ const Loading =()=> {
 
 
 const Para = ({level,name,imgURL,loadCallback}:{level:string,name:string,imgURL:string|undefined,loadCallback?:(count: number) => void}):React.ReactNode => {
-  const { markAsLoaded} = useLoadState();
-  const [isLoaded, setIsLoaded] = useState(false);
-  useEffect(() => {
-    if(isLoaded){
-      markAsLoaded(1)
-    }
-  }
-  ,[isLoaded]);
 
   return (
     <div className="max-w-5xl mx-auto px-0 md:px-0 lg:px-1 flex flex-col items-center h-full justify-between">
       <h6 className="text-6xl text-center font-bold dark:text-custom-color-800 text-custom-dark-color-800 p-2 py-3">
         {`${level} Sponsor`}
       </h6>
       <Image
-        onLoad={() => setIsLoaded(true)}
-        src={imgURL ? imgURL : SPONSOR1}
+        src={imgURL ? imgURL : SPONSOR}
         width={300}
         height={100}
         alt="Sponsor"
@@ -258,7 +253,7 @@ export default function Home() {
   const [sponsors, setSponsors] = useState([] as ISponsor[]);
   const [isTimelineLoading, setTimelineLoading] = useState(true);
   const [isSponsorsLoading, setSponsorsLoading] = useState(true);
-  const {addToTotalImagesCount,loadProgress,totalItms,loadedItms} = useLoadState();
+  const [isLoading, setIsLoading] = useState(true);
 
   useEffect(() => {
 
@@ -270,7 +265,8 @@ export default function Home() {
     getSponsors("All").then((data) => {
         setSponsors(data);
         setSponsorsLoading(false);
-        addToTotalImagesCount(data.filter((sponsor)=>sponsor.level === "Gold" || sponsor.level ==="Silver" || sponsor.level === "Bronze").length);
+        const validdata = data.filter((sponsor)=>sponsor.level === "Gold" || sponsor.level ==="Silver" || sponsor.level === "Bronze");
+        console.log(validdata);
       }
     );
   },[]);
@@ -280,22 +276,37 @@ export default function Home() {
     content: t.description,
     eventDate: t.eventDate.toDate(),
     btnLink: t.btnLink,
+    image:t.imgURL,
   }));
 
+  const loaderSteps = [
+    { text: "This is It" },
+    { text: "Make It Count" },
+    { text: "Step Into Greatness" },
+    { text: "The Time Is Now" },
+    { text: "Don’t Look Back" },
+    { text: "Are You Ready?"},
+    { text: "2025" },
+  ];
 
 
   return (
-
-        <RootLayout>
+    <RootLayout>
+          
           <FloatingNav navItems={navItms}/>
+          <MultiStepLoader loop={false} loading={isLoading} loadingStates={loaderSteps} duration={600} exitCallback={()=>setIsLoading(false)} />      
+
           <HeroParallax products={products}/>
+
+       <div id="timeline">
           {
-            isTimelineLoading ? <Loading/> : (events.length > 0 ? <Timeline data={events} /> : <div>Timeline will be updated soon.</div>)
+            isTimelineLoading ? <Loading/> : (events.length > 0 ? <Timeline data={events} /> : <HeroHighlight><Highlighter firstString="" secondString="Timeline will be available soon." /> </HeroHighlight>)
           }
-          
+       </div>
 
+          <div id="sponsors">
           <LampLighting firstLine="Sponsers" secondLine=""/>
-          <button type="button" onClick={()=>console.log(loadProgress,totalItms,loadedItms)}>click {loadProgress}</button>
+          </div>
 
           {
             isSponsorsLoading ? <Loading/> : ( sponsors.length > 0 ?
@@ -319,24 +330,27 @@ export default function Home() {
                     {
                       sponsors.filter((sponsor)=>(sponsor.level == "Bronze") ).map((sponsor, index) =>(
                         <GlareCard key={`${sponsor.level}-${index}`} className="w-5xl" CardColor={sponsor.level}>
-                          <Para name={sponsor.name} imgURL={sponsor.imgURL} level={sponsor.level}  />
+                          <Para name={sponsor.name} imgURL={sponsor.imgURL} level={sponsor.level} />
                         </GlareCard>
                       ))
                     }
 
                 </TracingBeam>
                 :
-                <div> Sponsors will be updated soon.</div>
+                <HeroHighlight><Highlighter firstString="" secondString="Sponsors will be available soon." /> </HeroHighlight>
             )
         }
 
 
+        <div id="reach_us">
           <GridBackground title="Reach Us">
           <ReachUsSection grid={grid} />
           </GridBackground>
+        </div>
 
 
           <Footer />
+
         </RootLayout>
   );
 }
diff --git a/src/components/blocks/hilight.tsx b/src/components/blocks/hilight.tsx
@@ -0,0 +1,30 @@
+"use client";
+import { motion } from "framer-motion";
+import { HeroHighlight, Highlight } from "../ui/hero-highlight";
+
+export function Highlighter({ firstString, secondString }:{firstString: string, secondString: string}) {
+  return (
+    <HeroHighlight>
+      <motion.h1
+        initial={{
+          opacity: 0,
+          y: 20,
+        }}
+        animate={{
+          opacity: 1,
+          y: [20, -5, 0],
+        }}
+        transition={{
+          duration: 0.5,
+          ease: [0.4, 0.0, 0.2, 1],
+        }}
+        className="text-2xl px-4 md:text-4xl lg:text-5xl font-bold text-neutral-700 dark:text-white max-w-4xl leading-relaxed lg:leading-snug text-center mx-auto "
+      >
+        {`${firstString} ` }
+        <Highlight className="text-black dark:text-white">
+        {`${secondString} ` }
+        </Highlight>
+      </motion.h1>
+    </HeroHighlight>
+  );
+}
diff --git a/src/components/ui/floating-navbar.tsx b/src/components/ui/floating-navbar.tsx
@@ -11,6 +11,8 @@ import { cn } from "@/lib/utils";
 import Link from "next/link";
 import { MoonIcon, SunIcon } from "@heroicons/react/24/solid";
 import { ThemeContext } from "@/app/layout";
+import LOGO_SMALL from "../../../public/Images/logo/RUR20_small.png";
+import Image from "next/image";
 
 
 export const FloatingNav = ({
@@ -66,6 +68,17 @@ export const FloatingNav = ({
           className
         )}
       >
+
+        <Link href="/" className="relative">
+          <Image
+            src={LOGO_SMALL}
+            alt="logo"
+            className="rounded-full border dark:border-custom-dark-color-800 border-custom-color-800"
+            height={50}
+            width={50}
+          />
+        </Link>
+
         {navItems.map((navItem: any, idx: number) => (
           <Link
             key={`link=${idx}`}
@@ -90,10 +103,11 @@ export const FloatingNav = ({
           )}
         </button>
 
-        <button className="border text-sm font-medium relative border-neutral-200 dark:border-white/[0.2] text-black dark:text-white px-4 py-2 rounded-full">
+        {/* <button className="border text-sm font-medium relative border-neutral-200 dark:border-white/[0.2] text-black dark:text-white px-4 py-2 rounded-full">
           <span>Login</span>
           <span className="absolute inset-x-0 w-1/2 mx-auto -bottom-px bg-gradient-to-r from-transparent via-blue-500 to-transparent  h-px" />
-        </button>
+        </button> */}
+
       </motion.div>
     </AnimatePresence>
   );