// sections.jsx — landing page sections for Prnting const { useState: useS, useEffect: useE, useRef: useR, useMemo: useM } = React; // Where all "Sign up / Login / Start free trial" CTAs point. The app's // AuthGate handles whether to show login or signup based on session state. // Prod points at the live app; local testing points at the Vite dev server so the // landing → signup → onboarding flow is clickable end-to-end on localhost. const APP_URL = (typeof location !== 'undefined' && location.hostname === 'localhost') ? 'http://localhost:3000' : 'https://app.prnting.ai'; const FOUNDER_EMAIL = 'support@prnting.ai'; // ── Nav ────────────────────────────────────────────────────────────────── function Nav() { const [scrolled, setScrolled] = useS(false); useE(() => { const onScroll = () => setScrolled(window.scrollY > 8); window.addEventListener('scroll', onScroll, { passive: true }); return () => window.removeEventListener('scroll', onScroll); }, []); return (
Login Start free →
); } // ── Hero ───────────────────────────────────────────────────────────────── function Hero() { return (
{/* Lime glow */}
{/* Status pill */}
New: Image-prompt critique pass v2 v0.18 →

Generate the Meta ads
your competitors{' '} wish{' '} they could.

Drop in your brand. We crawl your site, extract 20 testing angles rooted in real customer language, and ship dozens of ads — copy and image — that a senior performance marketer would actually run.

Start free — 30 credits, no card See how it works
~$0.12/ad · 60s onboarding · cancel any time
{/* Hero visual */}
); } // ── Hero animated demo ─────────────────────────────────────────────────── // Stylized window that streams a generation in real time — terminal feel + // rendered ad output on the right. Loops every ~12s. function HeroDemo() { const STEPS = [ { t: 0, line: '$ prnting generate --angle "tired-of-greasy" --format hook-stat' }, { t: 600, line: '✓ Loaded brief: Maren Skin · 14 products · 7 avatars' }, { t: 1200, line: '→ Drafting hook (gpt-4o)…' }, { t: 2400, line: '✓ Hook: "Your moisturizer is making it worse."' }, { t: 2900, line: '→ Critic pass (claude-sonnet)…' }, { t: 4100, line: ' voice 9/10 · hook 9/10 · mechanism 8/10 · cta 9/10' }, { t: 4500, line: '→ Generating image (1024² · high)…' }, { t: 7200, line: '✓ Done in 6.4s · 4 credits · queued: 11' }, ]; const [phase, setPhase] = useS(0); useE(() => { let tid; const tick = (i) => { if (i >= STEPS.length) { tid = setTimeout(() => { setPhase(0); tick(0); }, 3500); return; } setPhase(i); tid = setTimeout(() => tick(i + 1), (STEPS[i + 1]?.t || STEPS[i].t + 1500) - STEPS[i].t); }; tick(0); return () => clearTimeout(tid); }, []); return (
{/* Window chrome */}
maren-skin · build · angle 03 of 20
LIVE
{/* Terminal pane */}
{STEPS.slice(0, phase + 1).map((s, i) => { const isLast = i === phase; const c = s.line.startsWith('✓') ? 'var(--accent)' : s.line.startsWith('→') ? 'var(--text)' : s.line.startsWith('$') ? 'var(--text-3)' : s.line.startsWith(' ') ? 'var(--text-3)' : 'var(--text-2)'; return (
{s.line} {isLast && i < STEPS.length - 1 && ( )}
); })} {/* Footer status row */}
credits 214 queue 11 this run 6.4s
{/* Ad output pane */}
HOOK · STAT
= 6 ? 1 : 0.15, transition: 'opacity 600ms', }}>
Approve ↺ Rerun ✨ Edit
); } // ── Logos / social proof strip ─────────────────────────────────────────── function ProofStrip() { const brands = ['Maren', 'Foldwell', 'Northkit', 'Loamy', 'Halverson', 'Pebble & Co.', 'Thirdshore']; return (
Used by 1,400+ DTC brands and operators
{brands.map(b => ( {b} ))}
); } // ── Founder story ──────────────────────────────────────────────────────── function FounderStory() { return (
From the founder {/* Founder portrait */}
Cyrus Vakil
Cyrus Vakil
Founder · 19 yr/old engineer & marketer
{[ // Instagram — clean Lucide-style: rounded square + lens circle + flash dot { href: 'https://www.instagram.com/thecyrusvakil/', label: 'Instagram', svg: <> }, // YouTube — rounded badge + play triangle { href: 'https://www.youtube.com/@thecyrusvakil', label: 'YouTube', svg: <> }, // X (Twitter) — actual X logo path, filled stylized strokes { href: 'https://x.com/cyrus_vakil', label: 'X', svg: }, ].map(s => ( { e.currentTarget.style.color = 'var(--accent)'; e.currentTarget.style.borderColor = 'var(--accent)'; }} onMouseLeave={e => { e.currentTarget.style.color = 'var(--text-2)'; e.currentTarget.style.borderColor = 'var(--border)'; }} > {s.svg} ))}

I started running Meta ads because I had to make my own brands work. After spending thousands testing products, creatives, funnels, and landing pages, one thing became obvious: the ad is usually the bottleneck.

Every AI tool I tried made the same generic ads. Big claims, weak hooks, fake-sounding copy, and no real understanding of the product, customer, or angle. It could write words, but it couldn't think like someone who had actually spent money testing ads and watching what failed.

So I built Prnting.ai around the workflow I wanted myself. It takes in your site, product, and brand context, builds a real creative brief, finds angles worth testing, writes the ads, critiques them, and rewrites the weak ones before you waste budget on them.

It is not meant to replace taste. It is meant to give builders a faster way to turn real product context into ads that are actually worth testing.

); } // ── How it works ───────────────────────────────────────────────────────── function HowItWorks() { const steps = [ { n: 1, title: 'Drop in your docs and website.', body: 'Paste a URL, upload brand guidelines, anything you have. We crawl, extract, and classify.', mock: , }, { n: 2, title: 'We build the brief and surface 20 angles.', body: 'Avatars, pains, desires, proof points, voice. Plus 20 testing angles grouped by funnel stage and rooted in real customer language.', mock: , }, { n: 3, title: 'Generate dozens of ads with one click.', body: 'Pick angles, pick formats, hit Generate all. Each ad is critiqued by a second AI before it lands in your library.', mock: , }, ]; return (
How it works

