From cd9ad5894e0d421a68e280e225bcbd7a645842d2 Mon Sep 17 00:00:00 2001
From: Antoine Kingue <etorefr@gmail.com>
Date: Sun, 28 Dec 2025 07:04:15 +0100
Subject: [PATCH 01/64] =?UTF-8?q?=E2=9C=A8=20add=20translations=20to=20web?=
 =?UTF-8?q?=20app?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 apps/web/package.json                         |   1 +
 .../{ => [locale]}/(landing)/customer/page.ts |   0
 .../app/{ => [locale]}/(landing)/layout.tsx   |   0
 .../src/app/{ => [locale]}/(landing)/page.ts  |   0
 .../{ => [locale]}/(legal)/company/page.tsx   |   0
 .../{ => [locale]}/(legal)/privacy/page.tsx   |   0
 .../app/{ => [locale]}/(legal)/terms/page.tsx |   0
 .../app/{ => [locale]}/[...not_found]/page.ts |   0
 .../app/{ => [locale]}/agency/[city]/page.tsx |   0
 .../src/app/{ => [locale]}/agency/page.tsx    |   0
 .../app/{ => [locale]}/careers/[id]/page.tsx  |   0
 .../src/app/{ => [locale]}/careers/page.tsx   |   0
 .../src/app/{ => [locale]}/contact/page.tsx   |   0
 .../glossary/[letter]/[term]/page.tsx         |   0
 .../{ => [locale]}/glossary/[letter]/page.tsx |   0
 .../src/app/{ => [locale]}/glossary/page.tsx  |   0
 .../glossary/tag/[tag]/page.tsx               |   0
 .../app/{ => [locale]}/glossary/tags/page.tsx |   0
 apps/web/src/app/[locale]/layout.tsx          | 106 ++++++++++++++++++
 apps/web/src/app/{ => [locale]}/npo/page.tsx  |   0
 .../app/{ => [locale]}/projects/[id]/page.tsx |   0
 .../src/app/{ => [locale]}/projects/page.tsx  |   0
 apps/web/src/app/[locale]/providers.tsx       |  19 ++++
 .../services/[category]/[service]/page.tsx    |   0
 .../services/[category]/page.tsx              |   0
 .../src/app/{ => [locale]}/services/page.tsx  |   0
 apps/web/src/app/layout.tsx                   |  94 ++--------------
 .../src/components/layout/footer/footer.tsx   |  78 +++++++------
 apps/web/src/lib/translations.ts              |  23 ++++
 apps/web/src/locales/en/footer.json           |  25 +++++
 apps/web/src/locales/fr/footer.json           |  25 +++++
 apps/web/src/middleware.ts                    |  26 +++++
 pnpm-lock.yaml                                |   3 +
 33 files changed, 277 insertions(+), 123 deletions(-)
 rename apps/web/src/app/{ => [locale]}/(landing)/customer/page.ts (100%)
 rename apps/web/src/app/{ => [locale]}/(landing)/layout.tsx (100%)
 rename apps/web/src/app/{ => [locale]}/(landing)/page.ts (100%)
 rename apps/web/src/app/{ => [locale]}/(legal)/company/page.tsx (100%)
 rename apps/web/src/app/{ => [locale]}/(legal)/privacy/page.tsx (100%)
 rename apps/web/src/app/{ => [locale]}/(legal)/terms/page.tsx (100%)
 rename apps/web/src/app/{ => [locale]}/[...not_found]/page.ts (100%)
 rename apps/web/src/app/{ => [locale]}/agency/[city]/page.tsx (100%)
 rename apps/web/src/app/{ => [locale]}/agency/page.tsx (100%)
 rename apps/web/src/app/{ => [locale]}/careers/[id]/page.tsx (100%)
 rename apps/web/src/app/{ => [locale]}/careers/page.tsx (100%)
 rename apps/web/src/app/{ => [locale]}/contact/page.tsx (100%)
 rename apps/web/src/app/{ => [locale]}/glossary/[letter]/[term]/page.tsx (100%)
 rename apps/web/src/app/{ => [locale]}/glossary/[letter]/page.tsx (100%)
 rename apps/web/src/app/{ => [locale]}/glossary/page.tsx (100%)
 rename apps/web/src/app/{ => [locale]}/glossary/tag/[tag]/page.tsx (100%)
 rename apps/web/src/app/{ => [locale]}/glossary/tags/page.tsx (100%)
 create mode 100644 apps/web/src/app/[locale]/layout.tsx
 rename apps/web/src/app/{ => [locale]}/npo/page.tsx (100%)
 rename apps/web/src/app/{ => [locale]}/projects/[id]/page.tsx (100%)
 rename apps/web/src/app/{ => [locale]}/projects/page.tsx (100%)
 create mode 100644 apps/web/src/app/[locale]/providers.tsx
 rename apps/web/src/app/{ => [locale]}/services/[category]/[service]/page.tsx (100%)
 rename apps/web/src/app/{ => [locale]}/services/[category]/page.tsx (100%)
 rename apps/web/src/app/{ => [locale]}/services/page.tsx (100%)
 create mode 100644 apps/web/src/lib/translations.ts
 create mode 100644 apps/web/src/locales/en/footer.json
 create mode 100644 apps/web/src/locales/fr/footer.json
 create mode 100644 apps/web/src/middleware.ts

diff --git a/apps/web/package.json b/apps/web/package.json
index 132714d92..63f9b7078 100644
--- a/apps/web/package.json
+++ b/apps/web/package.json
@@ -11,6 +11,7 @@
   },
   "dependencies": {
     "@fontsource/cal-sans": "^5.2.3",
+    "@onruntime/translations": "workspace:*",
     "@hookform/resolvers": "^5.0.0",
     "@mdx-js/loader": "^3.1.0",
     "@mdx-js/react": "^3.1.0",
diff --git a/apps/web/src/app/(landing)/customer/page.ts b/apps/web/src/app/[locale]/(landing)/customer/page.ts
similarity index 100%
rename from apps/web/src/app/(landing)/customer/page.ts
rename to apps/web/src/app/[locale]/(landing)/customer/page.ts
diff --git a/apps/web/src/app/(landing)/layout.tsx b/apps/web/src/app/[locale]/(landing)/layout.tsx
similarity index 100%
rename from apps/web/src/app/(landing)/layout.tsx
rename to apps/web/src/app/[locale]/(landing)/layout.tsx
diff --git a/apps/web/src/app/(landing)/page.ts b/apps/web/src/app/[locale]/(landing)/page.ts
similarity index 100%
rename from apps/web/src/app/(landing)/page.ts
rename to apps/web/src/app/[locale]/(landing)/page.ts
diff --git a/apps/web/src/app/(legal)/company/page.tsx b/apps/web/src/app/[locale]/(legal)/company/page.tsx
similarity index 100%
rename from apps/web/src/app/(legal)/company/page.tsx
rename to apps/web/src/app/[locale]/(legal)/company/page.tsx
diff --git a/apps/web/src/app/(legal)/privacy/page.tsx b/apps/web/src/app/[locale]/(legal)/privacy/page.tsx
similarity index 100%
rename from apps/web/src/app/(legal)/privacy/page.tsx
rename to apps/web/src/app/[locale]/(legal)/privacy/page.tsx
diff --git a/apps/web/src/app/(legal)/terms/page.tsx b/apps/web/src/app/[locale]/(legal)/terms/page.tsx
similarity index 100%
rename from apps/web/src/app/(legal)/terms/page.tsx
rename to apps/web/src/app/[locale]/(legal)/terms/page.tsx
diff --git a/apps/web/src/app/[...not_found]/page.ts b/apps/web/src/app/[locale]/[...not_found]/page.ts
similarity index 100%
rename from apps/web/src/app/[...not_found]/page.ts
rename to apps/web/src/app/[locale]/[...not_found]/page.ts
diff --git a/apps/web/src/app/agency/[city]/page.tsx b/apps/web/src/app/[locale]/agency/[city]/page.tsx
similarity index 100%
rename from apps/web/src/app/agency/[city]/page.tsx
rename to apps/web/src/app/[locale]/agency/[city]/page.tsx
diff --git a/apps/web/src/app/agency/page.tsx b/apps/web/src/app/[locale]/agency/page.tsx
similarity index 100%
rename from apps/web/src/app/agency/page.tsx
rename to apps/web/src/app/[locale]/agency/page.tsx
diff --git a/apps/web/src/app/careers/[id]/page.tsx b/apps/web/src/app/[locale]/careers/[id]/page.tsx
similarity index 100%
rename from apps/web/src/app/careers/[id]/page.tsx
rename to apps/web/src/app/[locale]/careers/[id]/page.tsx
diff --git a/apps/web/src/app/careers/page.tsx b/apps/web/src/app/[locale]/careers/page.tsx
similarity index 100%
rename from apps/web/src/app/careers/page.tsx
rename to apps/web/src/app/[locale]/careers/page.tsx
diff --git a/apps/web/src/app/contact/page.tsx b/apps/web/src/app/[locale]/contact/page.tsx
similarity index 100%
rename from apps/web/src/app/contact/page.tsx
rename to apps/web/src/app/[locale]/contact/page.tsx
diff --git a/apps/web/src/app/glossary/[letter]/[term]/page.tsx b/apps/web/src/app/[locale]/glossary/[letter]/[term]/page.tsx
similarity index 100%
rename from apps/web/src/app/glossary/[letter]/[term]/page.tsx
rename to apps/web/src/app/[locale]/glossary/[letter]/[term]/page.tsx
diff --git a/apps/web/src/app/glossary/[letter]/page.tsx b/apps/web/src/app/[locale]/glossary/[letter]/page.tsx
similarity index 100%
rename from apps/web/src/app/glossary/[letter]/page.tsx
rename to apps/web/src/app/[locale]/glossary/[letter]/page.tsx
diff --git a/apps/web/src/app/glossary/page.tsx b/apps/web/src/app/[locale]/glossary/page.tsx
similarity index 100%
rename from apps/web/src/app/glossary/page.tsx
rename to apps/web/src/app/[locale]/glossary/page.tsx
diff --git a/apps/web/src/app/glossary/tag/[tag]/page.tsx b/apps/web/src/app/[locale]/glossary/tag/[tag]/page.tsx
similarity index 100%
rename from apps/web/src/app/glossary/tag/[tag]/page.tsx
rename to apps/web/src/app/[locale]/glossary/tag/[tag]/page.tsx
diff --git a/apps/web/src/app/glossary/tags/page.tsx b/apps/web/src/app/[locale]/glossary/tags/page.tsx
similarity index 100%
rename from apps/web/src/app/glossary/tags/page.tsx
rename to apps/web/src/app/[locale]/glossary/tags/page.tsx
diff --git a/apps/web/src/app/[locale]/layout.tsx b/apps/web/src/app/[locale]/layout.tsx
new file mode 100644
index 000000000..d0b6db1b0
--- /dev/null
+++ b/apps/web/src/app/[locale]/layout.tsx
@@ -0,0 +1,106 @@
+import "reflect-metadata";
+import "@fontsource/cal-sans";
+import "@/styles/reset.css";
+import "@/styles/globals.css";
+
+import type { ReactNode } from "react";
+import Script from "next/script";
+import { Figtree } from "next/font/google";
+import { Provider } from "react-wrap-balancer";
+
+import { cn } from "@/lib/utils/cn";
+import { locales } from "@/lib/translations";
+import Navbar from "@/components/marketing/navbar";
+import Footer from "@/components/layout/footer/footer";
+import { Toaster } from "@/components/ui/toaster";
+import { OrganizationSchema } from "@/components/json-ld/organization-schema";
+
+import { Providers } from "./providers";
+
+export const figtree = Figtree({
+  subsets: ["latin"],
+  variable: "--font-figtree",
+});
+
+export async function generateStaticParams() {
+  return locales.map((locale) => ({ locale }));
+}
+
+type LayoutProps = {
+  children: ReactNode;
+  params: Promise<{ locale: string }>;
+};
+
+export default async function LocaleLayout({ children, params }: LayoutProps) {
+  const { locale } = await params;
+
+  return (
+    <html lang={locale} className={cn(figtree.variable)}>
+      <body
+        className={
+          "flex flex-col min-h-screen items-center bg-muted text-sm md:text-lg"
+        }
+      >
+        <OrganizationSchema />
+
+        <Providers locale={locale}>
+          <Provider>
+            <Navbar />
+
+            {children}
+
+            <Footer />
+          </Provider>
+        </Providers>
+
+        <Toaster />
+      </body>
+
+      {process.env.NODE_ENV !== "development" && (
+        <>
+          {/* Umami Analytics */}
+          <Script
+            defer
+            src="https://cloud.umami.is/script.js"
+            data-website-id="a1dcf9f4-44a8-4deb-afeb-cf8465c41f72"
+          />
+
+          {/* Google Analytics */}
+          <Script
+            defer
+            async
+            src="https://www.googletagmanager.com/gtag/js?id=G-SGGDZ43QL4"
+          />
+          <Script
+            id="google-analytics"
+            dangerouslySetInnerHTML={{
+              __html: `
+                window.dataLayer = window.dataLayer || [];
+                function gtag(){dataLayer.push(arguments);}
+                gtag('js', new Date());
+                gtag('config', 'G-SGGDZ43QL4');
+              `,
+            }}
+          />
+
+          {/* Google Ads Conversion Tracking */}
+          <Script
+            async
+            src="https://www.googletagmanager.com/gtag/js?id=AW-16498437714"
+          />
+          <Script
+            id="google-ads"
+            dangerouslySetInnerHTML={{
+              __html: `
+                window.dataLayer = window.dataLayer || [];
+                function gtag(){dataLayer.push(arguments);}
+                gtag('js', new Date());
+                gtag('config', 'AW-16498437714');
+              `,
+            }}
+          />
+        </>
+      )}
+    </html>
+  );
+}
diff --git a/apps/web/src/app/npo/page.tsx b/apps/web/src/app/[locale]/npo/page.tsx
similarity index 100%
rename from apps/web/src/app/npo/page.tsx
rename to apps/web/src/app/[locale]/npo/page.tsx
diff --git a/apps/web/src/app/projects/[id]/page.tsx b/apps/web/src/app/[locale]/projects/[id]/page.tsx
similarity index 100%
rename from apps/web/src/app/projects/[id]/page.tsx
rename to apps/web/src/app/[locale]/projects/[id]/page.tsx
diff --git a/apps/web/src/app/projects/page.tsx b/apps/web/src/app/[locale]/projects/page.tsx
similarity index 100%
rename from apps/web/src/app/projects/page.tsx
rename to apps/web/src/app/[locale]/projects/page.tsx
diff --git a/apps/web/src/app/[locale]/providers.tsx b/apps/web/src/app/[locale]/providers.tsx
new file mode 100644
index 000000000..4d256b6ea
--- /dev/null
+++ b/apps/web/src/app/[locale]/providers.tsx
@@ -0,0 +1,19 @@
+"use client";
+
+import type { ReactNode } from "react";
+import { AppTranslationProvider } from "@onruntime/translations/next";
+
+import { load, locales } from "@/lib/translations";
+
+type ProvidersProps = {
+  children: ReactNode;
+  locale: string;
+};
+
+export const Providers = ({ children, locale }: ProvidersProps) => {
+  return (
+    <AppTranslationProvider locale={locale} locales={locales} load={load}>
+      {children}
+    </AppTranslationProvider>
+  );
+};
diff --git a/apps/web/src/app/services/[category]/[service]/page.tsx b/apps/web/src/app/[locale]/services/[category]/[service]/page.tsx
similarity index 100%
rename from apps/web/src/app/services/[category]/[service]/page.tsx
rename to apps/web/src/app/[locale]/services/[category]/[service]/page.tsx
diff --git a/apps/web/src/app/services/[category]/page.tsx b/apps/web/src/app/[locale]/services/[category]/page.tsx
similarity index 100%
rename from apps/web/src/app/services/[category]/page.tsx
rename to apps/web/src/app/[locale]/services/[category]/page.tsx
diff --git a/apps/web/src/app/services/page.tsx b/apps/web/src/app/[locale]/services/page.tsx
similarity index 100%
rename from apps/web/src/app/services/page.tsx
rename to apps/web/src/app/[locale]/services/page.tsx
diff --git a/apps/web/src/app/layout.tsx b/apps/web/src/app/layout.tsx
index defeb13f8..c49112389 100644
--- a/apps/web/src/app/layout.tsx
+++ b/apps/web/src/app/layout.tsx
@@ -1,89 +1,9 @@
-import "reflect-metadata";
-import "@fontsource/cal-sans";
-import "@/styles/reset.css";
-import "@/styles/globals.css";
+import type { ReactNode } from "react";
 
-import type React from "react";
-import { cn } from "@/lib/utils/cn";
-import Navbar from "@/components/marketing/navbar";
-import { Provider } from "react-wrap-balancer";
-import Footer from "@/components/layout/footer/footer";
-import Script from "next/script";
-import { Toaster } from "@/components/ui/toaster";
-import { Figtree } from "next/font/google"
-import { OrganizationSchema } from "@/components/json-ld/organization-schema";
+type RootLayoutProps = {
+  children: ReactNode;
+};
 
-export const figtree = Figtree({
-  subsets: ["latin"],
-  variable: "--font-figtree",
-});
-
-const RootLayout = async ({ children }: React.PropsWithChildren) => (
-  <html lang={"fr"} className={cn(figtree.variable)}>
-    <body
-      className={
-        "flex flex-col min-h-screen items-center bg-muted text-sm md:text-lg"
-      }
-    >
-      <OrganizationSchema />
-
-      <Provider>
-        <Navbar />
-
-        {children}
-
-        <Footer />
-      </Provider>
-
-      <Toaster />
-    </body>
-
-    {process.env.NODE_ENV !== "development" && (
-      <>
-        {/* Umami Analytics */}
-        <Script
-          defer
-          src="https://cloud.umami.is/script.js"
-          data-website-id="a1dcf9f4-44a8-4deb-afeb-cf8465c41f72"
-        />
-
-        {/* Google Analytics */}
-        <Script
-          defer
-          async
-          src="https://www.googletagmanager.com/gtag/js?id=G-SGGDZ43QL4"
-        />
-        <Script
-          id="google-analytics"
-          dangerouslySetInnerHTML={{
-            __html: `
-              window.dataLayer = window.dataLayer || [];
-              function gtag(){dataLayer.push(arguments);}
-              gtag('js', new Date());
-              gtag('config', 'G-SGGDZ43QL4');
-            `,
-          }}
-        />
-
-        {/* Google Ads Conversion Tracking */}
-        <Script
-          async
-          src="https://www.googletagmanager.com/gtag/js?id=AW-16498437714"
-        />
-        <Script
-          id="google-ads"
-          dangerouslySetInnerHTML={{
-            __html: `
-              window.dataLayer = window.dataLayer || [];
-              function gtag(){dataLayer.push(arguments);}
-              gtag('js', new Date());
-              gtag('config', 'AW-16498437714');
-            `,
-          }}
-        />
-      </>
-    )}
-  </html>
-);
-
-export default RootLayout;
+export default function RootLayout({ children }: RootLayoutProps) {
+  return children;
+}
diff --git a/apps/web/src/components/layout/footer/footer.tsx b/apps/web/src/components/layout/footer/footer.tsx
index 1209449a5..0baa33837 100644
--- a/apps/web/src/components/layout/footer/footer.tsx
+++ b/apps/web/src/components/layout/footer/footer.tsx
@@ -1,39 +1,44 @@
-import Routes from "@/constants/routes";
-import { OnRuntimeWordMark } from "@/logos/components";
+"use client";
+
 import Link from "next/link";
-import React from "react";
 
-const navigation = {
-  Navigation: [
-    { name: "Nos services", href: Routes.services },
-    { name: "Nos projets", href: Routes.projects },
-    { name: "L'association", href: Routes.npo },
-    { name: "Carrières", href: Routes.careers },
-    { name: "Blog", href: Routes.unknown },
-  ],
-  ["Ressources"]: [
-    { name: "Glossaire", href: Routes.glossary },
-    { name: "Communauté", href: Routes.unknown },
-    { name: "Status", href: Routes.unknown },
-  ],
-  ["Autres"]: [
-    { name: "Contact", href: Routes.contact },
-    { name: "Conditions générales", href: Routes.legals.terms },
-    { name: "Politique de confidentialité", href: Routes.legals.privacy },
-    { name: "Détails de l'entreprise", href: Routes.legals.company },
-  ],
-  ["Réseaux sociaux"]: [
-    { name: "LinkedIn", href: Routes.socials.linkedin },
-    { name: "Github", href: Routes.socials.github },
-    { name: "Discord", href: Routes.socials.discord },
-    { name: "X (Twitter)", href: Routes.socials.x },
-    { name: "Instagram", href: Routes.socials.instagram },
-  ],
-};
+import { useTranslation } from "@onruntime/translations/react";
 
-const Footer: React.FC = () => {
+import Routes from "@/constants/routes";
+import { OnRuntimeWordMark } from "@/logos/components";
+
+const Footer = () => {
+  const { t } = useTranslation("footer");
   const currentYear = new Date().getFullYear();
 
+  const navigation = {
+    [t("nav.navigation")]: [
+      { name: t("links.services"), href: Routes.services },
+      { name: t("links.projects"), href: Routes.projects },
+      { name: t("links.npo"), href: Routes.npo },
+      { name: t("links.careers"), href: Routes.careers },
+      { name: t("links.blog"), href: Routes.unknown },
+    ],
+    [t("nav.resources")]: [
+      { name: t("links.glossary"), href: Routes.glossary },
+      { name: t("links.community"), href: Routes.unknown },
+      { name: t("links.status"), href: Routes.unknown },
+    ],
+    [t("nav.other")]: [
+      { name: t("links.contact"), href: Routes.contact },
+      { name: t("links.terms"), href: Routes.legals.terms },
+      { name: t("links.privacy"), href: Routes.legals.privacy },
+      { name: t("links.company"), href: Routes.legals.company },
+    ],
+    [t("nav.social")]: [
+      { name: "LinkedIn", href: Routes.socials.linkedin },
+      { name: "Github", href: Routes.socials.github },
+      { name: "Discord", href: Routes.socials.discord },
+      { name: "X (Twitter)", href: Routes.socials.x },
+      { name: "Instagram", href: Routes.socials.instagram },
+    ],
+  };
+
   return (
     <footer className={"pb-24 pt-10 md:pt-20 border-t w-full border-border"}>
       <div className={"px-4 md:px-0 max-w-5xl text-xs md:text-sm mx-auto"}>
@@ -42,11 +47,12 @@ const Footer: React.FC = () => {
             <OnRuntimeWordMark height={24} className="h-6" />
 
             <p>
-              Un studio de créatif, à travers le monde.
+              {t("tagline")}
               <br />
-              Mais on peut se voir sur{" "}
-              <strong className="text-foreground">Rouen</strong> et{" "}
-              <strong className="text-foreground">Paris</strong>.
+              <span
+                dangerouslySetInnerHTML={{ __html: t("location") }}
+                className="[&>strong]:text-foreground"
+              />
             </p>
           </div>
 
@@ -102,7 +108,7 @@ const Footer: React.FC = () => {
                 strokeWidth="4"
               />
             </svg>
-            Tous les services sont opérationnels
+            {t("status")}
           </p>
         </div>
       </div>
diff --git a/apps/web/src/lib/translations.ts b/apps/web/src/lib/translations.ts
new file mode 100644
index 000000000..6f074d14f
--- /dev/null
+++ b/apps/web/src/lib/translations.ts
@@ -0,0 +1,23 @@
+import {
+  getTranslation as getTranslationCore,
+  type TranslationLoader,
+} from "@onruntime/translations";
+
+export const locales = ["en", "fr"];
+export const defaultLocale = locales[0];
+
+export const load: TranslationLoader = (locale, namespace) => {
+  try {
+    return require(`@/locales/${locale}/${namespace}.json`);
+  } catch {
+    return undefined;
+  }
+};
+
+export const getTranslation = async (
+  params: Promise<{ locale: string }>,
+  namespace = "common",
+) => {
+  const { locale } = await params;
+  return getTranslationCore(load, locale, namespace);
+};
diff --git a/apps/web/src/locales/en/footer.json b/apps/web/src/locales/en/footer.json
new file mode 100644
index 000000000..946ef55e4
--- /dev/null
+++ b/apps/web/src/locales/en/footer.json
@@ -0,0 +1,25 @@
+{
+  "tagline": "A creative studio, across the world.",
+  "location": "But you can meet us in <strong>Rouen</strong> and <strong>Paris</strong>.",
+  "nav": {
+    "navigation": "Navigation",
+    "resources": "Resources",
+    "other": "Other",
+    "social": "Social Media"
+  },
+  "links": {
+    "services": "Our services",
+    "projects": "Our projects",
+    "npo": "The association",
+    "careers": "Careers",
+    "blog": "Blog",
+    "glossary": "Glossary",
+    "community": "Community",
+    "status": "Status",
+    "contact": "Contact",
+    "terms": "Terms of service",
+    "privacy": "Privacy policy",
+    "company": "Company details"
+  },
+  "status": "All services are operational"
+}
diff --git a/apps/web/src/locales/fr/footer.json b/apps/web/src/locales/fr/footer.json
new file mode 100644
index 000000000..1596a2171
--- /dev/null
+++ b/apps/web/src/locales/fr/footer.json
@@ -0,0 +1,25 @@
+{
+  "tagline": "Un studio de créatif, à travers le monde.",
+  "location": "Mais on peut se voir sur <strong>Rouen</strong> et <strong>Paris</strong>.",
+  "nav": {
+    "navigation": "Navigation",
+    "resources": "Ressources",
+    "other": "Autres",
+    "social": "Réseaux sociaux"
+  },
+  "links": {
+    "services": "Nos services",
+    "projects": "Nos projets",
+    "npo": "L'association",
+    "careers": "Carrières",
+    "blog": "Blog",
+    "glossary": "Glossaire",
+    "community": "Communauté",
+    "status": "Status",
+    "contact": "Contact",
+    "terms": "Conditions générales",
+    "privacy": "Politique de confidentialité",
+    "company": "Détails de l'entreprise"
+  },
+  "status": "Tous les services sont opérationnels"
+}
diff --git a/apps/web/src/middleware.ts b/apps/web/src/middleware.ts
new file mode 100644
index 000000000..c4f495265
--- /dev/null
+++ b/apps/web/src/middleware.ts
@@ -0,0 +1,26 @@
+import { NextResponse } from "next/server";
+import type { NextRequest } from "next/server";
+
+import { locales, defaultLocale } from "@/lib/translations";
+
+export function middleware(request: NextRequest) {
+  const { pathname } = request.nextUrl;
+
+  const pathnameLocale = locales.find(
+    (locale) => pathname.startsWith(`/${locale}/`) || pathname === `/${locale}`,
+  );
+
+  if (pathnameLocale === defaultLocale) {
+    const newPathname = pathname.replace(`/${defaultLocale}`, "") || "/";
+    return NextResponse.redirect(new URL(newPathname, request.url));
+  }
+
+  if (pathnameLocale) return;
+
+  request.nextUrl.pathname = `/${defaultLocale}${pathname}`;
+  return NextResponse.rewrite(request.nextUrl);
+}
+
+export const config = {
+  matcher: ["/((?!_next|favicon.ico|api|.*\\.).*)"],
+};
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 7883d25c2..55da095fc 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -29,6 +29,9 @@ importers:
       '@next/mdx':
         specifier: ^16.1.1
         version: 16.1.1(@mdx-js/loader@3.1.1)(@mdx-js/react@3.1.1(@types/react@19.2.7)(react@19.2.3))
+      '@onruntime/translations':
+        specifier: workspace:*
+        version: link:../../packages/translations
       '@radix-ui/react-accordion':
         specifier: ^1.2.3
         version: 1.2.12(@types/react-dom@19.2.3(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)

From 7296af920a2ee57edba978e34f6f0c5a349c15f4 Mon Sep 17 00:00:00 2001
From: Antoine Kingue <etorefr@gmail.com>
Date: Sun, 28 Dec 2025 14:26:27 +0100
Subject: [PATCH 02/64] =?UTF-8?q?=F0=9F=93=9D=20add=20translations=20conve?=
 =?UTF-8?q?ntions?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 CLAUDE.md                                     |  14 ++-
 .../src/components/layout/footer/footer.tsx   |   2 +-
 apps/web/src/locales/README.md                | 102 ++++++++++++++++++
 .../src/locales/en/{ => layout}/footer.json   |   0
 .../src/locales/fr/{ => layout}/footer.json   |   0
 5 files changed, 116 insertions(+), 2 deletions(-)
 create mode 100644 apps/web/src/locales/README.md
 rename apps/web/src/locales/en/{ => layout}/footer.json (100%)
 rename apps/web/src/locales/fr/{ => layout}/footer.json (100%)

diff --git a/CLAUDE.md b/CLAUDE.md
index c1e9471d3..08a1dabaf 100644
--- a/CLAUDE.md
+++ b/CLAUDE.md
@@ -30,12 +30,13 @@ pnpm --filter @onruntime/web build
 
 ### Web App Structure (`apps/web/src/`)
 
-- **app/**: Next.js App Router pages and API routes
+- **app/**: Next.js App Router pages and API routes (under `[locale]/`)
 - **components/**: React components (ui/, layout/, marketing/)
 - **services/**: External API clients with lazy initialization
 - **constants/**: Static data (projects, agencies, services, team members)
 - **content/**: MDX content (glossary, legal pages)
 - **lib/**: Utilities and helpers
+- **locales/**: Translation files (see `locales/README.md` for conventions)
 - **types/**: TypeScript type definitions
 
 ### Key Patterns
@@ -63,6 +64,17 @@ export const joinClient = {
 
 **API Routes**: Use `unstable_cache` from Next.js for caching external API responses.
 
+**Translations**: Uses `@onruntime/translations` package. See `apps/web/src/locales/README.md` for full conventions.
+```typescript
+// Server Components
+import { getTranslation } from "@/lib/translations";
+const { t } = await getTranslation(params, "layout/footer");
+
+// Client Components
+import { useTranslation } from "@onruntime/translations/react";
+const { t } = useTranslation("layout/footer");
+```
+
 ## Environment Variables
 
 Required for runtime (optional for build):
diff --git a/apps/web/src/components/layout/footer/footer.tsx b/apps/web/src/components/layout/footer/footer.tsx
index 0baa33837..dcf796e0b 100644
--- a/apps/web/src/components/layout/footer/footer.tsx
+++ b/apps/web/src/components/layout/footer/footer.tsx
@@ -8,7 +8,7 @@ import Routes from "@/constants/routes";
 import { OnRuntimeWordMark } from "@/logos/components";
 
 const Footer = () => {
-  const { t } = useTranslation("footer");
+  const { t } = useTranslation("layout/footer");
   const currentYear = new Date().getFullYear();
 
   const navigation = {
diff --git a/apps/web/src/locales/README.md b/apps/web/src/locales/README.md
new file mode 100644
index 000000000..eea2e1d7a
--- /dev/null
+++ b/apps/web/src/locales/README.md
@@ -0,0 +1,102 @@
+# Locales
+
+Translation files for the onRuntime website.
+
+## Structure
+
+```
+locales/
+├── en/
+│   ├── common.json                    # Shared (buttons, errors, forms)
+│   ├── layout/
+│   │   ├── footer.json
+│   │   └── navbar.json
+│   └── marketing/
+│       ├── landing/
+│       │   ├── common.json
+│       │   ├── customer.json
+│       │   └── visitor.json
+│       ├── services/
+│       │   ├── common.json
+│       │   ├── backend/
+│       │   │   ├── common.json
+│       │   │   └── [service].json
+│       │   ├── design/
+│       │   │   └── ...
+│       │   ├── frontend/
+│       │   │   └── ...
+│       │   └── integration/
+│       │       └── ...
+│       ├── projects/
+│       │   ├── common.json
+│       │   └── [project].json
+│       ├── agency/
+│       │   ├── common.json
+│       │   └── [city].json
+│       ├── careers/
+│       │   └── common.json
+│       ├── contact.json
+│       ├── glossary/
+│       │   └── common.json
+│       ├── legal/
+│       │   ├── company.json
+│       │   ├── privacy.json
+│       │   └── terms.json
+│       └── npo.json
+└── fr/
+    └── ...
+```
+
+## Usage
+
+### Server Components
+
+```tsx
+import { getTranslation } from "@/lib/translations";
+
+export default async function Page({ params }) {
+  const { t } = await getTranslation(params, "layout/footer");
+  return <p>{t("tagline")}</p>;
+}
+```
+
+### Client Components
+
+```tsx
+"use client";
+
+import { useTranslation } from "@onruntime/translations/react";
+
+export const Component = () => {
+  const { t } = useTranslation("layout/footer");
+  return <p>{t("tagline")}</p>;
+};
+```
+
+### Dynamic Pages
+
+```tsx
+import { getTranslation } from "@/lib/translations";
+
+export default async function ProjectPage({ params }) {
+  const { id } = await params;
+  const { t } = await getTranslation(params, `marketing/projects/${id}`);
+  return <h1>{t("title")}</h1>;
+}
+```
+
+## Adding a new namespace
+
+1. Create `en/<path>/<namespace>.json` and `fr/<path>/<namespace>.json`
+2. Use `getTranslation(params, "<path>/<namespace>")` or `useTranslation("<path>/<namespace>")`
+
+## Conventions
+
+- File names must be lowercase or kebab-case: `footer.json`, `privacy-policy.json`
+- Never use kebab-case as prefix for grouping files: `hero.json` (not `hero-section.json`, `hero-modal.json`)
+- Keys must be lowercase or kebab-case: `nav.home`, `privacy-policy`
+- Never use kebab-case as prefix for grouping keys: `hero.title`, `hero.description` (not `hero-title`, `hero-description`)
+- Use nested keys for grouping: `nav.home`, `links.contact`
+- Keep keys in English: `greeting`, not `salutation`
+- Use interpolation for dynamic values: `"Hello, {name}!"`
+- HTML is supported with `dangerouslySetInnerHTML`: `"Visit <strong>Paris</strong>"`
diff --git a/apps/web/src/locales/en/footer.json b/apps/web/src/locales/en/layout/footer.json
similarity index 100%
rename from apps/web/src/locales/en/footer.json
rename to apps/web/src/locales/en/layout/footer.json
diff --git a/apps/web/src/locales/fr/footer.json b/apps/web/src/locales/fr/layout/footer.json
similarity index 100%
rename from apps/web/src/locales/fr/footer.json
rename to apps/web/src/locales/fr/layout/footer.json

From 9cc8ad4f01fad6272853243ff18b43d9e5c4d66f Mon Sep 17 00:00:00 2001
From: Antoine Kingue <etorefr@gmail.com>
Date: Sun, 28 Dec 2025 16:01:35 +0100
Subject: [PATCH 03/64] =?UTF-8?q?=F0=9F=8C=90=20improve=20web=20app=20tran?=
 =?UTF-8?q?slations?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 apps/web/package.json                         |  3 +-
 .../src/components/marketing/navbar/index.tsx | 33 ++++---
 .../navbar/navigation/agencies/index.tsx      | 19 ++--
 .../marketing/navbar/navigation/index.tsx     | 21 +++--
 .../navbar/navigation/projects/index.tsx      | 56 +++++++-----
 .../navbar/navigation/services/index.tsx      | 54 ++++++-----
 apps/web/src/lib/translations.server.ts       | 12 +++
 apps/web/src/lib/translations.ts              | 13 +--
 apps/web/src/locales/README.md                | 14 +--
 apps/web/src/locales/en/layout/navbar.json    | 33 +++++++
 apps/web/src/locales/fr/layout/navbar.json    | 33 +++++++
 apps/web/src/middleware.ts                    | 26 ------
 apps/web/src/proxy.ts                         | 68 ++++++++++++++
 .../translations/next-app/app/[lang]/page.tsx | 10 +--
 .../next-app/lib/translations.server.ts       | 15 ++++
 .../translations/next-app/lib/translations.ts | 16 +---
 examples/translations/next-app/middleware.ts  | 30 -------
 examples/translations/next-app/package.json   |  3 +-
 examples/translations/next-app/proxy.ts       | 68 ++++++++++++++
 packages/translations/README.md               | 90 ++++++++++++++-----
 pnpm-lock.yaml                                | 11 +++
 21 files changed, 433 insertions(+), 195 deletions(-)
 create mode 100644 apps/web/src/lib/translations.server.ts
 create mode 100644 apps/web/src/locales/en/layout/navbar.json
 create mode 100644 apps/web/src/locales/fr/layout/navbar.json
 delete mode 100644 apps/web/src/middleware.ts
 create mode 100644 apps/web/src/proxy.ts
 create mode 100644 examples/translations/next-app/lib/translations.server.ts
 delete mode 100644 examples/translations/next-app/middleware.ts
 create mode 100644 examples/translations/next-app/proxy.ts

diff --git a/apps/web/package.json b/apps/web/package.json
index 63f9b7078..057e40190 100644
--- a/apps/web/package.json
+++ b/apps/web/package.json
@@ -11,11 +11,11 @@
   },
   "dependencies": {
     "@fontsource/cal-sans": "^5.2.3",
-    "@onruntime/translations": "workspace:*",
     "@hookform/resolvers": "^5.0.0",
     "@mdx-js/loader": "^3.1.0",
     "@mdx-js/react": "^3.1.0",
     "@next/mdx": "^16.1.1",
+    "@onruntime/translations": "workspace:*",
     "@radix-ui/react-accordion": "^1.2.3",
     "@radix-ui/react-dialog": "^1.1.6",
     "@radix-ui/react-navigation-menu": "^1.2.3",
@@ -43,6 +43,7 @@
     "react-wrap-balancer": "^1.1.1",
     "reflect-metadata": "^0.2.2",
     "resend": "^4.1.2",
+    "server-only": "^0.0.1",
     "tailwind-merge": "^3.0.0",
     "tailwindcss-animate": "^1.0.7",
     "usehooks-ts": "^3.1.1",
diff --git a/apps/web/src/components/marketing/navbar/index.tsx b/apps/web/src/components/marketing/navbar/index.tsx
index ea99dba5f..d3c2eb511 100644
--- a/apps/web/src/components/marketing/navbar/index.tsx
+++ b/apps/web/src/components/marketing/navbar/index.tsx
@@ -1,18 +1,22 @@
 "use client";
 
+import Link from "next/link";
+import type React from "react";
+import { useState, useRef, useEffect } from "react";
+import { ChevronDown, Menu } from "lucide-react";
+
+import { useTranslation } from "@onruntime/translations/react";
+
 import { Button } from "@/components/ui/button";
 import Routes from "@/constants/routes";
 import Services from "@/constants/services";
 import Projects from "@/constants/projects";
 import { getMajorAgencies } from "@/constants/agencies";
 import { OnRuntimeWordMark } from "@/logos/components";
-import Link from "next/link";
-import type React from "react";
-import { useState, useRef, useEffect } from "react";
-import Navigation from "./navigation";
-import { ChevronDown, Menu } from "lucide-react";
 import { cn } from "@/lib/utils";
 
+import Navigation from "./navigation";
+
 interface SubNavItem {
 	title: string;
 	path: string;
@@ -31,6 +35,7 @@ interface NavItem {
 }
 
 const Navbar: React.FC = () => {
+	const { t } = useTranslation("layout/navbar");
 	const [mobileMenuOpen, setMobileMenuOpen] = useState(false);
 	const [expandedSection, setExpandedSection] = useState<string | null>(null);
 
@@ -42,7 +47,7 @@ const Navbar: React.FC = () => {
 
 	const navItems: NavItem[] = [
 		{
-			title: "Nos services",
+			title: t("links.services"),
 			path: Routes.services,
 			dropdown: Services.map((service) => ({
 				title: service.name,
@@ -54,7 +59,7 @@ const Navbar: React.FC = () => {
 			})),
 		},
 		{
-			title: "Nos projets",
+			title: t("links.projects"),
 			path: Routes.unknown,
 			dropdown: Projects.slice(0, 5).map((project) => ({
 				title: project.name,
@@ -62,21 +67,21 @@ const Navbar: React.FC = () => {
 			})),
 		},
 		{
-			title: "Nos agences",
+			title: t("links.agencies"),
 			path: Routes.agency.root,
 			dropdown: [
 				{
-					title: "Toutes nos agences",
+					title: t("agencies.all"),
 					path: Routes.agency.root,
 				},
 				...majorAgencies.map((agency) => ({
-					title: `Agence ${agency.name}`,
+					title: t("agencies.agency", { name: agency.name }),
 					path: Routes.agency.city(agency.id),
 				})),
 			],
 		},
 		{
-			title: "L'association",
+			title: t("links.npo"),
 			path: Routes.npo,
 		},
 	];
@@ -137,9 +142,9 @@ const Navbar: React.FC = () => {
 					<Navigation />
 
 					<div className="flex gap-2">
-						<Link href={Routes.contact} aria-label="Nous contacter" passHref>
+						<Link href={Routes.contact} aria-label={t("links.contact")} passHref>
 							<Button className="hidden md:inline-flex" variant="outline">
-								Nous contacter
+								{t("links.contact")}
 							</Button>
 						</Link>
 
@@ -224,7 +229,7 @@ const Navbar: React.FC = () => {
 							className="block pt-4 pb-2"
 							onClick={closeMenu}
 						>
-							<Button className="w-full">Nous contacter</Button>
+							<Button className="w-full">{t("links.contact")}</Button>
 						</Link>
 					</div>
 				)}
diff --git a/apps/web/src/components/marketing/navbar/navigation/agencies/index.tsx b/apps/web/src/components/marketing/navbar/navigation/agencies/index.tsx
index 007c69a29..2299db0f3 100644
--- a/apps/web/src/components/marketing/navbar/navigation/agencies/index.tsx
+++ b/apps/web/src/components/marketing/navbar/navigation/agencies/index.tsx
@@ -1,3 +1,5 @@
+"use client";
+
 import {
   NavigationMenuContent,
   NavigationMenuItem,
@@ -11,7 +13,10 @@ import React from "react";
 import Link from "next/link";
 import { cn } from "@/lib/utils";
 
+import { useTranslation } from "@onruntime/translations/react";
+
 const NavigationAgencies: React.FC = () => {
+  const { t } = useTranslation("layout/navbar");
   
   const majorAgencies = getMajorAgencies();
 
@@ -26,7 +31,7 @@ const NavigationAgencies: React.FC = () => {
   return (
     <NavigationMenuItem>
       <Link href={Routes.agency.root}>
-        <NavigationMenuTrigger>Nos agences</NavigationMenuTrigger>
+        <NavigationMenuTrigger>{t("links.agencies")}</NavigationMenuTrigger>
       </Link>
 
       <NavigationMenuContent>
@@ -39,9 +44,9 @@ const NavigationAgencies: React.FC = () => {
             >
               <div className="flex h-full flex-col justify-between">
                 <div>
-                  <h3 className="text-sm font-medium mb-2">Nos agences en France</h3>
+                  <h3 className="text-sm font-medium mb-2">{t("agencies.title")}</h3>
                   <p className="text-xs text-muted-foreground mb-4">
-                    Découvrez notre réseau d&apos;agences et notre expertise locale dans toute la France
+                    {t("agencies.description")}
                   </p>
                 </div>
                 
@@ -49,7 +54,7 @@ const NavigationAgencies: React.FC = () => {
                   {majorAgencies.slice(0, 3).map(agency => (
                     <div key={agency.id} className="flex items-center gap-2 text-xs">
                       <MapPin className="h-3.5 w-3.5 text-onruntime-blue" />
-                      <span>Agence {agency.name}</span>
+                      <span>{t("agencies.agency", { name: agency.name })}</span>
                     </div>
                   ))}
                 </div>
@@ -60,7 +65,7 @@ const NavigationAgencies: React.FC = () => {
           <div className="grid gap-6">
             
             <div className="space-y-3">
-              <h4 className="text-sm font-medium">Principales agences</h4>
+              <h4 className="text-sm font-medium">{t("agencies.main")}</h4>
               <div className="grid grid-cols-2 gap-2">
                 {majorAgencies.map(agency => (
                   <NavigationMenuLink asChild key={agency.id}>
@@ -80,7 +85,7 @@ const NavigationAgencies: React.FC = () => {
             </div>
 
             <div className="hidden lg:block">
-              <h4 className="text-sm font-medium mb-2">Toutes nos agences par région</h4>
+              <h4 className="text-sm font-medium mb-2">{t("agencies.by-region")}</h4>
               <div className="grid grid-cols-2 gap-3">
                 {Object.entries(agenciesByRegion).slice(0, 4).map(([region, regionAgencies]) => (
                   <div key={region} className="space-y-2">
@@ -106,7 +111,7 @@ const NavigationAgencies: React.FC = () => {
                   href={Routes.agency.root} 
                   className="flex justify-between items-center hover:text-accent-foreground transition-colors"
                 >
-                  <span>Voir toutes nos agences</span>
+                  <span>{t("agencies.cta")}</span>
                   <ArrowRight className="h-3 w-3" />
                 </Link>
               </NavigationMenuLink>
diff --git a/apps/web/src/components/marketing/navbar/navigation/index.tsx b/apps/web/src/components/marketing/navbar/navigation/index.tsx
index 85ad99181..863d43c7b 100644
--- a/apps/web/src/components/marketing/navbar/navigation/index.tsx
+++ b/apps/web/src/components/marketing/navbar/navigation/index.tsx
@@ -1,3 +1,5 @@
+"use client";
+
 import {
   NavigationMenu,
   NavigationMenuItem,
@@ -8,30 +10,35 @@ import {
 import Routes from "@/constants/routes";
 import Link from "next/link";
 import React from "react";
+
+import { useTranslation } from "@onruntime/translations/react";
+
 import NavigationServices from "./services";
 import NavigationProjects from "./projects";
 import NavigationAgencies from "./agencies";
 
 const Navigation: React.FC = () => {
+  const { t } = useTranslation("layout/navbar");
+
   return (
     <NavigationMenu className="hidden md:flex">
       <NavigationMenuList>
         <NavigationServices />
 
         <NavigationProjects />
-        
+
         <NavigationAgencies />
 
         <NavigationMenuItem>
-        <Link href={Routes.npo} legacyBehavior passHref>
-          <NavigationMenuLink className={navigationMenuTriggerStyle()}>
-            {"L'association"}
-          </NavigationMenuLink>
-        </Link>
+          <Link href={Routes.npo} legacyBehavior passHref>
+            <NavigationMenuLink className={navigationMenuTriggerStyle()}>
+              {t("links.npo")}
+            </NavigationMenuLink>
+          </Link>
         </NavigationMenuItem>
       </NavigationMenuList>
     </NavigationMenu>
   );
 };
 
-export default Navigation;
\ No newline at end of file
+export default Navigation;
diff --git a/apps/web/src/components/marketing/navbar/navigation/projects/index.tsx b/apps/web/src/components/marketing/navbar/navigation/projects/index.tsx
index 8c28f990e..740bb0240 100644
--- a/apps/web/src/components/marketing/navbar/navigation/projects/index.tsx
+++ b/apps/web/src/components/marketing/navbar/navigation/projects/index.tsx
@@ -1,3 +1,5 @@
+"use client";
+
 import {
   NavigationMenuContent,
   NavigationMenuItem,
@@ -12,65 +14,71 @@ import Link from "next/link";
 import Image from "next/image";
 import { Tag } from "@/types/project";
 
+import { useTranslation } from "@onruntime/translations/react";
+
 const NavigationProjects: React.FC = () => {
-  
-  const featuredProjects = Projects.filter(project => 
-    project.tags.includes(Tag.FEATURED)
+  const { t } = useTranslation("layout/navbar");
+
+  const featuredProjects = Projects.filter((project) =>
+    project.tags.includes(Tag.FEATURED),
   ).slice(0, 2);
 
-  const remainingProjects = Projects.filter(project => 
-    !project.tags.includes(Tag.FEATURED)
+  const remainingProjects = Projects.filter(
+    (project) => !project.tags.includes(Tag.FEATURED),
   ).slice(0, 4 - featuredProjects.length);
 
-  const displayProjects = [...featuredProjects, ...remainingProjects].slice(0, 4);
+  const displayProjects = [...featuredProjects, ...remainingProjects].slice(
+    0,
+    4,
+  );
 
   return (
     <NavigationMenuItem>
       <Link href={Routes.projects}>
-        <NavigationMenuTrigger>Nos projets</NavigationMenuTrigger>
+        <NavigationMenuTrigger>{t("links.projects")}</NavigationMenuTrigger>
       </Link>
 
       <NavigationMenuContent>
         <div className="grid w-[400px] gap-3 p-4 md:w-[500px] md:grid-cols-[200px_1fr] lg:w-[600px]">
-          
           <NavigationMenuLink asChild className="block">
-            <Link 
+            <Link
               href={Routes.projects}
               className="group h-full select-none rounded-md bg-muted p-4 no-underline outline-none transition-colors hover:bg-accent hover:text-accent-foreground"
             >
               <div className="flex h-full flex-col justify-between">
                 <div>
-                  <h3 className="text-sm font-medium mb-2">Notre portfolio</h3>
+                  <h3 className="text-sm font-medium mb-2">
+                    {t("projects.title")}
+                  </h3>
                   <p className="text-xs text-muted-foreground mb-4">
-                    Découvrez tous nos projets et réalisations pour divers secteurs
+                    {t("projects.description")}
                   </p>
                 </div>
-                
+
                 <div className="space-y-3">
                   <div className="flex items-center gap-2 text-xs">
                     <Rocket className="h-3.5 w-3.5 text-onruntime-blue" />
-                    <span>Applications Web & Mobile</span>
+                    <span>{t("projects.categories.web-mobile")}</span>
                   </div>
                   <div className="flex items-center gap-2 text-xs">
                     <Code className="h-3.5 w-3.5 text-onruntime-blue" />
-                    <span>Projets Open Source</span>
+                    <span>{t("projects.categories.open-source")}</span>
                   </div>
                   <div className="flex items-center gap-2 text-xs">
                     <Eye className="h-3.5 w-3.5 text-onruntime-blue" />
-                    <span>Design UI/UX</span>
+                    <span>{t("projects.categories.design")}</span>
                   </div>
-                  
+
                   <div className="flex items-center gap-2 text-xs text-muted-foreground group-hover:text-accent-foreground/80 mt-4">
-                    Voir tous les projets
+                    {t("projects.cta")}
                     <ArrowRight className="h-3 w-3" />
                   </div>
                 </div>
               </div>
             </Link>
           </NavigationMenuLink>
-          
+
           <div className="grid gap-3">
-            
             {displayProjects.length > 0 && (
               <NavigationMenuLink asChild className="block">
                 <Link
@@ -86,7 +94,9 @@ const NavigationProjects: React.FC = () => {
                     />
                   </div>
                   <div className="flex-1">
-                    <div className="text-sm font-semibold leading-none mb-1">{displayProjects[0].name}</div>
+                    <div className="text-sm font-semibold leading-none mb-1">
+                      {displayProjects[0].name}
+                    </div>
                     <p className="line-clamp-2 text-xs leading-snug text-muted-foreground">
                       {displayProjects[0].shortDescription}
                     </p>
@@ -103,7 +113,9 @@ const NavigationProjects: React.FC = () => {
                     className="block select-none space-y-1 rounded-md p-3 no-underline outline-none transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground"
                   >
                     <div className="flex items-center justify-between">
-                      <div className="text-sm font-medium leading-none">{project.name}</div>
+                      <div className="text-sm font-medium leading-none">
+                        {project.name}
+                      </div>
                       {project.tags.includes(Tag.OPEN_SOURCE) && (
                         <Github className="h-3.5 w-3.5 text-muted-foreground" />
                       )}
@@ -122,4 +134,4 @@ const NavigationProjects: React.FC = () => {
   );
 };
 
-export default NavigationProjects;
\ No newline at end of file
+export default NavigationProjects;
diff --git a/apps/web/src/components/marketing/navbar/navigation/services/index.tsx b/apps/web/src/components/marketing/navbar/navigation/services/index.tsx
index c4528e31d..2838429cd 100644
--- a/apps/web/src/components/marketing/navbar/navigation/services/index.tsx
+++ b/apps/web/src/components/marketing/navbar/navigation/services/index.tsx
@@ -1,3 +1,5 @@
+"use client";
+
 import {
   NavigationMenuContent,
   NavigationMenuItem,
@@ -11,6 +13,8 @@ import { ArrowRight, LucideIcon } from "lucide-react";
 import React from "react";
 import Link from "next/link";
 
+import { useTranslation } from "@onruntime/translations/react";
+
 interface NavigationService {
   title: string;
   description: string;
@@ -25,13 +29,14 @@ interface NavigationService {
 }
 
 const NavigationServices: React.FC = () => {
-  
-  const navServices: NavigationService[] = Services.map(service => ({
+  const { t } = useTranslation("layout/navbar");
+
+  const navServices: NavigationService[] = Services.map((service) => ({
     title: service.name,
     description: service.description,
     icon: service.icon,
     route: `/services/${service.id}`,
-    subServices: service.subServices.map(subService => ({
+    subServices: service.subServices.map((subService) => ({
       title: subService.name,
       description: subService.description,
       route: `/services/${service.id}/${subService.id}`,
@@ -42,27 +47,26 @@ const NavigationServices: React.FC = () => {
   return (
     <NavigationMenuItem>
       <Link href={Routes.services}>
-        <NavigationMenuTrigger>Nos services</NavigationMenuTrigger>
+        <NavigationMenuTrigger>{t("links.services")}</NavigationMenuTrigger>
       </Link>
-      
 
       <NavigationMenuContent>
         <div className="grid w-full md:w-[600px] lg:w-[800px] grid-cols-1 md:grid-cols-[200px_1fr] lg:grid-cols-[200px_1fr] gap-3 p-4">
           <NavigationMenuLink asChild className="block">
-            <Link 
+            <Link
               href={Routes.services}
               className="group h-full select-none rounded-md bg-muted p-4 no-underline outline-none transition-colors hover:bg-accent hover:text-accent-foreground"
             >
               <div className="flex h-full flex-col justify-between">
                 <div>
                   <h3 className="text-sm font-medium mb-2">
-                    Nos services
+                    {t("services.title")}
                   </h3>
                   <p className="text-xs text-muted-foreground mb-4">
-                    Découvrez notre gamme complète de services de développement et de design pour donner vie à vos projets digitaux.
+                    {t("services.description")}
                   </p>
                 </div>
-                
+
                 <div className="space-y-3">
                   {navServices.slice(0, 3).map((service, index) => (
                     <div key={index} className="flex items-center gap-2 text-xs">
@@ -70,9 +74,9 @@ const NavigationServices: React.FC = () => {
                       <span>{service.title}</span>
                     </div>
                   ))}
-                  
+
                   <div className="flex items-center gap-2 text-xs text-muted-foreground group-hover:text-accent-foreground/80 mt-4">
-                    En savoir plus
+                    {t("services.cta")}
                     <ArrowRight className="h-3 w-3" />
                   </div>
                 </div>
@@ -91,19 +95,17 @@ const NavigationServices: React.FC = () => {
                 <p className="mb-2 text-xs text-muted-foreground">
                   {service.description}
                 </p>
-                
+
                 <div className="grid gap-1">
-                  {
-                  service.subServices?.map((subService) => (
-                    <Link 
-                      key={subService.title} 
+                  {service.subServices?.map((subService) => (
+                    <Link
+                      key={subService.title}
                       href={subService.route}
                       className="text-xs text-muted-foreground hover:text-foreground transition-colors"
                     >
                       {subService.title}
                     </Link>
                   ))}
-                  
                 </div>
               </ListItem>
             ))}
@@ -122,15 +124,21 @@ interface ListItemProps {
   children?: React.ReactNode;
 }
 
-const ListItem = ({ className, title, children, icon: Icon, href }: ListItemProps) => {
+const ListItem = ({
+  className,
+  title,
+  children,
+  icon: Icon,
+  href,
+}: ListItemProps) => {
   return (
     <li>
       <NavigationMenuLink asChild>
-        <Link 
-          href={href} 
+        <Link
+          href={href}
           className={cn(
             "flex flex-col gap-2 h-full select-none rounded-md p-3 leading-none no-underline outline-none transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground",
-            className
+            className,
           )}
         >
           <div className="flex items-center gap-2">
@@ -139,7 +147,7 @@ const ListItem = ({ className, title, children, icon: Icon, href }: ListItemProp
             </div>
             <span className="text-sm font-medium">{title}</span>
           </div>
-          
+
           {children}
         </Link>
       </NavigationMenuLink>
@@ -147,4 +155,4 @@ const ListItem = ({ className, title, children, icon: Icon, href }: ListItemProp
   );
 };
 
-export default NavigationServices;
\ No newline at end of file
+export default NavigationServices;
diff --git a/apps/web/src/lib/translations.server.ts b/apps/web/src/lib/translations.server.ts
new file mode 100644
index 000000000..d7998cc12
--- /dev/null
+++ b/apps/web/src/lib/translations.server.ts
@@ -0,0 +1,12 @@
+import "server-only";
+
+import { headers } from "next/headers";
+import { getTranslation as getTranslationCore } from "@onruntime/translations";
+
+import { load, defaultLocale } from "./translations";
+
+export const getTranslation = async (namespace = "common") => {
+  const headersList = await headers();
+  const locale = headersList.get("x-locale") || defaultLocale;
+  return getTranslationCore(load, locale, namespace);
+};
diff --git a/apps/web/src/lib/translations.ts b/apps/web/src/lib/translations.ts
index 6f074d14f..e385bcbef 100644
--- a/apps/web/src/lib/translations.ts
+++ b/apps/web/src/lib/translations.ts
@@ -1,7 +1,4 @@
-import {
-  getTranslation as getTranslationCore,
-  type TranslationLoader,
-} from "@onruntime/translations";
+import type { TranslationLoader } from "@onruntime/translations";
 
 export const locales = ["en", "fr"];
 export const defaultLocale = locales[0];
@@ -13,11 +10,3 @@ export const load: TranslationLoader = (locale, namespace) => {
     return undefined;
   }
 };
-
-export const getTranslation = async (
-  params: Promise<{ locale: string }>,
-  namespace = "common",
-) => {
-  const { locale } = await params;
-  return getTranslationCore(load, locale, namespace);
-};
diff --git a/apps/web/src/locales/README.md b/apps/web/src/locales/README.md
index eea2e1d7a..c1d2bb150 100644
--- a/apps/web/src/locales/README.md
+++ b/apps/web/src/locales/README.md
@@ -52,10 +52,10 @@ locales/
 ### Server Components
 
 ```tsx
-import { getTranslation } from "@/lib/translations";
+import { getTranslation } from "@/lib/translations.server";
 
-export default async function Page({ params }) {
-  const { t } = await getTranslation(params, "layout/footer");
+export default async function Page() {
+  const { t } = await getTranslation("layout/footer");
   return <p>{t("tagline")}</p>;
 }
 ```
@@ -76,11 +76,11 @@ export const Component = () => {
 ### Dynamic Pages
 
 ```tsx
-import { getTranslation } from "@/lib/translations";
+import { getTranslation } from "@/lib/translations.server";
 
-export default async function ProjectPage({ params }) {
+export default async function ProjectPage({ params }: { params: Promise<{ id: string }> }) {
   const { id } = await params;
-  const { t } = await getTranslation(params, `marketing/projects/${id}`);
+  const { t } = await getTranslation(`marketing/projects/${id}`);
   return <h1>{t("title")}</h1>;
 }
 ```
@@ -88,7 +88,7 @@ export default async function ProjectPage({ params }) {
 ## Adding a new namespace
 
 1. Create `en/<path>/<namespace>.json` and `fr/<path>/<namespace>.json`
-2. Use `getTranslation(params, "<path>/<namespace>")` or `useTranslation("<path>/<namespace>")`
+2. Use `getTranslation("<path>/<namespace>")` or `useTranslation("<path>/<namespace>")`
 
 ## Conventions
 
diff --git a/apps/web/src/locales/en/layout/navbar.json b/apps/web/src/locales/en/layout/navbar.json
new file mode 100644
index 000000000..4e6271de3
--- /dev/null
+++ b/apps/web/src/locales/en/layout/navbar.json
@@ -0,0 +1,33 @@
+{
+  "links": {
+    "services": "Our services",
+    "projects": "Our projects",
+    "agencies": "Our agencies",
+    "npo": "The association",
+    "contact": "Contact us"
+  },
+  "services": {
+    "title": "Our services",
+    "description": "Discover our full range of development and design services to bring your digital projects to life.",
+    "cta": "Learn more"
+  },
+  "projects": {
+    "title": "Our portfolio",
+    "description": "Discover all our projects and achievements across various sectors",
+    "categories": {
+      "web-mobile": "Web & Mobile Apps",
+      "open-source": "Open Source Projects",
+      "design": "UI/UX Design"
+    },
+    "cta": "View all projects"
+  },
+  "agencies": {
+    "title": "Our agencies in France",
+    "description": "Discover our network of agencies and our local expertise throughout France",
+    "agency": "Agency {name}",
+    "main": "Main agencies",
+    "all": "All our agencies",
+    "by-region": "All our agencies by region",
+    "cta": "View all agencies"
+  }
+}
diff --git a/apps/web/src/locales/fr/layout/navbar.json b/apps/web/src/locales/fr/layout/navbar.json
new file mode 100644
index 000000000..b8d9673eb
--- /dev/null
+++ b/apps/web/src/locales/fr/layout/navbar.json
@@ -0,0 +1,33 @@
+{
+  "links": {
+    "services": "Nos services",
+    "projects": "Nos projets",
+    "agencies": "Nos agences",
+    "npo": "L'association",
+    "contact": "Nous contacter"
+  },
+  "services": {
+    "title": "Nos services",
+    "description": "Découvrez notre gamme complète de services de développement et de design pour donner vie à vos projets digitaux.",
+    "cta": "En savoir plus"
+  },
+  "projects": {
+    "title": "Notre portfolio",
+    "description": "Découvrez tous nos projets et réalisations pour divers secteurs",
+    "categories": {
+      "web-mobile": "Applications Web & Mobile",
+      "open-source": "Projets Open Source",
+      "design": "Design UI/UX"
+    },
+    "cta": "Voir tous les projets"
+  },
+  "agencies": {
+    "title": "Nos agences en France",
+    "description": "Découvrez notre réseau d'agences et notre expertise locale dans toute la France",
+    "agency": "Agence {name}",
+    "main": "Principales agences",
+    "all": "Toutes nos agences",
+    "by-region": "Toutes nos agences par région",
+    "cta": "Voir toutes nos agences"
+  }
+}
diff --git a/apps/web/src/middleware.ts b/apps/web/src/middleware.ts
deleted file mode 100644
index c4f495265..000000000
--- a/apps/web/src/middleware.ts
+++ /dev/null
@@ -1,26 +0,0 @@
-import { NextResponse } from "next/server";
-import type { NextRequest } from "next/server";
-
-import { locales, defaultLocale } from "@/lib/translations";
-
-export function middleware(request: NextRequest) {
-  const { pathname } = request.nextUrl;
-
-  const pathnameLocale = locales.find(
-    (locale) => pathname.startsWith(`/${locale}/`) || pathname === `/${locale}`,
-  );
-
-  if (pathnameLocale === defaultLocale) {
-    const newPathname = pathname.replace(`/${defaultLocale}`, "") || "/";
-    return NextResponse.redirect(new URL(newPathname, request.url));
-  }
-
-  if (pathnameLocale) return;
-
-  request.nextUrl.pathname = `/${defaultLocale}${pathname}`;
-  return NextResponse.rewrite(request.nextUrl);
-}
-
-export const config = {
-  matcher: ["/((?!_next|favicon.ico|api|.*\\.).*)"],
-};
diff --git a/apps/web/src/proxy.ts b/apps/web/src/proxy.ts
new file mode 100644
index 000000000..ec93d425f
--- /dev/null
+++ b/apps/web/src/proxy.ts
@@ -0,0 +1,68 @@
+import { NextResponse } from "next/server";
+import type { NextRequest } from "next/server";
+
+import { locales, defaultLocale } from "@/lib/translations";
+
+function getPreferredLocale(request: NextRequest): string {
+  const acceptLanguage = request.headers.get("accept-language");
+  if (!acceptLanguage) return defaultLocale;
+
+  const preferred = acceptLanguage
+    .split(",")
+    .map((lang) => {
+      const [code, priority = "q=1"] = lang.trim().split(";");
+      return {
+        code: code.split("-")[0].toLowerCase(),
+        priority: parseFloat(priority.replace("q=", "")),
+      };
+    })
+    .sort((a, b) => b.priority - a.priority)
+    .find((lang) => locales.includes(lang.code));
+
+  return preferred?.code || defaultLocale;
+}
+
+export function proxy(request: NextRequest) {
+  const { pathname } = request.nextUrl;
+
+  const pathnameLocale = locales.find(
+    (locale) => pathname.startsWith(`/${locale}/`) || pathname === `/${locale}`,
+  );
+
+  // If URL has the default locale prefix, redirect to remove it
+  if (pathnameLocale === defaultLocale) {
+    const newPathname = pathname.replace(`/${defaultLocale}`, "") || "/";
+    return NextResponse.redirect(new URL(newPathname, request.url));
+  }
+
+  // If URL has a non-default locale prefix, use it
+  if (pathnameLocale) {
+    const requestHeaders = new Headers(request.headers);
+    requestHeaders.set("x-locale", pathnameLocale);
+    return NextResponse.next({
+      request: { headers: requestHeaders },
+    });
+  }
+
+  // No locale in URL - detect from Accept-Language
+  const preferredLocale = getPreferredLocale(request);
+
+  // If preferred locale is not the default, redirect to it
+  if (preferredLocale !== defaultLocale) {
+    return NextResponse.redirect(
+      new URL(`/${preferredLocale}${pathname}`, request.url),
+    );
+  }
+
+  // Use default locale (rewrite internally)
+  const requestHeaders = new Headers(request.headers);
+  requestHeaders.set("x-locale", defaultLocale);
+  request.nextUrl.pathname = `/${defaultLocale}${pathname}`;
+  return NextResponse.rewrite(request.nextUrl, {
+    request: { headers: requestHeaders },
+  });
+}
+
+export const config = {
+  matcher: ["/((?!_next|favicon.ico|api|.*\\.).*)"],
+};
diff --git a/examples/translations/next-app/app/[lang]/page.tsx b/examples/translations/next-app/app/[lang]/page.tsx
index 87e3b1277..53ac32470 100644
--- a/examples/translations/next-app/app/[lang]/page.tsx
+++ b/examples/translations/next-app/app/[lang]/page.tsx
@@ -1,13 +1,9 @@
 import { Link } from "@onruntime/translations/next";
 
-import { getTranslation } from "@/lib/translations";
+import { getTranslation } from "@/lib/translations.server";
 
-export default async function Home({
-  params,
-}: {
-  params: Promise<{ lang: string }>;
-}) {
-  const { t, locale } = await getTranslation(params);
+export default async function Home() {
+  const { t, locale } = await getTranslation();
   const count: number = 5;
 
   const otherLocale = locale === "en" ? "fr" : "en";
diff --git a/examples/translations/next-app/lib/translations.server.ts b/examples/translations/next-app/lib/translations.server.ts
new file mode 100644
index 000000000..744535dca
--- /dev/null
+++ b/examples/translations/next-app/lib/translations.server.ts
@@ -0,0 +1,15 @@
+import "server-only";
+
+import { headers } from "next/headers";
+import { getTranslation as getTranslationCore } from "@onruntime/translations";
+
+import { load, defaultLocale } from "./translations";
+
+/**
+ * Helper for server components - reads locale from x-locale header set by proxy
+ */
+export const getTranslation = async (namespace = "common") => {
+  const headersList = await headers();
+  const locale = headersList.get("x-locale") || defaultLocale;
+  return getTranslationCore(load, locale, namespace);
+};
diff --git a/examples/translations/next-app/lib/translations.ts b/examples/translations/next-app/lib/translations.ts
index 451116e56..d7ef54ca3 100644
--- a/examples/translations/next-app/lib/translations.ts
+++ b/examples/translations/next-app/lib/translations.ts
@@ -1,7 +1,4 @@
-import {
-  getTranslation as getTranslationCore,
-  type TranslationLoader,
-} from "@onruntime/translations";
+import type { TranslationLoader } from "@onruntime/translations";
 
 export const locales = ["en", "fr"];
 export const defaultLocale = locales[0];
@@ -13,14 +10,3 @@ export const load: TranslationLoader = (locale, namespace) => {
     return undefined;
   }
 };
-
-/**
- * Helper for server components - handles params automatically
- */
-export const getTranslation = async (
-  params: Promise<{ lang: string }>,
-  namespace = "common",
-) => {
-  const { lang } = await params;
-  return getTranslationCore(load, lang, namespace);
-};
diff --git a/examples/translations/next-app/middleware.ts b/examples/translations/next-app/middleware.ts
deleted file mode 100644
index b02d0ed57..000000000
--- a/examples/translations/next-app/middleware.ts
+++ /dev/null
@@ -1,30 +0,0 @@
-import { NextResponse } from "next/server";
-import type { NextRequest } from "next/server";
-
-import { locales, defaultLocale } from "@/lib/translations";
-
-export function middleware(request: NextRequest) {
-  const { pathname } = request.nextUrl;
-
-  // Check if pathname has a locale prefix
-  const pathnameLocale = locales.find(
-    (locale) => pathname.startsWith(`/${locale}/`) || pathname === `/${locale}`,
-  );
-
-  // If it's the default locale with prefix, redirect to remove it
-  if (pathnameLocale === defaultLocale) {
-    const newPathname = pathname.replace(`/${defaultLocale}`, "") || "/";
-    return NextResponse.redirect(new URL(newPathname, request.url));
-  }
-
-  // If it has a non-default locale prefix, let it through
-  if (pathnameLocale) return;
-
-  // No locale prefix - rewrite to default locale internally
-  request.nextUrl.pathname = `/${defaultLocale}${pathname}`;
-  return NextResponse.rewrite(request.nextUrl);
-}
-
-export const config = {
-  matcher: ["/((?!_next|favicon.ico).*)"],
-};
diff --git a/examples/translations/next-app/package.json b/examples/translations/next-app/package.json
index 85f83cb51..ef3f2e7c7 100644
--- a/examples/translations/next-app/package.json
+++ b/examples/translations/next-app/package.json
@@ -11,7 +11,8 @@
     "@onruntime/translations": "workspace:*",
     "next": "^16.1.1",
     "react": "^19.1.0",
-    "react-dom": "^19.1.0"
+    "react-dom": "^19.1.0",
+    "server-only": "^0.0.1"
   },
   "devDependencies": {
     "@types/node": "^22",
diff --git a/examples/translations/next-app/proxy.ts b/examples/translations/next-app/proxy.ts
new file mode 100644
index 000000000..6d4e25f79
--- /dev/null
+++ b/examples/translations/next-app/proxy.ts
@@ -0,0 +1,68 @@
+import { NextResponse } from "next/server";
+import type { NextRequest } from "next/server";
+
+import { locales, defaultLocale } from "@/lib/translations";
+
+function getPreferredLocale(request: NextRequest): string {
+  const acceptLanguage = request.headers.get("accept-language");
+  if (!acceptLanguage) return defaultLocale;
+
+  const preferred = acceptLanguage
+    .split(",")
+    .map((lang) => {
+      const [code, priority = "q=1"] = lang.trim().split(";");
+      return {
+        code: code.split("-")[0].toLowerCase(),
+        priority: parseFloat(priority.replace("q=", "")),
+      };
+    })
+    .sort((a, b) => b.priority - a.priority)
+    .find((lang) => locales.includes(lang.code));
+
+  return preferred?.code || defaultLocale;
+}
+
+export function proxy(request: NextRequest) {
+  const { pathname } = request.nextUrl;
+
+  const pathnameLocale = locales.find(
+    (locale) => pathname.startsWith(`/${locale}/`) || pathname === `/${locale}`,
+  );
+
+  // If URL has the default locale prefix, redirect to remove it
+  if (pathnameLocale === defaultLocale) {
+    const newPathname = pathname.replace(`/${defaultLocale}`, "") || "/";
+    return NextResponse.redirect(new URL(newPathname, request.url));
+  }
+
+  // If URL has a non-default locale prefix, use it
+  if (pathnameLocale) {
+    const requestHeaders = new Headers(request.headers);
+    requestHeaders.set("x-locale", pathnameLocale);
+    return NextResponse.next({
+      request: { headers: requestHeaders },
+    });
+  }
+
+  // No locale in URL - detect from Accept-Language
+  const preferredLocale = getPreferredLocale(request);
+
+  // If preferred locale is not the default, redirect to it
+  if (preferredLocale !== defaultLocale) {
+    return NextResponse.redirect(
+      new URL(`/${preferredLocale}${pathname}`, request.url),
+    );
+  }
+
+  // Use default locale (rewrite internally)
+  const requestHeaders = new Headers(request.headers);
+  requestHeaders.set("x-locale", defaultLocale);
+  request.nextUrl.pathname = `/${defaultLocale}${pathname}`;
+  return NextResponse.rewrite(request.nextUrl, {
+    request: { headers: requestHeaders },
+  });
+}
+
+export const config = {
+  matcher: ["/((?!_next|favicon.ico).*)"],
+};
diff --git a/packages/translations/README.md b/packages/translations/README.md
index e2403b680..843b1d243 100644
--- a/packages/translations/README.md
+++ b/packages/translations/README.md
@@ -20,12 +20,11 @@ pnpm add @onruntime/translations
 
 #### 1. Create your translations config
 
+Create two files to separate shared config from server-only code:
+
 ```typescript
-// lib/translations.ts
-import {
-  getTranslation as getTranslationCore,
-  type TranslationLoader,
-} from "@onruntime/translations";
+// lib/translations.ts (shared config - can be imported by client components)
+import type { TranslationLoader } from "@onruntime/translations";
 
 export const locales = ["en", "fr"];
 export const defaultLocale = locales[0];
@@ -37,26 +36,57 @@ export const load: TranslationLoader = (locale, namespace) => {
     return undefined;
   }
 };
+```
 
-export const getTranslation = async (
-  params: Promise<{ lang: string }>,
-  namespace = "common",
-) => {
-  const { lang } = await params;
-  return getTranslationCore(load, lang, namespace);
+```typescript
+// lib/translations.server.ts (server-only - for server components)
+import "server-only";
+
+import { headers } from "next/headers";
+import { getTranslation as getTranslationCore } from "@onruntime/translations";
+
+import { load, defaultLocale } from "./translations";
+
+export const getTranslation = async (namespace = "common") => {
+  const headersList = await headers();
+  const locale = headersList.get("x-locale") || defaultLocale;
+  return getTranslationCore(load, locale, namespace);
 };
 ```
 
-#### 2. Setup middleware
+> **Note:** Install the `server-only` package to prevent accidental imports in client components: `pnpm add server-only`
+
+#### 2. Setup proxy
+
+The proxy detects the user's language from `Accept-Language` header and sets an `x-locale` header for server components.
 
 ```typescript
-// middleware.ts
+// proxy.ts
 import { NextResponse } from "next/server";
 import type { NextRequest } from "next/server";
 
 import { locales, defaultLocale } from "@/lib/translations";
 
-export function middleware(request: NextRequest) {
+function getPreferredLocale(request: NextRequest): string {
+  const acceptLanguage = request.headers.get("accept-language");
+  if (!acceptLanguage) return defaultLocale;
+
+  const preferred = acceptLanguage
+    .split(",")
+    .map((lang) => {
+      const [code, priority = "q=1"] = lang.trim().split(";");
+      return {
+        code: code.split("-")[0].toLowerCase(),
+        priority: parseFloat(priority.replace("q=", "")),
+      };
+    })
+    .sort((a, b) => b.priority - a.priority)
+    .find((lang) => locales.includes(lang.code));
+
+  return preferred?.code || defaultLocale;
+}
+
+export function proxy(request: NextRequest) {
   const { pathname } = request.nextUrl;
 
   const pathnameLocale = locales.find(
@@ -68,10 +98,28 @@ export function middleware(request: NextRequest) {
     return NextResponse.redirect(new URL(newPathname, request.url));
   }
 
-  if (pathnameLocale) return;
+  if (pathnameLocale) {
+    const requestHeaders = new Headers(request.headers);
+    requestHeaders.set("x-locale", pathnameLocale);
+    return NextResponse.next({
+      request: { headers: requestHeaders },
+    });
+  }
+
+  const preferredLocale = getPreferredLocale(request);
+
+  if (preferredLocale !== defaultLocale) {
+    return NextResponse.redirect(
+      new URL(`/${preferredLocale}${pathname}`, request.url),
+    );
+  }
 
+  const requestHeaders = new Headers(request.headers);
+  requestHeaders.set("x-locale", defaultLocale);
   request.nextUrl.pathname = `/${defaultLocale}${pathname}`;
-  return NextResponse.rewrite(request.nextUrl);
+  return NextResponse.rewrite(request.nextUrl, {
+    request: { headers: requestHeaders },
+  });
 }
 
 export const config = {
@@ -119,14 +167,10 @@ export default async function RootLayout({
 // app/[lang]/page.tsx
 import { Link } from "@onruntime/translations/next";
 
-import { getTranslation } from "@/lib/translations";
+import { getTranslation } from "@/lib/translations.server";
 
-export default async function Home({
-  params,
-}: {
-  params: Promise<{ lang: string }>;
-}) {
-  const { t, locale } = await getTranslation(params);
+export default async function Home() {
+  const { t, locale } = await getTranslation();
 
   return (
     <div>
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 55da095fc..c8ede9776 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -113,6 +113,9 @@ importers:
       resend:
         specifier: ^4.1.2
         version: 4.8.0(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
+      server-only:
+        specifier: ^0.0.1
+        version: 0.0.1
       tailwind-merge:
         specifier: ^3.0.0
         version: 3.4.0
@@ -159,6 +162,9 @@ importers:
       react-dom:
         specifier: ^19.1.0
         version: 19.2.3(react@19.2.3)
+      server-only:
+        specifier: ^0.0.1
+        version: 0.0.1
     devDependencies:
       '@types/node':
         specifier: ^22
@@ -2437,6 +2443,9 @@ packages:
     resolution: {integrity: sha512-ZYkZLAvKTKQXWuh5XpBw7CdbSzagarX39WyZ2H07CDLC5/KfsRGlIXV8d4+tfqX1M7916mRqR1QfNHSij+c9Pw==}
     engines: {node: '>=18'}
 
+  server-only@0.0.1:
+    resolution: {integrity: sha512-qepMx2JxAa5jjfzxG79yPPq+8BuFToHd1hm7kI+Z4zAq1ftQiP7HcxMhDDItrbtwVeLg/cY2JnKnrcFkmiswNA==}
+
   sharp@0.34.5:
     resolution: {integrity: sha512-Ou9I5Ft9WNcCbXrU9cMgPBcCK8LiwLqcbywW3t4oDV37n1pzpuNLsYiAV8eODnjbtQlSDwZ2cUEeQz4E54Hltg==}
     engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0}
@@ -4965,6 +4974,8 @@ snapshots:
     dependencies:
       type-fest: 4.41.0
 
+  server-only@0.0.1: {}
+
   sharp@0.34.5:
     dependencies:
       '@img/colour': 1.0.0

From a4d48ec2170b9d33197eb4b29520d16beb777a68 Mon Sep 17 00:00:00 2001
From: Antoine Kingue <etorefr@gmail.com>
Date: Sun, 28 Dec 2025 16:01:50 +0100
Subject: [PATCH 04/64] =?UTF-8?q?=F0=9F=93=9D=20update=20translation=20imp?=
 =?UTF-8?q?orts=20for=20server=20components=20in=20claude.md?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 CLAUDE.md | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/CLAUDE.md b/CLAUDE.md
index 08a1dabaf..543917870 100644
--- a/CLAUDE.md
+++ b/CLAUDE.md
@@ -67,8 +67,8 @@ export const joinClient = {
 **Translations**: Uses `@onruntime/translations` package. See `apps/web/src/locales/README.md` for full conventions.
 ```typescript
 // Server Components
-import { getTranslation } from "@/lib/translations";
-const { t } = await getTranslation(params, "layout/footer");
+import { getTranslation } from "@/lib/translations.server";
+const { t } = await getTranslation("layout/footer");
 
 // Client Components
 import { useTranslation } from "@onruntime/translations/react";

From b01a8dd80c344db1a099ff232b7729308318dd70 Mon Sep 17 00:00:00 2001
From: Antoine Kingue <etorefr@gmail.com>
Date: Sun, 28 Dec 2025 19:33:31 +0100
Subject: [PATCH 05/64] =?UTF-8?q?=E2=9E=95=20add=20@radix-ui/react-dropdow?=
 =?UTF-8?q?n-menu?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 apps/web/package.json |   1 +
 pnpm-lock.yaml        | 192 ++++++++++++++++++++++++++++++++++++++++++
 2 files changed, 193 insertions(+)

diff --git a/apps/web/package.json b/apps/web/package.json
index 057e40190..580dea4d3 100644
--- a/apps/web/package.json
+++ b/apps/web/package.json
@@ -18,6 +18,7 @@
     "@onruntime/translations": "workspace:*",
     "@radix-ui/react-accordion": "^1.2.3",
     "@radix-ui/react-dialog": "^1.1.6",
+    "@radix-ui/react-dropdown-menu": "^2.1.16",
     "@radix-ui/react-navigation-menu": "^1.2.3",
     "@radix-ui/react-slot": "^1.1.1",
     "@radix-ui/react-tabs": "^1.1.2",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index c8ede9776..0376e5162 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -38,6 +38,9 @@ importers:
       '@radix-ui/react-dialog':
         specifier: ^1.1.6
         version: 1.1.15(@types/react-dom@19.2.3(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
+      '@radix-ui/react-dropdown-menu':
+        specifier: ^2.1.16
+        version: 2.1.16(@types/react-dom@19.2.3(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
       '@radix-ui/react-navigation-menu':
         specifier: ^1.2.3
         version: 1.2.14(@types/react-dom@19.2.3(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
@@ -660,6 +663,21 @@ packages:
     cpu: [x64]
     os: [win32]
 
+  '@floating-ui/core@1.7.3':
+    resolution: {integrity: sha512-sGnvb5dmrJaKEZ+LDIpguvdX3bDlEllmv4/ClQ9awcmCZrlx5jQyyMWFM5kBI+EyNOCDDiKk8il0zeuX3Zlg/w==}
+
+  '@floating-ui/dom@1.7.4':
+    resolution: {integrity: sha512-OOchDgh4F2CchOX94cRVqhvy7b3AFb+/rQXyswmzmGakRfkMgoWVjfnLWkRirfLEfuD4ysVW16eXzwt3jHIzKA==}
+
+  '@floating-ui/react-dom@2.1.6':
+    resolution: {integrity: sha512-4JX6rEatQEvlmgU80wZyq9RT96HZJa88q8hp0pBd+LrczeDI4o6uA2M+uvxngVHo4Ihr8uibXxH6+70zhAFrVw==}
+    peerDependencies:
+      react: '>=16.8.0'
+      react-dom: '>=16.8.0'
+
+  '@floating-ui/utils@0.2.10':
+    resolution: {integrity: sha512-aGTxbpbg8/b5JfU1HXSrbH3wXZuLPJcNEcZQFMxLs3oSzgtVu6nFPkbbGGUvBcUjKV2YyB9Wxxabo+HEH9tcRQ==}
+
   '@fontsource/cal-sans@5.2.3':
     resolution: {integrity: sha512-cY9d2LWfzzge3jSgh2IJmNEJdubuPnjfct/5Q/L/4Q5W9LlXRRZO403P0c3i1iPH4Y+IQ0gHgnJroPzL3KuxQQ==}
 
@@ -931,6 +949,19 @@ packages:
       '@types/react-dom':
         optional: true
 
+  '@radix-ui/react-arrow@1.1.7':
+    resolution: {integrity: sha512-F+M1tLhO+mlQaOWspE8Wstg+z6PwxwRd8oQ8IXceWz92kfAmalTRf0EjrouQeo7QssEPfCn05B4Ihs1K9WQ/7w==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
   '@radix-ui/react-collapsible@1.1.12':
     resolution: {integrity: sha512-Uu+mSh4agx2ib1uIGPP4/CKNULyajb3p92LsVXmH2EHVMTfZWpll88XJ0j4W0z3f8NK1eYl1+Mf/szHPmcHzyA==}
     peerDependencies:
@@ -1010,6 +1041,19 @@ packages:
       '@types/react-dom':
         optional: true
 
+  '@radix-ui/react-dropdown-menu@2.1.16':
+    resolution: {integrity: sha512-1PLGQEynI/3OX/ftV54COn+3Sud/Mn8vALg2rWnBLnRaGtJDduNW/22XjlGgPdpcIbiQxjKtb7BkcjP00nqfJw==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
   '@radix-ui/react-focus-guards@1.1.3':
     resolution: {integrity: sha512-0rFg/Rj2Q62NCm62jZw0QX7a3sz6QCQU0LpZdNrJX8byRGaGVTqbrW9jAoIAHyMQqsNpeZ81YgSizOt5WXq0Pw==}
     peerDependencies:
@@ -1041,6 +1085,19 @@ packages:
       '@types/react':
         optional: true
 
+  '@radix-ui/react-menu@2.1.16':
+    resolution: {integrity: sha512-72F2T+PLlphrqLcAotYPp0uJMr5SjP5SL01wfEspJbru5Zs5vQaSHb4VB3ZMJPimgHHCHG7gMOeOB9H3Hdmtxg==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
   '@radix-ui/react-navigation-menu@1.2.14':
     resolution: {integrity: sha512-YB9mTFQvCOAQMHU+C/jVl96WmuWeltyUEpRJJky51huhds5W2FQr1J8D/16sQlf0ozxkPK8uF3niQMdUwZPv5w==}
     peerDependencies:
@@ -1054,6 +1111,19 @@ packages:
       '@types/react-dom':
         optional: true
 
+  '@radix-ui/react-popper@1.2.8':
+    resolution: {integrity: sha512-0NJQ4LFFUuWkE7Oxf0htBKS6zLkkjBH+hM1uk7Ng705ReR8m/uelduy1DBo0PyBXPKVnBA6YBlU94MBGXrSBCw==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
   '@radix-ui/react-portal@1.1.9':
     resolution: {integrity: sha512-bpIxvq03if6UNwXZ+HTK71JLh4APvnXntDc6XOX8UVq4XQOVl7lwok0AvIl+b8zgCw3fSaVTZMpAPPagXbKmHQ==}
     peerDependencies:
@@ -1204,6 +1274,24 @@ packages:
       '@types/react':
         optional: true
 
+  '@radix-ui/react-use-rect@1.1.1':
+    resolution: {integrity: sha512-QTYuDesS0VtuHNNvMh+CjlKJ4LJickCMUAqjlE3+j8w+RlRpwyX3apEQKGFzbZGdo7XNG1tXa+bQqIE7HIXT2w==}
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+
+  '@radix-ui/react-use-size@1.1.1':
+    resolution: {integrity: sha512-ewrXRDTAqAXlkl6t/fkXWNAhFX9I+CkKlw6zjEwk86RSPKwZr3xpBRso655aqYafwtnbpHLj6toFzmd6xdVptQ==}
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+
   '@radix-ui/react-visually-hidden@1.2.3':
     resolution: {integrity: sha512-pzJq12tEaaIhqjbzpCuv/OypJY/BPavOofm+dbab+MHLajy277+1lLm6JFcGgF5eskJ6mquGirhXY2GD/8u8Ug==}
     peerDependencies:
@@ -1217,6 +1305,9 @@ packages:
       '@types/react-dom':
         optional: true
 
+  '@radix-ui/rect@1.1.1':
+    resolution: {integrity: sha512-HPwpGIzkl28mWyZqG52jiqDJ12waP11Pa1lGoiyUkIEuMLBP0oeK/C89esbXrxsky5we7dfd8U58nm0SgAWpVw==}
+
   '@react-email/render@1.1.2':
     resolution: {integrity: sha512-RnRehYN3v9gVlNMehHPHhyp2RQo7+pSkHDtXPvg3s0GbzM9SQMW4Qrf8GRNvtpLC4gsI+Wt0VatNRUFqjvevbw==}
     engines: {node: '>=18.0.0'}
@@ -3039,6 +3130,23 @@ snapshots:
   '@esbuild/win32-x64@0.27.2':
     optional: true
 
+  '@floating-ui/core@1.7.3':
+    dependencies:
+      '@floating-ui/utils': 0.2.10
+
+  '@floating-ui/dom@1.7.4':
+    dependencies:
+      '@floating-ui/core': 1.7.3
+      '@floating-ui/utils': 0.2.10
+
+  '@floating-ui/react-dom@2.1.6(react-dom@19.2.3(react@19.2.3))(react@19.2.3)':
+    dependencies:
+      '@floating-ui/dom': 1.7.4
+      react: 19.2.3
+      react-dom: 19.2.3(react@19.2.3)
+
+  '@floating-ui/utils@0.2.10': {}
+
   '@fontsource/cal-sans@5.2.3': {}
 
   '@hookform/resolvers@5.2.2(react-hook-form@7.69.0(react@19.2.3))':
@@ -3271,6 +3379,15 @@ snapshots:
       '@types/react': 19.2.7
       '@types/react-dom': 19.2.3(@types/react@19.2.7)
 
+  '@radix-ui/react-arrow@1.1.7(@types/react-dom@19.2.3(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)':
+    dependencies:
+      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.2.3(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
+      react: 19.2.3
+      react-dom: 19.2.3(react@19.2.3)
+    optionalDependencies:
+      '@types/react': 19.2.7
+      '@types/react-dom': 19.2.3(@types/react@19.2.7)
+
   '@radix-ui/react-collapsible@1.1.12(@types/react-dom@19.2.3(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)':
     dependencies:
       '@radix-ui/primitive': 1.1.3
@@ -3352,6 +3469,21 @@ snapshots:
       '@types/react': 19.2.7
       '@types/react-dom': 19.2.3(@types/react@19.2.7)
 
+  '@radix-ui/react-dropdown-menu@2.1.16(@types/react-dom@19.2.3(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)':
+    dependencies:
+      '@radix-ui/primitive': 1.1.3
+      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.2.7)(react@19.2.3)
+      '@radix-ui/react-context': 1.1.2(@types/react@19.2.7)(react@19.2.3)
+      '@radix-ui/react-id': 1.1.1(@types/react@19.2.7)(react@19.2.3)
+      '@radix-ui/react-menu': 2.1.16(@types/react-dom@19.2.3(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
+      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.2.3(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
+      '@radix-ui/react-use-controllable-state': 1.2.2(@types/react@19.2.7)(react@19.2.3)
+      react: 19.2.3
+      react-dom: 19.2.3(react@19.2.3)
+    optionalDependencies:
+      '@types/react': 19.2.7
+      '@types/react-dom': 19.2.3(@types/react@19.2.7)
+
   '@radix-ui/react-focus-guards@1.1.3(@types/react@19.2.7)(react@19.2.3)':
     dependencies:
       react: 19.2.3
@@ -3376,6 +3508,32 @@ snapshots:
     optionalDependencies:
       '@types/react': 19.2.7
 
+  '@radix-ui/react-menu@2.1.16(@types/react-dom@19.2.3(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)':
+    dependencies:
+      '@radix-ui/primitive': 1.1.3
+      '@radix-ui/react-collection': 1.1.7(@types/react-dom@19.2.3(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
+      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.2.7)(react@19.2.3)
+      '@radix-ui/react-context': 1.1.2(@types/react@19.2.7)(react@19.2.3)
+      '@radix-ui/react-direction': 1.1.1(@types/react@19.2.7)(react@19.2.3)
+      '@radix-ui/react-dismissable-layer': 1.1.11(@types/react-dom@19.2.3(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
+      '@radix-ui/react-focus-guards': 1.1.3(@types/react@19.2.7)(react@19.2.3)
+      '@radix-ui/react-focus-scope': 1.1.7(@types/react-dom@19.2.3(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
+      '@radix-ui/react-id': 1.1.1(@types/react@19.2.7)(react@19.2.3)
+      '@radix-ui/react-popper': 1.2.8(@types/react-dom@19.2.3(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
+      '@radix-ui/react-portal': 1.1.9(@types/react-dom@19.2.3(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
+      '@radix-ui/react-presence': 1.1.5(@types/react-dom@19.2.3(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
+      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.2.3(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
+      '@radix-ui/react-roving-focus': 1.1.11(@types/react-dom@19.2.3(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
+      '@radix-ui/react-slot': 1.2.3(@types/react@19.2.7)(react@19.2.3)
+      '@radix-ui/react-use-callback-ref': 1.1.1(@types/react@19.2.7)(react@19.2.3)
+      aria-hidden: 1.2.6
+      react: 19.2.3
+      react-dom: 19.2.3(react@19.2.3)
+      react-remove-scroll: 2.7.2(@types/react@19.2.7)(react@19.2.3)
+    optionalDependencies:
+      '@types/react': 19.2.7
+      '@types/react-dom': 19.2.3(@types/react@19.2.7)
+
   '@radix-ui/react-navigation-menu@1.2.14(@types/react-dom@19.2.3(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)':
     dependencies:
       '@radix-ui/primitive': 1.1.3
@@ -3398,6 +3556,24 @@ snapshots:
       '@types/react': 19.2.7
       '@types/react-dom': 19.2.3(@types/react@19.2.7)
 
+  '@radix-ui/react-popper@1.2.8(@types/react-dom@19.2.3(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)':
+    dependencies:
+      '@floating-ui/react-dom': 2.1.6(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
+      '@radix-ui/react-arrow': 1.1.7(@types/react-dom@19.2.3(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
+      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.2.7)(react@19.2.3)
+      '@radix-ui/react-context': 1.1.2(@types/react@19.2.7)(react@19.2.3)
+      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.2.3(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
+      '@radix-ui/react-use-callback-ref': 1.1.1(@types/react@19.2.7)(react@19.2.3)
+      '@radix-ui/react-use-layout-effect': 1.1.1(@types/react@19.2.7)(react@19.2.3)
+      '@radix-ui/react-use-rect': 1.1.1(@types/react@19.2.7)(react@19.2.3)
+      '@radix-ui/react-use-size': 1.1.1(@types/react@19.2.7)(react@19.2.3)
+      '@radix-ui/rect': 1.1.1
+      react: 19.2.3
+      react-dom: 19.2.3(react@19.2.3)
+    optionalDependencies:
+      '@types/react': 19.2.7
+      '@types/react-dom': 19.2.3(@types/react@19.2.7)
+
   '@radix-ui/react-portal@1.1.9(@types/react-dom@19.2.3(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)':
     dependencies:
       '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.2.3(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
@@ -3534,6 +3710,20 @@ snapshots:
     optionalDependencies:
       '@types/react': 19.2.7
 
+  '@radix-ui/react-use-rect@1.1.1(@types/react@19.2.7)(react@19.2.3)':
+    dependencies:
+      '@radix-ui/rect': 1.1.1
+      react: 19.2.3
+    optionalDependencies:
+      '@types/react': 19.2.7
+
+  '@radix-ui/react-use-size@1.1.1(@types/react@19.2.7)(react@19.2.3)':
+    dependencies:
+      '@radix-ui/react-use-layout-effect': 1.1.1(@types/react@19.2.7)(react@19.2.3)
+      react: 19.2.3
+    optionalDependencies:
+      '@types/react': 19.2.7
+
   '@radix-ui/react-visually-hidden@1.2.3(@types/react-dom@19.2.3(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)':
     dependencies:
       '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.2.3(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
@@ -3543,6 +3733,8 @@ snapshots:
       '@types/react': 19.2.7
       '@types/react-dom': 19.2.3(@types/react@19.2.7)
 
+  '@radix-ui/rect@1.1.1': {}
+
   '@react-email/render@1.1.2(react-dom@19.2.3(react@19.2.3))(react@19.2.3)':
     dependencies:
       html-to-text: 9.0.5

From c1f670b2cbc849d3eb1eb70b075b6767e245b154 Mon Sep 17 00:00:00 2001
From: Antoine Kingue <etorefr@gmail.com>
Date: Sun, 28 Dec 2025 19:36:19 +0100
Subject: [PATCH 06/64] =?UTF-8?q?=F0=9F=8C=90=20add=20link=20usage=20over?=
 =?UTF-8?q?=20all=20the=20web=20app?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../app/[locale]/(landing)/customer/page.ts   |  10 +-
 apps/web/src/app/[locale]/(landing)/page.ts   |  10 +-
 .../src/app/[locale]/agency/[city]/page.tsx   |   5 +-
 apps/web/src/app/[locale]/agency/page.tsx     |  10 +-
 .../src/app/[locale]/careers/[id]/page.tsx    |   2 +-
 apps/web/src/app/[locale]/careers/page.tsx    |  13 +-
 apps/web/src/app/[locale]/contact/page.tsx    |  12 +-
 .../glossary/[letter]/[term]/page.tsx         |   6 +-
 .../app/[locale]/glossary/[letter]/page.tsx   |   8 +-
 apps/web/src/app/[locale]/glossary/page.tsx   |  10 +-
 .../app/[locale]/glossary/tag/[tag]/page.tsx  |   6 +-
 .../src/app/[locale]/glossary/tags/page.tsx   |  10 +-
 apps/web/src/app/[locale]/layout.tsx          |   2 +-
 apps/web/src/app/[locale]/npo/page.tsx        |  12 +-
 apps/web/src/app/[locale]/projects/page.tsx   |  12 +-
 .../services/[category]/[service]/page.tsx    |   6 +-
 .../app/[locale]/services/[category]/page.tsx |   5 +-
 apps/web/src/app/[locale]/services/page.tsx   |  10 +-
 apps/web/src/components/custom-mdx.tsx        |   2 +-
 .../src/components/glossary/entry-page.tsx    |   2 +-
 .../src/components/layout/footer/footer.tsx   |  84 +++++---
 .../landing/customer/featured/index.tsx       |   2 +-
 .../marketing/landing/page-switcher/index.tsx |  27 +--
 .../landing/visitor/featured/index.tsx        |   2 +-
 .../landing/visitor/projects/card/index.tsx   |   2 +-
 .../landing/visitor/projects/index.tsx        |   2 +-
 .../marketing/landing/visitor/team/index.tsx  |   2 +-
 .../src/components/marketing/legal/page.tsx   |   2 +-
 .../src/components/marketing/navbar/index.tsx |   2 +-
 .../navbar/navigation/agencies/index.tsx      |   2 +-
 .../marketing/navbar/navigation/index.tsx     |   2 +-
 .../navbar/navigation/projects/index.tsx      |   2 +-
 .../navbar/navigation/services/index.tsx      |   2 +-
 .../marketing/projects/sections/index.tsx     |   2 +-
 .../marketing/services/sections/index.tsx     |   2 +-
 .../marketing/services/service-layout.tsx     |   2 +-
 .../marketing/services/service-overview.tsx   |   2 +-
 apps/web/src/components/ui/dropdown-menu.tsx  | 201 ++++++++++++++++++
 apps/web/src/lib/utils/metadata.ts            |  80 +++++--
 apps/web/src/locales/README.md                |   1 +
 apps/web/src/locales/en/layout/footer.json    |   9 +-
 apps/web/src/locales/en/layout/navbar.json    |   6 +-
 apps/web/src/locales/fr/layout/footer.json    |   7 +-
 apps/web/src/mdx-components.tsx               |   2 +-
 apps/web/src/proxy.ts                         |   9 +
 .../src/screens/marketing/careers/index.tsx   |   2 +-
 .../screens/marketing/careers/job-details.tsx |   2 +-
 .../screens/marketing/careers/job-list.tsx    |   2 +-
 apps/web/src/screens/marketing/npo/index.tsx  |   2 +-
 .../marketing/projects/details/index.tsx      |   2 +-
 .../src/screens/marketing/services/index.tsx  |   2 +-
 examples/translations/next-app/proxy.ts       |   9 +
 packages/translations/README.md               |  11 +-
 .../translations/src/next/app-provider.tsx    |  58 -----
 .../src/next/{ => components}/link.tsx        |   2 +-
 .../src/next/contexts/app-context.tsx         |  89 ++++++++
 .../pages-context.tsx}                        |  26 ++-
 .../src/next/hooks/use-pathname.ts            |  19 ++
 packages/translations/src/next/index.ts       |  12 +-
 59 files changed, 619 insertions(+), 228 deletions(-)
 create mode 100644 apps/web/src/components/ui/dropdown-menu.tsx
 delete mode 100644 packages/translations/src/next/app-provider.tsx
 rename packages/translations/src/next/{ => components}/link.tsx (95%)
 create mode 100644 packages/translations/src/next/contexts/app-context.tsx
 rename packages/translations/src/next/{provider.tsx => contexts/pages-context.tsx} (54%)
 create mode 100644 packages/translations/src/next/hooks/use-pathname.ts

diff --git a/apps/web/src/app/[locale]/(landing)/customer/page.ts b/apps/web/src/app/[locale]/(landing)/customer/page.ts
index 94e9a5265..1c18676d0 100644
--- a/apps/web/src/app/[locale]/(landing)/customer/page.ts
+++ b/apps/web/src/app/[locale]/(landing)/customer/page.ts
@@ -1,9 +1,11 @@
 import { constructMetadata } from "@/lib/utils/metadata";
 import CustomerLanding from "@/screens/marketing/landing/customer";
 
-export const metadata = constructMetadata({
-  title: "Solutions digitales professionnelles pour votre entreprise",
-  description: "Votre partenaire digital pour le développement web, mobile et design UI/UX. Notre agence crée des solutions sur mesure qui répondent à vos objectifs commerciaux.",
-});
+export async function generateMetadata() {
+  return constructMetadata({
+    title: "Solutions digitales professionnelles pour votre entreprise",
+    description: "Votre partenaire digital pour le développement web, mobile et design UI/UX. Notre agence crée des solutions sur mesure qui répondent à vos objectifs commerciaux.",
+  });
+}
 
 export default CustomerLanding;
diff --git a/apps/web/src/app/[locale]/(landing)/page.ts b/apps/web/src/app/[locale]/(landing)/page.ts
index bbc00f056..3660aac71 100644
--- a/apps/web/src/app/[locale]/(landing)/page.ts
+++ b/apps/web/src/app/[locale]/(landing)/page.ts
@@ -1,9 +1,11 @@
 import { constructMetadata } from "@/lib/utils/metadata";
 import VisitorLanding from "@/screens/marketing/landing/visitor";
 
-export const metadata = constructMetadata({
-  title: "Agence web de développement et design UI/UX à Paris et Rouen",
-  description: "Agence digitale spécialisée en développement web, mobile et design UI/UX. Notre équipe d'experts transforme vos idées en solutions digitales performantes.",
-});
+export async function generateMetadata() {
+  return constructMetadata({
+    title: "Agence web de développement et design UI/UX à Paris et Rouen",
+    description: "Agence digitale spécialisée en développement web, mobile et design UI/UX. Notre équipe d'experts transforme vos idées en solutions digitales performantes.",
+  });
+}
 
 export default VisitorLanding;
diff --git a/apps/web/src/app/[locale]/agency/[city]/page.tsx b/apps/web/src/app/[locale]/agency/[city]/page.tsx
index 9333f53ab..56f74f80e 100644
--- a/apps/web/src/app/[locale]/agency/[city]/page.tsx
+++ b/apps/web/src/app/[locale]/agency/[city]/page.tsx
@@ -23,17 +23,16 @@ export async function generateMetadata({
 }: {
   params: Promise<{ city: string }>;
 }): Promise<Metadata> {
-  
   const { city } = await params;
   const cityLower = city.toLowerCase();
 
   const agency = getAgencyById(cityLower);
-  
+
   if (!agency) {
     return constructMetadata({
       title: "Expertise locale non disponible",
       description: "Nous n'avons pas encore d'expertise spécifique pour cette ville.",
-      noIndex: true
+      noIndex: true,
     });
   }
 
diff --git a/apps/web/src/app/[locale]/agency/page.tsx b/apps/web/src/app/[locale]/agency/page.tsx
index da712936e..e5d897c32 100644
--- a/apps/web/src/app/[locale]/agency/page.tsx
+++ b/apps/web/src/app/[locale]/agency/page.tsx
@@ -10,10 +10,12 @@ import FranceMap from '@/components/marketing/agency/france-map';
 import { getMajorAgencies } from '@/constants/agencies';
 import { OrganizationSchema } from '@/components/json-ld/organization-schema';
 
-export const metadata = constructMetadata({
-  title: "Expertise web locale | Développement digital dans les grandes villes françaises",
-  description: "Nous accompagnons les entreprises locales partout en France avec notre expertise des marchés numériques régionaux. Solutions digitales adaptées à chaque région.",
-});
+export async function generateMetadata() {
+  return constructMetadata({
+    title: "Expertise web locale | Développement digital dans les grandes villes françaises",
+    description: "Nous accompagnons les entreprises locales partout en France avec notre expertise des marchés numériques régionaux. Solutions digitales adaptées à chaque région.",
+  });
+}
 
 export default function AgencyLandingPage() {
   
diff --git a/apps/web/src/app/[locale]/careers/[id]/page.tsx b/apps/web/src/app/[locale]/careers/[id]/page.tsx
index 9d9fb7b94..1960b015d 100644
--- a/apps/web/src/app/[locale]/careers/[id]/page.tsx
+++ b/apps/web/src/app/[locale]/careers/[id]/page.tsx
@@ -8,7 +8,7 @@ import { env } from "env";
 async function getJobById(id: string): Promise<JobPosting | null> {
   try {
     const baseUrl =env.NEXT_PUBLIC_APP_URL;
-    
+
     const res = await fetch(
       `${baseUrl}/api/careers/${id}`,
       {
diff --git a/apps/web/src/app/[locale]/careers/page.tsx b/apps/web/src/app/[locale]/careers/page.tsx
index 234d58a42..8bb974a62 100644
--- a/apps/web/src/app/[locale]/careers/page.tsx
+++ b/apps/web/src/app/[locale]/careers/page.tsx
@@ -1,11 +1,12 @@
 import { constructMetadata } from "@/lib/utils/metadata";
 import CareersPage from "@/screens/marketing/careers";
-import { Metadata } from "next";
 
-export const metadata: Metadata = constructMetadata({
-  title: "Rejoignez notre équipe | Opportunités de carrière",
-  description:
-    "Découvrez les opportunités de carrière chez onRuntime Studio. Rejoignez notre équipe de développeurs, designers et experts passionnés par l'innovation digitale.",
-});
+export async function generateMetadata() {
+  return constructMetadata({
+    title: "Rejoignez notre équipe | Opportunités de carrière",
+    description:
+      "Découvrez les opportunités de carrière chez onRuntime Studio. Rejoignez notre équipe de développeurs, designers et experts passionnés par l'innovation digitale.",
+  });
+}
 
 export default CareersPage;
diff --git a/apps/web/src/app/[locale]/contact/page.tsx b/apps/web/src/app/[locale]/contact/page.tsx
index d89c5a513..6a33d7733 100644
--- a/apps/web/src/app/[locale]/contact/page.tsx
+++ b/apps/web/src/app/[locale]/contact/page.tsx
@@ -1,9 +1,11 @@
 import { constructMetadata } from "@/lib/utils/metadata";
 import ContactPage from "@/screens/marketing/contact";
 
-export const metadata = constructMetadata({
-  title: "Contactez notre agence web pour votre projet digital",
-  description: "Besoin d'une agence web pour votre projet ? Contactez notre équipe d'experts en développement et design pour transformer votre vision en réalité digitale.",
-});
+export async function generateMetadata() {
+  return constructMetadata({
+    title: "Contactez notre agence web pour votre projet digital",
+    description: "Besoin d'une agence web pour votre projet ? Contactez notre équipe d'experts en développement et design pour transformer votre vision en réalité digitale.",
+  });
+}
 
-export default ContactPage;
\ No newline at end of file
+export default ContactPage;
diff --git a/apps/web/src/app/[locale]/glossary/[letter]/[term]/page.tsx b/apps/web/src/app/[locale]/glossary/[letter]/[term]/page.tsx
index 9e6f6098c..9678f7fe6 100644
--- a/apps/web/src/app/[locale]/glossary/[letter]/[term]/page.tsx
+++ b/apps/web/src/app/[locale]/glossary/[letter]/[term]/page.tsx
@@ -11,12 +11,12 @@ interface TermPageProps {
   }>;
 }
 
-export async function generateMetadata({ 
-  params 
+export async function generateMetadata({
+  params
 }: TermPageProps) {
   const { letter, term } = await params;
   const entry = await getGlossaryEntry(letter, term);
-  
+
   if (!entry) {
     return constructMetadata({
       title: "Terme non trouvé | Glossaire",
diff --git a/apps/web/src/app/[locale]/glossary/[letter]/page.tsx b/apps/web/src/app/[locale]/glossary/[letter]/page.tsx
index 0b0fe0a4b..c54f2706c 100644
--- a/apps/web/src/app/[locale]/glossary/[letter]/page.tsx
+++ b/apps/web/src/app/[locale]/glossary/[letter]/page.tsx
@@ -10,19 +10,19 @@ interface LetterPageProps {
   }>;
 }
 
-export async function generateMetadata({ 
-  params 
+export async function generateMetadata({
+  params
 }: LetterPageProps) {
   const { letter } = await params;
   const sanitizedLetter = letter.toLowerCase();
-  
+
   if (!sanitizedLetter.match(/^[a-z]$/)) {
     return constructMetadata({
       title: "Lettre non valide | Glossaire",
       description: "Cette lettre n'est pas valide.",
     });
   }
-  
+
   return constructMetadata({
     title: `Termes commençant par ${sanitizedLetter.toUpperCase()} | Glossaire`,
     description: `Découvrez tous les termes du glossaire commençant par la lettre ${sanitizedLetter.toUpperCase()}.`,
diff --git a/apps/web/src/app/[locale]/glossary/page.tsx b/apps/web/src/app/[locale]/glossary/page.tsx
index 7bc7bf55e..064ffa5a4 100644
--- a/apps/web/src/app/[locale]/glossary/page.tsx
+++ b/apps/web/src/app/[locale]/glossary/page.tsx
@@ -10,10 +10,12 @@ import { GlossarySearch } from "@/components/glossary/search";
 import { Badge } from "@/components/ui/badge";
 import { Tag as TagIcon } from "lucide-react";
 
-export const metadata = constructMetadata({
-  title: "Glossaire du Développement et Design Web",
-  description: "Consultez notre glossaire complet des termes techniques en développement web, design UI/UX et gestion de projet digital.",
-});
+export async function generateMetadata() {
+  return constructMetadata({
+    title: "Glossaire du Développement et Design Web",
+    description: "Consultez notre glossaire complet des termes techniques en développement web, design UI/UX et gestion de projet digital.",
+  });
+}
 
 export default async function GlossaryPage() {
   const entries = await getAllGlossaryEntries();
diff --git a/apps/web/src/app/[locale]/glossary/tag/[tag]/page.tsx b/apps/web/src/app/[locale]/glossary/tag/[tag]/page.tsx
index 272acbc4c..158bb7034 100644
--- a/apps/web/src/app/[locale]/glossary/tag/[tag]/page.tsx
+++ b/apps/web/src/app/[locale]/glossary/tag/[tag]/page.tsx
@@ -10,12 +10,12 @@ interface TagPageProps {
   }>;
 }
 
-export async function generateMetadata({ 
-  params 
+export async function generateMetadata({
+  params
 }: TagPageProps) {
   const { tag } = await params;
   const decodedTag = decodeURIComponent(tag);
-  
+
   return constructMetadata({
     title: `Termes liés à ${decodedTag} | Glossaire`,
     description: `Découvrez tous les termes du glossaire liés à la catégorie ${decodedTag}.`,
diff --git a/apps/web/src/app/[locale]/glossary/tags/page.tsx b/apps/web/src/app/[locale]/glossary/tags/page.tsx
index 0000ad2fe..8d1dabd71 100644
--- a/apps/web/src/app/[locale]/glossary/tags/page.tsx
+++ b/apps/web/src/app/[locale]/glossary/tags/page.tsx
@@ -5,10 +5,12 @@ import { ChevronLeft, Tag as TagIcon } from "lucide-react";
 import { getAllTags } from "@/lib/glossary";
 import { constructMetadata } from "@/lib/utils/metadata";
 
-export const metadata = constructMetadata({
-  title: "Tags du glossaire",
-  description: "Explorez les différentes catégories de termes disponibles dans notre glossaire technique.",
-});
+export async function generateMetadata() {
+  return constructMetadata({
+    title: "Tags du glossaire",
+    description: "Explorez les différentes catégories de termes disponibles dans notre glossaire technique.",
+  });
+}
 
 export default async function TagsPage() {
   const tags = await getAllTags();
diff --git a/apps/web/src/app/[locale]/layout.tsx b/apps/web/src/app/[locale]/layout.tsx
index d0b6db1b0..c42f7bb25 100644
--- a/apps/web/src/app/[locale]/layout.tsx
+++ b/apps/web/src/app/[locale]/layout.tsx
@@ -35,7 +35,7 @@ export default async function LocaleLayout({ children, params }: LayoutProps) {
   const { locale } = await params;
 
   return (
-    <html lang={locale} className={cn(figtree.variable)}>
+    <html lang={locale} className={cn(figtree.variable)} data-scroll-behavior="smooth">
       <body
         className={
           "flex flex-col min-h-screen items-center bg-muted text-sm md:text-lg"
diff --git a/apps/web/src/app/[locale]/npo/page.tsx b/apps/web/src/app/[locale]/npo/page.tsx
index 258047256..77025a394 100644
--- a/apps/web/src/app/[locale]/npo/page.tsx
+++ b/apps/web/src/app/[locale]/npo/page.tsx
@@ -1,9 +1,11 @@
 import { constructMetadata } from "@/lib/utils/metadata";
 import NPOPage from "@/screens/marketing/npo";
 
-export const metadata = constructMetadata({
-  title: "onRuntime Studio - Association de créateurs numériques",
-  description: "Découvrez notre association loi 1901 dédiée à l'innovation et la créativité digitale. Une communauté dynamique de développeurs, designers et artistes numériques.",
-});
+export async function generateMetadata() {
+  return constructMetadata({
+    title: "onRuntime Studio - Association de créateurs numériques",
+    description: "Découvrez notre association loi 1901 dédiée à l'innovation et la créativité digitale. Une communauté dynamique de développeurs, designers et artistes numériques.",
+  });
+}
 
-export default NPOPage;
\ No newline at end of file
+export default NPOPage;
diff --git a/apps/web/src/app/[locale]/projects/page.tsx b/apps/web/src/app/[locale]/projects/page.tsx
index d4948dd90..829c9d663 100644
--- a/apps/web/src/app/[locale]/projects/page.tsx
+++ b/apps/web/src/app/[locale]/projects/page.tsx
@@ -1,9 +1,11 @@
 import { constructMetadata } from "@/lib/utils/metadata";
 import ProjectsPage from "@/screens/marketing/projects";
 
-export const metadata = constructMetadata({
-  title: "Portfolio de projets | Web, Mobile et Design par onRuntime Studio",
-  description: "Découvrez notre portfolio de projets en développement web, mobile et design. Des réalisations pour des clients variés et nos projets internes innovants.",
-});
+export async function generateMetadata() {
+  return constructMetadata({
+    title: "Portfolio de projets | Web, Mobile et Design par onRuntime Studio",
+    description: "Découvrez notre portfolio de projets en développement web, mobile et design. Des réalisations pour des clients variés et nos projets internes innovants.",
+  });
+}
 
-export default ProjectsPage;
\ No newline at end of file
+export default ProjectsPage;
diff --git a/apps/web/src/app/[locale]/services/[category]/[service]/page.tsx b/apps/web/src/app/[locale]/services/[category]/[service]/page.tsx
index b5d8716fb..a71f03237 100644
--- a/apps/web/src/app/[locale]/services/[category]/[service]/page.tsx
+++ b/apps/web/src/app/[locale]/services/[category]/[service]/page.tsx
@@ -18,14 +18,14 @@ type Props = {
 function findService(category: string, service: string): { categoryData: ServiceCategoryData | undefined, subService: SubService | undefined } {
   const categoryData = Services.find(s => s.id === category);
   const subService = categoryData?.subServices.find(sub => sub.id === service);
-  
+
   return { categoryData, subService };
 }
 
 export async function generateMetadata({ params }: Props) {
   const { category, service } = await params;
   const { categoryData, subService } = findService(category, service);
-  
+
   if (!categoryData || !subService) {
     return constructMetadata({
       title: "Service non trouvé",
@@ -33,7 +33,7 @@ export async function generateMetadata({ params }: Props) {
       noIndex: true,
     });
   }
-  
+
   return constructMetadata({
     title: `${subService.name} | ${categoryData.name}`,
     description: subService.description,
diff --git a/apps/web/src/app/[locale]/services/[category]/page.tsx b/apps/web/src/app/[locale]/services/[category]/page.tsx
index b0c503002..33c48f7a9 100644
--- a/apps/web/src/app/[locale]/services/[category]/page.tsx
+++ b/apps/web/src/app/[locale]/services/[category]/page.tsx
@@ -13,9 +13,8 @@ type Props = {
 
 export async function generateMetadata({ params }: Props) {
   const { category } = await params;
-
   const categoryData = Services.find(service => service.id === category);
-  
+
   if (!categoryData) {
     return constructMetadata({
       title: "Service non trouvé",
@@ -23,7 +22,7 @@ export async function generateMetadata({ params }: Props) {
       noIndex: true,
     });
   }
-  
+
   return constructMetadata({
     title: `${categoryData.name}`,
     description: categoryData.description,
diff --git a/apps/web/src/app/[locale]/services/page.tsx b/apps/web/src/app/[locale]/services/page.tsx
index 0a35564f0..4d89cf036 100644
--- a/apps/web/src/app/[locale]/services/page.tsx
+++ b/apps/web/src/app/[locale]/services/page.tsx
@@ -1,9 +1,11 @@
 import { constructMetadata } from "@/lib/utils/metadata";
 import ServicesPage from "@/screens/marketing/services";
 
-export const metadata = constructMetadata({
-  title: "Agence de services digitaux : web, mobile et design UI/UX",
-  description: "Services complets de développement web, mobile, design UI/UX et intégration CMS. Notre agence crée des solutions sur mesure qui répondent à vos objectifs.",
-});
+export async function generateMetadata() {
+  return constructMetadata({
+    title: "Agence de services digitaux : web, mobile et design UI/UX",
+    description: "Services complets de développement web, mobile, design UI/UX et intégration CMS. Notre agence crée des solutions sur mesure qui répondent à vos objectifs.",
+  });
+}
 
 export default ServicesPage;
diff --git a/apps/web/src/components/custom-mdx.tsx b/apps/web/src/components/custom-mdx.tsx
index f22ca5449..63e06ac64 100644
--- a/apps/web/src/components/custom-mdx.tsx
+++ b/apps/web/src/components/custom-mdx.tsx
@@ -1,5 +1,5 @@
 import React from "react"
-import Link from "next/link"
+import { Link } from "@onruntime/translations/next"
 
 const components = {
   h1: (props: React.HTMLProps<HTMLHeadingElement>) => (
diff --git a/apps/web/src/components/glossary/entry-page.tsx b/apps/web/src/components/glossary/entry-page.tsx
index 5a186e9cc..2a1b33e16 100644
--- a/apps/web/src/components/glossary/entry-page.tsx
+++ b/apps/web/src/components/glossary/entry-page.tsx
@@ -2,7 +2,7 @@ import React from 'react'
 import { Button } from "@/components/ui/button"
 import { Badge } from "@/components/ui/badge"
 import { ChevronLeft, Tag as TagIcon } from "lucide-react"
-import Link from "next/link"
+import { Link } from "@onruntime/translations/next"
 import { GlossaryEntry } from '@/types/glossary'
 
 interface GlossaryEntryPageProps {
diff --git a/apps/web/src/components/layout/footer/footer.tsx b/apps/web/src/components/layout/footer/footer.tsx
index dcf796e0b..29058a97d 100644
--- a/apps/web/src/components/layout/footer/footer.tsx
+++ b/apps/web/src/components/layout/footer/footer.tsx
@@ -1,14 +1,23 @@
 "use client";
 
-import Link from "next/link";
+import { Link } from "@onruntime/translations/next";
 
-import { useTranslation } from "@onruntime/translations/react";
+import { useTranslation, useLocale } from "@onruntime/translations/react";
 
 import Routes from "@/constants/routes";
 import { OnRuntimeWordMark } from "@/logos/components";
+import { ChevronDown, Check } from "lucide-react";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
+import { Button } from "@/components/ui/button";
 
 const Footer = () => {
   const { t } = useTranslation("layout/footer");
+  const { locale, locales, setLocale } = useLocale();
   const currentYear = new Date().getFullYear();
 
   const navigation = {
@@ -86,30 +95,57 @@ const Footer = () => {
 
         <div className="h-px bg-border w-full my-8" />
 
-        <div className="flex flex-col-reverse md:flex-row justify-between items-center gap-2">
+        <div className="flex flex-col-reverse md:flex-row justify-between items-center gap-4">
           <p>{`© onRuntime Studio, ${currentYear}`}</p>
 
-          <p className="inline-flex gap-2">
-            <svg
-              width="14"
-              height="15"
-              viewBox="0 0 14 15"
-              fill="none"
-              xmlns="http://www.w3.org/2000/svg"
-            >
-              <path
-                d="M7 10.9746C8.65685 10.9746 10 9.63146 10 7.97461C10 6.31776 8.65685 4.97461 7 4.97461C5.34315 4.97461 4 6.31776 4 7.97461C4 9.63146 5.34315 10.9746 7 10.9746Z"
-                fill="#2294FF"
-              />
-              <path
-                d="M7 11.9746C9.20914 11.9746 11 10.1837 11 7.97461C11 5.76547 9.20914 3.97461 7 3.97461C4.79086 3.97461 3 5.76547 3 7.97461C3 10.1837 4.79086 11.9746 7 11.9746Z"
-                stroke="#2294FF"
-                strokeOpacity="0.15"
-                strokeWidth="4"
-              />
-            </svg>
-            {t("status")}
-          </p>
+          <div className="flex items-center gap-4">
+            <DropdownMenu>
+              <DropdownMenuTrigger asChild>
+                <Button variant="outline" size="sm" className="h-8 text-xs gap-2">
+                  {t(`language.${locale}`)}
+                  <ChevronDown className="h-3 w-3 opacity-50" />
+                </Button>
+              </DropdownMenuTrigger>
+              <DropdownMenuContent align="end">
+                {locales.map((loc) => (
+                  <DropdownMenuItem
+                    key={loc}
+                    onClick={() => setLocale(loc)}
+                    className="text-xs gap-2 cursor-pointer"
+                  >
+                    {locale === loc ? (
+                      <Check className="h-3 w-3" />
+                    ) : (
+                      <span className="h-3 w-3" />
+                    )}
+                    {t(`language.${loc}`)}
+                  </DropdownMenuItem>
+                ))}
+              </DropdownMenuContent>
+            </DropdownMenu>
+
+            <p className="inline-flex gap-2">
+              <svg
+                width="14"
+                height="15"
+                viewBox="0 0 14 15"
+                fill="none"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  d="M7 10.9746C8.65685 10.9746 10 9.63146 10 7.97461C10 6.31776 8.65685 4.97461 7 4.97461C5.34315 4.97461 4 6.31776 4 7.97461C4 9.63146 5.34315 10.9746 7 10.9746Z"
+                  fill="#2294FF"
+                />
+                <path
+                  d="M7 11.9746C9.20914 11.9746 11 10.1837 11 7.97461C11 5.76547 9.20914 3.97461 7 3.97461C4.79086 3.97461 3 5.76547 3 7.97461C3 10.1837 4.79086 11.9746 7 11.9746Z"
+                  stroke="#2294FF"
+                  strokeOpacity="0.15"
+                  strokeWidth="4"
+                />
+              </svg>
+              {t("status")}
+            </p>
+          </div>
         </div>
       </div>
     </footer>
diff --git a/apps/web/src/components/marketing/landing/customer/featured/index.tsx b/apps/web/src/components/marketing/landing/customer/featured/index.tsx
index f2373147d..2effdb248 100644
--- a/apps/web/src/components/marketing/landing/customer/featured/index.tsx
+++ b/apps/web/src/components/marketing/landing/customer/featured/index.tsx
@@ -3,7 +3,7 @@ import DotPattern from "@/components/ui/dot-pattern";
 import Safari from "@/components/ui/safari";
 import Routes from "@/constants/routes";
 import { cn } from "@/lib/utils";
-import Link from "next/link";
+import { Link } from "@onruntime/translations/next";
 import React from "react";
 import Balancer from "react-wrap-balancer";
 
diff --git a/apps/web/src/components/marketing/landing/page-switcher/index.tsx b/apps/web/src/components/marketing/landing/page-switcher/index.tsx
index 7e28ef5fd..e326dc09d 100644
--- a/apps/web/src/components/marketing/landing/page-switcher/index.tsx
+++ b/apps/web/src/components/marketing/landing/page-switcher/index.tsx
@@ -2,30 +2,31 @@
 
 import { Tabs, TabsList, TabsTrigger } from "@/components/ui/tabs";
 import Routes from "@/constants/routes";
-import Link from "next/link";
-import { usePathname } from "next/navigation";
+import { Link, usePathname } from "@onruntime/translations/next";
 import React from "react";
 
 const PageSwitcher: React.FC = () => {
   const pathname = usePathname();
 
   return (
-    <div className="w-full fixed bottom-6 select-none">
+    <div className="w-full fixed bottom-6 select-none pointer-events-none">
       <Tabs
-        defaultValue=""
-        value={pathname.replace("/", "")}
+        defaultValue={Routes.landing.visitor}
+        value={pathname}
         className="w-fit mx-auto"
       >
-        <TabsList className="grid w-full grid-cols-2 bg-background/50 shadow-xs backdrop-blur-2xl">
-          <Link href={Routes.landing.customer} scroll={false}>
-            <TabsTrigger value="customer">
+        <TabsList className="grid w-full grid-cols-2 bg-background/50 shadow-xs backdrop-blur-2xl pointer-events-auto">
+          <TabsTrigger value={Routes.landing.customer} className="w-full" asChild>
+            <Link href={Routes.landing.customer} scroll={false}>
               Je suis un potentiel client
-            </TabsTrigger>
-          </Link>
+            </Link>
+          </TabsTrigger>
 
-          <Link href={Routes.landing.visitor} scroll={false}>
-            <TabsTrigger value="">Je suis un simple visiteur</TabsTrigger>
-          </Link>
+          <TabsTrigger value={Routes.landing.visitor} className="w-full" asChild>
+            <Link href={Routes.landing.visitor} scroll={false}>
+              Je suis un simple visiteur
+            </Link>
+          </TabsTrigger>
         </TabsList>
       </Tabs>
     </div>
diff --git a/apps/web/src/components/marketing/landing/visitor/featured/index.tsx b/apps/web/src/components/marketing/landing/visitor/featured/index.tsx
index 694f4c56f..fe15f9c67 100644
--- a/apps/web/src/components/marketing/landing/visitor/featured/index.tsx
+++ b/apps/web/src/components/marketing/landing/visitor/featured/index.tsx
@@ -7,7 +7,7 @@ import Partners from "./partners";
 import { OnRuntimeWordMark } from "@/logos/components";
 import Balancer from "react-wrap-balancer";
 import Routes from "@/constants/routes";
-import Link from "next/link";
+import { Link } from "@onruntime/translations/next";
 
 const Featured: React.FC = () => {
   return (
diff --git a/apps/web/src/components/marketing/landing/visitor/projects/card/index.tsx b/apps/web/src/components/marketing/landing/visitor/projects/card/index.tsx
index 26c080fc3..42cd37468 100644
--- a/apps/web/src/components/marketing/landing/visitor/projects/card/index.tsx
+++ b/apps/web/src/components/marketing/landing/visitor/projects/card/index.tsx
@@ -3,7 +3,7 @@ import { Badge } from "@/components/ui/badge";
 import Routes from "@/constants/routes";
 import { Project, Tag } from "@/types/project";
 import Image from "next/image";
-import Link from "next/link";
+import { Link } from "@onruntime/translations/next";
 import React from "react";
 
 export type ProjectCardProps = {
diff --git a/apps/web/src/components/marketing/landing/visitor/projects/index.tsx b/apps/web/src/components/marketing/landing/visitor/projects/index.tsx
index 238ef6451..71720065a 100644
--- a/apps/web/src/components/marketing/landing/visitor/projects/index.tsx
+++ b/apps/web/src/components/marketing/landing/visitor/projects/index.tsx
@@ -3,7 +3,7 @@ import { Button } from "@/components/ui/button";
 import { default as ProjectsConst } from "@/constants/projects";
 import React from "react";
 import ProjectCard from "./card";
-import Link from "next/link";
+import { Link } from "@onruntime/translations/next";
 import Routes from "@/constants/routes";
 
 const Projects: React.FC = () => {
diff --git a/apps/web/src/components/marketing/landing/visitor/team/index.tsx b/apps/web/src/components/marketing/landing/visitor/team/index.tsx
index 0be6d9092..724d9272b 100644
--- a/apps/web/src/components/marketing/landing/visitor/team/index.tsx
+++ b/apps/web/src/components/marketing/landing/visitor/team/index.tsx
@@ -1,6 +1,6 @@
 import { Button } from "@/components/ui/button";
 import Routes from "@/constants/routes";
-import Link from "next/link";
+import { Link } from "@onruntime/translations/next";
 import React from "react";
 import TeamGrid from "./grid";
 
diff --git a/apps/web/src/components/marketing/legal/page.tsx b/apps/web/src/components/marketing/legal/page.tsx
index 1314b4878..ab423c6ee 100644
--- a/apps/web/src/components/marketing/legal/page.tsx
+++ b/apps/web/src/components/marketing/legal/page.tsx
@@ -3,7 +3,7 @@ import { Button } from "@/components/ui/button"
 import DotPattern from "@/components/ui/dot-pattern"
 import { cn } from "@/lib/utils"
 import { Mail } from 'lucide-react'
-import Link from "next/link"
+import { Link } from "@onruntime/translations/next"
 import Routes from '@/constants/routes'
 
 interface LegalPageProps {
diff --git a/apps/web/src/components/marketing/navbar/index.tsx b/apps/web/src/components/marketing/navbar/index.tsx
index d3c2eb511..3d81d7021 100644
--- a/apps/web/src/components/marketing/navbar/index.tsx
+++ b/apps/web/src/components/marketing/navbar/index.tsx
@@ -1,6 +1,6 @@
 "use client";
 
-import Link from "next/link";
+import { Link } from "@onruntime/translations/next";
 import type React from "react";
 import { useState, useRef, useEffect } from "react";
 import { ChevronDown, Menu } from "lucide-react";
diff --git a/apps/web/src/components/marketing/navbar/navigation/agencies/index.tsx b/apps/web/src/components/marketing/navbar/navigation/agencies/index.tsx
index 2299db0f3..d4733e6fa 100644
--- a/apps/web/src/components/marketing/navbar/navigation/agencies/index.tsx
+++ b/apps/web/src/components/marketing/navbar/navigation/agencies/index.tsx
@@ -10,7 +10,7 @@ import Routes from "@/constants/routes";
 import { getMajorAgencies } from "@/constants/agencies";
 import { ArrowRight, MapPin } from "lucide-react";
 import React from "react";
-import Link from "next/link";
+import { Link } from "@onruntime/translations/next";
 import { cn } from "@/lib/utils";
 
 import { useTranslation } from "@onruntime/translations/react";
diff --git a/apps/web/src/components/marketing/navbar/navigation/index.tsx b/apps/web/src/components/marketing/navbar/navigation/index.tsx
index 863d43c7b..e3d277cae 100644
--- a/apps/web/src/components/marketing/navbar/navigation/index.tsx
+++ b/apps/web/src/components/marketing/navbar/navigation/index.tsx
@@ -8,7 +8,7 @@ import {
   navigationMenuTriggerStyle,
 } from "@/components/ui/navigation-menu";
 import Routes from "@/constants/routes";
-import Link from "next/link";
+import { Link } from "@onruntime/translations/next";
 import React from "react";
 
 import { useTranslation } from "@onruntime/translations/react";
diff --git a/apps/web/src/components/marketing/navbar/navigation/projects/index.tsx b/apps/web/src/components/marketing/navbar/navigation/projects/index.tsx
index 740bb0240..42837c95c 100644
--- a/apps/web/src/components/marketing/navbar/navigation/projects/index.tsx
+++ b/apps/web/src/components/marketing/navbar/navigation/projects/index.tsx
@@ -10,7 +10,7 @@ import Projects from "@/constants/projects";
 import Routes from "@/constants/routes";
 import { ArrowRight, Code, Eye, Github, Rocket } from "lucide-react";
 import React from "react";
-import Link from "next/link";
+import { Link } from "@onruntime/translations/next";
 import Image from "next/image";
 import { Tag } from "@/types/project";
 
diff --git a/apps/web/src/components/marketing/navbar/navigation/services/index.tsx b/apps/web/src/components/marketing/navbar/navigation/services/index.tsx
index 2838429cd..64ed29b5e 100644
--- a/apps/web/src/components/marketing/navbar/navigation/services/index.tsx
+++ b/apps/web/src/components/marketing/navbar/navigation/services/index.tsx
@@ -11,7 +11,7 @@ import Routes from "@/constants/routes";
 import { cn } from "@/lib/utils";
 import { ArrowRight, LucideIcon } from "lucide-react";
 import React from "react";
-import Link from "next/link";
+import { Link } from "@onruntime/translations/next";
 
 import { useTranslation } from "@onruntime/translations/react";
 
diff --git a/apps/web/src/components/marketing/projects/sections/index.tsx b/apps/web/src/components/marketing/projects/sections/index.tsx
index 2d5c9a708..89f1ea62b 100644
--- a/apps/web/src/components/marketing/projects/sections/index.tsx
+++ b/apps/web/src/components/marketing/projects/sections/index.tsx
@@ -6,7 +6,7 @@ import Projects from "@/constants/projects";
 import { Tag } from "@/types/project";
 import ProjectCard from "@/components/marketing/landing/visitor/projects/card";
 import Image from "next/image";
-import Link from "next/link";
+import { Link } from "@onruntime/translations/next";
 import { Button } from "@/components/ui/button";
 import { ArrowRight } from "lucide-react";
 import Routes from "@/constants/routes";
diff --git a/apps/web/src/components/marketing/services/sections/index.tsx b/apps/web/src/components/marketing/services/sections/index.tsx
index 33d5a4588..312a2f30c 100644
--- a/apps/web/src/components/marketing/services/sections/index.tsx
+++ b/apps/web/src/components/marketing/services/sections/index.tsx
@@ -1,7 +1,7 @@
 import React from "react";
 import { Button } from "@/components/ui/button";
 import { VelocityScroll } from "@/components/ui/scroll-based-velocity";
-import Link from "next/link";
+import { Link } from "@onruntime/translations/next";
 import { ArrowRight, GitPullRequestArrow, Timer, Users } from "lucide-react";
 import Image from "next/image";
 
diff --git a/apps/web/src/components/marketing/services/service-layout.tsx b/apps/web/src/components/marketing/services/service-layout.tsx
index 75ec0c865..178533d49 100644
--- a/apps/web/src/components/marketing/services/service-layout.tsx
+++ b/apps/web/src/components/marketing/services/service-layout.tsx
@@ -3,7 +3,7 @@ import { Button } from "@/components/ui/button";
 import DotPattern from "@/components/ui/dot-pattern";
 import { cn } from "@/lib/utils";
 import { ArrowRight } from "lucide-react";
-import Link from "next/link";
+import { Link } from "@onruntime/translations/next";
 import Routes from "@/constants/routes";
 
 interface ServiceLayoutProps {
diff --git a/apps/web/src/components/marketing/services/service-overview.tsx b/apps/web/src/components/marketing/services/service-overview.tsx
index f7110c608..ec6c08c16 100644
--- a/apps/web/src/components/marketing/services/service-overview.tsx
+++ b/apps/web/src/components/marketing/services/service-overview.tsx
@@ -3,7 +3,7 @@ import { Button } from "@/components/ui/button";
 import DotPattern from "@/components/ui/dot-pattern";
 import { cn } from "@/lib/utils";
 import { ArrowRight } from "lucide-react";
-import Link from "next/link";
+import { Link } from "@onruntime/translations/next";
 import Routes from "@/constants/routes";
 import { ServiceBenefit, ServiceCategoryData, ServiceProcessStep } from '@/types/service';
 import { Badge } from '@/components/ui/badge';
diff --git a/apps/web/src/components/ui/dropdown-menu.tsx b/apps/web/src/components/ui/dropdown-menu.tsx
new file mode 100644
index 000000000..7f71b7724
--- /dev/null
+++ b/apps/web/src/components/ui/dropdown-menu.tsx
@@ -0,0 +1,201 @@
+"use client"
+
+import * as React from "react"
+import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu"
+import { Check, ChevronRight, Circle } from "lucide-react"
+
+import { cn } from "@/lib/utils/index"
+
+const DropdownMenu = DropdownMenuPrimitive.Root
+
+const DropdownMenuTrigger = DropdownMenuPrimitive.Trigger
+
+const DropdownMenuGroup = DropdownMenuPrimitive.Group
+
+const DropdownMenuPortal = DropdownMenuPrimitive.Portal
+
+const DropdownMenuSub = DropdownMenuPrimitive.Sub
+
+const DropdownMenuRadioGroup = DropdownMenuPrimitive.RadioGroup
+
+const DropdownMenuSubTrigger = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.SubTrigger>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubTrigger> & {
+    inset?: boolean
+  }
+>(({ className, inset, children, ...props }, ref) => (
+  <DropdownMenuPrimitive.SubTrigger
+    ref={ref}
+    className={cn(
+      "flex cursor-default select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent data-[state=open]:bg-accent [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
+      inset && "pl-8",
+      className
+    )}
+    {...props}
+  >
+    {children}
+    <ChevronRight className="ml-auto" />
+  </DropdownMenuPrimitive.SubTrigger>
+))
+DropdownMenuSubTrigger.displayName =
+  DropdownMenuPrimitive.SubTrigger.displayName
+
+const DropdownMenuSubContent = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.SubContent>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubContent>
+>(({ className, ...props }, ref) => (
+  <DropdownMenuPrimitive.SubContent
+    ref={ref}
+    className={cn(
+      "z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 origin-[--radix-dropdown-menu-content-transform-origin]",
+      className
+    )}
+    {...props}
+  />
+))
+DropdownMenuSubContent.displayName =
+  DropdownMenuPrimitive.SubContent.displayName
+
+const DropdownMenuContent = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Content>
+>(({ className, sideOffset = 4, ...props }, ref) => (
+  <DropdownMenuPrimitive.Portal>
+    <DropdownMenuPrimitive.Content
+      ref={ref}
+      sideOffset={sideOffset}
+      className={cn(
+        "z-50 max-h-[var(--radix-dropdown-menu-content-available-height)] min-w-[8rem] overflow-y-auto overflow-x-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md",
+        "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 origin-[--radix-dropdown-menu-content-transform-origin]",
+        className
+      )}
+      {...props}
+    />
+  </DropdownMenuPrimitive.Portal>
+))
+DropdownMenuContent.displayName = DropdownMenuPrimitive.Content.displayName
+
+const DropdownMenuItem = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.Item>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Item> & {
+    inset?: boolean
+  }
+>(({ className, inset, ...props }, ref) => (
+  <DropdownMenuPrimitive.Item
+    ref={ref}
+    className={cn(
+      "relative flex cursor-default select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&>svg]:size-4 [&>svg]:shrink-0",
+      inset && "pl-8",
+      className
+    )}
+    {...props}
+  />
+))
+DropdownMenuItem.displayName = DropdownMenuPrimitive.Item.displayName
+
+const DropdownMenuCheckboxItem = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.CheckboxItem>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.CheckboxItem>
+>(({ className, children, checked, ...props }, ref) => (
+  <DropdownMenuPrimitive.CheckboxItem
+    ref={ref}
+    className={cn(
+      "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      className
+    )}
+    checked={checked}
+    {...props}
+  >
+    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+      <DropdownMenuPrimitive.ItemIndicator>
+        <Check className="h-4 w-4" />
+      </DropdownMenuPrimitive.ItemIndicator>
+    </span>
+    {children}
+  </DropdownMenuPrimitive.CheckboxItem>
+))
+DropdownMenuCheckboxItem.displayName =
+  DropdownMenuPrimitive.CheckboxItem.displayName
+
+const DropdownMenuRadioItem = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.RadioItem>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.RadioItem>
+>(({ className, children, ...props }, ref) => (
+  <DropdownMenuPrimitive.RadioItem
+    ref={ref}
+    className={cn(
+      "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      className
+    )}
+    {...props}
+  >
+    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+      <DropdownMenuPrimitive.ItemIndicator>
+        <Circle className="h-2 w-2 fill-current" />
+      </DropdownMenuPrimitive.ItemIndicator>
+    </span>
+    {children}
+  </DropdownMenuPrimitive.RadioItem>
+))
+DropdownMenuRadioItem.displayName = DropdownMenuPrimitive.RadioItem.displayName
+
+const DropdownMenuLabel = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.Label>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Label> & {
+    inset?: boolean
+  }
+>(({ className, inset, ...props }, ref) => (
+  <DropdownMenuPrimitive.Label
+    ref={ref}
+    className={cn(
+      "px-2 py-1.5 text-sm font-semibold",
+      inset && "pl-8",
+      className
+    )}
+    {...props}
+  />
+))
+DropdownMenuLabel.displayName = DropdownMenuPrimitive.Label.displayName
+
+const DropdownMenuSeparator = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.Separator>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Separator>
+>(({ className, ...props }, ref) => (
+  <DropdownMenuPrimitive.Separator
+    ref={ref}
+    className={cn("-mx-1 my-1 h-px bg-muted", className)}
+    {...props}
+  />
+))
+DropdownMenuSeparator.displayName = DropdownMenuPrimitive.Separator.displayName
+
+const DropdownMenuShortcut = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLSpanElement>) => {
+  return (
+    <span
+      className={cn("ml-auto text-xs tracking-widest opacity-60", className)}
+      {...props}
+    />
+  )
+}
+DropdownMenuShortcut.displayName = "DropdownMenuShortcut"
+
+export {
+  DropdownMenu,
+  DropdownMenuTrigger,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuCheckboxItem,
+  DropdownMenuRadioItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuShortcut,
+  DropdownMenuGroup,
+  DropdownMenuPortal,
+  DropdownMenuSub,
+  DropdownMenuSubContent,
+  DropdownMenuSubTrigger,
+  DropdownMenuRadioGroup,
+}
diff --git a/apps/web/src/lib/utils/metadata.ts b/apps/web/src/lib/utils/metadata.ts
index 03e2d95d7..a9c4252c2 100644
--- a/apps/web/src/lib/utils/metadata.ts
+++ b/apps/web/src/lib/utils/metadata.ts
@@ -1,9 +1,13 @@
 import { Metadata } from "next";
+import { headers } from "next/headers";
+
+import { env } from "@/../env";
+import { locales } from "@/lib/translations";
 
 export const siteConfig = {
   name: "onRuntime Studio",
   description: "Agence digitale spécialisée en développement web, mobile et design UI/UX. Notre équipe d'experts transforme vos idées en solutions digitales performantes.",
-  url: process.env.NEXT_PUBLIC_APP_URL || "https://onruntime.com",
+  url: env.NEXT_PUBLIC_APP_URL || "https://onruntime.com",
   ogImage: "/og.jpg", 
   links: {
     discord: "https://discord.gg/ucX9c5yXmX",
@@ -34,14 +38,13 @@ export function getOGImageUrl({
   return `${siteConfig.url}/api/og?${params.toString()}`;
 }
 
-export function constructMetadata({
+export async function constructMetadata({
   title = siteConfig.name,
   description = siteConfig.description,
   ogType = "website",
   ogImage,
   ogImageType = "default",
   noIndex = false,
-  canonical,
 }: {
   title?: string;
   description?: string;
@@ -49,11 +52,12 @@ export function constructMetadata({
   ogImage?: string;
   ogImageType?: OGImageType;
   noIndex?: boolean;
-  canonical?: string;
-} = {}): Metadata {
+} = {}): Promise<Metadata> {
+  const canonical = await generateCanonical();
+
   // Titre avec format cohérent
-  const formattedTitle = title === siteConfig.name 
-    ? title 
+  const formattedTitle = title === siteConfig.name
+    ? title
     : `${title} | ${siteConfig.name}`;
 
   const finalOgImage = ogImage || getOGImageUrl({
@@ -61,27 +65,25 @@ export function constructMetadata({
     description,
     type: ogImageType,
   });
-  
+
   return {
     title: formattedTitle,
     description,
-    
+
     metadataBase: new URL(siteConfig.url),
-    
-    ...(canonical && { 
-      alternates: { 
-        canonical 
-      }
-    }),
-    
+
+    alternates: {
+      canonical,
+    },
+
     authors: [{ name: "onRuntime Studio", url: siteConfig.url }],
     creator: "onRuntime Studio",
     publisher: "onRuntime Studio",
-    
+
     openGraph: {
       type: ogType,
       locale: "fr_FR",
-      url: canonical || siteConfig.url,
+      url: canonical,
       title: formattedTitle,
       description,
       siteName: siteConfig.name,
@@ -94,7 +96,7 @@ export function constructMetadata({
         },
       ],
     },
-    
+
     twitter: {
       card: "summary_large_image",
       title: formattedTitle,
@@ -103,7 +105,7 @@ export function constructMetadata({
       creator: "@onruntime",
       site: "@onruntime",
     },
-    
+
     icons: {
       icon: [
         { url: "/favicon.ico" },
@@ -113,9 +115,9 @@ export function constructMetadata({
         { url: "/apple-touch-icon.png" },
       ],
     },
-    
+
     manifest: "/site.webmanifest",
-    
+
     ...(noIndex && {
       robots: {
         index: false,
@@ -123,4 +125,38 @@ export function constructMetadata({
       },
     }),
   };
+}
+
+/**
+ * Generate a canonical URL automatically from the current request
+ * @returns The full canonical URL for the current page (without locale prefix)
+ */
+export async function generateCanonical(): Promise<string> {
+  const headersList = await headers();
+  const serverUrl = siteConfig.url;
+
+  // Try to get the pathname from various headers
+  const pathname =
+    headersList.get("x-pathname") ||
+    headersList.get("x-invoke-path") ||
+    headersList.get("referer")?.replace(serverUrl, "") ||
+    "/";
+
+  // Clean up the pathname
+  const cleanPath = pathname.split("?")[0] || "/"; // Remove query params
+  const normalizedPath = cleanPath.startsWith("/") ? cleanPath : `/${cleanPath}`;
+
+  // Remove locale prefix from path
+  const segments = normalizedPath.split("/").filter(Boolean);
+  const hasLocalePrefix = locales.includes(segments[0]);
+  const pathWithoutLocale = hasLocalePrefix
+    ? `/${segments.slice(1).join("/")}`
+    : normalizedPath;
+
+  // Combine and clean up double slashes
+  const canonical = `${serverUrl}${pathWithoutLocale}`
+    .replace(/([^:]\/)\/+/g, "$1") // Remove double slashes except after protocol
+    .replace(/\/$/, ""); // Remove trailing slash
+
+  return canonical || serverUrl;
 }
\ No newline at end of file
diff --git a/apps/web/src/locales/README.md b/apps/web/src/locales/README.md
index c1d2bb150..92c1bad7b 100644
--- a/apps/web/src/locales/README.md
+++ b/apps/web/src/locales/README.md
@@ -100,3 +100,4 @@ export default async function ProjectPage({ params }: { params: Promise<{ id: st
 - Keep keys in English: `greeting`, not `salutation`
 - Use interpolation for dynamic values: `"Hello, {name}!"`
 - HTML is supported with `dangerouslySetInnerHTML`: `"Visit <strong>Paris</strong>"`
+- Avoid title case in translations: `"Our services"` (not `"Our Services"`)
diff --git a/apps/web/src/locales/en/layout/footer.json b/apps/web/src/locales/en/layout/footer.json
index 946ef55e4..b636a3108 100644
--- a/apps/web/src/locales/en/layout/footer.json
+++ b/apps/web/src/locales/en/layout/footer.json
@@ -5,7 +5,7 @@
     "navigation": "Navigation",
     "resources": "Resources",
     "other": "Other",
-    "social": "Social Media"
+    "social": "Social media"
   },
   "links": {
     "services": "Our services",
@@ -21,5 +21,10 @@
     "privacy": "Privacy policy",
     "company": "Company details"
   },
-  "status": "All services are operational"
+  "status": "All services are operational",
+  "language": {
+    "label": "Language",
+    "en": "English",
+    "fr": "Français"
+  }
 }
diff --git a/apps/web/src/locales/en/layout/navbar.json b/apps/web/src/locales/en/layout/navbar.json
index 4e6271de3..6ed155471 100644
--- a/apps/web/src/locales/en/layout/navbar.json
+++ b/apps/web/src/locales/en/layout/navbar.json
@@ -15,9 +15,9 @@
     "title": "Our portfolio",
     "description": "Discover all our projects and achievements across various sectors",
     "categories": {
-      "web-mobile": "Web & Mobile Apps",
-      "open-source": "Open Source Projects",
-      "design": "UI/UX Design"
+      "web-mobile": "Web & mobile apps",
+      "open-source": "Open source projects",
+      "design": "UI/UX design"
     },
     "cta": "View all projects"
   },
diff --git a/apps/web/src/locales/fr/layout/footer.json b/apps/web/src/locales/fr/layout/footer.json
index 1596a2171..0161ecff7 100644
--- a/apps/web/src/locales/fr/layout/footer.json
+++ b/apps/web/src/locales/fr/layout/footer.json
@@ -21,5 +21,10 @@
     "privacy": "Politique de confidentialité",
     "company": "Détails de l'entreprise"
   },
-  "status": "Tous les services sont opérationnels"
+  "status": "Tous les services sont opérationnels",
+  "language": {
+    "label": "Langue",
+    "en": "English",
+    "fr": "Français"
+  }
 }
diff --git a/apps/web/src/mdx-components.tsx b/apps/web/src/mdx-components.tsx
index 06ebdaea3..03a0e352f 100644
--- a/apps/web/src/mdx-components.tsx
+++ b/apps/web/src/mdx-components.tsx
@@ -1,5 +1,5 @@
 import type { MDXComponents } from "mdx/types"
-import Link from "next/link"
+import { Link } from "@onruntime/translations/next"
 
 export function useMDXComponents(components: MDXComponents): MDXComponents {
   return {
diff --git a/apps/web/src/proxy.ts b/apps/web/src/proxy.ts
index ec93d425f..f4f2d83ee 100644
--- a/apps/web/src/proxy.ts
+++ b/apps/web/src/proxy.ts
@@ -3,7 +3,16 @@ import type { NextRequest } from "next/server";
 
 import { locales, defaultLocale } from "@/lib/translations";
 
+const LOCALE_COOKIE = "NEXT_LOCALE";
+
 function getPreferredLocale(request: NextRequest): string {
+  // Check cookie first (user's explicit choice)
+  const cookieLocale = request.cookies.get(LOCALE_COOKIE)?.value;
+  if (cookieLocale && locales.includes(cookieLocale)) {
+    return cookieLocale;
+  }
+
+  // Fall back to Accept-Language header
   const acceptLanguage = request.headers.get("accept-language");
   if (!acceptLanguage) return defaultLocale;
 
diff --git a/apps/web/src/screens/marketing/careers/index.tsx b/apps/web/src/screens/marketing/careers/index.tsx
index 4ef56b87f..385b8903a 100644
--- a/apps/web/src/screens/marketing/careers/index.tsx
+++ b/apps/web/src/screens/marketing/careers/index.tsx
@@ -15,7 +15,7 @@ import {
   Search,
   Users,
 } from "lucide-react";
-import Link from "next/link";
+import { Link } from "@onruntime/translations/next";
 import Routes from "@/constants/routes";
 import JobList from "./job-list";
 import { JobPosting } from "@/types/job";
diff --git a/apps/web/src/screens/marketing/careers/job-details.tsx b/apps/web/src/screens/marketing/careers/job-details.tsx
index cd3ef4cb2..d0f784374 100644
--- a/apps/web/src/screens/marketing/careers/job-details.tsx
+++ b/apps/web/src/screens/marketing/careers/job-details.tsx
@@ -15,7 +15,7 @@ import {
   MapPin,
   Share2,
 } from "lucide-react";
-import Link from "next/link";
+import { Link } from "@onruntime/translations/next";
 import DotPattern from "@/components/ui/dot-pattern";
 import { cn } from "@/lib/utils";
 import JobContent from "@/components/ui/job-content";
diff --git a/apps/web/src/screens/marketing/careers/job-list.tsx b/apps/web/src/screens/marketing/careers/job-list.tsx
index d8ae08a3b..febb00359 100644
--- a/apps/web/src/screens/marketing/careers/job-list.tsx
+++ b/apps/web/src/screens/marketing/careers/job-list.tsx
@@ -3,7 +3,7 @@ import { JobPosting } from "@/types/job";
 import { Badge } from "@/components/ui/badge";
 import { CalendarDays, Clock, MapPin } from "lucide-react";
 import { Button } from "@/components/ui/button";
-import Link from "next/link";
+import { Link } from "@onruntime/translations/next";
 import { formatDate } from "@/lib/utils/date";
 
 interface JobListProps {
diff --git a/apps/web/src/screens/marketing/npo/index.tsx b/apps/web/src/screens/marketing/npo/index.tsx
index 28b829a1c..8013f6a13 100644
--- a/apps/web/src/screens/marketing/npo/index.tsx
+++ b/apps/web/src/screens/marketing/npo/index.tsx
@@ -17,7 +17,7 @@ import {
   Users,
 } from "lucide-react";
 import Image from "next/image";
-import Link from "next/link";
+import { Link } from "@onruntime/translations/next";
 import Routes from "@/constants/routes";
 import { OrganizationSchema } from "@/components/json-ld/organization-schema";
 import { roleToDisplay, TeamRole } from "@/types/team-member";
diff --git a/apps/web/src/screens/marketing/projects/details/index.tsx b/apps/web/src/screens/marketing/projects/details/index.tsx
index d9c06ce53..b7c129290 100644
--- a/apps/web/src/screens/marketing/projects/details/index.tsx
+++ b/apps/web/src/screens/marketing/projects/details/index.tsx
@@ -4,7 +4,7 @@ import DotPattern from "@/components/ui/dot-pattern";
 import { cn } from "@/lib/utils";
 import Safari from "@/components/ui/safari";
 import { Button } from "@/components/ui/button";
-import Link from "next/link";
+import { Link } from "@onruntime/translations/next";
 import Image from "next/image";
 import { Badge } from "@/components/ui/badge";
 import {
diff --git a/apps/web/src/screens/marketing/services/index.tsx b/apps/web/src/screens/marketing/services/index.tsx
index dc6c4266f..08ee3db3d 100644
--- a/apps/web/src/screens/marketing/services/index.tsx
+++ b/apps/web/src/screens/marketing/services/index.tsx
@@ -3,7 +3,7 @@ import { Button } from "@/components/ui/button";
 import DotPattern from "@/components/ui/dot-pattern";
 import { cn } from "@/lib/utils";
 import { ArrowRight, LucideIcon } from "lucide-react";
-import Link from "next/link";
+import { Link } from "@onruntime/translations/next";
 import Routes from "@/constants/routes";
 import Services from "@/constants/services";
 import ProjectTimeline from './timeline';
diff --git a/examples/translations/next-app/proxy.ts b/examples/translations/next-app/proxy.ts
index 6d4e25f79..79801dab4 100644
--- a/examples/translations/next-app/proxy.ts
+++ b/examples/translations/next-app/proxy.ts
@@ -3,7 +3,16 @@ import type { NextRequest } from "next/server";
 
 import { locales, defaultLocale } from "@/lib/translations";
 
+const LOCALE_COOKIE = "NEXT_LOCALE";
+
 function getPreferredLocale(request: NextRequest): string {
+  // Check cookie first (user's explicit choice)
+  const cookieLocale = request.cookies.get(LOCALE_COOKIE)?.value;
+  if (cookieLocale && locales.includes(cookieLocale)) {
+    return cookieLocale;
+  }
+
+  // Fall back to Accept-Language header
   const acceptLanguage = request.headers.get("accept-language");
   if (!acceptLanguage) return defaultLocale;
 
diff --git a/packages/translations/README.md b/packages/translations/README.md
index 843b1d243..bff195fda 100644
--- a/packages/translations/README.md
+++ b/packages/translations/README.md
@@ -58,7 +58,7 @@ export const getTranslation = async (namespace = "common") => {
 
 #### 2. Setup proxy
 
-The proxy detects the user's language from `Accept-Language` header and sets an `x-locale` header for server components.
+The proxy detects the user's language from a `NEXT_LOCALE` cookie (set when user changes language) or falls back to `Accept-Language` header.
 
 ```typescript
 // proxy.ts
@@ -67,7 +67,16 @@ import type { NextRequest } from "next/server";
 
 import { locales, defaultLocale } from "@/lib/translations";
 
+const LOCALE_COOKIE = "NEXT_LOCALE";
+
 function getPreferredLocale(request: NextRequest): string {
+  // Check cookie first (user's explicit choice)
+  const cookieLocale = request.cookies.get(LOCALE_COOKIE)?.value;
+  if (cookieLocale && locales.includes(cookieLocale)) {
+    return cookieLocale;
+  }
+
+  // Fall back to Accept-Language header
   const acceptLanguage = request.headers.get("accept-language");
   if (!acceptLanguage) return defaultLocale;
 
diff --git a/packages/translations/src/next/app-provider.tsx b/packages/translations/src/next/app-provider.tsx
deleted file mode 100644
index db7790bfa..000000000
--- a/packages/translations/src/next/app-provider.tsx
+++ /dev/null
@@ -1,58 +0,0 @@
-"use client";
-
-import { type ReactNode, useMemo } from "react";
-import { useRouter, usePathname } from "next/navigation";
-
-import type { TranslationLoader } from "../core/types";
-import { TranslationContext } from "../react/contexts/translation-context";
-
-export type AppTranslationProviderProps = {
-  children: ReactNode;
-  locale: string;
-  locales: readonly string[];
-  defaultLocale?: string;
-  load: TranslationLoader;
-  keySplit?: boolean;
-};
-
-/**
- * Translation provider for Next.js App Router
- * Locale is passed from route params [lang]
- */
-export const AppTranslationProvider = ({
-  children,
-  locale,
-  locales,
-  defaultLocale,
-  load,
-  keySplit = true,
-}: AppTranslationProviderProps) => {
-  if (locales.length === 0) {
-    throw new Error("AppTranslationProvider: locales array must not be empty");
-  }
-
-  const router = useRouter();
-  const pathname = usePathname();
-
-  const value = useMemo(
-    () => ({
-      locale,
-      locales,
-      defaultLocale: defaultLocale ?? locales[0],
-      setLocale: (newLocale: string) => {
-        const segments = pathname.split("/");
-        segments[1] = newLocale;
-        router.push(segments.join("/"));
-      },
-      load,
-      keySplit,
-    }),
-    [locale, locales, defaultLocale, pathname, router, load, keySplit],
-  );
-
-  return (
-    <TranslationContext.Provider value={value}>
-      {children}
-    </TranslationContext.Provider>
-  );
-};
diff --git a/packages/translations/src/next/link.tsx b/packages/translations/src/next/components/link.tsx
similarity index 95%
rename from packages/translations/src/next/link.tsx
rename to packages/translations/src/next/components/link.tsx
index 4f8e99b57..88162b563 100644
--- a/packages/translations/src/next/link.tsx
+++ b/packages/translations/src/next/components/link.tsx
@@ -3,7 +3,7 @@
 import NextLink from "next/link";
 import type { ComponentProps } from "react";
 
-import { useTranslationContext } from "../react/hooks/use-translation-context";
+import { useTranslationContext } from "../../react/hooks/use-translation-context";
 
 export type LinkProps = ComponentProps<typeof NextLink>;
 
diff --git a/packages/translations/src/next/contexts/app-context.tsx b/packages/translations/src/next/contexts/app-context.tsx
new file mode 100644
index 000000000..78fae2a32
--- /dev/null
+++ b/packages/translations/src/next/contexts/app-context.tsx
@@ -0,0 +1,89 @@
+"use client";
+
+import { type ReactNode, useMemo, useCallback } from "react";
+import { useRouter, usePathname } from "next/navigation";
+
+import type { TranslationLoader } from "../../core/types";
+import { TranslationContext } from "../../react/contexts/translation-context";
+
+export type AppTranslationProviderProps = {
+  children: ReactNode;
+  locale: string;
+  locales: readonly string[];
+  defaultLocale?: string;
+  load: TranslationLoader;
+  keySplit?: boolean;
+};
+
+/**
+ * Translation provider for Next.js App Router
+ * Locale is passed from route params [lang]
+ */
+export const AppTranslationProvider = ({
+  children,
+  locale,
+  locales,
+  defaultLocale,
+  load,
+  keySplit = true,
+}: AppTranslationProviderProps) => {
+  if (locales.length === 0) {
+    throw new Error("AppTranslationProvider: locales array must not be empty");
+  }
+
+  const router = useRouter();
+  const pathname = usePathname();
+
+  const resolvedDefaultLocale = defaultLocale ?? locales[0];
+
+  const setLocale = useCallback(
+    (newLocale: string) => {
+      // Set cookie to remember user's choice
+      document.cookie = `NEXT_LOCALE=${newLocale};path=/;max-age=31536000`;
+
+      const segments = pathname.split("/");
+      const hasLocalePrefix = locales.includes(segments[1]);
+
+      if (hasLocalePrefix) {
+        // URL has locale prefix (e.g., /fr/about) - replace it
+        if (newLocale === resolvedDefaultLocale) {
+          // Going to default locale - remove prefix
+          segments.splice(1, 1);
+        } else {
+          // Going to non-default locale - replace prefix
+          segments[1] = newLocale;
+        }
+      } else {
+        // URL has no locale prefix (e.g., /about) - we're on default locale
+        if (newLocale !== resolvedDefaultLocale) {
+          // Going to non-default locale - add prefix
+          segments.splice(1, 0, newLocale);
+        }
+        // If staying on default locale, no change needed
+      }
+
+      const newPath = segments.join("/") || "/";
+
+      router.push(newPath, { scroll: false });
+    },
+    [pathname, locales, resolvedDefaultLocale, router],
+  );
+
+  const value = useMemo(
+    () => ({
+      locale,
+      locales,
+      defaultLocale: resolvedDefaultLocale,
+      setLocale,
+      load,
+      keySplit,
+    }),
+    [locale, locales, resolvedDefaultLocale, setLocale, load, keySplit],
+  );
+
+  return (
+    <TranslationContext.Provider value={value}>
+      {children}
+    </TranslationContext.Provider>
+  );
+};
diff --git a/packages/translations/src/next/provider.tsx b/packages/translations/src/next/contexts/pages-context.tsx
similarity index 54%
rename from packages/translations/src/next/provider.tsx
rename to packages/translations/src/next/contexts/pages-context.tsx
index 14f0c4c6c..4da466b46 100644
--- a/packages/translations/src/next/provider.tsx
+++ b/packages/translations/src/next/contexts/pages-context.tsx
@@ -1,10 +1,10 @@
 "use client";
 
-import { type ReactNode, useMemo } from "react";
+import { type ReactNode, useMemo, useCallback } from "react";
 import { useRouter } from "next/router";
 
-import type { TranslationLoader } from "../core/types";
-import { TranslationContext } from "../react/contexts/translation-context";
+import type { TranslationLoader } from "../../core/types";
+import { TranslationContext } from "../../react/contexts/translation-context";
 
 export type NextTranslationProviderProps = {
   children: ReactNode;
@@ -13,7 +13,7 @@ export type NextTranslationProviderProps = {
 };
 
 /**
- * Translation provider for Next.js applications
+ * Translation provider for Next.js Pages Router
  * Automatically uses locale info from Next.js router
  */
 export const NextTranslationProvider = ({
@@ -26,18 +26,28 @@ export const NextTranslationProvider = ({
   const locales = router.locales ?? ["en"];
   const defaultLocale = router.defaultLocale ?? "en";
 
+  const setLocale = useCallback(
+    (newLocale: string) => {
+      // Set cookie to remember user's choice
+      document.cookie = `NEXT_LOCALE=${newLocale};path=/;max-age=31536000`;
+      router.push(router.pathname, router.asPath, {
+        locale: newLocale,
+        scroll: false,
+      });
+    },
+    [router],
+  );
+
   const value = useMemo(
     () => ({
       locale,
       locales,
       defaultLocale,
-      setLocale: (newLocale: string) => {
-        router.push(router.pathname, router.asPath, { locale: newLocale });
-      },
+      setLocale,
       load,
       keySplit,
     }),
-    [locale, locales, defaultLocale, router, load, keySplit],
+    [locale, locales, defaultLocale, setLocale, load, keySplit],
   );
 
   return (
diff --git a/packages/translations/src/next/hooks/use-pathname.ts b/packages/translations/src/next/hooks/use-pathname.ts
new file mode 100644
index 000000000..04b913876
--- /dev/null
+++ b/packages/translations/src/next/hooks/use-pathname.ts
@@ -0,0 +1,19 @@
+"use client";
+
+import { usePathname as useNextPathname } from "next/navigation";
+
+import { useTranslationContext } from "../../react/hooks/use-translation-context";
+
+/**
+ * Hook that returns the pathname without the locale prefix.
+ * Wraps Next.js usePathname and strips locale from path.
+ */
+export const usePathname = () => {
+  const pathname = useNextPathname();
+  const { locales } = useTranslationContext();
+
+  const segments = pathname.split("/").filter(Boolean);
+  const hasLocalePrefix = locales.includes(segments[0]);
+
+  return hasLocalePrefix ? `/${segments.slice(1).join("/")}` : pathname;
+};
diff --git a/packages/translations/src/next/index.ts b/packages/translations/src/next/index.ts
index 9431dc7bf..a31a23b39 100644
--- a/packages/translations/src/next/index.ts
+++ b/packages/translations/src/next/index.ts
@@ -1,14 +1,16 @@
-// Pages Router
+// Contexts
 export {
   NextTranslationProvider as TranslationProvider,
   type NextTranslationProviderProps as TranslationProviderProps,
-} from "./provider";
+} from "./contexts/pages-context";
 
-// App Router
 export {
   AppTranslationProvider,
   type AppTranslationProviderProps,
-} from "./app-provider";
+} from "./contexts/app-context";
 
 // Components
-export { Link, type LinkProps } from "./link";
+export { Link, type LinkProps } from "./components/link";
+
+// Hooks
+export { usePathname } from "./hooks/use-pathname";

From 3cb5f43eece959293fd160eae1bde1473a4e7468 Mon Sep 17 00:00:00 2001
From: Antoine Kingue <etorefr@gmail.com>
Date: Sun, 28 Dec 2025 19:56:39 +0100
Subject: [PATCH 07/64] =?UTF-8?q?=F0=9F=8C=90=20add=20home=20page=20transl?=
 =?UTF-8?q?ations?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../app/[locale]/(landing)/customer/page.ts   |  6 ++-
 apps/web/src/app/[locale]/(landing)/page.ts   |  6 ++-
 .../landing/customer/featured/index.tsx       | 26 +++++-----
 .../marketing/landing/page-switcher/index.tsx |  6 ++-
 .../landing/visitor/featured/index.tsx        | 31 +++++-------
 .../visitor/featured/partners/index.tsx       |  7 ++-
 .../landing/visitor/projects/index.tsx        |  8 ++-
 .../landing/visitor/team/grid/card/index.tsx  |  9 +++-
 .../marketing/landing/visitor/team/index.tsx  | 20 ++++----
 apps/web/src/locales/README.md                | 49 +++++++------------
 .../locales/en/app/landing/customer/page.json |  6 +++
 apps/web/src/locales/en/app/landing/page.json |  6 +++
 .../marketing/landing/customer/featured.json  |  8 +++
 .../marketing/landing/page-switcher.json      |  4 ++
 .../marketing/landing/visitor/featured.json   | 12 +++++
 .../marketing/landing/visitor/projects.json   |  4 ++
 .../marketing/landing/visitor/team.json       | 13 +++++
 .../locales/fr/app/landing/customer/page.json |  6 +++
 apps/web/src/locales/fr/app/landing/page.json |  6 +++
 .../marketing/landing/customer/featured.json  |  8 +++
 .../marketing/landing/page-switcher.json      |  4 ++
 .../marketing/landing/visitor/featured.json   | 12 +++++
 .../marketing/landing/visitor/projects.json   |  4 ++
 .../marketing/landing/visitor/team.json       | 13 +++++
 24 files changed, 191 insertions(+), 83 deletions(-)
 create mode 100644 apps/web/src/locales/en/app/landing/customer/page.json
 create mode 100644 apps/web/src/locales/en/app/landing/page.json
 create mode 100644 apps/web/src/locales/en/components/marketing/landing/customer/featured.json
 create mode 100644 apps/web/src/locales/en/components/marketing/landing/page-switcher.json
 create mode 100644 apps/web/src/locales/en/components/marketing/landing/visitor/featured.json
 create mode 100644 apps/web/src/locales/en/components/marketing/landing/visitor/projects.json
 create mode 100644 apps/web/src/locales/en/components/marketing/landing/visitor/team.json
 create mode 100644 apps/web/src/locales/fr/app/landing/customer/page.json
 create mode 100644 apps/web/src/locales/fr/app/landing/page.json
 create mode 100644 apps/web/src/locales/fr/components/marketing/landing/customer/featured.json
 create mode 100644 apps/web/src/locales/fr/components/marketing/landing/page-switcher.json
 create mode 100644 apps/web/src/locales/fr/components/marketing/landing/visitor/featured.json
 create mode 100644 apps/web/src/locales/fr/components/marketing/landing/visitor/projects.json
 create mode 100644 apps/web/src/locales/fr/components/marketing/landing/visitor/team.json

diff --git a/apps/web/src/app/[locale]/(landing)/customer/page.ts b/apps/web/src/app/[locale]/(landing)/customer/page.ts
index 1c18676d0..3d92132eb 100644
--- a/apps/web/src/app/[locale]/(landing)/customer/page.ts
+++ b/apps/web/src/app/[locale]/(landing)/customer/page.ts
@@ -1,10 +1,12 @@
 import { constructMetadata } from "@/lib/utils/metadata";
+import { getTranslation } from "@/lib/translations.server";
 import CustomerLanding from "@/screens/marketing/landing/customer";
 
 export async function generateMetadata() {
+  const { t } = await getTranslation("app/landing/customer/page");
   return constructMetadata({
-    title: "Solutions digitales professionnelles pour votre entreprise",
-    description: "Votre partenaire digital pour le développement web, mobile et design UI/UX. Notre agence crée des solutions sur mesure qui répondent à vos objectifs commerciaux.",
+    title: t("metadata.title"),
+    description: t("metadata.description"),
   });
 }
 
diff --git a/apps/web/src/app/[locale]/(landing)/page.ts b/apps/web/src/app/[locale]/(landing)/page.ts
index 3660aac71..128c3398d 100644
--- a/apps/web/src/app/[locale]/(landing)/page.ts
+++ b/apps/web/src/app/[locale]/(landing)/page.ts
@@ -1,10 +1,12 @@
 import { constructMetadata } from "@/lib/utils/metadata";
+import { getTranslation } from "@/lib/translations.server";
 import VisitorLanding from "@/screens/marketing/landing/visitor";
 
 export async function generateMetadata() {
+  const { t } = await getTranslation("app/landing/page");
   return constructMetadata({
-    title: "Agence web de développement et design UI/UX à Paris et Rouen",
-    description: "Agence digitale spécialisée en développement web, mobile et design UI/UX. Notre équipe d'experts transforme vos idées en solutions digitales performantes.",
+    title: t("metadata.title"),
+    description: t("metadata.description"),
   });
 }
 
diff --git a/apps/web/src/components/marketing/landing/customer/featured/index.tsx b/apps/web/src/components/marketing/landing/customer/featured/index.tsx
index 2effdb248..37318eaf4 100644
--- a/apps/web/src/components/marketing/landing/customer/featured/index.tsx
+++ b/apps/web/src/components/marketing/landing/customer/featured/index.tsx
@@ -6,33 +6,37 @@ import { cn } from "@/lib/utils";
 import { Link } from "@onruntime/translations/next";
 import React from "react";
 import Balancer from "react-wrap-balancer";
+import { getTranslation } from "@/lib/translations.server";
+
+const Featured: React.FC = async () => {
+  const { t } = await getTranslation("components/marketing/landing/customer/featured");
 
-const Featured: React.FC = () => {
   return (
     <header className="bg-gradient-to-t from-onruntime-magenta/10 to-transparent overflow-hidden">
       <div className="px-4 md:px-0 pt-16 flex flex-col justify-center items-center max-w-5xl mx-auto">
         <div className="relative max-w-xl flex flex-col items-center gap-6">
           <h1 className="font-semibold text-5xl md:text-6xl text-foreground text-center">
             <Balancer>
-              {"Vous méritez "}
-              <span className="text-onruntime-magenta inline">le meilleur</span>
-              {" pour votre projet."}
+              {t("title").split("<accent>")[0]}
+              <span className="text-onruntime-magenta inline">
+                {t("title").split("<accent>")[1]?.split("</accent>")[0]}
+              </span>
+              {t("title").split("</accent>")[1]}
             </Balancer>
           </h1>
 
-          <h2 className="text-center text-muted-foreground">
-            Parce que le meilleur c’est nous, <strong>onRuntime Studio</strong>,
-            votre allié pour réaliser cet objectif grâce à nos équipes de
-            passionnés.
-          </h2>
+          <h2
+            className="text-center text-muted-foreground"
+            dangerouslySetInnerHTML={{ __html: t("description") }}
+          />
 
           <div className="flex gap-3">
             <Link href={Routes.contact}>
-              <Button>Réserver une prestation</Button>
+              <Button>{t("cta.book")}</Button>
             </Link>
 
             <Link href={Routes.projects}>
-              <Button variant={"outline"}>Voir notre travail</Button>
+              <Button variant={"outline"}>{t("cta.work")}</Button>
             </Link>
           </div>
 
diff --git a/apps/web/src/components/marketing/landing/page-switcher/index.tsx b/apps/web/src/components/marketing/landing/page-switcher/index.tsx
index e326dc09d..7e4a14b31 100644
--- a/apps/web/src/components/marketing/landing/page-switcher/index.tsx
+++ b/apps/web/src/components/marketing/landing/page-switcher/index.tsx
@@ -4,9 +4,11 @@ import { Tabs, TabsList, TabsTrigger } from "@/components/ui/tabs";
 import Routes from "@/constants/routes";
 import { Link, usePathname } from "@onruntime/translations/next";
 import React from "react";
+import { useTranslation } from "@onruntime/translations/react";
 
 const PageSwitcher: React.FC = () => {
   const pathname = usePathname();
+  const { t } = useTranslation("components/marketing/landing/page-switcher");
 
   return (
     <div className="w-full fixed bottom-6 select-none pointer-events-none">
@@ -18,13 +20,13 @@ const PageSwitcher: React.FC = () => {
         <TabsList className="grid w-full grid-cols-2 bg-background/50 shadow-xs backdrop-blur-2xl pointer-events-auto">
           <TabsTrigger value={Routes.landing.customer} className="w-full" asChild>
             <Link href={Routes.landing.customer} scroll={false}>
-              Je suis un potentiel client
+              {t("customer")}
             </Link>
           </TabsTrigger>
 
           <TabsTrigger value={Routes.landing.visitor} className="w-full" asChild>
             <Link href={Routes.landing.visitor} scroll={false}>
-              Je suis un simple visiteur
+              {t("visitor")}
             </Link>
           </TabsTrigger>
         </TabsList>
diff --git a/apps/web/src/components/marketing/landing/visitor/featured/index.tsx b/apps/web/src/components/marketing/landing/visitor/featured/index.tsx
index fe15f9c67..a0b623d4e 100644
--- a/apps/web/src/components/marketing/landing/visitor/featured/index.tsx
+++ b/apps/web/src/components/marketing/landing/visitor/featured/index.tsx
@@ -8,37 +8,38 @@ import { OnRuntimeWordMark } from "@/logos/components";
 import Balancer from "react-wrap-balancer";
 import Routes from "@/constants/routes";
 import { Link } from "@onruntime/translations/next";
+import { getTranslation } from "@/lib/translations.server";
+
+const Featured: React.FC = async () => {
+  const { t } = await getTranslation("components/marketing/landing/visitor/featured");
 
-const Featured: React.FC = () => {
   return (
     <header className="bg-gradient-to-t from-onruntime-blue/10 to-transparent">
       <div className="px-4 md:px-0 py-16 flex flex-col justify-center items-center max-w-5xl mx-auto">
         <div className="relative max-w-xl flex flex-col items-center gap-6">
           <h1 className="font-semibold text-5xl md:text-6xl text-foreground text-center">
             <Balancer>
-              La machine à rêves,{" "}
+              {t("title").split("<accent>")[0]}
               <span className="text-onruntime-blue inline">
-                onRuntime Studio
+                {t("title").split("<accent>")[1]?.split("</accent>")[0]}
               </span>
-              .
+              {t("title").split("</accent>")[1]}
             </Balancer>
           </h1>
 
           <p className="text-center">
             <Balancer>
-              Une communauté dynamique de créateurs : développeurs, designers et
-              artistes de divers horizons, unis par l&apos;innovation et la
-              créativité.
+              {t("description")}
             </Balancer>
           </p>
 
           <div className="flex gap-3">
             <Link href={Routes.contact}>
-              <Button>Réserver une prestation</Button>
+              <Button>{t("cta.book")}</Button>
             </Link>
 
             <Link href={Routes.projects}>
-              <Button variant={"outline"}>Voir notre travail</Button>
+              <Button variant={"outline"}>{t("cta.work")}</Button>
             </Link>
           </div>
 
@@ -55,7 +56,7 @@ const Featured: React.FC = () => {
         <div className="relative mt-12 rounded-sm overflow-hidden">
           <Image
             src={"/static/images/onruntime-team.jpg"}
-            alt={"Équipe onRuntime Studio"}
+            alt={t("image-alt")}
             width={1024}
             height={510}
             className="z-[-1] max-h-[510px] object-cover"
@@ -67,20 +68,14 @@ const Featured: React.FC = () => {
             <Image
               className="hidden md:block self-start"
               src={"/static/images/quotes.png"}
-              alt={"stylized quote"}
+              alt={t("quote-alt")}
               width={46}
               height={43}
             />
 
             <p className="hidden md:block text-background leading-5">
               <Balancer>
-                À la base, nous sommes passionnés par le développement web et le
-                développement en général depuis plus de 6 ans. Nous sommes très
-                intéressés par les nouvelles technologies et le monde de la
-                création (design, musique, etc.). À partir de là nous avons créé
-                un Studio et une communauté autour de celui-ci, nous adorons
-                nous retrouver autour d&apos;une tasse de café ☕️ pour
-                discuter, jouer et surtout créer des projets.
+                {t("testimonial")}
               </Balancer>
             </p>
 
diff --git a/apps/web/src/components/marketing/landing/visitor/featured/partners/index.tsx b/apps/web/src/components/marketing/landing/visitor/featured/partners/index.tsx
index 6e0d54e36..a612376fb 100644
--- a/apps/web/src/components/marketing/landing/visitor/featured/partners/index.tsx
+++ b/apps/web/src/components/marketing/landing/visitor/featured/partners/index.tsx
@@ -1,10 +1,13 @@
 import Image from "next/image";
 import React from "react";
+import { getTranslation } from "@/lib/translations.server";
+
+const Partners: React.FC = async () => {
+  const { t } = await getTranslation("components/marketing/landing/visitor/featured");
 
-const Partners: React.FC = () => {
   return (
     <div className="mt-12">
-      <p className="text-center">Ils nous accompagnent</p>
+      <p className="text-center">{t("partners")}</p>
 
       <div className="mt-8 overflow-hidden">
         <div className="flex items-center justify-center space-x-16">
diff --git a/apps/web/src/components/marketing/landing/visitor/projects/index.tsx b/apps/web/src/components/marketing/landing/visitor/projects/index.tsx
index 71720065a..9addd0db6 100644
--- a/apps/web/src/components/marketing/landing/visitor/projects/index.tsx
+++ b/apps/web/src/components/marketing/landing/visitor/projects/index.tsx
@@ -1,18 +1,22 @@
 "use client";
+
 import { Button } from "@/components/ui/button";
 import { default as ProjectsConst } from "@/constants/projects";
 import React from "react";
 import ProjectCard from "./card";
 import { Link } from "@onruntime/translations/next";
 import Routes from "@/constants/routes";
+import { useTranslation } from "@onruntime/translations/react";
 
 const Projects: React.FC = () => {
+  const { t } = useTranslation("components/marketing/landing/visitor/projects");
+
   return (
     <section className="px-4 md:px-0 py-24 flex flex-col gap-9 max-w-5xl mx-auto">
       <div className="flex justify-between items-center">
-        <h2 className="text-muted-foreground">Nos derniers projets</h2>
+        <h2 className="text-muted-foreground">{t("title")}</h2>
         <Link href={Routes.projects}>
-          <Button variant={"outline"}>Voir tous les projets</Button>
+          <Button variant={"outline"}>{t("cta")}</Button>
         </Link>
       </div>
       <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-5 justify-center">
diff --git a/apps/web/src/components/marketing/landing/visitor/team/grid/card/index.tsx b/apps/web/src/components/marketing/landing/visitor/team/grid/card/index.tsx
index 5e4414012..6d54436e1 100644
--- a/apps/web/src/components/marketing/landing/visitor/team/grid/card/index.tsx
+++ b/apps/web/src/components/marketing/landing/visitor/team/grid/card/index.tsx
@@ -1,7 +1,10 @@
+"use client";
+
 import React from 'react';
 import Image from 'next/image';
 import Link from 'next/link';
 import { Button } from '@/components/ui/button';
+import { useTranslation } from '@onruntime/translations/react';
 
 interface TeamMemberCardProps {
   name: string;
@@ -18,6 +21,8 @@ const TeamMemberCard: React.FC<TeamMemberCardProps> = ({
   image,
   link,
 }) => {
+  const { t } = useTranslation("components/marketing/landing/visitor/team");
+
   return (
     <div className="flex-[1] min-w-0 transition-all duration-300 ease-in-out hover:flex-[1.5] group">
       <div className="flex flex-col gap-2 w-full">
@@ -31,10 +36,10 @@ const TeamMemberCard: React.FC<TeamMemberCardProps> = ({
           />
           <div className="absolute inset-0 bg-black/50 opacity-0 group-hover:opacity-100 transition-opacity flex items-center justify-center">
             <Link href={link} target="_blank">
-              <Button 
+              <Button
                 className="bg-white text-black hover:bg-white/90 hover:text-black"
               >
-                Détails
+                {t("card.details")}
               </Button>
             </Link>
           </div>
diff --git a/apps/web/src/components/marketing/landing/visitor/team/index.tsx b/apps/web/src/components/marketing/landing/visitor/team/index.tsx
index 724d9272b..c55b453db 100644
--- a/apps/web/src/components/marketing/landing/visitor/team/index.tsx
+++ b/apps/web/src/components/marketing/landing/visitor/team/index.tsx
@@ -3,19 +3,22 @@ import Routes from "@/constants/routes";
 import { Link } from "@onruntime/translations/next";
 import React from "react";
 import TeamGrid from "./grid";
+import { getTranslation } from "@/lib/translations.server";
+
+const Team: React.FC = async () => {
+  const { t } = await getTranslation("components/marketing/landing/visitor/team");
 
-const Team: React.FC = () => {
   const points = [
     {
-      label: "Années d'expérience",
+      label: t("stats.experience"),
       value: "10+",
     },
     {
-      label: "Projets réalisés",
+      label: t("stats.projects"),
       value: "7+",
     },
     {
-      label: "Clients satisfaits",
+      label: t("stats.clients"),
       value: "100%",
     },
   ];
@@ -29,14 +32,11 @@ const Team: React.FC = () => {
 
         <div className="flex flex-col gap-6 lg:w-1/2">
           <h2 className="text-4xl font-semibold">
-            Une équipe de créatifs passionnés pour briller.
+            {t("title")}
           </h2>
 
           <p className="leading-6">
-            Composée de talents variés, allant de développeurs à des designers
-            passionnés. Chacun apporte sa touche unique à nos projets. Ensemble,
-            nous formons un collectif où l&apos;innovation est au cœur de tout ce que
-            nous entreprenons.
+            {t("description")}
           </p>
 
           <div className="flex flex-row flex-wrap gap-x-16 gap-y-6">
@@ -54,7 +54,7 @@ const Team: React.FC = () => {
           </div>
 
           <Link href={Routes.npo}>
-            <Button>En savoir plus</Button>
+            <Button>{t("cta")}</Button>
           </Link>
         </div>
       </div>
diff --git a/apps/web/src/locales/README.md b/apps/web/src/locales/README.md
index 92c1bad7b..02baf0658 100644
--- a/apps/web/src/locales/README.md
+++ b/apps/web/src/locales/README.md
@@ -4,6 +4,8 @@ Translation files for the onRuntime website.
 
 ## Structure
 
+The translation files mirror the `app/` and `components/` structure:
+
 ```
 locales/
 ├── en/
@@ -11,38 +13,21 @@ locales/
 │   ├── layout/
 │   │   ├── footer.json
 │   │   └── navbar.json
-│   └── marketing/
-│       ├── landing/
-│       │   ├── common.json
-│       │   ├── customer.json
-│       │   └── visitor.json
-│       ├── services/
-│       │   ├── common.json
-│       │   ├── backend/
-│       │   │   ├── common.json
-│       │   │   └── [service].json
-│       │   ├── design/
-│       │   │   └── ...
-│       │   ├── frontend/
-│       │   │   └── ...
-│       │   └── integration/
-│       │       └── ...
-│       ├── projects/
-│       │   ├── common.json
-│       │   └── [project].json
-│       ├── agency/
-│       │   ├── common.json
-│       │   └── [city].json
-│       ├── careers/
-│       │   └── common.json
-│       ├── contact.json
-│       ├── glossary/
-│       │   └── common.json
-│       ├── legal/
-│       │   ├── company.json
-│       │   ├── privacy.json
-│       │   └── terms.json
-│       └── npo.json
+│   ├── app/
+│   │   └── landing/
+│   │       ├── page.json              # → app/[locale]/(landing)/page.ts
+│   │       └── customer/
+│   │           └── page.json          # → app/[locale]/(landing)/customer/page.ts
+│   └── components/
+│       └── marketing/
+│           └── landing/
+│               ├── page-switcher.json
+│               ├── visitor/
+│               │   ├── featured.json
+│               │   ├── team.json
+│               │   └── projects.json
+│               └── customer/
+│                   └── featured.json
 └── fr/
     └── ...
 ```
diff --git a/apps/web/src/locales/en/app/landing/customer/page.json b/apps/web/src/locales/en/app/landing/customer/page.json
new file mode 100644
index 000000000..6a8eb4252
--- /dev/null
+++ b/apps/web/src/locales/en/app/landing/customer/page.json
@@ -0,0 +1,6 @@
+{
+  "metadata": {
+    "title": "Professional digital solutions for your business",
+    "description": "Your digital partner for web, mobile development and UI/UX design. Our agency creates tailored solutions that meet your business objectives."
+  }
+}
diff --git a/apps/web/src/locales/en/app/landing/page.json b/apps/web/src/locales/en/app/landing/page.json
new file mode 100644
index 000000000..28248daf9
--- /dev/null
+++ b/apps/web/src/locales/en/app/landing/page.json
@@ -0,0 +1,6 @@
+{
+  "metadata": {
+    "title": "Web development and UI/UX design agency in Paris and Rouen",
+    "description": "Digital agency specialized in web, mobile development and UI/UX design. Our team of experts transforms your ideas into high-performance digital solutions."
+  }
+}
diff --git a/apps/web/src/locales/en/components/marketing/landing/customer/featured.json b/apps/web/src/locales/en/components/marketing/landing/customer/featured.json
new file mode 100644
index 000000000..01ea597a1
--- /dev/null
+++ b/apps/web/src/locales/en/components/marketing/landing/customer/featured.json
@@ -0,0 +1,8 @@
+{
+  "title": "You deserve <accent>the best</accent> for your project.",
+  "description": "Because the best is us, <strong>onRuntime Studio</strong>, your ally to achieve this goal thanks to our passionate teams.",
+  "cta": {
+    "book": "Book a service",
+    "work": "View our work"
+  }
+}
diff --git a/apps/web/src/locales/en/components/marketing/landing/page-switcher.json b/apps/web/src/locales/en/components/marketing/landing/page-switcher.json
new file mode 100644
index 000000000..6cc687bd8
--- /dev/null
+++ b/apps/web/src/locales/en/components/marketing/landing/page-switcher.json
@@ -0,0 +1,4 @@
+{
+  "customer": "I am a potential client",
+  "visitor": "I am a simple visitor"
+}
diff --git a/apps/web/src/locales/en/components/marketing/landing/visitor/featured.json b/apps/web/src/locales/en/components/marketing/landing/visitor/featured.json
new file mode 100644
index 000000000..608e7989d
--- /dev/null
+++ b/apps/web/src/locales/en/components/marketing/landing/visitor/featured.json
@@ -0,0 +1,12 @@
+{
+  "title": "The dream machine, <accent>onRuntime Studio</accent>.",
+  "description": "A dynamic community of creators: developers, designers and artists from diverse backgrounds, united by innovation and creativity.",
+  "cta": {
+    "book": "Book a service",
+    "work": "View our work"
+  },
+  "image-alt": "onRuntime Studio team",
+  "quote-alt": "stylized quote",
+  "testimonial": "At the core, we've been passionate about web development and development in general for over 6 years. We're very interested in new technologies and the world of creation (design, music, etc.). From there, we created a Studio and a community around it. We love getting together over a cup of coffee ☕️ to discuss, play, and especially create projects.",
+  "partners": "They support us"
+}
diff --git a/apps/web/src/locales/en/components/marketing/landing/visitor/projects.json b/apps/web/src/locales/en/components/marketing/landing/visitor/projects.json
new file mode 100644
index 000000000..c2b49aa4e
--- /dev/null
+++ b/apps/web/src/locales/en/components/marketing/landing/visitor/projects.json
@@ -0,0 +1,4 @@
+{
+  "title": "Our latest projects",
+  "cta": "View all projects"
+}
diff --git a/apps/web/src/locales/en/components/marketing/landing/visitor/team.json b/apps/web/src/locales/en/components/marketing/landing/visitor/team.json
new file mode 100644
index 000000000..dd7a30169
--- /dev/null
+++ b/apps/web/src/locales/en/components/marketing/landing/visitor/team.json
@@ -0,0 +1,13 @@
+{
+  "title": "A team of passionate creatives to shine.",
+  "description": "Composed of varied talents, from developers to passionate designers. Each brings their unique touch to our projects. Together, we form a collective where innovation is at the heart of everything we do.",
+  "stats": {
+    "experience": "Years of experience",
+    "projects": "Projects completed",
+    "clients": "Satisfied clients"
+  },
+  "cta": "Learn more",
+  "card": {
+    "details": "Details"
+  }
+}
diff --git a/apps/web/src/locales/fr/app/landing/customer/page.json b/apps/web/src/locales/fr/app/landing/customer/page.json
new file mode 100644
index 000000000..9661aba0c
--- /dev/null
+++ b/apps/web/src/locales/fr/app/landing/customer/page.json
@@ -0,0 +1,6 @@
+{
+  "metadata": {
+    "title": "Solutions digitales professionnelles pour votre entreprise",
+    "description": "Votre partenaire digital pour le développement web, mobile et design UI/UX. Notre agence crée des solutions sur mesure qui répondent à vos objectifs commerciaux."
+  }
+}
diff --git a/apps/web/src/locales/fr/app/landing/page.json b/apps/web/src/locales/fr/app/landing/page.json
new file mode 100644
index 000000000..730e80f6c
--- /dev/null
+++ b/apps/web/src/locales/fr/app/landing/page.json
@@ -0,0 +1,6 @@
+{
+  "metadata": {
+    "title": "Agence web de développement et design UI/UX à Paris et Rouen",
+    "description": "Agence digitale spécialisée en développement web, mobile et design UI/UX. Notre équipe d'experts transforme vos idées en solutions digitales performantes."
+  }
+}
diff --git a/apps/web/src/locales/fr/components/marketing/landing/customer/featured.json b/apps/web/src/locales/fr/components/marketing/landing/customer/featured.json
new file mode 100644
index 000000000..748bce01e
--- /dev/null
+++ b/apps/web/src/locales/fr/components/marketing/landing/customer/featured.json
@@ -0,0 +1,8 @@
+{
+  "title": "Vous méritez <accent>le meilleur</accent> pour votre projet.",
+  "description": "Parce que le meilleur c'est nous, <strong>onRuntime Studio</strong>, votre allié pour réaliser cet objectif grâce à nos équipes de passionnés.",
+  "cta": {
+    "book": "Réserver une prestation",
+    "work": "Voir notre travail"
+  }
+}
diff --git a/apps/web/src/locales/fr/components/marketing/landing/page-switcher.json b/apps/web/src/locales/fr/components/marketing/landing/page-switcher.json
new file mode 100644
index 000000000..663be13df
--- /dev/null
+++ b/apps/web/src/locales/fr/components/marketing/landing/page-switcher.json
@@ -0,0 +1,4 @@
+{
+  "customer": "Je suis un potentiel client",
+  "visitor": "Je suis un simple visiteur"
+}
diff --git a/apps/web/src/locales/fr/components/marketing/landing/visitor/featured.json b/apps/web/src/locales/fr/components/marketing/landing/visitor/featured.json
new file mode 100644
index 000000000..74670b17d
--- /dev/null
+++ b/apps/web/src/locales/fr/components/marketing/landing/visitor/featured.json
@@ -0,0 +1,12 @@
+{
+  "title": "La machine à rêves, <accent>onRuntime Studio</accent>.",
+  "description": "Une communauté dynamique de créateurs : développeurs, designers et artistes de divers horizons, unis par l'innovation et la créativité.",
+  "cta": {
+    "book": "Réserver une prestation",
+    "work": "Voir notre travail"
+  },
+  "image-alt": "Équipe onRuntime Studio",
+  "quote-alt": "guillemet stylisé",
+  "testimonial": "À la base, nous sommes passionnés par le développement web et le développement en général depuis plus de 6 ans. Nous sommes très intéressés par les nouvelles technologies et le monde de la création (design, musique, etc.). À partir de là nous avons créé un Studio et une communauté autour de celui-ci, nous adorons nous retrouver autour d'une tasse de café ☕️ pour discuter, jouer et surtout créer des projets.",
+  "partners": "Ils nous accompagnent"
+}
diff --git a/apps/web/src/locales/fr/components/marketing/landing/visitor/projects.json b/apps/web/src/locales/fr/components/marketing/landing/visitor/projects.json
new file mode 100644
index 000000000..7ed8ada03
--- /dev/null
+++ b/apps/web/src/locales/fr/components/marketing/landing/visitor/projects.json
@@ -0,0 +1,4 @@
+{
+  "title": "Nos derniers projets",
+  "cta": "Voir tous les projets"
+}
diff --git a/apps/web/src/locales/fr/components/marketing/landing/visitor/team.json b/apps/web/src/locales/fr/components/marketing/landing/visitor/team.json
new file mode 100644
index 000000000..ae56dbb8c
--- /dev/null
+++ b/apps/web/src/locales/fr/components/marketing/landing/visitor/team.json
@@ -0,0 +1,13 @@
+{
+  "title": "Une équipe de créatifs passionnés pour briller.",
+  "description": "Composée de talents variés, allant de développeurs à des designers passionnés. Chacun apporte sa touche unique à nos projets. Ensemble, nous formons un collectif où l'innovation est au cœur de tout ce que nous entreprenons.",
+  "stats": {
+    "experience": "Années d'expérience",
+    "projects": "Projets réalisés",
+    "clients": "Clients satisfaits"
+  },
+  "cta": "En savoir plus",
+  "card": {
+    "details": "Détails"
+  }
+}

From fdd64c3fcd602661fd6334d3ec9ab97cdbaabda1 Mon Sep 17 00:00:00 2001
From: Antoine Kingue <etorefr@gmail.com>
Date: Sun, 28 Dec 2025 20:20:36 +0100
Subject: [PATCH 08/64] =?UTF-8?q?=F0=9F=8C=90=20add=20npo=20page=20transla?=
 =?UTF-8?q?tions?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 apps/web/src/app/[locale]/npo/page.tsx        |   6 +-
 .../marketing/npo/donations/index.tsx         |  54 +++--
 apps/web/src/locales/en/app/npo/page.json     |   6 +
 .../components/marketing/npo/donations.json   |  19 ++
 .../src/locales/en/screens/marketing/npo.json | 113 ++++++++++
 apps/web/src/locales/fr/app/npo/page.json     |   6 +
 .../components/marketing/npo/donations.json   |  19 ++
 .../src/locales/fr/screens/marketing/npo.json | 113 ++++++++++
 apps/web/src/screens/marketing/npo/index.tsx  | 207 ++++++------------
 9 files changed, 380 insertions(+), 163 deletions(-)
 create mode 100644 apps/web/src/locales/en/app/npo/page.json
 create mode 100644 apps/web/src/locales/en/components/marketing/npo/donations.json
 create mode 100644 apps/web/src/locales/en/screens/marketing/npo.json
 create mode 100644 apps/web/src/locales/fr/app/npo/page.json
 create mode 100644 apps/web/src/locales/fr/components/marketing/npo/donations.json
 create mode 100644 apps/web/src/locales/fr/screens/marketing/npo.json

diff --git a/apps/web/src/app/[locale]/npo/page.tsx b/apps/web/src/app/[locale]/npo/page.tsx
index 77025a394..4f4f56aa2 100644
--- a/apps/web/src/app/[locale]/npo/page.tsx
+++ b/apps/web/src/app/[locale]/npo/page.tsx
@@ -1,10 +1,12 @@
 import { constructMetadata } from "@/lib/utils/metadata";
+import { getTranslation } from "@/lib/translations.server";
 import NPOPage from "@/screens/marketing/npo";
 
 export async function generateMetadata() {
+  const { t } = await getTranslation("app/npo/page");
   return constructMetadata({
-    title: "onRuntime Studio - Association de créateurs numériques",
-    description: "Découvrez notre association loi 1901 dédiée à l'innovation et la créativité digitale. Une communauté dynamique de développeurs, designers et artistes numériques.",
+    title: t("metadata.title"),
+    description: t("metadata.description"),
   });
 }
 
diff --git a/apps/web/src/components/marketing/npo/donations/index.tsx b/apps/web/src/components/marketing/npo/donations/index.tsx
index 488822a7c..79e69efa9 100644
--- a/apps/web/src/components/marketing/npo/donations/index.tsx
+++ b/apps/web/src/components/marketing/npo/donations/index.tsx
@@ -4,22 +4,24 @@ import React, { useState } from "react";
 import { Button } from "@/components/ui/button";
 import { useToast } from "@/hooks/use-toast";
 import { Check, CreditCard, Gift, Heart } from "lucide-react";
+import { useTranslation } from "@onruntime/translations/react";
 
 const Donations: React.FC = () => {
+  const { t } = useTranslation("components/marketing/npo/donations");
   const { toast } = useToast();
   const [selectedAmount, setSelectedAmount] = useState<number | null>(null);
   const [customAmount, setCustomAmount] = useState<string>("");
   const [isProcessing, setIsProcessing] = useState(false);
 
   const handleDonation = async () => {
-
     setIsProcessing(true);
 
     setTimeout(() => {
       setIsProcessing(false);
+      const amount = selectedAmount || customAmount;
       toast({
-        title: "Paiement simulé",
-        description: `Votre don de ${selectedAmount || customAmount}€ a été traité avec succès. Dans une implémentation réelle, vous seriez redirigé vers Stripe.`,
+        title: t("toast.title"),
+        description: `${t("toast.description-prefix")} ${amount}€ ${t("toast.description-suffix")}`,
       });
 
       setSelectedAmount(null);
@@ -27,22 +29,22 @@ const Donations: React.FC = () => {
     }, 1500);
   };
 
+  const displayAmount = selectedAmount || customAmount || "0";
+
   return (
     <div className="p-6 border rounded-lg bg-card hover:border-onruntime-blue transition-colors">
       <div className="flex items-center gap-4 mb-6">
         <div className="p-2 rounded-md bg-onruntime-blue/10 text-onruntime-blue">
           <Gift className="w-5 h-5" />
         </div>
-        <h3 className="text-xl font-medium text-foreground">Faire un don</h3>
+        <h3 className="text-xl font-medium text-foreground">{t("title")}</h3>
       </div>
-      
-      <p className="text-muted-foreground mb-6">
-        Soutenez notre association et nos projets en faisant un don ponctuel. Votre contribution nous aide à financer nos activités, nos événements et nos outils de développement.
-      </p>
-      
+
+      <p className="text-muted-foreground mb-6">{t("description")}</p>
+
       <div className="grid grid-cols-3 gap-3 mb-6">
         {[10, 20, 50, 100, 200].map((amount) => (
-          <Button 
+          <Button
             key={amount}
             variant={selectedAmount === amount ? "default" : "outline"}
             onClick={() => {
@@ -60,15 +62,15 @@ const Donations: React.FC = () => {
           </Button>
         ))}
         <div className="relative">
-          <Button 
+          <Button
             variant={customAmount ? "default" : "outline"}
             onClick={() => {
               setSelectedAmount(null);
-              if (!customAmount) setCustomAmount(""); 
+              if (!customAmount) setCustomAmount("");
             }}
             className="w-full"
           >
-            Autre
+            {t("other")}
             {customAmount && (
               <span className="absolute -top-1 -right-1 bg-onruntime-blue text-white rounded-full p-0.5">
                 <Check className="h-3 w-3" />
@@ -77,11 +79,11 @@ const Donations: React.FC = () => {
           </Button>
         </div>
       </div>
-      
+
       {(customAmount !== "" || selectedAmount === null) && (
         <div className="mb-6 mt-a">
           <label className="block text-sm font-medium text-foreground mb-2">
-            Montant personnalisé
+            {t("custom-amount.label")}
           </label>
           <div className="relative">
             <input
@@ -91,36 +93,40 @@ const Donations: React.FC = () => {
                 setCustomAmount(e.target.value);
                 setSelectedAmount(null);
               }}
-              placeholder="Entrez un montant"
+              placeholder={t("custom-amount.placeholder")}
               className="w-full px-3 py-2 border rounded-md focus:outline-none focus:ring-2 focus:ring-onruntime-blue"
               min="1"
             />
-            <span className="absolute right-3 top-1/2 transform -translate-y-1/2 text-foreground">€</span>
+            <span className="absolute right-3 top-1/2 transform -translate-y-1/2 text-foreground">
+              €
+            </span>
           </div>
         </div>
       )}
-      
-      <Button 
-        className="w-full" 
+
+      <Button
+        className="w-full"
         onClick={handleDonation}
         disabled={(!selectedAmount && !customAmount) || isProcessing}
       >
         {isProcessing ? (
           <>
             <span className="animate-spin mr-2">⏳</span>
-            Traitement...
+            {t("button.processing")}
           </>
         ) : (
           <>
-            Faire un don de {selectedAmount || customAmount || "0"}€
+            {t("button.donate")} {displayAmount}€
             <Heart className="ml-2 w-4 h-4" />
           </>
         )}
       </Button>
-      
+
       <div className="flex items-center justify-center mt-4">
         <CreditCard className="w-4 h-4 mr-2 text-muted-foreground" />
-        <span className="text-xs text-muted-foreground">Paiement sécurisé par Stripe</span>
+        <span className="text-xs text-muted-foreground">
+          {t("secure-payment")}
+        </span>
       </div>
     </div>
   );
diff --git a/apps/web/src/locales/en/app/npo/page.json b/apps/web/src/locales/en/app/npo/page.json
new file mode 100644
index 000000000..fe6d38433
--- /dev/null
+++ b/apps/web/src/locales/en/app/npo/page.json
@@ -0,0 +1,6 @@
+{
+  "metadata": {
+    "title": "onRuntime Studio - Non-profit organization for digital creators",
+    "description": "Discover our French non-profit organization dedicated to innovation and digital creativity. A dynamic community of developers, designers, and digital artists."
+  }
+}
diff --git a/apps/web/src/locales/en/components/marketing/npo/donations.json b/apps/web/src/locales/en/components/marketing/npo/donations.json
new file mode 100644
index 000000000..edd4cebae
--- /dev/null
+++ b/apps/web/src/locales/en/components/marketing/npo/donations.json
@@ -0,0 +1,19 @@
+{
+  "title": "Make a donation",
+  "description": "Support our organization and projects by making a one-time donation. Your contribution helps us fund our activities, events, and development tools.",
+  "other": "Other",
+  "custom-amount": {
+    "label": "Custom amount",
+    "placeholder": "Enter an amount"
+  },
+  "button": {
+    "donate": "Donate",
+    "processing": "Processing..."
+  },
+  "secure-payment": "Secure payment by Stripe",
+  "toast": {
+    "title": "Payment simulated",
+    "description-prefix": "Your donation of",
+    "description-suffix": "has been processed successfully. In a real implementation, you would be redirected to Stripe."
+  }
+}
diff --git a/apps/web/src/locales/en/screens/marketing/npo.json b/apps/web/src/locales/en/screens/marketing/npo.json
new file mode 100644
index 000000000..612da319e
--- /dev/null
+++ b/apps/web/src/locales/en/screens/marketing/npo.json
@@ -0,0 +1,113 @@
+{
+  "hero": {
+    "title": "The onRuntime Studio Association",
+    "description": "A French non-profit organization dedicated to innovation and creativity in web development, mobile development, and design."
+  },
+  "cta": {
+    "become-member": "Become a member",
+    "our-projects": "Our projects"
+  },
+  "history": {
+    "title": "Our story",
+    "description": "Founded in 2020, onRuntime Studio was born from the shared passion of developers and designers who have been collaborating since 2015. Our organization aims to create a collaborative space to innovate and share our knowledge, with the ambition to soon become a full-fledged company.",
+    "timeline": {
+      "2015": {
+        "title": "First collaborations",
+        "description": "Beginning of collaborations between Jérémy, Antoine, and Lucas, mainly on video game platforms."
+      },
+      "2020": {
+        "title": "Creation of the organization",
+        "description": "Official founding of onRuntime Studio as a French non-profit organization, on the advice of Bryan Recher."
+      },
+      "2021": {
+        "title": "Meeting in Rouen",
+        "description": "The founders meet in Rouen to accelerate projects, particularly their flagship project: Tonight Pass."
+      },
+      "2022": {
+        "title": "First recruitments",
+        "description": "The organization recruits its first employees to support the development of its projects."
+      },
+      "2023-2025": {
+        "title": "Continued expansion",
+        "description": "Focus on developing Tonight Pass and preparing for a future transformation into a company."
+      }
+    }
+  },
+  "founders": {
+    "title": "The founders",
+    "description": "Our organization was founded by three enthusiasts who have been working together for several years to bring innovative projects to life.",
+    "website": "Website",
+    "linkedin": "LinkedIn"
+  },
+  "values": {
+    "title": "Our values",
+    "description": "These fundamental principles guide our approach and vision, influencing each of our actions and decisions.",
+    "items": {
+      "innovation": {
+        "title": "Innovation",
+        "description": "We constantly push the boundaries of creativity and technology to offer innovative solutions."
+      },
+      "community": {
+        "title": "Community",
+        "description": "We believe in the strength of the collective and foster a collaborative environment where everyone can thrive."
+      },
+      "passion": {
+        "title": "Passion",
+        "description": "Every project is approached with passion and dedication, because we deeply love what we do."
+      },
+      "learning": {
+        "title": "Learning",
+        "description": "We value continuous learning and knowledge sharing to progress together."
+      }
+    }
+  },
+  "expertise": {
+    "title": "Our technical expertise",
+    "description": "The technologies we master and use in our association projects."
+  },
+  "membership": {
+    "title": "Become a member",
+    "description": "Join our community of enthusiasts and participate in the development of innovative projects.",
+    "annual": {
+      "title": "Annual membership",
+      "price": "30€",
+      "period": "/year",
+      "description": "Annual fee to become a volunteer member of the organization.",
+      "benefits": {
+        "hours": "Commitment of 3 to 6 hours per week",
+        "projects": "Participation in association projects",
+        "discord": "Dedicated Discord role and access to private channels",
+        "mentoring": "Personalized mentoring by our experienced members",
+        "resources": "Access to all our resources and training",
+        "autonomy": "Autonomy on the organization's projects"
+      },
+      "cta": "Request my membership"
+    }
+  },
+  "initiatives": {
+    "title": "Our programs and initiatives",
+    "description": "Discover the initiatives we are currently developing and our upcoming projects.",
+    "mentoring": {
+      "title": "Technical mentoring program",
+      "description": "Our mentoring program allows beginner members to be accompanied in their skill development by experienced developers and designers from the organization.",
+      "status": "Currently active"
+    },
+    "workshops": {
+      "title": "Collaborative technical workshops",
+      "description": "Group work and learning sessions on specific technologies, organized online and in-person when possible.",
+      "status": "In development phase"
+    },
+    "hackathons": {
+      "title": "Community hackathons",
+      "description": "Organization of 48-hour events where teams will develop innovative solutions together on specific issues.",
+      "status": "Future project"
+    },
+    "contribute": "Would you like to contribute to the development of these initiatives?",
+    "contact": "Contact us"
+  },
+  "discord": {
+    "title": "Join our Discord community",
+    "description": "Connect with other members, participate in technical discussions, and stay informed about the latest news from the organization.",
+    "cta": "Join Discord"
+  }
+}
diff --git a/apps/web/src/locales/fr/app/npo/page.json b/apps/web/src/locales/fr/app/npo/page.json
new file mode 100644
index 000000000..70463aa3e
--- /dev/null
+++ b/apps/web/src/locales/fr/app/npo/page.json
@@ -0,0 +1,6 @@
+{
+  "metadata": {
+    "title": "onRuntime Studio - Association de créateurs numériques",
+    "description": "Découvrez notre association loi 1901 dédiée à l'innovation et la créativité digitale. Une communauté dynamique de développeurs, designers et artistes numériques."
+  }
+}
diff --git a/apps/web/src/locales/fr/components/marketing/npo/donations.json b/apps/web/src/locales/fr/components/marketing/npo/donations.json
new file mode 100644
index 000000000..a8c892a6d
--- /dev/null
+++ b/apps/web/src/locales/fr/components/marketing/npo/donations.json
@@ -0,0 +1,19 @@
+{
+  "title": "Faire un don",
+  "description": "Soutenez notre association et nos projets en faisant un don ponctuel. Votre contribution nous aide à financer nos activités, nos événements et nos outils de développement.",
+  "other": "Autre",
+  "custom-amount": {
+    "label": "Montant personnalisé",
+    "placeholder": "Entrez un montant"
+  },
+  "button": {
+    "donate": "Faire un don de",
+    "processing": "Traitement..."
+  },
+  "secure-payment": "Paiement sécurisé par Stripe",
+  "toast": {
+    "title": "Paiement simulé",
+    "description-prefix": "Votre don de",
+    "description-suffix": "a été traité avec succès. Dans une implémentation réelle, vous seriez redirigé vers Stripe."
+  }
+}
diff --git a/apps/web/src/locales/fr/screens/marketing/npo.json b/apps/web/src/locales/fr/screens/marketing/npo.json
new file mode 100644
index 000000000..f2d81a341
--- /dev/null
+++ b/apps/web/src/locales/fr/screens/marketing/npo.json
@@ -0,0 +1,113 @@
+{
+  "hero": {
+    "title": "L'Association onRuntime Studio",
+    "description": "Une association loi 1901 dédiée à l'innovation et la créativité dans le domaine du développement web, mobile et design."
+  },
+  "cta": {
+    "become-member": "Devenir membre",
+    "our-projects": "Nos projets"
+  },
+  "history": {
+    "title": "Notre histoire",
+    "description": "Fondée en 2020, onRuntime Studio est née de la passion commune de développeurs et designers qui collaborent ensemble depuis 2015. Notre association a pour vocation de créer un espace collaboratif pour innover et partager nos connaissances, avec l'ambition de devenir prochainement une entreprise à part entière.",
+    "timeline": {
+      "2015": {
+        "title": "Premières collaborations",
+        "description": "Début des collaborations entre Jérémy, Antoine et Lucas, principalement sur des plateformes de jeux vidéos."
+      },
+      "2020": {
+        "title": "Création de l'association",
+        "description": "Fondation officielle d'onRuntime Studio en tant qu'association loi 1901, sur les conseils de Bryan Recher."
+      },
+      "2021": {
+        "title": "Réunion à Rouen",
+        "description": "Les fondateurs se réunissent à Rouen afin d'accélérer les projets, notamment avec leur projet phare: Tonight Pass."
+      },
+      "2022": {
+        "title": "Premiers recrutements",
+        "description": "L'association recrute ses premiers salariés pour soutenir le développement de ses projets."
+      },
+      "2023-2025": {
+        "title": "Expansion continue",
+        "description": "Focus sur le développement de Tonight Pass et préparation à une transformation future en entreprise."
+      }
+    }
+  },
+  "founders": {
+    "title": "Les fondateurs",
+    "description": "Notre association a été fondée par trois passionnés qui travaillent ensemble depuis plusieurs années pour donner vie à des projets innovants.",
+    "website": "Site web",
+    "linkedin": "LinkedIn"
+  },
+  "values": {
+    "title": "Nos valeurs",
+    "description": "Ces principes fondamentaux guident notre approche et notre vision, influençant chacune de nos actions et décisions.",
+    "items": {
+      "innovation": {
+        "title": "Innovation",
+        "description": "Nous repoussons constamment les limites de la créativité et de la technologie pour offrir des solutions novatrices."
+      },
+      "community": {
+        "title": "Communauté",
+        "description": "Nous croyons en la force du collectif et favorisons un environnement collaboratif où chacun peut s'épanouir."
+      },
+      "passion": {
+        "title": "Passion",
+        "description": "Chaque projet est abordé avec passion et dévouement, car nous aimons profondément ce que nous faisons."
+      },
+      "learning": {
+        "title": "Apprentissage",
+        "description": "Nous valorisons l'apprentissage continu et le partage des connaissances pour progresser ensemble."
+      }
+    }
+  },
+  "expertise": {
+    "title": "Notre expertise technique",
+    "description": "Les technologies que nous maîtrisons et utilisons dans nos projets associatifs."
+  },
+  "membership": {
+    "title": "Devenir membre",
+    "description": "Rejoignez notre communauté de passionnés et participez au développement de projets innovants.",
+    "annual": {
+      "title": "Adhésion annuelle",
+      "price": "30€",
+      "period": "/an",
+      "description": "Cotisation annuelle pour devenir membre bénévole de l'association.",
+      "benefits": {
+        "hours": "Engagement de 3 à 6 heures par semaine",
+        "projects": "Participation aux projets associatifs",
+        "discord": "Rôle Discord dédié et accès aux salons privés",
+        "mentoring": "Mentorat personnalisé par nos membres expérimentés",
+        "resources": "Accès à toutes nos ressources et formations",
+        "autonomy": "Autonomie sur les projets de l'association"
+      },
+      "cta": "Demander mon adhésion"
+    }
+  },
+  "initiatives": {
+    "title": "Nos programmes et initiatives",
+    "description": "Découvrez les initiatives que nous développons actuellement et nos projets à venir.",
+    "mentoring": {
+      "title": "Programme de mentorat technique",
+      "description": "Notre programme de mentorat permet aux membres débutants d'être accompagnés dans leur montée en compétences par des développeurs et designers expérimentés de l'association.",
+      "status": "Actuellement actif"
+    },
+    "workshops": {
+      "title": "Ateliers techniques collaboratifs",
+      "description": "Sessions de travail et d'apprentissage en groupe sur des technologies spécifiques, organisées en ligne et en présentiel quand possible.",
+      "status": "En phase de développement"
+    },
+    "hackathons": {
+      "title": "Hackathons communautaires",
+      "description": "Organisation d'événements de 48h où des équipes développeront ensemble des solutions innovantes sur des problématiques précises.",
+      "status": "Projet futur"
+    },
+    "contribute": "Vous souhaitez contribuer au développement de ces initiatives ?",
+    "contact": "Nous contacter"
+  },
+  "discord": {
+    "title": "Rejoignez notre communauté Discord",
+    "description": "Connectez-vous avec les autres membres, participez aux discussions techniques et restez informé des dernières actualités de l'association.",
+    "cta": "Rejoindre le Discord"
+  }
+}
diff --git a/apps/web/src/screens/marketing/npo/index.tsx b/apps/web/src/screens/marketing/npo/index.tsx
index 8013f6a13..7bb2bfdae 100644
--- a/apps/web/src/screens/marketing/npo/index.tsx
+++ b/apps/web/src/screens/marketing/npo/index.tsx
@@ -23,6 +23,7 @@ import { OrganizationSchema } from "@/components/json-ld/organization-schema";
 import { roleToDisplay, TeamRole } from "@/types/team-member";
 import { TechnologiesSection } from "@/components/marketing/services/sections";
 import Donations from "@/components/marketing/npo/donations";
+import { getTranslation } from "@/lib/translations.server";
 
 const coFounders = Object.entries(TeamMembers)
   .filter(([, member]) => member.roles.includes(TeamRole.CO_FOUNDER))
@@ -31,91 +32,41 @@ const coFounders = Object.entries(TeamMembers)
     ...member,
   }));
 
-const npoValues = [
-  {
-    title: "Innovation",
-    description:
-      "Nous repoussons constamment les limites de la créativité et de la technologie pour offrir des solutions novatrices.",
-    icon: Rocket,
-  },
-  {
-    title: "Communauté",
-    description:
-      "Nous croyons en la force du collectif et favorisons un environnement collaboratif où chacun peut s'épanouir.",
-    icon: Users,
-  },
-  {
-    title: "Passion",
-    description:
-      "Chaque projet est abordé avec passion et dévouement, car nous aimons profondément ce que nous faisons.",
-    icon: Heart,
-  },
-  {
-    title: "Apprentissage",
-    description:
-      "Nous valorisons l'apprentissage continu et le partage des connaissances pour progresser ensemble.",
-    icon: GraduationCap,
-  },
-];
-
-const historyTimeline = [
-  {
-    year: "2015",
-    title: "Premières collaborations",
-    description:
-      "Début des collaborations entre Jérémy, Antoine et Lucas, principalement sur des plateformes de jeux vidéos.",
-  },
-  {
-    year: "2020",
-    title: "Création de l'association",
-    description:
-      "Fondation officielle d'onRuntime Studio en tant qu'association loi 1901, sur les conseils de Bryan Recher.",
-  },
-  {
-    year: "2021",
-    title: "Réunion à Rouen",
-    description:
-      "Les fondateurs se réunissent à Rouen afin d'accélérer les projets, notamment avec leur projet phare: Tonight Pass.",
-  },
-  {
-    year: "2022",
-    title: "Premiers recrutements",
-    description:
-      "L'association recrute ses premiers salariés pour soutenir le développement de ses projets.",
-  },
-  {
-    year: "2023-2025",
-    title: "Expansion continue",
-    description:
-      "Focus sur le développement de Tonight Pass et préparation à une transformation future en entreprise.",
-  },
-];
-
-const NPOPage: React.FC = () => {
+const values = [
+  { key: "innovation", icon: Rocket },
+  { key: "community", icon: Users },
+  { key: "passion", icon: Heart },
+  { key: "learning", icon: GraduationCap },
+] as const;
+
+const timelineYears = ["2015", "2020", "2021", "2022", "2023-2025"] as const;
+
+const NPOPage: React.FC = async () => {
+  const { t } = await getTranslation("screens/marketing/npo");
+
   return (
     <>
       <OrganizationSchema />
 
       <main className="min-h-screen pt-32 pb-16 w-full">
         <div className="px-4 md:px-0 max-w-5xl mx-auto space-y-32 w-full">
-          
+
           <div className="relative max-w-2xl mx-auto flex flex-col items-center gap-6 text-center mb-24">
             <h1 className="font-medium text-4xl md:text-5xl text-foreground">
-              L&apos;Association onRuntime Studio
+              {t("hero.title")}
             </h1>
 
             <p className="text-muted-foreground">
-              Une association loi 1901 dédiée à l&apos;innovation et la
-              créativité dans le domaine du développement web, mobile et design.
+              {t("hero.description")}
             </p>
 
             <div className="flex gap-3">
               <Link href="#adhesion">
-                <Button>Devenir membre</Button>
+                <Button>{t("cta.become-member")}</Button>
               </Link>
 
               <Link href={Routes.projects}>
-                <Button variant="outline">Nos projets</Button>
+                <Button variant="outline">{t("cta.our-projects")}</Button>
               </Link>
             </div>
 
@@ -132,26 +83,21 @@ const NPOPage: React.FC = () => {
           <section className="mb-24">
             <div className="text-center max-w-2xl mx-auto mb-12">
               <h2 className="text-3xl font-medium text-foreground mb-4">
-                Notre histoire
+                {t("history.title")}
               </h2>
               <p className="text-muted-foreground mb-8">
-                Fondée en 2020, onRuntime Studio est née de la passion commune
-                de développeurs et designers qui collaborent ensemble depuis
-                2015. Notre association a pour vocation de créer un espace
-                collaboratif pour innover et partager nos connaissances, avec
-                l&apos;ambition de devenir prochainement une entreprise à part
-                entière.
+                {t("history.description")}
               </p>
             </div>
 
             <div className="relative">
-              
+
               <div className="absolute left-1/2 transform -translate-x-1/2 h-full w-0.5 bg-border"></div>
 
               <div className="space-y-12">
-                {historyTimeline.map((item, index) => (
+                {timelineYears.map((year, index) => (
                   <div
-                    key={index}
+                    key={year}
                     className={`flex items-start relative ${
                       index % 2 === 0 ? "flex-row-reverse" : "flex-row"
                     }`}
@@ -166,13 +112,13 @@ const NPOPage: React.FC = () => {
                       }`}
                     >
                       <div className="mb-1 text-2xl font-semibold text-onruntime-blue">
-                        {item.year}
+                        {year}
                       </div>
                       <h3 className="text-lg font-medium text-foreground mb-2">
-                        {item.title}
+                        {t(`history.timeline.${year}.title`)}
                       </h3>
                       <p className="text-muted-foreground">
-                        {item.description}
+                        {t(`history.timeline.${year}.description`)}
                       </p>
                     </div>
                   </div>
@@ -184,12 +130,10 @@ const NPOPage: React.FC = () => {
           <section className="mb-24" id="team">
             <div className="text-center max-w-2xl mx-auto mb-12">
               <h2 className="text-3xl font-medium text-foreground mb-4">
-                Les fondateurs
+                {t("founders.title")}
               </h2>
               <p className="text-muted-foreground">
-                Notre association a été fondée par trois passionnés qui
-                travaillent ensemble depuis plusieurs années pour donner vie à
-                des projets innovants.
+                {t("founders.description")}
               </p>
             </div>
 
@@ -226,7 +170,7 @@ const NPOPage: React.FC = () => {
                       >
                         <Button variant="outline" size="sm">
                           <Globe className="w-4 h-4 mr-2" />
-                          Site web
+                          {t("founders.website")}
                         </Button>
                       </Link>
                     )}
@@ -244,7 +188,7 @@ const NPOPage: React.FC = () => {
                           >
                             <path d="M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433c-1.144 0-2.063-.926-2.063-2.065 0-1.138.92-2.063 2.063-2.063 1.14 0 2.064.925 2.064 2.063 0 1.139-.925 2.065-2.064 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z" />
                           </svg>
-                          LinkedIn
+                          {t("founders.linkedin")}
                         </Button>
                       </Link>
                     )}
@@ -257,29 +201,30 @@ const NPOPage: React.FC = () => {
           <section className="mb-24">
             <div className="text-center max-w-2xl mx-auto mb-12">
               <h2 className="text-3xl font-medium text-foreground mb-4">
-                Nos valeurs
+                {t("values.title")}
               </h2>
               <p className="text-muted-foreground">
-                Ces principes fondamentaux guident notre approche et notre
-                vision, influençant chacune de nos actions et décisions.
+                {t("values.description")}
               </p>
             </div>
 
             <div className="grid md:grid-cols-2 gap-8">
-              {npoValues.map((value, index) => (
+              {values.map(({ key, icon: Icon }) => (
                 <div
-                  key={index}
+                  key={key}
                   className="p-6 border rounded-lg bg-card hover:border-onruntime-blue transition-colors"
                 >
                   <div className="flex items-center gap-4 mb-4">
                     <div className="p-2 rounded-md bg-onruntime-blue/10 text-onruntime-blue">
-                      <value.icon className="w-5 h-5" />
+                      <Icon className="w-5 h-5" />
                     </div>
                     <h3 className="text-xl font-medium text-foreground">
-                      {value.title}
+                      {t(`values.items.${key}.title`)}
                     </h3>
                   </div>
-                  <p className="text-muted-foreground">{value.description}</p>
+                  <p className="text-muted-foreground">
+                    {t(`values.items.${key}.description`)}
+                  </p>
                 </div>
               ))}
             </div>
@@ -288,11 +233,10 @@ const NPOPage: React.FC = () => {
           <section className="mb-24">
             <div className="text-center max-w-2xl mx-auto mb-12">
               <h2 className="text-3xl font-medium text-foreground mb-4">
-                Notre expertise technique
+                {t("expertise.title")}
               </h2>
               <p className="text-muted-foreground">
-                Les technologies que nous maîtrisons et utilisons dans nos
-                projets associatifs.
+                {t("expertise.description")}
               </p>
             </div>
 
@@ -302,11 +246,10 @@ const NPOPage: React.FC = () => {
           <section className="mb-24" id="adhesion">
             <div className="text-center max-w-2xl mx-auto mb-12">
               <h2 className="text-3xl font-medium text-foreground mb-4">
-                Devenir membre
+                {t("membership.title")}
               </h2>
               <p className="text-muted-foreground">
-                Rejoignez notre communauté de passionnés et participez au
-                développement de projets innovants.
+                {t("membership.description")}
               </p>
             </div>
 
@@ -317,20 +260,19 @@ const NPOPage: React.FC = () => {
                     <CreditCard className="w-5 h-5" />
                   </div>
                   <h3 className="text-xl font-medium text-foreground">
-                    Adhésion annuelle
+                    {t("membership.annual.title")}
                   </h3>
                 </div>
 
                 <div className="mb-6">
                   <div className="text-3xl font-semibold text-foreground mb-2">
-                    30€
+                    {t("membership.annual.price")}
                     <span className="text-sm font-normal text-muted-foreground">
-                      /an
+                      {t("membership.annual.period")}
                     </span>
                   </div>
                   <p className="text-muted-foreground">
-                    Cotisation annuelle pour devenir membre bénévole de
-                    l&apos;association.
+                    {t("membership.annual.description")}
                   </p>
                 </div>
 
@@ -338,44 +280,44 @@ const NPOPage: React.FC = () => {
                   <div className="flex items-start gap-3">
                     <Clock className="w-5 h-5 text-muted-foreground flex-shrink-0 mt-0.5" />
                     <p className="text-muted-foreground">
-                      Engagement de 3 à 6 heures par semaine
+                      {t("membership.annual.benefits.hours")}
                     </p>
                   </div>
                   <div className="flex items-start gap-3">
                     <Users className="w-5 h-5 text-muted-foreground flex-shrink-0 mt-0.5" />
                     <p className="text-muted-foreground">
-                      Participation aux projets associatifs
+                      {t("membership.annual.benefits.projects")}
                     </p>
                   </div>
                   <div className="flex items-start gap-3">
                     <MessageSquare className="w-5 h-5 text-muted-foreground flex-shrink-0 mt-0.5" />
                     <p className="text-muted-foreground">
-                      Rôle Discord dédié et accès aux salons privés
+                      {t("membership.annual.benefits.discord")}
                     </p>
                   </div>
                   <div className="flex items-start gap-3">
                     <GraduationCap className="w-5 h-5 text-muted-foreground flex-shrink-0 mt-0.5" />
                     <p className="text-muted-foreground">
-                      Mentorat personnalisé par nos membres expérimentés
+                      {t("membership.annual.benefits.mentoring")}
                     </p>
                   </div>
                   <div className="flex items-start gap-3">
                     <FileText className="w-5 h-5 text-muted-foreground flex-shrink-0 mt-0.5" />
                     <p className="text-muted-foreground">
-                      Accès à toutes nos ressources et formations
+                      {t("membership.annual.benefits.resources")}
                     </p>
                   </div>
                   <div className="flex items-start gap-3">
                     <Rocket className="w-5 h-5 text-muted-foreground flex-shrink-0 mt-0.5" />
                     <p className="text-muted-foreground">
-                      Autonomie sur les projets de l&apos;association
+                      {t("membership.annual.benefits.autonomy")}
                     </p>
                   </div>
                 </div>
 
                 <Link href={Routes.contact}>
                   <Button className="w-full">
-                    Demander mon adhésion
+                    {t("membership.annual.cta")}
                     <ArrowRight className="ml-2 w-4 h-4" />
                   </Button>
                 </Link>
@@ -388,11 +330,10 @@ const NPOPage: React.FC = () => {
           <section className="mb-24" id="initiatives">
             <div className="text-center max-w-2xl mx-auto mb-12">
               <h2 className="text-3xl font-medium text-foreground mb-4">
-                Nos programmes et initiatives
+                {t("initiatives.title")}
               </h2>
               <p className="text-muted-foreground">
-                Découvrez les initiatives que nous développons actuellement et
-                nos projets à venir.
+                {t("initiatives.description")}
               </p>
             </div>
 
@@ -403,19 +344,17 @@ const NPOPage: React.FC = () => {
                     <Calendar className="h-5 w-5 text-onruntime-blue" />
                   </div>
                   <h3 className="text-xl font-medium text-foreground">
-                    Programme de mentorat technique
+                    {t("initiatives.mentoring.title")}
                   </h3>
                 </div>
                 <p className="text-muted-foreground mb-6">
-                  Notre programme de mentorat permet aux membres débutants
-                  d&apos;être accompagnés dans leur montée en compétences par des
-                  développeurs et designers expérimentés de l&apos;association.
+                  {t("initiatives.mentoring.description")}
                 </p>
 
                 <div className="flex items-center gap-2 mt-8">
                   <div className="w-2 h-2 rounded-full bg-green-500"></div>
                   <span className="text-xs text-muted-foreground">
-                    Actuellement actif
+                    {t("initiatives.mentoring.status")}
                   </span>
                 </div>
               </div>
@@ -427,19 +366,17 @@ const NPOPage: React.FC = () => {
               <div className="relative overflow-hidden rounded-lg border bg-card p-6 hover:border-onruntime-blue transition-colors">
                 <div className="flex items-center gap-4 mb-4">
                   <h3 className="text-lg font-medium text-foreground">
-                    Ateliers techniques collaboratifs
+                    {t("initiatives.workshops.title")}
                   </h3>
                 </div>
                 <p className="text-muted-foreground mb-6">
-                  Sessions de travail et d&apos;apprentissage en groupe sur des
-                  technologies spécifiques, organisées en ligne et en présentiel
-                  quand possible.
+                  {t("initiatives.workshops.description")}
                 </p>
 
                 <div className="flex items-center gap-2 mt-6">
                   <div className="w-2 h-2 rounded-full bg-yellow-500"></div>
                   <span className="text-xs text-muted-foreground">
-                    En phase de développement
+                    {t("initiatives.workshops.status")}
                   </span>
                 </div>
               </div>
@@ -447,19 +384,17 @@ const NPOPage: React.FC = () => {
               <div className="relative overflow-hidden rounded-lg border bg-card p-6 hover:border-onruntime-blue transition-colors">
                 <div className="flex items-center gap-4 mb-4">
                   <h3 className="text-lg font-medium text-foreground">
-                    Hackathons communautaires
+                    {t("initiatives.hackathons.title")}
                   </h3>
                 </div>
                 <p className="text-muted-foreground mb-6">
-                  Organisation d&apos;événements de 48h où des équipes développeront
-                  ensemble des solutions innovantes sur des problématiques
-                  précises.
+                  {t("initiatives.hackathons.description")}
                 </p>
 
                 <div className="flex items-center gap-2 mt-6">
                   <div className="w-2 h-2 rounded-full bg-blue-500"></div>
                   <span className="text-xs text-muted-foreground">
-                    Projet futur
+                    {t("initiatives.hackathons.status")}
                   </span>
                 </div>
               </div>
@@ -467,11 +402,11 @@ const NPOPage: React.FC = () => {
 
             <div className="text-center mt-10">
               <p className="text-muted-foreground mb-4">
-                Vous souhaitez contribuer au développement de ces initiatives ?
+                {t("initiatives.contribute")}
               </p>
               <Link href={Routes.contact}>
                 <Button variant="outline">
-                  Nous contacter
+                  {t("initiatives.contact")}
                   <ArrowRight className="ml-2 w-4 h-4" />
                 </Button>
               </Link>
@@ -482,18 +417,16 @@ const NPOPage: React.FC = () => {
             <div className="relative overflow-hidden rounded-lg border bg-card p-8">
               <div className="max-w-2xl">
                 <h2 className="text-3xl font-medium text-foreground mb-4">
-                  Rejoignez notre communauté Discord
+                  {t("discord.title")}
                 </h2>
                 <p className="text-muted-foreground mb-6">
-                  Connectez-vous avec les autres membres, participez aux
-                  discussions techniques et restez informé des dernières
-                  actualités de l&apos;association.
+                  {t("discord.description")}
                 </p>
                 <div className="flex flex-wrap gap-4">
                   <Link href={Routes.socials.discord}>
                     <Button>
                       <MessageSquare className="w-4 h-4 mr-2" />
-                      Rejoindre le Discord
+                      {t("discord.cta")}
                     </Button>
                   </Link>
                 </div>

From a47f7801f81803335d641ff4b1bbd34ce73ef103 Mon Sep 17 00:00:00 2001
From: Antoine Kingue <etorefr@gmail.com>
Date: Sun, 28 Dec 2025 20:31:36 +0100
Subject: [PATCH 09/64] =?UTF-8?q?=F0=9F=8C=90=20add=20contact=20page=20tra?=
 =?UTF-8?q?nslations?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 apps/web/src/app/[locale]/contact/page.tsx    |  6 +-
 apps/web/src/locales/en/app/contact/page.json |  6 ++
 .../locales/en/screens/marketing/contact.json | 55 ++++++++++++++
 apps/web/src/locales/fr/app/contact/page.json |  6 ++
 .../locales/fr/screens/marketing/contact.json | 55 ++++++++++++++
 .../src/screens/marketing/contact/index.tsx   | 74 ++++++++++---------
 6 files changed, 165 insertions(+), 37 deletions(-)
 create mode 100644 apps/web/src/locales/en/app/contact/page.json
 create mode 100644 apps/web/src/locales/en/screens/marketing/contact.json
 create mode 100644 apps/web/src/locales/fr/app/contact/page.json
 create mode 100644 apps/web/src/locales/fr/screens/marketing/contact.json

diff --git a/apps/web/src/app/[locale]/contact/page.tsx b/apps/web/src/app/[locale]/contact/page.tsx
index 6a33d7733..30807ddad 100644
--- a/apps/web/src/app/[locale]/contact/page.tsx
+++ b/apps/web/src/app/[locale]/contact/page.tsx
@@ -1,10 +1,12 @@
 import { constructMetadata } from "@/lib/utils/metadata";
+import { getTranslation } from "@/lib/translations.server";
 import ContactPage from "@/screens/marketing/contact";
 
 export async function generateMetadata() {
+  const { t } = await getTranslation("app/contact/page");
   return constructMetadata({
-    title: "Contactez notre agence web pour votre projet digital",
-    description: "Besoin d'une agence web pour votre projet ? Contactez notre équipe d'experts en développement et design pour transformer votre vision en réalité digitale.",
+    title: t("metadata.title"),
+    description: t("metadata.description"),
   });
 }
 
diff --git a/apps/web/src/locales/en/app/contact/page.json b/apps/web/src/locales/en/app/contact/page.json
new file mode 100644
index 000000000..bd88a9d51
--- /dev/null
+++ b/apps/web/src/locales/en/app/contact/page.json
@@ -0,0 +1,6 @@
+{
+  "metadata": {
+    "title": "Contact our web agency for your digital project",
+    "description": "Need a web agency for your project? Contact our team of development and design experts to transform your vision into digital reality."
+  }
+}
diff --git a/apps/web/src/locales/en/screens/marketing/contact.json b/apps/web/src/locales/en/screens/marketing/contact.json
new file mode 100644
index 000000000..60409c689
--- /dev/null
+++ b/apps/web/src/locales/en/screens/marketing/contact.json
@@ -0,0 +1,55 @@
+{
+  "hero": {
+    "title": "Let's discuss your project",
+    "description": "We are always happy to discuss new projects. Contact us to share your ideas and see how we can help you."
+  },
+  "form": {
+    "name": {
+      "label": "Full name",
+      "placeholder": "John Doe"
+    },
+    "email": {
+      "label": "Email",
+      "placeholder": "you@example.com"
+    },
+    "message": {
+      "label": "Message",
+      "placeholder": "Describe your project..."
+    },
+    "submit": "Send message",
+    "submitting": "Sending..."
+  },
+  "toast": {
+    "success": {
+      "title": "Message sent",
+      "description": "We will get back to you as soon as possible."
+    },
+    "error": {
+      "title": "Error",
+      "description": "An error occurred while sending the message",
+      "fallback": "An error occurred"
+    }
+  },
+  "info": {
+    "title": "Contact information",
+    "email": {
+      "label": "Email"
+    },
+    "offices": {
+      "label": "Our offices",
+      "value": "Rouen & Paris, France"
+    },
+    "phone": {
+      "label": "Phone"
+    }
+  },
+  "hours": {
+    "title": "Opening hours",
+    "timezone": "(Paris time)",
+    "weekdays": "Monday - Friday:",
+    "weekdays-time": "9:00 - 18:00",
+    "weekend": "Weekend:",
+    "weekend-time": "Closed"
+  },
+  "tagline": "A creative studio dedicated to transforming your ideas into digital reality."
+}
diff --git a/apps/web/src/locales/fr/app/contact/page.json b/apps/web/src/locales/fr/app/contact/page.json
new file mode 100644
index 000000000..d58e40b4b
--- /dev/null
+++ b/apps/web/src/locales/fr/app/contact/page.json
@@ -0,0 +1,6 @@
+{
+  "metadata": {
+    "title": "Contactez notre agence web pour votre projet digital",
+    "description": "Besoin d'une agence web pour votre projet ? Contactez notre équipe d'experts en développement et design pour transformer votre vision en réalité digitale."
+  }
+}
diff --git a/apps/web/src/locales/fr/screens/marketing/contact.json b/apps/web/src/locales/fr/screens/marketing/contact.json
new file mode 100644
index 000000000..812ea5e6d
--- /dev/null
+++ b/apps/web/src/locales/fr/screens/marketing/contact.json
@@ -0,0 +1,55 @@
+{
+  "hero": {
+    "title": "Discutons de votre projet",
+    "description": "Nous sommes toujours ravis d'échanger sur de nouveaux projets. Contactez-nous pour discuter de vos idées et voir comment nous pouvons vous aider."
+  },
+  "form": {
+    "name": {
+      "label": "Nom complet",
+      "placeholder": "John Doe"
+    },
+    "email": {
+      "label": "Email",
+      "placeholder": "you@example.com"
+    },
+    "message": {
+      "label": "Message",
+      "placeholder": "Décrivez votre projet..."
+    },
+    "submit": "Envoyer le message",
+    "submitting": "Envoi en cours..."
+  },
+  "toast": {
+    "success": {
+      "title": "Message envoyé",
+      "description": "Nous vous répondrons dans les plus brefs délais."
+    },
+    "error": {
+      "title": "Erreur",
+      "description": "Une erreur est survenue lors de l'envoi du message",
+      "fallback": "Une erreur est survenue"
+    }
+  },
+  "info": {
+    "title": "Informations de contact",
+    "email": {
+      "label": "Email"
+    },
+    "offices": {
+      "label": "Nos bureaux",
+      "value": "Rouen & Paris, France"
+    },
+    "phone": {
+      "label": "Téléphone"
+    }
+  },
+  "hours": {
+    "title": "Horaires d'ouverture",
+    "timezone": "(heure de Paris)",
+    "weekdays": "Lundi - Vendredi:",
+    "weekdays-time": "9:00 - 18:00",
+    "weekend": "Weekend:",
+    "weekend-time": "Fermé"
+  },
+  "tagline": "Un studio créatif dédié à transformer vos idées en réalité numérique."
+}
diff --git a/apps/web/src/screens/marketing/contact/index.tsx b/apps/web/src/screens/marketing/contact/index.tsx
index 802c49631..34b532a9b 100644
--- a/apps/web/src/screens/marketing/contact/index.tsx
+++ b/apps/web/src/screens/marketing/contact/index.tsx
@@ -12,10 +12,12 @@ import { contactFormSchema } from "@/lib/schema/contact";
 import { z } from "zod";
 import { useToast } from "@/hooks/use-toast";
 import { LocalBusinessSchema } from "@/components/json-ld/localbusiness-schema";
+import { useTranslation } from "@onruntime/translations/react";
 
 type FormData = z.infer<typeof contactFormSchema>;
 
 const ContactPage = () => {
+  const { t } = useTranslation("screens/marketing/contact");
   const { toast } = useToast();
   const {
     register,
@@ -40,23 +42,23 @@ const ContactPage = () => {
 
       if (!response.ok) {
         toast({
-          title: "Erreur",
-          description: result.error || "Une erreur est survenue",
+          title: t("toast.error.title"),
+          description: result.error || t("toast.error.fallback"),
           variant: "destructive",
         });
         return;
       }
 
       toast({
-        title: "Message envoyé",
-        description: "Nous vous répondrons dans les plus brefs délais.",
+        title: t("toast.success.title"),
+        description: t("toast.success.description"),
       });
 
       reset();
     } catch {
       toast({
-        title: "Erreur",
-        description: "Une erreur est survenue lors de l'envoi du message",
+        title: t("toast.error.title"),
+        description: t("toast.error.description"),
         variant: "destructive",
       });
     }
@@ -67,17 +69,12 @@ const ContactPage = () => {
       <LocalBusinessSchema />
       <main className="min-h-screen pt-32 pb-16">
         <div className="px-4 md:px-0 max-w-5xl mx-auto">
-          
           <div className="relative max-w-2xl mx-auto flex flex-col items-center gap-6 text-center mb-16">
             <h1 className="font-semibold text-4xl md:text-5xl text-foreground">
-              Discutons de votre projet
+              {t("hero.title")}
             </h1>
 
-            <p className="text-muted-foreground">
-              Nous sommes toujours ravis d&apos;échanger sur de nouveaux
-              projets. Contactez-nous pour discuter de vos idées et voir comment
-              nous pouvons vous aider.
-            </p>
+            <p className="text-muted-foreground">{t("hero.description")}</p>
 
             <DotPattern
               width={30}
@@ -90,13 +87,12 @@ const ContactPage = () => {
           </div>
 
           <div className="grid md:grid-cols-2 gap-12 items-start">
-            
             <div className="bg-card rounded-lg p-6 border">
               <form onSubmit={handleSubmit(onSubmit)} className="space-y-6">
                 <div className="space-y-4">
                   <label className="block">
                     <span className="text-sm font-semibold text-foreground">
-                      Nom complet
+                      {t("form.name.label")}
                     </span>
                     <input
                       {...register("name")}
@@ -105,7 +101,7 @@ const ContactPage = () => {
                         "mt-1 block w-full rounded-md border border-input bg-background px-3 py-2 text-sm",
                         errors.name && "border-red-500"
                       )}
-                      placeholder="John Doe"
+                      placeholder={t("form.name.placeholder")}
                     />
                     {errors.name && (
                       <p className="mt-1 text-xs text-red-500">
@@ -116,7 +112,7 @@ const ContactPage = () => {
 
                   <label className="block">
                     <span className="text-sm font-semibold text-foreground">
-                      Email
+                      {t("form.email.label")}
                     </span>
                     <input
                       {...register("email")}
@@ -125,7 +121,7 @@ const ContactPage = () => {
                         "mt-1 block w-full rounded-md border border-input bg-background px-3 py-2 text-sm",
                         errors.email && "border-red-500"
                       )}
-                      placeholder="you@example.com"
+                      placeholder={t("form.email.placeholder")}
                     />
                     {errors.email && (
                       <p className="mt-1 text-xs text-red-500">
@@ -136,7 +132,7 @@ const ContactPage = () => {
 
                   <label className="block">
                     <span className="text-sm font-semibold text-foreground">
-                      Message
+                      {t("form.message.label")}
                     </span>
                     <textarea
                       {...register("message")}
@@ -144,7 +140,7 @@ const ContactPage = () => {
                         "mt-1 block w-full rounded-md border border-input bg-background px-3 py-2 text-sm min-h-32",
                         errors.message && "border-red-500"
                       )}
-                      placeholder="Décrivez votre projet..."
+                      placeholder={t("form.message.placeholder")}
                     />
                     {errors.message && (
                       <p className="mt-1 text-xs text-red-500">
@@ -158,7 +154,7 @@ const ContactPage = () => {
                   {isSubmitting && (
                     <Loader2 className="mr-2 h-4 w-4 animate-spin" />
                   )}
-                  {isSubmitting ? "Envoi en cours..." : "Envoyer le message"}
+                  {isSubmitting ? t("form.submitting") : t("form.submit")}
                 </Button>
               </form>
             </div>
@@ -166,7 +162,7 @@ const ContactPage = () => {
             <div className="space-y-8">
               <div>
                 <h2 className="text-xl font-semibold text-foreground mb-4">
-                  Informations de contact
+                  {t("info.title")}
                 </h2>
                 <div className="space-y-4">
                   <div className="flex items-center gap-3">
@@ -174,7 +170,9 @@ const ContactPage = () => {
                       <Mail className="w-5 h-5" />
                     </div>
                     <div>
-                      <p className="text-sm text-foreground">Email</p>
+                      <p className="text-sm text-foreground">
+                        {t("info.email.label")}
+                      </p>
                       <p className="text-sm text-muted-foreground">
                         contact@onruntime.com
                       </p>
@@ -186,9 +184,11 @@ const ContactPage = () => {
                       <MapPin className="w-5 h-5" />
                     </div>
                     <div>
-                      <p className="text-sm text-foreground">Nos bureaux</p>
+                      <p className="text-sm text-foreground">
+                        {t("info.offices.label")}
+                      </p>
                       <p className="text-sm text-muted-foreground">
-                        Rouen & Paris, France
+                        {t("info.offices.value")}
                       </p>
                     </div>
                   </div>
@@ -198,7 +198,9 @@ const ContactPage = () => {
                       <Phone className="w-5 h-5" />
                     </div>
                     <div>
-                      <p className="text-sm text-foreground">Téléphone</p>
+                      <p className="text-sm text-foreground">
+                        {t("info.phone.label")}
+                      </p>
                       <p className="text-sm text-muted-foreground">
                         +33 7 56 90 93 75
                       </p>
@@ -209,32 +211,34 @@ const ContactPage = () => {
 
               <div>
                 <h2 className="text-xl font-semibold text-foreground mb-4">
-                  Horaires d&apos;ouverture
+                  {t("hours.title")}{" "}
+                  <span className="text-sm font-normal text-muted-foreground">
+                    {t("hours.timezone")}
+                  </span>
                 </h2>
                 <div className="space-y-2">
                   <p className="text-sm">
                     <span className="text-foreground font-semibold">
-                      Lundi - Vendredi:
+                      {t("hours.weekdays")}
                     </span>
                     <span className="text-muted-foreground ml-2">
-                      9:00 - 18:00
+                      {t("hours.weekdays-time")}
                     </span>
                   </p>
                   <p className="text-sm">
                     <span className="text-foreground font-semibold">
-                      Weekend:
+                      {t("hours.weekend")}
+                    </span>
+                    <span className="text-muted-foreground ml-2">
+                      {t("hours.weekend-time")}
                     </span>
-                    <span className="text-muted-foreground ml-2">Fermé</span>
                   </p>
                 </div>
               </div>
 
               <div className="pt-6 border-t">
                 <OnRuntimeWordMark height={24} className="mb-4 h-4" />
-                <p className="text-sm text-muted-foreground">
-                  Un studio créatif dédié à transformer vos idées en réalité
-                  numérique.
-                </p>
+                <p className="text-sm text-muted-foreground">{t("tagline")}</p>
               </div>
             </div>
           </div>

From dad8e5a4fc09750b50ad8c6c41fe2de1a863474a Mon Sep 17 00:00:00 2001
From: Antoine Kingue <etorefr@gmail.com>
Date: Sun, 28 Dec 2025 21:14:14 +0100
Subject: [PATCH 10/64] =?UTF-8?q?=F0=9F=8C=90=20add=20legal=20pages=20tran?=
 =?UTF-8?q?slations?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/app/[locale]/(legal)/company/page.tsx |  14 +-
 .../src/app/[locale]/(legal)/privacy/page.tsx |  16 +-
 .../src/app/[locale]/(legal)/terms/page.tsx   |  16 +-
 .../src/components/marketing/legal/page.tsx   |  74 +++++----
 apps/web/src/content/en/legal/company.mdx     |  18 +++
 apps/web/src/content/en/legal/privacy.mdx     |  85 ++++++++++
 apps/web/src/content/en/legal/terms.mdx       | 152 ++++++++++++++++++
 .../src/content/{ => fr}/legal/company.mdx    |   0
 .../src/content/{ => fr}/legal/privacy.mdx    |   0
 apps/web/src/content/{ => fr}/legal/terms.mdx |   0
 apps/web/src/lib/mdx.tsx                      |   7 +-
 .../en/components/marketing/legal/page.json   |  13 ++
 .../fr/components/marketing/legal/page.json   |  13 ++
 13 files changed, 361 insertions(+), 47 deletions(-)
 create mode 100644 apps/web/src/content/en/legal/company.mdx
 create mode 100644 apps/web/src/content/en/legal/privacy.mdx
 create mode 100644 apps/web/src/content/en/legal/terms.mdx
 rename apps/web/src/content/{ => fr}/legal/company.mdx (100%)
 rename apps/web/src/content/{ => fr}/legal/privacy.mdx (100%)
 rename apps/web/src/content/{ => fr}/legal/terms.mdx (100%)
 create mode 100644 apps/web/src/locales/en/components/marketing/legal/page.json
 create mode 100644 apps/web/src/locales/fr/components/marketing/legal/page.json

diff --git a/apps/web/src/app/[locale]/(legal)/company/page.tsx b/apps/web/src/app/[locale]/(legal)/company/page.tsx
index 57ae1ef7a..5e8c5c3d6 100644
--- a/apps/web/src/app/[locale]/(legal)/company/page.tsx
+++ b/apps/web/src/app/[locale]/(legal)/company/page.tsx
@@ -5,16 +5,22 @@ import type { Metadata } from "next"
 
 const contentPath = "legal/company"
 
-export async function generateMetadata(): Promise<Metadata> {
-  const { frontmatter } = await getPageContent(contentPath)
+type PageProps = {
+  params: Promise<{ locale: string }>
+}
+
+export async function generateMetadata({ params }: PageProps): Promise<Metadata> {
+  const { locale } = await params
+  const { frontmatter } = await getPageContent(contentPath, locale)
   return constructMetadata({
     title: `${frontmatter.title}`,
     description: frontmatter.description,
   })
 }
 
-const CompanyPage = async () => {
-  const { frontmatter, content } = await getPageContent(contentPath)
+const CompanyPage = async ({ params }: PageProps) => {
+  const { locale } = await params
+  const { frontmatter, content } = await getPageContent(contentPath, locale)
 
   return <LegalPage title={frontmatter.title} description={frontmatter.description} content={content} lastUpdated={frontmatter.lastUpdated} />
 }
diff --git a/apps/web/src/app/[locale]/(legal)/privacy/page.tsx b/apps/web/src/app/[locale]/(legal)/privacy/page.tsx
index 704963347..19c34f707 100644
--- a/apps/web/src/app/[locale]/(legal)/privacy/page.tsx
+++ b/apps/web/src/app/[locale]/(legal)/privacy/page.tsx
@@ -5,18 +5,24 @@ import type { Metadata } from "next"
 
 const contentPath = "legal/privacy"
 
-export async function generateMetadata(): Promise<Metadata> {
-  const { frontmatter } = await getPageContent(contentPath)
+type PageProps = {
+  params: Promise<{ locale: string }>
+}
+
+export async function generateMetadata({ params }: PageProps): Promise<Metadata> {
+  const { locale } = await params
+  const { frontmatter } = await getPageContent(contentPath, locale)
   return constructMetadata({
     title: `${frontmatter.title}`,
     description: frontmatter.description,
   })
 }
 
-const PrivacyPage = async () => {
-  const { frontmatter, content } = await getPageContent(contentPath)
+const PrivacyPage = async ({ params }: PageProps) => {
+  const { locale } = await params
+  const { frontmatter, content } = await getPageContent(contentPath, locale)
 
   return <LegalPage title={frontmatter.title} description={frontmatter.description} content={content} lastUpdated={frontmatter.lastUpdated} />
 }
 
-export default PrivacyPage
\ No newline at end of file
+export default PrivacyPage
diff --git a/apps/web/src/app/[locale]/(legal)/terms/page.tsx b/apps/web/src/app/[locale]/(legal)/terms/page.tsx
index c34b0668e..2809872c6 100644
--- a/apps/web/src/app/[locale]/(legal)/terms/page.tsx
+++ b/apps/web/src/app/[locale]/(legal)/terms/page.tsx
@@ -5,18 +5,24 @@ import type { Metadata } from "next"
 
 const contentPath = "legal/terms"
 
-export async function generateMetadata(): Promise<Metadata> {
-  const { frontmatter } = await getPageContent(contentPath)
+type PageProps = {
+  params: Promise<{ locale: string }>
+}
+
+export async function generateMetadata({ params }: PageProps): Promise<Metadata> {
+  const { locale } = await params
+  const { frontmatter } = await getPageContent(contentPath, locale)
   return constructMetadata({
     title: `${frontmatter.title}`,
     description: frontmatter.description,
   })
 }
 
-const TermsPage = async () => {
-  const { frontmatter, content } = await getPageContent(contentPath)
+const TermsPage = async ({ params }: PageProps) => {
+  const { locale } = await params
+  const { frontmatter, content } = await getPageContent(contentPath, locale)
 
   return <LegalPage title={frontmatter.title} description={frontmatter.description} content={content} lastUpdated={frontmatter.lastUpdated} />
 }
 
-export default TermsPage
\ No newline at end of file
+export default TermsPage
diff --git a/apps/web/src/components/marketing/legal/page.tsx b/apps/web/src/components/marketing/legal/page.tsx
index ab423c6ee..53ec8a5c5 100644
--- a/apps/web/src/components/marketing/legal/page.tsx
+++ b/apps/web/src/components/marketing/legal/page.tsx
@@ -1,36 +1,36 @@
-import React from 'react'
-import { Button } from "@/components/ui/button"
-import DotPattern from "@/components/ui/dot-pattern"
-import { cn } from "@/lib/utils"
-import { Mail } from 'lucide-react'
-import { Link } from "@onruntime/translations/next"
-import Routes from '@/constants/routes'
+import React from "react";
+import { Button } from "@/components/ui/button";
+import DotPattern from "@/components/ui/dot-pattern";
+import { cn } from "@/lib/utils";
+import { Mail } from "lucide-react";
+import { Link } from "@onruntime/translations/next";
+import Routes from "@/constants/routes";
+import { getTranslation } from "@/lib/translations.server";
 
 interface LegalPageProps {
-  title: string
-  description: string
-  content: React.ReactElement
+  title: string;
+  description: string;
+  content: React.ReactElement;
   lastUpdated: string;
 }
 
-const LegalPage: React.FC<LegalPageProps> = ({
+const LegalPage: React.FC<LegalPageProps> = async ({
   title,
   description,
   content,
-  lastUpdated
+  lastUpdated,
 }) => {
+  const { t } = await getTranslation("components/marketing/legal/page");
+
   return (
     <main className="min-h-screen pt-32 pb-16">
       <div className="px-4 md:px-0 max-w-3xl mx-auto">
-        
         <div className="relative max-w-2xl mx-auto flex flex-col items-center gap-6 text-center mb-16">
           <h1 className="font-semibold text-4xl md:text-5xl text-foreground">
             {title}
           </h1>
-          
-          <p className="text-muted-foreground">
-            {description}
-          </p>
+
+          <p className="text-muted-foreground">{description}</p>
 
           <DotPattern
             width={30}
@@ -42,8 +42,11 @@ const LegalPage: React.FC<LegalPageProps> = ({
           />
         </div>
 
-        <p className="text-sm text-muted-foreground italic mb-8" suppressHydrationWarning>
-          Dernière mise à jour : {new Date(lastUpdated).toLocaleDateString()}
+        <p
+          className="text-sm text-muted-foreground italic mb-8"
+          suppressHydrationWarning
+        >
+          {t("last-updated")} {new Date(lastUpdated).toLocaleDateString()}
         </p>
 
         <div className="prose prose-neutral dark:prose-invert max-w-none">
@@ -52,34 +55,43 @@ const LegalPage: React.FC<LegalPageProps> = ({
 
         <div className="mt-16 p-6 border rounded-lg bg-card">
           <h2 className="text-xl font-semibold text-foreground mb-4">
-            Une question à propos de nos conditions ?
+            {t("question.title")}
           </h2>
           <p className="text-muted-foreground mb-6">
-            Notre équipe est à votre disposition pour répondre à toutes vos questions.
+            {t("question.description")}
           </p>
 
           <Link href="mailto:admin@onruntime.com">
             <Button className="flex items-center gap-2">
               <Mail className="w-4 h-4" />
-              Nous contacter
+              {t("question.cta")}
             </Button>
           </Link>
         </div>
 
         <nav className="mt-8 flex flex-wrap gap-4 text-sm text-muted-foreground">
-          <Link href={Routes.legals.company} className="hover:text-foreground transition-colors">
-            Détails de l&apos;entreprise
+          <Link
+            href={Routes.legals.company}
+            className="hover:text-foreground transition-colors"
+          >
+            {t("nav.company")}
           </Link>
-          <Link href={Routes.legals.privacy} className="hover:text-foreground transition-colors">
-            Politique de confidentialité
+          <Link
+            href={Routes.legals.privacy}
+            className="hover:text-foreground transition-colors"
+          >
+            {t("nav.privacy")}
           </Link>
-          <Link href={Routes.legals.terms} className="hover:text-foreground transition-colors">
-            Conditions générales
+          <Link
+            href={Routes.legals.terms}
+            className="hover:text-foreground transition-colors"
+          >
+            {t("nav.terms")}
           </Link>
         </nav>
       </div>
     </main>
-  )
-}
+  );
+};
 
-export default LegalPage
+export default LegalPage;
diff --git a/apps/web/src/content/en/legal/company.mdx b/apps/web/src/content/en/legal/company.mdx
new file mode 100644
index 000000000..f7d4f706f
--- /dev/null
+++ b/apps/web/src/content/en/legal/company.mdx
@@ -0,0 +1,18 @@
+---
+title: Company Details
+description: "Legal notices and information about onRuntime Studio: company name, headquarters, and contacts."
+lastUpdated: "2024-01-30"
+---
+
+Website publisher: [onRuntime Studio](/)  
+Technical provider (website host): [Vercel Inc.](https://vercel.com)
+
+---
+
+Headquarters: **La Combe, La Roche-de-Rame, 05310, France**
+
+Intra-community VAT number: `FR05899573471`  
+SIRET number: `89957347100013`  
+Share capital: *A French non-profit association (loi 1901) has no share capital.*
+
+Board: **Jérémy Baudrin, Lucas Bodin and Killian Mendy**
diff --git a/apps/web/src/content/en/legal/privacy.mdx b/apps/web/src/content/en/legal/privacy.mdx
new file mode 100644
index 000000000..11b3029a9
--- /dev/null
+++ b/apps/web/src/content/en/legal/privacy.mdx
@@ -0,0 +1,85 @@
+---
+title: Privacy Policy
+description: "How we protect your privacy and use data across all our services and projects"
+lastUpdated: "2025-02-15"
+---
+
+## Introduction
+
+At onRuntime Studio, we place great importance on protecting your privacy. This privacy policy explains how we collect and use data when you use our services and projects.
+
+## Data collected
+
+### Browsing data
+
+We use two third-party analytics tools to understand the use of our services:
+
+- **Umami Analytics**: A privacy-friendly analytics tool that collects anonymized visit data
+- **Google Analytics 4**: For in-depth performance analysis
+
+These services collect anonymized data such as:
+- Pages visited
+- Visit duration
+- Traffic source
+- Browser and device information
+- Approximate location (country)
+
+These services are subject to their own privacy policies:
+- [Google Analytics Privacy Policy](https://policies.google.com/privacy)
+- [Umami Privacy Policy](https://umami.is/privacy)
+
+### Contact form
+
+If you use our contact forms, we collect:
+- Your name
+- Your email address
+- The content of your message
+
+This information is used to process your request and is kept in our emails to ensure follow-up and quality of our services.
+
+## Use of data
+
+The collected data is used to:
+- Improve the user experience of our services
+- Analyze the performance of our platforms
+- Respond to your contact requests
+- Understand how our services are used
+
+## Data retention
+
+### Analytics data
+The retention period for analytics data is defined by the policies of Google Analytics and Umami. You can consult their respective policies for more details.
+
+### Contact data
+Messages you send us through contact forms are kept in our messaging system to ensure follow-up of our exchanges. You can request the deletion of this data at any time.
+
+## Your rights
+
+In accordance with the GDPR, you have the following rights:
+- Right of access to your data
+- Right to rectification
+- Right to erasure
+- Right to restriction of processing
+- Right to object
+
+To exercise these rights or for any questions about the processing of your data, contact us at [admin@onruntime.com](mailto:admin@onruntime.com).
+
+## Cookies and similar technologies
+
+Our services use technical and analytical cookies necessary for their operation and analysis of their use. You can control cookies through your browser settings.
+
+## Data transfer
+
+The analytics services we use may transfer data to servers located outside the EU. These transfers are governed by their respective privacy policies and the safeguards they implement.
+
+## Security
+
+We implement appropriate security measures to protect your data against any unauthorized access, modification, disclosure, or destruction.
+
+## Modifications
+
+We reserve the right to modify this policy at any time. Modifications take effect upon publication.
+
+## Legal basis
+
+This policy complies with the General Data Protection Regulation (GDPR) and the French Data Protection Act (Informatique et Libertés).
diff --git a/apps/web/src/content/en/legal/terms.mdx b/apps/web/src/content/en/legal/terms.mdx
new file mode 100644
index 000000000..7dcb3bbc3
--- /dev/null
+++ b/apps/web/src/content/en/legal/terms.mdx
@@ -0,0 +1,152 @@
+---
+title: Terms and Conditions
+description: "General terms and conditions of sale and use of onRuntime Studio services"
+lastUpdated: "2025-02-15"
+---
+
+## Article 1 - Scope
+
+These general terms and conditions apply to:
+- The use of all our services and projects
+- All sales of services provided by onRuntime Studio
+- All hosting services and associated subscriptions
+
+onRuntime Studio is a French non-profit association (loi 1901). You can find all our legal information on our [dedicated page](/company).
+
+## Article 2 - Services offered
+
+onRuntime Studio offers the following services:
+- Web and mobile development
+- UI/UX design
+- Technology consulting
+- Cloud and infrastructure solutions
+- Training and technical support
+- Website hosting and maintenance
+
+Services are detailed in quotes or commercial proposals specific to each project.
+
+## Article 3 - Contract formation
+
+### 3.1 Quote
+Any service is subject to a detailed quote, valid for 30 days from its date of issue, unless otherwise stated.
+
+### 3.2 Order
+The order is considered final after:
+- Written acceptance of the quote by the client
+- Payment of the required deposit
+- Signature of specific terms and conditions where applicable
+
+## Article 4 - Pricing and payment
+
+### 4.1 Pricing
+Prices are quoted in euros excluding taxes. The applicable VAT is that in effect on the date of invoicing.
+
+### 4.2 Payment terms
+#### 4.2.1 One-time services
+Unless otherwise specified, payments are made according to the following schedule:
+- 30% upon order
+- 40% at project start
+- 30% upon delivery
+
+#### 4.2.2 Hosting services
+Hosting services are subject to a monthly subscription:
+- Monthly billing
+- Payment at the beginning of the period
+- Commitment according to the specific terms of the service
+
+### 4.3 Late payment
+Any late payment will result in the application of late payment penalties at three times the legal interest rate, as well as a flat-rate compensation of €40 for recovery costs.
+
+## Article 5 - Use of services
+
+### 5.1 Terms of use
+The use of our services implies full and complete acceptance of these general terms and conditions.
+
+### 5.2 User obligations
+The user agrees to:
+- Use the services in accordance with their intended purpose
+- Not attempt to compromise their security
+- Respect the rights of third parties
+- Not use the services for illegal purposes
+
+### 5.3 Availability
+We strive to ensure the availability of our hosting services 24/7, but cannot guarantee it. Maintenance interruptions may occur and will, where possible, be notified in advance.
+
+## Article 6 - Intellectual property
+
+### 6.1 Copyright
+Unless explicitly stated otherwise, all elements composing our services (texts, images, code, etc.) remain our exclusive property.
+
+### 6.2 Usage license
+After full payment, the client receives a non-exclusive license to use the code and creations produced, according to the terms agreed in the quote.
+
+### 6.3 Source code
+Source code developed specifically for the client is delivered after full payment, unless otherwise stated in the quote.
+
+## Article 7 - Hosting and maintenance
+
+### 7.1 Hosting services
+Hosting services include:
+- Hosting of the website or application
+- Basic technical maintenance
+- Regular backups
+- Service monitoring
+
+### 7.2 Commitment
+Subscription to hosting services may be subject to a minimum commitment period, specified in the specific terms of the service.
+
+### 7.3 Termination
+Termination of hosting services must be notified with one month's notice before the end of the current period.
+
+## Article 8 - Training
+
+### 8.1 Program
+Training courses are subject to a detailed program and a specific agreement.
+
+### 8.2 Cancellation
+Any cancellation must be notified at least 15 days before the start of the training. Failing this, the training will be invoiced in full.
+
+## Article 9 - Liability
+
+### 9.1 Limitation of liability
+Our liability is limited to the amount of services paid by the client.
+
+### 9.2 Force majeure
+We cannot be held liable in case of force majeure according to the criteria established by French case law.
+
+### 9.3 Data
+The client is solely responsible for the data they use in connection with our services. We cannot be held liable for their loss or alteration.
+
+## Article 10 - Confidentiality
+
+### 10.1 Commitment
+We commit to keeping confidential the information you share with us as part of our services.
+
+### 10.2 Exceptions
+This confidentiality obligation does not apply to information that is:
+- Already public
+- Legally obtained from other sources
+- Required to be disclosed by law
+
+## Article 11 - Data protection
+
+The processing of personal data is subject to our privacy policy, available [here](/privacy).
+
+## Article 12 - Termination
+
+### 12.1 Termination for breach
+In case of serious breach by either party of its obligations, the other party may terminate the contract after formal notice remaining without effect for 30 days.
+
+### 12.2 Consequences
+In case of termination:
+- Services rendered are due
+- Licenses granted remain valid for code already delivered
+- Confidentiality obligations continue
+
+## Article 13 - Applicable law
+
+These terms are governed by French law. Any dispute falls under the exclusive jurisdiction of the courts of Gap, unless otherwise required by law.
+
+## Article 14 - Modifications
+
+We reserve the right to modify these terms at any time. Modifications take effect upon publication.
diff --git a/apps/web/src/content/legal/company.mdx b/apps/web/src/content/fr/legal/company.mdx
similarity index 100%
rename from apps/web/src/content/legal/company.mdx
rename to apps/web/src/content/fr/legal/company.mdx
diff --git a/apps/web/src/content/legal/privacy.mdx b/apps/web/src/content/fr/legal/privacy.mdx
similarity index 100%
rename from apps/web/src/content/legal/privacy.mdx
rename to apps/web/src/content/fr/legal/privacy.mdx
diff --git a/apps/web/src/content/legal/terms.mdx b/apps/web/src/content/fr/legal/terms.mdx
similarity index 100%
rename from apps/web/src/content/legal/terms.mdx
rename to apps/web/src/content/fr/legal/terms.mdx
diff --git a/apps/web/src/lib/mdx.tsx b/apps/web/src/lib/mdx.tsx
index ff565035e..2f6571cce 100644
--- a/apps/web/src/lib/mdx.tsx
+++ b/apps/web/src/lib/mdx.tsx
@@ -16,8 +16,11 @@ interface PageContent {
   content: React.ReactElement
 }
 
-export async function getPageContent(filename: string): Promise<PageContent> {
-  const filePath = path.join(contentDirectory, `${filename}.mdx`)
+export async function getPageContent(filename: string, locale?: string): Promise<PageContent> {
+  // Prepend locale to path: "legal/privacy" -> "fr/legal/privacy"
+  const filePath = locale
+    ? path.join(contentDirectory, locale, `${filename}.mdx`)
+    : path.join(contentDirectory, `${filename}.mdx`)
 
   try {
     if (!fs.existsSync(filePath)) {
diff --git a/apps/web/src/locales/en/components/marketing/legal/page.json b/apps/web/src/locales/en/components/marketing/legal/page.json
new file mode 100644
index 000000000..69c7c86f3
--- /dev/null
+++ b/apps/web/src/locales/en/components/marketing/legal/page.json
@@ -0,0 +1,13 @@
+{
+  "last-updated": "Last updated:",
+  "question": {
+    "title": "Have a question about our terms?",
+    "description": "Our team is available to answer all your questions.",
+    "cta": "Contact us"
+  },
+  "nav": {
+    "company": "Company details",
+    "privacy": "Privacy policy",
+    "terms": "Terms and conditions"
+  }
+}
diff --git a/apps/web/src/locales/fr/components/marketing/legal/page.json b/apps/web/src/locales/fr/components/marketing/legal/page.json
new file mode 100644
index 000000000..81d7751e3
--- /dev/null
+++ b/apps/web/src/locales/fr/components/marketing/legal/page.json
@@ -0,0 +1,13 @@
+{
+  "last-updated": "Dernière mise à jour :",
+  "question": {
+    "title": "Une question à propos de nos conditions ?",
+    "description": "Notre équipe est à votre disposition pour répondre à toutes vos questions.",
+    "cta": "Nous contacter"
+  },
+  "nav": {
+    "company": "Détails de l'entreprise",
+    "privacy": "Politique de confidentialité",
+    "terms": "Conditions générales"
+  }
+}

From a8d6a682c9690d14082fb40ea489649f7f71b2e9 Mon Sep 17 00:00:00 2001
From: Antoine Kingue <etorefr@gmail.com>
Date: Sun, 28 Dec 2025 22:26:30 +0100
Subject: [PATCH 11/64] =?UTF-8?q?=F0=9F=8C=90=20add=20careers=20pages=20tr?=
 =?UTF-8?q?anslations?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/app/[locale]/careers/[id]/page.tsx    |  40 ++--
 apps/web/src/app/[locale]/careers/page.tsx    |   8 +-
 apps/web/src/app/api/careers/[id]/route.ts    |  76 ++++----
 apps/web/src/app/api/careers/route.ts         |  56 +++---
 apps/web/src/lib/utils/careers.ts             |  46 +----
 .../src/locales/en/app/careers/[id]/page.json |  15 ++
 apps/web/src/locales/en/app/careers/page.json |   6 +
 .../marketing/careers/job-details.json        |  72 +++++++
 .../marketing/careers/job-list.json           |  20 ++
 .../locales/en/screens/marketing/careers.json |  61 ++++++
 .../src/locales/fr/app/careers/[id]/page.json |  15 ++
 apps/web/src/locales/fr/app/careers/page.json |   6 +
 .../marketing/careers/job-details.json        |  72 +++++++
 .../marketing/careers/job-list.json           |  20 ++
 .../locales/fr/screens/marketing/careers.json |  61 ++++++
 .../src/screens/marketing/careers/index.tsx   |  99 ++++------
 .../screens/marketing/careers/job-details.tsx | 181 +++++++++++-------
 .../screens/marketing/careers/job-list.tsx    |  54 ++++--
 apps/web/src/services/join.ts                 |  43 +++--
 apps/web/src/types/job.ts                     |  10 +-
 20 files changed, 671 insertions(+), 290 deletions(-)
 create mode 100644 apps/web/src/locales/en/app/careers/[id]/page.json
 create mode 100644 apps/web/src/locales/en/app/careers/page.json
 create mode 100644 apps/web/src/locales/en/components/marketing/careers/job-details.json
 create mode 100644 apps/web/src/locales/en/components/marketing/careers/job-list.json
 create mode 100644 apps/web/src/locales/en/screens/marketing/careers.json
 create mode 100644 apps/web/src/locales/fr/app/careers/[id]/page.json
 create mode 100644 apps/web/src/locales/fr/app/careers/page.json
 create mode 100644 apps/web/src/locales/fr/components/marketing/careers/job-details.json
 create mode 100644 apps/web/src/locales/fr/components/marketing/careers/job-list.json
 create mode 100644 apps/web/src/locales/fr/screens/marketing/careers.json

diff --git a/apps/web/src/app/[locale]/careers/[id]/page.tsx b/apps/web/src/app/[locale]/careers/[id]/page.tsx
index 1960b015d..acf1f5ac4 100644
--- a/apps/web/src/app/[locale]/careers/[id]/page.tsx
+++ b/apps/web/src/app/[locale]/careers/[id]/page.tsx
@@ -1,20 +1,18 @@
 import { notFound } from "next/navigation";
 import { constructMetadata } from "@/lib/utils/metadata";
+import { getTranslation } from "@/lib/translations.server";
 import JobDetailPage from "@/screens/marketing/careers/job-details";
 import { JobPosting } from "@/types/job";
 import { Metadata } from "next";
 import { env } from "env";
 
-async function getJobById(id: string): Promise<JobPosting | null> {
+async function getJobById(id: string, locale: string): Promise<JobPosting | null> {
   try {
-    const baseUrl =env.NEXT_PUBLIC_APP_URL;
+    const baseUrl = env.NEXT_PUBLIC_APP_URL;
 
-    const res = await fetch(
-      `${baseUrl}/api/careers/${id}`,
-      {
-        cache: "no-cache",
-      },
-    );
+    const res = await fetch(`${baseUrl}/api/careers/${id}?locale=${locale}`, {
+      cache: "no-cache",
+    });
 
     if (!res.ok) {
       return null;
@@ -28,31 +26,35 @@ async function getJobById(id: string): Promise<JobPosting | null> {
   }
 }
 
-export async function generateMetadata(props: { params: Promise<{ id: string }> }): Promise<Metadata> {
+export async function generateMetadata(props: {
+  params: Promise<{ id: string; locale: string }>;
+}): Promise<Metadata> {
   const params = await props.params;
-  const id = params.id;
-  const job = await getJobById(id);
+  const { id, locale } = params;
+  const job = await getJobById(id, locale);
+  const { t } = await getTranslation("app/careers/[id]/page");
 
   if (!job) {
     return constructMetadata({
-      title: "Offre d'emploi non trouvée | onRuntime Studio",
-      description:
-        "Cette offre d'emploi n'existe pas ou n'est plus disponible.",
+      title: t("metadata.not-found.title"),
+      description: t("metadata.not-found.description"),
     });
   }
 
   return constructMetadata({
-    title: `${job.title} | Carrières | onRuntime Studio`,
+    title: job.title + t("metadata.title.suffix"),
     description:
       job.shortDescription ||
-      `Rejoignez onRuntime Studio en tant que ${job.title}. Découvrez cette opportunité de carrière et postulez dès maintenant.`,
+      t("metadata.description.prefix") + job.title + t("metadata.description.suffix"),
   });
 }
 
-export default async function Page(props: { params: Promise<{ id: string }> }) {
+export default async function Page(props: {
+  params: Promise<{ id: string; locale: string }>;
+}) {
   const params = await props.params;
-  const id = params.id;
-  const job = await getJobById(id);
+  const { id, locale } = params;
+  const job = await getJobById(id, locale);
 
   if (!job) {
     notFound();
diff --git a/apps/web/src/app/[locale]/careers/page.tsx b/apps/web/src/app/[locale]/careers/page.tsx
index 8bb974a62..f8f4ef904 100644
--- a/apps/web/src/app/[locale]/careers/page.tsx
+++ b/apps/web/src/app/[locale]/careers/page.tsx
@@ -1,11 +1,13 @@
 import { constructMetadata } from "@/lib/utils/metadata";
+import { getTranslation } from "@/lib/translations.server";
 import CareersPage from "@/screens/marketing/careers";
 
 export async function generateMetadata() {
+  const { t } = await getTranslation("app/careers/page");
+
   return constructMetadata({
-    title: "Rejoignez notre équipe | Opportunités de carrière",
-    description:
-      "Découvrez les opportunités de carrière chez onRuntime Studio. Rejoignez notre équipe de développeurs, designers et experts passionnés par l'innovation digitale.",
+    title: t("metadata.title"),
+    description: t("metadata.description"),
   });
 }
 
diff --git a/apps/web/src/app/api/careers/[id]/route.ts b/apps/web/src/app/api/careers/[id]/route.ts
index a5269edcd..8cffff222 100644
--- a/apps/web/src/app/api/careers/[id]/route.ts
+++ b/apps/web/src/app/api/careers/[id]/route.ts
@@ -1,47 +1,44 @@
 import { NextRequest, NextResponse } from "next/server";
 import { unstable_cache } from "next/cache";
 import { joinClient } from "@/services/join";
-import {
-  formatEmploymentType,
-  formatSalary,
-  extractTags,
-} from "@/lib/utils/careers";
+import { formatSalary, extractTags } from "@/lib/utils/careers";
 
-const getCachedJob = unstable_cache(
-  async (jobId: string) => {
-    const job = await joinClient.job(jobId);
+const getCachedJob = (locale: string) =>
+  unstable_cache(
+    async (jobId: string) => {
+      const job = await joinClient.job(jobId, locale);
 
-    if (!job) {
-      return null;
-    }
+      if (!job) {
+        return null;
+      }
 
-    return {
-      id: job.id,
-      title: job.title,
-      department: job.department?.name || "Non spécifié",
-      location: job.location?.name || "Remote",
-      employmentType: formatEmploymentType(job.employmentType) || "Temps plein",
-      datePosted: job.publishedAt || new Date().toISOString(),
-      applyUrl:
-        job.applyUrl || `https://join.com/companies/onruntime/jobs/${job.id}`,
-      seniority: job.seniority?.name || null,
-      remote: job.remote || false,
-      shortDescription: job.shortDescription || "",
-      description: job.description || "",
-      requirements: job.requirements || "",
-      benefits: job.benefits || "",
-      salary:
-        formatSalary(job.salaryMin, job.salaryMax, job.salaryCurrency) || null,
-      validThrough: job.validThrough || null,
-      tags: extractTags(job),
-    };
-  },
-  ["join-job"],
-  {
-    revalidate: 300,
-    tags: ["careers"],
-  }
-);
+      return {
+        id: job.id,
+        title: job.title,
+        department: job.department?.name || null,
+        location: job.office?.city || "Remote",
+        employmentType: job.employmentType || null,
+        workplaceType: job.workplaceType || null,
+        datePosted: job.publishedAt || job.createdAt || new Date().toISOString(),
+        applyUrl:
+          job.applyUrl || `https://join.com/companies/onruntime/jobs/${job.id}`,
+        seniority: job.seniority?.name || null,
+        remote: job.remote || job.workplaceType === "REMOTE",
+        shortDescription: job.shortDescription || "",
+        description: job.description || "",
+        requirements: job.requirements || "",
+        benefits: job.benefits || "",
+        salary: formatSalary(job.salaryMin, job.salaryMax, job.salaryCurrency),
+        validThrough: job.validThrough || null,
+        tags: extractTags(job),
+      };
+    },
+    ["join-job", locale],
+    {
+      revalidate: 300,
+      tags: ["careers"],
+    }
+  );
 
 export async function GET(
   request: NextRequest,
@@ -49,6 +46,7 @@ export async function GET(
 ) {
   try {
     const { id } = await params;
+    const locale = request.nextUrl.searchParams.get("locale") || "fr";
 
     if (!id) {
       return NextResponse.json(
@@ -57,7 +55,7 @@ export async function GET(
       );
     }
 
-    const job = await getCachedJob(id);
+    const job = await getCachedJob(locale)(id);
 
     if (!job) {
       return NextResponse.json({ error: "Job not found" }, { status: 404 });
diff --git a/apps/web/src/app/api/careers/route.ts b/apps/web/src/app/api/careers/route.ts
index 845ead5d0..665b050ff 100644
--- a/apps/web/src/app/api/careers/route.ts
+++ b/apps/web/src/app/api/careers/route.ts
@@ -1,36 +1,38 @@
-import { NextResponse } from "next/server";
+import { NextRequest, NextResponse } from "next/server";
 import { unstable_cache } from "next/cache";
 import { joinClient } from "@/services/join";
-import { formatEmploymentType } from "@/lib/utils/careers";
 
-const getCachedJobs = unstable_cache(
-  async () => {
-    const jobs = await joinClient.jobs();
+const getCachedJobs = (locale: string) =>
+  unstable_cache(
+    async () => {
+      const jobs = await joinClient.jobs(locale);
 
-    return jobs.map((job) => ({
-      id: job.id,
-      title: job.title,
-      department: job.department?.name || "Non spécifié",
-      location: job.location?.name || "Remote",
-      employmentType: formatEmploymentType(job.employmentType) || "Temps plein",
-      datePosted: job.publishedAt || new Date().toISOString(),
-      applyUrl:
-        job.applyUrl || `https://join.com/companies/onruntime/jobs/${job.id}`,
-      seniority: job.seniority?.name || null,
-      remote: job.remote || false,
-      shortDescription: job.shortDescription || "",
-    }));
-  },
-  ["join-jobs"],
-  {
-    revalidate: 300,
-    tags: ["careers"],
-  }
-);
+      return jobs.map((job) => ({
+        id: job.id,
+        title: job.title,
+        department: job.department?.name || null,
+        location: job.office?.city || "Remote",
+        employmentType: job.employmentType || null,
+        workplaceType: job.workplaceType || null,
+        datePosted: job.publishedAt || job.createdAt || new Date().toISOString(),
+        applyUrl:
+          job.applyUrl || `https://join.com/companies/onruntime/jobs/${job.id}`,
+        seniority: job.seniority?.name || null,
+        remote: job.remote || job.workplaceType === "REMOTE",
+        shortDescription: job.shortDescription || "",
+      }));
+    },
+    ["join-jobs", locale],
+    {
+      revalidate: 300,
+      tags: ["careers"],
+    }
+  );
 
-export async function GET() {
+export async function GET(request: NextRequest) {
   try {
-    const jobs = await getCachedJobs();
+    const locale = request.nextUrl.searchParams.get("locale") || "fr";
+    const jobs = await getCachedJobs(locale)();
     return NextResponse.json({ jobs });
   } catch (error) {
     console.error("Error fetching jobs from Join API:", error);
diff --git a/apps/web/src/lib/utils/careers.ts b/apps/web/src/lib/utils/careers.ts
index a1662db58..1179c1d3f 100644
--- a/apps/web/src/lib/utils/careers.ts
+++ b/apps/web/src/lib/utils/careers.ts
@@ -1,52 +1,26 @@
 /**
- * Utilitaires pour la gestion des carrières et des jobs
+ * Utilities for careers and jobs management
  */
 
 /**
- * Formate le type d'emploi en français
- */
-export function formatEmploymentType(type: string | null | undefined): string {
-  if (!type) return "Temps plein";
-
-  const typeMap: Record<string, string> = {
-    FULL_TIME: "Temps plein",
-    PART_TIME: "Temps partiel",
-    CONTRACT: "Contrat",
-    TEMPORARY: "Temporaire",
-    INTERNSHIP: "Stage",
-    APPRENTICESHIP: "Apprentissage",
-  };
-
-  return typeMap[type] || type;
-}
-
-/**
- * Formate le salaire en euros français
+ * Formats salary with locale-aware number formatting
  */
 export function formatSalary(
   min?: number,
   max?: number,
   currency?: string,
-): string | null {
+): { min?: number; max?: number; currency: string } | null {
   if (!min && !max) return null;
 
-  const currencySymbol = currency === "EUR" ? "€" : currency || "";
-
-  if (min && max) {
-    return `${min.toLocaleString("fr-FR")} - ${max.toLocaleString(
-      "fr-FR",
-    )} ${currencySymbol}`;
-  } else if (min) {
-    return `À partir de ${min.toLocaleString("fr-FR")} ${currencySymbol}`;
-  } else if (max) {
-    return `Jusqu'à ${max.toLocaleString("fr-FR")} ${currencySymbol}`;
-  }
-
-  return null;
+  return {
+    min,
+    max,
+    currency: currency || "EUR",
+  };
 }
 
 /**
- * Extrait les tags/compétences d'un job
+ * Extracts tags/skills from a job
  */
 export function extractTags(jobData: { skills?: { name: string }[] }): string[] {
   const tags: string[] = [];
@@ -60,4 +34,4 @@ export function extractTags(jobData: { skills?: { name: string }[] }): string[]
   }
 
   return tags;
-}
\ No newline at end of file
+}
diff --git a/apps/web/src/locales/en/app/careers/[id]/page.json b/apps/web/src/locales/en/app/careers/[id]/page.json
new file mode 100644
index 000000000..5cb9690f9
--- /dev/null
+++ b/apps/web/src/locales/en/app/careers/[id]/page.json
@@ -0,0 +1,15 @@
+{
+  "metadata": {
+    "not-found": {
+      "title": "Job posting not found",
+      "description": "This job posting does not exist or is no longer available."
+    },
+    "title": {
+      "suffix": " | Careers"
+    },
+    "description": {
+      "prefix": "Join onRuntime Studio as ",
+      "suffix": ". Discover this career opportunity and apply now."
+    }
+  }
+}
diff --git a/apps/web/src/locales/en/app/careers/page.json b/apps/web/src/locales/en/app/careers/page.json
new file mode 100644
index 000000000..f0e11c2e5
--- /dev/null
+++ b/apps/web/src/locales/en/app/careers/page.json
@@ -0,0 +1,6 @@
+{
+  "metadata": {
+    "title": "Join our team | Career opportunities",
+    "description": "Discover career opportunities at onRuntime Studio. Join our team of developers, designers and experts passionate about digital innovation."
+  }
+}
diff --git a/apps/web/src/locales/en/components/marketing/careers/job-details.json b/apps/web/src/locales/en/components/marketing/careers/job-details.json
new file mode 100644
index 000000000..9de1b5456
--- /dev/null
+++ b/apps/web/src/locales/en/components/marketing/careers/job-details.json
@@ -0,0 +1,72 @@
+{
+  "back": "Back to job offers",
+  "share": {
+    "button": "Share",
+    "text": {
+      "prefix": "Discover this opportunity: ",
+      "suffix": " at onRuntime Studio"
+    },
+    "copied": "Link copied to clipboard!"
+  },
+  "apply": "Apply now",
+  "published": "Published on",
+  "employment-type": {
+    "full-time": "Full-time",
+    "part-time": "Part-time",
+    "contract": "Contract",
+    "temporary": "Temporary",
+    "internship": "Internship",
+    "apprenticeship": "Apprenticeship"
+  },
+  "workplace-type": {
+    "hybrid": "Hybrid",
+    "remote": "Remote",
+    "on-site": "On-site"
+  },
+  "salary-format": {
+    "from": "From",
+    "up-to": "Up to",
+    "range": "-"
+  },
+  "sections": {
+    "description": "Job description",
+    "no-description": "No detailed description is available for this position.",
+    "requirements": "Requirements",
+    "benefits": "Benefits"
+  },
+  "details": {
+    "title": "Job details",
+    "department": "Department",
+    "location": "Location",
+    "contract": "Contract type",
+    "salary": "Salary",
+    "remote": "Remote work",
+    "remote-possible": "Possible",
+    "workplace": "Work mode"
+  },
+  "interested": {
+    "title": "Interested in this position?",
+    "description": "Apply now and join our passionate team."
+  },
+  "culture": {
+    "title": "Our company culture",
+    "description": "At onRuntime Studio, we cultivate a collaborative and stimulating work environment where each team member can express their creativity and develop their skills. We prioritize innovation, quality and the well-being of our employees.",
+    "training": {
+      "title": "Continuous training",
+      "description": "We invest in the professional development of our teams"
+    },
+    "flexible": {
+      "title": "Flexible environment",
+      "description": "Work-life balance and hybrid work"
+    },
+    "projects": {
+      "title": "Varied projects",
+      "description": "Work on diverse and stimulating projects"
+    },
+    "learn-more": "Learn more about our team"
+  },
+  "cta": {
+    "title": "Ready for the challenge?",
+    "description": "Join our team and participate in stimulating projects that will allow you to develop your skills and express your creativity."
+  }
+}
diff --git a/apps/web/src/locales/en/components/marketing/careers/job-list.json b/apps/web/src/locales/en/components/marketing/careers/job-list.json
new file mode 100644
index 000000000..8e04e6e7b
--- /dev/null
+++ b/apps/web/src/locales/en/components/marketing/careers/job-list.json
@@ -0,0 +1,20 @@
+{
+  "retry": "Retry",
+  "no-results": "No job offers match your search.",
+  "count": "job offer(s) available",
+  "published": "Published on",
+  "view-offer": "View offer",
+  "employment-type": {
+    "full-time": "Full-time",
+    "part-time": "Part-time",
+    "contract": "Contract",
+    "temporary": "Temporary",
+    "internship": "Internship",
+    "apprenticeship": "Apprenticeship"
+  },
+  "workplace-type": {
+    "hybrid": "Hybrid",
+    "remote": "Remote",
+    "on-site": "On-site"
+  }
+}
diff --git a/apps/web/src/locales/en/screens/marketing/careers.json b/apps/web/src/locales/en/screens/marketing/careers.json
new file mode 100644
index 000000000..9d6f61321
--- /dev/null
+++ b/apps/web/src/locales/en/screens/marketing/careers.json
@@ -0,0 +1,61 @@
+{
+  "hero": {
+    "title": "Join our team",
+    "description": "Discover career opportunities at onRuntime Studio and join a dynamic team passionate about development and design."
+  },
+  "why-join": {
+    "title": "Why join us?",
+    "description": "At onRuntime Studio, we believe in creativity, innovation and collaboration. Join us to shape the future of digital and develop your skills in a stimulating environment.",
+    "cards": {
+      "creativity": {
+        "title": "Creativity and Innovation",
+        "description": "Express your ideas and contribute to innovative projects that push the boundaries of what's possible."
+      },
+      "team": {
+        "title": "Passionate Team",
+        "description": "Collaborate with talented and passionate professionals in a friendly and stimulating environment."
+      },
+      "impact": {
+        "title": "Global Impact",
+        "description": "Contribute to projects that have a real impact and reach users around the world."
+      }
+    }
+  },
+  "opportunities": {
+    "title": "Current opportunities",
+    "description": "Discover our job offers and find the position that matches your skills and aspirations.",
+    "search-placeholder": "Search for a position, location...",
+    "all": "All"
+  },
+  "spontaneous": {
+    "title": "Haven't found the right position?",
+    "description": "Send us a spontaneous application! We're always looking for exceptional talent to join our team.",
+    "cta": "Send a spontaneous application"
+  },
+  "teams": {
+    "title": "Our teams",
+    "description": "Discover the different teams that make up onRuntime Studio and find the one that best matches your skills and aspirations.",
+    "development": {
+      "title": "Development",
+      "description": "Our developers create high-performance and innovative web and mobile applications, using the latest technologies to deliver exceptional user experiences."
+    },
+    "design": {
+      "title": "Design",
+      "description": "Our design team creates elegant and intuitive user interfaces, ensuring every pixel is perfectly aligned with the project's visual identity."
+    },
+    "project": {
+      "title": "Project & Product",
+      "description": "Our project managers and product managers ensure the smooth running of projects and that the solutions developed perfectly meet user needs."
+    },
+    "marketing": {
+      "title": "Marketing & Communication",
+      "description": "Our marketing team works to promote our projects and communicate effectively on our achievements, both internally and to the general public."
+    }
+  },
+  "cta": {
+    "title": "Ready to join us?",
+    "description": "Browse our job offers and find the position that matches your skills and aspirations. We look forward to welcoming you to our team!",
+    "button": "View job offers"
+  },
+  "error": "An error occurred while loading job offers. Please try again later."
+}
diff --git a/apps/web/src/locales/fr/app/careers/[id]/page.json b/apps/web/src/locales/fr/app/careers/[id]/page.json
new file mode 100644
index 000000000..c04bf3afb
--- /dev/null
+++ b/apps/web/src/locales/fr/app/careers/[id]/page.json
@@ -0,0 +1,15 @@
+{
+  "metadata": {
+    "not-found": {
+      "title": "Offre d'emploi non trouvée",
+      "description": "Cette offre d'emploi n'existe pas ou n'est plus disponible."
+    },
+    "title": {
+      "suffix": " | Carrières"
+    },
+    "description": {
+      "prefix": "Rejoignez onRuntime Studio en tant que ",
+      "suffix": ". Découvrez cette opportunité de carrière et postulez dès maintenant."
+    }
+  }
+}
diff --git a/apps/web/src/locales/fr/app/careers/page.json b/apps/web/src/locales/fr/app/careers/page.json
new file mode 100644
index 000000000..ddc8d6d79
--- /dev/null
+++ b/apps/web/src/locales/fr/app/careers/page.json
@@ -0,0 +1,6 @@
+{
+  "metadata": {
+    "title": "Rejoignez notre équipe | Opportunités de carrière",
+    "description": "Découvrez les opportunités de carrière chez onRuntime Studio. Rejoignez notre équipe de développeurs, designers et experts passionnés par l'innovation digitale."
+  }
+}
diff --git a/apps/web/src/locales/fr/components/marketing/careers/job-details.json b/apps/web/src/locales/fr/components/marketing/careers/job-details.json
new file mode 100644
index 000000000..1e74580eb
--- /dev/null
+++ b/apps/web/src/locales/fr/components/marketing/careers/job-details.json
@@ -0,0 +1,72 @@
+{
+  "back": "Retour aux offres",
+  "share": {
+    "button": "Partager",
+    "text": {
+      "prefix": "Découvrez cette opportunité: ",
+      "suffix": " chez onRuntime Studio"
+    },
+    "copied": "Lien copié dans le presse-papier!"
+  },
+  "apply": "Postuler maintenant",
+  "published": "Publié le",
+  "employment-type": {
+    "full-time": "Temps plein",
+    "part-time": "Temps partiel",
+    "contract": "Contrat",
+    "temporary": "Temporaire",
+    "internship": "Stage",
+    "apprenticeship": "Apprentissage"
+  },
+  "workplace-type": {
+    "hybrid": "Hybride",
+    "remote": "Télétravail",
+    "on-site": "Sur site"
+  },
+  "salary-format": {
+    "from": "À partir de",
+    "up-to": "Jusqu'à",
+    "range": "-"
+  },
+  "sections": {
+    "description": "Description du poste",
+    "no-description": "Aucune description détaillée n'est disponible pour ce poste.",
+    "requirements": "Prérequis",
+    "benefits": "Avantages"
+  },
+  "details": {
+    "title": "Détails du poste",
+    "department": "Département",
+    "location": "Lieu",
+    "contract": "Type de contrat",
+    "salary": "Salaire",
+    "remote": "Télétravail",
+    "remote-possible": "Possible",
+    "workplace": "Mode de travail"
+  },
+  "interested": {
+    "title": "Intéressé par ce poste ?",
+    "description": "Postulez dès maintenant et rejoignez notre équipe passionnée."
+  },
+  "culture": {
+    "title": "Notre culture d'entreprise",
+    "description": "Chez onRuntime Studio, nous cultivons un environnement de travail collaboratif et stimulant où chaque membre de l'équipe peut exprimer sa créativité et développer ses compétences. Nous privilégions l'innovation, la qualité et le bien-être de nos collaborateurs.",
+    "training": {
+      "title": "Formation continue",
+      "description": "Nous investissons dans le développement professionnel de nos équipes"
+    },
+    "flexible": {
+      "title": "Environnement flexible",
+      "description": "Équilibre vie professionnelle/vie personnelle et travail hybride"
+    },
+    "projects": {
+      "title": "Projets variés",
+      "description": "Travaillez sur des projets diversifiés et stimulants"
+    },
+    "learn-more": "En savoir plus sur notre équipe"
+  },
+  "cta": {
+    "title": "Prêt à relever le défi ?",
+    "description": "Rejoignez notre équipe et participez à des projets stimulants qui vous permettront de développer vos compétences et d'exprimer votre créativité."
+  }
+}
diff --git a/apps/web/src/locales/fr/components/marketing/careers/job-list.json b/apps/web/src/locales/fr/components/marketing/careers/job-list.json
new file mode 100644
index 000000000..0a596c2ad
--- /dev/null
+++ b/apps/web/src/locales/fr/components/marketing/careers/job-list.json
@@ -0,0 +1,20 @@
+{
+  "retry": "Réessayer",
+  "no-results": "Aucune offre d'emploi ne correspond à votre recherche.",
+  "count": "offre(s) d'emploi disponible(s)",
+  "published": "Publié le",
+  "view-offer": "Voir l'offre",
+  "employment-type": {
+    "full-time": "Temps plein",
+    "part-time": "Temps partiel",
+    "contract": "Contrat",
+    "temporary": "Temporaire",
+    "internship": "Stage",
+    "apprenticeship": "Apprentissage"
+  },
+  "workplace-type": {
+    "hybrid": "Hybride",
+    "remote": "Télétravail",
+    "on-site": "Sur site"
+  }
+}
diff --git a/apps/web/src/locales/fr/screens/marketing/careers.json b/apps/web/src/locales/fr/screens/marketing/careers.json
new file mode 100644
index 000000000..d0d2651b2
--- /dev/null
+++ b/apps/web/src/locales/fr/screens/marketing/careers.json
@@ -0,0 +1,61 @@
+{
+  "hero": {
+    "title": "Rejoignez notre équipe",
+    "description": "Découvrez les opportunités de carrière chez onRuntime Studio et rejoignez une équipe dynamique de passionnés du développement et du design."
+  },
+  "why-join": {
+    "title": "Pourquoi nous rejoindre ?",
+    "description": "Chez onRuntime Studio, nous croyons en la créativité, l'innovation et la collaboration. Rejoignez-nous pour façonner l'avenir du digital et développer vos compétences dans un environnement stimulant.",
+    "cards": {
+      "creativity": {
+        "title": "Créativité et Innovation",
+        "description": "Exprimez vos idées et contribuez à des projets innovants qui repoussent les limites du possible."
+      },
+      "team": {
+        "title": "Équipe Passionnée",
+        "description": "Collaborez avec des professionnels talentueux et passionnés dans un environnement convivial et stimulant."
+      },
+      "impact": {
+        "title": "Impact Global",
+        "description": "Contribuez à des projets qui ont un impact réel et touchent des utilisateurs à travers le monde."
+      }
+    }
+  },
+  "opportunities": {
+    "title": "Nos opportunités actuelles",
+    "description": "Découvrez nos offres d'emploi et trouvez le poste qui correspond à vos compétences et aspirations.",
+    "search-placeholder": "Rechercher un poste, un lieu...",
+    "all": "Tous"
+  },
+  "spontaneous": {
+    "title": "Vous n'avez pas trouvé le poste qui vous correspond ?",
+    "description": "Envoyez-nous une candidature spontanée ! Nous sommes toujours à la recherche de talents exceptionnels pour rejoindre notre équipe.",
+    "cta": "Envoyer une candidature spontanée"
+  },
+  "teams": {
+    "title": "Nos équipes",
+    "description": "Découvrez les différentes équipes qui composent onRuntime Studio et trouvez celle qui correspond le mieux à vos compétences et aspirations.",
+    "development": {
+      "title": "Développement",
+      "description": "Nos développeurs créent des applications web et mobiles performantes et innovantes, en utilisant les technologies les plus récentes pour offrir des expériences utilisateur exceptionnelles."
+    },
+    "design": {
+      "title": "Design",
+      "description": "Notre équipe de designers crée des interfaces utilisateur élégantes et intuitives, en veillant à ce que chaque pixel soit parfaitement aligné avec l'identité visuelle du projet."
+    },
+    "project": {
+      "title": "Projet & Produit",
+      "description": "Nos chefs de projet et product managers assurent le bon déroulement des projets et veillent à ce que les solutions développées répondent parfaitement aux besoins des utilisateurs."
+    },
+    "marketing": {
+      "title": "Marketing & Communication",
+      "description": "Notre équipe marketing travaille à faire connaître nos projets et à communiquer efficacement sur nos réalisations, tant en interne qu'auprès du grand public."
+    }
+  },
+  "cta": {
+    "title": "Prêt à nous rejoindre ?",
+    "description": "Parcourez nos offres d'emploi et trouvez le poste qui correspond à vos compétences et aspirations. Nous avons hâte de vous accueillir dans notre équipe !",
+    "button": "Voir les offres d'emploi"
+  },
+  "error": "Une erreur est survenue lors du chargement des offres d'emploi. Veuillez réessayer ultérieurement."
+}
diff --git a/apps/web/src/screens/marketing/careers/index.tsx b/apps/web/src/screens/marketing/careers/index.tsx
index 385b8903a..0a5b7ee36 100644
--- a/apps/web/src/screens/marketing/careers/index.tsx
+++ b/apps/web/src/screens/marketing/careers/index.tsx
@@ -16,11 +16,14 @@ import {
   Users,
 } from "lucide-react";
 import { Link } from "@onruntime/translations/next";
+import { useTranslation, useLocale } from "@onruntime/translations/react";
 import Routes from "@/constants/routes";
 import JobList from "./job-list";
 import { JobPosting } from "@/types/job";
 
 const CareersPage: React.FC = () => {
+  const { t } = useTranslation("screens/marketing/careers");
+  const { locale } = useLocale();
   const [jobs, setJobs] = useState<JobPosting[]>([]);
   const [isLoading, setIsLoading] = useState(true);
   const [error, setError] = useState<string | null>(null);
@@ -34,7 +37,7 @@ const CareersPage: React.FC = () => {
     const fetchJobs = async () => {
       try {
         setIsLoading(true);
-        const response = await fetch("/api/careers");
+        const response = await fetch(`/api/careers?locale=${locale}`);
 
         if (!response.ok) {
           throw new Error("Failed to fetch job postings");
@@ -51,9 +54,7 @@ const CareersPage: React.FC = () => {
         setError(null);
       } catch (err) {
         console.error("Error fetching jobs:", err);
-        setError(
-          "Une erreur est survenue lors du chargement des offres d&apos;emploi. Veuillez réessayer ultérieurement.",
-        );
+        setError(t("error"));
         setJobs([]);
       } finally {
         setIsLoading(false);
@@ -61,7 +62,7 @@ const CareersPage: React.FC = () => {
     };
 
     fetchJobs();
-  }, []);
+  }, [locale, t]);
 
   const filteredJobs = jobs.filter((job) => {
     const matchesSearch =
@@ -82,14 +83,10 @@ const CareersPage: React.FC = () => {
       <div className="px-4 md:px-0 max-w-5xl mx-auto space-y-24">
         <div className="relative max-w-2xl mx-auto flex flex-col items-center gap-6 text-center">
           <h1 className="font-medium text-4xl md:text-5xl text-foreground">
-            Rejoignez notre équipe
+            {t("hero.title")}
           </h1>
 
-          <p className="text-muted-foreground">
-            Découvrez les opportunités de carrière chez onRuntime Studio et
-            rejoignez une équipe dynamique de passionnés du développement et du
-            design.
-          </p>
+          <p className="text-muted-foreground">{t("hero.description")}</p>
 
           <DotPattern
             width={30}
@@ -104,13 +101,10 @@ const CareersPage: React.FC = () => {
         <div className="space-y-12">
           <div className="text-center">
             <h2 className="text-3xl font-medium text-foreground mb-4">
-              Pourquoi nous rejoindre ?
+              {t("why-join.title")}
             </h2>
             <p className="text-muted-foreground max-w-3xl mx-auto">
-              Chez onRuntime Studio, nous croyons en la créativité,
-              l&apos;innovation et la collaboration. Rejoignez-nous pour
-              façonner l&apos;avenir du digital et développer vos compétences
-              dans un environnement stimulant.
+              {t("why-join.description")}
             </p>
           </div>
 
@@ -120,11 +114,10 @@ const CareersPage: React.FC = () => {
                 <Lightbulb className="w-6 h-6" />
               </div>
               <h3 className="text-xl font-medium text-foreground mb-2">
-                Créativité et Innovation
+                {t("why-join.cards.creativity.title")}
               </h3>
               <p className="text-muted-foreground">
-                Exprimez vos idées et contribuez à des projets innovants qui
-                repoussent les limites du possible.
+                {t("why-join.cards.creativity.description")}
               </p>
             </div>
 
@@ -133,11 +126,10 @@ const CareersPage: React.FC = () => {
                 <Users className="w-6 h-6" />
               </div>
               <h3 className="text-xl font-medium text-foreground mb-2">
-                Équipe Passionnée
+                {t("why-join.cards.team.title")}
               </h3>
               <p className="text-muted-foreground">
-                Collaborez avec des professionnels talentueux et passionnés dans
-                un environnement convivial et stimulant.
+                {t("why-join.cards.team.description")}
               </p>
             </div>
 
@@ -146,11 +138,10 @@ const CareersPage: React.FC = () => {
                 <Globe className="w-6 h-6" />
               </div>
               <h3 className="text-xl font-medium text-foreground mb-2">
-                Impact Global
+                {t("why-join.cards.impact.title")}
               </h3>
               <p className="text-muted-foreground">
-                Contribuez à des projets qui ont un impact réel et touchent des
-                utilisateurs à travers le monde.
+                {t("why-join.cards.impact.description")}
               </p>
             </div>
           </div>
@@ -159,11 +150,10 @@ const CareersPage: React.FC = () => {
         <div className="space-y-8">
           <div className="text-center">
             <h2 className="text-3xl font-medium text-foreground mb-4">
-              Nos opportunités actuelles
+              {t("opportunities.title")}
             </h2>
             <p className="text-muted-foreground max-w-3xl mx-auto">
-              Découvrez nos offres d&apos;emploi et trouvez le poste qui correspond à
-              vos compétences et aspirations.
+              {t("opportunities.description")}
             </p>
           </div>
 
@@ -172,7 +162,7 @@ const CareersPage: React.FC = () => {
               <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 text-muted-foreground w-4 h-4" />
               <input
                 type="text"
-                placeholder="Rechercher un poste, un lieu..."
+                placeholder={t("opportunities.search-placeholder")}
                 className="w-full pl-10 py-2 border rounded-md"
                 value={searchTerm}
                 onChange={(e) => setSearchTerm(e.target.value)}
@@ -185,7 +175,7 @@ const CareersPage: React.FC = () => {
                 onClick={() => setSelectedDepartment(null)}
                 className="whitespace-nowrap"
               >
-                Tous
+                {t("opportunities.all")}
               </Button>
               {departments.map((dept) => (
                 <Button
@@ -206,15 +196,14 @@ const CareersPage: React.FC = () => {
         <div className="relative overflow-hidden rounded-lg border bg-card p-8">
           <div className="max-w-2xl">
             <h2 className="text-2xl font-medium text-foreground mb-4">
-              Vous n&apos;avez pas trouvé le poste qui vous correspond ?
+              {t("spontaneous.title")}
             </h2>
             <p className="text-muted-foreground mb-6">
-              Envoyez-nous une candidature spontanée ! Nous sommes toujours à la
-              recherche de talents exceptionnels pour rejoindre notre équipe.
+              {t("spontaneous.description")}
             </p>
             <Link href={Routes.contact}>
               <Button>
-                Envoyer une candidature spontanée
+                {t("spontaneous.cta")}
                 <FileText className="ml-2 w-4 h-4" />
               </Button>
             </Link>
@@ -226,12 +215,10 @@ const CareersPage: React.FC = () => {
         <div className="space-y-12">
           <div className="text-center">
             <h2 className="text-3xl font-medium text-foreground mb-4">
-              Nos équipes
+              {t("teams.title")}
             </h2>
             <p className="text-muted-foreground max-w-3xl mx-auto">
-              Découvrez les différentes équipes qui composent onRuntime Studio
-              et trouvez celle qui correspond le mieux à vos compétences et
-              aspirations.
+              {t("teams.description")}
             </p>
           </div>
 
@@ -242,14 +229,11 @@ const CareersPage: React.FC = () => {
                   <Code className="w-5 h-5" />
                 </div>
                 <h3 className="text-xl font-medium text-foreground">
-                  Développement
+                  {t("teams.development.title")}
                 </h3>
               </div>
               <p className="text-muted-foreground mb-4">
-                Nos développeurs créent des applications web et mobiles
-                performantes et innovantes, en utilisant les technologies les
-                plus récentes pour offrir des expériences utilisateur
-                exceptionnelles.
+                {t("teams.development.description")}
               </p>
             </div>
 
@@ -258,12 +242,12 @@ const CareersPage: React.FC = () => {
                 <div className="p-3 rounded-md bg-onruntime-blue/10 text-onruntime-blue">
                   <Palette className="w-5 h-5" />
                 </div>
-                <h3 className="text-xl font-medium text-foreground">Design</h3>
+                <h3 className="text-xl font-medium text-foreground">
+                  {t("teams.design.title")}
+                </h3>
               </div>
               <p className="text-muted-foreground mb-4">
-                Notre équipe de designers crée des interfaces utilisateur
-                élégantes et intuitives, en veillant à ce que chaque pixel soit
-                parfaitement aligné avec l&apos;identité visuelle du projet.
+                {t("teams.design.description")}
               </p>
             </div>
 
@@ -273,13 +257,11 @@ const CareersPage: React.FC = () => {
                   <Briefcase className="w-5 h-5" />
                 </div>
                 <h3 className="text-xl font-medium text-foreground">
-                  Projet & Produit
+                  {t("teams.project.title")}
                 </h3>
               </div>
               <p className="text-muted-foreground mb-4">
-                Nos chefs de projet et product managers assurent le bon
-                déroulement des projets et veillent à ce que les solutions
-                développées répondent parfaitement aux besoins des utilisateurs.
+                {t("teams.project.description")}
               </p>
             </div>
 
@@ -289,27 +271,22 @@ const CareersPage: React.FC = () => {
                   <MapPin className="w-5 h-5" />
                 </div>
                 <h3 className="text-xl font-medium text-foreground">
-                  Marketing & Communication
+                  {t("teams.marketing.title")}
                 </h3>
               </div>
               <p className="text-muted-foreground mb-4">
-                Notre équipe marketing travaille à faire connaître nos projets
-                et à communiquer efficacement sur nos réalisations, tant en
-                interne qu&apos;auprès du grand public.
+                {t("teams.marketing.description")}
               </p>
             </div>
           </div>
         </div>
 
-
         <div className="text-center">
           <h2 className="text-3xl font-medium text-foreground mb-4">
-            Prêt à nous rejoindre ?
+            {t("cta.title")}
           </h2>
           <p className="text-muted-foreground max-w-2xl mx-auto mb-8">
-            Parcourez nos offres d&apos;emploi et trouvez le poste qui
-            correspond à vos compétences et aspirations. Nous avons hâte de vous
-            accueillir dans notre équipe !
+            {t("cta.description")}
           </p>
           <Button
             size="lg"
@@ -320,7 +297,7 @@ const CareersPage: React.FC = () => {
               }
             }}
           >
-            Voir les offres d&apos;emploi
+            {t("cta.button")}
             <Briefcase className="ml-2 w-5 h-5" />
           </Button>
         </div>
diff --git a/apps/web/src/screens/marketing/careers/job-details.tsx b/apps/web/src/screens/marketing/careers/job-details.tsx
index d0f784374..8a5c0364b 100644
--- a/apps/web/src/screens/marketing/careers/job-details.tsx
+++ b/apps/web/src/screens/marketing/careers/job-details.tsx
@@ -16,6 +16,7 @@ import {
   Share2,
 } from "lucide-react";
 import { Link } from "@onruntime/translations/next";
+import { useTranslation } from "@onruntime/translations/react";
 import DotPattern from "@/components/ui/dot-pattern";
 import { cn } from "@/lib/utils";
 import JobContent from "@/components/ui/job-content";
@@ -26,19 +27,49 @@ interface JobDetailPageProps {
 }
 
 const JobDetailPage: React.FC<JobDetailPageProps> = ({ job }) => {
+  const { t } = useTranslation("components/marketing/careers/job-details");
+
+  const getEmploymentType = (type: string | null | undefined) => {
+    if (!type) return null;
+    const key = type.toLowerCase().replace(/_/g, "-");
+    const translated = t(`employment-type.${key}`);
+    return translated !== `employment-type.${key}` ? translated : type;
+  };
+
+  const getWorkplaceType = (type: string | null | undefined) => {
+    if (!type) return null;
+    const key = type.toLowerCase().replace(/_/g, "-");
+    const translated = t(`workplace-type.${key}`);
+    return translated !== `workplace-type.${key}` ? translated : type;
+  };
+
+  const formatSalary = (salary: JobPosting["salary"]) => {
+    if (!salary) return null;
+    const { min, max, currency } = salary;
+    const symbol = currency === "EUR" ? "€" : currency;
+
+    if (min && max) {
+      return `${min.toLocaleString()} ${t("salary-format.range")} ${max.toLocaleString()} ${symbol}`;
+    } else if (min) {
+      return `${t("salary-format.from")} ${min.toLocaleString()} ${symbol}`;
+    } else if (max) {
+      return `${t("salary-format.up-to")} ${max.toLocaleString()} ${symbol}`;
+    }
+    return null;
+  };
 
   const handleShareClick = () => {
     if (navigator.share) {
       navigator
         .share({
           title: job.title,
-          text: `Découvrez cette opportunité: ${job.title} chez onRuntime Studio`,
+          text: t("share.text.prefix") + job.title + t("share.text.suffix"),
           url: window.location.href,
         })
         .catch((error) => console.log("Error sharing", error));
     } else {
       navigator.clipboard.writeText(window.location.href);
-      alert("Lien copié dans le presse-papier!");
+      alert(t("share.copied"));
     }
   };
 
@@ -55,7 +86,7 @@ const JobDetailPage: React.FC<JobDetailPageProps> = ({ job }) => {
           <Link href="/careers">
             <Button variant="ghost" className="group">
               <ArrowLeft className="w-4 h-4 mr-2 group-hover:-translate-x-1 transition-transform" />
-              Retour aux offres
+              {t("back")}
             </Button>
           </Link>
         </div>
@@ -63,11 +94,13 @@ const JobDetailPage: React.FC<JobDetailPageProps> = ({ job }) => {
         <div className="relative border rounded-lg p-8 bg-card">
           <div className="max-w-3xl">
             <div className="flex flex-wrap gap-2 mb-4">
-              <Badge>{job.department}</Badge>
+              {job.department && <Badge>{job.department}</Badge>}
               {job.seniority && (
                 <Badge variant="outline">{job.seniority}</Badge>
               )}
-              {job.remote && <Badge variant="outline">Remote</Badge>}
+              {job.workplaceType && (
+                <Badge variant="outline">{getWorkplaceType(job.workplaceType)}</Badge>
+              )}
             </div>
 
             <h1 className="font-medium text-3xl md:text-4xl text-foreground mb-4">
@@ -79,23 +112,25 @@ const JobDetailPage: React.FC<JobDetailPageProps> = ({ job }) => {
                 <MapPin className="w-4 h-4 mr-2" />
                 {job.location}
               </div>
-              <div className="flex items-center text-muted-foreground">
-                <Clock className="w-4 h-4 mr-2" />
-                {job.employmentType}
-              </div>
+              {job.employmentType && (
+                <div className="flex items-center text-muted-foreground">
+                  <Clock className="w-4 h-4 mr-2" />
+                  {getEmploymentType(job.employmentType)}
+                </div>
+              )}
               <div className="flex items-center text-muted-foreground">
                 <CalendarDays className="w-4 h-4 mr-2" />
-                Publié le {formatDate(job.datePosted)}
+                {t("published")} {formatDate(job.datePosted)}
               </div>
             </div>
 
             <div className="flex flex-wrap gap-3">
               <Button onClick={handleApplyClick}>
-                Postuler maintenant
+                {t("apply")}
                 <Briefcase className="ml-2 w-4 h-4" />
               </Button>
               <Button variant="outline" onClick={handleShareClick}>
-                Partager
+                {t("share.button")}
                 <Share2 className="ml-2 w-4 h-4" />
               </Button>
             </div>
@@ -115,28 +150,31 @@ const JobDetailPage: React.FC<JobDetailPageProps> = ({ job }) => {
           <div className="md:col-span-2 space-y-6">
             <div>
               <h2 className="text-2xl font-medium mb-4">
-                Description du poste
+                {t("sections.description")}
               </h2>
               {job.description ? (
                 <JobContent content={job.description} />
               ) : (
                 <p className="text-muted-foreground">
-                  {job.shortDescription ||
-                    "Aucune description détaillée n'est disponible pour ce poste."}
+                  {job.shortDescription || t("sections.no-description")}
                 </p>
               )}
             </div>
 
             {job.requirements && (
               <div>
-                <h2 className="text-2xl font-medium mb-4">Prérequis</h2>
+                <h2 className="text-2xl font-medium mb-4">
+                  {t("sections.requirements")}
+                </h2>
                 <JobContent content={job.requirements} />
               </div>
             )}
 
             {job.benefits && (
               <div>
-                <h2 className="text-2xl font-medium mb-4">Avantages</h2>
+                <h2 className="text-2xl font-medium mb-4">
+                  {t("sections.benefits")}
+                </h2>
                 <JobContent content={job.benefits} />
               </div>
             )}
@@ -144,83 +182,90 @@ const JobDetailPage: React.FC<JobDetailPageProps> = ({ job }) => {
 
           <div className="space-y-8">
             <div className="border rounded-lg p-6 bg-card">
-              <h3 className="text-lg font-medium mb-4">Détails du poste</h3>
+              <h3 className="text-lg font-medium mb-4">
+                {t("details.title")}
+              </h3>
 
               <div className="space-y-4">
-                <div className="flex items-start gap-3">
-                  <Building className="w-5 h-5 text-muted-foreground flex-shrink-0 mt-0.5" />
-                  <div>
-                    <p className="text-sm text-foreground font-medium">
-                      Département
-                    </p>
-                    <p className="text-sm text-muted-foreground">
-                      {job.department}
-                    </p>
+                {job.department && (
+                  <div className="flex items-start gap-3">
+                    <Building className="w-5 h-5 text-muted-foreground flex-shrink-0 mt-0.5" />
+                    <div>
+                      <p className="text-sm text-foreground font-medium">
+                        {t("details.department")}
+                      </p>
+                      <p className="text-sm text-muted-foreground">
+                        {job.department}
+                      </p>
+                    </div>
                   </div>
-                </div>
+                )}
 
                 <div className="flex items-start gap-3">
                   <MapPin className="w-5 h-5 text-muted-foreground flex-shrink-0 mt-0.5" />
-                  <div>
-                    <p className="text-sm text-foreground font-medium">Lieu</p>
-                    <p className="text-sm text-muted-foreground">
-                      {job.location}
-                    </p>
-                  </div>
-                </div>
-
-                <div className="flex items-start gap-3">
-                  <Clock className="w-5 h-5 text-muted-foreground flex-shrink-0 mt-0.5" />
                   <div>
                     <p className="text-sm text-foreground font-medium">
-                      Type de contrat
+                      {t("details.location")}
                     </p>
                     <p className="text-sm text-muted-foreground">
-                      {job.employmentType}
+                      {job.location}
                     </p>
                   </div>
                 </div>
 
-                {job.salary && (
+                {job.employmentType && (
                   <div className="flex items-start gap-3">
-                    <FileText className="w-5 h-5 text-muted-foreground flex-shrink-0 mt-0.5" />
+                    <Clock className="w-5 h-5 text-muted-foreground flex-shrink-0 mt-0.5" />
                     <div>
                       <p className="text-sm text-foreground font-medium">
-                        Salaire
+                        {t("details.contract")}
                       </p>
                       <p className="text-sm text-muted-foreground">
-                        {job.salary}
+                        {getEmploymentType(job.employmentType)}
                       </p>
                     </div>
                   </div>
                 )}
 
-                {job.remote && (
+                {job.workplaceType && (
                   <div className="flex items-start gap-3">
                     <Globe className="w-5 h-5 text-muted-foreground flex-shrink-0 mt-0.5" />
                     <div>
                       <p className="text-sm text-foreground font-medium">
-                        Télétravail
+                        {t("details.workplace")}
                       </p>
                       <p className="text-sm text-muted-foreground">
-                        {typeof job.remote === "string"
-                          ? job.remote
-                          : "Possible"}
+                        {getWorkplaceType(job.workplaceType)}
                       </p>
                     </div>
                   </div>
                 )}
+
+                {job.salary && formatSalary(job.salary) && (
+                  <div className="flex items-start gap-3">
+                    <FileText className="w-5 h-5 text-muted-foreground flex-shrink-0 mt-0.5" />
+                    <div>
+                      <p className="text-sm text-foreground font-medium">
+                        {t("details.salary")}
+                      </p>
+                      <p className="text-sm text-muted-foreground">
+                        {formatSalary(job.salary)}
+                      </p>
+                    </div>
+                  </div>
+                )}
+
               </div>
             </div>
             <div className="border rounded-lg p-6 bg-card text-center">
               <h3 className="text-lg font-medium mb-4">
-                Intéressé par ce poste ?
+                {t("interested.title")}
               </h3>
               <p className="text-sm text-muted-foreground mb-4">
-                Postulez dès maintenant et rejoignez notre équipe passionnée.
+                {t("interested.description")}
               </p>
               <Button onClick={handleApplyClick} className="w-full">
-                Postuler maintenant
+                {t("apply")}
               </Button>
             </div>
           </div>
@@ -229,14 +274,10 @@ const JobDetailPage: React.FC<JobDetailPageProps> = ({ job }) => {
         <div className="border rounded-lg p-8 bg-card">
           <div className="max-w-3xl mx-auto text-center">
             <h2 className="text-2xl font-medium mb-4">
-              Notre culture d&apos;entreprise
+              {t("culture.title")}
             </h2>
             <p className="text-muted-foreground mb-6">
-              Chez onRuntime Studio, nous cultivons un environnement de travail
-              collaboratif et stimulant où chaque membre de l&apos;équipe peut
-              exprimer sa créativité et développer ses compétences. Nous
-              privilégions l&apos;innovation, la qualité et le bien-être de nos
-              collaborateurs.
+              {t("culture.description")}
             </p>
 
             <div className="grid grid-cols-1 md:grid-cols-3 gap-6 mb-6">
@@ -245,11 +286,10 @@ const JobDetailPage: React.FC<JobDetailPageProps> = ({ job }) => {
                   <FileText className="w-5 h-5" />
                 </div>
                 <h3 className="font-medium text-foreground mb-2">
-                  Formation continue
+                  {t("culture.training.title")}
                 </h3>
                 <p className="text-sm text-muted-foreground">
-                  Nous investissons dans le développement professionnel de nos
-                  équipes
+                  {t("culture.training.description")}
                 </p>
               </div>
 
@@ -258,11 +298,10 @@ const JobDetailPage: React.FC<JobDetailPageProps> = ({ job }) => {
                   <Building className="w-5 h-5" />
                 </div>
                 <h3 className="font-medium text-foreground mb-2">
-                  Environnement flexible
+                  {t("culture.flexible.title")}
                 </h3>
                 <p className="text-sm text-muted-foreground">
-                  Équilibre vie professionnelle/vie personnelle et travail
-                  hybride
+                  {t("culture.flexible.description")}
                 </p>
               </div>
 
@@ -271,10 +310,10 @@ const JobDetailPage: React.FC<JobDetailPageProps> = ({ job }) => {
                   <Globe className="w-5 h-5" />
                 </div>
                 <h3 className="font-medium text-foreground mb-2">
-                  Projets variés
+                  {t("culture.projects.title")}
                 </h3>
                 <p className="text-sm text-muted-foreground">
-                  Travaillez sur des projets diversifiés et stimulants
+                  {t("culture.projects.description")}
                 </p>
               </div>
             </div>
@@ -282,7 +321,7 @@ const JobDetailPage: React.FC<JobDetailPageProps> = ({ job }) => {
             <div className="text-center">
               <Link href="/npo">
                 <Button variant="outline">
-                  En savoir plus sur notre équipe
+                  {t("culture.learn-more")}
                 </Button>
               </Link>
             </div>
@@ -291,15 +330,13 @@ const JobDetailPage: React.FC<JobDetailPageProps> = ({ job }) => {
 
         <div className="border rounded-lg p-8 bg-card text-center">
           <h2 className="text-2xl font-medium mb-4">
-            Prêt à relever le défi ?
+            {t("cta.title")}
           </h2>
           <p className="text-muted-foreground max-w-2xl mx-auto mb-6">
-            Rejoignez notre équipe et participez à des projets stimulants qui
-            vous permettront de développer vos compétences et dexprimer votre
-            créativité.
+            {t("cta.description")}
           </p>
           <Button size="lg" onClick={handleApplyClick}>
-            Postuler maintenant
+            {t("apply")}
             <Briefcase className="ml-2 w-5 h-5" />
           </Button>
         </div>
diff --git a/apps/web/src/screens/marketing/careers/job-list.tsx b/apps/web/src/screens/marketing/careers/job-list.tsx
index febb00359..0e80fd94b 100644
--- a/apps/web/src/screens/marketing/careers/job-list.tsx
+++ b/apps/web/src/screens/marketing/careers/job-list.tsx
@@ -1,9 +1,12 @@
+"use client";
+
 import React from "react";
 import { JobPosting } from "@/types/job";
 import { Badge } from "@/components/ui/badge";
 import { CalendarDays, Clock, MapPin } from "lucide-react";
 import { Button } from "@/components/ui/button";
 import { Link } from "@onruntime/translations/next";
+import { useTranslation } from "@onruntime/translations/react";
 import { formatDate } from "@/lib/utils/date";
 
 interface JobListProps {
@@ -13,6 +16,22 @@ interface JobListProps {
 }
 
 const JobList: React.FC<JobListProps> = ({ jobs, isLoading, error }) => {
+  const { t } = useTranslation("components/marketing/careers/job-list");
+
+  const getEmploymentType = (type: string | null | undefined) => {
+    if (!type) return null;
+    const key = type.toLowerCase().replace(/_/g, "-");
+    const translated = t(`employment-type.${key}`);
+    return translated !== `employment-type.${key}` ? translated : type;
+  };
+
+  const getWorkplaceType = (type: string | null | undefined) => {
+    if (!type) return null;
+    const key = type.toLowerCase().replace(/_/g, "-");
+    const translated = t(`workplace-type.${key}`);
+    return translated !== `workplace-type.${key}` ? translated : type;
+  };
+
   if (isLoading) {
     return (
       <div id="job-listings" className="py-12">
@@ -43,7 +62,7 @@ const JobList: React.FC<JobListProps> = ({ jobs, isLoading, error }) => {
             className="mt-4"
             onClick={() => window.location.reload()}
           >
-            Réessayer
+            {t("retry")}
           </Button>
         </div>
       </div>
@@ -53,18 +72,15 @@ const JobList: React.FC<JobListProps> = ({ jobs, isLoading, error }) => {
   if (jobs.length === 0) {
     return (
       <div id="job-listings" className="py-12 text-center">
-        <p className="text-muted-foreground">
-          Aucune offre d&apos;emploi ne correspond à votre recherche.
-        </p>
+        <p className="text-muted-foreground">{t("no-results")}</p>
       </div>
     );
   }
 
-
   return (
     <div id="job-listings" className="space-y-6">
       <p className="text-sm text-muted-foreground">
-        {jobs.length} offre(s) d&apos;emploi disponible(s)
+        {jobs.length} {t("count")}
       </p>
 
       <div className="space-y-4">
@@ -84,23 +100,29 @@ const JobList: React.FC<JobListProps> = ({ jobs, isLoading, error }) => {
                       <MapPin className="w-4 h-4 mr-1" />
                       {job.location}
                     </div>
-                    <div className="flex items-center text-muted-foreground text-sm">
-                      <Clock className="w-4 h-4 mr-1" />
-                      {job.employmentType}
-                    </div>
+                    {job.employmentType && (
+                      <div className="flex items-center text-muted-foreground text-sm">
+                        <Clock className="w-4 h-4 mr-1" />
+                        {getEmploymentType(job.employmentType)}
+                      </div>
+                    )}
                     <div className="flex items-center text-muted-foreground text-sm">
                       <CalendarDays className="w-4 h-4 mr-1" />
-                      Publié le {formatDate(job.datePosted)}
+                      {t("published")} {formatDate(job.datePosted)}
                     </div>
                   </div>
                 </div>
 
                 <div className="flex flex-wrap gap-2">
-                  <Badge variant="secondary">{job.department}</Badge>
+                  {job.department && (
+                    <Badge variant="secondary">{job.department}</Badge>
+                  )}
                   {job.seniority && (
                     <Badge variant="outline">{job.seniority}</Badge>
                   )}
-                  {job.remote && <Badge variant="outline">Remote</Badge>}
+                  {job.workplaceType && (
+                    <Badge variant="outline">{getWorkplaceType(job.workplaceType)}</Badge>
+                  )}
                   {job.tags?.map((tag, index) => (
                     <Badge key={index} variant="outline">
                       {tag}
@@ -109,15 +131,13 @@ const JobList: React.FC<JobListProps> = ({ jobs, isLoading, error }) => {
                 </div>
 
                 {job.shortDescription && (
-                  <p className="text-muted-foreground">
-                    {job.shortDescription}
-                  </p>
+                  <p className="text-muted-foreground">{job.shortDescription}</p>
                 )}
               </div>
 
               <div className="flex-shrink-0">
                 <Link href={`/careers/${job.id}`} passHref>
-                  <Button>Voir l&apos;offre</Button>
+                  <Button>{t("view-offer")}</Button>
                 </Link>
               </div>
             </div>
diff --git a/apps/web/src/services/join.ts b/apps/web/src/services/join.ts
index a1b4cf4c7..6e4c3bf52 100644
--- a/apps/web/src/services/join.ts
+++ b/apps/web/src/services/join.ts
@@ -6,13 +6,24 @@ const JOIN_API_BASE_URL = "https://api.join.com/v2";
 const joinJobSchema = z.object({
   id: z.union([z.string(), z.number()]).transform((val) => String(val)),
   title: z.string(),
+  createdAt: z.string().optional(),
+  lastUpdatedAt: z.string().optional(),
+  status: z.string().optional(),
+  remote: z.boolean().optional(),
+  office: z.object({
+    id: z.union([z.string(), z.number(), z.null()]).optional(),
+    name: z.string().nullable().optional(),
+    city: z.string().nullable().optional(),
+    countryIso: z.string().nullable().optional(),
+  }).optional(),
+  workplaceType: z.string().nullable().optional(), // HYBRID, REMOTE, ON_SITE
+  remoteType: z.string().nullable().optional(),
+  // Fields from single job endpoint
   department: z.object({ name: z.string() }).optional(),
-  location: z.object({ name: z.string() }).optional(),
-  employmentType: z.string().optional(),
+  employmentType: z.string().nullable().optional(),
   publishedAt: z.string().optional(),
   applyUrl: z.string().optional(),
   seniority: z.object({ name: z.string() }).optional(),
-  remote: z.boolean().optional(),
   shortDescription: z.string().optional(),
   description: z.string().optional(),
   requirements: z.string().optional(),
@@ -26,23 +37,27 @@ const joinJobSchema = z.object({
 
 export type JoinJob = z.output<typeof joinJobSchema>;
 
-async function request(path: string): Promise<Response> {
+async function request(path: string, locale?: string): Promise<Response> {
   const apiKey = env.JOIN_API_KEY;
   if (!apiKey) {
     throw new Error("JOIN_API_KEY is not configured");
   }
 
-  return fetch(`${JOIN_API_BASE_URL}${path}`, {
-    headers: {
-      Authorization: apiKey,
-      Accept: "application/json",
-    },
-  });
+  const headers: HeadersInit = {
+    Authorization: apiKey,
+    Accept: "application/json",
+  };
+
+  if (locale) {
+    headers["Accept-Language"] = locale;
+  }
+
+  return fetch(`${JOIN_API_BASE_URL}${path}`, { headers });
 }
 
 export const joinClient = {
-  async jobs(): Promise<JoinJob[]> {
-    const response = await request("/jobs");
+  async jobs(locale?: string): Promise<JoinJob[]> {
+    const response = await request("/jobs", locale);
 
     if (!response.ok) {
       const errorText = await response.text();
@@ -61,8 +76,8 @@ export const joinClient = {
     return result.data;
   },
 
-  async job(jobId: string): Promise<JoinJob | null> {
-    const response = await request(`/jobs/${jobId}`);
+  async job(jobId: string, locale?: string): Promise<JoinJob | null> {
+    const response = await request(`/jobs/${jobId}`, locale);
 
     if (response.status === 404) {
       return null;
diff --git a/apps/web/src/types/job.ts b/apps/web/src/types/job.ts
index 5d43642d0..71a0859d1 100644
--- a/apps/web/src/types/job.ts
+++ b/apps/web/src/types/job.ts
@@ -3,7 +3,9 @@ export interface JobPosting {
 
   title: string;
 
-  employmentType: string;
+  employmentType?: string | null;
+
+  workplaceType?: string | null; // HYBRID, REMOTE, ON_SITE
 
   department: string;
 
@@ -27,7 +29,11 @@ export interface JobPosting {
 
   benefits?: string;
 
-  salary?: string;
+  salary?: {
+    min?: number;
+    max?: number;
+    currency: string;
+  } | null;
 
   validThrough?: string;
 }

From 585dfc7ba8a407f389821f269a024171069bb552 Mon Sep 17 00:00:00 2001
From: Antoine Kingue <etorefr@gmail.com>
Date: Mon, 29 Dec 2025 00:48:37 +0100
Subject: [PATCH 12/64] =?UTF-8?q?=F0=9F=8C=90=20add=20projects=20pages=20t?=
 =?UTF-8?q?ranslations?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/app/[locale]/careers/[id]/page.tsx    |   4 +-
 .../src/app/[locale]/projects/[id]/page.tsx   |  21 +-
 apps/web/src/app/[locale]/projects/page.tsx   |   7 +-
 .../marketing/agency/local-portfolio.tsx      | 117 ++++---
 .../landing/visitor/projects/card/index.tsx   |  33 +-
 .../landing/visitor/projects/index.tsx        |   4 +-
 .../navbar/navigation/projects/index.tsx      | 100 +++---
 .../marketing/projects/sections/index.tsx     | 128 +++++---
 .../projects/dark-theme-instagram.ts          | 172 ++++-------
 .../src/constants/projects/expatfacilities.ts | 242 ++++-----------
 apps/web/src/constants/projects/kartrak.ts    | 132 ++------
 apps/web/src/constants/projects/kitchn.ts     | 159 ++--------
 .../web/src/constants/projects/shadowbonus.ts | 115 ++-----
 .../web/src/constants/projects/tonightpass.ts | 194 +++---------
 apps/web/src/locales/README.md                |  37 ++-
 .../src/locales/en/app/careers/[id]/page.json |   9 +-
 .../locales/en/app/projects/[id]/page.json    |  10 +
 .../web/src/locales/en/app/projects/page.json |   6 +
 .../marketing/careers/job-details.json        |   5 +-
 .../components/marketing/projects/card.json   |   6 +
 .../marketing/projects/sections.json          |  22 ++
 .../projects/dark-theme-instagram.json        |  46 +++
 .../constants/projects/expatfacilities.json   |  81 +++++
 .../en/constants/projects/kartrak.json        |  57 ++++
 .../locales/en/constants/projects/kitchn.json |  56 ++++
 .../en/constants/projects/shadowbonus.json    |  53 ++++
 .../en/constants/projects/tonightpass.json    |  50 +++
 .../en/screens/marketing/projects.json        |  97 ++++++
 .../screens/marketing/projects/details.json   |  65 ++++
 .../src/locales/fr/app/careers/[id]/page.json |   9 +-
 .../locales/fr/app/projects/[id]/page.json    |  10 +
 .../web/src/locales/fr/app/projects/page.json |   6 +
 .../marketing/careers/job-details.json        |   7 +-
 .../components/marketing/projects/card.json   |   6 +
 .../marketing/projects/sections.json          |  22 ++
 .../projects/dark-theme-instagram.json        |  46 +++
 .../constants/projects/expatfacilities.json   |  81 +++++
 .../fr/constants/projects/kartrak.json        |  57 ++++
 .../locales/fr/constants/projects/kitchn.json |  56 ++++
 .../fr/constants/projects/shadowbonus.json    |  53 ++++
 .../fr/constants/projects/tonightpass.json    |  50 +++
 .../fr/screens/marketing/projects.json        |  97 ++++++
 .../screens/marketing/projects/details.json   |  65 ++++
 .../screens/marketing/careers/job-details.tsx |   2 +-
 .../marketing/projects/details/index.tsx      | 292 ++++++++++--------
 .../src/screens/marketing/projects/index.tsx  | 166 ++++++----
 apps/web/src/types/project.ts                 |  51 ++-
 47 files changed, 1907 insertions(+), 1197 deletions(-)
 create mode 100644 apps/web/src/locales/en/app/projects/[id]/page.json
 create mode 100644 apps/web/src/locales/en/app/projects/page.json
 create mode 100644 apps/web/src/locales/en/components/marketing/projects/card.json
 create mode 100644 apps/web/src/locales/en/components/marketing/projects/sections.json
 create mode 100644 apps/web/src/locales/en/constants/projects/dark-theme-instagram.json
 create mode 100644 apps/web/src/locales/en/constants/projects/expatfacilities.json
 create mode 100644 apps/web/src/locales/en/constants/projects/kartrak.json
 create mode 100644 apps/web/src/locales/en/constants/projects/kitchn.json
 create mode 100644 apps/web/src/locales/en/constants/projects/shadowbonus.json
 create mode 100644 apps/web/src/locales/en/constants/projects/tonightpass.json
 create mode 100644 apps/web/src/locales/en/screens/marketing/projects.json
 create mode 100644 apps/web/src/locales/en/screens/marketing/projects/details.json
 create mode 100644 apps/web/src/locales/fr/app/projects/[id]/page.json
 create mode 100644 apps/web/src/locales/fr/app/projects/page.json
 create mode 100644 apps/web/src/locales/fr/components/marketing/projects/card.json
 create mode 100644 apps/web/src/locales/fr/components/marketing/projects/sections.json
 create mode 100644 apps/web/src/locales/fr/constants/projects/dark-theme-instagram.json
 create mode 100644 apps/web/src/locales/fr/constants/projects/expatfacilities.json
 create mode 100644 apps/web/src/locales/fr/constants/projects/kartrak.json
 create mode 100644 apps/web/src/locales/fr/constants/projects/kitchn.json
 create mode 100644 apps/web/src/locales/fr/constants/projects/shadowbonus.json
 create mode 100644 apps/web/src/locales/fr/constants/projects/tonightpass.json
 create mode 100644 apps/web/src/locales/fr/screens/marketing/projects.json
 create mode 100644 apps/web/src/locales/fr/screens/marketing/projects/details.json

diff --git a/apps/web/src/app/[locale]/careers/[id]/page.tsx b/apps/web/src/app/[locale]/careers/[id]/page.tsx
index acf1f5ac4..867d17934 100644
--- a/apps/web/src/app/[locale]/careers/[id]/page.tsx
+++ b/apps/web/src/app/[locale]/careers/[id]/page.tsx
@@ -42,10 +42,10 @@ export async function generateMetadata(props: {
   }
 
   return constructMetadata({
-    title: job.title + t("metadata.title.suffix"),
+    title: t("metadata.title", { jobTitle: job.title }),
     description:
       job.shortDescription ||
-      t("metadata.description.prefix") + job.title + t("metadata.description.suffix"),
+      t("metadata.description", { jobTitle: job.title }),
   });
 }
 
diff --git a/apps/web/src/app/[locale]/projects/[id]/page.tsx b/apps/web/src/app/[locale]/projects/[id]/page.tsx
index ae690f905..63e5b9ae4 100644
--- a/apps/web/src/app/[locale]/projects/[id]/page.tsx
+++ b/apps/web/src/app/[locale]/projects/[id]/page.tsx
@@ -3,6 +3,7 @@ import Projects from "@/constants/projects";
 import ProjectPage from "@/screens/marketing/projects/details";
 import type { Metadata } from "next";
 import { constructMetadata } from "@/lib/utils/metadata";
+import { getTranslation } from "@/lib/translations.server";
 import { ProjectSchema } from "@/components/json-ld/project-schema";
 
 type Params = Promise<{ id: string }>;
@@ -14,19 +15,23 @@ export async function generateMetadata({
 }): Promise<Metadata> {
   const { id } = await params;
   const project = Projects.find((p) => p.id === id);
+  const { t } = await getTranslation("app/projects/[id]/page");
 
   if (!project) {
     return constructMetadata({
-      title: "Projet non trouvé",
-      description: "Ce projet n'existe pas.",
+      title: t("metadata.not-found.title"),
+      description: t("metadata.not-found.description"),
     });
   }
 
+  const { t: tProject } = await getTranslation(`constants/projects/${project.id}`);
+
   return constructMetadata({
-    title: `Étude de cas : ${project.name} - Projet digital par notre agence`,
-    description: `Découvrez comment notre agence a conçu et développé ${
-      project.name
-    }. ${project.shortDescription.slice(0, 100)}`,
+    title: t("metadata.title", { name: project.name }),
+    description: t("metadata.description", {
+      name: project.name,
+      shortDescription: tProject("short-description").slice(0, 100),
+    }),
   });
 }
 
@@ -38,12 +43,14 @@ export default async function Page({ params }: { params: Params }) {
     notFound();
   }
 
+  const { t: tProject } = await getTranslation(`constants/projects/${project.id}`);
+
   return (
     <>
       <ProjectSchema
         id={`https://onruntime.com/projects/${project.id}`}
         name={project.name}
-        description={project.description}
+        description={tProject("description")}
       />
       <ProjectPage project={project} />
     </>
diff --git a/apps/web/src/app/[locale]/projects/page.tsx b/apps/web/src/app/[locale]/projects/page.tsx
index 829c9d663..04d386a52 100644
--- a/apps/web/src/app/[locale]/projects/page.tsx
+++ b/apps/web/src/app/[locale]/projects/page.tsx
@@ -1,10 +1,13 @@
 import { constructMetadata } from "@/lib/utils/metadata";
+import { getTranslation } from "@/lib/translations.server";
 import ProjectsPage from "@/screens/marketing/projects";
 
 export async function generateMetadata() {
+  const { t } = await getTranslation("app/projects/page");
+
   return constructMetadata({
-    title: "Portfolio de projets | Web, Mobile et Design par onRuntime Studio",
-    description: "Découvrez notre portfolio de projets en développement web, mobile et design. Des réalisations pour des clients variés et nos projets internes innovants.",
+    title: t("metadata.title"),
+    description: t("metadata.description"),
   });
 }
 
diff --git a/apps/web/src/components/marketing/agency/local-portfolio.tsx b/apps/web/src/components/marketing/agency/local-portfolio.tsx
index 77435118a..24985c5d3 100644
--- a/apps/web/src/components/marketing/agency/local-portfolio.tsx
+++ b/apps/web/src/components/marketing/agency/local-portfolio.tsx
@@ -6,19 +6,77 @@ import { ArrowRight } from 'lucide-react';
 import Routes from '@/constants/routes';
 import { Agency } from '@/types/agency';
 import Projects from '@/constants/projects';
-import { Tag } from '@/types/project';
+import { Project, Tag } from '@/types/project';
+import { getTranslation } from '@/lib/translations.server';
 
 interface LocalPortfolioProps {
   agency: Agency;
 }
 
-const LocalPortfolio: React.FC<LocalPortfolioProps> = ({ agency }) => {
+interface LocalPortfolioProjectProps {
+  project: Project;
+  agency: Agency;
+  index: number;
+}
+
+const LocalPortfolioProject: React.FC<LocalPortfolioProjectProps> = async ({
+  project,
+  agency,
+  index,
+}) => {
+  const { t: tProject } = await getTranslation(`constants/projects/${project.id}`);
+
+  return (
+    <div className="flex flex-col h-full border rounded-lg overflow-hidden hover:border-onruntime-blue transition-colors">
+      <div className="relative aspect-video w-full overflow-hidden">
+        <Image
+          src={project.showcaseUrl || project.thumbnailUrl}
+          alt={project.name}
+          className="object-cover"
+          fill
+        />
+      </div>
+      <div className="p-6 flex-grow flex flex-col">
+        <h3 className="text-xl font-medium mb-2">{project.name}</h3>
+        <p className="text-sm text-muted-foreground mb-4">{tProject("description")}</p>
+
+        <div className="mb-4 p-3 bg-muted/50 rounded-md">
+          <p className="text-xs font-medium mb-1">Application au marché {agency.region}</p>
+          <p className="text-sm text-muted-foreground">
+            {index === 0
+              ? `Notre expérience avec ce projet nous a permis de développer une expertise particulièrement applicable au secteur ${project.tags.includes(Tag.FEATURED) ? 'des nouvelles technologies' : 'du commerce digital'} dans la région ${agency.region}.`
+              : `Les compétences et technologies utilisées dans ce projet sont directement transférables aux besoins des entreprises de ${agency.name}, notamment dans ${project.tags.includes(Tag.FEATURED) ? 'l\'innovation ouverte' : 'la transformation numérique'}.`}
+          </p>
+        </div>
 
-  const featuredProjects = Projects.filter(project => 
+        <div className="flex flex-wrap gap-2 mb-4">
+          {project.tags.map((tag, tagIndex) => (
+            <span key={tagIndex} className="px-2 py-1 bg-muted text-xs rounded-full">
+              {tag === Tag.FEATURED ? "Projet phare" :
+                tag === Tag.OPEN_SOURCE ? "Open Source" : tag}
+            </span>
+          ))}
+        </div>
+
+        <div className="mt-auto">
+          <Link href={Routes.project(project.id)}>
+            <Button variant="outline" className="w-full">
+              Voir le projet
+              <ArrowRight className="ml-2 h-4 w-4" />
+            </Button>
+          </Link>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+const LocalPortfolio: React.FC<LocalPortfolioProps> = ({ agency }) => {
+  const featuredProjects = Projects.filter(project =>
     project.tags.includes(Tag.FEATURED)
   ).slice(0, 1);
 
-  const otherProjects = Projects.filter(project => 
+  const otherProjects = Projects.filter(project =>
     !project.tags.includes(Tag.FEATURED)
   ).slice(0, 2 - featuredProjects.length);
 
@@ -31,54 +89,19 @@ const LocalPortfolio: React.FC<LocalPortfolioProps> = ({ agency }) => {
           Notre expertise applicable aux projets à {agency.name}
         </h2>
         <p className="text-muted-foreground max-w-3xl mx-auto">
-          Découvrez quelques-unes de nos réalisations qui illustrent notre savoir-faire, 
+          Découvrez quelques-unes de nos réalisations qui illustrent notre savoir-faire,
           applicable aux défis numériques des entreprises de {agency.region}.
         </p>
       </div>
 
       <div className="grid grid-cols-1 md:grid-cols-2 gap-8">
         {displayProjects.map((project, index) => (
-          <div key={project.id} className="flex flex-col h-full border rounded-lg overflow-hidden hover:border-onruntime-blue transition-colors">
-            <div className="relative aspect-video w-full overflow-hidden">
-              <Image 
-                src={project.showcaseUrl || project.thumbnailUrl}
-                alt={project.name}
-                className="object-cover"
-                fill
-              />
-            </div>
-            <div className="p-6 flex-grow flex flex-col">
-              <h3 className="text-xl font-medium mb-2">{project.name}</h3>
-              <p className="text-sm text-muted-foreground mb-4">{project.description}</p>
-
-              <div className="mb-4 p-3 bg-muted/50 rounded-md">
-                <p className="text-xs font-medium mb-1">Application au marché {agency.region}</p>
-                <p className="text-sm text-muted-foreground">
-                  {index === 0 
-                    ? `Notre expérience avec ce projet nous a permis de développer une expertise particulièrement applicable au secteur ${project.tags.includes(Tag.FEATURED) ? 'des nouvelles technologies' : 'du commerce digital'} dans la région ${agency.region}.` 
-                    : `Les compétences et technologies utilisées dans ce projet sont directement transférables aux besoins des entreprises de ${agency.name}, notamment dans ${project.tags.includes(Tag.OPEN_SOURCE) ? 'l\'innovation ouverte' : 'la transformation numérique'}.`}
-                </p>
-              </div>
-              
-              <div className="flex flex-wrap gap-2 mb-4">
-                {project.tags.map((tag, index) => (
-                  <span key={index} className="px-2 py-1 bg-muted text-xs rounded-full">
-                    {tag === Tag.FEATURED ? "Projet phare" : 
-                     tag === Tag.OPEN_SOURCE ? "Open Source" : tag}
-                  </span>
-                ))}
-              </div>
-              
-              <div className="mt-auto">
-                <Link href={Routes.project(project.id)}>
-                  <Button variant="outline" className="w-full">
-                    Voir le projet
-                    <ArrowRight className="ml-2 h-4 w-4" />
-                  </Button>
-                </Link>
-              </div>
-            </div>
-          </div>
+          <LocalPortfolioProject
+            key={project.id}
+            project={project}
+            agency={agency}
+            index={index}
+          />
         ))}
       </div>
 
@@ -100,4 +123,4 @@ const LocalPortfolio: React.FC<LocalPortfolioProps> = ({ agency }) => {
   );
 };
 
-export default LocalPortfolio;
\ No newline at end of file
+export default LocalPortfolio;
diff --git a/apps/web/src/components/marketing/landing/visitor/projects/card/index.tsx b/apps/web/src/components/marketing/landing/visitor/projects/card/index.tsx
index 42cd37468..afff0b9c7 100644
--- a/apps/web/src/components/marketing/landing/visitor/projects/card/index.tsx
+++ b/apps/web/src/components/marketing/landing/visitor/projects/card/index.tsx
@@ -4,39 +4,42 @@ import Routes from "@/constants/routes";
 import { Project, Tag } from "@/types/project";
 import Image from "next/image";
 import { Link } from "@onruntime/translations/next";
+import { useTranslation } from "@onruntime/translations/react";
 import React from "react";
 
 export type ProjectCardProps = {
   project: Project;
 };
 
-const ProjectCard: React.FC<ProjectCardProps> = ({ 
-  project 
+const ProjectCard: React.FC<ProjectCardProps> = ({
+  project
 }: ProjectCardProps) => {
   const ref = React.useRef<HTMLAnchorElement>(null);
+  const { t } = useTranslation("components/marketing/projects/card");
+  const { t: tProject } = useTranslation(`constants/projects/${project.id}`);
 
   return (
-    <Link 
-      className="flex flex-col gap-3 h-full group" 
-      href={Routes.project(project.id)} 
+    <Link
+      className="flex flex-col gap-3 h-full group"
+      href={Routes.project(project.id)}
       ref={ref}
     >
       <div className="relative aspect-video w-full overflow-hidden rounded-lg">
-        <Image 
-          className="object-cover transition-transform duration-300 group-hover:scale-105" 
-          src={project.thumbnailUrl} 
-          alt={project.name} 
+        <Image
+          className="object-cover transition-transform duration-300 group-hover:scale-105"
+          src={project.thumbnailUrl}
+          alt={project.name}
           fill
           sizes="(max-width: 640px) 100vw, (max-width: 768px) 50vw, (max-width: 1024px) 33vw, 25vw"
         />
         <div className="absolute bottom-2 right-2 flex flex-wrap gap-2">
           {project.tags && project.tags.flatMap((tag) => {
             switch (tag) {
-              case Tag.FEATURED: 
-                return <Badge key={tag}>Featured</Badge>;
-              case Tag.OPEN_SOURCE: 
-                return <Badge key={tag}>Open Source</Badge>;
-              default: 
+              case Tag.FEATURED:
+                return <Badge key={tag}>{t("tags.featured")}</Badge>;
+              case Tag.OPEN_SOURCE:
+                return <Badge key={tag}>{t("tags.open-source")}</Badge>;
+              default:
                 return null;
             }
           })}
@@ -45,7 +48,7 @@ const ProjectCard: React.FC<ProjectCardProps> = ({
       <div className="flex flex-col flex-grow">
         <h3 className="text-foreground font-medium">{project.name}</h3>
         <p className="text-sm text-muted-foreground leading-tight line-clamp-2 mt-1">
-          {project.shortDescription}
+          {tProject("short-description")}
         </p>
       </div>
     </Link>
diff --git a/apps/web/src/components/marketing/landing/visitor/projects/index.tsx b/apps/web/src/components/marketing/landing/visitor/projects/index.tsx
index 9addd0db6..89dc48a75 100644
--- a/apps/web/src/components/marketing/landing/visitor/projects/index.tsx
+++ b/apps/web/src/components/marketing/landing/visitor/projects/index.tsx
@@ -1,7 +1,7 @@
 "use client";
 
 import { Button } from "@/components/ui/button";
-import { default as ProjectsConst } from "@/constants/projects";
+import ProjectsData from "@/constants/projects";
 import React from "react";
 import ProjectCard from "./card";
 import { Link } from "@onruntime/translations/next";
@@ -20,7 +20,7 @@ const Projects: React.FC = () => {
         </Link>
       </div>
       <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-5 justify-center">
-        {ProjectsConst.map((project) => (
+        {ProjectsData.map((project) => (
           <ProjectCard key={project.id} project={project} />
         ))}
       </div>
diff --git a/apps/web/src/components/marketing/navbar/navigation/projects/index.tsx b/apps/web/src/components/marketing/navbar/navigation/projects/index.tsx
index 42837c95c..0d91809ec 100644
--- a/apps/web/src/components/marketing/navbar/navigation/projects/index.tsx
+++ b/apps/web/src/components/marketing/navbar/navigation/projects/index.tsx
@@ -12,10 +12,65 @@ import { ArrowRight, Code, Eye, Github, Rocket } from "lucide-react";
 import React from "react";
 import { Link } from "@onruntime/translations/next";
 import Image from "next/image";
-import { Tag } from "@/types/project";
+import { Project, Tag } from "@/types/project";
 
 import { useTranslation } from "@onruntime/translations/react";
 
+const FeaturedProjectCard: React.FC<{ project: Project }> = ({ project }) => {
+  const { t: tProject } = useTranslation(`constants/projects/${project.id}`);
+
+  return (
+    <NavigationMenuLink asChild className="block">
+      <Link
+        href={Routes.project(project.id)}
+        className="group flex p-3 gap-4 select-none rounded-md no-underline outline-none transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground"
+      >
+        <div className="relative h-12 w-12 overflow-hidden rounded-md">
+          <Image
+            src={project.iconUrl}
+            alt={project.name}
+            fill
+            className="object-cover"
+          />
+        </div>
+        <div className="flex-1">
+          <div className="text-sm font-semibold leading-none mb-1">
+            {project.name}
+          </div>
+          <p className="line-clamp-2 text-xs leading-snug text-muted-foreground">
+            {tProject("short-description")}
+          </p>
+        </div>
+      </Link>
+    </NavigationMenuLink>
+  );
+};
+
+const ProjectCard: React.FC<{ project: Project }> = ({ project }) => {
+  const { t: tProject } = useTranslation(`constants/projects/${project.id}`);
+
+  return (
+    <NavigationMenuLink asChild>
+      <Link
+        href={Routes.project(project.id)}
+        className="block select-none space-y-1 rounded-md p-3 no-underline outline-none transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground"
+      >
+        <div className="flex items-center justify-between">
+          <div className="text-sm font-medium leading-none">
+            {project.name}
+          </div>
+          {project.tags.includes(Tag.OPEN_SOURCE) && (
+            <Github className="h-3.5 w-3.5 text-muted-foreground" />
+          )}
+        </div>
+        <p className="line-clamp-2 text-xs leading-snug text-muted-foreground">
+          {tProject("short-description")}
+        </p>
+      </Link>
+    </NavigationMenuLink>
+  );
+};
+
 const NavigationProjects: React.FC = () => {
   const { t } = useTranslation("layout/navbar");
 
@@ -80,51 +135,12 @@ const NavigationProjects: React.FC = () => {
 
           <div className="grid gap-3">
             {displayProjects.length > 0 && (
-              <NavigationMenuLink asChild className="block">
-                <Link
-                  href={Routes.project(displayProjects[0].id)}
-                  className="group flex p-3 gap-4 select-none rounded-md no-underline outline-none transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground"
-                >
-                  <div className="relative h-12 w-12 overflow-hidden rounded-md">
-                    <Image
-                      src={displayProjects[0].iconUrl}
-                      alt={displayProjects[0].name}
-                      fill
-                      className="object-cover"
-                    />
-                  </div>
-                  <div className="flex-1">
-                    <div className="text-sm font-semibold leading-none mb-1">
-                      {displayProjects[0].name}
-                    </div>
-                    <p className="line-clamp-2 text-xs leading-snug text-muted-foreground">
-                      {displayProjects[0].shortDescription}
-                    </p>
-                  </div>
-                </Link>
-              </NavigationMenuLink>
+              <FeaturedProjectCard project={displayProjects[0]} />
             )}
 
             <div className="grid gap-2">
               {displayProjects.slice(1).map((project) => (
-                <NavigationMenuLink asChild key={project.id}>
-                  <Link
-                    href={Routes.project(project.id)}
-                    className="block select-none space-y-1 rounded-md p-3 no-underline outline-none transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground"
-                  >
-                    <div className="flex items-center justify-between">
-                      <div className="text-sm font-medium leading-none">
-                        {project.name}
-                      </div>
-                      {project.tags.includes(Tag.OPEN_SOURCE) && (
-                        <Github className="h-3.5 w-3.5 text-muted-foreground" />
-                      )}
-                    </div>
-                    <p className="line-clamp-2 text-xs leading-snug text-muted-foreground">
-                      {project.shortDescription}
-                    </p>
-                  </Link>
-                </NavigationMenuLink>
+                <ProjectCard key={project.id} project={project} />
               ))}
             </div>
           </div>
diff --git a/apps/web/src/components/marketing/projects/sections/index.tsx b/apps/web/src/components/marketing/projects/sections/index.tsx
index 89f1ea62b..b4ab9847a 100644
--- a/apps/web/src/components/marketing/projects/sections/index.tsx
+++ b/apps/web/src/components/marketing/projects/sections/index.tsx
@@ -1,18 +1,69 @@
 "use client";
 
-import React from 'react';
+import React from "react";
 import { Badge } from "@/components/ui/badge";
 import Projects from "@/constants/projects";
 import { Tag } from "@/types/project";
 import ProjectCard from "@/components/marketing/landing/visitor/projects/card";
 import Image from "next/image";
 import { Link } from "@onruntime/translations/next";
+import { useTranslation } from "@onruntime/translations/react";
 import { Button } from "@/components/ui/button";
 import { ArrowRight } from "lucide-react";
 import Routes from "@/constants/routes";
 
+const FeaturedProjectCard = ({ project }: { project: (typeof Projects)[number] }) => {
+  const { t } = useTranslation("components/marketing/projects/sections");
+  const { t: tProject } = useTranslation(`constants/projects/${project.id}`);
+
+  const getTagLabel = (tag: Tag) => {
+    if (tag === Tag.FEATURED) return t("tags.featured");
+    if (tag === Tag.OPEN_SOURCE) return t("tags.open-source");
+    if (tag === Tag.CUSTOMER) return t("tags.customer");
+    return tag;
+  };
+
+  return (
+    <div className="flex flex-col h-full group">
+      <Link href={Routes.project(project.id)} className="block">
+        <div className="relative aspect-video w-full overflow-hidden rounded-lg mb-4">
+          <Image
+            src={project.showcaseUrl}
+            alt={project.name}
+            className="object-cover transition-transform duration-300 group-hover:scale-105"
+            fill
+            sizes="(max-width: 768px) 100vw, 50vw"
+          />
+          <div className="absolute bottom-4 left-4 flex gap-2">
+            {project.tags.map((tag) => (
+              <Badge key={tag}>{getTagLabel(tag)}</Badge>
+            ))}
+          </div>
+        </div>
+      </Link>
+      <h3 className="text-xl font-medium">{project.name}</h3>
+      <p className="mt-2 mb-4 text-muted-foreground line-clamp-3">
+        {tProject("description")}
+      </p>
+      <div className="mt-auto">
+        <Link href={Routes.project(project.id)}>
+          <Button
+            variant="outline"
+            className="w-full group-hover:border-onruntime-blue transition-colors"
+          >
+            {t("featured.view-project")}
+            <ArrowRight className="ml-2 h-4 w-4 group-hover:text-onruntime-blue transition-colors" />
+          </Button>
+        </Link>
+      </div>
+    </div>
+  );
+};
+
 export const FeaturedProjects = () => {
-  const featuredProjects = Projects.filter(project => 
+  const { t } = useTranslation("components/marketing/projects/sections");
+
+  const featuredProjects = Projects.filter((project) =>
     project.tags.includes(Tag.FEATURED)
   );
 
@@ -21,42 +72,13 @@ export const FeaturedProjects = () => {
   return (
     <div className="space-y-8">
       <div className="flex justify-between items-center">
-        <h2 className="text-2xl font-medium text-foreground">Projets à la une</h2>
+        <h2 className="text-2xl font-medium text-foreground">
+          {t("featured.title")}
+        </h2>
       </div>
       <div className="grid grid-cols-1 md:grid-cols-2 gap-8">
         {featuredProjects.map((project) => (
-          <div key={project.id} className="flex flex-col h-full group">
-            <Link href={Routes.project(project.id)} className="block">
-              <div className="relative aspect-video w-full overflow-hidden rounded-lg mb-4">
-                <Image 
-                  src={project.showcaseUrl} 
-                  alt={project.name}
-                  className="object-cover transition-transform duration-300 group-hover:scale-105"
-                  fill
-                  sizes="(max-width: 768px) 100vw, 50vw"
-                />
-                <div className="absolute bottom-4 left-4 flex gap-2">
-                  {project.tags.map(tag => (
-                    <Badge key={tag}>
-                      {tag === Tag.FEATURED ? "Featured" : 
-                       tag === Tag.OPEN_SOURCE ? "Open Source" : 
-                       tag === Tag.CUSTOMER ? "Client" : tag}
-                    </Badge>
-                  ))}
-                </div>
-              </div>
-            </Link>
-            <h3 className="text-xl font-medium">{project.name}</h3>
-            <p className="mt-2 mb-4 text-muted-foreground line-clamp-3">{project.description}</p>
-            <div className="mt-auto">
-              <Link href={Routes.project(project.id)}>
-                <Button variant="outline" className="w-full group-hover:border-onruntime-blue transition-colors">
-                  Voir le projet
-                  <ArrowRight className="ml-2 h-4 w-4 group-hover:text-onruntime-blue transition-colors" />
-                </Button>
-              </Link>
-            </div>
-          </div>
+          <FeaturedProjectCard key={project.id} project={project} />
         ))}
       </div>
     </div>
@@ -64,8 +86,12 @@ export const FeaturedProjects = () => {
 };
 
 export const StudioProjects = () => {
-  const studioProjects = Projects.filter(project => 
-    !project.tags.includes(Tag.FEATURED) && !project.tags.includes(Tag.CUSTOMER)
+  const { t } = useTranslation("components/marketing/projects/sections");
+
+  const studioProjects = Projects.filter(
+    (project) =>
+      !project.tags.includes(Tag.FEATURED) &&
+      !project.tags.includes(Tag.CUSTOMER)
   );
 
   if (studioProjects.length === 0) return null;
@@ -73,9 +99,11 @@ export const StudioProjects = () => {
   return (
     <div className="space-y-8">
       <div className="flex justify-between items-center">
-        <h2 className="text-2xl font-medium text-foreground">Projets studio</h2>
+        <h2 className="text-2xl font-medium text-foreground">
+          {t("studio.title")}
+        </h2>
       </div>
-      
+
       <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-6">
         {studioProjects.map((project) => (
           <ProjectCard key={project.id} project={project} />
@@ -86,7 +114,9 @@ export const StudioProjects = () => {
 };
 
 export const CustomerProjects = () => {
-  const customerProjects = Projects.filter(project => 
+  const { t } = useTranslation("components/marketing/projects/sections");
+
+  const customerProjects = Projects.filter((project) =>
     project.tags.includes(Tag.CUSTOMER)
   );
 
@@ -95,10 +125,14 @@ export const CustomerProjects = () => {
   return (
     <div className="space-y-8">
       <div className="flex justify-between items-center">
-        <h2 className="text-2xl font-medium text-foreground">Projets clients</h2>
-        {!hasCustomerProjects && <Badge variant="secondary">Prochainement</Badge>}
+        <h2 className="text-2xl font-medium text-foreground">
+          {t("customer.title")}
+        </h2>
+        {!hasCustomerProjects && (
+          <Badge variant="secondary">{t("customer.coming-soon")}</Badge>
+        )}
       </div>
-      
+
       {hasCustomerProjects ? (
         <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-6">
           {customerProjects.map((project) => (
@@ -109,13 +143,11 @@ export const CustomerProjects = () => {
         <div className="flex justify-center py-12">
           <div className="text-center max-w-lg">
             <p className="text-muted-foreground mb-6">
-              Nos projets clients sont en cours de préparation. 
-              Contactez-nous pour en savoir plus sur nos réalisations 
-              ou pour discuter de votre projet.
+              {t("customer.empty.description")}
             </p>
             <Link href={Routes.contact}>
               <Button variant="outline">
-                Discuter de votre projet
+                {t("customer.empty.button")}
                 <ArrowRight className="ml-2 h-4 w-4" />
               </Button>
             </Link>
@@ -124,4 +156,4 @@ export const CustomerProjects = () => {
       )}
     </div>
   );
-};
\ No newline at end of file
+};
diff --git a/apps/web/src/constants/projects/dark-theme-instagram.ts b/apps/web/src/constants/projects/dark-theme-instagram.ts
index 4b7b9b9e3..e5b2d993b 100644
--- a/apps/web/src/constants/projects/dark-theme-instagram.ts
+++ b/apps/web/src/constants/projects/dark-theme-instagram.ts
@@ -2,120 +2,60 @@ import { type Project, Tag } from "@/types/project";
 import { Chrome, Code, Paintbrush, Shield, Smartphone } from "lucide-react";
 
 export const darkThemeForInstagram: Project = {
-	id: "dark-theme-instagram",
-	name: "Dark Theme for Instagram",
-	tags: [Tag.OPEN_SOURCE],
-	shortDescription:
-		"Une extension de navigateur qui transforme Instagram en mode sombre, similaire à l'application iOS.",
-	description:
-		"Changez le thème de Instagram.com en mode sombre lorsque le système est en mode sombre.",
-	longDescription: `Dark Theme for Instagram™ est une extension de navigateur qui transforme l'expérience visuelle de Instagram.com en adoptant un thème sombre, similaire à l'apparence de l'application iOS.
-
-L'extension offre une solution simple et élégante pour réduire la fatigue oculaire et améliorer l'expérience de navigation sur Instagram, tout en respectant les préférences du système d'exploitation.`,
-	iconUrl: "/static/images/projects/dark-theme-instagram/icon.png",
-	showcaseUrl: "/static/images/projects/dark-theme-instagram/showcase.jpg",
-	thumbnailUrl: "/static/images/projects/dark-theme-instagram/thumbnail.webp",
-	website:
-		"https://chromewebstore.google.com/detail/hhpaefgagkcciebgfdmoljlebdmpfcfb",
-	repository: "https://github.com/onRuntime/instagram-dark-extension",
-	startDate: "2020-07",
-	status: "archived",
-
-	features: [
-		{
-			title: "Mode Sombre Automatique",
-			description:
-				"Activez automatiquement le thème sombre basé sur les paramètres système",
-			icon: Chrome,
-		},
-		{
-			title: "Compatible Multi-Navigateurs",
-			description: "Disponible pour Firefox, Edge et Chrome",
-			icon: Smartphone,
-		},
-		{
-			title: "Open Source",
-			description: "Code source librement accessible et vérifiable",
-			icon: Shield,
-		},
-	],
-
-	technologies: [
-		{
-			name: "JavaScript",
-			description: "Développement de l'extension",
-			icon: Code,
-		},
-		{
-			name: "Chrome API",
-			description: "Intégration navigateur",
-			icon: Chrome,
-		},
-		{
-			name: "CSS",
-			description: "Personnalisation du thème",
-			icon: Paintbrush,
-		},
-	],
-
-	metrics: [
-		{
-			label: "Utilisateurs",
-			value: "52k+",
-			description: "Utilisateurs actifs",
-		},
-		{
-			label: "Installations",
-			value: "82k+",
-			description: "Total d'installations",
-		},
-		{
-			label: "Open Source",
-			value: "100%",
-			description: "Code source public",
-		},
-	],
-
-	team: [
-		{
-			ref: "lucas-bodin",
-			role: "Lead Designer",
-		},
-		{
-			ref: "antoine-kingue",
-			role: "Lead Developer",
-		},
-		{
-			ref: "jeremy-baudrin",
-			role: "Developer",
-		},
-		{
-			ref: "johann-six",
-			role: "Developer",
-		},
-	],
-
-	screenshots: [
-		{
-			url: "/static/images/projects/dark-theme-instagram/showcase.jpg",
-			caption: "Interface Instagram en mode sombre",
-		},
-	],
-
-	challenges: [
-		"Maintenir la compatibilité avec les mises à jour fréquentes d'Instagram",
-		"Assurer un thème sombre cohérent sur différents navigateurs",
-		"Minimiser l'impact sur les performances du navigateur",
-	],
-
-	learnings: [
-		"Complexité de la modification dynamique des interfaces web",
-		"Importance de la compatibilité cross-navigateurs",
-		"Gestion des mises à jour fréquentes des plateformes web",
-	],
-
-	futurePlans: [
-		"Ajout de plus d'options de personnalisation",
-		"Amélioration de la compatibilité avec différentes versions d'Instagram",
-	],
+  id: "dark-theme-instagram",
+  name: "Dark Theme for Instagram",
+  tags: [Tag.OPEN_SOURCE],
+  iconUrl: "/static/images/projects/dark-theme-instagram/icon.png",
+  showcaseUrl: "/static/images/projects/dark-theme-instagram/showcase.jpg",
+  thumbnailUrl: "/static/images/projects/dark-theme-instagram/thumbnail.webp",
+  website: "https://chromewebstore.google.com/detail/hhpaefgagkcciebgfdmoljlebdmpfcfb",
+  repository: "https://github.com/onRuntime/instagram-dark-extension",
+  startDate: "2020-07",
+  status: "archived",
+
+  features: [
+    { key: "auto-dark-mode", icon: Chrome },
+    { key: "multi-browser", icon: Smartphone },
+    { key: "open-source", icon: Shield },
+  ],
+
+  technologies: [
+    { key: "javascript", name: "JavaScript", icon: Code },
+    { key: "chrome-api", name: "Chrome API", icon: Chrome },
+    { key: "css", name: "CSS", icon: Paintbrush },
+  ],
+
+  metrics: [
+    { key: "users", value: "52k+" },
+    { key: "installs", value: "82k+" },
+    { key: "open-source", value: "100%" },
+  ],
+
+  team: [
+    { ref: "lucas-bodin", role: "Lead Designer" },
+    { ref: "antoine-kingue", role: "Lead Developer" },
+    { ref: "jeremy-baudrin", role: "Developer" },
+    { ref: "johann-six", role: "Developer" },
+  ],
+
+  screenshots: [
+    { key: "dark-interface", url: "/static/images/projects/dark-theme-instagram/showcase.jpg" },
+  ],
+
+  challenges: [
+    "instagram-updates-compatibility",
+    "cross-browser-consistency",
+    "browser-performance",
+  ],
+
+  learnings: [
+    "dynamic-interface-modification",
+    "cross-browser-compatibility",
+    "platform-updates-management",
+  ],
+
+  futurePlans: [
+    "more-customization",
+    "instagram-versions-compatibility",
+  ],
 };
diff --git a/apps/web/src/constants/projects/expatfacilities.ts b/apps/web/src/constants/projects/expatfacilities.ts
index 0b3b32afe..52cb9a98e 100644
--- a/apps/web/src/constants/projects/expatfacilities.ts
+++ b/apps/web/src/constants/projects/expatfacilities.ts
@@ -5,15 +5,6 @@ export const expatFacilitiesProject: Project = {
   id: "expatfacilities",
   name: "Expat Facilities",
   tags: [Tag.CUSTOMER],
-  shortDescription:
-    "Plateforme complète d'accompagnement pour l'expatriation étudiante, intégrant logement, visa, transport et support local.",
-  description:
-    "Développement d'une plateforme full-stack permettant aux étudiants français de gérer leur expatriation de A à Z avec des services intégrés et un réseau d'ambassadeurs locaux.",
-  longDescription: `Expat Facilities était une startup française révolutionnaire qui simplifiait l'expatriation pour les étudiants. Notre équipe a développé une plateforme complète from scratch, évoluant d'une simple landing page vers une solution sophistiquée combinant les fonctionnalités d'Airbnb avec un écosystème de services d'expatriation.
-
-La plateforme intégrait de multiples APIs partenaires pour offrir une expérience unifiée : recherche de logements via des partenaires comme Spotahome, réservations de vols avec Lufthansa, assurances spécialisées, et un système unique d'ambassadeurs locaux présents dans plus de 70 pays.
-
-Le défi technique principal était l'orchestration de dizaines d'APIs tierces pour créer une expérience utilisateur fluide et cohérente, tout en gérant les complexités des paiements internationaux et du matching entre étudiants et ambassadeurs locaux.`,
   iconUrl: "/static/images/projects/expatfacilities/icon.webp",
   showcaseUrl: "/static/images/projects/expatfacilities/showcase.webp",
   thumbnailUrl: "/static/images/projects/expatfacilities/thumbnail.webp",
@@ -21,206 +12,79 @@ Le défi technique principal était l'orchestration de dizaines d'APIs tierces p
   repository: undefined,
   startDate: "2020-07",
   status: "completed",
+
   features: [
-    {
-      title: "Plateforme de logement intégrée",
-      description:
-        "Recherche et réservation de logements étudiants via l'intégration d'APIs partenaires comme Spotahome",
-      icon: Building2,
-    },
-    {
-      title: "Réseau d'ambassadeurs locaux",
-      description:
-        "Plus de 300 ambassadeurs étudiants dans 70 pays pour accompagner sur place les nouveaux arrivants",
-      icon: Users,
-    },
-    {
-      title: "Services visa et administratif",
-      description:
-        "Gestion complète des démarches de visa et accompagnement administratif personnalisé",
-      icon: Shield,
-    },
-    {
-      title: "Transport et logistique",
-      description:
-        "Réservation de vols (partenariat Lufthansa), trains, et transport local avec tarifs préférentiels",
-      icon: Plane,
-    },
-    {
-      title: "Assurances expatriation",
-      description:
-        "Assurances spécialisées pour expatriation temporaire en partenariat avec Mondial Assistance et Allianz",
-      icon: Shield,
-    },
-    {
-      title: "Tracking avancé",
-      description:
-        "Suivi en temps réel de toutes les démarches avec notifications et interface de pilotage",
-      icon: Smartphone,
-    },
+    { key: "housing-platform", icon: Building2 },
+    { key: "ambassador-network", icon: Users },
+    { key: "visa-services", icon: Shield },
+    { key: "transport-logistics", icon: Plane },
+    { key: "expat-insurance", icon: Shield },
+    { key: "advanced-tracking", icon: Smartphone },
   ],
 
   technologies: [
-    {
-      name: "Next.js",
-      description: "Framework React pour le frontend",
-      icon: Globe,
-    },
-    {
-      name: "NestJS",
-      description: "Backend API robuste et modulaire",
-      icon: Globe,
-    },
-    {
-      name: "MongoDB",
-      description: "Base de données principale",
-      icon: Globe,
-    },
-    {
-      name: "GraphQL",
-      description: "API unifiée pour les données",
-      icon: Globe,
-    },
-    {
-      name: "Google Cloud",
-      description: "Infrastructure cloud et services",
-      icon: Globe,
-    },
-    {
-      name: "Stripe",
-      description: "Paiements internationaux",
-      icon: CreditCard,
-    },
-    {
-      name: "TypeScript",
-      description: "Développement type-safe",
-      icon: Globe,
-    },
-    {
-      name: "Styled Components",
-      description: "Styling et thématisation",
-      icon: Globe,
-    },
+    { key: "nextjs", name: "Next.js", icon: Globe },
+    { key: "nestjs", name: "NestJS", icon: Globe },
+    { key: "mongodb", name: "MongoDB", icon: Globe },
+    { key: "graphql", name: "GraphQL", icon: Globe },
+    { key: "google-cloud", name: "Google Cloud", icon: Globe },
+    { key: "stripe", name: "Stripe", icon: CreditCard },
+    { key: "typescript", name: "TypeScript", icon: Globe },
+    { key: "styled-components", name: "Styled Components", icon: Globe },
   ],
 
   metrics: [
-    {
-      label: "Pays couverts",
-      value: "70+",
-      description: "Destinations d'expatriation disponibles",
-    },
-    {
-      label: "Ambassadeurs",
-      value: "300+",
-      description: "Étudiants ambassadeurs dans le monde",
-    },
-    {
-      label: "Utilisateurs",
-      value: "2000+",
-      description: "Étudiants utilisateurs de la plateforme",
-    },
+    { key: "countries", value: "70+" },
+    { key: "ambassadors", value: "300+" },
+    { key: "users", value: "2000+" },
   ],
 
   team: [
-    {
-      ref: "antoine-kingue",
-      role: "Lead Developer",
-    },
-    {
-      ref: "lucas-bodin",
-      role: "Lead Designer",
-    },
-    {
-      ref: "younes-bessa",
-      role: "Lead Frontend Developer",
-    },
-    {
-      ref: "jeremy-baudrin",
-      role: "Lead Backend Developer",
-    },
-    {
-      ref: "mareh-mannaa",
-      role: "Marketing & Communication",
-    },
-    {
-      ref: "alexis-mouchon",
-      role: "Backend Developer",
-    },
-    {
-      ref: "johann-six",
-      role: "Frontend Developer",
-    },
+    { ref: "antoine-kingue", role: "Lead Developer" },
+    { ref: "lucas-bodin", role: "Lead Designer" },
+    { ref: "younes-bessa", role: "Lead Frontend Developer" },
+    { ref: "jeremy-baudrin", role: "Lead Backend Developer" },
+    { ref: "mareh-mannaa", role: "Marketing & Communication" },
+    { ref: "alexis-mouchon", role: "Backend Developer" },
+    { ref: "johann-six", role: "Frontend Developer" },
   ],
 
   screenshots: [
-    {
-      url: "/static/images/projects/expatfacilities/screenshots/redesign.png",
-      caption: "Redesign de la plateforme",
-    },
-    {
-      url: "/static/images/projects/expatfacilities/screenshots/testimonials.png",
-      caption: "Témoignages et partenaires",
-    },
-    {
-      url: "/static/images/projects/expatfacilities/screenshots/flyer-banque.jpg",
-      caption: "Flyer pour les banques partenaires",
-    },
-    {
-      url: "/static/images/projects/expatfacilities/screenshots/about-team-and-cta.jpg",
-      caption: "À propos de l'équipe et call to Action",
-    },
-    {
-      url: "/static/images/projects/expatfacilities/screenshots/housing-hero.jpg",
-      caption: "Section logement avec recherche intégrée",
-    },
-    {
-      url: "/static/images/projects/expatfacilities/screenshots/housing-cta.jpg",
-      caption: "Call to Action pour la section logement",
-    },
-    {
-      url: "/static/images/projects/expatfacilities/screenshots/services-hero.jpg",
-      caption: "Section services avec présentation des offres",
-    },
-    {
-      url: "/static/images/projects/expatfacilities/screenshots/assurance-hero.jpg",
-      caption: "Section assurance avec explication des offres",
-    },
-    {
-      url: "/static/images/projects/expatfacilities/screenshots/assurance-formules.jpg",
-      caption: "Formules d'assurance détaillées",
-    },
-    {
-      url: "/static/images/projects/expatfacilities/screenshots/assurance-avantages.jpg",
-      caption: "Avantages des assurances proposées",
-    },
-    {
-      url: "/static/images/projects/expatfacilities/screenshots/formulaire-contact-success.jpg",
-      caption: "Formulaire de contact avec succès",
-    },
+    { key: "redesign", url: "/static/images/projects/expatfacilities/screenshots/redesign.png" },
+    { key: "testimonials", url: "/static/images/projects/expatfacilities/screenshots/testimonials.png" },
+    { key: "flyer-bank", url: "/static/images/projects/expatfacilities/screenshots/flyer-banque.jpg" },
+    { key: "about-team", url: "/static/images/projects/expatfacilities/screenshots/about-team-and-cta.jpg" },
+    { key: "housing-hero", url: "/static/images/projects/expatfacilities/screenshots/housing-hero.jpg" },
+    { key: "housing-cta", url: "/static/images/projects/expatfacilities/screenshots/housing-cta.jpg" },
+    { key: "services-hero", url: "/static/images/projects/expatfacilities/screenshots/services-hero.jpg" },
+    { key: "insurance-hero", url: "/static/images/projects/expatfacilities/screenshots/assurance-hero.jpg" },
+    { key: "insurance-plans", url: "/static/images/projects/expatfacilities/screenshots/assurance-formules.jpg" },
+    { key: "insurance-benefits", url: "/static/images/projects/expatfacilities/screenshots/assurance-avantages.jpg" },
+    { key: "contact-success", url: "/static/images/projects/expatfacilities/screenshots/formulaire-contact-success.jpg" },
   ],
 
   challenges: [
-    "Intégration de dizaines d'APIs tierces (Spotahome, Lufthansa, assurances) dans une expérience unifiée",
-    "Gestion des paiements internationaux avec Stripe dans multiple devises et réglementations",
-    "Développement d'un système de matching étudiants/ambassadeurs basé sur la géolocalisation",
-    "Architecture scalable pour supporter la croissance rapide (70 pays, 300+ ambassadeurs)",
-    "Synchronisation en temps réel des disponibilités logements entre plateformes partenaires",
-    "Interface multilingue et adaptation aux spécificités locales de chaque pays",
+    "third-party-api-integration",
+    "international-payments",
+    "student-ambassador-matching",
+    "scalable-architecture",
+    "real-time-availability",
+    "multilingual-interface",
   ],
 
   learnings: [
-    "Complexité de l'orchestration d'APIs tierces avec des formats et limitations différents",
-    "Importance cruciale de la gestion d'erreur dans un écosystème multi-partenaires",
-    "Défis de l'internationalisation au-delà de la traduction (devises, réglementations, cultures)",
-    "Architecture microservices essentielle pour isoler les intégrations partenaires",
-    "UX/UI critique pour transformer un processus complexe en expérience fluide",
-    "Gestion des relations partenaires et négociations techniques pour les intégrations",
+    "api-orchestration-complexity",
+    "multi-partner-error-handling",
+    "internationalization-challenges",
+    "microservices-architecture",
+    "complex-ux-simplification",
+    "partner-relations",
   ],
 
   futurePlans: [
-    "Expansion vers d'autres types d'expatriation (professionnels, retraités)",
-    "IA pour optimiser le matching étudiants/ambassadeurs",
-    "Application mobile native pour les ambassadeurs",
-    "Plateforme de formation pour les ambassadeurs",
+    "other-expat-types",
+    "ai-matching",
+    "ambassador-mobile-app",
+    "ambassador-training",
   ],
-};
\ No newline at end of file
+};
diff --git a/apps/web/src/constants/projects/kartrak.ts b/apps/web/src/constants/projects/kartrak.ts
index d02546e2d..b06cee9ad 100644
--- a/apps/web/src/constants/projects/kartrak.ts
+++ b/apps/web/src/constants/projects/kartrak.ts
@@ -5,134 +5,64 @@ export const kartrakProject: Project = {
   id: "kartrak",
   name: "Kartrak",
   tags: [Tag.OPEN_SOURCE],
-  shortDescription:
-    "Le suivi d'activité tourné vers l'écologie. Surveillez votre empreinte en ligne de façon ludique.",
-  description:
-    "Une extension de navigateur qui vous aide à comprendre et réduire votre impact environnemental en ligne.",
-  longDescription: `Kartrak est une extension de navigateur innovante qui sensibilise les utilisateurs à leur empreinte carbone numérique. En surveillant votre activité en ligne, Kartrak fournit des insights détaillés sur votre consommation internet et son impact environnemental.
-
-L'extension utilise des algorithmes avancés basés sur l'Écoindex pour calculer l'empreinte carbone de votre navigation, tout en proposant des suggestions personnalisées pour réduire votre impact. L'Écoindex est une méthodologie reconnue qui évalue l'impact environnemental des sites web en analysant leur complexité technique, leur poids et leur efficacité énergétique.
-
-Avec une approche ludique et éducative, Kartrak rend la conscience environnementale accessible et engageante.`,
   iconUrl: "/static/images/projects/kartrak/icon.svg",
   showcaseUrl: "/static/images/projects/kartrak/showcase.jpg",
   thumbnailUrl: "/static/images/projects/kartrak/thumbnail.webp",
-  website:
-    "https://chromewebstore.google.com/detail/kartrak/bheoaeahkgfmogmgkfldoecmnlbhlibf",
+  website: "https://chromewebstore.google.com/detail/kartrak/bheoaeahkgfmogmgkfldoecmnlbhlibf",
   repository: "https://github.com/onruntime/kartrak",
   startDate: "2023-10",
   status: "active",
 
   features: [
-    {
-      title: "Suivi en temps réel",
-      description:
-        "Visualisez votre empreinte carbone numérique en temps réel",
-      icon: Activity,
-    },
-    {
-      title: "Suggestions personnalisées",
-      description: "Recevez des conseils adaptés pour réduire votre impact",
-      icon: Lightbulb,
-    },
-    {
-      title: "Statistiques détaillées",
-      description: "Analysez vos habitudes de navigation et leur impact",
-      icon: BarChart,
-    },
-    {
-      title: "Objectifs écologiques",
-      description: "Fixez-vous des objectifs et suivez vos progrès",
-      icon: Target,
-    },
+    { key: "real-time-tracking", icon: Activity },
+    { key: "personalized-suggestions", icon: Lightbulb },
+    { key: "detailed-stats", icon: BarChart },
+    { key: "ecological-goals", icon: Target },
   ],
 
   technologies: [
-    {
-      name: "TypeScript",
-      description: "Extension navigateur",
-      icon: FileCode,
-    },
-    {
-      name: "React",
-      description: "Interface utilisateur",
-      icon: Code,
-    },
-    {
-      name: "Node.js",
-      description: "Backend et API",
-      icon: Server,
-    },
-    {
-      name: "Chrome API",
-      description: "Intégration avec le navigateur",
-      icon: Chrome,
-    },
+    { key: "typescript", name: "TypeScript", icon: FileCode },
+    { key: "react", name: "React", icon: Code },
+    { key: "nodejs", name: "Node.js", icon: Server },
+    { key: "chrome-api", name: "Chrome API", icon: Chrome },
   ],
 
   metrics: [
-    {
-      label: "Sites analysés",
-      value: "∞",
-      description: "Compatible avec tous les sites web",
-    },
-    {
-      label: "Open Source",
-      value: "100%",
-      description: "Code source public",
-    },
-    {
-      label: "Confidentiel",
-      value: "100%",
-      description: "Aucune donnée utilisateur collectée",
-    },
+    { key: "sites-analyzed", value: "∞" },
+    { key: "open-source", value: "100%" },
+    { key: "confidential", value: "100%" },
   ],
 
   team: [
-    {
-      ref: "lucas-bodin",
-      role: "Product Manager",
-    },
-    {
-      ref: "antoine-kingue",
-      role: "Lead Developer",
-    },
-    {
-      ref: "jeremy-baudrin",
-      role: "Developer",
-    },
+    { ref: "lucas-bodin", role: "Product Manager" },
+    { ref: "antoine-kingue", role: "Lead Developer" },
+    { ref: "jeremy-baudrin", role: "Developer" },
   ],
 
   screenshots: [
-    {
-      url: "/static/images/projects/kartrak/screenshots/dashboard.jpg",
-      caption: "Dashboard principal",
-    },
-    {
-      url: "/static/images/projects/kartrak/screenshots/stats.jpg",
-      caption: "Statistiques détaillées",
-    },
+    { key: "dashboard", url: "/static/images/projects/kartrak/screenshots/dashboard.jpg" },
+    { key: "stats", url: "/static/images/projects/kartrak/screenshots/stats.jpg" },
   ],
 
   challenges: [
-    "Calcul précis de l'empreinte carbone",
-    "Protection de la vie privée des utilisateurs",
-    "Performance de l'extension en arrière-plan",
-    "Précision des données environnementales",
+    "carbon-calculation",
+    "privacy-protection",
+    "background-performance",
+    "environmental-data-accuracy",
   ],
 
   learnings: [
-    "Complexité du calcul d'impact environnemental",
-    "Importance de l'engagement utilisateur",
-    "Équilibre entre précision et performance",
-    "UX adaptée aux habitudes de navigation",
+    "environmental-impact-complexity",
+    "user-engagement",
+    "accuracy-performance-balance",
+    "navigation-ux",
   ],
 
   futurePlans: [
-    "Support de plus de navigateurs",
-    "Intégration avec d'autres outils écologiques",
-    "Fonctionnalités communautaires",
-    "Rapports détaillés personnalisés",
-    "Fermeture automatique des onglets inutilisés",
+    "more-browsers",
+    "eco-tools-integration",
+    "community-features",
+    "personalized-reports",
+    "auto-close-tabs",
   ],
-};
\ No newline at end of file
+};
diff --git a/apps/web/src/constants/projects/kitchn.ts b/apps/web/src/constants/projects/kitchn.ts
index 2a09dff4a..64c4c757e 100644
--- a/apps/web/src/constants/projects/kitchn.ts
+++ b/apps/web/src/constants/projects/kitchn.ts
@@ -5,15 +5,6 @@ export const kitchnProject: Project = {
   id: "kitchn",
   name: "Kitchn",
   tags: [Tag.OPEN_SOURCE],
-  shortDescription:
-    "Une bibliothèque de composants React et React Native moderne, performante et hautement personnalisable, inspirée par Geist UI et Vercel Design.",
-  description:
-    "Une suite complète de composants styled-components conçue pour créer des interfaces utilisateur cohérentes et élégantes, maintenue par Tonight Pass.",
-  longDescription: `Kitchn est une bibliothèque de composants UI complète qui accélère le développement d'applications web et mobiles modernes. 
-  
-Inspirée par Geist UI et Vercel Design, elle se distingue par son approche minimaliste et sa facilité d'utilisation, offrant une collection de composants optimisés construits avec styled-components et TypeScript.
-
-Chaque composant est conçu pour être modulaire, performant et hautement personnalisable, permettant aux équipes de développement de créer rapidement des interfaces utilisateur cohérentes tout en maintenant une excellente expérience développeur.`,
   iconUrl: "/static/images/projects/kitchn/icon.svg",
   showcaseUrl: "/static/images/projects/kitchn/showcase.jpg",
   thumbnailUrl: "/static/images/projects/kitchn/thumbnail.webp",
@@ -23,141 +14,59 @@ Chaque composant est conçu pour être modulaire, performant et hautement person
   status: "active",
 
   features: [
-    {
-      title: "Architecture Modulaire",
-      description:
-        "Composants indépendants et réutilisables conçus pour fonctionner ensemble harmonieusement",
-      icon: Blocks,
-    },
-    {
-      title: "Thèmes Flexibles",
-      description:
-        "Support complet des modes clair et sombre avec un système de thème extensible",
-      icon: Palette,
-    },
-    {
-      title: "Cross-Platform",
-      description:
-        "Support natif de React et React Native pour une expérience cohérente sur toutes les plateformes",
-      icon: Smartphone,
-    },
-    {
-      title: "Documentation Interactive",
-      description:
-        "Documentation exhaustive avec exemples et playground pour une prise en main rapide",
-      icon: FileText,
-    },
+    { key: "modular-architecture", icon: Blocks },
+    { key: "flexible-themes", icon: Palette },
+    { key: "cross-platform", icon: Smartphone },
+    { key: "interactive-docs", icon: FileText },
   ],
 
   technologies: [
-    {
-      name: "Styled Components",
-      description: "Styles CSS-in-JS",
-      icon: Paintbrush,
-    },
-    {
-      name: "React",
-      description: "Bibliothèque UI web",
-      icon: Code,
-    },
-    {
-      name: "React Native",
-      description: "Composants mobiles natifs",
-      icon: Smartphone,
-    },
-    {
-      name: "TypeScript",
-      description: "Type safety et auto-complétion",
-      icon: FileCode,
-    },
-    {
-      name: "Storybook",
-      description: "Documentation interactive",
-      icon: BookOpen,
-    },
+    { key: "styled-components", name: "Styled Components", icon: Paintbrush },
+    { key: "react", name: "React", icon: Code },
+    { key: "react-native", name: "React Native", icon: Smartphone },
+    { key: "typescript", name: "TypeScript", icon: FileCode },
+    { key: "storybook", name: "Storybook", icon: BookOpen },
   ],
 
   metrics: [
-    {
-      label: "Composants",
-      value: "35+",
-      description: "Composants UI réutilisables",
-    },
-    {
-      label: "Téléchargements",
-      value: "20k+",
-      description: "Téléchargements mensuels",
-    },
-    {
-      label: "Github Stars",
-      value: "50+",
-      description: "Stars sur GitHub",
-    },
+    { key: "components", value: "35+" },
+    { key: "downloads", value: "20k+" },
+    { key: "github-stars", value: "50+" },
   ],
 
   team: [
-    {
-      ref: "lucas-bodin",
-      role: "Lead Designer",
-    },
-    {
-      ref: "maceo-vaz-da-mota",
-      role: "Designer",
-    },
-    {
-      ref: "antoine-kingue",
-      role: "Lead Developer",
-    },
-    {
-      ref: "jeremy-baudrin",
-      role: "Developer",
-    },
-    {
-      ref: "younes-bessa",
-      role: "Developer",
-    },
-    {
-      ref: "alexis-mouchon",
-      role: "Developer",
-    },
-    {
-      ref: "alexis-lecourt",
-      role: "Developer",
-    },
-    {
-      ref: "ines-ferreira",
-      role: "Developer",
-    },
+    { ref: "lucas-bodin", role: "Lead Designer" },
+    { ref: "maceo-vaz-da-mota", role: "Designer" },
+    { ref: "antoine-kingue", role: "Lead Developer" },
+    { ref: "jeremy-baudrin", role: "Developer" },
+    { ref: "younes-bessa", role: "Developer" },
+    { ref: "alexis-mouchon", role: "Developer" },
+    { ref: "alexis-lecourt", role: "Developer" },
+    { ref: "ines-ferreira", role: "Developer" },
   ],
 
   screenshots: [
-    {
-      url: "/static/images/projects/kitchn/screenshots/responsive.jpg",
-      caption: "Composants responsive",
-    },
-    {
-      url: "/static/images/projects/kitchn/screenshots/themable.jpg",
-      caption: "Thèmes personnalisables",
-    },
+    { key: "responsive", url: "/static/images/projects/kitchn/screenshots/responsive.jpg" },
+    { key: "themable", url: "/static/images/projects/kitchn/screenshots/themable.jpg" },
   ],
 
   challenges: [
-    "Maintenir une cohérence visuelle parfaite entre les plateformes web et mobile",
-    "Optimiser la taille du bundle tout en préservant la richesse fonctionnelle",
-    "Assurer la compatibilité avec les différentes versions de React",
-    "Garantir la rétrocompatibilité lors des mises à jour",
+    "visual-consistency",
+    "bundle-optimization",
+    "react-compatibility",
+    "backward-compatibility",
   ],
 
   learnings: [
-    "Importance cruciale d'une documentation claire et détaillée",
-    "Nécessité d'une architecture modulaire pour la maintenabilité",
-    "Valeur des tests automatisés pour la fiabilité",
-    "Impact de l'expérience développeur sur l'adoption",
+    "clear-documentation",
+    "modular-architecture",
+    "automated-testing",
+    "developer-experience",
   ],
 
   futurePlans: [
-    "Enrichissement de la bibliothèque de composants",
-    "Optimisations continues des performances",
-    "Extension de la compatibilité avec les frameworks modernes",
+    "component-library-expansion",
+    "performance-optimization",
+    "framework-compatibility",
   ],
-};
\ No newline at end of file
+};
diff --git a/apps/web/src/constants/projects/shadowbonus.ts b/apps/web/src/constants/projects/shadowbonus.ts
index 8f017ed63..a0fa7689a 100644
--- a/apps/web/src/constants/projects/shadowbonus.ts
+++ b/apps/web/src/constants/projects/shadowbonus.ts
@@ -5,14 +5,6 @@ export const shadowbonusProject: Project = {
   id: "shadowbonus",
   name: "ShadowBonus",
   tags: [Tag.CUSTOMER],
-  shortDescription: "Plateforme d'affiliation pour streameur spécialisée dans les bonus de casinos en ligne et box opening.",
-  description: "Site web d'affiliation développé pour le streameur vitapvp, présentant les meilleurs bonus et avantages des casinos partenaires avec redirection vers les liens d'affiliation.",
-  longDescription: `ShadowBonus est une plateforme d'affiliation développée pour le streameur vitapvp, conçue pour présenter de manière claire et attractive les meilleurs bonus et avantages des casinos en ligne partenaires.
-
-Le projet se concentre sur l'essentiel : une interface épurée qui met en valeur les offres partenaires et facilite la conversion vers les liens d'affiliation. Développé avec React et styled-components, le site privilégie la simplicité d'utilisation et l'efficacité de conversion.
-
-Notre approche s'est concentrée sur une expérience utilisateur fluide permettant aux viewers de vitapvp de découvrir rapidement les meilleures offres disponibles et d'accéder facilement aux plateformes partenaires.`,
-  
   iconUrl: "/static/images/projects/shadowbonus/icon.jpg",
   showcaseUrl: "/static/images/projects/shadowbonus/showcase.webp",
   thumbnailUrl: "/static/images/projects/shadowbonus/thumbnail.webp",
@@ -22,106 +14,51 @@ Notre approche s'est concentrée sur une expérience utilisateur fluide permetta
   status: "completed",
 
   features: [
-    {
-      title: "Vitrine des partenaires",
-      description: "Présentation claire et attractive des casinos et plateformes partenaires du streameur",
-      icon: Users,
-    },
-    {
-      title: "Comparaison de bonus",
-      description: "Mise en avant des meilleurs bonus et avantages disponibles pour les viewers",
-      icon: Target,
-    },
-    {
-      title: "Redirection d'affiliation",
-      description: "Système de redirection optimisé vers les liens d'affiliation partenaires",
-      icon: ExternalLink,
-    },
-    {
-      title: "Interface responsive",
-      description: "Design adaptatif pour une expérience optimale sur tous les appareils",
-      icon: Globe,
-    },
+    { key: "partner-showcase", icon: Users },
+    { key: "bonus-comparison", icon: Target },
+    { key: "affiliate-redirect", icon: ExternalLink },
+    { key: "responsive-interface", icon: Globe },
   ],
 
   technologies: [
-    {
-      name: "React",
-      description: "Bibliothèque JavaScript pour l'interface utilisateur",
-      icon: Code,
-    },
-    {
-      name: "Styled Components",
-      description: "Styling CSS-in-JS pour une approche moderne",
-      icon: Code,
-    },
-    {
-      name: "Cloudflare Pages",
-      description: "Hébergement et déploiement continu",
-      icon: Cloud,
-    },
+    { key: "react", name: "React", icon: Code },
+    { key: "styled-components", name: "Styled Components", icon: Code },
+    { key: "cloudflare", name: "Cloudflare Pages", icon: Cloud },
   ],
 
   metrics: [
-    {
-      label: "Visites hebdomadaires",
-      value: "1500+",
-      description: "Au lancement en juillet 2021",
-    },
-    {
-      label: "Temps de développement",
-      value: "2 mois",
-      description: "Livraison rapide et efficace",
-    },
-    {
-      label: "Équipe",
-      value: "3 pers.",
-      description: "Équipe réduite et agile",
-    },
+    { key: "weekly-visits", value: "1500+" },
+    { key: "dev-time", value: "2 mois" },
+    { key: "team-size", value: "3 pers." },
   ],
 
   team: [
-    {
-      ref: "antoine-kingue",
-      role: "Lead Developer",
-    },
-    {
-      ref: "jeremy-baudrin",
-      role: "Frontend Developer",
-    },
-    {
-      ref: "lucas-bodin",
-      role: "Designer",
-    },
+    { ref: "antoine-kingue", role: "Lead Developer" },
+    { ref: "jeremy-baudrin", role: "Frontend Developer" },
+    { ref: "lucas-bodin", role: "Designer" },
   ],
 
   screenshots: [
-    {
-      url: "/static/images/projects/shadowbonus/screenshots/homepage.webp",
-      caption: "Page d'accueil présentant les offres partenaires",
-    },
-    {
-      url: "/static/images/projects/shadowbonus/screenshots/partners.webp",
-      caption: "Section des casinos et plateformes partenaires",
-    },
+    { key: "homepage", url: "/static/images/projects/shadowbonus/screenshots/homepage.webp" },
+    { key: "partners", url: "/static/images/projects/shadowbonus/screenshots/partners.webp" },
   ],
 
   challenges: [
-    "Créer une interface attractive pour mettre en valeur les offres partenaires",
-    "Optimiser les taux de conversion vers les liens d'affiliation",
-    "Développer une solution simple mais efficace en React",
-    "Assurer une expérience utilisateur fluide sur tous les appareils",
+    "attractive-interface",
+    "conversion-optimization",
+    "simple-react-solution",
+    "cross-device-experience",
   ],
 
   learnings: [
-    "Importance de la simplicité dans les projets d'affiliation",
-    "Optimisation des parcours de conversion pour streameurs",
-    "Développement rapide et efficace avec React et styled-components",
-    "Adaptation aux besoins spécifiques du monde du streaming gaming",
+    "affiliate-simplicity",
+    "streamer-conversion",
+    "react-styled-components",
+    "gaming-streaming-needs",
   ],
 
   futurePlans: [
-    "Le projet a été transféré au client pour maintenance",
-    "Évolutions possibles selon les besoins du streameur",
+    "client-transfer",
+    "streamer-evolutions",
   ],
-};
\ No newline at end of file
+};
diff --git a/apps/web/src/constants/projects/tonightpass.ts b/apps/web/src/constants/projects/tonightpass.ts
index 7ef9a3bf0..24e91b579 100644
--- a/apps/web/src/constants/projects/tonightpass.ts
+++ b/apps/web/src/constants/projects/tonightpass.ts
@@ -5,11 +5,6 @@ export const tonightpassProject: Project = {
   id: "tonightpass",
   name: "Tonight Pass",
   tags: [Tag.FEATURED],
-  shortDescription: "Découvrez et réservez les meilleurs événements adaptés à vos goûts.",
-  description: "Tonight Pass est une plateforme innovante qui simplifie la découverte et la réservation d'événements grâce à un système de recommandations personnalisées basé sur vos préférences.",
-  longDescription: `Tonight Pass révolutionne la façon dont les gens découvrent et participent aux événements. Notre plateforme combine technologie et expérience utilisateur pour offrir des recommandations personnalisées et une billetterie simplifiée.
-
-La plateforme met en relation les organisateurs d'événements et les participants, offrant une solution complète de gestion des réservations, de recommandations intelligentes et d'analyse de données. L'application a été conçue pour optimiser l'expérience de découverte d'événements tout en simplifiant leur gestion pour les organisateurs.`,
   iconUrl: "/static/images/projects/tonightpass/icon.svg",
   showcaseUrl: "/static/images/projects/tonightpass/showcase.jpg",
   thumbnailUrl: "/static/images/projects/tonightpass/thumbnail.webp",
@@ -19,165 +14,66 @@ La plateforme met en relation les organisateurs d'événements et les participan
   status: "active",
 
   features: [
-    {
-      title: "Billetterie simplifiée",
-      description: "Réservez vos billets en quelques clics pour tous types d'événements",
-      icon: Ticket
-    },
-    {
-      title: "Recommandations personnalisées",
-      description: "Découvrez des événements adaptés à vos goûts",
-      icon: Compass
-    },
-    {
-      title: "E-tickets sécurisés",
-      description: "Accédez aux événements avec des billets numériques sécurisés",
-      icon: Shield
-    }
+    { key: "ticketing", icon: Ticket },
+    { key: "recommendations", icon: Compass },
+    { key: "e-tickets", icon: Shield },
   ],
 
   technologies: [
-    {
-      name: "React & React Native",
-      description: "Applications web et mobile",
-      icon: Code
-    },
-    {
-      name: "Nest.js", 
-      description: "Backend API",
-      icon: Server
-    },
-    {
-      name: "MongoDB",
-      description: "Base de données principale",
-      icon: Database
-    }
+    { key: "react", name: "React & React Native", icon: Code },
+    { key: "nestjs", name: "Nest.js", icon: Server },
+    { key: "mongodb", name: "MongoDB", icon: Database },
   ],
 
   metrics: [
-    {
-      label: "Temps gagné",
-      value: "45min",
-      description: "En moyenne par recherche d'événement",
-    },
-    {
-      label: "Couverture",
-      value: "100%",
-      description: "Disponible partout en France", 
-    },
-    {
-      label: "Facilité",
-      value: "1-clic",
-      description: "Pour réserver n'importe quel événement",
-    }
+    { key: "time-saved", value: "45min" },
+    { key: "coverage", value: "100%" },
+    { key: "ease", value: "1-clic" },
   ],
 
   team: [
-    {
-      ref: "antoine-kingue",
-      role: "Product Manager",
-    },
-    {
-      ref: "killian-mendy",
-      role: "Product Manager",
-    },
-    {
-      ref: "jeremy-baudrin",
-      role: "Lead Developer",
-    },
-    {
-      ref: "lucas-bodin",
-      role: "Lead Designer",
-    },
-    {
-      ref: "maeva-leclerc",
-      role: "Lead Marketing",
-    },
-    {
-      ref: "mareh-mannaa",
-      role: "Marketing",
-    },
-    {
-      ref: "alois-gradelet",
-      role: "Community Manager",
-    },
-    {
-      ref: "ines-munoz",
-      role: "Community Manager",
-    },
-    {
-      ref: "maceo-vaz-da-mota",
-      role: "Designer",
-    },
-    {
-      ref: "younes-bessa",
-      role: "Developer",
-    },
-    {
-      ref: "alexis-lecourt",
-      role: "Developer",
-    },
-    {
-      ref: "oumaima-haddar",
-      role: "Developer",
-    },
-    {
-      ref: "alexis-mouchon",
-      role: "Developer",
-    },
-    {
-      ref: "amel-tolba",
-      role: "Developer",
-    },
-    {
-      ref: "ines-ferreira",
-      role: "Developer",
-    },
-    {
-      ref: "jeremy-cailly",
-      role: "Developer",
-    },
-    {
-      ref: "asma-derragui",
-      role: "Developer"
-    },
-    {
-      ref: "louis-lazare",
-      role: "Developer",
-    },
+    { ref: "antoine-kingue", role: "Product Manager" },
+    { ref: "killian-mendy", role: "Product Manager" },
+    { ref: "jeremy-baudrin", role: "Lead Developer" },
+    { ref: "lucas-bodin", role: "Lead Designer" },
+    { ref: "maeva-leclerc", role: "Lead Marketing" },
+    { ref: "mareh-mannaa", role: "Marketing" },
+    { ref: "alois-gradelet", role: "Community Manager" },
+    { ref: "ines-munoz", role: "Community Manager" },
+    { ref: "maceo-vaz-da-mota", role: "Designer" },
+    { ref: "younes-bessa", role: "Developer" },
+    { ref: "alexis-lecourt", role: "Developer" },
+    { ref: "oumaima-haddar", role: "Developer" },
+    { ref: "alexis-mouchon", role: "Developer" },
+    { ref: "amel-tolba", role: "Developer" },
+    { ref: "ines-ferreira", role: "Developer" },
+    { ref: "jeremy-cailly", role: "Developer" },
+    { ref: "asma-derragui", role: "Developer" },
+    { ref: "louis-lazare", role: "Developer" },
   ],
 
-  screenshots: [
-    // {
-    //   url: "/static/images/projects/tonightpass/screenshots/home.jpg",
-    //   caption: "Page d'accueil de l'application",
-    // },
-    // {
-    //   url: "/static/images/projects/tonightpass/screenshots/booking.jpg",
-    //   caption: "Processus de réservation",
-    // },
-  ],
+  screenshots: [],
 
   challenges: [
-    "Développement d'une expérience de billetterie fluide et intuitive",
-    "Création d'un système de recommandation personnalisé",
-    "Mise en place d'une infrastructure scalable",
-    "Gestion des pics de trafic lors des mises en vente",
+    "ticketing-experience",
+    "recommendation-system",
+    "scalable-infrastructure",
+    "traffic-peaks",
   ],
-  
+
   learnings: [
-    "Importance de la simplicité dans le parcours de réservation",
-    "Nécessité d'une interface adaptée aux différents types d'événements",
-    "Gestion efficace d'une base de données d'événements",
-    "Équilibre entre rapidité et fiabilité du service",
+    "booking-simplicity",
+    "event-type-interface",
+    "database-management",
+    "speed-reliability-balance",
   ],
-  
+
   futurePlans: [
-    "Déploiement de bornes dans les établissements",
-    "Lancement d'une plateforme de recrutement événementiel",
-    "Mise en place d'un service de location de salles",
-    "Création d'un réseau de fournisseurs événementiels",
-    "Développement d'outils avancés pour les organisateurs",
-    "Perfectionnement du système de recommandations",
+    "venue-kiosks",
+    "recruitment-platform",
+    "venue-rental",
+    "supplier-network",
+    "organizer-tools",
+    "recommendation-improvement",
   ],
-};
\ No newline at end of file
+};
diff --git a/apps/web/src/locales/README.md b/apps/web/src/locales/README.md
index 02baf0658..dcb7220d3 100644
--- a/apps/web/src/locales/README.md
+++ b/apps/web/src/locales/README.md
@@ -4,34 +4,35 @@ Translation files for the onRuntime website.
 
 ## Structure
 
-The translation files mirror the `app/` and `components/` structure:
+The translation files mirror the `src/` structure:
 
 ```
 locales/
 ├── en/
 │   ├── common.json                    # Shared (buttons, errors, forms)
-│   ├── layout/
+│   ├── layout/                        # → src/components/layout/
 │   │   ├── footer.json
 │   │   └── navbar.json
-│   ├── app/
-│   │   └── landing/
-│   │       ├── page.json              # → app/[locale]/(landing)/page.ts
-│   │       └── customer/
-│   │           └── page.json          # → app/[locale]/(landing)/customer/page.ts
-│   └── components/
+│   ├── app/                           # → src/app/[locale]/
+│   │   ├── projects/
+│   │   │   └── [id]/
+│   │   │       └── page.json          # → src/app/[locale]/projects/[id]/page.tsx
+│   │   └── careers/
+│   │       └── [id]/
+│   │           └── page.json          # → src/app/[locale]/careers/[id]/page.tsx
+│   └── components/                    # → src/components/
 │       └── marketing/
+│           ├── projects/
+│           │   └── sections.json
 │           └── landing/
-│               ├── page-switcher.json
-│               ├── visitor/
-│               │   ├── featured.json
-│               │   ├── team.json
-│               │   └── projects.json
-│               └── customer/
-│                   └── featured.json
+│               └── visitor/
+│                   └── projects.json
 └── fr/
     └── ...
 ```
 
+The namespace used in `getTranslation()` or `useTranslation()` matches the path from `locales/{locale}/`.
+
 ## Usage
 
 ### Server Components
@@ -83,6 +84,10 @@ export default async function ProjectPage({ params }: { params: Promise<{ id: st
 - Never use kebab-case as prefix for grouping keys: `hero.title`, `hero.description` (not `hero-title`, `hero-description`)
 - Use nested keys for grouping: `nav.home`, `links.contact`
 - Keep keys in English: `greeting`, not `salutation`
-- Use interpolation for dynamic values: `"Hello, {name}!"`
+- Use interpolation for dynamic values: `"Hello, {name}!"` (variables can be camelCase to match JS)
+  ```tsx
+  // In JSON: "greeting": "Hello, {name}!"
+  t("greeting", { name: "John" }) // → "Hello, John!"
+  ```
 - HTML is supported with `dangerouslySetInnerHTML`: `"Visit <strong>Paris</strong>"`
 - Avoid title case in translations: `"Our services"` (not `"Our Services"`)
diff --git a/apps/web/src/locales/en/app/careers/[id]/page.json b/apps/web/src/locales/en/app/careers/[id]/page.json
index 5cb9690f9..a47ad6f85 100644
--- a/apps/web/src/locales/en/app/careers/[id]/page.json
+++ b/apps/web/src/locales/en/app/careers/[id]/page.json
@@ -4,12 +4,7 @@
       "title": "Job posting not found",
       "description": "This job posting does not exist or is no longer available."
     },
-    "title": {
-      "suffix": " | Careers"
-    },
-    "description": {
-      "prefix": "Join onRuntime Studio as ",
-      "suffix": ". Discover this career opportunity and apply now."
-    }
+    "title": "{jobTitle} | Careers",
+    "description": "Join onRuntime Studio as {jobTitle}. Discover this career opportunity and apply now."
   }
 }
diff --git a/apps/web/src/locales/en/app/projects/[id]/page.json b/apps/web/src/locales/en/app/projects/[id]/page.json
new file mode 100644
index 000000000..16e46aed6
--- /dev/null
+++ b/apps/web/src/locales/en/app/projects/[id]/page.json
@@ -0,0 +1,10 @@
+{
+  "metadata": {
+    "not-found": {
+      "title": "Project not found",
+      "description": "This project does not exist."
+    },
+    "title": "Case study: {name} - Digital project",
+    "description": "Discover how our agency designed and developed {name}. {shortDescription}"
+  }
+}
diff --git a/apps/web/src/locales/en/app/projects/page.json b/apps/web/src/locales/en/app/projects/page.json
new file mode 100644
index 000000000..d69236888
--- /dev/null
+++ b/apps/web/src/locales/en/app/projects/page.json
@@ -0,0 +1,6 @@
+{
+  "metadata": {
+    "title": "Project portfolio | Web, mobile and design",
+    "description": "Discover our portfolio of web, mobile and design development projects. Creations for various clients and our innovative internal projects."
+  }
+}
diff --git a/apps/web/src/locales/en/components/marketing/careers/job-details.json b/apps/web/src/locales/en/components/marketing/careers/job-details.json
index 9de1b5456..30fb64a95 100644
--- a/apps/web/src/locales/en/components/marketing/careers/job-details.json
+++ b/apps/web/src/locales/en/components/marketing/careers/job-details.json
@@ -2,10 +2,7 @@
   "back": "Back to job offers",
   "share": {
     "button": "Share",
-    "text": {
-      "prefix": "Discover this opportunity: ",
-      "suffix": " at onRuntime Studio"
-    },
+    "text": "Discover this opportunity: {jobTitle} at onRuntime Studio",
     "copied": "Link copied to clipboard!"
   },
   "apply": "Apply now",
diff --git a/apps/web/src/locales/en/components/marketing/projects/card.json b/apps/web/src/locales/en/components/marketing/projects/card.json
new file mode 100644
index 000000000..856eb8880
--- /dev/null
+++ b/apps/web/src/locales/en/components/marketing/projects/card.json
@@ -0,0 +1,6 @@
+{
+  "tags": {
+    "featured": "Featured",
+    "open-source": "Open Source"
+  }
+}
diff --git a/apps/web/src/locales/en/components/marketing/projects/sections.json b/apps/web/src/locales/en/components/marketing/projects/sections.json
new file mode 100644
index 000000000..aa75b40b2
--- /dev/null
+++ b/apps/web/src/locales/en/components/marketing/projects/sections.json
@@ -0,0 +1,22 @@
+{
+  "featured": {
+    "title": "Featured projects",
+    "view-project": "View project"
+  },
+  "studio": {
+    "title": "Studio projects"
+  },
+  "customer": {
+    "title": "Customer projects",
+    "coming-soon": "Coming soon",
+    "empty": {
+      "description": "Our customer projects are being prepared. Contact us to learn more about our work or to discuss your project.",
+      "button": "Discuss your project"
+    }
+  },
+  "tags": {
+    "featured": "Featured",
+    "open-source": "Open Source",
+    "customer": "Customer"
+  }
+}
diff --git a/apps/web/src/locales/en/constants/projects/dark-theme-instagram.json b/apps/web/src/locales/en/constants/projects/dark-theme-instagram.json
new file mode 100644
index 000000000..500e53db0
--- /dev/null
+++ b/apps/web/src/locales/en/constants/projects/dark-theme-instagram.json
@@ -0,0 +1,46 @@
+{
+  "short-description": "A browser extension that transforms Instagram into dark mode, similar to the iOS app.",
+  "description": "Change the theme of Instagram.com to dark mode when the system is in dark mode.",
+  "long-description": "Dark Theme for Instagram™ is a browser extension that transforms the visual experience of Instagram.com by adopting a dark theme, similar to the iOS app appearance.\n\nThe extension offers a simple and elegant solution to reduce eye strain and improve the Instagram browsing experience, while respecting operating system preferences.",
+  "features": {
+    "auto-dark-mode": {
+      "title": "Automatic Dark Mode",
+      "description": "Automatically enable dark theme based on system settings"
+    },
+    "multi-browser": {
+      "title": "Multi-Browser Compatible",
+      "description": "Available for Firefox, Edge, and Chrome"
+    },
+    "open-source": {
+      "title": "Open Source",
+      "description": "Freely accessible and verifiable source code"
+    }
+  },
+  "technologies": {
+    "javascript": { "description": "Extension development" },
+    "chrome-api": { "description": "Browser integration" },
+    "css": { "description": "Theme customization" }
+  },
+  "metrics": {
+    "users": { "label": "Users", "description": "Active users" },
+    "installs": { "label": "Installs", "description": "Total installations" },
+    "open-source": { "label": "Open Source", "description": "Public source code" }
+  },
+  "screenshots": {
+    "dark-interface": { "caption": "Instagram interface in dark mode" }
+  },
+  "challenges": {
+    "instagram-updates-compatibility": "Maintaining compatibility with Instagram's frequent updates",
+    "cross-browser-consistency": "Ensuring a consistent dark theme across different browsers",
+    "browser-performance": "Minimizing impact on browser performance"
+  },
+  "learnings": {
+    "dynamic-interface-modification": "Complexity of dynamically modifying web interfaces",
+    "cross-browser-compatibility": "Importance of cross-browser compatibility",
+    "platform-updates-management": "Managing frequent web platform updates"
+  },
+  "future-plans": {
+    "more-customization": "Adding more customization options",
+    "instagram-versions-compatibility": "Improving compatibility with different Instagram versions"
+  }
+}
diff --git a/apps/web/src/locales/en/constants/projects/expatfacilities.json b/apps/web/src/locales/en/constants/projects/expatfacilities.json
new file mode 100644
index 000000000..96d61fb7e
--- /dev/null
+++ b/apps/web/src/locales/en/constants/projects/expatfacilities.json
@@ -0,0 +1,81 @@
+{
+  "short-description": "Complete platform for student expatriation support, integrating housing, visa, transport, and local support.",
+  "description": "Development of a full-stack platform enabling French students to manage their expatriation from A to Z with integrated services and a network of local ambassadors.",
+  "long-description": "Expat Facilities was a revolutionary French startup that simplified expatriation for students. Our team developed a complete platform from scratch, evolving from a simple landing page to a sophisticated solution combining Airbnb-like features with an expatriation services ecosystem.\n\nThe platform integrated multiple partner APIs to offer a unified experience: housing search via partners like Spotahome, flight bookings with Lufthansa, specialized insurance, and a unique system of local ambassadors present in over 70 countries.\n\nThe main technical challenge was orchestrating dozens of third-party APIs to create a smooth and coherent user experience, while managing the complexities of international payments and matching between students and local ambassadors.",
+  "features": {
+    "housing-platform": {
+      "title": "Integrated housing platform",
+      "description": "Search and book student housing via partner API integrations like Spotahome"
+    },
+    "ambassador-network": {
+      "title": "Local ambassador network",
+      "description": "Over 300 student ambassadors in 70 countries to support newcomers on-site"
+    },
+    "visa-services": {
+      "title": "Visa and administrative services",
+      "description": "Complete visa process management and personalized administrative support"
+    },
+    "transport-logistics": {
+      "title": "Transport and logistics",
+      "description": "Flight bookings (Lufthansa partnership), trains, and local transport with preferential rates"
+    },
+    "expat-insurance": {
+      "title": "Expatriation insurance",
+      "description": "Specialized insurance for temporary expatriation in partnership with Mondial Assistance and Allianz"
+    },
+    "advanced-tracking": {
+      "title": "Advanced tracking",
+      "description": "Real-time tracking of all processes with notifications and dashboard interface"
+    }
+  },
+  "technologies": {
+    "nextjs": { "description": "React framework for frontend" },
+    "nestjs": { "description": "Robust and modular API backend" },
+    "mongodb": { "description": "Main database" },
+    "graphql": { "description": "Unified API for data" },
+    "google-cloud": { "description": "Cloud infrastructure and services" },
+    "stripe": { "description": "International payments" },
+    "typescript": { "description": "Type-safe development" },
+    "styled-components": { "description": "Styling and theming" }
+  },
+  "metrics": {
+    "countries": { "label": "Countries covered", "description": "Available expatriation destinations" },
+    "ambassadors": { "label": "Ambassadors", "description": "Student ambassadors worldwide" },
+    "users": { "label": "Users", "description": "Student platform users" }
+  },
+  "screenshots": {
+    "redesign": { "caption": "Platform redesign" },
+    "testimonials": { "caption": "Testimonials and partners" },
+    "flyer-bank": { "caption": "Flyer for partner banks" },
+    "about-team": { "caption": "About the team and call to Action" },
+    "housing-hero": { "caption": "Housing section with integrated search" },
+    "housing-cta": { "caption": "Call to Action for housing section" },
+    "services-hero": { "caption": "Services section with offer presentation" },
+    "insurance-hero": { "caption": "Insurance section with offer explanation" },
+    "insurance-plans": { "caption": "Detailed insurance plans" },
+    "insurance-benefits": { "caption": "Insurance benefits offered" },
+    "contact-success": { "caption": "Contact form with success" }
+  },
+  "challenges": {
+    "third-party-api-integration": "Integrating dozens of third-party APIs (Spotahome, Lufthansa, insurance) into a unified experience",
+    "international-payments": "Managing international payments with Stripe in multiple currencies and regulations",
+    "student-ambassador-matching": "Developing a student/ambassador matching system based on geolocation",
+    "scalable-architecture": "Scalable architecture to support rapid growth (70 countries, 300+ ambassadors)",
+    "real-time-availability": "Real-time synchronization of housing availability between partner platforms",
+    "multilingual-interface": "Multilingual interface and adaptation to local specificities of each country"
+  },
+  "learnings": {
+    "api-orchestration-complexity": "Complexity of orchestrating third-party APIs with different formats and limitations",
+    "multi-partner-error-handling": "Crucial importance of error handling in a multi-partner ecosystem",
+    "internationalization-challenges": "Internationalization challenges beyond translation (currencies, regulations, cultures)",
+    "microservices-architecture": "Essential microservices architecture to isolate partner integrations",
+    "complex-ux-simplification": "Critical UX/UI to transform a complex process into a smooth experience",
+    "partner-relations": "Managing partner relations and technical negotiations for integrations"
+  },
+  "future-plans": {
+    "other-expat-types": "Expansion to other types of expatriation (professionals, retirees)",
+    "ai-matching": "AI to optimize student/ambassador matching",
+    "ambassador-mobile-app": "Native mobile app for ambassadors",
+    "ambassador-training": "Training platform for ambassadors"
+  }
+}
diff --git a/apps/web/src/locales/en/constants/projects/kartrak.json b/apps/web/src/locales/en/constants/projects/kartrak.json
new file mode 100644
index 000000000..bebdedf04
--- /dev/null
+++ b/apps/web/src/locales/en/constants/projects/kartrak.json
@@ -0,0 +1,57 @@
+{
+  "short-description": "Eco-friendly activity tracking. Monitor your online footprint in a fun way.",
+  "description": "A browser extension that helps you understand and reduce your environmental impact online.",
+  "long-description": "Kartrak is an innovative browser extension that raises user awareness about their digital carbon footprint. By monitoring your online activity, Kartrak provides detailed insights into your internet consumption and its environmental impact.\n\nThe extension uses advanced algorithms based on Ecoindex to calculate your browsing carbon footprint, while offering personalized suggestions to reduce your impact. Ecoindex is a recognized methodology that evaluates the environmental impact of websites by analyzing their technical complexity, weight, and energy efficiency.\n\nWith a fun and educational approach, Kartrak makes environmental awareness accessible and engaging.",
+  "features": {
+    "real-time-tracking": {
+      "title": "Real-time tracking",
+      "description": "Visualize your digital carbon footprint in real-time"
+    },
+    "personalized-suggestions": {
+      "title": "Personalized suggestions",
+      "description": "Receive tailored advice to reduce your impact"
+    },
+    "detailed-stats": {
+      "title": "Detailed statistics",
+      "description": "Analyze your browsing habits and their impact"
+    },
+    "ecological-goals": {
+      "title": "Ecological goals",
+      "description": "Set goals and track your progress"
+    }
+  },
+  "technologies": {
+    "typescript": { "description": "Browser extension" },
+    "react": { "description": "User interface" },
+    "nodejs": { "description": "Backend and API" },
+    "chrome-api": { "description": "Browser integration" }
+  },
+  "metrics": {
+    "sites-analyzed": { "label": "Sites analyzed", "description": "Compatible with all websites" },
+    "open-source": { "label": "Open Source", "description": "Public source code" },
+    "confidential": { "label": "Confidential", "description": "No user data collected" }
+  },
+  "screenshots": {
+    "dashboard": { "caption": "Main dashboard" },
+    "stats": { "caption": "Detailed statistics" }
+  },
+  "challenges": {
+    "carbon-calculation": "Accurate carbon footprint calculation",
+    "privacy-protection": "Protecting user privacy",
+    "background-performance": "Extension performance in the background",
+    "environmental-data-accuracy": "Accuracy of environmental data"
+  },
+  "learnings": {
+    "environmental-impact-complexity": "Complexity of environmental impact calculation",
+    "user-engagement": "Importance of user engagement",
+    "accuracy-performance-balance": "Balance between accuracy and performance",
+    "navigation-ux": "UX adapted to browsing habits"
+  },
+  "future-plans": {
+    "more-browsers": "Support for more browsers",
+    "eco-tools-integration": "Integration with other eco-friendly tools",
+    "community-features": "Community features",
+    "personalized-reports": "Personalized detailed reports",
+    "auto-close-tabs": "Automatic closing of unused tabs"
+  }
+}
diff --git a/apps/web/src/locales/en/constants/projects/kitchn.json b/apps/web/src/locales/en/constants/projects/kitchn.json
new file mode 100644
index 000000000..82f9421bc
--- /dev/null
+++ b/apps/web/src/locales/en/constants/projects/kitchn.json
@@ -0,0 +1,56 @@
+{
+  "short-description": "A modern, performant, and highly customizable React and React Native component library, inspired by Geist UI and Vercel Design.",
+  "description": "A complete suite of styled-components designed to create consistent and elegant user interfaces, maintained by Tonight Pass.",
+  "long-description": "Kitchn is a comprehensive UI component library that accelerates the development of modern web and mobile applications.\n\nInspired by Geist UI and Vercel Design, it stands out with its minimalist approach and ease of use, offering a collection of optimized components built with styled-components and TypeScript.\n\nEach component is designed to be modular, performant, and highly customizable, allowing development teams to quickly create consistent user interfaces while maintaining an excellent developer experience.",
+  "features": {
+    "modular-architecture": {
+      "title": "Modular Architecture",
+      "description": "Independent and reusable components designed to work together harmoniously"
+    },
+    "flexible-themes": {
+      "title": "Flexible Themes",
+      "description": "Full support for light and dark modes with an extensible theme system"
+    },
+    "cross-platform": {
+      "title": "Cross-Platform",
+      "description": "Native support for React and React Native for a consistent experience across all platforms"
+    },
+    "interactive-docs": {
+      "title": "Interactive Documentation",
+      "description": "Comprehensive documentation with examples and playground for quick onboarding"
+    }
+  },
+  "technologies": {
+    "styled-components": { "description": "CSS-in-JS styles" },
+    "react": { "description": "Web UI library" },
+    "react-native": { "description": "Native mobile components" },
+    "typescript": { "description": "Type safety and auto-completion" },
+    "storybook": { "description": "Interactive documentation" }
+  },
+  "metrics": {
+    "components": { "label": "Components", "description": "Reusable UI components" },
+    "downloads": { "label": "Downloads", "description": "Monthly downloads" },
+    "github-stars": { "label": "Github Stars", "description": "Stars on GitHub" }
+  },
+  "screenshots": {
+    "responsive": { "caption": "Responsive components" },
+    "themable": { "caption": "Customizable themes" }
+  },
+  "challenges": {
+    "visual-consistency": "Maintaining perfect visual consistency between web and mobile platforms",
+    "bundle-optimization": "Optimizing bundle size while preserving feature richness",
+    "react-compatibility": "Ensuring compatibility with different React versions",
+    "backward-compatibility": "Guaranteeing backward compatibility during updates"
+  },
+  "learnings": {
+    "clear-documentation": "Crucial importance of clear and detailed documentation",
+    "modular-architecture": "Need for modular architecture for maintainability",
+    "automated-testing": "Value of automated testing for reliability",
+    "developer-experience": "Impact of developer experience on adoption"
+  },
+  "future-plans": {
+    "component-library-expansion": "Enriching the component library",
+    "performance-optimization": "Continuous performance optimizations",
+    "framework-compatibility": "Extending compatibility with modern frameworks"
+  }
+}
diff --git a/apps/web/src/locales/en/constants/projects/shadowbonus.json b/apps/web/src/locales/en/constants/projects/shadowbonus.json
new file mode 100644
index 000000000..581d4a6e5
--- /dev/null
+++ b/apps/web/src/locales/en/constants/projects/shadowbonus.json
@@ -0,0 +1,53 @@
+{
+  "short-description": "Affiliate platform for streamers specialized in online casino bonuses and box opening.",
+  "description": "Affiliate website developed for streamer vitapvp, showcasing the best bonuses and benefits from partner casinos with redirection to affiliate links.",
+  "long-description": "ShadowBonus is an affiliate platform developed for streamer vitapvp, designed to clearly and attractively present the best bonuses and benefits from partner online casinos.\n\nThe project focuses on the essentials: a clean interface that highlights partner offers and facilitates conversion to affiliate links. Developed with React and styled-components, the site prioritizes ease of use and conversion efficiency.\n\nOur approach focused on a smooth user experience allowing vitapvp's viewers to quickly discover the best available offers and easily access partner platforms.",
+  "features": {
+    "partner-showcase": {
+      "title": "Partner showcase",
+      "description": "Clear and attractive presentation of the streamer's partner casinos and platforms"
+    },
+    "bonus-comparison": {
+      "title": "Bonus comparison",
+      "description": "Highlighting the best bonuses and benefits available for viewers"
+    },
+    "affiliate-redirect": {
+      "title": "Affiliate redirection",
+      "description": "Optimized redirection system to partner affiliate links"
+    },
+    "responsive-interface": {
+      "title": "Responsive interface",
+      "description": "Adaptive design for optimal experience on all devices"
+    }
+  },
+  "technologies": {
+    "react": { "description": "JavaScript library for user interface" },
+    "styled-components": { "description": "CSS-in-JS styling for a modern approach" },
+    "cloudflare": { "description": "Hosting and continuous deployment" }
+  },
+  "metrics": {
+    "weekly-visits": { "label": "Weekly visits", "description": "At launch in July 2021" },
+    "dev-time": { "label": "Development time", "description": "Fast and efficient delivery" },
+    "team-size": { "label": "Team", "description": "Small and agile team" }
+  },
+  "screenshots": {
+    "homepage": { "caption": "Homepage showcasing partner offers" },
+    "partners": { "caption": "Partner casinos and platforms section" }
+  },
+  "challenges": {
+    "attractive-interface": "Creating an attractive interface to highlight partner offers",
+    "conversion-optimization": "Optimizing conversion rates to affiliate links",
+    "simple-react-solution": "Developing a simple but effective React solution",
+    "cross-device-experience": "Ensuring a smooth user experience on all devices"
+  },
+  "learnings": {
+    "affiliate-simplicity": "Importance of simplicity in affiliate projects",
+    "streamer-conversion": "Optimizing conversion journeys for streamers",
+    "react-styled-components": "Fast and efficient development with React and styled-components",
+    "gaming-streaming-needs": "Adapting to the specific needs of the gaming streaming world"
+  },
+  "future-plans": {
+    "client-transfer": "The project was transferred to the client for maintenance",
+    "streamer-evolutions": "Possible evolutions based on the streamer's needs"
+  }
+}
diff --git a/apps/web/src/locales/en/constants/projects/tonightpass.json b/apps/web/src/locales/en/constants/projects/tonightpass.json
new file mode 100644
index 000000000..d6c2758a5
--- /dev/null
+++ b/apps/web/src/locales/en/constants/projects/tonightpass.json
@@ -0,0 +1,50 @@
+{
+  "short-description": "Discover and book the best events tailored to your tastes.",
+  "description": "Tonight Pass is an innovative platform that simplifies event discovery and booking through a personalized recommendation system based on your preferences.",
+  "long-description": "Tonight Pass revolutionizes the way people discover and attend events. Our platform combines technology and user experience to offer personalized recommendations and simplified ticketing.\n\nThe platform connects event organizers and attendees, providing a complete solution for booking management, smart recommendations, and data analytics. The application was designed to optimize the event discovery experience while simplifying management for organizers.",
+  "features": {
+    "ticketing": {
+      "title": "Simplified ticketing",
+      "description": "Book your tickets in just a few clicks for all types of events"
+    },
+    "recommendations": {
+      "title": "Personalized recommendations",
+      "description": "Discover events tailored to your tastes"
+    },
+    "e-tickets": {
+      "title": "Secure e-tickets",
+      "description": "Access events with secure digital tickets"
+    }
+  },
+  "technologies": {
+    "react": { "description": "Web and mobile applications" },
+    "nestjs": { "description": "Backend API" },
+    "mongodb": { "description": "Main database" }
+  },
+  "metrics": {
+    "time-saved": { "label": "Time saved", "description": "On average per event search" },
+    "coverage": { "label": "Coverage", "description": "Available throughout France" },
+    "ease": { "label": "Ease", "description": "To book any event" }
+  },
+  "screenshots": {},
+  "challenges": {
+    "ticketing-experience": "Developing a smooth and intuitive ticketing experience",
+    "recommendation-system": "Creating a personalized recommendation system",
+    "scalable-infrastructure": "Setting up a scalable infrastructure",
+    "traffic-peaks": "Managing traffic peaks during ticket releases"
+  },
+  "learnings": {
+    "booking-simplicity": "Importance of simplicity in the booking journey",
+    "event-type-interface": "Need for an interface adapted to different event types",
+    "database-management": "Efficient management of an event database",
+    "speed-reliability-balance": "Balance between speed and service reliability"
+  },
+  "future-plans": {
+    "venue-kiosks": "Deploying kiosks in venues",
+    "recruitment-platform": "Launching an event recruitment platform",
+    "venue-rental": "Setting up a venue rental service",
+    "supplier-network": "Creating a network of event suppliers",
+    "organizer-tools": "Developing advanced tools for organizers",
+    "recommendation-improvement": "Improving the recommendation system"
+  }
+}
diff --git a/apps/web/src/locales/en/screens/marketing/projects.json b/apps/web/src/locales/en/screens/marketing/projects.json
new file mode 100644
index 000000000..6b077fb84
--- /dev/null
+++ b/apps/web/src/locales/en/screens/marketing/projects.json
@@ -0,0 +1,97 @@
+{
+  "hero": {
+    "title": "Our projects and achievements",
+    "description": "Discover our portfolio of web, mobile and UI/UX design development projects. Innovative solutions and modern interfaces created by our team of experts.",
+    "subdescription": "From conception to completion, each project reflects our expertise and commitment to creating exceptional digital experiences."
+  },
+  "expertise": {
+    "title": "Our project development expertise",
+    "description": "At onRuntime Studio, we combine creativity, technical expertise and proven methodology to transform your ideas into high-performance, innovative digital solutions.",
+    "cards": {
+      "development": {
+        "title": "Custom development",
+        "description": "Carefully coded solutions using the most suitable technologies for your project and specific objectives."
+      },
+      "design": {
+        "title": "Exceptional UI/UX design",
+        "description": "Elegant and intuitive interfaces that engage your users and effectively convey your brand identity."
+      },
+      "performance": {
+        "title": "Optimal performance",
+        "description": "Fast, responsive and optimized applications to deliver a smooth and enjoyable user experience."
+      }
+    }
+  },
+  "process": {
+    "title": "Our delivery process",
+    "description": "A proven methodology that guarantees quality and success for every project, from initial design to final deployment.",
+    "steps": {
+      "discovery": {
+        "title": "Discovery",
+        "description": "In-depth analysis of your needs, objectives and the specifics of your sector."
+      },
+      "conception": {
+        "title": "Design",
+        "description": "Creating mockups and prototypes to visualize and validate the user experience."
+      },
+      "development": {
+        "title": "Development",
+        "description": "Careful coding with modern technologies and rigorous testing to ensure quality."
+      },
+      "deployment": {
+        "title": "Deployment",
+        "description": "Production launch with ongoing monitoring and support to ensure your project's success."
+      }
+    }
+  },
+  "testimonials": {
+    "title": "What our clients say about us",
+    "description": "Client satisfaction is our top priority. Here are some testimonials from partners we've had the pleasure of working with.",
+    "items": [
+      {
+        "quote": "The onRuntime Studio team transformed our vision into an exceptional digital solution that exceeded all our expectations. Their technical expertise and creativity made all the difference.",
+        "author": "Thomas M. - Marketing director"
+      },
+      {
+        "quote": "A reliable and innovative partner who truly understands our needs. Their methodical approach and transparent communication made the development process enjoyable and stress-free.",
+        "author": "Sophie D. - Startup founder"
+      }
+    ]
+  },
+  "industries": {
+    "title": "Industries we serve",
+    "description": "Our expertise extends to many sectors, with solutions adapted to the specificities of each industry.",
+    "items": {
+      "ecommerce": "E-commerce",
+      "startups": "Startups",
+      "luxury": "Luxury",
+      "institutions": "Institutions"
+    }
+  },
+  "why-us": {
+    "title": "Why choose onRuntime Studio?",
+    "description": "We stand out through our client-centric approach and commitment to excellence.",
+    "items": {
+      "expertise": {
+        "title": "Technical expertise",
+        "description": "A team of experienced developers and designers mastering the latest technologies."
+      },
+      "custom": {
+        "title": "Custom solutions",
+        "description": "Personalized developments that precisely meet your specific needs."
+      },
+      "support": {
+        "title": "Ongoing support",
+        "description": "Quality support throughout the project and after launch."
+      }
+    }
+  },
+  "cta": {
+    "title": "Ready to bring your project to life?",
+    "description": "Contact us today to discuss your idea and discover how our expertise can help you turn it into reality.",
+    "buttons": {
+      "start": "Start a project",
+      "services": "Discover our services"
+    }
+  }
+}
diff --git a/apps/web/src/locales/en/screens/marketing/projects/details.json b/apps/web/src/locales/en/screens/marketing/projects/details.json
new file mode 100644
index 000000000..2532b907a
--- /dev/null
+++ b/apps/web/src/locales/en/screens/marketing/projects/details.json
@@ -0,0 +1,65 @@
+{
+  "tags": {
+    "featured": "Featured",
+    "open-source": "Open Source"
+  },
+  "buttons": {
+    "view-project": "View project",
+    "source-code": "Source code"
+  },
+  "info": {
+    "start-date": "Start date",
+    "status": "Status",
+    "team": "Team",
+    "members": "members"
+  },
+  "sections": {
+    "about": "About the project",
+    "metrics": "Impact and metrics",
+    "features": "Key features",
+    "technologies": "Technologies used",
+    "gallery": "Gallery",
+    "team": "The team",
+    "challenges": "Challenges encountered",
+    "learnings": "Key learnings",
+    "future": "Future perspectives"
+  },
+  "cta": {
+    "title": "Interested in this project?",
+    "description": "Discover how we can help you create a similar project.",
+    "button": "Discuss your project"
+  },
+  "tonightpass": {
+    "hero": {
+      "title": "The ticketing that simplifies your events",
+      "subtitle": "From creation to entry, manage everything in 5 minutes",
+      "description": "Complete ticketing solution for event organizers. Create your events, sell your tickets and manage access with professional tools and dedicated support.",
+      "buttons": {
+        "create": "Create my event",
+        "discover": "Discover the solution"
+      },
+      "stats": {
+        "setup": {
+          "value": "5min",
+          "label": "Setup"
+        },
+        "cost": {
+          "value": "$0",
+          "label": "Installation"
+        },
+        "support": {
+          "value": "24/7",
+          "label": "Support"
+        }
+      }
+    },
+    "cta": {
+      "title": "Ready to simplify your ticketing?",
+      "description": "Simplify your event management with a complete and intuitive solution",
+      "buttons": {
+        "start": "Start now",
+        "features": "See all features"
+      }
+    }
+  }
+}
diff --git a/apps/web/src/locales/fr/app/careers/[id]/page.json b/apps/web/src/locales/fr/app/careers/[id]/page.json
index c04bf3afb..df8fcb636 100644
--- a/apps/web/src/locales/fr/app/careers/[id]/page.json
+++ b/apps/web/src/locales/fr/app/careers/[id]/page.json
@@ -4,12 +4,7 @@
       "title": "Offre d'emploi non trouvée",
       "description": "Cette offre d'emploi n'existe pas ou n'est plus disponible."
     },
-    "title": {
-      "suffix": " | Carrières"
-    },
-    "description": {
-      "prefix": "Rejoignez onRuntime Studio en tant que ",
-      "suffix": ". Découvrez cette opportunité de carrière et postulez dès maintenant."
-    }
+    "title": "{jobTitle} | Carrieres",
+    "description": "Rejoignez onRuntime Studio en tant que {jobTitle}. Decouvrez cette opportunite de carriere et postulez des maintenant."
   }
 }
diff --git a/apps/web/src/locales/fr/app/projects/[id]/page.json b/apps/web/src/locales/fr/app/projects/[id]/page.json
new file mode 100644
index 000000000..58c16f5e1
--- /dev/null
+++ b/apps/web/src/locales/fr/app/projects/[id]/page.json
@@ -0,0 +1,10 @@
+{
+  "metadata": {
+    "not-found": {
+      "title": "Projet non trouve",
+      "description": "Ce projet n'existe pas."
+    },
+    "title": "Etude de cas : {name} - Projet digital",
+    "description": "Decouvrez comment notre agence a concu et developpe {name}. {shortDescription}"
+  }
+}
diff --git a/apps/web/src/locales/fr/app/projects/page.json b/apps/web/src/locales/fr/app/projects/page.json
new file mode 100644
index 000000000..e57ae37b2
--- /dev/null
+++ b/apps/web/src/locales/fr/app/projects/page.json
@@ -0,0 +1,6 @@
+{
+  "metadata": {
+    "title": "Portfolio de projets | Web, mobile et design",
+    "description": "Découvrez notre portfolio de projets en développement web, mobile et design. Des réalisations pour des clients variés et nos projets internes innovants."
+  }
+}
diff --git a/apps/web/src/locales/fr/components/marketing/careers/job-details.json b/apps/web/src/locales/fr/components/marketing/careers/job-details.json
index 1e74580eb..da28898b0 100644
--- a/apps/web/src/locales/fr/components/marketing/careers/job-details.json
+++ b/apps/web/src/locales/fr/components/marketing/careers/job-details.json
@@ -2,11 +2,8 @@
   "back": "Retour aux offres",
   "share": {
     "button": "Partager",
-    "text": {
-      "prefix": "Découvrez cette opportunité: ",
-      "suffix": " chez onRuntime Studio"
-    },
-    "copied": "Lien copié dans le presse-papier!"
+    "text": "Decouvrez cette opportunite: {jobTitle} chez onRuntime Studio",
+    "copied": "Lien copie dans le presse-papier!"
   },
   "apply": "Postuler maintenant",
   "published": "Publié le",
diff --git a/apps/web/src/locales/fr/components/marketing/projects/card.json b/apps/web/src/locales/fr/components/marketing/projects/card.json
new file mode 100644
index 000000000..05d861eb1
--- /dev/null
+++ b/apps/web/src/locales/fr/components/marketing/projects/card.json
@@ -0,0 +1,6 @@
+{
+  "tags": {
+    "featured": "En vedette",
+    "open-source": "Open Source"
+  }
+}
diff --git a/apps/web/src/locales/fr/components/marketing/projects/sections.json b/apps/web/src/locales/fr/components/marketing/projects/sections.json
new file mode 100644
index 000000000..7eb6cbd7b
--- /dev/null
+++ b/apps/web/src/locales/fr/components/marketing/projects/sections.json
@@ -0,0 +1,22 @@
+{
+  "featured": {
+    "title": "Projets à la une",
+    "view-project": "Voir le projet"
+  },
+  "studio": {
+    "title": "Projets studio"
+  },
+  "customer": {
+    "title": "Projets clients",
+    "coming-soon": "Prochainement",
+    "empty": {
+      "description": "Nos projets clients sont en cours de préparation. Contactez-nous pour en savoir plus sur nos réalisations ou pour discuter de votre projet.",
+      "button": "Discuter de votre projet"
+    }
+  },
+  "tags": {
+    "featured": "Featured",
+    "open-source": "Open Source",
+    "customer": "Client"
+  }
+}
diff --git a/apps/web/src/locales/fr/constants/projects/dark-theme-instagram.json b/apps/web/src/locales/fr/constants/projects/dark-theme-instagram.json
new file mode 100644
index 000000000..e81347024
--- /dev/null
+++ b/apps/web/src/locales/fr/constants/projects/dark-theme-instagram.json
@@ -0,0 +1,46 @@
+{
+  "short-description": "Une extension de navigateur qui transforme Instagram en mode sombre, similaire à l'application iOS.",
+  "description": "Changez le thème de Instagram.com en mode sombre lorsque le système est en mode sombre.",
+  "long-description": "Dark Theme for Instagram™ est une extension de navigateur qui transforme l'expérience visuelle de Instagram.com en adoptant un thème sombre, similaire à l'apparence de l'application iOS.\n\nL'extension offre une solution simple et élégante pour réduire la fatigue oculaire et améliorer l'expérience de navigation sur Instagram, tout en respectant les préférences du système d'exploitation.",
+  "features": {
+    "auto-dark-mode": {
+      "title": "Mode Sombre Automatique",
+      "description": "Activez automatiquement le thème sombre basé sur les paramètres système"
+    },
+    "multi-browser": {
+      "title": "Compatible Multi-Navigateurs",
+      "description": "Disponible pour Firefox, Edge et Chrome"
+    },
+    "open-source": {
+      "title": "Open Source",
+      "description": "Code source librement accessible et vérifiable"
+    }
+  },
+  "technologies": {
+    "javascript": { "description": "Développement de l'extension" },
+    "chrome-api": { "description": "Intégration navigateur" },
+    "css": { "description": "Personnalisation du thème" }
+  },
+  "metrics": {
+    "users": { "label": "Utilisateurs", "description": "Utilisateurs actifs" },
+    "installs": { "label": "Installations", "description": "Total d'installations" },
+    "open-source": { "label": "Open Source", "description": "Code source public" }
+  },
+  "screenshots": {
+    "dark-interface": { "caption": "Interface Instagram en mode sombre" }
+  },
+  "challenges": {
+    "instagram-updates-compatibility": "Maintenir la compatibilité avec les mises à jour fréquentes d'Instagram",
+    "cross-browser-consistency": "Assurer un thème sombre cohérent sur différents navigateurs",
+    "browser-performance": "Minimiser l'impact sur les performances du navigateur"
+  },
+  "learnings": {
+    "dynamic-interface-modification": "Complexité de la modification dynamique des interfaces web",
+    "cross-browser-compatibility": "Importance de la compatibilité cross-navigateurs",
+    "platform-updates-management": "Gestion des mises à jour fréquentes des plateformes web"
+  },
+  "future-plans": {
+    "more-customization": "Ajout de plus d'options de personnalisation",
+    "instagram-versions-compatibility": "Amélioration de la compatibilité avec différentes versions d'Instagram"
+  }
+}
diff --git a/apps/web/src/locales/fr/constants/projects/expatfacilities.json b/apps/web/src/locales/fr/constants/projects/expatfacilities.json
new file mode 100644
index 000000000..b8b197ae2
--- /dev/null
+++ b/apps/web/src/locales/fr/constants/projects/expatfacilities.json
@@ -0,0 +1,81 @@
+{
+  "short-description": "Plateforme complète d'accompagnement pour l'expatriation étudiante, intégrant logement, visa, transport et support local.",
+  "description": "Développement d'une plateforme full-stack permettant aux étudiants français de gérer leur expatriation de A à Z avec des services intégrés et un réseau d'ambassadeurs locaux.",
+  "long-description": "Expat Facilities était une startup française révolutionnaire qui simplifiait l'expatriation pour les étudiants. Notre équipe a développé une plateforme complète from scratch, évoluant d'une simple landing page vers une solution sophistiquée combinant les fonctionnalités d'Airbnb avec un écosystème de services d'expatriation.\n\nLa plateforme intégrait de multiples APIs partenaires pour offrir une expérience unifiée : recherche de logements via des partenaires comme Spotahome, réservations de vols avec Lufthansa, assurances spécialisées, et un système unique d'ambassadeurs locaux présents dans plus de 70 pays.\n\nLe défi technique principal était l'orchestration de dizaines d'APIs tierces pour créer une expérience utilisateur fluide et cohérente, tout en gérant les complexités des paiements internationaux et du matching entre étudiants et ambassadeurs locaux.",
+  "features": {
+    "housing-platform": {
+      "title": "Plateforme de logement intégrée",
+      "description": "Recherche et réservation de logements étudiants via l'intégration d'APIs partenaires comme Spotahome"
+    },
+    "ambassador-network": {
+      "title": "Réseau d'ambassadeurs locaux",
+      "description": "Plus de 300 ambassadeurs étudiants dans 70 pays pour accompagner sur place les nouveaux arrivants"
+    },
+    "visa-services": {
+      "title": "Services visa et administratif",
+      "description": "Gestion complète des démarches de visa et accompagnement administratif personnalisé"
+    },
+    "transport-logistics": {
+      "title": "Transport et logistique",
+      "description": "Réservation de vols (partenariat Lufthansa), trains, et transport local avec tarifs préférentiels"
+    },
+    "expat-insurance": {
+      "title": "Assurances expatriation",
+      "description": "Assurances spécialisées pour expatriation temporaire en partenariat avec Mondial Assistance et Allianz"
+    },
+    "advanced-tracking": {
+      "title": "Tracking avancé",
+      "description": "Suivi en temps réel de toutes les démarches avec notifications et interface de pilotage"
+    }
+  },
+  "technologies": {
+    "nextjs": { "description": "Framework React pour le frontend" },
+    "nestjs": { "description": "Backend API robuste et modulaire" },
+    "mongodb": { "description": "Base de données principale" },
+    "graphql": { "description": "API unifiée pour les données" },
+    "google-cloud": { "description": "Infrastructure cloud et services" },
+    "stripe": { "description": "Paiements internationaux" },
+    "typescript": { "description": "Développement type-safe" },
+    "styled-components": { "description": "Styling et thématisation" }
+  },
+  "metrics": {
+    "countries": { "label": "Pays couverts", "description": "Destinations d'expatriation disponibles" },
+    "ambassadors": { "label": "Ambassadeurs", "description": "Étudiants ambassadeurs dans le monde" },
+    "users": { "label": "Utilisateurs", "description": "Étudiants utilisateurs de la plateforme" }
+  },
+  "screenshots": {
+    "redesign": { "caption": "Redesign de la plateforme" },
+    "testimonials": { "caption": "Témoignages et partenaires" },
+    "flyer-bank": { "caption": "Flyer pour les banques partenaires" },
+    "about-team": { "caption": "À propos de l'équipe et call to Action" },
+    "housing-hero": { "caption": "Section logement avec recherche intégrée" },
+    "housing-cta": { "caption": "Call to Action pour la section logement" },
+    "services-hero": { "caption": "Section services avec présentation des offres" },
+    "insurance-hero": { "caption": "Section assurance avec explication des offres" },
+    "insurance-plans": { "caption": "Formules d'assurance détaillées" },
+    "insurance-benefits": { "caption": "Avantages des assurances proposées" },
+    "contact-success": { "caption": "Formulaire de contact avec succès" }
+  },
+  "challenges": {
+    "third-party-api-integration": "Intégration de dizaines d'APIs tierces (Spotahome, Lufthansa, assurances) dans une expérience unifiée",
+    "international-payments": "Gestion des paiements internationaux avec Stripe dans multiple devises et réglementations",
+    "student-ambassador-matching": "Développement d'un système de matching étudiants/ambassadeurs basé sur la géolocalisation",
+    "scalable-architecture": "Architecture scalable pour supporter la croissance rapide (70 pays, 300+ ambassadeurs)",
+    "real-time-availability": "Synchronisation en temps réel des disponibilités logements entre plateformes partenaires",
+    "multilingual-interface": "Interface multilingue et adaptation aux spécificités locales de chaque pays"
+  },
+  "learnings": {
+    "api-orchestration-complexity": "Complexité de l'orchestration d'APIs tierces avec des formats et limitations différents",
+    "multi-partner-error-handling": "Importance cruciale de la gestion d'erreur dans un écosystème multi-partenaires",
+    "internationalization-challenges": "Défis de l'internationalisation au-delà de la traduction (devises, réglementations, cultures)",
+    "microservices-architecture": "Architecture microservices essentielle pour isoler les intégrations partenaires",
+    "complex-ux-simplification": "UX/UI critique pour transformer un processus complexe en expérience fluide",
+    "partner-relations": "Gestion des relations partenaires et négociations techniques pour les intégrations"
+  },
+  "future-plans": {
+    "other-expat-types": "Expansion vers d'autres types d'expatriation (professionnels, retraités)",
+    "ai-matching": "IA pour optimiser le matching étudiants/ambassadeurs",
+    "ambassador-mobile-app": "Application mobile native pour les ambassadeurs",
+    "ambassador-training": "Plateforme de formation pour les ambassadeurs"
+  }
+}
diff --git a/apps/web/src/locales/fr/constants/projects/kartrak.json b/apps/web/src/locales/fr/constants/projects/kartrak.json
new file mode 100644
index 000000000..f14a08abc
--- /dev/null
+++ b/apps/web/src/locales/fr/constants/projects/kartrak.json
@@ -0,0 +1,57 @@
+{
+  "short-description": "Le suivi d'activité tourné vers l'écologie. Surveillez votre empreinte en ligne de façon ludique.",
+  "description": "Une extension de navigateur qui vous aide à comprendre et réduire votre impact environnemental en ligne.",
+  "long-description": "Kartrak est une extension de navigateur innovante qui sensibilise les utilisateurs à leur empreinte carbone numérique. En surveillant votre activité en ligne, Kartrak fournit des insights détaillés sur votre consommation internet et son impact environnemental.\n\nL'extension utilise des algorithmes avancés basés sur l'Écoindex pour calculer l'empreinte carbone de votre navigation, tout en proposant des suggestions personnalisées pour réduire votre impact. L'Écoindex est une méthodologie reconnue qui évalue l'impact environnemental des sites web en analysant leur complexité technique, leur poids et leur efficacité énergétique.\n\nAvec une approche ludique et éducative, Kartrak rend la conscience environnementale accessible et engageante.",
+  "features": {
+    "real-time-tracking": {
+      "title": "Suivi en temps réel",
+      "description": "Visualisez votre empreinte carbone numérique en temps réel"
+    },
+    "personalized-suggestions": {
+      "title": "Suggestions personnalisées",
+      "description": "Recevez des conseils adaptés pour réduire votre impact"
+    },
+    "detailed-stats": {
+      "title": "Statistiques détaillées",
+      "description": "Analysez vos habitudes de navigation et leur impact"
+    },
+    "ecological-goals": {
+      "title": "Objectifs écologiques",
+      "description": "Fixez-vous des objectifs et suivez vos progrès"
+    }
+  },
+  "technologies": {
+    "typescript": { "description": "Extension navigateur" },
+    "react": { "description": "Interface utilisateur" },
+    "nodejs": { "description": "Backend et API" },
+    "chrome-api": { "description": "Intégration avec le navigateur" }
+  },
+  "metrics": {
+    "sites-analyzed": { "label": "Sites analysés", "description": "Compatible avec tous les sites web" },
+    "open-source": { "label": "Open Source", "description": "Code source public" },
+    "confidential": { "label": "Confidentiel", "description": "Aucune donnée utilisateur collectée" }
+  },
+  "screenshots": {
+    "dashboard": { "caption": "Dashboard principal" },
+    "stats": { "caption": "Statistiques détaillées" }
+  },
+  "challenges": {
+    "carbon-calculation": "Calcul précis de l'empreinte carbone",
+    "privacy-protection": "Protection de la vie privée des utilisateurs",
+    "background-performance": "Performance de l'extension en arrière-plan",
+    "environmental-data-accuracy": "Précision des données environnementales"
+  },
+  "learnings": {
+    "environmental-impact-complexity": "Complexité du calcul d'impact environnemental",
+    "user-engagement": "Importance de l'engagement utilisateur",
+    "accuracy-performance-balance": "Équilibre entre précision et performance",
+    "navigation-ux": "UX adaptée aux habitudes de navigation"
+  },
+  "future-plans": {
+    "more-browsers": "Support de plus de navigateurs",
+    "eco-tools-integration": "Intégration avec d'autres outils écologiques",
+    "community-features": "Fonctionnalités communautaires",
+    "personalized-reports": "Rapports détaillés personnalisés",
+    "auto-close-tabs": "Fermeture automatique des onglets inutilisés"
+  }
+}
diff --git a/apps/web/src/locales/fr/constants/projects/kitchn.json b/apps/web/src/locales/fr/constants/projects/kitchn.json
new file mode 100644
index 000000000..56a607399
--- /dev/null
+++ b/apps/web/src/locales/fr/constants/projects/kitchn.json
@@ -0,0 +1,56 @@
+{
+  "short-description": "Une bibliothèque de composants React et React Native moderne, performante et hautement personnalisable, inspirée par Geist UI et Vercel Design.",
+  "description": "Une suite complète de composants styled-components conçue pour créer des interfaces utilisateur cohérentes et élégantes, maintenue par Tonight Pass.",
+  "long-description": "Kitchn est une bibliothèque de composants UI complète qui accélère le développement d'applications web et mobiles modernes.\n\nInspirée par Geist UI et Vercel Design, elle se distingue par son approche minimaliste et sa facilité d'utilisation, offrant une collection de composants optimisés construits avec styled-components et TypeScript.\n\nChaque composant est conçu pour être modulaire, performant et hautement personnalisable, permettant aux équipes de développement de créer rapidement des interfaces utilisateur cohérentes tout en maintenant une excellente expérience développeur.",
+  "features": {
+    "modular-architecture": {
+      "title": "Architecture Modulaire",
+      "description": "Composants indépendants et réutilisables conçus pour fonctionner ensemble harmonieusement"
+    },
+    "flexible-themes": {
+      "title": "Thèmes Flexibles",
+      "description": "Support complet des modes clair et sombre avec un système de thème extensible"
+    },
+    "cross-platform": {
+      "title": "Cross-Platform",
+      "description": "Support natif de React et React Native pour une expérience cohérente sur toutes les plateformes"
+    },
+    "interactive-docs": {
+      "title": "Documentation Interactive",
+      "description": "Documentation exhaustive avec exemples et playground pour une prise en main rapide"
+    }
+  },
+  "technologies": {
+    "styled-components": { "description": "Styles CSS-in-JS" },
+    "react": { "description": "Bibliothèque UI web" },
+    "react-native": { "description": "Composants mobiles natifs" },
+    "typescript": { "description": "Type safety et auto-complétion" },
+    "storybook": { "description": "Documentation interactive" }
+  },
+  "metrics": {
+    "components": { "label": "Composants", "description": "Composants UI réutilisables" },
+    "downloads": { "label": "Téléchargements", "description": "Téléchargements mensuels" },
+    "github-stars": { "label": "Github Stars", "description": "Stars sur GitHub" }
+  },
+  "screenshots": {
+    "responsive": { "caption": "Composants responsive" },
+    "themable": { "caption": "Thèmes personnalisables" }
+  },
+  "challenges": {
+    "visual-consistency": "Maintenir une cohérence visuelle parfaite entre les plateformes web et mobile",
+    "bundle-optimization": "Optimiser la taille du bundle tout en préservant la richesse fonctionnelle",
+    "react-compatibility": "Assurer la compatibilité avec les différentes versions de React",
+    "backward-compatibility": "Garantir la rétrocompatibilité lors des mises à jour"
+  },
+  "learnings": {
+    "clear-documentation": "Importance cruciale d'une documentation claire et détaillée",
+    "modular-architecture": "Nécessité d'une architecture modulaire pour la maintenabilité",
+    "automated-testing": "Valeur des tests automatisés pour la fiabilité",
+    "developer-experience": "Impact de l'expérience développeur sur l'adoption"
+  },
+  "future-plans": {
+    "component-library-expansion": "Enrichissement de la bibliothèque de composants",
+    "performance-optimization": "Optimisations continues des performances",
+    "framework-compatibility": "Extension de la compatibilité avec les frameworks modernes"
+  }
+}
diff --git a/apps/web/src/locales/fr/constants/projects/shadowbonus.json b/apps/web/src/locales/fr/constants/projects/shadowbonus.json
new file mode 100644
index 000000000..39c784a7b
--- /dev/null
+++ b/apps/web/src/locales/fr/constants/projects/shadowbonus.json
@@ -0,0 +1,53 @@
+{
+  "short-description": "Plateforme d'affiliation pour streameur spécialisée dans les bonus de casinos en ligne et box opening.",
+  "description": "Site web d'affiliation développé pour le streameur vitapvp, présentant les meilleurs bonus et avantages des casinos partenaires avec redirection vers les liens d'affiliation.",
+  "long-description": "ShadowBonus est une plateforme d'affiliation développée pour le streameur vitapvp, conçue pour présenter de manière claire et attractive les meilleurs bonus et avantages des casinos en ligne partenaires.\n\nLe projet se concentre sur l'essentiel : une interface épurée qui met en valeur les offres partenaires et facilite la conversion vers les liens d'affiliation. Développé avec React et styled-components, le site privilégie la simplicité d'utilisation et l'efficacité de conversion.\n\nNotre approche s'est concentrée sur une expérience utilisateur fluide permettant aux viewers de vitapvp de découvrir rapidement les meilleures offres disponibles et d'accéder facilement aux plateformes partenaires.",
+  "features": {
+    "partner-showcase": {
+      "title": "Vitrine des partenaires",
+      "description": "Présentation claire et attractive des casinos et plateformes partenaires du streameur"
+    },
+    "bonus-comparison": {
+      "title": "Comparaison de bonus",
+      "description": "Mise en avant des meilleurs bonus et avantages disponibles pour les viewers"
+    },
+    "affiliate-redirect": {
+      "title": "Redirection d'affiliation",
+      "description": "Système de redirection optimisé vers les liens d'affiliation partenaires"
+    },
+    "responsive-interface": {
+      "title": "Interface responsive",
+      "description": "Design adaptatif pour une expérience optimale sur tous les appareils"
+    }
+  },
+  "technologies": {
+    "react": { "description": "Bibliothèque JavaScript pour l'interface utilisateur" },
+    "styled-components": { "description": "Styling CSS-in-JS pour une approche moderne" },
+    "cloudflare": { "description": "Hébergement et déploiement continu" }
+  },
+  "metrics": {
+    "weekly-visits": { "label": "Visites hebdomadaires", "description": "Au lancement en juillet 2021" },
+    "dev-time": { "label": "Temps de développement", "description": "Livraison rapide et efficace" },
+    "team-size": { "label": "Équipe", "description": "Équipe réduite et agile" }
+  },
+  "screenshots": {
+    "homepage": { "caption": "Page d'accueil présentant les offres partenaires" },
+    "partners": { "caption": "Section des casinos et plateformes partenaires" }
+  },
+  "challenges": {
+    "attractive-interface": "Créer une interface attractive pour mettre en valeur les offres partenaires",
+    "conversion-optimization": "Optimiser les taux de conversion vers les liens d'affiliation",
+    "simple-react-solution": "Développer une solution simple mais efficace en React",
+    "cross-device-experience": "Assurer une expérience utilisateur fluide sur tous les appareils"
+  },
+  "learnings": {
+    "affiliate-simplicity": "Importance de la simplicité dans les projets d'affiliation",
+    "streamer-conversion": "Optimisation des parcours de conversion pour streameurs",
+    "react-styled-components": "Développement rapide et efficace avec React et styled-components",
+    "gaming-streaming-needs": "Adaptation aux besoins spécifiques du monde du streaming gaming"
+  },
+  "future-plans": {
+    "client-transfer": "Le projet a été transféré au client pour maintenance",
+    "streamer-evolutions": "Évolutions possibles selon les besoins du streameur"
+  }
+}
diff --git a/apps/web/src/locales/fr/constants/projects/tonightpass.json b/apps/web/src/locales/fr/constants/projects/tonightpass.json
new file mode 100644
index 000000000..3779e1550
--- /dev/null
+++ b/apps/web/src/locales/fr/constants/projects/tonightpass.json
@@ -0,0 +1,50 @@
+{
+  "short-description": "Découvrez et réservez les meilleurs événements adaptés à vos goûts.",
+  "description": "Tonight Pass est une plateforme innovante qui simplifie la découverte et la réservation d'événements grâce à un système de recommandations personnalisées basé sur vos préférences.",
+  "long-description": "Tonight Pass révolutionne la façon dont les gens découvrent et participent aux événements. Notre plateforme combine technologie et expérience utilisateur pour offrir des recommandations personnalisées et une billetterie simplifiée.\n\nLa plateforme met en relation les organisateurs d'événements et les participants, offrant une solution complète de gestion des réservations, de recommandations intelligentes et d'analyse de données. L'application a été conçue pour optimiser l'expérience de découverte d'événements tout en simplifiant leur gestion pour les organisateurs.",
+  "features": {
+    "ticketing": {
+      "title": "Billetterie simplifiée",
+      "description": "Réservez vos billets en quelques clics pour tous types d'événements"
+    },
+    "recommendations": {
+      "title": "Recommandations personnalisées",
+      "description": "Découvrez des événements adaptés à vos goûts"
+    },
+    "e-tickets": {
+      "title": "E-tickets sécurisés",
+      "description": "Accédez aux événements avec des billets numériques sécurisés"
+    }
+  },
+  "technologies": {
+    "react": { "description": "Applications web et mobile" },
+    "nestjs": { "description": "Backend API" },
+    "mongodb": { "description": "Base de données principale" }
+  },
+  "metrics": {
+    "time-saved": { "label": "Temps gagné", "description": "En moyenne par recherche d'événement" },
+    "coverage": { "label": "Couverture", "description": "Disponible partout en France" },
+    "ease": { "label": "Facilité", "description": "Pour réserver n'importe quel événement" }
+  },
+  "screenshots": {},
+  "challenges": {
+    "ticketing-experience": "Développement d'une expérience de billetterie fluide et intuitive",
+    "recommendation-system": "Création d'un système de recommandation personnalisé",
+    "scalable-infrastructure": "Mise en place d'une infrastructure scalable",
+    "traffic-peaks": "Gestion des pics de trafic lors des mises en vente"
+  },
+  "learnings": {
+    "booking-simplicity": "Importance de la simplicité dans le parcours de réservation",
+    "event-type-interface": "Nécessité d'une interface adaptée aux différents types d'événements",
+    "database-management": "Gestion efficace d'une base de données d'événements",
+    "speed-reliability-balance": "Équilibre entre rapidité et fiabilité du service"
+  },
+  "future-plans": {
+    "venue-kiosks": "Déploiement de bornes dans les établissements",
+    "recruitment-platform": "Lancement d'une plateforme de recrutement événementiel",
+    "venue-rental": "Mise en place d'un service de location de salles",
+    "supplier-network": "Création d'un réseau de fournisseurs événementiels",
+    "organizer-tools": "Développement d'outils avancés pour les organisateurs",
+    "recommendation-improvement": "Perfectionnement du système de recommandations"
+  }
+}
diff --git a/apps/web/src/locales/fr/screens/marketing/projects.json b/apps/web/src/locales/fr/screens/marketing/projects.json
new file mode 100644
index 000000000..374000039
--- /dev/null
+++ b/apps/web/src/locales/fr/screens/marketing/projects.json
@@ -0,0 +1,97 @@
+{
+  "hero": {
+    "title": "Nos projets et réalisations",
+    "description": "Découvrez notre portfolio de projets en développement web, mobile et design UI/UX. Des solutions innovantes et des interfaces modernes réalisées par notre équipe d'experts.",
+    "subdescription": "De la conception à la réalisation, chaque projet témoigne de notre expertise et de notre engagement à créer des expériences numériques exceptionnelles."
+  },
+  "expertise": {
+    "title": "Notre expertise en développement de projets",
+    "description": "Chez onRuntime Studio, nous combinons créativité, expertise technique et méthodologie éprouvée pour transformer vos idées en solutions digitales performantes et innovantes.",
+    "cards": {
+      "development": {
+        "title": "Développement sur mesure",
+        "description": "Des solutions codées avec soin, utilisant les technologies les plus adaptées à votre projet et à vos objectifs spécifiques."
+      },
+      "design": {
+        "title": "Design UI/UX exceptionnel",
+        "description": "Des interfaces élégantes et intuitives qui engagent vos utilisateurs et véhiculent efficacement l'identité de votre marque."
+      },
+      "performance": {
+        "title": "Performance optimale",
+        "description": "Des applications rapides, réactives et optimisées pour offrir une expérience utilisateur fluide et agréable."
+      }
+    }
+  },
+  "process": {
+    "title": "Notre processus de réalisation",
+    "description": "Une méthodologie éprouvée qui garantit la qualité et le succès de chaque projet, de la conception initiale au déploiement final.",
+    "steps": {
+      "discovery": {
+        "title": "Découverte",
+        "description": "Analyse approfondie de vos besoins, objectifs et des spécificités de votre secteur."
+      },
+      "conception": {
+        "title": "Conception",
+        "description": "Création de maquettes et prototypes pour visualiser et valider l'expérience utilisateur."
+      },
+      "development": {
+        "title": "Développement",
+        "description": "Codage soigné avec des technologies modernes et des tests rigoureux pour garantir la qualité."
+      },
+      "deployment": {
+        "title": "Déploiement",
+        "description": "Mise en production avec suivi et support continu pour assurer la réussite de votre projet."
+      }
+    }
+  },
+  "testimonials": {
+    "title": "Ce que nos clients disent de nous",
+    "description": "La satisfaction de nos clients est notre priorité absolue. Voici quelques témoignages de partenaires avec qui nous avons eu le plaisir de collaborer.",
+    "items": [
+      {
+        "quote": "L'équipe d'onRuntime Studio a transformé notre vision en une solution digitale exceptionnelle qui a dépassé toutes nos attentes. Leur expertise technique et leur créativité ont fait toute la différence.",
+        "author": "Thomas M. - Directeur marketing"
+      },
+      {
+        "quote": "Un partenaire fiable et innovant qui comprend réellement nos besoins. Leur approche méthodique et leur communication transparente ont rendu le processus de développement agréable et sans stress.",
+        "author": "Sophie D. - Fondatrice startup"
+      }
+    ]
+  },
+  "industries": {
+    "title": "Industries que nous servons",
+    "description": "Notre expertise s'étend à de nombreux secteurs, avec des solutions adaptées aux spécificités de chaque industrie.",
+    "items": {
+      "ecommerce": "E-commerce",
+      "startups": "Startups",
+      "luxury": "Luxe",
+      "institutions": "Institutions"
+    }
+  },
+  "why-us": {
+    "title": "Pourquoi choisir onRuntime Studio ?",
+    "description": "Nous nous distinguons par notre approche centrée sur le client et notre engagement envers l'excellence.",
+    "items": {
+      "expertise": {
+        "title": "Expertise technique",
+        "description": "Une équipe de développeurs et designers expérimentés maîtrisant les dernières technologies."
+      },
+      "custom": {
+        "title": "Solutions sur mesure",
+        "description": "Des développements personnalisés qui répondent précisément à vos besoins spécifiques."
+      },
+      "support": {
+        "title": "Support continu",
+        "description": "Un accompagnement de qualité tout au long du projet et après le lancement."
+      }
+    }
+  },
+  "cta": {
+    "title": "Prêt à donner vie à votre projet ?",
+    "description": "Contactez-nous dès aujourd'hui pour discuter de votre idée et découvrir comment notre expertise peut vous aider à la transformer en réalité.",
+    "buttons": {
+      "start": "Démarrer un projet",
+      "services": "Découvrir nos services"
+    }
+  }
+}
diff --git a/apps/web/src/locales/fr/screens/marketing/projects/details.json b/apps/web/src/locales/fr/screens/marketing/projects/details.json
new file mode 100644
index 000000000..ebbfe4e66
--- /dev/null
+++ b/apps/web/src/locales/fr/screens/marketing/projects/details.json
@@ -0,0 +1,65 @@
+{
+  "tags": {
+    "featured": "Projet phare",
+    "open-source": "Open Source"
+  },
+  "buttons": {
+    "view-project": "Voir le projet",
+    "source-code": "Code source"
+  },
+  "info": {
+    "start-date": "Date de début",
+    "status": "Statut",
+    "team": "Équipe",
+    "members": "membres"
+  },
+  "sections": {
+    "about": "À propos du projet",
+    "metrics": "Impact et métriques",
+    "features": "Fonctionnalités clés",
+    "technologies": "Technologies utilisées",
+    "gallery": "Galerie",
+    "team": "L'équipe",
+    "challenges": "Défis rencontrés",
+    "learnings": "Apprentissages clés",
+    "future": "Perspectives futures"
+  },
+  "cta": {
+    "title": "Intéressé par ce projet ?",
+    "description": "Découvrez comment nous pouvons vous aider à réaliser un projet similaire.",
+    "button": "Discuter de votre projet"
+  },
+  "tonightpass": {
+    "hero": {
+      "title": "La billetterie qui simplifie vos événements",
+      "subtitle": "De la création à l'entrée, gérez tout en 5 minutes",
+      "description": "Solution complète de billetterie pour organisateurs d'événements. Créez vos événements, vendez vos billets et gérez l'accès avec des outils professionnels et un support dédié.",
+      "buttons": {
+        "create": "Créer mon événement",
+        "discover": "Découvrir la solution"
+      },
+      "stats": {
+        "setup": {
+          "value": "5min",
+          "label": "Configuration"
+        },
+        "cost": {
+          "value": "0€",
+          "label": "Installation"
+        },
+        "support": {
+          "value": "24/7",
+          "label": "Support"
+        }
+      }
+    },
+    "cta": {
+      "title": "Prêt à simplifier votre billetterie ?",
+      "description": "Simplifiez la gestion de vos événements avec une solution complète et intuitive",
+      "buttons": {
+        "start": "Commencer maintenant",
+        "features": "Voir toutes les fonctionnalités"
+      }
+    }
+  }
+}
diff --git a/apps/web/src/screens/marketing/careers/job-details.tsx b/apps/web/src/screens/marketing/careers/job-details.tsx
index 8a5c0364b..c5f637b2b 100644
--- a/apps/web/src/screens/marketing/careers/job-details.tsx
+++ b/apps/web/src/screens/marketing/careers/job-details.tsx
@@ -63,7 +63,7 @@ const JobDetailPage: React.FC<JobDetailPageProps> = ({ job }) => {
       navigator
         .share({
           title: job.title,
-          text: t("share.text.prefix") + job.title + t("share.text.suffix"),
+          text: t("share.text", { jobTitle: job.title }),
           url: window.location.href,
         })
         .catch((error) => console.log("Error sharing", error));
diff --git a/apps/web/src/screens/marketing/projects/details/index.tsx b/apps/web/src/screens/marketing/projects/details/index.tsx
index b7c129290..b36c27305 100644
--- a/apps/web/src/screens/marketing/projects/details/index.tsx
+++ b/apps/web/src/screens/marketing/projects/details/index.tsx
@@ -19,6 +19,7 @@ import {
 } from "lucide-react";
 import TeamMembers from "@/constants/team-members";
 import { env } from "process";
+import { getTranslation } from "@/lib/translations.server";
 
 import { MemberWebsiteButton } from "@/components/marketing/projects/details/member-website-button";
 import { GoogleAdsConversionLink } from "@/components/marketing/projects/details/google-ads-conversion";
@@ -27,32 +28,40 @@ interface ProjectPageProps {
   project: Project;
 }
 
-const ProjectPage: React.FC<ProjectPageProps> = ({ project }) => {
+const ProjectPage: React.FC<ProjectPageProps> = async ({ project }) => {
+  const { t, locale } = await getTranslation("screens/marketing/projects/details");
+  const { t: tProject } = await getTranslation(`constants/projects/${project.id}`);
+
+  const getTagLabel = (tag: Tag) => {
+    if (tag === Tag.FEATURED) return t("tags.featured");
+    if (tag === Tag.OPEN_SOURCE) return t("tags.open-source");
+    return tag;
+  };
+
   return (
     <main className="min-h-screen pt-32 pb-16">
       {project.id === "tonightpass" ? (
         <div className="relative min-h-screen flex flex-col items-center justify-center px-4 -mt-32 pt-32">
           <div className="max-w-4xl mx-auto text-center space-y-8">
             <h1 className="font-semibold text-4xl md:text-6xl text-foreground">
-              La billetterie qui simplifie vos événements
+              {t("tonightpass.hero.title")}
             </h1>
-            
+
             <h2 className="text-xl md:text-2xl text-muted-foreground font-medium">
-              De la création à l&apos;entrée, gérez tout en 5 minutes
+              {t("tonightpass.hero.subtitle")}
             </h2>
-            
+
             <p className="text-lg text-muted-foreground max-w-2xl mx-auto leading-relaxed">
-              Solution complète de billetterie pour organisateurs d&apos;événements. 
-              Créez vos événements, vendez vos billets et gérez l&apos;accès avec des outils professionnels et un support dédié.
+              {t("tonightpass.hero.description")}
             </p>
-            
+
             <div className="flex flex-col sm:flex-row gap-4 justify-center pt-6">
               <GoogleAdsConversionLink
                 href="https://tonightpass.com/fr/auth?continue=%2Fnew"
                 sendTo="AW-16498437714/CRTrCMzs0akbENLciLs9"
               >
                 <Button size="lg" className="w-full sm:w-auto">
-                  Créer mon événement
+                  {t("tonightpass.hero.buttons.create")}
                   <ArrowRight className="ml-2 w-4 h-4" />
                 </Button>
               </GoogleAdsConversionLink>
@@ -61,28 +70,40 @@ const ProjectPage: React.FC<ProjectPageProps> = ({ project }) => {
                 sendTo="AW-16498437714/CRTrCMzs0akbENLciLs9"
               >
                 <Button variant="outline" size="lg" className="w-full sm:w-auto">
-                  Découvrir la solution
+                  {t("tonightpass.hero.buttons.discover")}
                   <Globe className="ml-2 w-4 h-4" />
                 </Button>
               </GoogleAdsConversionLink>
             </div>
-            
+
             <div className="grid grid-cols-3 gap-8 pt-12 max-w-md mx-auto text-center">
               <div>
-                <div className="text-2xl font-bold text-foreground">5min</div>
-                <div className="text-sm text-muted-foreground">Configuration</div>
+                <div className="text-2xl font-bold text-foreground">
+                  {t("tonightpass.hero.stats.setup.value")}
+                </div>
+                <div className="text-sm text-muted-foreground">
+                  {t("tonightpass.hero.stats.setup.label")}
+                </div>
               </div>
               <div>
-                <div className="text-2xl font-bold text-foreground">0€</div>
-                <div className="text-sm text-muted-foreground">Installation</div>
+                <div className="text-2xl font-bold text-foreground">
+                  {t("tonightpass.hero.stats.cost.value")}
+                </div>
+                <div className="text-sm text-muted-foreground">
+                  {t("tonightpass.hero.stats.cost.label")}
+                </div>
               </div>
               <div>
-                <div className="text-2xl font-bold text-foreground">24/7</div>
-                <div className="text-sm text-muted-foreground">Support</div>
+                <div className="text-2xl font-bold text-foreground">
+                  {t("tonightpass.hero.stats.support.value")}
+                </div>
+                <div className="text-sm text-muted-foreground">
+                  {t("tonightpass.hero.stats.support.label")}
+                </div>
               </div>
             </div>
           </div>
-          
+
           <DotPattern
             width={30}
             height={30}
@@ -93,69 +114,76 @@ const ProjectPage: React.FC<ProjectPageProps> = ({ project }) => {
           />
         </div>
       ) : null}
-      
+
       <div className="px-4 md:px-0 max-w-5xl mx-auto space-y-24">
         {project.id !== "tonightpass" && (
           <div className="relative w-full flex flex-col items-center gap-8">
-          <div className="max-w-2xl text-center space-y-6">
-            <Image
-              src={project.iconUrl}
-              alt={project.name}
-              className="w-16 h-16 rounded-lg mx-auto"
-              width={64}
-              height={64}
-            />
+            <div className="max-w-2xl text-center space-y-6">
+              <Image
+                src={project.iconUrl}
+                alt={project.name}
+                className="w-16 h-16 rounded-lg mx-auto"
+                width={64}
+                height={64}
+              />
 
-            <div className="flex flex-wrap gap-2 justify-center">
-              {project.tags.map((tag) => (
-                <Badge key={tag} variant="secondary">
-                  {tag === Tag.FEATURED ? "Projet phare" : "Open Source"}
-                </Badge>
-              ))}
-            </div>
+              <div className="flex flex-wrap gap-2 justify-center">
+                {project.tags.map((tag) => (
+                  <Badge key={tag} variant="secondary">
+                    {getTagLabel(tag)}
+                  </Badge>
+                ))}
+              </div>
 
-            <h1 className="font-semibold text-4xl md:text-5xl text-foreground">
-              {project.name}
-            </h1>
+              <h1 className="font-semibold text-4xl md:text-5xl text-foreground">
+                {project.name}
+              </h1>
 
-            <p className="text-muted-foreground text-lg">
-              {project.description}
-            </p>
+              <p className="text-muted-foreground text-lg">
+                {tProject("description")}
+              </p>
 
-            <div className="flex gap-3 justify-center">
-              {project.website && (
-                <Link href={project.website} target="_blank">
-                  <Button>
-                    Voir le projet
-                    <Globe className="ml-2 w-4 h-4" />
-                  </Button>
-                </Link>
-              )}
+              <div className="flex gap-3 justify-center">
+                {project.website && (
+                  <Link href={project.website} target="_blank">
+                    <Button>
+                      {t("buttons.view-project")}
+                      <Globe className="ml-2 w-4 h-4" />
+                    </Button>
+                  </Link>
+                )}
 
-              {project.repository && (
-                <Link href={project.repository} target="_blank">
-                  <Button variant="outline">
-                    <Github className="mr-2 w-4 h-4" />
-                    Code source
-                  </Button>
-                </Link>
-              )}
+                {project.repository && (
+                  <Link href={project.repository} target="_blank">
+                    <Button variant="outline">
+                      <Github className="mr-2 w-4 h-4" />
+                      {t("buttons.source-code")}
+                    </Button>
+                  </Link>
+                )}
+              </div>
             </div>
-          </div>
 
-          <DotPattern
-            width={30}
-            height={30}
-            className={cn(
-              "absolute z-[-1] inset-0",
-              "[mask-image:radial-gradient(300px_circle_at_center,white,transparent)]"
-            )}
-          />
+            <DotPattern
+              width={30}
+              height={30}
+              className={cn(
+                "absolute z-[-1] inset-0",
+                "[mask-image:radial-gradient(300px_circle_at_center,white,transparent)]"
+              )}
+            />
           </div>
         )}
 
         <div className="w-full">
-          <Safari width={1200} height={750} imageSrc={project.showcaseUrl} url={new URL(project.website ||  env.NEXT_PUBLIC_APP_URL || "").hostname} />
+          <Safari
+            width={1200}
+            height={750}
+            imageSrc={project.showcaseUrl}
+            url={
+              new URL(project.website || env.NEXT_PUBLIC_APP_URL || "").hostname
+            }
+          />
         </div>
 
         <div className="grid md:grid-cols-3 gap-6">
@@ -164,12 +192,17 @@ const ProjectPage: React.FC<ProjectPageProps> = ({ project }) => {
               <Calendar className="w-5 h-5" />
             </div>
             <div>
-              <p className="text-sm text-muted-foreground">Date de début</p>
+              <p className="text-sm text-muted-foreground">
+                {t("info.start-date")}
+              </p>
               <p className="font-semibold">
-                {new Date(project.startDate).toLocaleDateString("fr-FR", {
-                  year: "numeric",
-                  month: "long",
-                })}
+                {new Date(project.startDate).toLocaleDateString(
+                  locale === "fr" ? "fr-FR" : "en-US",
+                  {
+                    year: "numeric",
+                    month: "long",
+                  }
+                )}
               </p>
             </div>
           </div>
@@ -179,7 +212,7 @@ const ProjectPage: React.FC<ProjectPageProps> = ({ project }) => {
               <Timer className="w-5 h-5" />
             </div>
             <div>
-              <p className="text-sm text-muted-foreground">Statut</p>
+              <p className="text-sm text-muted-foreground">{t("info.status")}</p>
               <p className="font-semibold capitalize">{project.status}</p>
             </div>
           </div>
@@ -189,8 +222,10 @@ const ProjectPage: React.FC<ProjectPageProps> = ({ project }) => {
               <Users className="w-5 h-5" />
             </div>
             <div>
-              <p className="text-sm text-muted-foreground">Équipe</p>
-              <p className="font-semibold">{project.team.length} membres</p>
+              <p className="text-sm text-muted-foreground">{t("info.team")}</p>
+              <p className="font-semibold">
+                {project.team.length} {t("info.members")}
+              </p>
             </div>
           </div>
         </div>
@@ -199,10 +234,10 @@ const ProjectPage: React.FC<ProjectPageProps> = ({ project }) => {
           <div className="relative overflow-hidden rounded-lg border bg-card p-8">
             <div className="max-w-3xl mx-auto text-center space-y-6 relative z-10">
               <h2 className="text-2xl md:text-3xl font-semibold text-foreground">
-                Prêt à simplifier votre billetterie ?
+                {t("tonightpass.cta.title")}
               </h2>
               <p className="text-lg text-muted-foreground">
-                Simplifiez la gestion de vos événements avec une solution complète et intuitive
+                {t("tonightpass.cta.description")}
               </p>
               <div className="flex flex-col sm:flex-row gap-4 justify-center">
                 <GoogleAdsConversionLink
@@ -210,7 +245,7 @@ const ProjectPage: React.FC<ProjectPageProps> = ({ project }) => {
                   sendTo="AW-16498437714/CRTrCMzs0akbENLciLs9"
                 >
                   <Button size="lg" className="w-full sm:w-auto">
-                    Commencer maintenant
+                    {t("tonightpass.cta.buttons.start")}
                     <ArrowRight className="ml-2 w-4 h-4" />
                   </Button>
                 </GoogleAdsConversionLink>
@@ -219,44 +254,42 @@ const ProjectPage: React.FC<ProjectPageProps> = ({ project }) => {
                   sendTo="AW-16498437714/CRTrCMzs0akbENLciLs9"
                 >
                   <Button variant="outline" size="lg" className="w-full sm:w-auto">
-                    Voir toutes les fonctionnalités
+                    {t("tonightpass.cta.buttons.features")}
                   </Button>
                 </GoogleAdsConversionLink>
               </div>
             </div>
-            
+
             <div className="absolute right-0 top-0 bottom-0 w-1/3 bg-gradient-to-l from-onruntime-blue/10 to-transparent" />
           </div>
         )}
 
         <div className="prose prose-neutral dark:prose-invert max-w-none">
           <h2 className="text-3xl font-semibold text-foreground mb-6">
-            À propos du projet
+            {t("sections.about")}
           </h2>
           <div className="text-muted-foreground whitespace-pre-line">
-            {project.longDescription}
+            {tProject("long-description")}
           </div>
         </div>
 
         {project.metrics && (
           <div className="space-y-8">
             <h2 className="text-3xl font-semibold text-foreground text-center">
-              Impact et Métriques
+              {t("sections.metrics")}
             </h2>
             <div className="grid md:grid-cols-3 gap-8">
-              {project.metrics.map((metric, index) => (
-                <div key={index} className="text-center space-y-2">
+              {project.metrics.map((metric) => (
+                <div key={metric.key} className="text-center space-y-2">
                   <p className="text-4xl font-semibold text-foreground">
                     {metric.value}
                   </p>
                   <p className="text-sm text-muted-foreground">
-                    {metric.label}
+                    {tProject(`metrics.${metric.key}.label`)}
+                  </p>
+                  <p className="text-xs text-muted-foreground">
+                    {tProject(`metrics.${metric.key}.description`)}
                   </p>
-                  {metric.description && (
-                    <p className="text-xs text-muted-foreground">
-                      {metric.description}
-                    </p>
-                  )}
                 </div>
               ))}
             </div>
@@ -265,12 +298,12 @@ const ProjectPage: React.FC<ProjectPageProps> = ({ project }) => {
 
         <div className="space-y-8">
           <h2 className="text-3xl font-semibold text-foreground text-center">
-            Fonctionnalités clés
+            {t("sections.features")}
           </h2>
           <div className="grid md:grid-cols-3 gap-8">
-            {project.features.map((feature, index) => (
+            {project.features.map((feature) => (
               <div
-                key={index}
+                key={feature.key}
                 className="flex flex-col gap-4 p-6 rounded-lg border bg-card"
               >
                 {feature.icon && (
@@ -279,9 +312,11 @@ const ProjectPage: React.FC<ProjectPageProps> = ({ project }) => {
                   </div>
                 )}
                 <h3 className="text-lg font-semibold text-foreground">
-                  {feature.title}
+                  {tProject(`features.${feature.key}.title`)}
                 </h3>
-                <p className="text-muted-foreground">{feature.description}</p>
+                <p className="text-muted-foreground">
+                  {tProject(`features.${feature.key}.description`)}
+                </p>
               </div>
             ))}
           </div>
@@ -289,12 +324,12 @@ const ProjectPage: React.FC<ProjectPageProps> = ({ project }) => {
 
         <div className="space-y-8">
           <h2 className="text-3xl font-semibold text-foreground text-center">
-            Technologies utilisées
+            {t("sections.technologies")}
           </h2>
           <div className="grid md:grid-cols-3 gap-8">
-            {project.technologies.map((tech, index) => (
+            {project.technologies.map((tech) => (
               <div
-                key={index}
+                key={tech.key}
                 className="flex items-start gap-4 p-6 rounded-lg border bg-card"
               >
                 <div className="p-3 rounded-md bg-onruntime-blue/10 text-onruntime-blue w-fit">
@@ -305,7 +340,7 @@ const ProjectPage: React.FC<ProjectPageProps> = ({ project }) => {
                     {tech.name}
                   </h3>
                   <p className="text-sm text-muted-foreground">
-                    {tech.description}
+                    {tProject(`technologies.${tech.key}.description`)}
                   </p>
                 </div>
               </div>
@@ -316,21 +351,21 @@ const ProjectPage: React.FC<ProjectPageProps> = ({ project }) => {
         {project.screenshots && project.screenshots.length > 0 && (
           <div className="space-y-8">
             <h2 className="text-3xl font-semibold text-foreground text-center">
-              Galerie
+              {t("sections.gallery")}
             </h2>
             <div className="grid grid-cols-2 gap-8">
-              {project.screenshots.map((screenshot, index) => (
-                <div key={index} className="space-y-2">
+              {project.screenshots.map((screenshot) => (
+                <div key={screenshot.key} className="space-y-2">
                   <div className="relative aspect-video rounded-lg overflow-hidden">
                     <Image
                       src={screenshot.url}
-                      alt={screenshot.caption}
+                      alt={tProject(`screenshots.${screenshot.key}.caption`)}
                       fill
                       className="object-cover"
                     />
                   </div>
                   <p className="text-sm text-muted-foreground text-center">
-                    {screenshot.caption}
+                    {tProject(`screenshots.${screenshot.key}.caption`)}
                   </p>
                 </div>
               ))}
@@ -340,7 +375,7 @@ const ProjectPage: React.FC<ProjectPageProps> = ({ project }) => {
 
         <div className="space-y-8">
           <h2 className="text-3xl font-semibold text-foreground text-center">
-            L&apos;équipe
+            {t("sections.team")}
           </h2>
           <div className="grid md:grid-cols-4 gap-6">
             {project.team.map((teamMember, index) => {
@@ -396,11 +431,7 @@ const ProjectPage: React.FC<ProjectPageProps> = ({ project }) => {
                         </Button>
                       </Link>
                     )}
-                    {
-                      member.website && (
-                        <MemberWebsiteButton member={member} />
-                      )
-                    }
+                    {member.website && <MemberWebsiteButton member={member} />}
                   </div>
                 </div>
               );
@@ -411,15 +442,17 @@ const ProjectPage: React.FC<ProjectPageProps> = ({ project }) => {
         <div className="grid md:grid-cols-2 gap-12">
           <div className="space-y-6">
             <h2 className="text-2xl font-semibold text-foreground">
-              Défis rencontrés
+              {t("sections.challenges")}
             </h2>
             <ul className="space-y-4">
-              {project.challenges.map((challenge, index) => (
-                <li key={index} className="flex items-start gap-4">
+              {project.challenges.map((challenge) => (
+                <li key={challenge} className="flex items-start gap-4">
                   <div className="p-2 rounded-md bg-onruntime-blue/10 text-onruntime-blue mt-0.5">
                     <ArrowRight className="w-4 h-4" />
                   </div>
-                  <p className="text-muted-foreground">{challenge}</p>
+                  <p className="text-muted-foreground">
+                    {tProject(`challenges.${challenge}`)}
+                  </p>
                 </li>
               ))}
             </ul>
@@ -427,15 +460,17 @@ const ProjectPage: React.FC<ProjectPageProps> = ({ project }) => {
 
           <div className="space-y-6">
             <h2 className="text-2xl font-semibold text-foreground">
-              Apprentissages clés
+              {t("sections.learnings")}
             </h2>
             <ul className="space-y-4">
-              {project.learnings.map((learning, index) => (
-                <li key={index} className="flex items-start gap-4">
+              {project.learnings.map((learning) => (
+                <li key={learning} className="flex items-start gap-4">
                   <div className="p-2 rounded-md bg-onruntime-blue/10 text-onruntime-blue mt-0.5">
                     <ArrowRight className="w-4 h-4" />
                   </div>
-                  <p className="text-muted-foreground">{learning}</p>
+                  <p className="text-muted-foreground">
+                    {tProject(`learnings.${learning}`)}
+                  </p>
                 </li>
               ))}
             </ul>
@@ -445,12 +480,14 @@ const ProjectPage: React.FC<ProjectPageProps> = ({ project }) => {
         {project.futurePlans && (
           <div className="space-y-6">
             <h2 className="text-2xl font-semibold text-foreground">
-              Perspectives futures
+              {t("sections.future")}
             </h2>
             <div className="grid md:grid-cols-3 gap-6">
-              {project.futurePlans.map((plan, index) => (
-                <div key={index} className="p-6 rounded-lg border bg-card">
-                  <p className="text-muted-foreground">{plan}</p>
+              {project.futurePlans.map((plan) => (
+                <div key={plan} className="p-6 rounded-lg border bg-card">
+                  <p className="text-muted-foreground">
+                    {tProject(`future-plans.${plan}`)}
+                  </p>
                 </div>
               ))}
             </div>
@@ -460,15 +497,12 @@ const ProjectPage: React.FC<ProjectPageProps> = ({ project }) => {
         <div className="relative overflow-hidden rounded-lg border bg-card p-8">
           <div className="max-w-2xl">
             <h2 className="text-2xl font-semibold text-foreground mb-4">
-              Intéressé par ce projet ?
+              {t("cta.title")}
             </h2>
-            <p className="text-muted-foreground mb-6">
-              Découvrez comment nous pouvons vous aider à réaliser un projet
-              similaire.
-            </p>
+            <p className="text-muted-foreground mb-6">{t("cta.description")}</p>
             <Link href="/contact">
               <Button>
-                Discuter de votre projet
+                {t("cta.button")}
                 <ArrowRight className="ml-2 w-4 h-4" />
               </Button>
             </Link>
diff --git a/apps/web/src/screens/marketing/projects/index.tsx b/apps/web/src/screens/marketing/projects/index.tsx
index aa98d16ac..b9ff759fc 100644
--- a/apps/web/src/screens/marketing/projects/index.tsx
+++ b/apps/web/src/screens/marketing/projects/index.tsx
@@ -1,30 +1,46 @@
-import React from 'react';
-import Link from 'next/link';
+"use client";
+
+import React from "react";
 import { Button } from "@/components/ui/button";
 import DotPattern from "@/components/ui/dot-pattern";
 import { cn } from "@/lib/utils";
-import { ArrowRight, BriefcaseBusiness, CheckCircle, Code, Gem, Globe, Palette, Rocket, Star, Users } from "lucide-react";
+import {
+  ArrowRight,
+  BriefcaseBusiness,
+  CheckCircle,
+  Code,
+  Gem,
+  Globe,
+  Palette,
+  Rocket,
+  Star,
+  Users,
+} from "lucide-react";
 import Routes from "@/constants/routes";
-import { FeaturedProjects, StudioProjects, CustomerProjects } from '@/components/marketing/projects/sections';
+import {
+  FeaturedProjects,
+  StudioProjects,
+  CustomerProjects,
+} from "@/components/marketing/projects/sections";
+import { Link } from "@onruntime/translations/next";
+import { useTranslation } from "@onruntime/translations/react";
 
 const ProjectsPage = () => {
+  const { t } = useTranslation("screens/marketing/projects");
+
   return (
     <main className="min-h-screen pt-32 pb-16">
       <div className="px-4 md:px-0 max-w-5xl mx-auto space-y-24">
         <div className="relative max-w-3xl mx-auto flex flex-col items-center gap-6 text-center">
           <h1 className="font-medium text-4xl md:text-5xl text-foreground">
-            Nos projets et réalisations
+            {t("hero.title")}
           </h1>
-          
+
           <p className="text-lg text-muted-foreground">
-            Découvrez notre portfolio de projets en développement web, mobile et design UI/UX. 
-            Des solutions innovantes et des interfaces modernes réalisées par notre équipe d&apos;experts.
+            {t("hero.description")}
           </p>
 
-          <p className="text-muted-foreground">
-            De la conception à la réalisation, chaque projet témoigne de notre expertise 
-            et de notre engagement à créer des expériences numériques exceptionnelles.
-          </p>
+          <p className="text-muted-foreground">{t("hero.subdescription")}</p>
 
           <DotPattern
             width={30}
@@ -39,11 +55,10 @@ const ProjectsPage = () => {
         <div className="space-y-12">
           <div className="text-center">
             <h2 className="text-3xl font-medium text-foreground mb-4">
-              Notre expertise en développement de projets
+              {t("expertise.title")}
             </h2>
             <p className="text-muted-foreground max-w-3xl mx-auto">
-              Chez onRuntime Studio, nous combinons créativité, expertise technique et méthodologie éprouvée 
-              pour transformer vos idées en solutions digitales performantes et innovantes.
+              {t("expertise.description")}
             </p>
           </div>
 
@@ -52,10 +67,11 @@ const ProjectsPage = () => {
               <div className="p-3 rounded-full bg-onruntime-blue/10 text-onruntime-blue mb-4">
                 <Code className="w-6 h-6" />
               </div>
-              <h3 className="text-xl font-medium text-foreground mb-2">Développement sur mesure</h3>
+              <h3 className="text-xl font-medium text-foreground mb-2">
+                {t("expertise.cards.development.title")}
+              </h3>
               <p className="text-muted-foreground">
-                Des solutions codées avec soin, utilisant les technologies les plus adaptées 
-                à votre projet et à vos objectifs spécifiques.
+                {t("expertise.cards.development.description")}
               </p>
             </div>
 
@@ -63,10 +79,11 @@ const ProjectsPage = () => {
               <div className="p-3 rounded-full bg-onruntime-blue/10 text-onruntime-blue mb-4">
                 <Palette className="w-6 h-6" />
               </div>
-              <h3 className="text-xl font-medium text-foreground mb-2">Design UI/UX exceptionnel</h3>
+              <h3 className="text-xl font-medium text-foreground mb-2">
+                {t("expertise.cards.design.title")}
+              </h3>
               <p className="text-muted-foreground">
-                Des interfaces élégantes et intuitives qui engagent vos utilisateurs 
-                et véhiculent efficacement l&apos;identité de votre marque.
+                {t("expertise.cards.design.description")}
               </p>
             </div>
 
@@ -74,10 +91,11 @@ const ProjectsPage = () => {
               <div className="p-3 rounded-full bg-onruntime-blue/10 text-onruntime-blue mb-4">
                 <Rocket className="w-6 h-6" />
               </div>
-              <h3 className="text-xl font-medium text-foreground mb-2">Performance optimale</h3>
+              <h3 className="text-xl font-medium text-foreground mb-2">
+                {t("expertise.cards.performance.title")}
+              </h3>
               <p className="text-muted-foreground">
-                Des applications rapides, réactives et optimisées pour offrir 
-                une expérience utilisateur fluide et agréable.
+                {t("expertise.cards.performance.description")}
               </p>
             </div>
           </div>
@@ -88,11 +106,10 @@ const ProjectsPage = () => {
         <div className="space-y-12">
           <div className="text-center">
             <h2 className="text-3xl font-medium text-foreground mb-4">
-              Notre processus de Réalisation
+              {t("process.title")}
             </h2>
             <p className="text-muted-foreground max-w-3xl mx-auto">
-              Une méthodologie éprouvée qui garantit la qualité et le succès de chaque projet,
-              de la conception initiale au déploiement final.
+              {t("process.description")}
             </p>
           </div>
 
@@ -101,9 +118,11 @@ const ProjectsPage = () => {
               <div className="w-12 h-12 rounded-full flex items-center justify-center bg-onruntime-blue/10 text-onruntime-blue mb-4">
                 1
               </div>
-              <h3 className="font-medium text-foreground mb-2">Découverte</h3>
+              <h3 className="font-medium text-foreground mb-2">
+                {t("process.steps.discovery.title")}
+              </h3>
               <p className="text-sm text-muted-foreground">
-                Analyse approfondie de vos besoins, objectifs et des spécificités de votre secteur.
+                {t("process.steps.discovery.description")}
               </p>
             </div>
 
@@ -111,9 +130,11 @@ const ProjectsPage = () => {
               <div className="w-12 h-12 rounded-full flex items-center justify-center bg-onruntime-blue/10 text-onruntime-blue mb-4">
                 2
               </div>
-              <h3 className="font-medium text-foreground mb-2">Conception</h3>
+              <h3 className="font-medium text-foreground mb-2">
+                {t("process.steps.conception.title")}
+              </h3>
               <p className="text-sm text-muted-foreground">
-                Création de maquettes et prototypes pour visualiser et valider l&apos;expérience utilisateur.
+                {t("process.steps.conception.description")}
               </p>
             </div>
 
@@ -121,9 +142,11 @@ const ProjectsPage = () => {
               <div className="w-12 h-12 rounded-full flex items-center justify-center bg-onruntime-blue/10 text-onruntime-blue mb-4">
                 3
               </div>
-              <h3 className="font-medium text-foreground mb-2">Développement</h3>
+              <h3 className="font-medium text-foreground mb-2">
+                {t("process.steps.development.title")}
+              </h3>
               <p className="text-sm text-muted-foreground">
-                Codage soigné avec des technologies modernes et des tests rigoureux pour garantir la qualité.
+                {t("process.steps.development.description")}
               </p>
             </div>
 
@@ -131,9 +154,11 @@ const ProjectsPage = () => {
               <div className="w-12 h-12 rounded-full flex items-center justify-center bg-onruntime-blue/10 text-onruntime-blue mb-4">
                 4
               </div>
-              <h3 className="font-medium text-foreground mb-2">Déploiement</h3>
+              <h3 className="font-medium text-foreground mb-2">
+                {t("process.steps.deployment.title")}
+              </h3>
               <p className="text-sm text-muted-foreground">
-                Mise en production avec suivi et support continu pour assurer la réussite de votre projet.
+                {t("process.steps.deployment.description")}
               </p>
             </div>
           </div>
@@ -143,30 +168,31 @@ const ProjectsPage = () => {
 
         <div className="bg-card border rounded-lg p-12 space-y-8">
           <div className="text-center">
-            <h2 className="text-2xl font-medium text-foreground mb-4">Ce que nos clients disent de nous</h2>
+            <h2 className="text-2xl font-medium text-foreground mb-4">
+              {t("testimonials.title")}
+            </h2>
             <p className="text-muted-foreground max-w-2xl mx-auto">
-              La satisfaction de nos clients est notre priorité absolue. Voici quelques témoignages 
-              de partenaires avec qui nous avons eu le plaisir de collaborer.
+              {t("testimonials.description")}
             </p>
           </div>
 
           <div className="grid md:grid-cols-2 gap-8">
             <div className="p-6 border rounded-lg bg-background">
               <p className="italic text-muted-foreground mb-4">
-                &quot;L&apos;équipe d&apos;onRuntime Studio a transformé notre vision en une solution digitale 
-                exceptionnelle qui a dépassé toutes nos attentes. Leur expertise technique et leur 
-                créativité ont fait toute la différence.&quot;
+                &quot;{t("testimonials.items.0.quote")}&quot;
               </p>
-              <div className="font-medium">Thomas M. - Directeur Marketing</div>
+              <div className="font-medium">
+                {t("testimonials.items.0.author")}
+              </div>
             </div>
 
             <div className="p-6 border rounded-lg bg-background">
               <p className="italic text-muted-foreground mb-4">
-                &quot;Un partenaire fiable et innovant qui comprend réellement nos besoins. 
-                Leur approche méthodique et leur communication transparente ont rendu le 
-                processus de développement agréable et sans stress.&quot;
+                &quot;{t("testimonials.items.1.quote")}&quot;
               </p>
-              <div className="font-medium">Sophie D. - Fondatrice Startup</div>
+              <div className="font-medium">
+                {t("testimonials.items.1.author")}
+              </div>
             </div>
           </div>
         </div>
@@ -176,11 +202,10 @@ const ProjectsPage = () => {
         <div className="space-y-8">
           <div className="text-center">
             <h2 className="text-2xl font-medium text-foreground mb-4">
-              Industries que nous servons
+              {t("industries.title")}
             </h2>
             <p className="text-muted-foreground max-w-2xl mx-auto">
-              Notre expertise s&apos;étend à de nombreux secteurs, avec des solutions adaptées 
-              aux spécificités de chaque industrie.
+              {t("industries.description")}
             </p>
           </div>
 
@@ -189,25 +214,27 @@ const ProjectsPage = () => {
               <div className="p-3 rounded-full bg-onruntime-blue/10 text-onruntime-blue mx-auto mb-3 w-fit">
                 <BriefcaseBusiness className="w-5 h-5" />
               </div>
-              <h3 className="font-medium">E-commerce</h3>
+              <h3 className="font-medium">{t("industries.items.ecommerce")}</h3>
             </div>
             <div className="p-4 text-center">
               <div className="p-3 rounded-full bg-onruntime-blue/10 text-onruntime-blue mx-auto mb-3 w-fit">
                 <Users className="w-5 h-5" />
               </div>
-              <h3 className="font-medium">Startups</h3>
+              <h3 className="font-medium">{t("industries.items.startups")}</h3>
             </div>
             <div className="p-4 text-center">
               <div className="p-3 rounded-full bg-onruntime-blue/10 text-onruntime-blue mx-auto mb-3 w-fit">
                 <Gem className="w-5 h-5" />
               </div>
-              <h3 className="font-medium">Luxe</h3>
+              <h3 className="font-medium">{t("industries.items.luxury")}</h3>
             </div>
             <div className="p-4 text-center">
               <div className="p-3 rounded-full bg-onruntime-blue/10 text-onruntime-blue mx-auto mb-3 w-fit">
                 <Globe className="w-5 h-5" />
               </div>
-              <h3 className="font-medium">Institutions</h3>
+              <h3 className="font-medium">
+                {t("industries.items.institutions")}
+              </h3>
             </div>
           </div>
         </div>
@@ -215,10 +242,10 @@ const ProjectsPage = () => {
         <div className="space-y-8">
           <div className="text-center">
             <h2 className="text-2xl font-medium text-foreground mb-4">
-              Pourquoi choisir onRuntime Studio ?
+              {t("why-us.title")}
             </h2>
             <p className="text-muted-foreground max-w-2xl mx-auto">
-              Nous nous distinguons par notre approche centrée sur le client et notre engagement envers l&apos;excellence.
+              {t("why-us.description")}
             </p>
           </div>
 
@@ -226,27 +253,33 @@ const ProjectsPage = () => {
             <div className="flex items-start gap-3 p-4">
               <CheckCircle className="w-5 h-5 text-onruntime-blue flex-shrink-0 mt-1" />
               <div>
-                <h3 className="font-medium text-foreground mb-1">Expertise technique</h3>
+                <h3 className="font-medium text-foreground mb-1">
+                  {t("why-us.items.expertise.title")}
+                </h3>
                 <p className="text-sm text-muted-foreground">
-                  Une équipe de développeurs et designers expérimentés maîtrisant les dernières technologies.
+                  {t("why-us.items.expertise.description")}
                 </p>
               </div>
             </div>
             <div className="flex items-start gap-3 p-4">
               <CheckCircle className="w-5 h-5 text-onruntime-blue flex-shrink-0 mt-1" />
               <div>
-                <h3 className="font-medium text-foreground mb-1">Solutions sur mesure</h3>
+                <h3 className="font-medium text-foreground mb-1">
+                  {t("why-us.items.custom.title")}
+                </h3>
                 <p className="text-sm text-muted-foreground">
-                  Des développements personnalisés qui répondent précisément à vos besoins spécifiques.
+                  {t("why-us.items.custom.description")}
                 </p>
               </div>
             </div>
             <div className="flex items-start gap-3 p-4">
               <CheckCircle className="w-5 h-5 text-onruntime-blue flex-shrink-0 mt-1" />
               <div>
-                <h3 className="font-medium text-foreground mb-1">Support continu</h3>
+                <h3 className="font-medium text-foreground mb-1">
+                  {t("why-us.items.support.title")}
+                </h3>
                 <p className="text-sm text-muted-foreground">
-                  Un accompagnement de qualité tout au long du projet et après le lancement.
+                  {t("why-us.items.support.description")}
                 </p>
               </div>
             </div>
@@ -257,22 +290,21 @@ const ProjectsPage = () => {
           <Star className="absolute right-8 top-8 text-onruntime-blue/20 w-24 h-24 rotate-12" />
           <div className="max-w-2xl">
             <h2 className="text-3xl font-medium text-foreground mb-4">
-              Prêt à donner vie à votre projet ?
+              {t("cta.title")}
             </h2>
             <p className="text-lg text-muted-foreground mb-8">
-              Contactez-nous dès aujourd&apos;hui pour discuter de votre idée et découvrir comment 
-              notre expertise peut vous aider à la transformer en réalité.
+              {t("cta.description")}
             </p>
             <div className="flex flex-wrap gap-4">
               <Link href={Routes.contact}>
                 <Button size="lg">
-                  Démarrer un projet
+                  {t("cta.buttons.start")}
                   <ArrowRight className="ml-2 w-5 h-5" />
                 </Button>
               </Link>
               <Link href={Routes.services}>
                 <Button variant="outline" size="lg">
-                  Découvrir nos services
+                  {t("cta.buttons.services")}
                 </Button>
               </Link>
             </div>
@@ -283,4 +315,4 @@ const ProjectsPage = () => {
   );
 };
 
-export default ProjectsPage;
\ No newline at end of file
+export default ProjectsPage;
diff --git a/apps/web/src/types/project.ts b/apps/web/src/types/project.ts
index 0e9e58f36..4aaaa8bc2 100644
--- a/apps/web/src/types/project.ts
+++ b/apps/web/src/types/project.ts
@@ -8,22 +8,20 @@ export enum Tag {
 }
 
 export interface Technology {
+  key: string;
   name: string;
-  description: string;
   icon: LucideIcon;
 }
 
 export interface Feature {
-  title: string;
-  description: string;
+  key: string;
   icon?: LucideIcon;
   image?: string;
 }
 
 export interface Metric {
-  label: string;
+  key: string;
   value: string;
-  description?: string;
 }
 
 export interface ProjectTeamMember {
@@ -32,29 +30,35 @@ export interface ProjectTeamMember {
 }
 
 export interface Testimonial {
-  content: string;
+  key: string;
   author: {
     name: string;
-    role: string;
-    company: string;
     image: string;
   };
 }
 
+export interface Screenshot {
+  key: string;
+  url: string;
+}
+
+export interface Resource {
+  key: string;
+  type: "article" | "video" | "documentation";
+  url: string;
+}
+
 export interface Project {
   id: string;
   name: string;
   tags: Tag[];
-  shortDescription: string;
-  description: string;
-  longDescription: string; 
   iconUrl: string;
   showcaseUrl: string;
   thumbnailUrl: string;
 
-  website?: string; 
-  repository?: string; 
-  startDate: string; 
+  website?: string;
+  repository?: string;
+  startDate: string;
   status: "active" | "completed" | "archived";
 
   features: Feature[];
@@ -64,18 +68,11 @@ export interface Project {
   team: ProjectTeamMember[];
   testimonials?: Testimonial[];
 
-  screenshots: Array<{
-    url: string;
-    caption: string;
-  }>;
+  screenshots: Screenshot[];
 
-  challenges: string[]; 
-  learnings: string[]; 
-  futurePlans?: string[]; 
+  challenges: string[];
+  learnings: string[];
+  futurePlans?: string[];
 
-  resources?: Array<{
-    type: "article" | "video" | "documentation";
-    title: string;
-    url: string;
-  }>;
-}
\ No newline at end of file
+  resources?: Resource[];
+}

From 9418c8824f28b91deaf376c41632f84ed27c9010 Mon Sep 17 00:00:00 2001
From: Antoine Kingue <etorefr@gmail.com>
Date: Mon, 29 Dec 2025 02:21:52 +0100
Subject: [PATCH 13/64] =?UTF-8?q?=F0=9F=8C=90=20fix=20capitalization=20of?=
 =?UTF-8?q?=20github=20in=20footer=20and=20localization=20files?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 apps/web/src/components/layout/footer/footer.tsx       | 2 +-
 apps/web/src/locales/en/constants/projects/kitchn.json | 2 +-
 apps/web/src/locales/fr/constants/projects/kitchn.json | 2 +-
 3 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/apps/web/src/components/layout/footer/footer.tsx b/apps/web/src/components/layout/footer/footer.tsx
index 29058a97d..e85e4bfe1 100644
--- a/apps/web/src/components/layout/footer/footer.tsx
+++ b/apps/web/src/components/layout/footer/footer.tsx
@@ -41,7 +41,7 @@ const Footer = () => {
     ],
     [t("nav.social")]: [
       { name: "LinkedIn", href: Routes.socials.linkedin },
-      { name: "Github", href: Routes.socials.github },
+      { name: "GitHub", href: Routes.socials.github },
       { name: "Discord", href: Routes.socials.discord },
       { name: "X (Twitter)", href: Routes.socials.x },
       { name: "Instagram", href: Routes.socials.instagram },
diff --git a/apps/web/src/locales/en/constants/projects/kitchn.json b/apps/web/src/locales/en/constants/projects/kitchn.json
index 82f9421bc..9268f25b9 100644
--- a/apps/web/src/locales/en/constants/projects/kitchn.json
+++ b/apps/web/src/locales/en/constants/projects/kitchn.json
@@ -30,7 +30,7 @@
   "metrics": {
     "components": { "label": "Components", "description": "Reusable UI components" },
     "downloads": { "label": "Downloads", "description": "Monthly downloads" },
-    "github-stars": { "label": "Github Stars", "description": "Stars on GitHub" }
+    "github-stars": { "label": "GitHub Stars", "description": "Stars on GitHub" }
   },
   "screenshots": {
     "responsive": { "caption": "Responsive components" },
diff --git a/apps/web/src/locales/fr/constants/projects/kitchn.json b/apps/web/src/locales/fr/constants/projects/kitchn.json
index 56a607399..8859009ab 100644
--- a/apps/web/src/locales/fr/constants/projects/kitchn.json
+++ b/apps/web/src/locales/fr/constants/projects/kitchn.json
@@ -30,7 +30,7 @@
   "metrics": {
     "components": { "label": "Composants", "description": "Composants UI réutilisables" },
     "downloads": { "label": "Téléchargements", "description": "Téléchargements mensuels" },
-    "github-stars": { "label": "Github Stars", "description": "Stars sur GitHub" }
+    "github-stars": { "label": "GitHub Stars", "description": "Stars sur GitHub" }
   },
   "screenshots": {
     "responsive": { "caption": "Composants responsive" },

From 72a6e9172e6ec02175938251982723b948f9ed6f Mon Sep 17 00:00:00 2001
From: Antoine Kingue <etorefr@gmail.com>
Date: Mon, 29 Dec 2025 02:22:18 +0100
Subject: [PATCH 14/64] =?UTF-8?q?=E2=9C=8F=EF=B8=8F=20fix=20project=20link?=
 =?UTF-8?q?=20in=20navbar?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 apps/web/src/components/marketing/navbar/index.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/apps/web/src/components/marketing/navbar/index.tsx b/apps/web/src/components/marketing/navbar/index.tsx
index 3d81d7021..3e540146d 100644
--- a/apps/web/src/components/marketing/navbar/index.tsx
+++ b/apps/web/src/components/marketing/navbar/index.tsx
@@ -60,7 +60,7 @@ const Navbar: React.FC = () => {
 		},
 		{
 			title: t("links.projects"),
-			path: Routes.unknown,
+			path: Routes.projects,
 			dropdown: Projects.slice(0, 5).map((project) => ({
 				title: project.name,
 				path: Routes.project(project.id),

From 22ae53d3517dc45aeead216c6c00c65ca7cb5daa Mon Sep 17 00:00:00 2001
From: Antoine Kingue <etorefr@gmail.com>
Date: Mon, 29 Dec 2025 02:33:23 +0100
Subject: [PATCH 15/64] =?UTF-8?q?=F0=9F=8C=90=20update=20canonical=20url?=
 =?UTF-8?q?=20generation=20to=20include=20locale=20prefix=20and=20set=20lo?=
 =?UTF-8?q?cale=20cookie=20on=20redirect?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 apps/web/src/lib/utils/metadata.ts      | 12 ++----------
 apps/web/src/proxy.ts                   | 11 +++++++++--
 examples/translations/next-app/proxy.ts | 11 +++++++++--
 packages/translations/README.md         |  9 ++++++++-
 4 files changed, 28 insertions(+), 15 deletions(-)

diff --git a/apps/web/src/lib/utils/metadata.ts b/apps/web/src/lib/utils/metadata.ts
index a9c4252c2..c8beb3698 100644
--- a/apps/web/src/lib/utils/metadata.ts
+++ b/apps/web/src/lib/utils/metadata.ts
@@ -2,7 +2,6 @@ import { Metadata } from "next";
 import { headers } from "next/headers";
 
 import { env } from "@/../env";
-import { locales } from "@/lib/translations";
 
 export const siteConfig = {
   name: "onRuntime Studio",
@@ -129,7 +128,7 @@ export async function constructMetadata({
 
 /**
  * Generate a canonical URL automatically from the current request
- * @returns The full canonical URL for the current page (without locale prefix)
+ * @returns The full canonical URL for the current page (with locale prefix)
  */
 export async function generateCanonical(): Promise<string> {
   const headersList = await headers();
@@ -146,15 +145,8 @@ export async function generateCanonical(): Promise<string> {
   const cleanPath = pathname.split("?")[0] || "/"; // Remove query params
   const normalizedPath = cleanPath.startsWith("/") ? cleanPath : `/${cleanPath}`;
 
-  // Remove locale prefix from path
-  const segments = normalizedPath.split("/").filter(Boolean);
-  const hasLocalePrefix = locales.includes(segments[0]);
-  const pathWithoutLocale = hasLocalePrefix
-    ? `/${segments.slice(1).join("/")}`
-    : normalizedPath;
-
   // Combine and clean up double slashes
-  const canonical = `${serverUrl}${pathWithoutLocale}`
+  const canonical = `${serverUrl}${normalizedPath}`
     .replace(/([^:]\/)\/+/g, "$1") // Remove double slashes except after protocol
     .replace(/\/$/, ""); // Remove trailing slash
 
diff --git a/apps/web/src/proxy.ts b/apps/web/src/proxy.ts
index f4f2d83ee..6866c0924 100644
--- a/apps/web/src/proxy.ts
+++ b/apps/web/src/proxy.ts
@@ -38,16 +38,22 @@ export function proxy(request: NextRequest) {
     (locale) => pathname.startsWith(`/${locale}/`) || pathname === `/${locale}`,
   );
 
-  // If URL has the default locale prefix, redirect to remove it
+  // If URL has the default locale prefix, redirect to remove it and set cookie
   if (pathnameLocale === defaultLocale) {
     const newPathname = pathname.replace(`/${defaultLocale}`, "") || "/";
-    return NextResponse.redirect(new URL(newPathname, request.url));
+    const response = NextResponse.redirect(new URL(newPathname, request.url));
+    response.cookies.set(LOCALE_COOKIE, defaultLocale, {
+      path: "/",
+      maxAge: 60 * 60 * 24 * 365, // 1 year
+    });
+    return response;
   }
 
   // If URL has a non-default locale prefix, use it
   if (pathnameLocale) {
     const requestHeaders = new Headers(request.headers);
     requestHeaders.set("x-locale", pathnameLocale);
+    requestHeaders.set("x-pathname", pathname);
     return NextResponse.next({
       request: { headers: requestHeaders },
     });
@@ -66,6 +72,7 @@ export function proxy(request: NextRequest) {
   // Use default locale (rewrite internally)
   const requestHeaders = new Headers(request.headers);
   requestHeaders.set("x-locale", defaultLocale);
+  requestHeaders.set("x-pathname", pathname);
   request.nextUrl.pathname = `/${defaultLocale}${pathname}`;
   return NextResponse.rewrite(request.nextUrl, {
     request: { headers: requestHeaders },
diff --git a/examples/translations/next-app/proxy.ts b/examples/translations/next-app/proxy.ts
index 79801dab4..fc44d3cce 100644
--- a/examples/translations/next-app/proxy.ts
+++ b/examples/translations/next-app/proxy.ts
@@ -38,16 +38,22 @@ export function proxy(request: NextRequest) {
     (locale) => pathname.startsWith(`/${locale}/`) || pathname === `/${locale}`,
   );
 
-  // If URL has the default locale prefix, redirect to remove it
+  // If URL has the default locale prefix, redirect to remove it and set cookie
   if (pathnameLocale === defaultLocale) {
     const newPathname = pathname.replace(`/${defaultLocale}`, "") || "/";
-    return NextResponse.redirect(new URL(newPathname, request.url));
+    const response = NextResponse.redirect(new URL(newPathname, request.url));
+    response.cookies.set(LOCALE_COOKIE, defaultLocale, {
+      path: "/",
+      maxAge: 60 * 60 * 24 * 365, // 1 year
+    });
+    return response;
   }
 
   // If URL has a non-default locale prefix, use it
   if (pathnameLocale) {
     const requestHeaders = new Headers(request.headers);
     requestHeaders.set("x-locale", pathnameLocale);
+    requestHeaders.set("x-pathname", pathname);
     return NextResponse.next({
       request: { headers: requestHeaders },
     });
@@ -66,6 +72,7 @@ export function proxy(request: NextRequest) {
   // Use default locale (rewrite internally)
   const requestHeaders = new Headers(request.headers);
   requestHeaders.set("x-locale", defaultLocale);
+  requestHeaders.set("x-pathname", pathname);
   request.nextUrl.pathname = `/${defaultLocale}${pathname}`;
   return NextResponse.rewrite(request.nextUrl, {
     request: { headers: requestHeaders },
diff --git a/packages/translations/README.md b/packages/translations/README.md
index bff195fda..0a348e6a5 100644
--- a/packages/translations/README.md
+++ b/packages/translations/README.md
@@ -104,12 +104,18 @@ export function proxy(request: NextRequest) {
 
   if (pathnameLocale === defaultLocale) {
     const newPathname = pathname.replace(`/${defaultLocale}`, "") || "/";
-    return NextResponse.redirect(new URL(newPathname, request.url));
+    const response = NextResponse.redirect(new URL(newPathname, request.url));
+    response.cookies.set(LOCALE_COOKIE, defaultLocale, {
+      path: "/",
+      maxAge: 60 * 60 * 24 * 365, // 1 year
+    });
+    return response;
   }
 
   if (pathnameLocale) {
     const requestHeaders = new Headers(request.headers);
     requestHeaders.set("x-locale", pathnameLocale);
+    requestHeaders.set("x-pathname", pathname);
     return NextResponse.next({
       request: { headers: requestHeaders },
     });
@@ -125,6 +131,7 @@ export function proxy(request: NextRequest) {
 
   const requestHeaders = new Headers(request.headers);
   requestHeaders.set("x-locale", defaultLocale);
+  requestHeaders.set("x-pathname", pathname);
   request.nextUrl.pathname = `/${defaultLocale}${pathname}`;
   return NextResponse.rewrite(request.nextUrl, {
     request: { headers: requestHeaders },

From 86548045513c35af17c627acd54444028857226f Mon Sep 17 00:00:00 2001
From: Antoine Kingue <etorefr@gmail.com>
Date: Mon, 29 Dec 2025 02:37:46 +0100
Subject: [PATCH 16/64] =?UTF-8?q?=F0=9F=8C=90=20improve=20locale=20handlin?=
 =?UTF-8?q?g=20in=20metadata=20functions=20and=20add=20hreflang=20support?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 apps/web/src/lib/utils/metadata.ts | 90 ++++++++++++++++++++++++++----
 1 file changed, 78 insertions(+), 12 deletions(-)

diff --git a/apps/web/src/lib/utils/metadata.ts b/apps/web/src/lib/utils/metadata.ts
index c8beb3698..a96d9e219 100644
--- a/apps/web/src/lib/utils/metadata.ts
+++ b/apps/web/src/lib/utils/metadata.ts
@@ -2,6 +2,19 @@ import { Metadata } from "next";
 import { headers } from "next/headers";
 
 import { env } from "@/../env";
+import { locales, defaultLocale } from "@/lib/translations";
+
+/**
+ * Convert locale code to OpenGraph locale format
+ * e.g., "fr" → "fr_FR", "en" → "en_US"
+ */
+function toOgLocale(locale: string): string {
+  const countryOverrides: Record<string, string> = {
+    en: "US", // English defaults to US
+  };
+  const country = countryOverrides[locale] || locale.toUpperCase();
+  return `${locale}_${country}`;
+}
 
 export const siteConfig = {
   name: "onRuntime Studio",
@@ -53,6 +66,8 @@ export async function constructMetadata({
   noIndex?: boolean;
 } = {}): Promise<Metadata> {
   const canonical = await generateCanonical();
+  const languages = await generateAlternates();
+  const currentLocale = await getCurrentLocale();
 
   // Titre avec format cohérent
   const formattedTitle = title === siteConfig.name
@@ -73,6 +88,7 @@ export async function constructMetadata({
 
     alternates: {
       canonical,
+      languages,
     },
 
     authors: [{ name: "onRuntime Studio", url: siteConfig.url }],
@@ -81,7 +97,7 @@ export async function constructMetadata({
 
     openGraph: {
       type: ogType,
-      locale: "fr_FR",
+      locale: toOgLocale(currentLocale),
       url: canonical,
       title: formattedTitle,
       description,
@@ -127,28 +143,78 @@ export async function constructMetadata({
 }
 
 /**
- * Generate a canonical URL automatically from the current request
- * @returns The full canonical URL for the current page (with locale prefix)
+ * Get the current locale from headers
  */
-export async function generateCanonical(): Promise<string> {
+async function getCurrentLocale(): Promise<string> {
+  const headersList = await headers();
+  return headersList.get("x-locale") || defaultLocale;
+}
+
+/**
+ * Get the current pathname from headers
+ */
+async function getPathname(): Promise<string> {
   const headersList = await headers();
   const serverUrl = siteConfig.url;
 
-  // Try to get the pathname from various headers
   const pathname =
     headersList.get("x-pathname") ||
     headersList.get("x-invoke-path") ||
     headersList.get("referer")?.replace(serverUrl, "") ||
     "/";
 
-  // Clean up the pathname
-  const cleanPath = pathname.split("?")[0] || "/"; // Remove query params
-  const normalizedPath = cleanPath.startsWith("/") ? cleanPath : `/${cleanPath}`;
+  const cleanPath = pathname.split("?")[0] || "/";
+  return cleanPath.startsWith("/") ? cleanPath : `/${cleanPath}`;
+}
+
+/**
+ * Get the path without locale prefix
+ */
+function getPathWithoutLocale(pathname: string): string {
+  const segments = pathname.split("/").filter(Boolean);
+  const hasLocalePrefix = locales.includes(segments[0]);
+  return hasLocalePrefix ? `/${segments.slice(1).join("/")}` : pathname;
+}
+
+/**
+ * Generate a canonical URL automatically from the current request
+ * @returns The full canonical URL for the current page (with locale prefix)
+ */
+export async function generateCanonical(): Promise<string> {
+  const pathname = await getPathname();
+  const serverUrl = siteConfig.url;
 
-  // Combine and clean up double slashes
-  const canonical = `${serverUrl}${normalizedPath}`
-    .replace(/([^:]\/)\/+/g, "$1") // Remove double slashes except after protocol
-    .replace(/\/$/, ""); // Remove trailing slash
+  const canonical = `${serverUrl}${pathname}`
+    .replace(/([^:]\/)\/+/g, "$1")
+    .replace(/\/$/, "");
 
   return canonical || serverUrl;
+}
+
+/**
+ * Generate hreflang alternate URLs for all locales
+ * @returns Object with locale codes as keys and URLs as values
+ */
+export async function generateAlternates(): Promise<Record<string, string>> {
+  const pathname = await getPathname();
+  const pathWithoutLocale = getPathWithoutLocale(pathname);
+  const serverUrl = siteConfig.url;
+
+  const alternates: Record<string, string> = {};
+
+  for (const locale of locales) {
+    if (locale === defaultLocale) {
+      // Default locale has no prefix
+      alternates[locale] = `${serverUrl}${pathWithoutLocale}`.replace(/\/$/, "") || serverUrl;
+    } else {
+      // Other locales have prefix
+      const localePath = pathWithoutLocale === "/" ? `/${locale}` : `/${locale}${pathWithoutLocale}`;
+      alternates[locale] = `${serverUrl}${localePath}`;
+    }
+  }
+
+  // x-default points to the default locale version
+  alternates["x-default"] = alternates[defaultLocale];
+
+  return alternates;
 }
\ No newline at end of file

From 2e2d8effcfedd5202f940255b642a8654f536df3 Mon Sep 17 00:00:00 2001
From: Antoine Kingue <etorefr@gmail.com>
Date: Mon, 29 Dec 2025 02:43:40 +0100
Subject: [PATCH 17/64] =?UTF-8?q?=F0=9F=94=8D=20add=20project-team-schema?=
 =?UTF-8?q?=20and=20integrate=20team=20member=20data=20into=20project=20pa?=
 =?UTF-8?q?ge?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/app/[locale]/projects/[id]/page.tsx   | 16 +++++-
 .../src/components/json-ld/person-schema.tsx  | 42 ++++++++++++++
 .../src/components/json-ld/project-schema.tsx | 55 +++++++++++++++++--
 3 files changed, 108 insertions(+), 5 deletions(-)
 create mode 100644 apps/web/src/components/json-ld/person-schema.tsx

diff --git a/apps/web/src/app/[locale]/projects/[id]/page.tsx b/apps/web/src/app/[locale]/projects/[id]/page.tsx
index 63e5b9ae4..8e3c2a945 100644
--- a/apps/web/src/app/[locale]/projects/[id]/page.tsx
+++ b/apps/web/src/app/[locale]/projects/[id]/page.tsx
@@ -4,7 +4,8 @@ import ProjectPage from "@/screens/marketing/projects/details";
 import type { Metadata } from "next";
 import { constructMetadata } from "@/lib/utils/metadata";
 import { getTranslation } from "@/lib/translations.server";
-import { ProjectSchema } from "@/components/json-ld/project-schema";
+import { ProjectSchema, ProjectTeamSchema } from "@/components/json-ld/project-schema";
+import TeamMembers from "@/constants/team-members";
 
 type Params = Promise<{ id: string }>;
 
@@ -45,6 +46,18 @@ export default async function Page({ params }: { params: Params }) {
 
   const { t: tProject } = await getTranslation(`constants/projects/${project.id}`);
 
+  const teamData = project.team?.map((member) => {
+    const memberData = TeamMembers[member.ref];
+    return {
+      name: memberData?.name || member.ref,
+      role: member.role,
+      website: memberData?.website,
+      avatar: memberData?.avatar,
+      github: memberData?.github,
+      linkedin: memberData?.linkedin,
+    };
+  }) || [];
+
   return (
     <>
       <ProjectSchema
@@ -52,6 +65,7 @@ export default async function Page({ params }: { params: Params }) {
         name={project.name}
         description={tProject("description")}
       />
+      {teamData.length > 0 && <ProjectTeamSchema team={teamData} />}
       <ProjectPage project={project} />
     </>
   );
diff --git a/apps/web/src/components/json-ld/person-schema.tsx b/apps/web/src/components/json-ld/person-schema.tsx
new file mode 100644
index 000000000..32e98df13
--- /dev/null
+++ b/apps/web/src/components/json-ld/person-schema.tsx
@@ -0,0 +1,42 @@
+import React from "react";
+import { ORGANIZATION_DATA } from "./constants";
+
+type PersonSchemaProps = {
+  name: string;
+  jobTitle?: string;
+  url?: string;
+  image?: string;
+  sameAs?: string[];
+};
+
+export const PersonSchema: React.FC<PersonSchemaProps> = ({
+  name,
+  jobTitle,
+  url,
+  image,
+  sameAs = [],
+}) => {
+  const schema = {
+    "@context": "https://schema.org",
+    "@type": "Person",
+    name,
+    ...(jobTitle && { jobTitle }),
+    ...(url && { url }),
+    ...(image && {
+      image: image.startsWith("http") ? image : `${ORGANIZATION_DATA.url}${image}`,
+    }),
+    ...(sameAs.length > 0 && { sameAs }),
+    worksFor: {
+      "@type": "Organization",
+      name: ORGANIZATION_DATA.name,
+      url: ORGANIZATION_DATA.url,
+    },
+  };
+
+  return (
+    <script
+      type="application/ld+json"
+      dangerouslySetInnerHTML={{ __html: JSON.stringify(schema) }}
+    />
+  );
+};
diff --git a/apps/web/src/components/json-ld/project-schema.tsx b/apps/web/src/components/json-ld/project-schema.tsx
index 48c8fcc58..6cb6e9f40 100644
--- a/apps/web/src/components/json-ld/project-schema.tsx
+++ b/apps/web/src/components/json-ld/project-schema.tsx
@@ -1,6 +1,6 @@
-import React from 'react';
-import { WebPageJsonLd } from 'next-seo';
-import { ORGANIZATION_DATA } from './constants';
+import React from "react";
+import { WebPageJsonLd } from "next-seo";
+import { ORGANIZATION_DATA } from "./constants";
 
 type ProjectSchemaProps = {
   useAppDir?: boolean;
@@ -29,8 +29,55 @@ export const ProjectSchema: React.FC<ProjectSchemaProps> = ({
       }}
       additionalProperties={{
         name: name,
-        headline: name
+        headline: name,
       }}
     />
   );
+};
+
+type ProjectTeamSchemaProps = {
+  team: Array<{
+    name: string;
+    role: string;
+    website?: string;
+    avatar?: string;
+    github?: string;
+    linkedin?: string;
+  }>;
+};
+
+export const ProjectTeamSchema: React.FC<ProjectTeamSchemaProps> = ({
+  team,
+}) => {
+  const schemas = team.map((member) => {
+    const sameAs: string[] = [];
+    if (member.github) sameAs.push(member.github);
+    if (member.linkedin) sameAs.push(member.linkedin);
+
+    return {
+      "@context": "https://schema.org",
+      "@type": "Person",
+      name: member.name,
+      jobTitle: member.role,
+      ...(member.website && { url: member.website }),
+      ...(member.avatar && {
+        image: member.avatar.startsWith("http")
+          ? member.avatar
+          : `${ORGANIZATION_DATA.url}${member.avatar}`,
+      }),
+      ...(sameAs.length > 0 && { sameAs }),
+      worksFor: {
+        "@type": "Organization",
+        name: ORGANIZATION_DATA.name,
+        url: ORGANIZATION_DATA.url,
+      },
+    };
+  });
+
+  return (
+    <script
+      type="application/ld+json"
+      dangerouslySetInnerHTML={{ __html: JSON.stringify(schemas) }}
+    />
+  );
 };
\ No newline at end of file

From adc533dbb3a4c002e771e05f92796bb9322ae8bc Mon Sep 17 00:00:00 2001
From: Antoine Kingue <etorefr@gmail.com>
Date: Mon, 29 Dec 2025 11:14:16 +0100
Subject: [PATCH 18/64] =?UTF-8?q?=F0=9F=A9=B9=20update=20project=20schema?=
 =?UTF-8?q?=20URL=20to=20use=20organization=20data=20constant?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 apps/web/src/app/[locale]/projects/[id]/page.tsx | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/apps/web/src/app/[locale]/projects/[id]/page.tsx b/apps/web/src/app/[locale]/projects/[id]/page.tsx
index 8e3c2a945..6dbf01716 100644
--- a/apps/web/src/app/[locale]/projects/[id]/page.tsx
+++ b/apps/web/src/app/[locale]/projects/[id]/page.tsx
@@ -5,6 +5,7 @@ import type { Metadata } from "next";
 import { constructMetadata } from "@/lib/utils/metadata";
 import { getTranslation } from "@/lib/translations.server";
 import { ProjectSchema, ProjectTeamSchema } from "@/components/json-ld/project-schema";
+import { ORGANIZATION_DATA } from "@/components/json-ld/constants";
 import TeamMembers from "@/constants/team-members";
 
 type Params = Promise<{ id: string }>;
@@ -61,7 +62,7 @@ export default async function Page({ params }: { params: Params }) {
   return (
     <>
       <ProjectSchema
-        id={`https://onruntime.com/projects/${project.id}`}
+        id={`${ORGANIZATION_DATA.url}/projects/${project.id}`}
         name={project.name}
         description={tProject("description")}
       />

From 7edf72e0dd154c40447dbcf0ef133c556e167320 Mon Sep 17 00:00:00 2001
From: Antoine Kingue <etorefr@gmail.com>
Date: Mon, 29 Dec 2025 11:23:22 +0100
Subject: [PATCH 19/64] =?UTF-8?q?=F0=9F=A9=B9=20update=20project=20schema?=
 =?UTF-8?q?=20url=20to=20use=20routes=20constant?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 apps/web/src/app/[locale]/projects/[id]/page.tsx | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/apps/web/src/app/[locale]/projects/[id]/page.tsx b/apps/web/src/app/[locale]/projects/[id]/page.tsx
index 6dbf01716..c9aaf16f4 100644
--- a/apps/web/src/app/[locale]/projects/[id]/page.tsx
+++ b/apps/web/src/app/[locale]/projects/[id]/page.tsx
@@ -6,6 +6,7 @@ import { constructMetadata } from "@/lib/utils/metadata";
 import { getTranslation } from "@/lib/translations.server";
 import { ProjectSchema, ProjectTeamSchema } from "@/components/json-ld/project-schema";
 import { ORGANIZATION_DATA } from "@/components/json-ld/constants";
+import Routes from "@/constants/routes";
 import TeamMembers from "@/constants/team-members";
 
 type Params = Promise<{ id: string }>;
@@ -62,7 +63,7 @@ export default async function Page({ params }: { params: Params }) {
   return (
     <>
       <ProjectSchema
-        id={`${ORGANIZATION_DATA.url}/projects/${project.id}`}
+        id={`${ORGANIZATION_DATA.url}${Routes.project(project.id)}`}
         name={project.name}
         description={tProject("description")}
       />

From c81a1943c0e013eeb066cba3240e0f91121fb06f Mon Sep 17 00:00:00 2001
From: Antoine Kingue <etorefr@gmail.com>
Date: Mon, 29 Dec 2025 11:34:40 +0100
Subject: [PATCH 20/64] =?UTF-8?q?=F0=9F=8C=90=20add=20locale=20preference?=
 =?UTF-8?q?=20in=20cookies=20when=20using=20non-default=20locale=20prefix?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 apps/web/src/proxy.ts                   | 9 +++++++--
 examples/translations/next-app/proxy.ts | 9 +++++++--
 packages/translations/README.md         | 8 +++++++-
 3 files changed, 21 insertions(+), 5 deletions(-)

diff --git a/apps/web/src/proxy.ts b/apps/web/src/proxy.ts
index 6866c0924..65fccb6e7 100644
--- a/apps/web/src/proxy.ts
+++ b/apps/web/src/proxy.ts
@@ -49,14 +49,19 @@ export function proxy(request: NextRequest) {
     return response;
   }
 
-  // If URL has a non-default locale prefix, use it
+  // If URL has a non-default locale prefix, use it and persist preference
   if (pathnameLocale) {
     const requestHeaders = new Headers(request.headers);
     requestHeaders.set("x-locale", pathnameLocale);
     requestHeaders.set("x-pathname", pathname);
-    return NextResponse.next({
+    const response = NextResponse.next({
       request: { headers: requestHeaders },
     });
+    response.cookies.set(LOCALE_COOKIE, pathnameLocale, {
+      path: "/",
+      maxAge: 60 * 60 * 24 * 365, // 1 year
+    });
+    return response;
   }
 
   // No locale in URL - detect from Accept-Language
diff --git a/examples/translations/next-app/proxy.ts b/examples/translations/next-app/proxy.ts
index fc44d3cce..d3755b71c 100644
--- a/examples/translations/next-app/proxy.ts
+++ b/examples/translations/next-app/proxy.ts
@@ -49,14 +49,19 @@ export function proxy(request: NextRequest) {
     return response;
   }
 
-  // If URL has a non-default locale prefix, use it
+  // If URL has a non-default locale prefix, use it and persist preference
   if (pathnameLocale) {
     const requestHeaders = new Headers(request.headers);
     requestHeaders.set("x-locale", pathnameLocale);
     requestHeaders.set("x-pathname", pathname);
-    return NextResponse.next({
+    const response = NextResponse.next({
       request: { headers: requestHeaders },
     });
+    response.cookies.set(LOCALE_COOKIE, pathnameLocale, {
+      path: "/",
+      maxAge: 60 * 60 * 24 * 365, // 1 year
+    });
+    return response;
   }
 
   // No locale in URL - detect from Accept-Language
diff --git a/packages/translations/README.md b/packages/translations/README.md
index 0a348e6a5..9f015a1fb 100644
--- a/packages/translations/README.md
+++ b/packages/translations/README.md
@@ -112,13 +112,19 @@ export function proxy(request: NextRequest) {
     return response;
   }
 
+  // If URL has a non-default locale prefix, use it and persist preference
   if (pathnameLocale) {
     const requestHeaders = new Headers(request.headers);
     requestHeaders.set("x-locale", pathnameLocale);
     requestHeaders.set("x-pathname", pathname);
-    return NextResponse.next({
+    const response = NextResponse.next({
       request: { headers: requestHeaders },
     });
+    response.cookies.set(LOCALE_COOKIE, pathnameLocale, {
+      path: "/",
+      maxAge: 60 * 60 * 24 * 365, // 1 year
+    });
+    return response;
   }
 
   const preferredLocale = getPreferredLocale(request);

From b47d2e583cd8c7023ac1251f0f303ce225d6eed1 Mon Sep 17 00:00:00 2001
From: Antoine Kingue <etorefr@gmail.com>
Date: Mon, 29 Dec 2025 11:40:07 +0100
Subject: [PATCH 21/64] =?UTF-8?q?=F0=9F=8C=90=20improve=20locale=20priorit?=
 =?UTF-8?q?y=20handling=20in=20get-preferred-locale=20function?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 apps/web/src/proxy.ts                   | 6 ++++--
 examples/translations/next-app/proxy.ts | 6 ++++--
 packages/translations/README.md         | 6 ++++--
 3 files changed, 12 insertions(+), 6 deletions(-)

diff --git a/apps/web/src/proxy.ts b/apps/web/src/proxy.ts
index 65fccb6e7..99d74804f 100644
--- a/apps/web/src/proxy.ts
+++ b/apps/web/src/proxy.ts
@@ -19,10 +19,12 @@ function getPreferredLocale(request: NextRequest): string {
   const preferred = acceptLanguage
     .split(",")
     .map((lang) => {
-      const [code, priority = "q=1"] = lang.trim().split(";");
+      const [code, priorityToken] = lang.trim().split(";");
+      const priorityMatch = priorityToken?.match(/q=([0-9.]+)/);
+      const priority = priorityMatch ? parseFloat(priorityMatch[1]) : 1.0;
       return {
         code: code.split("-")[0].toLowerCase(),
-        priority: parseFloat(priority.replace("q=", "")),
+        priority: Number.isNaN(priority) ? 1.0 : priority,
       };
     })
     .sort((a, b) => b.priority - a.priority)
diff --git a/examples/translations/next-app/proxy.ts b/examples/translations/next-app/proxy.ts
index d3755b71c..1291a8a54 100644
--- a/examples/translations/next-app/proxy.ts
+++ b/examples/translations/next-app/proxy.ts
@@ -19,10 +19,12 @@ function getPreferredLocale(request: NextRequest): string {
   const preferred = acceptLanguage
     .split(",")
     .map((lang) => {
-      const [code, priority = "q=1"] = lang.trim().split(";");
+      const [code, priorityToken] = lang.trim().split(";");
+      const priorityMatch = priorityToken?.match(/q=([0-9.]+)/);
+      const priority = priorityMatch ? parseFloat(priorityMatch[1]) : 1.0;
       return {
         code: code.split("-")[0].toLowerCase(),
-        priority: parseFloat(priority.replace("q=", "")),
+        priority: Number.isNaN(priority) ? 1.0 : priority,
       };
     })
     .sort((a, b) => b.priority - a.priority)
diff --git a/packages/translations/README.md b/packages/translations/README.md
index 9f015a1fb..0f0332a1b 100644
--- a/packages/translations/README.md
+++ b/packages/translations/README.md
@@ -83,10 +83,12 @@ function getPreferredLocale(request: NextRequest): string {
   const preferred = acceptLanguage
     .split(",")
     .map((lang) => {
-      const [code, priority = "q=1"] = lang.trim().split(";");
+      const [code, priorityToken] = lang.trim().split(";");
+      const priorityMatch = priorityToken?.match(/q=([0-9.]+)/);
+      const priority = priorityMatch ? parseFloat(priorityMatch[1]) : 1.0;
       return {
         code: code.split("-")[0].toLowerCase(),
-        priority: parseFloat(priority.replace("q=", "")),
+        priority: Number.isNaN(priority) ? 1.0 : priority,
       };
     })
     .sort((a, b) => b.priority - a.priority)

From 946e776e4dc96c9169c9f6d37ed8574602252c32 Mon Sep 17 00:00:00 2001
From: Antoine Kingue <etorefr@gmail.com>
Date: Mon, 29 Dec 2025 11:40:27 +0100
Subject: [PATCH 22/64] =?UTF-8?q?=F0=9F=8C=90=20improve=20pathname=20retri?=
 =?UTF-8?q?eval=20logic=20in=20get-pathname=20function?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 apps/web/src/lib/utils/metadata.ts | 29 ++++++++++++++++++++++++-----
 1 file changed, 24 insertions(+), 5 deletions(-)

diff --git a/apps/web/src/lib/utils/metadata.ts b/apps/web/src/lib/utils/metadata.ts
index a96d9e219..cc36f94f3 100644
--- a/apps/web/src/lib/utils/metadata.ts
+++ b/apps/web/src/lib/utils/metadata.ts
@@ -157,12 +157,31 @@ async function getPathname(): Promise<string> {
   const headersList = await headers();
   const serverUrl = siteConfig.url;
 
-  const pathname =
-    headersList.get("x-pathname") ||
-    headersList.get("x-invoke-path") ||
-    headersList.get("referer")?.replace(serverUrl, "") ||
-    "/";
+  // Try x-pathname or x-invoke-path first
+  let pathname = headersList.get("x-pathname") || headersList.get("x-invoke-path");
+
+  // Fall back to referer, but only if it matches our origin
+  if (!pathname) {
+    const referer = headersList.get("referer");
+    if (referer) {
+      try {
+        const refererUrl = new URL(referer);
+        const serverOrigin = new URL(serverUrl).origin;
+        if (refererUrl.origin === serverOrigin) {
+          pathname = refererUrl.pathname;
+        }
+      } catch {
+        // Invalid URL, ignore referer
+      }
+    }
+  }
+
+  // Default to root
+  if (!pathname) {
+    pathname = "/";
+  }
 
+  // Remove query string and ensure leading slash
   const cleanPath = pathname.split("?")[0] || "/";
   return cleanPath.startsWith("/") ? cleanPath : `/${cleanPath}`;
 }

From 0e9265e232151a018c33bb099e616b6d40a4c836 Mon Sep 17 00:00:00 2001
From: Antoine Kingue <etorefr@gmail.com>
Date: Mon, 29 Dec 2025 11:42:06 +0100
Subject: [PATCH 23/64] =?UTF-8?q?=F0=9F=8C=90=20update=20pathname=20handli?=
 =?UTF-8?q?ng=20to=20use=20slice=20method=20for=20locale=20prefix=20remova?=
 =?UTF-8?q?l?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 apps/web/src/proxy.ts                   | 2 +-
 examples/translations/next-app/proxy.ts | 2 +-
 packages/translations/README.md         | 2 +-
 3 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/apps/web/src/proxy.ts b/apps/web/src/proxy.ts
index 99d74804f..c5fe77188 100644
--- a/apps/web/src/proxy.ts
+++ b/apps/web/src/proxy.ts
@@ -42,7 +42,7 @@ export function proxy(request: NextRequest) {
 
   // If URL has the default locale prefix, redirect to remove it and set cookie
   if (pathnameLocale === defaultLocale) {
-    const newPathname = pathname.replace(`/${defaultLocale}`, "") || "/";
+    const newPathname = pathname.slice(`/${defaultLocale}`.length) || "/";
     const response = NextResponse.redirect(new URL(newPathname, request.url));
     response.cookies.set(LOCALE_COOKIE, defaultLocale, {
       path: "/",
diff --git a/examples/translations/next-app/proxy.ts b/examples/translations/next-app/proxy.ts
index 1291a8a54..8fceb1cf6 100644
--- a/examples/translations/next-app/proxy.ts
+++ b/examples/translations/next-app/proxy.ts
@@ -42,7 +42,7 @@ export function proxy(request: NextRequest) {
 
   // If URL has the default locale prefix, redirect to remove it and set cookie
   if (pathnameLocale === defaultLocale) {
-    const newPathname = pathname.replace(`/${defaultLocale}`, "") || "/";
+    const newPathname = pathname.slice(`/${defaultLocale}`.length) || "/";
     const response = NextResponse.redirect(new URL(newPathname, request.url));
     response.cookies.set(LOCALE_COOKIE, defaultLocale, {
       path: "/",
diff --git a/packages/translations/README.md b/packages/translations/README.md
index 0f0332a1b..c1168f40e 100644
--- a/packages/translations/README.md
+++ b/packages/translations/README.md
@@ -105,7 +105,7 @@ export function proxy(request: NextRequest) {
   );
 
   if (pathnameLocale === defaultLocale) {
-    const newPathname = pathname.replace(`/${defaultLocale}`, "") || "/";
+    const newPathname = pathname.slice(`/${defaultLocale}`.length) || "/";
     const response = NextResponse.redirect(new URL(newPathname, request.url));
     response.cookies.set(LOCALE_COOKIE, defaultLocale, {
       path: "/",

From f21adb6fc99c397faee143c0c867a27c5e0b010f Mon Sep 17 00:00:00 2001
From: Antoine Kingue <etorefr@gmail.com>
Date: Mon, 29 Dec 2025 11:59:08 +0100
Subject: [PATCH 24/64] =?UTF-8?q?=E2=99=BB=EF=B8=8F=20refactor=20organizat?=
 =?UTF-8?q?ion=20url=20handling=20to=20use=20site=20config=20for=20consist?=
 =?UTF-8?q?ency=20across=20components?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 apps/web/env.ts                                   |  5 ++---
 apps/web/src/app/[locale]/agency/[city]/page.tsx  | 15 ++++++++-------
 apps/web/src/app/[locale]/agency/page.tsx         |  5 +++--
 apps/web/src/components/json-ld/constants.ts      |  6 ++++--
 .../components/json-ld/localbusiness-schema.tsx   |  4 ++--
 .../components/json-ld/organization-schema.tsx    |  2 +-
 apps/web/src/lib/utils/metadata.ts                |  2 +-
 .../screens/marketing/projects/details/index.tsx  |  4 ++--
 8 files changed, 23 insertions(+), 20 deletions(-)

diff --git a/apps/web/env.ts b/apps/web/env.ts
index b3a34e9c8..80ac42f0e 100644
--- a/apps/web/env.ts
+++ b/apps/web/env.ts
@@ -9,11 +9,10 @@ export const env = createEnv({
     RESEND_API_KEY: z.string().optional(),
   },
   client: {
-    NEXT_PUBLIC_APP_URL: z.string().optional(),
+    NEXT_PUBLIC_APP_URL: z.string().optional().default("https://onruntime.com"),
   },
   runtimeEnv: {
-    NEXT_PUBLIC_APP_URL:
-      process.env.NEXT_PUBLIC_APP_URL || "https://onruntime.com",
+    NEXT_PUBLIC_APP_URL: process.env.NEXT_PUBLIC_APP_URL,
     NODE_ENV: process.env.NODE_ENV,
     PORT: process.env.PORT,
     JOIN_API_KEY: process.env.JOIN_API_KEY,
diff --git a/apps/web/src/app/[locale]/agency/[city]/page.tsx b/apps/web/src/app/[locale]/agency/[city]/page.tsx
index 56f74f80e..9c69f7fb3 100644
--- a/apps/web/src/app/[locale]/agency/[city]/page.tsx
+++ b/apps/web/src/app/[locale]/agency/[city]/page.tsx
@@ -11,6 +11,7 @@ import { getAgencyById } from '@/constants/agencies';
 import { LocalBusinessSchema } from '@/components/json-ld/localbusiness-schema';
 import { BreadcrumbSchema } from '@/components/json-ld/breadcrumb-schema';
 import { FAQPageSchema } from '@/components/json-ld/faqpage-schema';
+import { ORGANIZATION_DATA } from '@/components/json-ld/constants';
 import FAQSection from '@/components/marketing/services/faq-section';
 import Routes from '@/constants/routes';
 
@@ -74,29 +75,29 @@ export default async function CityPage({ params }: AgencyPageProps) {
   return (
     <main className="min-h-screen pt-32 pb-16 w-full">
       
-      <LocalBusinessSchema 
+      <LocalBusinessSchema
         type="ProfessionalService"
-        id={`https://onruntime.com/agency/${agency.id}#service`}
+        id={`${ORGANIZATION_DATA.url}${Routes.agency.city(agency.id)}#service`}
         description={agency.description}
         geo={agency.geo}
       />
-      
-      <BreadcrumbSchema 
+
+      <BreadcrumbSchema
         itemListElements={[
           {
             position: 1,
             name: "Accueil",
-            item: "https://onruntime.com/"
+            item: `${ORGANIZATION_DATA.url}/`
           },
           {
             position: 2,
             name: "Expertise locale",
-            item: "https://onruntime.com/agency"
+            item: `${ORGANIZATION_DATA.url}${Routes.agency.root}`
           },
           {
             position: 3,
             name: `${agency.name}`,
-            item: `https://onruntime.com/agency/${agency.id}`
+            item: `${ORGANIZATION_DATA.url}${Routes.agency.city(agency.id)}`
           }
         ]}
       />
diff --git a/apps/web/src/app/[locale]/agency/page.tsx b/apps/web/src/app/[locale]/agency/page.tsx
index e5d897c32..482f7a885 100644
--- a/apps/web/src/app/[locale]/agency/page.tsx
+++ b/apps/web/src/app/[locale]/agency/page.tsx
@@ -9,6 +9,7 @@ import { constructMetadata } from '@/lib/utils/metadata';
 import FranceMap from '@/components/marketing/agency/france-map';
 import { getMajorAgencies } from '@/constants/agencies';
 import { OrganizationSchema } from '@/components/json-ld/organization-schema';
+import { ORGANIZATION_DATA } from '@/components/json-ld/constants';
 
 export async function generateMetadata() {
   return constructMetadata({
@@ -23,9 +24,9 @@ export default function AgencyLandingPage() {
   
   return (
     <main className="min-h-screen pt-32 pb-16 sm:w-auto w-full">
-      <OrganizationSchema 
+      <OrganizationSchema
         type="DigitalAgency"
-        id="https://onruntime.com/agency#organization"
+        id={`${ORGANIZATION_DATA.url}${Routes.agency.root}#organization`}
       />
       
       <div className="px-4 md:px-0 max-w-5xl mx-auto space-y-24">
diff --git a/apps/web/src/components/json-ld/constants.ts b/apps/web/src/components/json-ld/constants.ts
index 7d44e7064..e1a803f4c 100644
--- a/apps/web/src/components/json-ld/constants.ts
+++ b/apps/web/src/components/json-ld/constants.ts
@@ -1,8 +1,10 @@
+import { siteConfig } from "@/lib/utils/metadata";
+
 export const ORGANIZATION_DATA = {
   name: "onRuntime Studio",
   legalName: "onRuntime Studio",
-  url: "https://onruntime.com",
-  logo: "https://onruntime.com/android-chrome-512x512.png",
+  url: siteConfig.url,
+  logo: `${siteConfig.url}/android-chrome-512x512.png`,
   address: {
     streetAddress: "La Combe",
     addressLocality: "La Roche-de-Rame",
diff --git a/apps/web/src/components/json-ld/localbusiness-schema.tsx b/apps/web/src/components/json-ld/localbusiness-schema.tsx
index abfd20636..58734dbb0 100644
--- a/apps/web/src/components/json-ld/localbusiness-schema.tsx
+++ b/apps/web/src/components/json-ld/localbusiness-schema.tsx
@@ -25,13 +25,13 @@ type LocalBusinessSchemaProps = {
 export const LocalBusinessSchema: React.FC<LocalBusinessSchemaProps> = ({
   useAppDir = true,
   type = "DigitalAgency",
-  id = "https://onruntime.com/#localbusiness",
+  id = `${ORGANIZATION_DATA.url}/#localbusiness`,
   description = "Agence digitale spécialisée en développement web, mobile et design UI/UX. Notre équipe d'experts transforme vos idées en solutions digitales performantes.",
   geo = {
     latitude: "44.7506",
     longitude: "6.5772",
   },
-  images = ["https://onruntime.com/static/images/onruntime-team.jpg"],
+  images = [`${ORGANIZATION_DATA.url}/static/images/onruntime-team.jpg`],
   priceRange = "€€",
   openingHours = [
     {
diff --git a/apps/web/src/components/json-ld/organization-schema.tsx b/apps/web/src/components/json-ld/organization-schema.tsx
index 7f58902b4..b067e9fed 100644
--- a/apps/web/src/components/json-ld/organization-schema.tsx
+++ b/apps/web/src/components/json-ld/organization-schema.tsx
@@ -12,7 +12,7 @@ type OrganizationSchemaProps = {
 export const OrganizationSchema: React.FC<OrganizationSchemaProps> = ({
   useAppDir = true,
   type = "NonProfit",
-  id = "https://onruntime.com/#organization",
+  id = `${ORGANIZATION_DATA.url}/#organization`,
   customData = {},
 }) => {
   const data = { ...ORGANIZATION_DATA, ...customData };
diff --git a/apps/web/src/lib/utils/metadata.ts b/apps/web/src/lib/utils/metadata.ts
index cc36f94f3..f59fa5561 100644
--- a/apps/web/src/lib/utils/metadata.ts
+++ b/apps/web/src/lib/utils/metadata.ts
@@ -19,7 +19,7 @@ function toOgLocale(locale: string): string {
 export const siteConfig = {
   name: "onRuntime Studio",
   description: "Agence digitale spécialisée en développement web, mobile et design UI/UX. Notre équipe d'experts transforme vos idées en solutions digitales performantes.",
-  url: env.NEXT_PUBLIC_APP_URL || "https://onruntime.com",
+  url: env.NEXT_PUBLIC_APP_URL,
   ogImage: "/og.jpg", 
   links: {
     discord: "https://discord.gg/ucX9c5yXmX",
diff --git a/apps/web/src/screens/marketing/projects/details/index.tsx b/apps/web/src/screens/marketing/projects/details/index.tsx
index b36c27305..2e4e04255 100644
--- a/apps/web/src/screens/marketing/projects/details/index.tsx
+++ b/apps/web/src/screens/marketing/projects/details/index.tsx
@@ -18,7 +18,7 @@ import {
   User,
 } from "lucide-react";
 import TeamMembers from "@/constants/team-members";
-import { env } from "process";
+import { siteConfig } from "@/lib/utils/metadata";
 import { getTranslation } from "@/lib/translations.server";
 
 import { MemberWebsiteButton } from "@/components/marketing/projects/details/member-website-button";
@@ -181,7 +181,7 @@ const ProjectPage: React.FC<ProjectPageProps> = async ({ project }) => {
             height={750}
             imageSrc={project.showcaseUrl}
             url={
-              new URL(project.website || env.NEXT_PUBLIC_APP_URL || "").hostname
+              new URL(project.website || siteConfig.url).hostname
             }
           />
         </div>

From 06ddde50ac4711862d151f9213c1e05f8a6a342e Mon Sep 17 00:00:00 2001
From: Antoine Kingue <etorefr@gmail.com>
Date: Mon, 29 Dec 2025 12:33:01 +0100
Subject: [PATCH 25/64] =?UTF-8?q?=F0=9F=8C=90=20fix=20typos=20in=20job=20d?=
 =?UTF-8?q?etails=20localization=20for=20improved=20clarity?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../locales/fr/components/marketing/careers/job-details.json  | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/apps/web/src/locales/fr/components/marketing/careers/job-details.json b/apps/web/src/locales/fr/components/marketing/careers/job-details.json
index da28898b0..3dcff10db 100644
--- a/apps/web/src/locales/fr/components/marketing/careers/job-details.json
+++ b/apps/web/src/locales/fr/components/marketing/careers/job-details.json
@@ -2,8 +2,8 @@
   "back": "Retour aux offres",
   "share": {
     "button": "Partager",
-    "text": "Decouvrez cette opportunite: {jobTitle} chez onRuntime Studio",
-    "copied": "Lien copie dans le presse-papier!"
+    "text": "Découvrez cette opportunité : {jobTitle} chez onRuntime Studio",
+    "copied": "Lien copié dans le presse-papier !"
   },
   "apply": "Postuler maintenant",
   "published": "Publié le",

From 62cd294b28a0486dda4894a9bf8f4c7ea8804f85 Mon Sep 17 00:00:00 2001
From: Antoine Kingue <etorefr@gmail.com>
Date: Mon, 29 Dec 2025 12:34:11 +0100
Subject: [PATCH 26/64] =?UTF-8?q?=F0=9F=8C=90=20fix=20typos=20in=20french?=
 =?UTF-8?q?=20localization=20for=20careers=20and=20projects=20pages?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 apps/web/src/locales/fr/app/careers/[id]/page.json  | 4 ++--
 apps/web/src/locales/fr/app/projects/[id]/page.json | 6 +++---
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/apps/web/src/locales/fr/app/careers/[id]/page.json b/apps/web/src/locales/fr/app/careers/[id]/page.json
index df8fcb636..c4ec02f93 100644
--- a/apps/web/src/locales/fr/app/careers/[id]/page.json
+++ b/apps/web/src/locales/fr/app/careers/[id]/page.json
@@ -4,7 +4,7 @@
       "title": "Offre d'emploi non trouvée",
       "description": "Cette offre d'emploi n'existe pas ou n'est plus disponible."
     },
-    "title": "{jobTitle} | Carrieres",
-    "description": "Rejoignez onRuntime Studio en tant que {jobTitle}. Decouvrez cette opportunite de carriere et postulez des maintenant."
+    "title": "{jobTitle} | Carrières",
+    "description": "Rejoignez onRuntime Studio en tant que {jobTitle}. Découvrez cette opportunité de carrière et postulez dès maintenant."
   }
 }
diff --git a/apps/web/src/locales/fr/app/projects/[id]/page.json b/apps/web/src/locales/fr/app/projects/[id]/page.json
index 58c16f5e1..319f944c0 100644
--- a/apps/web/src/locales/fr/app/projects/[id]/page.json
+++ b/apps/web/src/locales/fr/app/projects/[id]/page.json
@@ -1,10 +1,10 @@
 {
   "metadata": {
     "not-found": {
-      "title": "Projet non trouve",
+      "title": "Projet non trouvé",
       "description": "Ce projet n'existe pas."
     },
-    "title": "Etude de cas : {name} - Projet digital",
-    "description": "Decouvrez comment notre agence a concu et developpe {name}. {shortDescription}"
+    "title": "Étude de cas : {name} - Projet digital",
+    "description": "Découvrez comment notre agence a conçu et développé {name}. {shortDescription}"
   }
 }

From 4546bc9fc0fe75c1640a64aa12d12dcbd0853b16 Mon Sep 17 00:00:00 2001
From: Antoine Kingue <etorefr@gmail.com>
Date: Mon, 29 Dec 2025 12:48:17 +0100
Subject: [PATCH 27/64] =?UTF-8?q?=F0=9F=8C=90=20update=20project=20metrics?=
 =?UTF-8?q?=20to=20include=20values=20for=20improved=20clarity=20and=20loc?=
 =?UTF-8?q?alization?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 apps/web/src/constants/projects/shadowbonus.ts              | 4 ++--
 .../locales/en/constants/projects/dark-theme-instagram.json | 6 +++---
 .../src/locales/en/constants/projects/expatfacilities.json  | 6 +++---
 apps/web/src/locales/en/constants/projects/kartrak.json     | 6 +++---
 apps/web/src/locales/en/constants/projects/kitchn.json      | 6 +++---
 apps/web/src/locales/en/constants/projects/shadowbonus.json | 6 +++---
 apps/web/src/locales/en/constants/projects/tonightpass.json | 6 +++---
 .../locales/fr/constants/projects/dark-theme-instagram.json | 6 +++---
 .../src/locales/fr/constants/projects/expatfacilities.json  | 6 +++---
 apps/web/src/locales/fr/constants/projects/kartrak.json     | 6 +++---
 apps/web/src/locales/fr/constants/projects/kitchn.json      | 6 +++---
 apps/web/src/locales/fr/constants/projects/shadowbonus.json | 6 +++---
 apps/web/src/locales/fr/constants/projects/tonightpass.json | 6 +++---
 apps/web/src/screens/marketing/projects/details/index.tsx   | 2 +-
 14 files changed, 39 insertions(+), 39 deletions(-)

diff --git a/apps/web/src/constants/projects/shadowbonus.ts b/apps/web/src/constants/projects/shadowbonus.ts
index a0fa7689a..b89f77625 100644
--- a/apps/web/src/constants/projects/shadowbonus.ts
+++ b/apps/web/src/constants/projects/shadowbonus.ts
@@ -28,8 +28,8 @@ export const shadowbonusProject: Project = {
 
   metrics: [
     { key: "weekly-visits", value: "1500+" },
-    { key: "dev-time", value: "2 mois" },
-    { key: "team-size", value: "3 pers." },
+    { key: "dev-time", value: "2" },
+    { key: "team-size", value: "3" },
   ],
 
   team: [
diff --git a/apps/web/src/locales/en/constants/projects/dark-theme-instagram.json b/apps/web/src/locales/en/constants/projects/dark-theme-instagram.json
index 500e53db0..388494a20 100644
--- a/apps/web/src/locales/en/constants/projects/dark-theme-instagram.json
+++ b/apps/web/src/locales/en/constants/projects/dark-theme-instagram.json
@@ -22,9 +22,9 @@
     "css": { "description": "Theme customization" }
   },
   "metrics": {
-    "users": { "label": "Users", "description": "Active users" },
-    "installs": { "label": "Installs", "description": "Total installations" },
-    "open-source": { "label": "Open Source", "description": "Public source code" }
+    "users": { "value": "52k+", "label": "Users", "description": "Active users" },
+    "installs": { "value": "82k+", "label": "Installs", "description": "Total installations" },
+    "open-source": { "value": "100%", "label": "Open Source", "description": "Public source code" }
   },
   "screenshots": {
     "dark-interface": { "caption": "Instagram interface in dark mode" }
diff --git a/apps/web/src/locales/en/constants/projects/expatfacilities.json b/apps/web/src/locales/en/constants/projects/expatfacilities.json
index 96d61fb7e..745cab43b 100644
--- a/apps/web/src/locales/en/constants/projects/expatfacilities.json
+++ b/apps/web/src/locales/en/constants/projects/expatfacilities.json
@@ -39,9 +39,9 @@
     "styled-components": { "description": "Styling and theming" }
   },
   "metrics": {
-    "countries": { "label": "Countries covered", "description": "Available expatriation destinations" },
-    "ambassadors": { "label": "Ambassadors", "description": "Student ambassadors worldwide" },
-    "users": { "label": "Users", "description": "Student platform users" }
+    "countries": { "value": "70+", "label": "Countries covered", "description": "Available expatriation destinations" },
+    "ambassadors": { "value": "300+", "label": "Ambassadors", "description": "Student ambassadors worldwide" },
+    "users": { "value": "2000+", "label": "Users", "description": "Student platform users" }
   },
   "screenshots": {
     "redesign": { "caption": "Platform redesign" },
diff --git a/apps/web/src/locales/en/constants/projects/kartrak.json b/apps/web/src/locales/en/constants/projects/kartrak.json
index bebdedf04..b21f3f4f5 100644
--- a/apps/web/src/locales/en/constants/projects/kartrak.json
+++ b/apps/web/src/locales/en/constants/projects/kartrak.json
@@ -27,9 +27,9 @@
     "chrome-api": { "description": "Browser integration" }
   },
   "metrics": {
-    "sites-analyzed": { "label": "Sites analyzed", "description": "Compatible with all websites" },
-    "open-source": { "label": "Open Source", "description": "Public source code" },
-    "confidential": { "label": "Confidential", "description": "No user data collected" }
+    "sites-analyzed": { "value": "∞", "label": "Sites analyzed", "description": "Compatible with all websites" },
+    "open-source": { "value": "100%", "label": "Open Source", "description": "Public source code" },
+    "confidential": { "value": "100%", "label": "Confidential", "description": "No user data collected" }
   },
   "screenshots": {
     "dashboard": { "caption": "Main dashboard" },
diff --git a/apps/web/src/locales/en/constants/projects/kitchn.json b/apps/web/src/locales/en/constants/projects/kitchn.json
index 9268f25b9..f9721d355 100644
--- a/apps/web/src/locales/en/constants/projects/kitchn.json
+++ b/apps/web/src/locales/en/constants/projects/kitchn.json
@@ -28,9 +28,9 @@
     "storybook": { "description": "Interactive documentation" }
   },
   "metrics": {
-    "components": { "label": "Components", "description": "Reusable UI components" },
-    "downloads": { "label": "Downloads", "description": "Monthly downloads" },
-    "github-stars": { "label": "GitHub Stars", "description": "Stars on GitHub" }
+    "components": { "value": "35+", "label": "Components", "description": "Reusable UI components" },
+    "downloads": { "value": "20k+", "label": "Downloads", "description": "Monthly downloads" },
+    "github-stars": { "value": "50+", "label": "GitHub Stars", "description": "Stars on GitHub" }
   },
   "screenshots": {
     "responsive": { "caption": "Responsive components" },
diff --git a/apps/web/src/locales/en/constants/projects/shadowbonus.json b/apps/web/src/locales/en/constants/projects/shadowbonus.json
index 581d4a6e5..d2789b977 100644
--- a/apps/web/src/locales/en/constants/projects/shadowbonus.json
+++ b/apps/web/src/locales/en/constants/projects/shadowbonus.json
@@ -26,9 +26,9 @@
     "cloudflare": { "description": "Hosting and continuous deployment" }
   },
   "metrics": {
-    "weekly-visits": { "label": "Weekly visits", "description": "At launch in July 2021" },
-    "dev-time": { "label": "Development time", "description": "Fast and efficient delivery" },
-    "team-size": { "label": "Team", "description": "Small and agile team" }
+    "weekly-visits": { "value": "1500+", "label": "Weekly visits", "description": "At launch in July 2021" },
+    "dev-time": { "value": "2 months", "label": "Development time", "description": "Fast and efficient delivery" },
+    "team-size": { "value": "3 people", "label": "Team", "description": "Small and agile team" }
   },
   "screenshots": {
     "homepage": { "caption": "Homepage showcasing partner offers" },
diff --git a/apps/web/src/locales/en/constants/projects/tonightpass.json b/apps/web/src/locales/en/constants/projects/tonightpass.json
index d6c2758a5..7b562d08b 100644
--- a/apps/web/src/locales/en/constants/projects/tonightpass.json
+++ b/apps/web/src/locales/en/constants/projects/tonightpass.json
@@ -22,9 +22,9 @@
     "mongodb": { "description": "Main database" }
   },
   "metrics": {
-    "time-saved": { "label": "Time saved", "description": "On average per event search" },
-    "coverage": { "label": "Coverage", "description": "Available throughout France" },
-    "ease": { "label": "Ease", "description": "To book any event" }
+    "time-saved": { "value": "45min", "label": "Time saved", "description": "On average per event search" },
+    "coverage": { "value": "100%", "label": "Coverage", "description": "Available throughout France" },
+    "ease": { "value": "1 click", "label": "Ease", "description": "To book any event" }
   },
   "screenshots": {},
   "challenges": {
diff --git a/apps/web/src/locales/fr/constants/projects/dark-theme-instagram.json b/apps/web/src/locales/fr/constants/projects/dark-theme-instagram.json
index e81347024..ca787984d 100644
--- a/apps/web/src/locales/fr/constants/projects/dark-theme-instagram.json
+++ b/apps/web/src/locales/fr/constants/projects/dark-theme-instagram.json
@@ -22,9 +22,9 @@
     "css": { "description": "Personnalisation du thème" }
   },
   "metrics": {
-    "users": { "label": "Utilisateurs", "description": "Utilisateurs actifs" },
-    "installs": { "label": "Installations", "description": "Total d'installations" },
-    "open-source": { "label": "Open Source", "description": "Code source public" }
+    "users": { "value": "52k+", "label": "Utilisateurs", "description": "Utilisateurs actifs" },
+    "installs": { "value": "82k+", "label": "Installations", "description": "Total d'installations" },
+    "open-source": { "value": "100%", "label": "Open Source", "description": "Code source public" }
   },
   "screenshots": {
     "dark-interface": { "caption": "Interface Instagram en mode sombre" }
diff --git a/apps/web/src/locales/fr/constants/projects/expatfacilities.json b/apps/web/src/locales/fr/constants/projects/expatfacilities.json
index b8b197ae2..293818435 100644
--- a/apps/web/src/locales/fr/constants/projects/expatfacilities.json
+++ b/apps/web/src/locales/fr/constants/projects/expatfacilities.json
@@ -39,9 +39,9 @@
     "styled-components": { "description": "Styling et thématisation" }
   },
   "metrics": {
-    "countries": { "label": "Pays couverts", "description": "Destinations d'expatriation disponibles" },
-    "ambassadors": { "label": "Ambassadeurs", "description": "Étudiants ambassadeurs dans le monde" },
-    "users": { "label": "Utilisateurs", "description": "Étudiants utilisateurs de la plateforme" }
+    "countries": { "value": "70+", "label": "Pays couverts", "description": "Destinations d'expatriation disponibles" },
+    "ambassadors": { "value": "300+", "label": "Ambassadeurs", "description": "Étudiants ambassadeurs dans le monde" },
+    "users": { "value": "2000+", "label": "Utilisateurs", "description": "Étudiants utilisateurs de la plateforme" }
   },
   "screenshots": {
     "redesign": { "caption": "Redesign de la plateforme" },
diff --git a/apps/web/src/locales/fr/constants/projects/kartrak.json b/apps/web/src/locales/fr/constants/projects/kartrak.json
index f14a08abc..8a1220331 100644
--- a/apps/web/src/locales/fr/constants/projects/kartrak.json
+++ b/apps/web/src/locales/fr/constants/projects/kartrak.json
@@ -27,9 +27,9 @@
     "chrome-api": { "description": "Intégration avec le navigateur" }
   },
   "metrics": {
-    "sites-analyzed": { "label": "Sites analysés", "description": "Compatible avec tous les sites web" },
-    "open-source": { "label": "Open Source", "description": "Code source public" },
-    "confidential": { "label": "Confidentiel", "description": "Aucune donnée utilisateur collectée" }
+    "sites-analyzed": { "value": "∞", "label": "Sites analysés", "description": "Compatible avec tous les sites web" },
+    "open-source": { "value": "100%", "label": "Open Source", "description": "Code source public" },
+    "confidential": { "value": "100%", "label": "Confidentiel", "description": "Aucune donnée utilisateur collectée" }
   },
   "screenshots": {
     "dashboard": { "caption": "Dashboard principal" },
diff --git a/apps/web/src/locales/fr/constants/projects/kitchn.json b/apps/web/src/locales/fr/constants/projects/kitchn.json
index 8859009ab..d5fdaab8d 100644
--- a/apps/web/src/locales/fr/constants/projects/kitchn.json
+++ b/apps/web/src/locales/fr/constants/projects/kitchn.json
@@ -28,9 +28,9 @@
     "storybook": { "description": "Documentation interactive" }
   },
   "metrics": {
-    "components": { "label": "Composants", "description": "Composants UI réutilisables" },
-    "downloads": { "label": "Téléchargements", "description": "Téléchargements mensuels" },
-    "github-stars": { "label": "GitHub Stars", "description": "Stars sur GitHub" }
+    "components": { "value": "35+", "label": "Composants", "description": "Composants UI réutilisables" },
+    "downloads": { "value": "20k+", "label": "Téléchargements", "description": "Téléchargements mensuels" },
+    "github-stars": { "value": "50+", "label": "GitHub Stars", "description": "Stars sur GitHub" }
   },
   "screenshots": {
     "responsive": { "caption": "Composants responsive" },
diff --git a/apps/web/src/locales/fr/constants/projects/shadowbonus.json b/apps/web/src/locales/fr/constants/projects/shadowbonus.json
index 39c784a7b..58d03873b 100644
--- a/apps/web/src/locales/fr/constants/projects/shadowbonus.json
+++ b/apps/web/src/locales/fr/constants/projects/shadowbonus.json
@@ -26,9 +26,9 @@
     "cloudflare": { "description": "Hébergement et déploiement continu" }
   },
   "metrics": {
-    "weekly-visits": { "label": "Visites hebdomadaires", "description": "Au lancement en juillet 2021" },
-    "dev-time": { "label": "Temps de développement", "description": "Livraison rapide et efficace" },
-    "team-size": { "label": "Équipe", "description": "Équipe réduite et agile" }
+    "weekly-visits": { "value": "1500+", "label": "Visites hebdomadaires", "description": "Au lancement en juillet 2021" },
+    "dev-time": { "value": "2 mois", "label": "Temps de développement", "description": "Livraison rapide et efficace" },
+    "team-size": { "value": "3 pers.", "label": "Équipe", "description": "Équipe réduite et agile" }
   },
   "screenshots": {
     "homepage": { "caption": "Page d'accueil présentant les offres partenaires" },
diff --git a/apps/web/src/locales/fr/constants/projects/tonightpass.json b/apps/web/src/locales/fr/constants/projects/tonightpass.json
index 3779e1550..b700e9516 100644
--- a/apps/web/src/locales/fr/constants/projects/tonightpass.json
+++ b/apps/web/src/locales/fr/constants/projects/tonightpass.json
@@ -22,9 +22,9 @@
     "mongodb": { "description": "Base de données principale" }
   },
   "metrics": {
-    "time-saved": { "label": "Temps gagné", "description": "En moyenne par recherche d'événement" },
-    "coverage": { "label": "Couverture", "description": "Disponible partout en France" },
-    "ease": { "label": "Facilité", "description": "Pour réserver n'importe quel événement" }
+    "time-saved": { "value": "45min", "label": "Temps gagné", "description": "En moyenne par recherche d'événement" },
+    "coverage": { "value": "100%", "label": "Couverture", "description": "Disponible partout en France" },
+    "ease": { "value": "1 clic", "label": "Facilité", "description": "Pour réserver n'importe quel événement" }
   },
   "screenshots": {},
   "challenges": {
diff --git a/apps/web/src/screens/marketing/projects/details/index.tsx b/apps/web/src/screens/marketing/projects/details/index.tsx
index 2e4e04255..3a15c873c 100644
--- a/apps/web/src/screens/marketing/projects/details/index.tsx
+++ b/apps/web/src/screens/marketing/projects/details/index.tsx
@@ -282,7 +282,7 @@ const ProjectPage: React.FC<ProjectPageProps> = async ({ project }) => {
               {project.metrics.map((metric) => (
                 <div key={metric.key} className="text-center space-y-2">
                   <p className="text-4xl font-semibold text-foreground">
-                    {metric.value}
+                    {tProject(`metrics.${metric.key}.value`)}
                   </p>
                   <p className="text-sm text-muted-foreground">
                     {tProject(`metrics.${metric.key}.label`)}

From c6ba38eded80c4b930cf318793b919695dac6927 Mon Sep 17 00:00:00 2001
From: Antoine Kingue <etorefr@gmail.com>
Date: Mon, 29 Dec 2025 12:48:27 +0100
Subject: [PATCH 28/64] =?UTF-8?q?=F0=9F=8C=90=20update=20readme=20to=20cla?=
 =?UTF-8?q?rify=20translation=20practices=20and=20avoid=20fallbacks=20in?=
 =?UTF-8?q?=20code?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 apps/web/src/locales/README.md | 8 ++++++++
 1 file changed, 8 insertions(+)

diff --git a/apps/web/src/locales/README.md b/apps/web/src/locales/README.md
index dcb7220d3..d4d7b1f0a 100644
--- a/apps/web/src/locales/README.md
+++ b/apps/web/src/locales/README.md
@@ -91,3 +91,11 @@ export default async function ProjectPage({ params }: { params: Promise<{ id: st
   ```
 - HTML is supported with `dangerouslySetInnerHTML`: `"Visit <strong>Paris</strong>"`
 - Avoid title case in translations: `"Our services"` (not `"Our Services"`)
+- Never use fallbacks in code: all translations must exist in all locale files
+  ```tsx
+  // ✅ Good - translation exists in all locales
+  {t("metrics.dev-time.value")}
+
+  // ❌ Bad - fallback masks missing translations
+  {t("metrics.dev-time.value") || metric.value}
+  ```

From 2882992de8992511135735ce1c6117aa2445806e Mon Sep 17 00:00:00 2001
From: Antoine Kingue <etorefr@gmail.com>
Date: Mon, 29 Dec 2025 16:33:25 +0100
Subject: [PATCH 29/64] =?UTF-8?q?=E2=99=BB=EF=B8=8F=20refactor=20site=20co?=
 =?UTF-8?q?nfiguration=20to=20a=20dedicated=20file=20and=20update=20import?=
 =?UTF-8?q?s=20for=20consistency?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 apps/web/src/app/api/og/route.tsx                |  2 +-
 apps/web/src/components/json-ld/constants.ts     |  2 +-
 apps/web/src/lib/utils/metadata.ts               | 16 +---------------
 apps/web/src/lib/utils/site-config.ts            | 15 +++++++++++++++
 .../screens/marketing/projects/details/index.tsx |  2 +-
 5 files changed, 19 insertions(+), 18 deletions(-)
 create mode 100644 apps/web/src/lib/utils/site-config.ts

diff --git a/apps/web/src/app/api/og/route.tsx b/apps/web/src/app/api/og/route.tsx
index c331eb0c2..e7191d05d 100644
--- a/apps/web/src/app/api/og/route.tsx
+++ b/apps/web/src/app/api/og/route.tsx
@@ -1,7 +1,7 @@
 
 import { ImageResponse } from "@vercel/og";
 import { NextRequest } from "next/server";
-import { siteConfig } from "@/lib/utils/metadata";
+import { siteConfig } from "@/lib/utils/site-config";
 import { OnRuntimeWordMark } from "@/logos/components";
 
 export const runtime = "edge";
diff --git a/apps/web/src/components/json-ld/constants.ts b/apps/web/src/components/json-ld/constants.ts
index e1a803f4c..582ded832 100644
--- a/apps/web/src/components/json-ld/constants.ts
+++ b/apps/web/src/components/json-ld/constants.ts
@@ -1,4 +1,4 @@
-import { siteConfig } from "@/lib/utils/metadata";
+import { siteConfig } from "@/lib/utils/site-config";
 
 export const ORGANIZATION_DATA = {
   name: "onRuntime Studio",
diff --git a/apps/web/src/lib/utils/metadata.ts b/apps/web/src/lib/utils/metadata.ts
index f59fa5561..f8681617a 100644
--- a/apps/web/src/lib/utils/metadata.ts
+++ b/apps/web/src/lib/utils/metadata.ts
@@ -1,8 +1,8 @@
 import { Metadata } from "next";
 import { headers } from "next/headers";
 
-import { env } from "@/../env";
 import { locales, defaultLocale } from "@/lib/translations";
+import { siteConfig } from "@/lib/utils/site-config";
 
 /**
  * Convert locale code to OpenGraph locale format
@@ -16,20 +16,6 @@ function toOgLocale(locale: string): string {
   return `${locale}_${country}`;
 }
 
-export const siteConfig = {
-  name: "onRuntime Studio",
-  description: "Agence digitale spécialisée en développement web, mobile et design UI/UX. Notre équipe d'experts transforme vos idées en solutions digitales performantes.",
-  url: env.NEXT_PUBLIC_APP_URL,
-  ogImage: "/og.jpg", 
-  links: {
-    discord: "https://discord.gg/ucX9c5yXmX",
-    instagram: "https://www.instagram.com/onruntime/",
-    linkedin: "https://www.linkedin.com/company/onruntime",
-    github: "https://github.com/onruntime",
-    twitter: "https://twitter.com/onruntime",
-  },
-};
-
 export type OGImageType = 'default' | 'project' | 'service' | 'blog' | 'team' | 'legal';
 
 export function getOGImageUrl({
diff --git a/apps/web/src/lib/utils/site-config.ts b/apps/web/src/lib/utils/site-config.ts
new file mode 100644
index 000000000..fd6a84997
--- /dev/null
+++ b/apps/web/src/lib/utils/site-config.ts
@@ -0,0 +1,15 @@
+import { env } from "env";
+
+export const siteConfig = {
+  name: "onRuntime Studio",
+  description: "Agence digitale spécialisée en développement web, mobile et design UI/UX. Notre équipe d'experts transforme vos idées en solutions digitales performantes.",
+  url: env.NEXT_PUBLIC_APP_URL,
+  ogImage: "/og.jpg",
+  links: {
+    discord: "https://discord.gg/ucX9c5yXmX",
+    instagram: "https://www.instagram.com/onruntime/",
+    linkedin: "https://www.linkedin.com/company/onruntime",
+    github: "https://github.com/onruntime",
+    twitter: "https://twitter.com/onruntime",
+  },
+};
diff --git a/apps/web/src/screens/marketing/projects/details/index.tsx b/apps/web/src/screens/marketing/projects/details/index.tsx
index 3a15c873c..c79e519b8 100644
--- a/apps/web/src/screens/marketing/projects/details/index.tsx
+++ b/apps/web/src/screens/marketing/projects/details/index.tsx
@@ -18,7 +18,7 @@ import {
   User,
 } from "lucide-react";
 import TeamMembers from "@/constants/team-members";
-import { siteConfig } from "@/lib/utils/metadata";
+import { siteConfig } from "@/lib/utils/site-config";
 import { getTranslation } from "@/lib/translations.server";
 
 import { MemberWebsiteButton } from "@/components/marketing/projects/details/member-website-button";

From b18a682ed547a7908d2eafaecf223780c6150985 Mon Sep 17 00:00:00 2001
From: Antoine Kingue <etorefr@gmail.com>
Date: Mon, 29 Dec 2025 16:40:42 +0100
Subject: [PATCH 30/64] =?UTF-8?q?=F0=9F=8C=90=20add=20translation=20for=20?=
 =?UTF-8?q?agency=20page=20metadata=20and=20add=20localization=20files?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 apps/web/src/app/[locale]/agency/page.tsx    | 7 ++++---
 apps/web/src/locales/en/app/agency/page.json | 6 ++++++
 apps/web/src/locales/fr/app/agency/page.json | 6 ++++++
 3 files changed, 16 insertions(+), 3 deletions(-)
 create mode 100644 apps/web/src/locales/en/app/agency/page.json
 create mode 100644 apps/web/src/locales/fr/app/agency/page.json

diff --git a/apps/web/src/app/[locale]/agency/page.tsx b/apps/web/src/app/[locale]/agency/page.tsx
index 482f7a885..17e795d19 100644
--- a/apps/web/src/app/[locale]/agency/page.tsx
+++ b/apps/web/src/app/[locale]/agency/page.tsx
@@ -1,4 +1,3 @@
-import React from 'react';
 import Link from 'next/link';
 import { Button } from "@/components/ui/button";
 import DotPattern from "@/components/ui/dot-pattern";
@@ -10,11 +9,13 @@ import FranceMap from '@/components/marketing/agency/france-map';
 import { getMajorAgencies } from '@/constants/agencies';
 import { OrganizationSchema } from '@/components/json-ld/organization-schema';
 import { ORGANIZATION_DATA } from '@/components/json-ld/constants';
+import { getTranslation } from '@/lib/translations.server';
 
 export async function generateMetadata() {
+  const { t } = await getTranslation('app/agency/page');
   return constructMetadata({
-    title: "Expertise web locale | Développement digital dans les grandes villes françaises",
-    description: "Nous accompagnons les entreprises locales partout en France avec notre expertise des marchés numériques régionaux. Solutions digitales adaptées à chaque région.",
+    title: t('metadata.title'),
+    description: t('metadata.description'),
   });
 }
 
diff --git a/apps/web/src/locales/en/app/agency/page.json b/apps/web/src/locales/en/app/agency/page.json
new file mode 100644
index 000000000..d88092b3f
--- /dev/null
+++ b/apps/web/src/locales/en/app/agency/page.json
@@ -0,0 +1,6 @@
+{
+  "metadata": {
+    "title": "Local web expertise | Digital development in major French cities",
+    "description": "We support local businesses throughout France with our expertise in regional digital markets. Digital solutions adapted to each region."
+  }
+}
diff --git a/apps/web/src/locales/fr/app/agency/page.json b/apps/web/src/locales/fr/app/agency/page.json
new file mode 100644
index 000000000..deff6d42b
--- /dev/null
+++ b/apps/web/src/locales/fr/app/agency/page.json
@@ -0,0 +1,6 @@
+{
+  "metadata": {
+    "title": "Expertise web locale | Développement digital dans les grandes villes françaises",
+    "description": "Nous accompagnons les entreprises locales partout en France avec notre expertise des marchés numériques régionaux. Solutions digitales adaptées à chaque région."
+  }
+}

From 4d7e50cf6601ce999a4145d441d6872883fcf835 Mon Sep 17 00:00:00 2001
From: Antoine Kingue <etorefr@gmail.com>
Date: Mon, 29 Dec 2025 16:43:22 +0100
Subject: [PATCH 31/64] =?UTF-8?q?=F0=9F=8C=90=20add=20translations=20for?=
 =?UTF-8?q?=20glossary=20page=20metadata=20in=20english=20and=20french?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 apps/web/src/app/[locale]/glossary/page.tsx    | 7 ++++---
 apps/web/src/locales/en/app/glossary/page.json | 6 ++++++
 apps/web/src/locales/fr/app/glossary/page.json | 6 ++++++
 3 files changed, 16 insertions(+), 3 deletions(-)
 create mode 100644 apps/web/src/locales/en/app/glossary/page.json
 create mode 100644 apps/web/src/locales/fr/app/glossary/page.json

diff --git a/apps/web/src/app/[locale]/glossary/page.tsx b/apps/web/src/app/[locale]/glossary/page.tsx
index 064ffa5a4..d02edd1fc 100644
--- a/apps/web/src/app/[locale]/glossary/page.tsx
+++ b/apps/web/src/app/[locale]/glossary/page.tsx
@@ -1,4 +1,3 @@
-import React from 'react';
 import Link from 'next/link';
 import { Button } from "@/components/ui/button";
 import DotPattern from "@/components/ui/dot-pattern";
@@ -9,11 +8,13 @@ import { GlossaryAlphabetNav } from "@/components/glossary/alphabet-nav";
 import { GlossarySearch } from "@/components/glossary/search";
 import { Badge } from "@/components/ui/badge";
 import { Tag as TagIcon } from "lucide-react";
+import { getTranslation } from "@/lib/translations.server";
 
 export async function generateMetadata() {
+  const { t } = await getTranslation('app/glossary/page');
   return constructMetadata({
-    title: "Glossaire du Développement et Design Web",
-    description: "Consultez notre glossaire complet des termes techniques en développement web, design UI/UX et gestion de projet digital.",
+    title: t('metadata.title'),
+    description: t('metadata.description'),
   });
 }
 
diff --git a/apps/web/src/locales/en/app/glossary/page.json b/apps/web/src/locales/en/app/glossary/page.json
new file mode 100644
index 000000000..5f57501cf
--- /dev/null
+++ b/apps/web/src/locales/en/app/glossary/page.json
@@ -0,0 +1,6 @@
+{
+  "metadata": {
+    "title": "Web development and design glossary",
+    "description": "Browse our comprehensive glossary of technical terms in web development, UI/UX design, and digital project management."
+  }
+}
diff --git a/apps/web/src/locales/fr/app/glossary/page.json b/apps/web/src/locales/fr/app/glossary/page.json
new file mode 100644
index 000000000..e4e9123ba
--- /dev/null
+++ b/apps/web/src/locales/fr/app/glossary/page.json
@@ -0,0 +1,6 @@
+{
+  "metadata": {
+    "title": "Glossaire du développement et design web",
+    "description": "Consultez notre glossaire complet des termes techniques en développement web, design UI/UX et gestion de projet digital."
+  }
+}

From 004c8e3f364e1ce93b54089e4d78f1243cff04b3 Mon Sep 17 00:00:00 2001
From: Antoine Kingue <etorefr@gmail.com>
Date: Mon, 29 Dec 2025 16:44:59 +0100
Subject: [PATCH 32/64] =?UTF-8?q?=F0=9F=8C=90=20add=20translations=20for?=
 =?UTF-8?q?=20"not=20found"=20metadata=20in=20english=20and=20french?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 apps/web/src/app/[locale]/services/[category]/page.tsx    | 7 ++++---
 apps/web/src/locales/en/app/services/[category]/page.json | 8 ++++++++
 apps/web/src/locales/fr/app/services/[category]/page.json | 8 ++++++++
 3 files changed, 20 insertions(+), 3 deletions(-)
 create mode 100644 apps/web/src/locales/en/app/services/[category]/page.json
 create mode 100644 apps/web/src/locales/fr/app/services/[category]/page.json

diff --git a/apps/web/src/app/[locale]/services/[category]/page.tsx b/apps/web/src/app/[locale]/services/[category]/page.tsx
index 33c48f7a9..994813b5c 100644
--- a/apps/web/src/app/[locale]/services/[category]/page.tsx
+++ b/apps/web/src/app/[locale]/services/[category]/page.tsx
@@ -1,9 +1,9 @@
-import React from 'react';
 import { notFound } from 'next/navigation';
 import Services from '@/constants/services';
 import ServiceOverviewPage from '@/components/marketing/services/service-overview';
 import { ServiceCategoryData } from '@/types/service';
 import { constructMetadata } from '@/lib/utils/metadata';
+import { getTranslation } from '@/lib/translations.server';
 
 type Props = {
   params: Promise<{
@@ -16,9 +16,10 @@ export async function generateMetadata({ params }: Props) {
   const categoryData = Services.find(service => service.id === category);
 
   if (!categoryData) {
+    const { t } = await getTranslation('app/services/[category]/page');
     return constructMetadata({
-      title: "Service non trouvé",
-      description: "Cette catégorie de service n'existe pas.",
+      title: t('metadata.not-found.title'),
+      description: t('metadata.not-found.description'),
       noIndex: true,
     });
   }
diff --git a/apps/web/src/locales/en/app/services/[category]/page.json b/apps/web/src/locales/en/app/services/[category]/page.json
new file mode 100644
index 000000000..bcec80c19
--- /dev/null
+++ b/apps/web/src/locales/en/app/services/[category]/page.json
@@ -0,0 +1,8 @@
+{
+  "metadata": {
+    "not-found": {
+      "title": "Service not found",
+      "description": "This service category does not exist."
+    }
+  }
+}
diff --git a/apps/web/src/locales/fr/app/services/[category]/page.json b/apps/web/src/locales/fr/app/services/[category]/page.json
new file mode 100644
index 000000000..843e18cb2
--- /dev/null
+++ b/apps/web/src/locales/fr/app/services/[category]/page.json
@@ -0,0 +1,8 @@
+{
+  "metadata": {
+    "not-found": {
+      "title": "Service non trouvé",
+      "description": "Cette catégorie de service n'existe pas."
+    }
+  }
+}

From 97002794a0d56d77a3a6a25d75af8a3f566a7caf Mon Sep 17 00:00:00 2001
From: Antoine Kingue <etorefr@gmail.com>
Date: Mon, 29 Dec 2025 16:48:11 +0100
Subject: [PATCH 33/64] =?UTF-8?q?=F0=9F=8C=90=20add=20english=20and=20fren?=
 =?UTF-8?q?ch=20translations=20for=20agency=20portfolio=20metadata?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../marketing/agency/local-portfolio.tsx      | 49 ++++++++++++-------
 .../marketing/agency/local-portfolio.json     | 23 +++++++++
 .../marketing/agency/local-portfolio.json     | 23 +++++++++
 3 files changed, 78 insertions(+), 17 deletions(-)
 create mode 100644 apps/web/src/locales/en/components/marketing/agency/local-portfolio.json
 create mode 100644 apps/web/src/locales/fr/components/marketing/agency/local-portfolio.json

diff --git a/apps/web/src/components/marketing/agency/local-portfolio.tsx b/apps/web/src/components/marketing/agency/local-portfolio.tsx
index 24985c5d3..54cf604d7 100644
--- a/apps/web/src/components/marketing/agency/local-portfolio.tsx
+++ b/apps/web/src/components/marketing/agency/local-portfolio.tsx
@@ -1,4 +1,3 @@
-import React from 'react';
 import Link from 'next/link';
 import Image from 'next/image';
 import { Button } from '@/components/ui/button';
@@ -19,12 +18,30 @@ interface LocalPortfolioProjectProps {
   index: number;
 }
 
-const LocalPortfolioProject: React.FC<LocalPortfolioProjectProps> = async ({
+const LocalPortfolioProject = async ({
   project,
   agency,
   index,
-}) => {
+}: LocalPortfolioProjectProps) => {
   const { t: tProject } = await getTranslation(`constants/projects/${project.id}`);
+  const { t } = await getTranslation('components/marketing/agency/local-portfolio');
+
+  const getExpertiseText = () => {
+    if (index === 0) {
+      return project.tags.includes(Tag.FEATURED)
+        ? t('project.expertise-featured', { region: agency.region })
+        : t('project.expertise-digital', { region: agency.region });
+    }
+    return project.tags.includes(Tag.FEATURED)
+      ? t('project.skills-featured', { name: agency.name })
+      : t('project.skills-digital', { name: agency.name });
+  };
+
+  const getTagLabel = (tag: Tag) => {
+    if (tag === Tag.FEATURED) return t('tags.featured');
+    if (tag === Tag.OPEN_SOURCE) return t('tags.open-source');
+    return tag;
+  };
 
   return (
     <div className="flex flex-col h-full border rounded-lg overflow-hidden hover:border-onruntime-blue transition-colors">
@@ -41,19 +58,16 @@ const LocalPortfolioProject: React.FC<LocalPortfolioProjectProps> = async ({
         <p className="text-sm text-muted-foreground mb-4">{tProject("description")}</p>
 
         <div className="mb-4 p-3 bg-muted/50 rounded-md">
-          <p className="text-xs font-medium mb-1">Application au marché {agency.region}</p>
+          <p className="text-xs font-medium mb-1">{t('project.market-application', { region: agency.region })}</p>
           <p className="text-sm text-muted-foreground">
-            {index === 0
-              ? `Notre expérience avec ce projet nous a permis de développer une expertise particulièrement applicable au secteur ${project.tags.includes(Tag.FEATURED) ? 'des nouvelles technologies' : 'du commerce digital'} dans la région ${agency.region}.`
-              : `Les compétences et technologies utilisées dans ce projet sont directement transférables aux besoins des entreprises de ${agency.name}, notamment dans ${project.tags.includes(Tag.FEATURED) ? 'l\'innovation ouverte' : 'la transformation numérique'}.`}
+            {getExpertiseText()}
           </p>
         </div>
 
         <div className="flex flex-wrap gap-2 mb-4">
           {project.tags.map((tag, tagIndex) => (
             <span key={tagIndex} className="px-2 py-1 bg-muted text-xs rounded-full">
-              {tag === Tag.FEATURED ? "Projet phare" :
-                tag === Tag.OPEN_SOURCE ? "Open Source" : tag}
+              {getTagLabel(tag)}
             </span>
           ))}
         </div>
@@ -61,7 +75,7 @@ const LocalPortfolioProject: React.FC<LocalPortfolioProjectProps> = async ({
         <div className="mt-auto">
           <Link href={Routes.project(project.id)}>
             <Button variant="outline" className="w-full">
-              Voir le projet
+              {t('project.view-project')}
               <ArrowRight className="ml-2 h-4 w-4" />
             </Button>
           </Link>
@@ -71,7 +85,9 @@ const LocalPortfolioProject: React.FC<LocalPortfolioProjectProps> = async ({
   );
 };
 
-const LocalPortfolio: React.FC<LocalPortfolioProps> = ({ agency }) => {
+const LocalPortfolio = async ({ agency }: LocalPortfolioProps) => {
+  const { t } = await getTranslation('components/marketing/agency/local-portfolio');
+
   const featuredProjects = Projects.filter(project =>
     project.tags.includes(Tag.FEATURED)
   ).slice(0, 1);
@@ -86,11 +102,10 @@ const LocalPortfolio: React.FC<LocalPortfolioProps> = ({ agency }) => {
     <div className="space-y-8">
       <div className="text-center">
         <h2 className="text-3xl font-medium text-foreground mb-4">
-          Notre expertise applicable aux projets à {agency.name}
+          {t('section.title', { name: agency.name })}
         </h2>
         <p className="text-muted-foreground max-w-3xl mx-auto">
-          Découvrez quelques-unes de nos réalisations qui illustrent notre savoir-faire,
-          applicable aux défis numériques des entreprises de {agency.region}.
+          {t('section.description', { region: agency.region })}
         </p>
       </div>
 
@@ -107,14 +122,14 @@ const LocalPortfolio: React.FC<LocalPortfolioProps> = ({ agency }) => {
 
       <div className="p-6 border rounded-lg bg-card text-center">
         <p className="text-lg font-medium text-foreground mb-2">
-          Un projet digital pour votre entreprise à {agency.name} ?
+          {t('cta.title', { name: agency.name })}
         </p>
         <p className="text-muted-foreground mb-4">
-          Notre expertise est applicable à tous les secteurs, avec une attention particulière aux spécificités du marché {agency.region}.
+          {t('cta.description', { region: agency.region })}
         </p>
         <Link href={Routes.contact}>
           <Button>
-            Discutons de votre projet
+            {t('cta.button')}
             <ArrowRight className="ml-2 h-4 w-4" />
           </Button>
         </Link>
diff --git a/apps/web/src/locales/en/components/marketing/agency/local-portfolio.json b/apps/web/src/locales/en/components/marketing/agency/local-portfolio.json
new file mode 100644
index 000000000..e3ae37bbd
--- /dev/null
+++ b/apps/web/src/locales/en/components/marketing/agency/local-portfolio.json
@@ -0,0 +1,23 @@
+{
+  "project": {
+    "market-application": "Application to the {region} market",
+    "expertise-featured": "Our experience with this project has allowed us to develop expertise particularly applicable to the new technologies sector in the {region} region.",
+    "expertise-digital": "Our experience with this project has allowed us to develop expertise particularly applicable to the digital commerce sector in the {region} region.",
+    "skills-featured": "The skills and technologies used in this project are directly transferable to the needs of businesses in {name}, particularly in open innovation.",
+    "skills-digital": "The skills and technologies used in this project are directly transferable to the needs of businesses in {name}, particularly in digital transformation.",
+    "view-project": "View project"
+  },
+  "tags": {
+    "featured": "Featured project",
+    "open-source": "Open Source"
+  },
+  "section": {
+    "title": "Our expertise applicable to projects in {name}",
+    "description": "Discover some of our achievements that illustrate our know-how, applicable to the digital challenges of businesses in {region}."
+  },
+  "cta": {
+    "title": "A digital project for your business in {name}?",
+    "description": "Our expertise is applicable to all sectors, with particular attention to the specificities of the {region} market.",
+    "button": "Let's discuss your project"
+  }
+}
diff --git a/apps/web/src/locales/fr/components/marketing/agency/local-portfolio.json b/apps/web/src/locales/fr/components/marketing/agency/local-portfolio.json
new file mode 100644
index 000000000..c57300db4
--- /dev/null
+++ b/apps/web/src/locales/fr/components/marketing/agency/local-portfolio.json
@@ -0,0 +1,23 @@
+{
+  "project": {
+    "market-application": "Application au marché {region}",
+    "expertise-featured": "Notre expérience avec ce projet nous a permis de développer une expertise particulièrement applicable au secteur des nouvelles technologies dans la région {region}.",
+    "expertise-digital": "Notre expérience avec ce projet nous a permis de développer une expertise particulièrement applicable au secteur du commerce digital dans la région {region}.",
+    "skills-featured": "Les compétences et technologies utilisées dans ce projet sont directement transférables aux besoins des entreprises de {name}, notamment dans l'innovation ouverte.",
+    "skills-digital": "Les compétences et technologies utilisées dans ce projet sont directement transférables aux besoins des entreprises de {name}, notamment dans la transformation numérique.",
+    "view-project": "Voir le projet"
+  },
+  "tags": {
+    "featured": "Projet phare",
+    "open-source": "Open Source"
+  },
+  "section": {
+    "title": "Notre expertise applicable aux projets à {name}",
+    "description": "Découvrez quelques-unes de nos réalisations qui illustrent notre savoir-faire, applicable aux défis numériques des entreprises de {region}."
+  },
+  "cta": {
+    "title": "Un projet digital pour votre entreprise à {name} ?",
+    "description": "Notre expertise est applicable à tous les secteurs, avec une attention particulière aux spécificités du marché {region}.",
+    "button": "Discutons de votre projet"
+  }
+}

From 2a08c89d1d19d1c4d83e6402fb9fc1b53716968b Mon Sep 17 00:00:00 2001
From: Antoine Kingue <etorefr@gmail.com>
Date: Mon, 29 Dec 2025 17:44:07 +0100
Subject: [PATCH 34/64] =?UTF-8?q?=F0=9F=8C=90=20add=20translation=20for=20?=
 =?UTF-8?q?customer=20tag=20in=20english=20and=20french=20localization=20f?=
 =?UTF-8?q?iles?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 apps/web/src/components/marketing/agency/local-portfolio.tsx   | 1 +
 .../en/components/marketing/agency/local-portfolio.json        | 3 ++-
 .../web/src/locales/en/screens/marketing/projects/details.json | 3 ++-
 .../fr/components/marketing/agency/local-portfolio.json        | 3 ++-
 .../web/src/locales/fr/screens/marketing/projects/details.json | 3 ++-
 apps/web/src/screens/marketing/projects/details/index.tsx      | 1 +
 6 files changed, 10 insertions(+), 4 deletions(-)

diff --git a/apps/web/src/components/marketing/agency/local-portfolio.tsx b/apps/web/src/components/marketing/agency/local-portfolio.tsx
index 54cf604d7..dd555cbc3 100644
--- a/apps/web/src/components/marketing/agency/local-portfolio.tsx
+++ b/apps/web/src/components/marketing/agency/local-portfolio.tsx
@@ -40,6 +40,7 @@ const LocalPortfolioProject = async ({
   const getTagLabel = (tag: Tag) => {
     if (tag === Tag.FEATURED) return t('tags.featured');
     if (tag === Tag.OPEN_SOURCE) return t('tags.open-source');
+    if (tag === Tag.CUSTOMER) return t('tags.customer');
     return tag;
   };
 
diff --git a/apps/web/src/locales/en/components/marketing/agency/local-portfolio.json b/apps/web/src/locales/en/components/marketing/agency/local-portfolio.json
index e3ae37bbd..dd69e1bf3 100644
--- a/apps/web/src/locales/en/components/marketing/agency/local-portfolio.json
+++ b/apps/web/src/locales/en/components/marketing/agency/local-portfolio.json
@@ -9,7 +9,8 @@
   },
   "tags": {
     "featured": "Featured project",
-    "open-source": "Open Source"
+    "open-source": "Open Source",
+    "customer": "Client project"
   },
   "section": {
     "title": "Our expertise applicable to projects in {name}",
diff --git a/apps/web/src/locales/en/screens/marketing/projects/details.json b/apps/web/src/locales/en/screens/marketing/projects/details.json
index 2532b907a..dc4de3019 100644
--- a/apps/web/src/locales/en/screens/marketing/projects/details.json
+++ b/apps/web/src/locales/en/screens/marketing/projects/details.json
@@ -1,7 +1,8 @@
 {
   "tags": {
     "featured": "Featured",
-    "open-source": "Open Source"
+    "open-source": "Open Source",
+    "customer": "Client project"
   },
   "buttons": {
     "view-project": "View project",
diff --git a/apps/web/src/locales/fr/components/marketing/agency/local-portfolio.json b/apps/web/src/locales/fr/components/marketing/agency/local-portfolio.json
index c57300db4..3fc9d60a2 100644
--- a/apps/web/src/locales/fr/components/marketing/agency/local-portfolio.json
+++ b/apps/web/src/locales/fr/components/marketing/agency/local-portfolio.json
@@ -9,7 +9,8 @@
   },
   "tags": {
     "featured": "Projet phare",
-    "open-source": "Open Source"
+    "open-source": "Open Source",
+    "customer": "Projet client"
   },
   "section": {
     "title": "Notre expertise applicable aux projets à {name}",
diff --git a/apps/web/src/locales/fr/screens/marketing/projects/details.json b/apps/web/src/locales/fr/screens/marketing/projects/details.json
index ebbfe4e66..4f96a7820 100644
--- a/apps/web/src/locales/fr/screens/marketing/projects/details.json
+++ b/apps/web/src/locales/fr/screens/marketing/projects/details.json
@@ -1,7 +1,8 @@
 {
   "tags": {
     "featured": "Projet phare",
-    "open-source": "Open Source"
+    "open-source": "Open Source",
+    "customer": "Projet client"
   },
   "buttons": {
     "view-project": "Voir le projet",
diff --git a/apps/web/src/screens/marketing/projects/details/index.tsx b/apps/web/src/screens/marketing/projects/details/index.tsx
index c79e519b8..00b2d3286 100644
--- a/apps/web/src/screens/marketing/projects/details/index.tsx
+++ b/apps/web/src/screens/marketing/projects/details/index.tsx
@@ -35,6 +35,7 @@ const ProjectPage: React.FC<ProjectPageProps> = async ({ project }) => {
   const getTagLabel = (tag: Tag) => {
     if (tag === Tag.FEATURED) return t("tags.featured");
     if (tag === Tag.OPEN_SOURCE) return t("tags.open-source");
+    if (tag === Tag.CUSTOMER) return t("tags.customer");
     return tag;
   };
 

From 64cc5c7b52642a53a6f6ba681c2c87bc9633d677 Mon Sep 17 00:00:00 2001
From: Antoine Kingue <etorefr@gmail.com>
Date: Mon, 29 Dec 2025 17:49:29 +0100
Subject: [PATCH 35/64] =?UTF-8?q?=E2=99=BB=EF=B8=8F=20refactor=20hostname?=
 =?UTF-8?q?=20retrieval=20in=20project=20page=20component=20for=20improved?=
 =?UTF-8?q?=20readability?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/screens/marketing/projects/details/index.tsx | 12 +++++++++---
 1 file changed, 9 insertions(+), 3 deletions(-)

diff --git a/apps/web/src/screens/marketing/projects/details/index.tsx b/apps/web/src/screens/marketing/projects/details/index.tsx
index 00b2d3286..73b6fab98 100644
--- a/apps/web/src/screens/marketing/projects/details/index.tsx
+++ b/apps/web/src/screens/marketing/projects/details/index.tsx
@@ -39,6 +39,14 @@ const ProjectPage: React.FC<ProjectPageProps> = async ({ project }) => {
     return tag;
   };
 
+  const getHostname = (url: string | undefined): string => {
+    try {
+      return new URL(url || siteConfig.url).hostname;
+    } catch {
+      return "";
+    }
+  };
+
   return (
     <main className="min-h-screen pt-32 pb-16">
       {project.id === "tonightpass" ? (
@@ -181,9 +189,7 @@ const ProjectPage: React.FC<ProjectPageProps> = async ({ project }) => {
             width={1200}
             height={750}
             imageSrc={project.showcaseUrl}
-            url={
-              new URL(project.website || siteConfig.url).hostname
-            }
+            url={getHostname(project.website)}
           />
         </div>
 

From 8ea307219431b57ed372a6c0c6c767ccc6ae3e2f Mon Sep 17 00:00:00 2001
From: Antoine Kingue <etorefr@gmail.com>
Date: Mon, 29 Dec 2025 18:07:18 +0100
Subject: [PATCH 36/64] =?UTF-8?q?=F0=9F=8C=90=20add=20translations=20for?=
 =?UTF-8?q?=20project=20status=20in=20english=20and=20french=20localizatio?=
 =?UTF-8?q?n=20files?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/locales/en/screens/marketing/projects/details.json   | 5 +++++
 .../src/locales/fr/screens/marketing/projects/details.json   | 5 +++++
 apps/web/src/screens/marketing/projects/details/index.tsx    | 2 +-
 3 files changed, 11 insertions(+), 1 deletion(-)

diff --git a/apps/web/src/locales/en/screens/marketing/projects/details.json b/apps/web/src/locales/en/screens/marketing/projects/details.json
index dc4de3019..c6276a462 100644
--- a/apps/web/src/locales/en/screens/marketing/projects/details.json
+++ b/apps/web/src/locales/en/screens/marketing/projects/details.json
@@ -11,6 +11,11 @@
   "info": {
     "start-date": "Start date",
     "status": "Status",
+    "statuses": {
+      "active": "Active",
+      "completed": "Completed",
+      "archived": "Archived"
+    },
     "team": "Team",
     "members": "members"
   },
diff --git a/apps/web/src/locales/fr/screens/marketing/projects/details.json b/apps/web/src/locales/fr/screens/marketing/projects/details.json
index 4f96a7820..04f56e91e 100644
--- a/apps/web/src/locales/fr/screens/marketing/projects/details.json
+++ b/apps/web/src/locales/fr/screens/marketing/projects/details.json
@@ -11,6 +11,11 @@
   "info": {
     "start-date": "Date de début",
     "status": "Statut",
+    "statuses": {
+      "active": "En cours",
+      "completed": "Terminé",
+      "archived": "Archivé"
+    },
     "team": "Équipe",
     "members": "membres"
   },
diff --git a/apps/web/src/screens/marketing/projects/details/index.tsx b/apps/web/src/screens/marketing/projects/details/index.tsx
index 73b6fab98..7e657a5bd 100644
--- a/apps/web/src/screens/marketing/projects/details/index.tsx
+++ b/apps/web/src/screens/marketing/projects/details/index.tsx
@@ -220,7 +220,7 @@ const ProjectPage: React.FC<ProjectPageProps> = async ({ project }) => {
             </div>
             <div>
               <p className="text-sm text-muted-foreground">{t("info.status")}</p>
-              <p className="font-semibold capitalize">{project.status}</p>
+              <p className="font-semibold">{t(`info.statuses.${project.status}`)}</p>
             </div>
           </div>
 

From 8233a0a14b930103c4a635a18a3ff4381ad29651 Mon Sep 17 00:00:00 2001
From: Antoine Kingue <etorefr@gmail.com>
Date: Mon, 29 Dec 2025 20:53:39 +0100
Subject: [PATCH 37/64] =?UTF-8?q?=F0=9F=8C=90=20add=20translations=20suppo?=
 =?UTF-8?q?rt=20in=20metadata=20and=20og=20images?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 apps/web/src/app/api/og/route.tsx             | 11 +++-
 apps/web/src/components/json-ld/constants.ts  |  2 +-
 .../{lib/utils => constants}/site-config.ts   |  1 -
 apps/web/src/lib/translations.server.ts       |  5 +-
 apps/web/src/lib/translations.ts              | 31 +++++++++
 apps/web/src/lib/utils/metadata.ts            | 21 +++---
 .../src/locales/en/constants/site-config.json |  3 +
 .../src/locales/fr/constants/site-config.json |  3 +
 apps/web/src/proxy.ts                         | 32 +--------
 .../marketing/projects/details/index.tsx      |  2 +-
 .../translations/next-app/lib/translations.ts | 31 +++++++++
 examples/translations/next-app/proxy.ts       | 32 +--------
 packages/translations/README.md               | 65 ++++++++++---------
 13 files changed, 128 insertions(+), 111 deletions(-)
 rename apps/web/src/{lib/utils => constants}/site-config.ts (69%)
 create mode 100644 apps/web/src/locales/en/constants/site-config.json
 create mode 100644 apps/web/src/locales/fr/constants/site-config.json

diff --git a/apps/web/src/app/api/og/route.tsx b/apps/web/src/app/api/og/route.tsx
index e7191d05d..66515979d 100644
--- a/apps/web/src/app/api/og/route.tsx
+++ b/apps/web/src/app/api/og/route.tsx
@@ -1,8 +1,10 @@
 
 import { ImageResponse } from "@vercel/og";
 import { NextRequest } from "next/server";
-import { siteConfig } from "@/lib/utils/site-config";
+import { siteConfig } from "@/constants/site-config";
 import { OnRuntimeWordMark } from "@/logos/components";
+import { getTranslation } from "@/lib/translations.server";
+import { getPreferredLocale } from "@/lib/translations";
 
 export const runtime = "edge";
 
@@ -15,11 +17,14 @@ const figtreeBold = fetch(
 ).then((res) => res.arrayBuffer());
 
 export async function GET(req: NextRequest) {
-  
+
   const { searchParams } = new URL(req.url);
 
+  const locale = getPreferredLocale(req);
+  const { t } = await getTranslation("constants/site-config", locale);
+
   const title = searchParams.get("title") || siteConfig.name;
-  const description = searchParams.get("description") || siteConfig.description;
+  const description = searchParams.get("description") || t("description");
 
   const [regularFont, boldFont] = await Promise.all([
     figtreeRegular,
diff --git a/apps/web/src/components/json-ld/constants.ts b/apps/web/src/components/json-ld/constants.ts
index 582ded832..62e0e598a 100644
--- a/apps/web/src/components/json-ld/constants.ts
+++ b/apps/web/src/components/json-ld/constants.ts
@@ -1,4 +1,4 @@
-import { siteConfig } from "@/lib/utils/site-config";
+import { siteConfig } from "@/constants/site-config";
 
 export const ORGANIZATION_DATA = {
   name: "onRuntime Studio",
diff --git a/apps/web/src/lib/utils/site-config.ts b/apps/web/src/constants/site-config.ts
similarity index 69%
rename from apps/web/src/lib/utils/site-config.ts
rename to apps/web/src/constants/site-config.ts
index fd6a84997..2041a0f6f 100644
--- a/apps/web/src/lib/utils/site-config.ts
+++ b/apps/web/src/constants/site-config.ts
@@ -2,7 +2,6 @@ import { env } from "env";
 
 export const siteConfig = {
   name: "onRuntime Studio",
-  description: "Agence digitale spécialisée en développement web, mobile et design UI/UX. Notre équipe d'experts transforme vos idées en solutions digitales performantes.",
   url: env.NEXT_PUBLIC_APP_URL,
   ogImage: "/og.jpg",
   links: {
diff --git a/apps/web/src/lib/translations.server.ts b/apps/web/src/lib/translations.server.ts
index d7998cc12..dface3987 100644
--- a/apps/web/src/lib/translations.server.ts
+++ b/apps/web/src/lib/translations.server.ts
@@ -5,8 +5,7 @@ import { getTranslation as getTranslationCore } from "@onruntime/translations";
 
 import { load, defaultLocale } from "./translations";
 
-export const getTranslation = async (namespace = "common") => {
-  const headersList = await headers();
-  const locale = headersList.get("x-locale") || defaultLocale;
+export const getTranslation = async (namespace = "common", localeOverride?: string) => {
+  const locale = localeOverride ?? (await headers()).get("x-locale") ?? defaultLocale;
   return getTranslationCore(load, locale, namespace);
 };
diff --git a/apps/web/src/lib/translations.ts b/apps/web/src/lib/translations.ts
index e385bcbef..72b3acf47 100644
--- a/apps/web/src/lib/translations.ts
+++ b/apps/web/src/lib/translations.ts
@@ -1,8 +1,11 @@
 import type { TranslationLoader } from "@onruntime/translations";
+import type { NextRequest } from "next/server";
 
 export const locales = ["en", "fr"];
 export const defaultLocale = locales[0];
 
+export const LOCALE_COOKIE = "NEXT_LOCALE";
+
 export const load: TranslationLoader = (locale, namespace) => {
   try {
     return require(`@/locales/${locale}/${namespace}.json`);
@@ -10,3 +13,31 @@ export const load: TranslationLoader = (locale, namespace) => {
     return undefined;
   }
 };
+
+export function getPreferredLocale(request: NextRequest): string {
+  // Check cookie first (user's explicit choice)
+  const cookieLocale = request.cookies.get(LOCALE_COOKIE)?.value;
+  if (cookieLocale && locales.includes(cookieLocale)) {
+    return cookieLocale;
+  }
+
+  // Fall back to Accept-Language header
+  const acceptLanguage = request.headers.get("accept-language");
+  if (!acceptLanguage) return defaultLocale;
+
+  const preferred = acceptLanguage
+    .split(",")
+    .map((lang) => {
+      const [code, priorityToken] = lang.trim().split(";");
+      const priorityMatch = priorityToken?.match(/q=([0-9.]+)/);
+      const priority = priorityMatch ? parseFloat(priorityMatch[1]) : 1.0;
+      return {
+        code: code.split("-")[0].toLowerCase(),
+        priority: Number.isNaN(priority) ? 1.0 : priority,
+      };
+    })
+    .sort((a, b) => b.priority - a.priority)
+    .find((lang) => locales.includes(lang.code));
+
+  return preferred?.code || defaultLocale;
+}
diff --git a/apps/web/src/lib/utils/metadata.ts b/apps/web/src/lib/utils/metadata.ts
index f8681617a..a85c65cdc 100644
--- a/apps/web/src/lib/utils/metadata.ts
+++ b/apps/web/src/lib/utils/metadata.ts
@@ -2,7 +2,8 @@ import { Metadata } from "next";
 import { headers } from "next/headers";
 
 import { locales, defaultLocale } from "@/lib/translations";
-import { siteConfig } from "@/lib/utils/site-config";
+import { getTranslation } from "@/lib/translations.server";
+import { siteConfig } from "@/constants/site-config";
 
 /**
  * Convert locale code to OpenGraph locale format
@@ -28,7 +29,7 @@ export function getOGImageUrl({
   type?: OGImageType;
 }): string {
   const params = new URLSearchParams();
-  
+
   params.append('title', title);
   params.append('description', description);
   params.append('type', type);
@@ -38,7 +39,7 @@ export function getOGImageUrl({
 
 export async function constructMetadata({
   title = siteConfig.name,
-  description = siteConfig.description,
+  description,
   ogType = "website",
   ogImage,
   ogImageType = "default",
@@ -55,20 +56,24 @@ export async function constructMetadata({
   const languages = await generateAlternates();
   const currentLocale = await getCurrentLocale();
 
-  // Titre avec format cohérent
+  // Get translated default description if not provided
+  const { t } = await getTranslation("constants/site-config");
+  const finalDescription = description ?? t("description");
+
+  // Format title consistently
   const formattedTitle = title === siteConfig.name
     ? title
     : `${title} | ${siteConfig.name}`;
 
   const finalOgImage = ogImage || getOGImageUrl({
     title,
-    description,
+    description: finalDescription,
     type: ogImageType,
   });
 
   return {
     title: formattedTitle,
-    description,
+    description: finalDescription,
 
     metadataBase: new URL(siteConfig.url),
 
@@ -86,7 +91,7 @@ export async function constructMetadata({
       locale: toOgLocale(currentLocale),
       url: canonical,
       title: formattedTitle,
-      description,
+      description: finalDescription,
       siteName: siteConfig.name,
       images: [
         {
@@ -101,7 +106,7 @@ export async function constructMetadata({
     twitter: {
       card: "summary_large_image",
       title: formattedTitle,
-      description,
+      description: finalDescription,
       images: [finalOgImage],
       creator: "@onruntime",
       site: "@onruntime",
diff --git a/apps/web/src/locales/en/constants/site-config.json b/apps/web/src/locales/en/constants/site-config.json
new file mode 100644
index 000000000..580d0ddba
--- /dev/null
+++ b/apps/web/src/locales/en/constants/site-config.json
@@ -0,0 +1,3 @@
+{
+  "description": "Digital agency specialized in web and mobile development and UI/UX design. Our team of experts transforms your ideas into high-performance digital solutions."
+}
diff --git a/apps/web/src/locales/fr/constants/site-config.json b/apps/web/src/locales/fr/constants/site-config.json
new file mode 100644
index 000000000..0dd2766c2
--- /dev/null
+++ b/apps/web/src/locales/fr/constants/site-config.json
@@ -0,0 +1,3 @@
+{
+  "description": "Agence digitale spécialisée en développement web, mobile et design UI/UX. Notre équipe d'experts transforme vos idées en solutions digitales performantes."
+}
diff --git a/apps/web/src/proxy.ts b/apps/web/src/proxy.ts
index c5fe77188..02b76ccd5 100644
--- a/apps/web/src/proxy.ts
+++ b/apps/web/src/proxy.ts
@@ -1,37 +1,7 @@
 import { NextResponse } from "next/server";
 import type { NextRequest } from "next/server";
 
-import { locales, defaultLocale } from "@/lib/translations";
-
-const LOCALE_COOKIE = "NEXT_LOCALE";
-
-function getPreferredLocale(request: NextRequest): string {
-  // Check cookie first (user's explicit choice)
-  const cookieLocale = request.cookies.get(LOCALE_COOKIE)?.value;
-  if (cookieLocale && locales.includes(cookieLocale)) {
-    return cookieLocale;
-  }
-
-  // Fall back to Accept-Language header
-  const acceptLanguage = request.headers.get("accept-language");
-  if (!acceptLanguage) return defaultLocale;
-
-  const preferred = acceptLanguage
-    .split(",")
-    .map((lang) => {
-      const [code, priorityToken] = lang.trim().split(";");
-      const priorityMatch = priorityToken?.match(/q=([0-9.]+)/);
-      const priority = priorityMatch ? parseFloat(priorityMatch[1]) : 1.0;
-      return {
-        code: code.split("-")[0].toLowerCase(),
-        priority: Number.isNaN(priority) ? 1.0 : priority,
-      };
-    })
-    .sort((a, b) => b.priority - a.priority)
-    .find((lang) => locales.includes(lang.code));
-
-  return preferred?.code || defaultLocale;
-}
+import { locales, defaultLocale, LOCALE_COOKIE, getPreferredLocale } from "@/lib/translations";
 
 export function proxy(request: NextRequest) {
   const { pathname } = request.nextUrl;
diff --git a/apps/web/src/screens/marketing/projects/details/index.tsx b/apps/web/src/screens/marketing/projects/details/index.tsx
index 7e657a5bd..5ea97dac6 100644
--- a/apps/web/src/screens/marketing/projects/details/index.tsx
+++ b/apps/web/src/screens/marketing/projects/details/index.tsx
@@ -18,7 +18,7 @@ import {
   User,
 } from "lucide-react";
 import TeamMembers from "@/constants/team-members";
-import { siteConfig } from "@/lib/utils/site-config";
+import { siteConfig } from "@/constants/site-config";
 import { getTranslation } from "@/lib/translations.server";
 
 import { MemberWebsiteButton } from "@/components/marketing/projects/details/member-website-button";
diff --git a/examples/translations/next-app/lib/translations.ts b/examples/translations/next-app/lib/translations.ts
index d7ef54ca3..fb15ec90c 100644
--- a/examples/translations/next-app/lib/translations.ts
+++ b/examples/translations/next-app/lib/translations.ts
@@ -1,8 +1,11 @@
 import type { TranslationLoader } from "@onruntime/translations";
+import type { NextRequest } from "next/server";
 
 export const locales = ["en", "fr"];
 export const defaultLocale = locales[0];
 
+export const LOCALE_COOKIE = "NEXT_LOCALE";
+
 export const load: TranslationLoader = (locale, namespace) => {
   try {
     return require(`../locales/${locale}/${namespace}.json`);
@@ -10,3 +13,31 @@ export const load: TranslationLoader = (locale, namespace) => {
     return undefined;
   }
 };
+
+export function getPreferredLocale(request: NextRequest): string {
+  // Check cookie first (user's explicit choice)
+  const cookieLocale = request.cookies.get(LOCALE_COOKIE)?.value;
+  if (cookieLocale && locales.includes(cookieLocale)) {
+    return cookieLocale;
+  }
+
+  // Fall back to Accept-Language header
+  const acceptLanguage = request.headers.get("accept-language");
+  if (!acceptLanguage) return defaultLocale;
+
+  const preferred = acceptLanguage
+    .split(",")
+    .map((lang) => {
+      const [code, priorityToken] = lang.trim().split(";");
+      const priorityMatch = priorityToken?.match(/q=([0-9.]+)/);
+      const priority = priorityMatch ? parseFloat(priorityMatch[1]) : 1.0;
+      return {
+        code: code.split("-")[0].toLowerCase(),
+        priority: Number.isNaN(priority) ? 1.0 : priority,
+      };
+    })
+    .sort((a, b) => b.priority - a.priority)
+    .find((lang) => locales.includes(lang.code));
+
+  return preferred?.code || defaultLocale;
+}
diff --git a/examples/translations/next-app/proxy.ts b/examples/translations/next-app/proxy.ts
index 8fceb1cf6..607e9d023 100644
--- a/examples/translations/next-app/proxy.ts
+++ b/examples/translations/next-app/proxy.ts
@@ -1,37 +1,7 @@
 import { NextResponse } from "next/server";
 import type { NextRequest } from "next/server";
 
-import { locales, defaultLocale } from "@/lib/translations";
-
-const LOCALE_COOKIE = "NEXT_LOCALE";
-
-function getPreferredLocale(request: NextRequest): string {
-  // Check cookie first (user's explicit choice)
-  const cookieLocale = request.cookies.get(LOCALE_COOKIE)?.value;
-  if (cookieLocale && locales.includes(cookieLocale)) {
-    return cookieLocale;
-  }
-
-  // Fall back to Accept-Language header
-  const acceptLanguage = request.headers.get("accept-language");
-  if (!acceptLanguage) return defaultLocale;
-
-  const preferred = acceptLanguage
-    .split(",")
-    .map((lang) => {
-      const [code, priorityToken] = lang.trim().split(";");
-      const priorityMatch = priorityToken?.match(/q=([0-9.]+)/);
-      const priority = priorityMatch ? parseFloat(priorityMatch[1]) : 1.0;
-      return {
-        code: code.split("-")[0].toLowerCase(),
-        priority: Number.isNaN(priority) ? 1.0 : priority,
-      };
-    })
-    .sort((a, b) => b.priority - a.priority)
-    .find((lang) => locales.includes(lang.code));
-
-  return preferred?.code || defaultLocale;
-}
+import { locales, defaultLocale, LOCALE_COOKIE, getPreferredLocale } from "@/lib/translations";
 
 export function proxy(request: NextRequest) {
   const { pathname } = request.nextUrl;
diff --git a/packages/translations/README.md b/packages/translations/README.md
index c1168f40e..c495001dd 100644
--- a/packages/translations/README.md
+++ b/packages/translations/README.md
@@ -23,12 +23,15 @@ pnpm add @onruntime/translations
 Create two files to separate shared config from server-only code:
 
 ```typescript
-// lib/translations.ts (shared config - can be imported by client components)
+// lib/translations.ts (shared config - can be imported anywhere)
 import type { TranslationLoader } from "@onruntime/translations";
+import type { NextRequest } from "next/server";
 
 export const locales = ["en", "fr"];
 export const defaultLocale = locales[0];
 
+export const LOCALE_COOKIE = "NEXT_LOCALE";
+
 export const load: TranslationLoader = (locale, namespace) => {
   try {
     return require(`../locales/${locale}/${namespace}.json`);
@@ -36,6 +39,34 @@ export const load: TranslationLoader = (locale, namespace) => {
     return undefined;
   }
 };
+
+export function getPreferredLocale(request: NextRequest): string {
+  // Check cookie first (user's explicit choice)
+  const cookieLocale = request.cookies.get(LOCALE_COOKIE)?.value;
+  if (cookieLocale && locales.includes(cookieLocale)) {
+    return cookieLocale;
+  }
+
+  // Fall back to Accept-Language header
+  const acceptLanguage = request.headers.get("accept-language");
+  if (!acceptLanguage) return defaultLocale;
+
+  const preferred = acceptLanguage
+    .split(",")
+    .map((lang) => {
+      const [code, priorityToken] = lang.trim().split(";");
+      const priorityMatch = priorityToken?.match(/q=([0-9.]+)/);
+      const priority = priorityMatch ? parseFloat(priorityMatch[1]) : 1.0;
+      return {
+        code: code.split("-")[0].toLowerCase(),
+        priority: Number.isNaN(priority) ? 1.0 : priority,
+      };
+    })
+    .sort((a, b) => b.priority - a.priority)
+    .find((lang) => locales.includes(lang.code));
+
+  return preferred?.code || defaultLocale;
+}
 ```
 
 ```typescript
@@ -65,37 +96,7 @@ The proxy detects the user's language from a `NEXT_LOCALE` cookie (set when user
 import { NextResponse } from "next/server";
 import type { NextRequest } from "next/server";
 
-import { locales, defaultLocale } from "@/lib/translations";
-
-const LOCALE_COOKIE = "NEXT_LOCALE";
-
-function getPreferredLocale(request: NextRequest): string {
-  // Check cookie first (user's explicit choice)
-  const cookieLocale = request.cookies.get(LOCALE_COOKIE)?.value;
-  if (cookieLocale && locales.includes(cookieLocale)) {
-    return cookieLocale;
-  }
-
-  // Fall back to Accept-Language header
-  const acceptLanguage = request.headers.get("accept-language");
-  if (!acceptLanguage) return defaultLocale;
-
-  const preferred = acceptLanguage
-    .split(",")
-    .map((lang) => {
-      const [code, priorityToken] = lang.trim().split(";");
-      const priorityMatch = priorityToken?.match(/q=([0-9.]+)/);
-      const priority = priorityMatch ? parseFloat(priorityMatch[1]) : 1.0;
-      return {
-        code: code.split("-")[0].toLowerCase(),
-        priority: Number.isNaN(priority) ? 1.0 : priority,
-      };
-    })
-    .sort((a, b) => b.priority - a.priority)
-    .find((lang) => locales.includes(lang.code));
-
-  return preferred?.code || defaultLocale;
-}
+import { locales, defaultLocale, LOCALE_COOKIE, getPreferredLocale } from "@/lib/translations";
 
 export function proxy(request: NextRequest) {
   const { pathname } = request.nextUrl;

From f4986a90240475da5912747577000850439a848f Mon Sep 17 00:00:00 2001
From: Antoine Kingue <etorefr@gmail.com>
Date: Mon, 29 Dec 2025 20:57:27 +0100
Subject: [PATCH 38/64] =?UTF-8?q?=F0=9F=93=9D=20fix=20formatting=20in=20re?=
 =?UTF-8?q?adme=20for=20translation=20files=20structure?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 apps/web/src/locales/README.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/apps/web/src/locales/README.md b/apps/web/src/locales/README.md
index d4d7b1f0a..39a7a42df 100644
--- a/apps/web/src/locales/README.md
+++ b/apps/web/src/locales/README.md
@@ -6,7 +6,7 @@ Translation files for the onRuntime website.
 
 The translation files mirror the `src/` structure:
 
-```
+```tree
 locales/
 ├── en/
 │   ├── common.json                    # Shared (buttons, errors, forms)

From b8272be5de1ff8d19f177a55e390d63285776d71 Mon Sep 17 00:00:00 2001
From: Antoine Kingue <etorefr@gmail.com>
Date: Mon, 29 Dec 2025 20:57:48 +0100
Subject: [PATCH 39/64] =?UTF-8?q?=F0=9F=94=A7=20update=20matcher=20regex?=
 =?UTF-8?q?=20in=20proxy=20configuration=20to=20exclude=20api=20routes?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 examples/translations/next-app/proxy.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/examples/translations/next-app/proxy.ts b/examples/translations/next-app/proxy.ts
index 607e9d023..02b76ccd5 100644
--- a/examples/translations/next-app/proxy.ts
+++ b/examples/translations/next-app/proxy.ts
@@ -57,5 +57,5 @@ export function proxy(request: NextRequest) {
 }
 
 export const config = {
-  matcher: ["/((?!_next|favicon.ico).*)"],
+  matcher: ["/((?!_next|favicon.ico|api|.*\\.).*)"],
 };

From e2f16bb050e43bddb2c63a60e157fc13280cbf04 Mon Sep 17 00:00:00 2001
From: Antoine Kingue <etorefr@gmail.com>
Date: Mon, 29 Dec 2025 21:23:39 +0100
Subject: [PATCH 40/64] =?UTF-8?q?=F0=9F=94=A7=20update=20proxy=20matcher?=
 =?UTF-8?q?=20regex=20to=20exclude=20api=20routes=20and=20file=20extension?=
 =?UTF-8?q?s?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/translations/README.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/translations/README.md b/packages/translations/README.md
index c495001dd..da9495c58 100644
--- a/packages/translations/README.md
+++ b/packages/translations/README.md
@@ -148,7 +148,7 @@ export function proxy(request: NextRequest) {
 }
 
 export const config = {
-  matcher: ["/((?!_next|favicon.ico).*)"],
+  matcher: ["/((?!_next|favicon.ico|api|.*\\.).*)"],
 };
 ```
 

From 5b575b4e0fad671d01c1369dd46e6da9b36f6e8d Mon Sep 17 00:00:00 2001
From: Antoine Kingue <etorefr@gmail.com>
Date: Mon, 29 Dec 2025 22:16:50 +0100
Subject: [PATCH 41/64] =?UTF-8?q?=F0=9F=8E=A8=20update=20metadata=20import?=
 =?UTF-8?q?=20paths=20to=20use=20server-specific=20module?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../app/[locale]/(landing)/customer/page.ts   |   2 +-
 apps/web/src/app/[locale]/(landing)/page.ts   |   2 +-
 .../src/app/[locale]/(legal)/company/page.tsx |   2 +-
 .../src/app/[locale]/(legal)/privacy/page.tsx |   2 +-
 .../src/app/[locale]/(legal)/terms/page.tsx   |   2 +-
 .../src/app/[locale]/agency/[city]/page.tsx   |   2 +-
 apps/web/src/app/[locale]/agency/page.tsx     |   2 +-
 .../src/app/[locale]/careers/[id]/page.tsx    |   2 +-
 apps/web/src/app/[locale]/careers/page.tsx    |   2 +-
 apps/web/src/app/[locale]/contact/page.tsx    |   2 +-
 .../glossary/[letter]/[term]/page.tsx         |   2 +-
 .../app/[locale]/glossary/[letter]/page.tsx   |   2 +-
 apps/web/src/app/[locale]/glossary/page.tsx   |   2 +-
 .../app/[locale]/glossary/tag/[tag]/page.tsx  |   2 +-
 .../src/app/[locale]/glossary/tags/page.tsx   |   2 +-
 apps/web/src/app/[locale]/npo/page.tsx        |   2 +-
 .../src/app/[locale]/projects/[id]/page.tsx   |   2 +-
 apps/web/src/app/[locale]/projects/page.tsx   |   2 +-
 .../services/[category]/[service]/page.tsx    |   2 +-
 .../app/[locale]/services/[category]/page.tsx |   2 +-
 apps/web/src/app/[locale]/services/page.tsx   |   2 +-
 apps/web/src/lib/utils/metadata.server.ts     | 201 ++++++++++++++++++
 apps/web/src/lib/utils/metadata.ts            | 193 +----------------
 23 files changed, 225 insertions(+), 211 deletions(-)
 create mode 100644 apps/web/src/lib/utils/metadata.server.ts

diff --git a/apps/web/src/app/[locale]/(landing)/customer/page.ts b/apps/web/src/app/[locale]/(landing)/customer/page.ts
index 3d92132eb..4ffed3831 100644
--- a/apps/web/src/app/[locale]/(landing)/customer/page.ts
+++ b/apps/web/src/app/[locale]/(landing)/customer/page.ts
@@ -1,4 +1,4 @@
-import { constructMetadata } from "@/lib/utils/metadata";
+import { constructMetadata } from "@/lib/utils/metadata.server";
 import { getTranslation } from "@/lib/translations.server";
 import CustomerLanding from "@/screens/marketing/landing/customer";
 
diff --git a/apps/web/src/app/[locale]/(landing)/page.ts b/apps/web/src/app/[locale]/(landing)/page.ts
index 128c3398d..855ddf188 100644
--- a/apps/web/src/app/[locale]/(landing)/page.ts
+++ b/apps/web/src/app/[locale]/(landing)/page.ts
@@ -1,4 +1,4 @@
-import { constructMetadata } from "@/lib/utils/metadata";
+import { constructMetadata } from "@/lib/utils/metadata.server";
 import { getTranslation } from "@/lib/translations.server";
 import VisitorLanding from "@/screens/marketing/landing/visitor";
 
diff --git a/apps/web/src/app/[locale]/(legal)/company/page.tsx b/apps/web/src/app/[locale]/(legal)/company/page.tsx
index 5e8c5c3d6..f8fec2d00 100644
--- a/apps/web/src/app/[locale]/(legal)/company/page.tsx
+++ b/apps/web/src/app/[locale]/(legal)/company/page.tsx
@@ -1,6 +1,6 @@
 import LegalPage from "@/components/marketing/legal/page"
 import { getPageContent } from "@/lib/mdx"
-import { constructMetadata } from "@/lib/utils/metadata"
+import { constructMetadata } from "@/lib/utils/metadata.server"
 import type { Metadata } from "next"
 
 const contentPath = "legal/company"
diff --git a/apps/web/src/app/[locale]/(legal)/privacy/page.tsx b/apps/web/src/app/[locale]/(legal)/privacy/page.tsx
index 19c34f707..a1f50bb33 100644
--- a/apps/web/src/app/[locale]/(legal)/privacy/page.tsx
+++ b/apps/web/src/app/[locale]/(legal)/privacy/page.tsx
@@ -1,6 +1,6 @@
 import LegalPage from "@/components/marketing/legal/page"
 import { getPageContent } from "@/lib/mdx"
-import { constructMetadata } from "@/lib/utils/metadata"
+import { constructMetadata } from "@/lib/utils/metadata.server"
 import type { Metadata } from "next"
 
 const contentPath = "legal/privacy"
diff --git a/apps/web/src/app/[locale]/(legal)/terms/page.tsx b/apps/web/src/app/[locale]/(legal)/terms/page.tsx
index 2809872c6..82c50b5e4 100644
--- a/apps/web/src/app/[locale]/(legal)/terms/page.tsx
+++ b/apps/web/src/app/[locale]/(legal)/terms/page.tsx
@@ -1,6 +1,6 @@
 import LegalPage from "@/components/marketing/legal/page"
 import { getPageContent } from "@/lib/mdx"
-import { constructMetadata } from "@/lib/utils/metadata"
+import { constructMetadata } from "@/lib/utils/metadata.server"
 import type { Metadata } from "next"
 
 const contentPath = "legal/terms"
diff --git a/apps/web/src/app/[locale]/agency/[city]/page.tsx b/apps/web/src/app/[locale]/agency/[city]/page.tsx
index 9c69f7fb3..f92192fa1 100644
--- a/apps/web/src/app/[locale]/agency/[city]/page.tsx
+++ b/apps/web/src/app/[locale]/agency/[city]/page.tsx
@@ -2,7 +2,7 @@ import React from 'react';
 import Image from 'next/image';
 import { notFound } from 'next/navigation';
 import { Metadata } from 'next';
-import { constructMetadata } from '@/lib/utils/metadata';
+import { constructMetadata } from '@/lib/utils/metadata.server';
 import CityHeroSection from '@/components/marketing/agency/city-hero-section';
 import LocalExpertise from '@/components/marketing/agency/local-expertise';
 import LocalPortfolio from '@/components/marketing/agency/local-portfolio';
diff --git a/apps/web/src/app/[locale]/agency/page.tsx b/apps/web/src/app/[locale]/agency/page.tsx
index 17e795d19..b03e2ddb9 100644
--- a/apps/web/src/app/[locale]/agency/page.tsx
+++ b/apps/web/src/app/[locale]/agency/page.tsx
@@ -4,7 +4,7 @@ import DotPattern from "@/components/ui/dot-pattern";
 import { cn } from "@/lib/utils";
 import { ArrowRight, Globe, Laptop, Users } from "lucide-react";
 import Routes from "@/constants/routes";
-import { constructMetadata } from '@/lib/utils/metadata';
+import { constructMetadata } from '@/lib/utils/metadata.server';
 import FranceMap from '@/components/marketing/agency/france-map';
 import { getMajorAgencies } from '@/constants/agencies';
 import { OrganizationSchema } from '@/components/json-ld/organization-schema';
diff --git a/apps/web/src/app/[locale]/careers/[id]/page.tsx b/apps/web/src/app/[locale]/careers/[id]/page.tsx
index 867d17934..11f11a22a 100644
--- a/apps/web/src/app/[locale]/careers/[id]/page.tsx
+++ b/apps/web/src/app/[locale]/careers/[id]/page.tsx
@@ -1,5 +1,5 @@
 import { notFound } from "next/navigation";
-import { constructMetadata } from "@/lib/utils/metadata";
+import { constructMetadata } from "@/lib/utils/metadata.server";
 import { getTranslation } from "@/lib/translations.server";
 import JobDetailPage from "@/screens/marketing/careers/job-details";
 import { JobPosting } from "@/types/job";
diff --git a/apps/web/src/app/[locale]/careers/page.tsx b/apps/web/src/app/[locale]/careers/page.tsx
index f8f4ef904..c6380ed07 100644
--- a/apps/web/src/app/[locale]/careers/page.tsx
+++ b/apps/web/src/app/[locale]/careers/page.tsx
@@ -1,4 +1,4 @@
-import { constructMetadata } from "@/lib/utils/metadata";
+import { constructMetadata } from "@/lib/utils/metadata.server";
 import { getTranslation } from "@/lib/translations.server";
 import CareersPage from "@/screens/marketing/careers";
 
diff --git a/apps/web/src/app/[locale]/contact/page.tsx b/apps/web/src/app/[locale]/contact/page.tsx
index 30807ddad..9027f713c 100644
--- a/apps/web/src/app/[locale]/contact/page.tsx
+++ b/apps/web/src/app/[locale]/contact/page.tsx
@@ -1,4 +1,4 @@
-import { constructMetadata } from "@/lib/utils/metadata";
+import { constructMetadata } from "@/lib/utils/metadata.server";
 import { getTranslation } from "@/lib/translations.server";
 import ContactPage from "@/screens/marketing/contact";
 
diff --git a/apps/web/src/app/[locale]/glossary/[letter]/[term]/page.tsx b/apps/web/src/app/[locale]/glossary/[letter]/[term]/page.tsx
index 9678f7fe6..326486642 100644
--- a/apps/web/src/app/[locale]/glossary/[letter]/[term]/page.tsx
+++ b/apps/web/src/app/[locale]/glossary/[letter]/[term]/page.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import { notFound } from 'next/navigation';
 import { getGlossaryEntry, getRelatedEntries } from "@/lib/glossary";
-import { constructMetadata } from "@/lib/utils/metadata";
+import { constructMetadata } from "@/lib/utils/metadata.server";
 import GlossaryEntryPage from '@/components/glossary/entry-page';
 
 interface TermPageProps {
diff --git a/apps/web/src/app/[locale]/glossary/[letter]/page.tsx b/apps/web/src/app/[locale]/glossary/[letter]/page.tsx
index c54f2706c..f39fae7a0 100644
--- a/apps/web/src/app/[locale]/glossary/[letter]/page.tsx
+++ b/apps/web/src/app/[locale]/glossary/[letter]/page.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import { notFound } from 'next/navigation';
 import { getEntriesByLetter } from "@/lib/glossary";
-import { constructMetadata } from "@/lib/utils/metadata";
+import { constructMetadata } from "@/lib/utils/metadata.server";
 import GlossaryLetterPage from '@/components/glossary/letter-page';
 
 interface LetterPageProps {
diff --git a/apps/web/src/app/[locale]/glossary/page.tsx b/apps/web/src/app/[locale]/glossary/page.tsx
index d02edd1fc..bb8ea2e27 100644
--- a/apps/web/src/app/[locale]/glossary/page.tsx
+++ b/apps/web/src/app/[locale]/glossary/page.tsx
@@ -3,7 +3,7 @@ import { Button } from "@/components/ui/button";
 import DotPattern from "@/components/ui/dot-pattern";
 import { cn } from "@/lib/utils";
 import { getAllGlossaryEntries } from "@/lib/glossary";
-import { constructMetadata } from "@/lib/utils/metadata";
+import { constructMetadata } from "@/lib/utils/metadata.server";
 import { GlossaryAlphabetNav } from "@/components/glossary/alphabet-nav";
 import { GlossarySearch } from "@/components/glossary/search";
 import { Badge } from "@/components/ui/badge";
diff --git a/apps/web/src/app/[locale]/glossary/tag/[tag]/page.tsx b/apps/web/src/app/[locale]/glossary/tag/[tag]/page.tsx
index 158bb7034..afc946e2d 100644
--- a/apps/web/src/app/[locale]/glossary/tag/[tag]/page.tsx
+++ b/apps/web/src/app/[locale]/glossary/tag/[tag]/page.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import { notFound } from 'next/navigation';
 import { getEntriesByTag } from "@/lib/glossary";
-import { constructMetadata } from "@/lib/utils/metadata";
+import { constructMetadata } from "@/lib/utils/metadata.server";
 import GlossaryTagPage from '@/components/glossary/tag-page';
 
 interface TagPageProps {
diff --git a/apps/web/src/app/[locale]/glossary/tags/page.tsx b/apps/web/src/app/[locale]/glossary/tags/page.tsx
index 8d1dabd71..90021cd77 100644
--- a/apps/web/src/app/[locale]/glossary/tags/page.tsx
+++ b/apps/web/src/app/[locale]/glossary/tags/page.tsx
@@ -3,7 +3,7 @@ import Link from 'next/link';
 import { Button } from "@/components/ui/button";
 import { ChevronLeft, Tag as TagIcon } from "lucide-react";
 import { getAllTags } from "@/lib/glossary";
-import { constructMetadata } from "@/lib/utils/metadata";
+import { constructMetadata } from "@/lib/utils/metadata.server";
 
 export async function generateMetadata() {
   return constructMetadata({
diff --git a/apps/web/src/app/[locale]/npo/page.tsx b/apps/web/src/app/[locale]/npo/page.tsx
index 4f4f56aa2..55e953cd4 100644
--- a/apps/web/src/app/[locale]/npo/page.tsx
+++ b/apps/web/src/app/[locale]/npo/page.tsx
@@ -1,4 +1,4 @@
-import { constructMetadata } from "@/lib/utils/metadata";
+import { constructMetadata } from "@/lib/utils/metadata.server";
 import { getTranslation } from "@/lib/translations.server";
 import NPOPage from "@/screens/marketing/npo";
 
diff --git a/apps/web/src/app/[locale]/projects/[id]/page.tsx b/apps/web/src/app/[locale]/projects/[id]/page.tsx
index c9aaf16f4..4f5361a59 100644
--- a/apps/web/src/app/[locale]/projects/[id]/page.tsx
+++ b/apps/web/src/app/[locale]/projects/[id]/page.tsx
@@ -2,7 +2,7 @@ import { notFound } from "next/navigation";
 import Projects from "@/constants/projects";
 import ProjectPage from "@/screens/marketing/projects/details";
 import type { Metadata } from "next";
-import { constructMetadata } from "@/lib/utils/metadata";
+import { constructMetadata } from "@/lib/utils/metadata.server";
 import { getTranslation } from "@/lib/translations.server";
 import { ProjectSchema, ProjectTeamSchema } from "@/components/json-ld/project-schema";
 import { ORGANIZATION_DATA } from "@/components/json-ld/constants";
diff --git a/apps/web/src/app/[locale]/projects/page.tsx b/apps/web/src/app/[locale]/projects/page.tsx
index 04d386a52..bed3748b3 100644
--- a/apps/web/src/app/[locale]/projects/page.tsx
+++ b/apps/web/src/app/[locale]/projects/page.tsx
@@ -1,4 +1,4 @@
-import { constructMetadata } from "@/lib/utils/metadata";
+import { constructMetadata } from "@/lib/utils/metadata.server";
 import { getTranslation } from "@/lib/translations.server";
 import ProjectsPage from "@/screens/marketing/projects";
 
diff --git a/apps/web/src/app/[locale]/services/[category]/[service]/page.tsx b/apps/web/src/app/[locale]/services/[category]/[service]/page.tsx
index a71f03237..f8bf6f5f5 100644
--- a/apps/web/src/app/[locale]/services/[category]/[service]/page.tsx
+++ b/apps/web/src/app/[locale]/services/[category]/[service]/page.tsx
@@ -6,7 +6,7 @@ import FeatureSection from '@/components/marketing/services/feature-section';
 import TestimonialsSection from '@/components/marketing/services/testimonials-section';
 import FAQSection from '@/components/marketing/services/faq-section';
 import { ServiceCategoryData, SubService } from '@/types/service';
-import { constructMetadata } from '@/lib/utils/metadata';
+import { constructMetadata } from '@/lib/utils/metadata.server';
 
 type Props = {
   params: Promise<{
diff --git a/apps/web/src/app/[locale]/services/[category]/page.tsx b/apps/web/src/app/[locale]/services/[category]/page.tsx
index 994813b5c..641e3e382 100644
--- a/apps/web/src/app/[locale]/services/[category]/page.tsx
+++ b/apps/web/src/app/[locale]/services/[category]/page.tsx
@@ -2,7 +2,7 @@ import { notFound } from 'next/navigation';
 import Services from '@/constants/services';
 import ServiceOverviewPage from '@/components/marketing/services/service-overview';
 import { ServiceCategoryData } from '@/types/service';
-import { constructMetadata } from '@/lib/utils/metadata';
+import { constructMetadata } from '@/lib/utils/metadata.server';
 import { getTranslation } from '@/lib/translations.server';
 
 type Props = {
diff --git a/apps/web/src/app/[locale]/services/page.tsx b/apps/web/src/app/[locale]/services/page.tsx
index 4d89cf036..a0e5d81fc 100644
--- a/apps/web/src/app/[locale]/services/page.tsx
+++ b/apps/web/src/app/[locale]/services/page.tsx
@@ -1,4 +1,4 @@
-import { constructMetadata } from "@/lib/utils/metadata";
+import { constructMetadata } from "@/lib/utils/metadata.server";
 import ServicesPage from "@/screens/marketing/services";
 
 export async function generateMetadata() {
diff --git a/apps/web/src/lib/utils/metadata.server.ts b/apps/web/src/lib/utils/metadata.server.ts
new file mode 100644
index 000000000..f43921677
--- /dev/null
+++ b/apps/web/src/lib/utils/metadata.server.ts
@@ -0,0 +1,201 @@
+import "server-only";
+
+import { Metadata } from "next";
+import { headers } from "next/headers";
+
+import { locales, defaultLocale } from "@/lib/translations";
+import { getTranslation } from "@/lib/translations.server";
+import { siteConfig } from "@/constants/site-config";
+
+import {
+  toOgLocale,
+  getOGImageUrl,
+  getPathWithoutLocale,
+  type OGImageType,
+} from "./metadata";
+
+// Re-export pure utilities for convenience
+export { toOgLocale, getOGImageUrl, getPathWithoutLocale, type OGImageType } from "./metadata";
+
+export async function constructMetadata({
+  title = siteConfig.name,
+  description,
+  ogType = "website",
+  ogImage,
+  ogImageType = "default",
+  noIndex = false,
+}: {
+  title?: string;
+  description?: string;
+  ogType?: "website" | "article";
+  ogImage?: string;
+  ogImageType?: OGImageType;
+  noIndex?: boolean;
+} = {}): Promise<Metadata> {
+  const canonical = await generateCanonical();
+  const languages = await generateAlternates();
+  const currentLocale = await getCurrentLocale();
+
+  // Get translated default description if not provided
+  const { t } = await getTranslation("constants/site-config");
+  const finalDescription = description ?? t("description");
+
+  // Format title consistently
+  const formattedTitle = title === siteConfig.name
+    ? title
+    : `${title} | ${siteConfig.name}`;
+
+  const finalOgImage = ogImage || getOGImageUrl({
+    title,
+    description: finalDescription,
+    type: ogImageType,
+  });
+
+  return {
+    title: formattedTitle,
+    description: finalDescription,
+
+    metadataBase: new URL(siteConfig.url),
+
+    alternates: {
+      canonical,
+      languages,
+    },
+
+    authors: [{ name: "onRuntime Studio", url: siteConfig.url }],
+    creator: "onRuntime Studio",
+    publisher: "onRuntime Studio",
+
+    openGraph: {
+      type: ogType,
+      locale: toOgLocale(currentLocale),
+      url: canonical,
+      title: formattedTitle,
+      description: finalDescription,
+      siteName: siteConfig.name,
+      images: [
+        {
+          url: finalOgImage,
+          width: 1200,
+          height: 630,
+          alt: title,
+        },
+      ],
+    },
+
+    twitter: {
+      card: "summary_large_image",
+      title: formattedTitle,
+      description: finalDescription,
+      images: [finalOgImage],
+      creator: "@onruntime",
+      site: "@onruntime",
+    },
+
+    icons: {
+      icon: [
+        { url: "/favicon.ico" },
+      ],
+      shortcut: "/favicon-16x16.png",
+      apple: [
+        { url: "/apple-touch-icon.png" },
+      ],
+    },
+
+    manifest: "/site.webmanifest",
+
+    ...(noIndex && {
+      robots: {
+        index: false,
+        follow: false,
+      },
+    }),
+  };
+}
+
+/**
+ * Get the current locale from headers
+ */
+async function getCurrentLocale(): Promise<string> {
+  const headersList = await headers();
+  return headersList.get("x-locale") || defaultLocale;
+}
+
+/**
+ * Get the current pathname from headers
+ */
+async function getPathname(): Promise<string> {
+  const headersList = await headers();
+  const serverUrl = siteConfig.url;
+
+  // Try x-pathname or x-invoke-path first
+  let pathname = headersList.get("x-pathname") || headersList.get("x-invoke-path");
+
+  // Fall back to referer, but only if it matches our origin
+  if (!pathname) {
+    const referer = headersList.get("referer");
+    if (referer) {
+      try {
+        const refererUrl = new URL(referer);
+        const serverOrigin = new URL(serverUrl).origin;
+        if (refererUrl.origin === serverOrigin) {
+          pathname = refererUrl.pathname;
+        }
+      } catch {
+        // Invalid URL, ignore referer
+      }
+    }
+  }
+
+  // Default to root
+  if (!pathname) {
+    pathname = "/";
+  }
+
+  // Remove query string and ensure leading slash
+  const cleanPath = pathname.split("?")[0] || "/";
+  return cleanPath.startsWith("/") ? cleanPath : `/${cleanPath}`;
+}
+
+/**
+ * Generate a canonical URL automatically from the current request
+ * @returns The full canonical URL for the current page (with locale prefix)
+ */
+export async function generateCanonical(): Promise<string> {
+  const pathname = await getPathname();
+  const serverUrl = siteConfig.url;
+
+  const canonical = `${serverUrl}${pathname}`
+    .replace(/([^:]\/)\/+/g, "$1")
+    .replace(/\/$/, "");
+
+  return canonical || serverUrl;
+}
+
+/**
+ * Generate hreflang alternate URLs for all locales
+ * @returns Object with locale codes as keys and URLs as values
+ */
+export async function generateAlternates(): Promise<Record<string, string>> {
+  const pathname = await getPathname();
+  const pathWithoutLocale = getPathWithoutLocale(pathname);
+  const serverUrl = siteConfig.url;
+
+  const alternates: Record<string, string> = {};
+
+  for (const locale of locales) {
+    if (locale === defaultLocale) {
+      // Default locale has no prefix
+      alternates[locale] = `${serverUrl}${pathWithoutLocale}`.replace(/\/$/, "") || serverUrl;
+    } else {
+      // Other locales have prefix
+      const localePath = pathWithoutLocale === "/" ? `/${locale}` : `/${locale}${pathWithoutLocale}`;
+      alternates[locale] = `${serverUrl}${localePath}`;
+    }
+  }
+
+  // x-default points to the default locale version
+  alternates["x-default"] = alternates[defaultLocale];
+
+  return alternates;
+}
diff --git a/apps/web/src/lib/utils/metadata.ts b/apps/web/src/lib/utils/metadata.ts
index a85c65cdc..8c5d4fe84 100644
--- a/apps/web/src/lib/utils/metadata.ts
+++ b/apps/web/src/lib/utils/metadata.ts
@@ -1,15 +1,11 @@
-import { Metadata } from "next";
-import { headers } from "next/headers";
-
-import { locales, defaultLocale } from "@/lib/translations";
-import { getTranslation } from "@/lib/translations.server";
+import { locales } from "@/lib/translations";
 import { siteConfig } from "@/constants/site-config";
 
 /**
  * Convert locale code to OpenGraph locale format
  * e.g., "fr" → "fr_FR", "en" → "en_US"
  */
-function toOgLocale(locale: string): string {
+export function toOgLocale(locale: string): string {
   const countryOverrides: Record<string, string> = {
     en: "US", // English defaults to US
   };
@@ -37,194 +33,11 @@ export function getOGImageUrl({
   return `${siteConfig.url}/api/og?${params.toString()}`;
 }
 
-export async function constructMetadata({
-  title = siteConfig.name,
-  description,
-  ogType = "website",
-  ogImage,
-  ogImageType = "default",
-  noIndex = false,
-}: {
-  title?: string;
-  description?: string;
-  ogType?: "website" | "article";
-  ogImage?: string;
-  ogImageType?: OGImageType;
-  noIndex?: boolean;
-} = {}): Promise<Metadata> {
-  const canonical = await generateCanonical();
-  const languages = await generateAlternates();
-  const currentLocale = await getCurrentLocale();
-
-  // Get translated default description if not provided
-  const { t } = await getTranslation("constants/site-config");
-  const finalDescription = description ?? t("description");
-
-  // Format title consistently
-  const formattedTitle = title === siteConfig.name
-    ? title
-    : `${title} | ${siteConfig.name}`;
-
-  const finalOgImage = ogImage || getOGImageUrl({
-    title,
-    description: finalDescription,
-    type: ogImageType,
-  });
-
-  return {
-    title: formattedTitle,
-    description: finalDescription,
-
-    metadataBase: new URL(siteConfig.url),
-
-    alternates: {
-      canonical,
-      languages,
-    },
-
-    authors: [{ name: "onRuntime Studio", url: siteConfig.url }],
-    creator: "onRuntime Studio",
-    publisher: "onRuntime Studio",
-
-    openGraph: {
-      type: ogType,
-      locale: toOgLocale(currentLocale),
-      url: canonical,
-      title: formattedTitle,
-      description: finalDescription,
-      siteName: siteConfig.name,
-      images: [
-        {
-          url: finalOgImage,
-          width: 1200,
-          height: 630,
-          alt: title,
-        },
-      ],
-    },
-
-    twitter: {
-      card: "summary_large_image",
-      title: formattedTitle,
-      description: finalDescription,
-      images: [finalOgImage],
-      creator: "@onruntime",
-      site: "@onruntime",
-    },
-
-    icons: {
-      icon: [
-        { url: "/favicon.ico" },
-      ],
-      shortcut: "/favicon-16x16.png",
-      apple: [
-        { url: "/apple-touch-icon.png" },
-      ],
-    },
-
-    manifest: "/site.webmanifest",
-
-    ...(noIndex && {
-      robots: {
-        index: false,
-        follow: false,
-      },
-    }),
-  };
-}
-
-/**
- * Get the current locale from headers
- */
-async function getCurrentLocale(): Promise<string> {
-  const headersList = await headers();
-  return headersList.get("x-locale") || defaultLocale;
-}
-
-/**
- * Get the current pathname from headers
- */
-async function getPathname(): Promise<string> {
-  const headersList = await headers();
-  const serverUrl = siteConfig.url;
-
-  // Try x-pathname or x-invoke-path first
-  let pathname = headersList.get("x-pathname") || headersList.get("x-invoke-path");
-
-  // Fall back to referer, but only if it matches our origin
-  if (!pathname) {
-    const referer = headersList.get("referer");
-    if (referer) {
-      try {
-        const refererUrl = new URL(referer);
-        const serverOrigin = new URL(serverUrl).origin;
-        if (refererUrl.origin === serverOrigin) {
-          pathname = refererUrl.pathname;
-        }
-      } catch {
-        // Invalid URL, ignore referer
-      }
-    }
-  }
-
-  // Default to root
-  if (!pathname) {
-    pathname = "/";
-  }
-
-  // Remove query string and ensure leading slash
-  const cleanPath = pathname.split("?")[0] || "/";
-  return cleanPath.startsWith("/") ? cleanPath : `/${cleanPath}`;
-}
-
 /**
  * Get the path without locale prefix
  */
-function getPathWithoutLocale(pathname: string): string {
+export function getPathWithoutLocale(pathname: string): string {
   const segments = pathname.split("/").filter(Boolean);
   const hasLocalePrefix = locales.includes(segments[0]);
   return hasLocalePrefix ? `/${segments.slice(1).join("/")}` : pathname;
 }
-
-/**
- * Generate a canonical URL automatically from the current request
- * @returns The full canonical URL for the current page (with locale prefix)
- */
-export async function generateCanonical(): Promise<string> {
-  const pathname = await getPathname();
-  const serverUrl = siteConfig.url;
-
-  const canonical = `${serverUrl}${pathname}`
-    .replace(/([^:]\/)\/+/g, "$1")
-    .replace(/\/$/, "");
-
-  return canonical || serverUrl;
-}
-
-/**
- * Generate hreflang alternate URLs for all locales
- * @returns Object with locale codes as keys and URLs as values
- */
-export async function generateAlternates(): Promise<Record<string, string>> {
-  const pathname = await getPathname();
-  const pathWithoutLocale = getPathWithoutLocale(pathname);
-  const serverUrl = siteConfig.url;
-
-  const alternates: Record<string, string> = {};
-
-  for (const locale of locales) {
-    if (locale === defaultLocale) {
-      // Default locale has no prefix
-      alternates[locale] = `${serverUrl}${pathWithoutLocale}`.replace(/\/$/, "") || serverUrl;
-    } else {
-      // Other locales have prefix
-      const localePath = pathWithoutLocale === "/" ? `/${locale}` : `/${locale}${pathWithoutLocale}`;
-      alternates[locale] = `${serverUrl}${localePath}`;
-    }
-  }
-
-  // x-default points to the default locale version
-  alternates["x-default"] = alternates[defaultLocale];
-
-  return alternates;
-}
\ No newline at end of file

From 34956531117a65c57f383851b7b7470687b5e1dd Mon Sep 17 00:00:00 2001
From: Antoine Kingue <etorefr@gmail.com>
Date: Mon, 29 Dec 2025 22:23:00 +0100
Subject: [PATCH 42/64] =?UTF-8?q?=F0=9F=94=92=EF=B8=8F=20improve=20cookie?=
 =?UTF-8?q?=20security=20settings=20by=20adding=20http-only,=20secure,=20a?=
 =?UTF-8?q?nd=20same-site=20attributes?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 apps/web/src/proxy.ts                   | 6 ++++++
 examples/translations/next-app/proxy.ts | 6 ++++++
 packages/translations/README.md         | 6 ++++++
 3 files changed, 18 insertions(+)

diff --git a/apps/web/src/proxy.ts b/apps/web/src/proxy.ts
index 02b76ccd5..bf701fee8 100644
--- a/apps/web/src/proxy.ts
+++ b/apps/web/src/proxy.ts
@@ -17,6 +17,9 @@ export function proxy(request: NextRequest) {
     response.cookies.set(LOCALE_COOKIE, defaultLocale, {
       path: "/",
       maxAge: 60 * 60 * 24 * 365, // 1 year
+      httpOnly: true,
+      secure: true,
+      sameSite: "lax",
     });
     return response;
   }
@@ -32,6 +35,9 @@ export function proxy(request: NextRequest) {
     response.cookies.set(LOCALE_COOKIE, pathnameLocale, {
       path: "/",
       maxAge: 60 * 60 * 24 * 365, // 1 year
+      httpOnly: true,
+      secure: true,
+      sameSite: "lax",
     });
     return response;
   }
diff --git a/examples/translations/next-app/proxy.ts b/examples/translations/next-app/proxy.ts
index 02b76ccd5..bf701fee8 100644
--- a/examples/translations/next-app/proxy.ts
+++ b/examples/translations/next-app/proxy.ts
@@ -17,6 +17,9 @@ export function proxy(request: NextRequest) {
     response.cookies.set(LOCALE_COOKIE, defaultLocale, {
       path: "/",
       maxAge: 60 * 60 * 24 * 365, // 1 year
+      httpOnly: true,
+      secure: true,
+      sameSite: "lax",
     });
     return response;
   }
@@ -32,6 +35,9 @@ export function proxy(request: NextRequest) {
     response.cookies.set(LOCALE_COOKIE, pathnameLocale, {
       path: "/",
       maxAge: 60 * 60 * 24 * 365, // 1 year
+      httpOnly: true,
+      secure: true,
+      sameSite: "lax",
     });
     return response;
   }
diff --git a/packages/translations/README.md b/packages/translations/README.md
index da9495c58..9ee939ce2 100644
--- a/packages/translations/README.md
+++ b/packages/translations/README.md
@@ -111,6 +111,9 @@ export function proxy(request: NextRequest) {
     response.cookies.set(LOCALE_COOKIE, defaultLocale, {
       path: "/",
       maxAge: 60 * 60 * 24 * 365, // 1 year
+      httpOnly: true,
+      secure: true,
+      sameSite: "lax",
     });
     return response;
   }
@@ -126,6 +129,9 @@ export function proxy(request: NextRequest) {
     response.cookies.set(LOCALE_COOKIE, pathnameLocale, {
       path: "/",
       maxAge: 60 * 60 * 24 * 365, // 1 year
+      httpOnly: true,
+      secure: true,
+      sameSite: "lax",
     });
     return response;
   }

From 482ec067fea479e2290e30e76fc0828dd5d32f1c Mon Sep 17 00:00:00 2001
From: Antoine Kingue <etorefr@gmail.com>
Date: Mon, 29 Dec 2025 23:32:45 +0100
Subject: [PATCH 43/64] =?UTF-8?q?=F0=9F=8E=A8=20improve=20glossary=20compo?=
 =?UTF-8?q?nents=20with=20translations=20and=20improve=20content=20structu?=
 =?UTF-8?q?re?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../glossary/[letter]/[term]/page.tsx         |  9 ++-
 .../app/[locale]/glossary/[letter]/page.tsx   | 10 ++-
 apps/web/src/app/[locale]/glossary/page.tsx   | 24 +++---
 .../app/[locale]/glossary/tag/[tag]/page.tsx  |  7 +-
 .../src/app/[locale]/glossary/tags/page.tsx   | 29 +++----
 .../src/components/glossary/entry-page.tsx    | 12 +--
 .../src/components/glossary/letter-page.tsx   | 15 ++--
 apps/web/src/components/glossary/search.tsx   |  8 +-
 apps/web/src/components/glossary/tag-page.tsx | 17 +++--
 apps/web/src/content/en/glossary/api.mdx      | 38 ++++++++++
 apps/web/src/content/en/glossary/backend.mdx  | 46 ++++++++++++
 .../web/src/content/en/glossary/framework.mdx | 48 ++++++++++++
 .../web/src/content/{ => fr}/glossary/api.mdx |  0
 .../src/content/{ => fr}/glossary/backend.mdx |  0
 .../content/{ => fr}/glossary/framework.mdx   |  0
 apps/web/src/lib/glossary.tsx                 | 75 +++++++++++--------
 .../web/src/locales/en/app/glossary/page.json | 44 +++++++++++
 .../src/locales/en/components/glossary.json   |  8 ++
 .../web/src/locales/fr/app/glossary/page.json | 44 +++++++++++
 .../src/locales/fr/components/glossary.json   |  8 ++
 20 files changed, 354 insertions(+), 88 deletions(-)
 create mode 100644 apps/web/src/content/en/glossary/api.mdx
 create mode 100644 apps/web/src/content/en/glossary/backend.mdx
 create mode 100644 apps/web/src/content/en/glossary/framework.mdx
 rename apps/web/src/content/{ => fr}/glossary/api.mdx (100%)
 rename apps/web/src/content/{ => fr}/glossary/backend.mdx (100%)
 rename apps/web/src/content/{ => fr}/glossary/framework.mdx (100%)
 create mode 100644 apps/web/src/locales/en/components/glossary.json
 create mode 100644 apps/web/src/locales/fr/components/glossary.json

diff --git a/apps/web/src/app/[locale]/glossary/[letter]/[term]/page.tsx b/apps/web/src/app/[locale]/glossary/[letter]/[term]/page.tsx
index 326486642..e8ff1ffae 100644
--- a/apps/web/src/app/[locale]/glossary/[letter]/[term]/page.tsx
+++ b/apps/web/src/app/[locale]/glossary/[letter]/[term]/page.tsx
@@ -1,7 +1,7 @@
-import React from 'react';
 import { notFound } from 'next/navigation';
 import { getGlossaryEntry, getRelatedEntries } from "@/lib/glossary";
 import { constructMetadata } from "@/lib/utils/metadata.server";
+import { getTranslation } from "@/lib/translations.server";
 import GlossaryEntryPage from '@/components/glossary/entry-page';
 
 interface TermPageProps {
@@ -14,18 +14,19 @@ interface TermPageProps {
 export async function generateMetadata({
   params
 }: TermPageProps) {
+  const { t } = await getTranslation('app/glossary/page');
   const { letter, term } = await params;
   const entry = await getGlossaryEntry(letter, term);
 
   if (!entry) {
     return constructMetadata({
-      title: "Terme non trouvé | Glossaire",
-      description: "Ce terme n'existe pas dans notre glossaire.",
+      title: t('term.metadata.not-found.title'),
+      description: t('term.metadata.not-found.description'),
     });
   }
 
   return constructMetadata({
-    title: `${entry.term} | Glossaire`,
+    title: `${entry.term} | ${t('metadata.title')}`,
     description: entry.shortDescription,
   });
 }
diff --git a/apps/web/src/app/[locale]/glossary/[letter]/page.tsx b/apps/web/src/app/[locale]/glossary/[letter]/page.tsx
index f39fae7a0..e4e71daee 100644
--- a/apps/web/src/app/[locale]/glossary/[letter]/page.tsx
+++ b/apps/web/src/app/[locale]/glossary/[letter]/page.tsx
@@ -2,6 +2,7 @@ import React from 'react';
 import { notFound } from 'next/navigation';
 import { getEntriesByLetter } from "@/lib/glossary";
 import { constructMetadata } from "@/lib/utils/metadata.server";
+import { getTranslation } from "@/lib/translations.server";
 import GlossaryLetterPage from '@/components/glossary/letter-page';
 
 interface LetterPageProps {
@@ -13,19 +14,20 @@ interface LetterPageProps {
 export async function generateMetadata({
   params
 }: LetterPageProps) {
+  const { t } = await getTranslation('app/glossary/page');
   const { letter } = await params;
   const sanitizedLetter = letter.toLowerCase();
 
   if (!sanitizedLetter.match(/^[a-z]$/)) {
     return constructMetadata({
-      title: "Lettre non valide | Glossaire",
-      description: "Cette lettre n'est pas valide.",
+      title: t('letter.metadata.invalid.title'),
+      description: t('letter.metadata.invalid.description'),
     });
   }
 
   return constructMetadata({
-    title: `Termes commençant par ${sanitizedLetter.toUpperCase()} | Glossaire`,
-    description: `Découvrez tous les termes du glossaire commençant par la lettre ${sanitizedLetter.toUpperCase()}.`,
+    title: t('letter.metadata.title', { letter: sanitizedLetter.toUpperCase() }),
+    description: t('letter.metadata.description', { letter: sanitizedLetter.toUpperCase() }),
   });
 }
 
diff --git a/apps/web/src/app/[locale]/glossary/page.tsx b/apps/web/src/app/[locale]/glossary/page.tsx
index bb8ea2e27..3c1dea695 100644
--- a/apps/web/src/app/[locale]/glossary/page.tsx
+++ b/apps/web/src/app/[locale]/glossary/page.tsx
@@ -19,12 +19,13 @@ export async function generateMetadata() {
 }
 
 export default async function GlossaryPage() {
+  const { t } = await getTranslation('app/glossary/page');
   const entries = await getAllGlossaryEntries();
-  
-  // Extraction des tags uniques pour le filtrage
+
+  // Extract unique tags for filtering
   const uniqueTags = [...new Set(entries.flatMap(entry => entry.tags || []))].sort();
-  
-  // Regroupement par lettre pour l'affichage
+
+  // Group entries by letter for display
   const entriesByLetter = entries.reduce((acc, entry) => {
     const letter = entry.letter.toLowerCase();
     if (!acc[letter]) {
@@ -34,7 +35,7 @@ export default async function GlossaryPage() {
     return acc;
   }, {} as Record<string, typeof entries>);
 
-  // Récupérer les lettres pour lesquelles nous avons des entrées
+  // Get letters for which we have entries
   const availableLetters = Object.keys(entriesByLetter).sort();
   
   return (
@@ -43,12 +44,11 @@ export default async function GlossaryPage() {
         {/* Hero Section */}
         <div className="relative max-w-2xl mx-auto flex flex-col items-center gap-6 text-center">
           <h1 className="font-semibold text-4xl md:text-5xl text-foreground">
-            Glossaire
+            {t('hero.title')}
           </h1>
-          
+
           <p className="text-muted-foreground">
-            Explorez notre glossaire complet des termes techniques en développement web, 
-            design UI/UX et gestion de projet digital.
+            {t('hero.description')}
           </p>
 
           <DotPattern
@@ -96,7 +96,7 @@ export default async function GlossaryPage() {
                 <div className="h-px flex-grow bg-border"></div>
                 <Link href={`/glossary/${letter}`}>
                   <Button variant="outline" size="sm">
-                    Voir tous
+                    {t('view-all')}
                   </Button>
                 </Link>
               </div>
@@ -136,10 +136,10 @@ export default async function GlossaryPage() {
         {availableLetters.length === 0 && (
           <div className="flex flex-col items-center justify-center py-12 text-center">
             <p className="text-muted-foreground mb-4">
-              Aucun terme n&apos;a encore été ajouté au glossaire.
+              {t('empty.title')}
             </p>
             <p className="text-sm text-muted-foreground">
-              Revenez bientôt pour découvrir notre glossaire complet.
+              {t('empty.subtitle')}
             </p>
           </div>
         )}
diff --git a/apps/web/src/app/[locale]/glossary/tag/[tag]/page.tsx b/apps/web/src/app/[locale]/glossary/tag/[tag]/page.tsx
index afc946e2d..b2eb17e12 100644
--- a/apps/web/src/app/[locale]/glossary/tag/[tag]/page.tsx
+++ b/apps/web/src/app/[locale]/glossary/tag/[tag]/page.tsx
@@ -1,7 +1,7 @@
-import React from 'react';
 import { notFound } from 'next/navigation';
 import { getEntriesByTag } from "@/lib/glossary";
 import { constructMetadata } from "@/lib/utils/metadata.server";
+import { getTranslation } from "@/lib/translations.server";
 import GlossaryTagPage from '@/components/glossary/tag-page';
 
 interface TagPageProps {
@@ -13,12 +13,13 @@ interface TagPageProps {
 export async function generateMetadata({
   params
 }: TagPageProps) {
+  const { t } = await getTranslation('app/glossary/page');
   const { tag } = await params;
   const decodedTag = decodeURIComponent(tag);
 
   return constructMetadata({
-    title: `Termes liés à ${decodedTag} | Glossaire`,
-    description: `Découvrez tous les termes du glossaire liés à la catégorie ${decodedTag}.`,
+    title: t('tag.metadata.title', { tag: decodedTag }),
+    description: t('tag.metadata.description', { tag: decodedTag }),
   });
 }
 
diff --git a/apps/web/src/app/[locale]/glossary/tags/page.tsx b/apps/web/src/app/[locale]/glossary/tags/page.tsx
index 90021cd77..757d2e826 100644
--- a/apps/web/src/app/[locale]/glossary/tags/page.tsx
+++ b/apps/web/src/app/[locale]/glossary/tags/page.tsx
@@ -1,20 +1,23 @@
-import React from 'react';
 import Link from 'next/link';
 import { Button } from "@/components/ui/button";
 import { ChevronLeft, Tag as TagIcon } from "lucide-react";
 import { getAllTags } from "@/lib/glossary";
 import { constructMetadata } from "@/lib/utils/metadata.server";
+import { getTranslation } from "@/lib/translations.server";
 
 export async function generateMetadata() {
+  const { t } = await getTranslation('app/glossary/page');
   return constructMetadata({
-    title: "Tags du glossaire",
-    description: "Explorez les différentes catégories de termes disponibles dans notre glossaire technique.",
+    title: t('tags.metadata.title'),
+    description: t('tags.metadata.description'),
   });
 }
 
 export default async function TagsPage() {
+  const { t } = await getTranslation('app/glossary/page');
+  const { t: tComponents } = await getTranslation('components/glossary');
   const tags = await getAllTags();
-  
+
   return (
     <main className="min-h-screen pt-32 pb-16">
       <div className="px-4 md:px-0 max-w-5xl mx-auto">
@@ -23,24 +26,24 @@ export default async function TagsPage() {
           <Link href="/glossary">
             <Button variant="ghost" className="pl-0 hover:pl-0">
               <ChevronLeft className="mr-2 h-4 w-4" />
-              Retour au glossaire
+              {tComponents('back-to-glossary')}
             </Button>
           </Link>
         </div>
-        
+
         {/* Header */}
         <div className="mb-12">
-          <h1 className="text-4xl font-semibold text-foreground mb-4">Catégories du glossaire</h1>
+          <h1 className="text-4xl font-semibold text-foreground mb-4">{t('tags.title')}</h1>
           <p className="text-muted-foreground text-lg">
-            Explorez les {tags.length} catégories de termes disponibles dans notre glossaire technique.
+            {t('tags.description', { count: tags.length })}
           </p>
         </div>
-        
+
         {/* Tags grid */}
         <div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4">
           {tags.map(tag => (
-            <Link 
-              key={tag} 
+            <Link
+              key={tag}
               href={`/glossary/tag/${encodeURIComponent(tag)}`}
               className="p-4 border rounded-lg hover:border-primary transition-colors flex items-center gap-3"
             >
@@ -49,12 +52,12 @@ export default async function TagsPage() {
             </Link>
           ))}
         </div>
-        
+
         {/* Empty state */}
         {tags.length === 0 && (
           <div className="text-center py-12">
             <p className="text-muted-foreground">
-              Aucune catégorie n&apos;est disponible pour le moment.
+              {t('tags.empty')}
             </p>
           </div>
         )}
diff --git a/apps/web/src/components/glossary/entry-page.tsx b/apps/web/src/components/glossary/entry-page.tsx
index 2a1b33e16..5fa5e553d 100644
--- a/apps/web/src/components/glossary/entry-page.tsx
+++ b/apps/web/src/components/glossary/entry-page.tsx
@@ -1,19 +1,21 @@
-import React from 'react'
 import { Button } from "@/components/ui/button"
 import { Badge } from "@/components/ui/badge"
 import { ChevronLeft, Tag as TagIcon } from "lucide-react"
 import { Link } from "@onruntime/translations/next"
 import { GlossaryEntry } from '@/types/glossary'
+import { getTranslation } from "@/lib/translations.server"
 
 interface GlossaryEntryPageProps {
   entry: GlossaryEntry;
   relatedEntries?: GlossaryEntry[];
 }
 
-const GlossaryEntryPage: React.FC<GlossaryEntryPageProps> = ({
+const GlossaryEntryPage = async ({
   entry,
   relatedEntries = []
-}) => {
+}: GlossaryEntryPageProps) => {
+  const { t } = await getTranslation('components/glossary');
+
   return (
     <main className="min-h-screen pt-32 pb-16">
       <div className="px-4 md:px-0 max-w-3xl mx-auto">
@@ -22,7 +24,7 @@ const GlossaryEntryPage: React.FC<GlossaryEntryPageProps> = ({
           <Link href="/glossary">
             <Button variant="ghost" className="pl-0 hover:pl-0">
               <ChevronLeft className="mr-2 h-4 w-4" />
-              Retour au glossaire
+              {t('back-to-glossary')}
             </Button>
           </Link>
         </div>
@@ -54,7 +56,7 @@ const GlossaryEntryPage: React.FC<GlossaryEntryPageProps> = ({
         {/* Related terms */}
         {relatedEntries.length > 0 && (
           <div className="mt-12 pt-8 border-t">
-            <h2 className="text-2xl font-semibold text-foreground mb-4">Termes associés</h2>
+            <h2 className="text-2xl font-semibold text-foreground mb-4">{t('related-terms')}</h2>
             <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
               {relatedEntries.map(related => (
                 <Link 
diff --git a/apps/web/src/components/glossary/letter-page.tsx b/apps/web/src/components/glossary/letter-page.tsx
index ec5ab3351..0f41988af 100644
--- a/apps/web/src/components/glossary/letter-page.tsx
+++ b/apps/web/src/components/glossary/letter-page.tsx
@@ -1,19 +1,22 @@
-import React from 'react'
 import Link from 'next/link'
 import { Button } from "@/components/ui/button"
 import { Badge } from "@/components/ui/badge"
 import { ChevronLeft } from "lucide-react"
 import { GlossaryEntry } from '@/types/glossary'
+import { getTranslation } from "@/lib/translations.server"
 
 interface GlossaryLetterPageProps {
   letter: string;
   entries: GlossaryEntry[];
 }
 
-const GlossaryLetterPage: React.FC<GlossaryLetterPageProps> = ({
+const GlossaryLetterPage = async ({
   letter,
   entries
-}) => {
+}: GlossaryLetterPageProps) => {
+  const { t } = await getTranslation('app/glossary/page');
+  const { t: tComponents } = await getTranslation('components/glossary');
+
   return (
     <main className="min-h-screen pt-32 pb-16">
       <div className="px-4 md:px-0 max-w-5xl mx-auto">
@@ -22,16 +25,16 @@ const GlossaryLetterPage: React.FC<GlossaryLetterPageProps> = ({
           <Link href="/glossary">
             <Button variant="ghost" className="pl-0 hover:pl-0">
               <ChevronLeft className="mr-2 h-4 w-4" />
-              Retour au glossaire
+              {tComponents('back-to-glossary')}
             </Button>
           </Link>
         </div>
-        
+
         {/* Letter header */}
         <div className="mb-12">
           <h1 className="text-5xl font-bold text-foreground uppercase mb-2">{letter}</h1>
           <p className="text-muted-foreground text-lg">
-            {entries.length} terme{entries.length > 1 ? 's' : ''} commençant par la lettre {letter.toUpperCase()}
+            {t('letter.count', { count: entries.length, letter: letter.toUpperCase() })}
           </p>
         </div>
         
diff --git a/apps/web/src/components/glossary/search.tsx b/apps/web/src/components/glossary/search.tsx
index 6d8137936..037d28df3 100644
--- a/apps/web/src/components/glossary/search.tsx
+++ b/apps/web/src/components/glossary/search.tsx
@@ -1,8 +1,9 @@
 "use client"
 
-import React, { useState, useEffect, useRef } from 'react';
+import { useState, useEffect, useRef } from 'react';
 import { Search } from 'lucide-react';
 import { useRouter } from 'next/navigation';
+import { useTranslation } from '@onruntime/translations/react';
 import { GlossaryEntry } from '@/types/glossary';
 import { Button } from '@/components/ui/button';
 
@@ -11,6 +12,7 @@ interface GlossarySearchProps {
 }
 
 export function GlossarySearch({ entries }: GlossarySearchProps) {
+  const { t } = useTranslation('components/glossary');
   const [searchTerm, setSearchTerm] = useState('');
   const [results, setResults] = useState<GlossaryEntry[]>([]);
   const [isOpen, setIsOpen] = useState(false);
@@ -68,7 +70,7 @@ export function GlossarySearch({ entries }: GlossarySearchProps) {
             }
           }}
           onFocus={() => searchTerm.length > 0 && setIsOpen(true)}
-          placeholder="Rechercher un terme..."
+          placeholder={t('search.placeholder')}
           className="w-full rounded-md border border-input pl-10 pr-4 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-primary"
         />
         {searchTerm && (
@@ -108,7 +110,7 @@ export function GlossarySearch({ entries }: GlossarySearchProps) {
 
       {isOpen && searchTerm.length >= 2 && results.length === 0 && (
         <div className="absolute z-50 w-full mt-1 rounded-md border border-border bg-background shadow-lg p-4 text-center text-muted-foreground">
-          Aucun résultat trouvé pour &quot;{searchTerm}&quot;
+          {t('search.no-results', { term: searchTerm })}
         </div>
       )}
     </div>
diff --git a/apps/web/src/components/glossary/tag-page.tsx b/apps/web/src/components/glossary/tag-page.tsx
index 6fc5a156d..a1b0c7377 100644
--- a/apps/web/src/components/glossary/tag-page.tsx
+++ b/apps/web/src/components/glossary/tag-page.tsx
@@ -1,19 +1,22 @@
-import React from 'react'
 import Link from 'next/link'
 import { Button } from "@/components/ui/button"
 import { Badge } from "@/components/ui/badge"
 import { ChevronLeft, Tag as TagIcon } from "lucide-react"
 import { GlossaryEntry } from '@/types/glossary'
+import { getTranslation } from "@/lib/translations.server"
 
 interface GlossaryTagPageProps {
   tag: string;
   entries: GlossaryEntry[];
 }
 
-const GlossaryTagPage: React.FC<GlossaryTagPageProps> = ({
+const GlossaryTagPage = async ({
   tag,
   entries
-}) => {
+}: GlossaryTagPageProps) => {
+  const { t } = await getTranslation('app/glossary/page');
+  const { t: tComponents } = await getTranslation('components/glossary');
+
   return (
     <main className="min-h-screen pt-32 pb-16">
       <div className="px-4 md:px-0 max-w-5xl mx-auto">
@@ -22,20 +25,20 @@ const GlossaryTagPage: React.FC<GlossaryTagPageProps> = ({
           <Link href="/glossary">
             <Button variant="ghost" className="pl-0 hover:pl-0">
               <ChevronLeft className="mr-2 h-4 w-4" />
-              Retour au glossaire
+              {tComponents('back-to-glossary')}
             </Button>
           </Link>
         </div>
-        
+
         {/* Tag header */}
         <div className="mb-12">
           <div className="flex items-center gap-3 mb-3">
             <TagIcon className="h-6 w-6 text-primary" />
             <h1 className="text-4xl font-semibold text-foreground">{tag}</h1>
           </div>
-          
+
           <p className="text-muted-foreground text-lg">
-            {entries.length} terme{entries.length > 1 ? 's' : ''} lié{entries.length > 1 ? 's' : ''} à cette catégorie
+            {t('tag.count', { count: entries.length })}
           </p>
         </div>
         
diff --git a/apps/web/src/content/en/glossary/api.mdx b/apps/web/src/content/en/glossary/api.mdx
new file mode 100644
index 000000000..389e306cb
--- /dev/null
+++ b/apps/web/src/content/en/glossary/api.mdx
@@ -0,0 +1,38 @@
+---
+term: "API"
+shortDescription: "Application programming interface that allows different applications to communicate with each other"
+relatedTerms: ["REST", "GraphQL", "Backend"]
+tags: ["development", "technical"]
+---
+
+## Definition
+
+An API (Application Programming Interface) is essentially the language our applications speak to communicate with each other. At onRuntime, we use them constantly to connect different parts of our projects. Think of an API like a waiter in a restaurant. You place an order (the request), they bring you what you asked for (the response), and you don't need to know what's happening in the kitchen.
+
+## Why we love APIs
+
+- **They make everything work together**: Different systems can exchange data without any hassle
+- **They make us modular**: We can develop independent components and connect them easily
+- **They protect our data**: We control exactly who accesses what
+- **They save us time**: We can update one part without rebuilding everything
+
+## APIs we use daily
+
+### RESTful APIs
+Our daily bread! We use them for most of our web projects. They're simple, stateless (no memory from one request to another), and use classic HTTP methods. Perfect for decoupled interfaces like on Tonight Pass.
+
+### GraphQL APIs
+We're fans of these for certain complex projects! Rather than creating 15 different endpoints, we let the client request exactly the data it needs. On Kitchn, this saved us a lot of bandwidth.
+
+### SOAP APIs
+We won't lie, we don't use these much anymore... They're a bit old-school with their XML and ultra-strict specifications. But we still encounter them sometimes on enterprise projects.
+
+## How we use them daily
+
+At onRuntime, APIs are at the heart of our tech stack. They allow us to:
+
+- Build decoupled applications (separate frontend/backend)
+- Easily integrate third-party services (payment, mapping, etc.)
+- Develop our microservices architecture on certain projects
+
+When we design an API, we always start by documenting it with Swagger or Postman. Helps us think things through and becomes a solid reference for the team. Trust me, it saves a lot of pointless meetings!
diff --git a/apps/web/src/content/en/glossary/backend.mdx b/apps/web/src/content/en/glossary/backend.mdx
new file mode 100644
index 000000000..2dc7ba51c
--- /dev/null
+++ b/apps/web/src/content/en/glossary/backend.mdx
@@ -0,0 +1,46 @@
+---
+term: "Backend"
+shortDescription: "Part of an application that handles business logic, database, and server-side data processing"
+relatedTerms: ["API", "Frontend", "Database"]
+tags: ["development", "architecture"]
+---
+
+## Definition
+
+The backend is like the factory behind the storefront! It's all the invisible part that runs our applications at onRuntime. When you use Tonight Pass for example, you interact with a beautiful and intuitive interface, but it's our backend doing all the grunt work: verifying your credentials, storing event data, calculating recommendations, etc.
+
+## What we do daily
+
+### Servers
+Our backend engineers spend their time optimizing our servers. With the increase in traffic on Tonight Pass, we had to spend a lot of time optimizing everything! We primarily use AWS and Google Cloud to host our applications.
+
+### APIs
+This is our specialty! We create robust APIs that allow our frontends to retrieve exactly what they need. We actually have a preference for REST APIs, although we're having more and more fun with GraphQL on certain projects.
+
+### Databases
+Where we store everything! Depending on the projects, we juggle between MongoDB (for Tonight Pass), PostgreSQL (for projects requiring complex relationships), and sometimes Redis for caching. Choosing the database is crucial and we always think about it beforehand.
+
+### Business logic
+The heart of what we do. Transforming client needs into working code. For Tonight Pass's recommendation algorithms, for example, we spent weeks refining the rules and optimizing queries.
+
+## Our favorite backend stack
+
+### Languages
+- **Node.js/TypeScript**: Our favorite combo! We use it on almost all our recent projects
+- **Python**: Perfect when we need to do data analysis or machine learning
+- **Go**: We've adopted it for certain microservices that need performance
+
+### Frameworks
+- **NestJS**: Our favorite Node.js framework for large applications
+- **Express**: For simpler APIs or prototypes
+- **Django**: When we need a robust admin quickly
+
+## Why it's so important
+
+The backend is like the foundations of a house. If it's poorly done, everything collapses. At onRuntime, we're particularly proud of:
+
+- Our architecture that handles traffic spikes on Tonight Pass (thanks New Year's Eve parties!)
+- Our flawless security (knock on wood)
+- Our ultra-fast response times
+
+It's often the least visible part for clients, but it's the one that gives us the most headaches... and the most satisfaction when everything runs like clockwork!
diff --git a/apps/web/src/content/en/glossary/framework.mdx b/apps/web/src/content/en/glossary/framework.mdx
new file mode 100644
index 000000000..29d656632
--- /dev/null
+++ b/apps/web/src/content/en/glossary/framework.mdx
@@ -0,0 +1,48 @@
+---
+term: "Framework"
+shortDescription: "Software structure that facilitates development by providing standardized and reusable features"
+relatedTerms: ["Library", "API", "React", "Angular", "Vue.js", "Next.js"]
+tags: ["development", "architecture"]
+---
+
+## Definition
+
+A framework is like our prefabricated toolbox at onRuntime. Rather than building everything from scratch for each project (imagine building a house starting by making your own nails!), we use these structures that give us a good starting point and solid conventions.
+
+## The big question: framework or library?
+
+We get this question a lot from clients, so here's the deal:
+
+- A **library** is like borrowing a specific tool for a specific task. You keep control and decide when to use it.
+- A **framework** is like entering a fully-equipped workshop with its own rules. It tells you how to work.
+
+There's a saying that sums it up well: "You call a library, but a framework calls you."
+
+## Frameworks we love to use
+
+### Frontend side
+- **React**: Technically a library, but the ecosystem around it (React Router, Redux, etc.) makes it almost a framework. It's our #1 choice for user interfaces.
+- **Next.js**: Our favorite for complex websites! We used it to rebuild our own onRuntime.com site.
+- **React Native**: For our clients' mobile apps, it's our go-to. We used it for Tonight Pass with great results.
+
+### Backend side
+- **NestJS**: We're completely fans! It's structured, modular, and saves us tons of time on large applications.
+- **Express**: Lighter than NestJS, we use it for simple APIs or MVPs.
+- **Prisma**: Not really a complete backend framework, but our favorite ORM for managing databases.
+
+### Full-stack
+- **Next.js** (again!): We use it more and more as a full-stack solution thanks to API routes.
+- **Redwood.js**: We've tested it on a few projects and it's promising! A bit like Ruby on Rails but for the JS ecosystem.
+
+## Why we don't code everything from scratch
+
+- **We go muuuch faster**: No more problems already solved a thousand times by others
+- **Cleaner code**: Framework conventions force us to be disciplined
+- **Security**: Popular frameworks are scrutinized by thousands of developers tracking vulnerabilities
+- **Easier onboarding**: When we integrate a new dev into the team, if they already know the framework, they're operational in no time
+
+## When we choose to use (or not) a framework
+
+At onRuntime, we love frameworks, but we don't use them blindly. For an ultra-specific microservice, we sometimes prefer a lighter approach with just a few libraries. For our Kartrak application, for example, we opted for a more minimalist approach because performance was critical.
+
+But honestly, for most client projects where time-to-market matters, a good framework saves so much time that the choice is obvious!
diff --git a/apps/web/src/content/glossary/api.mdx b/apps/web/src/content/fr/glossary/api.mdx
similarity index 100%
rename from apps/web/src/content/glossary/api.mdx
rename to apps/web/src/content/fr/glossary/api.mdx
diff --git a/apps/web/src/content/glossary/backend.mdx b/apps/web/src/content/fr/glossary/backend.mdx
similarity index 100%
rename from apps/web/src/content/glossary/backend.mdx
rename to apps/web/src/content/fr/glossary/backend.mdx
diff --git a/apps/web/src/content/glossary/framework.mdx b/apps/web/src/content/fr/glossary/framework.mdx
similarity index 100%
rename from apps/web/src/content/glossary/framework.mdx
rename to apps/web/src/content/fr/glossary/framework.mdx
diff --git a/apps/web/src/lib/glossary.tsx b/apps/web/src/lib/glossary.tsx
index a37db6f60..faf6e4ab0 100644
--- a/apps/web/src/lib/glossary.tsx
+++ b/apps/web/src/lib/glossary.tsx
@@ -1,39 +1,50 @@
 import fs from 'fs';
 import path from 'path';
 import { evaluate } from 'next-mdx-remote-client/rsc';
+import { headers } from 'next/headers';
 import { GlossaryEntry } from '@/types/glossary';
 import React from 'react';
 import { CustomMDX } from '@/components/custom-mdx';
+import { defaultLocale } from '@/lib/translations';
 
-const glossaryDirectory = path.join(process.cwd(), 'src', 'content', 'glossary');
+function getGlossaryDirectory(locale: string): string {
+  return path.join(process.cwd(), 'src', 'content', locale, 'glossary');
+}
+
+async function getCurrentLocale(): Promise<string> {
+  const headersList = await headers();
+  return headersList.get('x-locale') || defaultLocale;
+}
 
 /**
- * Récupérer une entrée spécifique du glossaire
+ * Get a specific glossary entry
  */
 export async function getGlossaryEntry(letter: string, slug: string): Promise<GlossaryEntry | null> {
+  const locale = await getCurrentLocale();
+  const glossaryDirectory = getGlossaryDirectory(locale);
   const filePath = path.join(glossaryDirectory, `${slug}.mdx`);
-  
+
   if (!fs.existsSync(filePath)) {
     return null;
   }
-  
+
   const fileContent = fs.readFileSync(filePath, 'utf8');
-  
+
   try {
     const { frontmatter, content } = await evaluate<Omit<GlossaryEntry, 'content' | 'slug' | 'letter'>>({
       source: fileContent,
       options: { parseFrontmatter: true },
     });
-    
-    // Vérifier que la première lettre du terme correspond à la lettre dans l'URL
+
+    // Check that the first letter of the term matches the letter in the URL
     const termLetter = frontmatter.term.charAt(0).toLowerCase();
     if (termLetter !== letter.toLowerCase()) {
-      return null; // Terme trouvé mais mauvaise lettre dans l'URL
+      return null; // Term found but wrong letter in URL
     }
-    
-    // Envelopper le contenu avec CustomMDX pour utiliser le même style que les pages légales
+
+    // Wrap content with CustomMDX to use the same style as legal pages
     const wrappedContent = <CustomMDX>{content}</CustomMDX>;
-    
+
     return {
       ...frontmatter,
       slug,
@@ -47,34 +58,36 @@ export async function getGlossaryEntry(letter: string, slug: string): Promise<Gl
 }
 
 /**
- * Récupérer toutes les entrées du glossaire
+ * Get all glossary entries
  */
 export async function getAllGlossaryEntries(): Promise<GlossaryEntry[]> {
+  const locale = await getCurrentLocale();
+  const glossaryDirectory = getGlossaryDirectory(locale);
   const entries: GlossaryEntry[] = [];
-  
-  // Vérifier si le répertoire existe
+
+  // Check if directory exists
   if (!fs.existsSync(glossaryDirectory)) {
     return entries;
   }
-  
-  // Lire tous les fichiers .mdx directement dans le dossier principal
+
+  // Read all .mdx files directly from the main folder
   const termFiles = fs.readdirSync(glossaryDirectory)
     .filter(file => file.endsWith('.mdx'));
-  
+
   for (const file of termFiles) {
     const filePath = path.join(glossaryDirectory, file);
     const fileContent = fs.readFileSync(filePath, 'utf8');
-    
+
     try {
       const { frontmatter } = await evaluate<Omit<GlossaryEntry, 'content' | 'slug' | 'letter'>>({
         source: fileContent,
         options: { parseFrontmatter: true },
       });
-      
+
       const slug = file.replace(/\.mdx$/, '');
-      // Déterminer la lettre à partir du terme (première lettre en minuscule)
+      // Determine the letter from the term (first letter in lowercase)
       const letter = frontmatter.term.charAt(0).toLowerCase();
-      
+
       entries.push({
         ...frontmatter,
         slug,
@@ -84,13 +97,13 @@ export async function getAllGlossaryEntries(): Promise<GlossaryEntry[]> {
       console.error(`Error processing ${filePath}:`, error);
     }
   }
-  
-  // Trier par terme alphabétiquement
+
+  // Sort alphabetically by term
   return entries.sort((a, b) => a.term.localeCompare(b.term));
 }
 
 /**
- * Récupérer les entrées reliées
+ * Get related entries
  */
 export async function getRelatedEntries(terms: string[]): Promise<GlossaryEntry[]> {
   const allEntries = await getAllGlossaryEntries();
@@ -98,17 +111,17 @@ export async function getRelatedEntries(terms: string[]): Promise<GlossaryEntry[
 }
 
 /**
- * Récupérer les entrées par tag
+ * Get entries by tag
  */
 export async function getEntriesByTag(tag: string): Promise<GlossaryEntry[]> {
   const allEntries = await getAllGlossaryEntries();
-  return allEntries.filter(entry => 
+  return allEntries.filter(entry =>
     entry.tags?.some(t => t.toLowerCase() === tag.toLowerCase())
   );
 }
 
 /**
- * Récupérer toutes les entrées pour une lettre spécifique
+ * Get all entries for a specific letter
  */
 export async function getEntriesByLetter(letter: string): Promise<GlossaryEntry[]> {
   const allEntries = await getAllGlossaryEntries();
@@ -116,15 +129,15 @@ export async function getEntriesByLetter(letter: string): Promise<GlossaryEntry[
 }
 
 /**
- * Récupérer tous les tags uniques
+ * Get all unique tags
  */
 export async function getAllTags(): Promise<string[]> {
   const entries = await getAllGlossaryEntries();
   const tagSet = new Set<string>();
-  
+
   entries.forEach(entry => {
     entry.tags?.forEach(tag => tagSet.add(tag));
   });
-  
+
   return Array.from(tagSet).sort();
-}
\ No newline at end of file
+}
diff --git a/apps/web/src/locales/en/app/glossary/page.json b/apps/web/src/locales/en/app/glossary/page.json
index 5f57501cf..7620b6134 100644
--- a/apps/web/src/locales/en/app/glossary/page.json
+++ b/apps/web/src/locales/en/app/glossary/page.json
@@ -2,5 +2,49 @@
   "metadata": {
     "title": "Web development and design glossary",
     "description": "Browse our comprehensive glossary of technical terms in web development, UI/UX design, and digital project management."
+  },
+  "hero": {
+    "title": "Glossary",
+    "description": "Explore our comprehensive glossary of technical terms in web development, UI/UX design, and digital project management."
+  },
+  "view-all": "View all",
+  "empty": {
+    "title": "No terms have been added to the glossary yet.",
+    "subtitle": "Check back soon to discover our complete glossary."
+  },
+  "letter": {
+    "metadata": {
+      "title": "Terms starting with {letter} | Glossary",
+      "description": "Discover all glossary terms starting with the letter {letter}.",
+      "invalid": {
+        "title": "Invalid letter | Glossary",
+        "description": "This letter is not valid."
+      }
+    },
+    "count": "{count} term(s) starting with the letter {letter}"
+  },
+  "term": {
+    "metadata": {
+      "not-found": {
+        "title": "Term not found | Glossary",
+        "description": "This term does not exist in our glossary."
+      }
+    }
+  },
+  "tags": {
+    "metadata": {
+      "title": "Glossary tags",
+      "description": "Explore the different categories of terms available in our technical glossary."
+    },
+    "title": "Glossary categories",
+    "description": "Explore the {count} categories of terms available in our technical glossary.",
+    "empty": "No categories are available at this time."
+  },
+  "tag": {
+    "metadata": {
+      "title": "Terms related to {tag} | Glossary",
+      "description": "Discover all glossary terms related to the {tag} category."
+    },
+    "count": "{count} term(s) related to this category"
   }
 }
diff --git a/apps/web/src/locales/en/components/glossary.json b/apps/web/src/locales/en/components/glossary.json
new file mode 100644
index 000000000..b48837564
--- /dev/null
+++ b/apps/web/src/locales/en/components/glossary.json
@@ -0,0 +1,8 @@
+{
+  "back-to-glossary": "Back to glossary",
+  "related-terms": "Related terms",
+  "search": {
+    "placeholder": "Search for a term...",
+    "no-results": "No results found for \"{term}\""
+  }
+}
diff --git a/apps/web/src/locales/fr/app/glossary/page.json b/apps/web/src/locales/fr/app/glossary/page.json
index e4e9123ba..ce592b801 100644
--- a/apps/web/src/locales/fr/app/glossary/page.json
+++ b/apps/web/src/locales/fr/app/glossary/page.json
@@ -2,5 +2,49 @@
   "metadata": {
     "title": "Glossaire du développement et design web",
     "description": "Consultez notre glossaire complet des termes techniques en développement web, design UI/UX et gestion de projet digital."
+  },
+  "hero": {
+    "title": "Glossaire",
+    "description": "Explorez notre glossaire complet des termes techniques en développement web, design UI/UX et gestion de projet digital."
+  },
+  "view-all": "Voir tous",
+  "empty": {
+    "title": "Aucun terme n'a encore été ajouté au glossaire.",
+    "subtitle": "Revenez bientôt pour découvrir notre glossaire complet."
+  },
+  "letter": {
+    "metadata": {
+      "title": "Termes commençant par {letter} | Glossaire",
+      "description": "Découvrez tous les termes du glossaire commençant par la lettre {letter}.",
+      "invalid": {
+        "title": "Lettre non valide | Glossaire",
+        "description": "Cette lettre n'est pas valide."
+      }
+    },
+    "count": "{count} terme(s) commençant par la lettre {letter}"
+  },
+  "term": {
+    "metadata": {
+      "not-found": {
+        "title": "Terme non trouvé | Glossaire",
+        "description": "Ce terme n'existe pas dans notre glossaire."
+      }
+    }
+  },
+  "tags": {
+    "metadata": {
+      "title": "Tags du glossaire",
+      "description": "Explorez les différentes catégories de termes disponibles dans notre glossaire technique."
+    },
+    "title": "Catégories du glossaire",
+    "description": "Explorez les {count} catégories de termes disponibles dans notre glossaire technique.",
+    "empty": "Aucune catégorie n'est disponible pour le moment."
+  },
+  "tag": {
+    "metadata": {
+      "title": "Termes liés à {tag} | Glossaire",
+      "description": "Découvrez tous les termes du glossaire liés à la catégorie {tag}."
+    },
+    "count": "{count} terme(s) lié(s) à cette catégorie"
   }
 }
diff --git a/apps/web/src/locales/fr/components/glossary.json b/apps/web/src/locales/fr/components/glossary.json
new file mode 100644
index 000000000..9c2c78c55
--- /dev/null
+++ b/apps/web/src/locales/fr/components/glossary.json
@@ -0,0 +1,8 @@
+{
+  "back-to-glossary": "Retour au glossaire",
+  "related-terms": "Termes associés",
+  "search": {
+    "placeholder": "Rechercher un terme...",
+    "no-results": "Aucun résultat trouvé pour \"{term}\""
+  }
+}

From 7796ea26bd0549a7d935e55e0ce2c294fe19b695 Mon Sep 17 00:00:00 2001
From: Antoine Kingue <etorefr@gmail.com>
Date: Mon, 29 Dec 2025 23:44:03 +0100
Subject: [PATCH 44/64] =?UTF-8?q?=F0=9F=8C=90=20add=20translations=20for?=
 =?UTF-8?q?=20not-found=20metadata=20in=20agency=20pages?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 apps/web/src/app/[locale]/agency/[city]/page.tsx    | 7 ++++---
 apps/web/src/locales/en/app/agency/[city]/page.json | 8 ++++++++
 apps/web/src/locales/fr/app/agency/[city]/page.json | 8 ++++++++
 3 files changed, 20 insertions(+), 3 deletions(-)
 create mode 100644 apps/web/src/locales/en/app/agency/[city]/page.json
 create mode 100644 apps/web/src/locales/fr/app/agency/[city]/page.json

diff --git a/apps/web/src/app/[locale]/agency/[city]/page.tsx b/apps/web/src/app/[locale]/agency/[city]/page.tsx
index f92192fa1..1e58c8b0d 100644
--- a/apps/web/src/app/[locale]/agency/[city]/page.tsx
+++ b/apps/web/src/app/[locale]/agency/[city]/page.tsx
@@ -3,6 +3,7 @@ import Image from 'next/image';
 import { notFound } from 'next/navigation';
 import { Metadata } from 'next';
 import { constructMetadata } from '@/lib/utils/metadata.server';
+import { getTranslation } from '@/lib/translations.server';
 import CityHeroSection from '@/components/marketing/agency/city-hero-section';
 import LocalExpertise from '@/components/marketing/agency/local-expertise';
 import LocalPortfolio from '@/components/marketing/agency/local-portfolio';
@@ -26,13 +27,13 @@ export async function generateMetadata({
 }): Promise<Metadata> {
   const { city } = await params;
   const cityLower = city.toLowerCase();
-
   const agency = getAgencyById(cityLower);
+  const { t } = await getTranslation('app/agency/[city]/page');
 
   if (!agency) {
     return constructMetadata({
-      title: "Expertise locale non disponible",
-      description: "Nous n'avons pas encore d'expertise spécifique pour cette ville.",
+      title: t('metadata.not-found.title'),
+      description: t('metadata.not-found.description'),
       noIndex: true,
     });
   }
diff --git a/apps/web/src/locales/en/app/agency/[city]/page.json b/apps/web/src/locales/en/app/agency/[city]/page.json
new file mode 100644
index 000000000..73bf8e722
--- /dev/null
+++ b/apps/web/src/locales/en/app/agency/[city]/page.json
@@ -0,0 +1,8 @@
+{
+  "metadata": {
+    "not-found": {
+      "title": "Local expertise unavailable",
+      "description": "We don't have specific expertise for this city yet."
+    }
+  }
+}
diff --git a/apps/web/src/locales/fr/app/agency/[city]/page.json b/apps/web/src/locales/fr/app/agency/[city]/page.json
new file mode 100644
index 000000000..c8bcbeda7
--- /dev/null
+++ b/apps/web/src/locales/fr/app/agency/[city]/page.json
@@ -0,0 +1,8 @@
+{
+  "metadata": {
+    "not-found": {
+      "title": "Expertise locale non disponible",
+      "description": "Nous n'avons pas encore d'expertise spécifique pour cette ville."
+    }
+  }
+}

From 7bcfe2f83bf532b2b54ebd26559764de9d318d20 Mon Sep 17 00:00:00 2001
From: Antoine Kingue <etorefr@gmail.com>
Date: Mon, 29 Dec 2025 23:46:56 +0100
Subject: [PATCH 45/64] =?UTF-8?q?=F0=9F=8C=90=20add=20translations=20for?=
 =?UTF-8?q?=20services=20page=20metadata=20in=20english=20and=20french?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 apps/web/src/app/[locale]/services/page.tsx    | 7 +++++--
 apps/web/src/locales/en/app/services/page.json | 6 ++++++
 apps/web/src/locales/fr/app/services/page.json | 6 ++++++
 3 files changed, 17 insertions(+), 2 deletions(-)
 create mode 100644 apps/web/src/locales/en/app/services/page.json
 create mode 100644 apps/web/src/locales/fr/app/services/page.json

diff --git a/apps/web/src/app/[locale]/services/page.tsx b/apps/web/src/app/[locale]/services/page.tsx
index a0e5d81fc..abdf7510b 100644
--- a/apps/web/src/app/[locale]/services/page.tsx
+++ b/apps/web/src/app/[locale]/services/page.tsx
@@ -1,10 +1,13 @@
 import { constructMetadata } from "@/lib/utils/metadata.server";
+import { getTranslation } from "@/lib/translations.server";
 import ServicesPage from "@/screens/marketing/services";
 
 export async function generateMetadata() {
+  const { t } = await getTranslation("app/services/page");
+
   return constructMetadata({
-    title: "Agence de services digitaux : web, mobile et design UI/UX",
-    description: "Services complets de développement web, mobile, design UI/UX et intégration CMS. Notre agence crée des solutions sur mesure qui répondent à vos objectifs.",
+    title: t("metadata.title"),
+    description: t("metadata.description"),
   });
 }
 
diff --git a/apps/web/src/locales/en/app/services/page.json b/apps/web/src/locales/en/app/services/page.json
new file mode 100644
index 000000000..fcdeee787
--- /dev/null
+++ b/apps/web/src/locales/en/app/services/page.json
@@ -0,0 +1,6 @@
+{
+  "metadata": {
+    "title": "Digital services agency: web, mobile and UI/UX design",
+    "description": "Complete web development, mobile, UI/UX design and CMS integration services. Our agency creates custom solutions tailored to your goals."
+  }
+}
diff --git a/apps/web/src/locales/fr/app/services/page.json b/apps/web/src/locales/fr/app/services/page.json
new file mode 100644
index 000000000..b8c9e6e57
--- /dev/null
+++ b/apps/web/src/locales/fr/app/services/page.json
@@ -0,0 +1,6 @@
+{
+  "metadata": {
+    "title": "Agence de services digitaux : web, mobile et design UI/UX",
+    "description": "Services complets de développement web, mobile, design UI/UX et intégration CMS. Notre agence crée des solutions sur mesure qui répondent à vos objectifs."
+  }
+}

From b2c4e8326a5b89cc42a3a847e1179dcb64381517 Mon Sep 17 00:00:00 2001
From: Antoine Kingue <etorefr@gmail.com>
Date: Tue, 30 Dec 2025 00:14:23 +0100
Subject: [PATCH 46/64] =?UTF-8?q?=E2=99=BB=EF=B8=8F=20replace=20next/link?=
 =?UTF-8?q?=20by=20@onruntime/translations/next?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 apps/web/src/app/[locale]/agency/page.tsx                       | 2 +-
 apps/web/src/app/[locale]/glossary/page.tsx                     | 2 +-
 apps/web/src/app/[locale]/glossary/tags/page.tsx                | 2 +-
 apps/web/src/components/glossary/letter-page.tsx                | 2 +-
 apps/web/src/components/glossary/tag-page.tsx                   | 2 +-
 apps/web/src/components/marketing/agency/city-hero-section.tsx  | 2 +-
 apps/web/src/components/marketing/agency/contact-cta.tsx        | 2 +-
 apps/web/src/components/marketing/agency/france-map.tsx         | 2 +-
 apps/web/src/components/marketing/agency/local-portfolio.tsx    | 2 +-
 .../marketing/landing/visitor/team/grid/card/index.tsx          | 2 +-
 10 files changed, 10 insertions(+), 10 deletions(-)

diff --git a/apps/web/src/app/[locale]/agency/page.tsx b/apps/web/src/app/[locale]/agency/page.tsx
index b03e2ddb9..fe44ff5f9 100644
--- a/apps/web/src/app/[locale]/agency/page.tsx
+++ b/apps/web/src/app/[locale]/agency/page.tsx
@@ -1,4 +1,4 @@
-import Link from 'next/link';
+import { Link } from '@onruntime/translations/next';
 import { Button } from "@/components/ui/button";
 import DotPattern from "@/components/ui/dot-pattern";
 import { cn } from "@/lib/utils";
diff --git a/apps/web/src/app/[locale]/glossary/page.tsx b/apps/web/src/app/[locale]/glossary/page.tsx
index 3c1dea695..976ff4bc9 100644
--- a/apps/web/src/app/[locale]/glossary/page.tsx
+++ b/apps/web/src/app/[locale]/glossary/page.tsx
@@ -1,4 +1,4 @@
-import Link from 'next/link';
+import { Link } from '@onruntime/translations/next';
 import { Button } from "@/components/ui/button";
 import DotPattern from "@/components/ui/dot-pattern";
 import { cn } from "@/lib/utils";
diff --git a/apps/web/src/app/[locale]/glossary/tags/page.tsx b/apps/web/src/app/[locale]/glossary/tags/page.tsx
index 757d2e826..58ab7e4f4 100644
--- a/apps/web/src/app/[locale]/glossary/tags/page.tsx
+++ b/apps/web/src/app/[locale]/glossary/tags/page.tsx
@@ -1,4 +1,4 @@
-import Link from 'next/link';
+import { Link } from '@onruntime/translations/next';
 import { Button } from "@/components/ui/button";
 import { ChevronLeft, Tag as TagIcon } from "lucide-react";
 import { getAllTags } from "@/lib/glossary";
diff --git a/apps/web/src/components/glossary/letter-page.tsx b/apps/web/src/components/glossary/letter-page.tsx
index 0f41988af..50daff078 100644
--- a/apps/web/src/components/glossary/letter-page.tsx
+++ b/apps/web/src/components/glossary/letter-page.tsx
@@ -1,4 +1,4 @@
-import Link from 'next/link'
+import { Link } from '@onruntime/translations/next'
 import { Button } from "@/components/ui/button"
 import { Badge } from "@/components/ui/badge"
 import { ChevronLeft } from "lucide-react"
diff --git a/apps/web/src/components/glossary/tag-page.tsx b/apps/web/src/components/glossary/tag-page.tsx
index a1b0c7377..482942124 100644
--- a/apps/web/src/components/glossary/tag-page.tsx
+++ b/apps/web/src/components/glossary/tag-page.tsx
@@ -1,4 +1,4 @@
-import Link from 'next/link'
+import { Link } from '@onruntime/translations/next'
 import { Button } from "@/components/ui/button"
 import { Badge } from "@/components/ui/badge"
 import { ChevronLeft, Tag as TagIcon } from "lucide-react"
diff --git a/apps/web/src/components/marketing/agency/city-hero-section.tsx b/apps/web/src/components/marketing/agency/city-hero-section.tsx
index a62eed96f..00e607c94 100644
--- a/apps/web/src/components/marketing/agency/city-hero-section.tsx
+++ b/apps/web/src/components/marketing/agency/city-hero-section.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import Link from 'next/link';
+import { Link } from '@onruntime/translations/next';
 import { Button } from '@/components/ui/button';
 import { ArrowRight } from 'lucide-react';
 import DotPattern from '@/components/ui/dot-pattern';
diff --git a/apps/web/src/components/marketing/agency/contact-cta.tsx b/apps/web/src/components/marketing/agency/contact-cta.tsx
index 1644b7a74..06bf85fff 100644
--- a/apps/web/src/components/marketing/agency/contact-cta.tsx
+++ b/apps/web/src/components/marketing/agency/contact-cta.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import Link from 'next/link';
+import { Link } from '@onruntime/translations/next';
 import { Button } from '@/components/ui/button';
 import { ArrowRight, Video, Calendar } from 'lucide-react';
 import Routes from '@/constants/routes';
diff --git a/apps/web/src/components/marketing/agency/france-map.tsx b/apps/web/src/components/marketing/agency/france-map.tsx
index 9c4e7f08e..40a3847bb 100644
--- a/apps/web/src/components/marketing/agency/france-map.tsx
+++ b/apps/web/src/components/marketing/agency/france-map.tsx
@@ -1,7 +1,7 @@
 'use client';
 
 import React from 'react';
-import Link from 'next/link';
+import { Link } from '@onruntime/translations/next';
 import { getAgencyById } from '@/constants/agencies';
 
 interface FranceMapProps {
diff --git a/apps/web/src/components/marketing/agency/local-portfolio.tsx b/apps/web/src/components/marketing/agency/local-portfolio.tsx
index dd555cbc3..dd7bbe5e8 100644
--- a/apps/web/src/components/marketing/agency/local-portfolio.tsx
+++ b/apps/web/src/components/marketing/agency/local-portfolio.tsx
@@ -1,4 +1,4 @@
-import Link from 'next/link';
+import { Link } from '@onruntime/translations/next';
 import Image from 'next/image';
 import { Button } from '@/components/ui/button';
 import { ArrowRight } from 'lucide-react';
diff --git a/apps/web/src/components/marketing/landing/visitor/team/grid/card/index.tsx b/apps/web/src/components/marketing/landing/visitor/team/grid/card/index.tsx
index 6d54436e1..81f099945 100644
--- a/apps/web/src/components/marketing/landing/visitor/team/grid/card/index.tsx
+++ b/apps/web/src/components/marketing/landing/visitor/team/grid/card/index.tsx
@@ -2,7 +2,7 @@
 
 import React from 'react';
 import Image from 'next/image';
-import Link from 'next/link';
+import { Link } from '@onruntime/translations/next';
 import { Button } from '@/components/ui/button';
 import { useTranslation } from '@onruntime/translations/react';
 

From bcf8e8cea706a1ece0b280b348f8cf7f1b6de405 Mon Sep 17 00:00:00 2001
From: Antoine Kingue <etorefr@gmail.com>
Date: Tue, 30 Dec 2025 00:24:10 +0100
Subject: [PATCH 47/64] =?UTF-8?q?=F0=9F=8E=A8=20update=20h2=20to=20p=20for?=
 =?UTF-8?q?=20description=20in=20featured=20customer?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/marketing/landing/customer/featured/index.tsx    | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/apps/web/src/components/marketing/landing/customer/featured/index.tsx b/apps/web/src/components/marketing/landing/customer/featured/index.tsx
index 37318eaf4..4ae9ff009 100644
--- a/apps/web/src/components/marketing/landing/customer/featured/index.tsx
+++ b/apps/web/src/components/marketing/landing/customer/featured/index.tsx
@@ -25,7 +25,7 @@ const Featured: React.FC = async () => {
             </Balancer>
           </h1>
 
-          <h2
+          <p
             className="text-center text-muted-foreground"
             dangerouslySetInnerHTML={{ __html: t("description") }}
           />

From cecb3680c1478422207229630aad1326d44aab00 Mon Sep 17 00:00:00 2001
From: Antoine Kingue <etorefr@gmail.com>
Date: Tue, 30 Dec 2025 00:28:31 +0100
Subject: [PATCH 48/64] =?UTF-8?q?=F0=9F=8C=90=20add=20translations=20for?=
 =?UTF-8?q?=20agency=20city=20hero=20section=20in=20english=20and=20french?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../marketing/agency/city-hero-section.tsx           | 12 +++++++-----
 .../marketing/agency/city-hero-section.json          |  5 +++++
 .../marketing/agency/city-hero-section.json          |  5 +++++
 3 files changed, 17 insertions(+), 5 deletions(-)
 create mode 100644 apps/web/src/locales/en/components/marketing/agency/city-hero-section.json
 create mode 100644 apps/web/src/locales/fr/components/marketing/agency/city-hero-section.json

diff --git a/apps/web/src/components/marketing/agency/city-hero-section.tsx b/apps/web/src/components/marketing/agency/city-hero-section.tsx
index 00e607c94..69b7ca0a4 100644
--- a/apps/web/src/components/marketing/agency/city-hero-section.tsx
+++ b/apps/web/src/components/marketing/agency/city-hero-section.tsx
@@ -6,16 +6,18 @@ import DotPattern from '@/components/ui/dot-pattern';
 import { cn } from '@/lib/utils';
 import Routes from '@/constants/routes';
 import { Agency } from '@/types/agency';
+import { getTranslation } from '@/lib/translations.server';
 
 interface CityHeroSectionProps {
   agency: Agency;
 }
 
-const CityHeroSection: React.FC<CityHeroSectionProps> = ({ agency }) => {
-  
+const CityHeroSection = async ({ agency }: CityHeroSectionProps) => {
+  const { t } = await getTranslation('components/marketing/agency/city-hero-section');
+
   const accent = agency.accentColor || "blue";
 
-  const heroTitle = agency.heroTitle || `Développement web à ${agency.name}`;
+  const heroTitle = agency.heroTitle || t('default-title', { name: agency.name });
   const heroDescription = agency.heroDescription || agency.description;
 
   return (
@@ -41,7 +43,7 @@ const CityHeroSection: React.FC<CityHeroSectionProps> = ({ agency }) => {
 
           <Button asChild size="lg" className="whitespace-normal sm:whitespace-nowrap">
             <Link href={Routes.contact}>
-              Démarrer votre projet à {agency.name}
+              {t('cta', { name: agency.name })}
               <ArrowRight className="ml-2 w-5 h-5" />
             </Link>
           </Button>
@@ -66,7 +68,7 @@ const CityHeroSection: React.FC<CityHeroSectionProps> = ({ agency }) => {
               <p className="text-center font-medium text-lg capitalize">{agency.name}</p>
               {agency.primaryStat && (
                 <p className="text-xs text-center text-muted-foreground mt-1">
-                  Spécialiste {agency.primaryStat.label}
+                  {t('specialist', { stat: agency.primaryStat.label })}
                 </p>
               )}
             </div>
diff --git a/apps/web/src/locales/en/components/marketing/agency/city-hero-section.json b/apps/web/src/locales/en/components/marketing/agency/city-hero-section.json
new file mode 100644
index 000000000..73419635b
--- /dev/null
+++ b/apps/web/src/locales/en/components/marketing/agency/city-hero-section.json
@@ -0,0 +1,5 @@
+{
+  "default-title": "Web development in {name}",
+  "cta": "Start your project in {name}",
+  "specialist": "{stat} specialist"
+}
diff --git a/apps/web/src/locales/fr/components/marketing/agency/city-hero-section.json b/apps/web/src/locales/fr/components/marketing/agency/city-hero-section.json
new file mode 100644
index 000000000..a0b1bf559
--- /dev/null
+++ b/apps/web/src/locales/fr/components/marketing/agency/city-hero-section.json
@@ -0,0 +1,5 @@
+{
+  "default-title": "Développement web à {name}",
+  "cta": "Démarrer votre projet à {name}",
+  "specialist": "Spécialiste {stat}"
+}

From efaefbefced9883bacf5a552238a74d93eebee92 Mon Sep 17 00:00:00 2001
From: Antoine Kingue <etorefr@gmail.com>
Date: Tue, 30 Dec 2025 00:30:11 +0100
Subject: [PATCH 49/64] =?UTF-8?q?=E2=99=BB=EF=B8=8F=20refactor=20local=20p?=
 =?UTF-8?q?ortfolio=20project=20props=20to=20use=20is-primary=20instead=20?=
 =?UTF-8?q?of=20index?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/marketing/agency/local-portfolio.tsx | 13 +++++++------
 1 file changed, 7 insertions(+), 6 deletions(-)

diff --git a/apps/web/src/components/marketing/agency/local-portfolio.tsx b/apps/web/src/components/marketing/agency/local-portfolio.tsx
index dd7bbe5e8..cd207d771 100644
--- a/apps/web/src/components/marketing/agency/local-portfolio.tsx
+++ b/apps/web/src/components/marketing/agency/local-portfolio.tsx
@@ -15,24 +15,25 @@ interface LocalPortfolioProps {
 interface LocalPortfolioProjectProps {
   project: Project;
   agency: Agency;
-  index: number;
+  isPrimary: boolean;
 }
 
 const LocalPortfolioProject = async ({
   project,
   agency,
-  index,
+  isPrimary,
 }: LocalPortfolioProjectProps) => {
   const { t: tProject } = await getTranslation(`constants/projects/${project.id}`);
   const { t } = await getTranslation('components/marketing/agency/local-portfolio');
 
   const getExpertiseText = () => {
-    if (index === 0) {
-      return project.tags.includes(Tag.FEATURED)
+    const isFeatured = project.tags.includes(Tag.FEATURED);
+    if (isPrimary) {
+      return isFeatured
         ? t('project.expertise-featured', { region: agency.region })
         : t('project.expertise-digital', { region: agency.region });
     }
-    return project.tags.includes(Tag.FEATURED)
+    return isFeatured
       ? t('project.skills-featured', { name: agency.name })
       : t('project.skills-digital', { name: agency.name });
   };
@@ -116,7 +117,7 @@ const LocalPortfolio = async ({ agency }: LocalPortfolioProps) => {
             key={project.id}
             project={project}
             agency={agency}
-            index={index}
+            isPrimary={index === 0}
           />
         ))}
       </div>

From a15394fc070c4dbc4671acc7a4e8c6a64ae41e93 Mon Sep 17 00:00:00 2001
From: Antoine Kingue <etorefr@gmail.com>
Date: Tue, 30 Dec 2025 00:32:00 +0100
Subject: [PATCH 50/64] =?UTF-8?q?=E2=99=BB=EF=B8=8F=20refactor=20get-tag-l?=
 =?UTF-8?q?abel=20function=20to=20use=20switch=20statement=20for=20improve?=
 =?UTF-8?q?d=20readability?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../marketing/agency/local-portfolio.tsx       | 18 +++++++++++++-----
 1 file changed, 13 insertions(+), 5 deletions(-)

diff --git a/apps/web/src/components/marketing/agency/local-portfolio.tsx b/apps/web/src/components/marketing/agency/local-portfolio.tsx
index cd207d771..ce14f599e 100644
--- a/apps/web/src/components/marketing/agency/local-portfolio.tsx
+++ b/apps/web/src/components/marketing/agency/local-portfolio.tsx
@@ -38,11 +38,19 @@ const LocalPortfolioProject = async ({
       : t('project.skills-digital', { name: agency.name });
   };
 
-  const getTagLabel = (tag: Tag) => {
-    if (tag === Tag.FEATURED) return t('tags.featured');
-    if (tag === Tag.OPEN_SOURCE) return t('tags.open-source');
-    if (tag === Tag.CUSTOMER) return t('tags.customer');
-    return tag;
+  const getTagLabel = (tag: Tag): string => {
+    switch (tag) {
+      case Tag.FEATURED:
+        return t('tags.featured');
+      case Tag.OPEN_SOURCE:
+        return t('tags.open-source');
+      case Tag.CUSTOMER:
+        return t('tags.customer');
+      default: {
+        const _exhaustiveCheck: never = tag;
+        return _exhaustiveCheck;
+      }
+    }
   };
 
   return (

From ea43c5c3736b63a67136ef72cd5fe0b9cce3dcd1 Mon Sep 17 00:00:00 2001
From: Antoine Kingue <etorefr@gmail.com>
Date: Tue, 30 Dec 2025 01:32:31 +0100
Subject: [PATCH 51/64] =?UTF-8?q?=F0=9F=8C=90=20add=20agencies=20translati?=
 =?UTF-8?q?ons?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/app/[locale]/agency/[city]/page.tsx   |  92 ++++++------
 apps/web/src/app/[locale]/agency/page.tsx     | 135 ++++++++----------
 .../marketing/agency/agency-card.tsx          |  44 ++++++
 .../marketing/agency/city-hero-section.tsx    |  19 +--
 .../marketing/agency/contact-cta.tsx          |  23 +--
 .../marketing/agency/france-map.tsx           |   6 +-
 .../marketing/agency/local-expertise.tsx      |  24 ++--
 .../marketing/agency/local-testimonials.tsx   |  28 ++--
 apps/web/src/constants/agencies/lyon.ts       | 122 +++++-----------
 apps/web/src/constants/agencies/marseille.ts  | 120 +++++-----------
 .../web/src/constants/agencies/montpellier.ts | 120 +++++-----------
 apps/web/src/constants/agencies/nantes.ts     | 120 +++++-----------
 apps/web/src/constants/agencies/nice.ts       | 120 +++++-----------
 apps/web/src/constants/agencies/paris.ts      | 122 +++++-----------
 apps/web/src/constants/agencies/rouen.ts      | 120 +++++-----------
 apps/web/src/constants/agencies/strasbourg.ts | 120 +++++-----------
 apps/web/src/constants/agencies/toulouse.ts   | 120 +++++-----------
 .../locales/en/app/agency/[city]/page.json    |  37 +++++
 apps/web/src/locales/en/app/agency/page.json  |  75 ++++++++++
 .../marketing/agency/contact-cta.json         |  13 ++
 .../marketing/agency/france-map.json          |   3 +
 .../marketing/agency/local-expertise.json     |   6 +
 .../marketing/agency/local-testimonials.json  |   4 +
 .../locales/en/constants/agencies/lyon.json   |  83 +++++++++++
 .../en/constants/agencies/marseille.json      |  83 +++++++++++
 .../en/constants/agencies/montpellier.json    |  83 +++++++++++
 .../locales/en/constants/agencies/nantes.json |  83 +++++++++++
 .../locales/en/constants/agencies/nice.json   |  83 +++++++++++
 .../locales/en/constants/agencies/paris.json  |  84 +++++++++++
 .../locales/en/constants/agencies/rouen.json  |  83 +++++++++++
 .../en/constants/agencies/strasbourg.json     |  83 +++++++++++
 .../en/constants/agencies/toulouse.json       |  83 +++++++++++
 .../locales/fr/app/agency/[city]/page.json    |  37 +++++
 apps/web/src/locales/fr/app/agency/page.json  |  75 ++++++++++
 .../marketing/agency/contact-cta.json         |  13 ++
 .../marketing/agency/france-map.json          |   3 +
 .../marketing/agency/local-expertise.json     |   6 +
 .../marketing/agency/local-testimonials.json  |   4 +
 .../locales/fr/constants/agencies/lyon.json   |  83 +++++++++++
 .../fr/constants/agencies/marseille.json      |  83 +++++++++++
 .../fr/constants/agencies/montpellier.json    |  83 +++++++++++
 .../locales/fr/constants/agencies/nantes.json |  83 +++++++++++
 .../locales/fr/constants/agencies/nice.json   |  83 +++++++++++
 .../locales/fr/constants/agencies/paris.json  |  84 +++++++++++
 .../locales/fr/constants/agencies/rouen.json  |  83 +++++++++++
 .../fr/constants/agencies/strasbourg.json     |  83 +++++++++++
 .../fr/constants/agencies/toulouse.json       |  83 +++++++++++
 apps/web/src/types/agency.ts                  |  63 ++++----
 48 files changed, 2289 insertions(+), 1001 deletions(-)
 create mode 100644 apps/web/src/components/marketing/agency/agency-card.tsx
 create mode 100644 apps/web/src/locales/en/components/marketing/agency/contact-cta.json
 create mode 100644 apps/web/src/locales/en/components/marketing/agency/france-map.json
 create mode 100644 apps/web/src/locales/en/components/marketing/agency/local-expertise.json
 create mode 100644 apps/web/src/locales/en/components/marketing/agency/local-testimonials.json
 create mode 100644 apps/web/src/locales/en/constants/agencies/lyon.json
 create mode 100644 apps/web/src/locales/en/constants/agencies/marseille.json
 create mode 100644 apps/web/src/locales/en/constants/agencies/montpellier.json
 create mode 100644 apps/web/src/locales/en/constants/agencies/nantes.json
 create mode 100644 apps/web/src/locales/en/constants/agencies/nice.json
 create mode 100644 apps/web/src/locales/en/constants/agencies/paris.json
 create mode 100644 apps/web/src/locales/en/constants/agencies/rouen.json
 create mode 100644 apps/web/src/locales/en/constants/agencies/strasbourg.json
 create mode 100644 apps/web/src/locales/en/constants/agencies/toulouse.json
 create mode 100644 apps/web/src/locales/fr/components/marketing/agency/contact-cta.json
 create mode 100644 apps/web/src/locales/fr/components/marketing/agency/france-map.json
 create mode 100644 apps/web/src/locales/fr/components/marketing/agency/local-expertise.json
 create mode 100644 apps/web/src/locales/fr/components/marketing/agency/local-testimonials.json
 create mode 100644 apps/web/src/locales/fr/constants/agencies/lyon.json
 create mode 100644 apps/web/src/locales/fr/constants/agencies/marseille.json
 create mode 100644 apps/web/src/locales/fr/constants/agencies/montpellier.json
 create mode 100644 apps/web/src/locales/fr/constants/agencies/nantes.json
 create mode 100644 apps/web/src/locales/fr/constants/agencies/nice.json
 create mode 100644 apps/web/src/locales/fr/constants/agencies/paris.json
 create mode 100644 apps/web/src/locales/fr/constants/agencies/rouen.json
 create mode 100644 apps/web/src/locales/fr/constants/agencies/strasbourg.json
 create mode 100644 apps/web/src/locales/fr/constants/agencies/toulouse.json

diff --git a/apps/web/src/app/[locale]/agency/[city]/page.tsx b/apps/web/src/app/[locale]/agency/[city]/page.tsx
index 1e58c8b0d..512da7e7f 100644
--- a/apps/web/src/app/[locale]/agency/[city]/page.tsx
+++ b/apps/web/src/app/[locale]/agency/[city]/page.tsx
@@ -1,4 +1,3 @@
-import React from 'react';
 import Image from 'next/image';
 import { notFound } from 'next/navigation';
 import { Metadata } from 'next';
@@ -38,9 +37,11 @@ export async function generateMetadata({
     });
   }
 
+  const { t: tAgency } = await getTranslation(`constants/agencies/${agency.id}`);
+
   return constructMetadata({
-    title: agency.title,
-    description: agency.description,
+    title: tAgency('title'),
+    description: tAgency('description'),
   });
 }
 
@@ -54,32 +55,35 @@ export default async function CityPage({ params }: AgencyPageProps) {
     notFound();
   }
 
+  const { t } = await getTranslation('app/agency/[city]/page');
+  const { t: tAgency } = await getTranslation(`constants/agencies/${agency.id}`);
+
   const faqItems = [
     {
-      questionName: `Comment choisir la bonne agence web à ${agency.name} ?`,
-      acceptedAnswerText: `Pour choisir la bonne agence web à ${agency.name}, évaluez leur connaissance du marché local, leur portfolio dans votre secteur d'activité, et leur capacité à comprendre vos objectifs spécifiques. L'expertise dans les défis numériques propres à la région ${agency.region} est également un facteur clé.`
+      questionName: t('faq.questions.choose-agency.question', { city: agency.name }),
+      acceptedAnswerText: t('faq.questions.choose-agency.answer', { city: agency.name, region: agency.region })
     },
     {
-      questionName: `Quels sont les coûts d'un projet web à ${agency.name} ?`,
-      acceptedAnswerText: `Les coûts d'un projet web à ${agency.name} varient selon la complexité, les fonctionnalités et les objectifs. Pour un site vitrine professionnel, comptez entre 3 000€ et 8 000€. Pour une application web ou e-commerce, les tarifs débutent généralement à 10 000€. Demandez un devis personnalisé pour une estimation précise.`
+      questionName: t('faq.questions.project-costs.question', { city: agency.name }),
+      acceptedAnswerText: t('faq.questions.project-costs.answer', { city: agency.name })
     },
     {
-      questionName: `Combien de temps faut-il pour développer un site web ou une application pour mon entreprise à ${agency.name} ?`,
-      acceptedAnswerText: `Les délais de développement pour une entreprise à ${agency.name} dépendent de la complexité du projet. Un site vitrine peut être réalisé en 4-8 semaines, tandis qu'une application sur mesure ou un e-commerce nécessite généralement 2-4 mois. Notre méthodologie agile permet des livraisons progressives pour voir rapidement les avancées.`
+      questionName: t('faq.questions.development-time.question', { city: agency.name }),
+      acceptedAnswerText: t('faq.questions.development-time.answer', { city: agency.name })
     },
     {
-      questionName: `Pouvez-vous travailler efficacement avec mon entreprise à ${agency.name} à distance ?`,
-      acceptedAnswerText: `Absolument. Nous collaborons efficacement avec les entreprises de ${agency.name} grâce à notre méthodologie éprouvée de travail à distance. Visioconférences régulières, outils collaboratifs performants et notre connaissance approfondie du marché local de ${agency.region} nous permettent d'assurer un suivi aussi efficace qu'avec une équipe sur place.`
+      questionName: t('faq.questions.remote-work.question', { city: agency.name }),
+      acceptedAnswerText: t('faq.questions.remote-work.answer', { city: agency.name, region: agency.region })
     }
   ];
-  
+
   return (
     <main className="min-h-screen pt-32 pb-16 w-full">
-      
+
       <LocalBusinessSchema
         type="ProfessionalService"
         id={`${ORGANIZATION_DATA.url}${Routes.agency.city(agency.id)}#service`}
-        description={agency.description}
+        description={tAgency('description')}
         geo={agency.geo}
       />
 
@@ -87,12 +91,12 @@ export default async function CityPage({ params }: AgencyPageProps) {
         itemListElements={[
           {
             position: 1,
-            name: "Accueil",
+            name: t('breadcrumb.home'),
             item: `${ORGANIZATION_DATA.url}/`
           },
           {
             position: 2,
-            name: "Expertise locale",
+            name: t('breadcrumb.local-expertise'),
             item: `${ORGANIZATION_DATA.url}${Routes.agency.root}`
           },
           {
@@ -102,9 +106,9 @@ export default async function CityPage({ params }: AgencyPageProps) {
           }
         ]}
       />
-      
+
       <FAQPageSchema mainEntity={faqItems} />
-      
+
       <div className="px-4 md:px-0 max-w-5xl mx-auto space-y-24">
         <CityHeroSection agency={agency} />
         <LocalExpertise agency={agency} />
@@ -112,16 +116,16 @@ export default async function CityPage({ params }: AgencyPageProps) {
         <div className="space-y-8">
           <div className="text-center">
             <h2 className="text-3xl font-medium text-foreground mb-4">
-              Défis numériques des entreprises à {agency.name}
+              {t('challenges.title', { city: agency.name })}
             </h2>
             <p className="text-muted-foreground max-w-3xl mx-auto">
-              Les entreprises de {agency.name} font face à des défis spécifiques en matière de transformation digitale. Notre expertise nous permet d&apos;y répondre efficacement.
+              {t('challenges.description', { city: agency.name })}
             </p>
           </div>
-          
+
           <div className="grid grid-cols-1 md:grid-cols-2 gap-8">
             <div className="p-6 border rounded-lg bg-card">
-              <h3 className="text-xl font-medium text-foreground mb-4">Enjeux du marché {agency.region}</h3>
+              <h3 className="text-xl font-medium text-foreground mb-4">{t('challenges.market-issues', { region: agency.region })}</h3>
               <ul className="space-y-4">
                 {agency.localChallenges.map((challenge, index) => (
                   <li key={index} className="flex items-start gap-3">
@@ -135,14 +139,14 @@ export default async function CityPage({ params }: AgencyPageProps) {
                         <circle cx="12" cy="12" r="4"/>
                       </svg>
                     </div>
-                    <p className="text-muted-foreground">{challenge}</p>
+                    <p className="text-muted-foreground">{tAgency(`local-challenges.${challenge}`)}</p>
                   </li>
                 ))}
               </ul>
             </div>
-            
+
             <div className="p-6 border rounded-lg bg-card">
-              <h3 className="text-xl font-medium text-foreground mb-4">Nos solutions adaptées</h3>
+              <h3 className="text-xl font-medium text-foreground mb-4">{t('challenges.our-solutions')}</h3>
               {agency.focusedServices.slice(0, 3).map((service, index) => {
                 const Icon = service.icon;
                 return (
@@ -153,17 +157,17 @@ export default async function CityPage({ params }: AgencyPageProps) {
                       </div>
                     )}
                     <div>
-                      <h4 className="text-sm font-medium text-foreground">{service.name}</h4>
-                      <p className="text-xs text-muted-foreground">{service.description}</p>
+                      <h4 className="text-sm font-medium text-foreground">{tAgency(`focused-services.${service.key}.name`)}</h4>
+                      <p className="text-xs text-muted-foreground">{tAgency(`focused-services.${service.key}.description`)}</p>
                     </div>
                   </div>
                 );
               })}
-              <a 
-                href={Routes.services} 
+              <a
+                href={Routes.services}
                 className="text-xs flex items-center text-onruntime-blue hover:underline mt-2"
               >
-                Découvrir tous nos services
+                {t('challenges.discover-all-services')}
                 <svg className="w-3 h-3 ml-1" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                   <path d="M5 12H19M19 12L12 5M19 12L12 19" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
                 </svg>
@@ -171,12 +175,12 @@ export default async function CityPage({ params }: AgencyPageProps) {
             </div>
           </div>
         </div>
-        
+
         <LocalPortfolio agency={agency} />
 
         <FAQSection
-          title={`Questions fréquentes sur les projets web à ${agency.name}`}
-          description={`Découvrez les réponses aux questions les plus courantes des entreprises de ${agency.name} concernant leurs projets digitaux.`}
+          title={t('faq.title', { city: agency.name })}
+          description={t('faq.description', { city: agency.name })}
           items={faqItems.map(faq => ({
             question: faq.questionName,
             answer: faq.acceptedAnswerText
@@ -187,21 +191,21 @@ export default async function CityPage({ params }: AgencyPageProps) {
           <div className="space-y-8">
             <div className="text-center">
               <h2 className="text-3xl font-medium text-foreground mb-4">
-                Ce que disent nos clients à {agency.name}
+                {t('testimonials.title', { city: agency.name })}
               </h2>
               <p className="text-muted-foreground max-w-3xl mx-auto">
-                Découvrez les retours d&apos;entreprises locales avec lesquelles nous avons collaboré.
+                {t('testimonials.description')}
               </p>
             </div>
 
             <div className="grid md:grid-cols-2 gap-8">
               {agency.testimonials.map((testimonial, index) => (
                 <div key={index} className="p-6 border rounded-lg bg-card">
-                  <p className="text-muted-foreground italic mb-4">&quot;{testimonial.text}&quot;</p>
+                  <p className="text-muted-foreground italic mb-4">&quot;{tAgency(`testimonials.${testimonial.key}.text`)}&quot;</p>
                   <div className="flex items-center gap-3">
                     <div className="w-10 h-10 rounded-full bg-muted flex items-center justify-center">
-                      {testimonial.imageUrl ? (
-                        <Image src={testimonial.imageUrl} alt={testimonial.name} width={40} height={40} className="w-full h-full rounded-full object-cover" />
+                      {testimonial.author.imageUrl ? (
+                        <Image src={testimonial.author.imageUrl} alt={testimonial.author.name} width={40} height={40} className="w-full h-full rounded-full object-cover" />
                       ) : (
                         <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
                           <path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"></path>
@@ -210,8 +214,8 @@ export default async function CityPage({ params }: AgencyPageProps) {
                       )}
                     </div>
                     <div>
-                      <p className="text-sm font-medium">{testimonial.name}</p>
-                      <p className="text-xs text-muted-foreground">{testimonial.role} - {testimonial.company}</p>
+                      <p className="text-sm font-medium">{testimonial.author.name}</p>
+                      <p className="text-xs text-muted-foreground">{testimonial.author.role} - {testimonial.author.company}</p>
                     </div>
                   </div>
                 </div>
@@ -219,7 +223,7 @@ export default async function CityPage({ params }: AgencyPageProps) {
             </div>
           </div>
         )}
-        
+
         <ContactCTA agency={agency} />
       </div>
     </main>
@@ -227,10 +231,10 @@ export default async function CityPage({ params }: AgencyPageProps) {
 }
 
 export async function generateStaticParams() {
-  
+
   const { default: agencies } = await import('@/constants/agencies');
-  
+
   return agencies.map((agency) => ({
     city: agency.id,
   }));
-}
\ No newline at end of file
+}
diff --git a/apps/web/src/app/[locale]/agency/page.tsx b/apps/web/src/app/[locale]/agency/page.tsx
index fe44ff5f9..8e8258a57 100644
--- a/apps/web/src/app/[locale]/agency/page.tsx
+++ b/apps/web/src/app/[locale]/agency/page.tsx
@@ -6,6 +6,7 @@ import { ArrowRight, Globe, Laptop, Users } from "lucide-react";
 import Routes from "@/constants/routes";
 import { constructMetadata } from '@/lib/utils/metadata.server';
 import FranceMap from '@/components/marketing/agency/france-map';
+import AgencyCard from '@/components/marketing/agency/agency-card';
 import { getMajorAgencies } from '@/constants/agencies';
 import { OrganizationSchema } from '@/components/json-ld/organization-schema';
 import { ORGANIZATION_DATA } from '@/components/json-ld/constants';
@@ -19,40 +20,41 @@ export async function generateMetadata() {
   });
 }
 
-export default function AgencyLandingPage() {
-  
+export default async function AgencyLandingPage() {
+  const { t } = await getTranslation('app/agency/page');
+
   const majorAgencies = getMajorAgencies(10);
-  
+
   return (
     <main className="min-h-screen pt-32 pb-16 sm:w-auto w-full">
       <OrganizationSchema
         type="DigitalAgency"
         id={`${ORGANIZATION_DATA.url}${Routes.agency.root}#organization`}
       />
-      
+
       <div className="px-4 md:px-0 max-w-5xl mx-auto space-y-24">
-        
+
         <div className="relative flex flex-col lg:flex-row gap-12 items-center">
           <div className="flex-1 flex flex-col items-start gap-6">
             <h1 className="font-medium text-4xl md:text-5xl text-foreground">
-              Votre partenaire digital partout en France
+              {t('hero.title')}
             </h1>
-            
+
             <p className="text-muted-foreground text-lg">
-              Nous développons des solutions digitales innovantes adaptées aux spécificités de chaque marché régional français. Notre équipe maîtrise les enjeux numériques locaux pour vous accompagner efficacement, où que vous soyez en France.
+              {t('hero.description')}
             </p>
 
             <div className="flex flex-wrap gap-3">
               <Button asChild size="lg">
                 <Link href={Routes.contact}>
-                  Discuter de votre projet
+                  {t('hero.cta')}
                   <ArrowRight className="ml-2 w-5 h-5" />
                 </Link>
               </Button>
-              
+
               <Link href="#expertise-locale">
                 <Button variant="outline" size="lg">
-                  Découvrir notre expertise locale
+                  {t('hero.secondary-cta')}
                 </Button>
               </Link>
             </div>
@@ -77,10 +79,10 @@ export default function AgencyLandingPage() {
         <div id="expertise-locale" className="space-y-8">
           <div className="text-center">
             <h2 className="text-3xl font-medium text-foreground mb-4">
-              Une expertise adaptée à chaque territoire
+              {t('expertise.title')}
             </h2>
             <p className="text-muted-foreground max-w-3xl mx-auto">
-              Notre équipe analyse et comprend les écosystèmes numériques locaux pour vous proposer des solutions parfaitement adaptées aux spécificités économiques et culturelles de votre région.
+              {t('expertise.description')}
             </p>
           </div>
 
@@ -89,9 +91,9 @@ export default function AgencyLandingPage() {
               <div className="p-3 rounded-full bg-onruntime-blue/10 text-onruntime-blue mb-4">
                 <Globe className="w-6 h-6" />
               </div>
-              <h3 className="text-xl font-medium text-foreground mb-2">Compréhension des marchés locaux</h3>
+              <h3 className="text-xl font-medium text-foreground mb-2">{t('expertise.local-markets.title')}</h3>
               <p className="text-muted-foreground">
-                Nous étudions et maîtrisons les spécificités et les tendances des écosystèmes numériques régionaux.
+                {t('expertise.local-markets.description')}
               </p>
             </div>
 
@@ -99,9 +101,9 @@ export default function AgencyLandingPage() {
               <div className="p-3 rounded-full bg-onruntime-blue/10 text-onruntime-blue mb-4">
                 <Laptop className="w-6 h-6" />
               </div>
-              <h3 className="text-xl font-medium text-foreground mb-2">Travail à distance efficace</h3>
+              <h3 className="text-xl font-medium text-foreground mb-2">{t('expertise.remote-work.title')}</h3>
               <p className="text-muted-foreground">
-                Notre équipe collabore à distance avec votre entreprise, où que vous soyez en France, avec la même efficacité qu&apos;en présentiel.
+                {t('expertise.remote-work.description')}
               </p>
             </div>
 
@@ -109,9 +111,9 @@ export default function AgencyLandingPage() {
               <div className="p-3 rounded-full bg-onruntime-blue/10 text-onruntime-blue mb-4">
                 <Users className="w-6 h-6" />
               </div>
-              <h3 className="text-xl font-medium text-foreground mb-2">Solutions personnalisées</h3>
+              <h3 className="text-xl font-medium text-foreground mb-2">{t('expertise.custom-solutions.title')}</h3>
               <p className="text-muted-foreground">
-                Des stratégies digitales sur mesure qui s&apos;adaptent à votre contexte local et aux particularités de votre marché régional.
+                {t('expertise.custom-solutions.description')}
               </p>
             </div>
           </div>
@@ -120,41 +122,16 @@ export default function AgencyLandingPage() {
         <div className="space-y-8">
           <div className="text-center">
             <h2 className="text-3xl font-medium text-foreground mb-4">
-              Notre expertise dans les grandes villes françaises
+              {t('cities.title')}
             </h2>
             <p className="text-muted-foreground max-w-3xl mx-auto">
-              Découvrez notre connaissance approfondie des marchés locaux et comment elle peut bénéficier à votre entreprise.
+              {t('cities.description')}
             </p>
           </div>
 
           <div className="grid sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-6">
             {majorAgencies.map((agency) => (
-              <Link 
-                key={agency.id} 
-                href={Routes.agency.city(agency.id)}
-                className="flex flex-col p-6 rounded-lg border bg-card hover:border-onruntime-blue transition-colors group"
-              >
-                <h3 className="text-xl font-medium text-foreground mb-2 group-hover:text-onruntime-blue transition-colors">
-                  {agency.name}
-                </h3>
-                <p className="text-sm text-muted-foreground mb-4">
-                  Région: {agency.region}
-                </p>
-                <div className="flex flex-wrap gap-2 mt-auto">
-                  {agency.strengths.slice(0, 3).map((strength, index) => (
-                    <span 
-                      key={index} 
-                      className="inline-block text-xs px-2 py-1 rounded-full bg-muted"
-                    >
-                      {strength.title}
-                    </span>
-                  ))}
-                </div>
-                <div className="mt-4 text-xs text-muted-foreground flex items-center group-hover:text-onruntime-blue transition-colors">
-                  <span>Découvrir notre expertise</span>
-                  <ArrowRight className="ml-1 h-3 w-3" />
-                </div>
-              </Link>
+              <AgencyCard key={agency.id} agency={agency} />
             ))}
           </div>
         </div>
@@ -162,39 +139,39 @@ export default function AgencyLandingPage() {
         <div className="space-y-8">
           <div className="text-center">
             <h2 className="text-3xl font-medium text-foreground mb-4">
-              Pourquoi travailler avec nous pour votre projet local ?
+              {t('why-us.title')}
             </h2>
             <p className="text-muted-foreground max-w-3xl mx-auto">
-              Notre connaissance des marchés régionaux présente de nombreux avantages pour votre entreprise.
+              {t('why-us.description')}
             </p>
           </div>
 
           <div className="grid md:grid-cols-2 gap-8">
             <div className="flex flex-col gap-4 p-6 rounded-lg border bg-card">
-              <h3 className="text-xl font-medium text-foreground">Expertise des écosystèmes locaux</h3>
+              <h3 className="text-xl font-medium text-foreground">{t('why-us.local-ecosystems.title')}</h3>
               <p className="text-muted-foreground">
-                Une équipe qui comprend les dynamiques de marché propres à votre région, permettant une stratégie digitale parfaitement adaptée.
+                {t('why-us.local-ecosystems.description')}
               </p>
             </div>
-            
+
             <div className="flex flex-col gap-4 p-6 rounded-lg border bg-card">
-              <h3 className="text-xl font-medium text-foreground">Agilité à distance</h3>
+              <h3 className="text-xl font-medium text-foreground">{t('why-us.remote-agility.title')}</h3>
               <p className="text-muted-foreground">
-                Collaboration efficace par visioconférence, messagerie et outils collaboratifs pour une expérience de travail fluide et productive.
+                {t('why-us.remote-agility.description')}
               </p>
             </div>
-            
+
             <div className="flex flex-col gap-4 p-6 rounded-lg border bg-card">
-              <h3 className="text-xl font-medium text-foreground">Stratégies localisées</h3>
+              <h3 className="text-xl font-medium text-foreground">{t('why-us.localized-strategies.title')}</h3>
               <p className="text-muted-foreground">
-                Des solutions digitales qui tiennent compte des spécificités culturelles et économiques de votre territoire.
+                {t('why-us.localized-strategies.description')}
               </p>
             </div>
-            
+
             <div className="flex flex-col gap-4 p-6 rounded-lg border bg-card">
-              <h3 className="text-xl font-medium text-foreground">Analyse de marché régional</h3>
+              <h3 className="text-xl font-medium text-foreground">{t('why-us.regional-analysis.title')}</h3>
               <p className="text-muted-foreground">
-                Étude des tendances, de la concurrence et des opportunités propres à votre secteur géographique pour une stratégie digitale optimale.
+                {t('why-us.regional-analysis.description')}
               </p>
             </div>
           </div>
@@ -203,46 +180,46 @@ export default function AgencyLandingPage() {
         <div className="space-y-8">
           <div className="text-center">
             <h2 className="text-3xl font-medium text-foreground mb-4">
-              Nos services pour toutes les régions de France
+              {t('services.title')}
             </h2>
             <p className="text-muted-foreground max-w-3xl mx-auto">
-              Des solutions digitales complètes adaptées aux spécificités de chaque marché local.
+              {t('services.description')}
             </p>
           </div>
 
           <div className="grid grid-cols-2 md:grid-cols-4 gap-6">
             <Link href={Routes.service.design.root}>
               <div className="flex flex-col items-center p-6 rounded-lg border bg-card hover:border-onruntime-blue transition-colors text-center">
-                <h3 className="text-lg font-medium text-foreground mb-1">Design UI/UX</h3>
+                <h3 className="text-lg font-medium text-foreground mb-1">{t('services.design.title')}</h3>
                 <p className="text-xs text-muted-foreground">
-                  Interfaces adaptées aux usages locaux
+                  {t('services.design.description')}
                 </p>
               </div>
             </Link>
-            
+
             <Link href={Routes.service.integration.root}>
               <div className="flex flex-col items-center p-6 rounded-lg border bg-card hover:border-onruntime-blue transition-colors text-center">
-                <h3 className="text-lg font-medium text-foreground mb-1">Intégration</h3>
+                <h3 className="text-lg font-medium text-foreground mb-1">{t('services.integration.title')}</h3>
                 <p className="text-xs text-muted-foreground">
-                  Solutions CMS et e-commerce régionales
+                  {t('services.integration.description')}
                 </p>
               </div>
             </Link>
-            
+
             <Link href={Routes.service.frontend.root}>
               <div className="flex flex-col items-center p-6 rounded-lg border bg-card hover:border-onruntime-blue transition-colors text-center">
-                <h3 className="text-lg font-medium text-foreground mb-1">Front-end</h3>
+                <h3 className="text-lg font-medium text-foreground mb-1">{t('services.frontend.title')}</h3>
                 <p className="text-xs text-muted-foreground">
-                  Applications adaptées à vos utilisateurs
+                  {t('services.frontend.description')}
                 </p>
               </div>
             </Link>
-            
+
             <Link href={Routes.service.backend.root}>
               <div className="flex flex-col items-center p-6 rounded-lg border bg-card hover:border-onruntime-blue transition-colors text-center">
-                <h3 className="text-lg font-medium text-foreground mb-1">Back-end</h3>
+                <h3 className="text-lg font-medium text-foreground mb-1">{t('services.backend.title')}</h3>
                 <p className="text-xs text-muted-foreground">
-                  Infrastructures robustes et évolutives
+                  {t('services.backend.description')}
                 </p>
               </div>
             </Link>
@@ -251,7 +228,7 @@ export default function AgencyLandingPage() {
           <div className="text-center">
             <Link href={Routes.services}>
               <Button>
-                Découvrir tous nos services
+                {t('services.discover-all')}
                 <ArrowRight className="ml-2 w-4 h-4" />
               </Button>
             </Link>
@@ -262,21 +239,21 @@ export default function AgencyLandingPage() {
           <div className="absolute top-0 right-0 w-1/3 h-full bg-gradient-to-l from-onruntime-blue/10 to-transparent" />
           <div className="max-w-2xl">
             <h2 className="text-3xl font-medium text-foreground mb-4">
-              Un projet digital adapté à votre marché local ?
+              {t('cta.title')}
             </h2>
             <p className="text-lg text-muted-foreground mb-8">
-              Contactez-nous pour discuter de votre projet. Notre expertise des marchés locaux nous permet de vous accompagner efficacement, où que vous soyez en France.
+              {t('cta.description')}
             </p>
             <div className="flex flex-wrap gap-4">
               <Button asChild size="lg">
                 <Link href={Routes.contact}>
-                  Nous contacter
+                  {t('cta.contact')}
                   <ArrowRight className="ml-2 w-5 h-5" />
                 </Link>
               </Button>
               <Button asChild variant="outline" size="lg" className="min-w-[223px] text-md xs:text-xl whitespace-normal xs:whitespace-nowrap ">
                 <Link href="#expertise-locale">
-                    En savoir plus sur notre approche
+                  {t('cta.learn-more')}
                 </Link>
               </Button>
             </div>
@@ -285,4 +262,4 @@ export default function AgencyLandingPage() {
       </div>
     </main>
   );
-}
\ No newline at end of file
+}
diff --git a/apps/web/src/components/marketing/agency/agency-card.tsx b/apps/web/src/components/marketing/agency/agency-card.tsx
new file mode 100644
index 000000000..0adc57f76
--- /dev/null
+++ b/apps/web/src/components/marketing/agency/agency-card.tsx
@@ -0,0 +1,44 @@
+import { Link } from '@onruntime/translations/next';
+import { ArrowRight } from 'lucide-react';
+import Routes from '@/constants/routes';
+import { Agency } from '@/types/agency';
+import { getTranslation } from '@/lib/translations.server';
+
+interface AgencyCardProps {
+  agency: Agency;
+}
+
+const AgencyCard = async ({ agency }: AgencyCardProps) => {
+  const { t } = await getTranslation('app/agency/page');
+  const { t: tAgency } = await getTranslation(`constants/agencies/${agency.id}`);
+
+  return (
+    <Link
+      href={Routes.agency.city(agency.id)}
+      className="flex flex-col p-6 rounded-lg border bg-card hover:border-onruntime-blue transition-colors group"
+    >
+      <h3 className="text-xl font-medium text-foreground mb-2 group-hover:text-onruntime-blue transition-colors">
+        {agency.name}
+      </h3>
+      <p className="text-sm text-muted-foreground mb-4">
+        {t('cities.region-label')}: {agency.region}
+      </p>
+      <div className="flex flex-wrap gap-2 mt-auto">
+        {agency.strengths.slice(0, 3).map((strength, index) => (
+          <span
+            key={index}
+            className="inline-block text-xs px-2 py-1 rounded-full bg-muted"
+          >
+            {tAgency(`strengths.${strength.key}.title`)}
+          </span>
+        ))}
+      </div>
+      <div className="mt-4 text-xs text-muted-foreground flex items-center group-hover:text-onruntime-blue transition-colors">
+        <span>{t('cities.discover-cta')}</span>
+        <ArrowRight className="ml-1 h-3 w-3" />
+      </div>
+    </Link>
+  );
+};
+
+export default AgencyCard;
diff --git a/apps/web/src/components/marketing/agency/city-hero-section.tsx b/apps/web/src/components/marketing/agency/city-hero-section.tsx
index 69b7ca0a4..886f0442a 100644
--- a/apps/web/src/components/marketing/agency/city-hero-section.tsx
+++ b/apps/web/src/components/marketing/agency/city-hero-section.tsx
@@ -14,21 +14,22 @@ interface CityHeroSectionProps {
 
 const CityHeroSection = async ({ agency }: CityHeroSectionProps) => {
   const { t } = await getTranslation('components/marketing/agency/city-hero-section');
+  const { t: tAgency } = await getTranslation(`constants/agencies/${agency.id}`);
 
   const accent = agency.accentColor || "blue";
 
-  const heroTitle = agency.heroTitle || t('default-title', { name: agency.name });
-  const heroDescription = agency.heroDescription || agency.description;
+  const heroTitle = tAgency('hero-title');
+  const heroDescription = tAgency('hero-description');
 
   return (
     <div className="relative overflow-hidden rounded-xl border border-border bg-card mb-24">
       <div className="grid md:grid-cols-2 gap-6">
-        
+
         <div className="min-w-0 p-8 md:p-12 flex flex-col items-start gap-6 relative z-10">
           <h1 className="font-medium text-4xl md:text-5xl text-foreground">
             {heroTitle}
           </h1>
-          
+
           <p className="text-muted-foreground text-lg">
             {heroDescription}
           </p>
@@ -36,7 +37,7 @@ const CityHeroSection = async ({ agency }: CityHeroSectionProps) => {
           <div className="flex flex-wrap gap-4 mt-2">
             {agency.keyBusinessSectors.slice(0, 3).map((sector, index) => (
               <div key={index} className="px-3 py-1 bg-background rounded-full border text-sm">
-                {sector}
+                {tAgency(`key-business-sectors.${sector}`)}
               </div>
             ))}
           </div>
@@ -51,7 +52,7 @@ const CityHeroSection = async ({ agency }: CityHeroSectionProps) => {
 
         <div className="relative hidden md:flex items-center justify-center p-8 overflow-hidden">
           <div className="relative z-10 w-full max-w-xs aspect-square">
-            
+
             {agency.primaryStat && agency.primaryStat.icon && (
               <div className={`absolute inset-0 rounded-full bg-onruntime-${accent}/5 backdrop-blur-sm border border-onruntime-${accent}/10 flex items-center justify-center`}>
                 {React.createElement(
@@ -61,14 +62,14 @@ const CityHeroSection = async ({ agency }: CityHeroSectionProps) => {
               </div>
             )}
 
-            <div 
+            <div
               className="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 bg-background/80 backdrop-blur-sm p-4 rounded-lg border border-border shadow-sm"
               style={{ maxWidth: '160px' }}
             >
               <p className="text-center font-medium text-lg capitalize">{agency.name}</p>
               {agency.primaryStat && (
                 <p className="text-xs text-center text-muted-foreground mt-1">
-                  {t('specialist', { stat: agency.primaryStat.label })}
+                  {t('specialist', { stat: tAgency('primary-stat.label') })}
                 </p>
               )}
             </div>
@@ -97,4 +98,4 @@ const CityHeroSection = async ({ agency }: CityHeroSectionProps) => {
   );
 };
 
-export default CityHeroSection;
\ No newline at end of file
+export default CityHeroSection;
diff --git a/apps/web/src/components/marketing/agency/contact-cta.tsx b/apps/web/src/components/marketing/agency/contact-cta.tsx
index 06bf85fff..b84eb1246 100644
--- a/apps/web/src/components/marketing/agency/contact-cta.tsx
+++ b/apps/web/src/components/marketing/agency/contact-cta.tsx
@@ -1,15 +1,16 @@
-import React from 'react';
 import { Link } from '@onruntime/translations/next';
 import { Button } from '@/components/ui/button';
 import { ArrowRight, Video, Calendar } from 'lucide-react';
 import Routes from '@/constants/routes';
 import { Agency } from '@/types/agency';
+import { getTranslation } from '@/lib/translations.server';
 
 interface ContactCTAProps {
   agency: Agency;
 }
 
-const ContactCTA: React.FC<ContactCTAProps> = ({ agency }) => {
+const ContactCTA = async ({ agency }: ContactCTAProps) => {
+  const { t } = await getTranslation('components/marketing/agency/contact-cta');
   const accent = agency.accentColor || "blue";
 
   return (
@@ -22,39 +23,39 @@ const ContactCTA: React.FC<ContactCTAProps> = ({ agency }) => {
       </div>
       <div className="max-w-2xl">
         <h2 className="text-3xl font-medium text-foreground mb-4">
-          Un projet adapté au marché de {agency.name} ?
+          {t('title', { city: agency.name })}
         </h2>
         <p className="text-lg text-muted-foreground mb-6">
-          Notre expertise du marché local de {agency.region} nous permet de vous proposer des solutions parfaitement adaptées à votre contexte régional. Discutons de votre projet !
+          {t('description', { region: agency.region })}
         </p>
-        
+
         <div className="flex flex-col gap-4 mb-8">
           <div className="flex items-center gap-3">
             <Video className={`h-5 w-5 text-onruntime-${accent}`} />
-            <span>Consultation en ligne via visioconférence</span>
+            <span>{t('features.video')}</span>
           </div>
           <div className="flex items-center gap-3">
             <Calendar className={`h-5 w-5 text-onruntime-${accent}`} />
-            <span>Horaires flexibles adaptés à votre agenda</span>
+            <span>{t('features.calendar')}</span>
           </div>
           <div className="flex items-start gap-3">
             <svg xmlns="http://www.w3.org/2000/svg" className={`h-5 w-5 text-onruntime-${accent} flex-shrink-0 mt-0.5`} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
               <path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/>
             </svg>
-            <span>Expertise approfondie du marché de {agency.name} et de {agency.region}</span>
+            <span>{t('features.expertise', { city: agency.name, region: agency.region })}</span>
           </div>
         </div>
-        
+
         <div className="flex flex-wrap gap-4">
           <Link href={Routes.contact}>
             <Button size="lg">
-              Discuter de votre projet
+              {t('buttons.discuss')}
               <ArrowRight className="ml-2 w-5 h-5" />
             </Button>
           </Link>
           <Link href={Routes.services}>
             <Button variant="outline" size="lg">
-              Découvrir nos services
+              {t('buttons.discover')}
             </Button>
           </Link>
         </div>
diff --git a/apps/web/src/components/marketing/agency/france-map.tsx b/apps/web/src/components/marketing/agency/france-map.tsx
index 40a3847bb..db7490d14 100644
--- a/apps/web/src/components/marketing/agency/france-map.tsx
+++ b/apps/web/src/components/marketing/agency/france-map.tsx
@@ -2,6 +2,7 @@
 
 import React from 'react';
 import { Link } from '@onruntime/translations/next';
+import { useTranslation } from '@onruntime/translations/react';
 import { getAgencyById } from '@/constants/agencies';
 
 interface FranceMapProps {
@@ -9,7 +10,8 @@ interface FranceMapProps {
 }
 
 const FranceMap: React.FC<FranceMapProps> = ({ cities }) => {
-  
+  const { t } = useTranslation('components/marketing/agency/france-map');
+
   const cityCoordinates = {
     paris: { x: 235, y: 170, label: "Paris" },
     marseille: { x: 250, y: 320, label: "Marseille" },
@@ -89,7 +91,7 @@ const FranceMap: React.FC<FranceMapProps> = ({ cities }) => {
           y="30"
           className="text-xs fill-current text-muted-foreground"
         >
-          Découvrez nos services adaptés à votre ville
+          {t('description')}
         </text>
       </svg>
     </div>
diff --git a/apps/web/src/components/marketing/agency/local-expertise.tsx b/apps/web/src/components/marketing/agency/local-expertise.tsx
index 85c842f3c..52e8b67bb 100644
--- a/apps/web/src/components/marketing/agency/local-expertise.tsx
+++ b/apps/web/src/components/marketing/agency/local-expertise.tsx
@@ -1,22 +1,24 @@
-import React from 'react';
 import { Agency } from '@/types/agency';
+import { getTranslation } from '@/lib/translations.server';
 
 interface LocalExpertiseProps {
   agency: Agency;
 }
 
-const LocalExpertise: React.FC<LocalExpertiseProps> = ({ agency }) => {
-  
+const LocalExpertise = async ({ agency }: LocalExpertiseProps) => {
+  const { t } = await getTranslation(`constants/agencies/${agency.id}`);
+  const { t: tComponent } = await getTranslation('components/marketing/agency/local-expertise');
+
   const accent = agency.accentColor || "blue";
 
   return (
     <div className="space-y-12">
       <div className="text-center">
         <h2 className="text-3xl font-medium text-foreground mb-4">
-          Solutions web adaptées aux entreprises de {agency.name}
+          {tComponent('title', { city: agency.name })}
         </h2>
         <p className="text-muted-foreground max-w-3xl mx-auto">
-          {agency.expertiseText}
+          {t('expertise-text')}
         </p>
       </div>
 
@@ -41,16 +43,16 @@ const LocalExpertise: React.FC<LocalExpertiseProps> = ({ agency }) => {
                   </svg>
                 </div>
               )}
-              <h3 className="text-xl font-medium text-foreground mb-2">{strength.title}</h3>
-              <p className="text-sm text-muted-foreground">{strength.description}</p>
+              <h3 className="text-xl font-medium text-foreground mb-2">{t(`strengths.${strength.key}.title`)}</h3>
+              <p className="text-sm text-muted-foreground">{t(`strengths.${strength.key}.description`)}</p>
             </div>
           );
         })}
       </div>
 
       <div className="p-6 border rounded-lg bg-card">
-        <h3 className="text-xl font-medium text-foreground mb-4">Notre approche pour les projets à {agency.name}</h3>
-        <p className="text-muted-foreground">{agency.whyChooseUs}</p>
+        <h3 className="text-xl font-medium text-foreground mb-4">{tComponent('approach.title', { city: agency.name })}</h3>
+        <p className="text-muted-foreground">{t('why-choose-us')}</p>
 
         <div className="grid grid-cols-1 md:grid-cols-2 gap-4 mt-6">
           {agency.benefits.map((benefit, index) => (
@@ -60,7 +62,7 @@ const LocalExpertise: React.FC<LocalExpertiseProps> = ({ agency }) => {
                   <path d="M20 6 9 17l-5-5"/>
                 </svg>
               </div>
-              <p className="text-sm text-muted-foreground">{benefit}</p>
+              <p className="text-sm text-muted-foreground">{t(`benefits.${benefit}`)}</p>
             </div>
           ))}
         </div>
@@ -69,4 +71,4 @@ const LocalExpertise: React.FC<LocalExpertiseProps> = ({ agency }) => {
   );
 };
 
-export default LocalExpertise;
\ No newline at end of file
+export default LocalExpertise;
diff --git a/apps/web/src/components/marketing/agency/local-testimonials.tsx b/apps/web/src/components/marketing/agency/local-testimonials.tsx
index 991d5b6cc..652f82d5f 100644
--- a/apps/web/src/components/marketing/agency/local-testimonials.tsx
+++ b/apps/web/src/components/marketing/agency/local-testimonials.tsx
@@ -1,52 +1,54 @@
-import React from 'react';
 import Image from 'next/image';
 import { Quote } from 'lucide-react';
 import { Agency } from '@/types/agency';
+import { getTranslation } from '@/lib/translations.server';
 
 interface LocalTestimonialsProps {
   agency: Agency;
 }
 
-const LocalTestimonials: React.FC<LocalTestimonialsProps> = ({ agency }) => {
-  
+const LocalTestimonials = async ({ agency }: LocalTestimonialsProps) => {
+  const { t } = await getTranslation(`constants/agencies/${agency.id}`);
+  const { t: tComponent } = await getTranslation('components/marketing/agency/local-testimonials');
+
   const accent = agency.accentColor || "blue";
 
   return (
     <div className="space-y-8">
       <div className="text-center">
         <h2 className="text-3xl font-medium text-foreground mb-4">
-          Ce que nos clients à {agency.name} disent de nous
+          {tComponent('title', { city: agency.name })}
         </h2>
         <p className="text-muted-foreground max-w-3xl mx-auto">
-          Découvrez les témoignages de nos clients à {agency.name}, et comment nous les avons accompagnés dans leur transformation digitale.
+          {tComponent('description', { city: agency.name })}
         </p>
       </div>
 
       <div className="grid md:grid-cols-2 gap-8">
         {agency.testimonials.map((testimonial, index) => (
-          <div 
+          <div
             key={index}
             className="flex flex-col gap-6 p-6 rounded-lg border bg-card"
           >
             <Quote className={`w-8 h-8 text-onruntime-${accent}`} />
-            
+
             <p className="flex-1 text-foreground italic">
-              &quot;{testimonial.text}&quot;
+              &quot;{t(`testimonials.${testimonial.key}.text`)}&quot;
             </p>
 
             <div className="flex items-center gap-4">
               <div className="relative w-12 h-12 rounded-full overflow-hidden">
                 <Image
-                  src={testimonial.imageUrl || "/static/images/testimonials/placeholder.jpg"}
-                  alt={testimonial.name}
+                  src={testimonial.author.imageUrl || "/static/images/testimonials/placeholder.jpg"}
+                  alt={testimonial.author.name}
                   fill
                   className="object-cover"
                 />
               </div>
               <div>
-                <p className="font-medium text-foreground">{testimonial.name}</p>
+                <p className="font-medium text-foreground">{testimonial.author.name}</p>
                 <p className="text-sm text-muted-foreground">
-                  {testimonial.role}, {testimonial.company}
+                  {testimonial.author.role}, {testimonial.author.company}
                 </p>
               </div>
             </div>
@@ -57,4 +59,4 @@ const LocalTestimonials: React.FC<LocalTestimonialsProps> = ({ agency }) => {
   );
 };
 
-export default LocalTestimonials;
\ No newline at end of file
+export default LocalTestimonials;
diff --git a/apps/web/src/constants/agencies/lyon.ts b/apps/web/src/constants/agencies/lyon.ts
index 2db8eb7ce..2a2a9b29e 100644
--- a/apps/web/src/constants/agencies/lyon.ts
+++ b/apps/web/src/constants/agencies/lyon.ts
@@ -6,117 +6,61 @@ const lyonAgency: Agency = {
   id: "lyon",
   name: "Lyon",
   region: "Auvergne-Rhône-Alpes",
-  
-  title: "Agence Web à Lyon | Solutions Digitales sur Mesure",
-  description: "Développement web, mobile et design UI/UX à Lyon. Notre expertise digitale adaptée aux entreprises de Rhône-Alpes pour dynamiser votre présence en ligne.",
-  
-  heroTitle: "Développement Web & Mobile à Lyon",
-  heroDescription: "Transformez votre entreprise lyonnaise avec des solutions digitales innovantes parfaitement adaptées au dynamisme économique de la région Auvergne-Rhône-Alpes.",
-  
-  keyBusinessSectors: ["Biotechnologie", "Industrie pharmaceutique", "Gastronomie", "Finance"],
+
+  keyBusinessSectors: ["biotech", "pharma", "gastronomy", "finance"],
   localChallenges: [
-    "Digitalisation des PME et ETI industrielles face aux enjeux de l'industrie 4.0",
-    "Développement de la visibilité numérique pour les acteurs de la gastronomie lyonnaise",
-    "Solutions e-commerce adaptées au commerce local et aux artisans de la région",
-    "Applications métier pour les secteurs pharmaceutique et biotech en pleine expansion"
+    "industry-digitalization",
+    "gastronomy-visibility",
+    "local-ecommerce",
+    "biotech-applications"
   ],
   benefits: [
-    "Expertise sectorielle dans les domaines d'excellence lyonnais (biotech, pharma, gastronomie)",
-    "Compréhension des enjeux de digitalisation du bassin industriel rhônalpin",
-    "Solutions adaptées aux PME et ETI en transformation numérique",
-    "Designs UI/UX reflétant l'identité visuelle et les standards de qualité lyonnais",
-    "Connaissance approfondie de l'écosystème numérique local"
+    "sector-expertise",
+    "industrial-understanding",
+    "sme-solutions",
+    "lyon-ui-design",
+    "local-ecosystem-knowledge"
   ],
-  
-  introText: "Implantée au cœur du dynamisme lyonnais, notre expertise digitale accompagne les entreprises de la région dans leur transformation numérique. Entre tradition industrielle, excellence biomédicale et rayonnement gastronomique, Lyon présente un tissu économique riche et diversifié dont nous comprenons parfaitement les enjeux.",
-  
-  expertiseText: "Nous créons des solutions web, mobile et e-commerce adaptées aux spécificités du marché lyonnais et rhônalpin. Notre équipe maîtrise les défis numériques propres aux secteurs d'excellence de la région, des biotechnologies à la gastronomie, en passant par l'industrie manufacturière.",
-  
-  whyChooseUs: "Notre connaissance du marché lyonnais nous permet de développer des solutions numériques parfaitement alignées avec les exigences et les particularités des entreprises locales. Nous comprenons les standards d'excellence de la région et proposons un accompagnement digital qui valorise l'identité et le savoir-faire lyonnais.",
-  
+
   accentColor: "blue",
   primaryStat: {
+    key: "biotech",
     icon: FlaskConical,
-    value: "Biotech",
-    label: "secteur d'innovation"
+    value: "Biotech"
   },
-  
+
   strengths: [
-    {
-      title: "Solutions Biotech & Pharma",
-      description: "Applications spécialisées pour le pôle santé lyonnais.",
-      icon: FlaskConical
-    },
-    {
-      title: "E-commerce gastronomique",
-      description: "Valorisation digitale des produits du terroir rhônalpin.",
-      icon: Store
-    },
-    {
-      title: "Applications industrielles",
-      description: "Outils numériques pour l'industrie 4.0 et la production.",
-      icon: Building
-    },
-    {
-      title: "Interfaces métier",
-      description: "Design UI/UX adaptés aux besoins spécifiques lyonnais.",
-      icon: Code
-    }
+    { key: "biotech-pharma", icon: FlaskConical },
+    { key: "gastronomy-ecommerce", icon: Store },
+    { key: "industrial-applications", icon: Building },
+    { key: "business-interfaces", icon: Code }
   ],
-  
+
   focusedServices: [
-    {
-      name: "Applications métier biotech",
-      description: "Solutions digitales pour les laboratoires et entreprises pharmaceutiques lyonnaises.",
-      link: Routes.service.frontend.web,
-      icon: FlaskConical
-    },
-    {
-      name: "E-commerce gastronomique",
-      description: "Plateformes de vente en ligne pour valoriser l'excellence culinaire lyonnaise.",
-      link: Routes.service.integration.shopify,
-      icon: Store
-    },
-    {
-      name: "Digitalisation industrielle",
-      description: "Outils de pilotage et solutions IoT pour l'industrie rhônalpine.",
-      link: Routes.service.backend.api,
-      icon: Database
-    }
+    { key: "biotech-applications", link: Routes.service.frontend.web, icon: FlaskConical },
+    { key: "gastronomy-ecommerce", link: Routes.service.integration.shopify, icon: Store },
+    { key: "industrial-digitalization", link: Routes.service.backend.api, icon: Database }
   ],
-  
+
   testimonials: [],
-  
+
   contactInfo: {
     phone: "+33 7 56 90 93 75",
-    email: "contact@onruntime.com",
-    meetingOptions: ["Visioconférence", "Déplacements occasionnels à Lyon"]
+    email: "contact@onruntime.com"
   },
-  
+
   stats: [
-    {
-      label: "Projets biotech",
-      value: "15+",
-      description: "Applications spécialisées"
-    },
-    {
-      label: "Satisfaction",
-      value: "97%",
-      description: "Clients satisfaits"
-    },
-    {
-      label: "PME accompagnées",
-      value: "45+",
-      description: "Entreprises lyonnaises"
-    }
+    { key: "biotech-projects", value: "15+" },
+    { key: "satisfaction", value: "97%" },
+    { key: "sme-supported", value: "45+" }
   ],
-  
+
   geo: {
     latitude: "45.764043",
     longitude: "4.835659"
   },
-  
+
   nearbyLocations: ["saint-etienne", "grenoble", "valence", "chambery"]
 };
 
-export default lyonAgency;
\ No newline at end of file
+export default lyonAgency;
diff --git a/apps/web/src/constants/agencies/marseille.ts b/apps/web/src/constants/agencies/marseille.ts
index 3104528ec..71922c5a6 100644
--- a/apps/web/src/constants/agencies/marseille.ts
+++ b/apps/web/src/constants/agencies/marseille.ts
@@ -6,117 +6,61 @@ const marseilleAgency: Agency = {
   id: "marseille",
   name: "Marseille",
   region: "Provence-Alpes-Côte d'Azur",
-  
-  title: "Développement Web à Marseille | Solutions Digitales pour Entreprises Provençales",
-  description: "Créez votre site web ou application mobile à Marseille. Solutions digitales sur mesure pour les entreprises provençales, adaptées aux enjeux locaux de votre secteur.",
-  
-  heroTitle: "Développement Web & Mobile à Marseille",
-  heroDescription: "Nous aidons les entreprises de Marseille et de la région PACA à se digitaliser avec des solutions web sur mesure, parfaitement adaptées aux enjeux spécifiques du marché méditerranéen.",
-  
-  keyBusinessSectors: ["Tourisme", "Maritime", "Commerce local", "Restauration"],
+
+  keyBusinessSectors: ["tourism", "maritime", "local-commerce", "restaurant"],
   localChallenges: [
-    "Forte concurrence dans le secteur touristique méditerranéen nécessitant une présence digitale distinctive",
-    "Besoin de solutions numériques adaptées au commerce maritime et portuaire",
-    "Digitalisation des commerces locaux face aux grandes chaînes",
-    "Nécessité de solutions e-commerce adaptées pour valoriser l'artisanat et les produits locaux"
+    "tourism-competition",
+    "maritime-solutions",
+    "local-commerce-digitalization",
+    "local-ecommerce"
   ],
   benefits: [
-    "Solutions sur mesure adaptées aux spécificités des entreprises provençales",
-    "Expertise pointue dans les secteurs du tourisme et maritime",
-    "Interface utilisateur optimisée pour une clientèle internationale",
-    "Connaissance approfondie des enjeux économiques méditerranéens",
-    "Accompagnement personnalisé tout au long de votre projet digital"
+    "custom-solutions",
+    "tourism-maritime-expertise",
+    "international-ui",
+    "mediterranean-knowledge",
+    "personalized-support"
   ],
-  
-  introText: "Entre mer et collines, Marseille est un carrefour économique dynamique où tradition et innovation se rencontrent. Notre expertise digitale permet aux entreprises marseillaises de se démarquer dans un marché méditerranéen compétitif et en constante évolution.",
-  
-  expertiseText: "Notre équipe conçoit des sites web, applications et solutions e-commerce parfaitement adaptés aux entreprises marseillaises. Nous comprenons les défis de votre marché local et vous proposons des solutions digitales qui valorisent votre identité provençale tout en touchant une clientèle internationale.",
-  
-  whyChooseUs: "Notre connaissance approfondie du marché provençal nous permet de développer des solutions numériques parfaitement adaptées aux défis spécifiques des entreprises locales. Nous comprenons la richesse culturelle et économique de Marseille et l'intégrons dans chaque projet pour créer des expériences digitales authentiques et performantes.",
-  
+
   accentColor: "magenta",
   primaryStat: {
+    key: "tourism",
     icon: Sun,
-    value: "Tourisme",
-    label: "secteur touristique"
+    value: "Tourisme"
   },
-  
+
   strengths: [
-    {
-      title: "Expérience touristique",
-      description: "Sites et applications optimisés pour le secteur touristique méditerranéen.",
-      icon: Sun
-    },
-    {
-      title: "E-commerce local",
-      description: "Solutions de vente en ligne pour artisans et commerçants provençaux.",
-      icon: Building
-    },
-    {
-      title: "Secteur maritime",
-      description: "Digitalisation adaptée aux activités portuaires et nautiques.",
-      icon: Ship
-    },
-    {
-      title: "Design méditerranéen",
-      description: "Interfaces modernes reflétant l'identité visuelle méditerranéenne.",
-      icon: Image
-    }
+    { key: "tourism-experience", icon: Sun },
+    { key: "local-ecommerce", icon: Building },
+    { key: "maritime-sector", icon: Ship },
+    { key: "mediterranean-design", icon: Image }
   ],
-  
+
   focusedServices: [
-    {
-      name: "Sites web touristiques",
-      description: "Vitrines digitales multilingues pour hôtels, restaurants et activités touristiques.",
-      link: Routes.service.frontend.web,
-      icon: Sun
-    },
-    {
-      name: "E-commerce provençal",
-      description: "Boutiques en ligne adaptées aux producteurs et artisans locaux.",
-      link: Routes.service.integration.shopify,
-      icon: Building
-    },
-    {
-      name: "Applications mobiles",
-      description: "Solutions mobiles pour enrichir l'expérience touristique et commerciale.",
-      link: Routes.service.frontend.mobile,
-      icon: User
-    }
+    { key: "tourism-websites", link: Routes.service.frontend.web, icon: Sun },
+    { key: "provencal-ecommerce", link: Routes.service.integration.shopify, icon: Building },
+    { key: "mobile-applications", link: Routes.service.frontend.mobile, icon: User }
   ],
-  
+
   testimonials: [],
-  
+
   contactInfo: {
     phone: "+33 7 56 90 93 75",
-    email: "contact@onruntime.com",
-    meetingOptions: ["Visioconférence", "Déplacements occasionnels à Marseille"]
+    email: "contact@onruntime.com"
   },
 
   stats: [
-    {
-      label: "Expertise",
-      value: "10+",
-      description: "Années d'expérience"
-    },
-    {
-      label: "Satisfaction",
-      value: "98%",
-      description: "Clients satisfaits"
-    },
-    {
-      label: "Délai moyen",
-      value: "6-8",
-      description: "Semaines de réalisation"
-    }
+    { key: "expertise", value: "10+" },
+    { key: "satisfaction", value: "98%" },
+    { key: "average-time", value: "6-8" }
   ],
-  
+
   geo: {
     latitude: "43.296482",
     longitude: "5.369780"
   },
-  
+
   nearbyLocations: ["nice", "montpellier", "toulon", "aix-en-provence"]
 };
 
-export default marseilleAgency;
\ No newline at end of file
+export default marseilleAgency;
diff --git a/apps/web/src/constants/agencies/montpellier.ts b/apps/web/src/constants/agencies/montpellier.ts
index 4bdeeac62..1718b30e1 100644
--- a/apps/web/src/constants/agencies/montpellier.ts
+++ b/apps/web/src/constants/agencies/montpellier.ts
@@ -6,117 +6,61 @@ const montpellierAgency: Agency = {
   id: "montpellier",
   name: "Montpellier",
   region: "Occitanie",
-  
-  title: "Développement Web à Montpellier | Solutions Digitales pour Entreprises Languedociennes",
-  description: "Créez votre site web ou application mobile à Montpellier. Solutions digitales sur mesure pour les entreprises montpelliéraines, adaptées aux enjeux locaux de votre secteur.",
-  
-  heroTitle: "Développement Web & Mobile à Montpellier",
-  heroDescription: "Nous aidons les entreprises de Montpellier et du Languedoc à se digitaliser avec des solutions web sur mesure, parfaitement adaptées aux enjeux spécifiques du marché régional.",
-  
-  keyBusinessSectors: ["Santé & Biotechnologies", "Enseignement supérieur", "Viticulture", "Tourisme"],
+
+  keyBusinessSectors: ["health-biotech", "higher-education", "viticulture", "tourism"],
   localChallenges: [
-    "Digitalisation du secteur des biotechnologies et de la santé en pleine expansion",
-    "Besoin de plateformes éducatives innovantes pour les nombreuses universités et écoles",
-    "Valorisation numérique du patrimoine viticole et des produits du terroir",
-    "Adaptation des acteurs du tourisme face à la concurrence méditerranéenne"
+    "biotech-health-digitalization",
+    "innovative-educational-platforms",
+    "wine-heritage-digital-showcase",
+    "tourism-adaptation"
   ],
   benefits: [
-    "Solutions sur mesure adaptées aux entreprises innovantes du secteur santé",
-    "Expertise pointue dans les plateformes éducatives et les outils e-learning",
-    "Connaissance approfondie du marché languedocien et de ses spécificités",
-    "Interfaces utilisateur optimisées pour valoriser les produits régionaux",
-    "Accompagnement personnalisé tout au long de votre projet digital"
+    "health-sector-solutions",
+    "educational-platforms-expertise",
+    "languedoc-market-knowledge",
+    "regional-products-ui",
+    "personalized-support"
   ],
-  
-  introText: "Ville dynamique à la croisée des influences méditerranéennes et languedociennes, Montpellier se distingue par son écosystème d'innovation en santé, ses universités prestigieuses et son art de vivre. Notre expertise digitale permet aux entreprises montpelliéraines de tirer parti de cette richesse et de se démarquer dans un environnement compétitif.",
-  
-  expertiseText: "Notre équipe conçoit des sites web, applications et solutions digitales parfaitement adaptés aux entreprises de Montpellier et sa région. Nous comprenons les défis spécifiques de votre marché local, qu'il s'agisse du secteur de la santé, de l'éducation ou du terroir languedocien, et vous proposons des solutions numériques qui valorisent votre expertise et votre ancrage régional.",
-  
-  whyChooseUs: "Notre connaissance approfondie du marché montpelliérain nous permet de développer des solutions numériques parfaitement adaptées aux défis spécifiques des entreprises locales. Nous comprenons l'équilibre entre innovation et tradition qui caractérise Montpellier, et intégrons cette compréhension dans chaque projet pour créer des expériences digitales authentiques et performantes.",
-  
+
   accentColor: "magenta",
   primaryStat: {
+    key: "health",
     icon: Microscope,
-    value: "Santé",
-    label: "biotechnologies"
+    value: "Santé"
   },
-  
+
   strengths: [
-    {
-      title: "Santé connectée",
-      description: "Solutions digitales pour startups et entreprises des sciences de la vie.",
-      icon: Microscope
-    },
-    {
-      title: "E-learning",
-      description: "Plateformes pédagogiques pour universités et établissements de formation.",
-      icon: GraduationCap
-    },
-    {
-      title: "Terroir digital",
-      description: "Sites et e-commerce pour domaines viticoles et producteurs locaux.",
-      icon: Wine
-    },
-    {
-      title: "Tourisme régional",
-      description: "Expériences numériques pour valoriser le patrimoine languedocien.",
-      icon: Palmtree
-    }
+    { key: "connected-health", icon: Microscope },
+    { key: "elearning", icon: GraduationCap },
+    { key: "digital-terroir", icon: Wine },
+    { key: "regional-tourism", icon: Palmtree }
   ],
-  
+
   focusedServices: [
-    {
-      name: "Applications santé",
-      description: "Solutions sur mesure pour startups et entreprises du secteur des sciences de la vie.",
-      link: Routes.service.frontend.mobile,
-      icon: Microscope
-    },
-    {
-      name: "Plateformes éducatives",
-      description: "Outils d'apprentissage digitaux pour établissements d'enseignement.",
-      link: Routes.service.frontend.web,
-      icon: GraduationCap
-    },
-    {
-      name: "E-commerce terroir",
-      description: "Boutiques en ligne pour producteurs locaux et domaines viticoles.",
-      link: Routes.service.integration.shopify,
-      icon: Wine
-    }
+    { key: "health-applications", link: Routes.service.frontend.mobile, icon: Microscope },
+    { key: "educational-platforms", link: Routes.service.frontend.web, icon: GraduationCap },
+    { key: "terroir-ecommerce", link: Routes.service.integration.shopify, icon: Wine }
   ],
-  
+
   testimonials: [],
-  
+
   contactInfo: {
     phone: "+33 7 56 90 93 75",
-    email: "contact@onruntime.com",
-    meetingOptions: ["Visioconférence", "Déplacements occasionnels à Montpellier"]
+    email: "contact@onruntime.com"
   },
 
   stats: [
-    {
-      label: "Expertise",
-      value: "10+",
-      description: "Années d'expérience"
-    },
-    {
-      label: "Satisfaction",
-      value: "98%",
-      description: "Clients satisfaits"
-    },
-    {
-      label: "Délai moyen",
-      value: "6-8",
-      description: "Semaines de réalisation"
-    }
+    { key: "expertise", value: "10+" },
+    { key: "satisfaction", value: "98%" },
+    { key: "average-time", value: "6-8" }
   ],
-  
+
   geo: {
     latitude: "43.6108",
     longitude: "3.8767"
   },
-  
+
   nearbyLocations: ["nimes", "toulouse", "marseille", "perpignan"]
 };
 
-export default montpellierAgency;
\ No newline at end of file
+export default montpellierAgency;
diff --git a/apps/web/src/constants/agencies/nantes.ts b/apps/web/src/constants/agencies/nantes.ts
index 27d6abcec..42af80264 100644
--- a/apps/web/src/constants/agencies/nantes.ts
+++ b/apps/web/src/constants/agencies/nantes.ts
@@ -6,117 +6,61 @@ const nantesAgency: Agency = {
   id: "nantes",
   name: "Nantes",
   region: "Pays de la Loire",
-  
-  title: "Développement Web à Nantes | Solutions Digitales pour Entreprises Ligériennes",
-  description: "Créez votre site web ou application mobile à Nantes. Solutions digitales sur mesure pour les entreprises nantaises, adaptées aux enjeux locaux de votre secteur.",
-  
-  heroTitle: "Développement Web & Mobile à Nantes",
-  heroDescription: "Nous aidons les entreprises de Nantes et des Pays de la Loire à se digitaliser avec des solutions web sur mesure, parfaitement adaptées aux enjeux spécifiques du marché ligérien.",
-  
-  keyBusinessSectors: ["Tech & Numérique", "Transition écologique", "Industries créatives", "Agroalimentaire"],
+
+  keyBusinessSectors: ["tech-digital", "ecological-transition", "creative-industries", "agrifood"],
   localChallenges: [
-    "Forte concurrence dans l'écosystème numérique nantais en pleine expansion",
-    "Besoins spécifiques des startups et scale-ups de la French Tech locale",
-    "Digitalisation des acteurs de la transition écologique et énergétique",
-    "Transformation numérique des industries traditionnelles et agroalimentaires régionales"
+    "digital-ecosystem-competition",
+    "startup-scaleup-needs",
+    "ecological-transition-digitalization",
+    "traditional-industries-transformation"
   ],
   benefits: [
-    "Solutions sur mesure adaptées à l'écosystème numérique nantais",
-    "Expertise pointue dans les technologies web innovantes et éco-responsables",
-    "Approche agile parfaitement adaptée aux startups et entreprises innovantes",
-    "Connaissance approfondie des enjeux de la transition numérique ligérienne",
-    "Accompagnement personnalisé tout au long de votre projet digital"
+    "nantes-ecosystem-solutions",
+    "innovative-eco-technologies",
+    "agile-approach",
+    "digital-transition-knowledge",
+    "personalized-support"
   ],
-  
-  introText: "Capitale historique de la Bretagne et métropole innovante, Nantes est reconnue pour son dynamisme économique et sa qualité de vie. Son écosystème numérique florissant, ses industries créatives et son engagement dans la transition écologique en font un territoire unique où l'innovation digitale joue un rôle central.",
-  
-  expertiseText: "Notre équipe conçoit des sites web, applications et solutions digitales parfaitement adaptés aux entreprises nantaises, qu'elles soient des startups innovantes, des acteurs de l'économie responsable ou des entreprises traditionnelles en transformation. Nous comprenons les spécificités du marché local et vous proposons des solutions numériques alignées avec les valeurs d'innovation et de durabilité propres à Nantes.",
-  
-  whyChooseUs: "Notre connaissance approfondie du marché nantais nous permet de développer des solutions numériques parfaitement adaptées aux défis spécifiques des entreprises locales. Nous comprenons l'esprit d'innovation et l'engagement pour une économie plus responsable qui caractérisent Nantes, et intégrons ces valeurs dans chaque projet digital que nous réalisons.",
-  
+
   accentColor: "blue",
   primaryStat: {
+    key: "tech",
     icon: Laptop,
-    value: "Tech",
-    label: "numérique nantais"
+    value: "Tech"
   },
-  
+
   strengths: [
-    {
-      title: "Tech innovante",
-      description: "Solutions digitales modernes pour startups et scale-ups nantaises.",
-      icon: Laptop
-    },
-    {
-      title: "Éco-conception",
-      description: "Sites et applications à l'empreinte environnementale maîtrisée.",
-      icon: Leaf
-    },
-    {
-      title: "Industrie maritime",
-      description: "Digitalisation adaptée aux activités portuaires et fluviales.",
-      icon: Ship
-    },
-    {
-      title: "Énergies renouvelables",
-      description: "Solutions numériques pour les acteurs de la transition énergétique.",
-      icon: Wind
-    }
+    { key: "innovative-tech", icon: Laptop },
+    { key: "eco-design", icon: Leaf },
+    { key: "maritime-industry", icon: Ship },
+    { key: "renewable-energy", icon: Wind }
   ],
-  
+
   focusedServices: [
-    {
-      name: "Web applications",
-      description: "Applications web performantes et évolutives pour startups et entreprises innovantes.",
-      link: Routes.service.frontend.web,
-      icon: Laptop
-    },
-    {
-      name: "Sites éco-conçus",
-      description: "Sites web optimisés et durables pour les acteurs de l'économie responsable.",
-      link: Routes.service.frontend.web,
-      icon: Leaf
-    },
-    {
-      name: "Plateformes métier",
-      description: "Solutions sur mesure pour industries traditionnelles en transformation.",
-      link: Routes.service.backend.api,
-      icon: Building
-    }
+    { key: "web-applications", link: Routes.service.frontend.web, icon: Laptop },
+    { key: "eco-designed-websites", link: Routes.service.frontend.web, icon: Leaf },
+    { key: "business-platforms", link: Routes.service.backend.api, icon: Building }
   ],
-  
+
   testimonials: [],
-  
+
   contactInfo: {
     phone: "+33 7 56 90 93 75",
-    email: "contact@onruntime.com",
-    meetingOptions: ["Visioconférence", "Déplacements occasionnels à Nantes"]
+    email: "contact@onruntime.com"
   },
 
   stats: [
-    {
-      label: "Expertise",
-      value: "10+",
-      description: "Années d'expérience"
-    },
-    {
-      label: "Satisfaction",
-      value: "97%",
-      description: "Clients satisfaits"
-    },
-    {
-      label: "Délai moyen",
-      value: "6-8",
-      description: "Semaines de réalisation"
-    }
+    { key: "expertise", value: "10+" },
+    { key: "satisfaction", value: "97%" },
+    { key: "average-time", value: "6-8" }
   ],
-  
+
   geo: {
     latitude: "47.2184",
     longitude: "-1.5536"
   },
-  
+
   nearbyLocations: ["rennes", "angers", "la-rochelle", "saint-nazaire"]
 };
 
-export default nantesAgency;
\ No newline at end of file
+export default nantesAgency;
diff --git a/apps/web/src/constants/agencies/nice.ts b/apps/web/src/constants/agencies/nice.ts
index 41f3fe618..41f1e7c29 100644
--- a/apps/web/src/constants/agencies/nice.ts
+++ b/apps/web/src/constants/agencies/nice.ts
@@ -6,117 +6,61 @@ const niceAgency: Agency = {
   id: "nice",
   name: "Nice",
   region: "Provence-Alpes-Côte d'Azur",
-  
-  title: "Développement Web à Nice | Solutions Digitales pour Entreprises Azuréennes",
-  description: "Créez votre site web ou application mobile à Nice. Solutions digitales sur mesure pour les entreprises de la Côte d'Azur, adaptées aux enjeux locaux de votre secteur.",
-  
-  heroTitle: "Développement Web & Mobile à Nice",
-  heroDescription: "Nous aidons les entreprises de Nice et de la Côte d'Azur à se digitaliser avec des solutions web sur mesure, parfaitement adaptées aux enjeux spécifiques du marché azuréen.",
-  
-  keyBusinessSectors: ["Tourisme de luxe", "Immobilier", "Événementiel", "Santé & Bien-être"],
+
+  keyBusinessSectors: ["luxury-tourism", "real-estate", "events", "health-wellness"],
   localChallenges: [
-    "Digitalisation du secteur du tourisme haut de gamme sur la Côte d'Azur",
-    "Besoin de solutions immobilières innovantes pour un marché international exigeant",
-    "Mise en valeur digitale de l'événementiel (festivals, congrès, expositions)",
-    "Transformation numérique du secteur santé et bien-être dans une région reconnue pour sa qualité de vie"
+    "luxury-tourism-digitalization",
+    "innovative-real-estate-solutions",
+    "events-digital-showcase",
+    "health-wellness-transformation"
   ],
   benefits: [
-    "Solutions sur mesure adaptées à une clientèle internationale exigeante",
-    "Expertise pointue dans les interfaces haut de gamme et l'expérience utilisateur premium",
-    "Connaissance approfondie du marché azuréen et de ses spécificités",
-    "Applications multilingues adaptées à la clientèle internationale de la Côte d'Azur",
-    "Accompagnement personnalisé tout au long de votre projet digital"
+    "international-clientele-solutions",
+    "premium-interfaces-expertise",
+    "azurean-market-knowledge",
+    "multilingual-applications",
+    "personalized-support"
   ],
-  
-  introText: "Entre mer Méditerranée et Alpes, Nice bénéficie d'un rayonnement international et d'une économie diversifiée où le tourisme côtoie l'innovation. Notre expertise digitale permet aux entreprises niçoises de se démarquer dans un environnement compétitif où l'image et l'excellence sont primordiales.",
-  
-  expertiseText: "Notre équipe conçoit des sites web, applications et solutions e-commerce parfaitement adaptés aux entreprises de Nice et de la Côte d'Azur. Nous comprenons les exigences élevées de votre marché local et vous proposons des solutions digitales qui valorisent le positionnement premium propre à la région.",
-  
-  whyChooseUs: "Notre connaissance approfondie du marché azuréen nous permet de développer des solutions numériques parfaitement adaptées aux défis spécifiques des entreprises locales. Nous comprenons la dimension internationale de Nice et sa réputation d'excellence, et intégrons ces aspects dans chaque projet pour créer des expériences digitales raffinées et performantes.",
-  
+
   accentColor: "blue",
   primaryStat: {
+    key: "tourism",
     icon: Palmtree,
-    value: "Tourisme",
-    label: "tourisme de luxe"
+    value: "Tourisme"
   },
-  
+
   strengths: [
-    {
-      title: "Expérience premium",
-      description: "Sites et applications haut de gamme pour le tourisme de luxe et l'hôtellerie.",
-      icon: Hotel
-    },
-    {
-      title: "Immobilier digital",
-      description: "Solutions innovantes pour les agences immobilières et promoteurs.",
-      icon: Building
-    },
-    {
-      title: "Plateformes événementielles",
-      description: "Sites et applications pour festivals, congrès et événements prestigieux.",
-      icon: ShoppingBag
-    },
-    {
-      title: "Bien-être connecté",
-      description: "Solutions digitales pour cliniques, spas et centres de bien-être.",
-      icon: HeartPulse
-    }
+    { key: "premium-experience", icon: Hotel },
+    { key: "digital-real-estate", icon: Building },
+    { key: "event-platforms", icon: ShoppingBag },
+    { key: "connected-wellness", icon: HeartPulse }
   ],
-  
+
   focusedServices: [
-    {
-      name: "Sites web premium",
-      description: "Vitrines digitales haut de gamme pour hôtels, restaurants et boutiques de luxe.",
-      link: Routes.service.frontend.web,
-      icon: Hotel
-    },
-    {
-      name: "Applications immobilières",
-      description: "Solutions sur mesure pour la présentation et la gestion de biens d'exception.",
-      link: Routes.service.frontend.mobile,
-      icon: Building
-    },
-    {
-      name: "Identité visuelle",
-      description: "Design UI/UX élégant et soigné pour marques et établissements prestigieux.",
-      link: Routes.service.design.ui,
-      icon: Palmtree
-    }
+    { key: "premium-websites", link: Routes.service.frontend.web, icon: Hotel },
+    { key: "real-estate-applications", link: Routes.service.frontend.mobile, icon: Building },
+    { key: "visual-identity", link: Routes.service.design.ui, icon: Palmtree }
   ],
-  
+
   testimonials: [],
-  
+
   contactInfo: {
     phone: "+33 7 56 90 93 75",
-    email: "contact@onruntime.com",
-    meetingOptions: ["Visioconférence", "Déplacements occasionnels à Nice"]
+    email: "contact@onruntime.com"
   },
 
   stats: [
-    {
-      label: "Expertise",
-      value: "10+",
-      description: "Années d'expérience"
-    },
-    {
-      label: "Satisfaction",
-      value: "99%",
-      description: "Clients satisfaits"
-    },
-    {
-      label: "Délai moyen",
-      value: "6-8",
-      description: "Semaines de réalisation"
-    }
+    { key: "expertise", value: "10+" },
+    { key: "satisfaction", value: "99%" },
+    { key: "average-time", value: "6-8" }
   ],
-  
+
   geo: {
     latitude: "43.7102",
     longitude: "7.2620"
   },
-  
+
   nearbyLocations: ["marseille", "cannes", "monaco", "antibes"]
 };
 
-export default niceAgency;
\ No newline at end of file
+export default niceAgency;
diff --git a/apps/web/src/constants/agencies/paris.ts b/apps/web/src/constants/agencies/paris.ts
index a0c7559c7..ad3d33030 100644
--- a/apps/web/src/constants/agencies/paris.ts
+++ b/apps/web/src/constants/agencies/paris.ts
@@ -6,118 +6,62 @@ const parisAgency: Agency = {
   id: "paris",
   name: "Paris",
   region: "Île-de-France",
-  
-  title: "Agence Web à Paris | Développement Web, Mobile & Design UI/UX",
-  description: "Votre partenaire digital au cœur de Paris. Solutions de développement web, mobile et design UI/UX pour accélérer la croissance de votre entreprise parisienne.",
-  
-  heroTitle: "Développement Digital dans la Capitale",
-  heroDescription: "Transformez votre présence numérique avec des solutions innovantes adaptées au marché parisien compétitif et son écosystème dynamique de startups, grands groupes et entreprises innovantes.",
-  
-  keyBusinessSectors: ["Startups Tech", "Finance", "Luxe", "Médias & Communication"],
+
+  keyBusinessSectors: ["startups-tech", "finance", "luxury", "media-communication"],
   localChallenges: [
-    "Forte concurrence digitale sur le marché parisien nécessitant des solutions différenciantes",
-    "Besoins d'outils agiles et performants pour les startups en hypercroissance",
-    "Digitalisation des services financiers traditionnels face aux fintechs",
-    "Développement d'expériences digitales premium pour le secteur du luxe parisien",
-    "Solutions innovantes pour les grands groupes en transformation numérique"
+    "digital-competition",
+    "agile-tools-startups",
+    "financial-digitalization",
+    "luxury-digital-experiences",
+    "corporate-transformation"
   ],
   benefits: [
-    "Expertise pointue des dernières technologies adaptées à l'écosystème startup parisien",
-    "Solutions premium répondant aux exigences élevées du marché de la capitale",
-    "Compréhension des codes du luxe et de la finance pour des expériences numériques sur mesure",
-    "Agilité et réactivité pour accompagner le rythme intensif des entreprises parisiennes",
-    "Connaissance approfondie des tendances et innovations de la tech française"
+    "startup-expertise",
+    "premium-solutions",
+    "luxury-finance-understanding",
+    "agility-responsiveness",
+    "tech-trends-knowledge"
   ],
-  
-  introText: "Au cœur de la capitale française, notre expertise digitale répond aux exigences du marché parisien avec des solutions web et mobile innovantes. Entre grands groupes, entreprises du luxe et startups en pleine croissance, Paris concentre un écosystème numérique dynamique dont nous comprenons parfaitement les enjeux et les opportunités.",
-  
-  expertiseText: "Nous concevons des expériences digitales premium qui répondent aux standards élevés des entreprises parisiennes. Notre équipe maîtrise les défis spécifiques de la capitale, qu'il s'agisse de créer des interfaces utilisateur raffinées pour le secteur du luxe, des applications performantes pour les fintechs, ou des solutions évolutives pour les startups en hypercroissance.",
-  
-  whyChooseUs: "Notre connaissance approfondie du marché parisien nous permet de développer des solutions digitales parfaitement alignées avec les exigences des entreprises de la capitale. Nous combinons innovation technique, excellence créative et compréhension business pour vous accompagner efficacement dans un environnement hautement compétitif.",
-  
+
   accentColor: "magenta",
   primaryStat: {
+    key: "innovation",
     icon: Rocket,
-    value: "Innovation",
-    label: "startup & tech"
+    value: "Innovation"
   },
-  
+
   strengths: [
-    {
-      title: "Solutions Startup",
-      description: "Applications évolutives pour entreprises en forte croissance.",
-      icon: Rocket
-    },
-    {
-      title: "Expériences Luxe",
-      description: "Interfaces premium pour marques et services haut de gamme.",
-      icon: Landmark
-    },
-    {
-      title: "Finance & Fintech",
-      description: "Solutions sécurisées pour le secteur financier parisien.",
-      icon: Building
-    },
-    {
-      title: "International",
-      description: "Développement multilingue adapté aux entreprises globales.",
-      icon: Globe
-    }
+    { key: "startup-solutions", icon: Rocket },
+    { key: "luxury-experiences", icon: Landmark },
+    { key: "finance-fintech", icon: Building },
+    { key: "international", icon: Globe }
   ],
 
   focusedServices: [
-    {
-      name: "Applications SaaS",
-      description: "Développement de solutions cloud innovantes pour startups et scale-ups.",
-      link: Routes.service.frontend.web,
-      icon: Rocket
-    },
-    {
-      name: "E-commerce premium",
-      description: "Plateformes de vente haut de gamme pour les marques de luxe parisiennes.",
-      link: Routes.service.integration.shopify,
-      icon: Landmark
-    },
-    {
-      name: "Design UI/UX innovant",
-      description: "Interfaces utilisateur modernes et différenciantes pour se démarquer à Paris.",
-      link: Routes.service.design.ui,
-      icon: Code
-    }
+    { key: "saas-applications", link: Routes.service.frontend.web, icon: Rocket },
+    { key: "premium-ecommerce", link: Routes.service.integration.shopify, icon: Landmark },
+    { key: "innovative-design", link: Routes.service.design.ui, icon: Code }
   ],
-  
+
   testimonials: [],
-  
+
   contactInfo: {
     phone: "+33 7 56 90 93 75",
-    email: "paris@onruntime.com",
-    meetingOptions: ["Visioconférence", "Rencontres à Paris"]
+    email: "paris@onruntime.com"
   },
-  
+
   stats: [
-    {
-      label: "Startups",
-      value: "30+",
-      description: "Projets pour startups"
-    },
-    {
-      label: "Clients luxe",
-      value: "15+",
-      description: "Marques premium"
-    },
-    {
-      label: "ROI moyen",
-      value: "250%",
-      description: "Retour sur investissement"
-    }
+    { key: "startups", value: "30+" },
+    { key: "luxury-clients", value: "15+" },
+    { key: "average-roi", value: "250%" }
   ],
-  
+
   geo: {
     latitude: "48.856614",
     longitude: "2.3522219"
   },
-  
+
   nearbyLocations: ["boulogne-billancourt", "nanterre", "saint-denis", "versailles"]
 };
 
-export default parisAgency;
\ No newline at end of file
+export default parisAgency;
diff --git a/apps/web/src/constants/agencies/rouen.ts b/apps/web/src/constants/agencies/rouen.ts
index e5fd5c2ce..53cc11773 100644
--- a/apps/web/src/constants/agencies/rouen.ts
+++ b/apps/web/src/constants/agencies/rouen.ts
@@ -6,117 +6,61 @@ const rouenAgency: Agency = {
   id: "rouen",
   name: "Rouen",
   region: "Normandie",
-  
-  title: "Développement Web à Rouen | Solutions Digitales pour Entreprises Normandes",
-  description: "Créez votre site web ou application mobile à Rouen. Solutions digitales sur mesure pour les entreprises normandes, adaptées aux enjeux locaux de votre secteur.",
-  
-  heroTitle: "Développement Web & Mobile à Rouen",
-  heroDescription: "Nous aidons les entreprises de Rouen et de Normandie à se digitaliser avec des solutions web sur mesure, parfaitement adaptées aux enjeux spécifiques du marché normand.",
-  
-  keyBusinessSectors: ["Industrie", "Agroalimentaire", "Logistique", "Commerce local"],
+
+  keyBusinessSectors: ["industry", "agrifood", "logistics", "local-commerce"],
   localChallenges: [
-    "Digitalisation des industries traditionnelles normandes face à la concurrence internationale",
-    "Optimisation de la logistique fluviale et portuaire via des solutions numériques innovantes",
-    "Besoin de solutions e-commerce adaptées aux producteurs et artisans locaux",
-    "Transition numérique des PME normandes avec des budgets maîtrisés"
+    "traditional-industries-digitalization",
+    "logistics-optimization",
+    "local-ecommerce-needs",
+    "sme-digital-transition"
   ],
   benefits: [
-    "Solutions sur mesure adaptées aux spécificités des entreprises normandes",
-    "Expertise pointue dans les secteurs industriels et agroalimentaires régionaux",
-    "Tarifs compétitifs par rapport aux agences parisiennes",
-    "Connaissance approfondie des enjeux logistiques liés à l'axe Seine",
-    "Accompagnement personnalisé tout au long de votre projet digital"
+    "normandy-specific-solutions",
+    "industrial-agrifood-expertise",
+    "competitive-pricing",
+    "seine-logistics-knowledge",
+    "personalized-support"
   ],
-  
-  introText: "Le tissu économique normand présente des enjeux numériques spécifiques que nous avons appris à maîtriser. Entre l'industrie manufacturière, le secteur agroalimentaire et la logistique fluviale, nous créons des solutions digitales qui répondent aux besoins précis des entreprises rouennaises.",
-  
-  expertiseText: "Notre équipe conçoit des sites web, applications et solutions e-commerce parfaitement adaptés aux entreprises de Rouen et sa région. Nous comprenons les défis de votre marché et vous proposons des solutions digitales qui vous aident à vous démarquer et à développer votre activité.",
-  
-  whyChooseUs: "Notre connaissance approfondie du marché normand nous permet de développer des solutions numériques parfaitement adaptées aux défis spécifiques des entreprises locales. Contrairement aux agences parisiennes, nous comprenons les subtilités du tissu économique de Rouen et apportons des solutions sur mesure à un rapport qualité-prix avantageux.",
-  
+
   accentColor: "blue",
   primaryStat: {
+    key: "industry",
     icon: Building,
-    value: "Industrie",
-    label: "secteur industriel"
+    value: "Industrie"
   },
-  
+
   strengths: [
-    {
-      title: "Sites web industriels",
-      description: "Sites performants adaptés aux entreprises manufacturières normandes.",
-      icon: Building
-    },
-    {
-      title: "E-commerce local",
-      description: "Solutions de vente en ligne pour producteurs et artisans locaux.",
-      icon: Store
-    },
-    {
-      title: "Applications métier",
-      description: "Outils numériques sur mesure pour optimiser vos processus.",
-      icon: Database
-    },
-    {
-      title: "Digitalisation PME",
-      description: "Accompagnement complet pour votre transformation numérique.",
-      icon: Cloud
-    }
+    { key: "industrial-websites", icon: Building },
+    { key: "local-ecommerce", icon: Store },
+    { key: "business-applications", icon: Database },
+    { key: "sme-digitalization", icon: Cloud }
   ],
-  
+
   focusedServices: [
-    {
-      name: "Sites web professionnels",
-      description: "Vitrines digitales performantes et optimisées pour le SEO local à Rouen.",
-      link: Routes.service.frontend.web,
-      icon: Building
-    },
-    {
-      name: "E-commerce régional",
-      description: "Boutiques en ligne adaptées aux producteurs et commerces normands.",
-      link: Routes.service.integration.shopify,
-      icon: Store
-    },
-    {
-      name: "Applications métier",
-      description: "Logiciels sur mesure pour l'industrie et la logistique régionale.",
-      link: Routes.service.frontend.desktop,
-      icon: Database
-    }
+    { key: "professional-websites", link: Routes.service.frontend.web, icon: Building },
+    { key: "regional-ecommerce", link: Routes.service.integration.shopify, icon: Store },
+    { key: "business-applications", link: Routes.service.frontend.desktop, icon: Database }
   ],
-  
+
   testimonials: [],
-  
+
   contactInfo: {
     phone: "+33 7 56 90 93 75",
-    email: "contact@onruntime.com",
-    meetingOptions: ["Visioconférence", "Déplacements occasionnels à Rouen"]
+    email: "contact@onruntime.com"
   },
 
   stats: [
-    {
-      label: "Expertise",
-      value: "10+",
-      description: "Années d'expérience"
-    },
-    {
-      label: "Satisfaction",
-      value: "97%",
-      description: "Clients satisfaits"
-    },
-    {
-      label: "Délai moyen",
-      value: "6-8",
-      description: "Semaines de réalisation"
-    }
+    { key: "expertise", value: "10+" },
+    { key: "satisfaction", value: "97%" },
+    { key: "average-time", value: "6-8" }
   ],
-  
+
   geo: {
     latitude: "49.443232",
     longitude: "1.099971"
   },
-  
+
   nearbyLocations: ["le-havre", "caen", "evreux", "dieppe"]
 };
 
-export default rouenAgency;
\ No newline at end of file
+export default rouenAgency;
diff --git a/apps/web/src/constants/agencies/strasbourg.ts b/apps/web/src/constants/agencies/strasbourg.ts
index 96fa6e332..a36717c58 100644
--- a/apps/web/src/constants/agencies/strasbourg.ts
+++ b/apps/web/src/constants/agencies/strasbourg.ts
@@ -6,117 +6,61 @@ const strasbourgAgency: Agency = {
   id: "strasbourg",
   name: "Strasbourg",
   region: "Grand Est",
-  
-  title: "Développement Web à Strasbourg | Solutions Digitales pour Entreprises Alsaciennes",
-  description: "Créez votre site web ou application mobile à Strasbourg. Solutions digitales sur mesure pour les entreprises alsaciennes, adaptées aux enjeux locaux et transfrontaliers.",
-  
-  heroTitle: "Développement Web & Mobile à Strasbourg",
-  heroDescription: "Nous aidons les entreprises de Strasbourg et du Grand Est à se digitaliser avec des solutions web sur mesure, parfaitement adaptées aux enjeux spécifiques du marché alsacien et européen.",
-  
-  keyBusinessSectors: ["Institutions européennes", "Commerce transfrontalier", "Industrie", "Culture & Patrimoine"],
+
+  keyBusinessSectors: ["european-institutions", "cross-border-commerce", "industry", "culture-heritage"],
   localChallenges: [
-    "Besoins spécifiques des institutions européennes et organisations internationales",
-    "Développement du commerce transfrontalier avec l'Allemagne et la Suisse",
-    "Transformation digitale des industries traditionnelles alsaciennes",
-    "Valorisation numérique du riche patrimoine culturel et historique de la région"
+    "european-institutions-needs",
+    "cross-border-development",
+    "traditional-industries-transformation",
+    "heritage-digital-showcase"
   ],
   benefits: [
-    "Solutions multilingues adaptées au contexte international strasbourgeois",
-    "Expertise pointue dans les interfaces utilisateur conformes aux normes européennes",
-    "Connaissance approfondie des marchés transfrontaliers et de leurs spécificités",
-    "Approche à la fois innovante et respectueuse des traditions alsaciennes",
-    "Accompagnement personnalisé tout au long de votre projet digital"
+    "multilingual-solutions",
+    "european-standards-expertise",
+    "cross-border-knowledge",
+    "innovative-traditional-approach",
+    "personalized-support"
   ],
-  
-  introText: "Capitale européenne et ville frontalière au riche patrimoine, Strasbourg conjugue traditions alsaciennes et ouverture internationale. Son statut de siège d'institutions européennes, son industrie dynamique et sa position stratégique entre France et Allemagne en font un territoire unique où le digital joue un rôle essentiel de passerelle.",
-  
-  expertiseText: "Notre équipe conçoit des sites web, applications et solutions digitales parfaitement adaptés aux entreprises strasbourgeoises, qu'elles soient des organisations internationales, des entreprises industrielles ou des acteurs du patrimoine local. Nous comprenons les défis spécifiques de votre marché régional et transfrontalier, et vous proposons des solutions numériques multilingues et culturellement adaptées.",
-  
-  whyChooseUs: "Notre connaissance approfondie du marché strasbourgeois nous permet de développer des solutions numériques parfaitement adaptées aux défis spécifiques des entreprises locales. Nous comprenons les exigences du contexte européen et les particularités culturelles alsaciennes, et intégrons cette double dimension dans chaque projet pour créer des expériences digitales pertinentes et performantes.",
-  
+
   accentColor: "blue",
   primaryStat: {
+    key: "europe",
     icon: Globe,
-    value: "Europe",
-    label: "contexte international"
+    value: "Europe"
   },
-  
+
   strengths: [
-    {
-      title: "Solutions européennes",
-      description: "Plateformes multilingues pour institutions et organisations internationales.",
-      icon: Globe
-    },
-    {
-      title: "Commerce transfrontalier",
-      description: "Solutions e-commerce adaptées aux marchés français, allemand et suisse.",
-      icon: Briefcase
-    },
-    {
-      title: "Industrie 4.0",
-      description: "Digitalisation des processus pour l'industrie alsacienne traditionnelle.",
-      icon: Warehouse
-    },
-    {
-      title: "Patrimoine numérique",
-      description: "Expériences digitales pour valoriser le patrimoine culturel et historique.",
-      icon: LibraryBig
-    }
+    { key: "european-solutions", icon: Globe },
+    { key: "cross-border-commerce", icon: Briefcase },
+    { key: "industry-40", icon: Warehouse },
+    { key: "digital-heritage", icon: LibraryBig }
   ],
-  
+
   focusedServices: [
-    {
-      name: "Sites institutionnels",
-      description: "Plateformes multilingues conformes aux normes européennes d'accessibilité.",
-      link: Routes.service.frontend.web,
-      icon: Building
-    },
-    {
-      name: "E-commerce transfrontalier",
-      description: "Solutions commerciales adaptées aux spécificités des marchés allemand et français.",
-      link: Routes.service.integration.shopify,
-      icon: Briefcase
-    },
-    {
-      name: "Applications industrielles",
-      description: "Outils numériques sur mesure pour moderniser les process industriels.",
-      link: Routes.service.frontend.desktop,
-      icon: Warehouse
-    }
+    { key: "institutional-websites", link: Routes.service.frontend.web, icon: Building },
+    { key: "cross-border-ecommerce", link: Routes.service.integration.shopify, icon: Briefcase },
+    { key: "industrial-applications", link: Routes.service.frontend.desktop, icon: Warehouse }
   ],
-  
+
   testimonials: [],
-  
+
   contactInfo: {
     phone: "+33 7 56 90 93 75",
-    email: "contact@onruntime.com",
-    meetingOptions: ["Visioconférence", "Déplacements occasionnels à Strasbourg"]
+    email: "contact@onruntime.com"
   },
 
   stats: [
-    {
-      label: "Expertise",
-      value: "10+",
-      description: "Années d'expérience"
-    },
-    {
-      label: "Satisfaction",
-      value: "97%",
-      description: "Clients satisfaits"
-    },
-    {
-      label: "Délai moyen",
-      value: "6-8",
-      description: "Semaines de réalisation"
-    }
+    { key: "expertise", value: "10+" },
+    { key: "satisfaction", value: "97%" },
+    { key: "average-time", value: "6-8" }
   ],
-  
+
   geo: {
     latitude: "48.5734",
     longitude: "7.7521"
   },
-  
+
   nearbyLocations: ["colmar", "mulhouse", "metz", "nancy"]
 };
 
-export default strasbourgAgency;
\ No newline at end of file
+export default strasbourgAgency;
diff --git a/apps/web/src/constants/agencies/toulouse.ts b/apps/web/src/constants/agencies/toulouse.ts
index 59451ac86..007bf74a3 100644
--- a/apps/web/src/constants/agencies/toulouse.ts
+++ b/apps/web/src/constants/agencies/toulouse.ts
@@ -6,117 +6,61 @@ const toulouseAgency: Agency = {
   id: "toulouse",
   name: "Toulouse",
   region: "Occitanie",
-  
-  title: "Développement Web à Toulouse | Solutions Digitales pour Entreprises Occitanes",
-  description: "Créez votre site web ou application mobile à Toulouse. Solutions digitales sur mesure pour les entreprises toulousaines, adaptées aux enjeux locaux de votre secteur.",
-  
-  heroTitle: "Développement Web & Mobile à Toulouse",
-  heroDescription: "Nous aidons les entreprises de Toulouse et de l'Occitanie à se digitaliser avec des solutions web sur mesure, parfaitement adaptées aux enjeux spécifiques du marché toulousain.",
-  
-  keyBusinessSectors: ["Aéronautique", "Spatial", "Tech", "Education"],
+
+  keyBusinessSectors: ["aeronautics", "space", "tech", "education"],
   localChallenges: [
-    "Transformation digitale des entreprises de l'écosystème aéronautique et spatial",
-    "Besoin de plateformes innovantes pour les startups de la French Tech toulousaine",
-    "Développement de solutions e-learning pour les nombreux établissements d'enseignement",
-    "Adaptation des commerces locaux face à la concurrence des grandes enseignes nationales"
+    "aerospace-transformation",
+    "startup-platforms",
+    "elearning-development",
+    "local-commerce-adaptation"
   ],
   benefits: [
-    "Solutions sur mesure adaptées aux industries de haute technologie",
-    "Expertise pointue dans le développement d'interfaces complexes",
-    "Connaissance approfondie de l'écosystème startup toulousain",
-    "Approche agile parfaitement adaptée aux projets innovants",
-    "Accompagnement personnalisé tout au long de votre projet digital"
+    "high-tech-solutions",
+    "complex-interfaces-expertise",
+    "startup-ecosystem-knowledge",
+    "agile-approach",
+    "personalized-support"
   ],
-  
-  introText: "Capitale européenne de l'aéronautique et ville étudiante dynamique, Toulouse présente un écosystème économique unique où innovation et tradition se côtoient. Notre expertise digitale permet aux entreprises toulousaines de se démarquer dans un environnement compétitif en constante évolution technologique.",
-  
-  expertiseText: "Notre équipe conçoit des sites web, applications et solutions digitales parfaitement adaptés aux entreprises toulousaines, qu'elles soient des géants de l'aéronautique, des startups innovantes ou des commerces traditionnels. Nous comprenons les défis spécifiques de votre marché local et vous proposons des solutions technologiques de pointe.",
-  
-  whyChooseUs: "Notre connaissance approfondie du marché toulousain nous permet de développer des solutions numériques parfaitement adaptées aux défis spécifiques des entreprises locales. Nous comprenons les enjeux technologiques de la Ville Rose et intégrons cette expertise dans chaque projet pour créer des expériences digitales performantes et tournées vers le futur.",
-  
+
   accentColor: "blue",
   primaryStat: {
+    key: "innovation",
     icon: Rocket,
-    value: "Innovation",
-    label: "secteur technologique"
+    value: "Innovation"
   },
-  
+
   strengths: [
-    {
-      title: "Solutions aéronautiques",
-      description: "Applications et interfaces adaptées aux besoins spécifiques du secteur aérospatial.",
-      icon: Plane
-    },
-    {
-      title: "Plateformes startups",
-      description: "Solutions digitales agiles et évolutives pour les startups innovantes.",
-      icon: Rocket
-    },
-    {
-      title: "E-learning",
-      description: "Plateformes pédagogiques pour les établissements d'enseignement supérieur.",
-      icon: School
-    },
-    {
-      title: "Commerce local",
-      description: "Digitalisation sur mesure pour les commerces et artisans toulousains.",
-      icon: Store
-    }
+    { key: "aeronautics-solutions", icon: Plane },
+    { key: "startup-platforms", icon: Rocket },
+    { key: "elearning", icon: School },
+    { key: "local-commerce", icon: Store }
   ],
-  
+
   focusedServices: [
-    {
-      name: "Applications métier",
-      description: "Solutions sur mesure pour l'industrie aéronautique et les entreprises technologiques.",
-      link: Routes.service.frontend.desktop,
-      icon: Plane
-    },
-    {
-      name: "Sites web innovants",
-      description: "Vitrines digitales modernes pour startups et entreprises innovantes.",
-      link: Routes.service.frontend.web,
-      icon: Rocket
-    },
-    {
-      name: "Plateformes e-commerce",
-      description: "Solutions complètes pour les commerces locaux souhaitant se digitaliser.",
-      link: Routes.service.integration.shopify,
-      icon: Store
-    }
+    { key: "business-applications", link: Routes.service.frontend.desktop, icon: Plane },
+    { key: "innovative-websites", link: Routes.service.frontend.web, icon: Rocket },
+    { key: "ecommerce-platforms", link: Routes.service.integration.shopify, icon: Store }
   ],
-  
+
   testimonials: [],
-  
+
   contactInfo: {
     phone: "+33 7 56 90 93 75",
-    email: "contact@onruntime.com",
-    meetingOptions: ["Visioconférence", "Déplacements occasionnels à Toulouse"]
+    email: "contact@onruntime.com"
   },
 
   stats: [
-    {
-      label: "Expertise",
-      value: "10+",
-      description: "Années d'expérience"
-    },
-    {
-      label: "Satisfaction",
-      value: "98%",
-      description: "Clients satisfaits"
-    },
-    {
-      label: "Délai moyen",
-      value: "5-7",
-      description: "Semaines de réalisation"
-    }
+    { key: "expertise", value: "10+" },
+    { key: "satisfaction", value: "98%" },
+    { key: "average-time", value: "5-7" }
   ],
-  
+
   geo: {
     latitude: "43.604652",
     longitude: "1.444209"
   },
-  
+
   nearbyLocations: ["bordeaux", "montpellier", "pau", "carcassonne"]
 };
 
-export default toulouseAgency;
\ No newline at end of file
+export default toulouseAgency;
diff --git a/apps/web/src/locales/en/app/agency/[city]/page.json b/apps/web/src/locales/en/app/agency/[city]/page.json
index 73bf8e722..921b136cf 100644
--- a/apps/web/src/locales/en/app/agency/[city]/page.json
+++ b/apps/web/src/locales/en/app/agency/[city]/page.json
@@ -4,5 +4,42 @@
       "title": "Local expertise unavailable",
       "description": "We don't have specific expertise for this city yet."
     }
+  },
+  "breadcrumb": {
+    "home": "Home",
+    "local-expertise": "Local expertise"
+  },
+  "challenges": {
+    "title": "Digital challenges for businesses in {city}",
+    "description": "Businesses in {city} face specific challenges in digital transformation. Our expertise allows us to address them effectively.",
+    "market-issues": "{region} market challenges",
+    "our-solutions": "Our tailored solutions",
+    "discover-all-services": "Discover all our services"
+  },
+  "faq": {
+    "title": "Frequently asked questions about web projects in {city}",
+    "description": "Find answers to the most common questions from businesses in {city} about their digital projects.",
+    "questions": {
+      "choose-agency": {
+        "question": "How to choose the right web agency in {city}?",
+        "answer": "To choose the right web agency in {city}, evaluate their knowledge of the local market, their portfolio in your industry, and their ability to understand your specific goals. Expertise in digital challenges specific to the {region} region is also a key factor."
+      },
+      "project-costs": {
+        "question": "What are the costs of a web project in {city}?",
+        "answer": "The costs of a web project in {city} vary depending on complexity, features, and objectives. For a professional showcase website, expect between €3,000 and €8,000. For a custom web application or e-commerce, prices generally start at €10,000. Request a personalized quote for an accurate estimate."
+      },
+      "development-time": {
+        "question": "How long does it take to develop a website or application for my business in {city}?",
+        "answer": "Development timelines for a business in {city} depend on project complexity. A showcase website can be completed in 4-8 weeks, while a custom application or e-commerce typically requires 2-4 months. Our agile methodology allows for progressive deliveries to see progress quickly."
+      },
+      "remote-work": {
+        "question": "Can you work effectively with my business in {city} remotely?",
+        "answer": "Absolutely. We collaborate effectively with businesses in {city} through our proven remote work methodology. Regular video conferences, powerful collaborative tools, and our in-depth knowledge of the local {region} market allow us to provide follow-up as effective as with an on-site team."
+      }
+    }
+  },
+  "testimonials": {
+    "title": "What our clients in {city} say",
+    "description": "Discover feedback from local businesses we have collaborated with."
   }
 }
diff --git a/apps/web/src/locales/en/app/agency/page.json b/apps/web/src/locales/en/app/agency/page.json
index d88092b3f..91faeaa4e 100644
--- a/apps/web/src/locales/en/app/agency/page.json
+++ b/apps/web/src/locales/en/app/agency/page.json
@@ -2,5 +2,80 @@
   "metadata": {
     "title": "Local web expertise | Digital development in major French cities",
     "description": "We support local businesses throughout France with our expertise in regional digital markets. Digital solutions adapted to each region."
+  },
+  "hero": {
+    "title": "Your digital partner throughout France",
+    "description": "We develop innovative digital solutions adapted to the specificities of each French regional market. Our team masters local digital challenges to support you effectively, wherever you are in France.",
+    "cta": "Discuss your project",
+    "secondary-cta": "Discover our local expertise"
+  },
+  "expertise": {
+    "title": "Expertise adapted to each territory",
+    "description": "Our team analyzes and understands local digital ecosystems to offer you solutions perfectly adapted to the economic and cultural specificities of your region.",
+    "local-markets": {
+      "title": "Understanding local markets",
+      "description": "We study and master the specificities and trends of regional digital ecosystems."
+    },
+    "remote-work": {
+      "title": "Effective remote work",
+      "description": "Our team collaborates remotely with your company, wherever you are in France, with the same efficiency as in person."
+    },
+    "custom-solutions": {
+      "title": "Custom solutions",
+      "description": "Tailor-made digital strategies that adapt to your local context and the particularities of your regional market."
+    }
+  },
+  "cities": {
+    "title": "Our expertise in major French cities",
+    "description": "Discover our in-depth knowledge of local markets and how it can benefit your business.",
+    "region-label": "Region",
+    "discover-cta": "Discover our expertise"
+  },
+  "why-us": {
+    "title": "Why work with us for your local project?",
+    "description": "Our knowledge of regional markets offers many advantages for your business.",
+    "local-ecosystems": {
+      "title": "Local ecosystem expertise",
+      "description": "A team that understands the market dynamics specific to your region, enabling a perfectly adapted digital strategy."
+    },
+    "remote-agility": {
+      "title": "Remote agility",
+      "description": "Effective collaboration through video conferencing, messaging and collaborative tools for a smooth and productive work experience."
+    },
+    "localized-strategies": {
+      "title": "Localized strategies",
+      "description": "Digital solutions that take into account the cultural and economic specificities of your territory."
+    },
+    "regional-analysis": {
+      "title": "Regional market analysis",
+      "description": "Study of trends, competition and opportunities specific to your geographic sector for an optimal digital strategy."
+    }
+  },
+  "services": {
+    "title": "Our services for all regions of France",
+    "description": "Complete digital solutions adapted to the specificities of each local market.",
+    "design": {
+      "title": "UI/UX Design",
+      "description": "Interfaces adapted to local uses"
+    },
+    "integration": {
+      "title": "Integration",
+      "description": "Regional CMS and e-commerce solutions"
+    },
+    "frontend": {
+      "title": "Front-end",
+      "description": "Applications adapted to your users"
+    },
+    "backend": {
+      "title": "Back-end",
+      "description": "Robust and scalable infrastructures"
+    },
+    "discover-all": "Discover all our services"
+  },
+  "cta": {
+    "title": "A digital project adapted to your local market?",
+    "description": "Contact us to discuss your project. Our expertise in local markets allows us to support you effectively, wherever you are in France.",
+    "contact": "Contact us",
+    "learn-more": "Learn more about our approach"
   }
 }
diff --git a/apps/web/src/locales/en/components/marketing/agency/contact-cta.json b/apps/web/src/locales/en/components/marketing/agency/contact-cta.json
new file mode 100644
index 000000000..51b023bc3
--- /dev/null
+++ b/apps/web/src/locales/en/components/marketing/agency/contact-cta.json
@@ -0,0 +1,13 @@
+{
+  "title": "A project tailored to the {city} market?",
+  "description": "Our expertise in the local {region} market allows us to offer you solutions perfectly adapted to your regional context. Let's discuss your project!",
+  "features": {
+    "video": "Online consultation via video conference",
+    "calendar": "Flexible hours adapted to your schedule",
+    "expertise": "In-depth expertise of the {city} and {region} market"
+  },
+  "buttons": {
+    "discuss": "Discuss your project",
+    "discover": "Discover our services"
+  }
+}
diff --git a/apps/web/src/locales/en/components/marketing/agency/france-map.json b/apps/web/src/locales/en/components/marketing/agency/france-map.json
new file mode 100644
index 000000000..5084aa9cc
--- /dev/null
+++ b/apps/web/src/locales/en/components/marketing/agency/france-map.json
@@ -0,0 +1,3 @@
+{
+  "description": "Discover our services tailored to your city"
+}
diff --git a/apps/web/src/locales/en/components/marketing/agency/local-expertise.json b/apps/web/src/locales/en/components/marketing/agency/local-expertise.json
new file mode 100644
index 000000000..c087cca99
--- /dev/null
+++ b/apps/web/src/locales/en/components/marketing/agency/local-expertise.json
@@ -0,0 +1,6 @@
+{
+  "title": "Web solutions tailored to {city} businesses",
+  "approach": {
+    "title": "Our approach for projects in {city}"
+  }
+}
diff --git a/apps/web/src/locales/en/components/marketing/agency/local-testimonials.json b/apps/web/src/locales/en/components/marketing/agency/local-testimonials.json
new file mode 100644
index 000000000..6cf2f3882
--- /dev/null
+++ b/apps/web/src/locales/en/components/marketing/agency/local-testimonials.json
@@ -0,0 +1,4 @@
+{
+  "title": "What our clients in {city} say about us",
+  "description": "Discover testimonials from our clients in {city}, and how we supported them in their digital transformation."
+}
diff --git a/apps/web/src/locales/en/constants/agencies/lyon.json b/apps/web/src/locales/en/constants/agencies/lyon.json
new file mode 100644
index 000000000..89b885145
--- /dev/null
+++ b/apps/web/src/locales/en/constants/agencies/lyon.json
@@ -0,0 +1,83 @@
+{
+  "title": "Web Agency in Lyon | Custom Digital Solutions",
+  "description": "Web development, mobile and UI/UX design in Lyon. Our digital expertise tailored to Rhône-Alpes businesses to boost your online presence.",
+  "hero-title": "Web & Mobile Development in Lyon",
+  "hero-description": "Transform your Lyon-based business with innovative digital solutions perfectly adapted to the economic dynamism of the Auvergne-Rhône-Alpes region.",
+  "intro-text": "At the heart of Lyon's dynamism, our digital expertise supports businesses in the region through their digital transformation. Between industrial tradition, biomedical excellence and gastronomic influence, Lyon presents a rich and diversified economic fabric whose challenges we fully understand.",
+  "expertise-text": "We create web, mobile and e-commerce solutions adapted to the specificities of the Lyon and Rhône-Alpes market. Our team masters the digital challenges specific to the region's sectors of excellence, from biotechnology to gastronomy, including manufacturing.",
+  "why-choose-us": "Our knowledge of the Lyon market enables us to develop digital solutions perfectly aligned with the requirements and particularities of local businesses. We understand the region's standards of excellence and offer digital support that enhances Lyon's identity and know-how.",
+  "key-business-sectors": {
+    "biotech": "Biotechnology",
+    "pharma": "Pharmaceutical Industry",
+    "gastronomy": "Gastronomy",
+    "finance": "Finance"
+  },
+  "local-challenges": {
+    "industry-digitalization": "Digitalization of industrial SMEs and mid-caps facing Industry 4.0 challenges",
+    "gastronomy-visibility": "Digital visibility development for Lyon gastronomy players",
+    "local-ecommerce": "E-commerce solutions adapted to local commerce and regional artisans",
+    "biotech-applications": "Business applications for the expanding pharmaceutical and biotech sectors"
+  },
+  "benefits": {
+    "sector-expertise": "Sector expertise in Lyon's fields of excellence (biotech, pharma, gastronomy)",
+    "industrial-understanding": "Understanding of digitalization challenges in the Rhône-Alpes industrial basin",
+    "sme-solutions": "Solutions adapted to SMEs and mid-caps in digital transformation",
+    "lyon-ui-design": "UI/UX designs reflecting Lyon's visual identity and quality standards",
+    "local-ecosystem-knowledge": "In-depth knowledge of the local digital ecosystem"
+  },
+  "primary-stat": {
+    "label": "innovation sector"
+  },
+  "strengths": {
+    "biotech-pharma": {
+      "title": "Biotech & Pharma Solutions",
+      "description": "Specialized applications for Lyon's health cluster."
+    },
+    "gastronomy-ecommerce": {
+      "title": "Gastronomy E-commerce",
+      "description": "Digital enhancement of Rhône-Alpes local products."
+    },
+    "industrial-applications": {
+      "title": "Industrial Applications",
+      "description": "Digital tools for Industry 4.0 and production."
+    },
+    "business-interfaces": {
+      "title": "Business Interfaces",
+      "description": "UI/UX design adapted to Lyon's specific needs."
+    }
+  },
+  "focused-services": {
+    "biotech-applications": {
+      "name": "Biotech Business Applications",
+      "description": "Digital solutions for laboratories and pharmaceutical companies in Lyon."
+    },
+    "gastronomy-ecommerce": {
+      "name": "Gastronomy E-commerce",
+      "description": "Online sales platforms to showcase Lyon's culinary excellence."
+    },
+    "industrial-digitalization": {
+      "name": "Industrial Digitalization",
+      "description": "Control tools and IoT solutions for Rhône-Alpes industry."
+    }
+  },
+  "contact-info": {
+    "meeting-options": {
+      "video-conference": "Video conference",
+      "in-person": "Occasional meetings in Lyon"
+    }
+  },
+  "stats": {
+    "biotech-projects": {
+      "label": "Biotech Projects",
+      "description": "Specialized applications"
+    },
+    "satisfaction": {
+      "label": "Satisfaction",
+      "description": "Satisfied clients"
+    },
+    "sme-supported": {
+      "label": "SMEs Supported",
+      "description": "Lyon businesses"
+    }
+  }
+}
diff --git a/apps/web/src/locales/en/constants/agencies/marseille.json b/apps/web/src/locales/en/constants/agencies/marseille.json
new file mode 100644
index 000000000..11699a9b3
--- /dev/null
+++ b/apps/web/src/locales/en/constants/agencies/marseille.json
@@ -0,0 +1,83 @@
+{
+  "title": "Web Development in Marseille | Digital Solutions for Provençal Businesses",
+  "description": "Create your website or mobile application in Marseille. Custom digital solutions for Provençal businesses, tailored to the local challenges of your sector.",
+  "hero-title": "Web & Mobile Development in Marseille",
+  "hero-description": "We help businesses in Marseille and the PACA region digitalize with custom web solutions, perfectly adapted to the specific challenges of the Mediterranean market.",
+  "intro-text": "Between sea and hills, Marseille is a dynamic economic crossroads where tradition and innovation meet. Our digital expertise enables Marseille businesses to stand out in a competitive and constantly evolving Mediterranean market.",
+  "expertise-text": "Our team designs websites, applications and e-commerce solutions perfectly adapted to Marseille businesses. We understand the challenges of your local market and offer digital solutions that enhance your Provençal identity while reaching an international clientele.",
+  "why-choose-us": "Our in-depth knowledge of the Provençal market allows us to develop digital solutions perfectly adapted to the specific challenges of local businesses. We understand the cultural and economic richness of Marseille and integrate it into each project to create authentic and high-performing digital experiences.",
+  "key-business-sectors": {
+    "tourism": "Tourism",
+    "maritime": "Maritime",
+    "local-commerce": "Local Commerce",
+    "restaurant": "Restaurant"
+  },
+  "local-challenges": {
+    "tourism-competition": "Strong competition in the Mediterranean tourism sector requiring a distinctive digital presence",
+    "maritime-solutions": "Need for digital solutions adapted to maritime and port commerce",
+    "local-commerce-digitalization": "Digitalization of local shops facing large chains",
+    "local-ecommerce": "Need for e-commerce solutions adapted to showcase crafts and local products"
+  },
+  "benefits": {
+    "custom-solutions": "Custom solutions adapted to the specificities of Provençal businesses",
+    "tourism-maritime-expertise": "Sharp expertise in tourism and maritime sectors",
+    "international-ui": "User interface optimized for international clientele",
+    "mediterranean-knowledge": "In-depth knowledge of Mediterranean economic challenges",
+    "personalized-support": "Personalized support throughout your digital project"
+  },
+  "primary-stat": {
+    "label": "tourism sector"
+  },
+  "strengths": {
+    "tourism-experience": {
+      "title": "Tourism Experience",
+      "description": "Sites and applications optimized for the Mediterranean tourism sector."
+    },
+    "local-ecommerce": {
+      "title": "Local E-commerce",
+      "description": "Online sales solutions for Provençal artisans and merchants."
+    },
+    "maritime-sector": {
+      "title": "Maritime Sector",
+      "description": "Digitalization adapted to port and nautical activities."
+    },
+    "mediterranean-design": {
+      "title": "Mediterranean Design",
+      "description": "Modern interfaces reflecting Mediterranean visual identity."
+    }
+  },
+  "focused-services": {
+    "tourism-websites": {
+      "name": "Tourism Websites",
+      "description": "Multilingual digital showcases for hotels, restaurants and tourist activities."
+    },
+    "provencal-ecommerce": {
+      "name": "Provençal E-commerce",
+      "description": "Online stores adapted to local producers and artisans."
+    },
+    "mobile-applications": {
+      "name": "Mobile Applications",
+      "description": "Mobile solutions to enrich the tourism and commercial experience."
+    }
+  },
+  "contact-info": {
+    "meeting-options": {
+      "video-conference": "Video conference",
+      "in-person": "Occasional meetings in Marseille"
+    }
+  },
+  "stats": {
+    "expertise": {
+      "label": "Expertise",
+      "description": "Years of experience"
+    },
+    "satisfaction": {
+      "label": "Satisfaction",
+      "description": "Satisfied clients"
+    },
+    "average-time": {
+      "label": "Average Time",
+      "description": "Weeks of completion"
+    }
+  }
+}
diff --git a/apps/web/src/locales/en/constants/agencies/montpellier.json b/apps/web/src/locales/en/constants/agencies/montpellier.json
new file mode 100644
index 000000000..a3d13296f
--- /dev/null
+++ b/apps/web/src/locales/en/constants/agencies/montpellier.json
@@ -0,0 +1,83 @@
+{
+  "title": "Web Development in Montpellier | Digital Solutions for Languedoc Businesses",
+  "description": "Create your website or mobile application in Montpellier. Custom digital solutions for Montpellier businesses, tailored to the local challenges of your sector.",
+  "hero-title": "Web & Mobile Development in Montpellier",
+  "hero-description": "We help businesses in Montpellier and the Languedoc region digitalize with custom web solutions, perfectly adapted to the specific challenges of the regional market.",
+  "intro-text": "A dynamic city at the crossroads of Mediterranean and Languedoc influences, Montpellier stands out for its health innovation ecosystem, prestigious universities and art of living. Our digital expertise enables Montpellier businesses to leverage this richness and stand out in a competitive environment.",
+  "expertise-text": "Our team designs websites, applications and digital solutions perfectly adapted to businesses in Montpellier and its region. We understand the specific challenges of your local market, whether in the health sector, education or Languedoc terroir, and offer digital solutions that showcase your expertise and regional roots.",
+  "why-choose-us": "Our in-depth knowledge of the Montpellier market allows us to develop digital solutions perfectly adapted to the specific challenges of local businesses. We understand the balance between innovation and tradition that characterizes Montpellier, and integrate this understanding into each project to create authentic and high-performing digital experiences.",
+  "key-business-sectors": {
+    "health-biotech": "Health & Biotechnologies",
+    "higher-education": "Higher Education",
+    "viticulture": "Viticulture",
+    "tourism": "Tourism"
+  },
+  "local-challenges": {
+    "biotech-health-digitalization": "Digitalization of the expanding biotechnology and health sector",
+    "innovative-educational-platforms": "Need for innovative educational platforms for numerous universities and schools",
+    "wine-heritage-digital-showcase": "Digital showcase of wine heritage and local products",
+    "tourism-adaptation": "Adaptation of tourism players facing Mediterranean competition"
+  },
+  "benefits": {
+    "health-sector-solutions": "Custom solutions adapted to innovative health sector companies",
+    "educational-platforms-expertise": "Sharp expertise in educational platforms and e-learning tools",
+    "languedoc-market-knowledge": "In-depth knowledge of the Languedoc market and its specificities",
+    "regional-products-ui": "User interfaces optimized to showcase regional products",
+    "personalized-support": "Personalized support throughout your digital project"
+  },
+  "primary-stat": {
+    "label": "biotechnologies"
+  },
+  "strengths": {
+    "connected-health": {
+      "title": "Connected Health",
+      "description": "Digital solutions for life sciences startups and companies."
+    },
+    "elearning": {
+      "title": "E-learning",
+      "description": "Educational platforms for universities and training institutions."
+    },
+    "digital-terroir": {
+      "title": "Digital Terroir",
+      "description": "Sites and e-commerce for wine estates and local producers."
+    },
+    "regional-tourism": {
+      "title": "Regional Tourism",
+      "description": "Digital experiences to showcase Languedoc heritage."
+    }
+  },
+  "focused-services": {
+    "health-applications": {
+      "name": "Health Applications",
+      "description": "Custom solutions for life sciences startups and companies."
+    },
+    "educational-platforms": {
+      "name": "Educational Platforms",
+      "description": "Digital learning tools for educational institutions."
+    },
+    "terroir-ecommerce": {
+      "name": "Terroir E-commerce",
+      "description": "Online stores for local producers and wine estates."
+    }
+  },
+  "contact-info": {
+    "meeting-options": {
+      "video-conference": "Video conference",
+      "in-person": "Occasional meetings in Montpellier"
+    }
+  },
+  "stats": {
+    "expertise": {
+      "label": "Expertise",
+      "description": "Years of experience"
+    },
+    "satisfaction": {
+      "label": "Satisfaction",
+      "description": "Satisfied clients"
+    },
+    "average-time": {
+      "label": "Average Time",
+      "description": "Weeks of completion"
+    }
+  }
+}
diff --git a/apps/web/src/locales/en/constants/agencies/nantes.json b/apps/web/src/locales/en/constants/agencies/nantes.json
new file mode 100644
index 000000000..2dd830c5a
--- /dev/null
+++ b/apps/web/src/locales/en/constants/agencies/nantes.json
@@ -0,0 +1,83 @@
+{
+  "title": "Web Development in Nantes | Digital Solutions for Loire Valley Businesses",
+  "description": "Create your website or mobile application in Nantes. Custom digital solutions for Nantes businesses, tailored to the local challenges of your sector.",
+  "hero-title": "Web & Mobile Development in Nantes",
+  "hero-description": "We help businesses in Nantes and the Pays de la Loire digitalize with custom web solutions, perfectly adapted to the specific challenges of the Loire Valley market.",
+  "intro-text": "Historic capital of Brittany and innovative metropolis, Nantes is renowned for its economic dynamism and quality of life. Its flourishing digital ecosystem, creative industries and commitment to ecological transition make it a unique territory where digital innovation plays a central role.",
+  "expertise-text": "Our team designs websites, applications and digital solutions perfectly adapted to Nantes businesses, whether they are innovative startups, responsible economy players or traditional companies in transformation. We understand the specificities of the local market and offer digital solutions aligned with the values of innovation and sustainability specific to Nantes.",
+  "why-choose-us": "Our in-depth knowledge of the Nantes market allows us to develop digital solutions perfectly adapted to the specific challenges of local businesses. We understand the spirit of innovation and commitment to a more responsible economy that characterize Nantes, and integrate these values into each digital project we deliver.",
+  "key-business-sectors": {
+    "tech-digital": "Tech & Digital",
+    "ecological-transition": "Ecological Transition",
+    "creative-industries": "Creative Industries",
+    "agrifood": "Agri-food"
+  },
+  "local-challenges": {
+    "digital-ecosystem-competition": "Strong competition in the expanding Nantes digital ecosystem",
+    "startup-scaleup-needs": "Specific needs of local French Tech startups and scale-ups",
+    "ecological-transition-digitalization": "Digitalization of ecological and energy transition players",
+    "traditional-industries-transformation": "Digital transformation of regional traditional and agri-food industries"
+  },
+  "benefits": {
+    "nantes-ecosystem-solutions": "Custom solutions adapted to the Nantes digital ecosystem",
+    "innovative-eco-technologies": "Sharp expertise in innovative and eco-responsible web technologies",
+    "agile-approach": "Agile approach perfectly suited to startups and innovative companies",
+    "digital-transition-knowledge": "In-depth knowledge of Loire Valley digital transition challenges",
+    "personalized-support": "Personalized support throughout your digital project"
+  },
+  "primary-stat": {
+    "label": "Nantes digital"
+  },
+  "strengths": {
+    "innovative-tech": {
+      "title": "Innovative Tech",
+      "description": "Modern digital solutions for Nantes startups and scale-ups."
+    },
+    "eco-design": {
+      "title": "Eco-design",
+      "description": "Sites and applications with controlled environmental footprint."
+    },
+    "maritime-industry": {
+      "title": "Maritime Industry",
+      "description": "Digitalization adapted to port and river activities."
+    },
+    "renewable-energy": {
+      "title": "Renewable Energy",
+      "description": "Digital solutions for energy transition players."
+    }
+  },
+  "focused-services": {
+    "web-applications": {
+      "name": "Web Applications",
+      "description": "High-performance and scalable web applications for startups and innovative companies."
+    },
+    "eco-designed-websites": {
+      "name": "Eco-designed Websites",
+      "description": "Optimized and sustainable websites for responsible economy players."
+    },
+    "business-platforms": {
+      "name": "Business Platforms",
+      "description": "Custom solutions for traditional industries in transformation."
+    }
+  },
+  "contact-info": {
+    "meeting-options": {
+      "video-conference": "Video conference",
+      "in-person": "Occasional meetings in Nantes"
+    }
+  },
+  "stats": {
+    "expertise": {
+      "label": "Expertise",
+      "description": "Years of experience"
+    },
+    "satisfaction": {
+      "label": "Satisfaction",
+      "description": "Satisfied clients"
+    },
+    "average-time": {
+      "label": "Average Time",
+      "description": "Weeks of completion"
+    }
+  }
+}
diff --git a/apps/web/src/locales/en/constants/agencies/nice.json b/apps/web/src/locales/en/constants/agencies/nice.json
new file mode 100644
index 000000000..80e9bc955
--- /dev/null
+++ b/apps/web/src/locales/en/constants/agencies/nice.json
@@ -0,0 +1,83 @@
+{
+  "title": "Web Development in Nice | Digital Solutions for Côte d'Azur Businesses",
+  "description": "Create your website or mobile application in Nice. Custom digital solutions for Côte d'Azur businesses, tailored to the local challenges of your sector.",
+  "hero-title": "Web & Mobile Development in Nice",
+  "hero-description": "We help businesses in Nice and the French Riviera digitalize with custom web solutions, perfectly adapted to the specific challenges of the Azurean market.",
+  "intro-text": "Between the Mediterranean Sea and the Alps, Nice benefits from international influence and a diversified economy where tourism meets innovation. Our digital expertise enables Nice businesses to stand out in a competitive environment where image and excellence are paramount.",
+  "expertise-text": "Our team designs websites, applications and e-commerce solutions perfectly adapted to businesses in Nice and the French Riviera. We understand the high standards of your local market and offer digital solutions that enhance the premium positioning specific to the region.",
+  "why-choose-us": "Our in-depth knowledge of the Azurean market allows us to develop digital solutions perfectly adapted to the specific challenges of local businesses. We understand the international dimension of Nice and its reputation for excellence, and integrate these aspects into each project to create refined and high-performing digital experiences.",
+  "key-business-sectors": {
+    "luxury-tourism": "Luxury Tourism",
+    "real-estate": "Real Estate",
+    "events": "Events",
+    "health-wellness": "Health & Wellness"
+  },
+  "local-challenges": {
+    "luxury-tourism-digitalization": "Digitalization of the high-end tourism sector on the French Riviera",
+    "innovative-real-estate-solutions": "Need for innovative real estate solutions for a demanding international market",
+    "events-digital-showcase": "Digital showcase of events (festivals, conferences, exhibitions)",
+    "health-wellness-transformation": "Digital transformation of the health and wellness sector in a region renowned for quality of life"
+  },
+  "benefits": {
+    "international-clientele-solutions": "Custom solutions adapted to a demanding international clientele",
+    "premium-interfaces-expertise": "Sharp expertise in premium interfaces and user experience",
+    "azurean-market-knowledge": "In-depth knowledge of the Azurean market and its specificities",
+    "multilingual-applications": "Multilingual applications adapted to the French Riviera's international clientele",
+    "personalized-support": "Personalized support throughout your digital project"
+  },
+  "primary-stat": {
+    "label": "luxury tourism"
+  },
+  "strengths": {
+    "premium-experience": {
+      "title": "Premium Experience",
+      "description": "High-end sites and applications for luxury tourism and hospitality."
+    },
+    "digital-real-estate": {
+      "title": "Digital Real Estate",
+      "description": "Innovative solutions for real estate agencies and developers."
+    },
+    "event-platforms": {
+      "title": "Event Platforms",
+      "description": "Sites and applications for festivals, conferences and prestigious events."
+    },
+    "connected-wellness": {
+      "title": "Connected Wellness",
+      "description": "Digital solutions for clinics, spas and wellness centers."
+    }
+  },
+  "focused-services": {
+    "premium-websites": {
+      "name": "Premium Websites",
+      "description": "High-end digital showcases for hotels, restaurants and luxury boutiques."
+    },
+    "real-estate-applications": {
+      "name": "Real Estate Applications",
+      "description": "Custom solutions for presenting and managing exceptional properties."
+    },
+    "visual-identity": {
+      "name": "Visual Identity",
+      "description": "Elegant and refined UI/UX design for prestigious brands and establishments."
+    }
+  },
+  "contact-info": {
+    "meeting-options": {
+      "video-conference": "Video conference",
+      "in-person": "Occasional meetings in Nice"
+    }
+  },
+  "stats": {
+    "expertise": {
+      "label": "Expertise",
+      "description": "Years of experience"
+    },
+    "satisfaction": {
+      "label": "Satisfaction",
+      "description": "Satisfied clients"
+    },
+    "average-time": {
+      "label": "Average Time",
+      "description": "Weeks of completion"
+    }
+  }
+}
diff --git a/apps/web/src/locales/en/constants/agencies/paris.json b/apps/web/src/locales/en/constants/agencies/paris.json
new file mode 100644
index 000000000..26635d937
--- /dev/null
+++ b/apps/web/src/locales/en/constants/agencies/paris.json
@@ -0,0 +1,84 @@
+{
+  "title": "Web Agency in Paris | Web Development, Mobile & UI/UX Design",
+  "description": "Your digital partner in the heart of Paris. Web development, mobile and UI/UX design solutions to accelerate the growth of your Parisian business.",
+  "hero-title": "Digital Development in the Capital",
+  "hero-description": "Transform your digital presence with innovative solutions tailored to the competitive Parisian market and its dynamic ecosystem of startups, large corporations and innovative companies.",
+  "intro-text": "At the heart of the French capital, our digital expertise meets the demands of the Parisian market with innovative web and mobile solutions. Between large corporations, luxury companies and fast-growing startups, Paris concentrates a dynamic digital ecosystem whose challenges and opportunities we fully understand.",
+  "expertise-text": "We design premium digital experiences that meet the high standards of Parisian businesses. Our team masters the specific challenges of the capital, whether it's creating refined user interfaces for the luxury sector, high-performance applications for fintechs, or scalable solutions for fast-growing startups.",
+  "why-choose-us": "Our in-depth knowledge of the Parisian market allows us to develop digital solutions perfectly aligned with the requirements of capital businesses. We combine technical innovation, creative excellence and business understanding to effectively support you in a highly competitive environment.",
+  "key-business-sectors": {
+    "startups-tech": "Tech Startups",
+    "finance": "Finance",
+    "luxury": "Luxury",
+    "media-communication": "Media & Communications"
+  },
+  "local-challenges": {
+    "digital-competition": "Strong digital competition in the Parisian market requiring differentiating solutions",
+    "agile-tools-startups": "Need for agile and high-performance tools for fast-growing startups",
+    "financial-digitalization": "Digitalization of traditional financial services facing fintechs",
+    "luxury-digital-experiences": "Development of premium digital experiences for the Parisian luxury sector",
+    "corporate-transformation": "Innovative solutions for large corporations undergoing digital transformation"
+  },
+  "benefits": {
+    "startup-expertise": "Sharp expertise in the latest technologies adapted to the Parisian startup ecosystem",
+    "premium-solutions": "Premium solutions meeting the high standards of the capital's market",
+    "luxury-finance-understanding": "Understanding of luxury and finance codes for tailor-made digital experiences",
+    "agility-responsiveness": "Agility and responsiveness to match the intensive pace of Parisian businesses",
+    "tech-trends-knowledge": "In-depth knowledge of French tech trends and innovations"
+  },
+  "primary-stat": {
+    "label": "startup & tech"
+  },
+  "strengths": {
+    "startup-solutions": {
+      "title": "Startup Solutions",
+      "description": "Scalable applications for fast-growing companies."
+    },
+    "luxury-experiences": {
+      "title": "Luxury Experiences",
+      "description": "Premium interfaces for high-end brands and services."
+    },
+    "finance-fintech": {
+      "title": "Finance & Fintech",
+      "description": "Secure solutions for the Parisian financial sector."
+    },
+    "international": {
+      "title": "International",
+      "description": "Multilingual development adapted to global companies."
+    }
+  },
+  "focused-services": {
+    "saas-applications": {
+      "name": "SaaS Applications",
+      "description": "Development of innovative cloud solutions for startups and scale-ups."
+    },
+    "premium-ecommerce": {
+      "name": "Premium E-commerce",
+      "description": "High-end sales platforms for Parisian luxury brands."
+    },
+    "innovative-design": {
+      "name": "Innovative UI/UX Design",
+      "description": "Modern and differentiating user interfaces to stand out in Paris."
+    }
+  },
+  "contact-info": {
+    "meeting-options": {
+      "video-conference": "Video conference",
+      "in-person": "Meetings in Paris"
+    }
+  },
+  "stats": {
+    "startups": {
+      "label": "Startups",
+      "description": "Projects for startups"
+    },
+    "luxury-clients": {
+      "label": "Luxury clients",
+      "description": "Premium brands"
+    },
+    "average-roi": {
+      "label": "Average ROI",
+      "description": "Return on investment"
+    }
+  }
+}
diff --git a/apps/web/src/locales/en/constants/agencies/rouen.json b/apps/web/src/locales/en/constants/agencies/rouen.json
new file mode 100644
index 000000000..a94375776
--- /dev/null
+++ b/apps/web/src/locales/en/constants/agencies/rouen.json
@@ -0,0 +1,83 @@
+{
+  "title": "Web Development in Rouen | Digital Solutions for Normandy Businesses",
+  "description": "Create your website or mobile application in Rouen. Custom digital solutions for Normandy businesses, tailored to the local challenges of your sector.",
+  "hero-title": "Web & Mobile Development in Rouen",
+  "hero-description": "We help businesses in Rouen and Normandy digitalize with custom web solutions, perfectly adapted to the specific challenges of the Normandy market.",
+  "intro-text": "The Normandy economic fabric presents specific digital challenges that we have learned to master. Between manufacturing industry, agri-food sector and river logistics, we create digital solutions that meet the precise needs of Rouen businesses.",
+  "expertise-text": "Our team designs websites, applications and e-commerce solutions perfectly adapted to businesses in Rouen and its region. We understand the challenges of your market and offer digital solutions that help you stand out and grow your business.",
+  "why-choose-us": "Our in-depth knowledge of the Normandy market allows us to develop digital solutions perfectly adapted to the specific challenges of local businesses. Unlike Parisian agencies, we understand the subtleties of Rouen's economic fabric and provide custom solutions at an advantageous value for money.",
+  "key-business-sectors": {
+    "industry": "Industry",
+    "agrifood": "Agri-food",
+    "logistics": "Logistics",
+    "local-commerce": "Local Commerce"
+  },
+  "local-challenges": {
+    "traditional-industries-digitalization": "Digitalization of traditional Normandy industries facing international competition",
+    "logistics-optimization": "Optimization of river and port logistics through innovative digital solutions",
+    "local-ecommerce-needs": "Need for e-commerce solutions adapted to local producers and artisans",
+    "sme-digital-transition": "Digital transition of Normandy SMEs with controlled budgets"
+  },
+  "benefits": {
+    "normandy-specific-solutions": "Custom solutions adapted to the specificities of Normandy businesses",
+    "industrial-agrifood-expertise": "Sharp expertise in regional industrial and agri-food sectors",
+    "competitive-pricing": "Competitive pricing compared to Parisian agencies",
+    "seine-logistics-knowledge": "In-depth knowledge of logistics challenges related to the Seine axis",
+    "personalized-support": "Personalized support throughout your digital project"
+  },
+  "primary-stat": {
+    "label": "industrial sector"
+  },
+  "strengths": {
+    "industrial-websites": {
+      "title": "Industrial Websites",
+      "description": "High-performance sites adapted to Normandy manufacturing companies."
+    },
+    "local-ecommerce": {
+      "title": "Local E-commerce",
+      "description": "Online sales solutions for local producers and artisans."
+    },
+    "business-applications": {
+      "title": "Business Applications",
+      "description": "Custom digital tools to optimize your processes."
+    },
+    "sme-digitalization": {
+      "title": "SME Digitalization",
+      "description": "Complete support for your digital transformation."
+    }
+  },
+  "focused-services": {
+    "professional-websites": {
+      "name": "Professional Websites",
+      "description": "High-performance digital showcases optimized for local SEO in Rouen."
+    },
+    "regional-ecommerce": {
+      "name": "Regional E-commerce",
+      "description": "Online stores adapted to Normandy producers and merchants."
+    },
+    "business-applications": {
+      "name": "Business Applications",
+      "description": "Custom software for regional industry and logistics."
+    }
+  },
+  "contact-info": {
+    "meeting-options": {
+      "video-conference": "Video conference",
+      "in-person": "Occasional meetings in Rouen"
+    }
+  },
+  "stats": {
+    "expertise": {
+      "label": "Expertise",
+      "description": "Years of experience"
+    },
+    "satisfaction": {
+      "label": "Satisfaction",
+      "description": "Satisfied clients"
+    },
+    "average-time": {
+      "label": "Average Time",
+      "description": "Weeks of completion"
+    }
+  }
+}
diff --git a/apps/web/src/locales/en/constants/agencies/strasbourg.json b/apps/web/src/locales/en/constants/agencies/strasbourg.json
new file mode 100644
index 000000000..e603d732c
--- /dev/null
+++ b/apps/web/src/locales/en/constants/agencies/strasbourg.json
@@ -0,0 +1,83 @@
+{
+  "title": "Web Development in Strasbourg | Digital Solutions for Alsatian Businesses",
+  "description": "Create your website or mobile application in Strasbourg. Custom digital solutions for Alsatian businesses, tailored to local and cross-border challenges.",
+  "hero-title": "Web & Mobile Development in Strasbourg",
+  "hero-description": "We help businesses in Strasbourg and the Grand Est region digitalize with custom web solutions, perfectly adapted to the specific challenges of the Alsatian and European market.",
+  "intro-text": "European capital and border city with rich heritage, Strasbourg combines Alsatian traditions and international openness. Its status as seat of European institutions, its dynamic industry and strategic position between France and Germany make it a unique territory where digital plays an essential bridging role.",
+  "expertise-text": "Our team designs websites, applications and digital solutions perfectly adapted to Strasbourg businesses, whether they are international organizations, industrial companies or local heritage players. We understand the specific challenges of your regional and cross-border market, and offer multilingual and culturally adapted digital solutions.",
+  "why-choose-us": "Our in-depth knowledge of the Strasbourg market allows us to develop digital solutions perfectly adapted to the specific challenges of local businesses. We understand the requirements of the European context and Alsatian cultural particularities, and integrate this dual dimension into each project to create relevant and high-performing digital experiences.",
+  "key-business-sectors": {
+    "european-institutions": "European Institutions",
+    "cross-border-commerce": "Cross-border Commerce",
+    "industry": "Industry",
+    "culture-heritage": "Culture & Heritage"
+  },
+  "local-challenges": {
+    "european-institutions-needs": "Specific needs of European institutions and international organizations",
+    "cross-border-development": "Development of cross-border commerce with Germany and Switzerland",
+    "traditional-industries-transformation": "Digital transformation of traditional Alsatian industries",
+    "heritage-digital-showcase": "Digital showcase of the region's rich cultural and historical heritage"
+  },
+  "benefits": {
+    "multilingual-solutions": "Multilingual solutions adapted to the Strasbourg international context",
+    "european-standards-expertise": "Sharp expertise in user interfaces compliant with European standards",
+    "cross-border-knowledge": "In-depth knowledge of cross-border markets and their specificities",
+    "innovative-traditional-approach": "Approach that is both innovative and respectful of Alsatian traditions",
+    "personalized-support": "Personalized support throughout your digital project"
+  },
+  "primary-stat": {
+    "label": "international context"
+  },
+  "strengths": {
+    "european-solutions": {
+      "title": "European Solutions",
+      "description": "Multilingual platforms for institutions and international organizations."
+    },
+    "cross-border-commerce": {
+      "title": "Cross-border Commerce",
+      "description": "E-commerce solutions adapted to French, German and Swiss markets."
+    },
+    "industry-40": {
+      "title": "Industry 4.0",
+      "description": "Process digitalization for traditional Alsatian industry."
+    },
+    "digital-heritage": {
+      "title": "Digital Heritage",
+      "description": "Digital experiences to showcase cultural and historical heritage."
+    }
+  },
+  "focused-services": {
+    "institutional-websites": {
+      "name": "Institutional Websites",
+      "description": "Multilingual platforms compliant with European accessibility standards."
+    },
+    "cross-border-ecommerce": {
+      "name": "Cross-border E-commerce",
+      "description": "Commercial solutions adapted to German and French market specificities."
+    },
+    "industrial-applications": {
+      "name": "Industrial Applications",
+      "description": "Custom digital tools to modernize industrial processes."
+    }
+  },
+  "contact-info": {
+    "meeting-options": {
+      "video-conference": "Video conference",
+      "in-person": "Occasional meetings in Strasbourg"
+    }
+  },
+  "stats": {
+    "expertise": {
+      "label": "Expertise",
+      "description": "Years of experience"
+    },
+    "satisfaction": {
+      "label": "Satisfaction",
+      "description": "Satisfied clients"
+    },
+    "average-time": {
+      "label": "Average Time",
+      "description": "Weeks of completion"
+    }
+  }
+}
diff --git a/apps/web/src/locales/en/constants/agencies/toulouse.json b/apps/web/src/locales/en/constants/agencies/toulouse.json
new file mode 100644
index 000000000..48171bb80
--- /dev/null
+++ b/apps/web/src/locales/en/constants/agencies/toulouse.json
@@ -0,0 +1,83 @@
+{
+  "title": "Web Development in Toulouse | Digital Solutions for Occitan Businesses",
+  "description": "Create your website or mobile application in Toulouse. Custom digital solutions for Toulouse businesses, tailored to the local challenges of your sector.",
+  "hero-title": "Web & Mobile Development in Toulouse",
+  "hero-description": "We help businesses in Toulouse and Occitania digitalize with custom web solutions, perfectly adapted to the specific challenges of the Toulouse market.",
+  "intro-text": "European aerospace capital and dynamic student city, Toulouse presents a unique economic ecosystem where innovation and tradition coexist. Our digital expertise enables Toulouse businesses to stand out in a competitive and constantly evolving technological environment.",
+  "expertise-text": "Our team designs websites, applications and digital solutions perfectly adapted to Toulouse businesses, whether they are aerospace giants, innovative startups or traditional shops. We understand the specific challenges of your local market and offer cutting-edge technological solutions.",
+  "why-choose-us": "Our in-depth knowledge of the Toulouse market allows us to develop digital solutions perfectly adapted to the specific challenges of local businesses. We understand the technological challenges of the Pink City and integrate this expertise into each project to create high-performing and future-oriented digital experiences.",
+  "key-business-sectors": {
+    "aeronautics": "Aeronautics",
+    "space": "Space",
+    "tech": "Tech",
+    "education": "Education"
+  },
+  "local-challenges": {
+    "aerospace-transformation": "Digital transformation of companies in the aerospace ecosystem",
+    "startup-platforms": "Need for innovative platforms for Toulouse French Tech startups",
+    "elearning-development": "Development of e-learning solutions for numerous educational institutions",
+    "local-commerce-adaptation": "Adaptation of local shops facing competition from national chains"
+  },
+  "benefits": {
+    "high-tech-solutions": "Custom solutions adapted to high-tech industries",
+    "complex-interfaces-expertise": "Sharp expertise in developing complex interfaces",
+    "startup-ecosystem-knowledge": "In-depth knowledge of the Toulouse startup ecosystem",
+    "agile-approach": "Agile approach perfectly suited to innovative projects",
+    "personalized-support": "Personalized support throughout your digital project"
+  },
+  "primary-stat": {
+    "label": "technology sector"
+  },
+  "strengths": {
+    "aeronautics-solutions": {
+      "title": "Aeronautics Solutions",
+      "description": "Applications and interfaces adapted to specific aerospace sector needs."
+    },
+    "startup-platforms": {
+      "title": "Startup Platforms",
+      "description": "Agile and scalable digital solutions for innovative startups."
+    },
+    "elearning": {
+      "title": "E-learning",
+      "description": "Educational platforms for higher education institutions."
+    },
+    "local-commerce": {
+      "title": "Local Commerce",
+      "description": "Custom digitalization for Toulouse shops and artisans."
+    }
+  },
+  "focused-services": {
+    "business-applications": {
+      "name": "Business Applications",
+      "description": "Custom solutions for aeronautics industry and technology companies."
+    },
+    "innovative-websites": {
+      "name": "Innovative Websites",
+      "description": "Modern digital showcases for startups and innovative companies."
+    },
+    "ecommerce-platforms": {
+      "name": "E-commerce Platforms",
+      "description": "Complete solutions for local shops looking to digitalize."
+    }
+  },
+  "contact-info": {
+    "meeting-options": {
+      "video-conference": "Video conference",
+      "in-person": "Occasional meetings in Toulouse"
+    }
+  },
+  "stats": {
+    "expertise": {
+      "label": "Expertise",
+      "description": "Years of experience"
+    },
+    "satisfaction": {
+      "label": "Satisfaction",
+      "description": "Satisfied clients"
+    },
+    "average-time": {
+      "label": "Average Time",
+      "description": "Weeks of completion"
+    }
+  }
+}
diff --git a/apps/web/src/locales/fr/app/agency/[city]/page.json b/apps/web/src/locales/fr/app/agency/[city]/page.json
index c8bcbeda7..172d099c8 100644
--- a/apps/web/src/locales/fr/app/agency/[city]/page.json
+++ b/apps/web/src/locales/fr/app/agency/[city]/page.json
@@ -4,5 +4,42 @@
       "title": "Expertise locale non disponible",
       "description": "Nous n'avons pas encore d'expertise spécifique pour cette ville."
     }
+  },
+  "breadcrumb": {
+    "home": "Accueil",
+    "local-expertise": "Expertise locale"
+  },
+  "challenges": {
+    "title": "Défis numériques des entreprises à {city}",
+    "description": "Les entreprises de {city} font face à des défis spécifiques en matière de transformation digitale. Notre expertise nous permet d'y répondre efficacement.",
+    "market-issues": "Enjeux du marché {region}",
+    "our-solutions": "Nos solutions adaptées",
+    "discover-all-services": "Découvrir tous nos services"
+  },
+  "faq": {
+    "title": "Questions fréquentes sur les projets web à {city}",
+    "description": "Découvrez les réponses aux questions les plus courantes des entreprises de {city} concernant leurs projets digitaux.",
+    "questions": {
+      "choose-agency": {
+        "question": "Comment choisir la bonne agence web à {city} ?",
+        "answer": "Pour choisir la bonne agence web à {city}, évaluez leur connaissance du marché local, leur portfolio dans votre secteur d'activité, et leur capacité à comprendre vos objectifs spécifiques. L'expertise dans les défis numériques propres à la région {region} est également un facteur clé."
+      },
+      "project-costs": {
+        "question": "Quels sont les coûts d'un projet web à {city} ?",
+        "answer": "Les coûts d'un projet web à {city} varient selon la complexité, les fonctionnalités et les objectifs. Pour un site vitrine professionnel, comptez entre 3 000€ et 8 000€. Pour une application web ou e-commerce, les tarifs débutent généralement à 10 000€. Demandez un devis personnalisé pour une estimation précise."
+      },
+      "development-time": {
+        "question": "Combien de temps faut-il pour développer un site web ou une application pour mon entreprise à {city} ?",
+        "answer": "Les délais de développement pour une entreprise à {city} dépendent de la complexité du projet. Un site vitrine peut être réalisé en 4-8 semaines, tandis qu'une application sur mesure ou un e-commerce nécessite généralement 2-4 mois. Notre méthodologie agile permet des livraisons progressives pour voir rapidement les avancées."
+      },
+      "remote-work": {
+        "question": "Pouvez-vous travailler efficacement avec mon entreprise à {city} à distance ?",
+        "answer": "Absolument. Nous collaborons efficacement avec les entreprises de {city} grâce à notre méthodologie éprouvée de travail à distance. Visioconférences régulières, outils collaboratifs performants et notre connaissance approfondie du marché local de {region} nous permettent d'assurer un suivi aussi efficace qu'avec une équipe sur place."
+      }
+    }
+  },
+  "testimonials": {
+    "title": "Ce que disent nos clients à {city}",
+    "description": "Découvrez les retours d'entreprises locales avec lesquelles nous avons collaboré."
   }
 }
diff --git a/apps/web/src/locales/fr/app/agency/page.json b/apps/web/src/locales/fr/app/agency/page.json
index deff6d42b..1a7b8124e 100644
--- a/apps/web/src/locales/fr/app/agency/page.json
+++ b/apps/web/src/locales/fr/app/agency/page.json
@@ -2,5 +2,80 @@
   "metadata": {
     "title": "Expertise web locale | Développement digital dans les grandes villes françaises",
     "description": "Nous accompagnons les entreprises locales partout en France avec notre expertise des marchés numériques régionaux. Solutions digitales adaptées à chaque région."
+  },
+  "hero": {
+    "title": "Votre partenaire digital partout en France",
+    "description": "Nous développons des solutions digitales innovantes adaptées aux spécificités de chaque marché régional français. Notre équipe maîtrise les enjeux numériques locaux pour vous accompagner efficacement, où que vous soyez en France.",
+    "cta": "Discuter de votre projet",
+    "secondary-cta": "Découvrir notre expertise locale"
+  },
+  "expertise": {
+    "title": "Une expertise adaptée à chaque territoire",
+    "description": "Notre équipe analyse et comprend les écosystèmes numériques locaux pour vous proposer des solutions parfaitement adaptées aux spécificités économiques et culturelles de votre région.",
+    "local-markets": {
+      "title": "Compréhension des marchés locaux",
+      "description": "Nous étudions et maîtrisons les spécificités et les tendances des écosystèmes numériques régionaux."
+    },
+    "remote-work": {
+      "title": "Travail à distance efficace",
+      "description": "Notre équipe collabore à distance avec votre entreprise, où que vous soyez en France, avec la même efficacité qu'en présentiel."
+    },
+    "custom-solutions": {
+      "title": "Solutions personnalisées",
+      "description": "Des stratégies digitales sur mesure qui s'adaptent à votre contexte local et aux particularités de votre marché régional."
+    }
+  },
+  "cities": {
+    "title": "Notre expertise dans les grandes villes françaises",
+    "description": "Découvrez notre connaissance approfondie des marchés locaux et comment elle peut bénéficier à votre entreprise.",
+    "region-label": "Région",
+    "discover-cta": "Découvrir notre expertise"
+  },
+  "why-us": {
+    "title": "Pourquoi travailler avec nous pour votre projet local ?",
+    "description": "Notre connaissance des marchés régionaux présente de nombreux avantages pour votre entreprise.",
+    "local-ecosystems": {
+      "title": "Expertise des écosystèmes locaux",
+      "description": "Une équipe qui comprend les dynamiques de marché propres à votre région, permettant une stratégie digitale parfaitement adaptée."
+    },
+    "remote-agility": {
+      "title": "Agilité à distance",
+      "description": "Collaboration efficace par visioconférence, messagerie et outils collaboratifs pour une expérience de travail fluide et productive."
+    },
+    "localized-strategies": {
+      "title": "Stratégies localisées",
+      "description": "Des solutions digitales qui tiennent compte des spécificités culturelles et économiques de votre territoire."
+    },
+    "regional-analysis": {
+      "title": "Analyse de marché régional",
+      "description": "Étude des tendances, de la concurrence et des opportunités propres à votre secteur géographique pour une stratégie digitale optimale."
+    }
+  },
+  "services": {
+    "title": "Nos services pour toutes les régions de France",
+    "description": "Des solutions digitales complètes adaptées aux spécificités de chaque marché local.",
+    "design": {
+      "title": "Design UI/UX",
+      "description": "Interfaces adaptées aux usages locaux"
+    },
+    "integration": {
+      "title": "Intégration",
+      "description": "Solutions CMS et e-commerce régionales"
+    },
+    "frontend": {
+      "title": "Front-end",
+      "description": "Applications adaptées à vos utilisateurs"
+    },
+    "backend": {
+      "title": "Back-end",
+      "description": "Infrastructures robustes et évolutives"
+    },
+    "discover-all": "Découvrir tous nos services"
+  },
+  "cta": {
+    "title": "Un projet digital adapté à votre marché local ?",
+    "description": "Contactez-nous pour discuter de votre projet. Notre expertise des marchés locaux nous permet de vous accompagner efficacement, où que vous soyez en France.",
+    "contact": "Nous contacter",
+    "learn-more": "En savoir plus sur notre approche"
   }
 }
diff --git a/apps/web/src/locales/fr/components/marketing/agency/contact-cta.json b/apps/web/src/locales/fr/components/marketing/agency/contact-cta.json
new file mode 100644
index 000000000..eab9a2fea
--- /dev/null
+++ b/apps/web/src/locales/fr/components/marketing/agency/contact-cta.json
@@ -0,0 +1,13 @@
+{
+  "title": "Un projet adapté au marché de {city} ?",
+  "description": "Notre expertise du marché local de {region} nous permet de vous proposer des solutions parfaitement adaptées à votre contexte régional. Discutons de votre projet !",
+  "features": {
+    "video": "Consultation en ligne via visioconférence",
+    "calendar": "Horaires flexibles adaptés à votre agenda",
+    "expertise": "Expertise approfondie du marché de {city} et de {region}"
+  },
+  "buttons": {
+    "discuss": "Discuter de votre projet",
+    "discover": "Découvrir nos services"
+  }
+}
diff --git a/apps/web/src/locales/fr/components/marketing/agency/france-map.json b/apps/web/src/locales/fr/components/marketing/agency/france-map.json
new file mode 100644
index 000000000..562ed5e64
--- /dev/null
+++ b/apps/web/src/locales/fr/components/marketing/agency/france-map.json
@@ -0,0 +1,3 @@
+{
+  "description": "Découvrez nos services adaptés à votre ville"
+}
diff --git a/apps/web/src/locales/fr/components/marketing/agency/local-expertise.json b/apps/web/src/locales/fr/components/marketing/agency/local-expertise.json
new file mode 100644
index 000000000..4b2cb09ee
--- /dev/null
+++ b/apps/web/src/locales/fr/components/marketing/agency/local-expertise.json
@@ -0,0 +1,6 @@
+{
+  "title": "Solutions web adaptées aux entreprises de {city}",
+  "approach": {
+    "title": "Notre approche pour les projets à {city}"
+  }
+}
diff --git a/apps/web/src/locales/fr/components/marketing/agency/local-testimonials.json b/apps/web/src/locales/fr/components/marketing/agency/local-testimonials.json
new file mode 100644
index 000000000..c9e6af70a
--- /dev/null
+++ b/apps/web/src/locales/fr/components/marketing/agency/local-testimonials.json
@@ -0,0 +1,4 @@
+{
+  "title": "Ce que nos clients à {city} disent de nous",
+  "description": "Découvrez les témoignages de nos clients à {city}, et comment nous les avons accompagnés dans leur transformation digitale."
+}
diff --git a/apps/web/src/locales/fr/constants/agencies/lyon.json b/apps/web/src/locales/fr/constants/agencies/lyon.json
new file mode 100644
index 000000000..5918e1cc3
--- /dev/null
+++ b/apps/web/src/locales/fr/constants/agencies/lyon.json
@@ -0,0 +1,83 @@
+{
+  "title": "Agence Web à Lyon | Solutions Digitales sur Mesure",
+  "description": "Développement web, mobile et design UI/UX à Lyon. Notre expertise digitale adaptée aux entreprises de Rhône-Alpes pour dynamiser votre présence en ligne.",
+  "hero-title": "Développement Web & Mobile à Lyon",
+  "hero-description": "Transformez votre entreprise lyonnaise avec des solutions digitales innovantes parfaitement adaptées au dynamisme économique de la région Auvergne-Rhône-Alpes.",
+  "intro-text": "Implantée au cœur du dynamisme lyonnais, notre expertise digitale accompagne les entreprises de la région dans leur transformation numérique. Entre tradition industrielle, excellence biomédicale et rayonnement gastronomique, Lyon présente un tissu économique riche et diversifié dont nous comprenons parfaitement les enjeux.",
+  "expertise-text": "Nous créons des solutions web, mobile et e-commerce adaptées aux spécificités du marché lyonnais et rhônalpin. Notre équipe maîtrise les défis numériques propres aux secteurs d'excellence de la région, des biotechnologies à la gastronomie, en passant par l'industrie manufacturière.",
+  "why-choose-us": "Notre connaissance du marché lyonnais nous permet de développer des solutions numériques parfaitement alignées avec les exigences et les particularités des entreprises locales. Nous comprenons les standards d'excellence de la région et proposons un accompagnement digital qui valorise l'identité et le savoir-faire lyonnais.",
+  "key-business-sectors": {
+    "biotech": "Biotechnologie",
+    "pharma": "Industrie pharmaceutique",
+    "gastronomy": "Gastronomie",
+    "finance": "Finance"
+  },
+  "local-challenges": {
+    "industry-digitalization": "Digitalisation des PME et ETI industrielles face aux enjeux de l'industrie 4.0",
+    "gastronomy-visibility": "Développement de la visibilité numérique pour les acteurs de la gastronomie lyonnaise",
+    "local-ecommerce": "Solutions e-commerce adaptées au commerce local et aux artisans de la région",
+    "biotech-applications": "Applications métier pour les secteurs pharmaceutique et biotech en pleine expansion"
+  },
+  "benefits": {
+    "sector-expertise": "Expertise sectorielle dans les domaines d'excellence lyonnais (biotech, pharma, gastronomie)",
+    "industrial-understanding": "Compréhension des enjeux de digitalisation du bassin industriel rhônalpin",
+    "sme-solutions": "Solutions adaptées aux PME et ETI en transformation numérique",
+    "lyon-ui-design": "Designs UI/UX reflétant l'identité visuelle et les standards de qualité lyonnais",
+    "local-ecosystem-knowledge": "Connaissance approfondie de l'écosystème numérique local"
+  },
+  "primary-stat": {
+    "label": "secteur d'innovation"
+  },
+  "strengths": {
+    "biotech-pharma": {
+      "title": "Solutions Biotech & Pharma",
+      "description": "Applications spécialisées pour le pôle santé lyonnais."
+    },
+    "gastronomy-ecommerce": {
+      "title": "E-commerce gastronomique",
+      "description": "Valorisation digitale des produits du terroir rhônalpin."
+    },
+    "industrial-applications": {
+      "title": "Applications industrielles",
+      "description": "Outils numériques pour l'industrie 4.0 et la production."
+    },
+    "business-interfaces": {
+      "title": "Interfaces métier",
+      "description": "Design UI/UX adaptés aux besoins spécifiques lyonnais."
+    }
+  },
+  "focused-services": {
+    "biotech-applications": {
+      "name": "Applications métier biotech",
+      "description": "Solutions digitales pour les laboratoires et entreprises pharmaceutiques lyonnaises."
+    },
+    "gastronomy-ecommerce": {
+      "name": "E-commerce gastronomique",
+      "description": "Plateformes de vente en ligne pour valoriser l'excellence culinaire lyonnaise."
+    },
+    "industrial-digitalization": {
+      "name": "Digitalisation industrielle",
+      "description": "Outils de pilotage et solutions IoT pour l'industrie rhônalpine."
+    }
+  },
+  "contact-info": {
+    "meeting-options": {
+      "video-conference": "Visioconférence",
+      "in-person": "Déplacements occasionnels à Lyon"
+    }
+  },
+  "stats": {
+    "biotech-projects": {
+      "label": "Projets biotech",
+      "description": "Applications spécialisées"
+    },
+    "satisfaction": {
+      "label": "Satisfaction",
+      "description": "Clients satisfaits"
+    },
+    "sme-supported": {
+      "label": "PME accompagnées",
+      "description": "Entreprises lyonnaises"
+    }
+  }
+}
diff --git a/apps/web/src/locales/fr/constants/agencies/marseille.json b/apps/web/src/locales/fr/constants/agencies/marseille.json
new file mode 100644
index 000000000..480add356
--- /dev/null
+++ b/apps/web/src/locales/fr/constants/agencies/marseille.json
@@ -0,0 +1,83 @@
+{
+  "title": "Développement Web à Marseille | Solutions Digitales pour Entreprises Provençales",
+  "description": "Créez votre site web ou application mobile à Marseille. Solutions digitales sur mesure pour les entreprises provençales, adaptées aux enjeux locaux de votre secteur.",
+  "hero-title": "Développement Web & Mobile à Marseille",
+  "hero-description": "Nous aidons les entreprises de Marseille et de la région PACA à se digitaliser avec des solutions web sur mesure, parfaitement adaptées aux enjeux spécifiques du marché méditerranéen.",
+  "intro-text": "Entre mer et collines, Marseille est un carrefour économique dynamique où tradition et innovation se rencontrent. Notre expertise digitale permet aux entreprises marseillaises de se démarquer dans un marché méditerranéen compétitif et en constante évolution.",
+  "expertise-text": "Notre équipe conçoit des sites web, applications et solutions e-commerce parfaitement adaptés aux entreprises marseillaises. Nous comprenons les défis de votre marché local et vous proposons des solutions digitales qui valorisent votre identité provençale tout en touchant une clientèle internationale.",
+  "why-choose-us": "Notre connaissance approfondie du marché provençal nous permet de développer des solutions numériques parfaitement adaptées aux défis spécifiques des entreprises locales. Nous comprenons la richesse culturelle et économique de Marseille et l'intégrons dans chaque projet pour créer des expériences digitales authentiques et performantes.",
+  "key-business-sectors": {
+    "tourism": "Tourisme",
+    "maritime": "Maritime",
+    "local-commerce": "Commerce local",
+    "restaurant": "Restauration"
+  },
+  "local-challenges": {
+    "tourism-competition": "Forte concurrence dans le secteur touristique méditerranéen nécessitant une présence digitale distinctive",
+    "maritime-solutions": "Besoin de solutions numériques adaptées au commerce maritime et portuaire",
+    "local-commerce-digitalization": "Digitalisation des commerces locaux face aux grandes chaînes",
+    "local-ecommerce": "Nécessité de solutions e-commerce adaptées pour valoriser l'artisanat et les produits locaux"
+  },
+  "benefits": {
+    "custom-solutions": "Solutions sur mesure adaptées aux spécificités des entreprises provençales",
+    "tourism-maritime-expertise": "Expertise pointue dans les secteurs du tourisme et maritime",
+    "international-ui": "Interface utilisateur optimisée pour une clientèle internationale",
+    "mediterranean-knowledge": "Connaissance approfondie des enjeux économiques méditerranéens",
+    "personalized-support": "Accompagnement personnalisé tout au long de votre projet digital"
+  },
+  "primary-stat": {
+    "label": "secteur touristique"
+  },
+  "strengths": {
+    "tourism-experience": {
+      "title": "Expérience touristique",
+      "description": "Sites et applications optimisés pour le secteur touristique méditerranéen."
+    },
+    "local-ecommerce": {
+      "title": "E-commerce local",
+      "description": "Solutions de vente en ligne pour artisans et commerçants provençaux."
+    },
+    "maritime-sector": {
+      "title": "Secteur maritime",
+      "description": "Digitalisation adaptée aux activités portuaires et nautiques."
+    },
+    "mediterranean-design": {
+      "title": "Design méditerranéen",
+      "description": "Interfaces modernes reflétant l'identité visuelle méditerranéenne."
+    }
+  },
+  "focused-services": {
+    "tourism-websites": {
+      "name": "Sites web touristiques",
+      "description": "Vitrines digitales multilingues pour hôtels, restaurants et activités touristiques."
+    },
+    "provencal-ecommerce": {
+      "name": "E-commerce provençal",
+      "description": "Boutiques en ligne adaptées aux producteurs et artisans locaux."
+    },
+    "mobile-applications": {
+      "name": "Applications mobiles",
+      "description": "Solutions mobiles pour enrichir l'expérience touristique et commerciale."
+    }
+  },
+  "contact-info": {
+    "meeting-options": {
+      "video-conference": "Visioconférence",
+      "in-person": "Déplacements occasionnels à Marseille"
+    }
+  },
+  "stats": {
+    "expertise": {
+      "label": "Expertise",
+      "description": "Années d'expérience"
+    },
+    "satisfaction": {
+      "label": "Satisfaction",
+      "description": "Clients satisfaits"
+    },
+    "average-time": {
+      "label": "Délai moyen",
+      "description": "Semaines de réalisation"
+    }
+  }
+}
diff --git a/apps/web/src/locales/fr/constants/agencies/montpellier.json b/apps/web/src/locales/fr/constants/agencies/montpellier.json
new file mode 100644
index 000000000..4947393ee
--- /dev/null
+++ b/apps/web/src/locales/fr/constants/agencies/montpellier.json
@@ -0,0 +1,83 @@
+{
+  "title": "Développement Web à Montpellier | Solutions Digitales pour Entreprises Languedociennes",
+  "description": "Créez votre site web ou application mobile à Montpellier. Solutions digitales sur mesure pour les entreprises montpelliéraines, adaptées aux enjeux locaux de votre secteur.",
+  "hero-title": "Développement Web & Mobile à Montpellier",
+  "hero-description": "Nous aidons les entreprises de Montpellier et du Languedoc à se digitaliser avec des solutions web sur mesure, parfaitement adaptées aux enjeux spécifiques du marché régional.",
+  "intro-text": "Ville dynamique à la croisée des influences méditerranéennes et languedociennes, Montpellier se distingue par son écosystème d'innovation en santé, ses universités prestigieuses et son art de vivre. Notre expertise digitale permet aux entreprises montpelliéraines de tirer parti de cette richesse et de se démarquer dans un environnement compétitif.",
+  "expertise-text": "Notre équipe conçoit des sites web, applications et solutions digitales parfaitement adaptés aux entreprises de Montpellier et sa région. Nous comprenons les défis spécifiques de votre marché local, qu'il s'agisse du secteur de la santé, de l'éducation ou du terroir languedocien, et vous proposons des solutions numériques qui valorisent votre expertise et votre ancrage régional.",
+  "why-choose-us": "Notre connaissance approfondie du marché montpelliérain nous permet de développer des solutions numériques parfaitement adaptées aux défis spécifiques des entreprises locales. Nous comprenons l'équilibre entre innovation et tradition qui caractérise Montpellier, et intégrons cette compréhension dans chaque projet pour créer des expériences digitales authentiques et performantes.",
+  "key-business-sectors": {
+    "health-biotech": "Santé & Biotechnologies",
+    "higher-education": "Enseignement supérieur",
+    "viticulture": "Viticulture",
+    "tourism": "Tourisme"
+  },
+  "local-challenges": {
+    "biotech-health-digitalization": "Digitalisation du secteur des biotechnologies et de la santé en pleine expansion",
+    "innovative-educational-platforms": "Besoin de plateformes éducatives innovantes pour les nombreuses universités et écoles",
+    "wine-heritage-digital-showcase": "Valorisation numérique du patrimoine viticole et des produits du terroir",
+    "tourism-adaptation": "Adaptation des acteurs du tourisme face à la concurrence méditerranéenne"
+  },
+  "benefits": {
+    "health-sector-solutions": "Solutions sur mesure adaptées aux entreprises innovantes du secteur santé",
+    "educational-platforms-expertise": "Expertise pointue dans les plateformes éducatives et les outils e-learning",
+    "languedoc-market-knowledge": "Connaissance approfondie du marché languedocien et de ses spécificités",
+    "regional-products-ui": "Interfaces utilisateur optimisées pour valoriser les produits régionaux",
+    "personalized-support": "Accompagnement personnalisé tout au long de votre projet digital"
+  },
+  "primary-stat": {
+    "label": "biotechnologies"
+  },
+  "strengths": {
+    "connected-health": {
+      "title": "Santé connectée",
+      "description": "Solutions digitales pour startups et entreprises des sciences de la vie."
+    },
+    "elearning": {
+      "title": "E-learning",
+      "description": "Plateformes pédagogiques pour universités et établissements de formation."
+    },
+    "digital-terroir": {
+      "title": "Terroir digital",
+      "description": "Sites et e-commerce pour domaines viticoles et producteurs locaux."
+    },
+    "regional-tourism": {
+      "title": "Tourisme régional",
+      "description": "Expériences numériques pour valoriser le patrimoine languedocien."
+    }
+  },
+  "focused-services": {
+    "health-applications": {
+      "name": "Applications santé",
+      "description": "Solutions sur mesure pour startups et entreprises du secteur des sciences de la vie."
+    },
+    "educational-platforms": {
+      "name": "Plateformes éducatives",
+      "description": "Outils d'apprentissage digitaux pour établissements d'enseignement."
+    },
+    "terroir-ecommerce": {
+      "name": "E-commerce terroir",
+      "description": "Boutiques en ligne pour producteurs locaux et domaines viticoles."
+    }
+  },
+  "contact-info": {
+    "meeting-options": {
+      "video-conference": "Visioconférence",
+      "in-person": "Déplacements occasionnels à Montpellier"
+    }
+  },
+  "stats": {
+    "expertise": {
+      "label": "Expertise",
+      "description": "Années d'expérience"
+    },
+    "satisfaction": {
+      "label": "Satisfaction",
+      "description": "Clients satisfaits"
+    },
+    "average-time": {
+      "label": "Délai moyen",
+      "description": "Semaines de réalisation"
+    }
+  }
+}
diff --git a/apps/web/src/locales/fr/constants/agencies/nantes.json b/apps/web/src/locales/fr/constants/agencies/nantes.json
new file mode 100644
index 000000000..192aae10b
--- /dev/null
+++ b/apps/web/src/locales/fr/constants/agencies/nantes.json
@@ -0,0 +1,83 @@
+{
+  "title": "Développement Web à Nantes | Solutions Digitales pour Entreprises Ligériennes",
+  "description": "Créez votre site web ou application mobile à Nantes. Solutions digitales sur mesure pour les entreprises nantaises, adaptées aux enjeux locaux de votre secteur.",
+  "hero-title": "Développement Web & Mobile à Nantes",
+  "hero-description": "Nous aidons les entreprises de Nantes et des Pays de la Loire à se digitaliser avec des solutions web sur mesure, parfaitement adaptées aux enjeux spécifiques du marché ligérien.",
+  "intro-text": "Capitale historique de la Bretagne et métropole innovante, Nantes est reconnue pour son dynamisme économique et sa qualité de vie. Son écosystème numérique florissant, ses industries créatives et son engagement dans la transition écologique en font un territoire unique où l'innovation digitale joue un rôle central.",
+  "expertise-text": "Notre équipe conçoit des sites web, applications et solutions digitales parfaitement adaptés aux entreprises nantaises, qu'elles soient des startups innovantes, des acteurs de l'économie responsable ou des entreprises traditionnelles en transformation. Nous comprenons les spécificités du marché local et vous proposons des solutions numériques alignées avec les valeurs d'innovation et de durabilité propres à Nantes.",
+  "why-choose-us": "Notre connaissance approfondie du marché nantais nous permet de développer des solutions numériques parfaitement adaptées aux défis spécifiques des entreprises locales. Nous comprenons l'esprit d'innovation et l'engagement pour une économie plus responsable qui caractérisent Nantes, et intégrons ces valeurs dans chaque projet digital que nous réalisons.",
+  "key-business-sectors": {
+    "tech-digital": "Tech & Numérique",
+    "ecological-transition": "Transition écologique",
+    "creative-industries": "Industries créatives",
+    "agrifood": "Agroalimentaire"
+  },
+  "local-challenges": {
+    "digital-ecosystem-competition": "Forte concurrence dans l'écosystème numérique nantais en pleine expansion",
+    "startup-scaleup-needs": "Besoins spécifiques des startups et scale-ups de la French Tech locale",
+    "ecological-transition-digitalization": "Digitalisation des acteurs de la transition écologique et énergétique",
+    "traditional-industries-transformation": "Transformation numérique des industries traditionnelles et agroalimentaires régionales"
+  },
+  "benefits": {
+    "nantes-ecosystem-solutions": "Solutions sur mesure adaptées à l'écosystème numérique nantais",
+    "innovative-eco-technologies": "Expertise pointue dans les technologies web innovantes et éco-responsables",
+    "agile-approach": "Approche agile parfaitement adaptée aux startups et entreprises innovantes",
+    "digital-transition-knowledge": "Connaissance approfondie des enjeux de la transition numérique ligérienne",
+    "personalized-support": "Accompagnement personnalisé tout au long de votre projet digital"
+  },
+  "primary-stat": {
+    "label": "numérique nantais"
+  },
+  "strengths": {
+    "innovative-tech": {
+      "title": "Tech innovante",
+      "description": "Solutions digitales modernes pour startups et scale-ups nantaises."
+    },
+    "eco-design": {
+      "title": "Éco-conception",
+      "description": "Sites et applications à l'empreinte environnementale maîtrisée."
+    },
+    "maritime-industry": {
+      "title": "Industrie maritime",
+      "description": "Digitalisation adaptée aux activités portuaires et fluviales."
+    },
+    "renewable-energy": {
+      "title": "Énergies renouvelables",
+      "description": "Solutions numériques pour les acteurs de la transition énergétique."
+    }
+  },
+  "focused-services": {
+    "web-applications": {
+      "name": "Web applications",
+      "description": "Applications web performantes et évolutives pour startups et entreprises innovantes."
+    },
+    "eco-designed-websites": {
+      "name": "Sites éco-conçus",
+      "description": "Sites web optimisés et durables pour les acteurs de l'économie responsable."
+    },
+    "business-platforms": {
+      "name": "Plateformes métier",
+      "description": "Solutions sur mesure pour industries traditionnelles en transformation."
+    }
+  },
+  "contact-info": {
+    "meeting-options": {
+      "video-conference": "Visioconférence",
+      "in-person": "Déplacements occasionnels à Nantes"
+    }
+  },
+  "stats": {
+    "expertise": {
+      "label": "Expertise",
+      "description": "Années d'expérience"
+    },
+    "satisfaction": {
+      "label": "Satisfaction",
+      "description": "Clients satisfaits"
+    },
+    "average-time": {
+      "label": "Délai moyen",
+      "description": "Semaines de réalisation"
+    }
+  }
+}
diff --git a/apps/web/src/locales/fr/constants/agencies/nice.json b/apps/web/src/locales/fr/constants/agencies/nice.json
new file mode 100644
index 000000000..9130a4c4e
--- /dev/null
+++ b/apps/web/src/locales/fr/constants/agencies/nice.json
@@ -0,0 +1,83 @@
+{
+  "title": "Développement Web à Nice | Solutions Digitales pour Entreprises Azuréennes",
+  "description": "Créez votre site web ou application mobile à Nice. Solutions digitales sur mesure pour les entreprises de la Côte d'Azur, adaptées aux enjeux locaux de votre secteur.",
+  "hero-title": "Développement Web & Mobile à Nice",
+  "hero-description": "Nous aidons les entreprises de Nice et de la Côte d'Azur à se digitaliser avec des solutions web sur mesure, parfaitement adaptées aux enjeux spécifiques du marché azuréen.",
+  "intro-text": "Entre mer Méditerranée et Alpes, Nice bénéficie d'un rayonnement international et d'une économie diversifiée où le tourisme côtoie l'innovation. Notre expertise digitale permet aux entreprises niçoises de se démarquer dans un environnement compétitif où l'image et l'excellence sont primordiales.",
+  "expertise-text": "Notre équipe conçoit des sites web, applications et solutions e-commerce parfaitement adaptés aux entreprises de Nice et de la Côte d'Azur. Nous comprenons les exigences élevées de votre marché local et vous proposons des solutions digitales qui valorisent le positionnement premium propre à la région.",
+  "why-choose-us": "Notre connaissance approfondie du marché azuréen nous permet de développer des solutions numériques parfaitement adaptées aux défis spécifiques des entreprises locales. Nous comprenons la dimension internationale de Nice et sa réputation d'excellence, et intégrons ces aspects dans chaque projet pour créer des expériences digitales raffinées et performantes.",
+  "key-business-sectors": {
+    "luxury-tourism": "Tourisme de luxe",
+    "real-estate": "Immobilier",
+    "events": "Événementiel",
+    "health-wellness": "Santé & Bien-être"
+  },
+  "local-challenges": {
+    "luxury-tourism-digitalization": "Digitalisation du secteur du tourisme haut de gamme sur la Côte d'Azur",
+    "innovative-real-estate-solutions": "Besoin de solutions immobilières innovantes pour un marché international exigeant",
+    "events-digital-showcase": "Mise en valeur digitale de l'événementiel (festivals, congrès, expositions)",
+    "health-wellness-transformation": "Transformation numérique du secteur santé et bien-être dans une région reconnue pour sa qualité de vie"
+  },
+  "benefits": {
+    "international-clientele-solutions": "Solutions sur mesure adaptées à une clientèle internationale exigeante",
+    "premium-interfaces-expertise": "Expertise pointue dans les interfaces haut de gamme et l'expérience utilisateur premium",
+    "azurean-market-knowledge": "Connaissance approfondie du marché azuréen et de ses spécificités",
+    "multilingual-applications": "Applications multilingues adaptées à la clientèle internationale de la Côte d'Azur",
+    "personalized-support": "Accompagnement personnalisé tout au long de votre projet digital"
+  },
+  "primary-stat": {
+    "label": "tourisme de luxe"
+  },
+  "strengths": {
+    "premium-experience": {
+      "title": "Expérience premium",
+      "description": "Sites et applications haut de gamme pour le tourisme de luxe et l'hôtellerie."
+    },
+    "digital-real-estate": {
+      "title": "Immobilier digital",
+      "description": "Solutions innovantes pour les agences immobilières et promoteurs."
+    },
+    "event-platforms": {
+      "title": "Plateformes événementielles",
+      "description": "Sites et applications pour festivals, congrès et événements prestigieux."
+    },
+    "connected-wellness": {
+      "title": "Bien-être connecté",
+      "description": "Solutions digitales pour cliniques, spas et centres de bien-être."
+    }
+  },
+  "focused-services": {
+    "premium-websites": {
+      "name": "Sites web premium",
+      "description": "Vitrines digitales haut de gamme pour hôtels, restaurants et boutiques de luxe."
+    },
+    "real-estate-applications": {
+      "name": "Applications immobilières",
+      "description": "Solutions sur mesure pour la présentation et la gestion de biens d'exception."
+    },
+    "visual-identity": {
+      "name": "Identité visuelle",
+      "description": "Design UI/UX élégant et soigné pour marques et établissements prestigieux."
+    }
+  },
+  "contact-info": {
+    "meeting-options": {
+      "video-conference": "Visioconférence",
+      "in-person": "Déplacements occasionnels à Nice"
+    }
+  },
+  "stats": {
+    "expertise": {
+      "label": "Expertise",
+      "description": "Années d'expérience"
+    },
+    "satisfaction": {
+      "label": "Satisfaction",
+      "description": "Clients satisfaits"
+    },
+    "average-time": {
+      "label": "Délai moyen",
+      "description": "Semaines de réalisation"
+    }
+  }
+}
diff --git a/apps/web/src/locales/fr/constants/agencies/paris.json b/apps/web/src/locales/fr/constants/agencies/paris.json
new file mode 100644
index 000000000..b15f645be
--- /dev/null
+++ b/apps/web/src/locales/fr/constants/agencies/paris.json
@@ -0,0 +1,84 @@
+{
+  "title": "Agence Web à Paris | Développement Web, Mobile & Design UI/UX",
+  "description": "Votre partenaire digital au cœur de Paris. Solutions de développement web, mobile et design UI/UX pour accélérer la croissance de votre entreprise parisienne.",
+  "hero-title": "Développement Digital dans la Capitale",
+  "hero-description": "Transformez votre présence numérique avec des solutions innovantes adaptées au marché parisien compétitif et son écosystème dynamique de startups, grands groupes et entreprises innovantes.",
+  "intro-text": "Au cœur de la capitale française, notre expertise digitale répond aux exigences du marché parisien avec des solutions web et mobile innovantes. Entre grands groupes, entreprises du luxe et startups en pleine croissance, Paris concentre un écosystème numérique dynamique dont nous comprenons parfaitement les enjeux et les opportunités.",
+  "expertise-text": "Nous concevons des expériences digitales premium qui répondent aux standards élevés des entreprises parisiennes. Notre équipe maîtrise les défis spécifiques de la capitale, qu'il s'agisse de créer des interfaces utilisateur raffinées pour le secteur du luxe, des applications performantes pour les fintechs, ou des solutions évolutives pour les startups en hypercroissance.",
+  "why-choose-us": "Notre connaissance approfondie du marché parisien nous permet de développer des solutions digitales parfaitement alignées avec les exigences des entreprises de la capitale. Nous combinons innovation technique, excellence créative et compréhension business pour vous accompagner efficacement dans un environnement hautement compétitif.",
+  "key-business-sectors": {
+    "startups-tech": "Startups Tech",
+    "finance": "Finance",
+    "luxury": "Luxe",
+    "media-communication": "Médias & Communication"
+  },
+  "local-challenges": {
+    "digital-competition": "Forte concurrence digitale sur le marché parisien nécessitant des solutions différenciantes",
+    "agile-tools-startups": "Besoins d'outils agiles et performants pour les startups en hypercroissance",
+    "financial-digitalization": "Digitalisation des services financiers traditionnels face aux fintechs",
+    "luxury-digital-experiences": "Développement d'expériences digitales premium pour le secteur du luxe parisien",
+    "corporate-transformation": "Solutions innovantes pour les grands groupes en transformation numérique"
+  },
+  "benefits": {
+    "startup-expertise": "Expertise pointue des dernières technologies adaptées à l'écosystème startup parisien",
+    "premium-solutions": "Solutions premium répondant aux exigences élevées du marché de la capitale",
+    "luxury-finance-understanding": "Compréhension des codes du luxe et de la finance pour des expériences numériques sur mesure",
+    "agility-responsiveness": "Agilité et réactivité pour accompagner le rythme intensif des entreprises parisiennes",
+    "tech-trends-knowledge": "Connaissance approfondie des tendances et innovations de la tech française"
+  },
+  "primary-stat": {
+    "label": "startup & tech"
+  },
+  "strengths": {
+    "startup-solutions": {
+      "title": "Solutions Startup",
+      "description": "Applications évolutives pour entreprises en forte croissance."
+    },
+    "luxury-experiences": {
+      "title": "Expériences Luxe",
+      "description": "Interfaces premium pour marques et services haut de gamme."
+    },
+    "finance-fintech": {
+      "title": "Finance & Fintech",
+      "description": "Solutions sécurisées pour le secteur financier parisien."
+    },
+    "international": {
+      "title": "International",
+      "description": "Développement multilingue adapté aux entreprises globales."
+    }
+  },
+  "focused-services": {
+    "saas-applications": {
+      "name": "Applications SaaS",
+      "description": "Développement de solutions cloud innovantes pour startups et scale-ups."
+    },
+    "premium-ecommerce": {
+      "name": "E-commerce premium",
+      "description": "Plateformes de vente haut de gamme pour les marques de luxe parisiennes."
+    },
+    "innovative-design": {
+      "name": "Design UI/UX innovant",
+      "description": "Interfaces utilisateur modernes et différenciantes pour se démarquer à Paris."
+    }
+  },
+  "contact-info": {
+    "meeting-options": {
+      "video-conference": "Visioconférence",
+      "in-person": "Rencontres à Paris"
+    }
+  },
+  "stats": {
+    "startups": {
+      "label": "Startups",
+      "description": "Projets pour startups"
+    },
+    "luxury-clients": {
+      "label": "Clients luxe",
+      "description": "Marques premium"
+    },
+    "average-roi": {
+      "label": "ROI moyen",
+      "description": "Retour sur investissement"
+    }
+  }
+}
diff --git a/apps/web/src/locales/fr/constants/agencies/rouen.json b/apps/web/src/locales/fr/constants/agencies/rouen.json
new file mode 100644
index 000000000..b4ac1fcbd
--- /dev/null
+++ b/apps/web/src/locales/fr/constants/agencies/rouen.json
@@ -0,0 +1,83 @@
+{
+  "title": "Développement Web à Rouen | Solutions Digitales pour Entreprises Normandes",
+  "description": "Créez votre site web ou application mobile à Rouen. Solutions digitales sur mesure pour les entreprises normandes, adaptées aux enjeux locaux de votre secteur.",
+  "hero-title": "Développement Web & Mobile à Rouen",
+  "hero-description": "Nous aidons les entreprises de Rouen et de Normandie à se digitaliser avec des solutions web sur mesure, parfaitement adaptées aux enjeux spécifiques du marché normand.",
+  "intro-text": "Le tissu économique normand présente des enjeux numériques spécifiques que nous avons appris à maîtriser. Entre l'industrie manufacturière, le secteur agroalimentaire et la logistique fluviale, nous créons des solutions digitales qui répondent aux besoins précis des entreprises rouennaises.",
+  "expertise-text": "Notre équipe conçoit des sites web, applications et solutions e-commerce parfaitement adaptés aux entreprises de Rouen et sa région. Nous comprenons les défis de votre marché et vous proposons des solutions digitales qui vous aident à vous démarquer et à développer votre activité.",
+  "why-choose-us": "Notre connaissance approfondie du marché normand nous permet de développer des solutions numériques parfaitement adaptées aux défis spécifiques des entreprises locales. Contrairement aux agences parisiennes, nous comprenons les subtilités du tissu économique de Rouen et apportons des solutions sur mesure à un rapport qualité-prix avantageux.",
+  "key-business-sectors": {
+    "industry": "Industrie",
+    "agrifood": "Agroalimentaire",
+    "logistics": "Logistique",
+    "local-commerce": "Commerce local"
+  },
+  "local-challenges": {
+    "traditional-industries-digitalization": "Digitalisation des industries traditionnelles normandes face à la concurrence internationale",
+    "logistics-optimization": "Optimisation de la logistique fluviale et portuaire via des solutions numériques innovantes",
+    "local-ecommerce-needs": "Besoin de solutions e-commerce adaptées aux producteurs et artisans locaux",
+    "sme-digital-transition": "Transition numérique des PME normandes avec des budgets maîtrisés"
+  },
+  "benefits": {
+    "normandy-specific-solutions": "Solutions sur mesure adaptées aux spécificités des entreprises normandes",
+    "industrial-agrifood-expertise": "Expertise pointue dans les secteurs industriels et agroalimentaires régionaux",
+    "competitive-pricing": "Tarifs compétitifs par rapport aux agences parisiennes",
+    "seine-logistics-knowledge": "Connaissance approfondie des enjeux logistiques liés à l'axe Seine",
+    "personalized-support": "Accompagnement personnalisé tout au long de votre projet digital"
+  },
+  "primary-stat": {
+    "label": "secteur industriel"
+  },
+  "strengths": {
+    "industrial-websites": {
+      "title": "Sites web industriels",
+      "description": "Sites performants adaptés aux entreprises manufacturières normandes."
+    },
+    "local-ecommerce": {
+      "title": "E-commerce local",
+      "description": "Solutions de vente en ligne pour producteurs et artisans locaux."
+    },
+    "business-applications": {
+      "title": "Applications métier",
+      "description": "Outils numériques sur mesure pour optimiser vos processus."
+    },
+    "sme-digitalization": {
+      "title": "Digitalisation PME",
+      "description": "Accompagnement complet pour votre transformation numérique."
+    }
+  },
+  "focused-services": {
+    "professional-websites": {
+      "name": "Sites web professionnels",
+      "description": "Vitrines digitales performantes et optimisées pour le SEO local à Rouen."
+    },
+    "regional-ecommerce": {
+      "name": "E-commerce régional",
+      "description": "Boutiques en ligne adaptées aux producteurs et commerces normands."
+    },
+    "business-applications": {
+      "name": "Applications métier",
+      "description": "Logiciels sur mesure pour l'industrie et la logistique régionale."
+    }
+  },
+  "contact-info": {
+    "meeting-options": {
+      "video-conference": "Visioconférence",
+      "in-person": "Déplacements occasionnels à Rouen"
+    }
+  },
+  "stats": {
+    "expertise": {
+      "label": "Expertise",
+      "description": "Années d'expérience"
+    },
+    "satisfaction": {
+      "label": "Satisfaction",
+      "description": "Clients satisfaits"
+    },
+    "average-time": {
+      "label": "Délai moyen",
+      "description": "Semaines de réalisation"
+    }
+  }
+}
diff --git a/apps/web/src/locales/fr/constants/agencies/strasbourg.json b/apps/web/src/locales/fr/constants/agencies/strasbourg.json
new file mode 100644
index 000000000..6ce9677fe
--- /dev/null
+++ b/apps/web/src/locales/fr/constants/agencies/strasbourg.json
@@ -0,0 +1,83 @@
+{
+  "title": "Développement Web à Strasbourg | Solutions Digitales pour Entreprises Alsaciennes",
+  "description": "Créez votre site web ou application mobile à Strasbourg. Solutions digitales sur mesure pour les entreprises alsaciennes, adaptées aux enjeux locaux et transfrontaliers.",
+  "hero-title": "Développement Web & Mobile à Strasbourg",
+  "hero-description": "Nous aidons les entreprises de Strasbourg et du Grand Est à se digitaliser avec des solutions web sur mesure, parfaitement adaptées aux enjeux spécifiques du marché alsacien et européen.",
+  "intro-text": "Capitale européenne et ville frontalière au riche patrimoine, Strasbourg conjugue traditions alsaciennes et ouverture internationale. Son statut de siège d'institutions européennes, son industrie dynamique et sa position stratégique entre France et Allemagne en font un territoire unique où le digital joue un rôle essentiel de passerelle.",
+  "expertise-text": "Notre équipe conçoit des sites web, applications et solutions digitales parfaitement adaptés aux entreprises strasbourgeoises, qu'elles soient des organisations internationales, des entreprises industrielles ou des acteurs du patrimoine local. Nous comprenons les défis spécifiques de votre marché régional et transfrontalier, et vous proposons des solutions numériques multilingues et culturellement adaptées.",
+  "why-choose-us": "Notre connaissance approfondie du marché strasbourgeois nous permet de développer des solutions numériques parfaitement adaptées aux défis spécifiques des entreprises locales. Nous comprenons les exigences du contexte européen et les particularités culturelles alsaciennes, et intégrons cette double dimension dans chaque projet pour créer des expériences digitales pertinentes et performantes.",
+  "key-business-sectors": {
+    "european-institutions": "Institutions européennes",
+    "cross-border-commerce": "Commerce transfrontalier",
+    "industry": "Industrie",
+    "culture-heritage": "Culture & Patrimoine"
+  },
+  "local-challenges": {
+    "european-institutions-needs": "Besoins spécifiques des institutions européennes et organisations internationales",
+    "cross-border-development": "Développement du commerce transfrontalier avec l'Allemagne et la Suisse",
+    "traditional-industries-transformation": "Transformation digitale des industries traditionnelles alsaciennes",
+    "heritage-digital-showcase": "Valorisation numérique du riche patrimoine culturel et historique de la région"
+  },
+  "benefits": {
+    "multilingual-solutions": "Solutions multilingues adaptées au contexte international strasbourgeois",
+    "european-standards-expertise": "Expertise pointue dans les interfaces utilisateur conformes aux normes européennes",
+    "cross-border-knowledge": "Connaissance approfondie des marchés transfrontaliers et de leurs spécificités",
+    "innovative-traditional-approach": "Approche à la fois innovante et respectueuse des traditions alsaciennes",
+    "personalized-support": "Accompagnement personnalisé tout au long de votre projet digital"
+  },
+  "primary-stat": {
+    "label": "contexte international"
+  },
+  "strengths": {
+    "european-solutions": {
+      "title": "Solutions européennes",
+      "description": "Plateformes multilingues pour institutions et organisations internationales."
+    },
+    "cross-border-commerce": {
+      "title": "Commerce transfrontalier",
+      "description": "Solutions e-commerce adaptées aux marchés français, allemand et suisse."
+    },
+    "industry-40": {
+      "title": "Industrie 4.0",
+      "description": "Digitalisation des processus pour l'industrie alsacienne traditionnelle."
+    },
+    "digital-heritage": {
+      "title": "Patrimoine numérique",
+      "description": "Expériences digitales pour valoriser le patrimoine culturel et historique."
+    }
+  },
+  "focused-services": {
+    "institutional-websites": {
+      "name": "Sites institutionnels",
+      "description": "Plateformes multilingues conformes aux normes européennes d'accessibilité."
+    },
+    "cross-border-ecommerce": {
+      "name": "E-commerce transfrontalier",
+      "description": "Solutions commerciales adaptées aux spécificités des marchés allemand et français."
+    },
+    "industrial-applications": {
+      "name": "Applications industrielles",
+      "description": "Outils numériques sur mesure pour moderniser les process industriels."
+    }
+  },
+  "contact-info": {
+    "meeting-options": {
+      "video-conference": "Visioconférence",
+      "in-person": "Déplacements occasionnels à Strasbourg"
+    }
+  },
+  "stats": {
+    "expertise": {
+      "label": "Expertise",
+      "description": "Années d'expérience"
+    },
+    "satisfaction": {
+      "label": "Satisfaction",
+      "description": "Clients satisfaits"
+    },
+    "average-time": {
+      "label": "Délai moyen",
+      "description": "Semaines de réalisation"
+    }
+  }
+}
diff --git a/apps/web/src/locales/fr/constants/agencies/toulouse.json b/apps/web/src/locales/fr/constants/agencies/toulouse.json
new file mode 100644
index 000000000..747faf70f
--- /dev/null
+++ b/apps/web/src/locales/fr/constants/agencies/toulouse.json
@@ -0,0 +1,83 @@
+{
+  "title": "Développement Web à Toulouse | Solutions Digitales pour Entreprises Occitanes",
+  "description": "Créez votre site web ou application mobile à Toulouse. Solutions digitales sur mesure pour les entreprises toulousaines, adaptées aux enjeux locaux de votre secteur.",
+  "hero-title": "Développement Web & Mobile à Toulouse",
+  "hero-description": "Nous aidons les entreprises de Toulouse et de l'Occitanie à se digitaliser avec des solutions web sur mesure, parfaitement adaptées aux enjeux spécifiques du marché toulousain.",
+  "intro-text": "Capitale européenne de l'aéronautique et ville étudiante dynamique, Toulouse présente un écosystème économique unique où innovation et tradition se côtoient. Notre expertise digitale permet aux entreprises toulousaines de se démarquer dans un environnement compétitif en constante évolution technologique.",
+  "expertise-text": "Notre équipe conçoit des sites web, applications et solutions digitales parfaitement adaptés aux entreprises toulousaines, qu'elles soient des géants de l'aéronautique, des startups innovantes ou des commerces traditionnels. Nous comprenons les défis spécifiques de votre marché local et vous proposons des solutions technologiques de pointe.",
+  "why-choose-us": "Notre connaissance approfondie du marché toulousain nous permet de développer des solutions numériques parfaitement adaptées aux défis spécifiques des entreprises locales. Nous comprenons les enjeux technologiques de la Ville Rose et intégrons cette expertise dans chaque projet pour créer des expériences digitales performantes et tournées vers le futur.",
+  "key-business-sectors": {
+    "aeronautics": "Aéronautique",
+    "space": "Spatial",
+    "tech": "Tech",
+    "education": "Éducation"
+  },
+  "local-challenges": {
+    "aerospace-transformation": "Transformation digitale des entreprises de l'écosystème aéronautique et spatial",
+    "startup-platforms": "Besoin de plateformes innovantes pour les startups de la French Tech toulousaine",
+    "elearning-development": "Développement de solutions e-learning pour les nombreux établissements d'enseignement",
+    "local-commerce-adaptation": "Adaptation des commerces locaux face à la concurrence des grandes enseignes nationales"
+  },
+  "benefits": {
+    "high-tech-solutions": "Solutions sur mesure adaptées aux industries de haute technologie",
+    "complex-interfaces-expertise": "Expertise pointue dans le développement d'interfaces complexes",
+    "startup-ecosystem-knowledge": "Connaissance approfondie de l'écosystème startup toulousain",
+    "agile-approach": "Approche agile parfaitement adaptée aux projets innovants",
+    "personalized-support": "Accompagnement personnalisé tout au long de votre projet digital"
+  },
+  "primary-stat": {
+    "label": "secteur technologique"
+  },
+  "strengths": {
+    "aeronautics-solutions": {
+      "title": "Solutions aéronautiques",
+      "description": "Applications et interfaces adaptées aux besoins spécifiques du secteur aérospatial."
+    },
+    "startup-platforms": {
+      "title": "Plateformes startups",
+      "description": "Solutions digitales agiles et évolutives pour les startups innovantes."
+    },
+    "elearning": {
+      "title": "E-learning",
+      "description": "Plateformes pédagogiques pour les établissements d'enseignement supérieur."
+    },
+    "local-commerce": {
+      "title": "Commerce local",
+      "description": "Digitalisation sur mesure pour les commerces et artisans toulousains."
+    }
+  },
+  "focused-services": {
+    "business-applications": {
+      "name": "Applications métier",
+      "description": "Solutions sur mesure pour l'industrie aéronautique et les entreprises technologiques."
+    },
+    "innovative-websites": {
+      "name": "Sites web innovants",
+      "description": "Vitrines digitales modernes pour startups et entreprises innovantes."
+    },
+    "ecommerce-platforms": {
+      "name": "Plateformes e-commerce",
+      "description": "Solutions complètes pour les commerces locaux souhaitant se digitaliser."
+    }
+  },
+  "contact-info": {
+    "meeting-options": {
+      "video-conference": "Visioconférence",
+      "in-person": "Déplacements occasionnels à Toulouse"
+    }
+  },
+  "stats": {
+    "expertise": {
+      "label": "Expertise",
+      "description": "Années d'expérience"
+    },
+    "satisfaction": {
+      "label": "Satisfaction",
+      "description": "Clients satisfaits"
+    },
+    "average-time": {
+      "label": "Délai moyen",
+      "description": "Semaines de réalisation"
+    }
+  }
+}
diff --git a/apps/web/src/types/agency.ts b/apps/web/src/types/agency.ts
index 91bf620ed..58dbef59c 100644
--- a/apps/web/src/types/agency.ts
+++ b/apps/web/src/types/agency.ts
@@ -1,60 +1,47 @@
-
 import { LucideIcon } from "lucide-react";
 
 export interface AgencyTestimonial {
-  name: string;
-  role: string;
-  company: string;
-  text: string;
-  imageUrl?: string;
+  key: string;
+  author: {
+    name: string;
+    role: string;
+    company: string;
+    imageUrl?: string;
+  };
 }
 
 export interface AgencyStrength {
-  title: string;
-  description: string;
+  key: string;
   icon?: LucideIcon;
 }
 
 export interface AgencyService {
-  name: string;
-  description: string;
+  key: string;
   link: string;
   icon?: LucideIcon;
 }
 
 export interface AgencyStat {
-  label: string;
+  key: string;
   value: string;
-  description: string;
 }
 
 export interface Agency {
-  
-  id: string;            
-  name: string;          
-  region: string;        
-
-  title: string;         
-  description: string;   
-
-  heroTitle?: string;    
-  heroDescription?: string; 
-  introText: string;     
-  expertiseText: string; 
-  whyChooseUs: string;   
+  id: string;
+  name: string;
+  region: string;
 
-  keyBusinessSectors: string[]; 
-  localChallenges: string[];    
-  benefits: string[];           
+  keyBusinessSectors: string[];
+  localChallenges: string[];
+  benefits: string[];
 
-  strengths: AgencyStrength[];  
-  focusedServices: AgencyService[]; 
-  testimonials: AgencyTestimonial[]; 
+  strengths: AgencyStrength[];
+  focusedServices: AgencyService[];
+  testimonials: AgencyTestimonial[];
 
   contactInfo: {
-    email: string;       
-    phone: string;       
-    meetingOptions?: string[]; 
+    email: string;
+    phone: string;
   };
 
   stats: AgencyStat[];
@@ -64,12 +51,12 @@ export interface Agency {
     longitude: string;
   };
 
-  accentColor?: string;  
-  primaryStat?: {        
+  accentColor?: string;
+  primaryStat?: {
+    key: string;
     icon: LucideIcon;
     value: string;
-    label: string;
   };
 
   nearbyLocations: string[];
-}
\ No newline at end of file
+}

From 5c72925e7694831a922c708c905b8de08a6e929a Mon Sep 17 00:00:00 2001
From: Antoine Kingue <etorefr@gmail.com>
Date: Tue, 30 Dec 2025 01:44:42 +0100
Subject: [PATCH 52/64] =?UTF-8?q?=F0=9F=8E=A8=20replace=20anchor=20tags=20?=
 =?UTF-8?q?with=20link=20component=20for=20improved=20navigation?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 apps/web/src/app/[locale]/agency/[city]/page.tsx | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/apps/web/src/app/[locale]/agency/[city]/page.tsx b/apps/web/src/app/[locale]/agency/[city]/page.tsx
index 512da7e7f..a421b85cc 100644
--- a/apps/web/src/app/[locale]/agency/[city]/page.tsx
+++ b/apps/web/src/app/[locale]/agency/[city]/page.tsx
@@ -1,6 +1,7 @@
 import Image from 'next/image';
 import { notFound } from 'next/navigation';
 import { Metadata } from 'next';
+import { Link } from '@onruntime/translations/next';
 import { constructMetadata } from '@/lib/utils/metadata.server';
 import { getTranslation } from '@/lib/translations.server';
 import CityHeroSection from '@/components/marketing/agency/city-hero-section';
@@ -163,7 +164,7 @@ export default async function CityPage({ params }: AgencyPageProps) {
                   </div>
                 );
               })}
-              <a
+              <Link
                 href={Routes.services}
                 className="text-xs flex items-center text-onruntime-blue hover:underline mt-2"
               >
@@ -171,7 +172,7 @@ export default async function CityPage({ params }: AgencyPageProps) {
                 <svg className="w-3 h-3 ml-1" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                   <path d="M5 12H19M19 12L12 5M19 12L12 19" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
                 </svg>
-              </a>
+              </Link>
             </div>
           </div>
         </div>

From f023a0d5816e0ae5be0d13f302d89eb23d723bee Mon Sep 17 00:00:00 2001
From: Antoine Kingue <etorefr@gmail.com>
Date: Tue, 30 Dec 2025 01:54:24 +0100
Subject: [PATCH 53/64] =?UTF-8?q?=F0=9F=92=84=20update=20city-hero-section?=
 =?UTF-8?q?=20styles=20and=20add=20safelist=20for=20tailwind=20css=20color?=
 =?UTF-8?q?s?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../marketing/agency/city-hero-section.tsx          |  2 +-
 apps/web/tailwind.config.ts                         | 13 +++++++++++++
 2 files changed, 14 insertions(+), 1 deletion(-)

diff --git a/apps/web/src/components/marketing/agency/city-hero-section.tsx b/apps/web/src/components/marketing/agency/city-hero-section.tsx
index 886f0442a..20d32f3b2 100644
--- a/apps/web/src/components/marketing/agency/city-hero-section.tsx
+++ b/apps/web/src/components/marketing/agency/city-hero-section.tsx
@@ -81,7 +81,7 @@ const CityHeroSection = async ({ agency }: CityHeroSectionProps) => {
         </div>
       </div>
 
-      <div className={`absolute inset-0 z-0 opacity-10 overflow-hidden`}>
+      <div className="absolute inset-0 z-0 opacity-10 overflow-hidden">
         <div className={`absolute -right-20 -top-20 w-[400px] h-[400px] rounded-full bg-onruntime-${accent} blur-3xl`}></div>
         <div className={`absolute -left-20 -bottom-20 w-[300px] h-[300px] rounded-full bg-onruntime-${accent} blur-3xl`}></div>
       </div>
diff --git a/apps/web/tailwind.config.ts b/apps/web/tailwind.config.ts
index f2aad1677..71eb9d2a6 100644
--- a/apps/web/tailwind.config.ts
+++ b/apps/web/tailwind.config.ts
@@ -8,6 +8,19 @@ export default {
 		"./src/screens/**/*.{js,ts,jsx,tsx,mdx}",
 		"./src/app/**/*.{js,ts,jsx,tsx,mdx}",
 	],
+	safelist: [
+		{
+			pattern: /bg-onruntime-(blue|magenta)\/(5|10|15|20)/,
+		},
+		{
+			pattern: /border-onruntime-(blue|magenta)\/(10|20|30|40)/,
+		},
+		{
+			pattern: /text-onruntime-(blue|magenta)/,
+		},
+		"bg-onruntime-blue",
+		"bg-onruntime-magenta",
+	],
 	theme: {
 		extend: {
 			screens: {

From 516bc475710835b727300625be3014a0a9e9413a Mon Sep 17 00:00:00 2001
From: Antoine Kingue <etorefr@gmail.com>
Date: Tue, 30 Dec 2025 02:02:08 +0100
Subject: [PATCH 54/64] =?UTF-8?q?=E2=99=BB=EF=B8=8F=20refactor=20agency=20?=
 =?UTF-8?q?primary-stat=20structure=20to=20remove=20value=20property=20for?=
 =?UTF-8?q?=20consistency?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 apps/web/src/constants/agencies/lyon.ts        | 5 ++---
 apps/web/src/constants/agencies/marseille.ts   | 5 ++---
 apps/web/src/constants/agencies/montpellier.ts | 5 ++---
 apps/web/src/constants/agencies/nantes.ts      | 5 ++---
 apps/web/src/constants/agencies/nice.ts        | 5 ++---
 apps/web/src/constants/agencies/paris.ts       | 5 ++---
 apps/web/src/constants/agencies/rouen.ts       | 5 ++---
 apps/web/src/constants/agencies/strasbourg.ts  | 5 ++---
 apps/web/src/constants/agencies/toulouse.ts    | 5 ++---
 apps/web/src/types/agency.ts                   | 1 -
 10 files changed, 18 insertions(+), 28 deletions(-)

diff --git a/apps/web/src/constants/agencies/lyon.ts b/apps/web/src/constants/agencies/lyon.ts
index 2a2a9b29e..a3f73d370 100644
--- a/apps/web/src/constants/agencies/lyon.ts
+++ b/apps/web/src/constants/agencies/lyon.ts
@@ -24,9 +24,8 @@ const lyonAgency: Agency = {
 
   accentColor: "blue",
   primaryStat: {
-    key: "biotech",
-    icon: FlaskConical,
-    value: "Biotech"
+    key: "primary-stat",
+    icon: FlaskConical
   },
 
   strengths: [
diff --git a/apps/web/src/constants/agencies/marseille.ts b/apps/web/src/constants/agencies/marseille.ts
index 71922c5a6..6133b050d 100644
--- a/apps/web/src/constants/agencies/marseille.ts
+++ b/apps/web/src/constants/agencies/marseille.ts
@@ -24,9 +24,8 @@ const marseilleAgency: Agency = {
 
   accentColor: "magenta",
   primaryStat: {
-    key: "tourism",
-    icon: Sun,
-    value: "Tourisme"
+    key: "primary-stat",
+    icon: Sun
   },
 
   strengths: [
diff --git a/apps/web/src/constants/agencies/montpellier.ts b/apps/web/src/constants/agencies/montpellier.ts
index 1718b30e1..f498fc5c6 100644
--- a/apps/web/src/constants/agencies/montpellier.ts
+++ b/apps/web/src/constants/agencies/montpellier.ts
@@ -24,9 +24,8 @@ const montpellierAgency: Agency = {
 
   accentColor: "magenta",
   primaryStat: {
-    key: "health",
-    icon: Microscope,
-    value: "Santé"
+    key: "primary-stat",
+    icon: Microscope
   },
 
   strengths: [
diff --git a/apps/web/src/constants/agencies/nantes.ts b/apps/web/src/constants/agencies/nantes.ts
index 42af80264..825b739f6 100644
--- a/apps/web/src/constants/agencies/nantes.ts
+++ b/apps/web/src/constants/agencies/nantes.ts
@@ -24,9 +24,8 @@ const nantesAgency: Agency = {
 
   accentColor: "blue",
   primaryStat: {
-    key: "tech",
-    icon: Laptop,
-    value: "Tech"
+    key: "primary-stat",
+    icon: Laptop
   },
 
   strengths: [
diff --git a/apps/web/src/constants/agencies/nice.ts b/apps/web/src/constants/agencies/nice.ts
index 41f1e7c29..08d6c2b0a 100644
--- a/apps/web/src/constants/agencies/nice.ts
+++ b/apps/web/src/constants/agencies/nice.ts
@@ -24,9 +24,8 @@ const niceAgency: Agency = {
 
   accentColor: "blue",
   primaryStat: {
-    key: "tourism",
-    icon: Palmtree,
-    value: "Tourisme"
+    key: "primary-stat",
+    icon: Palmtree
   },
 
   strengths: [
diff --git a/apps/web/src/constants/agencies/paris.ts b/apps/web/src/constants/agencies/paris.ts
index ad3d33030..3d37bfadd 100644
--- a/apps/web/src/constants/agencies/paris.ts
+++ b/apps/web/src/constants/agencies/paris.ts
@@ -25,9 +25,8 @@ const parisAgency: Agency = {
 
   accentColor: "magenta",
   primaryStat: {
-    key: "innovation",
-    icon: Rocket,
-    value: "Innovation"
+    key: "primary-stat",
+    icon: Rocket
   },
 
   strengths: [
diff --git a/apps/web/src/constants/agencies/rouen.ts b/apps/web/src/constants/agencies/rouen.ts
index 53cc11773..0237911b9 100644
--- a/apps/web/src/constants/agencies/rouen.ts
+++ b/apps/web/src/constants/agencies/rouen.ts
@@ -24,9 +24,8 @@ const rouenAgency: Agency = {
 
   accentColor: "blue",
   primaryStat: {
-    key: "industry",
-    icon: Building,
-    value: "Industrie"
+    key: "primary-stat",
+    icon: Building
   },
 
   strengths: [
diff --git a/apps/web/src/constants/agencies/strasbourg.ts b/apps/web/src/constants/agencies/strasbourg.ts
index a36717c58..dc046759e 100644
--- a/apps/web/src/constants/agencies/strasbourg.ts
+++ b/apps/web/src/constants/agencies/strasbourg.ts
@@ -24,9 +24,8 @@ const strasbourgAgency: Agency = {
 
   accentColor: "blue",
   primaryStat: {
-    key: "europe",
-    icon: Globe,
-    value: "Europe"
+    key: "primary-stat",
+    icon: Globe
   },
 
   strengths: [
diff --git a/apps/web/src/constants/agencies/toulouse.ts b/apps/web/src/constants/agencies/toulouse.ts
index 007bf74a3..7b397b725 100644
--- a/apps/web/src/constants/agencies/toulouse.ts
+++ b/apps/web/src/constants/agencies/toulouse.ts
@@ -24,9 +24,8 @@ const toulouseAgency: Agency = {
 
   accentColor: "blue",
   primaryStat: {
-    key: "innovation",
-    icon: Rocket,
-    value: "Innovation"
+    key: "primary-stat",
+    icon: Rocket
   },
 
   strengths: [
diff --git a/apps/web/src/types/agency.ts b/apps/web/src/types/agency.ts
index 58dbef59c..a301566f4 100644
--- a/apps/web/src/types/agency.ts
+++ b/apps/web/src/types/agency.ts
@@ -55,7 +55,6 @@ export interface Agency {
   primaryStat?: {
     key: string;
     icon: LucideIcon;
-    value: string;
   };
 
   nearbyLocations: string[];

From 8685ac89a8a1fe4264c8bba00b17dd896762d2c7 Mon Sep 17 00:00:00 2001
From: Antoine Kingue <etorefr@gmail.com>
Date: Tue, 30 Dec 2025 10:34:24 +0100
Subject: [PATCH 55/64] =?UTF-8?q?=F0=9F=8C=90=20fix=20agency=20localizatio?=
 =?UTF-8?q?n=20keys=20and=20update=20hero=20section=20structure?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/marketing/agency/city-hero-section.tsx  |  4 ++--
 .../components/marketing/agency/local-expertise.tsx    |  2 +-
 apps/web/src/locales/en/constants/agencies/lyon.json   | 10 ++++++----
 .../src/locales/en/constants/agencies/marseille.json   | 10 ++++++----
 .../src/locales/en/constants/agencies/montpellier.json | 10 ++++++----
 apps/web/src/locales/en/constants/agencies/nantes.json | 10 ++++++----
 apps/web/src/locales/en/constants/agencies/nice.json   | 10 ++++++----
 apps/web/src/locales/en/constants/agencies/paris.json  | 10 ++++++----
 apps/web/src/locales/en/constants/agencies/rouen.json  | 10 ++++++----
 .../src/locales/en/constants/agencies/strasbourg.json  | 10 ++++++----
 .../src/locales/en/constants/agencies/toulouse.json    | 10 ++++++----
 apps/web/src/locales/fr/constants/agencies/lyon.json   | 10 ++++++----
 .../src/locales/fr/constants/agencies/marseille.json   | 10 ++++++----
 .../src/locales/fr/constants/agencies/montpellier.json | 10 ++++++----
 apps/web/src/locales/fr/constants/agencies/nantes.json | 10 ++++++----
 apps/web/src/locales/fr/constants/agencies/nice.json   | 10 ++++++----
 apps/web/src/locales/fr/constants/agencies/paris.json  | 10 ++++++----
 apps/web/src/locales/fr/constants/agencies/rouen.json  | 10 ++++++----
 .../src/locales/fr/constants/agencies/strasbourg.json  | 10 ++++++----
 .../src/locales/fr/constants/agencies/toulouse.json    | 10 ++++++----
 20 files changed, 111 insertions(+), 75 deletions(-)

diff --git a/apps/web/src/components/marketing/agency/city-hero-section.tsx b/apps/web/src/components/marketing/agency/city-hero-section.tsx
index 20d32f3b2..303c7dd09 100644
--- a/apps/web/src/components/marketing/agency/city-hero-section.tsx
+++ b/apps/web/src/components/marketing/agency/city-hero-section.tsx
@@ -18,8 +18,8 @@ const CityHeroSection = async ({ agency }: CityHeroSectionProps) => {
 
   const accent = agency.accentColor || "blue";
 
-  const heroTitle = tAgency('hero-title');
-  const heroDescription = tAgency('hero-description');
+  const heroTitle = tAgency('hero.title');
+  const heroDescription = tAgency('hero.description');
 
   return (
     <div className="relative overflow-hidden rounded-xl border border-border bg-card mb-24">
diff --git a/apps/web/src/components/marketing/agency/local-expertise.tsx b/apps/web/src/components/marketing/agency/local-expertise.tsx
index 52e8b67bb..5c2d57636 100644
--- a/apps/web/src/components/marketing/agency/local-expertise.tsx
+++ b/apps/web/src/components/marketing/agency/local-expertise.tsx
@@ -18,7 +18,7 @@ const LocalExpertise = async ({ agency }: LocalExpertiseProps) => {
           {tComponent('title', { city: agency.name })}
         </h2>
         <p className="text-muted-foreground max-w-3xl mx-auto">
-          {t('expertise-text')}
+          {t('expertise')}
         </p>
       </div>
 
diff --git a/apps/web/src/locales/en/constants/agencies/lyon.json b/apps/web/src/locales/en/constants/agencies/lyon.json
index 89b885145..0e9f6cd04 100644
--- a/apps/web/src/locales/en/constants/agencies/lyon.json
+++ b/apps/web/src/locales/en/constants/agencies/lyon.json
@@ -1,10 +1,12 @@
 {
   "title": "Web Agency in Lyon | Custom Digital Solutions",
   "description": "Web development, mobile and UI/UX design in Lyon. Our digital expertise tailored to Rhône-Alpes businesses to boost your online presence.",
-  "hero-title": "Web & Mobile Development in Lyon",
-  "hero-description": "Transform your Lyon-based business with innovative digital solutions perfectly adapted to the economic dynamism of the Auvergne-Rhône-Alpes region.",
-  "intro-text": "At the heart of Lyon's dynamism, our digital expertise supports businesses in the region through their digital transformation. Between industrial tradition, biomedical excellence and gastronomic influence, Lyon presents a rich and diversified economic fabric whose challenges we fully understand.",
-  "expertise-text": "We create web, mobile and e-commerce solutions adapted to the specificities of the Lyon and Rhône-Alpes market. Our team masters the digital challenges specific to the region's sectors of excellence, from biotechnology to gastronomy, including manufacturing.",
+  "hero": {
+    "title": "Web & Mobile Development in Lyon",
+    "description": "Transform your Lyon-based business with innovative digital solutions perfectly adapted to the economic dynamism of the Auvergne-Rhône-Alpes region."
+  },
+  "intro": "At the heart of Lyon's dynamism, our digital expertise supports businesses in the region through their digital transformation. Between industrial tradition, biomedical excellence and gastronomic influence, Lyon presents a rich and diversified economic fabric whose challenges we fully understand.",
+  "expertise": "We create web, mobile and e-commerce solutions adapted to the specificities of the Lyon and Rhône-Alpes market. Our team masters the digital challenges specific to the region's sectors of excellence, from biotechnology to gastronomy, including manufacturing.",
   "why-choose-us": "Our knowledge of the Lyon market enables us to develop digital solutions perfectly aligned with the requirements and particularities of local businesses. We understand the region's standards of excellence and offer digital support that enhances Lyon's identity and know-how.",
   "key-business-sectors": {
     "biotech": "Biotechnology",
diff --git a/apps/web/src/locales/en/constants/agencies/marseille.json b/apps/web/src/locales/en/constants/agencies/marseille.json
index 11699a9b3..2b1623c6f 100644
--- a/apps/web/src/locales/en/constants/agencies/marseille.json
+++ b/apps/web/src/locales/en/constants/agencies/marseille.json
@@ -1,10 +1,12 @@
 {
   "title": "Web Development in Marseille | Digital Solutions for Provençal Businesses",
   "description": "Create your website or mobile application in Marseille. Custom digital solutions for Provençal businesses, tailored to the local challenges of your sector.",
-  "hero-title": "Web & Mobile Development in Marseille",
-  "hero-description": "We help businesses in Marseille and the PACA region digitalize with custom web solutions, perfectly adapted to the specific challenges of the Mediterranean market.",
-  "intro-text": "Between sea and hills, Marseille is a dynamic economic crossroads where tradition and innovation meet. Our digital expertise enables Marseille businesses to stand out in a competitive and constantly evolving Mediterranean market.",
-  "expertise-text": "Our team designs websites, applications and e-commerce solutions perfectly adapted to Marseille businesses. We understand the challenges of your local market and offer digital solutions that enhance your Provençal identity while reaching an international clientele.",
+  "hero": {
+    "title": "Web & Mobile Development in Marseille",
+    "description": "We help businesses in Marseille and the PACA region digitalize with custom web solutions, perfectly adapted to the specific challenges of the Mediterranean market."
+  },
+  "intro": "Between sea and hills, Marseille is a dynamic economic crossroads where tradition and innovation meet. Our digital expertise enables Marseille businesses to stand out in a competitive and constantly evolving Mediterranean market.",
+  "expertise": "Our team designs websites, applications and e-commerce solutions perfectly adapted to Marseille businesses. We understand the challenges of your local market and offer digital solutions that enhance your Provençal identity while reaching an international clientele.",
   "why-choose-us": "Our in-depth knowledge of the Provençal market allows us to develop digital solutions perfectly adapted to the specific challenges of local businesses. We understand the cultural and economic richness of Marseille and integrate it into each project to create authentic and high-performing digital experiences.",
   "key-business-sectors": {
     "tourism": "Tourism",
diff --git a/apps/web/src/locales/en/constants/agencies/montpellier.json b/apps/web/src/locales/en/constants/agencies/montpellier.json
index a3d13296f..2b5e298f3 100644
--- a/apps/web/src/locales/en/constants/agencies/montpellier.json
+++ b/apps/web/src/locales/en/constants/agencies/montpellier.json
@@ -1,10 +1,12 @@
 {
   "title": "Web Development in Montpellier | Digital Solutions for Languedoc Businesses",
   "description": "Create your website or mobile application in Montpellier. Custom digital solutions for Montpellier businesses, tailored to the local challenges of your sector.",
-  "hero-title": "Web & Mobile Development in Montpellier",
-  "hero-description": "We help businesses in Montpellier and the Languedoc region digitalize with custom web solutions, perfectly adapted to the specific challenges of the regional market.",
-  "intro-text": "A dynamic city at the crossroads of Mediterranean and Languedoc influences, Montpellier stands out for its health innovation ecosystem, prestigious universities and art of living. Our digital expertise enables Montpellier businesses to leverage this richness and stand out in a competitive environment.",
-  "expertise-text": "Our team designs websites, applications and digital solutions perfectly adapted to businesses in Montpellier and its region. We understand the specific challenges of your local market, whether in the health sector, education or Languedoc terroir, and offer digital solutions that showcase your expertise and regional roots.",
+  "hero": {
+    "title": "Web & Mobile Development in Montpellier",
+    "description": "We help businesses in Montpellier and the Languedoc region digitalize with custom web solutions, perfectly adapted to the specific challenges of the regional market."
+  },
+  "intro": "A dynamic city at the crossroads of Mediterranean and Languedoc influences, Montpellier stands out for its health innovation ecosystem, prestigious universities and art of living. Our digital expertise enables Montpellier businesses to leverage this richness and stand out in a competitive environment.",
+  "expertise": "Our team designs websites, applications and digital solutions perfectly adapted to businesses in Montpellier and its region. We understand the specific challenges of your local market, whether in the health sector, education or Languedoc terroir, and offer digital solutions that showcase your expertise and regional roots.",
   "why-choose-us": "Our in-depth knowledge of the Montpellier market allows us to develop digital solutions perfectly adapted to the specific challenges of local businesses. We understand the balance between innovation and tradition that characterizes Montpellier, and integrate this understanding into each project to create authentic and high-performing digital experiences.",
   "key-business-sectors": {
     "health-biotech": "Health & Biotechnologies",
diff --git a/apps/web/src/locales/en/constants/agencies/nantes.json b/apps/web/src/locales/en/constants/agencies/nantes.json
index 2dd830c5a..135d0af90 100644
--- a/apps/web/src/locales/en/constants/agencies/nantes.json
+++ b/apps/web/src/locales/en/constants/agencies/nantes.json
@@ -1,10 +1,12 @@
 {
   "title": "Web Development in Nantes | Digital Solutions for Loire Valley Businesses",
   "description": "Create your website or mobile application in Nantes. Custom digital solutions for Nantes businesses, tailored to the local challenges of your sector.",
-  "hero-title": "Web & Mobile Development in Nantes",
-  "hero-description": "We help businesses in Nantes and the Pays de la Loire digitalize with custom web solutions, perfectly adapted to the specific challenges of the Loire Valley market.",
-  "intro-text": "Historic capital of Brittany and innovative metropolis, Nantes is renowned for its economic dynamism and quality of life. Its flourishing digital ecosystem, creative industries and commitment to ecological transition make it a unique territory where digital innovation plays a central role.",
-  "expertise-text": "Our team designs websites, applications and digital solutions perfectly adapted to Nantes businesses, whether they are innovative startups, responsible economy players or traditional companies in transformation. We understand the specificities of the local market and offer digital solutions aligned with the values of innovation and sustainability specific to Nantes.",
+  "hero": {
+    "title": "Web & Mobile Development in Nantes",
+    "description": "We help businesses in Nantes and the Pays de la Loire digitalize with custom web solutions, perfectly adapted to the specific challenges of the Loire Valley market."
+  },
+  "intro": "Historic capital of Brittany and innovative metropolis, Nantes is renowned for its economic dynamism and quality of life. Its flourishing digital ecosystem, creative industries and commitment to ecological transition make it a unique territory where digital innovation plays a central role.",
+  "expertise": "Our team designs websites, applications and digital solutions perfectly adapted to Nantes businesses, whether they are innovative startups, responsible economy players or traditional companies in transformation. We understand the specificities of the local market and offer digital solutions aligned with the values of innovation and sustainability specific to Nantes.",
   "why-choose-us": "Our in-depth knowledge of the Nantes market allows us to develop digital solutions perfectly adapted to the specific challenges of local businesses. We understand the spirit of innovation and commitment to a more responsible economy that characterize Nantes, and integrate these values into each digital project we deliver.",
   "key-business-sectors": {
     "tech-digital": "Tech & Digital",
diff --git a/apps/web/src/locales/en/constants/agencies/nice.json b/apps/web/src/locales/en/constants/agencies/nice.json
index 80e9bc955..64e4a7dd8 100644
--- a/apps/web/src/locales/en/constants/agencies/nice.json
+++ b/apps/web/src/locales/en/constants/agencies/nice.json
@@ -1,10 +1,12 @@
 {
   "title": "Web Development in Nice | Digital Solutions for Côte d'Azur Businesses",
   "description": "Create your website or mobile application in Nice. Custom digital solutions for Côte d'Azur businesses, tailored to the local challenges of your sector.",
-  "hero-title": "Web & Mobile Development in Nice",
-  "hero-description": "We help businesses in Nice and the French Riviera digitalize with custom web solutions, perfectly adapted to the specific challenges of the Azurean market.",
-  "intro-text": "Between the Mediterranean Sea and the Alps, Nice benefits from international influence and a diversified economy where tourism meets innovation. Our digital expertise enables Nice businesses to stand out in a competitive environment where image and excellence are paramount.",
-  "expertise-text": "Our team designs websites, applications and e-commerce solutions perfectly adapted to businesses in Nice and the French Riviera. We understand the high standards of your local market and offer digital solutions that enhance the premium positioning specific to the region.",
+  "hero": {
+    "title": "Web & Mobile Development in Nice",
+    "description": "We help businesses in Nice and the French Riviera digitalize with custom web solutions, perfectly adapted to the specific challenges of the Azurean market."
+  },
+  "intro": "Between the Mediterranean Sea and the Alps, Nice benefits from international influence and a diversified economy where tourism meets innovation. Our digital expertise enables Nice businesses to stand out in a competitive environment where image and excellence are paramount.",
+  "expertise": "Our team designs websites, applications and e-commerce solutions perfectly adapted to businesses in Nice and the French Riviera. We understand the high standards of your local market and offer digital solutions that enhance the premium positioning specific to the region.",
   "why-choose-us": "Our in-depth knowledge of the Azurean market allows us to develop digital solutions perfectly adapted to the specific challenges of local businesses. We understand the international dimension of Nice and its reputation for excellence, and integrate these aspects into each project to create refined and high-performing digital experiences.",
   "key-business-sectors": {
     "luxury-tourism": "Luxury Tourism",
diff --git a/apps/web/src/locales/en/constants/agencies/paris.json b/apps/web/src/locales/en/constants/agencies/paris.json
index 26635d937..0ece23c77 100644
--- a/apps/web/src/locales/en/constants/agencies/paris.json
+++ b/apps/web/src/locales/en/constants/agencies/paris.json
@@ -1,10 +1,12 @@
 {
   "title": "Web Agency in Paris | Web Development, Mobile & UI/UX Design",
   "description": "Your digital partner in the heart of Paris. Web development, mobile and UI/UX design solutions to accelerate the growth of your Parisian business.",
-  "hero-title": "Digital Development in the Capital",
-  "hero-description": "Transform your digital presence with innovative solutions tailored to the competitive Parisian market and its dynamic ecosystem of startups, large corporations and innovative companies.",
-  "intro-text": "At the heart of the French capital, our digital expertise meets the demands of the Parisian market with innovative web and mobile solutions. Between large corporations, luxury companies and fast-growing startups, Paris concentrates a dynamic digital ecosystem whose challenges and opportunities we fully understand.",
-  "expertise-text": "We design premium digital experiences that meet the high standards of Parisian businesses. Our team masters the specific challenges of the capital, whether it's creating refined user interfaces for the luxury sector, high-performance applications for fintechs, or scalable solutions for fast-growing startups.",
+  "hero": {
+    "title": "Digital Development in the Capital",
+    "description": "Transform your digital presence with innovative solutions tailored to the competitive Parisian market and its dynamic ecosystem of startups, large corporations and innovative companies."
+  },
+  "intro": "At the heart of the French capital, our digital expertise meets the demands of the Parisian market with innovative web and mobile solutions. Between large corporations, luxury companies and fast-growing startups, Paris concentrates a dynamic digital ecosystem whose challenges and opportunities we fully understand.",
+  "expertise": "We design premium digital experiences that meet the high standards of Parisian businesses. Our team masters the specific challenges of the capital, whether it's creating refined user interfaces for the luxury sector, high-performance applications for fintechs, or scalable solutions for fast-growing startups.",
   "why-choose-us": "Our in-depth knowledge of the Parisian market allows us to develop digital solutions perfectly aligned with the requirements of capital businesses. We combine technical innovation, creative excellence and business understanding to effectively support you in a highly competitive environment.",
   "key-business-sectors": {
     "startups-tech": "Tech Startups",
diff --git a/apps/web/src/locales/en/constants/agencies/rouen.json b/apps/web/src/locales/en/constants/agencies/rouen.json
index a94375776..622d31812 100644
--- a/apps/web/src/locales/en/constants/agencies/rouen.json
+++ b/apps/web/src/locales/en/constants/agencies/rouen.json
@@ -1,10 +1,12 @@
 {
   "title": "Web Development in Rouen | Digital Solutions for Normandy Businesses",
   "description": "Create your website or mobile application in Rouen. Custom digital solutions for Normandy businesses, tailored to the local challenges of your sector.",
-  "hero-title": "Web & Mobile Development in Rouen",
-  "hero-description": "We help businesses in Rouen and Normandy digitalize with custom web solutions, perfectly adapted to the specific challenges of the Normandy market.",
-  "intro-text": "The Normandy economic fabric presents specific digital challenges that we have learned to master. Between manufacturing industry, agri-food sector and river logistics, we create digital solutions that meet the precise needs of Rouen businesses.",
-  "expertise-text": "Our team designs websites, applications and e-commerce solutions perfectly adapted to businesses in Rouen and its region. We understand the challenges of your market and offer digital solutions that help you stand out and grow your business.",
+  "hero": {
+    "title": "Web & Mobile Development in Rouen",
+    "description": "We help businesses in Rouen and Normandy digitalize with custom web solutions, perfectly adapted to the specific challenges of the Normandy market."
+  },
+  "intro": "The Normandy economic fabric presents specific digital challenges that we have learned to master. Between manufacturing industry, agri-food sector and river logistics, we create digital solutions that meet the precise needs of Rouen businesses.",
+  "expertise": "Our team designs websites, applications and e-commerce solutions perfectly adapted to businesses in Rouen and its region. We understand the challenges of your market and offer digital solutions that help you stand out and grow your business.",
   "why-choose-us": "Our in-depth knowledge of the Normandy market allows us to develop digital solutions perfectly adapted to the specific challenges of local businesses. Unlike Parisian agencies, we understand the subtleties of Rouen's economic fabric and provide custom solutions at an advantageous value for money.",
   "key-business-sectors": {
     "industry": "Industry",
diff --git a/apps/web/src/locales/en/constants/agencies/strasbourg.json b/apps/web/src/locales/en/constants/agencies/strasbourg.json
index e603d732c..063eaf012 100644
--- a/apps/web/src/locales/en/constants/agencies/strasbourg.json
+++ b/apps/web/src/locales/en/constants/agencies/strasbourg.json
@@ -1,10 +1,12 @@
 {
   "title": "Web Development in Strasbourg | Digital Solutions for Alsatian Businesses",
   "description": "Create your website or mobile application in Strasbourg. Custom digital solutions for Alsatian businesses, tailored to local and cross-border challenges.",
-  "hero-title": "Web & Mobile Development in Strasbourg",
-  "hero-description": "We help businesses in Strasbourg and the Grand Est region digitalize with custom web solutions, perfectly adapted to the specific challenges of the Alsatian and European market.",
-  "intro-text": "European capital and border city with rich heritage, Strasbourg combines Alsatian traditions and international openness. Its status as seat of European institutions, its dynamic industry and strategic position between France and Germany make it a unique territory where digital plays an essential bridging role.",
-  "expertise-text": "Our team designs websites, applications and digital solutions perfectly adapted to Strasbourg businesses, whether they are international organizations, industrial companies or local heritage players. We understand the specific challenges of your regional and cross-border market, and offer multilingual and culturally adapted digital solutions.",
+  "hero": {
+    "title": "Web & Mobile Development in Strasbourg",
+    "description": "We help businesses in Strasbourg and the Grand Est region digitalize with custom web solutions, perfectly adapted to the specific challenges of the Alsatian and European market."
+  },
+  "intro": "European capital and a border city with rich heritage, Strasbourg combines Alsatian traditions and international openness. Its status as seat of European institutions, its dynamic industry and strategic position between France and Germany make it a unique territory where digital plays an essential bridging role.",
+  "expertise": "Our team designs websites, applications and digital solutions perfectly adapted to Strasbourg businesses, whether they are international organizations, industrial companies or local heritage players. We understand the specific challenges of your regional and cross-border market, and offer multilingual and culturally adapted digital solutions.",
   "why-choose-us": "Our in-depth knowledge of the Strasbourg market allows us to develop digital solutions perfectly adapted to the specific challenges of local businesses. We understand the requirements of the European context and Alsatian cultural particularities, and integrate this dual dimension into each project to create relevant and high-performing digital experiences.",
   "key-business-sectors": {
     "european-institutions": "European Institutions",
diff --git a/apps/web/src/locales/en/constants/agencies/toulouse.json b/apps/web/src/locales/en/constants/agencies/toulouse.json
index 48171bb80..366afd057 100644
--- a/apps/web/src/locales/en/constants/agencies/toulouse.json
+++ b/apps/web/src/locales/en/constants/agencies/toulouse.json
@@ -1,10 +1,12 @@
 {
   "title": "Web Development in Toulouse | Digital Solutions for Occitan Businesses",
   "description": "Create your website or mobile application in Toulouse. Custom digital solutions for Toulouse businesses, tailored to the local challenges of your sector.",
-  "hero-title": "Web & Mobile Development in Toulouse",
-  "hero-description": "We help businesses in Toulouse and Occitania digitalize with custom web solutions, perfectly adapted to the specific challenges of the Toulouse market.",
-  "intro-text": "European aerospace capital and dynamic student city, Toulouse presents a unique economic ecosystem where innovation and tradition coexist. Our digital expertise enables Toulouse businesses to stand out in a competitive and constantly evolving technological environment.",
-  "expertise-text": "Our team designs websites, applications and digital solutions perfectly adapted to Toulouse businesses, whether they are aerospace giants, innovative startups or traditional shops. We understand the specific challenges of your local market and offer cutting-edge technological solutions.",
+  "hero": {
+    "title": "Web & Mobile Development in Toulouse",
+    "description": "We help businesses in Toulouse and Occitania digitalize with custom web solutions, perfectly adapted to the specific challenges of the Toulouse market."
+  },
+  "intro": "European aerospace capital and dynamic student city, Toulouse presents a unique economic ecosystem where innovation and tradition coexist. Our digital expertise enables Toulouse businesses to stand out in a competitive and constantly evolving technological environment.",
+  "expertise": "Our team designs websites, applications and digital solutions perfectly adapted to Toulouse businesses, whether they are aerospace giants, innovative startups or traditional shops. We understand the specific challenges of your local market and offer cutting-edge technological solutions.",
   "why-choose-us": "Our in-depth knowledge of the Toulouse market allows us to develop digital solutions perfectly adapted to the specific challenges of local businesses. We understand the technological challenges of the Pink City and integrate this expertise into each project to create high-performing and future-oriented digital experiences.",
   "key-business-sectors": {
     "aeronautics": "Aeronautics",
diff --git a/apps/web/src/locales/fr/constants/agencies/lyon.json b/apps/web/src/locales/fr/constants/agencies/lyon.json
index 5918e1cc3..86a6258ea 100644
--- a/apps/web/src/locales/fr/constants/agencies/lyon.json
+++ b/apps/web/src/locales/fr/constants/agencies/lyon.json
@@ -1,10 +1,12 @@
 {
   "title": "Agence Web à Lyon | Solutions Digitales sur Mesure",
   "description": "Développement web, mobile et design UI/UX à Lyon. Notre expertise digitale adaptée aux entreprises de Rhône-Alpes pour dynamiser votre présence en ligne.",
-  "hero-title": "Développement Web & Mobile à Lyon",
-  "hero-description": "Transformez votre entreprise lyonnaise avec des solutions digitales innovantes parfaitement adaptées au dynamisme économique de la région Auvergne-Rhône-Alpes.",
-  "intro-text": "Implantée au cœur du dynamisme lyonnais, notre expertise digitale accompagne les entreprises de la région dans leur transformation numérique. Entre tradition industrielle, excellence biomédicale et rayonnement gastronomique, Lyon présente un tissu économique riche et diversifié dont nous comprenons parfaitement les enjeux.",
-  "expertise-text": "Nous créons des solutions web, mobile et e-commerce adaptées aux spécificités du marché lyonnais et rhônalpin. Notre équipe maîtrise les défis numériques propres aux secteurs d'excellence de la région, des biotechnologies à la gastronomie, en passant par l'industrie manufacturière.",
+  "hero": {
+    "title": "Développement Web & Mobile à Lyon",
+    "description": "Transformez votre entreprise lyonnaise avec des solutions digitales innovantes parfaitement adaptées au dynamisme économique de la région Auvergne-Rhône-Alpes."
+  },
+  "intro": "Implantée au cœur du dynamisme lyonnais, notre expertise digitale accompagne les entreprises de la région dans leur transformation numérique. Entre tradition industrielle, excellence biomédicale et rayonnement gastronomique, Lyon présente un tissu économique riche et diversifié dont nous comprenons parfaitement les enjeux.",
+  "expertise": "Nous créons des solutions web, mobile et e-commerce adaptées aux spécificités du marché lyonnais et rhônalpin. Notre équipe maîtrise les défis numériques propres aux secteurs d'excellence de la région, des biotechnologies à la gastronomie, en passant par l'industrie manufacturière.",
   "why-choose-us": "Notre connaissance du marché lyonnais nous permet de développer des solutions numériques parfaitement alignées avec les exigences et les particularités des entreprises locales. Nous comprenons les standards d'excellence de la région et proposons un accompagnement digital qui valorise l'identité et le savoir-faire lyonnais.",
   "key-business-sectors": {
     "biotech": "Biotechnologie",
diff --git a/apps/web/src/locales/fr/constants/agencies/marseille.json b/apps/web/src/locales/fr/constants/agencies/marseille.json
index 480add356..e44e1bec1 100644
--- a/apps/web/src/locales/fr/constants/agencies/marseille.json
+++ b/apps/web/src/locales/fr/constants/agencies/marseille.json
@@ -1,10 +1,12 @@
 {
   "title": "Développement Web à Marseille | Solutions Digitales pour Entreprises Provençales",
   "description": "Créez votre site web ou application mobile à Marseille. Solutions digitales sur mesure pour les entreprises provençales, adaptées aux enjeux locaux de votre secteur.",
-  "hero-title": "Développement Web & Mobile à Marseille",
-  "hero-description": "Nous aidons les entreprises de Marseille et de la région PACA à se digitaliser avec des solutions web sur mesure, parfaitement adaptées aux enjeux spécifiques du marché méditerranéen.",
-  "intro-text": "Entre mer et collines, Marseille est un carrefour économique dynamique où tradition et innovation se rencontrent. Notre expertise digitale permet aux entreprises marseillaises de se démarquer dans un marché méditerranéen compétitif et en constante évolution.",
-  "expertise-text": "Notre équipe conçoit des sites web, applications et solutions e-commerce parfaitement adaptés aux entreprises marseillaises. Nous comprenons les défis de votre marché local et vous proposons des solutions digitales qui valorisent votre identité provençale tout en touchant une clientèle internationale.",
+  "hero": {
+    "title": "Développement Web & Mobile à Marseille",
+    "description": "Nous aidons les entreprises de Marseille et de la région PACA à se digitaliser avec des solutions web sur mesure, parfaitement adaptées aux enjeux spécifiques du marché méditerranéen."
+  },
+  "intro": "Entre mer et collines, Marseille est un carrefour économique dynamique où tradition et innovation se rencontrent. Notre expertise digitale permet aux entreprises marseillaises de se démarquer dans un marché méditerranéen compétitif et en constante évolution.",
+  "expertise": "Notre équipe conçoit des sites web, applications et solutions e-commerce parfaitement adaptés aux entreprises marseillaises. Nous comprenons les défis de votre marché local et vous proposons des solutions digitales qui valorisent votre identité provençale tout en touchant une clientèle internationale.",
   "why-choose-us": "Notre connaissance approfondie du marché provençal nous permet de développer des solutions numériques parfaitement adaptées aux défis spécifiques des entreprises locales. Nous comprenons la richesse culturelle et économique de Marseille et l'intégrons dans chaque projet pour créer des expériences digitales authentiques et performantes.",
   "key-business-sectors": {
     "tourism": "Tourisme",
diff --git a/apps/web/src/locales/fr/constants/agencies/montpellier.json b/apps/web/src/locales/fr/constants/agencies/montpellier.json
index 4947393ee..ce5d7d4b8 100644
--- a/apps/web/src/locales/fr/constants/agencies/montpellier.json
+++ b/apps/web/src/locales/fr/constants/agencies/montpellier.json
@@ -1,10 +1,12 @@
 {
   "title": "Développement Web à Montpellier | Solutions Digitales pour Entreprises Languedociennes",
   "description": "Créez votre site web ou application mobile à Montpellier. Solutions digitales sur mesure pour les entreprises montpelliéraines, adaptées aux enjeux locaux de votre secteur.",
-  "hero-title": "Développement Web & Mobile à Montpellier",
-  "hero-description": "Nous aidons les entreprises de Montpellier et du Languedoc à se digitaliser avec des solutions web sur mesure, parfaitement adaptées aux enjeux spécifiques du marché régional.",
-  "intro-text": "Ville dynamique à la croisée des influences méditerranéennes et languedociennes, Montpellier se distingue par son écosystème d'innovation en santé, ses universités prestigieuses et son art de vivre. Notre expertise digitale permet aux entreprises montpelliéraines de tirer parti de cette richesse et de se démarquer dans un environnement compétitif.",
-  "expertise-text": "Notre équipe conçoit des sites web, applications et solutions digitales parfaitement adaptés aux entreprises de Montpellier et sa région. Nous comprenons les défis spécifiques de votre marché local, qu'il s'agisse du secteur de la santé, de l'éducation ou du terroir languedocien, et vous proposons des solutions numériques qui valorisent votre expertise et votre ancrage régional.",
+  "hero": {
+    "title": "Développement Web & Mobile à Montpellier",
+    "description": "Nous aidons les entreprises de Montpellier et du Languedoc à se digitaliser avec des solutions web sur mesure, parfaitement adaptées aux enjeux spécifiques du marché régional."
+  },
+  "intro": "Ville dynamique à la croisée des influences méditerranéennes et languedociennes, Montpellier se distingue par son écosystème d'innovation en santé, ses universités prestigieuses et son art de vivre. Notre expertise digitale permet aux entreprises montpelliéraines de tirer parti de cette richesse et de se démarquer dans un environnement compétitif.",
+  "expertise": "Notre équipe conçoit des sites web, applications et solutions digitales parfaitement adaptés aux entreprises de Montpellier et sa région. Nous comprenons les défis spécifiques de votre marché local, qu'il s'agisse du secteur de la santé, de l'éducation ou du terroir languedocien, et vous proposons des solutions numériques qui valorisent votre expertise et votre ancrage régional.",
   "why-choose-us": "Notre connaissance approfondie du marché montpelliérain nous permet de développer des solutions numériques parfaitement adaptées aux défis spécifiques des entreprises locales. Nous comprenons l'équilibre entre innovation et tradition qui caractérise Montpellier, et intégrons cette compréhension dans chaque projet pour créer des expériences digitales authentiques et performantes.",
   "key-business-sectors": {
     "health-biotech": "Santé & Biotechnologies",
diff --git a/apps/web/src/locales/fr/constants/agencies/nantes.json b/apps/web/src/locales/fr/constants/agencies/nantes.json
index 192aae10b..598653359 100644
--- a/apps/web/src/locales/fr/constants/agencies/nantes.json
+++ b/apps/web/src/locales/fr/constants/agencies/nantes.json
@@ -1,10 +1,12 @@
 {
   "title": "Développement Web à Nantes | Solutions Digitales pour Entreprises Ligériennes",
   "description": "Créez votre site web ou application mobile à Nantes. Solutions digitales sur mesure pour les entreprises nantaises, adaptées aux enjeux locaux de votre secteur.",
-  "hero-title": "Développement Web & Mobile à Nantes",
-  "hero-description": "Nous aidons les entreprises de Nantes et des Pays de la Loire à se digitaliser avec des solutions web sur mesure, parfaitement adaptées aux enjeux spécifiques du marché ligérien.",
-  "intro-text": "Capitale historique de la Bretagne et métropole innovante, Nantes est reconnue pour son dynamisme économique et sa qualité de vie. Son écosystème numérique florissant, ses industries créatives et son engagement dans la transition écologique en font un territoire unique où l'innovation digitale joue un rôle central.",
-  "expertise-text": "Notre équipe conçoit des sites web, applications et solutions digitales parfaitement adaptés aux entreprises nantaises, qu'elles soient des startups innovantes, des acteurs de l'économie responsable ou des entreprises traditionnelles en transformation. Nous comprenons les spécificités du marché local et vous proposons des solutions numériques alignées avec les valeurs d'innovation et de durabilité propres à Nantes.",
+  "hero": {
+    "title": "Développement Web & Mobile à Nantes",
+    "description": "Nous aidons les entreprises de Nantes et des Pays de la Loire à se digitaliser avec des solutions web sur mesure, parfaitement adaptées aux enjeux spécifiques du marché ligérien."
+  },
+  "intro": "Capitale historique de la Bretagne et métropole innovante, Nantes est reconnue pour son dynamisme économique et sa qualité de vie. Son écosystème numérique florissant, ses industries créatives et son engagement dans la transition écologique en font un territoire unique où l'innovation digitale joue un rôle central.",
+  "expertise": "Notre équipe conçoit des sites web, applications et solutions digitales parfaitement adaptés aux entreprises nantaises, qu'elles soient des startups innovantes, des acteurs de l'économie responsable ou des entreprises traditionnelles en transformation. Nous comprenons les spécificités du marché local et vous proposons des solutions numériques alignées avec les valeurs d'innovation et de durabilité propres à Nantes.",
   "why-choose-us": "Notre connaissance approfondie du marché nantais nous permet de développer des solutions numériques parfaitement adaptées aux défis spécifiques des entreprises locales. Nous comprenons l'esprit d'innovation et l'engagement pour une économie plus responsable qui caractérisent Nantes, et intégrons ces valeurs dans chaque projet digital que nous réalisons.",
   "key-business-sectors": {
     "tech-digital": "Tech & Numérique",
diff --git a/apps/web/src/locales/fr/constants/agencies/nice.json b/apps/web/src/locales/fr/constants/agencies/nice.json
index 9130a4c4e..c6ec39ffe 100644
--- a/apps/web/src/locales/fr/constants/agencies/nice.json
+++ b/apps/web/src/locales/fr/constants/agencies/nice.json
@@ -1,10 +1,12 @@
 {
   "title": "Développement Web à Nice | Solutions Digitales pour Entreprises Azuréennes",
   "description": "Créez votre site web ou application mobile à Nice. Solutions digitales sur mesure pour les entreprises de la Côte d'Azur, adaptées aux enjeux locaux de votre secteur.",
-  "hero-title": "Développement Web & Mobile à Nice",
-  "hero-description": "Nous aidons les entreprises de Nice et de la Côte d'Azur à se digitaliser avec des solutions web sur mesure, parfaitement adaptées aux enjeux spécifiques du marché azuréen.",
-  "intro-text": "Entre mer Méditerranée et Alpes, Nice bénéficie d'un rayonnement international et d'une économie diversifiée où le tourisme côtoie l'innovation. Notre expertise digitale permet aux entreprises niçoises de se démarquer dans un environnement compétitif où l'image et l'excellence sont primordiales.",
-  "expertise-text": "Notre équipe conçoit des sites web, applications et solutions e-commerce parfaitement adaptés aux entreprises de Nice et de la Côte d'Azur. Nous comprenons les exigences élevées de votre marché local et vous proposons des solutions digitales qui valorisent le positionnement premium propre à la région.",
+  "hero": {
+    "title": "Développement Web & Mobile à Nice",
+    "description": "Nous aidons les entreprises de Nice et de la Côte d'Azur à se digitaliser avec des solutions web sur mesure, parfaitement adaptées aux enjeux spécifiques du marché azuréen."
+  },
+  "intro": "Entre mer Méditerranée et Alpes, Nice bénéficie d'un rayonnement international et d'une économie diversifiée où le tourisme côtoie l'innovation. Notre expertise digitale permet aux entreprises niçoises de se démarquer dans un environnement compétitif où l'image et l'excellence sont primordiales.",
+  "expertise": "Notre équipe conçoit des sites web, applications et solutions e-commerce parfaitement adaptés aux entreprises de Nice et de la Côte d'Azur. Nous comprenons les exigences élevées de votre marché local et vous proposons des solutions digitales qui valorisent le positionnement premium propre à la région.",
   "why-choose-us": "Notre connaissance approfondie du marché azuréen nous permet de développer des solutions numériques parfaitement adaptées aux défis spécifiques des entreprises locales. Nous comprenons la dimension internationale de Nice et sa réputation d'excellence, et intégrons ces aspects dans chaque projet pour créer des expériences digitales raffinées et performantes.",
   "key-business-sectors": {
     "luxury-tourism": "Tourisme de luxe",
diff --git a/apps/web/src/locales/fr/constants/agencies/paris.json b/apps/web/src/locales/fr/constants/agencies/paris.json
index b15f645be..8e4b27a45 100644
--- a/apps/web/src/locales/fr/constants/agencies/paris.json
+++ b/apps/web/src/locales/fr/constants/agencies/paris.json
@@ -1,10 +1,12 @@
 {
   "title": "Agence Web à Paris | Développement Web, Mobile & Design UI/UX",
   "description": "Votre partenaire digital au cœur de Paris. Solutions de développement web, mobile et design UI/UX pour accélérer la croissance de votre entreprise parisienne.",
-  "hero-title": "Développement Digital dans la Capitale",
-  "hero-description": "Transformez votre présence numérique avec des solutions innovantes adaptées au marché parisien compétitif et son écosystème dynamique de startups, grands groupes et entreprises innovantes.",
-  "intro-text": "Au cœur de la capitale française, notre expertise digitale répond aux exigences du marché parisien avec des solutions web et mobile innovantes. Entre grands groupes, entreprises du luxe et startups en pleine croissance, Paris concentre un écosystème numérique dynamique dont nous comprenons parfaitement les enjeux et les opportunités.",
-  "expertise-text": "Nous concevons des expériences digitales premium qui répondent aux standards élevés des entreprises parisiennes. Notre équipe maîtrise les défis spécifiques de la capitale, qu'il s'agisse de créer des interfaces utilisateur raffinées pour le secteur du luxe, des applications performantes pour les fintechs, ou des solutions évolutives pour les startups en hypercroissance.",
+  "hero": {
+    "title": "Développement Digital dans la Capitale",
+    "description": "Transformez votre présence numérique avec des solutions innovantes adaptées au marché parisien compétitif et son écosystème dynamique de startups, grands groupes et entreprises innovantes."
+  },
+  "intro": "Au cœur de la capitale française, notre expertise digitale répond aux exigences du marché parisien avec des solutions web et mobile innovantes. Entre grands groupes, entreprises du luxe et startups en pleine croissance, Paris concentre un écosystème numérique dynamique dont nous comprenons parfaitement les enjeux et les opportunités.",
+  "expertise": "Nous concevons des expériences digitales premium qui répondent aux standards élevés des entreprises parisiennes. Notre équipe maîtrise les défis spécifiques de la capitale, qu'il s'agisse de créer des interfaces utilisateur raffinées pour le secteur du luxe, des applications performantes pour les fintechs, ou des solutions évolutives pour les startups en hypercroissance.",
   "why-choose-us": "Notre connaissance approfondie du marché parisien nous permet de développer des solutions digitales parfaitement alignées avec les exigences des entreprises de la capitale. Nous combinons innovation technique, excellence créative et compréhension business pour vous accompagner efficacement dans un environnement hautement compétitif.",
   "key-business-sectors": {
     "startups-tech": "Startups Tech",
diff --git a/apps/web/src/locales/fr/constants/agencies/rouen.json b/apps/web/src/locales/fr/constants/agencies/rouen.json
index b4ac1fcbd..2262896a8 100644
--- a/apps/web/src/locales/fr/constants/agencies/rouen.json
+++ b/apps/web/src/locales/fr/constants/agencies/rouen.json
@@ -1,10 +1,12 @@
 {
   "title": "Développement Web à Rouen | Solutions Digitales pour Entreprises Normandes",
   "description": "Créez votre site web ou application mobile à Rouen. Solutions digitales sur mesure pour les entreprises normandes, adaptées aux enjeux locaux de votre secteur.",
-  "hero-title": "Développement Web & Mobile à Rouen",
-  "hero-description": "Nous aidons les entreprises de Rouen et de Normandie à se digitaliser avec des solutions web sur mesure, parfaitement adaptées aux enjeux spécifiques du marché normand.",
-  "intro-text": "Le tissu économique normand présente des enjeux numériques spécifiques que nous avons appris à maîtriser. Entre l'industrie manufacturière, le secteur agroalimentaire et la logistique fluviale, nous créons des solutions digitales qui répondent aux besoins précis des entreprises rouennaises.",
-  "expertise-text": "Notre équipe conçoit des sites web, applications et solutions e-commerce parfaitement adaptés aux entreprises de Rouen et sa région. Nous comprenons les défis de votre marché et vous proposons des solutions digitales qui vous aident à vous démarquer et à développer votre activité.",
+  "hero": {
+    "title": "Développement Web & Mobile à Rouen",
+    "description": "Nous aidons les entreprises de Rouen et de Normandie à se digitaliser avec des solutions web sur mesure, parfaitement adaptées aux enjeux spécifiques du marché normand."
+  },
+  "intro": "Le tissu économique normand présente des enjeux numériques spécifiques que nous avons appris à maîtriser. Entre l'industrie manufacturière, le secteur agroalimentaire et la logistique fluviale, nous créons des solutions digitales qui répondent aux besoins précis des entreprises rouennaises.",
+  "expertise": "Notre équipe conçoit des sites web, applications et solutions e-commerce parfaitement adaptés aux entreprises de Rouen et sa région. Nous comprenons les défis de votre marché et vous proposons des solutions digitales qui vous aident à vous démarquer et à développer votre activité.",
   "why-choose-us": "Notre connaissance approfondie du marché normand nous permet de développer des solutions numériques parfaitement adaptées aux défis spécifiques des entreprises locales. Contrairement aux agences parisiennes, nous comprenons les subtilités du tissu économique de Rouen et apportons des solutions sur mesure à un rapport qualité-prix avantageux.",
   "key-business-sectors": {
     "industry": "Industrie",
diff --git a/apps/web/src/locales/fr/constants/agencies/strasbourg.json b/apps/web/src/locales/fr/constants/agencies/strasbourg.json
index 6ce9677fe..17d7f7165 100644
--- a/apps/web/src/locales/fr/constants/agencies/strasbourg.json
+++ b/apps/web/src/locales/fr/constants/agencies/strasbourg.json
@@ -1,10 +1,12 @@
 {
   "title": "Développement Web à Strasbourg | Solutions Digitales pour Entreprises Alsaciennes",
   "description": "Créez votre site web ou application mobile à Strasbourg. Solutions digitales sur mesure pour les entreprises alsaciennes, adaptées aux enjeux locaux et transfrontaliers.",
-  "hero-title": "Développement Web & Mobile à Strasbourg",
-  "hero-description": "Nous aidons les entreprises de Strasbourg et du Grand Est à se digitaliser avec des solutions web sur mesure, parfaitement adaptées aux enjeux spécifiques du marché alsacien et européen.",
-  "intro-text": "Capitale européenne et ville frontalière au riche patrimoine, Strasbourg conjugue traditions alsaciennes et ouverture internationale. Son statut de siège d'institutions européennes, son industrie dynamique et sa position stratégique entre France et Allemagne en font un territoire unique où le digital joue un rôle essentiel de passerelle.",
-  "expertise-text": "Notre équipe conçoit des sites web, applications et solutions digitales parfaitement adaptés aux entreprises strasbourgeoises, qu'elles soient des organisations internationales, des entreprises industrielles ou des acteurs du patrimoine local. Nous comprenons les défis spécifiques de votre marché régional et transfrontalier, et vous proposons des solutions numériques multilingues et culturellement adaptées.",
+  "hero": {
+    "title": "Développement Web & Mobile à Strasbourg",
+    "description": "Nous aidons les entreprises de Strasbourg et du Grand Est à se digitaliser avec des solutions web sur mesure, parfaitement adaptées aux enjeux spécifiques du marché alsacien et européen."
+  },
+  "intro": "Capitale européenne et ville frontalière au riche patrimoine, Strasbourg conjugue traditions alsaciennes et ouverture internationale. Son statut de siège d'institutions européennes, son industrie dynamique et sa position stratégique entre France et Allemagne en font un territoire unique où le digital joue un rôle essentiel de passerelle.",
+  "expertise": "Notre équipe conçoit des sites web, applications et solutions digitales parfaitement adaptés aux entreprises strasbourgeoises, qu'elles soient des organisations internationales, des entreprises industrielles ou des acteurs du patrimoine local. Nous comprenons les défis spécifiques de votre marché régional et transfrontalier, et vous proposons des solutions numériques multilingues et culturellement adaptées.",
   "why-choose-us": "Notre connaissance approfondie du marché strasbourgeois nous permet de développer des solutions numériques parfaitement adaptées aux défis spécifiques des entreprises locales. Nous comprenons les exigences du contexte européen et les particularités culturelles alsaciennes, et intégrons cette double dimension dans chaque projet pour créer des expériences digitales pertinentes et performantes.",
   "key-business-sectors": {
     "european-institutions": "Institutions européennes",
diff --git a/apps/web/src/locales/fr/constants/agencies/toulouse.json b/apps/web/src/locales/fr/constants/agencies/toulouse.json
index 747faf70f..a16243b4f 100644
--- a/apps/web/src/locales/fr/constants/agencies/toulouse.json
+++ b/apps/web/src/locales/fr/constants/agencies/toulouse.json
@@ -1,10 +1,12 @@
 {
   "title": "Développement Web à Toulouse | Solutions Digitales pour Entreprises Occitanes",
   "description": "Créez votre site web ou application mobile à Toulouse. Solutions digitales sur mesure pour les entreprises toulousaines, adaptées aux enjeux locaux de votre secteur.",
-  "hero-title": "Développement Web & Mobile à Toulouse",
-  "hero-description": "Nous aidons les entreprises de Toulouse et de l'Occitanie à se digitaliser avec des solutions web sur mesure, parfaitement adaptées aux enjeux spécifiques du marché toulousain.",
-  "intro-text": "Capitale européenne de l'aéronautique et ville étudiante dynamique, Toulouse présente un écosystème économique unique où innovation et tradition se côtoient. Notre expertise digitale permet aux entreprises toulousaines de se démarquer dans un environnement compétitif en constante évolution technologique.",
-  "expertise-text": "Notre équipe conçoit des sites web, applications et solutions digitales parfaitement adaptés aux entreprises toulousaines, qu'elles soient des géants de l'aéronautique, des startups innovantes ou des commerces traditionnels. Nous comprenons les défis spécifiques de votre marché local et vous proposons des solutions technologiques de pointe.",
+  "hero": {
+    "title": "Développement Web & Mobile à Toulouse",
+    "description": "Nous aidons les entreprises de Toulouse et de l'Occitanie à se digitaliser avec des solutions web sur mesure, parfaitement adaptées aux enjeux spécifiques du marché toulousain."
+  },
+  "intro": "Capitale européenne de l'aéronautique et ville étudiante dynamique, Toulouse présente un écosystème économique unique où innovation et tradition se côtoient. Notre expertise digitale permet aux entreprises toulousaines de se démarquer dans un environnement compétitif en constante évolution technologique.",
+  "expertise": "Notre équipe conçoit des sites web, applications et solutions digitales parfaitement adaptés aux entreprises toulousaines, qu'elles soient des géants de l'aéronautique, des startups innovantes ou des commerces traditionnels. Nous comprenons les défis spécifiques de votre marché local et vous proposons des solutions technologiques de pointe.",
   "why-choose-us": "Notre connaissance approfondie du marché toulousain nous permet de développer des solutions numériques parfaitement adaptées aux défis spécifiques des entreprises locales. Nous comprenons les enjeux technologiques de la Ville Rose et intégrons cette expertise dans chaque projet pour créer des expériences digitales performantes et tournées vers le futur.",
   "key-business-sectors": {
     "aeronautics": "Aéronautique",

From 752b9945acaa15990e278eb04a16ea8775e5d6b5 Mon Sep 17 00:00:00 2001
From: Antoine Kingue <etorefr@gmail.com>
Date: Tue, 30 Dec 2025 15:41:33 +0100
Subject: [PATCH 56/64] =?UTF-8?q?=F0=9F=8C=90=20remove=20contact-info=20se?=
 =?UTF-8?q?ctions=20from=20agency=20localization=20files=20for=20cleaner?=
 =?UTF-8?q?=20structure?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 apps/web/src/locales/en/constants/agencies/lyon.json      | 6 ------
 apps/web/src/locales/en/constants/agencies/marseille.json | 6 ------
 .../src/locales/en/constants/agencies/montpellier.json    | 6 ------
 apps/web/src/locales/en/constants/agencies/nantes.json    | 8 +-------
 apps/web/src/locales/en/constants/agencies/nice.json      | 6 ------
 apps/web/src/locales/en/constants/agencies/paris.json     | 6 ------
 apps/web/src/locales/en/constants/agencies/rouen.json     | 6 ------
 .../web/src/locales/en/constants/agencies/strasbourg.json | 6 ------
 apps/web/src/locales/en/constants/agencies/toulouse.json  | 6 ------
 apps/web/src/locales/fr/constants/agencies/lyon.json      | 6 ------
 apps/web/src/locales/fr/constants/agencies/marseille.json | 6 ------
 .../src/locales/fr/constants/agencies/montpellier.json    | 6 ------
 apps/web/src/locales/fr/constants/agencies/nantes.json    | 6 ------
 apps/web/src/locales/fr/constants/agencies/nice.json      | 6 ------
 apps/web/src/locales/fr/constants/agencies/paris.json     | 6 ------
 apps/web/src/locales/fr/constants/agencies/rouen.json     | 6 ------
 .../web/src/locales/fr/constants/agencies/strasbourg.json | 6 ------
 apps/web/src/locales/fr/constants/agencies/toulouse.json  | 6 ------
 18 files changed, 1 insertion(+), 109 deletions(-)

diff --git a/apps/web/src/locales/en/constants/agencies/lyon.json b/apps/web/src/locales/en/constants/agencies/lyon.json
index 0e9f6cd04..89d6660fd 100644
--- a/apps/web/src/locales/en/constants/agencies/lyon.json
+++ b/apps/web/src/locales/en/constants/agencies/lyon.json
@@ -62,12 +62,6 @@
       "description": "Control tools and IoT solutions for Rhône-Alpes industry."
     }
   },
-  "contact-info": {
-    "meeting-options": {
-      "video-conference": "Video conference",
-      "in-person": "Occasional meetings in Lyon"
-    }
-  },
   "stats": {
     "biotech-projects": {
       "label": "Biotech Projects",
diff --git a/apps/web/src/locales/en/constants/agencies/marseille.json b/apps/web/src/locales/en/constants/agencies/marseille.json
index 2b1623c6f..ccea7b3d9 100644
--- a/apps/web/src/locales/en/constants/agencies/marseille.json
+++ b/apps/web/src/locales/en/constants/agencies/marseille.json
@@ -62,12 +62,6 @@
       "description": "Mobile solutions to enrich the tourism and commercial experience."
     }
   },
-  "contact-info": {
-    "meeting-options": {
-      "video-conference": "Video conference",
-      "in-person": "Occasional meetings in Marseille"
-    }
-  },
   "stats": {
     "expertise": {
       "label": "Expertise",
diff --git a/apps/web/src/locales/en/constants/agencies/montpellier.json b/apps/web/src/locales/en/constants/agencies/montpellier.json
index 2b5e298f3..81c475165 100644
--- a/apps/web/src/locales/en/constants/agencies/montpellier.json
+++ b/apps/web/src/locales/en/constants/agencies/montpellier.json
@@ -62,12 +62,6 @@
       "description": "Online stores for local producers and wine estates."
     }
   },
-  "contact-info": {
-    "meeting-options": {
-      "video-conference": "Video conference",
-      "in-person": "Occasional meetings in Montpellier"
-    }
-  },
   "stats": {
     "expertise": {
       "label": "Expertise",
diff --git a/apps/web/src/locales/en/constants/agencies/nantes.json b/apps/web/src/locales/en/constants/agencies/nantes.json
index 135d0af90..406b31a6f 100644
--- a/apps/web/src/locales/en/constants/agencies/nantes.json
+++ b/apps/web/src/locales/en/constants/agencies/nantes.json
@@ -5,7 +5,7 @@
     "title": "Web & Mobile Development in Nantes",
     "description": "We help businesses in Nantes and the Pays de la Loire digitalize with custom web solutions, perfectly adapted to the specific challenges of the Loire Valley market."
   },
-  "intro": "Historic capital of Brittany and innovative metropolis, Nantes is renowned for its economic dynamism and quality of life. Its flourishing digital ecosystem, creative industries and commitment to ecological transition make it a unique territory where digital innovation plays a central role.",
+  "intro": "A historic capital of Brittany and an innovative metropolis, Nantes is renowned for its economic dynamism and quality of life. Its flourishing digital ecosystem, creative industries and commitment to ecological transition make it a unique territory where digital innovation plays a central role.",
   "expertise": "Our team designs websites, applications and digital solutions perfectly adapted to Nantes businesses, whether they are innovative startups, responsible economy players or traditional companies in transformation. We understand the specificities of the local market and offer digital solutions aligned with the values of innovation and sustainability specific to Nantes.",
   "why-choose-us": "Our in-depth knowledge of the Nantes market allows us to develop digital solutions perfectly adapted to the specific challenges of local businesses. We understand the spirit of innovation and commitment to a more responsible economy that characterize Nantes, and integrate these values into each digital project we deliver.",
   "key-business-sectors": {
@@ -62,12 +62,6 @@
       "description": "Custom solutions for traditional industries in transformation."
     }
   },
-  "contact-info": {
-    "meeting-options": {
-      "video-conference": "Video conference",
-      "in-person": "Occasional meetings in Nantes"
-    }
-  },
   "stats": {
     "expertise": {
       "label": "Expertise",
diff --git a/apps/web/src/locales/en/constants/agencies/nice.json b/apps/web/src/locales/en/constants/agencies/nice.json
index 64e4a7dd8..248f23c75 100644
--- a/apps/web/src/locales/en/constants/agencies/nice.json
+++ b/apps/web/src/locales/en/constants/agencies/nice.json
@@ -62,12 +62,6 @@
       "description": "Elegant and refined UI/UX design for prestigious brands and establishments."
     }
   },
-  "contact-info": {
-    "meeting-options": {
-      "video-conference": "Video conference",
-      "in-person": "Occasional meetings in Nice"
-    }
-  },
   "stats": {
     "expertise": {
       "label": "Expertise",
diff --git a/apps/web/src/locales/en/constants/agencies/paris.json b/apps/web/src/locales/en/constants/agencies/paris.json
index 0ece23c77..bb64febe0 100644
--- a/apps/web/src/locales/en/constants/agencies/paris.json
+++ b/apps/web/src/locales/en/constants/agencies/paris.json
@@ -63,12 +63,6 @@
       "description": "Modern and differentiating user interfaces to stand out in Paris."
     }
   },
-  "contact-info": {
-    "meeting-options": {
-      "video-conference": "Video conference",
-      "in-person": "Meetings in Paris"
-    }
-  },
   "stats": {
     "startups": {
       "label": "Startups",
diff --git a/apps/web/src/locales/en/constants/agencies/rouen.json b/apps/web/src/locales/en/constants/agencies/rouen.json
index 622d31812..a2ce493c8 100644
--- a/apps/web/src/locales/en/constants/agencies/rouen.json
+++ b/apps/web/src/locales/en/constants/agencies/rouen.json
@@ -62,12 +62,6 @@
       "description": "Custom software for regional industry and logistics."
     }
   },
-  "contact-info": {
-    "meeting-options": {
-      "video-conference": "Video conference",
-      "in-person": "Occasional meetings in Rouen"
-    }
-  },
   "stats": {
     "expertise": {
       "label": "Expertise",
diff --git a/apps/web/src/locales/en/constants/agencies/strasbourg.json b/apps/web/src/locales/en/constants/agencies/strasbourg.json
index 063eaf012..703ef2025 100644
--- a/apps/web/src/locales/en/constants/agencies/strasbourg.json
+++ b/apps/web/src/locales/en/constants/agencies/strasbourg.json
@@ -62,12 +62,6 @@
       "description": "Custom digital tools to modernize industrial processes."
     }
   },
-  "contact-info": {
-    "meeting-options": {
-      "video-conference": "Video conference",
-      "in-person": "Occasional meetings in Strasbourg"
-    }
-  },
   "stats": {
     "expertise": {
       "label": "Expertise",
diff --git a/apps/web/src/locales/en/constants/agencies/toulouse.json b/apps/web/src/locales/en/constants/agencies/toulouse.json
index 366afd057..8c48d8d37 100644
--- a/apps/web/src/locales/en/constants/agencies/toulouse.json
+++ b/apps/web/src/locales/en/constants/agencies/toulouse.json
@@ -62,12 +62,6 @@
       "description": "Complete solutions for local shops looking to digitalize."
     }
   },
-  "contact-info": {
-    "meeting-options": {
-      "video-conference": "Video conference",
-      "in-person": "Occasional meetings in Toulouse"
-    }
-  },
   "stats": {
     "expertise": {
       "label": "Expertise",
diff --git a/apps/web/src/locales/fr/constants/agencies/lyon.json b/apps/web/src/locales/fr/constants/agencies/lyon.json
index 86a6258ea..12a13dafe 100644
--- a/apps/web/src/locales/fr/constants/agencies/lyon.json
+++ b/apps/web/src/locales/fr/constants/agencies/lyon.json
@@ -62,12 +62,6 @@
       "description": "Outils de pilotage et solutions IoT pour l'industrie rhônalpine."
     }
   },
-  "contact-info": {
-    "meeting-options": {
-      "video-conference": "Visioconférence",
-      "in-person": "Déplacements occasionnels à Lyon"
-    }
-  },
   "stats": {
     "biotech-projects": {
       "label": "Projets biotech",
diff --git a/apps/web/src/locales/fr/constants/agencies/marseille.json b/apps/web/src/locales/fr/constants/agencies/marseille.json
index e44e1bec1..651566eab 100644
--- a/apps/web/src/locales/fr/constants/agencies/marseille.json
+++ b/apps/web/src/locales/fr/constants/agencies/marseille.json
@@ -62,12 +62,6 @@
       "description": "Solutions mobiles pour enrichir l'expérience touristique et commerciale."
     }
   },
-  "contact-info": {
-    "meeting-options": {
-      "video-conference": "Visioconférence",
-      "in-person": "Déplacements occasionnels à Marseille"
-    }
-  },
   "stats": {
     "expertise": {
       "label": "Expertise",
diff --git a/apps/web/src/locales/fr/constants/agencies/montpellier.json b/apps/web/src/locales/fr/constants/agencies/montpellier.json
index ce5d7d4b8..2568fe3c2 100644
--- a/apps/web/src/locales/fr/constants/agencies/montpellier.json
+++ b/apps/web/src/locales/fr/constants/agencies/montpellier.json
@@ -62,12 +62,6 @@
       "description": "Boutiques en ligne pour producteurs locaux et domaines viticoles."
     }
   },
-  "contact-info": {
-    "meeting-options": {
-      "video-conference": "Visioconférence",
-      "in-person": "Déplacements occasionnels à Montpellier"
-    }
-  },
   "stats": {
     "expertise": {
       "label": "Expertise",
diff --git a/apps/web/src/locales/fr/constants/agencies/nantes.json b/apps/web/src/locales/fr/constants/agencies/nantes.json
index 598653359..3aea9043b 100644
--- a/apps/web/src/locales/fr/constants/agencies/nantes.json
+++ b/apps/web/src/locales/fr/constants/agencies/nantes.json
@@ -62,12 +62,6 @@
       "description": "Solutions sur mesure pour industries traditionnelles en transformation."
     }
   },
-  "contact-info": {
-    "meeting-options": {
-      "video-conference": "Visioconférence",
-      "in-person": "Déplacements occasionnels à Nantes"
-    }
-  },
   "stats": {
     "expertise": {
       "label": "Expertise",
diff --git a/apps/web/src/locales/fr/constants/agencies/nice.json b/apps/web/src/locales/fr/constants/agencies/nice.json
index c6ec39ffe..3d4529d3e 100644
--- a/apps/web/src/locales/fr/constants/agencies/nice.json
+++ b/apps/web/src/locales/fr/constants/agencies/nice.json
@@ -62,12 +62,6 @@
       "description": "Design UI/UX élégant et soigné pour marques et établissements prestigieux."
     }
   },
-  "contact-info": {
-    "meeting-options": {
-      "video-conference": "Visioconférence",
-      "in-person": "Déplacements occasionnels à Nice"
-    }
-  },
   "stats": {
     "expertise": {
       "label": "Expertise",
diff --git a/apps/web/src/locales/fr/constants/agencies/paris.json b/apps/web/src/locales/fr/constants/agencies/paris.json
index 8e4b27a45..be08ae113 100644
--- a/apps/web/src/locales/fr/constants/agencies/paris.json
+++ b/apps/web/src/locales/fr/constants/agencies/paris.json
@@ -63,12 +63,6 @@
       "description": "Interfaces utilisateur modernes et différenciantes pour se démarquer à Paris."
     }
   },
-  "contact-info": {
-    "meeting-options": {
-      "video-conference": "Visioconférence",
-      "in-person": "Rencontres à Paris"
-    }
-  },
   "stats": {
     "startups": {
       "label": "Startups",
diff --git a/apps/web/src/locales/fr/constants/agencies/rouen.json b/apps/web/src/locales/fr/constants/agencies/rouen.json
index 2262896a8..b89aeb7ee 100644
--- a/apps/web/src/locales/fr/constants/agencies/rouen.json
+++ b/apps/web/src/locales/fr/constants/agencies/rouen.json
@@ -62,12 +62,6 @@
       "description": "Logiciels sur mesure pour l'industrie et la logistique régionale."
     }
   },
-  "contact-info": {
-    "meeting-options": {
-      "video-conference": "Visioconférence",
-      "in-person": "Déplacements occasionnels à Rouen"
-    }
-  },
   "stats": {
     "expertise": {
       "label": "Expertise",
diff --git a/apps/web/src/locales/fr/constants/agencies/strasbourg.json b/apps/web/src/locales/fr/constants/agencies/strasbourg.json
index 17d7f7165..2ef8d7c61 100644
--- a/apps/web/src/locales/fr/constants/agencies/strasbourg.json
+++ b/apps/web/src/locales/fr/constants/agencies/strasbourg.json
@@ -62,12 +62,6 @@
       "description": "Outils numériques sur mesure pour moderniser les process industriels."
     }
   },
-  "contact-info": {
-    "meeting-options": {
-      "video-conference": "Visioconférence",
-      "in-person": "Déplacements occasionnels à Strasbourg"
-    }
-  },
   "stats": {
     "expertise": {
       "label": "Expertise",
diff --git a/apps/web/src/locales/fr/constants/agencies/toulouse.json b/apps/web/src/locales/fr/constants/agencies/toulouse.json
index a16243b4f..f3c769f2b 100644
--- a/apps/web/src/locales/fr/constants/agencies/toulouse.json
+++ b/apps/web/src/locales/fr/constants/agencies/toulouse.json
@@ -62,12 +62,6 @@
       "description": "Solutions complètes pour les commerces locaux souhaitant se digitaliser."
     }
   },
-  "contact-info": {
-    "meeting-options": {
-      "video-conference": "Visioconférence",
-      "in-person": "Déplacements occasionnels à Toulouse"
-    }
-  },
   "stats": {
     "expertise": {
       "label": "Expertise",

From 42ce2fd1b93e740fbbbb248dd0e5a9836c45159d Mon Sep 17 00:00:00 2001
From: Antoine Kingue <etorefr@gmail.com>
Date: Tue, 30 Dec 2025 20:40:56 +0100
Subject: [PATCH 57/64] =?UTF-8?q?=F0=9F=8C=90=20add=20services=20translati?=
 =?UTF-8?q?ons?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../services/[category]/[service]/page.tsx    | 150 ++--
 .../app/[locale]/services/[category]/page.tsx |  19 +-
 apps/web/src/app/[locale]/services/page.tsx   |   5 +-
 .../src/components/marketing/navbar/index.tsx |  90 ++-
 .../navbar/navigation/services/index.tsx      | 164 ++---
 .../marketing/services/faq-section.tsx        |  65 +-
 .../marketing/services/feature-section.tsx    | 197 +++--
 .../marketing/services/service-layout.tsx     |  46 +-
 .../marketing/services/service-overview.tsx   | 322 ++++++---
 .../services/testimonials-section.tsx         | 100 ++-
 apps/web/src/constants/services/backend.ts    | 572 +++------------
 apps/web/src/constants/services/design.ts     | 574 +++------------
 apps/web/src/constants/services/frontend.ts   | 484 +++----------
 .../web/src/constants/services/integration.ts | 675 ++++--------------
 .../services/[category]/[service]/page.json   |  28 +
 .../web/src/locales/en/app/services/page.json |  13 +
 .../marketing/services/service-layout.json    |  28 +
 .../marketing/services/service-overview.json  |  29 +
 .../en/constants/services/backend.json        |  56 ++
 .../en/constants/services/backend/api.json    |  80 +++
 .../en/constants/services/backend/bots.json   |  80 +++
 .../en/constants/services/backend/cloud.json  |  80 +++
 .../constants/services/backend/database.json  |  80 +++
 .../services/backend/microservices.json       |  80 +++
 .../locales/en/constants/services/design.json |  56 ++
 .../en/constants/services/design/audit.json   |  80 +++
 .../constants/services/design/branding.json   |  80 +++
 .../constants/services/design/moodboard.json  |  80 +++
 .../en/constants/services/design/ui.json      |  80 +++
 .../constants/services/design/wireframes.json |  80 +++
 .../en/constants/services/frontend.json       |  56 ++
 .../constants/services/frontend/desktop.json  |  80 +++
 .../constants/services/frontend/mobile.json   |  80 +++
 .../en/constants/services/frontend/pwa.json   |  80 +++
 .../en/constants/services/frontend/web.json   |  80 +++
 .../en/constants/services/integration.json    |  56 ++
 .../services/integration/prestashop.json      |  80 +++
 .../services/integration/shopify.json         |  80 +++
 .../services/integration/squarespace.json     |  80 +++
 .../services/integration/strapi.json          |  80 +++
 .../services/integration/webflow.json         |  80 +++
 .../services/integration/wordpress.json       |  80 +++
 .../services/[category]/[service]/page.json   |  28 +
 .../web/src/locales/fr/app/services/page.json |  13 +
 .../marketing/services/service-layout.json    |  28 +
 .../marketing/services/service-overview.json  |  29 +
 .../fr/constants/services/backend.json        |  56 ++
 .../fr/constants/services/backend/api.json    |  80 +++
 .../fr/constants/services/backend/bots.json   |  80 +++
 .../fr/constants/services/backend/cloud.json  |  80 +++
 .../constants/services/backend/database.json  |  80 +++
 .../services/backend/microservices.json       |  80 +++
 .../locales/fr/constants/services/design.json |  56 ++
 .../fr/constants/services/design/audit.json   |  80 +++
 .../constants/services/design/branding.json   |  80 +++
 .../constants/services/design/moodboard.json  |  80 +++
 .../fr/constants/services/design/ui.json      |  80 +++
 .../constants/services/design/wireframes.json |  80 +++
 .../fr/constants/services/frontend.json       |  56 ++
 .../constants/services/frontend/desktop.json  |  80 +++
 .../constants/services/frontend/mobile.json   |  80 +++
 .../fr/constants/services/frontend/pwa.json   |  80 +++
 .../fr/constants/services/frontend/web.json   |  80 +++
 .../fr/constants/services/integration.json    |  56 ++
 .../services/integration/prestashop.json      |  80 +++
 .../services/integration/shopify.json         |  80 +++
 .../services/integration/squarespace.json     |  80 +++
 .../services/integration/strapi.json          |  80 +++
 .../services/integration/webflow.json         |  80 +++
 .../services/integration/wordpress.json       |  80 +++
 apps/web/src/proxy.ts                         |   8 +-
 .../src/screens/marketing/services/index.tsx  | 149 ++--
 apps/web/src/types/service.ts                 |  24 +-
 examples/translations/next-app/proxy.ts       |   8 +-
 packages/translations/README.md               |   8 +-
 .../src/next/contexts/app-context.tsx         |   3 +-
 76 files changed, 5132 insertions(+), 2375 deletions(-)
 create mode 100644 apps/web/src/locales/en/app/services/[category]/[service]/page.json
 create mode 100644 apps/web/src/locales/en/components/marketing/services/service-layout.json
 create mode 100644 apps/web/src/locales/en/components/marketing/services/service-overview.json
 create mode 100644 apps/web/src/locales/en/constants/services/backend.json
 create mode 100644 apps/web/src/locales/en/constants/services/backend/api.json
 create mode 100644 apps/web/src/locales/en/constants/services/backend/bots.json
 create mode 100644 apps/web/src/locales/en/constants/services/backend/cloud.json
 create mode 100644 apps/web/src/locales/en/constants/services/backend/database.json
 create mode 100644 apps/web/src/locales/en/constants/services/backend/microservices.json
 create mode 100644 apps/web/src/locales/en/constants/services/design.json
 create mode 100644 apps/web/src/locales/en/constants/services/design/audit.json
 create mode 100644 apps/web/src/locales/en/constants/services/design/branding.json
 create mode 100644 apps/web/src/locales/en/constants/services/design/moodboard.json
 create mode 100644 apps/web/src/locales/en/constants/services/design/ui.json
 create mode 100644 apps/web/src/locales/en/constants/services/design/wireframes.json
 create mode 100644 apps/web/src/locales/en/constants/services/frontend.json
 create mode 100644 apps/web/src/locales/en/constants/services/frontend/desktop.json
 create mode 100644 apps/web/src/locales/en/constants/services/frontend/mobile.json
 create mode 100644 apps/web/src/locales/en/constants/services/frontend/pwa.json
 create mode 100644 apps/web/src/locales/en/constants/services/frontend/web.json
 create mode 100644 apps/web/src/locales/en/constants/services/integration.json
 create mode 100644 apps/web/src/locales/en/constants/services/integration/prestashop.json
 create mode 100644 apps/web/src/locales/en/constants/services/integration/shopify.json
 create mode 100644 apps/web/src/locales/en/constants/services/integration/squarespace.json
 create mode 100644 apps/web/src/locales/en/constants/services/integration/strapi.json
 create mode 100644 apps/web/src/locales/en/constants/services/integration/webflow.json
 create mode 100644 apps/web/src/locales/en/constants/services/integration/wordpress.json
 create mode 100644 apps/web/src/locales/fr/app/services/[category]/[service]/page.json
 create mode 100644 apps/web/src/locales/fr/components/marketing/services/service-layout.json
 create mode 100644 apps/web/src/locales/fr/components/marketing/services/service-overview.json
 create mode 100644 apps/web/src/locales/fr/constants/services/backend.json
 create mode 100644 apps/web/src/locales/fr/constants/services/backend/api.json
 create mode 100644 apps/web/src/locales/fr/constants/services/backend/bots.json
 create mode 100644 apps/web/src/locales/fr/constants/services/backend/cloud.json
 create mode 100644 apps/web/src/locales/fr/constants/services/backend/database.json
 create mode 100644 apps/web/src/locales/fr/constants/services/backend/microservices.json
 create mode 100644 apps/web/src/locales/fr/constants/services/design.json
 create mode 100644 apps/web/src/locales/fr/constants/services/design/audit.json
 create mode 100644 apps/web/src/locales/fr/constants/services/design/branding.json
 create mode 100644 apps/web/src/locales/fr/constants/services/design/moodboard.json
 create mode 100644 apps/web/src/locales/fr/constants/services/design/ui.json
 create mode 100644 apps/web/src/locales/fr/constants/services/design/wireframes.json
 create mode 100644 apps/web/src/locales/fr/constants/services/frontend.json
 create mode 100644 apps/web/src/locales/fr/constants/services/frontend/desktop.json
 create mode 100644 apps/web/src/locales/fr/constants/services/frontend/mobile.json
 create mode 100644 apps/web/src/locales/fr/constants/services/frontend/pwa.json
 create mode 100644 apps/web/src/locales/fr/constants/services/frontend/web.json
 create mode 100644 apps/web/src/locales/fr/constants/services/integration.json
 create mode 100644 apps/web/src/locales/fr/constants/services/integration/prestashop.json
 create mode 100644 apps/web/src/locales/fr/constants/services/integration/shopify.json
 create mode 100644 apps/web/src/locales/fr/constants/services/integration/squarespace.json
 create mode 100644 apps/web/src/locales/fr/constants/services/integration/strapi.json
 create mode 100644 apps/web/src/locales/fr/constants/services/integration/webflow.json
 create mode 100644 apps/web/src/locales/fr/constants/services/integration/wordpress.json

diff --git a/apps/web/src/app/[locale]/services/[category]/[service]/page.tsx b/apps/web/src/app/[locale]/services/[category]/[service]/page.tsx
index f8bf6f5f5..fa5bec5eb 100644
--- a/apps/web/src/app/[locale]/services/[category]/[service]/page.tsx
+++ b/apps/web/src/app/[locale]/services/[category]/[service]/page.tsx
@@ -1,12 +1,11 @@
-import React from 'react';
-import { notFound } from 'next/navigation';
-import Services from '@/constants/services';
-import ServiceLayout from '@/components/marketing/services/service-layout';
-import FeatureSection from '@/components/marketing/services/feature-section';
-import TestimonialsSection from '@/components/marketing/services/testimonials-section';
-import FAQSection from '@/components/marketing/services/faq-section';
-import { ServiceCategoryData, SubService } from '@/types/service';
-import { constructMetadata } from '@/lib/utils/metadata.server';
+import { notFound } from "next/navigation";
+import Services from "@/constants/services";
+import ServiceLayout from "@/components/marketing/services/service-layout";
+import FeatureSection from "@/components/marketing/services/feature-section";
+import TestimonialsSection from "@/components/marketing/services/testimonials-section";
+import FAQSection from "@/components/marketing/services/faq-section";
+import { constructMetadata } from "@/lib/utils/metadata.server";
+import { getTranslation } from "@/lib/translations.server";
 
 type Props = {
   params: Promise<{
@@ -15,10 +14,9 @@ type Props = {
   }>;
 };
 
-function findService(category: string, service: string): { categoryData: ServiceCategoryData | undefined, subService: SubService | undefined } {
-  const categoryData = Services.find(s => s.id === category);
-  const subService = categoryData?.subServices.find(sub => sub.id === service);
-
+function findService(category: string, service: string) {
+  const categoryData = Services.find((s) => s.id === category);
+  const subService = categoryData?.subServices.find((sub) => sub.id === service);
   return { categoryData, subService };
 }
 
@@ -27,16 +25,24 @@ export async function generateMetadata({ params }: Props) {
   const { categoryData, subService } = findService(category, service);
 
   if (!categoryData || !subService) {
+    const { t: tPage } = await getTranslation("app/services/[category]/[service]/page");
     return constructMetadata({
-      title: "Service non trouvé",
-      description: "Ce service n'existe pas.",
+      title: tPage("metadata.not-found.title"),
+      description: tPage("metadata.not-found.description"),
       noIndex: true,
     });
   }
 
+  const { t: tCategory } = await getTranslation(`constants/services/${category}`);
+  const { t: tService } = await getTranslation(`constants/services/${category}/${service}`);
+
+  const categoryName = tCategory("name");
+  const serviceName = tService("name");
+  const serviceDescription = tService("description");
+
   return constructMetadata({
-    title: `${subService.name} | ${categoryData.name}`,
-    description: subService.description,
+    title: `${serviceName} | ${categoryName}`,
+    description: serviceDescription,
   });
 }
 
@@ -47,70 +53,78 @@ export default async function ServicePage({ params }: Props) {
   if (!categoryData || !subService) {
     notFound();
   }
-  
+
+  const { t: tCategory } = await getTranslation(`constants/services/${category}`);
+  const { t: tService } = await getTranslation(`constants/services/${category}/${service}`);
+  const { t: tPage } = await getTranslation("app/services/[category]/[service]/page");
+
+  const categoryName = tCategory("name");
+  const serviceName = tService("name");
+  const serviceNameLower = serviceName.toLowerCase();
+  const serviceDescription = tService("description");
+  const heroTitle = tService("hero.title");
+  const heroDescription = tService("hero.description");
+
   return (
     <ServiceLayout
-      title={`${subService.name} | ${categoryData.name}`}
-      description={subService.description}
-      heroTitle={subService.heroTitle || subService.name}
-      heroDescription={subService.heroDescription || subService.description}
+      title={`${serviceName} | ${categoryName}`}
+      description={serviceDescription}
+      heroTitle={heroTitle || serviceName}
+      heroDescription={heroDescription || serviceDescription}
     >
-      
-      {subService.features && subService.features.length > 0 && (
-        <FeatureSection
-          title={`Excellence en ${subService.name.toLowerCase()}`}
-          description={`Notre expertise en ${subService.name.toLowerCase()} vous garantit des solutions professionnelles et performantes.`}
-          features={subService.features}
-        />
-      )}
-
-      {subService.benefits && subService.benefits.length > 0 && (
-        <FeatureSection
-          title={`${subService.name} professionnel`}
-          description={`Découvrez les avantages d'un service ${subService.name.toLowerCase()} professionnel.`}
-          features={subService.benefits}
-          reversed
-        />
-      )}
-
-      {subService.testimonials && subService.testimonials.length > 0 && (
-        <TestimonialsSection
-          title="Ils nous font confiance"
-          description={`Découvrez les retours de nos clients sur leurs projets ${subService.name.toLowerCase()}`}
-          testimonials={subService.testimonials}
-        />
-      )}
-
-      {subService.faqItems && subService.faqItems.length > 0 && (
-        <FAQSection
-          title="Questions fréquentes"
-          description={`Tout ce que vous devez savoir sur notre service de ${subService.name.toLowerCase()}`}
-          items={subService.faqItems}
-        />
-      )}
-
-      {subService.complementaryServices && subService.complementaryServices.length > 0 && (
-        <FeatureSection
-          title="Services complémentaires"
-          description={`Optimisez votre projet ${subService.name.toLowerCase()} avec nos services additionnels`}
-          features={subService.complementaryServices}
-        />
-      )}
+      <FeatureSection
+        categoryId={category}
+        serviceId={service}
+        title={tPage("features.title", { service: serviceNameLower })}
+        description={tPage("features.description", { service: serviceNameLower })}
+        type="features"
+      />
+
+      <FeatureSection
+        categoryId={category}
+        serviceId={service}
+        title={tPage("benefits.title", { service: serviceName })}
+        description={tPage("benefits.description", { service: serviceNameLower })}
+        type="benefits"
+        reversed
+      />
+
+      <TestimonialsSection
+        categoryId={category}
+        serviceId={service}
+        title={tPage("testimonials.title")}
+        description={tPage("testimonials.description", { service: serviceNameLower })}
+      />
+
+      <FAQSection
+        categoryId={category}
+        serviceId={service}
+        title={tPage("faq.title")}
+        description={tPage("faq.description", { service: serviceNameLower })}
+      />
+
+      <FeatureSection
+        categoryId={category}
+        serviceId={service}
+        title={tPage("complementary.title")}
+        description={tPage("complementary.description", { service: serviceNameLower })}
+        type="complementary"
+      />
     </ServiceLayout>
   );
 }
 
 export async function generateStaticParams() {
   const paths: { category: string; service: string }[] = [];
-  
-  Services.forEach(category => {
-    category.subServices.forEach(service => {
+
+  Services.forEach((category) => {
+    category.subServices.forEach((service) => {
       paths.push({
         category: category.id,
         service: service.id,
       });
     });
   });
-  
+
   return paths;
-}
\ No newline at end of file
+}
diff --git a/apps/web/src/app/[locale]/services/[category]/page.tsx b/apps/web/src/app/[locale]/services/[category]/page.tsx
index 641e3e382..b9942328c 100644
--- a/apps/web/src/app/[locale]/services/[category]/page.tsx
+++ b/apps/web/src/app/[locale]/services/[category]/page.tsx
@@ -1,7 +1,6 @@
 import { notFound } from 'next/navigation';
 import Services from '@/constants/services';
 import ServiceOverviewPage from '@/components/marketing/services/service-overview';
-import { ServiceCategoryData } from '@/types/service';
 import { constructMetadata } from '@/lib/utils/metadata.server';
 import { getTranslation } from '@/lib/translations.server';
 
@@ -24,26 +23,30 @@ export async function generateMetadata({ params }: Props) {
     });
   }
 
+  const { t } = await getTranslation(`constants/services/${category}`);
+
   return constructMetadata({
-    title: `${categoryData.name}`,
-    description: categoryData.description,
+    title: t('name'),
+    description: t('description'),
   });
 }
 
 export default async function CategoryPage({ params }: Props) {
   const { category } = await params;
 
-  const categoryData = Services.find(service => service.id === category) as ServiceCategoryData;
+  const categoryData = Services.find(service => service.id === category);
 
   if (!categoryData) {
     notFound();
   }
-  
+
+  const { t } = await getTranslation(`constants/services/${category}`);
+
   return (
     <ServiceOverviewPage
-      service={categoryData}
-      benefits={categoryData.benefits || []}
-      processList={categoryData.processList || []}
+      categoryId={categoryData.id}
+      name={t('name')}
+      description={t('description')}
     />
   );
 }
diff --git a/apps/web/src/app/[locale]/services/page.tsx b/apps/web/src/app/[locale]/services/page.tsx
index abdf7510b..4a8e48207 100644
--- a/apps/web/src/app/[locale]/services/page.tsx
+++ b/apps/web/src/app/[locale]/services/page.tsx
@@ -1,6 +1,7 @@
 import { constructMetadata } from "@/lib/utils/metadata.server";
 import { getTranslation } from "@/lib/translations.server";
 import ServicesPage from "@/screens/marketing/services";
+import Services from "@/constants/services";
 
 export async function generateMetadata() {
   const { t } = await getTranslation("app/services/page");
@@ -11,4 +12,6 @@ export async function generateMetadata() {
   });
 }
 
-export default ServicesPage;
+export default async function Page() {
+  return <ServicesPage services={Services} />;
+}
diff --git a/apps/web/src/components/marketing/navbar/index.tsx b/apps/web/src/components/marketing/navbar/index.tsx
index 3e540146d..dbeac3cf2 100644
--- a/apps/web/src/components/marketing/navbar/index.tsx
+++ b/apps/web/src/components/marketing/navbar/index.tsx
@@ -14,9 +14,59 @@ import Projects from "@/constants/projects";
 import { getMajorAgencies } from "@/constants/agencies";
 import { OnRuntimeWordMark } from "@/logos/components";
 import { cn } from "@/lib/utils";
+import { ServiceCategoryData, SubService } from "@/types/service";
 
 import Navigation from "./navigation";
 
+// Mobile menu components for services
+const MobileSubServiceLink: React.FC<{
+	categoryId: string;
+	subService: SubService;
+	onClose: () => void;
+}> = ({ categoryId, subService, onClose }) => {
+	const { t } = useTranslation(`constants/services/${categoryId}/${subService.id}`);
+
+	return (
+		<Link
+			href={subService.route}
+			className="block text-xs text-muted-foreground hover:text-foreground"
+			onClick={onClose}
+		>
+			{t("name")}
+		</Link>
+	);
+};
+
+const MobileServiceCategory: React.FC<{
+	service: ServiceCategoryData;
+	onClose: () => void;
+}> = ({ service, onClose }) => {
+	const { t } = useTranslation(`constants/services/${service.id}`);
+
+	return (
+		<div className="space-y-2 pb-3">
+			<Link
+				href={Routes.service[service.id].root}
+				className="block text-sm font-medium"
+				onClick={onClose}
+			>
+				{t("name")}
+			</Link>
+
+			<div className="pl-3 space-y-2">
+				{service.subServices.map((subService) => (
+					<MobileSubServiceLink
+						key={subService.id}
+						categoryId={service.id}
+						subService={subService}
+						onClose={onClose}
+					/>
+				))}
+			</div>
+		</div>
+	);
+};
+
 interface SubNavItem {
 	title: string;
 	path: string;
@@ -32,6 +82,7 @@ interface NavItem {
 	title: string;
 	path: string;
 	dropdown?: DropdownItem[];
+	isServices?: boolean;
 }
 
 const Navbar: React.FC = () => {
@@ -49,14 +100,7 @@ const Navbar: React.FC = () => {
 		{
 			title: t("links.services"),
 			path: Routes.services,
-			dropdown: Services.map((service) => ({
-				title: service.name,
-				path: Routes.service[service.id].root,
-				items: service.subServices.map((subService) => ({
-					title: subService.name,
-					path: subService.route,
-				})),
-			})),
+			isServices: true,
 		},
 		{
 			title: t("links.projects"),
@@ -165,7 +209,35 @@ const Navbar: React.FC = () => {
 					<div className="px-3 flex flex-col space-y-4 md:hidden max-h-[calc(100vh-100px)] overflow-y-auto pb-4">
 						{navItems.map((item) => (
 							<div key={item.title} className="border-t border-border pt-3">
-								{item.dropdown ? (
+								{item.isServices ? (
+									<div className="space-y-3">
+										<button
+											onClick={() => toggleSection(item.title)}
+											className="flex w-full justify-between items-center text-base font-medium"
+											aria-expanded={expandedSection === item.title}
+										>
+											{item.title}
+											<ChevronDown
+												className={cn(
+													"h-4 w-4 transition-transform",
+													expandedSection === item.title ? "rotate-180" : "",
+												)}
+											/>
+										</button>
+
+										{expandedSection === item.title && (
+											<div className="pl-4 space-y-4 pt-2 overflow-y-auto">
+												{Services.map((service) => (
+													<MobileServiceCategory
+														key={service.id}
+														service={service}
+														onClose={closeMenu}
+													/>
+												))}
+											</div>
+										)}
+									</div>
+								) : item.dropdown ? (
 									<div className="space-y-3">
 										<button
 											onClick={() => toggleSection(item.title)}
diff --git a/apps/web/src/components/marketing/navbar/navigation/services/index.tsx b/apps/web/src/components/marketing/navbar/navigation/services/index.tsx
index 64ed29b5e..f3a126c8d 100644
--- a/apps/web/src/components/marketing/navbar/navigation/services/index.tsx
+++ b/apps/web/src/components/marketing/navbar/navigation/services/index.tsx
@@ -9,41 +9,80 @@ import {
 import Services from "@/constants/services";
 import Routes from "@/constants/routes";
 import { cn } from "@/lib/utils";
-import { ArrowRight, LucideIcon } from "lucide-react";
+import { ArrowRight } from "lucide-react";
 import React from "react";
 import { Link } from "@onruntime/translations/next";
-
 import { useTranslation } from "@onruntime/translations/react";
+import { ServiceCategoryData, SubService } from "@/types/service";
+
+const SubServiceLink: React.FC<{ categoryId: string; subService: SubService }> = ({
+  categoryId,
+  subService
+}) => {
+  const { t } = useTranslation(`constants/services/${categoryId}/${subService.id}`);
+
+  return (
+    <Link
+      href={subService.route}
+      className="text-xs text-muted-foreground hover:text-foreground transition-colors"
+    >
+      {t("name")}
+    </Link>
+  );
+};
+
+const ServiceCategoryPreview: React.FC<{ service: ServiceCategoryData }> = ({ service }) => {
+  const { t } = useTranslation(`constants/services/${service.id}`);
+
+  return (
+    <div className="flex items-center gap-2 text-xs">
+      <service.icon className="h-3.5 w-3.5 text-onruntime-blue" />
+      <span>{t("name")}</span>
+    </div>
+  );
+};
+
+const ServiceCategoryCard: React.FC<{ service: ServiceCategoryData }> = ({ service }) => {
+  const { t } = useTranslation(`constants/services/${service.id}`);
+
+  return (
+    <li>
+      <NavigationMenuLink asChild>
+        <Link
+          href={Routes.service[service.id].root}
+          className={cn(
+            "flex flex-col gap-2 h-full select-none rounded-md p-3 leading-none no-underline outline-none transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground",
+          )}
+        >
+          <div className="flex items-center gap-2">
+            <div className="p-1 rounded-md bg-muted">
+              <service.icon className="w-4 h-4 text-muted-foreground" />
+            </div>
+            <span className="text-sm font-medium">{t("name")}</span>
+          </div>
 
-interface NavigationService {
-  title: string;
-  description: string;
-  icon: LucideIcon;
-  route: string;
-  subServices?: {
-    title: string;
-    description: string;
-    route: string;
-    icon?: LucideIcon;
-  }[];
-}
+          <p className="mb-2 text-xs text-muted-foreground">
+            {t("description")}
+          </p>
+
+          <div className="grid gap-1">
+            {service.subServices.map((subService) => (
+              <SubServiceLink
+                key={subService.id}
+                categoryId={service.id}
+                subService={subService}
+              />
+            ))}
+          </div>
+        </Link>
+      </NavigationMenuLink>
+    </li>
+  );
+};
 
 const NavigationServices: React.FC = () => {
   const { t } = useTranslation("layout/navbar");
 
-  const navServices: NavigationService[] = Services.map((service) => ({
-    title: service.name,
-    description: service.description,
-    icon: service.icon,
-    route: `/services/${service.id}`,
-    subServices: service.subServices.map((subService) => ({
-      title: subService.name,
-      description: subService.description,
-      route: `/services/${service.id}/${subService.id}`,
-      icon: subService.icon,
-    })),
-  }));
-
   return (
     <NavigationMenuItem>
       <Link href={Routes.services}>
@@ -68,11 +107,8 @@ const NavigationServices: React.FC = () => {
                 </div>
 
                 <div className="space-y-3">
-                  {navServices.slice(0, 3).map((service, index) => (
-                    <div key={index} className="flex items-center gap-2 text-xs">
-                      <service.icon className="h-3.5 w-3.5 text-onruntime-blue" />
-                      <span>{service.title}</span>
-                    </div>
+                  {Services.slice(0, 3).map((service) => (
+                    <ServiceCategoryPreview key={service.id} service={service} />
                   ))}
 
                   <div className="flex items-center gap-2 text-xs text-muted-foreground group-hover:text-accent-foreground/80 mt-4">
@@ -85,29 +121,8 @@ const NavigationServices: React.FC = () => {
           </NavigationMenuLink>
 
           <ul className="grid grid-cols-2 gap-3">
-            {navServices.map((service) => (
-              <ListItem
-                key={service.title}
-                title={service.title}
-                href={service.route}
-                icon={service.icon}
-              >
-                <p className="mb-2 text-xs text-muted-foreground">
-                  {service.description}
-                </p>
-
-                <div className="grid gap-1">
-                  {service.subServices?.map((subService) => (
-                    <Link
-                      key={subService.title}
-                      href={subService.route}
-                      className="text-xs text-muted-foreground hover:text-foreground transition-colors"
-                    >
-                      {subService.title}
-                    </Link>
-                  ))}
-                </div>
-              </ListItem>
+            {Services.map((service) => (
+              <ServiceCategoryCard key={service.id} service={service} />
             ))}
           </ul>
         </div>
@@ -116,43 +131,4 @@ const NavigationServices: React.FC = () => {
   );
 };
 
-interface ListItemProps {
-  title: string;
-  icon: LucideIcon;
-  href: string;
-  className?: string;
-  children?: React.ReactNode;
-}
-
-const ListItem = ({
-  className,
-  title,
-  children,
-  icon: Icon,
-  href,
-}: ListItemProps) => {
-  return (
-    <li>
-      <NavigationMenuLink asChild>
-        <Link
-          href={href}
-          className={cn(
-            "flex flex-col gap-2 h-full select-none rounded-md p-3 leading-none no-underline outline-none transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground",
-            className,
-          )}
-        >
-          <div className="flex items-center gap-2">
-            <div className="p-1 rounded-md bg-muted">
-              <Icon className="w-4 h-4 text-muted-foreground" />
-            </div>
-            <span className="text-sm font-medium">{title}</span>
-          </div>
-
-          {children}
-        </Link>
-      </NavigationMenuLink>
-    </li>
-  );
-};
-
 export default NavigationServices;
diff --git a/apps/web/src/components/marketing/services/faq-section.tsx b/apps/web/src/components/marketing/services/faq-section.tsx
index e3308dacb..7c6d5e76a 100644
--- a/apps/web/src/components/marketing/services/faq-section.tsx
+++ b/apps/web/src/components/marketing/services/faq-section.tsx
@@ -1,4 +1,6 @@
-import React from 'react';
+"use client";
+
+import React from "react";
 import {
   Accordion,
   AccordionContent,
@@ -6,25 +8,57 @@ import {
   AccordionTrigger,
 } from "@/components/ui/accordion";
 import { cn } from "@/lib/utils";
+import { useTranslation } from "@onruntime/translations/react";
+import Services from "@/constants/services";
 
-interface FAQItem {
-  question: string;
-  answer: string;
+interface FAQItemProps {
+  categoryId: string;
+  serviceId: string;
+  faqKey: string;
+  index: number;
 }
 
+const FAQItem: React.FC<FAQItemProps> = ({
+  categoryId,
+  serviceId,
+  faqKey,
+  index,
+}) => {
+  const { t } = useTranslation(`constants/services/${categoryId}/${serviceId}`);
+
+  return (
+    <AccordionItem value={`item-${index}`}>
+      <AccordionTrigger className="text-left">
+        {t(`faq.${faqKey}.question`)}
+      </AccordionTrigger>
+      <AccordionContent>{t(`faq.${faqKey}.answer`)}</AccordionContent>
+    </AccordionItem>
+  );
+};
+
 interface FAQSectionProps {
+  categoryId: string;
+  serviceId: string;
   title: string;
   description: string;
-  items: FAQItem[];
   className?: string;
 }
 
 const FAQSection: React.FC<FAQSectionProps> = ({
+  categoryId,
+  serviceId,
   title,
   description,
-  items,
-  className
+  className,
 }) => {
+  const categoryData = Services.find((s) => s.id === categoryId);
+  const subService = categoryData?.subServices.find((s) => s.id === serviceId);
+  const faqItems = subService?.faqItems || [];
+
+  if (faqItems.length === 0) {
+    return null;
+  }
+
   return (
     <div className={cn("flex flex-col gap-12", className)}>
       <div className="text-center max-w-2xl mx-auto">
@@ -34,15 +68,14 @@ const FAQSection: React.FC<FAQSectionProps> = ({
 
       <div className="max-w-3xl mx-auto w-full">
         <Accordion type="single" collapsible className="w-full">
-          {items.map((item, index) => (
-            <AccordionItem key={index} value={`item-${index}`}>
-              <AccordionTrigger className="text-left">
-                {item.question}
-              </AccordionTrigger>
-              <AccordionContent>
-                {item.answer}
-              </AccordionContent>
-            </AccordionItem>
+          {faqItems.map((item, index) => (
+            <FAQItem
+              key={item.key}
+              categoryId={categoryId}
+              serviceId={serviceId}
+              faqKey={item.key}
+              index={index}
+            />
           ))}
         </Accordion>
       </div>
diff --git a/apps/web/src/components/marketing/services/feature-section.tsx b/apps/web/src/components/marketing/services/feature-section.tsx
index a075846c3..a663e2514 100644
--- a/apps/web/src/components/marketing/services/feature-section.tsx
+++ b/apps/web/src/components/marketing/services/feature-section.tsx
@@ -1,15 +1,114 @@
+"use client";
+
 import React from 'react';
 import { cn } from "@/lib/utils";
-import { LucideIcon } from 'lucide-react';
+import { useTranslation } from "@onruntime/translations/react";
+import { ServiceFeature } from '@/types/service';
+import Services from '@/constants/services';
+
+interface FeatureItemProps {
+  categoryId: string;
+  serviceId: string;
+  feature: ServiceFeature;
+  type: 'features' | 'benefits' | 'complementary';
+  accentColor?: string;
+}
+
+const FeatureItem: React.FC<FeatureItemProps> = ({
+  categoryId,
+  serviceId,
+  feature,
+  type,
+  accentColor = "onruntime-blue"
+}) => {
+  const { t } = useTranslation(`constants/services/${categoryId}/${serviceId}`);
+  const FeatureIcon = feature.icon;
+
+  return (
+    <div className="flex gap-4">
+      {FeatureIcon && (
+        <div className={`p-2 rounded-md bg-${accentColor}/10 text-${accentColor} h-fit flex-shrink-0`}>
+          <FeatureIcon className="w-5 h-5" />
+        </div>
+      )}
+      <div>
+        <h3 className="font-medium text-foreground mb-2">{t(`${type}.${feature.key}.title`)}</h3>
+        <p className="text-sm text-muted-foreground">{t(`${type}.${feature.key}.description`)}</p>
+      </div>
+    </div>
+  );
+};
+
+interface FeatureCardProps {
+  categoryId: string;
+  serviceId: string;
+  feature: ServiceFeature;
+  type: 'features' | 'benefits' | 'complementary';
+  accentColor?: string;
+}
+
+const FeatureCard: React.FC<FeatureCardProps> = ({
+  categoryId,
+  serviceId,
+  feature,
+  type,
+  accentColor = "onruntime-blue"
+}) => {
+  const { t } = useTranslation(`constants/services/${categoryId}/${serviceId}`);
+  const FeatureIcon = feature.icon;
+
+  return (
+    <div className="p-6 rounded-lg border bg-card hover:border-onruntime-blue transition-colors">
+      {FeatureIcon && (
+        <div className={`p-3 rounded-md bg-${accentColor}/10 text-${accentColor} mb-4 w-fit`}>
+          <FeatureIcon className="w-5 h-5" />
+        </div>
+      )}
+      <h3 className="text-lg font-medium text-foreground mb-2">{t(`${type}.${feature.key}.title`)}</h3>
+      <p className="text-sm text-muted-foreground">{t(`${type}.${feature.key}.description`)}</p>
+    </div>
+  );
+};
+
+interface FeatureMinimalProps {
+  categoryId: string;
+  serviceId: string;
+  feature: ServiceFeature;
+  type: 'features' | 'benefits' | 'complementary';
+  accentColor?: string;
+}
+
+const FeatureMinimal: React.FC<FeatureMinimalProps> = ({
+  categoryId,
+  serviceId,
+  feature,
+  type,
+  accentColor = "onruntime-blue"
+}) => {
+  const { t } = useTranslation(`constants/services/${categoryId}/${serviceId}`);
+  const FeatureIcon = feature.icon;
+
+  return (
+    <div className="flex gap-4">
+      {FeatureIcon && (
+        <div className={`p-2 rounded-md bg-${accentColor}/10 text-${accentColor} h-fit flex-shrink-0`}>
+          <FeatureIcon className="w-5 h-5" />
+        </div>
+      )}
+      <div>
+        <h3 className="font-medium text-foreground mb-1">{t(`${type}.${feature.key}.title`)}</h3>
+        <p className="text-sm text-muted-foreground">{t(`${type}.${feature.key}.description`)}</p>
+      </div>
+    </div>
+  );
+};
 
 interface FeatureSectionProps {
+  categoryId: string;
+  serviceId: string;
   title: string;
   description: string;
-  features: {
-    title: string;
-    description: string;
-    icon?: LucideIcon;
-  }[];
+  type: 'features' | 'benefits' | 'complementary';
   reversed?: boolean;
   className?: string;
   accentColor?: string;
@@ -17,70 +116,78 @@ interface FeatureSectionProps {
 }
 
 const FeatureSection: React.FC<FeatureSectionProps> = ({
+  categoryId,
+  serviceId,
   title,
   description,
-  features,
+  type,
   reversed = false,
   className,
   accentColor = "onruntime-blue",
   variant = 'default'
 }) => {
+  // Look up features from Services constant
+  const categoryData = Services.find(s => s.id === categoryId);
+  const subService = categoryData?.subServices.find(s => s.id === serviceId);
+
+  const features = type === 'features'
+    ? subService?.features
+    : type === 'benefits'
+      ? subService?.benefits
+      : subService?.complementaryServices;
+
+  if (!features || features.length === 0) {
+    return null;
+  }
+
+  const firstFeatureIcon = features[0]?.icon;
+
   const renderFeatures = () => {
     switch (variant) {
       case 'cards':
         return (
           <div className="grid sm:grid-cols-2 gap-6">
             {features.map((feature, index) => (
-              <div
+              <FeatureCard
                 key={index}
-                className="p-6 rounded-lg border bg-card hover:border-onruntime-blue transition-colors"
-              >
-                {feature.icon && (
-                  <div className={`p-3 rounded-md bg-${accentColor}/10 text-${accentColor} mb-4 w-fit`}>
-                    <feature.icon className="w-5 h-5" />
-                  </div>
-                )}
-                <h3 className="text-lg font-medium text-foreground mb-2">{feature.title}</h3>
-                <p className="text-sm text-muted-foreground">{feature.description}</p>
-              </div>
+                categoryId={categoryId}
+                serviceId={serviceId}
+                feature={feature}
+                type={type}
+                accentColor={accentColor}
+              />
             ))}
           </div>
         );
-        
+
       case 'minimal':
         return (
           <div className="space-y-6">
             {features.map((feature, index) => (
-              <div key={index} className="flex gap-4">
-                {feature.icon && (
-                  <div className={`p-2 rounded-md bg-${accentColor}/10 text-${accentColor} h-fit flex-shrink-0`}>
-                    <feature.icon className="w-5 h-5" />
-                  </div>
-                )}
-                <div>
-                  <h3 className="font-medium text-foreground mb-1">{feature.title}</h3>
-                  <p className="text-sm text-muted-foreground">{feature.description}</p>
-                </div>
-              </div>
+              <FeatureMinimal
+                key={index}
+                categoryId={categoryId}
+                serviceId={serviceId}
+                feature={feature}
+                type={type}
+                accentColor={accentColor}
+              />
             ))}
           </div>
         );
-        
+
       default:
         return (
           <div className="grid gap-6">
             {features.map((feature, index) => (
-              <div key={index} className="flex gap-4">
-                {feature.icon && (
-                  <div className={`p-2 rounded-md bg-${accentColor}/10 text-${accentColor} h-fit flex-shrink-0`}>
-                    <feature.icon className="w-5 h-5" />
-                  </div>
-                )}
-                <div>
-                  <h3 className="font-medium text-foreground mb-2">{feature.title}</h3>
-                  <p className="text-sm text-muted-foreground">{feature.description}</p>
-                </div>
-              </div>
+              <FeatureItem
+                key={index}
+                categoryId={categoryId}
+                serviceId={serviceId}
+                feature={feature}
+                type={type}
+                accentColor={accentColor}
+              />
             ))}
           </div>
         );
@@ -105,8 +212,8 @@ const FeatureSection: React.FC<FeatureSectionProps> = ({
         </div>
 
         <div className="absolute inset-0 z-10 flex items-center justify-center">
-          {features[0]?.icon && React.createElement(
-            features[0].icon, 
+          {firstFeatureIcon && React.createElement(
+            firstFeatureIcon,
             { className: `w-32 h-32 text-${accentColor} opacity-10` }
           )}
         </div>
@@ -115,4 +222,4 @@ const FeatureSection: React.FC<FeatureSectionProps> = ({
   );
 };
 
-export default FeatureSection;
\ No newline at end of file
+export default FeatureSection;
diff --git a/apps/web/src/components/marketing/services/service-layout.tsx b/apps/web/src/components/marketing/services/service-layout.tsx
index 178533d49..1ddaf6561 100644
--- a/apps/web/src/components/marketing/services/service-layout.tsx
+++ b/apps/web/src/components/marketing/services/service-layout.tsx
@@ -1,22 +1,25 @@
+"use client";
+
 import React from 'react';
 import { Button } from "@/components/ui/button";
 import DotPattern from "@/components/ui/dot-pattern";
 import { cn } from "@/lib/utils";
 import { ArrowRight } from "lucide-react";
 import { Link } from "@onruntime/translations/next";
+import { useTranslation } from "@onruntime/translations/react";
 import Routes from "@/constants/routes";
 
 interface ServiceLayoutProps {
   title: string;
   description: string;
-  
+
   heroTitle: string;
   heroDescription: string;
-  
+
   accentColor?: string;
-  
+
   children: React.ReactNode;
-  
+
   className?: string;
 }
 
@@ -27,6 +30,7 @@ const ServiceLayout: React.FC<ServiceLayoutProps> = ({
   children,
   className
 }) => {
+  const { t } = useTranslation("components/marketing/services/service-layout");
 
   return (
     <>
@@ -38,14 +42,14 @@ const ServiceLayout: React.FC<ServiceLayoutProps> = ({
                 <h1 className="font-medium text-4xl md:text-5xl text-foreground">
                   {heroTitle}
                 </h1>
-                
+
                 <p className="text-muted-foreground text-lg">
                   {heroDescription}
                 </p>
 
                 <Link href={Routes.contact}>
                   <Button size="lg">
-                    Discuter de votre projet
+                    {t("hero.cta")}
                     <ArrowRight className="ml-2 w-5 h-5" />
                   </Button>
                 </Link>
@@ -55,38 +59,38 @@ const ServiceLayout: React.FC<ServiceLayoutProps> = ({
                 <div className={`absolute right-0 top-0 w-64 h-64 rounded-full bg-${accentColor}/5 backdrop-blur-sm border border-${accentColor}/10`}></div>
                 <div className={`absolute right-24 bottom-12 w-32 h-32 rounded-full bg-${accentColor}/10 backdrop-blur-sm border border-${accentColor}/20`}></div>
                 <div className={`absolute left-12 top-24 w-48 h-48 rounded-full bg-${accentColor}/8 backdrop-blur-sm border border-${accentColor}/15`}></div>
-                
+
                 <div className="z-10 grid grid-cols-2 gap-4 w-full max-w-md">
                   <div className="bg-background/80 backdrop-blur-sm p-4 rounded-lg border border-border shadow-sm transform rotate-2 hover:rotate-0 transition-transform">
                     <div className={`w-10 h-10 rounded-md bg-${accentColor}/10 flex items-center justify-center mb-3`}>
                       <ArrowRight className={`w-5 h-5 text-${accentColor}`} />
                     </div>
-                    <p className="text-sm font-medium">Solutions sur mesure</p>
-                    <p className="text-xs text-muted-foreground mt-1">Adaptées à vos besoins</p>
+                    <p className="text-sm font-medium">{t("cards.custom.title")}</p>
+                    <p className="text-xs text-muted-foreground mt-1">{t("cards.custom.description")}</p>
                   </div>
 
                   <div className="bg-background/80 backdrop-blur-sm p-4 rounded-lg border border-border shadow-sm transform -rotate-1 hover:rotate-0 transition-transform">
                     <div className={`w-10 h-10 rounded-md bg-${accentColor}/10 flex items-center justify-center mb-3`}>
                       <ArrowRight className={`w-5 h-5 text-${accentColor}`} />
                     </div>
-                    <p className="text-sm font-medium">Support expert</p>
-                    <p className="text-xs text-muted-foreground mt-1">Par nos spécialistes</p>
+                    <p className="text-sm font-medium">{t("cards.support.title")}</p>
+                    <p className="text-xs text-muted-foreground mt-1">{t("cards.support.description")}</p>
                   </div>
-                  
+
                   <div className="bg-background/80 backdrop-blur-sm p-4 rounded-lg border border-border shadow-sm transform -rotate-3 hover:rotate-0 transition-transform">
                     <div className={`w-10 h-10 rounded-md bg-${accentColor}/10 flex items-center justify-center mb-3`}>
                       <ArrowRight className={`w-5 h-5 text-${accentColor}`} />
                     </div>
-                    <p className="text-sm font-medium">Technologies modernes</p>
-                    <p className="text-xs text-muted-foreground mt-1">Toujours à jour</p>
+                    <p className="text-sm font-medium">{t("cards.technologies.title")}</p>
+                    <p className="text-xs text-muted-foreground mt-1">{t("cards.technologies.description")}</p>
                   </div>
-                  
+
                   <div className="bg-background/80 backdrop-blur-sm p-4 rounded-lg border border-border shadow-sm transform rotate-1 hover:rotate-0 transition-transform">
                     <div className={`w-10 h-10 rounded-md bg-${accentColor}/10 flex items-center justify-center mb-3`}>
                       <ArrowRight className={`w-5 h-5 text-${accentColor}`} />
                     </div>
-                    <p className="text-sm font-medium">Évolutivité garantie</p>
-                    <p className="text-xs text-muted-foreground mt-1">Pour votre croissance</p>
+                    <p className="text-sm font-medium">{t("cards.scalability.title")}</p>
+                    <p className="text-xs text-muted-foreground mt-1">{t("cards.scalability.description")}</p>
                   </div>
                 </div>
               </div>
@@ -114,14 +118,14 @@ const ServiceLayout: React.FC<ServiceLayoutProps> = ({
           <div className="mt-24 relative overflow-hidden rounded-xl border border-border bg-card p-12">
             <div className="relative z-10 max-w-2xl">
               <h2 className="text-3xl font-medium text-foreground mb-6">
-                Prêt à concrétiser votre projet ?
+                {t("cta.title")}
               </h2>
               <p className="text-muted-foreground mb-8">
-                Contactez-nous pour discuter de vos besoins et obtenir un devis personnalisé.
+                {t("cta.description")}
               </p>
               <Link href={Routes.contact}>
                 <Button size="lg">
-                  Commencer maintenant
+                  {t("cta.button")}
                   <ArrowRight className="ml-2 w-5 h-5" />
                 </Button>
               </Link>
@@ -137,4 +141,4 @@ const ServiceLayout: React.FC<ServiceLayoutProps> = ({
   );
 };
 
-export default ServiceLayout;
\ No newline at end of file
+export default ServiceLayout;
diff --git a/apps/web/src/components/marketing/services/service-overview.tsx b/apps/web/src/components/marketing/services/service-overview.tsx
index ec6c08c16..d8cd0dd56 100644
--- a/apps/web/src/components/marketing/services/service-overview.tsx
+++ b/apps/web/src/components/marketing/services/service-overview.tsx
@@ -1,46 +1,163 @@
+"use client";
+
 import React from 'react';
 import { Button } from "@/components/ui/button";
 import DotPattern from "@/components/ui/dot-pattern";
 import { cn } from "@/lib/utils";
 import { ArrowRight } from "lucide-react";
 import { Link } from "@onruntime/translations/next";
+import { useTranslation } from "@onruntime/translations/react";
 import Routes from "@/constants/routes";
-import { ServiceBenefit, ServiceCategoryData, ServiceProcessStep } from '@/types/service';
 import { Badge } from '@/components/ui/badge';
 import ProcessTimeline from './process-timeline';
+import { ServiceBenefit, SubService } from '@/types/service';
+import Services from '@/constants/services';
+
+interface BenefitItemProps {
+  categoryId: string;
+  benefit: ServiceBenefit;
+  accentColor?: string;
+}
+
+const BenefitItem: React.FC<BenefitItemProps> = ({ categoryId, benefit, accentColor = "onruntime-blue" }) => {
+  const { t } = useTranslation(`constants/services/${categoryId}`);
+  const BenefitIcon = benefit.icon;
+
+  return (
+    <div className="flex gap-4">
+      <div className={`p-2 rounded-md bg-${accentColor}/10 text-${accentColor} h-fit`}>
+        <BenefitIcon className="w-5 h-5" />
+      </div>
+      <div>
+        <h3 className="font-medium text-foreground mb-2">{t(`benefits.${benefit.key}.title`)}</h3>
+        <p className="text-sm text-muted-foreground">{t(`benefits.${benefit.key}.description`)}</p>
+      </div>
+    </div>
+  );
+};
+
+interface BenefitBadgeProps {
+  categoryId: string;
+  benefit: ServiceBenefit;
+  accentColor?: string;
+}
+
+const BenefitBadge: React.FC<BenefitBadgeProps> = ({ categoryId, benefit, accentColor = "onruntime-blue" }) => {
+  const { t } = useTranslation(`constants/services/${categoryId}`);
+  const BenefitIcon = benefit.icon;
+
+  return (
+    <div className="flex items-center gap-2">
+      <BenefitIcon className={`w-5 h-5 text-${accentColor}`} />
+      <span className="text-sm">{t(`benefits.${benefit.key}.title`)}</span>
+    </div>
+  );
+};
+
+interface SubServiceCardProps {
+  categoryId: string;
+  subService: SubService;
+  accentColor?: string;
+}
+
+const SubServiceCard: React.FC<SubServiceCardProps> = ({ categoryId, subService, accentColor = "onruntime-blue" }) => {
+  const { t } = useTranslation(`constants/services/${categoryId}/${subService.id}`);
+  const { t: tOverview } = useTranslation("components/marketing/services/service-overview");
+
+  return (
+    <Link href={subService.route} className="group">
+      <div className="h-full flex flex-col gap-6 p-6 rounded-lg border bg-card hover:border-onruntime-blue transition-colors">
+        <div className="flex items-center gap-4">
+          {subService.icon && (
+            <div className={`p-3 rounded-md bg-${accentColor}/10 text-${accentColor} group-hover:bg-${accentColor}/20 transition-colors`}>
+              <subService.icon className="w-6 h-6" />
+            </div>
+          )}
+          <div>
+            <h3 className="text-xl font-medium text-foreground mb-2">{t("name")}</h3>
+            <p className="text-sm text-muted-foreground">{t("description")}</p>
+          </div>
+        </div>
+        <div className="mt-auto pt-4 flex justify-between items-center border-t">
+          <span className="text-sm text-muted-foreground">{tOverview("services.learnMore")}</span>
+          <ArrowRight className={`w-4 h-4 text-muted-foreground group-hover:text-${accentColor} transition-colors`} />
+        </div>
+      </div>
+    </Link>
+  );
+};
+
+interface SubServiceBubbleProps {
+  categoryId: string;
+  subService: SubService;
+  accentColor?: string;
+  style: React.CSSProperties;
+}
+
+const SubServiceBubble: React.FC<SubServiceBubbleProps> = ({ categoryId, subService, accentColor = "onruntime-blue", style }) => {
+  const { t } = useTranslation(`constants/services/${categoryId}/${subService.id}`);
+
+  return (
+    <div
+      className="absolute bg-background/80 backdrop-blur-sm p-3 rounded-lg border border-border shadow-sm transform hover:scale-105 transition-transform"
+      style={style}
+    >
+      {subService.icon && React.createElement(
+        subService.icon,
+        { className: `w-5 h-5 text-${accentColor} mb-2` }
+      )}
+      <p className="text-xs font-medium truncate">{t("name")}</p>
+    </div>
+  );
+};
 
 interface ServiceOverviewPageProps {
-  service: ServiceCategoryData;
-  benefits: ServiceBenefit[];
-  processList: ServiceProcessStep[];
+  categoryId: string;
+  name: string;
+  description: string;
   accentColor?: string;
 }
 
 const ServiceOverviewPage: React.FC<ServiceOverviewPageProps> = ({
-  service,
-  benefits,
-  processList,
+  categoryId,
+  name,
+  description,
   accentColor = "onruntime-blue",
 }) => {
+  const { t } = useTranslation("components/marketing/services/service-overview");
+  const { t: tCategory } = useTranslation(`constants/services/${categoryId}`);
+
+  const categoryData = Services.find(s => s.id === categoryId);
+  const ServiceIcon = categoryData?.icon;
+  const benefits = categoryData?.benefits || [];
+  const processList = categoryData?.processList || [];
+  const subServices = categoryData?.subServices || [];
+
+  const translatedProcessList = processList.map((step) => ({
+    title: tCategory(`process.${step.key}.title`),
+    description: tCategory(`process.${step.key}.description`),
+    services: step.serviceKeys?.map((sk) => tCategory(`process.${step.key}.services.${sk}`)),
+  }));
+
   return (
     <main className="min-h-screen pt-32 pb-16 w-full">
       <div className="px-4 md:px-0 max-w-5xl mx-auto">
-        
+
         <div className="relative overflow-hidden rounded-xl border border-border bg-card mb-24">
           <div className="grid md:grid-cols-2 gap-6">
-            
+
             <div className="p-8 md:p-12 flex flex-col items-start gap-6 relative z-10">
               <h1 className="font-medium text-4xl md:text-5xl text-foreground">
-                {service.name}
+                {name}
               </h1>
-              
+
               <p className="text-muted-foreground text-lg">
-                {service.description}
+                {description}
               </p>
 
               <Link href={Routes.contact}>
                 <Button size="lg">
-                  Discuter de votre projet
+                  {t("hero.cta")}
                   <ArrowRight className="ml-2 w-5 h-5" />
                 </Button>
               </Link>
@@ -49,34 +166,27 @@ const ServiceOverviewPage: React.FC<ServiceOverviewPageProps> = ({
             <div className="relative hidden md:flex items-center justify-center p-8 overflow-hidden">
               <div className="relative z-10 w-full max-w-xs aspect-square">
                 <div className={`absolute inset-0 rounded-full bg-${accentColor}/5 backdrop-blur-sm border border-${accentColor}/10 flex items-center justify-center`}>
-                  {React.createElement(
-                    service.icon, 
-                    { className: `w-24 h-24 text-${accentColor} opacity-30` }
-                  )}
+                  {ServiceIcon && <ServiceIcon className={`w-24 h-24 text-${accentColor} opacity-30`} />}
                 </div>
-                
-                {service.subServices.slice(0, 4).map((subService, index) => {
-                  const angle = (index * (360 / Math.min(service.subServices.length, 4))) * (Math.PI / 180);
+
+                {subServices.slice(0, 4).map((subService, index) => {
+                  const angle = (index * (360 / Math.min(subServices.length, 4))) * (Math.PI / 180);
                   const radius = 130;
                   const leftPos = 50 + Math.cos(angle) * radius;
                   const topPos = 50 + Math.sin(angle) * radius;
-                  
+
                   return (
-                    <div 
+                    <SubServiceBubble
                       key={subService.id}
-                      className="absolute bg-background/80 backdrop-blur-sm p-3 rounded-lg border border-border shadow-sm transform hover:scale-105 transition-transform"
-                      style={{ 
-                        left: `calc(${leftPos}% - 60px)`, 
+                      categoryId={categoryId}
+                      subService={subService}
+                      accentColor={accentColor}
+                      style={{
+                        left: `calc(${leftPos}% - 60px)`,
                         top: `calc(${topPos}% - 30px)`,
                         maxWidth: '120px'
                       }}
-                    >
-                      {subService.icon && React.createElement(
-                        subService.icon, 
-                        { className: `w-5 h-5 text-${accentColor} mb-2` }
-                      )}
-                      <p className="text-xs font-medium truncate">{subService.name}</p>
-                    </div>
+                    />
                   );
                 })}
               </div>
@@ -101,75 +211,54 @@ const ServiceOverviewPage: React.FC<ServiceOverviewPageProps> = ({
         <div className="flex flex-col md:flex-row gap-12 items-center mb-24">
           <div className="flex-1 space-y-6">
             <h2 className="text-3xl font-medium text-foreground">
-              Une expertise pointue en {service.name.charAt(0).toLowerCase() + service.name.slice(1)}
+              {t("expertise.title", { service: name })}
             </h2>
             <p className="text-muted-foreground">
-              Nous combinons créativité et expertise technique pour offrir des solutions {service.name.charAt(0).toLowerCase() + service.name.slice(1)} qui répondent parfaitement à vos objectifs. Notre approche méthodique et notre expérience nous permettent de créer des solutions durables et évolutives.
+              {t("expertise.description", { service: name })}
             </p>
             <div className="flex flex-wrap gap-4">
               {benefits.slice(0, 3).map((benefit, index) => (
-                <div key={index} className="flex items-center gap-2">
-                  {React.createElement(
-                    benefit.icon, 
-                    { className: `w-5 h-5 text-${accentColor}` }
-                  )}
-                  <span className="text-sm">{benefit.title}</span>
-                </div>
+                <BenefitBadge
+                  key={index}
+                  categoryId={categoryId}
+                  benefit={benefit}
+                  accentColor={accentColor}
+                />
               ))}
             </div>
           </div>
-          
+
           <div className="flex-1 relative w-full aspect-video rounded-xl border border-border bg-card overflow-hidden">
             <div className={`absolute inset-0 z-0 opacity-20 overflow-hidden`}>
               <div className={`absolute -right-20 -top-20 w-[300px] h-[300px] rounded-full bg-${accentColor} blur-3xl`}></div>
               <div className={`absolute -left-20 -bottom-20 w-[250px] h-[250px] rounded-full bg-${accentColor} blur-3xl`}></div>
             </div>
-            
+
             <div className="absolute inset-0 z-10 flex items-center justify-center">
-              {React.createElement(
-                service.icon, 
-                { className: `w-32 h-32 text-${accentColor} opacity-10` }
-              )}
+              {ServiceIcon && <ServiceIcon className={`w-32 h-32 text-${accentColor} opacity-10`} />}
             </div>
           </div>
         </div>
 
         <div className="relative mb-24">
           <div className="text-center mb-12">
-            <Badge className="mb-4">Nos services</Badge>
+            <Badge className="mb-4">{t("services.badge")}</Badge>
             <h2 className="text-3xl font-medium text-foreground mb-4">
-              Solutions {service.name.charAt(0).toLowerCase() + service.name.slice(1)} sur mesure
+              {t("services.title", { service: name })}
             </h2>
             <p className="text-muted-foreground max-w-2xl mx-auto">
-              Découvrez notre gamme complète de services {service.name.charAt(0).toLowerCase() + service.name.slice(1)}, conçue pour répondre à tous vos besoins et vous accompagner dans la réalisation de vos projets.
+              {t("services.description", { service: name })}
             </p>
           </div>
 
           <div className="grid md:grid-cols-2 gap-8">
-            {service.subServices.map((subService) => (
-              <Link 
+            {subServices.map((subService) => (
+              <SubServiceCard
                 key={subService.id}
-                href={subService.route}
-                className="group"
-              >
-                <div className="h-full flex flex-col gap-6 p-6 rounded-lg border bg-card hover:border-onruntime-blue transition-colors">
-                  <div className="flex items-center gap-4">
-                    {subService.icon && (
-                      <div className={`p-3 rounded-md bg-${accentColor}/10 text-${accentColor} group-hover:bg-${accentColor}/20 transition-colors`}>
-                        <subService.icon className="w-6 h-6" />
-                      </div>
-                    )}
-                    <div>
-                      <h3 className="text-xl font-medium text-foreground mb-2">{subService.name}</h3>
-                      <p className="text-sm text-muted-foreground">{subService.description}</p>
-                    </div>
-                  </div>
-                  <div className="mt-auto pt-4 flex justify-between items-center border-t">
-                    <span className="text-sm text-muted-foreground">En savoir plus</span>
-                    <ArrowRight className={`w-4 h-4 text-muted-foreground group-hover:text-${accentColor} transition-colors`} />
-                  </div>
-                </div>
-              </Link>
+                categoryId={categoryId}
+                subService={subService}
+                accentColor={accentColor}
+              />
             ))}
           </div>
 
@@ -183,73 +272,72 @@ const ServiceOverviewPage: React.FC<ServiceOverviewPageProps> = ({
           />
         </div>
 
-        <div className="grid md:grid-cols-2 gap-12 items-center mb-24">
-          <div>
-            <Badge className="mb-4">Avantages</Badge>
-            <h2 className="text-3xl font-medium text-foreground mb-6">
-              Pourquoi choisir nos services {service.name.charAt(0).toLowerCase() + service.name.slice(1)} ?
-            </h2>
-            <div className="space-y-6">
-              {benefits.map((benefit, i) => (
-                <div key={i} className="flex gap-4">
-                  <div className={`p-2 rounded-md bg-${accentColor}/10 text-${accentColor} h-fit`}>
-                    <benefit.icon className="w-5 h-5" />
-                  </div>
-                  <div>
-                    <h3 className="font-medium text-foreground mb-2">{benefit.title}</h3>
-                    <p className="text-sm text-muted-foreground">{benefit.description}</p>
-                  </div>
-                </div>
-              ))}
-            </div>
-          </div>
-          
-          <div className="relative aspect-square rounded-xl border border-border bg-card overflow-hidden">
-            <div className={`absolute inset-0 z-0 opacity-20 overflow-hidden`}>
-              <div className={`absolute -left-20 -top-20 w-[300px] h-[300px] rounded-full bg-${accentColor} blur-3xl`}></div>
-              <div className={`absolute -right-20 -bottom-20 w-[250px] h-[250px] rounded-full bg-${accentColor} blur-3xl`}></div>
+        {benefits.length > 0 && (
+          <div className="grid md:grid-cols-2 gap-12 items-center mb-24">
+            <div>
+              <Badge className="mb-4">{t("benefits.badge")}</Badge>
+              <h2 className="text-3xl font-medium text-foreground mb-6">
+                {t("benefits.title", { service: name })}
+              </h2>
+              <div className="space-y-6">
+                {benefits.map((benefit, i) => (
+                  <BenefitItem
+                    key={i}
+                    categoryId={categoryId}
+                    benefit={benefit}
+                    accentColor={accentColor}
+                  />
+                ))}
+              </div>
             </div>
-            
-            <div className="absolute inset-0 z-10 grid grid-cols-2 grid-rows-2 p-12">
-              {benefits.slice(0, 4).map((benefit, index) => (
-                <div key={index} className="flex items-center justify-center">
-                  {React.createElement(
-                    benefit.icon, 
-                    { className: `w-20 h-20 text-${accentColor} opacity-10` }
-                  )}
-                </div>
-              ))}
+
+            <div className="relative aspect-square rounded-xl border border-border bg-card overflow-hidden">
+              <div className={`absolute inset-0 z-0 opacity-20 overflow-hidden`}>
+                <div className={`absolute -left-20 -top-20 w-[300px] h-[300px] rounded-full bg-${accentColor} blur-3xl`}></div>
+                <div className={`absolute -right-20 -bottom-20 w-[250px] h-[250px] rounded-full bg-${accentColor} blur-3xl`}></div>
+              </div>
+
+              <div className="absolute inset-0 z-10 grid grid-cols-2 grid-rows-2 p-12">
+                {benefits.slice(0, 4).map((benefit, index) => (
+                  <div key={index} className="flex items-center justify-center">
+                    {React.createElement(
+                      benefit.icon,
+                      { className: `w-20 h-20 text-${accentColor} opacity-10` }
+                    )}
+                  </div>
+                ))}
+              </div>
             </div>
           </div>
-        </div>
+        )}
 
         {processList && processList.length > 0 && (
           <div className="mb-24">
             <div className="text-center mb-12">
-              <Badge className="mb-4">Notre processus</Badge>
+              <Badge className="mb-4">{t("process.badge")}</Badge>
               <h2 className="text-3xl font-medium text-foreground mb-4">
-                Comment nous travaillons
+                {t("process.title")}
               </h2>
               <p className="text-muted-foreground max-w-2xl mx-auto">
-                Une approche intégrée qui combine nos différentes expertises pour un résultat optimal.
+                {t("process.description")}
               </p>
             </div>
 
-            <ProcessTimeline steps={processList} />
+            <ProcessTimeline steps={translatedProcessList} />
           </div>
         )}
 
         <div className="relative overflow-hidden rounded-xl border border-border bg-card p-12">
           <div className="relative z-10 max-w-2xl">
             <h2 className="text-3xl font-medium text-foreground mb-6">
-              Prêt à concrétiser votre projet ?
+              {t("cta.title")}
             </h2>
             <p className="text-muted-foreground mb-8">
-              Contactez-nous pour discuter de vos besoins et obtenir un devis personnalisé.
+              {t("cta.description")}
             </p>
             <Link href={Routes.contact}>
               <Button size="lg">
-                Commencer maintenant
+                {t("cta.button")}
                 <ArrowRight className="ml-2 w-5 h-5" />
               </Button>
             </Link>
@@ -273,4 +361,4 @@ const ServiceOverviewPage: React.FC<ServiceOverviewPageProps> = ({
   );
 };
 
-export default ServiceOverviewPage;
\ No newline at end of file
+export default ServiceOverviewPage;
diff --git a/apps/web/src/components/marketing/services/testimonials-section.tsx b/apps/web/src/components/marketing/services/testimonials-section.tsx
index b28af7b39..40f74bfd2 100644
--- a/apps/web/src/components/marketing/services/testimonials-section.tsx
+++ b/apps/web/src/components/marketing/services/testimonials-section.tsx
@@ -1,31 +1,78 @@
+"use client";
+
 import React from 'react';
 import Image from 'next/image';
 import { cn } from "@/lib/utils";
 import { Quote } from 'lucide-react';
+import { useTranslation } from "@onruntime/translations/react";
+import { ServiceTestimonial } from '@/types/service';
+import Services from '@/constants/services';
 
-interface Testimonial {
-  content: string;
-  author: {
-    name: string;
-    role: string;
-    company: string;
-    image: string;
-  };
+interface TestimonialCardProps {
+  categoryId: string;
+  serviceId: string;
+  testimonial: ServiceTestimonial;
 }
 
+const TestimonialCard: React.FC<TestimonialCardProps> = ({
+  categoryId,
+  serviceId,
+  testimonial
+}) => {
+  const { t } = useTranslation(`constants/services/${categoryId}/${serviceId}`);
+
+  return (
+    <div className="flex flex-col gap-6 p-6 rounded-lg border bg-card">
+      <Quote className="w-8 h-8 text-onruntime-blue" />
+
+      <p className="flex-1 text-foreground italic">
+        &quot;{t(`testimonials.${testimonial.key}.content`)}&quot;
+      </p>
+
+      <div className="flex items-center gap-4">
+        <div className="relative w-12 h-12 rounded-full overflow-hidden">
+          <Image
+            src={testimonial.author.image}
+            alt={testimonial.author.name}
+            fill
+            className="object-cover"
+          />
+        </div>
+        <div>
+          <p className="font-medium text-foreground">{testimonial.author.name}</p>
+          <p className="text-sm text-muted-foreground">
+            {testimonial.author.role}, {testimonial.author.company}
+          </p>
+        </div>
+      </div>
+    </div>
+  );
+};
+
 interface TestimonialsSectionProps {
+  categoryId: string;
+  serviceId: string;
   title: string;
   description: string;
-  testimonials: Testimonial[];
   className?: string;
 }
 
 const TestimonialsSection: React.FC<TestimonialsSectionProps> = ({
+  categoryId,
+  serviceId,
   title,
   description,
-  testimonials,
   className
 }) => {
+  // Look up testimonials from Services constant
+  const categoryData = Services.find(s => s.id === categoryId);
+  const subService = categoryData?.subServices.find(s => s.id === serviceId);
+  const testimonials = subService?.testimonials;
+
+  if (!testimonials || testimonials.length === 0) {
+    return null;
+  }
+
   return (
     <div className={cn("flex flex-col gap-12", className)}>
       <div className="text-center max-w-2xl mx-auto">
@@ -35,37 +82,16 @@ const TestimonialsSection: React.FC<TestimonialsSectionProps> = ({
 
       <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
         {testimonials.map((testimonial, index) => (
-          <div 
+          <TestimonialCard
             key={index}
-            className="flex flex-col gap-6 p-6 rounded-lg border bg-card"
-          >
-            <Quote className="w-8 h-8 text-onruntime-blue" />
-            
-            <p className="flex-1 text-foreground italic">
-              &quot;{testimonial.content}&quot;
-            </p>
-
-            <div className="flex items-center gap-4">
-              <div className="relative w-12 h-12 rounded-full overflow-hidden">
-                <Image
-                  src={testimonial.author.image}
-                  alt={testimonial.author.name}
-                  fill
-                  className="object-cover"
-                />
-              </div>
-              <div>
-                <p className="font-medium text-foreground">{testimonial.author.name}</p>
-                <p className="text-sm text-muted-foreground">
-                  {testimonial.author.role}, {testimonial.author.company}
-                </p>
-              </div>
-            </div>
-          </div>
+            categoryId={categoryId}
+            serviceId={serviceId}
+            testimonial={testimonial}
+          />
         ))}
       </div>
     </div>
   );
 };
 
-export default TestimonialsSection;
\ No newline at end of file
+export default TestimonialsSection;
diff --git a/apps/web/src/constants/services/backend.ts b/apps/web/src/constants/services/backend.ts
index 14305b2ec..ac1add4e6 100644
--- a/apps/web/src/constants/services/backend.ts
+++ b/apps/web/src/constants/services/backend.ts
@@ -1,8 +1,8 @@
-import { 
-  Server, 
-  Database, 
-  Shield, 
-  Scale, 
+import {
+  Server,
+  Database,
+  Shield,
+  Scale,
   Cloud,
   Code,
   FileJson,
@@ -29,541 +29,189 @@ import {
   Command,
   Search,
   Share2,
-  History
+  History,
 } from "lucide-react";
-import { ServiceBenefit, ServiceCategoryData, ServiceCategory, ServiceProcessStep } from "@/types/service";
+import {
+  ServiceBenefit,
+  ServiceCategoryData,
+  ServiceCategory,
+  ServiceProcessStep,
+} from "@/types/service";
 import Routes from "@/constants/routes";
 
 const backendBenefits: ServiceBenefit[] = [
-  {
-    title: "Architecture scalable",
-    description: "Systèmes conçus pour évoluer avec votre croissance, utilisant des architectures modernes et distribuées.",
-    icon: Scale
-  },
-  {
-    title: "Base de données optimisée",
-    description: "Conception et optimisation des bases de données pour des performances maximales et une intégrité des données.",
-    icon: Database
-  },
-  {
-    title: "Infrastructure robuste",
-    description: "Déploiement sur des infrastructures cloud modernes avec haute disponibilité et résilience.",
-    icon: Server
-  },
-  {
-    title: "Sécurité avancée",
-    description: "Implémentation des meilleures pratiques de sécurité et de protection des données sensibles.",
-    icon: Shield
-  }
+  { key: "scalable-architecture", icon: Scale },
+  { key: "optimized-database", icon: Database },
+  { key: "robust-infrastructure", icon: Server },
+  { key: "advanced-security", icon: Shield },
 ];
 
 const backendProcessList: ServiceProcessStep[] = [
-  {
-    title: "Analyse des besoins",
-    description: "Étude approfondie des besoins techniques, définition de l'architecture et des choix technologiques.",
-    services: ["Architecture", "Conseil technique"]
-  },
-  {
-    title: "Conception système",
-    description: "Design de l'architecture backend, modélisation des données et définition des APIs.",
-    services: ["Architecture", "Database Design"]
-  },
-  {
-    title: "Développement API",
-    description: "Implémentation des APIs RESTful ou GraphQL avec documentation complète.",
-    services: ["API Development", "Documentation"]
-  },
-  {
-    title: "Base de données",
-    description: "Mise en place et optimisation des bases de données avec focus sur la performance et la scalabilité.",
-    services: ["Database", "Optimisation"]
-  },
-  {
-    title: "Tests et sécurité",
-    description: "Implémentation des tests automatisés et des mesures de sécurité avancées.",
-    services: ["Tests", "Security"]
-  },
-  {
-    title: "Déploiement et monitoring",
-    description: "Mise en place de l'infrastructure cloud, du monitoring et des alertes.",
-    services: ["DevOps", "Monitoring"]
-  }
+  { key: "needs-analysis" },
+  { key: "system-design" },
+  { key: "api-development" },
+  { key: "database" },
+  { key: "testing-security" },
+  { key: "deployment-monitoring" },
 ];
 
 const backendCategory: ServiceCategoryData = {
   id: ServiceCategory.BACKEND,
-  name: "Développement Back-end",
-  description: "Architecture et développement de solutions robustes",
   icon: Server,
   benefits: backendBenefits,
   processList: backendProcessList,
   subServices: [
     {
       id: "api",
-      name: "APIs RESTful",
-      description: "Conception et développement d'APIs performantes",
       route: Routes.service.backend.api,
       icon: Code,
-      heroTitle: "APIs RESTful & GraphQL",
-      heroDescription: "Développez des APIs modernes, sécurisées et performantes pour vos applications. Notre expertise vous garantit des interfaces robustes et évolutives qui répondent à vos besoins spécifiques.",
       features: [
-        {
-          title: "REST & GraphQL",
-          description: "Développement d'APIs modernes avec les standards de l'industrie.",
-          icon: Code
-        },
-        {
-          title: "Sécurité avancée",
-          description: "Protection robuste contre les vulnérabilités et les attaques.",
-          icon: Shield
-        },
-        {
-          title: "Performance optimale",
-          description: "Architecture optimisée pour des temps de réponse minimaux.",
-          icon: Zap
-        },
-        {
-          title: "Documentation complète",
-          description: "Documentation claire et interactive pour une intégration facile.",
-          icon: FileJson
-        }
+        { key: "rest-graphql", icon: Code },
+        { key: "advanced-security", icon: Shield },
+        { key: "optimal-performance", icon: Zap },
+        { key: "complete-documentation", icon: FileJson },
       ],
       benefits: [
-        {
-          title: "Haute disponibilité",
-          description: "Infrastructure redondante pour une disponibilité maximale.",
-          icon: Cloud
-        },
-        {
-          title: "Scalabilité",
-          description: "Architecture conçue pour supporter la croissance.",
-          icon: GitBranch
-        },
-        {
-          title: "Monitoring avancé",
-          description: "Suivi en temps réel des performances et de la santé.",
-          icon: LineChart
-        },
-        {
-          title: "Cache intelligent",
-          description: "Optimisation des performances avec mise en cache avancée.",
-          icon: Zap
-        }
+        { key: "high-availability", icon: Cloud },
+        { key: "scalability", icon: GitBranch },
+        { key: "advanced-monitoring", icon: LineChart },
+        { key: "intelligent-cache", icon: Zap },
       ],
       faqItems: [
-        {
-          question: "Quelle est la différence entre REST et GraphQL ?",
-          answer: "REST est une architecture traditionnelle où chaque endpoint correspond à une ressource spécifique, tandis que GraphQL permet aux clients de demander exactement les données dont ils ont besoin. Nous vous conseillons la meilleure approche selon vos besoins spécifiques et vos cas d'usage."
-        },
-        {
-          question: "Comment assurez-vous la sécurité des APIs ?",
-          answer: "Nous implémentons plusieurs niveaux de sécurité : authentification JWT, chiffrement SSL/TLS, rate limiting, validation des données, protection contre les injections et les attaques CSRF. Nous suivons également les recommandations OWASP pour la sécurité des APIs."
-        },
-        {
-          question: "Comment gérez-vous la montée en charge ?",
-          answer: "Nous concevons des APIs scalables horizontalement, avec load balancing, mise en cache distribuée, et optimisation des requêtes. L'architecture est pensée pour supporter une croissance importante du trafic."
-        },
-        {
-          question: "Quelle documentation fournissez-vous ?",
-          answer: "Nous fournissons une documentation complète : documentation technique OpenAPI/Swagger, guides d'intégration, exemples de code, et environnement de test. La documentation est maintenue à jour avec chaque évolution de l'API."
-        },
-        {
-          question: "Proposez-vous un support après le déploiement ?",
-          answer: "Oui, nous proposons plusieurs formules de maintenance incluant : monitoring 24/7, support technique, optimisation continue des performances, mises à jour de sécurité et évolutions fonctionnelles."
-        }
+        { key: "rest-vs-graphql" },
+        { key: "api-security" },
+        { key: "scaling" },
+        { key: "documentation" },
+        { key: "post-deployment-support" },
       ],
       testimonials: [],
       complementaryServices: [
-        {
-          title: "Analytics avancés",
-          description: "Analyse détaillée de l'utilisation et des performances.",
-          icon: BarChart
-        },
-        {
-          title: "Migration de données",
-          description: "Migration depuis vos systèmes existants.",
-          icon: Database
-        },
-        {
-          title: "Intégration",
-          description: "Support pour l'intégration avec vos applications.",
-          icon: Layers
-        }
-      ]
+        { key: "advanced-analytics", icon: BarChart },
+        { key: "data-migration", icon: Database },
+        { key: "integration", icon: Layers },
+      ],
     },
     {
       id: "database",
-      name: "Bases de données",
-      description: "Architecture et optimisation de bases de données",
       route: Routes.service.backend.database,
       icon: Database,
-      heroTitle: "Architecture de Bases de Données",
-      heroDescription: "Concevez et optimisez vos bases de données pour des performances optimales et une scalabilité maximale. Notre expertise vous garantit une architecture robuste qui répond à vos besoins actuels et futurs.",
       features: [
-        {
-          title: "Architecture optimisée",
-          description: "Conception intelligente des schémas et des relations pour des performances optimales.",
-          icon: Database
-        },
-        {
-          title: "Sécurité renforcée",
-          description: "Protection robuste des données sensibles et conformité aux normes.",
-          icon: Shield
-        },
-        {
-          title: "Haute performance",
-          description: "Optimisation des requêtes et des index pour des temps de réponse minimaux.",
-          icon: Zap
-        },
-        {
-          title: "Backup & Recovery",
-          description: "Stratégies de sauvegarde et de restauration fiables.",
-          icon: History
-        }
+        { key: "optimized-architecture", icon: Database },
+        { key: "enhanced-security", icon: Shield },
+        { key: "high-performance", icon: Zap },
+        { key: "backup-recovery", icon: History },
       ],
       benefits: [
-        {
-          title: "Scalabilité horizontale",
-          description: "Architecture conçue pour la croissance et la montée en charge.",
-          icon: GitBranch
-        },
-        {
-          title: "Réplication",
-          description: "Haute disponibilité et répartition géographique des données.",
-          icon: Share2
-        },
-        {
-          title: "Monitoring avancé",
-          description: "Suivi en temps réel des performances et de la santé.",
-          icon: LineChart
-        },
-        {
-          title: "Recherche optimisée",
-          description: "Indexation intelligente pour des recherches rapides.",
-          icon: Search
-        }
+        { key: "horizontal-scalability", icon: GitBranch },
+        { key: "replication", icon: Share2 },
+        { key: "advanced-monitoring", icon: LineChart },
+        { key: "optimized-search", icon: Search },
       ],
       faqItems: [
-        {
-          question: "Comment choisir entre SQL et NoSQL ?",
-          answer: "Le choix dépend de vos besoins spécifiques. Les bases SQL sont idéales pour les données structurées avec des relations complexes, tandis que NoSQL excelle dans la gestion de données non structurées et la scalabilité horizontale. Nous vous guidons vers la meilleure solution selon vos cas d'usage."
-        },
-        {
-          question: "Comment gérez-vous la sécurité des données ?",
-          answer: "Nous implémentons plusieurs niveaux de sécurité : chiffrement des données sensibles, contrôle d'accès granulaire, audit des accès, backups réguliers, et conformité aux normes de sécurité (RGPD, etc.). Nous effectuons également des tests de sécurité réguliers."
-        },
-        {
-          question: "Comment optimisez-vous les performances ?",
-          answer: "Nous utilisons plusieurs techniques : optimisation des schémas et des requêtes, indexation intelligente, mise en cache, partitionnement des données, et monitoring continu. Nous analysons régulièrement les performances pour identifier les opportunités d'optimisation."
-        },
-        {
-          question: "Proposez-vous des services de migration ?",
-          answer: "Oui, nous gérons les migrations de bases de données de bout en bout : analyse de l'existant, planification, tests, migration des données avec minimum d'interruption, et validation post-migration. Nous assurons la cohérence et l'intégrité des données."
-        },
-        {
-          question: "Comment assurez-vous la disponibilité des données ?",
-          answer: "Nous mettons en place des architectures hautement disponibles avec réplication, clustering, et plans de reprise d'activité. Nous effectuons des sauvegardes régulières et testons les procédures de restauration."
-        }
+        { key: "sql-vs-nosql" },
+        { key: "data-security" },
+        { key: "performance-optimization" },
+        { key: "migration-services" },
+        { key: "data-availability" },
       ],
       testimonials: [],
       complementaryServices: [
-        {
-          title: "Migration de données",
-          description: "Transfer sécurisé depuis vos systèmes existants.",
-          icon: Cloud
-        },
-        {
-          title: "Audit & Optimisation",
-          description: "Analyse des performances et recommandations.",
-          icon: BarChart
-        },
-        {
-          title: "Monitoring 24/7",
-          description: "Surveillance continue et alertes en temps réel.",
-          icon: Timer
-        }
-      ]
+        { key: "data-migration", icon: Cloud },
+        { key: "audit-optimization", icon: BarChart },
+        { key: "monitoring-24-7", icon: Timer },
+      ],
     },
     {
       id: "bots",
-      name: "Bots Discord/Slack",
-      description: "Développement de bots et d'automatisations",
       route: Routes.service.backend.bots,
       icon: Bot,
-      heroTitle: "Bots & Automatisations",
-      heroDescription: "Développez des bots intelligents et des automatisations pour améliorer l'engagement et la productivité de votre communauté. Notre expertise vous garantit des bots fiables et performants pour Discord, Slack et autres plateformes.",
       features: [
-        {
-          title: "Discord & Slack",
-          description: "Bots personnalisés pour les principales plateformes de communication.",
-          icon: MessageSquare
-        },
-        {
-          title: "Commandes avancées",
-          description: "Interface intuitive avec commandes personnalisables.",
-          icon: Command
-        },
-        {
-          title: "Performance optimale",
-          description: "Architecture optimisée pour une réactivité maximale.",
-          icon: Zap
-        },
-        {
-          title: "Intégrations",
-          description: "Connection avec vos outils et services existants.",
-          icon: Settings
-        }
+        { key: "discord-slack", icon: MessageSquare },
+        { key: "advanced-commands", icon: Command },
+        { key: "optimal-performance", icon: Zap },
+        { key: "integrations", icon: Settings },
       ],
       benefits: [
-        {
-          title: "Modération intelligente",
-          description: "Gestion automatisée de votre communauté et modération.",
-          icon: Shield
-        },
-        {
-          title: "Notifications",
-          description: "Alertes personnalisées et mises à jour automatiques.",
-          icon: Bell
-        },
-        {
-          title: "Engagement",
-          description: "Fonctionnalités interactives pour animer votre communauté.",
-          icon: Users
-        },
-        {
-          title: "Statistiques",
-          description: "Suivi détaillé de l'activité et des interactions.",
-          icon: LineChart
-        }
+        { key: "intelligent-moderation", icon: Shield },
+        { key: "notifications", icon: Bell },
+        { key: "engagement", icon: Users },
+        { key: "statistics", icon: LineChart },
       ],
       faqItems: [
-        {
-          question: "Quels types de bots pouvez-vous développer ?",
-          answer: "Nous développons des bots pour diverses plateformes (Discord, Slack, Telegram) avec différentes fonctionnalités : modération, support client, automatisation de tâches, statistiques, jeux et animations communautaires. Chaque bot est personnalisé selon vos besoins spécifiques."
-        },
-        {
-          question: "Comment assurez-vous la fiabilité des bots ?",
-          answer: "Nous implémentons plusieurs mécanismes : monitoring 24/7, redémarrage automatique en cas de problème, logs détaillés, et alertes en temps réel. Nous effectuons également des tests approfondis avant chaque déploiement."
-        },
-        {
-          question: "Peut-on personnaliser les commandes et fonctionnalités ?",
-          answer: "Oui, tous nos bots sont entièrement personnalisables : commandes, réponses, permissions, intégrations. Nous adaptons chaque fonctionnalité à vos besoins et votre charte de modération."
-        },
-        {
-          question: "Comment gérez-vous la sécurité ?",
-          answer: "La sécurité est une priorité : authentification sécurisée, permissions granulaires, validation des entrées, protection contre le spam et les abus. Nous suivons les meilleures pratiques de chaque plateforme."
-        },
-        {
-          question: "Proposez-vous un support après le déploiement ?",
-          answer: "Oui, nous proposons plusieurs formules de maintenance incluant : surveillance 24/7, mises à jour régulières, support technique, et évolutions fonctionnelles selon vos besoins."
-        }
+        { key: "bot-types" },
+        { key: "bot-reliability" },
+        { key: "customization" },
+        { key: "security" },
+        { key: "post-deployment-support" },
       ],
       testimonials: [],
       complementaryServices: [
-        {
-          title: "Analytics",
-          description: "Suivi détaillé de l'utilisation et des interactions.",
-          icon: BarChart
-        },
-        {
-          title: "Support 24/7",
-          description: "Surveillance continue et intervention rapide.",
-          icon: Clock
-        },
-        {
-          title: "Évolutions",
-          description: "Ajout régulier de nouvelles fonctionnalités.",
-          icon: Heart
-        }
-      ]
+        { key: "analytics", icon: BarChart },
+        { key: "support-24-7", icon: Clock },
+        { key: "evolutions", icon: Heart },
+      ],
     },
     {
       id: "microservices",
-      name: "Microservices",
-      description: "Architecture et développement de microservices",
       route: Routes.service.backend.microservices,
       icon: Box,
-      heroTitle: "Architecture Microservices",
-      heroDescription: "Transformez vos applications monolithiques en architectures microservices modernes et scalables. Notre expertise vous garantit une infrastructure flexible, résiliente et performante.",
       features: [
-        {
-          title: "Architecture évolutive",
-          description: "Conception modulaire pour une scalabilité optimale.",
-          icon: Boxes
-        },
-        {
-          title: "Déploiement continu",
-          description: "Pipeline CI/CD pour des mises à jour fluides.",
-          icon: GitBranch
-        },
-        {
-          title: "Performance optimale",
-          description: "Services indépendants pour une meilleure réactivité.",
-          icon: Zap
-        },
-        {
-          title: "Haute disponibilité",
-          description: "Architecture résiliente avec redondance.",
-          icon: Shield
-        }
+        { key: "scalable-architecture", icon: Boxes },
+        { key: "continuous-deployment", icon: GitBranch },
+        { key: "optimal-performance", icon: Zap },
+        { key: "high-availability", icon: Shield },
       ],
       benefits: [
-        {
-          title: "Scalabilité granulaire",
-          description: "Mise à l'échelle indépendante de chaque service.",
-          icon: Scale
-        },
-        {
-          title: "Déploiement flexible",
-          description: "Mises à jour sans interruption de service.",
-          icon: Cloud
-        },
-        {
-          title: "Isolation des pannes",
-          description: "Résilience accrue grâce à l'isolation des services.",
-          icon: CircuitBoard
-        },
-        {
-          title: "Monitoring avancé",
-          description: "Surveillance détaillée de chaque composant.",
-          icon: LineChart
-        }
+        { key: "granular-scalability", icon: Scale },
+        { key: "flexible-deployment", icon: Cloud },
+        { key: "fault-isolation", icon: CircuitBoard },
+        { key: "advanced-monitoring", icon: LineChart },
       ],
       faqItems: [
-        {
-          question: "Quand adopter une architecture microservices ?",
-          answer: "L'architecture microservices est particulièrement adaptée aux applications complexes nécessitant une grande scalabilité, une mise à l'échelle indépendante des composants, et une évolution rapide. Nous évaluons avec vous si cette architecture correspond à vos besoins spécifiques."
-        },
-        {
-          question: "Comment gérez-vous la communication entre services ?",
-          answer: "Nous implémentons des patterns de communication robustes : API Gateway, message brokers (Kafka, RabbitMQ), communication synchrone (REST, gRPC) et asynchrone. Chaque méthode est choisie selon les besoins spécifiques de performance et de fiabilité."
-        },
-        {
-          question: "Comment assurez-vous la cohérence des données ?",
-          answer: "Nous utilisons plusieurs stratégies : Saga pattern pour les transactions distribuées, Event Sourcing pour la traçabilité, et CQRS pour la séparation des opérations de lecture et d'écriture. La cohérence éventuelle est gérée de manière appropriée."
-        },
-        {
-          question: "Comment surveillez-vous l'infrastructure ?",
-          answer: "Nous mettons en place un monitoring complet : métriques de performance, tracing distribué, logs centralisés, et alerting intelligent. Des dashboards personnalisés permettent de visualiser la santé de chaque service."
-        },
-        {
-          question: "Proposez-vous de la formation pour les équipes ?",
-          answer: "Oui, nous proposons des formations complètes pour vos équipes : principes des microservices, bonnes pratiques de développement, monitoring et troubleshooting, et utilisation des outils DevOps."
-        }
+        { key: "when-microservices" },
+        { key: "service-communication" },
+        { key: "data-consistency" },
+        { key: "infrastructure-monitoring" },
+        { key: "team-training" },
       ],
       testimonials: [],
       complementaryServices: [
-        {
-          title: "DevOps & CI/CD",
-          description: "Automatisation complète du déploiement.",
-          icon: Workflow
-        },
-        {
-          title: "Monitoring 24/7",
-          description: "Surveillance continue et alertes en temps réel.",
-          icon: Timer
-        },
-        {
-          title: "Optimisation",
-          description: "Amélioration continue des performances.",
-          icon: Gauge
-        }
-      ]
+        { key: "devops-cicd", icon: Workflow },
+        { key: "monitoring-24-7", icon: Timer },
+        { key: "optimization", icon: Gauge },
+      ],
     },
     {
       id: "cloud",
-      name: "Solutions Cloud",
-      description: "Déploiement et gestion d'infrastructures cloud",
       route: Routes.service.backend.cloud,
       icon: Cloud,
-      heroTitle: "Solutions Cloud",
-      heroDescription: "Optimisez votre infrastructure avec des solutions cloud modernes et évolutives. Notre expertise vous garantit un déploiement sécurisé et performant sur les principales plateformes cloud.",
       features: [
-        {
-          title: "Multi-cloud",
-          description: "Support des principales plateformes (AWS, GCP, Azure).",
-          icon: Cloud
-        },
-        {
-          title: "Sécurité avancée",
-          description: "Protection robuste de vos données et applications.",
-          icon: Shield
-        },
-        {
-          title: "Performance optimale",
-          description: "Architecture optimisée pour des performances maximales.",
-          icon: Zap
-        },
-        {
-          title: "Scalabilité automatique",
-          description: "Adaptation dynamique aux besoins de charge.",
-          icon: Scale
-        }
+        { key: "multi-cloud", icon: Cloud },
+        { key: "advanced-security", icon: Shield },
+        { key: "optimal-performance", icon: Zap },
+        { key: "automatic-scalability", icon: Scale },
       ],
       benefits: [
-        {
-          title: "Haute disponibilité",
-          description: "Infrastructure redondante et résiliente.",
-          icon: Server
-        },
-        {
-          title: "Stockage élastique",
-          description: "Gestion flexible et sécurisée des données.",
-          icon: Database
-        },
-        {
-          title: "Monitoring avancé",
-          description: "Surveillance en temps réel de votre infrastructure.",
-          icon: LineChart
-        },
-        {
-          title: "Sécurité renforcée",
-          description: "Protection multicouche de vos ressources.",
-          icon: Lock
-        }
+        { key: "high-availability", icon: Server },
+        { key: "elastic-storage", icon: Database },
+        { key: "advanced-monitoring", icon: LineChart },
+        { key: "enhanced-security", icon: Lock },
       ],
       faqItems: [
-        {
-          question: "Quelle plateforme cloud choisir ?",
-          answer: "Le choix dépend de vos besoins spécifiques : AWS excelle en variété de services, Google Cloud en machine learning, et Azure en intégration Microsoft. Nous vous guidons vers la meilleure solution en fonction de vos objectifs, contraintes techniques et budget."
-        },
-        {
-          question: "Comment gérez-vous la sécurité dans le cloud ?",
-          answer: "Nous implémentons une sécurité multicouche : chiffrement des données au repos et en transit, contrôle d'accès IAM, réseaux privés virtuels (VPC), pare-feu applicatifs (WAF), et surveillance continue des menaces. Nous suivons les meilleures pratiques de chaque plateforme."
-        },
-        {
-          question: "Comment optimisez-vous les coûts ?",
-          answer: "Nous utilisons plusieurs stratégies : instances réservées, scaling automatique, optimisation des ressources, suppression des ressources inutilisées, et monitoring des coûts. Nous effectuons des audits réguliers pour identifier les opportunités d'économies."
-        },
-        {
-          question: "Comment assurez-vous la haute disponibilité ?",
-          answer: "Nous déployons votre infrastructure sur plusieurs zones de disponibilité, avec réplication des données, load balancing, et failover automatique. Nous mettons également en place des plans de reprise d'activité (DRP) robustes."
-        },
-        {
-          question: "Proposez-vous un support 24/7 ?",
-          answer: "Oui, nous proposons plusieurs niveaux de support incluant : monitoring 24/7, alerting automatique, intervention rapide en cas d'incident, maintenance préventive, et support technique dédié."
-        }
+        { key: "platform-choice" },
+        { key: "cloud-security" },
+        { key: "cost-optimization" },
+        { key: "high-availability" },
+        { key: "support-24-7" },
       ],
       testimonials: [],
       complementaryServices: [
-        {
-          title: "Migration cloud",
-          description: "Transition en douceur vers le cloud.",
-          icon: GitBranch
-        },
-        {
-          title: "Multi-région",
-          description: "Déploiement global de vos applications.",
-          icon: Globe
-        },
-        {
-          title: "DevOps",
-          description: "Automatisation et CI/CD dans le cloud.",
-          icon: Timer
-        }
-      ]
-    }
-  ]
+        { key: "cloud-migration", icon: GitBranch },
+        { key: "multi-region", icon: Globe },
+        { key: "devops", icon: Timer },
+      ],
+    },
+  ],
 };
 
-export default backendCategory;
\ No newline at end of file
+export default backendCategory;
diff --git a/apps/web/src/constants/services/design.ts b/apps/web/src/constants/services/design.ts
index 796833d6f..cb188f711 100644
--- a/apps/web/src/constants/services/design.ts
+++ b/apps/web/src/constants/services/design.ts
@@ -1,9 +1,9 @@
-import { 
-  Palette, 
-  PenTool, 
-  LayoutTemplate, 
-  Smartphone, 
-  FileCode, 
+import {
+  Palette,
+  PenTool,
+  LayoutTemplate,
+  Smartphone,
+  FileCode,
   Lightbulb,
   Target,
   Users,
@@ -23,541 +23,189 @@ import {
   LayoutGrid,
   FileText,
   Globe,
-  Heart
+  Heart,
 } from "lucide-react";
-import { ServiceBenefit, ServiceCategoryData, ServiceCategory, ServiceProcessStep } from "@/types/service";
+import {
+  ServiceBenefit,
+  ServiceCategoryData,
+  ServiceCategory,
+  ServiceProcessStep,
+} from "@/types/service";
 import Routes from "@/constants/routes";
 
 const designBenefits: ServiceBenefit[] = [
-  {
-    title: "Design UI/UX centré utilisateur",
-    description: "Une approche qui place les besoins utilisateurs au cœur de nos designs, validée par des prototypes interactifs.",
-    icon: Users
-  },
-  {
-    title: "Innovation créative",
-    description: "Des solutions UI/UX créatives et des prototypes innovants qui distinguent votre marque tout en respectant les standards.",
-    icon: Lightbulb
-  },
-  {
-    title: "Prototypage itératif",
-    description: "Une méthodologie basée sur des prototypes rapides et des itérations fréquentes pour affiner l'expérience utilisateur.",
-    icon: Zap
-  },
-  {
-    title: "Objectifs business",
-    description: "Un design UI/UX aligné sur vos objectifs commerciaux, validé par des tests utilisateurs sur prototypes.",
-    icon: Target
-  }
+  { key: "user-centered-design", icon: Users },
+  { key: "creative-innovation", icon: Lightbulb },
+  { key: "iterative-prototyping", icon: Zap },
+  { key: "business-objectives", icon: Target },
 ];
 
 const designProcessList: ServiceProcessStep[] = [
-  {
-    title: "Analyse des besoins",
-    description: "Première étape cruciale où nous analysons vos besoins, votre marque et vos objectifs business pour définir la direction UI/UX.",
-    services: ["Design UI/UX"]
-  },
-  {
-    title: "Recherche et moodboard",
-    description: "Création de moodboards et exploration des directions créatives possibles. Définition de la direction artistique globale.",
-    services: ["Design UI/UX", "Moodboard"]
-  },
-  {
-    title: "Wireframes",
-    description: "Conception des wireframes pour valider la structure, la hiérarchie et l'architecture de l'information.",
-    services: ["Design UI/UX", "Wireframes"]
-  },
-  {
-    title: "Design d'interface",
-    description: "Création des maquettes finales en respectant votre charte graphique. Attention particulière aux composants et à leur réutilisabilité.",
-    services: ["Design UI/UX"]
-  },
-  {
-    title: "Prototypage",
-    description: "Création de prototypes pour tester les interactions et valider les parcours utilisateurs.",
-    services: ["Design UI/UX"]
-  },
-  {
-    title: "Développement",
-    description: "Transformation des maquettes en interfaces fonctionnelles, avec une attention particulière aux animations définies.",
-    services: ["Développement Frontend", "Intégration"]
-  }
+  { key: "needs-analysis" },
+  { key: "research-moodboard" },
+  { key: "wireframes" },
+  { key: "interface-design" },
+  { key: "prototyping" },
+  { key: "development" },
 ];
 
 const designCategory: ServiceCategoryData = {
   id: ServiceCategory.DESIGN,
-  name: "Design UI/UX",
-  description: "Création d'interfaces modernes et d'expériences utilisateur optimales",
   icon: Palette,
   benefits: designBenefits,
   processList: designProcessList,
   subServices: [
     {
       id: "moodboard",
-      name: "Moodboard",
-      description: "Définition de l'identité visuelle et de l'ambiance de votre projet",
       route: Routes.service.design.moodboard,
       icon: PenTool,
-      heroTitle: "Moodboards & Direction Artistique",
-      heroDescription: "Donnez vie à votre vision grâce à des moodboards soigneusement élaborés. Notre expertise en design vous aide à définir une direction artistique claire et inspirante pour votre projet.",
       features: [
-        {
-          title: "Direction créative",
-          description: "Définition claire de l'ambiance et du style visuel.",
-          icon: Compass
-        },
-        {
-          title: "Palette de couleurs",
-          description: "Sélection harmonieuse des couleurs de votre identité.",
-          icon: Palette
-        },
-        {
-          title: "Style visuel",
-          description: "Exploration et définition de votre univers graphique.",
-          icon: ImageIcon
-        },
-        {
-          title: "Inspiration ciblée",
-          description: "Recherche approfondie adaptée à votre secteur.",
-          icon: Target
-        }
+        { key: "creative-direction", icon: Compass },
+        { key: "color-palette", icon: Palette },
+        { key: "visual-style", icon: ImageIcon },
+        { key: "targeted-inspiration", icon: Target },
       ],
       benefits: [
-        {
-          title: "Direction claire",
-          description: "Vision commune et alignement des équipes créatives.",
-          icon: Lightbulb
-        },
-        {
-          title: "Communication visuelle",
-          description: "Support efficace pour partager votre vision.",
-          icon: Share2
-        },
-        {
-          title: "Cohérence",
-          description: "Garantie d'une identité visuelle harmonieuse.",
-          icon: Eye
-        },
-        {
-          title: "Expertise créative",
-          description: "Conseils professionnels et direction artistique.",
-          icon: Brush
-        }
+        { key: "clear-direction", icon: Lightbulb },
+        { key: "visual-communication", icon: Share2 },
+        { key: "consistency", icon: Eye },
+        { key: "creative-expertise", icon: Brush },
       ],
       faqItems: [
-        {
-          question: "Qu'est-ce qu'un moodboard et à quoi sert-il ?",
-          answer: "Un moodboard est un assemblage visuel qui définit la direction artistique de votre projet. Il combine couleurs, typographies, images et textures pour créer une référence visuelle cohérente. C'est un outil essentiel pour communiquer votre vision et assurer la cohérence de votre identité visuelle."
-        },
-        {
-          question: "Comment se déroule le processus de création ?",
-          answer: "Le processus commence par une phase de découverte où nous explorons vos objectifs et votre univers. Nous effectuons ensuite une recherche approfondie pour sélectionner les éléments visuels appropriés. Après plusieurs itérations et vos retours, nous finalisons le moodboard qui servira de guide pour votre projet."
-        },
-        {
-          question: "Quels éléments comprend un moodboard ?",
-          answer: "Un moodboard professionnel inclut généralement : une palette de couleurs, des typographies, des images d'inspiration, des textures, des patterns, et des références stylistiques. Nous ajoutons également des notes explicatives pour clarifier les choix créatifs."
-        },
-        {
-          question: "Comment utilisez-vous le moodboard dans la suite du projet ?",
-          answer: "Le moodboard sert de référence tout au long du projet. Il guide les décisions de design, assure la cohérence visuelle et facilite la communication entre toutes les parties prenantes. C'est un document vivant qui peut évoluer avec vos retours."
-        },
-        {
-          question: "Combien de temps prend la création d'un moodboard ?",
-          answer: "La création d'un moodboard professionnel prend généralement 1 à 2 semaines, incluant la phase de recherche, la création initiale et les itérations basées sur vos retours. Ce temps nous permet d'explorer en profondeur et d'affiner la direction artistique."
-        }
+        { key: "what-is-moodboard" },
+        { key: "creation-process" },
+        { key: "moodboard-elements" },
+        { key: "moodboard-usage" },
+        { key: "creation-timeline" },
       ],
       testimonials: [],
       complementaryServices: [
-        {
-          title: "Charte graphique",
-          description: "Création d'une charte graphique complète.",
-          icon: FileImage
-        },
-        {
-          title: "Style Guide",
-          description: "Guide détaillé d'utilisation de votre identité.",
-          icon: Layers
-        },
-        {
-          title: "Direction artistique",
-          description: "Accompagnement créatif continu.",
-          icon: PenTool
-        }
-      ]
+        { key: "brand-guidelines", icon: FileImage },
+        { key: "style-guide", icon: Layers },
+        { key: "artistic-direction", icon: PenTool },
+      ],
     },
     {
       id: "wireframes",
-      name: "Wireframes",
-      description: "Conception de la structure et du parcours utilisateur",
       route: Routes.service.design.wireframes,
       icon: LayoutTemplate,
-      heroTitle: "Wireframes & Architecture UX",
-      heroDescription: "Structurez vos interfaces utilisateur avec des wireframes professionnels. Notre expertise en UX design vous garantit une architecture intuitive et une expérience utilisateur optimale dès les premières étapes de votre projet.",
       features: [
-        {
-          title: "Architecture UX",
-          description: "Structure claire et logique de vos interfaces.",
-          icon: LayoutTemplate
-        },
-        {
-          title: "Parcours utilisateur",
-          description: "Optimisation des flux de navigation.",
-          icon: Users
-        },
-        {
-          title: "Hiérarchie visuelle",
-          description: "Organisation efficace du contenu et des fonctionnalités.",
-          icon: Layers
-        },
-        {
-          title: "Interactions",
-          description: "Définition des comportements et des transitions.",
-          icon: MousePointer
-        }
+        { key: "ux-architecture", icon: LayoutTemplate },
+        { key: "user-journey", icon: Users },
+        { key: "visual-hierarchy", icon: Layers },
+        { key: "interactions", icon: MousePointer },
       ],
       benefits: [
-        {
-          title: "Responsive Design",
-          description: "Adaptation à tous les formats d'écrans.",
-          icon: Smartphone
-        },
-        {
-          title: "Prototypage rapide",
-          description: "Tests et itérations efficaces.",
-          icon: Zap
-        },
-        {
-          title: "Collaboration",
-          description: "Communication claire avec toutes les parties prenantes.",
-          icon: Share2
-        },
-        {
-          title: "Validation précoce",
-          description: "Détection et correction rapide des problèmes UX.",
-          icon: Eye
-        }
+        { key: "responsive-design", icon: Smartphone },
+        { key: "rapid-prototyping", icon: Zap },
+        { key: "collaboration", icon: Share2 },
+        { key: "early-validation", icon: Eye },
       ],
       faqItems: [
-        {
-          question: "Qu'est-ce qu'un wireframe et pourquoi est-ce important ?",
-          answer: "Un wireframe est une représentation schématique de votre interface qui se concentre sur la structure, la hiérarchie et les fonctionnalités, sans les éléments de design final. C'est une étape cruciale qui permet de valider l'architecture de l'information et l'expérience utilisateur avant d'investir dans le design détaillé."
-        },
-        {
-          question: "Comment se déroule le processus de création ?",
-          answer: "Le processus commence par l'analyse de vos besoins et objectifs. Nous créons ensuite des wireframes de basse fidélité pour valider la structure globale, puis des versions plus détaillées avec les interactions. Après plusieurs itérations et vos retours, nous finalisons les wireframes qui serviront de base au design UI."
-        },
-        {
-          question: "Quels livrables sont fournis ?",
-          answer: "Vous recevez un ensemble complet de wireframes pour chaque écran clé, des diagrammes de flux utilisateur, une documentation des interactions, et des prototypes interactifs pour tester les parcours utilisateur. Tous les fichiers sources sont également fournis."
-        },
-        {
-          question: "Comment gérez-vous le responsive design ?",
-          answer: "Nous créons des wireframes adaptés à chaque format d'écran important (desktop, tablet, mobile) en suivant une approche mobile-first. Chaque version est optimisée pour offrir la meilleure expérience utilisateur possible sur son support."
-        },
-        {
-          question: "Combien de temps prend la création des wireframes ?",
-          answer: "La durée dépend de la complexité du projet, mais généralement 2 à 4 semaines pour un projet moyen, incluant les phases d'analyse, création, itérations et finalisation. Nous établissons un planning détaillé au début du projet."
-        }
+        { key: "what-is-wireframe" },
+        { key: "creation-process" },
+        { key: "deliverables" },
+        { key: "responsive-handling" },
+        { key: "creation-timeline" },
       ],
       testimonials: [],
       complementaryServices: [
-        {
-          title: "Audit UX",
-          description: "Analyse approfondie de vos interfaces existantes.",
-          icon: ListChecks
-        },
-        {
-          title: "Prototypage",
-          description: "Création de prototypes interactifs.",
-          icon: LayoutGrid
-        },
-        {
-          title: "Documentation UX",
-          description: "Documentation détaillée des parcours utilisateur.",
-          icon: FileText
-        }
-      ]
+        { key: "ux-audit", icon: ListChecks },
+        { key: "prototyping", icon: LayoutGrid },
+        { key: "ux-documentation", icon: FileText },
+      ],
     },
     {
       id: "ui",
-      name: "Maquettage UI",
-      description: "Design détaillé des interfaces utilisateur",
       route: Routes.service.design.ui,
       icon: Smartphone,
-      heroTitle: "Design d'Interface Utilisateur",
-      heroDescription: "Créez des interfaces modernes, élégantes et intuitives pour vos applications. Notre expertise en design UI vous garantit des maquettes professionnelles qui captiveront vos utilisateurs.",
       features: [
-        {
-          title: "Design moderne",
-          description: "Interfaces élégantes suivant les dernières tendances.",
-          icon: PenTool
-        },
-        {
-          title: "Système de design",
-          description: "Composants cohérents et réutilisables.",
-          icon: Layers
-        },
-        {
-          title: "Responsive design",
-          description: "Adaptation parfaite à tous les écrans.",
-          icon: Smartphone
-        },
-        {
-          title: "Animations & micro-interactions",
-          description: "Interactions fluides et engageantes.",
-          icon: Zap
-        }
+        { key: "modern-design", icon: PenTool },
+        { key: "design-system", icon: Layers },
+        { key: "responsive-design", icon: Smartphone },
+        { key: "animations-micro-interactions", icon: Zap },
       ],
       benefits: [
-        {
-          title: "Identité visuelle",
-          description: "Design cohérent avec votre marque.",
-          icon: Palette
-        },
-        {
-          title: "Expérience utilisateur",
-          description: "Interfaces intuitives et agréables à utiliser.",
-          icon: Eye
-        },
-        {
-          title: "Design system",
-          description: "Bibliothèque de composants réutilisables.",
-          icon: Layers
-        },
-        {
-          title: "Accessibilité",
-          description: "Interfaces accessibles à tous les utilisateurs.",
-          icon: Users
-        }
+        { key: "visual-identity", icon: Palette },
+        { key: "user-experience", icon: Eye },
+        { key: "design-system", icon: Layers },
+        { key: "accessibility", icon: Users },
       ],
       faqItems: [
-        {
-          question: "Comment se déroule le processus de design UI ?",
-          answer: "Le processus commence par l'analyse de vos besoins et de votre identité de marque. Nous créons ensuite des premières versions des écrans clés, établissons le système de design, puis itérons sur les maquettes détaillées. Chaque étape inclut vos retours pour assurer un résultat parfaitement aligné avec vos attentes."
-        },
-        {
-          question: "Quels outils et livrables sont fournis ?",
-          answer: "Nous utilisons principalement Figma pour le design UI. Vous recevez les maquettes détaillées de tous les écrans, un système de design complet avec ses composants, les spécifications pour les développeurs, et les assets nécessaires à l'intégration."
-        },
-        {
-          question: "Comment gérez-vous le responsive design ?",
-          answer: "Nous suivons une approche mobile-first et créons des maquettes pour chaque breakpoint important (mobile, tablette, desktop). Chaque interface est optimisée pour offrir la meilleure expérience possible sur son support."
-        },
-        {
-          question: "Comment garantissez-vous la cohérence du design ?",
-          answer: "Nous créons un système de design complet incluant une bibliothèque de composants, des règles typographiques, une palette de couleurs et des principes de design. Ce système assure la cohérence à travers toute l'interface."
-        },
-        {
-          question: "Comment facilitez-vous le travail des développeurs ?",
-          answer: "Nous fournissons des spécifications détaillées pour chaque composant, incluant les mesures, les styles, les états et les interactions. Nous utilisons également des outils comme Zeplin ou les exports Figma pour faciliter l'intégration."
-        }
+        { key: "ui-design-process" },
+        { key: "tools-deliverables" },
+        { key: "responsive-handling" },
+        { key: "design-consistency" },
+        { key: "developer-handoff" },
       ],
       testimonials: [],
       complementaryServices: [
-        {
-          title: "Design system",
-          description: "Création d'une bibliothèque de composants.",
-          icon: LayoutGrid
-        },
-        {
-          title: "Prototypage",
-          description: "Création de prototypes interactifs.",
-          icon: MousePointer
-        },
-        {
-          title: "Développement",
-          description: "Intégration de vos maquettes en code.",
-          icon: FileCode
-        }
-      ]
+        { key: "design-system", icon: LayoutGrid },
+        { key: "prototyping", icon: MousePointer },
+        { key: "development", icon: FileCode },
+      ],
     },
     {
       id: "branding",
-      name: "Charte graphique",
-      description: "Création de votre identité visuelle complète",
       route: Routes.service.design.branding,
       icon: Palette,
-      heroTitle: "Branding & Identité de Marque",
-      heroDescription: "Donnez vie à votre marque avec une identité visuelle distinctive et mémorable. Notre expertise en branding vous aide à créer une image de marque qui résonne avec votre audience et reflète vos valeurs.",
       features: [
-        {
-          title: "Identité visuelle",
-          description: "Création d'une identité unique et mémorable.",
-          icon: Palette
-        },
-        {
-          title: "Valeurs de marque",
-          description: "Expression visuelle de votre ADN et vos valeurs.",
-          icon: Heart
-        },
-        {
-          title: "Charte graphique",
-          description: "Documentation complète de votre identité.",
-          icon: FileText
-        },
-        {
-          title: "Design system",
-          description: "Éléments visuels cohérents et réutilisables.",
-          icon: PenTool
-        }
+        { key: "visual-identity", icon: Palette },
+        { key: "brand-values", icon: Heart },
+        { key: "brand-guidelines", icon: FileText },
+        { key: "design-system", icon: PenTool },
       ],
       benefits: [
-        {
-          title: "Reconnaissance",
-          description: "Image de marque mémorable et distinctive.",
-          icon: Target
-        },
-        {
-          title: "Cohérence",
-          description: "Communication visuelle unifiée sur tous les supports.",
-          icon: LayoutTemplate
-        },
-        {
-          title: "Confiance",
-          description: "Crédibilité renforcée auprès de votre audience.",
-          icon: Users
-        },
-        {
-          title: "Portée",
-          description: "Impact visuel fort sur tous les canaux.",
-          icon: Globe
-        }
+        { key: "recognition", icon: Target },
+        { key: "consistency", icon: LayoutTemplate },
+        { key: "trust", icon: Users },
+        { key: "reach", icon: Globe },
       ],
       faqItems: [
-        {
-          question: "Que comprend une identité de marque complète ?",
-          answer: "Une identité de marque complète inclut le logo, la palette de couleurs, la typographie, les éléments graphiques, le ton de voix, et les règles d'utilisation. Nous fournissons une charte graphique détaillée qui documente tous ces éléments et guide leur utilisation cohérente."
-        },
-        {
-          question: "Comment se déroule le processus de création ?",
-          answer: "Le processus commence par une phase de découverte pour comprendre votre marque, vos valeurs et votre audience. Nous développons ensuite des concepts créatifs, créons les éléments visuels, et itérons selon vos retours. Le processus se termine par la livraison d'une charte graphique complète."
-        },
-        {
-          question: "Quels livrables sont fournis ?",
-          answer: "Vous recevez un package complet incluant : logos (différentes versions), palette de couleurs, typographies, éléments graphiques, modèles de documents, guides d'utilisation, et fichiers sources dans tous les formats nécessaires."
-        },
-        {
-          question: "Comment garantissez-vous l'unicité de l'identité ?",
-          answer: "Nous effectuons une recherche approfondie de votre marché et de la concurrence pour créer une identité distinctive. Nous vérifions également la disponibilité des éléments visuels pour éviter tout conflit avec des marques existantes."
-        },
-        {
-          question: "Comment gérez-vous la transition vers la nouvelle identité ?",
-          answer: "Nous fournissons un plan de déploiement progressif qui guide la transition vers la nouvelle identité. Cela inclut des recommandations pour la communication interne et externe, et un calendrier de mise en œuvre."
-        }
+        { key: "complete-identity" },
+        { key: "creation-process" },
+        { key: "deliverables" },
+        { key: "uniqueness" },
+        { key: "transition" },
       ],
       testimonials: [],
       complementaryServices: [
-        {
-          title: "Marketing Kit",
-          description: "Création de supports marketing cohérents.",
-          icon: MessageSquare
-        },
-        {
-          title: "Réseaux sociaux",
-          description: "Adaptation pour les médias sociaux.",
-          icon: Share2
-        },
-        {
-          title: "Supports print",
-          description: "Création de supports imprimés.",
-          icon: FileImage
-        }
-      ]
+        { key: "marketing-kit", icon: MessageSquare },
+        { key: "social-media", icon: Share2 },
+        { key: "print-materials", icon: FileImage },
+      ],
     },
     {
       id: "audit",
-      name: "Audit UX/UI",
-      description: "Analyse et optimisation de vos interfaces existantes",
       route: Routes.service.design.audit,
       icon: FileCode,
-      heroTitle: "Audit UX/UI & Optimisation",
-      heroDescription: "Améliorez l'expérience utilisateur de vos interfaces grâce à un audit professionnel. Notre expertise vous garantit une analyse approfondie et des recommandations concrètes pour optimiser vos interfaces.",
       features: [
-        {
-          title: "Analyse heuristique",
-          description: "Évaluation experte basée sur les principes UX.",
-          icon: Search
-        },
-        {
-          title: "Tests utilisateurs",
-          description: "Observation et analyse des comportements réels.",
-          icon: Users
-        },
-        {
-          title: "Analytics",
-          description: "Analyse des données d'utilisation.",
-          icon: BarChart
-        },
-        {
-          title: "Accessibilité",
-          description: "Vérification des standards d'accessibilité.",
-          icon: Eye
-        }
+        { key: "heuristic-analysis", icon: Search },
+        { key: "user-testing", icon: Users },
+        { key: "analytics", icon: BarChart },
+        { key: "accessibility", icon: Eye },
       ],
       benefits: [
-        {
-          title: "Conversion",
-          description: "Identification des freins à la conversion.",
-          icon: Target
-        },
-        {
-          title: "Performance",
-          description: "Analyse des métriques de performance.",
-          icon: Zap
-        },
-        {
-          title: "Satisfaction",
-          description: "Mesure de la satisfaction utilisateur.",
-          icon: BarChart
-        },
-        {
-          title: "Parcours",
-          description: "Optimisation des parcours utilisateurs.",
-          icon: MousePointer
-        }
+        { key: "conversion", icon: Target },
+        { key: "performance", icon: Zap },
+        { key: "satisfaction", icon: BarChart },
+        { key: "journeys", icon: MousePointer },
       ],
       faqItems: [
-        {
-          question: "Que comprend un audit UX/UI complet ?",
-          answer: "Un audit complet inclut : analyse heuristique basée sur les principes UX, tests utilisateurs, analyse des données analytics, évaluation de l'accessibilité, benchmark concurrentiel, et recommandations détaillées. Nous fournissons un rapport complet avec des solutions concrètes."
-        },
-        {
-          question: "Comment se déroule le processus d'audit ?",
-          answer: "Le processus commence par une phase de découverte pour comprendre vos objectifs et KPIs. Nous réalisons ensuite les différentes analyses (heuristique, données, tests), synthétisons les résultats, et préparons un rapport détaillé avec des recommandations priorisées."
-        },
-        {
-          question: "Quels livrables sont fournis ?",
-          answer: "Vous recevez un rapport d'audit complet incluant : synthèse exécutive, analyses détaillées, visualisations des données, problèmes identifiés avec leur niveau de gravité, recommandations priorisées, et plan d'action suggéré."
-        },
-        {
-          question: "Comment mesurez-vous l'impact des recommandations ?",
-          answer: "Nous définissons des KPIs spécifiques pour chaque recommandation et mettons en place un suivi des métriques clés (taux de conversion, satisfaction utilisateur, temps de complétion des tâches, etc.) pour mesurer l'impact des améliorations."
-        },
-        {
-          question: "Proposez-vous un accompagnement post-audit ?",
-          answer: "Oui, nous proposons un accompagnement pour la mise en œuvre des recommandations, incluant : priorisation des actions, support dans l'implémentation, et mesure des résultats. Nous pouvons également réaliser des audits de suivi."
-        }
+        { key: "complete-audit" },
+        { key: "audit-process" },
+        { key: "deliverables" },
+        { key: "measuring-impact" },
+        { key: "post-audit-support" },
       ],
       testimonials: [],
       complementaryServices: [
-        {
-          title: "Tests utilisateurs",
-          description: "Sessions de tests approfondis avec vos utilisateurs.",
-          icon: Users
-        },
-        {
-          title: "Analytics avancés",
-          description: "Mise en place de tracking et analyse approfondie.",
-          icon: BarChart
-        },
-        {
-          title: "Formation UX",
-          description: "Formation de vos équipes aux bonnes pratiques.",
-          icon: MessageSquare
-        }
-      ]
-    }
-  ]
+        { key: "user-testing", icon: Users },
+        { key: "advanced-analytics", icon: BarChart },
+        { key: "ux-training", icon: MessageSquare },
+      ],
+    },
+  ],
 };
 
-export default designCategory;
\ No newline at end of file
+export default designCategory;
diff --git a/apps/web/src/constants/services/frontend.ts b/apps/web/src/constants/services/frontend.ts
index 2110c553e..23c1cab05 100644
--- a/apps/web/src/constants/services/frontend.ts
+++ b/apps/web/src/constants/services/frontend.ts
@@ -1,471 +1,179 @@
-import { 
-  Code, 
-  Rocket, 
-  GitBranch, 
+import {
+  Code,
+  GitBranch,
   Shield,
   Layout,
   Zap,
   Smartphone,
   Monitor,
-  Laptop,
   Globe,
   Database,
-  Cpu,
-  Upload,
   Download,
-  AppWindow,
   Gauge,
   LineChart,
   Cloud,
-  Store,
   Share2,
   MessageSquare,
   Tablet,
   PenTool,
-  ArrowDownToLine,
   Wifi,
-  Bell
+  Bell,
+  WifiOff,
+  Search,
+  Layers,
+  Lock,
 } from "lucide-react";
-import { ServiceBenefit, ServiceCategoryData, ServiceCategory, ServiceProcessStep } from "@/types/service";
+import {
+  ServiceBenefit,
+  ServiceCategoryData,
+  ServiceCategory,
+  ServiceProcessStep,
+} from "@/types/service";
 import Routes from "@/constants/routes";
 
 const frontendBenefits: ServiceBenefit[] = [
-  {
-    title: "Architecture évolutive",
-    description: "Applications construites sur des architectures modernes et scalables, prêtes pour l'évolution de votre projet.",
-    icon: Code
-  },
-  {
-    title: "Performance optimale",
-    description: "Focus sur les performances avec des techniques avancées d'optimisation et de mise en cache.",
-    icon: Gauge
-  },
-  {
-    title: "Code maintenable",
-    description: "Architecture propre et modulaire permettant une maintenance facile et des évolutions rapides.",
-    icon: GitBranch
-  },
-  {
-    title: "Sécurité renforcée",
-    description: "Implémentation des meilleures pratiques de sécurité frontend pour protéger vos utilisateurs.",
-    icon: Shield
-  }
+  { key: "scalable-architecture", icon: Code },
+  { key: "optimal-performance", icon: Gauge },
+  { key: "maintainable-code", icon: GitBranch },
+  { key: "enhanced-security", icon: Shield },
 ];
 
 const frontendProcessList: ServiceProcessStep[] = [
-  {
-    title: "Architecture technique",
-    description: "Définition de l'architecture frontend, choix des technologies et mise en place de l'environnement de développement.",
-    services: ["Architecture", "Conseil technique"]
-  },
-  {
-    title: "Mise en place du projet",
-    description: "Configuration du projet avec les bonnes pratiques de développement, tests et déploiement continu.",
-    services: ["Setup technique", "CI/CD"]
-  },
-  {
-    title: "Développement des features",
-    description: "Implémentation des fonctionnalités avec un focus sur la qualité du code et les performances.",
-    services: ["Développement Frontend", "React", "Next.js"]
-  },
-  {
-    title: "Gestion de l'état",
-    description: "Mise en place d'une gestion d'état robuste et performante pour les données de l'application.",
-    services: ["State Management", "API Integration"]
-  },
-  {
-    title: "Tests et qualité",
-    description: "Mise en place des tests automatisés et des processus d'assurance qualité.",
-    services: ["Tests unitaires", "Tests E2E"]
-  },
-  {
-    title: "Optimisation et monitoring",
-    description: "Optimisation des performances et mise en place d'outils de monitoring.",
-    services: ["Performance", "Analytics"]
-  }
+  { key: "technical-architecture" },
+  { key: "project-setup" },
+  { key: "feature-development" },
+  { key: "state-management" },
+  { key: "testing-quality" },
+  { key: "optimization-monitoring" },
 ];
 
 const frontendCategory: ServiceCategoryData = {
   id: ServiceCategory.FRONTEND,
-  name: "Développement Front-end",
-  description: "Création d'applications web et mobiles performantes",
   icon: Code,
   benefits: frontendBenefits,
   processList: frontendProcessList,
   subServices: [
     {
       id: "web",
-      name: "Applications Web",
-      description: "Développement d'applications web modernes avec React et Next.js",
       route: Routes.service.frontend.web,
       icon: Globe,
-      heroTitle: "Développement Web Frontend",
-      heroDescription: "Créez des applications web modernes, réactives et performantes avec les dernières technologies frontend. Notre expertise vous garantit une expérience utilisateur exceptionnelle.",
       features: [
-        {
-          title: "React & Next.js",
-          description: "Développement avec les frameworks modernes pour des applications performantes et évolutives.",
-          icon: Code
-        },
-        {
-          title: "Design Responsive",
-          description: "Interfaces adaptatives pour une expérience optimale sur tous les appareils.",
-          icon: Layout
-        },
-        {
-          title: "Performance Web",
-          description: "Optimisation poussée pour des temps de chargement rapides et une expérience fluide.",
-          icon: Rocket
-        },
-        {
-          title: "UI/UX Moderne",
-          description: "Interfaces utilisateur élégantes et intuitives suivant les dernières tendances.",
-          icon: PenTool
-        }
+        { key: "react-nextjs", icon: Code },
+        { key: "responsive-design", icon: Layout },
+        { key: "web-performance", icon: Zap },
+        { key: "modern-ui-ux", icon: PenTool },
       ],
       benefits: [
-        {
-          title: "Applications réactives",
-          description: "Interfaces dynamiques et réactives pour une expérience utilisateur fluide.",
-          icon: Monitor
-        },
-        {
-          title: "Mobile First",
-          description: "Conception pensée d'abord pour mobile puis adaptée aux grands écrans.",
-          icon: Smartphone
-        },
-        {
-          title: "Performance optimale",
-          description: "Optimisation avancée pour des temps de chargement minimaux.",
-          icon: Zap
-        },
-        {
-          title: "SEO optimisé",
-          description: "Structure optimisée pour un excellent référencement naturel.",
-          icon: Globe
-        }
+        { key: "reactive-apps", icon: Monitor },
+        { key: "mobile-first", icon: Smartphone },
+        { key: "optimal-performance", icon: Zap },
+        { key: "seo-optimized", icon: Globe },
       ],
       faqItems: [
-        {
-          question: "Quelles technologies utilisez-vous pour le développement frontend ?",
-          answer: "Nous utilisons principalement React avec Next.js, ainsi que TypeScript pour un code plus robuste. Nous intégrons également des outils modernes comme Tailwind CSS pour le styling, et diverses bibliothèques pour les animations et les interactions."
-        },
-        {
-          question: "Comment gérez-vous la performance des applications web ?",
-          answer: "Nous appliquons les meilleures pratiques d'optimisation : code splitting, lazy loading, optimisation des images, mise en cache intelligente, et nous utilisons des outils de mesure de performance pour garantir des temps de chargement optimaux."
-        },
-        {
-          question: "Proposez-vous des solutions pour le SEO ?",
-          answer: "Oui, nous développons des applications avec le SEO en tête : rendu côté serveur (SSR), génération de pages statiques, meta-données dynamiques, structure sémantique et optimisation pour les moteurs de recherche."
-        },
-        {
-          question: "Comment assurez-vous la compatibilité avec différents navigateurs ?",
-          answer: "Nous testons sur les principaux navigateurs et versions, utilisons des outils de transpilation modernes, et mettons en place des fallbacks appropriés pour garantir une expérience cohérente."
-        },
-        {
-          question: "Proposez-vous la maintenance des applications développées ?",
-          answer: "Oui, nous proposons différentes formules de maintenance incluant les mises à jour de sécurité, l'optimisation continue des performances, et l'évolution des fonctionnalités."
-        }
+        { key: "technologies" },
+        { key: "performance" },
+        { key: "seo" },
+        { key: "browser-compatibility" },
+        { key: "maintenance" },
       ],
       testimonials: [],
       complementaryServices: [
-        {
-          title: "Design UI/UX",
-          description: "Conception d'interfaces utilisateur modernes et ergonomiques.",
-          icon: PenTool
-        },
-        {
-          title: "Intégration API",
-          description: "Connection avec vos systèmes et services backend existants.",
-          icon: Share2
-        },
-        {
-          title: "Internationalisation",
-          description: "Adaptation de votre application pour un public international.",
-          icon: Globe
-        }
-      ]
+        { key: "ui-ux-design", icon: PenTool },
+        { key: "api-integration", icon: Share2 },
+        { key: "internationalization", icon: Globe },
+      ],
     },
     {
       id: "mobile",
-      name: "Applications Mobiles",
-      description: "Création d'applications mobiles natives avec React Native",
       route: Routes.service.frontend.mobile,
       icon: Smartphone,
-      heroTitle: "Développement Mobile React Native",
-      heroDescription: "Créez des applications mobiles natives performantes pour iOS et Android avec React Native. Notre expertise vous garantit des applications robustes et une expérience utilisateur exceptionnelle.",
       features: [
-        {
-          title: "React Native & Expo",
-          description: "Développement cross-platform efficace pour iOS et Android avec une base de code unique.",
-          icon: Code
-        },
-        {
-          title: "Design Natif",
-          description: "Interfaces respectant les guidelines de design iOS et Android pour une expérience familière.",
-          icon: Layout
-        },
-        {
-          title: "Performance Native",
-          description: "Optimisation poussée pour des performances proches du natif sur chaque plateforme.",
-          icon: Rocket
-        },
-        {
-          title: "UI/UX Mobile",
-          description: "Interfaces mobiles intuitives suivant les meilleures pratiques de chaque plateforme.",
-          icon: PenTool
-        }
+        { key: "react-native-expo", icon: Code },
+        { key: "native-design", icon: Layout },
+        { key: "native-performance", icon: Zap },
+        { key: "mobile-ui-ux", icon: PenTool },
       ],
       benefits: [
-        {
-          title: "Multi-plateformes",
-          description: "Applications fonctionnant sur iOS et Android à partir d'une base de code unique.",
-          icon: Smartphone
-        },
-        {
-          title: "Support tablettes",
-          description: "Interfaces adaptées aux différentes tailles d'écrans et orientations.",
-          icon: Tablet
-        },
-        {
-          title: "Performance optimale",
-          description: "Optimisation native pour des performances et une fluidité maximales.",
-          icon: Gauge
-        },
-        {
-          title: "Expérience native",
-          description: "Utilisation des fonctionnalités natives des appareils (caméra, GPS, notifications...).",
-          icon: AppWindow
-        }
+        { key: "multi-platform", icon: Smartphone },
+        { key: "tablet-support", icon: Tablet },
+        { key: "optimal-performance", icon: Gauge },
+        { key: "native-experience", icon: Layers },
       ],
       faqItems: [
-        {
-          question: "Pourquoi choisir React Native pour le développement mobile ?",
-          answer: "React Native permet de développer des applications performantes pour iOS et Android à partir d'une base de code unique, réduisant les coûts et le temps de développement tout en maintenant une qualité native. Il bénéficie également d'un large écosystème et du support de Meta (Facebook)."
-        },
-        {
-          question: "Comment assurez-vous la performance des applications ?",
-          answer: "Nous optimisons chaque aspect de l'application : temps de démarrage, consommation mémoire, animations fluides, chargement des données... Nous utilisons également des outils de profilage pour identifier et résoudre les problèmes de performance."
-        },
-        {
-          question: "Gérez-vous la publication sur les stores ?",
-          answer: "Oui, nous prenons en charge tout le processus de publication : préparation des assets, configuration des comptes développeur, soumission aux stores (App Store et Play Store) et suivi des mises à jour."
-        },
-        {
-          question: "Comment gérez-vous les mises à jour des applications ?",
-          answer: "Nous mettons en place des systèmes de mise à jour OTA (Over The Air) quand c'est possible, et nous gérons les mises à jour via les stores avec un processus optimisé pour minimiser les temps de validation."
-        },
-        {
-          question: "Proposez-vous un support après le lancement ?",
-          answer: "Oui, nous proposons différentes formules de maintenance incluant : monitoring des performances, corrections de bugs, mises à jour de sécurité et évolutions fonctionnelles."
-        }
+        { key: "why-react-native" },
+        { key: "performance" },
+        { key: "store-publishing" },
+        { key: "updates" },
+        { key: "post-launch-support" },
       ],
       testimonials: [],
       complementaryServices: [
-        {
-          title: "Publication Store",
-          description: "Gestion complète de la publication sur l'App Store et le Play Store.",
-          icon: Store
-        },
-        {
-          title: "Intégration Backend",
-          description: "Connection avec vos systèmes et APIs existants.",
-          icon: Share2
-        },
-        {
-          title: "Formation React Native",
-          description: "Formation de vos équipes au développement React Native.",
-          icon: MessageSquare
-        }
-      ]
+        { key: "store-publishing", icon: Share2 },
+        { key: "backend-integration", icon: Share2 },
+        { key: "react-native-training", icon: MessageSquare },
+      ],
     },
     {
       id: "desktop",
-      name: "Logiciels de Bureau",
-      description: "Développement d'applications desktop multiplateforme",
       route: Routes.service.frontend.desktop,
-      icon: Laptop,
-      heroTitle: "Applications Desktop Multiplateformes",
-      heroDescription: "Développez des applications de bureau modernes et performantes pour Windows, macOS et Linux. Notre expertise vous garantit des applications professionnelles qui tirent parti de toute la puissance du desktop.",
+      icon: Monitor,
       features: [
-        {
-          title: "Electron & React",
-          description: "Technologies modernes pour des applications desktop performantes et évolutives.",
-          icon: Code
-        },
-        {
-          title: "Multiplateforme",
-          description: "Applications compatibles Windows, macOS et Linux à partir d'une base de code unique.",
-          icon: Monitor
-        },
-        {
-          title: "Performance native",
-          description: "Optimisation pour tirer parti des ressources système de manière efficace.",
-          icon: Rocket
-        },
-        {
-          title: "Intégration système",
-          description: "Accès aux fonctionnalités natives du système d'exploitation.",
-          icon: Cpu
-        }
+        { key: "electron-react", icon: Code },
+        { key: "multiplatform", icon: Monitor },
+        { key: "native-performance", icon: Zap },
+        { key: "system-integration", icon: Layers },
       ],
       benefits: [
-        {
-          title: "Windows & macOS",
-          description: "Support natif des principales plateformes desktop.",
-          icon: Laptop
-        },
-        {
-          title: "Accès système",
-          description: "Interaction directe avec le système d'exploitation.",
-          icon: Cpu
-        },
-        {
-          title: "Mode hors ligne",
-          description: "Fonctionnement autonome sans connexion internet requise.",
-          icon: Download
-        },
-        {
-          title: "Données locales",
-          description: "Stockage et traitement des données en local pour plus de sécurité.",
-          icon: Database
-        }
+        { key: "windows-macos", icon: Monitor },
+        { key: "system-access", icon: Layers },
+        { key: "offline-mode", icon: Download },
+        { key: "local-data", icon: Database },
       ],
       faqItems: [
-        {
-          question: "Pourquoi choisir Electron pour le développement desktop ?",
-          answer: "Electron permet de créer des applications desktop multiplateformes avec des technologies web modernes (React, TypeScript). Cela offre un développement rapide, une maintenance simplifiée et une excellente expérience utilisateur, tout en garantissant la compatibilité avec Windows, macOS et Linux."
-        },
-        {
-          question: "Comment gérez-vous la sécurité des applications desktop ?",
-          answer: "Nous implémentons plusieurs niveaux de sécurité : chiffrement des données sensibles, protection contre les injections de code, mises à jour de sécurité automatiques, et bonnes pratiques de développement sécurisé. Nous suivons également les recommandations de sécurité spécifiques à chaque système d'exploitation."
-        },
-        {
-          question: "Proposez-vous un système de mise à jour automatique ?",
-          answer: "Oui, nous intégrons un système de mise à jour automatique qui permet de déployer facilement les nouvelles versions de l'application. Les utilisateurs sont notifiés des mises à jour disponibles et peuvent les installer en un clic."
-        },
-        {
-          question: "Comment gérez-vous la distribution des applications ?",
-          answer: "Nous gérons tout le processus de distribution : création des installateurs pour chaque plateforme, signature des applications, publication sur les stores si nécessaire (Microsoft Store, Mac App Store), et mise en place d'un système de mise à jour automatique."
-        },
-        {
-          question: "Proposez-vous un support après le lancement ?",
-          answer: "Oui, nous proposons plusieurs formules de maintenance incluant : support technique, correction de bugs, mises à jour de sécurité, optimisations de performance et évolutions fonctionnelles."
-        }
+        { key: "why-electron" },
+        { key: "security" },
+        { key: "auto-update" },
+        { key: "distribution" },
+        { key: "post-launch-support" },
       ],
       testimonials: [],
       complementaryServices: [
-        {
-          title: "Télémétrie",
-          description: "Suivi des performances et du comportement utilisateur.",
-          icon: LineChart
-        },
-        {
-          title: "Distribution",
-          description: "Publication sur les stores et gestion des mises à jour.",
-          icon: Upload
-        },
-        {
-          title: "Cloud Sync",
-          description: "Synchronisation des données avec le cloud.",
-          icon: Cloud
-        }
-      ]
+        { key: "telemetry", icon: LineChart },
+        { key: "distribution", icon: Share2 },
+        { key: "cloud-sync", icon: Cloud },
+      ],
     },
     {
       id: "pwa",
-      name: "Progressive Web Apps",
-      description: "Création d'applications web progressives performantes",
       route: Routes.service.frontend.pwa,
       icon: Globe,
-      heroTitle: "Progressive Web Apps (PWA)",
-      heroDescription: "Transformez votre site web en véritable application installable avec les Progressive Web Apps. Offrez une expérience utilisateur exceptionnelle, en ligne comme hors ligne.",
       features: [
-        {
-          title: "Installation native",
-          description: "Applications installables directement depuis le navigateur, sans passer par les stores.",
-          icon: ArrowDownToLine
-        },
-        {
-          title: "Mode hors ligne",
-          description: "Fonctionnement même sans connexion internet grâce au cache intelligent.",
-          icon: Wifi
-        },
-        {
-          title: "Performance optimale",
-          description: "Chargement rapide et expérience fluide sur tous les appareils.",
-          icon: Rocket
-        },
-        {
-          title: "Notifications Push",
-          description: "Engagement utilisateur amélioré grâce aux notifications push.",
-          icon: Bell
-        }
+        { key: "native-installation", icon: Download },
+        { key: "offline-mode", icon: WifiOff },
+        { key: "optimal-performance", icon: Zap },
+        { key: "push-notifications", icon: Bell },
       ],
       benefits: [
-        {
-          title: "Multi-plateformes",
-          description: "Une seule application pour tous les appareils et systèmes d'exploitation.",
-          icon: Smartphone
-        },
-        {
-          title: "Toujours à jour",
-          description: "Mises à jour automatiques sans action utilisateur nécessaire.",
-          icon: ArrowDownToLine
-        },
-        {
-          title: "Légèreté",
-          description: "Pas d'installation lourde, accessible instantanément.",
-          icon: Cloud
-        },
-        {
-          title: "Performances natives",
-          description: "Expérience utilisateur proche des applications natives.",
-          icon: Zap
-        }
+        { key: "multi-platform", icon: Smartphone },
+        { key: "always-updated", icon: Download },
+        { key: "lightweight", icon: Cloud },
+        { key: "native-performance", icon: Zap },
       ],
       faqItems: [
-        {
-          question: "Qu'est-ce qu'une Progressive Web App ?",
-          answer: "Une PWA est une application web qui offre une expérience similaire à une application native : elle est installable, fonctionne hors ligne, et peut envoyer des notifications push. Elle combine les avantages du web (accessibilité, mise à jour automatique) et du natif (performance, fonctionnalités avancées)."
-        },
-        {
-          question: "Quels sont les avantages par rapport à une application native ?",
-          answer: "Les PWA offrent plusieurs avantages : pas besoin de passer par les stores, mise à jour automatique, développement plus rapide et moins coûteux, meilleur référencement, et une base de code unique pour toutes les plateformes."
-        },
-        {
-          question: "Comment fonctionne le mode hors ligne ?",
-          answer: "Nous utilisons des Service Workers pour mettre en cache les ressources essentielles et les données. L'application peut ainsi fonctionner même sans connexion internet, avec une synchronisation automatique une fois la connexion rétablie."
-        },
-        {
-          question: "Les PWA sont-elles compatibles avec tous les navigateurs ?",
-          answer: "Les PWA fonctionnent sur la majorité des navigateurs modernes. Pour les navigateurs plus anciens, nous mettons en place des solutions de fallback pour garantir une expérience utilisateur optimale."
-        },
-        {
-          question: "Proposez-vous un support après le lancement ?",
-          answer: "Oui, nous proposons plusieurs formules de maintenance incluant : mises à jour de sécurité, optimisations de performance, ajout de fonctionnalités et support technique."
-        }
+        { key: "what-is-pwa" },
+        { key: "vs-native" },
+        { key: "offline" },
+        { key: "browser-compatibility" },
+        { key: "post-launch-support" },
       ],
       testimonials: [],
       complementaryServices: [
-        {
-          title: "Analytics avancés",
-          description: "Suivi détaillé du comportement utilisateur et des performances.",
-          icon: LineChart
-        },
-        {
-          title: "SEO optimisé",
-          description: "Optimisation pour les moteurs de recherche et partage social.",
-          icon: Globe
-        },
-        {
-          title: "Sécurité renforcée",
-          description: "Protection des données et communications sécurisées.",
-          icon: Shield
-        }
-      ]
-    }
-  ]
+        { key: "advanced-analytics", icon: LineChart },
+        { key: "seo-optimized", icon: Search },
+        { key: "enhanced-security", icon: Shield },
+      ],
+    },
+  ],
 };
 
-export default frontendCategory;
\ No newline at end of file
+export default frontendCategory;
diff --git a/apps/web/src/constants/services/integration.ts b/apps/web/src/constants/services/integration.ts
index 7215c0306..59096a466 100644
--- a/apps/web/src/constants/services/integration.ts
+++ b/apps/web/src/constants/services/integration.ts
@@ -1,11 +1,11 @@
-import { 
-  Layers, 
-  ShoppingBag, 
-  Globe, 
-  Box, 
-  Rocket, 
-  Palette, 
-  Settings, 
+import {
+  Layers,
+  ShoppingBag,
+  Globe,
+  Box,
+  Rocket,
+  Palette,
+  Settings,
   Shield,
   Code,
   Share2,
@@ -19,634 +19,219 @@ import {
   Image as ImageIcon,
   Shapes,
   MousePointer,
-  Users
+  Users,
 } from "lucide-react";
-import { ServiceBenefit, ServiceCategoryData, ServiceCategory, ServiceProcessStep } from "@/types/service";
+import {
+  ServiceBenefit,
+  ServiceCategoryData,
+  ServiceCategory,
+  ServiceProcessStep,
+} from "@/types/service";
 import Routes from "@/constants/routes";
 
 const integrationBenefits: ServiceBenefit[] = [
-  {
-    title: "Code propre et maintenable",
-    description: "Intégration avec des standards de code élevés et une architecture pensée pour la maintenabilité à long terme.",
-    icon: Code
-  },
-  {
-    title: "Performance optimisée",
-    description: "Sites web rapides et fluides grâce à des techniques d'optimisation avancées et au respect des bonnes pratiques.",
-    icon: Zap
-  },
-  {
-    title: "Responsive design",
-    description: "Adaptation parfaite à tous les écrans et appareils pour une expérience utilisateur cohérente.",
-    icon: Layers
-  },
-  {
-    title: "Animations fluides",
-    description: "Intégration d'animations soignées pour enrichir l'expérience utilisateur tout en maintenant les performances.",
-    icon: Rocket
-  }
+  { key: "clean-maintainable-code", icon: Code },
+  { key: "optimized-performance", icon: Zap },
+  { key: "responsive-design", icon: Layers },
+  { key: "smooth-animations", icon: Rocket },
 ];
 
 const integrationProcessList: ServiceProcessStep[] = [
-  {
-    title: "Analyse des maquettes",
-    description: "Étude approfondie des maquettes pour identifier les composants, les interactions et les points d'attention techniques.",
-    services: ["Analyse technique", "Architecture"]
-  },
-  {
-    title: "Architecture technique",
-    description: "Définition de l'architecture frontend et choix des technologies adaptées au projet.",
-    services: ["Architecture", "Conseil technique"]
-  },
-  {
-    title: "Développement des composants",
-    description: "Création des composants réutilisables en suivant les principes du design system.",
-    services: ["Développement Frontend", "Intégration"]
-  },
-  {
-    title: "Intégration responsive",
-    description: "Adaptation du design pour tous les formats d'écran avec une attention particulière à l'expérience mobile.",
-    services: ["Intégration", "Responsive Design"]
-  },
-  {
-    title: "Optimisation",
-    description: "Optimisation des performances, de l'accessibilité et du référencement technique.",
-    services: ["Performance", "SEO technique"]
-  },
-  {
-    title: "Tests et validation",
-    description: "Tests approfondis sur différents navigateurs et appareils pour garantir une expérience utilisateur optimale.",
-    services: ["Tests", "Quality Assurance"]
-  }
+  { key: "mockup-analysis" },
+  { key: "technical-architecture" },
+  { key: "component-development" },
+  { key: "responsive-integration" },
+  { key: "optimization" },
+  { key: "testing-validation" },
 ];
 
 const integrationCategory: ServiceCategoryData = {
   id: ServiceCategory.INTEGRATION,
-  name: "Intégration",
-  description: "Intégration sur les principales plateformes e-commerce et CMS",
   icon: Layers,
   benefits: integrationBenefits,
   processList: integrationProcessList,
   subServices: [
     {
       id: "shopify",
-      name: "Shopify",
-      description: "Création et personnalisation de boutiques en ligne Shopify",
       route: Routes.service.integration.shopify,
       icon: ShoppingBag,
-      heroTitle: "Créez votre boutique en ligne avec Shopify",
-      heroDescription: "Transformez votre vision e-commerce en réalité avec notre expertise Shopify. Nous créons des boutiques en ligne performantes, esthétiques et optimisées pour la conversion.",
       features: [
-        {
-          title: "Design personnalisé",
-          description: "Création d'un thème unique qui reflète votre marque et optimise l'expérience utilisateur.",
-          icon: Palette
-        },
-        {
-          title: "Optimisation des conversions",
-          description: "Mise en place des meilleures pratiques pour maximiser vos ventes et fidéliser vos clients.",
-          icon: Rocket
-        },
-        {
-          title: "Sécurité renforcée",
-          description: "Protection de vos données et de celles de vos clients avec les dernières normes de sécurité.",
-          icon: Shield
-        },
-        {
-          title: "Intégrations avancées",
-          description: "Connection avec vos outils préférés pour la gestion des stocks, la comptabilité et le marketing.",
-          icon: Settings
-        }
+        { key: "custom-design", icon: Palette },
+        { key: "conversion-optimization", icon: Rocket },
+        { key: "enhanced-security", icon: Shield },
+        { key: "advanced-integrations", icon: Settings },
       ],
       benefits: [
-        {
-          title: "Paiements sécurisés",
-          description: "Intégration des principaux moyens de paiement et gestion sécurisée des transactions.",
-          icon: CreditCard
-        },
-        {
-          title: "International par défaut",
-          description: "Vente dans le monde entier avec gestion multi-devises et traductions automatiques.",
-          icon: Globe
-        },
-        {
-          title: "Analytics puissant",
-          description: "Suivi détaillé de vos performances et insights pour optimiser vos ventes.",
-          icon: BarChart
-        },
-        {
-          title: "Logistique simplifiée",
-          description: "Gestion efficace des commandes et intégration avec les principaux transporteurs.",
-          icon: Truck
-        }
+        { key: "secure-payments", icon: CreditCard },
+        { key: "international-by-default", icon: Globe },
+        { key: "powerful-analytics", icon: BarChart },
+        { key: "simplified-logistics", icon: Truck },
       ],
       faqItems: [
-        {
-          question: "Combien de temps faut-il pour créer une boutique Shopify ?",
-          answer: "Le délai moyen pour créer une boutique Shopify varie de 4 à 8 semaines, selon la complexité du projet. Ce délai comprend la phase de design, le développement, l'intégration des produits et les tests."
-        },
-        {
-          question: "Pouvez-vous migrer ma boutique existante vers Shopify ?",
-          answer: "Oui, nous proposons un service complet de migration de votre boutique existante vers Shopify, incluant le transfert des produits, des clients et des commandes, tout en assurant une transition en douceur."
-        },
-        {
-          question: "Quels types de personnalisation proposez-vous ?",
-          answer: "Nous offrons une personnalisation complète de votre boutique Shopify : design sur mesure, fonctionnalités personnalisées, intégrations spécifiques, et optimisation pour mobile."
-        },
-        {
-          question: "Proposez-vous un support après le lancement ?",
-          answer: "Oui, nous proposons plusieurs formules de support et maintenance pour assurer le bon fonctionnement de votre boutique après son lancement, incluant les mises à jour, les optimisations et le support technique."
-        },
-        {
-          question: "Comment assurez-vous la sécurité de ma boutique ?",
-          answer: "Nous mettons en place les meilleures pratiques de sécurité : SSL, conformité PCI DSS, sauvegardes régulières, et protection contre les fraudes. Shopify assure également une sécurité de niveau bancaire pour toutes les transactions."
-        }
+        { key: "creation-timeline" },
+        { key: "migration" },
+        { key: "customization-types" },
+        { key: "post-launch-support" },
+        { key: "security" },
       ],
       testimonials: [],
       complementaryServices: [
-        {
-          title: "Référencement SEO",
-          description: "Optimisation pour les moteurs de recherche pour augmenter votre visibilité.",
-          icon: Search
-        },
-        {
-          title: "Marketing digital",
-          description: "Stratégies marketing adaptées pour attirer et convertir plus de clients.",
-          icon: Share2
-        },
-        {
-          title: "Formation",
-          description: "Formation complète pour gérer votre boutique en toute autonomie.",
-          icon: MessageSquare
-        }
-      ]
+        { key: "seo", icon: Search },
+        { key: "digital-marketing", icon: Share2 },
+        { key: "training", icon: MessageSquare },
+      ],
     },
     {
       id: "wordpress",
-      name: "WordPress",
-      description: "Développement de sites WordPress sur mesure",
       route: Routes.service.integration.wordpress,
       icon: Globe,
-      heroTitle: "Développement WordPress sur mesure",
-      heroDescription: "Créez un site web professionnel qui vous ressemble avec WordPress. Notre expertise vous garantit un site performant, sécurisé et parfaitement adapté à vos besoins.",
       features: [
-        {
-          title: "Thèmes sur mesure",
-          description: "Création de thèmes personnalisés qui reflètent votre identité et répondent précisément à vos besoins.",
-          icon: Palette
-        },
-        {
-          title: "Performance optimisée",
-          description: "Optimisation poussée pour garantir des temps de chargement rapides et une expérience utilisateur fluide.",
-          icon: Rocket
-        },
-        {
-          title: "Sécurité renforcée",
-          description: "Mise en place des meilleures pratiques de sécurité pour protéger votre site et vos données.",
-          icon: Shield
-        },
-        {
-          title: "Administration simplifiée",
-          description: "Interface d'administration personnalisée et intuitive pour une gestion facile de votre contenu.",
-          icon: Settings
-        }
+        { key: "custom-themes", icon: Palette },
+        { key: "optimized-performance", icon: Rocket },
+        { key: "enhanced-security", icon: Shield },
+        { key: "simplified-administration", icon: Settings },
       ],
       benefits: [
-        {
-          title: "Administration intuitive",
-          description: "Interface de gestion simple et intuitive pour gérer votre contenu en toute autonomie.",
-          icon: LayoutDashboard
-        },
-        {
-          title: "SEO optimisé",
-          description: "Structure optimisée pour le référencement naturel et outils SEO intégrés.",
-          icon: Search
-        },
-        {
-          title: "Extensions puissantes",
-          description: "Accès à des milliers de plugins pour étendre les fonctionnalités de votre site.",
-          icon: Box
-        },
-        {
-          title: "Performance maximale",
-          description: "Optimisation avancée des performances pour une expérience utilisateur optimale.",
-          icon: Zap
-        }
+        { key: "intuitive-administration", icon: LayoutDashboard },
+        { key: "seo-optimized", icon: Search },
+        { key: "powerful-extensions", icon: Box },
+        { key: "maximum-performance", icon: Zap },
       ],
       faqItems: [
-        {
-          question: "Combien de temps faut-il pour créer un site WordPress ?",
-          answer: "Le délai moyen pour créer un site WordPress varie de 4 à 12 semaines, selon la complexité du projet. Ce délai comprend la phase de design, le développement du thème sur mesure, l'intégration du contenu et les tests."
-        },
-        {
-          question: "Pouvez-vous migrer mon site existant vers WordPress ?",
-          answer: "Oui, nous proposons un service complet de migration vers WordPress, incluant le transfert du contenu, des images et des fonctionnalités, tout en préservant votre référencement."
-        },
-        {
-          question: "Comment gérez-vous la maintenance et les mises à jour ?",
-          answer: "Nous proposons différentes formules de maintenance incluant les mises à jour de sécurité, les sauvegardes régulières, les mises à jour de WordPress et des plugins, ainsi que le monitoring des performances."
-        },
-        {
-          question: "Mon site sera-t-il optimisé pour les mobiles ?",
-          answer: "Absolument. Tous nos développements WordPress sont responsive par défaut, garantissant une expérience optimale sur tous les appareils : ordinateurs, tablettes et smartphones."
-        },
-        {
-          question: "Quelle est votre approche en matière de sécurité ?",
-          answer: "Nous mettons en place une stratégie de sécurité complète : authentification forte, pare-feu applicatif, monitoring des tentatives d'intrusion, sauvegardes automatisées et mises à jour de sécurité régulières."
-        }
+        { key: "creation-timeline" },
+        { key: "migration" },
+        { key: "maintenance-updates" },
+        { key: "mobile-optimization" },
+        { key: "security-approach" },
       ],
       testimonials: [],
       complementaryServices: [
-        {
-          title: "Développement sur mesure",
-          description: "Création de fonctionnalités spécifiques pour répondre à vos besoins particuliers.",
-          icon: Code
-        },
-        {
-          title: "Marketing digital",
-          description: "Stratégies marketing adaptées pour augmenter votre visibilité en ligne.",
-          icon: Share2
-        },
-        {
-          title: "Formation WordPress",
-          description: "Formation personnalisée pour maîtriser la gestion de votre site.",
-          icon: MessageSquare
-        }
-      ]
+        { key: "custom-development", icon: Code },
+        { key: "digital-marketing", icon: Share2 },
+        { key: "wordpress-training", icon: MessageSquare },
+      ],
     },
     {
       id: "webflow",
-      name: "Webflow",
-      description: "Création de sites web modernes avec Webflow",
       route: Routes.service.integration.webflow,
       icon: Box,
-      heroTitle: "Développement Webflow professionnel",
-      heroDescription: "Donnez vie à votre vision avec Webflow. Notre expertise vous garantit un site web moderne, interactif et parfaitement adapté à vos besoins, sans compromis sur la qualité.",
       features: [
-        {
-          title: "Design visuel avancé",
-          description: "Création d'interfaces uniques et animations sophistiquées sans les limitations du codage traditionnel.",
-          icon: Palette
-        },
-        {
-          title: "Performance optimale",
-          description: "Sites rapides et réactifs optimisés pour tous les appareils et navigateurs.",
-          icon: Rocket
-        },
-        {
-          title: "Interactions riches",
-          description: "Animations et interactions utilisateur fluides pour une expérience web moderne et engageante.",
-          icon: MousePointer
-        },
-        {
-          title: "CMS intégré",
-          description: "Système de gestion de contenu puissant et flexible pour une mise à jour facile.",
-          icon: Settings
-        }
+        { key: "advanced-visual-design", icon: Palette },
+        { key: "optimal-performance", icon: Rocket },
+        { key: "rich-interactions", icon: MousePointer },
+        { key: "integrated-cms", icon: Settings },
       ],
       benefits: [
-        {
-          title: "Développement visuel",
-          description: "Création de sites complexes sans écrire de code, tout en gardant un contrôle total sur le design.",
-          icon: LayoutDashboard
-        },
-        {
-          title: "SEO natif",
-          description: "Outils de référencement intégrés et structure optimisée pour les moteurs de recherche.",
-          icon: Search
-        },
-        {
-          title: "Responsive par défaut",
-          description: "Design parfaitement adapté à tous les écrans, des mobiles aux grands écrans.",
-          icon: Layers
-        },
-        {
-          title: "Hébergement optimisé",
-          description: "Infrastructure cloud robuste avec CDN global pour des performances optimales.",
-          icon: Zap
-        }
+        { key: "visual-development", icon: LayoutDashboard },
+        { key: "native-seo", icon: Search },
+        { key: "responsive-by-default", icon: Layers },
+        { key: "optimized-hosting", icon: Zap },
       ],
       faqItems: [
-        {
-          question: "Combien de temps faut-il pour créer un site Webflow ?",
-          answer: "Le délai moyen pour créer un site Webflow varie de 3 à 8 semaines, selon la complexité du projet. Ce délai comprend la conception, le développement des interactions, l'intégration du contenu et les tests."
-        },
-        {
-          question: "Puis-je facilement mettre à jour mon site moi-même ?",
-          answer: "Absolument ! Webflow dispose d'un CMS intuitif que nous personnalisons selon vos besoins. Nous vous formons à son utilisation pour que vous puissiez gérer votre contenu en toute autonomie."
-        },
-        {
-          question: "Webflow est-il adapté aux sites e-commerce ?",
-          answer: "Oui, Webflow propose une solution e-commerce robuste que nous pouvons personnaliser pour créer votre boutique en ligne avec des fonctionnalités avancées et un design sur mesure."
-        },
-        {
-          question: "Comment gérez-vous les animations et interactions ?",
-          answer: "Webflow permet de créer des animations et interactions sophistiquées sans code. Nous concevons des expériences interactives fluides et professionnelles tout en maintenant des performances optimales."
-        },
-        {
-          question: "Quelle est la qualité du référencement avec Webflow ?",
-          answer: "Webflow génère un code propre et optimisé pour le SEO. Nous mettons en place les meilleures pratiques de référencement pour maximiser votre visibilité sur les moteurs de recherche."
-        }
+        { key: "creation-timeline" },
+        { key: "self-update" },
+        { key: "ecommerce" },
+        { key: "animations-interactions" },
+        { key: "seo-quality" },
       ],
       testimonials: [],
       complementaryServices: [
-        {
-          title: "Intégrations personnalisées",
-          description: "Connection avec vos outils et services tiers préférés.",
-          icon: Code
-        },
-        {
-          title: "Stratégie digitale",
-          description: "Accompagnement dans votre stratégie de présence en ligne.",
-          icon: Share2
-        },
-        {
-          title: "Formation Webflow",
-          description: "Formation sur mesure pour maîtriser la gestion de votre site.",
-          icon: MessageSquare
-        }
-      ]
+        { key: "custom-integrations", icon: Code },
+        { key: "digital-strategy", icon: Share2 },
+        { key: "webflow-training", icon: MessageSquare },
+      ],
     },
     {
       id: "squarespace",
-      name: "SquareSpace",
-      description: "Intégration et personnalisation sur SquareSpace",
       route: Routes.service.integration.squarespace,
       icon: Layers,
-      heroTitle: "Sites web élégants avec Squarespace",
-      heroDescription: "Créez une présence en ligne raffinée avec Squarespace. Notre expertise vous garantit un site web esthétique, fonctionnel et parfaitement adapté à votre image de marque.",
       features: [
-        {
-          title: "Design minimaliste",
-          description: "Création de sites élégants et épurés qui mettent en valeur votre contenu et votre marque.",
-          icon: Palette
-        },
-        {
-          title: "Expérience fluide",
-          description: "Navigation intuitive et performances optimisées pour une expérience utilisateur sans faille.",
-          icon: Rocket
-        },
-        {
-          title: "Gestion de contenu",
-          description: "Interface d'administration simple et intuitive pour gérer votre contenu facilement.",
-          icon: LayoutDashboard
-        },
-        {
-          title: "Intégration média",
-          description: "Mise en valeur optimale de vos images et médias avec des galeries dynamiques.",
-          icon: ImageIcon
-        }
+        { key: "minimalist-design", icon: Palette },
+        { key: "smooth-experience", icon: Rocket },
+        { key: "content-management", icon: LayoutDashboard },
+        { key: "media-integration", icon: ImageIcon },
       ],
       benefits: [
-        {
-          title: "Templates professionnels",
-          description: "Large choix de templates modernes et personnalisables pour tous les secteurs.",
-          icon: Shapes
-        },
-        {
-          title: "E-commerce intégré",
-          description: "Solutions de vente en ligne complètes et personnalisables.",
-          icon: ShoppingBag
-        },
-        {
-          title: "Performance optimale",
-          description: "Sites rapides et sécurisés hébergés sur une infrastructure robuste.",
-          icon: Zap
-        },
-        {
-          title: "Marketing intégré",
-          description: "Outils marketing et analyses statistiques pour développer votre activité.",
-          icon: Share2
-        }
+        { key: "professional-templates", icon: Shapes },
+        { key: "integrated-ecommerce", icon: ShoppingBag },
+        { key: "optimal-performance", icon: Zap },
+        { key: "integrated-marketing", icon: Share2 },
       ],
       faqItems: [
-        {
-          question: "Combien de temps faut-il pour créer un site Squarespace ?",
-          answer: "Le délai moyen pour créer un site Squarespace varie de 2 à 6 semaines, selon la complexité du projet. Ce délai comprend la sélection et personnalisation du template, l'intégration du contenu et les tests."
-        },
-        {
-          question: "Puis-je vendre des produits sur mon site Squarespace ?",
-          answer: "Oui, Squarespace propose une solution e-commerce complète que nous pouvons configurer pour vous permettre de vendre vos produits en ligne, avec gestion des stocks, paiements sécurisés et options d'expédition."
-        },
-        {
-          question: "Est-il facile de mettre à jour le contenu ?",
-          answer: "Absolument ! L'interface de Squarespace est très intuitive. Nous vous formons à son utilisation pour que vous puissiez gérer votre contenu en toute autonomie."
-        },
-        {
-          question: "Mon site sera-t-il optimisé pour le référencement ?",
-          answer: "Oui, nous mettons en place les meilleures pratiques SEO de Squarespace et configurons tous les éléments nécessaires pour optimiser votre visibilité sur les moteurs de recherche."
-        },
-        {
-          question: "Proposez-vous un service de maintenance ?",
-          answer: "Oui, nous proposons différentes formules de maintenance incluant les mises à jour, le support technique et l'optimisation continue de votre site Squarespace."
-        }
+        { key: "creation-timeline" },
+        { key: "product-sales" },
+        { key: "content-updates" },
+        { key: "seo-optimization" },
+        { key: "maintenance-service" },
       ],
       testimonials: [],
       complementaryServices: [
-        {
-          title: "Personnalisation avancée",
-          description: "Modifications CSS et Javascript pour personnaliser votre site au-delà des options standard.",
-          icon: Code
-        },
-        {
-          title: "Stratégie de contenu",
-          description: "Accompagnement dans la création et l'optimisation de votre contenu.",
-          icon: Share2
-        },
-        {
-          title: "Formation utilisateur",
-          description: "Formation complète pour maîtriser la gestion de votre site Squarespace.",
-          icon: MessageSquare
-        }
-      ]
+        { key: "advanced-customization", icon: Code },
+        { key: "content-strategy", icon: Share2 },
+        { key: "user-training", icon: MessageSquare },
+      ],
     },
     {
       id: "prestashop",
-      name: "PrestaShop",
-      description: "Développement de boutiques PrestaShop",
       route: Routes.service.integration.prestashop,
       icon: ShoppingBag,
-      heroTitle: "Développement e-commerce avec PrestaShop",
-      heroDescription: "Lancez une boutique en ligne professionnelle avec PrestaShop. Notre expertise vous garantit une solution e-commerce puissante, évolutive et parfaitement adaptée à vos besoins.",
       features: [
-        {
-          title: "Design personnalisé",
-          description: "Création de thèmes sur mesure qui reflètent votre marque et optimisent la conversion.",
-          icon: Palette
-        },
-        {
-          title: "Gestion avancée",
-          description: "Interface d'administration puissante pour gérer vos produits, commandes et clients.",
-          icon: LayoutDashboard
-        },
-        {
-          title: "Performance optimisée",
-          description: "Optimisation poussée pour des temps de chargement rapides et une expérience fluide.",
-          icon: Rocket
-        },
-        {
-          title: "Sécurité renforcée",
-          description: "Protection avancée de votre boutique et des données de vos clients.",
-          icon: Shield
-        }
+        { key: "custom-design", icon: Palette },
+        { key: "advanced-management", icon: LayoutDashboard },
+        { key: "optimized-performance", icon: Rocket },
+        { key: "enhanced-security", icon: Shield },
       ],
       benefits: [
-        {
-          title: "Gestion complète",
-          description: "Contrôle total sur vos produits, stocks, commandes et relations clients.",
-          icon: ShoppingBag
-        },
-        {
-          title: "Multi-boutiques",
-          description: "Gestion de plusieurs boutiques depuis une seule interface d'administration.",
-          icon: Globe
-        },
-        {
-          title: "Logistique intégrée",
-          description: "Gestion avancée des transporteurs et des frais de livraison.",
-          icon: Truck
-        },
-        {
-          title: "Analyses détaillées",
-          description: "Statistiques complètes pour suivre et optimiser vos performances.",
-          icon: BarChart
-        }
+        { key: "complete-management", icon: ShoppingBag },
+        { key: "multi-store", icon: Globe },
+        { key: "integrated-logistics", icon: Truck },
+        { key: "detailed-analytics", icon: BarChart },
       ],
       faqItems: [
-        {
-          question: "Combien de temps faut-il pour créer une boutique PrestaShop ?",
-          answer: "Le délai moyen pour créer une boutique PrestaShop varie de 6 à 12 semaines, selon la complexité du projet. Ce délai comprend la personnalisation du thème, le développement des fonctionnalités sur mesure, l'intégration des produits et les tests."
-        },
-        {
-          question: "Pouvez-vous migrer ma boutique existante vers PrestaShop ?",
-          answer: "Oui, nous proposons un service complet de migration vers PrestaShop, incluant le transfert des produits, clients, commandes et historiques, tout en préservant votre référencement."
-        },
-        {
-          question: "PrestaShop est-il adapté aux grands catalogues de produits ?",
-          answer: "Absolument ! PrestaShop est conçu pour gérer efficacement des catalogues de plusieurs milliers de produits avec des variations, tout en maintenant d'excellentes performances."
-        },
-        {
-          question: "Proposez-vous des développements sur mesure ?",
-          answer: "Oui, nous développons des modules et fonctionnalités sur mesure pour adapter PrestaShop à vos besoins spécifiques : intégrations ERP, processus métier personnalisés, etc."
-        },
-        {
-          question: "Comment gérez-vous la maintenance et les mises à jour ?",
-          answer: "Nous proposons différentes formules de maintenance incluant les mises à jour de sécurité, les sauvegardes, l'optimisation des performances et le support technique."
-        }
+        { key: "creation-timeline" },
+        { key: "migration" },
+        { key: "large-catalogs" },
+        { key: "custom-development" },
+        { key: "maintenance-updates" },
       ],
       testimonials: [],
       complementaryServices: [
-        {
-          title: "Modules sur mesure",
-          description: "Développement de fonctionnalités spécifiques pour votre activité.",
-          icon: Code
-        },
-        {
-          title: "Marketing digital",
-          description: "Stratégies marketing pour augmenter votre visibilité et vos ventes.",
-          icon: Share2
-        },
-        {
-          title: "Formation PrestaShop",
-          description: "Formation personnalisée pour maîtriser la gestion de votre boutique.",
-          icon: MessageSquare
-        }
-      ]
+        { key: "custom-modules", icon: Code },
+        { key: "digital-marketing", icon: Share2 },
+        { key: "prestashop-training", icon: MessageSquare },
+      ],
     },
     {
       id: "strapi",
-      name: "Strapi",
-      description: "Développement de CMS headless avec Strapi",
       route: Routes.service.integration.strapi,
       icon: Box,
-      heroTitle: "Développement CMS headless avec Strapi",
-      heroDescription: "Développez des applications modernes avec Strapi. Notre expertise vous garantit une solution de gestion de contenu flexible, évolutive et parfaitement adaptée à vos besoins.",
       features: [
-        {
-          title: "API sur mesure",
-          description: "Création d'APIs RESTful et GraphQL personnalisées pour tous vos besoins.",
-          icon: Code
-        },
-        {
-          title: "Administration flexible",
-          description: "Interface d'administration personnalisable selon vos processus métier.",
-          icon: LayoutDashboard
-        },
-        {
-          title: "Performance optimale",
-          description: "Architecture performante pour des temps de réponse rapides.",
-          icon: Rocket
-        },
-        {
-          title: "Sécurité avancée",
-          description: "Protection robuste de vos données et de vos APIs.",
-          icon: Shield
-        }
+        { key: "custom-api", icon: Code },
+        { key: "flexible-administration", icon: LayoutDashboard },
+        { key: "optimal-performance", icon: Rocket },
+        { key: "advanced-security", icon: Shield },
       ],
       benefits: [
-        {
-          title: "100% JavaScript",
-          description: "Développement unifié en JavaScript/Node.js pour plus d'efficacité.",
-          icon: Code
-        },
-        {
-          title: "Modèles flexibles",
-          description: "Création de modèles de contenu personnalisés sans contraintes.",
-          icon: Box
-        },
-        {
-          title: "Gestion des rôles",
-          description: "Contrôle précis des accès et des permissions utilisateurs.",
-          icon: Users
-        },
-        {
-          title: "Workflows avancés",
-          description: "Automatisation des processus de publication et de validation.",
-          icon: Settings
-        }
+        { key: "100-javascript", icon: Code },
+        { key: "flexible-models", icon: Box },
+        { key: "role-management", icon: Users },
+        { key: "advanced-workflows", icon: Settings },
       ],
       faqItems: [
-        {
-          question: "Combien de temps faut-il pour mettre en place un projet Strapi ?",
-          answer: "Le délai moyen pour mettre en place un projet Strapi varie de 4 à 12 semaines, selon la complexité. Ce délai comprend la conception des modèles de contenu, le développement des APIs, la personnalisation de l'administration et les tests."
-        },
-        {
-          question: "Strapi peut-il gérer des contenus multilingues ?",
-          answer: "Oui, Strapi gère nativement le contenu multilingue. Nous pouvons configurer et personnaliser la gestion des traductions selon vos besoins spécifiques."
-        },
-        {
-          question: "Est-il possible de migrer notre contenu existant vers Strapi ?",
-          answer: "Oui, nous proposons un service complet de migration de contenu vers Strapi, incluant l'analyse de vos données existantes, la création de modèles adaptés et l'import de vos contenus."
-        },
-        {
-          question: "Comment gérez-vous le déploiement et l'hébergement ?",
-          answer: "Nous pouvons déployer Strapi sur différentes plateformes cloud (AWS, Google Cloud, DigitalOcean...) et mettre en place une infrastructure scalable avec des environnements de développement, staging et production."
-        },
-        {
-          question: "Proposez-vous des développements de plugins personnalisés ?",
-          answer: "Oui, nous développons des plugins Strapi sur mesure pour étendre les fonctionnalités selon vos besoins : intégrations spécifiques, workflows personnalisés, interfaces d'administration dédiées, etc."
-        }
+        { key: "setup-timeline" },
+        { key: "multilingual" },
+        { key: "content-migration" },
+        { key: "deployment-hosting" },
+        { key: "custom-plugins" },
       ],
       testimonials: [],
       complementaryServices: [
-        {
-          title: "Développement frontend",
-          description: "Création d'applications frontend connectées à votre API Strapi.",
-          icon: Globe
-        },
-        {
-          title: "Intégrations",
-          description: "Connection avec vos outils et services tiers existants.",
-          icon: Share2
-        },
-        {
-          title: "Formation Strapi",
-          description: "Formation personnalisée pour maîtriser la gestion de votre CMS.",
-          icon: MessageSquare
-        }
-      ]
-    }
-  ]
+        { key: "frontend-development", icon: Globe },
+        { key: "integrations", icon: Share2 },
+        { key: "strapi-training", icon: MessageSquare },
+      ],
+    },
+  ],
 };
 
-export default integrationCategory;
\ No newline at end of file
+export default integrationCategory;
diff --git a/apps/web/src/locales/en/app/services/[category]/[service]/page.json b/apps/web/src/locales/en/app/services/[category]/[service]/page.json
new file mode 100644
index 000000000..35dfb2db9
--- /dev/null
+++ b/apps/web/src/locales/en/app/services/[category]/[service]/page.json
@@ -0,0 +1,28 @@
+{
+  "metadata": {
+    "not-found": {
+      "title": "Service not found",
+      "description": "This service does not exist."
+    }
+  },
+  "features": {
+    "title": "Excellence in {service}",
+    "description": "Our expertise in {service} guarantees you professional and high-performance solutions."
+  },
+  "benefits": {
+    "title": "Professional {service}",
+    "description": "Discover the advantages of a professional {service} service."
+  },
+  "testimonials": {
+    "title": "They trust us",
+    "description": "Discover our clients' feedback on their {service} projects"
+  },
+  "faq": {
+    "title": "Frequently asked questions",
+    "description": "Everything you need to know about our {service} service"
+  },
+  "complementary": {
+    "title": "Complementary services",
+    "description": "Optimize your {service} project with our additional services"
+  }
+}
diff --git a/apps/web/src/locales/en/app/services/page.json b/apps/web/src/locales/en/app/services/page.json
index fcdeee787..2edee7311 100644
--- a/apps/web/src/locales/en/app/services/page.json
+++ b/apps/web/src/locales/en/app/services/page.json
@@ -2,5 +2,18 @@
   "metadata": {
     "title": "Digital services agency: web, mobile and UI/UX design",
     "description": "Complete web development, mobile, UI/UX design and CMS integration services. Our agency creates custom solutions tailored to your goals."
+  },
+  "hero": {
+    "title": "Custom solutions for your digital projects",
+    "description": "From conception to delivery, we support you at every stage of your project with expertise and passion.",
+    "cta": "Start a project"
+  },
+  "technologies": {
+    "title": "Our technology stack",
+    "description": "We master a wide range of modern technologies to meet all your needs."
+  },
+  "process": {
+    "title": "Our work process",
+    "description": "A proven and flexible methodology to lead your project to success."
   }
 }
diff --git a/apps/web/src/locales/en/components/marketing/services/service-layout.json b/apps/web/src/locales/en/components/marketing/services/service-layout.json
new file mode 100644
index 000000000..4597c7399
--- /dev/null
+++ b/apps/web/src/locales/en/components/marketing/services/service-layout.json
@@ -0,0 +1,28 @@
+{
+  "hero": {
+    "cta": "Discuss your project"
+  },
+  "cards": {
+    "custom": {
+      "title": "Custom solutions",
+      "description": "Tailored to your needs"
+    },
+    "support": {
+      "title": "Expert support",
+      "description": "By our specialists"
+    },
+    "technologies": {
+      "title": "Modern technologies",
+      "description": "Always up to date"
+    },
+    "scalability": {
+      "title": "Guaranteed scalability",
+      "description": "For your growth"
+    }
+  },
+  "cta": {
+    "title": "Ready to bring your project to life?",
+    "description": "Contact us to discuss your needs and get a personalized quote.",
+    "button": "Get started now"
+  }
+}
diff --git a/apps/web/src/locales/en/components/marketing/services/service-overview.json b/apps/web/src/locales/en/components/marketing/services/service-overview.json
new file mode 100644
index 000000000..2147ed00a
--- /dev/null
+++ b/apps/web/src/locales/en/components/marketing/services/service-overview.json
@@ -0,0 +1,29 @@
+{
+  "hero": {
+    "cta": "Discuss your project"
+  },
+  "expertise": {
+    "title": "Deep expertise in {service}",
+    "description": "We combine creativity and technical expertise to deliver {service} solutions that perfectly meet your objectives. Our methodical approach and experience allow us to create sustainable and scalable solutions."
+  },
+  "services": {
+    "badge": "Our services",
+    "title": "Custom {service} solutions",
+    "description": "Discover our complete range of {service} services, designed to meet all your needs and support you in achieving your projects.",
+    "learnMore": "Learn more"
+  },
+  "benefits": {
+    "badge": "Benefits",
+    "title": "Why choose our {service} services?"
+  },
+  "process": {
+    "badge": "Our process",
+    "title": "How we work",
+    "description": "An integrated approach that combines our different areas of expertise for optimal results."
+  },
+  "cta": {
+    "title": "Ready to bring your project to life?",
+    "description": "Contact us to discuss your needs and get a personalized quote.",
+    "button": "Get started now"
+  }
+}
diff --git a/apps/web/src/locales/en/constants/services/backend.json b/apps/web/src/locales/en/constants/services/backend.json
new file mode 100644
index 000000000..d27ad5f7b
--- /dev/null
+++ b/apps/web/src/locales/en/constants/services/backend.json
@@ -0,0 +1,56 @@
+{
+  "name": "Back-end Development",
+  "description": "Architecture and development of robust solutions",
+  "benefits": {
+    "scalable-architecture": {
+      "title": "Scalable architecture",
+      "description": "Systems designed to evolve with your growth, using modern and distributed architectures."
+    },
+    "optimized-database": {
+      "title": "Optimized database",
+      "description": "Database design and optimization for maximum performance and data integrity."
+    },
+    "robust-infrastructure": {
+      "title": "Robust infrastructure",
+      "description": "Deployment on modern cloud infrastructure with high availability and resilience."
+    },
+    "advanced-security": {
+      "title": "Advanced security",
+      "description": "Implementation of security best practices and protection of sensitive data."
+    }
+  },
+  "process": {
+    "needs-analysis": {
+      "title": "Needs analysis",
+      "description": "In-depth study of technical requirements, architecture definition and technology choices."
+    },
+    "system-design": {
+      "title": "System design",
+      "description": "Backend architecture design, data modeling and API definition."
+    },
+    "api-development": {
+      "title": "API development",
+      "description": "Implementation of RESTful or GraphQL APIs with complete documentation."
+    },
+    "database": {
+      "title": "Database",
+      "description": "Database setup and optimization with focus on performance and scalability."
+    },
+    "testing-security": {
+      "title": "Testing and security",
+      "description": "Implementation of automated tests and advanced security measures."
+    },
+    "deployment-monitoring": {
+      "title": "Deployment and monitoring",
+      "description": "Setting up cloud infrastructure, monitoring and alerts."
+    }
+  },
+  "process-services": {
+    "needs-analysis": ["Architecture", "Technical consulting"],
+    "system-design": ["Architecture", "Database Design"],
+    "api-development": ["API Development", "Documentation"],
+    "database": ["Database", "Optimization"],
+    "testing-security": ["Tests", "Security"],
+    "deployment-monitoring": ["DevOps", "Monitoring"]
+  }
+}
diff --git a/apps/web/src/locales/en/constants/services/backend/api.json b/apps/web/src/locales/en/constants/services/backend/api.json
new file mode 100644
index 000000000..c08ad8038
--- /dev/null
+++ b/apps/web/src/locales/en/constants/services/backend/api.json
@@ -0,0 +1,80 @@
+{
+  "name": "RESTful APIs",
+  "description": "Design and development of high-performance APIs",
+  "hero": {
+    "title": "RESTful & GraphQL APIs",
+    "description": "Develop modern, secure and high-performance APIs for your applications. Our expertise guarantees robust and scalable interfaces that meet your specific needs."
+  },
+  "features": {
+    "rest-graphql": {
+      "title": "REST & GraphQL",
+      "description": "Development of modern APIs with industry standards."
+    },
+    "advanced-security": {
+      "title": "Advanced security",
+      "description": "Robust protection against vulnerabilities and attacks."
+    },
+    "optimal-performance": {
+      "title": "Optimal performance",
+      "description": "Architecture optimized for minimal response times."
+    },
+    "complete-documentation": {
+      "title": "Complete documentation",
+      "description": "Clear and interactive documentation for easy integration."
+    }
+  },
+  "benefits": {
+    "high-availability": {
+      "title": "High availability",
+      "description": "Redundant infrastructure for maximum availability."
+    },
+    "scalability": {
+      "title": "Scalability",
+      "description": "Architecture designed to support growth."
+    },
+    "advanced-monitoring": {
+      "title": "Advanced monitoring",
+      "description": "Real-time tracking of performance and health."
+    },
+    "intelligent-cache": {
+      "title": "Intelligent cache",
+      "description": "Performance optimization with advanced caching."
+    }
+  },
+  "faq": {
+    "rest-vs-graphql": {
+      "question": "What is the difference between REST and GraphQL?",
+      "answer": "REST is a traditional architecture where each endpoint corresponds to a specific resource, while GraphQL allows clients to request exactly the data they need. We advise you on the best approach based on your specific needs and use cases."
+    },
+    "api-security": {
+      "question": "How do you ensure API security?",
+      "answer": "We implement multiple security layers: JWT authentication, SSL/TLS encryption, rate limiting, data validation, protection against injections and CSRF attacks. We also follow OWASP recommendations for API security."
+    },
+    "scaling": {
+      "question": "How do you handle scaling?",
+      "answer": "We design horizontally scalable APIs, with load balancing, distributed caching, and query optimization. The architecture is designed to support significant traffic growth."
+    },
+    "documentation": {
+      "question": "What documentation do you provide?",
+      "answer": "We provide comprehensive documentation: OpenAPI/Swagger technical documentation, integration guides, code examples, and test environment. Documentation is kept up to date with each API evolution."
+    },
+    "post-deployment-support": {
+      "question": "Do you offer post-deployment support?",
+      "answer": "Yes, we offer several maintenance plans including: 24/7 monitoring, technical support, continuous performance optimization, security updates and functional evolutions."
+    }
+  },
+  "complementary": {
+    "advanced-analytics": {
+      "title": "Advanced analytics",
+      "description": "Detailed analysis of usage and performance."
+    },
+    "data-migration": {
+      "title": "Data migration",
+      "description": "Migration from your existing systems."
+    },
+    "integration": {
+      "title": "Integration",
+      "description": "Support for integration with your applications."
+    }
+  }
+}
diff --git a/apps/web/src/locales/en/constants/services/backend/bots.json b/apps/web/src/locales/en/constants/services/backend/bots.json
new file mode 100644
index 000000000..0ae7d38c4
--- /dev/null
+++ b/apps/web/src/locales/en/constants/services/backend/bots.json
@@ -0,0 +1,80 @@
+{
+  "name": "Discord/Slack Bots",
+  "description": "Development of bots and automations",
+  "hero": {
+    "title": "Bots & Automations",
+    "description": "Develop intelligent bots and automations to improve engagement and productivity of your community. Our expertise guarantees reliable and high-performance bots for Discord, Slack and other platforms."
+  },
+  "features": {
+    "discord-slack": {
+      "title": "Discord & Slack",
+      "description": "Custom bots for major communication platforms."
+    },
+    "advanced-commands": {
+      "title": "Advanced commands",
+      "description": "Intuitive interface with customizable commands."
+    },
+    "optimal-performance": {
+      "title": "Optimal performance",
+      "description": "Architecture optimized for maximum responsiveness."
+    },
+    "integrations": {
+      "title": "Integrations",
+      "description": "Connection with your existing tools and services."
+    }
+  },
+  "benefits": {
+    "intelligent-moderation": {
+      "title": "Intelligent moderation",
+      "description": "Automated management of your community and moderation."
+    },
+    "notifications": {
+      "title": "Notifications",
+      "description": "Custom alerts and automatic updates."
+    },
+    "engagement": {
+      "title": "Engagement",
+      "description": "Interactive features to animate your community."
+    },
+    "statistics": {
+      "title": "Statistics",
+      "description": "Detailed tracking of activity and interactions."
+    }
+  },
+  "faq": {
+    "bot-types": {
+      "question": "What types of bots can you develop?",
+      "answer": "We develop bots for various platforms (Discord, Slack, Telegram) with different features: moderation, customer support, task automation, statistics, games and community activities. Each bot is customized according to your specific needs."
+    },
+    "bot-reliability": {
+      "question": "How do you ensure bot reliability?",
+      "answer": "We implement several mechanisms: 24/7 monitoring, automatic restart in case of problems, detailed logs, and real-time alerts. We also perform thorough testing before each deployment."
+    },
+    "customization": {
+      "question": "Can commands and features be customized?",
+      "answer": "Yes, all our bots are fully customizable: commands, responses, permissions, integrations. We adapt each feature to your needs and moderation guidelines."
+    },
+    "security": {
+      "question": "How do you handle security?",
+      "answer": "Security is a priority: secure authentication, granular permissions, input validation, protection against spam and abuse. We follow each platform's best practices."
+    },
+    "post-deployment-support": {
+      "question": "Do you offer post-deployment support?",
+      "answer": "Yes, we offer several maintenance plans including: 24/7 monitoring, regular updates, technical support, and functional evolutions according to your needs."
+    }
+  },
+  "complementary": {
+    "analytics": {
+      "title": "Analytics",
+      "description": "Detailed tracking of usage and interactions."
+    },
+    "support-24-7": {
+      "title": "24/7 Support",
+      "description": "Continuous monitoring and rapid intervention."
+    },
+    "evolutions": {
+      "title": "Evolutions",
+      "description": "Regular addition of new features."
+    }
+  }
+}
diff --git a/apps/web/src/locales/en/constants/services/backend/cloud.json b/apps/web/src/locales/en/constants/services/backend/cloud.json
new file mode 100644
index 000000000..dd4169e7e
--- /dev/null
+++ b/apps/web/src/locales/en/constants/services/backend/cloud.json
@@ -0,0 +1,80 @@
+{
+  "name": "Cloud Solutions",
+  "description": "Cloud infrastructure deployment and management",
+  "hero": {
+    "title": "Cloud Solutions",
+    "description": "Optimize your infrastructure with modern and scalable cloud solutions. Our expertise guarantees secure and high-performance deployment on major cloud platforms."
+  },
+  "features": {
+    "multi-cloud": {
+      "title": "Multi-cloud",
+      "description": "Support for major platforms (AWS, GCP, Azure)."
+    },
+    "advanced-security": {
+      "title": "Advanced security",
+      "description": "Robust protection of your data and applications."
+    },
+    "optimal-performance": {
+      "title": "Optimal performance",
+      "description": "Architecture optimized for maximum performance."
+    },
+    "automatic-scalability": {
+      "title": "Automatic scalability",
+      "description": "Dynamic adaptation to load requirements."
+    }
+  },
+  "benefits": {
+    "high-availability": {
+      "title": "High availability",
+      "description": "Redundant and resilient infrastructure."
+    },
+    "elastic-storage": {
+      "title": "Elastic storage",
+      "description": "Flexible and secure data management."
+    },
+    "advanced-monitoring": {
+      "title": "Advanced monitoring",
+      "description": "Real-time monitoring of your infrastructure."
+    },
+    "enhanced-security": {
+      "title": "Enhanced security",
+      "description": "Multi-layer protection of your resources."
+    }
+  },
+  "faq": {
+    "platform-choice": {
+      "question": "Which cloud platform to choose?",
+      "answer": "The choice depends on your specific needs: AWS excels in service variety, Google Cloud in machine learning, and Azure in Microsoft integration. We guide you to the best solution based on your objectives, technical constraints and budget."
+    },
+    "cloud-security": {
+      "question": "How do you handle security in the cloud?",
+      "answer": "We implement multi-layer security: data encryption at rest and in transit, IAM access control, virtual private networks (VPC), web application firewalls (WAF), and continuous threat monitoring. We follow each platform's best practices."
+    },
+    "cost-optimization": {
+      "question": "How do you optimize costs?",
+      "answer": "We use several strategies: reserved instances, automatic scaling, resource optimization, removal of unused resources, and cost monitoring. We perform regular audits to identify savings opportunities."
+    },
+    "high-availability": {
+      "question": "How do you ensure high availability?",
+      "answer": "We deploy your infrastructure across multiple availability zones, with data replication, load balancing, and automatic failover. We also set up robust disaster recovery plans (DRP)."
+    },
+    "support-24-7": {
+      "question": "Do you offer 24/7 support?",
+      "answer": "Yes, we offer several support levels including: 24/7 monitoring, automatic alerting, rapid incident intervention, preventive maintenance, and dedicated technical support."
+    }
+  },
+  "complementary": {
+    "cloud-migration": {
+      "title": "Cloud migration",
+      "description": "Smooth transition to the cloud."
+    },
+    "multi-region": {
+      "title": "Multi-region",
+      "description": "Global deployment of your applications."
+    },
+    "devops": {
+      "title": "DevOps",
+      "description": "Automation and CI/CD in the cloud."
+    }
+  }
+}
diff --git a/apps/web/src/locales/en/constants/services/backend/database.json b/apps/web/src/locales/en/constants/services/backend/database.json
new file mode 100644
index 000000000..38216b781
--- /dev/null
+++ b/apps/web/src/locales/en/constants/services/backend/database.json
@@ -0,0 +1,80 @@
+{
+  "name": "Databases",
+  "description": "Database architecture and optimization",
+  "hero": {
+    "title": "Database Architecture",
+    "description": "Design and optimize your databases for optimal performance and maximum scalability. Our expertise guarantees a robust architecture that meets your current and future needs."
+  },
+  "features": {
+    "optimized-architecture": {
+      "title": "Optimized architecture",
+      "description": "Intelligent design of schemas and relationships for optimal performance."
+    },
+    "enhanced-security": {
+      "title": "Enhanced security",
+      "description": "Robust protection of sensitive data and compliance with standards."
+    },
+    "high-performance": {
+      "title": "High performance",
+      "description": "Query and index optimization for minimal response times."
+    },
+    "backup-recovery": {
+      "title": "Backup & Recovery",
+      "description": "Reliable backup and restoration strategies."
+    }
+  },
+  "benefits": {
+    "horizontal-scalability": {
+      "title": "Horizontal scalability",
+      "description": "Architecture designed for growth and scaling."
+    },
+    "replication": {
+      "title": "Replication",
+      "description": "High availability and geographic distribution of data."
+    },
+    "advanced-monitoring": {
+      "title": "Advanced monitoring",
+      "description": "Real-time tracking of performance and health."
+    },
+    "optimized-search": {
+      "title": "Optimized search",
+      "description": "Intelligent indexing for fast searches."
+    }
+  },
+  "faq": {
+    "sql-vs-nosql": {
+      "question": "How to choose between SQL and NoSQL?",
+      "answer": "The choice depends on your specific needs. SQL databases are ideal for structured data with complex relationships, while NoSQL excels at handling unstructured data and horizontal scalability. We guide you to the best solution based on your use cases."
+    },
+    "data-security": {
+      "question": "How do you handle data security?",
+      "answer": "We implement multiple security layers: encryption of sensitive data, granular access control, access auditing, regular backups, and compliance with security standards (GDPR, etc.). We also perform regular security tests."
+    },
+    "performance-optimization": {
+      "question": "How do you optimize performance?",
+      "answer": "We use several techniques: schema and query optimization, intelligent indexing, caching, data partitioning, and continuous monitoring. We regularly analyze performance to identify optimization opportunities."
+    },
+    "migration-services": {
+      "question": "Do you offer migration services?",
+      "answer": "Yes, we handle database migrations end-to-end: analysis of existing systems, planning, testing, data migration with minimal interruption, and post-migration validation. We ensure data consistency and integrity."
+    },
+    "data-availability": {
+      "question": "How do you ensure data availability?",
+      "answer": "We set up highly available architectures with replication, clustering, and disaster recovery plans. We perform regular backups and test restoration procedures."
+    }
+  },
+  "complementary": {
+    "data-migration": {
+      "title": "Data migration",
+      "description": "Secure transfer from your existing systems."
+    },
+    "audit-optimization": {
+      "title": "Audit & Optimization",
+      "description": "Performance analysis and recommendations."
+    },
+    "monitoring-24-7": {
+      "title": "24/7 Monitoring",
+      "description": "Continuous surveillance and real-time alerts."
+    }
+  }
+}
diff --git a/apps/web/src/locales/en/constants/services/backend/microservices.json b/apps/web/src/locales/en/constants/services/backend/microservices.json
new file mode 100644
index 000000000..c14bd3f0f
--- /dev/null
+++ b/apps/web/src/locales/en/constants/services/backend/microservices.json
@@ -0,0 +1,80 @@
+{
+  "name": "Microservices",
+  "description": "Microservices architecture and development",
+  "hero": {
+    "title": "Microservices Architecture",
+    "description": "Transform your monolithic applications into modern and scalable microservices architectures. Our expertise guarantees flexible, resilient and high-performance infrastructure."
+  },
+  "features": {
+    "scalable-architecture": {
+      "title": "Scalable architecture",
+      "description": "Modular design for optimal scalability."
+    },
+    "continuous-deployment": {
+      "title": "Continuous deployment",
+      "description": "CI/CD pipeline for smooth updates."
+    },
+    "optimal-performance": {
+      "title": "Optimal performance",
+      "description": "Independent services for better responsiveness."
+    },
+    "high-availability": {
+      "title": "High availability",
+      "description": "Resilient architecture with redundancy."
+    }
+  },
+  "benefits": {
+    "granular-scalability": {
+      "title": "Granular scalability",
+      "description": "Independent scaling of each service."
+    },
+    "flexible-deployment": {
+      "title": "Flexible deployment",
+      "description": "Updates without service interruption."
+    },
+    "fault-isolation": {
+      "title": "Fault isolation",
+      "description": "Increased resilience through service isolation."
+    },
+    "advanced-monitoring": {
+      "title": "Advanced monitoring",
+      "description": "Detailed surveillance of each component."
+    }
+  },
+  "faq": {
+    "when-microservices": {
+      "question": "When to adopt a microservices architecture?",
+      "answer": "Microservices architecture is particularly suitable for complex applications requiring high scalability, independent component scaling, and rapid evolution. We evaluate with you whether this architecture matches your specific needs."
+    },
+    "service-communication": {
+      "question": "How do you handle communication between services?",
+      "answer": "We implement robust communication patterns: API Gateway, message brokers (Kafka, RabbitMQ), synchronous (REST, gRPC) and asynchronous communication. Each method is chosen according to specific performance and reliability needs."
+    },
+    "data-consistency": {
+      "question": "How do you ensure data consistency?",
+      "answer": "We use several strategies: Saga pattern for distributed transactions, Event Sourcing for traceability, and CQRS for separation of read and write operations. Eventual consistency is managed appropriately."
+    },
+    "infrastructure-monitoring": {
+      "question": "How do you monitor the infrastructure?",
+      "answer": "We set up comprehensive monitoring: performance metrics, distributed tracing, centralized logs, and intelligent alerting. Custom dashboards allow visualizing the health of each service."
+    },
+    "team-training": {
+      "question": "Do you offer team training?",
+      "answer": "Yes, we offer comprehensive training for your teams: microservices principles, development best practices, monitoring and troubleshooting, and use of DevOps tools."
+    }
+  },
+  "complementary": {
+    "devops-cicd": {
+      "title": "DevOps & CI/CD",
+      "description": "Complete deployment automation."
+    },
+    "monitoring-24-7": {
+      "title": "24/7 Monitoring",
+      "description": "Continuous surveillance and real-time alerts."
+    },
+    "optimization": {
+      "title": "Optimization",
+      "description": "Continuous performance improvement."
+    }
+  }
+}
diff --git a/apps/web/src/locales/en/constants/services/design.json b/apps/web/src/locales/en/constants/services/design.json
new file mode 100644
index 000000000..6799496fd
--- /dev/null
+++ b/apps/web/src/locales/en/constants/services/design.json
@@ -0,0 +1,56 @@
+{
+  "name": "UI/UX Design",
+  "description": "Creating modern interfaces and optimal user experiences",
+  "benefits": {
+    "user-centered-design": {
+      "title": "User-centered UI/UX design",
+      "description": "An approach that places user needs at the heart of our designs, validated by interactive prototypes."
+    },
+    "creative-innovation": {
+      "title": "Creative innovation",
+      "description": "Creative UI/UX solutions and innovative prototypes that set your brand apart while respecting standards."
+    },
+    "iterative-prototyping": {
+      "title": "Iterative prototyping",
+      "description": "A methodology based on rapid prototypes and frequent iterations to refine the user experience."
+    },
+    "business-objectives": {
+      "title": "Business objectives",
+      "description": "UI/UX design aligned with your business goals, validated by user testing on prototypes."
+    }
+  },
+  "process": {
+    "needs-analysis": {
+      "title": "Needs analysis",
+      "description": "Crucial first step where we analyze your needs, brand and business objectives to define the UI/UX direction."
+    },
+    "research-moodboard": {
+      "title": "Research and moodboard",
+      "description": "Creating moodboards and exploring possible creative directions. Defining the overall artistic direction."
+    },
+    "wireframes": {
+      "title": "Wireframes",
+      "description": "Designing wireframes to validate structure, hierarchy and information architecture."
+    },
+    "interface-design": {
+      "title": "Interface design",
+      "description": "Creating final mockups while respecting your brand guidelines. Special attention to components and their reusability."
+    },
+    "prototyping": {
+      "title": "Prototyping",
+      "description": "Creating prototypes to test interactions and validate user journeys."
+    },
+    "development": {
+      "title": "Development",
+      "description": "Transforming mockups into functional interfaces, with particular attention to defined animations."
+    }
+  },
+  "process-services": {
+    "needs-analysis": ["UI/UX Design"],
+    "research-moodboard": ["UI/UX Design", "Moodboard"],
+    "wireframes": ["UI/UX Design", "Wireframes"],
+    "interface-design": ["UI/UX Design"],
+    "prototyping": ["UI/UX Design"],
+    "development": ["Frontend Development", "Integration"]
+  }
+}
diff --git a/apps/web/src/locales/en/constants/services/design/audit.json b/apps/web/src/locales/en/constants/services/design/audit.json
new file mode 100644
index 000000000..570a0a57e
--- /dev/null
+++ b/apps/web/src/locales/en/constants/services/design/audit.json
@@ -0,0 +1,80 @@
+{
+  "name": "UX/UI Audit",
+  "description": "Analysis and optimization of your existing interfaces",
+  "hero": {
+    "title": "UX/UI Audit & Optimization",
+    "description": "Improve the user experience of your interfaces with a professional audit. Our expertise guarantees an in-depth analysis and concrete recommendations to optimize your interfaces."
+  },
+  "features": {
+    "heuristic-analysis": {
+      "title": "Heuristic analysis",
+      "description": "Expert evaluation based on UX principles."
+    },
+    "user-testing": {
+      "title": "User testing",
+      "description": "Observation and analysis of real behaviors."
+    },
+    "analytics": {
+      "title": "Analytics",
+      "description": "Analysis of usage data."
+    },
+    "accessibility": {
+      "title": "Accessibility",
+      "description": "Verification of accessibility standards."
+    }
+  },
+  "benefits": {
+    "conversion": {
+      "title": "Conversion",
+      "description": "Identification of conversion barriers."
+    },
+    "performance": {
+      "title": "Performance",
+      "description": "Analysis of performance metrics."
+    },
+    "satisfaction": {
+      "title": "Satisfaction",
+      "description": "Measurement of user satisfaction."
+    },
+    "journeys": {
+      "title": "Journeys",
+      "description": "Optimization of user journeys."
+    }
+  },
+  "faq": {
+    "complete-audit": {
+      "question": "What does a complete UX/UI audit include?",
+      "answer": "A complete audit includes: heuristic analysis based on UX principles, user testing, analytics data analysis, accessibility evaluation, competitive benchmark, and detailed recommendations. We provide a comprehensive report with concrete solutions."
+    },
+    "audit-process": {
+      "question": "How does the audit process work?",
+      "answer": "The process begins with a discovery phase to understand your objectives and KPIs. We then perform various analyses (heuristic, data, testing), synthesize results, and prepare a detailed report with prioritized recommendations."
+    },
+    "deliverables": {
+      "question": "What deliverables are provided?",
+      "answer": "You receive a complete audit report including: executive summary, detailed analyses, data visualizations, identified issues with severity levels, prioritized recommendations, and suggested action plan."
+    },
+    "measuring-impact": {
+      "question": "How do you measure the impact of recommendations?",
+      "answer": "We define specific KPIs for each recommendation and set up tracking of key metrics (conversion rate, user satisfaction, task completion time, etc.) to measure the impact of improvements."
+    },
+    "post-audit-support": {
+      "question": "Do you offer post-audit support?",
+      "answer": "Yes, we offer support for implementing recommendations, including: action prioritization, implementation support, and results measurement. We can also conduct follow-up audits."
+    }
+  },
+  "complementary": {
+    "user-testing": {
+      "title": "User testing",
+      "description": "In-depth testing sessions with your users."
+    },
+    "advanced-analytics": {
+      "title": "Advanced analytics",
+      "description": "Setting up tracking and in-depth analysis."
+    },
+    "ux-training": {
+      "title": "UX training",
+      "description": "Training your teams in best practices."
+    }
+  }
+}
diff --git a/apps/web/src/locales/en/constants/services/design/branding.json b/apps/web/src/locales/en/constants/services/design/branding.json
new file mode 100644
index 000000000..ef731f93b
--- /dev/null
+++ b/apps/web/src/locales/en/constants/services/design/branding.json
@@ -0,0 +1,80 @@
+{
+  "name": "Brand guidelines",
+  "description": "Creating your complete visual identity",
+  "hero": {
+    "title": "Branding & Brand Identity",
+    "description": "Bring your brand to life with a distinctive and memorable visual identity. Our branding expertise helps you create a brand image that resonates with your audience and reflects your values."
+  },
+  "features": {
+    "visual-identity": {
+      "title": "Visual identity",
+      "description": "Creating a unique and memorable identity."
+    },
+    "brand-values": {
+      "title": "Brand values",
+      "description": "Visual expression of your DNA and values."
+    },
+    "brand-guidelines": {
+      "title": "Brand guidelines",
+      "description": "Complete documentation of your identity."
+    },
+    "design-system": {
+      "title": "Design system",
+      "description": "Consistent and reusable visual elements."
+    }
+  },
+  "benefits": {
+    "recognition": {
+      "title": "Recognition",
+      "description": "Memorable and distinctive brand image."
+    },
+    "consistency": {
+      "title": "Consistency",
+      "description": "Unified visual communication across all media."
+    },
+    "trust": {
+      "title": "Trust",
+      "description": "Enhanced credibility with your audience."
+    },
+    "reach": {
+      "title": "Reach",
+      "description": "Strong visual impact across all channels."
+    }
+  },
+  "faq": {
+    "complete-identity": {
+      "question": "What does a complete brand identity include?",
+      "answer": "A complete brand identity includes the logo, color palette, typography, graphic elements, tone of voice, and usage rules. We provide a detailed brand guidelines document that documents all these elements and guides their consistent use."
+    },
+    "creation-process": {
+      "question": "How does the creation process work?",
+      "answer": "The process begins with a discovery phase to understand your brand, values and audience. We then develop creative concepts, create visual elements, and iterate based on your feedback. The process ends with the delivery of a complete brand guidelines document."
+    },
+    "deliverables": {
+      "question": "What deliverables are provided?",
+      "answer": "You receive a complete package including: logos (different versions), color palette, typography, graphic elements, document templates, usage guides, and source files in all necessary formats."
+    },
+    "uniqueness": {
+      "question": "How do you ensure identity uniqueness?",
+      "answer": "We conduct thorough research of your market and competition to create a distinctive identity. We also verify the availability of visual elements to avoid any conflict with existing brands."
+    },
+    "transition": {
+      "question": "How do you handle the transition to the new identity?",
+      "answer": "We provide a gradual deployment plan that guides the transition to the new identity. This includes recommendations for internal and external communication, and an implementation timeline."
+    }
+  },
+  "complementary": {
+    "marketing-kit": {
+      "title": "Marketing kit",
+      "description": "Creation of consistent marketing materials."
+    },
+    "social-media": {
+      "title": "Social media",
+      "description": "Adaptation for social media."
+    },
+    "print-materials": {
+      "title": "Print materials",
+      "description": "Creation of printed materials."
+    }
+  }
+}
diff --git a/apps/web/src/locales/en/constants/services/design/moodboard.json b/apps/web/src/locales/en/constants/services/design/moodboard.json
new file mode 100644
index 000000000..24b914195
--- /dev/null
+++ b/apps/web/src/locales/en/constants/services/design/moodboard.json
@@ -0,0 +1,80 @@
+{
+  "name": "Moodboard",
+  "description": "Defining the visual identity and ambiance of your project",
+  "hero": {
+    "title": "Moodboards & Artistic Direction",
+    "description": "Bring your vision to life with carefully crafted moodboards. Our design expertise helps you define a clear and inspiring artistic direction for your project."
+  },
+  "features": {
+    "creative-direction": {
+      "title": "Creative direction",
+      "description": "Clear definition of the ambiance and visual style."
+    },
+    "color-palette": {
+      "title": "Color palette",
+      "description": "Harmonious selection of your identity colors."
+    },
+    "visual-style": {
+      "title": "Visual style",
+      "description": "Exploration and definition of your graphic universe."
+    },
+    "targeted-inspiration": {
+      "title": "Targeted inspiration",
+      "description": "In-depth research tailored to your industry."
+    }
+  },
+  "benefits": {
+    "clear-direction": {
+      "title": "Clear direction",
+      "description": "Shared vision and alignment of creative teams."
+    },
+    "visual-communication": {
+      "title": "Visual communication",
+      "description": "Effective support for sharing your vision."
+    },
+    "consistency": {
+      "title": "Consistency",
+      "description": "Guaranteed harmonious visual identity."
+    },
+    "creative-expertise": {
+      "title": "Creative expertise",
+      "description": "Professional advice and artistic direction."
+    }
+  },
+  "faq": {
+    "what-is-moodboard": {
+      "question": "What is a moodboard and what is it used for?",
+      "answer": "A moodboard is a visual assembly that defines the artistic direction of your project. It combines colors, typography, images and textures to create a coherent visual reference. It's an essential tool for communicating your vision and ensuring the consistency of your visual identity."
+    },
+    "creation-process": {
+      "question": "How does the creation process work?",
+      "answer": "The process begins with a discovery phase where we explore your goals and universe. We then conduct in-depth research to select appropriate visual elements. After several iterations and your feedback, we finalize the moodboard that will serve as a guide for your project."
+    },
+    "moodboard-elements": {
+      "question": "What elements does a moodboard include?",
+      "answer": "A professional moodboard typically includes: a color palette, typography, inspirational images, textures, patterns, and stylistic references. We also add explanatory notes to clarify creative choices."
+    },
+    "moodboard-usage": {
+      "question": "How do you use the moodboard throughout the project?",
+      "answer": "The moodboard serves as a reference throughout the project. It guides design decisions, ensures visual consistency and facilitates communication between all stakeholders. It's a living document that can evolve with your feedback."
+    },
+    "creation-timeline": {
+      "question": "How long does it take to create a moodboard?",
+      "answer": "Creating a professional moodboard typically takes 1 to 2 weeks, including the research phase, initial creation and iterations based on your feedback. This time allows us to explore in depth and refine the artistic direction."
+    }
+  },
+  "complementary": {
+    "brand-guidelines": {
+      "title": "Brand guidelines",
+      "description": "Creation of a complete brand guidelines document."
+    },
+    "style-guide": {
+      "title": "Style guide",
+      "description": "Detailed guide for using your identity."
+    },
+    "artistic-direction": {
+      "title": "Artistic direction",
+      "description": "Ongoing creative guidance."
+    }
+  }
+}
diff --git a/apps/web/src/locales/en/constants/services/design/ui.json b/apps/web/src/locales/en/constants/services/design/ui.json
new file mode 100644
index 000000000..57d83c1e5
--- /dev/null
+++ b/apps/web/src/locales/en/constants/services/design/ui.json
@@ -0,0 +1,80 @@
+{
+  "name": "UI mockups",
+  "description": "Detailed design of user interfaces",
+  "hero": {
+    "title": "User Interface Design",
+    "description": "Create modern, elegant and intuitive interfaces for your applications. Our UI design expertise guarantees professional mockups that will captivate your users."
+  },
+  "features": {
+    "modern-design": {
+      "title": "Modern design",
+      "description": "Elegant interfaces following the latest trends."
+    },
+    "design-system": {
+      "title": "Design system",
+      "description": "Consistent and reusable components."
+    },
+    "responsive-design": {
+      "title": "Responsive design",
+      "description": "Perfect adaptation to all screens."
+    },
+    "animations-micro-interactions": {
+      "title": "Animations & micro-interactions",
+      "description": "Fluid and engaging interactions."
+    }
+  },
+  "benefits": {
+    "visual-identity": {
+      "title": "Visual identity",
+      "description": "Design consistent with your brand."
+    },
+    "user-experience": {
+      "title": "User experience",
+      "description": "Intuitive and pleasant interfaces to use."
+    },
+    "design-system": {
+      "title": "Design system",
+      "description": "Library of reusable components."
+    },
+    "accessibility": {
+      "title": "Accessibility",
+      "description": "Interfaces accessible to all users."
+    }
+  },
+  "faq": {
+    "ui-design-process": {
+      "question": "How does the UI design process work?",
+      "answer": "The process begins with analyzing your needs and brand identity. We then create initial versions of key screens, establish the design system, then iterate on detailed mockups. Each step includes your feedback to ensure a result perfectly aligned with your expectations."
+    },
+    "tools-deliverables": {
+      "question": "What tools and deliverables are provided?",
+      "answer": "We primarily use Figma for UI design. You receive detailed mockups of all screens, a complete design system with its components, specifications for developers, and assets necessary for integration."
+    },
+    "responsive-handling": {
+      "question": "How do you handle responsive design?",
+      "answer": "We follow a mobile-first approach and create mockups for each important breakpoint (mobile, tablet, desktop). Each interface is optimized to offer the best possible experience on its medium."
+    },
+    "design-consistency": {
+      "question": "How do you ensure design consistency?",
+      "answer": "We create a complete design system including a component library, typographic rules, color palette and design principles. This system ensures consistency throughout the interface."
+    },
+    "developer-handoff": {
+      "question": "How do you facilitate developer work?",
+      "answer": "We provide detailed specifications for each component, including measurements, styles, states and interactions. We also use tools like Zeplin or Figma exports to facilitate integration."
+    }
+  },
+  "complementary": {
+    "design-system": {
+      "title": "Design system",
+      "description": "Creation of a component library."
+    },
+    "prototyping": {
+      "title": "Prototyping",
+      "description": "Creation of interactive prototypes."
+    },
+    "development": {
+      "title": "Development",
+      "description": "Integration of your mockups into code."
+    }
+  }
+}
diff --git a/apps/web/src/locales/en/constants/services/design/wireframes.json b/apps/web/src/locales/en/constants/services/design/wireframes.json
new file mode 100644
index 000000000..f0be142d7
--- /dev/null
+++ b/apps/web/src/locales/en/constants/services/design/wireframes.json
@@ -0,0 +1,80 @@
+{
+  "name": "Wireframes",
+  "description": "Designing structure and user journey",
+  "hero": {
+    "title": "Wireframes & UX Architecture",
+    "description": "Structure your user interfaces with professional wireframes. Our UX design expertise guarantees intuitive architecture and optimal user experience from the earliest stages of your project."
+  },
+  "features": {
+    "ux-architecture": {
+      "title": "UX architecture",
+      "description": "Clear and logical structure of your interfaces."
+    },
+    "user-journey": {
+      "title": "User journey",
+      "description": "Optimization of navigation flows."
+    },
+    "visual-hierarchy": {
+      "title": "Visual hierarchy",
+      "description": "Efficient organization of content and features."
+    },
+    "interactions": {
+      "title": "Interactions",
+      "description": "Definition of behaviors and transitions."
+    }
+  },
+  "benefits": {
+    "responsive-design": {
+      "title": "Responsive design",
+      "description": "Adaptation to all screen formats."
+    },
+    "rapid-prototyping": {
+      "title": "Rapid prototyping",
+      "description": "Efficient testing and iterations."
+    },
+    "collaboration": {
+      "title": "Collaboration",
+      "description": "Clear communication with all stakeholders."
+    },
+    "early-validation": {
+      "title": "Early validation",
+      "description": "Quick detection and correction of UX issues."
+    }
+  },
+  "faq": {
+    "what-is-wireframe": {
+      "question": "What is a wireframe and why is it important?",
+      "answer": "A wireframe is a schematic representation of your interface that focuses on structure, hierarchy and functionality, without the final design elements. It's a crucial step that validates information architecture and user experience before investing in detailed design."
+    },
+    "creation-process": {
+      "question": "How does the creation process work?",
+      "answer": "The process begins with analyzing your needs and objectives. We then create low-fidelity wireframes to validate the overall structure, then more detailed versions with interactions. After several iterations and your feedback, we finalize the wireframes that will serve as the basis for UI design."
+    },
+    "deliverables": {
+      "question": "What deliverables are provided?",
+      "answer": "You receive a complete set of wireframes for each key screen, user flow diagrams, interaction documentation, and interactive prototypes to test user journeys. All source files are also provided."
+    },
+    "responsive-handling": {
+      "question": "How do you handle responsive design?",
+      "answer": "We create wireframes adapted to each important screen format (desktop, tablet, mobile) following a mobile-first approach. Each version is optimized to offer the best possible user experience on its medium."
+    },
+    "creation-timeline": {
+      "question": "How long does wireframe creation take?",
+      "answer": "Duration depends on project complexity, but generally 2 to 4 weeks for a medium project, including analysis, creation, iterations and finalization phases. We establish a detailed schedule at the start of the project."
+    }
+  },
+  "complementary": {
+    "ux-audit": {
+      "title": "UX audit",
+      "description": "In-depth analysis of your existing interfaces."
+    },
+    "prototyping": {
+      "title": "Prototyping",
+      "description": "Creation of interactive prototypes."
+    },
+    "ux-documentation": {
+      "title": "UX documentation",
+      "description": "Detailed documentation of user journeys."
+    }
+  }
+}
diff --git a/apps/web/src/locales/en/constants/services/frontend.json b/apps/web/src/locales/en/constants/services/frontend.json
new file mode 100644
index 000000000..a69b34166
--- /dev/null
+++ b/apps/web/src/locales/en/constants/services/frontend.json
@@ -0,0 +1,56 @@
+{
+  "name": "Front-end development",
+  "description": "Creating high-performance web and mobile applications",
+  "benefits": {
+    "scalable-architecture": {
+      "title": "Scalable architecture",
+      "description": "Applications built on modern and scalable architectures, ready for your project's evolution."
+    },
+    "optimal-performance": {
+      "title": "Optimal performance",
+      "description": "Focus on performance with advanced optimization and caching techniques."
+    },
+    "maintainable-code": {
+      "title": "Maintainable code",
+      "description": "Clean and modular architecture enabling easy maintenance and quick iterations."
+    },
+    "enhanced-security": {
+      "title": "Enhanced security",
+      "description": "Implementation of frontend security best practices to protect your users."
+    }
+  },
+  "process": {
+    "technical-architecture": {
+      "title": "Technical architecture",
+      "description": "Frontend architecture definition, technology selection and development environment setup."
+    },
+    "project-setup": {
+      "title": "Project setup",
+      "description": "Project configuration with development best practices, testing and continuous deployment."
+    },
+    "feature-development": {
+      "title": "Feature development",
+      "description": "Feature implementation with focus on code quality and performance."
+    },
+    "state-management": {
+      "title": "State management",
+      "description": "Setting up robust and performant state management for application data."
+    },
+    "testing-quality": {
+      "title": "Testing and quality",
+      "description": "Implementation of automated tests and quality assurance processes."
+    },
+    "optimization-monitoring": {
+      "title": "Optimization and monitoring",
+      "description": "Performance optimization and monitoring tools setup."
+    }
+  },
+  "process-services": {
+    "technical-architecture": ["Architecture", "Technical consulting"],
+    "project-setup": ["Technical setup", "CI/CD"],
+    "feature-development": ["Frontend development", "React", "Next.js"],
+    "state-management": ["State Management", "API Integration"],
+    "testing-quality": ["Unit tests", "E2E tests"],
+    "optimization-monitoring": ["Performance", "Analytics"]
+  }
+}
diff --git a/apps/web/src/locales/en/constants/services/frontend/desktop.json b/apps/web/src/locales/en/constants/services/frontend/desktop.json
new file mode 100644
index 000000000..96269817a
--- /dev/null
+++ b/apps/web/src/locales/en/constants/services/frontend/desktop.json
@@ -0,0 +1,80 @@
+{
+  "name": "Desktop software",
+  "description": "Cross-platform desktop application development",
+  "hero": {
+    "title": "Cross-platform desktop applications",
+    "description": "Develop modern and high-performance desktop applications for Windows, macOS and Linux. Our expertise guarantees professional applications that leverage the full power of desktop."
+  },
+  "features": {
+    "electron-react": {
+      "title": "Electron & React",
+      "description": "Modern technologies for performant and scalable desktop applications."
+    },
+    "multiplatform": {
+      "title": "Multiplatform",
+      "description": "Windows, macOS and Linux compatible applications from a single codebase."
+    },
+    "native-performance": {
+      "title": "Native performance",
+      "description": "Optimization to efficiently leverage system resources."
+    },
+    "system-integration": {
+      "title": "System integration",
+      "description": "Access to native operating system features."
+    }
+  },
+  "benefits": {
+    "windows-macos": {
+      "title": "Windows & macOS",
+      "description": "Native support for major desktop platforms."
+    },
+    "system-access": {
+      "title": "System access",
+      "description": "Direct interaction with the operating system."
+    },
+    "offline-mode": {
+      "title": "Offline mode",
+      "description": "Standalone operation without internet connection required."
+    },
+    "local-data": {
+      "title": "Local data",
+      "description": "Local storage and data processing for enhanced security."
+    }
+  },
+  "faq": {
+    "why-electron": {
+      "question": "Why choose Electron for desktop development?",
+      "answer": "Electron enables creating cross-platform desktop applications with modern web technologies (React, TypeScript). This offers rapid development, simplified maintenance and excellent user experience, while ensuring compatibility with Windows, macOS and Linux."
+    },
+    "security": {
+      "question": "How do you handle desktop application security?",
+      "answer": "We implement several security levels: encryption of sensitive data, protection against code injection, automatic security updates, and secure development best practices. We also follow security recommendations specific to each operating system."
+    },
+    "auto-update": {
+      "question": "Do you offer an automatic update system?",
+      "answer": "Yes, we integrate an automatic update system that enables easy deployment of new application versions. Users are notified of available updates and can install them with one click."
+    },
+    "distribution": {
+      "question": "How do you handle application distribution?",
+      "answer": "We manage the entire distribution process: creating installers for each platform, signing applications, publishing on stores if needed (Microsoft Store, Mac App Store), and setting up an automatic update system."
+    },
+    "post-launch-support": {
+      "question": "Do you offer support after launch?",
+      "answer": "Yes, we offer several maintenance plans including: technical support, bug fixes, security updates, performance optimizations and feature evolution."
+    }
+  },
+  "complementary": {
+    "telemetry": {
+      "title": "Telemetry",
+      "description": "Tracking performance and user behavior."
+    },
+    "distribution": {
+      "title": "Distribution",
+      "description": "Store publishing and update management."
+    },
+    "cloud-sync": {
+      "title": "Cloud sync",
+      "description": "Data synchronization with the cloud."
+    }
+  }
+}
diff --git a/apps/web/src/locales/en/constants/services/frontend/mobile.json b/apps/web/src/locales/en/constants/services/frontend/mobile.json
new file mode 100644
index 000000000..8316d8ad6
--- /dev/null
+++ b/apps/web/src/locales/en/constants/services/frontend/mobile.json
@@ -0,0 +1,80 @@
+{
+  "name": "Mobile applications",
+  "description": "Creating native mobile applications with React Native",
+  "hero": {
+    "title": "React Native mobile development",
+    "description": "Create high-performance native mobile applications for iOS and Android with React Native. Our expertise guarantees robust applications and exceptional user experience."
+  },
+  "features": {
+    "react-native-expo": {
+      "title": "React Native & Expo",
+      "description": "Efficient cross-platform development for iOS and Android with a single codebase."
+    },
+    "native-design": {
+      "title": "Native design",
+      "description": "Interfaces respecting iOS and Android design guidelines for a familiar experience."
+    },
+    "native-performance": {
+      "title": "Native performance",
+      "description": "Advanced optimization for near-native performance on each platform."
+    },
+    "mobile-ui-ux": {
+      "title": "Mobile UI/UX",
+      "description": "Intuitive mobile interfaces following best practices of each platform."
+    }
+  },
+  "benefits": {
+    "multi-platform": {
+      "title": "Multi-platform",
+      "description": "Applications working on iOS and Android from a single codebase."
+    },
+    "tablet-support": {
+      "title": "Tablet support",
+      "description": "Interfaces adapted to different screen sizes and orientations."
+    },
+    "optimal-performance": {
+      "title": "Optimal performance",
+      "description": "Native optimization for maximum performance and fluidity."
+    },
+    "native-experience": {
+      "title": "Native experience",
+      "description": "Using native device features (camera, GPS, notifications...)."
+    }
+  },
+  "faq": {
+    "why-react-native": {
+      "question": "Why choose React Native for mobile development?",
+      "answer": "React Native enables developing high-performance applications for iOS and Android from a single codebase, reducing costs and development time while maintaining native quality. It also benefits from a large ecosystem and Meta (Facebook) support."
+    },
+    "performance": {
+      "question": "How do you ensure application performance?",
+      "answer": "We optimize every aspect of the application: startup time, memory consumption, smooth animations, data loading... We also use profiling tools to identify and resolve performance issues."
+    },
+    "store-publishing": {
+      "question": "Do you handle store publishing?",
+      "answer": "Yes, we handle the entire publishing process: asset preparation, developer account configuration, submission to stores (App Store and Play Store) and update tracking."
+    },
+    "updates": {
+      "question": "How do you manage application updates?",
+      "answer": "We set up OTA (Over The Air) update systems when possible, and manage updates via stores with an optimized process to minimize validation times."
+    },
+    "post-launch-support": {
+      "question": "Do you offer support after launch?",
+      "answer": "Yes, we offer various maintenance plans including: performance monitoring, bug fixes, security updates and feature evolution."
+    }
+  },
+  "complementary": {
+    "store-publishing": {
+      "title": "Store publishing",
+      "description": "Complete management of App Store and Play Store publishing."
+    },
+    "backend-integration": {
+      "title": "Backend integration",
+      "description": "Connection with your existing systems and APIs."
+    },
+    "react-native-training": {
+      "title": "React Native training",
+      "description": "Training your teams in React Native development."
+    }
+  }
+}
diff --git a/apps/web/src/locales/en/constants/services/frontend/pwa.json b/apps/web/src/locales/en/constants/services/frontend/pwa.json
new file mode 100644
index 000000000..ed158009e
--- /dev/null
+++ b/apps/web/src/locales/en/constants/services/frontend/pwa.json
@@ -0,0 +1,80 @@
+{
+  "name": "Progressive web apps",
+  "description": "Creating high-performance progressive web applications",
+  "hero": {
+    "title": "Progressive web apps (PWA)",
+    "description": "Transform your website into a true installable application with Progressive Web Apps. Offer an exceptional user experience, online and offline."
+  },
+  "features": {
+    "native-installation": {
+      "title": "Native installation",
+      "description": "Installable applications directly from the browser, without going through stores."
+    },
+    "offline-mode": {
+      "title": "Offline mode",
+      "description": "Works even without internet connection thanks to smart caching."
+    },
+    "optimal-performance": {
+      "title": "Optimal performance",
+      "description": "Fast loading and smooth experience on all devices."
+    },
+    "push-notifications": {
+      "title": "Push notifications",
+      "description": "Improved user engagement through push notifications."
+    }
+  },
+  "benefits": {
+    "multi-platform": {
+      "title": "Multi-platform",
+      "description": "One application for all devices and operating systems."
+    },
+    "always-updated": {
+      "title": "Always updated",
+      "description": "Automatic updates without user action required."
+    },
+    "lightweight": {
+      "title": "Lightweight",
+      "description": "No heavy installation, instantly accessible."
+    },
+    "native-performance": {
+      "title": "Native performance",
+      "description": "User experience close to native applications."
+    }
+  },
+  "faq": {
+    "what-is-pwa": {
+      "question": "What is a Progressive Web App?",
+      "answer": "A PWA is a web application that offers an experience similar to a native application: it is installable, works offline, and can send push notifications. It combines the advantages of the web (accessibility, automatic update) and native (performance, advanced features)."
+    },
+    "vs-native": {
+      "question": "What are the advantages compared to a native application?",
+      "answer": "PWAs offer several advantages: no need to go through stores, automatic updates, faster and less expensive development, better referencing, and a single codebase for all platforms."
+    },
+    "offline": {
+      "question": "How does offline mode work?",
+      "answer": "We use Service Workers to cache essential resources and data. The application can thus work even without internet connection, with automatic synchronization once connection is restored."
+    },
+    "browser-compatibility": {
+      "question": "Are PWAs compatible with all browsers?",
+      "answer": "PWAs work on most modern browsers. For older browsers, we set up fallback solutions to guarantee an optimal user experience."
+    },
+    "post-launch-support": {
+      "question": "Do you offer support after launch?",
+      "answer": "Yes, we offer several maintenance plans including: security updates, performance optimizations, feature additions and technical support."
+    }
+  },
+  "complementary": {
+    "advanced-analytics": {
+      "title": "Advanced analytics",
+      "description": "Detailed tracking of user behavior and performance."
+    },
+    "seo-optimized": {
+      "title": "Optimized SEO",
+      "description": "Optimization for search engines and social sharing."
+    },
+    "enhanced-security": {
+      "title": "Enhanced security",
+      "description": "Data protection and secure communications."
+    }
+  }
+}
diff --git a/apps/web/src/locales/en/constants/services/frontend/web.json b/apps/web/src/locales/en/constants/services/frontend/web.json
new file mode 100644
index 000000000..90b1ae9b6
--- /dev/null
+++ b/apps/web/src/locales/en/constants/services/frontend/web.json
@@ -0,0 +1,80 @@
+{
+  "name": "Web applications",
+  "description": "Modern web application development with React and Next.js",
+  "hero": {
+    "title": "Frontend web development",
+    "description": "Create modern, responsive and high-performance web applications with the latest frontend technologies. Our expertise guarantees you an exceptional user experience."
+  },
+  "features": {
+    "react-nextjs": {
+      "title": "React & Next.js",
+      "description": "Development with modern frameworks for performant and scalable applications."
+    },
+    "responsive-design": {
+      "title": "Responsive design",
+      "description": "Adaptive interfaces for optimal experience on all devices."
+    },
+    "web-performance": {
+      "title": "Web performance",
+      "description": "Advanced optimization for fast loading times and smooth experience."
+    },
+    "modern-ui-ux": {
+      "title": "Modern UI/UX",
+      "description": "Elegant and intuitive user interfaces following the latest trends."
+    }
+  },
+  "benefits": {
+    "reactive-apps": {
+      "title": "Reactive applications",
+      "description": "Dynamic and reactive interfaces for a smooth user experience."
+    },
+    "mobile-first": {
+      "title": "Mobile first",
+      "description": "Design thought for mobile first then adapted to larger screens."
+    },
+    "optimal-performance": {
+      "title": "Optimal performance",
+      "description": "Advanced optimization for minimal loading times."
+    },
+    "seo-optimized": {
+      "title": "SEO optimized",
+      "description": "Structure optimized for excellent natural referencing."
+    }
+  },
+  "faq": {
+    "technologies": {
+      "question": "What technologies do you use for frontend development?",
+      "answer": "We primarily use React with Next.js, as well as TypeScript for more robust code. We also integrate modern tools like Tailwind CSS for styling, and various libraries for animations and interactions."
+    },
+    "performance": {
+      "question": "How do you manage web application performance?",
+      "answer": "We apply optimization best practices: code splitting, lazy loading, image optimization, smart caching, and we use performance measurement tools to ensure optimal loading times."
+    },
+    "seo": {
+      "question": "Do you offer SEO solutions?",
+      "answer": "Yes, we develop applications with SEO in mind: server-side rendering (SSR), static page generation, dynamic meta-data, semantic structure and search engine optimization."
+    },
+    "browser-compatibility": {
+      "question": "How do you ensure compatibility with different browsers?",
+      "answer": "We test on major browsers and versions, use modern transpilation tools, and set up appropriate fallbacks to guarantee a consistent experience."
+    },
+    "maintenance": {
+      "question": "Do you offer maintenance for developed applications?",
+      "answer": "Yes, we offer various maintenance plans including security updates, continuous performance optimization, and feature evolution."
+    }
+  },
+  "complementary": {
+    "ui-ux-design": {
+      "title": "UI/UX design",
+      "description": "Design of modern and ergonomic user interfaces."
+    },
+    "api-integration": {
+      "title": "API integration",
+      "description": "Connection with your existing backend systems and services."
+    },
+    "internationalization": {
+      "title": "Internationalization",
+      "description": "Adapting your application for an international audience."
+    }
+  }
+}
diff --git a/apps/web/src/locales/en/constants/services/integration.json b/apps/web/src/locales/en/constants/services/integration.json
new file mode 100644
index 000000000..90e4897ca
--- /dev/null
+++ b/apps/web/src/locales/en/constants/services/integration.json
@@ -0,0 +1,56 @@
+{
+  "name": "Integration",
+  "description": "Integration on major e-commerce and CMS platforms",
+  "benefits": {
+    "clean-maintainable-code": {
+      "title": "Clean and maintainable code",
+      "description": "Integration with high code standards and architecture designed for long-term maintainability."
+    },
+    "optimized-performance": {
+      "title": "Optimized performance",
+      "description": "Fast and smooth websites through advanced optimization techniques and best practices."
+    },
+    "responsive-design": {
+      "title": "Responsive design",
+      "description": "Perfect adaptation to all screens and devices for a consistent user experience."
+    },
+    "smooth-animations": {
+      "title": "Smooth animations",
+      "description": "Integration of polished animations to enrich user experience while maintaining performance."
+    }
+  },
+  "process": {
+    "mockup-analysis": {
+      "title": "Mockup analysis",
+      "description": "In-depth study of mockups to identify components, interactions and technical points of attention."
+    },
+    "technical-architecture": {
+      "title": "Technical architecture",
+      "description": "Definition of frontend architecture and selection of technologies suited to the project."
+    },
+    "component-development": {
+      "title": "Component development",
+      "description": "Creation of reusable components following design system principles."
+    },
+    "responsive-integration": {
+      "title": "Responsive integration",
+      "description": "Design adaptation for all screen formats with particular attention to mobile experience."
+    },
+    "optimization": {
+      "title": "Optimization",
+      "description": "Performance, accessibility and technical SEO optimization."
+    },
+    "testing-validation": {
+      "title": "Testing and validation",
+      "description": "Thorough testing on different browsers and devices to ensure optimal user experience."
+    }
+  },
+  "process-services": {
+    "mockup-analysis": ["Technical analysis", "Architecture"],
+    "technical-architecture": ["Architecture", "Technical consulting"],
+    "component-development": ["Frontend Development", "Integration"],
+    "responsive-integration": ["Integration", "Responsive Design"],
+    "optimization": ["Performance", "Technical SEO"],
+    "testing-validation": ["Testing", "Quality Assurance"]
+  }
+}
diff --git a/apps/web/src/locales/en/constants/services/integration/prestashop.json b/apps/web/src/locales/en/constants/services/integration/prestashop.json
new file mode 100644
index 000000000..5ad5215a3
--- /dev/null
+++ b/apps/web/src/locales/en/constants/services/integration/prestashop.json
@@ -0,0 +1,80 @@
+{
+  "name": "PrestaShop",
+  "description": "PrestaShop store development",
+  "hero": {
+    "title": "E-commerce development with PrestaShop",
+    "description": "Launch a professional online store with PrestaShop. Our expertise guarantees a powerful, scalable e-commerce solution perfectly adapted to your needs."
+  },
+  "features": {
+    "custom-design": {
+      "title": "Custom design",
+      "description": "Creation of custom themes that reflect your brand and optimize conversion."
+    },
+    "advanced-management": {
+      "title": "Advanced management",
+      "description": "Powerful admin interface to manage your products, orders and customers."
+    },
+    "optimized-performance": {
+      "title": "Optimized performance",
+      "description": "Advanced optimization for fast loading times and smooth experience."
+    },
+    "enhanced-security": {
+      "title": "Enhanced security",
+      "description": "Advanced protection of your store and your customers' data."
+    }
+  },
+  "benefits": {
+    "complete-management": {
+      "title": "Complete management",
+      "description": "Full control over your products, inventory, orders and customer relationships."
+    },
+    "multi-store": {
+      "title": "Multi-store",
+      "description": "Management of multiple stores from a single admin interface."
+    },
+    "integrated-logistics": {
+      "title": "Integrated logistics",
+      "description": "Advanced carrier and shipping cost management."
+    },
+    "detailed-analytics": {
+      "title": "Detailed analytics",
+      "description": "Complete statistics to track and optimize your performance."
+    }
+  },
+  "faq": {
+    "creation-timeline": {
+      "question": "How long does it take to create a PrestaShop store?",
+      "answer": "The average time to create a PrestaShop store varies from 6 to 12 weeks, depending on project complexity. This includes theme customization, custom feature development, product integration and testing."
+    },
+    "migration": {
+      "question": "Can you migrate my existing store to PrestaShop?",
+      "answer": "Yes, we offer a complete migration service to PrestaShop, including transfer of products, customers, orders and history, while preserving your SEO."
+    },
+    "large-catalogs": {
+      "question": "Is PrestaShop suitable for large product catalogs?",
+      "answer": "Absolutely! PrestaShop is designed to efficiently manage catalogs of several thousand products with variations, while maintaining excellent performance."
+    },
+    "custom-development": {
+      "question": "Do you offer custom development?",
+      "answer": "Yes, we develop custom modules and features to adapt PrestaShop to your specific needs: ERP integrations, custom business processes, etc."
+    },
+    "maintenance-updates": {
+      "question": "How do you handle maintenance and updates?",
+      "answer": "We offer different maintenance plans including security updates, backups, performance optimization and technical support."
+    }
+  },
+  "complementary": {
+    "custom-modules": {
+      "title": "Custom modules",
+      "description": "Development of specific features for your business."
+    },
+    "digital-marketing": {
+      "title": "Digital marketing",
+      "description": "Marketing strategies to increase your visibility and sales."
+    },
+    "prestashop-training": {
+      "title": "PrestaShop training",
+      "description": "Custom training to master your store management."
+    }
+  }
+}
diff --git a/apps/web/src/locales/en/constants/services/integration/shopify.json b/apps/web/src/locales/en/constants/services/integration/shopify.json
new file mode 100644
index 000000000..a4371afc0
--- /dev/null
+++ b/apps/web/src/locales/en/constants/services/integration/shopify.json
@@ -0,0 +1,80 @@
+{
+  "name": "Shopify",
+  "description": "Creation and customization of Shopify online stores",
+  "hero": {
+    "title": "Create your online store with Shopify",
+    "description": "Transform your e-commerce vision into reality with our Shopify expertise. We create high-performance, aesthetic and conversion-optimized online stores."
+  },
+  "features": {
+    "custom-design": {
+      "title": "Custom design",
+      "description": "Creation of a unique theme that reflects your brand and optimizes user experience."
+    },
+    "conversion-optimization": {
+      "title": "Conversion optimization",
+      "description": "Implementation of best practices to maximize your sales and retain your customers."
+    },
+    "enhanced-security": {
+      "title": "Enhanced security",
+      "description": "Protection of your data and your customers' data with the latest security standards."
+    },
+    "advanced-integrations": {
+      "title": "Advanced integrations",
+      "description": "Connection with your favorite tools for inventory management, accounting and marketing."
+    }
+  },
+  "benefits": {
+    "secure-payments": {
+      "title": "Secure payments",
+      "description": "Integration of major payment methods and secure transaction management."
+    },
+    "international-by-default": {
+      "title": "International by default",
+      "description": "Sell worldwide with multi-currency management and automatic translations."
+    },
+    "powerful-analytics": {
+      "title": "Powerful analytics",
+      "description": "Detailed tracking of your performance and insights to optimize your sales."
+    },
+    "simplified-logistics": {
+      "title": "Simplified logistics",
+      "description": "Efficient order management and integration with major carriers."
+    }
+  },
+  "faq": {
+    "creation-timeline": {
+      "question": "How long does it take to create a Shopify store?",
+      "answer": "The average time to create a Shopify store varies from 4 to 8 weeks, depending on project complexity. This includes the design phase, development, product integration and testing."
+    },
+    "migration": {
+      "question": "Can you migrate my existing store to Shopify?",
+      "answer": "Yes, we offer a complete migration service from your existing store to Shopify, including transfer of products, customers and orders, while ensuring a smooth transition."
+    },
+    "customization-types": {
+      "question": "What types of customization do you offer?",
+      "answer": "We offer complete customization of your Shopify store: custom design, custom features, specific integrations, and mobile optimization."
+    },
+    "post-launch-support": {
+      "question": "Do you offer post-launch support?",
+      "answer": "Yes, we offer several support and maintenance plans to ensure the smooth operation of your store after launch, including updates, optimizations and technical support."
+    },
+    "security": {
+      "question": "How do you ensure the security of my store?",
+      "answer": "We implement security best practices: SSL, PCI DSS compliance, regular backups, and fraud protection. Shopify also provides bank-level security for all transactions."
+    }
+  },
+  "complementary": {
+    "seo": {
+      "title": "SEO",
+      "description": "Search engine optimization to increase your visibility."
+    },
+    "digital-marketing": {
+      "title": "Digital marketing",
+      "description": "Marketing strategies adapted to attract and convert more customers."
+    },
+    "training": {
+      "title": "Training",
+      "description": "Complete training to manage your store independently."
+    }
+  }
+}
diff --git a/apps/web/src/locales/en/constants/services/integration/squarespace.json b/apps/web/src/locales/en/constants/services/integration/squarespace.json
new file mode 100644
index 000000000..2d8627bbd
--- /dev/null
+++ b/apps/web/src/locales/en/constants/services/integration/squarespace.json
@@ -0,0 +1,80 @@
+{
+  "name": "SquareSpace",
+  "description": "Integration and customization on SquareSpace",
+  "hero": {
+    "title": "Elegant websites with Squarespace",
+    "description": "Create a refined online presence with Squarespace. Our expertise guarantees an aesthetic, functional website perfectly adapted to your brand image."
+  },
+  "features": {
+    "minimalist-design": {
+      "title": "Minimalist design",
+      "description": "Creation of elegant and clean sites that showcase your content and brand."
+    },
+    "smooth-experience": {
+      "title": "Smooth experience",
+      "description": "Intuitive navigation and optimized performance for a flawless user experience."
+    },
+    "content-management": {
+      "title": "Content management",
+      "description": "Simple and intuitive admin interface to easily manage your content."
+    },
+    "media-integration": {
+      "title": "Media integration",
+      "description": "Optimal showcase of your images and media with dynamic galleries."
+    }
+  },
+  "benefits": {
+    "professional-templates": {
+      "title": "Professional templates",
+      "description": "Wide choice of modern and customizable templates for all industries."
+    },
+    "integrated-ecommerce": {
+      "title": "Integrated e-commerce",
+      "description": "Complete and customizable online sales solutions."
+    },
+    "optimal-performance": {
+      "title": "Optimal performance",
+      "description": "Fast and secure sites hosted on robust infrastructure."
+    },
+    "integrated-marketing": {
+      "title": "Integrated marketing",
+      "description": "Marketing tools and statistical analysis to grow your business."
+    }
+  },
+  "faq": {
+    "creation-timeline": {
+      "question": "How long does it take to create a Squarespace site?",
+      "answer": "The average time to create a Squarespace site varies from 2 to 6 weeks, depending on project complexity. This includes template selection and customization, content integration and testing."
+    },
+    "product-sales": {
+      "question": "Can I sell products on my Squarespace site?",
+      "answer": "Yes, Squarespace offers a complete e-commerce solution that we can configure to allow you to sell your products online, with inventory management, secure payments and shipping options."
+    },
+    "content-updates": {
+      "question": "Is it easy to update the content?",
+      "answer": "Absolutely! Squarespace's interface is very intuitive. We train you on its use so you can manage your content independently."
+    },
+    "seo-optimization": {
+      "question": "Will my site be optimized for SEO?",
+      "answer": "Yes, we implement Squarespace SEO best practices and configure all necessary elements to optimize your visibility on search engines."
+    },
+    "maintenance-service": {
+      "question": "Do you offer maintenance service?",
+      "answer": "Yes, we offer different maintenance plans including updates, technical support and continuous optimization of your Squarespace site."
+    }
+  },
+  "complementary": {
+    "advanced-customization": {
+      "title": "Advanced customization",
+      "description": "CSS and Javascript modifications to customize your site beyond standard options."
+    },
+    "content-strategy": {
+      "title": "Content strategy",
+      "description": "Support in creating and optimizing your content."
+    },
+    "user-training": {
+      "title": "User training",
+      "description": "Complete training to master your Squarespace site management."
+    }
+  }
+}
diff --git a/apps/web/src/locales/en/constants/services/integration/strapi.json b/apps/web/src/locales/en/constants/services/integration/strapi.json
new file mode 100644
index 000000000..5267e8251
--- /dev/null
+++ b/apps/web/src/locales/en/constants/services/integration/strapi.json
@@ -0,0 +1,80 @@
+{
+  "name": "Strapi",
+  "description": "Headless CMS development with Strapi",
+  "hero": {
+    "title": "Headless CMS development with Strapi",
+    "description": "Develop modern applications with Strapi. Our expertise guarantees a flexible, scalable content management solution perfectly adapted to your needs."
+  },
+  "features": {
+    "custom-api": {
+      "title": "Custom API",
+      "description": "Creation of custom RESTful and GraphQL APIs for all your needs."
+    },
+    "flexible-administration": {
+      "title": "Flexible administration",
+      "description": "Customizable admin interface according to your business processes."
+    },
+    "optimal-performance": {
+      "title": "Optimal performance",
+      "description": "High-performance architecture for fast response times."
+    },
+    "advanced-security": {
+      "title": "Advanced security",
+      "description": "Robust protection of your data and APIs."
+    }
+  },
+  "benefits": {
+    "100-javascript": {
+      "title": "100% JavaScript",
+      "description": "Unified development in JavaScript/Node.js for more efficiency."
+    },
+    "flexible-models": {
+      "title": "Flexible models",
+      "description": "Creation of custom content models without constraints."
+    },
+    "role-management": {
+      "title": "Role management",
+      "description": "Precise control of access and user permissions."
+    },
+    "advanced-workflows": {
+      "title": "Advanced workflows",
+      "description": "Automation of publication and validation processes."
+    }
+  },
+  "faq": {
+    "setup-timeline": {
+      "question": "How long does it take to set up a Strapi project?",
+      "answer": "The average time to set up a Strapi project varies from 4 to 12 weeks, depending on complexity. This includes content model design, API development, admin customization and testing."
+    },
+    "multilingual": {
+      "question": "Can Strapi handle multilingual content?",
+      "answer": "Yes, Strapi natively handles multilingual content. We can configure and customize translation management according to your specific needs."
+    },
+    "content-migration": {
+      "question": "Is it possible to migrate our existing content to Strapi?",
+      "answer": "Yes, we offer a complete content migration service to Strapi, including analysis of your existing data, creation of adapted models and import of your content."
+    },
+    "deployment-hosting": {
+      "question": "How do you handle deployment and hosting?",
+      "answer": "We can deploy Strapi on different cloud platforms (AWS, Google Cloud, DigitalOcean...) and set up scalable infrastructure with development, staging and production environments."
+    },
+    "custom-plugins": {
+      "question": "Do you offer custom plugin development?",
+      "answer": "Yes, we develop custom Strapi plugins to extend functionality according to your needs: specific integrations, custom workflows, dedicated admin interfaces, etc."
+    }
+  },
+  "complementary": {
+    "frontend-development": {
+      "title": "Frontend development",
+      "description": "Creation of frontend applications connected to your Strapi API."
+    },
+    "integrations": {
+      "title": "Integrations",
+      "description": "Connection with your existing third-party tools and services."
+    },
+    "strapi-training": {
+      "title": "Strapi training",
+      "description": "Custom training to master your CMS management."
+    }
+  }
+}
diff --git a/apps/web/src/locales/en/constants/services/integration/webflow.json b/apps/web/src/locales/en/constants/services/integration/webflow.json
new file mode 100644
index 000000000..9871d26f3
--- /dev/null
+++ b/apps/web/src/locales/en/constants/services/integration/webflow.json
@@ -0,0 +1,80 @@
+{
+  "name": "Webflow",
+  "description": "Creation of modern websites with Webflow",
+  "hero": {
+    "title": "Professional Webflow Development",
+    "description": "Bring your vision to life with Webflow. Our expertise guarantees a modern, interactive website perfectly adapted to your needs, without compromising on quality."
+  },
+  "features": {
+    "advanced-visual-design": {
+      "title": "Advanced visual design",
+      "description": "Creation of unique interfaces and sophisticated animations without the limitations of traditional coding."
+    },
+    "optimal-performance": {
+      "title": "Optimal performance",
+      "description": "Fast and responsive sites optimized for all devices and browsers."
+    },
+    "rich-interactions": {
+      "title": "Rich interactions",
+      "description": "Smooth user animations and interactions for a modern and engaging web experience."
+    },
+    "integrated-cms": {
+      "title": "Integrated CMS",
+      "description": "Powerful and flexible content management system for easy updates."
+    }
+  },
+  "benefits": {
+    "visual-development": {
+      "title": "Visual development",
+      "description": "Creation of complex sites without writing code, while maintaining full control over design."
+    },
+    "native-seo": {
+      "title": "Native SEO",
+      "description": "Built-in SEO tools and structure optimized for search engines."
+    },
+    "responsive-by-default": {
+      "title": "Responsive by default",
+      "description": "Design perfectly adapted to all screens, from mobile to large screens."
+    },
+    "optimized-hosting": {
+      "title": "Optimized hosting",
+      "description": "Robust cloud infrastructure with global CDN for optimal performance."
+    }
+  },
+  "faq": {
+    "creation-timeline": {
+      "question": "How long does it take to create a Webflow site?",
+      "answer": "The average time to create a Webflow site varies from 3 to 8 weeks, depending on project complexity. This includes design, interaction development, content integration and testing."
+    },
+    "self-update": {
+      "question": "Can I easily update my site myself?",
+      "answer": "Absolutely! Webflow has an intuitive CMS that we customize to your needs. We train you on its use so you can manage your content independently."
+    },
+    "ecommerce": {
+      "question": "Is Webflow suitable for e-commerce sites?",
+      "answer": "Yes, Webflow offers a robust e-commerce solution that we can customize to create your online store with advanced features and custom design."
+    },
+    "animations-interactions": {
+      "question": "How do you handle animations and interactions?",
+      "answer": "Webflow allows creating sophisticated animations and interactions without code. We design smooth and professional interactive experiences while maintaining optimal performance."
+    },
+    "seo-quality": {
+      "question": "What is the SEO quality with Webflow?",
+      "answer": "Webflow generates clean, SEO-optimized code. We implement SEO best practices to maximize your visibility on search engines."
+    }
+  },
+  "complementary": {
+    "custom-integrations": {
+      "title": "Custom integrations",
+      "description": "Connection with your favorite third-party tools and services."
+    },
+    "digital-strategy": {
+      "title": "Digital strategy",
+      "description": "Support in your online presence strategy."
+    },
+    "webflow-training": {
+      "title": "Webflow training",
+      "description": "Custom training to master your site management."
+    }
+  }
+}
diff --git a/apps/web/src/locales/en/constants/services/integration/wordpress.json b/apps/web/src/locales/en/constants/services/integration/wordpress.json
new file mode 100644
index 000000000..7a30a5862
--- /dev/null
+++ b/apps/web/src/locales/en/constants/services/integration/wordpress.json
@@ -0,0 +1,80 @@
+{
+  "name": "WordPress",
+  "description": "Custom WordPress website development",
+  "hero": {
+    "title": "Custom WordPress Development",
+    "description": "Create a professional website that reflects you with WordPress. Our expertise guarantees a high-performance, secure site perfectly adapted to your needs."
+  },
+  "features": {
+    "custom-themes": {
+      "title": "Custom themes",
+      "description": "Creation of custom themes that reflect your identity and precisely meet your needs."
+    },
+    "optimized-performance": {
+      "title": "Optimized performance",
+      "description": "Advanced optimization to guarantee fast loading times and smooth user experience."
+    },
+    "enhanced-security": {
+      "title": "Enhanced security",
+      "description": "Implementation of security best practices to protect your site and your data."
+    },
+    "simplified-administration": {
+      "title": "Simplified administration",
+      "description": "Custom and intuitive admin interface for easy content management."
+    }
+  },
+  "benefits": {
+    "intuitive-administration": {
+      "title": "Intuitive administration",
+      "description": "Simple and intuitive management interface to manage your content independently."
+    },
+    "seo-optimized": {
+      "title": "SEO optimized",
+      "description": "Structure optimized for natural search and integrated SEO tools."
+    },
+    "powerful-extensions": {
+      "title": "Powerful extensions",
+      "description": "Access to thousands of plugins to extend your site's functionality."
+    },
+    "maximum-performance": {
+      "title": "Maximum performance",
+      "description": "Advanced performance optimization for optimal user experience."
+    }
+  },
+  "faq": {
+    "creation-timeline": {
+      "question": "How long does it take to create a WordPress site?",
+      "answer": "The average time to create a WordPress site varies from 4 to 12 weeks, depending on project complexity. This includes the design phase, custom theme development, content integration and testing."
+    },
+    "migration": {
+      "question": "Can you migrate my existing site to WordPress?",
+      "answer": "Yes, we offer a complete migration service to WordPress, including transfer of content, images and features, while preserving your SEO."
+    },
+    "maintenance-updates": {
+      "question": "How do you handle maintenance and updates?",
+      "answer": "We offer different maintenance plans including security updates, regular backups, WordPress and plugin updates, as well as performance monitoring."
+    },
+    "mobile-optimization": {
+      "question": "Will my site be optimized for mobile?",
+      "answer": "Absolutely. All our WordPress developments are responsive by default, guaranteeing an optimal experience on all devices: computers, tablets and smartphones."
+    },
+    "security-approach": {
+      "question": "What is your approach to security?",
+      "answer": "We implement a comprehensive security strategy: strong authentication, web application firewall, intrusion attempt monitoring, automated backups and regular security updates."
+    }
+  },
+  "complementary": {
+    "custom-development": {
+      "title": "Custom development",
+      "description": "Creation of specific features to meet your particular needs."
+    },
+    "digital-marketing": {
+      "title": "Digital marketing",
+      "description": "Marketing strategies adapted to increase your online visibility."
+    },
+    "wordpress-training": {
+      "title": "WordPress training",
+      "description": "Custom training to master your site management."
+    }
+  }
+}
diff --git a/apps/web/src/locales/fr/app/services/[category]/[service]/page.json b/apps/web/src/locales/fr/app/services/[category]/[service]/page.json
new file mode 100644
index 000000000..e16db09fa
--- /dev/null
+++ b/apps/web/src/locales/fr/app/services/[category]/[service]/page.json
@@ -0,0 +1,28 @@
+{
+  "metadata": {
+    "not-found": {
+      "title": "Service non trouvé",
+      "description": "Ce service n'existe pas."
+    }
+  },
+  "features": {
+    "title": "Excellence en {service}",
+    "description": "Notre expertise en {service} vous garantit des solutions professionnelles et performantes."
+  },
+  "benefits": {
+    "title": "{service} professionnel",
+    "description": "Découvrez les avantages d'un service {service} professionnel."
+  },
+  "testimonials": {
+    "title": "Ils nous font confiance",
+    "description": "Découvrez les retours de nos clients sur leurs projets {service}"
+  },
+  "faq": {
+    "title": "Questions fréquentes",
+    "description": "Tout ce que vous devez savoir sur notre service de {service}"
+  },
+  "complementary": {
+    "title": "Services complémentaires",
+    "description": "Optimisez votre projet {service} avec nos services additionnels"
+  }
+}
diff --git a/apps/web/src/locales/fr/app/services/page.json b/apps/web/src/locales/fr/app/services/page.json
index b8c9e6e57..b82ebc7df 100644
--- a/apps/web/src/locales/fr/app/services/page.json
+++ b/apps/web/src/locales/fr/app/services/page.json
@@ -2,5 +2,18 @@
   "metadata": {
     "title": "Agence de services digitaux : web, mobile et design UI/UX",
     "description": "Services complets de développement web, mobile, design UI/UX et intégration CMS. Notre agence crée des solutions sur mesure qui répondent à vos objectifs."
+  },
+  "hero": {
+    "title": "Des solutions sur mesure pour vos projets digitaux",
+    "description": "De la conception à la réalisation, nous vous accompagnons à chaque étape de votre projet avec expertise et passion.",
+    "cta": "Démarrer un projet"
+  },
+  "technologies": {
+    "title": "Notre stack technologique",
+    "description": "Nous maîtrisons un large éventail de technologies modernes pour répondre à tous vos besoins."
+  },
+  "process": {
+    "title": "Notre processus de travail",
+    "description": "Une méthodologie éprouvée et flexible pour mener votre projet vers le succès."
   }
 }
diff --git a/apps/web/src/locales/fr/components/marketing/services/service-layout.json b/apps/web/src/locales/fr/components/marketing/services/service-layout.json
new file mode 100644
index 000000000..fb8898ca9
--- /dev/null
+++ b/apps/web/src/locales/fr/components/marketing/services/service-layout.json
@@ -0,0 +1,28 @@
+{
+  "hero": {
+    "cta": "Discuter de votre projet"
+  },
+  "cards": {
+    "custom": {
+      "title": "Solutions sur mesure",
+      "description": "Adaptées à vos besoins"
+    },
+    "support": {
+      "title": "Support expert",
+      "description": "Par nos spécialistes"
+    },
+    "technologies": {
+      "title": "Technologies modernes",
+      "description": "Toujours à jour"
+    },
+    "scalability": {
+      "title": "Évolutivité garantie",
+      "description": "Pour votre croissance"
+    }
+  },
+  "cta": {
+    "title": "Prêt à concrétiser votre projet ?",
+    "description": "Contactez-nous pour discuter de vos besoins et obtenir un devis personnalisé.",
+    "button": "Commencer maintenant"
+  }
+}
diff --git a/apps/web/src/locales/fr/components/marketing/services/service-overview.json b/apps/web/src/locales/fr/components/marketing/services/service-overview.json
new file mode 100644
index 000000000..6e064df59
--- /dev/null
+++ b/apps/web/src/locales/fr/components/marketing/services/service-overview.json
@@ -0,0 +1,29 @@
+{
+  "hero": {
+    "cta": "Discuter de votre projet"
+  },
+  "expertise": {
+    "title": "Une expertise pointue en {service}",
+    "description": "Nous combinons créativité et expertise technique pour offrir des solutions {service} qui répondent parfaitement à vos objectifs. Notre approche méthodique et notre expérience nous permettent de créer des solutions durables et évolutives."
+  },
+  "services": {
+    "badge": "Nos services",
+    "title": "Solutions {service} sur mesure",
+    "description": "Découvrez notre gamme complète de services {service}, conçue pour répondre à tous vos besoins et vous accompagner dans la réalisation de vos projets.",
+    "learnMore": "En savoir plus"
+  },
+  "benefits": {
+    "badge": "Avantages",
+    "title": "Pourquoi choisir nos services {service} ?"
+  },
+  "process": {
+    "badge": "Notre processus",
+    "title": "Comment nous travaillons",
+    "description": "Une approche intégrée qui combine nos différentes expertises pour un résultat optimal."
+  },
+  "cta": {
+    "title": "Prêt à concrétiser votre projet ?",
+    "description": "Contactez-nous pour discuter de vos besoins et obtenir un devis personnalisé.",
+    "button": "Commencer maintenant"
+  }
+}
diff --git a/apps/web/src/locales/fr/constants/services/backend.json b/apps/web/src/locales/fr/constants/services/backend.json
new file mode 100644
index 000000000..53ed52d85
--- /dev/null
+++ b/apps/web/src/locales/fr/constants/services/backend.json
@@ -0,0 +1,56 @@
+{
+  "name": "Développement Back-end",
+  "description": "Architecture et développement de solutions robustes",
+  "benefits": {
+    "scalable-architecture": {
+      "title": "Architecture scalable",
+      "description": "Systèmes conçus pour évoluer avec votre croissance, utilisant des architectures modernes et distribuées."
+    },
+    "optimized-database": {
+      "title": "Base de données optimisée",
+      "description": "Conception et optimisation des bases de données pour des performances maximales et une intégrité des données."
+    },
+    "robust-infrastructure": {
+      "title": "Infrastructure robuste",
+      "description": "Déploiement sur des infrastructures cloud modernes avec haute disponibilité et résilience."
+    },
+    "advanced-security": {
+      "title": "Sécurité avancée",
+      "description": "Implémentation des meilleures pratiques de sécurité et de protection des données sensibles."
+    }
+  },
+  "process": {
+    "needs-analysis": {
+      "title": "Analyse des besoins",
+      "description": "Étude approfondie des besoins techniques, définition de l'architecture et des choix technologiques."
+    },
+    "system-design": {
+      "title": "Conception système",
+      "description": "Design de l'architecture backend, modélisation des données et définition des APIs."
+    },
+    "api-development": {
+      "title": "Développement API",
+      "description": "Implémentation des APIs RESTful ou GraphQL avec documentation complète."
+    },
+    "database": {
+      "title": "Base de données",
+      "description": "Mise en place et optimisation des bases de données avec focus sur la performance et la scalabilité."
+    },
+    "testing-security": {
+      "title": "Tests et sécurité",
+      "description": "Implémentation des tests automatisés et des mesures de sécurité avancées."
+    },
+    "deployment-monitoring": {
+      "title": "Déploiement et monitoring",
+      "description": "Mise en place de l'infrastructure cloud, du monitoring et des alertes."
+    }
+  },
+  "process-services": {
+    "needs-analysis": ["Architecture", "Conseil technique"],
+    "system-design": ["Architecture", "Database Design"],
+    "api-development": ["API Development", "Documentation"],
+    "database": ["Database", "Optimisation"],
+    "testing-security": ["Tests", "Security"],
+    "deployment-monitoring": ["DevOps", "Monitoring"]
+  }
+}
diff --git a/apps/web/src/locales/fr/constants/services/backend/api.json b/apps/web/src/locales/fr/constants/services/backend/api.json
new file mode 100644
index 000000000..6f60671fa
--- /dev/null
+++ b/apps/web/src/locales/fr/constants/services/backend/api.json
@@ -0,0 +1,80 @@
+{
+  "name": "APIs RESTful",
+  "description": "Conception et développement d'APIs performantes",
+  "hero": {
+    "title": "APIs RESTful & GraphQL",
+    "description": "Développez des APIs modernes, sécurisées et performantes pour vos applications. Notre expertise vous garantit des interfaces robustes et évolutives qui répondent à vos besoins spécifiques."
+  },
+  "features": {
+    "rest-graphql": {
+      "title": "REST & GraphQL",
+      "description": "Développement d'APIs modernes avec les standards de l'industrie."
+    },
+    "advanced-security": {
+      "title": "Sécurité avancée",
+      "description": "Protection robuste contre les vulnérabilités et les attaques."
+    },
+    "optimal-performance": {
+      "title": "Performance optimale",
+      "description": "Architecture optimisée pour des temps de réponse minimaux."
+    },
+    "complete-documentation": {
+      "title": "Documentation complète",
+      "description": "Documentation claire et interactive pour une intégration facile."
+    }
+  },
+  "benefits": {
+    "high-availability": {
+      "title": "Haute disponibilité",
+      "description": "Infrastructure redondante pour une disponibilité maximale."
+    },
+    "scalability": {
+      "title": "Scalabilité",
+      "description": "Architecture conçue pour supporter la croissance."
+    },
+    "advanced-monitoring": {
+      "title": "Monitoring avancé",
+      "description": "Suivi en temps réel des performances et de la santé."
+    },
+    "intelligent-cache": {
+      "title": "Cache intelligent",
+      "description": "Optimisation des performances avec mise en cache avancée."
+    }
+  },
+  "faq": {
+    "rest-vs-graphql": {
+      "question": "Quelle est la différence entre REST et GraphQL ?",
+      "answer": "REST est une architecture traditionnelle où chaque endpoint correspond à une ressource spécifique, tandis que GraphQL permet aux clients de demander exactement les données dont ils ont besoin. Nous vous conseillons la meilleure approche selon vos besoins spécifiques et vos cas d'usage."
+    },
+    "api-security": {
+      "question": "Comment assurez-vous la sécurité des APIs ?",
+      "answer": "Nous implémentons plusieurs niveaux de sécurité : authentification JWT, chiffrement SSL/TLS, rate limiting, validation des données, protection contre les injections et les attaques CSRF. Nous suivons également les recommandations OWASP pour la sécurité des APIs."
+    },
+    "scaling": {
+      "question": "Comment gérez-vous la montée en charge ?",
+      "answer": "Nous concevons des APIs scalables horizontalement, avec load balancing, mise en cache distribuée, et optimisation des requêtes. L'architecture est pensée pour supporter une croissance importante du trafic."
+    },
+    "documentation": {
+      "question": "Quelle documentation fournissez-vous ?",
+      "answer": "Nous fournissons une documentation complète : documentation technique OpenAPI/Swagger, guides d'intégration, exemples de code, et environnement de test. La documentation est maintenue à jour avec chaque évolution de l'API."
+    },
+    "post-deployment-support": {
+      "question": "Proposez-vous un support après le déploiement ?",
+      "answer": "Oui, nous proposons plusieurs formules de maintenance incluant : monitoring 24/7, support technique, optimisation continue des performances, mises à jour de sécurité et évolutions fonctionnelles."
+    }
+  },
+  "complementary": {
+    "advanced-analytics": {
+      "title": "Analytics avancés",
+      "description": "Analyse détaillée de l'utilisation et des performances."
+    },
+    "data-migration": {
+      "title": "Migration de données",
+      "description": "Migration depuis vos systèmes existants."
+    },
+    "integration": {
+      "title": "Intégration",
+      "description": "Support pour l'intégration avec vos applications."
+    }
+  }
+}
diff --git a/apps/web/src/locales/fr/constants/services/backend/bots.json b/apps/web/src/locales/fr/constants/services/backend/bots.json
new file mode 100644
index 000000000..7ac351245
--- /dev/null
+++ b/apps/web/src/locales/fr/constants/services/backend/bots.json
@@ -0,0 +1,80 @@
+{
+  "name": "Bots Discord/Slack",
+  "description": "Développement de bots et d'automatisations",
+  "hero": {
+    "title": "Bots & Automatisations",
+    "description": "Développez des bots intelligents et des automatisations pour améliorer l'engagement et la productivité de votre communauté. Notre expertise vous garantit des bots fiables et performants pour Discord, Slack et autres plateformes."
+  },
+  "features": {
+    "discord-slack": {
+      "title": "Discord & Slack",
+      "description": "Bots personnalisés pour les principales plateformes de communication."
+    },
+    "advanced-commands": {
+      "title": "Commandes avancées",
+      "description": "Interface intuitive avec commandes personnalisables."
+    },
+    "optimal-performance": {
+      "title": "Performance optimale",
+      "description": "Architecture optimisée pour une réactivité maximale."
+    },
+    "integrations": {
+      "title": "Intégrations",
+      "description": "Connection avec vos outils et services existants."
+    }
+  },
+  "benefits": {
+    "intelligent-moderation": {
+      "title": "Modération intelligente",
+      "description": "Gestion automatisée de votre communauté et modération."
+    },
+    "notifications": {
+      "title": "Notifications",
+      "description": "Alertes personnalisées et mises à jour automatiques."
+    },
+    "engagement": {
+      "title": "Engagement",
+      "description": "Fonctionnalités interactives pour animer votre communauté."
+    },
+    "statistics": {
+      "title": "Statistiques",
+      "description": "Suivi détaillé de l'activité et des interactions."
+    }
+  },
+  "faq": {
+    "bot-types": {
+      "question": "Quels types de bots pouvez-vous développer ?",
+      "answer": "Nous développons des bots pour diverses plateformes (Discord, Slack, Telegram) avec différentes fonctionnalités : modération, support client, automatisation de tâches, statistiques, jeux et animations communautaires. Chaque bot est personnalisé selon vos besoins spécifiques."
+    },
+    "bot-reliability": {
+      "question": "Comment assurez-vous la fiabilité des bots ?",
+      "answer": "Nous implémentons plusieurs mécanismes : monitoring 24/7, redémarrage automatique en cas de problème, logs détaillés, et alertes en temps réel. Nous effectuons également des tests approfondis avant chaque déploiement."
+    },
+    "customization": {
+      "question": "Peut-on personnaliser les commandes et fonctionnalités ?",
+      "answer": "Oui, tous nos bots sont entièrement personnalisables : commandes, réponses, permissions, intégrations. Nous adaptons chaque fonctionnalité à vos besoins et votre charte de modération."
+    },
+    "security": {
+      "question": "Comment gérez-vous la sécurité ?",
+      "answer": "La sécurité est une priorité : authentification sécurisée, permissions granulaires, validation des entrées, protection contre le spam et les abus. Nous suivons les meilleures pratiques de chaque plateforme."
+    },
+    "post-deployment-support": {
+      "question": "Proposez-vous un support après le déploiement ?",
+      "answer": "Oui, nous proposons plusieurs formules de maintenance incluant : surveillance 24/7, mises à jour régulières, support technique, et évolutions fonctionnelles selon vos besoins."
+    }
+  },
+  "complementary": {
+    "analytics": {
+      "title": "Analytics",
+      "description": "Suivi détaillé de l'utilisation et des interactions."
+    },
+    "support-24-7": {
+      "title": "Support 24/7",
+      "description": "Surveillance continue et intervention rapide."
+    },
+    "evolutions": {
+      "title": "Évolutions",
+      "description": "Ajout régulier de nouvelles fonctionnalités."
+    }
+  }
+}
diff --git a/apps/web/src/locales/fr/constants/services/backend/cloud.json b/apps/web/src/locales/fr/constants/services/backend/cloud.json
new file mode 100644
index 000000000..1a4d4db4b
--- /dev/null
+++ b/apps/web/src/locales/fr/constants/services/backend/cloud.json
@@ -0,0 +1,80 @@
+{
+  "name": "Solutions Cloud",
+  "description": "Déploiement et gestion d'infrastructures cloud",
+  "hero": {
+    "title": "Solutions Cloud",
+    "description": "Optimisez votre infrastructure avec des solutions cloud modernes et évolutives. Notre expertise vous garantit un déploiement sécurisé et performant sur les principales plateformes cloud."
+  },
+  "features": {
+    "multi-cloud": {
+      "title": "Multi-cloud",
+      "description": "Support des principales plateformes (AWS, GCP, Azure)."
+    },
+    "advanced-security": {
+      "title": "Sécurité avancée",
+      "description": "Protection robuste de vos données et applications."
+    },
+    "optimal-performance": {
+      "title": "Performance optimale",
+      "description": "Architecture optimisée pour des performances maximales."
+    },
+    "automatic-scalability": {
+      "title": "Scalabilité automatique",
+      "description": "Adaptation dynamique aux besoins de charge."
+    }
+  },
+  "benefits": {
+    "high-availability": {
+      "title": "Haute disponibilité",
+      "description": "Infrastructure redondante et résiliente."
+    },
+    "elastic-storage": {
+      "title": "Stockage élastique",
+      "description": "Gestion flexible et sécurisée des données."
+    },
+    "advanced-monitoring": {
+      "title": "Monitoring avancé",
+      "description": "Surveillance en temps réel de votre infrastructure."
+    },
+    "enhanced-security": {
+      "title": "Sécurité renforcée",
+      "description": "Protection multicouche de vos ressources."
+    }
+  },
+  "faq": {
+    "platform-choice": {
+      "question": "Quelle plateforme cloud choisir ?",
+      "answer": "Le choix dépend de vos besoins spécifiques : AWS excelle en variété de services, Google Cloud en machine learning, et Azure en intégration Microsoft. Nous vous guidons vers la meilleure solution en fonction de vos objectifs, contraintes techniques et budget."
+    },
+    "cloud-security": {
+      "question": "Comment gérez-vous la sécurité dans le cloud ?",
+      "answer": "Nous implémentons une sécurité multicouche : chiffrement des données au repos et en transit, contrôle d'accès IAM, réseaux privés virtuels (VPC), pare-feu applicatifs (WAF), et surveillance continue des menaces. Nous suivons les meilleures pratiques de chaque plateforme."
+    },
+    "cost-optimization": {
+      "question": "Comment optimisez-vous les coûts ?",
+      "answer": "Nous utilisons plusieurs stratégies : instances réservées, scaling automatique, optimisation des ressources, suppression des ressources inutilisées, et monitoring des coûts. Nous effectuons des audits réguliers pour identifier les opportunités d'économies."
+    },
+    "high-availability": {
+      "question": "Comment assurez-vous la haute disponibilité ?",
+      "answer": "Nous déployons votre infrastructure sur plusieurs zones de disponibilité, avec réplication des données, load balancing, et failover automatique. Nous mettons également en place des plans de reprise d'activité (DRP) robustes."
+    },
+    "support-24-7": {
+      "question": "Proposez-vous un support 24/7 ?",
+      "answer": "Oui, nous proposons plusieurs niveaux de support incluant : monitoring 24/7, alerting automatique, intervention rapide en cas d'incident, maintenance préventive, et support technique dédié."
+    }
+  },
+  "complementary": {
+    "cloud-migration": {
+      "title": "Migration cloud",
+      "description": "Transition en douceur vers le cloud."
+    },
+    "multi-region": {
+      "title": "Multi-région",
+      "description": "Déploiement global de vos applications."
+    },
+    "devops": {
+      "title": "DevOps",
+      "description": "Automatisation et CI/CD dans le cloud."
+    }
+  }
+}
diff --git a/apps/web/src/locales/fr/constants/services/backend/database.json b/apps/web/src/locales/fr/constants/services/backend/database.json
new file mode 100644
index 000000000..323bb6a5c
--- /dev/null
+++ b/apps/web/src/locales/fr/constants/services/backend/database.json
@@ -0,0 +1,80 @@
+{
+  "name": "Bases de données",
+  "description": "Architecture et optimisation de bases de données",
+  "hero": {
+    "title": "Architecture de Bases de Données",
+    "description": "Concevez et optimisez vos bases de données pour des performances optimales et une scalabilité maximale. Notre expertise vous garantit une architecture robuste qui répond à vos besoins actuels et futurs."
+  },
+  "features": {
+    "optimized-architecture": {
+      "title": "Architecture optimisée",
+      "description": "Conception intelligente des schémas et des relations pour des performances optimales."
+    },
+    "enhanced-security": {
+      "title": "Sécurité renforcée",
+      "description": "Protection robuste des données sensibles et conformité aux normes."
+    },
+    "high-performance": {
+      "title": "Haute performance",
+      "description": "Optimisation des requêtes et des index pour des temps de réponse minimaux."
+    },
+    "backup-recovery": {
+      "title": "Backup & Recovery",
+      "description": "Stratégies de sauvegarde et de restauration fiables."
+    }
+  },
+  "benefits": {
+    "horizontal-scalability": {
+      "title": "Scalabilité horizontale",
+      "description": "Architecture conçue pour la croissance et la montée en charge."
+    },
+    "replication": {
+      "title": "Réplication",
+      "description": "Haute disponibilité et répartition géographique des données."
+    },
+    "advanced-monitoring": {
+      "title": "Monitoring avancé",
+      "description": "Suivi en temps réel des performances et de la santé."
+    },
+    "optimized-search": {
+      "title": "Recherche optimisée",
+      "description": "Indexation intelligente pour des recherches rapides."
+    }
+  },
+  "faq": {
+    "sql-vs-nosql": {
+      "question": "Comment choisir entre SQL et NoSQL ?",
+      "answer": "Le choix dépend de vos besoins spécifiques. Les bases SQL sont idéales pour les données structurées avec des relations complexes, tandis que NoSQL excelle dans la gestion de données non structurées et la scalabilité horizontale. Nous vous guidons vers la meilleure solution selon vos cas d'usage."
+    },
+    "data-security": {
+      "question": "Comment gérez-vous la sécurité des données ?",
+      "answer": "Nous implémentons plusieurs niveaux de sécurité : chiffrement des données sensibles, contrôle d'accès granulaire, audit des accès, backups réguliers, et conformité aux normes de sécurité (RGPD, etc.). Nous effectuons également des tests de sécurité réguliers."
+    },
+    "performance-optimization": {
+      "question": "Comment optimisez-vous les performances ?",
+      "answer": "Nous utilisons plusieurs techniques : optimisation des schémas et des requêtes, indexation intelligente, mise en cache, partitionnement des données, et monitoring continu. Nous analysons régulièrement les performances pour identifier les opportunités d'optimisation."
+    },
+    "migration-services": {
+      "question": "Proposez-vous des services de migration ?",
+      "answer": "Oui, nous gérons les migrations de bases de données de bout en bout : analyse de l'existant, planification, tests, migration des données avec minimum d'interruption, et validation post-migration. Nous assurons la cohérence et l'intégrité des données."
+    },
+    "data-availability": {
+      "question": "Comment assurez-vous la disponibilité des données ?",
+      "answer": "Nous mettons en place des architectures hautement disponibles avec réplication, clustering, et plans de reprise d'activité. Nous effectuons des sauvegardes régulières et testons les procédures de restauration."
+    }
+  },
+  "complementary": {
+    "data-migration": {
+      "title": "Migration de données",
+      "description": "Transfer sécurisé depuis vos systèmes existants."
+    },
+    "audit-optimization": {
+      "title": "Audit & Optimisation",
+      "description": "Analyse des performances et recommandations."
+    },
+    "monitoring-24-7": {
+      "title": "Monitoring 24/7",
+      "description": "Surveillance continue et alertes en temps réel."
+    }
+  }
+}
diff --git a/apps/web/src/locales/fr/constants/services/backend/microservices.json b/apps/web/src/locales/fr/constants/services/backend/microservices.json
new file mode 100644
index 000000000..ce13762b9
--- /dev/null
+++ b/apps/web/src/locales/fr/constants/services/backend/microservices.json
@@ -0,0 +1,80 @@
+{
+  "name": "Microservices",
+  "description": "Architecture et développement de microservices",
+  "hero": {
+    "title": "Architecture Microservices",
+    "description": "Transformez vos applications monolithiques en architectures microservices modernes et scalables. Notre expertise vous garantit une infrastructure flexible, résiliente et performante."
+  },
+  "features": {
+    "scalable-architecture": {
+      "title": "Architecture évolutive",
+      "description": "Conception modulaire pour une scalabilité optimale."
+    },
+    "continuous-deployment": {
+      "title": "Déploiement continu",
+      "description": "Pipeline CI/CD pour des mises à jour fluides."
+    },
+    "optimal-performance": {
+      "title": "Performance optimale",
+      "description": "Services indépendants pour une meilleure réactivité."
+    },
+    "high-availability": {
+      "title": "Haute disponibilité",
+      "description": "Architecture résiliente avec redondance."
+    }
+  },
+  "benefits": {
+    "granular-scalability": {
+      "title": "Scalabilité granulaire",
+      "description": "Mise à l'échelle indépendante de chaque service."
+    },
+    "flexible-deployment": {
+      "title": "Déploiement flexible",
+      "description": "Mises à jour sans interruption de service."
+    },
+    "fault-isolation": {
+      "title": "Isolation des pannes",
+      "description": "Résilience accrue grâce à l'isolation des services."
+    },
+    "advanced-monitoring": {
+      "title": "Monitoring avancé",
+      "description": "Surveillance détaillée de chaque composant."
+    }
+  },
+  "faq": {
+    "when-microservices": {
+      "question": "Quand adopter une architecture microservices ?",
+      "answer": "L'architecture microservices est particulièrement adaptée aux applications complexes nécessitant une grande scalabilité, une mise à l'échelle indépendante des composants, et une évolution rapide. Nous évaluons avec vous si cette architecture correspond à vos besoins spécifiques."
+    },
+    "service-communication": {
+      "question": "Comment gérez-vous la communication entre services ?",
+      "answer": "Nous implémentons des patterns de communication robustes : API Gateway, message brokers (Kafka, RabbitMQ), communication synchrone (REST, gRPC) et asynchrone. Chaque méthode est choisie selon les besoins spécifiques de performance et de fiabilité."
+    },
+    "data-consistency": {
+      "question": "Comment assurez-vous la cohérence des données ?",
+      "answer": "Nous utilisons plusieurs stratégies : Saga pattern pour les transactions distribuées, Event Sourcing pour la traçabilité, et CQRS pour la séparation des opérations de lecture et d'écriture. La cohérence éventuelle est gérée de manière appropriée."
+    },
+    "infrastructure-monitoring": {
+      "question": "Comment surveillez-vous l'infrastructure ?",
+      "answer": "Nous mettons en place un monitoring complet : métriques de performance, tracing distribué, logs centralisés, et alerting intelligent. Des dashboards personnalisés permettent de visualiser la santé de chaque service."
+    },
+    "team-training": {
+      "question": "Proposez-vous de la formation pour les équipes ?",
+      "answer": "Oui, nous proposons des formations complètes pour vos équipes : principes des microservices, bonnes pratiques de développement, monitoring et troubleshooting, et utilisation des outils DevOps."
+    }
+  },
+  "complementary": {
+    "devops-cicd": {
+      "title": "DevOps & CI/CD",
+      "description": "Automatisation complète du déploiement."
+    },
+    "monitoring-24-7": {
+      "title": "Monitoring 24/7",
+      "description": "Surveillance continue et alertes en temps réel."
+    },
+    "optimization": {
+      "title": "Optimisation",
+      "description": "Amélioration continue des performances."
+    }
+  }
+}
diff --git a/apps/web/src/locales/fr/constants/services/design.json b/apps/web/src/locales/fr/constants/services/design.json
new file mode 100644
index 000000000..9b828a24a
--- /dev/null
+++ b/apps/web/src/locales/fr/constants/services/design.json
@@ -0,0 +1,56 @@
+{
+  "name": "Design UI/UX",
+  "description": "Création d'interfaces modernes et d'expériences utilisateur optimales",
+  "benefits": {
+    "user-centered-design": {
+      "title": "Design UI/UX centré utilisateur",
+      "description": "Une approche qui place les besoins utilisateurs au cœur de nos designs, validée par des prototypes interactifs."
+    },
+    "creative-innovation": {
+      "title": "Innovation créative",
+      "description": "Des solutions UI/UX créatives et des prototypes innovants qui distinguent votre marque tout en respectant les standards."
+    },
+    "iterative-prototyping": {
+      "title": "Prototypage itératif",
+      "description": "Une méthodologie basée sur des prototypes rapides et des itérations fréquentes pour affiner l'expérience utilisateur."
+    },
+    "business-objectives": {
+      "title": "Objectifs business",
+      "description": "Un design UI/UX aligné sur vos objectifs commerciaux, validé par des tests utilisateurs sur prototypes."
+    }
+  },
+  "process": {
+    "needs-analysis": {
+      "title": "Analyse des besoins",
+      "description": "Première étape cruciale où nous analysons vos besoins, votre marque et vos objectifs business pour définir la direction UI/UX."
+    },
+    "research-moodboard": {
+      "title": "Recherche et moodboard",
+      "description": "Création de moodboards et exploration des directions créatives possibles. Définition de la direction artistique globale."
+    },
+    "wireframes": {
+      "title": "Wireframes",
+      "description": "Conception des wireframes pour valider la structure, la hiérarchie et l'architecture de l'information."
+    },
+    "interface-design": {
+      "title": "Design d'interface",
+      "description": "Création des maquettes finales en respectant votre charte graphique. Attention particulière aux composants et à leur réutilisabilité."
+    },
+    "prototyping": {
+      "title": "Prototypage",
+      "description": "Création de prototypes pour tester les interactions et valider les parcours utilisateurs."
+    },
+    "development": {
+      "title": "Développement",
+      "description": "Transformation des maquettes en interfaces fonctionnelles, avec une attention particulière aux animations définies."
+    }
+  },
+  "process-services": {
+    "needs-analysis": ["Design UI/UX"],
+    "research-moodboard": ["Design UI/UX", "Moodboard"],
+    "wireframes": ["Design UI/UX", "Wireframes"],
+    "interface-design": ["Design UI/UX"],
+    "prototyping": ["Design UI/UX"],
+    "development": ["Développement Frontend", "Intégration"]
+  }
+}
diff --git a/apps/web/src/locales/fr/constants/services/design/audit.json b/apps/web/src/locales/fr/constants/services/design/audit.json
new file mode 100644
index 000000000..d3bfd2846
--- /dev/null
+++ b/apps/web/src/locales/fr/constants/services/design/audit.json
@@ -0,0 +1,80 @@
+{
+  "name": "Audit UX/UI",
+  "description": "Analyse et optimisation de vos interfaces existantes",
+  "hero": {
+    "title": "Audit UX/UI & Optimisation",
+    "description": "Améliorez l'expérience utilisateur de vos interfaces grâce à un audit professionnel. Notre expertise vous garantit une analyse approfondie et des recommandations concrètes pour optimiser vos interfaces."
+  },
+  "features": {
+    "heuristic-analysis": {
+      "title": "Analyse heuristique",
+      "description": "Évaluation experte basée sur les principes UX."
+    },
+    "user-testing": {
+      "title": "Tests utilisateurs",
+      "description": "Observation et analyse des comportements réels."
+    },
+    "analytics": {
+      "title": "Analytics",
+      "description": "Analyse des données d'utilisation."
+    },
+    "accessibility": {
+      "title": "Accessibilité",
+      "description": "Vérification des standards d'accessibilité."
+    }
+  },
+  "benefits": {
+    "conversion": {
+      "title": "Conversion",
+      "description": "Identification des freins à la conversion."
+    },
+    "performance": {
+      "title": "Performance",
+      "description": "Analyse des métriques de performance."
+    },
+    "satisfaction": {
+      "title": "Satisfaction",
+      "description": "Mesure de la satisfaction utilisateur."
+    },
+    "journeys": {
+      "title": "Parcours",
+      "description": "Optimisation des parcours utilisateurs."
+    }
+  },
+  "faq": {
+    "complete-audit": {
+      "question": "Que comprend un audit UX/UI complet ?",
+      "answer": "Un audit complet inclut : analyse heuristique basée sur les principes UX, tests utilisateurs, analyse des données analytics, évaluation de l'accessibilité, benchmark concurrentiel, et recommandations détaillées. Nous fournissons un rapport complet avec des solutions concrètes."
+    },
+    "audit-process": {
+      "question": "Comment se déroule le processus d'audit ?",
+      "answer": "Le processus commence par une phase de découverte pour comprendre vos objectifs et KPIs. Nous réalisons ensuite les différentes analyses (heuristique, données, tests), synthétisons les résultats, et préparons un rapport détaillé avec des recommandations priorisées."
+    },
+    "deliverables": {
+      "question": "Quels livrables sont fournis ?",
+      "answer": "Vous recevez un rapport d'audit complet incluant : synthèse exécutive, analyses détaillées, visualisations des données, problèmes identifiés avec leur niveau de gravité, recommandations priorisées, et plan d'action suggéré."
+    },
+    "measuring-impact": {
+      "question": "Comment mesurez-vous l'impact des recommandations ?",
+      "answer": "Nous définissons des KPIs spécifiques pour chaque recommandation et mettons en place un suivi des métriques clés (taux de conversion, satisfaction utilisateur, temps de complétion des tâches, etc.) pour mesurer l'impact des améliorations."
+    },
+    "post-audit-support": {
+      "question": "Proposez-vous un accompagnement post-audit ?",
+      "answer": "Oui, nous proposons un accompagnement pour la mise en œuvre des recommandations, incluant : priorisation des actions, support dans l'implémentation, et mesure des résultats. Nous pouvons également réaliser des audits de suivi."
+    }
+  },
+  "complementary": {
+    "user-testing": {
+      "title": "Tests utilisateurs",
+      "description": "Sessions de tests approfondis avec vos utilisateurs."
+    },
+    "advanced-analytics": {
+      "title": "Analytics avancés",
+      "description": "Mise en place de tracking et analyse approfondie."
+    },
+    "ux-training": {
+      "title": "Formation UX",
+      "description": "Formation de vos équipes aux bonnes pratiques."
+    }
+  }
+}
diff --git a/apps/web/src/locales/fr/constants/services/design/branding.json b/apps/web/src/locales/fr/constants/services/design/branding.json
new file mode 100644
index 000000000..da218546a
--- /dev/null
+++ b/apps/web/src/locales/fr/constants/services/design/branding.json
@@ -0,0 +1,80 @@
+{
+  "name": "Charte graphique",
+  "description": "Création de votre identité visuelle complète",
+  "hero": {
+    "title": "Branding & Identité de Marque",
+    "description": "Donnez vie à votre marque avec une identité visuelle distinctive et mémorable. Notre expertise en branding vous aide à créer une image de marque qui résonne avec votre audience et reflète vos valeurs."
+  },
+  "features": {
+    "visual-identity": {
+      "title": "Identité visuelle",
+      "description": "Création d'une identité unique et mémorable."
+    },
+    "brand-values": {
+      "title": "Valeurs de marque",
+      "description": "Expression visuelle de votre ADN et vos valeurs."
+    },
+    "brand-guidelines": {
+      "title": "Charte graphique",
+      "description": "Documentation complète de votre identité."
+    },
+    "design-system": {
+      "title": "Design system",
+      "description": "Éléments visuels cohérents et réutilisables."
+    }
+  },
+  "benefits": {
+    "recognition": {
+      "title": "Reconnaissance",
+      "description": "Image de marque mémorable et distinctive."
+    },
+    "consistency": {
+      "title": "Cohérence",
+      "description": "Communication visuelle unifiée sur tous les supports."
+    },
+    "trust": {
+      "title": "Confiance",
+      "description": "Crédibilité renforcée auprès de votre audience."
+    },
+    "reach": {
+      "title": "Portée",
+      "description": "Impact visuel fort sur tous les canaux."
+    }
+  },
+  "faq": {
+    "complete-identity": {
+      "question": "Que comprend une identité de marque complète ?",
+      "answer": "Une identité de marque complète inclut le logo, la palette de couleurs, la typographie, les éléments graphiques, le ton de voix, et les règles d'utilisation. Nous fournissons une charte graphique détaillée qui documente tous ces éléments et guide leur utilisation cohérente."
+    },
+    "creation-process": {
+      "question": "Comment se déroule le processus de création ?",
+      "answer": "Le processus commence par une phase de découverte pour comprendre votre marque, vos valeurs et votre audience. Nous développons ensuite des concepts créatifs, créons les éléments visuels, et itérons selon vos retours. Le processus se termine par la livraison d'une charte graphique complète."
+    },
+    "deliverables": {
+      "question": "Quels livrables sont fournis ?",
+      "answer": "Vous recevez un package complet incluant : logos (différentes versions), palette de couleurs, typographies, éléments graphiques, modèles de documents, guides d'utilisation, et fichiers sources dans tous les formats nécessaires."
+    },
+    "uniqueness": {
+      "question": "Comment garantissez-vous l'unicité de l'identité ?",
+      "answer": "Nous effectuons une recherche approfondie de votre marché et de la concurrence pour créer une identité distinctive. Nous vérifions également la disponibilité des éléments visuels pour éviter tout conflit avec des marques existantes."
+    },
+    "transition": {
+      "question": "Comment gérez-vous la transition vers la nouvelle identité ?",
+      "answer": "Nous fournissons un plan de déploiement progressif qui guide la transition vers la nouvelle identité. Cela inclut des recommandations pour la communication interne et externe, et un calendrier de mise en œuvre."
+    }
+  },
+  "complementary": {
+    "marketing-kit": {
+      "title": "Marketing Kit",
+      "description": "Création de supports marketing cohérents."
+    },
+    "social-media": {
+      "title": "Réseaux sociaux",
+      "description": "Adaptation pour les médias sociaux."
+    },
+    "print-materials": {
+      "title": "Supports print",
+      "description": "Création de supports imprimés."
+    }
+  }
+}
diff --git a/apps/web/src/locales/fr/constants/services/design/moodboard.json b/apps/web/src/locales/fr/constants/services/design/moodboard.json
new file mode 100644
index 000000000..6dfcb6fae
--- /dev/null
+++ b/apps/web/src/locales/fr/constants/services/design/moodboard.json
@@ -0,0 +1,80 @@
+{
+  "name": "Moodboard",
+  "description": "Définition de l'identité visuelle et de l'ambiance de votre projet",
+  "hero": {
+    "title": "Moodboards & Direction Artistique",
+    "description": "Donnez vie à votre vision grâce à des moodboards soigneusement élaborés. Notre expertise en design vous aide à définir une direction artistique claire et inspirante pour votre projet."
+  },
+  "features": {
+    "creative-direction": {
+      "title": "Direction créative",
+      "description": "Définition claire de l'ambiance et du style visuel."
+    },
+    "color-palette": {
+      "title": "Palette de couleurs",
+      "description": "Sélection harmonieuse des couleurs de votre identité."
+    },
+    "visual-style": {
+      "title": "Style visuel",
+      "description": "Exploration et définition de votre univers graphique."
+    },
+    "targeted-inspiration": {
+      "title": "Inspiration ciblée",
+      "description": "Recherche approfondie adaptée à votre secteur."
+    }
+  },
+  "benefits": {
+    "clear-direction": {
+      "title": "Direction claire",
+      "description": "Vision commune et alignement des équipes créatives."
+    },
+    "visual-communication": {
+      "title": "Communication visuelle",
+      "description": "Support efficace pour partager votre vision."
+    },
+    "consistency": {
+      "title": "Cohérence",
+      "description": "Garantie d'une identité visuelle harmonieuse."
+    },
+    "creative-expertise": {
+      "title": "Expertise créative",
+      "description": "Conseils professionnels et direction artistique."
+    }
+  },
+  "faq": {
+    "what-is-moodboard": {
+      "question": "Qu'est-ce qu'un moodboard et à quoi sert-il ?",
+      "answer": "Un moodboard est un assemblage visuel qui définit la direction artistique de votre projet. Il combine couleurs, typographies, images et textures pour créer une référence visuelle cohérente. C'est un outil essentiel pour communiquer votre vision et assurer la cohérence de votre identité visuelle."
+    },
+    "creation-process": {
+      "question": "Comment se déroule le processus de création ?",
+      "answer": "Le processus commence par une phase de découverte où nous explorons vos objectifs et votre univers. Nous effectuons ensuite une recherche approfondie pour sélectionner les éléments visuels appropriés. Après plusieurs itérations et vos retours, nous finalisons le moodboard qui servira de guide pour votre projet."
+    },
+    "moodboard-elements": {
+      "question": "Quels éléments comprend un moodboard ?",
+      "answer": "Un moodboard professionnel inclut généralement : une palette de couleurs, des typographies, des images d'inspiration, des textures, des patterns, et des références stylistiques. Nous ajoutons également des notes explicatives pour clarifier les choix créatifs."
+    },
+    "moodboard-usage": {
+      "question": "Comment utilisez-vous le moodboard dans la suite du projet ?",
+      "answer": "Le moodboard sert de référence tout au long du projet. Il guide les décisions de design, assure la cohérence visuelle et facilite la communication entre toutes les parties prenantes. C'est un document vivant qui peut évoluer avec vos retours."
+    },
+    "creation-timeline": {
+      "question": "Combien de temps prend la création d'un moodboard ?",
+      "answer": "La création d'un moodboard professionnel prend généralement 1 à 2 semaines, incluant la phase de recherche, la création initiale et les itérations basées sur vos retours. Ce temps nous permet d'explorer en profondeur et d'affiner la direction artistique."
+    }
+  },
+  "complementary": {
+    "brand-guidelines": {
+      "title": "Charte graphique",
+      "description": "Création d'une charte graphique complète."
+    },
+    "style-guide": {
+      "title": "Style Guide",
+      "description": "Guide détaillé d'utilisation de votre identité."
+    },
+    "artistic-direction": {
+      "title": "Direction artistique",
+      "description": "Accompagnement créatif continu."
+    }
+  }
+}
diff --git a/apps/web/src/locales/fr/constants/services/design/ui.json b/apps/web/src/locales/fr/constants/services/design/ui.json
new file mode 100644
index 000000000..f8b460445
--- /dev/null
+++ b/apps/web/src/locales/fr/constants/services/design/ui.json
@@ -0,0 +1,80 @@
+{
+  "name": "Maquettage UI",
+  "description": "Design détaillé des interfaces utilisateur",
+  "hero": {
+    "title": "Design d'Interface Utilisateur",
+    "description": "Créez des interfaces modernes, élégantes et intuitives pour vos applications. Notre expertise en design UI vous garantit des maquettes professionnelles qui captiveront vos utilisateurs."
+  },
+  "features": {
+    "modern-design": {
+      "title": "Design moderne",
+      "description": "Interfaces élégantes suivant les dernières tendances."
+    },
+    "design-system": {
+      "title": "Système de design",
+      "description": "Composants cohérents et réutilisables."
+    },
+    "responsive-design": {
+      "title": "Responsive design",
+      "description": "Adaptation parfaite à tous les écrans."
+    },
+    "animations-micro-interactions": {
+      "title": "Animations & micro-interactions",
+      "description": "Interactions fluides et engageantes."
+    }
+  },
+  "benefits": {
+    "visual-identity": {
+      "title": "Identité visuelle",
+      "description": "Design cohérent avec votre marque."
+    },
+    "user-experience": {
+      "title": "Expérience utilisateur",
+      "description": "Interfaces intuitives et agréables à utiliser."
+    },
+    "design-system": {
+      "title": "Design system",
+      "description": "Bibliothèque de composants réutilisables."
+    },
+    "accessibility": {
+      "title": "Accessibilité",
+      "description": "Interfaces accessibles à tous les utilisateurs."
+    }
+  },
+  "faq": {
+    "ui-design-process": {
+      "question": "Comment se déroule le processus de design UI ?",
+      "answer": "Le processus commence par l'analyse de vos besoins et de votre identité de marque. Nous créons ensuite des premières versions des écrans clés, établissons le système de design, puis itérons sur les maquettes détaillées. Chaque étape inclut vos retours pour assurer un résultat parfaitement aligné avec vos attentes."
+    },
+    "tools-deliverables": {
+      "question": "Quels outils et livrables sont fournis ?",
+      "answer": "Nous utilisons principalement Figma pour le design UI. Vous recevez les maquettes détaillées de tous les écrans, un système de design complet avec ses composants, les spécifications pour les développeurs, et les assets nécessaires à l'intégration."
+    },
+    "responsive-handling": {
+      "question": "Comment gérez-vous le responsive design ?",
+      "answer": "Nous suivons une approche mobile-first et créons des maquettes pour chaque breakpoint important (mobile, tablette, desktop). Chaque interface est optimisée pour offrir la meilleure expérience possible sur son support."
+    },
+    "design-consistency": {
+      "question": "Comment garantissez-vous la cohérence du design ?",
+      "answer": "Nous créons un système de design complet incluant une bibliothèque de composants, des règles typographiques, une palette de couleurs et des principes de design. Ce système assure la cohérence à travers toute l'interface."
+    },
+    "developer-handoff": {
+      "question": "Comment facilitez-vous le travail des développeurs ?",
+      "answer": "Nous fournissons des spécifications détaillées pour chaque composant, incluant les mesures, les styles, les états et les interactions. Nous utilisons également des outils comme Zeplin ou les exports Figma pour faciliter l'intégration."
+    }
+  },
+  "complementary": {
+    "design-system": {
+      "title": "Design system",
+      "description": "Création d'une bibliothèque de composants."
+    },
+    "prototyping": {
+      "title": "Prototypage",
+      "description": "Création de prototypes interactifs."
+    },
+    "development": {
+      "title": "Développement",
+      "description": "Intégration de vos maquettes en code."
+    }
+  }
+}
diff --git a/apps/web/src/locales/fr/constants/services/design/wireframes.json b/apps/web/src/locales/fr/constants/services/design/wireframes.json
new file mode 100644
index 000000000..85f872e5b
--- /dev/null
+++ b/apps/web/src/locales/fr/constants/services/design/wireframes.json
@@ -0,0 +1,80 @@
+{
+  "name": "Wireframes",
+  "description": "Conception de la structure et du parcours utilisateur",
+  "hero": {
+    "title": "Wireframes & Architecture UX",
+    "description": "Structurez vos interfaces utilisateur avec des wireframes professionnels. Notre expertise en UX design vous garantit une architecture intuitive et une expérience utilisateur optimale dès les premières étapes de votre projet."
+  },
+  "features": {
+    "ux-architecture": {
+      "title": "Architecture UX",
+      "description": "Structure claire et logique de vos interfaces."
+    },
+    "user-journey": {
+      "title": "Parcours utilisateur",
+      "description": "Optimisation des flux de navigation."
+    },
+    "visual-hierarchy": {
+      "title": "Hiérarchie visuelle",
+      "description": "Organisation efficace du contenu et des fonctionnalités."
+    },
+    "interactions": {
+      "title": "Interactions",
+      "description": "Définition des comportements et des transitions."
+    }
+  },
+  "benefits": {
+    "responsive-design": {
+      "title": "Responsive Design",
+      "description": "Adaptation à tous les formats d'écrans."
+    },
+    "rapid-prototyping": {
+      "title": "Prototypage rapide",
+      "description": "Tests et itérations efficaces."
+    },
+    "collaboration": {
+      "title": "Collaboration",
+      "description": "Communication claire avec toutes les parties prenantes."
+    },
+    "early-validation": {
+      "title": "Validation précoce",
+      "description": "Détection et correction rapide des problèmes UX."
+    }
+  },
+  "faq": {
+    "what-is-wireframe": {
+      "question": "Qu'est-ce qu'un wireframe et pourquoi est-ce important ?",
+      "answer": "Un wireframe est une représentation schématique de votre interface qui se concentre sur la structure, la hiérarchie et les fonctionnalités, sans les éléments de design final. C'est une étape cruciale qui permet de valider l'architecture de l'information et l'expérience utilisateur avant d'investir dans le design détaillé."
+    },
+    "creation-process": {
+      "question": "Comment se déroule le processus de création ?",
+      "answer": "Le processus commence par l'analyse de vos besoins et objectifs. Nous créons ensuite des wireframes de basse fidélité pour valider la structure globale, puis des versions plus détaillées avec les interactions. Après plusieurs itérations et vos retours, nous finalisons les wireframes qui serviront de base au design UI."
+    },
+    "deliverables": {
+      "question": "Quels livrables sont fournis ?",
+      "answer": "Vous recevez un ensemble complet de wireframes pour chaque écran clé, des diagrammes de flux utilisateur, une documentation des interactions, et des prototypes interactifs pour tester les parcours utilisateur. Tous les fichiers sources sont également fournis."
+    },
+    "responsive-handling": {
+      "question": "Comment gérez-vous le responsive design ?",
+      "answer": "Nous créons des wireframes adaptés à chaque format d'écran important (desktop, tablet, mobile) en suivant une approche mobile-first. Chaque version est optimisée pour offrir la meilleure expérience utilisateur possible sur son support."
+    },
+    "creation-timeline": {
+      "question": "Combien de temps prend la création des wireframes ?",
+      "answer": "La durée dépend de la complexité du projet, mais généralement 2 à 4 semaines pour un projet moyen, incluant les phases d'analyse, création, itérations et finalisation. Nous établissons un planning détaillé au début du projet."
+    }
+  },
+  "complementary": {
+    "ux-audit": {
+      "title": "Audit UX",
+      "description": "Analyse approfondie de vos interfaces existantes."
+    },
+    "prototyping": {
+      "title": "Prototypage",
+      "description": "Création de prototypes interactifs."
+    },
+    "ux-documentation": {
+      "title": "Documentation UX",
+      "description": "Documentation détaillée des parcours utilisateur."
+    }
+  }
+}
diff --git a/apps/web/src/locales/fr/constants/services/frontend.json b/apps/web/src/locales/fr/constants/services/frontend.json
new file mode 100644
index 000000000..75517a3e2
--- /dev/null
+++ b/apps/web/src/locales/fr/constants/services/frontend.json
@@ -0,0 +1,56 @@
+{
+  "name": "Développement front-end",
+  "description": "Création d'applications web et mobiles performantes",
+  "benefits": {
+    "scalable-architecture": {
+      "title": "Architecture évolutive",
+      "description": "Applications construites sur des architectures modernes et scalables, prêtes pour l'évolution de votre projet."
+    },
+    "optimal-performance": {
+      "title": "Performance optimale",
+      "description": "Focus sur les performances avec des techniques avancées d'optimisation et de mise en cache."
+    },
+    "maintainable-code": {
+      "title": "Code maintenable",
+      "description": "Architecture propre et modulaire permettant une maintenance facile et des évolutions rapides."
+    },
+    "enhanced-security": {
+      "title": "Sécurité renforcée",
+      "description": "Implémentation des meilleures pratiques de sécurité frontend pour protéger vos utilisateurs."
+    }
+  },
+  "process": {
+    "technical-architecture": {
+      "title": "Architecture technique",
+      "description": "Définition de l'architecture frontend, choix des technologies et mise en place de l'environnement de développement."
+    },
+    "project-setup": {
+      "title": "Mise en place du projet",
+      "description": "Configuration du projet avec les bonnes pratiques de développement, tests et déploiement continu."
+    },
+    "feature-development": {
+      "title": "Développement des features",
+      "description": "Implémentation des fonctionnalités avec un focus sur la qualité du code et les performances."
+    },
+    "state-management": {
+      "title": "Gestion de l'état",
+      "description": "Mise en place d'une gestion d'état robuste et performante pour les données de l'application."
+    },
+    "testing-quality": {
+      "title": "Tests et qualité",
+      "description": "Mise en place des tests automatisés et des processus d'assurance qualité."
+    },
+    "optimization-monitoring": {
+      "title": "Optimisation et monitoring",
+      "description": "Optimisation des performances et mise en place d'outils de monitoring."
+    }
+  },
+  "process-services": {
+    "technical-architecture": ["Architecture", "Conseil technique"],
+    "project-setup": ["Setup technique", "CI/CD"],
+    "feature-development": ["Développement Frontend", "React", "Next.js"],
+    "state-management": ["State Management", "API Integration"],
+    "testing-quality": ["Tests unitaires", "Tests E2E"],
+    "optimization-monitoring": ["Performance", "Analytics"]
+  }
+}
diff --git a/apps/web/src/locales/fr/constants/services/frontend/desktop.json b/apps/web/src/locales/fr/constants/services/frontend/desktop.json
new file mode 100644
index 000000000..c7de3ea14
--- /dev/null
+++ b/apps/web/src/locales/fr/constants/services/frontend/desktop.json
@@ -0,0 +1,80 @@
+{
+  "name": "Logiciels de bureau",
+  "description": "Développement d'applications desktop multiplateforme",
+  "hero": {
+    "title": "Applications desktop multiplateformes",
+    "description": "Développez des applications de bureau modernes et performantes pour Windows, macOS et Linux. Notre expertise vous garantit des applications professionnelles qui tirent parti de toute la puissance du desktop."
+  },
+  "features": {
+    "electron-react": {
+      "title": "Electron & React",
+      "description": "Technologies modernes pour des applications desktop performantes et évolutives."
+    },
+    "multiplatform": {
+      "title": "Multiplateforme",
+      "description": "Applications compatibles Windows, macOS et Linux à partir d'une base de code unique."
+    },
+    "native-performance": {
+      "title": "Performance native",
+      "description": "Optimisation pour tirer parti des ressources système de manière efficace."
+    },
+    "system-integration": {
+      "title": "Intégration système",
+      "description": "Accès aux fonctionnalités natives du système d'exploitation."
+    }
+  },
+  "benefits": {
+    "windows-macos": {
+      "title": "Windows & macOS",
+      "description": "Support natif des principales plateformes desktop."
+    },
+    "system-access": {
+      "title": "Accès système",
+      "description": "Interaction directe avec le système d'exploitation."
+    },
+    "offline-mode": {
+      "title": "Mode hors ligne",
+      "description": "Fonctionnement autonome sans connexion internet requise."
+    },
+    "local-data": {
+      "title": "Données locales",
+      "description": "Stockage et traitement des données en local pour plus de sécurité."
+    }
+  },
+  "faq": {
+    "why-electron": {
+      "question": "Pourquoi choisir Electron pour le développement desktop ?",
+      "answer": "Electron permet de créer des applications desktop multiplateformes avec des technologies web modernes (React, TypeScript). Cela offre un développement rapide, une maintenance simplifiée et une excellente expérience utilisateur, tout en garantissant la compatibilité avec Windows, macOS et Linux."
+    },
+    "security": {
+      "question": "Comment gérez-vous la sécurité des applications desktop ?",
+      "answer": "Nous implémentons plusieurs niveaux de sécurité : chiffrement des données sensibles, protection contre les injections de code, mises à jour de sécurité automatiques, et bonnes pratiques de développement sécurisé. Nous suivons également les recommandations de sécurité spécifiques à chaque système d'exploitation."
+    },
+    "auto-update": {
+      "question": "Proposez-vous un système de mise à jour automatique ?",
+      "answer": "Oui, nous intégrons un système de mise à jour automatique qui permet de déployer facilement les nouvelles versions de l'application. Les utilisateurs sont notifiés des mises à jour disponibles et peuvent les installer en un clic."
+    },
+    "distribution": {
+      "question": "Comment gérez-vous la distribution des applications ?",
+      "answer": "Nous gérons tout le processus de distribution : création des installateurs pour chaque plateforme, signature des applications, publication sur les stores si nécessaire (Microsoft Store, Mac App Store), et mise en place d'un système de mise à jour automatique."
+    },
+    "post-launch-support": {
+      "question": "Proposez-vous un support après le lancement ?",
+      "answer": "Oui, nous proposons plusieurs formules de maintenance incluant : support technique, correction de bugs, mises à jour de sécurité, optimisations de performance et évolutions fonctionnelles."
+    }
+  },
+  "complementary": {
+    "telemetry": {
+      "title": "Télémétrie",
+      "description": "Suivi des performances et du comportement utilisateur."
+    },
+    "distribution": {
+      "title": "Distribution",
+      "description": "Publication sur les stores et gestion des mises à jour."
+    },
+    "cloud-sync": {
+      "title": "Cloud sync",
+      "description": "Synchronisation des données avec le cloud."
+    }
+  }
+}
diff --git a/apps/web/src/locales/fr/constants/services/frontend/mobile.json b/apps/web/src/locales/fr/constants/services/frontend/mobile.json
new file mode 100644
index 000000000..d3a90879c
--- /dev/null
+++ b/apps/web/src/locales/fr/constants/services/frontend/mobile.json
@@ -0,0 +1,80 @@
+{
+  "name": "Applications mobiles",
+  "description": "Création d'applications mobiles natives avec React Native",
+  "hero": {
+    "title": "Développement mobile React Native",
+    "description": "Créez des applications mobiles natives performantes pour iOS et Android avec React Native. Notre expertise vous garantit des applications robustes et une expérience utilisateur exceptionnelle."
+  },
+  "features": {
+    "react-native-expo": {
+      "title": "React Native & Expo",
+      "description": "Développement cross-platform efficace pour iOS et Android avec une base de code unique."
+    },
+    "native-design": {
+      "title": "Design natif",
+      "description": "Interfaces respectant les guidelines de design iOS et Android pour une expérience familière."
+    },
+    "native-performance": {
+      "title": "Performance native",
+      "description": "Optimisation poussée pour des performances proches du natif sur chaque plateforme."
+    },
+    "mobile-ui-ux": {
+      "title": "UI/UX mobile",
+      "description": "Interfaces mobiles intuitives suivant les meilleures pratiques de chaque plateforme."
+    }
+  },
+  "benefits": {
+    "multi-platform": {
+      "title": "Multi-plateformes",
+      "description": "Applications fonctionnant sur iOS et Android à partir d'une base de code unique."
+    },
+    "tablet-support": {
+      "title": "Support tablettes",
+      "description": "Interfaces adaptées aux différentes tailles d'écrans et orientations."
+    },
+    "optimal-performance": {
+      "title": "Performance optimale",
+      "description": "Optimisation native pour des performances et une fluidité maximales."
+    },
+    "native-experience": {
+      "title": "Expérience native",
+      "description": "Utilisation des fonctionnalités natives des appareils (caméra, GPS, notifications...)."
+    }
+  },
+  "faq": {
+    "why-react-native": {
+      "question": "Pourquoi choisir React Native pour le développement mobile ?",
+      "answer": "React Native permet de développer des applications performantes pour iOS et Android à partir d'une base de code unique, réduisant les coûts et le temps de développement tout en maintenant une qualité native. Il bénéficie également d'un large écosystème et du support de Meta (Facebook)."
+    },
+    "performance": {
+      "question": "Comment assurez-vous la performance des applications ?",
+      "answer": "Nous optimisons chaque aspect de l'application : temps de démarrage, consommation mémoire, animations fluides, chargement des données... Nous utilisons également des outils de profilage pour identifier et résoudre les problèmes de performance."
+    },
+    "store-publishing": {
+      "question": "Gérez-vous la publication sur les stores ?",
+      "answer": "Oui, nous prenons en charge tout le processus de publication : préparation des assets, configuration des comptes développeur, soumission aux stores (App Store et Play Store) et suivi des mises à jour."
+    },
+    "updates": {
+      "question": "Comment gérez-vous les mises à jour des applications ?",
+      "answer": "Nous mettons en place des systèmes de mise à jour OTA (Over The Air) quand c'est possible, et nous gérons les mises à jour via les stores avec un processus optimisé pour minimiser les temps de validation."
+    },
+    "post-launch-support": {
+      "question": "Proposez-vous un support après le lancement ?",
+      "answer": "Oui, nous proposons différentes formules de maintenance incluant : monitoring des performances, corrections de bugs, mises à jour de sécurité et évolutions fonctionnelles."
+    }
+  },
+  "complementary": {
+    "store-publishing": {
+      "title": "Publication store",
+      "description": "Gestion complète de la publication sur l'App Store et le Play Store."
+    },
+    "backend-integration": {
+      "title": "Intégration backend",
+      "description": "Connection avec vos systèmes et APIs existants."
+    },
+    "react-native-training": {
+      "title": "Formation React Native",
+      "description": "Formation de vos équipes au développement React Native."
+    }
+  }
+}
diff --git a/apps/web/src/locales/fr/constants/services/frontend/pwa.json b/apps/web/src/locales/fr/constants/services/frontend/pwa.json
new file mode 100644
index 000000000..deb15ef68
--- /dev/null
+++ b/apps/web/src/locales/fr/constants/services/frontend/pwa.json
@@ -0,0 +1,80 @@
+{
+  "name": "Progressive web apps",
+  "description": "Création d'applications web progressives performantes",
+  "hero": {
+    "title": "Progressive web apps (PWA)",
+    "description": "Transformez votre site web en véritable application installable avec les Progressive Web Apps. Offrez une expérience utilisateur exceptionnelle, en ligne comme hors ligne."
+  },
+  "features": {
+    "native-installation": {
+      "title": "Installation native",
+      "description": "Applications installables directement depuis le navigateur, sans passer par les stores."
+    },
+    "offline-mode": {
+      "title": "Mode hors ligne",
+      "description": "Fonctionnement même sans connexion internet grâce au cache intelligent."
+    },
+    "optimal-performance": {
+      "title": "Performance optimale",
+      "description": "Chargement rapide et expérience fluide sur tous les appareils."
+    },
+    "push-notifications": {
+      "title": "Notifications push",
+      "description": "Engagement utilisateur amélioré grâce aux notifications push."
+    }
+  },
+  "benefits": {
+    "multi-platform": {
+      "title": "Multi-plateformes",
+      "description": "Une seule application pour tous les appareils et systèmes d'exploitation."
+    },
+    "always-updated": {
+      "title": "Toujours à jour",
+      "description": "Mises à jour automatiques sans action utilisateur nécessaire."
+    },
+    "lightweight": {
+      "title": "Légèreté",
+      "description": "Pas d'installation lourde, accessible instantanément."
+    },
+    "native-performance": {
+      "title": "Performances natives",
+      "description": "Expérience utilisateur proche des applications natives."
+    }
+  },
+  "faq": {
+    "what-is-pwa": {
+      "question": "Qu'est-ce qu'une Progressive Web App ?",
+      "answer": "Une PWA est une application web qui offre une expérience similaire à une application native : elle est installable, fonctionne hors ligne, et peut envoyer des notifications push. Elle combine les avantages du web (accessibilité, mise à jour automatique) et du natif (performance, fonctionnalités avancées)."
+    },
+    "vs-native": {
+      "question": "Quels sont les avantages par rapport à une application native ?",
+      "answer": "Les PWA offrent plusieurs avantages : pas besoin de passer par les stores, mise à jour automatique, développement plus rapide et moins coûteux, meilleur référencement, et une base de code unique pour toutes les plateformes."
+    },
+    "offline": {
+      "question": "Comment fonctionne le mode hors ligne ?",
+      "answer": "Nous utilisons des Service Workers pour mettre en cache les ressources essentielles et les données. L'application peut ainsi fonctionner même sans connexion internet, avec une synchronisation automatique une fois la connexion rétablie."
+    },
+    "browser-compatibility": {
+      "question": "Les PWA sont-elles compatibles avec tous les navigateurs ?",
+      "answer": "Les PWA fonctionnent sur la majorité des navigateurs modernes. Pour les navigateurs plus anciens, nous mettons en place des solutions de fallback pour garantir une expérience utilisateur optimale."
+    },
+    "post-launch-support": {
+      "question": "Proposez-vous un support après le lancement ?",
+      "answer": "Oui, nous proposons plusieurs formules de maintenance incluant : mises à jour de sécurité, optimisations de performance, ajout de fonctionnalités et support technique."
+    }
+  },
+  "complementary": {
+    "advanced-analytics": {
+      "title": "Analytics avancés",
+      "description": "Suivi détaillé du comportement utilisateur et des performances."
+    },
+    "seo-optimized": {
+      "title": "SEO optimisé",
+      "description": "Optimisation pour les moteurs de recherche et partage social."
+    },
+    "enhanced-security": {
+      "title": "Sécurité renforcée",
+      "description": "Protection des données et communications sécurisées."
+    }
+  }
+}
diff --git a/apps/web/src/locales/fr/constants/services/frontend/web.json b/apps/web/src/locales/fr/constants/services/frontend/web.json
new file mode 100644
index 000000000..1bb522c3c
--- /dev/null
+++ b/apps/web/src/locales/fr/constants/services/frontend/web.json
@@ -0,0 +1,80 @@
+{
+  "name": "Applications web",
+  "description": "Développement d'applications web modernes avec React et Next.js",
+  "hero": {
+    "title": "Développement web frontend",
+    "description": "Créez des applications web modernes, réactives et performantes avec les dernières technologies frontend. Notre expertise vous garantit une expérience utilisateur exceptionnelle."
+  },
+  "features": {
+    "react-nextjs": {
+      "title": "React & Next.js",
+      "description": "Développement avec les frameworks modernes pour des applications performantes et évolutives."
+    },
+    "responsive-design": {
+      "title": "Design responsive",
+      "description": "Interfaces adaptatives pour une expérience optimale sur tous les appareils."
+    },
+    "web-performance": {
+      "title": "Performance web",
+      "description": "Optimisation poussée pour des temps de chargement rapides et une expérience fluide."
+    },
+    "modern-ui-ux": {
+      "title": "UI/UX moderne",
+      "description": "Interfaces utilisateur élégantes et intuitives suivant les dernières tendances."
+    }
+  },
+  "benefits": {
+    "reactive-apps": {
+      "title": "Applications réactives",
+      "description": "Interfaces dynamiques et réactives pour une expérience utilisateur fluide."
+    },
+    "mobile-first": {
+      "title": "Mobile first",
+      "description": "Conception pensée d'abord pour mobile puis adaptée aux grands écrans."
+    },
+    "optimal-performance": {
+      "title": "Performance optimale",
+      "description": "Optimisation avancée pour des temps de chargement minimaux."
+    },
+    "seo-optimized": {
+      "title": "SEO optimisé",
+      "description": "Structure optimisée pour un excellent référencement naturel."
+    }
+  },
+  "faq": {
+    "technologies": {
+      "question": "Quelles technologies utilisez-vous pour le développement frontend ?",
+      "answer": "Nous utilisons principalement React avec Next.js, ainsi que TypeScript pour un code plus robuste. Nous intégrons également des outils modernes comme Tailwind CSS pour le styling, et diverses bibliothèques pour les animations et les interactions."
+    },
+    "performance": {
+      "question": "Comment gérez-vous la performance des applications web ?",
+      "answer": "Nous appliquons les meilleures pratiques d'optimisation : code splitting, lazy loading, optimisation des images, mise en cache intelligente, et nous utilisons des outils de mesure de performance pour garantir des temps de chargement optimaux."
+    },
+    "seo": {
+      "question": "Proposez-vous des solutions pour le SEO ?",
+      "answer": "Oui, nous développons des applications avec le SEO en tête : rendu côté serveur (SSR), génération de pages statiques, meta-données dynamiques, structure sémantique et optimisation pour les moteurs de recherche."
+    },
+    "browser-compatibility": {
+      "question": "Comment assurez-vous la compatibilité avec différents navigateurs ?",
+      "answer": "Nous testons sur les principaux navigateurs et versions, utilisons des outils de transpilation modernes, et mettons en place des fallbacks appropriés pour garantir une expérience cohérente."
+    },
+    "maintenance": {
+      "question": "Proposez-vous la maintenance des applications développées ?",
+      "answer": "Oui, nous proposons différentes formules de maintenance incluant les mises à jour de sécurité, l'optimisation continue des performances, et l'évolution des fonctionnalités."
+    }
+  },
+  "complementary": {
+    "ui-ux-design": {
+      "title": "Design UI/UX",
+      "description": "Conception d'interfaces utilisateur modernes et ergonomiques."
+    },
+    "api-integration": {
+      "title": "Intégration API",
+      "description": "Connection avec vos systèmes et services backend existants."
+    },
+    "internationalization": {
+      "title": "Internationalisation",
+      "description": "Adaptation de votre application pour un public international."
+    }
+  }
+}
diff --git a/apps/web/src/locales/fr/constants/services/integration.json b/apps/web/src/locales/fr/constants/services/integration.json
new file mode 100644
index 000000000..33782ff9e
--- /dev/null
+++ b/apps/web/src/locales/fr/constants/services/integration.json
@@ -0,0 +1,56 @@
+{
+  "name": "Intégration",
+  "description": "Intégration sur les principales plateformes e-commerce et CMS",
+  "benefits": {
+    "clean-maintainable-code": {
+      "title": "Code propre et maintenable",
+      "description": "Intégration avec des standards de code élevés et une architecture pensée pour la maintenabilité à long terme."
+    },
+    "optimized-performance": {
+      "title": "Performance optimisée",
+      "description": "Sites web rapides et fluides grâce à des techniques d'optimisation avancées et au respect des bonnes pratiques."
+    },
+    "responsive-design": {
+      "title": "Responsive design",
+      "description": "Adaptation parfaite à tous les écrans et appareils pour une expérience utilisateur cohérente."
+    },
+    "smooth-animations": {
+      "title": "Animations fluides",
+      "description": "Intégration d'animations soignées pour enrichir l'expérience utilisateur tout en maintenant les performances."
+    }
+  },
+  "process": {
+    "mockup-analysis": {
+      "title": "Analyse des maquettes",
+      "description": "Étude approfondie des maquettes pour identifier les composants, les interactions et les points d'attention techniques."
+    },
+    "technical-architecture": {
+      "title": "Architecture technique",
+      "description": "Définition de l'architecture frontend et choix des technologies adaptées au projet."
+    },
+    "component-development": {
+      "title": "Développement des composants",
+      "description": "Création des composants réutilisables en suivant les principes du design system."
+    },
+    "responsive-integration": {
+      "title": "Intégration responsive",
+      "description": "Adaptation du design pour tous les formats d'écran avec une attention particulière à l'expérience mobile."
+    },
+    "optimization": {
+      "title": "Optimisation",
+      "description": "Optimisation des performances, de l'accessibilité et du référencement technique."
+    },
+    "testing-validation": {
+      "title": "Tests et validation",
+      "description": "Tests approfondis sur différents navigateurs et appareils pour garantir une expérience utilisateur optimale."
+    }
+  },
+  "process-services": {
+    "mockup-analysis": ["Analyse technique", "Architecture"],
+    "technical-architecture": ["Architecture", "Conseil technique"],
+    "component-development": ["Développement Frontend", "Intégration"],
+    "responsive-integration": ["Intégration", "Responsive Design"],
+    "optimization": ["Performance", "SEO technique"],
+    "testing-validation": ["Tests", "Quality Assurance"]
+  }
+}
diff --git a/apps/web/src/locales/fr/constants/services/integration/prestashop.json b/apps/web/src/locales/fr/constants/services/integration/prestashop.json
new file mode 100644
index 000000000..36c9f10a8
--- /dev/null
+++ b/apps/web/src/locales/fr/constants/services/integration/prestashop.json
@@ -0,0 +1,80 @@
+{
+  "name": "PrestaShop",
+  "description": "Développement de boutiques PrestaShop",
+  "hero": {
+    "title": "Développement e-commerce avec PrestaShop",
+    "description": "Lancez une boutique en ligne professionnelle avec PrestaShop. Notre expertise vous garantit une solution e-commerce puissante, évolutive et parfaitement adaptée à vos besoins."
+  },
+  "features": {
+    "custom-design": {
+      "title": "Design personnalisé",
+      "description": "Création de thèmes sur mesure qui reflètent votre marque et optimisent la conversion."
+    },
+    "advanced-management": {
+      "title": "Gestion avancée",
+      "description": "Interface d'administration puissante pour gérer vos produits, commandes et clients."
+    },
+    "optimized-performance": {
+      "title": "Performance optimisée",
+      "description": "Optimisation poussée pour des temps de chargement rapides et une expérience fluide."
+    },
+    "enhanced-security": {
+      "title": "Sécurité renforcée",
+      "description": "Protection avancée de votre boutique et des données de vos clients."
+    }
+  },
+  "benefits": {
+    "complete-management": {
+      "title": "Gestion complète",
+      "description": "Contrôle total sur vos produits, stocks, commandes et relations clients."
+    },
+    "multi-store": {
+      "title": "Multi-boutiques",
+      "description": "Gestion de plusieurs boutiques depuis une seule interface d'administration."
+    },
+    "integrated-logistics": {
+      "title": "Logistique intégrée",
+      "description": "Gestion avancée des transporteurs et des frais de livraison."
+    },
+    "detailed-analytics": {
+      "title": "Analyses détaillées",
+      "description": "Statistiques complètes pour suivre et optimiser vos performances."
+    }
+  },
+  "faq": {
+    "creation-timeline": {
+      "question": "Combien de temps faut-il pour créer une boutique PrestaShop ?",
+      "answer": "Le délai moyen pour créer une boutique PrestaShop varie de 6 à 12 semaines, selon la complexité du projet. Ce délai comprend la personnalisation du thème, le développement des fonctionnalités sur mesure, l'intégration des produits et les tests."
+    },
+    "migration": {
+      "question": "Pouvez-vous migrer ma boutique existante vers PrestaShop ?",
+      "answer": "Oui, nous proposons un service complet de migration vers PrestaShop, incluant le transfert des produits, clients, commandes et historiques, tout en préservant votre référencement."
+    },
+    "large-catalogs": {
+      "question": "PrestaShop est-il adapté aux grands catalogues de produits ?",
+      "answer": "Absolument ! PrestaShop est conçu pour gérer efficacement des catalogues de plusieurs milliers de produits avec des variations, tout en maintenant d'excellentes performances."
+    },
+    "custom-development": {
+      "question": "Proposez-vous des développements sur mesure ?",
+      "answer": "Oui, nous développons des modules et fonctionnalités sur mesure pour adapter PrestaShop à vos besoins spécifiques : intégrations ERP, processus métier personnalisés, etc."
+    },
+    "maintenance-updates": {
+      "question": "Comment gérez-vous la maintenance et les mises à jour ?",
+      "answer": "Nous proposons différentes formules de maintenance incluant les mises à jour de sécurité, les sauvegardes, l'optimisation des performances et le support technique."
+    }
+  },
+  "complementary": {
+    "custom-modules": {
+      "title": "Modules sur mesure",
+      "description": "Développement de fonctionnalités spécifiques pour votre activité."
+    },
+    "digital-marketing": {
+      "title": "Marketing digital",
+      "description": "Stratégies marketing pour augmenter votre visibilité et vos ventes."
+    },
+    "prestashop-training": {
+      "title": "Formation PrestaShop",
+      "description": "Formation personnalisée pour maîtriser la gestion de votre boutique."
+    }
+  }
+}
diff --git a/apps/web/src/locales/fr/constants/services/integration/shopify.json b/apps/web/src/locales/fr/constants/services/integration/shopify.json
new file mode 100644
index 000000000..94edd34f0
--- /dev/null
+++ b/apps/web/src/locales/fr/constants/services/integration/shopify.json
@@ -0,0 +1,80 @@
+{
+  "name": "Shopify",
+  "description": "Création et personnalisation de boutiques en ligne Shopify",
+  "hero": {
+    "title": "Créez votre boutique en ligne avec Shopify",
+    "description": "Transformez votre vision e-commerce en réalité avec notre expertise Shopify. Nous créons des boutiques en ligne performantes, esthétiques et optimisées pour la conversion."
+  },
+  "features": {
+    "custom-design": {
+      "title": "Design personnalisé",
+      "description": "Création d'un thème unique qui reflète votre marque et optimise l'expérience utilisateur."
+    },
+    "conversion-optimization": {
+      "title": "Optimisation des conversions",
+      "description": "Mise en place des meilleures pratiques pour maximiser vos ventes et fidéliser vos clients."
+    },
+    "enhanced-security": {
+      "title": "Sécurité renforcée",
+      "description": "Protection de vos données et de celles de vos clients avec les dernières normes de sécurité."
+    },
+    "advanced-integrations": {
+      "title": "Intégrations avancées",
+      "description": "Connection avec vos outils préférés pour la gestion des stocks, la comptabilité et le marketing."
+    }
+  },
+  "benefits": {
+    "secure-payments": {
+      "title": "Paiements sécurisés",
+      "description": "Intégration des principaux moyens de paiement et gestion sécurisée des transactions."
+    },
+    "international-by-default": {
+      "title": "International par défaut",
+      "description": "Vente dans le monde entier avec gestion multi-devises et traductions automatiques."
+    },
+    "powerful-analytics": {
+      "title": "Analytics puissant",
+      "description": "Suivi détaillé de vos performances et insights pour optimiser vos ventes."
+    },
+    "simplified-logistics": {
+      "title": "Logistique simplifiée",
+      "description": "Gestion efficace des commandes et intégration avec les principaux transporteurs."
+    }
+  },
+  "faq": {
+    "creation-timeline": {
+      "question": "Combien de temps faut-il pour créer une boutique Shopify ?",
+      "answer": "Le délai moyen pour créer une boutique Shopify varie de 4 à 8 semaines, selon la complexité du projet. Ce délai comprend la phase de design, le développement, l'intégration des produits et les tests."
+    },
+    "migration": {
+      "question": "Pouvez-vous migrer ma boutique existante vers Shopify ?",
+      "answer": "Oui, nous proposons un service complet de migration de votre boutique existante vers Shopify, incluant le transfert des produits, des clients et des commandes, tout en assurant une transition en douceur."
+    },
+    "customization-types": {
+      "question": "Quels types de personnalisation proposez-vous ?",
+      "answer": "Nous offrons une personnalisation complète de votre boutique Shopify : design sur mesure, fonctionnalités personnalisées, intégrations spécifiques, et optimisation pour mobile."
+    },
+    "post-launch-support": {
+      "question": "Proposez-vous un support après le lancement ?",
+      "answer": "Oui, nous proposons plusieurs formules de support et maintenance pour assurer le bon fonctionnement de votre boutique après son lancement, incluant les mises à jour, les optimisations et le support technique."
+    },
+    "security": {
+      "question": "Comment assurez-vous la sécurité de ma boutique ?",
+      "answer": "Nous mettons en place les meilleures pratiques de sécurité : SSL, conformité PCI DSS, sauvegardes régulières, et protection contre les fraudes. Shopify assure également une sécurité de niveau bancaire pour toutes les transactions."
+    }
+  },
+  "complementary": {
+    "seo": {
+      "title": "Référencement SEO",
+      "description": "Optimisation pour les moteurs de recherche pour augmenter votre visibilité."
+    },
+    "digital-marketing": {
+      "title": "Marketing digital",
+      "description": "Stratégies marketing adaptées pour attirer et convertir plus de clients."
+    },
+    "training": {
+      "title": "Formation",
+      "description": "Formation complète pour gérer votre boutique en toute autonomie."
+    }
+  }
+}
diff --git a/apps/web/src/locales/fr/constants/services/integration/squarespace.json b/apps/web/src/locales/fr/constants/services/integration/squarespace.json
new file mode 100644
index 000000000..126a424a7
--- /dev/null
+++ b/apps/web/src/locales/fr/constants/services/integration/squarespace.json
@@ -0,0 +1,80 @@
+{
+  "name": "SquareSpace",
+  "description": "Intégration et personnalisation sur SquareSpace",
+  "hero": {
+    "title": "Sites web élégants avec Squarespace",
+    "description": "Créez une présence en ligne raffinée avec Squarespace. Notre expertise vous garantit un site web esthétique, fonctionnel et parfaitement adapté à votre image de marque."
+  },
+  "features": {
+    "minimalist-design": {
+      "title": "Design minimaliste",
+      "description": "Création de sites élégants et épurés qui mettent en valeur votre contenu et votre marque."
+    },
+    "smooth-experience": {
+      "title": "Expérience fluide",
+      "description": "Navigation intuitive et performances optimisées pour une expérience utilisateur sans faille."
+    },
+    "content-management": {
+      "title": "Gestion de contenu",
+      "description": "Interface d'administration simple et intuitive pour gérer votre contenu facilement."
+    },
+    "media-integration": {
+      "title": "Intégration média",
+      "description": "Mise en valeur optimale de vos images et médias avec des galeries dynamiques."
+    }
+  },
+  "benefits": {
+    "professional-templates": {
+      "title": "Templates professionnels",
+      "description": "Large choix de templates modernes et personnalisables pour tous les secteurs."
+    },
+    "integrated-ecommerce": {
+      "title": "E-commerce intégré",
+      "description": "Solutions de vente en ligne complètes et personnalisables."
+    },
+    "optimal-performance": {
+      "title": "Performance optimale",
+      "description": "Sites rapides et sécurisés hébergés sur une infrastructure robuste."
+    },
+    "integrated-marketing": {
+      "title": "Marketing intégré",
+      "description": "Outils marketing et analyses statistiques pour développer votre activité."
+    }
+  },
+  "faq": {
+    "creation-timeline": {
+      "question": "Combien de temps faut-il pour créer un site Squarespace ?",
+      "answer": "Le délai moyen pour créer un site Squarespace varie de 2 à 6 semaines, selon la complexité du projet. Ce délai comprend la sélection et personnalisation du template, l'intégration du contenu et les tests."
+    },
+    "product-sales": {
+      "question": "Puis-je vendre des produits sur mon site Squarespace ?",
+      "answer": "Oui, Squarespace propose une solution e-commerce complète que nous pouvons configurer pour vous permettre de vendre vos produits en ligne, avec gestion des stocks, paiements sécurisés et options d'expédition."
+    },
+    "content-updates": {
+      "question": "Est-il facile de mettre à jour le contenu ?",
+      "answer": "Absolument ! L'interface de Squarespace est très intuitive. Nous vous formons à son utilisation pour que vous puissiez gérer votre contenu en toute autonomie."
+    },
+    "seo-optimization": {
+      "question": "Mon site sera-t-il optimisé pour le référencement ?",
+      "answer": "Oui, nous mettons en place les meilleures pratiques SEO de Squarespace et configurons tous les éléments nécessaires pour optimiser votre visibilité sur les moteurs de recherche."
+    },
+    "maintenance-service": {
+      "question": "Proposez-vous un service de maintenance ?",
+      "answer": "Oui, nous proposons différentes formules de maintenance incluant les mises à jour, le support technique et l'optimisation continue de votre site Squarespace."
+    }
+  },
+  "complementary": {
+    "advanced-customization": {
+      "title": "Personnalisation avancée",
+      "description": "Modifications CSS et Javascript pour personnaliser votre site au-delà des options standard."
+    },
+    "content-strategy": {
+      "title": "Stratégie de contenu",
+      "description": "Accompagnement dans la création et l'optimisation de votre contenu."
+    },
+    "user-training": {
+      "title": "Formation utilisateur",
+      "description": "Formation complète pour maîtriser la gestion de votre site Squarespace."
+    }
+  }
+}
diff --git a/apps/web/src/locales/fr/constants/services/integration/strapi.json b/apps/web/src/locales/fr/constants/services/integration/strapi.json
new file mode 100644
index 000000000..3366e69fb
--- /dev/null
+++ b/apps/web/src/locales/fr/constants/services/integration/strapi.json
@@ -0,0 +1,80 @@
+{
+  "name": "Strapi",
+  "description": "Développement de CMS headless avec Strapi",
+  "hero": {
+    "title": "Développement CMS headless avec Strapi",
+    "description": "Développez des applications modernes avec Strapi. Notre expertise vous garantit une solution de gestion de contenu flexible, évolutive et parfaitement adaptée à vos besoins."
+  },
+  "features": {
+    "custom-api": {
+      "title": "API sur mesure",
+      "description": "Création d'APIs RESTful et GraphQL personnalisées pour tous vos besoins."
+    },
+    "flexible-administration": {
+      "title": "Administration flexible",
+      "description": "Interface d'administration personnalisable selon vos processus métier."
+    },
+    "optimal-performance": {
+      "title": "Performance optimale",
+      "description": "Architecture performante pour des temps de réponse rapides."
+    },
+    "advanced-security": {
+      "title": "Sécurité avancée",
+      "description": "Protection robuste de vos données et de vos APIs."
+    }
+  },
+  "benefits": {
+    "100-javascript": {
+      "title": "100% JavaScript",
+      "description": "Développement unifié en JavaScript/Node.js pour plus d'efficacité."
+    },
+    "flexible-models": {
+      "title": "Modèles flexibles",
+      "description": "Création de modèles de contenu personnalisés sans contraintes."
+    },
+    "role-management": {
+      "title": "Gestion des rôles",
+      "description": "Contrôle précis des accès et des permissions utilisateurs."
+    },
+    "advanced-workflows": {
+      "title": "Workflows avancés",
+      "description": "Automatisation des processus de publication et de validation."
+    }
+  },
+  "faq": {
+    "setup-timeline": {
+      "question": "Combien de temps faut-il pour mettre en place un projet Strapi ?",
+      "answer": "Le délai moyen pour mettre en place un projet Strapi varie de 4 à 12 semaines, selon la complexité. Ce délai comprend la conception des modèles de contenu, le développement des APIs, la personnalisation de l'administration et les tests."
+    },
+    "multilingual": {
+      "question": "Strapi peut-il gérer des contenus multilingues ?",
+      "answer": "Oui, Strapi gère nativement le contenu multilingue. Nous pouvons configurer et personnaliser la gestion des traductions selon vos besoins spécifiques."
+    },
+    "content-migration": {
+      "question": "Est-il possible de migrer notre contenu existant vers Strapi ?",
+      "answer": "Oui, nous proposons un service complet de migration de contenu vers Strapi, incluant l'analyse de vos données existantes, la création de modèles adaptés et l'import de vos contenus."
+    },
+    "deployment-hosting": {
+      "question": "Comment gérez-vous le déploiement et l'hébergement ?",
+      "answer": "Nous pouvons déployer Strapi sur différentes plateformes cloud (AWS, Google Cloud, DigitalOcean...) et mettre en place une infrastructure scalable avec des environnements de développement, staging et production."
+    },
+    "custom-plugins": {
+      "question": "Proposez-vous des développements de plugins personnalisés ?",
+      "answer": "Oui, nous développons des plugins Strapi sur mesure pour étendre les fonctionnalités selon vos besoins : intégrations spécifiques, workflows personnalisés, interfaces d'administration dédiées, etc."
+    }
+  },
+  "complementary": {
+    "frontend-development": {
+      "title": "Développement frontend",
+      "description": "Création d'applications frontend connectées à votre API Strapi."
+    },
+    "integrations": {
+      "title": "Intégrations",
+      "description": "Connection avec vos outils et services tiers existants."
+    },
+    "strapi-training": {
+      "title": "Formation Strapi",
+      "description": "Formation personnalisée pour maîtriser la gestion de votre CMS."
+    }
+  }
+}
diff --git a/apps/web/src/locales/fr/constants/services/integration/webflow.json b/apps/web/src/locales/fr/constants/services/integration/webflow.json
new file mode 100644
index 000000000..dd1777eec
--- /dev/null
+++ b/apps/web/src/locales/fr/constants/services/integration/webflow.json
@@ -0,0 +1,80 @@
+{
+  "name": "Webflow",
+  "description": "Création de sites web modernes avec Webflow",
+  "hero": {
+    "title": "Développement Webflow professionnel",
+    "description": "Donnez vie à votre vision avec Webflow. Notre expertise vous garantit un site web moderne, interactif et parfaitement adapté à vos besoins, sans compromis sur la qualité."
+  },
+  "features": {
+    "advanced-visual-design": {
+      "title": "Design visuel avancé",
+      "description": "Création d'interfaces uniques et animations sophistiquées sans les limitations du codage traditionnel."
+    },
+    "optimal-performance": {
+      "title": "Performance optimale",
+      "description": "Sites rapides et réactifs optimisés pour tous les appareils et navigateurs."
+    },
+    "rich-interactions": {
+      "title": "Interactions riches",
+      "description": "Animations et interactions utilisateur fluides pour une expérience web moderne et engageante."
+    },
+    "integrated-cms": {
+      "title": "CMS intégré",
+      "description": "Système de gestion de contenu puissant et flexible pour une mise à jour facile."
+    }
+  },
+  "benefits": {
+    "visual-development": {
+      "title": "Développement visuel",
+      "description": "Création de sites complexes sans écrire de code, tout en gardant un contrôle total sur le design."
+    },
+    "native-seo": {
+      "title": "SEO natif",
+      "description": "Outils de référencement intégrés et structure optimisée pour les moteurs de recherche."
+    },
+    "responsive-by-default": {
+      "title": "Responsive par défaut",
+      "description": "Design parfaitement adapté à tous les écrans, des mobiles aux grands écrans."
+    },
+    "optimized-hosting": {
+      "title": "Hébergement optimisé",
+      "description": "Infrastructure cloud robuste avec CDN global pour des performances optimales."
+    }
+  },
+  "faq": {
+    "creation-timeline": {
+      "question": "Combien de temps faut-il pour créer un site Webflow ?",
+      "answer": "Le délai moyen pour créer un site Webflow varie de 3 à 8 semaines, selon la complexité du projet. Ce délai comprend la conception, le développement des interactions, l'intégration du contenu et les tests."
+    },
+    "self-update": {
+      "question": "Puis-je facilement mettre à jour mon site moi-même ?",
+      "answer": "Absolument ! Webflow dispose d'un CMS intuitif que nous personnalisons selon vos besoins. Nous vous formons à son utilisation pour que vous puissiez gérer votre contenu en toute autonomie."
+    },
+    "ecommerce": {
+      "question": "Webflow est-il adapté aux sites e-commerce ?",
+      "answer": "Oui, Webflow propose une solution e-commerce robuste que nous pouvons personnaliser pour créer votre boutique en ligne avec des fonctionnalités avancées et un design sur mesure."
+    },
+    "animations-interactions": {
+      "question": "Comment gérez-vous les animations et interactions ?",
+      "answer": "Webflow permet de créer des animations et interactions sophistiquées sans code. Nous concevons des expériences interactives fluides et professionnelles tout en maintenant des performances optimales."
+    },
+    "seo-quality": {
+      "question": "Quelle est la qualité du référencement avec Webflow ?",
+      "answer": "Webflow génère un code propre et optimisé pour le SEO. Nous mettons en place les meilleures pratiques de référencement pour maximiser votre visibilité sur les moteurs de recherche."
+    }
+  },
+  "complementary": {
+    "custom-integrations": {
+      "title": "Intégrations personnalisées",
+      "description": "Connection avec vos outils et services tiers préférés."
+    },
+    "digital-strategy": {
+      "title": "Stratégie digitale",
+      "description": "Accompagnement dans votre stratégie de présence en ligne."
+    },
+    "webflow-training": {
+      "title": "Formation Webflow",
+      "description": "Formation sur mesure pour maîtriser la gestion de votre site."
+    }
+  }
+}
diff --git a/apps/web/src/locales/fr/constants/services/integration/wordpress.json b/apps/web/src/locales/fr/constants/services/integration/wordpress.json
new file mode 100644
index 000000000..f9eae6842
--- /dev/null
+++ b/apps/web/src/locales/fr/constants/services/integration/wordpress.json
@@ -0,0 +1,80 @@
+{
+  "name": "WordPress",
+  "description": "Développement de sites WordPress sur mesure",
+  "hero": {
+    "title": "Développement WordPress sur mesure",
+    "description": "Créez un site web professionnel qui vous ressemble avec WordPress. Notre expertise vous garantit un site performant, sécurisé et parfaitement adapté à vos besoins."
+  },
+  "features": {
+    "custom-themes": {
+      "title": "Thèmes sur mesure",
+      "description": "Création de thèmes personnalisés qui reflètent votre identité et répondent précisément à vos besoins."
+    },
+    "optimized-performance": {
+      "title": "Performance optimisée",
+      "description": "Optimisation poussée pour garantir des temps de chargement rapides et une expérience utilisateur fluide."
+    },
+    "enhanced-security": {
+      "title": "Sécurité renforcée",
+      "description": "Mise en place des meilleures pratiques de sécurité pour protéger votre site et vos données."
+    },
+    "simplified-administration": {
+      "title": "Administration simplifiée",
+      "description": "Interface d'administration personnalisée et intuitive pour une gestion facile de votre contenu."
+    }
+  },
+  "benefits": {
+    "intuitive-administration": {
+      "title": "Administration intuitive",
+      "description": "Interface de gestion simple et intuitive pour gérer votre contenu en toute autonomie."
+    },
+    "seo-optimized": {
+      "title": "SEO optimisé",
+      "description": "Structure optimisée pour le référencement naturel et outils SEO intégrés."
+    },
+    "powerful-extensions": {
+      "title": "Extensions puissantes",
+      "description": "Accès à des milliers de plugins pour étendre les fonctionnalités de votre site."
+    },
+    "maximum-performance": {
+      "title": "Performance maximale",
+      "description": "Optimisation avancée des performances pour une expérience utilisateur optimale."
+    }
+  },
+  "faq": {
+    "creation-timeline": {
+      "question": "Combien de temps faut-il pour créer un site WordPress ?",
+      "answer": "Le délai moyen pour créer un site WordPress varie de 4 à 12 semaines, selon la complexité du projet. Ce délai comprend la phase de design, le développement du thème sur mesure, l'intégration du contenu et les tests."
+    },
+    "migration": {
+      "question": "Pouvez-vous migrer mon site existant vers WordPress ?",
+      "answer": "Oui, nous proposons un service complet de migration vers WordPress, incluant le transfert du contenu, des images et des fonctionnalités, tout en préservant votre référencement."
+    },
+    "maintenance-updates": {
+      "question": "Comment gérez-vous la maintenance et les mises à jour ?",
+      "answer": "Nous proposons différentes formules de maintenance incluant les mises à jour de sécurité, les sauvegardes régulières, les mises à jour de WordPress et des plugins, ainsi que le monitoring des performances."
+    },
+    "mobile-optimization": {
+      "question": "Mon site sera-t-il optimisé pour les mobiles ?",
+      "answer": "Absolument. Tous nos développements WordPress sont responsive par défaut, garantissant une expérience optimale sur tous les appareils : ordinateurs, tablettes et smartphones."
+    },
+    "security-approach": {
+      "question": "Quelle est votre approche en matière de sécurité ?",
+      "answer": "Nous mettons en place une stratégie de sécurité complète : authentification forte, pare-feu applicatif, monitoring des tentatives d'intrusion, sauvegardes automatisées et mises à jour de sécurité régulières."
+    }
+  },
+  "complementary": {
+    "custom-development": {
+      "title": "Développement sur mesure",
+      "description": "Création de fonctionnalités spécifiques pour répondre à vos besoins particuliers."
+    },
+    "digital-marketing": {
+      "title": "Marketing digital",
+      "description": "Stratégies marketing adaptées pour augmenter votre visibilité en ligne."
+    },
+    "wordpress-training": {
+      "title": "Formation WordPress",
+      "description": "Formation personnalisée pour maîtriser la gestion de votre site."
+    }
+  }
+}
diff --git a/apps/web/src/proxy.ts b/apps/web/src/proxy.ts
index bf701fee8..63a30e35d 100644
--- a/apps/web/src/proxy.ts
+++ b/apps/web/src/proxy.ts
@@ -10,6 +10,8 @@ export function proxy(request: NextRequest) {
     (locale) => pathname.startsWith(`/${locale}/`) || pathname === `/${locale}`,
   );
 
+  const isSecure = request.url.startsWith("https://");
+
   // If URL has the default locale prefix, redirect to remove it and set cookie
   if (pathnameLocale === defaultLocale) {
     const newPathname = pathname.slice(`/${defaultLocale}`.length) || "/";
@@ -17,8 +19,7 @@ export function proxy(request: NextRequest) {
     response.cookies.set(LOCALE_COOKIE, defaultLocale, {
       path: "/",
       maxAge: 60 * 60 * 24 * 365, // 1 year
-      httpOnly: true,
-      secure: true,
+      secure: isSecure,
       sameSite: "lax",
     });
     return response;
@@ -35,8 +36,7 @@ export function proxy(request: NextRequest) {
     response.cookies.set(LOCALE_COOKIE, pathnameLocale, {
       path: "/",
       maxAge: 60 * 60 * 24 * 365, // 1 year
-      httpOnly: true,
-      secure: true,
+      secure: isSecure,
       sameSite: "lax",
     });
     return response;
diff --git a/apps/web/src/screens/marketing/services/index.tsx b/apps/web/src/screens/marketing/services/index.tsx
index 08ee3db3d..40d4748e3 100644
--- a/apps/web/src/screens/marketing/services/index.tsx
+++ b/apps/web/src/screens/marketing/services/index.tsx
@@ -1,85 +1,99 @@
+"use client";
+
 import React from 'react';
 import { Button } from "@/components/ui/button";
 import DotPattern from "@/components/ui/dot-pattern";
 import { cn } from "@/lib/utils";
-import { ArrowRight, LucideIcon } from "lucide-react";
+import { ArrowRight } from "lucide-react";
 import { Link } from "@onruntime/translations/next";
+import { useTranslation } from "@onruntime/translations/react";
 import Routes from "@/constants/routes";
-import Services from "@/constants/services";
 import ProjectTimeline from './timeline';
 import { ConsultingSection, ExpertiseSection, TechnologiesSection, ValuePropositionSection } from '@/components/marketing/services/sections';
+import { ServiceCategoryData, SubService } from '@/types/service';
 
-const ServiceCard = ({ 
-  name, 
-  description, 
-  icon: Icon,
-  subServices,
-  route
-}: { 
-  name: string;
-  description: string;
-  icon: LucideIcon;
-  subServices: Array<{
-    name: string;
-    description: string;
-    route: string;
-    icon?: LucideIcon;
-  }>;
-  route: string;
-}) => (
-  <div className="flex flex-col gap-6 w-full">
-    <div className="group relative overflow-hidden rounded-lg border bg-background p-6 hover:border-onruntime-blue transition-colors">
-      <Link href={route} className="absolute inset-0" aria-label={name}/>
-      <div className="flex flex-col gap-4">
-        <div className="flex items-center gap-4">
-          <div className="p-2 rounded-md bg-onruntime-blue/10 text-onruntime-blue">
-            <Icon className="w-6 h-6" />
-          </div>
-          <h2 className="text-xl font-medium text-foreground">{name}</h2>
+const SubServiceCard: React.FC<{ categoryId: string; subService: SubService }> = ({
+  categoryId,
+  subService
+}) => {
+  const { t } = useTranslation(`constants/services/${categoryId}/${subService.id}`);
+
+  return (
+    <Link
+      href={subService.route}
+      className="group flex items-start gap-3 p-4 rounded-lg border bg-background hover:border-onruntime-blue transition-colors"
+    >
+      {subService.icon && (
+        <div className="p-2 rounded-md bg-muted text-muted-foreground group-hover:bg-onruntime-blue/10 group-hover:text-onruntime-blue transition-colors">
+          <subService.icon className="w-4 h-4" />
         </div>
-        <p className="text-muted-foreground">{description}</p>
+      )}
+      <div className="flex-1">
+        <h3 className="text-sm font-medium text-foreground">{t("name")}</h3>
+        <p className="text-xs text-muted-foreground mt-1">{t("description")}</p>
       </div>
-    </div>
-    
-    <div className="grid sm:grid-cols-2 gap-4 pl-4">
-      {subServices.map((subService, index) => (
-        <Link 
-          key={index}
-          href={subService.route}
-          className="group flex items-start gap-3 p-4 rounded-lg border bg-background hover:border-onruntime-blue transition-colors"
-        >
-          {subService.icon && (
-            <div className="p-2 rounded-md bg-muted text-muted-foreground group-hover:bg-onruntime-blue/10 group-hover:text-onruntime-blue transition-colors">
-              <subService.icon className="w-4 h-4" />
+    </Link>
+  );
+};
+
+const ServiceCategoryCard: React.FC<{ service: ServiceCategoryData }> = ({ service }) => {
+  const { t } = useTranslation(`constants/services/${service.id}`);
+
+  return (
+    <div className="flex flex-col gap-6 w-full">
+      <div className="group relative overflow-hidden rounded-lg border bg-background p-6 hover:border-onruntime-blue transition-colors">
+        <Link
+          href={Routes.service[service.id].root}
+          className="absolute inset-0"
+          aria-label={t("name")}
+        />
+        <div className="flex flex-col gap-4">
+          <div className="flex items-center gap-4">
+            <div className="p-2 rounded-md bg-onruntime-blue/10 text-onruntime-blue">
+              <service.icon className="w-6 h-6" />
             </div>
-          )}
-          <div className="flex-1">
-            <h3 className="text-sm font-medium text-foreground">{subService.name}</h3>
-            <p className="text-xs text-muted-foreground mt-1">{subService.description}</p>
+            <h2 className="text-xl font-medium text-foreground">{t("name")}</h2>
           </div>
-        </Link>
-      ))}
+          <p className="text-muted-foreground">{t("description")}</p>
+        </div>
+      </div>
+
+      <div className="grid sm:grid-cols-2 gap-4 pl-4">
+        {service.subServices.map((subService) => (
+          <SubServiceCard
+            key={subService.id}
+            categoryId={service.id}
+            subService={subService}
+          />
+        ))}
+      </div>
     </div>
-  </div>
-);
+  );
+};
+
+interface ServicesPageProps {
+  services: ServiceCategoryData[];
+}
+
+const ServicesPage: React.FC<ServicesPageProps> = ({ services }) => {
+  const { t } = useTranslation("app/services/page");
 
-const ServicesPage = () => {
   return (
     <main className="min-h-screen pt-32 pb-16 w-full">
       <div className="px-4 md:px-0 max-w-5xl mx-auto space-y-32 w-full">
-        
+
         <div className="relative max-w-2xl mx-auto flex flex-col items-center gap-6 text-center">
           <h1 className="font-medium text-4xl md:text-5xl text-foreground">
-            Des solutions sur mesure pour vos projets digitaux
+            {t("hero.title")}
           </h1>
-          
+
           <p className="text-muted-foreground">
-            De la conception à la réalisation, nous vous accompagnons à chaque étape de votre projet avec expertise et passion.
+            {t("hero.description")}
           </p>
 
           <Link href={Routes.contact}>
             <Button size="lg">
-              Démarrer un projet
+              {t("hero.cta")}
               <ArrowRight className="ml-2 w-5 h-5" />
             </Button>
           </Link>
@@ -97,15 +111,8 @@ const ServicesPage = () => {
         <ValuePropositionSection />
 
         <div className="flex flex-col gap-16 w-full">
-          {Services.map((service) => (
-            <ServiceCard 
-              key={service.id}
-              name={service.name}
-              description={service.description}
-              icon={service.icon}
-              subServices={service.subServices}
-              route={Routes.service[service.id].root}
-            />
+          {services.map((service) => (
+            <ServiceCategoryCard key={service.id} service={service} />
           ))}
         </div>
 
@@ -114,10 +121,10 @@ const ServicesPage = () => {
         <div className="w-full">
           <div className="text-center mb-8">
             <h2 className="text-3xl font-medium text-foreground mb-4">
-              Notre stack technologique
+              {t("technologies.title")}
             </h2>
             <p className="text-muted-foreground">
-              Nous maîtrisons un large éventail de technologies modernes pour répondre à tous vos besoins.
+              {t("technologies.description")}
             </p>
           </div>
           <TechnologiesSection />
@@ -126,13 +133,13 @@ const ServicesPage = () => {
         <div className="bg-card rounded-lg p-8 border w-full">
           <div className="max-w-xl mx-auto text-center mb-12">
             <h2 className="text-3xl font-medium text-foreground mb-4">
-              Notre processus de travail
+              {t("process.title")}
             </h2>
             <p className="text-muted-foreground">
-              Une méthodologie éprouvée et flexible pour mener votre projet vers le succès.
+              {t("process.description")}
             </p>
           </div>
-          
+
           <ProjectTimeline />
         </div>
 
@@ -142,4 +149,4 @@ const ServicesPage = () => {
   );
 };
 
-export default ServicesPage;
\ No newline at end of file
+export default ServicesPage;
diff --git a/apps/web/src/types/service.ts b/apps/web/src/types/service.ts
index 4aa1878a9..83d8578a7 100644
--- a/apps/web/src/types/service.ts
+++ b/apps/web/src/types/service.ts
@@ -8,7 +8,7 @@ export enum ServiceCategory {
 }
 
 export interface ServiceTestimonial {
-  content: string;
+  key: string;
   author: {
     name: string;
     role: string;
@@ -18,32 +18,26 @@ export interface ServiceTestimonial {
 }
 
 export interface ServiceFAQItem {
-  question: string;
-  answer: string;
+  key: string;
 }
 
 export interface ServiceFeature {
-  title: string;
-  description: string;
+  key: string;
   icon: LucideIcon;
 }
 
 export interface ServiceBenefit {
-  title: string;
-  description: string;
+  key: string;
   icon: LucideIcon;
 }
 
 export interface ServiceProcessStep {
-  title: string;
-  description: string;
-  services?: string[];
+  key: string;
+  serviceKeys?: string[];
 }
 
 export interface SubService {
   id: string;
-  name: string;
-  description: string;
   route: string;
   icon?: LucideIcon;
 
@@ -52,17 +46,13 @@ export interface SubService {
   testimonials?: ServiceTestimonial[];
   faqItems?: ServiceFAQItem[];
   complementaryServices?: ServiceFeature[];
-  heroTitle?: string;
-  heroDescription?: string;
 }
 
 export interface ServiceCategoryData {
   id: ServiceCategory;
-  name: string;
-  description: string;
   icon: LucideIcon;
   subServices: SubService[];
 
   benefits?: ServiceBenefit[];
   processList?: ServiceProcessStep[];
-}
\ No newline at end of file
+}
diff --git a/examples/translations/next-app/proxy.ts b/examples/translations/next-app/proxy.ts
index bf701fee8..63a30e35d 100644
--- a/examples/translations/next-app/proxy.ts
+++ b/examples/translations/next-app/proxy.ts
@@ -10,6 +10,8 @@ export function proxy(request: NextRequest) {
     (locale) => pathname.startsWith(`/${locale}/`) || pathname === `/${locale}`,
   );
 
+  const isSecure = request.url.startsWith("https://");
+
   // If URL has the default locale prefix, redirect to remove it and set cookie
   if (pathnameLocale === defaultLocale) {
     const newPathname = pathname.slice(`/${defaultLocale}`.length) || "/";
@@ -17,8 +19,7 @@ export function proxy(request: NextRequest) {
     response.cookies.set(LOCALE_COOKIE, defaultLocale, {
       path: "/",
       maxAge: 60 * 60 * 24 * 365, // 1 year
-      httpOnly: true,
-      secure: true,
+      secure: isSecure,
       sameSite: "lax",
     });
     return response;
@@ -35,8 +36,7 @@ export function proxy(request: NextRequest) {
     response.cookies.set(LOCALE_COOKIE, pathnameLocale, {
       path: "/",
       maxAge: 60 * 60 * 24 * 365, // 1 year
-      httpOnly: true,
-      secure: true,
+      secure: isSecure,
       sameSite: "lax",
     });
     return response;
diff --git a/packages/translations/README.md b/packages/translations/README.md
index 9ee939ce2..ad124b576 100644
--- a/packages/translations/README.md
+++ b/packages/translations/README.md
@@ -105,14 +105,15 @@ export function proxy(request: NextRequest) {
     (locale) => pathname.startsWith(`/${locale}/`) || pathname === `/${locale}`,
   );
 
+  const isSecure = request.url.startsWith("https://");
+
   if (pathnameLocale === defaultLocale) {
     const newPathname = pathname.slice(`/${defaultLocale}`.length) || "/";
     const response = NextResponse.redirect(new URL(newPathname, request.url));
     response.cookies.set(LOCALE_COOKIE, defaultLocale, {
       path: "/",
       maxAge: 60 * 60 * 24 * 365, // 1 year
-      httpOnly: true,
-      secure: true,
+      secure: isSecure,
       sameSite: "lax",
     });
     return response;
@@ -129,8 +130,7 @@ export function proxy(request: NextRequest) {
     response.cookies.set(LOCALE_COOKIE, pathnameLocale, {
       path: "/",
       maxAge: 60 * 60 * 24 * 365, // 1 year
-      httpOnly: true,
-      secure: true,
+      secure: isSecure,
       sameSite: "lax",
     });
     return response;
diff --git a/packages/translations/src/next/contexts/app-context.tsx b/packages/translations/src/next/contexts/app-context.tsx
index 78fae2a32..f4e1ffe25 100644
--- a/packages/translations/src/next/contexts/app-context.tsx
+++ b/packages/translations/src/next/contexts/app-context.tsx
@@ -39,7 +39,8 @@ export const AppTranslationProvider = ({
   const setLocale = useCallback(
     (newLocale: string) => {
       // Set cookie to remember user's choice
-      document.cookie = `NEXT_LOCALE=${newLocale};path=/;max-age=31536000`;
+      const isSecure = window.location.protocol === "https:";
+      document.cookie = `NEXT_LOCALE=${newLocale};path=/;max-age=31536000;SameSite=Lax${isSecure ? ";Secure" : ""}`;
 
       const segments = pathname.split("/");
       const hasLocalePrefix = locales.includes(segments[1]);

From cad9e83d5f089ffa1bde0c30609161dec7502d9f Mon Sep 17 00:00:00 2001
From: Antoine Kingue <etorefr@gmail.com>
Date: Tue, 30 Dec 2025 20:47:33 +0100
Subject: [PATCH 58/64] =?UTF-8?q?=F0=9F=8C=90=20replace=20faq=20section=20?=
 =?UTF-8?q?with=20agency=20faq-section=20for=20improved=20agency-specific?=
 =?UTF-8?q?=20faqs?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/app/[locale]/agency/[city]/page.tsx   | 11 +--
 .../marketing/agency/agency-faq-section.tsx   | 72 +++++++++++++++++++
 2 files changed, 74 insertions(+), 9 deletions(-)
 create mode 100644 apps/web/src/components/marketing/agency/agency-faq-section.tsx

diff --git a/apps/web/src/app/[locale]/agency/[city]/page.tsx b/apps/web/src/app/[locale]/agency/[city]/page.tsx
index a421b85cc..924dda604 100644
--- a/apps/web/src/app/[locale]/agency/[city]/page.tsx
+++ b/apps/web/src/app/[locale]/agency/[city]/page.tsx
@@ -13,7 +13,7 @@ import { LocalBusinessSchema } from '@/components/json-ld/localbusiness-schema';
 import { BreadcrumbSchema } from '@/components/json-ld/breadcrumb-schema';
 import { FAQPageSchema } from '@/components/json-ld/faqpage-schema';
 import { ORGANIZATION_DATA } from '@/components/json-ld/constants';
-import FAQSection from '@/components/marketing/services/faq-section';
+import AgencyFAQSection from '@/components/marketing/agency/agency-faq-section';
 import Routes from '@/constants/routes';
 
 type AgencyPageProps = {
@@ -179,14 +179,7 @@ export default async function CityPage({ params }: AgencyPageProps) {
 
         <LocalPortfolio agency={agency} />
 
-        <FAQSection
-          title={t('faq.title', { city: agency.name })}
-          description={t('faq.description', { city: agency.name })}
-          items={faqItems.map(faq => ({
-            question: faq.questionName,
-            answer: faq.acceptedAnswerText
-          }))}
-        />
+        <AgencyFAQSection agencyId={agency.id} />
 
         {agency.testimonials && agency.testimonials.length > 0 && (
           <div className="space-y-8">
diff --git a/apps/web/src/components/marketing/agency/agency-faq-section.tsx b/apps/web/src/components/marketing/agency/agency-faq-section.tsx
new file mode 100644
index 000000000..e6d8d0d16
--- /dev/null
+++ b/apps/web/src/components/marketing/agency/agency-faq-section.tsx
@@ -0,0 +1,72 @@
+"use client";
+
+import React from "react";
+import {
+  Accordion,
+  AccordionContent,
+  AccordionItem,
+  AccordionTrigger,
+} from "@/components/ui/accordion";
+import { cn } from "@/lib/utils";
+import { useTranslation } from "@onruntime/translations/react";
+import { getAgencyById } from "@/constants/agencies";
+
+const FAQ_KEYS = [
+  "choose-agency",
+  "project-costs",
+  "development-time",
+  "remote-work",
+] as const;
+
+interface AgencyFAQSectionProps {
+  agencyId: string;
+  className?: string;
+}
+
+const AgencyFAQSection: React.FC<AgencyFAQSectionProps> = ({
+  agencyId,
+  className,
+}) => {
+  const { t } = useTranslation("app/agency/[city]/page");
+  const agency = getAgencyById(agencyId);
+
+  if (!agency) {
+    return null;
+  }
+
+  return (
+    <div className={cn("flex flex-col gap-12", className)}>
+      <div className="text-center max-w-2xl mx-auto">
+        <h2 className="text-3xl font-medium text-foreground mb-4">
+          {t("faq.title", { city: agency.name })}
+        </h2>
+        <p className="text-muted-foreground">
+          {t("faq.description", { city: agency.name })}
+        </p>
+      </div>
+
+      <div className="max-w-3xl mx-auto w-full">
+        <Accordion type="single" collapsible className="w-full">
+          {FAQ_KEYS.map((key, index) => (
+            <AccordionItem key={key} value={`item-${index}`}>
+              <AccordionTrigger className="text-left">
+                {t(`faq.questions.${key}.question`, {
+                  city: agency.name,
+                  region: agency.region,
+                })}
+              </AccordionTrigger>
+              <AccordionContent>
+                {t(`faq.questions.${key}.answer`, {
+                  city: agency.name,
+                  region: agency.region,
+                })}
+              </AccordionContent>
+            </AccordionItem>
+          ))}
+        </Accordion>
+      </div>
+    </div>
+  );
+};
+
+export default AgencyFAQSection;

From 7719a39db383640d816e9470767ccb673ff92c29 Mon Sep 17 00:00:00 2001
From: Antoine Kingue <etorefr@gmail.com>
Date: Tue, 30 Dec 2025 21:05:59 +0100
Subject: [PATCH 59/64] =?UTF-8?q?=F0=9F=8E=A8=20add=20mobile=20project=20l?=
 =?UTF-8?q?ink=20component=20and=20update=20navbar=20structure=20for=20imp?=
 =?UTF-8?q?roved=20navigation?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/components/marketing/navbar/index.tsx | 74 ++++++++++++++++---
 1 file changed, 64 insertions(+), 10 deletions(-)

diff --git a/apps/web/src/components/marketing/navbar/index.tsx b/apps/web/src/components/marketing/navbar/index.tsx
index dbeac3cf2..5ba9b4888 100644
--- a/apps/web/src/components/marketing/navbar/index.tsx
+++ b/apps/web/src/components/marketing/navbar/index.tsx
@@ -18,6 +18,22 @@ import { ServiceCategoryData, SubService } from "@/types/service";
 
 import Navigation from "./navigation";
 
+// Mobile menu components for projects
+const MobileProjectLink: React.FC<{
+	project: { id: string; name: string };
+	onClose: () => void;
+}> = ({ project, onClose }) => {
+	return (
+		<Link
+			href={Routes.project(project.id)}
+			className="block text-sm font-medium"
+			onClick={onClose}
+		>
+			{project.name}
+		</Link>
+	);
+};
+
 // Mobile menu components for services
 const MobileSubServiceLink: React.FC<{
 	categoryId: string;
@@ -78,13 +94,24 @@ interface DropdownItem {
 	items?: SubNavItem[];
 }
 
-interface NavItem {
+enum NavItemType {
+	Link = "link",
+	Services = "services",
+	Projects = "projects",
+	Dropdown = "dropdown",
+}
+
+interface BaseNavItem {
 	title: string;
 	path: string;
-	dropdown?: DropdownItem[];
-	isServices?: boolean;
 }
 
+type NavItem =
+	| (BaseNavItem & { type: NavItemType.Link })
+	| (BaseNavItem & { type: NavItemType.Services })
+	| (BaseNavItem & { type: NavItemType.Projects })
+	| (BaseNavItem & { type: NavItemType.Dropdown; dropdown: DropdownItem[] });
+
 const Navbar: React.FC = () => {
 	const { t } = useTranslation("layout/navbar");
 	const [mobileMenuOpen, setMobileMenuOpen] = useState(false);
@@ -98,19 +125,17 @@ const Navbar: React.FC = () => {
 
 	const navItems: NavItem[] = [
 		{
+			type: NavItemType.Services,
 			title: t("links.services"),
 			path: Routes.services,
-			isServices: true,
 		},
 		{
+			type: NavItemType.Projects,
 			title: t("links.projects"),
 			path: Routes.projects,
-			dropdown: Projects.slice(0, 5).map((project) => ({
-				title: project.name,
-				path: Routes.project(project.id),
-			})),
 		},
 		{
+			type: NavItemType.Dropdown,
 			title: t("links.agencies"),
 			path: Routes.agency.root,
 			dropdown: [
@@ -125,6 +150,7 @@ const Navbar: React.FC = () => {
 			],
 		},
 		{
+			type: NavItemType.Link,
 			title: t("links.npo"),
 			path: Routes.npo,
 		},
@@ -209,7 +235,7 @@ const Navbar: React.FC = () => {
 					<div className="px-3 flex flex-col space-y-4 md:hidden max-h-[calc(100vh-100px)] overflow-y-auto pb-4">
 						{navItems.map((item) => (
 							<div key={item.title} className="border-t border-border pt-3">
-								{item.isServices ? (
+								{item.type === NavItemType.Services ? (
 									<div className="space-y-3">
 										<button
 											onClick={() => toggleSection(item.title)}
@@ -237,7 +263,35 @@ const Navbar: React.FC = () => {
 											</div>
 										)}
 									</div>
-								) : item.dropdown ? (
+								) : item.type === NavItemType.Projects ? (
+									<div className="space-y-3">
+										<button
+											onClick={() => toggleSection(item.title)}
+											className="flex w-full justify-between items-center text-base font-medium"
+											aria-expanded={expandedSection === item.title}
+										>
+											{item.title}
+											<ChevronDown
+												className={cn(
+													"h-4 w-4 transition-transform",
+													expandedSection === item.title ? "rotate-180" : "",
+												)}
+											/>
+										</button>
+
+										{expandedSection === item.title && (
+											<div className="pl-4 space-y-4 pt-2 overflow-y-auto">
+												{Projects.slice(0, 5).map((project) => (
+													<MobileProjectLink
+														key={project.id}
+														project={project}
+														onClose={closeMenu}
+													/>
+												))}
+											</div>
+										)}
+									</div>
+								) : item.type === NavItemType.Dropdown ? (
 									<div className="space-y-3">
 										<button
 											onClick={() => toggleSection(item.title)}

From 9e79be702aff2473b6db954e2eb8a6716a9b5007 Mon Sep 17 00:00:00 2001
From: Antoine Kingue <etorefr@gmail.com>
Date: Tue, 30 Dec 2025 21:22:48 +0100
Subject: [PATCH 60/64] =?UTF-8?q?=E2=9C=8F=EF=B8=8F=20fix=20french=20local?=
 =?UTF-8?q?ization=20inconsistencies=20in=20service=20descriptions?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../fr/constants/services/backend/bots.json      |  2 +-
 .../fr/constants/services/frontend/desktop.json  | 16 ++++++++--------
 .../services/integration/squarespace.json        |  4 ++--
 3 files changed, 11 insertions(+), 11 deletions(-)

diff --git a/apps/web/src/locales/fr/constants/services/backend/bots.json b/apps/web/src/locales/fr/constants/services/backend/bots.json
index 7ac351245..334d68580 100644
--- a/apps/web/src/locales/fr/constants/services/backend/bots.json
+++ b/apps/web/src/locales/fr/constants/services/backend/bots.json
@@ -20,7 +20,7 @@
     },
     "integrations": {
       "title": "Intégrations",
-      "description": "Connection avec vos outils et services existants."
+      "description": "Connexion avec vos outils et services existants."
     }
   },
   "benefits": {
diff --git a/apps/web/src/locales/fr/constants/services/frontend/desktop.json b/apps/web/src/locales/fr/constants/services/frontend/desktop.json
index c7de3ea14..e5ed059c1 100644
--- a/apps/web/src/locales/fr/constants/services/frontend/desktop.json
+++ b/apps/web/src/locales/fr/constants/services/frontend/desktop.json
@@ -1,14 +1,14 @@
 {
   "name": "Logiciels de bureau",
-  "description": "Développement d'applications desktop multiplateforme",
+  "description": "Développement d'applications de bureau multiplateforme",
   "hero": {
-    "title": "Applications desktop multiplateformes",
-    "description": "Développez des applications de bureau modernes et performantes pour Windows, macOS et Linux. Notre expertise vous garantit des applications professionnelles qui tirent parti de toute la puissance du desktop."
+    "title": "Applications de bureau multiplateformes",
+    "description": "Développez des applications de bureau modernes et performantes pour Windows, macOS et Linux. Notre expertise vous garantit des applications professionnelles qui tirent parti de toute la puissance du bureau."
   },
   "features": {
     "electron-react": {
       "title": "Electron & React",
-      "description": "Technologies modernes pour des applications desktop performantes et évolutives."
+      "description": "Technologies modernes pour des applications de bureau performantes et évolutives."
     },
     "multiplatform": {
       "title": "Multiplateforme",
@@ -26,7 +26,7 @@
   "benefits": {
     "windows-macos": {
       "title": "Windows & macOS",
-      "description": "Support natif des principales plateformes desktop."
+      "description": "Support natif des principales plateformes de bureau."
     },
     "system-access": {
       "title": "Accès système",
@@ -43,11 +43,11 @@
   },
   "faq": {
     "why-electron": {
-      "question": "Pourquoi choisir Electron pour le développement desktop ?",
-      "answer": "Electron permet de créer des applications desktop multiplateformes avec des technologies web modernes (React, TypeScript). Cela offre un développement rapide, une maintenance simplifiée et une excellente expérience utilisateur, tout en garantissant la compatibilité avec Windows, macOS et Linux."
+      "question": "Pourquoi choisir Electron pour le développement de bureau ?",
+      "answer": "Electron permet de créer des applications de bureau multiplateformes avec des technologies web modernes (React, TypeScript). Cela offre un développement rapide, une maintenance simplifiée et une excellente expérience utilisateur, tout en garantissant la compatibilité avec Windows, macOS et Linux."
     },
     "security": {
-      "question": "Comment gérez-vous la sécurité des applications desktop ?",
+      "question": "Comment gérez-vous la sécurité des applications de bureau ?",
       "answer": "Nous implémentons plusieurs niveaux de sécurité : chiffrement des données sensibles, protection contre les injections de code, mises à jour de sécurité automatiques, et bonnes pratiques de développement sécurisé. Nous suivons également les recommandations de sécurité spécifiques à chaque système d'exploitation."
     },
     "auto-update": {
diff --git a/apps/web/src/locales/fr/constants/services/integration/squarespace.json b/apps/web/src/locales/fr/constants/services/integration/squarespace.json
index 126a424a7..cfadf6ce1 100644
--- a/apps/web/src/locales/fr/constants/services/integration/squarespace.json
+++ b/apps/web/src/locales/fr/constants/services/integration/squarespace.json
@@ -1,6 +1,6 @@
 {
-  "name": "SquareSpace",
-  "description": "Intégration et personnalisation sur SquareSpace",
+  "name": "Squarespace",
+  "description": "Intégration et personnalisation sur Squarespace",
   "hero": {
     "title": "Sites web élégants avec Squarespace",
     "description": "Créez une présence en ligne raffinée avec Squarespace. Notre expertise vous garantit un site web esthétique, fonctionnel et parfaitement adapté à votre image de marque."

From d39684c76c01968f054604b61542c73ad8fa31c9 Mon Sep 17 00:00:00 2001
From: Antoine Kingue <etorefr@gmail.com>
Date: Tue, 30 Dec 2025 21:34:00 +0100
Subject: [PATCH 61/64] =?UTF-8?q?=E2=99=BB=EF=B8=8F=20refactor=20services?=
 =?UTF-8?q?=20page=20to=20directly=20use=20imported=20services=20and=20sim?=
 =?UTF-8?q?plify=20props?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 apps/web/src/app/[locale]/services/page.tsx       | 3 +--
 apps/web/src/screens/marketing/services/index.tsx | 9 +++------
 2 files changed, 4 insertions(+), 8 deletions(-)

diff --git a/apps/web/src/app/[locale]/services/page.tsx b/apps/web/src/app/[locale]/services/page.tsx
index 4a8e48207..e3be9cc30 100644
--- a/apps/web/src/app/[locale]/services/page.tsx
+++ b/apps/web/src/app/[locale]/services/page.tsx
@@ -1,7 +1,6 @@
 import { constructMetadata } from "@/lib/utils/metadata.server";
 import { getTranslation } from "@/lib/translations.server";
 import ServicesPage from "@/screens/marketing/services";
-import Services from "@/constants/services";
 
 export async function generateMetadata() {
   const { t } = await getTranslation("app/services/page");
@@ -13,5 +12,5 @@ export async function generateMetadata() {
 }
 
 export default async function Page() {
-  return <ServicesPage services={Services} />;
+  return <ServicesPage />;
 }
diff --git a/apps/web/src/screens/marketing/services/index.tsx b/apps/web/src/screens/marketing/services/index.tsx
index 40d4748e3..b0cecf42f 100644
--- a/apps/web/src/screens/marketing/services/index.tsx
+++ b/apps/web/src/screens/marketing/services/index.tsx
@@ -11,6 +11,7 @@ import Routes from "@/constants/routes";
 import ProjectTimeline from './timeline';
 import { ConsultingSection, ExpertiseSection, TechnologiesSection, ValuePropositionSection } from '@/components/marketing/services/sections';
 import { ServiceCategoryData, SubService } from '@/types/service';
+import Services from '@/constants/services';
 
 const SubServiceCard: React.FC<{ categoryId: string; subService: SubService }> = ({
   categoryId,
@@ -71,11 +72,7 @@ const ServiceCategoryCard: React.FC<{ service: ServiceCategoryData }> = ({ servi
   );
 };
 
-interface ServicesPageProps {
-  services: ServiceCategoryData[];
-}
-
-const ServicesPage: React.FC<ServicesPageProps> = ({ services }) => {
+const ServicesPage: React.FC = () => {
   const { t } = useTranslation("app/services/page");
 
   return (
@@ -111,7 +108,7 @@ const ServicesPage: React.FC<ServicesPageProps> = ({ services }) => {
         <ValuePropositionSection />
 
         <div className="flex flex-col gap-16 w-full">
-          {services.map((service) => (
+          {Services.map((service) => (
             <ServiceCategoryCard key={service.id} service={service} />
           ))}
         </div>

From b932c8a5692461b24d988dca9de24ce6068ff4db Mon Sep 17 00:00:00 2001
From: Antoine Kingue <etorefr@gmail.com>
Date: Wed, 31 Dec 2025 00:54:58 +0100
Subject: [PATCH 62/64] =?UTF-8?q?=E2=9C=A8=20add=20next-sitemap?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 apps/web/next-sitemap.config.js               |  54 ----
 apps/web/next.config.ts                       |   8 +
 apps/web/package.json                         |   3 +-
 apps/web/src/app/robots.ts                    |  11 +
 apps/web/src/app/sitemap.xml/[id]/route.ts    |  17 ++
 apps/web/src/app/sitemap.xml/route.ts         |  17 ++
 examples/next-sitemap/app/app/about/page.tsx  |  11 +
 examples/next-sitemap/app/app/layout.tsx      |  14 +
 examples/next-sitemap/app/app/page.tsx        |  37 +++
 .../app/app/posts/[slug]/page.tsx             |  34 +++
 examples/next-sitemap/app/app/posts/page.tsx  |  23 ++
 .../app/app/sitemap.xml/[id]/route.ts         |  13 +
 .../next-sitemap/app/app/sitemap.xml/route.ts |  13 +
 examples/next-sitemap/app/next.config.ts      |  14 +
 examples/next-sitemap/app/package.json        |  21 ++
 examples/next-sitemap/app/tsconfig.json       |  41 +++
 packages/next-sitemap/README.md               | 271 ++++++++++++++++++
 packages/next-sitemap/package.json            |  59 ++++
 packages/next-sitemap/src/app/index.ts        | 207 +++++++++++++
 packages/next-sitemap/src/index.ts            | 244 ++++++++++++++++
 packages/next-sitemap/tsconfig.json           |  17 ++
 packages/next-sitemap/tsup.config.ts          |  26 ++
 pnpm-lock.yaml                                |  76 ++---
 23 files changed, 1142 insertions(+), 89 deletions(-)
 delete mode 100644 apps/web/next-sitemap.config.js
 create mode 100644 apps/web/src/app/robots.ts
 create mode 100644 apps/web/src/app/sitemap.xml/[id]/route.ts
 create mode 100644 apps/web/src/app/sitemap.xml/route.ts
 create mode 100644 examples/next-sitemap/app/app/about/page.tsx
 create mode 100644 examples/next-sitemap/app/app/layout.tsx
 create mode 100644 examples/next-sitemap/app/app/page.tsx
 create mode 100644 examples/next-sitemap/app/app/posts/[slug]/page.tsx
 create mode 100644 examples/next-sitemap/app/app/posts/page.tsx
 create mode 100644 examples/next-sitemap/app/app/sitemap.xml/[id]/route.ts
 create mode 100644 examples/next-sitemap/app/app/sitemap.xml/route.ts
 create mode 100644 examples/next-sitemap/app/next.config.ts
 create mode 100644 examples/next-sitemap/app/package.json
 create mode 100644 examples/next-sitemap/app/tsconfig.json
 create mode 100644 packages/next-sitemap/README.md
 create mode 100644 packages/next-sitemap/package.json
 create mode 100644 packages/next-sitemap/src/app/index.ts
 create mode 100644 packages/next-sitemap/src/index.ts
 create mode 100644 packages/next-sitemap/tsconfig.json
 create mode 100644 packages/next-sitemap/tsup.config.ts

diff --git a/apps/web/next-sitemap.config.js b/apps/web/next-sitemap.config.js
deleted file mode 100644
index 8124c1d4e..000000000
--- a/apps/web/next-sitemap.config.js
+++ /dev/null
@@ -1,54 +0,0 @@
-/** @type {import('next-sitemap').IConfig} */
-const config = {
-  siteUrl: process.env.NEXT_PUBLIC_APP_URL || "https://onruntime.com",
-  generateRobotsTxt: true,
-  robotsTxtOptions: {
-    policies:
-      process.env.VERCEL_ENV === "production"
-        ? [{ userAgent: "*", allow: "/" }]
-        : [{ userAgent: "*", disallow: "/" }],
-  },
-  transform: async (config, path) => {
-    const locales = ["fr"];
-    const defaultLocale = "fr";
-
-    const pathParts = path.split("/").filter(Boolean);
-    const hasLocale = locales.includes(pathParts[0]);
-    const pathDepth = hasLocale ? pathParts.length - 1 : pathParts.length;
-
-    const calculatedPriority = Number(
-      Math.max(0.1, Math.min(1.0, 1.0 - pathDepth * 0.2)).toFixed(1),
-    );
-
-    const alternateRefs = locales.map((locale) => {
-      const pathParts = path.split("/");
-      const hasLocale = locales.includes(pathParts[1]);
-      const pathWithoutLocale = hasLocale
-        ? "/" + pathParts.slice(2).join("/")
-        : path;
-
-      if (locale === defaultLocale) {
-        return {
-          hreflang: locale,
-          href: `${process.env.NEXT_PUBLIC_APP_URL}${pathWithoutLocale}`,
-          hrefIsAbsolute: true,
-        };
-      } else {
-        return {
-          hreflang: locale,
-          href: `${process.env.NEXT_PUBLIC_APP_URL}/${locale}${pathWithoutLocale}`,
-          hrefIsAbsolute: true,
-        };
-      }
-    });
-
-    return {
-      loc: path,
-      lastmod: config.autoLastmod ? new Date().toISOString() : undefined,
-      priority: path === "/" ? 1.0 : calculatedPriority,
-      alternateRefs,
-    };
-  },
-};
-
-module.exports = config;
diff --git a/apps/web/next.config.ts b/apps/web/next.config.ts
index 9288db978..3a60e3450 100644
--- a/apps/web/next.config.ts
+++ b/apps/web/next.config.ts
@@ -16,6 +16,14 @@ const nextConfig: NextConfig = {
     });
     return config;
   },
+  async rewrites() {
+    return [
+      {
+        source: "/sitemap-:id.xml",
+        destination: "/sitemap.xml/:id",
+      },
+    ];
+  },
   async redirects() {
     return [
       {
diff --git a/apps/web/package.json b/apps/web/package.json
index 580dea4d3..212ae8580 100644
--- a/apps/web/package.json
+++ b/apps/web/package.json
@@ -5,7 +5,6 @@
   "scripts": {
     "dev": "next dev --turbopack",
     "build": "next build",
-    "postbuild": "next-sitemap",
     "start": "next start",
     "type-check": "tsc --noEmit"
   },
@@ -15,6 +14,7 @@
     "@mdx-js/loader": "^3.1.0",
     "@mdx-js/react": "^3.1.0",
     "@next/mdx": "^16.1.1",
+    "@onruntime/next-sitemap": "workspace:*",
     "@onruntime/translations": "workspace:*",
     "@radix-ui/react-accordion": "^1.2.3",
     "@radix-ui/react-dialog": "^1.1.6",
@@ -37,7 +37,6 @@
     "next-mdx-remote": "^5.0.0",
     "next-mdx-remote-client": "^2.1.1",
     "next-seo": "^6.6.0",
-    "next-sitemap": "^4.2.3",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
     "react-hook-form": "^7.54.2",
diff --git a/apps/web/src/app/robots.ts b/apps/web/src/app/robots.ts
new file mode 100644
index 000000000..98b659d35
--- /dev/null
+++ b/apps/web/src/app/robots.ts
@@ -0,0 +1,11 @@
+import type { MetadataRoute } from "next";
+
+export default function robots(): MetadataRoute.Robots {
+  return {
+    rules: {
+      userAgent: "*",
+      allow: "/",
+    },
+    sitemap: "https://onruntime.com/sitemap.xml",
+  };
+}
diff --git a/apps/web/src/app/sitemap.xml/[id]/route.ts b/apps/web/src/app/sitemap.xml/[id]/route.ts
new file mode 100644
index 000000000..e226a31cd
--- /dev/null
+++ b/apps/web/src/app/sitemap.xml/[id]/route.ts
@@ -0,0 +1,17 @@
+import { createSitemapHandler } from "@onruntime/next-sitemap/app";
+import { siteConfig } from "@/constants/site-config";
+import { locales, defaultLocale } from "@/lib/translations";
+
+export const dynamic = "force-static";
+
+// @ts-expect-error - require.context is a webpack/turbopack feature
+const pagesContext = require.context("../../[locale]", true, /\/page\.tsx$/);
+
+const { generateStaticParams, GET } = createSitemapHandler({
+  baseUrl: siteConfig.url,
+  locales,
+  defaultLocale,
+  pagesContext,
+});
+
+export { generateStaticParams, GET };
diff --git a/apps/web/src/app/sitemap.xml/route.ts b/apps/web/src/app/sitemap.xml/route.ts
new file mode 100644
index 000000000..328ed9492
--- /dev/null
+++ b/apps/web/src/app/sitemap.xml/route.ts
@@ -0,0 +1,17 @@
+import { createSitemapIndexHandler } from "@onruntime/next-sitemap/app";
+import { siteConfig } from "@/constants/site-config";
+import { locales, defaultLocale } from "@/lib/translations";
+
+export const dynamic = "force-static";
+
+// @ts-expect-error - require.context is a webpack/turbopack feature
+const pagesContext = require.context("../[locale]", true, /\/page\.tsx$/);
+
+const { GET } = createSitemapIndexHandler({
+  baseUrl: siteConfig.url,
+  locales,
+  defaultLocale,
+  pagesContext,
+});
+
+export { GET };
diff --git a/examples/next-sitemap/app/app/about/page.tsx b/examples/next-sitemap/app/app/about/page.tsx
new file mode 100644
index 000000000..ee27b30db
--- /dev/null
+++ b/examples/next-sitemap/app/app/about/page.tsx
@@ -0,0 +1,11 @@
+import Link from "next/link";
+
+export default function About() {
+  return (
+    <main style={{ padding: "2rem", fontFamily: "system-ui" }}>
+      <h1>About</h1>
+      <p>This is a static page that will be included in the sitemap.</p>
+      <Link href="/">Back to Home</Link>
+    </main>
+  );
+}
diff --git a/examples/next-sitemap/app/app/layout.tsx b/examples/next-sitemap/app/app/layout.tsx
new file mode 100644
index 000000000..5c7f5da7b
--- /dev/null
+++ b/examples/next-sitemap/app/app/layout.tsx
@@ -0,0 +1,14 @@
+import type { ReactNode } from "react";
+
+export const metadata = {
+  title: "Next Sitemap Example",
+  description: "Example app using @onruntime/next-sitemap",
+};
+
+export default function RootLayout({ children }: { children: ReactNode }) {
+  return (
+    <html lang="en">
+      <body>{children}</body>
+    </html>
+  );
+}
diff --git a/examples/next-sitemap/app/app/page.tsx b/examples/next-sitemap/app/app/page.tsx
new file mode 100644
index 000000000..bf6c1f6fd
--- /dev/null
+++ b/examples/next-sitemap/app/app/page.tsx
@@ -0,0 +1,37 @@
+import Link from "next/link";
+
+export default function Home() {
+  return (
+    <main style={{ padding: "2rem", fontFamily: "system-ui" }}>
+      <h1>Next Sitemap Example</h1>
+      <p>This example demonstrates automatic sitemap generation.</p>
+
+      <nav style={{ marginTop: "2rem" }}>
+        <h2>Pages</h2>
+        <ul>
+          <li>
+            <Link href="/">Home</Link>
+          </li>
+          <li>
+            <Link href="/about">About</Link>
+          </li>
+          <li>
+            <Link href="/posts">Posts</Link>
+          </li>
+        </ul>
+      </nav>
+
+      <nav style={{ marginTop: "2rem" }}>
+        <h2>Sitemaps</h2>
+        <ul>
+          <li>
+            <a href="/sitemap.xml">Sitemap Index</a>
+          </li>
+          <li>
+            <a href="/sitemap-0.xml">Sitemap 0</a>
+          </li>
+        </ul>
+      </nav>
+    </main>
+  );
+}
diff --git a/examples/next-sitemap/app/app/posts/[slug]/page.tsx b/examples/next-sitemap/app/app/posts/[slug]/page.tsx
new file mode 100644
index 000000000..e2fbd1bc8
--- /dev/null
+++ b/examples/next-sitemap/app/app/posts/[slug]/page.tsx
@@ -0,0 +1,34 @@
+import Link from "next/link";
+
+const posts = [
+  { slug: "hello-world", title: "Hello World", content: "Welcome to our blog!" },
+  { slug: "getting-started", title: "Getting Started", content: "Learn how to use this package." },
+  { slug: "advanced-usage", title: "Advanced Usage", content: "Advanced tips and tricks." },
+];
+
+// This function is automatically called by @onruntime/next-sitemap
+// to discover all dynamic routes for the sitemap
+export async function generateStaticParams() {
+  return posts.map((post) => ({ slug: post.slug }));
+}
+
+export default async function Post({
+  params,
+}: {
+  params: Promise<{ slug: string }>;
+}) {
+  const { slug } = await params;
+  const post = posts.find((p) => p.slug === slug);
+
+  if (!post) {
+    return <div>Post not found</div>;
+  }
+
+  return (
+    <main style={{ padding: "2rem", fontFamily: "system-ui" }}>
+      <h1>{post.title}</h1>
+      <p>{post.content}</p>
+      <Link href="/posts">Back to Posts</Link>
+    </main>
+  );
+}
diff --git a/examples/next-sitemap/app/app/posts/page.tsx b/examples/next-sitemap/app/app/posts/page.tsx
new file mode 100644
index 000000000..583b347fa
--- /dev/null
+++ b/examples/next-sitemap/app/app/posts/page.tsx
@@ -0,0 +1,23 @@
+import Link from "next/link";
+
+const posts = [
+  { slug: "hello-world", title: "Hello World" },
+  { slug: "getting-started", title: "Getting Started" },
+  { slug: "advanced-usage", title: "Advanced Usage" },
+];
+
+export default function Posts() {
+  return (
+    <main style={{ padding: "2rem", fontFamily: "system-ui" }}>
+      <h1>Posts</h1>
+      <ul>
+        {posts.map((post) => (
+          <li key={post.slug}>
+            <Link href={`/posts/${post.slug}`}>{post.title}</Link>
+          </li>
+        ))}
+      </ul>
+      <Link href="/">Back to Home</Link>
+    </main>
+  );
+}
diff --git a/examples/next-sitemap/app/app/sitemap.xml/[id]/route.ts b/examples/next-sitemap/app/app/sitemap.xml/[id]/route.ts
new file mode 100644
index 000000000..4108e31c8
--- /dev/null
+++ b/examples/next-sitemap/app/app/sitemap.xml/[id]/route.ts
@@ -0,0 +1,13 @@
+import { createSitemapHandler } from "@onruntime/next-sitemap/app";
+
+export const dynamic = "force-static";
+
+// @ts-expect-error - require.context is a webpack/turbopack feature
+const pagesContext = require.context("../../", true, /\/page\.tsx$/);
+
+const { generateStaticParams, GET } = createSitemapHandler({
+  baseUrl: "https://example.com",
+  pagesContext,
+});
+
+export { generateStaticParams, GET };
diff --git a/examples/next-sitemap/app/app/sitemap.xml/route.ts b/examples/next-sitemap/app/app/sitemap.xml/route.ts
new file mode 100644
index 000000000..0cc79f24a
--- /dev/null
+++ b/examples/next-sitemap/app/app/sitemap.xml/route.ts
@@ -0,0 +1,13 @@
+import { createSitemapIndexHandler } from "@onruntime/next-sitemap/app";
+
+export const dynamic = "force-static";
+
+// @ts-expect-error - require.context is a webpack/turbopack feature
+const pagesContext = require.context("../", true, /\/page\.tsx$/);
+
+const { GET } = createSitemapIndexHandler({
+  baseUrl: "https://example.com",
+  pagesContext,
+});
+
+export { GET };
diff --git a/examples/next-sitemap/app/next.config.ts b/examples/next-sitemap/app/next.config.ts
new file mode 100644
index 000000000..17a92ba9c
--- /dev/null
+++ b/examples/next-sitemap/app/next.config.ts
@@ -0,0 +1,14 @@
+import type { NextConfig } from "next";
+
+const nextConfig: NextConfig = {
+  async rewrites() {
+    return [
+      {
+        source: "/sitemap-:id.xml",
+        destination: "/sitemap.xml/:id",
+      },
+    ];
+  },
+};
+
+export default nextConfig;
diff --git a/examples/next-sitemap/app/package.json b/examples/next-sitemap/app/package.json
new file mode 100644
index 000000000..ef9e948c2
--- /dev/null
+++ b/examples/next-sitemap/app/package.json
@@ -0,0 +1,21 @@
+{
+  "name": "@onruntime/next-sitemap-example-app",
+  "version": "0.1.0",
+  "private": true,
+  "scripts": {
+    "dev": "next dev --port 3002",
+    "build": "next build",
+    "start": "next start"
+  },
+  "dependencies": {
+    "@onruntime/next-sitemap": "workspace:*",
+    "next": "^16.1.1",
+    "react": "^19.1.0",
+    "react-dom": "^19.1.0"
+  },
+  "devDependencies": {
+    "@types/node": "^22",
+    "@types/react": "^19",
+    "typescript": "^5"
+  }
+}
diff --git a/examples/next-sitemap/app/tsconfig.json b/examples/next-sitemap/app/tsconfig.json
new file mode 100644
index 000000000..9e9bbf7b1
--- /dev/null
+++ b/examples/next-sitemap/app/tsconfig.json
@@ -0,0 +1,41 @@
+{
+  "compilerOptions": {
+    "lib": [
+      "dom",
+      "dom.iterable",
+      "esnext"
+    ],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "strict": true,
+    "noEmit": true,
+    "esModuleInterop": true,
+    "module": "esnext",
+    "moduleResolution": "bundler",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "jsx": "react-jsx",
+    "incremental": true,
+    "plugins": [
+      {
+        "name": "next"
+      }
+    ],
+    "paths": {
+      "@/*": [
+        "./*"
+      ]
+    },
+    "target": "ES2017"
+  },
+  "include": [
+    "next-env.d.ts",
+    "**/*.ts",
+    "**/*.tsx",
+    ".next/types/**/*.ts",
+    ".next/dev/types/**/*.ts"
+  ],
+  "exclude": [
+    "node_modules"
+  ]
+}
diff --git a/packages/next-sitemap/README.md b/packages/next-sitemap/README.md
new file mode 100644
index 000000000..d71f23fc3
--- /dev/null
+++ b/packages/next-sitemap/README.md
@@ -0,0 +1,271 @@
+# @onruntime/next-sitemap
+
+Dynamic sitemap generation for Next.js with automatic route discovery.
+
+## Example
+
+- [Next.js App Router](https://github.com/onRuntime/onruntime/tree/master/examples/next-sitemap/app)
+
+## Features
+
+- Automatic route discovery using `require.context`
+- Calls `generateStaticParams` for dynamic routes
+- Multi-sitemap support with sitemap index (for sites with >50,000 URLs)
+- hreflang alternates for i18n
+- Fully static generation (SSG)
+
+## Installation
+
+```bash
+pnpm add @onruntime/next-sitemap
+```
+
+## Usage
+
+### Next.js App Router
+
+#### 1. Create the sitemap index route
+
+```typescript
+// app/sitemap.xml/route.ts
+import { createSitemapIndexHandler } from "@onruntime/next-sitemap/app";
+
+export const dynamic = "force-static";
+
+// @ts-expect-error - require.context is a webpack/turbopack feature
+const pagesContext = require.context("../", true, /\/page\.tsx$/);
+
+const { GET } = createSitemapIndexHandler({
+  baseUrl: "https://example.com",
+  pagesContext,
+});
+
+export { GET };
+```
+
+#### 2. Create the individual sitemap route
+
+```typescript
+// app/sitemap.xml/[id]/route.ts
+import { createSitemapHandler } from "@onruntime/next-sitemap/app";
+
+export const dynamic = "force-static";
+
+// @ts-expect-error - require.context is a webpack/turbopack feature
+const pagesContext = require.context("../../", true, /\/page\.tsx$/);
+
+const { generateStaticParams, GET } = createSitemapHandler({
+  baseUrl: "https://example.com",
+  pagesContext,
+});
+
+export { generateStaticParams, GET };
+```
+
+#### With i18n (optional)
+
+If your app uses a `[locale]` segment for internationalization, just add `locales` and `defaultLocale`. The `localeSegment` is automatically set to `"[locale]"`:
+
+```typescript
+// app/sitemap.xml/route.ts
+const pagesContext = require.context("../[locale]", true, /\/page\.tsx$/);
+
+const { GET } = createSitemapIndexHandler({
+  baseUrl: "https://example.com",
+  locales: ["en", "fr"],
+  defaultLocale: "en",
+  pagesContext,
+});
+```
+
+If you use a different segment name (e.g., `[lang]`), specify it explicitly:
+
+```typescript
+localeSegment: "[lang]", // Custom segment name
+```
+
+#### 3. Add URL rewrite in next.config.ts
+
+```typescript
+// next.config.ts
+import type { NextConfig } from "next";
+
+const nextConfig: NextConfig = {
+  async rewrites() {
+    return [
+      {
+        source: "/sitemap-:id.xml",
+        destination: "/sitemap.xml/:id",
+      },
+    ];
+  },
+};
+
+export default nextConfig;
+```
+
+### Configuration Options
+
+| Option | Type | Default | Description |
+|--------|------|---------|-------------|
+| `baseUrl` | `string` | required | Base URL of the site |
+| `locales` | `string[]` | `[]` | List of supported locales |
+| `defaultLocale` | `string` | `undefined` | Default locale (URLs without prefix) |
+| `urlsPerSitemap` | `number` | `5000` | Max URLs per sitemap file |
+| `localeSegment` | `string` | auto | Auto-detected as `"[locale]"` when i18n is configured. Override for custom names like `"[lang]"`. |
+| `pagesContext` | `object` | required | Result of `require.context()` |
+| `exclude` | `string[]` or `function` | `undefined` | Patterns or function to exclude routes |
+| `priority` | `number`, `"auto"`, or `function` | `"auto"` | Priority calculation (auto = depth-based) |
+| `changeFreq` | `ChangeFrequency` or `function` | `"weekly"` | Change frequency for entries |
+| `additionalSitemaps` | `string[]` | `[]` | Additional sitemaps to include in index |
+
+#### Exclude Routes
+
+Exclude specific routes from the sitemap using glob patterns or a function:
+
+```typescript
+// Using glob patterns
+const { GET } = createSitemapIndexHandler({
+  baseUrl: "https://example.com",
+  pagesContext,
+  exclude: ["/admin/*", "/api/*", "/private/**"],
+});
+
+// Using a function
+const { GET } = createSitemapIndexHandler({
+  baseUrl: "https://example.com",
+  pagesContext,
+  exclude: (path) => path.startsWith("/internal"),
+});
+```
+
+#### Priority
+
+By default, priority is calculated automatically based on URL depth:
+- `/` → 1.0
+- `/about` → 0.8
+- `/blog/post` → 0.6
+- Minimum: 0.1
+
+You can override with a fixed value or a function:
+
+```typescript
+// Fixed priority for all URLs
+priority: 0.8,
+
+// Custom function
+priority: (path) => {
+  if (path === "/") return 1.0;
+  if (path.startsWith("/products")) return 0.9;
+  return 0.5;
+},
+```
+
+#### Change Frequency
+
+Set a default change frequency or customize per route:
+
+```typescript
+// Fixed value
+changeFreq: "daily",
+
+// Custom function
+changeFreq: (path) => {
+  if (path === "/") return "daily";
+  if (path.startsWith("/blog")) return "weekly";
+  return "monthly";
+},
+```
+
+#### Additional Sitemaps
+
+Include custom sitemaps in the sitemap index (e.g., for API-fetched data):
+
+```typescript
+const { GET } = createSitemapIndexHandler({
+  baseUrl: "https://example.com",
+  pagesContext,
+  additionalSitemaps: ["/products-sitemap.xml", "/blog-sitemap.xml"],
+});
+```
+
+### How It Works
+
+1. `require.context` scans your app directory at build time
+2. For each page found, it extracts the route path
+3. For dynamic routes (e.g., `/projects/[id]`), it calls `generateStaticParams`
+4. URLs are paginated into multiple sitemaps (default: 5000 URLs each)
+5. A sitemap index lists all individual sitemaps
+
+### Generated URLs
+
+For a route structure like:
+```
+app/
+├── page.tsx                    → /
+├── about/page.tsx              → /about
+├── posts/page.tsx              → /posts
+└── posts/[slug]/page.tsx       → /posts/hello-world, /posts/getting-started, ...
+```
+
+The sitemap will include:
+- All static routes
+- All dynamic routes resolved via `generateStaticParams`
+- hreflang alternates for each locale (if i18n is configured)
+
+**Note:** Dynamic routes without `generateStaticParams` are skipped. If you need to include routes that fetch data at runtime (e.g., from an API), you can create a separate sitemap using [Next.js native sitemap generation](https://nextjs.org/docs/app/api-reference/file-conventions/metadata/sitemap):
+
+```typescript
+// app/custom-sitemap.xml/route.ts
+import { generateSitemapXml } from "@onruntime/next-sitemap";
+
+export async function GET() {
+  // Fetch your dynamic data
+  const products = await fetch("https://api.example.com/products").then(r => r.json());
+
+  const entries = products.map((p: { slug: string }) => ({
+    url: `https://example.com/products/${p.slug}`,
+    lastModified: new Date(),
+  }));
+
+  return new Response(generateSitemapXml(entries), {
+    headers: { "Content-Type": "application/xml" },
+  });
+}
+```
+
+### Example Output
+
+**Sitemap Index** (`/sitemap.xml`):
+```xml
+<?xml version="1.0" encoding="UTF-8"?>
+<sitemapindex xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
+  <sitemap>
+    <loc>https://example.com/sitemap-0.xml</loc>
+    <lastmod>2024-01-01T00:00:00.000Z</lastmod>
+  </sitemap>
+</sitemapindex>
+```
+
+**Individual Sitemap** (`/sitemap-0.xml`):
+```xml
+<?xml version="1.0" encoding="UTF-8"?>
+<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
+  <url>
+    <loc>https://example.com/</loc>
+    <lastmod>2024-01-01T00:00:00.000Z</lastmod>
+    <changefreq>weekly</changefreq>
+    <priority>1</priority>
+  </url>
+  <url>
+    <loc>https://example.com/posts/hello-world</loc>
+    <lastmod>2024-01-01T00:00:00.000Z</lastmod>
+    <changefreq>weekly</changefreq>
+    <priority>0.7</priority>
+  </url>
+</urlset>
+```
+
+## License
+
+MIT
diff --git a/packages/next-sitemap/package.json b/packages/next-sitemap/package.json
new file mode 100644
index 000000000..f1513d1fd
--- /dev/null
+++ b/packages/next-sitemap/package.json
@@ -0,0 +1,59 @@
+{
+  "name": "@onruntime/next-sitemap",
+  "version": "0.1.0",
+  "description": "Dynamic sitemap generation for Next.js with automatic route discovery",
+  "author": "onRuntime Studio <contact@onruntime.com>",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/onRuntime/onruntime.git",
+    "directory": "packages/next-sitemap"
+  },
+  "homepage": "https://github.com/onRuntime/onruntime/tree/master/packages/next-sitemap#readme",
+  "bugs": {
+    "url": "https://github.com/onRuntime/onruntime/issues"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "type": "module",
+  "main": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "require": "./dist/index.cjs"
+    },
+    "./app": {
+      "types": "./dist/app/index.d.ts",
+      "import": "./dist/app/index.js",
+      "require": "./dist/app/index.cjs"
+    }
+  },
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "build": "tsup",
+    "dev": "tsup --watch",
+    "type-check": "tsc --noEmit"
+  },
+  "peerDependencies": {
+    "next": ">=14.0.0"
+  },
+  "devDependencies": {
+    "@types/node": "^22.0.0",
+    "next": "^16.1.1",
+    "tsup": "^8",
+    "typescript": "^5"
+  },
+  "keywords": [
+    "sitemap",
+    "nextjs",
+    "app-router",
+    "seo",
+    "xml",
+    "dynamic-sitemap"
+  ],
+  "license": "MIT"
+}
diff --git a/packages/next-sitemap/src/app/index.ts b/packages/next-sitemap/src/app/index.ts
new file mode 100644
index 000000000..95a2949d6
--- /dev/null
+++ b/packages/next-sitemap/src/app/index.ts
@@ -0,0 +1,207 @@
+import {
+  type SitemapConfig,
+  type SitemapEntry,
+  type PageModule,
+  type ChangeFrequency,
+  buildUrl,
+  generateSitemapXml,
+  generateSitemapIndexXml,
+  shouldExclude,
+  getPriority,
+  getChangeFreq,
+} from "../index";
+
+export type { SitemapConfig, SitemapEntry, ChangeFrequency };
+
+export interface CreateSitemapHandlerOptions extends SitemapConfig {
+  /**
+   * The require.context result for page discovery
+   * Example: require.context('./[locale]', true, /\/page\.tsx$/)
+   */
+  pagesContext: {
+    keys: () => string[];
+    (key: string): PageModule;
+  };
+}
+
+interface RouteData {
+  pathname: string;
+  dynamicSegments: string[];
+  getParams: (() => Promise<Record<string, string>[]>) | null;
+}
+
+function extractRoutes(
+  pagesContext: CreateSitemapHandlerOptions["pagesContext"],
+  localeSegment: string
+): RouteData[] {
+  const routes: RouteData[] = [];
+
+  for (const key of pagesContext.keys()) {
+    // Skip catch-all routes like [...not_found]
+    if (key.includes("[...")) continue;
+
+    const pageModule = pagesContext(key);
+
+    // Convert file path to URL path
+    // ./projects/[id]/page.tsx -> /projects/[id]
+    // Also remove route groups like (legal) and locale segment
+    let pathname = key
+      .replace("./", "/")
+      .replace("/page.tsx", "")
+      .replace(new RegExp(`^/${localeSegment.replace(/[[\]]/g, "\\$&")}`), "")
+      .replace(/\/\([^)]+\)/g, "") || "/";
+
+    // Handle root page in locale folder
+    if (pathname === "") pathname = "/";
+
+    // Extract dynamic segments
+    const dynamicSegments =
+      pathname.match(/\[([^\]]+)\]/g)?.map((s) => s.slice(1, -1)) || [];
+
+    routes.push({
+      pathname,
+      dynamicSegments,
+      getParams: pageModule.generateStaticParams || null,
+    });
+  }
+
+  return routes;
+}
+
+async function getAllPaths(routes: RouteData[]): Promise<string[]> {
+  const allPaths: string[] = ["/"];
+  const seenPaths = new Set<string>(["/"]); // Avoid duplicates
+
+  for (const route of routes) {
+    if (route.dynamicSegments.length === 0) {
+      // Static route
+      if (route.pathname !== "/" && !seenPaths.has(route.pathname)) {
+        allPaths.push(route.pathname);
+        seenPaths.add(route.pathname);
+      }
+    } else if (route.getParams) {
+      // Dynamic route with generateStaticParams
+      const params = await route.getParams();
+
+      for (const param of params) {
+        let dynamicPath = route.pathname;
+        for (const segment of route.dynamicSegments) {
+          dynamicPath = dynamicPath.replace(`[${segment}]`, param[segment]);
+        }
+        if (!seenPaths.has(dynamicPath)) {
+          allPaths.push(dynamicPath);
+          seenPaths.add(dynamicPath);
+        }
+      }
+    }
+  }
+
+  return allPaths;
+}
+
+function pathsToEntries(
+  paths: string[],
+  config: SitemapConfig
+): SitemapEntry[] {
+  const { baseUrl, locales = [], defaultLocale, exclude, priority, changeFreq } = config;
+
+  // Filter out excluded paths
+  const filteredPaths = paths.filter((pathname) => !shouldExclude(pathname, exclude));
+
+  return filteredPaths.map((pathname) => {
+    const entry: SitemapEntry = {
+      url: buildUrl(baseUrl, pathname, defaultLocale, defaultLocale),
+      lastModified: new Date(),
+      changeFrequency: getChangeFreq(pathname, changeFreq),
+      priority: getPriority(pathname, priority),
+    };
+
+    if (locales.length > 0) {
+      entry.alternates = {
+        languages: Object.fromEntries(
+          locales.map((locale) => [
+            locale,
+            buildUrl(baseUrl, pathname, locale, defaultLocale),
+          ])
+        ),
+      };
+    }
+
+    return entry;
+  });
+}
+
+/**
+ * Create handlers for sitemap index route
+ * Use in: app/sitemap.xml/route.ts
+ */
+export function createSitemapIndexHandler(options: CreateSitemapHandlerOptions) {
+  const { urlsPerSitemap = 5000, locales = [], defaultLocale, additionalSitemaps, exclude } = options;
+  // Auto-detect localeSegment if i18n is configured
+  const localeSegment = options.localeSegment ?? (locales.length > 0 || defaultLocale ? "[locale]" : "");
+  const routes = extractRoutes(options.pagesContext, localeSegment);
+
+  return {
+    GET: async () => {
+      const allPaths = await getAllPaths(routes);
+      // Filter excluded paths for accurate count
+      const filteredPaths = allPaths.filter((pathname) => !shouldExclude(pathname, exclude));
+      const sitemapCount = Math.max(1, Math.ceil(filteredPaths.length / urlsPerSitemap));
+      const xml = generateSitemapIndexXml(options.baseUrl, sitemapCount, {
+        additionalSitemaps,
+      });
+
+      return new Response(xml, {
+        headers: { "Content-Type": "application/xml" },
+      });
+    },
+  };
+}
+
+/**
+ * Create handlers for individual sitemap routes
+ * Use in: app/sitemap.xml/[id]/route.ts
+ */
+export function createSitemapHandler(options: CreateSitemapHandlerOptions) {
+  const { urlsPerSitemap = 5000, locales = [], defaultLocale, exclude } = options;
+  // Auto-detect localeSegment if i18n is configured
+  const localeSegment = options.localeSegment ?? (locales.length > 0 || defaultLocale ? "[locale]" : "");
+  const routes = extractRoutes(options.pagesContext, localeSegment);
+
+  // Helper to get filtered paths (excludes are applied here for pagination)
+  const getFilteredPaths = async () => {
+    const allPaths = await getAllPaths(routes);
+    return allPaths.filter((pathname) => !shouldExclude(pathname, exclude));
+  };
+
+  return {
+    generateStaticParams: async () => {
+      const filteredPaths = await getFilteredPaths();
+      const sitemapCount = Math.max(1, Math.ceil(filteredPaths.length / urlsPerSitemap));
+      return Array.from({ length: sitemapCount }, (_, i) => ({ id: String(i) }));
+    },
+
+    GET: async (
+      _request: Request,
+      { params }: { params: Promise<{ id: string }> }
+    ) => {
+      const { id } = await params;
+      const sitemapId = parseInt(id, 10);
+
+      const filteredPaths = await getFilteredPaths();
+      const start = sitemapId * urlsPerSitemap;
+      const end = start + urlsPerSitemap;
+      const paths = filteredPaths.slice(start, end);
+
+      // Note: pathsToEntries also filters, but paths are already filtered here
+      // We pass the config for priority/changeFreq calculation
+      const entries = pathsToEntries(paths, { ...options, exclude: undefined });
+      const xml = generateSitemapXml(entries);
+
+      return new Response(xml, {
+        headers: { "Content-Type": "application/xml" },
+      });
+    },
+  };
+}
+
diff --git a/packages/next-sitemap/src/index.ts b/packages/next-sitemap/src/index.ts
new file mode 100644
index 000000000..e68a628ae
--- /dev/null
+++ b/packages/next-sitemap/src/index.ts
@@ -0,0 +1,244 @@
+export type ChangeFrequency = "always" | "hourly" | "daily" | "weekly" | "monthly" | "yearly" | "never";
+
+export interface SitemapConfig {
+  /**
+   * Base URL of the site (e.g., "https://example.com")
+   */
+  baseUrl: string;
+
+  /**
+   * List of supported locales (e.g., ["en", "fr"])
+   */
+  locales?: string[];
+
+  /**
+   * Default locale (e.g., "en")
+   */
+  defaultLocale?: string;
+
+  /**
+   * Number of URLs per sitemap file (default: 5000)
+   */
+  urlsPerSitemap?: number;
+
+  /**
+   * Path to the app directory relative to the project root
+   * Default: "./src/app" or "./app"
+   */
+  appDir?: string;
+
+  /**
+   * Locale segment in the URL path (e.g., "[locale]")
+   * Auto-detected as "[locale]" when locales or defaultLocale is set
+   */
+  localeSegment?: string;
+
+  /**
+   * Exclude routes from the sitemap
+   * Can be an array of glob patterns or a function that returns true to exclude
+   * @example exclude: ["/admin/*", "/api/*"]
+   * @example exclude: (path) => path.startsWith("/private")
+   */
+  exclude?: string[] | ((path: string) => boolean);
+
+  /**
+   * Priority for sitemap entries
+   * Can be a fixed number (0.0-1.0), a function, or "auto" for depth-based calculation
+   * Default: "auto" (1.0 - depth * 0.2, minimum 0.1)
+   * @example priority: 0.8
+   * @example priority: (path) => path === "/" ? 1.0 : 0.7
+   * @example priority: "auto"
+   */
+  priority?: number | "auto" | ((path: string) => number);
+
+  /**
+   * Change frequency for sitemap entries
+   * Can be a fixed value or a function
+   * Default: "weekly"
+   * @example changeFreq: "daily"
+   * @example changeFreq: (path) => path === "/" ? "daily" : "weekly"
+   */
+  changeFreq?: ChangeFrequency | ((path: string) => ChangeFrequency);
+
+  /**
+   * Additional sitemaps to include in the sitemap index
+   * Useful for custom sitemaps (e.g., products from an API)
+   * @example additionalSitemaps: ["/products-sitemap.xml", "/blog-sitemap.xml"]
+   */
+  additionalSitemaps?: string[];
+}
+
+export interface SitemapEntry {
+  url: string;
+  lastModified?: string | Date;
+  changeFrequency?: ChangeFrequency;
+  priority?: number;
+  alternates?: {
+    languages?: Record<string, string>;
+  };
+}
+
+/**
+ * Calculate priority based on URL depth
+ * Root (/) = 1.0, /about = 0.8, /blog/post = 0.6, etc.
+ * Minimum priority is 0.1
+ */
+export function calculateDepthPriority(pathname: string): number {
+  if (pathname === "/") return 1.0;
+  const depth = pathname.split("/").filter(Boolean).length;
+  return Math.max(0.1, 1.0 - depth * 0.2);
+}
+
+/**
+ * Check if a path should be excluded based on patterns or function
+ */
+export function shouldExclude(
+  pathname: string,
+  exclude?: string[] | ((path: string) => boolean)
+): boolean {
+  if (!exclude) return false;
+
+  if (typeof exclude === "function") {
+    return exclude(pathname);
+  }
+
+  // Simple glob matching: * matches any characters, ** matches any path segments
+  return exclude.some((pattern) => {
+    const regexPattern = pattern
+      .replace(/\*\*/g, "{{DOUBLE_STAR}}")
+      .replace(/\*/g, "[^/]*")
+      .replace(/\{\{DOUBLE_STAR\}\}/g, ".*");
+    const regex = new RegExp(`^${regexPattern}$`);
+    return regex.test(pathname);
+  });
+}
+
+/**
+ * Get priority for a pathname based on config
+ */
+export function getPriority(
+  pathname: string,
+  priority?: number | "auto" | ((path: string) => number)
+): number {
+  if (priority === undefined || priority === "auto") {
+    return calculateDepthPriority(pathname);
+  }
+  if (typeof priority === "function") {
+    return priority(pathname);
+  }
+  return priority;
+}
+
+/**
+ * Get change frequency for a pathname based on config
+ */
+export function getChangeFreq(
+  pathname: string,
+  changeFreq?: ChangeFrequency | ((path: string) => ChangeFrequency)
+): ChangeFrequency {
+  if (changeFreq === undefined) {
+    return "weekly";
+  }
+  if (typeof changeFreq === "function") {
+    return changeFreq(pathname);
+  }
+  return changeFreq;
+}
+
+export interface RouteInfo {
+  pathname: string;
+  dynamicSegments: string[];
+  hasGenerateStaticParams: boolean;
+}
+
+export type PageModule = {
+  generateStaticParams?: () => Promise<Record<string, string>[]>;
+};
+
+/**
+ * Generate the full URL for a pathname
+ */
+export function buildUrl(
+  baseUrl: string,
+  pathname: string,
+  locale?: string,
+  defaultLocale?: string
+): string {
+  if (!locale || locale === defaultLocale) {
+    return `${baseUrl}${pathname}`;
+  }
+  return `${baseUrl}/${locale}${pathname}`;
+}
+
+/**
+ * Generate sitemap XML from entries
+ */
+export function generateSitemapXml(entries: SitemapEntry[]): string {
+  const hasAlternates = entries.some((e) => e.alternates?.languages);
+  const xmlns = hasAlternates
+    ? 'xmlns="http://www.sitemaps.org/schemas/sitemap/0.9" xmlns:xhtml="http://www.w3.org/1999/xhtml"'
+    : 'xmlns="http://www.sitemaps.org/schemas/sitemap/0.9"';
+
+  const urlEntries = entries
+    .map((entry) => {
+      const parts = [`    <loc>${entry.url}</loc>`];
+
+      if (entry.alternates?.languages) {
+        for (const [lang, href] of Object.entries(entry.alternates.languages)) {
+          parts.push(`    <xhtml:link rel="alternate" hreflang="${lang}" href="${href}" />`);
+        }
+      }
+
+      if (entry.lastModified) {
+        const date =
+          entry.lastModified instanceof Date
+            ? entry.lastModified.toISOString()
+            : entry.lastModified;
+        parts.push(`    <lastmod>${date}</lastmod>`);
+      }
+
+      if (entry.changeFrequency) {
+        parts.push(`    <changefreq>${entry.changeFrequency}</changefreq>`);
+      }
+
+      if (entry.priority !== undefined) {
+        parts.push(`    <priority>${entry.priority}</priority>`);
+      }
+
+      return `  <url>\n${parts.join("\n")}\n  </url>`;
+    })
+    .join("\n");
+
+  return `<?xml version="1.0" encoding="UTF-8"?>\n<urlset ${xmlns}>\n${urlEntries}\n</urlset>`;
+}
+
+/**
+ * Generate sitemap index XML
+ */
+export function generateSitemapIndexXml(
+  baseUrl: string,
+  sitemapCount: number,
+  options?: {
+    sitemapPattern?: string;
+    additionalSitemaps?: string[];
+  }
+): string {
+  const { sitemapPattern = "/sitemap-{id}.xml", additionalSitemaps = [] } = options || {};
+  const now = new Date().toISOString();
+
+  // Generate entries for paginated sitemaps
+  const paginatedEntries = Array.from({ length: sitemapCount }, (_, i) => {
+    const loc = `${baseUrl}${sitemapPattern.replace("{id}", String(i))}`;
+    return `  <sitemap>\n    <loc>${loc}</loc>\n    <lastmod>${now}</lastmod>\n  </sitemap>`;
+  });
+
+  // Generate entries for additional sitemaps
+  const additionalEntries = additionalSitemaps.map((sitemap) => {
+    const loc = sitemap.startsWith("http") ? sitemap : `${baseUrl}${sitemap}`;
+    return `  <sitemap>\n    <loc>${loc}</loc>\n    <lastmod>${now}</lastmod>\n  </sitemap>`;
+  });
+
+  const allEntries = [...paginatedEntries, ...additionalEntries].join("\n");
+
+  return `<?xml version="1.0" encoding="UTF-8"?>\n<sitemapindex xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">\n${allEntries}\n</sitemapindex>`;
+}
diff --git a/packages/next-sitemap/tsconfig.json b/packages/next-sitemap/tsconfig.json
new file mode 100644
index 000000000..be25a46a4
--- /dev/null
+++ b/packages/next-sitemap/tsconfig.json
@@ -0,0 +1,17 @@
+{
+  "compilerOptions": {
+    "target": "ES2020",
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "declaration": true,
+    "declarationMap": true,
+    "strict": true,
+    "esModuleInterop": true,
+    "skipLibCheck": true,
+    "forceConsistentCasingInFileNames": true,
+    "outDir": "dist",
+    "rootDir": "src"
+  },
+  "include": ["src/**/*"],
+  "exclude": ["node_modules", "dist"]
+}
diff --git a/packages/next-sitemap/tsup.config.ts b/packages/next-sitemap/tsup.config.ts
new file mode 100644
index 000000000..5fce7899c
--- /dev/null
+++ b/packages/next-sitemap/tsup.config.ts
@@ -0,0 +1,26 @@
+import { defineConfig } from "tsup";
+
+export default defineConfig([
+  // Main entry - core types and functions
+  {
+    entry: {
+      index: "src/index.ts",
+    },
+    format: ["esm", "cjs"],
+    dts: true,
+    clean: true,
+    splitting: false,
+    treeshake: true,
+  },
+  // Next.js App Router integration
+  {
+    entry: {
+      "app/index": "src/app/index.ts",
+    },
+    format: ["esm", "cjs"],
+    dts: true,
+    external: ["next", "@onruntime/next-sitemap"],
+    splitting: false,
+    treeshake: true,
+  },
+]);
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 0376e5162..12a235527 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -29,6 +29,9 @@ importers:
       '@next/mdx':
         specifier: ^16.1.1
         version: 16.1.1(@mdx-js/loader@3.1.1)(@mdx-js/react@3.1.1(@types/react@19.2.7)(react@19.2.3))
+      '@onruntime/next-sitemap':
+        specifier: workspace:*
+        version: link:../../packages/next-sitemap
       '@onruntime/translations':
         specifier: workspace:*
         version: link:../../packages/translations
@@ -95,9 +98,6 @@ importers:
       next-seo:
         specifier: ^6.6.0
         version: 6.8.0(next@16.1.1(react-dom@19.2.3(react@19.2.3))(react@19.2.3))(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
-      next-sitemap:
-        specifier: ^4.2.3
-        version: 4.2.3(next@16.1.1(react-dom@19.2.3(react@19.2.3))(react@19.2.3))
       react:
         specifier: ^19.0.0
         version: 19.2.3
@@ -151,6 +151,31 @@ importers:
         specifier: ^5
         version: 5.9.3
 
+  examples/next-sitemap/app:
+    dependencies:
+      '@onruntime/next-sitemap':
+        specifier: workspace:*
+        version: link:../../../packages/next-sitemap
+      next:
+        specifier: ^16.1.1
+        version: 16.1.1(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
+      react:
+        specifier: ^19.1.0
+        version: 19.2.3
+      react-dom:
+        specifier: ^19.1.0
+        version: 19.2.3(react@19.2.3)
+    devDependencies:
+      '@types/node':
+        specifier: ^22
+        version: 22.19.3
+      '@types/react':
+        specifier: ^19
+        version: 19.2.7
+      typescript:
+        specifier: ^5
+        version: 5.9.3
+
   examples/translations/next-app:
     dependencies:
       '@onruntime/translations':
@@ -235,6 +260,21 @@ importers:
         specifier: ^6.0.0
         version: 6.4.1(@types/node@25.0.3)(jiti@1.21.7)(yaml@2.8.2)
 
+  packages/next-sitemap:
+    devDependencies:
+      '@types/node':
+        specifier: ^22.0.0
+        version: 22.19.3
+      next:
+        specifier: ^16.1.1
+        version: 16.1.1(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
+      tsup:
+        specifier: ^8
+        version: 8.5.1(jiti@1.21.7)(postcss@8.5.6)(typescript@5.9.3)(yaml@2.8.2)
+      typescript:
+        specifier: ^5
+        version: 5.9.3
+
   packages/translations:
     devDependencies:
       '@types/node':
@@ -345,9 +385,6 @@ packages:
     resolution: {integrity: sha512-qQ5m48eI/MFLQ5PxQj4PFaprjyCTLI37ElWMmNs0K8Lk3dVeOdNpB3ks8jc7yM5CDmVC73eMVk/trk3fgmrUpA==}
     engines: {node: '>=6.9.0'}
 
-  '@corex/deepmerge@4.0.43':
-    resolution: {integrity: sha512-N8uEMrMPL0cu/bdboEWpQYb/0i2K5Qn8eCsxzOmxSggJbbQte7ljMRoXm917AbntqTGOzdTu+vP3KOOzoC70HQ==}
-
   '@emnapi/runtime@1.7.1':
     resolution: {integrity: sha512-PVtJr5CmLwYAU9PZDMITZoR5iAOShYREoR45EyyLrbntV50mdePTgUn4AmOw90Ifcj+x2kRjdzr1HP3RrNiHGA==}
 
@@ -856,9 +893,6 @@ packages:
       '@types/react': '>=16'
       react: '>=16'
 
-  '@next/env@13.5.11':
-    resolution: {integrity: sha512-fbb2C7HChgM7CemdCY+y3N1n8pcTKdqtQLbC7/EQtPdLvlMUT9JX/dBYl8MMZAtYG4uVMyPFHXckb68q/NRwqg==}
-
   '@next/env@16.1.1':
     resolution: {integrity: sha512-3oxyM97Sr2PqiVyMyrZUtrtM3jqqFxOQJVuKclDsgj/L728iZt/GyslkN4NwarledZATCenbk4Offjk1hQmaAA==}
 
@@ -2175,9 +2209,6 @@ packages:
     resolution: {integrity: sha512-PXwfBhYu0hBCPw8Dn0E+WDYb7af3dSLVWKi3HGv84IdF4TyFoC0ysxFd0Goxw7nSv4T/PzEJQxsYsEiFCKo2BA==}
     engines: {node: '>=8.6'}
 
-  minimist@1.2.8:
-    resolution: {integrity: sha512-2yyAR8qBkN3YuheJanUpWC5U3bb5osDywNB8RzDVlDwDHbocAJveqqj1u8+SVD7jkWT4yvsHCpWqqWqAxb0zCA==}
-
   mlly@1.8.0:
     resolution: {integrity: sha512-l8D9ODSRWLe2KHJSifWGwBqpTZXIXTeo8mlKjY+E2HAakaTeNpqAyBZ8GSqLzHgw4XmHmC8whvpjJNMbFZN7/g==}
 
@@ -2232,13 +2263,6 @@ packages:
       react: '>=16.0.0'
       react-dom: '>=16.0.0'
 
-  next-sitemap@4.2.3:
-    resolution: {integrity: sha512-vjdCxeDuWDzldhCnyFCQipw5bfpl4HmZA7uoo3GAaYGjGgfL4Cxb1CiztPuWGmS+auYs7/8OekRS8C2cjdAsjQ==}
-    engines: {node: '>=14.18'}
-    hasBin: true
-    peerDependencies:
-      next: '*'
-
   next@16.1.1:
     resolution: {integrity: sha512-QI+T7xrxt1pF6SQ/JYFz95ro/mg/1Znk5vBebsWwbpejj1T0A23hO7GYEaVac9QUOT2BIMiuzm0L99ooq7k0/w==}
     engines: {node: '>=20.9.0'}
@@ -2967,8 +2991,6 @@ snapshots:
       '@babel/helper-string-parser': 7.27.1
       '@babel/helper-validator-identifier': 7.28.5
 
-  '@corex/deepmerge@4.0.43': {}
-
   '@emnapi/runtime@1.7.1':
     dependencies:
       tslib: 2.8.1
@@ -3313,8 +3335,6 @@ snapshots:
       '@types/react': 19.2.7
       react: 19.2.3
 
-  '@next/env@13.5.11': {}
-
   '@next/env@16.1.1': {}
 
   '@next/mdx@16.1.1(@mdx-js/loader@3.1.1)(@mdx-js/react@3.1.1(@types/react@19.2.7)(react@19.2.3))':
@@ -4751,8 +4771,6 @@ snapshots:
       braces: 3.0.3
       picomatch: 2.3.1
 
-  minimist@1.2.8: {}
-
   mlly@1.8.0:
     dependencies:
       acorn: 8.15.0
@@ -4819,14 +4837,6 @@ snapshots:
       react: 19.2.3
       react-dom: 19.2.3(react@19.2.3)
 
-  next-sitemap@4.2.3(next@16.1.1(react-dom@19.2.3(react@19.2.3))(react@19.2.3)):
-    dependencies:
-      '@corex/deepmerge': 4.0.43
-      '@next/env': 13.5.11
-      fast-glob: 3.3.3
-      minimist: 1.2.8
-      next: 16.1.1(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
-
   next@16.1.1(react-dom@19.2.3(react@19.2.3))(react@19.2.3):
     dependencies:
       '@next/env': 16.1.1

From 94b0075f1a30fb402b0641560214307885ee9bfa Mon Sep 17 00:00:00 2001
From: Antoine Kingue <etorefr@gmail.com>
Date: Wed, 31 Dec 2025 00:57:27 +0100
Subject: [PATCH 63/64] =?UTF-8?q?=E2=9C=A8=20add=20changesets?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .changeset/add-sitemap-options.md |  10 +
 .changeset/config.json            |  11 +
 package.json                      |   6 +-
 pnpm-lock.yaml                    | 623 +++++++++++++++++++++++++++++-
 4 files changed, 647 insertions(+), 3 deletions(-)
 create mode 100644 .changeset/add-sitemap-options.md
 create mode 100644 .changeset/config.json

diff --git a/.changeset/add-sitemap-options.md b/.changeset/add-sitemap-options.md
new file mode 100644
index 000000000..02e9118bd
--- /dev/null
+++ b/.changeset/add-sitemap-options.md
@@ -0,0 +1,10 @@
+---
+"@onruntime/next-sitemap": minor
+---
+
+Add new configuration options for sitemap generation:
+
+- `exclude`: Filter out routes using glob patterns or a function
+- `priority`: Automatic depth-based priority calculation (or custom function)
+- `changeFreq`: Set change frequency per route
+- `additionalSitemaps`: Include custom sitemaps in the sitemap index
diff --git a/.changeset/config.json b/.changeset/config.json
new file mode 100644
index 000000000..e422b8917
--- /dev/null
+++ b/.changeset/config.json
@@ -0,0 +1,11 @@
+{
+  "$schema": "https://unpkg.com/@changesets/config@3.1.2/schema.json",
+  "changelog": "@changesets/cli/changelog",
+  "commit": false,
+  "fixed": [],
+  "linked": [],
+  "access": "public",
+  "baseBranch": "master",
+  "updateInternalDependencies": "patch",
+  "ignore": ["@onruntime/web"]
+}
diff --git a/package.json b/package.json
index 24916cbd5..9a8a78771 100644
--- a/package.json
+++ b/package.json
@@ -6,9 +6,13 @@
     "build": "turbo run build",
     "start": "turbo run start",
     "lint": "turbo run lint",
-    "type-check": "turbo run type-check"
+    "type-check": "turbo run type-check",
+    "changeset": "changeset",
+    "version": "changeset version",
+    "release": "pnpm build && changeset publish"
   },
   "devDependencies": {
+    "@changesets/cli": "^2.29.8",
     "turbo": "^2"
   },
   "packageManager": "pnpm@10.26.2+sha512.0e308ff2005fc7410366f154f625f6631ab2b16b1d2e70238444dd6ae9d630a8482d92a451144debc492416896ed16f7b114a86ec68b8404b2443869e68ffda6"
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 12a235527..d222124b2 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -8,6 +8,9 @@ importers:
 
   .:
     devDependencies:
+      '@changesets/cli':
+        specifier: ^2.29.8
+        version: 2.29.8(@types/node@25.0.3)
       turbo:
         specifier: ^2
         version: 2.7.2
@@ -373,6 +376,10 @@ packages:
     peerDependencies:
       '@babel/core': ^7.0.0-0
 
+  '@babel/runtime@7.28.4':
+    resolution: {integrity: sha512-Q/N6JNWvIvPnLDvjlE1OUBLPQHH6l3CltCEsHIujp45zQUSSh8K+gHnaEX45yAT1nyngnINhvWtzN+Nb9D8RAQ==}
+    engines: {node: '>=6.9.0'}
+
   '@babel/template@7.27.2':
     resolution: {integrity: sha512-LPDZ85aEJyYSd18/DkjNh4/y1ntkE5KwUHWTiqgRxruuZL2F1yuHligVHLvcHY2vMHXttKFpJn6LwfI7cw7ODw==}
     engines: {node: '>=6.9.0'}
@@ -385,6 +392,61 @@ packages:
     resolution: {integrity: sha512-qQ5m48eI/MFLQ5PxQj4PFaprjyCTLI37ElWMmNs0K8Lk3dVeOdNpB3ks8jc7yM5CDmVC73eMVk/trk3fgmrUpA==}
     engines: {node: '>=6.9.0'}
 
+  '@changesets/apply-release-plan@7.0.14':
+    resolution: {integrity: sha512-ddBvf9PHdy2YY0OUiEl3TV78mH9sckndJR14QAt87KLEbIov81XO0q0QAmvooBxXlqRRP8I9B7XOzZwQG7JkWA==}
+
+  '@changesets/assemble-release-plan@6.0.9':
+    resolution: {integrity: sha512-tPgeeqCHIwNo8sypKlS3gOPmsS3wP0zHt67JDuL20P4QcXiw/O4Hl7oXiuLnP9yg+rXLQ2sScdV1Kkzde61iSQ==}
+
+  '@changesets/changelog-git@0.2.1':
+    resolution: {integrity: sha512-x/xEleCFLH28c3bQeQIyeZf8lFXyDFVn1SgcBiR2Tw/r4IAWlk1fzxCEZ6NxQAjF2Nwtczoen3OA2qR+UawQ8Q==}
+
+  '@changesets/cli@2.29.8':
+    resolution: {integrity: sha512-1weuGZpP63YWUYjay/E84qqwcnt5yJMM0tep10Up7Q5cS/DGe2IZ0Uj3HNMxGhCINZuR7aO9WBMdKnPit5ZDPA==}
+    hasBin: true
+
+  '@changesets/config@3.1.2':
+    resolution: {integrity: sha512-CYiRhA4bWKemdYi/uwImjPxqWNpqGPNbEBdX1BdONALFIDK7MCUj6FPkzD+z9gJcvDFUQJn9aDVf4UG7OT6Kog==}
+
+  '@changesets/errors@0.2.0':
+    resolution: {integrity: sha512-6BLOQUscTpZeGljvyQXlWOItQyU71kCdGz7Pi8H8zdw6BI0g3m43iL4xKUVPWtG+qrrL9DTjpdn8eYuCQSRpow==}
+
+  '@changesets/get-dependents-graph@2.1.3':
+    resolution: {integrity: sha512-gphr+v0mv2I3Oxt19VdWRRUxq3sseyUpX9DaHpTUmLj92Y10AGy+XOtV+kbM6L/fDcpx7/ISDFK6T8A/P3lOdQ==}
+
+  '@changesets/get-release-plan@4.0.14':
+    resolution: {integrity: sha512-yjZMHpUHgl4Xl5gRlolVuxDkm4HgSJqT93Ri1Uz8kGrQb+5iJ8dkXJ20M2j/Y4iV5QzS2c5SeTxVSKX+2eMI0g==}
+
+  '@changesets/get-version-range-type@0.4.0':
+    resolution: {integrity: sha512-hwawtob9DryoGTpixy1D3ZXbGgJu1Rhr+ySH2PvTLHvkZuQ7sRT4oQwMh0hbqZH1weAooedEjRsbrWcGLCeyVQ==}
+
+  '@changesets/git@3.0.4':
+    resolution: {integrity: sha512-BXANzRFkX+XcC1q/d27NKvlJ1yf7PSAgi8JG6dt8EfbHFHi4neau7mufcSca5zRhwOL8j9s6EqsxmT+s+/E6Sw==}
+
+  '@changesets/logger@0.1.1':
+    resolution: {integrity: sha512-OQtR36ZlnuTxKqoW4Sv6x5YIhOmClRd5pWsjZsddYxpWs517R0HkyiefQPIytCVh4ZcC5x9XaG8KTdd5iRQUfg==}
+
+  '@changesets/parse@0.4.2':
+    resolution: {integrity: sha512-Uo5MC5mfg4OM0jU3up66fmSn6/NE9INK+8/Vn/7sMVcdWg46zfbvvUSjD9EMonVqPi9fbrJH9SXHn48Tr1f2yA==}
+
+  '@changesets/pre@2.0.2':
+    resolution: {integrity: sha512-HaL/gEyFVvkf9KFg6484wR9s0qjAXlZ8qWPDkTyKF6+zqjBe/I2mygg3MbpZ++hdi0ToqNUF8cjj7fBy0dg8Ug==}
+
+  '@changesets/read@0.6.6':
+    resolution: {integrity: sha512-P5QaN9hJSQQKJShzzpBT13FzOSPyHbqdoIBUd2DJdgvnECCyO6LmAOWSV+O8se2TaZJVwSXjL+v9yhb+a9JeJg==}
+
+  '@changesets/should-skip-package@0.1.2':
+    resolution: {integrity: sha512-qAK/WrqWLNCP22UDdBTMPH5f41elVDlsNyat180A33dWxuUDyNpg6fPi/FyTZwRriVjg0L8gnjJn2F9XAoF0qw==}
+
+  '@changesets/types@4.1.0':
+    resolution: {integrity: sha512-LDQvVDv5Kb50ny2s25Fhm3d9QSZimsoUGBsUioj6MC3qbMUCuC8GPIvk/M6IvXx3lYhAs0lwWUQLb+VIEUCECw==}
+
+  '@changesets/types@6.1.0':
+    resolution: {integrity: sha512-rKQcJ+o1nKNgeoYRHKOS07tAMNd3YSN0uHaJOZYjBAgxfV7TUE7JE+z4BzZdQwb5hKaYbayKN5KrYV7ODb2rAA==}
+
+  '@changesets/write@0.4.0':
+    resolution: {integrity: sha512-CdTLvIOPiCNuH71pyDu3rA+Q0n65cmAbXnwWH84rKGiFumFzkmHNT8KHTMEchcxN+Kl8I54xGUhJ7l3E7X396Q==}
+
   '@emnapi/runtime@1.7.1':
     resolution: {integrity: sha512-PVtJr5CmLwYAU9PZDMITZoR5iAOShYREoR45EyyLrbntV50mdePTgUn4AmOw90Ifcj+x2kRjdzr1HP3RrNiHGA==}
 
@@ -860,6 +922,15 @@ packages:
     cpu: [x64]
     os: [win32]
 
+  '@inquirer/external-editor@1.0.3':
+    resolution: {integrity: sha512-RWbSrDiYmO4LbejWY7ttpxczuwQyZLBUyygsA9Nsv95hpzUWwnNTVQmAq3xuh7vNwCp07UTmE5i11XAEExx4RA==}
+    engines: {node: '>=18'}
+    peerDependencies:
+      '@types/node': '>=18'
+    peerDependenciesMeta:
+      '@types/node':
+        optional: true
+
   '@jridgewell/gen-mapping@0.3.13':
     resolution: {integrity: sha512-2kkt/7niJ6MgEPxF0bYdQ6etZaA+fQvDcLKckhy1yIQOzaoKjBBjSj63/aLVjYE3qhRt5dvM+uUyfCg6UKCBbA==}
 
@@ -876,6 +947,12 @@ packages:
   '@jridgewell/trace-mapping@0.3.31':
     resolution: {integrity: sha512-zzNR+SdQSDJzc8joaeP8QQoCQr8NuYx2dIIytl1QeBEZHJ9uW6hebsrYgbz8hJwUQao3TWCMtmfV8Nu1twOLAw==}
 
+  '@manypkg/find-root@1.1.0':
+    resolution: {integrity: sha512-mki5uBvhHzO8kYYix/WRy2WX8S3B5wdVSc9D6KcU5lQNglP2yt58/VfLuAK49glRXChosY8ap2oJ1qgma3GUVA==}
+
+  '@manypkg/get-packages@1.1.3':
+    resolution: {integrity: sha512-fo+QhuU3qE/2TQMQmbVMqaQ6EWbMhi4ABWP+O4AM1NqPBuy0OrApV5LO6BrrgnhtAHS2NH6RrVk9OL181tTi8A==}
+
   '@mdx-js/loader@3.1.1':
     resolution: {integrity: sha512-0TTacJyZ9mDmY+VefuthVshaNIyCGZHJG2fMnGaDttCt8HmjUF7SizlHJpaCDoGnN635nK1wpzfpx/Xx5S4WnQ==}
     peerDependencies:
@@ -1547,6 +1624,9 @@ packages:
   '@types/ms@2.1.0':
     resolution: {integrity: sha512-GsCCIZDE/p3i96vtEqx+7dBUGXrc7zeSK3wwPHIaRThS+9OhWIXRqzs4d6k1SVU8g91DrNRWxWUGhp5KXQb2VA==}
 
+  '@types/node@12.20.55':
+    resolution: {integrity: sha512-J8xLz7q2OFulZ2cyGTLE1TbbZcjpno7FaN6zdJNrgAdrJ+DZzh/uFR6YrTb4C+nXakvud8Q4+rbhoIWlYQbUFQ==}
+
   '@types/node@22.19.3':
     resolution: {integrity: sha512-1N9SBnWYOJTrNZCdh/yJE+t910Y128BoyY+zBLWhL3r0TYzlTmFdXrPwHL9DyFZmlEXNQQolTZh3KHV31QDhyA==}
 
@@ -1613,6 +1693,14 @@ packages:
     engines: {node: '>=0.4.0'}
     hasBin: true
 
+  ansi-colors@4.1.3:
+    resolution: {integrity: sha512-/6w/C21Pm1A7aZitlI5Ni/2J6FFQN8i1Cvz3kHABAAbw93v/NlvKdVOqz7CCWz/3iv/JplRSEEZ83XION15ovw==}
+    engines: {node: '>=6'}
+
+  ansi-regex@5.0.1:
+    resolution: {integrity: sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==}
+    engines: {node: '>=8'}
+
   any-promise@1.3.0:
     resolution: {integrity: sha512-7UvmKalWRt1wgjL1RrGxoSJW/0QZFIegpeGvZG9kjp8vrRu55XTHbwnqq2GpXm9uLbcuhxm3IqX9OB4MZR1b2A==}
 
@@ -1626,10 +1714,17 @@ packages:
   argparse@1.0.10:
     resolution: {integrity: sha512-o5Roy6tNG4SL/FOkCAN6RzjiakZS25RLYFrcMttJqbdd8BWrnA+fGz57iN5Pb06pvBGvl5gQ0B48dJlslXvoTg==}
 
+  argparse@2.0.1:
+    resolution: {integrity: sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q==}
+
   aria-hidden@1.2.6:
     resolution: {integrity: sha512-ik3ZgC9dY/lYVVM++OISsaYDeg1tb0VtP5uL3ouh1koGOaUMDPpbFIei4JkFimWUFPn90sbMNMXQAIVOlnYKJA==}
     engines: {node: '>=10'}
 
+  array-union@2.1.0:
+    resolution: {integrity: sha512-HGyxoOTYUyCM6stUe6EJgnd4EoewAI7zMdfqO+kGjnlZmBDz/cR5pf8r/cR4Wq60sL/p0IkcjUEEPwS3GFrIyw==}
+    engines: {node: '>=8'}
+
   astring@1.9.0:
     resolution: {integrity: sha512-LElXdjswlqjWrPpJFg1Fx4wpkOCxj1TDHlSV4PlaRxHGWko024xICaa97ZkMfs6DRKlCguiAI+rbXv5GWwXIkg==}
     hasBin: true
@@ -1652,6 +1747,10 @@ packages:
     resolution: {integrity: sha512-Sg0xJUNDU1sJNGdfGWhVHX0kkZ+HWcvmVymJbj6NSgZZmW/8S9Y2HQ5euytnIgakgxN6papOAWiwDo1ctFDcoQ==}
     hasBin: true
 
+  better-path-resolve@1.0.0:
+    resolution: {integrity: sha512-pbnl5XzGBdrFU/wT4jqmJVPn2B6UHPBOhzMQkY/SPUPB6QtUXtmBHBIwCbXJol93mOpGMnQyP/+BB19q04xj7g==}
+    engines: {node: '>=4'}
+
   binary-extensions@2.3.0:
     resolution: {integrity: sha512-Ceh+7ox5qe7LJuLHoY0feh3pHuUDHAcRUeyL2VYghZwfpkNIy/+8Ocg0a3UuSoYzavmylwuLWQOf3hl0jjMMIw==}
     engines: {node: '>=8'}
@@ -1700,6 +1799,9 @@ packages:
   character-reference-invalid@2.0.1:
     resolution: {integrity: sha512-iBZ4F4wRbyORVsu0jPV7gXkOsGYjGHPmAyv+HiHG8gi5PtC9KI2j1+v8/tlibRvjoWX027ypmG/n0HtO5t7unw==}
 
+  chardet@2.1.1:
+    resolution: {integrity: sha512-PsezH1rqdV9VvyNhxxOW32/d75r01NY7TQCmOqomRo15ZSOKbpTFVsfjghxo6JloQUCGnH4k1LGu0R4yCLlWQQ==}
+
   chokidar@3.6.0:
     resolution: {integrity: sha512-7VT13fmjotKpGipCW9JEQAusEPE+Ei8nl6/g4FBAmIm0GOOLMua9NDDo/DWp0ZAxCr3cPq5ZpBqmPAQgDda2Pw==}
     engines: {node: '>= 8.10.0'}
@@ -1708,6 +1810,10 @@ packages:
     resolution: {integrity: sha512-Qgzu8kfBvo+cA4962jnP1KkS6Dop5NS6g7R5LFYJr4b8Ub94PPQXUksCw9PvXoeXPRRddRNC5C1JQUR2SMGtnA==}
     engines: {node: '>= 14.16.0'}
 
+  ci-info@3.9.0:
+    resolution: {integrity: sha512-NIxF55hv4nSqQswkAeiOi1r83xy8JldOFDTWiug55KBu9Jnblncd2U6ViHmYgHf01TPZS77NJBhBMKdWj9HQMQ==}
+    engines: {node: '>=8'}
+
   class-variance-authority@0.7.1:
     resolution: {integrity: sha512-Ka+9Trutv7G8M6WT6SeiRWz792K5qEqIGEGzXKhAE6xOWAY6pPH8U+9IY3oCMv6kqTmLsv7Xh/2w2RigkePMsg==}
 
@@ -1741,6 +1847,10 @@ packages:
   convert-source-map@2.0.0:
     resolution: {integrity: sha512-Kvp459HrV2FEJ1CAsi1Ku+MY3kasH19TFykTz2xWmMeq6bk2NU3XXvfJ+Q61m0xktWwt+1HSYf3JZsTms3aRJg==}
 
+  cross-spawn@7.0.6:
+    resolution: {integrity: sha512-uV2QOWP2nWzsy2aMp8aRibhi9dlzF5Hgh5SHaB9OiTGEyDTiJJyx0uy51QXdyWbtAHNua4XJzUKca3OzKUd3vA==}
+    engines: {node: '>= 8'}
+
   css-background-parser@0.1.0:
     resolution: {integrity: sha512-2EZLisiZQ+7m4wwur/qiYJRniHX4K5Tc9w93MT3AS0WS1u5kaZ4FKXlOTBhOjc+CgEgPiGY+fX1yWD8UwpEqUA==}
 
@@ -1786,6 +1896,10 @@ packages:
     resolution: {integrity: sha512-0je+qPKHEMohvfRTCEo3CrPG6cAzAYgmzKyxRiYSSDkS6eGJdyVJm7WaYA5ECaAD9wLB2T4EEeymA5aFVcYXCA==}
     engines: {node: '>=6'}
 
+  detect-indent@6.1.0:
+    resolution: {integrity: sha512-reYkTUJAZb9gUuZ2RvVCNhVHdg62RHnJ7WJl8ftMi4diZ6NWlciOzQN88pUhSELEwflJht4oQDv0F0BMlwaYtA==}
+    engines: {node: '>=8'}
+
   detect-libc@2.1.2:
     resolution: {integrity: sha512-Btj2BOOO83o3WyH59e8MgXsxEQVcarkUOpEYrubB0urwnN10yQ364rsiByU11nZlqWYZm05i/of7io4mzihBtQ==}
     engines: {node: '>=8'}
@@ -1799,6 +1913,10 @@ packages:
   didyoumean@1.2.2:
     resolution: {integrity: sha512-gxtyfqMg7GKyhQmb056K7M3xszy/myH8w+B4RT+QXBQsvAOdc3XymqDDPHx1BgPgsdAA5SIifona89YtRATDzw==}
 
+  dir-glob@3.0.1:
+    resolution: {integrity: sha512-WkrWp9GR4KXfKGYzOLmTuGVi1UWFfws377n9cc55/tb6DuqyF6pcQ5AbiHEshaDpY9v6oaSr2XCDidGmMwdzIA==}
+    engines: {node: '>=8'}
+
   dlv@1.1.3:
     resolution: {integrity: sha512-+HlytyjlPKnIG8XuRG8WvmBP8xs8P71y+SKKS6ZXWoEgLuePxtDoUEiH7WkdePWrQ5JBpE6aoVqfZfJUQkjXwA==}
 
@@ -1822,6 +1940,10 @@ packages:
     resolution: {integrity: sha512-1QFuh8l7LqUcKe24LsPUNzjrzJQ7pgRwp1QMcZ5MX6mFplk2zQ08NVCM84++1cveaUUYtcCYHmeFEuNg16sU4g==}
     engines: {node: '>=10.0.0'}
 
+  enquirer@2.4.1:
+    resolution: {integrity: sha512-rRqJg/6gd538VHvR3PSrdRBb/1Vy2YfzHqzvbhGIQpDRKIa4FgV/54b5Q1xYSxOOwKvjXweS26E0Q+nAMwp2pQ==}
+    engines: {node: '>=8.6'}
+
   entities@4.5.0:
     resolution: {integrity: sha512-V0hjH4dGPh9Ao5p0MoRY6BVqtwCjhz6vI5LT8AJ55H+4g9/4vbHx1I54fS0XuclLhDHArPQCiMjDxjaL8fPxhw==}
     engines: {node: '>=0.12'}
@@ -1882,6 +2004,9 @@ packages:
   extend@3.0.2:
     resolution: {integrity: sha512-fjquC59cD7CyW6urNXK0FBufkZcoiGG80wTuPujX590cB5Ttln20E2UB4S/WARVqhXffZl2LNgS+gQdPIIim/g==}
 
+  extendable-error@0.1.7:
+    resolution: {integrity: sha512-UOiS2in6/Q0FK0R0q6UY9vYpQ21mr/Qn1KOnte7vsACuNJf514WvCCUHSRCPcgjPT2bAhNIJdlE6bVap1GKmeg==}
+
   fast-deep-equal@2.0.1:
     resolution: {integrity: sha512-bCK/2Z4zLidyB4ReuIsvALH6w31YfAQDmXMqMx6FyfHqvBxtjC0eRumeSu4Bs3XtXwpyIywtSTrVT99BxY1f9w==}
 
@@ -1908,6 +2033,10 @@ packages:
     resolution: {integrity: sha512-YsGpe3WHLK8ZYi4tWDg2Jy3ebRz2rXowDxnld4bkQB00cc/1Zw9AWnC0i9ztDJitivtQvaI9KaLyKrc+hBW0yg==}
     engines: {node: '>=8'}
 
+  find-up@4.1.0:
+    resolution: {integrity: sha512-PpOwAdQ/YlXQ2vj8a3h8IipDuYRi3wceVQQGYWxNINccq40Anw7BlsEXCMbt1Zt+OLA6Fq9suIpIWD0OsnISlw==}
+    engines: {node: '>=8'}
+
   fix-dts-default-cjs-exports@1.0.1:
     resolution: {integrity: sha512-pVIECanWFC61Hzl2+oOCtoJ3F17kglZC/6N94eRWycFgBH35hHx0Li604ZIzhseh97mf2p0cv7vVrOZGoqhlEg==}
 
@@ -1928,6 +2057,14 @@ packages:
       react-dom:
         optional: true
 
+  fs-extra@7.0.1:
+    resolution: {integrity: sha512-YJDaCJZEnBmcbw13fvdAM9AwNOJwOzrE4pqMqBq5nFiEqXUqHwlK4B+3pUw6JNvfSPtX05xFHtYy/1ni01eGCw==}
+    engines: {node: '>=6 <7 || >=8'}
+
+  fs-extra@8.1.0:
+    resolution: {integrity: sha512-yhlQgA6mnOJUKOsRUFsgJdQCvkKhcz8tlZG5HBQfReYZy46OwLcY+Zia0mtdHsOo9y/hP+CxMN0TU9QxoOtG4g==}
+    engines: {node: '>=6 <7 || >=8'}
+
   fsevents@2.3.3:
     resolution: {integrity: sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==}
     engines: {node: ^8.16.0 || ^10.6.0 || >=11.0.0}
@@ -1952,6 +2089,13 @@ packages:
     resolution: {integrity: sha512-XxwI8EOhVQgWp6iDL+3b0r86f4d6AX6zSU55HfB4ydCEuXLXc5FcYeOu+nnGftS4TEju/11rt4KJPTMgbfmv4A==}
     engines: {node: '>=10.13.0'}
 
+  globby@11.1.0:
+    resolution: {integrity: sha512-jhIXaOzy1sb8IyocaruWSn1TjmnBVs8Ayhcy83rmxNJ8q2uWKCAj3CnJY+KpGSXCueAPc0i05kVvVKtP1t9S3g==}
+    engines: {node: '>=10'}
+
+  graceful-fs@4.2.11:
+    resolution: {integrity: sha512-RbJ5/jmFcNNCcDV5o9eTnBLJ/HszWV0P73bc+Ff4nS/rJj+YaS6IGyiOL0VoBYX+l1Wrl3k63h/KrH+nhJ0XvQ==}
+
   gray-matter@4.0.3:
     resolution: {integrity: sha512-5v6yZd4JK3eMI3FqqCouswVqwugaA9r4dNZB1wwcmrD02QkV5H0y7XBQW8QwQqEaZY1pM9aqORSORhJRdNK44Q==}
     engines: {node: '>=6.0'}
@@ -1980,6 +2124,18 @@ packages:
   htmlparser2@8.0.2:
     resolution: {integrity: sha512-GYdjWKDkbRLkZ5geuHs5NY1puJ+PXwP7+fHPRz06Eirsb9ugf6d8kkXav6ADhcODhFFPMIXyxkxSuMf3D6NCFA==}
 
+  human-id@4.1.3:
+    resolution: {integrity: sha512-tsYlhAYpjCKa//8rXZ9DqKEawhPoSytweBC2eNvcaDK+57RZLHGqNs3PZTQO6yekLFSuvA6AlnAfrw1uBvtb+Q==}
+    hasBin: true
+
+  iconv-lite@0.7.1:
+    resolution: {integrity: sha512-2Tth85cXwGFHfvRgZWszZSvdo+0Xsqmw8k8ZwxScfcBneNUraK+dxRxRm24nszx80Y0TVio8kKLt5sLE7ZCLlw==}
+    engines: {node: '>=0.10.0'}
+
+  ignore@5.3.2:
+    resolution: {integrity: sha512-hsBTNUqQTDwkWtcdYI2i06Y/nUBEsNEDJKjWdigLvegy8kDuJAS8uRlpkkcQpyEXL0Z/pjDy5HBmMjRCJ2gq+g==}
+    engines: {node: '>= 4'}
+
   inline-style-parser@0.2.7:
     resolution: {integrity: sha512-Nb2ctOyNR8DqQoR0OwRG95uNWIC0C1lCgf5Naz5H6Ji72KZ8OcFZLz2P5sNgwlyoJ8Yif11oMuYs5pBQa86csA==}
 
@@ -2023,6 +2179,17 @@ packages:
     resolution: {integrity: sha512-+Pgi+vMuUNkJyExiMBt5IlFoMyKnr5zhJ4Uspz58WOhBF5QoIZkFyNHIbBAtHwzVAgk5RtndVNsDRN61/mmDqg==}
     engines: {node: '>=12'}
 
+  is-subdir@1.2.0:
+    resolution: {integrity: sha512-2AT6j+gXe/1ueqbW6fLZJiIw3F8iXGJtt0yDrZaBhAZEG1raiTxKWU+IPqMCzQAXOUCKdA4UDMgacKH25XG2Cw==}
+    engines: {node: '>=4'}
+
+  is-windows@1.0.2:
+    resolution: {integrity: sha512-eXK1UInq2bPmjyX6e3VHIzMLobc4J94i4AWn+Hpq3OU5KkrRC96OAcR3PRJ/pGu6m8TRnBHP9dkXQVsT/COVIA==}
+    engines: {node: '>=0.10.0'}
+
+  isexe@2.0.0:
+    resolution: {integrity: sha512-RHxMLp9lnKHGHRng9QFhRCMbYAcVpn69smSGcq3f36xjgVVWThj4qqLbTLlq7Ssj8B+fIQ1EuCEGI2lKsyQeIw==}
+
   jiti@1.21.7:
     resolution: {integrity: sha512-/imKNG4EbWNrVjoNC/1H5/9GFy+tqjGBHCaSsN+P2RnPqjsLmv6UD3Ej+Kj8nBWaRAwyk7kK5ZUc+OEatnTR3A==}
     hasBin: true
@@ -2038,6 +2205,10 @@ packages:
     resolution: {integrity: sha512-PMSmkqxr106Xa156c2M265Z+FTrPl+oxd/rgOQy2tijQeK5TxQ43psO1ZCwhVOSdnn+RzkzlRz/eY4BgJBYVpg==}
     hasBin: true
 
+  js-yaml@4.1.1:
+    resolution: {integrity: sha512-qQKT4zQxXl8lLwBtHMWwaTcGfFOZviOJet3Oy/xmGk2gZH677CJM9EvtfdSkgWcATZhj/55JZ0rmy3myCT5lsA==}
+    hasBin: true
+
   jsesc@3.1.0:
     resolution: {integrity: sha512-/sM3dO2FOzXjKQhJuo0Q173wf2KOo8t4I8vHy6lF9poUp7bKT0/NHE8fPX23PwfhnykfqnC2xRxOnVw5XuGIaA==}
     engines: {node: '>=6'}
@@ -2048,6 +2219,9 @@ packages:
     engines: {node: '>=6'}
     hasBin: true
 
+  jsonfile@4.0.0:
+    resolution: {integrity: sha512-m6F1R3z8jjlf2imQHS2Qez5sjKWQzbuuhuJ/FKYFRZvPE3PuHcSMVZzfsLhGVOkfd20obL5SWEBew5ShlquNxg==}
+
   kind-of@6.0.3:
     resolution: {integrity: sha512-dcS1ul+9tmeD95T+x28/ehLgd9mENa3LsvDTtzm3vyBEO7RPptvAD+t44WVXaUjTBRcrpFeFlC8WCruUR456hw==}
     engines: {node: '>=0.10.0'}
@@ -2069,9 +2243,16 @@ packages:
     resolution: {integrity: sha512-IXO6OCs9yg8tMKzfPZ1YmheJbZCiEsnBdcB03l0OcfK9prKnJb96siuHCr5Fl37/yo9DnKU+TLpxzTUspw9shg==}
     engines: {node: ^12.20.0 || ^14.13.1 || >=16.0.0}
 
+  locate-path@5.0.0:
+    resolution: {integrity: sha512-t7hw9pI+WvuwNJXwk5zVHpyhIqzg2qTlklJOf0mVxGSbe3Fp2VieZcduNYjaLDoy6p9uGpQEGWG87WpMKlNq8g==}
+    engines: {node: '>=8'}
+
   lodash.debounce@4.0.8:
     resolution: {integrity: sha512-FT1yDzDYEoYWhnSGnpE/4Kj1fLZkDFyqRb7fNt6FdYOSxlUWAtp42Eh6Wb0rGIv/m9Bgo7x4GhQbm5Ys4SG5ow==}
 
+  lodash.startcase@4.4.0:
+    resolution: {integrity: sha512-+WKqsK294HMSc2jEbNgpHpd0JfIBhp7rEV4aqXWqFr6AlXov+SlcgB1Fv01y2kGe3Gc8nMW7VA0SrGuSkRfIEg==}
+
   longest-streak@3.1.0:
     resolution: {integrity: sha512-9Ri+o0JYgehTaVBBDoMqIl8GXtbWg711O3srftcHhZ0dqnETqLaoIK0x17fUw9rFSlK/0NlsKe0Ahhyl5pXE2g==}
 
@@ -2232,6 +2413,10 @@ packages:
       react-dom:
         optional: true
 
+  mri@1.2.0:
+    resolution: {integrity: sha512-tzzskb3bG8LvYGFF/mDTpq3jpI6Q9wc3LEmBaghu+DdCssd1FakN7Bc0hVNmEyGq1bq3RgfkCb3cmQLpNPOroA==}
+    engines: {node: '>=4'}
+
   ms@2.1.3:
     resolution: {integrity: sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==}
 
@@ -2299,6 +2484,32 @@ packages:
     resolution: {integrity: sha512-RSn9F68PjH9HqtltsSnqYC1XXoWe9Bju5+213R98cNGttag9q9yAOTzdbsqvIa7aNm5WffBZFpWYr2aWrklWAw==}
     engines: {node: '>= 6'}
 
+  outdent@0.5.0:
+    resolution: {integrity: sha512-/jHxFIzoMXdqPzTaCpFzAAWhpkSjZPF4Vsn6jAfNpmbH/ymsmd7Qc6VE9BGn0L6YMj6uwpQLxCECpus4ukKS9Q==}
+
+  p-filter@2.1.0:
+    resolution: {integrity: sha512-ZBxxZ5sL2HghephhpGAQdoskxplTwr7ICaehZwLIlfL6acuVgZPm8yBNuRAFBGEqtD/hmUeq9eqLg2ys9Xr/yw==}
+    engines: {node: '>=8'}
+
+  p-limit@2.3.0:
+    resolution: {integrity: sha512-//88mFWSJx8lxCzwdAABTJL2MyWB12+eIY7MDL2SqLmAkeKU9qxRvWuSyTjm3FUmpBEMuFfckAIqEaVGUDxb6w==}
+    engines: {node: '>=6'}
+
+  p-locate@4.1.0:
+    resolution: {integrity: sha512-R79ZZ/0wAxKGu3oYMlz8jy/kbhsNrS7SKZ7PxEHBgJ5+F2mtFW2fK2cOtBh1cHYkQsbzFV7I+EoRKe6Yt0oK7A==}
+    engines: {node: '>=8'}
+
+  p-map@2.1.0:
+    resolution: {integrity: sha512-y3b8Kpd8OAN444hxfBbFfj1FY/RjtTd8tzYwhUqNYXx0fXx2iX4maP4Qr6qhIKbQXI02wTLAda4fYUbDagTUFw==}
+    engines: {node: '>=6'}
+
+  p-try@2.2.0:
+    resolution: {integrity: sha512-R4nPAVTAU0B9D35/Gk3uJf/7XYbQcyohSKdvAxIRSNghFl4e71hVoGnBNQz9cWaXxO2I10KTC+3jMdvvoKw6dQ==}
+    engines: {node: '>=6'}
+
+  package-manager-detector@0.2.11:
+    resolution: {integrity: sha512-BEnLolu+yuz22S56CU1SUKq3XC3PkwD5wv4ikR4MfGvnRVcmzXR9DwSlW2fEamyTPyXHomBJRzgapeuBvRNzJQ==}
+
   pako@0.2.9:
     resolution: {integrity: sha512-NUcwaKxUxWrZLpDG+z/xZaCgQITkA/Dv4V/T6bw7VON6l1Xz/VnrBqrYjZQ12TamKHzITTfOEIYUj48y2KXImA==}
 
@@ -2311,9 +2522,21 @@ packages:
   parseley@0.12.1:
     resolution: {integrity: sha512-e6qHKe3a9HWr0oMRVDTRhKce+bRO8VGQR3NyVwcjwrbhMmFCX9KszEV35+rn4AdilFAq9VPxP/Fe1wC9Qjd2lw==}
 
+  path-exists@4.0.0:
+    resolution: {integrity: sha512-ak9Qy5Q7jYb2Wwcey5Fpvg2KoAc/ZIhLSLOSBmRmygPsGwkVVt0fZa0qrtMz+m6tJTAHfZQ8FnmB4MG4LWy7/w==}
+    engines: {node: '>=8'}
+
+  path-key@3.1.1:
+    resolution: {integrity: sha512-ojmeN0qd+y0jszEtoY48r0Peq5dwMEkIlCOu6Q5f41lfkswXuKtYrhgoTpLnyIcHm24Uhqx+5Tqm2InSwLhE6Q==}
+    engines: {node: '>=8'}
+
   path-parse@1.0.7:
     resolution: {integrity: sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw==}
 
+  path-type@4.0.0:
+    resolution: {integrity: sha512-gDKb8aZMDeD/tZWs9P6+q0J9Mwkdl6xMV8TjnGP3qJVJ06bdMgkbBlLU8IdfOsIsFz2BW1rNVT3XuNEl8zPAvw==}
+    engines: {node: '>=8'}
+
   pathe@2.0.3:
     resolution: {integrity: sha512-WUjGcAqP1gQacoQe+OBJsFA7Ld4DyXuUIjZ5cc75cLHvJ7dtNsTugphxIADwspS+AraAUePCKrSVtPLFj/F88w==}
 
@@ -2335,6 +2558,10 @@ packages:
     resolution: {integrity: sha512-udgsAY+fTnvv7kI7aaxbqwWNb0AHiB0qBO89PZKPkoTmGOgdbrHDKD+0B2X4uTfJ/FT1R09r9gTsjUjNJotuog==}
     engines: {node: '>=0.10.0'}
 
+  pify@4.0.1:
+    resolution: {integrity: sha512-uB80kBFb/tfd68bVleG9T5GGsGPjJrLAUpR5PZIrhBnIaRTQRjqdJSsIKkOP6OAIFbj7GOrcudc5pNjZ+geV2g==}
+    engines: {node: '>=6'}
+
   pirates@4.0.7:
     resolution: {integrity: sha512-TfySrs/5nm8fQJDcBDuUng3VOUKsd7S+zqvbOTiGXHfxX4wK31ard+hoNuvkicM/2YFzlpDgABOevKSsB4G/FA==}
     engines: {node: '>= 6'}
@@ -2393,6 +2620,11 @@ packages:
     resolution: {integrity: sha512-3Ybi1tAuwAP9s0r1UQ2J4n5Y0G05bJkpUIO0/bI9MhwmD70S5aTWbXGBwxHrelT+XM1k6dM0pk+SwNkpTRN7Pg==}
     engines: {node: ^10 || ^12 || >=14}
 
+  prettier@2.8.8:
+    resolution: {integrity: sha512-tdN8qQGvNjw4CHbY+XXk0JgCXn9QiF21a55rBe5LJAU+kDyC4WQn4+awm2Xfk2lQMk5fKup9XgzTZtGkjBdP9Q==}
+    engines: {node: '>=10.13.0'}
+    hasBin: true
+
   prettier@3.7.4:
     resolution: {integrity: sha512-v6UNi1+3hSlVvv8fSaoUbggEM5VErKmmpGA7Pl3HF8V6uKY7rvClBOJlH6yNwQtfTueNkGVpOv/mtWL9L4bgRA==}
     engines: {node: '>=14'}
@@ -2401,6 +2633,9 @@ packages:
   property-information@7.1.0:
     resolution: {integrity: sha512-TwEZ+X+yCJmYfL7TPUOcvBZ4QfoT5YenQiJuX//0th53DE6w0xxLEtfK3iyryQFddXuvkIk51EEgrJQ0WJkOmQ==}
 
+  quansync@0.2.11:
+    resolution: {integrity: sha512-AifT7QEbW9Nri4tAwR5M/uzpBuqfZf+zwaEM/QkzEjj7NBuFD2rBuy0K3dE+8wltbezDV7JMA0WfnCPYRSYbXA==}
+
   queue-microtask@1.2.3:
     resolution: {integrity: sha512-NuaNSa6flKT5JaSYQzJok04JzTL1CA6aGhv5rfLW3PgqA+M2ChpZQnAC8h8i4ZFkBS8X5RqkDBHA7r4hej3K9A==}
 
@@ -2464,6 +2699,10 @@ packages:
   read-cache@1.0.0:
     resolution: {integrity: sha512-Owdv/Ft7IjOgm/i0xvNDZ1LrRANRfew4b2prF3OWMQLxLfu3bS8FVhCsrSCMK4lR56Y9ya+AThoTpDCTxCmpRA==}
 
+  read-yaml-file@1.1.0:
+    resolution: {integrity: sha512-VIMnQi/Z4HT2Fxuwg5KrY174U1VdUIASQVWXXyqtNRtxSr9IYkn1rsI6Tb6HsrHCmB7gVpNwX6JxPTHcH6IoTA==}
+    engines: {node: '>=6'}
+
   readdirp@3.6.0:
     resolution: {integrity: sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA==}
     engines: {node: '>=8.10.0'}
@@ -2531,6 +2770,9 @@ packages:
   run-parallel@1.2.0:
     resolution: {integrity: sha512-5l4VyZR86LZ/lDxZTR6jqL8AFE2S0IFLMP26AbjsLVADxHdhB/c0GUsH+y39UfCi3dzz8OlQuPmnaJOMoDHQBA==}
 
+  safer-buffer@2.1.2:
+    resolution: {integrity: sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==}
+
   satori@0.16.0:
     resolution: {integrity: sha512-ZvHN3ygzZ8FuxjSNB+mKBiF/NIoqHzlBGbD0MJiT+MvSsFOvotnWOhdTjxKzhHRT2wPC1QbhLzx2q/Y83VhfYQ==}
     engines: {node: '>=16'}
@@ -2565,6 +2807,22 @@ packages:
     resolution: {integrity: sha512-Ou9I5Ft9WNcCbXrU9cMgPBcCK8LiwLqcbywW3t4oDV37n1pzpuNLsYiAV8eODnjbtQlSDwZ2cUEeQz4E54Hltg==}
     engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0}
 
+  shebang-command@2.0.0:
+    resolution: {integrity: sha512-kHxr2zZpYtdmrN1qDjrrX/Z1rR1kG8Dx+gkpK1G4eXmvXswmcE1hTWBWYUzlraYw1/yZp6YuDY77YtvbN0dmDA==}
+    engines: {node: '>=8'}
+
+  shebang-regex@3.0.0:
+    resolution: {integrity: sha512-7++dFhtcx3353uBaq8DDR4NuxBetBzC7ZQOhmTQInHEd6bSrXdiEyzCvG07Z44UYdLShWUyXt5M/yhz8ekcb1A==}
+    engines: {node: '>=8'}
+
+  signal-exit@4.1.0:
+    resolution: {integrity: sha512-bzyZ1e88w9O1iNJbKnOlvYTrWPDl46O1bG0D3XInv+9tkPrxrN8jUUTiFlDkkmKWgn1M6CfIA13SuGqOa9Korw==}
+    engines: {node: '>=14'}
+
+  slash@3.0.0:
+    resolution: {integrity: sha512-g9Q1haeby36OSStwb4ntCGGGaKsaVSjQ68fBxoQcutl5fS1vuY18H3wSt3jFyFtrkx+Kz0V1G85A4MyAdDMi2Q==}
+    engines: {node: '>=8'}
+
   source-map-js@1.2.1:
     resolution: {integrity: sha512-UXWMKhLOwVKb728IUtQPXxfYU+usdybtUrK/8uGE8CQMvrhOpwvzDBwj0QhSL7MQc7vIsISBG8VQ8+IDQxpfQA==}
     engines: {node: '>=0.10.0'}
@@ -2576,6 +2834,9 @@ packages:
   space-separated-tokens@2.0.2:
     resolution: {integrity: sha512-PEGlAwrG8yXGXRjW32fGbg66JAlOAwbObuqVoJpv/mRgoWDQfgH1wDPvtzWyUSNAXBGSk8h755YDbbcEy3SH2Q==}
 
+  spawndamnit@3.0.1:
+    resolution: {integrity: sha512-MmnduQUuHCoFckZoWnXsTg7JaiLBJrKFj9UI2MbRPGaJeVpsLcVBu6P/IGZovziM/YBsellCmsprgNA+w0CzVg==}
+
   sprintf-js@1.0.3:
     resolution: {integrity: sha512-D9cPgkvLlV3t3IzL0D0YLvGA9Ahk4PcvVwUbN0dSGr1aP0Nrt4AEnTUbuGvquEC0mA64Gqt1fzirlRs5ibXx8g==}
 
@@ -2585,10 +2846,18 @@ packages:
   stringify-entities@4.0.4:
     resolution: {integrity: sha512-IwfBptatlO+QCJUo19AqvrPNqlVMpW9YEL2LIVY+Rpv2qsjCGxaDLNRgeGsQWJhfItebuJhsGSLjaBbNSQ+ieg==}
 
+  strip-ansi@6.0.1:
+    resolution: {integrity: sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==}
+    engines: {node: '>=8'}
+
   strip-bom-string@1.0.0:
     resolution: {integrity: sha512-uCC2VHvQRYu+lMh4My/sFNmF2klFymLX1wHJeXnbEJERpV/ZsVuonzerjfrGpIGF7LBVa1O7i9kjiWvJiFck8g==}
     engines: {node: '>=0.10.0'}
 
+  strip-bom@3.0.0:
+    resolution: {integrity: sha512-vavAMRXOgBVNF6nyEEmL3DBK19iRpDcoIwW+swQ+CbGiu7lju6t+JklA1MHweoWtadgt4ISVUsXLyDq34ddcwA==}
+    engines: {node: '>=4'}
+
   style-to-js@1.1.21:
     resolution: {integrity: sha512-RjQetxJrrUJLQPHbLku6U/ocGtzyjbJMP9lCNK7Ag0CNh690nSH8woqWH9u16nMjYBAok+i7JO1NP2pOy8IsPQ==}
 
@@ -2630,6 +2899,10 @@ packages:
     engines: {node: '>=14.0.0'}
     hasBin: true
 
+  term-size@2.2.1:
+    resolution: {integrity: sha512-wK0Ri4fOGjv/XPy8SBHZChl8CM7uMc5VML7SqiQ0zG7+J5Vr+RMQDoHa2CNT6KHUnTGIXH34UDMkPzAUyapBZg==}
+    engines: {node: '>=8'}
+
   thenify-all@1.6.0:
     resolution: {integrity: sha512-RNxQH/qI8/t3thXJDwcstUO4zeqo64+Uy/+sNVRBx4Xn2OX+OZ9oP+iJnNFqplFra2ZUVeKCSa2oVWi3T4uVmA==}
     engines: {node: '>=0.8'}
@@ -2774,6 +3047,10 @@ packages:
   unist-util-visit@5.0.0:
     resolution: {integrity: sha512-MR04uvD+07cwl/yhVuVWAtw+3GOR/knlL55Nd/wAdblk27GCVt3lqpTivy/tkJcZoNPzTwS1Y+KMojlLDhoTzg==}
 
+  universalify@0.1.2:
+    resolution: {integrity: sha512-rBJeI5CXAlmy1pV+617WB9J63U6XcazHHF2f2dbJix4XzpUF0RS3Zbj0FGIOCAva5P/d/GBOYaACQ1w+0azUkg==}
+    engines: {node: '>= 4.0.0'}
+
   update-browserslist-db@1.2.3:
     resolution: {integrity: sha512-Js0m9cx+qOgDxo0eMiFGEueWztz+d4+M3rGlmKPT+T4IS/jP4ylw3Nwpu6cpTTP8R1MAC1kF4VbdLt3ARf209w==}
     hasBin: true
@@ -2858,6 +3135,11 @@ packages:
       yaml:
         optional: true
 
+  which@2.0.2:
+    resolution: {integrity: sha512-BLI3Tl1TW3Pvl70l3yq3Y64i+awpwXqsGBYWkkqMtnbXgrMD+yj7rhW0kuEDxzJaYXGjEW5ogapKNMEKNMjibA==}
+    engines: {node: '>= 8'}
+    hasBin: true
+
   yallist@3.1.1:
     resolution: {integrity: sha512-a4UGQaWPH59mOXUYnAG2ewncQS4i4F43Tv3JoAM+s2VDAmS9NsK8GpDMLrCHPksFT7h3K6TOoUNn2pb7RoXx4g==}
 
@@ -2968,6 +3250,8 @@ snapshots:
       '@babel/core': 7.28.5
       '@babel/helper-plugin-utils': 7.27.1
 
+  '@babel/runtime@7.28.4': {}
+
   '@babel/template@7.27.2':
     dependencies:
       '@babel/code-frame': 7.27.1
@@ -2991,6 +3275,150 @@ snapshots:
       '@babel/helper-string-parser': 7.27.1
       '@babel/helper-validator-identifier': 7.28.5
 
+  '@changesets/apply-release-plan@7.0.14':
+    dependencies:
+      '@changesets/config': 3.1.2
+      '@changesets/get-version-range-type': 0.4.0
+      '@changesets/git': 3.0.4
+      '@changesets/should-skip-package': 0.1.2
+      '@changesets/types': 6.1.0
+      '@manypkg/get-packages': 1.1.3
+      detect-indent: 6.1.0
+      fs-extra: 7.0.1
+      lodash.startcase: 4.4.0
+      outdent: 0.5.0
+      prettier: 2.8.8
+      resolve-from: 5.0.0
+      semver: 7.7.3
+
+  '@changesets/assemble-release-plan@6.0.9':
+    dependencies:
+      '@changesets/errors': 0.2.0
+      '@changesets/get-dependents-graph': 2.1.3
+      '@changesets/should-skip-package': 0.1.2
+      '@changesets/types': 6.1.0
+      '@manypkg/get-packages': 1.1.3
+      semver: 7.7.3
+
+  '@changesets/changelog-git@0.2.1':
+    dependencies:
+      '@changesets/types': 6.1.0
+
+  '@changesets/cli@2.29.8(@types/node@25.0.3)':
+    dependencies:
+      '@changesets/apply-release-plan': 7.0.14
+      '@changesets/assemble-release-plan': 6.0.9
+      '@changesets/changelog-git': 0.2.1
+      '@changesets/config': 3.1.2
+      '@changesets/errors': 0.2.0
+      '@changesets/get-dependents-graph': 2.1.3
+      '@changesets/get-release-plan': 4.0.14
+      '@changesets/git': 3.0.4
+      '@changesets/logger': 0.1.1
+      '@changesets/pre': 2.0.2
+      '@changesets/read': 0.6.6
+      '@changesets/should-skip-package': 0.1.2
+      '@changesets/types': 6.1.0
+      '@changesets/write': 0.4.0
+      '@inquirer/external-editor': 1.0.3(@types/node@25.0.3)
+      '@manypkg/get-packages': 1.1.3
+      ansi-colors: 4.1.3
+      ci-info: 3.9.0
+      enquirer: 2.4.1
+      fs-extra: 7.0.1
+      mri: 1.2.0
+      p-limit: 2.3.0
+      package-manager-detector: 0.2.11
+      picocolors: 1.1.1
+      resolve-from: 5.0.0
+      semver: 7.7.3
+      spawndamnit: 3.0.1
+      term-size: 2.2.1
+    transitivePeerDependencies:
+      - '@types/node'
+
+  '@changesets/config@3.1.2':
+    dependencies:
+      '@changesets/errors': 0.2.0
+      '@changesets/get-dependents-graph': 2.1.3
+      '@changesets/logger': 0.1.1
+      '@changesets/types': 6.1.0
+      '@manypkg/get-packages': 1.1.3
+      fs-extra: 7.0.1
+      micromatch: 4.0.8
+
+  '@changesets/errors@0.2.0':
+    dependencies:
+      extendable-error: 0.1.7
+
+  '@changesets/get-dependents-graph@2.1.3':
+    dependencies:
+      '@changesets/types': 6.1.0
+      '@manypkg/get-packages': 1.1.3
+      picocolors: 1.1.1
+      semver: 7.7.3
+
+  '@changesets/get-release-plan@4.0.14':
+    dependencies:
+      '@changesets/assemble-release-plan': 6.0.9
+      '@changesets/config': 3.1.2
+      '@changesets/pre': 2.0.2
+      '@changesets/read': 0.6.6
+      '@changesets/types': 6.1.0
+      '@manypkg/get-packages': 1.1.3
+
+  '@changesets/get-version-range-type@0.4.0': {}
+
+  '@changesets/git@3.0.4':
+    dependencies:
+      '@changesets/errors': 0.2.0
+      '@manypkg/get-packages': 1.1.3
+      is-subdir: 1.2.0
+      micromatch: 4.0.8
+      spawndamnit: 3.0.1
+
+  '@changesets/logger@0.1.1':
+    dependencies:
+      picocolors: 1.1.1
+
+  '@changesets/parse@0.4.2':
+    dependencies:
+      '@changesets/types': 6.1.0
+      js-yaml: 4.1.1
+
+  '@changesets/pre@2.0.2':
+    dependencies:
+      '@changesets/errors': 0.2.0
+      '@changesets/types': 6.1.0
+      '@manypkg/get-packages': 1.1.3
+      fs-extra: 7.0.1
+
+  '@changesets/read@0.6.6':
+    dependencies:
+      '@changesets/git': 3.0.4
+      '@changesets/logger': 0.1.1
+      '@changesets/parse': 0.4.2
+      '@changesets/types': 6.1.0
+      fs-extra: 7.0.1
+      p-filter: 2.1.0
+      picocolors: 1.1.1
+
+  '@changesets/should-skip-package@0.1.2':
+    dependencies:
+      '@changesets/types': 6.1.0
+      '@manypkg/get-packages': 1.1.3
+
+  '@changesets/types@4.1.0': {}
+
+  '@changesets/types@6.1.0': {}
+
+  '@changesets/write@0.4.0':
+    dependencies:
+      '@changesets/types': 6.1.0
+      fs-extra: 7.0.1
+      human-id: 4.1.3
+      prettier: 2.8.8
+
   '@emnapi/runtime@1.7.1':
     dependencies:
       tslib: 2.8.1
@@ -3273,6 +3701,13 @@ snapshots:
   '@img/sharp-win32-x64@0.34.5':
     optional: true
 
+  '@inquirer/external-editor@1.0.3(@types/node@25.0.3)':
+    dependencies:
+      chardet: 2.1.1
+      iconv-lite: 0.7.1
+    optionalDependencies:
+      '@types/node': 25.0.3
+
   '@jridgewell/gen-mapping@0.3.13':
     dependencies:
       '@jridgewell/sourcemap-codec': 1.5.5
@@ -3292,6 +3727,22 @@ snapshots:
       '@jridgewell/resolve-uri': 3.1.2
       '@jridgewell/sourcemap-codec': 1.5.5
 
+  '@manypkg/find-root@1.1.0':
+    dependencies:
+      '@babel/runtime': 7.28.4
+      '@types/node': 12.20.55
+      find-up: 4.1.0
+      fs-extra: 8.1.0
+
+  '@manypkg/get-packages@1.1.3':
+    dependencies:
+      '@babel/runtime': 7.28.4
+      '@changesets/types': 4.1.0
+      '@manypkg/find-root': 1.1.0
+      fs-extra: 8.1.0
+      globby: 11.1.0
+      read-yaml-file: 1.1.0
+
   '@mdx-js/loader@3.1.1':
     dependencies:
       '@mdx-js/mdx': 3.1.1
@@ -3904,6 +4355,8 @@ snapshots:
 
   '@types/ms@2.1.0': {}
 
+  '@types/node@12.20.55': {}
+
   '@types/node@22.19.3':
     dependencies:
       undici-types: 6.21.0
@@ -3954,6 +4407,10 @@ snapshots:
 
   acorn@8.15.0: {}
 
+  ansi-colors@4.1.3: {}
+
+  ansi-regex@5.0.1: {}
+
   any-promise@1.3.0: {}
 
   anymatch@3.1.3:
@@ -3967,10 +4424,14 @@ snapshots:
     dependencies:
       sprintf-js: 1.0.3
 
+  argparse@2.0.1: {}
+
   aria-hidden@1.2.6:
     dependencies:
       tslib: 2.8.1
 
+  array-union@2.1.0: {}
+
   astring@1.9.0: {}
 
   autoprefixer@10.4.23(postcss@8.5.6):
@@ -3988,6 +4449,10 @@ snapshots:
 
   baseline-browser-mapping@2.9.11: {}
 
+  better-path-resolve@1.0.0:
+    dependencies:
+      is-windows: 1.0.2
+
   binary-extensions@2.3.0: {}
 
   braces@3.0.3:
@@ -4025,6 +4490,8 @@ snapshots:
 
   character-reference-invalid@2.0.1: {}
 
+  chardet@2.1.1: {}
+
   chokidar@3.6.0:
     dependencies:
       anymatch: 3.1.3
@@ -4041,6 +4508,8 @@ snapshots:
     dependencies:
       readdirp: 4.1.2
 
+  ci-info@3.9.0: {}
+
   class-variance-authority@0.7.1:
     dependencies:
       clsx: 2.1.1
@@ -4063,6 +4532,12 @@ snapshots:
 
   convert-source-map@2.0.0: {}
 
+  cross-spawn@7.0.6:
+    dependencies:
+      path-key: 3.1.1
+      shebang-command: 2.0.0
+      which: 2.0.2
+
   css-background-parser@0.1.0: {}
 
   css-box-shadow@1.0.0-3: {}
@@ -4093,6 +4568,8 @@ snapshots:
 
   dequal@2.0.3: {}
 
+  detect-indent@6.1.0: {}
+
   detect-libc@2.1.2:
     optional: true
 
@@ -4104,6 +4581,10 @@ snapshots:
 
   didyoumean@1.2.2: {}
 
+  dir-glob@3.0.1:
+    dependencies:
+      path-type: 4.0.0
+
   dlv@1.1.3: {}
 
   dom-serializer@2.0.0:
@@ -4128,6 +4609,11 @@ snapshots:
 
   emoji-regex-xs@2.0.1: {}
 
+  enquirer@2.4.1:
+    dependencies:
+      ansi-colors: 4.1.3
+      strip-ansi: 6.0.1
+
   entities@4.5.0: {}
 
   esast-util-from-estree@2.0.0:
@@ -4247,6 +4733,8 @@ snapshots:
 
   extend@3.0.2: {}
 
+  extendable-error@0.1.7: {}
+
   fast-deep-equal@2.0.1: {}
 
   fast-glob@3.3.3:
@@ -4271,6 +4759,11 @@ snapshots:
     dependencies:
       to-regex-range: 5.0.1
 
+  find-up@4.1.0:
+    dependencies:
+      locate-path: 5.0.0
+      path-exists: 4.0.0
+
   fix-dts-default-cjs-exports@1.0.1:
     dependencies:
       magic-string: 0.30.21
@@ -4288,6 +4781,18 @@ snapshots:
       react: 19.2.3
       react-dom: 19.2.3(react@19.2.3)
 
+  fs-extra@7.0.1:
+    dependencies:
+      graceful-fs: 4.2.11
+      jsonfile: 4.0.0
+      universalify: 0.1.2
+
+  fs-extra@8.1.0:
+    dependencies:
+      graceful-fs: 4.2.11
+      jsonfile: 4.0.0
+      universalify: 0.1.2
+
   fsevents@2.3.3:
     optional: true
 
@@ -4305,6 +4810,17 @@ snapshots:
     dependencies:
       is-glob: 4.0.3
 
+  globby@11.1.0:
+    dependencies:
+      array-union: 2.1.0
+      dir-glob: 3.0.1
+      fast-glob: 3.3.3
+      ignore: 5.3.2
+      merge2: 1.4.1
+      slash: 3.0.0
+
+  graceful-fs@4.2.11: {}
+
   gray-matter@4.0.3:
     dependencies:
       js-yaml: 3.14.2
@@ -4378,6 +4894,14 @@ snapshots:
       domutils: 3.2.2
       entities: 4.5.0
 
+  human-id@4.1.3: {}
+
+  iconv-lite@0.7.1:
+    dependencies:
+      safer-buffer: 2.1.2
+
+  ignore@5.3.2: {}
+
   inline-style-parser@0.2.7: {}
 
   is-alphabetical@2.0.1: {}
@@ -4411,6 +4935,14 @@ snapshots:
 
   is-plain-obj@4.1.0: {}
 
+  is-subdir@1.2.0:
+    dependencies:
+      better-path-resolve: 1.0.0
+
+  is-windows@1.0.2: {}
+
+  isexe@2.0.0: {}
+
   jiti@1.21.7: {}
 
   joycon@3.1.1: {}
@@ -4422,10 +4954,18 @@ snapshots:
       argparse: 1.0.10
       esprima: 4.0.1
 
+  js-yaml@4.1.1:
+    dependencies:
+      argparse: 2.0.1
+
   jsesc@3.1.0: {}
 
   json5@2.2.3: {}
 
+  jsonfile@4.0.0:
+    optionalDependencies:
+      graceful-fs: 4.2.11
+
   kind-of@6.0.3: {}
 
   leac@0.6.0: {}
@@ -4441,8 +4981,14 @@ snapshots:
 
   load-tsconfig@0.2.5: {}
 
+  locate-path@5.0.0:
+    dependencies:
+      p-locate: 4.1.0
+
   lodash.debounce@4.0.8: {}
 
+  lodash.startcase@4.4.0: {}
+
   longest-streak@3.1.0: {}
 
   lru-cache@5.1.1:
@@ -4792,6 +5338,8 @@ snapshots:
       react: 19.2.3
       react-dom: 19.2.3(react@19.2.3)
 
+  mri@1.2.0: {}
+
   ms@2.1.3: {}
 
   mz@2.7.0:
@@ -4869,6 +5417,28 @@ snapshots:
 
   object-hash@3.0.0: {}
 
+  outdent@0.5.0: {}
+
+  p-filter@2.1.0:
+    dependencies:
+      p-map: 2.1.0
+
+  p-limit@2.3.0:
+    dependencies:
+      p-try: 2.2.0
+
+  p-locate@4.1.0:
+    dependencies:
+      p-limit: 2.3.0
+
+  p-map@2.1.0: {}
+
+  p-try@2.2.0: {}
+
+  package-manager-detector@0.2.11:
+    dependencies:
+      quansync: 0.2.11
+
   pako@0.2.9: {}
 
   parse-css-color@0.2.1:
@@ -4891,8 +5461,14 @@ snapshots:
       leac: 0.6.0
       peberminta: 0.9.0
 
+  path-exists@4.0.0: {}
+
+  path-key@3.1.1: {}
+
   path-parse@1.0.7: {}
 
+  path-type@4.0.0: {}
+
   pathe@2.0.3: {}
 
   peberminta@0.9.0: {}
@@ -4905,6 +5481,8 @@ snapshots:
 
   pify@2.3.0: {}
 
+  pify@4.0.1: {}
+
   pirates@4.0.7: {}
 
   pkg-types@1.3.1:
@@ -4957,10 +5535,14 @@ snapshots:
       picocolors: 1.1.1
       source-map-js: 1.2.1
 
+  prettier@2.8.8: {}
+
   prettier@3.7.4: {}
 
   property-information@7.1.0: {}
 
+  quansync@0.2.11: {}
+
   queue-microtask@1.2.3: {}
 
   react-dom@19.2.3(react@19.2.3):
@@ -5015,6 +5597,13 @@ snapshots:
     dependencies:
       pify: 2.3.0
 
+  read-yaml-file@1.1.0:
+    dependencies:
+      graceful-fs: 4.2.11
+      js-yaml: 3.14.2
+      pify: 4.0.1
+      strip-bom: 3.0.0
+
   readdirp@3.6.0:
     dependencies:
       picomatch: 2.3.1
@@ -5142,6 +5731,8 @@ snapshots:
     dependencies:
       queue-microtask: 1.2.3
 
+  safer-buffer@2.1.2: {}
+
   satori@0.16.0:
     dependencies:
       '@shuding/opentype.js': 1.4.0-beta.0
@@ -5169,8 +5760,7 @@ snapshots:
 
   semver@6.3.1: {}
 
-  semver@7.7.3:
-    optional: true
+  semver@7.7.3: {}
 
   serialize-error@12.0.0:
     dependencies:
@@ -5210,12 +5800,27 @@ snapshots:
       '@img/sharp-win32-x64': 0.34.5
     optional: true
 
+  shebang-command@2.0.0:
+    dependencies:
+      shebang-regex: 3.0.0
+
+  shebang-regex@3.0.0: {}
+
+  signal-exit@4.1.0: {}
+
+  slash@3.0.0: {}
+
   source-map-js@1.2.1: {}
 
   source-map@0.7.6: {}
 
   space-separated-tokens@2.0.2: {}
 
+  spawndamnit@3.0.1:
+    dependencies:
+      cross-spawn: 7.0.6
+      signal-exit: 4.1.0
+
   sprintf-js@1.0.3: {}
 
   string.prototype.codepointat@0.2.1: {}
@@ -5225,8 +5830,14 @@ snapshots:
       character-entities-html4: 2.1.0
       character-entities-legacy: 3.0.0
 
+  strip-ansi@6.0.1:
+    dependencies:
+      ansi-regex: 5.0.1
+
   strip-bom-string@1.0.0: {}
 
+  strip-bom@3.0.0: {}
+
   style-to-js@1.1.21:
     dependencies:
       style-to-object: 1.0.14
@@ -5286,6 +5897,8 @@ snapshots:
       - tsx
       - yaml
 
+  term-size@2.2.1: {}
+
   thenify-all@1.6.0:
     dependencies:
       thenify: 3.3.1
@@ -5445,6 +6058,8 @@ snapshots:
       unist-util-is: 6.0.1
       unist-util-visit-parents: 6.0.2
 
+  universalify@0.1.2: {}
+
   update-browserslist-db@1.2.3(browserslist@4.28.1):
     dependencies:
       browserslist: 4.28.1
@@ -5502,6 +6117,10 @@ snapshots:
       jiti: 1.21.7
       yaml: 2.8.2
 
+  which@2.0.2:
+    dependencies:
+      isexe: 2.0.0
+
   yallist@3.1.1: {}
 
   yaml@2.8.2: {}

From f61b2da618446c0ca70a1cc84745ad15959f610f Mon Sep 17 00:00:00 2001
From: Antoine Kingue <etorefr@gmail.com>
Date: Wed, 31 Dec 2025 01:08:18 +0100
Subject: [PATCH 64/64] =?UTF-8?q?=F0=9F=A9=B9=20update=20robots.txt=20to?=
 =?UTF-8?q?=20use=20dynamic=20sitemap=20url=20from=20site=20configuration?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 apps/web/src/app/robots.ts | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/apps/web/src/app/robots.ts b/apps/web/src/app/robots.ts
index 98b659d35..109bd510e 100644
--- a/apps/web/src/app/robots.ts
+++ b/apps/web/src/app/robots.ts
@@ -1,4 +1,5 @@
 import type { MetadataRoute } from "next";
+import { siteConfig } from "@/constants/site-config";
 
 export default function robots(): MetadataRoute.Robots {
   return {
@@ -6,6 +7,6 @@ export default function robots(): MetadataRoute.Robots {
       userAgent: "*",
       allow: "/",
     },
-    sitemap: "https://onruntime.com/sitemap.xml",
+    sitemap: `${siteConfig.url}/sitemap.xml`,
   };
 }