about

app/about/page.tsx

@@ -0,0 +1,349 @@
+import * as React from 'react';
+import Image from 'next/image';
+import { PageHeader } from '../../src/components/PageHeader';
+import { Section } from '../../src/components/Section';
+import { Reveal } from '../../src/components/Reveal';
+import { 
+  ExperienceIllustration, 
+  ResponsibilityIllustration, 
+  ResultIllustration,
+  ConceptSystem,
+  ConceptTarget,
+  ContactIllustration,
+  ConnectorBranch,
+  ConnectorStart,
+  ConnectorEnd,
+  ConnectorSplit,
+  HeroLines,
+  ParticleNetwork,
+  GridLines
+} from '../../src/components/Landing';
+import { Check, ArrowRight } from 'lucide-react';
+
+export default function AboutPage() {
+  return (
+    <div className="flex flex-col bg-white overflow-hidden relative">
+      {/* Background Elements */}
+      <ParticleNetwork className="opacity-20" />
+      <div className="fixed inset-0 pointer-events-none -z-20 opacity-[0.015]" style={{
+        backgroundImage: 'linear-gradient(#0f172a 1px, transparent 1px), linear-gradient(90deg, #0f172a 1px, transparent 1px)',
+        backgroundSize: '80px 80px'
+      }} />
+
+      {/* Hero Section */}
+      <section className="relative pt-40 pb-32 overflow-hidden border-b border-slate-50">
+        <div className="absolute top-0 left-1/2 -translate-x-1/2 w-full h-full opacity-10 pointer-events-none">
+            <HeroLines className="w-full h-full" />
+        </div>
+        <div className="absolute right-0 top-0 w-96 h-96 opacity-5 pointer-events-none">
+            <GridLines />
+        </div>
+        
+        <div className="narrow-container relative z-10">
+          <div className="flex flex-col items-center text-center space-y-12">
+            <Reveal>
+              <div className="relative">
+                {/* Structural rings around avatar */}
+                <div className="absolute inset-0 -m-8 border border-slate-100 rounded-full animate-[spin_20s_linear_infinite] opacity-50" />
+                <div className="absolute inset-0 -m-4 border border-slate-200 rounded-full animate-[spin_15s_linear_infinite_reverse] opacity-30" />
+                
+                <div className="relative w-32 h-32 md:w-40 md:h-40 rounded-full overflow-hidden border border-slate-200 shadow-2xl shadow-slate-200/50 bg-white p-1">
+                  <div className="w-full h-full rounded-full overflow-hidden">
+                    <img
+                      src="/header.webp"
+                      alt="Marc Mintel"
+                      className="w-full h-full object-cover grayscale transition-all duration-1000 ease-in-out scale-110 hover:scale-100"
+                    />
+                  </div>
+                </div>
+              </div>
+            </Reveal>
+
+            <div className="space-y-6 max-w-2xl">
+              <Reveal delay={0.1}>
+                <div className="flex items-center justify-center gap-3 mb-4">
+                    <div className="h-px w-8 bg-slate-900"></div>
+                    <span className="text-[10px] font-bold uppercase tracking-[0.4em] text-slate-900">Digital Architect</span>
+                    <div className="h-px w-8 bg-slate-900"></div>
+                </div>
+              </Reveal>
+              <PageHeader 
+                title={<>Über <span className="text-slate-300">mich.</span></>}
+                description="(oder: Warum das hier kein Agentur-Zirkus ist)"
+              />
+            </div>
+          </div>
+        </div>
+
+        {/* Connector to first section */}
+        <div className="absolute bottom-0 left-1/2 -translate-x-1/2 w-px h-16 bg-gradient-to-b from-transparent to-slate-200" />
+      </section>
+
+      {/* Section 01: Experience */}
+      <Section
+        number="01"
+        title="Erfahrung"
+        borderTop
+        connector={<ConnectorStart className="h-full" />}
+        illustration={<ExperienceIllustration className="w-32 h-32" />}
+      >
+        <div className="space-y-12">
+          <Reveal>
+            <h3 className="text-3xl md:text-5xl font-bold text-slate-900 leading-tight tracking-tight max-w-3xl">
+              Ich baue Websites und Systeme seit über 15 Jahren. <br />
+              <span className="text-slate-300">Weil ich es hasse, wenn Dinge nicht funktionieren.</span>
+            </h3>
+          </Reveal>
+
+          <div className="grid grid-cols-1 md:grid-cols-2 gap-8">
+            <Reveal delay={0.1}>
+              <div className="space-y-6">
+                <p className="text-xl text-slate-600 font-serif italic">
+                  In diesen 15 Jahren habe ich Agenturen von innen gesehen, Konzerne erlebt und Startups aufgebaut.
+                </p>
+                <ul className="space-y-4">
+                  {[
+                    'Marketingversprechen zerlegt',
+                    'Systeme repariert, die „fertig“ waren',
+                    'Gelernt, wie man Dinge baut, die einfach laufen'
+                  ].map((item, i) => (
+                    <li key={i} className="flex items-center gap-3 text-slate-500">
+                      <div className="w-1.5 h-1.5 bg-slate-300 rounded-full shrink-0" />
+                      {item}
+                    </li>
+                  ))}
+                </ul>
+              </div>
+            </Reveal>
+            <Reveal delay={0.2}>
+              <div className="p-8 bg-slate-50 rounded-3xl border border-slate-100">
+                <p className="text-slate-900 font-bold text-lg mb-4">Heute mache ich das ohne Agentur-Zwischenschichten.</p>
+                <div className="flex flex-wrap gap-4">
+                  {['Direkt', 'Sauber', 'Verantwortlich'].map((tag, i) => (
+                    <span key={i} className="px-4 py-2 bg-white border border-slate-200 rounded-full text-xs font-bold uppercase tracking-widest text-slate-400">
+                      {tag}
+                    </span>
+                  ))}
+                </div>
+              </div>
+            </Reveal>
+          </div>
+        </div>
+      </Section>
+
+      {/* Section 02: Responsibility */}
+      <Section
+        number="02"
+        title="Verantwortung"
+        variant="gray"
+        borderTop
+        connector={<ConnectorBranch className="h-full" />}
+        illustration={<ResponsibilityIllustration className="w-32 h-32" />}
+      >
+        <div className="space-y-12">
+          <Reveal>
+            <h3 className="text-3xl md:text-5xl font-bold text-slate-900 leading-tight tracking-tight max-w-3xl">
+              Ich habe fast alle Fehler schon für Sie gemacht. <br />
+              <span className="text-slate-300">(Damit Sie sie nicht machen müssen)</span>
+            </h3>
+          </Reveal>
+
+          <div className="grid grid-cols-1 md:grid-cols-12 gap-12 items-center">
+            <div className="md:col-span-7 space-y-8">
+              <Reveal delay={0.1}>
+                <p className="text-xl text-slate-600 font-serif italic">
+                  Ich habe als Designer angefangen, bin dann Entwickler geworden, und habe irgendwann gemerkt: Das Problem ist selten Technik. Es ist immer Zuständigkeit.
+                </p>
+              </Reveal>
+              <Reveal delay={0.2}>
+                <div className="flex items-start gap-6 p-6 bg-white rounded-2xl border border-slate-100 shadow-sm">
+                  <div className="w-12 h-12 bg-slate-900 text-white rounded-xl flex items-center justify-center shrink-0 font-bold">!</div>
+                  <p className="text-slate-900 font-medium">
+                    Wenn keiner verantwortlich ist, passiert nichts. Also habe ich mir angewöhnt, Verantwortung zu übernehmen.
+                  </p>
+                </div>
+              </Reveal>
+            </div>
+          </div>
+        </div>
+      </Section>
+
+      {/* Section 03: Systems */}
+      <Section
+        number="03"
+        title="Philosophie"
+        borderTop
+        connector={<ConnectorSplit className="h-full" />}
+        illustration={<ConceptSystem className="w-32 h-32" />}
+      >
+        <div className="space-y-16">
+          <Reveal>
+            <h3 className="text-3xl md:text-5xl font-bold text-slate-900 leading-tight tracking-tight max-w-3xl">
+              Warum ich Websites wie Systeme baue.
+            </h3>
+          </Reveal>
+
+          <div className="grid grid-cols-1 md:grid-cols-2 gap-12">
+            <div className="space-y-8">
+              <Reveal delay={0.1}>
+                <p className="text-slate-500 font-serif italic text-lg">
+                  Ich war viele Jahre Senior Developer in Firmen, in denen Millionenumsätze dranhingen, Fehler teuer waren und Performance nicht optional war.
+                </p>
+              </Reveal>
+              <div className="grid grid-cols-2 gap-4">
+                {['Schnell', 'Stabil', 'Boring', 'Erweiterbar', 'Wartungsarm', 'Unabhängig'].map((item, i) => (
+                  <Reveal key={i} delay={0.2 + i * 0.05}>
+                    <div className="flex items-center gap-2 text-slate-900 font-bold text-sm uppercase tracking-widest">
+                      <Check className="w-4 h-4 text-slate-400" />
+                      {item}
+                    </div>
+                  </Reveal>
+                ))}
+              </div>
+            </div>
+            <Reveal delay={0.3}>
+              <div className="relative p-10 bg-slate-900 text-white rounded-3xl overflow-hidden group">
+                <div className="absolute top-0 right-0 w-32 h-32 bg-white/5 -translate-y-16 translate-x-16 rounded-full blur-3xl group-hover:bg-white/10 transition-colors" />
+                <h4 className="text-2xl font-bold mb-6 relative z-10">Das prägt.</h4>
+                <p className="text-slate-400 font-serif italic text-lg relative z-10">
+                  Meine Websites sind nicht abhängig von Plugins oder Agenturen. Sie sind gebaut, um zu bleiben.
+                </p>
+              </div>
+            </Reveal>
+          </div>
+        </div>
+      </Section>
+
+      {/* Section 04: Roles */}
+      <Section
+        number="04"
+        title="Perspektive"
+        variant="gray"
+        borderTop
+        connector={<ConnectorBranch className="h-full" />}
+        illustration={<ConceptTarget className="w-32 h-32" />}
+      >
+        <div className="space-y-12">
+          <Reveal>
+            <h3 className="text-3xl md:text-5xl font-bold text-slate-900 leading-tight tracking-tight max-w-3xl">
+              Ich habe beide Seiten gesehen.
+            </h3>
+          </Reveal>
+
+          <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
+            {[
+              'Webdesigner', 'Entwickler', 'Marketing', 'Vertrieb',
+              'Agentur', 'Inhouse', 'Dienstleister', 'Unternehmer'
+            ].map((role, i) => (
+              <Reveal key={i} delay={i * 0.05}>
+                <div className="p-4 bg-white border border-slate-100 rounded-xl text-center hover:border-slate-300 transition-colors group">
+                  <span className="text-xs font-bold uppercase tracking-widest text-slate-400 group-hover:text-slate-900 transition-colors">{role}</span>
+                </div>
+              </Reveal>
+            ))}
+          </div>
+
+          <Reveal delay={0.4}>
+            <p className="text-2xl text-slate-600 font-serif italic max-w-2xl">
+              Ich weiß, was Unternehmen brauchen – und was sie nicht brauchen. (Meetings, Tickets, Workshops, PowerPoint.)
+            </p>
+          </Reveal>
+        </div>
+      </Section>
+
+      {/* Section 05: Result */}
+      <Section
+        number="05"
+        title="Ergebnis"
+        borderTop
+        connector={<ConnectorBranch className="h-full" />}
+        illustration={<ResultIllustration className="w-32 h-32" />}
+      >
+        <div className="space-y-16">
+          <Reveal>
+            <h3 className="text-3xl md:text-5xl font-bold text-slate-900 leading-tight tracking-tight max-w-3xl">
+              Was Kunden davon haben.
+            </h3>
+          </Reveal>
+
+          <div className="grid grid-cols-1 md:grid-cols-2 gap-12">
+            <div className="space-y-8">
+              <div className="space-y-4">
+                <span className="text-[10px] font-bold uppercase tracking-[0.3em] text-slate-400">Sie bekommen kein:</span>
+                <div className="flex flex-wrap gap-3">
+                  {['Projektmanager', 'Prozess', 'Team', 'Ticket', 'CMS-Drama'].map((item, i) => (
+                    <span key={i} className="px-4 py-2 border border-slate-100 rounded-full text-slate-400 line-through text-sm italic font-serif">
+                      {item}
+                    </span>
+                  ))}
+                </div>
+              </div>
+            </div>
+            <div className="space-y-8">
+              <div className="space-y-4">
+                <span className="text-[10px] font-bold uppercase tracking-[0.3em] text-slate-900">Sie bekommen:</span>
+                <div className="space-y-4">
+                  {[
+                    { label: 'Eine Person', desc: 'Direkter Kontakt, keine Stille Post.' },
+                    { label: 'Eine Verantwortung', desc: 'Ich stehe für das Ergebnis gerade.' },
+                    { label: 'Ein Ergebnis', desc: 'Funktionierende Systeme, keine Ausreden.' }
+                  ].map((item, i) => (
+                    <Reveal key={i} delay={0.2 + i * 0.1}>
+                      <div className="flex gap-4 items-start">
+                        <div className="w-6 h-6 rounded-full bg-slate-900 flex items-center justify-center shrink-0 mt-1">
+                          <Check className="w-3 h-3 text-white" />
+                        </div>
+                        <div>
+                          <div className="font-bold text-slate-900">{item.label}</div>
+                          <div className="text-slate-500 text-sm font-serif italic">{item.desc}</div>
+                        </div>
+                      </div>
+                    </Reveal>
+                  ))}
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </Section>
+
+      {/* Section 06: Today */}
+      <Section
+        number="06"
+        title="Heute"
+        variant="gray"
+        borderTop
+        connector={<ConnectorEnd className="h-full" />}
+        illustration={<ContactIllustration className="w-32 h-32" />}
+      >
+        <div className="space-y-12">
+          <Reveal>
+            <h3 className="text-3xl md:text-5xl font-bold text-slate-900 leading-tight tracking-tight max-w-3xl">
+              Heute baue ich Websites für Unternehmen, die keine Lust mehr auf Chaos haben.
+            </h3>
+          </Reveal>
+
+          <div className="p-12 bg-white rounded-[3rem] border border-slate-100 shadow-2xl shadow-slate-200/50 relative overflow-hidden group">
+            <div className="absolute top-0 right-0 w-64 h-64 bg-slate-50 -translate-y-32 translate-x-32 rounded-full blur-3xl group-hover:bg-slate-100 transition-colors" />
+            
+            <div className="relative z-10 space-y-8">
+              <p className="text-2xl text-slate-600 font-serif italic leading-relaxed max-w-2xl">
+                Ich übernehme das Thema komplett – damit es für Sie kein Thema mehr ist.
+              </p>
+              
+              <div className="pt-8">
+                <a
+                  href="/contact"
+                  className="inline-flex items-center gap-4 px-10 py-5 bg-slate-900 text-white rounded-full font-bold text-sm uppercase tracking-widest hover:bg-slate-800 transition-all duration-500 ease-[cubic-bezier(0.23,1,0.32,1)] hover:-translate-y-1 hover:shadow-2xl hover:shadow-slate-900/20 group"
+                >
+                  Projekt anfragen
+                  <ArrowRight className="w-5 h-5 group-hover:translate-x-1 transition-transform" />
+                </a>
+              </div>
+            </div>
+          </div>
+        </div>
+      </Section>
+    </div>
+  );
+}