From cold URL to running ads in under{' '} two minutes.

{steps.map((s, i) => (
STEP {String(s.n).padStart(2, '0')}

{s.title}

{s.body}

{s.mock}
))}
); } function Step1Mock() { const lines = [ { c: 'var(--accent)', t: '✓ marenskin.com fetched · 14ms' }, { c: 'var(--text-2)', t: '→ /products · found 14 SKUs' }, { c: 'var(--text-2)', t: '→ /about · extracting voice…' }, { c: 'var(--accent)', t: '✓ 7 avatars identified' }, { c: 'var(--text-2)', t: '→ /faq · pulling proof points' }, { c: 'var(--text-3)', t: ' scraping reviews (2,341)' }, { c: 'var(--accent)', t: '✓ palette: 4 colors · 2 fonts' }, ]; return (
https://marenskin.com
● crawling
{lines.map((l, i) => (
{l.t}
))}
); } function Step2Mock() { const angles = [ { stage: 'TOFU', pain: 'Spent $400 on serums and looks worse.' }, { stage: 'TOFU', pain: 'Doesn\'t want a 12-step routine.' }, { stage: 'MOFU', pain: 'Tried "natural" brands, broke out worse.' }, { stage: 'MOFU', pain: 'Quietly skeptical of clean-beauty claims.' }, { stage: 'BOFU', pain: 'On the fence — needs a 30-day case.' }, ]; return (
20 angles
{angles.map((a, i) => (
{i === 1 ? '✓' : ''} {a.pain}
))}
+ 15 more
); } function Step3Mock() { return (
Generating · 8 selected 5 of 8 done
{[ { p: 'sage', s: 'done' }, { p: 'blush', s: 'done' }, { p: 'sand', s: 'done' }, { p: 'rose', s: 'done' }, { p: 'cream', s: 'done' }, { p: 'moss', s: 'gen' }, { p: 'citrus', s: 'gen' }, { p: 'night', s: 'queue' }, ].map((it, i) => (
{it.s !== 'queue' && ( )}
{it.s === 'gen' && (
)} {it.s === 'queue' && (
queued
)}
))}
); } // ── Model roster ───────────────────────────────────────────────────────── function ModelRoster() { const images = [ { name: 'GPT Image 2', tag: 'OpenAI' }, { name: 'Nano Banana Pro', tag: 'Gemini 3' }, { name: 'Nano Banana Flash', tag: 'Gemini 3' }, { name: 'Nano Banana 2.5', tag: 'Gemini 3' }, { name: 'Imagen 4', tag: 'Google' }, { name: 'Imagen 4 Fast', tag: 'Google' }, { name: 'Imagen 4 Ultra', tag: 'Google' }, ]; const videos = [ { name: 'Sora 2', tag: 'OpenAI' }, { name: 'Sora 2 Pro', tag: 'OpenAI' }, { name: 'Veo 3.1', tag: 'Google' }, { name: 'Veo 3.1 Fast', tag: 'Google' }, { name: 'Veo 3.1 Lite', tag: 'Google' }, { name: 'Veo 3', tag: 'Google' }, { name: 'Veo 3 Fast', tag: 'Google' }, { name: 'Veo 2', tag: 'Google' }, { name: 'Seedance 2.0', tag: 'ByteDance', highlight: true }, { name: 'Seedance 2.0 Fast',tag: 'ByteDance', highlight: true }, ]; const ModelChip = ({ name, tag, highlight }) => (
{name} {tag}
); return (
Model catalog

Every top model.{' '} One subscription.

Generate ad-ready images and video with the best models on the market — then use the research → angles → copy → images ad generator to turn your brand into a full creative pipeline. Finish with the image → video workflow to animate your best stills into scroll-stopping ads.

{/* Image models */}
Images
{images.map(m => )}
{/* Video models */}
Video
{videos.map(m => )}
); } // ── Powered-by strip (real social proof: the labs behind the models) ─────── function PoweredByModels() { const ImgIcon = ({ s = 22 }) => ( ); const VidIcon = ({ s = 22 }) => ( ); const Icon = ({ t, s }) => t === 'image' ? : ; const models = [ { n: 'GPT Image 2', t: 'image', d: 'Photoreal images from a single line of text.' }, { n: 'Nano Banana Pro', t: 'image', badge: 'NEW', d: 'Sharp, on-brand visuals in seconds.' }, { n: 'Imagen 4 Ultra', t: 'image', d: 'Ultra-detailed, studio-grade renders.' }, { n: 'Seedance 2.0', t: 'video', badge: 'TRENDING', d: 'Cinematic video from a still or a prompt.' }, { n: 'Sora 2 Pro', t: 'video', d: 'High-fidelity video, up to 1080p.' }, { n: 'Veo 3.1', t: 'video', badge: 'NEW', d: 'Native audio, with start and end frames.' }, ]; const more = ['Sora 2', 'Seedance 2.0 Fast', 'Veo 3.1 Fast', 'Veo 3.1 Lite', 'Veo 3', 'Veo 3 Fast', 'Veo 2', 'Nano Banana Flash', 'Nano Banana 2.5', 'Imagen 4', 'Imagen 4 Fast']; return (
Every frontier model

