ENBIO AI SITE — BUILD BRIEF (handoff to Claude Code)
You are picking up a project mid-stream. The asset/data harvesting is **done**.
Your job is to build the website. Read this whole file before starting. Everything
below is established fact from prior work — don't re-derive it.
---
0. WHAT THIS PROJECT IS
A reconstruction of **enbio.com** (a Swiss maker of ultra-fast Class B medical
autoclaves) rebuilt in **Next.js**, that is (a) visually faithful to the original and
(b) better than the original by adding an **AI reasoning feature** the legacy site can't
have. The legacy site is a static Shopify brochure; this version reasons.
The owner has a mandate to build this. Keep the Enbio name and content.
---
1. ENVIRONMENT & ACCOUNTS (already set up)
- **Machine:** macOS, Node v24, Homebrew installed, zsh.
- **Working dir from prior work:** `~/enbio-harvest/` — contains all harvested data.
- **Supabase:** project `createagent-ai`, ref `fhqeyvrzjgkfdhxcuozq`,
URL `https://fhqeyvrzjgkfdhxcuozq.supabase.co`, region eu-west-1.
- Public Storage bucket **`enbio-assets`** holds the media (20 of 23 files uploaded).
- Asset URL pattern: `https://fhqeyvrzjgkfdhxcuozq.supabase.co/storage/v1/object/public/enbio-assets/<key>`
- Service key + Anthropic key live in `~/enbio-harvest/.env` (do NOT print or commit them).
- **Hosting:** Vercel (owner has account). **Repo:** GitHub (owner has account).
- **AI:** Anthropic API. Use model `claude-opus-4-8`. Key in `.env` as `ANTHROPIC_API_KEY`.
---
2. HARVESTED DATA (in ~/enbio-harvest/harvest/)
Per page (home, enbio-s, enbio-pro, enbio-s-beauty-edition, enbio-table,
magic-filter, about-us, where-to-buy):
- `page.html` — rendered DOM
- `sections.json` — structured heading/level/body copy in document order
- `tokens.json` — computed design tokens
- `assets.json` — original CDN asset URLs (REFERENCE ONLY — do not ship these;
ship the owner's files from Supabase instead)
Also `~/enbio-harvest/asset-map.json` — maps the owner's real files to page "slots"
with Supabase URLs + AI-assigned slot + confidence. This is the source of truth for
which image/video goes where. (3 large videos still show url:null — they need
compressing + uploading later; leave placeholders for slots home-hero, home-reel,
and the 4k teaser.)
---
3. LOCKED DESIGN TOKENS (from real site, do not guess)
- **Font:** Inter everywhere (body + headings). Headings 700 weight. Body 400, 16px,
line-height ~1.6.
- **Type scale:** h1 huge (~clamp 2.8–6rem), h2 ~61px/700, generous.
- **Colors:**
- Backgrounds: near-white `rgb(251,251,253)` / `rgb(249,249,251)`; sections alternate white.
- Text: `rgb(26,26,26)` primary, greys `rgb(156,163,175)` / `rgb(209,213,219)`.
- Accents: blue `rgb(37,99,235)`, green `rgb(22,163,74)`, orange `rgb(234,88,12)`.
(These are Tailwind blue-600 / green-600 / orange-600 — the site is Tailwind-styled.)
- **Aesthetic:** clean, modern, lots of whitespace, large product imagery, big section
headings with short eyebrow labels, spec numbers shown large (e.g. "7min", "38dB",
"134°C"). Light theme, NOT dark.
---
4. PRODUCTS & FACTS (ground truth — for content + the AI feature)
Four cycle PROGRAMS: FAST (S/Beauty 7min, Pro 9min), 134 Class B w/ drying (15min all),
121 Class B (30min all), PRION (Pro only, 43min).
| Spec | Enbio S | Enbio Pro | S Beauty Edition |
|---|---|---|---|
| FAST cycle | 7 min | 9 min | 7 min |
| Class B (134) | 15 min | 15 min | 15 min |
| Capacity | 2.7 L | 5.3 L | 2.7 L |
| Pouches | 8 | 16 | 8 |
| Dimensions | 56×25×15.8cm | 57.5×27×20cm | 56×25×15.8cm |
| Weight | 15 kg | 20 kg | 15 kg |
| Color | white | white | secco (cream) |
| Extras | User ID, Standby, Auto-test | + PRION program | fewer programs, salon-focused |
Other products: **Enbio Table** (stand/accessory), **Magic Filter** (water recycling,
up to 1000 cycles / 6 months on 1 L). Power 2.25 kW, 220-240V, 2.1 bar, max 137°C, 38 dB.
Certifications: EN 13060 Class B, FDA quality cert, TÜV Nord, MDSAP. Triple validation.
Sold only via authorized distributors (no public pricing). Support: support@enbio.com,
+48 570 918 191. HQ Switzerland; offices Gdynia PL + Hoschton GA USA. 70,000+ units sold.
Class B = highest standard; fractionated triple vacuum; sterilizes wrapped/hollow/porous.
---
5. PAGES TO BUILD
Match the original's structure (see each sections.json for the real section order/copy):
- `/` home — hero (video), Class B explainer, model lineup, spec highlights, trust/certs
- `/products/enbio-s`, `/products/enbio-pro`, `/products/enbio-s-beauty-edition`
— rich product pages (the S page has ~20 sections; mirror its rhythm)
- `/products/enbio-table`, `/products/magic-filter`
- `/about` (about-us), `/support` (FAQ + contact), `/where-to-buy` (distributor — the
original is a JS map; a contact/region form is an acceptable v1)
Pull copy from sections.json; pull media URLs from asset-map.json by slot id.
---
6. THE AI FEATURE (the "better than original" centerpiece) — OPTION A
**A reasoning interview that replaces the static compare-table + FAQ.** Visitor describes
their practice in natural language ("two-chair piercing studio, mostly hollow needles,
tight on counter space"). The AI reasons over the real spec/program data above and returns:
a recommended model + why, and the cycle they'd run. Conversational, not a static table.
Implementation:
- Next.js API route (server-side only; key never in browser) calling `claude-opus-4-8`.
- System prompt grounded in the §4 product/program facts. Must NOT invent prices.
- Front end: a chat-style box on home + a dedicated section. Stream responses if easy.
- Keep it honest: if asked something outside the facts, say so + point to a distributor.
(Do NOT build three half-features. This one, done well.)
---
7. BUILD ORDER (suggested)
1. `npx create-next-app@latest` (App Router, TypeScript, Tailwind) inside a new repo dir.
2. Add `.env.local` from the existing `~/enbio-harvest/.env` values (Supabase URL + keys,
Anthropic key). Add `.gitignore` for `.env*`.
3. Tailwind config: set the Inter font + the §3 accent colors as theme tokens.
4. Build a small data layer: read asset-map.json + sections.json into typed lookups
(or seed a Supabase table; flat JSON import is fine for v1).
5. Build shared layout (nav: products dropdown, about, support, where-to-buy; footer).
6. Build home, then the three main product pages, then the rest.
7. Build the Option-A AI route + UI.
8. `git init` → push to GitHub → import to Vercel → set env vars in Vercel dashboard → ship.
9. Later: compress + upload the 3 remaining videos, fill their slots.
8. GOTCHAS LEARNED TONIGHT
Build faithfully, then make the AI feature genuinely good. Good luck.