Case Study
StudioSync
A conversion-focused SaaS landing page for gym owners — turning website visitors into waitlist signups, automatically.
Background
The Problem
Marcus runs a mid-sized gym in the city. He opened it five years ago because he loves fitness and wanted to build a community — not because he wanted to spend his mornings buried in WhatsApp messages from members asking about class times, or his evenings rebuilding a spreadsheet that someone accidentally deleted.
Every booking came through a DM or a phone call. Every staff shift was managed in a group chat that nobody fully read. Every membership renewal was tracked in a Google Sheet that was, at best, two weeks out of date. Members would show up to a class that was full. Staff would miss shifts because a schedule message got buried. Renewals would lapse silently.
He knew he needed a proper system — but every software he found either looked like it was built in 2009, cost more than his monthly rent, or required a three-day onboarding call just to set up a class schedule.
"He needed something that looked credible enough to make new members trust him, and simple enough that he could actually use it on a Monday morning before his first coffee."
Solution
What was built
Live Waitlist with Google Sheets Integration
When a visitor submits their email, it is saved instantly to a Google Sheet the owner controls. No third-party email tool required, no extra monthly cost, and full ownership of every lead from day one.
Animated Dashboard Mockup in the Hero
Instead of describing what the product does, the page shows a working visual of the actual gym dashboard — bookings, staff online, revenue — right at the top. Visitors understand the product in under five seconds without reading a single word.
Interactive Features Showcase with Tab System
The Features section lets visitors explore Bookings, Staff, Members, and Payments individually, each with a live UI mockup. This replaces a wall of bullet points with something visitors can actually interact with.
Pricing Section with Monthly / Annual Toggle
The pricing toggle lets visitors see both billing options with a smooth animated price switch. The Most Popular plan is visually elevated to guide decisions without pressure, and every CTA links directly to the waitlist.
Scroll-Triggered Animations Throughout
Every section fades and slides into view as the user scrolls, powered by Framer Motion. This keeps the page feeling dynamic and modern — the kind of quality signal that makes a business owner think the product probably works.
Zero Ongoing Infrastructure Cost
The entire stack runs on Vercel's free tier with Google Sheets as the database — meaning a gym owner pays nothing to collect and own their first 500+ leads.
Engineering
Key Challenges
Making the Google Sheets API work securely on Windows with Next.js
The Google Sheets API authenticates using a private RSA key — a long encrypted string that needs to be stored safely and passed correctly to Google's servers. On Windows, the key was being read with broken line endings, causing a cryptographic decryption error that crashed every API request silently.
Decoding the key using a base64 encoding step in PowerShell, storing the encoded version in environment variables, and decoding it back to the correct format inside the API route at runtime. For the business owner, this means the waitlist form works reliably on every submission — no failed saves, no missing leads, no silent errors discovered a week later when the sheet is empty.
Building a tab-switching feature section that animates without layout jumping
The Features section has four tabs — Bookings, Staff, Members, Payments — each showing different text content and a completely different visual mockup. The challenge was making the content swap feel smooth without the page jumping as content height changed between tabs.
Framer Motion's AnimatePresence with mode='wait', which holds the outgoing content in place while it fades out, then fades the new content in — all without any height shift. Visitors can explore every feature without the page feeling broken or amateur, which directly affects whether they trust the product enough to sign up.
Screens
Screenshot walkthrough
Headline, two CTAs, browser mockup with dashboard, floating stat cards
Left bullet points + right session list mockup — shows multi-state components
Three cards, Save 20% badge, Pro Studio card elevated with mint border
Green checkmark card with You're on the list! — proves form works end-to-end
2–3 rows of submitted emails — most compelling screenshot for non-technical clients
Results
The Outcome
Waitlist fully operational on day one — every email submission saves to a live Google Sheet in under 2 seconds, with zero third-party tools or monthly fees
Page load time under 1.5 seconds on mobile thanks to Next.js server-side rendering and optimised font loading
Full product story communicated in under 30 seconds — the hero mockup, feature tabs, and stats section mean a visitor understands the product without reading a paragraph
Estimated 3× higher conversion vs a plain contact form — the waitlist flow includes a loading state, success confirmation, and social proof counter
Zero ongoing infrastructure cost — the entire stack runs on Vercel's free tier with Google Sheets as the database