// Creative Examples — components const { useState, useEffect, useRef, useMemo } = React; // --- Beehiiv --- const BEEHIIV_PUB_ID = 'pub_71d19aae-7467-46af-a607-0fe078358d93'; // Add your Beehiiv API key from Settings → API Keys in your Beehiiv dashboard const BEEHIIV_API_KEY = 'l727CkarsuUck4N8ez75LkInvuRckSm8zAs62jXTisCETYx7UfYcV7bDIHZCDBCn'; async function subscribe(email) { const res = await fetch( `https://api.beehiiv.com/v2/publications/${BEEHIIV_PUB_ID}/subscriptions`, { method: 'POST', headers: { 'Content-Type': 'application/json', 'Authorization': `Bearer ${BEEHIIV_API_KEY}`, }, body: JSON.stringify({ email, reactivate_existing: false, send_welcome_email: true }), } ); if (!res.ok) throw new Error('Subscription failed'); } // --- Palette --- const C = { cream: '#f7f4ef', creamDeep: '#ede7dc', charcoal: '#03443e', coral: '#ea553c', sky: '#c3cebe', sand: '#dd9550', }; // --- Abstract thumbnail placeholders in brand palette --- // Generate SVG compositions. Each variant is deterministic per id. function Thumb({ variant = 0, seed = 0 }) { const variants = [ // Wavy gradient blobs (echoes the brand sheet sample) , // Bold stripes , // Big type placeholder , // Dotted grid , // Phone mockup , // Big quote , // TikTok-style vertical frames , // Concentric circles , // Chart bars , // Overlapping rectangles , // Handwritten scribble , // Big number , ]; return variants[variant % variants.length]; } // --- Category pill --- function Pill({ children, tone = 'sky', size = 'sm', active = false, onClick, style }) { const tones = { coral: { bg: '#fcd9d1', fg: C.charcoal, active: C.coral, activeFg: C.cream }, sky: { bg: '#e0e7e1', fg: C.charcoal, active: C.sky, activeFg: C.charcoal }, sand: { bg: '#f3dfc5', fg: C.charcoal, active: C.sand, activeFg: C.cream }, cream: { bg: '#f0e3c9', fg: C.charcoal, active: C.charcoal, activeFg: C.cream }, charcoal: { bg: '#d9e0dc', fg: C.charcoal, active: C.charcoal, activeFg: C.cream }, }; const t = tones[tone] || tones.sky; const bg = active ? t.active : t.bg; const fg = active ? t.activeFg : t.fg; const padding = size === 'sm' ? '5px 11px' : '7px 14px'; const fs = size === 'sm' ? 12.5 : 13.5; return ( ); } // --- Clock icon --- function ClockIcon({ size = 13, color = C.charcoal }) { return ( ); } // --- Lightbulb icon (read time on cards) --- function BulbIcon({ size = 13, color = C.charcoal }) { return ( ); } // --- Star icon --- function Star({ size = 12, color = C.coral, filled = true }) { return ( ); } // --- Card --- function Card({ item, onClick }) { const [hover, setHover] = useState(false); return (

setHover(true)} onMouseLeave={() => setHover(false)} onClick={onClick} style={{ background: '#ffffff', borderRadius: 14, overflow: 'hidden', cursor: 'pointer', border: `1px solid ${hover ? 'rgba(3,68,62,0.2)' : 'rgba(3,68,62,0.08)'}`, boxShadow: hover ? '0 8px 24px -10px rgba(3,68,62,0.18)' : '0 1px 0 rgba(3,68,62,0.04)', transition: 'all 180ms ease', transform: hover ? 'translateY(-2px)' : 'none', breakInside: 'avoid', marginBottom: 18, display: 'block', }} >

{item.headerImage?.asset?.url ? {item.headerImage.alt

: } {/* Read time chip on thumbnail */}

{item.readTime}

{item.category} {item.readTime}

{item.title}

); } // --- Sidebar --- function Sidebar({ active, setActive, mobileOpen, setMobileOpen, openPopup }) { const groups = [ { label: 'Genre', items: [ { key: 'Ecom', tone: 'coral' }, { key: 'Apps', tone: 'sky' }, { key: 'Games', tone: 'sand' }, { key: 'Services', tone: 'cream' }, { key: 'Local', tone: 'coral' }, ]}, { label: 'Format', items: [ { key: 'Ads', tone: 'coral' }, { key: 'Organic', tone: 'sky' }, { key: 'UGC', tone: 'sand' }, ]}, { label: 'Angle', items: [ { key: 'Brand', tone: 'cream' }, { key: 'Hook', tone: 'coral' }, { key: 'Viral', tone: 'sky' }, ]}, ]; return (

