pages

app/about/page.tsx

@@ -10,28 +10,24 @@ import {
   ConceptSystem,
   ConceptTarget,
   ContactIllustration,
-  ConnectorBranch,
-  ConnectorStart,
-  ConnectorEnd,
-  ConnectorSplit,
   HeroLines,
   ParticleNetwork,
   GridLines
 } from '../../src/components/Landing';
-import { Check, ArrowRight } from 'lucide-react';
+import { Check } from 'lucide-react';
+import { H3, H4, LeadText, BodyText, Label, MonoLabel } from '../../src/components/Typography';
+import { BackgroundGrid, Card, Container } from '../../src/components/Layout';
+import { Button } from '../../src/components/Button';
 
 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'
-      }} />
+      <BackgroundGrid />
 
       {/* Hero Section */}
-      <section className="relative pt-40 pb-32 overflow-hidden border-b border-slate-50">
+      <section className="relative pt-32 pb-24 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>
@@ -39,41 +35,42 @@ export default function AboutPage() {
             <GridLines />
         </div>
         
-        <div className="narrow-container relative z-10">
+        <Container variant="narrow" className="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="absolute inset-0 -m-8 border border-slate-100 rounded-full animate-[spin_30s_linear_infinite] opacity-50" />
+                <div className="absolute inset-0 -m-4 border border-slate-200 rounded-full animate-[spin_20s_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="relative w-32 h-32 md:w-40 md:h-40 rounded-full overflow-hidden border border-slate-200 shadow-xl bg-white p-1 group">
                   <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"
+                      className="w-full h-full object-cover grayscale transition-all duration-1000 ease-in-out scale-110 group-hover:scale-100 group-hover:grayscale-0"
                     />
                   </div>
                 </div>
               </div>
             </Reveal>
 
-            <div className="space-y-6 max-w-2xl">
+            <div className="space-y-6 max-w-3xl">
               <Reveal delay={0.1}>
-                <div className="flex items-center justify-center gap-3 mb-4">
+                <div className="flex items-center justify-center gap-4 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>
+                    <MonoLabel className="text-slate-900">Digital Architect</MonoLabel>
                     <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)"
+                title={<>Über <span className="text-slate-200">mich.</span></>}
+                description="Warum ich tue, was ich tue – und wie Sie davon profitieren."
+                className="pt-0 md:pt-0"
               />
             </div>
           </div>
