App Website Template
Demo brand: WRACKLINE · Tide prediction app · 22 routes · Astro 7 + Tailwind 4
Live preview
The demo is a full desktop site. Open it in a new tab ↗
About this app website template
A complete marketing site for a mobile app or small SaaS: phone screens in the hero, an interactive product demo, six detail pages, features, pricing with a monthly/yearly switch, an accuracy report, a changelog, a journal, an FAQ and a contact page. Twenty-two built pages, all driven by content files.
It looks like a real coastal app. A dark navy ground with light slate sections for pricing and FAQ, phone mock-ups built in HTML and SVG rather than screenshots, low-tide harbour photography, and one signal-lime accent. Schibsted Grotesk for headings, Atkinson Hyperlegible for everything else.
Every section answers what an app buyer checks before installing: does it work where I am, is it accurate, what does Pro add, and what changed lately. The live tide-chart demo lets a visitor use the product before downloading it. Motion is one soft reveal.
The 22 pages you get
- Home
/ - Three coded phone screens, promises, the live tide-chart demo, four audiences, ports, accuracy, how it works, pricing, reviews, journal with changelog, FAQ tabs and a download footer.
- Features
/features/ - Every feature by audience, with the matching phone screens.
- Ports
/ports/ - Six ports with range, tide type and last year’s error.
- Port pages
/ports/…/ - Today’s curve, a seven-day high and low table and the accuracy numbers for each port.
- Pricing
/pricing/ - Free vs Pro with a monthly/yearly switch that works without JavaScript, the feature matrix and a club licence.
- Accuracy
/accuracy/ - How predictions are checked, with the error per port.
- Changelog
/changelog/ - Version history from one data file.
- About
/about/ - The team and why the app exists, without faces.
- Journal
/journal/ - Article index. Add an .mdx file and it appears here and on the home page.
- Articles
/journal/…/ - Three guides on reading tides, low-water walks and an unusual night.
- FAQ
/faq/ - Tabs for sailors, anglers, surfers and walkers.
- Contact
/contact/ - Support and press form.
- Privacy and terms
/legal/…/ - Two starter legal pages on a shared layout.
- 404
/404 - Designed, with a way back.
What is in the build
- Phone mock-ups built in HTML, CSS and SVG, so they stay sharp and are easy to edit
- An interactive product demo: pick a port and the chart redraws for today, with a static fallback without JavaScript
- Detail pages as content, one file per port, each with its own chart and table
- Free vs Pro pricing with a CSS-only monthly/yearly switch and a feature matrix
- A changelog and journal as data and content collections
- Plain text download buttons, so there is no app-store badge trademark to license
- 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
- A coastal app on dark navy: phone mock-ups drawn in HTML and SVG, low-tide harbour photography, sea and sand-ripple textures, and one signal-lime accent.
- The mechanic
- An app site built to convert: three phone screens in the hero, a live tide-chart demo that redraws for today per port, six port pages with a week of tides, Free vs Pro pricing with a monthly/yearly switch and a changelog. Motion is one quiet reveal.
- Loud channel
- Imagery
- Imagery. Low-tide coastal photography, no faces
- Type & palette
- Schibsted Grotesk · Atkinson Hyperlegible
-
#0b1b2b#eef3f7#c6f432
Who it is for
Built for mobile apps and small SaaS products, especially ones with location or data at their core: weather, fitness, travel, marine, outdoor and field tools. It suits a product with a free tier, a paid plan and a demo worth trying on the page.
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 phone screens images?
No. They are built in HTML, CSS and SVG, so you edit the text and numbers directly and they stay sharp on every screen. Swap them for real screenshots whenever you have them.
Can I replace the tide chart with my own product demo?
Yes. The demo is one component fed by a data file. Replace the data and the drawing with your own product’s, and the page layout around it stays the same.
Why are there no App Store badges?
The official badges are trademarks with their own usage rules. The template ships plain text buttons; add the official badges from Apple and Google when you publish your app.
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
MIDSHIFT
Shift scheduling app
Loud
Imagery
FENWRIGHT
Deterministic log replay
Loud
Imagery
BELLWETHER
Developer tool / CI test selection
Loud
Imagery
KELVERN
Payments / money movement
Loud
Imagery
HALVARD
Analytics / operations dashboard
Loud
Imagery