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
1500	  status: 'in-progress' | 'planned' | 'completed'
1501	  priority: 'high' | 'medium' | 'low'
1502	}
1503
1504	export const roadmapItems: RoadmapItem[] = [
1505	  // NOW
1506	  {
1507	    id: 'r1',
1508	    phase: 'now',
1509	    theme: 'governance',
1510	    title: 'Governance Framework v1 Activation',
1511	    description: 'Activate the formal AI Adoption governance model including review forums, approval pathways, and reporting cadences.',
1512	    owner: 'adoption-office',
1513	    status: 'in-progress',
1514	    priority: 'high',
1515	  },
1516	  {
1517	    id: 'r2',
1518	    phase: 'now',
1519	    theme: 'command-center',
1520	    title: 'Executive AI Dashboard — Phase 1',
1521	    description: 'Launch the first version of the AI Adoption executive dashboard covering top KPIs, adoption trends, and use case pipeline.',
1522	    owner: 'command-center',
1523	    status: 'in-progress',
1524	    priority: 'high',
1525	  },
1526	  {
1527	    id: 'r3',
1528	    phase: 'now',
1529	    theme: 'champions',
1530	    title: 'AI Champions Network Expansion',
1531	    description: 'Grow the AI Champions network to 120 active champions across all 12 DEWA divisions.',
1532	    owner: 'adoption-office',
1533	    status: 'in-progress',
1534	    priority: 'high',
1535	  },
1536	  {
1537	    id: 'r4',
1538	    phase: 'now',
1539	    theme: 'capability',
1540	    title: 'AI Academy — Cohort 2 Launch',
1541	    description: 'Launch the second AI Academy cohort targeting 400 additional employees across Engineering and Operations.',
1542	    owner: 'ai-acceleration',
1543	    status: 'in-progress',
1544	    priority: 'high',
1545	  },
1546	  // NEXT
1547	  {
1548	    id: 'r5',
1549	    phase: 'next',
1550	    theme: 'analytics',
1551	    title: 'Adoption Analytics — Advanced Insights',
1552	    description: 'Build advanced analytics layer with cohort analysis, drop-off detection, and division-level benchmarking.',
1553	    owner: 'command-center',
1554	    status: 'planned',
1555	    priority: 'high',
1556	  },
1557	  {
1558	    id: 'r6',
1559	    phase: 'next',
1560	    theme: 'value-tracking',
1561	    title: 'Business Value Tracking Model',
1562	    description: 'Deploy a structured methodology for quantifying and reporting AI-driven cost savings, productivity gains, and process improvements.',
1563	    owner: 'adoption-office',
1564	    status: 'planned',
1565	    priority: 'high',
1566	  },
1567	  {
1568	    id: 'r7',
1569	    phase: 'next',
1570	    theme: 'partnerships',
1571	    title: 'Strategic AI Partner Ecosystem Expansion',
1572	    description: 'Formalise partnerships with 3 additional strategic AI technology providers to expand enterprise tool access.',
1573	    owner: 'ai-acceleration',
1574	    status: 'planned',
1575	    priority: 'medium',
1576	  },
1577	  {
1578	    id: 'r8',
1579	    phase: 'next',
1580	    theme: 'command-center',
1581	    title: 'Physical Command Center Design',
1582	    description: 'Design and plan the physical AI Command Center space for leadership briefings, showcase events, and live adoption monitoring.',
1583	    owner: 'command-center',
1584	    status: 'planned',
1585	    priority: 'medium',
1586	  },
1587	  // FUTURE
1588	  {
1589	    id: 'r9',
1590	    phase: 'future',
1591	    theme: 'command-center',
1592	    title: 'Physical AI Command Center Launch',
1593	    description: 'Open the permanent physical AI Command Center as an executive showcase and live operations hub.',
1594	    owner: 'command-center',
1595	    status: 'planned',
1596	    priority: 'high',
1597	  },
1598	  {
1599	    id: 'r10',
1600	    phase: 'future',
1601	    theme: 'governance',
1602	    title: 'AI Governance Maturity Level 3',
1603	    description: 'Advance governance maturity to include automated compliance monitoring, AI ethics review boards, and enterprise AI policy.',
1604	    owner: 'adoption-office',
1605	    status: 'planned',
1606	    priority: 'high',
1607	  },
1608	  {
1609	    id: 'r11',
1610	    phase: 'future',
1611	    theme: 'capability',
1612	    title: 'AI Centre of Excellence',
1613	    description: 'Evolve the AI Academy into a permanent Centre of Excellence providing continuous learning, certifications, and advanced tracks.',
1614	    owner: 'ai-acceleration',
1615	    status: 'planned',
1616	    priority: 'medium',
1617	  },
1618	  {
1619	    id: 'r12',
1620	    phase: 'future',
1621	    theme: 'strategy',
1622	    title: 'Enterprise AI Adoption Index',
1623	    description: 'Publish an annual DEWA AI Adoption Index benchmarking enterprise adoption against regional and global energy sector peers.',
1624	    owner: 'command-center',
1625	    status: 'planned',
1626	    priority: 'low',
1627	  },
1628	]
1629	```
1630
1631	---
1632
1633	# FILE: content/risks.ts
1634
1635	```typescript
1636	export type RiskSeverity = 'high' | 'medium' | 'low'
1637	export type RiskCategory =
1638	  | 'adoption'
1639	  | 'governance'
1640	  | 'data'
1641	  | 'change-management'
1642	  | 'technology'
1643	  | 'dependencies'
1644
1645	export interface Risk {
1646	  id: string
1647	  category: RiskCategory
1648	  title: string
1649	  description: string
1650	  severity: RiskSeverity
1651	  likelihood: RiskSeverity
1652	  owner: string
1653	  mitigations: string[]
1654	  dependencies: string[]
1655	  status: 'open' | 'mitigated' | 'monitoring'
1656	}
1657
1658	export const risks: Risk[] = [
1659	  {
1660	    id: 'risk-1',
1661	    category: 'adoption',
1662	    title: 'Low Divisional Adoption Velocity',
1663	    description:
1664	      'Some divisions may resist or deprioritise AI adoption due to workload pressures, unclear mandates, or limited local champions.',
1665	    severity: 'high',
1666	    likelihood: 'medium',
1667	    owner: 'AI Adoption Office',
1668	    mitigations: [
1669	      'Activate division-level AI Champions to drive peer adoption',
1670	      'Escalate low-adoption divisions to Department Head for leadership intervention',
1671	      'Provide targeted divisional enablement support through AI Acceleration',
1672	    ],
1673	    dependencies: ['Divisional Director engagement', 'AI Champions activation rate'],
1674	    status: 'monitoring',
1675	  },
1676	  {
1677	    id: 'risk-2',
1678	    category: 'governance',
1679	    title: 'Governance Action Backlog',
1680	    description:
1681	      'Governance review forums may accumulate unresolved actions if participation is inconsistent or capacity is constrained.',
1682	    severity: 'medium',
1683	    likelihood: 'medium',
1684	    owner: 'AI Adoption Office',
1685	    mitigations: [
1686	      'Enforce bi-weekly governance forum attendance with named deputies',
1687	      'Track open actions in the Command Center dashboard with RAG status',
1688	      'Escalate overdue actions to Department Head monthly',
1689	    ],
1690	    dependencies: ['Governance forum participation', 'Command Center reporting accuracy'],
1691	    status: 'open',
1692	  },
1693	  {
1694	    id: 'risk-3',
1695	    category: 'data',
1696	    title: 'Adoption Data Quality Gaps',
1697	    description:
1698	      'Inconsistent or incomplete usage data from AI tools may reduce confidence in KPI reporting and executive dashboards.',
1699	    severity: 'high',
1700	    likelihood: 'medium',
1701	    owner: 'AI Command Center',
1702	    mitigations: [
1703	      'Establish data quality validation process before each reporting cycle',
1704	      'Work with IT to standardise usage data exports from all AI platforms',
1705	      'Flag data gaps visibly in dashboards rather than suppressing incomplete data',
1706	    ],
1707	    dependencies: ['IT platform data exports', 'Vendor API access'],
1708	    status: 'monitoring',
1709	  },
1710	  {
1711	    id: 'risk-4',
1712	    category: 'change-management',
1713	    title: 'Employee Resistance to AI Adoption',
1714	    description:
1715	      'Employees may be concerned about AI replacing roles, creating hesitance to engage with tools or programs.',
1716	    severity: 'high',
1717	    likelihood: 'medium',
1718	    owner: 'AI Acceleration',
1719	    mitigations: [
1720	      'Lead communications with productivity and empowerment narratives, not automation narratives',
1721	      'Engage HR and Communications in messaging strategy',
1722	      'Feature employee success stories prominently in campaigns',
1723	    ],
1724	    dependencies: ['HR communications alignment', 'Leadership tone-setting'],
1725	    status: 'monitoring',
1726	  },
1727	  {
1728	    id: 'risk-5',
1729	    category: 'technology',
1730	    title: 'AI Tool Security or Compliance Issue',
1731	    description:
1732	      'A deployed AI tool may have a security vulnerability, data handling issue, or compliance breach that requires rapid containment.',
1733	    severity: 'high',
1734	    likelihood: 'low',
1735	    owner: 'AI Adoption Office + IT Governance',
1736	    mitigations: [
1737	      'All tools must pass security review before enterprise access is granted',
1738	      'Maintain rapid response protocol for tool suspension if needed',
1739	      'Monitor vendor security advisories continuously',
1740	    ],
1741	    dependencies: ['IT Governance review process', 'Vendor security disclosures'],
1742	    status: 'open',
1743	  },
1744	  {
1745	    id: 'risk-6',
1746	    category: 'dependencies',
1747	    title: 'Cross-Divisional Alignment Delays',
1748	    description:
1749	      'Slow response from divisional stakeholders may delay use case approvals, training deployment, or governance actions.',
1750	    severity: 'medium',
1751	    likelihood: 'high',
1752	    owner: 'AI Adoption Office',
1753	    mitigations: [
1754	      'Maintain a named engagement contact in each division',
1755	      'Escalate alignment gaps to EVP level if unresolved after 2 cycles',
1756	      'Build flexibility into program timelines to absorb divisional delays',
1757	    ],
1758	    dependencies: ['Divisional Director availability', 'Cross-divisional governance mandate'],
1759	    status: 'open',
1760	  },
1761	]
1762	```
1763
1764	---
1765
1766	> **All files above are ready to push to Claude Code.**
1767	> Once loaded, run the build sequence in `Agent.md` Phase 1 → Phase 2 → Phase 3.
1768	> Start Claude Code with: *"Read README.md, Design.md, and Agent.md first, then begin Phase 1 of the build sequence."*
1769
[result-id: r5]

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
  status: 'in-progress' | 'planned' | 'completed'
  priority: 'high' | 'medium' | 'low'
}

export const roadmapItems: RoadmapItem[] = [
  // NOW
  {
    id: 'r1',
    phase: 'now',
    theme: 'governance',
    title: 'Governance Framework v1 Activation',
    description: 'Activate the formal AI Adoption governance model including review forums, approval pathways, and reporting cadences.',
    owner: 'adoption-office',
    status: 'in-progress',
    priority: 'high',
  },
  {
    id: 'r2',
    phase: 'now',
    theme: 'command-center',
    title: 'Executive AI Dashboard — Phase 1',
    description: 'Launch the first version of the AI Adoption executive dashboard covering top KPIs, adoption trends, and use case pipeline.',
    owner: 'command-center',
    status: 'in-progress',
    priority: 'high',
  },
  {
    id: 'r3',
    phase: 'now',
    theme: 'champions',
    title: 'AI Champions Network Expansion',
    description: 'Grow the AI Champions network to 120 active champions across all 12 DEWA divisions.',
    owner: 'adoption-office',
    status: 'in-progress',
    priority: 'high',
  },
  {
    id: 'r4',
    phase: 'now',
    theme: 'capability',
    title: 'AI Academy — Cohort 2 Launch',
    description: 'Launch the second AI Academy cohort targeting 400 additional employees across Engineering and Operations.',
    owner: 'ai-acceleration',
    status: 'in-progress',
    priority: 'high',
  },
  // NEXT
  {
    id: 'r5',
    phase: 'next',
    theme: 'analytics',
    title: 'Adoption Analytics — Advanced Insights',
    description: 'Build advanced analytics layer with cohort analysis, drop-off detection, and division-level benchmarking.',
    owner: 'command-center',
    status: 'planned',
    priority: 'high',
  },
  {
    id: 'r6',
    phase: 'next',
    theme: 'value-tracking',
    title: 'Business Value Tracking Model',
    description: 'Deploy a structured methodology for quantifying and reporting AI-driven cost savings, productivity gains, and process improvements.',
    owner: 'adoption-office',
    status: 'planned',
    priority: 'high',
  },
  {
    id: 'r7',
    phase: 'next',
    theme: 'partnerships',
    title: 'Strategic AI Partner Ecosystem Expansion',
    description: 'Formalise partnerships with 3 additional strategic AI technology providers to expand enterprise tool access.',
    owner: 'ai-acceleration',
    status: 'planned',
    priority: 'medium',
  },
  {
    id: 'r8',
    phase: 'next',
    theme: 'command-center',
    title: 'Physical Command Center Design',
    description: 'Design and plan the physical AI Command Center space for leadership briefings, showcase events, and live adoption monitoring.',
    owner: 'command-center',
    status: 'planned',
    priority: 'medium',
  },
  // FUTURE
  {
    id: 'r9',
    phase: 'future',
    theme: 'command-center',
    title: 'Physical AI Command Center Launch',
    description: 'Open the permanent physical AI Command Center as an executive showcase and live operations hub.',
    owner: 'command-center',
    status: 'planned',
    priority: 'high',
  },
  {
    id: 'r10',
    phase: 'future',
    theme: 'governance',
    title: 'AI Governance Maturity Level 3',
    description: 'Advance governance maturity to include automated compliance monitoring, AI ethics review boards, and enterprise AI policy.',
    owner: 'adoption-office',
    status: 'planned',
    priority: 'high',
  },
  {
    id: 'r11',
    phase: 'future',
    theme: 'capability',
    title: 'AI Centre of Excellence',
    description: 'Evolve the AI Academy into a permanent Centre of Excellence providing continuous learning, certifications, and advanced tracks.',
    owner: 'ai-acceleration',
    status: 'planned',
    priority: 'medium',
  },
  {
    id: 'r12',
    phase: 'future',
    theme: 'strategy',
    title: 'Enterprise AI Adoption Index',
    description: 'Publish an annual DEWA AI Adoption Index benchmarking enterprise adoption against regional and global energy sector peers.',
    owner: 'command-center',
    status: 'planned',
    priority: 'low',
  },
]
```

