426 lines
21 KiB
TypeScript
426 lines
21 KiB
TypeScript
import { ArrowRight } from 'lucide-react';
|
||
import {
|
||
CirclePattern,
|
||
ComparisonRow,
|
||
ConnectorBranch,
|
||
ConnectorEnd,
|
||
ConnectorSplit,
|
||
ConnectorStart,
|
||
FlowLines,
|
||
GridLines,
|
||
HeroLines,
|
||
ServicesFlow,
|
||
DirectCommunication,
|
||
FastPrototyping,
|
||
CleanCode,
|
||
FixedPrice,
|
||
MinimalistArchitect,
|
||
WebsitesIllustration,
|
||
SystemsIllustration,
|
||
AutomationIllustration,
|
||
DifferenceIllustration,
|
||
TargetGroupIllustration,
|
||
ContactIllustration,
|
||
PromiseSectionIllustration,
|
||
ServicesSectionIllustration,
|
||
ConceptCommunication,
|
||
ConceptPrototyping,
|
||
ConceptCode,
|
||
ConceptPrice,
|
||
ConceptWebsite,
|
||
ConceptSystem,
|
||
ConceptAutomation,
|
||
ConceptTarget,
|
||
FloatingParticles,
|
||
ConceptMessy
|
||
} from '../src/components/Landing';
|
||
import { Reveal } from '../src/components/Reveal';
|
||
import { Section } from '../src/components/Section';
|
||
|
||
export default function LandingPage() {
|
||
return (
|
||
<div className="flex flex-col bg-white overflow-hidden relative">
|
||
|
||
{/* Subtle Grid Pattern Overlay */}
|
||
<div className="fixed inset-0 pointer-events-none -z-20 opacity-[0.015]" style={{
|
||
backgroundImage: 'linear-gradient(#0f172a 1px, transparent 1px), linear-gradient(90deg, #0f172a 1px, transparent 1px)',
|
||
backgroundSize: '80px 80px'
|
||
}} />
|
||
|
||
{/* Hero Section - Split Layout */}
|
||
<section className="relative min-h-[80vh] flex items-center pt-12 md:pt-0 pb-24 md:pb-0">
|
||
<div className="absolute inset-0 pointer-events-none">
|
||
<FloatingParticles className="w-full h-full" />
|
||
</div>
|
||
<div className="narrow-container w-full relative">
|
||
{/* Connector Start for Hero */}
|
||
<div className="absolute left-[2.5rem] top-32 bottom-0 w-24 hidden md:block -z-10 pointer-events-none">
|
||
<ConnectorStart className="h-full" />
|
||
<div className="absolute top-64 left-0 w-32 h-32 opacity-20">
|
||
<MinimalistArchitect />
|
||
</div>
|
||
</div>
|
||
|
||
<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 bg-white/50 backdrop-blur-[2px]">
|
||
<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>
|
||
</Reveal>
|
||
</div>
|
||
|
||
{/* Right Column: Visual & Context */}
|
||
<div className="md:col-span-7 relative h-[400px] md:h-[600px] 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.2}>
|
||
<div className="relative bg-white/90 backdrop-blur-md p-8 md:p-12 border border-slate-100 rounded-2xl shadow-2xl shadow-slate-100/50 max-w-md mx-auto z-10">
|
||
<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">
|
||
01
|
||
</div>
|
||
|
||
{/* Minimalist Architect Illustration in Background */}
|
||
<div className="absolute right-4 bottom-4 w-24 h-24 opacity-10 -z-10">
|
||
<MinimalistArchitect />
|
||
</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 flex items-center justify-center text-slate-400 font-bold">
|
||
M
|
||
</div>
|
||
<div className="text-xs font-bold uppercase tracking-widest text-slate-900">
|
||
Marc Mintel
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</Reveal>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
{/* Section 02: The Promise */}
|
||
<Section
|
||
number="02"
|
||
title="Das Versprechen"
|
||
borderTop
|
||
connector={<ConnectorBranch className="h-full" />}
|
||
illustration={<PromiseSectionIllustration className="w-32 h-32" />}
|
||
>
|
||
<div className="space-y-16 relative">
|
||
<div className="absolute inset-0 pointer-events-none">
|
||
<FloatingParticles className="w-full h-full" delay={2} />
|
||
</div>
|
||
<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 relative z-10">
|
||
<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-12 h-12 rounded-xl bg-slate-50 flex items-center justify-center border border-slate-100">
|
||
<ConceptCode className="w-8 h-8" />
|
||
</div>
|
||
Was ich biete
|
||
</div>
|
||
<ul className="space-y-8">
|
||
{[
|
||
{ text: 'Direkte Kommunikation ohne Account Manager', icon: <ConceptCommunication className="w-16 h-16" /> },
|
||
{ text: 'Schnelle Prototypen statt langer Konzepte', icon: <ConceptPrototyping className="w-16 h-16" /> },
|
||
{ text: 'Sauberer Code, der auch morgen noch läuft', icon: <ConceptCode className="w-16 h-16" /> },
|
||
{ text: 'Fixpreise für klare Budgetsicherheit', icon: <ConceptPrice className="w-16 h-16" /> }
|
||
].map((item, i) => (
|
||
<li key={i} className="flex items-center gap-6 text-slate-600 font-serif italic text-lg group">
|
||
<div className="shrink-0 opacity-80 group-hover:opacity-100 transition-all duration-500 group-hover:scale-110">
|
||
{item.icon}
|
||
</div>
|
||
{item.text}
|
||
</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-12 h-12 rounded-xl bg-slate-50 flex items-center justify-center border border-slate-100 grayscale">
|
||
<ConceptMessy className="w-8 h-8" />
|
||
</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>
|
||
</Section>
|
||
|
||
{/* Section 03: The Difference */}
|
||
<Section
|
||
number="03"
|
||
title="Der Unterschied"
|
||
variant="white"
|
||
borderTop
|
||
connector={<ConnectorStart className="h-full" />}
|
||
illustration={<DifferenceIllustration className="w-32 h-32" />}
|
||
>
|
||
<div className="space-y-12 relative">
|
||
<div className="flex flex-col md:flex-row gap-12 items-center">
|
||
<Reveal className="flex-1">
|
||
<p className="text-xl md:text-2xl font-serif italic text-slate-600 max-w-2xl relative z-10">
|
||
Der klassische Agentur-Weg ist oft langsam und teuer. Mein Ansatz ist radikal anders: Ich baue zuerst, dann reden wir über Details.
|
||
</p>
|
||
</Reveal>
|
||
<Reveal delay={0.2} className="w-full md:w-80 shrink-0">
|
||
<DifferenceIllustration className="w-full h-auto" />
|
||
</Reveal>
|
||
</div>
|
||
|
||
<div className="grid grid-cols-1 gap-6 relative z-20">
|
||
<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>
|
||
|
||
{/* Section 04: Target Group */}
|
||
<Section
|
||
number="04"
|
||
title="Zielgruppe"
|
||
borderTop
|
||
connector={<ConnectorSplit className="h-full" />}
|
||
illustration={<TargetGroupIllustration className="w-32 h-32" />}
|
||
>
|
||
<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 relative z-10">
|
||
<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 shadow-2xl shadow-slate-900/20">
|
||
<div className="space-y-6 relative overflow-hidden">
|
||
<div className="absolute -right-4 -top-4 w-32 h-32 opacity-20 pointer-events-none">
|
||
<ConceptTarget className="w-full h-full" />
|
||
</div>
|
||
<div className="w-16 h-16 bg-white/10 rounded-2xl flex items-center justify-center">
|
||
<ConceptPrice className="w-10 h-10" />
|
||
</div>
|
||
<h3 className="text-3xl font-bold tracking-tight text-white">Unternehmer & <br/>Geschäftsführer</h3>
|
||
<p className="text-slate-300 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-400 group-hover:text-white transition-colors">Perfekt für Sie</span>
|
||
</div>
|
||
</div>
|
||
</Reveal>
|
||
<Reveal delay={0.2}>
|
||
<div className="p-10 bg-white border border-slate-100 rounded-3xl h-full flex flex-col justify-between group hover:border-slate-300 transition-colors duration-500 shadow-xl shadow-slate-100/50">
|
||
<div className="space-y-6 relative overflow-hidden">
|
||
<div className="absolute -right-4 -top-4 w-32 h-32 opacity-10 pointer-events-none">
|
||
<ConceptTarget className="w-full h-full" />
|
||
</div>
|
||
<div className="w-16 h-16 bg-slate-50 border border-slate-200 rounded-2xl flex items-center justify-center">
|
||
<ConceptWebsite className="w-10 h-10" />
|
||
</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>
|
||
|
||
{/* Section 05: Services - Visual Flow */}
|
||
<Section
|
||
number="05"
|
||
title="Leistungen"
|
||
variant="gray"
|
||
borderTop
|
||
connector={<ConnectorBranch className="h-full" />}
|
||
illustration={<ServicesSectionIllustration className="w-32 h-32" />}
|
||
>
|
||
<div className="relative py-12">
|
||
{/* Connecting Line Illustration */}
|
||
<div className="absolute top-1/2 left-0 w-full -translate-y-1/2 hidden md:block">
|
||
<ServicesFlow />
|
||
</div>
|
||
|
||
<div className="grid grid-cols-1 md:grid-cols-3 gap-8 relative z-20">
|
||
<Reveal delay={0.1}>
|
||
<div className="bg-white p-8 rounded-2xl border border-slate-100 shadow-lg hover:shadow-xl transition-all duration-300 group h-full relative overflow-hidden">
|
||
<div className="absolute -right-4 -top-4 w-32 h-32 opacity-[0.1] group-hover:opacity-[0.2] transition-opacity duration-500 pointer-events-none">
|
||
<ConceptWebsite />
|
||
</div>
|
||
<div className="w-20 h-20 bg-slate-50 rounded-2xl flex items-center justify-center mb-6 group-hover:scale-110 transition-transform duration-500">
|
||
<ConceptWebsite className="w-12 h-12" />
|
||
</div>
|
||
<h3 className="text-2xl font-bold text-slate-900 mb-4">Websites</h3>
|
||
<p className="text-slate-500 font-serif italic mb-6">
|
||
High-Performance Websites. Kein Baukasten, sondern maßgeschneiderte Architektur.
|
||
</p>
|
||
<a href="/websites" className="text-xs font-bold uppercase tracking-widest text-slate-900 border-b border-slate-200 pb-1 hover:border-slate-900 transition-colors">
|
||
Preise ansehen
|
||
</a>
|
||
</div>
|
||
</Reveal>
|
||
|
||
<Reveal delay={0.3}>
|
||
<div className="bg-white p-8 rounded-2xl border border-slate-100 shadow-lg hover:shadow-xl transition-all duration-300 group h-full mt-8 md:mt-0 relative overflow-hidden">
|
||
<div className="absolute -right-4 -top-4 w-32 h-32 opacity-[0.1] group-hover:opacity-[0.2] transition-opacity duration-500 pointer-events-none">
|
||
<ConceptSystem />
|
||
</div>
|
||
<div className="w-20 h-20 bg-slate-50 rounded-2xl flex items-center justify-center mb-6 group-hover:scale-110 transition-transform duration-500">
|
||
<ConceptSystem className="w-12 h-12" />
|
||
</div>
|
||
<h3 className="text-2xl font-bold text-slate-900 mb-4">Systeme</h3>
|
||
<p className="text-slate-500 font-serif italic">
|
||
Web-Applikationen, Kundenportale, interne Tools. Wenn Standard-Software an ihre Grenzen stößt.
|
||
</p>
|
||
</div>
|
||
</Reveal>
|
||
|
||
<Reveal delay={0.5}>
|
||
<div className="bg-white p-8 rounded-2xl border border-slate-100 shadow-lg hover:shadow-xl transition-all duration-300 group h-full relative overflow-hidden">
|
||
<div className="absolute -right-4 -top-4 w-32 h-32 opacity-[0.1] group-hover:opacity-[0.2] transition-opacity duration-500 pointer-events-none">
|
||
<ConceptAutomation />
|
||
</div>
|
||
<div className="w-20 h-20 bg-slate-50 rounded-2xl flex items-center justify-center mb-6 group-hover:scale-110 transition-transform duration-500">
|
||
<ConceptAutomation className="w-12 h-12" />
|
||
</div>
|
||
<h3 className="text-2xl font-bold text-slate-900 mb-4">Automatisierung</h3>
|
||
<p className="text-slate-500 font-serif italic">
|
||
Verbindung von Tools, automatische PDF-Erstellung, Daten-Synchronisation.
|
||
</p>
|
||
</div>
|
||
</Reveal>
|
||
</div>
|
||
</div>
|
||
</Section>
|
||
|
||
{/* Section 06: Contact */}
|
||
<Section
|
||
number="06"
|
||
title="Kontakt"
|
||
borderTop
|
||
connector={<ConnectorEnd className="h-full" />}
|
||
illustration={<ContactIllustration className="w-32 h-32" />}
|
||
>
|
||
<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>
|
||
<div className="absolute left-1/2 top-0 -translate-x-1/2 w-32 h-32 opacity-10 -z-10">
|
||
<ContactIllustration />
|
||
</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 relative z-10">
|
||
<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="/contact"
|
||
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"
|
||
>
|
||
Projekt anfragen
|
||
</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>
|
||
</Reveal>
|
||
</div>
|
||
</Section>
|
||
</div>
|
||
);
|
||
}
|