From e7683c023adb971afd450e5066ebe82a7cb0f094 Mon Sep 17 00:00:00 2001 From: Brian Love Date: Fri, 3 Apr 2026 17:05:00 -0700 Subject: [PATCH 01/66] docs: add glassy gradient redesign spec Design spec for refactoring the website from dark navy to light frosted-glass aesthetic with dual-brand Angular/LangGraph gradients. Co-Authored-By: Claude Opus 4.6 (1M context) --- .../2026-04-03-glassy-gradient-redesign.md | 223 ++++++++++++++++++ 1 file changed, 223 insertions(+) create mode 100644 docs/superpowers/specs/2026-04-03-glassy-gradient-redesign.md diff --git a/docs/superpowers/specs/2026-04-03-glassy-gradient-redesign.md b/docs/superpowers/specs/2026-04-03-glassy-gradient-redesign.md new file mode 100644 index 000000000..8f08aeca5 --- /dev/null +++ b/docs/superpowers/specs/2026-04-03-glassy-gradient-redesign.md @@ -0,0 +1,223 @@ +# Glassy & Gradient Website Redesign + +**Date**: 2026-04-03 +**Scope**: Website app (`apps/website`) — all pages +**Future alignment**: Cockpit app will adopt the same token system later + +## Overview + +Refactor the StreamResource website from a dark navy solid-background design to a light, frosted-glass aesthetic with dual-brand ambient gradients. The design communicates the "bridge between Angular and LangGraph" through a warm→cool gradient flow (Angular red → LangGraph blue) with translucent glass panels floating on top. + +## Design Decisions + +| Decision | Choice | +|----------|--------| +| Base palette | Light frosted (white/cream `#f8f9fc`) | +| Brand colors | Angular red `#DD0031` + LangGraph blue `#004090` / `#64C3FD` | +| Gradient style | Warm→cool flow (red top-left → lavender midpoint → blue bottom-right) | +| Brand prominence | Dual-brand gradient — red and blue define the ambient background | +| Glass intensity | Balanced (14-16px blur, 40-50% white opacity, subtle borders) | +| Approach | Token-first: update design tokens, then sweep components | +| Scope | All pages: landing, nav/footer, docs, pricing, API reference | + +## Design Tokens + +### Palette Replacement + +| Token | Current | New | +|-------|---------|-----| +| `bg` | `#080B14` | `#f8f9fc` | +| `accent` | `#6C8EFF` | `#004090` (LangGraph blue) | +| `accentLight` | n/a (new) | `#64C3FD` (LangGraph sky) | +| `angularRed` | `#DD0031` | `#DD0031` (unchanged) | +| `textPrimary` | `#EEF1FF` | `#1a1a2e` (dark ink) | +| `textSecondary` | `#8B96C8` | `#555770` (warm gray) | +| `textMuted` | `#4A527A` | `#8b8fa3` | +| `sidebarBg` | `#0A0D18` | `rgba(255,255,255,0.45)` (glass) | + +### New Glass Tokens + +| Token | Value | Purpose | +|-------|-------|---------| +| `glass.bg` | `rgba(255,255,255,0.45)` | Default glass panel fill | +| `glass.bgHover` | `rgba(255,255,255,0.55)` | Glass on hover | +| `glass.blur` | `16px` | Backdrop blur amount | +| `glass.border` | `rgba(255,255,255,0.6)` | Subtle white edge | +| `glass.shadow` | `0 4px 24px rgba(0,0,0,0.06)` | Soft diffuse shadow | + +### New Gradient Tokens + +| Token | Value | +|-------|-------| +| `gradient.warm` | `radial-gradient(circle, rgba(221,0,49,0.18), transparent 70%)` | +| `gradient.cool` | `radial-gradient(circle, rgba(0,64,144,0.18), transparent 70%)` | +| `gradient.coolLight` | `radial-gradient(circle, rgba(100,195,253,0.15), transparent 70%)` | +| `gradient.bgFlow` | `linear-gradient(135deg, #fef0f3 0%, #f4f0ff 45%, #eaf3ff 70%, #e6f4ff 100%)` | + +### Updated Glow Tokens + +| Token | New Value | +|-------|-----------| +| `glow.hero` | `0 0 60px rgba(0,64,144,0.15)` | +| `glow.demo` | `0 0 30px rgba(0,64,144,0.1)` | +| `glow.card` | `0 0 24px rgba(0,64,144,0.1)` | +| `glow.border` | `0 0 12px rgba(0,64,144,0.08)` | +| `glow.button` | `0 0 16px rgba(0,64,144,0.15)` | + +### Accent Variant Tokens + +| Token | New Value | +|-------|-----------| +| `accentGlow` | `rgba(0,64,144,0.2)` | +| `accentBorder` | `rgba(0,64,144,0.15)` | +| `accentBorderHover` | `rgba(0,64,144,0.3)` | +| `accentSurface` | `rgba(0,64,144,0.06)` | + +## Component Specifications + +### Nav (`components/shared/Nav.tsx`) + +- Background: `glass.bg` with `glass.blur` backdrop-filter +- Border: `glass.border` bottom edge (1px) +- Shadow: `glass.shadow` +- Logo text: `textPrimary` (dark ink) +- Nav links: `textSecondary`, hover → `accent` +- CTA button: solid `accent` background, white text, `glow.button` on hover +- Position: fixed, z-index above gradient blobs + +### Footer (`components/shared/Footer.tsx`) + +- Background: slightly more opaque glass `rgba(255,255,255,0.55)` +- Border-top: `glass.border` +- Text: dark-ink palette +- Link hover: `accent` blue +- Gradient flow continues behind (no hard color break) + +### Install Strip (`components/shared/InstallStrip.tsx`) + +- Container: glass panel (`glass.bg`, `glass.blur`, `glass.border`) +- Text: `textPrimary` +- Copy button: glass with accent border, hover → `glass.bgHover` + +### Landing Page — Hero (`components/landing/HeroTwoCol.tsx`) + +- Full-width `gradient.bgFlow` background +- Angular warm blob (`gradient.warm`) top-left +- LangGraph cool blob (`gradient.cool`) bottom-right +- LangGraph light blob (`gradient.coolLight`) center-right +- Badge tags: brand-colored glass (tinted translucent bg + brand borders) +- Headline: `textPrimary`, italic serif (EB Garamond unchanged) +- Subtitle: `textSecondary` +- Copy prompt button: glass panel with accent border +- Install strip: glass panel + +### Landing Page — Architecture Diagram (`components/landing/ArchDiagram.tsx`) + +- SVG nodes: glass fills `rgba(255,255,255,0.5)` with subtle stroke +- Edge lines: `accent` and `angularRed` at ~40% opacity +- Animated particles: softer glow for light background +- No separate container background — sits on gradient flow + +### Landing Page — Feature Grid (`components/landing/FeatureStrip.tsx`) + +- Cards: `glass.bg`, `glass.blur`, `glass.border` +- Hover: `glass.bgHover` + `glow.card` +- Icons/headings: `textPrimary` +- Descriptions: `textSecondary` +- Framer Motion entrance animations unchanged + +### Landing Page — Code Block (`components/landing/CodeBlock.tsx`) + +- Code theme: stays dark (tokyo-night via Shiki) — standard pattern for light sites +- Container: glass-bordered frame with `glass.border` and `glass.shadow` +- Tab headers: glass treatment + +### Landing Page — Live Demo (`components/landing/GenerativeUIFrame.tsx`) + +- Browser chrome: stays dark (simulating app window — intentional contrast) +- Outer frame: `glass.border` and `glass.shadow` to float it + +### Docs — Sidebar (`components/docs/DocsSidebar.tsx`) + +- Background: `glass.bg` with `glass.blur` +- Border-right: `glass.border` +- Active link: `accent` color with `accentSurface` background +- Section headers: `textPrimary` +- Links: `textSecondary`, hover → `accent` + +### Docs — Content (`components/docs/MdxRenderer.tsx`) + +- Background: `#ffffff` or `rgba(255,255,255,0.8)` — no glass (readability first) +- Prose styles: dark-ink text colors +- Code blocks within docs: stay dark themed +- Gradient visible in page background behind sidebar and margins + +### Pricing — Cards (`components/pricing/PricingGrid.tsx`) + +- Each card: glass panel treatment +- Featured card: more opaque glass with `accent` border glow +- Plan names: `textPrimary` +- Prices: `accent` blue +- Feature lists: `textSecondary` +- CTA buttons: solid `accent` (primary), glass + accent border (secondary) + +### Pricing — Comparison Table (`components/pricing/CompareTable.tsx`) + +- Container: glass panel +- Header row: slightly stronger glass `rgba(255,255,255,0.55)` +- Alternating rows: subtle opacity difference +- Check marks: `accent` blue + +### Pricing — Lead Form (`components/pricing/LeadForm.tsx`) + +- Container: glass panel +- Input fields: `rgba(255,255,255,0.6)` background with `glass.border` +- Submit button: solid `accent` + +### API Reference (`components/docs/ApiRefTable.tsx`) + +- Container: glass panel (same treatment as comparison table) +- Function signatures: monospace, dark ink +- Parameter types: `accent` blue +- Table borders: `glass.border` + +## Global Styles (`src/app/global.css`) + +- CSS custom properties updated to match all token values above +- New `@layer` or utility classes for glass treatment: + - `.glass` — applies bg, blur, border, shadow + - `.glass-hover` — hover state variant +- Gradient blob positioning classes for reuse across pages +- Body background: `bg` token (`#f8f9fc`) + +## Implementation Strategy + +1. **Update `design-tokens.ts`** — new palette, glass, gradient, glow tokens +2. **Update `global.css`** — CSS custom properties + glass utility classes +3. **Parallel component sweep** — dispatch subagents per area: + - Agent 1: Nav + Footer + - Agent 2: Landing page (Hero, ArchDiagram, FeatureStrip, CodeBlock, GenerativeUIFrame) + - Agent 3: Docs (Sidebar, MdxRenderer) + - Agent 4: Pricing (PricingGrid, CompareTable, LeadForm) + - Agent 5: API Reference (ApiRefTable) +4. **Visual review** — verify each page in browser preview + +## Files Modified + +- `apps/website/lib/design-tokens.ts` +- `apps/website/src/app/global.css` +- `apps/website/src/app/layout.tsx` (if body class changes needed) +- `apps/website/src/components/shared/Nav.tsx` +- `apps/website/src/components/shared/Footer.tsx` +- `apps/website/src/components/shared/InstallStrip.tsx` +- `apps/website/src/components/landing/HeroTwoCol.tsx` +- `apps/website/src/components/landing/ArchDiagram.tsx` +- `apps/website/src/components/landing/FeatureStrip.tsx` +- `apps/website/src/components/landing/CodeBlock.tsx` +- `apps/website/src/components/landing/GenerativeUIFrame.tsx` +- `apps/website/src/components/docs/DocsSidebar.tsx` +- `apps/website/src/components/docs/MdxRenderer.tsx` +- `apps/website/src/components/docs/ApiRefTable.tsx` +- `apps/website/src/components/pricing/PricingGrid.tsx` +- `apps/website/src/components/pricing/CompareTable.tsx` +- `apps/website/src/components/pricing/LeadForm.tsx` From ced0d14a5ad460ba56f64928c99debc38d97d4bd Mon Sep 17 00:00:00 2001 From: Brian Love Date: Fri, 3 Apr 2026 17:10:58 -0700 Subject: [PATCH 02/66] docs: add glassy gradient redesign implementation plan 22-task plan covering token updates, global CSS, and all component sweeps for the light frosted-glass redesign. Co-Authored-By: Claude Opus 4.6 (1M context) --- .../2026-04-03-glassy-gradient-redesign.md | 1743 +++++++++++++++++ 1 file changed, 1743 insertions(+) create mode 100644 docs/superpowers/plans/2026-04-03-glassy-gradient-redesign.md diff --git a/docs/superpowers/plans/2026-04-03-glassy-gradient-redesign.md b/docs/superpowers/plans/2026-04-03-glassy-gradient-redesign.md new file mode 100644 index 000000000..85c0435e1 --- /dev/null +++ b/docs/superpowers/plans/2026-04-03-glassy-gradient-redesign.md @@ -0,0 +1,1743 @@ +# Glassy & Gradient Website Redesign — 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:** Refactor the StreamResource website from dark navy to a light frosted-glass aesthetic with dual-brand Angular/LangGraph ambient gradients. + +**Architecture:** Token-first approach — update `design-tokens.ts` and `global.css` first, then sweep all components to consume the new tokens. The warm→cool gradient flow (Angular red top-left → LangGraph blue bottom-right) serves as the continuous page backdrop, with balanced glass panels (14-16px blur, 40-50% white opacity) floating on top. + +**Tech Stack:** Next.js 16, React 19, Tailwind CSS v4, Framer Motion, Shiki (code highlighting) + +**Spec:** `docs/superpowers/specs/2026-04-03-glassy-gradient-redesign.md` + +--- + +### Task 1: Update Design Tokens + +**Files:** +- Modify: `apps/website/lib/design-tokens.ts` + +- [ ] **Step 1: Replace design-tokens.ts with new palette, glass, gradient, and glow tokens** + +```typescript +/** Single source of truth for all brand design tokens. + * CSS custom properties in globals.css must match these values exactly. + */ +export const tokens = { + colors: { + bg: '#f8f9fc', + accent: '#004090', + accentLight: '#64C3FD', + accentGlow: 'rgba(0, 64, 144, 0.2)', + accentBorder: 'rgba(0, 64, 144, 0.15)', + accentBorderHover: 'rgba(0, 64, 144, 0.3)', + accentSurface: 'rgba(0, 64, 144, 0.06)', + textPrimary: '#1a1a2e', + textSecondary: '#555770', + textMuted: '#8b8fa3', + sidebarBg: 'rgba(255, 255, 255, 0.45)', + angularRed: '#DD0031', + }, + glass: { + bg: 'rgba(255, 255, 255, 0.45)', + bgHover: 'rgba(255, 255, 255, 0.55)', + blur: '16px', + border: 'rgba(255, 255, 255, 0.6)', + shadow: '0 4px 24px rgba(0, 0, 0, 0.06)', + }, + gradient: { + warm: 'radial-gradient(circle, rgba(221, 0, 49, 0.18), transparent 70%)', + cool: 'radial-gradient(circle, rgba(0, 64, 144, 0.18), transparent 70%)', + coolLight: 'radial-gradient(circle, rgba(100, 195, 253, 0.15), transparent 70%)', + bgFlow: 'linear-gradient(135deg, #fef0f3 0%, #f4f0ff 45%, #eaf3ff 70%, #e6f4ff 100%)', + }, + glow: { + hero: '0 0 60px rgba(0, 64, 144, 0.15)', + demo: '0 0 30px rgba(0, 64, 144, 0.1)', + card: '0 0 24px rgba(0, 64, 144, 0.1)', + border: '0 0 12px rgba(0, 64, 144, 0.08)', + button: '0 0 16px rgba(0, 64, 144, 0.15)', + }, +} as const; +``` + +- [ ] **Step 2: Verify the file compiles** + +Run: `cd apps/website && npx tsc --noEmit lib/design-tokens.ts` +Expected: No errors + +- [ ] **Step 3: Commit** + +```bash +git add apps/website/lib/design-tokens.ts +git commit -m "feat(website): update design tokens for glassy gradient redesign" +``` + +--- + +### Task 2: Update Global CSS + +**Files:** +- Modify: `apps/website/src/app/global.css` + +- [ ] **Step 1: Replace global.css with new theme variables and glass utilities** + +```css +@import "tailwindcss"; + +@theme { + --color-bg: #f8f9fc; + --color-accent: #004090; + --color-accent-light: #64C3FD; + --color-accent-glow: rgba(0, 64, 144, 0.2); + --color-accent-border: rgba(0, 64, 144, 0.15); + --color-accent-border-hover: rgba(0, 64, 144, 0.3); + --color-accent-surface: rgba(0, 64, 144, 0.06); + --color-text-primary: #1a1a2e; + --color-text-secondary: #555770; + --color-text-muted: #8b8fa3; + --color-sidebar-bg: rgba(255, 255, 255, 0.45); + --color-angular-red: #DD0031; + + --font-garamond: "EB Garamond", Georgia, serif; + --font-inter: Inter, system-ui, sans-serif; + --font-mono: "JetBrains Mono", monospace; +} + +:root { + --color-bg: #f8f9fc; + --color-accent: #004090; + --color-accent-light: #64C3FD; + --color-accent-glow: rgba(0, 64, 144, 0.2); + --color-accent-border: rgba(0, 64, 144, 0.15); + --color-accent-border-hover: rgba(0, 64, 144, 0.3); + --color-accent-surface: rgba(0, 64, 144, 0.06); + --color-text-primary: #1a1a2e; + --color-text-secondary: #555770; + --color-text-muted: #8b8fa3; + --color-sidebar-bg: rgba(255, 255, 255, 0.45); + --color-angular-red: #DD0031; + + --glass-bg: rgba(255, 255, 255, 0.45); + --glass-bg-hover: rgba(255, 255, 255, 0.55); + --glass-blur: 16px; + --glass-border: rgba(255, 255, 255, 0.6); + --glass-shadow: 0 4px 24px rgba(0, 0, 0, 0.06); + + --gradient-bg-flow: linear-gradient(135deg, #fef0f3 0%, #f4f0ff 45%, #eaf3ff 70%, #e6f4ff 100%); +} + +* { + box-sizing: border-box; +} + +body { + background-color: var(--color-bg); + color: var(--color-text-primary); + font-family: var(--font-inter); + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; +} + +/* Shiki code blocks — tokyo-night theme */ +.shiki { + padding: 1.5rem; + background: #1a1b26 !important; + overflow-x: auto; +} +.shiki code { + font-family: var(--font-mono), monospace; + font-size: 0.75rem; + line-height: 1.7; +} +``` + +- [ ] **Step 2: Verify the site builds** + +Run: `npx nx build website --skip-nx-cache 2>&1 | tail -5` +Expected: Build completes without CSS errors + +- [ ] **Step 3: Commit** + +```bash +git add apps/website/src/app/global.css +git commit -m "feat(website): update global CSS for light glassy theme" +``` + +--- + +### Task 3: Update Nav + +**Files:** +- Modify: `apps/website/src/components/shared/Nav.tsx` + +- [ ] **Step 1: Replace Nav.tsx with glass treatment** + +```tsx +'use client'; +import Link from 'next/link'; +import { tokens } from '../../../lib/design-tokens'; + +const links = [ + { label: 'Docs', href: '/docs' }, + { label: 'API', href: '/api-reference' }, + { label: 'Pricing', href: '/pricing' }, +]; + +export function Nav() { + return ( + + ); +} +``` + +- [ ] **Step 2: Verify in browser** + +Open http://localhost:3000 and confirm nav is frosted glass with dark text on light background. + +- [ ] **Step 3: Commit** + +```bash +git add apps/website/src/components/shared/Nav.tsx +git commit -m "feat(website): apply glass treatment to Nav" +``` + +--- + +### Task 4: Update Footer + +**Files:** +- Modify: `apps/website/src/components/shared/Footer.tsx` + +- [ ] **Step 1: Replace Footer.tsx with glass treatment** + +```tsx +import Link from 'next/link'; +import { tokens } from '../../../lib/design-tokens'; + +export function Footer() { + return ( +
+
+
+

