design
This commit is contained in:
445
app/page.tsx
445
app/page.tsx
@@ -1,299 +1,190 @@
|
||||
import React from 'react';
|
||||
import Link from 'next/link';
|
||||
import { Check, ArrowRight, MessageSquare } from 'lucide-react';
|
||||
import { ArrowRight, MessageSquare, Minus, Zap, Shield, Clock } from 'lucide-react';
|
||||
|
||||
export default function LandingPage() {
|
||||
return (
|
||||
<div className="flex flex-col gap-32 py-20 md:py-32">
|
||||
{/* Hero Section */}
|
||||
<section className="narrow-container animate-fade-in">
|
||||
<h1 className="text-4xl md:text-6xl font-bold text-slate-900 tracking-tight mb-10 leading-[1.1]">
|
||||
Digitale Systeme für Unternehmen, die keinen Overhead wollen
|
||||
</h1>
|
||||
<div className="space-y-4 text-xl md:text-2xl text-slate-500 font-serif italic leading-relaxed">
|
||||
<p>Agenturen sind zu langsam.</p>
|
||||
<p>CMS will keiner pflegen.</p>
|
||||
<p>Digitale Themen bleiben liegen.</p>
|
||||
</div>
|
||||
<p className="mt-12 text-2xl font-semibold text-slate-900">
|
||||
Ich mache das anders.
|
||||
</p>
|
||||
</section>
|
||||
|
||||
{/* Was ich mache */}
|
||||
<section className="narrow-container">
|
||||
<div className="grid grid-cols-1 md:grid-cols-12 gap-8">
|
||||
<div className="md:col-span-4">
|
||||
<h2 className="text-sm font-bold uppercase tracking-widest text-slate-400 mt-0">Was ich mache</h2>
|
||||
</div>
|
||||
<div className="md:col-span-8">
|
||||
<div className="prose prose-slate font-serif text-xl leading-relaxed text-slate-700">
|
||||
<p>
|
||||
Ich setze digitale Systeme für Unternehmen um – direkt, sauber und ohne Agentur-Zirkus.
|
||||
</p>
|
||||
<p className="font-sans font-bold text-slate-900 mt-8 text-2xl">
|
||||
Websites, Funktionen, Systeme, interne Tools.
|
||||
</p>
|
||||
<p className="mt-4">
|
||||
Keine Workshops. Keine Tickets. Kein Tech-Blabla.
|
||||
</p>
|
||||
<p className="mt-10 text-slate-900">
|
||||
Sie erklären mir, was Sie brauchen. <br />
|
||||
Ich sorge dafür, dass es funktioniert.
|
||||
<div className="flex flex-col gap-48 py-24 md:py-48 overflow-hidden">
|
||||
{/* Hero Section - High Impact */}
|
||||
<section className="narrow-container relative">
|
||||
<div className="absolute -left-24 -top-24 text-[20rem] font-bold text-slate-50 select-none -z-10">00</div>
|
||||
<div className="space-y-16 relative">
|
||||
<h1 className="text-6xl md:text-8xl font-bold text-slate-900 tracking-tighter leading-[0.9] animate-fade-in">
|
||||
Digitale Systeme <br />
|
||||
<span className="text-slate-200">ohne Overhead.</span>
|
||||
</h1>
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-12 items-end">
|
||||
<div className="space-y-6 text-2xl text-slate-400 font-serif italic leading-tight">
|
||||
<p className="animate-slide-up [animation-delay:200ms]">Agenturen sind zu langsam.</p>
|
||||
<p className="animate-slide-up [animation-delay:400ms]">CMS will keiner pflegen.</p>
|
||||
<p className="animate-slide-up [animation-delay:600ms]">Digitale Themen bleiben liegen.</p>
|
||||
</div>
|
||||
<div className="animate-slide-up [animation-delay:800ms] border-l-2 border-slate-900 pl-8">
|
||||
<p className="text-3xl font-bold text-slate-900 leading-tight">
|
||||
Ich mache das anders.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Für wen das ist */}
|
||||
<section className="narrow-container">
|
||||
<div className="grid grid-cols-1 md:grid-cols-12 gap-8">
|
||||
<div className="md:col-span-4">
|
||||
<h2 className="text-sm font-bold uppercase tracking-widest text-slate-400 mt-0">Für wen das ist</h2>
|
||||
</div>
|
||||
<div className="md:col-span-8">
|
||||
<p className="text-xl text-slate-900 font-bold mb-8">Für Unternehmen, die:</p>
|
||||
<ul className="space-y-4 mb-12">
|
||||
{[
|
||||
'regelmäßig Änderungen an Website oder Systemen brauchen',
|
||||
'keine Lust auf Agenturen haben',
|
||||
'kein CMS anfassen wollen',
|
||||
'keine Tickets schreiben möchten',
|
||||
'keinen Entwickler einstellen wollen',
|
||||
'und wollen, dass Dinge einfach erledigt werden',
|
||||
].map((item, i) => (
|
||||
<li key={i} className="flex items-start gap-4">
|
||||
<Check className="w-5 h-5 text-slate-900 shrink-0 mt-1" />
|
||||
<span className="text-lg text-slate-600 font-serif">{item}</span>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
<div className="p-8 bg-slate-50 rounded-sm border-l-4 border-slate-900">
|
||||
<p className="text-xl font-serif italic text-slate-700 leading-relaxed">
|
||||
Wenn bei Ihnen öfter der Satz fällt: <br />
|
||||
<span className="font-bold not-italic text-slate-900">„Das müsste man mal machen …“</span>
|
||||
</p>
|
||||
<p className="mt-4 text-slate-500">
|
||||
… aber es passiert nie – dann sind Sie hier richtig.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Das eigentliche Problem */}
|
||||
<section className="narrow-container">
|
||||
<div className="grid grid-cols-1 md:grid-cols-12 gap-8">
|
||||
<div className="md:col-span-4">
|
||||
<h2 className="text-sm font-bold uppercase tracking-widest text-slate-400 mt-0">Das Problem</h2>
|
||||
</div>
|
||||
<div className="md:col-span-8">
|
||||
<div className="prose prose-slate font-serif text-xl leading-relaxed text-slate-700">
|
||||
<p>
|
||||
Digitale Arbeit scheitert nicht an Technik. <br />
|
||||
Sie scheitert an <span className="text-slate-900 font-bold underline decoration-slate-200 underline-offset-4">Zuständigkeit</span>.
|
||||
</p>
|
||||
<div className="space-y-4 mt-10 font-sans text-base not-italic text-slate-500">
|
||||
<p className="pb-4 border-b border-slate-100">Agenturen wollen Projekte.</p>
|
||||
<p className="pb-4 border-b border-slate-100">Mitarbeiter haben Wichtigeres zu tun.</p>
|
||||
<p className="pb-4 border-b border-slate-100">IT ist ausgelastet.</p>
|
||||
<p>Kleine Aufgaben sind zu klein für große Angebote.</p>
|
||||
</div>
|
||||
<p className="mt-10 font-bold text-slate-900 text-2xl">Also bleibt alles liegen.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Warum keine Agentur */}
|
||||
<section className="narrow-container">
|
||||
<div className="grid grid-cols-1 md:grid-cols-12 gap-8">
|
||||
<div className="md:col-span-4">
|
||||
<h2 className="text-sm font-bold uppercase tracking-widest text-slate-400 mt-0">Warum keine Agentur</h2>
|
||||
</div>
|
||||
<div className="md:col-span-8">
|
||||
<p className="text-xl font-serif text-slate-600 mb-16 leading-relaxed">
|
||||
Ich habe über 15 Jahre in Agenturen gearbeitet. Ich kenne das Spiel. Und ich weiß, warum es nervt.
|
||||
</p>
|
||||
|
||||
<div className="space-y-20">
|
||||
<div className="group">
|
||||
<h3 className="text-2xl font-bold text-slate-900 mb-6">Agenturen machen einfache Dinge kompliziert</h3>
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-12 items-start">
|
||||
<div className="space-y-2 text-slate-400 text-sm font-mono">
|
||||
<p>Ein Button ändern?</p>
|
||||
<p>→ Konzeptcall</p>
|
||||
<p>→ Abstimmung</p>
|
||||
<p>→ internes Meeting</p>
|
||||
<p>→ Angebot</p>
|
||||
<p>→ Warten</p>
|
||||
<p>→ Rechnung</p>
|
||||
</div>
|
||||
<div className="pt-4 border-t-2 border-slate-900">
|
||||
<p className="font-bold text-slate-900 mb-2 uppercase tracking-wider text-xs">Mein Ansatz</p>
|
||||
<p className="text-2xl font-bold text-slate-900">Ich mache es einfach fertig.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-x-12 gap-y-16">
|
||||
<div>
|
||||
<h4 className="font-bold text-slate-900 mb-3 text-lg">Prozesse statt Ergebnisse</h4>
|
||||
<p className="text-slate-500 font-serif leading-relaxed">
|
||||
Workshops, Slides, Roadmaps. Klingt nach Fortschritt, ist oft nur Beschäftigungstherapie. Bei mir zählt nur Umsetzung.
|
||||
</p>
|
||||
</div>
|
||||
<div>
|
||||
<h4 className="font-bold text-slate-900 mb-3 text-lg">Stundenabrechnung</h4>
|
||||
<p className="text-slate-500 font-serif leading-relaxed">
|
||||
„Das dauert nur kurz“ → Überraschung auf der Rechnung. Ich arbeite mit Fixpreisen. Sie wissen vorher, was es kostet.
|
||||
</p>
|
||||
</div>
|
||||
<div>
|
||||
<h4 className="font-bold text-slate-900 mb-3 text-lg">Aufgaben-Ping-Pong</h4>
|
||||
<p className="text-slate-500 font-serif leading-relaxed">
|
||||
Heute Projektmanager, morgen Entwickler, übermorgen niemand. Bei mir: Eine Person. Eine Verantwortung.
|
||||
</p>
|
||||
</div>
|
||||
<div>
|
||||
<h4 className="font-bold text-slate-900 mb-3 text-lg">Verschwinden nach dem Projekt</h4>
|
||||
<p className="text-slate-500 font-serif leading-relaxed">
|
||||
Kleine Änderung? Neues Angebot. Dringend? Warteschleife. Ich bleibe, solange Sie Dinge brauchen.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Wie ich arbeite */}
|
||||
<section className="narrow-container">
|
||||
<div className="grid grid-cols-1 md:grid-cols-12 gap-8">
|
||||
<div className="md:col-span-4">
|
||||
<h2 className="text-sm font-bold uppercase tracking-widest text-slate-400 mt-0">Arbeitsweise</h2>
|
||||
</div>
|
||||
<div className="md:col-span-8">
|
||||
<p className="text-2xl font-bold text-slate-900 mb-8">
|
||||
Ich baue zuerst. Dann reden wir drüber.
|
||||
</p>
|
||||
<div className="prose prose-slate font-serif text-xl leading-relaxed text-slate-700">
|
||||
<p>
|
||||
Sie erklären mir Ihre Vorstellung. Ich setze den ersten echten Stand um.
|
||||
</p>
|
||||
<div className="flex flex-wrap gap-x-8 gap-y-2 my-10 not-prose border-y border-slate-100 py-6">
|
||||
<span className="text-sm font-bold text-slate-400 uppercase tracking-widest">Keine Slides</span>
|
||||
<span className="text-sm font-bold text-slate-400 uppercase tracking-widest">Kein Konzept-PDF</span>
|
||||
<span className="text-sm font-bold text-slate-400 uppercase tracking-widest">Kein Ratespiel</span>
|
||||
</div>
|
||||
<p>
|
||||
Dann arbeiten wir direkt am Ergebnis, bis es passt. Ohne jedes Mal ein neues Angebot. Ohne Scope-Diskussionen. Ohne Theater.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Was ich konkret umsetze */}
|
||||
<section className="narrow-container">
|
||||
<div className="grid grid-cols-1 md:grid-cols-12 gap-8">
|
||||
<div className="md:col-span-4">
|
||||
<h2 className="text-sm font-bold uppercase tracking-widest text-slate-400 mt-0">Leistungen</h2>
|
||||
</div>
|
||||
<div className="md:col-span-8">
|
||||
<div className="space-y-20">
|
||||
<div>
|
||||
<h3 className="text-2xl font-bold text-slate-900 mb-6">Websites</h3>
|
||||
<ul className="space-y-3 text-slate-600 font-serif text-lg">
|
||||
<li className="flex items-center gap-3"><Check className="w-4 h-4 text-slate-300" /> neue Websites (klarer Standard)</li>
|
||||
<li className="flex items-center gap-3"><Check className="w-4 h-4 text-slate-300" /> bestehende Websites übernehmen</li>
|
||||
<li className="flex items-center gap-3"><Check className="w-4 h-4 text-slate-300" /> Seiten ändern oder ergänzen</li>
|
||||
<li className="flex items-center gap-3"><Check className="w-4 h-4 text-slate-300" /> Performance & SEO</li>
|
||||
<li className="flex items-center gap-3"><Check className="w-4 h-4 text-slate-300" /> Hosting & Betrieb (inklusive)</li>
|
||||
</ul>
|
||||
<div className="mt-8">
|
||||
<Link href="/websites" className="inline-flex items-center gap-2 text-slate-900 font-bold border-b-2 border-slate-900 pb-1 hover:text-slate-600 hover:border-slate-300 transition-all">
|
||||
Details zu Websites & Preisen <ArrowRight className="w-4 h-4" />
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h3 className="text-2xl font-bold text-slate-900 mb-6">Funktionen & Systeme</h3>
|
||||
<ul className="grid grid-cols-1 md:grid-cols-2 gap-x-8 gap-y-3 text-slate-600 font-serif text-lg">
|
||||
<li className="flex items-center gap-3"><Check className="w-4 h-4 text-slate-300" /> Produktbereiche</li>
|
||||
<li className="flex items-center gap-3"><Check className="w-4 h-4 text-slate-300" /> Blogs, News, Jobs</li>
|
||||
<li className="flex items-center gap-3"><Check className="w-4 h-4 text-slate-300" /> Formulare</li>
|
||||
<li className="flex items-center gap-3"><Check className="w-4 h-4 text-slate-300" /> Suche & Filter</li>
|
||||
<li className="flex items-center gap-3"><Check className="w-4 h-4 text-slate-300" /> PDF-Generatoren</li>
|
||||
<li className="flex items-center gap-3"><Check className="w-4 h-4 text-slate-300" /> API-Ausgaben & Daten-Sync</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h3 className="text-2xl font-bold text-slate-900 mb-6">Interne Tools</h3>
|
||||
<ul className="space-y-3 text-slate-600 font-serif text-lg">
|
||||
<li className="flex items-center gap-3"><Check className="w-4 h-4 text-slate-300" /> kleine Inhouse-Tools</li>
|
||||
<li className="flex items-center gap-3"><Check className="w-4 h-4 text-slate-300" /> Excel ersetzen</li>
|
||||
<li className="flex items-center gap-3"><Check className="w-4 h-4 text-slate-300" /> Automatisierung</li>
|
||||
<li className="flex items-center gap-3"><Check className="w-4 h-4 text-slate-300" /> Importe & Exporte</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Warum Kunden bleiben */}
|
||||
<section className="narrow-container">
|
||||
<div className="grid grid-cols-1 md:grid-cols-12 gap-8">
|
||||
<div className="md:col-span-4">
|
||||
<h2 className="text-sm font-bold uppercase tracking-widest text-slate-400 mt-0">Vorteile</h2>
|
||||
</div>
|
||||
<div className="md:col-span-8">
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-x-12 gap-y-10">
|
||||
{[
|
||||
{ label: 'Schnelligkeit', desc: 'Dinge passieren schnell' },
|
||||
{ label: 'Erledigt', desc: 'Aufgaben verschwinden wirklich' },
|
||||
{ label: 'Kein Erklären', desc: 'Ich verstehe, was Sie brauchen' },
|
||||
{ label: 'Kein Nachfassen', desc: 'Ich melde mich, wenn es fertig ist' },
|
||||
{ label: 'Kein Stress', desc: 'Kein Projektstress' },
|
||||
{ label: 'Ruhe', desc: 'Kein Agentur-Zirkus' },
|
||||
].map((item, i) => (
|
||||
<div key={i} className="border-l border-slate-100 pl-6">
|
||||
<div className="font-bold text-slate-900 mb-1 text-lg">{item.label}</div>
|
||||
<div className="text-slate-500 font-serif">{item.desc}</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
<p className="mt-20 text-4xl font-serif italic text-slate-900">
|
||||
Kurz: Ruhe.
|
||||
{/* Was ich mache - Designed Grid */}
|
||||
<section className="narrow-container relative">
|
||||
<div className="absolute -right-24 -top-12 text-[15rem] font-bold text-slate-50 select-none -z-10">01</div>
|
||||
<div className="grid grid-cols-1 md:grid-cols-12 gap-12">
|
||||
<div className="md:col-span-5 space-y-8">
|
||||
<h2 className="text-sm font-bold uppercase tracking-[0.3em] text-slate-400">Das Versprechen</h2>
|
||||
<p className="text-4xl font-bold text-slate-900 leading-[1.1]">
|
||||
Direkt. <br />
|
||||
Sauber. <br />
|
||||
Ohne Zirkus.
|
||||
</p>
|
||||
</div>
|
||||
<div className="md:col-span-7">
|
||||
<div className="prose prose-slate font-serif text-2xl leading-relaxed text-slate-700">
|
||||
<p>
|
||||
Ich setze digitale Systeme für Unternehmen um – ohne Workshops, ohne Tickets, ohne Tech-Blabla.
|
||||
</p>
|
||||
<div className="mt-12 grid grid-cols-1 gap-8 not-prose">
|
||||
<div className="p-8 border border-slate-100 hover:border-slate-900 transition-colors group">
|
||||
<Zap className="w-6 h-6 mb-4 text-slate-300 group-hover:text-slate-900 transition-colors" />
|
||||
<h3 className="text-xl font-bold text-slate-900 mb-2">Websites & Tools</h3>
|
||||
<p className="text-slate-500 font-serif text-lg">Alles, was Ihr Unternehmen digital voranbringt.</p>
|
||||
</div>
|
||||
<div className="p-8 border border-slate-100 hover:border-slate-900 transition-colors group">
|
||||
<Shield className="w-6 h-6 mb-4 text-slate-300 group-hover:text-slate-900 transition-colors" />
|
||||
<h3 className="text-xl font-bold text-slate-900 mb-2">Kein Overhead</h3>
|
||||
<p className="text-slate-500 font-serif text-lg">Sie erklären, ich baue. Es funktioniert einfach.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* CTA */}
|
||||
<section className="narrow-container">
|
||||
<div className="bg-slate-900 text-white p-12 md:p-20 rounded-sm text-center">
|
||||
<h2 className="text-3xl md:text-5xl font-bold mb-8 tracking-tight">Interesse?</h2>
|
||||
<p className="text-xl md:text-2xl mb-12 text-slate-400 font-serif leading-relaxed">
|
||||
Schreiben Sie mir einfach, was Sie brauchen. <br />
|
||||
Ich sage Ihnen ehrlich, ob ich es mache – und was es kostet.
|
||||
{/* Comparison - Visual Path */}
|
||||
<section className="narrow-container relative">
|
||||
<div className="absolute -left-24 -top-12 text-[15rem] font-bold text-slate-50 select-none -z-10">02</div>
|
||||
<h2 className="text-sm font-bold uppercase tracking-[0.3em] text-slate-400 mb-24">Der Unterschied</h2>
|
||||
|
||||
<div className="space-y-32">
|
||||
{/* Row 1 */}
|
||||
<div className="flex flex-col md:flex-row gap-12 items-center">
|
||||
<div className="flex-1 p-10 bg-slate-50 text-slate-400 line-through decoration-slate-200">
|
||||
<div className="text-xs font-bold uppercase tracking-widest mb-4">Agentur</div>
|
||||
<p className="text-xl font-serif italic">Konzeptcalls, Meetings, Slides, Warten auf das Angebot.</p>
|
||||
</div>
|
||||
<div className="shrink-0">
|
||||
<ArrowRight className="w-8 h-8 text-slate-200 hidden md:block" />
|
||||
</div>
|
||||
<div className="flex-1 p-10 border-2 border-slate-900">
|
||||
<div className="text-xs font-bold uppercase tracking-widest text-slate-900 mb-4">Ich</div>
|
||||
<p className="text-3xl font-bold text-slate-900 leading-tight">Ich baue zuerst. <br />Dann reden wir.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Row 2 */}
|
||||
<div className="flex flex-col md:flex-row-reverse gap-12 items-center">
|
||||
<div className="flex-1 p-10 bg-slate-50 text-slate-400 line-through decoration-slate-200">
|
||||
<div className="text-xs font-bold uppercase tracking-widest mb-4">Agentur</div>
|
||||
<p className="text-xl font-serif italic">"Das dauert nur kurz" <br />→ Überraschung auf der Rechnung.</p>
|
||||
</div>
|
||||
<div className="shrink-0">
|
||||
<ArrowRight className="w-8 h-8 text-slate-200 hidden md:block rotate-180" />
|
||||
</div>
|
||||
<div className="flex-1 p-10 border-2 border-slate-900">
|
||||
<div className="text-xs font-bold uppercase tracking-widest text-slate-900 mb-4">Ich</div>
|
||||
<p className="text-3xl font-bold text-slate-900 leading-tight">Fixpreise. <br />Immer.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Für wen - Designed Box */}
|
||||
<section className="narrow-container relative">
|
||||
<div className="absolute -right-24 -top-12 text-[15rem] font-bold text-slate-50 select-none -z-10">03</div>
|
||||
<div className="relative p-12 md:p-24 border border-slate-100">
|
||||
<div className="absolute top-0 left-12 w-px h-24 bg-slate-900 -translate-y-12"></div>
|
||||
<h2 className="text-sm font-bold uppercase tracking-[0.3em] text-slate-400 mb-12">Zielgruppe</h2>
|
||||
<p className="text-4xl md:text-5xl font-bold text-slate-900 leading-tight mb-16 tracking-tighter">
|
||||
Für Unternehmen, die <br />
|
||||
<span className="text-slate-300 underline decoration-slate-100 underline-offset-8">Ergebnisse</span> wollen.
|
||||
</p>
|
||||
<a
|
||||
href="mailto:marc@mintel.me"
|
||||
className="inline-flex items-center gap-3 bg-white text-slate-900 px-10 py-5 rounded-sm font-bold text-lg hover:bg-slate-100 transition-colors"
|
||||
>
|
||||
<MessageSquare className="w-5 h-5" />
|
||||
Projekt anfragen
|
||||
</a>
|
||||
<div className="mt-12">
|
||||
<Link href="/blog" className="text-slate-500 hover:text-white text-sm font-mono uppercase tracking-widest transition-colors">
|
||||
Zum Blog
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-x-16 gap-y-8">
|
||||
{[
|
||||
'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-xl font-serif text-slate-600">
|
||||
<div className="w-2 h-2 bg-slate-900 rounded-full"></div>
|
||||
<span>{item}</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Leistungen - Visual Cards */}
|
||||
<section className="narrow-container relative">
|
||||
<div className="absolute -left-24 -top-12 text-[15rem] font-bold text-slate-50 select-none -z-10">04</div>
|
||||
<h2 className="text-sm font-bold uppercase tracking-[0.3em] text-slate-400 mb-24">Leistungen</h2>
|
||||
<div className="grid grid-cols-1 gap-32">
|
||||
<div className="group relative">
|
||||
<div className="absolute -left-12 top-0 text-6xl font-bold text-slate-50 group-hover:text-slate-100 transition-colors">W</div>
|
||||
<h3 className="text-5xl font-bold text-slate-900 mb-8 tracking-tighter">Websites</h3>
|
||||
<p className="text-2xl text-slate-500 font-serif mb-10 leading-relaxed max-w-2xl">
|
||||
Neue Seiten, Relaunch oder Übernahme bestehender Systeme. Inklusive Hosting, SEO und Performance.
|
||||
</p>
|
||||
<Link href="/websites" className="inline-flex items-center gap-4 text-slate-900 font-bold text-xl group/link">
|
||||
Preise ansehen
|
||||
<div className="w-12 h-px bg-slate-900 group-hover/link:w-20 transition-all"></div>
|
||||
</Link>
|
||||
</div>
|
||||
|
||||
<div className="group relative">
|
||||
<div className="absolute -left-12 top-0 text-6xl font-bold text-slate-50 group-hover:text-slate-100 transition-colors">S</div>
|
||||
<h3 className="text-5xl font-bold text-slate-900 mb-8 tracking-tighter">Systeme</h3>
|
||||
<p className="text-2xl text-slate-500 font-serif mb-10 leading-relaxed max-w-2xl">
|
||||
Produktbereiche, Blogs, Jobs, API-Anbindungen, PDF-Generatoren und Sonderlogik.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="group relative">
|
||||
<div className="absolute -left-12 top-0 text-6xl font-bold text-slate-50 group-hover:text-slate-100 transition-colors">T</div>
|
||||
<h3 className="text-5xl font-bold text-slate-900 mb-8 tracking-tighter">Tools</h3>
|
||||
<p className="text-2xl text-slate-500 font-serif mb-10 leading-relaxed max-w-2xl">
|
||||
Interne Inhouse-Tools, Excel-Ablösungen und Prozess-Automatisierung.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* CTA - Designed Impact */}
|
||||
<section className="narrow-container">
|
||||
<div className="relative py-32 px-12 md:px-24 bg-slate-900 text-white overflow-hidden">
|
||||
<div className="absolute top-0 right-0 text-[20rem] font-bold text-white/5 select-none translate-x-1/4 -translate-y-1/4">?</div>
|
||||
<div className="relative z-10 space-y-12">
|
||||
<h2 className="text-6xl md:text-8xl font-bold tracking-tighter leading-none">Interesse?</h2>
|
||||
<p className="text-2xl md:text-3xl text-slate-400 font-serif italic leading-tight max-w-xl">
|
||||
Schreiben Sie mir einfach, was Sie brauchen. Ich sage Ihnen ehrlich, ob ich es mache.
|
||||
</p>
|
||||
<div className="pt-8">
|
||||
<a
|
||||
href="mailto:marc@mintel.me"
|
||||
className="inline-flex items-center gap-6 bg-white text-slate-900 px-12 py-6 font-bold text-2xl hover:bg-slate-100 transition-all hover:scale-[1.05]"
|
||||
>
|
||||
<MessageSquare className="w-8 h-8" />
|
||||
Projekt anfragen
|
||||
</a>
|
||||
</div>
|
||||
<div className="pt-12">
|
||||
<Link href="/blog" className="text-slate-500 hover:text-white text-sm font-bold uppercase tracking-[0.5em] transition-colors">
|
||||
Zum Blog
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user