ng/feat/landing-page/optimize

frontend/app/[locale]/page.tsx

@@ -1,9 +1,10 @@
 import { getTranslations } from 'next-intl/server';
+import { Suspense } from 'react';
 
 import FeaturesHeroSection from '@/components/home/FeaturesHeroSection';
 import HomePageScroll from '@/components/home/HomePageScroll';
 import WelcomeHeroSection from '@/components/home/WelcomeHeroSection';
-import Footer from '@/components/shared/Footer';
+import LazyFooter from '@/components/shared/LazyFooter';
 
 export async function generateMetadata({
   params,
@@ -75,9 +76,11 @@ export default function Home() {
         data-home-step
         className="min-h-[calc(100dvh-4rem)] shrink-0 snap-start [scroll-snap-stop:always]"
       >
-        <FeaturesHeroSection />
+        <Suspense fallback={null}>
+          <FeaturesHeroSection />
+        </Suspense>
       </div>
-      <Footer forceVisible />
+      <LazyFooter forceVisible />
     </HomePageScroll>
   );
 }

frontend/components/home/FeaturesHeroSection.tsx

@@ -1,17 +1,14 @@
-'use client';
-
 import { BrainCircuit, MessageCircleQuestion, TrendingUp } from 'lucide-react';
-import { useTranslations } from 'next-intl';
-import * as React from 'react';
+import { getTranslations } from 'next-intl/server';
 
 import { DynamicGridBackground } from '@/components/shared/DynamicGridBackground';
 import { Link } from '@/i18n/routing';
 
 import { FlipCardQA } from './FlipCardQA';
 import { FloatingCode } from './FloatingCode';
 
-export default function FeaturesHeroSection() {
-  const t = useTranslations('homepage');
+export default async function FeaturesHeroSection() {
+  const t = await getTranslations('homepage');
 
   return (
     <DynamicGridBackground

frontend/components/home/InteractiveCTAButton.tsx

@@ -22,7 +22,6 @@ export const InteractiveCTAButton = React.forwardRef<HTMLAnchorElement>(
 
     const [currentText, setCurrentText] = useState(t('cta'));
     const [variantIndex, setVariantIndex] = useState(0);
-    const [isFirstRender, setIsFirstRender] = useState(true);
 
     const textVariants = [
       t('cta'),
@@ -36,10 +35,6 @@ export const InteractiveCTAButton = React.forwardRef<HTMLAnchorElement>(
       t('ctaVariants.8'),
     ];
 
-    useEffect(() => {
-      setIsFirstRender(false);
-    }, []);
-
     const x = useMotionValue(0);
     const y = useMotionValue(0);
 

frontend/components/home/WelcomeHeroBackground.tsx

@@ -1,5 +1,3 @@
-import React from 'react';
-
 export function WelcomeHeroBackground() {
   return (
     <>

frontend/components/shared/LazyFooter.tsx

@@ -0,0 +1,35 @@
+'use client';
+
+import dynamic from 'next/dynamic';
+import { useEffect, useRef, useState } from 'react';
+
+const Footer = dynamic(() => import('./Footer'));
+
+export default function LazyFooter(props: { forceVisible?: boolean }) {
+  const sentinelRef = useRef<HTMLDivElement | null>(null);
+  const [nearViewport, setNearViewport] = useState(false);
+
+  useEffect(() => {
+    const node = sentinelRef.current;
+    if (!node) return;
+
+    const observer = new IntersectionObserver(
+      ([entry]) => {
+        if (entry.isIntersecting) {
+          setNearViewport(true);
+          observer.disconnect();
+        }
+      },
+      { rootMargin: '300px' }
+    );
+
+    observer.observe(node);
+    return () => observer.disconnect();
+  }, []);
+
+  if (!nearViewport) {
+    return <div ref={sentinelRef} aria-hidden="true" />;
+  }
+
+  return <Footer {...props} />;
+}