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}
+
+
+
+
+ Start a Pilot
+
+
+ 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}
+
+
+
+ Explore {layer.library} →
+
+
+
+ );
+ })}
+
+ The Results
+
+
+ What you can expect
+
+
+
+
+ {proofPoints.map((point, i) => (
+
+
+ {point.metric}
+
+
+ {point.label}
+
+
+ ))}
+
+ 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]}
+
+ ))}
+
+
+
+ Learn more →
+
+
+ ))}
+
+ {/* 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
+ (e.currentTarget.style.color = tokens.colors.accent)}
+ onMouseLeave={(e) => (e.currentTarget.style.color = tokens.colors.textSecondary)}>
+ Compliance
+
+ (e.currentTarget.style.color = tokens.colors.accent)}
+ onMouseLeave={(e) => (e.currentTarget.style.color = tokens.colors.textSecondary)}>
+ Analytics
+
+ (e.currentTarget.style.color = tokens.colors.accent)}
+ onMouseLeave={(e) => (e.currentTarget.style.color = tokens.colors.textSecondary)}>
+ Customer Support
+
+
+```
+
+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"
+```