// Inkly landing page sections. const PROOF_TILES = [ { glyph: 'mountain', style: 'Fine-line', aspect: 1.0, hint: 'Mountain range' }, { glyph: 'rose', style: 'Traditional', aspect: 1.35, hint: 'American rose' }, { glyph: 'snake', style: 'Blackwork', aspect: 0.85, hint: 'Coiled serpent' }, { glyph: 'moth', style: 'Neo-trad', aspect: 1.15, hint: 'Death\u2019s-head moth' }, { glyph: 'wave', style: 'Japanese', aspect: 1.0, hint: 'Great wave' }, { glyph: 'eye', style: 'Geometric', aspect: 1.25, hint: 'Watching eye' }, { glyph: 'dagger', style: 'Traditional', aspect: 1.4, hint: 'Through the heart' }, { glyph: 'swallow', style: 'Fine-line', aspect: 0.9, hint: 'Single swallow' }, { glyph: 'heart', style: 'Watercolour', aspect: 1.0, hint: 'Sacred heart' }, { glyph: 'hand', style: 'Blackwork', aspect: 1.3, hint: 'Hamsa hand' }, { glyph: 'sun', style: 'Neo-trad', aspect: 1.0, hint: 'Smiling sun' }, { glyph: 'anchor', style: 'Geometric', aspect: 1.2, hint: 'Steady anchor' }, ]; const STYLES = [ { key: 'fine-line', glyph: 'swallow', name: 'Fine-line', desc: 'Minimalist single-needle work' }, { key: 'traditional', glyph: 'rose', name: 'Traditional', desc: 'Bold lines, classic flash' }, { key: 'blackwork', glyph: 'snake', name: 'Blackwork', desc: 'Heavy ink, high contrast' }, { key: 'watercolour', glyph: 'heart', name: 'Watercolour', desc: 'Soft washes, painterly edges' }, { key: 'neo-trad', glyph: 'moth', name: 'Neo-trad', desc: 'Traditional shapes, modern palette' }, { key: 'geometric', glyph: 'eye', name: 'Geometric', desc: 'Linework, symmetry, sacred forms' }, { key: 'japanese', glyph: 'wave', name: 'Japanese', desc: 'Irezumi flow and storytelling' }, ]; // ───────────────────────────── Reveal-on-scroll wrapper ───────────────────────────── const Reveal = ({ children, delay = 0, duration = 700, as: As = 'div', className = '', once = true }) => { const ref = React.useRef(null); const [shown, setShown] = React.useState(true); React.useEffect(() => { if (!ref.current) return; const reduce = window.matchMedia && window.matchMedia('(prefers-reduced-motion: reduce)').matches; if (reduce) { setShown(true); return; } setShown(false); const fallback = setTimeout(() => setShown(true), 120 + delay); if (typeof IntersectionObserver === 'undefined') { return () => clearTimeout(fallback); } const io = new IntersectionObserver((entries) => { entries.forEach(e => { if (e.isIntersecting) { setShown(true); clearTimeout(fallback); if (once) io.disconnect(); } else if (!once) { setShown(false); } }); }, { threshold: 0.05 }); io.observe(ref.current); return () => { clearTimeout(fallback); io.disconnect(); }; }, [once, delay]); return ( {children} ); }; // ───────────────────────────── Email form ───────────────────────────── const EmailForm = ({ accent, onSuccess, variant = 'hero', count }) => { const [email, setEmail] = React.useState(''); const [state, setState] = React.useState('idle'); // idle | error | submitting | done const [msg, setMsg] = React.useState(''); const submit = async (e) => { e.preventDefault(); const v = email.trim(); const ok = /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(v); if (!ok) { setState('error'); setMsg('Enter a valid email.'); return; } setState('submitting'); setMsg(''); try { const res = await fetch('/api/subscribe', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ email: v }), }); if (!res.ok) throw new Error('Subscription failed'); setState('done'); onSuccess && onSuccess(v); } catch (err) { setState('error'); setMsg('Something went wrong. Try again.'); } }; if (state === 'done') { return ; } return (
{ setEmail(e.target.value); if (state === 'error') setState('idle'); }} className="flex-1 min-w-0 h-[52px] sm:h-[56px] px-4 bg-transparent border border-[#2a2a2a] sm:border-r-0 text-[#F5F5F5] placeholder-[#6b6b6b] outline-none focus:border-[#5a5a5a] transition-colors text-[16px] tracking-[0.01em]" aria-invalid={state === 'error'} />
{state === 'error' ? ( {msg} ) : ( <> Join {count - 1}+ on the early access list · One email. When it's ready. That's it. )}
); }; // ───────────────────────────── Success state (viral) ───────────────────────────── const SuccessState = ({ accent, count, email }) => { const [copied, setCopied] = React.useState(false); const shareUrl = 'https://inkly.pics/?ref=' + encodeURIComponent((email || '').split('@')[0] || 'friend'); const shareText = "I just joined Inkly — AI tattoo designs in 30 seconds. Get on the early access list:"; const tweetHref = `https://twitter.com/intent/tweet?text=${encodeURIComponent(shareText)}&url=${encodeURIComponent(shareUrl)}`; const copy = async () => { try { await navigator.clipboard.writeText(shareUrl); setCopied(true); setTimeout(() => setCopied(false), 1800); } catch { setCopied(true); setTimeout(() => setCopied(false), 1800); } }; return (
You're #{count} on the list.
Move up the line — share Inkly with one friend and we'll bump you up 10 places.
Share on X
); }; // ───────────────────────────── Counter ───────────────────────────── const useCounter = (initial = 200) => { const [n, setN] = React.useState(initial); const bump = () => setN((v) => v + 1); return [n, bump]; }; // ───────────────────────────── Hero ───────────────────────────── const Hero = ({ accent, ambient, count, onJoin, launchLabel }) => { const Ambient = window.AMBIENTS[ambient] || window.AMBIENTS.mountain; return (
{/* Ambient illustration */} {/* Top bar */}
Inkly Pre-launch
Launching {launchLabel}
{/* Hero body */}
AI tattoo design generator · For people getting tattooed
Founder pricing $9/mo locked forever — {Math.max(0, 200 - count)} of 200 spots left

