Read CLAUDE_CODE_BUNDLE.md fully before doing anything else.

Extract and create each file exactly as defined in the bundle:
- README.md, Design.md, Agent.md
- content/department.ts
- content/sections.ts
- content/kpis.ts
- content/governance.ts
- content/operating-model.ts
- content/roadmap.ts
- content/risks.ts

Once all files are written, confirm the file tree, then begin Phase 1 of the build sequence from Agent.md.


## plugin:context7:context7
Use this server to fetch current documentation whenever the user asks about a library, framework, SDK, API, CLI tool, or cloud service -- even well-known ones like React, Next.js, Prisma, Express, Tailwind, Django, or Spring Boot. This includes API syntax, configuration, version migration, library-specific debugging, setup instructions, and CLI tool usage. Use even when you think you know the answer -- your training data may not reflect recent changes. Prefer this over web search for library docs.

Do not use for: refactoring, writing scripts from scratch, debugging business logic, code review, or general programming concepts.


Error: File content (15822 tokens) exceeds maximum allowed tokens (10000). Use offset and limit parameters to read specific portions of the file, or search for specific content instead of reading the whole file.


1	# DEWA AI Adoption Department — Claude Code Project Bundle
2	> Copy each file section below into its exact path inside your Claude Code project.
3
4	---
5
6	# FILE: README.md
7
8	```markdown
9	# DEWA AI Adoption Department — Executive UI
10
11	A premium, executive-level strategic dashboard presenting the full operating
12	model of the DEWA AI Adoption Department to leadership, department heads,
13	and internal teams.
14
15	---
16
17	## Project Purpose
18
19	This is not a generic org chart.
20	This is a digital operating model — an executive command center that makes
21	the AI Adoption Department's strategy, structure, responsibilities, KPIs,
22	governance, and roadmap immediately clear to any leadership audience.
23
24	---
25
26	## Tech Stack
27
28	| Layer        | Choice                          |
29	|---|---|
30	| Framework    | Next.js 14 (App Router)         |
31	| Language     | TypeScript (strict mode)        |
32	| Styling      | Tailwind CSS + CSS variables    |
33	| Components   | shadcn/ui (New York style)      |
34	| Animation    | Framer Motion                   |
35	| Charts       | Recharts                        |
36	| Icons        | Lucide React                    |
37	| Data         | Local TypeScript content files  |
38
39	---
40
41	## Folder Structure
42
43	```
44	dewa-ai-adoption/
45	├── README.md
46	├── Design.md
47	├── Agent.md
48	├── package.json
49	├── tsconfig.json
50	├── tailwind.config.ts
51	├── next.config.ts
52	│
53	├── public/
54	│   └── dewa-logo.svg
55	│
56	├── content/                        ← All editable content lives here
57	│   ├── department.ts
58	│   ├── sections.ts
59	│   ├── kpis.ts
60	│   ├── governance.ts
61	│   ├── operating-model.ts
62	│   ├── roadmap.ts
63	│   └── risks.ts
64	│
65	├── src/
66	│   ├── app/
67	│   │   ├── layout.tsx
68	│   │   ├── page.tsx                ← Entry: overview screen
69	│   │   └── globals.css
70	│   │
71	│   ├── components/
72	│   │   ├── layout/
73	│   │   │   ├── SiteNav.tsx
74	│   │   │   ├── SideNav.tsx
75	│   │   │   └── SectionWrapper.tsx
76	│   │   │
77	│   │   ├── overview/
78	│   │   │   ├── HeroBanner.tsx
79	│   │   │   ├── MissionStatement.tsx
80	│   │   │   ├── ValuePillars.tsx
81	│   │   │   ├── KpiStrip.tsx
82	│   │   │   └── SectionQuickView.tsx
83	│   │   │
84	│   │   ├── structure/
85	│   │   │   ├── DepartmentMap.tsx
86	│   │   │   ├── SectionCard.tsx
87	│   │   │   └── ConnectionFlow.tsx
88	│   │   │
89	│   │   ├── responsibilities/
90	│   │   │   ├── ResponsibilityPanel.tsx
91	│   │   │   └── ResponsibilityRow.tsx
92	│   │   │
93	│   │   ├── kpis/
94	│   │   │   ├── KpiCockpit.tsx
95	│   │   │   ├── KpiCard.tsx
96	│   │   │   ├── KpiTrend.tsx
97	│   │   │   └── KpiTargetBar.tsx
98	│   │   │
99	│   │   ├── governance/
100	│   │   │   ├── GovernanceMap.tsx
101	│   │   │   ├── PrincipleCard.tsx
102	│   │   │   └── DecisionLayer.tsx
103	│   │   │
104	│   │   ├── operating-model/
105	│   │   │   ├── OperatingFlow.tsx
106	│   │   │   ├── FlowStage.tsx
107	│   │   │   └── SectionSwimlane.tsx
108	│   │   │
109	│   │   ├── roadmap/
110	│   │   │   ├── RoadmapView.tsx
111	│   │   │   └── RoadmapPhase.tsx
112	│   │   │
113	│   │   ├── risks/
114	│   │   │   ├── RiskRegister.tsx
115	│   │   │   └── RiskCard.tsx
116	│   │   │
117	│   │   ├── impact/
118	│   │   │   └── StrategicImpact.tsx
119	│   │   │
120	│   │   └── ui/                     ← shadcn/ui primitives (auto-generated)
121	│   │
122	│   ├── hooks/
123	│   │   └── useActiveSection.ts
124	│   │
125	│   └── lib/
126	│       ├── utils.ts
127	│       └── tokens.ts               ← Design token constants
128	```
129
130	---
131
132	## Getting Started
133
134	```bash
135	# 1. Install dependencies
136	npm install
137
138	# 2. Run dev server
139	npm run dev
140
141	# 3. Open in browser
142	http://localhost:3000
143	```
144
145	---
146
147	## Content Editing
148
149	All department content is in `/content/*.ts`.
150	Edit those files to update any section without touching components.
151
152	---
153
154	## Key Constraints
155
156	- Desktop-first. Tablet fallback required. Mobile is secondary.
157	- No Lorem Ipsum anywhere. All placeholder text must be DEWA-context relevant.
158	- No startup/SaaS visual patterns.
159	- No emoji in headings or body copy.
160	- No generic gradient backgrounds.
161	- Every section must answer a specific leadership question (see Design.md).
162	```
163
164	---
165
166	# FILE: Design.md
167
168	```markdown
169	# Design System — DEWA AI Adoption Executive UI
170
171	This file is the single source of truth for all visual decisions.
172	Claude Code must follow this exactly and not deviate.
173
174	---
175
176	## Design Philosophy
177
178	This UI must feel like a McKinsey strategy deck brought to life digitally.
179	It is not a product dashboard. It is not a SaaS app. It is an executive
180	operating model — premium, authoritative, and instantly legible.
181
182	Every visual decision must reinforce three qualities:
183	1. **Strategic authority** — this department is serious
184	2. **Executive clarity** — leadership understands in under 2 minutes
185	3. **Enterprise maturity** — this is not a pilot project
186
187	---
188
189	## Colour Tokens
190
191	Define these in `tailwind.config.ts` and `globals.css` as CSS variables.
192
193	```css
194	/* Base */
195	--color-bg:               #070D1A;   /* Deep navy — page background */
196	--color-surface:          #0D1627;   /* Card and panel background */
197	--color-surface-raised:   #132035;   /* Elevated card, hover state */
198	--color-surface-border:   #1E3A5F;   /* Borders, dividers */
199
200	/* Brand */
201	--color-primary:          #0066FF;   /* Electric blue — primary actions */
202	--color-primary-dim:      #0044BB;   /* Pressed/active primary */
203	--color-accent:           #00C2FF;   /* Cyan — AI/innovation signals */
204	--color-gold:             #F0A500;   /* Soft gold — executive emphasis */
205	--color-gold-dim:         #C98800;   /* Secondary gold use */
206
207	/* Semantic */
208	--color-success:          #22C55E;   /* On-track indicators */
209	--color-warning:          #F59E0B;   /* At-risk indicators */
210	--color-danger:           #EF4444;   /* Critical risks */
211	--color-info:             #38BDF8;   /* Info, neutral signal */
212
213	/* Typography */
214	--color-text:             #EEF2FF;   /* Primary body text */
215	--color-text-secondary:   #8BAFD4;   /* Muted text, labels */
216	--color-text-dim:         #4A6B8A;   /* Disabled, placeholder */
217	```
218
219	### Colour Usage Rules
220
221	| Element                      | Token                        |
222	|---|---|
223	| Page background              | `--color-bg`                 |
224	| Cards / panels               | `--color-surface`            |
225	| Hovered / active cards       | `--color-surface-raised`     |
226	| All borders                  | `--color-surface-border`     |
227	| Primary CTAs                 | `--color-primary`            |
228	| AI / innovation signals      | `--color-accent`             |
229	| Executive KPI emphasis       | `--color-gold`               |
230	| Strategic pillar highlights  | gradient: primary → accent   |
231	| Section 1 (AI Adoption Office)    | `--color-primary`       |
232	| Section 2 (AI Acceleration)       | `--color-accent`        |
233	| Section 3 (AI Command Center)     | `--color-gold`          |
234
235	---
236
237	## Typography
238
239	Font: **Inter** (via next/font/google)
240
241	```css
242	/* Scale */
243	--text-xs:    11px;
244	--text-sm:    13px;
245	--text-base:  15px;
246	--text-md:    17px;
247	--text-lg:    20px;
248	--text-xl:    24px;
249	--text-2xl:   30px;
250	--text-3xl:   38px;
[result-id: r1]

# DEWA AI Adoption Department — Claude Code Project Bundle
> Copy each file section below into its exact path inside your Claude Code project.

---

# FILE: README.md

```markdown
# DEWA AI Adoption Department — Executive UI

A premium, executive-level strategic dashboard presenting the full operating
model of the DEWA AI Adoption Department to leadership, department heads,
and internal teams.

---

## Project Purpose

This is not a generic org chart.
This is a digital operating model — an executive command center that makes
the AI Adoption Department's strategy, structure, responsibilities, KPIs,
governance, and roadmap immediately clear to any leadership audience.

---

## Tech Stack

| Layer        | Choice                          |
|---|---|
| Framework    | Next.js 14 (App Router)         |
| Language     | TypeScript (strict mode)        |
| Styling      | Tailwind CSS + CSS variables    |
| Components   | shadcn/ui (New York style)      |
| Animation    | Framer Motion                   |
| Charts       | Recharts                        |
| Icons        | Lucide React                    |
| Data         | Local TypeScript content files  |

---

## Folder Structure

```
dewa-ai-adoption/
├── README.md
├── Design.md
├── Agent.md
├── package.json
├── tsconfig.json
├── tailwind.config.ts
├── next.config.ts
│
├── public/
│   └── dewa-logo.svg
│
├── content/                        ← All editable content lives here
│   ├── department.ts
│   ├── sections.ts
│   ├── kpis.ts
│   ├── governance.ts
│   ├── operating-model.ts
│   ├── roadmap.ts
│   └── risks.ts
│
├── src/
│   ├── app/
│   │   ├── layout.tsx
│   │   ├── page.tsx                ← Entry: overview screen
│   │   └── globals.css
│   │
│   ├── components/
│   │   ├── layout/
│   │   │   ├── SiteNav.tsx
│   │   │   ├── SideNav.tsx
│   │   │   └── SectionWrapper.tsx
│   │   │
│   │   ├── overview/
│   │   │   ├── HeroBanner.tsx
│   │   │   ├── MissionStatement.tsx
│   │   │   ├── ValuePillars.tsx
│   │   │   ├── KpiStrip.tsx
│   │   │   └── SectionQuickView.tsx
│   │   │
│   │   ├── structure/
│   │   │   ├── DepartmentMap.tsx
│   │   │   ├── SectionCard.tsx
│   │   │   └── ConnectionFlow.tsx
│   │   │
│   │   ├── responsibilities/
│   │   │   ├── ResponsibilityPanel.tsx
│   │   │   └── ResponsibilityRow.tsx
│   │   │
│   │   ├── kpis/
│   │   │   ├── KpiCockpit.tsx
│   │   │   ├── KpiCard.tsx
│   │   │   ├── KpiTrend.tsx
│   │   │   └── KpiTargetBar.tsx
│   │   │
│   │   ├── governance/
│   │   │   ├── GovernanceMap.tsx
│   │   │   ├── PrincipleCard.tsx
│   │   │   └── DecisionLayer.tsx
│   │   │
│   │   ├── operating-model/
│   │   │   ├── OperatingFlow.tsx
│   │   │   ├── FlowStage.tsx
│   │   │   └── SectionSwimlane.tsx
│   │   │
│   │   ├── roadmap/
│   │   │   ├── RoadmapView.tsx
│   │   │   └── RoadmapPhase.tsx
│   │   │
│   │   ├── risks/
│   │   │   ├── RiskRegister.tsx
│   │   │   └── RiskCard.tsx
│   │   │
│   │   ├── impact/
│   │   │   └── StrategicImpact.tsx
│   │   │
│   │   └── ui/                     ← shadcn/ui primitives (auto-generated)
│   │
│   ├── hooks/
│   │   └── useActiveSection.ts
│   │
│   └── lib/
│       ├── utils.ts
│       └── tokens.ts               ← Design token constants
```

---

## Getting Started

```bash
# 1. Install dependencies
npm install

