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.
Editions: Astro (source), HTML (plain files, no build).
One payment for Cirrus and everything else - all 31 themes, every future release, and the visual builder included.
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;The same design as plain HTML
No Astro, no npm, no build step. Unzip the folder, open index.html straight from your disk and it works. Every page is a plain .html file you edit in any editor, the styling lives in one readable CSS file with the colours at the top, and an optional Tailwind folder is there if you want utility classes back. Deploy it to any static host: Netlify, Cloudflare Pages, GitHub Pages or plain cPanel.
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.
More themes from the collection.
Slab
SaaS / Startup
Vertex
SaaS / Startup
Tally
SaaS / Startup
Falcon
Agency / Portfolio / Blog
Or get every theme - these included - with the All-Access Pass.