@invisibleloop/pulse 0.12.3 → 0.14.1

package/docs/src/pages/templates/bookworms.js

@@ -0,0 +1,227 @@
+/**
+ * Pulse — BookWorms example
+ *
+ * Demonstrates:
+ *   - Light-theme editorial branding for a physical/independent business
+ *   - nav() with logo text, anchor links, and a CTA action button
+ *   - Pure HTML sections — no Pulse section/container wrappers (shows the
+ *     framework is just strings; you can write vanilla HTML where it fits)
+ *   - Book card grid (staff picks) with cover images from picsum.photos
+ *   - Pull-quote / press quote breakout
+ *   - Two-column feature grid
+ *   - Bordered event list with date / title / host columns
+ *   - Centred CTA section
+ *   - footer() with flat link list
+ *   - Google Fonts (Fraunces) for display headings
+ *
+ * Run: node examples/dev.server.js  →  http://localhost:3001/bookworms
+ */
+
+import { nav, button, footer } from '../../../../src/ui/index.js'
+import { asset } from '../../lib/layout.js'
+
+// ---------------------------------------------------------------------------
+// Static data
+// ---------------------------------------------------------------------------
+
+const picks = [
+  {
+    tag:    'Fiction · Staff pick',
+    title:  'The Lantern Keepers',
+    author: 'Iris Aldenmoor',
+    note:   'A quiet novel about three sisters, an unreliable lighthouse, and the long winter that follows a single decision.',
+    cover:  '/images/bookworms/lantern-keepers.jpg',
+  },
+  {
+    tag:    'Non-fiction · This week',
+    title:  'How We Read Now',
+    author: 'Dr. Samuel Okafor',
+    note:   'A short, generous history of attention — from monastic libraries to the open browser tab.',
+    cover:  '/images/bookworms/how-we-read-now.jpg',
+  },
+  {
+    tag:    'Rare find · Just arrived',
+    title:  'Letters from a Provincial Bookseller',
+    author: 'M. Halloran (1927)',
+    note:   'First edition, lightly foxed. A wry account of running a shop through a quiet decade.',
+    cover:  '/images/bookworms/provincial-bookseller.jpg',
+  },
+]
+
+const features = [
+  {
+    title: 'Curated, not algorithmic',
+    body:  'Every recommendation comes from one of our booksellers. No bestseller lists, no engagement metrics — just books we\'ve read and would lend you ourselves.',
+  },
+  {
+    title: 'Browse by mood',
+    body:  'Looking for something restorative? Something difficult? Our shelves are arranged the way readers actually think.',
+  },
+  {
+    title: 'Author evenings & book clubs',
+    body:  'Small, considered events with writers we admire. Wine, conversation, and signed copies — no panels of four.',
+  },
+  {
+    title: 'Free delivery over £25',
+    body:  'Wrapped by hand, delivered locally by bicycle. Posted further afield by the next morning.',
+  },
+  {
+    title: 'Gift cards & reader subscriptions',
+    body:  'A monthly book chosen for one specific reader, with a note from the bookseller who picked it.',
+  },
+  {
+    title: 'Open seven days',
+    body:  'Old Market Lane, opposite the bakery. Coffee from nine, books from ten.',
+  },
+]
+
+const events = [
+  { date: '12 June',  title: 'An evening with Iris Aldenmoor', host: 'In conversation with Priya Joshi' },
+  { date: '21 June',  title: 'Slow Reading Club — Middlemarch, part one', host: 'Hosted by the BookWorms team' },
+  { date: '03 July',  title: 'New voices in non-fiction', host: 'Three debut authors read and answer questions' },
+]
+
+const navLinks = [
+  { label: 'Browse',      href: '#browse' },
+  { label: 'Staff picks', href: '#picks'  },
+  { label: 'Events',      href: '#events' },
+  { label: 'Visit',       href: '#visit'  },
+]
+
+// ---------------------------------------------------------------------------
+// Spec
+// ---------------------------------------------------------------------------
+
+export default {
+  route: '/templates/bookworms',
+
+  meta: {
+    title:       'BookWorms — an independent bookstore for curious readers',
+    description: 'Handpicked fiction, non-fiction, and rare finds. Weekly staff picks, author evenings, and a slow reading club. Open seven days on Old Market Lane.',
+    theme:       'light',
+    styles:      [
+      'https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,400;0,9..144,500;1,9..144,400&display=swap',
+      '/pulse-ui.css',
+      '/bookworms.css',
+    ],
+  },
+
+  view: () => `
+    ${nav({
+      logo:   'BookWorms',
+      links:  navLinks,
+      action: button({ label: 'Visit the shop', href: '#visit', variant: 'primary', size: 'sm' }),
+      sticky: true,
+    })}
+
+    <main id="main-content">
+      <section class="bw-hero">
+        <div class="bw-shell bw-hero__inner">
+          <div class="bw-hero__content">
+            <p class="bw-eyebrow">Independent bookstore · Old Market Lane</p>
+            <h1 class="bw-hero-title">Books, handpicked for the curious.</h1>
+            <p class="bw-hero-lede">
+              BookWorms is a small shop with a long memory. Every title on our shelves has been read by
+              someone who works here — and is waiting for the right reader to find it.
+            </p>
+            <div class="bw-cta-actions bw-cta-actions--start">
+              ${button({ label: 'See this week\u2019s picks', href: '#picks', variant: 'primary' })}
+              ${button({ label: 'Upcoming events',            href: '#events', variant: 'secondary' })}
+            </div>
+          </div>
+          <div class="bw-hero__image" aria-hidden="true">
+            <img src="/images/bookworms/hero-books.jpg" alt="" width="820" height="1080" />
+          </div>
+        </div>
+      </section>
+
+      <section class="bw-section" id="picks">
+        <div class="bw-shell">
+          <p class="bw-section-label">This week</p>
+          <h2 class="bw-section-title">Three books we\u2019re pressing into people\u2019s hands.</h2>
+          <div class="bw-picks">
+            ${picks.map((p, i) => `
+              <article>
+                <div class="bw-pick-cover-wrap">
+                  <img class="bw-pick-cover" src="${p.cover}" alt="Cover of ${p.title} by ${p.author}" width="400" height="600" loading="lazy" />
+                  <div class="bw-pick-overlay">
+                    <h3 class="bw-pick-overlay-title">${p.title}</h3>
+                    <p class="bw-pick-overlay-author">${i === 2 ? p.author.replace(/\s*\(\d{4}\)/, '') : 'by ' + p.author}</p>
+                  </div>
+                </div>
+                <p class="bw-pick-meta">${p.tag}</p>
+                <h3 class="bw-pick-title">${p.title}</h3>
+                <p class="bw-pick-author">by ${p.author}</p>
+                <p class="bw-pick-note">${p.note}</p>
+              </article>
+            `).join('')}
+          </div>
+        </div>
+      </section>
+
+      <section class="bw-pull">
+        <div class="bw-shell">
+          <p class="bw-pull-quote">\u201cThe kind of shop where you walk in for one book and leave with three you didn\u2019t know you needed.\u201d</p>
+          <p class="bw-pull-cite">\u2014 The Quarterly Review</p>
+        </div>
+      </section>
+
+      <section class="bw-section" id="browse">
+        <div class="bw-shell">
+          <p class="bw-section-label">What we do</p>
+          <h2 class="bw-section-title">A bookstore that still reads.</h2>
+          <div class="bw-features">
+            ${features.map(f => `
+              <div>
+                <h3 class="bw-feature-title">${f.title}</h3>
+                <p class="bw-feature-body">${f.body}</p>
+              </div>
+            `).join('')}
+          </div>
+        </div>
+      </section>
+
+      <section class="bw-section" id="events">
+        <div class="bw-shell">
+          <p class="bw-section-label">Upcoming</p>
+          <h2 class="bw-section-title">Evenings worth turning up for.</h2>
+          <div class="bw-events">
+            ${events.map(e => `
+              <article class="bw-event">
+                <p class="bw-event-date">${e.date}</p>
+                <h3 class="bw-event-title">${e.title}</h3>
+                <p class="bw-event-host">${e.host}</p>
+              </article>
+            `).join('')}
+          </div>
+        </div>
+      </section>
+
+      <section class="bw-cta" id="visit">
+        <div class="bw-shell">
+          <h2 class="bw-cta-title">Come and browse.</h2>
+          <p class="bw-cta-sub">
+            14 Old Market Lane, opposite the bakery. Open Monday to Sunday, 10am\u20137pm.
+            Or sign up to receive one handpicked book each month.
+          </p>
+          <div class="bw-cta-actions">
+            ${button({ label: 'Plan a visit',          href: '#visit', variant: 'primary'   })}
+            ${button({ label: 'Reader subscription',   href: '#visit', variant: 'secondary' })}
+          </div>
+        </div>
+      </section>
+    </main>
+
+    ${footer({
+      logo:  'BookWorms',
+      links: [
+        { label: 'Browse',  href: '#browse' },
+        { label: 'Events',  href: '#events' },
+        { label: 'Visit',   href: '#visit'  },
+        { label: 'Contact', href: '#visit'  },
+      ],
+      legal: '\u00a9 2026 BookWorms \u00b7 14 Old Market Lane',
+    })}
+    <script src="${asset('/pulse-ui.js')}" defer></script>
+  `,
+}

