Insurance Agency Website Template
Demo brand: KEDWORTH & QUIRE · Independent insurance brokers · 22 routes · Astro 7 + Tailwind 4
Live preview
The demo is a full desktop site. Open it in a new tab ↗
About this insurance agency website template
A complete website for an independent insurance broker: a "what do you need to insure?" chooser in the hero, seven cover pages with typical prices, limits and exclusions, a five-step quote request with callback booking, a claims page, guides, an FAQ and a contact form that fills itself in from the quote. Twenty-two built pages, all driven by content files.
It looks like a firm you would trust with a claim. White pages with pale mist blocks, one dark teal band, real photography of cottages, terraces, vans, workshops, farms and storm damage carrying the colour, and one deep teal-blue accent. Petrona for headings, Albert Sans for everything else.
Every section answers what someone asks before switching broker: what do you insure, roughly what will it cost, what is not covered, why a broker rather than a comparison site, and what happens when I claim. Claim stories show what the insurer paid, the excess and the days to settle. Motion is one quiet reveal.
The 22 pages you get
- Home
/ - Hero with the cover chooser, promises, seven cover cards, the firm band with figures, how a quote works, the quote wizard, broker vs comparison site vs going direct, claim stories, three guides, FAQ tabs and a renewal call to action.
- Cover
/cover/ - All seven covers as cards, plus a side-by-side table of who each suits, the limit that matters, the standard excess and the typical price.
- Cover pages
/cover/…/ - Home, landlord, van, fleet, shop, trade and farm. Price from, limits, what is covered and what is not, how it is placed, a matching claim story and quote buttons pre-set to that cover.
- Quote request
/quote/ - The five-step wizard on its own page. Open it with ?cover=van and it starts on that cover.
- Claims
/claims/ - The 24-hour claims line, what happens after you ring, what to do before anyone arrives, and five settled claims with figures.
- About
/about/ - The firm, its figures, how it is paid and works, and the regulatory line.
- Guides
/guides/ - Plain-English articles. Add a Markdown file and it appears here.
- Guide articles
/guides/…/ - Four written guides: the average clause, storm or flood, tools in vans, and the 60-day rule for empty houses.
- FAQ
/faq/ - Questions in Home / Business / Vehicles tabs, readable without JavaScript.
- Contact
/contact/ - Office, claims line, hours and a form that pre-fills cover, callback time and the full quote summary from the wizard.
- Privacy notice
/privacy/ - A starter privacy notice written for a broker.
- Terms of business
/terms/ - A starter terms of business: status, how the firm is paid, cancellation and complaints.
- 404
/404 - Designed, with the claims line and a way back.
What is in the build
- A five-step quote request: cover, a few details for that cover, renewal month, a callback slot from a weekly diary, and a summary with a typical premium range clearly labelled as an example
- The quote summary is sent to the contact form in the link, so the enquiry arrives with every answer filled in
- Covers as content: price from, excess, limits, covered and not covered in one Markdown file per cover
- Claim stories with insurer paid, excess and days to settle, and a broker vs comparison site vs going direct table
- Comparison tables that stack row by row on phones instead of scrolling sideways
- All firm details, hours and the regulatory line in one file, with clear placeholders for your own registration numbers
- 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 ground with pale mist blocks and one dark teal band, Petrona headings over Albert Sans, real photography of cottages, vans, workshops, farms and storm damage, one deep teal-blue accent.
- The mechanic
- A hero cover chooser starts a five-step quote request (cover, details, renewal month, callback slot, summary with an example premium range) that pre-fills the contact form; claim stories show what was paid and how fast. Motion is one quiet reveal.
- Loud channel
- Imagery
- Imagery. Rural homes, vans, workshops, farms, storm damage
- Type & palette
- Petrona · Albert Sans
-
#ffffff#13232b#155e75
Who it is for
Built for independent insurance brokers and agencies placing personal and commercial lines: home, landlord, motor and fleet, shop, trade and farm. It suits a local firm that competes with comparison sites on advice and claims handling, and adapts easily to a specialist broker with fewer lines.
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
Does the quote wizard give real prices?
No. It shows a typical premium range from a data file, labelled as an example, and then sends the request to you. Edit the ranges to match your book, or remove them.
Where do I put my regulator and firm number?
In one place in the site data file. The footer, about page and terms show them. The demo uses obvious placeholders; replace them with your own details before you publish.
Can I change the covers?
Yes. Each cover is one Markdown file. Add, remove or rename them, and set the wizard questions for each one in the quote data file.
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. Faces, badges and signage were avoided or retouched out.
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 professional services templates
HALLREN Counsel LLP
Corporate & litigation counsel
Loud
Moving set-piece
Sightline Capital
Financial advisory
Loud
Imagery
WARDENBY
Estate agency / lettings
Loud
Imagery
Balsworth & Co.
Chartered accountancy practice
Loud
Imagery
MARLEDGE FINANCIAL PLANNING
Financial planning & advice
Loud
Display type