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:44:55 +01:00
parent 762226f744
commit ec0a055c13
16 changed files with 535 additions and 5413 deletions
Download Patch File Download Diff File Expand all files Collapse all files

279
app/page.tsx
View File

@@ -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>
);
}