Implemented Sweccathon countdown with main page CSS

src/Components/Countdown.js

@@ -0,0 +1,41 @@
+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 eventTime - currentTime;
+    };
+
+    const [timeLeft, setTimeLeft] = useState(calculateTimeLeft);
+
+    useEffect(() =>{
+            const countdown = setInterval(() => {
+                setTimeLeft(calculateTimeLeft());
+            })
+            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="2026-05-05T15:00:00Z" eventName="Sweccathon 2026" />
 
       <div className="mainPage-body">
         <TextLeftImageRight