From 5f249d9698902c2dfa0ce07b44821f457444d7eb Mon Sep 17 00:00:00 2001
From: Alessandro Kreslin <kalessandro14@gmail.com>
Date: Tue, 3 Feb 2026 10:01:40 -0500
Subject: [PATCH 1/8] adjusted i18n settings to path based + moved files

---
 messages/en.json                              |  32 ++++++
 messages/fr.json                              |  32 ++++++
 src/app/App.tsx                               |  23 ++--
 src/app/[[...slug]]/page.tsx                  |  12 --
 src/app/[locale]/[...slug]/page.tsx           |  22 ++++
 src/app/[locale]/about/page.tsx               |  24 ++++
 .../feeds/[feedDataType]/[feedId]/loading.tsx |   0
 .../[feedDataType]/[feedId]/map/page.tsx      |   2 +-
 .../feeds/[feedDataType]/[feedId]/page.tsx    |  12 +-
 .../feeds/[feedDataType]/page.tsx             |   4 +-
 src/app/{ => [locale]}/layout.tsx             |  66 ++++++++---
 src/app/about/page.tsx                        | 107 ------------------
 src/i18n/config.ts                            |   8 --
 src/i18n/navigation.ts                        |  15 +++
 src/i18n/request.ts                           |  28 +++--
 src/i18n/routing.ts                           |  19 ++++
 src/proxy.ts                                  |  47 ++++++--
 17 files changed, 268 insertions(+), 185 deletions(-)
 delete mode 100644 src/app/[[...slug]]/page.tsx
 create mode 100644 src/app/[locale]/[...slug]/page.tsx
 create mode 100644 src/app/[locale]/about/page.tsx
 rename src/app/{ => [locale]}/feeds/[feedDataType]/[feedId]/loading.tsx (100%)
 rename src/app/{ => [locale]}/feeds/[feedDataType]/[feedId]/map/page.tsx (78%)
 rename src/app/{ => [locale]}/feeds/[feedDataType]/[feedId]/page.tsx (95%)
 rename src/app/{ => [locale]}/feeds/[feedDataType]/page.tsx (89%)
 rename src/app/{ => [locale]}/layout.tsx (52%)
 delete mode 100644 src/app/about/page.tsx
 delete mode 100644 src/i18n/config.ts
 create mode 100644 src/i18n/navigation.ts
 create mode 100644 src/i18n/routing.ts

diff --git a/messages/en.json b/messages/en.json
index 0d31f83b..d5ec9866 100644
--- a/messages/en.json
+++ b/messages/en.json
@@ -471,5 +471,37 @@
       "nearby_stations": "Nearby Stations"
     },
     "unableToDetectVersions": "Unable to detect versions within this feed."
+  },
+  "home": {
+    "title": "Explore and Access Global Transit Data",
+    "servingOver": "Currently serving over",
+    "feeds": "transportation data feeds from over",
+    "fromOver": "from over",
+    "countries": "countries.",
+    "or": "or",
+    "browseFeeds": "Browse Feeds",
+    "addFeed": "Add a feed",
+    "signUpApi": "Sign up for the API",
+    "description": "The Mobility Database is an open data catalog including over 4000 GTFS, GTFS Realtime, and GBFS feeds in over 75 countries. Whether you're a transportation operator, a researcher studying public transit and shared mobility trends, or a maps app needing reliable data to use with your application, the Mobility Database has everything you need in one central location.",
+    "validatorIntro": "Our database integrates with",
+    "gtfsValidator": "the Canonical GTFS Schedule Validator",
+    "and": "and",
+    "gbfsValidator": "the GBFS Validator",
+    "validatorOutro": "to provide detailed data quality reports on every feed."
+  },
+  "about": {
+    "title": "About",
+    "description": "The Mobility Database is an open catalog including over 4000 GTFS, GTFS Realtime, and GBFS feeds in over 75 countries. It integrates with the Canonical GTFS Schedule and GBFS Validators to share data quality reports for each feed.\n\nThis database is hosted and maintained by MobilityData, the global non-profit organization dedicated to the advancement of open transportation data standards.",
+    "learnMore": "Learn more about MobilityData",
+    "whyUse": "Why Use the Mobility Database?",
+    "whyUseAnswer": "The Mobility Database provides free access to historical and current GTFS, GTFS Realtime, and GBFS feeds from around the world. These feeds are checked for updates every day, ensuring that the data you're looking at is the most recent data available.",
+    "gtfsValidator": "the Canonical GTFS Schedule Validator",
+    "gbfsValidator": "the GBFS Validator.",
+    "benefits": {
+      "mirrored": "Mirrored versions of operator-hosted GTFS Schedule feeds to avoid operator website downtimes and geoblocking",
+      "boundingBoxes": "Bounding boxes that help to visualize or filter in the API by a select region",
+      "addFeeds": "A simple, easy-to-use form to add new feeds",
+      "openSource": "An open source community actively working to improve the tools"
+    }
   }
 }
diff --git a/messages/fr.json b/messages/fr.json
index e5103d8d..563e9037 100644
--- a/messages/fr.json
+++ b/messages/fr.json
@@ -471,5 +471,37 @@
       "nearby_stations": "Nearby Stations"
     },
     "unableToDetectVersions": "Unable to detect versions within this feed."
+  },
+  "home": {
+    "title": "Explorez et accédez aux données de transport mondiales",
+    "servingOver": "Actuellement plus de",
+    "feeds": "flux de données de transport de plus de",
+    "fromOver": "de plus de",
+    "countries": "pays.",
+    "or": "ou",
+    "browseFeeds": "Parcourir les flux",
+    "addFeed": "Ajouter un flux",
+    "signUpApi": "S'inscrire à l'API",
+    "description": "La Mobility Database est un catalogue de données ouvertes comprenant plus de 4000 flux GTFS, GTFS Realtime et GBFS dans plus de 75 pays. Que vous soyez un opérateur de transport, un chercheur étudiant les tendances du transport public et de la mobilité partagée, ou une application de cartes ayant besoin de données fiables, la Mobility Database a tout ce dont vous avez besoin en un seul endroit.",
+    "validatorIntro": "Notre base de données s'intègre avec",
+    "gtfsValidator": "le validateur canonique GTFS Schedule",
+    "and": "et",
+    "gbfsValidator": "le validateur GBFS",
+    "validatorOutro": "pour fournir des rapports détaillés sur la qualité des données de chaque flux."
+  },
+  "about": {
+    "title": "À propos",
+    "description": "La Mobility Database est un catalogue ouvert comprenant plus de 4000 flux GTFS, GTFS Realtime et GBFS dans plus de 75 pays. Elle s'intègre avec les validateurs canoniques GTFS Schedule et GBFS pour partager des rapports de qualité des données pour chaque flux.\n\nCette base de données est hébergée et maintenue par MobilityData, l'organisation mondiale à but non lucratif dédiée à l'avancement des standards de données de transport ouvertes.",
+    "learnMore": "En savoir plus sur MobilityData",
+    "whyUse": "Pourquoi utiliser la Mobility Database ?",
+    "whyUseAnswer": "La Mobility Database fournit un accès gratuit aux flux GTFS, GTFS Realtime et GBFS historiques et actuels du monde entier. Ces flux sont vérifiés quotidiennement pour les mises à jour, garantissant que les données que vous consultez sont les plus récentes disponibles.",
+    "gtfsValidator": "le validateur canonique GTFS Schedule",
+    "gbfsValidator": "le validateur GBFS.",
+    "benefits": {
+      "mirrored": "Versions miroirs des flux GTFS Schedule hébergés par les opérateurs pour éviter les temps d'arrêt et le blocage géographique",
+      "boundingBoxes": "Boîtes englobantes pour visualiser ou filtrer par région sélectionnée dans l'API",
+      "addFeeds": "Un formulaire simple et facile à utiliser pour ajouter de nouveaux flux",
+      "openSource": "Une communauté open source travaillant activement à améliorer les outils"
+    }
   }
 }
diff --git a/src/app/App.tsx b/src/app/App.tsx
index 9b87a34e..3c77f3d4 100644
--- a/src/app/App.tsx
+++ b/src/app/App.tsx
@@ -10,12 +10,19 @@ import { Suspense, useEffect, useState } from 'react';
 import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
 import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
 import AppContainer from './AppContainer';
-import { Helmet, HelmetProvider } from 'react-helmet-async';
 
