mmintel/mintel.me
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

design

Browse Source
This commit is contained in:
Marc Mintel
2026-01-29 19:13:03 +01:00
parent 1cc583c976
commit 762226f744
4 changed files with 288 additions and 389 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
app/globals.css
View File

@@ -97,7 +97,7 @@
}
.narrow-container {
@apply max-w-2xl mx-auto px-6 py-8;
@apply max-w-3xl mx-auto px-6 py-8;
}
.highlighter-tag {
@@ -222,11 +222,11 @@
top: 0;
left: 0;
width: 100%;
height: 2px;
background: #3b82f6;
height: 1px;
background: #0f172a;
transform-origin: left;
transform: scaleX(0);
z-index: 50;
z-index: 100;
transition: transform 0.1s ease-out;
}

445
app/page.tsx
View File

@@ -1,299 +1,190 @@
import React from 'react';
import Link from 'next/link';
import { Check, ArrowRight, MessageSquare } from 'lucide-react';
import { ArrowRight, MessageSquare, Minus, Zap, Shield, Clock } from 'lucide-react';
export default function LandingPage() {
return (
<div className="flex flex-col gap-32 py-20 md:py-32">
{/* Hero Section */}
<section className="narrow-container animate-fade-in">
<h1 className="text-4xl md:text-6xl font-bold text-slate-900 tracking-tight mb-10 leading-[1.1]">
Digitale Systeme für Unternehmen, die keinen Overhead wollen
</h1>
<div className="space-y-4 text-xl md:text-2xl text-slate-500 font-serif italic leading-relaxed">
<p>Agenturen sind zu langsam.</p>
<p>CMS will keiner pflegen.</p>
<p>Digitale Themen bleiben liegen.</p>
</div>
<p className="mt-12 text-2xl font-semibold text-slate-900">
Ich mache das anders.
</p>
</section>
{/* Was ich mache */}
<section className="narrow-container">
<div className="grid grid-cols-1 md:grid-cols-12 gap-8">
<div className="md:col-span-4">
<h2 className="text-sm font-bold uppercase tracking-widest text-slate-400 mt-0">Was ich mache</h2>
</div>
<div className="md:col-span-8">
<div className="prose prose-slate font-serif text-xl leading-relaxed text-slate-700">
<p>
Ich setze digitale Systeme für Unternehmen um – direkt, sauber und ohne Agentur-Zirkus.
</p>
<p className="font-sans font-bold text-slate-900 mt-8 text-2xl">
Websites, Funktionen, Systeme, interne Tools.
</p>
<p className="mt-4">
Keine Workshops. Keine Tickets. Kein Tech-Blabla.
</p>
<p className="mt-10 text-slate-900">
Sie erklären mir, was Sie brauchen. <br />
Ich sorge dafür, dass es funktioniert.
<div className="flex flex-col gap-48 py-24 md:py-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>
</div>
</div>
</div>
</section>
{/* Für wen das ist */}
<section className="narrow-container">
<div className="grid grid-cols-1 md:grid-cols-12 gap-8">
<div className="md:col-span-4">
<h2 className="text-sm font-bold uppercase tracking-widest text-slate-400 mt-0">Für wen das ist</h2>
</div>
<div className="md:col-span-8">
<p className="text-xl text-slate-900 font-bold mb-8">Für Unternehmen, die:</p>
<ul className="space-y-4 mb-12">
{[
'regelmäßig Änderungen an Website oder Systemen brauchen',
'keine Lust auf Agenturen haben',
'kein CMS anfassen wollen',
'keine Tickets schreiben möchten',
'keinen Entwickler einstellen wollen',
'und wollen, dass Dinge einfach erledigt werden',
].map((item, i) => (
<li key={i} className="flex items-start gap-4">
<Check className="w-5 h-5 text-slate-900 shrink-0 mt-1" />
<span className="text-lg text-slate-600 font-serif">{item}</span>
</li>
))}
</ul>
<div className="p-8 bg-slate-50 rounded-sm border-l-4 border-slate-900">
<p className="text-xl font-serif italic text-slate-700 leading-relaxed">
Wenn bei Ihnen öfter der Satz fällt: <br />
<span className="font-bold not-italic text-slate-900">„Das müsste man mal machen …“</span>
</p>
<p className="mt-4 text-slate-500">
… aber es passiert nie – dann sind Sie hier richtig.
</p>
</div>
</div>
</div>
</section>
{/* Das eigentliche Problem */}
<section className="narrow-container">
<div className="grid grid-cols-1 md:grid-cols-12 gap-8">
<div className="md:col-span-4">
<h2 className="text-sm font-bold uppercase tracking-widest text-slate-400 mt-0">Das Problem</h2>
</div>
<div className="md:col-span-8">
<div className="prose prose-slate font-serif text-xl leading-relaxed text-slate-700">
<p>
Digitale Arbeit scheitert nicht an Technik. <br />
Sie scheitert an <span className="text-slate-900 font-bold underline decoration-slate-200 underline-offset-4">Zuständigkeit</span>.
</p>
<div className="space-y-4 mt-10 font-sans text-base not-italic text-slate-500">
<p className="pb-4 border-b border-slate-100">Agenturen wollen Projekte.</p>
<p className="pb-4 border-b border-slate-100">Mitarbeiter haben Wichtigeres zu tun.</p>
<p className="pb-4 border-b border-slate-100">IT ist ausgelastet.</p>
<p>Kleine Aufgaben sind zu klein für große Angebote.</p>
</div>
<p className="mt-10 font-bold text-slate-900 text-2xl">Also bleibt alles liegen.</p>
</div>
</div>
</div>
</section>
{/* Warum keine Agentur */}
<section className="narrow-container">
<div className="grid grid-cols-1 md:grid-cols-12 gap-8">
<div className="md:col-span-4">
<h2 className="text-sm font-bold uppercase tracking-widest text-slate-400 mt-0">Warum keine Agentur</h2>
</div>
<div className="md:col-span-8">
<p className="text-xl font-serif text-slate-600 mb-16 leading-relaxed">
Ich habe über 15 Jahre in Agenturen gearbeitet. Ich kenne das Spiel. Und ich weiß, warum es nervt.
</p>
<div className="space-y-20">
<div className="group">
<h3 className="text-2xl font-bold text-slate-900 mb-6">Agenturen machen einfache Dinge kompliziert</h3>
<div className="grid grid-cols-1 md:grid-cols-2 gap-12 items-start">
<div className="space-y-2 text-slate-400 text-sm font-mono">
<p>Ein Button ändern?</p>
<p>→ Konzeptcall</p>
<p>→ Abstimmung</p>
<p>→ internes Meeting</p>
<p>→ Angebot</p>
<p>→ Warten</p>
<p>→ Rechnung</p>
</div>
<div className="pt-4 border-t-2 border-slate-900">
<p className="font-bold text-slate-900 mb-2 uppercase tracking-wider text-xs">Mein Ansatz</p>
<p className="text-2xl font-bold text-slate-900">Ich mache es einfach fertig.</p>
</div>
</div>
</div>
<div className="grid grid-cols-1 md:grid-cols-2 gap-x-12 gap-y-16">
<div>
<h4 className="font-bold text-slate-900 mb-3 text-lg">Prozesse statt Ergebnisse</h4>
<p className="text-slate-500 font-serif leading-relaxed">
Workshops, Slides, Roadmaps. Klingt nach Fortschritt, ist oft nur Beschäftigungstherapie. Bei mir zählt nur Umsetzung.
</p>
</div>
<div>
<h4 className="font-bold text-slate-900 mb-3 text-lg">Stundenabrechnung</h4>
<p className="text-slate-500 font-serif leading-relaxed">
„Das dauert nur kurz“ → Überraschung auf der Rechnung. Ich arbeite mit Fixpreisen. Sie wissen vorher, was es kostet.
</p>
</div>
<div>
<h4 className="font-bold text-slate-900 mb-3 text-lg">Aufgaben-Ping-Pong</h4>
<p className="text-slate-500 font-serif leading-relaxed">
Heute Projektmanager, morgen Entwickler, übermorgen niemand. Bei mir: Eine Person. Eine Verantwortung.
</p>
</div>
<div>
<h4 className="font-bold text-slate-900 mb-3 text-lg">Verschwinden nach dem Projekt</h4>
<p className="text-slate-500 font-serif leading-relaxed">
Kleine Änderung? Neues Angebot. Dringend? Warteschleife. Ich bleibe, solange Sie Dinge brauchen.
</p>
</div>
</div>
</div>
</div>
</div>
</section>
{/* Wie ich arbeite */}
<section className="narrow-container">
<div className="grid grid-cols-1 md:grid-cols-12 gap-8">
<div className="md:col-span-4">
<h2 className="text-sm font-bold uppercase tracking-widest text-slate-400 mt-0">Arbeitsweise</h2>
</div>
<div className="md:col-span-8">
<p className="text-2xl font-bold text-slate-900 mb-8">
Ich baue zuerst. Dann reden wir drüber.
</p>
<div className="prose prose-slate font-serif text-xl leading-relaxed text-slate-700">
<p>
Sie erklären mir Ihre Vorstellung. Ich setze den ersten echten Stand um.
</p>
<div className="flex flex-wrap gap-x-8 gap-y-2 my-10 not-prose border-y border-slate-100 py-6">
<span className="text-sm font-bold text-slate-400 uppercase tracking-widest">Keine Slides</span>
<span className="text-sm font-bold text-slate-400 uppercase tracking-widest">Kein Konzept-PDF</span>
<span className="text-sm font-bold text-slate-400 uppercase tracking-widest">Kein Ratespiel</span>
</div>
<p>
Dann arbeiten wir direkt am Ergebnis, bis es passt. Ohne jedes Mal ein neues Angebot. Ohne Scope-Diskussionen. Ohne Theater.
</p>
</div>
</div>
</div>
</section>
{/* Was ich konkret umsetze */}
<section className="narrow-container">
<div className="grid grid-cols-1 md:grid-cols-12 gap-8">
<div className="md:col-span-4">
<h2 className="text-sm font-bold uppercase tracking-widest text-slate-400 mt-0">Leistungen</h2>
</div>
<div className="md:col-span-8">
<div className="space-y-20">
<div>
<h3 className="text-2xl font-bold text-slate-900 mb-6">Websites</h3>
<ul className="space-y-3 text-slate-600 font-serif text-lg">
<li className="flex items-center gap-3"><Check className="w-4 h-4 text-slate-300" /> neue Websites (klarer Standard)</li>
<li className="flex items-center gap-3"><Check className="w-4 h-4 text-slate-300" /> bestehende Websites übernehmen</li>
<li className="flex items-center gap-3"><Check className="w-4 h-4 text-slate-300" /> Seiten ändern oder ergänzen</li>
<li className="flex items-center gap-3"><Check className="w-4 h-4 text-slate-300" /> Performance & SEO</li>
<li className="flex items-center gap-3"><Check className="w-4 h-4 text-slate-300" /> Hosting & Betrieb (inklusive)</li>
</ul>
<div className="mt-8">
<Link href="/websites" className="inline-flex items-center gap-2 text-slate-900 font-bold border-b-2 border-slate-900 pb-1 hover:text-slate-600 hover:border-slate-300 transition-all">
Details zu Websites & Preisen <ArrowRight className="w-4 h-4" />
</Link>
</div>
</div>
<div>
<h3 className="text-2xl font-bold text-slate-900 mb-6">Funktionen & Systeme</h3>
<ul className="grid grid-cols-1 md:grid-cols-2 gap-x-8 gap-y-3 text-slate-600 font-serif text-lg">
<li className="flex items-center gap-3"><Check className="w-4 h-4 text-slate-300" /> Produktbereiche</li>
<li className="flex items-center gap-3"><Check className="w-4 h-4 text-slate-300" /> Blogs, News, Jobs</li>
<li className="flex items-center gap-3"><Check className="w-4 h-4 text-slate-300" /> Formulare</li>
<li className="flex items-center gap-3"><Check className="w-4 h-4 text-slate-300" /> Suche & Filter</li>
<li className="flex items-center gap-3"><Check className="w-4 h-4 text-slate-300" /> PDF-Generatoren</li>
<li className="flex items-center gap-3"><Check className="w-4 h-4 text-slate-300" /> API-Ausgaben & Daten-Sync</li>
</ul>
</div>
<div>
<h3 className="text-2xl font-bold text-slate-900 mb-6">Interne Tools</h3>
<ul className="space-y-3 text-slate-600 font-serif text-lg">
<li className="flex items-center gap-3"><Check className="w-4 h-4 text-slate-300" /> kleine Inhouse-Tools</li>
<li className="flex items-center gap-3"><Check className="w-4 h-4 text-slate-300" /> Excel ersetzen</li>
<li className="flex items-center gap-3"><Check className="w-4 h-4 text-slate-300" /> Automatisierung</li>
<li className="flex items-center gap-3"><Check className="w-4 h-4 text-slate-300" /> Importe & Exporte</li>
</ul>
</div>
</div>
</div>
</div>
</section>
{/* Warum Kunden bleiben */}
<section className="narrow-container">
<div className="grid grid-cols-1 md:grid-cols-12 gap-8">
<div className="md:col-span-4">
<h2 className="text-sm font-bold uppercase tracking-widest text-slate-400 mt-0">Vorteile</h2>
</div>
<div className="md:col-span-8">
<div className="grid grid-cols-1 md:grid-cols-2 gap-x-12 gap-y-10">
{[
{ label: 'Schnelligkeit', desc: 'Dinge passieren schnell' },
{ label: 'Erledigt', desc: 'Aufgaben verschwinden wirklich' },
{ label: 'Kein Erklären', desc: 'Ich verstehe, was Sie brauchen' },
{ label: 'Kein Nachfassen', desc: 'Ich melde mich, wenn es fertig ist' },
{ label: 'Kein Stress', desc: 'Kein Projektstress' },
{ label: 'Ruhe', desc: 'Kein Agentur-Zirkus' },
].map((item, i) => (
<div key={i} className="border-l border-slate-100 pl-6">
<div className="font-bold text-slate-900 mb-1 text-lg">{item.label}</div>
<div className="text-slate-500 font-serif">{item.desc}</div>
</div>
))}
</div>
<p className="mt-20 text-4xl font-serif italic text-slate-900">
Kurz: Ruhe.
{/* Was ich mache - Designed Grid */}
<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="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>
</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>
<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>
</div>
</div>
</div>
</div>
</section>
{/* CTA */}
<section className="narrow-container">
<div className="bg-slate-900 text-white p-12 md:p-20 rounded-sm text-center">
<h2 className="text-3xl md:text-5xl font-bold mb-8 tracking-tight">Interesse?</h2>
<p className="text-xl md:text-2xl mb-12 text-slate-400 font-serif leading-relaxed">
Schreiben Sie mir einfach, was Sie brauchen. <br />
Ich sage Ihnen ehrlich, ob ich es mache – und was es kostet.
{/* Comparison - Visual Path */}
<section className="narrow-container relative">
<div className="absolute -left-24 -top-12 text-[15rem] font-bold text-slate-50 select-none -z-10">02</div>
<h2 className="text-sm font-bold uppercase tracking-[0.3em] text-slate-400 mb-24">Der Unterschied</h2>
<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>
</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>
{/* 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>
</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>
</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>
<a
href="mailto:marc@mintel.me"
className="inline-flex items-center gap-3 bg-white text-slate-900 px-10 py-5 rounded-sm font-bold text-lg hover:bg-slate-100 transition-colors"
>
<MessageSquare className="w-5 h-5" />
Projekt anfragen
</a>
<div className="mt-12">
<Link href="/blog" className="text-slate-500 hover:text-white text-sm font-mono uppercase tracking-widest transition-colors">
Zum Blog
<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>
</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>
<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
</Link>
</div>
</div>
</div>
</section>
</div>

212
app/websites/page.tsx
View File

@@ -1,161 +1,159 @@
import React from 'react';
import { Check, Info, ArrowLeft, Mail } from 'lucide-react';
import { Info, ArrowLeft, Mail, Minus } from 'lucide-react';
import Link from 'next/link';
export default function WebsitesPage() {
return (
<div className="flex flex-col gap-24 py-20 md:py-32">
{/* Header */}
<section className="narrow-container">
<Link href="/" className="inline-flex items-center gap-2 text-slate-400 hover:text-slate-900 mb-12 transition-colors font-mono text-xs uppercase tracking-widest">
<div className="flex flex-col gap-48 py-24 md:py-48 overflow-hidden">
{/* Header - Designed */}
<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>
<h1 className="text-4xl md:text-6xl font-bold text-slate-900 tracking-tight mb-8 leading-tight">
Websites & Preise
<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-xl md:text-2xl text-slate-500 font-serif italic leading-relaxed">
<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>
</section>
{/* 1. Website - Fixpreis */}
<section className="narrow-container">
<div className="border-t-4 border-slate-900 pt-12">
<h2 className="text-sm font-bold uppercase tracking-widest text-slate-400 mb-8">1. Website – Fixpreis</h2>
<div className="flex flex-col md:flex-row md:items-baseline gap-4 mb-12">
<div className="text-6xl font-bold text-slate-900">6.000 €</div>
<div className="text-slate-400 font-serif italic text-xl">einmalige Basis</div>
{/* 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="space-y-10">
<p className="text-xl text-slate-700 font-serif leading-relaxed">
Die Grundlage für jede Website:
</p>
<ul className="grid grid-cols-1 md:grid-cols-2 gap-x-12 gap-y-4">
{[
'Projekt-Setup & Infrastruktur',
'Hosting-Bereitstellung',
'Grundstruktur & Design-Vorlage',
'technisches SEO-Basics',
'Analytics (mit Mail-Report)',
'Livegang',
].map((item, i) => (
<li key={i} className="flex items-center gap-3 border-b border-slate-50 pb-2">
<Check className="w-4 h-4 text-slate-900 shrink-0" />
<span className="text-slate-600 font-serif">{item}</span>
</li>
))}
</ul>
<div className="pt-8 flex items-start gap-3 text-sm text-slate-400 italic font-serif">
<Info className="w-4 h-4 shrink-0 mt-0.5 text-slate-300" />
<p>Enthält keine Seiten, Inhalte oder Funktionen. Diese werden nach Bedarf ergänzt.</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>
</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>
</div>
</section>
{/* 2. Entwicklung (Produktion) */}
<section className="narrow-container">
<h2 className="text-sm font-bold uppercase tracking-widest text-slate-400 mb-12">2. Entwicklung (Produktion)</h2>
<div className="space-y-16">
{/* 2. Entwicklung - Designed Grid */}
<section className="narrow-container relative">
<div className="absolute -left-24 -top-12 text-[15rem] font-bold text-slate-50 select-none -z-10">02</div>
<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="group">
<div className="flex justify-between items-baseline mb-4 border-b border-slate-100 pb-4">
<h3 className="text-2xl font-bold text-slate-900">Seite</h3>
<div className="text-2xl font-bold text-slate-900">800 €</div>
<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-slate-500 font-serif text-lg leading-relaxed max-w-xl">
<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>
{/* Feature */}
<div className="group">
<div className="flex justify-between items-baseline mb-4 border-b border-slate-100 pb-4">
<h3 className="text-2xl font-bold text-slate-900">Feature (System)</h3>
<div className="text-2xl font-bold text-slate-900">2.000 €</div>
<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-slate-500 font-serif text-lg leading-relaxed max-w-xl mb-6">
<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-4 gap-y-2">
<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-mono uppercase tracking-widest text-slate-400">{tag}</span>
<span key={tag} className="text-xs font-bold uppercase tracking-[0.3em] text-slate-300">{tag}</span>
))}
</div>
</div>
{/* Funktion */}
<div className="group">
<div className="flex justify-between items-baseline mb-4 border-b border-slate-100 pb-4">
<h3 className="text-2xl font-bold text-slate-900">Funktion (Logik)</h3>
<div className="text-2xl font-bold text-slate-900">1.000 €</div>
<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-slate-500 font-serif text-lg leading-relaxed max-w-xl mb-8">
<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-2 md:grid-cols-3 gap-4 text-sm font-mono uppercase tracking-wider text-slate-400">
<div className="flex items-center gap-2"><div className="w-1 h-1 bg-slate-200 rounded-full" /> Kontaktformular</div>
<div className="flex items-center gap-2"><div className="w-1 h-1 bg-slate-200 rounded-full" /> Suche & Filter</div>
<div className="flex items-center gap-2"><div className="w-1 h-1 bg-slate-200 rounded-full" /> PDF-Export</div>
<div className="flex items-center gap-2"><div className="w-1 h-1 bg-slate-200 rounded-full" /> API-Anbindungen</div>
<div className="flex items-center gap-2"><div className="w-1 h-1 bg-slate-200 rounded-full" /> Mailversand</div>
<div className="flex items-center gap-2"><div className="w-1 h-1 bg-slate-200 rounded-full" /> Automatisierung</div>
<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>
</div>
</section>
{/* 3. Design & Interaktion */}
<section className="narrow-container">
<h2 className="text-sm font-bold uppercase tracking-widest text-slate-400 mb-12">3. Design & Interaktion (Extras)</h2>
<div className="grid grid-cols-1 md:grid-cols-2 gap-12">
<div>
<h3 className="font-bold text-slate-900 mb-2 text-lg">Visuelle Inszenierung</h3>
<div className="text-slate-900 font-bold mb-4 text-xl">2.000 € <span className="text-sm text-slate-400 font-normal">/ Abschnitt</span></div>
<p className="text-slate-500 font-serif leading-relaxed">
Erweiterte Gestaltung: Hero-Story, visuelle Abläufe, Scroll-Effekte, speziell inszenierte Sektionen.
</p>
{/* 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>
</div>
<div>
<h3 className="font-bold text-slate-900 mb-2 text-lg">Komplexe Interaktion</h3>
<div className="text-slate-900 font-bold mb-4 text-xl">1.500 € <span className="text-sm text-slate-400 font-normal">/ Interaktion</span></div>
<p className="text-slate-500 font-serif leading-relaxed">
Dargestellte, interaktive UI-Erlebnisse: Konfiguratoren, Live-Previews, mehrstufige Auswahlprozesse.
</p>
<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>
</section>
{/* 5. Betrieb & Wartung */}
<section className="narrow-container">
<div className="bg-slate-50 p-12 rounded-sm border border-slate-100">
<h2 className="text-sm font-bold uppercase tracking-widest text-slate-400 mb-8">5. Betrieb & Wartung (Pflicht)</h2>
<div className="flex items-baseline gap-2 mb-10">
<div className="text-5xl font-bold text-slate-900">120 €</div>
<div className="text-slate-400 font-serif italic text-xl">/ Monat</div>
</div>
<ul className="grid grid-cols-1 md:grid-cols-2 gap-4 text-slate-600 font-serif">
<li className="flex items-center gap-3"><Check className="w-4 h-4 text-slate-900" /> Webhosting & Verfügbarkeit</li>
<li className="flex items-center gap-3"><Check className="w-4 h-4 text-slate-900" /> Sicherheitsupdates & Backups</li>
<li className="flex items-center gap-3"><Check className="w-4 h-4 text-slate-900" /> Analytics inkl. Reports</li>
<li className="flex items-center gap-3"><Check className="w-4 h-4 text-slate-900" /> Medien-Speicher (20 GB)</li>
</ul>
</div>
</section>
{/* CTA */}
<section className="narrow-container text-center py-20 border-t border-slate-100">
<h2 className="text-3xl md:text-5xl font-bold text-slate-900 mb-8 tracking-tight">Bereit für ein Projekt?</h2>
<p className="text-xl text-slate-500 font-serif mb-12 leading-relaxed">
Schreiben Sie mir einfach, was Sie vorhaben. <br />
Ich erstelle Ihnen ein passendes Angebot.
{/* 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-3 bg-slate-900 text-white px-10 py-5 rounded-sm font-bold text-lg hover:bg-slate-800 transition-colors"
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-5 h-5" />
<Mail className="w-8 h-8" />
Anfrage senden
</a>
</section>

12
src/components/BlogPostClient.tsx
View File

@@ -15,6 +15,15 @@ export const BlogPostClient: React.FC<BlogPostClientProps> = ({ readingTime, tit
useEffect(() => {
const handleScroll = () => {
setIsScrolled(window.scrollY > 100);
// Update progress bar
const winScroll = document.body.scrollTop || document.documentElement.scrollTop;
const height = document.documentElement.scrollHeight - document.documentElement.clientHeight;
const scrolled = (winScroll / height);
const progressBar = document.querySelector('.reading-progress-bar') as HTMLElement;
if (progressBar) {
progressBar.style.transform = `scaleX(${scrolled})`;
}
};
window.addEventListener('scroll', handleScroll);
return () => window.removeEventListener('scroll', handleScroll);
@@ -69,7 +78,8 @@ export const BlogPostClient: React.FC<BlogPostClientProps> = ({ readingTime, tit
return (
<>
<nav
<div className="reading-progress-bar" />
<nav
id="top-nav"
className={`fixed top-0 left-0 right-0 z-40 border-b border-slate-200 transition-all duration-300 ${
isScrolled ? 'bg-white/95 backdrop-blur-md' : 'bg-white/80 backdrop-blur-sm'