Conversas Terapêuticas: Editorial Sales Landing
An editorial, high-emotion sales landing for a year-long therapeutic group program, built as a single server-first Next.js page with one client-side GSAP animation island.
Independent project by Mode co-founder Thiago Salvador, shown as a capability example, not as a Mode client engagement.
- Next.js
- React
- TypeScript
- Tailwind CSS
- GSAP
- ScrollTrigger
- SplitText
- Radix UI
- Vercel
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 program 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.
The sales landing is a single Next.js page: copy is centralized from the real program brief, the layout stays fully readable without JavaScript, and motion is strictly additive through one client-side GSAP island. The result is an editorial marketing surface that sells the program without inventing product facts.
Features
- Single-page sales landing with around nine 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 and Course)
- One client animation island; 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 six-color palette, three type voices (Anton, Instrument Serif, Archivo), grain and hand-authored highlight utilities
- Reduced-motion and no-JS first: animations enhance the content, never gate it
- Safari iOS-safe layout with overflow clipping isolated so the fixed header and 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 plus 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 real program brief, feeding both the UI and structured data so marketing never drifts from the real offer.
Editorial design system
Tailwind v4 theme tokens, display, voice and body fonts, hard shadows, and custom highlight and circle utilities that CSS draws fully by default and GSAP sweeps on enter.
Accessibility and resilience
Content remains fully visible with JavaScript disabled or reduced motion preferred. Fluid clamp() and svh sizing keeps sections fitting the viewport without fixed pixel type.
Project facts
- 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 with ScrollTrigger and SplitText, Radix Accordion
- Architecture
- One page, one animation island, copy-driven content
- Status
- Production-ready landing (checkout wiring pending)
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 program 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, a single motion island and data-attribute animation contracts