Cirrus
Calm, sky-bright theme for finance apps, fintech and SaaS. Clouds-gradient hero, a real iPhone mockup with a live dashboard, soft floating UI cards, and 21 composable sections.
See Cirrus in action
Every page and section is part of the download. Use these as launch-day templates - keep the structure, swap the copy.
Cirrus is for app and SaaS products that should feel calm and trustworthy - not loud. A soft clouds-gradient hero sits behind a floating pill nav and a real iPhone mockup showing a live-looking finance dashboard, with gentle deposit and spending cards animating beside it. Clean Geist type, borderless soft-shadow cards, and a single sky-blue accent make it read premium from the first scroll. It's a complete site, not just a hero: 21 composable sections (feature-split deep-dives, a bento grid, an app showcase, an integrations arc, tabbed use-cases, a comparison table, a trust band, a metric-highlight chart and more) plus a real Astro content-collection blog with cover images - all driven from one config file.
Best Fit For
- Personal-finance and budgeting apps
- Fintech, banking and payments products
- Mobile apps that need an App Store-style page
- SaaS startups that want a calm, premium look
- Founders shipping a launch landing page
- Anyone who wants trustworthy over loud
Full Page Set
Every page is real and editable - no placeholders, no "coming soon" stubs.
21 Sections Included
Every section is a ready-to-use Astro component. Add it to any page, customize via config, or remove what you don't need.
What's Included
A Real Phone, Not a CSS Box
The hero centers an actual iPhone mockup with the Cirrus app composited inside - status bar, balance, a gradient card and a live transactions list - flanked by floating deposit and spending cards. It's the product shot a fintech landing page normally pays a designer for, and the swap-ready assets are licensed for commercial use.
Calm By Design
A soft clouds sky fades into white behind a frosted floating nav, dark Geist headlines sit on borderless soft-shadow cards, and a single sky-blue accent carries attention. Nothing shouts. The whole theme is tuned to feel trustworthy and effortless - the opposite of the busy, gradient-heavy fintech template everyone ships.
21 Sections, One Config File
Beyond the hero it's a full kit: 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, FAQ, a real blog and a team grid. Every string, price, testimonial and FAQ flows from src/config/site.ts.
Forms, newsletter, and analytics - pre-wired
Cirrus is ready to connect to your preferred providers. Pick from the options below, drop in a single API key, and your contact form, newsletter signup, and analytics are live - no backend, no JavaScript, no glue code.
Contact form
The Contact section's <form> renders with no JS. Set one provider in site.ts; the form action wires automatically.
- Formspree50 free submissions / month, no domain restriction
- FormSubmitFree, no signup - just an email confirmation
- Netlify FormsFree 100/month - Netlify hosting only
Newsletter
The Newsletter form sends subscribers directly to your ESP. The email input name auto-adjusts per provider.
- MailchimpStandard EMAIL field; honeypot supported
- ConvertKit (Kit)email_address field; works with any form ID
- Buttondownemail field; lightest, indie-friendly
Analytics
Layout.astro injects the right script tag based on the provider you choose. No client-side branching.
- Google Analytics 4Paste your G-XXXXXXXXXX measurement ID
- PlausiblePrivacy-friendly, ~1 KB script, no cookies
- UmamiSelf-hostable, also cookie-free
Tech Stack
Config-Driven Setup
Every theme uses a single src/config/site.ts file
for customization. Change your brand, navigation, form providers, analytics, and section content
without touching component code.
// src/config/site.ts
export const siteConfig = {
name: "Your Company",
tagline: "Your tagline here",
url: "https://yourdomain.com",
navigation: { sticky: true, links: [...], cta: {...} },
social: { twitter: "...", github: "...", linkedin: "..." },
seo: { title: "...", description: "...", ogImage: "/og.png" },
// ── Provider switches ────────────────────────────────
contactForm: { provider: "formspree", formspreeId: "your-id" },
newsletter: { provider: "convertkit", actionUrl: "https://..." },
analytics: { provider: "plausible", plausibleDomain: "you.com" },
// ── Section data ─────────────────────────────────────
team, video, timeline, comparison, gallery,
carousel, tabs, appDownload, map, footer,
} as const;Full documentation, ready before you buy
Browse the install guide, the site.ts reference, provider setup, deploy instructions, and the Cirrus-specific page - all live now.