302 lines
16 KiB
TypeScript
302 lines
16 KiB
TypeScript
import React from 'react';
|
||
import Link from 'next/link';
|
||
import { Check, ArrowRight, MessageSquare } 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.
|
||
</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.
|
||
</p>
|
||
</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.
|
||
</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
|
||
</Link>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
</div>
|
||
);
|
||
}
|