---

# FILE: content/risks.ts

```typescript
export type RiskSeverity = 'high' | 'medium' | 'low'
export type RiskCategory =
  | 'adoption'
  | 'governance'
  | 'data'
  | 'change-management'
  | 'technology'
  | 'dependencies'

export interface Risk {
  id: string
  category: RiskCategory
  title: string
  description: string
  severity: RiskSeverity
  likelihood: RiskSeverity
  owner: string
  mitigations: string[]
  dependencies: string[]
  status: 'open' | 'mitigated' | 'monitoring'
}

export const risks: Risk[] = [
  {
    id: 'risk-1',
    category: 'adoption',
    title: 'Low Divisional Adoption Velocity',
    description:
      'Some divisions may resist or deprioritise AI adoption due to workload pressures, unclear mandates, or limited local champions.',
    severity: 'high',
    likelihood: 'medium',
    owner: 'AI Adoption Office',
    mitigations: [
      'Activate division-level AI Champions to drive peer adoption',
      'Escalate low-adoption divisions to Department Head for leadership intervention',
      'Provide targeted divisional enablement support through AI Acceleration',
    ],
    dependencies: ['Divisional Director engagement', 'AI Champions activation rate'],
    status: 'monitoring',
  },
  {
    id: 'risk-2',
    category: 'governance',
    title: 'Governance Action Backlog',
    description:
      'Governance review forums may accumulate unresolved actions if participation is inconsistent or capacity is constrained.',
    severity: 'medium',
    likelihood: 'medium',
    owner: 'AI Adoption Office',
    mitigations: [
      'Enforce bi-weekly governance forum attendance with named deputies',
      'Track open actions in the Command Center dashboard with RAG status',
      'Escalate overdue actions to Department Head monthly',
    ],
    dependencies: ['Governance forum participation', 'Command Center reporting accuracy'],
    status: 'open',
  },
  {
    id: 'risk-3',
    category: 'data',
    title: 'Adoption Data Quality Gaps',
    description:
      'Inconsistent or incomplete usage data from AI tools may reduce confidence in KPI reporting and executive dashboards.',
    severity: 'high',
    likelihood: 'medium',
    owner: 'AI Command Center',
    mitigations: [
      'Establish data quality validation process before each reporting cycle',
      'Work with IT to standardise usage data exports from all AI platforms',
      'Flag data gaps visibly in dashboards rather than suppressing incomplete data',
    ],
    dependencies: ['IT platform data exports', 'Vendor API access'],
    status: 'monitoring',
  },
  {
    id: 'risk-4',
    category: 'change-management',
    title: 'Employee Resistance to AI Adoption',
    description:
      'Employees may be concerned about AI replacing roles, creating hesitance to engage with tools or programs.',
    severity: 'high',
    likelihood: 'medium',
    owner: 'AI Acceleration',
    mitigations: [
      'Lead communications with productivity and empowerment narratives, not automation narratives',
      'Engage HR and Communications in messaging strategy',
      'Feature employee success stories prominently in campaigns',
    ],
    dependencies: ['HR communications alignment', 'Leadership tone-setting'],
    status: 'monitoring',
  },
  {
    id: 'risk-5',
    category: 'technology',
    title: 'AI Tool Security or Compliance Issue',
    description:
      'A deployed AI tool may have a security vulnerability, data handling issue, or compliance breach that requires rapid containment.',
    severity: 'high',
    likelihood: 'low',
    owner: 'AI Adoption Office + IT Governance',
    mitigations: [
      'All tools must pass security review before enterprise access is granted',
      'Maintain rapid response protocol for tool suspension if needed',
      'Monitor vendor security advisories continuously',
    ],
    dependencies: ['IT Governance review process', 'Vendor security disclosures'],
    status: 'open',
  },
  {
    id: 'risk-6',
    category: 'dependencies',
    title: 'Cross-Divisional Alignment Delays',
    description:
      'Slow response from divisional stakeholders may delay use case approvals, training deployment, or governance actions.',
    severity: 'medium',
    likelihood: 'high',
    owner: 'AI Adoption Office',
    mitigations: [
      'Maintain a named engagement contact in each division',
      'Escalate alignment gaps to EVP level if unresolved after 2 cycles',
      'Build flexibility into program timelines to absorb divisional delays',
    ],
    dependencies: ['Divisional Director availability', 'Cross-divisional governance mandate'],
    status: 'open',
  },
]
```

---

> **All files above are ready to push to Claude Code.**
> Once loaded, run the build sequence in `Agent.md` Phase 1 → Phase 2 → Phase 3.
> Start Claude Code with: *"Read README.md, Design.md, and Agent.md first, then begin Phase 1 of the build sequence."*


Now I'll copy the full content into `CLAUDE_CODE_BUNDLE.md` in your project root (`/Users/khalidbinkalban`).


Bash

wc -l "/Users/khalidbinkalban/Desktop/My Workstation/dewa_full_spec.md"

Count lines in spec file


    1768 /Users/khalidbinkalban/Desktop/My Workstation/dewa_full_spec.md
[rerun: b1]


cp "/Users/khalidbinkalban/Desktop/My Workstation/dewa_full_spec.md" "/Users/khalidbinkalban/CLAUDE_CODE_BUNDLE.md"

Copy spec file to project root as CLAUDE_CODE_BUNDLE.md


[rerun: b2]


Verify file was created


-rw-r--r--@ 1 khalidbinkalban  staff    53K Apr  7 18:25 /Users/khalidbinkalban/CLAUDE_CODE_BUNDLE.md
[rerun: b3]


Done. `CLAUDE_CODE_BUNDLE.md` (53KB, 1768 lines) is now at `/Users/khalidbinkalban/CLAUDE_CODE_BUNDLE.md`.

It contains all three spec files (`README.md`, `Design.md`, `Agent.md`) plus all 7 content TypeScript files (`department.ts`, `sections.ts`, `kpis.ts`, `governance.ts`, `operating-model.ts`, `roadmap.ts`, `risks.ts`).

To kick off the build, open a new Claude Code session in your project directory and run:

```
Read README.md, Design.md, and Agent.md in this project, then begin Phase 1 of the build sequence.
```

If you haven't created the project folder yet, start with:

```bash
npx create-next-app@14 dewa-ai-adoption --typescript --tailwind --app --no-src-dir
cd dewa-ai-adoption
# copy CLAUDE_CODE_BUNDLE.md here, then open Claude Code
```


PLAYER_NAME=Khalid Bin Kalban python3 ~/.claude/push_stats.py

Failed with non-blocking status code: /bin/sh: Bin: command not found


cd ~/Desktop/My\ Workstation
npx create-next-app@14 dewa-ai-adoption --typescript --tailwind --app
cd dewa-ai-adoption


ls "/Users/khalidbinkalban/Desktop/My Workstation/dewa-ai-adoption" 2>/dev/null && echo "EXISTS" || echo "NOT FOUND"

Check if dewa-ai-adoption project was created


NOT FOUND
[rerun: b4]


The project doesn't exist yet — it looks like those commands haven't been run. You'll need to run them yourself in your terminal (Claude Code can't execute interactive CLI commands like `create-next-app` that require prompts).

Here's what to run:

```bash
cd ~/Desktop/My\ Workstation
npx create-next-app@14 dewa-ai-adoption --typescript --tailwind --app
```

When prompted, answer:
| Prompt | Answer |
|---|---|
| Would you like to use ESLint? | Yes |
| Would you like to use `src/` directory? | Yes |
| Would you like to customize the import alias? | Yes → keep `@/*` |

Then:

```bash
cd dewa-ai-adoption
cp ~/CLAUDE_CODE_BUNDLE.md .
```

Once done, type `! pwd` in this prompt to confirm your working directory, and I'll take it from there — installing shadcn/ui, framer-motion, recharts, and starting Phase 1 of the build sequence.


cp ~/CLAUDE_CODE_BUNDLE.md .


ls "/Users/khalidbinkalban/Desktop/My Workstation/dewa-ai-adoption/" 2>/dev/null || echo "NOT FOUND"

Check project directory


NOT FOUND
[rerun: b5]


The project directory still doesn't exist — it seems `create-next-app` hasn't been run yet. The `cp` command would have failed silently if the destination didn't exist.

