<div class="not-prose relative my-12 overflow-hidden rounded-3xl border border-line bg-surface-1 shadow-sm p-6 md:p-10 reveal">
<div aria-hidden="true" class="absolute inset-0 opacity-70" style="background: radial-gradient(closest-side at 50% 50%, rgba(232,149,74,0.16), transparent 70%);"></div>
<div class="relative mb-6 flex items-center justify-between">
<div>
<p class="text-xs uppercase tracking-eyebrow text-copper-400">Enquiries per month</p>
<h3 class="mt-1 font-display text-lg text-default">From a quiet inbox to a booked week</h3>
</div>
<svg width="32" height="32" viewBox="0 0 32 32" class="text-copper-400/60" aria-hidden="true" fill="none" stroke="currentColor" stroke-width="1.5">
<rect x="2" y="6" width="28" height="23" rx="3"/>
<line x1="2" y1="13" x2="30" y2="13"/>
<line x1="9" y1="2" x2="9" y2="10" stroke-linecap="round"/>
<line x1="23" y1="2" x2="23" y2="10" stroke-linecap="round"/>
<rect x="6" y="17" width="4" height="4" rx="1" fill="currentColor" opacity="0.25" stroke="none"/>
<rect x="14" y="17" width="4" height="4" rx="1" fill="rgba(232,149,74,0.9)" stroke="none"/>
<rect x="22" y="17" width="4" height="4" rx="1" fill="rgba(232,149,74,0.85)" stroke="none"/>
<rect x="6" y="23" width="4" height="4" rx="1" fill="rgba(232,149,74,0.7)" stroke="none"/>
<rect x="14" y="23" width="4" height="4" rx="1" fill="currentColor" opacity="0.25" stroke="none"/>
<rect x="22" y="23" width="4" height="4" rx="1" fill="rgba(232,149,74,0.8)" stroke="none"/>
</svg>
</div>
<div class="relative grid grid-cols-2 gap-4 md:gap-8">
<div>
<p class="mb-3 font-mono text-[10px] uppercase tracking-[0.22em] text-muted">Before</p>
<div class="mb-2 grid grid-cols-5 gap-1 text-center">
<span class="text-[9px] uppercase text-muted">Mo</span>
<span class="text-[9px] uppercase text-muted">Tu</span>
<span class="text-[9px] uppercase text-muted">We</span>
<span class="text-[9px] uppercase text-muted">Th</span>
<span class="text-[9px] uppercase text-muted">Fr</span>
</div>
<div class="space-y-1">
<div class="grid grid-cols-5 gap-1">
<span class="h-4 rounded bg-overlay-2"></span><span class="h-4 rounded bg-overlay-2"></span><span class="h-4 rounded bg-overlay-2"></span><span class="h-4 rounded bg-overlay-2"></span><span class="h-4 rounded bg-overlay-2"></span>
</div>
<div class="grid grid-cols-5 gap-1">
<span class="h-4 rounded bg-overlay-2"></span><span class="h-4 rounded bg-copper-500/20 ring-1 ring-copper-500/25"></span><span class="h-4 rounded bg-overlay-2"></span><span class="h-4 rounded bg-overlay-2"></span><span class="h-4 rounded bg-overlay-2"></span>
</div>
<div class="grid grid-cols-5 gap-1">
<span class="h-4 rounded bg-overlay-2"></span><span class="h-4 rounded bg-overlay-2"></span><span class="h-4 rounded bg-overlay-2"></span><span class="h-4 rounded bg-overlay-2"></span><span class="h-4 rounded bg-overlay-2"></span>
</div>
<div class="grid grid-cols-5 gap-1">
<span class="h-4 rounded bg-overlay-2"></span><span class="h-4 rounded bg-overlay-2"></span><span class="h-4 rounded bg-overlay-2"></span><span class="h-4 rounded bg-overlay-2"></span><span class="h-4 rounded bg-overlay-2"></span>
</div>
</div>
<p class="mt-4 text-center font-display text-3xl text-muted">1</p>
<p class="text-center text-[10px] uppercase tracking-[0.18em] text-muted">per month</p>
</div>
<div>
<p class="mb-3 font-mono text-[10px] uppercase tracking-[0.22em] text-copper-400">After</p>
<div class="mb-2 grid grid-cols-5 gap-1 text-center">
<span class="text-[9px] uppercase text-muted">Mo</span>
<span class="text-[9px] uppercase text-muted">Tu</span>
<span class="text-[9px] uppercase text-muted">We</span>
<span class="text-[9px] uppercase text-muted">Th</span>
<span class="text-[9px] uppercase text-muted">Fr</span>
</div>
<div class="space-y-1">
<div class="grid grid-cols-5 gap-1">
<span class="h-4 rounded bg-copper-500/70"></span><span class="h-4 rounded bg-overlay-2"></span><span class="h-4 rounded bg-copper-500/80"></span><span class="h-4 rounded bg-overlay-2"></span><span class="h-4 rounded bg-copper-500/60"></span>
</div>
<div class="grid grid-cols-5 gap-1">
<span class="h-4 rounded bg-overlay-2"></span><span class="h-4 rounded bg-copper-500/90"></span><span class="h-4 rounded bg-overlay-2"></span><span class="h-4 rounded bg-copper-500/70"></span><span class="h-4 rounded bg-overlay-2"></span>
</div>
<div class="grid grid-cols-5 gap-1">
<span class="h-4 rounded bg-copper-500/60"></span><span class="h-4 rounded bg-copper-500/80"></span><span class="h-4 rounded bg-overlay-2"></span><span class="h-4 rounded bg-copper-500/70"></span><span class="h-4 rounded bg-copper-500/60"></span>
</div>
<div class="grid grid-cols-5 gap-1">
<span class="h-4 rounded bg-overlay-2"></span><span class="h-4 rounded bg-copper-500/70"></span><span class="h-4 rounded bg-copper-500/90"></span><span class="h-4 rounded bg-overlay-2"></span><span class="h-4 rounded bg-copper-500/80"></span>
</div>
</div>
<p class="mt-4 text-center font-display text-3xl text-gradient-copper">9</p>
<p class="text-center text-[10px] uppercase tracking-[0.18em] text-copper-400">per month</p>
</div>
</div>
<div class="relative mt-8 grid grid-cols-3 gap-6 border-t border-line pt-6 text-center">
<div>
<p class="font-display text-2xl leading-none text-gradient-copper">9×</p>
<p class="mt-2 text-xs uppercase tracking-eyebrow text-muted">More inquiries</p>
</div>
<div>
<p class="font-display text-2xl leading-none text-gradient-copper">Day 11</p>
<p class="mt-2 text-xs uppercase tracking-eyebrow text-muted">First client booked</p>
</div>
<div>
<p class="font-display text-2xl leading-none text-gradient-copper">6 days</p>
<p class="mt-2 text-xs uppercase tracking-eyebrow text-muted">Brief to live</p>
</div>
</div>
</div>
The challenge
The coach had invested in a professional Squarespace site two years earlier. It looked good. Traffic was steady — around 800 sessions a month from Instagram and a small email list. But the inquiry form returned one message a month, if that, and half of those were spam.
The numbers we started with:
- 800 sessions / month — the audience existed. They were just leaving.
- 1 inquiry / month — a 0.1% conversion rate on a page whose only job is to generate inquiries.
- Zero booking page. Interested visitors hit a contact form and waited.
- An offer buried three scrolls down, written for colleagues who already understood the methodology — not for the client who was wondering if it was worth clicking.
"I know something's wrong," she said in our first call. "The site looks nice. But it's not working."
The diagnosis was quick: the site was built to impress, not to convert. Every section described the coach. None of them named the client's problem.
Our one-week plan
<div class="not-prose relative my-12">
<div aria-hidden="true" class="pointer-events-none absolute left-6 right-6 top-[3.5rem] hidden h-px bg-gradient-to-r from-transparent via-copper-500/30 to-transparent md:block"></div>
<div class="relative grid gap-5 md:grid-cols-3">
<article class="reveal group relative overflow-hidden rounded-2xl border border-line bg-surface-2 p-6 transition-all duration-500 hover:-translate-y-2 hover:border-copper-500/50 hover:shadow-[0_24px_60px_-24px_rgba(232,149,74,0.35)]" style="transition-delay: 0ms;">
<div aria-hidden="true" class="absolute inset-x-0 top-0 h-px bg-gradient-to-r from-transparent via-copper-500/70 to-transparent opacity-60 transition-opacity group-hover:opacity-100"></div>
<span aria-hidden="true" class="pointer-events-none absolute -right-3 -top-5 select-none font-display text-[5.5rem] leading-none text-white/[0.04] transition-colors duration-500 group-hover:text-copper-500/15">01</span>
<div class="relative flex items-center gap-2">
<span class="relative flex h-2.5 w-2.5">
<span class="absolute inline-flex h-full w-full animate-ping rounded-full bg-copper-400 opacity-60"></span>
<span class="relative inline-flex h-2.5 w-2.5 rounded-full bg-copper-400"></span>
</span>
<span class="font-mono text-[10px] uppercase tracking-[0.22em] text-copper-400">Phase 01</span>
</div>
<p class="relative mt-5 text-xs uppercase tracking-eyebrow text-muted">Day 1–2</p>
<h3 class="relative mt-2 font-display text-lg leading-snug text-default">Strategy & copy</h3>
<p class="relative mt-3 text-sm leading-relaxed text-muted">Defined the single offer, wrote the full-page copy in DE and EN, and built the lead-magnet PDF in two working days.</p>
</article>
<article class="reveal group relative overflow-hidden rounded-2xl border border-line bg-surface-2 p-6 transition-all duration-500 hover:-translate-y-2 hover:border-copper-500/50 hover:shadow-[0_24px_60px_-24px_rgba(232,149,74,0.35)]" style="transition-delay: 120ms;">
<div aria-hidden="true" class="absolute inset-x-0 top-0 h-px bg-gradient-to-r from-transparent via-copper-500/70 to-transparent opacity-60 transition-opacity group-hover:opacity-100"></div>
<span aria-hidden="true" class="pointer-events-none absolute -right-3 -top-5 select-none font-display text-[5.5rem] leading-none text-white/[0.04] transition-colors duration-500 group-hover:text-copper-500/15">02</span>
<div class="relative flex items-center gap-2">
<span class="relative flex h-2.5 w-2.5">
<span class="absolute inline-flex h-full w-full animate-ping rounded-full bg-copper-400 opacity-60"></span>
<span class="relative inline-flex h-2.5 w-2.5 rounded-full bg-copper-400"></span>
</span>
<span class="font-mono text-[10px] uppercase tracking-[0.22em] text-copper-400">Phase 02</span>
</div>
<p class="relative mt-5 text-xs uppercase tracking-eyebrow text-muted">Day 3–4</p>
<h3 class="relative mt-2 font-display text-lg leading-snug text-default">Build</h3>
<p class="relative mt-3 text-sm leading-relaxed text-muted">New Astro site built from scratch — no template. Cal.com booking embed wired in. Lead-magnet form connected to the coach's own subscriber list.</p>
</article>
<article class="reveal group relative overflow-hidden rounded-2xl border border-line bg-surface-2 p-6 transition-all duration-500 hover:-translate-y-2 hover:border-copper-500/50 hover:shadow-[0_24px_60px_-24px_rgba(232,149,74,0.35)]" style="transition-delay: 240ms;">
<div aria-hidden="true" class="absolute inset-x-0 top-0 h-px bg-gradient-to-r from-transparent via-copper-500/70 to-transparent opacity-60 transition-opacity group-hover:opacity-100"></div>
<span aria-hidden="true" class="pointer-events-none absolute -right-3 -top-5 select-none font-display text-[5.5rem] leading-none text-white/[0.04] transition-colors duration-500 group-hover:text-copper-500/15">03</span>
<div class="relative flex items-center gap-2">
<span class="relative flex h-2.5 w-2.5">
<span class="absolute inline-flex h-full w-full animate-ping rounded-full bg-copper-400 opacity-60"></span>
<span class="relative inline-flex h-2.5 w-2.5 rounded-full bg-copper-400"></span>
</span>
<span class="font-mono text-[10px] uppercase tracking-[0.22em] text-copper-400">Phase 03</span>
</div>
<p class="relative mt-5 text-xs uppercase tracking-eyebrow text-muted">Day 5–6</p>
<h3 class="relative mt-2 font-display text-lg leading-snug text-default">Launch & funnel</h3>
<p class="relative mt-3 text-sm leading-relaxed text-muted">DNS cut-over, Plausible analytics live, two copy tweaks based on first-day scroll data, handover guide delivered.</p>
</article>
</div>
</div>
How we shipped it
Day 1–2 — One offer, said clearly
Before touching a design tool we asked one question: what does a client come to you for, and what is different in her life six months later?
The answer became the headline. Not a methodology. Not a certification badge. A sentence the right person reads and thinks: "That's me."
We wrote the full-page copy — hero, pain section, offer, social proof, FAQ — in German first, then English. The lead magnet came out of the same session: ten questions the coach already used in every first conversation, repackaged as a self-assessment PDF a visitor could complete on their own.
One page. One offer. One next step.
Day 3–4 — A site the client owns
The new site is built on Astro — static by default, sub-second loads without a CDN, no database to maintain. The copy from day one went straight in. A Cal.com embed handles booking: one discovery-call slot type, one 50-minute session type, calendar-synced with no recurring fees.
The lead-magnet flow is a single inline section — name, email, one click, PDF in inbox. No third-party form builder, no cookie wall. The coach has her subscriber list as a plain CSV she can take anywhere.
Everything lives in a GitHub repository the coach owns on day one. No platform subscription. No "your theme needs an update" email in three months.
Day 5–6 — Launch and watch
DNS cut-over on day five. A Plausible analytics snippet went live at the same time — pageviews, traffic sources, and conversion events at a glance, fully GDPR-compliant without a cookie banner.
We watched the booking and lead-magnet flows through the first 48 hours and made two small copy tweaks based on scroll-depth data. On day six we handed over a one-page maintenance guide. She was live before her spring intake opened.
What we built
A readable stack the coach controls — nothing she can't hand to any developer.
- Site: Astro, deployed on Cloudflare Pages — Lighthouse 100 on mobile and desktop out of the box.
- Booking: Cal.com embed — discovery calls and sessions, synced to her calendar, zero monthly cost.
- Lead magnet: Inline form → PDF delivery → plain subscriber list the coach owns directly.
- Analytics: Plausible — traffic and conversions at a glance, no cookie consent banner needed.
- Copy: German primary, English secondary, written and reviewed together in one pass.
No CMS subscription. No plugin fees. No lock-in. If she ever wants to move, she takes the repo and the list.
The results
Measured over the 60 days after launch, same traffic sources, same Instagram cadence:
- Inquiries from 1 to 9 per month — eight of the nine came directly through the booking page or lead-magnet form rather than the generic contact form.
- First new client booked on day 11 — that single engagement covered the entire project fee.
- Lead magnet: 23 downloads in month one, six of which converted into a discovery call.
- Lighthouse performance score: 100 on mobile and desktop.
- Live in 6 days — the spring intake opened on schedule.
The coach put it simply: "For two years I thought the problem was my Instagram. It was never Instagram."
What's next
A second service page for the coach's new group programme is now in progress, built on the same component library. That page will take a day, not a week — that's the compounding return of owning a clean codebase rather than a rented theme.
If your site looks polished but your inquiry form is collecting silence — the problem is almost always upstream of design. Talk to us. We'll read your site honestly, tell you what's not landing, and have the new version live before your next intake opens.