Nerdy Romeo — how this site was built

A conversion-first one-pager for Steven's dating-coaching brand, built in the design DNA of top coach-for-men sales pages: warm cream/white/navy bands, heavy tight-tracked headings, one royal-blue CTA color, flat surfaces, restrained motion.

Concept

A long-form sales letter disguised as a modern one-pager. Every band carries exactly one idea and walks a skeptical reader from pain → method → proof → fit → booked call. The "Nerdy Romeo" identity lives in a custom glasses-with-heart mark, echoed as a giant watermark in the hero.

Techniques

• Design DNA extraction (computed-style harvest) from a leading dating-coach site: palette, type scale, spacing rhythm, motion budget.
• Dual-font brand story: Montserrat 800 ("nerd") headlines with Fraunces italic ("Romeo") accent words — the brand duality expressed in type.
• Hero canvas of drifting hearts + math glyphs (vanilla 2D canvas, DPR-capped, paused when tab hidden, off under reduced-motion).
• Masked line reveals on the headline, staggered IntersectionObserver section reveals, marker-sweep text highlights, watermark parallax, infinite CSS marquee, ghost outline step numerals, 3D hover tilt on the video frame.
• Zero JS libraries — everything above is vanilla, gated behind an html.js class with prefers-reduced-motion and ?noanim overrides.
• Lite YouTube embed: thumbnail facade, iframe injected only on click — fast paint, no third-party JS on load.
• Native <details> FAQ accordion; text-wrap:balance headlines; clamp() fluid type; inline SVG logo mark; grain-texture overlays; mobile sticky CTA bar.
• Honesty by design: dashed testimonial and photo slots that stay visibly empty until real content exists — no fabricated proof.

Assets

• Logo/watermark: hand-written inline SVG (no generator).
• Video thumbnail: served by YouTube from Steven's real video.
• Illustrations (hero + 3 method spots): AI-generated via Higgsfield (nano-banana), prompted as flat mid-century editorial vector art locked to the site palette. Clearly illustrations — no photorealistic depictions of Steven or clients.

Recreate a site like this

Build a one-page conversion site for a [niche] coach. DNA: warm cream (#f3f0eb),
white and navy (#10315b) full-width bands, one idea per band; Montserrat 800
headings with -0.03em tracking; body 20px/1.6 in a system stack; one royal-blue
(#063bb3) accent reserved for CTAs and highlighted phrases; flat — no shadows,
gradients, or cards; motion limited to 0.3–0.5s ease hovers and gentle scroll
reveals. Sections: question-hook hero, pain checklist, 3-step method, real video
embed via thumbnail facade, honest empty testimonial slots, about, NOT-for/FOR
filter, native-details FAQ, navy final-CTA band. Booking links placeholder #book.
Never invent testimonials, stats, or press logos.

← Back to the site