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 22:02:45 +01:00
parent ae303d8a5a
commit a2e048826f
18 changed files with 396 additions and 198 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
app/blog/[slug]/page.tsx
View File

@@ -69,9 +69,9 @@ export default async function BlogPostPage({ params }: { params: Promise<{ slug:
<main id="post-content">
<Section number="01" title="Inhalt">
<div className="prose prose-slate max-w-none">
<div className="flex flex-wrap items-center gap-4 text-sm text-slate-400 mb-12 font-mono uppercase tracking-widest">
<div className="flex flex-wrap items-center gap-4 text-[10px] font-bold text-slate-400 mb-12 uppercase tracking-[0.2em]">
<time dateTime={post.date}>{formattedDate}</time>
<span>•</span>
<span className="text-slate-200">•</span>
<span>{readingTime} min read</span>
</div>

2
app/blog/page.tsx
View File

@@ -85,7 +85,7 @@ export default function BlogPage() {
{/* Posts area */}
<div className="md:col-span-8">
<div id="posts-container" className="divide-y divide-slate-50">
<div id="posts-container" className="flex flex-col gap-8">
{filteredPosts.length === 0 ? (
<div className="empty-state">
<p>No posts found matching your criteria.</p>

6
app/contact/page.tsx
View File

@@ -22,7 +22,7 @@ export default function ContactPage() {
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">
<p className="text-3xl md:text-6xl font-bold text-slate-900 border-b border-slate-100 group-hover:border-slate-900 transition-all duration-500 pb-6 tracking-tighter">
marc@mintel.me
</p>
</a>
@@ -30,8 +30,8 @@ export default function ContactPage() {
</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="p-12 md:p-20 border border-slate-200 rounded-[3rem] bg-white relative overflow-hidden hover:border-slate-400 transition-all duration-500">
<div className="absolute top-0 right-0 text-[15rem] font-bold text-slate-50 select-none translate-x-1/4 -translate-y-1/4 opacity-50">!</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">

304
app/page.tsx
View File

@@ -1,87 +1,113 @@
import * as React from 'react';
import Link from 'next/link';
import { ArrowRight, Zap, Shield } from 'lucide-react';
import { Zap, Shield, MousePointer2, Sparkles } from 'lucide-react';
import { Reveal } from '../src/components/Reveal';
import { Section } from '../src/components/Section';
import { HeroItem, FeatureCard, ComparisonRow, ServiceCard } from '../src/components/Landing';
export default function LandingPage() {
return (
<div className="flex flex-col gap-48 pt-12 md:pt-24 pb-24 md:pb-48 overflow-hidden">
<div className="flex flex-col bg-white overflow-hidden">
{/* Global Background Pattern */}
<div className="fixed inset-0 pointer-events-none -z-20 opacity-[0.02]" style={{
backgroundImage: 'radial-gradient(circle at 2px 2px, #0f172a 1px, transparent 0)',
backgroundSize: '40px 40px'
}} />
{/* 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">
<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>
<section className="relative pt-12 md:pt-24 pb-24 md:pb-32">
<div className="narrow-container relative">
{/* Background Illustration/Pattern */}
<div className="absolute -left-24 -top-24 text-[15rem] md:text-[20rem] font-bold text-slate-50 select-none -z-10 opacity-50 pointer-events-none">
00
</div>
{/* Floating Elements */}
<div className="absolute right-0 top-0 w-64 h-64 bg-slate-50 rounded-full blur-[80px] -z-10 opacity-60 animate-pulse"></div>
<div className="space-y-16 md:space-y-20 relative">
<Reveal>
<div className="space-y-4">
<div className="flex items-center gap-3 text-slate-400 font-mono text-[10px] uppercase tracking-[0.3em] mb-4">
<span className="w-6 h-px bg-slate-200"></span>
Digital Architect & Developer
</div>
<h1 className="text-5xl md:text-8xl font-bold text-slate-900 tracking-tighter leading-[0.95]">
Digitale Systeme <br />
<span className="text-slate-200">ohne Overhead.</span>
</h1>
</div>
</Reveal>
<div className="space-y-12 md:space-y-16">
<div className="grid grid-cols-1 gap-4 md:gap-6 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) => (
<HeroItem
key={i}
number={`0${i + 1}`}
title={item.title}
description={item.desc}
delay={0.1 * (i + 1)}
/>
))}
</div>
<Reveal delay={0.5}>
<div className="relative group inline-block">
<div className="absolute -inset-4 bg-slate-50 rounded-2xl scale-95 opacity-0 group-hover:scale-100 group-hover:opacity-100 transition-all duration-500 -z-10"></div>
<div className="border-l-4 border-slate-900 pl-6 md:pl-8 py-2">
<p className="text-3xl md:text-6xl font-bold text-slate-900 tracking-tighter leading-none">
Kein Zirkus. <br />
<span className="text-slate-200">Nur Ergebnisse.</span>
</p>
</div>
</div>
</Reveal>
</div>
</div>
</div>
</section>
{/* Was ich mache - Designed Grid */}
<Section number="01" title="Das Versprechen" numberPosition="right">
<div className="grid grid-cols-1 md:grid-cols-12 gap-12">
<div className="md:col-span-5 space-y-8">
<Section number="01" title="Das Versprechen" numberPosition="right" variant="gray" borderTop>
<div className="grid grid-cols-1 md:grid-cols-12 gap-12 md:gap-16 items-start">
<div className="md:col-span-5">
<Reveal>
<p className="text-4xl font-bold text-slate-900 leading-[1.1]">
Direkt. <br />
Sauber. <br />
Ohne Zirkus.
</p>
<div className="space-y-6">
<div className="w-12 h-12 bg-slate-900 rounded-xl flex items-center justify-center text-white mb-6 rotate-3 hover:rotate-0 transition-transform duration-500">
<Sparkles className="w-6 h-6" />
</div>
<h2 className="text-3xl md:text-5xl font-bold text-slate-900 leading-[1.1] tracking-tight">
Direkt. <br />
Sauber. <br />
Ohne Zirkus.
</h2>
</div>
</Reveal>
</div>
<div className="md:col-span-7">
<div className="prose prose-slate font-serif text-2xl leading-relaxed text-slate-700">
<div className="space-y-10">
<Reveal delay={0.2}>
<p>
<p className="font-serif text-xl md:text-2xl leading-relaxed text-slate-700 italic">
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">
<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 className="grid grid-cols-1 gap-6">
<FeatureCard
icon={Zap}
title="Websites & Tools"
description="Alles, was Ihr Unternehmen digital voranbringt."
delay={0.3}
/>
<FeatureCard
icon={Shield}
title="Kein Overhead"
description="Sie erklären, ich baue. Es funktioniert einfach."
delay={0.4}
/>
</div>
</div>
</div>
@@ -89,65 +115,54 @@ export default function LandingPage() {
</Section>
{/* Comparison - Visual Path */}
<Section number="02" title="Der Unterschied">
<div className="space-y-32">
{/* Row 1 */}
<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>
</Reveal>
<Section number="02" title="Der Unterschied" borderTop>
<div className="space-y-16 md:space-y-24 relative">
{/* Connecting line */}
<div className="absolute left-1/2 top-0 bottom-0 w-px bg-slate-100 -translate-x-1/2 -z-10 hidden md:block"></div>
<ComparisonRow
negativeLabel="Agentur"
negativeText="Konzeptcalls, Meetings, Slides, Warten auf das Angebot."
positiveLabel="Ich"
positiveText={<>Ich baue zuerst. <br />Dann reden wir.</>}
delay={0.1}
/>
{/* Row 2 */}
<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>
</Reveal>
<ComparisonRow
negativeLabel="Agentur"
negativeText={<>
<span className="line-through decoration-slate-200">"Das dauert nur kurz"</span> <br />
→ Überraschung auf der Rechnung.
</>}
positiveLabel="Ich"
positiveText={<>Fixpreise. <br />Immer.</>}
reverse
delay={0.2}
/>
</div>
</Section>
{/* Für wen - Designed Box */}
<Section number="03" title="Zielgruppe" numberPosition="right">
<Section number="03" title="Zielgruppe" numberPosition="right" variant="gray" borderTop>
<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>
<p className="text-4xl md:text-5xl font-bold text-slate-900 leading-tight mb-16 tracking-tighter">
<div className="relative p-8 md:p-16 border border-slate-100 rounded-3xl bg-white overflow-hidden group">
{/* Decorative elements */}
<div className="absolute top-0 right-0 w-64 h-64 bg-slate-50 -mr-32 -mt-32 rounded-full -z-10 group-hover:scale-110 transition-transform duration-1000"></div>
<div className="absolute top-0 left-10 w-px h-16 bg-slate-100 -translate-y-8"></div>
<h2 className="text-3xl md:text-6xl font-bold text-slate-900 leading-[1.1] mb-12 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">
<span className="text-slate-100">Ergebnisse</span> wollen.
</h2>
<div className="grid grid-cols-1 md:grid-cols-2 gap-x-12 gap-y-6">
{[
'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>
<div key={i} className="flex items-center gap-4 text-lg md:text-xl font-serif text-slate-600 italic group/item">
<div className="w-1.5 h-1.5 bg-slate-900 rounded-full shrink-0 group-hover/item:scale-150 transition-transform duration-300"></div>
<span>{item}</span>
</div>
))}
@@ -157,40 +172,53 @@ export default function LandingPage() {
</Section>
{/* Leistungen - Visual Cards */}
<Section number="04" title="Leistungen">
<div className="grid grid-cols-1 gap-32">
<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>
</Reveal>
<Section number="04" title="Leistungen" borderTop>
<div className="grid grid-cols-1 gap-8 md:gap-12">
<ServiceCard
title="Websites"
description="Neue Seiten, Relaunch oder Übernahme bestehender Systeme. Inklusive Hosting, SEO und Performance."
linkHref="/websites"
linkLabel="Preise ansehen"
delay={0.1}
/>
<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>
<ServiceCard
title="Systeme"
description="Produktbereiche, Blogs, Jobs, API-Anbindungen, PDF-Generatoren und Sonderlogik."
delay={0.2}
/>
<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>
<ServiceCard
title="Tools"
description="Interne Inhouse-Tools, Excel-Ablösungen und Prozess-Automatisierung."
delay={0.3}
/>
</div>
</Section>
{/* Final CTA - New Section */}
<Section number="05" title="Kontakt" numberPosition="right" variant="gray" borderTop>
<Reveal>
<div className="text-center space-y-10">
<h2 className="text-4xl md:text-8xl font-bold text-slate-900 tracking-tighter">
Bereit für <br />
<span className="text-slate-200">echten Fortschritt?</span>
</h2>
<div className="flex flex-col md:flex-row items-center justify-center gap-6 md:gap-8">
<a
href="mailto:hello@mintel.me"
className="px-10 py-5 bg-slate-900 text-white rounded-full font-bold text-lg hover:bg-slate-800 transition-all duration-300 hover:scale-105 active:scale-95 shadow-xl shadow-slate-200"
>
Projekt anfragen
</a>
<div className="flex items-center gap-3 text-slate-400 font-serif italic text-lg">
<MousePointer2 className="w-5 h-5 animate-bounce" />
<span>Kein Zirkus, versprochen.</span>
</div>
</div>
</div>
</Reveal>
</Section>
</div>
);
}

48
app/websites/page.tsx
View File

@@ -18,12 +18,12 @@ export default function WebsitesPage() {
<Section number="01" title="Die Basis">
<div className="space-y-20">
<Reveal>
<div className="border-l-4 border-slate-900 pl-12 py-4">
<div className="border-l-4 border-slate-900 pl-12 py-6">
<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">
<p className="text-3xl md:text-5xl font-bold text-slate-900 leading-tight tracking-tighter">
Die Grundlage für jede Website.
</p>
</div>
@@ -60,13 +60,13 @@ export default function WebsitesPage() {
<div className="space-y-32">
{/* Seite */}
<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 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 text-slate-500 font-serif leading-relaxed max-w-2xl">
<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>
@@ -74,18 +74,18 @@ export default function WebsitesPage() {
{/* Feature */}
<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 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 text-slate-500 font-serif leading-relaxed max-w-2xl mb-12">
<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-xs font-bold uppercase tracking-[0.3em] text-slate-300">{tag}</span>
<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>
@@ -93,16 +93,16 @@ export default function WebsitesPage() {
{/* Funktion */}
<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 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 text-slate-500 font-serif leading-relaxed max-w-2xl mb-12">
<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-sm font-bold uppercase tracking-[0.2em] text-slate-400">
<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>
@@ -118,8 +118,8 @@ export default function WebsitesPage() {
{/* 5. Betrieb - Designed Box */}
<Section number="03" title="Betrieb" numberPosition="right">
<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>
<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>

6
src/components/ArticleHeading.tsx
View File

@@ -6,19 +6,19 @@ interface HeadingProps {
}
export const H1: React.FC<HeadingProps> = ({ children, className = '' }) => (
<h1 className={`text-4xl font-bold text-slate-900 mb-4 mt-8 leading-tight ${className}`}>
<h1 className={`text-4xl md:text-5xl font-bold text-slate-900 mb-8 mt-12 leading-[1.1] tracking-tight ${className}`}>
{children}
</h1>
);
export const H2: React.FC<HeadingProps> = ({ children, className = '' }) => (
<h2 className={`text-3xl font-bold text-slate-900 mb-4 mt-8 leading-snug ${className}`}>
<h2 className={`text-3xl md:text-4xl font-bold text-slate-900 mb-6 mt-10 leading-[1.2] tracking-tight ${className}`}>
{children}
</h2>
);
export const H3: React.FC<HeadingProps> = ({ children, className = '' }) => (
<h3 className={`text-2xl font-bold text-slate-900 mb-4 mt-8 leading-relaxed ${className}`}>
<h3 className={`text-2xl md:text-3xl font-bold text-slate-900 mb-4 mt-8 leading-[1.3] tracking-tight ${className}`}>
{children}
</h3>
);

4
src/components/ArticleParagraph.tsx
View File

@@ -6,13 +6,13 @@ interface ParagraphProps {
}
export const Paragraph: React.FC<ParagraphProps> = ({ children, className = '' }) => (
<p className={`text-slate-700 leading-relaxed mb-4 ${className}`}>
<p className={`text-slate-700 font-serif text-lg md:text-xl leading-relaxed mb-6 ${className}`}>
{children}
</p>
);
export const LeadParagraph: React.FC<ParagraphProps> = ({ children, className = '' }) => (
<p className={`text-xl text-slate-700 leading-relaxed mb-6 ${className}`}>
<p className={`text-xl md:text-2xl text-slate-700 font-serif italic leading-relaxed mb-8 ${className}`}>
{children}
</p>
);

2
src/components/CTA.tsx
View File

@@ -9,7 +9,7 @@ export const CTA: React.FC = () => {
<Reveal width="100%">
<div className="relative p-12 md:p-20 border border-slate-200 rounded-[3rem] bg-white">
<div className="absolute top-0 left-12 w-px h-24 bg-slate-200 -translate-y-12"></div>
<div className="absolute -right-12 -top-12 text-[15rem] font-bold text-slate-50 select-none -z-10">?</div>
<div className="absolute -right-12 -top-12 text-[15rem] font-bold text-slate-50 select-none -z-10 opacity-50">?</div>
<div className="space-y-16 relative z-10">
<h2 className="text-6xl md:text-8xl font-bold tracking-tighter leading-[0.9] text-slate-900">

4
src/components/Header.tsx
View File

@@ -13,10 +13,10 @@ export const Header: React.FC = () => {
<header className="bg-white/80 backdrop-blur-md sticky top-0 z-50 border-b border-slate-50">
<div className="narrow-container py-4 flex items-center justify-between">
<Link href="/" className="flex items-center gap-3 group">
<div className="w-10 h-10 bg-slate-900 rounded-xl flex items-center justify-center group-hover:bg-slate-800 group-hover:scale-105 transition-all duration-300 shadow-sm">
<div className="w-10 h-10 bg-slate-900 rounded-xl flex items-center justify-center group-hover:bg-slate-800 group-hover:scale-105 transition-all duration-500 shadow-sm">
<span className="text-white text-lg font-bold">M</span>
</div>
<span className="text-slate-900 font-bold tracking-tighter text-2xl">Marc Mintel</span>
<span className="text-slate-900 font-bold tracking-tighter text-2xl group-hover:tracking-tight transition-all duration-500">Marc Mintel</span>
</Link>
<nav className="flex items-center gap-8">

49
src/components/Landing/ComparisonRow.tsx Normal file
View File

@@ -0,0 +1,49 @@
import * as React from 'react';
import { ArrowRight } from 'lucide-react';
import { Reveal } from '../Reveal';
interface ComparisonRowProps {
negativeLabel: string;
negativeText: React.ReactNode;
positiveLabel: string;
positiveText: React.ReactNode;
reverse?: boolean;
delay?: number;
}
export const ComparisonRow: React.FC<ComparisonRowProps> = ({
negativeLabel,
negativeText,
positiveLabel,
positiveText,
reverse = false,
delay = 0,
}) => {
return (
<Reveal delay={delay}>
<div className={`flex flex-col ${reverse ? 'md:flex-row-reverse' : 'md:flex-row'} gap-8 md:gap-12 items-center`}>
<div className="flex-1 p-8 md:p-10 bg-slate-50/50 rounded-2xl text-slate-400 border border-transparent w-full">
<div className="text-[10px] font-bold uppercase tracking-[0.2em] mb-4 line-through decoration-slate-200">
{negativeLabel}
</div>
<div className="text-lg md:text-xl font-serif italic line-through decoration-slate-200 leading-snug">
{negativeText}
</div>
</div>
<div className="shrink-0">
<ArrowRight className={`w-6 h-6 text-slate-200 hidden md:block ${reverse ? 'rotate-180' : ''}`} />
</div>
<div className="flex-1 p-8 md:p-10 border border-slate-100 rounded-2xl bg-white hover:border-slate-200 transition-all duration-500 hover:shadow-xl hover:shadow-slate-100/50 w-full">
<div className="text-[10px] font-bold uppercase tracking-[0.2em] text-slate-900 mb-4">
{positiveLabel}
</div>
<div className="text-2xl md:text-3xl font-bold text-slate-900 leading-tight tracking-tight">
{positiveText}
</div>
</div>
</div>
</Reveal>
);
};

27
src/components/Landing/FeatureCard.tsx Normal file
View File

@@ -0,0 +1,27 @@
import * as React from 'react';
import { LucideIcon } from 'lucide-react';
import { Reveal } from '../Reveal';
interface FeatureCardProps {
icon: LucideIcon;
title: string;
description: string;
delay?: number;
}
export const FeatureCard: React.FC<FeatureCardProps> = ({ icon: Icon, title, description, delay = 0 }) => {
return (
<Reveal delay={delay}>
<div className="p-8 md:p-10 border border-slate-100 rounded-2xl hover:border-slate-200 transition-all duration-500 group bg-white hover:shadow-xl hover:shadow-slate-100/50 relative overflow-hidden">
<div className="absolute top-0 right-0 w-24 h-24 bg-slate-50 rounded-full -mr-12 -mt-12 group-hover:bg-slate-100 transition-colors duration-500"></div>
<Icon className="w-8 h-8 mb-6 text-slate-300 group-hover:text-slate-900 group-hover:scale-110 group-hover:rotate-3 transition-all duration-500 relative z-10" />
<h3 className="text-xl md:text-2xl font-bold text-slate-900 mb-3 tracking-tight relative z-10">
{title}
</h3>
<p className="text-lg md:text-xl text-slate-500 font-serif italic leading-relaxed relative z-10">
{description}
</p>
</div>
</Reveal>
);
};

30
src/components/Landing/HeroItem.tsx Normal file
View File

@@ -0,0 +1,30 @@
import * as React from 'react';
import { Reveal } from '../Reveal';
interface HeroItemProps {
number: string;
title: string;
description: string;
delay?: number;
}
export const HeroItem: React.FC<HeroItemProps> = ({ number, title, description, delay = 0 }) => {
return (
<Reveal delay={delay}>
<div className="group flex gap-6 md:gap-8 p-6 md:p-8 border border-transparent hover:border-slate-100 rounded-2xl transition-all duration-500 hover:bg-slate-50/50 relative overflow-hidden">
<div className="absolute inset-0 bg-gradient-to-r from-slate-50/50 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-500"></div>
<span className="text-xs font-bold uppercase tracking-[0.2em] text-slate-300 group-hover:text-slate-900 transition-colors pt-1.5 relative z-10">
{number}
</span>
<div className="space-y-2 relative z-10">
<h3 className="text-2xl md:text-4xl font-bold text-slate-900 tracking-tight group-hover:tracking-tighter transition-all duration-500">
{title}
</h3>
<p className="text-lg md:text-xl text-slate-400 font-serif italic leading-snug group-hover:text-slate-600 transition-colors duration-500">
{description}
</p>
</div>
</div>
</Reveal>
);
};

46
src/components/Landing/ServiceCard.tsx Normal file
View File

@@ -0,0 +1,46 @@
import * as React from 'react';
import Link from 'next/link';
import { Reveal } from '../Reveal';
interface ServiceCardProps {
title: string;
description: string;
linkHref?: string;
linkLabel?: string;
delay?: number;
}
export const ServiceCard: React.FC<ServiceCardProps> = ({
title,
description,
linkHref,
linkLabel,
delay = 0,
}) => {
return (
<Reveal delay={delay}>
<div className="group relative p-10 md:p-12 border border-slate-100 rounded-3xl hover:border-slate-900 transition-all duration-700 bg-white hover:shadow-2xl hover:shadow-slate-100/50 overflow-hidden">
{/* Decorative background text */}
<div className="absolute -right-4 -bottom-4 text-8xl md:text-9xl font-bold text-slate-50 select-none group-hover:text-slate-100 transition-colors duration-700 -z-10">
{title.charAt(0)}
</div>
<h3 className="text-4xl md:text-6xl font-bold text-slate-900 mb-6 tracking-tighter group-hover:tracking-tight transition-all duration-700">
{title}
</h3>
<p className="text-xl md:text-2xl text-slate-500 font-serif italic mb-10 leading-tight max-w-3xl group-hover:text-slate-700 transition-colors duration-700">
{description}
</p>
{linkHref && linkLabel && (
<Link
href={linkHref}
className="inline-flex items-center gap-4 text-slate-900 font-bold text-[10px] uppercase tracking-[0.2em] group/link"
>
{linkLabel}
<div className="w-8 h-px bg-slate-200 group-hover/link:bg-slate-900 group-hover/link:w-16 transition-all duration-500"></div>
</Link>
)}
</div>
</Reveal>
);
};

4
src/components/Landing/index.ts Normal file
View File

@@ -0,0 +1,4 @@
export * from './HeroItem';
export * from './FeatureCard';
export * from './ComparisonRow';
export * from './ServiceCard';

6
src/components/Mermaid.tsx
View File

@@ -57,13 +57,13 @@ export const Mermaid: React.FC<MermaidProps> = ({ graph, id: providedId }) => {
return (
<div className="mermaid-wrapper my-8 not-prose">
<div className="bg-white border border-slate-200/80 rounded-lg overflow-hidden shadow-sm">
<div className="px-3 py-2 border-b border-slate-100 bg-slate-50/30 flex items-center justify-between">
<div className="bg-white border border-slate-200 rounded-2xl overflow-hidden transition-all duration-500 hover:border-slate-400">
<div className="px-4 py-3 border-b border-slate-100 bg-white flex items-center justify-between">
<div className="flex items-center gap-2">
<svg className="w-3.5 h-3.5 text-slate-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M7 21h10a2 2 0 002-2V9.414a1 1 0 00-.293-.707l-5.414-5.414A1 1 0 0012.586 3H7a2 2 0 00-2 2v14a2 2 0 002 2z" />
</svg>
<span className="text-xs font-medium text-slate-500 uppercase tracking-wider">Diagram</span>
<span className="text-[10px] font-bold text-slate-400 uppercase tracking-[0.2em]">Diagram</span>
</div>
</div>
<div className="mermaid-container p-8 md:p-12 overflow-x-auto flex justify-center bg-white">

10
src/components/PageHeader.tsx
View File

@@ -22,27 +22,27 @@ export const PageHeader: React.FC<PageHeaderProps> = ({
return (
<section className="narrow-container relative">
{backgroundSymbol && (
<div className="absolute -left-24 -top-24 text-[20rem] font-bold text-slate-50 select-none -z-10">
<div className="absolute -left-24 -top-24 text-[20rem] font-bold text-slate-50 select-none -z-10 opacity-50">
{backgroundSymbol}
</div>
)}
{backLink && (
<Link href={backLink.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" /> {backLink.label}
<Link href={backLink.href} className="inline-flex items-center gap-3 text-slate-400 hover:text-slate-900 mb-12 transition-all duration-300 font-bold text-[10px] uppercase tracking-[0.3em] group">
<ArrowLeft className="w-4 h-4 group-hover:-translate-x-1 transition-transform" /> {backLink.label}
</Link>
)}
<div className="space-y-16">
<Reveal>
<h1 className="text-6xl md:text-8xl font-bold text-slate-900 tracking-tighter leading-[0.9]">
<h1 className="text-6xl md:text-8xl font-bold text-slate-900 tracking-tighter leading-[0.95]">
{title}
</h1>
</Reveal>
{description && (
<Reveal delay={0.2}>
<p className="text-2xl md:text-3xl text-slate-500 font-serif italic leading-tight max-w-2xl">
<p className="text-2xl md:text-3xl text-slate-500 font-serif italic leading-snug max-w-3xl">
{description}
</p>
</Reveal>

4
src/components/Reveal.tsx
View File

@@ -27,10 +27,10 @@ export const Reveal: React.FC<RevealProps> = ({
}, [isInView, mainControls]);
return (
<div ref={ref} style={{ position: "relative", width, overflow: "hidden" }} className={className}>
<div ref={ref} style={{ position: "relative", width }} className={className}>
<motion.div
variants={{
hidden: { opacity: 0, y: 75 },
hidden: { opacity: 0, y: 20 },
visible: { opacity: 1, y: 0 },
}}
initial="hidden"

38
src/components/Section.tsx
View File

@@ -8,6 +8,8 @@ interface SectionProps {
className?: string;
numberPosition?: 'left' | 'right';
delay?: number;
variant?: 'white' | 'gray';
borderTop?: boolean;
}
export const Section: React.FC<SectionProps> = ({
@@ -16,21 +18,33 @@ export const Section: React.FC<SectionProps> = ({
children,
className = "",
numberPosition = 'left',
delay = 0
delay = 0,
variant = 'white',
borderTop = false,
}) => {
const bgClass = variant === 'gray' ? 'bg-slate-50/50' : 'bg-white';
const borderClass = borderTop ? 'border-t border-slate-100' : '';
return (
<section className={`narrow-container relative ${className}`}>
{number && (
<div className={`absolute ${numberPosition === 'left' ? '-left-24' : '-right-24'} -top-12 text-[15rem] font-bold text-slate-50 select-none -z-10`}>
{number}
<section className={`relative py-24 md:py-32 ${bgClass} ${borderClass} ${className}`}>
<div className="narrow-container relative">
{number && (
<div className={`absolute ${numberPosition === 'left' ? '-left-24' : '-right-24'} -top-24 text-[15rem] md:text-[20rem] font-bold text-slate-100/50 select-none -z-10 pointer-events-none`}>
{number}
</div>
)}
{title && (
<Reveal delay={delay}>
<div className="flex items-center gap-4 mb-12 md:mb-16">
<div className="h-px w-8 bg-slate-200"></div>
<h2 className="text-[10px] font-bold uppercase tracking-[0.4em] text-slate-400">{title}</h2>
</div>
</Reveal>
)}
<div className="relative z-10">
{children}
</div>
)}
{title && (
<Reveal delay={delay}>
<h2 className="text-sm font-bold uppercase tracking-[0.3em] text-slate-400 mb-24">{title}</h2>
</Reveal>
)}
{children}
</div>
</section>
);
};