Structure & sections
The Astro components that build the landing page, layout and legal pages — section by section.
The site is a small, focused Astro project: a shared layout, a set of landing sections, a few layout and UI pieces, the account and legal pages, and a couple of build scripts. Everything renders to static HTML — the only JavaScript is the small vanilla scripts that drive the theme, the language switch and the scroll effects.
Layout
src/layouts/Layout.astro is the shared shell. It sets the <head> (SEO and social
meta, theme-color, favicon), applies the saved theme before paint to avoid a flash,
loads the Poppins font, and wires the i18n dictionary and the page scripts.
| Component | Role |
|---|---|
layout/Navbar | Fixed top navigation — section links, language switcher, theme toggle and the download CTA. |
layout/Footer | Product, company and legal links, socials and the language list. |
layout/MobileCta | Sticky download call-to-action shown only on small screens. |
layout/ScrollProgress | Thin bar at the top that tracks reading progress. |
Landing sections
The landing page (src/pages/index.astro) composes these sections top to bottom:
| # | Section | What it shows |
|---|---|---|
| 1 | Hero | Badge (“Available on iOS & Android”), headline, value proposition, the two primary CTAs, three stats and a floating phone mockup. |
| 2 | TrustBar | A strip of five trust signals — calorie counting, automatic macros, barcode scanning, smart pantry, AI meal plans. |
| 3 | Features | The six core features, each paired with an app screenshot. A sticky section where scroll progress crossfades between screens (Início, Dieta, Despensa, IA, Progresso, Perfil). |
| 4 | HorizontalScenes | A pinned, horizontally-scrolling trio of panels: How it works (3 steps), Smart pantry (the 5 ways to add food) and MacroAI (what the assistant does). |
| 5 | Pricing | The Pricing block — the three plans (Free, Premium, Premium Annual) with their feature lists and CTAs, from the plans array and price.* i18n keys. |
| 6 | FAQ | The four most common questions in an accordion — mirrored in the docs FAQ. |
| 7 | CTA | Closing pitch with the App Store and Google Play buttons. |
How the scroll effects work
Two sections are driven by small is:inline scripts, both gated on
prefers-reduced-motion and disabled below 900px:
- Features is
300vhtall with a sticky inner panel. Scroll progress (0 → 1) picks the active screen, which crossfades via CSS opacity while the phone stays put. - HorizontalScenes is a tall pinned section whose inner track is moved on the X
axis (
translate3d) as you scroll vertically, turning vertical scroll into a horizontal walkthrough with progress dots.
UI & legal pieces
| Component | Role |
|---|---|
ui/StatusBar | A faux phone status bar rendered inside the app mockups. |
ui/StoreButtons | The App Store and Google Play buttons. |
legal/LegalPage | Shared template for the privacy and terms pages; the body text comes from the legal.* keys in the dictionary. |
Pages & routes
| Route | Page | Purpose |
|---|---|---|
/ | pages/index.astro | The landing page (all the sections above). |
/conta | pages/conta.astro | Account area — sign in, subscription status, billing, account deletion. |
/privacidade | pages/privacidade.astro | Privacy policy, rendered through LegalPage. |
/termos | pages/termos.astro | Terms of use, rendered through LegalPage. |
Build scripts
Two Node scripts under scripts/ generate marketing assets ahead of the build:
make-mockups.mjs— composes the raw app screenshots into device mockups.make-og.mjs— generates the Open Graph / social-share images.
Styling
Styling is plain CSS with design tokens in src/styles/global.css — the same
orange brand and Poppins typeface used across the app and this documentation, with
light/dark themes driven by CSS custom properties. The full token set is covered in
Design & content.
→ Account and billing flows are covered in Accounts & billing.