Added Coutdown component

src/App.jsx

@@ -8,6 +8,7 @@ import Events from './Components/Events';
 import StudentManagement from './Components/Achievements';
 import Projects from './Components/Projects';
 import './App.css'
+import Countdown from './Components/Coutdown';
 import Achievements from './Components/Achievements';
 import PastProjects from './Components/PastProjects';
 import UpcomingProjects from './Components/UpcomingProjects';

src/Components/Coutdown.jsx

@@ -0,0 +1,70 @@
+import { color } from "framer-motion";
+import CircularProgress from "./circle";
+
+import React, { useState, useEffect } from "react";
+
+
+const Countdown = ({ targetDate }) => {
+  const [timeLeft, setTimeLeft] = useState(calculateTimeLeft());
+
+  function calculateTimeLeft() {
+    const now = new Date().getTime();
+    const distance = new Date(targetDate).getTime() - now;
+
+    if (distance > 0) {
+      return {
+        days: Math.floor(distance / (1000 * 60 * 60 * 24)),
+        hours: Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60)),
+        minutes: Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60)),
+        seconds: Math.floor((distance % (1000 * 60)) / 1000),
+      };
+    } else {
+      return null;
+    }
+  }
+
+  useEffect(() => {
+    const timer = setInterval(() => {
+      setTimeLeft(calculateTimeLeft());
+    }, 1000);
+
+    return () => clearInterval(timer);
+  }, []);
+
+  if (!timeLeft) {
+    return <p style={{ color: "white" }}>Time's up!</p>;
+  }
+
+  return (
+    <div style={styles.container} >
+      <p style={styles.timer} className="flex justify-center items-center">
+      <CircularProgress value={timeLeft.hours} sym="h"/>
+      <CircularProgress value={timeLeft.minutes}  sym="m"/>
+      <CircularProgress value={timeLeft.seconds} sym="s" />
+      </p>
+     <p className = "text-2xl" style={{color: "white"}}>Hurry up! Only Limited Time Left</p>
+    </div>
+
+  );
+};
+
+const styles = {
+  container: {
+    textAlign: "center",
+    background: "transparent",
+    padding: "20px",
+    borderRadius: "10px",
+  },
+  heading: {
+    fontSize: "24px",
+    marginBottom: "10px",
+    color: "white",
+  },
+  timer: {
+    fontSize: "20px",
+    fontWeight: "bold",
+    color: "white",
+  },
+};
+
+export default Countdown;

src/Components/Hero.jsx

@@ -1,4 +1,5 @@
 import React from 'react';
+import Countdown from './Coutdown';
 // import ThreeJSComponent from './ThreeJSComponent';
 // import Sphere from "./icons";
 
@@ -7,6 +8,7 @@ const Hero = () => {
         <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">
+        <Countdown targetDate="2025-01-25T23:59:59" />
             <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>
         </div>

src/Components/Navigation.jsx

@@ -2,6 +2,7 @@
 import React from 'react';
 import { Link } from 'react-router-dom';
 import logo from '../assets/X_Logo.png';
+import Countdown from './Coutdown';
 
 const Navigation = () => {
   return (
@@ -10,7 +11,7 @@ const Navigation = () => {
         <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>
       </div>
-      <div className="flex font-mono space-x-6">
+      <div className="flex font-mono space-x-6 justify-center items-center">
         <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>

src/Components/circle.jsx

@@ -0,0 +1,80 @@
+const CircularProgress = ({ value,sym }) => {
+    console.log(value);
+    return (
+      <div className="circular-container">
+        <svg className="circular-progress" viewBox="0 0 36 36">
+        <path
+          className="circle-bg"
+          d="M18 2.0845
+            a 5 5 0 1 1 0 31.831 
+            a 5 5 0 1 1 0 -31.831" 
+        />
+        <path
+          className="circle"
+          d="M18 2.0845
+            a 5 5 0 1 1 0 31.831 
+            a 5 5 0 1 1 0 -31.831"
+          strokeDasharray={`${((60 - Math.min(value, 60)) / 60) * 100}, 100`}
+          strokeDashoffset="0" 
+          transform={`rotate(${90} 18 18)`} 
+        />
+          <text
+            x="18" 
+            y="18"
+            className="circle-text"
+            textAnchor="middle"
+            alignmentBaseline="middle"
+            fontSize="6"
+            fill="#fff"
+            transform={`rotate(${90} 18 18)`}
+          >
+            {value}{sym}
+          </text>
+        </svg>
+      </div>
+    );
+  };
+
+  export default CircularProgress;
+
+
+
+const styles = `
+.circular-container {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  padding-bottom: 10px;
+  width: 150px;
+  height: 150px;
+  background: transparent;
+}
+
+.circular-progress {
+  width: 100%;
+  height: 100%;
+  transform: rotate(-90deg);
+}
+
+.circle-bg {
+  fill: none;
+  stroke: rgba(255, 255, 255, 0.2);
+  stroke-width: 2;
+}
+
+.circle {
+  fill: none;
+  stroke: white;
+  stroke-width: 2;
+  stroke-linecap: round;
+  transition: stroke-dasharray 0.3s ease;
+}
+`;
+
+// Injecting styles into the document head
+if (typeof document !== 'undefined') {
+  const styleSheet = document.createElement('style');
+  styleSheet.type = 'text/css';
+  styleSheet.innerText = styles;
+  document.head.appendChild(styleSheet);
+}