/* global React, PoofPart1 */ const { useState: useStateP2 } = React; const { Reveal, ArrowRight, Check, Plus, Logo, PromptBox } = window.PoofPart1; /* ============= TEMPLATE PREVIEWS — illustrated mini-app mockups ============= */ function TemplatePreview({ kind }) { // Each preview is a stylised browser-window snapshot of the actual template UI. const Frame = ({ children, bg = "#fff" }) => ( {/* mini browser chrome */} {children} ); if (kind === "bakery") return ( Crumb & Co. SOURDOUGH · PASTRIES {/* product cards */} {[0,1,2].map(i => ( ))} Pick up Saturday · $24.50 ); if (kind === "portal") return ( Welcome back, Anna 3 sessions this month {/* stat cards */} {[ {n: "12", l: "Sessions"}, {n: "$840", l: "Invoiced"}, {n: "94%", l: "Progress"}, ].map((s, i) => ( {s.n} {s.l.toUpperCase()} ))} {/* upcoming session */} NEXT SESSION Q3 strategy review Thursday · 2:00 PM ); if (kind === "yoga") return ( Stillpoint THIS WEEK {/* day grid */} {["M","T","W","T","F","S","S"].map((d, i) => ( {d} ))} {[ {x: 1, y: 0, fill: "#E892B5"}, {x: 0, y: 1, fill: "#4C3A5C"}, {x: 3, y: 1, fill: "#E892B5"}, {x: 5, y: 0, fill: "#1F1A2E"}, {x: 2, y: 2, fill: "#E892B5"}, {x: 4, y: 2, fill: "#4C3A5C"}, ].map((c, i) => ( ))} FRI · 6:30 PM Slow Flow · 3 spots left ); if (kind === "shop") return ( Tiny Shop Weekend drop · 12 pieces {/* products */} {[ {bg: "#1FB295", price: "$28"}, {bg: "#DFF6EE", price: "$42"}, {bg: "#0F3A33", price: "$36"}, ].map((p, i) => ( {p.price} ))} Add to cart → 3 of 12 left ); if (kind === "book") return ( Page Turners SEPTEMBER PICK {/* book stack */} The Overstory R. POWERS 14 members reading Next meet · Thu 7pm {/* reader avatars */} {["#d6a85a", "#3a2a14", "#fff1cb", "#7d5a32", "#d6a85a"].map((c, i) => ( ))} Join discussion → ); if (kind === "event") return ( Devon turns 30 FRI · OCT 4 · 8PM The Knitting Factory · Brooklyn {/* rsvp pill */} I'm in ✓ Can't make it {/* attendees */} 28 GOING {["#FBE4ED","#E892B5","#9a4e74","#fff","#FBE4ED","#E892B5"].map((c, i) => ( ))} + 22 more ); if (kind === "pet") return ( PawPal BOOK A SITTER {/* date picker */} {[1,2,3,4,5,6,7].map((d, i) => ( OCT {d + 3} ))} {/* pet card */} 🐕 Biscuit · Goldendoodle 3 walks · feeding · meds Book → ); if (kind === "invoice") return ( Invoice #024 DUE OCT 15 {/* line items */} {[ {l: "Brand identity · September", a: "$2,400.00"}, {l: "Logo refresh · 3 rounds", a: "$640.00"}, {l: "Style guide PDF", a: "$320.00"}, ].map((it, i) => ( {it.l} {it.a} ))} Total due $3,360.00 Pay with card · Stripe ); return null; } /* ============= TEMPLATES ============= */ function Templates() { const tpls = [ { name: "Crumb & Co.", desc: "Bakery pickup orders", art: "tpl-bakery", preview: "bakery", icon: "🥐", cat: "Business" }, { name: "Client Hub", desc: "Coaching client portal", art: "tpl-portal", preview: "portal", icon: "📋", cat: "Business" }, { name: "Stillpoint", desc: "Yoga class scheduler", art: "tpl-yoga", preview: "yoga", icon: "🧘", cat: "Business" }, { name: "Tiny Shop", desc: "Weekend storefront", art: "tpl-shop", preview: "shop", icon: "🛒", cat: "Stores" }, { name: "Page Turners", desc: "Book-club site", art: "tpl-book", preview: "book", icon: "📚", cat: "Personal" }, { name: "Hello, Party", desc: "Event RSVP page", art: "tpl-event", preview: "event", icon: "🎉", cat: "Personal" }, { name: "PawPal", desc: "Pet-sitter booker", art: "tpl-pet", preview: "pet", icon: "🐾", cat: "Forms" }, { name: "Invoice Stack", desc: "Freelance invoices", art: "tpl-invoice", preview: "invoice", icon: "🧾", cat: "Business" }, ]; const filters = ["All", "Business", "Personal", "Forms", "Stores"]; const [active, setActive] = React.useState("All"); const visible = active === "All" ? tpls : tpls.filter((t) => t.cat === active); return (
Start somewhere

Pick a template.
Make it yours.

Real apps that other non-coders shipped this week. Click any to remix in seconds.
{filters.map((f) => ( ))}
{visible.map((t, i) => (
{t.cat}
{t.icon}

{t.name}

{t.desc}

Use
))}
); } /* ============= TRUST ROW ============= */ function Trust() { const items = [ { n: "01", kicker: "Built right", title: "Production-grade, by default.", body: "Every app ships with the same security headers, accessibility defaults, and performance budget a real engineering team would set. You just don't have to know what any of that means.", spec: "A11Y · AA", specLabel: "WCAG 2.2 compliant", facts: ["SSL by default", "OWASP headers", "Lighthouse 95+"], art: ( ), }, { n: "02", kicker: "Yours to keep", title: "Your code. Your data. Your call.", body: "Your app is your app. Export the full source code anytime on Pro. Take it elsewhere, hand it to a developer, or keep it here — never anyone else's decision but yours.", spec: "MIT", specLabel: "Open export license", facts: ["Full source export", "Postgres dumps", "Walk away anytime"], art: ( ), }, { n: "03", kicker: "Honest pricing", title: "Start free. Cancel in two clicks.", body: "Free forever to build, prototype, and ship your first apps. Pay only when something's working — and walk away in 30 seconds if it isn't. No \"talk to sales,\" no retention dance.", spec: "$0", specLabel: "Free, forever", facts: ["No card to start", "Cancel · 2 clicks", "Refund · always"], art: ( RECEIPT Hosting $0.00 SSL cert $0.00 Updates $0.00 Total FREE ), }, ]; const factsRow = [ "SSL · auto", "WCAG 2.2 AA", "GDPR · ready", "Daily backups", "Cancel · anytime", "Code · yours", ]; return (
The fine print, unfine-printed

Quietly engineered.
Always yours.

A reassurance page, with receipts. Skim it now — you won't have to read it later.
{items.map((it, i) => (
{it.art} {it.n}
{it.kicker}

{it.title}

{it.body}

{it.spec}
{it.specLabel}
    {it.facts.map((f) => (
  • {f}
    • ))}
))}
{factsRow.map((f, i) => ( {f} {i < factsRow.length - 1 && ·} ))}
); } /* ============= PROOF ============= */ function BigPhoto() { const featured = { id: "proof-mei", name: "Mei Chen", role: "Owner, Crumb & Co. Bakery", where: "Portland, OR", app: "saturday-sourdough.poof.app", metric: "$8,400", metricLabel: "in pre-orders, first month", tint: "warm", pull: "Twenty-three minutes.", quote: "I described what I wanted in one sentence. Twenty-three minutes later my customers were placing orders. I still don't know what \u201cdeploy\u201d means \u2014 and I don't have to.", }; const stories = [ { id: "proof-devon", name: "Devon Park", role: "Head of Growth", where: "Lumen Coffee · Brooklyn", app: "lumen-ops.poof.app", metric: "3 apps", metricLabel: "live in one week", tint: "rose", pull: "Zero engineers hired.", quote: "Three apps live. Zero engineers hired. I'm a marketer \u2014 I built our entire ops dashboard in a week.", }, { id: "proof-sarah", name: "Sarah Lin", role: "Brand strategist", where: "Independent · Austin", app: "sarah-lin.poof.app", metric: "1 afternoon", metricLabel: "from Google Doc to real app", tint: "plum", pull: "Logins. Invoices. Real.", quote: "My client portal used to be a Google Doc. Now it's a real app with logins and invoices. Took an afternoon.", }, { id: "proof-marcus", name: "Marcus Webb", role: "Owner", where: "Webb Pottery · Asheville", app: "webbpottery.com", metric: "3× refresh", metricLabel: "before he believed it", tint: "sun", pull: "Refreshed three times.", quote: "I described what I wanted. It built it. I refreshed three times because I didn't believe it was that easy.", }, ]; return (
№ 04 Receipts Shipped this month

Real apps.
Real people.

No demos. No staged screenshots. Four sites shipped this month by people who'd never written a line of code.
Story of the week
{featured.pull}
{featured.quote}
{featured.name}
{featured.role} · {featured.where}
{featured.metric}
{featured.metricLabel}
Visit {featured.app}
{stories.map((s, i) => (
{s.pull}
"{s.quote}"
{s.name}
{s.role} · {s.where}
{s.metric}
{s.metricLabel}
 ))}
); } /* ============= STATS ============= */ function Stats() { const items = [ { n: "9 min", l: "Average time from idea to a live, working app", tag: "Speed" }, { n: "200K+", l: "Apps shipped by non-coders with AppsBuiltWithAI", tag: "Adoption" }, { n: "0", l: "Lines of code you'll write, ever. Not a typo.", tag: "Effort" }, ]; return (
Proof is in the numbers
{items.map((s, i) => (
{String(i + 1).padStart(2, "0")} · {s.tag}
{s.n}
{s.l}
))}
); } window.PoofPart2 = { Templates, Trust, BigPhoto, Stats };