The world's best{' '} image & video{' '} models. One studio.

The models the best studios fight over — together, on a single bill.

{models.map(m => (
{m.badge === 'TRENDING' ? TRENDING : m.badge === 'NEW' ? NEW : {m.t === 'image' ? 'Image' : 'Video'}}
{m.n}
{m.d}
))}
Plus {more.join(' · ')}
); } // ── The brain: animated direct-response knowledge graph (Obsidian-style) ──── function BrainGraph() { const ref = React.useRef(null); React.useEffect(() => { const canvas = ref.current; if (!canvas) return; const ctx = canvas.getContext('2d'); let raf, w, h, dpr; const TAU = Math.PI * 2; // tier 0 = research hub · tier 1 = core DR concepts · tier 2 = source/sub layer const core = ['Avatars', 'Mass Desire', 'Angles', 'UMP / UMS', 'Awareness', 'Offer Stack', 'Voice of Customer', 'Hooks', 'Objections']; const outer = ['Reviews', 'Competitors', 'Belief → Bridge', 'Schwartz Stages', 'Proof', 'Pain Points', 'Specificity', 'Mechanism Test']; const nodes = [{ id: 'hub', label: 'Research', tier: 0 }]; core.forEach((label, i) => nodes.push({ id: 'c' + i, label, tier: 1, ring: 0.255, ang: (i / core.length) * TAU - Math.PI / 2 })); outer.forEach((label, i) => nodes.push({ id: 'o' + i, label, tier: 2, ring: 0.43, ang: (i / outer.length) * TAU - Math.PI / 2 + 0.32 })); const byId = {}; nodes.forEach((n, i) => { n.phase = i * 1.3; byId[n.id] = n; }); const edges = []; core.forEach((_, i) => { edges.push(['hub', 'c' + i]); edges.push(['c' + i, 'c' + ((i + 1) % core.length)]); }); outer.forEach((_, i) => { edges.push(['o' + i, 'c' + Math.floor(i * core.length / outer.length)]); if (i % 2 === 0) edges.push(['o' + i, 'hub']); }); function resize() { dpr = Math.min(window.devicePixelRatio || 1, 2); const rect = canvas.getBoundingClientRect(); w = rect.width; h = rect.height; canvas.width = w * dpr; canvas.height = h * dpr; ctx.setTransform(dpr, 0, 0, dpr, 0, 0); } resize(); window.addEventListener('resize', resize); const start = performance.now(); function pos(n, t) { if (n.tier === 0) return { x: 0.5 * w + Math.sin(t * 0.0004) * 0.004 * w, y: 0.5 * h + Math.cos(t * 0.0004) * 0.004 * h, depth: 1 }; const rot = t * 0.00003 * (n.tier === 2 ? -1 : 1); // rings counter-rotate const breathe = 1 + Math.sin(t * 0.0006 + n.phase) * 0.02; const a = n.ang + rot, rx = n.ring * breathe, ry = n.ring * 0.84 * breathe; return { x: (0.5 + Math.cos(a) * rx) * w, y: (0.5 + Math.sin(a) * ry) * h, depth: n.tier === 2 ? 0.66 : 1 }; } function draw(now) { const t = now - start; ctx.clearRect(0, 0, w, h); edges.forEach(([a, b], i) => { const pa = pos(byId[a], t), pb = pos(byId[b], t); const al = 0.16 * Math.min(pa.depth, pb.depth); const grad = ctx.createLinearGradient(pa.x, pa.y, pb.x, pb.y); grad.addColorStop(0, 'rgba(59,196,209,' + al + ')'); grad.addColorStop(1, 'rgba(67,97,238,' + al + ')'); ctx.strokeStyle = grad; ctx.lineWidth = 1; ctx.beginPath(); ctx.moveTo(pa.x, pa.y); ctx.lineTo(pb.x, pb.y); ctx.stroke(); const prog = (t * 0.00016 + i * 0.07) % 1; ctx.fillStyle = 'rgba(123,240,255,' + (0.8 * Math.min(pa.depth, pb.depth)) + ')'; ctx.beginPath(); ctx.arc(pa.x + (pb.x - pa.x) * prog, pa.y + (pb.y - pa.y) * prog, 1.7, 0, TAU); ctx.fill(); }); nodes.slice().sort((a, b) => (b.tier || 0) - (a.tier || 0)).forEach(n => { // outer first, hub last const p = pos(n, t); const pulse = 0.5 + 0.5 * Math.sin(t * 0.0014 + n.phase); const baseR = n.tier === 0 ? 9 : n.tier === 1 ? 5.5 : 4; const R = baseR + pulse * 1.3 * p.depth; const g = ctx.createRadialGradient(p.x, p.y, 0, p.x, p.y, R * 4.6); g.addColorStop(0, n.tier === 0 ? 'rgba(67,97,238,0.55)' : 'rgba(59,196,209,' + (0.35 * p.depth) + ')'); g.addColorStop(1, 'rgba(59,196,209,0)'); ctx.fillStyle = g; ctx.beginPath(); ctx.arc(p.x, p.y, R * 4.6, 0, TAU); ctx.fill(); ctx.globalAlpha = p.depth; ctx.fillStyle = n.tier === 0 ? '#4361EE' : '#3BC4D1'; ctx.beginPath(); ctx.arc(p.x, p.y, R, 0, TAU); ctx.fill(); ctx.font = (n.tier === 0 ? '600 15' : n.tier === 1 ? '500 12.5' : '500 11') + 'px Geist, system-ui, sans-serif'; ctx.fillStyle = n.tier === 0 ? '#F4F6FB' : 'rgba(195,201,214,' + (0.55 + 0.45 * p.depth) + ')'; ctx.textAlign = 'center'; ctx.textBaseline = 'top'; ctx.fillText(n.label, p.x, p.y + R + 5); ctx.globalAlpha = 1; }); raf = requestAnimationFrame(draw); } raf = requestAnimationFrame(draw); return () => { cancelAnimationFrame(raf); window.removeEventListener('resize', resize); }; }, []); return ; } function BrainSection() { return (
The brain

