Pera Gibbs Movement
A cinematic, GSAP-driven coaching site built to turn Instagram followers into paying athletes.
Pera Gibbs is a strength & conditioning and rugby skills coach who's worked with international-level athletes across rugby, netball, and other team sports. He had a strong Instagram following but no website to match it - incoming interest had nowhere credible to land. I designed and built a full marketing and coaching-sales website from scratch: a monochrome, editorial-feeling brand with Next.js, Tailwind CSS, GSAP, and Framer Motion, built to convert social attention into booked coaching clients.
Pera's brief was simple to state and hard to execute well: a "slick, professional" site with minimal friction between an Instagram visitor and a signed-up athlete, built around real testimonials from athletes like Black Ferns Sevens and All Blacks players. The design needed to feel premium and cinematic - GSAP scroll effects, custom typography, a considered color system - without tipping into gimmicky or "vibe-coded." The services section carried real pricing complexity (three coaching tiers, weekly vs. upfront billing, in-person vs. online), and the whole thing needed to work cleanly on both desktop and mobile from day one.
I built a fully custom component system: a scroll-aware navbar, a cinematic masked-reveal hero, an alternating light/dark section rhythm (About → Logos → Services → Skills → Testimonials → Gallery → FAQ), and a dynamic pricing section with an animated billing toggle and an expandable comparison table. Testimonials got a dedicated featured-plus-grid page in addition to an auto-scrolling, drag-and-touch-enabled marquee on the homepage. A lead-capture modal gates the downloadable programme guides, feeding Pera's cold-outreach pipeline. Every animation - GSAP Scroll Trigger for scroll-tied motion, Framer Motion for interactive hover/tilt states - was tuned iteratively against real feedback until it read as deliberate rather than decorative. Self-hosted Lemon Milk typography, a custom light blue/navy accent system, and full legal documentation (Privacy Policy, Terms, Refund Policy) rounded out a production-ready site.
