perf: Convert all section components to LazyMotion for 60KB bundle re…

app/page.tsx

@@ -1,19 +1,18 @@
-import { Hero } from "@/components/sections";
-import dynamic from "next/dynamic";
+import {
+  Hero,
+  ValueProposition,
+  Services,
+  HowWeWork,
+  EngagementModels,
+  FeaturedCaseStudies,
+  Testimonials,
+  Stats,
+  AboutTeaser,
+  FAQ,
+  CTA,
+} from "@/components/sections";
 import { getNotionFeaturedCaseStudies } from "@/lib/notion-case-studies";
 
-// Dynamically import below-fold sections for better initial bundle size
-const ValueProposition = dynamic(() => import("@/components/sections").then(mod => ({ default: mod.ValueProposition })));
-const Services = dynamic(() => import("@/components/sections").then(mod => ({ default: mod.Services })));
-const HowWeWork = dynamic(() => import("@/components/sections").then(mod => ({ default: mod.HowWeWork })));
-const EngagementModels = dynamic(() => import("@/components/sections").then(mod => ({ default: mod.EngagementModels })));
-const FeaturedCaseStudies = dynamic(() => import("@/components/sections").then(mod => ({ default: mod.FeaturedCaseStudies })));
-const Testimonials = dynamic(() => import("@/components/sections").then(mod => ({ default: mod.Testimonials })));
-const Stats = dynamic(() => import("@/components/sections").then(mod => ({ default: mod.Stats })));
-const AboutTeaser = dynamic(() => import("@/components/sections").then(mod => ({ default: mod.AboutTeaser })));
-const FAQ = dynamic(() => import("@/components/sections").then(mod => ({ default: mod.FAQ })));
-const CTA = dynamic(() => import("@/components/sections").then(mod => ({ default: mod.CTA })));
-
 // Force static generation at build time
 export const dynamic = "force-static";
 export const revalidate = false;

components/sections/Careers.tsx

@@ -1,7 +1,7 @@
 "use client";
 
 import Link from "next/link";
