Sonder Landing Page — Handoff to Abdul
Static landing page for yousonder.com. Replaces the current Lovable build. Built to brand v2.1 (Plum Black + Aurora Mint, Magician/Effortless archetype).
What this is
A single-file static site. No build step, no framework, no npm install. Three files (index.html, style.css, app.js) plus an assets/ folder. Open index.html in any browser and the whole site runs locally.
Tech stack:
- Vanilla HTML / CSS / JS — zero dependencies installed locally
- GSAP 3.12 (loaded from jsDelivr CDN, used for scroll choreography)
- Wistia Player (loaded from
fast.wistia.com, used for the tutorial + showcase reels)
- Inter + Nunito fonts (loaded from Google Fonts)
That means deploying is just: upload the folder to any static host. That's it.
How to deploy (pick one)
Option A — Vercel (recommended, free tier)
cd "Landing Page"
npx vercel
Drag the folder onto vercel.com → New Project → "Deploy as static." Vercel will give you a preview URL. Then add yousonder.com as a custom domain in Vercel project settings.
Option B — Netlify drop
- Go to https://app.netlify.com/drop
- Drag the entire
Landing Page folder onto the drop zone.
- Netlify gives you a URL immediately. Point
yousonder.com to it via DNS.
Option C — Cloudflare Pages
- Push to a Git repo, connect it to Cloudflare Pages.
- Build command: (none). Output directory: (root). Deploy.
Option D — Anything that serves static files
S3 + CloudFront, GitHub Pages, traditional shared hosting — all fine. Just upload the folder. Set index.html as the default document.
Total page weight: ~25 MB once all hero frames are loaded (the bulk is the 168-frame scroll-driven hero video). On a modern CDN with image compression this delivers in 2–3 seconds on 4G.
⚠️ Before going live — 4 things to wire up
These are placeholders right now. Search for the marker in the code, swap the value, and you're done.
1. CTA destinations
Search: https://yousonder.com/pricing
Currently: every "Be seen →" button across the page points to yousonder.com/pricing (with ?tier=starter/?tier=author/?tier=studio/?tier=agency on the pricing-tier buttons).
Action: confirm yousonder.com/pricing exists in the Sonder app. If the pricing page is somewhere else (/upgrade, /checkout, etc.) update the URLs.
2. Exit-intent form submission
File: app.js
Search: [Sonder free-video claim]
Currently: the form just console.logs the email + first name when submitted, then shows a "Welcome. Check your inbox" success state.
Action: replace the console.log line with a real fetch() POST to whatever endpoint Sonder uses for leads — Mailchimp, HubSpot, ConvertKit, or a Sonder backend route. Payload object is already built ({ firstname, email, source, ts }).
3. Footer + nav links currently set to #
Search: href="#"
Currently: these go nowhere — Sign in, Manifesto, Founders link in footer, Terms, Privacy, Contact.
Action: wire each to its real destination. Or remove them from the footer if they don't have pages yet.
4. Wistia player permissions
The 9 Wistia videos are embedded by media-id. In Wistia → Customize → Embed & Share → check that embeds are allowed for the yousonder.com domain. If you don't add the production domain to the allowlist, the player will refuse to embed and show an error in production. Currently it works on localhost because Wistia permits localhost by default.
Wistia media-IDs in use (search data-wistia-id to see them all):
- Tutorial walkthrough:
oenqanb3ej
- European Cartoon:
le99g7qi7f
- Expert Podcaster:
1ymppelyqm
- Neon Wireframe:
2tnccunxqx
- Expert Panelist:
xqg4ugdw8z
- Yellow Cartoon:
ebeee2cm3z
- Expert Speaker:
ejw6zhrgpo
- Skeleton:
66x1be2gyp2um9n (this is the share-ID, real media-id resolves automatically)
- Stick Figure:
gi0j9axtu9roe4n (same)
This is the beginning of the README. Read the rest at the original. Read the full README ↗
