Split landing hero into interactive webcam grid

- Move hero into its own client component - Add webcam-backed pixel grid background - Update landing wiring and content test coverage
2026-05-06 09:10:14 +02:00
parent 2032395472
commit 9faca2a859
6 changed files with 761 additions and 76 deletions
--- a/src/components/landing-hero-section.tsx
+++ b/src/components/landing-hero-section.tsx
@@ -0,0 +1,145 @@
+"use client";
+
+import { ArrowUpRight } from "lucide-react";
+import { useState } from "react";
+
+import { cn } from "@/lib/utils";
+import { WebcamPixelGrid } from "@/components/ui/webcam-pixel-grid";
+
+/** Canvas-Hintergrund = Basiston der Raster-Palette (schließt optisch an bg-primary an). */
+const PRIMARY_HERO_BG = "#B54440";
+
+const LandingHeroSection = () => {
+  const [liveRasterOn, setLiveRasterOn] = useState(false);
+
+  return (
+    <section className="relative grid min-h-screen grid-cols-1 border-b border-border lg:grid-cols-[1.08fr_0.92fr]">
+      <div className="flex min-h-[640px] flex-col justify-between px-5 py-5 sm:px-8 lg:px-12">
+        <header className="grid gap-4 border-b border-border pb-5 text-xs uppercase tracking-[0.28em] text-muted-foreground sm:grid-cols-[1fr_auto]">
+          <a href="/" className="font-semibold text-foreground">
+            Matthias Meister
+          </a>
+          <nav className="flex flex-wrap gap-5">
+            <a href="#leistungen">Leistungen</a>
+            <a href="#pakete">Pakete</a>
+            <a href="#kontakt">Kontakt</a>
+          </nav>
+        </header>
+
+        <div className="max-w-5xl py-16 sm:py-20 lg:py-24">
+          <p className="mb-6 max-w-sm text-sm uppercase tracking-[0.32em] text-primary">
+            Projektbrief für regionale Unternehmen
+          </p>
+          <h1 className="max-w-[11ch] text-[clamp(4.25rem,13vw,11.5rem)] font-black uppercase leading-[0.78] tracking-normal text-foreground">
+            Website ohne Umweg
+          </h1>
+          <div className="mt-8 grid gap-7 border-t border-border pt-7 lg:grid-cols-[0.72fr_1fr]">
+            <p className="text-sm uppercase tracking-[0.24em] text-muted-foreground">
+              Strategie trifft Umsetzung
+            </p>
+            <p className="max-w-2xl text-lg leading-8 text-foreground/78">
+              Ich baue Websites für Handwerk, Praxen, Salons und
+              Dienstleister aus der Region. Direkt, glaubwürdig und so
+              reduziert, dass der nächste Kontakt naheliegt.
+            </p>
+          </div>
+        </div>
+
+        <div className="grid gap-4 border-t border-border pt-5 text-sm uppercase tracking-[0.2em] text-muted-foreground sm:grid-cols-3">
+          <span>Antwort in 24h</span>
+          <span>DSGVO-arm</span>
+          <span>Hosting aus DE</span>
+        </div>
+      </div>
+
+      <aside className="relative flex min-h-[520px] flex-col overflow-hidden border-t border-primary-foreground/25 bg-primary px-5 py-5 text-primary-foreground sm:px-8 lg:min-h-screen lg:border-t-0 lg:border-l lg:px-12">
+        {liveRasterOn ? (
+          <div className="pointer-events-none absolute inset-0 z-0 hidden min-h-full lg:block">
+            <WebcamPixelGrid
+              className="min-h-full"
+              gridCols={40}
+              gridRows={30}
+              maxElevation={10}
+              motionSensitivity={0.52}
+              elevationSmoothing={0.12}
+              colorMode="redscale"
+              backgroundColor={PRIMARY_HERO_BG}
+              mirror
+              gapRatio={0.12}
+              darken={0.08}
+              borderColor="#ffffff"
+              borderOpacity={0.05}
+              quietWebcamErrors
+            />
+          </div>
+        ) : null}
+
+        <div className="relative z-10 flex min-h-[520px] flex-1 flex-col lg:min-h-0">
+          <div className="flex shrink-0 items-start justify-between border-b border-primary-foreground/30 pb-5 text-xs uppercase tracking-[0.28em]">
+            <span>Creative Direction</span>
+            <span>2026</span>
+          </div>
+
+          <div className="hidden shrink-0 flex-col items-end gap-2 pt-4 lg:flex">
+            <p
+              className={cn(
+                "max-w-[18ch] text-right text-[10px] leading-snug font-medium uppercase tracking-[0.22em] text-primary-foreground/85",
+                !liveRasterOn && "motion-safe:animate-pulse",
+              )}
+            >
+              {liveRasterOn
+                ? "Kamera aus? Schalter zurück — fertig."
+                : "Psst — einmal wippen, dann lebt das Raster."}
+            </p>
+            <button
+              type="button"
+              role="switch"
+              aria-checked={liveRasterOn}
+              aria-label={
+                liveRasterOn
+                  ? "Live-Raster und Kamera beenden"
+                  : "Live-Raster mit Kamera starten"
+              }
+              onClick={() => setLiveRasterOn((v) => !v)}
+              className={cn(
+                "relative h-9 w-[3.25rem] shrink-0 rounded-full border transition-colors duration-300 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-foreground",
+                liveRasterOn
+                  ? "border-primary-foreground/50 bg-primary-foreground/20"
+                  : "border-primary-foreground/45 bg-primary-foreground/10 hover:border-primary-foreground/70",
+              )}
+            >
+              <span
+                className={cn(
+                  "absolute top-1 left-1 size-7 rounded-full bg-primary-foreground shadow-sm transition-transform duration-300 ease-out",
+                  liveRasterOn ? "translate-x-4" : "translate-x-0",
+                )}
+              />
+            </button>
+          </div>
+
+          <div className="relative flex min-h-0 flex-1 flex-col justify-center py-10 lg:py-14">
+            <div className="pointer-events-none absolute bottom-8 right-0 h-36 w-36 border border-primary-foreground/35 sm:bottom-10 sm:right-2 lg:bottom-16 lg:right-10" />
+            <div className="relative max-w-xl">
+              <p className="text-[clamp(4rem,10vw,9rem)] font-black uppercase leading-[0.75] tracking-normal">
+                01
+              </p>
+              <p className="mt-7 max-w-sm text-2xl font-semibold uppercase leading-none">
+                Klarer Auftritt. Harte Kante. Weniger Agenturlärm.
+              </p>
+            </div>
+          </div>
+
+          <a
+            href="#kontakt"
+            className="group relative z-10 mt-auto inline-flex w-fit shrink-0 items-center gap-3 border border-primary-foreground px-5 py-4 text-sm font-semibold uppercase tracking-[0.18em] transition hover:bg-primary-foreground hover:text-primary"
+          >
+            Projekt anfragen
+            <ArrowUpRight className="size-5 transition group-hover:-translate-y-0.5 group-hover:translate-x-0.5" />
+          </a>
+        </div>
+      </aside>
+    </section>
+  );
+};
+
+export { LandingHeroSection };