Please run these commands in your terminal first:

```bash
cd ~/Desktop/My\ Workstation
npx create-next-app@14 dewa-ai-adoption --typescript --tailwind --app
```

Answer the prompts, then:

```bash
cd dewa-ai-adoption
cp ~/CLAUDE_CODE_BUNDLE.md .
```

Once it's set up, type `! ls` here and I'll verify and start building.


Begin Phase 3 polish from Agent.md.

Work through every item in this exact order and confirm each one before moving to the next:

1. Add Framer Motion entrance animations to every section using
   the sectionReveal and staggerContainer presets from tokens.ts

2. Add count-up animation to all KPI number values in KpiStrip
   and KpiCockpit

3. Add card hover states (y: -3 lift + shadow-raised) to all
   cards across every section

4. Responsive pass — verify layout at 768px and 640px, fix any
   overflow or broken grids

5. Typography and spacing final pass — check eyebrows, hierarchy,
   and padding consistency against Design.md

6. Run a Lighthouse check and report the scores

Confirm each item as you complete it before moving to the next.


ls "/Users/khalidbinkalban/Desktop/My Workstation/dewa-ai-adoption/" 2>/dev/null || echo "NOT FOUND"

Check project directory exists


Agent.md
CLAUDE_CODE_BUNDLE.md
components.json
content
Design.md
next-env.d.ts
next.config.mjs
node_modules
package-lock.json
package.json
postcss.config.mjs
public
README.md
src
tailwind.config.ts
tsconfig.json
tsconfig.tsbuildinfo
[rerun: b6]


Project exists. Let me read the current state of all relevant files before touching anything.


find "/Users/khalidbinkalban/Desktop/My Workstation/dewa-ai-adoption/src" -type f | sort

List all source files


Check installed dependencies


/Users/khalidbinkalban/Desktop/My Workstation/dewa-ai-adoption/src/app/favicon.ico
/Users/khalidbinkalban/Desktop/My Workstation/dewa-ai-adoption/src/app/fonts/GeistMonoVF.woff
/Users/khalidbinkalban/Desktop/My Workstation/dewa-ai-adoption/src/app/fonts/GeistVF.woff
/Users/khalidbinkalban/Desktop/My Workstation/dewa-ai-adoption/src/app/globals.css
/Users/khalidbinkalban/Desktop/My Workstation/dewa-ai-adoption/src/app/layout.tsx
/Users/khalidbinkalban/Desktop/My Workstation/dewa-ai-adoption/src/app/page.tsx
/Users/khalidbinkalban/Desktop/My Workstation/dewa-ai-adoption/src/components/governance/DecisionLayer.tsx
/Users/khalidbinkalban/Desktop/My Workstation/dewa-ai-adoption/src/components/governance/GovernanceMap.tsx
/Users/khalidbinkalban/Desktop/My Workstation/dewa-ai-adoption/src/components/governance/PrincipleCard.tsx
/Users/khalidbinkalban/Desktop/My Workstation/dewa-ai-adoption/src/components/impact/StrategicImpact.tsx
/Users/khalidbinkalban/Desktop/My Workstation/dewa-ai-adoption/src/components/kpis/KpiCard.tsx
/Users/khalidbinkalban/Desktop/My Workstation/dewa-ai-adoption/src/components/kpis/KpiCockpit.tsx
/Users/khalidbinkalban/Desktop/My Workstation/dewa-ai-adoption/src/components/kpis/KpiTargetBar.tsx
/Users/khalidbinkalban/Desktop/My Workstation/dewa-ai-adoption/src/components/layout/SectionWrapper.tsx
/Users/khalidbinkalban/Desktop/My Workstation/dewa-ai-adoption/src/components/layout/SiteNav.tsx
/Users/khalidbinkalban/Desktop/My Workstation/dewa-ai-adoption/src/components/operating-model/FlowStage.tsx
/Users/khalidbinkalban/Desktop/My Workstation/dewa-ai-adoption/src/components/operating-model/OperatingFlow.tsx
/Users/khalidbinkalban/Desktop/My Workstation/dewa-ai-adoption/src/components/overview/HeroBanner.tsx
/Users/khalidbinkalban/Desktop/My Workstation/dewa-ai-adoption/src/components/overview/KpiStrip.tsx
/Users/khalidbinkalban/Desktop/My Workstation/dewa-ai-adoption/src/components/overview/MissionStatement.tsx
/Users/khalidbinkalban/Desktop/My Workstation/dewa-ai-adoption/src/components/overview/ValuePillars.tsx
/Users/khalidbinkalban/Desktop/My Workstation/dewa-ai-adoption/src/components/responsibilities/ResponsibilityPanel.tsx
/Users/khalidbinkalban/Desktop/My Workstation/dewa-ai-adoption/src/components/risks/RiskCard.tsx
/Users/khalidbinkalban/Desktop/My Workstation/dewa-ai-adoption/src/components/risks/RiskRegister.tsx
/Users/khalidbinkalban/Desktop/My Workstation/dewa-ai-adoption/src/components/roadmap/RoadmapView.tsx
/Users/khalidbinkalban/Desktop/My Workstation/dewa-ai-adoption/src/components/structure/DepartmentMap.tsx
/Users/khalidbinkalban/Desktop/My Workstation/dewa-ai-adoption/src/components/structure/SectionCard.tsx
/Users/khalidbinkalban/Desktop/My Workstation/dewa-ai-adoption/src/components/ui/button.tsx
/Users/khalidbinkalban/Desktop/My Workstation/dewa-ai-adoption/src/hooks/useActiveSection.ts
/Users/khalidbinkalban/Desktop/My Workstation/dewa-ai-adoption/src/lib/tokens.ts
/Users/khalidbinkalban/Desktop/My Workstation/dewa-ai-adoption/src/lib/utils.ts
[result-id: r6]
[rerun: b7]


{
  "name": "dewa-ai-adoption",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  },
  "dependencies": {
    "@base-ui/react": "^1.3.0",
    "class-variance-authority": "^0.7.1",
    "clsx": "^2.1.1",
    "framer-motion": "^12.38.0",
    "lucide-react": "^1.7.0",
    "next": "14.2.35",
    "react": "^18",
    "react-dom": "^18",
    "recharts": "^3.8.1",
    "shadcn": "^4.1.2",
    "tailwind-merge": "^3.5.0",
    "tw-animate-css": "^1.4.0"
  },
  "devDependencies": {
    "@types/node": "^20",
    "@types/react": "^18",
    "@types/react-dom": "^18",
    "eslint": "^8",
    "eslint-config-next": "14.2.35",
    "postcss": "^8",
    "tailwindcss": "^3.4.1",
    "typescript": "^5"
  }
}
[result-id: r7]
[rerun: b8]


1	export const tokens = {
2	  colors: {
3	    bg: '#070D1A',
4	    surface: '#0D1627',
5	    surfaceRaised: '#132035',
6	    surfaceBorder: '#1E3A5F',
7	    primary: '#0066FF',
8	    primaryDim: '#0044BB',
9	    accent: '#00C2FF',
10	    gold: '#F0A500',
11	    goldDim: '#C98800',
12	    success: '#22C55E',
13	    warning: '#F59E0B',
14	    danger: '#EF4444',
15	    info: '#38BDF8',
16	    text: '#EEF2FF',
17	    textSecondary: '#8BAFD4',
18	    textDim: '#4A6B8A',
19	  },
20	  section: {
21	    'adoption-office': '#0066FF',
22	    'ai-acceleration': '#00C2FF',
23	    'command-center': '#F0A500',
24	  },
25	} as const
26
27	export const animation = {
28	  sectionReveal: {
29	    initial: { opacity: 0, y: 24 },
30	    animate: { opacity: 1, y: 0 },
31	    transition: { duration: 0.45, ease: [0.22, 1, 0.36, 1] as [number, number, number, number] },
32	  },
33	  cardHover: {
34	    whileHover: { y: -3, transition: { duration: 0.2 } },
35	  },
36	  staggerContainer: {
37	    animate: { transition: { staggerChildren: 0.07 } },
38	  },
39	} as const
40
41	export const navLinks = [
42	  { label: 'Overview', href: '#overview' },
43	  { label: 'Structure', href: '#structure' },
44	  { label: 'Responsibilities', href: '#responsibilities' },
45	  { label: 'KPIs', href: '#kpis' },
46	  { label: 'Governance', href: '#governance' },
47	  { label: 'Operating Model', href: '#operating-model' },
48	  { label: 'Roadmap', href: '#roadmap' },
49	  { label: 'Risks', href: '#risks' },
50	  { label: 'Impact', href: '#impact' },
51	] as const
52
[result-id: r8]

export const tokens = {
  colors: {
    bg: '#070D1A',
    surface: '#0D1627',
    surfaceRaised: '#132035',
    surfaceBorder: '#1E3A5F',
    primary: '#0066FF',
    primaryDim: '#0044BB',
    accent: '#00C2FF',
    gold: '#F0A500',
    goldDim: '#C98800',
    success: '#22C55E',
    warning: '#F59E0B',
    danger: '#EF4444',
    info: '#38BDF8',
    text: '#EEF2FF',
    textSecondary: '#8BAFD4',
    textDim: '#4A6B8A',
  },
  section: {
    'adoption-office': '#0066FF',
    'ai-acceleration': '#00C2FF',
    'command-center': '#F0A500',
  },
} as const

export const animation = {
  sectionReveal: {
    initial: { opacity: 0, y: 24 },
    animate: { opacity: 1, y: 0 },
    transition: { duration: 0.45, ease: [0.22, 1, 0.36, 1] as [number, number, number, number] },
  },
  cardHover: {
    whileHover: { y: -3, transition: { duration: 0.2 } },
  },
  staggerContainer: {
    animate: { transition: { staggerChildren: 0.07 } },
  },
} as const

export const navLinks = [
  { label: 'Overview', href: '#overview' },
  { label: 'Structure', href: '#structure' },
  { label: 'Responsibilities', href: '#responsibilities' },
  { label: 'KPIs', href: '#kpis' },
  { label: 'Governance', href: '#governance' },
  { label: 'Operating Model', href: '#operating-model' },
  { label: 'Roadmap', href: '#roadmap' },
  { label: 'Risks', href: '#risks' },
  { label: 'Impact', href: '#impact' },
] as const


1	'use client'
2
3	import { useRef } from 'react'
4	import { motion, useInView } from 'framer-motion'
5
6	interface SectionWrapperProps {
7	  id: string
8	  children: React.ReactNode
9	  className?: string
10	}
11
12	export default function SectionWrapper({ id, children, className = '' }: SectionWrapperProps) {
13	  const ref = useRef<HTMLElement>(null)
14	  const isInView = useInView(ref, { once: true, margin: '-10% 0px' })
15
16	  return (
17	    <section
18	      id={id}
19	      ref={ref}
20	      className={`py-20 ${className}`}
21	    >
22	      <motion.div
23	        initial={{ opacity: 0, y: 24 }}
24	        animate={isInView ? { opacity: 1, y: 0 } : { opacity: 0, y: 24 }}
25	        transition={{ duration: 0.45, ease: [0.22, 1, 0.36, 1] }}
26	        className="mx-auto max-w-content px-6"
27	      >
28	        {children}
29	      </motion.div>
30	    </section>
31	  )
32	}
33
[result-id: r9]

'use client'

import { useRef } from 'react'
import { motion, useInView } from 'framer-motion'

