home: dark hero with code-editor backdrop

Use a softly defocused screenshot behind the hero with an ink scrim
and white text so what Chris does is the first thing visitors see.
Add primary-dark / secondary-dark button variants for use on dark
backgrounds; pull the client logos out of the hero into their own
cream section so they remain readable.

src/app/page.tsx

@@ -1,3 +1,4 @@
+import Image from "next/image";
 import Link from "next/link";
 import { Button } from "@/components/button";
 import { ClientLogos } from "@/components/client-logos";
@@ -37,37 +38,53 @@ export default function HomePage() {
     <>
       <JsonLd data={organizationSchema()} />
       {/* Hero */}
-      <section className="relative overflow-hidden pt-20 pb-24 sm:pt-28 sm:pb-32">
+      <section className="relative isolate overflow-hidden bg-ink pt-20 pb-24 sm:pt-28 sm:pb-32">
+        <div
+          className="pointer-events-none absolute inset-0"
+          aria-hidden="true"
+        >
+          <Image
+            src="/hero-bg.webp"
+            alt=""
+            fill
+            priority
+            sizes="100vw"
+            className="scale-[1.02] object-cover object-top blur-[2px]"
+          />
+          <div className="absolute inset-0 bg-gradient-to-r from-[var(--color-ink)]/90 via-[var(--color-ink)]/60 to-[var(--color-ink)]/20" />
+        </div>
         <div className="hero-glow" aria-hidden="true" />
         <Container className="relative z-10">
           <div className="max-w-3xl">
             <Eyebrow>Five Devs &middot; PHP since 2010</Eyebrow>
-            <h1 className="mt-6 font-serif text-4xl font-semibold leading-[1.05] tracking-tight text-ink sm:text-6xl">
+            <h1 className="mt-6 font-serif text-4xl font-semibold leading-[1.05] tracking-tight text-cream-soft sm:text-6xl">
               The PHP help your{" "}
               <span className="accent-highlight text-accent">e-commerce</span>{" "}
               and{" "}
               <span className="accent-highlight text-accent">3PL</span> stack
               actually needs.
             </h1>
-            <p className="mt-7 max-w-xl text-lg leading-relaxed text-ink-soft">
+            <p className="mt-7 max-w-xl text-lg leading-relaxed text-cream-soft/75">
               I&rsquo;m Chris Smith. I&rsquo;ve spent fifteen years building
               the unglamorous, mission-critical glue between online stores,
               warehouses, and back offices &mdash; and quietly keeping it
               running for companies that depend on it.
             </p>
             <div className="mt-9 flex flex-wrap items-center gap-4">
-              <Button href="/contact" variant="primary">
+              <Button href="/contact" variant="primary-dark">
                 Book an intro call &rarr;
               </Button>
-              <Button href="/work" variant="secondary">
+              <Button href="/work" variant="secondary-dark">
                 See the work
               </Button>
             </div>
           </div>
         </Container>
+      </section>
 
-        {/* Logos strip */}
-        <Container className="mt-20 sm:mt-28">
+      {/* Logos strip */}
+      <section className="pt-16 pb-8 sm:pt-20 sm:pb-12">
+        <Container>
           <ClientLogos />
         </Container>
       </section>

src/components/button.tsx

@@ -2,7 +2,12 @@ import Link from "next/link";
 import type { AnchorHTMLAttributes, ReactNode } from "react";
 import { cn } from "@/lib/cn";
 
-type Variant = "primary" | "secondary" | "ghost";
+type Variant =
+  | "primary"
+  | "secondary"
+  | "ghost"
+  | "primary-dark"
+  | "secondary-dark";
 
 const base =
   "inline-flex items-center justify-center gap-2 rounded-full px-5 py-2.5 text-sm font-medium tracking-tight transition-colors focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-accent";
@@ -12,6 +17,9 @@ const variants: Record<Variant, string> = {
   secondary:
     "bg-transparent text-ink border border-ink/20 hover:border-ink hover:bg-ink/[0.03]",
   ghost: "text-ink hover:text-accent",
+  "primary-dark": "bg-cream-soft text-ink hover:bg-cream",
+  "secondary-dark":
+    "bg-transparent text-cream-soft border border-cream-soft/30 hover:border-cream-soft hover:bg-cream-soft/10",
 };
 
 type Props = AnchorHTMLAttributes<HTMLAnchorElement> & {