fix(website): replace unsourced stats with verified Gartner citations (#33)

* feat(chat): ship-readiness polish — Tailwind, auto-scroll, markdown, a11y (#27)

* docs(chat): add ship-readiness polish implementation plan

Addresses all 19 audit issues: theme consolidation, Tailwind conversion,
auto-scroll, textarea auto-expand, markdown rendering, empty state,
responsive sidebar, SVG icons, ARIA, and API cleanup.


* feat(chat): consolidate theme into shared TS module, add icons + markdown utils


* feat(chat): convert ChatComponent to Tailwind, add auto-scroll + empty state + responsive sidebar

- Replace 80+ lines of inlined CSS vars with CHAT_THEME_STYLES import
- Add CHAT_MARKDOWN_STYLES + renderMarkdown for AI message rendering
- Convert all inline style="" attributes to Tailwind utility classes
- Add auto-scroll via viewChild + effect tracking message count
- Add empty state when no messages and not loading
- Make thread sidebar responsive with hidden md:flex + mobile toggle
- Add ARIA attributes: role=log, aria-live=polite, role=navigation
- Use ViewEncapsulation.None for markdown styles


* feat(chat): convert primitives to Tailwind, add textarea auto-expand + focused signal


* feat(chat): convert ChatDebug + sub-components to theme-aware Tailwind


* feat(chat): convert remaining compositions to Tailwind with SVG icons + theme vars


* feat(chat): clean up public API, add marked peer dep, verify build

Remove legacy cp-chat/cp-chat-input/cp-chat-message components and
migrate all cockpit examples to the new ChatComponent composition.
Export shared styles, icons, and markdown utilities from public API.
Update ChatConfig with renderRegistry, avatarLabel, assistantName.
Add marked as optional peer dep and fix dynamic import for library
build. Add @source directive to cockpit styles for Tailwind scanning.


---------


* Rebrand to Angular Stream Resource (#28)

* docs: add rebrand design spec for Angular Stream Resource

* docs: add implementation plan for Angular Stream Resource rebrand

* docs: rebrand StreamResource → Angular Stream Resource in README and COMMERCIAL

Update product name in prose/marketing contexts: README alt text and
license section, COMMERCIAL.md license header.

* docs: rebrand StreamResource → Angular Stream Resource in website shared components

Update product name in layout metadata title, Nav logo link text,
Footer brand name, and Footer copyright line.

* docs: rebrand StreamResource → Angular Stream Resource in landing and llms.txt

Update product name in ProblemSection badge text, GenerativeUIFrame
aria-label, and llms.txt route title and description line.

* docs: rebrand StreamResource → Angular Stream Resource in documentation files

Update product name in headings and prose across limitations.md and
four design specs (titles, overview sentences, section headings).

* docs: rebrand stream-resource → Angular Stream Resource in LLM context files

Update product name in the H1 title of AGENTS.md and CLAUDE.md.

* docs: rebrand remaining spec and plan references to Angular Stream Resource

* docs: fix remaining brand references missed in initial pass

* feat(website): add narrative sections, pilot-to-prod page, and rebrand integration (#29)

* fix(website): add track shake animation to ProblemSection stall phase


* fix(website): ProblemSection quality fixes — timer cleanup, unique SVG ID, aria-hidden, correct import

- Store setTimeout IDs and clear them on unmount (prevents state updates on unmounted component)
- Use useId() to generate unique hatchId per instance (prevents SVG pattern id collision)
- Add role=progressbar + aria-valuenow to track container for screen readers
- Add aria-hidden=true to decorative animated elements (pins, labels, badge, counter)
- Fix import: use local lib/design-tokens instead of unresolved @cacheplane/design-tokens
- Add invariant comment for done-timeout vs counter-duration coupling


* feat: add FullStackSection with animated stack diagram and roadmap strip


* feat: add ChatFeaturesSection with 4 interactive chat scenarios


* feat: add FairComparisonSection comparison table


* feat: wire ProblemSection, FullStackSection, ChatFeaturesSection, FairComparisonSection into landing page

- Insert ProblemSection + FullStackSection + ChatFeaturesSection after StatsStrip
- Insert FairComparisonSection after DeepAgentsShowcase
- Add two ambient gradient blobs for extended page height
- Task 5 (FeatureStrip copy): no-op — the problematic 'no established pattern' copy was not present in this branch


* chore: add puppeteer devDependency and generate-whitepaper script


* feat: add whitepaper signup API route with NDJSON persistence


* feat: add whitepaper generation script


* feat: add WhitePaperSection with free download and optional lead-gen form


* feat: add WhitePaperSection to landing page; remove useStream parity copy from FeatureStrip


* fix(whitepaper): add JetBrains Mono to Google Fonts URL and regenerate preview

Fixes missing code font in whitepaper output. Regenerates whitepaper-preview.html
with correct 'EB Garamond' and 'JetBrains Mono' font references throughout.


* feat: add PilotHero component and /pilot-to-prod page skeleton

* fix: PilotHero responsive padding, eyebrow style conflict, page metadata

* feat: add WhatIsIncluded 3-column component for pilot-to-prod page


* feat: add HowItWorks 3-phase timeline for pilot-to-prod page

* feat: add PricingSignal pricing callout for pilot-to-prod page

* feat: add WhitePaperGate 5-field lead gen form for pilot-to-prod page

* fix: change role=alert to role=status to match aria-live=polite in WhitePaperGate

* feat: add PilotFooterCTA and wire complete pilot-to-prod page

* fix: use tokens.colors.accent in PilotFooterCTA, add aria-hidden to page blobs

* feat: add Pilot to Prod nav link and restructure homepage (remove FeatureStrip/CockpitCTA/CodeBlock, add PilotProgram CTA)

* fix: correct design-tokens import path in pilot-to-prod page (3 levels up)

* fix: apply full review findings — messaging, mobile, UX, and RiskRemoval section

- Remove useStream() parity messaging from HeroTwoCol, WhatIsIncluded, StatsStrip
- Fix PricingSignal: remove ambiguous '/year', clarify as fixed fee + pilot included
- Add PricingSignal mobile padding reduction via media query
- Fix ProblemSection stat grid to collapse on mobile (auto-fit minmax)
- Add RiskRemoval section to pilot-to-prod page (between PricingSignal and WhitePaperGate)
- Fix Nav Examples link: external=true, target=_blank, rel=noopener noreferrer
- Fix WhitePaperGate: role field sent in message body, not merged into company string
- Fix PilotFooterCTA: replace broken whileHover borderColor with CSS class hover
- Fix PilotHero: remove opacity from initial animations (prevents blank hero flash)
- Increase PilotHero CTA padding to meet 44px touch target


* fix: remove remaining useStream parity messaging from layout, Footer, and ValueProps


* fix: second review pass — docs messaging, title, broken link, a11y labels

- introduction.mdx: remove parity/useStream opening line, use Signal-native positioning
- AGENTS.md.template + CLAUDE.md.template: update tagline to Signal-native
- layout.tsx: update <title> from LangChain to LangGraph
- Footer.tsx: fix /api-reference → /docs/api/stream-resource (was 404)
- PilotHero.tsx: add aria-hidden to decorative gradient blobs
- WhitePaperSection.tsx: add sr-only labels + aria-label to name/email inputs
- LeadForm.tsx (pricing): add sr-only labels + aria-label to all four form inputs


* feat: add whitepaper.pdf to public directory

Generated from whitepaper-preview.html via Puppeteer. All 6 chapters
present (Streaming State Management, Thread Persistence, Tool-Call
Rendering, Human Approval Flows, Generative UI, Deterministic Testing).
Fixes dead 'Download the Guide' CTAs on pilot-to-prod and homepage.


* feat: citation badges on stats, pricing reframe to app deployment license

Citation badges:
- New CitationBadge component — click-to-open popover with source, stat, note, and link
- 66% stat → Stack Overflow Developer Survey 2025
- 31% stat → ISG AI Adoption Reports
- 75% stat → Stack Overflow Developer Survey 2025
- Keyboard (Escape) and outside-click dismissal, ARIA dialog role

Pricing reframe (app deployment license):
- Remove ALL refund/money-back/guarantee language site-wide
- PilotHero: trust line → "App deployment license · $20,000 · 3-month co-pilot engagement"
- PilotHero: subheadline removes "guaranteed outcome"
- WhatIsIncluded: card 3 renamed from "Production Guarantee" → "App Deployment License"
- HowItWorks: phase 3 removes "full refund" language, deliverable → "Production deployment"
- PricingSignal: subtitle + features list updated to license/co-pilot framing
- RiskRemoval: section reframed from guarantee → "What's included in the license"
  Replaces money-back card with "We work alongside your team" card
- PilotFooterCTA: fine print updated
- pilot-to-prod/page.tsx: meta description updated


* feat: subtler citation badge + citations on all 77% claims

CitationBadge:
- Reduced to 13px, transparent background, faint border (rgba 0.2)
- Text color rgba(0,64,144,0.35) at rest — nearly invisible until hovered
- No fill on idle state, border-only approach

New citation placements:
- PilotHero subheadline: 77% → McKinsey State of AI 2024
- PilotFooterCTA body copy: 77% → McKinsey State of AI 2024
- HomePilotCTA (new component): extracts inline pilot CTA from page.tsx
  so it can be a client component with CitationBadge on the 77% claim
- page.tsx: replaces inline section with <HomePilotCTA />


* docs: add FullStackSection redesign spec (EM/CTO layer narrative + Gen UI bug fix)

* feat(website): redesign FullStackSection for EM/CTO audience

* docs: apply Angular Stream Resource rebrand to narrative components

* chore: sync package-lock.json after merge

* fix(website): update e2e test for new landing page structure

---------


* fix(website): replace unsourced stats with verified Gartner and Stack Overflow citations

- Replace fabricated 77% McKinsey stat with Gartner "50% of GenAI projects
  abandoned after POC" (Jan 2026) across ProblemSection, PilotHero,
  HomePilotCTA, and PilotFooterCTA
- Replace stale ISG 31% stat with same Gartner citation in ProblemSection
- Update progress bar animation to stall at 50% instead of 77%
- Update FairComparisonSection to reference @langchain/langgraph-sdk
  explicitly in column header and subtitle
- All three stat cards now cite verified sources: Stack Overflow 2025
  Developer Survey (66%, 75%) and Gartner GenAI Project Failure 2026 (50%)


---------

Author: blove

apps/website/src/components/landing/FairComparisonSection.tsx

@@ -74,7 +74,7 @@ export function FairComparisonSection() {
           fontStyle: 'italic', fontSize: '1.05rem', color: tokens.colors.textSecondary,
           maxWidth: 560, margin: '0 auto',
         }}>
-          LangChain and LangGraph are excellent. This is what the Angular production layer provides on top.
+          LangGraph and @langchain/langgraph-sdk are excellent. This is what the Angular production layer provides on top.
         </p>
       </motion.div>
 
@@ -101,7 +101,7 @@ export function FairComparisonSection() {
           borderBottom: `1px solid ${tokens.glass.border}`,
           padding: '14px 24px',
         }}>
-          {['Capability', 'LangChain + Angular alone', 'With Angular Stream Resource'].map((h, i) => (
+          {['Capability', '@langchain/langgraph-sdk', 'With Angular Stream Resource'].map((h, i) => (
             <div key={h} style={{
               fontFamily: 'var(--font-mono,"JetBrains Mono",monospace)',
               fontSize: '0.62rem', fontWeight: 700, textTransform: 'uppercase', letterSpacing: '0.08em',

apps/website/src/components/landing/HomePilotCTA.tsx

@@ -3,11 +3,11 @@
 import { tokens } from '../../../lib/design-tokens';
 import { CitationBadge } from './CitationBadge';
 
-const citation77 = {
-  source: 'McKinsey — State of AI 2024',
-  url: 'https://www.mckinsey.com/capabilities/quantumblack/our-insights/the-state-of-ai',
-  stat: 'Most companies remain in experimentation or pilot phases',
-  note: 'Workflow redesign and human validation are what drive real production value.',
+const gartnerCitation = {
+  source: 'Gartner — GenAI Project Failure (2026)',
+  url: 'https://www.gartner.com/en/articles/genai-project-failure',
+  stat: '50% of GenAI projects abandoned after proof of concept by end of 2025',
+  note: 'Poor data quality, inadequate risk controls, escalating costs, and unclear business value are the primary causes.',
 };
 
 export function HomePilotCTA() {
@@ -27,7 +27,7 @@ export function HomePilotCTA() {
           Ready to ship your agent?
         </h2>
         <p style={{ fontFamily: 'Inter, sans-serif', fontSize: 16, lineHeight: 1.7, color: tokens.colors.textSecondary, marginBottom: 32 }}>
-          Most Angular teams are 77%<CitationBadge citation={citation77} /> of the way there. Our structured 3-month co-pilot engagement closes the gap.
+          Half of GenAI projects die after proof of concept.<CitationBadge citation={gartnerCitation} /> Yours doesn&apos;t have to. Our structured 3-month co-pilot engagement closes the gap.
         </p>
         <a
           href="/pilot-to-prod"

apps/website/src/components/landing/PilotFooterCTA.tsx

@@ -4,11 +4,11 @@ import { motion } from 'framer-motion';
 import { tokens } from '../../../lib/design-tokens';
 import { CitationBadge } from './CitationBadge';
 
-const citation77 = {
-  source: 'McKinsey — State of AI 2024',
-  url: 'https://www.mckinsey.com/capabilities/quantumblack/our-insights/the-state-of-ai',
-  stat: 'Most companies remain in experimentation or pilot phases',
-  note: 'Workflow redesign and human validation are what drive real production value.',
+const gartnerCitation = {
+  source: 'Gartner — GenAI Project Failure (2026)',
+  url: 'https://www.gartner.com/en/articles/genai-project-failure',
+  stat: '50% of GenAI projects abandoned after proof of concept by end of 2025',
+  note: 'Poor data quality, inadequate risk controls, escalating costs, and unclear business value are the primary causes.',
 };
 
 export function PilotFooterCTA() {
@@ -74,7 +74,7 @@ export function PilotFooterCTA() {
             marginBottom: '2.5rem',
           }}
         >
-          Most teams are 77%<CitationBadge citation={citation77} /> of the way there. Angular Stream Resource closes the gap. Start with a conversation.
+          Half of GenAI projects die after proof of concept.<CitationBadge citation={gartnerCitation} /> Angular Stream Resource closes the gap. Start with a conversation.
         </p>
 
         {/* CTA buttons */}

apps/website/src/components/landing/PilotHero.tsx

@@ -4,11 +4,11 @@ import { motion } from 'framer-motion';
 import { tokens } from '../../../lib/design-tokens';
 import { CitationBadge } from './CitationBadge';
 
-const citation77 = {
-  source: 'McKinsey — State of AI 2024',
-  url: 'https://www.mckinsey.com/capabilities/quantumblack/our-insights/the-state-of-ai',
-  stat: 'Most companies remain in experimentation or pilot phases',
-  note: 'Workflow redesign and human validation are what drive real production value.',
+const gartnerCitation = {
+  source: 'Gartner — GenAI Project Failure (2026)',
+  url: 'https://www.gartner.com/en/articles/genai-project-failure',
+  stat: '50% of GenAI projects abandoned after proof of concept by end of 2025',
+  note: 'Poor data quality, inadequate risk controls, escalating costs, and unclear business value are the primary causes.',
 };
 
 export function PilotHero() {
@@ -114,7 +114,7 @@ export function PilotHero() {
             marginBottom: '2.5rem',
           }}
         >
-          Most Angular teams are 77%<CitationBadge citation={citation77} /> of the way there. Angular Stream Resource closes the
+          Half of GenAI projects die after proof of concept.<CitationBadge citation={gartnerCitation} /> Yours doesn&apos;t have to. Angular Stream Resource closes the
           gap — app deployment license, fixed price, your team owns the result.
         </motion.p>
 

apps/website/src/components/landing/ProblemSection.tsx

@@ -16,13 +16,13 @@ const STATS: Array<{ num: string; label: string; citation: Citation }> = [
     },
   },
   {
-    num: '31%',
-    label: 'of prioritized AI use cases actually reach production',
+    num: '50%',
+    label: 'of GenAI projects abandoned after proof of concept',
     citation: {
-      source: 'ISG — AI Adoption Reports',
-      url: 'https://isg-one.com',
-      stat: '~31% of prioritized AI use cases reach production',
-      note: 'Enterprise AI initiatives consistently stall between pilot and production.',
+      source: 'Gartner — GenAI Project Failure (2026)',
+      url: 'https://www.gartner.com/en/articles/genai-project-failure',
+      stat: '50% of GenAI projects abandoned after proof of concept by end of 2025',
+      note: 'Poor data quality, inadequate risk controls, escalating costs, and unclear business value are the primary causes.',
     },
   },
   {
@@ -69,21 +69,21 @@ export function ProblemSection() {
     `linear-gradient(90deg, rgba(221,0,49,.6), rgba(221,0,49,.4))`
   );
   const [fillTransition, setFillTransition] = useState('none');
-  const counterRunning77 = phase === 'filling';
+  const counterRunning50 = phase === 'filling';
   const counterRunning100 = phase === 'closing' || phase === 'done';
-  const count77 = useCounter(77, 1700, counterRunning77);
-  const count100 = useCounter(23, 1000, counterRunning100);
+  const count50 = useCounter(50, 1700, counterRunning50);
+  const count100 = useCounter(50, 1000, counterRunning100);
   // 'done' timeout (4400ms) fires after closing counter finishes (3200 + 1000 = 4200ms)
-  // so 77 + count100 always reaches 100 before the phase snaps to literal 100
-  const displayCount = phase === 'done' ? 100 : phase === 'closing' ? 77 + count100 : count77;
+  // so 50 + count100 always reaches 100 before the phase snaps to literal 100
+  const displayCount = phase === 'done' ? 100 : phase === 'closing' ? 50 + count100 : count50;
 
   const runAnimation = useCallback(() => {
     if (phase !== 'idle') return;
     const timers: ReturnType<typeof setTimeout>[] = [];
-    // Phase 1 (150ms): fill to 77%
+    // Phase 1 (150ms): fill to 50% — half of projects reach POC
     timers.push(setTimeout(() => {
       setFillTransition('width 1.7s cubic-bezier(.4,0,.2,1)');
-      setFillWidth('77%');
+      setFillWidth('50%');
       setPhase('filling');
     }, 150));
     // Phase 2 (2100ms): stall — marker + hatch + shake
@@ -92,7 +92,7 @@ export function ProblemSection() {
     timers.push(setTimeout(() => {
       setFillTransition('width 1s cubic-bezier(.4,0,.2,1)');
       setFillGradient(
-        'linear-gradient(90deg, rgba(221,0,49,.5) 0%, rgba(221,0,49,.38) 70%, rgba(0,64,144,.8) 82%, #004090 100%)'
+        'linear-gradient(90deg, rgba(221,0,49,.5) 0%, rgba(221,0,49,.38) 40%, rgba(0,64,144,.8) 60%, #004090 100%)'
       );
       setFillWidth('100%');
       setPhase('closing');
@@ -266,8 +266,8 @@ export function ProblemSection() {
             {/* Hatch overlay (gap zone) — decorative */}
             <div aria-hidden="true" style={{
               position: 'absolute',
-              left: '77%', top: 0,
-              width: '23%', height: '100%',
+              left: '50%', top: 0,
+              width: '50%', height: '100%',
               overflow: 'hidden',
               opacity: showStall ? 1 : 0,
               transition: 'opacity 0.4s',
@@ -286,7 +286,7 @@ export function ProblemSection() {
           {/* Stall pin — outside the overflow:hidden track, decorative */}
           <div aria-hidden="true" style={{
             position: 'absolute',
-            left: '77%',
+            left: '50%',
             top: -8,
             transform: 'translateX(-50%)',
             opacity: showStall ? 1 : 0,
@@ -296,7 +296,7 @@ export function ProblemSection() {
           }}>
             <div style={{ width: 2, height: 34, background: tokens.colors.angularRed, margin: '0 auto', borderRadius: 1 }} />
             <div style={{ fontFamily: 'var(--font-mono,"JetBrains Mono",monospace)', fontSize: '0.6rem', color: tokens.colors.angularRed, whiteSpace: 'nowrap', marginTop: 3, fontWeight: 700 }}>
-              77%
+              50% abandon here
             </div>
           </div>
         </div>