interface SectionWrapperProps {
  id: string
  children: React.ReactNode
  className?: string
}

export default function SectionWrapper({ id, children, className = '' }: SectionWrapperProps) {
  const ref = useRef<HTMLElement>(null)
  const isInView = useInView(ref, { once: true, margin: '-10% 0px' })

  return (
    <section
      id={id}
      ref={ref}
      className={`py-20 ${className}`}
    >
      <motion.div
        initial={{ opacity: 0, y: 24 }}
        animate={isInView ? { opacity: 1, y: 0 } : { opacity: 0, y: 24 }}
        transition={{ duration: 0.45, ease: [0.22, 1, 0.36, 1] }}
        className="mx-auto max-w-content px-6"
      >
        {children}
      </motion.div>
    </section>
  )
}


1	import { department } from '@/content/department'
2	import { type TopMetric } from '@/content/department'
3
4	function MetricCard({ metric }: { metric: TopMetric }) {
5	  return (
6

7

8	        {metric.label}
9

10	      <p className={`text-2xl font-bold ${metric.emphasis ? 'text-gold' : 'text-text'}`}>
11	        {metric.value}
12	        {metric.unit && (
13	          {metric.unit}
14	        )}
15

16
{metric.trend}

17

18	  )
19	}
20
21	export default function KpiStrip() {
22	  return (
23

24

25	        {department.topMetrics.map((metric) => (
26	          <MetricCard key={metric.id} metric={metric} />
27	        ))}
28

29

30	  )
31	}
32
[result-id: r10]

import { department } from '@/content/department'
import { type TopMetric } from '@/content/department'

function MetricCard({ metric }: { metric: TopMetric }) {
  return (

        {metric.label}

      <p className={`text-2xl font-bold ${metric.emphasis ? 'text-gold' : 'text-text'}`}>
        {metric.value}
        {metric.unit && (
          {metric.unit}
        )}

{metric.trend}

  )
}

export default function KpiStrip() {
  return (

        {department.topMetrics.map((metric) => (
          <MetricCard key={metric.id} metric={metric} />
        ))}

  )
}


1	'use client'
2
3	import { useState } from 'react'
4	import { kpis, type KpiTier } from '@/content/kpis'
5	import KpiCard from './KpiCard'
6
7	type FilterTab = 'All' | KpiTier
8
9	const tabs: FilterTab[] = ['All', 'P1', 'P2']
10
11	export default function KpiCockpit() {
12	  const [activeTab, setActiveTab] = useState<FilterTab>('All')
13
14	  const filtered = activeTab === 'All' ? kpis : kpis.filter((k) => k.tier === activeTab)
15
16	  return (
17

18

19	        KPI Framework
20

21

22

23
Performance Visibility

24

25	          {tabs.map((tab) => (
26	            <button
27	              key={tab}
28	              onClick={() => setActiveTab(tab)}
29	              className={`px-4 py-1.5 rounded-md text-sm font-medium transition-all duration-150 ${
30	                activeTab === tab
31	                  ? 'bg-primary text-white shadow-glow-blue'
32	                  : 'text-text-secondary hover:text-text'
33	              }`}
34	            >
35	              {tab}
36	            </button>
37	          ))}
38

39

40
41

42	        {filtered.map((kpi) => (
43	          <KpiCard key={kpi.id} kpi={kpi} />
44	        ))}
45

46

47	  )
48	}
49
[result-id: r11]

'use client'

import { useState } from 'react'
import { kpis, type KpiTier } from '@/content/kpis'
import KpiCard from './KpiCard'

type FilterTab = 'All' | KpiTier

const tabs: FilterTab[] = ['All', 'P1', 'P2']

export default function KpiCockpit() {
  const [activeTab, setActiveTab] = useState<FilterTab>('All')

  const filtered = activeTab === 'All' ? kpis : kpis.filter((k) => k.tier === activeTab)

  return (

        KPI Framework

Performance Visibility

          {tabs.map((tab) => (
            <button
              key={tab}
              onClick={() => setActiveTab(tab)}
              className={`px-4 py-1.5 rounded-md text-sm font-medium transition-all duration-150 ${
                activeTab === tab
                  ? 'bg-primary text-white shadow-glow-blue'
                  : 'text-text-secondary hover:text-text'
              }`}
            >
              {tab}
            </button>
          ))}

        {filtered.map((kpi) => (
          <KpiCard key={kpi.id} kpi={kpi} />
        ))}

  )
}


1	'use client'
2
3	import { motion } from 'framer-motion'
4	import { type Kpi } from '@/content/kpis'
5	import KpiTargetBar from './KpiTargetBar'
6
7	interface KpiCardProps {
8	  kpi: Kpi
9	}
10
11	const statusStyles: Record<string, string> = {
12	  'on-track': 'bg-success/10 text-success border-success/20',
13	  'at-risk': 'bg-warning/10 text-warning border-warning/20',
14	  'critical': 'bg-danger/10 text-danger border-danger/20',
15	  'planned': 'bg-primary/10 text-primary border-primary/20',
16	}
17
18	const statusLabels: Record<string, string> = {
19	  'on-track': 'On Track',
20	  'at-risk': 'At Risk',
21	  'critical': 'Critical',
22	  'planned': 'Planned',
23	}
24
25	export default function KpiCard({ kpi }: KpiCardProps) {
26	  const badgeClass = statusStyles[kpi.status] ?? statusStyles['planned']
27
28	  return (
29	    <motion.div
30	      whileHover={{ y: -3, transition: { duration: 0.2 } }}
31	      className="bg-surface border border-surface-border rounded-xl p-5 shadow-card hover:shadow-raised hover:bg-surface-raised transition-all duration-200 flex flex-col gap-4"
32	    >
33

34

35

36	            {kpi.label}
37

38

39	        <span
40	          className={`text-xs px-2 py-0.5 rounded-full border font-medium flex-shrink-0 ${badgeClass}`}
41	        >
42	          {statusLabels[kpi.status]}
43
44

45
46

47
48	          {kpi.value}
49	          {kpi.unit && (
50	            {kpi.unit}
51	          )}
52
53

54	          Target: {kpi.target} {kpi.targetUnit}
55

56

57
58	      <KpiTargetBar progress={kpi.progress} status={kpi.status} />
59
60
{kpi.description}

61
62

63	        {kpi.trend}
64	        {kpi.cadence}
65

66	    </motion.div>
67	  )
68	}
69
[result-id: r12]

'use client'

import { motion } from 'framer-motion'
import { type Kpi } from '@/content/kpis'
import KpiTargetBar from './KpiTargetBar'

interface KpiCardProps {
  kpi: Kpi
}

const statusStyles: Record<string, string> = {
  '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',
}

const statusLabels: Record<string, string> = {
  'on-track': 'On Track',
  'at-risk': 'At Risk',
  'critical': 'Critical',
  'planned': 'Planned',
}

export default function KpiCard({ kpi }: KpiCardProps) {
  const badgeClass = statusStyles[kpi.status] ?? statusStyles['planned']

  return (
    <motion.div
      whileHover={{ y: -3, transition: { duration: 0.2 } }}
      className="bg-surface border border-surface-border rounded-xl p-5 shadow-card hover:shadow-raised hover:bg-surface-raised transition-all duration-200 flex flex-col gap-4"
    >

            {kpi.label}

        <span
          className={`text-xs px-2 py-0.5 rounded-full border font-medium flex-shrink-0 ${badgeClass}`}
        >
          {statusLabels[kpi.status]}

          {kpi.value}
          {kpi.unit && (
            {kpi.unit}
          )}

          Target: {kpi.target} {kpi.targetUnit}

      <KpiTargetBar progress={kpi.progress} status={kpi.status} />

{kpi.description}

        {kpi.trend}
        {kpi.cadence}

    </motion.div>
  )
}


1	'use client'
2
3	import { motion } from 'framer-motion'
4	import { TrendingDown, Zap, Building2, type LucideIcon } from 'lucide-react'
5	import { department } from '@/content/department'
6
7	const iconMap: Record<string, LucideIcon> = {
8	  TrendingDown,
9	  Zap,
10	  Building2,
11	}
12
13	export default function HeroBanner() {
14	  return (
15

16	      <motion.div
17	        initial={{ opacity: 0, y: 24 }}
18	        animate={{ opacity: 1, y: 0 }}
19	        transition={{ duration: 0.45, ease: [0.22, 1, 0.36, 1] }}
20	      >
21

22	          {department.tagline}
23

24

25	          {department.name}
26

27

28	          {department.mission}
29

30
31

32
33	        <motion.div
34	          className="grid grid-cols-1 sm:grid-cols-3 gap-4"
35	          initial="hidden"
36	          animate="visible"
37	          variants={{ visible: { transition: { staggerChildren: 0.07 } } }}
38	        >
39	          {department.valuePillars.map((pillar) => {
40	            const Icon = iconMap[pillar.icon]
41	            return (
42	              <motion.div
43	                key={pillar.id}
44	                variants={{
45	                  hidden: { opacity: 0, y: 24 },
46	                  visible: { opacity: 1, y: 0 },
47	                }}
48	                className="flex items-center gap-3 bg-surface border border-surface-border rounded-xl px-4 py-3 shadow-card"
49	              >
50	                {Icon && (
51

52	                    <Icon className="w-4 h-4 text-primary" />
53

54	                )}
55	                {pillar.title}
56	              </motion.div>
57	            )
58	          })}
59	        </motion.div>
60	      </motion.div>
61

62	  )
63	}
64
[result-id: r13]

'use client'

import { motion } from 'framer-motion'
import { TrendingDown, Zap, Building2, type LucideIcon } from 'lucide-react'
import { department } from '@/content/department'

const iconMap: Record<string, LucideIcon> = {
  TrendingDown,
  Zap,
  Building2,
}

export default function HeroBanner() {
  return (

      <motion.div
        initial={{ opacity: 0, y: 24 }}
        animate={{ opacity: 1, y: 0 }}
        transition={{ duration: 0.45, ease: [0.22, 1, 0.36, 1] }}
      >

          {department.tagline}

          {department.name}

          {department.mission}

        <motion.div
          className="grid grid-cols-1 sm:grid-cols-3 gap-4"
          initial="hidden"
          animate="visible"
          variants={{ visible: { transition: { staggerChildren: 0.07 } } }}
        >
          {department.valuePillars.map((pillar) => {
            const Icon = iconMap[pillar.icon]
            return (
              <motion.div
                key={pillar.id}
                variants={{
                  hidden: { opacity: 0, y: 24 },
                  visible: { opacity: 1, y: 0 },
                }}
                className="flex items-center gap-3 bg-surface border border-surface-border rounded-xl px-4 py-3 shadow-card"
              >
                {Icon && (

                    <Icon className="w-4 h-4 text-primary" />

                )}
                {pillar.title}
              </motion.div>
            )
          })}
        </motion.div>
      </motion.div>

  )
}


