Cirrus

Live preview →

Cirrus is the calm, sky-bright theme for app and SaaS products — a landing page that feels light and trustworthy rather than loud. A soft clouds-gradient hero sits behind a floating pill nav and a real iPhone mockup showing a live finance dashboard, with gentle deposit and spending cards beside it. Clean Geist type, borderless soft-shadow cards, and a single sky-blue accent. Best for personal-finance apps, fintech and payments products, mobile apps that need an App Store-style page, and SaaS startups that want a premium, effortless look.

Property	Value
Tier	Pro ($39 launch / $49 reg.)
Category	App / Fintech / SaaS
Body font	Geist Variable
Display font	Geist Variable (500 weight, tight tracking)
Brand accent	Sky blue (#4686fe)

Included pages

• / — homepage: sky hero with iPhone mockup, logo strip, features, feature-split, bento, app showcase, integrations, use-cases, how-it-works, comparison, trust band, pricing, testimonials, metric highlight, stats, FAQ, blog, newsletter, CTA
• /features/ — features, integrations, how-it-works, stats
• /pricing/ — 3-tier pricing, testimonials, FAQ
• /about/ — story, values, team grid, stats
• /blog/ and /blog/[slug]/ — blog index + post pages with cover images
• /contact/ — form + contact-channel cards
• /sections/ — live gallery of all 21 sections
• /privacy/, /terms/, /404

What makes Cirrus different

• A real iPhone, not a CSS box — the hero composites the Cirrus app screen (status bar, balance, gradient card, transactions) into an actual iPhone mockup, flanked by floating deposit/spending cards. The sky image and mockup are licensed for commercial use (see CREDITS.md) and swap-ready.
• Calm by design — a soft clouds sky fades to white behind a frosted floating nav, dark Geist headlines sit on borderless soft-shadow cards, and one sky-blue accent carries attention. Nothing shouts.
• 21 composable sections — feature-split deep-dives, a bento grid, an app showcase, an integrations arc, click-to-switch persona tabs, a Cirrus-vs-the-old-way comparison, a trust band, a metric-highlight chart, stats, a real blog and a team grid.
• Live CSS/SVG mini-visuals — sparklines, donuts, gauges and bar charts, no image assets required.
• A real blog — Astro Content Collections with cover images, categories, reading time and related posts.

What’s next

• Configure → site.ts — every visible string, link, pricing tier, testimonial, FAQ and contact channel flows from this one file.
• Customize → Colors — the palette lives in src/styles/global.css (--color-brand is the sky blue, --color-ink / --color-ink-soft the text). Swap those tokens to rebrand the whole theme.
• Configure → Forms — set contactForm.provider (Formspree / FormSubmit / Netlify) and newsletter.provider (Mailchimp / ConvertKit / Buttondown / Formspree) in site.ts.
• Swap the demo assets — replace public/hero-sky.jpg and public/phone.png with your own; blog covers live in public/blog/.