-        </div>
+        </Container>
 
         {/* 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" />
@@ -84,48 +81,47 @@ export default function AboutPage() {
         number="01"
         title="Erfahrung"
         borderTop
-        connector={<ConnectorStart className="h-full" />}
-        illustration={<ExperienceIllustration className="w-32 h-32" />}
+        illustration={<ExperienceIllustration className="w-24 h-24" />}
       >
         <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>
+            <H3 className="text-3xl md:text-5xl leading-tight max-w-3xl">
+              15 Jahre Web-Entwicklung. <br />
+              <span className="text-slate-200">Vom Designer zum Architekten.</span>
+            </H3>
           </Reveal>
 
-          <div className="grid grid-cols-1 md:grid-cols-2 gap-8">
+          <div className="grid grid-cols-1 md:grid-cols-2 gap-12">
             <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>
+              <div className="space-y-8">
+                <LeadText className="text-xl md:text-2xl text-slate-400">
+                  Ich habe Agenturen, Konzerne und Startups von innen gesehen. Dabei habe ich gelernt, what really counts: <span className="text-slate-900">Ergebnisse, nicht Prozesse.</span>
+                </LeadText>
                 <ul className="space-y-4">
                   {[
-                    'Marketingversprechen zerlegt',
-                    'Systeme repariert, die „fertig“ waren',
-                    'Gelernt, wie man Dinge baut, die einfach laufen'
+                    'Komplexe Systeme vereinfacht',
+                    'Performance-Probleme gelöst',
+                    'Nachhaltige Software-Architekturen gebaut'
                   ].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 key={i} className="flex items-center gap-4 group">
+                      <div className="w-1.5 h-1.5 bg-slate-900 rounded-full group-hover:scale-150 transition-transform" />
+                      <BodyText className="text-lg">{item}</BodyText>
                     </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}
+              <Card variant="gray" hover={false} padding="normal" className="group">
+                <H4 className="text-2xl mb-6">Mein Fokus heute: Direkte Zusammenarbeit ohne Reibungsverluste.</H4>
+                <div className="flex flex-wrap gap-3">
+                  {['Effizient', 'Pragmatisch', 'Verlässlich'].map((tag, i) => (
+                    <span key={i} className="px-4 py-2 bg-white border border-slate-200 rounded-full shadow-sm">
+                      <Label className="text-slate-900">{tag}</Label>
                     </span>
                   ))}
                 </div>
-              </div>
+              </Card>
             </Reveal>
           </div>
         </div>
@@ -137,31 +133,30 @@ export default function AboutPage() {
         title="Verantwortung"
         variant="gray"
         borderTop
-        connector={<ConnectorBranch className="h-full" />}
-        illustration={<ResponsibilityIllustration className="w-32 h-32" />}
+        illustration={<ResponsibilityIllustration className="w-24 h-24" />}
       >
         <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>
+            <H3 className="text-3xl md:text-5xl leading-tight max-w-3xl">
+              Ich stehe für meine <br />
+              <span className="text-slate-200">Arbeit gerade.</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">
+            <div className="md:col-span-8 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>
+                <LeadText className="text-xl md:text-2xl text-slate-400">
+                  In der klassischen Agenturwelt verschwindet Verantwortung oft hinter Hierarchien. Bei mir gibt es nur <span className="text-slate-900">einen Ansprechpartner:</span> Mich.
+                </LeadText>
               </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>
+                <Card variant="white" padding="normal" className="flex flex-row items-start gap-6 group">
+                  <div className="w-12 h-12 bg-slate-900 text-white rounded-xl flex items-center justify-center shrink-0 font-bold text-xl group-hover:rotate-12 transition-transform duration-500">!</div>
+                  <BodyText className="text-slate-900 font-medium text-lg md:text-xl leading-relaxed">
+                    Ich übernehme die volle Verantwortung für die technische Umsetzung und Qualität Ihres Projekts. Ohne Ausreden.
+                  </BodyText>
+                </Card>
               </Reveal>
             </div>
           </div>
@@ -173,129 +168,94 @@ export default function AboutPage() {
         number="03"
         title="Philosophie"
         borderTop
-        connector={<ConnectorSplit className="h-full" />}
-        illustration={<ConceptSystem className="w-32 h-32" />}
+        illustration={<ConceptSystem className="w-24 h-24" />}
       >
         <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>
+            <H3 className="text-3xl md:text-5xl leading-tight max-w-3xl">
+              Nachhaltigkeit durch <br />
+              <span className="text-slate-200">sauberen Code.</span>
+            </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>
+                <LeadText className="text-xl text-slate-400">
+                  Ich baue keine Wegwerf-Produkte. Meine Systeme sind so konzipiert, dass sie mit Ihrem Unternehmen <span className="text-slate-900">wachsen können.</span>
+                </LeadText>
               </Reveal>
               <div className="grid grid-cols-2 gap-4">
-                {['Schnell', 'Stabil', 'Boring', 'Erweiterbar', 'Wartungsarm', 'Unabhängig'].map((item, i) => (
+                {['Skalierbar', 'Wartbar', 'Performant', 'Sicher', 'Unabhängig', 'Zukunftssicher'].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 className="flex items-center gap-3 group">
+                      <div className="w-5 h-5 rounded-full bg-slate-50 flex items-center justify-center group-hover:bg-slate-900 transition-colors duration-500">
+                        <Check className="w-2.5 h-2.5 text-slate-400 group-hover:text-white" />
+                      </div>
+                      <Label className="text-slate-900">{item}</Label>
                     </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>
+              <Card variant="dark" padding="normal" className="relative rounded-2xl overflow-hidden group">
+                <div className="absolute top-0 right-0 w-48 h-48 bg-white/5 -translate-y-24 translate-x-24 rounded-full blur-3xl group-hover:bg-white/10 transition-colors duration-1000" />
+                <H4 className="text-white text-2xl mb-6 relative z-10">Kein Vendor Lock-in.</H4>
+                <LeadText className="text-slate-400 text-lg relative z-10 leading-relaxed">
+                  Sie behalten die volle Kontrolle über Ihren Code und Ihre Daten. Keine Abhängigkeit von proprietären Systemen.
+                </LeadText>
+              </Card>
             </Reveal>
           </div>
         </div>
       </Section>
 
-      {/* Section 04: Roles */}
+      {/* Section 04: Result */}
       <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" />}
