Startup Landing Page Template
Demo brand: MIDSHIFT · Shift scheduling app · 24 routes · Astro 7 + Tailwind 4
Live preview
The demo is a full desktop site. Open it in a new tab ↗
About this startup landing page template
A complete marketing site for a B2B SaaS or startup: a web-app mockup in the hero, product and pricing pages, a plan page for each tier, industry solution pages, a customer story, a resources hub, an FAQ and a contact page. Twenty-four built pages, all driven by content files.
It looks like a friendly product people want to try. White pages with pale pink, lilac and mint washes, a large weekly-rota app drawn in HTML rather than a screenshot, real café and shop-floor photography, and one magenta accent. Sora for headings, Rethink Sans for everything else.
Every section answers what a small-business buyer weighs before a trial: what it looks like, what it costs for a team my size, how much time it saves, and who like me already uses it. The pricing slider and the hours-saved calculator do that on the page. Motion is one soft reveal.
The 24 pages you get
- Home
/ - Centred hero with the rota app mockup, promises, industries, a customer stat, how a week runs, team-size pricing, the hours-saved calculator, a week-by-week comparison, the customer story, resources, FAQ and a closing call to action.
- Product
/product/ - Every feature from rota building to payroll export, with the matching app views.
- Pricing
/pricing/ - A slider from 5 to 200 staff re-prices all three plans and marks the cheapest, plus the full price table.
- Plan pages
/pricing/…/ - Starter, Team and Business, each with what is included and who it fits.
- Solutions
/solutions/ - Four industries with typical team size and the plan that fits.
- Industry pages
/solutions/…/ - Restaurants, cafés, clinics and retail, each with its own rules and examples.
- Customers
/customers/ - Customer stories index.
- Customer story
/customers/…/ - One long story with three headline numbers and a pull quote.
- Resources
/resources/ - Guides, templates and webinar recordings with type badges. Add an .mdx file and it appears here.
- Resource pages
/resources/…/ - Four written pieces: two guides, a rota template and a webinar write-up.
- About
/about/ - The company and why it exists, without face photos.
- FAQ
/faq/ - Questions by category with a sidebar that becomes a select on phones.
- Contact
/contact/ - Demo and sales form that pre-selects topic and plan from the page you came from.
- Privacy and terms
/legal/…/ - Two starter legal pages on a shared layout.
- 404
/404 - Designed, with a way back.
What is in the build
- A browser-window app mockup built in HTML and CSS, so it stays sharp and is easy to edit
- A team-size pricing slider that re-prices every plan and highlights the cheapest, with prices in one data file
- An hours-saved calculator that turns team size into hours and money back each month
- Plans, industry solutions, customer stories and resources as content collections
- Real café and shop-floor photography, optimised to AVIF and WebP by Astro
- All company details in one file, and one accent colour that rebrands the whole site
- Vitest and Playwright suites included, with tests for the pricing maths and the widgets
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 friendly B2B web app: white pages with pale pink, lilac and mint section washes, a large rota app drawn in HTML, real café and shop-floor photography, and one magenta accent.
- The mechanic
- A SaaS site built to convert small-business buyers: a browser-window product mockup in the hero, a slider that re-prices three plans by team size, an hours-saved calculator, industry solution pages, a customer story with numbers and a week-by-week comparison. Motion is one quiet reveal.
- Loud channel
- Imagery
- Imagery. Café and shop-floor photography, hands only
- Type & palette
- Sora · Rethink Sans
-
#ffffff#16121a#c2255c
Who it is for
Built for B2B SaaS startups and small software companies selling to small and mid-sized businesses: scheduling, booking, HR, inventory, point of sale and field-service tools. It suits a product with per-seat or per-team pricing and a free trial.
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
Can I change the pricing model?
Yes. Plans, per-seat prices, included seats and the slider range live in one data file. Change them and the pricing page, the plan pages, the calculator and the tests follow.
Is the app mockup a screenshot?
No. It is built in HTML and CSS, so you edit names, shifts and labels directly. Swap it for a real screenshot of your own product whenever you have one.
Can I use the photographs?
Yes. They are from Pexels, which allows commercial use, and each one is listed with its source in LICENSING.md.
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
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