From 201f52bac1920bbc7b136a83cba735aa8b6d0915 Mon Sep 17 00:00:00 2001 From: Brian Love Date: Mon, 13 Apr 2026 20:58:11 -0700 Subject: [PATCH 01/20] docs: add solutions landing pages implementation plan Co-Authored-By: Claude Opus 4.6 --- .../2026-04-13-solutions-landing-pages.md | 1537 +++++++++++++++++ 1 file changed, 1537 insertions(+) create mode 100644 docs/superpowers/plans/2026-04-13-solutions-landing-pages.md 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} → + + +
+ ); + })} +
+
+ ); +} +``` + +- [ ] **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} +

+ +
+ + Start Your Pilot → + + + Download the Guide + +
+ +

+ 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 */} +