Green Pharmacy Storefront

Provide pharmacy name, city, delivery coverage/fees, opening hours and contact details, then products with categories, prices, pack sizes/flavors, stock and genuine discounts. Add actual services, pharmacist names/credentials/focus/working days, brands stocked and approved reviews. Mark missing ordinary copy for confirmation; do not invent registrations, accreditations, efficacy/dosage, awards or privacy/security assurances.

Use standalone HTML when no project exists. For an existing or explicitly requested framework, inspect conventions, preserve unrelated files and port the layout into components, content modules and real routes. The package suggests Next.js App Router with TypeScript if a framework is requested without a named stack. React controls have a ReUI mapping while signature hero/product/feature/footer artwork stays bespoke; other stacks need an explicit compatible control plan.

Preserve the hero silhouette rather than expanding its contents. At desktop the one-line Bricolage headline spans the lime frame, introduction/badges sit left, full pharmacist cut-out rises centrally and the upload card/action sit right. The reference headline is 144px at 1440px and 68px on a 390px phone; phone layout puts introduction/action left and portrait bottom-right, hiding the card earlier. Avoid extra statistics, floating badges, glow or a second CTA pair.

Keep lime as a surface and navy as heading/action color, with forest selections/footer and alternating butter, sky, peach, pink, mint and aqua tiles. Grey product cards contain white wells with whole packs visible, yellow deal pills and struck-through previous prices. Preserve the 1320px container, responsive 16–40px gutters, 30–52px home section padding, and 32/22/18/16/12px frame/card/tile/well/input radii with pill controls. Use Geist for body, Geist Mono for codes/timers and avoid purple washes or a second accent system.

Build the catalog from one product record per actual item so card, detail, search, cart and related content agree. Include option-specific price/previous price/count/stock, optional flavors, short label facts, usage and details. Preserve complete-pack imagery, unit-price calculations, sold-out/low-stock states and any genuine pharmacist-check note. Supplied medical copy is fictional material to replace, not a source of professional product recommendations.

Adapt counts deliberately: eight or more products keep the reference’s trending tabs/filter groups full, while its validator requires at least four. Four/five categories need matching desktop columns, four need a two-column tablet rule and more than six require selection or layout revision. Show four largest savings and up to eight trending items. Brand discs use eight columns by default; adjust five to seven, cap the home row at eight, or remove it and its route for a single-label shop. Two to eight pharmacists need a roster grid that fits their count; promotions remain a three-tile composition.

For a wellness business without dispensing, turn the prescription card into a routine quiz or refill/subscription explanation and adapt advice booking to the actual qualified role. A clinic with few products can foreground services and use membership only if it exists. Remove unused pages, cards and links together, including named render branches where needed. Preserve shop, product, cart, checkout and 404 infrastructure plus useful supporting form/privacy/terms pages, rather than inventing a service to fill the reference.

Plan the twenty-nine image roles as one studio series: fourteen product packshots, six hand-based category tiles, pharmacist hero/portrait crops, feature still life and shop interior. Use the actual shop’s product/staff photos when available. Replace all fictional product packs and electrolyte feature; category hands and generic interior can remain clearly provisional. Generated portraits are stand-ins, not images of named real pharmacists, and different crops of a person do not represent different staff members.

Keep packshots on a shared white sweep with consistent angle, soft upper-left lighting and normalized scale. The image guide describes paired product renders split into 900px squares, category/team sheets cropped at gutters, a lime-keyed transparent hero and pastel backgrounds matched to surfaces. Review crops, alpha edges, heads/hands and packaging at phone/desktop widths. One historical product prompt includes a lilac label despite the no-purple art direction, so reconcile that conflict during image replacement. Image generation may charge; approved supplied assets are an alternative.

Rebrand outside the main arrays too: metadata/page titles, header/mobile/footer marks, static contacts/hours, collection location, pharmacy code, sample account orders, hero badges, membership name/prices, app/chat staff, feature product/option/flavor identifiers, promo image IDs and legal text. Delivery promises, review totals, registration lines and pharmacist-on-duty wording need confirmed facts. A validator catching a fictional name does not establish that the replacement is accurate.

Review bag math against the actual business. Sample promotions reduce subtotal before the free-delivery threshold; an area surcharge is then added even when base delivery is waived, while collection has no shipping fee. Quantities are capped at ten in the local controls, not reserved from inventory. Positive stock counts and flavor availability need end-to-end testing because the add handler primarily rejects an option whose stock is zero. Changing a header area should update corresponding prices and promises consistently.

Qualify availability displays. Checkout builds a small set of visitor-local today/tomorrow windows and marks some delivery slots full using a deterministic hash. Consultation checks supplied staff weekdays, excludes near-past times and also marks example times taken through a hash; it is not a connected calendar. Generated starts are twenty minutes apart while one note says fifteen-minute appointments. Reconcile duration, timezone, cutoff, capacity and stale selections before using real scheduling claims. The home tracker’s ETA is calculated from the current time plus sixty-six minutes, not a courier location.

Treat prescription controls as file selection only. They echo the first file’s name/size and explicitly leave it on the device. The displayed JPG/PNG/PDF and 10MB guidance is not equivalent to an enforced type/size check: required validation checks only for a file. Repeat toggles change local UI text, pharmacy-code copying has a fallback that still needs actual clipboard verification, and no prescription is reviewed, stored or transmitted by these controls.

Review every success state honestly. Forms validate then wait about 750ms; consultation/message/join summaries describe what would happen, newsletter and app-link copy identify the demo, and sign-in exposes a sample dashboard without identity verification. Membership’s $39/year and $4/month values are sample UI choices, not billing. Checkout creates a local reference and confirmation before emptying the bag. Preserve explicit no-payment/no-send wording until each real service, permission and failure path is implemented.

Build offline output using Node.js 18+ with initial internet access for three font downloads and local image files. Aim below 5MB and remain under the 8MB limit. The inliner deduplicates repeated images using a small script and can write output before reporting a missing asset; check the exit result, and note that repeated copies depend on JavaScript. Adjacent-file delivery keeps images/fonts local instead of embedding them.

Run the static validator in the correct template/demo/real-site mode to inspect structure, sample leftovers, labels, routes, sandbox patterns, palette and size. Its checks are text/regex-based, its color check covers only certain hex hues, and adjacent-file mode does not check file existence. A pass does not prove actual stock enforcement, appointment capacity, image suitability, legal accuracy or service delivery. A framework port additionally requires its own build/type/lint checks.

At 1440, 1024, 768 and 390px, inspect the complete hero and all pages for overflow and consistent imagery. Exercise keyboard search, filters/sort/empty states, every option/flavor/stock condition, zoom/gallery, cart add/quantity/undo/promo/area fees, delivery/collection and slot changes. Test consultation off-days/past times, upload/reset/errors, membership, demo account/reorder, FAQ, contact/newsletter/app forms, clipboard and unknown routes. Verify menu/sheet focus/Escape/return focus, back/forward, reduced motion, offline loading and clear demo confirmations. Fix/recheck and report actual tests plus remaining data, image and service gaps.