// Three landing-page templates: Product, Content, Newsletter. // Desktop (> 810 px) — original 1920-px fixed layout (scaled by index.html JS). // Tablet (≤ 810 px) / Mobile (≤ 390 px) — fluid responsive layouts per Figma V3. // ─── Shared primitives ──────────────────────────────────────────────────────── const NotionMockup = ({ density = 1, simple, kicker, title, calendar, rows }) => { const k = density; if (simple) { return (
{kicker &&
{kicker}
} {title &&
{title}
} {calendar &&
{Array.from({ length: 28 }).map((_, i) =>
)}
}
{(rows || [70, 90, 65]).map((w, i) =>
)}
); } const cp = 16 * k; return (
N
★ ★ ★ ★ ★
Athletic Training & Nutrition
Tracker and Planner
Master your training, workouts and nutrition
Movement & Nutrition
Homepage
{['Workout', 'Training', 'Nutrition', 'Goals'].map((t) =>
{t}
● {t.toLowerCase()}
)}
GoalsWorkout · Training · Nutrition
May 2026
{Array.from({ length: 35 }).map((_, i) =>
{i + 1}
)}
Quick Notes
{[80, 70, 90, 60, 75, 55].map((w, i) =>
)}
4 colors available
{['#f5d5c1', '#e6c0a8', '#cf9c80', '#c4a382'].map((c) =>
)}
Daily Workout Planner · Cardio, Muscle, Stretching · Training Hub · Meal Planner · Pantry Checklist
); }; // iPad image — desktop fixed 800×800 const IPadImage = ({ onClick, src = 'assets/product-listing-1.jpg' }) =>
Wellness Yoga Journey template — preview
; // Desktop thumb — fixed 160×160 const Thumb = ({ active, onClick, src, alt }) =>
; const PlayBadge = ({ size = 96 }) => { // Triangle is 32×32 with rounded corners (paint stroked as well so the joins // pick up the 3 px radius via stroke-linejoin: round). const triangle = ; return (
{triangle}
); }; // ─── 1) PRODUCT ─────────────────────────────────────────────────────────────── const PRODUCT_THUMBS = [ { src: 'assets/product-listing-1.jpg', alt: 'Overview' }, { src: 'assets/product-listing-2.jpg', alt: 'Home — My Journey' }, { src: 'assets/product-listing-3.jpg', alt: 'Workout Hub' }, { src: 'assets/product-listing-4.jpg', alt: 'Daily Workout' }, { src: 'assets/product-listing-5.jpg', alt: 'Training' }, { src: 'assets/product-listing-6.jpg', alt: 'Training Tracker' }, { src: 'assets/product-listing-7.jpg', alt: 'Nutrition Hub' }, { src: 'assets/product-listing-8.jpg', alt: 'Daily Meal Planner' }, { src: 'assets/product-listing-9.jpg', alt: 'Pantry & Vitamins' }]; const PRODUCT_DISCLAIMER = "Along with my free template, we'll add you to our newsletter so you're the first to know when we drop new products and insights. By submitting your email, you're opting in. Unsubscribe anytime - no hard feelings."; const ProductTemplate = ({ formState, submitEmail, openLightbox, defaultEmail, forcedError }) => { const [activeIdx, setActiveIdx] = React.useState(-1); const effectiveIdx = activeIdx >= 0 ? activeIdx : 0; const mainSrc = PRODUCT_THUMBS[effectiveIdx].src; const bp = useBreakpoint(); const pricing = React.useContext(PricingContext); const sharedForm = pricing.model === 'paid' ? :
; // ── Desktop: exact original ──────────────────────────────────────────────── // ── Large Desktop ─────────────────────────────────────────────────────── if (bp === 'largeDesktop') { return (
{/* Scroll zone capped at main image height (800px). Horizontal padding+negative margin lets the active thumb's side shadow render past the clip box. */}
{PRODUCT_THUMBS.map((p, i) => setActiveIdx(i)} src={p.src} alt={p.alt} />)}
openLightbox({ kind: 'ipad', idx: effectiveIdx })} />

Wellness Yoga Journey by Tara