Not a prompt.{' '} A marketing brain.

Generic AI guesses. Prnting.ai runs every brief through a curated brain of direct-response marketing — avatars, mass desire, unique mechanisms, voice-of-customer, awareness stages — the same system used to spend real money on ads that win. The copy reads like a marketer wrote it, because the thinking did.

); } // ── Format library ─────────────────────────────────────────────────────── function FormatLibrary() { const formats = [ { stage: 'TOFU', name: 'Hook · Stat', desc: 'Lead with a specific, surprising number.' }, { stage: 'TOFU', name: 'Pattern Interrupt', desc: 'Contradict the category default.' }, { stage: 'TOFU', name: 'Quiet Confession', desc: 'First-person, awkwardly specific.' }, { stage: 'MOFU', name: 'Mechanism', desc: 'Why it works, in one diagram.' }, { stage: 'MOFU', name: 'Review Stitch', desc: 'Three customer quotes, one frame.' }, { stage: 'MOFU', name: 'Hero Comparison', desc: 'You vs the leader. Cite specifics.' }, { stage: 'BOFU', name: 'Risk Reversal', desc: 'Money back, named conditions.' }, { stage: 'BOFU', name: 'Bundle Math', desc: 'Show the per-unit savings.' }, { stage: 'BOFU', name: 'Last Objection', desc: 'Name the doubt, answer it cold.' }, ]; const [filter, setFilter] = useS('All'); const filtered = filter === 'All' ? formats : formats.filter(f => f.stage === filter); const counts = formats.reduce((a, f) => (a[f.stage] = (a[f.stage] || 0) + 1, a), {}); return (
Format library

