Lambda SaaS is a product-driven marketing template built on Astro 6 and Tailwind CSS v4. It ships with every page wired up, every content collection structured, every interactive component accessible, and every SEO detail in place, so you can focus on telling your product's story instead of scaffolding your site.
Lambda SaaS stays fast by default: no heavy animation libraries, no client-side framework taking over, no unnecessary overhead. Alpine.js powers the interactive bits (pricing toggle, feature tabs, FAQ accordions) and stays out of the way everywhere else. What you get is a clean technical aesthetic, a performance-first architecture, and a codebase that stays out of your way.
Live demo: https://lambda-saas.netlify.app
Who is this template for?
Lambda SaaS is the right fit for:
SaaS founders and indie makers who need a complete marketing site — pricing, features, changelog, docs — ready to ship the day they finish the product.
Developer-tool companies looking for a technical aesthetic that signals craft to other developers, with code blocks, schema illustrations, and trace visualizations baked in.
Agencies and freelancers building landing sites for SaaS clients who want a well-structured, type-safe starting point they can confidently customize and hand off.
Teams that value performance and accessibility, and want Lighthouse scores in the high 90s out of the box on mobile and desktop, with WCAG AA contrast verified across every surface.
Features
- Pricing page with monthly/annual toggle: Reactive pricing cards driven by Alpine.js with smooth state transitions, a feature compare table, plan tiers with highlighted recommendations, and a real FAQ accordion. The toggle persists across the page and updates every price in place.
- Interactive feature showcase: Showcase rows with custom illustrations (schemas, traces, deploy pipelines), a code tabs component with full ARIA tab pattern (role="tablist", aria-selected, keyboard-navigable), and a bento grid with API rows, policy code blocks, cron schedules, migrations, and deploy status — every detail crafted to look like a real product.
- MDX Blog with full editorial structure: Content Collections with Zod schema validation, featured posts, author cards, category and tag filtering, optimized cover images. Everything a content-driven SaaS needs to publish thoughtful posts on launch day.
- MDX Changelog: A dedicated changelog collection with version, date, type tags (feature, fix, improvement), and a clean timeline layout. Add an entry, push, done.
- Docs section: A structured docs page with sidebar navigation, anchor links, and a layout ready for product documentation, API references, or onboarding guides.
- Dashboard mockup hero: An editorial product mockup at the top of the home page — fully crafted in HTML and CSS, no screenshots, no PNGs to maintain. Edit text, swap colors, change layout.
- JSON-LD structured data: Organization schema on every page, WebSite schema on the home page, Article schema on every blog post, all generated automatically from typed config. No manual schema markup needed.
- SEO component: Handles title tags, meta description, canonical URLs, Open Graph, Twitter Cards, and JSON-LD from a single layout. Pass props per page, done.
- Zero-CLS font loading: Geist and Geist Mono loaded via Astro's Fonts API with optimizedFallbacks: true, so the system-font-to-Geist swap is visually seamless. No layout shift, no flash of unstyled text.
- CSS-only FAQ accordion: Smooth expand/collapse animation using the grid-template-rows trick, no JavaScript required. Respects the user's reduced-motion preference.
- Legal pages included: Privacy Policy and Terms of Service ship with a structured placeholder outline. Update the copy with your real policies and they're ready.
- View Transitions: Enabled globally via Astro's ClientRouter. Add transition names to specific elements for named animations across page navigations.
- Type-safe content and configuration: All site data — product info, nav, plans, features, FAQ, team, changelog, docs sections — lives in typed TypeScript files. Change a value once, every page updates.
Tech Stack
- Astro 6 — static output, fully typed, minimal client JS
- Tailwind CSS v4 — CSS-first configuration via @theme tokens
- Alpine.js 3 — reactive interactions for pricing toggle, tabs, accordions
- TypeScript (strict mode)
- MDX — full component support in blog and changelog
- astro:assets — automatic WebP, responsive srcset, lazy loading
- Astro Fonts API — self-hosted Geist with metric-adjusted fallbacks
- @astrojs/sitemap — auto-generated on every build
Pages & Sections
- Home: Hero with editorial product mockup, social-proof logo strip, metrics, band, bento feature grid, customer testimonials, pricing preview, final CTA.
- Pricing: Plan cards with monthly/annual toggle, full feature compare table across all tiers, pricing FAQ, final CTA.
- Features: Hero, long-form showcase with alternating illustration/copy rows (schemas, traces, deploys, observability), secondary bento grid, code tabs component with TypeScript / cURL / Python examples, final CTA.
- Customers: Featured customer hero, filterable case-study grid, stats strip, pull-quote highlight, and a wall of shorter customer quotes.
- About: Story with sticky pull-quote, numbers band, values grid, company timeline, team grid with social links, investors strip, final CTA.
- Blog: Featured post highlight, full post listing with category filters. Each post includes author card, related posts, tags, category, and reading time.
- Changelog: Year filter sidebar with versioned timeline of releases — type tags, dates, and rich MDX content per entry.
- Docs: Left sidebar navigation, right "On this page" TOC, structured content sections (Prerequisites, Install, Init, Deploy), and prev/next pager.
- Contact: Contact form (ready to wire to Formspree, Web3Forms, or Netlify Forms), company info, FAQ accordion.
- Sign in / Sign up: Stripped-down auth page templates with no nav or footer, already marked noindex — wire them to your auth provider of choice.
- Legal: Privacy Policy and Terms of Service with structured placeholder content.
- 404: Custom not-found page that matches the rest of the site's aesthetic.
Performance & Accessibility
95+ Lighthouse on mobile and desktop. Fonts self-hosted via Astro Fonts API with optimized fallbacks for zero CLS. Hero images preloaded with exact srcset match. No render-blocking scripts. Fully static output.
WCAG AA contrast verified across all four text levels and every surface in the design system. Heading hierarchy correct on every page. Landmark regions and ARIA labels in place where needed. Tabs and accordions follow proper ARIA patterns and are fully keyboard-navigable.
Additional Highlights
- 8-level surface scale and 4-level text scale, all token-driven via Tailwind @theme variables — change one value, the whole site updates
- Code-block syntax highlighting tokens designed for the dark surface scale
- Semantic HTML throughout, correct heading hierarchy, landmark regions, ARIA where needed
- Zero-config deploy to Netlify, Vercel, Cloudflare Pages, or any static host
- Single config file (src/data/site.ts) for all site-wide settings: name, contact, social links, OG image
