refactor: split marketplace into homepage and storefront apps

- Remove apps/marketplace entirely
- Create apps/homepage (port 3000): landing/marketing pages (home, features, pricing, platform-ops, review, legal)
- Create apps/storefront (port 3004): vehicle browsing (explore) and renter account (dashboard, profile, notifications)
- Duplicate shared components/libs into each app
- Update homepage header nav: Home, Features, Pricing instead of Home, Explore
- Fix all /explore cross-references in homepage to point to /features
- Update docker-compose.dev.yml: new homepage and storefront services, remove marketplace
- Update docker-compose.production.yml: split into homepage (main domain) and storefront (path-based routes)
- Update Dockerfiles: EXPOSE 3004 instead of 3003
- Update root package.json scripts: homepage/storefront profiles, tests, prod scripts
- Add docker-prod-up-homepage.sh and docker-prod-up-storefront.sh, remove marketplace script

apps/homepage/next-env.d.ts

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

apps/homepage/next.config.js

@@ -0,0 +1,74 @@
+/** @type {import('next').NextConfig} */
+
+const { buildSecurityHeaders, normalizeAssetPrefix } = require('../../config/nextSecurityHeaders')
+
+// The marketplace proxies /dashboard and /admin to their own Next dev servers.
+// Allow those asset-prefix origins so proxied pages can load chunks and HMR.
+const dashboardAssetSource = normalizeAssetPrefix(
+  process.env.DASHBOARD_ASSET_PREFIX ?? (process.env.NODE_ENV !== 'production' ? 'http://localhost:3001' : undefined),
+  '/dashboard',
+)
+const securityHeaders = buildSecurityHeaders({
+  assetSources: [dashboardAssetSource, process.env.ADMIN_ASSET_PREFIX],
+})
+const nextConfig = {
+  images: {
+    remotePatterns: [
+      {
+        protocol: 'https',
+        hostname: 'res.cloudinary.com',
+      },
+    ],
+  },
+  transpilePackages: ['@rentaldrivego/types'],
+  async headers() {
+    return [
+      {
+        source: '/:path*',
+        headers: securityHeaders,
+      },
+    ]
+  },
+  async redirects() {
+    return [
+      {
+        source: '/dashboard/dashboard',
+        destination: '/dashboard',
+        permanent: false,
+      },
+      {
+        source: '/dashboard/dashboard/:path*',
+        destination: '/dashboard/:path*',
+        permanent: false,
+      },
+    ]
+  },
+  async rewrites() {
+    const dashboardOrigin = process.env.DASHBOARD_INTERNAL_URL ?? 'http://dashboard:3001'
+    const adminOrigin = process.env.ADMIN_INTERNAL_URL ?? 'http://admin:3002'
+
+    return [
+      // Dashboard has basePath '/dashboard'. The proxy preserves the prefix
+      // so the dashboard can strip it and route internally.
+      {
+        source: '/dashboard',
+        destination: `${dashboardOrigin}/dashboard`,
+      },
+      {
+        source: '/dashboard/:path*',
+        destination: `${dashboardOrigin}/dashboard/:path*`,
+      },
+      // Admin routes (also uses basePath)
+      {
+        source: '/admin',
+        destination: `${adminOrigin}/admin`,
+      },
+      {
+        source: '/admin/:path*',
+        destination: `${adminOrigin}/admin/:path*`,
+      },
+    ]
+  },
+}
+
+module.exports = nextConfig

apps/homepage/package.json

@@ -0,0 +1,34 @@
+{
+  "name": "@rentaldrivego/homepage",
+  "version": "1.0.0",
+  "private": true,
+  "scripts": {
+    "predev": "npm run build --workspace @rentaldrivego/types",
+    "dev": "next dev -H 0.0.0.0 -p 3000",
+    "prebuild": "npm run build --workspace @rentaldrivego/types",
+    "build": "next build",
+    "prestart": "npm run build --workspace @rentaldrivego/types",
+    "pretype-check": "npm run build --workspace @rentaldrivego/types",
+    "start": "next start -H 0.0.0.0 -p 3000",
+    "type-check": "tsc --noEmit",
+    "test": "vitest run",
+    "test:watch": "vitest"
+  },
+  "dependencies": {
+    "@rentaldrivego/types": "*",
+    "autoprefixer": "^10.4.19",
+    "lucide-react": "^0.376.0",
+    "next": "^16.2.7",
+    "postcss": "^8.4.38",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "tailwindcss": "^3.4.3"
+  },
+  "devDependencies": {
+    "@types/node": "^20.12.0",
+    "@types/react": "^18.3.1",
+    "@types/react-dom": "^18.3.0",
+    "typescript": "^5.4.0",
+    "vitest": "^1.6.0"
+  }
+}

apps/homepage/postcss.config.js

@@ -0,0 +1,6 @@
+module.exports = {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+}

apps/homepage/public/icon.svg

@@ -0,0 +1,14 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
+  <rect width="32" height="32" rx="8" fill="#0f172a" />
+  <text
+    x="16"
+    y="21"
+    text-anchor="middle"
+    font-family="Inter, Arial, sans-serif"
+    font-size="18"
+    font-weight="700"
+    fill="#ffffff"
+  >
+    R
+  </text>
+</svg>

apps/homepage/src/app/(public)/HomeContent.tsx

@@ -0,0 +1,274 @@
+'use client'
+
+import { useEffect, useState } from 'react'
+import { useMarketplacePreferences } from '@/components/MarketplaceShell'
+import { StatsStrip } from '@/components/StatsStrip'
+import { HowItWorks } from '@/components/HowItWorks'
+import { TestimonialsSection } from '@/components/TestimonialsSection'
+import {
+  cloneMarketplaceHomepageContent,
+  resolveMarketplaceHomepageSections,
+  type MarketplaceHomepageConfig,
+  type MarketplaceHomepageSectionType,
+} from '@rentaldrivego/types'
+import { resolveBrowserAppUrl } from '@/lib/appUrls'
+
+const API_BASE = process.env.NEXT_PUBLIC_API_URL ?? 'http://localhost:4000/api/v1'
+
+export default function HomeContent() {
+  const { language } = useMarketplacePreferences()
+  const [content, setContent] = useState<MarketplaceHomepageConfig>(cloneMarketplaceHomepageContent())
+  const dict = content[language]
+  const sections = resolveMarketplaceHomepageSections(dict.sections)
+  const dashboardUrl = resolveBrowserAppUrl(process.env.NEXT_PUBLIC_DASHBOARD_URL ?? 'http://localhost:3000/dashboard')
+  const starterSignupHref = `${dashboardUrl}/sign-up?plan=STARTER&billing=MONTHLY&currency=MAD`
+
+  useEffect(() => {
+    let cancelled = false
+
+    async function loadHomepageContent() {
+      try {
+        const res = await fetch(`${API_BASE}/site/platform/homepage`, { cache: 'no-store' })
+        const json = await res.json().catch(() => null)
+        if (!res.ok || !json?.data || cancelled) return
+        setContent(json.data as MarketplaceHomepageConfig)
+      } catch {
+        // Fall back to the shared defaults when the API is unavailable.
+      }
+    }
+
+    loadHomepageContent()
+
+    return () => {
+      cancelled = true
+    }
+  }, [])
+
+  function hasSection(section: MarketplaceHomepageSectionType) {
+    return sections.includes(section)
+  }
+
+  return (
+    <main className="min-h-screen overflow-hidden bg-transparent">
+      <section className="relative">
+        <div className="site-glow absolute inset-x-0 top-0 h-[38rem]" />
+        <div className="shell relative py-10 sm:py-14 lg:py-20">
+          <div className={`grid gap-8 ${hasSection('hero') && hasSection('surface') ? 'lg:grid-cols-[minmax(0,1.15fr)_24rem] lg:items-stretch xl:grid-cols-[minmax(0,1.2fr)_28rem]' : ''}`}>
+            {hasSection('hero') ? (
+            <div className="rounded-[2rem] border border-stone-200/80 bg-white/80 p-7 shadow-[0_30px_80px_rgba(28,25,23,0.08)] backdrop-blur dark:border-blue-900 dark:bg-blue-950/70">
+              <p className="text-xs font-bold uppercase tracking-[0.32em] text-orange-700 dark:text-orange-300">{dict.heroKicker}</p>
+              <h1 className="mt-5 max-w-4xl text-5xl font-black leading-none tracking-[-0.04em] text-blue-950 dark:text-stone-50 sm:text-6xl lg:text-7xl">
+                {dict.heroTitle}
+              </h1>
+              <p className="mt-6 max-w-2xl text-base leading-8 text-stone-600 dark:text-stone-300 sm:text-lg">
+                {dict.heroBody}
+              </p>
+
+              <div className="mt-8 flex flex-wrap gap-3">
+                <a
+                  href={starterSignupHref}
+                  className="rounded-full bg-orange-600 px-6 py-3 text-sm font-semibold text-white transition hover:bg-orange-700 dark:bg-orange-500 dark:hover:bg-orange-400"
+                >
+                  {dict.startTrial}
+                </a>
+                <a
+                  href="/features"
+                  className="rounded-full border border-stone-300 bg-white/85 px-6 py-3 text-sm font-semibold text-stone-700 transition hover:border-blue-900 hover:text-blue-900 dark:border-blue-800 dark:bg-blue-950/30 dark:text-stone-200 dark:hover:border-stone-200 dark:hover:text-white"
+                >
+                  {dict.exploreVehicles}
+                </a>
+              </div>
+
+              <div className="mt-10 grid gap-3 sm:grid-cols-3">
+                {dict.metrics.map(({ value, label }) => (
+                  <div key={value} className="rounded-[1.5rem] border border-stone-200/80 bg-stone-50/90 p-4 dark:border-blue-900 dark:bg-blue-950/50">
+                    <p className="text-xs font-bold tracking-[0.28em] text-stone-400 dark:text-stone-500">{value}</p>
+                    <p className="mt-3 text-sm font-semibold leading-6 text-stone-900 dark:text-stone-100">{label}</p>
+                  </div>
+                ))}
+              </div>
+            </div>
+            ) : null}
+
+            {hasSection('surface') ? (
+            <div className="relative overflow-hidden rounded-[2rem] border border-blue-900/60 bg-[#06132e] p-6 text-white shadow-[0_30px_80px_rgba(6,19,46,0.40)] dark:border-blue-800">
+              <div className="absolute inset-0 bg-[radial-gradient(circle_at_top_right,rgba(249,115,22,0.30),transparent_28%),radial-gradient(circle_at_bottom_left,rgba(96,165,250,0.22),transparent_32%)]" />
+              <div className="relative">
+                <div className="flex items-center justify-between gap-3">
+                  <span className="rounded-full border border-white/15 bg-white/10 px-3 py-1 text-[11px] font-semibold uppercase tracking-[0.22em] text-orange-200">
+                    {dict.surfaceLabel}
+                  </span>
+                  <span className="rounded-full bg-emerald-400/15 px-3 py-1 text-[11px] font-semibold uppercase tracking-[0.22em] text-emerald-200">
+                    {dict.liveLabel}
+                  </span>
+                </div>
+
+                <h2 className="mt-6 text-3xl font-black leading-tight tracking-[-0.03em]">{dict.surfaceTitle}</h2>
+                <p className="mt-4 text-sm leading-7 text-stone-300">{dict.surfaceBody}</p>
+
+                <div className="mt-8 space-y-3">
+                  {[
+                    ['01', dict.trustedFleets],
+                    ['02', dict.brandedFlows],
+                    ['03', dict.multiTenant],
+                  ].map(([step, label]) => (
+                    <div key={step} className="flex items-center justify-between rounded-[1.25rem] border border-white/10 bg-white/5 px-4 py-4">
+                      <div className="flex items-center gap-3">
+                        <span className="flex h-10 w-10 items-center justify-center rounded-full bg-white text-xs font-bold text-blue-950">
+                          {step}
+                        </span>
+                        <p className="text-sm font-semibold text-white">{label}</p>
+                      </div>
+                      <span className="text-lg text-orange-300">+</span>
+                    </div>
+                  ))}
+                </div>
+              </div>
+            </div>
+            ) : null}
+          </div>
+
+          {hasSection('audiences') ? <div className="mt-8 grid gap-4 lg:grid-cols-[1.15fr_0.85fr]">
+            <article className="rounded-[2rem] border border-stone-200/80 bg-white/80 p-7 backdrop-blur dark:border-blue-900 dark:bg-blue-950/60">
+              <p className="text-xs font-bold uppercase tracking-[0.24em] text-stone-500 dark:text-stone-400">{dict.companyKicker}</p>
+              <h2 className="mt-4 text-2xl font-black tracking-[-0.03em] text-blue-950 dark:text-stone-50 sm:text-3xl">{dict.companyTitle}</h2>
+              <p className="mt-4 max-w-3xl text-sm leading-7 text-stone-600 dark:text-stone-300">{dict.companyBody}</p>
+            </article>
+            <article className="rounded-[2rem] border border-stone-200/80 bg-[#f7efe2] p-7 dark:border-blue-900 dark:bg-[#1d1712]">
+              <p className="text-xs font-bold uppercase tracking-[0.24em] text-orange-700 dark:text-orange-300">{dict.renterKicker}</p>
+              <h2 className="mt-4 text-2xl font-black tracking-[-0.03em] text-blue-950 dark:text-stone-50 sm:text-3xl">{dict.renterTitle}</h2>
+              <p className="mt-4 text-sm leading-7 text-stone-700 dark:text-stone-300">{dict.renterBody}</p>
+            </article>
+          </div> : null}
+        </div>
+      </section>
+
+      {hasSection('pillars') ? <section className="shell pb-10">
+        <div className="grid gap-4 lg:grid-cols-3">
+          {dict.pillars.map(({ title, body }, index) => (
+            <article
+              key={title}
+              className={`rounded-[2rem] border p-7 shadow-sm ${
+                index === 1
+                  ? 'border-orange-700 bg-orange-600 text-white dark:border-orange-500 dark:bg-orange-500 dark:text-white'
+                  : 'border-stone-200 bg-white dark:border-blue-900 dark:bg-blue-950'
+              }`}
+            >
+              <p
+                className={`text-xs font-bold uppercase tracking-[0.26em] ${
+                  index === 1 ? 'text-stone-300 dark:text-stone-700' : 'text-stone-400 dark:text-stone-500'
+                }`}
+              >
+                0{index + 1}
+              </p>
+              <h3 className="mt-4 text-2xl font-black tracking-[-0.03em]">{title}</h3>
+              <p
+                className={`mt-4 text-sm leading-7 ${
+                  index === 1 ? 'text-stone-200 dark:text-stone-800' : 'text-stone-600 dark:text-stone-300'
+                }`}
+              >
+                {body}
+              </p>
+            </article>
+          ))}
+        </div>
+      </section> : null}
+
+      {hasSection('pillars') ? (
+      <StatsStrip
+        stats={dict.metrics.map((m) => ({
+          label: m.label,
+          value: parseInt(m.value) || 0,
+        }))}
+        kicker="BY THE NUMBERS"
+      />
+      ) : null}
+
+      {(hasSection('features') || hasSection('steps')) ? <section className="shell py-10">
+        <div className="grid gap-6 lg:grid-cols-[0.9fr_1.1fr]">
+          {hasSection('features') ? (
+          <div className="rounded-[2rem] border border-stone-200 bg-[linear-gradient(160deg,#f5f8ff_0%,#edf2ff_100%)] p-8 dark:border-blue-900 dark:bg-[linear-gradient(160deg,#0c1830_0%,#10203e_100%)]">
+            <p className="text-xs font-bold uppercase tracking-[0.24em] text-stone-500 dark:text-stone-400">{dict.featureLabel}</p>
+            <div className="mt-6 space-y-3">
+              {dict.features.map((item, index) => (
+                <div key={item} className="flex items-start gap-4 rounded-[1.25rem] border border-stone-200/80 bg-white/85 px-4 py-4 dark:border-blue-800 dark:bg-blue-950/40">
+                  <span className="flex h-8 w-8 shrink-0 items-center justify-center rounded-full bg-orange-600 text-xs font-bold text-white dark:bg-orange-500 dark:text-white">
+                    {index + 1}
+                  </span>
+                  <p className="text-sm font-semibold leading-6 text-stone-800 dark:text-stone-100">{item}</p>
+                </div>
+              ))}
+            </div>
+          </div>
+          ) : <div />}
+        </div>
+      </section> : null}
+
+      {hasSection('howitworks') ? (
+      <HowItWorks
+        steps={dict.howitworksSteps}
+        kicker={dict.howitworksKicker}
+        title={dict.howitworksTitle}
+      />
+      ) : null}
+
+      {hasSection('steps') ? <section className="shell py-10">
+        <div className="rounded-[2rem] border border-stone-200 bg-white p-8 shadow-sm dark:border-blue-900 dark:bg-blue-950">
+          <div className="flex items-end justify-between gap-4">
+            <div>
+              <p className="text-xs font-bold uppercase tracking-[0.24em] text-orange-700 dark:text-orange-300">{dict.readyKicker}</p>
+              <h2 className="mt-4 text-3xl font-black tracking-[-0.03em] text-blue-950 dark:text-stone-50">{dict.stepsTitle}</h2>
+            </div>
+          </div>
+
+          <div className="mt-8 space-y-4">
+            {dict.steps.map(({ step, title, body }) => (
+              <article key={step} className="rounded-[1.5rem] border border-stone-200 bg-stone-50 p-5 dark:border-blue-900 dark:bg-blue-950">
+                <p className="text-xs font-bold uppercase tracking-[0.24em] text-stone-500 dark:text-stone-400">
+                  {dict.stepLabel} {step}
+                </p>
+                <h3 className="mt-3 text-lg font-black text-blue-950 dark:text-stone-50">{title}</h3>
+                <p className="mt-3 text-sm leading-7 text-stone-600 dark:text-stone-300">{body}</p>
+              </article>
+            ))}
+          </div>
+        </div>
+      </section> : null}
+
+      {hasSection('testimonials') && dict.testimonials && dict.testimonials.length > 0 ? (
+      <TestimonialsSection
+        testimonials={dict.testimonials}
+        kicker={dict.testimonialsKicker}
+        title={dict.testimonialsTitle}
+      />
+      ) : null}
+
+      {hasSection('closing') ? <section className="shell pb-16 pt-6 sm:pb-20">
+        <div className="overflow-hidden rounded-[2rem] border border-blue-900/60 bg-[#06132e] px-8 py-10 text-white dark:border-blue-800">
+          <div className="grid gap-8 lg:grid-cols-[1fr_auto] lg:items-end">
+            <div>
+              <p className="text-xs font-bold uppercase tracking-[0.28em] text-orange-300">{dict.readyKicker}</p>
+              <h2 className="mt-4 max-w-3xl text-4xl font-black leading-tight tracking-[-0.04em] sm:text-5xl">{dict.readyTitle}</h2>
+              <p className="mt-5 max-w-2xl text-sm leading-8 text-stone-300 sm:text-base">{dict.readyBody}</p>
+            </div>
+
+            <div className="flex flex-wrap gap-3 lg:justify-end">
+              <a
+                href="/pricing"
+                className="rounded-full border border-white/20 px-6 py-3 text-sm font-semibold text-white transition hover:bg-white hover:text-blue-900"
+              >
+                {dict.viewPricing}
+              </a>
+              <a
+                href={starterSignupHref}
+                className="rounded-full bg-orange-300 px-6 py-3 text-sm font-semibold text-blue-950 transition hover:bg-orange-200"
+              >
+                {dict.createWorkspace}
+              </a>
+            </div>
+          </div>
+        </div>
+      </section> : null}
+    </main>
+  )
+}

apps/homepage/src/app/(public)/app-policy-pages.test.ts

@@ -0,0 +1,31 @@
+import React, { isValidElement } from 'react'
+import { describe, expect, it } from 'vitest'
+import FooterContentPage from '@/components/FooterContentPage'
+import AppPrivacyEnPage from './app-privacy-en/page'
+import AppPrivacyFrPage from './app-privacy-fr/page'
+import AppPrivacyArPage from './app-privacy-ar/page'
+import AppTermsEnPage from './app-tc-en/page'
+import AppTermsFrPage from './app-tc-fr/page'
+import AppTermsArPage from './app-tc-ar/page'
+
+function expectPolicyPage(element: unknown, slug: string, forcedLanguage: string) {
+  expect(isValidElement(element)).toBe(true)
+  const page = element as React.ReactElement
+  expect(page.type).toBe(FooterContentPage)
+  expect(page.props.slug).toBe(slug)
+  expect(page.props.forcedLanguage).toBe(forcedLanguage)
+}
+
+describe('marketplace static app policy pages', () => {
+  it('binds app privacy pages to explicit locales', () => {
+    expectPolicyPage(AppPrivacyEnPage(), 'privacy-policy', 'en')
+    expectPolicyPage(AppPrivacyFrPage(), 'privacy-policy', 'fr')
+    expectPolicyPage(AppPrivacyArPage(), 'privacy-policy', 'ar')
+  })
+
+  it('binds app terms pages to explicit locales and the app terms content slug', () => {
+    expectPolicyPage(AppTermsEnPage(), 'general-conditions', 'en')
+    expectPolicyPage(AppTermsFrPage(), 'general-conditions', 'fr')
+    expectPolicyPage(AppTermsArPage(), 'general-conditions', 'ar')
+  })
+})

apps/homepage/src/app/(public)/app-privacy-ar/page.tsx

@@ -0,0 +1,6 @@
+import React from 'react'
+import FooterContentPage from '@/components/FooterContentPage'
+
+export default function AppPrivacyArPage() {
+  return <FooterContentPage slug="privacy-policy" forcedLanguage="ar" />
+}

apps/homepage/src/app/(public)/app-privacy-en/page.tsx

@@ -0,0 +1,6 @@
+import React from 'react'
+import FooterContentPage from '@/components/FooterContentPage'
+
+export default function AppPrivacyEnPage() {
+  return <FooterContentPage slug="privacy-policy" forcedLanguage="en" />
+}

apps/homepage/src/app/(public)/app-privacy-fr/page.tsx

@@ -0,0 +1,6 @@
+import React from 'react'
+import FooterContentPage from '@/components/FooterContentPage'
+
+export default function AppPrivacyFrPage() {
+  return <FooterContentPage slug="privacy-policy" forcedLanguage="fr" />
+}

apps/homepage/src/app/(public)/app-tc-ar/page.tsx

@@ -0,0 +1,6 @@
+import React from 'react'
+import FooterContentPage from '@/components/FooterContentPage'
+
+export default function AppTermsArPage() {
+  return <FooterContentPage slug="general-conditions" forcedLanguage="ar" />
+}

apps/homepage/src/app/(public)/app-tc-en/page.tsx

@@ -0,0 +1,6 @@
+import React from 'react'
+import FooterContentPage from '@/components/FooterContentPage'
+
+export default function AppTermsEnPage() {
+  return <FooterContentPage slug="general-conditions" forcedLanguage="en" />
+}

apps/homepage/src/app/(public)/app-tc-fr/page.tsx

@@ -0,0 +1,6 @@
+import React from 'react'
+import FooterContentPage from '@/components/FooterContentPage'
+
+export default function AppTermsFrPage() {
+  return <FooterContentPage slug="general-conditions" forcedLanguage="fr" />
+}

apps/homepage/src/app/(public)/company-workspace/page.tsx

@@ -0,0 +1,5 @@
+import { redirect } from 'next/navigation'
+
+export default function CompanyWorkspacePage() {
+  redirect('/')
+}

apps/homepage/src/app/(public)/features/page.tsx

@@ -0,0 +1,159 @@
+'use client'
+
+import {
+  BarChart3,
+  Zap,
+  Users,
+  CreditCard,
+  Lock,
+  Bell,
+} from 'lucide-react'
+import { useMarketplacePreferences } from '@/components/MarketplaceShell'
+import { FeatureAlternating } from '@/components/FeatureAlternating'
+
+const copy = {
+  en: {
+    kicker: 'Features',
+    title: 'Operations, marketplace discovery, and branded booking.',
+    body: "RentalDriveGo combines company-only operations with a public marketplace that sends renters to each company's own payment flow.",
+    features: [
+      {
+        title: 'Private dashboard',
+        body: 'Fleet, reservations, CRM, team permissions, billing, and reports stay isolated per company.',
+        icon: 'BarChart3',
+      },
+      {
+        title: 'Marketplace discovery',
+        body: 'Published vehicles and public offers appear on `/explore` for cross-company browsing.',
+        icon: 'Zap',
+      },
+      {
+        title: 'Branded booking site',
+        body: 'Each company gets its own subdomain where renters complete booking and payment directly.',
+        icon: 'Lock',
+      },
+      {
+        title: 'Payment flexibility',
+        body: 'Use AmanPay or PayPal for subscriptions and for company-side renter payments.',
+        icon: 'CreditCard',
+      },
+      {
+        title: 'Advanced rental ops',
+        body: 'Insurance, additional drivers, pricing rules, and structured fuel policies live in dashboard settings.',
+        icon: 'Users',
+      },
+      {
+        title: 'Notification controls',
+        body: 'Both company staff and renters can manage event-by-channel notification preferences.',
+        icon: 'Bell',
+      },
+    ],
+  },
+  fr: {
+    kicker: 'Fonctionnalités',
+    title: 'Opérations, découverte marketplace et réservation de marque.',
+    body: "RentalDriveGo combine des opérations privées pour l'entreprise avec une marketplace publique qui redirige les clients vers le parcours de paiement propre à chaque société.",
+    features: [
+      {
+        title: 'Tableau de bord privé',
+        body: "Flotte, réservations, CRM, permissions d'équipe, facturation et rapports restent isolés par entreprise.",
+        icon: 'BarChart3',
+      },
+      {
+        title: 'Découverte marketplace',
+        body: 'Les véhicules publiés et les offres publiques apparaissent sur `/explore` pour une navigation multi-entreprises.',
+        icon: 'Zap',
+      },
+      {
+        title: 'Site de réservation de marque',
+        body: 'Chaque entreprise dispose de son propre sous-domaine où les clients finalisent la réservation et le paiement.',
+        icon: 'Lock',
+      },
+      {
+        title: 'Flexibilité de paiement',
+        body: 'Utilisez AmanPay ou PayPal pour les abonnements et pour les paiements côté entreprise.',
+        icon: 'CreditCard',
+      },
+      {
+        title: 'Opérations avancées',
+        body: 'Assurance, conducteurs supplémentaires, règles tarifaires et politiques carburant structurées sont gérés dans les paramètres du tableau de bord.',
+        icon: 'Users',
+      },
+      {
+        title: 'Contrôle des notifications',
+        body: 'Le personnel comme les clients peuvent gérer leurs préférences de notification par événement et canal.',
+        icon: 'Bell',
+      },
+    ],
+  },
+  ar: {
+    kicker: 'المزايا',
+    title: 'العمليات، اكتشاف السوق، والحجز المخصص.',
+    body: 'يجمع RentalDriveGo بين عمليات الشركة الخاصة وسوق عام يوجّه المستأجرين إلى مسار الدفع الخاص بكل شركة.',
+    features: [
+      {
+        title: 'لوحة تحكم خاصة',
+        body: 'الأسطول والحجوزات وCRM وصلاحيات الفريق والفوترة والتقارير تبقى معزولة لكل شركة.',
+        icon: 'BarChart3',
+      },
+      {
+        title: 'اكتشاف عبر السوق',
+        body: 'تظهر السيارات المنشورة والعروض العامة في `/explore` للتصفح بين الشركات.',
+        icon: 'Zap',
+      },
+      {
+        title: 'موقع حجز مخصص',
+        body: 'تحصل كل شركة على نطاق فرعي خاص بها لإتمام الحجز والدفع مباشرة.',
+        icon: 'Lock',
+      },
+      {
+        title: 'مرونة الدفع',
+        body: 'استخدم AmanPay أو PayPal للاشتراكات ومدفوعات المستأجرين من جهة الشركة.',
+        icon: 'CreditCard',
+      },
+      {
+        title: 'عمليات متقدمة',
+        body: 'التأمين والسائقون الإضافيون وقواعد التسعير وسياسات الوقود المنظمة موجودة في إعدادات اللوحة.',
+        icon: 'Users',
+      },
+      {
+        title: 'التحكم في الإشعارات',
+        body: 'يمكن للموظفين والمستأجرين إدارة تفضيلات الإشعارات حسب الحدث والقناة.',
+        icon: 'Bell',
+      },
+    ],
+  },
+} as const
+
+const iconMap = {
+  BarChart3,
+  Zap,
+  Users,
+  CreditCard,
+  Lock,
+  Bell,
+}
+
+export default function FeaturesPage() {
+  const { language } = useMarketplacePreferences()
+  const dict = copy[language]
+
+  const features = dict.features.map((f) => ({
+    ...f,
+    icon: iconMap[f.icon as keyof typeof iconMap],
+  }))
+
+  return (
+    <main className="site-page">
+      <div className="site-section space-y-16">
+        <div className="max-w-3xl">
+          <p className="site-kicker">{dict.kicker}</p>
+          <h1 className="site-title">{dict.title}</h1>
+          <p className="site-lead">{dict.body}</p>
+        </div>
+
+        <FeatureAlternating features={features} />
+      </div>
+    </main>
+  )
+}