# 2. Run dev server
npm run dev

# 3. Open in browser
http://localhost:3000
```

---

## Content Editing

All department content is in `/content/*.ts`.
Edit those files to update any section without touching components.

---

## Key Constraints

- Desktop-first. Tablet fallback required. Mobile is secondary.
- No Lorem Ipsum anywhere. All placeholder text must be DEWA-context relevant.
- No startup/SaaS visual patterns.
- No emoji in headings or body copy.
- No generic gradient backgrounds.
- Every section must answer a specific leadership question (see Design.md).
```

---

# FILE: Design.md

```markdown
# Design System — DEWA AI Adoption Executive UI

This file is the single source of truth for all visual decisions.
Claude Code must follow this exactly and not deviate.

---

## Design Philosophy

This UI must feel like a McKinsey strategy deck brought to life digitally.
It is not a product dashboard. It is not a SaaS app. It is an executive
operating model — premium, authoritative, and instantly legible.

Every visual decision must reinforce three qualities:
1. **Strategic authority** — this department is serious
2. **Executive clarity** — leadership understands in under 2 minutes
3. **Enterprise maturity** — this is not a pilot project

---

## Colour Tokens

Define these in `tailwind.config.ts` and `globals.css` as CSS variables.

```css
/* Base */
--color-bg:               #070D1A;   /* Deep navy — page background */
--color-surface:          #0D1627;   /* Card and panel background */
--color-surface-raised:   #132035;   /* Elevated card, hover state */
--color-surface-border:   #1E3A5F;   /* Borders, dividers */

/* Brand */
--color-primary:          #0066FF;   /* Electric blue — primary actions */
--color-primary-dim:      #0044BB;   /* Pressed/active primary */
--color-accent:           #00C2FF;   /* Cyan — AI/innovation signals */
--color-gold:             #F0A500;   /* Soft gold — executive emphasis */
--color-gold-dim:         #C98800;   /* Secondary gold use */

/* Semantic */
--color-success:          #22C55E;   /* On-track indicators */
--color-warning:          #F59E0B;   /* At-risk indicators */
--color-danger:           #EF4444;   /* Critical risks */
--color-info:             #38BDF8;   /* Info, neutral signal */

/* Typography */
--color-text:             #EEF2FF;   /* Primary body text */
--color-text-secondary:   #8BAFD4;   /* Muted text, labels */
--color-text-dim:         #4A6B8A;   /* Disabled, placeholder */
```

### Colour Usage Rules

| Element                      | Token                        |
|---|---|
| Page background              | `--color-bg`                 |
| Cards / panels               | `--color-surface`            |
| Hovered / active cards       | `--color-surface-raised`     |
| All borders                  | `--color-surface-border`     |
| Primary CTAs                 | `--color-primary`            |
| AI / innovation signals      | `--color-accent`             |
| Executive KPI emphasis       | `--color-gold`               |
| Strategic pillar highlights  | gradient: primary → accent   |
| Section 1 (AI Adoption Office)    | `--color-primary`       |
| Section 2 (AI Acceleration)       | `--color-accent`        |
| Section 3 (AI Command Center)     | `--color-gold`          |

---

## Typography

Font: **Inter** (via next/font/google)

```css
/* Scale */
--text-xs:    11px;
--text-sm:    13px;
--text-base:  15px;
--text-md:    17px;
--text-lg:    20px;
--text-xl:    24px;
--text-2xl:   30px;
--text-3xl:   38px;


250	--text-3xl:   38px;
251	--text-4xl:   48px;
252
253	/* Weight */
254	--weight-regular:  400;
255	--weight-medium:   500;
256	--weight-semibold: 600;
257	--weight-bold:     700;
258
259	/* Line height */
260	--leading-tight:   1.2;
261	--leading-normal:  1.5;
262	--leading-relaxed: 1.7;
263
264	/* Letter spacing */
265	--tracking-wide:    0.04em;  /* Labels, caps, kpis */
266	--tracking-widest:  0.1em;   /* Section eyebrows */
267	```
268
269	### Typography Hierarchy
270
271	| Role                   | Size     | Weight    | Color              | Transform   |
272	|---|---|---|---|---|
273	| Page hero headline     | 4xl      | bold      | text               | none        |
274	| Section headline       | 2xl      | semibold  | text               | none        |
275	| Card title             | lg       | semibold  | text               | none        |
276	| Eyebrow / label        | xs       | medium    | text-secondary     | uppercase   |
277	| Body copy              | base     | regular   | text-secondary     | none        |
278	| KPI number             | 3xl      | bold      | gold               | none        |
279	| KPI label              | xs       | medium    | text-dim           | uppercase   |
280	| Badge / tag text       | xs       | semibold  | varies             | uppercase   |
281
282	---
283
284	## Spacing
285
286	Base unit: `4px`
287
288	```
289	space-1  =  4px
290	space-2  =  8px
291	space-3  =  12px
292	space-4  =  16px
293	space-5  =  20px
294	space-6  =  24px
295	space-8  =  32px
296	space-10 =  40px
297	space-12 =  48px
298	space-16 =  64px
299	space-20 =  80px
300	space-24 =  96px
301	```
302
303	Section vertical padding: `space-20` top, `space-20` bottom.
304	Card internal padding: `space-6` all sides.
305	Grid gap between cards: `space-6`.
306
307	---
308
309	## Border Radius
310
311	```
312	--radius-sm:   4px    (tags, badges, small inputs)
313	--radius-md:   8px    (buttons, small cards)
314	--radius-lg:   12px   (standard cards)
315	--radius-xl:   16px   (hero cards, large panels)
316	--radius-full: 9999px (pills, avatars)
317	```
318
319	---
320
321	## Elevation / Shadow
322
323	```css
324	--shadow-card:   0 1px 3px rgba(0,0,0,0.4), 0 0 0 1px rgba(30,58,95,0.6);
325	--shadow-raised: 0 4px 16px rgba(0,0,0,0.5), 0 0 0 1px rgba(0,102,255,0.15);
326	--shadow-glow-blue: 0 0 24px rgba(0,102,255,0.2);
327	--shadow-glow-gold: 0 0 24px rgba(240,165,0,0.15);
328	```
329
330	Use `shadow-card` by default.
331	Use `shadow-raised` on hover.
332	Use `shadow-glow-blue` on primary action cards.
333	Use `shadow-glow-gold` on executive KPI highlight cards.
334
335	---
336
337	## Animation
338
339	Library: Framer Motion
340
341	```ts
342	// Standard page section reveal
343	const sectionReveal = {
344	  initial: { opacity: 0, y: 24 },
345	  animate: { opacity: 1, y: 0 },
346	  transition: { duration: 0.45, ease: [0.22, 1, 0.36, 1] }
347	};
348
349	// Card hover lift
350	const cardHover = {
351	  whileHover: { y: -3, transition: { duration: 0.2 } }
352	};
353
354	// Stagger children
355	const staggerContainer = {
356	  animate: { transition: { staggerChildren: 0.07 } }
357	};
358
359	// Number count-up for KPIs
360	// Use: react-countup or manual framer-motion useTransform
361	```
362
363	### Animation Rules
364
365	- Entrance: fade + translate Y only. Never scale on entrance.
366	- Duration: 350–500ms for sections. 150–200ms for micro-interactions.
367	- Easing: always use a custom ease curve, never `linear`.
368	- No looping animations on the main UI (no pulsing rings, no rotating elements).
369	- Subtle gradient shimmer on KPI cards is acceptable.
370	- Navigation transitions: cross-fade, 200ms.
371
372	---
373
374	## Layout
375
376	### Grid System
377
378	```
379	max-width:      1440px
380	content-width:  1200px
381	gutter:         24px
382	columns:        12
383	```
384
385	### Navigation
386
387	Sticky top navigation bar:
388	- Height: 64px
389	- Background: `--color-bg` with `backdrop-blur`
390	- Left: DEWA logo + department name
391	- Right: section anchor links (Overview, Structure, Responsibilities, KPIs, Governance, Operating Model, Roadmap, Risks, Impact)
392	- Active link: underline with `--color-primary`
393	- Mobile: collapses to hamburger menu
394
395	### Responsive Breakpoints
396
397	```
398	sm:  640px   — phones (secondary)
399	md:  768px   — tablets (required fallback)
400	lg:  1024px  — small laptop (primary)
401	xl:  1280px  — desktop (primary)
402	2xl: 1440px  — large display (primary)
403	```
404
405	Tablet (`md`): Two-column card grids become one column.
406	Mobile (`sm`): Navigation becomes bottom sheet. Cards full-width.
407
408	---
409
410	## Component Patterns
411
412	### Card
413
414	```tsx
415	// Standard card
416

421	```
422
423	### Section Eyebrow
424
425	```tsx
426	// Always appears above section headlines
427

428	  Section Label
429

430	```
431
432	### KPI Card
433
434	```tsx
435

436
KPI Label

437
87%

438
↑ 4.2% vs last quarter

439

440	```
441
442	### Status Badge
443
444	```tsx
445	// on-track | at-risk | critical | planned
446	const statusMap = {
447	  "on-track": "bg-success/10 text-success border-success/20",
448	  "at-risk":  "bg-warning/10 text-warning border-warning/20",
449	  "critical": "bg-danger/10 text-danger border-danger/20",
450	  "planned":  "bg-primary/10 text-primary border-primary/20",
451	};
452	<span className={`text-xs font-semibold uppercase tracking-wide px-2.5 py-1 rounded-full border ${statusMap[status]}`}>
453	  {label}
454
455	```
456
457	### Section Divider
458
459	```tsx
460

461	```
462
463	---
464
465	## What to Avoid
466
467	Never use:
468	- White or light backgrounds
469	- Rounded pill cards (use `rounded-xl`, not `rounded-full` for cards)
470	- Gradient text on body copy (only on hero headline)
471	- Neon glow effects on more than one element per section
472	- Generic SaaS illustration styles (no isometric people/rockets)
473	- More than 3 colours in any single card
474	- Horizontal scrolling anywhere
475	- Skeleton loaders with white shimmer (use dark shimmer)
476	- Emoji in any UI text
477
478	---
479
480	## Leadership Questions Each Section Must Answer
481
482	| Screen               | Question Answered                                  |
483	|---|---|
484	| Overview             | What is this department and why does it exist?     |
485	| Department Structure | How is it structured and how do the parts relate?  |
486	| Responsibilities     | Who owns what and what does each section deliver?  |
487	| KPI Framework        | How is success measured?                           |
488	| Governance           | How is AI adoption controlled and overseen?        |
489	| Operating Model      | How does the department work end-to-end?           |
490	| Roadmap              | What is happening now, next, and in the future?    |
491	| Risks                | What are the risks and how are they mitigated?     |
492	| Strategic Impact     | Why does this department matter to DEWA?           |
493	```
494
495	---
496
497	# FILE: Agent.md
498
499	```markdown
[result-id: r2]

--text-3xl:   38px;
--text-4xl:   48px;

/* Weight */
--weight-regular:  400;
--weight-medium:   500;
--weight-semibold: 600;
--weight-bold:     700;

/* Line height */
--leading-tight:   1.2;
--leading-normal:  1.5;
--leading-relaxed: 1.7;

/* Letter spacing */
--tracking-wide:    0.04em;  /* Labels, caps, kpis */
--tracking-widest:  0.1em;   /* Section eyebrows */
```

