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/DirectMessageFlow.tsx

@@ -0,0 +1,125 @@
+"use client";
+
+import { motion } from "framer-motion";
+import { cn } from "../../utils/cn";
+import { Reveal } from "../Reveal";
+import { Mail, MessageSquare, ArrowLeft, Send } from "lucide-react";
+
+interface DirectMessageFlowProps {
+  name: string;
+  email: string;
+  setEmail: (val: string) => void;
+  company: string;
+  message: string;
+  setMessage: (val: string) => void;
+  onBack: () => void;
+  onSubmit: () => void;
+  isSubmitting: boolean;
+}
+
+export const DirectMessageFlow = ({
+  name,
+  email,
+  setEmail,
+  company,
+  message,
+  setMessage,
+  onBack,
+  onSubmit,
+  isSubmitting,
+}: DirectMessageFlowProps) => {
+  return (
+    <div className="w-full max-w-3xl mx-auto px-4 py-12">
+      <Reveal width="100%" delay={0.1}>
+        <button
+          onClick={onBack}
+          className="flex items-center gap-2 text-[10px] font-mono font-bold uppercase tracking-widest text-slate-400 hover:text-slate-900 transition-colors mb-12"
+        >
+          <ArrowLeft size={14} /> Zurück zur Auswahl
+        </button>
+      </Reveal>
+
+      <div className="space-y-12">
+        <Reveal width="100%" delay={0.2}>
+          <div className="space-y-2">
+            <span className="text-[10px] font-mono text-green-600 uppercase tracking-[0.3em] font-bold">
+              DIREKTNACHRICHT // MODUS_AKTIVIERT
+            </span>
+            <h2 className="text-3xl font-bold tracking-tight text-slate-900">
+              Wie kann ich helfen, {name.split(" ")[0]}?
+            </h2>
+            <p className="text-slate-500 font-medium">
+              Sende mir eine Nachricht zu {company || "deinem Projekt"} und ich
+              melde mich in Kürze.
+            </p>
+          </div>
+        </Reveal>
+
+        <div className="space-y-8">
+          {/* Email Input */}
+          <Reveal width="100%" delay={0.3} direction="up">
+            <div className="space-y-4">
+              <label className="flex items-center gap-2 text-[10px] font-mono font-bold uppercase tracking-widest text-slate-400">
+                <Mail size={12} /> Rückantwort an
+              </label>
+              <input
+                type="email"
+                value={email}
+                onChange={(e) => setEmail(e.target.value)}
+                placeholder="ihre@email.de"
+                className="w-full bg-slate-50 border border-slate-100 rounded-2xl px-6 py-4 text-lg font-medium focus:outline-none focus:ring-2 focus:ring-slate-900/5 focus:border-slate-900 transition-all"
+              />
+            </div>
+          </Reveal>
+
+          {/* Message Input */}
+          <Reveal width="100%" delay={0.4} direction="up">
+            <div className="space-y-4">
+              <label className="flex items-center gap-2 text-[10px] font-mono font-bold uppercase tracking-widest text-slate-400">
+                <MessageSquare size={12} /> Ihre Nachricht
+              </label>
+              <textarea
+                value={message}
+                onChange={(e) => setMessage(e.target.value)}
+                placeholder="Beschreiben Sie kurz Ihr Anliegen..."
+                rows={6}
+                className="w-full bg-slate-50 border border-slate-100 rounded-2xl px-6 py-4 text-lg font-medium focus:outline-none focus:ring-2 focus:ring-slate-900/5 focus:border-slate-900 transition-all resize-none"
+              />
+            </div>
+          </Reveal>
+
+          {/* Submit Button */}
+          <Reveal width="100%" delay={0.5} direction="up">
+            <button
+              onClick={onSubmit}
+              disabled={isSubmitting || !email || !message}
+              className={cn(
+                "group relative w-full py-5 rounded-2xl font-bold text-lg transition-all duration-300 flex items-center justify-center gap-3 overflow-hidden",
+                isSubmitting || !email || !message
+                  ? "bg-slate-100 text-slate-400 cursor-not-allowed"
+                  : "bg-slate-900 text-white shadow-xl hover:shadow-2xl hover:-translate-y-1 active:scale-[0.98]",
+              )}
+            >
+              <div className="absolute inset-0 bg-gradient-to-r from-green-400/0 via-green-400/10 to-green-400/0 opacity-0 group-hover:opacity-100 -translate-x-full group-hover:translate-x-full transition-all duration-1000" />
+
+              {isSubmitting ? (
+                <>
+                  <div className="w-5 h-5 border-2 border-white/30 border-t-white rounded-full animate-spin" />
+                  <span>Übertragung läuft...</span>
+                </>
+              ) : (
+                <>
+                  <span>Nachricht absenden</span>
+                  <Send
+                    size={20}
+                    className="group-hover:translate-x-1 group-hover:-translate-y-1 transition-transform"
+                  />
+                </>
+              )}
+            </button>
+          </Reveal>
+        </div>
+      </div>
+    </div>
+  );
+};