Website overview
The MacroMath marketing site — what it is, its stack and how it is organized.
The MacroMath website (macromath.app) is the official landing page for the app —
a fast, polished and accessible site built to showcase the product, explain its
features and convert visitors into downloads. It also hosts account management and the
legal pages.
Stack
| Layer | Technology |
|---|---|
| Framework | Astro 6 (static output) |
| Styling | Plain CSS with design tokens |
| Interaction | Vanilla JavaScript (theme, i18n, nav, scroll animations) |
| Typography | Poppins (Google Fonts) |
| Accounts | Supabase (src/lib/supabase.js) |
| Billing | Stripe (serverless functions under api/) |
| Hosting | Any static host (Vercel, Netlify, Cloudflare Pages) |
The site is statically generated — no server rendering — so it loads fast and is
cheap to host. The only dynamic parts are the serverless api/ functions used for
billing and account actions.
Languages
The website is trilingual — Portuguese, English and Spanish. Translations live in a
single dictionary (src/i18n/dict.js) and are applied client-side; the language is
auto-detected from the browser and persisted in localStorage. Light and dark themes
are toggled and remembered the same way.
The app itself ships five languages (PT, EN, ES, FR, DE) and this documentation is in EN, PT and ES — see Languages and themes.
Pages
| Route | Purpose |
|---|---|
index | The landing page — hero, features, pricing, FAQ and download CTAs. |
conta | Account management (sign in, subscription, delete account) via Supabase. |
privacidade | Privacy policy. |
termos | Terms of use. |
Running it
A standard Astro project (Node ≥ 22.12): npm install, then npm run dev serves it at
http://localhost:4321. npm run build outputs the static site to ./dist and
npm run preview serves that build. Because the output is fully static, it deploys to
any static host with zero or minimal config.
How it fits the ecosystem
The website, the mobile app and this documentation share the same brand and the same Supabase backend. The site drives downloads and handles Stripe checkout and the billing portal; the app is where the day-to-day tracking happens.
- Structure & sections — the components that build each page.
- Design & content — the tokens, theming and i18n behind the look.
- Accounts & billing — Supabase auth and Stripe on the web.