package/docs/src/pages/templates/coutumes.js

@@ -0,0 +1,226 @@
+// Recreation of coutumes.com for Pulse capability testing
+// This spec deliberately uses Pulse UI components to document:
+//   - which components cover the design requirements, and
+//   - which new components were needed (marked ★ NEW)
+//
+// Substituted fonts: Bebas Neue (→ Plaak 3), Cormorant Garamond (→ Exposure Regular)
+// All photography: placeholder images (originals are proprietary Coutumes photos)
+
+import { nav, banner, editorialHero, pullquote, grid, productCard, imagePair, brandStatement, uiImage, footer, input, button } from '@invisibleloop/pulse/ui'
+import { asset } from '../../lib/layout.js'
+
+export const spec = {
+  route: '/templates/coutumes',
+  meta: {
+    title: 'Coutumes — Recreation Test',
+    description: 'Pulse recreation of coutumes.com for capability testing.',
+    styles: [
+      'https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Cormorant+Garamond:ital,wght@0,400;0,500;1,400&family=Barlow:wght@400;500&display=optional',
+      '/pulse-ui.css',
+      '/coutumes.css',
+    ],
+  },
+
+  state: { bannerVisible: true },
+
+  mutations: {
+    dismissBanner: (state) => ({ bannerVisible: false }),
+  },
+
+  view: (state) => `
+  <main id="main-content">
+
+    <!-- Announcement bar — fixed to bottom, dismissible -->
+    ${state.bannerVisible ? banner({
+      content:      `<span>SILVER LANDS&nbsp;•&nbsp;NEW CAPSULE COLLECTION</span>`,
+      variant:      'promo',
+      position:     'bottom',
+      dismissible:  true,
+      dismissEvent: 'dismissBanner',
+    }) : ''}
+
+    <!-- Navigation — nav() with utility links in action slot
+         GAP: nav has no second link group; utility links (Search, Magazine, FAQ, Cart)
+         are crammed into the action slot as raw HTML rather than a proper utilityLinks param -->
+    ${nav({
+      logo: 'COUTUMES',
+      logoHref: '/',
+      links: [
+        { label: 'Jewelry',        href: '#' },
+        { label: 'Accessories',    href: '#' },
+        { label: 'Souvenirs Club', href: '#' },
+        { label: 'About',          href: '#' },
+      ],
+      utilityLinks: [
+        { label: 'Search',     href: '#' },
+        { label: 'Magazine',   href: '#' },
+        { label: 'FAQ',        href: '#' },
+        { label: 'Cart (0)',   href: '#' },
+      ],
+      sticky: true,
+      background: 'var(--coutumes-white)',
+      color: 'var(--coutumes-black)',
+    })}
+
+    <!-- Hero — ★ NEW: editorialHero() — dual split-image with overlapping blend-mode type.
+         The hero() component could not do this: it only supports a single image side.
+         editorialHero accepts leftImage + rightImage + lines array + blend mode. -->
+    ${editorialHero({
+      leftImage:  `<img src="https://images.unsplash.com/photo-1617038260897-41a1f14a8ca0?w=700&q=80" alt="Hand holding a cream hat, wearing a dark ring" width="700" loading="eager" fetchpriority="high">`,
+      rightImage: `<img src="https://images.unsplash.com/photo-1552374196-1ab2a1c593e8?w=700&q=80" alt="Man leaning against a Land Rover in the countryside" width="700" loading="eager">`,
+      lines:   ['INTRODUCING', 'SILVER LANDS', 'CAPSULE', 'COLLECTION'],
+      heading: 'Silver Lands Capsule Collection',
+      color:   'var(--coutumes-amber)',
+      blend:   'none',
+      ratio:   '3/4',
+      class:   'coutumes-hero',
+    })}
+
+    <!-- Editorial quote — ★ ENHANCED: pullquote() with new variant: 'editorial'
+         Previously pullquote only had a left accent border (wrong for this centred
+         large-serif pattern). New variant='editorial' removes the border and centres. -->
+    <section id="collection">
+      ${pullquote({
+        quote:   'Open roads with no precise destination, passing landscapes, a few days spent outside with friends. Pieces designed to travel for a long time.',
+        cite:    'Silver Lands Capsule Collection',
+        variant: 'editorial',
+        size:    'lg',
+      })}
+    </section>
+
+    <!-- Product grid — grid() + ★ NEW: productCard()
+         photoCard() is polaroid-styled (wrong for fashion e-commerce).
+         productCard() is full-bleed with hover-reveal name overlay. -->
+    ${grid({
+      cols:    3,
+      gap:     'sm',
+      content: [
+        {
+          img:   'https://images.unsplash.com/photo-1611085583191-a3b181a88401?w=600&q=80',
+          alt:   'White beaded bracelet on dark wrist',
+          name:  'Silver Tube Bracelet',
+          price: '£67.00',
+          badge: 'NEW',
+        },
+        {
+          img:   'https://images.unsplash.com/photo-1535632066927-ab7c9ab60908?w=600&q=80',
+          alt:   'Close portrait of young man with curly hair wearing gold earring',
+          name:  'Kali Hoop Earring',
+          price: '£31.00',
+          badge: 'NEW',
+        },
+        {
+          img:   'https://picsum.photos/seed/cuff/600/750',
+          alt:   'Silver cuff bracelet on wrist',
+          name:  'Land Cuff',
+          price: '£62.00',
+          badge: 'NEW',
+        },
+      ].map(p => productCard({
+        src:    p.img,
+        alt:    p.alt,
+        name:   p.name,
+        price:  p.price,
+        badge:  p.badge,
+        ratio:  '4/5',
+        layout: 'below',
+      })).join(''),
+      class: 'coutumes-product-grid',
+    })}
+
+    <!-- 50/50 split editorial images — ★ NEW: imagePair()
+         media() is image + text. There was no component for two editorial photos
+         side by side with no text. imagePair() fills this gap. -->
+    ${imagePair({
+      leftSrc:    'https://picsum.photos/seed/craft/700/900',
+      leftAlt:    'Craftsman working with tools in a jewelry workshop',
+      rightSrc:   'https://images.unsplash.com/photo-1441984904996-e0b6ba687e04?w=700&q=80',
+      rightAlt:   'Elegant boutique storefront with warm lighting',
+      ratio:      '3/4',
+      label:      'Craftmanship and boutique',
+      leftLabel:  'Craftmanship',
+      leftHref:   '#craftmanship',
+      rightLabel: 'Store',
+      rightHref:  '#store',
+    })}
+
+    <!-- Large editorial statement — ★ NEW: brandStatement()
+         pullquote() is for shorter attributed quotes (with left border).
+         brandStatement() is for full-width brand-voice paragraphs: large,
+         centred, italic serif. -->
+    ${brandStatement({
+      text: 'pieces that are both eclectic and everyday. Subtly precious, expressive, and refined, our jewelry complements an outfit or disrupts it, introducing new rituals into the modern man&rsquo;s wardrobe.',
+      font: 'serif',
+      size: 'md',
+    })}
+
+    <!-- Portrait — uiImage() works well here with maxWidth constraint -->
+    ${uiImage({
+      src:      'https://images.unsplash.com/photo-1506794778202-cad84cf45f1d?w=600&q=80',
+      alt:      'Young man holding a Kodak camera, wearing a silver ring',
+      ratio:    '3/4',
+      maxWidth: '600px',
+      class:    'coutumes-portrait',
+    })}
+
+    <!-- Footer — ★ ENHANCED: footer() with new columns + subscribe + wordmark + background params.
+         The simple footer() only had logo + flat links + legal.
+         New rich variant adds multi-column link grid, subscribe form, and giant wordmark. -->
+    ${footer({
+      background: 'var(--coutumes-amber)',
+      color:      'var(--coutumes-black)',
+      subscribe: `
+        <p class="coutumes-footer-subscribe-label">JOIN THE COUTUMES CLUB</p>
+        <form class="coutumes-footer-form" aria-label="Newsletter subscribe">
+          <label for="footer-email" class="coutumes-sr-only">Email address</label>
+          <input id="footer-email" type="email" name="email" placeholder="Email" autocomplete="email">
+          <button type="submit">■ SUBSCRIBE</button>
+        </form>
+        <p class="coutumes-footer-legal">By clicking Subscribe, I accept the <a href="#">Privacy Policy</a>.</p>
+      `,
+      columns: [
+        {
+          title: 'Our Brand',
+          links: [
+            { label: 'Craftmanship', href: '#' },
+            { label: 'About Us',     href: '#' },
+            { label: 'Our Store',    href: '#' },
+            { label: 'Magazine',     href: '#' },
+            { label: 'Instagram',    href: '#' },
+          ],
+        },
+        {
+          title: 'Our Collections',
+          links: [
+            { label: 'Best sellers',    href: '#' },
+            { label: 'Silver Lands',    href: '#' },
+            { label: 'Classics',        href: '#' },
+            { label: 'Stones',          href: '#' },
+            { label: 'Denim Collection',href: '#' },
+            { label: 'Souvenirs Club',  href: '#' },
+          ],
+        },
+        {
+          title: 'Help',
+          links: [
+            { label: 'Shipping Policy', href: '#' },
+            { label: 'Return',          href: '#' },
+            { label: 'FAQ',             href: '#' },
+            { label: 'Contact',         href: '#' },
+          ],
+        },
+      ],
+      wordmark: 'COUTUMES',
+      links: [
+        { label: 'Privacy Policy',   href: '#' },
+        { label: 'Terms of service', href: '#' },
+      ],
+      legal: 'Site by Coutumes',
+    })}
+
+  </main>
+  <script src="${asset('/pulse-ui.js')}" defer></script>
+  `,
+}
+
+export default spec

