feat(marketing): redesign website and product showcase

[maria-rcks]

What Changed

• Redesigned the marketing homepage around the simpler visual system, shared atmospheric hero treatment, and updated product showcase.
• Reworked the download page with a cleaner release-channel switch, ordered platform rows, mobile store links, and official store artwork.
• Simplified the privacy and security pages to match the homepage, including quieter typography, white bullets, and streamlined navigation.
• Added deterministic web-demo fixtures and screenshot tooling for marketing assets, along with mobile documentation and refreshed Open Graph imagery.
• Linked the iOS and Android downloads directly from the README introduction, incorporating the README treatment from docs: link iOS and Android app store downloads #4902 alongside the dedicated mobile-app section.

Why

The marketing and legal surfaces had diverged visually, while the download experience mixed oversized store actions, icon-heavy release controls, and inconsistent page chrome. This brings those surfaces into one restrained design system and makes the product itself the focus.

UI Changes

Each comparison uses the same 1440 × 900 viewport and a slow, eased full-page scroll. “Before” is the current live t3.codes page; “After” is this redesign.

Page	Before	After
Homepage	old-home.webm	new-home.webm
Download	old-download.webm	new-download.webm
Privacy	old-privacy.webm	new-privacy.webm
Security	old-security.webm	new-security.webm

Checklist

• This PR is small and focused
• I explained what changed and why
• I included before/after screenshots for any UI changes
• I included a video for animation/interaction changes

Validation:

• pnpm --filter @t3tools/marketing typecheck
• pnpm --filter @t3tools/web typecheck
• pnpm --filter @t3tools/web test -- src/branding.test.ts (186 files, 1,666 tests)
• pnpm exec vitest run apps/marketing/src/lib/releases.test.ts (2 tests)

Built with GPT-5.6 Sol via the T3 Code Codex harness.

---

Note

Medium Risk
Large UI and build-pipeline changes plus a workflow that can push commits to the default branch; no auth or data-plane changes, but CI auto-push and longer marketing builds add operational risk.

Overview
Redesigns the marketing site around a shared dark layout (layered nav blur, stage-aware favicon/accent, Open Graph metadata, restructured footer) and a new homepage hero with showcase sections driven by showcase-spec.json, FAQ, and mobile store CTAs.

Reworks /download with Latest / Nightly / Dev channel switching tied to shared t3-marketing-stage events; adds fetchNightlyRelease, TTL-cached release APIs, and macOS arch-aware asset lookup. Dev mode surfaces clone-from-source instead of binaries.

Adds deterministic marketing assets: prepare:assets builds the web sidebar demo into public/sidebar-demo and runs Playwright capture for demo-states crops plus a WebGL-composed og-image.png. Astro dev middleware sets long/short cache headers for demo and mobile preview paths.

CI extends the mobile showcase workflow with publish_marketing_preview, which on successful dark iOS runs on the default branch copies iPhone/iPad screenshots into apps/marketing/public/mobile-states and may auto-commit via the release GitHub App.

Legal pages gain an optional simple layout (no side nav, quieter typography). README and docs add mobile app links; Connections/settings and user docs reference store URLs (GOOGLE_PLAY_STORE_URL rename).

^{Reviewed by Cursor Bugbot for commit e664383. Bugbot is set up for automated code reviews on this repo. Configure here.}

Note

Redesign marketing website with interactive demo, release channel picker, and nightly release support

• Rebuilds the marketing homepage (index.astro) with a new hero embedding a live interactive sidebar demo iframe, product showcase sections sourced from JSON, and an expandable FAQ list.
• Adds a release channel picker (Latest/Nightly/Dev) to both the homepage CTA and the download page; switching channels updates visuals, download URLs, and the embedded demo via postMessage.
• Reworks the download page (download.astro) to support nightly builds, a 'Build from source' section, and dynamic asset links per channel.
• Extends releases.ts with fetchNightlyRelease, findReleaseAssetUrl, TTL-based sessionStorage caching, and an isRelease type guard.
• Adds an in-browser demo backend (server.ts) with in-memory WebSocket pairs, demo fixture builders, and IndexedDB/localStorage seeding for the demo app.
• Adds Open Graph/Twitter card metadata and stage-aware favicons to the shared Layout.astro.
• Introduces a CI job (mobile-showcase-screenshots.yml) that auto-commits refreshed mobile screenshots to the marketing site.
• Adds a Playwright-based screenshot capture script that generates demo-state and OG images at build time.
• Risk: dev and build now run prepare:assets first (building the sidebar demo bundle and capturing screenshots via Playwright), increasing cold-build time significantly.

^{Macroscope summarized e664383.}

[coderabbitai]

Important

Review skipped

Auto reviews are disabled on this repository. Please check the settings in the CodeRabbit UI or the .coderabbit.yaml file in this repository. To trigger a single review, invoke the @coderabbitai review command.

⚙️ Run configuration

Configuration used: Repository UI

Review profile: CHILL

Plan: Pro Plus

Run ID: 59c16101-840b-471f-a44c-50b2689db75b

You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.

Use the checkbox below for a quick retry:

• 🔍 Trigger review

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands.}

[t3-code]

maria confirmed this redesign already covers the app-store work in #4902: the shared store URLs, README mobile links, and mobile download section. #4902 should not be merged separately.

[macroscopeapp]

Approvability

Verdict: Needs human review

Diff is too large for automated approval analysis. A human reviewer should evaluate this PR.

^{You can customize Macroscope's approvability policy. Learn more.}

[macroscopeapp]

Reviewed the new Effect code in apps/web/src/demo/* (in-browser demo RPC backend, layers, fixtures, seeding) plus the touched web/marketing TypeScript against the Effect service conventions.

Namespace subpath imports, layer composition, WsRpcGroup.toLayer handler wiring, and the Effect.runFork(Layer.launch(...)) application boundary all look consistent with the conventions. One finding on error modeling at the dispatch boundary in apps/web/src/demo/server.ts.

^{Posted via Macroscope — Effect Service Conventions}

[cursor]

Cursor Bugbot has reviewed your changes using high effort and found 1 potential issue.

^{❌ Bugbot Autofix is OFF. To automatically fix reported issues with cloud agents, enable autofix in the Cursor dashboard.}

^{Reviewed by Cursor Bugbot for commit 612837c. Configure here.}

[StiensWout]

looking good! I like the style :)