apps/homepage/src/app/(public)/footer/[slug]/page.test.ts

@@ -0,0 +1,34 @@
+import React, { isValidElement } from 'react'
+import { describe, expect, it, vi } from 'vitest'
+
+const navigation = vi.hoisted(() => ({
+  notFound: vi.fn(() => {
+    throw new Error('NEXT_NOT_FOUND')
+  }),
+}))
+
+vi.mock('next/navigation', () => navigation)
+
+import FooterContentPage from '@/components/FooterContentPage'
+import FooterPage, { generateStaticParams } from './page'
+import { footerPageSlugs } from '@/lib/footerContent'
+
+describe('marketplace footer route', () => {
+  it('generates one static route per registered footer slug', () => {
+    expect(generateStaticParams()).toEqual(footerPageSlugs.map((slug) => ({ slug })))
+  })
+
+  it('passes valid slugs through to FooterContentPage', () => {
+    const element = FooterPage({ params: { slug: 'privacy-policy' } })
+
+    expect(isValidElement(element)).toBe(true)
+    expect(element.type).toBe(FooterContentPage)
+    expect(element.props.slug).toBe('privacy-policy')
+    expect(element.props.forcedLanguage).toBeUndefined()
+  })
+
+  it('rejects unknown slugs instead of rendering arbitrary policy pages', () => {
+    expect(() => FooterPage({ params: { slug: 'definitely-not-a-policy' } })).toThrow('NEXT_NOT_FOUND')
+    expect(navigation.notFound).toHaveBeenCalled()
+  })
+})

apps/homepage/src/app/(public)/footer/[slug]/page.tsx

@@ -0,0 +1,22 @@
+import React from 'react'
+import { notFound } from 'next/navigation'
+import FooterContentPage from '@/components/FooterContentPage'
+import { footerPageSlugs, isFooterPageSlug } from '@/lib/footerContent'
+
+export function generateStaticParams() {
+  return footerPageSlugs.map((slug) => ({ slug }))
+}
+
+export default function FooterPage({
+  params,
+}: {
+  params: { slug: string }
+}) {
+  const { slug } = params
+
+  if (!isFooterPageSlug(slug)) {
+    notFound()
+  }
+
+  return <FooterContentPage slug={slug} />
+}

apps/homepage/src/app/(public)/layout.tsx

@@ -0,0 +1,41 @@
+'use client'
+
+import MarketplaceHeader from '@/components/MarketplaceHeader'
+import MarketplaceFooter from '@/components/MarketplaceFooter'
+import { useMarketplacePreferences, getFooterContent, localeOptions } from '@/components/MarketplaceShell'
+import { resolveBrowserAppUrl } from '@/lib/appUrls'
+
+export default function PublicLayout({ children }: { children: React.ReactNode }) {
+  const { language, theme, dict, companyName, setLanguage, setTheme } = useMarketplacePreferences()
+  const dashboardUrl = resolveBrowserAppUrl(process.env.NEXT_PUBLIC_DASHBOARD_URL ?? 'http://localhost:3000/dashboard')
+  const footerContent = getFooterContent(language)
+  const available = localeOptions.filter((o) => o.value !== language)
+  const current = localeOptions.find((o) => o.value === language) ?? localeOptions[0]
+
+  return (
+    <div className="site-page flex min-h-screen flex-col">
+      <MarketplaceHeader
+        dict={dict}
+        theme={theme}
+        setTheme={setTheme}
+        companyName={companyName}
+        dashboardUrl={dashboardUrl}
+        currentLanguage={{ value: current.value, flag: current.flag, shortLabel: current.value.toUpperCase() }}
+        localeOptions={available.map((o) => ({ value: o.value, flag: o.flag, shortLabel: o.value.toUpperCase() }))}
+        onSelectLanguage={setLanguage}
+      />
+      <div className="flex flex-1 flex-col">
+        <div className="flex-1">{children}</div>
+        <MarketplaceFooter
+          primaryItems={footerContent.primary}
+          secondaryItems={footerContent.secondary}
+          localeLabel={footerContent.localeLabel}
+          rightsLabel={footerContent.rightsLabel}
+          localeOptions={available}
+          currentLocale={current}
+          onSelectLanguage={setLanguage}
+        />
+      </div>
+    </div>
+  )
+}

apps/homepage/src/app/(public)/page.tsx

@@ -0,0 +1,5 @@
+import HomeContent from './HomeContent'
+
+export default function HomePage() {
+  return <HomeContent />
+}

apps/homepage/src/app/(public)/platform-operations/page.tsx

@@ -0,0 +1,5 @@
+import { redirect } from 'next/navigation'
+
+export default function PlatformOperationsPage() {
+  redirect('/')
+}

apps/homepage/src/app/(public)/pricing/PricingClient.tsx

@@ -0,0 +1,226 @@
+'use client'
+
+import { useEffect, useState } from 'react'
+import Link from 'next/link'
+import { getCurrencyLabel, PLAN_FEATURES, PLAN_PRICES } from '@rentaldrivego/types'
+import { useMarketplacePreferences } from '@/components/MarketplaceShell'
+import { marketplaceFetchOrDefault } from '@/lib/api'
+import { resolveBrowserAppUrl } from '@/lib/appUrls'
+
+type Billing = 'monthly' | 'annual'
+
+type PricingMatrix = Record<string, Record<string, Record<string, number>>>
+type PlanFeatureMap = Record<string, string[]>
+
+type PlatformPricing = {
+  prices: PricingMatrix
+  planFeatures: PlanFeatureMap
+}
+
+export const DEFAULT_PRICING: PlatformPricing = {
+  prices: PLAN_PRICES,
+  planFeatures: PLAN_FEATURES,
+}
+
+const PLANS = [
+  {
+    key: 'STARTER',
+    name: 'Starter',
+    tagline: 'Launch your fleet online',
+    highlight: false,
+  },
+  {
+    key: 'GROWTH',
+    name: 'Growth',
+    tagline: 'Scale with confidence',
+    highlight: true,
+  },
+  {
+    key: 'PRO',
+    name: 'Pro',
+    tagline: 'Enterprise-grade power',
+    highlight: false,
+  },
+]
+
+const copy = {
+  en: {
+    monthly: 'Monthly',
+    annual: 'Annual',
+    yearly: '/ year',
+    youSave: 'You save',
+    withAnnual: 'with annual billing — billed as one payment per year.',
+    mostPopular: 'Most popular',
+    perMonth: '/mo',
+    billedAs: 'Billed as',
+    getStarted: 'Get started',
+    footer: 'All plans include a 90-day free trial. No credit card required.',
+  },
+  fr: {
+    monthly: 'Mensuel',
+    annual: 'Annuel',
+    yearly: '/ an',
+    youSave: 'Vous économisez',
+    withAnnual: 'avec la facturation annuelle, prélevée en un seul paiement par an.',
+    mostPopular: 'Le plus populaire',
+    perMonth: '/mois',
+    billedAs: 'Facturé à',
+    getStarted: 'Commencer',
+    footer: "Toutes les formules incluent un essai gratuit de 90 jours. Aucune carte bancaire n'est requise.",
+  },
+  ar: {
+    monthly: 'شهري',
+    annual: 'سنوي',
+    yearly: '/ سنة',
+    youSave: 'توفر',
+    withAnnual: 'مع الفوترة السنوية، تُسدد دفعة واحدة كل سنة.',
+    mostPopular: 'الأكثر شيوعاً',
+    perMonth: '/شهر',
+    billedAs: 'يتم الفوترة بمبلغ',
+    getStarted: 'ابدأ الآن',
+    footer: 'تشمل جميع الخطط تجربة مجانية لمدة 14 يوماً. لا حاجة إلى بطاقة ائتمان.',
+  },
+} as const
+
+function getPlanPrice(prices: PricingMatrix, plan: string, billingPeriod: 'MONTHLY' | 'ANNUAL') {
+  return (prices[plan]?.[billingPeriod]?.MAD ?? PLAN_PRICES[plan]?.[billingPeriod]?.MAD ?? 0) / 100
+}
+
+function annualSavingsPct(prices: PricingMatrix, plan: string): number {
+  const monthly = getPlanPrice(prices, plan, 'MONTHLY')
+  const annual = getPlanPrice(prices, plan, 'ANNUAL')
+  const wouldPay = monthly * 12
+  if (wouldPay <= 0) return 0
+  return Math.max(0, Math.round(((wouldPay - annual) / wouldPay) * 100))
+}
+
+export default function PricingClient({ initialPricing = DEFAULT_PRICING }: { initialPricing?: PlatformPricing }) {
+  const { language } = useMarketplacePreferences()
+  const currencyLabel = getCurrencyLabel(language)
+  const dict = copy[language]
+  const [billing, setBilling] = useState<Billing>('monthly')
+  const [pricing, setPricing] = useState<PlatformPricing>(initialPricing)
+
+  const dashboardUrl = resolveBrowserAppUrl(process.env.NEXT_PUBLIC_DASHBOARD_URL ?? 'http://localhost:3000/dashboard')
+
+  useEffect(() => {
+    marketplaceFetchOrDefault<PlatformPricing>('/site/platform/pricing', DEFAULT_PRICING)
+      .then(setPricing)
+  }, [])
+
+  const savings = annualSavingsPct(pricing.prices, 'STARTER')
+
+  return (
+    <div className="space-y-10">
+      {/* Billing toggle */}
+      <div className="flex items-center justify-center gap-1 rounded-full border border-stone-200 bg-white p-1 shadow-sm dark:border-blue-800 dark:bg-blue-950">
+        {(['monthly', 'annual'] as Billing[]).map((b) => (
+          <button
+            key={b}
+            onClick={() => setBilling(b)}
+            className={`relative rounded-full px-5 py-2 text-sm font-semibold transition-colors ${
+              billing === b
+                ? 'bg-blue-900 text-white dark:bg-orange-400 dark:text-white'
+                : 'text-stone-600 hover:text-stone-900 dark:text-stone-400 dark:hover:text-stone-100'
+            }`}
+          >
+            {b === 'monthly' ? dict.monthly : dict.annual}
+            {b === 'annual' && billing !== 'annual' && (
+              <span className="ml-2 rounded-full bg-orange-100 px-2 py-0.5 text-[10px] font-bold text-orange-700 dark:bg-orange-950/50 dark:text-orange-400">
+                -{savings}%
+              </span>
+            )}
+          </button>
+        ))}
+      </div>
+
+      {billing === 'annual' && (
+        <p className="text-center text-sm font-medium text-orange-700 dark:text-orange-400">
+          {dict.youSave} {savings}% {dict.withAnnual}
+        </p>
+      )}
+
+      {/* Plan cards */}
+      <div className="grid gap-6 md:grid-cols-3">
+        {PLANS.map((plan) => {
+          const monthlyPrice = getPlanPrice(pricing.prices, plan.key, 'MONTHLY')
+          const annualPrice = getPlanPrice(pricing.prices, plan.key, 'ANNUAL')
+          const displayPrice = billing === 'annual'
+            ? Math.round(annualPrice / 12)
+            : monthlyPrice
+          const features = pricing.planFeatures[plan.key] ?? PLAN_FEATURES[plan.key] ?? []
+
+          return (
+            <div
+              key={plan.key}
+              className={`card relative flex flex-col overflow-hidden ${
+                plan.highlight
+                  ? 'border-orange-400 ring-2 ring-orange-400 ring-offset-2 dark:ring-offset-blue-950'
+                  : ''
+              }`}
+            >
+              {plan.highlight && (
+                <div className="bg-orange-500 dark:bg-orange-400 py-1.5 text-center text-xs font-bold uppercase tracking-widest text-white dark:text-stone-900">
+                  {dict.mostPopular}
+                </div>
+              )}
+
+              <div className="flex flex-1 flex-col p-8">
+                <p className="text-xs font-bold uppercase tracking-[0.2em] text-orange-700 dark:text-orange-400">
+                  {plan.name}
+                </p>
+                <p className="mt-1 text-sm text-stone-500 dark:text-stone-400">{plan.tagline}</p>
+
+                <div className="mt-6">
+                  <div className="flex items-end gap-1">
+                    <span className="text-4xl font-black text-stone-900 dark:text-stone-100">
+                      {displayPrice}
+                    </span>
+                    <span className="mb-1 text-lg font-semibold text-stone-500 dark:text-stone-400">{currencyLabel}</span>
+                    <span className="mb-1 text-sm text-stone-400 dark:text-stone-500">{dict.perMonth}</span>
+                  </div>
+                  {billing === 'annual' && (
+                    <p className="mt-1 text-xs text-stone-400 dark:text-stone-500">
+                      {dict.billedAs} {annualPrice} {currencyLabel} {dict.yearly}
+                    </p>
+                  )}
+                </div>
+
+                <ul className="mt-8 flex-1 space-y-3">
+                  {features.map((f) => (
+                    <li key={f} className="flex items-start gap-2.5 text-sm text-stone-700 dark:text-stone-300">
+                      <svg
+                        className="mt-0.5 h-4 w-4 shrink-0 text-orange-500 dark:text-orange-400"
+                        fill="none"
+                        stroke="currentColor"
+                        strokeWidth={2.5}
+                        viewBox="0 0 24 24"
+                      >
+                        <path strokeLinecap="round" strokeLinejoin="round" d="M4.5 12.75l6 6 9-13.5" />
+                      </svg>
+                      {f}
+                    </li>
+                  ))}
+                </ul>
+
+                <a
+                  href={`${dashboardUrl}/sign-up?plan=${plan.key}&billing=${billing.toUpperCase()}&currency=MAD`}
+                  className={`mt-10 block rounded-full px-6 py-3 text-center text-sm font-semibold transition-colors ${
+                    plan.highlight
+                      ? 'bg-orange-500 text-white hover:bg-orange-600 dark:bg-orange-400 dark:text-stone-900 dark:hover:bg-orange-300'
+                      : 'bg-blue-900 text-white hover:bg-orange-700 dark:bg-orange-500 dark:text-white dark:hover:bg-orange-400'
+                  }`}
+                >
+                  {dict.getStarted}
+                </a>
+              </div>
+            </div>
+          )
+        })}
+      </div>
+
+      {/* Footer note */}
+      <p className="text-center text-sm text-stone-400 dark:text-stone-500">{dict.footer}</p>
+    </div>
+  )
+}

apps/homepage/src/app/(public)/pricing/PricingPageContent.tsx

@@ -0,0 +1,74 @@
+'use client'
+
+import { useMarketplacePreferences } from '@/components/MarketplaceShell'
+import PricingClient from './PricingClient'
+
+const copy = {
+  en: {
+    kicker: 'Pricing',
+    title: 'One platform, every fleet size.',
+    body: 'Start free for 90 days, then choose the plan that grows with your business. Switch plans or cancel at any time.',
+    faq: 'Frequently asked',
+    items: [
+      ['Can I change plans later?', 'Yes. Upgrade or downgrade at any time — changes take effect on your next billing cycle.'],
+      ['What counts as a vehicle?', 'Any vehicle record added to your fleet dashboard, active or not.'],
+      ['Is there a setup fee?', 'No setup fee, ever. You only pay the monthly or annual subscription.'],
+      ['How does the marketplace listing work?', 'All paid plans include a public marketplace listing on RentalDriveGo. Renters can discover your fleet and are redirected to your branded booking site.'],
+    ],
+  },
+  fr: {
+    kicker: 'Tarifs',
+    title: 'Une seule plateforme pour toutes les tailles de flotte.',
+    body: 'Commencez gratuitement pendant 90 jours, puis choisissez la formule qui accompagne votre activité. Vous pouvez changer de formule ou annuler à tout moment.',
+    faq: 'Questions fréquentes',
+    items: [
+      ['Puis-je changer de formule plus tard ?', 'Oui. Vous pouvez passer à une formule supérieure ou inférieure à tout moment. Les changements prennent effet au cycle de facturation suivant.'],
+      ["Qu'est-ce qui compte comme véhicule ?", "Tout véhicule ajouté à votre tableau de bord de flotte, qu'il soit actif ou non."],
+      ["Y a-t-il des frais d'installation ?", "Aucun frais d'installation. Vous payez uniquement l'abonnement mensuel ou annuel."],
+      ['Comment fonctionne la visibilité marketplace ?', 'Toutes les formules payantes incluent une présence publique sur RentalDriveGo. Les clients découvrent votre flotte puis sont redirigés vers votre site de réservation.'],
+    ],
+  },
+  ar: {
+    kicker: 'الأسعار',
+    title: 'منصة واحدة لكل أحجام الأساطيل.',
+    body: 'ابدأ مجاناً لمدة 14 يوماً، ثم اختر الخطة التي تناسب نمو نشاطك. يمكنك تغيير الخطة أو إلغاءها في أي وقت.',
+    faq: 'الأسئلة الشائعة',
+    items: [
+      ['هل يمكنني تغيير الخطة لاحقاً؟', 'نعم. يمكنك الترقية أو التخفيض في أي وقت — وتدخل التغييرات حيز التنفيذ في دورة الفوترة التالية.'],
+      ['ما الذي يُحتسب كسيارة؟', 'أي سجل سيارة تتم إضافته إلى لوحة الأسطول سواء كان نشطاً أم لا.'],
+      ['هل توجد رسوم إعداد؟', 'لا توجد أي رسوم إعداد. أنت تدفع فقط قيمة الاشتراك الشهري أو السنوي.'],
+      ['كيف تعمل قائمة السوق؟', 'كل الخطط المدفوعة تشمل الظهور العام على RentalDriveGo. يكتشف المستأجرون أسطولك ثم يتم تحويلهم إلى موقع الحجز الخاص بك.'],
+    ],
+  },
+} as const
+
+export default function PricingPageContent({ initialPricing }: { initialPricing?: React.ComponentProps<typeof PricingClient>['initialPricing'] }) {
+  const { language } = useMarketplacePreferences()
+  const dict = copy[language]
+
+  return (
+    <main className="site-page">
+      <div className="site-section">
+        <div className="mx-auto max-w-2xl text-center">
+          <p className="site-kicker">{dict.kicker}</p>
+          <h1 className="site-title">{dict.title}</h1>
+          <p className="site-lead">{dict.body}</p>
+        </div>
+
+        <div className="mt-16">
+          <PricingClient initialPricing={initialPricing} />
+        </div>
+
+        <div className="site-panel mx-auto mt-24 max-w-3xl divide-y divide-stone-200/80 dark:divide-stone-800">
+          <h2 className="pb-8 text-2xl font-bold text-stone-900 dark:text-stone-100">{dict.faq}</h2>
+          {dict.items.map(([q, a]) => (
+            <div key={q} className="py-6">
+              <p className="font-semibold text-stone-900 dark:text-stone-100">{q}</p>
+              <p className="mt-2 text-sm leading-6 text-stone-600 dark:text-stone-400">{a}</p>
+            </div>
+          ))}
+        </div>
+      </div>
+    </main>
+  )
+}

apps/homepage/src/app/(public)/pricing/page.tsx

@@ -0,0 +1,19 @@
+import type { Metadata } from 'next'
+import { PLAN_FEATURES, PLAN_PRICES } from '@rentaldrivego/types'
+import { marketplaceFetchOrDefault } from '@/lib/api'
+import PricingPageContent from './PricingPageContent'
+
+export const metadata: Metadata = {
+  title: 'Pricing — RentalDriveGo',
+  description: 'Simple, transparent pricing for every fleet size.',
+}
+
+const DEFAULT_PRICING = {
+  prices: PLAN_PRICES,
+  planFeatures: PLAN_FEATURES,
+}
+
+export default async function PricingPage() {
+  const initialPricing = await marketplaceFetchOrDefault('/site/platform/pricing', DEFAULT_PRICING)
+  return <PricingPageContent initialPricing={initialPricing} />
+}

apps/homepage/src/app/(public)/review/page.tsx

@@ -0,0 +1,212 @@
+'use client'
+
+import { Suspense, useEffect, useState } from 'react'
+import { useSearchParams } from 'next/navigation'
+import { Star } from 'lucide-react'
+
+const API_BASE = process.env.NEXT_PUBLIC_API_URL ?? 'http://localhost:4000/api/v1'
+
+interface ReviewInfo {
+  reservationId: string
+  companyName: string
+  companyLogoUrl: string | null
+  vehicle: string
+  vehiclePhoto: string | null
+}
+
+function StarRating({ value, onChange, label }: { value: number; onChange: (v: number) => void; label: string }) {
+  const [hovered, setHovered] = useState(0)
+  return (
+    <div>
+      <p className="mb-1.5 text-sm font-medium text-stone-700 dark:text-stone-300">{label}</p>
+      <div className="flex gap-1">
+        {[1, 2, 3, 4, 5].map((n) => (
+          <button
+            key={n}
+            type="button"
+            onClick={() => onChange(n)}
+            onMouseEnter={() => setHovered(n)}
+            onMouseLeave={() => setHovered(0)}
+            className="p-0.5 transition-transform hover:scale-110"
+            aria-label={`${n} star${n > 1 ? 's' : ''}`}
+          >
+            <Star
+              className={`h-8 w-8 transition-colors ${
+                n <= (hovered || value)
+                  ? 'fill-orange-400 text-orange-400'
+                  : 'fill-stone-200 text-stone-200 dark:fill-stone-700 dark:text-stone-700'
+              }`}
+            />
+          </button>
+        ))}
+      </div>
+    </div>
+  )
+}
+
+function ReviewPageContent() {
+  const params = useSearchParams()
+  const token = params.get('token') ?? ''
+
+  const [info, setInfo] = useState<ReviewInfo | null>(null)
+  const [loadState, setLoadState] = useState<'loading' | 'ready' | 'already_reviewed' | 'invalid'>('loading')
+
+  const [overall, setOverall] = useState(0)
+  const [vehicle, setVehicle] = useState(0)
+  const [service, setService] = useState(0)
+  const [comment, setComment] = useState('')
+  const [submitState, setSubmitState] = useState<'idle' | 'submitting' | 'done' | 'error'>('idle')
+  const [errorMsg, setErrorMsg] = useState('')
+
+  useEffect(() => {
+    if (!token) { setLoadState('invalid'); return }
+    fetch(`${API_BASE}/marketplace/review/${token}`)
+      .then(async (r) => {
+        if (r.status === 409) { setLoadState('already_reviewed'); return }
+        if (!r.ok) { setLoadState('invalid'); return }
+        const json = await r.json()
+        setInfo(json.data)
+        setLoadState('ready')
+      })
+      .catch(() => setLoadState('invalid'))
+  }, [token])
+
+  async function handleSubmit(e: React.FormEvent) {
+    e.preventDefault()
+    if (overall === 0) { setErrorMsg('Please select an overall rating.'); return }
+    setSubmitState('submitting')
+    setErrorMsg('')
+    try {
+      const res = await fetch(`${API_BASE}/marketplace/review/${token}`, {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({
+          overallRating: overall,
+          vehicleRating: vehicle || undefined,
+          serviceRating: service || undefined,
+          comment: comment.trim() || undefined,
+        }),
+      })
+      if (res.status === 409) { setLoadState('already_reviewed'); return }
+      if (!res.ok) {
+        const json = await res.json()
+        throw new Error(json.message ?? 'Something went wrong.')
+      }
+      setSubmitState('done')
+    } catch (err: any) {
+      setSubmitState('error')
+      setErrorMsg(err.message ?? 'Something went wrong. Please try again.')
+    }
+  }
+
+  if (loadState === 'loading') {
+    return (
+      <main className="site-page flex min-h-screen items-center justify-center p-6">
+        <p className="text-sm text-stone-500 dark:text-stone-400">Loading…</p>
+      </main>
+    )
+  }
+
+  if (loadState === 'invalid') {
+    return (
+      <main className="site-page flex min-h-screen items-center justify-center p-6">
+        <div className="card w-full max-w-md space-y-3 p-8 text-center">
+          <p className="text-2xl font-black text-stone-900 dark:text-stone-100">Link not found</p>
+          <p className="text-sm text-stone-500 dark:text-stone-400">This review link is invalid or has already been used.</p>
+        </div>
+      </main>
+    )
+  }
+
+  if (loadState === 'already_reviewed') {
+    return (
+      <main className="site-page flex min-h-screen items-center justify-center p-6">
+        <div className="card w-full max-w-md space-y-3 p-8 text-center">
+          <div className="mx-auto flex h-14 w-14 items-center justify-center rounded-full bg-emerald-100 dark:bg-emerald-950/50">
+            <svg className="h-7 w-7 text-emerald-600 dark:text-emerald-400" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}><path strokeLinecap="round" strokeLinejoin="round" d="M5 13l4 4L19 7" /></svg>
+          </div>
+          <p className="text-xl font-bold text-stone-900 dark:text-stone-100">Already reviewed</p>
+          <p className="text-sm text-stone-500 dark:text-stone-400">You have already submitted a review for this rental. Thank you!</p>
+        </div>
+      </main>
+    )
+  }
+
+  if (submitState === 'done') {
+    return (
+      <main className="site-page flex min-h-screen items-center justify-center p-6">
+        <div className="card w-full max-w-md space-y-4 p-8 text-center">
+          <div className="mx-auto flex h-16 w-16 items-center justify-center rounded-full bg-emerald-100 dark:bg-emerald-950/50">
+            <svg className="h-8 w-8 text-emerald-600 dark:text-emerald-400" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}><path strokeLinecap="round" strokeLinejoin="round" d="M5 13l4 4L19 7" /></svg>
+          </div>
+          <h1 className="text-2xl font-black text-stone-900 dark:text-stone-100">Thank you!</h1>
+          <p className="text-stone-500 dark:text-stone-400">Your review has been submitted and will be visible on {info?.companyName}'s profile.</p>
+        </div>
+      </main>
+    )
+  }
+
+  return (
+    <main className="site-page flex min-h-screen items-center justify-center p-6">
+      <div className="card w-full max-w-lg overflow-hidden">
+        {/* Header */}
+        <div className="flex items-center gap-4 border-b border-stone-200 dark:border-blue-900 p-6">
+          {info?.vehiclePhoto ? (
+            // eslint-disable-next-line @next/next/no-img-element
+            <img src={info.vehiclePhoto} alt={info.vehicle} className="h-16 w-24 flex-shrink-0 rounded-xl object-cover" />
+          ) : (
+            <div className="h-16 w-24 flex-shrink-0 rounded-xl bg-stone-100 dark:bg-blue-900/30" />
+          )}
+          <div className="min-w-0">
+            <p className="truncate text-xs uppercase tracking-widest text-stone-400 dark:text-stone-500">{info?.companyName}</p>
+            <h1 className="mt-0.5 truncate text-lg font-bold text-stone-900 dark:text-stone-100">{info?.vehicle}</h1>
+            <p className="mt-0.5 text-sm text-stone-500 dark:text-stone-400">How was your experience?</p>
+          </div>
+        </div>
+
+        <form onSubmit={handleSubmit} className="space-y-6 p-6">
+          <StarRating value={overall} onChange={setOverall} label="Overall experience *" />
+          <StarRating value={vehicle} onChange={setVehicle} label="Vehicle condition (optional)" />
+          <StarRating value={service} onChange={setService} label="Customer service (optional)" />
+
+          <div>
+            <label className="mb-1.5 block text-sm font-medium text-stone-700 dark:text-stone-300">Comments (optional)</label>
+            <textarea
+              rows={4}
+              value={comment}
+              onChange={(e) => setComment(e.target.value)}
+              placeholder="Tell us about your rental experience…"
+              className="w-full resize-none rounded-xl border border-stone-200 dark:border-blue-800 bg-white dark:bg-blue-950 px-4 py-3 text-sm text-stone-900 dark:text-stone-100 placeholder:text-stone-400 dark:placeholder:text-stone-500 focus:outline-none focus:ring-2 focus:ring-stone-900 dark:focus:ring-stone-400"
+            />
+          </div>
+
+          {errorMsg && (
+            <p className="rounded-xl bg-rose-50 dark:bg-rose-950/40 px-4 py-3 text-sm text-rose-700 dark:text-rose-400">{errorMsg}</p>
+          )}
+
+          <button
+            type="submit"
+            disabled={submitState === 'submitting'}
+            className="w-full rounded-full bg-orange-600 py-3 text-sm font-semibold text-white transition-colors hover:bg-orange-700 disabled:opacity-60 dark:bg-orange-500 dark:text-white dark:hover:bg-orange-400"
+          >
+            {submitState === 'submitting' ? 'Submitting…' : 'Submit review'}
+          </button>
+        </form>
+      </div>
+    </main>
+  )
+}
+
+export default function ReviewPage() {
+  return (
+    <Suspense
+      fallback={
+        <main className="site-page flex min-h-screen items-center justify-center p-6">
+          <p className="text-sm text-stone-500 dark:text-stone-400">Loading…</p>
+        </main>
+      }
+    >
+      <ReviewPageContent />
+    </Suspense>
+  )
+}