docs/ABOUT.md

@@ -0,0 +1,123 @@
+Über mich
+
+Ich baue Websites und Systeme seit über 15 Jahren.
+Nicht weil ich Websites so liebe – sondern weil ich es hasse, wenn Dinge nicht funktionieren.
+
+In diesen 15 Jahren habe ich:
+	•	Agenturen von innen gesehen
+	•	Konzerne erlebt
+	•	Startups aufgebaut
+	•	Marketingversprechen zerlegt
+	•	Systeme repariert, die „fertig“ waren
+	•	und gelernt, wie man Dinge baut, die einfach laufen
+
+Heute mache ich das ohne Agentur-Zwischenschichten.
+Direkt. Sauber. Verantwortlich.
+
+⸻
+
+Ich habe fast alle Fehler schon für Sie gemacht
+
+(damit Sie sie nicht machen müssen)
+
+Ich habe als Designer angefangen,
+bin dann Entwickler geworden,
+und habe irgendwann gemerkt:
+
+Das Problem ist selten Technik.
+Es ist immer Zuständigkeit.
+
+Wenn keiner verantwortlich ist, passiert nichts.
+Also habe ich mir angewöhnt, Verantwortung zu übernehmen.
+
+⸻
+
+Warum ich Websites wie Systeme baue
+
+Ich war viele Jahre Senior Developer in Firmen, in denen:
+	•	Millionenumsätze dranhingen
+	•	Fehler teuer waren
+	•	Performance nicht optional war
+	•	Sicherheit kein Nice-to-Have war
+	•	„kurz mal ändern“ trotzdem passieren musste
+
+Das prägt.
+
+Deshalb sind meine Websites:
+	•	schnell
+	•	stabil
+	•	boring (im besten Sinne)
+	•	erweiterbar
+	•	wartungsarm
+	•	und nicht abhängig von Plugins oder Agenturen
+
+⸻
+
+Ich habe beide Seiten gesehen
+
+Ich war:
+	•	Webdesigner
+	•	Entwickler
+	•	Marketing
+	•	Vertrieb
+	•	Agentur
+	•	Inhouse
+	•	Dienstleister
+	•	Unternehmer
+
+Das heißt:
+
+Ich weiß, was Unternehmen brauchen –
+und was sie nicht brauchen.
+
+(Meetings, Tickets, Workshops, PowerPoint.)
+
+⸻
+
+Was Kunden davon haben
+
+Sie bekommen:
+	•	keinen Projektmanager
+	•	keinen Prozess
+	•	kein Team
+	•	kein Ticket
+	•	kein CMS-Drama
+
+Sie bekommen:
+	•	eine Person
+	•	eine Verantwortung
+	•	ein Ergebnis
+
+⸻
+
+Ein kurzer Überblick (ohne Lebenslauf-Gefühl)
+
+Ich habe u. a. gearbeitet bei:
+	•	Agenturen
+	•	E-Commerce-Plattformen
+	•	SaaS-Firmen
+	•	Marketing-Teams
+	•	internationalen Unternehmen
+	•	Mittelständlern
+	•	und Konzernen
+
+Als:
+	•	Web Designer
+	•	Frontend Developer
+	•	Software Developer
+	•	Senior Developer
+	•	und später Gründer
+
+Das Ergebnis daraus ist nicht ein Titel.
+Sondern eine Arbeitsweise.
+
+⸻
+
+Heute
+
+Heute baue ich Websites und Systeme für Unternehmen,
+die keine Lust mehr auf Agenturen haben
+und keine Zeit für Chaos.
+
+Ich übernehme das Thema komplett –
+damit es für Sie kein Thema mehr ist.

