#4 Basic Event Countdown Timer - Resolved

package.json

@@ -14,6 +14,7 @@
     "framer-motion": "^11.1.7",
     "gsap": "^3.12.5",
     "lil-gui": "^0.19.2",
+    "lottie-web": "^5.12.2",
     "react": "^18.2.0",
     "react-chrono": "^2.6.1",
     "react-d3-cloud": "^1.0.6",

src/App.jsx

@@ -1,68 +1,89 @@
 // Enhanced App component with updated styles and layout
-import React from 'react';
-import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
-import { motion } from 'framer-motion';
-import NavbarCard from './Components/NavbarCard';
-import Navigation from './Components/Navigation';
-import Events from './Components/Events';
-import StudentManagement from './Components/Achievements';
-import Projects from './Components/Projects';
-import './App.css'
-import Achievements from './Components/Achievements';
-import PastProjects from './Components/PastProjects';
-import UpcomingProjects from './Components/UpcomingProjects';
-import VerticalTimeline from './Components/Timeline';
-import Carousel from './Components/Carousel';
-import Hero from './Components/Hero';
-import Footer from "./Components/Footer"
-
-
+import React from "react";
+import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
+import { motion } from "framer-motion";
+import NavbarCard from "./Components/NavbarCard";
+import Navigation from "./Components/Navigation";
+import Events from "./Components/Events";
+import StudentManagement from "./Components/Achievements";
+import Projects from "./Components/Projects";
+import "./App.css";
+import Achievements from "./Components/Achievements";
+import PastProjects from "./Components/PastProjects";
+import UpcomingProjects from "./Components/UpcomingProjects";
+import VerticalTimeline from "./Components/Timeline";
+import Carousel from "./Components/Carousel";
+import Hero from "./Components/Hero";
+import Footer from "./Components/Footer";
+import Error404 from "./Components/Error404";
+import { ContextProvider } from "./Components/Context";
+import myHook from "./Components/Context";
 const Homepage = () => {
+  const { siteMode } = myHook();
+  console.log("Homepage siteMode:", siteMode);
+
   return (
     <div>
       <Hero />
-       {/* Text Section between Hero and Carousel */}
-      <div className="text-center py-8 px-4 md:px-12 bg-opacity-10 text-white">
+      {/* Text Section between Hero and Carousel */}
+      <div
+        className={`text-center py-8 px-4 md:px-12 bg-opacity-10 ${
+          siteMode === "dark" ? "text-white" : "text-black"
+        }`}
+      >
         <h2 className="text-4xl font-semibold mb-4">Welcome to Project X</h2>
-        <p className="text-xl">
-          We are an exclusive club at Veermata Jijabai Technological Institute, Mumbai. We provide a collaborative environment for students to learn, grow, and build projects together under mentorship. Explore our achievements, past projects, and upcoming events!
+        <p className="text-xl max-md:text-lg">
+          We are an exclusive club at Veermata Jijabai Technological Institute,
+          Mumbai. We provide a collaborative environment for students to learn,
+          grow, and build projects together under mentorship. Explore our
+          achievements, past projects, and upcoming events!
         </p>
       </div>
-
       <div>
         <Carousel />
       </div>
     </div>
   );
 };
 
+function App() {
+  return (
+    <ContextProvider>
+      <AppContent />
+    </ContextProvider>
+  );
+}
 