1	'use client'
2
3	import { motion } from 'framer-motion'
4	import { TrendingDown, Zap, Building2, type LucideIcon } from 'lucide-react'
5	import { department } from '@/content/department'
6
7	const iconMap: Record<string, LucideIcon> = {
8	  TrendingDown,
9	  Zap,
10	  Building2,
11	}
12
13	export default function ValuePillars() {
14	  return (
15

16

17	        Value Pillars
18

19

20
21	      <motion.div
22	        className="grid grid-cols-1 md:grid-cols-3 gap-6 mt-6"
23	        initial="hidden"
24	        whileInView="visible"
25	        viewport={{ once: true, margin: '-10%' }}
26	        variants={{ visible: { transition: { staggerChildren: 0.07 } } }}
27	      >
28	        {department.valuePillars.map((pillar) => {
29	          const Icon = iconMap[pillar.icon]
30	          return (
31	            <motion.div
32	              key={pillar.id}
33	              variants={{
34	                hidden: { opacity: 0, y: 24 },
35	                visible: { opacity: 1, y: 0 },
36	              }}
37	              whileHover={{ y: -3, transition: { duration: 0.2 } }}
38	              className="bg-surface border border-surface-border rounded-xl p-6 shadow-card hover:shadow-raised hover:bg-surface-raised transition-all duration-200"
39	            >
40	              {Icon && (
41

42	                  <Icon className="w-5 h-5 text-primary" />
43

44	              )}
45
{pillar.title}

46
{pillar.description}

47	            </motion.div>
48	          )
49	        })}
50	      </motion.div>
51

52	  )
53	}
54
[result-id: r14]

'use client'

import { motion } from 'framer-motion'
import { TrendingDown, Zap, Building2, type LucideIcon } from 'lucide-react'
import { department } from '@/content/department'

const iconMap: Record<string, LucideIcon> = {
  TrendingDown,
  Zap,
  Building2,
}

export default function ValuePillars() {
  return (

        Value Pillars

      <motion.div
        className="grid grid-cols-1 md:grid-cols-3 gap-6 mt-6"
        initial="hidden"
        whileInView="visible"
        viewport={{ once: true, margin: '-10%' }}
        variants={{ visible: { transition: { staggerChildren: 0.07 } } }}
      >
        {department.valuePillars.map((pillar) => {
          const Icon = iconMap[pillar.icon]
          return (
            <motion.div
              key={pillar.id}
              variants={{
                hidden: { opacity: 0, y: 24 },
                visible: { opacity: 1, y: 0 },
              }}
              whileHover={{ y: -3, transition: { duration: 0.2 } }}
              className="bg-surface border border-surface-border rounded-xl p-6 shadow-card hover:shadow-raised hover:bg-surface-raised transition-all duration-200"
            >
              {Icon && (

                  <Icon className="w-5 h-5 text-primary" />

              )}

{pillar.title}

{pillar.description}

            </motion.div>
          )
        })}
      </motion.div>

  )
}


1	import { department } from '@/content/department'
2
3	export default function MissionStatement() {
4	  return (
5

6

7	        Department Mandate
8

9

10
11

12
Mandate

13
{department.mandate}

14
15

16
Strategic Context

17

18	            {department.strategicContext}
19

20

21

22
23

24

25

26

27	            AlHasbah Direction
28

29
{department.alhashbahNote}

30

31

32

33	  )
34	}
35
[result-id: r15]

import { department } from '@/content/department'

export default function MissionStatement() {
  return (

        Department Mandate

Mandate

{department.mandate}

Strategic Context

            {department.strategicContext}

            AlHasbah Direction

{department.alhashbahNote}

  )
}


1	'use client'
2
3	import { motion } from 'framer-motion'
4	import { sections } from '@/content/sections'
5	import SectionCard from './SectionCard'
6
7	export default function DepartmentMap() {
8	  return (
9

10

11	        Department Structure
12

13

14
Three Sections. One Unified Department.

15
16	      <motion.div
17	        className="grid grid-cols-1 md:grid-cols-3 gap-6"
18	        initial="hidden"
19	        whileInView="visible"
20	        viewport={{ once: true, margin: '-10%' }}
21	        variants={{ visible: { transition: { staggerChildren: 0.07 } } }}
22	      >
23	        {sections.map((section) => (
24	          <motion.div
25	            key={section.id}
26	            variants={{
27	              hidden: { opacity: 0, y: 24 },
28	              visible: { opacity: 1, y: 0 },
29	            }}
30	          >
31	            <SectionCard section={section} />
32	          </motion.div>
33	        ))}
34	      </motion.div>
35

36	  )
37	}
38
[result-id: r16]

'use client'

import { motion } from 'framer-motion'
import { sections } from '@/content/sections'
import SectionCard from './SectionCard'

export default function DepartmentMap() {
  return (

        Department Structure

Three Sections. One Unified Department.

      <motion.div
        className="grid grid-cols-1 md:grid-cols-3 gap-6"
        initial="hidden"
        whileInView="visible"
        viewport={{ once: true, margin: '-10%' }}
        variants={{ visible: { transition: { staggerChildren: 0.07 } } }}
      >
        {sections.map((section) => (
          <motion.div
            key={section.id}
            variants={{
              hidden: { opacity: 0, y: 24 },
              visible: { opacity: 1, y: 0 },
            }}
          >
            <SectionCard section={section} />
          </motion.div>
        ))}
      </motion.div>

  )
}


1	'use client'
2
3	import { motion } from 'framer-motion'
4	import { type SectionDefinition } from '@/content/sections'
5
6	interface SectionCardProps {
7	  section: SectionDefinition
8	}
9
10	const colorClasses: Record<string, { border: string; text: string; badge: string }> = {
11	  'adoption-office': {
12	    border: 'border-l-primary',
13	    text: 'text-primary',
14	    badge: 'bg-primary/10 text-primary border-primary/20',
15	  },
16	  'ai-acceleration': {
17	    border: 'border-l-accent',
18	    text: 'text-accent',
19	    badge: 'bg-accent/10 text-accent border-accent/20',
20	  },
21	  'command-center': {
22	    border: 'border-l-gold',
23	    text: 'text-gold',
24	    badge: 'bg-gold/10 text-gold border-gold/20',
25	  },
26	}
27
28	export default function SectionCard({ section }: SectionCardProps) {
29	  const colors = colorClasses[section.id] ?? colorClasses['adoption-office']
30
31	  return (
32	    <motion.div
33	      whileHover={{ y: -3, transition: { duration: 0.2 } }}
34	      className={`bg-surface border border-surface-border border-l-4 ${colors.border} rounded-xl p-6 shadow-card hover:shadow-raised hover:bg-surface-raised transition-all duration-200`}
35	    >
36

37	        <span
38	          className={`inline-flex items-center justify-center w-7 h-7 rounded-full text-xs font-bold border ${colors.badge}`}
39	        >
40	          {section.order}
41
42

43
44	      <h3 className={`text-lg font-bold mb-1 ${colors.text}`}>{section.name}

45

46	        {section.tagline}
47

48
{section.mandate}

49
50

51	        {section.collaborationPoints.map((point, i) => (
52

53	            <span className={`mt-0.5 w-1.5 h-1.5 rounded-full flex-shrink-0 bg-current ${colors.text}`} />
54	            {point}
55

56	        ))}
57

58	    </motion.div>
59	  )
60	}
61
[result-id: r17]

'use client'

import { motion } from 'framer-motion'
import { type SectionDefinition } from '@/content/sections'

interface SectionCardProps {
  section: SectionDefinition
}

const colorClasses: Record<string, { border: string; text: string; badge: string }> = {
  'adoption-office': {
    border: 'border-l-primary',
    text: 'text-primary',
    badge: 'bg-primary/10 text-primary border-primary/20',
  },
  'ai-acceleration': {
    border: 'border-l-accent',
    text: 'text-accent',
    badge: 'bg-accent/10 text-accent border-accent/20',
  },
  'command-center': {
    border: 'border-l-gold',
    text: 'text-gold',
    badge: 'bg-gold/10 text-gold border-gold/20',
  },
}

export default function SectionCard({ section }: SectionCardProps) {
  const colors = colorClasses[section.id] ?? colorClasses['adoption-office']

  return (
    <motion.div
      whileHover={{ y: -3, transition: { duration: 0.2 } }}
      className={`bg-surface border border-surface-border border-l-4 ${colors.border} rounded-xl p-6 shadow-card hover:shadow-raised hover:bg-surface-raised transition-all duration-200`}
    >

        <span
          className={`inline-flex items-center justify-center w-7 h-7 rounded-full text-xs font-bold border ${colors.badge}`}
        >
          {section.order}

      <h3 className={`text-lg font-bold mb-1 ${colors.text}`}>{section.name}

        {section.tagline}

{section.mandate}

        {section.collaborationPoints.map((point, i) => (

            <span className={`mt-0.5 w-1.5 h-1.5 rounded-full flex-shrink-0 bg-current ${colors.text}`} />
            {point}

        ))}

    </motion.div>
  )
}


1	'use client'
2
3	import { useState } from 'react'
4	import { ChevronDown, ChevronUp } from 'lucide-react'
5	import { sections } from '@/content/sections'
6
7	const colorClasses: Record<string, { header: string; border: string; badge: string }> = {
8	  'adoption-office': {
9	    header: 'text-primary',
10	    border: 'border-l-primary',
11	    badge: 'bg-primary/10 text-primary border-primary/20',
12	  },
13	  'ai-acceleration': {
14	    header: 'text-accent',
15	    border: 'border-l-accent',
16	    badge: 'bg-accent/10 text-accent border-accent/20',
17	  },
18	  'command-center': {
19	    header: 'text-gold',
20	    border: 'border-l-gold',
21	    badge: 'bg-gold/10 text-gold border-gold/20',
22	  },
23	}
24
25	export default function ResponsibilityPanel() {
26	  const [openId, setOpenId] = useState<string | null>(sections[0]?.id ?? null)
27
28	  const toggle = (id: string) => {
29	    setOpenId((prev) => (prev === id ? null : id))
30	  }
31
32	  return (
33

34

35	        Section Responsibilities
36

37

38
Who Owns What

39
40

41	        {sections.map((section) => {
42	          const isOpen = openId === section.id
43	          const colors = colorClasses[section.id] ?? colorClasses['adoption-office']
44
45	          return (
46	            <div
47	              key={section.id}
48	              className={`bg-surface border border-surface-border border-l-4 ${colors.border} rounded-xl shadow-card overflow-hidden transition-all duration-200`}
49	            >
50	              <button
51	                onClick={() => toggle(section.id)}
52	                className="w-full flex items-center justify-between px-6 py-4 text-left hover:bg-surface-raised transition-colors duration-150"
53	              >
54

55	                  <span className={`text-base font-semibold ${colors.header}`}>{section.name}
56

57	                    {section.tagline}
58

59

60	                {isOpen ? (
61	                  <ChevronUp className="w-5 h-5 text-text-dim flex-shrink-0" />
62	                ) : (
63	                  <ChevronDown className="w-5 h-5 text-text-dim flex-shrink-0" />
64	                )}
65	              </button>
66
67	              {isOpen && (
68

69

70

71	                      Responsibilities
72

73

74	                      {section.responsibilities.map((r, i) => (
75

76
77	                          {r}
78

79	                      ))}
80

81

82
83

84

85

86	                        Core Activities
87

88

89	                        {section.coreActivities.map((a, i) => (
90

91
92	                            {a}
93

94	                        ))}
95

96

97
98

99

100	                        Key Deliverables
101

102

103	                        {section.keyDeliverables.map((d, i) => (
104

105
106	                            {d}
107

108	                        ))}
109

110

111

112
113

114

115	                      Stakeholders
116

117

118	                      {section.stakeholders.map((s, i) => (
119	                        <span
120	                          key={i}
121	                          className={`text-xs px-2.5 py-1 rounded-full border font-medium ${colors.badge}`}
122	                        >
123	                          {s}
124
125	                      ))}
126

127

128

129	              )}
130

131	          )
132	        })}
133

134

135	  )
136	}
137
[result-id: r18]

