websites page

app/websites/page.tsx

@@ -1,147 +1,306 @@
-import { Info, Minus } from 'lucide-react';
+'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';
+import { 
+  ConceptSystem, 
+  ConceptCode, 
+  ConceptWebsite, 
+  ConceptAutomation, 
+  ConceptCommunication,
+  ConceptMessy,
+  ConceptTarget
+} from '../../src/components/Landing/Illustrations';
+import { motion } from 'framer-motion';
 
 export default function WebsitesPage() {
   return (
-    <div className="flex flex-col gap-48 py-12 md:py-24 overflow-hidden">
+    <div className="flex flex-col bg-white overflow-hidden relative">
-      <PageHeader 
+      {/* Subtle Grid Pattern Overlay */}
-        title={<>Websites <br /><span className="text-slate-200">& Preise.</span></>}
+      <div className="fixed inset-0 pointer-events-none -z-20 opacity-[0.015]" style={{
-        description="Ich baue Websites mit klaren Preisen und Ergebnissen – keine Stunden, keine Überraschungen."
+        backgroundImage: 'linear-gradient(#0f172a 1px, transparent 1px), linear-gradient(90deg, #0f172a 1px, transparent 1px)',
+        backgroundSize: '80px 80px'
+      }} />
+
+      <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."
         backLink={{ href: '/', label: 'Zurück' }}
-        backgroundSymbol="€"
+        backgroundSymbol="W"
       />
 
-      {/* 1. Website - Designed Pricing */}
+      {/* Intro / Problem */}
-      <Section number="01" title="Die Basis">
+      <Section 
-        <div className="space-y-20">
+        number="01" 
+        title="Der Ansatz"
+        borderTop
+        illustration={<ConceptSystem className="w-16 h-16" />}
+      >
+        <div className="space-y-12">
           <Reveal>
-            <div className="border-l-4 border-slate-900 pl-12 py-6">
+            <h3 className="text-3xl md:text-5xl font-bold text-slate-900 leading-tight tracking-tight max-w-3xl">
-              <div className="flex flex-col md:flex-row md:items-baseline gap-6 mb-8">
+              Ich baue Websites wie Systeme – <br />
-                <div className="text-7xl md:text-9xl font-bold text-slate-900 tracking-tighter">6.000 €</div>
+              <span className="text-slate-300 font-serif italic">nicht wie Broschüren.</span>
-                <div className="text-slate-300 font-serif italic text-2xl">einmalig</div>
+            </h3>
-              </div>
-              <p className="text-3xl md:text-5xl font-bold text-slate-900 leading-tight tracking-tighter">
-                Die Grundlage für jede Website.
-              </p>
-            </div>
           </Reveal>
-          
           <Reveal delay={0.2}>
-            <div className="grid grid-cols-1 md:grid-cols-2 gap-x-16 gap-y-8">
+            <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. 
-                'Projekt-Setup & Infrastruktur',
+              Deshalb baue ich sie stabil, schnell und vorhersehbar.
-                'Hosting-Bereitstellung',
-                'Grundstruktur & Design-Vorlage',
-                'technisches SEO-Basics',
-                'Analytics (mit Mail-Report)',
-                'Livegang',
-              ].map((item, i) => (
-                <div key={i} className="flex items-center gap-4 text-xl text-slate-600 font-serif border-b border-slate-100 pb-4">
-                  <div className="w-1.5 h-1.5 bg-slate-900 rounded-full"></div>
-                  <span>{item}</span>
-                </div>
-              ))}
-            </div>
-          </Reveal>
-          <Reveal delay={0.4}>
-            <div className="pt-12 flex items-start gap-4 text-sm text-slate-400 italic font-serif max-w-md">
-              <Info className="w-5 h-5 shrink-0 mt-0.5 text-slate-200" />
-              <p>Enthält keine Seiten, Inhalte oder Funktionen. Diese werden nach Bedarf ergänzt.</p>
-            </div>
-          </Reveal>
-        </div>
-      </Section>
-
-      {/* 2. Entwicklung - Designed Grid */}
-      <Section number="02" title="Produktion">
-        <div className="space-y-32">
-          {/* Seite */}
-          <Reveal>
-            <div className="relative group p-12 border border-slate-200 rounded-[3rem] bg-white hover:border-slate-400 transition-all duration-500">
-              <div className="absolute -left-12 top-0 text-6xl font-bold text-slate-50 group-hover:text-slate-100 transition-colors opacity-50">S</div>
-              <div className="flex justify-between items-baseline mb-8 border-b border-slate-100 pb-6">
-                <h3 className="text-4xl md:text-5xl font-bold text-slate-900 tracking-tighter">Seite</h3>
-                <div className="text-4xl md:text-5xl font-bold text-slate-900 tracking-tighter">800 €</div>
-              </div>
-              <p className="text-2xl md:text-3xl text-slate-500 font-serif italic leading-tight max-w-2xl">
-                Individuell gestaltete Seite – mit Layout, Struktur, Textaufteilung, responsivem Design.
-              </p>
-            </div>
-          </Reveal>
-
-          {/* Feature */}
-          <Reveal delay={0.2}>
-            <div className="relative group p-12 border border-slate-200 rounded-[3rem] bg-white hover:border-slate-400 transition-all duration-500">
-              <div className="absolute -left-12 top-0 text-6xl font-bold text-slate-50 group-hover:text-slate-100 transition-colors opacity-50">F</div>
-              <div className="flex justify-between items-baseline mb-8 border-b border-slate-100 pb-6">
-                <h3 className="text-4xl md:text-5xl font-bold text-slate-900 tracking-tighter">Feature</h3>
-                <div className="text-4xl md:text-5xl font-bold text-slate-900 tracking-tighter">2.000 €</div>
-              </div>
-              <p className="text-2xl md:text-3xl text-slate-500 font-serif italic leading-tight max-w-2xl mb-12">
-                Ein in sich geschlossenes System mit Datenstruktur, Darstellung und Pflegefähigkeit.
-              </p>
-              <div className="flex flex-wrap gap-x-8 gap-y-4">
-                {['Blog', 'News', 'Jobs', 'Referenzen', 'Events', 'Produktbereich'].map(tag => (
-                  <span key={tag} className="text-[10px] font-bold uppercase tracking-[0.3em] text-slate-300 hover:text-slate-900 transition-colors cursor-default">{tag}</span>
-                ))}
-              </div>
-            </div>
-          </Reveal>
-
-          {/* Funktion */}
-          <Reveal delay={0.4}>
-            <div className="relative group p-12 border border-slate-200 rounded-[3rem] bg-white hover:border-slate-400 transition-all duration-500">
-              <div className="absolute -left-12 top-0 text-6xl font-bold text-slate-50 group-hover:text-slate-100 transition-colors opacity-50">L</div>
-              <div className="flex justify-between items-baseline mb-8 border-b border-slate-100 pb-6">
-                <h3 className="text-4xl md:text-5xl font-bold text-slate-900 tracking-tighter">Funktion</h3>
-                <div className="text-4xl md:text-5xl font-bold text-slate-900 tracking-tighter">1.000 €</div>
-              </div>
-              <p className="text-2xl md:text-3xl text-slate-500 font-serif italic leading-tight max-w-2xl mb-12">
-                Funktionen liefern Logik und Interaktion.
-              </p>
-              <div className="grid grid-cols-1 md:grid-cols-2 gap-x-16 gap-y-6 text-[10px] font-bold uppercase tracking-[0.2em] text-slate-400">
-                <div className="flex items-center gap-4 border-b border-slate-50 pb-2"><Minus className="w-4 h-4 text-slate-200" /> Kontaktformular</div>
-                <div className="flex items-center gap-4 border-b border-slate-50 pb-2"><Minus className="w-4 h-4 text-slate-200" /> Suche & Filter</div>
-                <div className="flex items-center gap-4 border-b border-slate-50 pb-2"><Minus className="w-4 h-4 text-slate-200" /> PDF-Export</div>
-                <div className="flex items-center gap-4 border-b border-slate-50 pb-2"><Minus className="w-4 h-4 text-slate-200" /> API-Anbindungen</div>
-                <div className="flex items-center gap-4 border-b border-slate-50 pb-2"><Minus className="w-4 h-4 text-slate-200" /> Mailversand</div>
-                <div className="flex items-center gap-4 border-b border-slate-50 pb-2"><Minus className="w-4 h-4 text-slate-200" /> Automatisierung</div>
-              </div>
-            </div>
-          </Reveal>
-        </div>
-      </Section>
-
-      {/* 5. Betrieb - Designed Box */}
-      <Section number="03" title="Betrieb">
-        <Reveal width="100%">
-          <div className="bg-white border border-slate-200 rounded-[3rem] p-16 md:p-24 space-y-16 relative overflow-hidden -mx-4 md:-mx-24 hover:border-slate-400 transition-all duration-500">
-            <div className="absolute top-0 right-0 text-[20rem] font-bold text-slate-50 select-none translate-x-1/4 -translate-y-1/4 opacity-50">B</div>
-            <div className="flex items-baseline gap-6">
-              <div className="text-7xl md:text-9xl font-bold tracking-tighter text-slate-900">120 €</div>
-              <div className="text-slate-400 font-serif italic text-2xl">/ Monat</div>
-            </div>
-            <p className="text-3xl md:text-4xl font-bold leading-tight tracking-tight text-slate-900">
-              Hosting, Wartung & Sicherheit. <br />
-              <span className="text-slate-400">Damit Sie sich um nichts kümmern müssen.</span>
             </p>
