Booking Page — "Request a Key"

Requirements: just a browser and a text editor to preview/edit; a local static server, Supabase project, and Stripe account are optional and only needed to make the form actually submit and take payment — full walkthrough in SETUP.md.

A single-file, Cameo-style video-request booking page. Black-and-gold, mobile-first, built with a Chivo Mono / Space Mono / Doto type system. Visitors pick a request type, fill in details, add optional upgrades, and submit — the page is wired to POST straight to a Supabase table and kick off a Stripe checkout via a Supabase Edge Function.

What's in the box

• index.html — the entire page. No build step, no framework, no dependencies beyond two external services you plug in yourself:
• Google Fonts (Chivo Mono, Space Mono, Doto) loaded via <link> tags
• A Supabase REST endpoint + Edge Functions for submitting the booking and creating a Stripe Checkout session
• Optional analytics hook for PostHog (disabled by default — see below)

The page includes: - A profile header, sample-clip strip, scarcity/social-proof line, and a live-activity ticker (the ticker text is hardcoded sample copy — replace it) - A 6-option request-type picker that expands into a details form - Two optional add-ons (priced) and a running total - Client-side form validation - Three end states: request-submitted fallback, payment-success, payment-cancelled

Quickstart

1. Open index.html in a browser. It renders and is fully interactive with no backend — form submission will fail gracefully until you connect the pieces below.
2. Swap the copy: business name, request types (#choices), prices (data-price, BASE_PRICE in the script), reviews, footer contact link.
3. Swap the images: the <img> tags point at images/... paths that are not included in this template (personal photos were intentionally left out). Drop in your own and update the src attributes.
4. Wire up submission (optional — the form works as a static page without this):
5. Create a Supabase project with a bookings table matching the payload object in the submit handler (id, service, name, email, phone, instagram, duration, preferred_date, preferred_time, location, offer_amount, details, status).
6. Replace YOUR_PROJECT_REF and YOUR_SUPABASE_ANON_KEY (both marked keyzhub-allow in the file) with your real project ref and anon key. There are three places: the CSP <meta> tag near the top, and SUPABASE_URL / SUPABASE_KEY / FUNCTIONS_BASE in the script near the bottom.
7. Write two Supabase Edge Functions the page already calls:
   • booking-email — fire-and-forget notification on new booking
   • create-checkout — creates a Stripe Checkout Session and returns { checkout_url }
8. On successful Stripe checkout, redirect back to this page with ?payment=success&booking_id=... (or ?payment=cancelled&booking_id=...) — the page already handles both query params on load.
9. (Optional) Analytics: the page has a no-op PostHog snippet. It stays inert until you replace __POSTHOG_KEY__ with a real phc_... project key.
10. Deploy anywhere that serves static files — Vercel, Netlify, GitHub Pages, S3, etc. There's nothing to build.

Make it your own

This is a template, not a live integration — nothing will submit successfully until you connect your own Supabase project and Edge Functions. Everything else (copy, prices, request types, images, contact links) is yours to replace.