// Generated by build.mjs — do not edit by hand. // Edit the source files in source/ (or build.mjs transforms), then re-run: node build.mjs // ─── Design tokens (match ParentStack prototype) ────────────────────────── const T = { teal: '#1D9E75', tealL: '#9FE1CB', tealS: '#D6F0E8', tealD: '#085041', amber: '#EF9F27', amberS: '#FEF3D9', amberD: '#412402', bg: '#F7F5F0', surface: '#FFFFFF', subtle: '#F0EDE6', subtleD: '#E8E2D6', pri: '#1A1A1A', sec: '#6B6860', muted: '#9E9B94', sage: '#5E8A60', sageS: '#E3EDE3', violet: '#7264C8', violetS: '#EEEDFE', rose: '#C0505A', roseS: '#FAEAEA', sky: '#3D7DC8', skyS: '#E3EEF8', border: 'rgba(0,0,0,0.08)', borderStrong: 'rgba(0,0,0,0.14)', }; // ─── Unsplash photo set (kids at camp, outdoor) ─────────────────────────── const U = (id, w = 900) => `https://images.unsplash.com/photo-${id}?w=${w}&q=80&auto=format&fit=crop`; const PHOTOS = { campfireNight: U('1485217988980-11786ced9454', 1200), // campfire glowing kidsCanoe: U('1503454537195-1dcabb73ffb9', 1000), // kids by water kidForest: U('1502086223501-7ea6ecd79368', 900), // child walking forest kidReading: U('1497486751825-1233686d5d80', 800), // boy reading kidsRunning: U('1517677129300-07b130802f46', 900), // kid running swing: U('1500964757637-5350a193c5fa', 800), // child on swing kidsLake: U('1547036967-23d11aacaee0', 1100), // mountain lake kidsArt: U('1591474200742-8e512e6f98f8', 800), // craft/painting kidPaint: U('1503454537195-1dcabb73ffb9', 800), tents: U('1504280390367-361c6d9f38f4', 1100), // tents at camp hikingPath: U('1469854523086-cc02fe5d8800', 1100), // landscape groupSmile: U('1566004100631-35d015d6a491', 900), // kids rope: U('1469371670807-013ccf25f16a', 800), forestLight: U('1441974231531-c6227db76b6e', 1100), // New picks for V5 parentsCouple: U('1604881987996-7e3635a4e02a', 1100), // (guess) diverse couple siblingsPlay: U('1503944168849-8bf86bb04b81', 1000), // (guess) kids playing familyDesk: U('1611224923853-80b023f02d71', 1000), // (guess) planning / desk // Curated local photos campPinewood: '/images/camp-pinewood.jpg', familyCamping: '/images/family-camping.jpg', beachSandcastles: '/images/beach-sandcastles.jpg', artStudio: '/images/art-studio.jpg', familyHome: '/images/family-home.jpg', parentsLaptop: '/images/parents-laptop.jpg', soccerPark: '/images/soccer-park.jpg', }; // ─── Tiny icons (only what we need) ─────────────────────────────────────── function LPIcon({ name, size = 18, color = T.teal, stroke = 1.6 }) { const paths = { star: , spark: <>, cal: <>, chat: , kids: <>, compare: <>, todo: <>, bell: , home: <>, arrow: <>, check: , heart: , pin: <>, leaf: , }; return ( {paths[name]} ); } // ─── Logo ───────────────────────────────────────────────────────────────── function LPLogo({ size = 22, light = false, mono = false }) { const fg = mono ? (light ? '#fff' : T.tealD) : (light ? '#fff' : T.tealD); return (
ParentStack
); } // ─── Mini Chat surface (CampFinder AI) ─────────────────────────────────── // Shows a stylized chat: user prompt + AI typing/response + camp result cards. // `step` 0..3 drives reveal stages. function MiniChat({ width = 360, step = 3, scale = 1, dark = false }) { const stepRevealed = (s) => step >= s; return (
{/* topbar */}
Camp Finder
AI-powered search
{[T.rose, T.amber, T.teal].map(c =>
)}
{/* messages */}
{/* user msg */}
9-year-old, loves animals — outdoor camps near Palo Alto?
{/* AI bubble */} {stepRevealed(1) && (
{step === 1 ? ( ) : ( <>Found 3 outdoor camps within 30 mi. Top match: nature-focused day camp at the Baylands preserve. 🌲 )}
)} {/* result cards */} {stepRevealed(3) && (
{[ { name: 'Peninsula Nature Explorers', loc: 'Palo Alto · 2.1 mi', rating: 4.6, price: '$620/wk', photo: PHOTOS.kidsCanoe }, { name: 'Redwood Creek Outdoor Academy', loc: 'Boulder Creek · 12 mi', rating: 4.8, price: '$1,200/wk', photo: PHOTOS.forestLight }, ].map(c => (
{c.name}
{c.loc} {c.rating}
{c.price}
))}
)}
); } // ─── Mini Calendar surface ─────────────────────────────────────────────── function MiniCalendar({ width = 360, highlightDay = 24, showSavedCamp = true, scale = 1, dark = false }) { const weeks = [ [null,null,null,1,2,3,4], [5,6,7,8,9,10,11], [12,13,14,15,16,17,18], [19,20,21,22,23,24,25], [26,27,28,29,30,null,null], ]; const evs = { 8: [{ c: T.amber }], 14: [{ c: T.sage }], 17: [{ c: T.violet }], 22: [{ c: T.amber }], 24: [{ c: T.teal }, { c: T.sage }], 28: [{ c: T.rose }], }; const multiBars = [ { row: 0, startCol: 4, endCol: 6, color: T.sage, label: 'Spring break' }, { row: 1, startCol: 4, endCol: 4, color: T.amber, label: 'Soccer' }, { row: 2, startCol: 1, endCol: 1, color: T.rose, label: 'Dentist' }, { row: 3, startCol: 4, endCol: 6, color: T.teal, label: 'Camp' }, ]; const barPalette = { [T.teal]: { bg: T.tealS, fg: T.tealD }, [T.sage]: { bg: T.sageS, fg: T.sage }, [T.amber]: { bg: T.amberS, fg: T.amberD}, [T.rose]: { bg: T.roseS, fg: T.rose }, [T.violet]: { bg: T.violetS, fg: T.violet}, }; return (
{/* topbar */}
April 2026
Google synced
{['M','W','D'].map((v,i) => (
{v}
))}
{/* day names */}
{['S','M','T','W','T','F','S'].map((d,i) => (
{d}
))}
{/* weeks */}
{weeks.map((week, wi) => (
{week.map((day, di) => { const isToday = day === highlightDay; const dayEvs = day && evs[day] ? evs[day] : []; return (
{day !== null && ( <>
{day}
{dayEvs.slice(0,3).map((e,i) => (
))}
)}
); })} {/* multi-day bars */} {multiBars.filter(b => b.row === wi).map((b, i) => (
{b.label}
))}
))}
); } // ─── Auto-playing demo: chat → results → calendar (loops) ──────────────── function ProductDemoLoop({ chatWidth = 320, calWidth = 320, gap = 22, scale = 1 }) { const [phase, setPhase] = React.useState(0); // 0: ask, 1: typing, 2: reply, 3: results, 4: saved->cal React.useEffect(() => { const seq = [ { p: 0, ms: 1600 }, { p: 1, ms: 1100 }, { p: 2, ms: 1300 }, { p: 3, ms: 2400 }, { p: 4, ms: 2600 }, ]; let idx = 0; let cancelled = false; function tick() { if (cancelled) return; setPhase(seq[idx].p); const wait = seq[idx].ms; idx = (idx + 1) % seq.length; setTimeout(tick, wait); } tick(); return () => { cancelled = true; }; }, []); const chatStep = Math.min(phase, 3); // 0..3 const showSaved = phase >= 4; return (
{phase >= 3 && (
3 matches found ✦
)}
{/* arrow between */}
= 4 ? 1 : 0.4, transition: 'opacity 0.3s' }}>
= 4 ? T.teal : T.subtle, display:'flex', alignItems:'center', justifyContent:'center', color: phase >= 4 ? '#fff' : T.muted, transition: 'background 0.3s' }}> = 4 ? '#fff' : T.muted} stroke={2.5} />
saved
); } // ─── Photo tile helper ──────────────────────────────────────────────────── function PhotoTile({ src, w, h, radius = 18, style = {}, label, className = '' }) { return (
{label && (
{label}
)}
); } // Loops form endpoint (configured in build.mjs) const LOOPS_FORM_URL = "https://app.loops.so/api/newsletter-form/cmpbtta3o01qx0jyuw4ks2t6d"; // ─── Email signup field ─────────────────────────────────────────────────── function EmailSignup({ variant = 'inline', placeholder = 'you@email.com', cta = 'Get early access', accent = T.teal, dark = false, onSubmit }) { const [val, setVal] = React.useState(''); const [done, setDone] = React.useState(false); const [submitting, setSubmitting] = React.useState(false); async function submit(e) { e.preventDefault(); if (!val || !val.includes('@') || submitting) return; setSubmitting(true); try { if (LOOPS_FORM_URL && !LOOPS_FORM_URL.startsWith('__')) { await fetch(LOOPS_FORM_URL, { method: 'POST', headers: { 'Content-Type': 'application/x-www-form-urlencoded' }, body: new URLSearchParams({ email: val, source: 'parentstack.ai-landing' }), }); } } catch (err) { /* swallow; user still sees confirmation */ } setDone(true); if (onSubmit) onSubmit(val); } if (done) { return (
You're on the list. We'll be in touch soon. 🌲
); } return (
setVal(e.target.value)} placeholder={placeholder} style={{ flex: variant === 'stacked' ? 'none' : 1, background: variant === 'pill' ? 'transparent' : (dark ? 'rgba(255,255,255,0.08)' : T.surface), border: variant === 'pill' ? 'none' : (dark ? '1px solid rgba(255,255,255,0.16)' : `1px solid ${T.border}`), borderRadius: variant === 'pill' ? 999 : 12, padding: variant === 'pill' ? '10px 18px' : '14px 18px', fontSize: 14, color: dark ? '#fff' : T.pri, width: variant === 'stacked' ? '100%' : 'auto', outline: 'none', }} />
); } // ─── Mini To-dos surface ───────────────────────────────────────────────── function MiniTodos({ width = 360, scale = 1 }) { const items = [ { done: true, text: 'Register Emma for swim camp', tag: 'Camp', tagBg: T.tealS, tagFg: T.tealD, who: 'S' }, { done: false, text: 'RSVP Jake — Liam\'s pirate party', tag: 'RSVP', tagBg: T.amberS, tagFg: T.amberD, who: 'D', due: 'Fri' }, { done: false, text: 'Buy Halloween costume — vampire', tag: 'Shopping', tagBg: T.violetS, tagFg: T.violet, who: 'S', due: 'Oct 28' }, { done: false, text: 'Pack lunch box for field trip', tag: 'School', tagBg: T.sageS, tagFg: T.sage, who: 'D', due: 'Tue' }, { done: false, text: 'Schedule Emma\'s dentist cleaning', tag: 'Health', tagBg: T.roseS, tagFg: T.rose, who: 'S' }, { done: true, text: 'Submit camp medical form', tag: 'Forms', tagBg: T.skyS, tagFg: T.sky, who: 'D' }, ]; return (
{/* topbar */}
Shared to-dos
Sarah · David · this week
{[{ i: 'S', bg: T.teal }, { i: 'D', bg: T.amber }].map((a, idx) => (
{a.i}
))}
{/* progress strip */}
2 / 6 done
{/* list */}
{items.map((it, i) => (
{it.done && }
{it.text}
{it.tag} {it.due && ( Due {it.due} )}
{it.who}
))}
); } // ─── Mini Kid Profiles surface ─────────────────────────────────────────── function MiniProfiles({ width = 360, scale = 1 }) { const kids = [ { name: 'Emma', age: 9, color: T.amber, bg: T.amberS, initial: 'E', fields: [ { k: 'Allergies', v: 'Peanuts, bees' }, { k: 'T-shirt', v: 'Youth M' }, { k: 'Pediatrician', v: 'Dr. Park · Palo Alto' }, ], }, { name: 'Jake', age: 6, color: T.teal, bg: T.tealS, initial: 'J', fields: [ { k: 'Allergies', v: 'None' }, { k: 'T-shirt', v: 'Youth S' }, { k: 'Pediatrician', v: 'Dr. Park · Palo Alto' }, ], }, { name: 'Mia', age: 3, color: T.rose, bg: T.roseS, initial: 'M', fields: [ { k: 'Allergies', v: 'Dairy' }, { k: 'Diapers', v: 'Size 5' }, { k: 'Pediatrician', v: 'Dr. Park · Palo Alto' }, ], }, ]; return (
{/* topbar */}
My kids
3 profiles
+
{/* cards */}
{kids.map((k, i) => (
{/* card head */}
{k.initial}
{k.name}
{k.age} years old
Complete
{/* fields */}
{k.fields.map(f => (
{f.k} {f.v}
))}
))}
); } Object.assign(window, { MiniProfiles }); function SmallFeatureEditorial({ tag, title, body, photo, slotId, slotSrc, slotPlaceholder, mock }) { const hasOverlay = !!mock; return (
{hasOverlay && (
{mock}
)}

{tag}

{title}

{body}

); } // ═══════════════════════════════════════════════════════════════════════════ // V5 — Hybrid v2 (Editorial chrome + "family OS" voice) // Same magazine layout as V4, but with a confident, tech-leaning headline: // "Built for the logistics of raising kids." // ═══════════════════════════════════════════════════════════════════════════ function V5HybridV2() { return (
{/* ─── Top bar ─────────────────────────────────────────────── */}
WAVE 1 OPENING SOON
{/* ─── Hero ───────────────────────────────────────────────── */}
{/* Left: editorial text with modern copy */}

