The prompt submitted at the start of every Run against this version.
# Fjora — “Taste the North” campaign site
Build the campaign landing page for **Fjora**, a fictional Nordic botanical
sparkling-water brand, launching its “Taste the North” seasonal line.
## Brand
- **Name:** Fjora.
- **Voice:** calm, crisp, quietly confident. Short sentences. No exclamation
marks, no discount language.
- **Feel:** cold, clear, natural — glacial water, botanicals, northern light.
- **Supplied photography.** Five images ship under `public/assets/`: three
product photos (one per flavor, referenced from `products.json`), a fjord
hero image (`hero-fjord.webp`), and a botanical macro for the story section
(`story-botanicals.webp`). Use them; do not recreate or replace them.
- **You own the rest of the visual identity.** Design the wordmark/logo,
color palette, type scale, and layout yourself; nothing beyond the
photography is prescribed. Any additional graphics you need must be created
in this workspace (inline SVG or CSS) — external images, fonts, and network
resources are prohibited.
## Copywriting is part of the task
You write all customer-facing copy yourself, in the brand voice: headlines,
the brand story, tasting notes, FAQ questions and answers, and microcopy.
Ground every claim in the facts supplied in `public/data/brand.json`
(`positioning_facts`, `product_facts`) and `public/data/products.json`
(flavor names, botanicals). Do not invent product claims (health benefits,
prices, retail availability) beyond those facts.
## Page
One landing page, these sections in this order:
1. **Hero** — campaign name “Taste the North”, a brand wordmark you design,
the supplied fjord image (`hero-fjord.webp`) as visual anchor, one primary
call-to-action that scrolls to the flavor selector.
2. **Flavor selector** — the three seasonal flavors from
`public/data/products.json`, each with its supplied product photo.
Selecting a flavor updates a detail area: product photo, name, botanical
list, and a tasting note you write for that flavor. Exactly one flavor is
selected at all times; the first flavor is selected initially.
3. **Story** — a brand story you write from the positioning facts, presented
with the supplied botanical macro image (`story-botanicals.webp`).
4. **FAQ** — at least four question/answer pairs you write, each grounded in
a `product_facts` entry, as expandable items: collapsed by default,
individually expandable and collapsible.
5. **Footer** — the contact line from `brand.json` and the note “Fjora is a
fictional brand created for UIBenchmark.” (verbatim, must be visible).
## Interactions and constraints
- Implement required interactions as real behavior, not static mockups.
- Responsive at 1440×900 (desktop) and 390×844 (mobile). At mobile width the
navigation between sections must remain reachable (your choice of pattern).
- Use only the supplied images, supplied data facts, and graphics you create
yourself in this workspace. No external network requests, fonts, or images.
System font stack only.
See `BENCHMARK_RULES.md` for binding rules and `REQUIREMENTS.json` for the
behaviors that will be evaluated.
