Skip to content

Commit 8a406b5

Browse files
bloveclaude
blove
and
claude
authored
feat(website): home page narrative funnel redesign (#125)
* docs: add homepage narrative funnel redesign spec Redesigns the home page from 11 sections to 7, with a clear Problem → Solution → Stack → CTA narrative. Adds PilotSolution and TheStack components, reuses PilotFooterCTA, drops ArchDiagram. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com> * docs: add homepage narrative funnel implementation plan 5 tasks: PilotSolution, TheStack, PilotFooterCTA href fix, page.tsx rewrite, and final verification. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com> * feat(website): add PilotSolution component for home page Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com> * fix(website): update PilotFooterCTA primary CTA to link to pilot page * feat(website): add TheStack component for home page Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com> * feat(website): rewrite home page with narrative funnel flow Replaces 11-section layout with 7-section funnel: Hero → Stats → Problem → PilotSolution → TheStack → WhitePaper → StopStallingCTA Removes: LibrariesSection, ChatFeaturesSection, ValueProps, LangGraphShowcase, DeepAgentsShowcase, HomePilotCTA, ArchDiagram Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com> * fix(website): use Next.js Link for PilotFooterCTA internal route Replace motion.a with Link for /pilot-to-prod to enable client-side navigation instead of full page reload. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com> --------- Co-authored-by: Claude Opus 4.6 <noreply@anthropic.com>
1 parent 222d506 commit 8a406b5

6 files changed

Lines changed: 1128 additions & 32 deletions

File tree

‎apps/website/src/app/page.tsx‎

Lines changed: 12 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,10 @@
11
import { HeroTwoCol } from '../components/landing/HeroTwoCol';
2-
import { ArchDiagram } from '../components/landing/ArchDiagram';
3-
import { ValueProps } from '../components/landing/ValueProps';
4-
import { LangGraphShowcase } from '../components/landing/LangGraphShowcase';
5-
import { DeepAgentsShowcase } from '../components/landing/DeepAgentsShowcase';
62
import { StatsStrip } from '../components/landing/StatsStrip';
7-
// import { SocialProof } from '../components/landing/SocialProof';
83
import { ProblemSection } from '../components/landing/ProblemSection';
9-
import { LibrariesSection } from '../components/landing/LibrariesSection';
10-
import { ChatFeaturesSection } from '../components/landing/ChatFeaturesSection';
4+
import { PilotSolution } from '../components/landing/PilotSolution';
5+
import { TheStack } from '../components/landing/TheStack';
116
import { WhitePaperSection } from '../components/landing/WhitePaperSection';
12-
import { HomePilotCTA } from '../components/landing/HomePilotCTA';
7+
import { PilotFooterCTA } from '../components/landing/PilotFooterCTA';
138
import { tokens } from '../../lib/design-tokens';
149

1510
export default async function HomePage() {
@@ -18,34 +13,23 @@ export default async function HomePage() {
1813
{/* Ambient gradient blobs */}
1914
<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" />
2015
<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" />
21-
<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" />
22-
<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" />
23-
<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" />
24-
<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" />
25-
<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" />
16+
<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" />
17+
<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" />
2618

2719
{/* 1. Hook — headline, animation, CTA */}
2820
<HeroTwoCol />
2921
{/* 2. Trust — quick credibility stats */}
3022
<StatsStrip />
31-
{/* <SocialProof /> */}
3223
{/* 3. Problem — last-mile gap narrative */}
3324
<ProblemSection />
34-
{/* 4. Libraries — teaser cards for Angular, Render, Chat */}
35-
<LibrariesSection />
36-
{/* 5. Chat features — interactive 4-tab scenarios */}
37-
<ChatFeaturesSection />
38-
{/* 6. Value — why this product, with interactive code tabs */}
39-
<ValueProps />
40-
{/* 7. Depth — capability showcases */}
41-
<LangGraphShowcase />
42-
<DeepAgentsShowcase />
43-
{/* 9. White paper free download */}
25+
{/* 4. Solution — pilot-to-prod program */}
26+
<PilotSolution />
27+
{/* 5. Product — the three-library stack */}
28+
<TheStack />
29+
{/* 6. Lead gen — whitepaper download */}
4430
<WhitePaperSection />
45-
{/* 10. Pilot program CTA */}
46-
<HomePilotCTA />
47-
{/* 11. Architecture — technical credibility */}
48-
<ArchDiagram />
31+
{/* 7. Final CTA — "Ready to stop stalling?" */}
32+
<PilotFooterCTA />
4933
</div>
5034
);
5135
}

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

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
'use client';
22

33
import { motion } from 'framer-motion';
4+
import Link from 'next/link';
45
import { tokens } from '../../../lib/design-tokens';
56
import { CitationBadge } from './CitationBadge';
67

@@ -88,9 +89,8 @@ export function PilotFooterCTA() {
8889
}}
8990
>
9091
{/* Primary CTA */}
91-
<motion.a
92-
href="#whitepaper-gate"
93-
whileHover={{ boxShadow: '0 0 20px rgba(255, 255, 255, 0.3)' }}
92+
<Link
93+
href="/pilot-to-prod"
9494
style={{
9595
display: 'inline-block',
9696
padding: '0.875rem 2rem',
@@ -105,7 +105,7 @@ export function PilotFooterCTA() {
105105
}}
106106
>
107107
Start Your Pilot →
108-
</motion.a>
108+
</Link>
109109

110110
{/* Secondary CTA */}
111111
<a

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

Lines changed: 157 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,157 @@
1+
'use client';
2+
import { motion } from 'framer-motion';
3+
import Link from 'next/link';
4+
import { tokens } from '@cacheplane/design-tokens';
5+
6+
const STEPS = [
7+
{
8+
num: 1,
9+
title: 'Pilot',
10+
description: 'We assess your LangGraph agent and Angular codebase. You get a concrete production plan.',
11+
},
12+
{
13+
num: 2,
14+
title: 'Build',
15+
description: 'We work alongside your team to integrate the framework. Streaming, generative UI, testing — done right.',
16+
},
17+
{
18+
num: 3,
19+
title: 'Ship',
20+
description: 'Your agent goes to production with your team owning every line. No vendor lock-in, no black boxes.',
21+
},
22+
];
23+
24+
export function PilotSolution() {
25+
return (
26+
<section style={{ padding: '80px 32px' }}>
27+
<motion.div
28+
initial={{ opacity: 0, y: 16 }}
29+
whileInView={{ opacity: 1, y: 0 }}
30+
viewport={{ once: true }}
31+
transition={{ duration: 0.5 }}
32+
style={{ textAlign: 'center', marginBottom: 48 }}
33+
>
34+
<p style={{
35+
fontFamily: 'var(--font-mono, "JetBrains Mono", monospace)',
36+
fontSize: '0.7rem',
37+
textTransform: 'uppercase',
38+
letterSpacing: '0.12em',
39+
fontWeight: 700,
40+
color: tokens.colors.accent,
41+
marginBottom: 14,
42+
}}>
43+
The Solution
44+
</p>
45+
<h2 style={{
46+
fontFamily: 'var(--font-garamond, "EB Garamond", Georgia, serif)',
47+
fontSize: 'clamp(26px, 3.5vw, 46px)',
48+
fontWeight: 800,
49+
lineHeight: 1.1,
50+
color: tokens.colors.textPrimary,
51+
marginBottom: 10,
52+
}}>
53+
From proof of concept to production in 90 days
54+
</h2>
55+
<p style={{
56+
fontFamily: 'var(--font-garamond, "EB Garamond", Georgia, serif)',
57+
fontStyle: 'italic',
58+
fontSize: '1.05rem',
59+
color: tokens.colors.textSecondary,
60+
maxWidth: 560,
61+
margin: '0 auto',
62+
}}>
63+
The structured pilot engagement that closes the last-mile gap.
64+
</p>
65+
</motion.div>
66+
67+
<div style={{
68+
display: 'grid',
69+
gridTemplateColumns: 'repeat(auto-fit, minmax(220px, 1fr))',
70+
gap: 16,
71+
maxWidth: 840,
72+
margin: '0 auto 36px',
73+
}}>
74+
{STEPS.map((step, i) => (
75+
<motion.div
76+
key={step.num}
77+
initial={{ opacity: 0, y: 20 }}
78+
whileInView={{ opacity: 1, y: 0 }}
79+
viewport={{ once: true }}
80+
transition={{ delay: i * 0.1, duration: 0.5 }}
81+
style={{
82+
padding: '28px 20px',
83+
textAlign: 'center',
84+
borderRadius: 18,
85+
background: tokens.glass.bg,
86+
backdropFilter: `blur(${tokens.glass.blur})`,
87+
WebkitBackdropFilter: `blur(${tokens.glass.blur})`,
88+
border: `1px solid ${tokens.glass.border}`,
89+
boxShadow: tokens.glass.shadow,
90+
}}
91+
>
92+
<div style={{
93+
width: 32,
94+
height: 32,
95+
borderRadius: '50%',
96+
background: tokens.colors.accent,
97+
color: '#fff',
98+
display: 'flex',
99+
alignItems: 'center',
100+
justifyContent: 'center',
101+
fontFamily: 'var(--font-mono, "JetBrains Mono", monospace)',
102+
fontSize: '0.75rem',
103+
fontWeight: 700,
104+
margin: '0 auto 14px',
105+
}}>
106+
{step.num}
107+
</div>
108+
<h3 style={{
109+
fontFamily: 'Inter, sans-serif',
110+
fontSize: '1rem',
111+
fontWeight: 600,
112+
color: tokens.colors.textPrimary,
113+
marginBottom: 8,
114+
}}>
115+
{step.title}
116+
</h3>
117+
<p style={{
118+
fontSize: '0.82rem',
119+
color: tokens.colors.textSecondary,
120+
lineHeight: 1.5,
121+
}}>
122+
{step.description}
123+
</p>
124+
</motion.div>
125+
))}
126+
</div>
127+
128+
<div style={{ textAlign: 'center' }}>
129+
<Link
130+
href="/pilot-to-prod"
131+
style={{
132+
display: 'inline-block',
133+
padding: '0.875rem 2rem',
134+
background: tokens.colors.accent,
135+
color: '#fff',
136+
fontFamily: 'Inter, sans-serif',
137+
fontSize: 15,
138+
fontWeight: 600,
139+
textDecoration: 'none',
140+
borderRadius: 6,
141+
}}
142+
>
143+
Explore the Pilot Program →
144+
</Link>
145+
<p style={{
146+
fontFamily: 'var(--font-mono, "JetBrains Mono", monospace)',
147+
fontSize: '0.62rem',
148+
color: tokens.colors.textMuted,
149+
marginTop: 12,
150+
letterSpacing: '0.06em',
151+
}}>
152+
Included with every app deployment license
153+
</p>
154+
</div>
155+
</section>
156+
);
157+
}

0 commit comments

Comments
 (0)