App Landing Page
Demo brand: KELVERN · Payments / money movement · 8 routes · Astro 7 + Tailwind 4
Live preview
The demo is a full desktop site. Open it in a new tab ↗
About this app landing page
A complete site for a payments or money-movement product: eight built routes covering how money moves, pricing, contact, a privacy-and-complaints route and a wired writing section.
Deep field green with a single lime accent, in Fira Sans against Fira Mono. The set-piece is the loud channel; colour and type are held quiet beneath it.
The signature move is the value date. The settlement date is stated before you approve — a pinned, scrub-driven set-piece moves each instrument along a rail to the day it actually lands. The control ships with it: the recalled payment, one instrument that leaves the rail and never lands. Drawn, not labelled.
The 8 pages you get
- Home
/ - The value-date set-piece, the product claim and the signup close.
- How money moves
/rails/ - The mechanism page — the rails, their cut-offs and their settlement behaviour. This is the page that converts a fintech buyer.
- Pricing
/pricing/ - What it costs, on which rail. In payments the price is the product.
- Contact
/contact/ - A working form plus live tel: and mailto: paths.
- Privacy and complaints
/privacy/ - A real route covering both — non-optional for anything that touches regulated money movement.
- Writing
/blog/ - A wired content collection — add an .mdx file and it appears here and in the sitemap.
- One worked article
/blog/why-the-same-payment-settles-on-four-days/ - Why the same payment settles on four different days — the product argument, written out.
- 404
/404 - Designed, not default. Keeps the navigation.
What is in the build
- A pinned, scrub-driven value-date rail that lands each instrument on the day it actually settles, rather than animating a generic "instant" swoosh
- A declared control: the recalled payment, which leaves the rail and never lands
- A rails route covering cut-offs and settlement behaviour per rail — the page that a payments buyer needs and that most fintech sites replace with a hero animation
- A privacy-and-complaints route already written, which regulated money movement requires
- Rail data and axis definitions as typed structures in
src/data, so the set-piece is driven by real timings - Fira Sans with Fira Mono installed via Fontsource and served from your own domain
- Vitest and Playwright suites included in the repository
The design decision
Every template in this catalog is loud in exactly one channel and deliberately quiet in the other three. That single rule is what stops 62 different worlds reading as one design system in different paint.
- The world
- Deep field green with a single lime accent. A pinned, scrub-driven value-date set-piece is loud; colour and type held quiet.
- The mechanic
- "The Value Date": the settlement date is stated before you approve. A pinned, scrub-driven set-piece moves each instrument along a rail to the day it lands.
- Loud channel
- Moving set-piece
- Imagery. Same mean, same spread
- Type & palette
- Fira Sans · Fira Mono
-
#06603a#f1f8f3#d3f24f - The control case
- The recalled payment. One instrument leaves the rail and never lands. Drawn, not labelled.
Who it is for
Built for payments, treasury, banking-adjacent and money-movement products selling to businesses. It suits a company whose differentiation is timing, cost or certainty rather than a friendly app. For a consumer app, the startup build is warmer; for developer infrastructure, the devtool one.
Under the hood
- Astro 7 · static output, zero client framework
- Tailwind 4 · one @theme block holds the palette
- MDX content collections for the blog
- GSAP + Lenis for the scroll work, reduced-motion aware
- Self-hosted woff2 — no Google Fonts request
- Sitemap, canonicals and per-route meta wired
- Vitest + Playwright suites in the repository
- Zero third-party requests · strict CSP-ready
How to get started
- 01 Accept the repository invite and clone it.
- 02 Run
npm install, thennpm run dev. - 03 Replace the content in
src/data/with your own — that is where the brand, the copy and every list live. - 04 Swap the images in
public/images/and the palette in the@themeblock. - 05 Run
npm run buildand deploydist/anywhere static.
Questions
I am regulated — can I add the required disclosures?
Yes. The privacy-and-complaints route is already a real page, and the footer, terms and regulatory statements are ordinary content. Nothing in the build assumes an unregulated business, which is unusual for a fintech template.
Does the value-date rail use my real rail timings?
It runs on typed rail data — cut-offs and settlement offsets — so once you supply yours it shows your timings. That is the point: a payments company animating a fake instant settlement is arguing against itself.
Why show a payment that fails?
Because payments people do not believe a system that only ever shows the happy path. The recalled instrument leaving the rail is more persuasive than any claim about reliability.
What exactly do I get for $49?
Access to a private GitHub repository holding the complete Astro source of this template — every route you see in the preview, the content model, the images and the tests. Updates arrive in that same repository.
How many sites can I build with one licence?
As many as you like, for yourself or for clients. The licence is per buyer, not per project. The one thing you may not do is resell or redistribute the source as a template, theme or starter kit.
Do I need to know Astro?
It helps, but the common case is editing content and colour. Content lives in typed objects under src/data, colour lives in one @theme block, and npm run dev shows the result. Deploying is a static folder — Cloudflare Pages, Netlify and Vercel all take it as-is.
Is anything loaded from a third party?
No. Fonts are self-hosted woff2, there is no analytics, no tag manager, no CDN script and no external CSS. The build ships static HTML under a strict Content-Security-Policy.
More software & saas templates
WRACKLINE
Tide prediction app
Loud
Moving set-piece
MIDSHIFT
Shift scheduling app
Loud
Display type
FENWRIGHT
Deterministic log replay
Loud
Moving set-piece
BELLWETHER
Developer tool / CI test selection
Loud
Display type
HALVARD
Analytics / operations dashboard
Loud
Moving set-piece