Conversas Terapêuticas: Redaktionelle Sales-Landingpage
Eine redaktionelle, emotionale Sales-Landingpage für ein einjähriges therapeutisches Gruppenprogramm, gebaut als einzelne server-first Next.js-Seite mit einer clientseitigen GSAP-Animationsinsel.
Unabhängiges Projekt von Mode-Mitgründer Thiago Salvador, gezeigt als Kompetenzbeispiel, nicht als Mode-Kundenauftrag.
- Next.js
- React
- TypeScript
- Tailwind CSS
- GSAP
- ScrollTrigger
- SplitText
- Radix UI
- Vercel
Was es ist
Conversas Terapêuticas ist eine einjährige therapeutische Gruppenreise für Frauen, geleitet von der Psychoanalytikerin Manuela Xavier. Keine klinische Therapie, sondern ein therapeutischer Raum. Das Programm verspricht einen Weg über vier Trimester (Beziehungen, Körper & Lust, Arbeit & Geld, Selbstsabotage) mit aufgezeichneten Lektionen, Live-Zoom-Sessions, therapeutischen Übungen und einem geschlossenen Austauschraum.
Die Sales-Landingpage ist eine einzelne Next.js-Seite: Die Texte sind zentral aus dem realen Programm-Briefing gepflegt, das Layout bleibt ohne JavaScript vollständig lesbar, und Bewegung ist strikt additiv über eine clientseitige GSAP-Insel. Das Ergebnis ist eine redaktionelle Marketingfläche, die das Programm verkauft, ohne Produktfakten zu erfinden.
Funktionen
- Single-Page-Sales-Landing mit rund neun Scroll-Sektionen: Hero, Programmthese, Trimester, Leistungen, Preise, Termine und FAQ
- Zentrales Copy-Modul als Single Source of Truth für Seiteninhalte und JSON-LD (FAQPage und Course)
- Eine Client-Animationsinsel; Layout und Inhalte bleiben Server Components
- Scroll-gesteuerter Hero mit Video-Scrub, gepinnter horizontaler Trimester-Galerie, SplitText-Zeilenreveals und fließenden Hintergrundübergängen
- Designsystem mit enger Sechs-Farben-Palette, drei Typo-Stimmen (Anton, Instrument Serif, Archivo), Grain und handgebauten Highlight-Utilities
- Reduced-Motion und No-JS zuerst: Animationen erweitern den Inhalt, sperren ihn nie
- Safari-iOS-sicheres Layout mit isoliertem Overflow-Clipping, damit fester Header und Ticket zuverlässig bleiben
Technische Highlights
Server-first Architektur
Die gesamte Seite ist eine Server Component. Die einzige Client-Grenze ist eine einmal gemountete GSAP-Insel, die null zurückgibt. So bleiben SEO, Lesbarkeit und Performance erhalten, während leistungsfähige Geräte trotzdem filmische Scroll-Bewegung bekommen.
GSAP-ScrollTrigger-Storytelling
Zwei lange Pins (Hero-Video-Scrub plus horizontale Trimester-Spur), matchMedia-Gates für Desktop und prefers-reduced-motion, SplitText-Zeilenreveals und Data-Attribut-Verträge zwischen statischem JSX und der Animationsinsel.
Copy als Produktwahrheit
Programmfakten, Termine, Preise, Gastnamen und FAQs liegen in einem typisierten Copy-Modul aus dem realen Programm-Briefing und speisen UI und strukturierte Daten, damit das Marketing nie vom realen Angebot abweicht.
Redaktionelles Designsystem
Tailwind-v4-Theme-Tokens, Display-, Voice- und Body-Schriften, harte Schatten sowie eigene Highlight- und Kreis-Utilities, die CSS standardmäßig vollständig zeichnet und GSAP beim Eintreten animiert.
Barrierefreiheit und Robustheit
Inhalte bleiben mit deaktiviertem JavaScript oder bevorzugter reduzierter Bewegung vollständig sichtbar. Fluide clamp()- und svh-Größen halten die Sektionen ohne feste Pixelgrößen im Viewport.
Projektdaten
- Projekttyp
- Marketing / Sales-Landingpage
- Kunde
- Manuela Xavier (Conversas Terapêuticas)
- Produkt
- Einjähriges therapeutisches Gruppenprogramm (nur für Frauen)
- Stack
- Next.js 16, React 19, TypeScript, Tailwind CSS v4, GSAP mit ScrollTrigger und SplitText, Radix Accordion
- Architektur
- Eine Seite, eine Animationsinsel, Copy-getriebene Inhalte
- Status
- Produktionsreife Landingpage (Checkout-Anbindung ausstehend)
Ergebnisse
- Produktionsreife redaktionelle Landingpage, die ein komplexes Jahresprogramm kommuniziert, ohne Produktfakten zu erfinden
- Seite bleibt ohne JavaScript und unter prefers-reduced-motion vollständig lesbar und liefert auf dem Desktop trotzdem filmisches GSAP-Storytelling
- Zentralisierte Programmtexte, damit UI und JSON-LD mit dem realen Briefing synchron bleiben (Termine, Preise, Gäste, FAQs)
- Safari-iOS-Probleme mit fixed-Positionierung gelöst, indem das Overflow-Clipping vom Dokument-Root isoliert wurde
- Wiederverwendbares Muster für Brand-Landings etabliert: Server-Inhalte, eine Motion-Insel und Data-Attribut-Animationsverträge