+function AppContent() {
+  const { siteMode } = myHook();
 
-
-function App() {
   return (
-    <div className='bgC'>
-    <Router>
-      <Navigation />
-      <Routes>
-        <Route path="/" element={<Homepage />} />
-        <Route path="/events" element={<Events />} />
-        <Route path="/projects" element={<Projects />} />
-        <Route path="/achievements" element={<Achievements />} />
-        <Route path="/past-projects" element={<PastProjects />} />
-        <Route path="/upcoming-projects" element={<UpcomingProjects />} />
-        {/* <Route path="/time" element={<VerticalTimeline />} /> */}
+    <div className={`${siteMode === "dark" ? "bgC" : "bgC-light"}`}>
+      <Router>
+        <Navigation />
+        <Routes>
+          <Route path="/" element={<Homepage />} />
+          <Route path="/events" element={<Events />} />
+          <Route path="/projects" element={<Projects />} />
+          <Route path="/achievements" element={<Achievements />} />
+          <Route path="/past-projects" element={<PastProjects />} />
+          <Route path="/upcoming-projects" element={<UpcomingProjects />} />
+          {/* <Route path="/time" element={<VerticalTimeline />} /> */}
 
-        {/* <Route path="/" element={<OrderManagement />} /> */}
-      </Routes>
-      <Footer />
-    </Router>
-    <div>
-    </div>
+          {/* <Route path="/" element={<OrderManagement />} /> */}
+
+          {/* New Routes */}
+
+          <Route path="*" element={<Error404 />} />
+        </Routes>
+        <Footer />
+      </Router>
     </div>
   );
 }
 
 export default App;
 
-{/* <div class="relative h-full w-full bg-slate-950"><div class="absolute bottom-0 left-0 right-0 top-0 bg-[linear-gradient(to_right,#4f4f4f2e_1px,transparent_1px),linear-gradient(to_bottom,#4f4f4f2e_1px,transparent_1px)] bg-[size:14px_24px]"></div></div> */ }
+{
+  /* <div class="relative h-full w-full bg-slate-950"><div class="absolute bottom-0 left-0 right-0 top-0 bg-[linear-gradient(to_right,#4f4f4f2e_1px,transparent_1px),linear-gradient(to_bottom,#4f4f4f2e_1px,transparent_1px)] bg-[size:14px_24px]"></div></div> */
+}

src/Components/Achievements.jsx

@@ -1,31 +1,65 @@
-import React from 'react';
-import CircularCard from './CircularCard';
-
+import React from "react";
+import CircularCard from "./CircularCard";
 const Achievements = () => {
   return (
-    <div className='min-h-screen'>
-      <h1 className="text-center mx-auto text-5xl font-mono py-12 bg-clip-text text-transparent bg-gradient-to-r from-purple-400 via-pink-300 to-red-300">
+    <div className="min-h-screen flex flex-col justify-center items-center w-[100%]">
+      <h1 className="text-center mx-auto text-5xl font-mono py-4 bg-clip-text text-transparent bg-gradient-to-r from-purple-400 via-pink-300 to-red-300">
         GSoC Contributors
       </h1>
-      <div className="grid grid-cols-6 px-3 gap-12 justify-center">
-        <div></div>
-        <CircularCard image='https://i.ibb.co/jJyjcvZ/Kshitij-Shah-photoaidcom-cropped.png' name='Kshitij Shah' organization='Sugarlabs' link="https://github.com/kshitijdshah99/Pippy_Activity" />
-        <CircularCard image='https://i.ibb.co/Z6fgX5F/IMG-20231110-003535-01-01-photoaidcom-cropped.png' name='Vedant Mehra' organization='CERN' link="https://hepsoftwarefoundation.org/gsoc/blogs/2024/blog_SOFIE_VedantMehra.html" />
-        <CircularCard image='https://i.ibb.co/Sm9FtJ2/1714656497995-photoaidcom-cropped.png' name='Mayank Palan' organization='Red Hen Lab' link="https://medium.com/@mayankpalan066/gsoc24-with-red-hen-lab-modeling-wayfinding-cfb0131b71d1" />
-        <CircularCard image='https://i.ibb.co/C640S72/Scanned-20240502-1627-1-page-0001-photoaidcom-cropped.png' name='Sharan Poojari' organization='NumFOCUS' link="https://github.com/aiidateam/aiida-explorer/blob/gsoc/gsoc/README.md" />
-        <div></div>
+      <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 px-3 gap-12  w-[90%] justify-items-center">
+        <CircularCard
+          image="https://i.ibb.co/jJyjcvZ/Kshitij-Shah-photoaidcom-cropped.png"
+          name="Kshitij Shah"
+          organization="Sugarlabs"
+          link="https://github.com/kshitijdshah99/Pippy_Activity"
+        />
+        <CircularCard
+          image="https://i.ibb.co/Z6fgX5F/IMG-20231110-003535-01-01-photoaidcom-cropped.png"
+          name="Vedant Mehra"
+          organization="CERN"
+          link="https://hepsoftwarefoundation.org/gsoc/blogs/2024/blog_SOFIE_VedantMehra.html"
+        />
+        <CircularCard
+          image="https://i.ibb.co/Sm9FtJ2/1714656497995-photoaidcom-cropped.png"
+          name="Mayank Palan"
+          organization="Red Hen Lab"
+          link="https://medium.com/@mayankpalan066/gsoc24-with-red-hen-lab-modeling-wayfinding-cfb0131b71d1"
+        />
+        <CircularCard
+          image="https://i.ibb.co/C640S72/Scanned-20240502-1627-1-page-0001-photoaidcom-cropped.png"
+          name="Sharan Poojari"
+          organization="NumFOCUS"
+          link="https://github.com/aiidateam/aiida-explorer/blob/gsoc/gsoc/README.md"
+        />
+      </div>
+
+      <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-3 px-6 gap-12 justify-center mt-5 w-[80%] justify-items-center ">
+        <CircularCard
+          image="https://i.ibb.co/T4D9vMh/IMG-20240502-172654-photoaidcom-cropped.png"
+          name="Warren Jacinto"
+          organization="Open Astronomy"
+          link="https://deadspheroid.github.io/my-blog/"
+        />
+
+        <CircularCard
+          image="https://i.ibb.co/t3vy9D9/IMG-20240502-WA0043-2-photoaidcom-cropped.png"
+          name="Tvisha Vedant"
+          organization="INCF"
+          link="https://tvilight4.github.io/MyBlog/"
+        />
+
+
+        <CircularCard
+          image="https://i.ibb.co/9WSz3ss/photo-photoaidcom-cropped.png"
+          name="Raya Chakravarthy"
+          organization="INCF"
+          link="https://raya679.github.io/gsoc/"
+        />
+        {/* <div></div> */}
+        {/* // <div></div>  */}
       </div>
-        <div className="grid grid-cols-7 px-6 justify-center gap-12">
-<div></div>
-<div></div>
-          <CircularCard image='https://i.ibb.co/T4D9vMh/IMG-20240502-172654-photoaidcom-cropped.png' name='Warren Jacinto' organization='Open Astronomy' link="https://deadspheroid.github.io/my-blog/" />
-          <CircularCard image='https://i.ibb.co/t3vy9D9/IMG-20240502-WA0043-2-photoaidcom-cropped.png' name='Tvisha Vedant' organization='INCF' link="https://tvilight4.github.io/MyBlog/" />
-          <CircularCard image='https://i.ibb.co/9WSz3ss/photo-photoaidcom-cropped.png' name='Raya Chakravarthy' organization='INCF' link="https://raya679.github.io/gsoc/" />
-          <div></div>
-          <div></div>
-        </div>
     </div>
   );
-}
+};
 
