Confetti Marketing Landing Page

What it did in run 1

1. confetti-marketing-landing-page
2. ./brief.md
3. cd .; ls -a; S=.claude/skills/confetti-marketing-landing-page; ls $S/reference; wc -c $S/reference/*; node $S/scripts/check.mjs --ready
4. cd .; ls -a; ls .claude/skills/confetti-marketing-landing-page/reference; wc -c .claude/skills/confetti-marketing-landing-page/reference/*; node .claude/skills/confetti-marketing-landing-page/scripts/check.mjs --ready
5. cd .; wc -c index.html script.js style.css; head -c 600 index.html
6. ./.claude/skills/confetti-marketing-landing-page/reference/index.html
7. cd .; R=.claude/skills/confetti-marketing-landing-page/reference; cp $R/style.css $R/script.js .; grep -n "hero\|feat-art\|\.confetti\|\.featured\|tier-flag\|billing\|foot-small\|\.cta" style.css | head -80; grep -n "form\|billing\|data-" script.js | head -30
8. cp .claude/skills/confetti-marketing-landing-page/reference/style.css .claude/skills/confetti-marketing-landing-page/reference/script.js . && grep -n "hero\|feat-art\|\.featured\|tier-flag\|foot-small" style.css | head -60
9. cp ./.claude/skills/confetti-marketing-landing-page/reference/style.css ./style.css
10. cp ./.claude/skills/confetti-marketing-landing-page/reference/script.js ./script.js
11. hero|feat-art|tier-flag|foot-small|\.sr-only
12. ./.claude/skills/confetti-marketing-landing-page/reference/style.css
13. ./.claude/skills/confetti-marketing-landing-page/reference/script.js
14. ./style.css
15. ./script.js
16. node -e ' const T=<svg class="ic" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><path d="M5 12l5 5 9-10"/></svg>; const ic=p=><svg class="ic" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false">${p}</svg>; const arrow=ic("<path d=\"M5 12h14M13 6l6 6-6 6\"/>"); const plus=ic("<path d=\"M12 5v14M5 12h14\"/>"); let conf="";for(let i=0;i<30;i++){const left=i%2===0;const x=left?(1+(i*7)%12):(85+(i*5)%12);const y=(i*13)%62;conf+=<i style="--x:${x}%;--y:${y}%;--r:${(i*47)%360}deg;--d:${((i%10)*0.08).toFixed(2)}s"></i>} const logo=<svg viewBox="0 0 32 32" aria-hidden="true" focusable="false"><circle cx="16" cy="16" r="14" fill="#6D28D9"/><circle cx="11" cy="13" r="3" fill="#FDE68A"/><circle cx="21" cy="13" r="3" fill="#F472B6"/><path d="M8 20q8 8 16 0" stroke="#fff" stroke-width="2.5" fill="none" stroke-linecap="round"/></svg>; const av=(c,t)=><span class="avatar"><svg viewBox="0 0 100 100" aria-hidden="true" focusable="false"><rect width="100" height="100" fill="${c}"/><text x="50" y="64" text-anchor="middle" font-family="Bricolage Grotesque,sans-serif" font-weight="800" font-size="42" fill="#1E1B4B">${t}</text></svg></span>; const q=(t,n,r,c,i)=><li class="quote reveal"><figure><blockquote><p>${t}</p></blockquote><figcaption>${av(c,i)}<span><b>${n}</b><br><span class="role">${r}</span></span></figcaption></figure></li>; const feat=(span,p,h,t)=><li class="feat reveal" style="--span:${span}"><span class="feat-ic">${ic(p)}</span><h3>${h}</h3><p>${t}</p></li>; const step=(n,h,t)=><li class="feat reveal"><span class="feat-n">${n}</span><h3>${h}</h3><p>${t}</p></li>; const heroArt=<svg viewBox="0 0 960 480" role="img" aria-label="Drawing of a party invite next to a list of guest replies and a party bag checklist"><rect width="960" height="480" fill="#FFF7E6"/><circle cx="60" cy="60" r="90" fill="#F3E8FF"/><circle cx="910" cy="440" r="110" fill="#FCE7F3"/><g transform="rotate(-4 250 240)"><rect x="90" y="60" width="330" height="360" rx="22" fill="#fff" stroke="#1E1B4B" stroke-width="4"/><rect x="90" y="60" width="330" height="110" rx="22" fill="#6D28D9"/><path d="M90 150h330v20H90z" fill="#6D28D9"/><text x="255" y="130" text-anchor="middle" font-family="Bricolage Grotesque,sans-serif" font-weight="800" font-size="44" fill="#fff">Party time!</text><rect x="130" y="205" width="250" height="14" rx="7" fill="#D9D3F0"/><rect x="130" y="235" width="190" height="14" rx="7" fill="#D9D3F0"/><circle cx="170" cy="340" r="26" fill="#FACC15"/><circle cx="255" cy="340" r="26" fill="#F472B6"/><circle cx="340" cy="340" r="26" fill="#2DD4BF"/><path d="M150 290h210" stroke="#1E1B4B" stroke-width="4" stroke-linecap="round" stroke-dasharray="2 14"/></g><rect x="500" y="50" width="360" height="190" rx="22" fill="#fff" stroke="#1E1B4B" stroke-width="4"/><g fill="#D9D3F0"><rect x="560" y="92" width="200" height="14" rx="7"/><rect x="560" y="136" width="160" height="14" rx="7"/><rect x="560" y="180" width="220" height="14" rx="7"/></g><g stroke="#1E1B4B" stroke-width="3"><circle cx="530" cy="99" r="12" fill="#2DD4BF"/><circle cx="530" cy="143" r="12" fill="#2DD4BF"/><circle cx="530" cy="187" r="12" fill="#FACC15"/></g><rect x="540" y="270" width="360" height="160" rx="22" fill="#fff" stroke="#1E1B4B" stroke-width="4"/><g stroke="#1E1B4B" stroke-width="3"><rect x="572" y="302" width="26" height="26" rx="6" fill="#6D28D9"/><rect x="572" y="344" width="26" height="26" rx="6" fill="#6D28D9"/><rect x="572" y="386" width="26" height="26" rx="6" fill="#fff"/></g><g fill="#D9D3F0"><rect x="620" y="309" width="190" height="12" rx="6"/><rect x="620" y="351" width="150" height="12" rx="6"/><rect x="620" y="393" width="170" height="12" rx="6"/></g></svg>; const H=<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Huddle: Kids&#39; birthday parties, planned in one evening</title> <meta name="description" content="Huddle plans kids&#39; birthday parties: invites, RSVPs, gift lists and a party bag checklist. Free to plan; guests reply without the app."> <meta property="og:type" content="website"> <meta property="og:title" content="Huddle: Kids&#39; birthday parties, planned in one evening"> <meta property="og:description" content="Invites, RSVPs, gift lists and a party bag checklist in one place. Free to plan a party."> <meta property="og:image" content="og.png"><!-- PLACEHOLDER: add og.png (1200x630) and use its full web address --> <link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,500;12..96,700;12..96,800&family=DM+Sans:wght@400;500;700&display=swap"> <link rel="stylesheet" href="style.css"> </head> <body> <a class="skip" href="#main">Skip to content</a> <header class="nav"><div class="wrap nav-in"> <a class="brand" href="#main" aria-label="Huddle home">${logo}<span>Huddle</span></a> <button class="nav-toggle" type="button" data-nav-toggle aria-expanded="false" aria-controls="menu">${ic("<path d=\"M4 7h16M4 12h16M4 17h16\"/>")}<span>Menu</span></button> <nav id="menu" class="menu" aria-label="Main"><ul><li><a href="#features">Features</a></li><li><a href="#how">How it works</a></li><li><a href="#pricing">Pricing</a></li><li><a href="#faq">Questions</a></li></ul><a class="btn btn-primary btn-sm" href="#cta">Plan a party</a></nav> </div></header> <main id="main"> <section class="hero"><div class="wrap hero-in"><div class="reveal"><h1>Kids&#39; parties, <em>sorted</em> in one evening</h1><p class="hero-sub">Invites, RSVPs, gift lists and the party bag checklist, all in one place. Guests reply without the app.</p><div class="hero-ctas"><a class="btn btn-primary" href="#cta">Plan a party, free${arrow}</a><a class="btn btn-ghost" href="#how">See how it works</a></div><p class="hero-note">Free to plan. Only printed invites cost extra.</p></div><div class="hero-art reveal">${heroArt}</div><div class="confetti" aria-hidden="true">${conf}</div></div></section> <div class="stat-band"><b>120,000</b><span>parties planned so far</span></div> <section class="sec features features-bento" id="features" aria-labelledby="features-h"><div class="wrap"><div class="sec-head"><h2 id="features-h">Everything a <em>host</em> needs</h2></div><ul class="feat-list"> ${feat(3,"<path d=\"M4 6h16v12H4zM4 7l8 6 8-6\"/>","Invites","Send by link or WhatsApp. Guests reply without downloading anything.").replace("feat reveal","feat feat-wide reveal")} ${feat(3,"<path d=\"M5 12l5 5 9-10\"/>","RSVPs and allergies","Every reply and every allergy in one list, so nobody gets the wrong cake.").replace("feat reveal","feat feat-wide reveal")} ${feat(2,"<path d=\"M4 11h16v9H4zM3 7h18v4H3zM12 7v13M12 7c-3 0-5-1-5-3s3-2 5 3c2-5 5-5 5-3s-2 3-5 3\"/>","Gift lists","Share a wish list so you do not end up with three copies of the same set.")} ${feat(2,"<path d=\"M7 8h10l1 12H6zM9 8a3 3 0 0 1 6 0\"/>","Party bag checklist","Tick off every bag and treat as you go.")} ${feat(2,"<path d=\"M6 3h9l3 3v15H6zM9 11h6M9 15h6\"/>","Printed invites","$5 per party for a pack of 20, posted within 3 days.")} </ul></div></section> <section class="sec features features-steps" id="how" aria-labelledby="how-h"><div class="wrap"><div class="sec-head"><h2 id="how-h">Party in <em>four</em> steps</h2></div><ul class="feat-list"> ${step("01","Pick a date and a place","Set the when and where.")} ${step("02","Send the invite","By link or WhatsApp. Guests reply without the app.")} ${step("03","Track RSVPs and allergies","One list for every reply.")} ${step("04","Tick off the party bags","Work down the checklist.")} </ul></div></section> <section class="sec quotes" id="stories" aria-labelledby="stories-h"><div class="wrap"><div class="sec-head"><h2 id="stories-h">Parents <em>say</em></h2></div><ul class="quote-list"> ${q("I planned Mia&#39;s 7th in one evening, RSVPs and all.","Jess","Mum of two","#FCE7F3","J")} ${q("The gift list stopped us getting three copies of the same Lego set.","Darren","Dad of Leo (6)","#DDD6FE","D")} ${q("The party bag checklist alone is worth it.","Amira","Mum of twins","#CCFBF1","A")} </ul></div></section> <section class="sec pricing" id="pricing" aria-labelledby="pricing-h"><div class="wrap"><div class="sec-head"><h2 id="pricing-h">Free to plan. <em>Pay</em> only for print.</h2></div><ul class="tiers"> <li class="tier reveal featured"><p class="tier-flag">Most popular</p><h3>Plan a party</h3><p class="tier-blurb">Everything you need to run the party.</p><p class="tier-price"><span class="amount">Free</span></p><ul class="ticks"><li>${T}Invites by link or WhatsApp</li><li>${T}RSVPs and allergies</li><li>${T}Gift list</li><li>${T}Party bag checklist</li></ul><a class="btn btn-primary" href="#cta">Plan a party</a></li> <li class="tier reveal"><h3>Printed invites</h3><p class="tier-blurb">An extra for any party.</p><p class="tier-price"><span class="amount">$5</span><span class="per">per party, pack of 20</span></p><ul class="ticks"><li>${T}Pack of 20 printed invites</li><li>${T}Posted within 3 days</li></ul><a class="btn btn-ghost" href="#cta">Plan a party first</a></li> </ul></div></section> <section class="sec faq" id="faq" aria-labelledby="faq-h"><div class="wrap"><div class="sec-head"><h2 id="faq-h">Quick <em>questions</em></h2></div><div class="faq-list"> <details><summary>Do guests need the app?${plus}</summary><p>No. Guests reply from the link or WhatsApp message.</p></details> <details><summary>Is it free?${plus}</summary><p>Yes. Only printed invites cost extra.</p></details> </div></div></section> <section class="sec cta" id="cta" aria-labelledby="cta-h"><div class="wrap"><div class="cta-box reveal"><h2 id="cta-h">Ready to plan the <em>party?</em></h2><p>Free to start. Most parents are done in one evening.</p><div class="hero-ctas"><a class="btn btn-light" href="https://app.huddle.example/new">Plan a party, free${arrow}</a></div></div></div></section> </main> <footer class="foot"><div class="wrap foot-in"><div class="foot-brand"><a class="brand" href="#main">${logo}<span>Huddle</span></a><p>Kids&#39; birthday parties, planned.</p></div><nav class="foot-col" aria-label="Huddle"><h2>Huddle</h2><ul><li><a href="#features">Features</a></li><li><a href="#how">How it works</a></li><li><a href="#pricing">Pricing</a></li></ul></nav><nav class="foot-col" aria-label="Help"><h2>Help</h2><ul><li><a href="#faq">Questions</a></li><li><a href="#stories">Parents say</a></li></ul></nav></div><div class="wrap foot-small"><p>&copy; <span data-year>2026</span> Huddle.</p></div></footer> <script src="script.js" defer></script> </body> </html> ; require("fs").writeFileSync("index.html",H)' && node .claude/skills/confetti-marketing-landing-page/scripts/check.mjs index.html --out check 2>&1 | tail -40
17. /private/var/folders/4r/x1k_d3dx36v_yrnn39ymflm40000gn/T/rcl-real-runs/confetti-marketing-landing-page/gen.js
18. node ../gen.js index.html && node .claude/skills/confetti-marketing-landing-page/scripts/check.mjs index.html --out check 2>&1 | tail -40
19. ./check/1440.png
20. ./check/390.png
21. ./style.css
22. node .claude/skills/confetti-marketing-landing-page/scripts/check.mjs index.html --out check 2>&1 | tail -8
23. Done

12 Nov 2026 · Claude Code 2.1.322 with Claude Sonnet 5.5 · 2 min 58 s · $0.54 of API use