package/docs/src/pages/templates/journey.js

@@ -0,0 +1,186 @@
+/**
+ * Pulse — Journey example
+ *
+ * Demonstrates:
+ *   - Mode B creative override — raw HTML throughout, no structural components
+ *   - Split-screen layout: sticky hero left / scrollable timeline right (100svh grid)
+ *   - appBadge component from @invisibleloop/pulse/ui
+ *   - Deep-night palette (#0A0A0F) with gold (#C9A96E) accent
+ *   - Alternating left/right timeline cards with centred thread + connector dots
+ *   - calc(50% - var(--ui-space-8)) pattern for half-width timeline cards
+ *   - Sticky positioned timeline column with overflow-y: auto + scrollbar-width: none
+ *   - Frosted glass nav: rgba translucency + backdrop-filter blur
+ *   - Skip link, visually-hidden headings, section aria-labelledby — full a11y
+ *   - Mobile responsive: stacks vertically, thread moves left, full-width cards
+ *   - iconTag, iconPlus, iconSend, iconArrowDown, iconFeather from icons.js
+ *   - picsum.photos/id/* for stable prototype images
+ *
+ * Run: node examples/dev.server.js  →  http://localhost:3001/journey
+ */
+
+import { appBadge } from '../../../../src/ui/index.js'
+import { iconTag, iconPlus, iconSend, iconArrowDown, iconFeather } from '../../../../src/ui/icons.js'
+
+// ---------------------------------------------------------------------------
+// Timeline data
+// ---------------------------------------------------------------------------
+
+const timelineEvents = [
+  {
+    year:  '2019',
+    title: 'First Day in the City',
+    body:  'Packed everything into one suitcase. The apartment was smaller than expected. The feeling was not.',
+    tag:   'Milestone',
+    image: { src: '/images/journey/29.jpg', alt: 'City street view' },
+  },
+  {
+    year:  '2020',
+    title: 'Learning to Stay Still',
+    body:  'The world paused. Finished three books. Started painting. Discovered what quiet actually sounds like.',
+    tag:   'Reflection',
+  },
+  {
+    year:  '2021',
+    title: 'The Road Trip',
+    body:  '4,200 miles across eleven states. Every diner looks the same after midnight. Every sunrise does not.',
+    tag:   'Adventure',
+    image: { src: '/images/journey/178.jpg', alt: 'Open road through a landscape' },
+  },
+  {
+    year:  '2022',
+    title: 'Said Yes',
+    body:  'On a Tuesday. In the kitchen. No ring yet, just the question and the answer and the rest of our lives.',
+    tag:   'Love',
+  },
+  {
+    year:  '2024',
+    title: 'This Is Home Now',
+    body:  'The boxes are gone. The walls have pictures. The cat has a name. The journey continues.',
+    tag:   'Present',
+  },
+]
+
+// ---------------------------------------------------------------------------
+// Timeline card helper
+// ---------------------------------------------------------------------------
+
+const tlCard = ({ year, title, body, tag, image }) => `
+  <div class="j-tl-card${image ? ' j-tl-card--image' : ''}">
+    ${image ? `<img class="j-tl-image" src="${image.src}" alt="${image.alt}" width="600" height="340" loading="lazy" decoding="async">` : ''}
+    <div class="j-tl-content">
+      <p class="j-tl-year">${year}</p>
+      <h3 class="j-tl-title">${title}</h3>
+      <p class="j-tl-body">${body}</p>
+      <span class="j-tl-tag">${iconTag({ size: 10 })}${tag}</span>
+    </div>
+  </div>
+`
+
+// ---------------------------------------------------------------------------
+// Spec
+// ---------------------------------------------------------------------------
+
+export default {
+  route: '/templates/journey',
+
+  meta: {
+    title:       'Journey \u2014 Your story, in order',
+    description: 'Plot your life\u2019s journey. Map events, milestones, and memories on a beautiful timeline.',
+    styles:      ['/pulse-ui.css', '/journey.css'],
+    theme:       'dark',
+  },
+
+  view: () => `
+    <a href="#main-content" class="j-skip-link">Skip to main content</a>
+
+    <header role="banner">
+      <nav class="j-nav" aria-label="Site navigation">
+        <a href="/journey" class="j-nav-wordmark" aria-label="Journey \u2014 home">Journey</a>
+        ${appBadge({ store: 'apple', href: '#download' })}
+      </nav>
+    </header>
+
+    <main id="main-content">
+
+      <!-- Hero + Timeline split -->
+      <div class="j-hero-split">
+
+        <!-- Hero -->
+        <section class="j-hero" aria-labelledby="journey-hero-title">
+          <p class="j-hero-eyebrow" aria-hidden="true">Your story \u00b7 In order</p>
+          <h1 class="j-hero-title" id="journey-hero-title">
+            Every<br>moment<br><em>matters.</em>
+          </h1>
+          <p class="j-hero-sub">
+            Journey is a beautiful timeline for your life. Plot events, mark milestones,
+            and explore the story only you can tell.
+          </p>
+          <div class="j-hero-cta">
+            <a href="#download" class="j-btn-primary">
+              Download free
+            </a>
+            <a href="#journey-timeline" class="j-btn-ghost">
+              See how it works ${iconArrowDown({ size: 14 })}
+            </a>
+          </div>
+          <div class="j-hero-scroll" aria-hidden="true">
+            <span class="j-hero-line"></span>
+            <span>Scroll to explore</span>
+          </div>
+        </section>
+
+        <!-- Timeline demo -->
+        <section class="j-timeline-section" id="journey-timeline" aria-labelledby="journey-timeline-heading">
+          <p class="j-section-label" aria-hidden="true">01 \u2014 Your timeline</p>
+          <h2 class="j-visually-hidden" id="journey-timeline-heading">Example journey timeline</h2>
+          <div class="j-timeline" role="list">
+            ${timelineEvents.map(ev => `
+              <div class="j-tl-item" role="listitem">
+                ${tlCard(ev)}
+              </div>
+            `).join('')}
+          </div>
+        </section>
+
+      </div><!-- end j-hero-split -->
+
+      <!-- Features -->
+      <section class="j-features" aria-labelledby="journey-features-heading">
+        <h2 class="j-visually-hidden" id="journey-features-heading">Features</h2>
+        <div>
+          <p class="j-feature-label">${iconPlus({ size: 12 })}Plot your path</p>
+          <p class="j-feature-body">Add any event \u2014 big or small \u2014 and watch your story take shape along a living timeline.</p>
+        </div>
+        <div>
+          <p class="j-feature-label">${iconTag({ size: 12 })}Tag &amp; explore</p>
+          <p class="j-feature-body">Organise moments by theme, mood, or chapter. Filter your timeline to find any memory instantly.</p>
+        </div>
+        <div>
+          <p class="j-feature-label">${iconSend({ size: 12 })}Share your journey</p>
+          <p class="j-feature-body">Export a beautiful visual timeline to share with the people who made it worth living.</p>
+        </div>
+      </section>
+
+      <!-- CTA / Download -->
+      <section class="j-cta" id="download" aria-labelledby="journey-cta-heading">
+        <p class="j-cta-eyebrow">Available now \u00b7 iOS</p>
+        <h2 class="j-cta-title" id="journey-cta-heading">
+          Begin your<br><em>journey</em> today.
+        </h2>
+        <div class="j-cta-badges">
+          ${appBadge({ store: 'apple', href: '#' })}
+        </div>
+      </section>
+
+    </main>
+
+    <footer class="j-footer" role="contentinfo">
+      <span class="j-footer-word">${iconFeather({ size: 12 })} Journey &copy; 2025</span>
+      <nav class="j-footer-links" aria-label="Footer navigation">
+        <a href="#privacy">Privacy</a>
+        <a href="#terms">Terms</a>
+        <a href="#contact">Contact</a>
+      </nav>
+    </footer>
+  `,
+}