{sharedForm}
); } if (bp === 'desktop') { return (
{/* Scroll zone capped at main image height (800px). Horizontal padding+negative margin lets the active thumb's side shadow render past the clip box. */}
{PRODUCT_THUMBS.map((p, i) => setActiveIdx(i)} src={p.src} alt={p.alt} />)}
openLightbox({ kind: 'ipad', idx: effectiveIdx })} />

Wellness Yoga Journey by Tara

{sharedForm}
); } // ── Tablet: single column, 128px top padding, landscape thumbs ──────────── if (bp === 'tablet') { return (
{/* Image + thumbs grouped — inner gap 32px, then 48px to info */}
{/* Main image — full content width, square — no zoom on tablet */}
Wellness Yoga Journey
{/* Square thumb strip — 140×140 px, horizontal scroll — padded so shadow + stroke aren't clipped */}
{PRODUCT_THUMBS.map((p, i) =>
setActiveIdx(i)} role="button" aria-label={p.alt} style={{ width: 140, height: 140, flexShrink: 0, borderRadius: 16, backgroundImage: `url(${p.src})`, backgroundSize: 'cover', backgroundPosition: '50%', border: `2px solid ${i === effectiveIdx ? '#D3D2D2' : '#F0F0F0'}`, boxShadow: i === effectiveIdx ? '0 10px 28px rgba(0,0,0,0.16)' : 'none', transform: i === effectiveIdx ? 'translateY(-2px)' : 'none', transition: 'all 180ms ease', cursor: 'pointer' }} /> )}
{/* Info + Form */}

Wellness Yoga Journey by Tara

{sharedForm}
); } // ── Mobile: single column, 16 px sides, landscape thumbs 120×88 ────────── // ── Large Mobile ────────────────────────────────────────────────────── if (bp === 'largeMobile') { return (
{/* Main image — no zoom on mobile */}
Wellness Yoga Journey
{/* Square thumb strip — 90×90 px — padded so shadow + stroke aren't clipped */}
{PRODUCT_THUMBS.map((p, i) =>
setActiveIdx(i)} role="button" aria-label={p.alt} style={{ width: 90, height: 90, flexShrink: 0, borderRadius: 11, backgroundImage: `url(${p.src})`, backgroundSize: 'cover', backgroundPosition: '50%', border: `2px solid ${i === effectiveIdx ? '#D3D2D2' : '#F0F0F0'}`, boxShadow: i === effectiveIdx ? '0 6px 18px rgba(0,0,0,0.14)' : 'none', transform: i === effectiveIdx ? 'translateY(-2px)' : 'none', transition: 'all 180ms ease', cursor: 'pointer' }} /> )}
{/* Info + Form */}

Wellness Yoga Journey by Tara

{sharedForm}
); } // ── Small Mobile ─────────────────────────────────────────────────────── return (
{/* Main image — no zoom on mobile */}
Wellness Yoga Journey
{/* Square thumb strip — 90×90 px — padded so shadow + stroke aren't clipped */}
{PRODUCT_THUMBS.map((p, i) =>
setActiveIdx(i)} role="button" aria-label={p.alt} style={{ width: 90, height: 90, flexShrink: 0, borderRadius: 11, backgroundImage: `url(${p.src})`, backgroundSize: 'cover', backgroundPosition: '50%', border: `2px solid ${i === effectiveIdx ? '#D3D2D2' : '#F0F0F0'}`, boxShadow: i === effectiveIdx ? '0 6px 18px rgba(0,0,0,0.14)' : 'none', transform: i === effectiveIdx ? 'translateY(-2px)' : 'none', transition: 'all 180ms ease', cursor: 'pointer' }} /> )}
{/* Info + Form */}

Wellness Yoga Journey by Tara