+        illustration={<ResultIllustration className="w-24 h-24" />}
       >
         <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>
+            <H3 className="text-3xl md:text-5xl leading-tight max-w-3xl">
+              Was Sie von mir <br />
+              <span className="text-slate-200">erwarten können.</span>
+            </H3>
           </Reveal>
 
-          <div className="grid grid-cols-1 md:grid-cols-2 gap-12">
+          <div className="grid grid-cols-1 md:grid-cols-2 gap-16">
             <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="space-y-6">
+                <Label>Kein:</Label>
                 <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}
+                  {['Agentur-Zirkus', 'Meeting-Marathon', 'Ticket-Wahnsinn', 'CMS-Frust'].map((item, i) => (
+                    <span key={i} className="px-4 py-2 border border-slate-100 rounded-full bg-slate-50/50">
+                      <BodyText className="text-slate-400 line-through text-base mb-0">{item}</BodyText>
                     </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">
+              <div className="space-y-6">
+                <Label className="text-slate-900">Sondern:</Label>
+                <div className="space-y-8">
                   {[
-                    { 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.' }
+                    { label: 'Direkte Kommunikation', desc: 'Kurze Wege, schnelle Entscheidungen.' },
+                    { label: 'Echte Expertise', desc: 'Fundiertes Wissen aus 15 Jahren Praxis.' },
+                    { label: 'Messbare Qualität', desc: 'Code, der hält, was er verspricht.' }
                   ].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 className="flex gap-6 items-start group">
+                        <div className="w-8 h-8 rounded-full bg-slate-900 flex items-center justify-center shrink-0 mt-1 group-hover:scale-110 transition-transform">
+                          <Check className="w-4 h-4 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 className="space-y-1">
+                          <H4 className="text-xl">{item.label}</H4>
+                          <BodyText className="text-base text-slate-400">{item.desc}</BodyText>
                         </div>
                       </div>
                     </Reveal>
@@ -307,41 +267,37 @@ export default function AboutPage() {
         </div>
       </Section>
 
-      {/* Section 06: Today */}
+      {/* Section 05: Today */}
       <Section
-        number="06"
-        title="Heute"
+        number="05"
+        title="Kontakt"
         variant="gray"
         borderTop
-        connector={<ConnectorEnd className="h-full" />}
-        illustration={<ContactIllustration className="w-32 h-32" />}
+        illustration={<ContactIllustration className="w-24 h-24" />}
       >
         <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>
+            <H3 className="text-3xl md:text-5xl leading-tight max-w-3xl">
+              Bereit für eine <br />
+              <span className="text-slate-200">Zusammenarbeit?</span>
+            </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" />
+          <Card variant="white" hover={false} padding="large" className="rounded-3xl shadow-xl relative overflow-hidden group">
+            <div className="absolute top-0 right-0 w-96 h-96 bg-slate-50 -translate-y-1/2 translate-x-1/2 rounded-full blur-[80px] group-hover:bg-slate-100 transition-colors duration-1000" />
             
             <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>
+              <LeadText className="text-2xl md:text-4xl leading-tight max-w-2xl text-slate-400">
+                Lassen Sie uns gemeinsam etwas bauen, das <span className="text-slate-900">wirklich funktioniert.</span>
+              </LeadText>
               
-              <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"
-                >
+              <div className="pt-4">
+                <Button href="/contact">
                   Projekt anfragen
-                  <ArrowRight className="w-5 h-5 group-hover:translate-x-1 transition-transform" />
-                </a>
+                </Button>
               </div>
             </div>
-          </div>
+          </Card>
         </div>
       </Section>
     </div>