Overview (Web)
The Astro components of macromath.app — layout, sections and UI.
Web · Astro · macromath_web
The macromath.app website is built with Astro and
shares the app's brand: Poppins, the MacroMath orange and the same macro palette.
The components live in macromath_web/src/components, split into three families.
Layout
Structure present on (almost) every page.
Navbar
Top bar with brand, navigation, theme toggle and mobile menu.
Footer
Footer with brand, socials, language switcher and link columns.
MobileCta
Fixed download bar that appears at the bottom on small screens.
ScrollProgress
Thin reading-progress bar at the top of the page.
Sections
The blocks that make up the landing page, top to bottom.
Hero
Main header with a screen mockup and CTAs.
TrustBar
Social-proof / trust-argument strip.
Features
Six features with real app screenshots.
HorizontalScenes
'How it works' in steps + pantry and AI.
Pricing
The three plans (Free, Pro, Annual).
FAQ
Frequently asked questions in an accordion.
CTA
Final download card with store buttons.
UI
Small, reusable pieces.
StoreButtons
App Store / Google Play badges, with variants.
StatusBar
iOS status bar + Dynamic Island in CSS, over the screenshots.
LegalPage
Legal page layout (Terms, Privacy).
All text is translatable via data-i18n and the dictionary in src/i18n/dict.js
(PT / EN / ES).