[EPIC] KITT KI-Platform – Build Production Frontend from Prototype using Agentic AI

### Description

## 🎯 Objective

Transform the attached KITT KI-Platform HTML prototype into a
production-ready frontend, using an Agentic AI development approach
to accelerate delivery, reduce manual effort and maintain consistency
across the codebase.

---

## 📎 Prototype Reference

A fully functional HTML prototype is attached to this Epic.

**Before writing a single line of code — open it.**

The prototype covers:
- Full 7-section landing page (conversion-optimised order)
- 4 interactive sub-pages accessible via top navigation
- Norwegian copy throughout
- Component patterns: cards, tables, accordions, tabs, alerts,
badges, step flows
- Responsive layout
- Digdir Designsystemet-inspired design tokens

> The prototype is the source of truth for layout, copy,
> UX flow and component structure. Do not redesign —
> translate it faithfully into production code.

---

## 🏗️ Scope

### Landing Page — 7 sections
- §1 Hero – value proposition + quick resource navigation
- §2 Problem / Value – 4 BOD pain points
- §3 Features – 4 KITT resources with navigation to sub-pages
- §4 Benefits – lifecycle visualisation + outcomes
- §5 FAQ – accordion with 6 objection-handling entries
- §6 CTA – three contextual call-to-action options
- §7 Footer – links, brand info, Designsystemet credit

### Sub-pages (via top navigation)
- 📋 Rutine for ansvarlig KI-bruk
- 🔐 Lisenser og abonnementer (with tabbed table)
- ✅ Egenvurdering for KI-initiativ (5-step process)
- 🛠 Metodikk og Playbook (3-phase cards + resources)

### Design system
- Implement using Digdir Designsystemet components
- Reference: https://designsystemet.no/en/components
- Design tokens from the prototype CSS variables are the baseline

---

## ✅ Acceptance Criteria

- [ ] All 7 landing page sections implemented and match prototype
- [ ] All 4 sub-pages accessible and functional via top nav
- [ ] Navigation state (active pill, back button, breadcrumb) works correctly
- [ ] All copy is in Norwegian and matches prototype content
- [ ] Responsive on mobile, tablet and desktop
- [ ] Meets WCAG 2.1 AA accessibility standards
- [ ] Uses Designsystemet component library
- [ ] No scroll on the main view — sub-pages are panel-switched
- [ ] Performance score ≥ 90 on Lighthouse
- [ ] All interactive elements (tabs, accordions, FAQ, CTAs) functional

---

## 📐 Technical Decisions (open for team input)

| Decision | Suggestion | Status |
|---|---|---|
| Framework | React or Next.js | 🔵 To be decided |
| Component library | @digdir/designsystemet-react | 🔵 To be decided |
| Routing | Next.js App Router or React Router | 🔵 To be decided |
| Styling | CSS Modules + Designsystemet tokens | 🔵 To be decided |
| Hosting | Digdir internal infra / Vercel | 🔵 To be decided |
| Auth | Internal SSO (if needed) | 🔵 To be decided |

---

## 🔗 Related Issues (to be created)

- [ ] #1 – Setup project scaffolding and Designsystemet integration
- [ ] #2 – Build top navigation component with view routing
- [ ] #3 – Build Hero section (§1)
- [ ] #4 – Build Problem / Value section (§2)
- [ ] #5 – Build Features section (§3)
- [ ] #6 – Build Benefits / Lifecycle section (§4)
- [ ] #7 – Build FAQ accordion section (§5)
- [ ] #8 – Build CTA section (§6) and Footer (§7)
- [ ] #9 – Build sub-page: Rutine for KI-bruk
- [ ] #10 – Build sub-page: Lisenser og abonnementer
- [ ] #11 – Build sub-page: Egenvurdering
- [ ] #12 – Build sub-page: Metodikk og Playbook
- [ ] #13 – Accessibility audit and fixes
- [ ] #14 – Responsive QA across breakpoints
- [ ] #15 – Lighthouse performance audit

---

## 🤖 Agentic AI Development Approach

See full recommendation below ↓

[kitt-platform-v2.html](https://github.com/user-attachments/files/25411734/kitt-platform-v2.html)

### In scope

[kitt-platform-v2.html](https://github.com/user-attachments/files/25411746/kitt-platform-v2.html)

### Out of scope

_No response_

### Additional Information

_No response_

### Tasks

_No response_