The brief
RAX Training, led by coach Shiraz Kabeer, runs a 120-day online body-transformation program for busy 9–5 professionals. They needed more than a brochure — they needed an application funnel: a site that turns their brand deck into a premium digital experience and drives serious applicants to WhatsApp and email.
What we delivered
A single-page marketing site with a dark, editorial design language built entirely around the brand: grayscale photography, sharp hairline borders, zero rounded corners, and a serif/sans/mono typography system (Playfair Display, Poppins, Space Mono). Every section carries magazine-style detailing — uppercase letterspaced eyebrows, corner index labels, and giant outlined watermark type behind the content.
Hand-drawn hero type
The hero headline literally draws itself in like a pencil sketch on page load — the first thing a visitor sees is the brand's discipline made visible.
Scroll-driven day counter
A live "Day 033 / 120" counter in the navigation advances as you scroll the page — the program's structure embedded in the browsing experience itself.
Animated 120-day ruler
A ruler timeline visualizes the program's four phases, so the methodology is understood at a glance.
Tactile transformations
Real client before/after photos with a hover reveal — the "Day 120" photo expands as the "Before" dims. Proof, made interactive.
Brand-deck image pipeline
All photography extracted from the client's brand deck and processed into an optimized grayscale pipeline — most photos under 70 KB as WebP.
Application funnel
Every section drives one action: apply for the next intake — straight to WhatsApp and email, with zero friction.
Engineering
- Built with Astro — fully static HTML, near-zero JavaScript shipped to the browser; the only scripts are small vanilla-JS islands for motion.
- Deployed on Cloudflare Pages, served from a global edge CDN.
- Optimized WebP imagery (most photos under 70 KB), self-hosted fonts, lazy-loading below the fold.
- Accessibility built in: semantic landmarks, visible focus states, descriptive alt text, and full prefers-reduced-motion support — every animation degrades gracefully.
- SEO-ready with canonical URLs, Open Graph and Twitter cards, and a branded social-share image.
Cloudflare Pages
Vanilla JS Islands
WebP Pipeline
A11Y + Reduced Motion
The result
A fast, distinctive, conversion-focused site shipped from brand deck to production deployment — with a clear path for Phase 2: a structured application form backed by Cloudflare D1.
Your brand deserves more than a template.
This site was built from nothing but a brand deck and a conversation. If you want a digital presence as distinctive as your business, start the conversation.