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

feat: unify code-like components with shared CodeWindow, fix blog re-render loop, and stabilize layouts
Some checks failed
Build & Deploy / 🔍 Prepare (push) Successful in 8s
Details
Build & Deploy / 🧪 QA (push) Failing after 1m2s
Details
Build & Deploy / 🏗️ Build (push) Failing after 3m44s
Details
Build & Deploy / 🚀 Deploy (push) Has been skipped
Details
Build & Deploy / 🩺 Health Check (push) Has been skipped
Details
Build & Deploy / 🔔 Notify (push) Successful in 2s
Details

Browse Source
This commit is contained in:
Marc Mintel
2026-02-15 17:34:07 +01:00
parent 7c774f65bc
commit c1295546a6
32 changed files with 3293 additions and 1235 deletions
Download Patch File Download Diff File Expand all files Collapse all files

403
apps/web/app/page.tsx
View File

@@ -1,18 +1,14 @@
"use client";
import {
ComparisonRow,
ConceptAutomation,
ConceptCode,
ConceptCommunication,
ConceptPrice,
ConceptPrototyping,
ConceptSystem,
ConceptWebsite,
DifferenceIllustration,
HeroArchitecture,
HeroMainIllustration,
} from "../src/components/Landing";
import { Reveal } from "../src/components/Reveal";
import { Marker } from "../src/components/Marker";
import { Section } from "../src/components/Section";
import {
H1,
@@ -22,172 +18,114 @@ import {
MonoLabel,
Label,
} from "../src/components/Typography";
import { BackgroundGrid, Card, Container } from "../src/components/Layout";
import { Card, Container } from "../src/components/Layout";
import { Button } from "../src/components/Button";
import { GradientMesh, CodeSnippet } from "../src/components/Effects";
import { IconList, IconListItem } from "../src/components/IconList";
import { HeroSection } from "../src/components/HeroSection";
import { GlitchText } from "../src/components/GlitchText";
import { Marker } from "../src/components/Marker";
export default function LandingPage() {
return (
<div className="flex flex-col bg-white overflow-hidden relative">
<BackgroundGrid />
{/* Dark Hero */}
<HeroSection />
{/* 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-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">
Websites <br />
<span className="text-slate-200">ohne Overhead.</span>
</H1>
<div className="pt-4">
<Button href="#contact" variant="outline">
Projekt anfragen
</Button>
</div>
</div>
</Reveal>
</div>
{/* Rest of page on white */}
{/* 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-110 md:scale-125 origin-center" />
</div>
</Reveal>
</div>
</div>
</Container>
</section>
{/* Section 02: The Promise */}
<Section number="02" title="Das Versprechen" borderTop>
{/* Section 02: The Promise – Streamlined */}
<Section
number="02"
title="Das Versprechen"
borderTop
effects={<GradientMesh variant="metallic" className="opacity-70" />}
>
<div className="space-y-16 relative">
<Reveal>
<H3 className="max-w-3xl">
Schluss mit aufgeblähten Prozessen. <br />
<span className="text-slate-200">
Ich reduziere auf das Wesentliche.
Kein Agentur-Zirkus. <br />
<span className="text-slate-400">
Nur{" "}
<Marker delay={0.3} color="rgba(148,163,184,0.15)">
Ergebnisse.
</Marker>
</span>
</H3>
</Reveal>
<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">
<Label className="text-slate-900">Was ich biete</Label>
</div>
<IconList className="space-y-6">
{[
{
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) => (
<IconListItem
key={i}
icon={item.icon}
iconContainerClassName="mt-0"
>
<LeadText className="text-xl">{item.text}</LeadText>
</IconListItem>
))}
</IconList>
</div>
</Reveal>
<Reveal delay={0.2}>
<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>
<IconList className="space-y-4">
{[
"Endlose Workshops ohne Ergebnis",
"PowerPoint-Schlachten",
"Outsourcing an Billig-Anbieter",
"Wartungsverträge mit versteckten Kosten",
].map((item, i) => (
<IconListItem
key={i}
bullet
className="line-through decoration-slate-200"
iconClassName="opacity-20"
>
<LeadText className="text-slate-400 text-lg">
{item}
</LeadText>
</IconListItem>
))}
</IconList>
</div>
</Reveal>
<div className="grid grid-cols-1 md:grid-cols-2 gap-8 relative z-10">
{[
{
icon: <ConceptCommunication className="w-8 h-8" />,
title: "Direkte Kommunikation",
text: "Sie sprechen mit dem Entwickler. Keine Stille Post, keine Umwege.",
},
{
icon: <ConceptPrototyping className="w-8 h-8" />,
title: "Schnelle Umsetzung",
text: "Sichtbare Fortschritte in Tagen. Prototypen statt Konzeptpapiere.",
},
{
icon: <ConceptCode className="w-8 h-8" />,
title: "Sauberer Code",
text: "Maßgeschneiderte Architektur. Kein Baukasten, kein Plugin-Chaos.",
},
{
icon: <ConceptPrice className="w-8 h-8" />,
title: "Klare Fixpreise",
text: "Volle Budgetsicherheit. Keine versteckten Kosten.",
},
].map((item, i) => (
<Reveal key={i} delay={0.1 + i * 0.1}>
<Card
variant="glass"
padding="normal"
techBorder
className="group"
>
<div className="space-y-4 relative z-10">
<div className="w-12 h-12 rounded-xl bg-slate-50 border border-slate-100 flex items-center justify-center group-hover:scale-110 transition-transform duration-500">
{item.icon}
</div>
<Label className="text-slate-900">{item.title}</Label>
<BodyText className="text-slate-500">{item.text}</BodyText>
</div>
</Card>
</Reveal>
))}
</div>
</div>
</Section>
{/* Section 03: The Difference */}
{/* Section 03: The Difference – Visual Comparison */}
<Section number="03" title="Der Unterschied" variant="white" borderTop>
<div className="space-y-16 relative">
<div className="flex flex-col md:flex-row gap-12 items-center">
<Reveal className="flex-1">
<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-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>
<Reveal>
<H3 className="max-w-3xl">
Ich arbeite für das Ergebnis, <br />
<span className="text-slate-400">
nicht gegen die{" "}
<Marker delay={0.4} color="rgba(148,163,184,0.1)">
Uhr.
</Marker>
</span>
</H3>
</Reveal>
<div className="grid grid-cols-1 gap-8 relative z-20">
<ComparisonRow
negativeLabel="Klassisch"
negativeText="Lange Planungsphasen und abstrakte Konzepte."
negativeText="Wochen in Planung, bevor eine einzige Zeile Code geschrieben wird."
positiveLabel="Mein Weg"
positiveText="Schnelle Prototypen. Sie sehen Fortschritt in Tagen."
positiveText="Schnelle Prototypen. Ergebnisse in Tagen, nicht Monaten."
delay={0.1}
/>
<ComparisonRow
negativeLabel="Klassisch"
negativeText="Komplexe Preisstrukturen und versteckte Kosten."
negativeText="Unvorhersehbare Kosten durch Stundenabrechnungen."
positiveLabel="Mein Weg"
positiveText="Klare Fixpreise. Volle Kostentransparenz."
positiveText="Fixpreise. Sie wissen von Anfang an, was es kostet."
reverse
delay={0.2}
/>
@@ -196,43 +134,40 @@ export default function LandingPage() {
</Section>
{/* Section 04: Target Group */}
<Section number="04" title="Zielgruppe" borderTop>
<Section number="04" title="Für wen" borderTop>
<div className="grid grid-cols-1 md:grid-cols-2 gap-8 relative z-10">
<Reveal>
<Card variant="dark" padding="normal" className="group">
<Card variant="glass" padding="normal" techBorder 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">
<div className="w-16 h-16 bg-slate-50 border border-slate-100 rounded-xl flex items-center justify-center">
<ConceptPrice className="w-8 h-8" />
</div>
<H3 className="text-white text-3xl">
<H3 className="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."
Sie wollen eine Website, die funktioniert – ohne sich mit
Technik beschäftigen zu müssen.
</LeadText>
</div>
<div className="pt-8 border-t border-white/5 mt-8">
<Label className="group-hover:text-white transition-colors">
<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>
<Reveal delay={0.2}>
<Card variant="white" padding="normal" className="group">
<Card variant="glass" padding="normal" techBorder 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."
Sie brauchen Landingpages und Tools, die Ergebnisse liefern.
Schnell und zuverlässig.
</LeadText>
</div>
<div className="pt-8 border-t border-slate-50 mt-8">
@@ -245,65 +180,93 @@ export default function LandingPage() {
</div>
</Section>
{/* Section 05: Services */}
{/* Section 05: Leistungen — Interactive Service Rows */}
<Section number="05" title="Leistungen" variant="gray" borderTop>
<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 className="space-y-0 relative z-20">
{[
{
num: "01",
binary: "00000001",
title: "Websites",
text: "High-Performance Websites mit maßgeschneiderter Architektur. Von der Konzeption bis zum Go-Live — individuell, schnell, messbar.",
tags: ["Next.js", "React", "TypeScript", "Performance"],
href: "/websites",
},
{
num: "02",
binary: "00000010",
title: "Systeme",
text: "Web-Applikationen und interne Tools, wenn Standard-Software nicht reicht. Dashboards, Portale, Automatisierungen.",
tags: ["Full-Stack", "APIs", "Datenbanken", "Auth"],
href: "/contact",
},
{
num: "03",
binary: "00000011",
title: "Automatisierung",
text: "Verbindung von Tools, automatische Prozesse, Daten-Synchronisation. Weniger manuelle Arbeit, mehr Effizienz.",
tags: ["CI/CD", "Workflows", "Integrationen", "Monitoring"],
href: "/contact",
},
].map((service, i) => (
<Reveal key={i} delay={0.1 + i * 0.15}>
<div className="group py-12 md:py-16 border-b border-slate-100 last:border-b-0 cursor-pointer transition-all duration-500">
<div className="flex flex-col md:flex-row md:items-start gap-8 md:gap-16">
{/* Number + Binary */}
<div className="md:w-32 shrink-0">
<span className="text-5xl md:text-6xl font-black text-slate-100 group-hover:text-slate-200 transition-colors duration-500 tracking-tighter block leading-none">
{service.num}
</span>
<span
className="text-[8px] font-mono text-slate-200 tracking-[0.3em] mt-2 block select-none group-hover:text-blue-300 transition-colors duration-700"
aria-hidden="true"
>
{service.binary}
</span>
</div>
{/* Content */}
<div className="flex-1 space-y-6">
<H3 className="text-3xl md:text-4xl group-hover:translate-x-2 transition-transform duration-500">
<GlitchText
trigger="inView"
delay={0.2 + i * 0.15}
duration={0.6}
>
{service.title}
</GlitchText>
</H3>
<BodyText className="text-slate-400 max-w-xl group-hover:text-slate-500 transition-colors duration-500">
{service.text}
</BodyText>
{/* Tags */}
<div className="flex flex-wrap gap-2">
{service.tags.map((tag, j) => (
<span
key={j}
className="px-3 py-1 text-[9px] font-mono uppercase tracking-widest text-slate-400 border border-slate-100 rounded-full bg-white/50 group-hover:border-slate-200 group-hover:text-slate-500 transition-all duration-500"
>
{tag}
</span>
))}
</div>
</div>
{/* Arrow */}
<div className="md:self-center shrink-0">
<Button
href={service.href}
variant="ghost"
size="normal"
showArrow
>
Details
</Button>
</div>
</div>
</div>
</Card>
</Reveal>
<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>
<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}>
<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>
<div className="space-y-4">
<H3 className="text-2xl">Automatisierung</H3>
<BodyText>
Verbindung von Tools, automatische Prozesse,
Daten-Synchronisation.
</BodyText>
</div>
</Card>
</Reveal>
</Reveal>
))}
</div>
</Section>
@@ -314,26 +277,26 @@ export default function LandingPage() {
<div className="space-y-16">
<H1 className="text-6xl md:text-8xl">
Lassen Sie uns <br />
<span className="text-slate-200">starten.</span>
<span className="text-slate-400">starten.</span>
</H1>
<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{" "}
<span className="text-slate-900">zeitnah</span> bei Ihnen.
Beschreiben Sie kurz Ihr Vorhaben. Ich melde mich{" "}
<span className="text-slate-900 border-b-2 border-slate-900/10">
<Marker color="rgba(255,235,59,0.5)">zeitnah</Marker>
</span>{" "}
bei Ihnen.
</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"
>
<Button href="/contact" size="large">
Projekt anfragen
</a>
</Button>
</div>
</div>
<div className="w-full md:w-72 space-y-6 p-6 bg-slate-50 rounded-2xl border border-slate-100">
<div className="w-full md:w-72 space-y-6 p-6 glass rounded-2xl">
<div className="flex items-center gap-3">
<div className="w-2 h-2 bg-green-500 rounded-full animate-pulse"></div>
<Label className="text-slate-900">Verfügbarkeit</Label>