feat: unify code-like components with shared CodeWindow, fix blog re-render loop, and stabilize layouts

apps/web/app/contact/page.tsx

@@ -1,42 +1,95 @@
-import * as React from "react";
-import { Reveal } from "../../src/components/Reveal";
 import { PageHeader } from "../../src/components/PageHeader";
+import { Reveal } from "../../src/components/Reveal";
 import { Section } from "../../src/components/Section";
+import { H3, LeadText, Label } from "../../src/components/Typography";
+import { Card } from "../../src/components/Layout";
 import { ContactForm } from "../../src/components/ContactForm";
+import { GradientMesh, AbstractCircuit } from "../../src/components/Effects";
 
 export default function ContactPage() {
   return (
-    <div className="flex flex-col gap-12 py-12 md:py-24">
+    <div className="flex flex-col bg-white min-h-screen overflow-hidden relative">
+      <AbstractCircuit />
+
       <PageHeader
         title={
           <>
-            Projekt <br />
-            <span className="text-slate-200">konfigurieren.</span>
+            Kontakt<span className="text-slate-200">.</span>
           </>
         }
-        description="Nutzen Sie den Konfigurator für eine erste Einschätzung oder schreiben Sie mir direkt eine Email."
+        description="Beschreiben Sie kurz Ihr Vorhaben. Ich melde mich zeitnah bei Ihnen."
         backLink={{ href: "/", label: "Zurück" }}
-        backgroundSymbol="?"
+        backgroundSymbol="@"
       />
 
-      <Section title="Konfigurator" containerVariant="wide" className="!py-12">
-        <ContactForm />
-      </Section>
+      <Section
+        borderTop
+        effects={
+          <>
+            <GradientMesh variant="metallic" className="opacity-70" />
+          </>
+        }
+      >
+        <div className="grid grid-cols-1 md:grid-cols-12 gap-12 md:gap-24">
+          {/* Form */}
+          <div className="md:col-span-7">
+            <Reveal>
+              <Card
+                variant="glass"
+                padding="large"
+                className="relative overflow-hidden"
+              >
+                <ContactForm />
+              </Card>
+            </Reveal>
+          </div>
 
-      <Section title="Direkt" className="!py-12">
-        <div className="grid grid-cols-1 gap-24">
-          <Reveal delay={0.4}>
-            <div className="space-y-8">
-              <a href="mailto:marc@mintel.me" className="group block space-y-2">
-                <span className="text-xs font-bold uppercase tracking-widest text-slate-300 group-hover:text-slate-900 transition-colors">
-                  Email
-                </span>
-                <p className="text-3xl md:text-6xl font-bold text-slate-900 border-b border-slate-100 group-hover:border-slate-900 transition-all duration-500 pb-6 tracking-tighter">
-                  marc@mintel.me
-                </p>
-              </a>
-            </div>
-          </Reveal>
+          {/* Sidebar */}
+          <div className="md:col-span-5 space-y-8">
+            <Reveal delay={0.2}>
+              <Card
+                variant="glass"
+                padding="normal"
+                techBorder
+                className="group"
+              >
+                <div className="space-y-4">
+                  <div className="flex items-center gap-3">
+                    <div className="w-2 h-2 bg-green-500 rounded-full animate-pulse"></div>
+                    <Label className="text-slate-900">Verfügbarkeit</Label>
+                  </div>
+                  <LeadText className="text-lg text-slate-400">
+                    Aktuell nehme ich Projekte für{" "}
+                    <span className="text-slate-900 font-bold">Q2 2026</span>{" "}
+                    an.
+                  </LeadText>
+                </div>
+              </Card>
+            </Reveal>
+
+            <Reveal delay={0.3}>
+              <Card variant="glass" padding="normal" className="group">
+                <div className="space-y-4">
+                  <Label className="text-slate-900">Direkt per E-Mail</Label>
+                  <a
+                    href="mailto:marc@mintel.me"
+                    className="block text-xl md:text-2xl font-bold text-slate-900 hover:text-slate-400 transition-colors duration-500 border-b border-slate-100 hover:border-slate-400 pb-1"
+                  >
+                    marc@mintel.me
+                  </a>
+                </div>
+              </Card>
+            </Reveal>
+
+            <Reveal delay={0.4}>
+              <div className="p-6 space-y-3 rounded-2xl border border-slate-50 bg-slate-50/30">
+                <Label className="text-slate-400">Antwortzeit</Label>
+                <H3 className="text-2xl text-slate-300">
+                  <span className="text-slate-900">&lt; 24h</span> an Werktagen.
+                </H3>
+              </div>
+            </Reveal>
+          </div>
         </div>
       </Section>
     </div>