@invisibleloop/pulse 0.9.1 → 0.10.1

package/docs/src/pages/templates/mobile-app.js

@@ -0,0 +1,344 @@
+/**
+ * Template: Mobile App Landing Page
+ *
+ * A complete landing page for a mobile app — nav, hero, features,
+ * stats, testimonials, pricing, FAQ, CTA, footer.
+ * Built entirely from Pulse UI components, zero custom HTML.
+ */
+
+import { asset } from '../../lib/layout.js'
+import {
+  nav        as uiNav,
+  hero,
+  phoneFrame,
+  section,
+  container,
+  grid,
+  feature,
+  stat,
+  testimonial,
+  pricing,
+  accordion,
+  cta,
+  footer,
+  appBadge,
+  button,
+  iconFeather,
+  iconAi,
+  iconSmile,
+  iconLock,
+  iconZap,
+  iconRefresh,
+  iconBarChart,
+} from '../../../../src/ui/index.js'
+
+// ── Navigation ────────────────────────────────────────────────────────────────
+
+const pageNav = uiNav({
+  logo: `${iconFeather({ size: 20 })}<span class="u-font-bold" style="letter-spacing:-0.02em;color:#fff">Lumio</span>`,
+  links: [
+    { label: 'Features',     href: '#features'     },
+    { label: 'Pricing',      href: '#pricing'      },
+    { label: 'Testimonials', href: '#testimonials' },
+    { label: 'FAQ',          href: '#faq'          },
+  ],
+  action: button({ label: 'Download Free', href: '#download', size: 'sm' }),
+  sticky: true,
+  background: 'rgba(58, 78, 88, 0.75)',
+  color: '#fff',
+})
+
+// ── Hero ──────────────────────────────────────────────────────────────────────
+
+const phoneScreen = `
+  <div style="background:#1a2c24;height:100%;padding:0.75rem;display:flex;flex-direction:column;gap:0.625rem;font-family:system-ui,sans-serif;">
+
+    <!-- status bar -->
+    <div style="display:flex;justify-content:space-between;align-items:center;padding:0 0.25rem;font-size:0.6rem;color:rgba(255,255,255,0.5)">
+      <span>9:41</span>
+      <div style="display:flex;gap:4px;align-items:center">
+        <svg width="12" height="8" viewBox="0 0 12 8" fill="rgba(255,255,255,0.5)" aria-hidden="true"><rect x="0" y="2" width="2" height="6" rx="1"/><rect x="3" y="1" width="2" height="7" rx="1"/><rect x="6" y="0" width="2" height="8" rx="1"/><rect x="9" y="0" width="2" height="8" rx="1" opacity="0.3"/></svg>
+        <svg width="10" height="8" viewBox="0 0 10 8" fill="rgba(255,255,255,0.5)" aria-hidden="true"><path d="M5 1.5C3.1 1.5 1.4 2.3 0.2 3.6L1.6 5c0.9-1 2.1-1.5 3.4-1.5s2.5.6 3.4 1.5L9.8 3.6C8.6 2.3 6.9 1.5 5 1.5zm0 3L6.4 6c-.4-.4-.9-.6-1.4-.6s-1 .2-1.4.6L5 4.5zm0-6C2.1-1.5.2-.6-1.2.8L.2 2.2C1.9.8 3.4 0 5 0s3.1.8 4.8 2.2L11.2.8C9.8-.6 7.9-1.5 5-1.5z" transform="translate(0,1.5)"/></svg>
+        <svg width="20" height="8" viewBox="0 0 20 8" fill="none" aria-hidden="true"><rect x="0.5" y="0.5" width="16" height="7" rx="2" stroke="rgba(255,255,255,0.35)" stroke-width="1"/><rect x="1.5" y="1.5" width="12" height="5" rx="1" fill="rgba(255,255,255,0.7)"/><path d="M18 3v2c.8-.3.8-1.7 0-2z" fill="rgba(255,255,255,0.6)"/></svg>
+      </div>
+    </div>
+
+    <!-- greeting + streak badge -->
+    <div style="display:flex;justify-content:space-between;align-items:center">
+      <div>
+        <div style="font-size:0.62rem;color:rgba(255,255,255,0.55)">Good morning</div>
+        <div style="font-size:0.85rem;font-weight:700;color:#fff">Sarah</div>
+      </div>
+      <div style="background:rgba(229,193,189,0.18);border:1px solid rgba(229,193,189,0.35);border-radius:999px;padding:0.2rem 0.5rem;display:flex;align-items:center;gap:0.25rem;font-size:0.6rem;color:#e5c1bd;font-weight:600">
+        🔥 28
+      </div>
+    </div>
+
+    <!-- today's entry card -->
+    <div style="background:linear-gradient(135deg,#2a4d3c,#3a6650);border-radius:0.75rem;padding:0.75rem;flex-shrink:0">
+      <div style="font-size:0.6rem;color:rgba(255,255,255,0.6);margin-bottom:0.3rem;text-transform:uppercase;letter-spacing:0.04em">Today's entry</div>
+      <div style="font-size:0.78rem;font-weight:600;color:#fff;margin-bottom:0.2rem">Morning reflection</div>
+      <div style="font-size:0.65rem;color:rgba(255,255,255,0.7);line-height:1.4">Feeling grateful today. The early morning…</div>
+      <div style="display:flex;gap:0.25rem;margin-top:0.5rem">
+        ${['😊','🌤','✨'].map(e=>`<span style="font-size:0.75rem">${e}</span>`).join('')}
+      </div>
+    </div>
+
+    <!-- mood chart -->
+    <div style="background:rgba(255,255,255,0.05);border:1px solid rgba(255,255,255,0.08);border-radius:0.625rem;padding:0.625rem">
+      <div style="font-size:0.6rem;color:rgba(255,255,255,0.55);margin-bottom:0.4rem;font-weight:500">MOOD THIS WEEK</div>
+      <div style="display:flex;gap:3px;align-items:flex-end;height:32px">
+        ${[55,70,45,85,65,80,100].map((h,i)=>`<div style="flex:1;background:${i===6?'#7b9e87':'rgba(123,158,135,0.3)'};border-radius:2px 2px 0 0;height:${h}%;transition:height 0.3s"></div>`).join('')}
+      </div>
+      <div style="display:flex;justify-content:space-between;margin-top:3px">
+        ${['M','T','W','T','F','S','S'].map((d,i)=>`<span style="font-size:0.5rem;color:${i===6?'#b6be9c':'rgba(255,255,255,0.25)'};flex:1;text-align:center">${d}</span>`).join('')}
+      </div>
+    </div>
+
+    <!-- AI insight -->
+    <div style="background:rgba(255,255,255,0.04);border:1px solid rgba(255,255,255,0.07);border-radius:0.625rem;padding:0.625rem;display:flex;gap:0.4rem;align-items:flex-start">
+      <span style="font-size:0.75rem;flex-shrink:0">✦</span>
+      <div style="font-size:0.6rem;color:rgba(255,255,255,0.5);line-height:1.5">You write more on days you exercise. 3-day pattern detected.</div>
+    </div>
+
+  </div>`
+
+const pageHero = hero({
+  eyebrow:  'Your mindful journaling companion',
+  title:    'Write, reflect, and grow every day',
+  subtitle: 'Lumio uses AI to help you understand your thoughts, track your mood, and build lasting habits — all in a beautifully simple journal.',
+  background:   '#7b9e87',
+  eyebrowColor: '#1a2e24',
+  color:        '#1a2e24',
+  image:    phoneFrame({ content: phoneScreen }),
+  actions:  `
+    <div class="u-flex u-gap-3 u-flex-wrap u-justify-center">
+      ${appBadge({ store: 'apple',  href: '#download' })}
+      ${appBadge({ store: 'google', href: '#download' })}
+    </div>
+    <p class="u-mt-3 u-text-sm u-text-muted">Free forever · No credit card required</p>
+  `,
+})
+
+// ── Stats ─────────────────────────────────────────────────────────────────────
+
+const statsSection = section({
+  variant: 'alt',
+  padding: 'sm',
+  content: container({
+    content: grid({
+      cols:    4,
+      gap:     'md',
+      content: [
+        stat({ label: 'Active users',     value: '127K+', trend: 'up',      change: '↑ 23% this month',  center: true }),
+        stat({ label: 'Journal entries',  value: '4.2M',  trend: 'up',      change: '↑ 18% this month',  center: true }),
+        stat({ label: 'App Store rating', value: '4.9',   trend: 'neutral', change: '★ 8,400 reviews',   center: true }),
+        stat({ label: 'Days avg. streak', value: '34',    trend: 'up',      change: '↑ 12% vs last year', center: true }),
+      ].join(''),
+    }),
+  }),
+})
+
+// ── Features ──────────────────────────────────────────────────────────────────
+
+const featuresSection = section({
+  id:       'features',
+  eyebrow:  'Why people love Lumio',
+  title:    'Everything you need to build a journaling habit',
+  align:    'center',
+  content: container({
+    content: grid({
+      cols: 3,
+      gap:  'lg',
+      content: [
+        feature({ icon: iconAi({ size: 36 }),       title: 'AI-powered insights',    description: 'Lumio reads between the lines. Get weekly summaries, pattern recognition, and personalised prompts that help you dig deeper.' }),
+        feature({ icon: iconSmile({ size: 36 }),    title: 'Mood & habit tracking',  description: 'Log your mood in seconds with an emoji or a word. Lumio connects the dots over time so you can see what affects how you feel.' }),
+        feature({ icon: iconLock({ size: 36 }),     title: 'End-to-end encrypted',   description: 'Your journal is yours alone. Every entry is encrypted on your device before it ever touches our servers. We literally cannot read it.' }),
+        feature({ icon: iconZap({ size: 36 }),      title: 'Daily prompts',          description: 'Never stare at a blank page. Choose from 300+ prompts crafted by therapists and coaches, or let Lumio suggest one based on your week.' }),
+        feature({ icon: iconRefresh({ size: 36 }),  title: 'Sync across devices',    description: 'Start on your phone, continue on your tablet. Everything syncs instantly and works offline — your entries are always available.' }),
+        feature({ icon: iconBarChart({ size: 36 }), title: 'Progress & streaks',     description: 'Streaks keep you accountable. Track your journaling consistency with beautiful charts and celebrate milestones along the way.' }),
+      ].map(f => `<div>${f}</div>`).join(''),
+    }),
+  }),
+})
+
+// ── Testimonials ──────────────────────────────────────────────────────────────
+
+const testimonialsSection = section({
+  id:       'testimonials',
+  variant:  'alt',
+  eyebrow:  'Loved by 127,000+ journalers',
+  title:    'Real people, real results',
+  align:    'center',
+  content: container({
+    content: grid({
+      cols: 3,
+      gap:  'md',
+      content: [
+        testimonial({ quote: 'I\'ve tried every journaling app out there. Lumio is the first one that actually helped me understand why I was feeling burnt out. The AI insights are genuinely useful, not gimmicky.', name: 'Sarah K.',     role: 'Product Designer',     rating: 5 }),
+        testimonial({ quote: 'The streak feature sounds simple but it completely changed my relationship with writing. 112 days in and I haven\'t missed one. My therapist noticed a difference before I did.',            name: 'Marcus T.',    role: 'Software Engineer',    rating: 5 }),
+        testimonial({ quote: 'I was sceptical about the AI part but it\'s surprisingly good at spotting patterns. It told me I write less when I skip my morning run — completely true and now I use it as motivation.', name: 'Priya R.',     role: 'Clinical Psychologist', rating: 5 }),
+      ].map(t => `<div>${t}</div>`).join(''),
+    }),
+  }),
+})
+
+// ── Pricing ───────────────────────────────────────────────────────────────────
+
+const pricingSection = section({
+  id:       'pricing',
+  eyebrow:  'Simple pricing',
+  title:    'Start free, upgrade when you\'re ready',
+  subtitle: 'No contracts. Cancel any time. All plans include a 14-day free trial of Lumio Pro.',
+  align:    'center',
+  content: container({
+    size:    'md',
+    content: grid({
+      cols: 3,
+      gap:  'md',
+      content: [
+        pricing({
+          name:        'Free',
+          price:       '£0',
+          period:      'forever',
+          description: 'Everything you need to start a journaling habit.',
+          features: [
+            'Unlimited journal entries',
+            'Basic mood tracking',
+            '30-day history',
+            '5 daily prompts per month',
+            'iOS & Android apps',
+          ],
+          action: button({ label: 'Get started free', href: '#download', variant: 'outline', full: true }),
+        }),
+        pricing({
+          name:        'Pro',
+          price:       '£4.99',
+          period:      '/month',
+          description: 'AI insights and unlimited everything for serious journalers.',
+          badge:       'Most popular',
+          highlighted: true,
+          features: [
+            'Everything in Free',
+            'AI-powered weekly insights',
+            'Unlimited prompt library',
+            'Mood pattern analysis',
+            'End-to-end encryption',
+            'Export to PDF',
+          ],
+          action: button({ label: 'Start free trial', href: '#download', full: true }),
+        }),
+        pricing({
+          name:        'Family',
+          price:       '£9.99',
+          period:      '/month',
+          description: 'Share Lumio Pro with up to 5 family members.',
+          features: [
+            'Everything in Pro',
+            'Up to 5 accounts',
+            'Shared family streaks',
+            'Parental controls',
+            'Priority support',
+          ],
+          action: button({ label: 'Start free trial', href: '#download', variant: 'outline', full: true }),
+        }),
+      ].map(p => `<div>${p}</div>`).join(''),
+    }),
+  }),
+})
+
+// ── FAQ ───────────────────────────────────────────────────────────────────────
+
+const faqSection = section({
+  id:      'faq',
+  variant: 'alt',
+  eyebrow: 'FAQ',
+  title:   'Common questions',
+  align:   'center',
+  content: container({
+    size:    'sm',
+    content: accordion({
+      items: [
+        {
+          question: 'Is my journal really private?',
+          answer:   'Yes — completely. Entries are encrypted on your device using AES-256 before upload. Our servers only ever see ciphertext. Even Lumio employees cannot read your journal.',
+        },
+        {
+          question: 'What happens when my 14-day trial ends?',
+          answer:   'You\'ll automatically drop to the Free plan. All your entries are kept — you just lose access to Pro features like AI insights and the full prompt library. No surprise charges.',
+        },
+        {
+          question: 'Can I export my data?',
+          answer:   'Pro users can export the full journal history as a PDF or JSON file at any time from Settings → Export. Free users can export the last 30 days.',
+        },
+        {
+          question: 'Does it work offline?',
+          answer:   'Yes. The full app works offline — write, browse, and edit entries without a connection. Changes sync automatically when you\'re back online.',
+        },
+        {
+          question: 'How does the AI know what to say?',
+          answer:   'The AI reads your entries (on-device, before encryption) to spot recurring themes, emotional patterns, and topics. It never sends plain-text content to our servers.',
+        },
+      ],
+    }),
+  }),
+})
+
+// ── Download CTA ──────────────────────────────────────────────────────────────
+
+const downloadCta = section({
+  id:      'download',
+  content: cta({
+    eyebrow:  'Ready to start?',
+    title:    'Your journal is waiting',
+    subtitle: 'Join 127,000 people who journal with Lumio every day. Free forever — no credit card needed.',
+    actions:  `
+      <div class="u-flex u-gap-3 u-flex-wrap u-justify-center">
+        ${appBadge({ store: 'apple',  href: '#' })}
+        ${appBadge({ store: 'google', href: '#' })}
+      </div>`,
+  }),
+})
+
+// ── Footer ────────────────────────────────────────────────────────────────────
+
+const pageFooter = footer({
+  logo:     `${iconFeather({ size: 18 })}<span class="u-font-bold" style="letter-spacing:-0.02em">Lumio</span>`,
+  logoHref: '#',
+  links: [
+    { label: 'Privacy',  href: '#' },
+    { label: 'Terms',    href: '#' },
+    { label: 'Security', href: '#' },
+    { label: 'Blog',     href: '#' },
+    { label: 'Twitter',  href: '#' },
+  ],
+  legal: `© ${new Date().getFullYear()} Lumio Inc. All rights reserved.`,
+})
+
+// ── Spec ──────────────────────────────────────────────────────────────────────
+
+export default {
+  route: '/templates/mobile-app',
+
+  meta: {
+    title:       'Lumio — Journal with clarity',
+    description: 'The AI-powered journaling app that helps you understand your thoughts, track your mood, and build lasting habits.',
+    theme:       'light',
+    styles:      ['/pulse-ui.css', '/themes/lumio.css'],
+  },
+
+  view: () => `
+    <a href="#main-content" class="skip-link" style="position:absolute;left:-9999px;top:1rem;z-index:9999;padding:0.5rem 1rem;background:var(--color-accent);color:white;border-radius:0.25rem;text-decoration:none">Skip to main content</a>
+    ${pageNav}
+    <main id="main-content">
+      ${pageHero}
+      ${statsSection}
+      ${featuresSection}
+      ${testimonialsSection}
+      ${pricingSection}
+      ${faqSection}
+      ${downloadCta}
+    </main>
+    ${pageFooter}
+    <script src="${asset('/pulse-ui.js')}" defer></script>`,
+}

