feat: initial GSO Gruppencoaching landing page
Full 13-section Next.js 16 landing page for "Das 8-Wochen Kundengewinnungs-System für Selbstständige". Built with pnpm, Tailwind CSS v4, TypeScript. Dark theme with MC brand gradient (blue #3B82F6 → purple #8B5CF6). All content from v5 text. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
commit
e01e145417
21 changed files with 4986 additions and 0 deletions
41
.gitignore
vendored
Normal file
41
.gitignore
vendored
Normal file
|
|
@ -0,0 +1,41 @@
|
|||
# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
|
||||
|
||||
# dependencies
|
||||
/node_modules
|
||||
/.pnp
|
||||
.pnp.*
|
||||
.yarn/*
|
||||
!.yarn/patches
|
||||
!.yarn/plugins
|
||||
!.yarn/releases
|
||||
!.yarn/versions
|
||||
|
||||
# testing
|
||||
/coverage
|
||||
|
||||
# next.js
|
||||
/.next/
|
||||
/out/
|
||||
|
||||
# production
|
||||
/build
|
||||
|
||||
# misc
|
||||
.DS_Store
|
||||
*.pem
|
||||
|
||||
# debug
|
||||
npm-debug.log*
|
||||
yarn-debug.log*
|
||||
yarn-error.log*
|
||||
.pnpm-debug.log*
|
||||
|
||||
# env files (can opt-in for committing if needed)
|
||||
.env*
|
||||
|
||||
# vercel
|
||||
.vercel
|
||||
|
||||
# typescript
|
||||
*.tsbuildinfo
|
||||
next-env.d.ts
|
||||
5
AGENTS.md
Normal file
5
AGENTS.md
Normal file
|
|
@ -0,0 +1,5 @@
|
|||
<!-- BEGIN:nextjs-agent-rules -->
|
||||
# This is NOT the Next.js you know
|
||||
|
||||
This version has breaking changes — APIs, conventions, and file structure may all differ from your training data. Read the relevant guide in `node_modules/next/dist/docs/` before writing any code. Heed deprecation notices.
|
||||
<!-- END:nextjs-agent-rules -->
|
||||
1
CLAUDE.md
Normal file
1
CLAUDE.md
Normal file
|
|
@ -0,0 +1 @@
|
|||
@AGENTS.md
|
||||
36
README.md
Normal file
36
README.md
Normal file
|
|
@ -0,0 +1,36 @@
|
|||
This is a [Next.js](https://nextjs.org) project bootstrapped with [`create-next-app`](https://nextjs.org/docs/app/api-reference/cli/create-next-app).
|
||||
|
||||
## Getting Started
|
||||
|
||||
First, run the development server:
|
||||
|
||||
```bash
|
||||
npm run dev
|
||||
# or
|
||||
yarn dev
|
||||
# or
|
||||
pnpm dev
|
||||
# or
|
||||
bun dev
|
||||
```
|
||||
|
||||
Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
|
||||
|
||||
You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file.
|
||||
|
||||
This project uses [`next/font`](https://nextjs.org/docs/app/building-your-application/optimizing/fonts) to automatically optimize and load [Geist](https://vercel.com/font), a new font family for Vercel.
|
||||
|
||||
## Learn More
|
||||
|
||||
To learn more about Next.js, take a look at the following resources:
|
||||
|
||||
- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
|
||||
- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
|
||||
|
||||
You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js) - your feedback and contributions are welcome!
|
||||
|
||||
## Deploy on Vercel
|
||||
|
||||
The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
|
||||
|
||||
Check out our [Next.js deployment documentation](https://nextjs.org/docs/app/building-your-application/deploying) for more details.
|
||||
18
eslint.config.mjs
Normal file
18
eslint.config.mjs
Normal file
|
|
@ -0,0 +1,18 @@
|
|||
import { defineConfig, globalIgnores } from "eslint/config";
|
||||
import nextVitals from "eslint-config-next/core-web-vitals";
|
||||
import nextTs from "eslint-config-next/typescript";
|
||||
|
||||
const eslintConfig = defineConfig([
|
||||
...nextVitals,
|
||||
...nextTs,
|
||||
// Override default ignores of eslint-config-next.
|
||||
globalIgnores([
|
||||
// Default ignores of eslint-config-next:
|
||||
".next/**",
|
||||
"out/**",
|
||||
"build/**",
|
||||
"next-env.d.ts",
|
||||
]),
|
||||
]);
|
||||
|
||||
export default eslintConfig;
|
||||
7
next.config.ts
Normal file
7
next.config.ts
Normal file
|
|
@ -0,0 +1,7 @@
|
|||
import type { NextConfig } from "next";
|
||||
|
||||
const nextConfig: NextConfig = {
|
||||
/* config options here */
|
||||
};
|
||||
|
||||
export default nextConfig;
|
||||
26
package.json
Normal file
26
package.json
Normal file
|
|
@ -0,0 +1,26 @@
|
|||
{
|
||||
"name": "gso-landingpage",
|
||||
"version": "0.1.0",
|
||||
"private": true,
|
||||
"scripts": {
|
||||
"dev": "next dev",
|
||||
"build": "next build",
|
||||
"start": "next start",
|
||||
"lint": "eslint"
|
||||
},
|
||||
"dependencies": {
|
||||
"next": "16.2.4",
|
||||
"react": "19.2.4",
|
||||
"react-dom": "19.2.4"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@tailwindcss/postcss": "^4",
|
||||
"@types/node": "^20",
|
||||
"@types/react": "^19",
|
||||
"@types/react-dom": "^19",
|
||||
"eslint": "^9",
|
||||
"eslint-config-next": "16.2.4",
|
||||
"tailwindcss": "^4",
|
||||
"typescript": "^5"
|
||||
}
|
||||
}
|
||||
4071
pnpm-lock.yaml
Normal file
4071
pnpm-lock.yaml
Normal file
File diff suppressed because it is too large
Load diff
3
pnpm-workspace.yaml
Normal file
3
pnpm-workspace.yaml
Normal file
|
|
@ -0,0 +1,3 @@
|
|||
ignoredBuiltDependencies:
|
||||
- sharp
|
||||
- unrs-resolver
|
||||
7
postcss.config.mjs
Normal file
7
postcss.config.mjs
Normal file
|
|
@ -0,0 +1,7 @@
|
|||
const config = {
|
||||
plugins: {
|
||||
"@tailwindcss/postcss": {},
|
||||
},
|
||||
};
|
||||
|
||||
export default config;
|
||||
1
public/file.svg
Normal file
1
public/file.svg
Normal file
|
|
@ -0,0 +1 @@
|
|||
<svg fill="none" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"><path d="M14.5 13.5V5.41a1 1 0 0 0-.3-.7L9.8.29A1 1 0 0 0 9.08 0H1.5v13.5A2.5 2.5 0 0 0 4 16h8a2.5 2.5 0 0 0 2.5-2.5m-1.5 0v-7H8v-5H3v12a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1M9.5 5V2.12L12.38 5zM5.13 5h-.62v1.25h2.12V5zm-.62 3h7.12v1.25H4.5zm.62 3h-.62v1.25h7.12V11z" clip-rule="evenodd" fill="#666" fill-rule="evenodd"/></svg>
|
||||
|
After Width: | Height: | Size: 391 B |
1
public/globe.svg
Normal file
1
public/globe.svg
Normal file
|
|
@ -0,0 +1 @@
|
|||
<svg fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><g clip-path="url(#a)"><path fill-rule="evenodd" clip-rule="evenodd" d="M10.27 14.1a6.5 6.5 0 0 0 3.67-3.45q-1.24.21-2.7.34-.31 1.83-.97 3.1M8 16A8 8 0 1 0 8 0a8 8 0 0 0 0 16m.48-1.52a7 7 0 0 1-.96 0H7.5a4 4 0 0 1-.84-1.32q-.38-.89-.63-2.08a40 40 0 0 0 3.92 0q-.25 1.2-.63 2.08a4 4 0 0 1-.84 1.31zm2.94-4.76q1.66-.15 2.95-.43a7 7 0 0 0 0-2.58q-1.3-.27-2.95-.43a18 18 0 0 1 0 3.44m-1.27-3.54a17 17 0 0 1 0 3.64 39 39 0 0 1-4.3 0 17 17 0 0 1 0-3.64 39 39 0 0 1 4.3 0m1.1-1.17q1.45.13 2.69.34a6.5 6.5 0 0 0-3.67-3.44q.65 1.26.98 3.1M8.48 1.5l.01.02q.41.37.84 1.31.38.89.63 2.08a40 40 0 0 0-3.92 0q.25-1.2.63-2.08a4 4 0 0 1 .85-1.32 7 7 0 0 1 .96 0m-2.75.4a6.5 6.5 0 0 0-3.67 3.44 29 29 0 0 1 2.7-.34q.31-1.83.97-3.1M4.58 6.28q-1.66.16-2.95.43a7 7 0 0 0 0 2.58q1.3.27 2.95.43a18 18 0 0 1 0-3.44m.17 4.71q-1.45-.12-2.69-.34a6.5 6.5 0 0 0 3.67 3.44q-.65-1.27-.98-3.1" fill="#666"/></g><defs><clipPath id="a"><path fill="#fff" d="M0 0h16v16H0z"/></clipPath></defs></svg>
|
||||
|
After Width: | Height: | Size: 1 KiB |
1
public/next.svg
Normal file
1
public/next.svg
Normal file
|
|
@ -0,0 +1 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 394 80"><path fill="#000" d="M262 0h68.5v12.7h-27.2v66.6h-13.6V12.7H262V0ZM149 0v12.7H94v20.4h44.3v12.6H94v21h55v12.6H80.5V0h68.7zm34.3 0h-17.8l63.8 79.4h17.9l-32-39.7 32-39.6h-17.9l-23 28.6-23-28.6zm18.3 56.7-9-11-27.1 33.7h17.8l18.3-22.7z"/><path fill="#000" d="M81 79.3 17 0H0v79.3h13.6V17l50.2 62.3H81Zm252.6-.4c-1 0-1.8-.4-2.5-1s-1.1-1.6-1.1-2.6.3-1.8 1-2.5 1.6-1 2.6-1 1.8.3 2.5 1a3.4 3.4 0 0 1 .6 4.3 3.7 3.7 0 0 1-3 1.8zm23.2-33.5h6v23.3c0 2.1-.4 4-1.3 5.5a9.1 9.1 0 0 1-3.8 3.5c-1.6.8-3.5 1.3-5.7 1.3-2 0-3.7-.4-5.3-1s-2.8-1.8-3.7-3.2c-.9-1.3-1.4-3-1.4-5h6c.1.8.3 1.6.7 2.2s1 1.2 1.6 1.5c.7.4 1.5.5 2.4.5 1 0 1.8-.2 2.4-.6a4 4 0 0 0 1.6-1.8c.3-.8.5-1.8.5-3V45.5zm30.9 9.1a4.4 4.4 0 0 0-2-3.3 7.5 7.5 0 0 0-4.3-1.1c-1.3 0-2.4.2-3.3.5-.9.4-1.6 1-2 1.6a3.5 3.5 0 0 0-.3 4c.3.5.7.9 1.3 1.2l1.8 1 2 .5 3.2.8c1.3.3 2.5.7 3.7 1.2a13 13 0 0 1 3.2 1.8 8.1 8.1 0 0 1 3 6.5c0 2-.5 3.7-1.5 5.1a10 10 0 0 1-4.4 3.5c-1.8.8-4.1 1.2-6.8 1.2-2.6 0-4.9-.4-6.8-1.2-2-.8-3.4-2-4.5-3.5a10 10 0 0 1-1.7-5.6h6a5 5 0 0 0 3.5 4.6c1 .4 2.2.6 3.4.6 1.3 0 2.5-.2 3.5-.6 1-.4 1.8-1 2.4-1.7a4 4 0 0 0 .8-2.4c0-.9-.2-1.6-.7-2.2a11 11 0 0 0-2.1-1.4l-3.2-1-3.8-1c-2.8-.7-5-1.7-6.6-3.2a7.2 7.2 0 0 1-2.4-5.7 8 8 0 0 1 1.7-5 10 10 0 0 1 4.3-3.5c2-.8 4-1.2 6.4-1.2 2.3 0 4.4.4 6.2 1.2 1.8.8 3.2 2 4.3 3.4 1 1.4 1.5 3 1.5 5h-5.8z"/></svg>
|
||||
|
After Width: | Height: | Size: 1.3 KiB |
1
public/vercel.svg
Normal file
1
public/vercel.svg
Normal file
|
|
@ -0,0 +1 @@
|
|||
<svg fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1155 1000"><path d="m577.3 0 577.4 1000H0z" fill="#fff"/></svg>
|
||||
|
After Width: | Height: | Size: 128 B |
1
public/window.svg
Normal file
1
public/window.svg
Normal file
|
|
@ -0,0 +1 @@
|
|||
<svg fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path fill-rule="evenodd" clip-rule="evenodd" d="M1.5 2.5h13v10a1 1 0 0 1-1 1h-11a1 1 0 0 1-1-1zM0 1h16v11.5a2.5 2.5 0 0 1-2.5 2.5h-11A2.5 2.5 0 0 1 0 12.5zm3.75 4.5a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5M7 4.75a.75.75 0 1 1-1.5 0 .75.75 0 0 1 1.5 0m1.75.75a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5" fill="#666"/></svg>
|
||||
|
After Width: | Height: | Size: 385 B |
BIN
src/app/favicon.ico
Normal file
BIN
src/app/favicon.ico
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 25 KiB |
19
src/app/globals.css
Normal file
19
src/app/globals.css
Normal file
|
|
@ -0,0 +1,19 @@
|
|||
@import "tailwindcss";
|
||||
|
||||
:root {
|
||||
--background: #0F172A;
|
||||
--foreground: #F1F5F9;
|
||||
}
|
||||
|
||||
@theme inline {
|
||||
--color-background: var(--background);
|
||||
--color-foreground: var(--foreground);
|
||||
--font-sans: var(--font-geist-sans);
|
||||
--font-mono: var(--font-geist-mono);
|
||||
}
|
||||
|
||||
body {
|
||||
background: var(--background);
|
||||
color: var(--foreground);
|
||||
font-family: var(--font-geist-sans, Arial, Helvetica, sans-serif);
|
||||
}
|
||||
36
src/app/layout.tsx
Normal file
36
src/app/layout.tsx
Normal file
|
|
@ -0,0 +1,36 @@
|
|||
import type { Metadata } from "next";
|
||||
import { Geist, Geist_Mono } 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"],
|
||||
});
|
||||
|
||||
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.",
|
||||
};
|
||||
|
||||
export default function RootLayout({
|
||||
children,
|
||||
}: Readonly<{
|
||||
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>
|
||||
);
|
||||
}
|
||||
672
src/app/page.tsx
Normal file
672
src/app/page.tsx
Normal file
|
|
@ -0,0 +1,672 @@
|
|||
const CTA_HREF = "#platz-sichern";
|
||||
|
||||
function GradientButton({
|
||||
href = CTA_HREF,
|
||||
children,
|
||||
large = false,
|
||||
}: {
|
||||
href?: string;
|
||||
children: React.ReactNode;
|
||||
large?: boolean;
|
||||
}) {
|
||||
return (
|
||||
<a
|
||||
href={href}
|
||||
className={`inline-block font-bold rounded-full bg-gradient-to-r from-blue-500 to-purple-600 hover:from-blue-400 hover:to-purple-500 text-white transition-all shadow-lg hover:shadow-blue-500/25 ${large ? "text-xl px-10 py-5" : "text-base px-7 py-3"}`}
|
||||
>
|
||||
{children}
|
||||
</a>
|
||||
);
|
||||
}
|
||||
|
||||
function SectionLabel({ children }: { children: React.ReactNode }) {
|
||||
return (
|
||||
<span className="inline-block text-xs font-bold uppercase tracking-widest text-blue-400 bg-blue-900/30 border border-blue-800 rounded-full px-4 py-1 mb-4">
|
||||
{children}
|
||||
</span>
|
||||
);
|
||||
}
|
||||
|
||||
function CheckItem({ children }: { children: React.ReactNode }) {
|
||||
return (
|
||||
<li className="flex items-start gap-3">
|
||||
<span className="mt-1 flex-shrink-0 w-5 h-5 rounded-full bg-gradient-to-r from-blue-500 to-purple-600 flex items-center justify-center text-white text-xs">
|
||||
✓
|
||||
</span>
|
||||
<span className="text-slate-300">{children}</span>
|
||||
</li>
|
||||
);
|
||||
}
|
||||
|
||||
function WeekCard({
|
||||
week,
|
||||
title,
|
||||
expert,
|
||||
body,
|
||||
vorlagen,
|
||||
result,
|
||||
}: {
|
||||
week: string;
|
||||
title: string;
|
||||
expert?: string;
|
||||
body: string;
|
||||
vorlagen: string;
|
||||
result: string;
|
||||
}) {
|
||||
return (
|
||||
<div className="rounded-2xl border border-slate-700 bg-slate-800/50 p-6 space-y-3">
|
||||
<div className="flex items-center gap-3">
|
||||
<span className="text-xs font-bold uppercase tracking-wider text-blue-400 bg-blue-900/30 border border-blue-800 rounded-full px-3 py-1">
|
||||
{week}
|
||||
</span>
|
||||
{expert && (
|
||||
<span className="text-xs text-purple-400 italic">{expert}</span>
|
||||
)}
|
||||
</div>
|
||||
<h4 className="text-lg font-bold text-white">{title}</h4>
|
||||
<p className="text-slate-300 text-sm leading-relaxed">{body}</p>
|
||||
<p className="text-xs text-slate-400 italic border-t border-slate-700 pt-3">
|
||||
{vorlagen}
|
||||
</p>
|
||||
<p className="text-sm font-semibold text-blue-300 border-t border-slate-700 pt-3">
|
||||
✓ {result}
|
||||
</p>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default function Home() {
|
||||
return (
|
||||
<main className="bg-slate-900 text-slate-100">
|
||||
{/* NAV */}
|
||||
<nav className="sticky top-0 z-50 bg-slate-900/95 backdrop-blur-sm border-b border-slate-800">
|
||||
<div className="max-w-5xl mx-auto px-4 py-4 flex justify-between items-center">
|
||||
<span className="font-bold text-white">
|
||||
<span className="bg-gradient-to-r from-blue-400 to-purple-400 bg-clip-text text-transparent">
|
||||
Market Compass
|
||||
</span>
|
||||
</span>
|
||||
<GradientButton>Meinen Platz sichern →</GradientButton>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
{/* ─── S1: HERO ─── */}
|
||||
<section className="relative overflow-hidden bg-gradient-to-b from-slate-950 to-slate-900 py-20 md:py-32">
|
||||
<div className="absolute inset-0 bg-[radial-gradient(ellipse_at_top,_var(--tw-gradient-stops))] from-blue-900/20 via-transparent to-transparent" />
|
||||
<div className="relative max-w-4xl mx-auto px-4 text-center space-y-8">
|
||||
<SectionLabel>Pilotprogramm · Start 1. Juli 2027 · Max. 10 Plätze</SectionLabel>
|
||||
<h1 className="text-3xl md:text-5xl lg:text-6xl font-extrabold text-white leading-tight">
|
||||
In 8 Wochen zu deinem eigenen{" "}
|
||||
<span className="bg-gradient-to-r from-blue-400 to-purple-400 bg-clip-text text-transparent">
|
||||
Kundengewinnungs-System
|
||||
</span>{" "}
|
||||
— speziell für Selbstständige
|
||||
</h1>
|
||||
<p className="text-xl md:text-2xl text-slate-300 max-w-2xl mx-auto">
|
||||
Dein Wissen ist da. Jetzt bekommt es die Struktur die Kunden bringt.
|
||||
</p>
|
||||
<div className="flex flex-col sm:flex-row gap-3 justify-center items-center">
|
||||
<GradientButton large>Meinen Platz sichern →</GradientButton>
|
||||
</div>
|
||||
<p className="text-sm text-slate-400">
|
||||
Exklusive Kleingruppe — maximal 10 Plätze. Nur noch 8 frei.
|
||||
<br />
|
||||
Start: 1. Juli 2027. Du entscheidest nach unserem ersten Gespräch.
|
||||
</p>
|
||||
{/* Authority Frame */}
|
||||
<div className="inline-flex flex-col sm:flex-row items-center gap-4 bg-slate-800/60 border border-slate-700 rounded-xl px-6 py-4 text-sm text-slate-300">
|
||||
<div className="w-14 h-14 rounded-full bg-gradient-to-br from-blue-500 to-purple-600 flex items-center justify-center text-white font-bold text-lg flex-shrink-0">
|
||||
KP
|
||||
</div>
|
||||
<div className="text-center sm:text-left">
|
||||
<p className="font-semibold text-white">Katja Pestereva von Market Compass</p>
|
||||
<p className="text-slate-400">15+ Jahre Erfahrung · + 4 Experten aus Vertrieb, Social Media & Video</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* ─── S2: FORMAT & RAHMEN ─── */}
|
||||
<section className="py-16 bg-slate-800/40">
|
||||
<div className="max-w-5xl mx-auto px-4">
|
||||
<h2 className="text-2xl md:text-3xl font-bold text-center text-white mb-12">
|
||||
Was dich erwartet
|
||||
</h2>
|
||||
<div className="grid grid-cols-2 md:grid-cols-4 gap-6 mb-10">
|
||||
{[
|
||||
{ num: "8", label: "Wochen — Schritt für Schritt aufgebaut" },
|
||||
{ num: "5", label: "Experten an deiner Seite" },
|
||||
{ num: "10", label: "Plätze — exklusive Kleingruppe" },
|
||||
{ num: "25+", label: "Praxis-Vorlagen die du sofort einsetzt" },
|
||||
].map(({ num, label }) => (
|
||||
<div
|
||||
key={num}
|
||||
className="rounded-2xl bg-slate-800 border border-slate-700 p-6 text-center"
|
||||
>
|
||||
<p className="text-4xl md:text-5xl font-extrabold bg-gradient-to-r from-blue-400 to-purple-400 bg-clip-text text-transparent">
|
||||
{num}
|
||||
</p>
|
||||
<p className="mt-2 text-sm text-slate-400">{label}</p>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
<div className="rounded-2xl bg-slate-800 border border-slate-700 p-6 text-slate-300 text-sm leading-relaxed space-y-1">
|
||||
<p>
|
||||
<strong className="text-white">Start:</strong> 1. Juli 2027
|
||||
</p>
|
||||
<p>
|
||||
<strong className="text-white">Jede Woche:</strong> Workshop (90 Min.) — Du bist nicht allein: tägliche Begleitung
|
||||
in der Messenger-Community, Fragen stellen wann du willst — Alle Aufzeichnungen bleiben
|
||||
abrufbar solange du im Marketing Klub dabei bist.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* ─── S3: WAS IST DAS GENAU? ─── */}
|
||||
<section className="py-16">
|
||||
<div className="max-w-3xl mx-auto px-4 space-y-6">
|
||||
<h2 className="text-2xl md:text-3xl font-bold text-white">
|
||||
Das ist kein weiterer Kurs.
|
||||
</h2>
|
||||
<p className="text-slate-300 leading-relaxed">
|
||||
Die meisten Programme erklären dir entweder Marketing, Vertrieb oder Social Media — getrennt
|
||||
voneinander. Du gehst mit Wissen nach Hause. Und weißt immer noch nicht, wie das alles
|
||||
zusammenhängt.
|
||||
</p>
|
||||
<p className="text-slate-300 leading-relaxed">
|
||||
Das{" "}
|
||||
<strong className="text-white">8-Wochen Kundengewinnungs-System</strong> macht genau das:
|
||||
Marketing, Vertrieb und Social Media — in einem System, das Woche für Woche aufgebaut wird.
|
||||
Mit Katja Pestereva von Market Compass und Experten aus Vertrieb, Social Media und Video.
|
||||
</p>
|
||||
<p className="text-slate-300 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>
|
||||
<p className="text-sm text-slate-500 italic">
|
||||
Pilotprogramm: 1. Juli 2027 · Exklusive Kleingruppe · Live via Video + tägliche Begleitung
|
||||
im Messenger
|
||||
</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* ─── S3b: ERGEBNISSE NACH 8 WOCHEN ─── */}
|
||||
<section className="py-16 bg-slate-800/40">
|
||||
<div className="max-w-4xl mx-auto px-4">
|
||||
<h2 className="text-2xl md:text-3xl font-bold text-white mb-8">
|
||||
Nach 8 Wochen nimmst du mit:
|
||||
</h2>
|
||||
<ul className="space-y-3">
|
||||
{[
|
||||
"Klare Wunschkunden-Persona + vollständiger Marketing-Audit",
|
||||
"Dein Angebot klar auf den Punkt — und deine Positionierung in einem Satz",
|
||||
"Die vollständige Struktur deiner Verkaufsseite — fertig zum Umsetzen",
|
||||
"90-Tage-Marketingplan + Entscheidung für 2 fokussierte Kanäle",
|
||||
"Content-Plan für 4 Wochen — du weißt was, wann und warum du postest",
|
||||
"Plan wie du dein Angebot aktiv über Social Media verkaufst + professionelles Video-Setup",
|
||||
"Dein persönliches Verkaufsskript für die Direktansprache",
|
||||
"Google Business Profil optimiert + SEO-Grundlagen für deine Website",
|
||||
].map((item, i) => (
|
||||
<li
|
||||
key={i}
|
||||
className="flex items-start gap-4 rounded-xl bg-slate-800 border border-slate-700 p-4"
|
||||
>
|
||||
<span className="flex-shrink-0 w-7 h-7 rounded-full bg-gradient-to-r from-blue-500 to-purple-600 flex items-center justify-center text-white text-xs font-bold">
|
||||
{i + 1}
|
||||
</span>
|
||||
<span className="text-slate-300">{item}</span>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* ─── S4: INHALTS-GRID ─── */}
|
||||
<section className="py-16">
|
||||
<div className="max-w-5xl mx-auto px-4">
|
||||
<h2 className="text-2xl md:text-3xl font-bold text-white mb-10 text-center">
|
||||
Was du in 8 Wochen baust — und mit nach Hause nimmst
|
||||
</h2>
|
||||
<div className="grid sm:grid-cols-2 lg:grid-cols-3 gap-4">
|
||||
{[
|
||||
"Deinen Wunschkunden klar definiert — wer er ist, was er braucht, was er schon versucht hat",
|
||||
"Dein Angebot auf den Punkt gebracht — was du anbietest, welches Problem du löst",
|
||||
"Deine Positionierung in einem Satz — klar, sofort verständlich, für alle Kanäle nutzbar",
|
||||
"Die komplette Struktur für deine Verkaufsseite — mit Feedback zur Umsetzung",
|
||||
"Deine Marketing-Systemkarte — wie Sichtbarkeit, Vertrauen, Anfrage und Kauf zusammenhängen",
|
||||
"Deinen 90-Tage-Marketingplan + Entscheidung welche 2 Kanäle du fokussierst",
|
||||
"Deinen 4-Wochen Content-Plan + Themen die zeigen wofür du stehst — für alle Plattformen",
|
||||
"Deinen Launch-Plan — wie du dein Angebot aktiv über Social Media in den Markt bringst",
|
||||
"Video-Setup erklärt — professionelle Videos mit dem Handy",
|
||||
"Dein persönliches Verkaufsskript für Direktansprache und Netzwerk",
|
||||
"Dein Google Business Profil optimiert + SEO-Grundlagen für deine Website",
|
||||
].map((item, i) => (
|
||||
<div
|
||||
key={i}
|
||||
className="rounded-xl bg-slate-800 border border-slate-700 p-4 flex items-start gap-3"
|
||||
>
|
||||
<span className="mt-0.5 flex-shrink-0 w-5 h-5 rounded-full bg-gradient-to-r from-blue-500 to-purple-600 flex items-center justify-center text-white text-xs">
|
||||
✓
|
||||
</span>
|
||||
<p className="text-slate-300 text-sm">{item}</p>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* ─── S5: COACH-VORSTELLUNG ─── */}
|
||||
<section className="py-16 bg-slate-800/40">
|
||||
<div className="max-w-4xl mx-auto px-4">
|
||||
<h2 className="text-2xl md:text-3xl font-bold text-white mb-10 text-center">
|
||||
Deine Begleitung
|
||||
</h2>
|
||||
<div className="rounded-2xl bg-slate-800 border border-slate-700 p-8 space-y-6">
|
||||
<div className="flex flex-col sm:flex-row gap-6 items-start">
|
||||
<div className="w-20 h-20 rounded-full bg-gradient-to-br from-blue-500 to-purple-600 flex items-center justify-center text-white font-bold text-2xl flex-shrink-0">
|
||||
KP
|
||||
</div>
|
||||
<div className="space-y-3">
|
||||
<h3 className="text-xl font-bold text-white">Katja Pestereva von Market Compass</h3>
|
||||
<p className="text-slate-300 leading-relaxed">
|
||||
Ich baue aus dem was Selbstständige bereits haben — ihrem Wissen, ihren Fähigkeiten,
|
||||
ihrer Erfahrung — ein System das planbar die richtigen Kunden bringt.
|
||||
</p>
|
||||
<p className="text-slate-300 leading-relaxed">
|
||||
Nicht von vorne anfangen. Nicht noch einen Kurs. Sondern das was schon da ist in eine
|
||||
Struktur bringen die funktioniert.
|
||||
</p>
|
||||
<p className="text-slate-300 leading-relaxed">
|
||||
Dafür habe ich die besten Experten aus den Bereichen zusammengestellt, die
|
||||
Selbstständige am meisten brauchen: Vertrieb, Social Media und Video. Damit du nicht
|
||||
nur weißt was zu tun ist — sondern wie es in deinem Business konkret aussieht.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="border-t border-slate-700 pt-6">
|
||||
<h4 className="font-bold text-white mb-4">Dein Expertenteam:</h4>
|
||||
<ul className="space-y-3">
|
||||
{[
|
||||
{ name: "Katja Pestereva", role: "Marketing-System, Positionierung, Angebot, Kanal-Strategie, SEO", weeks: "Wochen 1, 2, 3, 4, 8" },
|
||||
{ name: "Can Turkdogan", role: "Content-Strategie & Social Media", weeks: "Woche 5" },
|
||||
{ name: "Stefan & Philipp von Onlinewerbevideo", role: "Professionelles Filmen & Video-Setup", weeks: "Woche 6" },
|
||||
{ name: "Manuela Ludewig", role: "Vertrieb & Direktansprache", weeks: "Woche 7" },
|
||||
].map(({ name, role, weeks }) => (
|
||||
<li key={name} className="flex flex-col sm:flex-row sm:items-center gap-1 sm:gap-3">
|
||||
<span className="font-semibold text-blue-300 flex-shrink-0">{name}</span>
|
||||
<span className="text-slate-400 text-sm">— {role}</span>
|
||||
<span className="text-xs text-slate-500 sm:ml-auto flex-shrink-0">({weeks})</span>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* ─── S6: MODUL 1 (Wochen 1–2) ─── */}
|
||||
<section className="py-16">
|
||||
<div className="max-w-4xl mx-auto px-4 space-y-8">
|
||||
<div>
|
||||
<SectionLabel>Modul 1 — Wochen 1 & 2</SectionLabel>
|
||||
<h2 className="text-2xl md:text-3xl font-bold text-white">
|
||||
Wunschkunde, Angebot, Positionierung — alles klar auf den Punkt.
|
||||
</h2>
|
||||
</div>
|
||||
<div className="grid md:grid-cols-2 gap-6">
|
||||
<WeekCard
|
||||
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 gerade jeden Monat? Du machst einen ehrlichen Marketing-Audit: Was läuft, was nicht — und warum."
|
||||
vorlagen="Du nimmst mit: Marketing-Audit-Vorlage · Wunschkunden-Persona-Vorlage"
|
||||
result="Klarheit über deinen Wunschkunden — konkret, nicht allgemein. Und deinen Marketing-IST-Zustand schwarz auf weiß."
|
||||
/>
|
||||
<WeekCard
|
||||
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? Welche Extras erhöhen den Wert? 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="Du nimmst mit: Positionierungsformel-Vorlage · Kurztext für Website, Instagram-Profil und LinkedIn"
|
||||
result="Dein Angebot klar auf den Punkt — und kannst in einem Satz erklären was du tust, für wen, und warum bei dir."
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* ─── S7: MODUL 2 (Wochen 3–4) ─── */}
|
||||
<section className="py-16 bg-slate-800/40">
|
||||
<div className="max-w-4xl mx-auto px-4 space-y-8">
|
||||
<div>
|
||||
<SectionLabel>Modul 2 — Wochen 3 & 4</SectionLabel>
|
||||
<h2 className="text-2xl md:text-3xl font-bold text-white">Dein System steht.</h2>
|
||||
</div>
|
||||
<div className="grid md:grid-cols-2 gap-6">
|
||||
<WeekCard
|
||||
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="Du nimmst mit: Verkaufsseiten-Vorlage + alle Textelemente · 7-Elemente-Checkliste · Schritt-für-Schritt-Anleitung"
|
||||
result="Die vollständige Struktur für deine Verkaufsseite — fertig zum Umsetzen, mit konkretem Feedback was gut ist und was nicht."
|
||||
/>
|
||||
<WeekCard
|
||||
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: wie Sichtbarkeit, Vertrauen, Anfrage und Kauf zusammenhängen. Und du startest deinen 90-Tage-Plan."
|
||||
vorlagen="Du nimmst mit: Kanal-Entscheidungsmatrix · Marketing-Systemkarte · 90-Tage-Marketingplan · Weekly Marketing Sprint Vorlage"
|
||||
result="Gewusst welche 2 Kanäle du fokussierst — und deinen 90-Tage-Marketingplan begonnen."
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* ─── S8: MODUL 3 (Wochen 5–8) ─── */}
|
||||
<section className="py-16">
|
||||
<div className="max-w-4xl mx-auto px-4 space-y-8">
|
||||
<div>
|
||||
<SectionLabel>Modul 3 — Wochen 5–8</SectionLabel>
|
||||
<h2 className="text-2xl md:text-3xl font-bold text-white">
|
||||
Sichtbarkeit. Anfragen. Und du weißt wie es weitergeht.
|
||||
</h2>
|
||||
</div>
|
||||
<div className="grid md:grid-cols-2 gap-6">
|
||||
<WeekCard
|
||||
week="Woche 5"
|
||||
expert="Can Turkdogan — Social Media"
|
||||
title="Dein Content-System"
|
||||
body="Deine 3–4 Content-Themen — die zeigen wofür du stehst und was du kannst, und die für alle Plattformen funktionieren. 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="Du nimmst mit: Content-Säulen-Template · 4-Wochen-Redaktionsplan · Plattform-Entscheidungsguide · 10 bewährte Hook-Formeln"
|
||||
result="Deinen Content-Plan für 4 Wochen — und weißt genau was und wie du auf jeder Plattform postest."
|
||||
/>
|
||||
<WeekCard
|
||||
week="Woche 6"
|
||||
expert="Stefan & Philipp von Onlinewerbevideo"
|
||||
title="So verkaufst du bei Instagram und Social Media + 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. Equipment-Check. Dein erstes Video-Konzept."
|
||||
vorlagen="Du nimmst mit: Strategie für Verkauf über Social Media · Launch-Checkliste · Equipment-Checkliste · Filming-Guide"
|
||||
result="Deinen Plan wie du dein Angebot über Social Media verkaufst — und weißt wie du professionell auf Video erscheinst."
|
||||
/>
|
||||
<WeekCard
|
||||
week="Woche 7"
|
||||
expert="Manuela Ludewig — Vertrieb"
|
||||
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 und Netzwerkveranstaltungen."
|
||||
vorlagen="Du nimmst mit: Persönliches Verkaufsskript · Follow-up-Template · Event-Recherche-Guide"
|
||||
result="Dein Verkaufsskript für die Direktansprache — und hast es einmal geübt."
|
||||
/>
|
||||
<WeekCard
|
||||
week="Woche 8"
|
||||
expert="Katja Pestereva von Market Compass"
|
||||
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="Du nimmst mit: SEO-Checkliste · Keyword-Recherche-Vorlage · Website-Leitfaden"
|
||||
result="Dein Google Business Profil vollständig optimiert — und deine Seite für dein Haupt-Keyword vorbereitet."
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* ─── S9: VORHER / NACHHER ─── */}
|
||||
<section className="py-16 bg-slate-800/40">
|
||||
<div className="max-w-4xl mx-auto px-4">
|
||||
<h2 className="text-2xl md:text-3xl font-bold text-white mb-8 text-center">
|
||||
Vorher. Nachher.
|
||||
</h2>
|
||||
<div className="overflow-x-auto rounded-2xl border border-slate-700">
|
||||
<table className="w-full text-sm">
|
||||
<thead>
|
||||
<tr className="bg-slate-800 border-b border-slate-700">
|
||||
<th className="text-left p-4 text-slate-400 font-semibold w-1/2">Vorher</th>
|
||||
<th className="text-left p-4 text-blue-300 font-semibold w-1/2">Nachher</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{[
|
||||
[`\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ür alle Plattformen — du weißt 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ür mein Keyword."],
|
||||
[`\u201ENach jedem Kurs fange ich wieder bei null an.\u201C`, "Ein System aus Marketing, Vertrieb und Social Media — das weiterläuft."],
|
||||
].map(([before, after], i) => (
|
||||
<tr
|
||||
key={i}
|
||||
className={`border-b border-slate-700 ${i % 2 === 0 ? "bg-slate-900/40" : "bg-slate-800/40"}`}
|
||||
>
|
||||
<td className="p-4 text-slate-400 italic">{before}</td>
|
||||
<td className="p-4 text-slate-200 font-medium">{after}</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<p className="mt-6 text-center text-slate-300 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-4xl mx-auto px-4">
|
||||
<h2 className="text-2xl md:text-3xl font-bold text-white mb-4 text-center">
|
||||
Was Selbstständige über die Zusammenarbeit mit Katja sagen
|
||||
</h2>
|
||||
<p className="text-center text-slate-400 text-sm mb-10 italic">
|
||||
Das Programm startet im Juli 2027. Diese Erfahrungen kommen aus der direkten Zusammenarbeit mit Katja.
|
||||
</p>
|
||||
<div className="grid md:grid-cols-3 gap-6">
|
||||
{[1, 2, 3].map((i) => (
|
||||
<div key={i} className="rounded-2xl bg-slate-800 border border-slate-700 p-6 space-y-4">
|
||||
<div className="flex gap-1">
|
||||
{[...Array(5)].map((_, s) => (
|
||||
<span key={s} className="text-yellow-400 text-sm">★</span>
|
||||
))}
|
||||
</div>
|
||||
<p className="text-slate-400 italic text-sm">
|
||||
[Google-Bewertung {i} einfügen]
|
||||
</p>
|
||||
<p className="text-slate-500 text-xs">— [Name, Berufsfeld]</p>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* ─── S11: BONUS ─── */}
|
||||
<section className="py-16 bg-slate-800/40">
|
||||
<div className="max-w-4xl mx-auto px-4">
|
||||
<h2 className="text-2xl md:text-3xl font-bold text-white mb-4 text-center">
|
||||
Und du bist während und nach dem Programm nie allein.
|
||||
</h2>
|
||||
<div className="rounded-2xl bg-gradient-to-r from-blue-900/30 to-purple-900/30 border border-blue-800/50 p-6 mb-8">
|
||||
<p className="text-slate-300 leading-relaxed">
|
||||
<strong className="text-white">Die gesamten 8 Wochen:</strong> Du bleibst keine Minute ohne
|
||||
Unterstützung. In der Messenger-Community beantwortet Katja täglich Fragen. Du kannst
|
||||
jederzeit posten — Feedback kommt. Das ist kein Kurs bei dem du alleine vorankommst. Das ist
|
||||
8 Wochen tägliche Begleitung.
|
||||
</p>
|
||||
</div>
|
||||
<div className="grid sm:grid-cols-2 gap-4">
|
||||
{[
|
||||
{ title: "Sofort loslegen: 7 fertige Vorlagen für dein Marketing", desc: "Alle wichtigen Vorlagen direkt anwendbar — du fängst nicht bei null an.", value: "497 €" },
|
||||
{ title: "Kunden gewinnen über Instagram", desc: "Wie du über Social Media planbar Anfragen bekommst — Schritt für Schritt.", value: "297 €" },
|
||||
{ title: "Professionell filmen — mit dem Handy", desc: "Kein teures Equipment. Trotzdem professionell. Die Grundlagen von den Video-Experten.", value: "197 €" },
|
||||
{ title: "Welche Plattform passt zu dir?", desc: "Kein Rätselraten mehr — du weißt auf welcher Plattform deine Wunschkunden sind.", value: "147 €" },
|
||||
{ title: "1 Monat Begleitung nach dem Programm", desc: "Die Messenger-Community bleibt einen Monat nach dem Programm offen. Fragen zur Umsetzung, offener Austausch, Motivation.", value: "97 €" },
|
||||
{ title: "Abschluss-Netzwerkevent (geplant — Details folgen)", desc: "Nach der letzten Session kommen alle zusammen. Persönliches Feedback von Katja. Neue Kontakte. Exklusiv für den Pilotdurchlauf.", value: "197 €" },
|
||||
].map(({ title, desc, value }, i) => (
|
||||
<div key={i} className="rounded-xl bg-slate-800 border border-slate-700 p-5 space-y-2">
|
||||
<div className="flex justify-between items-start gap-2">
|
||||
<p className="font-semibold text-white text-sm leading-snug">
|
||||
Bonus {i + 1}: „{title}"
|
||||
</p>
|
||||
<span className="flex-shrink-0 text-xs font-bold text-green-400 bg-green-900/30 border border-green-800 rounded-full px-2 py-0.5 whitespace-nowrap">
|
||||
Wert: {value}
|
||||
</span>
|
||||
</div>
|
||||
<p className="text-slate-400 text-sm">{desc}</p>
|
||||
<p className="text-xs text-blue-400">Für Pilot-Teilnehmende inklusive</p>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* ─── S12: VALUE STACK + PREIS ─── */}
|
||||
<section id="platz-sichern" className="py-16">
|
||||
<div className="max-w-2xl mx-auto px-4">
|
||||
<h2 className="text-2xl md:text-3xl font-bold text-white mb-8 text-center">
|
||||
Was du bekommst — und was es wert ist.
|
||||
</h2>
|
||||
<div className="overflow-hidden rounded-2xl border border-slate-700">
|
||||
<table className="w-full text-sm">
|
||||
<tbody>
|
||||
{[
|
||||
["8-Wochen Programm (Marketing · Vertrieb · Social Media · Video)", "3.000 €"],
|
||||
["Bonus 1: Sofort loslegen — 7 fertige Vorlagen", "497 €"],
|
||||
["Bonus 2: Kunden gewinnen über Instagram", "297 €"],
|
||||
["Bonus 3: Professionell filmen mit dem Handy", "197 €"],
|
||||
["Bonus 4: Welche Plattform passt zu dir?", "147 €"],
|
||||
["Bonus 5: 1 Monat Begleitung nach dem Programm", "97 €"],
|
||||
["Bonus 6: Abschluss-Netzwerkevent (geplant, Pilot exklusiv)", "197 €"],
|
||||
].map(([label, val], i) => (
|
||||
<tr
|
||||
key={i}
|
||||
className={`border-b border-slate-700 ${i % 2 === 0 ? "bg-slate-900/40" : "bg-slate-800/40"}`}
|
||||
>
|
||||
<td className="p-4 text-slate-300">{label}</td>
|
||||
<td className="p-4 text-right text-slate-300 font-mono">{val}</td>
|
||||
</tr>
|
||||
))}
|
||||
<tr className="bg-gradient-to-r from-blue-900/40 to-purple-900/40 border-t-2 border-blue-500">
|
||||
<td className="p-4 font-bold text-white">Gesamtwert</td>
|
||||
<td className="p-4 text-right font-bold text-white font-mono">4.432 €</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<div className="mt-10 text-center space-y-6">
|
||||
<div>
|
||||
<p className="text-slate-400 text-sm mb-2">statt regulär 3.000 €</p>
|
||||
<p className="text-6xl md:text-7xl font-extrabold bg-gradient-to-r from-blue-400 to-purple-400 bg-clip-text text-transparent">
|
||||
500 €
|
||||
</p>
|
||||
<p className="text-xl text-slate-300 mt-1">gesamt (2 × 250 € / Monat)</p>
|
||||
</div>
|
||||
<div className="rounded-2xl bg-slate-800 border border-slate-700 p-6 text-left space-y-2">
|
||||
<p className="font-semibold text-white">Warum dieser Preis?</p>
|
||||
<p className="text-slate-300 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.
|
||||
Das hilft das Programm für alle künftigen Teilnehmenden zu verbessern. Du profitierst
|
||||
vom vollen Programm. Und das Programm profitiert von deiner ehrlichen Rückmeldung.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Garantie */}
|
||||
<div className="rounded-2xl border border-green-800 bg-green-900/20 p-6 text-left space-y-3">
|
||||
<p className="font-bold text-white text-lg">Mein Versprechen an dich:</p>
|
||||
<ul className="space-y-2">
|
||||
<CheckItem>
|
||||
<strong>14-Tage-Ausstiegsrecht</strong> — nach der ersten Session, ohne Fragen, voller Betrag zurück.
|
||||
</CheckItem>
|
||||
<CheckItem>
|
||||
<strong>Kostenlose Verlängerung*</strong> — Ziel nicht erreicht nach 8 Wochen? Du verlängerst kostenlos um 4 Wochen.
|
||||
</CheckItem>
|
||||
</ul>
|
||||
<p className="text-xs text-slate-500 italic">
|
||||
* Gilt wenn du aktiv teilgenommen und die wöchentlichen Aufgaben umgesetzt hast.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<GradientButton large>Meinen Platz sichern →</GradientButton>
|
||||
<p className="text-sm text-slate-400">Du entscheidest nach unserem ersten Gespräch.</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* ─── S13: FAQ ─── */}
|
||||
<section className="py-16 bg-slate-800/40">
|
||||
<div className="max-w-3xl mx-auto px-4">
|
||||
<h2 className="text-2xl md:text-3xl font-bold text-white mb-8 text-center">
|
||||
Häufige Fragen
|
||||
</h2>
|
||||
<div className="space-y-4">
|
||||
{[
|
||||
{
|
||||
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 — egal was du machst. 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. 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 solange du im Marketing Klub dabei bist — 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 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. Und wenn du dein vereinbartes Ziel nach 8 Wochen nicht erreicht hast: kostenlose Verlängerung um 4 Wochen.* (* Gilt wenn du aktiv teilgenommen und die wöchentlichen Aufgaben umgesetzt hast.)",
|
||||
},
|
||||
{
|
||||
q: "Ich bin nicht sicher ob ich die Zeit habe.",
|
||||
a: "Das klären wir im Gespräch. Wir schauen zusammen auf deine Situation — und sagen dir ehrlich ob das jetzt der richtige Zeitpunkt ist.",
|
||||
},
|
||||
{
|
||||
q: "Was genau zahle ich?",
|
||||
a: "500 € gesamt — 2 × 250 € / Monat. Das ist der Pilotpreis für den ersten Durchlauf. Der reguläre Preis liegt bei 3.000 €.",
|
||||
},
|
||||
].map(({ q, a }, i) => (
|
||||
<details
|
||||
key={i}
|
||||
className="group rounded-xl bg-slate-800 border border-slate-700 overflow-hidden"
|
||||
>
|
||||
<summary className="flex justify-between items-center p-5 cursor-pointer font-semibold text-white list-none">
|
||||
{q}
|
||||
<span className="text-blue-400 group-open:rotate-180 transition-transform flex-shrink-0 ml-4">
|
||||
▼
|
||||
</span>
|
||||
</summary>
|
||||
<div className="px-5 pb-5 text-slate-300 text-sm leading-relaxed border-t border-slate-700 pt-4">
|
||||
{a}
|
||||
</div>
|
||||
</details>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* ─── ABSCHLUSS-CTA ─── */}
|
||||
<section className="py-20 bg-gradient-to-b from-slate-900 to-slate-950">
|
||||
<div className="max-w-2xl mx-auto px-4 text-center space-y-6">
|
||||
<h2 className="text-2xl md:text-4xl font-extrabold text-white">
|
||||
Dein Wissen ist da.{" "}
|
||||
<span className="bg-gradient-to-r from-blue-400 to-purple-400 bg-clip-text text-transparent">
|
||||
Jetzt bekommt es die Struktur die Kunden bringt.
|
||||
</span>
|
||||
</h2>
|
||||
<p className="text-slate-400">Maximal 10 Plätze. Start: 1. Juli 2027.</p>
|
||||
<GradientButton large>Meinen Platz sichern →</GradientButton>
|
||||
<p className="text-sm text-slate-500">Ein kurzes Gespräch — du entscheidest danach.</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* FOOTER */}
|
||||
<footer className="border-t border-slate-800 py-6">
|
||||
<div className="max-w-5xl mx-auto px-4 text-center text-slate-500 text-xs">
|
||||
© 2026 Market Compass · Katja Pestereva
|
||||
</div>
|
||||
</footer>
|
||||
</main>
|
||||
);
|
||||
}
|
||||
34
tsconfig.json
Normal file
34
tsconfig.json
Normal file
|
|
@ -0,0 +1,34 @@
|
|||
{
|
||||
"compilerOptions": {
|
||||
"target": "ES2017",
|
||||
"lib": ["dom", "dom.iterable", "esnext"],
|
||||
"allowJs": true,
|
||||
"skipLibCheck": true,
|
||||
"strict": true,
|
||||
"noEmit": true,
|
||||
"esModuleInterop": true,
|
||||
"module": "esnext",
|
||||
"moduleResolution": "bundler",
|
||||
"resolveJsonModule": true,
|
||||
"isolatedModules": true,
|
||||
"jsx": "react-jsx",
|
||||
"incremental": true,
|
||||
"plugins": [
|
||||
{
|
||||
"name": "next"
|
||||
}
|
||||
],
|
||||
"paths": {
|
||||
"@/*": ["./src/*"]
|
||||
}
|
||||
},
|
||||
"include": [
|
||||
"next-env.d.ts",
|
||||
"**/*.ts",
|
||||
"**/*.tsx",
|
||||
".next/types/**/*.ts",
|
||||
".next/dev/types/**/*.ts",
|
||||
"**/*.mts"
|
||||
],
|
||||
"exclude": ["node_modules"]
|
||||
}
|
||||
5
vercel.json
Normal file
5
vercel.json
Normal file
|
|
@ -0,0 +1,5 @@
|
|||
{
|
||||
"framework": "nextjs",
|
||||
"buildCommand": "pnpm build",
|
||||
"installCommand": "pnpm install"
|
||||
}
|
||||
Reference in a new issue