'use client'

import { useState } from 'react'
import { ChevronDown, ChevronUp } from 'lucide-react'
import { sections } from '@/content/sections'

const colorClasses: Record<string, { header: string; border: string; badge: string }> = {
  'adoption-office': {
    header: 'text-primary',
    border: 'border-l-primary',
    badge: 'bg-primary/10 text-primary border-primary/20',
  },
  'ai-acceleration': {
    header: 'text-accent',
    border: 'border-l-accent',
    badge: 'bg-accent/10 text-accent border-accent/20',
  },
  'command-center': {
    header: 'text-gold',
    border: 'border-l-gold',
    badge: 'bg-gold/10 text-gold border-gold/20',
  },
}

export default function ResponsibilityPanel() {
  const [openId, setOpenId] = useState<string | null>(sections[0]?.id ?? null)

  const toggle = (id: string) => {
    setOpenId((prev) => (prev === id ? null : id))
  }

  return (

        Section Responsibilities

Who Owns What

        {sections.map((section) => {
          const isOpen = openId === section.id
          const colors = colorClasses[section.id] ?? colorClasses['adoption-office']

          return (
            <div
              key={section.id}
              className={`bg-surface border border-surface-border border-l-4 ${colors.border} rounded-xl shadow-card overflow-hidden transition-all duration-200`}
            >
              <button
                onClick={() => toggle(section.id)}
                className="w-full flex items-center justify-between px-6 py-4 text-left hover:bg-surface-raised transition-colors duration-150"
              >

                  <span className={`text-base font-semibold ${colors.header}`}>{section.name}

                    {section.tagline}

                {isOpen ? (
                  <ChevronUp className="w-5 h-5 text-text-dim flex-shrink-0" />
                ) : (
                  <ChevronDown className="w-5 h-5 text-text-dim flex-shrink-0" />
                )}
              </button>

              {isOpen && (

                      Responsibilities

                      {section.responsibilities.map((r, i) => (

                          {r}

                      ))}

                        Core Activities

                        {section.coreActivities.map((a, i) => (

                            {a}

                        ))}

                        Key Deliverables

                        {section.keyDeliverables.map((d, i) => (

                            {d}

                        ))}

                      Stakeholders

                      {section.stakeholders.map((s, i) => (
                        <span
                          key={i}
                          className={`text-xs px-2.5 py-1 rounded-full border font-medium ${colors.badge}`}
                        >
                          {s}

                      ))}

              )}

          )
        })}

  )
}


1	'use client'
2
3	import { motion } from 'framer-motion'
4	import {
5	  governancePrinciples,
6	  decisionLayers,
7	  governanceControls,
8	} from '@/content/governance'
9	import PrincipleCard from './PrincipleCard'
10	import DecisionLayerCard from './DecisionLayer'
11
12	const controlStatusStyles: Record<string, string> = {
13	  'active': 'bg-success/10 text-success border-success/20',
14	  'in-progress': 'bg-accent/10 text-accent border-accent/20',
15	  'planned': 'bg-primary/10 text-primary border-primary/20',
16	}
17
18	const controlStatusLabels: Record<string, string> = {
19	  'active': 'Active',
20	  'in-progress': 'In Progress',
21	  'planned': 'Planned',
22	}
23
24	export default function GovernanceMap() {
25	  return (
26

27

28	        Governance Framework
29

30

31

32	        How AI Adoption is Controlled and Overseen
33

34
35	      {/* Principles */}
36

37

38	          Governing Principles
39

40	        <motion.div
41	          className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4"
42	          initial="hidden"
43	          whileInView="visible"
44	          viewport={{ once: true, margin: '-10%' }}
45	          variants={{ visible: { transition: { staggerChildren: 0.06 } } }}
46	        >
47	          {governancePrinciples.map((principle) => (
48	            <motion.div
49	              key={principle.id}
50	              variants={{
51	                hidden: { opacity: 0, y: 20 },
52	                visible: { opacity: 1, y: 0 },
53	              }}
54	            >
55	              <PrincipleCard principle={principle} />
56	            </motion.div>
57	          ))}
58	        </motion.div>
59

60
61	      {/* Decision Layers */}
62

63

64	          Decision Layers
65

66

67	          {decisionLayers.map((layer, i) => (
68	            <DecisionLayerCard key={layer.id} layer={layer} index={i} />
69	          ))}
70

71

72
73	      {/* Governance Controls */}
74

75

76	          Governance Controls
77

78

79

80
Area

81
Control

82
Owner

83
Cadence

84
Status

85

86	          {governanceControls.map((ctrl, i) => (
87	            <div
88	              key={ctrl.id}
89	              className={`px-5 py-4 ${i < governanceControls.length - 1 ? 'border-b border-surface-border' : ''} hover:bg-surface-raised transition-colors duration-150`}
90	            >
91

92
{ctrl.area}

93
{ctrl.control}

94
{ctrl.owner}

95
{ctrl.reviewCadence}

96
101	                  {controlStatusLabels[ctrl.status]}
102
103

104

105	          ))}
106

107

108

109	  )
110	}
111
[result-id: r19]

'use client'

import { motion } from 'framer-motion'
import {
  governancePrinciples,
  decisionLayers,
  governanceControls,
} from '@/content/governance'
import PrincipleCard from './PrincipleCard'
import DecisionLayerCard from './DecisionLayer'

const controlStatusStyles: Record<string, string> = {
  'active': 'bg-success/10 text-success border-success/20',
  'in-progress': 'bg-accent/10 text-accent border-accent/20',
  'planned': 'bg-primary/10 text-primary border-primary/20',
}

const controlStatusLabels: Record<string, string> = {
  'active': 'Active',
  'in-progress': 'In Progress',
  'planned': 'Planned',
}

export default function GovernanceMap() {
  return (

        Governance Framework

        How AI Adoption is Controlled and Overseen

      {/* Principles */}

          Governing Principles

        <motion.div
          className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4"
          initial="hidden"
          whileInView="visible"
          viewport={{ once: true, margin: '-10%' }}
          variants={{ visible: { transition: { staggerChildren: 0.06 } } }}
        >
          {governancePrinciples.map((principle) => (
            <motion.div
              key={principle.id}
              variants={{
                hidden: { opacity: 0, y: 20 },
                visible: { opacity: 1, y: 0 },
              }}
            >
              <PrincipleCard principle={principle} />
            </motion.div>
          ))}
        </motion.div>

      {/* Decision Layers */}

          Decision Layers

          {decisionLayers.map((layer, i) => (
            <DecisionLayerCard key={layer.id} layer={layer} index={i} />
          ))}

      {/* Governance Controls */}

          Governance Controls

Area

Control

Owner

Cadence

Status

          {governanceControls.map((ctrl, i) => (
            <div
              key={ctrl.id}
              className={`px-5 py-4 ${i < governanceControls.length - 1 ? 'border-b border-surface-border' : ''} hover:bg-surface-raised transition-colors duration-150`}
            >

{ctrl.area}

{ctrl.control}

{ctrl.owner}

{ctrl.reviewCadence}

                  {controlStatusLabels[ctrl.status]}

          ))}

  )
}


1	'use client'
2
3	import { motion } from 'framer-motion'
4	import {
5	  Target,
6	  ShieldCheck,
7	  BarChart2,
8	  UserCheck,
9	  Eye,
10	  Layers,
11	  type LucideIcon,
12	} from 'lucide-react'
13	import { type GovernancePrinciple } from '@/content/governance'
14
15	interface PrincipleCardProps {
16	  principle: GovernancePrinciple
17	}
18
19	const iconMap: Record<string, LucideIcon> = {
20	  Target,
21	  ShieldCheck,
22	  BarChart2,
23	  UserCheck,
24	  Eye,
25	  Layers,
26	}
27
28	export default function PrincipleCard({ principle }: PrincipleCardProps) {
29	  const Icon = iconMap[principle.icon]
30
31	  return (
32	    <motion.div
33	      whileHover={{ y: -3, transition: { duration: 0.2 } }}
34	      className="bg-surface border border-surface-border rounded-xl p-5 shadow-card hover:shadow-raised hover:bg-surface-raised transition-all duration-200"
35	    >
36	      {Icon && (
37

38	          <Icon className="w-4 h-4 text-primary" />
39

40	      )}
41
{principle.title}

42
{principle.description}

43	    </motion.div>
44	  )
45	}
46
[result-id: r20]

'use client'

import { motion } from 'framer-motion'
import {
  Target,
  ShieldCheck,
  BarChart2,
  UserCheck,
  Eye,
  Layers,
  type LucideIcon,
} from 'lucide-react'
import { type GovernancePrinciple } from '@/content/governance'

interface PrincipleCardProps {
  principle: GovernancePrinciple
}

const iconMap: Record<string, LucideIcon> = {
  Target,
  ShieldCheck,
  BarChart2,
  UserCheck,
  Eye,
  Layers,
}

export default function PrincipleCard({ principle }: PrincipleCardProps) {
  const Icon = iconMap[principle.icon]

  return (
    <motion.div
      whileHover={{ y: -3, transition: { duration: 0.2 } }}
      className="bg-surface border border-surface-border rounded-xl p-5 shadow-card hover:shadow-raised hover:bg-surface-raised transition-all duration-200"
    >
      {Icon && (

          <Icon className="w-4 h-4 text-primary" />

      )}

{principle.title}

{principle.description}

    </motion.div>
  )
}


1	import { type DecisionLayer } from '@/content/governance'
2
3	interface DecisionLayerProps {
4	  layer: DecisionLayer
5	  index: number
6	}
7
8	const accentColors = [
9	  'border-l-primary',
10	  'border-l-accent',
11	  'border-l-gold',
12	  'border-l-success',
13	]
14
15	export default function DecisionLayerCard({ layer, index }: DecisionLayerProps) {
16	  const borderColor = accentColors[index % accentColors.length]
17
18	  return (
19	    <div
20	      className={`bg-surface border border-surface-border border-l-4 ${borderColor} rounded-xl p-5 shadow-card`}
21	    >
22

23
{layer.name}

24
25	          {layer.cadence}
26
27

28
{layer.description}

29
30

31

32

33	            Participants
34

35

36	            {layer.participants.map((p, i) => (
37
41	                {p}
42
43	            ))}
44

45

46

47

48	            Scope
49

50
{layer.scope}

51

52

53

54	  )
55	}
56
[result-id: r21]

import { type DecisionLayer } from '@/content/governance'

interface DecisionLayerProps {
  layer: DecisionLayer
  index: number
}

const accentColors = [
  'border-l-primary',
  'border-l-accent',
  'border-l-gold',
  'border-l-success',
]

export default function DecisionLayerCard({ layer, index }: DecisionLayerProps) {
  const borderColor = accentColors[index % accentColors.length]

  return (
    <div
      className={`bg-surface border border-surface-border border-l-4 ${borderColor} rounded-xl p-5 shadow-card`}
    >

{layer.name}

          {layer.cadence}

{layer.description}

            Participants

            {layer.participants.map((p, i) => (

                {p}

            ))}

            Scope

{layer.scope}

  )
}


