01 · The BriefA coach who outgrew social media
Nora is a spin bike coach with 10+ years of experience, a 1:35 half-marathon PR, and 200+ clients coached online. She delivers live 1-on-1 sessions via Google Meet — structured HIIT rides, hill climbs, endurance sessions, and beginner-friendly programs.
She needed more than an Instagram bio link. She needed a professional platform that communicates credibility, showcases her programs, handles booking, builds community, and publishes content — all without a monthly SaaS subscription or a page builder she'd outgrow in six months.
The goal: a site that converts visitors into booked trial rides within one scroll.
02 · Design SystemLime on beige — energy without shouting
The visual identity pairs a warm beige base (#F4F0E8) with an electric lime accent (#D4FF3D) — a combination that reads "athletic energy" without the typical gym-bro dark aesthetic. It's approachable, premium, and unmistakably fitness.
Headlines use Fraunces (serif) for warmth and personality. Body text uses Inter for clarity. All labels and metadata use JetBrains Mono — the same monospace discipline as the rest of the Invental portfolio. Italicized words get a lime underline highlight using a CSS gradient trick, adding visual punch without interrupting reading flow.
03 · What We BuiltFour pages, every pixel intentional
- Landing page — hero with coach photo and booking badge, animated marquee, 4 benefit stats (dark section), coach credentials, 4 workout programs with HIIT as hero card, weekly schedule table, 6 testimonials, community CTA, blog preview, contact form
- Blog — 12 articles with category filters (Training, Fat loss, Endurance, Beginner, Mindset, Nutrition), featured post, card grid with search
- Community hub — Saturday group ride details, Discord integration, 400+ member showcase grid
- Blog post template — long-form editorial layout with author byline, tags, and related articles
"Turn your spin bike into the best hour of your day."Nora — Nora Ride tagline
The schedule table is a conversion engine: specific days, specific times, specific calorie burns. It creates urgency and scarcity — "Next open slot: Tomorrow 6:30 AM EST" with a pulsing green dot. Every section pushes toward the booking modal.
04 · Tech DecisionsZero framework bloat
This site runs on vanilla HTML, CSS, and JavaScript — no React, no Next.js, no build step. For a coaching landing page with a booking form, frameworks add complexity without value.
CSS custom properties handle theming. IntersectionObserver powers scroll-triggered fade-ins. The booking modal is a native HTML dialog. Total JS: 83 lines. Lighthouse: 100/100.
05 · The ResultConcept to production in one week
Nora Ride went from first call to deployed site in one week. The site immediately started converting — the schedule table and testimonials provide the social proof and urgency that Instagram couldn't. The blog gives Nora a content engine for SEO, and the community page turns one-time riders into regulars.
No monthly fees. No vendor lock-in. A site she fully owns, running on Vercel's free tier, loading in under a second worldwide.
