Modal — Hero
Left column has the oversized headline 'Pricing as magical as our product' with 'magical' in neon green plus Get Started / Contact Us buttons; right column is a 'Resource costs' table of per-second GPU/CPU/memory prices with a Per hour / Per second toggle. A green announcement bar sits above the dark nav.
This is a static, crawlable rendering for search & AI engines. The interactive version — filters, live decode console, copy & export — is at https://mozaika.design/inspiration/modal-split-hero-giant-headline-live-resource-cost-rate-table.
Palette
#0A0A0A#7DF36B#FFFFFF
Fonts
Inter Variable
Page types
Detail
UX patterns
Dark ModePricing ToggleData Table
UI elements
Navigation BarTableToggleBadge
Context
- Parent page: Dev-tool pricing with live resource-cost table, three plan cards, and serverless cost-comparison charts
- All of Modal
Other sections on this page
- Pricing / Plans — Three-tier plan cards (Starter / Team / Enterprise)
- Feature — Credit grants trio on mint panel with marker highlights
- Feature — Sandbox + Notebooks pricing with 3D isometric illustration
- Comparison — Why serverless? Traditional vs Modal cost area charts
- Comparison — Compare features matrix across three plans
- FAQ — Frequently asked questions accordion
- CTA / Sign-up — Ship your first app in minutes with floating green cubes