design

app/blog/page.tsx

@@ -1,6 +1,7 @@
 'use client';
 
-import React, { useState, useEffect } from 'react';
+import * as React from 'react';
+import { useState, useEffect } from 'react';
 import { MediumCard } from '../../src/components/MediumCard';
 import { SearchBar } from '../../src/components/SearchBar';
 import { Tag } from '../../src/components/Tag';
@@ -44,11 +45,11 @@ export default function BlogPage() {
       {/* Clean Hero Section */}
       <section className="pt-10 pb-8 md:pt-12 md:pb-10 relative overflow-hidden">
         {/* Animated Background */}
-        <div className="absolute inset-0 bg-gradient-to-br from-white via-slate-50/30 to-blue-50/20 animate-gradient-shift"></div>
+        <div className="absolute inset-0 bg-gradient-to-br from-white via-slate-50/30 to-slate-100/20 animate-gradient-shift"></div>
 
         {/* Morphing Blob */}
         <div className="absolute inset-0 flex items-center justify-center pointer-events-none">
-          <div className="w-48 h-48 bg-gradient-to-br from-blue-200/15 via-purple-200/10 to-indigo-200/15 animate-morph"></div>
+          <div className="w-48 h-48 bg-gradient-to-br from-slate-200/15 via-slate-100/10 to-slate-200/15 animate-morph"></div>
         </div>
 
         {/* Animated Drawing Paths */}
@@ -59,10 +60,10 @@ export default function BlogPage() {
         </svg>
 
         {/* Floating Shapes */}
-        <div className="absolute top-10 left-10 w-20 h-20 bg-blue-100/20 rounded-full animate-float-1"></div>
-        <div className="absolute top-20 right-20 w-16 h-16 bg-indigo-100/20 rotate-45 animate-float-2"></div>
-        <div className="absolute bottom-20 left-1/4 w-12 h-12 bg-purple-100/20 rounded-full animate-float-3"></div>
-        <div className="absolute bottom-10 right-1/3 w-24 h-24 bg-cyan-100/20 animate-float-4"></div>
+        <div className="absolute top-10 left-10 w-20 h-20 bg-slate-100/20 rounded-full animate-float-1"></div>
+        <div className="absolute top-20 right-20 w-16 h-16 bg-slate-100/20 rotate-45 animate-float-2"></div>
+        <div className="absolute bottom-20 left-1/4 w-12 h-12 bg-slate-100/20 rounded-full animate-float-3"></div>
+        <div className="absolute bottom-10 right-1/3 w-24 h-24 bg-slate-100/20 animate-float-4"></div>
 
         <div className="max-w-3xl mx-auto px-6 relative z-10">
           <div className="text-center animate-fade-in">

app/contact/page.tsx

@@ -0,0 +1,65 @@
+import * as React from 'react';
+import { ArrowLeft } from 'lucide-react';
+import Link from 'next/link';
+import { Reveal } from '../../src/components/Reveal';
+
+export default function ContactPage() {
+  return (
+    <div className="flex flex-col gap-24 py-24 md:py-48 overflow-hidden">
+      <section className="narrow-container relative">
+        <div className="absolute -left-24 -top-24 text-[20rem] font-bold text-slate-50 select-none -z-10">@</div>
+        <Link href="/" className="inline-flex items-center gap-2 text-slate-300 hover:text-slate-900 mb-16 transition-colors font-mono text-xs uppercase tracking-[0.3em]">
+          <ArrowLeft className="w-3 h-3" /> Zurück
+        </Link>
+        
+        <div className="space-y-16">
+          <Reveal>
+            <h1 className="text-6xl md:text-8xl font-bold text-slate-900 tracking-tighter leading-[0.9]">
+              Kontakt <br />
+              <span className="text-slate-200">& Anfrage.</span>
+            </h1>
+          </Reveal>
+
+          <Reveal delay={0.2}>
+            <p className="text-2xl md:text-3xl text-slate-500 font-serif italic leading-tight max-w-2xl">
+              Haben Sie ein Projekt im Kopf? Schreiben Sie mir einfach. Ich antworte meistens innerhalb von 24 Stunden.
+            </p>
+          </Reveal>
+        </div>
+      </section>
+
+      <section className="narrow-container">
+        <div className="grid grid-cols-1 gap-24">
+          <Reveal delay={0.4}>
+            <div className="space-y-8">
+              <h2 className="text-sm font-bold uppercase tracking-[0.3em] text-slate-400">Direkt</h2>
+              <a 
+                href="mailto:marc@mintel.me" 
+                className="group block space-y-2"
+              >
+                <span className="text-xs font-bold uppercase tracking-widest text-slate-300 group-hover:text-slate-900 transition-colors">Email</span>
+                <p className="text-3xl md:text-5xl font-bold text-slate-900 border-b-4 border-slate-100 group-hover:border-slate-900 transition-all pb-4">
+                  marc@mintel.me
+                </p>
+              </a>
+            </div>
+          </Reveal>
+
+          <Reveal delay={0.6}>
+            <div className="p-12 border-2 border-slate-900 bg-slate-50 relative overflow-hidden">
+              <div className="absolute top-0 right-0 text-[15rem] font-bold text-slate-200/20 select-none translate-x-1/4 -translate-y-1/4">!</div>
+              <div className="relative z-10 space-y-8">
+                <h2 className="text-2xl font-bold text-slate-900">Was ich von Ihnen brauche:</h2>
+                <ul className="space-y-6 text-xl md:text-2xl text-slate-600 font-serif italic">
+                  <li className="flex gap-6"><span className="text-slate-900 font-bold font-sans not-italic">01</span> Was ist das Ziel des Projekts?</li>
+                  <li className="flex gap-6"><span className="text-slate-900 font-bold font-sans not-italic">02</span> Gibt es eine Deadline?</li>
+                  <li className="flex gap-6"><span className="text-slate-900 font-bold font-sans not-italic">03</span> Welches Budget ist eingeplant?</li>
+                </ul>
+              </div>
+            </div>
+          </Reveal>
+        </div>
+      </section>
+    </div>
+  );
+}

app/globals.css

@@ -53,7 +53,7 @@
   }
   
   a {
-    @apply text-blue-600 hover:text-blue-800 transition-colors;
+    @apply text-slate-900 hover:text-slate-700 transition-colors underline underline-offset-4;
   }
   
   ul, ol {
@@ -76,7 +76,7 @@
   a:focus,
   button:focus,
   input:focus {
-    outline: 2px solid #3b82f6;
+    outline: 2px solid #0f172a;
     outline-offset: 2px;
   }
 }
@@ -108,7 +108,7 @@
   }
 
   .search-box {
-    @apply w-full px-4 py-3 border-2 border-slate-200 rounded-lg focus:outline-none focus:border-blue-400 transition-colors;
+    @apply w-full px-4 py-3 border-2 border-slate-200 rounded-lg focus:outline-none focus:border-slate-900 transition-colors;
     background: rgba(255,255,255,0.9);
     backdrop-filter: blur(10px);
   }
