App Landing Page
Demo brand: KELVERN · Payments / money movement · 21 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 website for a business payments app: supplier payments and currency exchange for importers. It has an FX quote calculator on the home and pricing pages, three plans priced by monthly volume, a side-by-side comparison with a high-street bank, five product pages, a currencies and rails page, security, four guides, an FAQ and an account sign-up form. Twenty-one built pages, all driven by data and content files.
It looks like a product people trust with money. White pages with pale peach blocks, one deep ink band, and warehouse, pallet, invoice and port photography carrying the colour. A single tangerine accent is used as a fill on buttons and highlights. Outfit for headings and figures, Karla for everything else.
Every section answers what a finance lead asks before switching providers: what does a payment cost, when will it arrive, is my money safe, and what have other importers saved. The quote card in the hero shows rate, margin, fee and arrival date on one line, and the calculator works it out for any invoice. Motion is one quiet reveal.
The 21 pages you get
- Home
/ - Headline beside a live-looking payment quote card, promises, product cards, the story band, how a payment goes out, the FX calculator, the €50,000 bank comparison, plans, customer quotes with savings, guides, the safety block with FAQ, and a sign-up band.
- Product
/product/ - All five features in alternating photo rows, each with its price and highlights.
- Feature pages
/product/…/ - Five pages: supplier payments, currency exchange, approvals, accounting sync and supplier cards. Headline, highlights, long text, an at-a-glance fact box and a customer quote.
- Currencies and rails
/currencies/ - Faster Payments, SEPA and SWIFT with fee, arrival and cut-off, and a table of the five currencies and how each one travels.
- Pricing
/pricing/ - Starter, Trade and Volume plans, the FX calculator, fees per rail, the bank comparison and pricing questions.
- Security
/security/ - Safeguarding explained in plain words, plus six account controls such as payee name checks and held bank-detail changes.
- About
/about/ - The company story, a timeline and customer quotes, without face photos.
- Guides
/guides/ - Guides with topic chips. Add a Markdown file and it appears here and on the home page.
- Guide pages
/guides/…/ - Four written guides: settlement dates, reading an FX quote, SEPA cut-off times and paying a factory in yuan.
- FAQ
/faq/ - Questions grouped by accounts, payments, FX and pricing, beside the safety block.
- Open an account
/contact/ - Sign-up and demo form with plan, currency, monthly volume and feature, pre-filled from any button on the site.
- Privacy and terms
/legal/…/ - Two starter legal pages on a shared layout.
- 404
/404 - Designed, with a way back home.
What is in the build
- An FX quote calculator: invoice amount, currency pair, rail and plan give the rate with margin, fee, total, arrival date and the saving against a typical bank
- All rates, fees, cut-offs, plans and margins in one data file, clearly marked as example rates, with the quote maths shared by every page
- A hero payment quote card built in HTML, sharp at every size and reading the same numbers as the calculator
- A bank comparison table that stacks into readable rows on a phone
- Product pages and guides as content collections: one Markdown file each
- A sign-up form pre-filled from plan, currency and feature buttons across the site
- Regulatory line, safeguarding text and status line in one file, marked as placeholders
- Real warehouse and invoice photography, no faces and no third-party logos, optimised by Astro
- Vitest and Playwright suites included
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 65 different worlds reading as one design system in different paint.
- The world
- White pages with pale peach blocks and one deep ink band, Outfit headings over Karla text, warehouse, invoice and port photography, and a single tangerine accent used as a fill.
- The mechanic
- Every quote shows the rate, margin, fee and arrival date, and an FX calculator prices any invoice against a typical high-street bank; plans are priced by monthly volume and every sign-up button pre-fills the account form. Motion is one quiet reveal.
- Loud channel
- Imagery
- Imagery. Warehouse aisles, pallets, invoices, port cranes at dusk
- Type & palette
- Outfit · Karla
-
#ffffff#17181c#ff6a3d
Who it is for
Built for business payment and FX apps, cross-border payment providers, treasury and spend-management tools, and any fintech that sells to small and mid-sized companies on price, speed and trust. It suits a product whose pitch is a clear quote and a known arrival date rather than a consumer app.
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
Are the exchange rates live?
No. They are example rates in one data file, and the page says so. Replace them with a feed at build time or a small endpoint; the README shows where, and which header to change.
Can I change the plans and margins?
Yes. Plan names, monthly prices, volume limits and margins live in the same file. The plan cards, calculator, comparison and pricing page all update from it.
Where do I put my regulatory wording?
The regulatory line, safeguarding text and status line are in the site data file and appear in the footer, security page and terms. They ship as obvious placeholders to replace before launch.
Where does the sign-up form send data?
Nowhere by default. Point it at your form backend or your own onboarding app; every "Open an account" button passes the plan and currency in the link.
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
Imagery
MIDSHIFT
Shift scheduling app
Loud
Imagery
FENWRIGHT
Deterministic log replay
Loud
Imagery
BELLWETHER
Developer tool / CI test selection
Loud
Imagery
HALVARD
Analytics / operations dashboard
Loud
Imagery