feat: message starter in the contact section

The visitor picks what they need and a prepared email types itself out; one
press opens it in their own mail app with subject and body filled in. The
mailto link is built by a tested pure function (src/domain/email.ts, spec
first) and only in the browser, so the address still never appears in the
page source.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

apps/web/src/components/home/ClosingCta.tsx

@@ -2,34 +2,46 @@ import * as React from "react";
 import { Reveal } from "@/src/components/Reveal";
 import { EmailLink } from "@/src/components/EmailLink";
 import { BitHeadline, type BitLine } from "./BitHeadline";
+import { ContactComposer } from "./ContactComposer";
 
 const CLOSING: readonly BitLine[] = [
   { text: "LET'S", tone: "bits" },
   { text: "TALK.", tone: "solid" },
 ];
 
-/** ClosingCta: the contact section. One address, no forms, no calendar. */
+/** ClosingCta: the contact section. One address and a message starter, no form to submit. */
 export const ClosingCta: React.FC = () => (
   <section
     id="contact"
     className="relative border-t border-slate-200 bg-slate-900 text-white"
   >
-    <div className="mx-auto w-full max-w-[1400px] px-5 py-24 md:px-12 md:py-44">
-      <Reveal>
+    <div
+      className="pointer-events-none absolute inset-0 opacity-70"
+      style={{
+        backgroundImage: "radial-gradient(#1e293b 1px, transparent 1px)",
+        backgroundSize: "20px 20px",
+      }}
+      aria-hidden="true"
+    />
+    <div className="relative mx-auto grid w-full max-w-[1400px] grid-cols-1 gap-14 px-5 py-24 md:px-12 md:py-40 lg:grid-cols-12 lg:items-center lg:gap-12">
+      <Reveal className="lg:col-span-6">
         <BitHeadline
           as="h2"
           invert
           lines={CLOSING}
-          className="font-sans text-[19vw] font-black leading-[0.86] tracking-tighter md:text-[13vw] xl:text-[12rem]"
+          className="font-sans text-[19vw] font-black leading-[0.86] tracking-tighter md:text-[13vw] lg:text-[8.5vw] xl:text-[9.5rem]"
         />
-        <p className="m-0 mt-10 max-w-2xl font-sans text-xl leading-snug text-slate-300 md:text-3xl">
-          Write me a few lines about what you need. We then arrange a short
-          call.
+        <p className="m-0 mt-10 max-w-xl font-sans text-xl leading-snug text-slate-300 md:text-3xl">
+          Pick what you need and the email writes itself. Or write to me
+          directly:
         </p>
-        <div className="mt-12">
-          <EmailLink className="inline-block border-b-2 border-white pb-2 font-sans text-3xl font-bold tracking-tight text-white no-underline transition-opacity hover:opacity-70 md:text-6xl" />
+        <div className="mt-8">
+          <EmailLink className="inline-block border-b-2 border-white pb-2 font-sans text-2xl font-bold tracking-tight text-white no-underline transition-opacity hover:opacity-70 md:text-4xl" />
         </div>
       </Reveal>
+      <Reveal delay={0.15} className="lg:col-span-6">
+        <ContactComposer />
+      </Reveal>
     </div>
   </section>
 );