design
This commit is contained in:
397
app/page.tsx
397
app/page.tsx
@@ -1,68 +1,71 @@
|
||||
import * as React from 'react';
|
||||
import { Zap, Shield, MousePointer2, Sparkles } from 'lucide-react';
|
||||
import { Zap, Shield, MousePointer2, Sparkles, ArrowRight, Check, X } from 'lucide-react';
|
||||
import { Reveal } from '../src/components/Reveal';
|
||||
import { Section } from '../src/components/Section';
|
||||
import { HeroItem, FeatureCard, ComparisonRow, ServiceCard } from '../src/components/Landing';
|
||||
import { HeroItem, FeatureCard, ComparisonRow, ServiceCard, HeroLines, GridLines, FlowLines, CirclePattern } from '../src/components/Landing';
|
||||
|
||||
export default function LandingPage() {
|
||||
return (
|
||||
<div className="flex flex-col bg-white overflow-hidden">
|
||||
{/* Global Background Pattern */}
|
||||
<div className="fixed inset-0 pointer-events-none -z-20 opacity-[0.02]" style={{
|
||||
backgroundImage: 'radial-gradient(circle at 2px 2px, #0f172a 1px, transparent 0)',
|
||||
<div className="fixed inset-0 pointer-events-none -z-20 opacity-[0.03]" style={{
|
||||
backgroundImage: 'linear-gradient(#0f172a 1px, transparent 1px), linear-gradient(90deg, #0f172a 1px, transparent 1px)',
|
||||
backgroundSize: '40px 40px'
|
||||
}} />
|
||||
|
||||
{/* Hero Section - High Impact */}
|
||||
<section className="relative pt-12 md:pt-24 pb-24 md:pb-32">
|
||||
<div className="narrow-container relative">
|
||||
{/* Background Illustration/Pattern */}
|
||||
<div className="absolute -left-24 -top-24 text-[15rem] md:text-[20rem] font-bold text-slate-50 select-none -z-10 opacity-50 pointer-events-none">
|
||||
00
|
||||
</div>
|
||||
|
||||
{/* Floating Elements */}
|
||||
<div className="absolute right-0 top-0 w-64 h-64 bg-slate-50 rounded-full blur-[80px] -z-10 opacity-60 animate-pulse"></div>
|
||||
|
||||
<div className="space-y-16 md:space-y-20 relative">
|
||||
<Reveal>
|
||||
<div className="space-y-4">
|
||||
<div className="flex items-center gap-3 text-slate-400 font-mono text-[10px] uppercase tracking-[0.3em] mb-4">
|
||||
<span className="w-6 h-px bg-slate-200"></span>
|
||||
Digital Architect & Developer
|
||||
{/* 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">
|
||||
<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">
|
||||
<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>
|
||||
<h1 className="text-5xl md:text-8xl font-bold text-slate-900 tracking-tighter leading-[0.95]">
|
||||
Digitale Systeme <br />
|
||||
<span className="text-slate-200">ohne Overhead.</span>
|
||||
</h1>
|
||||
</div>
|
||||
</Reveal>
|
||||
|
||||
<div className="space-y-12 md:space-y-16">
|
||||
<div className="grid grid-cols-1 gap-4 md:gap-6 max-w-4xl">
|
||||
{[
|
||||
{ title: 'Agenturen sind zu langsam.', desc: 'Wochenlange Konzepte statt schneller Ergebnisse.' },
|
||||
{ title: 'CMS will keiner pflegen.', desc: 'Ich baue Systeme, die so einfach sind, dass sie wirklich genutzt werden.' },
|
||||
{ title: 'Digitale Themen bleiben liegen.', desc: 'Weil der Overhead die Umsetzung erstickt.' },
|
||||
].map((item, i) => (
|
||||
<HeroItem
|
||||
key={i}
|
||||
number={`0${i + 1}`}
|
||||
title={item.title}
|
||||
description={item.desc}
|
||||
delay={0.1 * (i + 1)}
|
||||
/>
|
||||
))}
|
||||
</Reveal>
|
||||
</div>
|
||||
|
||||
{/* Right Column: Visual & Context */}
|
||||
<div className="md:col-span-7 relative h-[500px] md:h-[800px] 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.5}>
|
||||
<div className="relative group inline-block">
|
||||
<div className="absolute -inset-4 bg-slate-50 rounded-2xl scale-95 opacity-0 group-hover:scale-100 group-hover:opacity-100 transition-all duration-500 -z-10"></div>
|
||||
<div className="border-l-4 border-slate-900 pl-6 md:pl-8 py-2">
|
||||
<p className="text-3xl md:text-6xl font-bold text-slate-900 tracking-tighter leading-none">
|
||||
Kein Zirkus. <br />
|
||||
<span className="text-slate-200">Nur Ergebnisse.</span>
|
||||
</p>
|
||||
<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
|
||||
</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>
|
||||
<div className="text-xs font-bold uppercase tracking-widest text-slate-900">
|
||||
Marc Mintel
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Reveal>
|
||||
@@ -71,153 +74,209 @@ export default function LandingPage() {
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Was ich mache - Designed Grid */}
|
||||
<Section number="01" title="Das Versprechen" numberPosition="right" variant="gray" borderTop>
|
||||
<div className="grid grid-cols-1 md:grid-cols-12 gap-12 md:gap-16 items-start">
|
||||
<div className="md:col-span-5">
|
||||
<Reveal>
|
||||
<div className="space-y-6">
|
||||
<div className="w-12 h-12 bg-slate-900 rounded-xl flex items-center justify-center text-white mb-6 rotate-3 hover:rotate-0 transition-transform duration-500">
|
||||
<Sparkles className="w-6 h-6" />
|
||||
{/* Section 01: The Promise */}
|
||||
<Section number="01" title="Das Versprechen" borderTop>
|
||||
<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">
|
||||
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">
|
||||
<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>
|
||||
Was ich biete
|
||||
</div>
|
||||
<h2 className="text-3xl md:text-5xl font-bold text-slate-900 leading-[1.1] tracking-tight">
|
||||
Direkt. <br />
|
||||
Sauber. <br />
|
||||
Ohne Zirkus.
|
||||
</h2>
|
||||
<ul className="space-y-4">
|
||||
{[
|
||||
'Direkte Kommunikation ohne Account Manager',
|
||||
'Schnelle Prototypen statt langer Konzepte',
|
||||
'Sauberer Code, der auch morgen noch läuft',
|
||||
'Fixpreise für klare Budgetsicherheit'
|
||||
].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>
|
||||
))}
|
||||
</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-8 h-8 rounded-full bg-slate-50 flex items-center justify-center"><X className="w-4 h-4" /></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 className="md:col-span-7">
|
||||
<div className="space-y-10">
|
||||
<Reveal delay={0.2}>
|
||||
<p className="font-serif text-xl md:text-2xl leading-relaxed text-slate-700 italic">
|
||||
Ich setze digitale Systeme für Unternehmen um – ohne Workshops, ohne Tickets, ohne Tech-Blabla.
|
||||
</p>
|
||||
</Reveal>
|
||||
<div className="grid grid-cols-1 gap-6">
|
||||
<FeatureCard
|
||||
icon={Zap}
|
||||
title="Websites & Tools"
|
||||
description="Alles, was Ihr Unternehmen digital voranbringt."
|
||||
delay={0.3}
|
||||
/>
|
||||
<FeatureCard
|
||||
icon={Shield}
|
||||
title="Kein Overhead"
|
||||
description="Sie erklären, ich baue. Es funktioniert einfach."
|
||||
delay={0.4}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Section>
|
||||
|
||||
{/* Section 02: The Difference */}
|
||||
<Section number="02" title="Der Unterschied" variant="gray" borderTop>
|
||||
<div className="space-y-12">
|
||||
<Reveal>
|
||||
<p className="text-xl md:text-2xl font-serif italic text-slate-600 max-w-2xl">
|
||||
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">
|
||||
<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>
|
||||
|
||||
{/* Comparison - Visual Path */}
|
||||
<Section number="02" title="Der Unterschied" borderTop>
|
||||
<div className="space-y-16 md:space-y-24 relative">
|
||||
{/* Connecting line */}
|
||||
<div className="absolute left-1/2 top-0 bottom-0 w-px bg-slate-100 -translate-x-1/2 -z-10 hidden md:block"></div>
|
||||
|
||||
<ComparisonRow
|
||||
negativeLabel="Agentur"
|
||||
negativeText="Konzeptcalls, Meetings, Slides, Warten auf das Angebot."
|
||||
positiveLabel="Ich"
|
||||
positiveText={<>Ich baue zuerst. <br />Dann reden wir.</>}
|
||||
delay={0.1}
|
||||
/>
|
||||
|
||||
<ComparisonRow
|
||||
negativeLabel="Agentur"
|
||||
negativeText={<>
|
||||
<span className="line-through decoration-slate-200">"Das dauert nur kurz"</span> <br />
|
||||
→ Überraschung auf der Rechnung.
|
||||
</>}
|
||||
positiveLabel="Ich"
|
||||
positiveText={<>Fixpreise. <br />Immer.</>}
|
||||
reverse
|
||||
delay={0.2}
|
||||
/>
|
||||
{/* Section 03: Target Group */}
|
||||
<Section number="03" title="Zielgruppe" borderTop>
|
||||
<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="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">
|
||||
"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>
|
||||
</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="space-y-6">
|
||||
<div className="w-12 h-12 bg-white 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>
|
||||
<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>
|
||||
|
||||
{/* Für wen - Designed Box */}
|
||||
<Section number="03" title="Zielgruppe" numberPosition="right" variant="gray" borderTop>
|
||||
<Reveal>
|
||||
<div className="relative p-8 md:p-16 border border-slate-100 rounded-3xl bg-white overflow-hidden group">
|
||||
{/* Decorative elements */}
|
||||
<div className="absolute top-0 right-0 w-64 h-64 bg-slate-50 -mr-32 -mt-32 rounded-full -z-10 group-hover:scale-110 transition-transform duration-1000"></div>
|
||||
|
||||
<div className="absolute top-0 left-10 w-px h-16 bg-slate-100 -translate-y-8"></div>
|
||||
<h2 className="text-3xl md:text-6xl font-bold text-slate-900 leading-[1.1] mb-12 tracking-tighter">
|
||||
Für Unternehmen, die <br />
|
||||
<span className="text-slate-100">Ergebnisse</span> wollen.
|
||||
</h2>
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-x-12 gap-y-6">
|
||||
{[
|
||||
'Keine Lust auf Agentur-Zirkus',
|
||||
'Kein CMS selbst pflegen',
|
||||
'Keine Tickets schreiben',
|
||||
'Keinen eigenen Entwickler',
|
||||
].map((item, i) => (
|
||||
<div key={i} className="flex items-center gap-4 text-lg md:text-xl font-serif text-slate-600 italic group/item">
|
||||
<div className="w-1.5 h-1.5 bg-slate-900 rounded-full shrink-0 group-hover/item:scale-150 transition-transform duration-300"></div>
|
||||
<span>{item}</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</Reveal>
|
||||
</Section>
|
||||
|
||||
{/* Leistungen - Visual Cards */}
|
||||
<Section number="04" title="Leistungen" borderTop>
|
||||
<div className="grid grid-cols-1 gap-8 md:gap-12">
|
||||
{/* Section 04: Services */}
|
||||
<Section number="04" title="Leistungen" variant="gray" borderTop>
|
||||
<div className="grid grid-cols-1 gap-8">
|
||||
<ServiceCard
|
||||
title="Websites"
|
||||
description="Neue Seiten, Relaunch oder Übernahme bestehender Systeme. Inklusive Hosting, SEO und Performance."
|
||||
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="Produktbereiche, Blogs, Jobs, API-Anbindungen, PDF-Generatoren und Sonderlogik."
|
||||
description="Web-Applikationen, Kundenportale, interne Tools. Wenn Standard-Software an ihre Grenzen stößt."
|
||||
delay={0.2}
|
||||
/>
|
||||
|
||||
<ServiceCard
|
||||
title="Tools"
|
||||
description="Interne Inhouse-Tools, Excel-Ablösungen und Prozess-Automatisierung."
|
||||
title="Automatisierung"
|
||||
description="Verbindung von Tools, automatische PDF-Erstellung, Daten-Synchronisation. Sparen Sie manuelle Arbeit."
|
||||
delay={0.3}
|
||||
/>
|
||||
</div>
|
||||
</Section>
|
||||
|
||||
{/* Final CTA - New Section */}
|
||||
<Section number="05" title="Kontakt" numberPosition="right" variant="gray" borderTop>
|
||||
<Reveal>
|
||||
<div className="text-center space-y-10">
|
||||
<h2 className="text-4xl md:text-8xl font-bold text-slate-900 tracking-tighter">
|
||||
Bereit für <br />
|
||||
<span className="text-slate-200">echten Fortschritt?</span>
|
||||
</h2>
|
||||
<div className="flex flex-col md:flex-row items-center justify-center gap-6 md:gap-8">
|
||||
<a
|
||||
href="mailto:hello@mintel.me"
|
||||
className="px-10 py-5 bg-slate-900 text-white rounded-full font-bold text-lg hover:bg-slate-800 transition-all duration-300 hover:scale-105 active:scale-95 shadow-xl shadow-slate-200"
|
||||
>
|
||||
Projekt anfragen
|
||||
</a>
|
||||
<div className="flex items-center gap-3 text-slate-400 font-serif italic text-lg">
|
||||
<MousePointer2 className="w-5 h-5 animate-bounce" />
|
||||
<span>Kein Zirkus, versprochen.</span>
|
||||
{/* Section 05: Contact */}
|
||||
<Section number="05" title="Kontakt" borderTop>
|
||||
<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>
|
||||
<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">
|
||||
<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="mailto:hello@mintel.me"
|
||||
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
|
||||
</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>
|
||||
</div>
|
||||
</Reveal>
|
||||
</Reveal>
|
||||
</div>
|
||||
</Section>
|
||||
</div>
|
||||
);
|
||||
|
||||
@@ -56,7 +56,7 @@ export default function WebsitesPage() {
|
||||
</Section>
|
||||
|
||||
{/* 2. Entwicklung - Designed Grid */}
|
||||
<Section number="02" title="Produktion" numberPosition="left">
|
||||
<Section number="02" title="Produktion">
|
||||
<div className="space-y-32">
|
||||
{/* Seite */}
|
||||
<Reveal>
|
||||
@@ -116,7 +116,7 @@ export default function WebsitesPage() {
|
||||
</Section>
|
||||
|
||||
{/* 5. Betrieb - Designed Box */}
|
||||
<Section number="03" title="Betrieb" numberPosition="right">
|
||||
<Section number="03" title="Betrieb">
|
||||
<Reveal width="100%">
|
||||
<div className="bg-white border border-slate-200 rounded-[3rem] p-16 md:p-24 space-y-16 relative overflow-hidden -mx-4 md:-mx-24 hover:border-slate-400 transition-all duration-500">
|
||||
<div className="absolute top-0 right-0 text-[20rem] font-bold text-slate-50 select-none translate-x-1/4 -translate-y-1/4 opacity-50">B</div>
|
||||
|
||||
116
src/components/Landing/AbstractLines.tsx
Normal file
116
src/components/Landing/AbstractLines.tsx
Normal file
@@ -0,0 +1,116 @@
|
||||
'use client';
|
||||
|
||||
import * as React from 'react';
|
||||
import { motion } from 'framer-motion';
|
||||
|
||||
interface LineProps {
|
||||
className?: string;
|
||||
delay?: number;
|
||||
}
|
||||
|
||||
export const HeroLines: React.FC<LineProps> = ({ className = "", delay = 0 }) => {
|
||||
return (
|
||||
<svg className={`absolute pointer-events-none ${className}`} viewBox="0 0 800 600" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<motion.path
|
||||
d="M-100 300 C 100 300, 200 100, 400 100 C 600 100, 700 500, 900 500"
|
||||
stroke="currentColor"
|
||||
strokeWidth="1"
|
||||
strokeLinecap="round"
|
||||
className="text-slate-200"
|
||||
initial={{ pathLength: 0, opacity: 0 }}
|
||||
animate={{ pathLength: 1, opacity: 1 }}
|
||||
transition={{ duration: 2, delay: delay, ease: "easeInOut" }}
|
||||
/>
|
||||
<motion.path
|
||||
d="M-100 350 C 100 350, 200 150, 400 150 C 600 150, 700 550, 900 550"
|
||||
stroke="currentColor"
|
||||
strokeWidth="1"
|
||||
strokeLinecap="round"
|
||||
className="text-slate-100"
|
||||
initial={{ pathLength: 0, opacity: 0 }}
|
||||
animate={{ pathLength: 1, opacity: 1 }}
|
||||
transition={{ duration: 2.5, delay: delay + 0.2, ease: "easeInOut" }}
|
||||
/>
|
||||
{/* Nodes */}
|
||||
<motion.circle cx="400" cy="100" r="4" className="fill-slate-200"
|
||||
initial={{ scale: 0 }} animate={{ scale: 1 }} transition={{ delay: delay + 1, duration: 0.5 }} />
|
||||
<motion.circle cx="400" cy="150" r="4" className="fill-slate-100"
|
||||
initial={{ scale: 0 }} animate={{ scale: 1 }} transition={{ delay: delay + 1.2, duration: 0.5 }} />
|
||||
</svg>
|
||||
);
|
||||
};
|
||||
|
||||
export const GridLines: React.FC<LineProps> = ({ className = "", delay = 0 }) => {
|
||||
return (
|
||||
<svg className={`absolute pointer-events-none ${className}`} viewBox="0 0 400 400" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<defs>
|
||||
<pattern id="grid" width="40" height="40" patternUnits="userSpaceOnUse">
|
||||
<path d="M 40 0 L 0 0 0 40" fill="none" stroke="currentColor" strokeWidth="0.5" className="text-slate-100" />
|
||||
</pattern>
|
||||
</defs>
|
||||
<rect width="100%" height="100%" fill="url(#grid)" />
|
||||
|
||||
{/* Highlighted Path */}
|
||||
<motion.path
|
||||
d="M 40 40 L 120 40 L 120 120 L 200 120"
|
||||
stroke="currentColor"
|
||||
strokeWidth="1.5"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
className="text-slate-300"
|
||||
initial={{ pathLength: 0 }}
|
||||
whileInView={{ pathLength: 1 }}
|
||||
viewport={{ once: true }}
|
||||
transition={{ duration: 1.5, delay: delay }}
|
||||
/>
|
||||
<motion.circle cx="200" cy="120" r="3" className="fill-slate-400"
|
||||
initial={{ scale: 0 }} whileInView={{ scale: 1 }} viewport={{ once: true }} transition={{ delay: delay + 1.5 }} />
|
||||
</svg>
|
||||
);
|
||||
};
|
||||
|
||||
export const FlowLines: React.FC<LineProps> = ({ className = "", delay = 0 }) => {
|
||||
return (
|
||||
<svg className={`absolute pointer-events-none ${className}`} viewBox="0 0 600 200" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<motion.path
|
||||
d="M 0 100 H 100 C 150 100, 150 50, 200 50 H 300"
|
||||
stroke="currentColor"
|
||||
strokeWidth="1"
|
||||
className="text-slate-200"
|
||||
initial={{ pathLength: 0 }}
|
||||
whileInView={{ pathLength: 1 }}
|
||||
viewport={{ once: true }}
|
||||
transition={{ duration: 1.5, delay: delay }}
|
||||
/>
|
||||
<motion.path
|
||||
d="M 0 100 H 100 C 150 100, 150 150, 200 150 H 300"
|
||||
stroke="currentColor"
|
||||
strokeWidth="1"
|
||||
className="text-slate-200"
|
||||
initial={{ pathLength: 0 }}
|
||||
whileInView={{ pathLength: 1 }}
|
||||
viewport={{ once: true }}
|
||||
transition={{ duration: 1.5, delay: delay + 0.2 }}
|
||||
/>
|
||||
|
||||
<motion.rect x="300" y="30" width="80" height="40" rx="8" className="stroke-slate-300 fill-white" strokeWidth="1"
|
||||
initial={{ opacity: 0, x: 280 }} whileInView={{ opacity: 1, x: 300 }} viewport={{ once: true }} transition={{ delay: delay + 1 }} />
|
||||
|
||||
<motion.rect x="300" y="130" width="80" height="40" rx="8" className="stroke-slate-300 fill-white" strokeWidth="1"
|
||||
initial={{ opacity: 0, x: 280 }} whileInView={{ opacity: 1, x: 300 }} viewport={{ once: true }} transition={{ delay: delay + 1.2 }} />
|
||||
</svg>
|
||||
);
|
||||
};
|
||||
|
||||
export const CirclePattern: React.FC<LineProps> = ({ className = "", delay = 0 }) => {
|
||||
return (
|
||||
<svg className={`absolute pointer-events-none ${className}`} viewBox="0 0 400 400" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<motion.circle cx="200" cy="200" r="100" stroke="currentColor" strokeWidth="1" className="text-slate-100"
|
||||
initial={{ scale: 0.8, opacity: 0 }} whileInView={{ scale: 1, opacity: 1 }} viewport={{ once: true }} transition={{ duration: 1, delay: delay }} />
|
||||
<motion.circle cx="200" cy="200" r="150" stroke="currentColor" strokeWidth="1" className="text-slate-50"
|
||||
initial={{ scale: 0.8, opacity: 0 }} whileInView={{ scale: 1, opacity: 1 }} viewport={{ once: true }} transition={{ duration: 1, delay: delay + 0.2 }} />
|
||||
<motion.circle cx="200" cy="200" r="50" stroke="currentColor" strokeWidth="1" className="text-slate-200"
|
||||
initial={{ scale: 0.8, opacity: 0 }} whileInView={{ scale: 1, opacity: 1 }} viewport={{ once: true }} transition={{ duration: 1, delay: delay + 0.4 }} />
|
||||
</svg>
|
||||
)
|
||||
}
|
||||
@@ -13,7 +13,12 @@ export const FeatureCard: React.FC<FeatureCardProps> = ({ icon: Icon, title, des
|
||||
return (
|
||||
<Reveal delay={delay}>
|
||||
<div className="p-8 md:p-10 border border-slate-100 rounded-2xl hover:border-slate-200 transition-all duration-500 group bg-white hover:shadow-xl hover:shadow-slate-100/50 relative overflow-hidden">
|
||||
<div className="absolute top-0 right-0 w-24 h-24 bg-slate-50 rounded-full -mr-12 -mt-12 group-hover:bg-slate-100 transition-colors duration-500"></div>
|
||||
{/* Animated Top Line */}
|
||||
<div className="absolute top-0 left-0 w-full h-1 bg-slate-900 scale-x-0 group-hover:scale-x-100 transition-transform duration-500 origin-left z-20"></div>
|
||||
|
||||
{/* Decorative Ring */}
|
||||
<div className="absolute top-0 right-0 w-32 h-32 border border-slate-100 rounded-full -mr-16 -mt-16 group-hover:scale-150 transition-transform duration-700"></div>
|
||||
|
||||
<Icon className="w-8 h-8 mb-6 text-slate-300 group-hover:text-slate-900 group-hover:scale-110 group-hover:rotate-3 transition-all duration-500 relative z-10" />
|
||||
<h3 className="text-xl md:text-2xl font-bold text-slate-900 mb-3 tracking-tight relative z-10">
|
||||
{title}
|
||||
|
||||
@@ -12,6 +12,9 @@ export const HeroItem: React.FC<HeroItemProps> = ({ number, title, description,
|
||||
return (
|
||||
<Reveal delay={delay}>
|
||||
<div className="group flex gap-6 md:gap-8 p-6 md:p-8 border border-transparent hover:border-slate-100 rounded-2xl transition-all duration-500 hover:bg-slate-50/50 relative overflow-hidden">
|
||||
{/* Animated Bottom Line */}
|
||||
<div className="absolute bottom-0 left-8 right-8 h-px bg-slate-200 scale-x-0 group-hover:scale-x-100 transition-transform duration-700 origin-left"></div>
|
||||
|
||||
<div className="absolute inset-0 bg-gradient-to-r from-slate-50/50 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-500"></div>
|
||||
<span className="text-xs font-bold uppercase tracking-[0.2em] text-slate-300 group-hover:text-slate-900 transition-colors pt-1.5 relative z-10">
|
||||
{number}
|
||||
|
||||
@@ -20,6 +20,10 @@ export const ServiceCard: React.FC<ServiceCardProps> = ({
|
||||
return (
|
||||
<Reveal delay={delay}>
|
||||
<div className="group relative p-10 md:p-12 border border-slate-100 rounded-3xl hover:border-slate-900 transition-all duration-700 bg-white hover:shadow-2xl hover:shadow-slate-100/50 overflow-hidden">
|
||||
{/* Decorative Corner */}
|
||||
<div className="absolute top-0 right-0 w-32 h-32 border-t border-r border-slate-100 rounded-tr-3xl opacity-0 group-hover:opacity-100 transition-opacity duration-700"></div>
|
||||
<div className="absolute top-8 right-8 w-2 h-2 bg-slate-900 rounded-full opacity-0 group-hover:opacity-100 transition-opacity duration-700 delay-100"></div>
|
||||
|
||||
{/* Decorative background text */}
|
||||
<div className="absolute -right-4 -bottom-4 text-8xl md:text-9xl font-bold text-slate-50 select-none group-hover:text-slate-100 transition-colors duration-700 -z-10">
|
||||
{title.charAt(0)}
|
||||
|
||||
@@ -2,3 +2,4 @@ export * from './HeroItem';
|
||||
export * from './FeatureCard';
|
||||
export * from './ComparisonRow';
|
||||
export * from './ServiceCard';
|
||||
export * from './AbstractLines';
|
||||
|
||||
@@ -6,7 +6,6 @@ interface SectionProps {
|
||||
title?: string;
|
||||
children: React.ReactNode;
|
||||
className?: string;
|
||||
numberPosition?: 'left' | 'right';
|
||||
delay?: number;
|
||||
variant?: 'white' | 'gray';
|
||||
borderTop?: boolean;
|
||||
@@ -17,32 +16,44 @@ export const Section: React.FC<SectionProps> = ({
|
||||
title,
|
||||
children,
|
||||
className = "",
|
||||
numberPosition = 'left',
|
||||
delay = 0,
|
||||
variant = 'white',
|
||||
borderTop = false,
|
||||
}) => {
|
||||
const bgClass = variant === 'gray' ? 'bg-slate-50/50' : 'bg-white';
|
||||
const bgClass = variant === 'gray' ? 'bg-slate-50' : 'bg-white';
|
||||
const borderClass = borderTop ? 'border-t border-slate-100' : '';
|
||||
|
||||
return (
|
||||
<section className={`relative py-24 md:py-32 ${bgClass} ${borderClass} ${className}`}>
|
||||
<div className="narrow-container relative">
|
||||
{number && (
|
||||
<div className={`absolute ${numberPosition === 'left' ? '-left-24' : '-right-24'} -top-24 text-[15rem] md:text-[20rem] font-bold text-slate-100/50 select-none -z-10 pointer-events-none`}>
|
||||
{number}
|
||||
</div>
|
||||
)}
|
||||
{title && (
|
||||
<Reveal delay={delay}>
|
||||
<div className="flex items-center gap-4 mb-12 md:mb-16">
|
||||
<div className="h-px w-8 bg-slate-200"></div>
|
||||
<h2 className="text-[10px] font-bold uppercase tracking-[0.4em] text-slate-400">{title}</h2>
|
||||
<div className="narrow-container">
|
||||
<div className="grid grid-cols-1 md:grid-cols-12 gap-12 md:gap-16">
|
||||
{/* Sidebar: Number & Title */}
|
||||
<div className="md:col-span-3 relative">
|
||||
<div className="md:sticky md:top-32 space-y-6">
|
||||
{number && (
|
||||
<Reveal delay={delay}>
|
||||
<span className="block text-6xl md:text-8xl font-bold text-slate-100 leading-none select-none">
|
||||
{number}
|
||||
</span>
|
||||
</Reveal>
|
||||
)}
|
||||
{title && (
|
||||
<Reveal delay={delay + 0.1}>
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="h-px w-6 bg-slate-900"></div>
|
||||
<h2 className="text-xs font-bold uppercase tracking-[0.3em] text-slate-900">
|
||||
{title}
|
||||
</h2>
|
||||
</div>
|
||||
</Reveal>
|
||||
)}
|
||||
</div>
|
||||
</Reveal>
|
||||
)}
|
||||
<div className="relative z-10">
|
||||
{children}
|
||||
</div>
|
||||
|
||||
{/* Main Content */}
|
||||
<div className="md:col-span-9">
|
||||
{children}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
Reference in New Issue
Block a user