Implemented Sweccathon countdown with main page CSS

src/Components/Countdown.js

@@ -0,0 +1,48 @@
+import { useState, useEffect } from "react";
+import "../CSS/Home.css";
+
+
+const Countdown = ({ eventName, eventDate }) => {
+    const calculateTimeLeft = () => {
+        const eventTime = new Date(eventDate).getTime();
+        const currentTime = Date.now();
+
+        return Math.max(eventTime - currentTime, 0); // Clamp at 0
+    };
+
+    const [timeLeft, setTimeLeft] = useState(calculateTimeLeft);
+
+    useEffect(() => {
+        const countdown = setInterval(() => {
+            const newTimeLeft = calculateTimeLeft();
+            setTimeLeft(newTimeLeft);
+
+            if (newTimeLeft === 0) {
+                clearInterval(countdown); // Clear interval when timeLeft reaches 0
+            }
+        }, 1000);
+
+        return () => clearInterval(countdown);
+    }, [eventDate]);
+
+    const formatTime = (msTime) => {
+        const totalSeconds = Math.floor(msTime / 1000);
+        const days = Math.floor(totalSeconds / (3600 * 24));
+        const hours = Math.floor((totalSeconds % (3600 * 24)) / 3600);
+        const minutes = Math.floor((totalSeconds % 3600) / 60);
+        const seconds = Math.floor(totalSeconds % 60);
+
+        return `${days}d ${hours}h ${minutes}m ${seconds}s`;
+    };
+
+    return (
+        <div className="mainPage-body">
+            <h1 className="summaryTitle">Countdown to {eventName}</h1>
+            <p className="summary">
+                {timeLeft > 0 ? `Time left: ${formatTime(timeLeft)}` : "Time's up!"}
+            </p>
+        </div>
+    );
+};
+
+export default Countdown;

src/Components/Home.js

@@ -14,6 +14,7 @@ import img5 from "../Data/img/backgroundImg/5.jpg";
 import img6 from "../Data/img/backgroundImg/6.jpg";
 import img7 from "../Data/img/backgroundImg/7.jpg";
 import { links } from "./Utils";
+import Countdown from "./Countdown";
 
 function HomePage() {
   function Carousel() {
@@ -88,6 +89,7 @@ function HomePage() {
   return (
     <div>
       <Carousel />
+      <Countdown eventDate={links.event.eventDate} eventName={links.event.eventName} />
 
       <div className="mainPage-body">
         <TextLeftImageRight

src/Components/Utils/Utils.js

@@ -14,9 +14,13 @@ export const links = {
   },
   config: {
     beholdFeedId: "5rAX7PhyjFjmyVfW4Plm",
-    currentQuarter: "(Winter 2026)",
+    currentQuarter: "(Spring 2026)",
     meetingTime: "5:30-6:30PM",
     meetingDay: "Wednesday",
     meetingLocation: "Loew Hall 216"
   },
+  event:{
+    eventName:"Sweccathon 2026",
+    eventDate:"2026-05-15T15:00:00Z"
+  },
 };