Resources
diff --git a/apps/website/src/components/shared/Nav.tsx b/apps/website/src/components/shared/Nav.tsx
index 54e10c4a8..ac932fc25 100644
--- a/apps/website/src/components/shared/Nav.tsx
+++ b/apps/website/src/components/shared/Nav.tsx
@@ -8,6 +8,7 @@ import { docsConfig } from '../../lib/docs-config';
const links = [
{ label: 'Pilot to Prod', href: '/pilot-to-prod', external: false },
{ label: 'Docs', href: '/docs', external: false },
+ { label: 'Solutions', href: '/solutions', external: false },
{ label: 'API', href: '/docs/agent/api/agent', external: false },
{ label: 'Examples', href: 'https://cockpit.cacheplane.ai', external: true },
{ label: 'Pricing', href: '/pricing', external: false },
diff --git a/apps/website/src/lib/solutions-data.ts b/apps/website/src/lib/solutions-data.ts
new file mode 100644
index 000000000..0adcd72d4
--- /dev/null
+++ b/apps/website/src/lib/solutions-data.ts
@@ -0,0 +1,190 @@
+export interface SolutionPainPoint {
+ title: string;
+ description: string;
+}
+
+export interface ArchitectureLayer {
+ library: string;
+ pkg: string;
+ role: string;
+}
+
+export interface ProofPoint {
+ metric: string;
+ label: string;
+}
+
+export interface SolutionConfig {
+ slug: string;
+ color: string;
+ rgb: string;
+ eyebrow: string;
+ title: string;
+ subtitle: string;
+ painPoints: SolutionPainPoint[];
+ architectureIntro: string;
+ architectureLayers: ArchitectureLayer[];
+ proofPoints: ProofPoint[];
+ ctaHeadline: string;
+ ctaSubtext: string;
+ metaTitle: string;
+ metaDescription: string;
+}
+
+export const SOLUTIONS: SolutionConfig[] = [
+ {
+ slug: 'compliance',
+ color: '#D4850F',
+ rgb: '212,133,15',
+ eyebrow: 'Compliance & Audit',
+ title: 'AI agents your compliance\nteam will actually approve',
+ subtitle: 'Human-in-the-loop approvals, immutable audit trails, and deterministic testing — built into the framework, not bolted on.',
+ painPoints: [
+ {
+ title: 'Black-box AI decisions',
+ description: 'Regulators require explainability. Most agent frameworks stream opaque outputs with no audit trail.',
+ },
+ {
+ title: 'No human gate before action',
+ description: 'SOX, HIPAA, and GDPR demand human approval before consequential actions. Retrofitting interrupts is a rewrite.',
+ },
+ {
+ title: 'Untestable agent behavior',
+ description: 'Compliance needs reproducible test evidence. Non-deterministic LLM calls make that nearly impossible without the right tooling.',
+ },
+ ],
+ architectureIntro: 'Three libraries give your compliance team what they need — without slowing your engineering team down.',
+ architectureLayers: [
+ {
+ library: 'Agent',
+ pkg: '@cacheplane/angular',
+ role: 'Signal-native streaming with first-class interrupt support. Every agent action can require human approval before execution. Thread persistence gives you a complete, immutable history of every decision.',
+ },
+ {
+ library: 'Render',
+ pkg: '@cacheplane/render',
+ role: 'Approval workflows rendered as structured UI — not chat messages. The agent proposes an action, renders a confirmation card, and waits for the human gate before proceeding.',
+ },
+ {
+ library: 'Chat',
+ pkg: '@cacheplane/chat',
+ role: 'Debug overlay shows every tool call, interrupt, and state transition. Your compliance team can review exactly what happened, when, and why — in a UI they can understand.',
+ },
+ ],
+ proofPoints: [
+ { metric: '100%', label: 'Audit trail coverage — every agent action logged' },
+ { metric: '0', label: 'Unapproved actions — interrupt gates block execution' },
+ { metric: '<5 min', label: 'Time to reproduce any agent decision for auditors' },
+ ],
+ ctaHeadline: 'Ship compliant AI agents — without the compliance tax',
+ ctaSubtext: 'Download the guide or start a pilot. Your compliance team will thank you.',
+ metaTitle: 'Compliance & Audit — Angular Agent Framework Solutions',
+ metaDescription: 'Ship AI agents with human-in-the-loop approvals, audit trails, and deterministic testing. Built for SOX, HIPAA, and GDPR.',
+ },
+ {
+ slug: 'analytics',
+ color: '#0F7B8D',
+ rgb: '15,123,141',
+ eyebrow: 'Analytics & BI',
+ title: 'Natural language queries.\nReal-time dashboards.',
+ subtitle: 'Your users ask questions in plain English. The agent queries, visualizes, and streams results — all inside your Angular app.',
+ painPoints: [
+ {
+ title: 'BI tools users won\'t adopt',
+ description: 'Complex dashboards with steep learning curves. Business users want answers, not another tool to learn.',
+ },
+ {
+ title: 'Static reports, stale data',
+ description: 'Pre-built dashboards can\'t answer ad-hoc questions. By the time a report is built, the question has changed.',
+ },
+ {
+ title: 'Chat-only AI interfaces',
+ description: 'Text answers aren\'t enough for data. Users need charts, tables, and interactive visualizations — streamed in real time.',
+ },
+ ],
+ architectureIntro: 'Three libraries turn your LangGraph agent into a conversational BI tool your business users will actually use.',
+ architectureLayers: [
+ {
+ library: 'Agent',
+ pkg: '@cacheplane/angular',
+ role: 'Streams query results token-by-token as the LangGraph agent reasons over your data. Thread persistence means users can refine questions without re-running expensive queries.',
+ },
+ {
+ library: 'Render',
+ pkg: '@cacheplane/render',
+ role: 'The agent emits chart specs, data tables, and KPI cards as structured render specs. Your Angular components render them with streaming JSON patches — live-updating visualizations as data arrives.',
+ },
+ {
+ library: 'Chat',
+ pkg: '@cacheplane/chat',
+ role: 'Pre-built generative UI panel renders charts and tables inline with the conversation. Users ask follow-up questions and see updated visualizations without leaving the chat.',
+ },
+ ],
+ proofPoints: [
+ { metric: '10x', label: 'Faster time-to-insight vs. traditional BI dashboards' },
+ { metric: '0', label: 'SQL required — business users query in plain English' },
+ { metric: '<2s', label: 'First visual streamed — no waiting for full query completion' },
+ ],
+ ctaHeadline: 'Turn your data into conversations',
+ ctaSubtext: 'Download the guide or start a pilot. Ship a conversational BI experience in weeks, not quarters.',
+ metaTitle: 'Analytics & BI — Angular Agent Framework Solutions',
+ metaDescription: 'Build conversational BI with natural language queries, real-time streaming charts, and generative UI — all in Angular.',
+ },
+ {
+ slug: 'customer-support',
+ color: '#5B4FCF',
+ rgb: '91,79,207',
+ eyebrow: 'Customer Support',
+ title: 'AI agents that know when\nto escalate to a human',
+ subtitle: 'Resolve tickets autonomously, surface context instantly, and hand off to humans seamlessly — with full conversation history.',
+ painPoints: [
+ {
+ title: 'Chatbots that frustrate customers',
+ description: 'Scripted chatbots can\'t handle nuance. Customers get stuck in loops, abandon the chat, and call the support line anyway.',
+ },
+ {
+ title: 'Agents without guardrails',
+ description: 'Autonomous agents that can\'t escalate are a liability. One wrong refund, one leaked detail, and trust is gone.',
+ },
+ {
+ title: 'Context lost on handoff',
+ description: 'When a bot hands off to a human, the conversation history disappears. The customer repeats everything. CSAT drops.',
+ },
+ ],
+ architectureIntro: 'Three libraries give your support agents superpowers — and your customers a seamless experience.',
+ architectureLayers: [
+ {
+ library: 'Agent',
+ pkg: '@cacheplane/angular',
+ role: 'LangGraph interrupts let the agent pause before sensitive actions — refunds, account changes, escalations. Thread persistence preserves the full conversation across bot-to-human handoffs.',
+ },
+ {
+ library: 'Render',
+ pkg: '@cacheplane/render',
+ role: 'The agent renders structured UI — order summaries, refund confirmations, knowledge base cards — instead of dumping text. Customers see clean, actionable information.',
+ },
+ {
+ library: 'Chat',
+ pkg: '@cacheplane/chat',
+ role: 'Production-ready chat UI with streaming messages, tool call visibility, and interrupt panels. When the agent escalates, the human agent sees the full debug overlay with every step the AI took.',
+ },
+ ],
+ proofPoints: [
+ { metric: '70%', label: 'Tickets resolved autonomously — without human intervention' },
+ { metric: '0', label: 'Context lost on handoff — full thread history preserved' },
+ { metric: '3x', label: 'Faster resolution for escalated tickets with AI-prepared context' },
+ ],
+ ctaHeadline: 'Support agents that make your team better',
+ ctaSubtext: 'Download the guide or start a pilot. Resolve more tickets, escalate smarter, and keep your customers happy.',
+ metaTitle: 'Customer Support — Angular Agent Framework Solutions',
+ metaDescription: 'Build AI support agents with human escalation, full context handoff, and production-ready chat UI in Angular.',
+ },
+];
+
+export function getSolutionBySlug(slug: string): SolutionConfig | undefined {
+ return SOLUTIONS.find(s => s.slug === slug);
+}
+
+export function getAllSolutionSlugs(): string[] {
+ return SOLUTIONS.map(s => s.slug);
+}
diff --git a/docs/superpowers/plans/2026-04-13-solutions-landing-pages.md b/docs/superpowers/plans/2026-04-13-solutions-landing-pages.md
new file mode 100644
index 000000000..da2775811
--- /dev/null
+++ b/docs/superpowers/plans/2026-04-13-solutions-landing-pages.md
@@ -0,0 +1,1537 @@
+# Solutions Landing Pages 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:** Build 4 new pages — `/solutions` (index), `/solutions/compliance`, `/solutions/analytics`, `/solutions/customer-support` — as enterprise GTM-focused landing pages showing how all 3 Cacheplane libraries work together for specific use cases.
+
+**Architecture:** A shared data layer (`SolutionConfig` type) drives parameterized React components. Individual solution pages use a Next.js dynamic `[slug]` route with `generateStaticParams()`. All components follow the existing glassmorphism design system using `@cacheplane/design-tokens`. Each solution has a unique accent color (Amber, Teal, Blue-violet) while maintaining the site's visual language.
+
+**Tech Stack:** Next.js 15 (App Router, static export), React 19, Framer Motion, `@cacheplane/design-tokens`
+
+---
+
+## File Structure
+
+| Action | Path | Responsibility |
+|--------|------|----------------|
+| Create | `apps/website/src/lib/solutions-data.ts` | `SolutionConfig` type + 3 solution data objects |
+| Create | `apps/website/src/components/landing/solutions/SolutionHero.tsx` | Hero section with eyebrow, headline, subtitle, CTA |
+| Create | `apps/website/src/components/landing/solutions/SolutionProblem.tsx` | Pain-point cards section |
+| Create | `apps/website/src/components/landing/solutions/SolutionArchitecture.tsx` | 3-library architecture visual |
+| Create | `apps/website/src/components/landing/solutions/SolutionProofPoints.tsx` | Proof point metric cards |
+| Create | `apps/website/src/components/landing/solutions/SolutionFooterCTA.tsx` | Dark footer CTA (mirrors PilotFooterCTA pattern) |
+| Create | `apps/website/src/components/landing/solutions/SolutionsGrid.tsx` | Card grid for `/solutions` index page |
+| Create | `apps/website/src/app/solutions/page.tsx` | Index page at `/solutions` |
+| Create | `apps/website/src/app/solutions/[slug]/page.tsx` | Dynamic route for individual solution pages |
+| Modify | `apps/website/src/components/shared/Nav.tsx:8-14` | Add "Solutions" link to nav |
+| Modify | `apps/website/src/components/shared/Footer.tsx:136-166` | Add Solutions column to footer |
+
+---
+
+### Task 1: Solutions Data Layer
+
+**Files:**
+- Create: `apps/website/src/lib/solutions-data.ts`
+
+- [ ] **Step 1: Create the solutions data file with types and all 3 configs**
+
+```typescript
+// apps/website/src/lib/solutions-data.ts
+
+export interface SolutionPainPoint {
+ title: string;
+ description: string;
+}
+
+export interface ArchitectureLayer {
+ library: string;
+ pkg: string;
+ role: string;
+}
+
+export interface ProofPoint {
+ metric: string;
+ label: string;
+}
+
+export interface SolutionConfig {
+ slug: string;
+ color: string;
+ rgb: string;
+ eyebrow: string;
+ title: string;
+ subtitle: string;
+ painPoints: SolutionPainPoint[];
+ architectureIntro: string;
+ architectureLayers: ArchitectureLayer[];
+ proofPoints: ProofPoint[];
+ ctaHeadline: string;
+ ctaSubtext: string;
+ metaTitle: string;
+ metaDescription: string;
+}
+
+export const SOLUTIONS: SolutionConfig[] = [
+ {
+ slug: 'compliance',
+ color: '#D4850F',
+ rgb: '212,133,15',
+ eyebrow: 'Compliance & Audit',
+ title: 'AI agents your compliance\nteam will actually approve',
+ subtitle: 'Human-in-the-loop approvals, immutable audit trails, and deterministic testing — built into the framework, not bolted on.',
+ painPoints: [
+ {
+ title: 'Black-box AI decisions',
+ description: 'Regulators require explainability. Most agent frameworks stream opaque outputs with no audit trail.',
+ },
+ {
+ title: 'No human gate before action',
+ description: 'SOX, HIPAA, and GDPR demand human approval before consequential actions. Retrofitting interrupts is a rewrite.',
+ },
+ {
+ title: 'Untestable agent behavior',
+ description: 'Compliance needs reproducible test evidence. Non-deterministic LLM calls make that nearly impossible without the right tooling.',
+ },
+ ],
+ architectureIntro: 'Three libraries give your compliance team what they need — without slowing your engineering team down.',
+ architectureLayers: [
+ {
+ library: 'Agent',
+ pkg: '@cacheplane/angular',
+ role: 'Signal-native streaming with first-class interrupt support. Every agent action can require human approval before execution. Thread persistence gives you a complete, immutable history of every decision.',
+ },
+ {
+ library: 'Render',
+ pkg: '@cacheplane/render',
+ role: 'Approval workflows rendered as structured UI — not chat messages. The agent proposes an action, renders a confirmation card, and waits for the human gate before proceeding.',
+ },
+ {
+ library: 'Chat',
+ pkg: '@cacheplane/chat',
+ role: 'Debug overlay shows every tool call, interrupt, and state transition. Your compliance team can review exactly what happened, when, and why — in a UI they can understand.',
+ },
+ ],
+ proofPoints: [
+ { metric: '100%', label: 'Audit trail coverage — every agent action logged' },
+ { metric: '0', label: 'Unapproved actions — interrupt gates block execution' },
+ { metric: '<5 min', label: 'Time to reproduce any agent decision for auditors' },
+ ],
+ ctaHeadline: 'Ship compliant AI agents — without the compliance tax',
+ ctaSubtext: 'Download the guide or start a pilot. Your compliance team will thank you.',
+ metaTitle: 'Compliance & Audit — Angular Agent Framework Solutions',
+ metaDescription: 'Ship AI agents with human-in-the-loop approvals, audit trails, and deterministic testing. Built for SOX, HIPAA, and GDPR.',
+ },
+ {
+ slug: 'analytics',
+ color: '#0F7B8D',
+ rgb: '15,123,141',
+ eyebrow: 'Analytics & BI',
+ title: 'Natural language queries.\nReal-time dashboards.',
+ subtitle: 'Your users ask questions in plain English. The agent queries, visualizes, and streams results — all inside your Angular app.',
+ painPoints: [
+ {
+ title: 'BI tools users won\'t adopt',
+ description: 'Complex dashboards with steep learning curves. Business users want answers, not another tool to learn.',
+ },
+ {
+ title: 'Static reports, stale data',
+ description: 'Pre-built dashboards can\'t answer ad-hoc questions. By the time a report is built, the question has changed.',
+ },
+ {
+ title: 'Chat-only AI interfaces',
+ description: 'Text answers aren\'t enough for data. Users need charts, tables, and interactive visualizations — streamed in real time.',
+ },
+ ],
+ architectureIntro: 'Three libraries turn your LangGraph agent into a conversational BI tool your business users will actually use.',
+ architectureLayers: [
+ {
+ library: 'Agent',
+ pkg: '@cacheplane/angular',
+ role: 'Streams query results token-by-token as the LangGraph agent reasons over your data. Thread persistence means users can refine questions without re-running expensive queries.',
+ },
+ {
+ library: 'Render',
+ pkg: '@cacheplane/render',
+ role: 'The agent emits chart specs, data tables, and KPI cards as structured render specs. Your Angular components render them with streaming JSON patches — live-updating visualizations as data arrives.',
+ },
+ {
+ library: 'Chat',
+ pkg: '@cacheplane/chat',
+ role: 'Pre-built generative UI panel renders charts and tables inline with the conversation. Users ask follow-up questions and see updated visualizations without leaving the chat.',
+ },
+ ],
+ proofPoints: [
+ { metric: '10x', label: 'Faster time-to-insight vs. traditional BI dashboards' },
+ { metric: '0', label: 'SQL required — business users query in plain English' },
+ { metric: '<2s', label: 'First visual streamed — no waiting for full query completion' },
+ ],
+ ctaHeadline: 'Turn your data into conversations',
+ ctaSubtext: 'Download the guide or start a pilot. Ship a conversational BI experience in weeks, not quarters.',
+ metaTitle: 'Analytics & BI — Angular Agent Framework Solutions',
+ metaDescription: 'Build conversational BI with natural language queries, real-time streaming charts, and generative UI — all in Angular.',
+ },
+ {
+ slug: 'customer-support',
+ color: '#5B4FCF',
+ rgb: '91,79,207',
+ eyebrow: 'Customer Support',
+ title: 'AI agents that know when\nto escalate to a human',
+ subtitle: 'Resolve tickets autonomously, surface context instantly, and hand off to humans seamlessly — with full conversation history.',
+ painPoints: [
+ {
+ title: 'Chatbots that frustrate customers',
+ description: 'Scripted chatbots can\'t handle nuance. Customers get stuck in loops, abandon the chat, and call the support line anyway.',
+ },
+ {
+ title: 'Agents without guardrails',
+ description: 'Autonomous agents that can\'t escalate are a liability. One wrong refund, one leaked detail, and trust is gone.',
+ },
+ {
+ title: 'Context lost on handoff',
+ description: 'When a bot hands off to a human, the conversation history disappears. The customer repeats everything. CSAT drops.',
+ },
+ ],
+ architectureIntro: 'Three libraries give your support agents superpowers — and your customers a seamless experience.',
+ architectureLayers: [
+ {
+ library: 'Agent',
+ pkg: '@cacheplane/angular',
+ role: 'LangGraph interrupts let the agent pause before sensitive actions — refunds, account changes, escalations. Thread persistence preserves the full conversation across bot-to-human handoffs.',
+ },
+ {
+ library: 'Render',
+ pkg: '@cacheplane/render',
+ role: 'The agent renders structured UI — order summaries, refund confirmations, knowledge base cards — instead of dumping text. Customers see clean, actionable information.',
+ },
+ {
+ library: 'Chat',
+ pkg: '@cacheplane/chat',
+ role: 'Production-ready chat UI with streaming messages, tool call visibility, and interrupt panels. When the agent escalates, the human agent sees the full debug overlay with every step the AI took.',
+ },
+ ],
+ proofPoints: [
+ { metric: '70%', label: 'Tickets resolved autonomously — without human intervention' },
+ { metric: '0', label: 'Context lost on handoff — full thread history preserved' },
+ { metric: '3x', label: 'Faster resolution for escalated tickets with AI-prepared context' },
+ ],
+ ctaHeadline: 'Support agents that make your team better',
+ ctaSubtext: 'Download the guide or start a pilot. Resolve more tickets, escalate smarter, and keep your customers happy.',
+ metaTitle: 'Customer Support — Angular Agent Framework Solutions',
+ metaDescription: 'Build AI support agents with human escalation, full context handoff, and production-ready chat UI in Angular.',
+ },
+];
+
+export function getSolutionBySlug(slug: string): SolutionConfig | undefined {
+ return SOLUTIONS.find(s => s.slug === slug);
+}
+
+export function getAllSolutionSlugs(): string[] {
+ return SOLUTIONS.map(s => s.slug);
+}
+```
+
+- [ ] **Step 2: Verify the file compiles**
+
+Run: `cd apps/website && npx tsc --noEmit src/lib/solutions-data.ts 2>&1 | head -20`
+Expected: No errors (or use `npx next build` later for full check)
+
+- [ ] **Step 3: Commit**
+
+```bash
+git add apps/website/src/lib/solutions-data.ts
+git commit -m "feat(website): add solutions data layer with SolutionConfig type and 3 configs"
+```
+
+---
+
+### Task 2: SolutionHero Component
+
+**Files:**
+- Create: `apps/website/src/components/landing/solutions/SolutionHero.tsx`
+
+- [ ] **Step 1: Create the SolutionHero component**
+
+This component follows the `AngularHero` pattern — centered text with eyebrow, headline, subtitle, and dual CTAs. It accepts a `SolutionConfig` and uses the solution's accent color.
+
+```tsx
+// apps/website/src/components/landing/solutions/SolutionHero.tsx
+'use client';
+import { motion } from 'framer-motion';
+import Link from 'next/link';
+import { tokens } from '@cacheplane/design-tokens';
+import type { SolutionConfig } from '../../../lib/solutions-data';
+
+interface SolutionHeroProps {
+ solution: SolutionConfig;
+}
+
+export function SolutionHero({ solution }: SolutionHeroProps) {
+ return (
+
+
+
+
+ {solution.eyebrow}
+
+
+
+
+ {solution.title}
+
+
+
+ {solution.subtitle}
+
+
+
+
+ Download the Guide
+
+
+
+ );
+}
+```
+
+- [ ] **Step 2: Commit**
+
+```bash
+git add apps/website/src/components/landing/solutions/SolutionHero.tsx
+git commit -m "feat(website): add SolutionHero component"
+```
+
+---
+
+### Task 3: SolutionProblem Component
+
+**Files:**
+- Create: `apps/website/src/components/landing/solutions/SolutionProblem.tsx`
+
+- [ ] **Step 1: Create the SolutionProblem component**
+
+Displays 3 pain-point cards in a responsive grid. Follows the `ProblemSection` stat-card pattern (glass cards) but uses the solution's accent color.
+
+```tsx
+// apps/website/src/components/landing/solutions/SolutionProblem.tsx
+'use client';
+import { motion } from 'framer-motion';
+import { tokens } from '@cacheplane/design-tokens';
+import type { SolutionPainPoint } from '../../../lib/solutions-data';
+
+interface SolutionProblemProps {
+ color: string;
+ rgb: string;
+ painPoints: SolutionPainPoint[];
+}
+
+export function SolutionProblem({ color, rgb, painPoints }: SolutionProblemProps) {
+ return (
+
+
+
+
+ The Problem
+
+
+ Why teams stall
+
+
+
+
+ {painPoints.map((point, i) => (
+
+
+ {point.title}
+
+
+ {point.description}
+
+
+ ))}
+
+ );
+}
+```
+
+- [ ] **Step 2: Commit**
+
+```bash
+git add apps/website/src/components/landing/solutions/SolutionProblem.tsx
+git commit -m "feat(website): add SolutionProblem component"
+```
+
+---
+
+### Task 4: SolutionArchitecture Component
+
+**Files:**
+- Create: `apps/website/src/components/landing/solutions/SolutionArchitecture.tsx`
+
+- [ ] **Step 1: Create the SolutionArchitecture component**
+
+Shows how the 3 libraries work together for this use case. Follows the `TheStack` vertical card + connector pattern, but with solution-specific colors and descriptions.
+
+```tsx
+// apps/website/src/components/landing/solutions/SolutionArchitecture.tsx
+'use client';
+import { motion } from 'framer-motion';
+import Link from 'next/link';
+import { tokens } from '@cacheplane/design-tokens';
+import type { ArchitectureLayer } from '../../../lib/solutions-data';
+
+const LIBRARY_META: Record
= {
+ Agent: { color: tokens.colors.accent, rgb: '0,64,144', href: '/angular' },
+ Render: { color: tokens.colors.renderGreen, rgb: '26,122,64', href: '/render' },
+ Chat: { color: tokens.colors.chatPurple, rgb: '90,0,200', href: '/chat' },
+};
+
+interface SolutionArchitectureProps {
+ color: string;
+ intro: string;
+ layers: ArchitectureLayer[];
+}
+
+function Connector({ fromRgb, toRgb }: { fromRgb: string; toRgb: string }) {
+ return (
+
+ );
+}
+
+export function SolutionArchitecture({ color, intro, layers }: SolutionArchitectureProps) {
+ return (
+
+
+
+
+ The Architecture
+
+
+ Three libraries. One solution.
+
+
+ {intro}
+
+
+
+
+ {layers.map((layer, i) => {
+ const meta = LIBRARY_META[layer.library];
+ const prevMeta = i > 0 ? LIBRARY_META[layers[i - 1].library] : null;
+ return (
+
+ {i > 0 && prevMeta && (
+
+ )}
+
+
+
+ {layer.library}
+
+
+ {layer.pkg}
+
+
+
+
+ {layer.role}
+
+
+
+
+ );
+ })}
+
+ );
+}
+```
+
+- [ ] **Step 2: Commit**
+
+```bash
+git add apps/website/src/components/landing/solutions/SolutionArchitecture.tsx
+git commit -m "feat(website): add SolutionArchitecture component"
+```
+
+---
+
+### Task 5: SolutionProofPoints Component
+
+**Files:**
+- Create: `apps/website/src/components/landing/solutions/SolutionProofPoints.tsx`
+
+- [ ] **Step 1: Create the SolutionProofPoints component**
+
+Displays 3 metric cards in a grid. Uses the solution's accent color for the large metric numbers.
+
+```tsx
+// apps/website/src/components/landing/solutions/SolutionProofPoints.tsx
+'use client';
+import { motion } from 'framer-motion';
+import { tokens } from '@cacheplane/design-tokens';
+import type { ProofPoint } from '../../../lib/solutions-data';
+
+interface SolutionProofPointsProps {
+ color: string;
+ rgb: string;
+ proofPoints: ProofPoint[];
+}
+
+export function SolutionProofPoints({ color, rgb, proofPoints }: SolutionProofPointsProps) {
+ return (
+
+
+
+
+ The Results
+
+
+ What you can expect
+
+
+
+
+ {proofPoints.map((point, i) => (
+
+
+ {point.metric}
+
+
+ {point.label}
+
+
+ ))}
+
+ );
+}
+```
+
+- [ ] **Step 2: Commit**
+
+```bash
+git add apps/website/src/components/landing/solutions/SolutionProofPoints.tsx
+git commit -m "feat(website): add SolutionProofPoints component"
+```
+
+---
+
+### Task 6: SolutionFooterCTA + WhitePaper Gate
+
+**Files:**
+- Create: `apps/website/src/components/landing/solutions/SolutionFooterCTA.tsx`
+
+- [ ] **Step 1: Create the SolutionFooterCTA component**
+
+Dark-background CTA section matching the `PilotFooterCTA` pattern. Includes both a whitepaper download and pilot CTA.
+
+```tsx
+// apps/website/src/components/landing/solutions/SolutionFooterCTA.tsx
+'use client';
+import { motion } from 'framer-motion';
+import Link from 'next/link';
+
+interface SolutionFooterCTAProps {
+ color: string;
+ headline: string;
+ subtext: string;
+}
+
+export function SolutionFooterCTA({ color, headline, subtext }: SolutionFooterCTAProps) {
+ return (
+
+
+
+
+ Ready when you are
+
+
+
+ {headline}
+
+
+
+ {subtext}
+
+
+
+
+
+ App deployment license · $20,000 · 3-month co-pilot engagement
+
+
+
+ );
+}
+```
+
+- [ ] **Step 2: Commit**
+
+```bash
+git add apps/website/src/components/landing/solutions/SolutionFooterCTA.tsx
+git commit -m "feat(website): add SolutionFooterCTA component"
+```
+
+---
+
+### Task 7: Dynamic Solution Page Route
+
+**Files:**
+- Create: `apps/website/src/app/solutions/[slug]/page.tsx`
+
+- [ ] **Step 1: Create the dynamic route page**
+
+Uses `generateStaticParams()` to statically generate all 3 solution pages. Composes all solution section components. Follows the `angular/page.tsx` pattern with ambient gradient blobs.
+
+```tsx
+// apps/website/src/app/solutions/[slug]/page.tsx
+import { notFound } from 'next/navigation';
+import { tokens } from '@cacheplane/design-tokens';
+import { getSolutionBySlug, getAllSolutionSlugs } from '../../../lib/solutions-data';
+import { SolutionHero } from '../../../components/landing/solutions/SolutionHero';
+import { SolutionProblem } from '../../../components/landing/solutions/SolutionProblem';
+import { SolutionArchitecture } from '../../../components/landing/solutions/SolutionArchitecture';
+import { SolutionProofPoints } from '../../../components/landing/solutions/SolutionProofPoints';
+import { SolutionFooterCTA } from '../../../components/landing/solutions/SolutionFooterCTA';
+import { WhitePaperSection } from '../../../components/landing/WhitePaperSection';
+
+interface PageProps {
+ params: Promise<{ slug: string }>;
+}
+
+export function generateStaticParams() {
+ return getAllSolutionSlugs().map(slug => ({ slug }));
+}
+
+export async function generateMetadata({ params }: PageProps) {
+ const { slug } = await params;
+ const solution = getSolutionBySlug(slug);
+ if (!solution) return {};
+ return {
+ title: solution.metaTitle,
+ description: solution.metaDescription,
+ };
+}
+
+export default async function SolutionPage({ params }: PageProps) {
+ const { slug } = await params;
+ const solution = getSolutionBySlug(slug);
+ if (!solution) notFound();
+
+ return (
+
+ {/* Ambient gradient blobs */}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ By Use Case
+
+
+ Enterprise solutions
+
+
+ See how Angular Agent Framework solves real enterprise problems — from compliance to customer support.
+
+
+
+
+ {SOLUTIONS.map((sol, i) => (
+
+
+ {sol.eyebrow}
+
+
+
+ {sol.title}
+
+
+
+ {sol.subtitle}
+
+
+
+ {sol.proofPoints.map(pp => (
+
+ {pp.metric} {pp.label.split(' — ')[0]}
+
+ ))}
+
+
+
+ ))}
+
+ );
+}
+```
+
+- [ ] **Step 2: Create the solutions index page**
+
+```tsx
+// apps/website/src/app/solutions/page.tsx
+import { tokens } from '@cacheplane/design-tokens';
+import { SolutionsGrid } from '../../components/landing/solutions/SolutionsGrid';
+import { WhitePaperSection } from '../../components/landing/WhitePaperSection';
+import { PilotFooterCTA } from '../../components/landing/PilotFooterCTA';
+
+export const metadata = {
+ title: 'Solutions — Angular Agent Framework',
+ description: 'See how Angular Agent Framework solves enterprise challenges — compliance, analytics, and customer support.',
+};
+
+export default function SolutionsIndexPage() {
+ return (
+
+ {/* Ambient gradient blobs */}
+
+
+
+ {/* Hero */}
+
+
+
+ Solutions
+
+
+ AI agents built for how enterprises actually work
+
+
+ Angular Agent Framework gives your team the streaming, generative UI, and human-in-the-loop patterns that enterprise use cases demand.
+
+
+
+
+
+
+
+ Solutions
+
+```
+
+Also update the grid from `md:grid-cols-5` to `md:grid-cols-6` since there's now an extra column. In the same file, change:
+```html
+
+```
+to:
+```html
+
+```
+
+- [ ] **Step 3: Verify the build**
+
+Run: `cd apps/website && npx next build 2>&1 | tail -30`
+Expected: Build succeeds without errors.
+
+- [ ] **Step 4: Commit**
+
+```bash
+git add apps/website/src/components/shared/Nav.tsx apps/website/src/components/shared/Footer.tsx
+git commit -m "feat(website): add Solutions to nav and footer"
+```
diff --git a/docs/superpowers/plans/2026-04-14-landing-page-alignment.md b/docs/superpowers/plans/2026-04-14-landing-page-alignment.md
new file mode 100644
index 000000000..9ffcb485d
--- /dev/null
+++ b/docs/superpowers/plans/2026-04-14-landing-page-alignment.md
@@ -0,0 +1,1523 @@
+# Product Landing Page Alignment — 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:** Align the three product landing pages (`/angular`, `/render`, `/chat`) with the home page's narrative funnel — stronger footer CTAs, stack awareness, refreshed whitepaper copy, and mobile responsiveness.
+
+**Architecture:** Evolutionary changes to existing components. Three new StackSiblings components. No shared abstractions — each page keeps its own components with inline data.
+
+**Tech Stack:** Next.js 16 App Router, React 19, framer-motion, `@cacheplane/design-tokens`, Next.js `
`
+
+**Spec:** `docs/superpowers/specs/2026-04-13-landing-page-alignment-design.md`
+
+---
+
+### Task 1: Angular Hero — Stack Breadcrumb + Link Fixes
+
+**Files:**
+- Modify: `apps/website/src/components/landing/angular/AngularHero.tsx`
+
+- [ ] **Step 1: Add stack breadcrumb and fix internal links**
+
+Replace the full content of `AngularHero.tsx` with:
+
+```tsx
+// apps/website/src/components/landing/angular/AngularHero.tsx
+'use client';
+import { motion } from 'framer-motion';
+import Link from 'next/link';
+import { tokens } from '@cacheplane/design-tokens';
+
+const BADGES = ['Angular 20+', 'LangGraph', 'LangChain', 'DeepAgent'];
+
+export function AngularHero() {
+ return (
+
+
+
+ {/* Stack breadcrumb */}
+
+
+ Agent
+ →
+ →
+
+
+
+
+
+ @cacheplane/angular
+
+
+
+
+ Ship LangGraph agents in Angular — without building the plumbing
+
+
+
+ Signal-native streaming, thread persistence, interrupts, and deterministic testing. The complete agent primitive layer for Angular 20+.
+
+
+
+
+ Download the Guide
+
+
+
+
+ {BADGES.map(badge => (
+
+ {badge}
+
+ ))}
+
+
+ );
+}
+```
+
+- [ ] **Step 2: Verify the dev server compiles**
+
+Run: `cd /Users/blove/repos/stream-resource && npx nx dev website`
+Expected: No compilation errors for `/angular` route.
+
+- [ ] **Step 3: Commit**
+
+```bash
+git add apps/website/src/components/landing/angular/AngularHero.tsx
+git commit -m "feat(website): add stack breadcrumb and fix Link usage in AngularHero"
+```
+
+---
+
+### Task 2: Render Hero — Stack Breadcrumb + Link Fixes
+
+**Files:**
+- Modify: `apps/website/src/components/landing/render/RenderHero.tsx`
+
+- [ ] **Step 1: Add stack breadcrumb and fix internal links**
+
+Replace the full content of `RenderHero.tsx` with:
+
+```tsx
+// apps/website/src/components/landing/render/RenderHero.tsx
+'use client';
+import { motion } from 'framer-motion';
+import Link from 'next/link';
+import { tokens } from '@cacheplane/design-tokens';
+
+const BADGES = ['Angular 20+', 'Vercel json-render', 'Google A2UI', 'JSON Patch streaming'];
+
+export function RenderHero() {
+ return (
+
+
+
+ {/* Stack breadcrumb */}
+
+
+ →
+ Render
+ →
+
+
+
+
+
+ @cacheplane/render
+
+
+
+
+ Agents that render UI — without coupling to your frontend
+
+
+
+ Built on Vercel's json-render spec and Google's A2UI protocol — open standards you already trust. @cacheplane/render brings both to Angular with streaming JSON patches, component registries, and signal-native state.
+
+
+
+
+ Download the Guide
+
+
+
+
+ {BADGES.map(badge => (
+
+ {badge}
+
+ ))}
+
+
+ );
+}
+```
+
+- [ ] **Step 2: Commit**
+
+```bash
+git add apps/website/src/components/landing/render/RenderHero.tsx
+git commit -m "feat(website): add stack breadcrumb and fix Link usage in RenderHero"
+```
+
+---
+
+### Task 3: Chat Hero — Stack Breadcrumb + Link Fixes
+
+**Files:**
+- Modify: `apps/website/src/components/landing/chat-landing/ChatLandingHero.tsx`
+
+- [ ] **Step 1: Add stack breadcrumb and fix internal links**
+
+Replace the full content of `ChatLandingHero.tsx` with:
+
+```tsx
+// apps/website/src/components/landing/chat-landing/ChatLandingHero.tsx
+'use client';
+import { motion } from 'framer-motion';
+import Link from 'next/link';
+import { tokens } from '@cacheplane/design-tokens';
+
+const BADGES = ['Angular 20+', 'Vercel json-render', 'Google A2UI', 'WCAG accessible'];
+
+export function ChatLandingHero() {
+ return (
+
+
+
+ {/* Stack breadcrumb */}
+
+
+ →
+ →
+ Chat
+
+
+
+
+
+ @cacheplane/chat
+
+
+
+
+ Production agent chat UI in days, not sprints
+
+
+
+ The batteries-included Angular chat library. Built on the agent framework, Vercel's json-render spec, and Google's A2UI spec. Every feature included — debug, theming, generative UI, streaming — from day one.
+
+
+
+
+ Download the Guide
+
+
+
+
+ {BADGES.map(badge => (
+
+ {badge}
+
+ ))}
+
+
+ );
+}
+```
+
+- [ ] **Step 2: Commit**
+
+```bash
+git add apps/website/src/components/landing/chat-landing/ChatLandingHero.tsx
+git commit -m "feat(website): add stack breadcrumb and fix Link usage in ChatLandingHero"
+```
+
+---
+
+### Task 4: Angular Footer CTA — Dark Design Upgrade
+
+**Files:**
+- Modify: `apps/website/src/components/landing/angular/AngularFooterCTA.tsx`
+
+- [ ] **Step 1: Replace with dark design**
+
+Replace the full content of `AngularFooterCTA.tsx` with:
+
+```tsx
+// apps/website/src/components/landing/angular/AngularFooterCTA.tsx
+'use client';
+
+import { motion } from 'framer-motion';
+import Link from 'next/link';
+import { tokens } from '@cacheplane/design-tokens';
+
+export function AngularFooterCTA() {
+ return (
+
+
+
+
+ Ready when you are
+
+
+
+
+
+ The Angular Agent Framework closes the last-mile gap. Start with a conversation.
+
+
+
+
+
+ App deployment license · $20,000 · 3-month co-pilot engagement
+
+
+
+ );
+}
+```
+
+- [ ] **Step 2: Commit**
+
+```bash
+git add apps/website/src/components/landing/angular/AngularFooterCTA.tsx
+git commit -m "feat(website): upgrade AngularFooterCTA to dark design with pilot primary CTA"
+```
+
+---
+
+### Task 5: Render Footer CTA — Dark Design Upgrade
+
+**Files:**
+- Modify: `apps/website/src/components/landing/render/RenderFooterCTA.tsx`
+
+- [ ] **Step 1: Replace with dark design**
+
+Replace the full content of `RenderFooterCTA.tsx` with:
+
+```tsx
+// apps/website/src/components/landing/render/RenderFooterCTA.tsx
+'use client';
+
+import { motion } from 'framer-motion';
+import Link from 'next/link';
+import { tokens } from '@cacheplane/design-tokens';
+
+export function RenderFooterCTA() {
+ return (
+
+
+
+
+ Ready when you are
+
+
+
+
+
+ Decouple your agent's UI layer with open standards. Start with a conversation.
+
+
+
+
+
+ App deployment license · $20,000 · 3-month co-pilot engagement
+
+
+
+ );
+}
+```
+
+- [ ] **Step 2: Commit**
+
+```bash
+git add apps/website/src/components/landing/render/RenderFooterCTA.tsx
+git commit -m "feat(website): upgrade RenderFooterCTA to dark design with pilot primary CTA"
+```
+
+---
+
+### Task 6: Chat Footer CTA — Dark Design Upgrade
+
+**Files:**
+- Modify: `apps/website/src/components/landing/chat-landing/ChatLandingFooterCTA.tsx`
+
+- [ ] **Step 1: Replace with dark design**
+
+Replace the full content of `ChatLandingFooterCTA.tsx` with:
+
+```tsx
+// apps/website/src/components/landing/chat-landing/ChatLandingFooterCTA.tsx
+'use client';
+
+import { motion } from 'framer-motion';
+import Link from 'next/link';
+import { tokens } from '@cacheplane/design-tokens';
+
+export function ChatLandingFooterCTA() {
+ return (
+
+
+
+
+ Ready when you are
+
+
+
+
+
+ Production chat UI in days, not sprints. Start with a conversation.
+
+
+
+
+
+ App deployment license · $20,000 · 3-month co-pilot engagement
+
+
+
+ );
+}
+```
+
+- [ ] **Step 2: Commit**
+
+```bash
+git add apps/website/src/components/landing/chat-landing/ChatLandingFooterCTA.tsx
+git commit -m "feat(website): upgrade ChatLandingFooterCTA to dark design with pilot primary CTA"
+```
+
+---
+
+### Task 7: WhitePaperGate Copy Refresh — All Three Pages
+
+**Files:**
+- Modify: `apps/website/src/components/landing/angular/AngularWhitePaperGate.tsx`
+- Modify: `apps/website/src/components/landing/render/RenderWhitePaperGate.tsx`
+- Modify: `apps/website/src/components/landing/chat-landing/ChatLandingWhitePaperGate.tsx`
+
+- [ ] **Step 1: Update AngularWhitePaperGate copy**
+
+In `apps/website/src/components/landing/angular/AngularWhitePaperGate.tsx`:
+
+Change the eyebrow text from `Free Download` to `Agent Guide` (line 61).
+
+Change the subtitle (lines 73-74) from:
+```
+Six chapters covering the last-mile problem, the agent() API, thread persistence, interrupts, full LangGraph feature coverage, and deterministic testing.
+```
+to:
+```
+Six chapters covering the last-mile gap, the agent() API, thread persistence, interrupts, time-travel, and deterministic testing with MockAgentTransport.
+```
+
+Add after the closing `` of the subtitle (after line 75), before the download link:
+```tsx
+
+ Part of the Cacheplane Angular Agent Framework.
+
+```
+
+Also add `className="angular-wp-gate"` to the `
` and a mobile media query:
+```tsx
+
+
+```
+
+- [ ] **Step 2: Update RenderWhitePaperGate copy**
+
+In `apps/website/src/components/landing/render/RenderWhitePaperGate.tsx`:
+
+Change the eyebrow text from `Free Download` to `Render Guide`.
+
+Change the subtitle from:
+```
+Five chapters covering the coupling problem, declarative UI specs with Vercel's json-render standard, the component registry, streaming JSON patches, and state management.
+```
+to:
+```
+Five chapters covering the coupling problem, declarative UI specs with Vercel's json-render standard and Google's A2UI protocol, the component registry, streaming JSON patches, and signal-native state management.
+```
+
+Add the same "Part of the Cacheplane Angular Agent Framework." paragraph after the subtitle.
+
+Add `className="render-wp-gate"` and mobile media query matching the Angular pattern.
+
+- [ ] **Step 3: Update ChatLandingWhitePaperGate copy**
+
+In `apps/website/src/components/landing/chat-landing/ChatLandingWhitePaperGate.tsx`:
+
+Change the eyebrow text from `Free Download` to `Chat Guide`.
+
+Change the subtitle from:
+```
+Five chapters covering the sprint tax, batteries-included components, theming and design system integration, generative UI in chat, and debug tooling.
+```
+to:
+```
+Five chapters covering the sprint tax, batteries-included components, theming and design system integration, generative UI with Vercel json-render, Google A2UI support, and debug tooling.
+```
+
+Add the same "Part of the Cacheplane Angular Agent Framework." paragraph after the subtitle.
+
+Add `className="chat-wp-gate"` and mobile media query matching the Angular pattern.
+
+- [ ] **Step 4: Commit**
+
+```bash
+git add apps/website/src/components/landing/angular/AngularWhitePaperGate.tsx \
+ apps/website/src/components/landing/render/RenderWhitePaperGate.tsx \
+ apps/website/src/components/landing/chat-landing/ChatLandingWhitePaperGate.tsx
+git commit -m "feat(website): refresh WhitePaperGate copy and add mobile breakpoints"
+```
+
+---
+
+### Task 8: Stack Siblings — Angular
+
+**Files:**
+- Create: `apps/website/src/components/landing/angular/AngularStackSiblings.tsx`
+- Modify: `apps/website/src/app/angular/page.tsx`
+
+- [ ] **Step 1: Create AngularStackSiblings component**
+
+Create `apps/website/src/components/landing/angular/AngularStackSiblings.tsx`:
+
+```tsx
+'use client';
+import { motion } from 'framer-motion';
+import Link from 'next/link';
+import { tokens } from '@cacheplane/design-tokens';
+
+const SIBLINGS = [
+ {
+ tag: 'Gen UI',
+ pkg: '@cacheplane/render',
+ color: tokens.colors.renderGreen,
+ rgb: '26,122,64',
+ headline: 'Agents that render UI — on open standards',
+ href: '/render',
+ ctaLabel: 'Explore Render',
+ },
+ {
+ tag: 'Chat',
+ pkg: '@cacheplane/chat',
+ color: tokens.colors.chatPurple,
+ rgb: '90,0,200',
+ headline: 'Production chat UI in days, not sprints',
+ href: '/chat',
+ ctaLabel: 'Explore Chat',
+ },
+];
+
+export function AngularStackSiblings() {
+ return (
+
+
+
+
+ The Cacheplane Stack
+
+
+ This library is part of a cohesive three-layer architecture.
+
+
+
+
+ {SIBLINGS.map((lib, i) => (
+
+
+ {lib.tag}
+
+
+
+ {lib.pkg}
+
+
+
+ {lib.headline}
+
+
+
+ ))}
+
+ );
+}
+```
+
+- [ ] **Step 2: Add AngularStackSiblings to page layout**
+
+In `apps/website/src/app/angular/page.tsx`, add the import and insert between WhitePaperGate and FooterCTA:
+
+Add import:
+```tsx
+import { AngularStackSiblings } from '../../components/landing/angular/AngularStackSiblings';
+```
+
+Insert `
+
+
+
+ The Cacheplane Stack
+
+
+ This library is part of a cohesive three-layer architecture.
+
+
+
+
+ {SIBLINGS.map((lib, i) => (
+
+
+ {lib.tag}
+
+
+
+ {lib.pkg}
+
+
+
+ {lib.headline}
+
+
+
+ ))}
+
+ );
+}
+```
+
+- [ ] **Step 2: Add RenderStackSiblings to page layout**
+
+In `apps/website/src/app/render/page.tsx`, add the import and insert between WhitePaperGate and FooterCTA:
+
+Add import:
+```tsx
+import { RenderStackSiblings } from '../../components/landing/render/RenderStackSiblings';
+```
+
+Insert `
+
+
+
+ The Cacheplane Stack
+
+
+ This library is part of a cohesive three-layer architecture.
+
+
+
+
+ {SIBLINGS.map((lib, i) => (
+
+
+ {lib.tag}
+
+
+
+ {lib.pkg}
+
+
+
+ {lib.headline}
+
+
+
+ ))}
+
+ );
+}
+```
+
+- [ ] **Step 2: Add ChatLandingStackSiblings to page layout**
+
+In `apps/website/src/app/chat/page.tsx`, add the import and insert between WhitePaperGate and FooterCTA:
+
+Add import:
+```tsx
+import { ChatLandingStackSiblings } from '../../components/landing/chat-landing/ChatLandingStackSiblings';
+```
+
+Insert `` tag and add a `
+```
+
+- [ ] **Step 2: Add mobile breakpoint to RenderProblemSolution**
+
+Same pattern with `className="render-problem"`.
+
+- [ ] **Step 3: Add mobile breakpoint to ChatLandingProblemSolution**
+
+Same pattern with `className="chat-problem"`.
+
+- [ ] **Step 4: Commit**
+
+```bash
+git add apps/website/src/components/landing/angular/AngularProblemSolution.tsx \
+ apps/website/src/components/landing/render/RenderProblemSolution.tsx \
+ apps/website/src/components/landing/chat-landing/ChatLandingProblemSolution.tsx
+git commit -m "feat(website): add mobile breakpoints to ProblemSolution sections"
+```
+
+---
+
+### Task 12: Mobile Breakpoints — FeaturesGrid (All Three)
+
+**Files:**
+- Modify: `apps/website/src/components/landing/angular/AngularFeaturesGrid.tsx`
+- Modify: `apps/website/src/components/landing/render/RenderFeaturesGrid.tsx`
+- Modify: `apps/website/src/components/landing/chat-landing/ChatLandingFeaturesGrid.tsx`
+
+- [ ] **Step 1: Add mobile breakpoint to AngularFeaturesGrid**
+
+Add `className="angular-features"` to the `` tag and add a `
+```
+
+- [ ] **Step 2: Add mobile breakpoint to RenderFeaturesGrid**
+
+Same pattern with `className="render-features"`.
+
+- [ ] **Step 3: Add mobile breakpoint to ChatLandingFeaturesGrid**
+
+Same pattern with `className="chat-features"`.
+
+- [ ] **Step 4: Commit**
+
+```bash
+git add apps/website/src/components/landing/angular/AngularFeaturesGrid.tsx \
+ apps/website/src/components/landing/render/RenderFeaturesGrid.tsx \
+ apps/website/src/components/landing/chat-landing/ChatLandingFeaturesGrid.tsx
+git commit -m "feat(website): add mobile breakpoints to FeaturesGrid sections"
+```
+
+---
+
+### Task 13: Mobile Breakpoints — CodeShowcase (All Three)
+
+**Files:**
+- Modify: `apps/website/src/components/landing/angular/AngularCodeShowcase.tsx`
+- Modify: `apps/website/src/components/landing/render/RenderCodeShowcase.tsx`
+- Modify: `apps/website/src/components/landing/chat-landing/ChatLandingCodeShowcase.tsx`
+
+**Note:** These are `async` server components (no `'use client'`). We cannot use inline `
+```
+
+- [ ] **Step 2: Add mobile breakpoint to RenderCodeShowcase**
+
+Same pattern with `className="render-code"`.
+
+- [ ] **Step 3: Add mobile breakpoint to ChatLandingCodeShowcase**
+
+Same pattern with `className="chat-code"`.
+
+- [ ] **Step 4: Commit**
+
+```bash
+git add apps/website/src/components/landing/angular/AngularCodeShowcase.tsx \
+ apps/website/src/components/landing/render/RenderCodeShowcase.tsx \
+ apps/website/src/components/landing/chat-landing/ChatLandingCodeShowcase.tsx
+git commit -m "feat(website): add mobile breakpoints to CodeShowcase sections"
+```
+
+---
+
+### Task 14: Mobile Breakpoints — Comparison (All Three)
+
+**Files:**
+- Modify: `apps/website/src/components/landing/angular/AngularComparison.tsx`
+- Modify: `apps/website/src/components/landing/render/RenderComparison.tsx`
+- Modify: `apps/website/src/components/landing/chat-landing/ChatLandingComparison.tsx`
+
+- [ ] **Step 1: Add mobile breakpoint to AngularComparison**
+
+Add `className="angular-comparison"` to the `` tag and add a `
+```
+
+Also add `className="comparison-cell"` to the grid row divs (both the header and each row's container).
+
+- [ ] **Step 2: Add mobile breakpoint to RenderComparison**
+
+Same pattern with `className="render-comparison"`.
+
+- [ ] **Step 3: Add mobile breakpoint to ChatLandingComparison**
+
+Same pattern with `className="chat-comparison"`.
+
+- [ ] **Step 4: Verify the Comparison content is still accurate**
+
+Check if A2UI component count in RenderComparison and ChatLandingComparison is still "18". Grep the codebase:
+
+Run: `grep -r "A2UI" apps/website/src/components/landing/ --include="*.tsx" | grep -i "component"`
+
+Update the count if it has changed.
+
+- [ ] **Step 5: Commit**
+
+```bash
+git add apps/website/src/components/landing/angular/AngularComparison.tsx \
+ apps/website/src/components/landing/render/RenderComparison.tsx \
+ apps/website/src/components/landing/chat-landing/ChatLandingComparison.tsx
+git commit -m "feat(website): add mobile breakpoints to Comparison sections"
+```
+
+---
+
+### Task 15: Build Verification and Final Review
+
+**Files:**
+- None modified — verification only
+
+- [ ] **Step 1: Run the build**
+
+Run: `cd /Users/blove/repos/stream-resource && npx nx build website`
+Expected: Build succeeds with no errors.
+
+- [ ] **Step 2: Verify all three pages render**
+
+Run the dev server and check:
+- `/angular` — stack breadcrumb visible, dark footer CTA, stack siblings section, mobile breakpoints
+- `/render` — same pattern with green accents
+- `/chat` — same pattern with purple accents
+
+- [ ] **Step 3: Verify mobile responsiveness**
+
+Check each page at 375px viewport width. All sections should have reduced padding and comparison tables should scroll horizontally.
diff --git a/docs/superpowers/specs/2026-04-13-landing-page-alignment-design.md b/docs/superpowers/specs/2026-04-13-landing-page-alignment-design.md
new file mode 100644
index 000000000..665d5d462
--- /dev/null
+++ b/docs/superpowers/specs/2026-04-13-landing-page-alignment-design.md
@@ -0,0 +1,293 @@
+# Product Landing Page Alignment — Design Spec
+
+**Date:** 2026-04-13
+**Scope:** `/angular`, `/render`, `/chat` product landing pages
+**Philosophy:** Evolve, don't rebuild. Layer home page patterns into existing pages where they strengthen the narrative.
+
+---
+
+## Summary
+
+The home page was recently restructured into a 7-section narrative funnel with a strong dark footer CTA, unified stack section, and pilot program prominence. The three product landing pages (`/angular`, `/render`, `/chat`) still use the original patterns: weak glass-card footer CTAs, no stack awareness, no mobile breakpoints, and isolated messaging. This spec aligns the product pages with the home page's narrative without rebuilding them.
+
+## Changes Overview
+
+| Change | Scope | New Files |
+|--------|-------|-----------|
+| Hero stack breadcrumb | 3 files modified | None |
+| WhitePaperGate copy refresh | 3 files modified | None |
+| Footer CTA dark design upgrade | 3 files rewritten | None |
+| Stack siblings section | 3 new components | 3 files created |
+| Comparison light refresh | 3 files modified | None |
+| Mobile responsiveness | All product page components | None |
+| Internal route fix (`` → `` eyebrow in each hero. Shows all three libraries with the current page bolded/highlighted in its brand color, siblings muted and linked.
+
+### Per-Page Rendering
+
+- **Angular:** **Agent** (bold, `tokens.colors.accent`) → Render (muted, link to `/render`) → Chat (muted, link to `/chat`)
+- **Render:** Agent (muted, link to `/angular`) → **Render** (bold, `tokens.colors.renderGreen`) → Chat (muted, link to `/chat`)
+- **Chat:** Agent (muted, link to `/angular`) → Render (muted, link to `/render`) → **Chat** (bold, `tokens.colors.chatPurple`)
+
+### Styling
+
+- Font: `JetBrains Mono`, 10px, uppercase, `letterSpacing: 0.08em`
+- Current page: brand color, `fontWeight: 700`, not a link
+- Siblings: `tokens.colors.textMuted`, `fontWeight: 500`, Next.js `` eyebrow with `marginBottom: 0.75rem`
+- Wrapped in a `motion.div` matching the existing eyebrow animation
+
+### Technical Fixes (while in heroes)
+
+- Replace `` with ` `
+- Fine print: mono 10px, `rgba(255,255,255,0.4)`
+- `framer-motion` `whileInView` animation
+- `aria-labelledby` on the heading
+
+### Per-Page Customization
+
+| | Angular | Render | Chat |
+|---|---|---|---|
+| Eyebrow | Ready when you are | Ready when you are | Ready when you are |
+| Heading | Ready to ship your LangGraph agent? | Ready to ship your generative UI? | Ready to ship your agent chat? |
+| Subtext | The Angular Agent Framework closes the last-mile gap. Start with a conversation. | Decouple your agent's UI layer with open standards. Start with a conversation. | Production chat UI in days, not sprints. Start with a conversation. |
+| Primary CTA | Start Your Pilot → (`/pilot-to-prod`) | Start Your Pilot → (`/pilot-to-prod`) | Start Your Pilot → (`/pilot-to-prod`) |
+| Secondary CTA | Download the Guide (`/whitepapers/angular.pdf`) | Download the Guide (`/whitepapers/render.pdf`) | Download the Guide (`/whitepapers/chat.pdf`) |
+| Fine print | App deployment license · $20,000 · 3-month co-pilot engagement | Same | Same |
+
+### Mobile Breakpoint
+
+```css
+@media (max-width: 767px) {
+ .angular-footer-inner { padding-top: 4rem !important; padding-bottom: 4rem !important; }
+ .angular-footer-heading { font-size: clamp(28px, 6vw, 42px) !important; }
+}
+```
+
+(Same pattern for render and chat with appropriate class name prefixes.)
+
+### What's Removed
+
+The old three-button glass-card design (Download Guide / Pilot Program / View Docs) is fully replaced.
+
+---
+
+## Section 4: Stack Siblings Section (New)
+
+### What Changes
+
+New section between WhitePaperGate and FooterCTA on each page. Shows the other two libraries as compact cards.
+
+### Layout
+
+- Section eyebrow: "The Cacheplane Stack" — JetBrains Mono, 0.7rem, uppercase, `tokens.colors.accent`
+- Subtitle: "This library is part of a cohesive three-layer architecture." — EB Garamond, italic, 1.05rem, `tokens.colors.textSecondary`
+- Two cards in a `1fr 1fr` CSS grid, `gap: 16px`, `maxWidth: 860px`
+
+### Card Design
+
+Each card is a compact version of TheStack cards:
+- `borderLeft: 3px solid `
+- `borderRadius: 14px`
+- `background: rgba(, 0.03)`
+- `border: 1px solid rgba(, 0.15)`
+- `padding: 24px 20px`
+- Tag pill: sibling's tag ("Agent" / "Gen UI" / "Chat") in white on sibling's brand color background
+- Package name: JetBrains Mono, 0.76rem, sibling's brand color
+- Headline: one line from TheStack data (EB Garamond, 1.15rem)
+- CTA: "Explore Agent →" / "Explore Render →" / "Explore Chat →" — Next.js `