Merge pull request #549 from datasektionen/545-update-homepage-2026

545 update homepage 2026

Author: davidbjorklund

src/components/Countdown.tsx

@@ -1,34 +1,16 @@
 import {useLocale} from "@/locales";
 import {useEffect, useState} from "react";
 
-function TimeUnit({time, timeString, index = 0}: {time: number; timeString: string, index?: number}){
-  // "w-1/2 max-auto bg-cerise py-2.5 rounded-full"
-  return(
-        <div className={`w-16 h-32 sm:w-24 sm:h-48
-            flex flex-col bg-cover bg-16
-            ${
-              index == 2 && "bg-[url('/img/ballonger/ballong_2.svg')]"
-              ||
-              index == 3 && "bg-[url('/img/ballonger/ballong_3.svg')]"
-              ||
-              index == 4 && "bg-[url('/img/ballonger/ballong_4.svg')]"
-              ||
-              "bg-[url('/img/ballonger/ballong_1.svg')]"
-            }`}>
-
-          <div className="w-16 h-20 sm:w-24 sm:h-[7.75rem] 
-              flex flex-col items-center justify-center">
-            <div className="text-white text-xl sm:text-4xl leading-[1.25rem] sm:leading-[1.75rem] text-center">
-              {time}
-            </div>
-            <div className="text-white text-xs sm:text-lg text-center">
-              {timeString}
-            </div>
-          </div>
-
-        </div>
-
-
+function TimeUnit({time, timeString,}: {time: number; timeString: string;}) {
+  return (
+    <div className="flex flex-col items-center text-center">
+      <div className="text-white text-3xl sm:text-4xl leading-none">
+        {time}
+      </div>
+      <div className="text-white text-sm sm:text-lg mt-1">
+        {timeString}
+      </div>
+    </div>
   );
 }
 
@@ -40,38 +22,46 @@ export function Countdown() {
   const [minutes, setMinutes] = useState(0);
   const [seconds, setSeconds] = useState(0);
 
-  useEffect(()=>{
-    const target = new Date("10/8/2026 10:00:00+02:00") // vilket datum är d-dagen?
-    const interval = setInterval(() =>{
+  useEffect(() => {
+    const target = new Date("10/8/2026 10:00:00+02:00");
+    const interval = setInterval(() => {
       const now = new Date();
       const difference = target.getTime() - now.getTime();
-      
-      
+
       const d_diff = difference / (1000 * 60 * 60 * 24);
-      const d = difference < 0 ? Math.ceil(d_diff) : Math.floor(d_diff);
-      setDays(d)
+      setDays(difference < 0 ? Math.ceil(d_diff) : Math.floor(d_diff));
+
+      const h_diff =
+        (difference % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60);
+      setHours(difference < 0 ? Math.ceil(h_diff) : Math.floor(h_diff));
 
-      const h_diff = (difference % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60)
-      const h = difference < 0 ? Math.ceil(h_diff) : Math.floor(h_diff);
-      setHours(h)
+      const m_diff = (difference % (1000 * 60 * 60)) / (1000 * 60);
+      setMinutes(difference < 0 ? Math.ceil(m_diff) : Math.floor(m_diff));
 
-      const m_diff = (difference % (1000 * 60 * 60))/(1000*60)
-      const m = difference < 0 ? Math.ceil(m_diff) : Math.floor(m_diff) 
-      setMinutes(m)
+      const s_diff = (difference % (1000 * 60)) / 1000;
+      setSeconds(difference < 0 ? Math.ceil(s_diff) : Math.floor(s_diff));
+    }, 1000);
 
-      const s_diff = (difference % (1000 * 60))/1000
-      const s = difference < 0 ? Math.ceil(s_diff) : Math.floor(s_diff) 
-      setSeconds(s)
-    },1000)
-    return () => clearInterval(interval)
-  },[]);
+    return () => clearInterval(interval);
+  }, []);
 
   return (
-    <div className="hover:cursor-default gap-5 columns-4 flex items-center justify-center">
-      <TimeUnit time={days} timeString={t.home.countDown.days} index={1}/>
-      <TimeUnit time={hours} timeString={t.home.countDown.hours} index={2}/>
-      <TimeUnit time={minutes} timeString={t.home.countDown.minutes} index={3}/>
-      <TimeUnit time={seconds} timeString={t.home.countDown.seconds} index={4}/>
+    <div className="hover:cursor-default flex items-center justify-center">
+      
+      <TimeUnit time={days} timeString={t.home.countDown.days} />
+
+      <div className="mx-6 h-14 w-[3px] bg-cerise" />
+
+      <TimeUnit time={hours} timeString={t.home.countDown.hours} />
+
+      <div className="mx-6 h-14 w-[3px] bg-cerise" />
+
+      <TimeUnit time={minutes} timeString={t.home.countDown.minutes} />
+
+      <div className="mx-6 h-14 w-[3px] bg-cerise" />
+
+      <TimeUnit time={seconds} timeString={t.home.countDown.seconds} />
+
     </div>
   );
 }

src/locales/en.ts

@@ -28,6 +28,7 @@ export default {
       minutes: "minutes",
       seconds: "seconds",
     },
+    exhibitButton: "Exhibit at D-Dagen",
     stats: [
       {
         value: "90+",

src/locales/sv.ts

@@ -28,6 +28,7 @@ export default {
       minutes: "minuter",
       seconds: "sekunder",
     },
+    exhibitButton: "Ställ ut på D-Dagen",
     stats: [
       {
         value: "90+",

src/pages/index.tsx

@@ -90,14 +90,25 @@ export default function Home() {
               ></img>
           </div>
 
+          {/* Countdown wrapper */}
           <div className={`
-            mx-auto pt-[40px] mt-2 md:mt-8
+            mx-auto pt-[0px] mt-2 md:mt-8
             transition-all ease-in-out
             ${ hasLoadedBefore ? 'duration-0': 'delay-[300ms] duration-[800ms]'}  
             ${ showPage ? "opacity-100" : "opacity-0" }
             `}>
               <Countdown />
           </div>
+
+          {/* Button wrapper (separat div) */}
+          <div className="flex justify-center mt-8">
+            <Link
+              className="bg-cerise py-2.5 px-6 rounded-full text-white text-center hover:scale-105 transition-transform"
+              href="/företagsanmälan"
+            >
+              {t.home.exhibitButton}
+            </Link>
+          </div>
 
           <div className="hover:cursor-default pt-[40px] pb-[50px]">
             <h2