### Typography Hierarchy

| Role                   | Size     | Weight    | Color              | Transform   |
|---|---|---|---|---|
| Page hero headline     | 4xl      | bold      | text               | none        |
| Section headline       | 2xl      | semibold  | text               | none        |
| Card title             | lg       | semibold  | text               | none        |
| Eyebrow / label        | xs       | medium    | text-secondary     | uppercase   |
| Body copy              | base     | regular   | text-secondary     | none        |
| KPI number             | 3xl      | bold      | gold               | none        |
| KPI label              | xs       | medium    | text-dim           | uppercase   |
| Badge / tag text       | xs       | semibold  | varies             | uppercase   |

---

## Spacing

Base unit: `4px`

```
space-1  =  4px
space-2  =  8px
space-3  =  12px
space-4  =  16px
space-5  =  20px
space-6  =  24px
space-8  =  32px
space-10 =  40px
space-12 =  48px
space-16 =  64px
space-20 =  80px
space-24 =  96px
```

Section vertical padding: `space-20` top, `space-20` bottom.
Card internal padding: `space-6` all sides.
Grid gap between cards: `space-6`.

---

## Border Radius

```
--radius-sm:   4px    (tags, badges, small inputs)
--radius-md:   8px    (buttons, small cards)
--radius-lg:   12px   (standard cards)
--radius-xl:   16px   (hero cards, large panels)
--radius-full: 9999px (pills, avatars)
```

---

## Elevation / Shadow

```css
--shadow-card:   0 1px 3px rgba(0,0,0,0.4), 0 0 0 1px rgba(30,58,95,0.6);
--shadow-raised: 0 4px 16px rgba(0,0,0,0.5), 0 0 0 1px rgba(0,102,255,0.15);
--shadow-glow-blue: 0 0 24px rgba(0,102,255,0.2);
--shadow-glow-gold: 0 0 24px rgba(240,165,0,0.15);
```

Use `shadow-card` by default.
Use `shadow-raised` on hover.
Use `shadow-glow-blue` on primary action cards.
Use `shadow-glow-gold` on executive KPI highlight cards.

---

## Animation

Library: Framer Motion

```ts
// Standard page section reveal
const sectionReveal = {
  initial: { opacity: 0, y: 24 },
  animate: { opacity: 1, y: 0 },
  transition: { duration: 0.45, ease: [0.22, 1, 0.36, 1] }
};

// Card hover lift
const cardHover = {
  whileHover: { y: -3, transition: { duration: 0.2 } }
};

// Stagger children
const staggerContainer = {
  animate: { transition: { staggerChildren: 0.07 } }
};

// Number count-up for KPIs
// Use: react-countup or manual framer-motion useTransform
```

### Animation Rules

- Entrance: fade + translate Y only. Never scale on entrance.
- Duration: 350–500ms for sections. 150–200ms for micro-interactions.
- Easing: always use a custom ease curve, never `linear`.
- No looping animations on the main UI (no pulsing rings, no rotating elements).
- Subtle gradient shimmer on KPI cards is acceptable.
- Navigation transitions: cross-fade, 200ms.

---

## Layout

### Grid System

```
max-width:      1440px
content-width:  1200px
gutter:         24px
columns:        12
```

### Navigation

Sticky top navigation bar:
- Height: 64px
- Background: `--color-bg` with `backdrop-blur`
- Left: DEWA logo + department name
- Right: section anchor links (Overview, Structure, Responsibilities, KPIs, Governance, Operating Model, Roadmap, Risks, Impact)
- Active link: underline with `--color-primary`
- Mobile: collapses to hamburger menu

### Responsive Breakpoints

```
sm:  640px   — phones (secondary)
md:  768px   — tablets (required fallback)
lg:  1024px  — small laptop (primary)
xl:  1280px  — desktop (primary)
2xl: 1440px  — large display (primary)
```

Tablet (`md`): Two-column card grids become one column.
Mobile (`sm`): Navigation becomes bottom sheet. Cards full-width.

---

## Component Patterns

### Card

```tsx
// Standard card

```

### Section Eyebrow

```tsx
// Always appears above section headlines

  Section Label

```

### KPI Card

```tsx

KPI Label

87%

↑ 4.2% vs last quarter

```

### Status Badge

```tsx
// on-track | at-risk | critical | planned
const statusMap = {
  "on-track": "bg-success/10 text-success border-success/20",
  "at-risk":  "bg-warning/10 text-warning border-warning/20",
  "critical": "bg-danger/10 text-danger border-danger/20",
  "planned":  "bg-primary/10 text-primary border-primary/20",
};
<span className={`text-xs font-semibold uppercase tracking-wide px-2.5 py-1 rounded-full border ${statusMap[status]}`}>
  {label}

```

### Section Divider

```tsx

```

---

## What to Avoid

Never use:
- White or light backgrounds
- Rounded pill cards (use `rounded-xl`, not `rounded-full` for cards)
- Gradient text on body copy (only on hero headline)
- Neon glow effects on more than one element per section
- Generic SaaS illustration styles (no isometric people/rockets)
- More than 3 colours in any single card
- Horizontal scrolling anywhere
- Skeleton loaders with white shimmer (use dark shimmer)
- Emoji in any UI text

---

## Leadership Questions Each Section Must Answer

| Screen               | Question Answered                                  |
|---|---|
| Overview             | What is this department and why does it exist?     |
| Department Structure | How is it structured and how do the parts relate?  |
| Responsibilities     | Who owns what and what does each section deliver?  |
| KPI Framework        | How is success measured?                           |
| Governance           | How is AI adoption controlled and overseen?        |
| Operating Model      | How does the department work end-to-end?           |
| Roadmap              | What is happening now, next, and in the future?    |
| Risks                | What are the risks and how are they mitigated?     |
| Strategic Impact     | Why does this department matter to DEWA?           |
```

---

# FILE: Agent.md

```markdown


