fix: MC CI light theme + Brunson-Struktur + echte Fotos
- 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:
parent
7e00be4acb
commit
2939a87806
10 changed files with 392 additions and 414 deletions
BIN
libnspr4_2%3a4.35-1.1build1_amd64.deb
Normal file
BIN
libnspr4_2%3a4.35-1.1build1_amd64.deb
Normal file
Binary file not shown.
BIN
libnss3_2%3a3.98-1ubuntu0.1_amd64.deb
Normal file
BIN
libnss3_2%3a3.98-1ubuntu0.1_amd64.deb
Normal file
Binary file not shown.
BIN
public/katja/katja-1.jpg
Executable file
BIN
public/katja/katja-1.jpg
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 7.5 MiB |
BIN
public/katja/katja-2.jpg
Executable file
BIN
public/katja/katja-2.jpg
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 7.6 MiB |
BIN
public/katja/katja-3.jpg
Executable file
BIN
public/katja/katja-3.jpg
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 8.6 MiB |
BIN
public/katja/katja-4.jpg
Executable file
BIN
public/katja/katja-4.jpg
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 6.4 MiB |
BIN
public/katja/katja-mc.jpg
Executable file
BIN
public/katja/katja-mc.jpg
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 7.6 MiB |
|
|
@ -1,8 +1,8 @@
|
|||
@import "tailwindcss";
|
||||
|
||||
:root {
|
||||
--background: #0F172A;
|
||||
--foreground: #F1F5F9;
|
||||
--background: #f8f7ff;
|
||||
--foreground: #0f172a;
|
||||
}
|
||||
|
||||
@theme inline {
|
||||
|
|
@ -13,7 +13,48 @@
|
|||
}
|
||||
|
||||
body {
|
||||
background: var(--background);
|
||||
background: linear-gradient(160deg, #f5f4ff, #f8f7ff 40%, #f4f7fa);
|
||||
color: var(--foreground);
|
||||
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; }
|
||||
|
|
|
|||
|
|
@ -1,36 +1,18 @@
|
|||
import type { Metadata } from "next";
|
||||
import { Geist, Geist_Mono } from "next/font/google";
|
||||
import { Geist } from "next/font/google";
|
||||
import "./globals.css";
|
||||
|
||||
const geistSans = Geist({
|
||||
variable: "--font-geist-sans",
|
||||
subsets: ["latin"],
|
||||
});
|
||||
|
||||
const geistMono = Geist_Mono({
|
||||
variable: "--font-geist-mono",
|
||||
subsets: ["latin"],
|
||||
});
|
||||
const geist = Geist({ variable: "--font-geist-sans", subsets: ["latin"] });
|
||||
|
||||
export const metadata: Metadata = {
|
||||
title: "Das 8-Wochen Kundengewinnungs-System für Selbstständige | Market Compass",
|
||||
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.",
|
||||
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.",
|
||||
};
|
||||
|
||||
export default function RootLayout({
|
||||
children,
|
||||
}: Readonly<{
|
||||
children: React.ReactNode;
|
||||
}>) {
|
||||
export default function RootLayout({ children }: { children: React.ReactNode }) {
|
||||
return (
|
||||
<html
|
||||
lang="de"
|
||||
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 lang="de" className={`${geist.variable} antialiased`}>
|
||||
<body>{children}</body>
|
||||
</html>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
729
src/app/page.tsx
729
src/app/page.tsx
|
|
@ -1,244 +1,236 @@
|
|||
/* ─────────────────────────────────────────────────────
|
||||
GSO Gruppencoaching — Verkaufsseite
|
||||
Brunson Online Masterclass Funnel Template
|
||||
CI: Market Compass · Blau #3B82F6 · Lila #8B5CF6
|
||||
───────────────────────────────────────────────────── */
|
||||
import Image from "next/image";
|
||||
|
||||
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 (
|
||||
<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"}`}
|
||||
>
|
||||
<a href={href} className={`mc-btn inline-block text-center uppercase tracking-wide ${
|
||||
xl ? "px-12 py-5 text-xl md:text-2xl" : "px-8 py-3.5 text-base"
|
||||
}`}>
|
||||
{children}
|
||||
</a>
|
||||
);
|
||||
}
|
||||
|
||||
function Badge({ children }: { children: React.ReactNode }) {
|
||||
function Pill({ 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">
|
||||
<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}
|
||||
</span>
|
||||
);
|
||||
}
|
||||
|
||||
/* ── Icon tile (used in "Why you'll love" and "Nach 8 Wochen") ── */
|
||||
function IconTile({ icon, title, text }: { icon: string; title: string; text?: string }) {
|
||||
function IconCard({ icon, title, sub }: { icon: string; title: string; sub: 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">
|
||||
<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-2xl bg-gradient-to-br from-indigo-500 to-violet-500 flex items-center justify-center text-2xl shadow-lg">
|
||||
{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>}
|
||||
<p className="font-bold text-slate-900 text-sm leading-snug">{title}</p>
|
||||
<p className="text-slate-500 text-xs leading-relaxed">{sub}</p>
|
||||
</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;
|
||||
}) {
|
||||
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">
|
||||
<div className="mc-card overflow-hidden flex flex-col">
|
||||
{/* Thumbnail */}
|
||||
<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-indigo-50 to-violet-50" />
|
||||
<div className="relative flex flex-col items-center gap-2 text-slate-400">
|
||||
<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" />
|
||||
</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">
|
||||
<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}
|
||||
</span>
|
||||
{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}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
{/* Text */}
|
||||
{/* Content */}
|
||||
<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>
|
||||
<h4 className="font-bold text-slate-900 text-sm leading-snug">{title}</h4>
|
||||
<p className="text-slate-500 text-xs leading-relaxed flex-1">{body}</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-emerald-600">✓ {result}</p>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
/* ═══════════════════════════════════════════════════
|
||||
PAGE
|
||||
═══════════════════════════════════════════════════ */
|
||||
export default function Home() {
|
||||
return (
|
||||
<main className="bg-[#0B0F1A] text-slate-100">
|
||||
<div className="min-h-screen">
|
||||
|
||||
{/* ── 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
|
||||
<nav className="mc-nav-bg sticky top-0 z-50">
|
||||
<div className="max-w-6xl mx-auto px-6 py-4 flex justify-between items-center">
|
||||
<span className="font-extrabold text-xl text-white tracking-tight">
|
||||
Market <span className="bg-gradient-to-r from-indigo-400 to-violet-400 bg-clip-text text-transparent">Compass</span>
|
||||
</span>
|
||||
<Btn>Meinen Platz sichern →</Btn>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
{/* ══════════════════════════════════════════
|
||||
S1 — HERO
|
||||
S1 — HERO
|
||||
Brunson: Headline · Subline · CTA — das wars
|
||||
══════════════════════════════════════════ */}
|
||||
<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)]" />
|
||||
<section className="py-24 lg:py-32 text-center relative overflow-hidden">
|
||||
<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="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">
|
||||
<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">
|
||||
<h1 className="text-4xl md:text-5xl lg:text-6xl font-extrabold text-slate-900 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">
|
||||
<span className="bg-gradient-to-r from-indigo-600 to-violet-600 bg-clip-text text-transparent">
|
||||
Kundengewinnungs-System
|
||||
</span>
|
||||
</span>{" "}
|
||||
— speziell für Selbstständige
|
||||
</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">
|
||||
<p className="text-xl md:text-2xl text-slate-600 max-w-2xl mx-auto">
|
||||
Dein Wissen ist da. Jetzt bekommt es die Struktur die Kunden bringt.
|
||||
</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>
|
||||
<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 className="text-sm text-slate-500">
|
||||
Exklusive Kleingruppe · Maximal 10 Plätze · Nur noch 8 frei
|
||||
</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
|
||||
VIDEO — direkt unter dem Hero
|
||||
══════════════════════════════════════════ */}
|
||||
<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>
|
||||
<section className="pb-20">
|
||||
<div className="max-w-3xl mx-auto px-6">
|
||||
<div className="mc-card overflow-hidden shadow-2xl shadow-indigo-100">
|
||||
<div className="relative w-full aspect-video bg-slate-50 flex items-center justify-center">
|
||||
<div className="absolute inset-0 bg-gradient-to-br from-indigo-50 to-violet-50" />
|
||||
{/* Katja Foto als Video-Preview */}
|
||||
<div className="absolute inset-0 overflow-hidden">
|
||||
<Image
|
||||
src="/katja/katja-1.jpg"
|
||||
alt="Katja Pestereva — Market Compass"
|
||||
fill
|
||||
className="object-cover object-top opacity-30"
|
||||
sizes="(max-width: 768px) 100vw, 896px"
|
||||
/>
|
||||
</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 className="relative flex flex-col items-center gap-4">
|
||||
<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-8 h-8 text-white ml-1" fill="currentColor" viewBox="0 0 24 24">
|
||||
<path d="M8 5v14l11-7z" />
|
||||
</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>
|
||||
<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
|
||||
S2 — WHY YOU'LL LOVE THIS
|
||||
4 Icon-Kacheln: Format & Zahlen
|
||||
══════════════════════════════════════════ */}
|
||||
<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>
|
||||
<section className="py-20 bg-white">
|
||||
<div className="max-w-5xl mx-auto px-6">
|
||||
<div className="text-center mb-12">
|
||||
<Pill>Das Programm auf einen Blick</Pill>
|
||||
<h2 className="mt-4 text-3xl md:text-4xl font-extrabold text-slate-900">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 className="grid grid-cols-2 md:grid-cols-4 gap-6">
|
||||
<IconCard icon="📅" title="8 Wochen" sub="Schritt für Schritt aufgebaut — Woche für Woche" />
|
||||
<IconCard icon="🎓" title="5 Experten" sub="An deiner Seite — aus Vertrieb, Social Media & Video" />
|
||||
<IconCard icon="👥" title="10 Plätze" sub="Exklusive Kleingruppe — maximale Aufmerksamkeit" />
|
||||
<IconCard icon="📋" title="25+ Vorlagen" sub="Praxis-Vorlagen die du sofort einsetzen kannst" />
|
||||
</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 className="mt-8 mc-card p-5 text-center text-slate-600 text-sm">
|
||||
<strong className="text-slate-900">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
|
||||
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">
|
||||
<section className="py-20">
|
||||
<div className="max-w-3xl mx-auto px-6 space-y-6">
|
||||
<Pill>Kein Kurs. Ein System.</Pill>
|
||||
<h2 className="text-3xl md:text-4xl font-extrabold text-slate-900">Das ist kein weiterer Kurs.</h2>
|
||||
<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.
|
||||
</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 className="text-slate-600 leading-relaxed text-lg">
|
||||
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 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.
|
||||
</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* ══════════════════════════════════════════
|
||||
S3b — NACH 8 WOCHEN NIMMST DU MIT
|
||||
Icon-Kacheln 2×4
|
||||
CTA STRIP — dark
|
||||
══════════════════════════════════════════ */}
|
||||
<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>
|
||||
<section className="mc-dark-bg py-16 text-center">
|
||||
<div className="max-w-2xl mx-auto px-6 space-y-5">
|
||||
<h2 className="text-2xl md:text-3xl font-extrabold text-white">
|
||||
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>
|
||||
<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 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" />
|
||||
<IconCard icon="🎯" title="Klare Wunschkunden-Persona" sub="+ vollständiger Marketing-Audit" />
|
||||
<IconCard icon="💡" title="Angebot auf den Punkt" sub="Positionierung in einem Satz — für alle Kanäle" />
|
||||
<IconCard icon="📄" title="Deine Verkaufsseite" sub="Vollständige Struktur — fertig zum Umsetzen" />
|
||||
<IconCard icon="🗓️" title="90-Tage-Marketingplan" sub="+ 2 fokussierte Kanäle entschieden" />
|
||||
<IconCard icon="📲" title="Content-Plan 4 Wochen" sub="Was, wann und warum du postest" />
|
||||
<IconCard icon="🎬" title="Social Media Verkauf" sub="+ professionelles Video-Setup mit dem Handy" />
|
||||
<IconCard icon="🤝" title="Dein Verkaufsskript" sub="Für Direktansprache und Netzwerkveranstaltungen" />
|
||||
<IconCard icon="🔍" title="Google Business optimiert" sub="+ SEO-Grundlagen für deine Website" />
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* ══════════════════════════════════════════
|
||||
S4 — WAS DU IN 8 WOCHEN BAUST (Grid)
|
||||
S4 — WAS DU BAUST (Content 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>
|
||||
<section className="py-20">
|
||||
<div className="max-w-5xl mx-auto px-6">
|
||||
<div className="text-center mb-12">
|
||||
<Pill>Komplettpaket</Pill>
|
||||
<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 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: "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 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: "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 key={i} className="mc-card p-4 flex items-start gap-3">
|
||||
<span className="text-lg flex-shrink-0 mt-0.5">{icon}</span>
|
||||
<p className="text-slate-600 text-sm leading-relaxed">{text}</p>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
|
@ -264,56 +256,155 @@ export default function Home() {
|
|||
</section>
|
||||
|
||||
{/* ══════════════════════════════════════════
|
||||
MEET THE COACH
|
||||
Brunson-Style: Großes Foto + Bio
|
||||
MODUL 1 — Thumbnail Cards
|
||||
══════════════════════════════════════════ */}
|
||||
<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>
|
||||
<section className="py-20 bg-white">
|
||||
<div className="max-w-5xl mx-auto px-6 space-y-5">
|
||||
<Pill>Modul 1 — Wochen 1 & 2</Pill>
|
||||
<h2 className="text-3xl md:text-4xl font-extrabold text-slate-900">Wunschkunde, Angebot, Positionierung — alles klar auf den Punkt.</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 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>
|
||||
</section>
|
||||
|
||||
{/* ══════════════════════════════════════════
|
||||
MODUL 2
|
||||
══════════════════════════════════════════ */}
|
||||
<section className="py-20">
|
||||
<div className="max-w-5xl mx-auto px-6 space-y-5">
|
||||
<Pill>Modul 2 — Wochen 3 & 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>
|
||||
{/* 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>
|
||||
<p className="mt-8 text-center text-indigo-700 font-semibold text-xl">
|
||||
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>
|
||||
{/* 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.
|
||||
<div className="p-8 md:p-10 flex flex-col justify-center space-y-5">
|
||||
<h3 className="text-2xl font-extrabold text-slate-900 leading-snug">
|
||||
Ich baue aus dem was du hast — ein System das planbar Kunden bringt.
|
||||
</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.
|
||||
</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 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. Damit du nicht nur weißt was zu tun ist — sondern wie es in deinem Business konkret aussieht.
|
||||
</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>
|
||||
<div className="border-t border-slate-100 pt-5 space-y-3">
|
||||
<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: "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" },
|
||||
].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 key={name} className="flex items-start gap-2 text-sm">
|
||||
<div className="w-1.5 h-1.5 rounded-full bg-indigo-500 flex-shrink-0 mt-2" />
|
||||
<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>
|
||||
<span className="font-semibold text-indigo-700">{name}</span>
|
||||
<span className="text-slate-500"> — {role}</span>
|
||||
<span className="text-slate-400 text-xs ml-1">({weeks})</span>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
|
|
@ -324,157 +415,23 @@ export default function Home() {
|
|||
</section>
|
||||
|
||||
{/* ══════════════════════════════════════════
|
||||
S6–S8 — MODULE (Thumbnail Cards)
|
||||
Modul 1: Wochen 1–2
|
||||
TESTIMONIALS
|
||||
══════════════════════════════════════════ */}
|
||||
<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>
|
||||
<section className="py-20">
|
||||
<div className="max-w-5xl mx-auto px-6">
|
||||
<div className="text-center mb-12">
|
||||
<Pill>Erfahrungen</Pill>
|
||||
<h2 className="mt-4 text-3xl md:text-4xl font-extrabold text-slate-900">Was Selbstständige über die Zusammenarbeit mit Katja sagen</h2>
|
||||
<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>
|
||||
</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 key={i} className="mc-card p-6 space-y-4">
|
||||
<div className="text-yellow-400 text-lg tracking-wider">★★★★★</div>
|
||||
<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-100 pt-4">
|
||||
<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-400 text-xs">— [Name, Berufsfeld]</p>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
|
|
@ -483,36 +440,36 @@ export default function Home() {
|
|||
</section>
|
||||
|
||||
{/* ══════════════════════════════════════════
|
||||
S11 — BONUS
|
||||
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>
|
||||
<section className="py-20 bg-white">
|
||||
<div className="max-w-5xl mx-auto px-6">
|
||||
<div className="text-center mb-12">
|
||||
<Pill>Bonus-Paket</Pill>
|
||||
<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 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.
|
||||
<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-700 leading-relaxed">
|
||||
<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>
|
||||
</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: 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: 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 — 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">
|
||||
<div key={n} className="mc-card p-5 space-y-2">
|
||||
<div className="flex items-center justify-between">
|
||||
<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>
|
||||
<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>
|
||||
</div>
|
||||
<p className="font-semibold text-white text-sm">{title}</p>
|
||||
<p className="text-slate-400 text-xs">{desc}</p>
|
||||
<p className="text-xs font-bold text-indigo-600 uppercase tracking-wide">Bonus {n}</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>
|
||||
|
|
@ -520,15 +477,15 @@ export default function Home() {
|
|||
</section>
|
||||
|
||||
{/* ══════════════════════════════════════════
|
||||
S12 — VALUE STACK + PREIS
|
||||
VALUE STACK + PREIS
|
||||
══════════════════════════════════════════ */}
|
||||
<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">
|
||||
<Badge>Dein Investment</Badge>
|
||||
<h2 className="text-2xl md:text-3xl font-extrabold text-white">Was du bekommst — und was es wert ist.</h2>
|
||||
<Pill>Dein Investment</Pill>
|
||||
<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 className="rounded-2xl overflow-hidden border border-slate-700">
|
||||
<div className="mc-card overflow-hidden">
|
||||
<table className="w-full text-sm">
|
||||
<tbody>
|
||||
{[
|
||||
|
|
@ -540,78 +497,76 @@ export default function Home() {
|
|||
["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 key={i} className={`border-b border-slate-100 ${i % 2 === 0 ? "bg-white" : "bg-slate-50"}`}>
|
||||
<td className="p-4 text-slate-600">{label}</td>
|
||||
<td className="p-4 text-right text-slate-500 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 style={{ background: "linear-gradient(135deg,#eef2ff,#f5f3ff)" }}>
|
||||
<td className="p-4 font-extrabold text-slate-900 text-base">Gesamtwert</td>
|
||||
<td className="p-4 text-right font-extrabold text-indigo-700 text-base font-mono">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">
|
||||
<div className="mt-12 text-center space-y-6">
|
||||
<p className="text-slate-400 line-through text-sm">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">
|
||||
500 €
|
||||
</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">
|
||||
<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 className="mc-card p-6 text-left space-y-2 bg-indigo-50 border-indigo-100">
|
||||
<p className="font-bold text-slate-900">Warum dieser Preis?</p>
|
||||
<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>
|
||||
|
||||
{/* 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="mc-card p-6 text-left space-y-3 border-emerald-200 bg-emerald-50">
|
||||
<p className="font-bold text-slate-900 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>
|
||||
<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-700 text-sm"><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>
|
||||
<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-700 text-sm"><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>
|
||||
<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>
|
||||
</section>
|
||||
|
||||
{/* ══════════════════════════════════════════
|
||||
S13 — FAQ
|
||||
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>
|
||||
<section className="py-20 bg-white">
|
||||
<div className="max-w-3xl mx-auto px-6">
|
||||
<div className="text-center mb-12">
|
||||
<Pill>FAQ</Pill>
|
||||
<h2 className="mt-4 text-3xl md:text-4xl font-extrabold text-slate-900">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: "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: "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: "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: "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">
|
||||
<details key={i} className="mc-card overflow-hidden group">
|
||||
<summary className="flex justify-between items-center p-5 cursor-pointer font-semibold text-slate-900 list-none">
|
||||
{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>
|
||||
<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>
|
||||
))}
|
||||
</div>
|
||||
|
|
@ -619,13 +574,13 @@ export default function Home() {
|
|||
</section>
|
||||
|
||||
{/* ══════════════════════════════════════════
|
||||
ABSCHLUSS-CTA
|
||||
ABSCHLUSS-CTA — dark
|
||||
══════════════════════════════════════════ */}
|
||||
<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">
|
||||
<section className="mc-dark-bg py-24 text-center">
|
||||
<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">
|
||||
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.
|
||||
</span>
|
||||
</h2>
|
||||
|
|
@ -636,10 +591,10 @@ export default function Home() {
|
|||
</section>
|
||||
|
||||
{/* 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
|
||||
</footer>
|
||||
|
||||
</main>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
Reference in a new issue