feat(website): Phase 5 — marketing rewire to canonical demo

apps/website/src/app/page.tsx

@@ -3,7 +3,7 @@ import { ProofStrip } from '../components/landing/ProofStrip';
 import { Differentiator } from '../components/landing/Differentiator';
 import { FeatureBlock } from '../components/landing/FeatureBlock';
 import { BrowserFrame } from '../components/ui/BrowserFrame';
-import { LiveCockpitFrame } from '../components/landing/LiveCockpitFrame';
+import { LiveDemoFrame } from '../components/landing/LiveDemoFrame';
 import { PilotBlock } from '../components/landing/PilotBlock';
 import { WhitePaperBlock } from '../components/landing/WhitePaperBlock';
 import { Promises } from '../components/landing/Promises';
@@ -103,7 +103,7 @@ export default async function HomePage() {
           { title: 'thread persistence', description: 'Restore conversations across sessions.' },
         ]}
         cta={{ label: 'Production patterns', href: '/docs/agent/guides/production' }}
-        visual={<LiveCockpitFrame />}
+        visual={<LiveDemoFrame />}
       />
 
       <PilotBlock />

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

@@ -8,16 +8,16 @@ interface FinalCTAProps {
   headline?: string;
   /** Sub-headline. Defaults to the homepage closer. */
   subtext?: string;
-  /** Primary CTA. Defaults to "Get started" → /docs. */
-  primary?: { label: string; href: string };
-  /** Optional secondary CTA. Defaults to "See it live →" → cockpit. */
+  /** Primary CTA. Defaults to "Try the demo →" → demo.cacheplane.ai. */
+  primary?: { label: string; href: string; external?: boolean };
+  /** Optional secondary CTA. Defaults to "See each feature in action →" → cockpit. */
   secondary?: { label: string; href: string; external?: boolean } | null;
   /** Optional trailing caption. Defaults to MIT line. Pass null to hide. */
   caption?: string | null;
 }
 
-const DEFAULT_PRIMARY = { label: 'Get started', href: '/docs' };
-const DEFAULT_SECONDARY = { label: 'See it live →', href: 'https://cockpit.cacheplane.ai', external: true };
+const DEFAULT_PRIMARY = { label: 'Try the demo →', href: 'https://demo.cacheplane.ai', external: true };
+const DEFAULT_SECONDARY = { label: 'See each feature in action →', href: 'https://cockpit.cacheplane.ai', external: true };
 
 export function FinalCTA({
   headline = 'Stop stalling on agentic Angular.',
@@ -67,7 +67,12 @@ export function FinalCTA({
               marginBottom: 16,
             }}
           >
-            <Button variant="primary" size="lg" href={primary.href}>
+            <Button
+              variant="primary"
+              size="lg"
+              href={primary.href}
+              {...((primary as { external?: boolean }).external ? { target: '_blank', rel: 'noopener noreferrer' } : {})}
+            >
               {primary.label}
             </Button>
             {secondary ? (

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

@@ -59,11 +59,11 @@ export function Hero() {
               <Button
                 variant="ghost"
                 size="lg"
-                href="https://cockpit.cacheplane.ai"
+                href="https://demo.cacheplane.ai"
                 target="_blank"
                 rel="noopener noreferrer"
               >
-                See it live →
+                Try the demo →
               </Button>
             </div>
             <div style={{ display: 'flex', gap: 8, alignItems: 'center', flexWrap: 'wrap' }}>
@@ -76,14 +76,14 @@ export function Hero() {
           {/* Right column — layered collage */}
           <div style={{ position: 'relative', minHeight: 420 }} aria-hidden="true">
             <BrowserFrame
-              url="cockpit.cacheplane.ai"
+              url="demo.cacheplane.ai"
               rotate={-3}
               elevation="lg"
               style={{ position: 'absolute', top: 0, left: 0, width: '92%' }}
             >
               <img
-                src="/screenshots/cockpit-code.webp"
-                alt="Cockpit reference app showing the Angular streaming component source"
+                src="/screenshots/canonical-demo-conversation.webp"
+                alt="Canonical demo — streaming chat rendering a markdown response with code block and table"
                 style={{ display: 'block', width: '100%', height: 'auto' }}
                 loading="lazy"
                 decoding="async"

apps/website/src/components/landing/LiveCockpitFrame.tsx → apps/website/src/components/landing/LiveDemoFrame.tsx

@@ -3,7 +3,7 @@ import { useEffect, useRef, useState } from 'react';
 import { tokens } from '@ngaf/design-tokens';
 import { BrowserFrame } from '../ui/BrowserFrame';
 
-export function LiveCockpitFrame() {
+export function LiveDemoFrame() {
   const ref = useRef<HTMLDivElement>(null);
   const [shouldLoad, setShouldLoad] = useState(false);
 
@@ -28,11 +28,11 @@ export function LiveCockpitFrame() {
 
   return (
     <div ref={ref}>
-      <BrowserFrame url="cockpit.cacheplane.ai" elevation="lg">
+      <BrowserFrame url="demo.cacheplane.ai" elevation="lg">
         {shouldLoad ? (
           <iframe
-            src="https://cockpit.cacheplane.ai"
-            title="Cockpit — Angular Agent Framework reference app"
+            src="https://demo.cacheplane.ai"
+            title="Canonical demo — @ngaf/chat running against the shared LangGraph backend"
             loading="lazy"
             style={{
               width: '100%',
@@ -54,7 +54,7 @@ export function LiveCockpitFrame() {
               fontSize: 13,
             }}
           >
-            Loading live demo…
+            Loading demo…
           </div>
         )}
       </BrowserFrame>

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

@@ -23,9 +23,9 @@ const SIGNALS: Signal[] = [
     href: null,
   },
   {
-    label: 'Reference app',
-    value: 'cockpit.cacheplane.ai',
-    href: 'https://cockpit.cacheplane.ai',
+    label: 'Try it live',
+    value: 'demo.cacheplane.ai',
+    href: 'https://demo.cacheplane.ai',
   },
   {
     label: 'On npm',

apps/website/src/components/shared/Footer.tsx

@@ -175,6 +175,16 @@ export function Footer() {
               onMouseLeave={(e) => (e.currentTarget.style.color = tokens.colors.textSecondary)}>
               API Reference
             </Link>
+            <a href="https://demo.cacheplane.ai" className="transition-colors" style={{ color: tokens.colors.textSecondary }}
+              onClick={() => trackExternalLinkClick('https://demo.cacheplane.ai', {
+                surface: 'footer',
+                cta_id: 'footer_demo',
+                cta_text: 'Demo',
+              })}
+              onMouseEnter={(e) => (e.currentTarget.style.color = tokens.colors.accent)}
+              onMouseLeave={(e) => (e.currentTarget.style.color = tokens.colors.textSecondary)}>
+              Demo
+            </a>
             <a href="https://cockpit.cacheplane.ai" className="transition-colors" style={{ color: tokens.colors.textSecondary }}
               onClick={() => trackExternalLinkClick('https://cockpit.cacheplane.ai', {
                 surface: 'footer',

apps/website/src/components/shared/Nav.tsx

@@ -13,6 +13,7 @@ const links = [
   { label: 'Docs', href: '/docs', external: false },
   { label: 'Solutions', href: '/solutions', external: false },
   { label: 'API', href: '/docs/agent/api/agent', external: false },
+  { label: 'Demo', href: 'https://demo.cacheplane.ai', external: true },
   { label: 'Examples', href: 'https://cockpit.cacheplane.ai', external: true },
   { label: 'Pricing', href: '/pricing', external: false },
 ];