Grid-Paper Beverage Brand Site

Provide name, one-line promise, audience and actual products with names, prices, sizes and differences. Describe online sales, subscriptions, stockists and wholesale, then story, people, contact and delivery facts. Supply approved nutrition, ingredients, sourcing, reviews, years, partner locations and claims. List missing ordinary content for confirmation; omit an unsupported nutrition table rather than guessing health, organic, certification or regulatory facts.

Choose standalone HTML with no existing codebase. In an existing or requested framework, inspect conventions, preserve unrelated files and translate content collections/renderers into components and actual routes, not an iframe or raw HTML injection. The package suggests Next.js/TypeScript for an unspecified requested framework. React generic controls have a ReUI mapping; photo fan, stickers, map and stepper compositions keep bespoke behavior/CSS, and non-React support needs checking.

Preserve the quiet hero proportions: centered two-line Anton headline at about 60px desktop/42px phone, one 12px Space Mono support line, then five rotated photos across an 850px stage with speech note, sparkle and smile stickers. Each photo links to its subject and lifts/straightens on hover or focus. Keep the fan inside the first viewport and phone gutters; no extra CTA pair, announcement pill, statistics or badges belongs in this composition.

Carry warm-white paper with faint 22/110px neutral grid lines across pages, solid cards above it, 2px ink outlines and hard offset shadows. Anton handles sentence-case headlines, Instrument Sans body and Space Mono labels/prices. Yellow marks actions, cobalt marks brand and product-specific colors stay attached to their flavors. Keep the 1280px container, 880px narrow measure, 16–40px gutters, 72–132px section rhythm and distinct radius scale; product cards are 26px, inputs 14px and controls pill-shaped. Avoid purple washes or replacing the paper with a flat ground.

Populate product, collection, recipe, stockist, FAQ and note data together. Product copy needs its own short card note, tasting line, fuller introduction and useful best-for uses rather than a repeated description. Choose four/eight/twelve products for the standard grid or change to three columns for three/six/nine. Keep one meaningful featured product and the bundle only if it exists. Collections suit two/four entries, recipes need at least three for the home bento, and the note panel needs four or an adjusted three-column layout. The hero stays five cards.

Update manually wired relationships after changing IDs: product pairings, recipe made-with product, stockist carried items, fan list, home recipe bento/links, shop matcher, bundle links and search-page index. Rename route patterns, navigation state and contextual links together. Adapt counts in headings, bundle photos and savings copy instead of leaving seven-carton wording after changing the range. Literal-link checking cannot catch every dynamic lookup failure, so walk direct and contextual entry points.

Adapt buying mechanics from real rules. The sample multiplies base price by size, applies size savings, adds a further ten-percent subscription reduction and can apply a welcome-code discount afterward. Free-delivery eligibility uses the discounted subtotal. Bag count sums line quantities rather than the number of cartons inside each pack; cart lines distinguish product, size and one-off/subscription choice. Quantities cap at twenty-four and there is no inventory reservation or recurring-billing engine. Confirm stacking and thresholds instead of assuming those sample rules are appropriate.

Keep local state limitations explicit. Bag, saved items, filters and promo state live in memory in the standalone reference, so they are not an account library or cross-visit cart. A framework implementation may add persistence, but that is additional work. Test empty and populated bag, removed lines, changed size/subscription/quantity, promo errors and checkout after navigation. Review delivery-versus-collection charges against real rules because the inspected totals function has no collection parameter.

Preserve the recipe tools without overstating their precision. Servings range from one to four times the base count; quantities scale from the original recipe and checkboxes are restored after rerender. Grams/milliliters are rounded, count units use quarter fractions and a pinch remains a pinch. Review small/zero quantities, bake-specific instructions and slice-versus-serving labels. Method, tip, timings and nutrition do not become validated recipes merely because arithmetic updates.

Build imagery as one sunny editorial food series with hard morning light, cream linen/plaster and cobalt/yellow props. Each product gets a distinct still life and every recipe, collection/process moment and person needs a relevant subject; card/detail reuse is appropriate for that same entity. The twenty-one supplied photos include seven carton still lifes, bundle, lifestyle, six recipe scenes, farm/mill, founders/team and cafe. Generated founders/team remain stand-ins; use approved real portraits for actual people.

Replace product cartons, mixed box, brand breakfast table, oat field and mill imagery when the new business no longer matches them. Recipe/cafe/picnic scenes can remain neutral placeholders for compatible food/drink contexts. Packaging stays blank without text/logos; fit the product/cup into the actual card/fan crop and check faces/hands at desktop and 390px. An available agent image tool may charge, or use supplied assets; alternate crops do not count as new people/products. This reference itself needs no paid service to display.

Change content roles when the business differs. A skincare/candle brand can use scents, routines and rituals instead of flavors/recipes, replacing nutrition with ingredients/use information. Without retail partners, remove stockist map/route and point the yellow panel to delivery; without wholesale remove that route and links. For real stockists, update names/hours/addresses/carried IDs and SVG coordinates/background labels. The illustrated map uses supplied positions, not geocoding, live inventory or visitor location.

Review schedule and market assumptions across interface and copy. The reference computes a future Thursday with a Tuesday cutoff from visitor-local midnight, then Friday/Saturday alternatives; it is not a business-timezone or capacity service. Change its date logic alongside delivery zones, weekly schedule, pickup text and cutoffs. Replace dollar formatting, postal/phone validation, liter/glass quantities, package savings and policy dates for the actual market.

Check every form’s outcome wording. The source intends a demo, but newsletter success promises a future letter, contact says a message was received and wholesale says a sample case is on its way after only a local delay. These need explicit demo copy until services exist. Checkout creates a random local order number and clears bag/promo, with a no-charge/no-send note even though surrounding text mentions an emailed confirmation. Preserve the truthful boundary, and do not describe those actions as delivery-tested.

Rebrand metadata, logos/accessible names, footer/tagline/legal entity, contact/address, ALT text, story stats/timeline/team, search index, wholesale terms, delivery promises, promo code and order references outside the main data arrays too. A plausible placeholder must remain listed for confirmation. Actual testimonials, partner cafes and ingredient/sourcing proof require business evidence; animated stat counters do not validate the numbers.

Prepare offline output with Node.js 18+ and initial network access to download/embed Anton, Instrument Sans and two Space Mono weights. Keep web-sized local WebP assets, target below 5MB and stay below 8MB. The inliner is the same helper inspected for the pharmacy reference: missing assets/font downloads fail after output may already be written, and deduplicated repeated images use a small script. Check process results and actual offline loading, not just file presence.

Use the validator to inspect offline references, local-file existence in files/template modes, sample identities, static route patterns/IDs, labels, palette, hero signatures and size. These are text/regex checks rather than proof of every dynamic route, image right, transaction or responsive layout. Framework delivery needs its own build/type checks and route review. At 1440/1024/768/390px inspect home and every detail/service page, all overlays/focus/Escape, search keyboard results, saved/filter/sort states, gallery/tabs, price/totals, recipe scaler/checks, list/map selection, FAQ and form invalid/success paths. Check back navigation, reduced motion, offline/iframe behavior and report actual acceptance results and outstanding service/data gaps.