1	'use client'
2
3	import { motion } from 'framer-motion'
4	import { operatingStages } from '@/content/operating-model'
5	import FlowStage from './FlowStage'
6
7	export default function OperatingFlow() {
8	  return (
9

10

11	        Operating Model
12

13

14

15	        How the Department Works End-to-End
16

17
18	      <motion.div
19	        className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4"
20	        initial="hidden"
21	        whileInView="visible"
22	        viewport={{ once: true, margin: '-10%' }}
23	        variants={{ visible: { transition: { staggerChildren: 0.06 } } }}
24	      >
25	        {operatingStages.map((stage, index) => (
26	          <motion.div
27	            key={stage.id}
28	            variants={{
29	              hidden: { opacity: 0, y: 24 },
30	              visible: { opacity: 1, y: 0 },
31	            }}
32	            className="relative"
33	          >
34	            <FlowStage stage={stage} index={index} />
35	            {/* Connector arrow — shown between cards except last in each row */}
36	            {index < operatingStages.length - 1 && (index + 1) % 3 !== 0 && (
37

38	                <svg width="16" height="16" viewBox="0 0 16 16" fill="none">
39	                  <path d="M2 8h10M8 4l4 4-4 4" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" className="text-text-dim" />
40	                </svg>
41

42	            )}
43	          </motion.div>
44	        ))}
45	      </motion.div>
46

47	  )
48	}
49
[result-id: r22]

'use client'

import { motion } from 'framer-motion'
import { operatingStages } from '@/content/operating-model'
import FlowStage from './FlowStage'

export default function OperatingFlow() {
  return (

        Operating Model

        How the Department Works End-to-End

      <motion.div
        className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4"
        initial="hidden"
        whileInView="visible"
        viewport={{ once: true, margin: '-10%' }}
        variants={{ visible: { transition: { staggerChildren: 0.06 } } }}
      >
        {operatingStages.map((stage, index) => (
          <motion.div
            key={stage.id}
            variants={{
              hidden: { opacity: 0, y: 24 },
              visible: { opacity: 1, y: 0 },
            }}
            className="relative"
          >
            <FlowStage stage={stage} index={index} />
            {/* Connector arrow — shown between cards except last in each row */}
            {index < operatingStages.length - 1 && (index + 1) % 3 !== 0 && (

                <svg width="16" height="16" viewBox="0 0 16 16" fill="none">
                  <path d="M2 8h10M8 4l4 4-4 4" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" className="text-text-dim" />
                </svg>

            )}
          </motion.div>
        ))}
      </motion.div>

  )
}


1	import { type OperatingStage } from '@/content/operating-model'
2
3	interface FlowStageProps {
4	  stage: OperatingStage
5	  index: number
6	}
7
8	const sectionBadgeStyles: Record<string, string> = {
9	  'adoption-office': 'bg-primary/10 text-primary border-primary/20',
10	  'ai-acceleration': 'bg-accent/10 text-accent border-accent/20',
11	  'command-center': 'bg-gold/10 text-gold border-gold/20',
12	}
13
14	const sectionLabels: Record<string, string> = {
15	  'adoption-office': 'Adoption Office',
16	  'ai-acceleration': 'AI Acceleration',
17	  'command-center': 'Command Center',
18	}
19
20	export default function FlowStage({ stage, index }: FlowStageProps) {
21	  return (
22

23

24
25	          {String(index + 1).padStart(2, '0')}
26
27

28
29

30
{stage.name}

31
{stage.description}

32

33
34

35

36	          Outputs
37

38

39	          {stage.outputs.map((output, i) => (
40

41
42	              {output}
43

44	          ))}
45

46

47
48

49	        {stage.sections.map((sectionId) => (
50
56	            {sectionLabels[sectionId] ?? sectionId}
57
58	        ))}
59

60

61	  )
62	}
63
[result-id: r23]

import { type OperatingStage } from '@/content/operating-model'

interface FlowStageProps {
  stage: OperatingStage
  index: number
}

const sectionBadgeStyles: Record<string, string> = {
  'adoption-office': 'bg-primary/10 text-primary border-primary/20',
  'ai-acceleration': 'bg-accent/10 text-accent border-accent/20',
  'command-center': 'bg-gold/10 text-gold border-gold/20',
}

const sectionLabels: Record<string, string> = {
  'adoption-office': 'Adoption Office',
  'ai-acceleration': 'AI Acceleration',
  'command-center': 'Command Center',
}

export default function FlowStage({ stage, index }: FlowStageProps) {
  return (

          {String(index + 1).padStart(2, '0')}

{stage.name}

{stage.description}

          Outputs

          {stage.outputs.map((output, i) => (

              {output}

          ))}

        {stage.sections.map((sectionId) => (

            {sectionLabels[sectionId] ?? sectionId}

        ))}

  )
}


1	'use client'
2
3	import { motion } from 'framer-motion'
4	import { roadmapItems, type RoadmapPhase } from '@/content/roadmap'
5
6	const phases: { phase: RoadmapPhase; label: string; badge: string }[] = [
7	  { phase: 'now', label: 'NOW', badge: 'bg-success/10 text-success border-success/20' },
8	  { phase: 'next', label: 'NEXT', badge: 'bg-primary/10 text-primary border-primary/20' },
9	  { phase: 'future', label: 'FUTURE', badge: 'bg-gold/10 text-gold border-gold/20' },
10	]
11
12	const statusStyles: Record<string, string> = {
13	  'in-progress': 'bg-accent/10 text-accent border-accent/20',
14	  'planned': 'bg-primary/10 text-primary border-primary/20',
15	  'completed': 'bg-success/10 text-success border-success/20',
16	}
17
18	const statusLabels: Record<string, string> = {
19	  'in-progress': 'In Progress',
20	  'planned': 'Planned',
21	  'completed': 'Completed',
22	}
23
24	const priorityDot: Record<string, string> = {
25	  high: 'bg-danger',
26	  medium: 'bg-warning',
27	  low: 'bg-text-dim',
28	}
29
30	const ownerLabels: Record<string, string> = {
31	  'adoption-office': 'Adoption Office',
32	  'ai-acceleration': 'AI Acceleration',
33	  'command-center': 'Command Center',
34	}
35
36	export default function RoadmapView() {
37	  return (
38

39

40	        Strategic Roadmap
41

42

43
Now, Next, and Future

44
45

46	        {phases.map(({ phase, label, badge }) => {
47	          const items = roadmapItems.filter((r) => r.phase === phase)
48	          return (
49	            <motion.div
50	              key={phase}
51	              initial={{ opacity: 0, y: 24 }}
52	              whileInView={{ opacity: 1, y: 0 }}
53	              viewport={{ once: true, margin: '-10%' }}
54	              transition={{ duration: 0.4, ease: [0.22, 1, 0.36, 1] }}
55	              className="flex flex-col gap-4"
56	            >
57

58	                <span className={`text-xs px-3 py-1 rounded-full border font-bold tracking-widest ${badge}`}>
59	                  {label}
60
61	                {items.length} items
62

63
64	              {items.map((item) => (
65

69

70

71	                      <span className={`w-2 h-2 rounded-full flex-shrink-0 ${priorityDot[item.priority]}`} />
72	                      {item.priority} priority
73

74
79	                      {statusLabels[item.status]}
80
81

82
83
{item.title}

84

85	                    {item.description}
86

87

88	                    {ownerLabels[item.owner] ?? item.owner}
89

90

91	              ))}
92	            </motion.div>
93	          )
94	        })}
95

96

97	  )
98	}
99
[result-id: r24]

'use client'

import { motion } from 'framer-motion'
import { roadmapItems, type RoadmapPhase } from '@/content/roadmap'

const phases: { phase: RoadmapPhase; label: string; badge: string }[] = [
  { phase: 'now', label: 'NOW', badge: 'bg-success/10 text-success border-success/20' },
  { phase: 'next', label: 'NEXT', badge: 'bg-primary/10 text-primary border-primary/20' },
  { phase: 'future', label: 'FUTURE', badge: 'bg-gold/10 text-gold border-gold/20' },
]

const statusStyles: Record<string, string> = {
  'in-progress': 'bg-accent/10 text-accent border-accent/20',
  'planned': 'bg-primary/10 text-primary border-primary/20',
  'completed': 'bg-success/10 text-success border-success/20',
}

const statusLabels: Record<string, string> = {
  'in-progress': 'In Progress',
  'planned': 'Planned',
  'completed': 'Completed',
}

const priorityDot: Record<string, string> = {
  high: 'bg-danger',
  medium: 'bg-warning',
  low: 'bg-text-dim',
}

const ownerLabels: Record<string, string> = {
  'adoption-office': 'Adoption Office',
  'ai-acceleration': 'AI Acceleration',
  'command-center': 'Command Center',
}

export default function RoadmapView() {
  return (

        Strategic Roadmap

Now, Next, and Future

        {phases.map(({ phase, label, badge }) => {
          const items = roadmapItems.filter((r) => r.phase === phase)
          return (
            <motion.div
              key={phase}
              initial={{ opacity: 0, y: 24 }}
              whileInView={{ opacity: 1, y: 0 }}
              viewport={{ once: true, margin: '-10%' }}
              transition={{ duration: 0.4, ease: [0.22, 1, 0.36, 1] }}
              className="flex flex-col gap-4"
            >

                <span className={`text-xs px-3 py-1 rounded-full border font-bold tracking-widest ${badge}`}>
                  {label}

                {items.length} items

              {items.map((item) => (

                      <span className={`w-2 h-2 rounded-full flex-shrink-0 ${priorityDot[item.priority]}`} />
                      {item.priority} priority

                      {statusLabels[item.status]}

{item.title}

                    {item.description}

                    {ownerLabels[item.owner] ?? item.owner}

              ))}
            </motion.div>
          )
        })}

  )
}


1	'use client'
2
3	import { motion } from 'framer-motion'
4	import { risks } from '@/content/risks'
5	import RiskCard from './RiskCard'
6
7	export default function RiskRegister() {
8	  const high = risks.filter((r) => r.severity === 'high').length
9	  const medium = risks.filter((r) => r.severity === 'medium').length
10	  const low = risks.filter((r) => r.severity === 'low').length
11
12	  return (
13

14

15	        Risk Register
16

17

18

19
Risks and Mitigations

20

21	          {high > 0 && (
22
23	              {high} High
24
25	          )}
26	          {medium > 0 && (
27
28	              {medium} Medium
29
30	          )}
31	          {low > 0 && (
32
33	              {low} Low
34
35	          )}
36

37

38
39	      <motion.div
40	        className="grid grid-cols-1 lg:grid-cols-2 gap-5"
41	        initial="hidden"
42	        whileInView="visible"
43	        viewport={{ once: true, margin: '-10%' }}
44	        variants={{ visible: { transition: { staggerChildren: 0.06 } } }}
45	      >
46	        {risks.map((risk) => (
47	          <motion.div
48	            key={risk.id}
49	            variants={{
50	              hidden: { opacity: 0, y: 20 },
51	              visible: { opacity: 1, y: 0 },
52	            }}
53	          >
54	            <RiskCard risk={risk} />
55	          </motion.div>
56	        ))}
57	      </motion.div>
58

59	  )
60	}
61
[result-id: r25]

'use client'

import { motion } from 'framer-motion'
import { risks } from '@/content/risks'
import RiskCard from './RiskCard'