{sharedForm}
); }; // ─── 1b) PRODUCT — EXTRA TEXT VARIANT ──────────────────────────────────────── // Same as Product, with a long-form text block between the product section // and the Bio section. Per Figma node 69-1521 (desktop) + 69-482 (tablet/mobile). const EXTRA_TEXT = { introKicker: "About this template", introHeading: "A calm space for your fitness journey", introBody: "This template is for anyone who wants to bring more intention to their wellness practice without the chaos of scattered notes, screenshots and half-remembered goals. Whether you're building strength, recovering between sessions, or trying to eat a little more mindfully, it gives you one space to track your training, nourish your body and stay connected to the goals that matter to you.", hubsHeading: "What's included", hubsLead: "Four connected hubs, each designed to support a different part of your fitness and wellness life.", hubs: [ { emoji: '🏋️', name: 'Workout Hub', desc: "Your library of moves and routines. Save your favorite fitness content across four categories — cardio, muscle, power, and stretching & yoga — and pull from them to build workouts that fit your goals and your week." }, { emoji: '📚', name: 'Training Hub', desc: "A space for the learning side of fitness. Track techniques and skills you've picked up, keep a wishlist of what you want to learn next, and plan how you'll move things from \u201Cwant to learn\u201D to \u201Clearned.\u201D" }, { emoji: '🥗', name: 'Nutrition Hub', desc: "Everything food-related, organized and inspired. Gather your favorite recipes, plan daily meals with a pantry checklist, and set a weekly reminder system so your supplements actually get taken." }, { emoji: '🎯', name: 'Goals', desc: "This is where you set your intentions — short-term, long-term, or anywhere in between — and revisit them as your journey evolves." }], fitHeading: "This template is a good fit if", fitItems: [ "You want to track workouts and training sessions in one place instead of juggling apps and notebooks.", "You save fitness content — YouTube videos, reels, articles — and want a system to actually use them, not just hoard them.", "You're trying to eat better but lose track of what's in your pantry or what you wanted to cook this week.", "You want to build a routine across cardio, strength, mobility and recovery without losing sight of the bigger picture.", "You like structure but also want flexibility to make the system your own.", "You're curious about your habits and want a gentle way to see your progress over time."] }; // One hub card — FIVE separate branches per scale so a direct edit in one // breakpoint never bleeds into the others. `scale` accepts: // 'smallMobile' | 'largeMobile' | 'tablet' | 'desktop' | 'largeDesktop' // Legacy 'mobile' → largeMobile. const HubCard = ({ emoji, name, desc, scale = 'desktop' }) => { // ── Large Desktop ─────────────────────────────────────────────────────── if (scale === 'largeDesktop') { return (
{emoji}
{name}
{desc}
); } // ── Desktop ───────────────────────────────────────────────────────────── if (scale === 'desktop') { return (
{emoji}
{name}
{desc}
); } // ── Tablet ────────────────────────────────────────────────────────────── if (scale === 'tablet') { return (
{emoji}
{name}
{desc}
); } // ── Large Mobile ──────────────────────────────────────────────────────── if (scale === 'largeMobile' || scale === 'mobile') { return (
{emoji}
{name}
{desc}
); } // ── Small Mobile ──────────────────────────────────────────────────────── return (
{emoji}
{name}
{desc}
); }; // Checkmark bullet — peach circle with cream check. const CheckBullet = ({ size = 28 }) =>
; const TextBlockSection = () => { const bp = useBreakpoint(); // ── Desktop: full bleed cream bg, 1280 px content, 2x2 hub grid ────────── // ── Large Desktop ─────────────────────────────────────────────────────── if (bp === 'largeDesktop') { return (
{/* Intro — kicker + heading + paragraph */}
{EXTRA_TEXT.introKicker}

{EXTRA_TEXT.introHeading}

{EXTRA_TEXT.introBody}
{/* Hubs — heading + 2x2 grid */}

{EXTRA_TEXT.hubsHeading}

{EXTRA_TEXT.hubs.map((h) => )}
{/* Fit list — heading above, checklist below */}

{EXTRA_TEXT.fitHeading}

    {EXTRA_TEXT.fitItems.map((it, i) =>
  • {it}
    • )}
); } if (bp === 'desktop') { return (
{/* Intro — kicker + heading + paragraph */}
{EXTRA_TEXT.introKicker}

{EXTRA_TEXT.introHeading}

{EXTRA_TEXT.introBody}
{/* Hubs — heading + 2x2 grid */}

{EXTRA_TEXT.hubsHeading}

{EXTRA_TEXT.hubs.map((h) => )}
{/* Fit list — heading above, checklist below */}

{EXTRA_TEXT.fitHeading}

    {EXTRA_TEXT.fitItems.map((it, i) =>
  • {it}
    • )}
); } // ── Tablet: single column, 64 px side padding ──────────────────────────── if (bp === 'tablet') { return (
{EXTRA_TEXT.introKicker}

