From f72652bc12e208aa0b58afb644e8209ea034eb32 Mon Sep 17 00:00:00 2001 From: Brian Love Date: Mon, 13 Apr 2026 13:48:12 -0700 Subject: [PATCH 1/7] docs: add homepage narrative funnel redesign spec MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 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 --- ...-04-10-homepage-narrative-funnel-design.md | 195 ++++++++++++++++++ 1 file changed, 195 insertions(+) create mode 100644 docs/superpowers/specs/2026-04-10-homepage-narrative-funnel-design.md diff --git a/docs/superpowers/specs/2026-04-10-homepage-narrative-funnel-design.md b/docs/superpowers/specs/2026-04-10-homepage-narrative-funnel-design.md new file mode 100644 index 000000000..b0f3f8334 --- /dev/null +++ b/docs/superpowers/specs/2026-04-10-homepage-narrative-funnel-design.md @@ -0,0 +1,195 @@ +# Homepage Narrative Funnel Redesign + +**Date:** 2026-04-10 +**Status:** Draft + +## Summary + +Redesign the home page from an 11-section showcase into a focused 7-section narrative funnel: Problem → Solution → Stack → CTA. The page tells one story and routes visitors to dedicated landing pages for depth. + +## Motivation + +The current home page is long (11 sections) and includes deep interactive demos (ChatFeaturesSection, LangGraphShowcase, DeepAgentsShowcase) that duplicate content available on dedicated library landing pages. The Pilot-to-Prod program — the core solution to the "last mile" problem — appears only as a weak CTA near the bottom. The architecture diagram adds technical credibility but doesn't drive conversions. + +The redesign positions Cacheplane's narrative clearly: here's the problem → here's how we solve it → here's what you get → let's go. + +## New Page Flow + +``` +HeroTwoCol → StatsStrip → ProblemSection → PilotSolution → TheStack → WhitePaperSection → StopStallingCTA +``` + +### Removed sections +- `LibrariesSection` — replaced by TheStack (more substance) +- `ChatFeaturesSection` — interactive demo lives on `/chat` landing page +- `ValueProps` ("Why agent()?") — folded into TheStack's Agent card +- `LangGraphShowcase` — capability detail lives on `/angular` landing page +- `DeepAgentsShowcase` — capability detail lives on `/angular` landing page +- `HomePilotCTA` — replaced by StopStallingCTA (stronger design) +- `ArchDiagram` — dropped entirely + +### Kept as-is +- `HeroTwoCol` — hero with GenerativeUIFrame demo +- `StatsStrip` — credibility stats +- `ProblemSection` — last-mile gap narrative with animated progress bar +- `WhitePaperSection` — lead gen form + guide description + +### Ambient gradient blobs +Reduced from 7 to 4 (page is shorter). Positions adjusted to cover the new section layout. + +## New Components + +### 1. `PilotSolution` + +**File:** `apps/website/src/components/landing/PilotSolution.tsx` +**Type:** Client component (`'use client'` — uses framer-motion) +**Position:** Directly after ProblemSection — the "answer" to the 50% failure stat. + +#### Layout +- Eyebrow: `THE SOLUTION` — mono font, accent blue (`tokens.colors.accent`), uppercase +- Headline: "From proof of concept to production in 90 days" — EB Garamond, `clamp(26px, 3.5vw, 46px)` +- Subtitle: italic, "The structured pilot engagement that closes the last-mile gap." +- 3 step cards in a horizontal row (responsive: stack on mobile) +- CTA button: "Explore the Pilot Program →" → `/pilot-to-prod` +- Fine print: "Included with every app deployment license" + +#### Step cards +Each card uses glassmorphism (`tokens.glass.*`) consistent with ProblemSection stat cards. + +| # | Title | Description | +|---|-------|-------------| +| 1 | Pilot | We assess your LangGraph agent and Angular codebase. You get a concrete production plan. | +| 2 | Build | We work alongside your team to integrate the framework. Streaming, generative UI, testing — done right. | +| 3 | Ship | Your agent goes to production with your team owning every line. No vendor lock-in, no black boxes. | + +Each card has: +- A numbered circle (accent blue bg, white text, 32px) +- Title in Inter, 600 weight +- Description in Inter, `tokens.colors.textSecondary` + +#### Styling +- Section padding: `80px 32px` +- Content max-width: `840px` (matches ProblemSection) +- Step cards grid: `repeat(auto-fit, minmax(220px, 1fr))` with `gap: 16px` +- CTA: `tokens.colors.accent` background, white text, 6px border-radius, centered +- Responsive: cards stack to single column on mobile + +### 2. `TheStack` + +**File:** `apps/website/src/components/landing/TheStack.tsx` +**Type:** Client component (`'use client'` — uses framer-motion for scroll animations) +**Position:** After PilotSolution. The product showcase. + +#### Layout +- Eyebrow: `THE CACHEPLANE STACK` — mono font, accent blue +- Headline: "Three libraries. One architecture. Every layer you need." — EB Garamond +- Subtitle: "Your LangGraph agent already works. These three libraries ship it." +- 3 cards in vertical stack with connecting lines between them +- Max-width: `860px`, centered + +#### Cards + +Cards are stacked vertically (not a 3-col grid) to reinforce the layering metaphor. Between each card, a thin gradient connector line (2px, ~24px tall) transitions from the upper card's color to the lower card's color. + +Each card structure: +- Tag pill (white text on library color, uppercase mono, same style as current LibrariesSection) +- Package name (mono, library color, 0.76rem) +- Headline (EB Garamond, 700 weight, `tokens.colors.textPrimary`) +- Value prop paragraph (Inter, `tokens.colors.textSecondary`, ~2 sentences) +- Differentiator pills row (mono, tinted bg/border matching library color) +- CTA link: "Explore [Name] →" (mono, library color, no decoration) + +**Card 1 — Agent** (color: `tokens.colors.accent` / `#004090`, rgb: `0,64,144`): +- Tag: `AGENT` +- Package: `@cacheplane/angular` +- Headline: "The reactive bridge to LangGraph" +- Value prop: "Signal-native streaming connects your Angular templates directly to LangGraph agent state. Interrupts, persistence, time-travel, and branch history — every LangGraph feature has a first-class Angular API. Test deterministically with MockAgentTransport." +- Pills: `Angular Signals` · `LangGraph Cloud` · `MockAgentTransport` +- CTA: "Explore Agent →" → `/angular` + +**Card 2 — Render** (color: `tokens.colors.renderGreen` / `#1a7a40`, rgb: `26,122,64`): +- Tag: `GEN UI` +- Package: `@cacheplane/render` +- Headline: "Agents that render UI — on open standards" +- Value prop: "Built on Vercel's json-render spec and Google's A2UI protocol. Your agent emits a render spec, your Angular components render it — with streaming JSON patches, component registries, and signal-native state. No coupling between agent logic and frontend." +- Pills: `Vercel json-render` · `Google A2UI` · `JSON Patch streaming` +- CTA: "Explore Render →" → `/render` + +**Card 3 — Chat** (color: `tokens.colors.chatPurple` / `#5a00c8`, rgb: `90,0,200`): +- Tag: `CHAT` +- Package: `@cacheplane/chat` +- Headline: "Production chat UI in days, not sprints" +- Value prop: "Every component you need — streaming messages, tool call cards, interrupt panels, generative UI, debug overlay, theming — pre-built, composable, and WCAG accessible. Built on the Agent and Render libraries so everything works together from day one." +- Pills: `` · `` · `WCAG accessible` +- CTA: "Explore Chat →" → `/chat` + +#### Card styling +- Background: `rgba(${rgb}, 0.03)` +- Border: `1px solid rgba(${rgb}, 0.15)` +- Border-radius: `14px` +- Padding: `28px 28px 24px` +- Each card animates in with framer-motion (`opacity: 0, y: 24` → visible) with staggered delay + +#### Connector lines +Between each card, a centered vertical line: +- Width: `2px`, height: `28px` +- Background: `linear-gradient(to bottom, rgba(${upperRgb}, 0.3), rgba(${lowerRgb}, 0.3))` +- Centered horizontally within the max-width container + +### 3. `StopStallingCTA` (reuse of `PilotFooterCTA`) + +**File:** No new file — reuse `apps/website/src/components/landing/PilotFooterCTA.tsx` +**Position:** Final section on the page, after WhitePaperSection. + +We import and render `PilotFooterCTA` directly in `page.tsx`. The component is already self-contained with the correct design: + +- Dark background: `linear-gradient(135deg, #1a1a2e 0%, #0d1b3e 100%)` +- Eyebrow: "Ready when you are" +- Headline: "Ready to stop stalling?" +- Subtext with Gartner citation +- Primary CTA: "Start Your Pilot →" → `#whitepaper-gate` +- Secondary CTA: "Download the Guide" → `/whitepaper.pdf` +- Fine print: pricing info + +**One change:** Update the primary CTA `href` from `#whitepaper-gate` to `/pilot-to-prod` so it drives to the pilot page rather than scrolling to the whitepaper form (which is directly above it on the page and redundant as a CTA target). + +## Changes to `page.tsx` + +```tsx +import { HeroTwoCol } from '../components/landing/HeroTwoCol'; +import { StatsStrip } from '../components/landing/StatsStrip'; +import { ProblemSection } from '../components/landing/ProblemSection'; +import { PilotSolution } from '../components/landing/PilotSolution'; +import { TheStack } from '../components/landing/TheStack'; +import { WhitePaperSection } from '../components/landing/WhitePaperSection'; +import { PilotFooterCTA } from '../components/landing/PilotFooterCTA'; +import { tokens } from '../../lib/design-tokens'; + +export default async function HomePage() { + return ( +
+ {/* 4 ambient gradient blobs */} + + + + + + + {/* "Ready to stop stalling?" dark CTA */} +
+ ); +} +``` + +## Files changed + +| Action | File | +|--------|------| +| Create | `apps/website/src/components/landing/PilotSolution.tsx` | +| Create | `apps/website/src/components/landing/TheStack.tsx` | +| Edit | `apps/website/src/app/page.tsx` — new flow, reduced blobs | +| Edit | `apps/website/src/components/landing/PilotFooterCTA.tsx` — change primary CTA href from `#whitepaper-gate` to `/pilot-to-prod` | + +## Files NOT deleted + +Existing components (LibrariesSection, ChatFeaturesSection, ValueProps, LangGraphShowcase, DeepAgentsShowcase, HomePilotCTA, ArchDiagram) are not deleted — they are simply no longer imported by the home page. They may still be used by other pages or re-used in the future. From 7387464a3201e5bb0305a56dbb7e98cc0c8c12f8 Mon Sep 17 00:00:00 2001 From: Brian Love Date: Mon, 13 Apr 2026 14:42:00 -0700 Subject: [PATCH 2/7] 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 --- .../2026-04-10-homepage-narrative-funnel.md | 549 ++++++++++++++++++ 1 file changed, 549 insertions(+) create mode 100644 docs/superpowers/plans/2026-04-10-homepage-narrative-funnel.md diff --git a/docs/superpowers/plans/2026-04-10-homepage-narrative-funnel.md b/docs/superpowers/plans/2026-04-10-homepage-narrative-funnel.md new file mode 100644 index 000000000..8511cdba3 --- /dev/null +++ b/docs/superpowers/plans/2026-04-10-homepage-narrative-funnel.md @@ -0,0 +1,549 @@ +# Homepage Narrative Funnel Implementation Plan + +> **For agentic workers:** REQUIRED SUB-SKILL: Use superpowers:subagent-driven-development (recommended) or superpowers:executing-plans to implement this plan task-by-task. Steps use checkbox (`- [ ]`) syntax for tracking. + +**Goal:** Redesign the home page into a 7-section narrative funnel (Hero → Stats → Problem → PilotSolution → TheStack → WhitePaper → StopStallingCTA). + +**Architecture:** Two new client components (PilotSolution, TheStack) using the existing glassmorphism design system and framer-motion scroll animations. Reuse PilotFooterCTA for the closing CTA. Simplify page.tsx by removing 7 section imports and reducing ambient blobs. + +**Tech Stack:** Next.js 16 (App Router), React 19, framer-motion, `@cacheplane/design-tokens` + +**Spec:** `docs/superpowers/specs/2026-04-10-homepage-narrative-funnel-design.md` + +--- + +### Task 1: Create PilotSolution component + +**Files:** +- Create: `apps/website/src/components/landing/PilotSolution.tsx` + +- [ ] **Step 1: Create PilotSolution.tsx** + +```tsx +'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 ( +
+ +