src/components/Footer.tsx

@@ -23,6 +23,7 @@ export const Footer: React.FC = () => {
           <div className="flex flex-col md:items-end gap-4 text-sm font-mono text-slate-300 uppercase tracking-widest">
             <span>© {currentYear}</span>
             <div className="flex gap-8">
+              <a href="/about" className="hover:text-slate-900 transition-colors no-underline">Über mich</a>
               <a href="/contact" className="hover:text-slate-900 transition-colors no-underline">Kontakt</a>
               <a href="https://github.com/marcmintel" className="hover:text-slate-900 transition-colors no-underline">GitHub</a>
             </div>

src/components/Header.tsx

@@ -39,16 +39,24 @@ export const Header: React.FC = () => {
         </Link>
         
         <nav className="flex items-center gap-8">
-          <Link 
-            href="/websites" 
+          <Link
+            href="/about"
+            className={`text-xs font-bold uppercase tracking-widest transition-colors ${
+              isActive('/about') ? 'text-slate-900' : 'text-slate-400 hover:text-slate-900'
+            }`}
+          >
+            Über mich
+          </Link>
+          <Link
+            href="/websites"
             className={`text-xs font-bold uppercase tracking-widest transition-colors ${
               isActive('/websites') ? 'text-slate-900' : 'text-slate-400 hover:text-slate-900'
             }`}
           >
             Websites
           </Link>
-          <Link 
-            href="/blog" 
+          <Link
+            href="/blog"
             className={`text-xs font-bold uppercase tracking-widest transition-colors ${
               isActive('/blog') || pathname?.startsWith('/blog/') ? 'text-slate-900' : 'text-slate-400 hover:text-slate-900'
             }`}

src/components/Landing/Illustrations/ExperienceIllustration.tsx

@@ -0,0 +1,64 @@
+'use client';
+
+import * as React from 'react';
+import { motion } from 'framer-motion';
+import { IllustrationProps } from './types';
+
+export const ExperienceIllustration: React.FC<IllustrationProps> = ({ className = "", delay = 0 }) => (
+  <svg className={className} viewBox="0 0 120 120" fill="none" xmlns="http://www.w3.org/2000/svg">
+    {/* Timeline line */}
+    <motion.path
+      d="M 20 100 H 100"
+      stroke="currentColor"
+      strokeWidth="1"
+      className="text-slate-200"
+      initial={{ pathLength: 0 }}
+      whileInView={{ pathLength: 1 }}
+      viewport={{ once: true }}
+      transition={{ duration: 1.5, delay }}
+    />
+    
+    {/* Experience nodes */}
+    {[
+      { x: 30, y: 80, label: "Agency" },
+      { x: 50, y: 60, label: "Corp" },
+      { x: 70, y: 40, label: "Startup" },
+      { x: 90, y: 20, label: "Now" }
+    ].map((node, i) => (
+      <React.Fragment key={i}>
+        <motion.circle
+          cx={node.x} cy={node.y} r="4"
+          className={i === 3 ? "fill-slate-900" : "fill-slate-300"}
+          initial={{ scale: 0 }}
+          whileInView={{ scale: 1 }}
+          viewport={{ once: true }}
+          transition={{ delay: delay + 0.5 + i * 0.2, type: "spring" }}
+        />
+        {i > 0 && (
+          <motion.path
+            d={`M ${30 + (i-1)*20} ${80 - (i-1)*20} L ${node.x} ${node.y}`}
+            stroke="currentColor"
+            strokeWidth="1"
+            className="text-slate-200"
+            initial={{ pathLength: 0 }}
+            whileInView={{ pathLength: 1 }}
+            viewport={{ once: true }}
+            transition={{ duration: 0.5, delay: delay + 0.5 + (i-1) * 0.2 }}
+          />
+        )}
+      </React.Fragment>
+    ))}
+    
+    {/* 15+ Years indicator */}
+    <motion.text
+      x="20" y="115"
+      className="text-[8px] font-bold fill-slate-400 uppercase tracking-widest"
+      initial={{ opacity: 0 }}
+      whileInView={{ opacity: 1 }}
+      viewport={{ once: true }}
+      transition={{ delay: delay + 1.5 }}
+    >
+      15+ YEARS
+    </motion.text>
+  </svg>
+);

src/components/Landing/Illustrations/ResponsibilityIllustration.tsx

@@ -0,0 +1,52 @@
+'use client';
+
+import * as React from 'react';
+import { motion } from 'framer-motion';
+import { IllustrationProps } from './types';
+
+export const ResponsibilityIllustration: React.FC<IllustrationProps> = ({ className = "", delay = 0 }) => (
+  <svg className={className} viewBox="0 0 120 120" fill="none" xmlns="http://www.w3.org/2000/svg">
+    {/* Shield / Responsibility shape */}
+    <motion.path
+      d="M 60 20 L 90 35 V 65 C 90 85 60 100 60 100 C 60 100 30 85 30 65 V 35 L 60 20 Z"
+      stroke="currentColor"
+      strokeWidth="1"
+      className="text-slate-900"
+      initial={{ pathLength: 0, fill: "rgba(15, 23, 42, 0)" }}
+      whileInView={{ pathLength: 1, fill: "rgba(15, 23, 42, 0.05)" }}
+      viewport={{ once: true }}
+      transition={{ duration: 1.5, delay }}
+    />
+    
+    {/* Core point */}
+    <motion.circle
+      cx="60" cy="55" r="8"
+      className="fill-slate-900"
+      initial={{ scale: 0 }}
+      whileInView={{ scale: 1 }}
+      viewport={{ once: true }}
+      transition={{ delay: delay + 1, type: "spring" }}
+    />
+    
+    {/* Responsibility lines */}
+    {[0, 120, 240].map((angle, i) => {
+      const x1 = 60 + Math.cos((angle * Math.PI) / 180) * 12;
+      const y1 = 55 + Math.sin((angle * Math.PI) / 180) * 12;
+      const x2 = 60 + Math.cos((angle * Math.PI) / 180) * 30;
+      const y2 = 55 + Math.sin((angle * Math.PI) / 180) * 30;
+      return (
+        <motion.line
+          key={i}
+          x1={x1} y1={y1} x2={x2} y2={y2}
+          stroke="currentColor"
+          strokeWidth="1"
+          className="text-slate-400"
+          initial={{ pathLength: 0 }}
+          whileInView={{ pathLength: 1 }}
+          viewport={{ once: true }}
+          transition={{ delay: delay + 1.2 + i * 0.2 }}
+        />
+      );
+    })}
+  </svg>
+);

src/components/Landing/Illustrations/ResultIllustration.tsx

@@ -0,0 +1,54 @@
+'use client';
+
+import * as React from 'react';
+import { motion } from 'framer-motion';
+import { IllustrationProps } from './types';
+
+export const ResultIllustration: React.FC<IllustrationProps> = ({ className = "", delay = 0 }) => (
+  <svg className={className} viewBox="0 0 120 120" fill="none" xmlns="http://www.w3.org/2000/svg">
+    {/* Result Box */}
+    <motion.rect
+      x="30" y="30" width="60" height="60" rx="4"
+      stroke="currentColor"
+      strokeWidth="1"
+      className="text-slate-900"
+      initial={{ pathLength: 0, rotate: -10, opacity: 0 }}
+      whileInView={{ pathLength: 1, rotate: 0, opacity: 1 }}
+      viewport={{ once: true }}
+      transition={{ duration: 1, delay }}
+    />
+    
+    {/* Checkmark */}
+    <motion.path
+      d="M 45 60 L 55 70 L 75 50"
+      stroke="currentColor"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      className="text-slate-900"
+      initial={{ pathLength: 0 }}
+      whileInView={{ pathLength: 1 }}
+      viewport={{ once: true }}
+      transition={{ duration: 0.5, delay: delay + 1 }}
+    />
+    
+    {/* Sparkles */}
+    {[
+      { x: 25, y: 25 },
+      { x: 95, y: 35 },
+      { x: 85, y: 95 }
+    ].map((pos, i) => (
+      <motion.path
+        key={i}
+        d={`M ${pos.x} ${pos.y-4} V ${pos.y+4} M ${pos.x-4} ${pos.y} H ${pos.x+4}`}
+        stroke="currentColor"
+        strokeWidth="1"
+        className="text-slate-300"
+        initial={{ scale: 0, opacity: 0 }}
+        whileInView={{ scale: 1, opacity: 1 }}
+        viewport={{ once: true }}
+        transition={{ delay: delay + 1.5 + i * 0.2, type: "spring" }}
+      />
+    ))}
+  </svg>
+);

src/components/Landing/Illustrations/index.ts

@@ -10,3 +10,6 @@ export * from './ConceptTarget';
 export * from './ConceptMessy';
 export * from './HeroArchitecture';
 export * from './HeroMainIllustration';
+export * from './ExperienceIllustration';
+export * from './ResponsibilityIllustration';
+export * from './ResultIllustration';

src/components/Landing/index.ts

@@ -1,6 +1,7 @@
 export * from './AbstractLines';
 export * from './ExplanatoryIllustrations';
 export * from './ConceptIllustrations';
+export * from './Illustrations';
 export * from './ComparisonRow';
 export * from './FeatureCard';
 export * from './HeroItem';

src/types/images.d.ts

@@ -0,0 +1,24 @@
+declare module '*.svg' {
+  const content: any;
+  export default content;
+}
+
+declare module '*.webp' {
+  const content: any;
+  export default content;
+}
+
+declare module '*.png' {
+  const content: any;
+  export default content;
+}
+
+declare module '*.jpg' {
+  const content: any;
+  export default content;
+}
+
+declare module '*.jpeg' {
+  const content: any;
+  export default content;
+}

src/types/svg.d.ts

@@ -1,4 +0,0 @@
-declare module '*.svg' {
-  const content: any;
-  export default content;
-}