500	# Agent Instructions — DEWA AI Adoption Executive UI
501	> Read this file before writing any code.
502	> This file defines how Claude Code should behave as a build agent on this project.
503
504	---
505
506	## Agent Role
507
508	You are a senior full-stack engineer and UI/UX specialist building a premium
509	executive web experience for the DEWA AI Adoption Department.
510
511	You are not building a generic dashboard template.
512	You are building a strategic command center for leadership audiences.
513
514	---
515
516	## Core Mandate
517
518	1. Follow `Design.md` exactly for all visual decisions. Do not invent new colours, fonts, or patterns.
519	2. All department content comes from `/content/*.ts`. Never hardcode content strings inside components.
520	3. Every component must be typed with TypeScript. No `any`.
521	4. Every section must be independently navigable via the sticky nav.
522	5. The UI must tell a clear strategic story from top to bottom.
523
524	---
525
526	## Build Sequence
527
528	Follow this exact order. Do not skip ahead.
529
530	### Phase 1 — Foundation
531	- [ ] Init Next.js 14 App Router project with TypeScript
532	- [ ] Configure Tailwind with all tokens from Design.md
533	- [ ] Install and configure shadcn/ui (New York style, dark mode)
534	- [ ] Install framer-motion, recharts, lucide-react
535	- [ ] Create `/content/` folder and all data files
536	- [ ] Build root layout with sticky SiteNav
537	- [ ] Implement smooth anchor scroll behaviour
538
539	### Phase 2 — Sections (build in this order)
540	- [ ] Section 0: HeroBanner + MissionStatement + ValuePillars
541	- [ ] Section 1: KpiStrip (top-level metrics)
542	- [ ] Section 2: Department Structure (DepartmentMap + SectionCards)
543	- [ ] Section 3: Responsibilities (expandable panels per section)
544	- [ ] Section 4: KPI Cockpit (section-level KPIs with trends)
545	- [ ] Section 5: Governance (principles + decision layers)
546	- [ ] Section 6: Operating Model (flow + swimlane)
547	- [ ] Section 7: Roadmap (Now / Next / Future)
548	- [ ] Section 8: Risks & Dependencies
549	- [ ] Section 9: Strategic Impact Summary
550
551	### Phase 3 — Polish
552	- [ ] Add Framer Motion entrance animations to all sections
553	- [ ] Add hover states to all cards
554	- [ ] Verify responsive layout at md and sm breakpoints
555	- [ ] Add count-up animation to all KPI numbers
556	- [ ] Final typography and spacing pass
557	- [ ] Lighthouse performance check (target: >90)
558
559	---
560
561	## Component Rules
562
563	### Naming
564	- Components: PascalCase (`KpiCard.tsx`)
565	- Hooks: camelCase with `use` prefix (`useActiveSection.ts`)
566	- Content files: kebab-case (`operating-model.ts`)
567	- CSS classes: Tailwind only. No inline styles. No CSS modules.
568
569	### Structure
570	Every component file must follow this order:
571	1. Imports
572	2. TypeScript interface(s)
573	3. Component function
574	4. Export default
575
576	### Props
577	- All props must have explicit TypeScript interfaces
578	- Use `interface`, not `type` for component props
579	- Optional props must have `?` and sensible defaults
580
581	### Content
582	- Never write content strings inside JSX
583	- Always import from `/content/`
584	- Example:
585	  ```ts
586	  // ✅ correct
587	  import { department } from '@/content/department'
588	  // ❌ wrong
589	  <p>AI Adoption is a strategic enabler...</p>
590	  ```
591
592	---
593
594	## Data Handling
595
596	All content files export typed objects and arrays.
597	No API calls. No environment variables needed for content.
598	The app is fully static and self-contained.
599
600	```ts
601	// Example pattern for all content files
602	export interface SectionDefinition {
603	  id: string
604	  name: string
605	  color: string
606	  purpose: string
607	  responsibilities: string[]
608	  deliverables: string[]
609	  kpis: string[]
610	}
611
612	export const sections: SectionDefinition[] = [ ... ]
613	```
614
615	---
616
617	## Quality Gates
618
619	Before marking any section complete, verify:
620
621	- [ ] No content strings hardcoded in JSX
622	- [ ] No TypeScript errors or `any` types
623	- [ ] Component matches Design.md colour tokens exactly
624	- [ ] Card hover state implemented
625	- [ ] Section entrance animation implemented
626	- [ ] Section is reachable via sticky nav link
627	- [ ] Layout does not break at 768px width
628	- [ ] No horizontal overflow
629
630	---
631
632	## What NOT to Do
633
634	- Do not use white or light mode at any point
635	- Do not install libraries not listed in README.md without flagging it
636	- Do not use `console.log` in production components
637	- Do not create `pages/` directory (this is App Router)
638	- Do not put content in component files
639	- Do not use `style={{}}` inline styles
640	- Do not use generic placeholder text (no Lorem Ipsum, no "Coming soon")
641	- Do not add loading spinners (use skeleton loaders with dark shimmer)
642	- Do not use horizontal scroll carousels on desktop
643	- Do not add social media links, footer links, or unrelated content
644	- Do not add a light/dark mode toggle (dark only)
645
646	---
647
648	## Prompt Patterns for This Project
649
650	When the user asks you to build or improve a section, follow this pattern:
651
652	1. Re-read the relevant section in the spec
653	2. Check the content file for that section
654	3. Build the component consuming content from the file
655	4. Apply Design.md tokens exactly
656	5. Add Framer Motion entrance animation
657	6. Confirm the section answers its leadership question (see Design.md)
658
659	---
660
661	## Escalation
662
663	If you encounter a decision not covered by this file or Design.md, stop and ask before proceeding. Do not make visual or structural assumptions on executive-facing screens.
664	```
665
666	---
667
668	# FILE: content/department.ts
669
670	```typescript
671	export interface DepartmentOverview {
672	  name: string
673	  tagline: string
674	  mission: string
675	  mandate: string
676	  strategicContext: string
677	  alhashbahNote: string
678	  valuePillars: ValuePillar[]
679	  topMetrics: TopMetric[]
680	}
681
682	export interface ValuePillar {
683	  id: string
684	  title: string
685	  description: string
686	  icon: string
687	}
688
689	export interface TopMetric {
690	  id: string
691	  label: string
692	  value: string
693	  unit: string
694	  trend: string
695	  trendDirection: 'up' | 'down' | 'neutral'
696	  emphasis: boolean
697	}
698
699	export const department: DepartmentOverview = {
700	  name: 'AI Adoption Department',
701	  tagline: 'Enterprise AI. Measurable Value. Strategic Scale.',
702	  mission:
703	    'Accelerate safe, measurable, enterprise-wide AI adoption across DEWA — improving efficiency, reducing cost, enhancing processes, strengthening governance, and enabling sustainable business value.',
704	  mandate:
705	    'The AI Adoption Department is the central function responsible for orchestrating AI adoption strategy, capability building, partner engagement, performance visibility, and governance alignment across all DEWA divisions.',
706	  strategicContext:
707	    'As DEWA advances its digital transformation agenda, the AI Adoption Department serves as the operational backbone that converts AI capability into measurable enterprise outcomes — connecting technology, people, and strategy into a unified adoption engine.',
708	  alhashbahNote:
709	    'The department directly supports DEWA\'s AlHasbah cost reduction direction by identifying and scaling AI use cases that reduce operational cost, eliminate process waste, and improve productivity across business functions.',
710	  valuePillars: [
711	    {
712	      id: 'cost-reduction',
713	      title: 'Cost Reduction',
714	      description:
715	        'Identify, accelerate, and scale AI use cases that reduce operational expenditure and process inefficiency across DEWA.',
716	      icon: 'TrendingDown',
717	    },
718	    {
719	      id: 'productivity',
720	      title: 'Productivity & Efficiency',
721	      description:
722	        'Enable employees to work faster, smarter, and more effectively through targeted AI adoption and capability building.',
723	      icon: 'Zap',
724	    },
725	    {
726	      id: 'enterprise-enablement',
727	      title: 'Enterprise AI Enablement',
728	      description:
729	        'Build the governance frameworks, partnerships, infrastructure, and skills that allow DEWA to scale AI safely and sustainably.',
730	      icon: 'Building2',
731	    },
732	  ],
733	  topMetrics: [
734	    {
735	      id: 'adoption-rate',
736	      label: 'Enterprise Adoption Rate',
737	      value: '68',
738	      unit: '%',
739	      trend: '+12% vs last quarter',
740	      trendDirection: 'up',
741	      emphasis: true,
742	    },
743	    {
744	      id: 'active-users',
745	      label: 'Active AI Users',
746	      value: '3,240',
747	      unit: '',
748	      trend: '+480 this month',
749	      trendDirection: 'up',
[result-id: r3]

# Agent Instructions — DEWA AI Adoption Executive UI
> Read this file before writing any code.
> This file defines how Claude Code should behave as a build agent on this project.

---

## Agent Role

You are a senior full-stack engineer and UI/UX specialist building a premium
executive web experience for the DEWA AI Adoption Department.

You are not building a generic dashboard template.
You are building a strategic command center for leadership audiences.

---

## Core Mandate

1. Follow `Design.md` exactly for all visual decisions. Do not invent new colours, fonts, or patterns.
2. All department content comes from `/content/*.ts`. Never hardcode content strings inside components.
3. Every component must be typed with TypeScript. No `any`.
4. Every section must be independently navigable via the sticky nav.
5. The UI must tell a clear strategic story from top to bottom.

---

## Build Sequence

Follow this exact order. Do not skip ahead.

### Phase 1 — Foundation
- [ ] Init Next.js 14 App Router project with TypeScript
- [ ] Configure Tailwind with all tokens from Design.md
- [ ] Install and configure shadcn/ui (New York style, dark mode)
- [ ] Install framer-motion, recharts, lucide-react
- [ ] Create `/content/` folder and all data files
- [ ] Build root layout with sticky SiteNav
- [ ] Implement smooth anchor scroll behaviour

### Phase 2 — Sections (build in this order)
- [ ] Section 0: HeroBanner + MissionStatement + ValuePillars
- [ ] Section 1: KpiStrip (top-level metrics)
- [ ] Section 2: Department Structure (DepartmentMap + SectionCards)
- [ ] Section 3: Responsibilities (expandable panels per section)
- [ ] Section 4: KPI Cockpit (section-level KPIs with trends)
- [ ] Section 5: Governance (principles + decision layers)
- [ ] Section 6: Operating Model (flow + swimlane)
- [ ] Section 7: Roadmap (Now / Next / Future)
- [ ] Section 8: Risks & Dependencies
- [ ] Section 9: Strategic Impact Summary

### Phase 3 — Polish
- [ ] Add Framer Motion entrance animations to all sections
- [ ] Add hover states to all cards
- [ ] Verify responsive layout at md and sm breakpoints
- [ ] Add count-up animation to all KPI numbers
- [ ] Final typography and spacing pass
- [ ] Lighthouse performance check (target: >90)

---

## Component Rules

### Naming
- Components: PascalCase (`KpiCard.tsx`)
- Hooks: camelCase with `use` prefix (`useActiveSection.ts`)
- Content files: kebab-case (`operating-model.ts`)
- CSS classes: Tailwind only. No inline styles. No CSS modules.

### Structure
Every component file must follow this order:
1. Imports
2. TypeScript interface(s)
3. Component function
4. Export default

### Props
- All props must have explicit TypeScript interfaces
- Use `interface`, not `type` for component props
- Optional props must have `?` and sensible defaults

### Content
- Never write content strings inside JSX
- Always import from `/content/`
- Example:
  ```ts
  // ✅ correct
  import { department } from '@/content/department'
  // ❌ wrong
  <p>AI Adoption is a strategic enabler...</p>
  ```

---

## Data Handling

All content files export typed objects and arrays.
No API calls. No environment variables needed for content.
The app is fully static and self-contained.

```ts
// Example pattern for all content files
export interface SectionDefinition {
  id: string
  name: string
  color: string
  purpose: string
  responsibilities: string[]
  deliverables: string[]
  kpis: string[]
}

export const sections: SectionDefinition[] = [ ... ]
```

---

## Quality Gates

Before marking any section complete, verify:

- [ ] No content strings hardcoded in JSX
- [ ] No TypeScript errors or `any` types
- [ ] Component matches Design.md colour tokens exactly
- [ ] Card hover state implemented
- [ ] Section entrance animation implemented
- [ ] Section is reachable via sticky nav link
- [ ] Layout does not break at 768px width
- [ ] No horizontal overflow

---

## What NOT to Do

- Do not use white or light mode at any point
- Do not install libraries not listed in README.md without flagging it
- Do not use `console.log` in production components
- Do not create `pages/` directory (this is App Router)
- Do not put content in component files
- Do not use `style={{}}` inline styles
- Do not use generic placeholder text (no Lorem Ipsum, no "Coming soon")
- Do not add loading spinners (use skeleton loaders with dark shimmer)
- Do not use horizontal scroll carousels on desktop
- Do not add social media links, footer links, or unrelated content
- Do not add a light/dark mode toggle (dark only)

---

## Prompt Patterns for This Project

When the user asks you to build or improve a section, follow this pattern:

1. Re-read the relevant section in the spec
2. Check the content file for that section
3. Build the component consuming content from the file
4. Apply Design.md tokens exactly
5. Add Framer Motion entrance animation
6. Confirm the section answers its leadership question (see Design.md)

---

## Escalation

If you encounter a decision not covered by this file or Design.md, stop and ask before proceeding. Do not make visual or structural assumptions on executive-facing screens.
```

---

# FILE: content/department.ts

```typescript
export interface DepartmentOverview {
  name: string
  tagline: string
  mission: string
  mandate: string
  strategicContext: string
  alhashbahNote: string
  valuePillars: ValuePillar[]
  topMetrics: TopMetric[]
}

export interface ValuePillar {
  id: string
  title: string
  description: string
  icon: string
}

export interface TopMetric {
  id: string
  label: string
  value: string
  unit: string
  trend: string
  trendDirection: 'up' | 'down' | 'neutral'
  emphasis: boolean
}

export const department: DepartmentOverview = {
  name: 'AI Adoption Department',
  tagline: 'Enterprise AI. Measurable Value. Strategic Scale.',
  mission:
    'Accelerate safe, measurable, enterprise-wide AI adoption across DEWA — improving efficiency, reducing cost, enhancing processes, strengthening governance, and enabling sustainable business value.',
  mandate:
    'The AI Adoption Department is the central function responsible for orchestrating AI adoption strategy, capability building, partner engagement, performance visibility, and governance alignment across all DEWA divisions.',
  strategicContext:
    'As DEWA advances its digital transformation agenda, the AI Adoption Department serves as the operational backbone that converts AI capability into measurable enterprise outcomes — connecting technology, people, and strategy into a unified adoption engine.',
  alhashbahNote:
    'The department directly supports DEWA\'s AlHasbah cost reduction direction by identifying and scaling AI use cases that reduce operational cost, eliminate process waste, and improve productivity across business functions.',
  valuePillars: [
    {
      id: 'cost-reduction',
      title: 'Cost Reduction',
      description:
        'Identify, accelerate, and scale AI use cases that reduce operational expenditure and process inefficiency across DEWA.',
      icon: 'TrendingDown',
    },
    {
      id: 'productivity',
      title: 'Productivity & Efficiency',
      description:
        'Enable employees to work faster, smarter, and more effectively through targeted AI adoption and capability building.',
      icon: 'Zap',
    },
    {
      id: 'enterprise-enablement',
      title: 'Enterprise AI Enablement',
      description:
        'Build the governance frameworks, partnerships, infrastructure, and skills that allow DEWA to scale AI safely and sustainably.',
      icon: 'Building2',
    },
  ],
  topMetrics: [
    {
      id: 'adoption-rate',
      label: 'Enterprise Adoption Rate',
      value: '68',
      unit: '%',
      trend: '+12% vs last quarter',
      trendDirection: 'up',
      emphasis: true,
    },
    {
      id: 'active-users',
      label: 'Active AI Users',
      value: '3,240',
      unit: '',
      trend: '+480 this month',
      trendDirection: 'up',


750	      emphasis: false,
751	    },
752	    {
753	      id: 'hours-saved',
754	      label: 'Estimated Hours Saved',
755	      value: '18,600',
756	      unit: 'hrs',
757	      trend: 'This quarter',
758	      trendDirection: 'up',
759	      emphasis: true,
760	    },
761	    {
762	      id: 'use-cases',
763	      label: 'Active Use Cases',
764	      value: '42',
765	      unit: '',
766	      trend: '14 scaled enterprise-wide',
767	      trendDirection: 'up',
768	      emphasis: false,
769	    },
770	    {
771	      id: 'champions',
772	      label: 'AI Champions',
773	      value: '86',
774	      unit: '',
775	      trend: 'Across 12 divisions',
776	      trendDirection: 'neutral',
777	      emphasis: false,
778	    },
779	    {
780	      id: 'programs',
781	      label: 'Training Programs',
782	      value: '9',
783	      unit: '',
784	      trend: '1,200+ enrolled',
785	      trendDirection: 'up',
786	      emphasis: false,
787	    },
788	  ],
789	}
790	```
791
792	---
793
794	# FILE: content/sections.ts
795
796	```typescript
797	export interface SectionDefinition {
798	  id: string
799	  order: number
800	  name: string
801	  shortName: string
802	  colorToken: string
803	  accentGradient: string
804	  tagline: string
805	  purpose: string
806	  mandate: string
807	  responsibilities: string[]
808	  coreActivities: string[]
809	  keyDeliverables: string[]
810	  stakeholders: string[]
811	  collaborationPoints: string[]
812	  successMeasures: string[]
813	}
814
815	export const sections: SectionDefinition[] = [
816	  {
817	    id: 'adoption-office',
818	    order: 1,
819	    name: 'AI Adoption Office',
820	    shortName: 'Adoption Office',
821	    colorToken: '#0066FF',
822	    accentGradient: 'from-primary to-primary-dim',
823	    tagline: 'Strategy. Governance. Alignment.',
824	    purpose:
825	      'Serve as the strategic backbone of the department — ensuring the operating model is coherent, governance is active, stakeholders are aligned, and performance is visible.',
826	    mandate:
827	      'The AI Adoption Office owns the department\'s strategic direction, governance coordination, adoption reporting, and cross-divisional engagement. It is the function that ensures AI adoption across DEWA is structured, measured, and aligned to enterprise priorities.',
828	    responsibilities: [
829	      'Define and maintain the AI Adoption operating model',
830	      'Align department priorities with DEWA strategic objectives and AlHasbah direction',
831	      'Coordinate governance and oversight mechanisms across AI adoption activities',
832	      'Manage adoption reporting cadence and performance visibility',
833	      'Orchestrate the AI Champions and AI Ambassadors network across divisions',
834	      'Engage divisional leadership and key stakeholders',
835	      'Oversee KPI tracking and business value communication',
836	      'Manage cross-divisional alignment and dependency resolution',
837	    ],
838	    coreActivities: [
839	      'Monthly performance reviews and reporting',
840	      'Quarterly operating model review',
841	      'AI Champions network management and activation',
842	      'Stakeholder briefings and leadership engagement',
843	      'Governance forum coordination',
844	      'Adoption strategy updates',
845	    ],
846	    keyDeliverables: [
847	      'AI Adoption Operating Model (living document)',
848	      'Monthly Adoption Performance Report',
849	      'Governance and Oversight Framework',
850	      'AI Champions Program Framework',
851	      'Stakeholder Engagement Calendar',
852	      'Cross-divisional Alignment Register',
853	    ],
854	    stakeholders: [
855	      'CAIO / EVP Leadership',
856	      'Divisional Directors',
857	      'IT Governance',
858	      'HR & Talent Management',
859	      'Finance (value tracking)',
860	    ],
861	    collaborationPoints: [
862	      'Provides strategic direction to AI Acceleration',
863	      'Sets reporting requirements for AI Command Center',
864	      'Coordinates governance decisions that affect all three sections',
865	    ],
866	    successMeasures: [
867	      'Stakeholder engagement coverage across divisions',
868	      'Reporting timeliness and accuracy',
869	      'Governance action closure rate',
870	      'AI Champion network activation rate',
871	      'Cross-divisional alignment progress',
872	    ],
873	  },
874	  {
875	    id: 'ai-acceleration',
876	    order: 2,
877	    name: 'AI Acceleration',
878	    shortName: 'Acceleration',
879	    colorToken: '#00C2FF',
880	    accentGradient: 'from-accent to-primary',
881	    tagline: 'Capability. Campaigns. Scale.',
882	    purpose:
883	      'Drive the active spread of AI across DEWA — through enablement programs, strategic partnerships, use case acceleration, and enterprise-wide awareness campaigns.',
884	    mandate:
885	      'AI Acceleration is the engine room of AI adoption. It executes the programs, activations, and engagements that move AI from isolated use to enterprise-scale adoption. It builds capability, expands access, and ensures every division has the support to adopt AI effectively.',
886	    responsibilities: [
887	      'Drive AI adoption campaigns and enterprise-wide activations',
888	      'Engage and manage strategic AI technology partners',
889	      'Identify and accelerate high-value use cases with business units',
890	      'Support AI Academy design and upskilling initiatives',
891	      'Run awareness, enablement, and adoption programs',
892	      'Coordinate AI tool access in controlled and strategic ways',
893	      'Manage internal and external AI events and showcases',
894	      'Support divisional engagement and scaling of AI capabilities',
895	    ],
896	    coreActivities: [
897	      'AI awareness and activation campaigns',
898	      'Partner engagement and management',
899	      'AI Academy program delivery',
900	      'Use case scouting and acceleration workshops',
901	      'Enterprise AI events and showcases',
902	      'Divisional AI enablement engagements',
903	    ],
904	    keyDeliverables: [
905	      'AI Adoption Campaign Calendar',
906	      'Strategic Partner Engagement Register',
907	      'AI Academy Program Catalogue',
908	      'Use Case Pipeline and Tracker',
909	      'Event and Activation Reports',
910	      'Divisional Enablement Playbooks',
911	    ],
912	    stakeholders: [
913	      'Business Unit Leaders',
914	      'HR / L&D',
915	      'Technology Vendors and Partners',
916	      'Communications Team',
917	      'Training and Academy Functions',
918	    ],
919	    collaborationPoints: [
920	      'Reports outcomes and adoption data to AI Command Center',
921	      'Escalates governance questions to AI Adoption Office',
922	      'Coordinates event visibility and reporting with Command Center',
923	    ],
924	    successMeasures: [
925	      'Number of awareness sessions and participation rate',
926	      'Number of partner engagements and outcomes',
927	      'Number of employees trained and capability uplifted',
928	      'Number of use cases accelerated and scaled',
929	      'Campaign reach and engagement metrics',
930	    ],
931	  },
932	  {
933	    id: 'command-center',
934	    order: 3,
935	    name: 'AI Command Center',
936	    shortName: 'Command Center',
937	    colorToken: '#F0A500',
938	    accentGradient: 'from-gold to-gold-dim',
939	    tagline: 'Visibility. Insights. Impact.',
940	    purpose:
941	      'Provide real-time centralized visibility of AI adoption, performance, and business impact — enabling leadership to make data-driven decisions and track the value of enterprise AI.',
942	    mandate:
943	      'The AI Command Center is the intelligence layer of the department. It translates AI adoption activity into dashboards, reports, and strategic insights that give leadership a clear, always-current view of how AI is performing across DEWA.',
944	    responsibilities: [
945	      'Build and maintain the executive AI adoption dashboard and command center displays',
946	      'Provide centralized, real-time adoption monitoring and performance visibility',
947	      'Track AI KPIs and enterprise performance signals across all tools and programs',
948	      'Monitor adoption trends, anomalies, and insights',
949	      'Support leadership reporting and strategic storytelling',
950	      'Provide one-stop view of AI initiatives, value, and priorities',
951	      'Shape the physical and digital command center experience',
952	      'Manage incident, issue, and escalation visibility',
953	    ],
954	    coreActivities: [
955	      'Weekly dashboard refresh and insight production',
956	      'Executive reporting pack preparation',
957	      'KPI tracking and trend analysis',
958	      'Command center display management',
959	      'Data quality and reporting accuracy assurance',
960	      'Insight storytelling for leadership audiences',
961	    ],
962	    keyDeliverables: [
963	      'Executive AI Adoption Dashboard',
964	      'Weekly KPI Digest',
965	      'Monthly Strategic Insights Report',
966	      'Command Center Physical and Digital Setup',
967	      'AI Portfolio Tracker',
968	      'Issue and Escalation Log',
969	    ],
970	    stakeholders: [
971	      'MD and CEO Office',
972	      'CAIO',
973	      'EVP Leadership',
974	      'Department Head',
975	      'IT Analytics and Data Teams',
976	    ],
977	    collaborationPoints: [
978	      'Consumes adoption data from AI Acceleration activities',
979	      'Produces reports aligned to AI Adoption Office governance requirements',
980	      'Provides visibility layer that serves all three sections and leadership',
981	    ],
982	    successMeasures: [
983	      'Dashboard availability and data accuracy',
984	      'Reporting cycle adherence',
985	      'Executive dashboard usage and satisfaction',
986	      'KPI coverage across AI portfolio',
987	      'Turnaround time on insight requests',
988	    ],
989	  },
990	]
991	```
992
993	---
994
995	# FILE: content/kpis.ts
996
997	```typescript
998	export type KpiTier = 'P1' | 'P2' | 'P3'
999	export type KpiCategory =
[result-id: r4]

      emphasis: false,
    },
    {
      id: 'hours-saved',
      label: 'Estimated Hours Saved',
      value: '18,600',
      unit: 'hrs',
      trend: 'This quarter',
      trendDirection: 'up',
      emphasis: true,
    },
    {
      id: 'use-cases',
      label: 'Active Use Cases',
      value: '42',
      unit: '',
      trend: '14 scaled enterprise-wide',
      trendDirection: 'up',
      emphasis: false,
    },
    {
      id: 'champions',
      label: 'AI Champions',
      value: '86',
      unit: '',
      trend: 'Across 12 divisions',
      trendDirection: 'neutral',
      emphasis: false,
    },
    {
      id: 'programs',
      label: 'Training Programs',
      value: '9',
      unit: '',
      trend: '1,200+ enrolled',
      trendDirection: 'up',
      emphasis: false,
    },
  ],
}
```

---

# FILE: content/sections.ts

```typescript
export interface SectionDefinition {
  id: string
  order: number
  name: string
  shortName: string
  colorToken: string
  accentGradient: string
  tagline: string
  purpose: string
  mandate: string
  responsibilities: string[]
  coreActivities: string[]
  keyDeliverables: string[]
  stakeholders: string[]
  collaborationPoints: string[]
  successMeasures: string[]
}