@@ -182,7 +182,7 @@
   }
 
   .btn-primary {
-    @apply bg-blue-600 hover:bg-blue-700 text-white px-3 py-1.5 rounded transition-colors;
+    @apply bg-slate-900 hover:bg-slate-800 text-white px-3 py-1.5 rounded transition-colors;
   }
 
   .btn-secondary {
@@ -309,8 +309,8 @@
 
 /* Selection color */
 ::selection {
-  background: #bfdbfe;
-  color: #1e40af;
+  background: #0f172a;
+  color: #ffffff;
 }
 
 /* Tag Styles */
@@ -353,8 +353,8 @@
 }
 
 .highlighter-blue {
-  background: linear-gradient(135deg, rgba(100, 181, 246, 0.95) 0%, rgba(66, 165, 245, 0.95) 100%);
-  color: #001f3f;
+  background: linear-gradient(135deg, rgba(226, 232, 240, 0.95) 0%, rgba(203, 213, 225, 0.95) 100%);
+  color: #0f172a;
 }
 
 .highlighter-tag:hover::before {
@@ -374,10 +374,10 @@
 }
 
 .highlighter-tag:focus {
-  outline: 2px solid #3b82f6;
+  outline: 2px solid #0f172a;
   outline-offset: 2px;
   transform: rotate(-1deg) translateY(-2px) scale(1.05);
-  box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.3), 3px 3px 0 rgba(0, 0, 0, 0.15);
+  box-shadow: 0 0 0 4px rgba(15, 23, 42, 0.1), 3px 3px 0 rgba(0, 0, 0, 0.15);
 }
 
 /* Marker Title Styles */
