add images and redesign hompeage into sections, fix the dark color

.npmrc

@@ -0,0 +1,4 @@
+fetch-timeout=120000
+fetch-retries=5
+fetch-retry-mintimeout=10000
+fetch-retry-maxtimeout=60000

Dockerfile.dev

@@ -5,6 +5,7 @@ WORKDIR /app
 RUN npm install -g npm@10.5.0 --no-fund --no-audit
 RUN corepack enable
 
+COPY .npmrc ./
 COPY package.json package-lock.json turbo.json tsconfig.base.json ./
 COPY apps ./apps
 COPY packages ./packages

apps/admin/src/app/globals.css

@@ -13,7 +13,7 @@ html.dark {
 body {
   @apply text-blue-950 antialiased transition-colors dark:text-slate-100;
   background-image:
-    linear-gradient(180deg, #ffffff 0%, #f5f8ff 28%, #eef4ff 58%, #ffffff 100%);
+    linear-gradient(180deg, #ffffff 0%, #fafafa 28%, #f5f5f5 58%, #ffffff 100%);
 }
 
 .shell {
@@ -28,12 +28,12 @@ body {
 
 html.dark body {
   background-image:
-    linear-gradient(180deg, #0a1128 0%, #0d1b38 35%, #07101e 100%);
+    linear-gradient(180deg, #172554 0%, #1b3068 35%, #0f1a40 100%);
 }
 
 html.dark .panel {
-  border-color: rgb(30 60 140 / 0.40);
+  border-color: rgb(30 64 175 / 0.40);
-  background-color: rgb(11 25 55 / 0.72);
+  background-color: rgb(23 37 84 / 0.72);
 }
 
 @layer utilities {
@@ -43,25 +43,25 @@ html.dark .panel {
 
   /* ── Dark mode: zinc classes → deep navy blue ─────────────── */
   .bg-zinc-950 {
-    background-color: rgb(6 13 30);
+    background-color: #172554;
   }
 
   .bg-zinc-950\/90 {
-    background-color: rgb(6 13 30 / 0.9);
+    background-color: rgb(23 37 84 / 0.9);
   }
 
   .bg-zinc-900 {
-    background-color: rgb(11 25 55);
+    background-color: rgb(23 37 84 / 0.78);
   }
 
   .bg-zinc-800,
   .bg-zinc-800\/50 {
-    background-color: rgb(20 42 90);
+    background-color: rgb(30 58 138 / 0.5);
   }
 
   .border-zinc-800,
   .border-zinc-700 {
-    border-color: rgb(30 60 130);
+    border-color: rgb(30 64 175);
   }
 
   .text-zinc-100,
@@ -70,17 +70,17 @@ html.dark .panel {
   }
 
   .text-zinc-500 {
-    color: rgb(148 163 184);
+    color: rgb(168 162 158);
   }
 
   .text-zinc-400,
   .text-zinc-300 {
-    color: rgb(100 116 139);
+    color: rgb(120 113 108);
   }
 
   .hover\:bg-zinc-800:hover,
   .hover\:bg-zinc-800\/50:hover {
-    background-color: rgb(30 55 115);
+    background-color: rgb(30 64 175 / 0.4);
   }
 
   .hover\:text-zinc-200:hover {

apps/dashboard/src/app/forgot-password/ForgotPasswordPageClient.tsx

@@ -8,7 +8,7 @@ import PublicShell from "@/components/layout/PublicShell";
 import { API_BASE } from "@/lib/api";
 import { marketplaceUrl } from "@/lib/urls";
 
-const DASHBOARD_LOGO_SRC = "/dashboard/rentalcardrive.png";
+const DASHBOARD_LOGO_SRC = "/dashboard/rentaldrivego.png";
 
 export default function ForgotPasswordPageClient({
   embedded = false,
@@ -104,6 +104,7 @@ export default function ForgotPasswordPageClient({
                   width={104}
                   height={104}
                   priority
+                  unoptimized
                   className="h-24 w-24 rounded-[1.75rem] border border-stone-200 bg-white p-1.5 shadow-sm transition-colors dark:border-blue-800 dark:bg-blue-950"
                 />
               </a>

apps/dashboard/src/app/globals.css

@@ -14,7 +14,7 @@ html.dark {
   --primary: #2563eb;
   --primary-hover: #1d4ed8;
   --accent: #f97316;
-  --sidebar-bg: #0a1128;
+  --sidebar-bg: #172554;
   --sidebar-text: #94a3b8;
   --sidebar-active: #ffffff;
 
@@ -26,9 +26,9 @@ html.dark {
 }
 
 html.dark {
-  --bg-elevated: rgb(11 25 55 / 0.78);
+  --bg-elevated: rgb(23 37 84 / 0.82);
-  --border-accent: rgb(30 60 140 / 0.40);
+  --border-accent: rgb(30 64 175 / 0.40);
-  --glass-bg: rgb(11 25 55 / 0.65);
+  --glass-bg: rgb(23 37 84 / 0.72);
   --shadow-card: 0 30px 80px rgba(0, 0, 0, 0.36);
   --shadow-glow: 0 0 20px rgba(249, 115, 22, 0.25);
 }
@@ -41,7 +41,7 @@ html.dark {
   body {
     @apply text-blue-950 antialiased transition-colors dark:text-slate-100;
     background-image:
-      linear-gradient(180deg, #ffffff 0%, #f5f8ff 28%, #eef4ff 58%, #ffffff 100%);
+      linear-gradient(180deg, #ffffff 0%, #fafafa 28%, #f5f5f5 58%, #ffffff 100%);
   }
 
   h1, h2, h3, h4, h5, h6 {
@@ -51,12 +51,12 @@ html.dark {
 
 html.dark body {
   background-image:
-    linear-gradient(180deg, #0a1128 0%, #0d1b38 35%, #07101e 100%);
+    linear-gradient(180deg, #172554 0%, #1b3068 35%, #0f1a40 100%);
 }
 
 @layer components {
   .fleet-dashboard-shell {
-    --fleet-bg-primary: #f5f8ff;
+    --fleet-bg-primary: #ffffff;
     --fleet-bg-elevated: #ffffff;
     --fleet-glass-bg: rgb(255 255 255 / 0.82);
     --fleet-card-bg: rgb(255 255 255 / 0.72);
@@ -73,32 +73,32 @@ html.dark body {
     background:
       radial-gradient(ellipse at 20% 20%, rgb(37 99 235 / 0.10) 0%, transparent 56%),
       radial-gradient(ellipse at 82% 72%, rgb(249 115 22 / 0.08) 0%, transparent 54%),
-      linear-gradient(180deg, #ffffff 0%, #f5f8ff 35%, #edf4ff 100%);
+      linear-gradient(180deg, #ffffff 0%, #fafafa 35%, #f5f5f5 100%);
     color: var(--fleet-text-primary);
   }
 
   html.dark .fleet-dashboard-shell {
-    --fleet-bg-primary: #0a0f1a;
+    --fleet-bg-primary: #172554;
-    --fleet-bg-elevated: #111827;
+    --fleet-bg-elevated: #1e3a8a;
-    --fleet-glass-bg: rgb(15 25 45 / 0.66);
+    --fleet-glass-bg: rgb(23 37 84 / 0.78);
-    --fleet-card-bg: rgb(30 58 95 / 0.28);
+    --fleet-card-bg: rgb(23 37 84 / 0.72);
-    --fleet-border-subtle: rgb(59 130 246 / 0.14);
+    --fleet-border-subtle: rgb(30 64 175 / 0.22);
     --fleet-text-primary: #e8edf5;
     --fleet-text-secondary: #8899b4;
-    --fleet-accent-blue: #3b82f6;
+    --fleet-accent-blue: #2e50f1;
-    --fleet-accent-blue-light: #60a5fa;
+    --fleet-accent-blue-light: #1e3de0;
     --fleet-accent-orange-light: #fb923c;
     --fleet-success: #10b981;
     --fleet-danger: #ef4444;
     background:
-      radial-gradient(ellipse at 20% 20%, rgb(59 130 246 / 0.09) 0%, transparent 58%),
+      radial-gradient(ellipse at 20% 20%, rgb(30 64 175 / 0.09) 0%, transparent 58%),
       radial-gradient(ellipse at 82% 72%, rgb(249 115 22 / 0.08) 0%, transparent 56%),
-      linear-gradient(180deg, #0a0f1a 0%, #0d1728 46%, #08111f 100%);
+      linear-gradient(180deg, #172554 0%, #1b3068 46%, #0f1a40 100%);
   }
 
   .fleet-dashboard-shell * {
     scrollbar-width: thin;
-    scrollbar-color: rgb(59 130 246 / 0.22) transparent;
+    scrollbar-color: rgb(1 26 148 / 0.22) transparent;
   }
 
   .fleet-dashboard-shell *::-webkit-scrollbar {
@@ -112,7 +112,7 @@ html.dark body {
 
   .fleet-dashboard-shell *::-webkit-scrollbar-thumb {
     border-radius: 999px;
-    background: rgb(59 130 246 / 0.22);
+    background: rgb(1 26 148 / 0.22);
   }
 
   .fleet-dashboard-shell .card,
@@ -127,8 +127,8 @@ html.dark body {
 
   .fleet-dashboard-shell .card:hover,
   .fleet-dashboard-shell .glass-card:hover {
-    border-color: rgb(59 130 246 / 0.24);
+    border-color: rgb(1 26 148 / 0.24);
-    box-shadow: 0 18px 60px rgb(15 23 42 / 0.10), 0 0 20px rgb(59 130 246 / 0.10);
+    box-shadow: 0 18px 60px rgb(15 23 42 / 0.10), 0 0 20px rgb(1 26 148 / 0.10);
   }
 
   html.dark .fleet-dashboard-shell .card,
@@ -138,33 +138,45 @@ html.dark body {
 
   html.dark .fleet-dashboard-shell .card:hover,
   html.dark .fleet-dashboard-shell .glass-card:hover {
-    box-shadow: 0 18px 60px rgb(0 0 0 / 0.26), 0 0 20px rgb(59 130 246 / 0.12);
+    box-shadow: 0 18px 60px rgb(0 0 0 / 0.26), 0 0 20px rgb(1 26 148 / 0.12);
   }
 
   .fleet-dashboard-shell .btn-primary {
     position: relative;
     overflow: hidden;
-    box-shadow: 0 2px 10px rgb(59 130 246 / 0.30);
+    box-shadow: 0 2px 10px rgb(1 26 148 / 0.30);
     @apply rounded-lg bg-gradient-to-br from-blue-500 to-blue-700 text-white hover:from-blue-400 hover:to-blue-600;
   }
 
+  html.dark .fleet-dashboard-shell .btn-primary {
+    @apply from-[#2e50f1] to-[#090385] hover:from-[#1e3de0] hover:to-[#2e50f1];
+  }
+
   .fleet-dashboard-shell .btn-secondary {
-    border-color: rgb(59 130 246 / 0.18);
+    border-color: rgb(1 26 148 / 0.18);
-    background: rgb(59 130 246 / 0.08);
+    background: rgb(1 26 148 / 0.08);
     color: var(--fleet-text-primary);
     @apply rounded-lg hover:border-blue-400/40 hover:bg-blue-500/15 hover:text-white;
   }
 
+  html.dark .fleet-dashboard-shell .btn-secondary {
+    @apply hover:border-[#2e50f1]/40 hover:bg-[#2e50f1]/15;
+  }
+
   .fleet-dashboard-shell .input-field {
-    border-color: rgb(59 130 246 / 0.14);
+    border-color: rgb(1 26 148 / 0.14);
-    background: rgb(59 130 246 / 0.07);
+    background: rgb(1 26 148 / 0.07);
     color: var(--fleet-text-primary);
     @apply rounded-lg placeholder:text-slate-500 focus:border-blue-400 focus:ring-blue-500/20;
   }
 
+  html.dark .fleet-dashboard-shell .input-field {
+    @apply focus:border-[#2e50f1] focus:ring-[#2e50f1]/20;
+  }
+
   .fleet-dashboard-shell .progress-bar {
     height: 6px;
-    background: rgb(59 130 246 / 0.12);
+    background: rgb(1 26 148 / 0.12);
     @apply rounded-full;
   }
 
@@ -172,13 +184,17 @@ html.dark body {
     @apply bg-gradient-to-r from-blue-500 to-blue-400;
   }
 
+  html.dark .fleet-dashboard-shell .progress-fill.blue {
+    @apply from-[#2e50f1] to-[#1e3de0];
+  }
+
   .fleet-dashboard-shell .progress-fill.orange {
     @apply bg-gradient-to-r from-orange-500 to-orange-600;
   }
 
   .fleet-dashboard-shell .badge-blue {
-    border: 1px solid rgb(59 130 246 / 0.30);
+    border: 1px solid rgb(1 26 148 / 0.30);
-    background: rgb(59 130 246 / 0.15);
+    background: rgb(1 26 148 / 0.15);
     color: var(--fleet-accent-blue-light);
   }
 
@@ -228,8 +244,8 @@ html.dark body {
   }
 
   html.dark .glass-card {
-    border-color: rgb(30 60 140 / 0.40);
+    border-color: rgb(30 64 175 / 0.40);
-    background-color: rgb(11 25 55 / 0.65);
+    background-color: rgb(23 37 84 / 0.65);
     box-shadow: 0 30px 80px rgba(0, 0, 0, 0.36);
   }
 
@@ -239,7 +255,7 @@ html.dark body {
   }
 
   html.dark .progress-bar {
-    background-color: rgb(30 60 140 / 0.3);
+    background-color: rgb(30 64 175 / 0.3);
   }
 
   .progress-fill {
@@ -255,7 +271,7 @@ html.dark body {
   }
 
   html.dark .progress-fill.blue {
-    @apply bg-gradient-to-r from-blue-400 to-blue-300;
+    @apply bg-gradient-to-r from-[#2e50f1] to-[#1e3de0];
   }
 
   html.dark .progress-fill.orange {
@@ -303,8 +319,8 @@ html.dark body {
   }
 
   html.dark .card {
-    border-color: rgb(30 60 140 / 0.40);
+    border-color: rgb(30 64 175 / 0.40);
-    background-color: rgb(11 25 55 / 0.72);
+    background-color: rgb(23 37 84 / 0.72);
   }
 
   .badge-green {
@@ -312,7 +328,7 @@ html.dark body {
   }
 
   .badge-blue {
-    @apply inline-flex items-center rounded-full bg-blue-100 px-2.5 py-0.5 text-xs font-medium text-blue-700 dark:bg-blue-950/40 dark:text-blue-300;
+    @apply inline-flex items-center rounded-full bg-blue-100 px-2.5 py-0.5 text-xs font-medium text-blue-700 dark:bg-[#2e50f1]/40 dark:text-[#1e3de0];
   }
 
   .badge-amber {
@@ -324,7 +340,7 @@ html.dark body {
   }
 
   .badge-gray {
-    @apply inline-flex items-center rounded-full bg-stone-100 px-2.5 py-0.5 text-xs font-medium text-stone-600 dark:bg-blue-950/40 dark:text-slate-300;
+    @apply inline-flex items-center rounded-full bg-stone-100 px-2.5 py-0.5 text-xs font-medium text-stone-600 dark:bg-[#2e50f1]/40 dark:text-slate-300;
   }
 
   .badge-purple {
@@ -349,20 +365,20 @@ html.dark body {
 
 @layer utilities {
   .dark .bg-slate-50 {
-    background-color: rgb(7 16 46);
+    background-color: #172554;
   }
 
   .dark .bg-white {
-    background-color: rgb(11 25 55);
+    background-color: rgb(23 37 84 / 0.78);
   }
 
   .dark .bg-white\/90 {
-    background-color: rgb(11 25 55 / 0.9);
+    background-color: rgb(23 37 84 / 0.9);
   }
 
   .dark .border-slate-200,
   .dark .border-stone-200 {
-    border-color: rgb(30 60 140 / 0.50);
+    border-color: rgb(30 64 175 / 0.50);
   }
 
   .dark .text-slate-900 {
@@ -370,22 +386,22 @@ html.dark body {
   }
 
   .dark .text-slate-700 {
-    color: rgb(203 213 225);
+    color: rgb(214 211 209);
   }
 
   .dark .text-slate-600,
   .dark .text-stone-500 {
-    color: rgb(148 163 184);
+    color: rgb(168 162 158);
   }
 
   .dark .text-slate-500,
   .dark .text-slate-400,
   .dark .text-stone-400 {
-    color: rgb(100 116 139);
+    color: rgb(120 113 108);
   }
 
   .dark .hover\:bg-slate-100:hover {
-    background-color: rgb(20 42 90);
+    background-color: rgb(30 58 138 / 0.4);
   }
 
   .dark .hover\:text-slate-900:hover {

apps/dashboard/src/app/layout.tsx

@@ -17,8 +17,8 @@ export const metadata: Metadata = {
   title: 'RentalDriveGo Dashboard',
   description: 'Manage your rental car business',
   icons: {
-    icon: '/dashboard/icon.svg',
+    icon: '/icon.svg',
-    shortcut: '/dashboard/icon.svg',
+    shortcut: '/icon.svg',
   },
 
 }

apps/dashboard/src/app/public-auth-pages.test.ts

@@ -5,6 +5,8 @@ import ResetPasswordPageClient from "./reset-password/ResetPasswordPageClient";
 import ForgotPasswordPage from "./forgot-password/page";
 import ResetPasswordPage from "./reset-password/page";
 import AcceptInvitePage from "./onboarding/accept-invite/page";
+import SignUpForm from "./sign-up/[[...sign-up]]/SignUpForm";
+import SignUpPage from "./sign-up/[[...sign-up]]/page";
 
 function collectText(node: unknown): string[] {
   if (node === null || node === undefined || typeof node === "boolean")
@@ -56,6 +58,19 @@ describe("dashboard public auth pages", () => {
     expect(page.props.embedded).toBe(true);
   });
 
+  it("renders sign-up in embedded mode when requested", async () => {
+    const page = await SignUpPage({
+      searchParams: Promise.resolve({ embedded: "1" }),
+    });
+
+    expect(isValidElement(page)).toBe(true);
+    expect(page.type).toBe(React.Suspense);
+    const child = page.props.children;
+    expect(isValidElement(child)).toBe(true);
+    expect(child.type).toBe(SignUpForm);
+    expect(child.props.embedded).toBe(true);
+  });
+
   it("renders reset-password in embedded mode for the public shell route", () => {
     const page = ResetPasswordPage();
 

apps/dashboard/src/app/reset-password/ResetPasswordPageClient.tsx

@@ -240,7 +240,6 @@ function ResetShell({
       <main className="flex min-h-[calc(100vh-80px)] items-center justify-center px-4 py-12">
         <div className="w-full max-w-md">
           <div className="mb-8 text-center">
-            <span className="text-xs font-semibold uppercase tracking-[0.24em] text-orange-700 dark:text-orange-400">RentalDriveGo</span>
             <h1 className="mt-3 text-3xl font-black tracking-tight text-stone-900 dark:text-stone-100">{title}</h1>
             {subtitle && <p className="mt-2 text-sm text-stone-500 dark:text-stone-400">{subtitle}</p>}
           </div>

apps/dashboard/src/app/sign-in/[[...sign-in]]/SignInPageClient.tsx

@@ -10,7 +10,7 @@ import { adminUrl, marketplaceUrl } from "@/lib/urls";
 import { API_BASE, EMPLOYEE_PROFILE_KEY } from "@/lib/api";
 import { toPublicDashboardPath } from "@/lib/dashboardPaths";
 
-const DASHBOARD_LOGO_SRC = "/dashboard/rentalcardrive.png";
+const DASHBOARD_LOGO_SRC = "/dashboard/rentaldrivego.png";
 
 function notifyParent(message: Record<string, unknown>) {
   if (typeof window === "undefined" || window.parent === window) return;
@@ -184,13 +184,11 @@ export default function SignInPageClient({
                   width={104}
                   height={104}
                   priority
+                  unoptimized
                   className="h-24 w-24 rounded-[1.75rem] border border-stone-200/80 bg-white/85 p-1.5 shadow-sm transition-colors dark:border-blue-800 dark:bg-blue-950/80"
                 />
               </a>
             </div>
-            <p className="mt-5 text-xs font-bold uppercase tracking-[0.28em] text-orange-700 dark:text-orange-300">
-              RentalDriveGo
-            </p>
             <p className="mt-2 text-sm text-stone-600 dark:text-stone-300">
               {dict.subtitle}
             </p>

apps/dashboard/src/app/sign-up/[[...sign-up]]/SignUpForm.tsx

@@ -1,17 +1,46 @@
 "use client";
 
 import Image from "next/image";
-import { useState } from "react";
+import { useEffect, useRef, useState } from "react";
-import { useSearchParams } from "next/navigation";
+import { usePathname, useRouter, useSearchParams } from "next/navigation";
 import { apiFetch } from "@/lib/api";
 import PublicShell from "@/components/layout/PublicShell";
 import { useDashboardI18n } from "@/components/I18nProvider";
 import { marketplaceUrl } from "@/lib/urls";
 
-export default function SignUpForm() {
+const DASHBOARD_LOGO_SRC = "/dashboard/rentaldrivego.png";
-  const { language, setLanguage } = useDashboardI18n();
+
+function notifyParent(message: Record<string, unknown>) {
+  if (typeof window === "undefined" || window.parent === window) return;
+  window.parent.postMessage(message, "*");
+}
+
+function withAuthQuery(
+  path: string,
+  params: { embedded: boolean; language: "en" | "fr" | "ar"; theme: string },
+) {
+  const search = new URLSearchParams({
+    lang: params.language,
+    theme: params.theme,
+  });
+
+  if (params.embedded) search.set("embedded", "1");
+
+  return `${path}?${search.toString()}`;
+}
+
+export default function SignUpForm({
+  embedded = false,
+}: {
+  embedded?: boolean;
+}) {
+  const { language, theme, setLanguage, setTheme } = useDashboardI18n();
+  const pathname = usePathname();
+  const router = useRouter();
   const searchParams = useSearchParams();
   const requestedLanguage = searchParams.get("lang");
+  const requestedTheme = searchParams.get("theme");
+  const initializedFromQuery = useRef(false);
   const initialLanguage =
     requestedLanguage === "en" ||
     requestedLanguage === "fr" ||
@@ -29,9 +58,79 @@ export default function SignUpForm() {
   const [error, setError] = useState<string | null>(null);
   const [success, setSuccess] = useState(false);
 
+  useEffect(() => {
+    if (initializedFromQuery.current) return;
+
+    if (
+      (requestedLanguage === "en" ||
+        requestedLanguage === "fr" ||
+        requestedLanguage === "ar") &&
+      requestedLanguage !== language
+    ) {
+      setLanguage(requestedLanguage);
+      setPreferredLanguage(requestedLanguage);
+    }
+
+    if (
+      (requestedTheme === "light" || requestedTheme === "dark") &&
+      requestedTheme !== theme
+    ) {
+      setTheme(requestedTheme);
+    }
+
+    initializedFromQuery.current = true;
+  }, [
+    language,
+    requestedLanguage,
+    requestedTheme,
+    setLanguage,
+    setTheme,
+    theme,
+  ]);
+
+  useEffect(() => {
+    if (!initializedFromQuery.current) return;
+    if (language !== preferredLanguage) setPreferredLanguage(language);
+  }, [language, preferredLanguage]);
+
+  useEffect(() => {
+    if (!initializedFromQuery.current) return;
+
+    const params = new URLSearchParams(searchParams.toString());
+    let changed = false;
+
+    if (params.get("lang") !== preferredLanguage) {
+      params.set("lang", preferredLanguage);
+      changed = true;
+    }
+
+    if (params.get("theme") !== theme) {
+      params.set("theme", theme);
+      changed = true;
+    }
+
+    if (embedded && params.get("embedded") !== "1") {
+      params.set("embedded", "1");
+      changed = true;
+    }
+
+    if (!changed) return;
+
+    const nextQuery = params.toString();
+    router.replace(nextQuery ? `${pathname}?${nextQuery}` : pathname, {
+      scroll: false,
+    });
+  }, [embedded, pathname, preferredLanguage, router, searchParams, theme]);
+
+  useEffect(() => {
+    const currentPath =
+      window.location.pathname + (window.location.search || "");
+    notifyParent({ type: "rentaldrivego:embedded-path", path: currentPath });
+  }, [pathname, searchParams]);
+
   const dict = {
     en: {
-      title: "Create your workspace",
+      title: "Create account",
       subtitle: "Enter your email and password to get started.",
       email: "Email",
       emailPlaceholder: "you@company.com",
@@ -39,7 +138,7 @@ export default function SignUpForm() {
       passwordPlaceholder: "\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022",
       passwordHint: "Minimum 8 characters",
       languageLabel: "Preferred language",
-      create: "Create workspace",
+      create: "Create account",
       creating: "Creating\u2026",
       alreadyHave: "Already have an account?",
       signIn: "Sign in",
@@ -51,7 +150,7 @@ export default function SignUpForm() {
       successSignIn: "Go to sign in",
     },
     fr: {
-      title: "Cr\u00e9ez votre espace",
+      title: "Cr\u00e9er un compte",
       subtitle: "Saisissez votre email et mot de passe pour commencer.",
       email: "Email",
       emailPlaceholder: "vous@entreprise.com",
@@ -59,7 +158,7 @@ export default function SignUpForm() {
       passwordPlaceholder: "\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022",
       passwordHint: "Minimum 8 caract\u00e8res",
       languageLabel: "Langue pr\u00e9f\u00e9r\u00e9e",
-      create: "Cr\u00e9er mon espace",
+      create: "Cr\u00e9er un compte",
       creating: "Cr\u00e9ation\u2026",
       alreadyHave: "Vous avez d\u00e9j\u00e0 un compte ?",
       signIn: "Se connecter",
@@ -72,7 +171,7 @@ export default function SignUpForm() {
     },
     ar: {
       title:
-        "\u0623\u0646\u0634\u0626 \u0645\u0633\u0627\u062d\u0629 \u0639\u0645\u0644\u0643",
+        "\u0623\u0646\u0634\u0626 \u062d\u0633\u0627\u0628\u064b\u0627",
       subtitle:
         "\u0623\u062f\u062e\u0644 \u0628\u0631\u064a\u062f\u0643 \u0627\u0644\u0625\u0644\u0643\u062a\u0631\u0648\u0646\u064a \u0648\u0643\u0644\u0645\u0629 \u0627\u0644\u0645\u0631\u0648\u0631 \u0644\u0644\u0628\u062f\u0621.",
       email:
@@ -85,7 +184,7 @@ export default function SignUpForm() {
       languageLabel:
         "\u0627\u0644\u0644\u063a\u0629 \u0627\u0644\u0645\u0641\u0636\u0644\u0629",
       create:
-        "\u0623\u0646\u0634\u0626 \u0627\u0644\u0645\u0633\u0627\u062d\u0629",
+        "\u0623\u0646\u0634\u0626 \u062d\u0633\u0627\u0628\u064b\u0627",
       creating:
         "\u062c\u0627\u0631\u064d \u0627\u0644\u0625\u0646\u0634\u0627\u0621\u2026",
       alreadyHave:
@@ -105,6 +204,12 @@ export default function SignUpForm() {
     },
   }[preferredLanguage];
 
+  const signInHref = withAuthQuery("/sign-in", {
+    embedded,
+    language: preferredLanguage,
+    theme,
+  });
+
   async function handleSubmit(e: React.FormEvent) {
     e.preventDefault();
     setLoading(true);
@@ -135,17 +240,18 @@ export default function SignUpForm() {
 
   if (success) {
     return (
-      <PublicShell hideHeaderActions>
+      <PublicShell embedded={embedded} hideFooter hideHeaderActions>
-        <main className="flex flex-1 items-center justify-center px-4 py-16">
+        <main className="flex flex-1 items-center justify-center px-4 py-12">
           <div className="w-full max-w-md text-center">
             <div className="flex justify-center mb-6">
               <Image
-                src="/dashboard/rentalcardrive.png"
+                src={DASHBOARD_LOGO_SRC}
                 alt="RentalDriveGo"
-                width={80}
+                width={104}
-                height={80}
+                height={104}
                 priority
-                className="h-20 w-20 rounded-[1.5rem] border border-stone-200/80 bg-white/85 p-1.5 shadow-sm dark:border-blue-800 dark:bg-blue-950/80"
+                unoptimized
+                className="h-24 w-24 rounded-[1.75rem] border border-stone-200/80 bg-white/85 p-1.5 shadow-sm transition-colors dark:border-blue-800 dark:bg-blue-950/80"
               />
             </div>
             <div className="rounded-[2rem] border border-stone-200/80 bg-white/82 p-8 shadow-[0_30px_80px_rgba(28,25,23,0.08)] backdrop-blur dark:border-blue-900 dark:bg-blue-950/78">
@@ -156,7 +262,8 @@ export default function SignUpForm() {
                 {dict.successMessage.replace("{email}", email)}
               </p>
               <a
-                href="/sign-in"
+                href={signInHref}
+                target={embedded ? "_self" : undefined}
                 className="mt-6 inline-flex justify-center 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.successSignIn}
@@ -169,23 +276,24 @@ export default function SignUpForm() {
   }
 
   return (
-    <PublicShell hideHeaderActions>
+    <PublicShell embedded={embedded} hideFooter hideHeaderActions>
-      <main className="flex flex-1 items-center justify-center px-4 py-16">
+      <main className="flex flex-1 items-center justify-center px-4 py-12">
         <div className="w-full max-w-md">
           <div className="mb-8 text-center">
             <div className="flex justify-center">
               <a href={marketplaceUrl} target="_top">
                 <Image
-                  src="/dashboard/rentalcardrive.png"
+                  src={DASHBOARD_LOGO_SRC}
                   alt="RentalDriveGo"
-                  width={80}
+                  width={104}
-                  height={80}
+                  height={104}
                   priority
-                  className="h-20 w-20 rounded-[1.5rem] border border-stone-200/80 bg-white/85 p-1.5 shadow-sm dark:border-blue-800 dark:bg-blue-950/80"
+                  unoptimized
+                  className="h-24 w-24 rounded-[1.75rem] border border-stone-200/80 bg-white/85 p-1.5 shadow-sm transition-colors dark:border-blue-800 dark:bg-blue-950/80"
                 />
               </a>
             </div>
-            <h1 className="mt-4 text-2xl font-black tracking-[-0.03em] text-blue-950 dark:text-stone-50">
+            <h1 className="mt-3 text-3xl font-black tracking-tight text-stone-900 dark:text-stone-100">
               {dict.title}
             </h1>
             <p className="mt-2 text-sm text-stone-600 dark:text-stone-300">
@@ -281,32 +389,6 @@ export default function SignUpForm() {
                 </p>
               </div>
 
-              <div>
-                <span className="mb-1.5 block text-sm font-medium text-stone-700 dark:text-stone-200">
-                  {dict.languageLabel} <span className="text-red-500">*</span>
-                </span>
-                <div className="grid grid-cols-3 gap-2">
-                  {(["en", "fr", "ar"] as const).map((lang) => (
-                    <button
-                      key={lang}
-                      type="button"
-                      onClick={() => setPreferredLanguage(lang)}
-                      className={`rounded-2xl border py-3 text-sm font-semibold transition ${
-                        preferredLanguage === lang
-                          ? "border-blue-900 bg-blue-900 text-white dark:bg-orange-500 dark:border-orange-400"
-                          : "border-stone-200 bg-white text-stone-600 hover:border-stone-300 hover:bg-stone-50 dark:border-blue-800 dark:bg-blue-950/50 dark:text-stone-300 dark:hover:border-blue-600"
-                      }`}
-                    >
-                      {lang === "en"
-                        ? "English"
-                        : lang === "fr"
-                          ? "Fran\u00e7ais"
-                          : "\u0627\u0644\u0639\u0631\u0628\u064a\u0629"}
-                    </button>
-                  ))}
-                </div>
-              </div>
-
               <button
                 type="submit"
                 disabled={loading}
@@ -319,7 +401,7 @@ export default function SignUpForm() {
             <p className="mt-6 text-center text-sm text-stone-500 dark:text-stone-400">
               {dict.alreadyHave}{" "}
               <a
-                href="/sign-in"
+                href={signInHref}
                 className="font-semibold text-orange-700 hover:text-orange-800 dark:text-orange-300 dark:hover:text-orange-200"
               >
                 {dict.signIn}

apps/dashboard/src/app/sign-up/[[...sign-up]]/page.tsx

@@ -1,10 +1,17 @@
-import { Suspense } from 'react'
+import { Suspense } from "react";
-import SignUpForm from './SignUpForm'
+import SignUpForm from "./SignUpForm";
+
+export default async function SignUpPage({
+  searchParams,
+}: {
+  searchParams: Promise<Record<string, string | string[] | undefined>>;
+}) {
+  const params = await searchParams;
+  const embedded = params.embedded === "1";
 
-export default function SignUpPage() {
   return (
     <Suspense fallback={null}>
-      <SignUpForm />
+      <SignUpForm embedded={embedded} />
     </Suspense>
-  )
+  );
 }

apps/dashboard/src/app/verify-email/page.tsx

@@ -75,11 +75,12 @@ export default function VerifyEmailPage() {
         <div className="w-full max-w-md text-center">
           <div className="flex justify-center mb-6">
             <Image
-              src="/dashboard/rentalcardrive.png"
+              src="/dashboard/rentaldrivego.png"
               alt="RentalDriveGo"
               width={80}
               height={80}
               priority
+              unoptimized
               className="h-20 w-20 rounded-[1.5rem] border border-stone-200/80 bg-white/85 p-1.5 shadow-sm dark:border-blue-800 dark:bg-blue-950/80"
             />
           </div>

apps/dashboard/src/components/layout/PublicHeader.tsx

@@ -6,7 +6,7 @@ import { useEffect, useRef, useState } from "react";
 import { useDashboardI18n } from "@/components/I18nProvider";
 import { marketplaceUrl } from "@/lib/urls";
 
-const BRAND_LOGO_SRC = "/dashboard/rentaldrivego.jpeg";
+const BRAND_LOGO_SRC = "/dashboard/rentaldrivego.png";
 
 const languageMeta = {
   en: { flag: "🇺🇸", shortLabel: "EN" },
@@ -103,6 +103,7 @@ export default function PublicHeader({
               width={36}
               height={36}
               priority
+              unoptimized
               className="h-8 w-8 rounded-md object-contain sm:h-9 sm:w-9"
             />
             <span>RentalDriveGo</span>

apps/homepage/next.config.ts

@@ -46,6 +46,16 @@ const nextConfig: NextConfig = {
         destination: '/dashboard/:path*',
         permanent: false,
       },
+      {
+        source: '/sign-in',
+        destination: '/en/sign-in',
+        permanent: false,
+      },
+      {
+        source: '/forgot-password',
+        destination: '/en/forgot-password',
+        permanent: false,
+      },
     ];
   },
 

apps/homepage/src/app/[locale]/forgot-password/page.tsx

@@ -0,0 +1,20 @@
+import { ForgotPasswordForm } from '@/components/auth/ForgotPasswordForm'
+import { isLocale, type Locale } from '@/lib/localization/config'
+import { notFound } from 'next/navigation'
+import { Suspense } from 'react'
+
+export default async function ForgotPasswordPage({
+  params,
+}: {
+  params: Promise<{ locale: string }>
+}) {
+  const { locale: localeValue } = await params
+  if (!isLocale(localeValue)) notFound()
+  const locale = localeValue as Locale
+
+  return (
+    <Suspense fallback={null}>
+      <ForgotPasswordForm locale={locale} />
+    </Suspense>
+  )
+}

apps/homepage/src/app/[locale]/layout.tsx

@@ -6,7 +6,7 @@ import '@/styles/globals.css';
 
 import { SiteFooter } from '@/components/app-shell/SiteFooter';
 import { DemoDialogHost } from '@/components/integrations/DemoDialogHost';
-import { SiteHeader } from '@/components/app-shell/SiteHeader';
+import { HeaderRouter } from '@/components/app-shell/HeaderRouter';
 import { ThemeController } from '@/components/app-shell/ThemeController';
 import { getPublicIntegrationConfig } from '@/lib/integrations/environment';
 import { getDirection, isLocale, type Locale } from '@/lib/localization/config';
@@ -26,8 +26,8 @@ import type { ReactNode } from 'react';
 export async function generateMetadata(): Promise<Metadata> {
   return {
     icons: {
-      icon: '/rentaldrivego.jpeg',
+      icon: '/rentaldrivego.png',
-      apple: '/rentaldrivego.jpeg',
+      apple: '/rentaldrivego.png',
     },
   };
 }
@@ -75,11 +75,10 @@ export default async function LocaleLayout({ children, params }: LocaleLayoutPro
         <a className="skip-link" href="#main-content">
           {messages.shell.skipToContent}
         </a>
-        <SiteHeader
+        <HeaderRouter
           locale={locale}
           messages={messages.shell}
           themePreference={preference}
-          demoEnabled={integrationConfig.demoSubmissionEnabled}
         />
         {children}
         <DemoDialogHost
@@ -90,7 +89,6 @@ export default async function LocaleLayout({ children, params }: LocaleLayoutPro
         <SiteFooter
           locale={locale}
           messages={messages.shell}
-          demoEnabled={integrationConfig.demoSubmissionEnabled}
         />
       </body>
     </html>

apps/homepage/src/app/[locale]/page.tsx

@@ -44,7 +44,7 @@ export default async function LocaleHomePage({ params }: LocalePageProps) {
 
   const locale: Locale = localeValue;
   const messages = getMessages(locale);
-  const content = buildHomepageContent(messages.homepage, messages.shell);
+  const content = buildHomepageContent(messages.homepage, messages.shell, locale);
   const integrationConfig = getPublicIntegrationConfig();
   const homePath = localizedPath('home', locale);
 
@@ -53,7 +53,6 @@ export default async function LocaleHomePage({ params }: LocalePageProps) {
       <HeroSection
         content={content.hero}
         homePath={homePath}
-        demoSubmissionEnabled={integrationConfig.demoSubmissionEnabled}
       />
       <TrustSection content={content.trust} />
       <ComparisonSection content={content.comparison} />
@@ -72,7 +71,6 @@ export default async function LocaleHomePage({ params }: LocalePageProps) {
       <FaqSection content={content.faq} />
       <FinalCtaSection
         content={content.final}
-        demoSubmissionEnabled={integrationConfig.demoSubmissionEnabled}
       />
     </main>
   );

apps/homepage/src/app/[locale]/sign-in/page.tsx

@@ -0,0 +1,20 @@
+import { SignInForm } from '@/components/auth/SignInForm'
+import { isLocale, type Locale } from '@/lib/localization/config'
+import { notFound } from 'next/navigation'
+import { Suspense } from 'react'
+
+export default async function SignInPage({
+  params,
+}: {
+  params: Promise<{ locale: string }>
+}) {
+  const { locale: localeValue } = await params
+  if (!isLocale(localeValue)) notFound()
+  const locale = localeValue as Locale
+
+  return (
+    <Suspense fallback={null}>
+      <SignInForm locale={locale} />
+    </Suspense>
+  )
+}

apps/homepage/src/components/app-shell/AuthHeader.module.css

@@ -0,0 +1,292 @@
+.header {
+  position: sticky;
+  top: 0;
+  z-index: 50;
+  border-bottom: 1px solid rgb(231 229 228 / 0.8);
+  background: rgb(255 255 255 / 0.78);
+  backdrop-filter: blur(24px);
+  -webkit-backdrop-filter: blur(24px);
+  box-shadow: 0 10px 30px rgba(15, 23, 42, 0.08);
+}
+
+:global(html[data-theme='dark']) .header {
+  border-color: rgb(30 58 138 / 0.8);
+  background: rgb(23 37 84 / 0.76);
+  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.32);
+}
+
+.inner {
+  display: flex;
+  min-height: 3.5rem;
+  max-width: var(--container-wide);
+  margin-inline: auto;
+  flex-direction: column;
+  gap: 0.375rem;
+  padding: 0.375rem 1rem;
+  align-items: stretch;
+}
+
+@media (min-width: 640px) {
+  .inner {
+    padding-left: 1.5rem;
+    padding-right: 1.5rem;
+  }
+}
+
+@media (min-width: 1024px) {
+  .inner {
+    flex-direction: row;
+    align-items: center;
+    justify-content: space-between;
+    gap: 0.75rem;
+    padding: 0.5rem 2rem;
+  }
+}
+
+.brand {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 0.75rem;
+}
+
+.brandLink {
+  display: flex;
+  align-items: center;
+  gap: 0.375rem;
+  font-size: 11px;
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: 0.14em;
+  color: #1c1917;
+  text-decoration: none;
+}
+
+:global(html[data-theme='dark']) .brandLink {
+  color: #f5f5f4;
+}
+
+@media (min-width: 640px) {
+  .brandLink {
+    font-size: 0.875rem;
+    letter-spacing: 0.2em;
+  }
+}
+
+.mark {
+  width: 2rem;
+  height: 2rem;
+  border-radius: 0.375rem;
+  object-fit: contain;
+  flex-shrink: 0;
+}
+
+@media (min-width: 640px) {
+  .mark {
+    width: 2.25rem;
+    height: 2.25rem;
+  }
+}
+
+.controls {
+  display: flex;
+  flex-direction: column;
+  gap: 0.375rem;
+}
+
+@media (min-width: 1024px) {
+  .controls {
+    flex-direction: row;
+    align-items: center;
+    gap: 0.75rem;
+  }
+}
+
+.pill {
+  display: flex;
+  align-items: center;
+  align-self: flex-start;
+  border-radius: 999px;
+  border: 1px solid rgb(231 229 228 / 0.8);
+  background: rgb(255 255 255 / 0.95);
+  padding: 0.125rem;
+  box-shadow: 0 1px 2px rgba(0,0,0,0.05);
+}
+
+:global(html[data-theme='dark']) .pill {
+  border-color: #1e40af;
+  background: rgb(23 37 84 / 0.85);
+}
+
+@media (min-width: 640px) {
+  .pill {
+    align-self: auto;
+    padding: 0.25rem;
+  }
+}
+
+.localeBtn {
+  display: inline-flex;
+  min-width: 4.75rem;
+  align-items: center;
+  justify-content: center;
+  gap: 0.375rem;
+  border-radius: 999px;
+  padding: 0.375rem 0.625rem;
+  font-size: 11px;
+  font-weight: 600;
+  color: #44403c;
+  background: transparent;
+  border: none;
+  cursor: pointer;
+  transition: background 0.15s;
+}
+
+.localeBtn:hover {
+  background: #f5f5f4;
+}
+
+:global(html[data-theme='dark']) .localeBtn {
+  color: #e7e5e4;
+}
+
+:global(html[data-theme='dark']) .localeBtn:hover {
+  background: rgb(30 58 138 / 0.4);
+}
+
+@media (min-width: 640px) {
+  .localeBtn {
+    min-width: 5.25rem;
+    padding: 0.5rem 0.75rem;
+    font-size: 0.75rem;
+  }
+}
+
+.chevron {
+  width: 0.875rem;
+  height: 0.875rem;
+  transition: transform 0.15s;
+}
+
+.chevronOpen {
+  transform: rotate(180deg);
+}
+
+.localeMenuWrap {
+  position: relative;
+}
+
+.localeMenu {
+  position: absolute;
+  top: 100%;
+  z-index: 30;
+  margin-top: 0.5rem;
+  width: 12rem;
+  max-width: calc(100vw - 2rem);
+  overflow: hidden;
+  border-radius: 1rem;
+  border: 1px solid #e7e5e4;
+  background: rgb(255 255 255 / 0.95);
+  text-align: left;
+  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.12);
+  backdrop-filter: blur(16px);
+  left: 0;
+}
+
+@media (min-width: 640px) {
+  .localeMenu {
+    left: auto;
+    right: 0;
+  }
+}
+
+:global(html[data-theme='dark']) .localeMenu {
+  border-color: #1e3a8a;
+  background: rgb(23 37 84 / 0.95);
+  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.35);
+}
+
+.localeOption {
+  display: flex;
+  width: 100%;
+  align-items: center;
+  gap: 0.75rem;
+  padding: 0.75rem 1rem;
+  font-size: 0.875rem;
+  color: #44403c;
+  background: transparent;
+  border: none;
+  cursor: pointer;
+  transition: background 0.15s, color 0.15s;
+}
+
+.localeOption:hover {
+  background: #f5f5f4;
+  color: #1e3a8a;
+}
+
+:global(html[data-theme='dark']) .localeOption {
+  color: #e7e5e4;
+}
+
+:global(html[data-theme='dark']) .localeOption:hover {
+  background: rgb(30 58 138 / 0.4);
+  color: #fff;
+}
+
+.divider {
+  width: 1px;
+  height: 1.5rem;
+  margin: 0 0.25rem;
+  background: #e7e5e4;
+}
+
+:global(html[data-theme='dark']) .divider {
+  background: #334155;
+}
+
+.themeBtn {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.375rem;
+  border-radius: 999px;
+  padding: 0.25rem 0.5rem;
+  background: transparent;
+  border: none;
+  cursor: pointer;
+  transition: background 0.15s;
+}
+
+.themeBtn:hover {
+  background: #f5f5f4;
+}
+
+:global(html[data-theme='dark']) .themeBtn:hover {
+  background: rgb(30 58 138 / 0.4);
+}
+
+@media (min-width: 640px) {
+  .themeBtn {
+    padding: 0.375rem 0.625rem;
+  }
+}
+
+.themeLabel {
+  border-radius: 999px;
+  background: #1e3a8a;
+  padding: 0.25rem 0.75rem;
+  font-size: 11px;
+  font-weight: 600;
+  color: #fff;
+}
+
+:global(html[data-theme='dark']) .themeLabel {
+  background: #fb923c;
+}
+
+@media (min-width: 640px) {
+  .themeLabel {
+    padding: 0.375rem 0.875rem;
+    font-size: 0.75rem;
+  }
+}

apps/homepage/src/components/app-shell/AuthHeader.tsx

@@ -0,0 +1,146 @@
+'use client';
+
+import { localizedPath, locales, type Locale } from '@/lib/localization/config';
+import { persistTheme, themePreferenceEvent } from '@/lib/theme/client';
+import { type ThemePreference } from '@/lib/theme/config';
+import Image from 'next/image';
+import { usePathname, useRouter } from 'next/navigation';
+import { useEffect, useRef, useState } from 'react';
+import styles from './AuthHeader.module.css';
+
+const langLabels: Record<Locale, string> = { en: 'EN', fr: 'FR', ar: 'AR' };
+const langFlags: Record<Locale, string> = { en: '🇺🇸', fr: '🇫🇷', ar: '🇲🇦' };
+
+const themeDict: Record<Locale, Record<string, string>> = {
+  en: { theme: 'Theme', light: 'Light', dark: 'Dark' },
+  fr: { theme: 'Mode', light: 'Clair', dark: 'Sombre' },
+  ar: { theme: 'الوضع', light: 'فاتح', dark: 'داكن' },
+};
+
+interface Props {
+  locale: Locale;
+  themePreference: ThemePreference;
+}
+
+export function AuthHeader({ locale, themePreference: initialPref }: Props) {
+  const pathname = usePathname();
+  const router = useRouter();
+  const [pref, setPref] = useState<ThemePreference>(initialPref);
+
+  const t = themeDict[locale] ?? themeDict.en;
+  const themeLabel = pref === 'dark' ? t.dark : t.light;
+
+  const localeMenuRef = useRef<HTMLDivElement | null>(null);
+  const [localeOpen, setLocaleOpen] = useState(false);
+
+  useEffect(() => {
+    setPref(initialPref);
+  }, [initialPref]);
+
+  useEffect(() => {
+    const handler = () => {
+      const stored = localStorage.getItem('hpc.theme.preference');
+      if (stored === 'light' || stored === 'dark' || stored === 'system') setPref(stored);
+    };
+    window.addEventListener(themePreferenceEvent, handler);
+    return () => window.removeEventListener(themePreferenceEvent, handler);
+  }, []);
+
+  useEffect(() => {
+    function handleClick(e: MouseEvent) {
+      if (!localeMenuRef.current?.contains(e.target as Node)) setLocaleOpen(false);
+    }
+    document.addEventListener('mousedown', handleClick);
+    return () => document.removeEventListener('mousedown', handleClick);
+  }, []);
+
+  const cycleTheme = () => {
+    const next = pref === 'dark' ? 'light' : 'dark';
+    persistTheme(next);
+    setPref(next);
+  };
+
+  const switchLocale = (next: Locale) => {
+    setLocaleOpen(false);
+    const segments = pathname.split('/').filter(Boolean);
+    if (segments.length >= 2) segments[1] = next;
+    router.push('/' + segments.join('/'));
+  };
+
+  const otherLocales = locales.filter((l) => l !== locale);
+  const homePath = localizedPath('home', locale);
+
+  return (
+    <header className={styles.header}>
+      <div className={styles.inner}>
+        <div className={styles.brand}>
+          <a href={homePath} className={styles.brandLink} aria-label="RentalDriveGo home">
+            <Image
+              src="/rentaldrivego.png"
+              alt="RentalDriveGo"
+              width={36}
+              height={36}
+              priority
+              unoptimized
+              className={styles.mark}
+            />
+            <span>RentalDriveGo</span>
+          </a>
+        </div>
+
+        <div className={styles.controls}>
+          <div className={styles.pill}>
+            <div ref={localeMenuRef} className={styles.localeMenuWrap}>
+              <button
+                type="button"
+                onClick={() => setLocaleOpen((v) => !v)}
+                className={styles.localeBtn}
+                aria-expanded={localeOpen}
+                aria-haspopup="menu"
+              >
+                <span aria-hidden="true">{langFlags[locale]}</span>
+                <span>{langLabels[locale]}</span>
+                <svg
+                  xmlns="http://www.w3.org/2000/svg"
+                  className={`${styles.chevron} ${localeOpen ? styles.chevronOpen : ''}`}
+                  fill="none"
+                  viewBox="0 0 24 24"
+                  stroke="currentColor"
+                  strokeWidth={2}
+                >
+                  <path strokeLinecap="round" strokeLinejoin="round" d="M19 9l-7 7-7-7" />
+                </svg>
+              </button>
+              {localeOpen && (
+                <div className={styles.localeMenu}>
+                  {otherLocales.map((l) => (
+                    <button
+                      key={l}
+                      type="button"
+                      onClick={() => switchLocale(l)}
+                      className={styles.localeOption}
+                    >
+                      <span aria-hidden="true">{langFlags[l]}</span>
+                      <span>{langLabels[l]}</span>
+                    </button>
+                  ))}
+                </div>
+              )}
+            </div>
+
+            <span className={styles.divider} aria-hidden="true" />
+
+            <button
+              type="button"
+              onClick={cycleTheme}
+              className={styles.themeBtn}
+              aria-label={themeLabel}
+            >
+              <span className={styles.themeLabel}>{themeLabel}</span>
+            </button>
+          </div>
+        </div>
+      </div>
+    </header>
+  );
+}

apps/homepage/src/components/app-shell/BrandLink.tsx

@@ -15,12 +15,13 @@ export function BrandLink({ locale, label }: { locale: Locale; label: string })
       aria-current={routeIdFromPathname(pathname) === 'home' ? 'page' : undefined}
     >
       <Image
-        src="/rentaldrivego.jpeg"
+        src="/rentaldrivego.png"
         alt=""
         width={36}
         height={36}
         className={styles.mark}
         priority
+        unoptimized
       />
       <span className={styles.brandName}>RentalDriveGo</span>
     </a>

apps/homepage/src/components/app-shell/HeaderRouter.tsx

@@ -0,0 +1,25 @@
+'use client';
+
+import { usePathname } from 'next/navigation';
+import { SiteHeader } from './SiteHeader';
+import { AuthHeader } from './AuthHeader';
+import type { ShellMessages } from '@/lib/localization/messages';
+import type { Locale } from '@/lib/localization/config';
+import type { ThemePreference } from '@/lib/theme/config';
+
+interface Props {
+  locale: Locale;
+  messages: ShellMessages;
+  themePreference: ThemePreference;
+}
+
+export function HeaderRouter({ locale, messages, themePreference }: Props) {
+  const pathname = usePathname();
+  const isAuth = pathname.endsWith('/sign-in') || pathname.endsWith('/forgot-password');
+
+  if (isAuth) {
+    return <AuthHeader locale={locale} themePreference={themePreference} />;
+  }
+
+  return <SiteHeader locale={locale} messages={messages} themePreference={themePreference} />;
+}

apps/homepage/src/components/app-shell/MobileNavigation.tsx

@@ -1,9 +1,9 @@
 'use client';
 
 import { ActionLink } from '@/components/actions/ActionLink';
-import { DemoTrigger } from '@/components/integrations/DemoTrigger';
 import type { ShellMessages } from '@/lib/localization/messages';
 import { localizedPath, type Locale } from '@/lib/localization/config';
+import { accountCreateUrl } from '@/lib/account-urls';
 import type { ThemePreference } from '@/lib/theme/config';
 import { useEffect, useRef, useState } from 'react';
 import { HeaderNavigation } from './HeaderNavigation';
@@ -19,14 +19,12 @@ interface MobileNavigationProps {
   locale: Locale;
   messages: ShellMessages;
   themePreference: ThemePreference;
-  demoEnabled: boolean;
 }
 
 export function MobileNavigation({
   locale,
   messages,
   themePreference,
-  demoEnabled,
 }: MobileNavigationProps) {
   const [open, setOpen] = useState(false);
   const dialogRef = useRef<HTMLDialogElement>(null);
@@ -132,12 +130,9 @@ export function MobileNavigation({
             <ActionLink href={signInUrl(locale)} variant="button-primary">
               {messages.header.login}
             </ActionLink>
-            <DemoTrigger
+            <ActionLink href={accountCreateUrl(locale)} variant="button-conversion">
-              label={messages.header.demo}
+              {messages.header.demo}
-              source="mobile-header"
+            </ActionLink>
-              fullWidth
-              disabledReason={demoEnabled ? undefined : messages.header.demoUnavailable}
-            />
           </div>
         </div>
       </dialog>

apps/homepage/src/components/app-shell/SiteFooter.tsx

@@ -1,5 +1,5 @@
 import { StatusBadge } from '@/components/foundation/StatusBadge';
-import { DemoTrigger } from '@/components/integrations/DemoTrigger';
+import { accountCreateUrl } from '@/lib/account-urls';
 import { localizedPath, type Locale } from '@/lib/localization/config';
 import type { ShellMessages } from '@/lib/localization/messages';
 import styles from './SiteFooter.module.css';
@@ -11,7 +11,6 @@ function signInUrl(locale: Locale): string {
 interface SiteFooterProps {
   locale: Locale;
   messages: ShellMessages;
-  demoEnabled: boolean;
 }
 
 function HashLink({ locale, hash, children }: { locale: Locale; hash: string; children: string }) {
@@ -46,7 +45,7 @@ function PendingItem({ label, pending }: { label: string; pending: string }) {
   );
 }
 
-export function SiteFooter({ locale, messages, demoEnabled }: SiteFooterProps) {
+export function SiteFooter({ locale, messages }: SiteFooterProps) {
   const footer = messages.footer;
   const year = new Date().getUTCFullYear();
 
@@ -98,12 +97,7 @@ export function SiteFooter({ locale, messages, demoEnabled }: SiteFooterProps) {
                 <PendingItem label={footer.links.contact} pending={footer.pending} />
               </li>
               <li>
-                <DemoTrigger
+                <a href={accountCreateUrl(locale)}>{footer.links.demo}</a>
-                  label={footer.links.demo}
-                  source="footer"
-                  size="small"
-                  disabledReason={demoEnabled ? undefined : messages.header.demoUnavailable}
-                />
               </li>
             </ul>
           </section>

apps/homepage/src/components/app-shell/SiteHeader.tsx

@@ -2,7 +2,7 @@ import { localizedPath, type Locale } from '@/lib/localization/config';
 import type { ShellMessages } from '@/lib/localization/messages';
 import type { ThemePreference } from '@/lib/theme/config';
 import { ActionLink } from '@/components/actions/ActionLink';
-import { DemoTrigger } from '@/components/integrations/DemoTrigger';
+import { accountCreateUrl } from '@/lib/account-urls';
 import { BrandLink } from './BrandLink';
 import { HeaderNavigation } from './HeaderNavigation';
 import { LocaleSelector } from './LocaleSelector';
@@ -18,10 +18,9 @@ interface SiteHeaderProps {
   locale: Locale;
   messages: ShellMessages;
   themePreference: ThemePreference;
-  demoEnabled: boolean;
 }
 
-export function SiteHeader({ locale, messages, themePreference, demoEnabled }: SiteHeaderProps) {
+export function SiteHeader({ locale, messages, themePreference }: SiteHeaderProps) {
   return (
     <header className={styles.header}>
       <div className={styles.inner}>
@@ -56,27 +55,23 @@ export function SiteHeader({ locale, messages, themePreference, demoEnabled }: S
           <ActionLink href={signInUrl(locale)} variant="button-primary">
             {messages.header.login}
           </ActionLink>
-          <DemoTrigger
+          <ActionLink href={accountCreateUrl(locale)} variant="button-conversion">
-            label={messages.header.demo}
+            {messages.header.demo}
-            source="header"
+          </ActionLink>
-            size="small"
-            disabledReason={demoEnabled ? undefined : messages.header.demoUnavailable}
-          />
         </div>
 
         <div className={styles.mobileActions}>
-          <DemoTrigger
+          <ActionLink
-            label={messages.header.demo}
+            href={accountCreateUrl(locale)}
-            source="mobile-header"
+            variant="button-conversion"
-            size="small"
             className={styles.mobileDemoTrigger}
-            disabledReason={demoEnabled ? undefined : messages.header.demoUnavailable}
+          >
-          />
+            {messages.header.demo}
+          </ActionLink>
           <MobileNavigation
             locale={locale}
             messages={messages}
             themePreference={themePreference}
-            demoEnabled={demoEnabled}
           />
         </div>
       </div>

apps/homepage/src/components/auth/AuthShell.tsx

@@ -26,15 +26,17 @@ export function AuthShell({ locale, title, subtitle, children }: AuthShellProps)
       }}
     >
       <div style={{ width: '100%', maxWidth: '28rem' }}>
-        <div style={{ marginBottom: '2rem', textAlign: 'center' }}>
+        <div style={{ marginBottom: '2rem', display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
           <a href={localizedPath('home', locale)}>
             <Image
-              src="/rentaldrivego.jpeg"
+              src="/rentaldrivego.png"
               alt="RentalDriveGo"
               width={96}
               height={96}
               priority
+              unoptimized
               style={{
+                display: 'block',
                 borderRadius: '1.5rem',
                 border: '1px solid var(--color-border)',
                 background: 'var(--color-surface)',
@@ -43,18 +45,6 @@ export function AuthShell({ locale, title, subtitle, children }: AuthShellProps)
               }}
             />
           </a>
-          <p
-            style={{
-              marginTop: '1rem',
-              fontSize: '0.75rem',
-              fontWeight: 700,
-              textTransform: 'uppercase',
-              letterSpacing: '0.28em',
-              color: 'var(--color-accent)',
-            }}
-          >
-            RentalDriveGo
-          </p>
           <h1
             style={{
               marginTop: '0.5rem',

apps/homepage/src/components/homepage/sections/ComparisonSection.module.css

@@ -0,0 +1,3 @@
+.comparisonImage {
+  object-position: center;
+}

apps/homepage/src/components/homepage/sections/ComparisonSection.tsx

@@ -1,7 +1,9 @@
 import { Container, Section, Stack } from '@/components/layout/LayoutPrimitives';
 import { Comparison } from '@/components/marketing/Comparison';
 import { SectionHeader } from '@/components/marketing/SectionHeader';
+import { ResponsiveImage } from '@/components/media/MediaFrame';
 import type { HomepageContent } from '@/content/homepage-model';
+import styles from './ComparisonSection.module.css';
 
 export function ComparisonSection({ content }: { content: HomepageContent['comparison'] }) {
   return (
@@ -9,6 +11,15 @@ export function ComparisonSection({ content }: { content: HomepageContent['compa
       <Container>
         <Stack gap="large">
           <SectionHeader eyebrow={content.eyebrow} title={content.title} body={content.body} />
+          <ResponsiveImage
+            src={content.image.src}
+            alt={content.image.alt}
+            width={content.image.width}
+            height={content.image.height}
+            ratio="wide"
+            sizes="(max-width: 767px) 100vw, 86vw"
+            className={styles.comparisonImage}
+          />
           <Comparison
             columns={[
               { title: content.beforeTitle, items: content.beforeItems, tone: 'problem' },

apps/homepage/src/components/homepage/sections/FinalCtaSection.module.css

@@ -1,3 +1,26 @@
 .finalSection {
   padding-block-start: clamp(var(--space-8), 6vw, var(--space-16));
 }
+
+.finalLayout {
+  display: grid;
+  grid-template-columns: minmax(8rem, 14rem) minmax(0, 1fr);
+  align-items: center;
+  gap: var(--space-6);
+}
+
+.brandImage {
+  object-fit: contain;
+  background: var(--surface-page);
+}
+
+@media (max-width: 767px) {
+  .finalLayout {
+    grid-template-columns: 1fr;
+  }
+
+  .finalLayout > figure {
+    inline-size: min(14rem, 52vw);
+    justify-self: center;
+  }
+}

apps/homepage/src/components/homepage/sections/FinalCtaSection.tsx

@@ -1,33 +1,35 @@
-import { DemoTrigger } from '@/components/integrations/DemoTrigger';
 import { Container, Section } from '@/components/layout/LayoutPrimitives';
 import { CTA } from '@/components/marketing/CTA';
+import { ResponsiveImage } from '@/components/media/MediaFrame';
 import type { HomepageContent } from '@/content/homepage-model';
 import styles from './FinalCtaSection.module.css';
 
 interface FinalCtaSectionProps {
   content: HomepageContent['final'];
-  demoSubmissionEnabled: boolean;
 }
 
-export function FinalCtaSection({ content, demoSubmissionEnabled }: FinalCtaSectionProps) {
+export function FinalCtaSection({ content }: FinalCtaSectionProps) {
   return (
     <Section className={styles.finalSection} aria-label={content.title}>
       <Container>
-        <CTA
+        <div className={styles.finalLayout}>
-          eyebrow={content.eyebrow}
+          <ResponsiveImage
-          title={content.title}
+            src={content.image.src}
-          body={content.body}
+            alt={content.image.alt}
-          primary={content.primary}
+            width={content.image.width}
-          secondary={content.secondary}
+            height={content.image.height}
-          primaryNode={
+            ratio="square"
-            <DemoTrigger
+            sizes="(max-width: 767px) 52vw, 14rem"
-              label={content.primary.label}
+            className={styles.brandImage}
-              source="final-cta"
+          />
-              size="large"
+          <CTA
-              disabledReason={demoSubmissionEnabled ? undefined : content.primary.disabledReason}
+            eyebrow={content.eyebrow}
-            />
+            title={content.title}
-          }
+            body={content.body}
-        />
+            primary={content.primary}
+            secondary={content.secondary}
+          />
+        </div>
       </Container>
     </Section>
   );

apps/homepage/src/components/homepage/sections/HeroSection.tsx

@@ -1,7 +1,6 @@
 import { ActionLink } from '@/components/actions/ActionLink';
-import { DemoTrigger } from '@/components/integrations/DemoTrigger';
 import { Container, Section } from '@/components/layout/LayoutPrimitives';
-import { ProductPreview } from '@/components/marketing/ProductPreview';
+import { ResponsiveImage } from '@/components/media/MediaFrame';
 import { Eyebrow, Heading, Text } from '@/components/typography/Typography';
 import type { HomepageContent } from '@/content/homepage-model';
 import styles from './HeroSection.module.css';
@@ -9,10 +8,9 @@ import styles from './HeroSection.module.css';
 interface HeroSectionProps {
   content: HomepageContent['hero'];
   homePath: string;
-  demoSubmissionEnabled: boolean;
 }
 
-export function HeroSection({ content, homePath, demoSubmissionEnabled }: HeroSectionProps) {
+export function HeroSection({ content, homePath }: HeroSectionProps) {
   return (
     <Section id="product" className={styles.hero} aria-label={content.title}>
       <Container>
@@ -24,23 +22,32 @@ export function HeroSection({ content, homePath, demoSubmissionEnabled }: HeroSe
             </Heading>
             <Text variant="lead">{content.body}</Text>
             <div className={styles.heroActions} role="group" aria-label={content.eyebrow}>
-              <DemoTrigger
+              <ActionLink href={content.primary.href ?? homePath} variant="button-conversion">
-                label={content.primary.label}
+                {content.primary.label}
-                source="hero"
+              </ActionLink>
-                size="large"
-                disabledReason={demoSubmissionEnabled ? undefined : content.primary.disabledReason}
-              />
               <ActionLink
                 href={homePath}
                 variant="button-primary"
-                disabledReason={content.secondary.disabledReason}
+                {...(content.secondary.disabledReason
+                  ? { disabledReason: content.secondary.disabledReason }
+                  : {})}
               >
                 {content.secondary.label}
               </ActionLink>
             </div>
           </div>
           <div className={styles.previewStage}>
-            <ProductPreview {...content.preview} headingLevel={2} />
+            <ResponsiveImage
+              src={content.image.src}
+              alt={content.image.alt}
+              width={content.image.width}
+              height={content.image.height}
+              ratio="wide"
+              priority
+              sizes="(max-width: 767px) 100vw, 48vw"
+              caption={content.preview.caption}
+              className={styles.heroImage}
+            />
           </div>
         </div>
       </Container>

apps/homepage/src/components/homepage/sections/ModulesSection.module.css

@@ -0,0 +1,16 @@
+.modulesLayout {
+  display: grid;
+  grid-template-columns: minmax(18rem, 0.78fr) minmax(0, 1.22fr);
+  align-items: start;
+  gap: var(--space-8);
+}
+
+.modulesImage {
+  object-position: center;
+}
+
+@media (max-width: 1023px) {
+  .modulesLayout {
+    grid-template-columns: 1fr;
+  }
+}

apps/homepage/src/components/homepage/sections/ModulesSection.tsx

@@ -2,7 +2,9 @@ import { Container, Section, Stack } from '@/components/layout/LayoutPrimitives'
 import { FeatureCard } from '@/components/marketing/FeatureCard';
 import { SectionHeader } from '@/components/marketing/SectionHeader';
 import { FeatureGrid } from '@/components/marketing/SectionPatterns';
+import { ResponsiveImage } from '@/components/media/MediaFrame';
 import type { HomepageContent } from '@/content/homepage-model';
+import styles from './ModulesSection.module.css';
 
 export function ModulesSection({ content }: { content: HomepageContent['modules'] }) {
   return (
@@ -10,16 +12,27 @@ export function ModulesSection({ content }: { content: HomepageContent['modules'
       <Container>
         <Stack gap="large">
           <SectionHeader eyebrow={content.eyebrow} title={content.title} body={content.body} />
-          <FeatureGrid>
+          <div className={styles.modulesLayout}>
-            {content.items.map((item) => (
+            <ResponsiveImage
-              <FeatureCard
+              src={content.image.src}
-                key={item.id}
+              alt={content.image.alt}
-                title={item.title}
+              width={content.image.width}
-                description={item.description}
+              height={content.image.height}
-                {...(item.icon ? { icon: item.icon } : {})}
+              ratio="square"
-              />
+              sizes="(max-width: 1023px) 100vw, 38vw"
-            ))}
+              className={styles.modulesImage}
-          </FeatureGrid>
+            />
+            <FeatureGrid>
+              {content.items.map((item) => (
+                <FeatureCard
+                  key={item.id}
+                  title={item.title}
+                  description={item.description}
+                  {...(item.icon ? { icon: item.icon } : {})}
+                />
+              ))}
+            </FeatureGrid>
+          </div>
         </Stack>
       </Container>
     </Section>

apps/homepage/src/components/homepage/sections/ResultsSection.module.css

@@ -1,3 +1,7 @@
+.resultsImage {
+  object-position: center;
+}
+
 .methodList {
   display: grid;
   gap: var(--space-2);

apps/homepage/src/components/homepage/sections/ResultsSection.tsx

@@ -2,6 +2,7 @@ import { Container, Section, Stack } from '@/components/layout/LayoutPrimitives'
 import { FeatureCard } from '@/components/marketing/FeatureCard';
 import { SectionHeader } from '@/components/marketing/SectionHeader';
 import { FeatureGrid } from '@/components/marketing/SectionPatterns';
+import { ResponsiveImage } from '@/components/media/MediaFrame';
 import { Callout } from '@/components/surfaces/Callout';
 import type { HomepageContent } from '@/content/homepage-model';
 import styles from './ResultsSection.module.css';
@@ -12,6 +13,15 @@ export function ResultsSection({ content }: { content: HomepageContent['results'
       <Container>
         <Stack gap="large">
           <SectionHeader eyebrow={content.eyebrow} title={content.title} body={content.body} />
+          <ResponsiveImage
+            src={content.image.src}
+            alt={content.image.alt}
+            width={content.image.width}
+            height={content.image.height}
+            ratio="wide"
+            sizes="(max-width: 767px) 100vw, 86vw"
+            className={styles.resultsImage}
+          />
           <FeatureGrid>
             {content.metrics.map((metric) => (
               <FeatureCard

apps/homepage/src/components/homepage/sections/WorkflowSection.module.css

@@ -0,0 +1,3 @@
+.workflowImage {
+  object-position: center;
+}

apps/homepage/src/components/homepage/sections/WorkflowSection.tsx

@@ -1,7 +1,9 @@
 import { Container, Section, Stack } from '@/components/layout/LayoutPrimitives';
 import { SectionHeader } from '@/components/marketing/SectionHeader';
 import { Workflow } from '@/components/marketing/Workflow';
+import { ResponsiveImage } from '@/components/media/MediaFrame';
 import type { HomepageContent } from '@/content/homepage-model';
+import styles from './WorkflowSection.module.css';
 
 export function WorkflowSection({ content }: { content: HomepageContent['workflow'] }) {
   return (
@@ -9,6 +11,15 @@ export function WorkflowSection({ content }: { content: HomepageContent['workflo
       <Container>
         <Stack gap="large">
           <SectionHeader eyebrow={content.eyebrow} title={content.title} body={content.body} />
+          <ResponsiveImage
+            src={content.image.src}
+            alt={content.image.alt}
+            width={content.image.width}
+            height={content.image.height}
+            ratio="wide"
+            sizes="(max-width: 767px) 100vw, 86vw"
+            className={styles.workflowImage}
+          />
           <Workflow items={content.steps} label={content.title} />
         </Stack>
       </Container>

apps/homepage/src/content/homepage-model.ts

@@ -1,16 +1,21 @@
 import type { ApprovedIconName } from '@/components/foundation/Icon';
 import type { PreviewRow } from '@/components/marketing/ProductPreview';
 import type { HomepageMessages, ShellMessages } from '@/lib/localization/messages';
+import type { Locale } from '@/lib/localization/config';
+import { accountCreateUrl } from '@/lib/account-urls';
 import {
   fleetBandIds,
   pricingPlanIds,
   type FleetBandId,
   type PricingPlanId,
 } from '@/content/pricing-config';
+import { existsSync } from 'node:fs';
+import { join } from 'node:path';
 
 export interface HomepageAction {
   label: string;
-  disabledReason: string;
+  href?: string;
+  disabledReason?: string;
 }
 
 export interface TitledDescription {
@@ -43,6 +48,13 @@ export interface HomepagePricingPlan {
   cta: string;
 }
 
+export interface HomepageImageAsset {
+  src: string;
+  alt: string;
+  width: number;
+  height: number;
+}
+
 export interface HomepageContent {
   hero: {
     eyebrow: string;
@@ -56,6 +68,7 @@ export interface HomepageContent {
       illustrativeLabel: string;
       rows: PreviewRow[];
     };
+    image: HomepageImageAsset;
   };
   trust: {
     eyebrow: string;
@@ -71,12 +84,14 @@ export interface HomepageContent {
     beforeItems: string[];
     afterTitle: string;
     afterItems: string[];
+    image: HomepageImageAsset;
   };
   workflow: {
     eyebrow: string;
     title: string;
     body: string;
     steps: HomepageWorkflowStep[];
+    image: HomepageImageAsset;
   };
   roles: {
     eyebrow: string;
@@ -88,6 +103,7 @@ export interface HomepageContent {
     title: string;
     body: string;
     items: TitledDescription[];
+    image: HomepageImageAsset;
   };
   results: {
     eyebrow: string;
@@ -96,6 +112,7 @@ export interface HomepageContent {
     metrics: TitledDescription[];
     methodTitle: string;
     method: string[];
+    image: HomepageImageAsset;
   };
   integrations: {
     eyebrow: string;
@@ -147,6 +164,7 @@ export interface HomepageContent {
     body: string;
     primary: HomepageAction;
     secondary: HomepageAction;
+    image: HomepageImageAsset;
   };
 }
 
@@ -156,6 +174,42 @@ const moduleIcons: ApprovedIconName[] = ['calendar', 'car', 'check', 'search', '
 const resultIcons: ApprovedIconName[] = ['calendar', 'settings', 'car', 'warning'];
 const securityIcons: ApprovedIconName[] = ['settings', 'search', 'globe', 'warning'];
 
+const homepagePublicPath = join(process.cwd(), 'public');
+const homepagePublicFallbackPath = join(process.cwd(), 'apps/homepage/public');
+const localeAssetSuffix: Record<Locale, string> = {
+  en: 'EN',
+  fr: 'FR',
+  ar: 'AR',
+};
+
+function publicAssetExists(fileName: string): boolean {
+  return existsSync(join(homepagePublicPath, fileName)) || existsSync(join(homepagePublicFallbackPath, fileName));
+}
+
+function localizedImage(
+  subject: string,
+  locale: Locale,
+  extension: 'jpeg' | 'png',
+  dimensions: Pick<HomepageImageAsset, 'width' | 'height'>,
+  alt: string,
+): HomepageImageAsset {
+  const localizedFile = `${subject}_${localeAssetSuffix[locale]}.${extension}`;
+  const hyphenLocalizedFile = `${subject}-${locale}.${extension}`;
+  const defaultFile = `${subject}.${extension}`;
+  const fileName = publicAssetExists(localizedFile)
+    ? localizedFile
+    : publicAssetExists(hyphenLocalizedFile)
+      ? hyphenLocalizedFile
+      : defaultFile;
+
+  return {
+    src: `/${fileName}`,
+    alt,
+    width: dimensions.width,
+    height: dimensions.height,
+  };
+}
+
 function pair(value: readonly string[], context: string): { title: string; description: string } {
   const title = value[0];
   const description = value[1];
@@ -211,6 +265,7 @@ function mapPairs(
 export function buildHomepageContent(
   homepage: HomepageMessages,
   shell: ShellMessages,
+  locale: Locale = 'en',
 ): HomepageContent {
   const pendingReason = shell.states.pendingBody;
 
@@ -219,7 +274,7 @@ export function buildHomepageContent(
       eyebrow: homepage.hero.eyebrow,
       title: homepage.hero.title,
       body: homepage.hero.body,
-      primary: { label: homepage.hero.primary, disabledReason: shell.header.demoUnavailable },
+      primary: { label: homepage.hero.primary, href: accountCreateUrl(locale) },
       secondary: { label: homepage.hero.secondary, disabledReason: pendingReason },
       preview: {
         title: homepage.preview.title,
@@ -242,6 +297,13 @@ export function buildHomepageContent(
           },
         ],
       },
+      image: localizedImage(
+        'dashboard1',
+        locale,
+        'png',
+        { width: 1672, height: 941 },
+        homepage.preview.title,
+      ),
     },
     trust: {
       eyebrow: homepage.trust.eyebrow,
@@ -257,6 +319,13 @@ export function buildHomepageContent(
       beforeItems: homepage.comparison.beforeItems,
       afterTitle: homepage.comparison.afterTitle,
       afterItems: homepage.comparison.afterItems,
+      image: localizedImage(
+        'benefit1',
+        locale,
+        'png',
+        { width: 1672, height: 941 },
+        homepage.comparison.title,
+      ),
     },
     workflow: {
       eyebrow: homepage.workflow.eyebrow,
@@ -266,6 +335,13 @@ export function buildHomepageContent(
         id: `workflow-${index + 1}`,
         ...triple(value, `workflow.steps[${index}]`),
       })),
+      image: localizedImage(
+        'workflow1',
+        locale,
+        'png',
+        { width: 1672, height: 941 },
+        homepage.workflow.title,
+      ),
     },
     roles: {
       eyebrow: homepage.roles.eyebrow,
@@ -277,6 +353,13 @@ export function buildHomepageContent(
       title: homepage.modules.title,
       body: homepage.modules.body,
       items: mapPairs(homepage.modules.items, 'module', moduleIcons),
+      image: localizedImage(
+        'oilchange1',
+        locale,
+        'png',
+        { width: 1254, height: 1254 },
+        homepage.modules.title,
+      ),
     },
     results: {
       eyebrow: homepage.results.eyebrow,
@@ -285,6 +368,13 @@ export function buildHomepageContent(
       metrics: mapPairs(homepage.results.metrics, 'measurement', resultIcons),
       methodTitle: homepage.results.methodTitle,
       method: homepage.results.method,
+      image: localizedImage(
+        'dashboard2',
+        locale,
+        'png',
+        { width: 1672, height: 941 },
+        homepage.results.title,
+      ),
     },
     integrations: {
       eyebrow: homepage.integrations.eyebrow,
@@ -346,8 +436,15 @@ export function buildHomepageContent(
       eyebrow: homepage.final.eyebrow,
       title: homepage.final.title,
       body: homepage.final.body,
-      primary: { label: homepage.final.primary, disabledReason: shell.header.demoUnavailable },
+      primary: { label: homepage.final.primary, href: accountCreateUrl(locale) },
       secondary: { label: homepage.final.secondary, disabledReason: pendingReason },
+      image: localizedImage(
+        'rentaldrivego',
+        locale,
+        'jpeg',
+        { width: 1220, height: 1167 },
+        'RentalDriveGo',
+      ),
     },
   };
 }

apps/homepage/src/lib/account-urls.ts

@@ -0,0 +1,6 @@
+import type { Locale } from '@/lib/localization/config';
+
+export function accountCreateUrl(locale: Locale): string {
+  const params = new URLSearchParams({ lang: locale });
+  return `/dashboard/sign-up?${params.toString()}`;
+}

apps/homepage/src/styles/component-tokens.css

@@ -70,7 +70,7 @@
 }
 
 html[data-theme='dark'] {
-  --text-subdued: var(--color-gray-300);
+  --text-subdued: #a8a29e;
   --status-success-surface: color-mix(in srgb, var(--color-green-700) 24%, var(--color-navy-900));
   --status-success-text: var(--color-green-100);
   --status-warning-surface: color-mix(in srgb, var(--color-amber-800) 30%, var(--color-navy-900));
@@ -92,18 +92,18 @@ html[data-theme='dark'] {
     --surface-elevated: var(--color-navy-850);
     --surface-muted: var(--color-navy-900);
     --surface-strong: var(--color-navy-800);
-    --text-primary: var(--color-blue-50);
+    --text-primary: #f5f5f4;
-    --text-secondary: var(--color-gray-300);
+    --text-secondary: #d6d3d1;
-    --text-subdued: var(--color-gray-300);
+    --text-subdued: #a8a29e;
     --text-inverse: var(--color-navy-950);
     --border-standard: var(--color-navy-800);
-    --border-strong: var(--color-gray-600);
+    --border-strong: #1d4ed8;
-    --interactive-primary: var(--color-blue-200);
+    --interactive-primary: var(--color-action-primary);
-    --interactive-primary-hover: var(--color-blue-100);
+    --interactive-primary-hover: var(--color-action-primary-hover);
     --interactive-conversion: var(--color-orange-400);
     --interactive-conversion-hover: var(--color-orange-100);
-    --link-default: var(--color-blue-200);
+    --link-default: var(--color-action-primary);
-    --link-hover: var(--color-blue-100);
+    --link-hover: var(--color-action-primary-hover);
     --focus-ring: var(--color-orange-400);
     --status-success-surface: color-mix(in srgb, var(--color-green-700) 24%, var(--color-navy-900));
     --status-success-text: var(--color-green-100);

apps/homepage/src/styles/tokens.css

@@ -10,11 +10,11 @@
   --color-orange-400: #fb923c;
   --color-orange-600: #ea580c;
   --color-orange-700: #c2410c;
-  --color-navy-950: #081426;
+  --color-navy-950: #172554;
-  --color-navy-900: #0d1b2e;
+  --color-navy-900: #1b3268;
-  --color-navy-850: #11233b;
+  --color-navy-850: #1e3a8a;
-  --color-navy-800: #162b46;
+  --color-navy-800: #1e40af;
-  --color-gray-25: #fbfdff;
+  --color-gray-25: #fafafa;
   --color-gray-50: #f7f9fc;
   --color-gray-100: #eef2f7;
   --color-gray-200: #dbe3ed;
@@ -77,8 +77,8 @@ html[data-theme='light'] {
   --color-canvas: var(--color-gray-25);
   --color-surface: #ffffff;
   --color-surface-raised: #ffffff;
-  --color-surface-muted: #f2f6fb;
+  --color-surface-muted: #f4f4f5;
-  --color-surface-strong: #e8f0fa;
+  --color-surface-strong: #e8e8e8;
   --color-text: #102035;
   --color-text-muted: #52647a;
   --color-border: #d8e2ee;
@@ -98,19 +98,19 @@ html[data-theme='dark'] {
   --color-canvas: var(--color-navy-950);
   --color-surface: var(--color-navy-900);
   --color-surface-raised: var(--color-navy-850);
-  --color-surface-muted: #0b1a2d;
+  --color-surface-muted: #15214a;
-  --color-surface-strong: #172d48;
+  --color-surface-strong: var(--color-navy-800);
-  --color-text: #eef5ff;
+  --color-text: #f5f5f4;
-  --color-text-muted: #adbed2;
+  --color-text-muted: #d6d3d1;
-  --color-border: #263c56;
+  --color-border: var(--color-navy-800);
-  --color-border-strong: #3a536e;
+  --color-border-strong: #1d4ed8;
-  --color-action-primary: #76a9ff;
+  --color-action-primary: #2e50f1;
-  --color-action-primary-hover: #9bc2ff;
+  --color-action-primary-hover: #1e3de0;
   --color-action-conversion: var(--color-orange-400);
   --color-action-conversion-hover: #fdba74;
   --color-focus: var(--color-orange-400);
   --color-on-inverse: var(--color-navy-950);
-  --color-soft-blue: #10284a;
+  --color-soft-blue: var(--color-navy-850);
   --color-soft-orange: #3a2015;
   --shadow-color: rgba(0, 0, 0, 0.36);
   color-scheme: dark;

apps/homepage/tests/unit/homepage-content.test.ts

@@ -13,7 +13,7 @@ describe('homepage content model', () => {
     ['fr', frHomepage, frShell],
     ['ar', arHomepage, arShell],
   ] as const)('builds complete %s route content', (_locale, homepage, shell) => {
-    const content = buildHomepageContent(homepage, shell);
+    const content = buildHomepageContent(homepage, shell, _locale);
 
     expect(content.hero.title).toBeTruthy();
     expect(content.trust.items).toHaveLength(4);
@@ -28,7 +28,10 @@ describe('homepage content model', () => {
   it('keeps unresolved conversion destinations disabled', () => {
     const content = buildHomepageContent(enHomepage, enShell);
 
-    expect(content.hero.primary.disabledReason).toBe(enShell.header.demoUnavailable);
+    expect(content.hero.primary.href).toBe('/dashboard/sign-up?lang=en');
+    expect(content.hero.primary.disabledReason).toBeUndefined();
+    expect(content.final.primary.href).toBe('/dashboard/sign-up?lang=en');
+    expect(content.final.primary.disabledReason).toBeUndefined();
     expect(content.pricing.actionDisabledReason).toBe(enShell.states.pendingBody);
     expect(content.final.secondary.disabledReason).toBe(enShell.states.pendingBody);
   });

apps/storefront/src/app/globals.css

@@ -8,7 +8,7 @@ body {
 
 html.dark body {
   background-image:
-    linear-gradient(180deg, #0a1535 0%, #0d1f52 35%, #091228 100%);
+    linear-gradient(180deg, #172554 0%, #1b3068 35%, #0f1a40 100%);
 }
 
 .shell {
@@ -22,20 +22,20 @@ html.dark body {
 }
 
 html.dark .card {
-  border-color: rgb(30 60 140 / 0.40);
+  border-color: rgb(30 64 175 / 0.40);
-  background-color: rgb(11 25 55 / 0.72);
+  background-color: rgb(23 37 84 / 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%);
+    linear-gradient(180deg, #ffffff 0%, #fafafa 28%, #f5f5f5 58%, #ffffff 100%);
 }
 
 html.dark .site-page {
   @apply text-slate-100;
   background-image:
-    linear-gradient(180deg, #0a1535 0%, #0d1f52 35%, #091228 100%);
+    linear-gradient(180deg, #172554 0%, #1b3068 35%, #0f1a40 100%);
 }
 
 .site-glow {
@@ -47,7 +47,7 @@ html.dark .site-page {
 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%);
+    radial-gradient(circle at top right, rgba(30, 64, 175, 0.18), transparent 26%);
 }
 
 .site-section {
@@ -61,26 +61,26 @@ html.dark .site-glow {
 }
 
 html.dark .site-panel {
-  border-color: rgb(30 60 140 / 0.40);
+  border-color: rgb(30 64 175 / 0.40);
-  background-color: rgb(11 25 55 / 0.72);
+  background-color: rgb(23 37 84 / 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%);
+  background-image: linear-gradient(160deg, #fafafa 0%, #f5f5f5 100%);
 }
 
 html.dark .site-panel-muted {
-  border-color: rgb(30 60 140 / 0.40);
+  border-color: rgb(30 64 175 / 0.40);
-  background-image: linear-gradient(160deg, #0c1830 0%, #10203e 100%);
+  background-image: linear-gradient(160deg, #172554 0%, #1b3068 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);
+  border-color: rgb(20 45 95 / 0.8);
-  background-color: rgb(10 25 75);
+  background-color: #172554;
 }
 
 html.dark .site-panel-contrast {
@@ -104,5 +104,5 @@ html.dark .site-panel-contrast {
 }
 
 .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;
+  @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-[#2e50f1] dark:bg-[#2e50f1]/30 dark:text-[#1e3de0] dark:hover:border-[#1e3de0] dark:hover:text-white;
 }

apps/storefront/src/app/layout.tsx

@@ -8,9 +8,9 @@ export const metadata: Metadata = {
   title: 'RentalDriveGo Marketplace',
   description: 'Discover vehicles from trusted rental companies.',
   icons: {
-    icon: '/rentalcardrive.png',
+    icon: '/rentaldrivego.png',
     shortcut: '/favicon.ico',
-    apple: '/rentalcardrive.png',
+    apple: '/rentaldrivego.png',
   },
 }
 

apps/storefront/src/components/MarketplaceHeader.tsx

@@ -106,11 +106,12 @@ export default function MarketplaceHeader({
         <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"
+              src="/rentaldrivego.png"
               alt="RentalDriveGo"
               width={36}
               height={36}
               priority
+              unoptimized
               className="h-8 w-8 rounded-md object-contain sm:h-9 sm:w-9"
             />
             <span>RentalDriveGo</span>

dashboard/src/app/sign-up/[[...sign-up]]/SignUpForm.tsx

@@ -110,11 +110,12 @@ export default function SignUpForm() {
           <div className="w-full max-w-md text-center">
             <div className="flex justify-center mb-6">
               <Image
-                src="/dashboard/rentalcardrive.png"
+                src="/dashboard/rentaldrivego.png"
                 alt="RentalDriveGo"
                 width={80}
                 height={80}
                 priority
+                unoptimized
                 className="h-20 w-20 rounded-[1.5rem] border border-stone-200/80 bg-white/85 p-1.5 shadow-sm dark:border-blue-800 dark:bg-blue-950/80"
               />
             </div>
@@ -146,11 +147,12 @@ export default function SignUpForm() {
             <div className="flex justify-center">
               <a href={marketplaceUrl} target="_top">
                 <Image
-                  src="/dashboard/rentalcardrive.png"
+                  src="/dashboard/rentaldrivego.png"
                   alt="RentalDriveGo"
                   width={80}
                   height={80}
                   priority
+                  unoptimized
                   className="h-20 w-20 rounded-[1.5rem] border border-stone-200/80 bg-white/85 p-1.5 shadow-sm dark:border-blue-800 dark:bg-blue-950/80"
                 />
               </a>

dashboard/src/app/verify-email/page.tsx

@@ -75,11 +75,12 @@ export default function VerifyEmailPage() {
         <div className="w-full max-w-md text-center">
           <div className="flex justify-center mb-6">
             <Image
-              src="/dashboard/rentalcardrive.png"
+              src="/dashboard/rentaldrivego.png"
               alt="RentalDriveGo"
               width={80}
               height={80}
               priority
+              unoptimized
               className="h-20 w-20 rounded-[1.5rem] border border-stone-200/80 bg-white/85 p-1.5 shadow-sm dark:border-blue-800 dark:bg-blue-950/80"
             />
           </div>

dashboard/src/components/public/PublicNavbar.tsx

@@ -7,7 +7,7 @@ import { useEffect, useRef, useState } from 'react'
 import { useDashboardI18n } from '@/components/I18nProvider'
 import { marketplaceUrl } from '@/lib/urls'
 
-const DASHBOARD_LOGO_SRC = '/dashboard/rentalcardrive.png'
+const DASHBOARD_LOGO_SRC = '/dashboard/rentaldrivego.png'
 
 const languageMeta = {
   en: { flag: '🇺🇸', shortLabel: 'EN' },
@@ -126,6 +126,7 @@ export default function PublicNavbar() {
             width={36}
             height={36}
             priority
+            unoptimized
             className="h-8 w-8 rounded-md object-contain sm:h-9 sm:w-9"
           />
           <span>RentalDriveGo</span>

homepage/src/app/[locale]/layout.tsx

@@ -27,8 +27,8 @@ export async function generateMetadata({ params }: { params: Promise<{ locale: s
   const { locale } = await params;
   return {
     icons: {
-      icon: '/rentaldrivego.jpeg',
+      icon: '/rentaldrivego.png',
-      apple: '/rentaldrivego.jpeg',
+      apple: '/rentaldrivego.png',
     },
   };
 }

homepage/src/components/app-shell/BrandLink.tsx

@@ -15,12 +15,13 @@ export function BrandLink({ locale, label }: { locale: Locale; label: string })
       aria-current={routeIdFromPathname(pathname) === 'home' ? 'page' : undefined}
     >
       <Image
-        src="/rentaldrivego.jpeg"
+        src="/rentaldrivego.png"
         alt=""
         width={36}
         height={36}
         className={styles.mark}
         priority
+        unoptimized
       />
       <span className={styles.brandName}>RentalDriveGo</span>
     </a>

homepage/src/components/auth/AuthShell.tsx

@@ -29,11 +29,12 @@ export function AuthShell({ locale, title, subtitle, children }: AuthShellProps)
         <div style={{ marginBottom: '2rem', textAlign: 'center' }}>
           <a href={localizedPath('home', locale)}>
             <Image
-              src="/rentaldrivego.jpeg"
+              src="/rentaldrivego.png"
               alt="RentalDriveGo"
               width={96}
               height={96}
               priority
+              unoptimized
               style={{
                 borderRadius: '1.5rem',
                 border: '1px solid var(--color-border)',