export const sections: SectionDefinition[] = [
  {
    id: 'adoption-office',
    order: 1,
    name: 'AI Adoption Office',
    shortName: 'Adoption Office',
    colorToken: '#0066FF',
    accentGradient: 'from-primary to-primary-dim',
    tagline: 'Strategy. Governance. Alignment.',
    purpose:
      'Serve as the strategic backbone of the department — ensuring the operating model is coherent, governance is active, stakeholders are aligned, and performance is visible.',
    mandate:
      'The AI Adoption Office owns the department\'s strategic direction, governance coordination, adoption reporting, and cross-divisional engagement. It is the function that ensures AI adoption across DEWA is structured, measured, and aligned to enterprise priorities.',
    responsibilities: [
      'Define and maintain the AI Adoption operating model',
      'Align department priorities with DEWA strategic objectives and AlHasbah direction',
      'Coordinate governance and oversight mechanisms across AI adoption activities',
      'Manage adoption reporting cadence and performance visibility',
      'Orchestrate the AI Champions and AI Ambassadors network across divisions',
      'Engage divisional leadership and key stakeholders',
      'Oversee KPI tracking and business value communication',
      'Manage cross-divisional alignment and dependency resolution',
    ],
    coreActivities: [
      'Monthly performance reviews and reporting',
      'Quarterly operating model review',
      'AI Champions network management and activation',
      'Stakeholder briefings and leadership engagement',
      'Governance forum coordination',
      'Adoption strategy updates',
    ],
    keyDeliverables: [
      'AI Adoption Operating Model (living document)',
      'Monthly Adoption Performance Report',
      'Governance and Oversight Framework',
      'AI Champions Program Framework',
      'Stakeholder Engagement Calendar',
      'Cross-divisional Alignment Register',
    ],
    stakeholders: [
      'CAIO / EVP Leadership',
      'Divisional Directors',
      'IT Governance',
      'HR & Talent Management',
      'Finance (value tracking)',
    ],
    collaborationPoints: [
      'Provides strategic direction to AI Acceleration',
      'Sets reporting requirements for AI Command Center',
      'Coordinates governance decisions that affect all three sections',
    ],
    successMeasures: [
      'Stakeholder engagement coverage across divisions',
      'Reporting timeliness and accuracy',
      'Governance action closure rate',
      'AI Champion network activation rate',
      'Cross-divisional alignment progress',
    ],
  },
  {
    id: 'ai-acceleration',
    order: 2,
    name: 'AI Acceleration',
    shortName: 'Acceleration',
    colorToken: '#00C2FF',
    accentGradient: 'from-accent to-primary',
    tagline: 'Capability. Campaigns. Scale.',
    purpose:
      'Drive the active spread of AI across DEWA — through enablement programs, strategic partnerships, use case acceleration, and enterprise-wide awareness campaigns.',
    mandate:
      'AI Acceleration is the engine room of AI adoption. It executes the programs, activations, and engagements that move AI from isolated use to enterprise-scale adoption. It builds capability, expands access, and ensures every division has the support to adopt AI effectively.',
    responsibilities: [
      'Drive AI adoption campaigns and enterprise-wide activations',
      'Engage and manage strategic AI technology partners',
      'Identify and accelerate high-value use cases with business units',
      'Support AI Academy design and upskilling initiatives',
      'Run awareness, enablement, and adoption programs',
      'Coordinate AI tool access in controlled and strategic ways',
      'Manage internal and external AI events and showcases',
      'Support divisional engagement and scaling of AI capabilities',
    ],
    coreActivities: [
      'AI awareness and activation campaigns',
      'Partner engagement and management',
      'AI Academy program delivery',
      'Use case scouting and acceleration workshops',
      'Enterprise AI events and showcases',
      'Divisional AI enablement engagements',
    ],
    keyDeliverables: [
      'AI Adoption Campaign Calendar',
      'Strategic Partner Engagement Register',
      'AI Academy Program Catalogue',
      'Use Case Pipeline and Tracker',
      'Event and Activation Reports',
      'Divisional Enablement Playbooks',
    ],
    stakeholders: [
      'Business Unit Leaders',
      'HR / L&D',
      'Technology Vendors and Partners',
      'Communications Team',
      'Training and Academy Functions',
    ],
    collaborationPoints: [
      'Reports outcomes and adoption data to AI Command Center',
      'Escalates governance questions to AI Adoption Office',
      'Coordinates event visibility and reporting with Command Center',
    ],
    successMeasures: [
      'Number of awareness sessions and participation rate',
      'Number of partner engagements and outcomes',
      'Number of employees trained and capability uplifted',
      'Number of use cases accelerated and scaled',
      'Campaign reach and engagement metrics',
    ],
  },
  {
    id: 'command-center',
    order: 3,
    name: 'AI Command Center',
    shortName: 'Command Center',
    colorToken: '#F0A500',
    accentGradient: 'from-gold to-gold-dim',
    tagline: 'Visibility. Insights. Impact.',
    purpose:
      'Provide real-time centralized visibility of AI adoption, performance, and business impact — enabling leadership to make data-driven decisions and track the value of enterprise AI.',
    mandate:
      'The AI Command Center is the intelligence layer of the department. It translates AI adoption activity into dashboards, reports, and strategic insights that give leadership a clear, always-current view of how AI is performing across DEWA.',
    responsibilities: [
      'Build and maintain the executive AI adoption dashboard and command center displays',
      'Provide centralized, real-time adoption monitoring and performance visibility',
      'Track AI KPIs and enterprise performance signals across all tools and programs',
      'Monitor adoption trends, anomalies, and insights',
      'Support leadership reporting and strategic storytelling',
      'Provide one-stop view of AI initiatives, value, and priorities',
      'Shape the physical and digital command center experience',
      'Manage incident, issue, and escalation visibility',
    ],
    coreActivities: [
      'Weekly dashboard refresh and insight production',
      'Executive reporting pack preparation',
      'KPI tracking and trend analysis',
      'Command center display management',
      'Data quality and reporting accuracy assurance',
      'Insight storytelling for leadership audiences',
    ],
    keyDeliverables: [
      'Executive AI Adoption Dashboard',
      'Weekly KPI Digest',
      'Monthly Strategic Insights Report',
      'Command Center Physical and Digital Setup',
      'AI Portfolio Tracker',
      'Issue and Escalation Log',
    ],
    stakeholders: [
      'MD and CEO Office',
      'CAIO',
      'EVP Leadership',
      'Department Head',
      'IT Analytics and Data Teams',
    ],
    collaborationPoints: [
      'Consumes adoption data from AI Acceleration activities',
      'Produces reports aligned to AI Adoption Office governance requirements',
      'Provides visibility layer that serves all three sections and leadership',
    ],
    successMeasures: [
      'Dashboard availability and data accuracy',
      'Reporting cycle adherence',
      'Executive dashboard usage and satisfaction',
      'KPI coverage across AI portfolio',
      'Turnaround time on insight requests',
    ],
  },
]
```

---

# FILE: content/kpis.ts

```typescript
export type KpiTier = 'P1' | 'P2' | 'P3'
export type KpiCategory =


