Conversas Terapêuticas – Editorial Sales Landing
What It Is
Conversas Terapêuticas is a year-long therapeutic group journey for women, led by psychoanalyst Manuela Xavier — not clinical therapy, but a therapeutic space. The product promise is a four-trimester path (Relationships, Body & Pleasure, Work & Money, Self-sabotage) with recorded lessons, live Zoom sessions, therapeutic exercises, and a closed exchange space. I designed and built the sales landing as a single Next.js page: copy is centralized from the real program brief, the layout stays fully readable without JS, and motion is strictly additive through one client-side GSAP island. The result is an editorial, high-emotion marketing surface that sells the program without inventing product facts.
Features
Single-page sales landing with ~9 scroll sections covering hero, program thesis, trimesters, deliverables, pricing, dates, and FAQ
Centralized copy module as the single source of truth for page content and JSON-LD (FAQPage + Course)
One client animation island (PageAnimations) — layout and content stay as Server Components
Scroll-driven hero with video scrub, pinned horizontal trimester gallery, SplitText line reveals, and fluid section background transitions
Design system with a tight 6-color palette, three type voices (Anton / Instrument Serif / Archivo), grain, and hand-authored highlight utilities
Reduced-motion and no-JS first: animations enhance, never gate, the content
Safari iOS-safe layout (overflow clip isolated so fixed header/ticket stay reliable)
Technical Highlights
Server-first architecture
The entire page is a Server Component. The only client boundary is a mounted-once GSAP island that returns null — preserving SEO, readability, and performance while still delivering cinematic scroll motion on capable devices.
GSAP ScrollTrigger storytelling
Two long pins (hero video scrub + horizontal trimester track), matchMedia gates for desktop and prefers-reduced-motion, SplitText line reveals, and data-* attribute contracts between static JSX and the animation island.
Copy as product truth
Program facts, dates, prices, guest names, and FAQs live in a typed copy module sourced from the Esteira 2026 brief — feeding both the UI and structured data so marketing never drifts from the real offer.
Editorial design system
Tailwind v4 theme tokens (branco/papel/bege/tinta/rosa/neon), display/voice/body fonts, hard shadows, and custom highlight/circle utilities that CSS draws fully by default and GSAP sweeps on enter.
Accessibility & resilience
Content remains fully visible with JavaScript disabled or reduced motion preferred. Fluid clamp()/svh sizing keeps sections fitting the viewport without fixed pixel type.
Key Features
PROJECT TYPE: Marketing / sales landing page
CLIENT: Manuela Xavier — Conversas Terapêuticas
PRODUCT: Year-long group therapeutic program (women only)
STACK: Next.js 16, React 19, TypeScript, Tailwind CSS v4, GSAP + ScrollTrigger + SplitText, Radix Accordion
ARCHITECTURE: One page, one animation island, copy-driven content
MOTION: Scroll-scrubbed hero, pinned horizontal gallery, fluid background plane
STATUS: Production-ready landing (checkout wiring pending Hotmart)
Results
Shipped a production-ready editorial landing that communicates a complex year-long program without inventing product facts.
Kept the full page readable with no JavaScript and under prefers-reduced-motion while still delivering cinematic GSAP storytelling on desktop.
Centralized program copy so UI and JSON-LD stay in sync with the real Esteira 2026 brief (dates, prices, guests, FAQs).
Solved Safari iOS fixed-position pitfalls by isolating overflow clipping away from the document root.
Established a reusable pattern for brand landings: server content + single motion island + data-* animation contracts.