Athena/gso-landingpage
Archived
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

fix: MC CI light theme + Brunson-Struktur + echte Fotos

Browse source 
- Heller Lavendel-Hintergrund (MC CI wie mc-it-website.vercel.app)
- Indigo/Violet Gradient für Buttons + Headlines (MC CI)
- Hero: NUR Headline + Subline + CTA — kein Wall of Text
- Video-Placeholder direkt unter dem Hero (mit Katja-Foto als Preview)
- Nach 8 Wochen: 2x4 Icon-Kacheln
- Meet the Coach: echtes Foto von Katja (katja-1.jpg) + Bio rechts
- Module: Thumbnail-Cards mit Video-Preview-Bereich
- Dark Sections: Nav, CTA-Strip, Footer (MC CI dark)
- Katjas echte Fotos in /public/katja/ eingebunden

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Athena 2026-04-30 18:17:16 +02:00
parent 7e00be4acb
commit 2939a87806
10 changed files with 392 additions and 414 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

BIN
libnspr4_2%3a4.35-1.1build1_amd64.deb Normal file
View file

Binary file not shown.

BIN
libnss3_2%3a3.98-1ubuntu0.1_amd64.deb Normal file
View file

Binary file not shown.

BIN
public/katja/katja-1.jpg Executable file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 7.5 MiB

BIN
public/katja/katja-2.jpg Executable file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 7.6 MiB

BIN
public/katja/katja-3.jpg Executable file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 8.6 MiB

BIN
public/katja/katja-4.jpg Executable file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 6.4 MiB

BIN
public/katja/katja-mc.jpg Executable file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 7.6 MiB

47
src/app/globals.css
View file

