## ADDED Requirements ### Requirement: Nav renders logo linking to homepage The navigation bar SHALL display the Qumo wordmark logo (`logo-wide.svg` inlined as SVG) on the left side, wrapped in an `` tag linking to the locale-appropriate homepage (`/` for EN, `/nl` for NL). The logo fill SHALL use `currentColor` so it inherits the Snow text color on the Midnight nav background. #### Scenario: Logo is visible on dark background - **WHEN** the page renders with `Nav.astro` included - **THEN** the logo SVG SHALL have `class="text-snow"` (or equivalent) so its paths render as Snow (`#F3F3F3`) on the Midnight background #### Scenario: Logo links to locale homepage - **WHEN** the user is on an English page and clicks the logo - **THEN** the browser SHALL navigate to `/` #### Scenario: Logo links to NL homepage on Dutch pages - **WHEN** the user is on a Dutch page (`/nl/...`) and clicks the logo - **THEN** the browser SHALL navigate to `/nl` --- ### Requirement: Nav renders three page links The navigation bar SHALL render three links: **Services** (→ `/#services`), **AI Launchpad** (→ `/ai-launchpad`), **About** (→ `/about`). Label text SHALL come from the `nav.links` array in the locale content JSON. On Dutch pages, links SHALL point to `/nl#services`, `/nl/ai-launchpad`, `/nl/about`. #### Scenario: EN nav links render with correct hrefs - **WHEN** the page locale is `en` - **THEN** the three links SHALL have `href` values `/#services`, `/ai-launchpad`, `/about` with labels "Services", "AI Launchpad", "About" #### Scenario: NL nav links render with correct hrefs - **WHEN** the page locale is `nl` - **THEN** the three links SHALL have `href` values `/nl#services`, `/nl/ai-launchpad`, `/nl/about` with labels "Diensten", "AI Launchpad", "Over Ons" --- ### Requirement: Nav renders Connect CTA button The navigation bar SHALL render a "Connect" CTA button on the right side linking to `/contact` (EN) or `/nl/contact` (NL), with the `wum-arrow.svg` chevron icon inline. The button SHALL be styled distinctly from nav links (border or background treatment matching the staging site). #### Scenario: Connect button links to contact page - **WHEN** the page locale is `en` - **THEN** a button or link with label "Connect" and `href="/contact"` SHALL be present in the nav #### Scenario: NL Connect button uses Dutch label and NL href - **WHEN** the page locale is `nl` - **THEN** the CTA SHALL display "Verbind" and link to `/nl/contact` --- ### Requirement: Nav renders language switcher The navigation bar SHALL render a language switcher that links to the alternate locale version of the current page. The current locale SHALL be shown as active/non-linked; the alternate SHALL be a clickable link. #### Scenario: EN page shows NL as switchable link - **WHEN** the current page is `/about` - **THEN** the language switcher SHALL show "EN" (active, non-linked) and "NL" linking to `/nl/about` #### Scenario: NL page shows EN as switchable link - **WHEN** the current page is `/nl/ai-launchpad` - **THEN** the language switcher SHALL show "NL" (active, non-linked) and "EN" linking to `/ai-launchpad` --- ### Requirement: Nav is fixed and transitions background on scroll The `