refactor: move countdown components from 2025-specific path to views and introduce StyledTimerNumber for styling.

Author: anyulled

src/2025/Home/components/Home/Home.tsx

@@ -2,7 +2,7 @@ import Countdown from "react-countdown";
 import React, { FC } from "react";
 import { SectionWrapper } from "@components/SectionWrapper/SectionWrapper";
 import { BIGGER_BREAKPOINT } from "@constants/BreakPoints";
-import TimeCountDown from "./components/TimeCountdown";
+import TimeCountDown from "@views/Home/components/Home/components/TimeCountdown";
 import { useWindowSize } from "react-use";
 import { useDateInterval } from "@hooks/useDateInterval";
 // @ts-expect-error some quirky import
@@ -27,7 +27,7 @@ import InfoButtons from "../InfoButtons/InfoButtons";
 import { formatDateRange } from "./DateUtil";
 import { Link } from "react-router";
 import edition from "@data/2025.json";
-import CountDownCompleted from "./components/CountDownCompleted";
+import CountDownCompleted from "@views/Home/components/Home/components/CountDownCompleted";
 
 const Home: FC<React.PropsWithChildren<unknown>> = () => {
   const { width } = useWindowSize();

src/2025/Home/components/Home/components/CountDownCompleted.tsx

@@ -1,6 +1,7 @@
-import React, {FC} from 'react';
+import React, { FC } from 'react';
 import {
     StyledTimerContainer,
+    StyledTimerNumber,
     StyledTimerLetters,
     StyleLine,
     TimeCountDownContainer
@@ -14,30 +15,30 @@ type TimeCountDownProps = {
 };
 
 const TimeCountDown: FC<React.PropsWithChildren<TimeCountDownProps>> = ({
-                                                                            days,
-                                                                            hours,
-                                                                            minutes,
-                                                                            seconds,
-                                                                        }) => {
+    days,
+    hours,
+    minutes,
+    seconds,
+}) => {
     return (
         <TimeCountDownContainer id="countdown-ongoing">
             <StyledTimerContainer>
-                <p>{days}</p>
+                <StyledTimerNumber>{days}</StyledTimerNumber>
                 <StyledTimerLetters>DAYS</StyledTimerLetters>
             </StyledTimerContainer>
-            <StyleLine/>
+            <StyleLine />
             <StyledTimerContainer>
-                <p>{hours}</p>
+                <StyledTimerNumber>{hours}</StyledTimerNumber>
                 <StyledTimerLetters>HOURS</StyledTimerLetters>
             </StyledTimerContainer>
-            <StyleLine/>
+            <StyleLine />
             <StyledTimerContainer>
-                <p>{minutes}</p>
+                <StyledTimerNumber>{minutes}</StyledTimerNumber>
                 <StyledTimerLetters>MINUTES</StyledTimerLetters>
             </StyledTimerContainer>
-            <StyleLine/>
+            <StyleLine />
             <StyledTimerContainer>
-                <p>{seconds}</p>
+                <StyledTimerNumber>{seconds}</StyledTimerNumber>
                 <StyledTimerLetters>SECONDS</StyledTimerLetters>
             </StyledTimerContainer>
         </TimeCountDownContainer>

src/2025/Home/components/Home/components/TimeCountdown.tsx

@@ -20,7 +20,16 @@ export const StyledTimerContainer = styled.div`
   height: 5rem;
   justify-content: center;
   width: 5rem;
+  padding-top: 10px;
 `;
+
+export const StyledTimerNumber = styled.p`
+  color: white;
+  margin-bottom:5px;
+`;
+
+
+
 export const StyleLine = styled.div`
   width: 0.75rem;
   background: ${Color.DARK_BLUE};