1000	  | 'adoption'
1001	  | 'productivity'
1002	  | 'training'
1003	  | 'governance'
1004	  | 'value'
1005	  | 'engagement'
1006
1007	export interface Kpi {
1008	  id: string
1009	  label: string
1010	  description: string
1011	  value: string
1012	  unit: string
1013	  target: string
1014	  targetUnit: string
1015	  progress: number        // 0–100
1016	  trend: string
1017	  trendDirection: 'up' | 'down' | 'neutral'
1018	  tier: KpiTier
1019	  category: KpiCategory
1020	  owner: string           // section id
1021	  cadence: 'daily' | 'weekly' | 'monthly' | 'quarterly'
1022	  status: 'on-track' | 'at-risk' | 'critical' | 'planned'
1023	}
1024
1025	export const kpis: Kpi[] = [
1026	  // --- Department Level ---
1027	  {
1028	    id: 'adoption-rate',
1029	    label: 'Enterprise Adoption Rate',
1030	    description: 'Percentage of eligible employees actively using at least one AI tool',
1031	    value: '68',
1032	    unit: '%',
1033	    target: '80',
1034	    targetUnit: '%',
1035	    progress: 85,
1036	    trend: '+12% vs Q3',
1037	    trendDirection: 'up',
1038	    tier: 'P1',
1039	    category: 'adoption',
1040	    owner: 'department',
1041	    cadence: 'monthly',
1042	    status: 'on-track',
1043	  },
1044	  {
1045	    id: 'active-users',
1046	    label: 'Active AI Users',
1047	    description: 'Unique employees with at least one AI tool session in the past 30 days',
1048	    value: '3,240',
1049	    unit: '',
1050	    target: '4,000',
1051	    targetUnit: 'users',
1052	    progress: 81,
1053	    trend: '+480 this month',
1054	    trendDirection: 'up',
1055	    tier: 'P1',
1056	    category: 'adoption',
1057	    owner: 'department',
1058	    cadence: 'monthly',
1059	    status: 'on-track',
1060	  },
1061	  {
1062	    id: 'hours-saved',
1063	    label: 'Estimated Hours Saved',
1064	    description: 'Productivity value generated through AI tool usage, annualised',
1065	    value: '18,600',
1066	    unit: 'hrs',
1067	    target: '24,000',
1068	    targetUnit: 'hrs/quarter',
1069	    progress: 78,
1070	    trend: 'On pace for target',
1071	    trendDirection: 'up',
1072	    tier: 'P1',
1073	    category: 'productivity',
1074	    owner: 'department',
1075	    cadence: 'quarterly',
1076	    status: 'on-track',
1077	  },
1078	  {
1079	    id: 'use-cases-active',
1080	    label: 'Active Use Cases',
1081	    description: 'AI use cases currently in active deployment or pilot across DEWA',
1082	    value: '42',
1083	    unit: '',
1084	    target: '60',
1085	    targetUnit: 'use cases',
1086	    progress: 70,
1087	    trend: '14 scaled to enterprise',
1088	    trendDirection: 'up',
1089	    tier: 'P1',
1090	    category: 'adoption',
1091	    owner: 'ai-acceleration',
1092	    cadence: 'monthly',
1093	    status: 'on-track',
1094	  },
1095	  {
1096	    id: 'champions-active',
1097	    label: 'Active AI Champions',
1098	    description: 'Certified AI Champions actively engaged in divisional adoption activities',
1099	    value: '86',
1100	    unit: '',
1101	    target: '120',
1102	    targetUnit: 'champions',
1103	    progress: 72,
1104	    trend: '+18 this quarter',
1105	    trendDirection: 'up',
1106	    tier: 'P1',
1107	    category: 'engagement',
1108	    owner: 'adoption-office',
1109	    cadence: 'quarterly',
1110	    status: 'on-track',
1111	  },
1112	  {
1113	    id: 'divisional-coverage',
1114	    label: 'Divisional Coverage',
1115	    description: 'Percentage of DEWA divisions with active AI adoption engagement',
1116	    value: '75',
1117	    unit: '%',
1118	    target: '100',
1119	    targetUnit: '%',
1120	    progress: 75,
1121	    trend: '9 of 12 divisions active',
1122	    trendDirection: 'up',
1123	    tier: 'P1',
1124	    category: 'adoption',
1125	    owner: 'adoption-office',
1126	    cadence: 'quarterly',
1127	    status: 'at-risk',
1128	  },
1129	  // --- AI Acceleration ---
1130	  {
1131	    id: 'employees-trained',
1132	    label: 'Employees Trained',
1133	    description: 'Cumulative unique employees who have completed at least one AI training module',
1134	    value: '1,240',
1135	    unit: '',
1136	    target: '2,000',
1137	    targetUnit: 'employees',
1138	    progress: 62,
1139	    trend: '+310 this quarter',
1140	    trendDirection: 'up',
1141	    tier: 'P1',
1142	    category: 'training',
1143	    owner: 'ai-acceleration',
1144	    cadence: 'monthly',
1145	    status: 'on-track',
1146	  },
1147	  {
1148	    id: 'campaigns-executed',
1149	    label: 'Campaigns Executed',
1150	    description: 'Number of AI awareness and activation campaigns completed this year',
1151	    value: '11',
1152	    unit: '',
1153	    target: '16',
1154	    targetUnit: 'campaigns',
1155	    progress: 69,
1156	    trend: 'Q4 campaigns in planning',
1157	    trendDirection: 'neutral',
1158	    tier: 'P2',
1159	    category: 'engagement',
1160	    owner: 'ai-acceleration',
1161	    cadence: 'quarterly',
1162	    status: 'on-track',
1163	  },
1164	  // --- AI Command Center ---
1165	  {
1166	    id: 'dashboard-accuracy',
1167	    label: 'Dashboard Data Accuracy',
1168	    description: 'Percentage of KPI data points validated and current within reporting window',
1169	    value: '96',
1170	    unit: '%',
1171	    target: '99',
1172	    targetUnit: '%',
1173	    progress: 97,
1174	    trend: 'Stable',
1175	    trendDirection: 'neutral',
1176	    tier: 'P1',
1177	    category: 'governance',
1178	    owner: 'command-center',
1179	    cadence: 'weekly',
1180	    status: 'on-track',
1181	  },
1182	  {
1183	    id: 'reporting-adherence',
1184	    label: 'Reporting Cadence Adherence',
1185	    description: 'Percentage of scheduled executive reports delivered on time',
1186	    value: '100',
1187	    unit: '%',
1188	    target: '100',
1189	    targetUnit: '%',
1190	    progress: 100,
1191	    trend: 'All reports on schedule',
1192	    trendDirection: 'neutral',
1193	    tier: 'P1',
1194	    category: 'governance',
1195	    owner: 'command-center',
1196	    cadence: 'monthly',
1197	    status: 'on-track',
1198	  },
1199	  // --- Governance ---
1200	  {
1201	    id: 'governance-closure',
1202	    label: 'Governance Action Closure Rate',
1203	    description: 'Percentage of open governance actions closed within agreed timelines',
1204	    value: '88',
1205	    unit: '%',
1206	    target: '95',
1207	    targetUnit: '%',
1208	    progress: 93,
1209	    trend: '4 actions pending',
1210	    trendDirection: 'up',
1211	    tier: 'P2',
1212	    category: 'governance',
1213	    owner: 'adoption-office',
1214	    cadence: 'monthly',
1215	    status: 'at-risk',
1216	  },
1217	]
1218	```
1219
1220	---
1221
1222	# FILE: content/governance.ts
1223
1224	```typescript
1225	export interface GovernancePrinciple {
1226	  id: string
1227	  title: string
1228	  description: string
1229	  icon: string
1230	}
1231
1232	export interface DecisionLayer {
1233	  id: string
1234	  name: string
1235	  description: string
1236	  participants: string[]
1237	  cadence: string
1238	  scope: string
1239	}
1240
1241	export interface GovernanceControl {
1242	  id: string
1243	  area: string
1244	  control: string
1245	  owner: string
1246	  reviewCadence: string
1247	  status: 'active' | 'in-progress' | 'planned'
1248	}
1249
[result-id: r5]

  | 'adoption'
  | 'productivity'
  | 'training'
  | 'governance'
  | 'value'
  | 'engagement'

