From e5cb495309f524e20d9accea0bdeda24bc7e34bf Mon Sep 17 00:00:00 2001
From: shivraj0124 <shivrajkolwankar0124@gmail.com>
Date: Thu, 23 Jan 2025 18:35:06 +0530
Subject: [PATCH 1/3] 'Added_404_error_page'

---
 package-lock.json             |  7 +++++++
 package.json                  |  1 +
 src/App.jsx                   |  5 ++++-
 src/Components/Error404.jsx   | 37 +++++++++++++++++++++++++++++++++++
 src/Components/Navigation.jsx |  3 +++
 src/assets/Error_404.json     |  1 +
 6 files changed, 53 insertions(+), 1 deletion(-)
 create mode 100644 src/Components/Error404.jsx
 create mode 100644 src/assets/Error_404.json

diff --git a/package-lock.json b/package-lock.json
index 1bc508ef8..0bf28ca7c 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -12,6 +12,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",
@@ -8376,6 +8377,12 @@
         "loose-envify": "cli.js"
       }
     },
+    "node_modules/lottie-web": {
+      "version": "5.12.2",
+      "resolved": "https://registry.npmjs.org/lottie-web/-/lottie-web-5.12.2.tgz",
+      "integrity": "sha512-uvhvYPC8kGPjXT3MyKMrL3JitEAmDMp30lVkuq/590Mw9ok6pWcFCwXJveo0t5uqYw1UREQHofD+jVpdjBv8wg==",
+      "license": "MIT"
+    },
     "node_modules/lru-cache": {
       "version": "10.2.1",
       "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-10.2.1.tgz",
diff --git a/package.json b/package.json
index d555ef09d..bc5cfb494 100644
--- a/package.json
+++ b/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",
diff --git a/src/App.jsx b/src/App.jsx
index 99d8d90b1..b992c43d1 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -15,7 +15,7 @@ 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"
 
 const Homepage = () => {
   return (
@@ -54,6 +54,9 @@ function App() {
         {/* <Route path="/time" element={<VerticalTimeline />} /> */}
 
         {/* <Route path="/" element={<OrderManagement />} /> */}
+        
+        {/* New Routes */}
+        <Route path="*" element={<Error404 />} />
       </Routes>
       <Footer />
     </Router>
diff --git a/src/Components/Error404.jsx b/src/Components/Error404.jsx
new file mode 100644
index 000000000..1db5be7d2
--- /dev/null
+++ b/src/Components/Error404.jsx
@@ -0,0 +1,37 @@
+import React,{useEffect} from "react";
+import { Link } from "react-router-dom";
+import lottie from "lottie-web"
+import Error404 from "../assets/Error_404.json"
+
+
+const NotFoundPage = () => {
+  useEffect(() => {
+    const anim = lottie.loadAnimation({
+      container: document.getElementById('lottie-container'),
+      renderer: 'svg',
+      loop: true,
+      autoplay: true,
+      animationData: Error404, 
+    });
+    return () => anim.destroy(); 
+  }, []);
+  return (
+    <div className="flex flex-col items-center justify-center h-screen bg-transparent text-gray-800 text-center ">
+       <h1 className="text-[3rem] text-center font-mono tracking-widest text-transparent bg-clip-text bg-gradient-to-r from-blue-500 to-purple-600">
+          Oops!
+        </h1>
+      <div className=" h-80" id="lottie-container">
+      </div>
+        <p className="text-center text-lg mb-6 text-transparent bg-clip-text bg-gradient-to-r from-blue-500 to-purple-600">
+          This page doesn't exist!
+        </p>
+        <Link to="/">
+          <button className="px-6 py-3 text-white bg-gradient-to-r from-blue-600 to-purple-600 rounded-lg hover:bg-gradient-to-l  transition duration-300">
+            Go Back to Homepage
+          </button>
+        </Link>
+    </div>
+  );
+};
+
+export default NotFoundPage;
diff --git a/src/Components/Navigation.jsx b/src/Components/Navigation.jsx
index 764a54e79..bae92d6e0 100644
--- a/src/Components/Navigation.jsx
+++ b/src/Components/Navigation.jsx
@@ -3,6 +3,7 @@ import React from 'react';
 import { Link } from 'react-router-dom';
 import logo from '../assets/X_Logo.png';
 
+
 const Navigation = () => {
   return (
     <nav className="flex justify-between items-center p-4 bg-gradient-to-r bg-slate-900 border-b-2 border-gray-700">
@@ -22,3 +23,5 @@ const Navigation = () => {
 };
 
 export default Navigation;
+
+
diff --git a/src/assets/Error_404.json b/src/assets/Error_404.json
new file mode 100644
index 000000000..7123a4277
--- /dev/null
+++ b/src/assets/Error_404.json
@@ -0,0 +1 @@
+{"nm":"404error-01","ddd":0,"h":600,"w":800,"meta":{"g":"LottieFiles AE 0.1.20"},"layers":[{"ty":0,"nm":"Disappointed Face","sr":1,"st":0,"op":62.5,"ip":0,"hd":false,"ddd":0,"bm":0,"hasMask":false,"ao":0,"ks":{"a":{"a":0,"k":[1920,1080,0],"ix":1},"s":{"a":0,"k":[15,15,100],"ix":6},"sk":{"a":0,"k":0},"p":{"a":0,"k":[400,224,0],"ix":2},"r":{"a":0,"k":0,"ix":10},"sa":{"a":0,"k":0},"o":{"a":0,"k":100,"ix":11}},"ef":[],"w":3840,"h":2160,"refId":"comp_0","ind":1},{"ty":4,"nm":"404error-01 Outlines","sr":1,"st":0,"op":63,"ip":0,"hd":false,"ddd":0,"bm":0,"hasMask":false,"ao":0,"ks":{"a":{"a":0,"k":[400,300,0],"ix":1},"s":{"a":1,"k":[{"o":{"x":0.167,"y":0.167},"i":{"x":0.833,"y":0.667},"s":[0,0,100],"t":0},{"o":{"x":0.167,"y":0.111},"i":{"x":0.833,"y":0.778},"s":[1.861,1.861,100],"t":1},{"o":{"x":0.167,"y":0.133},"i":{"x":0.833,"y":0.8},"s":[7.444,7.444,100],"t":2},{"o":{"x":0.167,"y":0.143},"i":{"x":0.833,"y":0.81},"s":[16.748,16.748,100],"t":3},{"o":{"x":0.167,"y":0.148},"i":{"x":0.833,"y":0.869},"s":[29.775,29.775,100],"t":4},{"o":{"x":0.167,"y":0.228},"i":{"x":0.833,"y":0.961},"s":[46.523,46.523,100],"t":5},{"o":{"x":0.167,"y":-0.073},"i":{"x":0.833,"y":0.894},"s":[56.158,56.158,100],"t":6},{"o":{"x":0.167,"y":0.384},"i":{"x":0.833,"y":1.051},"s":[51.011,51.011,100],"t":7},{"o":{"x":0.167,"y":0.032},"i":{"x":0.833,"y":0.698},"s":[49.585,49.585,100],"t":8},{"o":{"x":0.167,"y":0.115},"i":{"x":0.833,"y":0.922},"s":[51.882,51.882,100],"t":9},{"o":{"x":0.167,"y":-1.146},"i":{"x":0.833,"y":1.209},"s":[57.9,57.9,100],"t":10},{"o":{"x":0.167,"y":0.06},"i":{"x":0.833,"y":0.912},"s":[57.492,57.492,100],"t":11},{"o":{"x":0.167,"y":1.632},"i":{"x":0.833,"y":0.917},"s":[58.923,58.923,100],"t":12},{"o":{"x":0.167,"y":0.167},"i":{"x":0.833,"y":0.833},"s":[59,59,100],"t":13},{"o":{"x":0.167,"y":0.167},"i":{"x":0.833,"y":0.833},"s":[59,59,100],"t":14},{"o":{"x":0.167,"y":0.167},"i":{"x":0.833,"y":0.833},"s":[59,59,100],"t":15},{"o":{"x":0.167,"y":0.167},"i":{"x":0.833,"y":0.833},"s":[59,59,100],"t":16},{"o":{"x":0.167,"y":0.167},"i":{"x":0.833,"y":0.833},"s":[59,59,100],"t":17},{"o":{"x":0.167,"y":0.167},"i":{"x":0.833,"y":0.833},"s":[59,59,100],"t":18},{"o":{"x":0.167,"y":0.167},"i":{"x":0.833,"y":0.833},"s":[59,59,100],"t":19},{"o":{"x":0.167,"y":0.167},"i":{"x":0.833,"y":0.833},"s":[59,59,100],"t":20},{"o":{"x":0.167,"y":0.167},"i":{"x":0.833,"y":0.833},"s":[59,59,100],"t":21},{"o":{"x":0.167,"y":0.167},"i":{"x":0.833,"y":0.833},"s":[59,59,100],"t":22},{"o":{"x":0.167,"y":0.167},"i":{"x":0.833,"y":0.833},"s":[59,59,100],"t":23},{"o":{"x":0.167,"y":0.167},"i":{"x":0.833,"y":0.833},"s":[59,59,100],"t":24},{"o":{"x":0.167,"y":0.167},"i":{"x":0.833,"y":0.833},"s":[59,59,100],"t":25},{"o":{"x":0.167,"y":0.167},"i":{"x":0.833,"y":0.833},"s":[59,59,100],"t":26},{"o":{"x":0.167,"y":0.167},"i":{"x":0.833,"y":0.833},"s":[59,59,100],"t":27},{"o":{"x":0.167,"y":0.167},"i":{"x":0.833,"y":0.833},"s":[59,59,100],"t":28},{"o":{"x":0.167,"y":0.167},"i":{"x":0.833,"y":0.833},"s":[59,59,100],"t":29},{"o":{"x":0.167,"y":0.167},"i":{"x":0.833,"y":0.833},"s":[59,59,100],"t":30},{"o":{"x":0.167,"y":0.167},"i":{"x":0.833,"y":0.833},"s":[59,59,100],"t":31},{"o":{"x":0.167,"y":0.167},"i":{"x":0.833,"y":0.833},"s":[59,59,100],"t":32},{"o":{"x":0.167,"y":0.167},"i":{"x":0.833,"y":0.833},"s":[59,59,100],"t":33},{"o":{"x":0.167,"y":0.167},"i":{"x":0.833,"y":0.833},"s":[59,59,100],"t":34},{"o":{"x":0.167,"y":0.167},"i":{"x":0.833,"y":0.833},"s":[59,59,100],"t":35},{"o":{"x":0.167,"y":0.167},"i":{"x":0.833,"y":0.833},"s":[59,59,100],"t":36},{"o":{"x":0.167,"y":0.167},"i":{"x":0.833,"y":0.833},"s":[59,59,100],"t":37},{"o":{"x":0.167,"y":0.167},"i":{"x":0.833,"y":0.833},"s":[59,59,100],"t":38},{"o":{"x":0.167,"y":0.167},"i":{"x":0.833,"y":0.833},"s":[59,59,100],"t":39},{"o":{"x":0.167,"y":0.167},"i":{"x":0.833,"y":0.833},"s":[59,59,100],"t":40},{"o":{"x":0.167,"y":0.167},"i":{"x":0.833,"y":0.833},"s":[59,59,100],"t":41},{"o":{"x":0.167,"y":0.167},"i":{"x":0.833,"y":0.833},"s":[59,59,100],"t":42},{"o":{"x":0.167,"y":0.167},"i":{"x":0.833,"y":0.833},"s":[59,59,100],"t":43},{"o":{"x":0.167,"y":0.167},"i":{"x":0.833,"y":0.833},"s":[59,59,100],"t":44},{"o":{"x":0.167,"y":0.167},"i":{"x":0.833,"y":0.833},"s":[59,59,100],"t":45},{"o":{"x":0.167,"y":0.083},"i":{"x":0.833,"y":0.602},"s":[59,59,100],"t":46},{"o":{"x":0.167,"y":0.105},"i":{"x":0.833,"y":0.817},"s":[58.845,58.845,100],"t":47},{"o":{"x":0.167,"y":0.153},"i":{"x":0.833,"y":0.967},"s":[58.257,58.257,100],"t":48},{"o":{"x":0.167,"y":-0.055},"i":{"x":0.833,"y":1.965},"s":[57.558,57.558,100],"t":49},{"o":{"x":0.167,"y":0.077},"i":{"x":0.833,"y":0.874},"s":[57.98,57.98,100],"t":50},{"o":{"x":0.167,"y":0.246},"i":{"x":0.833,"y":0.913},"s":[52.671,52.671,100],"t":51},{"o":{"x":0.167,"y":1.833},"i":{"x":0.833,"y":2.5},"s":[49.952,49.952,100],"t":52},{"o":{"x":0.167,"y":0.079},"i":{"x":0.833,"y":0.746},"s":[49.822,49.822,100],"t":53},{"o":{"x":0.167,"y":0.124},"i":{"x":0.833,"y":1.093},"s":[52.283,52.283,100],"t":54},{"o":{"x":0.167,"y":0.044},"i":{"x":0.833,"y":0.806},"s":[57.333,57.333,100],"t":55},{"o":{"x":0.167,"y":0.146},"i":{"x":0.833,"y":0.848},"s":[46.617,46.617,100],"t":56},{"o":{"x":0.167,"y":0.185},"i":{"x":0.833,"y":0.852},"s":[32.373,32.373,100],"t":57},{"o":{"x":0.167,"y":0.19},"i":{"x":0.833,"y":0.857},"s":[20.719,20.719,100],"t":58},{"o":{"x":0.167,"y":0.2},"i":{"x":0.833,"y":0.867},"s":[11.654,11.654,100],"t":59},{"o":{"x":0.167,"y":0.222},"i":{"x":0.833,"y":0.889},"s":[5.18,5.18,100],"t":60},{"o":{"x":0.167,"y":0.333},"i":{"x":0.833,"y":0.833},"s":[1.295,1.295,100],"t":61},{"s":[0,0,100],"t":62}],"ix":6},"sk":{"a":0,"k":0},"p":{"a":0,"k":[400.075,385,0],"ix":2},"r":{"a":0,"k":0,"ix":10},"sa":{"a":0,"k":0},"o":{"a":0,"k":100,"ix":11}},"ef":[{"ty":5,"mn":"Pseudo/MHAC PrCtrl BCO 4","nm":"AC IN [BCO] Controls","ix":1,"en":1,"ef":[{"ty":0,"mn":"Pseudo/MHAC PrCtrl BCO 4-0001","nm":"Scale","ix":1,"v":{"a":0,"k":0,"ix":1}}]},{"ty":5,"mn":"Pseudo/MHAC PrCtrl BCO 4","nm":"AC OUT [BCO] 2 Controls","ix":2,"en":1,"ef":[{"ty":0,"mn":"Pseudo/MHAC PrCtrl BCO 4-0001","nm":"Scale","ix":1,"v":{"a":0,"k":0,"ix":1}}]}],"shapes":[{"ty":"gr","bm":0,"hd":false,"mn":"ADBE Vector Group","nm":"Group 1","ix":1,"cix":2,"np":5,"it":[{"ty":"sh","bm":0,"hd":false,"mn":"ADBE Vector Shape - Group","nm":"Path 1","ix":1,"d":1,"ks":{"a":0,"k":{"c":true,"i":[[1.187,-8.21],[2.893,-4.207],[5.788,8.371],[0.87,6.257],[-2.908,14.863],[-2.728,4.077],[-6.116,-9.902],[-0.827,-4.471],[-0.942,-8.217]],"o":[[-0.717,4.962],[-5.797,8.431],[-3.719,-5.376],[-2.073,-14.918],[0.933,-4.769],[6.466,-9.665],[2.393,3.876],[1.477,7.98],[-0.934,8.262]],"v":[[15.541,24.061],[9.945,37.809],[-14.84,37.751],[-21.23,20.079],[-20.534,-24.647],[-15.348,-38.059],[10.437,-37.928],[15.46,-25.035],[18.409,-0.685]]},"ix":2}},{"ty":"sh","bm":0,"hd":false,"mn":"ADBE Vector Shape - Group","nm":"Path 2","ix":2,"d":1,"ks":{"a":0,"k":{"c":true,"i":[[0,0],[0.851,8.614],[4.237,-1.107],[0,0],[0,0],[-22.176,33.365],[0,0],[25.02,-36.222],[0,0],[0,0],[0.002,1.456],[0.145,9.662],[-1.715,2.45],[-10.025,14.529],[0.223,0.965],[5.037,8.34],[12.328,6.307],[12.681,0.16],[11.082,-33.506],[-1.206,-16.626],[-8.325,-13.893],[-15.157,-6.194],[-15.736,2.687],[-11.629,15.539],[-0.936,1.2],[0,0],[0,0],[-3.948,1.165],[0,0],[0,0],[0,0]],"o":[[-0.822,-9.3],[-12.041,-0.87],[0,0],[0,0],[22.194,-33.393],[0,0],[-24.86,35.991],[0,0],[0,0],[-0.075,-1.679],[-0.017,-9.665],[-0.045,-2.985],[9.925,-14.188],[-0.193,-1.258],[-2.189,-9.484],[-7.151,-11.838],[-11.349,-5.807],[-36.17,-0.458],[-5.254,15.885],[1.161,16.013],[8.408,14.03],[14.896,6.087],[19.044,-3.252],[1.181,-1.578],[0,0],[0,0],[12.557,0.936],[0,0],[0,0],[0,0],[0,0]],"v":[[199.906,11.483],[199.273,-15.205],[143.553,-14.585],[143.553,11.181],[120.005,11.181],[186.139,-88.326],[125.238,-88.326],[50.48,19.905],[50.48,57.435],[42.675,57.435],[42.477,52.842],[42.414,23.85],[44.852,15.998],[74.588,-27.004],[74.086,-30.221],[63.178,-56.9],[34.172,-84.319],[-2.002,-92.53],[-76.489,-38.72],[-81.726,10.111],[-68.517,55.177],[-33.39,85.79],[12.742,90.301],[58.891,62.174],[62.249,57.863],[142.121,57.863],[142.121,87.305],[199.802,86.667],[199.802,57.436],[222.999,57.436],[222.999,11.483]]},"ix":2}},{"ty":"sh","bm":0,"hd":false,"mn":"ADBE Vector Shape - Group","nm":"Path 3","ix":3,"d":1,"ks":{"a":0,"k":{"c":true,"i":[[0.735,1.45],[1.548,3.485],[-1.209,19.702],[-0.09,1.406],[4.339,-1.133],[0,0],[0,0],[-10.903,16.461],[-10.984,16.987],[0,0],[24.634,-35.665],[0,0],[0,0],[0,0],[0,0],[-6.164,-0.057],[-6.332,-0.467],[0,0],[0,0],[0.151,8.483]],"o":[[-1.729,-3.411],[-8.103,-18.243],[0.089,-1.452],[-5.13,-1.016],[0,0],[0,0],[11.345,-17.051],[10.861,-16.398],[0,0],[-24.958,36.133],[0,0],[0,0],[0,0],[0,0],[6.165,0],[5.92,0.054],[0,0],[0,0],[0,-8.906],[-0.028,-1.562]],"v":[[-75.85,56.798],[-81.279,46.691],[-90.119,-10.484],[-89.844,-14.794],[-130.254,-14.563],[-130.254,11.204],[-153.831,11.204],[-120.62,-38.728],[-87.711,-88.379],[-148.527,-88.379],[-222.999,19.441],[-222.999,57.518],[-204.766,57.518],[-186.272,57.518],[-168.277,57.518],[-149.783,57.531],[-131.592,57.751],[-131.592,87.316],[-74.224,87.316],[-74.296,61.44]]},"ix":2}},{"ty":"mm","bm":0,"hd":false,"mn":"ADBE Vector Filter - Merge","nm":"Merge Paths 1","mm":1},{"ty":"fl","bm":0,"hd":false,"mn":"ADBE Vector Graphic - Fill","nm":"Fill 1","c":{"a":0,"k":[0.4824,0.0667,0.4824],"ix":4},"r":1,"o":{"a":0,"k":100,"ix":5}},{"ty":"tr","a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"sk":{"a":0,"k":0,"ix":4},"p":{"a":0,"k":[399.925,423.322],"ix":2},"r":{"a":0,"k":0,"ix":6},"sa":{"a":0,"k":0,"ix":5},"o":{"a":0,"k":100,"ix":7}}]}],"ind":2}],"v":"5.5.7","fr":25,"op":63,"ip":0,"assets":[{"nm":"","id":"comp_0","layers":[{"ty":0,"nm":"Disappointed Face","sr":1,"st":0,"op":62.5,"ip":0,"hd":false,"ddd":0,"bm":0,"hasMask":false,"ao":0,"ks":{"a":{"a":0,"k":[1000,1000,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6},"sk":{"a":0,"k":0},"p":{"a":0,"k":[1920,1080,0],"ix":2},"r":{"a":0,"k":0,"ix":10},"sa":{"a":0,"k":0},"o":{"a":0,"k":100,"ix":11}},"ef":[],"w":2000,"h":2000,"refId":"comp_1","ind":1}]},{"nm":"","id":"comp_1","layers":[{"ty":4,"nm":"Eye 2","sr":1,"st":0,"op":62.5,"ip":0,"hd":false,"ddd":0,"bm":0,"hasMask":false,"ao":0,"ks":{"a":{"a":0,"k":[600,600,0],"ix":1},"s":{"a":0,"k":[195,195,100],"ix":6},"sk":{"a":0,"k":0},"p":{"a":0,"k":[0,0,0],"ix":2},"r":{"a":0,"k":0,"ix":10},"sa":{"a":0,"k":0},"o":{"a":0,"k":100,"ix":11}},"ef":[],"shapes":[{"ty":"gr","bm":0,"hd":false,"mn":"ADBE Vector Group","nm":"Group 1","ix":1,"cix":2,"np":2,"it":[{"ty":"sh","bm":0,"hd":false,"mn":"ADBE Vector Shape - Group","nm":"Path 1","ix":1,"d":1,"ks":{"a":0,"k":{"c":true,"i":[[33.818,13.947],[16.704,27.865],[-0.167,-6.466],[-42.714,-17.616],[-34.71,33.171],[6.269,-1.589]],"o":[[-33.817,-13.946],[-3.325,-5.547],[1.237,47.995],[42.714,17.616],[4.675,-4.468],[-31.491,7.991]],"v":[[-11.199,3.285],[-88.248,-62.099],[-99.912,-58.677],[-30.477,50.029],[95.404,21.872],[89.542,11.222]]},"ix":2}},{"ty":"fl","bm":0,"hd":false,"mn":"ADBE Vector Graphic - Fill","nm":"Fill 1","c":{"a":0,"k":[0.4078,0.5098,0.9686],"ix":4},"r":1,"o":{"a":0,"k":100,"ix":5}},{"ty":"tr","a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"sk":{"a":0,"k":0,"ix":4},"p":{"a":0,"k":[780.991,637.492],"ix":2},"r":{"a":0,"k":0,"ix":6},"sa":{"a":0,"k":0,"ix":5},"o":{"a":0,"k":100,"ix":7}}]}],"ind":1,"parent":4},{"ty":4,"nm":"Eye","sr":1,"st":0,"op":62.5,"ip":0,"hd":false,"ddd":0,"bm":0,"hasMask":false,"ao":0,"ks":{"a":{"a":0,"k":[600,600,0],"ix":1},"s":{"a":0,"k":[195,195,100],"ix":6},"sk":{"a":0,"k":0},"p":{"a":0,"k":[0,0,0],"ix":2},"r":{"a":0,"k":0,"ix":10},"sa":{"a":0,"k":0},"o":{"a":0,"k":100,"ix":11}},"ef":[],"shapes":[{"ty":"gr","bm":0,"hd":false,"mn":"ADBE Vector Group","nm":"Group 1","ix":1,"cix":2,"np":2,"it":[{"ty":"sh","bm":0,"hd":false,"mn":"ADBE Vector Shape - Group","nm":"Path 1","ix":1,"d":1,"ks":{"a":0,"k":{"c":true,"i":[[-33.818,13.947],[-16.704,27.865],[0.167,-6.466],[42.714,-17.616],[34.71,33.171],[-6.269,-1.589]],"o":[[33.818,-13.946],[3.326,-5.547],[-1.236,47.995],[-42.715,17.616],[-4.676,-4.468],[31.491,7.991]],"v":[[11.2,3.285],[88.249,-62.099],[99.913,-58.677],[30.478,50.029],[-95.403,21.872],[-89.541,11.222]]},"ix":2}},{"ty":"fl","bm":0,"hd":false,"mn":"ADBE Vector Graphic - Fill","nm":"Fill 1","c":{"a":0,"k":[0.4078,0.5098,0.9686],"ix":4},"r":1,"o":{"a":0,"k":100,"ix":5}},{"ty":"tr","a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"sk":{"a":0,"k":0,"ix":4},"p":{"a":0,"k":[419.008,637.492],"ix":2},"r":{"a":0,"k":0,"ix":6},"sa":{"a":0,"k":0,"ix":5},"o":{"a":0,"k":100,"ix":7}}]}],"ind":2,"parent":4},{"ty":4,"nm":"Mouth","sr":1,"st":0,"op":62.5,"ip":0,"hd":false,"ddd":0,"bm":0,"hasMask":false,"ao":0,"ks":{"a":{"a":0,"k":[600,600,0],"ix":1},"s":{"a":0,"k":[195,195,100],"ix":6},"sk":{"a":0,"k":0},"p":{"a":0,"k":[0,0,0],"ix":2},"r":{"a":0,"k":0,"ix":10},"sa":{"a":0,"k":0},"o":{"a":0,"k":100,"ix":11}},"ef":[],"shapes":[{"ty":"gr","bm":0,"hd":false,"mn":"ADBE Vector Group","nm":"Group 1","ix":1,"cix":2,"np":2,"it":[{"ty":"sh","bm":0,"hd":false,"mn":"ADBE Vector Shape - Group","nm":"Path 1","ix":1,"d":1,"ks":{"a":1,"k":[{"o":{"x":0.333,"y":0},"i":{"x":0.667,"y":1},"s":[{"c":true,"i":[[-35.533,0],[-26.097,-10.693],[1.994,6.686],[52.321,0],[11.382,-38.163],[-7.204,2.952]],"o":[[35.533,0],[7.205,2.952],[-11.382,-38.163],[-52.322,0],[-1.994,6.687],[26.097,-10.693]],"v":[[0,19.409],[94.347,36.468],[107.5,27.176],[0,-39.42],[-107.5,27.176],[-94.347,36.468]]}],"t":0},{"o":{"x":0.333,"y":0},"i":{"x":0.2,"y":1},"s":[{"c":true,"i":[[-30.997,0],[-22.766,-15.018],[1.74,9.39],[45.642,0],[9.928,-53.601],[-6.285,4.146]],"o":[[30.997,0],[6.285,4.146],[-9.929,-53.601],[-45.643,0],[-1.74,9.392],[22.766,-15.018]],"v":[[0,11.314],[82.304,35.274],[93.778,22.223],[0,-71.312],[-93.778,22.223],[-82.304,35.274]]}],"t":12.5},{"s":[{"c":true,"i":[[-35.533,0],[-26.097,-10.693],[1.994,6.686],[52.321,0],[11.382,-38.163],[-7.204,2.952]],"o":[[35.533,0],[7.205,2.952],[-11.382,-38.163],[-52.322,0],[-1.994,6.687],[26.097,-10.693]],"v":[[0,19.409],[94.347,36.468],[107.5,27.176],[0,-39.42],[-107.5,27.176],[-94.347,36.468]]}],"t":37.5}],"ix":2}},{"ty":"fl","bm":0,"hd":false,"mn":"ADBE Vector Graphic - Fill","nm":"Fill 1","c":{"a":0,"k":[0.4824,0.0667,0.4824],"ix":4},"r":1,"o":{"a":0,"k":100,"ix":5}},{"ty":"tr","a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"sk":{"a":0,"k":0,"ix":4},"p":{"a":0,"k":[600,822.454],"ix":2},"r":{"a":0,"k":0,"ix":6},"sa":{"a":0,"k":0,"ix":5},"o":{"a":0,"k":100,"ix":7}}]}],"ind":3,"parent":4},{"ty":3,"nm":"Null 56","sr":1,"st":0,"op":62.5,"ip":0,"hd":false,"ddd":0,"bm":0,"hasMask":false,"ao":0,"ks":{"a":{"a":0,"k":[0,0,0],"ix":1},"s":{"a":0,"k":[51.282,51.282,100],"ix":6},"sk":{"a":0,"k":0},"p":{"a":1,"k":[{"o":{"x":0.333,"y":0},"i":{"x":0.667,"y":1},"s":[600,600,0],"t":0,"ti":[0,0,0],"to":[0,0,0]},{"o":{"x":0.4,"y":0},"i":{"x":0.2,"y":1},"s":[600,522.789,0],"t":12.5,"ti":[0,0,0],"to":[0,0,0]},{"s":[600,600,0],"t":46.25}],"ix":2},"r":{"a":0,"k":0,"ix":10},"sa":{"a":0,"k":0},"o":{"a":0,"k":0,"ix":11}},"ef":[],"ind":4,"parent":5},{"ty":4,"nm":"Head","sr":1,"st":0,"op":62.5,"ip":0,"hd":false,"ddd":0,"bm":0,"hasMask":false,"ao":0,"ks":{"a":{"a":0,"k":[600,1006.516,0],"ix":1},"s":{"a":1,"k":[{"o":{"x":0.167,"y":0.167},"i":{"x":0.833,"y":0.833},"s":[195,195,100],"t":0},{"o":{"x":0.167,"y":0.167},"i":{"x":0.833,"y":0.833},"s":[180,210,100],"t":7.917},{"s":[195,195,100],"t":38.75}],"ix":6},"sk":{"a":0,"k":0},"p":{"a":0,"k":[1000,1792.706,0],"ix":2},"r":{"a":0,"k":0,"ix":10},"sa":{"a":0,"k":0},"o":{"a":0,"k":100,"ix":11}},"ef":[],"shapes":[{"ty":"gr","bm":0,"hd":false,"mn":"ADBE Vector Group","nm":"Group 9","ix":1,"cix":2,"np":2,"it":[{"ty":"sh","bm":0,"hd":false,"mn":"ADBE Vector Shape - Group","nm":"Path 1","ix":1,"d":1,"ks":{"a":0,"k":{"c":true,"i":[[0,-224.513],[224.513,0],[0,224.513],[-224.512,0]],"o":[[0,224.513],[-224.512,0],[0,-224.513],[224.513,0]],"v":[[406.516,0],[0,406.516],[-406.516,0],[0,-406.516]]},"ix":2}},{"ty":"st","bm":0,"hd":false,"mn":"ADBE Vector Graphic - Stroke","nm":"Stroke 1","lc":1,"lj":1,"ml":4,"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":40,"ix":5},"c":{"a":0,"k":[0.4078,0.5098,0.9686],"ix":3}},{"ty":"tr","a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"sk":{"a":0,"k":0,"ix":4},"p":{"a":0,"k":[600,600],"ix":2},"r":{"a":0,"k":0,"ix":6},"sa":{"a":0,"k":0,"ix":5},"o":{"a":0,"k":100,"ix":7}}]}],"ind":5}]}]}
\ No newline at end of file

From dc6998589fe91578a5a1b52f202ae6c1701604b9 Mon Sep 17 00:00:00 2001
From: shivraj0124 <shivrajkolwankar0124@gmail.com>
Date: Thu, 23 Jan 2025 23:36:12 +0530
Subject: [PATCH 2/3] 'responsive-lightDarkMode-done'

---
 src/App.jsx                     | 110 +++++++++++++++++-------------
 src/Components/Achievements.jsx |  82 ++++++++++++++++-------
 src/Components/Carousel.jsx     |   4 +-
 src/Components/CircularCard.jsx |   8 +--
 src/Components/Context.jsx      |  25 +++++++
 src/Components/Events.jsx       | 115 +++++++++++++++++---------------
 src/Components/FeatureCard.jsx  |  15 +++--
 src/Components/Hero.jsx         |  38 ++++++-----
 src/Components/Navigation.jsx   |  92 +++++++++++++++++++++----
 src/Components/PastProjects.jsx |  11 +--
 src/Components/Projects.jsx     |  16 +++--
 src/index.css                   |  56 +++++++++++++++-
 12 files changed, 394 insertions(+), 178 deletions(-)
 create mode 100644 src/Components/Context.jsx

diff --git a/src/App.jsx b/src/App.jsx
index b992c43d1..736215080 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -1,34 +1,44 @@
 // 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 Error404 from "./Components/Error404"
-
+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>
@@ -36,36 +46,44 @@ const Homepage = () => {
   );
 };
 
+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 />} /> */}
-        
-        {/* New Routes */}
-        <Route path="*" element={<Error404 />} />
-      </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> */ }
\ No newline at end of file
+{
+  /* <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> */
+}
diff --git a/src/Components/Achievements.jsx b/src/Components/Achievements.jsx
index 3214455e2..01d972bc4 100644
--- a/src/Components/Achievements.jsx
+++ b/src/Components/Achievements.jsx
@@ -1,31 +1,67 @@
-import React from 'react';
-import CircularCard from './CircularCard';
-
+import React from "react";
+import CircularCard from "./CircularCard";
+import myHook from "./Context";
 const Achievements = () => {
+  const { siteMode } = myHook();
   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;
\ No newline at end of file
diff --git a/src/Components/Carousel.jsx b/src/Components/Carousel.jsx
index 8b2fa2564..7f9c62a65 100644
--- a/src/Components/Carousel.jsx
+++ b/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}`}
diff --git a/src/Components/CircularCard.jsx b/src/Components/CircularCard.jsx
index fe20619b8..e2c03359b 100644
--- a/src/Components/CircularCard.jsx
+++ b/src/Components/CircularCard.jsx
@@ -1,9 +1,9 @@
 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">
 
@@ -11,8 +11,8 @@ const CircularCard = ({ image, name, organization, link }) => {
       <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>
+      <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>
diff --git a/src/Components/Context.jsx b/src/Components/Context.jsx
new file mode 100644
index 000000000..96ff346c3
--- /dev/null
+++ b/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;
\ No newline at end of file
diff --git a/src/Components/Events.jsx b/src/Components/Events.jsx
index c6085cfa1..e20b39840 100644
--- a/src/Components/Events.jsx
+++ b/src/Components/Events.jsx
@@ -1,105 +1,116 @@
+// --------
 import React from "react";
 import { Chrono } from "react-chrono";
-import '../App.css'
+import myHook from "./Context"; // Import the custom hook for context
+import "../App.css";
 
 const Events = () => {
+  const { siteMode } = myHook(); // Get the current theme from context
+
   const items = [
     {
       title: "March 19 2024",
       cardTitle: "Open Source Introduction",
-      // cardSubtitle: "Men of the British Expeditionary Force (BEF) wade out to...",
       cardDetailedText: "Open source software is software with source code that anyone can inspect, modify, and enhance",
       media: {
         type: "IMAGE",
         source: {
-          url: "src/assets/Xplore_1.jpg"
-        }
-      }
+          url: "src/assets/Xplore_1.jpg",
+        },
+      },
     },
     {
       title: "April 24 2024",
       cardTitle: "OpenCV Workshop",
-      // cardSubtitle: "OpenCV is a library of programming functions mainly for real-time computer vision..",
       cardDetailedText: "OpenCV is a library of programming functions mainly for real-time computer vision",
       media: {
         type: "IMAGE",
         source: {
-          url: "src/assets/OpenCV.jpg"
-        }
-      }
+          url: "src/assets/OpenCV.jpg",
+        },
+      },
     },
     {
       title: "June - July 2024",
       cardTitle: "Selection Phase for batch of 2027",
-      // cardSubtitle: "A surprise military strike by the Imperial Japanese Navy Air Service...",
-      cardDetailedText: "An exhuastive process involving tasks, proposal preparations and interviews was carried out to shortlists sys for the mentorship program.",
+      cardDetailedText: "An exhaustive process involving tasks, proposal preparations, and interviews was carried out to shortlist Sys for the mentorship program.",
       media: {
         type: "IMAGE",
         source: {
-          url: "src/assets/selection_phase.png"
-        }
-      }
+          url: "src/assets/selection_phase.png",
+        },
+      },
     },
     {
       title: "July - October",
-      cardTitle: "Weekly Meets and project development phase",
-      // cardSubtitle: "Men of the British Expeditionary Force (BEF) wade out to...",
-      cardDetailedText: "Sys developed their respective projects under the mentorship of Tys which was continuosly monitored by Lys via weekly presentations.",
+      cardTitle: "Weekly Meets and Project Development Phase",
+      cardDetailedText: "Sys developed their respective projects under the mentorship of Tys, which was continuously monitored by Lys via weekly presentations.",
       media: {
         type: "IMAGE",
         source: {
-          url: "src/assets/Weekly_meet.JPG"
-        }
-      }
+          url: "src/assets/Weekly_meet.JPG",
+        },
+      },
     },
     {
       title: "October 19 2024",
       cardTitle: "Final Presentation",
-      // cardSubtitle: "Men of the British Expeditionary Force (BEF) wade out to...",
-      cardDetailedText: "The project development phase was wrapped up , here the Sys presented their work and answered the questions posed to them.",
+      cardDetailedText: "The project development phase was wrapped up, and the Sys presented their work and answered the questions posed to them.",
       media: {
         type: "IMAGE",
         source: {
-          url: "src/assets/final_presentation.jpeg"
-        }
-      }
-    }
+          url: "src/assets/final_presentation.jpeg",
+        },
+      },
+    },
   ];
 
+  // Theme configurations for light and dark modes
+  const theme = siteMode === "dark" ? {
+    primary: "#fff",
+    secondary: "#e2e8f0",
+    cardBgColor: "rgba(30, 41, 59, 0.8)",
+    cardDetailsColor: "#e2e8f0",
+    cardSubtitleColor: "#a0aec0",
+    cardForeColor: "#fff",
+    titleColor: "#fff",
+    cardText: "#e2e8f0",
+    lineColor: "#4a5568",
+    dotColor: "#0b228c",
+  } : {
+    primary: "#1a202c",
+    secondary: "#718096",
+    cardBgColor: "rgba(255, 255, 255, 0.9)",
+    cardDetailsColor: "#2d3748",
+    cardSubtitleColor: "#4a5568",
+    cardForeColor: "#1a202c",
+    titleColor: "#1a202c",
+    cardText:"white",
+    lineColor: "#a0aec0",
+    dotColor: "#2b6cb0",
+  };
+
   return (
-    <div className="relative h-[91.1vh] w-full ">
-      <div className="absolute inset-0 bg-[radial-gradient(rgba(79,79,79,0.2)_1px,transparent_1px),radial-gradient(rgba(79,79,79,0.2)_1px,transparent_1px)] bg-[length:20px_20px]">
-        <div style={{ width: "100%", height: "90vh", padding: "2rem" }}>
+    <div className="relative h-[91.1vh] w-full">
+      <div
+        className={`absolute inset-0 ${
+          siteMode === "dark"
+            ? "bg-[radial-gradient(rgba(79,79,79,0.2)_1px,transparent_1px),radial-gradient(rgba(79,79,79,0.2)_1px,transparent_1px)]"
+            : "bg-[radial-gradient(rgba(200,200,200,0.2)_1px,transparent_1px),radial-gradient(rgba(200,200,200,0.2)_1px,transparent_1px)]"
+        } bg-[length:20px_20px]`}
+      >
+        <div style={{ width: "100%", height: "90vh" }} className="py-2">
           <Chrono
             items={items}
             mode="VERTICAL_ALTERNATING"
             disableToolbar={true}
-            theme={{
-              primary: "#fff",
-              secondary: "#e2e8f0",
-              cardBgColor: "rgba(30, 41, 59, 0.8)",
-              cardDetailsColor: "#e2e8f0",
-              cardSubtitleColor: "#a0aec0",
-              cardForeColor: "#fff",
-              titleColor: "#fff",
-              lineColor: "#4a5568",
-              cardText: "#e2e8f0",
-              dotColor: "#0b228c"
-            }}
-            className={{
-              card: "rounded-lg shadow-lg",
-              cardMedia: "rounded-t-lg",
-              cardSubTitle: "text-sm font-medium",
-              cardTitle: "text-lg font-bold",
-              controls: "my-controls",
-              title: "text-2xl font-bold mb-4",
-            }}
+            theme={theme}
             cardHeight={180}
           />
         </div>
       </div>
     </div>
-  )
-}
+  );
+};
 
-export default Events;
\ No newline at end of file
+export default Events;
diff --git a/src/Components/FeatureCard.jsx b/src/Components/FeatureCard.jsx
index ff5a5fbf0..15d4c6f63 100644
--- a/src/Components/FeatureCard.jsx
+++ b/src/Components/FeatureCard.jsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import { useNavigate } from 'react-router-dom';
 import '../App.css'
-
+import myHook from './Context';
 const FeatureCard = ({
   title,
   tag,
@@ -15,26 +15,27 @@ const FeatureCard = ({
   const handleButtonClick = () => {
     window.open(page, '_blank');
   };
+  const {siteMode}=myHook()
 
   return (
-    <div className={` w-10/12 mx-auto border-2  backdrop-blur-sm shadow-gradient border-gray-700 p-3 flex flex-col bg-clip-border rounded-xl shadow-md`}>
+    <div className={` w-10/12 mx-auto border-2  backdrop-blur-sm shadow-gradient ${siteMode === "dark" ? "border-gray-700" : "border-gray-200"}  p-3 flex flex-col bg-clip-border rounded-xl shadow-md h-max`}>
       <div className="w-full mb-3">
       <h3 className={`aanimate-bounce-less text-3xl font-semibold ${tagStyle} bg-clip-text text-transparent bg-gradient-to-br from-blue-400 to-purple-400 duration-1000 ease-in-out`}>
       {title}
     </h3>
     </div>
       <div className="mb-1">
-        <p className={`text-[0.8rem] text-gray-100 ${tagStyle}`}>{tag}</p>
+        <p className={`text-[0.8rem] ${siteMode === "dark" ? "text-gray-100" : "text-gray-800"}  ${tagStyle}`}>{tag}</p>
       </div>
       <div className="mb-[4rem] md:h-[100px]">
-        <p className="text-[1.1rem] text-gray-300">{info}</p>
+        <p className={`text-[1.1rem] ${siteMode === "dark" ? "text-gray-100" : "text-gray-800"}`}>{info}</p>
       </div>
-      <div className="">
+      <div className="mt-8">
         <button
-          className={`mx-auto relative bg-gradient-to-br px-5 from-blue-800 via-blue-600 to-blue-800 inline-flex items-center justify-center p-0.5 mb-3 me-2 overflow-hidden text-lg font-medium text-gray-900 rounded-lg group bg-white dark:bg-gray-900`}
+          className={`mx-auto  bg-gradient-to-br px-5 from-blue-800 via-blue-600 to-blue-800 inline-flex items-center justify-center p-0.5 mb-3 me-2 overflow-hidden text-lg font-medium text-gray-900 rounded-lg group bg-white dark:bg-gray-900`}
           onClick={handleButtonClick}
         >
-          <span className="relative text-white px-3 py-2.5 transition-all ease-in duration-75 rounded-md group-hover:bg-opacity-0">
+          <span className=" text-white px-3 py-2.5 transition-all ease-in duration-75 rounded-md group-hover:bg-opacity-0">
             {buttontext}
           </span>
         </button>
diff --git a/src/Components/Hero.jsx b/src/Components/Hero.jsx
index b5960745c..b58b7cfe5 100644
--- a/src/Components/Hero.jsx
+++ b/src/Components/Hero.jsx
@@ -1,26 +1,30 @@
-import React from 'react';
+import React from "react";
 // import ThreeJSComponent from './ThreeJSComponent';
 // import Sphere from "./icons";
-
 const Hero = () => {
-    return (
-        <div className="relative bg-transparent min-h-screen w-full flex">
-    <div className="flex-1 bg-transparent flex items-center justify-center">
-        <div className="gp-10 rounded-lg text-left">
-            <h1 className="text-bounce text-[10rem] leading-none font-mono tracking-widest text-transparent bg-clip-text bg-gradient-to-r from-blue-500 to-purple-600">ProjectX</h1>
-            <p className="text-bounce text-5xl leading-relaxed font-mono tracking-wide text-transparent text-center bg-clip-text bg-gradient-to-r from-blue-500 to-purple-600 mt-5">Innovating the future</p>
+  return (
+    <div className="relative bg-transparent min-h-screen w-full flex">
+      <div className="flex-1 bg-transparent flex items-center justify-center">
+        <div className="gp-10 rounded-lg lg:text-left">
+          <h1 className="text-bounce text-6xl md:text-[6rem] text-center lg:text-[10rem] leading-none font-mono tracking-widest text-transparent bg-clip-text bg-gradient-to-r from-blue-500 to-purple-600">
+            ProjectX
+          </h1>
+          <p className="text-bounce text-3xl lg:text-5xl leading-relaxed font-mono tracking-wide text-transparent text-center bg-clip-text bg-gradient-to-r from-blue-500 to-purple-600 mt-5">
+            Innovating the future
+          </p>
         </div>
-    </div>
-    <svg
+      </div>
+      <svg
         className="absolute bottom-0 left-0 right-0 z-10 opacity-100"
         viewBox="0 0 1440 320"
-        style={{ clipPath: 'polygon(0 0, 100% 0, 100% 90%, 0 100%)' }}
-    >
+        style={{ clipPath: "polygon(0 0, 100% 0, 100% 90%, 0 100%)" }}
+      >
         <use href="src/assets/wordcloud.svg" />
-    </svg>
-</div>
-
-    );
-}
+      </svg>
+    </div>
+  );
+};
 
 export default Hero;
+
+
diff --git a/src/Components/Navigation.jsx b/src/Components/Navigation.jsx
index bae92d6e0..a0540a004 100644
--- a/src/Components/Navigation.jsx
+++ b/src/Components/Navigation.jsx
@@ -1,27 +1,91 @@
-// Enhanced Navigation component with updated styles
-import React from 'react';
+import React, { useState } from 'react';
 import { Link } from 'react-router-dom';
+import { FaBars, FaTimes } from 'react-icons/fa';
+import { MdLightMode, MdDarkMode } from 'react-icons/md';
 import logo from '../assets/X_Logo.png';
+import myHook from './Context';
+const Navigation = () => {
+  const [isMenuOpen, setIsMenuOpen] = useState(false);
+  const { siteMode,setSiteMode}=myHook()
+  const toggleMenu = () => {
+    setIsMenuOpen(!isMenuOpen);
+  };
 
+  const toggleTheme = () => {
+    console.log(siteMode)
+        setSiteMode(siteMode === 'dark' ? 'light' : 'dark');
+  };
+
+  const navLinks = [
+    { to: '/', label: 'Home' },
+    { to: '/events', label: 'Events' },
+    { to: '/projects', label: 'Projects' },
+    { to: '/achievements', label: 'Achievements' }
+  ];
 
-const Navigation = () => {
   return (
-    <nav className="flex justify-between items-center p-4 bg-gradient-to-r bg-slate-900 border-b-2 border-gray-700">
+    <nav className={`
+      flex justify-between items-center p-4 
+      ${siteMode === 'dark' ? 'bg-slate-900 text-white border-gray-700' : 'bg-white text-black'}
+      border-b-2 border-gray-300 
+    `}>
       <div className="flex items-center">
         <img src={logo} alt="Logo" className="h-12 w-12 mr-3 rounded-full" />
-        <span className="text-3xl font-mono font-bold text-white shadow-md">ProjectX</span>
+        <span className="text-3xl font-mono font-bold">ProjectX</span>
       </div>
-      <div className="flex font-mono space-x-6">
-        <Link to="/" className="text-xl text-white hover:text-gray-200 transition-colors duration-300">Home</Link>
-        <Link to="/events" className="text-xl text-white hover:text-gray-200 transition-colors duration-300">Events</Link>
-        <Link to="/projects" className="text-xl text-white hover:text-gray-200 transition-colors duration-300">Projects</Link>
-        <Link to="/achievements" className="text-xl text-white hover:text-gray-200 transition-colors duration-300">Achievements</Link>
-        {/* <Link to="/staff" className="text-xl text-white hover:text-gray-200 transition-colors duration-300">Staff</Link> */}
+
+      {/* Mobile Hamburger Menu */}
+      <div className="md:hidden flex items-center space-x-4">
+        <button onClick={toggleTheme} className="text-2xl">
+          {siteMode === 'light' ?  <MdDarkMode />:<MdLightMode />}
+        </button>
+        <button onClick={toggleMenu} className="text-2xl">
+          {isMenuOpen ? <FaTimes /> : <FaBars />}
+        </button>
       </div>
+
+      {/* Desktop Navigation */}
+      <div className="hidden md:flex items-center space-x-6">
+        <div className="flex font-mono space-x-6">
+          {navLinks.map((link) => (
+            <Link 
+              key={link.to} 
+              to={link.to} 
+              className="text-xl hover:text-gray-500 transition-colors duration-300"
+            >
+              {link.label}
+            </Link>
+          ))}
+        </div>
+        <button onClick={toggleTheme} className="text-2xl ml-4">
+          {siteMode === 'dark' ? <MdLightMode /> : <MdDarkMode />}
+        </button>
+      </div>
+
+      {/* Mobile Dropdown Menu */}
+      {isMenuOpen && (
+        <div className={`
+          md:hidden absolute top-20 left-0 w-full 
+           ${siteMode === 'dark' ? 'bg-slate-900':'bg-white'} z-20 border-t 
+          shadow-lg py-4
+      `}>
+          {navLinks.map((link) => (
+            <Link 
+              key={link.to} 
+              to={link.to} 
+              className="
+                block px-4 py-2 text-xl 
+                hover:bg-gray-100 dark:hover:bg-slate-700
+              "
+              onClick={toggleMenu}
+            >
+              {link.label}
+            </Link>
+          ))}
+        </div>
+      )}
     </nav>
   );
 };
 
-export default Navigation;
-
-
+export default Navigation;
\ No newline at end of file
diff --git a/src/Components/PastProjects.jsx b/src/Components/PastProjects.jsx
index 700cfc7bd..8a4555969 100644
--- a/src/Components/PastProjects.jsx
+++ b/src/Components/PastProjects.jsx
@@ -1,11 +1,12 @@
 import React from 'react';
 import FeatureCard from './FeatureCard'; // Assuming FeatureCard is in the same directory
-
+import myHook from "./Context"
 const PastProjects = () => {
+  const {siteMode} = myHook()
   return (
-    <div className="relative h-[175vh] pb-2 w-full bg-slate-900">
-    <div className="absolute inset-0 bgC">
-    <div className="text-center overflow-y-auto mt-5">
+    <div className={`relative h-[100vh] overflow-y-scroll pb-2 w-full bg-slate-900 ${siteMode === "dark" ? "bgC" : "bgC-light"}`}>
+    {/* <div className=" "> */}
+    <div className="text-center mt-5 py-2">
       <h1 className="text-5xl font-bold text-transparent my-6 py-4 bg-clip-text bg-gradient-to-r from-purple-500 via-blue-500 to-purple-600 mb-10">Past Projects</h1>
       <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
         <FeatureCard
@@ -94,7 +95,7 @@ const PastProjects = () => {
       </div>
     </div>
     </div>
-    </div>
+    // </div>
   );
 };
 
diff --git a/src/Components/Projects.jsx b/src/Components/Projects.jsx
index 788a4b0ba..ee6a671a1 100644
--- a/src/Components/Projects.jsx
+++ b/src/Components/Projects.jsx
@@ -1,16 +1,17 @@
 import React from 'react';
 import { Link } from 'react-router-dom';
-
+import myHook from './Context';
 const CardRow = () => {
+  
   return (
-    <div className="relative h-[91.5vh] w-full bg-transparent">
+    <div className="relative h-[91.5vh] w-full bg-transparent flex ">
     <div className="absolute inset-0 bg-[linear-gradient(to_right,#4f4f4f2e_1px,transparent_1px),linear-gradient(to_bottom,#4f4f4f2e_1px,transparent_1px)] bg-[size:14px_24px]">
 
-    <div className="flex flex-row w-full h-[90vh] items-stretch">
-      <div className="w-1/2 m-6 flex justify-center items-center p-4">
+    <div className="flex flex-row max-md:flex-col w-full h-[90vh] items-stretch">
+      <div className="md:w-1/2 m-6 flex justify-center items-center p-4">
         <Card title="Upcoming Project 2k24" link="/upcoming-projects" />
       </div>
-      <div className="w-1/2 m-6 flex justify-center items-center p-4">
+      <div className="md:w-1/2 m-6 flex justify-center items-center p-4">
         <Card title="Past Projects" link="/past-projects" />
       </div>
     </div>
@@ -20,14 +21,15 @@ const CardRow = () => {
 };
 
 const Card = ({ title, link }) => {
+  const {siteMode} = myHook();
   return (
     
-    <div className="rounded-lg  backdrop-blur-sm overflow-hidden w-full h-full flex flex-col justify-between transform hover:scale-105 transition duration-500 ease-in-out shadow-gradient border border-gray-700">
+    <div className={`rounded-lg  backdrop-blur-sm overflow-hidden w-full h-full flex flex-col justify-between transform hover:scale-105 transition duration-500 ease-in-out shadow-gradient ${siteMode === 'dark' ? 'border border-gray-700':'border border-gray-200'}  `}>
       <div className="bg-glass p-5">
         <div className="animate-bounce">
           <h5 className=" text-center my-8 font-bold text-3xl font-mono tracking-tight mb-2 bg-clip-text text-transparent bg-gradient-to-r from-purple-300 via-blue-400 to-purple-300">{title}</h5>
         </div>
-        <p className="text-gray-300 pt-3 font-mono">
+        <p className={`${siteMode === 'dark' ? 'text-gray-300':'text-gray-500'}  pt-3 font-mono`}>
 
           Press on The Read More Button to know more!!! 
 
diff --git a/src/index.css b/src/index.css
index 565287a3c..d6a26523b 100644
--- a/src/index.css
+++ b/src/index.css
@@ -52,4 +52,58 @@
 
   .bgC{
     background-image: repeating-linear-gradient(157deg, rgba(237,225,225, 0.05) 0px, rgba(237,225,225, 0.05) 1px,transparent 1px, transparent 11px,rgba(237,225,225, 0.05) 11px, rgba(237,225,225, 0.05) 12px,transparent 12px, transparent 32px),repeating-linear-gradient(112deg, rgba(237,225,225, 0.05) 0px, rgba(237,225,225, 0.05) 1px,transparent 1px, transparent 11px,rgba(237,225,225, 0.05) 11px, rgba(237,225,225, 0.05) 12px,transparent 12px, transparent 32px),repeating-linear-gradient(247deg, rgba(237,225,225, 0.05) 0px, rgba(237,225,225, 0.05) 1px,transparent 1px, transparent 11px,rgba(237,225,225, 0.05) 11px, rgba(237,225,225, 0.05) 12px,transparent 12px, transparent 32px),repeating-linear-gradient(202deg, rgba(237,225,225, 0.05) 0px, rgba(237,225,225, 0.05) 1px,transparent 1px, transparent 11px,rgba(237,225,225, 0.05) 11px, rgba(237,225,225, 0.05) 12px,transparent 12px, transparent 32px),linear-gradient(202deg, rgb(1, 9, 29),rgb(7, 14, 49));
-  }
\ No newline at end of file
+  }
+
+  .bgC-light {
+    background-image: 
+      repeating-linear-gradient(
+        157deg, 
+        rgba(0, 0, 0, 0.05) 0px, 
+        rgba(0, 0, 0, 0.05) 1px, 
+        transparent 1px, 
+        transparent 11px, 
+        rgba(0, 0, 0, 0.05) 11px, 
+        rgba(0, 0, 0, 0.05) 12px, 
+        transparent 12px, 
+        transparent 32px
+      ),
+      repeating-linear-gradient(
+        112deg, 
+        rgba(0, 0, 0, 0.05) 0px, 
+        rgba(0, 0, 0, 0.05) 1px, 
+        transparent 1px, 
+        transparent 11px, 
+        rgba(0, 0, 0, 0.05) 11px, 
+        rgba(0, 0, 0, 0.05) 12px, 
+        transparent 12px, 
+        transparent 32px
+      ),
+      repeating-linear-gradient(
+        247deg, 
+        rgba(0, 0, 0, 0.05) 0px, 
+        rgba(0, 0, 0, 0.05) 1px, 
+        transparent 1px, 
+        transparent 11px, 
+        rgba(0, 0, 0, 0.05) 11px, 
+        rgba(0, 0, 0, 0.05) 12px, 
+        transparent 12px, 
+        transparent 32px
+      ),
+      repeating-linear-gradient(
+        202deg, 
+        rgba(0, 0, 0, 0.05) 0px, 
+        rgba(0, 0, 0, 0.05) 1px, 
+        transparent 1px, 
+        transparent 11px, 
+        rgba(0, 0, 0, 0.05) 11px, 
+        rgba(0, 0, 0, 0.05) 12px, 
+        transparent 12px, 
+        transparent 32px
+      ),
+      linear-gradient(
+        202deg, 
+        rgb(245, 245, 245), 
+        rgb(255, 255, 255)
+      );
+  }
+  
\ No newline at end of file

From 508b8766be852fc3728c55e06a911c2849ac9bd5 Mon Sep 17 00:00:00 2001
From: shivraj0124 <shivrajkolwankar0124@gmail.com>
Date: Fri, 24 Jan 2025 01:07:59 +0530
Subject: [PATCH 3/3] 'countDown-Timer-done'

---
 src/Components/Achievements.jsx   |   2 -
 src/Components/CircularCard.jsx   |  46 +++++++++-----
 src/Components/CountdownTimer.jsx | 101 ++++++++++++++++++++++++++++++
 src/Components/Hero.jsx           |   7 ++-
 src/Components/Projects.jsx       |   1 -
 5 files changed, 137 insertions(+), 20 deletions(-)
 create mode 100644 src/Components/CountdownTimer.jsx

diff --git a/src/Components/Achievements.jsx b/src/Components/Achievements.jsx
index 01d972bc4..045eb5592 100644
--- a/src/Components/Achievements.jsx
+++ b/src/Components/Achievements.jsx
@@ -1,8 +1,6 @@
 import React from "react";
 import CircularCard from "./CircularCard";
-import myHook from "./Context";
 const Achievements = () => {
-  const { siteMode } = myHook();
   return (
     <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">
diff --git a/src/Components/CircularCard.jsx b/src/Components/CircularCard.jsx
index e2c03359b..1ba563bcd 100644
--- a/src/Components/CircularCard.jsx
+++ b/src/Components/CircularCard.jsx
@@ -1,20 +1,38 @@
-import React from 'react';
-import { useSpring, animated } from 'react-spring';
-import myHook from './Context';
+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()
+  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 ${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
+      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>
   );
 };
diff --git a/src/Components/CountdownTimer.jsx b/src/Components/CountdownTimer.jsx
new file mode 100644
index 000000000..34b4a4e34
--- /dev/null
+++ b/src/Components/CountdownTimer.jsx
@@ -0,0 +1,101 @@
+import React, { useEffect, useState } from 'react';
+import myHook from "./Context"
+import { motion } from 'framer-motion';
+
+const CountdownTimer = () => {
+  const targetDate = new Date("2025-01-25T14:00:00"); 
+
+  const [timeLeft, setTimeLeft] = useState({
+    days: 0,
+    hours: 0,
+    minutes: 0,
+    seconds: 0,
+  });
+
+  const { siteMode }=myHook()
+
+  useEffect(() => {
+    const interval = setInterval(() => {
+      const now = new Date();
+      const difference = targetDate - now;
+      
+      if (difference <= 0) {
+        clearInterval(interval);
+        setTimeLeft({ days: 0, hours: 0, minutes: 0, seconds: 0 });
+      } else {
+        setTimeLeft({
+          days: Math.floor(difference / (1000 * 60 * 60 * 24)),
+          hours: Math.floor((difference / (1000 * 60 * 60)) % 24),
+          minutes: Math.floor((difference / (1000 * 60)) % 60),
+          seconds: Math.floor((difference / 1000) % 60),
+        });
+      }
+    }, 1000);
+    
+    return () => clearInterval(interval);
+  }, [targetDate]);
+
+  return (
+    
+      <div className={`${siteMode === 'dark' ? 'text-white':'text-black'} max-w-4xl mx-auto text-center`}>
+        
+        <p className="text-xl mt-5 pb-5">
+           DEBUG-A-THON starts in
+           </p>
+        
+        <div className="flex justify-center space-x-4 md:space-x-8">
+          <div className={`countdown-item border p-2 rounded-md ${siteMode === 'dark' ? 'bg-black':'bg-white'} `}>
+            <motion.div 
+              className="text-4xl md:text-4xl font-bold bg-gradient-to-r from-blue-500 to-purple-600 bg-clip-text text-transparent"
+              initial={{ opacity: 0, scale: 0.8 }}
+              animate={{ opacity: 1, scale: 1 }}
+              transition={{ duration: 0.5 }}
+            >
+              {String(timeLeft.days).padStart(2, '0')}
+            </motion.div>
+            <p className="text-sm md:text-base uppercase tracking-wider mt-2">Days</p>
+          </div>
+
+          <div className={`countdown-item border p-2 rounded-md ${siteMode === 'dark' ? 'bg-black':'bg-white'} `}>
+            <motion.div 
+              className="text-4xl md:text-4xl font-bold bg-gradient-to-r from-blue-500 to-purple-600 bg-clip-text text-transparent"
+              initial={{ opacity: 0, scale: 0.8 }}
+              animate={{ opacity: 1, scale: 1 }}
+              transition={{ duration: 0.5, delay: 0.2 }}
+            >
+              {String(timeLeft.hours).padStart(2, '0')}
+            </motion.div>
+            <p className="text-sm md:text-base uppercase tracking-wider mt-2">Hours</p>
+          </div>
+
+          <div className={`countdown-item border p-2 rounded-md ${siteMode === 'dark' ? 'bg-black':'bg-white'} `}>
+            <motion.div 
+              className="text-4xl md:text-4xl font-bold bg-gradient-to-r from-blue-500 to-purple-600 bg-clip-text text-transparent"
+              initial={{ opacity: 0, scale: 0.8 }}
+              animate={{ opacity: 1, scale: 1 }}
+              transition={{ duration: 0.5, delay: 0.4 }}
+            >
+              {String(timeLeft.minutes).padStart(2, '0')}
+            </motion.div>
+            <p className="text-sm md:text-base uppercase tracking-wider mt-2">Minutes</p>
+          </div>
+
+          <div className={`countdown-item border p-2 rounded-md ${siteMode === 'dark' ? 'bg-black':'bg-white'} `}>
+            <motion.div 
+              className="text-4xl md:text-4xl font-bold bg-gradient-to-r from-blue-500 to-purple-600 bg-clip-text text-transparent"
+              initial={{ opacity: 0, scale: 0.8 }}
+              animate={{ opacity: 1, scale: 1 }}
+              transition={{ duration: 0.5, delay: 0.6 }}
+            >
+              {String(timeLeft.seconds).padStart(2, '0')}
+            </motion.div>
+            <p className="text-sm md:text-base uppercase tracking-wider mt-2">Seconds</p>
+          </div>
+        </div>
+    </div>
+  );
+};
+
+
+
+export default CountdownTimer;
\ No newline at end of file
diff --git a/src/Components/Hero.jsx b/src/Components/Hero.jsx
index b58b7cfe5..3d01b70a4 100644
--- a/src/Components/Hero.jsx
+++ b/src/Components/Hero.jsx
@@ -1,9 +1,11 @@
 import React from "react";
 // import ThreeJSComponent from './ThreeJSComponent';
 // import Sphere from "./icons";
+import CountdownTimer from "./CountdownTimer";
 const Hero = () => {
   return (
-    <div className="relative bg-transparent min-h-screen w-full flex">
+    <div className="relative bg-transparent min-h-screen w-full flex flex-col">
+      <CountdownTimer />
       <div className="flex-1 bg-transparent flex items-center justify-center">
         <div className="gp-10 rounded-lg lg:text-left">
           <h1 className="text-bounce text-6xl md:text-[6rem] text-center lg:text-[10rem] leading-none font-mono tracking-widest text-transparent bg-clip-text bg-gradient-to-r from-blue-500 to-purple-600">
@@ -14,6 +16,7 @@ const Hero = () => {
           </p>
         </div>
       </div>
+      
       <svg
         className="absolute bottom-0 left-0 right-0 z-10 opacity-100"
         viewBox="0 0 1440 320"
@@ -26,5 +29,3 @@ const Hero = () => {
 };
 
 export default Hero;
-
-
diff --git a/src/Components/Projects.jsx b/src/Components/Projects.jsx
index ee6a671a1..b72c48293 100644
--- a/src/Components/Projects.jsx
+++ b/src/Components/Projects.jsx
@@ -6,7 +6,6 @@ const CardRow = () => {
   return (
     <div className="relative h-[91.5vh] w-full bg-transparent flex ">
     <div className="absolute inset-0 bg-[linear-gradient(to_right,#4f4f4f2e_1px,transparent_1px),linear-gradient(to_bottom,#4f4f4f2e_1px,transparent_1px)] bg-[size:14px_24px]">
-
     <div className="flex flex-row max-md:flex-col w-full h-[90vh] items-stretch">
       <div className="md:w-1/2 m-6 flex justify-center items-center p-4">
         <Card title="Upcoming Project 2k24" link="/upcoming-projects" />