{EXTRA_TEXT.introHeading}

{EXTRA_TEXT.introBody}

{EXTRA_TEXT.hubsHeading}

{EXTRA_TEXT.hubs.map((h) => )}

{EXTRA_TEXT.fitHeading}

    {EXTRA_TEXT.fitItems.map((it, i) =>
  • {it}
    • )}
); } // ── Mobile: single column, 16 px sides, hubs stack vertically ──────────── // ── Large Mobile ────────────────────────────────────────────────────── if (bp === 'largeMobile') { return (
{EXTRA_TEXT.introKicker}

{EXTRA_TEXT.introHeading}

{EXTRA_TEXT.introBody}

{EXTRA_TEXT.hubsHeading}

{EXTRA_TEXT.hubs.map((h) => )}

{EXTRA_TEXT.fitHeading}

    {EXTRA_TEXT.fitItems.map((it, i) =>
  • {it}
    • )}
); } // ── Small Mobile ─────────────────────────────────────────────────────── return (
{EXTRA_TEXT.introKicker}

{EXTRA_TEXT.introHeading}

{EXTRA_TEXT.introBody}

{EXTRA_TEXT.hubsHeading}

{EXTRA_TEXT.hubs.map((h) => )}

{EXTRA_TEXT.fitHeading}

    {EXTRA_TEXT.fitItems.map((it, i) =>
  • {it}
    • )}
); }; // Product with an extra-text section before the Bio. Reuses ProductTemplate's // render and wraps it: we splice a TextBlockSection into the page by reading // children. Simpler: render ProductTemplate, then patch the DOM order via // dedicated component below. const ProductExtraTextTemplate = (props) => { // We render the same chrome but inline the section markup so the text // block can sit between the product section and the BioSection. const [activeIdx, setActiveIdx] = React.useState(-1); const effectiveIdx = activeIdx >= 0 ? activeIdx : 0; const mainSrc = PRODUCT_THUMBS[effectiveIdx].src; const bp = useBreakpoint(); const { formState, submitEmail, openLightbox, defaultEmail, forcedError } = props; const pricing = React.useContext(PricingContext); const sharedForm = pricing.model === 'paid' ? :
; // ── Large Desktop ─────────────────────────────────────────────────────── if (bp === 'largeDesktop') { return (
{PRODUCT_THUMBS.map((p, i) => setActiveIdx(i)} src={p.src} alt={p.alt} />)}
openLightbox({ kind: 'ipad', idx: effectiveIdx })} />

Wellness Yoga Journey by Tara

{sharedForm}
); } if (bp === 'desktop') { return (
{PRODUCT_THUMBS.map((p, i) => setActiveIdx(i)} src={p.src} alt={p.alt} />)}
openLightbox({ kind: 'ipad', idx: effectiveIdx })} />

Wellness Yoga Journey by Tara

{sharedForm}
); } if (bp === 'tablet') { return (
Wellness Yoga Journey
{PRODUCT_THUMBS.map((p, i) =>
setActiveIdx(i)} role="button" aria-label={p.alt} style={{ width: 140, height: 140, flexShrink: 0, borderRadius: 16, backgroundImage: `url(${p.src})`, backgroundSize: 'cover', backgroundPosition: '50%', border: `2px solid ${i === effectiveIdx ? '#D3D2D2' : '#F0F0F0'}`, boxShadow: i === effectiveIdx ? '0 10px 28px rgba(0,0,0,0.16)' : 'none', transform: i === effectiveIdx ? 'translateY(-2px)' : 'none', transition: 'all 180ms ease', cursor: 'pointer' }} /> )}

Wellness Yoga Journey by Tara

{sharedForm}
); } // ── Large Mobile ────────────────────────────────────────────────────── if (bp === 'largeMobile') { return (
Wellness Yoga Journey
{PRODUCT_THUMBS.map((p, i) =>
setActiveIdx(i)} role="button" aria-label={p.alt} style={{ width: 90, height: 90, flexShrink: 0, borderRadius: 11, backgroundImage: `url(${p.src})`, backgroundSize: 'cover', backgroundPosition: '50%', border: `2px solid ${i === effectiveIdx ? '#D3D2D2' : '#F0F0F0'}`, boxShadow: i === effectiveIdx ? '0 6px 18px rgba(0,0,0,0.14)' : 'none', transform: i === effectiveIdx ? 'translateY(-2px)' : 'none', transition: 'all 180ms ease', cursor: 'pointer' }} /> )}