export interface Kpi {
  id: string
  label: string
  description: string
  value: string
  unit: string
  target: string
  targetUnit: string
  progress: number        // 0–100
  trend: string
  trendDirection: 'up' | 'down' | 'neutral'
  tier: KpiTier
  category: KpiCategory
  owner: string           // section id
  cadence: 'daily' | 'weekly' | 'monthly' | 'quarterly'
  status: 'on-track' | 'at-risk' | 'critical' | 'planned'
}

export const kpis: Kpi[] = [
  // --- Department Level ---
  {
    id: 'adoption-rate',
    label: 'Enterprise Adoption Rate',
    description: 'Percentage of eligible employees actively using at least one AI tool',
    value: '68',
    unit: '%',
    target: '80',
    targetUnit: '%',
    progress: 85,
    trend: '+12% vs Q3',
    trendDirection: 'up',
    tier: 'P1',
    category: 'adoption',
    owner: 'department',
    cadence: 'monthly',
    status: 'on-track',
  },
  {
    id: 'active-users',
    label: 'Active AI Users',
    description: 'Unique employees with at least one AI tool session in the past 30 days',
    value: '3,240',
    unit: '',
    target: '4,000',
    targetUnit: 'users',
    progress: 81,
    trend: '+480 this month',
    trendDirection: 'up',
    tier: 'P1',
    category: 'adoption',
    owner: 'department',
    cadence: 'monthly',
    status: 'on-track',
  },
  {
    id: 'hours-saved',
    label: 'Estimated Hours Saved',
    description: 'Productivity value generated through AI tool usage, annualised',
    value: '18,600',
    unit: 'hrs',
    target: '24,000',
    targetUnit: 'hrs/quarter',
    progress: 78,
    trend: 'On pace for target',
    trendDirection: 'up',
    tier: 'P1',
    category: 'productivity',
    owner: 'department',
    cadence: 'quarterly',
    status: 'on-track',
  },
  {
    id: 'use-cases-active',
    label: 'Active Use Cases',
    description: 'AI use cases currently in active deployment or pilot across DEWA',
    value: '42',
    unit: '',
    target: '60',
    targetUnit: 'use cases',
    progress: 70,
    trend: '14 scaled to enterprise',
    trendDirection: 'up',
    tier: 'P1',
    category: 'adoption',
    owner: 'ai-acceleration',
    cadence: 'monthly',
    status: 'on-track',
  },
  {
    id: 'champions-active',
    label: 'Active AI Champions',
    description: 'Certified AI Champions actively engaged in divisional adoption activities',
    value: '86',
    unit: '',
    target: '120',
    targetUnit: 'champions',
    progress: 72,
    trend: '+18 this quarter',
    trendDirection: 'up',
    tier: 'P1',
    category: 'engagement',
    owner: 'adoption-office',
    cadence: 'quarterly',
    status: 'on-track',
  },
  {
    id: 'divisional-coverage',
    label: 'Divisional Coverage',
    description: 'Percentage of DEWA divisions with active AI adoption engagement',
    value: '75',
    unit: '%',
    target: '100',
    targetUnit: '%',
    progress: 75,
    trend: '9 of 12 divisions active',
    trendDirection: 'up',
    tier: 'P1',
    category: 'adoption',
    owner: 'adoption-office',
    cadence: 'quarterly',
    status: 'at-risk',
  },
  // --- AI Acceleration ---
  {
    id: 'employees-trained',
    label: 'Employees Trained',
    description: 'Cumulative unique employees who have completed at least one AI training module',
    value: '1,240',
    unit: '',
    target: '2,000',
    targetUnit: 'employees',
    progress: 62,
    trend: '+310 this quarter',
    trendDirection: 'up',
    tier: 'P1',
    category: 'training',
    owner: 'ai-acceleration',
    cadence: 'monthly',
    status: 'on-track',
  },
  {
    id: 'campaigns-executed',
    label: 'Campaigns Executed',
    description: 'Number of AI awareness and activation campaigns completed this year',
    value: '11',
    unit: '',
    target: '16',
    targetUnit: 'campaigns',
    progress: 69,
    trend: 'Q4 campaigns in planning',
    trendDirection: 'neutral',
    tier: 'P2',
    category: 'engagement',
    owner: 'ai-acceleration',
    cadence: 'quarterly',
    status: 'on-track',
  },
  // --- AI Command Center ---
  {
    id: 'dashboard-accuracy',
    label: 'Dashboard Data Accuracy',
    description: 'Percentage of KPI data points validated and current within reporting window',
    value: '96',
    unit: '%',
    target: '99',
    targetUnit: '%',
    progress: 97,
    trend: 'Stable',
    trendDirection: 'neutral',
    tier: 'P1',
    category: 'governance',
    owner: 'command-center',
    cadence: 'weekly',
    status: 'on-track',
  },
  {
    id: 'reporting-adherence',
    label: 'Reporting Cadence Adherence',
    description: 'Percentage of scheduled executive reports delivered on time',
    value: '100',
    unit: '%',
    target: '100',
    targetUnit: '%',
    progress: 100,
    trend: 'All reports on schedule',
    trendDirection: 'neutral',
    tier: 'P1',
    category: 'governance',
    owner: 'command-center',
    cadence: 'monthly',
    status: 'on-track',
  },
  // --- Governance ---
  {
    id: 'governance-closure',
    label: 'Governance Action Closure Rate',
    description: 'Percentage of open governance actions closed within agreed timelines',
    value: '88',
    unit: '%',
    target: '95',
    targetUnit: '%',
    progress: 93,
    trend: '4 actions pending',
    trendDirection: 'up',
    tier: 'P2',
    category: 'governance',
    owner: 'adoption-office',
    cadence: 'monthly',
    status: 'at-risk',
  },
]
```

---

# FILE: content/governance.ts

```typescript
export interface GovernancePrinciple {
  id: string
  title: string
  description: string
  icon: string
}

export interface DecisionLayer {
  id: string
  name: string
  description: string
  participants: string[]
  cadence: string
  scope: string
}

export interface GovernanceControl {
  id: string
  area: string
  control: string
  owner: string
  reviewCadence: string
  status: 'active' | 'in-progress' | 'planned'
}