StreamResource

+

The Enterprise Streaming Resource for LangChain and Angular

+
+
+
+ Product + Docs + API Reference + Pricing +
+
+
+
+ © {new Date().getFullYear()} StreamResource. All rights reserved. + PolyForm Noncommercial 1.0.0 · Commercial License +
+
+ ); +} +``` + +- [ ] **Step 2: Commit** + +```bash +git add apps/website/src/components/shared/Footer.tsx +git commit -m "feat(website): apply glass treatment to Footer" +``` + +--- + +### Task 5: Update InstallStrip + +**Files:** +- Modify: `apps/website/src/components/shared/InstallStrip.tsx` + +- [ ] **Step 1: Replace InstallStrip.tsx with glass treatment** + +```tsx +'use client'; +import { useState } from 'react'; +import { tokens } from '../../../lib/design-tokens'; + +const CMD = 'npm install @cacheplane/stream-resource'; + +export function InstallStrip() { + const [copied, setCopied] = useState(false); + + const copy = async () => { + await navigator.clipboard.writeText(CMD); + setCopied(true); + setTimeout(() => setCopied(false), 2000); + }; + + return ( +
(e.currentTarget.style.boxShadow = tokens.glow.border)} + onMouseLeave={(e) => (e.currentTarget.style.boxShadow = 'none')} + onClick={copy}> + {CMD} + +
+ ); +} +``` + +- [ ] **Step 2: Commit** + +```bash +git add apps/website/src/components/shared/InstallStrip.tsx +git commit -m "feat(website): apply glass treatment to InstallStrip" +``` + +--- + +### Task 6: Update CopyPromptButton + +**Files:** +- Modify: `apps/website/src/components/docs/CopyPromptButton.tsx` + +- [ ] **Step 1: Replace CopyPromptButton.tsx with new accent colors** + +```tsx +'use client'; +import { useState } from 'react'; +import { tokens } from '../../../lib/design-tokens'; + +interface Props { + prompt: string; + variant?: 'hero' | 'docs'; +} + +export function CopyPromptButton({ prompt, variant = 'docs' }: Props) { + const [copied, setCopied] = useState(false); + + const handleClick = async () => { + try { + await navigator.clipboard.writeText(prompt); + setCopied(true); + setTimeout(() => setCopied(false), 2000); + } catch { + // clipboard access denied — silently ignore + } + }; + + const isHero = variant === 'hero'; + + return ( + + ); +} +``` + +- [ ] **Step 2: Commit** + +```bash +git add apps/website/src/components/docs/CopyPromptButton.tsx +git commit -m "feat(website): update CopyPromptButton to new accent colors" +``` + +--- + +### Task 7: Update HeroTwoCol + +**Files:** +- Modify: `apps/website/src/components/landing/HeroTwoCol.tsx` + +- [ ] **Step 1: Replace HeroTwoCol.tsx with gradient background and glass treatment** + +```tsx +import { GenerativeUIFrame } from './GenerativeUIFrame'; +import { CopyPromptButton } from '../docs/CopyPromptButton'; +import { getPromptBySlug } from '../../lib/docs'; +import { tokens } from '../../lib/design-tokens'; + +function LangChainBadge() { + return ( + + LC + LangChain + + ); +} + +function AngularBadge() { + return ( + + + + + + + Angular + + ); +} + +export async function HeroTwoCol() { + const prompt = getPromptBySlug(['getting-started']) ?? ''; + + return ( +
+ + + {/* Ambient gradient blobs */} +
+
+
+ + {/* Left column — 55% */} +
+
+ + +
+ +

+ The Enterprise Streaming Resource for LangChain and{' '} + Angular +

+ +

+ Full parity with React{' '} + useStream() + {' '}— built natively for Angular 20+. +

+ +
+ + + npm install @cacheplane/stream-resource + +
+
+ + {/* Right column — 45% */} +
+ +
+
+ ); +} +``` + +- [ ] **Step 2: Verify in browser** + +Open http://localhost:3000 and confirm hero has warm→cool gradient with floating blobs and dark text. + +- [ ] **Step 3: Commit** + +```bash +git add apps/website/src/components/landing/HeroTwoCol.tsx +git commit -m "feat(website): apply gradient background and glass to Hero" +``` + +--- + +### Task 8: Update ArchDiagram + +**Files:** +- Modify: `apps/website/src/components/landing/ArchDiagram.tsx` + +- [ ] **Step 1: Replace ArchDiagram.tsx with light-theme SVG treatment** + +```tsx +'use client'; +import { motion } from 'framer-motion'; +import { tokens } from '../../lib/design-tokens'; + +const NODES = [ + { id: 'angular', label: 'Angular App', x: 60, y: 100 }, + { id: 'sr', label: 'streamResource()', x: 260, y: 100 }, + { id: 'transport', label: 'FetchStreamTransport', x: 480, y: 100 }, + { id: 'langgraph', label: 'LangGraph Server', x: 700, y: 100 }, +]; + +const EDGES = [ + { from: 'angular', to: 'sr', d: 'M 140 100 L 260 100' }, + { from: 'sr', to: 'transport', d: 'M 390 100 L 480 100' }, + { from: 'transport', to: 'langgraph', d: 'M 620 100 L 700 100' }, +]; + +export function ArchDiagram() { + return ( +
+

Architecture

+ + + + + + + + + {EDGES.map((edge) => ( + + + + + + + ))} + {NODES.map((node) => ( + + + + + {node.label} + + + ))} + + +
+ ); +} +``` + +- [ ] **Step 2: Commit** + +```bash +git add apps/website/src/components/landing/ArchDiagram.tsx +git commit -m "feat(website): update ArchDiagram for light glassy theme" +``` + +--- + +### Task 9: Update FeatureStrip + +**Files:** +- Modify: `apps/website/src/components/landing/FeatureStrip.tsx` + +- [ ] **Step 1: Replace FeatureStrip.tsx with glass card treatment** + +```tsx +'use client'; +import { motion } from 'framer-motion'; +import { tokens } from '../../lib/design-tokens'; + +const FEATURES = [ + { icon: '\u26A1', title: 'Token-by-token streaming', desc: 'Real-time SSE streaming via FetchStreamTransport. Messages update as each token arrives.' }, + { icon: '\uD83D\uDD17', title: 'Thread persistence', desc: 'MemorySaver-backed threads survive page refreshes via threadId signal and onThreadId callback.' }, + { icon: '\uD83D\uDCD0', title: 'Angular Signals', desc: 'Every state slice is an Angular Signal. Works with OnPush, async pipe, and computed().' }, + { icon: '\uD83E\uDDEA', title: 'MockStreamTransport', desc: 'Deterministic unit testing. Script event sequences and step through them in your specs.' }, + { icon: '\uD83D\uDD27', title: 'Full useStream() parity', desc: 'Interrupts, tool calls, subagents, branch history, joinStream \u2014 everything the React SDK exposes.' }, + { icon: '\uD83C\uDFE2', title: 'Source-available licensing', desc: 'Free for noncommercial use under PolyForm Noncommercial 1.0.0. Commercial license at $500/seat/year or $2,000/app deployment.' }, +]; + +export function FeatureStrip() { + return ( +
+

Features

+
+ {FEATURES.map((f, i) => ( + + +

{f.title}

+

{f.desc}

+ + ))} +
+
+ ); +} +``` + +- [ ] **Step 2: Commit** + +```bash +git add apps/website/src/components/landing/FeatureStrip.tsx +git commit -m "feat(website): apply glass cards to FeatureStrip" +``` + +--- + +### Task 10: Update CodeBlock + +**Files:** +- Modify: `apps/website/src/components/landing/CodeBlock.tsx` + +- [ ] **Step 1: Replace CodeBlock.tsx with glass-bordered container** + +```tsx +import { codeToHtml } from 'shiki'; +import { tokens } from '../../lib/design-tokens'; + +const EXAMPLE = `// app.config.ts +provideStreamResource({ apiUrl: 'http://localhost:2024' }) + +// chat.component.ts +const chat = streamResource<{ messages: BaseMessage[] }>({ + assistantId: 'chat_agent', + threadId: signal(this.threadId), + onThreadId: (id) => localStorage.setItem('threadId', id), +});`; + +const TEMPLATE_EXAMPLE = ` +@for (msg of chat.messages(); track $index) { +

{{ msg.content }}

+} +`; + +export async function CodeBlock() { + const tsHtml = await codeToHtml(EXAMPLE, { + lang: 'typescript', + theme: 'tokyo-night', + }); + + const templateHtml = await codeToHtml(TEMPLATE_EXAMPLE, { + lang: 'html', + theme: 'tokyo-night', + }); + + return ( +
+

30-second example

+
+
+
+
+
+ ); +} +``` + +- [ ] **Step 2: Commit** + +```bash +git add apps/website/src/components/landing/CodeBlock.tsx +git commit -m "feat(website): apply glass border to CodeBlock" +``` + +--- + +### Task 11: Update GenerativeUIFrame + +**Files:** +- Modify: `apps/website/src/components/landing/GenerativeUIFrame.tsx` + +- [ ] **Step 1: Replace GenerativeUIFrame.tsx — keep dark browser chrome, add glass outer frame** + +```tsx +'use client'; +import { useEffect, useRef } from 'react'; +import { tokens } from '../../lib/design-tokens'; + +export function GenerativeUIFrame() { + const frameRef = useRef(null); + + useEffect(() => { + const frame = frameRef.current; + if (!frame) return; + + const handleMouseMove = (e: MouseEvent) => { + const rect = frame.getBoundingClientRect(); + const cx = rect.left + rect.width / 2; + const cy = rect.top + rect.height / 2; + const distance = Math.hypot(e.clientX - cx, e.clientY - cy); + const intensity = 0.08 + 0.2 * Math.max(0, 1 - distance / 400); + const blur = 10 + intensity * 40; + frame.style.boxShadow = `0 0 ${blur}px rgba(0,64,144,${intensity.toFixed(2)})`; + }; + + document.addEventListener('mousemove', handleMouseMove); + return () => document.removeEventListener('mousemove', handleMouseMove); + }, []); + + return ( +
+ {/* Browser chrome */} +
+
+
+
+
+
+
+ localhost:4200 +
+
+ + {/* Animated content area */} +
+ + +
+ {/* Phase 1: streaming chat reply */} +
+
AI
+
+ Here + is + your + quarterly + report + summary. +
+
+ + {/* Phase 2: generative card */} +
+
Q1 2026 Revenue
+
Revenue up 24% YoY. Strongest quarter on record across all segments.
+
View details →
+
+ + {/* Phase 3: streaming table */} +
+
+ SegmentRevenueGrowth +
+ {[ + { seg: 'Enterprise', rev: '$4.2M', growth: '+31%', cls: 'row1' }, + { seg: 'SMB', rev: '$2.1M', growth: '+18%', cls: 'row2' }, + { seg: 'Developer', rev: '$0.8M', growth: '+42%', cls: 'row3' }, + ].map((r) => ( +
+ {r.seg} + {r.rev} + {r.growth} +
+ ))} +
+
+
+
+ ); +} +``` + +- [ ] **Step 2: Commit** + +```bash +git add apps/website/src/components/landing/GenerativeUIFrame.tsx +git commit -m "feat(website): update GenerativeUIFrame outer frame for glass theme" +``` + +--- + +### Task 12: Update Landing Page (page.tsx) + +**Files:** +- Modify: `apps/website/src/app/page.tsx` + +- [ ] **Step 1: Update page.tsx — apply gradient background and update live demo section colors** + +```tsx +import Script from 'next/script'; +import { HeroTwoCol } from '../components/landing/HeroTwoCol'; +import { ArchDiagram } from '../components/landing/ArchDiagram'; +import { FeatureStrip } from '../components/landing/FeatureStrip'; +import { CodeBlock } from '../components/landing/CodeBlock'; +import { tokens } from '../lib/design-tokens'; + +export default async function HomePage() { + return ( +
+ {/* Ambient gradient blobs that extend beyond the hero */} +
+
+ + + + + + + {/* Angular Elements live demo */} +
+

Live Demo

+
+ {/* @ts-expect-error — custom element registered by Angular Elements bundle */} + +
+