Business websites
Brewery website example with a live looking tap list
A taproom website gets one question more than any other: what is on tap this week. This example for an invented Marrickville brewery, built in Code mode, answers it on the home page with styles, strength and schooner and pint prices, then covers the weekly events, opening hours and a functions enquiry.
The home page at three widths
The same page on a desktop, a tablet and a phone, exactly as it renders. Scroll inside each frame to read it all; nothing here can be clicked or submitted.
The on tap page
Page by page
- Home /
- Bento hero: headline tile, two photos and a number tile, On tap this week, four beers with prices, The brewhouse, photo beside a story panel, What's on, four weekly events beside two photos, Visit the taproom, address and hours
- On tap /beers
- Page heading, Full tap list, six beers, To take home, cans and growlers with prices
- Functions /functions
- Spaces and capacity, Function enquiry form (guests, date, message)
What the code contains
Three routes, a content folder with the tap list, takeaway prices and events, and one component per section: the bento hero, a beer row used on both the home and beers pages, the brewhouse panel, the events list and the visit block. The functions page uses the site kit's lead form with a select for the number of guests.
Keeping the tap list current
Tell the AI chat what changed, such as "the hazy is off, add a pilsner at 4.8 percent", and it edits the content file and rebuilds. A brewery that changes beers daily could ask for the list to be read from a data collection instead, so staff update it without a rebuild.
What makes this website work
The tap list reads like a menu board
Each beer is a row with its name, style, strength, tasting notes and both prices, separated by thin rules. It is the format drinkers know from the board behind the bar, and it is the reason they open the site.
A bento hero
The first screen is a grid of tiles: the headline, the bar, a tasting paddle and an amber tile that says six beers on tap. It shows the place, the product and the promise in one glance without a carousel.
Dark warehouse palette
Charcoal, malt amber and hop green, with Space Grotesk headings, make the site feel like the taproom at night. Code mode wrote the palette into the tokens file, so every component uses the same colours.
Questions people ask
What should a brewery website include?
What is on tap, opening hours, the address, events, takeaway, functions and anything that makes a visit easy, such as kids and dogs policies. This example covers each one, with the tap list on the home page and a full list with takeaway prices on its own page.
Can staff update the tap list without code?
In this example the list is in a content file, changed through the AI chat. Code mode can also store it in a data collection, which the owner edits as rows in the builder's Data tab and the site reads live, so a change shows without a rebuild.
Can the site sell cans online?
The store works in Code mode, with products, Stripe Checkout through the owner's connected account and pickup or shipping. Alcohol sales need the right licence in your state, and you are responsible for age checks, so most taprooms sell takeaway at the bar, as this example does.
How do function enquiries arrive?
The functions page uses the site kit's lead form with name, email, phone, the number of guests, a date and a message. Each enquiry goes to the message inbox with an email and a push to the owner, and the inbox exports as a CSV.
Why build a brewery site in Code mode?
The bento hero and the menu board tap list are layouts the section library does not offer. Code mode writes them as components and checks them at three widths on every build. The trade off is that edits go through the AI chat rather than a form.
Build your own in about a minute
The button below opens the generator with this use case already described. Change the wording to match your own, generate, then edit anything you like.
Make one like thisOther website examples
Boutique hotel website example built in Code mode
A small hotel sells a feeling first and a room second, and its website needs more freedom than a section library gives. This example for an invented Port Fairy guesthouse was built in Code mode as a React site: a full bleed hero, editorial rooms, a breakfast and garden spread and a check availability form.
Wedding venue website example with packages and a day timeline
Couples shortlist wedding venues on photos, capacity and price, then ask whether their date is free. This example for an invented Hunter Valley vineyard, built in Code mode, gives them all four: a calm photographic home page, the three spaces with capacities, a wedding day timeline and a packages page with prices.
Electrician website example with prices on common jobs
Homeowners call the electrician who looks least likely to surprise them on the invoice. This one page example for an invented Geelong contractor shows the call-out fee in the hero, prices six common jobs, explains how a job runs and puts the licence number where people can check it.
For everything this generator can do, see the website maker.
Written and checked by the OneCraft team. Last checked .