feat(website): home page narrative funnel redesign

apps/website/src/app/page.tsx

@@ -1,15 +1,10 @@
 import { HeroTwoCol } from '../components/landing/HeroTwoCol';
-import { ArchDiagram } from '../components/landing/ArchDiagram';
-import { ValueProps } from '../components/landing/ValueProps';
-import { LangGraphShowcase } from '../components/landing/LangGraphShowcase';
-import { DeepAgentsShowcase } from '../components/landing/DeepAgentsShowcase';
 import { StatsStrip } from '../components/landing/StatsStrip';
-// import { SocialProof } from '../components/landing/SocialProof';
 import { ProblemSection } from '../components/landing/ProblemSection';
-import { LibrariesSection } from '../components/landing/LibrariesSection';
-import { ChatFeaturesSection } from '../components/landing/ChatFeaturesSection';
+import { PilotSolution } from '../components/landing/PilotSolution';
+import { TheStack } from '../components/landing/TheStack';
 import { WhitePaperSection } from '../components/landing/WhitePaperSection';
-import { HomePilotCTA } from '../components/landing/HomePilotCTA';
+import { PilotFooterCTA } from '../components/landing/PilotFooterCTA';
 import { tokens } from '../../lib/design-tokens';
 
 export default async function HomePage() {
@@ -18,34 +13,23 @@ export default async function HomePage() {
       {/* Ambient gradient blobs */}
       <div style={{ position: 'absolute', width: 600, height: 600, borderRadius: '50%', background: tokens.gradient.warm, top: -200, left: -150, filter: 'blur(80px)', pointerEvents: 'none' }} aria-hidden="true" />
       <div style={{ position: 'absolute', width: 500, height: 500, borderRadius: '50%', background: tokens.gradient.cool, top: 800, right: -100, filter: 'blur(80px)', pointerEvents: 'none' }} aria-hidden="true" />
-      <div style={{ position: 'absolute', width: 400, height: 400, borderRadius: '50%', background: tokens.gradient.warm, top: 2000, left: -100, filter: 'blur(80px)', pointerEvents: 'none' }} aria-hidden="true" />
-      <div style={{ position: 'absolute', width: 500, height: 500, borderRadius: '50%', background: tokens.gradient.cool, top: 3500, right: -150, filter: 'blur(80px)', pointerEvents: 'none' }} aria-hidden="true" />
-      <div style={{ position: 'absolute', width: 350, height: 350, borderRadius: '50%', background: tokens.gradient.coolLight, top: 5000, left: '30%', filter: 'blur(70px)', pointerEvents: 'none' }} aria-hidden="true" />
-      <div style={{ position: 'absolute', width: 400, height: 400, borderRadius: '50%', background: tokens.gradient.warm, top: 6500, right: -100, filter: 'blur(80px)', pointerEvents: 'none' }} aria-hidden="true" />
-      <div style={{ position: 'absolute', width: 350, height: 350, borderRadius: '50%', background: tokens.gradient.cool, top: 8000, left: '20%', filter: 'blur(70px)', pointerEvents: 'none' }} aria-hidden="true" />
+      <div style={{ position: 'absolute', width: 400, height: 400, borderRadius: '50%', background: tokens.gradient.warm, top: 2200, left: -100, filter: 'blur(80px)', pointerEvents: 'none' }} aria-hidden="true" />
+      <div style={{ position: 'absolute', width: 350, height: 350, borderRadius: '50%', background: tokens.gradient.coolLight, top: 3800, right: '20%', filter: 'blur(70px)', pointerEvents: 'none' }} aria-hidden="true" />
 
       {/* 1. Hook — headline, animation, CTA */}
       <HeroTwoCol />
       {/* 2. Trust — quick credibility stats */}
       <StatsStrip />
-      {/* <SocialProof /> */}
       {/* 3. Problem — last-mile gap narrative */}
       <ProblemSection />
-      {/* 4. Libraries — teaser cards for Angular, Render, Chat */}
-      <LibrariesSection />
-      {/* 5. Chat features — interactive 4-tab scenarios */}
-      <ChatFeaturesSection />
-      {/* 6. Value — why this product, with interactive code tabs */}
-      <ValueProps />
-      {/* 7. Depth — capability showcases */}
-      <LangGraphShowcase />
-      <DeepAgentsShowcase />
-      {/* 9. White paper free download */}
+      {/* 4. Solution — pilot-to-prod program */}
+      <PilotSolution />
+      {/* 5. Product — the three-library stack */}
+      <TheStack />
+      {/* 6. Lead gen — whitepaper download */}
       <WhitePaperSection />
-      {/* 10. Pilot program CTA */}
-      <HomePilotCTA />
-      {/* 11. Architecture — technical credibility */}
-      <ArchDiagram />
+      {/* 7. Final CTA — "Ready to stop stalling?" */}
+      <PilotFooterCTA />
     </div>
   );
 }

apps/website/src/components/landing/PilotFooterCTA.tsx

@@ -1,6 +1,7 @@
 'use client';
 
 import { motion } from 'framer-motion';
+import Link from 'next/link';
 import { tokens } from '../../../lib/design-tokens';
 import { CitationBadge } from './CitationBadge';
 
@@ -88,9 +89,8 @@ export function PilotFooterCTA() {
           }}
         >
           {/* Primary CTA */}
