diff --git a/src/app/components/Icons.tsx b/src/app/components/Icons.tsx new file mode 100644 index 0000000..2e3f385 --- /dev/null +++ b/src/app/components/Icons.tsx @@ -0,0 +1,138 @@ +type P = { className?: string }; + +const s = { + fill: "none" as const, + stroke: "currentColor", + strokeWidth: 1.5, + strokeLinecap: "round" as const, + strokeLinejoin: "round" as const, +}; + +export function CalendarIcon({ className = "w-6 h-6" }: P) { + return ( + + + + ); +} + +export function GradCapIcon({ className = "w-6 h-6" }: P) { + return ( + + + + ); +} + +export function UsersIcon({ className = "w-6 h-6" }: P) { + return ( + + + + ); +} + +export function ClipboardIcon({ className = "w-6 h-6" }: P) { + return ( + + + + ); +} + +export function TargetIcon({ className = "w-6 h-6" }: P) { + return ( + + + + ); +} + +export function LightbulbIcon({ className = "w-6 h-6" }: P) { + return ( + + + + ); +} + +export function DocumentIcon({ className = "w-6 h-6" }: P) { + return ( + + + + ); +} + +export function PhoneIcon({ className = "w-6 h-6" }: P) { + return ( + + + + ); +} + +export function VideoCameraIcon({ className = "w-6 h-6" }: P) { + return ( + + + + ); +} + +export function HandshakeIcon({ className = "w-6 h-6" }: P) { + return ( + + + + ); +} + +export function SearchIcon({ className = "w-6 h-6" }: P) { + return ( + + + + ); +} + +export function MapPinIcon({ className = "w-6 h-6" }: P) { + return ( + + + + + ); +} + +export function MapIcon({ className = "w-6 h-6" }: P) { + return ( + + + + ); +} + +export function RocketIcon({ className = "w-6 h-6" }: P) { + return ( + + + + ); +} + +export function PackageIcon({ className = "w-6 h-6" }: P) { + return ( + + + + ); +} + +export function ChatIcon({ className = "w-6 h-6" }: P) { + return ( + + + + ); +} diff --git a/src/app/components/WeekTimeline.tsx b/src/app/components/WeekTimeline.tsx index 588e77e..9bf083c 100644 --- a/src/app/components/WeekTimeline.tsx +++ b/src/app/components/WeekTimeline.tsx @@ -1,6 +1,7 @@ "use client"; import { useEffect, useRef } from "react"; +import { ClipboardIcon } from "./Icons"; interface Week { week: string; @@ -144,8 +145,9 @@ function WeekCard({ week, isLeft }: { week: Week; isLeft: boolean }) { {/* Body */}

{week.body}

{/* Vorlagen */} -

- đź“‹ {week.vorlagen} +

+ + {week.vorlagen}

{/* Result */}

âś“ {week.result}

diff --git a/src/app/page.tsx b/src/app/page.tsx index 7be12c1..0ecee27 100644 --- a/src/app/page.tsx +++ b/src/app/page.tsx @@ -1,6 +1,12 @@ import Image from "next/image"; import WeekTimeline from "./components/WeekTimeline"; import FlipCards from "./components/FlipCards"; +import { + CalendarIcon, GradCapIcon, UsersIcon, ClipboardIcon, + TargetIcon, LightbulbIcon, DocumentIcon, PhoneIcon, + VideoCameraIcon, HandshakeIcon, SearchIcon, MapPinIcon, + MapIcon, RocketIcon, PackageIcon, ChatIcon, +} from "./components/Icons"; const CTA_HREF = "#platz-sichern"; @@ -25,10 +31,10 @@ function Pill({ children }: { children: React.ReactNode }) { ); } -function IconCard({ icon, title, sub }: { icon: string; title: string; sub: string }) { +function IconCard({ icon, title, sub }: { icon: React.ReactNode; title: string; sub: string }) { return (
-
+
{icon}

{title}

@@ -126,10 +132,10 @@ export default function Home() {

Was dich erwartet

- - - - + } title="8 Wochen" sub="Schritt für Schritt aufgebaut — Woche für Woche" /> + } title="5 Experten" sub="An deiner Seite — aus Vertrieb, Social Media & Video" /> + } title="10 Plätze" sub="Exklusive Kleingruppe — maximale Aufmerksamkeit" /> + } title="25+ Vorlagen" sub="Praxis-Vorlagen die du sofort einsetzen kannst" />
Jede Woche: Workshop (90 Min.) · Tägliche Begleitung in der Messenger-Community · Alle Aufzeichnungen bleiben abrufbar @@ -180,14 +186,14 @@ export default function Home() {

Nach 8 Wochen nimmst du mit:

- - - - - - - - + } title="Klare Wunschkunden-Persona" sub="+ vollständiger Marketing-Audit" /> + } title="Angebot auf den Punkt" sub="Positionierung in einem Satz — für alle Kanäle" /> + } title="Deine Verkaufsseite" sub="Vollständige Struktur — fertig zum Umsetzen" /> + } title="90-Tage-Marketingplan" sub="+ 2 fokussierte Kanäle entschieden" /> + } title="Content-Plan 4 Wochen" sub="Was, wann und warum du postest" /> + } title="Social Media Verkauf" sub="+ professionelles Video-Setup mit dem Handy" /> + } title="Dein Verkaufsskript" sub="Für Direktansprache und Netzwerkveranstaltungen" /> + } title="Google Business optimiert" sub="+ SEO-Grundlagen für deine Website" />
@@ -202,21 +208,23 @@ export default function Home() {

Was du in 8 Wochen baust — und mit nach Hause nimmst

- {[ - { icon: "🎯", text: "Deinen Wunschkunden klar definiert — wer er ist, was er braucht, was er schon versucht hat" }, - { icon: "💡", text: "Dein Angebot auf den Punkt gebracht — was du anbietest, welches Problem du löst" }, - { icon: "📌", text: "Deine Positionierung in einem Satz — klar, sofort verständlich, für alle Kanäle nutzbar" }, - { icon: "📄", text: "Die komplette Struktur für deine Verkaufsseite — mit Feedback zur Umsetzung" }, - { icon: "🗺️", text: "Deine Marketing-Systemkarte — wie Sichtbarkeit, Vertrauen, Anfrage und Kauf zusammenhängen" }, - { icon: "🗓️", text: "Deinen 90-Tage-Marketingplan + Entscheidung welche 2 Kanäle du fokussierst" }, - { icon: "📲", text: "Deinen 4-Wochen Content-Plan + Themen die zeigen wofür du stehst — 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) => ( + {( + [ + { icon: , text: "Deinen Wunschkunden klar definiert — wer er ist, was er braucht, was er schon versucht hat" }, + { icon: , text: "Dein Angebot auf den Punkt gebracht — was du anbietest, welches Problem du löst" }, + { icon: , text: "Deine Positionierung in einem Satz — klar, sofort verständlich, für alle Kanäle nutzbar" }, + { icon: , text: "Die komplette Struktur für deine Verkaufsseite — mit Feedback zur Umsetzung" }, + { icon: , text: "Deine Marketing-Systemkarte — wie Sichtbarkeit, Vertrauen, Anfrage und Kauf zusammenhängen" }, + { icon: , text: "Deinen 90-Tage-Marketingplan + Entscheidung welche 2 Kanäle du fokussierst" }, + { icon: , text: "Deinen 4-Wochen Content-Plan + Themen die zeigen wofür du stehst — 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" }, + ] as { icon: React.ReactNode; text: string }[] + ).map(({ icon, text }, i) => (
- {icon} + {icon}

{text}

))} @@ -330,16 +338,16 @@ export default function Home() {
{[ - { 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. 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 €" }, + { 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. 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 }) => (
- {icon} + {icon} Wert: {val}

Bonus {n}