Full description
A complete marketing site, not just a landing page.
Lattice is a ten-page site for a scheduling product: an animated landing page, a searchable blog with six articles, and both auth screens. Built with Astro and Tailwind CSS v4, static throughout, with no UI-framework runtime in the bundle.
What you get
- Landing page with a hero and phone mock-up, a customer logo strip, a four-figure statistics band, a four-tile bento grid, three automation cards, three pricing tiers, an orbiting testimonial cloud, an FAQ accordion and a closing call to action ringed by floating badges.
- Blog index with a featured article card and a search box that filters every post as you type.
- Article pages with cover, code blocks and a related rail. Six posts ship with the template.
- Login and signup screens on their own layout, each backed by a dotted world map.
- Both forms dispatch a nular-submit event carrying the form data, so you can point them at your own service by replacing one handler. The forgot-password link shows an inline notice instead of navigating to a page that does not exist.
Re-skin it from one block
The Tailwind v4 theme block holds the brand ramp, the hero gradient stops and the panel greys. Every accent headline, primary button, highlighted pricing tier and orange detail reads from those values, so the whole site changes colour from one place. The shared surfaces, the article typography and every keyframe live in the same file.
No image dependency
Every image in the template is vector: the customer wordmarks, the article covers, the favicon and the dotted world map behind the time-zone tile and the auth screens. Avatars are generated from names at build time. Icons live in two glyph maps rather than an icon package. The project builds without sharp, and the config tells you exactly what to change if you add raster artwork later.
Motion and accessibility
Every animation stops under reduced-motion preferences: the sparkle canvas, the orbiting avatars, the integration orbit, the floating badges, the cycling payment cards, the FAQ transition and the toggle switch. The sparkle canvas also pauses when it scrolls out of view. The mobile menu and the FAQ are built from real buttons with aria-expanded and aria-controls, close on Escape, and are inert while collapsed.
Details
- Astro 7, Tailwind CSS v4 and TypeScript, fully typed.
- Ten pages and twenty-seven components, with all copy in five data files.
- Articles are markdown in a content collection, where the file name becomes the URL slug.
- Interactions are small native custom elements. No React, Vue or Svelte in the output.
- Single light theme by design. There is no dark scheme in the source.
- Deploys anywhere Astro does, including under a subpath.
- A README that documents every customization point.
One license, the entire nularUI Astro library
Buying Lattice 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
