@invisibleloop/pulse 0.20.11 → 0.20.19

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

@@ -1,227 +0,0 @@
-/**
- * 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

@@ -1,237 +0,0 @@
-// Recreation of coutumes.com for Pulse capability testing
-//
-// component-free — creative override: this editorial fashion recreation relies
-// on several highly custom sections (dual-image blend-mode hero, hover-reveal
-// product cards, 50/50 image pair, large serif brand statement, dismissible
-// announcement bar) that have no generic component equivalent — the former
-// editorialHero/productCard/imagePair/brandStatement/banner components were
-// cut from the library as narrow single-purpose wrappers an agent can
-// hand-roll; this file now hand-rolls them directly with scoped CSS in
-// coutumes.css, using var() tokens throughout. nav(), pullquote() (variant:
-// 'editorial'), grid(), uiImage(), and footer() (rich layout) remain kept
-// components and are unchanged.
-//
-// Substituted fonts: Bebas Neue (→ Plaak 3), Cormorant Garamond (→ Exposure Regular)
-// All photography: placeholder images (originals are proprietary Coutumes photos)
-
-import { nav, pullquote, grid, uiImage, footer } 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. Raw HTML: the
-         removed banner() component previously rendered this; the dismiss
-         button still wires to the existing dismissBanner mutation. -->
-    ${state.bannerVisible ? `
-      <div class="coutumes-announce" role="banner">
-        <span>SILVER LANDS&nbsp;•&nbsp;NEW CAPSULE COLLECTION</span>
-        <button class="coutumes-announce-close" data-event="click:dismissBanner" aria-label="Close announcement">×</button>
-      </div>
-    ` : ''}
-
-    <!-- Navigation — nav() supports a second utilityLinks group natively. -->
-    ${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 — dual split-image with overlapping blend-mode type. Raw HTML:
-         the removed editorialHero() component previously rendered this
-         mix-blend-mode overlay technique; a real h1 heading element carries
-         the accessible heading while the overlay lines are decorative (aria-hidden). -->
-    <section class="coutumes-hero">
-      <h1 class="coutumes-sr-only">Silver Lands Capsule Collection</h1>
-      <div class="coutumes-hero-images">
-        <div class="coutumes-hero-img">
-          <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">
-        </div>
-        <div class="coutumes-hero-img">
-          <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">
-        </div>
-      </div>
-      <div class="coutumes-hero-text" aria-hidden="true">
-        ${['INTRODUCING', 'SILVER LANDS', 'CAPSULE', 'COLLECTION'].map(l => `<span>${l}</span>`).join('')}
-      </div>
-    </section>
-
-    <!-- Editorial quote — pullquote() variant='editorial' (centred, no border). -->
-    <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 — raw anchor cards (full-bleed image + below-caption
-         name/price), replacing the removed productCard() component.
-         Laid out with the kept grid() component. -->
-    ${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 => `
-        <a href="#" class="coutumes-product-card">
-          <img src="${p.img}" alt="${p.alt}" loading="lazy" decoding="async">
-          ${p.badge ? `<span class="coutumes-product-badge">${p.badge}</span>` : ''}
-          <div class="coutumes-product-caption">
-            <p class="coutumes-product-name">${p.name}</p>
-            <p class="coutumes-product-price">${p.price}</p>
-          </div>
-        </a>
-      `).join(''),
-      class: 'coutumes-product-grid',
-    })}
-
-    <!-- 50/50 split editorial images — raw HTML two-column grid, replacing
-         the removed imagePair() component. media() is image + text and
-         is not a fit for this text-free two-photo layout. -->
-    <div class="coutumes-split-images" aria-label="Craftmanship and boutique">
-      <div class="coutumes-split-col">
-        <div class="coutumes-split-img">
-          <img src="https://picsum.photos/seed/craft/700/900" alt="Craftsman working with tools in a jewelry workshop" loading="lazy" decoding="async">
-        </div>
-        <a href="#craftmanship" class="coutumes-split-link">Craftmanship →</a>
-      </div>
-      <div class="coutumes-split-col">
-        <div class="coutumes-split-img">
-          <img src="https://images.unsplash.com/photo-1441984904996-e0b6ba687e04?w=700&q=80" alt="Elegant boutique storefront with warm lighting" loading="lazy" decoding="async">
-        </div>
-        <a href="#store" class="coutumes-split-link">Store →</a>
-      </div>
-    </div>
-
-    <!-- Large editorial statement — raw HTML, replacing the removed
-         brandStatement() component. pullquote() is for shorter attributed
-         quotes; this is an unattributed full-width brand-voice paragraph. -->
-    <div class="coutumes-statement">
-      <div class="coutumes-statement-inner">
-        <p>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.</p>
-      </div>
-    </div>
-
-    <!-- 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 — footer() already supports the rich layout (columns,
-         subscribe, wordmark, background/color) used here; no changes needed. -->
-    ${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

@@ -1,186 +0,0 @@
-/**
- * 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>
-  `,
-}