lgtm

frontend/src/components/home/HomePage.tsx

@@ -1,8 +1,8 @@
-import { useState, useEffect, useRef } from 'react';
+import { lazy, Suspense, useState, useEffect, useRef } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useFadeInRef } from '../../hooks/useFadeIn';
 import HexCanvas from './HexCanvas';
-import ProductShowcase from './ProductShowcase';
+import HomeFinalCta from './HomeFinalCta';
 import BottomIllustration from './BottomIllustration';
 import { TickerValue } from '../ui/TickerValue';
 import { ChevronIcon, LogoIcon, PlayIcon } from '../ui/icons';
@@ -23,6 +23,16 @@ const PRODUCT_DEMO_VIDEO_BY_LANGUAGE: Record<string, string> = {
   hi: 'recording-hi',
 };
 const PRODUCT_DEMO_SECTION_ID = 'product-demo-video';
+const ProductShowcase = lazy(() => import('./ProductShowcase'));
+
+function ProductShowcaseFallback({ className = '' }: { className?: string }) {
+  return (
+    <div
+      className={`min-h-[28rem] rounded-lg border border-white/10 bg-navy-950/35 dark:bg-navy-950/45 ${className}`}
+      aria-hidden="true"
+    />
+  );
+}
 
 function getProductDemoSlug(language: string | undefined): string {
   const code = language?.toLowerCase().split('-')[0] ?? 'en';
@@ -347,7 +357,9 @@ export default function HomePage({
                   </div>
                 </div>
               </div>
-              <ProductShowcase />
+              <Suspense fallback={<ProductShowcaseFallback />}>
+                <ProductShowcase />
+              </Suspense>
             </div>
           </div>
           <button
@@ -516,22 +528,8 @@ export default function HomePage({
 
             {/* The real cost CTA */}
             <div className={`${HOME_SECTION_CONTAINER_CLASS} pt-8 md:pt-14 pb-12`}>
-              <div ref={ctaRef} className="fade-in-section text-center max-w-4xl mx-auto">
-                <h2 className={`${HOME_SECTION_HEADING_CLASS} mb-4 leading-snug`}>
-                  {t('home.ctaTitle')}
-                </h2>
-                <p className={`${HOME_BODY_CLASS} mb-8 max-w-xl mx-auto`}>
-                  {t('home.ctaDescription')}
-                </p>
-                <button
-                  onClick={() => {
-                    trackEvent('CTA Click', { location: 'bottom', label: 'explore_map' });
-                    onOpenDashboard();
-                  }}
-                  className={`w-full sm:w-auto px-8 py-4 ${HOME_PRIMARY_BUTTON_CLASS}`}
-                >
-                  {t('home.exploreTheMap')}
-                </button>
+              <div ref={ctaRef} className="fade-in-section">
+                <HomeFinalCta onOpenDashboard={onOpenDashboard} />
               </div>
             </div>