Wellness Yoga Journey by Tara

{sharedForm}
); } // ── Small Mobile ─────────────────────────────────────────────────────── return (
Wellness Yoga Journey
{PRODUCT_THUMBS.map((p, i) =>
setActiveIdx(i)} role="button" aria-label={p.alt} style={{ width: 90, height: 90, flexShrink: 0, borderRadius: 11, backgroundImage: `url(${p.src})`, backgroundSize: 'cover', backgroundPosition: '50%', border: `2px solid ${i === effectiveIdx ? '#D3D2D2' : '#F0F0F0'}`, boxShadow: i === effectiveIdx ? '0 6px 18px rgba(0,0,0,0.14)' : 'none', transform: i === effectiveIdx ? 'translateY(-2px)' : 'none', transition: 'all 180ms ease', cursor: 'pointer' }} /> )}

Wellness Yoga Journey by Tara

{sharedForm}
); }; // ─── 2) CONTENT ─────────────────────────────────────────────────────────────── const CONTENT_FRAMES = [ { kind: 'photo', src: 'assets/content-cover.jpg', label: 'Intro' }, { kind: 'photo', src: 'assets/content-img-1.jpg', label: 'Module 1' }, { kind: 'photo', src: 'assets/content-img-2.jpg', label: 'Module 2' }, { kind: 'photo', src: 'assets/content-img-3.jpg', label: 'Module 3' }]; const CONTENT_DISCLAIMER = "Along with my free template, we'll add you to our newsletter so you're the first to know when we drop new products and insights. By submitting your email, you're opting in. Unsubscribe anytime - no hard feelings."; const ContentTemplate = ({ formState, submitEmail, openLightbox, defaultEmail, forcedError }) => { const [activeIdx, setActiveIdx] = React.useState(0); const active = CONTENT_FRAMES[activeIdx]; const bp = useBreakpoint(); const pricing = React.useContext(PricingContext); const sharedForm = pricing.model === 'paid' ? :
; // ── Desktop: exact original ──────────────────────────────────────────────── // ── Large Desktop ─────────────────────────────────────────────────────── if (bp === 'largeDesktop') { return (
openLightbox({ kind: 'content', src: 'assets/content-cover.jpg' })} style={{ width: 960, height: 540, borderRadius: 24, overflow: 'hidden', boxShadow: '-12px 10px 80px rgba(0,0,0,0.1)', cursor: 'zoom-in', position: 'relative', background: active.kind === 'photo' ? `url(${active.src}) center/cover no-repeat` : active.tint }}> {activeIdx === 0 &&
}
{CONTENT_FRAMES.map((f, i) =>
setActiveIdx(i)} style={{ flex: 1, height: 212, borderRadius: 24, cursor: 'pointer', background: f.kind === 'photo' ? `url(${f.src}) center/cover no-repeat` : f.tint, border: `2px solid ${i === activeIdx ? '#D3D2D2' : '#F0F0F0'}`, boxShadow: i === activeIdx ? '0 10px 28px rgba(0,0,0,0.16)' : 'none', transform: i === activeIdx ? 'translateY(-2px)' : 'none', transition: 'all 180ms ease' }} /> )}

10 Hours Breathwork with yoga

