# 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.