apps/homepage/src/app/globals.css

@@ -0,0 +1,108 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+body {
+  @apply bg-white text-blue-950 antialiased transition-colors dark:text-slate-100;
+}
+
+html.dark body {
+  background-image:
+    linear-gradient(180deg, #0a1535 0%, #0d1f52 35%, #091228 100%);
+}
+
+.shell {
+  @apply mx-auto max-w-7xl px-4 sm:px-6 lg:px-8;
+}
+
+.card {
+  @apply rounded-[2rem] border shadow-[0_30px_80px_rgba(28,25,23,0.08)] backdrop-blur transition-colors dark:shadow-[0_30px_80px_rgba(0,0,0,0.36)];
+  border-color: rgb(231 229 228 / 0.8);
+  background-color: rgb(255 255 255 / 0.82);
+}
+
+html.dark .card {
+  border-color: rgb(30 60 140 / 0.40);
+  background-color: rgb(11 25 55 / 0.72);
+}
+
+.site-page {
+  @apply min-h-screen overflow-hidden text-blue-950;
+  background-image:
+    linear-gradient(180deg, #ffffff 0%, #f5f8ff 28%, #eef4ff 58%, #ffffff 100%);
+}
+
+html.dark .site-page {
+  @apply text-slate-100;
+  background-image:
+    linear-gradient(180deg, #0a1535 0%, #0d1f52 35%, #091228 100%);
+}
+
+.site-glow {
+  background-image:
+    radial-gradient(circle at top left, rgba(234, 88, 12, 0.24), transparent 34%),
+    radial-gradient(circle at top right, rgba(59, 130, 246, 0.18), transparent 26%);
+}
+
+html.dark .site-glow {
+  background-image:
+    radial-gradient(circle at top left, rgba(251, 146, 60, 0.22), transparent 34%),
+    radial-gradient(circle at top right, rgba(96, 165, 250, 0.18), transparent 26%);
+}
+
+.site-section {
+  @apply shell py-10 sm:py-14 lg:py-16;
+}
+
+.site-panel {
+  @apply rounded-[2rem] border p-7 shadow-[0_30px_80px_rgba(28,25,23,0.08)] backdrop-blur transition-colors sm:p-8;
+  border-color: rgb(231 229 228 / 0.8);
+  background-color: rgb(255 255 255 / 0.82);
+}
+
+html.dark .site-panel {
+  border-color: rgb(30 60 140 / 0.40);
+  background-color: rgb(11 25 55 / 0.72);
+  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.36);
+}
+
+.site-panel-muted {
+  @apply rounded-[2rem] border p-7 transition-colors sm:p-8;
+  border-color: rgb(231 229 228 / 0.8);
+  background-image: linear-gradient(160deg, #f5f8ff 0%, #edf2ff 100%);
+}
+
+html.dark .site-panel-muted {
+  border-color: rgb(30 60 140 / 0.40);
+  background-image: linear-gradient(160deg, #0c1830 0%, #10203e 100%);
+}
+
+.site-panel-contrast {
+  @apply rounded-[2rem] border p-7 text-white shadow-[0_30px_80px_rgba(28,25,23,0.18)] transition-colors sm:p-8;
+  border-color: rgb(14 40 90 / 0.8);
+  background-color: rgb(10 25 75);
+}
+
+html.dark .site-panel-contrast {
+  border-color: rgb(30 64 175);
+}
+
+.site-kicker {
+  @apply text-xs font-bold uppercase tracking-[0.28em] text-orange-600 dark:text-orange-400;
+}
+
+.site-title {
+  @apply mt-4 text-4xl font-black tracking-[-0.04em] text-blue-950 dark:text-white sm:text-5xl;
+}
+
+.site-lead {
+  @apply mt-5 text-base leading-8 text-stone-600 dark:text-slate-300 sm:text-lg;
+}
+
+.site-link-primary {
+  @apply rounded-full bg-orange-600 px-6 py-3 text-sm font-semibold text-white transition hover:bg-orange-700 dark:bg-orange-500 dark:hover:bg-orange-400;
+}
+
+.site-link-secondary {
+  @apply rounded-full border border-stone-300 bg-white/85 px-6 py-3 text-sm font-semibold text-stone-700 transition hover:border-blue-900 hover:text-blue-900 dark:border-blue-800 dark:bg-blue-950/30 dark:text-blue-100 dark:hover:border-blue-400 dark:hover:text-white;
+}

apps/homepage/src/app/layout.tsx

@@ -0,0 +1,41 @@
+import type { Metadata } from 'next'
+import { cookies } from 'next/headers'
+import MarketplaceShell from '@/components/MarketplaceShell'
+import { getMarketplaceLanguage } from '@/lib/i18n.server'
+import './globals.css'
+
+export const metadata: Metadata = {
+  title: 'FleetOS Marketplace',
+  description: 'Discover vehicles from trusted rental companies.',
+  icons: {
+    icon: '/rentalcardrive.png',
+    shortcut: '/favicon.ico',
+    apple: '/rentalcardrive.png',
+  },
+}
+
+export default async function RootLayout({ children }: { children: React.ReactNode }) {
+  const language = await getMarketplaceLanguage()
+  const cookieStore = await cookies()
+  const rawTheme =
+    cookieStore.get('rentaldrivego-theme')?.value ??
+    cookieStore.get('marketplace-theme')?.value
+  const theme = rawTheme === 'dark' ? 'dark' : 'light'
+
+  return (
+    <html lang={language} dir={language === 'ar' ? 'rtl' : 'ltr'} suppressHydrationWarning>
+      <head>
+        {/* Runs before hydration to prevent flash of wrong theme */}
+        <script
+          dangerouslySetInnerHTML={{
+            __html:
+              "(function(){try{var m=document.cookie.match(/(?:^|; )rentaldrivego-theme=([^;]+)/);var theme=m?decodeURIComponent(m[1]):(localStorage.getItem('rentaldrivego-theme')||localStorage.getItem('marketplace-theme'));if(theme!=='light'&&theme!=='dark'){theme=window.matchMedia('(prefers-color-scheme: dark)').matches?'dark':'light'}document.documentElement.classList.toggle('dark',theme==='dark');document.documentElement.style.colorScheme=theme;document.body&&document.body.setAttribute('data-theme',theme)}catch(e){}})();",
+          }}
+        />
+      </head>
+      <body suppressHydrationWarning>
+        <MarketplaceShell initialLanguage={language} initialTheme={theme}>{children}</MarketplaceShell>
+      </body>
+    </html>
+  )
+}

apps/homepage/src/components/FeatureAlternating.tsx

@@ -0,0 +1,63 @@
+'use client'
+
+import { LucideIcon } from 'lucide-react'
+
+interface Feature {
+  title: string
+  body: string
+  icon?: LucideIcon
+}
+
+interface FeatureAlternatingProps {
+  features: Feature[]
+}
+
+export function FeatureAlternating({ features }: FeatureAlternatingProps) {
+  return (
+    <div className="space-y-16 lg:space-y-20">
+      {features.map((feature, index) => {
+        const Icon = feature.icon
+        const isEven = index % 2 === 0
+
+        return (
+          <div
+            key={feature.title}
+            className={`grid gap-12 items-center ${isEven ? 'lg:grid-cols-[1.1fr_0.9fr]' : 'lg:grid-cols-[0.9fr_1.1fr]'}`}
+          >
+            <div className={isEven ? 'order-1 lg:order-none' : 'order-2 lg:order-none'}>
+              <div className="site-panel">
+                <div className="flex items-start gap-3">
+                  {Icon && <Icon className="mt-1 h-6 w-6 shrink-0 text-orange-600 dark:text-orange-500" />}
+                  <div>
+                    <h2 className="text-2xl font-black text-blue-950 dark:text-white sm:text-3xl">
+                      {feature.title}
+                    </h2>
+                    <p className="mt-4 text-base leading-8 text-stone-600 dark:text-stone-300 sm:text-lg">
+                      {feature.body}
+                    </p>
+                  </div>
+                </div>
+              </div>
+            </div>
+
+            <div
+              className={`order-2 lg:order-none ${isEven ? 'order-2 lg:order-none' : 'order-1 lg:order-none'}`}
+            >
+              <div className="site-panel-muted flex h-48 items-center justify-center sm:h-56 lg:h-80">
+                {Icon ? (
+                  <Icon className="h-24 w-24 text-orange-600/20 dark:text-orange-500/20" />
+                ) : (
+                  <div className="text-center">
+                    <p className="text-sm font-semibold text-stone-400 dark:text-stone-600">
+                      {feature.title}
+                    </p>
+                  </div>
+                )}
+              </div>
+            </div>
+          </div>
+        )
+      })}
+    </div>
+  )
+}

apps/homepage/src/components/FooterContentPage.test.ts

@@ -0,0 +1,64 @@
+import React, { isValidElement } from 'react'
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+
+const preferenceState = vi.hoisted(() => ({ language: 'en' as 'en' | 'fr' | 'ar' }))
+
+vi.mock('@/components/MarketplaceShell', () => ({
+  useMarketplacePreferences: () => ({ language: preferenceState.language, theme: 'light' }),
+}))
+
+import FooterContentPage from './FooterContentPage'
+
+function collectText(node: unknown): string[] {
+  if (node === null || node === undefined || typeof node === 'boolean') return []
+  if (typeof node === 'string' || typeof node === 'number') return [String(node)]
+  if (Array.isArray(node)) return node.flatMap(collectText)
+  if (isValidElement<{ children?: React.ReactNode }>(node)) return collectText(node.props.children)
+  return []
+}
+
+function collectElements(node: unknown): React.ReactElement[] {
+  if (node === null || node === undefined || typeof node === 'boolean') return []
+  if (Array.isArray(node)) return node.flatMap(collectElements)
+  if (!isValidElement<{ children?: React.ReactNode }>(node)) return []
+  return [node, ...collectElements(node.props.children)]
+}
+
+describe('FooterContentPage', () => {
+  beforeEach(() => {
+    preferenceState.language = 'en'
+  })
+
+  it('uses the current marketplace language when no forced language is provided', () => {
+    preferenceState.language = 'fr'
+    const page = FooterContentPage({ slug: 'contact-sales' })
+    const text = collectText(page).join(' ')
+
+    expect(text).toContain('Informations du pied de page')
+    expect(text).toContain('Besoin de plus de détails')
+  })
+
+  it('lets static app policy pages force their own locale', () => {
+    preferenceState.language = 'en'
+    const page = FooterContentPage({ slug: 'terms-of-service', forcedLanguage: 'fr' })
+    const text = collectText(page).join(' ')
+
+    expect(text).toContain('Informations du pied de page')
+    expect(text).not.toContain('Footer information')
+  })
+
+  it('marks Arabic content as right-aligned', () => {
+    const page = FooterContentPage({ slug: 'privacy-policy', forcedLanguage: 'ar' })
+    const elements = collectElements(page)
+
+    expect(elements.some((element) => String(element.props.className ?? '').includes('text-right'))).toBe(true)
+  })
+
+  it('turns plain URLs embedded in policy paragraphs into safe anchors', () => {
+    const page = FooterContentPage({ slug: 'privacy-policy', forcedLanguage: 'en' })
+    const links = collectElements(page).filter((element) => element.type === 'a')
+
+    expect(links.some((link) => String(link.props.href).startsWith('https://'))).toBe(true)
+    expect(links.every((link) => link.props.href === collectText(link).join(''))).toBe(true)
+  })
+})

apps/homepage/src/components/FooterContentPage.tsx

@@ -0,0 +1,107 @@
+'use client'
+
+import React from 'react'
+
+import { useMarketplacePreferences } from '@/components/MarketplaceShell'
+import { type FooterPageSlug, getFooterPageContent } from '@/lib/footerContent'
+import { type MarketplaceLanguage } from '@/lib/i18n'
+
+const pageMeta = {
+  en: {
+    kicker: 'Footer information',
+    cta: 'Need more details?',
+    support: 'Contact the RentalDriveGo team through our official channels for business, support, or partnership requests.',
+  },
+  fr: {
+    kicker: 'Informations du pied de page',
+    cta: 'Besoin de plus de détails ?',
+    support: "Contactez l'équipe RentalDriveGo via nos canaux officiels pour toute demande commerciale, support ou partenariat.",
+  },
+  ar: {
+    kicker: 'معلومات التذييل',
+    cta: 'هل تحتاج إلى مزيد من التفاصيل؟',
+    support: 'تواصل مع فريق RentalDriveGo عبر القنوات الرسمية للاستفسارات التجارية أو الدعم أو الشراكات.',
+  },
+} as const
+
+const urlPattern = /(https?:\/\/[^\s]+)/g
+
+function renderParagraphText(paragraph: string) {
+  const parts = paragraph.split(urlPattern)
+  return parts.map((part, index) => {
+    if (urlPattern.test(part)) {
+      urlPattern.lastIndex = 0
+      const match = part.match(/^(https?:\/\/[^\s]+?)([.,!?;:]*)$/)
+      const href = match?.[1] ?? part
+      const trailing = match?.[2] ?? ''
+
+      return (
+        <span key={`${part}-${index}`}>
+          <a
+            href={href}
+            className="text-orange-700 underline decoration-orange-300 underline-offset-4 transition hover:text-blue-900 dark:text-orange-300 dark:hover:text-stone-100"
+          >
+            {href}
+          </a>
+          {trailing}
+        </span>
+      )
+    }
+
+    urlPattern.lastIndex = 0
+    return <span key={`${part}-${index}`}>{part}</span>
+  })
+}
+
+export default function FooterContentPage({ slug, forcedLanguage }: { slug: FooterPageSlug; forcedLanguage?: MarketplaceLanguage }) {
+  const { language } = useMarketplacePreferences()
+  const activeLanguage = forcedLanguage ?? language
+  const content = getFooterPageContent(activeLanguage, slug)
+  const meta = pageMeta[activeLanguage]
+  const isArabic = activeLanguage === 'ar'
+
+  return (
+    <main className="site-page">
+      <div className="site-section mx-auto max-w-4xl">
+        <section className="site-panel overflow-hidden p-0">
+          <div className="site-panel-muted rounded-none border-0 border-b border-stone-100/80 px-6 py-10 sm:px-10 sm:py-14 dark:border-blue-900">
+            <p className="site-kicker">
+              {meta.kicker}
+            </p>
+            <h1 className="site-title">
+              {content.title}
+            </h1>
+          </div>
+
+          <div className={`space-y-6 px-6 py-10 sm:px-10 sm:py-12 ${isArabic ? 'text-right' : 'text-left'}`}>
+            {content.paragraphs.map((paragraph) => (
+              <p key={paragraph} className="text-lg leading-8 text-stone-700 dark:text-stone-300">
+                {renderParagraphText(paragraph)}
+              </p>
+            ))}
+
+            {content.sections?.map((section) => (
+              <section key={section.heading} className="space-y-4">
+                <h2 className="text-xl font-semibold text-stone-900 dark:text-stone-100">
+                  {section.heading}
+                </h2>
+                {section.paragraphs.map((paragraph) => (
+                  <p key={`${section.heading}-${paragraph}`} className="text-lg leading-8 text-stone-700 dark:text-stone-300">
+                    {renderParagraphText(paragraph)}
+                  </p>
+                ))}
+              </section>
+            ))}
+
+            <div className="rounded-3xl border border-orange-200 bg-orange-50 px-6 py-5 dark:border-orange-800 dark:bg-orange-950/30">
+              <p className="text-sm font-semibold uppercase tracking-[0.18em] text-orange-800 dark:text-orange-400">
+                {meta.cta}
+              </p>
+              <p className="mt-2 text-base leading-7 text-stone-700 dark:text-stone-300">{meta.support}</p>
+            </div>
+          </div>
+        </section>
+      </div>
+    </main>
+  )
+}

apps/homepage/src/components/HowItWorks.tsx

@@ -0,0 +1,75 @@
+'use client'
+
+import { useState } from 'react'
+import { LucideIcon } from 'lucide-react'
+
+interface Step {
+  number: string
+  title: string
+  description: string
+  icon?: LucideIcon
+}
+
+interface HowItWorksProps {
+  steps: Step[]
+  kicker?: string
+  title?: string
+}
+
+export function HowItWorks({ steps, kicker = 'GETTING STARTED', title = 'How It Works' }: HowItWorksProps) {
+  const [activeStep, setActiveStep] = useState(0)
+
+  return (
+    <section className="site-section">
+      <div className="site-panel">
+        <p className="site-kicker">{kicker}</p>
+        <h2 className="site-title">{title}</h2>
+
+        <div className="mt-12 space-y-4 lg:space-y-6">
+          {steps.map((step, index) => {
+            const Icon = step.icon
+            const isActive = activeStep === index
+            return (
+              <button
+                key={step.number}
+                onClick={() => setActiveStep(index)}
+                className={`w-full flex gap-6 rounded-[1.5rem] border p-6 transition-all sm:p-8 ${
+                  isActive
+                    ? 'border-orange-600 bg-orange-50 shadow-lg dark:border-orange-500 dark:bg-orange-950/30'
+                    : 'border-stone-200/80 bg-white/85 hover:-translate-y-1 dark:border-blue-800 dark:bg-blue-950/40'
+                }`}
+              >
+                <div className="flex shrink-0 flex-col items-center">
+                  <div
+                    className={`flex h-12 w-12 items-center justify-center rounded-full font-bold text-white transition-all sm:h-14 sm:w-14 ${
+                      isActive
+                        ? 'scale-110 bg-orange-600 shadow-lg dark:bg-orange-500'
+                        : 'bg-orange-600 dark:bg-orange-500'
+                    }`}
+                  >
+                    {step.number}
+                  </div>
+                  {index < steps.length - 1 && (
+                    <div className="mt-4 h-8 w-1 bg-gradient-to-b from-orange-600 to-transparent dark:from-orange-500" />
+                  )}
+                </div>
+
+                <div className="flex-1 pt-1 text-left">
+                  <div className="flex items-start gap-3">
+                    {Icon && (
+                      <Icon className="mt-1 h-5 w-5 shrink-0 text-orange-600 dark:text-orange-400" />
+                    )}
+                    <div>
+                      <h3 className="text-lg font-bold text-blue-950 dark:text-white">{step.title}</h3>
+                      <p className="mt-2 text-sm leading-6 text-stone-600 dark:text-stone-300">{step.description}</p>
+                    </div>
+                  </div>
+                </div>
+              </button>
+            )
+          })}
+        </div>
+      </div>
+    </section>
+  )
+}

apps/homepage/src/components/MarketplaceFooter.tsx

@@ -0,0 +1,123 @@
+'use client'
+
+import { ChevronDown } from 'lucide-react'
+import Link from 'next/link'
+import { useEffect, useRef, useState } from 'react'
+
+type LocaleOption = {
+  value: 'en' | 'fr' | 'ar'
+  label: string
+  flag: string
+}
+
+type FooterItem = {
+  label: string
+  href?: string
+}
+
+export default function MarketplaceFooter({
+  primaryItems,
+  secondaryItems,
+  localeLabel,
+  rightsLabel,
+  localeOptions,
+  currentLocale,
+  onSelectLanguage,
+}: {
+  primaryItems: FooterItem[]
+  secondaryItems: FooterItem[]
+  localeLabel: string
+  rightsLabel: string
+  localeOptions: LocaleOption[]
+  currentLocale: LocaleOption
+  onSelectLanguage: (language: LocaleOption['value']) => void
+}) {
+  const localeMenuRef = useRef<HTMLDivElement | null>(null)
+  const [localeMenuOpen, setLocaleMenuOpen] = useState(false)
+
+  useEffect(() => {
+    function handlePointerDown(event: MouseEvent) {
+      if (!localeMenuRef.current?.contains(event.target as Node)) {
+        setLocaleMenuOpen(false)
+      }
+    }
+
+    document.addEventListener('mousedown', handlePointerDown)
+    return () => document.removeEventListener('mousedown', handlePointerDown)
+  }, [])
+
+  return (
+    <footer className="border-t border-stone-200/80 bg-white/72 px-4 py-8 text-stone-600 backdrop-blur-xl transition-colors dark:border-blue-900 dark:bg-blue-950/72 dark:text-stone-300">
+      <div className="shell flex flex-col items-center gap-5 text-center">
+        <nav className="flex flex-wrap items-center justify-center gap-y-3 text-sm">
+          {primaryItems.map((item, index) => (
+            <div key={item.label} className="flex items-center">
+              <FooterNavItem item={item} />
+              {index < primaryItems.length - 1 ? (
+                <span className="px-2 text-stone-400 dark:text-stone-600" aria-hidden="true">|</span>
+              ) : null}
+            </div>
+          ))}
+        </nav>
+
+        <div className="flex flex-wrap items-center justify-center gap-y-3 text-sm">
+          {secondaryItems.map((item) => (
+            <div key={item.label} className="flex items-center">
+              <FooterNavItem item={item} />
+              <span className="px-2 text-stone-400 dark:text-stone-600" aria-hidden="true">|</span>
+            </div>
+          ))}
+          <div ref={localeMenuRef} className="relative px-3">
+            <button
+              type="button"
+              onClick={() => setLocaleMenuOpen((open) => !open)}
+              className="inline-flex items-center gap-2 text-sky-600 transition hover:text-sky-700 dark:text-sky-400 dark:hover:text-sky-300"
+              aria-expanded={localeMenuOpen}
+              aria-haspopup="menu"
+            >
+              <span aria-hidden="true" className="text-base leading-none">{currentLocale.flag}</span>
+              <span>{localeLabel}</span>
+              <ChevronDown className={`h-4 w-4 transition-transform ${localeMenuOpen ? 'rotate-180' : ''}`} />
+            </button>
+            {localeMenuOpen ? (
+              <div className="absolute left-1/2 top-full z-20 mt-3 w-56 -translate-x-1/2 overflow-hidden rounded-2xl border border-stone-200 bg-white/95 text-left shadow-[0_20px_60px_rgba(0,0,0,0.12)] backdrop-blur dark:border-blue-900 dark:bg-blue-950/95 dark:shadow-[0_20px_60px_rgba(0,0,0,0.35)]">
+                {localeOptions.map((option) => (
+                  <button
+                    key={option.value}
+                    type="button"
+                    onClick={() => {
+                      onSelectLanguage(option.value)
+                      setLocaleMenuOpen(false)
+                    }}
+                    className="flex w-full items-center gap-3 px-4 py-3 text-sm text-stone-700 transition hover:bg-stone-100 hover:text-blue-900 dark:text-stone-200 dark:hover:bg-blue-900/40 dark:hover:text-white"
+                  >
+                    <span aria-hidden="true" className="text-base leading-none">{option.flag}</span>
+                    <span>{option.label}</span>
+                  </button>
+                ))}
+              </div>
+            ) : null}
+          </div>
+        </div>
+
+        <p className="text-sm text-stone-500 dark:text-stone-400">
+          &copy; {new Date().getFullYear()} FleetOS. {rightsLabel}
+        </p>
+      </div>
+    </footer>
+  )
+}
+
+function FooterNavItem({ item }: { item: FooterItem }) {
+  const className = 'px-3 text-stone-600 transition hover:text-blue-900 dark:text-stone-300 dark:hover:text-white'
+
+  if (item.href) {
+    return (
+      <Link href={item.href} className={className}>
+        {item.label}
+      </Link>
+    )
+  }
+
+  return <span className={className}>{item.label}</span>
+}

apps/homepage/src/components/MarketplaceHeader.boundary.test.ts

@@ -0,0 +1,32 @@
+import { describe, expect, it } from 'vitest'
+import {
+  buildDashboardSignInHref,
+  companyInitial,
+  localeMenuPositionClass,
+  ownerWorkspaceHref,
+} from './MarketplaceHeader'
+
+describe('MarketplaceHeader helpers', () => {
+  it('builds dashboard sign-in links with language and theme query parameters', () => {
+    expect(buildDashboardSignInHref('https://app.example.com/dashboard', 'fr', 'dark')).toBe(
+      'https://app.example.com/dashboard/sign-in?lang=fr&theme=dark'
+    )
+    expect(buildDashboardSignInHref('/dashboard', 'ar', 'light')).toBe('/dashboard/sign-in?lang=ar&theme=light')
+  })
+
+  it('keeps the locale dropdown anchored to the readable side for RTL and LTR languages', () => {
+    expect(localeMenuPositionClass('ar')).toBe('right-0 sm:right-0')
+    expect(localeMenuPositionClass('en')).toBe('left-0 sm:left-auto sm:right-0')
+    expect(localeMenuPositionClass('fr')).toBe('left-0 sm:left-auto sm:right-0')
+  })
+
+  it('routes existing companies to their workspace and new owners to sign-up', () => {
+    expect(ownerWorkspaceHref('https://dashboard.example.com', 'Atlas Cars')).toBe('https://dashboard.example.com')
+    expect(ownerWorkspaceHref('https://dashboard.example.com', null)).toBe('https://dashboard.example.com/sign-up')
+  })
+
+  it('normalizes company initials for the owner workspace pill', () => {
+    expect(companyInitial('atlas cars')).toBe('A')
+    expect(companyInitial('  زاكورة كار  ')).toBe('ز')
+  })
+})

apps/homepage/src/components/MarketplaceHeader.tsx

@@ -0,0 +1,237 @@
+'use client'
+
+import { ChevronDown } from 'lucide-react'
+import Image from 'next/image'
+import Link from 'next/link'
+import { useEffect, useRef, useState } from 'react'
+
+export type Theme = 'light' | 'dark'
+export type Language = 'en' | 'fr' | 'ar'
+
+type Dictionary = {
+  home: string
+  features: string
+  pricing: string
+  signIn: string
+  ownerSignIn: string
+  theme: string
+  light: string
+  dark: string
+}
+
+type LanguageMeta = {
+  value: Language
+  flag: string
+  shortLabel: string
+}
+
+
+export function buildDashboardSignInHref(dashboardUrl: string, language: Language, theme: Theme): string {
+  const signInParams = new URLSearchParams()
+  signInParams.set('lang', language)
+  signInParams.set('theme', theme)
+  return `${dashboardUrl}/sign-in?${signInParams.toString()}`
+}
+
+export function localeMenuPositionClass(language: Language): string {
+  return language === 'ar' ? 'right-0 sm:right-0' : 'left-0 sm:left-auto sm:right-0'
+}
+
+export function ownerWorkspaceHref(dashboardUrl: string, companyName: string | null): string {
+  return companyName ? dashboardUrl : `${dashboardUrl}/sign-up`
+}
+
+export function companyInitial(companyName: string): string {
+  return companyName.trim().charAt(0).toUpperCase()
+}
+
+export default function MarketplaceHeader({
+  dict,
+  theme,
+  setTheme,
+  companyName,
+  dashboardUrl,
+  currentLanguage,
+  localeOptions,
+  onSelectLanguage,
+}: {
+  dict: Dictionary
+  theme: Theme
+  setTheme: (theme: Theme) => void
+  companyName: string | null
+  dashboardUrl: string
+  currentLanguage: LanguageMeta
+  localeOptions: LanguageMeta[]
+  onSelectLanguage: (language: Language) => void
+}) {
+  const localeMenuRef = useRef<HTMLDivElement | null>(null)
+  const [localeMenuOpen, setLocaleMenuOpen] = useState(false)
+  const themeMenuRef = useRef<HTMLDivElement | null>(null)
+  const [themeMenuOpen, setThemeMenuOpen] = useState(false)
+  const themeOptions = [
+    { value: 'light' as const, label: dict.light },
+    { value: 'dark' as const, label: dict.dark },
+  ]
+  const currentTheme = themeOptions.find((option) => option.value === theme) ?? themeOptions[0]
+  const menuPositionClass = localeMenuPositionClass(currentLanguage.value)
+
+  useEffect(() => {
+    function handlePointerDown(event: MouseEvent) {
+      if (!localeMenuRef.current?.contains(event.target as Node)) {
+        setLocaleMenuOpen(false)
+      }
+      if (!themeMenuRef.current?.contains(event.target as Node)) {
+        setThemeMenuOpen(false)
+      }
+    }
+
+    document.addEventListener('mousedown', handlePointerDown)
+    return () => document.removeEventListener('mousedown', handlePointerDown)
+  }, [])
+
+  function toggleLocaleMenu() {
+    setThemeMenuOpen(false)
+    setLocaleMenuOpen((open) => !open)
+  }
+
+  function toggleThemeMenu() {
+    setLocaleMenuOpen(false)
+    setThemeMenuOpen((open) => !open)
+  }
+
+  const signInHref = buildDashboardSignInHref(dashboardUrl, currentLanguage.value, theme)
+
+  return (
+    <header className="sticky top-0 z-50 border-b border-stone-200/80 bg-white/78 backdrop-blur-xl shadow-[0_10px_30px_rgba(15,23,42,0.08)] transition-colors dark:border-blue-900 dark:bg-blue-950/76 dark:shadow-[0_10px_30px_rgba(0,0,0,0.32)]">
+      <div className="shell flex min-h-14 flex-col gap-1.5 py-1.5 lg:flex-row lg:items-center lg:justify-between lg:gap-3 lg:py-2">
+        <div className="flex items-center justify-between gap-3">
+          <Link href="/" className="flex items-center gap-1.5 text-[11px] font-bold uppercase tracking-[0.14em] text-stone-900 dark:text-stone-100 sm:text-sm sm:tracking-[0.2em]">
+            <Image
+              src="/rentalcardrive.png"
+              alt="FleetOS"
+              width={36}
+              height={36}
+              priority
+              className="h-8 w-8 rounded-md object-contain sm:h-9 sm:w-9"
+            />
+            <span>FleetOS</span>
+          </Link>
+        </div>
+
+        <div className="flex flex-col gap-1.5 lg:flex-row lg:items-center lg:gap-3">
+          <nav className="flex items-center gap-0.5 overflow-x-auto">
+            <Link
+              href="/"
+              className="rounded-full px-2.5 py-1 text-[12px] font-medium text-stone-600 transition hover:bg-stone-100 hover:text-stone-900 dark:text-stone-300 dark:hover:bg-blue-900/40 dark:hover:text-stone-100 sm:px-4 sm:py-2 sm:text-sm"
+            >
+              {dict.home}
+            </Link>
+            <Link
+              href="/features"
+              className="rounded-full px-2.5 py-1 text-[12px] font-medium text-stone-600 transition hover:bg-stone-100 hover:text-stone-900 dark:text-stone-300 dark:hover:bg-blue-900/40 dark:hover:text-stone-100 sm:px-4 sm:py-2 sm:text-sm"
+            >
+              {dict.features}
+            </Link>
+            <Link
+              href="/pricing"
+              className="rounded-full px-2.5 py-1 text-[12px] font-medium text-stone-600 transition hover:bg-stone-100 hover:text-stone-900 dark:text-stone-300 dark:hover:bg-blue-900/40 dark:hover:text-stone-100 sm:px-4 sm:py-2 sm:text-sm"
+            >
+              {dict.pricing}
+            </Link>
+            <a
+              href={signInHref}
+              className="rounded-full px-2.5 py-1 text-[12px] font-medium text-stone-600 transition hover:bg-stone-100 hover:text-stone-900 dark:text-stone-300 dark:hover:bg-blue-900/40 dark:hover:text-stone-100 sm:px-4 sm:py-2 sm:text-sm"
+            >
+              {dict.signIn}
+            </a>
+            {companyName ? (
+              <a
+                href={dashboardUrl}
+                className="ml-1 flex items-center gap-1.5 rounded-full bg-orange-600 px-3 py-1 text-[12px] font-semibold text-white transition hover:bg-orange-700 dark:bg-orange-500 dark:hover:bg-orange-400 sm:ml-2 sm:gap-2 sm:px-4 sm:py-2 sm:text-sm"
+              >
+                <span className="inline-flex h-5 w-5 items-center justify-center rounded-full bg-white/20 text-[10px] font-black dark:bg-blue-950/20">
+                  {companyInitial(companyName)}
+                </span>
+                {companyName}
+              </a>
+            ) : (
+              <a
+                href={ownerWorkspaceHref(dashboardUrl, companyName)}
+                className="ml-1 rounded-full bg-orange-600 px-3 py-1 text-[12px] font-semibold text-white transition hover:bg-orange-700 dark:bg-orange-500 dark:hover:bg-orange-400 sm:ml-2 sm:px-5 sm:py-2 sm:text-sm"
+              >
+                {dict.ownerSignIn}
+              </a>
+            )}
+          </nav>
+          <div className="flex items-center self-start rounded-full border border-stone-200/80 bg-white/95 p-0.5 shadow-sm dark:border-blue-800 dark:bg-blue-950/85 sm:self-auto sm:p-1">
+            <div ref={localeMenuRef} className="relative">
+              <button
+                type="button"
+                onClick={toggleLocaleMenu}
+                className="inline-flex min-w-[4.75rem] items-center justify-center gap-1.5 rounded-full px-2.5 py-1.5 text-[11px] font-semibold text-stone-700 transition hover:bg-stone-100 dark:text-stone-200 dark:hover:bg-blue-900/40 sm:min-w-[5.25rem] sm:px-3 sm:py-2 sm:text-xs"
+                aria-expanded={localeMenuOpen}
+                aria-haspopup="menu"
+              >
+                <span aria-hidden="true">{currentLanguage.flag}</span>
+                <span>{currentLanguage.shortLabel}</span>
+                <ChevronDown className={`h-3.5 w-3.5 transition-transform ${localeMenuOpen ? 'rotate-180' : ''}`} />
+              </button>
+              {localeMenuOpen ? (
+                <div className={`absolute top-full z-30 mt-2 w-44 max-w-[calc(100vw-2rem)] overflow-hidden rounded-2xl border border-stone-200 bg-white/95 text-left shadow-[0_20px_60px_rgba(0,0,0,0.12)] backdrop-blur dark:border-blue-900 dark:bg-blue-950/95 dark:shadow-[0_20px_60px_rgba(0,0,0,0.35)] ${menuPositionClass}`}>
+                  {localeOptions.map((option) => (
+                    <button
+                      key={option.value}
+                      type="button"
+                      onClick={() => {
+                        onSelectLanguage(option.value)
+                        setLocaleMenuOpen(false)
+                      }}
+                      className="flex w-full items-center gap-3 px-4 py-3 text-sm text-stone-700 transition hover:bg-stone-100 hover:text-blue-900 dark:text-stone-200 dark:hover:bg-blue-900/40 dark:hover:text-white"
+                    >
+                      <span aria-hidden="true">{option.flag}</span>
+                      <span>{option.shortLabel}</span>
+                    </button>
+                  ))}
+                </div>
+              ) : null}
+            </div>
+            <span className="mx-1 h-6 w-px bg-stone-200 dark:bg-stone-700" aria-hidden="true" />
+            <div ref={themeMenuRef} className="relative">
+              <button
+                type="button"
+                onClick={toggleThemeMenu}
+                className="inline-flex items-center gap-1.5 rounded-full px-2 py-1 transition hover:bg-stone-100 dark:hover:bg-blue-900/40 sm:px-2.5 sm:py-1.5"
+                aria-expanded={themeMenuOpen}
+                aria-haspopup="menu"
+              >
+                <span className="rounded-full bg-blue-900 px-3 py-1 text-[11px] font-semibold text-white dark:bg-orange-400 dark:text-white sm:px-3.5 sm:py-1.5 sm:text-xs">
+                  {currentTheme.label}
+                </span>
+                <ChevronDown className={`h-3.5 w-3.5 text-stone-500 transition-transform dark:text-stone-400 ${themeMenuOpen ? 'rotate-180' : ''}`} />
+              </button>
+              {themeMenuOpen ? (
+                <div className={`absolute top-full z-30 mt-2 w-44 max-w-[calc(100vw-2rem)] overflow-hidden rounded-2xl border border-stone-200 bg-white/95 text-left shadow-[0_20px_60px_rgba(0,0,0,0.12)] backdrop-blur dark:border-blue-900 dark:bg-blue-950/95 dark:shadow-[0_20px_60px_rgba(0,0,0,0.35)] ${menuPositionClass}`}>
+                  {themeOptions
+                    .filter((option) => option.value !== theme)
+                    .map((option) => (
+                      <button
+                        key={option.value}
+                        type="button"
+                        onClick={() => {
+                          setTheme(option.value)
+                          setThemeMenuOpen(false)
+                        }}
+                        className="flex w-full items-center justify-between px-4 py-3 text-sm text-stone-700 transition hover:bg-stone-100 hover:text-blue-900 dark:text-stone-200 dark:hover:bg-blue-900/40 dark:hover:text-white"
+                      >
+                        <span>{option.label}</span>
+                      </button>
+                    ))}
+                </div>
+              ) : null}
+            </div>
+          </div>
+        </div>
+      </div>
+    </header>
+  )
+}

apps/homepage/src/components/MarketplaceShell.auth.test.ts

@@ -0,0 +1,41 @@
+import { afterEach, describe, expect, it, vi } from 'vitest'
+import { clearCachedEmployeeProfile, hasCachedEmployeeProfile } from './MarketplaceShell'
+
+afterEach(() => {
+  vi.unstubAllGlobals()
+})
+
+describe('MarketplaceShell auth helpers', () => {
+  it('does not report an employee profile when the browser cache is empty', () => {
+    vi.stubGlobal('window', {
+      localStorage: {
+        getItem: vi.fn(() => null),
+      },
+    })
+
+    expect(hasCachedEmployeeProfile()).toBe(false)
+  })
+
+  it('detects the cached employee profile marker written by dashboard sign-in', () => {
+    vi.stubGlobal('window', {
+      localStorage: {
+        getItem: vi.fn((key: string) => (key === 'employee_profile' ? '{"id":"emp_1"}' : null)),
+      },
+    })
+
+    expect(hasCachedEmployeeProfile()).toBe(true)
+  })
+
+  it('clears the cached employee profile marker', () => {
+    const removeItem = vi.fn()
+    vi.stubGlobal('window', {
+      localStorage: {
+        removeItem,
+      },
+    })
+
+    clearCachedEmployeeProfile()
+
+    expect(removeItem).toHaveBeenCalledWith('employee_profile')
+  })
+})

apps/homepage/src/components/MarketplaceShell.content.test.ts

@@ -0,0 +1,35 @@
+import { describe, expect, it } from 'vitest'
+import { getFooterContent, localeOptions } from './MarketplaceShell'
+
+describe('MarketplaceShell footer content registry', () => {
+  it('exposes exactly the supported marketplace locales in selector order', () => {
+    expect(localeOptions.map((option) => option.value)).toEqual(['en', 'ar', 'fr'])
+    expect(localeOptions.every((option) => option.label.length > 0 && option.flag.length > 0)).toBe(true)
+  })
+
+  it('returns English footer links with app privacy pointing at the English mobile policy', () => {
+    const content = getFooterContent('en')
+
+    expect(content.localeLabel).toBe('Global (English)')
+    expect(content.rightsLabel).toBe('All rights reserved.')
+    expect(content.primary).toContainEqual({ label: 'Privacy Policy', href: '/app-privacy-en' })
+    expect(content.secondary).toContainEqual({ label: 'Contact Sales', href: '/footer/contact-sales' })
+  })
+
+  it('returns French labels while preserving canonical footer slugs', () => {
+    const content = getFooterContent('fr')
+
+    expect(content.localeLabel).toBe('Europe (French)')
+    expect(content.primary).toContainEqual({ label: "Conditions d'utilisation", href: '/footer/terms-of-service' })
+    expect(content.secondary).toContainEqual({ label: 'Conditions générales', href: '/footer/general-conditions' })
+  })
+
+  it('returns Arabic labels and app privacy href without falling back to English copy', () => {
+    const content = getFooterContent('ar')
+
+    expect(content.localeLabel).toBe('North Africa (Arabic)')
+    expect(content.rightsLabel).toBe('جميع الحقوق محفوظة.')
+    expect(content.primary).toContainEqual({ label: 'سياسة الخصوصية', href: '/app-privacy-ar' })
+    expect(content.primary.map((item) => item.label)).not.toContain('Privacy Policy')
+  })
+})

apps/homepage/src/components/MarketplaceShell.tsx

@@ -0,0 +1,368 @@
+'use client'
+
+import { createContext, useContext, useEffect, useMemo, useRef, useState } from 'react'
+import { usePathname, useRouter } from 'next/navigation'
+import { appPrivacyHref, footerPageHref } from '@/lib/footerContent'
+import { MARKETPLACE_LANGUAGE_COOKIE, SHARED_LANGUAGE_COOKIE, isMarketplaceLanguage, type MarketplaceLanguage } from '@/lib/i18n'
+import { SHARED_LANGUAGE_KEY, SHARED_THEME_KEY, readCurrentUserScopedPreference, readScopedPreference, writeScopedPreference } from '@/lib/preferences'
+
+type Theme = 'light' | 'dark'
+
+type Dictionary = {
+  home: string
+  features: string
+  pricing: string
+  signIn: string
+  ownerSignIn: string
+  language: string
+  theme: string
+  light: string
+  dark: string
+  preferences: string
+}
+
+const dictionaries: Record<MarketplaceLanguage, Dictionary> = {
+  en: {
+    home: 'Home',
+    features: 'Features',
+    pricing: 'Pricing',
+    signIn: 'Sign in',
+    ownerSignIn: 'Get Started',
+    language: 'Language',
+    theme: 'Theme',
+    light: 'Light',
+    dark: 'Dark',
+    preferences: 'Preferences',
+  },
+  fr: {
+    home: 'Accueil',
+    features: 'Fonctionnalités',
+    pricing: 'Tarifs',
+    signIn: 'Connexion',
+    ownerSignIn: 'Démarrer',
+    language: 'Langue',
+    theme: 'Mode',
+    light: 'Clair',
+    dark: 'Sombre',
+    preferences: 'Préférences',
+  },
+  ar: {
+    home: 'الرئيسية',
+    features: 'الميزات',
+    pricing: 'الأسعار',
+    signIn: 'تسجيل الدخول',
+    ownerSignIn: 'ابدأ الآن',
+    language: 'اللغة',
+    theme: 'الوضع',
+    light: 'فاتح',
+    dark: 'داكن',
+    preferences: 'التفضيلات',
+  },
+}
+
+const EMPLOYEE_PROFILE_KEY = 'employee_profile'
+
+export const localeOptions: Array<{ value: MarketplaceLanguage; label: string; flag: string }> = [
+  { value: 'en', label: 'Global (English)', flag: '🇺🇸' },
+  { value: 'ar', label: 'North Africa (Arabic)', flag: '🇲🇦' },
+  { value: 'fr', label: 'Europe (French)', flag: '🇫🇷' },
+]
+
+export function getFooterContent(language: MarketplaceLanguage): {
+  primary: Array<{ label: string; href?: string }>
+  secondary: Array<{ label: string; href?: string }>
+  localeLabel: string
+  rightsLabel: string
+} {
+  switch (language) {
+    case 'fr':
+      return {
+        primary: [
+          { label: 'À propos de nous', href: footerPageHref['about-us'] },
+          { label: "Conditions d'utilisation", href: footerPageHref['terms-of-service'] },
+          { label: 'Sécurité', href: footerPageHref.security },
+          { label: 'Conformité', href: footerPageHref.compliance },
+          { label: 'Politique de confidentialité', href: appPrivacyHref.fr },
+          { label: 'Politique relative aux cookies', href: footerPageHref['cookie-policy'] },
+        ],
+        secondary: [
+          { label: 'Newsletter', href: footerPageHref.newsletter },
+          { label: 'Contacter les ventes', href: footerPageHref['contact-sales'] },
+          { label: 'Conditions générales', href: footerPageHref['general-conditions'] },
+        ],
+        localeLabel: 'Europe (French)',
+        rightsLabel: 'Tous droits réservés.',
+      }
+    case 'ar':
+      return {
+        primary: [
+          { label: 'من نحن', href: footerPageHref['about-us'] },
+          { label: 'شروط الاستخدام', href: footerPageHref['terms-of-service'] },
+          { label: 'الأمان', href: footerPageHref.security },
+          { label: 'الامتثال', href: footerPageHref.compliance },
+          { label: 'سياسة الخصوصية', href: appPrivacyHref.ar },
+          { label: 'سياسة ملفات تعريف الارتباط', href: footerPageHref['cookie-policy'] },
+        ],
+        secondary: [
+          { label: 'النشرة الإخبارية', href: footerPageHref.newsletter },
+          { label: 'تواصل مع المبيعات', href: footerPageHref['contact-sales'] },
+          { label: 'الشروط العامة', href: footerPageHref['general-conditions'] },
+        ],
+        localeLabel: 'North Africa (Arabic)',
+        rightsLabel: 'جميع الحقوق محفوظة.',
+      }
+    case 'en':
+    default:
+      return {
+        primary: [
+          { label: 'About Us', href: footerPageHref['about-us'] },
+          { label: 'Terms of Service', href: footerPageHref['terms-of-service'] },
+          { label: 'Security', href: footerPageHref.security },
+          { label: 'Compliance', href: footerPageHref.compliance },
+          { label: 'Privacy Policy', href: appPrivacyHref.en },
+          { label: 'Cookie Policy', href: footerPageHref['cookie-policy'] },
+        ],
+        secondary: [
+          { label: 'Newsletter', href: footerPageHref.newsletter },
+          { label: 'Contact Sales', href: footerPageHref['contact-sales'] },
+          { label: 'General Conditions', href: footerPageHref['general-conditions'] },
+        ],
+        localeLabel: 'Global (English)',
+        rightsLabel: 'All rights reserved.',
+      }
+  }
+}
+
+export function hasCachedEmployeeProfile(): boolean {
+  if (typeof window === 'undefined') return false
+
+  try {
+    return Boolean(window.localStorage.getItem(EMPLOYEE_PROFILE_KEY))
+  } catch {
+    return false
+  }
+}
+
+export function clearCachedEmployeeProfile() {
+  if (typeof window === 'undefined') return
+
+  try {
+    window.localStorage.removeItem(EMPLOYEE_PROFILE_KEY)
+  } catch {}
+}
+
+function detectBrowserLanguage(): string | null {
+  if (typeof navigator === 'undefined') return null
+  const langs = Array.from(navigator.languages ?? [navigator.language])
+  for (const lang of langs) {
+    const code = lang.split('-')[0].toLowerCase()
+    if (code === 'fr' || code === 'ar' || code === 'en') return code
+  }
+  return null
+}
+
+type PreferencesContextValue = {
+  language: MarketplaceLanguage
+  theme: Theme
+  dict: Dictionary
+  companyName: string | null
+  setLanguage: (language: MarketplaceLanguage) => void
+  setTheme: (theme: Theme) => void
+}
+
+const PreferencesContext = createContext<PreferencesContextValue | null>(null)
+
+export function useMarketplacePreferences() {
+  const context = useContext(PreferencesContext)
+  if (!context) throw new Error('useMarketplacePreferences must be used within MarketplaceShell')
+  return context
+}
+
+export default function MarketplaceShell({
+  children,
+  initialLanguage = 'en',
+  initialTheme = 'light',
+}: {
+  children: React.ReactNode
+  initialLanguage?: MarketplaceLanguage
+  initialTheme?: Theme
+}) {
+  const router = useRouter()
+  const pathname = usePathname()
+  const apiUrl = process.env.NEXT_PUBLIC_API_URL ?? 'http://localhost:4000/api/v1'
+  const [language, setLanguageState] = useState<MarketplaceLanguage>(initialLanguage)
+  const [theme, setThemeState] = useState<Theme>(initialTheme)
+  const [hydrated, setHydrated] = useState(false)
+  const previousLanguage = useRef<MarketplaceLanguage>(initialLanguage)
+  const [companyName, setCompanyName] = useState<string | null>(null)
+
+  function applyLanguage(nextLanguage: MarketplaceLanguage) {
+    if (nextLanguage === language) return
+
+    if (typeof window !== 'undefined') {
+      document.documentElement.lang = nextLanguage
+      document.documentElement.dir = nextLanguage === 'ar' ? 'rtl' : 'ltr'
+      try {
+        sessionStorage.setItem('marketplace-language', nextLanguage)
+      } catch {}
+      writeScopedPreference(SHARED_LANGUAGE_KEY, nextLanguage, ['marketplace-language'])
+    }
+
+    setLanguageState(nextLanguage)
+  }
+
+  function applyTheme(nextTheme: Theme) {
+    if (nextTheme === theme) return
+
+    if (typeof window !== 'undefined') {
+      document.documentElement.classList.toggle('dark', nextTheme === 'dark')
+      document.documentElement.style.colorScheme = nextTheme === 'light' ? 'light' : 'dark'
+      document.body.dataset.theme = nextTheme
+      writeScopedPreference(SHARED_THEME_KEY, nextTheme, ['marketplace-theme'])
+    }
+
+    setThemeState(nextTheme)
+  }
+
+  async function syncCompanyBrand() {
+    if (!hasCachedEmployeeProfile()) {
+      setCompanyName(null)
+      return
+    }
+
+    try {
+      const response = await fetch(`${apiUrl}/companies/me/brand`, {
+        credentials: 'include',
+      })
+
+      if (!response.ok) {
+        if (response.status === 401) {
+          clearCachedEmployeeProfile()
+        }
+        setCompanyName(null)
+        return
+      }
+
+      const json = await response.json()
+      const name = json?.data?.displayName ?? json?.displayName ?? null
+      setCompanyName(name)
+    } catch {
+      setCompanyName(null)
+    }
+  }
+
+  function readSessionLanguage(): MarketplaceLanguage | null {
+    try {
+      const val = sessionStorage.getItem('marketplace-language')
+      return isMarketplaceLanguage(val) ? val : null
+    } catch {
+      return null
+    }
+  }
+
+  function syncScopedPreferencesForSession() {
+    const sessionLang = readSessionLanguage()
+    if (sessionLang) {
+      if (sessionLang !== language) setLanguageState(sessionLang)
+    } else {
+      const scopedLanguage = readCurrentUserScopedPreference(SHARED_LANGUAGE_KEY)
+      if (isMarketplaceLanguage(scopedLanguage) && scopedLanguage !== language) {
+        setLanguageState(scopedLanguage)
+      }
+    }
+
+    const scopedTheme = readCurrentUserScopedPreference(SHARED_THEME_KEY)
+    if ((scopedTheme === 'light' || scopedTheme === 'dark') && scopedTheme !== theme) {
+      setThemeState(scopedTheme)
+    } else {
+      writeScopedPreference(SHARED_THEME_KEY, theme, ['marketplace-theme'])
+    }
+  }
+
+  useEffect(() => {
+    const sessionLang = readSessionLanguage()
+    if (sessionLang) {
+      setLanguageState(sessionLang)
+      writeScopedPreference(SHARED_LANGUAGE_KEY, sessionLang, ['marketplace-language'])
+    } else {
+      const storedLanguage = readScopedPreference(SHARED_LANGUAGE_KEY, ['marketplace-language'])
+      if (isMarketplaceLanguage(storedLanguage)) {
+        setLanguageState(storedLanguage)
+        writeScopedPreference(SHARED_LANGUAGE_KEY, storedLanguage, ['marketplace-language'])
+      } else {
+        const detected = detectBrowserLanguage()
+        if (isMarketplaceLanguage(detected)) {
+          setLanguageState(detected)
+          writeScopedPreference(SHARED_LANGUAGE_KEY, detected, ['marketplace-language'])
+        }
+      }
+    }
+
+    const storedTheme = readScopedPreference(SHARED_THEME_KEY, ['marketplace-theme']) as Theme | null
+    if (storedTheme === 'light' || storedTheme === 'dark') {
+      setThemeState(storedTheme)
+    }
+
+    setHydrated(true)
+    void syncCompanyBrand()
+  }, [])
+
+  useEffect(() => {
+    function handleWindowFocus() {
+      syncScopedPreferencesForSession()
+      void syncCompanyBrand()
+    }
+
+    function handleAuthMessage(event: MessageEvent) {
+      if (!event.data || typeof event.data !== 'object') return
+
+      const message = event.data as { type?: string }
+
+      if (message.type === 'rentaldrivego:employee-login' || message.type === 'rentaldrivego:employee-logout') {
+        syncScopedPreferencesForSession()
+        void syncCompanyBrand()
+      }
+    }
+
+    window.addEventListener('focus', handleWindowFocus)
+    window.addEventListener('message', handleAuthMessage)
+    document.addEventListener('visibilitychange', handleWindowFocus)
+
+    return () => {
+      window.removeEventListener('focus', handleWindowFocus)
+      window.removeEventListener('message', handleAuthMessage)
+      document.removeEventListener('visibilitychange', handleWindowFocus)
+    }
+  }, [language, theme])
+
+  useEffect(() => {
+    document.documentElement.lang = language
+    document.documentElement.dir = language === 'ar' ? 'rtl' : 'ltr'
+
+    if (!hydrated) return
+
+    try { sessionStorage.setItem('marketplace-language', language) } catch {}
+    writeScopedPreference(SHARED_LANGUAGE_KEY, language, ['marketplace-language'])
+
+    if (previousLanguage.current !== language && pathname !== '/sign-in') {
+      router.refresh()
+    }
+    previousLanguage.current = language
+  }, [hydrated, language, pathname, router])
+
+  useEffect(() => {
+    document.documentElement.classList.toggle('dark', theme === 'dark')
+    document.documentElement.style.colorScheme = theme === 'dark' ? 'dark' : 'light'
+    document.body.dataset.theme = theme
+    if (hydrated) {
+      writeScopedPreference(SHARED_THEME_KEY, theme, ['marketplace-theme'])
+    }
+  }, [theme, hydrated])
+
+  const value = useMemo(
+    () => ({ language, theme, dict: dictionaries[language], companyName, setLanguage: applyLanguage, setTheme: applyTheme }),
+    [language, theme, companyName],
+  )
+
+  return <PreferencesContext.Provider value={value}>{children}</PreferencesContext.Provider>
+}

apps/homepage/src/components/PricingToggle.tsx

@@ -0,0 +1,45 @@
+'use client'
+
+import { useState } from 'react'
+
+export function PricingToggle({
+  onToggle,
+}: {
+  onToggle: (isAnnual: boolean) => void
+}) {
+  const [isAnnual, setIsAnnual] = useState(false)
+
+  const handleToggle = () => {
+    const newValue = !isAnnual
+    setIsAnnual(newValue)
+    onToggle(newValue)
+  }
+
+  return (
+    <div className="flex justify-center">
+      <div className="inline-flex items-center gap-4 rounded-full border border-stone-200 bg-white/80 p-1 dark:border-blue-800 dark:bg-blue-950/40">
+        <button
+          onClick={() => !isAnnual && handleToggle()}
+          className={`rounded-full px-6 py-2 text-sm font-semibold transition ${
+            !isAnnual
+              ? 'bg-orange-600 text-white dark:bg-orange-500'
+              : 'text-stone-600 hover:text-stone-900 dark:text-stone-400 dark:hover:text-stone-200'
+          }`}
+        >
+          Monthly
+        </button>
+        <button
+          onClick={() => isAnnual && handleToggle()}
+          className={`rounded-full px-6 py-2 text-sm font-semibold transition ${
+            isAnnual
+              ? 'bg-orange-600 text-white dark:bg-orange-500'
+              : 'text-stone-600 hover:text-stone-900 dark:text-stone-400 dark:hover:text-stone-200'
+          }`}
+        >
+          Annual
+          <span className="ml-2 text-xs font-bold text-orange-200 dark:text-orange-300">-20%</span>
+        </button>
+      </div>
+    </div>
+  )
+}

apps/homepage/src/components/StatsStrip.tsx

@@ -0,0 +1,86 @@
+'use client'
+
+import { useEffect, useRef, useState } from 'react'
+
+interface Stat {
+  label: string
+  value: number
+  suffix?: string
+}
+
+interface StatsStripProps {
+  stats: Stat[]
+  kicker?: string
+}
+
+function Counter({ value, suffix = '' }: { value: number; suffix?: string }) {
+  const [count, setCount] = useState(0)
+  const ref = useRef<HTMLParagraphElement>(null)
+  const hasAnimated = useRef(false)
+
+  useEffect(() => {
+    const observer = new IntersectionObserver(
+      (entries) => {
+        if (entries[0].isIntersecting && !hasAnimated.current) {
+          hasAnimated.current = true
+          const duration = 2000
+          const steps = 60
+          const increment = value / steps
+          let current = 0
+          const startTime = Date.now()
+
+          const animate = () => {
+            const elapsed = Date.now() - startTime
+            const progress = Math.min(elapsed / duration, 1)
+            current = Math.floor(value * progress)
+            setCount(current)
+
+            if (progress < 1) {
+              requestAnimationFrame(animate)
+            }
+          }
+
+          animate()
+        }
+      },
+      { threshold: 0.1 }
+    )
+
+    if (ref.current) {
+      observer.observe(ref.current)
+    }
+
+    return () => {
+      if (ref.current) {
+        observer.unobserve(ref.current)
+      }
+    }
+  }, [value])
+
+  return (
+    <p ref={ref} className="text-3xl font-black text-blue-950 dark:text-white sm:text-4xl">
+      {count.toLocaleString()}
+      {suffix}
+    </p>
+  )
+}
+
+export function StatsStrip({ stats, kicker = 'BY THE NUMBERS' }: StatsStripProps) {
+  return (
+    <section className="site-section">
+      <div className="site-panel">
+        <p className="site-kicker">{kicker}</p>
+        <h2 className="site-title">Our Impact</h2>
+
+        <div className="mt-12 grid gap-8 sm:grid-cols-2 lg:grid-cols-4">
+          {stats.map((stat) => (
+            <div key={stat.label} className="flex flex-col">
+              <Counter value={stat.value} suffix={stat.suffix} />
+              <p className="mt-4 text-sm font-semibold text-stone-600 dark:text-stone-300">{stat.label}</p>
+            </div>
+          ))}
+        </div>
+      </div>
+    </section>
+  )
+}

apps/homepage/src/components/TestimonialsSection.tsx

@@ -0,0 +1,116 @@
+'use client'
+
+import { useEffect, useRef, useState } from 'react'
+
+interface Testimonial {
+  quote: string
+  author: string
+  role: string
+  company?: string
+  image?: string
+}
+
+interface TestimonialsSectionProps {
+  testimonials: Testimonial[]
+  kicker?: string
+  title?: string
+}
+
+export function TestimonialsSection({
+  testimonials,
+  kicker = 'WHAT CUSTOMERS SAY',
+  title = 'Testimonials',
+}: TestimonialsSectionProps) {
+  const [activeIndex, setActiveIndex] = useState(0)
+  const autoScrollRef = useRef<NodeJS.Timeout | null>(null)
+
+  useEffect(() => {
+    autoScrollRef.current = setInterval(() => {
+      setActiveIndex((prev) => (prev + 1) % testimonials.length)
+    }, 5000)
+
+    return () => {
+      if (autoScrollRef.current) clearInterval(autoScrollRef.current)
+    }
+  }, [testimonials.length])
+
+  const handlePrev = () => {
+    setActiveIndex((prev) => (prev - 1 + testimonials.length) % testimonials.length)
+  }
+
+  const handleNext = () => {
+    setActiveIndex((prev) => (prev + 1) % testimonials.length)
+  }
+
+  if (!testimonials || testimonials.length === 0) return null
+
+  return (
+    <section className="site-section">
+      <div className="flex flex-col">
+        <p className="site-kicker">{kicker}</p>
+        <h2 className="site-title">{title}</h2>
+
+        <div className="mt-12 relative">
+          <div className="site-panel">
+            <div className="flex items-start gap-4">
+              <div className="flex-1">
+                <p className="text-lg leading-8 text-blue-950 dark:text-stone-200 sm:text-xl">
+                  "{testimonials[activeIndex].quote}"
+                </p>
+
+                <div className="mt-8 flex flex-col gap-2">
+                  <p className="font-bold text-blue-950 dark:text-white">{testimonials[activeIndex].author}</p>
+                  <p className="text-sm text-stone-600 dark:text-stone-400">
+                    {testimonials[activeIndex].role}
+                    {testimonials[activeIndex].company && ` at ${testimonials[activeIndex].company}`}
+                  </p>
+                </div>
+              </div>
+
+              {testimonials[activeIndex].image && (
+                <img
+                  src={testimonials[activeIndex].image}
+                  alt={testimonials[activeIndex].author}
+                  className="h-16 w-16 rounded-full object-cover"
+                />
+              )}
+            </div>
+          </div>
+
+          {testimonials.length > 1 && (
+            <div className="mt-6 flex justify-center gap-4">
+              <button
+                onClick={handlePrev}
+                className="rounded-full border border-stone-300 bg-white px-4 py-2 font-semibold text-stone-700 transition hover:bg-stone-50 dark:border-blue-800 dark:bg-blue-950/30 dark:text-stone-200 dark:hover:bg-blue-950"
+                aria-label="Previous testimonial"
+              >
+                ← Prev
+              </button>
+
+              <div className="flex items-center gap-2">
+                {testimonials.map((_, index) => (
+                  <button
+                    key={index}
+                    onClick={() => setActiveIndex(index)}
+                    className={`h-2 w-2 rounded-full transition ${
+                      index === activeIndex ? 'bg-orange-600 dark:bg-orange-500' : 'bg-stone-300 dark:bg-stone-600'
+                    }`}
+                    aria-label={`Go to testimonial ${index + 1}`}
+                  />
+                ))}
+              </div>
+
+              <button
+                onClick={handleNext}
+                className="rounded-full border border-stone-300 bg-white px-4 py-2 font-semibold text-stone-700 transition hover:bg-stone-50 dark:border-blue-800 dark:bg-blue-950/30 dark:text-stone-200 dark:hover:bg-blue-950"
+                aria-label="Next testimonial"
+              >
+                Next →
+              </button>
+            </div>
+          )}
+        </div>
+      </div>
+    </section>
+  )
+}

apps/homepage/src/components/WorkspaceTabs.tsx

@@ -0,0 +1,234 @@
+'use client'
+
+import { useMarketplacePreferences } from '@/components/MarketplaceShell'
+import Image from 'next/image'
+import Link from 'next/link'
+import { resolveBrowserAppUrl } from '@/lib/appUrls'
+
+export default function WorkspaceTabs() {
+  const { language, theme } = useMarketplacePreferences()
+  const dashboardUrl = resolveBrowserAppUrl(process.env.NEXT_PUBLIC_DASHBOARD_URL ?? 'http://localhost:3000/dashboard')
+
+  const copy = {
+    en: {
+      badge: 'Unified Workspace',
+      title: 'One launch point on port 3000 for marketplace discovery, company operations, and platform admin work.',
+      intro:
+        'The apps still run as separate Next.js surfaces internally, but the navbar now takes you straight to each workspace area without hunting for ports.',
+      sectionBadge: 'RentalDriveGo Marketplace',
+      sectionTitle: 'Browse local rental fleets without losing the company behind the wheel.',
+      sectionBodyA: 'Discovery happens here. Booking and payment happen on each rental company\'s own branded site.',
+      sectionBodyB: 'Customers only reach that branded booking site after selecting a vehicle from a company\'s fleet.',
+      exploreVehicles: 'Explore vehicles',
+      viewPricing: 'View pricing',
+      nowServing: 'Now serving',
+      promoTitle: 'Discovery, pricing, owner sign-in, and booking entry all stay anchored on the marketplace surface.',
+      promoBody:
+        'Company Workspace and Platform Operations stay available from the navbar, while branded booking starts after a renter picks a vehicle.',
+      customerPaths: 'Customer Paths',
+      ownerSignIn: 'Owner sign in',
+      pricing: 'Pricing',
+      workspaceAreas: 'Workspace Areas',
+      workspaceA: 'Company Workspace for fleet operations, team, billing, and analytics.',
+      workspaceB: 'Platform Operations for platform-level support and tenant oversight.',
+      workspaceC: 'Branded booking handoff begins only after a renter chooses a specific vehicle.',
+    },
+    fr: {
+      badge: 'Espace unifié',
+      title: 'Un point d’entrée sur le port 3000 pour la découverte marketplace, les opérations de l’entreprise et l’administration de la plateforme.',
+      intro:
+        'Les applications restent des interfaces Next.js séparées en interne, mais la barre de navigation mène directement à chaque espace sans avoir à changer de port manuellement.',
+      sectionBadge: 'Marketplace RentalDriveGo',
+      sectionTitle: 'Parcourez les flottes locales sans perdre l’identité de l’entreprise qui gère la location.',
+      sectionBodyA: 'La découverte commence ici. La réservation et le paiement se font sur le site de réservation propre à chaque entreprise.',
+      sectionBodyB: 'Les clients accèdent à ce site de réservation seulement après avoir choisi un véhicule dans la flotte d’une entreprise.',
+      exploreVehicles: 'Explorer les véhicules',
+      viewPricing: 'Voir les tarifs',
+      nowServing: 'Disponible',
+      promoTitle: 'La découverte, les tarifs, la connexion propriétaire et l’accès à la réservation restent ancrés dans la marketplace.',
+      promoBody:
+        'L’espace entreprise et les opérations de la plateforme restent accessibles depuis la navigation, tandis que la réservation de marque commence après le choix d’un véhicule.',
+      customerPaths: 'Parcours client',
+      ownerSignIn: 'Connexion propriétaire',
+      pricing: 'Tarifs',
+      workspaceAreas: 'Espaces de travail',
+      workspaceA: 'Espace entreprise pour la flotte, l’équipe, la facturation et l’analyse.',
+      workspaceB: 'Opérations plateforme pour le support global et la supervision multi-entreprises.',
+      workspaceC: 'Le transfert vers la réservation de marque commence seulement après le choix d’un véhicule précis.',
+    },
+    ar: {
+      badge: 'مساحة موحدة',
+      title: 'نقطة دخول واحدة على المنفذ 3000 لاكتشاف السوق وعمليات الشركات وإدارة المنصة.',
+      intro:
+        'ما زالت التطبيقات تعمل كواجهات Next.js منفصلة داخلياً، لكن شريط التنقل ينقلك مباشرة إلى كل مساحة عمل من دون الحاجة إلى البحث عن المنافذ.',
+      sectionBadge: 'سوق RentalDriveGo',
+      sectionTitle: 'تصفح أساطيل التأجير المحلية مع الحفاظ على هوية الشركة التي تدير الحجز.',
+      sectionBodyA: 'الاكتشاف يبدأ هنا. الحجز والدفع يتمان على موقع الحجز الخاص بكل شركة.',
+      sectionBodyB: 'لا يصل العميل إلى موقع الحجز الخاص بالشركة إلا بعد اختيار سيارة من أسطول تلك الشركة.',
+      exploreVehicles: 'استكشف السيارات',
+      viewPricing: 'عرض الأسعار',
+      nowServing: 'المتاح الآن',
+      promoTitle: 'الاكتشاف والأسعار وتسجيل دخول المالك وبداية الحجز تبقى كلها داخل واجهة السوق.',
+      promoBody:
+        'تبقى مساحة الشركة وعمليات المنصة متاحتين من شريط التنقل، بينما يبدأ الحجز المرتبط بالعلامة التجارية بعد اختيار المستأجر لسيارة.',
+      customerPaths: 'مسارات العملاء',
+      ownerSignIn: 'دخول المالك',
+      pricing: 'الأسعار',
+      workspaceAreas: 'مساحات العمل',
+      workspaceA: 'مساحة الشركة لإدارة الأسطول والفريق والفوترة والتحليلات.',
+      workspaceB: 'عمليات المنصة للدعم والإشراف على الشركات على مستوى المنصة.',
+      workspaceC: 'الانتقال إلى موقع الحجز الخاص بالشركة يبدأ فقط بعد اختيار سيارة محددة.',
+    },
+  }[language]
+
+  return (
+    <main className={`min-h-screen transition-colors ${
+      theme === 'dark'
+        ? 'bg-[radial-gradient(circle_at_top,rgba(234,88,12,0.20),transparent_28%),linear-gradient(180deg,#0f1f4a,#112d6e)]'
+        : 'bg-[radial-gradient(circle_at_top,rgba(234,88,12,0.08),transparent_28%),linear-gradient(180deg,#f5f8ff,white)]'
+    }`}>
+      <div className="shell py-16 sm:py-20">
+        <div className="max-w-4xl">
+          <div className="flex items-center gap-4">
+            <Link href="/" aria-label="RentalDriveGo home">
+              <Image
+                src="/rentalcardrive.png"
+                alt="RentalDriveGo"
+                width={72}
+                height={72}
+                className={`h-16 w-16 rounded-2xl object-contain p-1 shadow-sm ${
+                  theme === 'dark' ? 'border border-orange-500/40 bg-blue-950' : 'border border-orange-200 bg-white'
+                }`}
+              />
+            </Link>
+            <p className={`text-sm font-semibold uppercase tracking-[0.24em] ${
+              theme === 'dark' ? 'text-orange-300' : 'text-orange-700'
+            }`}>
+              {copy.badge}
+            </p>
+          </div>
+          <h1 className={`mt-5 text-4xl font-black tracking-tight sm:text-6xl ${
+            theme === 'dark' ? 'text-slate-100' : 'text-blue-900'
+          }`}>
+            {copy.title}
+          </h1>
+          <p className={`mt-6 max-w-3xl text-lg leading-8 ${
+            theme === 'dark' ? 'text-stone-300' : 'text-stone-600'
+          }`}>
+            {copy.intro}
+          </p>
+        </div>
+
+        <section className={`mt-10 overflow-hidden rounded-[2rem] border shadow-xl transition-colors ${
+          theme === 'dark'
+            ? 'border-blue-900 bg-blue-950 shadow-black/20'
+            : 'border-stone-200 bg-white shadow-stone-200/40'
+        }`}>
+          <div className={`px-6 py-6 ${theme === 'dark' ? 'border-b border-stone-800' : 'border-b border-stone-200'}`}>
+            <p className={`text-xs font-semibold uppercase tracking-[0.18em] ${
+              theme === 'dark' ? 'text-orange-300' : 'text-orange-700'
+            }`}>
+              {copy.sectionBadge}
+            </p>
+            <div className="mt-3 flex flex-col gap-4 lg:flex-row lg:items-end lg:justify-between">
+              <div className="max-w-3xl">
+                <h2 className={`text-2xl font-black tracking-tight ${
+                  theme === 'dark' ? 'text-slate-100' : 'text-blue-900'
+                }`}>
+                  {copy.sectionTitle}
+                </h2>
+                <p className={`mt-3 text-sm leading-7 ${
+                  theme === 'dark' ? 'text-stone-300' : 'text-stone-600'
+                }`}>
+                  {copy.sectionBodyA}
+                </p>
+                <p className={`mt-3 text-sm leading-7 ${
+                  theme === 'dark' ? 'text-stone-300' : 'text-stone-600'
+                }`}>
+                  {copy.sectionBodyB}
+                </p>
+              </div>
+
+              <div className="flex flex-wrap gap-3">
+                <Link
+                  href="/features"
+                  className={`rounded-full px-5 py-2.5 text-sm font-semibold transition ${
+                    theme === 'dark'
+                      ? 'bg-orange-400 text-blue-950 hover:bg-orange-300'
+                      : 'bg-blue-950 text-white hover:bg-blue-900/40'
+                  }`}
+                >
+                  {copy.exploreVehicles}
+                </Link>
+                <Link
+                  href="/pricing"
+                  className={`rounded-full border px-5 py-2.5 text-sm font-semibold transition ${
+                    theme === 'dark'
+                      ? 'border-blue-800 text-slate-200 hover:border-blue-600 hover:bg-blue-900/40'
+                      : 'border-stone-300 text-stone-700 hover:border-stone-400 hover:bg-stone-50'
+                  }`}
+                >
+                  {copy.viewPricing}
+                </Link>
+              </div>
+            </div>
+          </div>
+
+          <div className={`grid gap-6 px-6 py-8 lg:grid-cols-[1.4fr_0.9fr] ${
+            theme === 'dark' ? 'bg-blue-950' : 'bg-stone-50'
+          }`}>
+            <div className="rounded-[1.5rem] bg-[linear-gradient(135deg,#06132e,#0d1b38)] p-8 text-white">
+              <p className="text-xs font-semibold uppercase tracking-[0.24em] text-orange-300">{copy.nowServing}</p>
+              <h3 className="mt-4 text-3xl font-black tracking-tight">
+                {copy.promoTitle}
+              </h3>
+              <p className="mt-4 max-w-2xl text-sm leading-7 text-stone-200">
+                {copy.promoBody}
+              </p>
+            </div>
+
+            <div className="grid gap-4">
+              <div className={`rounded-[1.5rem] border p-5 ${
+                theme === 'dark' ? 'border-blue-900 bg-blue-950' : 'border-stone-200 bg-white'
+              }`}>
+                <p className={`text-xs font-semibold uppercase tracking-[0.18em] ${
+                  theme === 'dark' ? 'text-stone-400' : 'text-stone-500'
+                }`}>{copy.customerPaths}</p>
+                <div className="mt-4 flex flex-wrap gap-3">
+                  <Link href="/features" className="rounded-full bg-orange-500 px-4 py-2 text-sm font-semibold text-white">
+                    {copy.exploreVehicles}
+                  </Link>
+                  <a className={`rounded-full border px-4 py-2 text-sm font-semibold ${
+                    theme === 'dark' ? 'border-stone-700 text-stone-200' : 'border-stone-300 text-stone-700'
+                  }`} href={`${dashboardUrl}/sign-in`}>
+                    {copy.ownerSignIn}
+                  </a>
+                  <Link className={`rounded-full border px-4 py-2 text-sm font-semibold ${
+                    theme === 'dark' ? 'border-stone-700 text-stone-200' : 'border-stone-300 text-stone-700'
+                  }`} href="/pricing">
+                    {copy.pricing}
+                  </Link>
+                </div>
+              </div>
+
+              <div className={`rounded-[1.5rem] border p-5 ${
+                theme === 'dark' ? 'border-blue-900 bg-blue-950' : 'border-stone-200 bg-white'
+              }`}>
+                <p className={`text-xs font-semibold uppercase tracking-[0.18em] ${
+                  theme === 'dark' ? 'text-stone-400' : 'text-stone-500'
+                }`}>{copy.workspaceAreas}</p>
+                <ul className={`mt-4 space-y-3 text-sm ${
+                  theme === 'dark' ? 'text-stone-300' : 'text-stone-600'
+                }`}>
+                  <li>{copy.workspaceA}</li>
+                  <li>{copy.workspaceB}</li>
+                  <li>{copy.workspaceC}</li>
+                </ul>
+              </div>
+            </div>
+          </div>
+        </section>
+      </div>
+    </main>
+  )
+}

apps/homepage/src/lib/api.test.ts

@@ -0,0 +1,77 @@
+import { afterEach, describe, expect, it, vi } from 'vitest'
+import { MarketplaceApiError, marketplaceFetch, marketplaceFetchOrDefault, marketplacePost } from './api'
+
+afterEach(() => {
+  delete process.env.NEXT_PUBLIC_API_URL
+  delete process.env.API_INTERNAL_URL
+  vi.restoreAllMocks()
+  Reflect.deleteProperty(globalThis, 'fetch')
+})
+
+describe('marketplace API helpers', () => {
+  it('unwraps successful GET responses from the data envelope', async () => {
+    const fetchMock = vi.fn(async () => ({ ok: true, json: async () => ({ data: [{ id: 'vehicle_1' }] }) }))
+    Object.defineProperty(globalThis, 'fetch', { configurable: true, value: fetchMock })
+
+    await expect(marketplaceFetch('/marketplace/vehicles')).resolves.toEqual([{ id: 'vehicle_1' }])
+    expect(fetchMock).toHaveBeenCalledWith(expect.stringMatching(/\/api\/v1\/marketplace\/vehicles$/), {
+      cache: 'no-store',
+      credentials: 'include',
+    })
+  })
+
+  it('throws rich marketplace API errors', async () => {
+    Object.defineProperty(globalThis, 'fetch', {
+      configurable: true,
+      value: vi.fn(async () => ({
+        ok: false,
+        status: 409,
+        json: async () => ({ message: 'Vehicle unavailable', error: 'VEHICLE_UNAVAILABLE', nextAvailableAt: '2026-07-01T10:00:00.000Z' }),
+      })),
+    })
+
+    await expect(marketplaceFetch('/marketplace/book')).rejects.toMatchObject({
+      name: 'MarketplaceApiError',
+      message: 'Vehicle unavailable',
+      status: 409,
+      code: 'VEHICLE_UNAVAILABLE',
+      nextAvailableAt: '2026-07-01T10:00:00.000Z',
+    })
+  })
+
+  it('returns fallbacks when GET requests fail', async () => {
+    Object.defineProperty(globalThis, 'fetch', {
+      configurable: true,
+      value: vi.fn(async () => ({ ok: false, status: 500, json: async () => ({ message: 'Down' }) })),
+    })
+
+    await expect(marketplaceFetchOrDefault('/marketplace/homepage', { hero: null })).resolves.toEqual({ hero: null })
+  })
+
+  it('posts JSON payloads and unwraps successful responses', async () => {
+    process.env.NEXT_PUBLIC_API_URL = 'https://api.example.com/api/v1'
+    const fetchMock = vi.fn(async () => ({ ok: true, json: async () => ({ data: { id: 'reservation_1' } }) }))
+    Object.defineProperty(globalThis, 'fetch', { configurable: true, value: fetchMock })
+
+    await expect(marketplacePost('/site/reservations', { vehicleId: 'vehicle_1' })).resolves.toEqual({ id: 'reservation_1' })
+    expect(fetchMock).toHaveBeenCalledWith('https://api.example.com/api/v1/site/reservations', expect.objectContaining({
+      method: 'POST',
+      credentials: 'include',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ vehicleId: 'vehicle_1' }),
+    }))
+  })
+
+  it('uses a generic error message when the response body is not JSON', async () => {
+    Object.defineProperty(globalThis, 'fetch', {
+      configurable: true,
+      value: vi.fn(async () => ({ ok: false, status: 502, json: async () => { throw new Error('bad json') } })),
+    })
+
+    await expect(marketplaceFetch('/site/homepage')).rejects.toMatchObject({
+      name: 'MarketplaceApiError',
+      message: 'Request failed',
+      status: 502,
+    })
+  })
+})

apps/homepage/src/lib/api.ts

@@ -0,0 +1,50 @@
+const API_BASE =
+  (typeof window === 'undefined' ? process.env.API_INTERNAL_URL : process.env.NEXT_PUBLIC_API_URL)
+  ?? process.env.NEXT_PUBLIC_API_URL
+  ?? 'http://localhost:4000/api/v1'
+
+export class MarketplaceApiError extends Error {
+  status: number
+  code?: string
+  nextAvailableAt?: string | null
+
+  constructor(message: string, status: number, code?: string, nextAvailableAt?: string | null) {
+    super(message)
+    this.name = 'MarketplaceApiError'
+    this.status = status
+    this.code = code
+    this.nextAvailableAt = nextAvailableAt
+  }
+}
+
+export async function marketplaceFetch<T>(path: string, init?: RequestInit): Promise<T> {
+  const res = await fetch(`${API_BASE}${path}`, {
+    cache: 'no-store',
+    credentials: 'include',
+    ...init,
+  })
+  const json = await res.json().catch(() => null)
+  if (!res.ok) throw new MarketplaceApiError(json?.message ?? 'Request failed', res.status, json?.error, json?.nextAvailableAt)
+  return json.data as T
+}
+
+export async function marketplaceFetchOrDefault<T>(path: string, fallback: T): Promise<T> {
+  try {
+    return await marketplaceFetch<T>(path)
+  } catch {
+    return fallback
+  }
+}
+
+export async function marketplacePost<T>(path: string, body: unknown): Promise<T> {
+  const base = process.env.NEXT_PUBLIC_API_URL ?? 'http://localhost:4000/api/v1'
+  const res = await fetch(`${base}${path}`, {
+    method: 'POST',
+    credentials: 'include',
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify(body),
+  })
+  const json = await res.json().catch(() => null)
+  if (!res.ok) throw new MarketplaceApiError(json?.message ?? 'Request failed', res.status, json?.error, json?.nextAvailableAt)
+  return json.data as T
+}

apps/homepage/src/lib/appUrls.test.ts

@@ -0,0 +1,40 @@
+import { afterEach, describe, expect, it } from 'vitest'
+import { resolveBrowserAppUrl, resolveServerAppUrl } from './appUrls'
+
+function installWindow(hostname: string, protocol = 'https:') {
+  Object.defineProperty(globalThis, 'window', {
+    configurable: true,
+    value: { location: { hostname, protocol } },
+  })
+}
+
+afterEach(() => {
+  Reflect.deleteProperty(globalThis, 'window')
+})
+
+describe('marketplace app URL resolution', () => {
+  it('leaves server-side browser fallback unchanged when window is unavailable', () => {
+    expect(resolveBrowserAppUrl('http://localhost:3000')).toBe('http://localhost:3000')
+  })
+
+  it('preserves localhost fallbacks but removes trailing slash', () => {
+    installWindow('localhost')
+    expect(resolveBrowserAppUrl('http://localhost:3000/')).toBe('http://localhost:3000')
+  })
+
+  it('rewrites production browser fallbacks to the active host and protocol', () => {
+    installWindow('www.rentaldrivego.ma', 'https:')
+    expect(resolveBrowserAppUrl('http://localhost:3000')).toBe('https://www.rentaldrivego.ma')
+  })
+
+  it('keeps path prefixes while rewriting the browser origin', () => {
+    installWindow('rental.example.com', 'https:')
+    expect(resolveBrowserAppUrl('http://localhost:3000/marketplace')).toBe('https://rental.example.com/marketplace')
+  })
+
+  it('resolves server URLs from forwarded host/proto and handles invalid fallbacks safely', () => {
+    expect(resolveServerAppUrl('http://localhost:3000', 'market.example.com', 'https')).toBe('https://market.example.com:3000')
+    expect(resolveServerAppUrl('http://localhost:3000', null)).toBe('http://localhost:3000')
+    expect(resolveServerAppUrl('/relative', 'market.example.com')).toBe('/relative')
+  })
+})

apps/homepage/src/lib/appUrls.ts

@@ -0,0 +1,28 @@
+export function resolveBrowserAppUrl(fallback: string): string {
+  if (typeof window === 'undefined') return fallback
+  const h = window.location.hostname
+  if (h === 'localhost' || h === '127.0.0.1') return fallback.replace(/\/$/, '')
+
+  try {
+    const target = new URL(fallback)
+    target.protocol = window.location.protocol
+    target.hostname = h
+    target.port = ''
+    return target.toString().replace(/\/$/, '')
+  } catch {
+    return fallback
+  }
+}
+
+export function resolveServerAppUrl(fallback: string, host: string | null, proto?: string | null): string {
+  if (!host) return fallback
+
+  try {
+    const target = new URL(fallback)
+    target.protocol = `${proto || target.protocol.replace(':', '')}:`
+    target.host = host
+    return target.toString().replace(/\/$/, '')
+  } catch {
+    return fallback
+  }
+}

apps/homepage/src/lib/footerContent.test.ts

@@ -0,0 +1,67 @@
+import { describe, expect, it } from 'vitest'
+import {
+  appPrivacyHref,
+  appTermsHref,
+  footerPageHref,
+  footerPageSlugs,
+  getFooterPageContent,
+  isFooterPageSlug,
+} from './footerContent'
+import type { MarketplaceLanguage } from './i18n'
+
+const languages: MarketplaceLanguage[] = ['en', 'fr', 'ar']
+
+describe('marketplace footer content registry', () => {
+  it('keeps every declared slug routable and recognizable', () => {
+    expect(footerPageSlugs.length).toBeGreaterThan(5)
+
+    for (const slug of footerPageSlugs) {
+      expect(isFooterPageSlug(slug)).toBe(true)
+      expect(footerPageHref[slug]).toBe(`/footer/${slug}`)
+    }
+
+    expect(isFooterPageSlug('privacy')).toBe(false)
+    expect(isFooterPageSlug('../admin')).toBe(false)
+  })
+
+  it('provides localized title and paragraph content for every footer page', () => {
+    for (const language of languages) {
+      for (const slug of footerPageSlugs) {
+        const content = getFooterPageContent(language, slug)
+
+        expect(content.title.trim()).not.toBe('')
+        expect(content.paragraphs.length).toBeGreaterThan(0)
+        expect(content.paragraphs.every((paragraph) => paragraph.trim().length > 0)).toBe(true)
+
+        for (const section of content.sections ?? []) {
+          expect(section.heading.trim()).not.toBe('')
+          expect(section.paragraphs.length).toBeGreaterThan(0)
+        }
+      }
+    }
+  })
+
+  it('keeps website privacy and application privacy links separate by locale', () => {
+    expect(footerPageHref['privacy-policy']).toBe('/footer/privacy-policy')
+    expect(appPrivacyHref).toEqual({
+      en: '/app-privacy-en',
+      fr: '/app-privacy-fr',
+      ar: '/app-privacy-ar',
+    })
+    expect(appTermsHref).toEqual({
+      en: '/app-tc-en',
+      fr: '/app-tc-fr',
+      ar: '/app-tc-ar',
+    })
+  })
+
+  it('exposes footer policy copy that points users to the locale-matched app policy pages', () => {
+    expect(getFooterPageContent('en', 'privacy-policy').paragraphs[0]).toContain('app-privacy-en')
+    expect(getFooterPageContent('fr', 'privacy-policy').paragraphs[0]).toContain('app-privacy-fr')
+    expect(getFooterPageContent('ar', 'privacy-policy').paragraphs[0]).toContain('app-privacy-ar')
+
+    expect(getFooterPageContent('en', 'general-conditions').paragraphs[0]).toContain('app-tc-en')
+    expect(getFooterPageContent('fr', 'general-conditions').paragraphs[0]).toContain('app-tc-fr')
+    expect(getFooterPageContent('ar', 'general-conditions').paragraphs[0]).toContain('app-tc-ar')
+  })
+})

apps/homepage/src/lib/footerContent.ts

@@ -0,0 +1,790 @@
+import type { MarketplaceLanguage } from './i18n'
+
+export const footerPageSlugs = [
+  'about-us',
+  'terms-of-service',
+  'security',
+  'compliance',
+  'privacy-policy',
+  'cookie-policy',
+  'newsletter',
+  'contact-sales',
+  'general-conditions',
+] as const
+
+export type FooterPageSlug = (typeof footerPageSlugs)[number]
+
+export const appPrivacyHref = {
+  en: '/app-privacy-en',
+  fr: '/app-privacy-fr',
+  ar: '/app-privacy-ar',
+} as const
+
+export const appTermsHref = {
+  en: '/app-tc-en',
+  fr: '/app-tc-fr',
+  ar: '/app-tc-ar',
+} as const
+
+export type FooterPageContent = {
+  title: string
+  paragraphs: string[]
+  sections?: Array<{
+    heading: string
+    paragraphs: string[]
+  }>
+}
+
+export const footerPageHref: Record<FooterPageSlug, string> = {
+  'about-us': '/footer/about-us',
+  'terms-of-service': '/footer/terms-of-service',
+  security: '/footer/security',
+  compliance: '/footer/compliance',
+  'privacy-policy': '/footer/privacy-policy',
+  'cookie-policy': '/footer/cookie-policy',
+  newsletter: '/footer/newsletter',
+  'contact-sales': '/footer/contact-sales',
+  'general-conditions': '/footer/general-conditions',
+}
+
+const footerContent: Record<MarketplaceLanguage, Record<FooterPageSlug, FooterPageContent>> = {
+  en: {
+    'about-us': {
+      title: 'About Us',
+      paragraphs: [
+        'RentalDriveGo helps car rental businesses streamline operations, manage vehicle fleets, and grow reservations through one powerful platform. Our tools are designed to simplify fleet tracking, booking management, customer reservations, payments, and day-to-day rental operations so companies can focus on delivering exceptional service instead of drowning in spreadsheets and phone calls.',
+        'Whether you operate a small local rental agency or a large multi-location fleet, RentalDriveGo provides the technology to help you scale efficiently and serve customers with confidence.',
+      ],
+    },
+    'terms-of-service': {
+      title: 'Terms of Service',
+      paragraphs: [
+        'By using RentalDriveGo, you agree to comply with our platform policies, usage guidelines, and applicable laws. Our services are intended for legitimate car rental businesses and their authorized users. Users are responsible for maintaining account security, providing accurate business information, and using the platform responsibly.',
+        'RentalDriveGo reserves the right to suspend accounts involved in fraudulent activity, misuse, or violations of these terms.',
+      ],
+    },
+    security: {
+      title: 'Security',
+      paragraphs: [
+        'RentalDriveGo takes security seriously. We use modern encryption standards, secure cloud infrastructure, and continuous monitoring to help protect your business data, customer information, and reservation records.',
+        'Our platform is built with security best practices to minimize risks and ensure reliable system performance.',
+      ],
+    },
+    compliance: {
+      title: 'Compliance',
+      paragraphs: [
+        'RentalDriveGo is committed to operating in accordance with industry standards and applicable privacy and data protection regulations. We continuously review our systems and operational practices to maintain compliance, security, and transparency for our customers and partners.',
+      ],
+    },
+    'privacy-policy': {
+      title: 'Privacy Policy',
+      paragraphs: [
+        'You are currently viewing the privacy policy for the RentalDriveGo website. To consult the application privacy policy, please visit: https://www.rentaldrivego.ma/app-privacy-en',
+        'RentalDriveGo respects your privacy and is committed to handling your personal data in a transparent manner. This policy explains how we collect, use, store, and share your personal information when you use our website, and it describes your rights regarding the processing of your personal data.',
+      ],
+      sections: [
+        {
+          heading: '1. Data Controller Contact Details',
+          paragraphs: [
+            'This privacy information applies to data processing carried out by RentalDriveGo.',
+            'Telephone: +212 6 05 65 17 51',
+            'Email: service-client@rentaldrivego.ma',
+          ],
+        },
+        {
+          heading: '2. Personal Data We Collect, How We Use It, and How Long We Keep It',
+          paragraphs: [
+            'When you browse our website for information only, without registering for a service or otherwise sending us personal data, your browser automatically sends certain technical information to our hosting provider, such as your browser type, language and version, the date and time of the request, your IP address, pages visited, referring website, volume of data transferred, and operating system.',
+            'This information is temporarily stored to make the website available on your device, support internal analysis, improve the presentation of the website, and detect or prevent misuse. We do not combine this data with other data sources and we do not seek to identify you directly from it. This data is deleted as soon as it is no longer needed for these purposes.',
+            'If you contact us by web form or email, we may collect your name, email address, telephone number, and any other information you choose to provide. We use this information to respond to your questions, contact you when relevant services or registrations become available, or manage participation in campaigns or competitions where applicable.',
+            'We keep your personal data for as long as you maintain an account with us. If you want your personal data to be removed, you must submit a formal request, subject to any legal or contractual retention obligations that may apply.',
+            'You may withdraw your consent at any time where processing is based on consent. Any processing carried out before withdrawal remains lawful.',
+            'We may also use personal data for website review and improvement, market research, analysis, surveys, and marketing activities related to our products and services, subject to applicable law.',
+          ],
+        },
+        {
+          heading: '3. Third-Party Service Providers',
+          paragraphs: [
+            'We do not transfer your personal data to third parties unless we are legally required to do so, the transfer is necessary for the performance of a contractual relationship, or you have expressly agreed to it in advance.',
+            'We may work with service providers in Morocco and abroad for technical and website-related services, including hosting and maintenance.',
+          ],
+        },
+        {
+          heading: '4. Security',
+          paragraphs: [
+            'The security of your personal data is important to us. We apply appropriate organizational, technical, and physical measures to protect the personal information we collect, both during transmission and after receipt.',
+            'Our security measures and privacy practices are reviewed and improved on an ongoing basis.',
+          ],
+        },
+        {
+          heading: '5. Retention of Personal Data',
+          paragraphs: [
+            'We keep personal data only for as long as we are legally entitled to do so, as long as the purpose of processing continues, and provided that no valid objection has been raised.',
+            'Where legal retention periods apply, the data will be stored for the required duration. Once the applicable period has expired, the data will be deleted unless it is still needed for the performance or preparation of a contract.',
+          ],
+        },
+        {
+          heading: '6. Transfer to a Foreign Country',
+          paragraphs: [
+            'The arrangements described above may result in your personal data being stored or processed in foreign countries.',
+          ],
+        },
+        {
+          heading: '7. Your Rights',
+          paragraphs: [
+            'Under Law No. 09-08 relating to the protection of individuals with regard to the processing of personal data, you may have the right to access your personal data, obtain additional information, request correction of inaccurate data, and object, where applicable, to the processing of your data or to its transfer to third parties.',
+            'To exercise your rights, you may send a request including your full name and a copy of your identity document to: service-client@rentaldrivego.ma',
+          ],
+        },
+      ],
+    },
+    'cookie-policy': {
+      title: 'Cookie Policy',
+      paragraphs: [
+        'We use cookies exclusively to operate the platform and remember your personal preferences. We do not use cookies for advertising, cross-site tracking, or behavioural profiling, and we do not share cookie data with third parties for marketing purposes.',
+      ],
+      sections: [
+        {
+          heading: '1. Authentication Cookie',
+          paragraphs: [
+            'Name: employee_session',
+            'This cookie is set when you sign in to the RentalDriveGo workspace. It stores a cryptographically signed token that verifies your identity for the duration of your session. It expires automatically after 8 hours and is deleted when you sign out. This cookie is strictly necessary — without it, access to the dashboard and protected areas is not possible.',
+          ],
+        },
+        {
+          heading: '2. Language Preference Cookie',
+          paragraphs: [
+            'Name: rentaldrivego-language',
+            'Stores your chosen display language (English, French, or Arabic) so the interface appears in your preferred language on every visit across all parts of the platform. It is retained for one year.',
+          ],
+        },
+        {
+          heading: '3. Theme Preference Cookie',
+          paragraphs: [
+            'Name: rentaldrivego-theme',
+            'Stores your preferred colour scheme (light or dark mode). It is read immediately when a page loads to apply the correct theme before the interface is drawn, preventing a visual flash. It is retained for one year.',
+          ],
+        },
+        {
+          heading: '4. Per-User Preference Cookies',
+          paragraphs: [
+            'Names: rentaldrivego-language--[id], rentaldrivego-theme--[id]',
+            'When you are signed in, your language and theme preferences are also saved under a cookie linked to your account identifier. This allows multiple employees sharing a device to each maintain independent preferences. These cookies are retained for one year.',
+          ],
+        },
+        {
+          heading: '5. Legacy Preference Cookies',
+          paragraphs: [
+            'Names: dashboard-language, marketplace-language',
+            'These cookies exist for backward compatibility with earlier versions of the platform and store the same language preference as the primary cookie. They are read only as a fallback and will be phased out in a future update.',
+          ],
+        },
+        {
+          heading: '6. Managing Your Cookies',
+          paragraphs: [
+            'You can manage or delete cookies at any time through your browser settings. Blocking the authentication cookie will prevent you from signing in. Blocking preference cookies will cause your language and theme settings to reset on each visit. For general information about cookies, you may visit http://www.allaboutcookies.org/.',
+          ],
+        },
+      ],
+    },
+    newsletter: {
+      title: 'Newsletter',
+      paragraphs: [
+        'Stay updated with the latest industry insights, product updates, feature releases, and fleet management tips from RentalDriveGo.',
+        'Subscribe to our newsletter and receive helpful resources designed to help car rental businesses grow smarter and operate more efficiently.',
+      ],
+    },
+    'contact-sales': {
+      title: 'Contact Sales',
+      paragraphs: [
+        'Want to see how RentalDriveGo can transform your rental operations? Our sales team is ready to help you explore the right solution for your business.',
+        'Contact us to schedule a demo, discuss pricing, or learn more about our fleet management and reservation platform.',
+      ],
+    },
+    'general-conditions': {
+      title: 'General Conditions of Use',
+      paragraphs: [
+        'You are currently viewing the General Conditions of Use for the RentalDriveGo website. To consult the General Conditions of Use of the application, please visit: https://www.rentaldrivego.ma/app-tc-en',
+        'These General Conditions of Use define the rules that apply when you visit, access, browse, contact us through, or otherwise interact with the website www.rentaldrivego.ma.',
+      ],
+      sections: [
+        {
+          heading: '1. Purpose',
+          paragraphs: [
+            'These conditions govern the use of the website www.rentaldrivego.ma, operated by RentalDriveGo, a limited liability company registered in the Azrou Trade Register under number 00000, with its registered office in Azrou',
+            'They also define the standards relating to the content of the website and apply to any person who visits the website, contacts us or other users through it, links to it, or interacts with it in any way.',
+          ],
+        },
+        {
+          heading: '2. Website Offer',
+          paragraphs: [
+            'We operate the website solely for information, prospecting, and market research purposes.',
+            'Information relating to the RentalDriveGo loyalty program may be presented to visitors, and download links may be made available through the website.',
+          ],
+        },
+        {
+          heading: '3. Contact',
+          paragraphs: [
+            'You may contact us through the website or by email at service-client@rentaldrivego.ma.',
+          ],
+        },
+        {
+          heading: '4. Acceptance of the General Conditions of Use',
+          paragraphs: [
+            'By using the website, you accept these General Conditions of Use and agree to comply with them. If you do not accept them, you must not use the website.',
+            'Our Privacy Policy and Cookie Policy also apply to your use of the website.',
+          ],
+        },
+        {
+          heading: '5. Changes to the General Conditions of Use',
+          paragraphs: [
+            'We may amend these General Conditions of Use at any time. Each time you use the website, you should review the current version.',
+            'We also reserve the right to amend, correct, or update any information published on the website at any time.',
+          ],
+        },
+        {
+          heading: '6. Changes to Website Content and Availability',
+          paragraphs: [
+            'We may update or modify the content of the website at any time to reflect changes in the needs of users and partners.',
+            'The website is made available free of charge. While we use reasonable means to prevent and resolve interruptions, we cannot guarantee continuous or uninterrupted availability.',
+            'We may suspend, withdraw, or restrict the availability of all or part of the website for commercial or operational reasons.',
+            'You are responsible for ensuring that all persons accessing the website through your internet connection are aware of these conditions and comply with them.',
+          ],
+        },
+        {
+          heading: '7. Scope of Information on the Website',
+          paragraphs: [
+            'The content of the website is provided for general information purposes only and does not constitute a recommendation on which you should rely.',
+            'Although we make reasonable efforts to update the information on the website, we do not guarantee, whether expressly or implicitly, that the content is accurate, complete, or current.',
+          ],
+        },
+        {
+          heading: '8. Third-Party Websites',
+          paragraphs: [
+            'We are not responsible for third-party websites to which the website may link.',
+            'Any hyperlinks to third-party content, websites, or resources are provided for information purposes only, and we cannot be held responsible for their content, accuracy, or quality.',
+          ],
+        },
+        {
+          heading: '9. Limitation of Liability',
+          paragraphs: [
+            'You agree that access to and use of the website and any associated pages is at your own risk.',
+            'Nothing in these conditions excludes or limits our liability where such exclusion or limitation would be unlawful.',
+            'Neither we nor our partners or affiliates may be held liable for damage resulting from the use of information, files, links, or websites accessible from or received through the website.',
+          ],
+        },
+        {
+          heading: '10. Your Responsibilities',
+          paragraphs: [
+            'You acknowledge that we may use the information you provide to us where you have given the required consent or where another lawful basis applies.',
+            'You agree to use the website only for lawful purposes.',
+            'If we consider that a breach of these General Conditions of Use has occurred, we may take any action we deem appropriate.',
+          ],
+        },
+        {
+          heading: '11. Intellectual Property',
+          paragraphs: [
+            'The website is our property and the entire website is protected by intellectual property laws.',
+            'All rights of reproduction and representation are reserved.',
+          ],
+        },
+      ],
+    },
+  },
+  fr: {
+    'about-us': {
+      title: 'À propos de nous',
+      paragraphs: [
+        'RentalDriveGo aide les entreprises de location de voitures à simplifier leurs opérations, gérer leurs flottes et augmenter leurs réservations grâce à une plateforme complète. Nos outils permettent de gérer les véhicules, les réservations, les paiements et les opérations quotidiennes de manière efficace et centralisée.',
+        'Que vous soyez une petite agence locale ou une grande entreprise multi-sites, RentalDriveGo vous aide à développer votre activité avec des solutions modernes et fiables.',
+      ],
+    },
+    'terms-of-service': {
+      title: 'Conditions d’utilisation',
+      paragraphs: [
+        'En utilisant RentalDriveGo, vous acceptez de respecter nos politiques, nos règles d’utilisation et les lois applicables. Nos services sont destinés aux entreprises de location de voitures et à leurs utilisateurs autorisés.',
+        'RentalDriveGo se réserve le droit de suspendre tout compte impliqué dans une activité frauduleuse ou une violation des présentes conditions.',
+      ],
+    },
+    security: {
+      title: 'Sécurité',
+      paragraphs: [
+        'RentalDriveGo applique des standards de sécurité modernes afin de protéger les données de votre entreprise, les informations de vos clients et vos réservations.',
+        'Notre plateforme utilise le chiffrement, une infrastructure cloud sécurisée et une surveillance continue afin d’assurer la confidentialité et la fiabilité des services.',
+      ],
+    },
+    compliance: {
+      title: 'Conformité',
+      paragraphs: [
+        'RentalDriveGo s’engage à respecter les réglementations applicables ainsi que les standards du secteur concernant la protection des données et la sécurité.',
+        'Nous améliorons continuellement nos systèmes afin de garantir transparence, conformité et confiance à nos clients.',
+      ],
+    },
+    'privacy-policy': {
+      title: 'Politique de confidentialité',
+      paragraphs: [
+        'Vous consultez actuellement la politique de confidentialité du site RentalDriveGo. Pour consulter la politique de confidentialité de l’application, veuillez visiter : https://www.rentaldrivego.ma/app-privacy-fr',
+        'RentalDriveGo respecte votre vie privée et s’engage à traiter vos données personnelles de manière transparente. Cette politique explique comment nous collectons, utilisons, conservons et partageons vos informations personnelles lorsque vous utilisez notre site internet, ainsi que les droits dont vous disposez concernant ce traitement.',
+      ],
+      sections: [
+        {
+          heading: '1. Coordonnées du responsable du traitement',
+          paragraphs: [
+            'Les présentes informations sur la protection des données s’appliquent aux traitements effectués par RentalDriveGo.',
+            'Téléphone : +212 6 05 65 17 51',
+            'Email : service-client@rentaldrivego.ma',
+          ],
+        },
+        {
+          heading: '2. Données personnelles collectées, finalités d’utilisation et durée de conservation',
+          paragraphs: [
+            'Lorsque vous consultez notre site à des fins d’information uniquement, sans vous inscrire à un service et sans nous transmettre de données personnelles par un autre moyen, votre navigateur envoie automatiquement certaines informations techniques à notre hébergeur, notamment le type, la langue et la version du navigateur, la date et l’heure de la demande, l’adresse IP, les pages consultées, le site d’origine, le volume de données transférées et le système d’exploitation.',
+            'Ces informations sont temporairement conservées afin de permettre l’affichage du site sur votre appareil, de réaliser des analyses internes, d’améliorer la présentation du site et de détecter ou prévenir les abus. Nous ne croisons pas ces données avec d’autres sources et nous ne cherchons pas à vous identifier directement à partir de celles-ci. Elles sont supprimées dès qu’elles ne sont plus nécessaires à ces finalités.',
+            'Si vous nous contactez via un formulaire ou par email, nous pouvons collecter votre nom, votre adresse email, votre numéro de téléphone et toute autre information que vous choisissez de nous communiquer. Nous utilisons ces données pour répondre à vos questions, vous contacter lorsque certains services ou inscriptions deviennent disponibles, ou gérer votre participation à des campagnes ou concours le cas échéant.',
+            'Nous conservons vos données personnelles aussi longtemps que vous détenez un compte chez nous. Si vous souhaitez la suppression de vos données personnelles, vous devez nous adresser une demande formelle, sous réserve de toute obligation légale ou contractuelle de conservation applicable.',
+            'Vous pouvez retirer votre consentement à tout moment lorsque le traitement repose sur celui-ci. Les traitements effectués avant ce retrait demeurent licites.',
+            'Nous pouvons également utiliser les données personnelles pour l’évaluation et l’amélioration du site, les études de marché, les analyses, les enquêtes ainsi que les actions de marketing liées à nos produits et services, dans le respect de la loi applicable.',
+          ],
+        },
+        {
+          heading: '3. Prestataires tiers',
+          paragraphs: [
+            'Nous ne communiquons pas vos données personnelles à des tiers sauf en cas d’obligation légale, lorsque ce transfert est nécessaire à l’exécution d’une relation contractuelle, ou lorsque vous y avez expressément consenti au préalable.',
+            'Nous pouvons travailler avec des prestataires situés au Maroc et à l’étranger pour des services techniques et liés au site internet, notamment l’hébergement et la maintenance.',
+          ],
+        },
+        {
+          heading: '4. Sécurité',
+          paragraphs: [
+            'La sécurité de vos données personnelles est importante pour nous. Nous mettons en place des mesures organisationnelles, techniques et physiques appropriées afin de protéger les informations personnelles collectées, aussi bien pendant leur transmission qu’après leur réception.',
+            'Nos mesures de sécurité et nos pratiques de confidentialité sont revues et améliorées de manière continue.',
+          ],
+        },
+        {
+          heading: '5. Conservation des données personnelles',
+          paragraphs: [
+            'Nous conservons les données personnelles uniquement aussi longtemps que la loi nous y autorise, tant que la finalité du traitement subsiste et en l’absence d’opposition valable.',
+            'Lorsque des délais légaux de conservation s’appliquent, les données sont conservées pendant la durée requise. À l’expiration de cette période, elles sont supprimées sauf si elles restent nécessaires à l’exécution ou à la préparation d’un contrat.',
+          ],
+        },
+        {
+          heading: '6. Transfert vers un pays étranger',
+          paragraphs: [
+            'Les traitements décrits ci-dessus peuvent entraîner le stockage ou le traitement de vos données personnelles dans des pays étrangers.',
+          ],
+        },
+        {
+          heading: '7. Vos droits',
+          paragraphs: [
+            'Conformément à la loi n° 09-08 relative à la protection des personnes physiques à l’égard du traitement des données à caractère personnel, vous pouvez disposer d’un droit d’accès à vos données, d’un droit d’obtenir des informations complémentaires, d’un droit de rectification des données inexactes et, le cas échéant, d’un droit d’opposition au traitement ou au transfert de vos données à des tiers.',
+            'Pour exercer vos droits, vous pouvez envoyer une demande indiquant votre nom complet et accompagnée d’une copie de votre pièce d’identité à : service-client@rentaldrivego.ma',
+          ],
+        },
+      ],
+    },
+    'cookie-policy': {
+      title: 'Politique relative aux cookies',
+      paragraphs: [
+        'Nous utilisons des cookies exclusivement pour assurer le fonctionnement de la plateforme et mémoriser vos préférences personnelles. Nous n’utilisons pas de cookies à des fins publicitaires, de suivi intersites ou de profilage comportemental, et nous ne partageons pas les données des cookies avec des tiers à des fins marketing.',
+      ],
+      sections: [
+        {
+          heading: '1. Cookie d’authentification',
+          paragraphs: [
+            'Nom : employee_session',
+            'Ce cookie est défini lorsque vous vous connectez à l’espace de travail RentalDriveGo. Il stocke un jeton cryptographiquement signé qui vérifie votre identité pour la durée de votre session. Il expire automatiquement après 8 heures et est supprimé lors de la déconnexion. Ce cookie est strictement nécessaire — sans lui, l’accès au tableau de bord et aux espaces protégés n’est pas possible.',
+          ],
+        },
+        {
+          heading: '2. Cookie de préférence de langue',
+          paragraphs: [
+            'Nom : rentaldrivego-language',
+            'Enregistre la langue d’affichage choisie (français, anglais ou arabe) afin que l’interface s’affiche dans votre langue préférée à chaque visite sur l’ensemble de la plateforme. Il est conservé pendant un an.',
+          ],
+        },
+        {
+          heading: '3. Cookie de préférence de thème',
+          paragraphs: [
+            'Nom : rentaldrivego-theme',
+            'Enregistre le schéma de couleurs préféré (mode clair ou sombre). Il est lu dès le chargement de la page afin d’appliquer le bon thème avant l’affichage de l’interface, évitant ainsi un changement visuel brusque. Il est conservé pendant un an.',
+          ],
+        },
+        {
+          heading: '4. Cookies de préférence par utilisateur',
+          paragraphs: [
+            'Noms : rentaldrivego-language--[id], rentaldrivego-theme--[id]',
+            'Lorsque vous êtes connecté, vos préférences de langue et de thème sont également enregistrées dans un cookie lié à votre identifiant de compte. Cela permet à plusieurs employés partageant un appareil de conserver des préférences indépendantes. Ces cookies sont conservés pendant un an.',
+          ],
+        },
+        {
+          heading: '5. Cookies de préférence hérités',
+          paragraphs: [
+            'Noms : dashboard-language, marketplace-language',
+            'Ces cookies existent pour assurer la compatibilité ascendante avec les versions antérieures de la plateforme et stockent la même préférence de langue que le cookie principal. Ils ne sont lus qu’en secours et seront supprimés dans une prochaine mise à jour.',
+          ],
+        },
+        {
+          heading: '6. Gestion de vos cookies',
+          paragraphs: [
+            'Vous pouvez gérer ou supprimer les cookies à tout moment via les paramètres de votre navigateur. Bloquer le cookie d’authentification vous empêchera de vous connecter. Bloquer les cookies de préférence entraînera la réinitialisation de vos paramètres de langue et de thème à chaque visite. Pour des informations générales sur les cookies, vous pouvez consulter http://www.allaboutcookies.org/.',
+          ],
+        },
+      ],
+    },
+        newsletter: {
+      title: 'Newsletter',
+      paragraphs: [
+        'Recevez les dernières actualités, mises à jour produits, conseils de gestion de flotte et nouveautés de RentalDriveGo.',
+        'Abonnez-vous à notre newsletter pour rester informé et développer votre activité plus efficacement.',
+      ],
+    },
+    'contact-sales': {
+      title: 'Contacter les ventes',
+      paragraphs: [
+        'Vous souhaitez découvrir comment RentalDriveGo peut améliorer vos opérations de location de voitures ?',
+        'Notre équipe commerciale est disponible pour organiser une démonstration, répondre à vos questions et vous proposer la solution adaptée à votre entreprise.',
+      ],
+    },
+    'general-conditions': {
+      title: 'Conditions générales d’utilisation',
+      paragraphs: [
+        'Vous consultez actuellement les Conditions générales d’utilisation du site RentalDriveGo. Pour consulter les Conditions générales d’utilisation de l’application, veuillez visiter : https://www.rentaldrivego.ma/app-tc-fr',
+        'Les présentes Conditions générales d’utilisation définissent les règles applicables lorsque vous visitez, accédez, parcourez, contactez ou utilisez de toute autre manière le site www.rentaldrivego.ma.',
+      ],
+      sections: [
+        {
+          heading: '1. Objet',
+          paragraphs: [
+            'Les présentes conditions régissent l’utilisation du site www.rentaldrivego.ma exploité par RentalDriveGo, société à responsabilité limitée immatriculée au registre du commerce d’Azrou sous le numéro 00000, dont le siège social est situé à Azrou.',
+            'Elles définissent également les règles relatives au contenu du site et s’appliquent à toute personne qui visite le site, nous contacte ou contacte d’autres utilisateurs par son intermédiaire, y crée un lien ou interagit avec lui de quelque manière que ce soit.',
+          ],
+        },
+        {
+          heading: '2. Offre du site',
+          paragraphs: [
+            'Nous exploitons le site exclusivement à des fins d’information, de prospection et d’étude de marché.',
+            'Des informations relatives au programme de fidélité RentalDriveGo peuvent être portées à la connaissance des visiteurs et des liens de téléchargement peuvent être mis à leur disposition.',
+          ],
+        },
+        {
+          heading: '3. Contact',
+          paragraphs: [
+            'Vous pouvez nous contacter via le site ou par email à l’adresse service-client@rentaldrivego.ma.',
+          ],
+        },
+        {
+          heading: '4. Acceptation des Conditions générales d’utilisation',
+          paragraphs: [
+            'En utilisant le site, vous acceptez les présentes Conditions générales d’utilisation et vous vous engagez à les respecter. Si vous ne les acceptez pas, vous ne devez pas utiliser le site.',
+            'Notre Politique de confidentialité et notre Politique relative aux cookies s’appliquent également à votre utilisation du site.',
+          ],
+        },
+        {
+          heading: '5. Modification des Conditions générales d’utilisation',
+          paragraphs: [
+            'Nous pouvons modifier à tout moment les présentes Conditions générales d’utilisation. À chaque utilisation du site, nous vous invitons à consulter la version en vigueur.',
+            'Nous nous réservons également le droit de modifier, corriger ou mettre à jour à tout moment les informations publiées sur le site.',
+          ],
+        },
+        {
+          heading: '6. Modification du contenu et disponibilité du site',
+          paragraphs: [
+            'Nous pouvons mettre à jour ou modifier le contenu du site à tout moment afin de refléter l’évolution des besoins de nos utilisateurs et partenaires.',
+            'Le site est mis à votre disposition gratuitement. Bien que nous mettions en œuvre des moyens raisonnables pour prévenir et résoudre les interruptions, nous ne pouvons garantir une disponibilité constante et ininterrompue.',
+            'Nous pouvons suspendre, retirer ou restreindre l’accès à tout ou partie du site pour des raisons commerciales ou opérationnelles.',
+            'Il vous appartient de veiller à ce que toute personne accédant au site par votre connexion internet ait connaissance des présentes conditions et les respecte.',
+          ],
+        },
+        {
+          heading: '7. Portée des informations figurant sur le site',
+          paragraphs: [
+            'Le contenu du site est fourni à titre d’information générale uniquement et ne constitue ni un conseil ni une recommandation sur lesquels vous devriez vous appuyer.',
+            'Bien que nous fassions des efforts raisonnables pour mettre à jour les informations publiées sur le site, nous ne garantissons pas, expressément ou implicitement, qu’elles soient exactes, complètes ou à jour.',
+          ],
+        },
+        {
+          heading: '8. Responsabilité à l’égard des sites tiers',
+          paragraphs: [
+            'Nous ne sommes pas responsables des sites internet tiers vers lesquels le site peut contenir des liens.',
+            'Les liens hypertextes vers des contenus, sites ou ressources de tiers sont fournis uniquement à titre informatif, et nous ne pouvons être tenus responsables de leur contenu, de leur exactitude ou de leur qualité.',
+          ],
+        },
+        {
+          heading: '9. Limitation de responsabilité',
+          paragraphs: [
+            'Vous reconnaissez que l’accès et l’utilisation du site ainsi que des pages qui y sont rattachées se font à vos propres risques.',
+            'Aucune disposition des présentes conditions n’exclut ou ne limite notre responsabilité lorsqu’une telle exclusion ou limitation serait contraire à la loi.',
+            'Ni nous, ni nos partenaires ou affiliés, ne pourrons être tenus responsables des dommages résultant de l’utilisation des informations, fichiers, liens ou sites accessibles depuis le site ou reçus par son intermédiaire.',
+          ],
+        },
+        {
+          heading: '10. Vos responsabilités',
+          paragraphs: [
+            'Vous reconnaissez que nous pouvons utiliser les informations que vous nous fournissez lorsque vous avez donné le consentement requis ou lorsqu’une autre base légale s’applique.',
+            'Vous vous engagez à utiliser le site uniquement à des fins licites.',
+            'Si nous estimons qu’une violation des présentes Conditions générales d’utilisation a eu lieu, nous pouvons prendre toute mesure que nous jugeons appropriée.',
+          ],
+        },
+        {
+          heading: '11. Propriété intellectuelle',
+          paragraphs: [
+            'Le site est notre propriété et l’ensemble du site est protégé par la législation relative à la propriété intellectuelle.',
+            'Tous les droits de reproduction et de représentation sont réservés.',
+          ],
+        },
+      ],
+    },
+  },
+  ar: {
+    'about-us': {
+      title: 'من نحن',
+      paragraphs: [
+        'تساعد منصة RentalDriveGo شركات تأجير السيارات على إدارة عملياتها بسهولة، وتنظيم أساطيلها، وزيادة الحجوزات من خلال منصة متكاملة وحديثة. توفر أدواتنا حلولاً لإدارة المركبات والحجوزات والمدفوعات والعمليات اليومية بكفاءة عالية.',
+        'سواء كنت تدير شركة محلية صغيرة أو أسطولاً كبيراً متعدد الفروع، فإن RentalDriveGo توفر لك التكنولوجيا التي تساعدك على النمو وإدارة أعمالك بثقة.',
+      ],
+    },
+    'terms-of-service': {
+      title: 'شروط الاستخدام',
+      paragraphs: [
+        'باستخدامك لمنصة RentalDriveGo، فإنك توافق على الالتزام بسياسات المنصة والقوانين المعمول بها. خدماتنا مخصصة لشركات تأجير السيارات والمستخدمين المصرح لهم فقط.',
+        'تحتفظ RentalDriveGo بحق تعليق أي حساب يشارك في أنشطة احتيالية أو يخالف شروط الاستخدام.',
+      ],
+    },
+    security: {
+      title: 'الأمان',
+      paragraphs: [
+        'تلتزم RentalDriveGo بتوفير أعلى معايير الأمان لحماية بيانات شركتك ومعلومات عملائك وسجلات الحجوزات.',
+        'تستخدم منصتنا تقنيات تشفير حديثة وبنية سحابية آمنة وأنظمة مراقبة مستمرة لضمان حماية البيانات واستقرار الخدمة.',
+      ],
+    },
+    compliance: {
+      title: 'الامتثال',
+      paragraphs: [
+        'تلتزم RentalDriveGo بالامتثال للمعايير واللوائح المعمول بها المتعلقة بحماية البيانات والخصوصية والأمان.',
+        'نعمل باستمرار على تطوير أنظمتنا وإجراءاتنا لضمان الشفافية والثقة لعملائنا وشركائنا.',
+      ],
+    },
+    'privacy-policy': {
+      title: 'سياسة الخصوصية',
+      paragraphs: [
+        'أنت الآن تطّلع على سياسة الخصوصية الخاصة بموقع RentalDriveGo. للاطلاع على سياسة الخصوصية الخاصة بالتطبيق، يرجى زيارة: https://www.rentaldrivego.ma/app-privacy-ar',
+        'تحترم RentalDriveGo خصوصيتك وتلتزم بالتعامل مع بياناتك الشخصية بشفافية. توضح هذه السياسة كيفية جمع معلوماتك الشخصية واستخدامها وتخزينها ومشاركتها عند استخدامك لموقعنا، كما تشرح حقوقك المتعلقة بمعالجة بياناتك الشخصية.',
+      ],
+      sections: [
+        {
+          heading: '1. بيانات الاتصال الخاصة بمسؤول المعالجة',
+          paragraphs: [
+            'تنطبق هذه المعلومات المتعلقة بحماية البيانات على المعالجة التي تقوم بها RentalDriveGo.',
+            'الهاتف: +212 6 05 65 17 51',
+            'البريد الإلكتروني: service-client@rentaldrivego.ma',
+          ],
+        },
+        {
+          heading: '2. ما هي البيانات الشخصية التي نجمعها، وكيف نستخدمها، ومدة الاحتفاظ بها',
+          paragraphs: [
+            'عند زيارتك لموقعنا لأغراض الاطلاع فقط، من دون التسجيل في أي خدمة أو تزويدنا ببيانات شخصية بأي وسيلة أخرى، يرسل متصفحك تلقائياً بعض المعلومات التقنية إلى مزود الاستضافة، مثل نوع المتصفح ولغته وإصداره، وتاريخ ووقت الطلب، وعنوان IP، والصفحات التي تمت زيارتها، والموقع المحيل، وحجم البيانات المنقولة، ونظام التشغيل.',
+            'يتم الاحتفاظ بهذه المعلومات مؤقتاً لتمكين عرض الموقع على جهازك، ودعم التحليل الداخلي، وتحسين طريقة عرض الموقع، واكتشاف أو منع أي إساءة استخدام. نحن لا ندمج هذه البيانات مع مصادر أخرى ولا نسعى إلى التعرف المباشر على هويتك من خلالها. ويتم حذفها بمجرد انتفاء الحاجة إليها لهذه الأغراض.',
+            'إذا تواصلت معنا عبر نموذج إلكتروني أو عبر البريد الإلكتروني، فقد نجمع اسمك وبريدك الإلكتروني ورقم هاتفك وأي معلومات أخرى تختار تقديمها لنا. نستخدم هذه البيانات للرد على استفساراتك، أو التواصل معك عندما تصبح بعض الخدمات أو التسجيلات متاحة، أو لإدارة مشاركتك في الحملات أو المسابقات عند الاقتضاء.',
+            'نحتفظ ببياناتك الشخصية طوال الفترة التي يكون لديك فيها حساب لدينا. وإذا كنت ترغب في حذف بياناتك الشخصية، فيجب عليك تقديم طلب رسمي بذلك، مع مراعاة أي التزامات قانونية أو تعاقدية قد تفرض الاحتفاظ ببعض البيانات.',
+            'يمكنك سحب موافقتك في أي وقت عندما تكون المعالجة قائمة على الموافقة. وتظل المعالجة التي تمت قبل سحب الموافقة مشروعة.',
+            'وقد نستخدم أيضاً البيانات الشخصية لمراجعة الموقع وتحسينه، وإجراء أبحاث السوق، والتحليلات، والاستبيانات، والأنشطة التسويقية المتعلقة بمنتجاتنا وخدماتنا، وفقاً للقانون المعمول به.',
+          ],
+        },
+        {
+          heading: '3. مزودو الخدمات من الأطراف الثالثة',
+          paragraphs: [
+            'لا نقوم بنقل بياناتك الشخصية إلى أطراف ثالثة إلا إذا كان ذلك مطلوباً بموجب القانون، أو كان ضرورياً لتنفيذ علاقة تعاقدية، أو إذا كنت قد وافقت على ذلك صراحة مسبقاً.',
+            'قد نتعاون مع مزودي خدمات في المغرب وخارجه لتقديم الخدمات التقنية والخدمات المرتبطة بالموقع، بما في ذلك الاستضافة والصيانة.',
+          ],
+        },
+        {
+          heading: '4. الأمان',
+          paragraphs: [
+            'تمثل حماية بياناتك الشخصية أولوية بالنسبة لنا. لذلك نعتمد تدابير تنظيمية وتقنية ومادية مناسبة لحماية المعلومات الشخصية التي نجمعها، سواء أثناء نقلها أو بعد استلامها.',
+            'نقوم بمراجعة وتحسين إجراءات الأمان وممارسات الخصوصية لدينا بشكل مستمر.',
+          ],
+        },
+        {
+          heading: '5. الاحتفاظ بالبيانات الشخصية',
+          paragraphs: [
+            'نحتفظ بالبيانات الشخصية فقط للمدة التي يسمح بها القانون، وطالما أن الغرض من المعالجة لا يزال قائماً، وما لم يتم تقديم اعتراض مشروع.',
+            'وعندما تكون هناك مدد قانونية للاحتفاظ بالبيانات، فإننا نلتزم بها. وبعد انتهاء المدة المعمول بها، يتم حذف البيانات ما لم تعد هناك حاجة إليها لتنفيذ عقد أو لاتخاذ خطوات تمهيدية لإبرام عقد.',
+          ],
+        },
+        {
+          heading: '6. النقل إلى دولة أجنبية',
+          paragraphs: [
+            'قد تؤدي الترتيبات المذكورة أعلاه إلى تخزين بياناتك الشخصية أو معالجتها في دول أجنبية.',
+          ],
+        },
+        {
+          heading: '7. حقوقك',
+          paragraphs: [
+            'وفقاً للقانون رقم 09-08 المتعلق بحماية الأشخاص تجاه معالجة المعطيات ذات الطابع الشخصي، قد يكون لك الحق في الوصول إلى بياناتك، والحصول على معلومات إضافية، وطلب تصحيح البيانات غير الدقيقة، والاعتراض عند الاقتضاء على معالجة بياناتك أو على نقلها إلى أطراف ثالثة.',
+            'لممارسة حقوقك، يمكنك إرسال طلب يتضمن اسمك الكامل ونسخة من وثيقة هويتك إلى: service-client@rentaldrivego.ma',
+          ],
+        },
+      ],
+    },
+    'cookie-policy': {
+      title: 'سياسة ملفات تعريف الارتباط',
+      paragraphs: [
+        'نستخدم ملفات تعريف الارتباط حصرياً لتشغيل المنصة وتذكّر تفضيلاتك الشخصية. لا نستخدم ملفات تعريف الارتباط لأغراض إعلانية أو تتبع المستخدمين عبر المواقع أو بناء ملفات تعريف سلوكية، ولا نشارك بيانات ملفات تعريف الارتباط مع أطراف ثالثة لأغراض تسويقية.',
+      ],
+      sections: [
+        {
+          heading: '1. ملف تعريف الارتباط للمصادقة',
+          paragraphs: [
+            'الاسم: employee_session',
+            'يُعيَّن هذا الملف عند تسجيل دخولك إلى مساحة عمل RentalDriveGo. يخزّن رمزاً موقّعاً تشفيرياً يُثبت هويتك طوال مدة الجلسة. تنتهي صلاحيته تلقائياً بعد 8 ساعات ويُحذف عند تسجيل الخروج. هذا الملف ضروري بشكل مطلق — إذ لا يمكن الوصول إلى لوحة التحكم والمناطق المحمية بدونه.',
+          ],
+        },
+        {
+          heading: '2. ملف تعريف الارتباط لتفضيل اللغة',
+          paragraphs: [
+            'الاسم: rentaldrivego-language',
+            'يحفظ لغة العرض التي اخترتها (العربية أو الفرنسية أو الإنجليزية) حتى تظهر الواجهة بلغتك المفضّلة في كل زيارة وعبر جميع أجزاء المنصة. يُحتفظ به لمدة سنة.',
+          ],
+        },
+        {
+          heading: '3. ملف تعريف الارتباط لتفضيل المظهر',
+          paragraphs: [
+            'الاسم: rentaldrivego-theme',
+            'يحفظ نظام الألوان المفضّل لديك (الوضع الفاتح أو الداكن). يُقرأ فور تحميل الصفحة لتطبيق المظهر الصحيح قبل عرض الواجهة، ما يمنع حدوث وميض بصري غير مرغوب. يُحتفظ به لمدة سنة.',
+          ],
+        },
+        {
+          heading: '4. ملفات تعريف الارتباط للتفضيلات الخاصة بكل مستخدم',
+          paragraphs: [
+            'الأسماء: rentaldrivego-language--[id], rentaldrivego-theme--[id]',
+            'عند تسجيل دخولك، تُحفظ تفضيلات اللغة والمظهر الخاصة بك أيضاً في ملف مرتبط بمعرّف حسابك. يتيح ذلك لأكثر من موظف يتشاركون جهازاً واحداً الاحتفاظ بتفضيلات مستقلة. يُحتفظ بهذه الملفات لمدة سنة.',
+          ],
+        },
+        {
+          heading: '5. ملفات تعريف الارتباط الموروثة',
+          paragraphs: [
+            'الأسماء: dashboard-language, marketplace-language',
+            'توجد هذه الملفات لضمان التوافق مع الإصدارات السابقة من المنصة، وتخزّن تفضيل اللغة ذاته الموجود في الملف الرئيسي. لا تُقرأ إلا كخيار احتياطي، وستُزال في تحديث مستقبلي.',
+          ],
+        },
+        {
+          heading: '6. إدارة ملفات تعريف الارتباط',
+          paragraphs: [
+            'يمكنك إدارة ملفات تعريف الارتباط أو حذفها في أي وقت من خلال إعدادات متصفحك. سيمنعك حظر ملف المصادقة من تسجيل الدخول. أما حظر ملفات التفضيلات فسيؤدي إلى إعادة ضبط إعدادات اللغة والمظهر في كل زيارة. للاطلاع على معلومات عامة حول ملفات تعريف الارتباط، يمكنك زيارة http://www.allaboutcookies.org/.',
+          ],
+        },
+      ],
+    },
+    newsletter: {
+      title: 'النشرة الإخبارية',
+      paragraphs: [
+        'ابقَ على اطلاع بآخر تحديثات المنصة وأخبار القطاع ونصائح إدارة الأساطيل من RentalDriveGo.',
+        'اشترك في نشرتنا الإخبارية للحصول على محتوى مفيد يساعدك على تطوير أعمالك بكفاءة أكبر.',
+      ],
+    },
+    'contact-sales': {
+      title: 'تواصل مع المبيعات',
+      paragraphs: [
+        'هل ترغب في معرفة كيف يمكن لـ RentalDriveGo تطوير عمليات شركتك؟',
+        'فريق المبيعات لدينا جاهز لتقديم عرض توضيحي والإجابة على استفساراتك ومساعدتك في اختيار الحل المناسب لاحتياجاتك.',
+      ],
+    },
+    'general-conditions': {
+      title: 'الشروط العامة لاستخدام الموقع',
+      paragraphs: [
+        'أنت الآن تطّلع على الشروط العامة لاستخدام موقع RentalDriveGo. للاطلاع على الشروط العامة لاستخدام التطبيق، يرجى زيارة: https://www.rentaldrivego.ma/app-tc-ar',
+        'تحدد هذه الشروط العامة القواعد المطبقة عند زيارتك أو دخولك أو تصفحك أو تواصلك أو تفاعلك بأي شكل آخر مع الموقع www.rentaldrivego.ma.',
+      ],
+      sections: [
+        {
+          heading: '1. الغرض',
+          paragraphs: [
+            'تنظم هذه الشروط استخدام الموقع www.rentaldrivego.ma الذي تديره شركة RentalDriveGo، وهي شركة ذات مسؤولية محدودة مسجلة في السجل التجاري بأزرو تحت رقم 00000، ويقع مقرها الاجتماعي في أزرو.',
+            'كما تحدد هذه الشروط القواعد المتعلقة بمحتوى الموقع، وتطبق على كل شخص يزور الموقع أو يتواصل معنا أو مع مستخدمين آخرين من خلاله أو يضع رابطاً إليه أو يتفاعل معه بأي طريقة كانت.',
+          ],
+        },
+        {
+          heading: '2. ما يتيحه الموقع',
+          paragraphs: [
+            'نقوم بتشغيل الموقع حصرياً لأغراض الإعلام والاستكشاف ودراسة السوق.',
+            'قد يتم عرض معلومات تتعلق ببرنامج الولاء الخاص بـ RentalDriveGo للزوار، كما قد تُتاح لهم روابط للتنزيل عبر الموقع.',
+          ],
+        },
+        {
+          heading: '3. الاتصال',
+          paragraphs: [
+            'يمكنك التواصل معنا عبر الموقع أو عبر البريد الإلكتروني على العنوان service-client@rentaldrivego.ma.',
+          ],
+        },
+        {
+          heading: '4. قبول الشروط العامة للاستخدام',
+          paragraphs: [
+            'باستخدامك للموقع، فإنك توافق على هذه الشروط العامة للاستخدام وتتعهد بالالتزام بها. وإذا كنت لا تقبلها، فيجب عليك عدم استخدام الموقع.',
+            'كما تنطبق سياسة الخصوصية وسياسة ملفات تعريف الارتباط الخاصة بنا على استخدامك للموقع.',
+          ],
+        },
+        {
+          heading: '5. تعديل الشروط العامة للاستخدام',
+          paragraphs: [
+            'يجوز لنا تعديل هذه الشروط العامة للاستخدام في أي وقت. ولذلك ننصحك بالاطلاع على النسخة السارية كلما رغبت في استخدام الموقع.',
+            'كما نحتفظ بالحق في تعديل أو تصحيح أو تحديث أي معلومات منشورة على الموقع في أي وقت.',
+          ],
+        },
+        {
+          heading: '6. تعديل محتوى الموقع وتوفّره',
+          paragraphs: [
+            'يجوز لنا تحديث أو تعديل محتوى الموقع في أي وقت بما يعكس تطور احتياجات المستخدمين والشركاء.',
+            'يتم توفير الموقع مجاناً. وعلى الرغم من أننا نبذل وسائل معقولة لمنع الانقطاعات وحلها، فإننا لا نضمن التوفر المستمر أو غير المنقطع للموقع.',
+            'يجوز لنا تعليق أو سحب أو تقييد إتاحة كل الموقع أو جزء منه لأسباب تجارية أو تشغيلية.',
+            'أنت مسؤول عن التأكد من أن جميع الأشخاص الذين يدخلون إلى الموقع عبر اتصالك بالإنترنت على علم بهذه الشروط ويلتزمون بها.',
+          ],
+        },
+        {
+          heading: '7. نطاق المعلومات الواردة في الموقع',
+          paragraphs: [
+            'يتم تقديم محتوى الموقع لأغراض إعلامية عامة فقط، ولا يشكل خدمة توصية أو مشورة يمكن الاعتماد عليها.',
+            'ورغم أننا نبذل جهوداً معقولة لتحديث المعلومات المنشورة على الموقع، فإننا لا نضمن، صراحةً أو ضمناً، أن يكون المحتوى دقيقاً أو كاملاً أو محدثاً.',
+          ],
+        },
+        {
+          heading: '8. المسؤولية تجاه المواقع التابعة للغير',
+          paragraphs: [
+            'لا نتحمل المسؤولية عن المواقع الإلكترونية التابعة للغير التي قد يتضمن الموقع روابط إليها.',
+            'أي روابط نحو محتوى أو مواقع أو موارد تابعة للغير يتم توفيرها لأغراض إعلامية فقط، ولا يمكن تحميلنا المسؤولية عن محتواها أو دقتها أو جودتها.',
+          ],
+        },
+        {
+          heading: '9. تحديد المسؤولية',
+          paragraphs: [
+            'أنت توافق على أن الدخول إلى الموقع واستخدامه، وكذلك الصفحات المرتبطة به، يكون على مسؤوليتك الخاصة.',
+            'لا تستبعد هذه الشروط ولا تحد من مسؤوليتنا في الحالات التي يكون فيها هذا الاستبعاد أو التحديد غير قانوني.',
+            'ولا نحن ولا شركاؤنا أو الجهات المرتبطة بنا نتحمل أي مسؤولية عن الأضرار الناتجة عن استخدام المعلومات أو الملفات أو الروابط أو المواقع التي يمكن الوصول إليها من خلال الموقع أو استلامها عبره.',
+          ],
+        },
+        {
+          heading: '10. مسؤولياتك',
+          paragraphs: [
+            'أنت تقر بأننا قد نستخدم المعلومات التي تقدمها لنا عندما تكون قد منحت الموافقة المطلوبة أو عندما يوجد أساس قانوني آخر لذلك.',
+            'وتتعهد باستخدام الموقع فقط لأغراض مشروعة.',
+            'وإذا رأينا أن هناك خرقاً لهذه الشروط العامة للاستخدام، فيجوز لنا اتخاذ أي إجراء نراه مناسباً.',
+          ],
+        },
+        {
+          heading: '11. الملكية الفكرية',
+          paragraphs: [
+            'الموقع ملك لنا، والموقع بكامله محمي بموجب القوانين المتعلقة بالملكية الفكرية.',
+            'وجميع حقوق النسخ والتمثيل محفوظة.',
+          ],
+        },
+      ],
+    },
+  },
+}
+
+export function isFooterPageSlug(value: string): value is FooterPageSlug {
+  return footerPageSlugs.includes(value as FooterPageSlug)
+}
+
+export function getFooterPageContent(language: MarketplaceLanguage, slug: FooterPageSlug): FooterPageContent {
+  return footerContent[language][slug]
+}

apps/homepage/src/lib/i18n.server.test.ts

@@ -0,0 +1,41 @@
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+
+const cookieValues = vi.hoisted(() => new Map<string, string>())
+
+vi.mock('next/headers', () => ({
+  cookies: async () => ({
+    get: (name: string) => {
+      const value = cookieValues.get(name)
+      return value === undefined ? undefined : { value }
+    },
+  }),
+}))
+
+import { getMarketplaceLanguage } from './i18n.server'
+import { MARKETPLACE_LANGUAGE_COOKIE, SHARED_LANGUAGE_COOKIE } from './i18n'
+
+describe('getMarketplaceLanguage', () => {
+  beforeEach(() => {
+    cookieValues.clear()
+  })
+
+  it('prefers the shared language cookie over the legacy marketplace cookie', async () => {
+    cookieValues.set(SHARED_LANGUAGE_COOKIE, 'ar')
+    cookieValues.set(MARKETPLACE_LANGUAGE_COOKIE, 'fr')
+
+    await expect(getMarketplaceLanguage()).resolves.toBe('ar')
+  })
+
+  it('falls back to the legacy marketplace cookie during migration', async () => {
+    cookieValues.set(MARKETPLACE_LANGUAGE_COOKIE, 'fr')
+
+    await expect(getMarketplaceLanguage()).resolves.toBe('fr')
+  })
+
+  it('defaults to English when cookies are absent or invalid', async () => {
+    await expect(getMarketplaceLanguage()).resolves.toBe('en')
+    cookieValues.set(SHARED_LANGUAGE_COOKIE, 'es')
+
+    await expect(getMarketplaceLanguage()).resolves.toBe('en')
+  })
+})

apps/homepage/src/lib/i18n.server.ts

@@ -0,0 +1,10 @@
+import { cookies } from 'next/headers'
+import { MARKETPLACE_LANGUAGE_COOKIE, SHARED_LANGUAGE_COOKIE, isMarketplaceLanguage, type MarketplaceLanguage } from './i18n'
+
+export async function getMarketplaceLanguage(): Promise<MarketplaceLanguage> {
+  const cookieStore = await cookies()
+  const cookieValue =
+    cookieStore.get(SHARED_LANGUAGE_COOKIE)?.value ??
+    cookieStore.get(MARKETPLACE_LANGUAGE_COOKIE)?.value
+  return isMarketplaceLanguage(cookieValue) ? cookieValue : 'en'
+}

apps/homepage/src/lib/i18n.test.ts

@@ -0,0 +1,18 @@
+import { describe, expect, it } from 'vitest'
+import { isMarketplaceLanguage } from './i18n'
+
+describe('marketplace language guard', () => {
+  it('accepts the supported marketplace locales', () => {
+    expect(isMarketplaceLanguage('en')).toBe(true)
+    expect(isMarketplaceLanguage('fr')).toBe(true)
+    expect(isMarketplaceLanguage('ar')).toBe(true)
+  })
+
+  it('rejects unsupported, missing, and case-mismatched locales', () => {
+    expect(isMarketplaceLanguage('de')).toBe(false)
+    expect(isMarketplaceLanguage('EN')).toBe(false)
+    expect(isMarketplaceLanguage('')).toBe(false)
+    expect(isMarketplaceLanguage(null)).toBe(false)
+    expect(isMarketplaceLanguage(undefined)).toBe(false)
+  })
+})

apps/homepage/src/lib/i18n.ts

@@ -0,0 +1,8 @@
+export type MarketplaceLanguage = 'en' | 'fr' | 'ar'
+
+export const MARKETPLACE_LANGUAGE_COOKIE = 'marketplace-language'
+export const SHARED_LANGUAGE_COOKIE = 'rentaldrivego-language'
+
+export function isMarketplaceLanguage(value: string | null | undefined): value is MarketplaceLanguage {
+  return value === 'en' || value === 'fr' || value === 'ar'
+}

apps/homepage/src/lib/preferences.test.ts

@@ -0,0 +1,69 @@
+import { afterEach, describe, expect, it } from 'vitest'
+import { getScopedPreferenceCookieName, getScopedPreferenceKey, readScopedPreference, writeScopedPreference } from './preferences'
+
+function installBrowser(cookie = '') {
+  const store = new Map<string, string>()
+  let cookieValue = cookie
+  Object.defineProperty(globalThis, 'window', {
+    configurable: true,
+    value: {
+      localStorage: {
+        getItem: (key: string) => store.get(key) ?? null,
+        setItem: (key: string, value: string) => store.set(key, value),
+      },
+    },
+  })
+  Object.defineProperty(globalThis, 'document', {
+    configurable: true,
+    value: {
+      get cookie() { return cookieValue },
+      set cookie(value: string) {
+        const [pair] = value.split(';')
+        const [name, val] = pair.split('=')
+        cookieValue = cookieValue
+          .split(';')
+          .map((chunk) => chunk.trim())
+          .filter(Boolean)
+          .filter((chunk) => !chunk.startsWith(`${name}=`))
+          .concat(`${name}=${val}`)
+          .join('; ')
+      },
+    },
+  })
+  Object.defineProperty(globalThis, 'atob', {
+    configurable: true,
+    value: (value: string) => Buffer.from(value, 'base64').toString('binary'),
+  })
+  return { store, get cookie() { return cookieValue } }
+}
+
+afterEach(() => {
+  Reflect.deleteProperty(globalThis, 'window')
+  Reflect.deleteProperty(globalThis, 'document')
+  Reflect.deleteProperty(globalThis, 'atob')
+})
+
+describe('marketplace scoped preferences', () => {
+  it('returns unscoped keys when no usable token exists', () => {
+    installBrowser()
+    expect(getScopedPreferenceKey('rentaldrivego-language')).toBe('rentaldrivego-language')
+    expect(getScopedPreferenceCookieName('rentaldrivego-language')).toBe('rentaldrivego-language')
+  })
+
+  it('reads shared cookies before legacy local-storage fallbacks', () => {
+    const browser = installBrowser('rentaldrivego-language=fr')
+    browser.store.set('marketplace-language', 'ar')
+
+    expect(readScopedPreference('rentaldrivego-language', ['marketplace-language'])).toBe('fr')
+  })
+
+  it('writes shared and legacy values without auth-token scoping', () => {
+    const browser = installBrowser()
+
+    writeScopedPreference('rentaldrivego-theme', 'dark', ['dashboard-theme'])
+
+    expect(browser.store.get('rentaldrivego-theme')).toBe('dark')
+    expect(browser.store.get('dashboard-theme')).toBe('dark')
+    expect(browser.cookie).toContain('rentaldrivego-theme=dark')
+  })
+})

apps/homepage/src/lib/preferences.ts

@@ -0,0 +1,94 @@
+export const SHARED_LANGUAGE_COOKIE = 'rentaldrivego-language'
+export const SHARED_LANGUAGE_KEY = 'rentaldrivego-language'
+export const SHARED_THEME_KEY = 'rentaldrivego-theme'
+
+function readEmployeeToken() {
+  return null
+}
+
+function decodeEmployeeId(token: string | null) {
+  if (!token) return null
+
+  try {
+    const encoded = token.split('.')[1] ?? ''
+    const normalized = encoded.replace(/-/g, '+').replace(/_/g, '/')
+    const padded = normalized.padEnd(Math.ceil(normalized.length / 4) * 4, '=')
+    const payload = JSON.parse(atob(padded)) as { sub?: string }
+    return typeof payload.sub === 'string' && payload.sub ? payload.sub : null
+  } catch {
+    return null
+  }
+}
+
+export function getScopedPreferenceKey(baseKey: string) {
+  const employeeId = decodeEmployeeId(readEmployeeToken())
+  return employeeId ? `${baseKey}:${employeeId}` : baseKey
+}
+
+export function getScopedPreferenceCookieName(baseKey: string) {
+  const employeeId = decodeEmployeeId(readEmployeeToken())
+  return employeeId ? `${baseKey}--${employeeId}` : baseKey
+}
+
+function readCookie(name: string) {
+  if (typeof document === 'undefined') return null
+
+  return document.cookie
+    .split(';')
+    .map((chunk) => chunk.trim())
+    .find((chunk) => chunk.startsWith(`${name}=`))
+    ?.slice(name.length + 1) ?? null
+}
+
+function writeCookie(name: string, value: string) {
+  if (typeof document === 'undefined') return
+  document.cookie = `${name}=${value}; path=/; max-age=31536000; samesite=lax`
+}
+
+export function readCurrentUserScopedPreference(baseKey: string) {
+  if (typeof window === 'undefined') return null
+
+  const scopedCookie = readCookie(getScopedPreferenceCookieName(baseKey))
+  if (scopedCookie) return scopedCookie
+
+  return window.localStorage.getItem(getScopedPreferenceKey(baseKey))
+}
+
+export function readScopedPreference(baseKey: string, legacyKeys: string[] = []) {
+  if (typeof window === 'undefined') return null
+
+  const scopedCookie = readCookie(getScopedPreferenceCookieName(baseKey))
+  if (scopedCookie) return scopedCookie
+
+  const sharedCookie = readCookie(baseKey)
+  if (sharedCookie) return sharedCookie
+
+  const scopedKey = getScopedPreferenceKey(baseKey)
+  const candidates = [scopedKey, baseKey, ...legacyKeys]
+
+  for (const key of candidates) {
+    const value = window.localStorage.getItem(key)
+    if (value) return value
+  }
+
+  return null
+}
+
+export function writeScopedPreference(baseKey: string, value: string, legacyKeys: string[] = []) {
+  if (typeof window === 'undefined') return
+
+  const scopedKey = getScopedPreferenceKey(baseKey)
+  const scopedCookie = getScopedPreferenceCookieName(baseKey)
+
+  writeCookie(baseKey, value)
+  if (scopedCookie !== baseKey) {
+    writeCookie(scopedCookie, value)
+  }
+
+  window.localStorage.setItem(scopedKey, value)
+  window.localStorage.setItem(baseKey, value)
+
+  for (const key of legacyKeys) {
+    window.localStorage.setItem(key, value)
+  }
+}

apps/homepage/src/middleware.test.ts

@@ -0,0 +1,146 @@
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+
+const nextServer = vi.hoisted(() => {
+  const next = vi.fn((init?: { request?: { headers?: Headers } }) => ({
+    kind: 'next',
+    init,
+    cookies: {
+      set: vi.fn(),
+    },
+  }))
+  const redirect = vi.fn((url: URL, status?: number) => ({
+    kind: 'redirect',
+    url: url.toString(),
+    status,
+  }))
+  const MockNextResponse = vi.fn((body?: string, init?: { status?: number }) => ({
+    kind: 'response',
+    body,
+    status: init?.status,
+  })) as any
+  MockNextResponse.next = next
+  MockNextResponse.redirect = redirect
+  return { next, redirect, MockNextResponse }
+})
+
+vi.mock('next/server', () => ({
+  NextResponse: nextServer.MockNextResponse,
+}))
+
+function request(options: { cookies?: Record<string, string>; headers?: Record<string, string> } = {}) {
+  const cookies = new Map(Object.entries(options.cookies ?? {}))
+  const headers = new Headers(options.headers ?? {})
+  return {
+    nextUrl: cloneableUrl('http://localhost:3000/'),
+    cookies: {
+      get: vi.fn((name: string) => {
+        const value = cookies.get(name)
+        return value ? { value } : undefined
+      }),
+    },
+    headers,
+  }
+}
+
+function cloneableUrl(input: string): URL {
+  const url = new URL(input)
+  ;(url as URL & { clone: () => URL }).clone = () => cloneableUrl(url.toString())
+  return url
+}
+
+function middlewareRequest(input: string) {
+  return {
+    cookies: {
+      get: vi.fn(),
+    },
+    headers: new Headers(),
+    nextUrl: cloneableUrl(input),
+  }
+}
+
+beforeEach(() => {
+  nextServer.next.mockClear()
+  nextServer.redirect.mockClear()
+})
+
+describe('marketplace proxy language bootstrap', () => {
+
+  it('rejects proxy subrequest headers before language handling', async () => {
+    const { proxy } = await import('./proxy')
+
+    const response = proxy(request({
+      headers: { 'x-middleware-subrequest': 'middleware:middleware' },
+    }) as never) as any
+
+    expect(response).toEqual({ kind: 'response', body: 'Unsupported internal request header', status: 400 })
+    expect(nextServer.next).not.toHaveBeenCalled()
+  })
+  it('does nothing when the canonical shared language cookie is valid', async () => {
+    const { proxy } = await import('./proxy')
+
+    const response = proxy(request({ cookies: { 'rentaldrivego-language': 'fr' } }) as never) as any
+
+    expect(response.kind).toBe('next')
+    expect(nextServer.next).toHaveBeenCalledWith()
+    expect(response.cookies.set).not.toHaveBeenCalled()
+  })
+
+  it('migrates the legacy marketplace language cookie into the shared cookie and request headers', async () => {
+    const { proxy } = await import('./proxy')
+
+    const response = proxy(request({
+      cookies: { 'marketplace-language': 'ar' },
+      headers: { cookie: 'session=abc' },
+    }) as never) as any
+
+    expect(response.cookies.set).toHaveBeenCalledWith('rentaldrivego-language', 'ar', expect.objectContaining({
+      path: '/',
+      sameSite: 'lax',
+    }))
+    expect(response.init?.request?.headers?.get('cookie')).toBe('session=abc; rentaldrivego-language=ar')
+  })
+
+  it('detects Arabic and French from Accept-Language before falling back to English', async () => {
+    const { proxy } = await import('./proxy')
+
+    const arabic = proxy(request({ headers: { 'accept-language': 'ar-MA,fr;q=0.8,en;q=0.6' } }) as never) as any
+    expect(arabic.cookies.set).toHaveBeenCalledWith('rentaldrivego-language', 'ar', expect.any(Object))
+    expect(arabic.init?.request?.headers?.get('cookie')).toBe('rentaldrivego-language=ar')
+
+    const french = proxy(request({ headers: { 'accept-language': 'de-DE,fr-FR;q=0.7,en;q=0.3' } }) as never) as any
+    expect(french.cookies.set).toHaveBeenCalledWith('rentaldrivego-language', 'fr', expect.any(Object))
+
+    const fallback = proxy(request({ headers: { 'accept-language': 'de-DE,es;q=0.9' } }) as never) as any
+    expect(fallback.cookies.set).toHaveBeenCalledWith('rentaldrivego-language', 'en', expect.any(Object))
+  })
+
+  it('rejects invalid shared and legacy language values before resolving from headers', async () => {
+    const { proxy } = await import('./proxy')
+
+    const response = proxy(request({
+      cookies: { 'rentaldrivego-language': 'es', 'marketplace-language': 'it' },
+      headers: { 'accept-language': 'fr-CA,ar;q=0.5' },
+    }) as never) as any
+
+    expect(response.cookies.set).toHaveBeenCalledWith('rentaldrivego-language', 'fr', expect.any(Object))
+    expect(response.init?.request?.headers?.get('cookie')).toBe('rentaldrivego-language=fr')
+  })
+})
+
+describe('marketplace middleware dashboard path canonicalization', () => {
+  it('redirects duplicate dashboard prefixes to the clean dashboard URL', async () => {
+    const { proxy } = await import('./proxy')
+
+    const response = proxy(middlewareRequest('http://localhost:3000/dashboard/dashboard') as never)
+
+    expect(response).toEqual({ kind: 'redirect', url: 'http://localhost:3000/dashboard', status: 307 })
+  })
+
+  it('preserves nested dashboard paths while removing the duplicate prefix', async () => {
+    const { proxy } = await import('./proxy')
+
+    const response = proxy(middlewareRequest('http://localhost:3000/dashboard/dashboard/fleet?tab=active') as never)
+
+    expect(response).toEqual({ kind: 'redirect', url: 'http://localhost:3000/dashboard/fleet?tab=active', status: 307 })
+  })
+})

apps/homepage/src/proxy.ts

@@ -0,0 +1,77 @@
+import { NextResponse } from 'next/server'
+import type { NextRequest } from 'next/server'
+
+const SHARED_LANGUAGE_COOKIE = 'rentaldrivego-language'
+const MARKETPLACE_LANGUAGE_COOKIE = 'marketplace-language'
+const DASHBOARD_BASE_PATH = '/dashboard'
+
+function rejectInternalSubrequest(request: NextRequest): NextResponse | null {
+  if (!request.headers.has('x-middleware-subrequest')) return null
+  return new NextResponse('Unsupported internal request header', { status: 400 })
+}
+
+function isValidLanguage(val: string | null | undefined): val is 'en' | 'fr' | 'ar' {
+  return val === 'en' || val === 'fr' || val === 'ar'
+}
+
+function detectFromAcceptLanguage(header: string | null): 'en' | 'fr' | 'ar' {
+  if (!header) return 'en'
+  for (const entry of header.split(',')) {
+    const code = entry.split(';')[0].trim().split('-')[0].toLowerCase()
+    if (code === 'ar' || code === 'fr' || code === 'en') return code as 'en' | 'fr' | 'ar'
+  }
+  return 'en'
+}
+
+function deduplicateDashboardPath(pathname: string): string | null {
+  if (!pathname.startsWith(`${DASHBOARD_BASE_PATH}${DASHBOARD_BASE_PATH}`)) return null
+
+  let normalized = pathname
+  while (normalized.startsWith(`${DASHBOARD_BASE_PATH}${DASHBOARD_BASE_PATH}`)) {
+    normalized = normalized.slice(DASHBOARD_BASE_PATH.length)
+  }
+  return normalized || DASHBOARD_BASE_PATH
+}
+
+export function proxy(request: NextRequest) {
+  const rejected = rejectInternalSubrequest(request)
+  if (rejected) return rejected
+
+  const deduped = deduplicateDashboardPath(request.nextUrl.pathname)
+  if (deduped) {
+    const url = request.nextUrl.clone()
+    url.pathname = deduped
+    return NextResponse.redirect(url, 307)
+  }
+
+  const sharedLang = request.cookies.get(SHARED_LANGUAGE_COOKIE)?.value
+
+  if (isValidLanguage(sharedLang)) return NextResponse.next()
+
+  const legacyLang = request.cookies.get(MARKETPLACE_LANGUAGE_COOKIE)?.value
+  const resolved: 'en' | 'fr' | 'ar' = isValidLanguage(legacyLang)
+    ? legacyLang
+    : detectFromAcceptLanguage(request.headers.get('accept-language'))
+
+  const requestHeaders = new Headers(request.headers)
+  const existing = request.headers.get('cookie') ?? ''
+  const injected = `${SHARED_LANGUAGE_COOKIE}=${resolved}`
+  requestHeaders.set('cookie', existing ? `${existing}; ${injected}` : injected)
+
+  const response = NextResponse.next({ request: { headers: requestHeaders } })
+
+  response.cookies.set(SHARED_LANGUAGE_COOKIE, resolved, {
+    maxAge: 365 * 24 * 60 * 60,
+    path: '/',
+    sameSite: 'lax',
+  })
+
+  return response
+}
+
+export const config = {
+  matcher: [
+    '/dashboard/dashboard/:path*',
+    '/((?!_next/static|_next/image|_next/webpack-hmr|favicon\\.ico|.*\\.(?:png|ico|jpg|jpeg|svg|webp)$).*)',
+  ],
+}

apps/homepage/tailwind.config.ts

@@ -0,0 +1,16 @@
+import type { Config } from 'tailwindcss'
+
+const config: Config = {
+  content: ['./src/**/*.{ts,tsx}'],
+  darkMode: 'class',
+  theme: {
+    extend: {
+      fontFamily: {
+        sans: ['Inter', 'ui-sans-serif', 'system-ui'],
+      },
+    },
+  },
+  plugins: [],
+}
+
+export default config

apps/homepage/tsconfig.json

@@ -0,0 +1,41 @@
+{
+  "compilerOptions": {
+    "target": "ES2017",
+    "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": {
+      "@/*": [
+        "./src/*"
+      ]
+    }
+  },
+  "include": [
+    "next-env.d.ts",
+    "**/*.ts",
+    "**/*.tsx",
+    ".next/types/**/*.ts",
+    ".next/dev/types/**/*.ts"
+  ],
+  "exclude": [
+    "node_modules"
+  ]
+}

apps/homepage/vitest.config.ts

@@ -0,0 +1,17 @@
+import { fileURLToPath } from 'node:url'
+import { defineConfig } from 'vitest/config'
+
+export default defineConfig({
+  resolve: {
+    alias: {
+      '@': fileURLToPath(new URL('./src', import.meta.url)),
+    },
+  },
+  test: {
+    environment: 'node',
+    globals: true,
+    include: ['src/**/*.test.ts'],
+    clearMocks: true,
+    restoreMocks: true,
+  },
+})