{sharedForm}
); } if (bp === 'desktop') { return (
openLightbox({ kind: 'content', src: 'assets/content-cover.jpg' })} style={{ width: 960, height: 540, borderRadius: 24, overflow: 'hidden', boxShadow: '-12px 10px 80px rgba(0,0,0,0.1)', cursor: 'zoom-in', position: 'relative', background: active.kind === 'photo' ? `url(${active.src}) center/cover no-repeat` : active.tint }}> {activeIdx === 0 &&
}
{CONTENT_FRAMES.map((f, i) =>
setActiveIdx(i)} style={{ flex: 1, height: 212, borderRadius: 24, cursor: 'pointer', background: f.kind === 'photo' ? `url(${f.src}) center/cover no-repeat` : f.tint, border: `2px solid ${i === activeIdx ? '#D3D2D2' : '#F0F0F0'}`, boxShadow: i === activeIdx ? '0 10px 28px rgba(0,0,0,0.16)' : 'none', transform: i === activeIdx ? 'translateY(-2px)' : 'none', transition: 'all 180ms ease' }} /> )}

10 Hours Breathwork with yoga

{sharedForm}
); } // ── Tablet: single column, 128px top padding ────────────────────────────── if (bp === 'tablet') { return (
{/* Video frame — full width, 16:9 — no zoom on tablet */}
{activeIdx === 0 &&
}
{/* Module strip — full-width row of squares, no labels */}
{CONTENT_FRAMES.map((f, i) =>
setActiveIdx(i)} style={{ flex: 1, aspectRatio: '1', borderRadius: 16, cursor: 'pointer', background: f.kind === 'photo' ? `url(${f.src}) center/cover no-repeat` : f.tint, border: `2px solid ${i === activeIdx ? '#D3D2D2' : '#F0F0F0'}`, boxShadow: i === activeIdx ? '0 10px 24px rgba(0,0,0,0.14)' : 'none', transform: i === activeIdx ? 'translateY(-2px)' : 'none', transition: 'all 180ms ease' }} /> )}
{/* Info + Form */}

10 Hours Breathwork with yoga

{sharedForm}
); } // ── Mobile ──────────────────────────────────────────────────────────────── // ── Large Mobile ────────────────────────────────────────────────────── if (bp === 'largeMobile') { return (
{activeIdx === 0 && }
{CONTENT_FRAMES.map((f, i) =>
setActiveIdx(i)} style={{ flex: 1, aspectRatio: '1', borderRadius: 12, cursor: 'pointer', background: f.kind === 'photo' ? `url(${f.src}) center/cover no-repeat` : f.tint, border: `2px solid ${i === activeIdx ? '#D3D2D2' : '#F0F0F0'}`, boxShadow: i === activeIdx ? '0 6px 18px rgba(0,0,0,0.12)' : 'none', transform: i === activeIdx ? 'translateY(-2px)' : 'none', transition: 'all 180ms ease' }} /> )}

10 Hours Breathwork with yoga

{sharedForm}
); } // ── Small Mobile ─────────────────────────────────────────────────────── return (
{activeIdx === 0 && }
{CONTENT_FRAMES.map((f, i) =>
setActiveIdx(i)} style={{ flex: 1, aspectRatio: '1', borderRadius: 12, cursor: 'pointer', background: f.kind === 'photo' ? `url(${f.src}) center/cover no-repeat` : f.tint, border: `2px solid ${i === activeIdx ? '#D3D2D2' : '#F0F0F0'}`, boxShadow: i === activeIdx ? '0 6px 18px rgba(0,0,0,0.12)' : 'none', transform: i === activeIdx ? 'translateY(-2px)' : 'none', transition: 'all 180ms ease' }} /> )}

10 Hours Breathwork with yoga

{sharedForm}
); }; // ─── 3) NEWSLETTER ──────────────────────────────────────────────────────────── const IssuePreview = ({ src }) =>
; const NEWSLETTER_ISSUES = [ { src: 'assets/newsletter-card-1.jpg' }, { src: 'assets/newsletter-card-2.jpg' }, { src: 'assets/newsletter-card-3.jpg' }]; const FeatureCard = ({ num, title, desc }) =>
{num}
{title}
{desc}
; const NewsletterTemplate = ({ formState, submitEmail, openLightbox, defaultEmail, forcedError }) => { const bp = useBreakpoint(); const pricing = React.useContext(PricingContext); const sharedForm = pricing.model === 'paid' ? :
; // ── Desktop: exact original ──────────────────────────────────────────────── // ── Large Desktop ─────────────────────────────────────────────────────── if (bp === 'largeDesktop') { return (
Newsletter previews

Advanced Yoga Newsletter

{sharedForm}
); } if (bp === 'desktop') { return (
Newsletter previews

Advanced Yoga Newsletter

{sharedForm}
); } // ── Tablet: single column, 128 px top padding ───────────────────────────── if (bp === 'tablet') { return (
Newsletter previews {/* Feature cards — row */}
{[['01', 'New Technique', 'Covering new yoga poses'], ['02', 'Deep Meditation Flow', 'with 3 min audio'], ['03', 'Recommendation', 'new item reviews']].map(([n, t, d]) =>
{n}
{t}
{d}
)}
{/* Info + Form */}

