mmintel/mintel.me
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

pages
Some checks failed
Build & Deploy Mintel Blog / build-and-deploy (push) Failing after 1m26s
Details

Browse Source
This commit is contained in:
Marc Mintel
2026-01-31 10:09:12 +01:00
parent 03fa2ea4a9
commit cd2d267e48
15 changed files with 745 additions and 789 deletions
Download Patch File Download Diff File Expand all files Collapse all files

363
app/page.tsx
View File

@@ -1,6 +1,4 @@
import { ArrowRight } from 'lucide-react';
import {
CirclePattern,
ComparisonRow,
ConceptAutomation,
ConceptCode,
@@ -10,80 +8,61 @@ import {
ConceptPrototyping,
ConceptSystem,
ConceptWebsite,
ConnectorBranch,
ConnectorEnd,
ConnectorSplit,
ConnectorStart,
ContactIllustration,
DifferenceIllustration,
FlowLines,
GridLines,
HeroArchitecture,
HeroMainIllustration,
ServicesFlow
HeroMainIllustration
} from '../src/components/Landing';
import { Reveal } from '../src/components/Reveal';
import { Section } from '../src/components/Section';
import { H1, H3, LeadText, BodyText, MonoLabel, Label } from '../src/components/Typography';
import { BackgroundGrid, Card, Container } from '../src/components/Layout';
import { Button } from '../src/components/Button';
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'
}} />
<BackgroundGrid />
{/* 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="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 min-h-[600px]">
{/* Left Column: Brand & Number */}
<div className="md:col-span-4 relative z-10 bg-white/50 backdrop-blur-[2px]">
{/* Hero Section */}
<section className="relative min-h-[80vh] flex items-center pt-24 md:pt-0">
<Container variant="narrow" className="relative">
<div className="grid grid-cols-1 md:grid-cols-12 gap-12 md:gap-24 items-center">
{/* Left Column */}
<div className="md:col-span-6 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 className="flex items-center gap-4">
<div className="w-8 h-px bg-slate-900"></div>
<MonoLabel className="text-slate-900">Digital Architect</MonoLabel>
</div>
<h1 className="text-6xl md:text-8xl font-bold text-slate-900 tracking-tighter leading-[0.9]">
<H1 className="text-6xl md:text-8xl">
Websites <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 border border-slate-200 bg-white text-slate-900 rounded-full font-bold text-sm uppercase tracking-widest hover:border-slate-400 hover:bg-slate-50 transition-all duration-500 ease-[cubic-bezier(0.23,1,0.32,1)] hover:-translate-y-0.5 hover:shadow-xl hover:shadow-slate-100 group"
>
<span className="text-slate-200">ohne Overhead.</span>
</H1>
<div className="pt-4">
<Button href="#contact" variant="outline">
Projekt anfragen
<ArrowRight className="w-4 h-4 group-hover:translate-x-1 transition-transform" />
</a>
</Button>
</div>
</div>
</Reveal>
</div>
{/* Right Column: Visual & Context */}
<div className="md:col-span-8 relative h-[600px] md:h-[900px] flex items-center justify-center">
{/* Hero Architecture Illustration - Background Layer */}
<div className="absolute inset-0 -z-10 opacity-5 pointer-events-none flex items-center justify-center scale-[2]">
{/* Right Column */}
<div className="md:col-span-6 relative h-[400px] md:h-[600px] flex items-center justify-center">
<div className="absolute inset-0 -z-10 opacity-[0.03] pointer-events-none flex items-center justify-center scale-150">
<HeroArchitecture className="w-full h-full" />
</div>
<Reveal delay={0.2} className="w-full h-full flex items-center justify-center">
<div className="relative w-full h-full flex items-center justify-center pointer-events-none">
<HeroMainIllustration className="w-full h-full scale-150 md:scale-[1.6] translate-x-12 md:translate-x-16 origin-center" />
<HeroMainIllustration className="w-full h-full scale-110 md:scale-125 origin-center" />
</div>
</Reveal>
</div>
</div>
</div>
</Container>
</section>
{/* Section 02: The Promise */}
@@ -91,41 +70,33 @@ export default function LandingPage() {
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 />
</div>
<Reveal>
<h3 className="text-3xl md:text-5xl font-bold text-slate-900 leading-tight tracking-tight max-w-3xl">
<H3 className="max-w-3xl">
Schluss mit aufgeblähten Prozessen. <br />
<span className="text-slate-300">Ich reduziere auf das Wesentliche.</span>
</h3>
<span className="text-slate-200">Ich reduziere auf das Wesentliche.</span>
</H3>
</Reveal>
<div className="grid grid-cols-1 md:grid-cols-2 gap-12 relative z-10">
<div className="grid grid-cols-1 md:grid-cols-2 gap-16 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 className="flex items-center gap-4">
<Label className="text-slate-900">Was ich biete</Label>
</div>
<ul className="space-y-8">
<ul className="space-y-6">
{[
{ 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" /> }
{ text: 'Direkte Kommunikation ohne Umwege', icon: <ConceptCommunication className="w-12 h-12" /> },
{ text: 'Schnelle Prototypen statt langer Konzepte', icon: <ConceptPrototyping className="w-12 h-12" /> },
{ text: 'Sauberer Code, der auch morgen noch läuft', icon: <ConceptCode className="w-12 h-12" /> },
{ text: 'Fixpreise für volle Budgetsicherheit', icon: <ConceptPrice className="w-12 h-12" /> }
].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-100 transition-all duration-500 group-hover:scale-110">
<li key={i} className="flex items-center gap-6 group">
<div className="shrink-0 transition-transform duration-500 group-hover:scale-110">
{item.icon}
</div>
{item.text}
<LeadText className="text-xl">{item.text}</LeadText>
</li>
))}
</ul>
@@ -133,12 +104,9 @@ export default function LandingPage() {
</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 className="space-y-8 opacity-40 hover:opacity-100 transition-opacity duration-700">
<div className="flex items-center gap-4">
<Label>Was ich nicht mache</Label>
</div>
<ul className="space-y-4">
{[
@@ -147,9 +115,9 @@ export default function LandingPage() {
'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-400 line-through">
<span className="w-1.5 h-1.5 bg-slate-300 rounded-full mt-2.5 shrink-0"></span>
{item}
<li key={i} className="flex items-start gap-3 decoration-slate-200 line-through">
<span className="w-1.5 h-1.5 bg-slate-200 rounded-full mt-2.5 shrink-0"></span>
<LeadText className="text-slate-400 text-lg">{item}</LeadText>
</li>
))}
</ul>
@@ -165,43 +133,37 @@ export default function LandingPage() {
title="Der Unterschied"
variant="white"
borderTop
connector={<ConnectorStart className="h-full" />}
>
<div className="space-y-12 relative">
<div className="space-y-16 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>
<LeadText className="text-2xl md:text-3xl leading-tight max-w-2xl relative z-10 text-slate-400">
Ich arbeite nicht gegen die Zeit, sondern <span className="text-slate-900">für das Ergebnis.</span> Mein Fokus liegt auf der Umsetzung, nicht auf der Verwaltung von Prozessen.
</LeadText>
</Reveal>
<Reveal delay={0.2} className="w-full md:w-80 shrink-0">
<DifferenceIllustration className="w-full h-auto" />
<Reveal delay={0.2} className="w-full md:w-72 shrink-0">
<div className="p-6 bg-slate-50 rounded-2xl border border-slate-100">
<DifferenceIllustration className="w-full h-auto grayscale opacity-50" />
</div>
</Reveal>
</div>
<div className="grid grid-cols-1 gap-6 relative z-20">
<div className="grid grid-cols-1 gap-8 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."
negativeLabel="Klassisch"
negativeText="Lange Planungsphasen und abstrakte Konzepte."
positiveLabel="Mein Weg"
positiveText="Schnelle Prototypen. Sie sehen Fortschritt in Tagen."
delay={0.1}
/>
<ComparisonRow
negativeLabel="Agentur"
negativeText="Stundensätze, Nachberechnungen, Budget-Überraschungen."
positiveLabel="Ich"
positiveText="Fixpreise. Ein Preis, ein Ergebnis. Keine Diskussionen."
negativeLabel="Klassisch"
negativeText="Komplexe Preisstrukturen und versteckte Kosten."
positiveLabel="Mein Weg"
positiveText="Klare Fixpreise. Volle Kostentransparenz."
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>
@@ -211,103 +173,97 @@ export default function LandingPage() {
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 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="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 className="grid grid-cols-1 md:grid-cols-2 gap-8 relative z-10">
<Reveal>
<Card variant="dark" padding="normal" className="group">
<div className="space-y-6 relative overflow-hidden">
<div className="w-16 h-16 bg-white/5 rounded-xl flex items-center justify-center border border-white/10">
<ConceptPrice className="w-8 h-8" />
</div>
<H3 className="text-white text-3xl">Unternehmer & <br/>Geschäftsführer</H3>
<LeadText className="text-slate-400 text-lg">
"Ich brauche eine Lösung, die funktioniert. Ich habe keine Zeit für technische Details."
</LeadText>
</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="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 className="pt-8 border-t border-white/5 mt-8">
<Label className="group-hover:text-white transition-colors">Perfekt für Sie</Label>
</div>
</Reveal>
</div>
</Card>
</Reveal>
<Reveal delay={0.2}>
<Card variant="white" padding="normal" className="group">
<div className="space-y-6 relative overflow-hidden">
<div className="w-16 h-16 bg-slate-50 border border-slate-100 rounded-xl flex items-center justify-center">
<ConceptWebsite className="w-8 h-8" />
</div>
<H3 className="text-3xl">Marketing & <br/>Vertrieb</H3>
<LeadText className="text-slate-400 text-lg">
"Wir brauchen Landingpages und Tools, um unsere Ziele zu erreichen. Schnell und zuverlässig."
</LeadText>
</div>
<div className="pt-8 border-t border-slate-50 mt-8">
<Label className="group-hover:text-slate-900 transition-colors">Perfekt für Sie</Label>
</div>
</Card>
</Reveal>
</div>
</Section>
{/* Section 05: Services - Visual Flow */}
{/* Section 05: Services */}
<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-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="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
<div className="grid grid-cols-1 md:grid-cols-3 gap-8 relative z-20">
<Reveal delay={0.1}>
<Card variant="white" padding="small" className="group">
<div className="w-16 h-16 bg-slate-50 rounded-xl flex items-center justify-center mb-8 group-hover:scale-110 transition-transform duration-500">
<ConceptWebsite className="w-8 h-8" />
</div>
<div className="space-y-4">
<H3 className="text-2xl">Websites</H3>
<BodyText>
High-Performance Websites. Maßgeschneiderte Architektur statt Baukasten.
</BodyText>
<div className="pt-4">
<a href="/websites" className="text-[10px] font-bold uppercase tracking-[0.4em] text-slate-900 border-b border-slate-100 pb-1 hover:border-slate-900 transition-all">
Details
</a>
</div>
</div>
</Reveal>
</Card>
</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="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>
<Reveal delay={0.3}>
<Card variant="white" padding="small" className="group mt-8 md:mt-0">
<div className="w-16 h-16 bg-slate-50 rounded-xl flex items-center justify-center mb-8 group-hover:scale-110 transition-transform duration-500">
<ConceptSystem className="w-8 h-8" />
</div>
</Reveal>
<div className="space-y-4">
<H3 className="text-2xl">Systeme</H3>
<BodyText>
Web-Applikationen, Portale, interne Tools. Wenn Standard an Grenzen stößt.
</BodyText>
</div>
</Card>
</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="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>
<Reveal delay={0.5}>
<Card variant="white" padding="small" className="group">
<div className="w-16 h-16 bg-slate-50 rounded-xl flex items-center justify-center mb-8 group-hover:scale-110 transition-transform duration-500">
<ConceptAutomation className="w-8 h-8" />
</div>
</Reveal>
</div>
<div className="space-y-4">
<H3 className="text-2xl">Automatisierung</H3>
<BodyText>
Verbindung von Tools, automatische Prozesse, Daten-Synchronisation.
</BodyText>
</div>
</Card>
</Reveal>
</div>
</Section>
@@ -316,43 +272,38 @@ export default function LandingPage() {
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 />
</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]">
<div className="space-y-16">
<H1 className="text-6xl md:text-8xl">
Lassen Sie uns <br />
<span className="text-slate-300">starten.</span>
</h2>
<span className="text-slate-200">starten.</span>
</H1>
<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 className="flex flex-col md:flex-row gap-16 items-start relative z-10">
<div className="space-y-8 flex-1">
<LeadText className="text-2xl md:text-3xl text-slate-400">
Schreiben Sie mir kurz, worum es geht. Ich melde mich innerhalb von <span className="text-slate-900">24 Stunden</span>.
</LeadText>
<div className="pt-4">
<a
href="/contact"
className="inline-block text-3xl md:text-5xl font-bold text-slate-900 hover:text-slate-400 transition-all duration-700 border-b-2 border-slate-900 hover:border-slate-200 pb-2"
>
Projekt anfragen
</a>
</div>
</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-full md:w-72 space-y-6 p-6 bg-slate-50 rounded-2xl border border-slate-100">
<div className="flex items-center gap-3">
<div className="w-2 h-2 bg-green-500 rounded-full animate-pulse"></div>
Verfügbar für neue Projekte
<Label className="text-slate-900">Verfügbarkeit</Label>
</div>
<p className="text-slate-500 text-sm">
Aktuell nehme ich Projekte für Q2 2026 an.
</p>
<BodyText className="text-base leading-snug">
Aktuell nehme ich Projekte für <span className="font-bold text-slate-900">Q2 2026</span> an.
</BodyText>
</div>
</div>
</div>