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

src/components/landing.tsx

@@ -1,5 +1,4 @@
 import {
-  ArrowUpRight,
   Check,
   CornerDownRight,
   Mail,
@@ -51,72 +50,9 @@ const packages = [
   },
 ];
 
-const Landing = () => {
+const LandingRest = () => {
   return (
-    <main className="min-h-screen overflow-hidden bg-background text-foreground">
-      <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 justify-between border-t border-primary-foreground/25 bg-primary px-5 py-5 text-primary-foreground sm:px-8 lg:border-l lg:border-t-0 lg:px-12">
-          <div className="flex 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="absolute bottom-32 right-10 h-36 w-36 border border-primary-foreground/35" />
-          <div className="relative mt-28 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>
-          <a
-            href="#kontakt"
-            className="group inline-flex w-fit 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>
-        </aside>
-      </section>
-
+    <>
       <section
         id="leistungen"
         className="grid border-b border-border lg:grid-cols-[0.36fr_0.64fr]"
@@ -242,8 +178,8 @@ const Landing = () => {
           </div>
         </div>
       </section>
-    </main>
+    </>
   );
 };
 
-export { Landing };
+export { LandingRest };