@@ -570,7 +570,7 @@
 }
 
 .fallback-link {
-  color: #3b82f6;
+  @apply text-slate-900 underline underline-offset-4;
   text-decoration: none;
   font-weight: 500;
   margin-top: 0.25rem;

app/layout.tsx

@@ -3,6 +3,7 @@ import { Inter } from 'next/font/google';
 import './globals.css';
 import { Footer } from '../src/components/Footer';
 import { Header } from '../src/components/Header';
+import { CTA } from '../src/components/CTA';
 import { InteractiveElements } from '../src/components/InteractiveElements';
 import { Analytics } from '../src/components/Analytics';
 
@@ -33,6 +34,7 @@ export default function RootLayout({
         <main>
           {children}
         </main>
+        <CTA />
         <Footer />
         <InteractiveElements />
         <Analytics />

app/page.tsx

@@ -1,29 +1,48 @@
-import React from 'react';
+import * as React from 'react';
 import Link from 'next/link';
-import { ArrowRight, MessageSquare, Minus, Zap, Shield, Clock } from 'lucide-react';
+import { ArrowRight, Minus, Zap, Shield, Clock } from 'lucide-react';
+import { Reveal } from '../src/components/Reveal';
 
 export default function LandingPage() {
   return (
-    <div className="flex flex-col gap-48 py-24 md:py-48 overflow-hidden">
+    <div className="flex flex-col gap-48 pt-12 md:pt-24 pb-24 md:pb-48 overflow-hidden">
       {/* Hero Section - High Impact */}
       <section className="narrow-container relative">
         <div className="absolute -left-24 -top-24 text-[20rem] font-bold text-slate-50 select-none -z-10">00</div>
         <div className="space-y-16 relative">
-          <h1 className="text-6xl md:text-8xl font-bold text-slate-900 tracking-tighter leading-[0.9] animate-fade-in">
-            Digitale Systeme <br />
-            <span className="text-slate-200">ohne Overhead.</span>
-          </h1>
-          <div className="grid grid-cols-1 md:grid-cols-2 gap-12 items-end">
-            <div className="space-y-6 text-2xl text-slate-400 font-serif italic leading-tight">
-              <p className="animate-slide-up [animation-delay:200ms]">Agenturen sind zu langsam.</p>
-              <p className="animate-slide-up [animation-delay:400ms]">CMS will keiner pflegen.</p>
-              <p className="animate-slide-up [animation-delay:600ms]">Digitale Themen bleiben liegen.</p>
-            </div>
-            <div className="animate-slide-up [animation-delay:800ms] border-l-2 border-slate-900 pl-8">
-              <p className="text-3xl font-bold text-slate-900 leading-tight">
-                Ich mache das anders.
-              </p>
+          <Reveal>
+            <h1 className="text-6xl md:text-8xl font-bold text-slate-900 tracking-tighter leading-[0.9]">
+              Digitale Systeme <br />
+              <span className="text-slate-200">ohne Overhead.</span>
+            </h1>
+          </Reveal>
+          <div className="space-y-32">
+            <div className="space-y-16 max-w-4xl">
+              {[
+                { title: 'Agenturen sind zu langsam.', desc: 'Wochenlange Konzepte statt schneller Ergebnisse.' },
+                { title: 'CMS will keiner pflegen.', desc: 'Ich baue Systeme, die so einfach sind, dass sie wirklich genutzt werden.' },
+                { title: 'Digitale Themen bleiben liegen.', desc: 'Weil der Overhead die Umsetzung erstickt.' },
+              ].map((item, i) => (
+                <Reveal key={i} delay={0.2 * (i + 1)}>
+                  <div className="group flex gap-8 md:gap-12">
+                    <span className="text-sm font-mono text-slate-200 group-hover:text-slate-900 transition-colors pt-2">0{i+1}</span>
+                    <div className="space-y-3">
+                      <p className="text-3xl md:text-5xl font-bold text-slate-900 tracking-tight">{item.title}</p>
+                      <p className="text-xl md:text-2xl text-slate-400 font-serif italic leading-tight">{item.desc}</p>
+                    </div>
+                  </div>
+                </Reveal>
+              ))}
             </div>
+            
+            <Reveal delay={0.8}>
+              <div className="border-l-4 border-slate-900 pl-12 py-4">
+                <p className="text-4xl md:text-7xl font-bold text-slate-900 tracking-tighter leading-none">
+                  Kein Zirkus. <br />
+                  <span className="text-slate-200">Nur Ergebnisse.</span>
+                </p>
+              </div>
+            </Reveal>
           </div>
         </div>
       </section>
@@ -33,29 +52,37 @@ export default function LandingPage() {
         <div className="absolute -right-24 -top-12 text-[15rem] font-bold text-slate-50 select-none -z-10">01</div>
         <div className="grid grid-cols-1 md:grid-cols-12 gap-12">
           <div className="md:col-span-5 space-y-8">
-            <h2 className="text-sm font-bold uppercase tracking-[0.3em] text-slate-400">Das Versprechen</h2>
-            <p className="text-4xl font-bold text-slate-900 leading-[1.1]">
-              Direkt. <br />
-              Sauber. <br />
-              Ohne Zirkus.
-            </p>
+            <Reveal>
+              <h2 className="text-sm font-bold uppercase tracking-[0.3em] text-slate-400">Das Versprechen</h2>
+              <p className="text-4xl font-bold text-slate-900 leading-[1.1]">
+                Direkt. <br />
+                Sauber. <br />
+                Ohne Zirkus.
+              </p>
+            </Reveal>
           </div>
           <div className="md:col-span-7">
             <div className="prose prose-slate font-serif text-2xl leading-relaxed text-slate-700">
-              <p>
-                Ich setze digitale Systeme für Unternehmen um – ohne Workshops, ohne Tickets, ohne Tech-Blabla.
-              </p>
+              <Reveal delay={0.2}>
+                <p>
+                  Ich setze digitale Systeme für Unternehmen um – ohne Workshops, ohne Tickets, ohne Tech-Blabla.
+                </p>
+              </Reveal>
               <div className="mt-12 grid grid-cols-1 gap-8 not-prose">
-                <div className="p-8 border border-slate-100 hover:border-slate-900 transition-colors group">
-                  <Zap className="w-6 h-6 mb-4 text-slate-300 group-hover:text-slate-900 transition-colors" />
-                  <h3 className="text-xl font-bold text-slate-900 mb-2">Websites & Tools</h3>
-                  <p className="text-slate-500 font-serif text-lg">Alles, was Ihr Unternehmen digital voranbringt.</p>
-                </div>
-                <div className="p-8 border border-slate-100 hover:border-slate-900 transition-colors group">
-                  <Shield className="w-6 h-6 mb-4 text-slate-300 group-hover:text-slate-900 transition-colors" />
-                  <h3 className="text-xl font-bold text-slate-900 mb-2">Kein Overhead</h3>
-                  <p className="text-slate-500 font-serif text-lg">Sie erklären, ich baue. Es funktioniert einfach.</p>
-                </div>
+                <Reveal delay={0.4}>
+                  <div className="p-8 border border-slate-100 hover:border-slate-900 transition-colors group">
+                    <Zap className="w-6 h-6 mb-4 text-slate-300 group-hover:text-slate-900 transition-colors" />
+                    <h3 className="text-xl font-bold text-slate-900 mb-2">Websites & Tools</h3>
+                    <p className="text-slate-500 font-serif text-lg">Alles, was Ihr Unternehmen digital voranbringt.</p>
+                  </div>
+                </Reveal>
+                <Reveal delay={0.6}>
+                  <div className="p-8 border border-slate-100 hover:border-slate-900 transition-colors group">
+                    <Shield className="w-6 h-6 mb-4 text-slate-300 group-hover:text-slate-900 transition-colors" />
+                    <h3 className="text-xl font-bold text-slate-900 mb-2">Kein Overhead</h3>
+                    <p className="text-slate-500 font-serif text-lg">Sie erklären, ich baue. Es funktioniert einfach.</p>
+                  </div>
+                </Reveal>
               </div>
             </div>
           </div>
@@ -69,124 +96,110 @@ export default function LandingPage() {
         
         <div className="space-y-32">
           {/* Row 1 */}
-          <div className="flex flex-col md:flex-row gap-12 items-center">
-            <div className="flex-1 p-10 bg-slate-50 text-slate-400 line-through decoration-slate-200">
-              <div className="text-xs font-bold uppercase tracking-widest mb-4">Agentur</div>
-              <p className="text-xl font-serif italic">Konzeptcalls, Meetings, Slides, Warten auf das Angebot.</p>
+          <Reveal>
+            <div className="flex flex-col md:flex-row gap-12 items-center">
+              <div className="flex-1 p-10 bg-slate-50 text-slate-400">
+                <div className="text-xs font-bold uppercase tracking-widest mb-4 line-through decoration-slate-300">Agentur</div>
+                <p className="text-xl font-serif italic line-through decoration-slate-300">Konzeptcalls, Meetings, Slides, Warten auf das Angebot.</p>
+              </div>
+              <div className="shrink-0">
+                <ArrowRight className="w-8 h-8 text-slate-200 hidden md:block" />
+              </div>
+              <div className="flex-1 p-10 border-2 border-slate-900">
+                <div className="text-xs font-bold uppercase tracking-widest text-slate-900 mb-4">Ich</div>
+                <p className="text-3xl font-bold text-slate-900 leading-tight">Ich baue zuerst. <br />Dann reden wir.</p>
+              </div>
             </div>
-            <div className="shrink-0">
-              <ArrowRight className="w-8 h-8 text-slate-200 hidden md:block" />
-            </div>
-            <div className="flex-1 p-10 border-2 border-slate-900">
-              <div className="text-xs font-bold uppercase tracking-widest text-slate-900 mb-4">Ich</div>
-              <p className="text-3xl font-bold text-slate-900 leading-tight">Ich baue zuerst. <br />Dann reden wir.</p>
-            </div>
-          </div>
+          </Reveal>
 
           {/* Row 2 */}
-          <div className="flex flex-col md:flex-row-reverse gap-12 items-center">
-            <div className="flex-1 p-10 bg-slate-50 text-slate-400 line-through decoration-slate-200">
-              <div className="text-xs font-bold uppercase tracking-widest mb-4">Agentur</div>
-              <p className="text-xl font-serif italic">"Das dauert nur kurz" <br />→ Überraschung auf der Rechnung.</p>
+          <Reveal delay={0.2}>
+            <div className="flex flex-col md:flex-row-reverse gap-12 items-center">
+              <div className="flex-1 p-10 bg-slate-50 text-slate-400">
+                <div className="text-xs font-bold uppercase tracking-widest mb-4 line-through decoration-slate-300">Agentur</div>
+                <p className="text-xl font-serif italic">
+                  <span className="line-through decoration-slate-300">"Das dauert nur kurz"</span> <br />
+                  → Überraschung auf der Rechnung.
+                </p>
+              </div>
+              <div className="shrink-0">
+                <ArrowRight className="w-8 h-8 text-slate-200 hidden md:block rotate-180" />
+              </div>
+              <div className="flex-1 p-10 border-2 border-slate-900">
+                <div className="text-xs font-bold uppercase tracking-widest text-slate-900 mb-4">Ich</div>
+                <p className="text-3xl font-bold text-slate-900 leading-tight">Fixpreise. <br />Immer.</p>
+              </div>
             </div>
-            <div className="shrink-0">
-              <ArrowRight className="w-8 h-8 text-slate-200 hidden md:block rotate-180" />
-            </div>
-            <div className="flex-1 p-10 border-2 border-slate-900">
-              <div className="text-xs font-bold uppercase tracking-widest text-slate-900 mb-4">Ich</div>
-              <p className="text-3xl font-bold text-slate-900 leading-tight">Fixpreise. <br />Immer.</p>
-            </div>
-          </div>
+          </Reveal>
         </div>
       </section>
 
       {/* Für wen - Designed Box */}
       <section className="narrow-container relative">
         <div className="absolute -right-24 -top-12 text-[15rem] font-bold text-slate-50 select-none -z-10">03</div>
-        <div className="relative p-12 md:p-24 border border-slate-100">
-          <div className="absolute top-0 left-12 w-px h-24 bg-slate-900 -translate-y-12"></div>
-          <h2 className="text-sm font-bold uppercase tracking-[0.3em] text-slate-400 mb-12">Zielgruppe</h2>
-          <p className="text-4xl md:text-5xl font-bold text-slate-900 leading-tight mb-16 tracking-tighter">
-            Für Unternehmen, die <br />
-            <span className="text-slate-300 underline decoration-slate-100 underline-offset-8">Ergebnisse</span> wollen.
-          </p>
-          <div className="grid grid-cols-1 md:grid-cols-2 gap-x-16 gap-y-8">
-            {[
-              'Keine Lust auf Agentur-Zirkus',
-              'Kein CMS selbst pflegen',
-              'Keine Tickets schreiben',
-              'Keinen eigenen Entwickler',
-            ].map((item, i) => (
-              <div key={i} className="flex items-center gap-4 text-xl font-serif text-slate-600">
-                <div className="w-2 h-2 bg-slate-900 rounded-full"></div>
-                <span>{item}</span>
-              </div>
-            ))}
+        <Reveal>
+          <div className="relative p-12 md:p-24 border border-slate-100">
+            <div className="absolute top-0 left-12 w-px h-24 bg-slate-900 -translate-y-12"></div>
+            <h2 className="text-sm font-bold uppercase tracking-[0.3em] text-slate-400 mb-12">Zielgruppe</h2>
+            <p className="text-4xl md:text-5xl font-bold text-slate-900 leading-tight mb-16 tracking-tighter">
+              Für Unternehmen, die <br />
+              <span className="text-slate-300 underline decoration-slate-100 underline-offset-8">Ergebnisse</span> wollen.
+            </p>
+            <div className="grid grid-cols-1 md:grid-cols-2 gap-x-16 gap-y-8">
+              {[
+                'Keine Lust auf Agentur-Zirkus',
+                'Kein CMS selbst pflegen',
+                'Keine Tickets schreiben',
+                'Keinen eigenen Entwickler',
+              ].map((item, i) => (
+                <div key={i} className="flex items-center gap-4 text-xl font-serif text-slate-600">
+                  <div className="w-2 h-2 bg-slate-900 rounded-full"></div>
+                  <span>{item}</span>
+                </div>
+              ))}
+            </div>
           </div>
-        </div>
+        </Reveal>
       </section>
 
       {/* Leistungen - Visual Cards */}
       <section className="narrow-container relative">
-        <div className="absolute -left-24 -top-12 text-[15rem] font-bold text-slate-50 select-none -z-10">04</div>
+        <div className="absolute -left-24 -top-32 text-[15rem] font-bold text-slate-50 select-none -z-10">04</div>
         <h2 className="text-sm font-bold uppercase tracking-[0.3em] text-slate-400 mb-24">Leistungen</h2>
         <div className="grid grid-cols-1 gap-32">
-          <div className="group relative">
-            <div className="absolute -left-12 top-0 text-6xl font-bold text-slate-50 group-hover:text-slate-100 transition-colors">W</div>
-            <h3 className="text-5xl font-bold text-slate-900 mb-8 tracking-tighter">Websites</h3>
-            <p className="text-2xl text-slate-500 font-serif mb-10 leading-relaxed max-w-2xl">
-              Neue Seiten, Relaunch oder Übernahme bestehender Systeme. Inklusive Hosting, SEO und Performance.
-            </p>
-            <Link href="/websites" className="inline-flex items-center gap-4 text-slate-900 font-bold text-xl group/link">
-              Preise ansehen 
-              <div className="w-12 h-px bg-slate-900 group-hover/link:w-20 transition-all"></div>
-            </Link>
-          </div>
-
-          <div className="group relative">
-            <div className="absolute -left-12 top-0 text-6xl font-bold text-slate-50 group-hover:text-slate-100 transition-colors">S</div>
-            <h3 className="text-5xl font-bold text-slate-900 mb-8 tracking-tighter">Systeme</h3>
-            <p className="text-2xl text-slate-500 font-serif mb-10 leading-relaxed max-w-2xl">
-              Produktbereiche, Blogs, Jobs, API-Anbindungen, PDF-Generatoren und Sonderlogik.
-            </p>
-          </div>
-
-          <div className="group relative">
-            <div className="absolute -left-12 top-0 text-6xl font-bold text-slate-50 group-hover:text-slate-100 transition-colors">T</div>
-            <h3 className="text-5xl font-bold text-slate-900 mb-8 tracking-tighter">Tools</h3>
-            <p className="text-2xl text-slate-500 font-serif mb-10 leading-relaxed max-w-2xl">
-              Interne Inhouse-Tools, Excel-Ablösungen und Prozess-Automatisierung.
-            </p>
-          </div>
-        </div>
-      </section>
-
-      {/* CTA - Designed Impact */}
-      <section className="narrow-container">
-        <div className="relative py-32 px-12 md:px-24 bg-slate-900 text-white overflow-hidden">
-          <div className="absolute top-0 right-0 text-[20rem] font-bold text-white/5 select-none translate-x-1/4 -translate-y-1/4">?</div>
-          <div className="relative z-10 space-y-12">
-            <h2 className="text-6xl md:text-8xl font-bold tracking-tighter leading-none">Interesse?</h2>
-            <p className="text-2xl md:text-3xl text-slate-400 font-serif italic leading-tight max-w-xl">
-              Schreiben Sie mir einfach, was Sie brauchen. Ich sage Ihnen ehrlich, ob ich es mache.
-            </p>
-            <div className="pt-8">
-              <a 
-                href="mailto:marc@mintel.me" 
-                className="inline-flex items-center gap-6 bg-white text-slate-900 px-12 py-6 font-bold text-2xl hover:bg-slate-100 transition-all hover:scale-[1.05]"
-              >
-                <MessageSquare className="w-8 h-8" />
-                Projekt anfragen
-              </a>
-            </div>
-            <div className="pt-12">
-              <Link href="/blog" className="text-slate-500 hover:text-white text-sm font-bold uppercase tracking-[0.5em] transition-colors">
-                Zum Blog
+          <Reveal>
+            <div className="group relative">
+              <h3 className="text-5xl font-bold text-slate-900 mb-8 tracking-tighter">Websites</h3>
+              <p className="text-2xl text-slate-500 font-serif mb-10 leading-relaxed max-w-2xl">
+                Neue Seiten, Relaunch oder Übernahme bestehender Systeme. Inklusive Hosting, SEO und Performance.
+              </p>
+              <Link href="/websites" className="inline-flex items-center gap-4 text-slate-900 font-bold text-xl group/link">
+                Preise ansehen
+                <div className="w-12 h-px bg-slate-900 group-hover/link:w-20 transition-all"></div>
               </Link>
             </div>
-          </div>
+          </Reveal>
+
+          <Reveal delay={0.2}>
+            <div className="group relative">
+              <h3 className="text-5xl font-bold text-slate-900 mb-8 tracking-tighter">Systeme</h3>
+              <p className="text-2xl text-slate-500 font-serif mb-10 leading-relaxed max-w-2xl">
+                Produktbereiche, Blogs, Jobs, API-Anbindungen, PDF-Generatoren und Sonderlogik.
+              </p>
+            </div>
+          </Reveal>
+
+          <Reveal delay={0.4}>
+            <div className="group relative">
+              <h3 className="text-5xl font-bold text-slate-900 mb-8 tracking-tighter">Tools</h3>
+              <p className="text-2xl text-slate-500 font-serif mb-10 leading-relaxed max-w-2xl">
+                Interne Inhouse-Tools, Excel-Ablösungen und Prozess-Automatisierung.
+              </p>
+            </div>
+          </Reveal>
         </div>
       </section>
+
     </div>
   );
 }

app/tags/[tag]/page.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import * as React from 'react';
 import Link from 'next/link';
 import { blogPosts } from '../../../src/data/blogPosts';
 import { MediumCard } from '../../../src/components/MediumCard';
@@ -32,7 +32,7 @@ export default async function TagPage({ params }: { params: Promise<{ tag: strin
       </div>
 
       <div className="mt-8 pt-6 border-t border-slate-200">
-        <Link href="/blog" className="text-blue-600 hover:text-blue-800 inline-flex items-center">
+        <Link href="/blog" className="text-slate-600 hover:text-slate-900 inline-flex items-center">
           ← Back to blog
         </Link>
       </div>

app/websites/page.tsx

@@ -1,6 +1,7 @@
-import React from 'react';
-import { Info, ArrowLeft, Mail, Minus } from 'lucide-react';
+import * as React from 'react';
+import { Info, ArrowLeft, Minus } from 'lucide-react';
 import Link from 'next/link';
+import { Reveal } from '../../src/components/Reveal';
 
 export default function WebsitesPage() {
   return (
@@ -11,49 +12,59 @@ export default function WebsitesPage() {
         <Link href="/" className="inline-flex items-center gap-2 text-slate-300 hover:text-slate-900 mb-16 transition-colors font-mono text-xs uppercase tracking-[0.3em]">
           <ArrowLeft className="w-3 h-3" /> Zurück
         </Link>
-        <h1 className="text-6xl md:text-8xl font-bold text-slate-900 tracking-tighter leading-[0.9] mb-12">
-          Websites <br />
-          <span className="text-slate-200">& Preise.</span>
-        </h1>
-        <p className="text-2xl md:text-3xl text-slate-500 font-serif italic leading-tight max-w-2xl">
-          Ich baue digitale Systeme mit klaren Preisen und Ergebnissen – keine Stunden, keine Überraschungen.
-        </p>
+        <Reveal>
+          <h1 className="text-6xl md:text-8xl font-bold text-slate-900 tracking-tighter leading-[0.9] mb-12">
+            Websites <br />
+            <span className="text-slate-200">& Preise.</span>
+          </h1>
+        </Reveal>
+        <Reveal delay={0.2}>
+          <p className="text-2xl md:text-3xl text-slate-500 font-serif italic leading-tight max-w-2xl">
+            Ich baue digitale Systeme mit klaren Preisen und Ergebnissen – keine Stunden, keine Überraschungen.
+          </p>
+        </Reveal>
       </section>
 
       {/* 1. Website - Designed Pricing */}
       <section className="narrow-container relative">
         <div className="absolute -right-24 -top-12 text-[15rem] font-bold text-slate-50 select-none -z-10">01</div>
         <div className="space-y-20">
-          <div className="border-l-4 border-slate-900 pl-12 py-4">
-            <h2 className="text-sm font-bold uppercase tracking-[0.3em] text-slate-400 mb-12">Die Basis</h2>
-            <div className="flex flex-col md:flex-row md:items-baseline gap-6 mb-8">
-              <div className="text-7xl md:text-9xl font-bold text-slate-900 tracking-tighter">6.000 €</div>
-              <div className="text-slate-300 font-serif italic text-2xl">einmalig</div>
-            </div>
-            <p className="text-3xl font-bold text-slate-900 leading-tight tracking-tight">
-              Die Grundlage für jede Website.
-            </p>
-          </div>
-          
-          <div className="grid grid-cols-1 md:grid-cols-2 gap-x-16 gap-y-8">
-            {[
-              'Projekt-Setup & Infrastruktur',
-              '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>
+          <Reveal>
+            <div className="border-l-4 border-slate-900 pl-12 py-4">
+              <h2 className="text-sm font-bold uppercase tracking-[0.3em] text-slate-400 mb-12">Die Basis</h2>
+              <div className="flex flex-col md:flex-row md:items-baseline gap-6 mb-8">
+                <div className="text-7xl md:text-9xl font-bold text-slate-900 tracking-tighter">6.000 €</div>
+                <div className="text-slate-300 font-serif italic text-2xl">einmalig</div>
               </div>
-            ))}
-          </div>
-          <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>
+              <p className="text-3xl font-bold text-slate-900 leading-tight tracking-tight">
+                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">
+              {[
+                'Projekt-Setup & Infrastruktur',
+                '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>
 
@@ -63,100 +74,94 @@ export default function WebsitesPage() {
         <h2 className="text-sm font-bold uppercase tracking-[0.3em] text-slate-400 mb-24">Produktion</h2>
         <div className="space-y-32">
           {/* Seite */}
-          <div className="relative group">
-            <div className="absolute -left-12 top-0 text-6xl font-bold text-slate-50 group-hover:text-slate-100 transition-colors">S</div>
-            <div className="flex justify-between items-baseline mb-8 border-b-4 border-slate-900 pb-6">
-              <h3 className="text-4xl font-bold text-slate-900 tracking-tighter">Seite</h3>
-              <div className="text-4xl font-bold text-slate-900 tracking-tighter">800 €</div>
+          <Reveal>
+            <div className="relative group">
+              <div className="absolute -left-12 top-0 text-6xl font-bold text-slate-50 group-hover:text-slate-100 transition-colors">S</div>
+              <div className="flex justify-between items-baseline mb-8 border-b-4 border-slate-900 pb-6">
+                <h3 className="text-4xl font-bold text-slate-900 tracking-tighter">Seite</h3>
+                <div className="text-4xl font-bold text-slate-900 tracking-tighter">800 €</div>
+              </div>
+              <p className="text-2xl text-slate-500 font-serif leading-relaxed max-w-2xl">
+                Individuell gestaltete Seite – mit Layout, Struktur, Textaufteilung, responsivem Design.
+              </p>
             </div>
-            <p className="text-2xl text-slate-500 font-serif leading-relaxed max-w-2xl">
-              Individuell gestaltete Seite – mit Layout, Struktur, Textaufteilung, responsivem Design.
-            </p>
-          </div>
+          </Reveal>
 
           {/* Feature */}
-          <div className="relative group">
-            <div className="absolute -left-12 top-0 text-6xl font-bold text-slate-50 group-hover:text-slate-100 transition-colors">F</div>
-            <div className="flex justify-between items-baseline mb-8 border-b-4 border-slate-900 pb-6">
-              <h3 className="text-4xl font-bold text-slate-900 tracking-tighter">Feature</h3>
-              <div className="text-4xl font-bold text-slate-900 tracking-tighter">2.000 €</div>
+          <Reveal delay={0.2}>
+            <div className="relative group">
+              <div className="absolute -left-12 top-0 text-6xl font-bold text-slate-50 group-hover:text-slate-100 transition-colors">F</div>
+              <div className="flex justify-between items-baseline mb-8 border-b-4 border-slate-900 pb-6">
+                <h3 className="text-4xl font-bold text-slate-900 tracking-tighter">Feature</h3>
+                <div className="text-4xl font-bold text-slate-900 tracking-tighter">2.000 €</div>
+              </div>
+              <p className="text-2xl text-slate-500 font-serif leading-relaxed 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-xs font-bold uppercase tracking-[0.3em] text-slate-300">{tag}</span>
+                ))}
+              </div>
             </div>
-            <p className="text-2xl text-slate-500 font-serif leading-relaxed 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-xs font-bold uppercase tracking-[0.3em] text-slate-300">{tag}</span>
-              ))}
-            </div>
-          </div>
+          </Reveal>
 
           {/* Funktion */}
-          <div className="relative group">
-            <div className="absolute -left-12 top-0 text-6xl font-bold text-slate-50 group-hover:text-slate-100 transition-colors">L</div>
-            <div className="flex justify-between items-baseline mb-8 border-b-4 border-slate-900 pb-6">
-              <h3 className="text-4xl font-bold text-slate-900 tracking-tighter">Funktion</h3>
-              <div className="text-4xl font-bold text-slate-900 tracking-tighter">1.000 €</div>
+          <Reveal delay={0.4}>
+            <div className="relative group">
+              <div className="absolute -left-12 top-0 text-6xl font-bold text-slate-50 group-hover:text-slate-100 transition-colors">L</div>
+              <div className="flex justify-between items-baseline mb-8 border-b-4 border-slate-900 pb-6">
+                <h3 className="text-4xl font-bold text-slate-900 tracking-tighter">Funktion</h3>
+                <div className="text-4xl font-bold text-slate-900 tracking-tighter">1.000 €</div>
+              </div>
+              <p className="text-2xl text-slate-500 font-serif leading-relaxed 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-sm 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>
-            <p className="text-2xl text-slate-500 font-serif leading-relaxed 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-sm 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 className="narrow-container relative">
         <div className="absolute -right-24 -top-12 text-[15rem] font-bold text-slate-50 select-none -z-10">03</div>
-        <div className="bg-slate-900 text-white p-16 md:p-24 space-y-16 relative overflow-hidden">
-          <div className="absolute top-0 right-0 text-[20rem] font-bold text-white/5 select-none translate-x-1/4 -translate-y-1/4">B</div>
-          <h2 className="text-sm font-bold uppercase tracking-[0.3em] text-slate-500">Betrieb</h2>
-          <div className="flex items-baseline gap-6">
-            <div className="text-7xl md:text-9xl font-bold tracking-tighter">120 €</div>
-            <div className="text-slate-500 font-serif italic text-2xl">/ Monat</div>
+        <Reveal width="100%">
+          <div className="bg-slate-50 border-2 border-slate-900 p-16 md:p-24 space-y-16 relative overflow-hidden -mx-4 md:-mx-24">
+            <div className="absolute top-0 right-0 text-[20rem] font-bold text-slate-200/20 select-none translate-x-1/4 -translate-y-1/4">B</div>
+            <h2 className="text-sm font-bold uppercase tracking-[0.3em] text-slate-400">Betrieb</h2>
+            <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">
+              {[
+                'Webhosting & Verfügbarkeit',
+                'Sicherheitsupdates & Backups',
+                'Analytics inkl. Reports',
+                'Medien-Speicher (20 GB)',
+              ].map((item, i) => (
+                <div key={i} className="flex items-center gap-4 text-xl text-slate-600 font-serif">
+                  <div className="w-1.5 h-1.5 bg-slate-900 rounded-full"></div>
+                  <span>{item}</span>
+                </div>
+              ))}
+            </div>
           </div>
-          <p className="text-3xl md:text-4xl font-bold leading-tight tracking-tight">
-            Hosting, Wartung & Sicherheit. <br />
-            <span className="text-slate-500">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-white/10">
-            {[
-              'Webhosting & Verfügbarkeit',
-              'Sicherheitsupdates & Backups',
-              'Analytics inkl. Reports',
-              'Medien-Speicher (20 GB)',
-            ].map((item, i) => (
-              <div key={i} className="flex items-center gap-4 text-xl text-slate-400 font-serif">
-                <div className="w-1.5 h-1.5 bg-white rounded-full"></div>
-                <span>{item}</span>
-              </div>
-            ))}
-          </div>
-        </div>
+        </Reveal>
       </section>
 
-      {/* CTA - Designed Impact */}
-      <section className="narrow-container text-center py-32 border-t border-slate-100">
-        <h2 className="text-6xl md:text-8xl font-bold text-slate-900 mb-12 tracking-tighter">Bereit?</h2>
-        <p className="text-2xl md:text-3xl text-slate-500 font-serif mb-20 leading-tight italic max-w-xl mx-auto">
-          Schreiben Sie mir einfach, was Sie vorhaben. Ich erstelle Ihnen ein passendes Angebot.
-        </p>
-        <a 
-          href="mailto:marc@mintel.me" 
-          className="inline-flex items-center gap-6 bg-slate-900 text-white px-12 py-6 font-bold text-2xl hover:bg-slate-800 transition-all hover:scale-[1.05]"
-        >
-          <Mail className="w-8 h-8" />
-          Anfrage senden
-        </a>
-      </section>
     </div>
   );
 }