Battle-tested ad formats for every funnel stage.

{['All', 'TOFU', 'MOFU', 'BOFU'].map(f => ( ))}
{filtered.map((f, i) => (
{String(i + 1).padStart(2, '0')}
{f.name}
{f.desc}
 ))}
); } // ── Sample ads ─────────────────────────────────────────────────────────── function SampleAds() { const ads = [ { p: 'sage', h: 'Your moisturizer is making it worse.', s: '73% of post-30 breakouts are barrier issues.', stage: 'MOFU', score: 9 }, { p: 'blush', h: 'Stop layering. Start replacing.', s: '12-step routines fail 4 out of 5 buyers.', stage: 'TOFU', score: 9 }, { p: 'cream', h: 'I sold the rest of my routine.', s: 'Founder · 38 · Brooklyn', stage: 'MOFU', score: 8 }, { p: 'moss', h: 'The serum that pays for the others.', s: 'Bundle math: $74 → $148 of value.', stage: 'BOFU', score: 9 }, { p: 'rose', h: 'Clean beauty failed me twice.', s: 'Then I read the back of the bottle.', stage: 'TOFU', score: 9 }, { p: 'sand', h: 'Made for skin that\'s been through it.', s: '30-day guarantee. No restocking fee.', stage: 'BOFU', score: 9 }, ]; return (
Sample output

