// sections.jsx — landing page sections for Ultemir 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. const APP_URL = 'https://app.ultemir.com'; const FOUNDER_EMAIL = 'cyrusvakil@ultemir.com'; // ── 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: '$ ultemir 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 Ultemir 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.

WHAT'S DIFFERENT Ultemir does not just generate copy. It researches, writes, scores, and improves every ad so you can spend less time fixing AI slop and more time testing creatives.
); } // ── 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
)}
))}
); } // ── 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: 'TOFU', name: 'Founder POV', desc: 'Direct camera, story-mode.' }, { stage: 'TOFU', name: 'Side-by-Side', desc: 'Yours vs theirs, no waffle.' }, { stage: 'TOFU', name: 'Mythbust', desc: 'Frame the wrong belief, flip it.' }, { stage: 'TOFU', name: 'Listicle Top', desc: '"3 things people get wrong about ___."' }, { stage: 'TOFU', name: 'Cold Demo', desc: 'Product on camera, no music, no edit.' }, { 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: 'Founder Reply', desc: 'Reply to a real comment.' }, { stage: 'MOFU', name: 'Hero Comparison', desc: 'You vs the leader. Cite specifics.' }, { stage: 'MOFU', name: 'Build Story', desc: 'How we engineered it, told tightly.' }, { stage: 'MOFU', name: 'Spec Sheet', desc: 'Mono-styled facts, no fluff.' }, { stage: 'MOFU', name: 'Editorial Photo', desc: 'Moodboard with one strong claim.' }, { stage: 'BOFU', name: 'Risk Reversal', desc: 'Money back, named conditions.' }, { stage: 'BOFU', name: 'Bundle Math', desc: 'Show the per-unit savings.' }, { stage: 'BOFU', name: 'Scarcity Honest', desc: 'A real reason, not a fake clock.' }, { stage: 'BOFU', name: 'Social Stack', desc: 'Press logos + 3 stats above the fold.' }, { 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

20 battle-tested formats, grouped by 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: 'Solo', price: 19, credits: 200, tag: 'For 1 brand, 1 founder', features: ['1 brand · 200 credits/mo', 'All 20 formats', 'Image + copy generation', 'Critic pass on every ad', 'CSV export'], cta: 'Start free trial', }, { name: 'Operator', price: 49, credits: 600, popular: true, tag: 'Most teams pick this', features: ['3 brands · 600 credits/mo', 'Everything in Solo', 'Side-by-side compare', 'Library multi-select export', 'Priority generation queue', 'Slack notifications'], cta: 'Start free trial', }, { name: 'Studio', price: 149, credits: 2000, tag: 'Agencies, 3-15 brands', features: ['15 brands · 2,000 credits/mo', 'Everything in Operator', 'Workspace roles', 'Brand voice profiles', 'White-label PDF reports', 'Webhooks'], cta: 'Start free trial', }, { name: 'Scale', price: 'Custom', credits: 'Pooled', tag: 'In-house perf teams', features: ['Unlimited brands', 'Pooled credits across team', 'API access', 'Custom format library', 'Dedicated CSM', 'SOC 2 + DPA'], cta: 'Talk to founder', }, ]; const [annual, setAnnual] = useS(true); return (
Pricing

Pay for ads, not per seat.

Credits cover copy + image + critique. ~$0.12/ad on Operator.

{[['Monthly', false], ['Annual · save 20%', true]].map(([l, v]) => ( ))}
{tiers.map(t => { const price = typeof t.price === 'number' ? Math.round(t.price * (annual ? 0.8 : 1)) : t.price; return (
{t.popular && ( POPULAR )}
{t.name}
{t.tag}
{typeof price === 'number' ? ( <> ${price} /mo ) : ( {price} )}
{typeof t.credits === 'number' ? `${t.credits.toLocaleString()} credits / mo` : `${t.credits} credits`}
    {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{' '} cyrusvakil@ultemir.com{' '} — 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, FormatLibrary, SampleAds, Pricing, FAQ, FinalCTA, Footer, });