package/docs/src/pages/templates.js

@@ -0,0 +1,156 @@
+/**
+ * Pulse Docs — Templates
+ *
+ * Showcase of ready-made Pulse templates.
+ */
+
+import { renderLayout, h1, lead, section } from '../lib/layout.js'
+import { prevNext }                        from '../lib/nav.js'
+import { badge }                           from '../../../src/ui/index.js'
+
+function esc(s) {
+  return String(s).replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/"/g, '&quot;')
+}
+
+function statPill(label, value) {
+  return `<span style="display:inline-flex;align-items:center;gap:0.3rem;padding:0.2rem 0.6rem;border-radius:999px;font-size:0.72rem;font-weight:500;background:rgba(255,255,255,0.06);border:1px solid rgba(255,255,255,0.1);color:rgba(255,255,255,0.55)">
+    <span style="color:#7c3aed">●</span> ${esc(label)}: <strong style="color:rgba(255,255,255,0.85);font-weight:600">${esc(String(value))}</strong>
+  </span>`
+}
+
+function templateCard({ name, route, description, tags = [], stats = {}, preview = '' }) {
+  const tagHtml = tags.map(t =>
+    `<span style="display:inline-block;padding:0.2rem 0.6rem;background:rgba(255,255,255,0.07);border:1px solid rgba(255,255,255,0.12);border-radius:4px;font-size:0.72rem;font-weight:500;color:rgba(255,255,255,0.55)">${esc(t)}</span>`
+  ).join('')
+
+  const statHtml = Object.entries(stats).map(([k, v]) => statPill(k, v)).join('')
+
+  return `
+    <div style="border:1px solid rgba(255,255,255,0.1);border-radius:0.875rem;overflow:hidden;display:flex;flex-direction:column;background:rgba(255,255,255,0.03)">
+
+      <a href="${esc(route)}" aria-label="Open ${esc(name)} template" style="display:block;background:#0d0d12;border-bottom:1px solid rgba(255,255,255,0.08);text-decoration:none;overflow:hidden">
+        <div style="padding:0.5rem 0.75rem;background:#16161e;display:flex;align-items:center;gap:0.375rem;border-bottom:1px solid rgba(255,255,255,0.06)">
+          <span style="width:8px;height:8px;border-radius:50%;background:#ff5f57;display:inline-block"></span>
+          <span style="width:8px;height:8px;border-radius:50%;background:#febc2e;display:inline-block"></span>
+          <span style="width:8px;height:8px;border-radius:50%;background:#28c840;display:inline-block"></span>
+          <span style="flex:1;height:14px;background:rgba(255,255,255,0.06);border-radius:3px;margin-left:0.5rem"></span>
+        </div>
+        <div style="padding:1rem 1.25rem 1.25rem;min-height:180px">
+          ${preview}
+        </div>
+      </a>
+
+      <div style="padding:1.25rem 1.25rem 1rem;flex:1;display:flex;flex-direction:column;gap:0.875rem">
+        <div>
+          <div style="display:flex;flex-wrap:wrap;align-items:center;gap:0.5rem;margin-bottom:0.5rem">
+            <h2 style="margin:0;font-size:1rem;font-weight:700;line-height:1.3">${esc(name)}</h2>
+            ${tagHtml}
+          </div>
+          <p style="margin:0;font-size:0.85rem;line-height:1.6;opacity:0.65">${esc(description)}</p>
+        </div>
+        <div style="display:flex;flex-wrap:wrap;gap:0.3rem;padding-top:0.625rem;border-top:1px solid rgba(255,255,255,0.08)">${statHtml}</div>
+      </div>
+
+      <div style="padding:0.875rem 1.25rem;border-top:1px solid rgba(255,255,255,0.08)">
+        <a href="${esc(route)}" style="display:inline-flex;align-items:center;gap:0.375rem;padding:0.5rem 1.1rem;background:#7c3aed;border-radius:0.4rem;font-size:0.85rem;font-weight:600;text-decoration:none !important;color:#fff !important">
+          View template
+          <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2.5" aria-hidden="true"><path d="M5 12h14M12 5l7 7-7 7"/></svg>
+        </a>
+      </div>
+    </div>`
+}
+
+// Mini CSS page-layout previews ────────────────────────────────────────────────
+
+const bar  = (w, h, bg = 'rgba(255,255,255,0.12)', r = 3) =>
+  `<div style="width:${w};height:${h}px;background:${bg};border-radius:${r}px;flex-shrink:0"></div>`
+
+const mobileAppPreview = `
+  <div style="display:flex;flex-direction:column;gap:6px;font-size:0">
+
+    <!-- nav -->
+    <div style="display:flex;align-items:center;gap:6px">
+      ${bar('28px', 6, 'var(--color-accent)')}
+      ${bar('40px', 4)}  ${bar('30px', 4)}  ${bar('30px', 4)}
+      <div style="flex:1"></div>
+      ${bar('48px', 18, 'var(--color-accent)', 4)}
+    </div>
+
+    <!-- hero -->
+    <div style="display:flex;gap:10px;margin-top:4px;align-items:center">
+      <div style="flex:1;display:flex;flex-direction:column;gap:5px">
+        ${bar('50px', 3, 'var(--color-accent)')}
+        ${bar('100%', 10, 'rgba(255,255,255,0.18)', 2)}
+        ${bar('85%',  10, 'rgba(255,255,255,0.18)', 2)}
+        ${bar('70%',   6, 'rgba(255,255,255,0.08)', 2)}
+        <div style="display:flex;gap:5px;margin-top:4px">
+          ${bar('52px', 16, 'rgba(255,255,255,0.15)', 4)}
+          ${bar('52px', 16, 'rgba(255,255,255,0.15)', 4)}
+        </div>
+      </div>
+      <div style="width:52px;height:90px;background:rgba(255,255,255,0.08);border-radius:8px;border:1px solid rgba(255,255,255,0.12);flex-shrink:0;display:flex;flex-direction:column;gap:4px;padding:6px">
+        ${bar('100%', 20, 'var(--color-accent)', 4)}
+        ${bar('100%', 12, 'rgba(255,255,255,0.1)', 3)}
+        ${bar('100%', 12, 'rgba(255,255,255,0.1)', 3)}
+      </div>
+    </div>
+
+    <!-- stats row -->
+    <div style="display:flex;gap:5px;margin-top:2px">
+      ${[1,2,3,4].map(() => `<div style="flex:1;height:22px;background:rgba(255,255,255,0.06);border-radius:3px"></div>`).join('')}
+    </div>
+
+    <!-- features grid -->
+    <div style="display:flex;gap:5px">
+      ${[1,2,3].map(() => `<div style="flex:1;height:36px;background:rgba(255,255,255,0.05);border-radius:3px;padding:5px;display:flex;flex-direction:column;gap:3px">${bar('40%',4,'var(--color-accent)')}${bar('80%',3)}${bar('90%',3)}</div>`).join('')}
+    </div>
+
+    <!-- pricing row -->
+    <div style="display:flex;gap:5px">
+      ${[1,2,3].map((i) => `<div style="flex:1;height:42px;background:${i===2?'rgba(139,92,246,0.2)':'rgba(255,255,255,0.05)'};border-radius:3px;border:${i===2?'1px solid rgba(139,92,246,0.5)':'1px solid transparent'};padding:5px;display:flex;flex-direction:column;gap:3px">${bar('60%',4,i===2?'var(--color-accent)':'rgba(255,255,255,0.15)')}${bar('40%',6,i===2?'rgba(255,255,255,0.6)':'rgba(255,255,255,0.2)')}${bar('80%',3)}</div>`).join('')}
+    </div>
+  </div>`
+
+const TEMPLATES = [
+  {
+    name:        'Mobile App Landing Page',
+    route:       '/templates/mobile-app',
+    description: 'A complete marketing site for a mobile app — nav, hero with phone mockup, feature grid, social proof stats, testimonials, pricing cards, FAQ accordion, download CTA, and footer.',
+    tags:        ['Landing Page', 'Marketing'],
+    preview:     mobileAppPreview,
+    stats: {
+      'Accessibility': '100',
+      'Best Practices': '100',
+      'SEO':           '100',
+      'CLS':           '0.00',
+      'JS':            '~4.2 kB',
+    },
+  },
+]
+
+const content = `
+  ${h1('Templates')}
+  ${lead('Production-ready Pulse templates built entirely from the <a href="/components">UI component library</a>. Every template ships with 100/100/100 Lighthouse scores (Accessibility, Best Practices, SEO) and zero CLS.')}
+
+  <div style="display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:1.5rem;margin-top:2rem">
+    ${TEMPLATES.map(templateCard).join('')}
+  </div>
+
+  ${section('adding', 'Suggesting a template')}
+  <p>Have an idea for a template? <a href="https://github.com/invisibleloop/pulse-framework/issues" target="_blank" rel="noopener noreferrer">Open an issue on GitHub</a> with the layout you have in mind and we'll consider adding it to the library.</p>
+`
+
+export default {
+  route: '/templates',
+
+  meta: {
+    title:       'Templates — Pulse',
+    description: 'Production-ready Pulse templates. Every template uses only Pulse UI components and ships with 100/100/100 Lighthouse scores.',
+    styles:      ['/pulse-ui.css', '/docs.css'],
+  },
+
+  view: () => {
+    const { prev, next } = prevNext('/templates')
+    return renderLayout({ currentHref: '/templates', content, prev, next })
+  },
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@invisibleloop/pulse",
-  "version": "0.9.1",
+  "version": "0.10.1",
   "type": "module",
   "description": "AI-first frontend framework. The spec is the source of truth.",
   "license": "MIT",

package/public/.pulse-ui-version

@@ -1 +1 @@
-0.9.1
+0.10.1

package/public/pulse-ui.css

@@ -24,7 +24,7 @@
   --ui-accent:       var(--accent,        #9b8dff);
   --ui-accent-hover: var(--accent-hover,  #b5aaff);
   --ui-accent-dim:   var(--accent-dim,    rgba(155,141,255,.12));
-  --ui-accent-text:  var(--accent-text,   #ffffff);
+  --ui-accent-text:  var(--accent-text,   #0d0a20);
   --ui-green:        var(--green,         #3dd68c);
   --ui-green-dim:    rgba(61, 214, 140, .12);
   --ui-red:          var(--red,           #ff6b6b);
@@ -525,6 +525,7 @@ html, body {
 .ui-stat-change--neutral { color: var(--ui-muted);  }
 
 .ui-stat--center { align-items: center; text-align: center; }
+.ui-stat--center .ui-stat-change { margin-inline: auto; }
 
 /* ─── Avatar ─────────────────────────────────────────────────────────────── */
 .ui-avatar {
@@ -761,6 +762,41 @@ hr.ui-divider {
 .ui-hero { padding: 5rem 1.5rem; text-align: center; }
 .ui-hero--left { text-align: left; }
 .ui-hero--sm   { padding-top: 2.5rem; padding-bottom: 0; }
+.ui-hero--gradient,
+.ui-hero--gradient--purple {
+  background:
+    radial-gradient(ellipse 70% 80% at 75% 50%, #2d1b6e 0%, #1a0f45 45%, transparent 75%),
+    radial-gradient(ellipse 60% 60% at 20% 80%, #1c1060 0%, transparent 65%),
+    #0d0a1e;
+}
+
+.ui-hero--gradient--blue {
+  background:
+    radial-gradient(ellipse 70% 80% at 75% 50%, #0e2d6b 0%, #071840 45%, transparent 75%),
+    radial-gradient(ellipse 60% 60% at 20% 80%, #0a1f5c 0%, transparent 65%),
+    #060d1e;
+}
+
+.ui-hero--gradient--green {
+  background:
+    radial-gradient(ellipse 70% 80% at 75% 50%, #0d3d28 0%, #052218 45%, transparent 75%),
+    radial-gradient(ellipse 60% 60% at 20% 80%, #083020 0%, transparent 65%),
+    #020e09;
+}
+
+.ui-hero--gradient--rose {
+  background:
+    radial-gradient(ellipse 70% 80% at 75% 50%, #6b0e35 0%, #400720 45%, transparent 75%),
+    radial-gradient(ellipse 60% 60% at 20% 80%, #5c0a2a 0%, transparent 65%),
+    #1e0610;
+}
+
+.ui-hero--gradient--orange {
+  background:
+    radial-gradient(ellipse 70% 80% at 75% 50%, #6b2e0e 0%, #401807 45%, transparent 75%),
+    radial-gradient(ellipse 60% 60% at 20% 80%, #5c2208 0%, transparent 65%),
+    #1e0e04;
+}
 
 .ui-hero-inner { max-width: 720px; margin: 0 auto; }
 .ui-hero--left .ui-hero-inner { margin: 0; }
@@ -1767,6 +1803,87 @@ hr.ui-divider {
 
 .ui-code-window-code { font-family: inherit; }
 
+/* ─── Phone Frame ────────────────────────────────────────────────────────────
+   Realistic CSS mobile phone frame — body, dynamic island, side buttons,
+   home indicator. Drop any HTML into the content slot.                       */
+.ui-phone {
+  position: relative;
+  display: inline-flex;
+  width: 260px;
+  background: linear-gradient(160deg, #1e1e28 0%, #141418 100%);
+  border-radius: 3rem;
+  border: 1.5px solid rgba(255, 255, 255, 0.1);
+  box-shadow:
+    0 0 0 1px rgba(0, 0, 0, 0.8),
+    0 2px 0 1px rgba(255, 255, 255, 0.05) inset,
+    0 48px 96px rgba(0, 0, 0, 0.55),
+    0 12px 32px rgba(0, 0, 0, 0.4);
+  padding: 12px;
+}
+
+/* Side buttons */
+.ui-phone-btn {
+  position: absolute;
+  background: linear-gradient(90deg, #1a1a22 0%, #26262e 100%);
+  border-radius: 2px;
+}
+.ui-phone-btn--mute     { left: -3px; top: 88px;  width: 3px; height: 28px; }
+.ui-phone-btn--vol-up   { left: -3px; top: 128px; width: 3px; height: 48px; }
+.ui-phone-btn--vol-down { left: -3px; top: 186px; width: 3px; height: 48px; }
+.ui-phone-btn--power    { right: -3px; top: 140px; width: 3px; height: 64px; }
+
+/* Phone inner — holds screen + chrome */
+.ui-phone-inner {
+  width: 100%;
+  background: #000;
+  border-radius: 2.5rem;
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+}
+
+/* Dynamic island */
+.ui-phone-island {
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 32px;
+  background: #000;
+}
+.ui-phone-camera {
+  display: block;
+  width: 10px;
+  height: 10px;
+  background: radial-gradient(circle at 35% 35%, #2a2a3a, #0a0a0a);
+  border-radius: 50%;
+  box-shadow: 0 0 0 1px rgba(255,255,255,0.06);
+}
+
+/* Screen */
+.ui-phone-screen {
+  flex: 1;
+  overflow: hidden;
+}
+
+/* Home indicator */
+.ui-phone-home {
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 24px;
+  background: #000;
+}
+.ui-phone-home::after {
+  content: '';
+  display: block;
+  width: 80px;
+  height: 4px;
+  background: rgba(255, 255, 255, 0.25);
+  border-radius: 2px;
+}
+
 /* ─── Footer ─────────────────────────────────────────────────────────────────
    Site footer — logo, nav links, legal text. Stacks on mobile.              */
 .ui-footer {