1250	export const governancePrinciples: GovernancePrinciple[] = [
1251	  {
1252	    id: 'strategic-alignment',
1253	    title: 'Strategic Alignment',
1254	    description:
1255	      'All AI adoption activities must align with DEWA strategic objectives, AlHasbah priorities, and approved operating model.',
1256	    icon: 'Target',
1257	  },
1258	  {
1259	    id: 'safe-adoption',
1260	    title: 'Safe and Controlled Adoption',
1261	    description:
1262	      'AI tools and use cases are introduced through a structured review and approval pathway before enterprise-wide rollout.',
1263	    icon: 'ShieldCheck',
1264	  },
1265	  {
1266	    id: 'measurable-value',
1267	    title: 'Measurable Value',
1268	    description:
1269	      'Every AI initiative must have defined KPIs and a value tracking mechanism before it progresses to scale.',
1270	    icon: 'BarChart2',
1271	  },
1272	  {
1273	    id: 'clear-accountability',
1274	    title: 'Clear Accountability',
1275	    description:
1276	      'Every AI adoption activity has a named owner, a defined scope, and an escalation path.',
1277	    icon: 'UserCheck',
1278	  },
1279	  {
1280	    id: 'transparency',
1281	    title: 'Transparency and Reporting',
1282	    description:
1283	      'Adoption performance, risks, and governance actions are reported to leadership on a regular, structured cadence.',
1284	    icon: 'Eye',
1285	  },
1286	  {
1287	    id: 'controlled-scaling',
1288	    title: 'Controlled Scaling',
1289	    description:
1290	      'Scaling of AI use cases follows a defined maturity model with governance checkpoints at each stage.',
1291	    icon: 'Layers',
1292	  },
1293	]
1294
1295	export const decisionLayers: DecisionLayer[] = [
1296	  {
1297	    id: 'leadership',
1298	    name: 'Executive Leadership',
1299	    description:
1300	      'Provides strategic direction, approves major AI investments, and reviews quarterly adoption performance.',
1301	    participants: ['MD & CEO', 'EVP', 'CAIO'],
1302	    cadence: 'Quarterly',
1303	    scope: 'Strategic direction, major investments, enterprise policy',
1304	  },
1305	  {
1306	    id: 'department-head',
1307	    name: 'Department Head',
1308	    description:
1309	      'Owns the operating model, approves programs and partnerships, and signs off on governance frameworks.',
1310	    participants: ['AI Adoption Department Head', 'Section Leads'],
1311	    cadence: 'Monthly',
1312	    scope: 'Operating model, program approvals, cross-section coordination',
1313	  },
1314	  {
1315	    id: 'governance-forum',
1316	    name: 'AI Governance Forum',
1317	    description:
1318	      'Reviews use case approvals, monitors compliance, and manages risk and control actions.',
1319	    participants: ['AI Adoption Office Lead', 'IT Governance', 'Legal / Compliance', 'Risk'],
1320	    cadence: 'Bi-weekly',
1321	    scope: 'Use case approvals, risk actions, compliance monitoring',
1322	  },
1323	  {
1324	    id: 'operational',
1325	    name: 'Operational Review',
1326	    description:
1327	      'Section leads review weekly performance, resolve operational blockers, and manage day-to-day coordination.',
1328	    participants: ['Section Leads', 'Key team members'],
1329	    cadence: 'Weekly',
1330	    scope: 'Performance tracking, blockers, coordination',
1331	  },
1332	]
1333
1334	export const governanceControls: GovernanceControl[] = [
1335	  {
1336	    id: 'tool-approval',
1337	    area: 'AI Tool Onboarding',
1338	    control: 'All new AI tools must pass a security, compliance, and data governance review before enterprise access is granted.',
1339	    owner: 'AI Adoption Office + IT Governance',
1340	    reviewCadence: 'Per request',
1341	    status: 'active',
1342	  },
1343	  {
1344	    id: 'data-usage',
1345	    area: 'Data Usage',
1346	    control: 'AI use cases involving sensitive or personal data require a Data Impact Assessment and CISO sign-off.',
1347	    owner: 'IT Governance + Legal',
1348	    reviewCadence: 'Per use case',
1349	    status: 'active',
1350	  },
1351	  {
1352	    id: 'vendor-risk',
1353	    area: 'Vendor Risk',
1354	    control: 'Strategic AI partners undergo quarterly risk review covering data handling, SLA compliance, and roadmap alignment.',
1355	    owner: 'AI Acceleration + Procurement',
1356	    reviewCadence: 'Quarterly',
1357	    status: 'active',
1358	  },
1359	  {
1360	    id: 'adoption-metrics',
1361	    area: 'Reporting Integrity',
1362	    control: 'All adoption KPIs are validated by AI Command Center before executive reporting.',
1363	    owner: 'AI Command Center',
1364	    reviewCadence: 'Monthly',
1365	    status: 'active',
1366	  },
1367	  {
1368	    id: 'ethics-review',
1369	    area: 'AI Ethics',
1370	    control: 'Use cases with potential workforce or operational impact require an ethics and change management review.',
1371	    owner: 'AI Adoption Office + HR',
1372	    reviewCadence: 'Per use case',
1373	    status: 'in-progress',
1374	  },
1375	]
1376	```
1377
1378	---
1379
1380	# FILE: content/operating-model.ts
1381
1382	```typescript
1383	export interface OperatingStage {
1384	  id: string
1385	  order: number
1386	  name: string
1387	  description: string
1388	  outputs: string[]
1389	  sections: string[]   // section ids that contribute
1390	}
1391
1392	export const operatingStages: OperatingStage[] = [
1393	  {
1394	    id: 'intake',
1395	    order: 1,
1396	    name: 'Demand & Opportunity Intake',
1397	    description:
1398	      'AI opportunities, use case ideas, and adoption requests are captured from divisions, partners, and internal initiatives.',
1399	    outputs: ['Use case backlog', 'Opportunity register', 'Division request log'],
1400	    sections: ['adoption-office', 'ai-acceleration'],
1401	  },
1402	  {
1403	    id: 'assessment',
1404	    order: 2,
1405	    name: 'Assessment & Prioritisation',
1406	    description:
1407	      'Opportunities are assessed for strategic fit, feasibility, risk profile, and expected business value.',
1408	    outputs: ['Prioritised use case list', 'Risk assessment notes', 'Value estimation'],
1409	    sections: ['adoption-office', 'ai-acceleration'],
1410	  },
1411	  {
1412	    id: 'alignment',
1413	    order: 3,
1414	    name: 'Strategic Alignment',
1415	    description:
1416	      'Selected use cases and programs are aligned to DEWA priorities, governance frameworks, and AlHasbah objectives.',
1417	    outputs: ['Alignment approval', 'Governance sign-off', 'Stakeholder briefing'],
1418	    sections: ['adoption-office'],
1419	  },
1420	  {
1421	    id: 'enablement',
1422	    order: 4,
1423	    name: 'Adoption Enablement',
1424	    description:
1425	      'Training programs, awareness campaigns, and tool access are deployed to targeted divisions and user groups.',
1426	    outputs: ['Training completions', 'Campaign reach', 'Access grants', 'Activation events'],
1427	    sections: ['ai-acceleration'],
1428	  },
1429	  {
1430	    id: 'acceleration',
1431	    order: 5,
1432	    name: 'Use Case Acceleration',
1433	    description:
1434	      'High-value use cases are accelerated with dedicated support, partner engagement, and cross-divisional coordination.',
1435	    outputs: ['Scaled use cases', 'Partner activations', 'Business unit outcomes'],
1436	    sections: ['ai-acceleration'],
1437	  },
1438	  {
1439	    id: 'monitoring',
1440	    order: 6,
1441	    name: 'Adoption Monitoring',
1442	    description:
1443	      'Usage data, adoption signals, and performance indicators are collected and validated in real time.',
1444	    outputs: ['Usage dashboards', 'Anomaly alerts', 'Trend reports'],
1445	    sections: ['command-center'],
1446	  },
1447	  {
1448	    id: 'kpi-tracking',
1449	    order: 7,
1450	    name: 'KPI Tracking & Value Measurement',
1451	    description:
1452	      'KPIs are tracked against targets. Business value — hours saved, cost reduction, productivity uplift — is quantified.',
1453	    outputs: ['KPI scorecards', 'Value realisation tracker', 'ROI estimates'],
1454	    sections: ['command-center', 'adoption-office'],
1455	  },
1456	  {
1457	    id: 'reporting',
1458	    order: 8,
1459	    name: 'Executive Reporting',
1460	    description:
1461	      'Strategic insights and performance data are packaged into executive-ready reports and command center displays.',
1462	    outputs: ['Executive dashboard', 'Leadership briefing packs', 'Command center displays'],
1463	    sections: ['command-center'],
1464	  },
1465	  {
1466	    id: 'improvement',
1467	    order: 9,
1468	    name: 'Continuous Improvement',
1469	    description:
1470	      'Insights feed back into strategy, operating model updates, and the next intake cycle.',
1471	    outputs: ['Operating model updates', 'Strategy adjustments', 'Next cycle priorities'],
1472	    sections: ['adoption-office', 'ai-acceleration', 'command-center'],
1473	  },
1474	]
1475	```
1476
1477	---
1478
1479	# FILE: content/roadmap.ts
1480
1481	```typescript
1482	export type RoadmapPhase = 'now' | 'next' | 'future'
1483	export type RoadmapTheme =
1484	  | 'governance'
1485	  | 'capability'
1486	  | 'partnerships'
1487	  | 'command-center'
1488	  | 'analytics'
1489	  | 'value-tracking'
1490	  | 'champions'
1491	  | 'strategy'
1492
1493	export interface RoadmapItem {
1494	  id: string
1495	  phase: RoadmapPhase
1496	  theme: RoadmapTheme
1497	  title: string
1498	  description: string
1499	  owner: string
[result-id: r6]

export const governancePrinciples: GovernancePrinciple[] = [
  {
    id: 'strategic-alignment',
    title: 'Strategic Alignment',
    description:
      'All AI adoption activities must align with DEWA strategic objectives, AlHasbah priorities, and approved operating model.',
    icon: 'Target',
  },
  {
    id: 'safe-adoption',
    title: 'Safe and Controlled Adoption',
    description:
      'AI tools and use cases are introduced through a structured review and approval pathway before enterprise-wide rollout.',
    icon: 'ShieldCheck',
  },
  {
    id: 'measurable-value',
    title: 'Measurable Value',
    description:
      'Every AI initiative must have defined KPIs and a value tracking mechanism before it progresses to scale.',
    icon: 'BarChart2',
  },
  {
    id: 'clear-accountability',
    title: 'Clear Accountability',
    description:
      'Every AI adoption activity has a named owner, a defined scope, and an escalation path.',
    icon: 'UserCheck',
  },
  {
    id: 'transparency',
    title: 'Transparency and Reporting',
    description:
      'Adoption performance, risks, and governance actions are reported to leadership on a regular, structured cadence.',
    icon: 'Eye',
  },
  {
    id: 'controlled-scaling',
    title: 'Controlled Scaling',
    description:
      'Scaling of AI use cases follows a defined maturity model with governance checkpoints at each stage.',
    icon: 'Layers',
  },
]

export const decisionLayers: DecisionLayer[] = [
  {
    id: 'leadership',
    name: 'Executive Leadership',
    description:
      'Provides strategic direction, approves major AI investments, and reviews quarterly adoption performance.',
    participants: ['MD & CEO', 'EVP', 'CAIO'],
    cadence: 'Quarterly',
    scope: 'Strategic direction, major investments, enterprise policy',
  },
  {
    id: 'department-head',
    name: 'Department Head',
    description:
      'Owns the operating model, approves programs and partnerships, and signs off on governance frameworks.',
    participants: ['AI Adoption Department Head', 'Section Leads'],
    cadence: 'Monthly',
    scope: 'Operating model, program approvals, cross-section coordination',
  },
  {
    id: 'governance-forum',
    name: 'AI Governance Forum',
    description:
      'Reviews use case approvals, monitors compliance, and manages risk and control actions.',
    participants: ['AI Adoption Office Lead', 'IT Governance', 'Legal / Compliance', 'Risk'],
    cadence: 'Bi-weekly',
    scope: 'Use case approvals, risk actions, compliance monitoring',
  },
  {
    id: 'operational',
    name: 'Operational Review',
    description:
      'Section leads review weekly performance, resolve operational blockers, and manage day-to-day coordination.',
    participants: ['Section Leads', 'Key team members'],
    cadence: 'Weekly',
    scope: 'Performance tracking, blockers, coordination',
  },
]

export const governanceControls: GovernanceControl[] = [
  {
    id: 'tool-approval',
    area: 'AI Tool Onboarding',
    control: 'All new AI tools must pass a security, compliance, and data governance review before enterprise access is granted.',
    owner: 'AI Adoption Office + IT Governance',
    reviewCadence: 'Per request',
    status: 'active',
  },
  {
    id: 'data-usage',
    area: 'Data Usage',
    control: 'AI use cases involving sensitive or personal data require a Data Impact Assessment and CISO sign-off.',
    owner: 'IT Governance + Legal',
    reviewCadence: 'Per use case',
    status: 'active',
  },
  {
    id: 'vendor-risk',
    area: 'Vendor Risk',
    control: 'Strategic AI partners undergo quarterly risk review covering data handling, SLA compliance, and roadmap alignment.',
    owner: 'AI Acceleration + Procurement',
    reviewCadence: 'Quarterly',
    status: 'active',
  },
  {
    id: 'adoption-metrics',
    area: 'Reporting Integrity',
    control: 'All adoption KPIs are validated by AI Command Center before executive reporting.',
    owner: 'AI Command Center',
    reviewCadence: 'Monthly',
    status: 'active',
  },
  {
    id: 'ethics-review',
    area: 'AI Ethics',
    control: 'Use cases with potential workforce or operational impact require an ethics and change management review.',
    owner: 'AI Adoption Office + HR',
    reviewCadence: 'Per use case',
    status: 'in-progress',
  },
]
```

---

# FILE: content/operating-model.ts

```typescript
export interface OperatingStage {
  id: string
  order: number
  name: string
  description: string
  outputs: string[]
  sections: string[]   // section ids that contribute
}

export const operatingStages: OperatingStage[] = [
  {
    id: 'intake',
    order: 1,
    name: 'Demand & Opportunity Intake',
    description:
      'AI opportunities, use case ideas, and adoption requests are captured from divisions, partners, and internal initiatives.',
    outputs: ['Use case backlog', 'Opportunity register', 'Division request log'],
    sections: ['adoption-office', 'ai-acceleration'],
  },
  {
    id: 'assessment',
    order: 2,
    name: 'Assessment & Prioritisation',
    description:
      'Opportunities are assessed for strategic fit, feasibility, risk profile, and expected business value.',
    outputs: ['Prioritised use case list', 'Risk assessment notes', 'Value estimation'],
    sections: ['adoption-office', 'ai-acceleration'],
  },
  {
    id: 'alignment',
    order: 3,
    name: 'Strategic Alignment',
    description:
      'Selected use cases and programs are aligned to DEWA priorities, governance frameworks, and AlHasbah objectives.',
    outputs: ['Alignment approval', 'Governance sign-off', 'Stakeholder briefing'],
    sections: ['adoption-office'],
  },
  {
    id: 'enablement',
    order: 4,
    name: 'Adoption Enablement',
    description:
      'Training programs, awareness campaigns, and tool access are deployed to targeted divisions and user groups.',
    outputs: ['Training completions', 'Campaign reach', 'Access grants', 'Activation events'],
    sections: ['ai-acceleration'],
  },
  {
    id: 'acceleration',
    order: 5,
    name: 'Use Case Acceleration',
    description:
      'High-value use cases are accelerated with dedicated support, partner engagement, and cross-divisional coordination.',
    outputs: ['Scaled use cases', 'Partner activations', 'Business unit outcomes'],
    sections: ['ai-acceleration'],
  },
  {
    id: 'monitoring',
    order: 6,
    name: 'Adoption Monitoring',
    description:
      'Usage data, adoption signals, and performance indicators are collected and validated in real time.',
    outputs: ['Usage dashboards', 'Anomaly alerts', 'Trend reports'],
    sections: ['command-center'],
  },
  {
    id: 'kpi-tracking',
    order: 7,
    name: 'KPI Tracking & Value Measurement',
    description:
      'KPIs are tracked against targets. Business value — hours saved, cost reduction, productivity uplift — is quantified.',
    outputs: ['KPI scorecards', 'Value realisation tracker', 'ROI estimates'],
    sections: ['command-center', 'adoption-office'],
  },
  {
    id: 'reporting',
    order: 8,
    name: 'Executive Reporting',
    description:
      'Strategic insights and performance data are packaged into executive-ready reports and command center displays.',
    outputs: ['Executive dashboard', 'Leadership briefing packs', 'Command center displays'],
    sections: ['command-center'],
  },
  {
    id: 'improvement',
    order: 9,
    name: 'Continuous Improvement',
    description:
      'Insights feed back into strategy, operating model updates, and the next intake cycle.',
    outputs: ['Operating model updates', 'Strategy adjustments', 'Next cycle priorities'],
    sections: ['adoption-office', 'ai-acceleration', 'command-center'],
  },
]
```

---

# FILE: content/roadmap.ts

```typescript
export type RoadmapPhase = 'now' | 'next' | 'future'
export type RoadmapTheme =
  | 'governance'
  | 'capability'
  | 'partnerships'
  | 'command-center'
  | 'analytics'
  | 'value-tracking'
  | 'champions'
  | 'strategy'

export interface RoadmapItem {
  id: string
  phase: RoadmapPhase
  theme: RoadmapTheme
  title: string
  description: string
  owner: string