Food Producer Website Template

About this food producer website template

The 21 pages you get

Home /

Centred hero over the pans with three product thumbnails, promises, the shop, a tick-list against table salt, the works, the season, the trade calculator, chef quotes, recipes, FAQ tabs and a pan-walk invitation.

Shop /shop/

Six salts as cards with type, grain, price and size.

Product pages /shop/…/

Gallery, size picker that updates price and order link, grain and use notes, delivery and related salts.

Wholesale /wholesale/

Quantity-break calculator with break meter, next-break hint, parcel or pallet delivery and total, plus the full trade price table.

The works /the-works/

The marsh, the pans and how a season runs from spring tide to salt tin.

Visit /visit/

Pan walks, the gate shop, opening times and directions.

Recipes and notes /journal/

Article index. Add an .mdx file and it appears here and on the home page.

Articles /journal/…/

Four recipes and notes, from salting a steak to why the pans turn pink.

FAQ /faq/

Tabs for shop, wholesale and visiting, with every answer open.

Contact /contact/

Form that pre-fills topic, salt and size 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 to the shop.

What is in the build

• Products as content: grain, uses, sizes, prices and gallery in one Markdown file per salt
• A wholesale calculator with price breaks at 5, 10 and 25 kg, delivery by weight and a trade-account call to action, all rates in one data file
• CSS-only FAQ tabs and a no-JavaScript fallback price table
• Add a Stripe Payment Link or Shopify Buy Button URL per product to sell directly; otherwise buttons send a pre-filled order enquiry
• Real salt-pan photography 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, with tests for the trade price breaks

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 working salt marsh: pale brine-grey ground, real salt-pan and harvest photography, sea-water textures behind the dark bands, and one brine-teal accent.

The mechanic

A retail shop and a trade line in one site: product pages with a size picker, a wholesale calculator whose price per kg drops at 5, 10 and 25 kg with delivery and total, chef quotes and a tick-list against table salt. Motion is one quiet reveal.

Loud channel

Imagery

Imagery. Bright salt-pan and harvest photography, no faces

Type & palette

Gloock · Work Sans

#eef3f3 #0f1f28 #0e6470

Who it is for

Built for salt makers, and a strong fit for any small food producer that sells retail and trade: coffee roasters, oil and vinegar makers, spice merchants, flour mills, smokehouses. It suits a short range with a story behind it and a wholesale price list. For a catalogue of hundreds of items with a cart, start from the ecommerce build.

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

1. 01 Accept the repository invite and clone it.
2. 02 Run npm install, then npm run dev.
3. 03 Replace the content in src/data/ with your own — that is where the brand, the copy and every list live.
4. 04 Swap the images in public/images/ and the palette in the @theme block.
5. 05 Run npm run build and deploy dist/ anywhere static.

Questions