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/src/components/ContactForm/ContactGateway.tsx

@@ -0,0 +1,183 @@
+"use client";
+
+import { cn } from "../../utils/cn";
+import { Reveal } from "../Reveal";
+import { MessageSquareText, Settings2, ArrowRight } from "lucide-react";
+import { ProjectType } from "./types";
+
+interface ContactGatewayProps {
+  name: string;
+  setName: (val: string) => void;
+  company: string;
+  setCompany: (val: string) => void;
+  projectType: ProjectType;
+  setProjectType: (val: ProjectType) => void;
+  onChooseConfigurator: () => void;
+  onChooseDirectMessage: () => void;
+}
+
+const AutoInput = ({
+  value,
+  onChange,
+  placeholder,
+  autoFocus,
+}: {
+  value: string;
+  onChange: (val: string) => void;
+  placeholder: string;
+  autoFocus?: boolean;
+}) => {
+  return (
+    <div className="inline-grid items-center relative group mx-1">
+      <span className="col-start-1 row-start-1 opacity-0 pointer-events-none whitespace-pre border-b-2 border-transparent px-2 py-1 text-2xl md:text-5xl font-bold tracking-tight min-w-[140px]">
+        {value || placeholder}
+      </span>
+      <input
+        type="text"
+        value={value}
+        onChange={(e) => onChange(e.target.value)}
+        placeholder={placeholder}
+        autoFocus={autoFocus}
+        className={cn(
+          "col-start-1 row-start-1 w-full h-full bg-transparent focus:outline-none px-2 py-1",
+          "text-2xl md:text-5xl font-bold tracking-tight transition-all duration-300",
+          "border-b-2",
+          value
+            ? "text-slate-900 border-slate-900"
+            : "text-slate-300 border-slate-100 placeholder:text-slate-200 focus:border-green-500 focus:placeholder:text-slate-300",
+        )}
+      />
+    </div>
+  );
+};
+
+export const ContactGateway = ({
+  name,
+  setName,
+  company,
+  setCompany,
+  onChooseConfigurator,
+  onChooseDirectMessage,
+}: ContactGatewayProps) => {
+  return (
+    <div className="flex flex-col items-center justify-center min-h-[70vh] text-left w-full px-4 max-w-5xl mx-auto space-y-24">
+      {/* Identity Section */}
+      <Reveal width="100%" delay={0.1}>
+        <div className="space-y-4">
+          <span className="text-[10px] font-mono text-green-600 uppercase tracking-[0.3em] font-bold">
+            IDENTIFIKATION // SCHRITT_00
+          </span>
+          <div className="flex flex-wrap items-baseline gap-y-6 text-slate-900">
+            <span className="text-2xl md:text-5xl font-medium text-slate-400">
+              Hi, ich bin
+            </span>
+            <AutoInput value={name} onChange={setName} placeholder="Ihr Name" />
+            <span className="text-2xl md:text-5xl font-medium text-slate-400">
+              von
+            </span>
+            <AutoInput
+              value={company}
+              onChange={setCompany}
+              placeholder="Firma / Projekt"
+            />
+          </div>
+        </div>
+      </Reveal>
+
+      {/* Path Selection */}
+      <div className="grid grid-cols-1 md:grid-cols-2 gap-8 w-full">
+        {/* Configurator Path */}
+        <Reveal width="100%" delay={0.3} direction="up">
+          <button
+            onClick={onChooseConfigurator}
+            disabled={!name}
+            className={cn(
+              "group relative flex flex-col items-start p-8 rounded-3xl border text-left transition-all duration-500 overflow-hidden",
+              name
+                ? "bg-slate-900 border-slate-800 text-white shadow-2xl hover:-translate-y-2"
+                : "bg-slate-50 border-slate-100 text-slate-400 cursor-not-allowed opacity-60",
+            )}
+          >
+            <div className="absolute top-0 right-0 p-8 opacity-10 group-hover:opacity-20 transition-opacity">
+              <Settings2 size={120} />
+            </div>
+
+            <Settings2 size={24} className="mb-6 text-green-400" />
+            <h3 className="text-2xl font-bold mb-2 tracking-tight">
+              System-Konfigurator
+            </h3>
+            <p className="text-sm text-slate-400 font-medium mb-8 max-w-[280px]">
+              Konfigurieren Sie Ihr Projekt modular für eine präzise
+              Aufwandsschätzung.
+            </p>
+
+            <div className="mt-auto flex items-center gap-2 text-[10px] font-mono uppercase tracking-widest font-bold">
+              <span>Sitzung starten</span>
+              <ArrowRight
+                size={14}
+                className="group-hover:translate-x-1 transition-transform"
+              />
+            </div>
+
+            {!name && (
+              <div className="absolute inset-0 bg-slate-50/60 backdrop-blur-[6px] z-20" />
+            )}
+          </button>
+        </Reveal>
+
+        {/* Direct Mail Path */}
+        <Reveal width="100%" delay={0.4} direction="up">
+          <button
+            onClick={onChooseDirectMessage}
+            disabled={!name}
+            className={cn(
+              "group relative flex flex-col items-start p-8 rounded-3xl border text-left transition-all duration-500 overflow-hidden",
+              name
+                ? "bg-white border-slate-200 text-slate-900 hover:-translate-y-2 hover:border-slate-400 hover:shadow-xl"
+                : "bg-slate-50 border-slate-100 text-slate-400 cursor-not-allowed opacity-60",
+            )}
+          >
+            <MessageSquareText
+              size={24}
+              className={cn(
+                "mb-6 transition-colors",
+                name ? "text-slate-900" : "text-slate-300",
+              )}
+            />
+            <h3 className="text-2xl font-bold mb-2 tracking-tight">
+              Direktnachricht
+            </h3>
+            <p
+              className={cn(
+                "text-sm font-medium mb-8 max-w-[280px]",
+                name ? "text-slate-500" : "text-slate-400",
+              )}
+            >
+              Kurze Frage oder spezifisches Anliegen? Senden Sie mir direkt
+              Informationen.
+            </p>
+
+            <div
+              className={cn(
+                "mt-auto flex items-center gap-2 text-[10px] font-mono uppercase tracking-widest font-bold transition-colors",
+                name
+                  ? "text-slate-400 group-hover:text-slate-900"
+                  : "text-slate-300",
+              )}
+            >
+              <span>Formular öffnen</span>
+              <ArrowRight
+                size={14}
+                className="group-hover:translate-x-1 transition-transform"
+              />
+            </div>
+
+            {!name && (
+              <div className="absolute inset-0 bg-slate-50/60 backdrop-blur-[6px] z-20" />
+            )}
+          </button>
+        </Reveal>
+      </div>
+    </div>
+  );
+};