The work speaks for itself.

Real generations from a Maren Skin test brand. Copy, image, and critique all generated in under 7 seconds per ad.

Try it on your brand →
{ads.map((a, i) => (
))}
); } // ── Pricing ────────────────────────────────────────────────────────────── function Pricing() { const tiers = [ { name: 'Starter', price: 24.99, credits: 500, tag: 'Solo founders testing creative', features: ['500 credits / mo', 'All image models', 'All video models', 'Image → video ad workflow', 'CSV export'], cta: 'Get started', }, { name: 'Pro', price: 49.99, credits: 1200, popular: true, tag: 'Operators shipping ads weekly', features: ['1,200 credits / mo', 'Everything in Starter', 'AI ad generator (research → angles → copy → images)', 'Side-by-side compare', 'Priority generation queue'], cta: 'Get started', }, { name: 'Studio', price: 99.99, credits: 2800, tag: 'Teams running creative at volume', features: ['2,800 credits / mo', 'Everything in Pro', 'Workspace roles', 'Brand voice profiles', 'White-label PDF reports'], cta: 'Get started', }, ]; return (
Pricing

Pay for output, not per seat.

Credits cover every model — image, video, and ad generation. Cancel any time.

{tiers.map(t => (
{t.popular && ( POPULAR )}
{t.name}
{t.tag}
${t.price.toFixed(2)} /mo
{t.credits.toLocaleString()} credits / mo
    {t.features.map(f => (
  • {f}
    • ))}
{t.cta}
))}
); } // ── FAQ ────────────────────────────────────────────────────────────────── function FAQ() { const items = [ { q: 'How does it actually work?', a: 'You give us a URL and any brand docs. We crawl your site, extract products and voice, mine your reviews, and build a brief. From the brief we generate 20 testing angles. You pick what to run; we draft copy, critique it, regenerate weak parts, and produce the image.' }, { q: 'Will it sound like my brand?', a: 'Yes — we extract your voice from your existing copy and reviews before generating anything. Every ad is critiqued on a "voice" axis and rewritten if it scores below 7/10.' }, { q: 'What does it cost per ad?', a: 'A standard ad on Operator runs ~$0.12 — that\'s 4 credits for copy, critique, and a high-quality square image. Higher-quality images cost more credits; copy-only generations cost less.' }, { q: 'Can I edit what it generates?', a: 'Every field is inline-editable. There\'s also an AI-edit popover on every text field — say "punchier" or "shorter" and it rewrites just that field for ~1 credit.' }, { q: 'How is this different from a ChatGPT prompt?', a: 'Three things: a brand brief built from your real site (not "imagine you sell skincare"), a 20-angle library rooted in your customer language, and a critic pass that catches the slop before you see it.' }, { q: 'Do you train on my data?', a: 'No. Your brand brief, ads, and uploads are stored encrypted, used only for your account, and deleted on request. We don\'t fine-tune on customer data.' }, { q: 'Can I export to Meta Ads Manager?', a: 'Yes. Library has multi-select export to a Meta-formatted CSV: headline, primary text, description, CTA, image URL, per row.' }, { q: 'What if I\'m an agency with 8 brands?', a: 'Studio is built for you. 15 brands in one workspace, pooled credits, white-label PDF reports for client review, role-based permissions.' }, ]; const [open, setOpen] = useS(0); return (
FAQ

Questions performance marketers ask first.

Still on the fence? Email{' '} support@prnting.ai{' '} — replies usually under 4 hours.

{items.map((it, i) => { const isOpen = open === i; return ( ); })}
); } // ── Final CTA + Footer ─────────────────────────────────────────────────── function FinalCTA() { return (

Stop fixing AI slop.
Start shipping ads.

30 free credits. No card. Generate your first 8 ads in the next 5 minutes.

Start free trial → Book a 15-min walkthrough
); } function Footer() { return ( ); } Object.assign(window, { Nav, Hero, ProofStrip, FounderStory, HowItWorks, ModelRoster, FormatLibrary, SampleAds, Pricing, FAQ, FinalCTA, Footer, });