Back to themes

Umbra - SaaS Landing & Pricing

A three-page SaaS marketing site in pure Astro: animated canvas hero, feature bento, scrolling review wall, pricing and sign-in. One license unlocks all 16 nularUI templates.


Cost

Paid


Created by
nularui

Everything a software product needs to sell itself.


Umbra is a three-page marketing site built the way Astro is meant to be used: static HTML by default, no UI-framework runtime in the bundle, and no webfont download, so the first paint costs nothing extra.


What you get


- Landing page with an animated canvas hero, a customer logo wall, a four-card feature bento, three quick features, a scrolling review wall of twelve testimonials, a multi-device section, three trust cards, pricing, an FAQ and a closing parallax collage.

- Pricing page carrying the three plans, the FAQ and the call to action on their own route, so paid traffic lands straight where it converts.

- Sign-in page with a centred card, wired to a nular-submit event so you can point it at any backend or auth provider in one line.

- Light and dark theme, class-based, with the visitor's stored choice winning over the system preference.


Re-skin it by changing two values


The Tailwind v4 theme block holds two brand accent stops. Every primary button gradient and the hero canvas read from them, so changing those two hex values re-skins the whole site. The font stack sits in the same block, ready for a branded typeface whenever you want one.


Artwork that costs no dependency


The structural illustrations are drawn in the markup rather than imported: the product screenshot, the phone, laptop and tablet mock-ups, the dashed blueprint frames and the connector beams. The world map is a committed dot grid, so it needs no library and no client JavaScript. Avatars are generated from a name hash. Every raster is a pre-sized WebP served straight from the public folder, which means the project builds without a native image dependency.


Motion done properly


Every animation stops under reduced-motion preferences: the hero canvas, the review columns, the connector beams, the before and after sweep, and the edge-network marker. The canvas also pauses when it scrolls out of view. The navbar condenses into a blurred sheet past ten pixels and hides as you scroll down, but never while the mobile menu is open.


Details


- Astro 7, Tailwind CSS v4 and TypeScript, fully typed.

- Three routes and twenty-seven components, with all copy in three data files.

- Interactions are small native custom elements. No React, Vue or Svelte in the output.

- The native system UI stack, so no font request on first paint.

- Deploys anywhere Astro does, including under a subpath.

- A README that documents every customization point, down to resampling the world map at another density.


One license, the entire nularUI Astro library


Buying Umbra does not buy one theme. A single one-time payment unlocks the whole nularUI Astro catalog, with lifetime access:


- 16 complete templates including this one: SaaS, marketing, agency and portfolio sites.

- 135 components and 126 blocks, each reimplemented natively for Astro instead of wrapped from React.

- Full source, install guidance and a copyable AI prompt per item, so Claude Code, Codex or Cursor can integrate it for you.

- Every future addition to the Astro library at no extra cost.


One payment. Lifetime access. Every component, block and template in the Astro catalog.


Preview all 135 components, 126 blocks and 16 templates for free at astro.nularui.dev