-import { motion } from "framer-motion";
+import { LazyMotion, domAnimation, m } from "framer-motion";
 
 const jobOpenings = [
   {
@@ -35,7 +35,8 @@ const jobOpenings = [
 
 export function Careers() {
   return (
-    <section className="relative py-16 sm:py-24 overflow-hidden bg-surface">
+    <LazyMotion features={domAnimation} strict>
+      <section className="relative py-16 sm:py-24 overflow-hidden bg-surface">
       {/* Hexagon pattern */}
       <div
         className="absolute inset-0 opacity-[0.02]"
@@ -45,7 +46,7 @@ export function Careers() {
       />
 
       <div className="relative max-w-6xl mx-auto px-4 sm:px-6">
-        <motion.div
+        <m.div
           initial={{ opacity: 0, y: 20 }}
           whileInView={{ opacity: 1, y: 0 }}
           viewport={{ once: true }}
@@ -62,11 +63,11 @@ export function Careers() {
             We&apos;re looking for talented engineers who are passionate about
             AI and want to work on challenging problems with real impact.
           </p>
-        </motion.div>
+        </m.div>
 
         <div className="grid md:grid-cols-3 gap-6 lg:gap-8 mb-10 sm:mb-12">
           {jobOpenings.map((job, idx) => (
-            <motion.div
+            <m.div
               key={job.id}
               initial={{ opacity: 0, y: 20 }}
               whileInView={{ opacity: 1, y: 0 }}
@@ -151,12 +152,12 @@ export function Careers() {
                   />
                 </svg>
               </Link>
-            </motion.div>
+            </m.div>
           ))}
         </div>
 
         {/* CTA to careers page */}
-        <motion.div
+        <m.div
           initial={{ opacity: 0, y: 20 }}
           whileInView={{ opacity: 1, y: 0 }}
           viewport={{ once: true }}
@@ -182,8 +183,9 @@ export function Careers() {
               />
             </svg>
           </Link>
-        </motion.div>
+        </m.div>
       </div>
     </section>
+    </LazyMotion>
   );
 }

components/sections/ClientLogos.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { motion } from "framer-motion";
+import { LazyMotion, domAnimation, m } from "framer-motion";
 import Image from "next/image";
 
 const clients = [
@@ -27,7 +27,8 @@ const clients = [
 
 export function ClientLogos() {
   return (
-    <div className="mt-10 sm:mt-12">
+    <LazyMotion features={domAnimation} strict>
+      <div className="mt-10 sm:mt-12">
       <p className="text-sm text-text-muted mb-6 text-center">
         Trusted by innovative teams
       </p>
@@ -40,7 +41,7 @@ export function ClientLogos() {
             "linear-gradient(to right, transparent 0%, white 25%, white 75%, transparent 100%)",
         }}
       >
-        <motion.div
+        <m.div
           className="flex items-center gap-12 md:gap-16"
           animate={{
             x: [0, -150 * clients.length],
@@ -69,8 +70,9 @@ export function ClientLogos() {
               />
             </div>
           ))}
-        </motion.div>
+        </m.div>
       </div>
     </div>
+    </LazyMotion>
   );
 }

components/sections/EngagementModels.tsx

@@ -86,8 +86,7 @@ const engagementModels = [
 export function EngagementModels() {
   return (
     <LazyMotion features={domAnimation} strict>
-    <LazyMotion features={domAnimation} strict>
-    <section className="relative py-16 sm:py-24 overflow-hidden bg-surface">
+      <section className="relative py-16 sm:py-24 overflow-hidden bg-surface">
       {/* Gradient orbs for depth */}
       <div className="absolute top-0 right-1/4 w-[500px] h-[500px] bg-accent-secondary/[0.05] rounded-full blur-[120px] pointer-events-none" />
       <div className="absolute bottom-0 left-1/4 w-[500px] h-[500px] bg-accent/[0.05] rounded-full blur-[120px] pointer-events-none" />
@@ -102,7 +101,7 @@ export function EngagementModels() {
 
       <div className="relative max-w-7xl mx-auto px-4 sm:px-6">
         {/* Section Header */}
-        <motion.div
+        <m.div
           initial={{ opacity: 0, y: 20 }}
           whileInView={{ opacity: 1, y: 0 }}
           viewport={{ once: true }}
@@ -120,11 +119,11 @@ export function EngagementModels() {
             objectives. Scale up, scale down, or pivot—without renegotiating
             contracts.
           </p>
-        </motion.div>
+        </m.div>
 
         <div className="grid md:grid-cols-3 gap-6 lg:gap-8">
           {engagementModels.map((model, idx) => (
-            <motion.div
+            <m.div
               key={model.title}
               initial={{ opacity: 0, y: 20 }}
               whileInView={{ opacity: 1, y: 0 }}
@@ -198,7 +197,7 @@ export function EngagementModels() {
                   </div>
                 </div>
               </div>
-            </motion.div>
+            </m.div>
           ))}
         </div>
       </div>

components/sections/FeaturedCaseStudies.tsx

@@ -12,8 +12,7 @@ interface FeaturedCaseStudiesProps {
 export function FeaturedCaseStudies({ caseStudies }: FeaturedCaseStudiesProps) {
   return (
     <LazyMotion features={domAnimation} strict>
-    <LazyMotion features={domAnimation} strict>
-    <section className="relative py-16 sm:py-24 bg-base overflow-hidden">
+      <section className="relative py-16 sm:py-24 bg-base overflow-hidden">
       {/* Background pattern */}
       <div
         className="absolute inset-0 opacity-[0.03]"
@@ -24,7 +23,7 @@ export function FeaturedCaseStudies({ caseStudies }: FeaturedCaseStudiesProps) {
 
       <div className="relative z-10 max-w-6xl mx-auto px-4 sm:px-6">
         {/* Section Header */}
-        <motion.div
+        <m.div
           initial={{ opacity: 0, y: 20 }}
           whileInView={{ opacity: 1, y: 0 }}
           viewport={{ once: true }}
@@ -58,7 +57,7 @@ export function FeaturedCaseStudies({ caseStudies }: FeaturedCaseStudiesProps) {
               />
             </svg>
           </Link>
-        </motion.div>
+        </m.div>
 
         {/* Case Studies Grid */}
         <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-6 lg:gap-8">
@@ -74,7 +73,7 @@ export function FeaturedCaseStudies({ caseStudies }: FeaturedCaseStudiesProps) {
         </div>
 
         {/* Bottom CTA */}
-        <motion.div
+        <m.div
           initial={{ opacity: 0, y: 20 }}
           whileInView={{ opacity: 1, y: 0 }}
           viewport={{ once: true }}
@@ -100,7 +99,7 @@ export function FeaturedCaseStudies({ caseStudies }: FeaturedCaseStudiesProps) {
               />
             </svg>
           </Link>
-        </motion.div>
+        </m.div>
       </div>
     </section>
     </LazyMotion>

components/sections/Hero.tsx

@@ -1,18 +1,19 @@
 "use client";
 
 import Link from "next/link";
-import { motion } from "framer-motion";
+import { LazyMotion, domAnimation, m } from "framer-motion";
 import { ClientLogos } from "./ClientLogos";
 import { CalButton } from "@/components/CalButton";
 
 export function Hero() {
   return (
-    <section className="relative min-h-screen flex items-center justify-center overflow-hidden bg-base will-change-transform">
-      {/* Animated gradient background */}
-      <div className="absolute inset-0 bg-gradient-to-b from-surface via-base to-base" />
+    <LazyMotion features={domAnimation} strict>
+      <section className="relative min-h-screen flex items-center justify-center overflow-hidden bg-base will-change-transform">
+        {/* Animated gradient background */}
+        <div className="absolute inset-0 bg-gradient-to-b from-surface via-base to-base" />
 
-      {/* Large ambient glow - creates depth */}
-      <motion.div
+        {/* Large ambient glow - creates depth */}
+        <m.div
         initial={{ opacity: 0 }}
         animate={{ opacity: 1 }}
         transition={{ duration: 0.8 }}
@@ -22,15 +23,15 @@ export function Hero() {
         <div className="absolute top-1/4 left-1/2 -translate-x-1/2 w-[1000px] h-[600px] bg-accent/8 rounded-full blur-[120px]" />
         <div className="absolute top-1/3 left-1/4 w-[600px] h-[400px] bg-accent/5 rounded-full blur-[100px]" />
         <div className="absolute top-1/3 right-1/4 w-[500px] h-[350px] bg-accent/4 rounded-full blur-[100px]" />
-      </motion.div>
+      </m.div>
 
       {/* Subtle grid pattern - uses CSS class for theme-aware styling */}
       <div className="absolute inset-0 hero-grid-pattern" />
 
       {/* Floating abstract elements */}
       <div className="absolute inset-0 overflow-hidden pointer-events-none">
         {/* Floating orbs */}
-        <motion.div
+        <m.div
           animate={{
             y: [0, -20, 0],
             opacity: [0.4, 0.6, 0.4],
@@ -42,7 +43,7 @@ export function Hero() {
           }}
           className="absolute top-[20%] left-[15%] w-3 h-3 bg-accent/40 rounded-full blur-sm"
         />
-        <motion.div
+        <m.div
           animate={{
             y: [0, 15, 0],
             opacity: [0.3, 0.5, 0.3],
@@ -55,7 +56,7 @@ export function Hero() {
           }}
           className="absolute top-[30%] right-[20%] w-2 h-2 bg-accent/50 rounded-full blur-sm"
         />
-        <motion.div
+        <m.div
           animate={{
             y: [0, -15, 0],
             opacity: [0.3, 0.5, 0.3],
@@ -68,7 +69,7 @@ export function Hero() {
           }}
           className="absolute top-[40%] left-[10%] w-4 h-4 bg-accent/30 rounded-full blur-sm"
         />
-        <motion.div
+        <m.div
           animate={{
             y: [0, 20, 0],
             opacity: [0.2, 0.4, 0.2],
@@ -87,7 +88,7 @@ export function Hero() {
           className="absolute inset-0 w-full h-full"
           xmlns="http://www.w3.org/2000/svg"
         >
-          <motion.line
+          <m.line
             x1="10%"
             y1="30%"
             x2="25%"
@@ -98,7 +99,7 @@ export function Hero() {
             animate={{ pathLength: 1, opacity: 0.2 }}
             transition={{ duration: 2, delay: 0.5 }}
           />
-          <motion.line
+          <m.line
             x1="75%"
             y1="25%"
             x2="90%"
@@ -136,7 +137,7 @@ export function Hero() {
       <div className="relative z-10 w-full max-w-5xl mx-auto px-6 sm:px-8 pt-24 pb-16">
         <div className="text-center">
           {/* Tagline pills */}
-          <motion.div
+          <m.div
             initial={{ opacity: 0, y: 20 }}
             animate={{ opacity: 1, y: 0 }}
             transition={{ duration: 0.6, delay: 0.1 }}
@@ -149,11 +150,11 @@ export function Hero() {
             <span className="px-3 py-1.5 text-xs font-medium text-text-secondary bg-surface-elevated border border-border rounded-full">
               Production-tested engineering
             </span>
-          </motion.div>
+          </m.div>
 
           {/* Main headline - optimized for LCP */}
           {/* Render text immediately for fast LCP, animate opacity instead of text generation */}
-          <motion.h1
+          <m.h1
             initial={{ opacity: 0, y: 10 }}
             animate={{ opacity: 1, y: 0 }}
             transition={{ duration: 0.5, ease: [0.22, 1, 0.36, 1] }}
@@ -164,10 +165,10 @@ export function Hero() {
             <span className="text-highlight">
               That Ship to Production
             </span>
-          </motion.h1>
+          </m.h1>
 
           {/* Subheadline */}
-          <motion.p
+          <m.p
             initial={{ opacity: 0, y: 12 }}
             animate={{ opacity: 1, y: 0 }}
             transition={{
@@ -180,10 +181,10 @@ export function Hero() {
             Senior AI engineers embedded with your team within 2-5 days. We
             build LLM applications, AI agents, and secure AI systems that ship
             to production.
-          </motion.p>
+          </m.p>
 
           {/* CTA buttons */}
-          <motion.div
+          <m.div
             initial={{ opacity: 0, y: 20 }}
             animate={{ opacity: 1, y: 0 }}
             transition={{ duration: 0.6, delay: 0.4 }}
@@ -198,14 +199,14 @@ export function Hero() {
             >
               View Our Work
             </Link>
-          </motion.div>
+          </m.div>
         </div>
 
         <ClientLogos />
       </div>
 
       {/* Scroll indicator */}
-      <motion.div
+      <m.div
         initial={{ opacity: 0 }}
         animate={{ opacity: 1 }}
         transition={{ delay: 1.5 }}
@@ -217,7 +218,8 @@ export function Hero() {
             style={{ backgroundColor: "var(--color-text-muted)" }}
           />
         </div>
-      </motion.div>
+      </m.div>
     </section>
+    </LazyMotion>
   );
 }