Step 002 complete. Step 003 needs verification

openspec/specs/content-i18n/spec.md

@@ -34,6 +34,25 @@ Defines the content localisation system for the Qumo website, including the JSON
 - **WHEN** `getContent("fr")` or any unrecognized locale string is called
 - **THEN** the function SHALL return the parsed contents of `src/content/en.json`
 
+### Requirement: Locale content JSON files contain nav strings
+`src/content/en.json` and `src/content/nl.json` SHALL each contain a top-level `"nav"` key with the following structure:
+- `links`: array of objects with `label: string` and `href: string` for each nav link
+- `cta`: string — label for the Connect CTA button
+- `ctaHref`: string — href for the Connect CTA button
+- `langSwitch`: object with `en: string` and `nl: string` labels for the language switcher
+
+#### Scenario: en.json nav section has correct structure
+- **WHEN** `src/content/en.json` is parsed as JSON
+- **THEN** it SHALL have a `nav` object containing `links` (array of 3 items with `label` and `href`), `cta` string, `ctaHref` string, and `langSwitch` object with `en` and `nl` keys
+
+#### Scenario: nl.json nav section has Dutch labels
+- **WHEN** `src/content/nl.json` is parsed as JSON
+- **THEN** `nav.links` SHALL contain Dutch labels ("Diensten", "AI Launchpad", "Over Ons"), `nav.cta` SHALL be "Verbind", and `nav.ctaHref` SHALL be "/nl/contact"
+
+#### Scenario: Build succeeds with nav strings added
+- **WHEN** `npm run build` is executed after adding `nav` keys to both JSON files
+- **THEN** the build SHALL complete without TypeScript errors
+
 ### Requirement: Content files use static imports (no runtime fetch)
 The `i18n.ts` helper SHALL use static ES module imports (`import enContent from './en.json'`) rather than dynamic `fetch` or `fs.readFile`. This ensures type safety and tree-shaking at build time.
 

openspec/specs/navigation/spec.md

@@ -0,0 +1,87 @@
+## Purpose
+
+Defines the navigation bar component (`Nav.astro`) present on every page of the Qumo website. Covers logo, page links, language switcher, Connect CTA, scroll behavior, and mobile hamburger menu.
+
+## 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 `<a>` 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 `<nav>` element SHALL be `position: fixed` at the top of the viewport with `z-index` above page content. On page load it SHALL have a transparent background. After the user scrolls more than 20px, it SHALL transition to a solid Midnight (`#102022`) background. The transition SHALL be smooth (CSS `transition-colors`).
+
+#### Scenario: Nav is transparent on page load
+- **WHEN** a page loads and `window.scrollY` is 0
+- **THEN** the nav background SHALL be transparent
+
+#### Scenario: Nav becomes solid after scrolling
+- **WHEN** the user scrolls more than 20px down the page
+- **THEN** the nav background SHALL be `bg-midnight` (solid `#102022`)
+
+#### Scenario: Nav returns to transparent when scrolled back to top
+- **WHEN** the user scrolls back to within 20px of the top
+- **THEN** the nav background SHALL return to transparent
+
+### Requirement: Nav collapses to hamburger menu on mobile
+On viewports below `md` breakpoint (768px), the three nav links, language switcher, and Connect CTA SHALL be hidden. A hamburger button SHALL be shown. Clicking the hamburger SHALL reveal a full-width slide-in mobile menu containing all nav links, the language switcher, and the Connect CTA.
+
+#### Scenario: Desktop nav links are hidden on mobile
+- **WHEN** viewport width is below 768px
+- **THEN** the desktop nav links SHALL have `class` including `hidden` (or equivalent responsive class)
+
+#### Scenario: Hamburger button opens mobile menu
+- **WHEN** the hamburger button is clicked
+- **THEN** the mobile menu panel SHALL become visible and `aria-expanded="true"` SHALL be set on the button
+
+#### Scenario: Hamburger button closes mobile menu
+- **WHEN** the mobile menu is open and the hamburger button is clicked again
+- **THEN** the mobile menu SHALL close and `aria-expanded="false"` SHALL be set on the button
+
+#### Scenario: Mobile menu contains all nav items
+- **WHEN** the mobile menu is open
+- **THEN** it SHALL contain all three page links, the language switcher, and the Connect CTA