Generate your perfect tattoo before you commit to it forever.

Type your idea. Pick a style. Six designs in thirty seconds.

Early access opens {launchLabel}
{/* Mobile mini-preview: 3 sample tiles below the form, above the fold */}
{[ { glyph: 'mountain', label: 'Fine-line' }, { glyph: 'rose', label: 'Traditional' }, { glyph: 'snake', label: 'Blackwork' }, ].map((p, i) => { const G = window.GLYPHS[p.glyph]; return (
); })}
↓ 12 examples below
{/* Soft fade into next section */}
); }; // ───────────────────────────── Proof gallery ───────────────────────────── const ProofTile = ({ tile, idx }) => { const Glyph = window.GLYPHS[tile.glyph]; const [hover, setHover] = React.useState(false); return (
setHover(true)} onMouseLeave={() => setHover(false)} >
{/* Hover overlay (desktop only via CSS) */}
{tile.style} {tile.hint}
{tile.style}
{tile.style}
 ); }; const ProofGallery = ({ accent }) => { return (
A few we made earlier

Generated by Inkly. Black ink, white background, ready for your artist.

Black ink on white, like real flash. No 3D, no AI mascots, no painterly noise.
{PROOF_TILES.map((t, i) => (
))}
); }; // ───────────────────────────── Problem ───────────────────────────── const ProblemCard = ({ num, title, sub, idx, emphasis = false, accent }) => (
{num}{emphasis ? ' — the expensive one' : ''}
{title}
{sub &&
{sub}
}
); const Problem = ({ accent }) => (
Why this exists
); // ───────────────────────────── How it works ───────────────────────────── const StepBubble = () => (
a fine-line mountain
range across my
forearm…
); const StepSwatches = () => { const items = [ { label: 'Fine-line', glyph: 'swallow' }, { label: 'Traditional', glyph: 'rose' }, { label: 'Blackwork', glyph: 'snake' }, { label: 'Geometric', glyph: 'eye' }, ]; return (
{items.map((s, i) => { const G = window.GLYPHS[s.glyph]; const selected = i === 0; return (
{s.label}
); })}
); }; const StepGrid = () => { const tiles = ['mountain', 'mountain', 'mountain', 'mountain', 'mountain', 'mountain']; return (
{tiles.map((g, i) => { const G = window.GLYPHS[g]; return (
); })}
); }; const HowStep = ({ n, title, sub, children, idx }) => (
{children}
Step {n}
{title}
{sub}
 ); const HowItWorks = ({ accent }) => (

Three steps. Thirty seconds.

How it works
); // ───────────────────────────── Styles preview ───────────────────────────── const StyleCard = ({ s, idx }) => { const G = window.GLYPHS[s.glyph]; return (
{s.name}
— {s.desc}
 ); }; const StylesPreview = ({ accent }) => (

Seven styles. Pick the one that's already on your moodboard.

Styles
{/* Edge-bleeding scroll on mobile, contained grid on desktop */}
{STYLES.map((s, i) => )}
); // ───────────────────────────── Secondary CTA ───────────────────────────── const SecondaryCTA = ({ accent, count, onJoin, city }) => (
Early access

Be first in line.

We're emailing the first 200 people on the waitlist before public launch. Currently {count} on the list.

★
Founder pricing — first 200 only
$19/mo $9/month, locked in forever.
Only for the first 200 emails on the list. {Math.max(0, 200 - count)} spots left.
Made by two people in {city}. Reply to any email — you'll get one of us.
); // ───────────────────────────── Footer ───────────────────────────── const Footer = ({ contactEmail = 'hello@inkly.pics' }) => ( ); Object.assign(window, { Hero, ProofGallery, Problem, HowItWorks, StylesPreview, SecondaryCTA, Footer, useCounter, });