feat: redesign page heroes, implement organic markers, and streamline contact flow

- Refined hero sections for About, Blog, Websites, and Case Studies for a bespoke industrial entry point.
- Redesigned Marker component using layered SVG paths for an organic, hand-drawn highlighter effect.
- Restored technical precision in ArchitectureVisualizer with refined line thickness.
- Streamlined contact page by removing generic headers and prioritizing the configurator/gateway.
- Updated technical references to reflect self-hosted Gitea infrastructure.
- Cleaned up unused imports and addressed linting warnings across modified pages.

apps/web/app/websites/page.tsx

@@ -1,22 +1,19 @@
 "use client";
 
-import { PageHeader } from "../../src/components/PageHeader";
 import { Reveal } from "../../src/components/Reveal";
 import { Section } from "../../src/components/Section";
 import {
-  SystemArchitecture,
   SpeedPerformance,
   SolidFoundation,
   LayerSeparation,
-  DirectService,
   TaskDone,
 } from "../../src/components/Landing";
 import {
   H3,
-  H4,
   LeadText,
   BodyText,
   Label,
+  MonoLabel,
 } from "../../src/components/Typography";
 import { Card } from "../../src/components/Layout";
 import { Button } from "../../src/components/Button";
@@ -25,6 +22,9 @@ import {
   GradientMesh,
   CodeSnippet,
   AbstractCircuit,
+  CMSVisualizer,
+  ArchitectureVisualizer,
+  ResultVisualizer,
 } from "../../src/components/Effects";
 import { Marker } from "../../src/components/Marker";
 
