pages

app/websites/page.tsx

@@ -1,6 +1,5 @@
 'use client';
 
-import { Info, Check, Zap, Shield, Code, MessageSquare, RefreshCw, Layout, ArrowRight } from 'lucide-react';
 import { PageHeader } from '../../src/components/PageHeader';
 import { Reveal } from '../../src/components/Reveal';
 import { Section } from '../../src/components/Section';
@@ -10,23 +9,28 @@ import {
   SolidFoundation,
   LayerSeparation,
   DirectService,
-  AgencyChaos,
-  TaskDone
-} from '../../src/components/Landing/Illustrations/WebsitesDescriptive';
-import { motion } from 'framer-motion';
+  TaskDone,
+  ConceptAutomation,
+  ConceptCode,
+  ConceptCommunication,
+  ConceptPrototyping,
+  ConceptSystem,
+  ConceptTarget
+} from '../../src/components/Landing';
+import { Check } from 'lucide-react';
+import { H2, H3, H4, LeadText, BodyText, Label } from '../../src/components/Typography';
+import { BackgroundGrid, Card } from '../../src/components/Layout';
+import { MotionButton } from '../../src/components/Button';
 
 export default function WebsitesPage() {
   return (
     <div className="flex flex-col bg-white overflow-hidden relative">
-      {/* Subtle Grid Pattern Overlay */}
-      <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 />
 
       <PageHeader 
-        title={<>Websites, die <br /><span className="text-slate-300">einfach funktionieren.</span></>}
-        description="Die meisten Websites funktionieren. Bis jemand sie anfasst. Ich baue Websites so, dass das alles egal ist."
+        title={<>Websites, die <br /><span className="text-slate-200">einfach funktionieren.</span></>}
+        description="Keine Baukästen, keine Plugins, kein Overhead. Nur sauberer Code und maximale Performance."
         backLink={{ href: '/', label: 'Zurück' }}
         backgroundSymbol="W"
       />
@@ -36,32 +40,34 @@ export default function WebsitesPage() {
         number="01" 
         title="Der Ansatz"
         borderTop
-        illustration={<SystemArchitecture className="w-32 h-32" />}
+        illustration={<SystemArchitecture 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">
+            <H3 className="text-3xl md:text-5xl leading-tight max-w-3xl">
               Ich baue Websites wie Systeme – <br />
-              <span className="text-slate-300">nicht wie Broschüren.</span>
-            </h3>
+              <span className="text-slate-200">nicht wie Broschüren.</span>
+            </H3>
           </Reveal>
           <Reveal delay={0.2}>
-            <p className="text-xl md:text-2xl font-serif italic text-slate-600 max-w-2xl">
-              Eine Website ist kein Flyer. Sie ist ein System, das jeden Tag arbeitet. 
-              Deshalb baue ich sie stabil, schnell und vorhersehbar.
-            </p>
+            <LeadText className="text-xl md:text-2xl max-w-2xl text-slate-400">
+              Eine Website ist kein Flyer. Sie ist ein <span className="text-slate-900">Werkzeug</span>, das jeden Tag arbeitet. 
+              Deshalb baue ich sie stabil, schnell und wartungsfrei.
+            </LeadText>
           </Reveal>
           <Reveal delay={0.4}>
             <div className="grid grid-cols-2 md:grid-cols-4 gap-8 pt-8">
               {[
-                { label: 'Stabil', icon: Shield },
-                { label: 'Schnell', icon: Zap },
-                { label: 'Vorhersehbar', icon: Layout },
-                { label: 'Sicher', icon: Info },
+                { label: 'Stabil', icon: ConceptSystem },
+                { label: 'Schnell', icon: ConceptAutomation },
+                { label: 'Wartungsfrei', icon: ConceptCode },
+                { label: 'Sicher', icon: ConceptTarget },
               ].map((item, i) => (
-                <div key={i} className="flex flex-col gap-3">
-                  <item.icon className="w-5 h-5 text-slate-300" />
-                  <span className="text-[10px] font-bold uppercase tracking-widest text-slate-900">{item.label}</span>
+                <div key={i} className="flex flex-col gap-3 group">
+                  <div className="w-12 h-12 rounded-xl bg-slate-50 flex items-center justify-center border border-slate-100 group-hover:scale-110 transition-transform duration-500">
+                    <item.icon className="w-6 h-6" />
+                  </div>
+                  <Label className="text-slate-900">{item.label}</Label>
                 </div>
               ))}
             </div>
@@ -74,42 +80,47 @@ export default function WebsitesPage() {
         number="02" 
         title="Performance"
         borderTop
-        illustration={<SpeedPerformance className="w-32 h-32" />}
+        variant="gray"
+        illustration={<SpeedPerformance 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">
+            <H3 className="text-3xl md:text-5xl leading-tight max-w-3xl">
               Geschwindigkeit ist <br />
-              <span className="text-slate-300">kein Extra. Sie ist Standard.</span>
-            </h3>
+              <span className="text-slate-200">kein Extra. Sie ist Standard.</span>
+            </H3>
           </Reveal>
-          <Reveal delay={0.2}>
-            <p className="text-xl md:text-2xl font-serif italic text-slate-600 max-w-2xl">
-              Viele Websites sind langsam, weil sie zusammengeklickt sind. Meine sind schnell, weil sie gebaut sind.
-            </p>
-          </Reveal>
-          <div className="grid grid-cols-1 md:grid-cols-2 gap-12 pt-8">
-            <Reveal delay={0.4}>
-              <ul className="space-y-6">
-                {[
-                  'Seiten laden sofort',
-                  'Google mag sie (SEO)',
-                  'Besucher bleiben länger',
-                  'Bessere Sichtbarkeit',
-                ].map((item, i) => (
-                  <li key={i} className="flex items-center gap-4 text-lg text-slate-600 font-serif italic">
-                    <div className="w-1.5 h-1.5 bg-slate-900 rounded-full" />
-                    {item}
-                  </li>
-                ))}
-              </ul>
-            </Reveal>
-            <Reveal delay={0.6}>
-              <div className="p-10 bg-slate-50 rounded-3xl border border-slate-100 flex flex-col justify-center items-center text-center group">
-                <div className="text-7xl md:text-9xl font-bold text-slate-900 tracking-tighter group-hover:scale-110 transition-transform duration-500">90+</div>
-                <div className="text-slate-400 font-serif italic text-lg mt-4">Pagespeed Normalzustand</div>
-              </div>
-            </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.2}>
+                <LeadText className="text-xl text-slate-400">
+                  Viele Websites sind langsam, weil sie zusammengeklickt sind. Meine sind schnell, weil sie <span className="text-slate-900">von Grund auf</span> entwickelt wurden.
+                </LeadText>
+              </Reveal>
+              <Reveal delay={0.4}>
+                <ul className="space-y-4">
+                  {[
+                    'Seiten laden ohne Verzögerung',
+                    'Optimiert für Suchmaschinen (SEO)',
+                    'Bessere Nutzererfahrung',
+                    'Höhere Conversion-Rates',
+                  ].map((item, i) => (
+                    <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" />
+                      <LeadText className="text-lg md:text-xl">{item}</LeadText>
+                    </li>
+                  ))}
+                </ul>
+              </Reveal>
+            </div>
+            <div className="md:col-span-5">
+              <Reveal delay={0.6}>
+                <Card variant="white" padding="normal" className="text-center group">
+                  <div className="text-7xl md:text-8xl font-bold text-slate-900 tracking-tighter group-hover:scale-110 transition-transform duration-700">90+</div>
+                  <Label className="mt-4">Pagespeed Score</Label>
+                </Card>
+              </Reveal>
+            </div>
           </div>
         </div>
       </Section>
@@ -117,33 +128,39 @@ export default function WebsitesPage() {
       {/* No Maintenance */}
       <Section 
         number="03" 
-        title="Wartungsfrei"
+        title="Technik"
         borderTop
-        illustration={<SolidFoundation className="w-32 h-32" />}
+        illustration={<SolidFoundation 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">
+            <H3 className="text-3xl md:text-5xl leading-tight max-w-3xl">
               Keine Plugins. <br />
-              <span className="text-slate-300">Keine Wartungshölle.</span>
-            </h3>
+              <span className="text-slate-200">Keine Abhängigkeiten.</span>
+            </H3>
           </Reveal>
           <Reveal delay={0.2}>
-            <p className="text-xl md:text-2xl font-serif italic text-slate-600 max-w-2xl">
-              Ich nutze keine Baukästen oder Plugin-Sammlungen, die sich selbst zerstören. 
-              Ihre Website besteht aus sauberem Code und einer klaren Struktur.
-            </p>
+            <LeadText className="text-xl md:text-2xl max-w-2xl text-slate-400">
+              Ich nutze keine Baukästen, die sich selbst zerstören. 
+              Ihre Website besteht aus <span className="text-slate-900">sauberem Code</span>, der Ihnen gehört.
+            </LeadText>
           </Reveal>
           <Reveal delay={0.4}>
             <div className="grid grid-cols-1 md:grid-cols-2 gap-8 pt-8">
-              <div className="p-8 bg-white border border-slate-100 rounded-2xl shadow-sm hover:border-slate-300 transition-colors">
-                <div className="font-bold text-slate-900 mb-2 uppercase tracking-widest text-[10px]">Technik</div>
-                <p className="text-slate-500 font-serif italic">Sauberer Code & feste Bausteine.</p>
-              </div>
-              <div className="p-8 bg-white border border-slate-100 rounded-2xl shadow-sm hover:border-slate-300 transition-colors">
-                <div className="font-bold text-slate-900 mb-2 uppercase tracking-widest text-[10px]">Sicherheit</div>
-                <p className="text-slate-500 font-serif italic">Wenn etwas geändert wird, geht nichts kaputt.</p>
-              </div>
+              <Card variant="white" padding="normal" className="group">
+                <div className="space-y-4">
+                  <Label className="text-slate-900 mb-2">Code Qualität</Label>
+                  <H4 className="text-2xl">Langlebigkeit</H4>
+                  <BodyText>Modernste Web-Technologien für maximale Performance und Wartbarkeit.</BodyText>
+                </div>
+              </Card>
+              <Card variant="white" padding="normal" className="group">
+                <div className="space-y-4">
+                  <Label className="text-slate-900 mb-2">Sicherheit</Label>
+                  <H4 className="text-2xl">Resilienz</H4>
+                  <BodyText>Minimale Angriffsfläche durch Verzicht auf unnötige Drittanbieter-Software.</BodyText>
+                </div>
+              </Card>
             </div>
           </Reveal>
         </div>
@@ -154,40 +171,48 @@ export default function WebsitesPage() {
         number="04" 
         title="Inhalte"
         borderTop
-        illustration={<LayerSeparation className="w-32 h-32" />}
+        variant="gray"
+        illustration={<LayerSeparation 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">
-              Inhalte & Technik <br />
-              <span className="text-slate-300">sind getrennt. Absichtlich.</span>
-            </h3>
+            <H3 className="text-3xl md:text-5xl leading-tight max-w-3xl">
+              Inhalte pflegen <br />
+              <span className="text-slate-200">ohne Angst.</span>
+            </H3>
           </Reveal>
-          <Reveal delay={0.2}>
-            <p className="text-xl md:text-2xl font-serif italic text-slate-600 max-w-2xl">
-              Sie können Inhalte selbst pflegen, ohne das Design oder die Technik zu gefährden. 
-              Sie können nichts kaputt machen. Ich verspreche es.
-            </p>
-          </Reveal>
-          <Reveal delay={0.4}>
-            <div className="flex flex-wrap gap-12 pt-8">
-              <div className="space-y-4">
-                <div className="text-[10px] font-bold uppercase tracking-[0.3em] text-slate-400">Was Sie tun</div>
-                <div className="flex items-center gap-3 text-xl font-bold text-slate-900">
-                  <Check className="w-5 h-5" />
-                  Inhalte pflegen
-                </div>
-              </div>
-              <div className="space-y-4 opacity-30">
-                <div className="text-[10px] font-bold uppercase tracking-[0.3em] text-slate-400">Was Sie ignorieren</div>
-                <div className="flex flex-col gap-2">
-                  <div className="flex items-center gap-3 text-xl font-bold text-slate-900 line-through">Design</div>
-                  <div className="flex items-center gap-3 text-xl font-bold text-slate-900 line-through">Struktur</div>
-                  <div className="flex items-center gap-3 text-xl font-bold text-slate-900 line-through">Technik</div>
-                </div>
-              </div>
+          <div className="grid grid-cols-1 md:grid-cols-12 gap-12 items-start">
+            <div className="md:col-span-7">
+              <Reveal delay={0.2}>
+                <LeadText className="text-xl md:text-2xl text-slate-400">
+                  Sie können Texte und Bilder selbst anpassen, ohne das Design oder die Technik zu gefährden. 
+                  Ein <span className="text-slate-900">intuitives System</span> sorgt dafür, dass alles an seinem Platz bleibt.
+                </LeadText>
+              </Reveal>
             </div>
-          </Reveal>
+            <div className="md:col-span-5">
+              <Reveal delay={0.4}>
+                <Card variant="white" padding="normal" className="space-y-8">
+                  <div className="space-y-4">
+                    <Label>Ihre Freiheit</Label>
+                    <div className="flex items-center gap-3 text-xl font-bold text-slate-900">
+                      <div className="w-8 h-8 rounded-full bg-slate-900 flex items-center justify-center">
+                        <Check className="w-3 h-3 text-white" />
+                      </div>
+                      Inhalte flexibel verwalten
+                    </div>
+                  </div>
+                  <div className="space-y-4 opacity-30">
+                    <Label>Mein Schutz</Label>
+                    <div className="space-y-2">
+                      <div className="flex items-center gap-3 text-xl font-bold text-slate-900 line-through">Design-Chaos</div>
+                      <div className="flex items-center gap-3 text-xl font-bold text-slate-900 line-through">Technische Fehler</div>
+                    </div>
+                  </div>
+                </Card>
+              </Reveal>
+            </div>
+          </div>
         </div>
       </Section>
 
@@ -196,87 +221,69 @@ export default function WebsitesPage() {
         number="05" 
         title="Service"
         borderTop
-        illustration={<DirectService className="w-32 h-32" />}
+        illustration={<DirectService 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">
+            <H3 className="text-3xl md:text-5xl leading-tight max-w-3xl">
               Änderungen sind <br />
-              <span className="text-slate-300">einfach. Wirklich.</span>
-            </h3>
+              <span className="text-slate-200">Teil des Konzepts.</span>
+            </H3>
           </Reveal>
           <Reveal delay={0.2}>
-            <p className="text-xl md:text-2xl font-serif italic text-slate-600 max-w-2xl">
-              Neue Seite? Neue Funktion? Neue Idee? <br />
-              Kein Ticket. Kein Formular. Kein Projektplan.
-            </p>
+            <LeadText className="text-xl md:text-2xl max-w-2xl text-slate-400">
+              Ihr Business entwickelt sich weiter, Ihre Website auch. <br />
+              Keine komplizierten Prozesse, sondern <span className="text-slate-900">direkte Umsetzung</span> Ihrer Ideen.
+            </LeadText>
           </Reveal>
           <Reveal delay={0.4}>
-            <div className="grid grid-cols-1 md:grid-cols-2 gap-6 pt-8">
-              <div className="p-10 bg-white border border-slate-100 rounded-3xl hover:border-slate-900 transition-all duration-500 group">
-                <MessageSquare className="w-10 h-10 text-slate-200 group-hover:text-slate-900 transition-colors mb-6" />
-                <h4 className="text-2xl font-bold text-slate-900 mb-2">Kurze Wege</h4>
-                <p className="text-slate-500 font-serif italic">Sie schreiben mir, was Sie brauchen.</p>
-              </div>
-              <div className="p-10 bg-white border border-slate-100 rounded-3xl hover:border-slate-900 transition-all duration-500 group">
-                <RefreshCw className="w-10 h-10 text-slate-200 group-hover:text-slate-900 transition-colors mb-6" />
-                <h4 className="text-2xl font-bold text-slate-900 mb-2">Schnelle Umsetzung</h4>
-                <p className="text-slate-500 font-serif italic">Ich setze es um. Fertig.</p>
-              </div>
+            <div className="grid grid-cols-1 md:grid-cols-2 gap-8 pt-8">
+              <Card variant="white" padding="normal" className="group hover:border-slate-900">
+                <ConceptCommunication className="w-12 h-12 mb-8 group-hover:scale-110 transition-all duration-700" />
+                <div className="space-y-2">
+                  <H4 className="text-2xl">Direkter Draht</H4>
+                  <BodyText>Sie sprechen direkt mit dem Entwickler. Keine Stille Post.</BodyText>
+                </div>
+              </Card>
+              <Card variant="white" padding="normal" className="group hover:border-slate-900">
+                <ConceptPrototyping className="w-12 h-12 mb-8 group-hover:scale-110 transition-all duration-700" />
+                <div className="space-y-2">
+                  <H4 className="text-2xl">Agile Anpassung</H4>
+                  <BodyText>Schnelle Iterationen statt langer Wartezeiten.</BodyText>
+                </div>
+              </Card>
             </div>
           </Reveal>
         </div>
       </Section>
 
-      {/* Why */}
-      <Section 
-        number="06" 
-        title="Warum"
-        borderTop
-        illustration={<AgencyChaos 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">
-              15 Jahre Agenturen <br />
-              <span className="text-slate-300">waren genug.</span>
-            </h3>
-          </Reveal>
-          <Reveal delay={0.2}>
-            <p className="text-xl md:text-2xl font-serif italic text-slate-600 max-w-2xl">
-              Zu viele Meetings. Zu viele Konzepte. Zu viele Übergaben. Zu viele „eigentlich müsste man mal“. 
-              Meine Websites sind dafür gebaut, dass Dinge einfach passieren.
-            </p>
-          </Reveal>
-        </div>
-      </Section>
-
       {/* Result */}
       <Section 
-        number="07" 
+        number="06" 
         title="Ergebnis"
         borderTop
         variant="gray"
-        illustration={<TaskDone className="w-32 h-32" />}
+        illustration={<TaskDone className="w-24 h-24" />}
       >
         <div className="space-y-16">
           <Reveal>
-            <h2 className="text-5xl md:text-8xl font-bold text-slate-900 tracking-tighter leading-[0.9]">
-              Eine Website, die sich wie eine <br />
-              <span className="text-slate-300">erledigte Aufgabe</span> anfühlt.
-            </h2>
+            <H3 className="text-4xl md:text-6xl tracking-tighter">
+              Eine Website, die <br />
+              <span className="text-slate-200">einfach läuft.</span>
+            </H3>
           </Reveal>
 
           <div className="grid grid-cols-1 md:grid-cols-3 gap-12">
             {[
-              { title: 'Kein Stress', desc: 'Keine Wartungspflicht, keine Überraschungen.' },
-              { title: 'Keine Abhängigkeit', desc: 'Sauberer Code, der Ihnen gehört.' },
-              { title: 'Keine Agentur', desc: 'Direkter Kontakt, schnelle Ergebnisse.' },
+              { title: 'Kein Overhead', desc: 'Fokus auf das, was Ihre Kunden wirklich brauchen.' },
+              { title: 'Volle Kontrolle', desc: 'Der Code gehört Ihnen, ohne Vendor Lock-in.' },
+              { title: 'Echte Performance', desc: 'Messbare Geschwindigkeit für bessere Ergebnisse.' },
             ].map((item, i) => (
               <Reveal key={i} delay={i * 0.1}>
-                <div className="space-y-4">
-                  <div className="text-2xl font-bold tracking-tight text-slate-900">{item.title}</div>
-                  <p className="text-slate-500 font-serif italic text-lg">{item.desc}</p>
+                <div className="space-y-4 group">
+                  <div className="w-8 h-px bg-slate-200 group-hover:w-full transition-all duration-1000" />
+                  <H4 className="text-2xl">{item.title}</H4>
+                  <LeadText className="text-lg text-slate-400">{item.desc}</LeadText>
                 </div>
               </Reveal>
             ))}
@@ -285,20 +292,14 @@ export default function WebsitesPage() {
           <Reveal delay={0.4}>
             <div className="pt-16 border-t border-slate-200 flex flex-col md:flex-row justify-between items-start md:items-center gap-8">
               <div className="space-y-2">
-                <div className="text-[10px] font-bold uppercase tracking-[0.3em] text-slate-400">Technik</div>
-                <p className="text-slate-500 font-serif italic text-lg">
-                  Modern, sicher, schnell. Aber das ist mein Problem, nicht Ihres.
-                </p>
+                <Label>Bereit für mehr?</Label>
+                <LeadText className="text-2xl">
+                  Lassen Sie uns über Ihr nächstes Projekt sprechen.
+                </LeadText>
               </div>
-              <motion.a 
-                href="/contact"
-                whileHover={{ scale: 1.05 }}
-                whileTap={{ scale: 0.95 }}
-                className="inline-flex items-center gap-4 px-12 py-6 bg-slate-900 text-white rounded-full font-bold uppercase tracking-widest text-xs hover:bg-slate-800 transition-colors group"
-              >
+              <MotionButton href="/contact">
                 Projekt anfragen
-                <ArrowRight className="w-4 h-4 group-hover:translate-x-1 transition-transform" />
-              </motion.a>
+              </MotionButton>
             </div>
           </Reveal>
         </div>