beckstage-web
The public marketing site for Beckstage, served at https://beckstage.music.
The app itself lives at app.beckstage.music (repo beckstage-fe).
Astro (static output) + React islands for the four interactive parts: How it
works (the two phones under the hero), Who's Beckstage for?, Pricing and the
FAQ. Everything else — the hero included, which is the claim only — is plain
HTML with no JavaScript.
Run it
npm install
npm run dev # http://localhost:4321
npm run build # static site in dist/
npx astro check # type-check (CI runs this too)
Change the site
| What | Where |
|---|
| Any copy, prices, FAQ, links | src/data/site.ts (single source of truth) |
| Styles and design tokens | src/styles/site.css |
| Page order and meta tags | src/pages/index.astro |
| Share image (1200×630) | public/og.png |
| How it works (two phones) | src/components/how-it-works/ + src/styles/how-it-works.css |
| Legal pages | src/data/legal.ts (copy) · src/components/legal/ · src/styles/legal.css |
- Sign-up and log-in buttons point at
LINKS.signup / LINKS.login.
- The Get the app band and its store badges stay hidden until both
LINKS.appStore and LINKS.googlePlay are set.
- Legal pages:
/privacy and /terms (src/pages/privacy.astro,
terms.astro, both src/components/legal/LegalPage.astro). The copy lives in
src/data/legal.ts, verbatim approved legal text — never edit it outside a
lawyer revision, and bump updated / updatedISO with every one. No cookie
section and no cookie banner until the site sets cookies.
Copy rules from the design handoff: never "agency" in copy (artist
representation / representatives); the plans are Artist Free / Pro and
Representative Free / Pro; never mention transaction fees; never promise crew
is free forever.
How it works
The two-phone piece under the hero comes from the Claude Design handoff
How it works (2026-10-06, second version: claim-only hero, poster frame,
Maya's representation on the booking). Until playback starts it shows
HIW_POSTER; it starts on its own at ≥ 50% visible. data.ts is the timeline (BEATS, hiwFrame),
screens.tsx the app screens, HowItWorks.tsx the player (desktop: two phones;
≤ 760px: one in front, scaled to fit the column and one viewport). These three
are kept close to the reference (@ts-nocheck) so a later handoff diffs cleanly.
Icons are inlined from @mdi/js (mdi.ts) — the site makes no external requests.
Deploy
Every push to main builds and publishes to GitHub Pages
(.github/workflows/deploy.yml). public/CNAME holds the custom domain.
DNS (Namecheap) for beckstage.music:
| Type | Host | Value |
|---|
| A | @ | 185.199.108.153 |
| A | @ | 185.199.109.153 |
| A | @ | 185.199.110.153 |
| A | @ | 185.199.111.153 |
| CNAME | www | filipecollaco.github.io |
Leave app (Firebase), the MX and TXT records as they are.
Design source
Built from the Claude Design handoff Beckstage marketing website (October
2026). Desktop matches the 1320 artboard and mobile the 390 artboard; the
reference's .is-mobile class is the max-width: 760px media query. Two
things the handoff did not design were added: the mobile menu behind the
burger, and a tablet step (below 980px the nav collapses into the menu).
