feat(branding): implement hand-drawn Copic marker, strikethrough, and pen circle effects; redesign guarantee section with animated signature

apps/web/app/about/page.tsx

@@ -12,6 +12,7 @@ import {
   ParticleNetwork,
   GridLines,
 } from "../../src/components/Landing";
+import { Signature } from "../../src/components/Signature";
 import { Check } from "lucide-react";
 import {
   H1,
@@ -115,10 +116,8 @@ export default function AboutPage() {
                   Agenturen, Konzerne, Startups – ich habe die Branche von allen
                   Seiten kennengelernt. Was hängen geblieben ist:{" "}
                   <span className="text-slate-900">
-                    <Marker delay={0.2} color="rgba(148,163,184,0.15)">
-                      Ergebnisse zählen.
-                    </Marker>{" "}
-                    Nicht der Weg dorthin.
+                    <Marker delay={0.2}>Ergebnisse</Marker> zählen. Nicht der
+                    Weg dorthin.
                   </span>
                 </LeadText>
                 <IconList className="space-y-4">
@@ -228,53 +227,68 @@ export default function AboutPage() {
         </div>
       </Section>
 
-      {/* Section 03: Philosophie – what drives me */}
-      <Section number="03" title="Philosophie" borderTop>
-        <div className="space-y-12 md:space-y-16">
+      {/* Section 03: Garantie – The Pledge */}
+      <Section number="03" title="Garantie" borderTop>
+        <div className="relative">
           <Reveal>
-            <H3 className="text-2xl md:text-5xl leading-tight max-w-3xl">
-              Ich stehe für <br />
-              <span className="text-slate-400">meine Arbeit gerade.</span>
-            </H3>
-          </Reveal>
+            <div className="max-w-4xl text-left space-y-12 md:space-y-16 py-8 md:py-16">
+              <H3 className="text-3xl md:text-6xl leading-tight">
+                Ich stehe für <br />
+                <span className="text-slate-400">meine Arbeit gerade.</span>
+              </H3>
 
-          <div className="grid grid-cols-1 md:grid-cols-2 gap-8 md:gap-12 items-start">
-            <div className="space-y-8 min-w-0">
-              <Reveal delay={0.1}>
-                <LeadText className="text-lg md:text-xl text-slate-400">
-                  Keine Hierarchien, keine Ausreden. Wenn etwas nicht passt,
-                  liegt die Verantwortung bei mir – und ich{" "}
-                  <span className="text-slate-900">
-                    <Marker color="rgba(255,235,59,0.5)">löse es.</Marker>
+              <div className="prose prose-lg md:prose-2xl text-slate-500 leading-relaxed">
+                <p>
+                  Keine Hierarchien. Keine Ausreden. Wenn etwas nicht passt,
+                  liegt die Verantwortung bei mir.
+                </p>
+                <p>
+                  Ich liefere nicht nur Code, sondern{" "}
+                  <span className="text-slate-900 font-medium relative inline-block">
+                    Ergebnisse
+                    <svg
+                      className="absolute -bottom-2 left-0 w-full h-3 text-blue-500/30"
+                      viewBox="0 0 100 10"
+                      preserveAspectRatio="none"
+                    >
+                      <path
+                        d="M0 5 Q 50 10 100 5"
+                        stroke="currentColor"
+                        strokeWidth="2"
+                        fill="none"
+                      />
+                    </svg>
                   </span>
-                </LeadText>
-              </Reveal>
-              <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
-                {[
-                  "Vollständige Transparenz",
-                  "Ein Ansprechpartner",
-                  "Messbare Qualität",
-                  "Langfristige Partnerschaft",
-                ].map((item, i) => (
-                  <Reveal key={i} delay={0.2 + i * 0.05}>
-                    <div className="flex items-center gap-3 group">
-                      <div className="w-6 h-6 rounded-full bg-white border border-slate-200 flex items-center justify-center shrink-0 group-hover:bg-slate-900 group-hover:border-slate-900 group-hover:shadow-lg group-hover:shadow-blue-500/10 transition-all duration-300">
-                        <Check className="w-3 h-3 text-slate-400 group-hover:text-white transition-colors duration-300" />
-                      </div>
-                      <Label className="text-slate-900 text-xs md:text-sm">
-                        {item}
-                      </Label>
-                    </div>
-                  </Reveal>
-                ))}
+                  , auf die Sie bauen können.
+                </p>
+              </div>
+
+              <div className="grid grid-cols-1 md:grid-cols-2 gap-8 max-w-2xl text-left">
+                <div className="p-6 bg-slate-50 rounded-2xl border border-slate-100">
+                  <h4 className="font-bold text-slate-900 mb-2">
+                    Fixpreis-Garantie
+                  </h4>
+                  <p className="text-slate-500 text-sm">
+                    Keine versteckten Kosten. Der vereinbarte Preis ist final.
+                  </p>
+                </div>
+                <div className="p-6 bg-slate-50 rounded-2xl border border-slate-100">
+                  <h4 className="font-bold text-slate-900 mb-2">
+                    Satisfaction Guarantee
+                  </h4>
+                  <p className="text-slate-500 text-sm">
+                    Wir gehen erst live, wenn Sie zu 100% zufrieden sind.
+                  </p>
+                </div>
+              </div>
+
+              <div className="pt-8 md:pt-12 flex flex-col items-start">
+                <div className="w-64 md:w-80">
+                  <Signature delay={0.5} />
+                </div>
               </div>
             </div>
-
-            {/* Decorative terminal */}
-            <Reveal delay={0.3} className="min-w-0">
-              <CodeSnippet variant="terminal" className="opacity-70" />
-            </Reveal>
-          </div>
+          </Reveal>
         </div>
       </Section>
 
@@ -306,9 +320,7 @@ export default function AboutPage() {
               <LeadText className="text-lg md:text-4xl leading-tight max-w-2xl text-slate-400">
                 Lassen Sie uns gemeinsam etwas bauen, das{" "}
                 <span className="text-slate-900">
-                  <Marker delay={0.3} color="rgba(148,163,184,0.15)">
-                    wirklich funktioniert.
-                  </Marker>
+                  wirklich <Marker delay={0.3}>funktioniert.</Marker>
                 </span>
               </LeadText>
 

apps/web/app/case-studies/klz-cables/page.tsx

@@ -98,7 +98,7 @@ export default function KLZCablesCaseStudy() {
                 <div className="max-w-3xl border-l-[3px] border-slate-900 pl-6 md:pl-12">
                   <LeadText className="text-lg md:text-4xl leading-tight text-slate-900 font-medium">
                     Engineering eines <br className="hidden md:block" />
-                    <Marker delay={0.2}>B2B Commerce Systems.</Marker>
+                    <Marker delay={0.2}>Systems.</Marker>
                   </LeadText>
                   <BodyText className="mt-4 md:mt-6 text-base md:text-xl text-slate-500 max-w-xl leading-relaxed font-serif italic">
                     Vom statischen Altsystem zum industriellen Standard. Ich
@@ -172,8 +172,8 @@ export default function KLZCablesCaseStudy() {
                   Attribute in einer zentralen relationalen Instanz. Durch die
                   Implementierung nativer PHP-Services und den Verzicht auf
                   volatile Drittanbieter-Plugins wurde ein System geschaffen,
-                  das keine technologischen Überraschungen zulässt.{" "}
-                  <Marker delay={0.5}>Stability by Design.</Marker>
+                  das keine technologischen Überraschungen zulässt. Stability by{" "}
+                  <Marker delay={0.5}>Design.</Marker>
                 </BodyText>
               </div>
             </Reveal>

apps/web/app/page.tsx

@@ -25,6 +25,7 @@ import { IconList, IconListItem } from "../src/components/IconList";
 import { HeroSection } from "../src/components/HeroSection";
 import { GlitchText } from "../src/components/GlitchText";
 import { Marker } from "../src/components/Marker";
+import { PenCircle } from "../src/components/PenCircle";
 
 export default function LandingPage() {
   return (
@@ -45,12 +46,7 @@ export default function LandingPage() {
           <Reveal>
             <H3 className="max-w-3xl">
               Kein Agentur-Zirkus. <br />
-              <span className="text-slate-400">
-                Nur{" "}
-                <Marker delay={0.3} color="rgba(148,163,184,0.15)">
-                  Ergebnisse.
-                </Marker>
-              </span>
+              <Marker delay={0.3}>Ergebnisse.</Marker>
             </H3>
           </Reveal>
 
@@ -104,12 +100,7 @@ export default function LandingPage() {
           <Reveal>
             <H3 className="max-w-3xl">
               Ich arbeite für das Ergebnis, <br />
-              <span className="text-slate-400">
-                nicht gegen die{" "}
-                <Marker delay={0.4} color="rgba(148,163,184,0.1)">
-                  Uhr.
-                </Marker>
-              </span>
+              nicht gegen die <Marker delay={0.4}>Uhr.</Marker>
             </H3>
           </Reveal>
 
@@ -118,14 +109,24 @@ export default function LandingPage() {
               negativeLabel="Klassisch"
               negativeText="Wochen in Planung, bevor eine einzige Zeile Code geschrieben wird."
               positiveLabel="Mein Weg"
-              positiveText="Schnelle Prototypen. Ergebnisse in Tagen, nicht Monaten."
+              positiveText={
+                <>
+                  Schnelle Prototypen. Ergebnisse in{" "}
+                  <PenCircle delay={0.5}>Tagen</PenCircle>, nicht Monaten.
+                </>
+              }
               delay={0.1}
             />
             <ComparisonRow
               negativeLabel="Klassisch"
               negativeText="Unvorhersehbare Kosten durch Stundenabrechnungen."
               positiveLabel="Mein Weg"
-              positiveText="Fixpreise. Sie wissen von Anfang an, was es kostet."
+              positiveText={
+                <>
+                  <PenCircle delay={0.5}>Fixpreise.</PenCircle> Sie wissen von
+                  Anfang an, was es kostet.
+                </>
+              }
               reverse
               delay={0.2}
             />
@@ -290,7 +291,7 @@ export default function LandingPage() {
                   <LeadText className="text-lg md:text-3xl text-slate-400">
                     Beschreiben Sie kurz Ihr Vorhaben. Ich melde mich{" "}
                     <span className="text-slate-900 border-b-2 border-slate-900/10">
-                      <Marker color="rgba(255,235,59,0.5)">zeitnah</Marker>
+                      <Marker>zeitnah</Marker>
                     </span>{" "}
                     bei Ihnen.
                   </LeadText>

apps/web/app/websites/page.tsx

@@ -42,11 +42,9 @@ export default function WebsitesPage() {
                   SYSTEM ENGINEERING
                 </MonoLabel>
                 <H3 className="text-4xl md:text-8xl leading-[1.0] tracking-tighter">
-                  Websites, die <br />
+                  Websites, die einfach <br />
                   <span className="text-slate-400">
-                    <Marker color="rgba(255,235,59,0.5)">
-                      einfach funktionieren.
-                    </Marker>
+                    <Marker>funktionieren.</Marker>
                   </span>
                 </H3>
               </div>
@@ -121,9 +119,7 @@ export default function WebsitesPage() {
             <H3 className="text-2xl md:text-5xl leading-tight max-w-3xl">
               Geschwindigkeit ist <br />
               <span className="text-slate-400">
-                <Marker delay={0.3} color="rgba(148,163,184,0.15)">
-                  kein Extra. Sie ist Standard.
-                </Marker>
+                kein Extra. Sie ist <Marker delay={0.3}>Standard.</Marker>
               </span>
             </H3>
           </Reveal>