export default function RiskRegister() {
  const high = risks.filter((r) => r.severity === 'high').length
  const medium = risks.filter((r) => r.severity === 'medium').length
  const low = risks.filter((r) => r.severity === 'low').length

  return (

        Risk Register

Risks and Mitigations

          {high > 0 && (

              {high} High

          )}
          {medium > 0 && (

              {medium} Medium

          )}
          {low > 0 && (

              {low} Low

          )}

      <motion.div
        className="grid grid-cols-1 lg:grid-cols-2 gap-5"
        initial="hidden"
        whileInView="visible"
        viewport={{ once: true, margin: '-10%' }}
        variants={{ visible: { transition: { staggerChildren: 0.06 } } }}
      >
        {risks.map((risk) => (
          <motion.div
            key={risk.id}
            variants={{
              hidden: { opacity: 0, y: 20 },
              visible: { opacity: 1, y: 0 },
            }}
          >
            <RiskCard risk={risk} />
          </motion.div>
        ))}
      </motion.div>

  )
}


1	'use client'
2
3	import { useState } from 'react'
4	import { ChevronDown, ChevronUp } from 'lucide-react'
5	import { type Risk } from '@/content/risks'
6
7	interface RiskCardProps {
8	  risk: Risk
9	}
10
11	const statusStyles: Record<string, string> = {
12	  'open': 'bg-warning/10 text-warning border-warning/20',
13	  'mitigated': 'bg-success/10 text-success border-success/20',
14	  'monitoring': 'bg-primary/10 text-primary border-primary/20',
15	}
16
17	const statusLabels: Record<string, string> = {
18	  'open': 'Open',
19	  'mitigated': 'Mitigated',
20	  'monitoring': 'Monitoring',
21	}
22
23	const severityDot: Record<string, string> = {
24	  high: 'bg-danger',
25	  medium: 'bg-warning',
26	  low: 'bg-success',
27	}
28
29	const categoryLabels: Record<string, string> = {
30	  'adoption': 'Adoption',
31	  'governance': 'Governance',
32	  'data': 'Data',
33	  'change-management': 'Change Mgmt',
34	  'technology': 'Technology',
35	  'dependencies': 'Dependencies',
36	}
37
38	export default function RiskCard({ risk }: RiskCardProps) {
39	  const [expanded, setExpanded] = useState(false)
40
41	  return (
42

43

44

45

46
47	              {categoryLabels[risk.category] ?? risk.category}
48
49
54	              {statusLabels[risk.status]}
55
56

57

58
59
{risk.title}

60
{risk.description}

61
62

63

64	            <span className={`w-2 h-2 rounded-full ${severityDot[risk.severity]}`} />
65	            Severity: {risk.severity}
66

67

68	            <span className={`w-2 h-2 rounded-full ${severityDot[risk.likelihood]}`} />
69	            Likelihood: {risk.likelihood}
70

71

72
73
Owner: {risk.owner}

74
75	        <button
76	          onClick={() => setExpanded((p) => !p)}
77	          className="flex items-center gap-1.5 text-xs font-medium text-primary hover:text-accent transition-colors duration-150"
78	        >
79	          {expanded ? (
80	            <>
81	              <ChevronUp className="w-3.5 h-3.5" /> Hide mitigations
82	            </>
83	          ) : (
84	            <>
85	              <ChevronDown className="w-3.5 h-3.5" /> View mitigations ({risk.mitigations.length})
86	            </>
87	          )}
88	        </button>
89

90
91	      {expanded && (
92

93
Mitigations

94

95	            {risk.mitigations.map((m, i) => (
96

97
98	                {m}
99

100	            ))}
101

102

103	      )}
104

105	  )
106	}
107
[result-id: r26]

'use client'

import { useState } from 'react'
import { ChevronDown, ChevronUp } from 'lucide-react'
import { type Risk } from '@/content/risks'

interface RiskCardProps {
  risk: Risk
}

const statusStyles: Record<string, string> = {
  'open': 'bg-warning/10 text-warning border-warning/20',
  'mitigated': 'bg-success/10 text-success border-success/20',
  'monitoring': 'bg-primary/10 text-primary border-primary/20',
}

const statusLabels: Record<string, string> = {
  'open': 'Open',
  'mitigated': 'Mitigated',
  'monitoring': 'Monitoring',
}

const severityDot: Record<string, string> = {
  high: 'bg-danger',
  medium: 'bg-warning',
  low: 'bg-success',
}

const categoryLabels: Record<string, string> = {
  'adoption': 'Adoption',
  'governance': 'Governance',
  'data': 'Data',
  'change-management': 'Change Mgmt',
  'technology': 'Technology',
  'dependencies': 'Dependencies',
}

export default function RiskCard({ risk }: RiskCardProps) {
  const [expanded, setExpanded] = useState(false)

  return (

              {categoryLabels[risk.category] ?? risk.category}

              {statusLabels[risk.status]}

{risk.title}

{risk.description}

            <span className={`w-2 h-2 rounded-full ${severityDot[risk.severity]}`} />
            Severity: {risk.severity}

            <span className={`w-2 h-2 rounded-full ${severityDot[risk.likelihood]}`} />
            Likelihood: {risk.likelihood}

Owner: {risk.owner}

        <button
          onClick={() => setExpanded((p) => !p)}
          className="flex items-center gap-1.5 text-xs font-medium text-primary hover:text-accent transition-colors duration-150"
        >
          {expanded ? (
            <>
              <ChevronUp className="w-3.5 h-3.5" /> Hide mitigations
            </>
          ) : (
            <>
              <ChevronDown className="w-3.5 h-3.5" /> View mitigations ({risk.mitigations.length})
            </>
          )}
        </button>

      {expanded && (

Mitigations

            {risk.mitigations.map((m, i) => (

                {m}

            ))}

      )}

  )
}


1	'use client'
2
3	import { motion } from 'framer-motion'
4	import { TrendingDown, Zap, Building2, type LucideIcon } from 'lucide-react'
5	import { department } from '@/content/department'
6	import { sections } from '@/content/sections'
7
8	const iconMap: Record<string, LucideIcon> = {
9	  TrendingDown,
10	  Zap,
11	  Building2,
12	}
13
14	const sectionColorClasses: Record<string, { text: string; border: string; badge: string }> = {
15	  'adoption-office': { text: 'text-primary', border: 'border-primary', badge: 'bg-primary/10 text-primary border-primary/20' },
16	  'ai-acceleration': { text: 'text-accent', border: 'border-accent', badge: 'bg-accent/10 text-accent border-accent/20' },
17	  'command-center': { text: 'text-gold', border: 'border-gold', badge: 'bg-gold/10 text-gold border-gold/20' },
18	}
19
20	export default function StrategicImpact() {
21	  const emphasisMetrics = department.topMetrics.filter((m) => m.emphasis)
22
23	  return (
24

25

26	        Strategic Impact
27

28

29
Why This Department Matters to DEWA

30
31	      {/* Value Pillars — Full */}
32	      <motion.div
33	        className="grid grid-cols-1 md:grid-cols-3 gap-6 mb-10"
34	        initial="hidden"
35	        whileInView="visible"
36	        viewport={{ once: true, margin: '-10%' }}
37	        variants={{ visible: { transition: { staggerChildren: 0.07 } } }}
38	      >
39	        {department.valuePillars.map((pillar) => {
40	          const Icon = iconMap[pillar.icon]
41	          return (
42	            <motion.div
43	              key={pillar.id}
44	              variants={{
45	                hidden: { opacity: 0, y: 24 },
46	                visible: { opacity: 1, y: 0 },
47	              }}
48	              className="bg-surface border border-surface-border rounded-xl p-6 shadow-card hover:shadow-raised hover:bg-surface-raised transition-all duration-200"
49	            >
50	              {Icon && (
51

52	                  <Icon className="w-5 h-5 text-primary" />
53

54	              )}
55
{pillar.title}

56
{pillar.description}

57	            </motion.div>
58	          )
59	        })}
60	      </motion.div>
61
62	      {/* Key Stats */}
63

64	        {emphasisMetrics.map((metric) => (
65

69

70	              {metric.value}
71	              {metric.unit && (
72	                {metric.unit}
73	              )}
74

75
{metric.label}

76
{metric.trend}

77

78	        ))}
79

80
81	      {/* Section contributions */}
82

83

84	          Section Contributions to DEWA Mission
85

86	        {sections.map((section) => {
87	          const colors = sectionColorClasses[section.id] ?? sectionColorClasses['adoption-office']
88	          return (
89	            <div
90	              key={section.id}
91	              className={`bg-surface border border-surface-border border-l-4 ${colors.border} rounded-xl p-5 shadow-card`}
92	            >
93

94	                <h4 className={`text-sm font-semibold ${colors.text}`}>{section.name}

95	                <span className={`text-xs px-2 py-0.5 rounded-full border font-medium ${colors.badge}`}>
96	                  {section.tagline}
97
98

99
{section.purpose}

100

101	          )
102	        })}
103

104
105	      {/* AlHasbah closing statement */}
106

107

108

109

110	            AlHasbah Direction
111

112
{department.alhashbahNote}

113

114

115

116	  )
117	}
118
[result-id: r27]

'use client'

import { motion } from 'framer-motion'
import { TrendingDown, Zap, Building2, type LucideIcon } from 'lucide-react'
import { department } from '@/content/department'
import { sections } from '@/content/sections'

const iconMap: Record<string, LucideIcon> = {
  TrendingDown,
  Zap,
  Building2,
}

const sectionColorClasses: Record<string, { text: string; border: string; badge: string }> = {
  'adoption-office': { text: 'text-primary', border: 'border-primary', badge: 'bg-primary/10 text-primary border-primary/20' },
  'ai-acceleration': { text: 'text-accent', border: 'border-accent', badge: 'bg-accent/10 text-accent border-accent/20' },
  'command-center': { text: 'text-gold', border: 'border-gold', badge: 'bg-gold/10 text-gold border-gold/20' },
}

export default function StrategicImpact() {
  const emphasisMetrics = department.topMetrics.filter((m) => m.emphasis)

  return (

        Strategic Impact

Why This Department Matters to DEWA

      {/* Value Pillars — Full */}
      <motion.div
        className="grid grid-cols-1 md:grid-cols-3 gap-6 mb-10"
        initial="hidden"
        whileInView="visible"
        viewport={{ once: true, margin: '-10%' }}
        variants={{ visible: { transition: { staggerChildren: 0.07 } } }}
      >
        {department.valuePillars.map((pillar) => {
          const Icon = iconMap[pillar.icon]
          return (
            <motion.div
              key={pillar.id}
              variants={{
                hidden: { opacity: 0, y: 24 },
                visible: { opacity: 1, y: 0 },
              }}
              className="bg-surface border border-surface-border rounded-xl p-6 shadow-card hover:shadow-raised hover:bg-surface-raised transition-all duration-200"
            >
              {Icon && (

                  <Icon className="w-5 h-5 text-primary" />

              )}

{pillar.title}

{pillar.description}

            </motion.div>
          )
        })}
      </motion.div>

      {/* Key Stats */}

        {emphasisMetrics.map((metric) => (

              {metric.value}
              {metric.unit && (
                {metric.unit}
              )}

{metric.label}

{metric.trend}

        ))}

      {/* Section contributions */}

          Section Contributions to DEWA Mission

        {sections.map((section) => {
          const colors = sectionColorClasses[section.id] ?? sectionColorClasses['adoption-office']
          return (
            <div
              key={section.id}
              className={`bg-surface border border-surface-border border-l-4 ${colors.border} rounded-xl p-5 shadow-card`}
            >

                <h4 className={`text-sm font-semibold ${colors.text}`}>{section.name}

                <span className={`text-xs px-2 py-0.5 rounded-full border font-medium ${colors.badge}`}>
                  {section.tagline}

{section.purpose}

          )
        })}

      {/* AlHasbah closing statement */}

            AlHasbah Direction

{department.alhashbahNote}

  )
}