Coffee & Tea

Coffee & Tea is a full online shop for a small roastery: four pages plus catalogue, product, cart, checkout and a journal. It is built on two numbers the trade dislikes printing — the roast date and the price paid to the farmer — and two mechanisms that both, at some point, argue for spending less: a brew calculator and a bean chooser.
Pages included

Home — hero on the stamped date, a three-stage freshness window (days 4–21, 22–42, and after that), a live product strip from the catalogue, a Rp 145.000 bag broken into seven lines that sum exactly to the price — including the 38 grams of water that leave during roasting and that you have paid for on every bag you have ever bought — a calculator teaser, a dark band admitting the shop is not a tea specialist, and three customers including one sold a smaller bag than they ordered.
Brewing — the calculator: six methods, each carrying its own serving size, ratio, grind, temperature and time. It gives the dose and the water, then does the arithmetic nobody does at a counter — how many cups that bag holds, how many days that is at your rate, and a warning when the bag will be flat before you finish it. Then every ratio in one table, three things that actually go wrong (none of them the bean), and six questions.
The beans — the chooser: how you drink it × how you brew it × roast level, applied in a single pass over six beans so a later facet cannot un-hide what an earlier one hid. One combination deliberately returns nothing, with an explanation of why light roasts disappear in milk. Then what was paid for all six lots against the local collector price, with two rows honestly marked “through the co-op”, and a pair of lists separating label words that mean something from ones that do not.
Subscription — three sizes × three intervals with the monthly figure worked out, four terms with no asterisks, and a worth-it / not-worth-it pair where the second list tells four kinds of customer not to subscribe. Four-step setup and a form that asks how many cups a day rather than which plan.
Shop, product, cart, checkout — catalogue with category chips, product page with working gallery and a link into the calculator, a cart that explains the roast-day cut-off, and a checkout that asks for the grind.
Journal — four long posts: why the kilo is usually the worse buy, what the farmer numbers do and do not prove, why bitter-and-sour-at-once is a grinder fault, and what keeping only six lots costs the roastery.

Design and style. Roasted brown and terracotta on cream, Bitter over Inter, small radii, a solid sticky header with the roast days in the strip above. The shared script carries the menu, the calculator, the chooser, the product gallery and accordions — all vanilla and null-guarded, since it runs on every page.
Before you publish. The six brewing methods hold their own ratios in data- attributes and the calculator reads nothing else — but the same figures are also printed in the ratio table below it, so change both. Replace the farmer prices before anything else: they are checkable claims about other people's incomes, and inheriting them would be the one dishonest thing this template makes easy. The cost breakdown sums exactly to the price above it, so recheck the arithmetic after any edit. The roast-date promise, the 48-hour posting and the cancel-in-one-message terms are commitments customers will hold you to. Forms use named inputs with no action attribute, so PageHub attaches the handler on publish; sample products and articles are for the preview only.
Best suited to coffee roasters and tea merchants, bakeries and chocolate makers, spice and condiment producers, and any food shop where freshness has a date on it and the honest answer is sometimes to sell less.