Orbit Landing Page
One screen for Orbit, an AI that tracks habits. Astra turns a plain request into a proposed routine change for the person to review.
Live: useorbit.org | App: app.useorbit.org | API: api.useorbit.org
Tech Stack
| Layer | Technology |
|---|
| Framework | Astro |
| Styling | Tailwind CSS v4 |
| Fonts | Geist Sans / Space Grotesk / Geist Mono, self-hosted via Astro's Fonts API |
| Icons | Lucide (@lucide/astro) |
| Linting | ESLint flat config (eslint-plugin-astro, typescript-eslint, local/no-comments) + Prettier |
| Deployment | Render (static site) |
Page
The header, headline, Astra conversation, actions and footer share one centred column. The page uses the visible viewport height, with fewer conversation turns in short windows.
- Three example requests replay locally, with no model or network call. Each shows a proposed habit change; approval, edit and rejection labels are visual examples.
- English and Brazilian Portuguese copy switches through
data-i18n attributes with cookie persistence.
- The iPhone waitlist opens in a native dialog, including direct links to
/#ios, and keeps the existing email confirmation and Turnstile flow.
- Open Graph, Twitter metadata and application structured data describe Astra and the supported platforms.
Design system
The canon lives in orbit-ui-mobile/DESIGN.md. This repository mirrors its dark tokens in src/styles/global.css:
| Token | Value |
|---|
| Canvas | #09090B |
| Primary | #C4530F |
| Foregrounds | #F4F4F6 / #C9C9CC / #8F8F93 / #5D5D60 |
| Card surface | rgba(250,250,250,0.04) |
| Hairline | rgba(255,255,255,0.08) |
Type sizes step with viewport width. The Astra proposal uses a tonal preview with approval controls. See CLAUDE.md for token rules and code standards.
Viewport assertions
The landing follows a scrolling composition with a centered Astra device, floating product cards, feature sections, pricing, questions and a closing invitation. Node tests check section order, accent actions, bilingual copy, pricing and motion startup. The animation libraries load after paint and interaction. Reduced motion keeps the static composition and does not load the scroll driver.
Rendered checks cover 1352, 1100, 840, 412 and 320 CSS pixels in English and Brazilian Portuguese, including the pinned hero, no horizontal overflow, whole control labels and a static reduced motion page. Rendered evidence and Lighthouse remain part of the orchestrator's verification.
Prerequisites
- Node.js
^22.22.3 || ^24.16.0 || >=26.3.0 (the engines range in package.json)
Getting Started
npm install
npm run dev
The site runs at http://localhost:4321.
Project Structure
src/
pages/
index.astro # One-screen composition and waitlist dialog
404.astro # Not-found page
waitlist-confirmed.astro # Email confirmation result
layouts/
Layout.astro # HTML, metadata, fonts and application structured data
components/
Header.astro # Orbit lockup, language toggle and install action
Hero.astro # Copy, conversation and actions in one column
AstraDemo.astro # Proposed changes and example request chips
AstraGlyph.astro # Astra identity
IosWaitlist.astro # Waitlist dialog and form
Footer.astro # Privacy, terms and copyright
PillButton.astro # Shared action primitive
i18n/
translations.ts # Typed English and Brazilian Portuguese copy
scripts/
i18n.ts # Language cookie, toggle and translated metadata
demo.ts # Local scripted examples
waitlist.ts # Turnstile and waitlist submission
waitlist-section.ts # Fragment navigation and email focus
scroll.ts # Deferred scroll animation startup
landing-motion.ts # Lenis and GSAP choreography
styles/
global.css # Tailwind v4 @theme token mirror + type roles + base
eslint-rules/
no-comments.cjs # Comment policy rule, mirrored from orbit-ui-mobile
astro.config.mjs # Site config, fonts, sitemap, Tailwind Vite plugin
i18n Implementation
Language switching is handled client-side with typed tables in src/i18n/translations.ts:
- All translatable elements use
data-i18n="key" attributes
Record<TranslationKey, string> makes a missing PT-BR key a compile error- Language state persisted in
orbit_lang cookie (1 year, SameSite Lax)
- Auto-detects browser language on first visit (
pt prefix maps to pt-BR)
- Toggle button in header switches between EN and PT
Scripts
| Command | Description |
|---|
npm run dev | Start dev server at localhost:4321 |
npm run build | Build static site to ./dist/ |
npm run preview | Preview production build locally |
npm run lint | ESLint (lint:fix to autofix) |
npm run format | Prettier write (format:check for CI) |
npm run check | astro check type checking |
Deployment
Deployed on Render as static sites for production and staging. Auto-deploy is disabled on both sites. Merges and pushes do not deploy them. Run the Release landing GitHub Actions workflow from main with an environment and branch. The production GitHub environment permits deployments only from main. Production accepts only the main branch; staging accepts the selected branch head.
gh workflow run release.yml --ref main -f environment=production
gh workflow run release.yml --ref main -f environment=staging -f branch=<branch>
Domain: useorbit.org
Render build contract:
| Setting | Value |
|---|
| Node.js | NODE_VERSION=22.22.3 |
| Build command | npm ci && npm run build |
| Publish directory | dist |
| Auto-deploy | Disabled |
Build-time variables on the Render static site:
| Variable | Purpose |
|---|
PUBLIC_API_URL | Waitlist API endpoint; defaults to https://api.useorbit.org |
PUBLIC_ANDROID_INSTALL_URL | Android install links and generated QR; defaults to the production Play listing |
PUBLIC_APP_URL | HTTPS app-entry links; defaults to https://app.useorbit.org |
PUBLIC_POSTHOG_KEY | Enables consent-gated PostHog analytics through /relay/ |
PUBLIC_TURNSTILE_SITE_KEY | Enables the waitlist Turnstile widget |
Configure release credentials in GitHub Settings > Environments:
| Environment | Secret | Deployment branches |
|---|
production | RENDER_API_KEY | Selected: main |
staging | RENDER_API_KEY | Selected: main |
Use a selected deployment branch rule matching only main for both environments, with no required reviewers. Set the repository variables RENDER_LANDING_SERVICE_ID and RENDER_LANDING_STAGING_SERVICE_ID to their respective Render service IDs. Dispatch the workflow from main and choose the branch to deploy in its input. Supply the full 40-character commit in sha for staging. Production requires branch main and uses sha when supplied, or the dispatch's own commit when it is empty. Both jobs check out that exact commit and verify it belongs to the selected branch; a branch moving while the run waits cannot change the release commit. Keep the Render API key out of repository secrets. Once both release paths have succeeded with their environment secrets, delete the old repository secret RENDER_API_KEY from GitHub Settings > Secrets and variables > Actions.
Both jobs use the Render API to check that auto-deploy is disabled, deploy the selected commit, wait for it to go live, and confirm that the Render service URL serves that commit through the orbit-build meta tag, which Layout.astro fills from Render's RENDER_GIT_COMMIT build variable. The staging job first sets the service's tracked branch to the selected branch. Before deploying, production reads the staging service URL from Render using RENDER_LANDING_STAGING_SERVICE_ID and requires an HTTP 200 response serving the selected build marker. A failed request, redirect, missing marker or different commit refuses production. The explicit force_unstaged boolean bypasses this admission check and is recorded with the selected SHA in the job summary. Production also requires https://useorbit.org/ to serve the same build marker after deployment; a missing or different marker fails the run, and the Deployment records the public URL. Each job records a GitHub Deployment for the verified commit and prints Deployed SHA: <sha> in its summary.
The Render static site definition in orbit-api/infra owns the former vercel.json delivery rules. Edit Terraform there for changes to:
- The canonical
Link header on /: <https://useorbit.org/>; rel="canonical".
- Security headers on all paths:
X-Content-Type-Options: nosniff, X-Frame-Options: DENY, Referrer-Policy: strict-origin-when-cross-origin, Permissions-Policy: camera=(), microphone=(), geolocation=(), and Strict-Transport-Security: max-age=63072000; includeSubDomains; preload.
- Asset caching on
/_astro/*: Cache-Control: public, max-age=31536000, immutable. Other paths use Cache-Control: public, max-age=0, must-revalidate.
- PostHog rewrites:
/relay/static/* to https://us-assets.i.posthog.com/static/*, /relay/array/* to https://us-assets.i.posthog.com/array/*, and /relay/* to https://us.i.posthog.com/*.
App entry and Android installation
The header, hero, Free and Pro pricing actions, accepted demo continuation, closing action, footer Open Orbit link and successful waitlist confirmation keep configured HTTPS app hrefs in delivered HTML. Their explicit data-app-entry opt-in loads through the shared pill module immediately, without waiting for motion or analytics. Desktop, iPhone, iPad, unknown devices, JavaScript-disabled and pre-hydration activation use those web links. Modified clicks, middle clicks, copied links, new tabs and context-menu actions retain normal anchor behavior. Legal, consent privacy, waitlist, contact and local/demo-edit controls do not opt in.
On a trusted, unmodified Chrome for Android click or Enter activation, the handler uses Chrome's documented Android intent mechanism synchronously, with one package-bound custom scheme and an independently encoded S.browser_fallback_url. The browser owns launch and fallback; a UA match or assigned location proves neither installation nor successful handoff. Chrome for Android is the documented acceptance target. Other Android browser signatures and known embedded-browser signatures retain web navigation. A browser can share Chrome’s signature, so physical verification is still required; universal support is not claimed. There are no launch timers, retries, installed-app probes, visibility checks or extra network requests.
The two existing build-time variables select a coherent target:
PUBLIC_APP_URL | PUBLIC_ANDROID_INSTALL_URL | Scheme / package |
|---|
https://app.useorbit.org | https://play.google.com/store/apps/details?id=org.useorbit.app | orbit / org.useorbit.app |
https://app-staging.useorbit.org | https://play.google.com/store/apps/details?id=org.useorbit.app.staging | orbit-staging / org.useorbit.app.staging |
The configured Play URL must use HTTPS, the Play details path and exactly one matching package id. Preview origins, malformed URLs, crossed pairs and unsupported destinations retain HTTPS navigation. Only root and /upgrade without query data, and /habits/new?title=... with exactly one title key and no extra query keys, qualify. Hashes and credentials are excluded. The handler reads the current href when activated, so approved demo edits replace the destination. The ordinary HTTPS href and demo producer stay unchanged.
For the source-pinned Expo Router 57.0.24 receiver, the native adapter applies four encodeURIComponent layers to the decoded title alone. The receiver decodes through URLSearchParams during extraction, safeDecodeURIComponent before rebuilding the query, URLSearchParams during route parsing and useLocalSearchParams before the app consumes the title. This preserves Unicode, whitespace, delimiters and percent literals, including intent-looking text, as one complete title value. Root and Pro paths and the independently encoded Play fallback retain their existing serialization. This compatibility contract must be checked against the actual receiver sources when that interface changes.
The explicit Install on Android footer link, clickable QR, generated QR payload and Android structured installUrl always use the configured Play URL, including on iPhone. The Play fallback opens the listing; it does not restore Pro or a demo draft after a new installation. Consent-gated CTA capture retains its existing {surface} shape; hero and closing actions share the generic app event with distinct hero/footer surfaces. No destination, title or install outcome is added to telemetry.
Native interface evidence comes from UI commit 084495ce1398eed96199f674b4f3202bf8dab99a: apps/mobile/app.json, app.config.js, app/+native-intent.tsx, app/habits/new.tsx and the existing upgrade route; installed Expo Router 57.0.24, Expo 57.0.26, expo-linking 57.0.11 and config-plugins 57.0.9 establish route parsing and BROWSABLE scheme production. Fixed native-query vectors guard the landing serializer. A separate source-pinned executable proof passes actual dispatched landing URIs through the installed extraction, generated static-route configuration, parser, validator and real React route context/local-params hook, for initial and resumed destinations in both schemes. This proves title delivery through that receiver slice; source and Node VM tests do not prove a generated manifest, mounted app navigator, installed binary, browser handoff or Play delivery.
Release uses the existing GitHub Actions Release landing workflow: stage the carrying branch, then record the exact landing commit, browser/version, Android package/version, installed/absent state and observed root, Pro and demo paths in Chrome for Android. A separate Android emulator without a personal account can verify the browser and installed package; record repacked test binaries distinctly from Play delivery. Also verify desktop/iOS HTTPS navigation, manual web/store fallback, both languages, keyboard activation and the QR label at narrow/wide widths and 200% text. Browser/device and rendered evidence remain a release acceptance boundary. Production follows normal checks/review and the existing manual main release. No new variables, console changes, app release or infrastructure migration are required. Removing the targeted handler leaves the HTTPS anchors as the rollback path.
Related Repositories
| Repo | Description |
|---|
| orbit-ui-mobile | Turborepo: Next.js web app + Expo Android app (owns DESIGN.md, the design canon) |
| orbit-api | .NET REST API backend |
License
Private project.