-          <motion.a
-            href="#whitepaper-gate"
-            whileHover={{ boxShadow: '0 0 20px rgba(255, 255, 255, 0.3)' }}
+          <Link
+            href="/pilot-to-prod"
             style={{
               display: 'inline-block',
               padding: '0.875rem 2rem',
@@ -105,7 +105,7 @@ export function PilotFooterCTA() {
             }}
           >
             Start Your Pilot →
-          </motion.a>
+          </Link>
 
           {/* Secondary CTA */}
           <a

apps/website/src/components/landing/PilotSolution.tsx

@@ -0,0 +1,157 @@
+'use client';
+import { motion } from 'framer-motion';
+import Link from 'next/link';
+import { tokens } from '@cacheplane/design-tokens';
+
+const STEPS = [
+  {
+    num: 1,
+    title: 'Pilot',
+    description: 'We assess your LangGraph agent and Angular codebase. You get a concrete production plan.',
+  },
+  {
+    num: 2,
+    title: 'Build',
+    description: 'We work alongside your team to integrate the framework. Streaming, generative UI, testing — done right.',
+  },
+  {
+    num: 3,
+    title: 'Ship',
+    description: 'Your agent goes to production with your team owning every line. No vendor lock-in, no black boxes.',
+  },
+];
+
+export function PilotSolution() {
+  return (
+    <section style={{ padding: '80px 32px' }}>
+      <motion.div
+        initial={{ opacity: 0, y: 16 }}
+        whileInView={{ opacity: 1, y: 0 }}
+        viewport={{ once: true }}
+        transition={{ duration: 0.5 }}
+        style={{ textAlign: 'center', marginBottom: 48 }}
+      >
+        <p style={{
+          fontFamily: 'var(--font-mono, "JetBrains Mono", monospace)',
+          fontSize: '0.7rem',
+          textTransform: 'uppercase',
+          letterSpacing: '0.12em',
+          fontWeight: 700,
+          color: tokens.colors.accent,
+          marginBottom: 14,
+        }}>
+          The Solution
+        </p>
+        <h2 style={{
+          fontFamily: 'var(--font-garamond, "EB Garamond", Georgia, serif)',
+          fontSize: 'clamp(26px, 3.5vw, 46px)',
+          fontWeight: 800,
+          lineHeight: 1.1,
+          color: tokens.colors.textPrimary,
+          marginBottom: 10,
+        }}>
+          From proof of concept to production in 90 days
+        </h2>
+        <p style={{
+          fontFamily: 'var(--font-garamond, "EB Garamond", Georgia, serif)',
+          fontStyle: 'italic',
+          fontSize: '1.05rem',
+          color: tokens.colors.textSecondary,
+          maxWidth: 560,
+          margin: '0 auto',
+        }}>
+          The structured pilot engagement that closes the last-mile gap.
+        </p>
+      </motion.div>
+
+      <div style={{
+        display: 'grid',
+        gridTemplateColumns: 'repeat(auto-fit, minmax(220px, 1fr))',
+        gap: 16,
+        maxWidth: 840,
+        margin: '0 auto 36px',
+      }}>
+        {STEPS.map((step, i) => (
+          <motion.div
+            key={step.num}
+            initial={{ opacity: 0, y: 20 }}
+            whileInView={{ opacity: 1, y: 0 }}
+            viewport={{ once: true }}
+            transition={{ delay: i * 0.1, duration: 0.5 }}
+            style={{
+              padding: '28px 20px',
+              textAlign: 'center',
+              borderRadius: 18,
+              background: tokens.glass.bg,
+              backdropFilter: `blur(${tokens.glass.blur})`,
+              WebkitBackdropFilter: `blur(${tokens.glass.blur})`,
+              border: `1px solid ${tokens.glass.border}`,
+              boxShadow: tokens.glass.shadow,
+            }}
+          >
+            <div style={{
+              width: 32,
+              height: 32,
+              borderRadius: '50%',
+              background: tokens.colors.accent,
+              color: '#fff',
+              display: 'flex',
+              alignItems: 'center',
+              justifyContent: 'center',
+              fontFamily: 'var(--font-mono, "JetBrains Mono", monospace)',
+              fontSize: '0.75rem',
+              fontWeight: 700,
+              margin: '0 auto 14px',
+            }}>
+              {step.num}
+            </div>
+            <h3 style={{
+              fontFamily: 'Inter, sans-serif',
+              fontSize: '1rem',
+              fontWeight: 600,
+              color: tokens.colors.textPrimary,
+              marginBottom: 8,
+            }}>
+              {step.title}
+            </h3>
+            <p style={{
+              fontSize: '0.82rem',
+              color: tokens.colors.textSecondary,
+              lineHeight: 1.5,
+            }}>
+              {step.description}
+            </p>
+          </motion.div>
+        ))}
+      </div>
+
+      <div style={{ textAlign: 'center' }}>
+        <Link
+          href="/pilot-to-prod"
+          style={{
+            display: 'inline-block',
+            padding: '0.875rem 2rem',
+            background: tokens.colors.accent,
+            color: '#fff',
+            fontFamily: 'Inter, sans-serif',
+            fontSize: 15,
+            fontWeight: 600,
+            textDecoration: 'none',
+            borderRadius: 6,
+          }}
+        >
+          Explore the Pilot Program →
+        </Link>
+        <p style={{
+          fontFamily: 'var(--font-mono, "JetBrains Mono", monospace)',
+          fontSize: '0.62rem',
+          color: tokens.colors.textMuted,
+          marginTop: 12,
+          letterSpacing: '0.06em',
+        }}>
+          Included with every app deployment license
+        </p>
+      </div>
+    </section>
+  );
+}