Manufacturing Website Template
Demo brand: KANWICK STEELWORKS · Steel fabrication · 22 routes · Astro 7 + Tailwind 4
Live preview
The demo is a full desktop site. Open it in a new tab ↗
About this manufacturing website template
A complete website for a steel fabricator or any B2B job shop: a quote form in the hero, an instant lead-time and price estimator, six service pages, a machine capacity table, work references, pricing, a journal, an FAQ and a contact page. Twenty-two built pages, all driven by content files.
It looks like a real works. A charcoal ground with light grey sections for the dense content, bright laser, press-brake and welding photography, concrete and diamond-plate textures, and one safety-orange accent. Archivo set wide for headings, Public Sans for everything else.
Every section answers something a buyer needs before sending a drawing: will it fit your machines, what will it cost, when will it ship, are you certified, and who have you done it for. The estimator gives a rough price in seconds, and the quote form takes the drawing. Motion is one soft reveal.
The 22 pages you get
- Home
/ - Headline and quote card, workshop photo band, promises, six services, capacity, the works, process, estimator, comparison, recent jobs, client quotes, journal and FAQ.
- Services
/services/ - All six processes with price-from and lead time.
- Service pages
/services/…/ - Laser cutting, press-brake bending, welding and fabrication, structural steel, stairs and balustrade, powder coating. Specs, pricing, lead time and FAQ each.
- Capacity
/capacity/ - Machine list with sheet sizes, thickness per material and tolerances, plus certifications.
- Quote and estimate
/quote/ - The estimator: material, thickness, quantity and finish give a lead time, ship date and price band, then a full quote form with drawing upload.
- Work
/work/ - Job references with tonnage, lead time and client sector.
- Pricing
/pricing/ - Rates per process, minimums and how quotes are built.
- About
/about/ - The company, the works and the team, without faces.
- Journal
/journal/ - Guides for buyers and designers. Add an .mdx file and it appears here.
- Articles
/journal/…/ - Three technical articles on finishes, estimating and springback.
- FAQ
/faq/ - Questions split into quoting and drawings, and production and delivery.
- Contact
/contact/ - Contact form, address, hours and goods-in times.
- Privacy and terms of trade
/legal/…/ - Two starter legal pages on a shared layout.
- 404
/404 - Designed, with a way back to the quote form.
What is in the build
- A quote card with drawing upload in the hero, and a full RFQ form on its own page
- An instant estimator for lead time and price band, with every rate kept in one data file
- Services as content: specs, pricing, lead time and FAQ in one file per service
- A machine capacity table and certification strip for procurement teams
- Real industrial photography with maker marks removed, and texture backgrounds, optimised to AVIF and WebP by Astro
- All business details in one file, and one accent colour that rebrands the whole site
- 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 dock-side job shop: charcoal ground with light cool-grey sections for the dense content, real laser, press-brake and welding photography, concrete and diamond-plate textures, and one safety-orange accent.
- The mechanic
- A B2B site built to win RFQs: a drawing-upload quote card in the hero, an estimator that returns lead time and a price band from material, thickness, quantity and finish, a machine capacity table, certifications and job references. Motion is one quiet reveal.
- Loud channel
- Imagery
- Imagery. Industrial workshop photography, no faces
- Type & palette
- Archivo · Public Sans
-
#16181a#f3f4f6#c2410c
Who it is for
Built for steel fabricators, machine shops, laser-cutting bureaus and any B2B manufacturer that wins work through drawings and quotes. It also adapts to joinery, glazing and precast firms. It suits a business whose buyers compare lead times and capacity before price.
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 estimator connect to anything?
No. It runs in the page from rates you set in one data file, and gives a band rather than a quote. The quote form is where the drawing goes; point it at your form backend or CRM.
Can I change the services and machines?
Yes. Each service is one content file, and the capacity table and certifications are data. Add, remove or rename them and every page that lists them follows.
Can I use the photographs?
Yes. They are from Pexels, which allows commercial use, and each one is listed with its source and any retouching in LICENSING.md. Maker names on machines were removed.
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 trades & industry templates
KELMER OVERHEAD DOOR
Garage door repair
Loud
Imagery
TORWICK LOCK & SAFE
Locksmith / master keying
Loud
Imagery
Crowder Plumbing & Drainage
Plumbing & drainage
Loud
Imagery
BRISKWELL CLEANING CO.
Contract cleaning
Loud
Imagery
HOLLICK & VANE
HVAC contractor
Loud
Imagery