Refactor

Author: nyandika

.github/workflows/e2e.yml

@@ -17,7 +17,7 @@ jobs:
           echo "NEXT_PUBLIC_RECAPTCHA_SITE_KEY=123fAkE" >> .env
       - uses: actions/setup-node@v6
         with:
-          node-version: '24'
+          node-version: '24.x'
       - name: Install dependencies
         run: npm ci
       - name: Install Playwright Browsers

.github/workflows/validate.yml

@@ -9,10 +9,10 @@ jobs:
     timeout-minutes: 60
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v4
-      - uses: actions/setup-node@v4
+      - uses: actions/checkout@v6
+      - uses: actions/setup-node@v6
         with:
-          node-version: '20.x'
+          node-version: '24.x'
       - name: Install dependencies
         run: npm ci
       - name: Run code validation (includes linting, prettier and building)

next-env.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="next" />
 /// <reference types="next/image-types/global" />
-import './.next/dev/types/routes.d.ts';
+import './.next/types/routes.d.ts';
 
 // NOTE: This file should not be edited
 // see https://nextjs.org/docs/pages/api-reference/config/typescript for more information.

src/components/ContactUs/ContactUs.tsx

@@ -6,9 +6,6 @@ export default function ContactUs() {
   const [screenWidth, setScreenWidth] = useState<number | null>(null);
 
   useEffect(() => {
-    // Defer the initial set to avoid synchronous setState inside the effect
-    // which can cause cascading renders. Use requestAnimationFrame so the
-    // update runs after the browser paints.
     const rafId = requestAnimationFrame(() =>
       setScreenWidth(window.innerWidth)
     );

src/components/HeroHeader/HeroHeader.tsx

@@ -8,9 +8,6 @@ export default function HeroHeader() {
   const breakpoint = 768;
 
   useEffect(() => {
-    // Defer the initial set to avoid synchronous setState inside the effect
-    // which can cause cascading renders. Use requestAnimationFrame so the
-    // update runs after the browser paints.
     const rafId = requestAnimationFrame(() =>
       setScreenWidth(window.innerWidth)
     );

src/components/HeroHeader/MobileHero.tsx

@@ -1,6 +1,4 @@
 import LinkButton from '../LinkButton/LinkButton';
-// Use the `public/` folder via a URL path (no import).
-// The image is served from `/images/hero-image.jpg`.
 
 export default function MobileHero() {
   return (

src/components/Navbar/Navbar.tsx

@@ -12,9 +12,6 @@ export default function Navbar() {
   const breakpoint = 768;
 
   useEffect(() => {
-    // Defer the initial set to avoid synchronous setState inside the effect
-    // which can cause cascading renders. Use requestAnimationFrame so the
-    // update runs after the browser paints.
     const rafId = requestAnimationFrame(() =>
       setScreenWidth(window.innerWidth)
     );