perf(bundle): defer below-fold marketing sections + admin charts via next/dynamic

Closes #87.

apps/marketing — Hero stays static (LCP anchor); SocialProof, Features,
HowItWorks, Pricing, FAQ, CTA, StickyCTA load via next/dynamic with
SSR enabled so markup ships server-rendered but each section's GSAP +
ScrollTrigger code splits into its own chunk and loads on idle.

apps/admin — GrowthArea + CountBar are recharts-only (~60kb gz),
browser-only by nature. Switched to next/dynamic with ssr:false +
animated skeleton fallback so the chart engine never blocks first
byte.

Author: f-amine

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

@@ -7,9 +7,40 @@ import {
 	CardTitle,
 } from "@starter-saas/ui/components/card";
 import { Building2, CreditCard, TrendingUp, Users } from "lucide-react";
-import { GrowthArea } from "@/components/charts/area-chart";
-import { CountBar } from "@/components/charts/bar-chart";
+import dynamic from "next/dynamic";
 import { PageHeader } from "@/components/layout/page-header";
+
+// Recharts is ~60kb gz and only runs in the browser — defer it off the
+// critical path so first-byte for admins doesn't ship the chart engine.
+const GrowthArea = dynamic(
+	() =>
+		import("@/components/charts/area-chart").then((m) => ({
+			default: m.GrowthArea,
+		})),
+	{
+		ssr: false,
+		loading: () => <ChartSkeleton />,
+	},
+);
+const CountBar = dynamic(
+	() =>
+		import("@/components/charts/bar-chart").then((m) => ({
+			default: m.CountBar,
+		})),
+	{
+		ssr: false,
+		loading: () => <ChartSkeleton />,
+	},
+);
+
+function ChartSkeleton() {
+	return (
+		<div
+			aria-hidden
+			className="h-[260px] w-full animate-pulse rounded-md bg-muted/40"
+		/>
+	);
+}
 import {
 	fetchAuditByAction,
 	fetchKpis,

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

@@ -1,13 +1,47 @@
+import dynamic from "next/dynamic";
 import { MarketingFooter } from "@/components/marketing/footer";
 import { MarketingHeader } from "@/components/marketing/header";
-import { CTA } from "@/components/marketing/sections/cta";
-import { FAQ } from "@/components/marketing/sections/faq";
-import { Features } from "@/components/marketing/sections/features";
 import { Hero } from "@/components/marketing/sections/hero";
-import { HowItWorks } from "@/components/marketing/sections/how-it-works";
-import { Pricing } from "@/components/marketing/sections/pricing";
-import { SocialProof } from "@/components/marketing/sections/social-proof";
-import { StickyCTA } from "@/components/marketing/sticky-cta";
+
+// Hero stays static — above the fold, anchors LCP. Below-fold sections
+// each pull GSAP + ScrollTrigger (~41kb gz) and don't paint until the
+// user scrolls; lazy them with SSR so the markup ships server-rendered
+// (for SEO + no-JS) but the gsap bundle defers to idle.
+const SocialProof = dynamic(() =>
+	import("@/components/marketing/sections/social-proof").then((m) => ({
+		default: m.SocialProof,
+	})),
+);
+const Features = dynamic(() =>
+	import("@/components/marketing/sections/features").then((m) => ({
+		default: m.Features,
+	})),
+);
+const HowItWorks = dynamic(() =>
+	import("@/components/marketing/sections/how-it-works").then((m) => ({
+		default: m.HowItWorks,
+	})),
+);
+const Pricing = dynamic(() =>
+	import("@/components/marketing/sections/pricing").then((m) => ({
+		default: m.Pricing,
+	})),
+);
+const FAQ = dynamic(() =>
+	import("@/components/marketing/sections/faq").then((m) => ({
+		default: m.FAQ,
+	})),
+);
+const CTA = dynamic(() =>
+	import("@/components/marketing/sections/cta").then((m) => ({
+		default: m.CTA,
+	})),
+);
+const StickyCTA = dynamic(() =>
+	import("@/components/marketing/sticky-cta").then((m) => ({
+		default: m.StickyCTA,
+	})),
+);
 
 export default function HomePage() {
 	return (