Proof of concept

Every screen, and what it proves

Twenty-eight static HTML pages, no backend and no build step. Open any of them from disk or a static server.

Before you start

There is a control at the bottom left of every page: Visitor · Free · Premium · Admin. It switches the account state instantly, so you can see the same page from every side without signing in and out.

You can also append ?demo=premium to any address to land in that state directly.

The one journey to walk first

Five minutes, and it covers everything the brief asked for.

Set the control to Visitor. Open the library — every premium class is blurred and locked. Press Re-run the check at the foot of that page: no embed address exists in the page, and vault.js was never requested.
Browse the schedule and book a class. The capacity bar moves and a credit is spent.
Try to watch a premium class. You get the gate, not the video.
Upgrade through checkout with Bizum. Any 6xx or 7xx number. The bank-app confirmation runs and the account is promoted.
The library unlocks and the class plays from the external host — and the booking you made in step 2 is still there.
Switch the control to Admin and open Videos to add a class, then SEO & GEO for the search module.

Public site

The marketing surface. Alternating oxblood and white plates, real HTML, full structured data.

Home

The showpiece. Hero, the six things the studio sells, a live class ticker, a locked library preview, programmes, pricing and the drawn map of the old town.

Try this: Open the demo controls at the bottom left and switch between Visitor and Premium — the locked video rail changes in place.

Class schedule

22 classes a week, filterable by day, format, style and level. Booking, waitlists, capacity meters and the six-hour cancellation rule.

Try this: Book a class and watch the credit balance and the capacity bar move.

Prices

Drop-in, bonos, monthly, the online library and the combined plan, plus a comparison table and a gift-card calculator.

Try this: This is the Spanish studio pricing model — class packs, not just subscriptions.

Styles we teach

One section per style with levels, length, props and who it suits. Course schema on each.

Try this: Written for the person choosing a first class, which is who actually reads this page.

Retreats

Three retreats with day schedules, what is included, places left and deposit payments.

Try this: Event schema on all three, with real dates and offers.

About Cristina

Story, teaching approach, a timeline and the other teachers. Person schema with credentials.

Try this: This page carries the E-E-A-T signal that both Google and the answer engines look for.

Journal

The SEO content hub, filterable by topic.

Try this: Six posts, each with an answer-first block.

A journal post

Answer block, table of contents, full body, author box and FAQs — with Article and FAQPage schema generated from the real content.

Try this: Change the ?p= parameter to load any of the six posts.

Contact

NAP block, the drawn map, opening hours and three separate enquiry forms.

Try this: Private sessions and group events are real revenue lines for this studio.

Yoga in Chiclana

The service-area page: facts table, travel times from six towns, the full timetable and six searched-for questions.

Try this: This is the template for Conil and Cádiz. It is the single highest-value page for local search.

Joining and paying

Free account, upgrade, and a payment flow built for Spain.

Sign in / create

Tabbed access with validation and a password strength meter. Three one-click prototype accounts.

Try this: Use the Free / Premium / Admin buttons to jump straight into any state.

Upgrade

What a membership opens, three plans, and a taste of the locked library.

Try this: Arrive here from any locked video and the page names the class you were trying to watch.

Checkout

Bizum, card, wallet and SEPA. IVA broken out, discount codes, trust badges.

Try this: Choose Bizum, enter any 6xx or 7xx mobile number, and watch the bank-app confirmation flow. This is the module most agencies leave out.

Confirmation

The unlock moment, a real receipt with IVA, and three classes to start with.

Try this: Note the line confirming existing bookings survived the upgrade.

Member area

Dark, because the real use case is a practice at 21:40 with the shutters closed.

My practice

Next booking, continue watching, streak ring, minutes practised, and recommendations driven by a four-question onboarding quiz.

Try this: Press “Tune these” and change the answers — the recommendations rebuild from what you say.

Shala Online

Category rails, five filter groups, search and sort. Locked and unlocked states.

Try this: Signed out, open the panel at the bottom and press “Re-run the check” — it proves no embed address is in the page.

Player

Privacy-enhanced external embed, chapters, props, contraindications, notes and a printable sequence.

Try this: As a Visitor this shows the gate. As Premium the vault loads and the video plays.

My bookings

Upcoming and past classes, the credit wallet, waitlist count and calendar export.

Try this: Every booking exports a real .ics file.

Membership

Plan, payment method, invoices, preferences, pause, cancel and GDPR data controls.

Try this: The cancel flow offers a pause first, which is how you keep members.

Studio admin

Everything the teacher runs the business from, in one place.

Overview

MRR, members, churn, occupancy, a hand-drawn revenue chart and an occupancy heatmap by day and hour.

Try this: The heatmap flags Saturday 13:00 running at a third full — that is the kind of thing that pays for a platform.

Videos

The library table with search and filters, bulk actions, a full add/edit drawer and category management.

Try this: The editor tells you the exact Vimeo privacy settings to use, and recognises a pasted Vimeo or YouTube address.

Classes

A week grid plus a table, with a full class editor and the booking rules.

Try this: Cancellation window, waitlist promotion and member priority are all configurable here.

Bookings

Class registers with check-in switches, waitlist promotion, manual bookings and CSV export.

Try this: Promote someone off the waitlist and watch what the studio would send them.

Members

Every account with plan, status, credits, lifetime value and last practice, plus a detail drawer.

Try this: Open Pablo Herrera — a failed-payment account with the dunning state shown.

Payments

Transactions, the Bizum-versus-card split, failed-payment recovery, IVA summary and lifecycle emails.

Try this: Bizum is the largest slice, which is what a real Spanish studio looks like.

SEO & GEO

Per-page metadata with a live Google preview, a schema picker with live JSON-LD, local search, and a panel for the answer engines.

Try this: This is the module that answers the brief's SEO and GEO requirement, and the one no template ships with.

Supporting files

The parts of the SEO and GEO work that are not pages.

What this prototype does not do

Said plainly, so nothing is a surprise later.

No real authentication — account state lives in the browser only.
No money moves. Stripe and Bizum are simulated faithfully but nothing is charged.
No database. All content comes from one seed file, assets/js/data.js.
No email is sent; the lifecycle templates are shown, not wired.
Video playback uses public placeholder films so the player works. Production serves the studio's own private uploads.
The interface is in English. The SEO layer already targets Spain and carries the es-ES hreflang; the Spanish copy is a translation pass, not a rebuild.

What it does prove

The full journey from visitor to paying member works end to end.
The video gate is real and inspectable, not a claim.
Bizum, class packs and waitlists — the things a Spanish studio actually needs.
One admin surface covers videos, categories, classes, bookings, members and payments.
Every page carries correct, validated structured data.