{/* Filter groups */}

{groups.map(group => (

{group.label}

{group.items.map(item => ( setActive(item.key)} > {item.key} ))}

))} {/* Newsletter mini-card */}

{/* Danny photo + stars */}

{[0,1,2,3,4].map(i => )}

42k readers

The best 5 minutes in your inbox.

3 brilliant ads, 2 hooks, 1 lesson — every Tuesday.

); } // --- Top nav --- function TopNav({ onOpenMenu }) { const IG = () => ( ); const TT = () => ( ); const X = () => ( ); const LI = () => ( ); return (

Creative Examples

); } // --- Email capture popup --- function EmailPopup({ open, onClose }) { const [email, setEmail] = useState(''); // 'idle' | 'loading' | 'success' | 'error' const [status, setStatus] = useState('idle'); const handleSubmit = async (e) => { e.preventDefault(); if (!email) return; setStatus('loading'); try { await subscribe(email); setStatus('success'); } catch { setStatus('error'); } }; if (!open) return null; const testimonials = [ { bg: '#fcd9d1', fg: C.charcoal, text: '"My favourite newsletter on the web"', author: 'M. Patel' }, { bg: C.coral, fg: C.cream, text: '"The breakdowns are so good it hurts"', author: 'J. Okafor' }, { bg: '#f3dfc5', fg: C.charcoal, text: '"Better than my marketing degree"', author: 'L. Chen' }, { bg: C.sky, fg: C.charcoal, text: '"Actually changed how I write ads"', author: 'R. Silva' }, { bg: C.sand, fg: C.charcoal, text: '"Stop what you\'re doing and subscribe"', author: 'T. Nowak' }, ]; return ( e.stopPropagation()} style={{ background: C.cream, borderRadius: 18, maxWidth: 440, width: '100%', maxHeight: '92vh', overflow: 'auto', position: 'relative', boxShadow: '0 24px 60px -20px rgba(3,68,62,0.4)', animation: 'cePopupRise 320ms cubic-bezier(.2,.8,.2,1)', }} > {/* Avatar header */} Hey, I'm Danny. Every week I share: {status !== 'success' ? ( <> {[ { icon: (), num: '3', emph: 'brilliant', tail: ' ad breakdowns' }, { icon: (), num: '2', emph: 'short-form', tail: ' video tips' }, { icon: (), num: '1', emph: 'hook', tail: ' worth stealing' }, ].map((row, i) => ( {row.icon} {row.num} {row.emph} {row.tail} ))} {[0,1,2,3,4].map(i => )} Voted{' '} “#1 creative newsletter” {' '}by 42,000 marketers. setEmail(e.target.value)} placeholder="Your email" style={{ flex: 1, padding: '11px 14px', border: `1px solid rgba(3,68,62,0.2)`, borderRadius: 8, fontSize: 14, fontFamily: 'Inter, system-ui, sans-serif', background: '#ffffff', color: C.charcoal, outline: 'none', }} /> {status === 'error' && ( Something went wrong — try again. )} ) : ( Double opt in required — Check your inbox (may take 2 mins) :) )} {/* Testimonial strips */} {testimonials.map((t, i) => ( {t.text} {t.author} ))} ); } // --- Content data --- // Optional richer content that the article popup can use const CONTENT = [ { id: 1, title: "How Liquid Death turned water into rebellion", category: 'Brand', tone: 'cream', readTime: '4 min', thumb: 0, big: true }, { id: 2, title: "The 3-second hook that made this ad go viral", category: 'Hook', tone: 'coral', readTime: '2 min', thumb: 2 }, { id: 3, title: "Why this founder's TikTok got 18M views", category: 'Viral', tone: 'sky', readTime: '3 min', thumb: 11, big: true }, { id: 4, title: "UGC that doesn't look like UGC", category: 'UGC', tone: 'sand', readTime: '5 min', thumb: 1 }, { id: 5, title: "Duolingo's unhinged strategy, broken down", category: 'Organic', tone: 'sky', readTime: '6 min', thumb: 6, big: true }, { id: 6, title: "The one frame that sells the entire product", category: 'Ads', tone: 'coral', readTime: '2 min', thumb: 4 }, { id: 7, title: "Poppi's Super Bowl spot, shot by shot", category: 'Ads', tone: 'coral', readTime: '4 min', thumb: 9 }, { id: 8, title: "Writing copy that sounds like a person", category: 'Brand', tone: 'cream', readTime: '3 min', thumb: 5 }, { id: 9, title: "Ryan Reynolds' fast-turnaround formula", category: 'Ads', tone: 'coral', readTime: '5 min', thumb: 8, big: true }, { id: 10, title: "Why founders make the best on-camera talent", category: 'UGC', tone: 'sand', readTime: '3 min', thumb: 7 }, { id: 11, title: "This skincare brand's hook is a masterclass", category: 'Hook', tone: 'coral', readTime: '2 min', thumb: 10 }, { id: 12, title: "The anatomy of a $4 CPM TikTok ad", category: 'Ads', tone: 'coral', readTime: '6 min', thumb: 3, big: true }, { id: 13, title: "Patagonia's organic content playbook", category: 'Organic', tone: 'sky', readTime: '4 min', thumb: 0 }, { id: 14, title: "A hook that breaks every rule and works", category: 'Hook', tone: 'coral', readTime: '2 min', thumb: 5 }, { id: 15, title: "Creator-led ads that beat studio production", category: 'UGC', tone: 'sand', readTime: '4 min', thumb: 6 }, { id: 16, title: "The Stanley Cup phenomenon, explained", category: 'Viral', tone: 'sky', readTime: '5 min', thumb: 2 }, { id: 17, title: "What a great brand voice actually sounds like", category: 'Brand', tone: 'cream', readTime: '3 min', thumb: 10 }, { id: 18, title: "30-second ad structures that convert", category: 'Ads', tone: 'coral', readTime: '4 min', thumb: 8 }, ]; // --- Minimal Portable Text renderer (no build step required) --- function toEmbedUrl(url) { if (!url) return ''; // YouTube const yt = url.match(/(?:youtube\.com\/watch\?v=|youtu\.be\/)([^&?/]+)/); if (yt) return `https://www.youtube.com/embed/${yt[1]}`; // TikTok — use oEmbed iframe src pattern const tt = url.match(/tiktok\.com\/@[^/]+\/video\/(\d+)/); if (tt) return `https://www.tiktok.com/embed/v2/${tt[1]}`; return url; } function renderSpan(span) { let node = span.text || ''; if (!node) return null; if (span.marks && span.marks.includes('strong')) node = {node}; if (span.marks && span.marks.includes('em')) node = {node}; return node; } function renderPTBlock(block, i) { if (block._type === 'block') { const children = (block.children || []).map((s, j) => ( {renderSpan(s)} )); const key = block._key || i; if (block.style === 'h2') { return {children}; } if (block.style === 'h3') { return {children}; } return {children}; } if (block._type === 'videoEmbed') { const src = toEmbedUrl(block.url); return ( </div> ); } if (block._type === 'image' && block.asset) { return ( <img key={block._key || i} src={`https://cdn.sanity.io/images/prwe0dj2/production/${block.asset._ref.replace('image-', '').replace(/-(\w+)$/, '.$1')}`} alt={block.alt || ''} style={{ width: '100%', borderRadius: 8, margin: '16px 0', display: 'block' }} /> ); } return null; } // --- Article Popup (CMS-ready) --- function ArticlePopup({ article, onClose }) { const [email, setEmail] = useState(''); // 'idle' | 'loading' | 'success' | 'error' const [status, setStatus] = useState('idle'); const handleSubmit = async (e) => { e.preventDefault(); if (!email) return; setStatus('loading'); try { await subscribe(email); setStatus('success'); } catch { setStatus('error'); } }; if (!article) return null; const body = Array.isArray(article.body) ? article.body : []; return ( <div onClick={onClose} style={{ position: 'fixed', inset: 0, background: 'rgba(3,68,62,0.45)', display: 'flex', alignItems: 'center', justifyContent: 'center', zIndex: 1100, padding: 20, animation: 'cePopupFade 240ms ease', }} > <div onClick={e => e.stopPropagation()} style={{ background: C.cream, borderRadius: 18, maxWidth: 640, width: '100%', maxHeight: '92vh', overflow: 'auto', position: 'relative', boxShadow: '0 24px 60px -20px rgba(3,68,62,0.45)', animation: 'cePopupRise 320ms cubic-bezier(.2,.8,.2,1)', }} > <button onClick={onClose} aria-label="Close" style={{ position: 'absolute', top: 14, right: 14, zIndex: 3, background: 'rgba(255,243,220,0.9)', border: 'none', cursor: 'pointer', color: C.charcoal, padding: 8, borderRadius: '50%', width: 34, height: 34, display: 'flex', alignItems: 'center', justifyContent: 'center', }} > <svg width="16" height="16" viewBox="0 0 24 24" fill="none"><path d="M6 6l12 12M18 6L6 18" stroke="currentColor" strokeWidth="2" strokeLinecap="round"/></svg> </button> {/* Header image */} <div style={{ aspectRatio: '16 / 8', background: C.cream, overflow: 'hidden' }}> {article.headerImage?.asset?.url ? <img src={article.headerImage.asset.url} alt={article.headerImage.alt || article.title} style={{ width: '100%', height: '100%', objectFit: 'cover', display: 'block' }} /> : <Thumb variant={article.thumb} seed={article.id + 100} /> } </div> <div style={{ padding: '28px 36px 32px' }}> {/* Meta row */} <div style={{ display: 'flex', alignItems: 'center', gap: 12, marginBottom: 16 }}> <Pill tone={article.tone} size="md">{article.category}</Pill> <span style={{ fontSize: 12.5, color: 'rgba(3,68,62,0.65)', fontFamily: 'Inter, system-ui, sans-serif', display: 'inline-flex', alignItems: 'center', gap: 5, }}> <BulbIcon color="rgba(3,68,62,0.6)" /> {article.readTime} read </span> <span style={{ fontSize: 12.5, color: 'rgba(3,68,62,0.5)', fontFamily: 'Inter, system-ui, sans-serif' }}> · Issue #42 · Apr 12, 2026 </span> </div> {/* Title */} <h2 style={{ fontFamily: 'Instrument Serif, serif', fontSize: 'clamp(28px, 4vw, 38px)', lineHeight: 1.05, color: C.charcoal, margin: '0 0 14px', fontWeight: 400, letterSpacing: -0.6, }}> {article.title} </h2> {/* Body */} <div style={{ fontFamily: 'Inter, system-ui, sans-serif', fontSize: 15.5, lineHeight: 1.65, color: C.charcoal, marginBottom: 26, }}> {body.map((block, i) => renderPTBlock(block, i))} </div> {/* Email capture footer */} <div style={{ borderTop: '1px solid rgba(3,68,62,0.12)', paddingTop: 22, }}> <div style={{ fontFamily: 'Instrument Serif, serif', fontSize: 20, color: C.charcoal, marginBottom: 4, letterSpacing: -0.2, }}> Want the next one in your inbox? </div> <div style={{ fontSize: 13, color: 'rgba(3,68,62,0.65)', fontFamily: 'Inter, system-ui, sans-serif', marginBottom: 12, }}> One breakdown like this every Tuesday. Free. </div> {status !== 'success' ? ( <> <form onSubmit={handleSubmit} style={{ display: 'flex', gap: 8 }} > <input type="email" required value={email} onChange={e => setEmail(e.target.value)} placeholder="you@work.com" style={{ flex: 1, padding: '11px 14px', border: `1px solid rgba(3,68,62,0.2)`, borderRadius: 8, fontSize: 14, fontFamily: 'Inter, system-ui, sans-serif', background: '#ffffff', color: C.charcoal, outline: 'none', }} /> <button type="submit" disabled={status === 'loading'} style={{ background: C.charcoal, color: C.cream, border: 'none', borderRadius: 8, padding: '11px 22px', fontSize: 14, fontWeight: 600, fontFamily: 'Inter, system-ui, sans-serif', cursor: status === 'loading' ? 'default' : 'pointer', opacity: status === 'loading' ? 0.7 : 1, }} > {status === 'loading' ? '…' : 'Subscribe'} </button> </form> {status === 'error' && ( <div style={{ fontFamily: 'Inter, system-ui, sans-serif', fontSize: 13, color: C.coral, marginTop: 8, }}> Something went wrong — try again. </div> )} </> ) : ( <div style={{ fontFamily: 'Inter, system-ui, sans-serif', fontSize: 14, color: C.coral, fontWeight: 500, padding: '10px 0', }}> Double opt in required — Check your inbox (may take 2 mins) :) </div> )} </div> </div> </div> </div> ); } Object.assign(window, { C, Thumb, Pill, ClockIcon, BulbIcon, Star, Card, Sidebar, TopNav, EmailPopup, ArticlePopup, CONTENT });