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 23:51:42 +01:00
parent f506f2d7a3
commit 28d99abf39
5 changed files with 717 additions and 38 deletions
Download Patch File Download Diff File Expand all files Collapse all files

184
app/page.tsx
View File

@@ -1,5 +1,39 @@
import { ArrowRight, Check, Database, Layout, Shield, Workflow, X, Zap } from 'lucide-react';
import { CirclePattern, ComparisonRow, ConnectorBranch, ConnectorEnd, ConnectorSplit, ConnectorStart, FlowLines, GridLines, HeroLines, ServicesFlow } from '../src/components/Landing';
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';
@@ -15,10 +49,16 @@ export default function LandingPage() {
{/* 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">
@@ -60,6 +100,12 @@ export default function LandingPage() {
<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>
@@ -79,8 +125,17 @@ export default function LandingPage() {
</section>
{/* Section 02: The Promise */}
<Section number="02" title="Das Versprechen" borderTop connector={<ConnectorBranch className="h-full" />}>
<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>
@@ -96,19 +151,23 @@ export default function LandingPage() {
<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>
<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-4">
<ul className="space-y-8">
{[
'Direkte Kommunikation ohne Account Manager',
'Schnelle Prototypen statt langer Konzepte',
'Sauberer Code, der auch morgen noch läuft',
'Fixpreise für klare Budgetsicherheit'
{ 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-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 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>
@@ -118,7 +177,9 @@ export default function LandingPage() {
<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>
<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">
@@ -141,13 +202,25 @@ export default function LandingPage() {
</Section>
{/* Section 03: The Difference */}
<Section number="03" title="Der Unterschied" variant="white" borderTop connector={<ConnectorStart className="h-full" />}>
<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">
<Reveal>
<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>
<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
@@ -177,7 +250,13 @@ export default function LandingPage() {
</Section>
{/* Section 04: Target Group */}
<Section number="04" title="Zielgruppe" borderTop connector={<ConnectorSplit className="h-full" />}>
<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 />
@@ -185,9 +264,12 @@ export default function LandingPage() {
<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">
<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 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">
@@ -201,9 +283,12 @@ export default function LandingPage() {
</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">
<div className="w-12 h-12 bg-slate-50 border border-slate-200 rounded-xl flex items-center justify-center">
<Shield className="w-6 h-6 text-slate-900" />
<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">
@@ -220,7 +305,14 @@ export default function LandingPage() {
</Section>
{/* Section 05: Services - Visual Flow */}
<Section number="05" title="Leistungen" variant="gray" borderTop connector={<ConnectorBranch className="h-full" />}>
<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">
@@ -229,9 +321,12 @@ export default function LandingPage() {
<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">
<div className="w-16 h-16 bg-slate-50 rounded-2xl flex items-center justify-center mb-6 group-hover:scale-110 transition-transform duration-500">
<Layout className="w-8 h-8 text-slate-900" />
<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">
@@ -244,9 +339,12 @@ export default function LandingPage() {
</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">
<div className="w-16 h-16 bg-slate-50 rounded-2xl flex items-center justify-center mb-6 group-hover:scale-110 transition-transform duration-500">
<Database className="w-8 h-8 text-slate-900" />
<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">
@@ -256,9 +354,12 @@ export default function LandingPage() {
</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">
<div className="w-16 h-16 bg-slate-50 rounded-2xl flex items-center justify-center mb-6 group-hover:scale-110 transition-transform duration-500">
<Workflow className="w-8 h-8 text-slate-900" />
<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">
@@ -271,11 +372,20 @@ export default function LandingPage() {
</Section>
{/* Section 06: Contact */}
<Section number="06" title="Kontakt" borderTop connector={<ConnectorEnd className="h-full" />}>
<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]">