feat: unified gradient-header email template design

apps/website/emails/drip-whitepaper-followup.ts

@@ -1,52 +1,66 @@
-export function dripWhitepaperFollowupHtml(day: number): { subject: string; html: string } {
-  const unsubUrl = 'https://stream-resource.dev/api/unsubscribe';
+import { wrapEmail } from './email-wrapper';
 
+export function dripWhitepaperFollowupHtml(day: number): { subject: string; html: string } {
   if (day === 2) {
     return {
       subject: 'Did you get a chance to read Chapter 3?',
-      html: wrapEmail(`
-        <p style="font-size:14px;color:#3f3f46;line-height:1.6;margin:0 0 16px">Chapter 3 covers <strong>tool-call rendering</strong> — how to surface agent actions as real UI instead of raw JSON. It's the chapter most teams bookmark first.</p>
-        <p style="font-size:14px;color:#3f3f46;line-height:1.6;margin:0 0 24px">If you haven't downloaded it yet, <a href="https://stream-resource.dev/whitepaper.pdf" style="color:#004090;text-decoration:underline">grab it here</a>.</p>
-      `),
+      html: wrapEmail({
+        body: `
+          <p style="font-size:11px;font-family:monospace;text-transform:uppercase;letter-spacing:0.08em;color:#004090;font-weight:700;margin:0 0 8px">Whitepaper Follow-up</p>
+          <p style="font-size:20px;font-weight:700;color:#1a1a2e;margin:0 0 14px;line-height:1.3">Did you get a chance to read Chapter 3?</p>
+          <p style="font-size:14px;color:#555770;line-height:1.7;margin:0 0 24px">Chapter 3 covers <strong>tool-call rendering</strong> — how to surface agent actions as real UI instead of raw JSON. It's the chapter most teams bookmark first.</p>
+          <a href="https://stream-resource.dev/whitepaper.pdf" style="display:inline-block;background-color:#004090;color:#fff;padding:12px 28px;border-radius:8px;font-size:14px;font-weight:700;text-decoration:none">Read the Guide →</a>
+        `,
+        showUnsubscribe: true,
+      }),
     };
   }
+
   if (day === 5) {
     return {
       subject: 'The gap between demo and production',
-      html: wrapEmail(`
-        <p style="font-size:14px;color:#3f3f46;line-height:1.6;margin:0 0 16px">Half of GenAI projects die after proof of concept. The gap isn't the model — it's the frontend production path: streaming state, thread persistence, human approval flows, and deterministic testing.</p>
-        <p style="font-size:14px;color:#3f3f46;line-height:1.6;margin:0 0 24px">That's exactly what the Angular Agent Framework solves. <a href="https://stream-resource.dev/docs" style="color:#004090;text-decoration:underline">See how it works →</a></p>
-      `),
+      html: wrapEmail({
+        body: `
+          <p style="font-size:11px;font-family:monospace;text-transform:uppercase;letter-spacing:0.08em;color:#004090;font-weight:700;margin:0 0 8px">Production Readiness</p>
+          <p style="font-size:20px;font-weight:700;color:#1a1a2e;margin:0 0 14px;line-height:1.3">The gap between demo and production</p>
+          <p style="font-size:14px;color:#555770;line-height:1.7;margin:0 0 24px">Half of GenAI projects die after proof of concept. The gap isn't the model — it's the frontend production path: streaming state, thread persistence, human approval flows, and deterministic testing.</p>
+          <a href="https://stream-resource.dev/docs" style="display:inline-block;background-color:#004090;color:#fff;padding:12px 28px;border-radius:8px;font-size:14px;font-weight:700;text-decoration:none">See How It Works →</a>
+        `,
+        showUnsubscribe: true,
+      }),
     };
   }
+
   if (day === 10) {
     return {
       subject: 'The pilot program is included with every app license',
-      html: wrapEmail(`
-        <p style="font-size:14px;color:#3f3f46;line-height:1.6;margin:0 0 16px">Every app deployment license includes a <strong>3-month co-pilot engagement</strong> — we work alongside your Angular team to ship your first agent to production.</p>
-        <p style="font-size:14px;color:#3f3f46;line-height:1.6;margin:0 0 8px">Week 1: Integration & first stream<br/>Month 1: First agent in staging<br/>Month 3: Production deployment</p>
-        <p style="font-size:14px;color:#3f3f46;line-height:1.6;margin:16px 0 24px"><a href="https://stream-resource.dev/pilot-to-prod" style="color:#004090;text-decoration:underline">Learn about the pilot program →</a></p>
-      `),
+      html: wrapEmail({
+        body: `
+          <p style="font-size:11px;font-family:monospace;text-transform:uppercase;letter-spacing:0.08em;color:#004090;font-weight:700;margin:0 0 8px">Pilot Program</p>
+          <p style="font-size:20px;font-weight:700;color:#1a1a2e;margin:0 0 14px;line-height:1.3">The pilot program is included with every app license</p>
+          <p style="font-size:14px;color:#555770;line-height:1.7;margin:0 0 14px">Every app deployment license includes a <strong>3-month co-pilot engagement</strong> — we work alongside your Angular team to ship your first agent to production.</p>
+          <div style="background:#f8f9fc;border-radius:8px;padding:16px 18px;margin:0 0 24px;border:1px solid rgba(0,64,144,0.08)">
+            <p style="font-size:13px;color:#555770;margin:0 0 4px;line-height:1.6"><strong style="color:#004090">Week 1</strong> · Integration &amp; first stream</p>
+            <p style="font-size:13px;color:#555770;margin:0 0 4px;line-height:1.6"><strong style="color:#004090">Month 1</strong> · First agent in staging</p>
+            <p style="font-size:13px;color:#555770;margin:0;line-height:1.6"><strong style="color:#004090">Month 3</strong> · Production deployment</p>
+          </div>
+          <a href="https://stream-resource.dev/pilot-to-prod" style="display:inline-block;background-color:#004090;color:#fff;padding:12px 28px;border-radius:8px;font-size:14px;font-weight:700;text-decoration:none">Learn About the Pilot →</a>
+        `,
+        showUnsubscribe: true,
+      }),
     };
   }
+
   // day === 20
   return {
-    subject: 'Ready to ship your agent? Let\'s talk.',
-    html: wrapEmail(`
-      <p style="font-size:14px;color:#3f3f46;line-height:1.6;margin:0 0 16px">If your team is evaluating how to take an Angular + LangGraph agent to production, I'd love to hear what you're building.</p>
-      <p style="font-size:14px;color:#3f3f46;line-height:1.6;margin:0 0 24px">Reply to this email or <a href="mailto:hello@cacheplane.io" style="color:#004090;text-decoration:underline">schedule a conversation</a> — no pitch, just a technical discussion about your use case.</p>
-    `),
+    subject: "Ready to ship your agent? Let's talk.",
+    html: wrapEmail({
+      body: `
+        <p style="font-size:11px;font-family:monospace;text-transform:uppercase;letter-spacing:0.08em;color:#004090;font-weight:700;margin:0 0 8px">Let's Connect</p>
+        <p style="font-size:20px;font-weight:700;color:#1a1a2e;margin:0 0 14px;line-height:1.3">Ready to ship your agent? Let's talk.</p>
+        <p style="font-size:14px;color:#555770;line-height:1.7;margin:0 0 24px">If your team is evaluating how to take an Angular + LangGraph agent to production, I'd love to hear what you're building. Reply to this email or <a href="mailto:hello@cacheplane.io" style="color:#004090;text-decoration:underline">schedule a conversation</a> — no pitch, just a technical discussion about your use case.</p>
+      `,
+      showUnsubscribe: true,
+    }),
   };
 }
-
-function wrapEmail(body: string): string {
-  return `<!DOCTYPE html><html><head></head>
-<body style="font-family:Inter,Arial,sans-serif;background-color:#f4f4f5;padding:40px 0;margin:0">
-<div style="max-width:520px;margin:0 auto;background-color:#fff;border-radius:12px;padding:32px 40px;border:1px solid #e4e4e7">
-  <p style="font-size:11px;font-family:monospace;text-transform:uppercase;letter-spacing:0.08em;color:#004090;font-weight:700;margin:0 0 16px">Angular Agent Framework</p>
-  ${body}
-  <hr style="border:none;border-top:1px solid #e4e4e7;margin:24px 0 16px"/>
-  <p style="font-size:11px;color:#a1a1aa;line-height:1.5;margin:0">Angular Agent Framework — Signal-native streaming for LangGraph.</p>
-  <p style="font-size:10px;color:#d4d4d8;margin:8px 0 0"><a href="https://stream-resource.dev/api/unsubscribe?email=RECIPIENT" style="color:#d4d4d8;text-decoration:underline">Unsubscribe</a></p>
-</div></body></html>`;
-}

apps/website/emails/email-wrapper.ts

@@ -0,0 +1,28 @@
+/**
+ * Shared HTML wrapper for all email templates.
+ * Gradient header band with logo, white body, footer.
+ */
+export function wrapEmail(opts: {
+  body: string;
+  showUnsubscribe?: boolean;
+}): string {
+  return `<!DOCTYPE html><html><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"></head>
+<body style="font-family:Inter,Arial,sans-serif;background-color:#e8eaf0;padding:40px 0;margin:0">
+<div style="max-width:520px;margin:0 auto;border-radius:12px;overflow:hidden;box-shadow:0 2px 12px rgba(0,0,0,0.08)">
+  <div style="background:linear-gradient(135deg, #fef0f3 0%, #f4f0ff 45%, #eaf3ff 70%, #e6f4ff 100%);padding:28px 32px 20px;border-bottom:1px solid rgba(0,64,144,0.1)">
+    <div style="font-size:13px;font-weight:700;color:#1a1a2e;letter-spacing:-0.01em">🛩️ Angular Agent Framework</div>
+  </div>
+  <div style="background:#fff;padding:28px 32px 32px">
+    ${opts.body}
+    <div style="border-top:1px solid #e4e4e7;margin-top:28px;padding-top:16px">
+      <p style="font-size:11px;color:#a1a1aa;line-height:1.5;margin:0">Angular Agent Framework — Signal-native streaming for LangGraph.</p>
+      ${opts.showUnsubscribe ? '<p style="font-size:10px;color:#d4d4d8;margin:6px 0 0"><a href="https://stream-resource.dev/api/unsubscribe?email=RECIPIENT" style="color:#d4d4d8;text-decoration:underline">Unsubscribe</a></p>' : ''}
+    </div>
+  </div>
+</div>
+</body></html>`;
+}
+
+export function esc(s: string): string {
+  return s.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/"/g, '&quot;');
+}

apps/website/emails/lead-notification.ts

@@ -1,3 +1,5 @@
+import { wrapEmail, esc } from './email-wrapper';
+
 interface LeadNotificationProps {
   name: string;
   email: string;
@@ -7,18 +9,15 @@ interface LeadNotificationProps {
 }
 
 export function leadNotificationHtml({ name, email, company, message, ts }: LeadNotificationProps): string {
-  return `<!DOCTYPE html><html><head></head>
-<body style="font-family:Inter,Arial,sans-serif;background-color:#f4f4f5;padding:40px 0;margin:0">
-<div style="max-width:520px;margin:0 auto;background-color:#fff;border-radius:12px;padding:32px 40px;border:1px solid #e4e4e7">
-  <p style="font-size:11px;font-family:monospace;text-transform:uppercase;letter-spacing:0.08em;color:#004090;font-weight:700;margin:0 0 8px">New Lead</p>
-  <p style="font-size:20px;font-weight:700;color:#1a1a2e;margin:8px 0 4px">${esc(name)}</p>
-  <p style="font-size:14px;color:#71717a;margin:0 0 16px">${esc(email)}${company ? ` — ${esc(company)}` : ''}</p>
-  ${message ? `<hr style="border:none;border-top:1px solid #e4e4e7;margin:16px 0"/><p style="font-size:14px;color:#3f3f46;line-height:1.6;margin:0">${esc(message)}</p>` : ''}
-  <hr style="border:none;border-top:1px solid #e4e4e7;margin:16px 0"/>
-  <p style="font-size:11px;color:#a1a1aa;margin:0">Received ${esc(ts)}</p>
-</div></body></html>`;
-}
-
-function esc(s: string): string {
-  return s.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/"/g, '&quot;');
+  return wrapEmail({
+    body: `
+      <p style="font-size:11px;font-family:monospace;text-transform:uppercase;letter-spacing:0.08em;color:#DD0031;font-weight:700;margin:0 0 8px">New Lead</p>
+      <p style="font-size:20px;font-weight:700;color:#1a1a2e;margin:0 0 4px">${esc(name)}</p>
+      <p style="font-size:14px;color:#8b8fa3;margin:0 0 16px">${esc(email)}${company ? ` — ${esc(company)}` : ''}</p>
+      ${message ? `<div style="border-top:1px solid #e4e4e7;padding-top:14px;margin-bottom:4px"><p style="font-size:14px;color:#555770;line-height:1.7;margin:0">${esc(message)}</p></div>` : ''}
+      <div style="border-top:1px solid #e4e4e7;padding-top:14px;margin-top:14px">
+        <p style="font-size:11px;color:#a1a1aa;margin:0">Received ${esc(ts)}</p>
+      </div>
+    `,
+  });
 }

apps/website/emails/newsletter-welcome.ts

@@ -1,12 +1,11 @@
+import { wrapEmail } from './email-wrapper';
+
 export function newsletterWelcomeHtml(): string {
-  return `<!DOCTYPE html><html><head></head>
-<body style="font-family:Inter,Arial,sans-serif;background-color:#f4f4f5;padding:40px 0;margin:0">
-<div style="max-width:520px;margin:0 auto;background-color:#fff;border-radius:12px;padding:32px 40px;border:1px solid #e4e4e7">
-  <p style="font-size:11px;font-family:monospace;text-transform:uppercase;letter-spacing:0.08em;color:#004090;font-weight:700;margin:0 0 12px">Angular Agent Framework</p>
-  <p style="font-size:22px;font-weight:700;color:#1a1a2e;margin:0 0 8px">Welcome to Angular Agent Framework updates</p>
-  <p style="font-size:14px;color:#3f3f46;line-height:1.6;margin:0 0 24px">You'll receive updates on new capabilities, production patterns, and Angular agent best practices. We keep it focused and infrequent — no spam.</p>
-  <a href="https://stream-resource.dev/docs" style="background-color:#004090;color:#fff;padding:12px 28px;border-radius:10px;font-size:14px;font-weight:700;text-decoration:none;display:inline-block">Explore the Docs</a>
-  <hr style="border:none;border-top:1px solid #e4e4e7;margin:24px 0 16px"/>
-  <p style="font-size:12px;color:#a1a1aa;line-height:1.5;margin:0">Angular Agent Framework — Signal-native streaming for LangGraph.</p>
-</div></body></html>`;
+  return wrapEmail({
+    body: `
+      <p style="font-size:20px;font-weight:700;color:#1a1a2e;margin:0 0 8px;line-height:1.3">Welcome to Angular Agent Framework updates</p>
+      <p style="font-size:14px;color:#555770;line-height:1.7;margin:0 0 24px">You'll receive updates on new capabilities, production patterns, and Angular agent best practices. We keep it focused and infrequent — no spam.</p>
+      <a href="https://stream-resource.dev/docs" style="display:inline-block;background-color:#004090;color:#fff;padding:12px 28px;border-radius:8px;font-size:14px;font-weight:700;text-decoration:none">Explore the Docs</a>
+    `,
+  });
 }

apps/website/emails/whitepaper-download.ts

@@ -1,20 +1,15 @@
+import { wrapEmail, esc } from './email-wrapper';
+
 const DOWNLOAD_URL = 'https://stream-resource.dev/whitepaper.pdf';
 
 export function whitepaperDownloadHtml(name?: string): string {
-  return `<!DOCTYPE html><html><head></head>
-<body style="font-family:Inter,Arial,sans-serif;background-color:#f4f4f5;padding:40px 0;margin:0">
-<div style="max-width:520px;margin:0 auto;background-color:#fff;border-radius:12px;padding:32px 40px;border:1px solid #e4e4e7">
-  <p style="font-size:11px;font-family:monospace;text-transform:uppercase;letter-spacing:0.08em;color:#004090;font-weight:700;margin:0 0 12px">Angular Agent Framework</p>
-  <p style="font-size:22px;font-weight:700;color:#1a1a2e;margin:0 0 8px">Your Angular Agent Readiness Guide</p>
-  <p style="font-size:14px;color:#3f3f46;line-height:1.6;margin:0 0 24px">${name ? `Hi ${esc(name)}, t` : 'T'}he guide covers six production-readiness dimensions: streaming state, thread persistence, tool-call rendering, human approval flows, generative UI, and deterministic testing.</p>
-  <div style="text-align:center;margin:0 0 24px">
-    <a href="${DOWNLOAD_URL}" style="background-color:#004090;color:#fff;padding:14px 32px;border-radius:10px;font-size:14px;font-weight:700;text-decoration:none;display:inline-block">Download the Guide</a>
-  </div>
-  <hr style="border:none;border-top:1px solid #e4e4e7;margin:16px 0"/>
-  <p style="font-size:12px;color:#a1a1aa;line-height:1.5;margin:0">Angular Agent Framework — Signal-native streaming for LangGraph.</p>
-</div></body></html>`;
-}
-
-function esc(s: string): string {
-  return s.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/"/g, '&quot;');
+  return wrapEmail({
+    body: `
+      <p style="font-size:20px;font-weight:700;color:#1a1a2e;margin:0 0 8px;line-height:1.3">Your Angular Agent Readiness Guide</p>
+      <p style="font-size:14px;color:#555770;line-height:1.7;margin:0 0 24px">${name ? `Hi ${esc(name)}, t` : 'T'}he guide covers six production-readiness dimensions: streaming state, thread persistence, tool-call rendering, human approval flows, generative UI, and deterministic testing.</p>
+      <div style="text-align:center;margin:0 0 4px">
+        <a href="${DOWNLOAD_URL}" style="display:inline-block;background-color:#004090;color:#fff;padding:12px 32px;border-radius:8px;font-size:14px;font-weight:700;text-decoration:none">Download the Guide</a>
+      </div>
+    `,
+  });
 }

apps/website/src/app/api/email-preview/route.ts

@@ -0,0 +1,81 @@
+/**
+ * Dev-only email template preview route.
+ * Visit /api/email-preview?template=whitepaper-download to preview a template.
+ * Available templates: whitepaper-download, newsletter-welcome, lead-notification,
+ *   drip-day-2, drip-day-5, drip-day-10, drip-day-20
+ */
+import { NextRequest, NextResponse } from 'next/server';
+import { whitepaperDownloadHtml } from '../../../../emails/whitepaper-download';
+import { newsletterWelcomeHtml } from '../../../../emails/newsletter-welcome';
+import { leadNotificationHtml } from '../../../../emails/lead-notification';
+import { dripWhitepaperFollowupHtml } from '../../../../emails/drip-whitepaper-followup';
+
+const TEMPLATES: Record<string, () => { subject: string; html: string }> = {
+  'whitepaper-download': () => ({
+    subject: 'Your Angular Agent Readiness Guide',
+    html: whitepaperDownloadHtml('Brian'),
+  }),
+  'newsletter-welcome': () => ({
+    subject: 'Welcome to Angular Agent Framework updates',
+    html: newsletterWelcomeHtml(),
+  }),
+  'lead-notification': () => ({
+    subject: 'New lead: Brian at Cacheplane',
+    html: leadNotificationHtml({
+      name: 'Brian Love',
+      email: 'brian@cacheplane.io',
+      company: 'Cacheplane',
+      message: 'Interested in the pilot program for our Angular + LangGraph project.',
+      ts: new Date().toISOString(),
+    }),
+  }),
+  'drip-day-2': () => dripWhitepaperFollowupHtml(2),
+  'drip-day-5': () => dripWhitepaperFollowupHtml(5),
+  'drip-day-10': () => dripWhitepaperFollowupHtml(10),
+  'drip-day-20': () => dripWhitepaperFollowupHtml(20),
+};
+
+export async function GET(req: NextRequest) {
+  const template = req.nextUrl.searchParams.get('template');
+
+  // Index page — show all templates
+  if (!template) {
+    const links = Object.keys(TEMPLATES).map(
+      (t) => `<a href="/api/email-preview?template=${t}" style="display:block;padding:8px 0;color:#004090;font-size:14px">${t}</a>`
+    ).join('');
+
+    return new NextResponse(
+      `<!DOCTYPE html><html><head><meta charset="utf-8"><title>Email Previews</title></head>
+      <body style="font-family:Inter,Arial,sans-serif;max-width:600px;margin:40px auto;padding:0 20px">
+        <h1 style="font-size:24px;font-weight:700;color:#1a1a2e;margin:0 0 8px">Email Template Previews</h1>
+        <p style="font-size:14px;color:#71717a;margin:0 0 24px">Click a template to preview it as rendered HTML.</p>
+        ${links}
+      </body></html>`,
+      { headers: { 'Content-Type': 'text/html' } }
+    );
+  }
+
+  const factory = TEMPLATES[template];
+  if (!factory) {
+    return new NextResponse(`Unknown template: ${template}`, { status: 404 });
+  }
+
+  const { subject, html } = factory();
+
+  // Wrap in a preview frame showing subject line
+  const preview = `<!DOCTYPE html><html><head><meta charset="utf-8"><title>Preview: ${subject}</title></head>
+  <body style="margin:0;padding:0;background:#e4e4e7">
+    <div style="background:#fff;padding:12px 24px;border-bottom:1px solid #e4e4e7;font-family:Inter,Arial,sans-serif;display:flex;align-items:center;justify-content:space-between">
+      <div>
+        <span style="font-size:11px;color:#71717a;text-transform:uppercase;letter-spacing:0.06em">Subject:</span>
+        <span style="font-size:14px;font-weight:600;color:#1a1a2e;margin-left:8px">${subject}</span>
+      </div>
+      <a href="/api/email-preview" style="font-size:12px;color:#004090;text-decoration:none">← All templates</a>
+    </div>
+    <div style="padding:20px 0">
+      ${html}
+    </div>
+  </body></html>`;
+
+  return new NextResponse(preview, { headers: { 'Content-Type': 'text/html' } });
+}