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

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',
-      apple: '/rentaldrivego.jpeg',
+      icon: '/rentaldrivego.png',
+      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
-              label={messages.header.demo}
-              source="mobile-header"
-              fullWidth
-              disabledReason={demoEnabled ? undefined : messages.header.demoUnavailable}
-            />
+            <ActionLink href={accountCreateUrl(locale)} variant="button-conversion">
+              {messages.header.demo}
+            </ActionLink>
           </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
-                  label={footer.links.demo}
-                  source="footer"
-                  size="small"
-                  disabledReason={demoEnabled ? undefined : messages.header.demoUnavailable}
-                />
+                <a href={accountCreateUrl(locale)}>{footer.links.demo}</a>
               </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
-            label={messages.header.demo}
-            source="header"
-            size="small"
-            disabledReason={demoEnabled ? undefined : messages.header.demoUnavailable}
-          />
+          <ActionLink href={accountCreateUrl(locale)} variant="button-conversion">
+            {messages.header.demo}
+          </ActionLink>
         </div>
 
         <div className={styles.mobileActions}>
-          <DemoTrigger
-            label={messages.header.demo}
-            source="mobile-header"
-            size="small"
+          <ActionLink
+            href={accountCreateUrl(locale)}
+            variant="button-conversion"
             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
-          eyebrow={content.eyebrow}
-          title={content.title}
-          body={content.body}
-          primary={content.primary}
-          secondary={content.secondary}
-          primaryNode={
-            <DemoTrigger
-              label={content.primary.label}
-              source="final-cta"
-              size="large"
-              disabledReason={demoSubmissionEnabled ? undefined : content.primary.disabledReason}
-            />
-          }
-        />
+        <div className={styles.finalLayout}>
+          <ResponsiveImage
+            src={content.image.src}
+            alt={content.image.alt}
+            width={content.image.width}
+            height={content.image.height}
+            ratio="square"
+            sizes="(max-width: 767px) 52vw, 14rem"
+            className={styles.brandImage}
+          />
+          <CTA
+            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
-                label={content.primary.label}
-                source="hero"
-                size="large"
-                disabledReason={demoSubmissionEnabled ? undefined : content.primary.disabledReason}
-              />
+              <ActionLink href={content.primary.href ?? homePath} variant="button-conversion">
+                {content.primary.label}
+              </ActionLink>
               <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>
-            {content.items.map((item) => (
-              <FeatureCard
-                key={item.id}
-                title={item.title}
-                description={item.description}
-                {...(item.icon ? { icon: item.icon } : {})}
-              />
-            ))}
-          </FeatureGrid>
+          <div className={styles.modulesLayout}>
+            <ResponsiveImage
+              src={content.image.src}
+              alt={content.image.alt}
+              width={content.image.width}
+              height={content.image.height}
+              ratio="square"
+              sizes="(max-width: 1023px) 100vw, 38vw"
+              className={styles.modulesImage}
+            />
+            <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-secondary: var(--color-gray-300);
-    --text-subdued: var(--color-gray-300);
+    --text-primary: #f5f5f4;
+    --text-secondary: #d6d3d1;
+    --text-subdued: #a8a29e;
     --text-inverse: var(--color-navy-950);
     --border-standard: var(--color-navy-800);
-    --border-strong: var(--color-gray-600);
-    --interactive-primary: var(--color-blue-200);
-    --interactive-primary-hover: var(--color-blue-100);
+    --border-strong: #1d4ed8;
+    --interactive-primary: var(--color-action-primary);
+    --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-hover: var(--color-blue-100);
+    --link-default: var(--color-action-primary);
+    --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-900: #0d1b2e;
-  --color-navy-850: #11233b;
-  --color-navy-800: #162b46;
-  --color-gray-25: #fbfdff;
+  --color-navy-950: #172554;
+  --color-navy-900: #1b3268;
+  --color-navy-850: #1e3a8a;
+  --color-navy-800: #1e40af;
+  --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-strong: #e8f0fa;
+  --color-surface-muted: #f4f4f5;
+  --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-strong: #172d48;
-  --color-text: #eef5ff;
-  --color-text-muted: #adbed2;
-  --color-border: #263c56;
-  --color-border-strong: #3a536e;
-  --color-action-primary: #76a9ff;
-  --color-action-primary-hover: #9bc2ff;
+  --color-surface-muted: #15214a;
+  --color-surface-strong: var(--color-navy-800);
+  --color-text: #f5f5f4;
+  --color-text-muted: #d6d3d1;
+  --color-border: var(--color-navy-800);
+  --color-border-strong: #1d4ed8;
+  --color-action-primary: #2e50f1;
+  --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;