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

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>