Athena
7e00be4acb
- Video-Placeholder nach dem Hero (play button, Silhouette) - "Nach 8 Wochen" → 2×4 Icon-Kacheln (Icon + Titel + Text) - "Deine Begleitung" → "Meet your Coach" mit großem Foto-Placeholder + Bio rechts - Alle Modul-Sektionen → Thumbnail-Cards mit Bild-Bereich + Week-Badge - MC Farben (#3B82F6 / #8B5CF6) überall: Badges, Icons, Borders, Gradients - Vorher/Nachher → Side-by-side Grid statt Tabelle - Bonus-Kacheln überarbeitet Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
645 lines
41 KiB
TypeScript
645 lines
41 KiB
TypeScript
/* ─────────────────────────────────────────────────────
|
||
GSO Gruppencoaching — Verkaufsseite
|
||
Brunson Online Masterclass Funnel Template
|
||
CI: Market Compass · Blau #3B82F6 · Lila #8B5CF6
|
||
───────────────────────────────────────────────────── */
|
||
|
||
const CTA_HREF = "#platz-sichern";
|
||
|
||
/* ── Shared atoms ── */
|
||
|
||
function Btn({ href = CTA_HREF, children, xl = false }: { href?: string; children: React.ReactNode; xl?: boolean }) {
|
||
return (
|
||
<a
|
||
href={href}
|
||
className={`inline-block font-extrabold rounded-lg bg-gradient-to-r from-blue-500 to-purple-600 hover:from-blue-400 hover:to-purple-500 text-white transition-all shadow-xl uppercase tracking-wide ${xl ? "text-xl md:text-2xl px-12 py-5" : "text-sm px-7 py-3"}`}
|
||
>
|
||
{children}
|
||
</a>
|
||
);
|
||
}
|
||
|
||
function Badge({ children }: { children: React.ReactNode }) {
|
||
return (
|
||
<span className="inline-block text-xs font-bold uppercase tracking-widest bg-blue-600 text-white rounded px-3 py-1 mb-3">
|
||
{children}
|
||
</span>
|
||
);
|
||
}
|
||
|
||
/* ── Icon tile (used in "Why you'll love" and "Nach 8 Wochen") ── */
|
||
function IconTile({ icon, title, text }: { icon: string; title: string; text?: string }) {
|
||
return (
|
||
<div className="flex flex-col items-center text-center gap-3 p-6 rounded-xl bg-slate-800 border border-slate-700">
|
||
<div className="w-14 h-14 rounded-full bg-gradient-to-br from-blue-500 to-purple-600 flex items-center justify-center text-2xl flex-shrink-0">
|
||
{icon}
|
||
</div>
|
||
<p className="font-bold text-white text-sm leading-snug">{title}</p>
|
||
{text && <p className="text-slate-400 text-xs leading-relaxed">{text}</p>}
|
||
</div>
|
||
);
|
||
}
|
||
|
||
/* ── Module thumbnail card ── */
|
||
function ModuleCard({
|
||
week, expert, title, body, vorlagen, result,
|
||
}: {
|
||
week: string; expert?: string; title: string; body: string; vorlagen: string; result: string;
|
||
}) {
|
||
return (
|
||
<div className="rounded-xl overflow-hidden border border-slate-700 bg-slate-800 flex flex-col">
|
||
{/* Thumbnail area */}
|
||
<div className="relative w-full aspect-video bg-slate-900 flex items-center justify-center border-b border-slate-700">
|
||
<div className="absolute inset-0 bg-gradient-to-br from-blue-900/30 to-purple-900/30" />
|
||
<div className="relative flex flex-col items-center gap-2 text-slate-500">
|
||
<svg className="w-12 h-12 opacity-40" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M15 10l4.553-2.069A1 1 0 0121 8.869v6.262a1 1 0 01-1.447.894L15 14M4 8h11a2 2 0 012 2v4a2 2 0 01-2 2H4a2 2 0 01-2-2v-4a2 2 0 012-2z" />
|
||
</svg>
|
||
<span className="text-xs uppercase tracking-widest opacity-50">Video</span>
|
||
</div>
|
||
<span className="absolute top-3 left-3 text-xs font-bold bg-blue-600 text-white px-2 py-1 rounded uppercase tracking-wide">
|
||
{week}
|
||
</span>
|
||
{expert && (
|
||
<span className="absolute top-3 right-3 text-xs bg-purple-700 text-white px-2 py-1 rounded">
|
||
{expert}
|
||
</span>
|
||
)}
|
||
</div>
|
||
{/* Text */}
|
||
<div className="p-5 flex flex-col gap-3 flex-1">
|
||
<h4 className="font-bold text-white text-sm leading-snug">{title}</h4>
|
||
<p className="text-slate-400 text-xs leading-relaxed">{body}</p>
|
||
<p className="text-xs text-blue-400 italic border-t border-slate-700 pt-3">{vorlagen}</p>
|
||
<p className="text-xs font-semibold text-green-400 mt-auto">✓ {result}</p>
|
||
</div>
|
||
</div>
|
||
);
|
||
}
|
||
|
||
/* ═══════════════════════════════════════════════════
|
||
PAGE
|
||
═══════════════════════════════════════════════════ */
|
||
export default function Home() {
|
||
return (
|
||
<main className="bg-[#0B0F1A] text-slate-100">
|
||
|
||
{/* ── NAV ── */}
|
||
<nav className="sticky top-0 z-50 bg-[#0B0F1A]/95 backdrop-blur border-b border-slate-800">
|
||
<div className="max-w-6xl mx-auto px-4 py-3 flex justify-between items-center">
|
||
<span className="font-extrabold text-lg bg-gradient-to-r from-blue-400 to-purple-400 bg-clip-text text-transparent">
|
||
Market Compass
|
||
</span>
|
||
<Btn>Meinen Platz sichern →</Btn>
|
||
</div>
|
||
</nav>
|
||
|
||
{/* ══════════════════════════════════════════
|
||
S1 — HERO
|
||
══════════════════════════════════════════ */}
|
||
<section className="relative overflow-hidden bg-[#0B0F1A] pt-20 pb-16">
|
||
{/* Radial glow */}
|
||
<div className="absolute inset-0 bg-[radial-gradient(ellipse_80%_60%_at_50%_0%,rgba(59,130,246,0.15),transparent)]" />
|
||
|
||
<div className="relative max-w-4xl mx-auto px-4 text-center space-y-7">
|
||
<Badge>Online Gruppencoaching · Pilotprogramm · Start 1. Juli 2027</Badge>
|
||
|
||
<h1 className="text-4xl md:text-5xl lg:text-6xl font-extrabold text-white leading-[1.1] tracking-tight">
|
||
In 8 Wochen zu deinem eigenen{" "}
|
||
<span className="bg-gradient-to-r from-blue-400 to-purple-400 bg-clip-text text-transparent">
|
||
Kundengewinnungs-System
|
||
</span>
|
||
</h1>
|
||
|
||
<p className="text-lg md:text-xl text-blue-300 font-semibold max-w-2xl mx-auto">
|
||
Speziell für Selbstständige — mit Katja Pestereva von Market Compass<br />
|
||
+ 4 Experten aus Vertrieb, Social Media & Video
|
||
</p>
|
||
|
||
<p className="text-slate-300 text-base max-w-xl mx-auto">
|
||
Dein Wissen ist da. Jetzt bekommt es die Struktur die Kunden bringt.
|
||
</p>
|
||
|
||
<div className="flex flex-col items-center gap-3">
|
||
<Btn xl>Meinen Platz sichern →</Btn>
|
||
<p className="text-sm text-slate-400">
|
||
Exklusive Kleingruppe — maximal 10 Plätze. Nur noch 8 frei.<br />
|
||
Du entscheidest nach unserem ersten Gespräch.
|
||
</p>
|
||
</div>
|
||
|
||
{/* Authority bar */}
|
||
<div className="inline-flex items-center gap-3 bg-slate-800/80 border border-blue-800/50 rounded-lg px-5 py-3 text-sm">
|
||
<div className="w-10 h-10 rounded-full bg-gradient-to-br from-blue-500 to-purple-600 flex items-center justify-center font-bold text-white flex-shrink-0">
|
||
KP
|
||
</div>
|
||
<div className="text-left">
|
||
<p className="font-semibold text-white">Katja Pestereva von Market Compass</p>
|
||
<p className="text-slate-400 text-xs">15+ Jahre Erfahrung · 4 Experten aus Vertrieb, Social Media & Video</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
{/* ══════════════════════════════════════════
|
||
VIDEO PLACEHOLDER
|
||
══════════════════════════════════════════ */}
|
||
<section className="py-10 bg-[#0B0F1A]">
|
||
<div className="max-w-3xl mx-auto px-4">
|
||
<div className="relative w-full aspect-video rounded-2xl overflow-hidden bg-slate-900 border-2 border-blue-800/50 shadow-2xl shadow-blue-900/30">
|
||
<div className="absolute inset-0 bg-gradient-to-br from-blue-900/20 to-purple-900/20" />
|
||
{/* Silhouette */}
|
||
<div className="absolute inset-0 flex flex-col items-center justify-center gap-4">
|
||
<div className="w-24 h-24 rounded-full bg-slate-700 flex items-center justify-center">
|
||
<svg className="w-14 h-14 text-slate-500" fill="currentColor" viewBox="0 0 24 24">
|
||
<path d="M12 12c2.7 0 4.8-2.1 4.8-4.8S14.7 2.4 12 2.4 7.2 4.5 7.2 7.2 9.3 12 12 12zm0 2.4c-3.2 0-9.6 1.6-9.6 4.8v2.4h19.2v-2.4c0-3.2-6.4-4.8-9.6-4.8z" />
|
||
</svg>
|
||
</div>
|
||
{/* Play button */}
|
||
<div className="w-16 h-16 rounded-full bg-gradient-to-r from-blue-500 to-purple-600 flex items-center justify-center cursor-pointer hover:scale-110 transition-transform shadow-lg">
|
||
<svg className="w-7 h-7 text-white ml-1" fill="currentColor" viewBox="0 0 24 24">
|
||
<path d="M8 5v14l11-7z" />
|
||
</svg>
|
||
</div>
|
||
<p className="text-slate-400 text-sm font-medium">Video: Katja erklärt das Programm</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
{/* ══════════════════════════════════════════
|
||
S2 — WHY YOU'LL LOVE THIS
|
||
4 Icon-Kacheln: Format & Rahmen
|
||
══════════════════════════════════════════ */}
|
||
<section className="py-16 bg-slate-900/60">
|
||
<div className="max-w-5xl mx-auto px-4">
|
||
<div className="text-center mb-10">
|
||
<Badge>Das Programm</Badge>
|
||
<h2 className="text-2xl md:text-3xl font-extrabold text-white">Was dich erwartet</h2>
|
||
</div>
|
||
<div className="grid grid-cols-2 md:grid-cols-4 gap-5">
|
||
<IconTile icon="📅" title="8 Wochen" text="Schritt für Schritt aufgebaut" />
|
||
<IconTile icon="🎓" title="5 Experten" text="An deiner Seite" />
|
||
<IconTile icon="👥" title="10 Plätze" text="Exklusive Kleingruppe" />
|
||
<IconTile icon="📋" title="25+ Vorlagen" text="Sofort einsetzbar" />
|
||
</div>
|
||
<div className="mt-8 rounded-xl bg-gradient-to-r from-blue-900/30 to-purple-900/30 border border-blue-800/40 p-5 text-sm text-slate-300 text-center">
|
||
<strong className="text-white">Jede Woche:</strong> Workshop (90 Min.) · Tägliche Begleitung in der Messenger-Community · Alle Aufzeichnungen bleiben abrufbar
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
{/* ══════════════════════════════════════════
|
||
S3 — DAS IST KEIN KURS
|
||
══════════════════════════════════════════ */}
|
||
<section className="py-16">
|
||
<div className="max-w-3xl mx-auto px-4 space-y-5">
|
||
<Badge>Kein Kurs. Ein System.</Badge>
|
||
<h2 className="text-2xl md:text-3xl font-extrabold text-white">Das ist kein weiterer Kurs.</h2>
|
||
<p className="text-slate-300 leading-relaxed">
|
||
Die meisten Programme erklären dir entweder Marketing, Vertrieb oder Social Media — getrennt voneinander. Du gehst mit Wissen nach Hause. Und weißt immer noch nicht, wie das alles zusammenhängt.
|
||
</p>
|
||
<p className="text-slate-300 leading-relaxed">
|
||
Das <strong className="text-white">8-Wochen Kundengewinnungs-System</strong> macht genau das: Marketing, Vertrieb und Social Media — in einem System, das Woche für Woche aufgebaut wird. Mit Katja Pestereva von Market Compass und Experten aus Vertrieb, Social Media und Video.
|
||
</p>
|
||
<p className="text-blue-300 font-semibold">
|
||
Du baust kein neues Wissen auf. Du nimmst alles was du hast — und bringst es in eine Struktur, die planbar die richtigen Kunden anzieht.
|
||
</p>
|
||
</div>
|
||
</section>
|
||
|
||
{/* ══════════════════════════════════════════
|
||
S3b — NACH 8 WOCHEN NIMMST DU MIT
|
||
Icon-Kacheln 2×4
|
||
══════════════════════════════════════════ */}
|
||
<section className="py-16 bg-slate-900/60">
|
||
<div className="max-w-5xl mx-auto px-4">
|
||
<div className="text-center mb-10">
|
||
<Badge>Deine Ergebnisse</Badge>
|
||
<h2 className="text-2xl md:text-3xl font-extrabold text-white">Nach 8 Wochen nimmst du mit:</h2>
|
||
</div>
|
||
<div className="grid grid-cols-2 md:grid-cols-4 gap-5">
|
||
<IconTile icon="🎯" title="Klare Wunschkunden-Persona" text="+ vollständiger Marketing-Audit" />
|
||
<IconTile icon="💡" title="Dein Angebot auf den Punkt" text="Positionierung in einem Satz" />
|
||
<IconTile icon="📄" title="Deine Verkaufsseite" text="Vollständige Struktur — fertig zum Umsetzen" />
|
||
<IconTile icon="🗓️" title="90-Tage-Marketingplan" text="+ 2 fokussierte Kanäle entschieden" />
|
||
<IconTile icon="📲" title="Content-Plan für 4 Wochen" text="Was, wann und warum du postest" />
|
||
<IconTile icon="🎬" title="Social Media Verkaufsstrategie" text="+ professionelles Video-Setup" />
|
||
<IconTile icon="🤝" title="Dein Verkaufsskript" text="Für Direktansprache und Netzwerk" />
|
||
<IconTile icon="🔍" title="Google Business optimiert" text="+ SEO-Grundlagen für deine Website" />
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
{/* ══════════════════════════════════════════
|
||
S4 — WAS DU IN 8 WOCHEN BAUST (Grid)
|
||
══════════════════════════════════════════ */}
|
||
<section className="py-16">
|
||
<div className="max-w-5xl mx-auto px-4">
|
||
<div className="text-center mb-10">
|
||
<Badge>Komplettpaket</Badge>
|
||
<h2 className="text-2xl md:text-3xl font-extrabold text-white">Was du in 8 Wochen baust — und mit nach Hause nimmst</h2>
|
||
</div>
|
||
<div className="grid sm:grid-cols-2 lg:grid-cols-3 gap-4">
|
||
{[
|
||
{ icon: "🎯", text: "Deinen Wunschkunden klar definiert — wer er ist, was er braucht, was er schon versucht hat" },
|
||
{ icon: "💡", text: "Dein Angebot auf den Punkt gebracht — was du anbietest, welches Problem du löst" },
|
||
{ icon: "📌", text: "Deine Positionierung in einem Satz — klar, sofort verständlich, für alle Kanäle nutzbar" },
|
||
{ icon: "📄", text: "Die komplette Struktur für deine Verkaufsseite — mit Feedback zur Umsetzung" },
|
||
{ icon: "🗺️", text: "Deine Marketing-Systemkarte — wie Sichtbarkeit, Vertrauen, Anfrage und Kauf zusammenhängen" },
|
||
{ icon: "🗓️", text: "Deinen 90-Tage-Marketingplan + Entscheidung welche 2 Kanäle du fokussierst" },
|
||
{ icon: "📲", text: "Deinen 4-Wochen Content-Plan + Themen die zeigen wofür du stehst" },
|
||
{ icon: "🚀", text: "Deinen Launch-Plan — wie du dein Angebot aktiv über Social Media in den Markt bringst" },
|
||
{ icon: "🎬", text: "Video-Setup erklärt — professionelle Videos mit dem Handy" },
|
||
{ icon: "🤝", text: "Dein persönliches Verkaufsskript für Direktansprache und Netzwerk" },
|
||
{ icon: "🔍", text: "Dein Google Business Profil optimiert + SEO-Grundlagen für deine Website" },
|
||
].map(({ icon, text }, i) => (
|
||
<div key={i} className="flex items-start gap-3 rounded-xl bg-slate-800 border border-slate-700 p-4">
|
||
<span className="text-xl flex-shrink-0 mt-0.5">{icon}</span>
|
||
<p className="text-slate-300 text-sm leading-relaxed">{text}</p>
|
||
</div>
|
||
))}
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
{/* ══════════════════════════════════════════
|
||
MEET THE COACH
|
||
Brunson-Style: Großes Foto + Bio
|
||
══════════════════════════════════════════ */}
|
||
<section className="py-20 bg-slate-900/60">
|
||
<div className="max-w-5xl mx-auto px-4">
|
||
<div className="text-center mb-12">
|
||
<Badge>Deine Begleitung</Badge>
|
||
<h2 className="text-2xl md:text-3xl font-extrabold text-white">Meet your Coach</h2>
|
||
</div>
|
||
<div className="grid md:grid-cols-2 gap-10 items-center">
|
||
{/* Foto-Placeholder */}
|
||
<div className="relative rounded-2xl overflow-hidden aspect-[4/5] bg-slate-900 border-2 border-blue-700/50 shadow-2xl shadow-blue-900/30">
|
||
<div className="absolute inset-0 bg-gradient-to-br from-blue-900/20 to-purple-900/30" />
|
||
<div className="absolute inset-0 flex flex-col items-center justify-center gap-3 text-slate-500">
|
||
<svg className="w-28 h-28 opacity-30" fill="currentColor" viewBox="0 0 24 24">
|
||
<path d="M12 12c2.7 0 4.8-2.1 4.8-4.8S14.7 2.4 12 2.4 7.2 4.5 7.2 7.2 9.3 12 12 12zm0 2.4c-3.2 0-9.6 1.6-9.6 4.8v2.4h19.2v-2.4c0-3.2-6.4-4.8-9.6-4.8z" />
|
||
</svg>
|
||
<p className="text-xs uppercase tracking-widest opacity-40">Foto Katja Pestereva</p>
|
||
</div>
|
||
{/* Name badge */}
|
||
<div className="absolute bottom-0 inset-x-0 bg-gradient-to-t from-black/80 to-transparent p-6">
|
||
<p className="font-extrabold text-white text-xl">Katja Pestereva</p>
|
||
<p className="text-blue-300 text-sm">Market Compass · 15+ Jahre Erfahrung</p>
|
||
</div>
|
||
</div>
|
||
{/* Bio */}
|
||
<div className="space-y-5">
|
||
<h3 className="text-xl font-extrabold text-white leading-snug">
|
||
Ich baue aus dem was du hast — ein System das planbar die richtigen Kunden bringt.
|
||
</h3>
|
||
<p className="text-slate-300 leading-relaxed">
|
||
Nicht von vorne anfangen. Nicht noch einen Kurs. Sondern das was schon da ist in eine Struktur bringen die funktioniert.
|
||
</p>
|
||
<p className="text-slate-300 leading-relaxed">
|
||
Dafür habe ich die besten Experten aus den Bereichen zusammengestellt, die Selbstständige am meisten brauchen: Vertrieb, Social Media und Video.
|
||
</p>
|
||
<div className="border-t border-slate-700 pt-5 space-y-3">
|
||
<p className="text-sm font-bold text-white uppercase tracking-wide">Dein Expertenteam:</p>
|
||
{[
|
||
{ name: "Katja Pestereva", role: "Marketing-System, Positionierung, SEO", weeks: "Wochen 1, 2, 3, 4, 8" },
|
||
{ name: "Can Turkdogan", role: "Content-Strategie & Social Media", weeks: "Woche 5" },
|
||
{ name: "Stefan & Philipp · Onlinewerbevideo", role: "Professionelles Filmen & Video-Setup", weeks: "Woche 6" },
|
||
{ name: "Manuela Ludewig", role: "Vertrieb & Direktansprache", weeks: "Woche 7" },
|
||
].map(({ name, role, weeks }) => (
|
||
<div key={name} className="flex items-start gap-3">
|
||
<div className="w-2 h-2 rounded-full bg-blue-500 flex-shrink-0 mt-1.5" />
|
||
<div>
|
||
<span className="font-semibold text-blue-300 text-sm">{name}</span>
|
||
<span className="text-slate-400 text-sm"> — {role}</span>
|
||
<span className="text-slate-500 text-xs ml-2">({weeks})</span>
|
||
</div>
|
||
</div>
|
||
))}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
{/* ══════════════════════════════════════════
|
||
S6–S8 — MODULE (Thumbnail Cards)
|
||
Modul 1: Wochen 1–2
|
||
══════════════════════════════════════════ */}
|
||
<section className="py-16">
|
||
<div className="max-w-5xl mx-auto px-4 space-y-14">
|
||
|
||
{/* Modul 1 */}
|
||
<div>
|
||
<div className="text-center mb-8">
|
||
<Badge>Modul 1 — Wochen 1 & 2</Badge>
|
||
<h2 className="text-2xl md:text-3xl font-extrabold text-white">
|
||
Wunschkunde, Angebot, Positionierung — alles klar auf den Punkt.
|
||
</h2>
|
||
</div>
|
||
<div className="grid md:grid-cols-2 gap-6">
|
||
<ModuleCard
|
||
week="Woche 1"
|
||
title="Dein Wunschkunde + dein Markt"
|
||
body="Du schaust konkret hin: Wer ist dein Wunschkunde wirklich? Welches Problem hat er — und was hat er schon alles versucht? Was kostet ihn dieses Problem jeden Monat? Du machst einen ehrlichen Marketing-Audit: Was läuft, was nicht — und warum."
|
||
vorlagen="Marketing-Audit-Vorlage · Wunschkunden-Persona-Vorlage"
|
||
result="Klarheit über deinen Wunschkunden — und deinen Marketing-IST-Zustand schwarz auf weiß."
|
||
/>
|
||
<ModuleCard
|
||
week="Woche 2"
|
||
title="Dein unwiderstehliches Angebot + deine Positionierung"
|
||
body="Du legst dein Angebot auf den Tisch: Was bietest du genau an? Welches Problem löst du? Dann entwickelst du deine Positionierungsformel — für wen, welches Problem, was macht dich anders. In einem Satz. Du übst ihn live in der Gruppe."
|
||
vorlagen="Positionierungsformel-Vorlage · Kurztext für Website, Instagram-Profil und LinkedIn"
|
||
result="Dein Angebot klar auf den Punkt — kannst in einem Satz erklären was du tust."
|
||
/>
|
||
</div>
|
||
</div>
|
||
|
||
{/* Modul 2 */}
|
||
<div>
|
||
<div className="text-center mb-8">
|
||
<Badge>Modul 2 — Wochen 3 & 4</Badge>
|
||
<h2 className="text-2xl md:text-3xl font-extrabold text-white">Dein System steht.</h2>
|
||
</div>
|
||
<div className="grid md:grid-cols-2 gap-6">
|
||
<ModuleCard
|
||
week="Woche 3"
|
||
title="Deine Verkaufsseite"
|
||
body="Du lernst wie eine Verkaufsseite aufgebaut sein muss — die 7 Pflicht-Elemente, ihre Reihenfolge, die Psychologie dahinter. Du bekommst die komplette Vorlage. Du setzt es direkt auf deiner Seite um — Katja gibt Feedback."
|
||
vorlagen="Verkaufsseiten-Vorlage + alle Textelemente · 7-Elemente-Checkliste"
|
||
result="Die vollständige Struktur für deine Verkaufsseite — fertig zum Umsetzen."
|
||
/>
|
||
<ModuleCard
|
||
week="Woche 4"
|
||
title="Deine Kanal-Strategie + 90-Tage-Marketingplan"
|
||
body="Welche 2 Kanäle fokussierst du — auf Basis deiner Zielgruppe, nicht dem was gerade alle machen. Du baust deine Marketing-Systemkarte und startest deinen 90-Tage-Plan."
|
||
vorlagen="Kanal-Entscheidungsmatrix · Marketing-Systemkarte · 90-Tage-Marketingplan"
|
||
result="Gewusst welche 2 Kanäle du fokussierst — und deinen 90-Tage-Plan begonnen."
|
||
/>
|
||
</div>
|
||
</div>
|
||
|
||
{/* Modul 3 */}
|
||
<div>
|
||
<div className="text-center mb-8">
|
||
<Badge>Modul 3 — Wochen 5–8</Badge>
|
||
<h2 className="text-2xl md:text-3xl font-extrabold text-white">Sichtbarkeit. Anfragen. Und du weißt wie es weitergeht.</h2>
|
||
</div>
|
||
<div className="grid md:grid-cols-2 gap-6">
|
||
<ModuleCard
|
||
week="Woche 5"
|
||
expert="Can Turkdogan"
|
||
title="Dein Content-System"
|
||
body="Deine 3–4 Content-Themen — die zeigen wofür du stehst. Du erstellst live deinen 4-Wochen-Redaktionsplan. Schreibst deinen ersten Hook. Und weißt genau: was du postest, wann, und warum."
|
||
vorlagen="Content-Säulen-Template · 4-Wochen-Redaktionsplan · 10 bewährte Hook-Formeln"
|
||
result="Deinen Content-Plan für 4 Wochen — weißt genau was und wie du postest."
|
||
/>
|
||
<ModuleCard
|
||
week="Woche 6"
|
||
expert="Stefan & Philipp · OWV"
|
||
title="Social Media Verkauf + Video-Setup"
|
||
body="Du lernst wie du dein Angebot aktiv über Social Media verkaufst — mit Strategie, nicht mit Druck. Die Video-Experten zeigen live: Professionelle Videos mit dem Handy."
|
||
vorlagen="Launch-Checkliste · Equipment-Checkliste · Filming-Guide"
|
||
result="Plan wie du dein Angebot über Social Media verkaufst + professionell auf Video erscheinst."
|
||
/>
|
||
<ModuleCard
|
||
week="Woche 7"
|
||
expert="Manuela Ludewig"
|
||
title="Verkauf + Direktansprache"
|
||
body="Dein persönliches Verkaufsskript für die Direktansprache — angepasst auf deine Positionierung. Du übst es live in der Gruppe. Mit Plan für deine nächsten Kontakte."
|
||
vorlagen="Persönliches Verkaufsskript · Follow-up-Template · Event-Recherche-Guide"
|
||
result="Dein Verkaufsskript für die Direktansprache — und hast es einmal geübt."
|
||
/>
|
||
<ModuleCard
|
||
week="Woche 8"
|
||
expert="Katja Pestereva"
|
||
title="Sichtbarkeit auf Google + Abschluss"
|
||
body="Du optimierst dein Google Business Profil — Schritt für Schritt in der Gruppe. Du bringst deine Website auf die Grundlagen die Google belohnt. In der Abschlussrunde: Was hat sich in 8 Wochen verändert?"
|
||
vorlagen="SEO-Checkliste · Keyword-Recherche-Vorlage · Website-Leitfaden"
|
||
result="Google Business vollständig optimiert + Seite für dein Haupt-Keyword vorbereitet."
|
||
/>
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
</section>
|
||
|
||
{/* ══════════════════════════════════════════
|
||
S9 — VORHER / NACHHER
|
||
══════════════════════════════════════════ */}
|
||
<section className="py-16 bg-slate-900/60">
|
||
<div className="max-w-4xl mx-auto px-4">
|
||
<div className="text-center mb-10">
|
||
<Badge>Transformation</Badge>
|
||
<h2 className="text-2xl md:text-3xl font-extrabold text-white">Vorher. Nachher.</h2>
|
||
</div>
|
||
<div className="grid md:grid-cols-2 gap-4">
|
||
{[
|
||
["\u201EIch wei\xDF viel \u2014 aber niemand fragt an.\u201C", "Positionierung in einem Satz. System das Anfragen bringt."],
|
||
["\u201EIch poste regelm\xe4\xDFig. Nichts passiert.\u201C", "Content-Plan f\xFCr alle Plattformen \u2014 du wei\xDFt was, wann, warum."],
|
||
["\u201EIch wei\xDF nicht wie Marketing und Vertrieb zusammenh\xe4ngen.\u201C", "Marketing-Systemkarte. Alle Teile greifen ineinander."],
|
||
["\u201EIch warte dass Kunden kommen.\u201C", "Verkaufsskript. Direktansprache. Ich gehe hin."],
|
||
["\u201EIch werde online nicht gefunden.\u201C", "Google Business optimiert. Seite f\xFCr mein Keyword."],
|
||
["\u201ENach jedem Kurs fange ich wieder bei null an.\u201C", "Ein System aus Marketing, Vertrieb und Social Media \u2014 das weiterl\xe4uft."],
|
||
].map(([before, after], i) => (
|
||
<div key={i} className="grid grid-cols-2 rounded-xl overflow-hidden border border-slate-700">
|
||
<div className="bg-slate-800 p-4 text-slate-400 italic text-sm">{before}</div>
|
||
<div className="bg-gradient-to-r from-blue-900/40 to-purple-900/40 p-4 text-slate-200 text-sm font-medium border-l border-blue-800/50">
|
||
{after}
|
||
</div>
|
||
</div>
|
||
))}
|
||
</div>
|
||
<p className="mt-8 text-center text-blue-300 font-semibold text-lg">
|
||
Dein Wissen war schon da. Jetzt hat es eine Struktur die Kunden bringt.
|
||
</p>
|
||
</div>
|
||
</section>
|
||
|
||
{/* ══════════════════════════════════════════
|
||
S10 — TESTIMONIALS
|
||
══════════════════════════════════════════ */}
|
||
<section className="py-16">
|
||
<div className="max-w-5xl mx-auto px-4">
|
||
<div className="text-center mb-10">
|
||
<Badge>Erfahrungen</Badge>
|
||
<h2 className="text-2xl md:text-3xl font-extrabold text-white">Was Selbstständige über die Zusammenarbeit mit Katja sagen</h2>
|
||
<p className="text-slate-400 text-sm mt-2 italic">Das Programm startet Juli 2027. Diese Erfahrungen kommen aus der direkten Zusammenarbeit mit Katja.</p>
|
||
</div>
|
||
<div className="grid md:grid-cols-3 gap-6">
|
||
{[1, 2, 3].map((i) => (
|
||
<div key={i} className="rounded-xl bg-slate-800 border border-slate-700 p-6 space-y-3">
|
||
<div className="flex gap-1 text-yellow-400">{"★★★★★"}</div>
|
||
<p className="text-slate-400 italic text-sm">[Google-Bewertung {i} einfügen]</p>
|
||
<div className="flex items-center gap-3 border-t border-slate-700 pt-3">
|
||
<div className="w-8 h-8 rounded-full bg-gradient-to-br from-blue-500 to-purple-600 flex-shrink-0" />
|
||
<p className="text-slate-500 text-xs">— [Name, Berufsfeld]</p>
|
||
</div>
|
||
</div>
|
||
))}
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
{/* ══════════════════════════════════════════
|
||
S11 — BONUS
|
||
══════════════════════════════════════════ */}
|
||
<section className="py-16 bg-slate-900/60">
|
||
<div className="max-w-5xl mx-auto px-4">
|
||
<div className="text-center mb-10">
|
||
<Badge>Bonus-Paket</Badge>
|
||
<h2 className="text-2xl md:text-3xl font-extrabold text-white">Und du bist während und nach dem Programm nie allein.</h2>
|
||
</div>
|
||
<div className="rounded-xl bg-gradient-to-r from-blue-900/30 to-purple-900/30 border border-blue-700/50 p-6 mb-8 text-center">
|
||
<p className="text-slate-200 leading-relaxed">
|
||
<strong className="text-white">Die gesamten 8 Wochen:</strong> Täglich Fragen stellen in der Messenger-Community. Katja antwortet. Kein Kurs bei dem du alleine vorankommst — 8 Wochen tägliche Begleitung.
|
||
</p>
|
||
</div>
|
||
<div className="grid sm:grid-cols-2 lg:grid-cols-3 gap-4">
|
||
{[
|
||
{ n: 1, icon: "📦", title: "Sofort loslegen: 7 fertige Vorlagen", desc: "Alle wichtigen Vorlagen direkt anwendbar — du fängst nicht bei null an.", val: "497 €" },
|
||
{ n: 2, icon: "📱", title: "Kunden gewinnen über Instagram", desc: "Wie du über Social Media planbar Anfragen bekommst — Schritt für Schritt.", val: "297 €" },
|
||
{ n: 3, icon: "🎬", title: "Professionell filmen — mit dem Handy", desc: "Kein teures Equipment. Trotzdem professionell. Die Grundlagen von den Video-Experten.", val: "197 €" },
|
||
{ n: 4, icon: "🗺️", title: "Welche Plattform passt zu dir?", desc: "Kein Rätselraten mehr — du weißt auf welcher Plattform deine Wunschkunden sind.", val: "147 €" },
|
||
{ n: 5, icon: "💬", title: "1 Monat Begleitung nach dem Programm", desc: "Die Messenger-Community bleibt einen Monat nach dem Programm offen.", val: "97 €" },
|
||
{ n: 6, icon: "🤝", title: "Abschluss-Netzwerkevent (geplant)", desc: "Persönliches Feedback von Katja. Neue Kontakte. Exklusiv für den Pilotdurchlauf.", val: "197 €" },
|
||
].map(({ n, icon, title, desc, val }) => (
|
||
<div key={n} className="rounded-xl bg-slate-800 border border-slate-700 p-5 space-y-2">
|
||
<div className="flex items-center gap-2">
|
||
<span className="text-xl">{icon}</span>
|
||
<span className="text-xs font-bold text-blue-400 uppercase">Bonus {n}</span>
|
||
<span className="ml-auto text-xs font-bold text-green-400 bg-green-900/30 border border-green-800 rounded px-2 py-0.5">Wert: {val}</span>
|
||
</div>
|
||
<p className="font-semibold text-white text-sm">{title}</p>
|
||
<p className="text-slate-400 text-xs">{desc}</p>
|
||
</div>
|
||
))}
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
{/* ══════════════════════════════════════════
|
||
S12 — VALUE STACK + PREIS
|
||
══════════════════════════════════════════ */}
|
||
<section id="platz-sichern" className="py-20">
|
||
<div className="max-w-2xl mx-auto px-4">
|
||
<div className="text-center mb-10">
|
||
<Badge>Dein Investment</Badge>
|
||
<h2 className="text-2xl md:text-3xl font-extrabold text-white">Was du bekommst — und was es wert ist.</h2>
|
||
</div>
|
||
<div className="rounded-2xl overflow-hidden border border-slate-700">
|
||
<table className="w-full text-sm">
|
||
<tbody>
|
||
{[
|
||
["8-Wochen Programm (Marketing · Vertrieb · Social Media · Video)", "3.000 €"],
|
||
["Bonus 1: Sofort loslegen — 7 fertige Vorlagen", "497 €"],
|
||
["Bonus 2: Kunden gewinnen über Instagram", "297 €"],
|
||
["Bonus 3: Professionell filmen mit dem Handy", "197 €"],
|
||
["Bonus 4: Welche Plattform passt zu dir?", "147 €"],
|
||
["Bonus 5: 1 Monat Begleitung nach dem Programm", "97 €"],
|
||
["Bonus 6: Abschluss-Netzwerkevent (geplant, Pilot exklusiv)", "197 €"],
|
||
].map(([label, val], i) => (
|
||
<tr key={i} className={`border-b border-slate-700 ${i % 2 === 0 ? "bg-slate-900/50" : "bg-slate-800/50"}`}>
|
||
<td className="p-4 text-slate-300">{label}</td>
|
||
<td className="p-4 text-right text-slate-300 font-mono whitespace-nowrap">{val}</td>
|
||
</tr>
|
||
))}
|
||
<tr className="bg-gradient-to-r from-blue-900/60 to-purple-900/60 border-t-2 border-blue-500">
|
||
<td className="p-4 font-extrabold text-white text-base">Gesamtwert</td>
|
||
<td className="p-4 text-right font-extrabold text-white font-mono text-base">4.432 €</td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
|
||
{/* Preis */}
|
||
<div className="mt-10 text-center space-y-5">
|
||
<p className="text-slate-400 text-sm line-through">Regulär 3.000 €</p>
|
||
<p className="text-7xl md:text-8xl font-extrabold bg-gradient-to-r from-blue-400 to-purple-400 bg-clip-text text-transparent leading-none">
|
||
500 €
|
||
</p>
|
||
<p className="text-xl text-slate-300 font-semibold">gesamt · 2 × 250 € / Monat</p>
|
||
|
||
<div className="rounded-xl bg-slate-800 border border-slate-700 p-5 text-left text-sm text-slate-300">
|
||
<strong className="text-white block mb-1">Warum dieser Preis?</strong>
|
||
Das ist der erste Durchlauf. Du bekommst das vollständige Programm — mit allen Experten, allen Vorlagen, aller Begleitung. Im Gegenzug gibst du nach jeder Woche direktes Feedback. Das hilft das Programm für alle künftigen Teilnehmenden zu verbessern.
|
||
</div>
|
||
|
||
{/* Garantie */}
|
||
<div className="rounded-xl border border-green-700 bg-green-900/20 p-5 text-left space-y-3 text-sm">
|
||
<p className="font-extrabold text-white text-base">Mein Versprechen an dich:</p>
|
||
<div className="flex items-start gap-3">
|
||
<span className="w-5 h-5 rounded-full bg-green-600 flex items-center justify-center text-white text-xs flex-shrink-0 mt-0.5">✓</span>
|
||
<p className="text-slate-300"><strong>14-Tage-Ausstiegsrecht</strong> — nach der ersten Session, ohne Fragen, voller Betrag zurück.</p>
|
||
</div>
|
||
<div className="flex items-start gap-3">
|
||
<span className="w-5 h-5 rounded-full bg-green-600 flex items-center justify-center text-white text-xs flex-shrink-0 mt-0.5">✓</span>
|
||
<p className="text-slate-300"><strong>Kostenlose Verlängerung*</strong> — Ziel nicht erreicht nach 8 Wochen? Kostenlos um 4 Wochen verlängern.</p>
|
||
</div>
|
||
<p className="text-xs text-slate-500 italic">* Gilt wenn du aktiv teilgenommen und die wöchentlichen Aufgaben umgesetzt hast.</p>
|
||
</div>
|
||
|
||
<Btn xl>Meinen Platz sichern →</Btn>
|
||
<p className="text-sm text-slate-400">Maximal 10 Plätze · Start: 1. Juli 2027 · Du entscheidest nach unserem ersten Gespräch.</p>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
{/* ══════════════════════════════════════════
|
||
S13 — FAQ
|
||
══════════════════════════════════════════ */}
|
||
<section className="py-16 bg-slate-900/60">
|
||
<div className="max-w-3xl mx-auto px-4">
|
||
<div className="text-center mb-10">
|
||
<Badge>FAQ</Badge>
|
||
<h2 className="text-2xl md:text-3xl font-extrabold text-white">Häufige Fragen</h2>
|
||
</div>
|
||
<div className="space-y-3">
|
||
{[
|
||
{ q: "Für wen ist das Programm?", a: "Für Selbstständige die ihr Fachgebiet kennen — aber noch kein System haben das planbar Wunschkunden bringt. Coaches, Berater, Trainer, Stilisten, Kreative, Therapeuten. Entscheidend ist: du verkaufst dein Wissen oder deine Fähigkeiten, und willst aufhören zu warten dass Kunden kommen." },
|
||
{ q: "Was ist hier anders als bei anderen Kursen?", a: "Du bekommst kein neues Wissen. Du bringst alles was du hast in ein System. Live, mit Feedback, in einer kleinen Gruppe. Am Ende steht nicht ein Zertifikat — sondern eine fertige Verkaufsseiten-Struktur, ein Marketingplan, ein Verkaufsskript." },
|
||
{ q: "Wie viel Zeit brauche ich pro Woche?", a: "Plan 3–4 Stunden ein: 90 Minuten Workshop + die wöchentliche Aufgabe. Alle Aufzeichnungen bleiben abrufbar — wenn eine Woche stressiger ist, holst du nach." },
|
||
{ q: "Was wenn ich eine Session verpasse?", a: "Alle Workshops werden aufgezeichnet. Du holst nach wann es passt. Du verpasst nichts." },
|
||
{ q: "Wann startet das Programm — und wie melde ich mich an?", a: "Start: 1. Juli 2027. Maximal 10 Plätze verfügbar. Schreib dich für ein Gespräch ein — dort schauen wir gemeinsam ob das Programm zu dir passt." },
|
||
{ q: "Was wenn es mir nichts bringt?", a: "14-Tage-Ausstiegsrecht nach der ersten Session — voller Betrag zurück, keine Fragen. Ziel nicht erreicht nach 8 Wochen? Kostenlose Verlängerung um 4 Wochen.* (* Gilt wenn du aktiv teilgenommen und die Aufgaben umgesetzt hast.)" },
|
||
{ q: "Ich bin nicht sicher ob ich die Zeit habe.", a: "Das klären wir im Gespräch. Wir schauen zusammen auf deine Situation — und sagen dir ehrlich ob das jetzt der richtige Zeitpunkt ist." },
|
||
{ q: "Was genau zahle ich?", a: "500 € gesamt — 2 × 250 € / Monat. Das ist der Pilotpreis für den ersten Durchlauf. Der reguläre Preis liegt bei 3.000 €." },
|
||
].map(({ q, a }, i) => (
|
||
<details key={i} className="group rounded-xl bg-slate-800 border border-slate-700 overflow-hidden">
|
||
<summary className="flex justify-between items-center p-5 cursor-pointer font-semibold text-white list-none">
|
||
{q}
|
||
<span className="text-blue-400 group-open:rotate-180 transition-transform flex-shrink-0 ml-4">▼</span>
|
||
</summary>
|
||
<div className="px-5 pb-5 text-slate-300 text-sm leading-relaxed border-t border-slate-700 pt-4">{a}</div>
|
||
</details>
|
||
))}
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
{/* ══════════════════════════════════════════
|
||
ABSCHLUSS-CTA
|
||
══════════════════════════════════════════ */}
|
||
<section className="py-24 bg-gradient-to-b from-[#0B0F1A] to-slate-950 text-center">
|
||
<div className="max-w-2xl mx-auto px-4 space-y-6">
|
||
<h2 className="text-3xl md:text-5xl font-extrabold text-white leading-tight">
|
||
Dein Wissen ist da.{" "}
|
||
<span className="bg-gradient-to-r from-blue-400 to-purple-400 bg-clip-text text-transparent">
|
||
Jetzt bekommt es die Struktur die Kunden bringt.
|
||
</span>
|
||
</h2>
|
||
<p className="text-slate-400">Maximal 10 Plätze · Start: 1. Juli 2027</p>
|
||
<Btn xl>Meinen Platz sichern →</Btn>
|
||
<p className="text-sm text-slate-500">Ein kurzes Gespräch — du entscheidest danach.</p>
|
||
</div>
|
||
</section>
|
||
|
||
{/* FOOTER */}
|
||
<footer className="border-t border-slate-800 py-6 text-center text-xs text-slate-600">
|
||
© 2026 Market Compass · Katja Pestereva
|
||
</footer>
|
||
|
||
</main>
|
||
);
|
||
}
|