-function App(): React.ReactElement {
+interface AppProps {
+  locale?: string;
+}
+
+function App({ locale }: AppProps): React.ReactElement {
   const dispatch = useDispatch();
   const [isAppReady, setIsAppReady] = useState(false);
 
+  // Determine basename for BrowserRouter based on locale
+  // Non-default locales (e.g., 'fr') need their prefix as basename
+  const basename = locale && locale !== 'en' ? `/${locale}` : undefined;
+
   useEffect(() => {
     app.auth().onAuthStateChanged((user) => {
       if (user != null) {
@@ -29,24 +36,14 @@ function App(): React.ReactElement {
   }, [dispatch]);
 
   return (
-    <HelmetProvider>
-      <Helmet>
-        <meta
-          name='description'
-          content={
-            "Access GTFS, GTFS Realtime, GBFS transit data with over 4,000 feeds from 70+ countries on the web's leading transit data platform."
-          }
-        />
-      </Helmet>
       <Suspense>
         <LocalizationProvider dateAdapter={AdapterDayjs}>
           {/* BrowserRouter will be deprecated in favor of Next AppRouter */}
-          <BrowserRouter>
+          <BrowserRouter basename={basename}>
             <AppContainer>{isAppReady ? <AppRouter /> : null}</AppContainer>
           </BrowserRouter>
         </LocalizationProvider>
       </Suspense>
-    </HelmetProvider>
   );
 }
 
diff --git a/src/app/[[...slug]]/page.tsx b/src/app/[[...slug]]/page.tsx
deleted file mode 100644
index bd9e010c..00000000
--- a/src/app/[[...slug]]/page.tsx
+++ /dev/null
@@ -1,12 +0,0 @@
-'use client';
-
-// This page is temporary to ease the migration to Next.js App Router
-// It will be deprecated once the migration is fully complete
-import { type ReactNode } from 'react';
-import dynamic from 'next/dynamic';
-
-const App = dynamic(async () => await import('../App'), { ssr: false });
-
-export default function Page(): ReactNode {
-  return <App />;
-}
diff --git a/src/app/[locale]/[...slug]/page.tsx b/src/app/[locale]/[...slug]/page.tsx
new file mode 100644
index 00000000..dc7a71e7
--- /dev/null
+++ b/src/app/[locale]/[...slug]/page.tsx
@@ -0,0 +1,22 @@
+'use client';
+
+// This page is temporary to ease the migration to Next.js App Router
+// It will be deprecated once the migration is fully complete
+import { type ReactNode, use } from 'react';
+import dynamic from 'next/dynamic';
+
+const App = dynamic(async () => await import('../../App'), { ssr: false });
+
+interface PageProps {
+  params: Promise<{
+    locale: string;
+    slug: string[];
+  }>;
+}
+
+export default function Page({ params }: PageProps): ReactNode {
+  const { locale } = use(params);
+  
+  // Pass locale to App so BrowserRouter can use correct basename
+  return <App locale={locale} />;
+}
diff --git a/src/app/[locale]/about/page.tsx b/src/app/[locale]/about/page.tsx
new file mode 100644
index 00000000..90a6fb63
--- /dev/null
+++ b/src/app/[locale]/about/page.tsx
@@ -0,0 +1,24 @@
+import { type ReactElement } from 'react';
+import { setRequestLocale } from 'next-intl/server';
+import { routing } from '../../../i18n/routing';
+import AboutPage from './components/AboutPage';
+
+export const dynamic = 'force-static';
+
+export function generateStaticParams() {
+  return routing.locales.map((locale) => ({ locale }));
+}
+
+interface PageProps {
+  params: Promise<{ locale: string }>;
+}
+
+export default async function About({
+  params,
+}: PageProps): Promise<ReactElement> {
+  const { locale } = await params;
+
+  setRequestLocale(locale);
+
+  return <AboutPage />;
+}
diff --git a/src/app/feeds/[feedDataType]/[feedId]/loading.tsx b/src/app/[locale]/feeds/[feedDataType]/[feedId]/loading.tsx
similarity index 100%
rename from src/app/feeds/[feedDataType]/[feedId]/loading.tsx
rename to src/app/[locale]/feeds/[feedDataType]/[feedId]/loading.tsx
diff --git a/src/app/feeds/[feedDataType]/[feedId]/map/page.tsx b/src/app/[locale]/feeds/[feedDataType]/[feedId]/map/page.tsx
similarity index 78%
rename from src/app/feeds/[feedDataType]/[feedId]/map/page.tsx
rename to src/app/[locale]/feeds/[feedDataType]/[feedId]/map/page.tsx
index 5d87c663..8dbf4d13 100644
--- a/src/app/feeds/[feedDataType]/[feedId]/map/page.tsx
+++ b/src/app/[locale]/feeds/[feedDataType]/[feedId]/map/page.tsx
@@ -1,4 +1,4 @@
-import FullMapView from '../../../../screens/Feed/components/FullMapView';
+import FullMapView from '../../../../../screens/Feed/components/FullMapView';
 import { type ReactElement } from 'react';
 
 export default function FullMapViewPage(): ReactElement {
diff --git a/src/app/feeds/[feedDataType]/[feedId]/page.tsx b/src/app/[locale]/feeds/[feedDataType]/[feedId]/page.tsx
similarity index 95%
rename from src/app/feeds/[feedDataType]/[feedId]/page.tsx
rename to src/app/[locale]/feeds/[feedDataType]/[feedId]/page.tsx
index d7774e13..897c93ae 100644
--- a/src/app/feeds/[feedDataType]/[feedId]/page.tsx
+++ b/src/app/[locale]/feeds/[feedDataType]/[feedId]/page.tsx
@@ -1,6 +1,6 @@
 import { type ReactElement } from 'react';
 import { cache } from 'react';
-import FeedView from '../../../screens/Feed/FeedView';
+import FeedView from '../../../../screens/Feed/FeedView';
 import {
   getFeed,
   getGtfsFeed,
@@ -9,20 +9,20 @@ import {
   getGtfsFeedDatasets,
   getGtfsFeedRoutes,
   getGtfsFeedAssociatedGtfsRtFeeds,
-} from '../../../services/feeds';
+} from '../../../../services/feeds';
 import { notFound } from 'next/navigation';
 import type { Metadata, ResolvingMetadata } from 'next';
-import { getSSRAccessToken } from '../../../utils/auth-server';
+import { getSSRAccessToken } from '../../../../utils/auth-server';
 import {
   type GTFSFeedType,
   type GTFSRTFeedType,
-} from '../../../services/feeds/utils';
+} from '../../../../services/feeds/utils';
 import {
   formatProvidersSorted,
   generatePageTitle,
   generateDescriptionMetaTag,
-} from '../../../screens/Feed/Feed.functions';
-import generateFeedStructuredData from '../../../screens/Feed/StructuredData.functions';
+} from '../../../../screens/Feed/Feed.functions';
+import generateFeedStructuredData from '../../../../screens/Feed/StructuredData.functions';
 import { getTranslations } from 'next-intl/server';
 
 interface Props {
diff --git a/src/app/feeds/[feedDataType]/page.tsx b/src/app/[locale]/feeds/[feedDataType]/page.tsx
similarity index 89%
rename from src/app/feeds/[feedDataType]/page.tsx
rename to src/app/[locale]/feeds/[feedDataType]/page.tsx
index 7ff203b7..7677bdf4 100644
--- a/src/app/feeds/[feedDataType]/page.tsx
+++ b/src/app/[locale]/feeds/[feedDataType]/page.tsx
@@ -6,8 +6,8 @@
  */
 
 import { type ReactElement } from 'react';
-import { getFeed } from '../../services/feeds';
-import { getSSRAccessToken } from '../../utils/auth-server';
+import { getFeed } from '../../../services/feeds';
+import { getSSRAccessToken } from '../../../utils/auth-server';
 import { notFound, redirect } from 'next/navigation';
 
 interface Props {
diff --git a/src/app/layout.tsx b/src/app/[locale]/layout.tsx
similarity index 52%
rename from src/app/layout.tsx
rename to src/app/[locale]/layout.tsx
index 9695a651..cafd8f8c 100644
--- a/src/app/layout.tsx
+++ b/src/app/[locale]/layout.tsx
@@ -1,15 +1,17 @@
 import { SpeedInsights } from '@vercel/speed-insights/next';
 import { Analytics } from '@vercel/analytics/next';
-import ThemeRegistry from './registry';
-import { Providers } from './providers';
+import ThemeRegistry from '../registry';
+import { Providers } from '../providers';
 import { type ReactElement } from 'react';
-import { NextIntlClientProvider } from 'next-intl';
-import { getLocale, getMessages } from 'next-intl/server';
-import { getRemoteConfigValues } from '../lib/remote-config.server';
+import { NextIntlClientProvider, hasLocale } from 'next-intl';
+import { getMessages, setRequestLocale } from 'next-intl/server';
+import { notFound } from 'next/navigation';
+import { getRemoteConfigValues } from '../../lib/remote-config.server';
 import { Mulish, IBM_Plex_Mono } from 'next/font/google';
-import Footer from './components/Footer';
-import Header from './components/Header';
+import Footer from '../components/Footer';
+import Header from '../components/Header';
 import { Container } from '@mui/material';
+import { routing } from '../../i18n/routing';
 
 export const metadata = {
   title: 'Mobility Database',
@@ -20,6 +22,12 @@ export const metadata = {
       : 'noindex, nofollow',
 };
 
+export const viewport = {
+  width: 'device-width',
+  initialScale: 1,
+  maximumScale: 5,
+};
+
 const mulish = Mulish({
   weight: ['400', '500', '700'],
   subsets: ['latin'],
@@ -34,19 +42,48 @@ const ibmPlexMono = IBM_Plex_Mono({
   variable: '--font-ibm-plex-mono',
 });
 
-export default async function RootLayout({
-  children,
-}: {
+/**
+ * Generate static params for all locales.
+ * This enables static generation for locale-prefixed routes.
+ */
+export function generateStaticParams() {
+  return routing.locales.map((locale) => ({ locale }));
+}
+
+interface LocaleLayoutProps {
   children: React.ReactNode;
-}): Promise<ReactElement> {
-  const [locale, messages, remoteConfig] = await Promise.all([
-    getLocale(),
+  params: Promise<{ locale: string }>;
+}
+
+/**
+ * Root layout for all locale-based pages.
+ * Provides i18n context, theme, and app shell (header/footer).
+ */
+export default async function LocaleLayout({
+  children,
+  params,
+}: LocaleLayoutProps): Promise<ReactElement> {
+  const { locale } = await params;
+
+  // Validate the locale
+  if (!hasLocale(routing.locales, locale)) {
+    notFound();
+  }
+
+  // Enable static rendering for this locale
+  setRequestLocale(locale);
+
+  const [messages, remoteConfig] = await Promise.all([
     getMessages(),
     getRemoteConfigValues(),
   ]);
 
   return (
     <html lang={locale}>
+      <head>
+        <link rel="preconnect" href="https://firebaseapp.com" />
+        <link rel="dns-prefetch" href="https://firebaseapp.com" />
+      </head>
       <body className={`${mulish.variable} ${ibmPlexMono.variable}`}>
         <ThemeRegistry>
           <NextIntlClientProvider messages={messages}>
@@ -57,8 +94,6 @@ export default async function RootLayout({
                 disableGutters
                 component={'main'}
                 id='next'
-                /* 100vh - header margin - header - footer - footer padding */
-                /* Not perfect, to revisit: for client loading state */
                 sx={{
                   minHeight: 'calc(100vh - 32px - 64px - 232px - 20px)',
                 }}
@@ -75,3 +110,4 @@ export default async function RootLayout({
     </html>
   );
 }
+
diff --git a/src/app/about/page.tsx b/src/app/about/page.tsx
deleted file mode 100644
index e13f6015..00000000
--- a/src/app/about/page.tsx
+++ /dev/null
@@ -1,107 +0,0 @@
-import { Container, Typography, Button } from '@mui/material';
-import OpenInNewIcon from '@mui/icons-material/OpenInNew';
-import { type ReactElement } from 'react';
-
-export default function Page(): ReactElement {
-  return (
-    <Container component='main'>
-      <Typography variant='h1'>About</Typography>
-      {/* ColoredContainer: This component uses style which is a client use only. Investigate pattern for SSR optimal Theme rendering */}
-      <Container
-        sx={{
-          backgroundColor: 'background.paper',
-          borderRadius: '6px',
-          paddingTop: 3,
-          paddingBottom: 3,
-          mt: 3,
-        }}
-        maxWidth={false}
-      >
-        <Typography sx={{ fontWeight: 700 }}>
-          The Mobility Database is an open catalog including over 4000 GTFS,
-          GTFS Realtime, and GBFS feeds in over 75 countries. It integrates with
-          the Canonical GTFS Schedule and GBFS Validators to share data quality
-          reports for each feed.
-          <br /> <br />
-          This database is hosted and maintained by MobilityData, the global
-          non-profit organization dedicated to the advancement of open
-          transportation data standards.
-          <br />
-          <Button
-            component={'a'}
-            variant='contained'
-            sx={{ mt: 3 }}
-            endIcon={<OpenInNewIcon />}
-            href='https://mobilitydata.org/'
-            rel='noreferrer'
-            target='_blank'
-          >
-            Learn more about MobilityData
-          </Button>
-        </Typography>
-        <Typography
-          variant='h5'
-          color='primary'
-          sx={{ fontWeight: 700, mt: 5, mb: 1 }}
-        >
-          Why Use the Mobility Database?
-        </Typography>
-        <Typography className='answer'>
-          The Mobility Database provides free access to historical and current
-          GTFS, GTFS Realtime, and GBFS feeds from around the world. These feeds
-          are checked for updates every day, ensuring that the data you’re
-          looking at is the most recent data available.
-          <br /> <br />
-          In addition to our database, we develop and maintain other tools that
-          integrate with it such as&#20;
-          <Button
-            variant='text'
-            className='line-start inline'
-            href={'https://gtfs-validator.mobilitydata.org/'}
-            rel='noreferrer'
-            target='_blank'
-            endIcon={<OpenInNewIcon />}
-          >
-            the Canonical GTFS Schedule Validator
-          </Button>
-          and&#20;
-          <Button
-            variant='text'
-            className='line-start inline'
-            href={'https://gbfs-validator.mobilitydata.org/'}
-            rel='noreferrer'
-            target='_blank'
-            endIcon={<OpenInNewIcon />}
-          >
-            the GBFS Validator.
-          </Button>
-          Additional benefits of using the Mobility Database include
-          <ul>
-            <li>
-              Mirrored versions of operator-hosted GTFS Schedule feeds to avoid
-              operator website downtimes and geoblocking
-            </li>
-            <li>
-              Bounding boxes that help to visualize or filter in the API by a
-              select region
-            </li>
-            <li>
-              <Button
-                variant='text'
-                className='line-start inline'
-                href={'/contribute'}
-                rel='noreferrer'
-                target='_blank'
-              >
-                A simple, easy-to-use form to add new feeds
-              </Button>
-            </li>
-            <li>
-              An open source community actively working to improve the tools
-            </li>
-          </ul>
-        </Typography>
-      </Container>
-    </Container>
-  );
-}
diff --git a/src/i18n/config.ts b/src/i18n/config.ts
deleted file mode 100644
index 48f0f695..00000000
--- a/src/i18n/config.ts
+++ /dev/null
@@ -1,8 +0,0 @@
-export const locales = ['en', 'fr'] as const;
-export type Locale = (typeof locales)[number];
-export const defaultLocale: Locale = 'en';
-
-// Subdomain to locale mapping
-export const subdomainToLocale: Record<string, Locale> = {
-  fr: 'fr',
-};
diff --git a/src/i18n/navigation.ts b/src/i18n/navigation.ts
new file mode 100644
index 00000000..7c057d48
--- /dev/null
+++ b/src/i18n/navigation.ts
@@ -0,0 +1,15 @@
+import { createNavigation } from 'next-intl/navigation';
+import { routing } from './routing';
+
+/**
+ * Locale-aware navigation APIs.
+ * 
+ * Use these instead of Next.js navigation to automatically handle locale prefixes:
+ * - Link: Locale-aware link component
+ * - redirect: Server-side redirect with locale
+ * - usePathname: Get pathname without locale prefix
+ * - useRouter: Router with locale-aware navigation
+ * - getPathname: Get localized pathname
+ */
+export const { Link, redirect, usePathname, useRouter, getPathname } =
+  createNavigation(routing);
diff --git a/src/i18n/request.ts b/src/i18n/request.ts
index 062c0d61..74d247d0 100644
--- a/src/i18n/request.ts
+++ b/src/i18n/request.ts
@@ -1,16 +1,24 @@
 import { getRequestConfig } from 'next-intl/server';
-import { cookies } from 'next/headers';
-import { locales, defaultLocale } from './config';
+import { hasLocale } from 'next-intl';
+import { routing } from './routing';
 
-export default getRequestConfig(async () => {
-  const cookieStore = await cookies();
-  const locale = cookieStore.get('NEXT_LOCALE')?.value ?? defaultLocale;
-  const validLocale = locales.includes(locale as (typeof locales)[number])
-    ? locale
-    : defaultLocale;
+/**
+ * next-intl request configuration.
+ * 
+ * This is called for every request and determines which locale/messages to use.
+ * The locale comes from the [locale] route segment via the proxy.
+ */
+export default getRequestConfig(async ({ requestLocale }) => {
+  // Typically corresponds to the `[locale]` segment
+  const requested = await requestLocale;
+  
+  // Validate the locale, fall back to default if invalid
+  const locale = hasLocale(routing.locales, requested)
+    ? requested
+    : routing.defaultLocale;
 
   return {
-    locale: validLocale,
-    messages: (await import(`../../messages/${validLocale}.json`)).default,
+    locale,
+    messages: (await import(`../../messages/${locale}.json`)).default,
   };
 });
diff --git a/src/i18n/routing.ts b/src/i18n/routing.ts
new file mode 100644
index 00000000..83cbbd14
--- /dev/null
+++ b/src/i18n/routing.ts
@@ -0,0 +1,19 @@
+import { defineRouting } from 'next-intl/routing';
+
+/**
+ * Centralized routing configuration for next-intl.
+ * 
+ * - English (en): Default locale, no prefix in URL (/)
+ * - French (fr): Prefixed URL (/fr)
+ */
+export const routing = defineRouting({
+  locales: ['en', 'fr'],
+  defaultLocale: 'en',
+  // Don't show /en prefix for default locale
+  localePrefix: 'as-needed',
+  // Don't auto-detect locale from Accept-Language header
+  // Users must explicitly navigate to /fr to get French
+  localeDetection: false,
+});
+
+export type Locale = (typeof routing.locales)[number];
diff --git a/src/proxy.ts b/src/proxy.ts
index 659ad550..db02719e 100644
--- a/src/proxy.ts
+++ b/src/proxy.ts
@@ -1,20 +1,45 @@
-import { type NextRequest, NextResponse } from 'next/server';
-import { subdomainToLocale, defaultLocale } from './i18n/config';
+import { NextResponse, type NextRequest } from 'next/server';
+import { routing } from './i18n/routing';
 
-export function proxy(request: NextRequest): NextResponse {
-  const hostname = request.headers.get('host') ?? '';
-  const subdomain = hostname.split('.')[0];
+/**
+ * IMPORTANT: The logic of this proxy will be tested once the [...slug] route is removed
+ * Reasoning: [...slug] will catch all routes including those with wrong locale prefixes
+ */
 
-  // Determine locale from subdomain (fr.mobilitydata.org → 'fr')
-  const locale = subdomainToLocale[subdomain] ?? defaultLocale;
+/**
+ * Internationalization proxy following the Next.js i18n guide.
+ * @see https://nextjs.org/docs/app/guides/internationalization
+ *
+ * Behavior:
+ * - If a supported locale already exists in the pathname, continue without redirect
+ * - If no locale in pathname, internally rewrite to default locale path
+ */
+export default function proxy(request: NextRequest) {
+  const { pathname } = request.nextUrl;
 
-  // Set locale in cookie for server components to read
-  const response = NextResponse.next();
-  response.cookies.set('NEXT_LOCALE', locale);
+  // Check if any supported locale already exists in the pathname
+  const pathnameHasLocale = routing.locales.some(
+    (locale) => pathname.startsWith(`/${locale}/`) || pathname === `/${locale}`
+  );
 
-  return response;
+  // If locale exists in path, let it through
+  if (pathnameHasLocale) {
+    return NextResponse.next();
+  }
+
+  // No locale in pathname - rewrite to include default locale internally
+  // This allows the [locale] segment to receive the default locale
+  // without changing the URL the user sees
+  const url = request.nextUrl.clone();
+  url.pathname = `/${routing.defaultLocale}${pathname}`;
+  return NextResponse.rewrite(url);
 }
 
 export const config = {
+  // Match all pathnames except:
+  // - API routes (/api)
+  // - Next.js internals (/_next)
+  // - Static files with extensions (.ico, .png, etc.)
   matcher: ['/((?!api|_next|.*\\..*).*)'],
 };
+

From 017f300d70701e98398366482a390f9bebff372c Mon Sep 17 00:00:00 2001
From: Alessandro Kreslin <kalessandro14@gmail.com>
Date: Tue, 3 Feb 2026 10:03:31 -0500
Subject: [PATCH 2/8] cleanup

---
 package.json                   |   5 +-
 src/app/AppContainer.tsx       |   5 -
 src/app/router/Router.tsx      |   2 -
 src/app/screens/Feed/index.tsx |  20 ---
 src/app/screens/Home.tsx       | 288 ---------------------------------
 yarn.lock                      |  36 +----
 6 files changed, 9 insertions(+), 347 deletions(-)
 delete mode 100644 src/app/screens/Home.tsx

diff --git a/package.json b/package.json
index 8e5b8d85..d94f6a8c 100644
--- a/package.json
+++ b/package.json
@@ -41,7 +41,6 @@
     "react-draggable": "^4.5.0",
     "react-ga4": "^2.1.0",
     "react-google-recaptcha": "^3.1.0",
-    "react-helmet-async": "^2.0.5",
     "react-hook-form": "^7.52.1",
     "react-leaflet": "^4.2.1",
     "react-map-gl": "^8.0.4",
@@ -56,6 +55,7 @@
   },
   "scripts": {
     "build:prod": "next build",
+    "build:analyze": "next experimental-analyze",
     "start:dev": "next dev",
     "start:dev:mock": "NEXT_PUBLIC_API_MOCKING=enabled next dev -p 3001",
     "start:prod": "next build && next start",
@@ -73,6 +73,9 @@
     "generate:gbfs-validator-types:output": "npm exec -- openapi-typescript ./external_types/GbfsValidator.yaml -o $npm_config_output_path && eslint $npm_config_output_path --fix",
     "generate:gbfs-validator-types": "npm run generate:gbfs-validator-types:output -- --output-file=src/app/services/feeds/gbfs-validator-types.ts"
   },
+  "resolutions": {
+    "tar": "^7.5.7"
+  },
   "eslintConfig": {
     "extends": [
       "react-app",
diff --git a/src/app/AppContainer.tsx b/src/app/AppContainer.tsx
index d3225531..e165ab6d 100644
--- a/src/app/AppContainer.tsx
+++ b/src/app/AppContainer.tsx
@@ -4,14 +4,12 @@ import * as React from 'react';
 import { Box, LinearProgress } from '@mui/material';
 import type ContextProviderProps from './interface/ContextProviderProps';
 import { useLocation } from 'react-router-dom';
-import { Helmet } from 'react-helmet-async';
 import { selectLoadingApp } from './store/selectors';
 import { useSelector } from 'react-redux';
 
 const AppContainer: React.FC<ContextProviderProps> = ({ children }) => {
   const isAppLoading = useSelector(selectLoadingApp);
   const location = useLocation();
-  const canonicalUrl = window.location.origin + location.pathname;
 
   React.useLayoutEffect(() => {
     window.scrollTo({ top: 0, left: 0, behavior: 'instant' });
@@ -19,9 +17,6 @@ const AppContainer: React.FC<ContextProviderProps> = ({ children }) => {
 
   return (
     <>
-      <Helmet>
-        <link rel='canonical' href={canonicalUrl} />
-      </Helmet>
       <Box id='app-main-container'>
         {isAppLoading ? (
           <Box sx={{ width: '100%', mt: '-31px' }}>
diff --git a/src/app/router/Router.tsx b/src/app/router/Router.tsx
index c3ecf973..fb6ba81b 100644
--- a/src/app/router/Router.tsx
+++ b/src/app/router/Router.tsx
@@ -7,7 +7,6 @@ import ContactInformation from '../screens/ContactInformation';
 import { ProtectedRoute } from './ProtectedRoute';
 import CompleteRegistration from '../screens/CompleteRegistration';
 import ChangePassword from '../screens/ChangePassword';
-import Home from '../screens/Home';
 import ForgotPassword from '../screens/ForgotPassword';
 import FAQ from '../screens/FAQ';
 import PostRegistration from '../screens/PostRegistration';
@@ -67,7 +66,6 @@ export const AppRouter: React.FC = () => {
 
   return (
     <Routes>
-      <Route path='/' element={<Home />} />
       <Route path='sign-in' element={<SignIn />} />
       <Route path='sign-up' element={<SignUp />} />
       <Route element={<ProtectedRoute targetStatus='authenticated' />}>
diff --git a/src/app/screens/Feed/index.tsx b/src/app/screens/Feed/index.tsx
index 3b819d94..382aa67a 100644
--- a/src/app/screens/Feed/index.tsx
+++ b/src/app/screens/Feed/index.tsx
@@ -41,7 +41,6 @@ import {
 import AssociatedFeeds from './components/AssociatedFeeds';
 import { WarningContentBox } from '../../components/WarningContentBox';
 import { useTranslations } from 'next-intl';
-import { Helmet } from 'react-helmet-async';
 import OpenInNewIcon from '@mui/icons-material/OpenInNew';
 import {
   ctaContainerStyle,
@@ -83,25 +82,6 @@ const wrapComponent = (
       sx={{ width: '100%', m: 'auto', px: 0 }}
       maxWidth='xl'
     >
-      <Helmet>
-        {descriptionMeta != undefined && (
-          <meta name='description' content={descriptionMeta} />
-        )}
-        {feedDataType != undefined && (
-          <link
-            rel='canonical'
-            href={
-              window.location.origin + '/feeds/' + feedDataType + '/' + feedId
-            }
-          />
-        )}
-        {structuredData != undefined && (
-          <script type='application/ld+json'>
-            {JSON.stringify(structuredData)}
-          </script>
-        )}
-      </Helmet>
-
       <CssBaseline />
       <Box sx={{ display: 'flex', flexDirection: 'column' }}>
         <Box
diff --git a/src/app/screens/Home.tsx b/src/app/screens/Home.tsx
deleted file mode 100644
index 7f8c7b44..00000000
--- a/src/app/screens/Home.tsx
+++ /dev/null
@@ -1,288 +0,0 @@
-import * as React from 'react';
-import CssBaseline from '@mui/material/CssBaseline';
-import Box from '@mui/material/Box';
-import Typography from '@mui/material/Typography';
-import Container from '@mui/material/Container';
-import {
-  Button,
-  Divider,
-  InputAdornment,
-  TextField,
-  useTheme,
-} from '@mui/material';
-import {
-  Search,
-  CheckCircleOutlineOutlined,
-  PowerOutlined,
-} from '@mui/icons-material';
-import { useState } from 'react';
-import { useNavigate } from 'react-router-dom';
-import { WEB_VALIDATOR_LINK } from '../constants/Navigation';
-import OpenInNewIcon from '@mui/icons-material/OpenInNew';
-import '../styles/TextShimmer.css';
-import { useTranslations } from 'next-intl';
-
-interface ActionBoxProps {
-  IconComponent: React.ElementType;
-  iconHeight: string;
-  buttonHref: string;
-  buttonText: string;
-}
-
-const ActionBox = ({
-  IconComponent,
-  iconHeight,
-  buttonHref,
-  buttonText,
-}: ActionBoxProps): React.ReactElement => (
-  <Box
-    sx={{
-      display: 'flex',
-      flexDirection: 'column',
-      alignItems: 'center',
-      flexGrow: 1,
-      flexBasis: 0,
-      minWidth: 0,
-    }}
-  >
-    <IconComponent sx={{ width: '100%', height: iconHeight }} />
-    <Button variant='contained' href={buttonHref} sx={{ m: 2, px: 2 }}>
-      {buttonText}
-    </Button>
-  </Box>
-);
-
-function Component(): React.ReactElement {
-  const [searchInputValue, setSearchInputValue] = useState('');
-  const tCommon = useTranslations('common');
-  const navigate = useNavigate();
-  const theme = useTheme();
-
-  const handleSearch = (): void => {
-    const encodedURI = encodeURIComponent(searchInputValue.trim());
-    if (encodedURI.length === 0) {
-      navigate('/feeds');
-    } else {
-      navigate(`/feeds?q=${encodedURI}`);
-    }
-  };
-
-  const handleKeyDown = (
-    event: React.KeyboardEvent<HTMLInputElement>,
-  ): void => {
-    if (event.key === 'Enter') {
-      handleSearch();
-    }
-  };
-
-  return (
-    <Container component='main' sx={{ px: { xs: 0, md: 3 } }}>
-      <CssBaseline />
-      <Box
-        sx={{
-          mt: 6,
-          display: 'flex',
-          flexDirection: 'column',
-        }}
-        mx={{ xs: '20px', m: 'auto' }}
-        maxWidth={{ xs: '100%', md: '1600px' }}
-      >
-        <Typography
-          component={'h1'}
-          sx={{
-            fontSize: {
-              xs: '36px',
-              sm: '48px',
-            },
-            fontStyle: 'normal',
-            fontWeight: 700,
-            lineHeight: 'normal',
-            textAlign: 'center',
-          }}
-          data-testid='home-title'
-          className='shimmer'
-        >
-          Explore and Access Global Transit Data
-        </Typography>
-        <Typography
-          component='h2'
-          variant='h5'
-          sx={{
-            textAlign: 'center',
-            fontWeight: 700,
-            mt: 4,
-          }}
-        >
-          Currently serving over
-          <Box
-            component='span'
-            sx={{ fontSize: 30, color: theme.palette.primary.main, mx: 1 }}
-          >
-            4000
-          </Box>
-          transportation data feeds from over
-          <Box
-            component='span'
-            sx={{ fontSize: 30, color: theme.palette.primary.main, mx: 1 }}
-          >
-            75
-          </Box>
-          countries.
-        </Typography>
-        <Box
-          sx={{
-            display: 'flex',
-            justifyContent: 'center',
-            alignItems: 'center',
-          }}
-        >
-          <TextField
-            sx={{
-              width: '80%',
-              mt: 6,
-              fieldset: {
-                borderColor: theme.palette.primary.main,
-              },
-            }}
-            value={searchInputValue}
-            onChange={(e) => {
-              setSearchInputValue(e.target.value);
-            }}
-            onKeyDown={handleKeyDown}
-            placeholder='e.g. "New York" or "Carris Metropolitana"'
-            InputProps={{
-              startAdornment: (
-                <InputAdornment position={'start'}>
-                  <Search />
-                </InputAdornment>
-              ),
-            }}
-          />
-          <Button
-            sx={{
-              mt: 6,
-              py: 1.5,
-              ml: 1,
-              height: 55,
-              boxShadow: 0,
-            }}
-            variant='contained'
-            color='primary'
-            onClick={handleSearch}
-          >
-            {tCommon('search')}
-          </Button>
-        </Box>
-        <Box
-          sx={{
-            display: 'flex',
-            alignItems: 'center',
-            margin: '30px 0',
-            position: 'relative',
-          }}
-        >
-          <Divider
-            sx={{
-              flexGrow: 1,
-              backgroundColor: 'text.primary',
-            }}
-            variant='middle'
-          />
-          <Typography
-            sx={{ fontWeight: 'bold', marginX: '8px' }}
-            variant='body1'
-          >
-            or
-          </Typography>
-          <Divider
-            sx={{
-              flexGrow: 1,
-              backgroundColor: 'text.primary',
-              mx: '16',
-            }}
-            variant='middle'
-          />
-        </Box>
-        <Box
-          sx={{
-            display: 'flex',
-            justifyContent: 'center',
-            flexDirection: { xs: 'column', sm: 'row' },
-            width: '700px',
-            maxWidth: '100%',
-            margin: 'auto',
-          }}
-        >
-          <ActionBox
-            IconComponent={Search}
-            iconHeight='70px'
-            buttonHref='/feeds'
-            buttonText='Browse Feeds'
-          />
-          <ActionBox
-            IconComponent={CheckCircleOutlineOutlined}
-            iconHeight='70px'
-            buttonHref='/contribute'
-            buttonText='Add a feed'
-          />
-          <ActionBox
-            IconComponent={PowerOutlined}
-            iconHeight='70px'
-            buttonHref='/sign-up'
-            buttonText='Sign up for the API'
-          />
-        </Box>
-        <Box
-          sx={{
-            background: theme.palette.background.paper,
-            borderRadius: '6px 0px 0px 6px',
-            p: {
-              xs: 2,
-              sm: 4,
-            },
-            fontSize: '18px',
-            fontWeight: 700,
-            mr: 0,
-            mt: 5,
-          }}
-        >
-          The Mobility Database is an open data catalog including over 4000
-          GTFS, GTFS Realtime, and GBFS feeds in over 75 countries. Whether
-          you’re a transportation operator, a researcher studying public transit
-          and shared mobility trends, or a maps app needing reliable data to use
-          with your application, the Mobility Database has everything you need
-          in one central location.
-          <br />
-          <br />
-          Our database integrates with
-          <Button
-            variant='text'
-            className='inline'
-            href={WEB_VALIDATOR_LINK}
-            rel='noreferrer'
-            target='_blank'
-            endIcon={<OpenInNewIcon />}
-          >
-            the Canonical GTFS Schedule Validator
-          </Button>
-          and
-          <Button
-            variant='text'
-            className='inline'
-            href='https://gbfs-validator.mobilitydata.org/'
-            rel='noreferrer'
-            target='_blank'
-            endIcon={<OpenInNewIcon />}
-          >
-            the GBFS Validator
-          </Button>
-          to provide detailed data quality reports on every feed.
-        </Box>
-      </Box>
-    </Container>
-  );
-}
-
-export default function Home(): React.ReactElement {
-  return <Component />;
-}
diff --git a/yarn.lock b/yarn.lock
index 238f6c47..c42b451b 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -7639,13 +7639,6 @@ intl-messageformat@^10.5.14:
     "@formatjs/icu-messageformat-parser" "2.11.4"
     tslib "^2.8.0"
 
-invariant@^2.2.4:
-  version "2.2.4"
-  resolved "https://registry.yarnpkg.com/invariant/-/invariant-2.2.4.tgz#610f3c92c9359ce1db616e538008d23ff35158e6"
-  integrity sha512-phJfQVBuaJM5raOpJjSfkiD6BpbCE4Ns//LaXl6wGYtUBY83nWS6Rf9tXm2e8VaK60JEjYldbPif/A2B1C2gNA==
-  dependencies:
-    loose-envify "^1.0.0"
-
 ip-address@^10.0.1:
   version "10.1.0"
   resolved "https://registry.yarnpkg.com/ip-address/-/ip-address-10.1.0.tgz#d8dcffb34d0e02eb241427444a6e23f5b0595aa4"
@@ -8996,7 +8989,7 @@ long@^5.0.0:
   resolved "https://registry.yarnpkg.com/long/-/long-5.3.2.tgz#1d84463095999262d7d7b7f8bfd4a8cc55167f83"
   integrity sha512-mNAgZ1GmyNhD7AuqnTG3/VQ26o760+ZYBPKjPvugO8+nLbYfX6TVpJPseBvopbdY+qpZ/lKUnmEc1LeZYS3QAA==
 
-loose-envify@^1.0.0, loose-envify@^1.4.0:
+loose-envify@^1.4.0:
   version "1.4.0"
   resolved "https://registry.yarnpkg.com/loose-envify/-/loose-envify-1.4.0.tgz#71ee51fa7be4caec1a63839f7e682d8132d30caf"
   integrity sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==
@@ -10564,11 +10557,6 @@ react-fast-compare@^2.0.1:
   resolved "https://registry.yarnpkg.com/react-fast-compare/-/react-fast-compare-2.0.4.tgz#e84b4d455b0fec113e0402c329352715196f81f9"
   integrity sha512-suNP+J1VU1MWFKcyt7RtjiSWUjvidmQSlqu+eHslq+342xCbGTYmC0mEhPCOHxlW0CywylOC1u2DFAT+bv4dBw==
 
-react-fast-compare@^3.2.2:
-  version "3.2.2"
-  resolved "https://registry.yarnpkg.com/react-fast-compare/-/react-fast-compare-3.2.2.tgz#929a97a532304ce9fee4bcae44234f1ce2c21d49"
-  integrity sha512-nsO+KSNgo1SbJqJEYRE9ERzo7YtYbou/OqjSQKxV7jcKox7+usiUVZOAC+XnDOABXggQTno0Y1CpVnuWEc1boQ==
-
 react-ga4@^2.1.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/react-ga4/-/react-ga4-2.1.0.tgz#56601f59d95c08466ebd6edfbf8dede55c4678f9"
@@ -10582,15 +10570,6 @@ react-google-recaptcha@^3.1.0:
     prop-types "^15.5.0"
     react-async-script "^1.2.0"
 
-react-helmet-async@^2.0.5:
-  version "2.0.5"
-  resolved "https://registry.yarnpkg.com/react-helmet-async/-/react-helmet-async-2.0.5.tgz#cfc70cd7bb32df7883a8ed55502a1513747223ec"
-  integrity sha512-rYUYHeus+i27MvFE+Jaa4WsyBKGkL6qVgbJvSBoX8mbsWoABJXdEO0bZyi0F6i+4f0NuIb8AvqPMj3iXFHkMwg==
-  dependencies:
-    invariant "^2.2.4"
-    react-fast-compare "^3.2.2"
-    shallowequal "^1.1.0"
-
 react-hook-form@^7.52.1:
   version "7.71.1"
   resolved "https://registry.yarnpkg.com/react-hook-form/-/react-hook-form-7.71.1.tgz#6a758958861682cf0eb22131eead684ba3618f66"
@@ -11199,11 +11178,6 @@ setprototypeof@1.2.0, setprototypeof@~1.2.0:
   resolved "https://registry.yarnpkg.com/setprototypeof/-/setprototypeof-1.2.0.tgz#66c9a24a73f9fc28cbe66b09fed3d33dcaf1b424"
   integrity sha512-E5LDX7Wrp85Kil5bhZv46j8jOeboKq5JMmYM3gVGdGH8xFpPWXUMsNrlODCrkoxMEeNi/XZIwuRvY4XNwYMJpw==
 
-shallowequal@^1.1.0:
-  version "1.1.0"
-  resolved "https://registry.yarnpkg.com/shallowequal/-/shallowequal-1.1.0.tgz#188d521de95b9087404fd4dcb68b13df0ae4e7f8"
-  integrity sha512-y0m1JoUZSlPAjXVtPPW70aZWfIL/dSP7AFkRnniLCrK/8MDKog3TySTBmckD+RObVxH0v4Tox67+F14PdED2oQ==
-
 sharp@^0.34.4:
   version "0.34.5"
   resolved "https://registry.yarnpkg.com/sharp/-/sharp-0.34.5.tgz#b6f148e4b8c61f1797bde11a9d1cfebbae2c57b0"
@@ -11831,10 +11805,10 @@ tar-stream@^3.0.0:
     fast-fifo "^1.2.0"
     streamx "^2.15.0"
 
-tar@^7.5.2:
-  version "7.5.6"
-  resolved "https://registry.yarnpkg.com/tar/-/tar-7.5.6.tgz#2db7a210748a82f0a89cc31527b90d3a24984fb7"
-  integrity sha512-xqUeu2JAIJpXyvskvU3uvQW8PAmHrtXp2KDuMJwQqW8Sqq0CaZBAQ+dKS3RBXVhU4wC5NjAdKrmh84241gO9cA==
+tar@^7.5.2, tar@^7.5.7:
+  version "7.5.7"
+  resolved "https://registry.yarnpkg.com/tar/-/tar-7.5.7.tgz#adf99774008ba1c89819f15dbd6019c630539405"
+  integrity sha512-fov56fJiRuThVFXD6o6/Q354S7pnWMJIVlDBYijsTNx6jKSE4pvrDTs6lUnmGvNyfJwFQQwWy3owKz1ucIhveQ==
   dependencies:
     "@isaacs/fs-minipass" "^4.0.0"
     chownr "^3.0.0"

From 5f15f8d4e4e888f6057a8764c5947317bbf7ff71 Mon Sep 17 00:00:00 2001
From: Alessandro Kreslin <kalessandro14@gmail.com>
Date: Tue, 3 Feb 2026 10:05:23 -0500
Subject: [PATCH 3/8] seo changes for landing and about

---
 .../[locale]/about/components/AboutPage.tsx   |  91 +++++++
 src/app/[locale]/components/HomePage.tsx      | 226 ++++++++++++++++++
 src/app/[locale]/components/SearchBox.tsx     |  80 +++++++
 src/app/[locale]/layout.tsx                   |   2 +-
 src/app/[locale]/page.tsx                     |  57 +++++
 src/app/styles/TextShimmer.css                |   3 +-
 6 files changed, 457 insertions(+), 2 deletions(-)
 create mode 100644 src/app/[locale]/about/components/AboutPage.tsx
 create mode 100644 src/app/[locale]/components/HomePage.tsx
 create mode 100644 src/app/[locale]/components/SearchBox.tsx
 create mode 100644 src/app/[locale]/page.tsx

diff --git a/src/app/[locale]/about/components/AboutPage.tsx b/src/app/[locale]/about/components/AboutPage.tsx
new file mode 100644
index 00000000..760b8ce8
--- /dev/null
+++ b/src/app/[locale]/about/components/AboutPage.tsx
@@ -0,0 +1,91 @@
+import { Container, Typography, Button } from '@mui/material';
+import OpenInNewIcon from '@mui/icons-material/OpenInNew';
+import { type ReactElement } from 'react';
+import { getTranslations } from 'next-intl/server';
+
+export default async function AboutPage(): Promise<ReactElement> {
+  const t = await getTranslations('about');
+
+  return (
+    <Container component='main'>
+      <Typography variant='h1'>{t('title')}</Typography>
+      <Container
+        sx={{
+          backgroundColor: 'background.paper',
+          borderRadius: '6px',
+          paddingTop: 3,
+          paddingBottom: 3,
+          mt: 3,
+        }}
+        maxWidth={false}
+      >
+        <Typography sx={{ fontWeight: 700 }}>
+          {t('description')}
+          <br />
+          <Button
+            component={'a'}
+            variant='contained'
+            sx={{ mt: 3 }}
+            endIcon={<OpenInNewIcon />}
+            href='https://mobilitydata.org/'
+            rel='noreferrer'
+            target='_blank'
+          >
+            {t('learnMore')}
+          </Button>
+        </Typography>
+        <Typography
+          variant='h5'
+          color='primary'
+          sx={{ fontWeight: 700, mt: 5, mb: 1 }}
+        >
+          {t('whyUse')}
+        </Typography>
+        <Typography className='answer'>
+          {t('whyUseAnswer')}
+          <br /> <br />
+          In addition to our database, we develop and maintain other tools that
+          integrate with it such as&#20;
+          <Button
+            variant='text'
+            className='line-start inline'
+            href={'https://gtfs-validator.mobilitydata.org/'}
+            rel='noreferrer'
+            target='_blank'
+            endIcon={<OpenInNewIcon />}
+          >
+            {t('gtfsValidator')}
+          </Button>
+          and&#20;
+          <Button
+            variant='text'
+            className='line-start inline'
+            href={'https://gbfs-validator.mobilitydata.org/'}
+            rel='noreferrer'
+            target='_blank'
+            endIcon={<OpenInNewIcon />}
+          >
+            {t('gbfsValidator')}
+          </Button>
+          Additional benefits of using the Mobility Database include
+          <ul>
+            <li>{t('benefits.mirrored')}</li>
+            <li>{t('benefits.boundingBoxes')}</li>
+            <li>
+              <Button
+                variant='text'
+                className='line-start inline'
+                href='/contribute'
+                rel='noreferrer'
+                target='_blank'
+              >
+                {t('benefits.addFeeds')}
+              </Button>
+            </li>
+            <li>{t('benefits.openSource')}</li>
+          </ul>
+        </Typography>
+      </Container>
+    </Container>
+  );
+}
diff --git a/src/app/[locale]/components/HomePage.tsx b/src/app/[locale]/components/HomePage.tsx
new file mode 100644
index 00000000..e4381c63
--- /dev/null
+++ b/src/app/[locale]/components/HomePage.tsx
@@ -0,0 +1,226 @@
+import { type ReactElement } from 'react';
+import { Box, Typography, Button, Container, Divider } from '@mui/material';
+import {
+  Search,
+  CheckCircleOutlineOutlined,
+  PowerOutlined,
+} from '@mui/icons-material';
+import { WEB_VALIDATOR_LINK } from '../../constants/Navigation';
+import OpenInNewIcon from '@mui/icons-material/OpenInNew';
+import SearchBox from './SearchBox';
+import { getTranslations } from 'next-intl/server';
+import '../../styles/TextShimmer.css';
+
+interface ActionBoxProps {
+  IconComponent: React.ElementType;
+  iconHeight: string;
+  buttonHref: string;
+  buttonText: string;
+}
+
+const ActionBox = ({
+  IconComponent,
+  iconHeight,
+  buttonHref,
+  buttonText,
+}: ActionBoxProps): React.ReactElement => (
+  <Box
+    sx={{
+      display: 'flex',
+      flexDirection: 'column',
+      alignItems: 'center',
+      flexGrow: 1,
+      flexBasis: 0,
+      minWidth: 0,
+    }}
+  >
+    <IconComponent sx={{ width: '100%', height: iconHeight }} />
+    <Button variant='contained' href={buttonHref} sx={{ m: 2, px: 2 }}>
+      {buttonText}
+    </Button>
+  </Box>
+);
+
+/**
+ * Home page component that fetches translations directly.
+ * Used by [locale]/page.tsx
+ */
+export default async function HomePage(): Promise<ReactElement> {
+  const t = await getTranslations('home');
+
+  return (
+    <Container component='main' sx={{ px: { xs: 0, md: 3 } }}>
+      <Box
+        component='section'
+        sx={{
+          mt: 6,
+          display: 'flex',
+          flexDirection: 'column',
+        }}
+        mx={{ xs: '20px', m: 'auto' }}
+        maxWidth={{ xs: '100%', md: '1600px' }}
+        role='main'
+        aria-label='Mobility Database Home'
+      >
+        <Typography
+          component='h1'
+          sx={{
+            fontSize: {
+              xs: '36px',
+              sm: '48px',
+            },
+            fontStyle: 'normal',
+            fontWeight: 700,
+            lineHeight: 'normal',
+            textAlign: 'center',
+          }}
+          data-testid='home-title'
+          className='shimmer'
+        >
+          {t('title')}
+        </Typography>
+        <Typography
+          component='h2'
+          variant='h5'
+          sx={{
+            textAlign: 'center',
+            fontWeight: 700,
+            mt: 4,
+          }}
+        >
+          {t('servingOver')}
+          <Box
+            component='span'
+            sx={{ fontSize: 30, color: 'primary.main', mx: 1 }}
+            itemProp='numberOfItems'
+          >
+            4000
+          </Box>
+          {t('feeds')}
+          <Box
+            component='span'
+            sx={{ fontSize: 30, color: 'primary.main', mx: 1 }}
+            itemProp='spatialCoverage'
+          >
+            75
+          </Box>
+          {t('countries')}
+        </Typography>
+        <SearchBox />
+        <Box
+          sx={{
+            display: 'flex',
+            alignItems: 'center',
+            margin: '30px 0',
+            position: 'relative',
+          }}
+        >
+          <Divider
+            sx={{
+              flexGrow: 1,
+              backgroundColor: 'text.primary',
+            }}
+            variant='middle'
+          />
+          <Typography
+            sx={{ fontWeight: 'bold', marginX: '8px' }}
+            variant='body1'
+          >
+            {t('or')}
+          </Typography>
+          <Divider
+            sx={{
+              flexGrow: 1,
+              backgroundColor: 'text.primary',
+              mx: '16',
+            }}
+            variant='middle'
+          />
+        </Box>
+        <Box
+          component='nav'
+          sx={{
+            display: 'flex',
+            justifyContent: 'center',
+            flexDirection: { xs: 'column', sm: 'row' },
+            width: '700px',
+            maxWidth: '100%',
+            margin: 'auto',
+          }}
+          role='navigation'
+          aria-label='Main actions'
+        >
+          <ActionBox
+            IconComponent={Search}
+            iconHeight='70px'
+            buttonHref='/feeds'
+            buttonText={t('browseFeeds')}
+          />
+          <ActionBox
+            IconComponent={CheckCircleOutlineOutlined}
+            iconHeight='70px'
+            buttonHref='/contribute'
+            buttonText={t('addFeed')}
+          />
+          <ActionBox
+            IconComponent={PowerOutlined}
+            iconHeight='70px'
+            buttonHref='/sign-up'
+            buttonText={t('signUpApi')}
+          />
+        </Box>
+        <Box
+          component='section'
+          sx={{
+            background: 'background.paper',
+            borderRadius: '6px 0px 0px 6px',
+            p: {
+              xs: 2,
+              sm: 4,
+            },
+            fontSize: '18px',
+            fontWeight: 700,
+            mr: 0,
+            mt: 5,
+          }}
+          role='contentinfo'
+          aria-label='About Mobility Database'
+        >
+          <Typography component='h3' sx={{ fontSize: '20px', fontWeight: 700, mb: 2 }}>
+            About Our Platform
+          </Typography>
+          <Typography component='p' sx={{ mb: 2 }}>
+            {t('description')}
+          </Typography>
+          <Typography component='p'>
+            {t('validatorIntro')}
+            <Button
+              variant='text'
+              className='inline'
+              href={WEB_VALIDATOR_LINK}
+              rel='noreferrer'
+              target='_blank'
+              endIcon={<OpenInNewIcon />}
+              aria-label='GTFS Validator - Opens in new tab'
+            >
+              {t('gtfsValidator')}
+            </Button>
+            {t('and')}
+            <Button
+              variant='text'
+              className='inline'
+              href='https://gbfs-validator.mobilitydata.org/'
+              rel='noreferrer'
+              target='_blank'
+              endIcon={<OpenInNewIcon />}
+              aria-label='GBFS Validator - Opens in new tab'
+            >
+              {t('gbfsValidator')}
+            </Button>
+            {t('validatorOutro')}
+          </Typography>
+        </Box>
+      </Box>
+    </Container>
+  );
+}
diff --git a/src/app/[locale]/components/SearchBox.tsx b/src/app/[locale]/components/SearchBox.tsx
new file mode 100644
index 00000000..40236eac
--- /dev/null
+++ b/src/app/[locale]/components/SearchBox.tsx
@@ -0,0 +1,80 @@
+'use client';
+
+import * as React from 'react';
+import { Box, Button, TextField, InputAdornment } from '@mui/material';
+import { Search } from '@mui/icons-material';
+import { useState } from 'react';
+import { useTranslations } from 'next-intl';
+import { useRouter } from 'next/navigation';
+
+export default function SearchBox(): React.ReactElement {
+  const [searchInputValue, setSearchInputValue] = useState('');
+  const tCommon = useTranslations('common');
+  const router = useRouter();
+
+  const handleSearch = (): void => {
+    const encodedURI = encodeURIComponent(searchInputValue.trim());
+    if (encodedURI.length === 0) {
+      router.push('/feeds');
+    } else {
+      router.push(`/feeds?q=${encodedURI}`);
+    }
+  };
+
+  const handleKeyDown = (
+    event: React.KeyboardEvent<HTMLInputElement>,
+  ): void => {
+    if (event.key === 'Enter') {
+      handleSearch();
+    }
+  };
+
+  return (
+    <Box
+      sx={{
+        display: 'flex',
+        justifyContent: 'center',
+        alignItems: 'center',
+      }}
+    >
+      <TextField
+        sx={{
+          width: '80%',
+          mt: 6,
+          fieldset: {
+            borderColor: 'primary.main',
+          },
+        }}
+        value={searchInputValue}
+        onChange={(e) => {
+          setSearchInputValue(e.target.value);
+        }}
+        onKeyDown={handleKeyDown}
+        placeholder='e.g. "New York" or "Carris Metropolitana"'
+        slotProps={{
+          input: {
+            startAdornment: (
+              <InputAdornment position={'start'}>
+                <Search />
+              </InputAdornment>
+            ),
+          },
+        }}
+      />
+      <Button
+        sx={{
+          mt: 6,
+          py: 1.5,
+          ml: 1,
+          height: 55,
+          boxShadow: 0,
+        }}
+        variant='contained'
+        color='primary'
+        onClick={handleSearch}
+      >
+        {tCommon('search')}
+      </Button>
+    </Box>
+  );
+}
diff --git a/src/app/[locale]/layout.tsx b/src/app/[locale]/layout.tsx
index cafd8f8c..26c89f5e 100644
--- a/src/app/[locale]/layout.tsx
+++ b/src/app/[locale]/layout.tsx
@@ -15,7 +15,7 @@ import { routing } from '../../i18n/routing';
 
 export const metadata = {
   title: 'Mobility Database',
-  description: 'Mobility Database',
+  description: "Access GTFS, GTFS Realtime, GBFS transit data with over 4,000 feeds from 70+ countries on the web's leading transit data platform.",
   robots:
     process.env.VERCEL_ENV === 'production'
       ? 'index, follow'
diff --git a/src/app/[locale]/page.tsx b/src/app/[locale]/page.tsx
new file mode 100644
index 00000000..3e2252e3
--- /dev/null
+++ b/src/app/[locale]/page.tsx
@@ -0,0 +1,57 @@
+import { type ReactElement } from 'react';
+import { setRequestLocale } from 'next-intl/server';
+import { routing } from '../../i18n/routing';
+import HomePage from './components/HomePage';
+import { type Metadata } from 'next';
+
+export const dynamic = 'force-static';
+
+export function generateStaticParams() {
+  return routing.locales.map((locale) => ({ locale }));
+}
+
+interface PageProps {
+  params: Promise<{ locale: string }>;
+}
+
+export const metadata: Metadata = {
+  title: 'Mobility Database',
+  description:
+    'Discover open public transit data worldwide. Mobility Database provides GTFS, GTFS-RT, and GBFS feeds to help developers, cities, and agencies build better mobility tools.',
+  applicationName: 'Mobility Database',
+
+  metadataBase: new URL('https://mobilitydatabase.org'),
+
+  alternates: {
+    canonical: '/',
+  },
+  openGraph: {
+    type: 'website',
+    url: 'https://mobilitydatabase.org',
+    siteName: 'Mobility Database',
+    title: 'Mobility Database',
+    description:
+      'Discover open public transit data worldwide. Find GTFS, GTFS-RT, and GBFS feeds to build better mobility applications.',
+  },
+  robots: {
+    index: true,
+    follow: true,
+    googleBot: {
+      index: true,
+      follow: true,
+      'max-image-preview': 'large',
+      'max-snippet': -1,
+      'max-video-preview': -1,
+    },
+  },
+};
+
+export default async function Home({
+  params,
+}: PageProps): Promise<ReactElement> {
+  const { locale } = await params;
+
+  setRequestLocale(locale);
+
+  return <HomePage />;
+}
diff --git a/src/app/styles/TextShimmer.css b/src/app/styles/TextShimmer.css
index d8baf1a3..a0f1a236 100644
--- a/src/app/styles/TextShimmer.css
+++ b/src/app/styles/TextShimmer.css
@@ -37,11 +37,12 @@
   -webkit-animation-duration: 8s;
   -moz-animation-duration: 8s;
   animation-duration: 8s;
+  animation-delay: 1s;
   -webkit-animation-iteration-count: infinite;
   -moz-animation-iteration-count: infinite;
   animation-iteration-count: infinite;
   background-repeat: no-repeat;
-  background-position: 0 0;
+  background-position: -10% 0;
   background-color: rgba(56, 89, 250, 0.6);
 }
 

From 48e2cf21d0bb64839feafc0ea68cf4a5858df003 Mon Sep 17 00:00:00 2001
From: Alessandro Kreslin <kalessandro14@gmail.com>
Date: Tue, 3 Feb 2026 11:05:07 -0500
Subject: [PATCH 4/8] styling adjustments

---
 src/app/[locale]/components/HomePage.tsx | 11 ++++-------
 1 file changed, 4 insertions(+), 7 deletions(-)

diff --git a/src/app/[locale]/components/HomePage.tsx b/src/app/[locale]/components/HomePage.tsx
index e4381c63..dcf79915 100644
--- a/src/app/[locale]/components/HomePage.tsx
+++ b/src/app/[locale]/components/HomePage.tsx
@@ -172,13 +172,12 @@ export default async function HomePage(): Promise<ReactElement> {
         <Box
           component='section'
           sx={{
-            background: 'background.paper',
+            backgroundColor: 'background.paper',
             borderRadius: '6px 0px 0px 6px',
             p: {
               xs: 2,
               sm: 4,
             },
-            fontSize: '18px',
             fontWeight: 700,
             mr: 0,
             mt: 5,
@@ -186,13 +185,11 @@ export default async function HomePage(): Promise<ReactElement> {
           role='contentinfo'
           aria-label='About Mobility Database'
         >
-          <Typography component='h3' sx={{ fontSize: '20px', fontWeight: 700, mb: 2 }}>
+          <Typography component='h3' sx={{ fontWeight: 700, mb: 2 }}>
             About Our Platform
           </Typography>
-          <Typography component='p' sx={{ mb: 2 }}>
-            {t('description')}
-          </Typography>
-          <Typography component='p'>
+          <Typography sx={{ mb: 2 }}>{t('description')}</Typography>
+          <Typography sx={{ mb: 2 }}>
             {t('validatorIntro')}
             <Button
               variant='text'

From afa88fbf52304327b5871660f58487f8019f69c9 Mon Sep 17 00:00:00 2001
From: Alessandro Kreslin <kalessandro14@gmail.com>
Date: Tue, 3 Feb 2026 11:13:38 -0500
Subject: [PATCH 5/8] allows content to display without waiting for redux

---
 src/app/components/Context.tsx | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/app/components/Context.tsx b/src/app/components/Context.tsx
index ff4551b1..e903e3b1 100644
--- a/src/app/components/Context.tsx
+++ b/src/app/components/Context.tsx
@@ -1,11 +1,11 @@
 'use client';
 
-import React, { useEffect } from 'react';
+import React, { useEffect, useState } from 'react';
 import type ContextProviderProps from '../interface/ContextProviderProps';
 import { Provider } from 'react-redux';
 import { store } from '../store/store';
 import { PersistGate } from 'redux-persist/integration/react';
-import { persistStore } from 'redux-persist';
+import { persistStore, type Persistor } from 'redux-persist';
 import { useAppDispatch } from '../hooks';
 import { resetProfileErrors } from '../store/profile-reducer';
 
@@ -22,7 +22,7 @@ const AppContent: React.FC<ContextProviderProps> = ({ children }) => {
     dispatch(resetProfileErrors());
   }, []);
   return (
-    <PersistGate loading={null} persistor={persistor}>
+    <PersistGate loading={children} persistor={persistor}>
       {children}
     </PersistGate>
   );

From cb00dd1239e1d146a14339490c5a38e30e85ffc2 Mon Sep 17 00:00:00 2001
From: Alessandro Kreslin <kalessandro14@gmail.com>
Date: Tue, 3 Feb 2026 11:22:22 -0500
Subject: [PATCH 6/8] SSR theme safe settings

---
 src/app/components/ThemeToggle.tsx |  4 ++--
 src/app/context/ThemeProvider.tsx  | 37 +++++++++++++++++++-----------
 2 files changed, 26 insertions(+), 15 deletions(-)

diff --git a/src/app/components/ThemeToggle.tsx b/src/app/components/ThemeToggle.tsx
index aaefd056..66678eb8 100644
--- a/src/app/components/ThemeToggle.tsx
+++ b/src/app/components/ThemeToggle.tsx
@@ -4,11 +4,11 @@ import Brightness7Icon from '@mui/icons-material/Brightness7';
 import { useTheme } from '../context/ThemeProvider';
 
 const ThemeToggle = (): React.ReactElement => {
-  const { toggleTheme } = useTheme();
+  const { mode, toggleTheme } = useTheme();
 
   return (
     <IconButton onClick={toggleTheme} color='inherit' aria-label='Theme Toggle'>
-      {localStorage.getItem('theme') === 'dark' ? (
+      {mode === 'dark' ? (
         <Brightness7Icon />
       ) : (
         <Brightness4Icon />
diff --git a/src/app/context/ThemeProvider.tsx b/src/app/context/ThemeProvider.tsx
index 016a2e16..a5479391 100644
--- a/src/app/context/ThemeProvider.tsx
+++ b/src/app/context/ThemeProvider.tsx
@@ -1,6 +1,6 @@
 'use client';
 
-import { createContext, useState, useMemo, useContext } from 'react';
+import { createContext, useState, useMemo, useContext, useEffect } from 'react';
 import {
   ThemeProvider as MuiThemeProvider,
   CssBaseline,
@@ -9,33 +9,44 @@ import {
 import { getTheme, ThemeModeEnum } from '../Theme';
 import type ContextProviderProps from '../interface/ContextProviderProps';
 
-const ThemeContext = createContext({ toggleTheme: () => {} });
+// TODO: Revisit theme for best SSR practices
 
-function getInitialThemeMode(prefersDarkMode: boolean): ThemeModeEnum {
-  if (typeof window !== 'undefined' && localStorage.getItem('theme') != null) {
-    return localStorage.getItem('theme') as ThemeModeEnum;
-  } else {
-    return prefersDarkMode ? ThemeModeEnum.dark : ThemeModeEnum.light;
-  }
-}
+const ThemeContext = createContext({ 
+  mode: ThemeModeEnum.light,
+  toggleTheme: () => {} 
+});
 
 export const ThemeProvider: React.FC<ContextProviderProps> = ({ children }) => {
   const prefersDarkMode = useMediaQuery('(prefers-color-scheme: dark)');
+  
+  // Initialize with system preference for SSR, then check localStorage on client
   const [mode, setMode] = useState<ThemeModeEnum>(
-    getInitialThemeMode(prefersDarkMode),
+    prefersDarkMode ? ThemeModeEnum.dark : ThemeModeEnum.light
   );
 
+  // Load theme from localStorage only on client side
+  useEffect(() => {
+    if (typeof window !== 'undefined') {
+      const savedTheme = localStorage.getItem('theme');
+      if (savedTheme && Object.values(ThemeModeEnum).includes(savedTheme as ThemeModeEnum)) {
+        setMode(savedTheme as ThemeModeEnum);
+      }
+    }
+  }, []);
+
   const toggleTheme = (): void => {
     const newMode =
       mode === ThemeModeEnum.light ? ThemeModeEnum.dark : ThemeModeEnum.light;
     setMode(newMode);
-    localStorage.setItem('theme', newMode);
+    if (typeof window !== 'undefined') {
+      localStorage.setItem('theme', newMode);
+    }
   };
 
   const theme = useMemo(() => getTheme(mode), [mode]);
 
   return (
-    <ThemeContext.Provider value={{ toggleTheme }}>
+    <ThemeContext.Provider value={{ mode, toggleTheme }}>
       <MuiThemeProvider theme={theme}>
         <CssBaseline />
         {children}
@@ -44,5 +55,5 @@ export const ThemeProvider: React.FC<ContextProviderProps> = ({ children }) => {
   );
 };
 
-export const useTheme = (): { toggleTheme: () => void } =>
+export const useTheme = (): { mode: ThemeModeEnum, toggleTheme: () => void } =>
   useContext(ThemeContext);

From 3d897b244f976583e184039faa040d7e9202f356 Mon Sep 17 00:00:00 2001
From: Alessandro Kreslin <kalessandro14@gmail.com>
Date: Tue, 3 Feb 2026 11:24:10 -0500
Subject: [PATCH 7/8] SSR: Header safety

---
 src/app/components/Header.tsx | 73 +++++++++++++++++++++--------------
 1 file changed, 45 insertions(+), 28 deletions(-)

diff --git a/src/app/components/Header.tsx b/src/app/components/Header.tsx
index 50059614..c5b68479 100644
--- a/src/app/components/Header.tsx
+++ b/src/app/components/Header.tsx
@@ -1,6 +1,7 @@
 'use client';
 
 import * as React from 'react';
+import dynamic from 'next/dynamic';
 import {
   AppBar,
   Box,
@@ -30,8 +31,8 @@ import {
   gbfsMetricsNavItems,
 } from '../constants/Navigation';
 import type NavigationItem from '../interface/Navigation';
-import { usePathname, useRouter, useSearchParams } from 'next/navigation';
-import LogoutConfirmModal from './LogoutConfirmModal';
+import { usePathname, useRouter } from 'next/navigation';
+import Image from 'next/image';
 import { BikeScooterOutlined, OpenInNew } from '@mui/icons-material';
 import { useRemoteConfig } from '../context/RemoteConfigProvider';
 import { NestedMenuItem } from 'mui-nested-menu';
@@ -40,7 +41,6 @@ import DepartureBoardIcon from '@mui/icons-material/DepartureBoard';
 import { fontFamily } from '../Theme';
 import { defaultRemoteConfigValues } from '../interface/RemoteConfig';
 import { animatedButtonStyling } from './Header.style';
-import DrawerContent from './HeaderMobileDrawer';
 import ThemeToggle from './ThemeToggle';
 import { useTranslations, useLocale } from 'next-intl';
 import { useSelector } from 'react-redux';
@@ -49,16 +49,36 @@ import {
   selectUserEmail,
 } from '../store/profile-selectors';
 
+// Lazy load components not needed for initial render
+const LogoutConfirmModal = dynamic(() => import('./LogoutConfirmModal'), {
+  ssr: false,
+});
+const DrawerContent = dynamic(() => import('./HeaderMobileDrawer'), {
+  ssr: false,
+});
+
+// Hook to safely access search params only on client
+function useClientSearchParams() {
+  const [searchParams, setSearchParams] = React.useState<URLSearchParams | null>(null);
+  
+  React.useEffect(() => {
+    if (typeof window !== 'undefined') {
+      setSearchParams(new URLSearchParams(window.location.search));
+    }
+  }, []);
+  
+  return searchParams;
+}
+
 export default function DrawerAppBar(): React.ReactElement {
-  const searchParams = useSearchParams();
+  const clientSearchParams = useClientSearchParams();
   const hasTransitFeedsRedirectParam =
-    searchParams.get('utm_source') === 'transitfeeds';
+    clientSearchParams?.get('utm_source') === 'transitfeeds';
+    
   const theme = useTheme();
   const pathname = usePathname();
   const [mobileOpen, setMobileOpen] = React.useState(false);
-  const [hasTransitFeedsRedirect, setHasTransitFeedsRedirect] = React.useState(
-    hasTransitFeedsRedirectParam,
-  );
+  const [hasTransitFeedsRedirect, setHasTransitFeedsRedirect] = React.useState(false);
   const [openDialog, setOpenDialog] = React.useState(false);
   const [activeTab, setActiveTab] = React.useState('');
   const [navigationItems, setNavigationItems] = React.useState<
@@ -68,6 +88,12 @@ export default function DrawerAppBar(): React.ReactElement {
   const { config } = useRemoteConfig();
   const t = useTranslations('common');
 
+  React.useEffect(() => {
+    if (hasTransitFeedsRedirectParam) {
+      setHasTransitFeedsRedirect(true);
+    }
+  }, [hasTransitFeedsRedirectParam]);
+
   React.useEffect(() => {
     setActiveTab(pathname ?? '');
   }, [pathname]);
@@ -99,8 +125,7 @@ export default function DrawerAppBar(): React.ReactElement {
     handleMenuClose();
   };
 
-  const container =
-    window !== undefined ? () => window.document.body : undefined;
+  const container = typeof window !== 'undefined' ? () => window.document.body : undefined;
 
   const [anchorEl, setAnchorEl] = React.useState<null | HTMLElement>(null);
 
@@ -159,22 +184,14 @@ export default function DrawerAppBar(): React.ReactElement {
               }}
               className='btn-link'
             >
-              <picture style={{ display: 'flex' }}>
-                <source
-                  media='(min-width: 50px)'
-                  srcSet='/assets/MOBILTYDATA_logo_purple_M.webp'
-                  width='50'
-                  height='50'
-                />
-                <source
-                  src='/assets/MOBILTYDATA_logo_purple_M.png'
-                  type='image/png'
-                />
-                <img
-                  alt='MobilityData logo'
-                  src='/assets/MOBILTYDATA_logo_purple_M.png'
-                />
-              </picture>
+              <Image
+                src='/assets/MOBILTYDATA_logo_purple_M.webp'
+                alt='MobilityData logo'
+                width={50}
+                height={50}
+                priority
+                fetchPriority='high'
+              />
               <Typography
                 variant='h5'
                 component='h1'
@@ -429,9 +446,9 @@ export default function DrawerAppBar(): React.ReactElement {
             severity='warning'
             onClose={() => {
               setHasTransitFeedsRedirect(false);
-              if (hasTransitFeedsRedirectParam) {
+              if (hasTransitFeedsRedirectParam && clientSearchParams) {
                 // Remove utm_source from URL
-                const newSearchParams = new URLSearchParams(searchParams);
+                const newSearchParams = new URLSearchParams(clientSearchParams);
                 newSearchParams.delete('utm_source');
                 const newPath = `${pathname}?${newSearchParams.toString()}`;
                 router.replace(newPath);

From 9d382f34a6055647f2444ece3971ba6b5e42e0d2 Mon Sep 17 00:00:00 2001
From: Alessandro Kreslin <kalessandro14@gmail.com>
Date: Tue, 3 Feb 2026 11:46:56 -0500
Subject: [PATCH 8/8] lint fix

---
 src/app/App.tsx                     | 18 +++++++-------
 src/app/[locale]/[...slug]/page.tsx |  2 +-
 src/app/[locale]/about/page.tsx     |  6 +++--
 src/app/[locale]/layout.tsx         | 16 +++++++------
 src/app/[locale]/page.tsx           |  8 ++++---
 src/app/components/Context.tsx      |  4 ++--
 src/app/components/Header.tsx       | 37 ++++++++++++++++++-----------
 src/app/components/ThemeToggle.tsx  |  6 +----
 src/app/context/ThemeProvider.tsx   | 16 ++++++++-----
 src/i18n/navigation.ts              |  2 +-
 src/i18n/request.ts                 |  4 ++--
 src/i18n/routing.ts                 |  6 +++--
 src/proxy.ts                        |  5 ++--
 13 files changed, 73 insertions(+), 57 deletions(-)

diff --git a/src/app/App.tsx b/src/app/App.tsx
index 3c77f3d4..686b5edf 100644
--- a/src/app/App.tsx
+++ b/src/app/App.tsx
@@ -21,7 +21,7 @@ function App({ locale }: AppProps): React.ReactElement {
 
   // Determine basename for BrowserRouter based on locale
   // Non-default locales (e.g., 'fr') need their prefix as basename
-  const basename = locale && locale !== 'en' ? `/${locale}` : undefined;
+  const basename = locale != null && locale !== 'en' ? `/${locale}` : undefined;
 
   useEffect(() => {
     app.auth().onAuthStateChanged((user) => {
@@ -36,14 +36,14 @@ function App({ locale }: AppProps): React.ReactElement {
   }, [dispatch]);
 
   return (
-      <Suspense>
-        <LocalizationProvider dateAdapter={AdapterDayjs}>
-          {/* BrowserRouter will be deprecated in favor of Next AppRouter */}
-          <BrowserRouter basename={basename}>
-            <AppContainer>{isAppReady ? <AppRouter /> : null}</AppContainer>
-          </BrowserRouter>
-        </LocalizationProvider>
-      </Suspense>
+    <Suspense>
+      <LocalizationProvider dateAdapter={AdapterDayjs}>
+        {/* BrowserRouter will be deprecated in favor of Next AppRouter */}
+        <BrowserRouter basename={basename}>
+          <AppContainer>{isAppReady ? <AppRouter /> : null}</AppContainer>
+        </BrowserRouter>
+      </LocalizationProvider>
+    </Suspense>
   );
 }
 
diff --git a/src/app/[locale]/[...slug]/page.tsx b/src/app/[locale]/[...slug]/page.tsx
index dc7a71e7..aefe4020 100644
--- a/src/app/[locale]/[...slug]/page.tsx
+++ b/src/app/[locale]/[...slug]/page.tsx
@@ -16,7 +16,7 @@ interface PageProps {
 
 export default function Page({ params }: PageProps): ReactNode {
   const { locale } = use(params);
-  
+
   // Pass locale to App so BrowserRouter can use correct basename
   return <App locale={locale} />;
 }
diff --git a/src/app/[locale]/about/page.tsx b/src/app/[locale]/about/page.tsx
index 90a6fb63..dbdd0a3f 100644
--- a/src/app/[locale]/about/page.tsx
+++ b/src/app/[locale]/about/page.tsx
@@ -1,11 +1,13 @@
 import { type ReactElement } from 'react';
 import { setRequestLocale } from 'next-intl/server';
-import { routing } from '../../../i18n/routing';
+import { type AVAILABLE_LOCALES, routing } from '../../../i18n/routing';
 import AboutPage from './components/AboutPage';
 
 export const dynamic = 'force-static';
 
-export function generateStaticParams() {
+export function generateStaticParams(): Array<{
+  locale: (typeof AVAILABLE_LOCALES)[number];
+}> {
   return routing.locales.map((locale) => ({ locale }));
 }
 
diff --git a/src/app/[locale]/layout.tsx b/src/app/[locale]/layout.tsx
index 26c89f5e..fc1270a4 100644
--- a/src/app/[locale]/layout.tsx
+++ b/src/app/[locale]/layout.tsx
@@ -11,11 +11,12 @@ import { Mulish, IBM_Plex_Mono } from 'next/font/google';
 import Footer from '../components/Footer';
 import Header from '../components/Header';
 import { Container } from '@mui/material';
-import { routing } from '../../i18n/routing';
+import { type AVAILABLE_LOCALES, routing } from '../../i18n/routing';
 
 export const metadata = {
   title: 'Mobility Database',
-  description: "Access GTFS, GTFS Realtime, GBFS transit data with over 4,000 feeds from 70+ countries on the web's leading transit data platform.",
+  description:
+    "Access GTFS, GTFS Realtime, GBFS transit data with over 4,000 feeds from 70+ countries on the web's leading transit data platform.",
   robots:
     process.env.VERCEL_ENV === 'production'
       ? 'index, follow'
@@ -46,13 +47,15 @@ const ibmPlexMono = IBM_Plex_Mono({
  * Generate static params for all locales.
  * This enables static generation for locale-prefixed routes.
  */
-export function generateStaticParams() {
+export function generateStaticParams(): Array<{
+  locale: (typeof AVAILABLE_LOCALES)[number];
+}> {
   return routing.locales.map((locale) => ({ locale }));
 }
 
 interface LocaleLayoutProps {
   children: React.ReactNode;
-  params: Promise<{ locale: string }>;
+  params: Promise<{ locale: (typeof AVAILABLE_LOCALES)[number] }>;
 }
 
 /**
@@ -81,8 +84,8 @@ export default async function LocaleLayout({
   return (
     <html lang={locale}>
       <head>
-        <link rel="preconnect" href="https://firebaseapp.com" />
-        <link rel="dns-prefetch" href="https://firebaseapp.com" />
+        <link rel='preconnect' href='https://firebaseapp.com' />
+        <link rel='dns-prefetch' href='https://firebaseapp.com' />
       </head>
       <body className={`${mulish.variable} ${ibmPlexMono.variable}`}>
         <ThemeRegistry>
@@ -110,4 +113,3 @@ export default async function LocaleLayout({
     </html>
   );
 }
-
diff --git a/src/app/[locale]/page.tsx b/src/app/[locale]/page.tsx
index 3e2252e3..2f36cf03 100644
--- a/src/app/[locale]/page.tsx
+++ b/src/app/[locale]/page.tsx
@@ -1,17 +1,19 @@
 import { type ReactElement } from 'react';
 import { setRequestLocale } from 'next-intl/server';
-import { routing } from '../../i18n/routing';
+import { type AVAILABLE_LOCALES, routing } from '../../i18n/routing';
 import HomePage from './components/HomePage';
 import { type Metadata } from 'next';
 
 export const dynamic = 'force-static';
 
-export function generateStaticParams() {
+export function generateStaticParams(): Array<{
+  locale: (typeof AVAILABLE_LOCALES)[number];
+}> {
   return routing.locales.map((locale) => ({ locale }));
 }
 
 interface PageProps {
-  params: Promise<{ locale: string }>;
+  params: Promise<{ locale: (typeof AVAILABLE_LOCALES)[number] }>;
 }
 
 export const metadata: Metadata = {
diff --git a/src/app/components/Context.tsx b/src/app/components/Context.tsx
index e903e3b1..6e9abd8b 100644
--- a/src/app/components/Context.tsx
+++ b/src/app/components/Context.tsx
@@ -1,11 +1,11 @@
 'use client';
 
-import React, { useEffect, useState } from 'react';
+import React, { useEffect } from 'react';
 import type ContextProviderProps from '../interface/ContextProviderProps';
 import { Provider } from 'react-redux';
 import { store } from '../store/store';
 import { PersistGate } from 'redux-persist/integration/react';
-import { persistStore, type Persistor } from 'redux-persist';
+import { persistStore } from 'redux-persist';
 import { useAppDispatch } from '../hooks';
 import { resetProfileErrors } from '../store/profile-reducer';
 
diff --git a/src/app/components/Header.tsx b/src/app/components/Header.tsx
index c5b68479..03722786 100644
--- a/src/app/components/Header.tsx
+++ b/src/app/components/Header.tsx
@@ -50,23 +50,30 @@ import {
 } from '../store/profile-selectors';
 
 // Lazy load components not needed for initial render
-const LogoutConfirmModal = dynamic(() => import('./LogoutConfirmModal'), {
-  ssr: false,
-});
-const DrawerContent = dynamic(() => import('./HeaderMobileDrawer'), {
-  ssr: false,
-});
+const LogoutConfirmModal = dynamic(
+  async () => await import('./LogoutConfirmModal'),
+  {
+    ssr: false,
+  },
+);
+const DrawerContent = dynamic(
+  async () => await import('./HeaderMobileDrawer'),
+  {
+    ssr: false,
+  },
+);
 
 // Hook to safely access search params only on client
-function useClientSearchParams() {
-  const [searchParams, setSearchParams] = React.useState<URLSearchParams | null>(null);
-  
+function useClientSearchParams(): URLSearchParams | null {
+  const [searchParams, setSearchParams] =
+    React.useState<URLSearchParams | null>(null);
+
   React.useEffect(() => {
     if (typeof window !== 'undefined') {
       setSearchParams(new URLSearchParams(window.location.search));
     }
   }, []);
-  
+
   return searchParams;
 }
 
@@ -74,11 +81,12 @@ export default function DrawerAppBar(): React.ReactElement {
   const clientSearchParams = useClientSearchParams();
   const hasTransitFeedsRedirectParam =
     clientSearchParams?.get('utm_source') === 'transitfeeds';
-    
+
   const theme = useTheme();
   const pathname = usePathname();
   const [mobileOpen, setMobileOpen] = React.useState(false);
-  const [hasTransitFeedsRedirect, setHasTransitFeedsRedirect] = React.useState(false);
+  const [hasTransitFeedsRedirect, setHasTransitFeedsRedirect] =
+    React.useState(false);
   const [openDialog, setOpenDialog] = React.useState(false);
   const [activeTab, setActiveTab] = React.useState('');
   const [navigationItems, setNavigationItems] = React.useState<
@@ -125,7 +133,8 @@ export default function DrawerAppBar(): React.ReactElement {
     handleMenuClose();
   };
 
-  const container = typeof window !== 'undefined' ? () => window.document.body : undefined;
+  const container =
+    typeof window !== 'undefined' ? () => window.document.body : undefined;
 
   const [anchorEl, setAnchorEl] = React.useState<null | HTMLElement>(null);
 
@@ -446,7 +455,7 @@ export default function DrawerAppBar(): React.ReactElement {
             severity='warning'
             onClose={() => {
               setHasTransitFeedsRedirect(false);
-              if (hasTransitFeedsRedirectParam && clientSearchParams) {
+              if (hasTransitFeedsRedirectParam && clientSearchParams != null) {
                 // Remove utm_source from URL
                 const newSearchParams = new URLSearchParams(clientSearchParams);
                 newSearchParams.delete('utm_source');
diff --git a/src/app/components/ThemeToggle.tsx b/src/app/components/ThemeToggle.tsx
index 66678eb8..b1ec9cd4 100644
--- a/src/app/components/ThemeToggle.tsx
+++ b/src/app/components/ThemeToggle.tsx
@@ -8,11 +8,7 @@ const ThemeToggle = (): React.ReactElement => {
 
   return (
     <IconButton onClick={toggleTheme} color='inherit' aria-label='Theme Toggle'>
-      {mode === 'dark' ? (
-        <Brightness7Icon />
-      ) : (
-        <Brightness4Icon />
-      )}
+      {mode === 'dark' ? <Brightness7Icon /> : <Brightness4Icon />}
     </IconButton>
   );
 };
diff --git a/src/app/context/ThemeProvider.tsx b/src/app/context/ThemeProvider.tsx
index a5479391..f9790436 100644
--- a/src/app/context/ThemeProvider.tsx
+++ b/src/app/context/ThemeProvider.tsx
@@ -11,24 +11,28 @@ import type ContextProviderProps from '../interface/ContextProviderProps';
 
 // TODO: Revisit theme for best SSR practices
 
-const ThemeContext = createContext({ 
+const ThemeContext = createContext({
   mode: ThemeModeEnum.light,
-  toggleTheme: () => {} 
+  toggleTheme: () => {},
 });
 
 export const ThemeProvider: React.FC<ContextProviderProps> = ({ children }) => {
   const prefersDarkMode = useMediaQuery('(prefers-color-scheme: dark)');
-  
+
   // Initialize with system preference for SSR, then check localStorage on client
   const [mode, setMode] = useState<ThemeModeEnum>(
-    prefersDarkMode ? ThemeModeEnum.dark : ThemeModeEnum.light
+    prefersDarkMode ? ThemeModeEnum.dark : ThemeModeEnum.light,
   );
 
   // Load theme from localStorage only on client side
   useEffect(() => {
     if (typeof window !== 'undefined') {
       const savedTheme = localStorage.getItem('theme');
-      if (savedTheme && Object.values(ThemeModeEnum).includes(savedTheme as ThemeModeEnum)) {
+      if (
+        savedTheme != null &&
+        savedTheme !== '' &&
+        Object.values(ThemeModeEnum).includes(savedTheme as ThemeModeEnum)
+      ) {
         setMode(savedTheme as ThemeModeEnum);
       }
     }
@@ -55,5 +59,5 @@ export const ThemeProvider: React.FC<ContextProviderProps> = ({ children }) => {
   );
 };
 
-export const useTheme = (): { mode: ThemeModeEnum, toggleTheme: () => void } =>
+export const useTheme = (): { mode: ThemeModeEnum; toggleTheme: () => void } =>
   useContext(ThemeContext);
diff --git a/src/i18n/navigation.ts b/src/i18n/navigation.ts
index 7c057d48..ec0c2c05 100644
--- a/src/i18n/navigation.ts
+++ b/src/i18n/navigation.ts
@@ -3,7 +3,7 @@ import { routing } from './routing';
 
 /**
  * Locale-aware navigation APIs.
- * 
+ *
  * Use these instead of Next.js navigation to automatically handle locale prefixes:
  * - Link: Locale-aware link component
  * - redirect: Server-side redirect with locale
diff --git a/src/i18n/request.ts b/src/i18n/request.ts
index 74d247d0..33f9b420 100644
--- a/src/i18n/request.ts
+++ b/src/i18n/request.ts
@@ -4,14 +4,14 @@ import { routing } from './routing';
 
 /**
  * next-intl request configuration.
- * 
+ *
  * This is called for every request and determines which locale/messages to use.
  * The locale comes from the [locale] route segment via the proxy.
  */
 export default getRequestConfig(async ({ requestLocale }) => {
   // Typically corresponds to the `[locale]` segment
   const requested = await requestLocale;
-  
+
   // Validate the locale, fall back to default if invalid
   const locale = hasLocale(routing.locales, requested)
     ? requested
diff --git a/src/i18n/routing.ts b/src/i18n/routing.ts
index 83cbbd14..d3d8fad0 100644
--- a/src/i18n/routing.ts
+++ b/src/i18n/routing.ts
@@ -1,13 +1,15 @@
 import { defineRouting } from 'next-intl/routing';
 
+export const AVAILABLE_LOCALES = ['en', 'fr'] as const;
+
 /**
  * Centralized routing configuration for next-intl.
- * 
+ *
  * - English (en): Default locale, no prefix in URL (/)
  * - French (fr): Prefixed URL (/fr)
  */
 export const routing = defineRouting({
-  locales: ['en', 'fr'],
+  locales: AVAILABLE_LOCALES,
   defaultLocale: 'en',
   // Don't show /en prefix for default locale
   localePrefix: 'as-needed',
diff --git a/src/proxy.ts b/src/proxy.ts
index db02719e..91eadbff 100644
--- a/src/proxy.ts
+++ b/src/proxy.ts
@@ -14,12 +14,12 @@ import { routing } from './i18n/routing';
  * - If a supported locale already exists in the pathname, continue without redirect
  * - If no locale in pathname, internally rewrite to default locale path
  */
-export default function proxy(request: NextRequest) {
+export default function proxy(request: NextRequest): NextResponse<unknown> {
   const { pathname } = request.nextUrl;
 
   // Check if any supported locale already exists in the pathname
   const pathnameHasLocale = routing.locales.some(
-    (locale) => pathname.startsWith(`/${locale}/`) || pathname === `/${locale}`
+    (locale) => pathname.startsWith(`/${locale}/`) || pathname === `/${locale}`,
   );
 
   // If locale exists in path, let it through
@@ -42,4 +42,3 @@ export const config = {
   // - Static files with extensions (.ico, .png, etc.)
   matcher: ['/((?!api|_next|.*\\..*).*)'],
 };
-