Advanced Yoga Newsletter

{sharedForm}
); } // ── Mobile ───────────────────────────────────────────────────────────────── // ── Large Mobile ────────────────────────────────────────────────────── if (bp === 'largeMobile') { return (
Newsletter previews
{[['01', 'New Technique', 'Covering new yoga poses'], ['02', 'Deep Meditation Flow', 'with 3 min audio'], ['03', 'Recommendation', 'new item reviews']].map(([n, t, d]) =>
{n}
{t}
{d}
)}

Advanced Yoga Newsletter

{sharedForm}
); } // ── Small Mobile ─────────────────────────────────────────────────────── return (
Newsletter previews
{[['01', 'New Technique', 'Covering new yoga poses'], ['02', 'Deep Meditation Flow', 'with 3 min audio'], ['03', 'Recommendation', 'new item reviews']].map(([n, t, d]) =>
{n}
{t}
{d}
)}

Advanced Yoga Newsletter

{sharedForm}
); }; Object.assign(window, { ProductTemplate, ProductExtraTextTemplate, ContentTemplate, NewsletterTemplate, NotionMockup, IPadImage, IssuePreview, PlayBadge, Thumb, FeatureCard, TextBlockSection, HubCard }); // ─── Drag-to-scroll for thumbnail strips/columns ───────────────────────────── // Delegated at document level so it survives React rerenders and works for all // breakpoints (desktop column = vertical, tablet/mobile strip = horizontal). (function initDragScroll() { if (typeof document === 'undefined' || document.__splDragScrollInit) return; document.__splDragScrollInit = true; const SELECTOR = '.spl-thumbs, .spl-thumbs-x, .spl-th-t, .spl-th-tx, .spl-th-m, .spl-th-mx'; const THRESHOLD = 5; const style = document.createElement('style'); style.textContent = SELECTOR + '{cursor:grab}' + '.spl-dragging,.spl-dragging *{cursor:grabbing !important;user-select:none !important}'; document.head.appendChild(style); let active = null; let startX = 0,startY = 0; let startScrollLeft = 0,startScrollTop = 0; let moved = false; document.addEventListener('mousedown', (e) => { if (e.button !== 0) return; const el = e.target.closest && e.target.closest(SELECTOR); if (!el) return; active = el; startX = e.clientX;startY = e.clientY; startScrollLeft = el.scrollLeft;startScrollTop = el.scrollTop; moved = false; el.classList.add('spl-dragging'); }, true); document.addEventListener('mousemove', (e) => { if (!active) return; const dx = e.clientX - startX; const dy = e.clientY - startY; if (!moved && (Math.abs(dx) > THRESHOLD || Math.abs(dy) > THRESHOLD)) { moved = true; } if (moved) { active.scrollLeft = startScrollLeft - dx; active.scrollTop = startScrollTop - dy; e.preventDefault(); } }, true); function end() { if (!active) return; const el = active; active = null; el.classList.remove('spl-dragging'); if (moved) { // Swallow the synthetic click that follows mouseup after a drag so we // don't accidentally switch the active thumbnail when the user just // wanted to scroll. const swallow = (ev) => { ev.stopPropagation(); ev.preventDefault(); window.removeEventListener('click', swallow, true); }; window.addEventListener('click', swallow, true); setTimeout(() => window.removeEventListener('click', swallow, true), 50); } } document.addEventListener('mouseup', end, true); // If the pointer leaves the window mid-drag, stop the drag cleanly. window.addEventListener('blur', end); document.addEventListener('dragstart', (e) => { if (e.target.closest && e.target.closest(SELECTOR)) e.preventDefault(); }, true); })();