@ -1,8 +1,8 @@
@import "tailwindcss"; @import "tailwindcss";
:root { :root {
--background: #0F172A; --background: #f8f7ff;
--foreground: #F1F5F9; --foreground: #0f172a;
} }
@theme inline { @theme inline {
@ -13,7 +13,48 @@
} }
body { body {
background: var(--background); background: linear-gradient(160deg, #f5f4ff, #f8f7ff 40%, #f4f7fa);
color: var(--foreground); color: var(--foreground);
font-family: var(--font-geist-sans, Arial, Helvetica, sans-serif); font-family: var(--font-geist-sans, Arial, Helvetica, sans-serif);
min-height: 100vh;
} }
.mc-card {
background: #ffffff;
border: 1px solid #eae8f8;
border-radius: 1rem;
}
.mc-card-accent {
background: #ffffff;
border: 1px solid #eae8f8;
border-radius: 1rem;
border-top: 3px solid transparent;
border-image: linear-gradient(90deg, #6366f1, #8b5cf6, #a78bfa) 1;
border-top-left-radius: 1rem;
border-top-right-radius: 1rem;
}
.mc-nav-bg {
background: linear-gradient(135deg, #0c0a1e, #1a1744 40%, #0f0d2a);
}
.mc-dark-bg {
background: linear-gradient(135deg, #0c0a1e, #1a1744 40%, #0f0d2a);
}
.mc-btn {
background: linear-gradient(135deg, #6366f1, #8b5cf6);
box-shadow: 0 4px 16px rgba(99, 102, 241, 0.35);
transition: box-shadow 0.2s, transform 0.2s;
color: #fff;
font-weight: 700;
border-radius: 0.75rem;
}
.mc-btn:hover {
transform: translateY(-1px);
box-shadow: 0 6px 28px rgba(99, 102, 241, 0.55);
}
details summary::-webkit-details-marker { display: none; }

30
src/app/layout.tsx
View file

@ -1,36 +1,18 @@
import type { Metadata } from "next"; import type { Metadata } from "next";
import { Geist, Geist_Mono } from "next/font/google"; import { Geist } from "next/font/google";
import "./globals.css"; import "./globals.css";
const geistSans = Geist({ const geist = Geist({ variable: "--font-geist-sans", subsets: ["latin"] });
variable: "--font-geist-sans",
subsets: ["latin"],
});
const geistMono = Geist_Mono({
variable: "--font-geist-mono",
subsets: ["latin"],
});
export const metadata: Metadata = { export const metadata: Metadata = {
title: "Das 8-Wochen Kundengewinnungs-System für Selbstständige | Market Compass", title: "Das 8-Wochen Kundengewinnungs-System für Selbstständige | Market Compass",
description: description: "In 8 Wochen zu deinem eigenen Kundengewinnungs-System — speziell für Selbstständige. Mit Katja Pestereva von Market Compass und 4 Experten aus Vertrieb, Social Media & Video.",
"In 8 Wochen zu deinem eigenen Kundengewinnungs-System — speziell für Selbstständige. Mit Katja Pestereva von Market Compass und 4 Experten aus Vertrieb, Social Media & Video.",
}; };
export default function RootLayout({ export default function RootLayout({ children }: { children: React.ReactNode }) {
children,
}: Readonly<{
children: React.ReactNode;
}>) {
return ( return (
<html <html lang="de" className={`${geist.variable} antialiased`}>
lang="de" <body>{children}</body>
className={`${geistSans.variable} ${geistMono.variable} h-full antialiased`}
>
<body className="min-h-full flex flex-col bg-slate-900 text-slate-100">
{children}
</body>
</html> </html>
); );
} }

729
src/app/page.tsx
View file

@ -1,244 +1,236 @@
/* ───────────────────────────────────────────────────── import Image from "next/image";
GSO Gruppencoaching — Verkaufsseite
Brunson Online Masterclass Funnel Template
CI: Market Compass · Blau #3B82F6 · Lila #8B5CF6
───────────────────────────────────────────────────── */
const CTA_HREF = "#platz-sichern"; const CTA_HREF = "#platz-sichern";
/* ── Shared atoms ── */ function Btn({ href = CTA_HREF, children, xl = false }: {
href?: string; children: React.ReactNode; xl?: boolean;
function Btn({ href = CTA_HREF, children, xl = false }: { href?: string; children: React.ReactNode; xl?: boolean }) { }) {
return ( return (
<a <a href={href} className={`mc-btn inline-block text-center uppercase tracking-wide ${
href={href} xl ? "px-12 py-5 text-xl md:text-2xl" : "px-8 py-3.5 text-base"
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} {children}
</a> </a>
); );
} }
function Badge({ children }: { children: React.ReactNode }) { function Pill({ children }: { children: React.ReactNode }) {
return ( return (
<span className="inline-block text-xs font-bold uppercase tracking-widest bg-blue-600 text-white rounded px-3 py-1 mb-3"> <span className="inline-flex items-center gap-2 bg-indigo-50 text-indigo-700 text-xs font-bold uppercase tracking-widest rounded-full px-4 py-2 border border-indigo-100">
<span className="w-2 h-2 rounded-full bg-indigo-500 animate-pulse" />
{children} {children}
</span> </span>
); );
} }
/* ── Icon tile (used in "Why you'll love" and "Nach 8 Wochen") ── */ function IconCard({ icon, title, sub }: { icon: string; title: string; sub: string }) {
function IconTile({ icon, title, text }: { icon: string; title: string; text?: string }) {
return ( 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="mc-card p-6 flex flex-col items-center text-center gap-3" style={{ borderTop: "3px solid", borderImageSlice: 1, borderImageSource: "linear-gradient(90deg,#6366f1,#8b5cf6)" }}>
<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"> <div className="w-14 h-14 rounded-2xl bg-gradient-to-br from-indigo-500 to-violet-500 flex items-center justify-center text-2xl shadow-lg">
{icon} {icon}
</div> </div>
<p className="font-bold text-white text-sm leading-snug">{title}</p> <p className="font-bold text-slate-900 text-sm leading-snug">{title}</p>
{text && <p className="text-slate-400 text-xs leading-relaxed">{text}</p>} <p className="text-slate-500 text-xs leading-relaxed">{sub}</p>
</div> </div>
); );
} }
/* ── Module thumbnail card ── */ function ModuleCard({ week, expert, title, body, vorlagen, result }: {
function ModuleCard({
week, expert, title, body, vorlagen, result,
}: {
week: string; expert?: string; title: string; body: string; vorlagen: string; result: string; week: string; expert?: string; title: string; body: string; vorlagen: string; result: string;
}) { }) {
return ( return (
<div className="rounded-xl overflow-hidden border border-slate-700 bg-slate-800 flex flex-col"> <div className="mc-card overflow-hidden flex flex-col">
{/* Thumbnail area */} {/* Thumbnail */}
<div className="relative w-full aspect-video bg-slate-900 flex items-center justify-center border-b border-slate-700"> <div className="relative w-full aspect-video bg-slate-100 flex items-center justify-center border-b border-slate-100">
<div className="absolute inset-0 bg-gradient-to-br from-blue-900/30 to-purple-900/30" /> <div className="absolute inset-0 bg-gradient-to-br from-indigo-50 to-violet-50" />
<div className="relative flex flex-col items-center gap-2 text-slate-500"> <div className="relative flex flex-col items-center gap-2 text-slate-400">
<svg className="w-12 h-12 opacity-40" fill="none" viewBox="0 0 24 24" stroke="currentColor"> <svg className="w-10 h-10 opacity-30" 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" /> <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> </svg>
<span className="text-xs uppercase tracking-widest opacity-50">Video</span> <span className="text-xs uppercase tracking-widest opacity-50">Video</span>
</div> </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"> <span className="absolute top-3 left-3 bg-gradient-to-r from-indigo-500 to-violet-500 text-white text-xs font-bold px-2 py-1 rounded-md uppercase tracking-wide">
{week} {week}
</span> </span>
{expert && ( {expert && (
<span className="absolute top-3 right-3 text-xs bg-purple-700 text-white px-2 py-1 rounded"> <span className="absolute top-3 right-3 bg-white/80 text-indigo-700 text-xs font-semibold px-2 py-1 rounded-md border border-indigo-100">
{expert} {expert}
</span> </span>
)} )}
</div> </div>
{/* Text */} {/* Content */}
<div className="p-5 flex flex-col gap-3 flex-1"> <div className="p-5 flex flex-col gap-3 flex-1">
<h4 className="font-bold text-white text-sm leading-snug">{title}</h4> <h4 className="font-bold text-slate-900 text-sm leading-snug">{title}</h4>
<p className="text-slate-400 text-xs leading-relaxed">{body}</p> <p className="text-slate-500 text-xs leading-relaxed flex-1">{body}</p>
<p className="text-xs text-blue-400 italic border-t border-slate-700 pt-3">{vorlagen}</p> <p className="text-xs text-indigo-600 italic border-t border-slate-100 pt-3">{vorlagen}</p>
<p className="text-xs font-semibold text-green-400 mt-auto">✓ {result}</p> <p className="text-xs font-semibold text-emerald-600">✓ {result}</p>
</div> </div>
</div> </div>
); );
} }
/* ═══════════════════════════════════════════════════
PAGE
═══════════════════════════════════════════════════ */
export default function Home() { export default function Home() {
return ( return (
<main className="bg-[#0B0F1A] text-slate-100"> <div className="min-h-screen">
{/* ── NAV ── */} {/* ── NAV ── */}
<nav className="sticky top-0 z-50 bg-[#0B0F1A]/95 backdrop-blur border-b border-slate-800"> <nav className="mc-nav-bg sticky top-0 z-50">
<div className="max-w-6xl mx-auto px-4 py-3 flex justify-between items-center"> <div className="max-w-6xl mx-auto px-6 py-4 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"> <span className="font-extrabold text-xl text-white tracking-tight">
Market Compass Market <span className="bg-gradient-to-r from-indigo-400 to-violet-400 bg-clip-text text-transparent">Compass</span>
</span> </span>
<Btn>Meinen Platz sichern →</Btn> <Btn>Meinen Platz sichern →</Btn>
</div> </div>
</nav> </nav>
{/* ══════════════════════════════════════════ {/* ══════════════════════════════════════════
S1 — HERO S1 — HERO
Brunson: Headline · Subline · CTA — das wars
══════════════════════════════════════════ */} ══════════════════════════════════════════ */}
<section className="relative overflow-hidden bg-[#0B0F1A] pt-20 pb-16"> <section className="py-24 lg:py-32 text-center relative overflow-hidden">
{/* Radial glow */} <div className="absolute inset-0" style={{ background: "radial-gradient(ellipse 80% 60% at 50% 0%, rgba(99,102,241,0.08) 0%, transparent 70%)" }} />
<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-6 space-y-7">
<Pill>Online Gruppencoaching · Pilotprogramm · Start 1. Juli 2027</Pill>
<div className="relative max-w-4xl mx-auto px-4 text-center space-y-7"> <h1 className="text-4xl md:text-5xl lg:text-6xl font-extrabold text-slate-900 leading-[1.1] tracking-tight">
<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{" "} In 8 Wochen zu deinem eigenen{" "}
<span className="bg-gradient-to-r from-blue-400 to-purple-400 bg-clip-text text-transparent"> <span className="bg-gradient-to-r from-indigo-600 to-violet-600 bg-clip-text text-transparent">
Kundengewinnungs-System Kundengewinnungs-System
</span> </span>{" "}
— speziell für Selbstständige
</h1> </h1>
<p className="text-lg md:text-xl text-blue-300 font-semibold max-w-2xl mx-auto"> <p className="text-xl md:text-2xl text-slate-600 max-w-2xl mx-auto">
Speziell für Selbstständige — mit Katja Pestereva von Market Compass<br />
+ 4 Experten aus Vertrieb, Social Media &amp; 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. Dein Wissen ist da. Jetzt bekommt es die Struktur die Kunden bringt.
</p> </p>
<div className="flex flex-col items-center gap-3"> <div className="flex flex-col items-center gap-4">
<Btn xl>Meinen Platz sichern →</Btn> <Btn xl>Meinen Platz sichern →</Btn>
<p className="text-sm text-slate-400"> <p className="text-sm text-slate-500">
Exklusive Kleingruppe — maximal 10 Plätze. Nur noch 8 frei.<br /> Exklusive Kleingruppe · Maximal 10 Plätze · Nur noch 8 frei
Du entscheidest nach unserem ersten Gespräch.
</p> </p>
</div> </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 &amp; Video</p>
</div>
</div>
</div> </div>
</section> </section>
{/* ══════════════════════════════════════════ {/* ══════════════════════════════════════════
VIDEO PLACEHOLDER VIDEO — direkt unter dem Hero
══════════════════════════════════════════ */} ══════════════════════════════════════════ */}
<section className="py-10 bg-[#0B0F1A]"> <section className="pb-20">
<div className="max-w-3xl mx-auto px-4"> <div className="max-w-3xl mx-auto px-6">
<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="mc-card overflow-hidden shadow-2xl shadow-indigo-100">
<div className="absolute inset-0 bg-gradient-to-br from-blue-900/20 to-purple-900/20" /> <div className="relative w-full aspect-video bg-slate-50 flex items-center justify-center">
{/* Silhouette */} <div className="absolute inset-0 bg-gradient-to-br from-indigo-50 to-violet-50" />
<div className="absolute inset-0 flex flex-col items-center justify-center gap-4"> {/* Katja Foto als Video-Preview */}
<div className="w-24 h-24 rounded-full bg-slate-700 flex items-center justify-center"> <div className="absolute inset-0 overflow-hidden">
<svg className="w-14 h-14 text-slate-500" fill="currentColor" viewBox="0 0 24 24"> <Image
<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" /> src="/katja/katja-1.jpg"
</svg> alt="Katja Pestereva — Market Compass"
fill
className="object-cover object-top opacity-30"
sizes="(max-width: 768px) 100vw, 896px"
/>
</div> </div>
{/* Play button */} <div className="relative flex flex-col items-center gap-4">
<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"> <div className="w-20 h-20 rounded-full mc-btn flex items-center justify-center shadow-2xl cursor-pointer hover:scale-110 transition-transform">
<svg className="w-7 h-7 text-white ml-1" fill="currentColor" viewBox="0 0 24 24"> <svg className="w-8 h-8 text-white ml-1" fill="currentColor" viewBox="0 0 24 24">
<path d="M8 5v14l11-7z" /> <path d="M8 5v14l11-7z" />
</svg> </svg>
</div>
<p className="text-slate-600 text-sm font-medium bg-white/80 backdrop-blur px-4 py-2 rounded-full">
Katja erklärt das Programm — Video folgt
</p>
</div> </div>
<p className="text-slate-400 text-sm font-medium">Video: Katja erklärt das Programm</p>
</div> </div>
</div> </div>
</div> </div>
</section> </section>
{/* ══════════════════════════════════════════ {/* ══════════════════════════════════════════
S2 — WHY YOU'LL LOVE THIS S2 — WHY YOU'LL LOVE THIS
4 Icon-Kacheln: Format & Rahmen 4 Icon-Kacheln: Format & Zahlen
══════════════════════════════════════════ */} ══════════════════════════════════════════ */}
<section className="py-16 bg-slate-900/60"> <section className="py-20 bg-white">
<div className="max-w-5xl mx-auto px-4"> <div className="max-w-5xl mx-auto px-6">
<div className="text-center mb-10"> <div className="text-center mb-12">
<Badge>Das Programm</Badge> <Pill>Das Programm auf einen Blick</Pill>
<h2 className="text-2xl md:text-3xl font-extrabold text-white">Was dich erwartet</h2> <h2 className="mt-4 text-3xl md:text-4xl font-extrabold text-slate-900">Was dich erwartet</h2>
</div> </div>
<div className="grid grid-cols-2 md:grid-cols-4 gap-5"> <div className="grid grid-cols-2 md:grid-cols-4 gap-6">
<IconTile icon="📅" title="8 Wochen" text="Schritt für Schritt aufgebaut" /> <IconCard icon="📅" title="8 Wochen" sub="Schritt für Schritt aufgebaut — Woche für Woche" />
<IconTile icon="🎓" title="5 Experten" text="An deiner Seite" /> <IconCard icon="🎓" title="5 Experten" sub="An deiner Seite — aus Vertrieb, Social Media & Video" />
<IconTile icon="👥" title="10 Plätze" text="Exklusive Kleingruppe" /> <IconCard icon="👥" title="10 Plätze" sub="Exklusive Kleingruppe — maximale Aufmerksamkeit" />
<IconTile icon="📋" title="25+ Vorlagen" text="Sofort einsetzbar" /> <IconCard icon="📋" title="25+ Vorlagen" sub="Praxis-Vorlagen die du sofort einsetzen kannst" />
</div> </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"> <div className="mt-8 mc-card p-5 text-center text-slate-600 text-sm">
<strong className="text-white">Jede Woche:</strong> Workshop (90 Min.) · Tägliche Begleitung in der Messenger-Community · Alle Aufzeichnungen bleiben abrufbar <strong className="text-slate-900">Jede Woche:</strong> Workshop (90 Min.) · Tägliche Begleitung in der Messenger-Community · Alle Aufzeichnungen bleiben abrufbar
</div> </div>
</div> </div>
</section> </section>
{/* ══════════════════════════════════════════ {/* ══════════════════════════════════════════
S3 — DAS IST KEIN KURS S3 — DAS IST KEIN KURS
══════════════════════════════════════════ */} ══════════════════════════════════════════ */}
<section className="py-16"> <section className="py-20">
<div className="max-w-3xl mx-auto px-4 space-y-5"> <div className="max-w-3xl mx-auto px-6 space-y-6">
<Badge>Kein Kurs. Ein System.</Badge> <Pill>Kein Kurs. Ein System.</Pill>
<h2 className="text-2xl md:text-3xl font-extrabold text-white">Das ist kein weiterer Kurs.</h2> <h2 className="text-3xl md:text-4xl font-extrabold text-slate-900">Das ist kein weiterer Kurs.</h2>
<p className="text-slate-300 leading-relaxed"> <p className="text-slate-600 leading-relaxed text-lg">
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. 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>
<p className="text-slate-300 leading-relaxed"> <p className="text-slate-600 leading-relaxed text-lg">
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. Das <strong className="text-slate-900">8-Wochen Kundengewinnungs-System</strong> macht genau das: Marketing, Vertrieb und Social Media — in einem System, das Woche für Woche aufgebaut wird.
</p> </p>
<p className="text-blue-300 font-semibold"> <p className="text-indigo-700 font-semibold text-lg leading-relaxed">
Du baust kein neues Wissen auf. Du nimmst alles was du hast — und bringst es in eine Struktur, die planbar die richtigen Kunden anzieht. 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> </p>
</div> </div>
</section> </section>
{/* ══════════════════════════════════════════ {/* ══════════════════════════════════════════
S3b — NACH 8 WOCHEN NIMMST DU MIT CTA STRIP — dark
Icon-Kacheln 2×4
══════════════════════════════════════════ */} ══════════════════════════════════════════ */}
<section className="py-16 bg-slate-900/60"> <section className="mc-dark-bg py-16 text-center">
<div className="max-w-5xl mx-auto px-4"> <div className="max-w-2xl mx-auto px-6 space-y-5">
<div className="text-center mb-10"> <h2 className="text-2xl md:text-3xl font-extrabold text-white">
<Badge>Deine Ergebnisse</Badge> Nur noch <span className="bg-gradient-to-r from-indigo-400 to-violet-400 bg-clip-text text-transparent">8 Plätze</span> verfügbar.
<h2 className="text-2xl md:text-3xl font-extrabold text-white">Nach 8 Wochen nimmst du mit:</h2> </h2>
<p className="text-slate-400">Start: 1. Juli 2027 · Pilotpreis: 500 € (statt 3.000 €)</p>
<Btn xl>Meinen Platz sichern →</Btn>
</div>
</section>
{/* ══════════════════════════════════════════
S3b — NACH 8 WOCHEN NIMMST DU MIT
2×4 Icon-Kacheln
══════════════════════════════════════════ */}
<section className="py-20 bg-white">
<div className="max-w-5xl mx-auto px-6">
<div className="text-center mb-12">
<Pill>Deine Ergebnisse</Pill>
<h2 className="mt-4 text-3xl md:text-4xl font-extrabold text-slate-900">Nach 8 Wochen nimmst du mit:</h2>
</div> </div>
<div className="grid grid-cols-2 md:grid-cols-4 gap-5"> <div className="grid grid-cols-2 md:grid-cols-4 gap-5">
<IconTile icon="🎯" title="Klare Wunschkunden-Persona" text="+ vollständiger Marketing-Audit" /> <IconCard icon="🎯" title="Klare Wunschkunden-Persona" sub="+ vollständiger Marketing-Audit" />
<IconTile icon="💡" title="Dein Angebot auf den Punkt" text="Positionierung in einem Satz" /> <IconCard icon="💡" title="Angebot auf den Punkt" sub="Positionierung in einem Satz — für alle Kanäle" />
<IconTile icon="📄" title="Deine Verkaufsseite" text="Vollständige Struktur — fertig zum Umsetzen" /> <IconCard icon="📄" title="Deine Verkaufsseite" sub="Vollständige Struktur — fertig zum Umsetzen" />
<IconTile icon="🗓️" title="90-Tage-Marketingplan" text="+ 2 fokussierte Kanäle entschieden" /> <IconCard icon="🗓️" title="90-Tage-Marketingplan" sub="+ 2 fokussierte Kanäle entschieden" />
<IconTile icon="📲" title="Content-Plan für 4 Wochen" text="Was, wann und warum du postest" /> <IconCard icon="📲" title="Content-Plan 4 Wochen" sub="Was, wann und warum du postest" />
<IconTile icon="🎬" title="Social Media Verkaufsstrategie" text="+ professionelles Video-Setup" /> <IconCard icon="🎬" title="Social Media Verkauf" sub="+ professionelles Video-Setup mit dem Handy" />
<IconTile icon="🤝" title="Dein Verkaufsskript" text="Für Direktansprache und Netzwerk" /> <IconCard icon="🤝" title="Dein Verkaufsskript" sub="Für Direktansprache und Netzwerkveranstaltungen" />
<IconTile icon="🔍" title="Google Business optimiert" text="+ SEO-Grundlagen für deine Website" /> <IconCard icon="🔍" title="Google Business optimiert" sub="+ SEO-Grundlagen für deine Website" />
</div> </div>
</div> </div>
</section> </section>
{/* ══════════════════════════════════════════ {/* ══════════════════════════════════════════
S4 — WAS DU IN 8 WOCHEN BAUST (Grid) S4 — WAS DU BAUST (Content Grid)
══════════════════════════════════════════ */} ══════════════════════════════════════════ */}
<section className="py-16"> <section className="py-20">
<div className="max-w-5xl mx-auto px-4"> <div className="max-w-5xl mx-auto px-6">
<div className="text-center mb-10"> <div className="text-center mb-12">
<Badge>Komplettpaket</Badge> <Pill>Komplettpaket</Pill>
<h2 className="text-2xl md:text-3xl font-extrabold text-white">Was du in 8 Wochen baust — und mit nach Hause nimmst</h2> <h2 className="mt-4 text-3xl md:text-4xl font-extrabold text-slate-900">Was du in 8 Wochen baust — und mit nach Hause nimmst</h2>
</div> </div>
<div className="grid sm:grid-cols-2 lg:grid-cols-3 gap-4"> <div className="grid sm:grid-cols-2 lg:grid-cols-3 gap-4">
{[ {[
@ -248,15 +240,15 @@ export default function Home() {
{ icon: "📄", text: "Die komplette Struktur für deine Verkaufsseite — mit Feedback zur Umsetzung" }, { 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: "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 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 4-Wochen Content-Plan + Themen die zeigen wofür du stehst — für alle Plattformen" },
{ icon: "🚀", text: "Deinen Launch-Plan — wie du dein Angebot aktiv über Social Media in den Markt bringst" }, { 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: "Video-Setup erklärt — professionelle Videos mit dem Handy" },
{ icon: "🤝", text: "Dein persönliches Verkaufsskript für Direktansprache und Netzwerk" }, { icon: "🤝", text: "Dein persönliches Verkaufsskript für Direktansprache und Netzwerk" },
{ icon: "🔍", text: "Dein Google Business Profil optimiert + SEO-Grundlagen für deine Website" }, { icon: "🔍", text: "Dein Google Business Profil optimiert + SEO-Grundlagen für deine Website" },
].map(({ icon, text }, i) => ( ].map(({ icon, text }, i) => (
<div key={i} className="flex items-start gap-3 rounded-xl bg-slate-800 border border-slate-700 p-4"> <div key={i} className="mc-card p-4 flex items-start gap-3">
<span className="text-xl flex-shrink-0 mt-0.5">{icon}</span> <span className="text-lg flex-shrink-0 mt-0.5">{icon}</span>
<p className="text-slate-300 text-sm leading-relaxed">{text}</p> <p className="text-slate-600 text-sm leading-relaxed">{text}</p>
</div> </div>
))} ))}
</div> </div>
@ -264,56 +256,155 @@ export default function Home() {
</section> </section>
{/* ══════════════════════════════════════════ {/* ══════════════════════════════════════════
MEET THE COACH MODUL 1 — Thumbnail Cards
Brunson-Style: Großes Foto + Bio
══════════════════════════════════════════ */} ══════════════════════════════════════════ */}
<section className="py-20 bg-slate-900/60"> <section className="py-20 bg-white">
<div className="max-w-5xl mx-auto px-4"> <div className="max-w-5xl mx-auto px-6 space-y-5">
<div className="text-center mb-12"> <Pill>Modul 1 — Wochen 1 &amp; 2</Pill>
<Badge>Deine Begleitung</Badge> <h2 className="text-3xl md:text-4xl font-extrabold text-slate-900">Wunschkunde, Angebot, Positionierung — alles klar auf den Punkt.</h2>
<h2 className="text-2xl md:text-3xl font-extrabold text-white">Meet your Coach</h2> <div className="grid md:grid-cols-2 gap-6 pt-4">
<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 — konkret, nicht allgemein." />
<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 — erklärt in einem Satz." />
</div> </div>
<div className="grid md:grid-cols-2 gap-10 items-center"> </div>
{/* Foto-Placeholder */} </section>
<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"> MODUL 2
<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" /> <section className="py-20">
</svg> <div className="max-w-5xl mx-auto px-6 space-y-5">
<p className="text-xs uppercase tracking-widest opacity-40">Foto Katja Pestereva</p> <Pill>Modul 2 — Wochen 3 &amp; 4</Pill>
<h2 className="text-3xl md:text-4xl font-extrabold text-slate-900">Dein System steht.</h2>
<div className="grid md:grid-cols-2 gap-6 pt-4">
<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="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 90-Tage-Plan begonnen." />
</div>
</div>
</section>
{/* ══════════════════════════════════════════
MODUL 3
══════════════════════════════════════════ */}
<section className="py-20 bg-white">
<div className="max-w-5xl mx-auto px-6 space-y-5">
<Pill>Modul 3 — Wochen 5–8</Pill>
<h2 className="text-3xl md:text-4xl font-extrabold text-slate-900">Sichtbarkeit. Anfragen. Und du weißt wie es weitergeht.</h2>
<div className="grid md:grid-cols-2 gap-6 pt-4">
<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 ab dieser Woche genau: was du postest, wann, und warum."
vorlagen="Content-Säulen-Template · 4-Wochen-Redaktionsplan · 10 bewährte Hook-Formeln"
result="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 für Social Media Verkauf + professionell auf Video." />
<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 konkretem Plan für deine nächsten Kontakte."
vorlagen="Persönliches Verkaufsskript · Follow-up-Template · Event-Recherche-Guide"
result="Dein Verkaufsskript für die Direktansprache — 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. 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." />
</div>
</div>
</section>
{/* ══════════════════════════════════════════
VORHER / NACHHER
══════════════════════════════════════════ */}
<section className="py-20">
<div className="max-w-4xl mx-auto px-6">
<div className="text-center mb-12">
<Pill>Transformation</Pill>
<h2 className="mt-4 text-3xl md:text-4xl font-extrabold text-slate-900">Vorher. Nachher.</h2>
</div>
<div className="space-y-3">
{[
["\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="mc-card grid grid-cols-2 overflow-hidden">
<div className="p-4 text-slate-500 italic text-sm border-r border-slate-100">{before}</div>
<div className="p-4 text-indigo-700 font-semibold text-sm">{after}</div>
</div> </div>
{/* Name badge */} ))}
<div className="absolute bottom-0 inset-x-0 bg-gradient-to-t from-black/80 to-transparent p-6"> </div>
<p className="font-extrabold text-white text-xl">Katja Pestereva</p> <p className="mt-8 text-center text-indigo-700 font-semibold text-xl">
<p className="text-blue-300 text-sm">Market Compass · 15+ Jahre Erfahrung</p> Dein Wissen war schon da. Jetzt hat es eine Struktur die Kunden bringt.
</p>
</div>
</section>
{/* ══════════════════════════════════════════
MEET THE COACH — Brunson-Style
Echtes Foto links + Bio rechts
══════════════════════════════════════════ */}
<section className="py-20 bg-white">
<div className="max-w-5xl mx-auto px-6">
<div className="text-center mb-12">
<Pill>Deine Begleitung</Pill>
<h2 className="mt-4 text-3xl md:text-4xl font-extrabold text-slate-900">Meet your Coach</h2>
</div>
<div className="mc-card overflow-hidden grid md:grid-cols-2 gap-0">
{/* Foto */}
<div className="relative min-h-[480px] md:min-h-[560px] bg-slate-100">
<Image
src="/katja/katja-1.jpg"
alt="Katja Pestereva — Market Compass"
fill
className="object-cover object-top"
sizes="(max-width: 768px) 100vw, 50vw"
priority
/>
{/* Name-Overlay unten */}
<div className="absolute bottom-0 inset-x-0 bg-gradient-to-t from-black/60 to-transparent p-6">
<p className="font-extrabold text-white text-lg">Katja Pestereva</p>
<p className="text-indigo-300 text-sm">Market Compass · 15+ Jahre Erfahrung</p>
</div> </div>
</div> </div>
{/* Bio */} {/* Bio */}
<div className="space-y-5"> <div className="p-8 md:p-10 flex flex-col justify-center space-y-5">
<h3 className="text-xl font-extrabold text-white leading-snug"> <h3 className="text-2xl font-extrabold text-slate-900 leading-snug">
Ich baue aus dem was du hast — ein System das planbar die richtigen Kunden bringt. Ich baue aus dem was du hast — ein System das planbar Kunden bringt.
</h3> </h3>
<p className="text-slate-300 leading-relaxed"> <p className="text-slate-600 leading-relaxed">
Nicht von vorne anfangen. Nicht noch einen Kurs. Sondern das was schon da ist in eine Struktur bringen die funktioniert. Nicht von vorne anfangen. Nicht noch einen Kurs. Sondern das was schon da ist in eine Struktur bringen die funktioniert.
</p> </p>
<p className="text-slate-300 leading-relaxed"> <p className="text-slate-600 leading-relaxed">
Dafür habe ich die besten Experten aus den Bereichen zusammengestellt, die Selbstständige am meisten brauchen: Vertrieb, Social Media und Video. Dafür habe ich die besten Experten aus den Bereichen zusammengestellt die Selbstständige am meisten brauchen: Vertrieb, Social Media und Video. Damit du nicht nur weißt was zu tun ist — sondern wie es in deinem Business konkret aussieht.
</p> </p>
<div className="border-t border-slate-700 pt-5 space-y-3"> <div className="border-t border-slate-100 pt-5 space-y-3">
<p className="text-sm font-bold text-white uppercase tracking-wide">Dein Expertenteam:</p> <p className="text-xs font-bold text-slate-400 uppercase tracking-widest">Dein Expertenteam:</p>
{[ {[
{ name: "Katja Pestereva", role: "Marketing-System, Positionierung, SEO", weeks: "Wochen 1, 2, 3, 4, 8" }, { name: "Katja Pestereva", role: "Marketing-System, Positionierung, SEO", weeks: "Wo. 1, 2, 3, 4, 8" },
{ name: "Can Turkdogan", role: "Content-Strategie & Social Media", weeks: "Woche 5" }, { name: "Can Turkdogan", role: "Content-Strategie & Social Media", weeks: "Woche 5" },
{ name: "Stefan & Philipp · Onlinewerbevideo", role: "Professionelles Filmen & Video-Setup", weeks: "Woche 6" }, { name: "Stefan & Philipp · OWV", role: "Professionelles Filmen & Video", weeks: "Woche 6" },
{ name: "Manuela Ludewig", role: "Vertrieb & Direktansprache", weeks: "Woche 7" }, { name: "Manuela Ludewig", role: "Vertrieb & Direktansprache", weeks: "Woche 7" },
].map(({ name, role, weeks }) => ( ].map(({ name, role, weeks }) => (
<div key={name} className="flex items-start gap-3"> <div key={name} className="flex items-start gap-2 text-sm">
<div className="w-2 h-2 rounded-full bg-blue-500 flex-shrink-0 mt-1.5" /> <div className="w-1.5 h-1.5 rounded-full bg-indigo-500 flex-shrink-0 mt-2" />
<div> <div>
<span className="font-semibold text-blue-300 text-sm">{name}</span> <span className="font-semibold text-indigo-700">{name}</span>
<span className="text-slate-400 text-sm"> — {role}</span> <span className="text-slate-500"> — {role}</span>
<span className="text-slate-500 text-xs ml-2">({weeks})</span> <span className="text-slate-400 text-xs ml-1">({weeks})</span>
</div> </div>
</div> </div>
))} ))}
@ -324,157 +415,23 @@ export default function Home() {
</section> </section>
{/* ══════════════════════════════════════════ {/* ══════════════════════════════════════════
S6–S8 — MODULE (Thumbnail Cards) TESTIMONIALS
Modul 1: Wochen 1–2
══════════════════════════════════════════ */} ══════════════════════════════════════════ */}
<section className="py-16"> <section className="py-20">
<div className="max-w-5xl mx-auto px-4 space-y-14"> <div className="max-w-5xl mx-auto px-6">
<div className="text-center mb-12">
{/* Modul 1 */} <Pill>Erfahrungen</Pill>
<div> <h2 className="mt-4 text-3xl md:text-4xl font-extrabold text-slate-900">Was Selbstständige über die Zusammenarbeit mit Katja sagen</h2>
<div className="text-center mb-8"> <p className="mt-2 text-slate-500 text-sm italic">Das Programm startet Juli 2027. Diese Erfahrungen kommen aus der direkten Zusammenarbeit mit Katja.</p>
<Badge>Modul 1 — Wochen 1 &amp; 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 &amp; 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>
<div className="grid md:grid-cols-3 gap-6"> <div className="grid md:grid-cols-3 gap-6">
{[1, 2, 3].map((i) => ( {[1, 2, 3].map((i) => (
<div key={i} className="rounded-xl bg-slate-800 border border-slate-700 p-6 space-y-3"> <div key={i} className="mc-card p-6 space-y-4">
<div className="flex gap-1 text-yellow-400">{"★★★★★"}</div> <div className="text-yellow-400 text-lg tracking-wider">★★★★★</div>
<p className="text-slate-400 italic text-sm">[Google-Bewertung {i} einfügen]</p> <p className="text-slate-500 italic text-sm leading-relaxed">[Google-Bewertung {i} einfügen]</p>
<div className="flex items-center gap-3 border-t border-slate-700 pt-3"> <div className="flex items-center gap-3 border-t border-slate-100 pt-4">
<div className="w-8 h-8 rounded-full bg-gradient-to-br from-blue-500 to-purple-600 flex-shrink-0" /> <div className="w-9 h-9 rounded-full bg-gradient-to-br from-indigo-400 to-violet-400 flex-shrink-0" />
<p className="text-slate-500 text-xs">— [Name, Berufsfeld]</p> <p className="text-slate-400 text-xs">— [Name, Berufsfeld]</p>
</div> </div>
</div> </div>
))} ))}
@ -483,36 +440,36 @@ export default function Home() {
</section> </section>
{/* ══════════════════════════════════════════ {/* ══════════════════════════════════════════
S11 — BONUS BONUS
══════════════════════════════════════════ */} ══════════════════════════════════════════ */}
<section className="py-16 bg-slate-900/60"> <section className="py-20 bg-white">
<div className="max-w-5xl mx-auto px-4"> <div className="max-w-5xl mx-auto px-6">
<div className="text-center mb-10"> <div className="text-center mb-12">
<Badge>Bonus-Paket</Badge> <Pill>Bonus-Paket</Pill>
<h2 className="text-2xl md:text-3xl font-extrabold text-white">Und du bist während und nach dem Programm nie allein.</h2> <h2 className="mt-4 text-3xl md:text-4xl font-extrabold text-slate-900">Und du bist während und nach dem Programm nie allein.</h2>
</div> </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"> <div className="mc-card p-6 mb-8 bg-gradient-to-r from-indigo-50 to-violet-50 border-indigo-100 text-center">
<p className="text-slate-200 leading-relaxed"> <p className="text-slate-700 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. <strong>Die gesamten 8 Wochen:</strong> In der Messenger-Community beantwortet Katja täglich Fragen. Du kannst jederzeit posten — Feedback kommt. 8 Wochen tägliche Begleitung.
</p> </p>
</div> </div>
<div className="grid sm:grid-cols-2 lg:grid-cols-3 gap-4"> <div className="grid sm:grid-cols-2 lg:grid-cols-3 gap-5">
{[ {[
{ 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: 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: 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: 3, icon: "🎬", title: "Professionell filmen — mit dem Handy", desc: "Kein teures Equipment. 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: 4, icon: "🗺️", title: "Welche Plattform passt zu dir?", desc: "Kein Rätselraten — 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: 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 €" }, { 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 }) => ( ].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 key={n} className="mc-card p-5 space-y-2">
<div className="flex items-center gap-2"> <div className="flex items-center justify-between">
<span className="text-xl">{icon}</span> <span className="text-xl">{icon}</span>
<span className="text-xs font-bold text-blue-400 uppercase">Bonus {n}</span> <span className="text-xs font-bold text-emerald-600 bg-emerald-50 border border-emerald-200 rounded-full px-2 py-0.5">Wert: {val}</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> </div>
<p className="font-semibold text-white text-sm">{title}</p> <p className="text-xs font-bold text-indigo-600 uppercase tracking-wide">Bonus {n}</p>
<p className="text-slate-400 text-xs">{desc}</p> <p className="font-bold text-slate-900 text-sm">{title}</p>
<p className="text-slate-500 text-xs leading-relaxed">{desc}</p>
</div> </div>
))} ))}
</div> </div>
@ -520,15 +477,15 @@ export default function Home() {
</section> </section>
{/* ══════════════════════════════════════════ {/* ══════════════════════════════════════════
S12 — VALUE STACK + PREIS VALUE STACK + PREIS
══════════════════════════════════════════ */} ══════════════════════════════════════════ */}
<section id="platz-sichern" className="py-20"> <section id="platz-sichern" className="py-20">
<div className="max-w-2xl mx-auto px-4"> <div className="max-w-2xl mx-auto px-6">
<div className="text-center mb-10"> <div className="text-center mb-10">
<Badge>Dein Investment</Badge> <Pill>Dein Investment</Pill>
<h2 className="text-2xl md:text-3xl font-extrabold text-white">Was du bekommst — und was es wert ist.</h2> <h2 className="mt-4 text-3xl md:text-4xl font-extrabold text-slate-900">Was du bekommst — und was es wert ist.</h2>
</div> </div>
<div className="rounded-2xl overflow-hidden border border-slate-700"> <div className="mc-card overflow-hidden">
<table className="w-full text-sm"> <table className="w-full text-sm">
<tbody> <tbody>
{[ {[
@ -540,78 +497,76 @@ export default function Home() {
["Bonus 5: 1 Monat Begleitung nach dem Programm", "97 €"], ["Bonus 5: 1 Monat Begleitung nach dem Programm", "97 €"],
["Bonus 6: Abschluss-Netzwerkevent (geplant, Pilot exklusiv)", "197 €"], ["Bonus 6: Abschluss-Netzwerkevent (geplant, Pilot exklusiv)", "197 €"],
].map(([label, val], i) => ( ].map(([label, val], i) => (
<tr key={i} className={`border-b border-slate-700 ${i % 2 === 0 ? "bg-slate-900/50" : "bg-slate-800/50"}`}> <tr key={i} className={`border-b border-slate-100 ${i % 2 === 0 ? "bg-white" : "bg-slate-50"}`}>
<td className="p-4 text-slate-300">{label}</td> <td className="p-4 text-slate-600">{label}</td>
<td className="p-4 text-right text-slate-300 font-mono whitespace-nowrap">{val}</td> <td className="p-4 text-right text-slate-500 font-mono whitespace-nowrap">{val}</td>
</tr> </tr>
))} ))}
<tr className="bg-gradient-to-r from-blue-900/60 to-purple-900/60 border-t-2 border-blue-500"> <tr style={{ background: "linear-gradient(135deg,#eef2ff,#f5f3ff)" }}>
<td className="p-4 font-extrabold text-white text-base">Gesamtwert</td> <td className="p-4 font-extrabold text-slate-900 text-base">Gesamtwert</td>
<td className="p-4 text-right font-extrabold text-white font-mono text-base">4.432 €</td> <td className="p-4 text-right font-extrabold text-indigo-700 text-base font-mono">4.432 €</td>
</tr> </tr>
</tbody> </tbody>
</table> </table>
</div> </div>
{/* Preis */} <div className="mt-12 text-center space-y-6">
<div className="mt-10 text-center space-y-5"> <p className="text-slate-400 line-through text-sm">Regulär 3.000 €</p>
<p className="text-slate-400 text-sm line-through">Regulär 3.000 €</p> <p className="text-8xl font-extrabold bg-gradient-to-r from-indigo-600 to-violet-600 bg-clip-text text-transparent leading-none">
<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 € 500 €
</p> </p>
<p className="text-xl text-slate-300 font-semibold">gesamt · 2 × 250 € / Monat</p> <p className="text-xl text-slate-700 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"> <div className="mc-card p-6 text-left space-y-2 bg-indigo-50 border-indigo-100">
<strong className="text-white block mb-1">Warum dieser Preis?</strong> <p className="font-bold text-slate-900">Warum dieser Preis?</p>
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. <p className="text-slate-600 text-sm leading-relaxed">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. Du profitierst vom vollen Programm — und das Programm profitiert von deiner ehrlichen Rückmeldung.</p>
</div> </div>
{/* Garantie */} <div className="mc-card p-6 text-left space-y-3 border-emerald-200 bg-emerald-50">
<div className="rounded-xl border border-green-700 bg-green-900/20 p-5 text-left space-y-3 text-sm"> <p className="font-bold text-slate-900 text-base">Mein Versprechen an dich:</p>
<p className="font-extrabold text-white text-base">Mein Versprechen an dich:</p>
<div className="flex items-start gap-3"> <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> <span className="w-5 h-5 rounded-full bg-emerald-500 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> <p className="text-slate-700 text-sm"><strong>14-Tage-Ausstiegsrecht</strong> — nach der ersten Session, ohne Fragen, voller Betrag zurück.</p>
</div> </div>
<div className="flex items-start gap-3"> <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> <span className="w-5 h-5 rounded-full bg-emerald-500 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> <p className="text-slate-700 text-sm"><strong>Kostenlose Verlängerung*</strong> — Ziel nicht erreicht nach 8 Wochen? Kostenlos um 4 Wochen verlängern.</p>
</div> </div>
<p className="text-xs text-slate-500 italic">* Gilt wenn du aktiv teilgenommen und die wöchentlichen Aufgaben umgesetzt hast.</p> <p className="text-xs text-slate-500 italic">* Gilt wenn du aktiv teilgenommen und die wöchentlichen Aufgaben umgesetzt hast.</p>
</div> </div>
<Btn xl>Meinen Platz sichern →</Btn> <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> <p className="text-sm text-slate-500">Maximal 10 Plätze · Start: 1. Juli 2027 · Du entscheidest nach unserem ersten Gespräch.</p>
</div> </div>
</div> </div>
</section> </section>
{/* ══════════════════════════════════════════ {/* ══════════════════════════════════════════
S13 — FAQ FAQ
══════════════════════════════════════════ */} ══════════════════════════════════════════ */}
<section className="py-16 bg-slate-900/60"> <section className="py-20 bg-white">
<div className="max-w-3xl mx-auto px-4"> <div className="max-w-3xl mx-auto px-6">
<div className="text-center mb-10"> <div className="text-center mb-12">
<Badge>FAQ</Badge> <Pill>FAQ</Pill>
<h2 className="text-2xl md:text-3xl font-extrabold text-white">Häufige Fragen</h2> <h2 className="mt-4 text-3xl md:text-4xl font-extrabold text-slate-900">Häufige Fragen</h2>
</div> </div>
<div className="space-y-3"> <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: "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: "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. Dinge die sofort eingesetzt werden können." },
{ 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: "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: "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: "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 und deiner Situation 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: "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: "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 €." }, { 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) => ( ].map(({ q, a }, i) => (
<details key={i} className="group rounded-xl bg-slate-800 border border-slate-700 overflow-hidden"> <details key={i} className="mc-card overflow-hidden group">
<summary className="flex justify-between items-center p-5 cursor-pointer font-semibold text-white list-none"> <summary className="flex justify-between items-center p-5 cursor-pointer font-semibold text-slate-900 list-none">
{q} {q}
<span className="text-blue-400 group-open:rotate-180 transition-transform flex-shrink-0 ml-4">▼</span> <span className="text-indigo-500 group-open:rotate-180 transition-transform flex-shrink-0 ml-4 text-sm">▼</span>
</summary> </summary>
<div className="px-5 pb-5 text-slate-300 text-sm leading-relaxed border-t border-slate-700 pt-4">{a}</div> <div className="px-5 pb-5 text-slate-600 text-sm leading-relaxed border-t border-slate-100 pt-4">{a}</div>
</details> </details>
))} ))}
</div> </div>
@ -619,13 +574,13 @@ export default function Home() {
</section> </section>
{/* ══════════════════════════════════════════ {/* ══════════════════════════════════════════
ABSCHLUSS-CTA ABSCHLUSS-CTA — dark
══════════════════════════════════════════ */} ══════════════════════════════════════════ */}
<section className="py-24 bg-gradient-to-b from-[#0B0F1A] to-slate-950 text-center"> <section className="mc-dark-bg py-24 text-center">
<div className="max-w-2xl mx-auto px-4 space-y-6"> <div className="max-w-2xl mx-auto px-6 space-y-7">
<h2 className="text-3xl md:text-5xl font-extrabold text-white leading-tight"> <h2 className="text-3xl md:text-5xl font-extrabold text-white leading-tight">
Dein Wissen ist da.{" "} Dein Wissen ist da.{" "}
<span className="bg-gradient-to-r from-blue-400 to-purple-400 bg-clip-text text-transparent"> <span className="bg-gradient-to-r from-indigo-400 to-violet-400 bg-clip-text text-transparent">
Jetzt bekommt es die Struktur die Kunden bringt. Jetzt bekommt es die Struktur die Kunden bringt.
</span> </span>
</h2> </h2>
@ -636,10 +591,10 @@ export default function Home() {
</section> </section>
{/* FOOTER */} {/* FOOTER */}
<footer className="border-t border-slate-800 py-6 text-center text-xs text-slate-600"> <footer className="mc-nav-bg py-8 text-center text-slate-400 text-xs">
© 2026 Market Compass · Katja Pestereva © 2026 Market Compass · Katja Pestereva
</footer> </footer>
</main> </div>
); );
} }