@@ -33,86 +33,77 @@ export default function WebsitesPage() {
     <div className="flex flex-col bg-white overflow-hidden relative">
       <AbstractCircuit />
 
-      <PageHeader
-        title={
-          <>
-            Websites, die <br />
-            <span className="text-slate-400">
-              <Marker color="rgba(255,235,59,0.5)">
-                einfach funktionieren.
-              </Marker>
-            </span>
-          </>
-        }
-        description="Kein Baukasten. Kein Plugin-Chaos. Maßgeschneiderte Architektur für maximale Performance."
-        backgroundSymbol="W"
-        className="px-5 md:px-0"
-      />
+      <Section className="pt-24 pb-12 md:pt-40 md:pb-24">
+        <div className="space-y-12 md:space-y-24">
+          <div className="space-y-6 md:space-y-10 max-w-5xl">
+            <Reveal>
+              <div className="space-y-4">
+                <MonoLabel className="text-blue-500 tracking-[0.2em] text-[10px] md:text-xs">
+                  SYSTEM ENGINEERING
+                </MonoLabel>
+                <H3 className="text-4xl md:text-8xl leading-[1.0] tracking-tighter">
+                  Websites, die <br />
+                  <span className="text-slate-400">
+                    <Marker color="rgba(255,235,59,0.5)">
+                      einfach funktionieren.
+                    </Marker>
+                  </span>
+                </H3>
+              </div>
+            </Reveal>
+            <Reveal delay={0.2}>
+              <LeadText className="text-lg md:text-2xl max-w-2xl text-slate-500 md:text-slate-400 leading-relaxed">
+                Kein Baukasten. Kein Plugin-Chaos. Maßgeschneiderte Architektur
+                für{" "}
+                <span className="text-slate-900 font-bold underline decoration-slate-200 underline-offset-8">
+                  maximale Performance
+                </span>
+                .
+              </LeadText>
+            </Reveal>
+          </div>
 
-      {/* 01: Architektur – WIE ich baue */}
-      <Section
-        number="01"
-        title="Architektur"
-        borderTop
-        illustration={<SystemArchitecture className="w-24 h-24" />}
-      >
-        <div className="space-y-8 md:space-y-12">
-          <Reveal>
-            <H3 className="text-2xl md:text-5xl leading-tight max-w-3xl">
-              Systeme, nicht Broschüren. <br />
-              <span className="text-slate-400">
-                Jede Website ist Ingenieursarbeit.
-              </span>
-            </H3>
-          </Reveal>
-          <Reveal delay={0.2}>
-            <LeadText className="text-lg md:text-2xl max-w-2xl text-slate-400">
-              Ich entwickle Websites von Grund auf – mit modernen Frameworks,
-              eigener Infrastruktur und einem Deployment-Prozess, der{" "}
-              <span className="text-slate-900">
-                <Marker delay={0.2} color="rgba(148,163,184,0.1)">
-                  automatisiert und reproduzierbar
-                </Marker>
-              </span>{" "}
-              ist.
-            </LeadText>
-          </Reveal>
+          <div className="space-y-12">
+            <Reveal delay={0.3} direction="up">
+              <ArchitectureVisualizer />
+            </Reveal>
 
-          {/* Tech Stack Visual */}
-          <Reveal delay={0.4}>
-            <div className="grid grid-cols-2 lg:grid-cols-4 gap-3 md:gap-4">
+            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
               {[
-                { label: "Next.js", sub: "Framework" },
-                { label: "TypeScript", sub: "Sprache" },
-                { label: "Docker", sub: "Infrastruktur" },
-                { label: "Directus", sub: "CMS" },
+                {
+                  label: "Next.js",
+                  sub: "Architecture",
+                  desc: "React-Framework für maximale SEO & Speed.",
+                },
+                {
+                  label: "Docker",
+                  sub: "Infrastructure",
+                  desc: "Reproduzierbare Umgebungen überall.",
+                },
+                {
+                  label: "Directus",
+                  sub: "Management",
+                  desc: "Headless CMS für flexible Datenabfrage.",
+                },
+                {
+                  label: "Gitea",
+                  sub: "Pipeline",
+                  desc: "Self-hosted Git & CI/CD Pipelines.",
+                },
               ].map((item, i) => (
-                <Card
-                  key={i}
-                  variant="glass"
-                  padding="small"
-                  techBorder
-                  className="group text-center"
-                >
-                  <div className="space-y-1 md:space-y-2">
-                    <Label className="text-slate-900 text-xs md:text-sm">
+                <Reveal key={i} delay={0.4 + i * 0.1}>
+                  <div className="space-y-2 p-6 rounded-2xl border border-slate-50 bg-white shadow-sm hover:border-slate-200 transition-all group">
+                    <Label className="text-slate-900 group-hover:text-blue-600 transition-colors uppercase tracking-widest text-[10px]">
                       {item.label}
                     </Label>
-                    <span className="block text-[8px] md:text-[9px] font-mono text-slate-300 uppercase tracking-widest">
-                      {item.sub}
-                    </span>
+                    <BodyText className="text-xs text-slate-400">
+                      {item.desc}
+                    </BodyText>
                   </div>
-                </Card>
+                </Reveal>
               ))}
             </div>
-          </Reveal>
-
-          {/* Decorative Code Snippet */}
-          <Reveal delay={0.6}>
-            <div className="max-w-md opacity-70">
-              <CodeSnippet variant="code" />
-            </div>
-          </Reveal>
+          </div>
         </div>
       </Section>
 
@@ -139,7 +130,7 @@ export default function WebsitesPage() {
           <div className="grid grid-cols-1 md:grid-cols-12 gap-8 md:gap-12 items-center">
             <div className="md:col-span-12 lg:col-span-7 space-y-6 md:space-y-8">
               <Reveal delay={0.2}>
-                <LeadText className="text-lg md:text-xl text-slate-400">
+                <LeadText className="text-lg md:text-xl text-slate-500 md:text-slate-400">
                   Jede Seite wird vorab gerendert und über ein CDN ausgeliefert.
                   Das Ergebnis: Ladezeiten unter einer Sekunde. Messbar.{" "}
                   <span className="text-slate-900">Reproduzierbar.</span>
@@ -199,7 +190,7 @@ export default function WebsitesPage() {
             </H3>
           </Reveal>
           <Reveal delay={0.2}>
-            <LeadText className="text-xl md:text-2xl max-w-2xl text-slate-400">
+            <LeadText className="text-xl md:text-2xl max-w-2xl text-slate-500 md:text-slate-400">
               Ihre Website besteht aus{" "}
               <span className="text-slate-900">Ihrem Code</span>. Kein
               WordPress, kein Wix, keine Blackbox. Alles versioniert, alles
@@ -249,58 +240,90 @@ export default function WebsitesPage() {
         illustration={<LayerSeparation className="w-24 h-24" />}
         effects={<GradientMesh variant="subtle" className="opacity-60" />}
       >
-        <div className="space-y-8 md:space-y-12">
-          <Reveal>
-            <H3 className="text-2xl md:text-5xl leading-tight max-w-3xl">
-              Inhalte pflegen <br />
-              <span className="text-slate-400">ohne Angst.</span>
-            </H3>
-          </Reveal>
-          <div className="grid grid-cols-1 md:grid-cols-12 gap-8 md:gap-12 items-start">
-            <div className="md:col-span-12 lg:col-span-7">
-              <Reveal delay={0.2}>
-                <LeadText className="text-lg md:text-2xl text-slate-400">
-                  Technik und Inhalt sind{" "}
-                  <span className="text-slate-900">
-                    <Marker color="rgba(255,235,59,0.5)">
-                      strikt getrennt
-                    </Marker>
+        <div className="space-y-12 md:space-y-20">
+          <div className="space-y-6 md:space-y-10 max-w-5xl">
+            <Reveal>
+              <div className="space-y-4">
+                <MonoLabel className="text-blue-500 tracking-[0.2em] text-[10px] md:text-xs">
+                  ARCHITECTURAL SEPARATION
+                </MonoLabel>
+                <H3 className="text-4xl md:text-7xl leading-[1.1] tracking-tighter">
+                  Inhalte pflegen <br />
+                  <span className="text-slate-400 italic font-serif">
+                    ohne Angst.
                   </span>
-                  . Sie bearbeiten Texte und Bilder in einem intuitiven System –
-                  das Design bleibt geschützt.
+                </H3>
+              </div>
+            </Reveal>
+
+            <Reveal delay={0.2}>
+              <div className="space-y-6">
+                <LeadText className="text-lg md:text-2xl text-slate-500 md:text-slate-400 leading-relaxed max-w-3xl">
+                  Vergessen Sie zerschossene Layouts nach einem Textupdate.
+                  Meine Websites trennen{" "}
+                  <span className="text-slate-900 font-bold underline decoration-blue-500/30 underline-offset-8">
+                    Daten von Design
+                  </span>
+                  .
                 </LeadText>
+              </div>
+            </Reveal>
+          </div>
+
+          <div className="grid grid-cols-1 lg:grid-cols-12 gap-12 items-start">
+            <div className="lg:col-span-8 relative">
+              <Reveal delay={0.4} direction="up">
+                <CMSVisualizer className="w-full mx-auto" />
               </Reveal>
             </div>
-            <div className="md:col-span-12 lg:col-span-5">
-              <Reveal delay={0.4}>
-                <Card
-                  variant="glass"
-                  padding="normal"
-                  techBorder
-                  className="space-y-6"
-                >
-                  <div className="space-y-3">
-                    <div className="flex items-center gap-3">
-                      <div className="w-2 h-2 rounded-full bg-green-500"></div>
-                      <Label className="text-slate-900">Sie dürfen</Label>
-                    </div>
-                    <BodyText className="font-medium text-sm md:text-base">
-                      Texte, Bilder und Inhalte frei bearbeiten.
-                    </BodyText>
+
+            <div className="lg:col-span-4 space-y-8">
+              <Reveal delay={0.5}>
+                <div className="space-y-4">
+                  <BodyText className="text-slate-500 leading-relaxed">
+                    Durch eine krisenfeste Headless-Architektur (Directus)
+                    bewegen Sie sich in einem geschützten Sandkasten – während
+                    das Frontend-System die visuelle Integrität Ihrer Marke
+                    garantiert.
+                  </BodyText>
+
+                  <div className="flex flex-wrap gap-3">
+                    {["Layout-Schutz", "Live-Vorschau", "Role-RBAC"].map(
+                      (tag, i) => (
+                        <div
+                          key={i}
+                          className="px-3 py-1 bg-white border border-slate-100 rounded-full text-[10px] font-mono text-slate-400"
+                        >
+                          {tag}
+                        </div>
+                      ),
+                    )}
                   </div>
-                  <div className="space-y-3 opacity-40">
-                    <div className="flex items-center gap-3">
-                      <div className="w-2 h-2 rounded-full bg-slate-300"></div>
-                      <Label>Geschützt</Label>
-                    </div>
-                    <BodyText className="line-through text-xs md:text-base">
-                      Design, Layout, Code-Struktur.
-                    </BodyText>
+                </div>
+              </Reveal>
+
+              <Reveal delay={0.6}>
+                <div className="p-6 bg-slate-900 rounded-2xl shadow-xl text-[10px] font-mono text-white/50 space-y-3">
+                  <div className="flex justify-between items-center text-white/90">
+                    <span>PROTOCOL</span>
+                    <span className="text-green-500 font-bold">ENFORCED</span>
                   </div>
-                </Card>
+                  <p className="leading-tight">
+                    Website architecture validates all CMS payloads against the
+                    design schema before rendering.
+                  </p>
+                  <div className="pt-2 border-t border-white/10 flex items-center justify-between">
+                    <span>INTEGRITY</span>
+                    <span className="text-white">100%</span>
+                  </div>
+                </div>
               </Reveal>
             </div>
           </div>
+
+          <Reveal delay={0.7}>
+            <div className="p-px w-full bg-gradient-to-r from-transparent via-slate-100 to-transparent" />
+          </Reveal>
         </div>
       </Section>
 
@@ -311,52 +334,40 @@ export default function WebsitesPage() {
         borderTop
         illustration={<TaskDone className="w-24 h-24" />}
       >
-        <div className="space-y-8 md:space-y-16">
-          <Reveal>
-            <H3 className="text-2xl md:text-5xl tracking-tighter">
-              Was Sie konkret <br />
-              <span className="text-slate-400">bekommen.</span>
-            </H3>
-          </Reveal>
-
-          <div className="grid grid-cols-1 md:grid-cols-3 gap-8 md:gap-12">
-            {[
-              {
-                title: "Ihr Code",
-                desc: "Vollständiger Quellcode, versioniert auf GitHub. Kein Vendor Lock-in.",
-              },
-              {
-                title: "Ihre Infrastruktur",
-                desc: "Docker-Container, CI/CD-Pipeline, automatisches Deployment.",
-              },
-              {
-                title: "Ihr CMS",
-                desc: "Eigenes Content-Management-System. Volle Kontrolle über Ihre Inhalte.",
-              },
-            ].map((item, i) => (
-              <Reveal key={i} delay={i * 0.1}>
-                <div className="space-y-3 md:space-y-4 group">
-                  <div className="w-8 h-px bg-slate-200 group-hover:w-full transition-all duration-1000" />
-                  <H4 className="text-lg md:text-2xl font-bold">
-                    {item.title}
-                  </H4>
-                  <LeadText className="text-sm md:text-lg text-slate-400">
-                    {item.desc}
-                  </LeadText>
-                </div>
-              </Reveal>
-            ))}
+        <div className="space-y-12 md:space-y-24">
+          <div className="max-w-4xl space-y-6">
+            <Reveal>
+              <H3 className="text-4xl md:text-7xl leading-[1.1] tracking-tighter">
+                Was Sie konkret <br />
+                <span className="text-slate-400">bekommen.</span>
+              </H3>
+            </Reveal>
+            <Reveal delay={0.2}>
+              <LeadText className="text-lg md:text-2xl text-slate-500 md:text-slate-400 max-w-2xl">
+                Keine halben Sachen. Ich liefere Ihnen ein schlüsselfertiges
+                System mit voller Kontrolle und Transparenz.
+              </LeadText>
+            </Reveal>
           </div>
 
-          <Reveal delay={0.4}>
-            <div className="pt-10 md:pt-16 border-t border-slate-200 flex flex-col md:flex-row justify-between items-start md:items-center gap-6 md:gap-8">
-              <div className="space-y-2">
-                <Label>Bereit?</Label>
-                <LeadText className="text-xl md:text-2xl">
+          <Reveal delay={0.3} direction="up">
+            <ResultVisualizer />
+          </Reveal>
+
+          <Reveal delay={0.5}>
+            <div className="pt-10 md:pt-16 border-t border-slate-100 flex flex-col md:flex-row justify-between items-start md:items-center gap-12">
+              <div className="space-y-3">
+                <MonoLabel className="text-blue-500">
+                  BEREIT FÜR DEN NÄCHSTEN SCHRITT?
+                </MonoLabel>
+                <div className="text-xl md:text-3xl font-bold tracking-tight text-slate-900">
                   Lassen Sie uns über Ihr Projekt sprechen.
-                </LeadText>
+                </div>
               </div>
-              <Button href="/contact" className="w-full md:w-auto">
+              <Button
+                href="/contact"
+                className="w-full md:w-auto h-16 px-10 text-lg rounded-2xl shadow-2xl shadow-blue-500/10"
+              >
                 Projekt anfragen
               </Button>
             </div>