From a5b0e4c9a60037421eeaf4ee5c2636e5866d0a4a Mon Sep 17 00:00:00 2001 From: Athena Date: Thu, 30 Apr 2026 22:06:50 +0200 Subject: [PATCH] =?UTF-8?q?feat:=20scroll-animierte=20Zick-Zack=20Timeline?= =?UTF-8?q?=20f=C3=BCr=20alle=208=20Wochen?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - WeekTimeline Client-Component mit IntersectionObserver - Woche 1,3,5,7 erscheint von links — Woche 2,4,6,8 von rechts - Vertikale Gradient-Linie in der Mitte (indigo → violet) - Nummerierter Dot auf der Linie pro Woche - Modul-Divider (1/2/3) als animierte Trennelemente - CSS-Transitionen: opacity + translateX, 0.6s ease - Expert-Badges auf den Karten (Can, Stefan & Philipp, Manuela) Co-Authored-By: Claude Sonnet 4.6 --- src/app/components/WeekTimeline.tsx | 247 ++++++++++++++++++++++++++++ src/app/globals.css | 15 ++ src/app/page.tsx | 102 +----------- 3 files changed, 264 insertions(+), 100 deletions(-) create mode 100644 src/app/components/WeekTimeline.tsx diff --git a/src/app/components/WeekTimeline.tsx b/src/app/components/WeekTimeline.tsx new file mode 100644 index 0000000..588e77e --- /dev/null +++ b/src/app/components/WeekTimeline.tsx @@ -0,0 +1,247 @@ +"use client"; + +import { useEffect, useRef } from "react"; + +interface Week { + week: string; + expert?: string; + title: string; + body: string; + vorlagen: string; + result: string; +} + +interface Module { + label: string; + headline: string; + weeks: Week[]; +} + +const MODULES: Module[] = [ + { + label: "Modul 1 — Wochen 1 & 2", + headline: "Wunschkunde, Angebot, Positionierung", + weeks: [ + { + 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.", + }, + { + 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 und LinkedIn", + result: "Dein Angebot klar auf den Punkt — erklärt in einem Satz.", + }, + ], + }, + { + label: "Modul 2 — Wochen 3 & 4", + headline: "Dein System steht.", + weeks: [ + { + 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.", + }, + { + 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.", + }, + ], + }, + { + label: "Modul 3 — Wochen 5–8", + headline: "Sichtbarkeit. Anfragen. Und du weißt wie es weitergeht.", + weeks: [ + { + week: "Woche 5", + expert: "Can Turkdogan · Social Media", + 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.", + }, + { + week: "Woche 6", + expert: "Stefan & Philipp · Onlinewerbevideo", + 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.", + }, + { + 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.", + vorlagen: "Persönliches Verkaufsskript · Follow-up-Template · Event-Recherche-Guide", + result: "Dein Verkaufsskript für die Direktansprache — einmal geübt.", + }, + { + week: "Woche 8", + expert: "Katja Pestereva · 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. 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.", + }, + ], + }, +]; + +/* Running week counter so odd/even alternates across all modules */ +let globalWeekIndex = 0; + +function WeekCard({ week, isLeft }: { week: Week; isLeft: boolean }) { + const ref = useRef(null); + + useEffect(() => { + const el = ref.current; + if (!el) return; + const obs = new IntersectionObserver( + ([entry]) => { + if (entry.isIntersecting) { + el.classList.add("tl-visible"); + obs.disconnect(); + } + }, + { threshold: 0.15 } + ); + obs.observe(el); + return () => obs.disconnect(); + }, []); + + return ( +
+
+ {/* Header */} +
+ + {week.week} + + {week.expert && ( + + {week.expert} + + )} +
+ {/* Title */} +

{week.title}

+ {/* Body */} +

{week.body}

+ {/* Vorlagen */} +

+ 📋 {week.vorlagen} +

+ {/* Result */} +

✓ {week.result}

+
+
+ ); +} + +export default function WeekTimeline() { + /* Reset global counter each render (SSR-safe: only matters client-side) */ + globalWeekIndex = 0; + + return ( +
+
+ {/* Section header */} +
+ + + 8 Wochen · Schritt für Schritt + +

+ Dein Programm — Woche für Woche +

+

+ Jede Woche baut auf der nächsten auf. Am Ende hast du kein Zertifikat — sondern ein fertiges System. +

+
+ + {MODULES.map((mod) => ( +
+ {/* Module divider */} + + + {/* Weeks */} +
+ {/* Vertical timeline line */} +
+ +
+ {mod.weeks.map((week) => { + const isLeft = globalWeekIndex % 2 === 0; + globalWeekIndex++; + return ( +
+ {/* Timeline dot — centered */} +
+ + {week.week.replace("Woche ", "")} + +
+ +
+ ); + })} +
+
+
+ ))} +
+
+ ); +} + +function ModuleDivider({ label, headline }: { label: string; headline: string }) { + const ref = useRef(null); + + useEffect(() => { + const el = ref.current; + if (!el) return; + const obs = new IntersectionObserver( + ([entry]) => { + if (entry.isIntersecting) { + el.classList.add("tl-visible"); + obs.disconnect(); + } + }, + { threshold: 0.2 } + ); + obs.observe(el); + return () => obs.disconnect(); + }, []); + + return ( +
+
+
+ + {label} + +
+
+

{headline}

+
+ ); +} diff --git a/src/app/globals.css b/src/app/globals.css index 495798a..fae95fc 100644 --- a/src/app/globals.css +++ b/src/app/globals.css @@ -58,3 +58,18 @@ body { } details summary::-webkit-details-marker { display: none; } + +/* ── Timeline scroll animations ── */ +.tl-card { + opacity: 0; + transition: opacity 0.6s ease, transform 0.6s ease; +} + +.tl-from-left { transform: translateX(-56px); } +.tl-from-right { transform: translateX(56px); } +.tl-from-bottom{ transform: translateY(40px); } + +.tl-card.tl-visible { + opacity: 1; + transform: translateX(0) translateY(0); +} diff --git a/src/app/page.tsx b/src/app/page.tsx index 9779d04..99da417 100644 --- a/src/app/page.tsx +++ b/src/app/page.tsx @@ -1,4 +1,5 @@ import Image from "next/image"; +import WeekTimeline from "./components/WeekTimeline"; const CTA_HREF = "#platz-sichern"; @@ -35,39 +36,6 @@ function IconCard({ icon, title, sub }: { icon: string; title: string; sub: stri ); } -function ModuleCard({ week, expert, title, body, vorlagen, result }: { - week: string; expert?: string; title: string; body: string; vorlagen: string; result: string; -}) { - return ( -
- {/* Thumbnail */} -
-
-
- - - - Video -
- - {week} - - {expert && ( - - {expert} - - )} -
- {/* Content */} -
-

{title}

-

{body}

-

{vorlagen}

-

✓ {result}

-
-
- ); -} export default function Home() { return ( @@ -255,73 +223,7 @@ export default function Home() {
- {/* ══════════════════════════════════════════ - MODUL 1 — Thumbnail Cards - ══════════════════════════════════════════ */} -
-
- Modul 1 — Wochen 1 & 2 -

Wunschkunde, Angebot, Positionierung — alles klar auf den Punkt.

-
- - -
-
-
- - {/* ══════════════════════════════════════════ - MODUL 2 - ══════════════════════════════════════════ */} -
-
- Modul 2 — Wochen 3 & 4 -

Dein System steht.

-
- - -
-
-
- - {/* ══════════════════════════════════════════ - MODUL 3 - ══════════════════════════════════════════ */} -
-
- Modul 3 — Wochen 5–8 -

Sichtbarkeit. Anfragen. Und du weißt wie es weitergeht.

-
- - - - -
-
-
+ {/* ══════════════════════════════════════════ VORHER / NACHHER