+ The Solution +

+

+ From proof of concept to production in 90 days +

+

+ The structured pilot engagement that closes the last-mile gap. +

+ + +
+ {STEPS.map((step, i) => ( + +
+ {step.num} +
+

+ {step.title} +

+

+ {step.description} +

+ + ))} +
+ +
+ + Explore the Pilot Program → + +

+ Included with every app deployment license +

+
+
+ ); +} +``` + +- [ ] **Step 2: Verify the component compiles** + +Run: `cd apps/website && npx next build 2>&1 | head -30` + +If there are type errors, fix them. The component should compile without errors. + +- [ ] **Step 3: Commit** + +```bash +git add apps/website/src/components/landing/PilotSolution.tsx +git commit -m "feat(website): add PilotSolution component for home page" +``` + +--- + +### Task 2: Create TheStack component + +**Files:** +- Create: `apps/website/src/components/landing/TheStack.tsx` + +- [ ] **Step 1: Create TheStack.tsx** + +```tsx +'use client'; +import { motion } from 'framer-motion'; +import Link from 'next/link'; +import { tokens } from '@cacheplane/design-tokens'; + +const LIBRARIES = [ + { + id: 'angular', + tag: 'Agent', + pkg: '@cacheplane/angular', + color: tokens.colors.accent, + rgb: '0,64,144', + headline: 'The reactive bridge to LangGraph', + description: 'Signal-native streaming connects your Angular templates directly to LangGraph agent state. Interrupts, persistence, time-travel, and branch history — every LangGraph feature has a first-class Angular API. Test deterministically with MockAgentTransport.', + pills: ['Angular Signals', 'LangGraph Cloud', 'MockAgentTransport'], + href: '/angular', + ctaLabel: 'Explore Agent', + }, + { + id: 'render', + tag: 'Gen UI', + pkg: '@cacheplane/render', + color: tokens.colors.renderGreen, + rgb: '26,122,64', + headline: 'Agents that render UI — on open standards', + description: "Built on Vercel\u2019s json-render spec and Google\u2019s A2UI protocol. Your agent emits a render spec, your Angular components render it — with streaming JSON patches, component registries, and signal-native state. No coupling between agent logic and frontend.", + pills: ['Vercel json-render', 'Google A2UI', 'JSON Patch streaming'], + href: '/render', + ctaLabel: 'Explore Render', + }, + { + id: 'chat', + tag: 'Chat', + pkg: '@cacheplane/chat', + color: tokens.colors.chatPurple, + rgb: '90,0,200', + headline: 'Production chat UI in days, not sprints', + description: 'Every component you need — streaming messages, tool call cards, interrupt panels, generative UI, debug overlay, theming — pre-built, composable, and WCAG accessible. Built on the Agent and Render libraries so everything works together from day one.', + pills: ['', '', 'WCAG accessible'], + href: '/chat', + ctaLabel: 'Explore Chat', + }, +]; + +function Connector({ fromRgb, toRgb }: { fromRgb: string; toRgb: string }) { + return ( +
+
+
+ ); +} + +export function TheStack() { + return ( +
+ +

+ The Cacheplane Stack +

+

+ Three libraries. One architecture.
+ Every layer you need. +

+

+ Your LangGraph agent already works. These three libraries ship it. +

+ + +
+ {LIBRARIES.map((lib, i) => ( +
+ {i > 0 && ( + + )} + + + {lib.tag} + + +

+ {lib.pkg} +

+ +

+ {lib.headline} +

+ +

+ {lib.description} +

+ +
+ {lib.pills.map(pill => ( + + {pill} + + ))} +
+ + + {lib.ctaLabel} → + + +
+ ))} +
+
+ ); +} +``` + +- [ ] **Step 2: Verify the component compiles** + +Run: `cd apps/website && npx next build 2>&1 | head -30` + +If there are type errors, fix them. The component should compile without errors. + +- [ ] **Step 3: Commit** + +```bash +git add apps/website/src/components/landing/TheStack.tsx +git commit -m "feat(website): add TheStack component for home page" +``` + +--- + +### Task 3: Update PilotFooterCTA primary CTA href + +**Files:** +- Modify: `apps/website/src/components/landing/PilotFooterCTA.tsx:91-93` + +- [ ] **Step 1: Change the primary CTA href from `#whitepaper-gate` to `/pilot-to-prod`** + +In `apps/website/src/components/landing/PilotFooterCTA.tsx`, find: + +```tsx + href="#whitepaper-gate" +``` + +Replace with: + +```tsx + href="/pilot-to-prod" +``` + +- [ ] **Step 2: Commit** + +```bash +git add apps/website/src/components/landing/PilotFooterCTA.tsx +git commit -m "fix(website): update PilotFooterCTA primary CTA to link to pilot page" +``` + +--- + +### Task 4: Rewrite page.tsx with new flow + +**Files:** +- Modify: `apps/website/src/app/page.tsx` + +- [ ] **Step 1: Replace page.tsx with the new narrative funnel flow** + +Replace the entire contents of `apps/website/src/app/page.tsx` with: + +```tsx +import { HeroTwoCol } from '../components/landing/HeroTwoCol'; +import { StatsStrip } from '../components/landing/StatsStrip'; +import { ProblemSection } from '../components/landing/ProblemSection'; +import { PilotSolution } from '../components/landing/PilotSolution'; +import { TheStack } from '../components/landing/TheStack'; +import { WhitePaperSection } from '../components/landing/WhitePaperSection'; +import { PilotFooterCTA } from '../components/landing/PilotFooterCTA'; +import { tokens } from '../../lib/design-tokens'; + +export default async function HomePage() { + return ( +
+ {/* Ambient gradient blobs */} +