-export default Achievements;
+export default Achievements;

src/Components/Carousel.jsx

@@ -51,8 +51,8 @@ const Carousel = () => {
   }, [images.length]);
 
   return (
-    <div className="flex h-[80vh]">
-      <div className="w-full relative">
+    <div className="flex h-[80vh] w-[100%] justify-center p-2">
+      <div className="w-[90%] relative">
         <img
           src={images[currentIndex]}
           alt={`Slide ${currentIndex + 1}`}

src/Components/CircularCard.jsx

@@ -1,20 +1,38 @@
-import React from 'react';
-import { useSpring, animated } from 'react-spring';
-
+import React from "react";
+import { useSpring, animated } from "react-spring";
+import myHook from "./Context";
 const CircularCard = ({ image, name, organization, link }) => {
   const props = useSpring({ opacity: 1, from: { opacity: 0 } });
-
+  const { siteMode } = myHook();
   return (
-    <a href={link} target="_blank" rel="noopener noreferrer" className="no-underline">
-
-    <animated.div style={props} className="flex text-center font-mono flex-col items-center p-6 shadow-lg max-w-xs bg-transparent rounded-lg transform hover:scale-105 transition-transform duration-200 ease-in-out">
-      <div className="w-32 h-32 rounded-full overflow-hidden shadow-lg">
-        <img src={image} alt={name} className="w-full h-full object-cover" />
-      </div>
-      <h3 className="mt-4 text-xl font-bold text-purple-200">{name}</h3>
-      <p className="mt-2 text-cyan-200">{organization}</p>
-    </animated.div>
-
+    <a
+      href={link}
+      target="_blank"
+      rel="noopener noreferrer"
+      className="no-underline"
+    >
+      <animated.div
+        style={props}
+        className="flex text-center font-mono flex-col items-center p-6 shadow-lg max-w-xs bg-transparent rounded-lg transform hover:scale-105 transition-transform duration-200 ease-in-out"
+      >
+        <div className="w-32 h-32 rounded-full overflow-hidden shadow-lg">
+          <img src={image} alt={name} className="w-full h-full object-cover" />
+        </div>
+        <h3
+          className={`mt-4 text-xl font-bold ${
+            siteMode === "dark" ? "text-purple-200" : "text-purple-500"
+          } `}
+        >
+          {name}
+        </h3>
+        <p
+          className={`mt-2 ${
+            siteMode === "dark" ? "text-cyan-200" : "text-cyan-500"
+          }  `}
+        >
+          {organization}
+        </p>
+      </animated.div>
     </a>
   );
 };

src/Components/Context.jsx

@@ -0,0 +1,25 @@
+import React, { createContext, useContext, useEffect, useState } from "react";
+const Context = createContext();
+
+export const ContextProvider = ({ children }) => {
+
+  const [siteMode,setSiteMode]=useState(localStorage.getItem("siteMode") || "dark")
+
+  const value = {
+    siteMode,setSiteMode
+  };
+
+
+  useEffect(() => {
+    localStorage.setItem("siteMode", siteMode);
+  }, [siteMode]);
+
+  return <Context.Provider value={value}>{children}</Context.Provider>;
+};
+
+const myHook = () => {
+  const context = useContext(Context);
+  return context;
+};
+
+export default myHook;