fix: docs tables, pricing, favicon, animation, announcement toast

apps/website/package.json

@@ -9,6 +9,7 @@
     "next": "~16.1.6",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
+    "remark-gfm": "^4.0.1",
     "resend": "^6.10.0",
     "shiki": "*",
     "tailwind-merge": "^2.5.0"

apps/website/src/app/layout.tsx

@@ -3,6 +3,7 @@ import { EB_Garamond, Inter, JetBrains_Mono } from 'next/font/google';
 import './global.css';
 import { Nav } from '../components/shared/Nav';
 import { Footer } from '../components/shared/Footer';
+import { AnnouncementToast } from '../components/shared/AnnouncementToast';
 
 const garamond = EB_Garamond({
   subsets: ['latin'],
@@ -24,6 +25,9 @@ const mono = JetBrains_Mono({
 export const metadata: Metadata = {
   title: 'Angular Agent Framework — Signal-Native Streaming for Angular + LangGraph',
   description: 'The enterprise Angular agent framework for LangChain. Signal-native streaming, thread persistence, and production patterns for Angular 20+.',
+  icons: {
+    icon: 'data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><text y=".9em" font-size="90">🛩️</text></svg>',
+  },
   openGraph: {
     title: 'Angular Agent Framework',
     description: 'Signal-native streaming for LangGraph — production patterns your Angular team can own.',
@@ -44,6 +48,7 @@ export default function RootLayout({ children }: { children: React.ReactNode })
         <Nav />
         <main>{children}</main>
         <Footer />
+        <AnnouncementToast />
       </body>
     </html>
   );

apps/website/src/components/docs/MdxRenderer.tsx

@@ -12,6 +12,7 @@ import { DocsBreadcrumb } from './DocsBreadcrumb';
 import { DocsPrevNext } from './DocsPrevNext';
 import rehypePrettyCode from 'rehype-pretty-code';
 import rehypeSlug from 'rehype-slug';
+import remarkGfm from 'remark-gfm';
 
 const mdxComponents = {
   Callout,
@@ -55,6 +56,7 @@ export function MdxRendererNew({ source, section, slug, title }: NewProps) {
           components={mdxComponents}
           options={{
             mdxOptions: {
+              remarkPlugins: [remarkGfm],
               rehypePlugins: [rehypeSlug, [rehypePrettyCode, rehypeOptions] as any],
             },
           }}

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

@@ -72,8 +72,8 @@ const HORIZON_ITEMS = ['Voice UI primitives', 'Video stream rendering', 'Collabo
 function Connector({ layer }: { layer: typeof LAYERS[0] }) {
   if (!layer.connFill) return null;
   return (
-    <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', position: 'relative', height: 52 }}>
-      <svg width="4" height="52" viewBox="0 0 4 52" overflow="visible">
+    <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', position: 'relative', height: 52, zIndex: 0 }}>
+      <svg width="4" height="52" viewBox="0 0 4 52" overflow="hidden">
         <line x1="2" y1="0" x2="2" y2="52" stroke={layer.connColor} strokeWidth="2" strokeDasharray="3 3" />
         <circle r="3.5" fill={layer.connFill}>
           <animateMotion dur={`${layer.connDur}s`} repeatCount="indefinite" begin="0s">
@@ -171,6 +171,8 @@ export function FullStackSection() {
               padding: '20px 20px 18px',
               background: layer.bg,
               border: `2px solid ${layer.border}`,
+              position: 'relative',
+              zIndex: 1,
             }}>
               {/* Tag — inline, not absolute. Fixes Gen UI overlap bug. */}
               <span style={{

apps/website/src/components/pricing/PricingGrid.tsx

@@ -15,7 +15,7 @@ const PLANS = [
     name: 'Developer Seat',
     price: '$500',
     period: '/seat/year',
-    features: ['Commercial use', '12-month release lock', 'Email support', 'All features'],
+    features: ['Commercial use', '12-month license', 'Email support', 'All features'],
     highlight: false,
     cta: 'Buy License',
     ctaHref: '#lead-form',

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

@@ -0,0 +1,161 @@
+'use client';
+import { useState, useEffect } from 'react';
+import { motion, AnimatePresence } from 'framer-motion';
+import { tokens } from '@cacheplane/design-tokens';
+
+/**
+ * Bump this date to re-show the toast for all users.
+ * Format: YYYY-MM-DD
+ */
+const ANNOUNCEMENT_DATE = '2026-04-07';
+const STORAGE_KEY = `dismissed-announcement-${ANNOUNCEMENT_DATE}`;
+const DELAY_MS = 30_000;
+
+export function AnnouncementToast() {
+  const [visible, setVisible] = useState(false);
+
+  useEffect(() => {
+    // Check if already dismissed for this announcement date
+    try {
+      if (localStorage.getItem(STORAGE_KEY) === 'true') return;
+    } catch {
+      // localStorage unavailable (SSR, private browsing)
+      return;
+    }
+
+    const timer = setTimeout(() => setVisible(true), DELAY_MS);
+    return () => clearTimeout(timer);
+  }, []);
+
+  const dismiss = () => {
+    setVisible(false);
+    try {
+      localStorage.setItem(STORAGE_KEY, 'true');
+    } catch {
+      // ignore
+    }
+  };
+
+  return (
+    <AnimatePresence>
+      {visible && (
+        <motion.div
+          initial={{ opacity: 0, y: 60, scale: 0.95 }}
+          animate={{ opacity: 1, y: 0, scale: 1 }}
+          exit={{ opacity: 0, y: 40, scale: 0.95 }}
+          transition={{ type: 'spring', damping: 25, stiffness: 300 }}
+          style={{
+            position: 'fixed',
+            bottom: 24,
+            right: 24,
+            zIndex: 100,
+            maxWidth: 360,
+            width: 'calc(100vw - 48px)',
+            background: tokens.glass.bg,
+            backdropFilter: `blur(${tokens.glass.blur})`,
+            WebkitBackdropFilter: `blur(${tokens.glass.blur})`,
+            border: `1px solid ${tokens.glass.border}`,
+            boxShadow: '0 8px 32px rgba(0,0,0,0.12), 0 2px 8px rgba(0,0,0,0.06)',
+            borderRadius: 16,
+            padding: '20px 24px',
+          }}
+          role="alert"
+          aria-live="polite"
+        >
+          {/* Dismiss button */}
+          <button
+            onClick={dismiss}
+            aria-label="Dismiss"
+            style={{
+              position: 'absolute',
+              top: 10,
+              right: 12,
+              background: 'none',
+              border: 'none',
+              cursor: 'pointer',
+              color: tokens.colors.textMuted,
+              fontSize: 18,
+              lineHeight: 1,
+              padding: 4,
+            }}
+          >
+            ×
+          </button>
+
+          {/* Content */}
+          <p style={{
+            fontFamily: 'var(--font-mono,"JetBrains Mono",monospace)',
+            fontSize: '0.62rem',
+            textTransform: 'uppercase',
+            letterSpacing: '0.1em',
+            fontWeight: 700,
+            color: tokens.colors.accent,
+            marginBottom: 8,
+          }}>
+            Free Guide
+          </p>
+          <p style={{
+            fontFamily: 'var(--font-garamond,"EB Garamond",Georgia,serif)',
+            fontSize: '1.05rem',
+            fontWeight: 700,
+            color: tokens.colors.textPrimary,
+            lineHeight: 1.3,
+            marginBottom: 6,
+          }}>
+            From Prototype to Production
+          </p>
+          <p style={{
+            fontSize: '0.82rem',
+            color: tokens.colors.textSecondary,
+            lineHeight: 1.5,
+            marginBottom: 16,
+          }}>
+            Six production-readiness dimensions for Angular agents. Get the guide.
+          </p>
+          <div style={{ display: 'flex', gap: 10, alignItems: 'center' }}>
+            <a
+              href="/whitepaper.pdf"
+              download="angular-agent-readiness-guide.pdf"
+              onClick={dismiss}
+              style={{
+                display: 'inline-flex',
+                alignItems: 'center',
+                gap: 6,
+                background: tokens.colors.accent,
+                color: '#fff',
+                padding: '8px 18px',
+                borderRadius: 8,
+                fontFamily: 'var(--font-mono,"JetBrains Mono",monospace)',
+                fontSize: '0.7rem',
+                fontWeight: 700,
+                textTransform: 'uppercase',
+                letterSpacing: '0.06em',
+                textDecoration: 'none',
+                transition: 'box-shadow .2s',
+              }}
+              onMouseEnter={e => (e.currentTarget.style.boxShadow = '0 4px 16px rgba(0,64,144,.3)')}
+              onMouseLeave={e => (e.currentTarget.style.boxShadow = 'none')}
+            >
+              ↓ Download
+            </a>
+            <button
+              onClick={dismiss}
+              style={{
+                background: 'none',
+                border: 'none',
+                cursor: 'pointer',
+                fontFamily: 'var(--font-mono,"JetBrains Mono",monospace)',
+                fontSize: '0.68rem',
+                color: tokens.colors.textMuted,
+                textDecoration: 'underline',
+                padding: '8px 4px',
+              }}
+            >
+              Not now
+            </button>
+          </div>
+        </motion.div>
+      )}
+    </AnimatePresence>
+  );
+}

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

@@ -103,7 +103,7 @@ export function Footer() {
         <div className="grid grid-cols-1 md:grid-cols-4 gap-10 md:gap-8">
           {/* Brand */}
           <div className="md:col-span-2">
-            <p className="font-garamond text-xl font-bold mb-2" style={{ color: tokens.colors.textPrimary }}>Angular Agent Framework</p>
+            <p className="font-garamond text-xl font-bold mb-2" style={{ color: tokens.colors.textPrimary }}>🛩️ Angular Agent Framework</p>
             <p className="text-sm mb-4" style={{ color: tokens.colors.textMuted, maxWidth: '36ch', lineHeight: 1.6 }}>
               The enterprise Angular agent framework for LangChain. Signal-native streaming built for production Angular 20+.
             </p>

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

@@ -50,7 +50,7 @@ export function Nav() {
       {/* Top bar */}
       <div className="flex items-center justify-between px-6 py-4 md:px-8 md:py-5">
         <Link href="/" className="font-garamond text-xl font-bold" style={{ color: tokens.colors.textPrimary }}>
-          Angular Agent Framework
+          🛩️ Angular Agent Framework
         </Link>
 
         {/* Desktop links */}