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:11:28 +01:00
parent a2e048826f
commit 802d707487
8 changed files with 389 additions and 190 deletions
Download Patch File Download Diff File Expand all files Collapse all files

397
app/page.tsx
View File

@@ -1,68 +1,71 @@
import * as React from 'react';
import { Zap, Shield, MousePointer2, Sparkles } from 'lucide-react';
import { Zap, Shield, MousePointer2, Sparkles, ArrowRight, Check, X } from 'lucide-react';
import { Reveal } from '../src/components/Reveal';
import { Section } from '../src/components/Section';
import { HeroItem, FeatureCard, ComparisonRow, ServiceCard } from '../src/components/Landing';
import { HeroItem, FeatureCard, ComparisonRow, ServiceCard, HeroLines, GridLines, FlowLines, CirclePattern } from '../src/components/Landing';
export default function LandingPage() {
return (
<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)',
<div className="fixed inset-0 pointer-events-none -z-20 opacity-[0.03]" style={{
backgroundImage: 'linear-gradient(#0f172a 1px, transparent 1px), linear-gradient(90deg, #0f172a 1px, transparent 1px)',
backgroundSize: '40px 40px'
}} />
{/* Hero Section - High Impact */}
<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
{/* Hero Section - Split Layout */}
<section className="relative min-h-[90vh] flex items-center pt-24 pb-24 md:pb-0">
<div className="narrow-container w-full">
<div className="grid grid-cols-1 md:grid-cols-12 gap-12 md:gap-16 items-center">
{/* Left Column: Brand & Number */}
<div className="md:col-span-5 relative z-10">
<Reveal>
<div className="space-y-8">
<div className="flex items-center gap-3 text-slate-400 font-mono text-[10px] uppercase tracking-[0.3em]">
<span className="w-6 h-px bg-slate-900"></span>
Digital Architect
</div>
<h1 className="text-6xl md:text-8xl font-bold text-slate-900 tracking-tighter leading-[0.9]">
Digitale <br />
Systeme <br />
<span className="text-slate-300">ohne <br />Overhead.</span>
</h1>
<div className="pt-8">
<a
href="#contact"
className="inline-flex items-center gap-4 px-8 py-4 bg-slate-900 text-white rounded-full font-bold text-sm uppercase tracking-widest hover:bg-slate-800 transition-all duration-300 group"
>
Projekt anfragen
<ArrowRight className="w-4 h-4 group-hover:translate-x-1 transition-transform" />
</a>
</div>
</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)}
/>
))}
</Reveal>
</div>
{/* Right Column: Visual & Context */}
<div className="md:col-span-7 relative h-[500px] md:h-[800px] flex items-center justify-center">
{/* Abstract Lines Illustration */}
<div className="absolute inset-0 -z-10 opacity-80 pointer-events-none">
<HeroLines className="w-full h-full" />
</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>
<Reveal delay={0.2}>
<div className="relative bg-white/80 backdrop-blur-sm p-8 md:p-12 border border-slate-100 rounded-2xl shadow-2xl shadow-slate-100/50 max-w-md mx-auto">
<div className="absolute -top-6 -left-6 w-12 h-12 bg-slate-900 text-white flex items-center justify-center rounded-full font-bold text-xl">
00
</div>
<p className="text-xl md:text-2xl font-serif italic text-slate-600 leading-relaxed">
"Ich baue digitale Systeme für Unternehmen, die Ergebnisse wollen – ohne Agentur-Zirkus, ohne Overhead, ohne Tech-Blabla."
</p>
<div className="mt-6 flex items-center gap-4">
<div className="w-10 h-10 bg-slate-100 rounded-full overflow-hidden">
{/* Placeholder for avatar if needed, or just a symbol */}
<div className="w-full h-full flex items-center justify-center text-slate-400 font-bold">M</div>
</div>
<div className="text-xs font-bold uppercase tracking-widest text-slate-900">
Marc Mintel
</div>
</div>
</div>
</Reveal>
@@ -71,153 +74,209 @@ export default function LandingPage() {
</div>
</section>
{/* Was ich mache - Designed Grid */}
<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>
<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" />
{/* Section 01: The Promise */}
<Section number="01" title="Das Versprechen" borderTop>
<div className="space-y-16 relative">
<div className="absolute right-0 top-0 w-64 h-64 -z-10 opacity-30 pointer-events-none">
<GridLines />
</div>
<Reveal>
<h3 className="text-3xl md:text-5xl font-bold text-slate-900 leading-tight tracking-tight max-w-3xl">
Schluss mit aufgeblähten Prozessen. <br />
<span className="text-slate-300">Ich reduziere auf das Wesentliche.</span>
</h3>
</Reveal>
<div className="grid grid-cols-1 md:grid-cols-2 gap-12">
<Reveal delay={0.1}>
<div className="space-y-8">
<div className="flex items-center gap-4 text-slate-900 font-bold text-lg">
<div className="w-8 h-8 rounded-full bg-slate-100 flex items-center justify-center"><Check className="w-4 h-4" /></div>
Was ich biete
</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>
<ul className="space-y-4">
{[
'Direkte Kommunikation ohne Account Manager',
'Schnelle Prototypen statt langer Konzepte',
'Sauberer Code, der auch morgen noch läuft',
'Fixpreise für klare Budgetsicherheit'
].map((item, i) => (
<li key={i} className="flex items-start gap-3 text-slate-600 font-serif italic text-lg">
<span className="w-1.5 h-1.5 bg-slate-900 rounded-full mt-2.5 shrink-0"></span>
{item}
</li>
))}
</ul>
</div>
</Reveal>
<Reveal delay={0.2}>
<div className="space-y-8 opacity-50 hover:opacity-100 transition-opacity duration-500">
<div className="flex items-center gap-4 text-slate-400 font-bold text-lg">
<div className="w-8 h-8 rounded-full bg-slate-50 flex items-center justify-center"><X className="w-4 h-4" /></div>
Was ich nicht mache
</div>
<ul className="space-y-4">
{[
'Endlose Workshops ohne Ergebnis',
'PowerPoint-Schlachten',
'Outsourcing an Billig-Anbieter',
'Wartungsverträge mit versteckten Kosten'
].map((item, i) => (
<li key={i} className="flex items-start gap-3 text-slate-400 font-serif italic text-lg decoration-slate-200 line-through">
<span className="w-1.5 h-1.5 bg-slate-200 rounded-full mt-2.5 shrink-0"></span>
{item}
</li>
))}
</ul>
</div>
</Reveal>
</div>
<div className="md:col-span-7">
<div className="space-y-10">
<Reveal delay={0.2}>
<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="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>
</Section>
{/* Section 02: The Difference */}
<Section number="02" title="Der Unterschied" variant="gray" borderTop>
<div className="space-y-12">
<Reveal>
<p className="text-xl md:text-2xl font-serif italic text-slate-600 max-w-2xl">
Der klassische Agentur-Weg ist oft langsam und teuer. Mein Ansatz ist radikal anders: Ich baue zuerst, dann reden wir über Details.
</p>
</Reveal>
<div className="grid grid-cols-1 gap-6">
<ComparisonRow
negativeLabel="Agentur"
negativeText="Konzeptcalls, Meetings, Slides, Warten auf das Angebot."
positiveLabel="Ich"
positiveText="Ich baue einen Prototypen. Sie sehen sofort, was Sie bekommen."
delay={0.1}
/>
<ComparisonRow
negativeLabel="Agentur"
negativeText="Stundensätze, Nachberechnungen, Budget-Überraschungen."
positiveLabel="Ich"
positiveText="Fixpreise. Ein Preis, ein Ergebnis. Keine Diskussionen."
reverse
delay={0.2}
/>
<ComparisonRow
negativeLabel="Agentur"
negativeText="Wechselnde Ansprechpartner, Stille Post."
positiveLabel="Ich"
positiveText="Ein Ansprechpartner. Ich setze um, was wir besprechen."
delay={0.3}
/>
</div>
</div>
</Section>
{/* Comparison - Visual Path */}
<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}
/>
<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}
/>
{/* Section 03: Target Group */}
<Section number="03" title="Zielgruppe" borderTop>
<div className="relative">
<div className="absolute left-0 top-0 w-full h-full -z-10 opacity-30 pointer-events-none">
<CirclePattern />
</div>
<div className="grid grid-cols-1 md:grid-cols-2 gap-8">
<Reveal>
<div className="p-10 bg-slate-900 text-white rounded-3xl h-full flex flex-col justify-between group hover:scale-[1.02] transition-transform duration-500">
<div className="space-y-6">
<div className="w-12 h-12 bg-white/10 rounded-xl flex items-center justify-center">
<Zap className="w-6 h-6 text-white" />
</div>
<h3 className="text-3xl font-bold tracking-tight">Unternehmer & <br/>Geschäftsführer</h3>
<p className="text-slate-400 font-serif italic text-lg leading-relaxed">
"Ich brauche eine Lösung, die funktioniert. Ich habe keine Zeit für technische Details oder lange Meetings."
</p>
</div>
<div className="pt-8 border-t border-white/10 mt-8">
<span className="text-xs font-bold uppercase tracking-widest text-slate-500 group-hover:text-white transition-colors">Perfekt für Sie</span>
</div>
</div>
</Reveal>
<Reveal delay={0.2}>
<div className="p-10 bg-slate-50 border border-slate-100 rounded-3xl h-full flex flex-col justify-between group hover:border-slate-300 transition-colors duration-500">
<div className="space-y-6">
<div className="w-12 h-12 bg-white border border-slate-200 rounded-xl flex items-center justify-center">
<Shield className="w-6 h-6 text-slate-900" />
</div>
<h3 className="text-3xl font-bold tracking-tight text-slate-900">Marketing & <br/>Vertrieb</h3>
<p className="text-slate-600 font-serif italic text-lg leading-relaxed">
"Wir brauchen Landingpages, Tools und Automatisierungen, um unsere Ziele zu erreichen. Schnell und zuverlässig."
</p>
</div>
<div className="pt-8 border-t border-slate-200 mt-8">
<span className="text-xs font-bold uppercase tracking-widest text-slate-400 group-hover:text-slate-900 transition-colors">Perfekt für Sie</span>
</div>
</div>
</Reveal>
</div>
</div>
</Section>
{/* Für wen - Designed Box */}
<Section number="03" title="Zielgruppe" numberPosition="right" variant="gray" borderTop>
<Reveal>
<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-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-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>
))}
</div>
</div>
</Reveal>
</Section>
{/* Leistungen - Visual Cards */}
<Section number="04" title="Leistungen" borderTop>
<div className="grid grid-cols-1 gap-8 md:gap-12">
{/* Section 04: Services */}
<Section number="04" title="Leistungen" variant="gray" borderTop>
<div className="grid grid-cols-1 gap-8">
<ServiceCard
title="Websites"
description="Neue Seiten, Relaunch oder Übernahme bestehender Systeme. Inklusive Hosting, SEO und Performance."
description="High-Performance Websites. Kein Baukasten, sondern maßgeschneiderte Architektur für maximale Geschwindigkeit und SEO."
linkHref="/websites"
linkLabel="Preise ansehen"
delay={0.1}
/>
<ServiceCard
title="Systeme"
description="Produktbereiche, Blogs, Jobs, API-Anbindungen, PDF-Generatoren und Sonderlogik."
description="Web-Applikationen, Kundenportale, interne Tools. Wenn Standard-Software an ihre Grenzen stößt."
delay={0.2}
/>
<ServiceCard
title="Tools"
description="Interne Inhouse-Tools, Excel-Ablösungen und Prozess-Automatisierung."
title="Automatisierung"
description="Verbindung von Tools, automatische PDF-Erstellung, Daten-Synchronisation. Sparen Sie manuelle Arbeit."
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>
{/* Section 05: Contact */}
<Section number="05" title="Kontakt" borderTop>
<div className="relative py-12" id="contact">
<div className="absolute right-0 top-1/2 -translate-y-1/2 w-[400px] h-[200px] -z-10 opacity-40 pointer-events-none">
<FlowLines />
</div>
<Reveal>
<div className="space-y-12">
<h2 className="text-5xl md:text-7xl font-bold text-slate-900 tracking-tighter leading-[0.9]">
Lassen Sie uns <br />
<span className="text-slate-300">starten.</span>
</h2>
<div className="flex flex-col md:flex-row gap-12 items-start">
<div className="space-y-6 flex-1">
<p className="text-xl text-slate-600 font-serif italic">
Schreiben Sie mir kurz, worum es geht. Ich melde mich innerhalb von 24 Stunden mit einer ersten Einschätzung.
</p>
<a
href="mailto:hello@mintel.me"
className="inline-block text-3xl md:text-4xl font-bold text-slate-900 hover:text-slate-600 transition-colors border-b-2 border-slate-900 hover:border-slate-600 pb-2"
>
hello@mintel.me
</a>
</div>
<div className="flex-1 space-y-4">
<div className="flex items-center gap-4 text-sm font-bold uppercase tracking-widest text-slate-400">
<div className="w-2 h-2 bg-green-500 rounded-full animate-pulse"></div>
Verfügbar für neue Projekte
</div>
<p className="text-slate-500 text-sm">
Aktuell nehme ich Projekte für Q2 2026 an.
</p>
</div>
</div>
</div>
</div>
</Reveal>
</Reveal>
</div>
</Section>
</div>
);

4
app/websites/page.tsx
View File

@@ -56,7 +56,7 @@ export default function WebsitesPage() {
</Section>
{/* 2. Entwicklung - Designed Grid */}
<Section number="02" title="Produktion" numberPosition="left">
<Section number="02" title="Produktion">
<div className="space-y-32">
{/* Seite */}
<Reveal>
@@ -116,7 +116,7 @@ export default function WebsitesPage() {
</Section>
{/* 5. Betrieb - Designed Box */}
<Section number="03" title="Betrieb" numberPosition="right">
<Section number="03" title="Betrieb">
<Reveal width="100%">
<div className="bg-white border border-slate-200 rounded-[3rem] p-16 md:p-24 space-y-16 relative overflow-hidden -mx-4 md:-mx-24 hover:border-slate-400 transition-all duration-500">
<div className="absolute top-0 right-0 text-[20rem] font-bold text-slate-50 select-none translate-x-1/4 -translate-y-1/4 opacity-50">B</div>