Built for the
logistics of
raising kids.

A single home for everything family logistics — camps, calendars, kid profiles, and everything else that keeps your family running.

No spam. Unsubscribe any time.

{/* Right: editorial photo collage with product peeking */}
{/* ─── Mission + Vision ─────────────────────────────────────── */}

Our mission

Make parenting easier for modern families by reducing the hidden labor of research, planning, coordination, and follow-through.

Our vision

A world where parents spend less time managing childhood, and more time experiencing it with their kids.

{/* ─── Four things, done right ──────────────────────────── */}

Four things, done right

Built to share the mental load.

{/* feature 1 — camp finder */} } reverse={false} /> {/* feature 2 — family feed + calendar */} } reverse={true} /> {/* row: 2 smaller features */}
} /> } />
{/* ─── How it works — broader three-step ────────────────── */}

How it works

From birthday RSVPs to summer camp —
all in one quiet place.

We're keeping it small on purpose. Less app, more time back.

{[ { step: 1, title: 'Drop in anything from your family\'s life', body: 'Camps, birthday parties, dentist visits, soccer practice — add it all to one home.' }, { step: 2, title: 'Let it plan, track, and remind', body: 'AI helps you find camps and activities. ParentStack fills the forms, tracks RSVPs, and quietly nudges what matters.' }, { step: 3, title: 'Everyone stays in sync', body: 'Shared with your co-parent and synced with Google Calendar. No copy-paste. No forgotten weeks.' }, ].map(s => (
{s.step}

{s.title}

{s.body}

))}
{/* ─── Photo strip ───────────────────────────────────────── */}

— the joy is the point.

{(() => { const curated = [ PHOTOS.campPinewood, PHOTOS.familyCamping, PHOTOS.beachSandcastles, PHOTOS.artStudio, PHOTOS.familyHome, PHOTOS.parentsLaptop, PHOTOS.soccerPark, ]; // Two passes for the marquee loop return [...curated, ...curated].map((src, i) => (
)); })()}
{/* ─── Footer signup — editorial "open the gates" ──────────── */}

One more thing —

Be first when we open.

We're sending invites in small batches. Get yours and help shape what we build.

Contact us ·

© 2026 ParentStack · Made in California with two cups of coffee

); } function V4Feature({ tag, title, body, photo, slotId, slotPlaceholder, mock, reverse }) { return (

{tag}

{title}

{body}

{mock}
); } window.V5HybridV2 = V5HybridV2; // ─── Mount ──────────────────────────────────────────────────────────────── ReactDOM.createRoot(document.getElementById('root')).render();