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:20:50 +01:00
parent 802d707487
commit 936a997f03
4 changed files with 346 additions and 51 deletions
Download Patch File Download Diff File Expand all files Collapse all files

133
app/page.tsx
View File

@@ -1,8 +1,8 @@
import * as React from 'react';
import { Zap, Shield, MousePointer2, Sparkles, ArrowRight, Check, X } from 'lucide-react';
import { Zap, Shield, MousePointer2, Sparkles, ArrowRight, Check, X, Layout, Database, Workflow } from 'lucide-react';
import { Reveal } from '../src/components/Reveal';
import { Section } from '../src/components/Section';
import { HeroItem, FeatureCard, ComparisonRow, ServiceCard, HeroLines, GridLines, FlowLines, CirclePattern } from '../src/components/Landing';
import { HeroItem, FeatureCard, ComparisonRow, ServiceCard, HeroLines, GridLines, FlowLines, CirclePattern, ServicesFlow, ComparisonLines, ConnectorStart, ConnectorBranch, ConnectorSplit, ConnectorEnd } from '../src/components/Landing';
export default function LandingPage() {
return (
@@ -14,8 +14,13 @@ export default function LandingPage() {
}} />
{/* 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">
<section className="relative min-h-[80vh] flex items-center pt-12 md:pt-0 pb-24 md:pb-0">
<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>
<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">
@@ -44,7 +49,7 @@ export default function LandingPage() {
</div>
{/* Right Column: Visual & Context */}
<div className="md:col-span-7 relative h-[500px] md:h-[800px] flex items-center justify-center">
<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" />
@@ -53,15 +58,14 @@ export default function LandingPage() {
<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
01
</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 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
@@ -74,8 +78,8 @@ export default function LandingPage() {
</div>
</section>
{/* Section 01: The Promise */}
<Section number="01" title="Das Versprechen" borderTop>
{/* Section 02: The Promise */}
<Section number="02" title="Das Versprechen" borderTop connector={<ConnectorBranch className="h-full" />}>
<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 />
@@ -136,16 +140,21 @@ export default function LandingPage() {
</div>
</Section>
{/* Section 02: The Difference */}
<Section number="02" title="Der Unterschied" variant="gray" borderTop>
<div className="space-y-12">
{/* Section 03: The Difference */}
<Section number="03" title="Der Unterschied" variant="white" borderTop connector={<ConnectorStart className="h-full" />}>
<div className="space-y-12 relative">
{/* Animated Vertical Line */}
<div className="absolute left-1/2 top-24 bottom-0 -translate-x-1/2 hidden md:block w-24 h-full pointer-events-none z-0">
<ComparisonLines className="w-full h-full" />
</div>
<Reveal>
<p className="text-xl md:text-2xl font-serif italic text-slate-600 max-w-2xl">
<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="grid grid-cols-1 gap-6">
<div className="grid grid-cols-1 gap-6 relative z-10">
<ComparisonRow
negativeLabel="Agentur"
negativeText="Konzeptcalls, Meetings, Slides, Warten auf das Angebot."
@@ -172,33 +181,33 @@ export default function LandingPage() {
</div>
</Section>
{/* Section 03: Target Group */}
<Section number="03" title="Zielgruppe" borderTop>
{/* Section 04: Target Group */}
<Section number="04" title="Zielgruppe" borderTop connector={<ConnectorSplit className="h-full" />}>
<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="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>
<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">
<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-500 group-hover:text-white transition-colors">Perfekt für Sie</span>
<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-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="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-white border border-slate-200 rounded-xl flex items-center justify-center">
<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>
<h3 className="text-3xl font-bold tracking-tight text-slate-900">Marketing & <br/>Vertrieb</h3>
@@ -215,31 +224,59 @@ export default function LandingPage() {
</div>
</Section>
{/* Section 04: Services */}
<Section number="04" title="Leistungen" variant="gray" borderTop>
<div className="grid grid-cols-1 gap-8">
<ServiceCard
title="Websites"
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="Web-Applikationen, Kundenportale, interne Tools. Wenn Standard-Software an ihre Grenzen stößt."
delay={0.2}
/>
<ServiceCard
title="Automatisierung"
description="Verbindung von Tools, automatische PDF-Erstellung, Daten-Synchronisation. Sparen Sie manuelle Arbeit."
delay={0.3}
/>
{/* Section 05: Services - Visual Flow */}
<Section number="05" title="Leistungen" variant="gray" borderTop connector={<ConnectorBranch className="h-full" />}>
<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-10">
<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>
<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">
<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>
<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">
<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>
<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 05: Contact */}
<Section number="05" title="Kontakt" borderTop>
{/* Section 06: Contact */}
<Section number="06" title="Kontakt" borderTop connector={<ConnectorEnd className="h-full" />}>
<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 />
@@ -257,10 +294,10 @@ export default function LandingPage() {
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"
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"
>
hello@mintel.me
Projekt anfragen
</a>
</div>