-            <div className="grid grid-cols-1 md:grid-cols-2 gap-x-16 gap-y-8 pt-12 border-t border-slate-200">
+          </Reveal>
+          <Reveal delay={0.4}>
+            <div className="grid grid-cols-2 md:grid-cols-4 gap-8 pt-8">
               {[
-                'Webhosting & Verfügbarkeit',
+                { label: 'Stabil', icon: Shield },
-                'Sicherheitsupdates & Backups',
+                { label: 'Schnell', icon: Zap },
-                'Analytics inkl. Reports',
+                { label: 'Vorhersehbar', icon: Layout },
-                'Medien-Speicher (20 GB)',
+                { label: 'Sicher', icon: Info },
               ].map((item, i) => (
-                <div key={i} className="flex items-center gap-4 text-xl text-slate-600 font-serif">
+                <div key={i} className="flex flex-col gap-3">
-                  <div className="w-1.5 h-1.5 bg-slate-900 rounded-full"></div>
+                  <item.icon className="w-5 h-5 text-slate-300" />
-                  <span>{item}</span>
+                  <span className="text-[10px] font-bold uppercase tracking-widest text-slate-900">{item.label}</span>
                 </div>
               ))}
             </div>
+          </Reveal>
+        </div>
+      </Section>
+
+      {/* Speed */}
+      <Section 
+        number="02" 
+        title="Performance"
+        borderTop
+        illustration={<ConceptTarget className="w-16 h-16" />}
+      >
+        <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">
+              Geschwindigkeit ist <br />
+              <span className="text-slate-300 font-serif italic">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>
-        </Reveal>
+        </div>
+      </Section>
+
+      {/* No Maintenance */}
+      <Section 
+        number="03" 
+        title="Wartungsfrei"
+        borderTop
+        illustration={<ConceptCode className="w-16 h-16" />}
+      >
+        <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">
+              Keine Plugins. <br />
+              <span className="text-slate-300 font-serif italic">Keine Wartungshölle.</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>
+          </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>
+            </div>
+          </Reveal>
+        </div>
+      </Section>
+
+      {/* Content/Tech Separation */}
+      <Section 
+        number="04" 
+        title="Inhalte"
+        borderTop
+        illustration={<ConceptAutomation className="w-16 h-16" />}
+      >
+        <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 font-serif italic">sind getrennt. Absichtlich.</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>
+          </Reveal>
+        </div>
+      </Section>
+
+      {/* Simple Changes */}
+      <Section 
+        number="05" 
+        title="Service"
+        borderTop
+        illustration={<ConceptCommunication className="w-16 h-16" />}
+      >
+        <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">
+              Änderungen sind <br />
+              <span className="text-slate-300 font-serif italic">einfach. Wirklich.</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>
+          </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>
+          </Reveal>
+        </div>
+      </Section>
+
+      {/* Why */}
+      <Section 
+        number="06" 
+        title="Warum"
+        borderTop
+        illustration={<ConceptMessy className="w-16 h-16" />}
+      >
+        <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 font-serif italic">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"
+        title="Ergebnis"
+        borderTop
+        variant="gray"
+      >
+        <div className="space-y-16">
+          <Reveal>
+            <h2 className="text-5xl md:text-7xl font-bold text-slate-900 tracking-tighter leading-[0.9]">
+              Eine Website, die sich wie eine <br />
+              <span className="text-slate-300 font-serif italic">erledigte Aufgabe</span> anfühlt.
+            </h2>
+          </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.' },
+            ].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>
+              </Reveal>
+            ))}
+          </div>
+
+          <Reveal delay={0.4}>
+            <div className="pt-16 border-t border-slate-100 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>
+              </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"
+              >
+                Projekt anfragen
+                <ArrowRight className="w-4 h-4 group-hover:translate-x-1 transition-transform" />
+              </motion.a>
+            </div>
+          </Reveal>
+        </div>
       </Section>
     </div>
   );

src/components/Section.tsx

@@ -11,6 +11,7 @@ interface SectionProps {
   borderTop?: boolean;
   connector?: React.ReactNode;
   containerVariant?: 'narrow' | 'normal' | 'wide';
+  illustration?: React.ReactNode;
 }
 
 export const Section: React.FC<SectionProps> = ({
@@ -23,6 +24,7 @@ export const Section: React.FC<SectionProps> = ({
   borderTop = false,
   connector,
   containerVariant = 'narrow',
+  illustration,
 }) => {
   const bgClass = variant === 'gray' ? 'bg-slate-50' : 'bg-white';
   const borderClass = borderTop ? 'border-t border-slate-100' : '';
@@ -91,6 +93,13 @@ export const Section: React.FC<SectionProps> = ({
                     </div>
                   </Reveal>
                 )}
+                {illustration && (
+                  <Reveal delay={delay + 0.2}>
+                    <div className="pt-12 opacity-100 group-hover:scale-110 transition-transform duration-700 origin-left">
+                      {illustration}
+                    </div>
+                  </Reveal>
+                )}
               </div>
             </div>