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	              className="h-full"
55	            >
56	              <PrincipleCard principle={principle} />
57	            </motion.div>
58	          ))}
59	        </motion.div>
60

61
62	      {/* Decision Layers */}
63

64

65	          Decision Layers
66

67	        <motion.div
68	          className="space-y-4"
69	          initial="hidden"
70	          whileInView="visible"
71	          viewport={{ once: true, margin: '-10%' }}
72	          variants={{ visible: { transition: { staggerChildren: 0.08 } } }}
73	        >
74	          {decisionLayers.map((layer, i) => (
75	            <DecisionLayerCard key={layer.id} layer={layer} index={i} />
76	          ))}
77	        </motion.div>
78

79
80	      {/* Governance Controls */}
81

82

83	          Governance Controls
84

85

86

87
Area

88
Control

89
Owner

90
Cadence

91
Status

92

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

99
{ctrl.area}

100
{ctrl.control}

101
{ctrl.owner}

102
{ctrl.reviewCadence}

103
108	                  {controlStatusLabels[ctrl.status]}
109
110

111

112	          ))}
113

114

115

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


1	'use client'
2
3	import { useRef } from 'react'
4	import { motion, useInView } from 'framer-motion'
5	import { department, type TopMetric } from '@/content/department'
6	import { useCountUp } from '@/hooks/useCountUp'
7
8	function MetricCard({ metric }: { metric: TopMetric }) {
9	  const ref = useRef<HTMLDivElement>(null)
10	  const inView = useInView(ref, { once: true })
11	  const displayValue = useCountUp(metric.value, inView)
12
13	  return (
14	    <motion.div
15	      ref={ref}
16	      variants={{
17	        hidden: { opacity: 0, y: 20 },
18	        visible: { opacity: 1, y: 0, transition: { duration: 0.4, ease: [0.22, 1, 0.36, 1] } },
19	      }}
20	      whileHover={{ y: -3, transition: { duration: 0.2 } }}
21	      className="bg-surface border border-surface-border rounded-xl p-4 shadow-card hover:shadow-raised hover:bg-surface-raised transition-all duration-200"
22	    >
23

24	        {metric.label}
25

26	      <p className={`text-2xl font-bold ${metric.emphasis ? 'text-gold' : 'text-text'}`}>
27	        {displayValue}
28	        {metric.unit && (
29	          {metric.unit}
30	        )}
31

32
{metric.trend}

33	    </motion.div>
34	  )
35	}
36
37	export default function KpiStrip() {
38	  return (
39

40	      <motion.div
41	        className="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-6 gap-4"
42	        initial="hidden"
43	        whileInView="visible"
44	        viewport={{ once: true, margin: '-10%' }}
45	        variants={{ visible: { transition: { staggerChildren: 0.07 } } }}
46	      >
47	        {department.topMetrics.map((metric) => (
48	          <MetricCard key={metric.id} metric={metric} />
49	        ))}
50	      </motion.div>
51

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


1	'use client'
2
3	import { useRef } from 'react'
4	import { motion, useInView } from 'framer-motion'
5	import { type Kpi } from '@/content/kpis'
6	import KpiTargetBar from './KpiTargetBar'
7	import { useCountUp } from '@/hooks/useCountUp'
8
9	interface KpiCardProps {
10	  kpi: Kpi
11	}
12
13	const statusStyles: Record<string, string> = {
14	  'on-track': 'bg-success/10 text-success border-success/20',
15	  'at-risk': 'bg-warning/10 text-warning border-warning/20',
16	  'critical': 'bg-danger/10 text-danger border-danger/20',
17	  'planned': 'bg-primary/10 text-primary border-primary/20',
18	}
19
20	const statusLabels: Record<string, string> = {
21	  'on-track': 'On Track',
22	  'at-risk': 'At Risk',
23	  'critical': 'Critical',
24	  'planned': 'Planned',
25	}
26
27	export default function KpiCard({ kpi }: KpiCardProps) {
28	  const cardRef = useRef<HTMLDivElement>(null)
29	  const inView = useInView(cardRef, { once: true })
30	  const displayValue = useCountUp(kpi.value, inView)
31	  const badgeClass = statusStyles[kpi.status] ?? statusStyles['planned']
32
33	  return (
34	    <motion.div
35	      ref={cardRef}
36	      whileHover={{ y: -3, transition: { duration: 0.2 } }}
37	      className="h-full 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"
38	    >
39

40

41

42	            {kpi.label}
43

44

45	        <span
46	          className={`text-xs px-2 py-0.5 rounded-full border font-semibold flex-shrink-0 ${badgeClass}`}
47	        >
48	          {statusLabels[kpi.status]}
49
50

51
52

53
54	          {displayValue}
55	          {kpi.unit && (
56	            {kpi.unit}
57	          )}
58
59

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

62

63
64	      <KpiTargetBar progress={kpi.progress} status={kpi.status} />
65
66
{kpi.description}

67
68

69	        {kpi.trend}
70	        {kpi.cadence}
71

72	    </motion.div>
73	  )
74	}
75
[result-id: r23]


1	'use client'
2
3	import { motion } from 'framer-motion'
4	import { type OperatingStage } from '@/content/operating-model'
5
6	interface FlowStageProps {
7	  stage: OperatingStage
8	  index: number
9	}
10
11	const sectionBadgeStyles: Record<string, string> = {
12	  'adoption-office': 'bg-primary/10 text-primary border-primary/20',
13	  'ai-acceleration': 'bg-accent/10 text-accent border-accent/20',
14	  'command-center': 'bg-gold/10 text-gold border-gold/20',
15	}
16
17	const sectionLabels: Record<string, string> = {
18	  'adoption-office': 'Adoption Office',
19	  'ai-acceleration': 'AI Acceleration',
20	  'command-center': 'Command Center',
21	}
22
23	export default function FlowStage({ stage, index }: FlowStageProps) {
24	  return (
25	    <motion.div
26	      whileHover={{ y: -3, transition: { duration: 0.2 } }}
27	      className="h-full 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-3"
28	    >
29

30
31	          {String(index + 1).padStart(2, '0')}
32
33

34
35

36
{stage.name}

37
{stage.description}

38

39
40

41

42	          Outputs
43

44

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

47
48	              {output}
49

50	          ))}
51

52

53
54

55	        {stage.sections.map((sectionId) => (
56
62	            {sectionLabels[sectionId] ?? sectionId}
63
64	        ))}
65

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


1	'use client'
2
3	import { motion } from 'framer-motion'
4	import { department } from '@/content/department'
5
6	export default function MissionStatement() {
7	  return (
8

9

10	        Department Mandate
11

12

13
14	      <motion.div
15	        className="space-y-4"
16	        initial="hidden"
17	        whileInView="visible"
18	        viewport={{ once: true, margin: '-10%' }}
19	        variants={{ visible: { transition: { staggerChildren: 0.1 } } }}
20	      >
21	        <motion.div
22	          variants={{
23	            hidden: { opacity: 0, y: 24 },
24	            visible: { opacity: 1, y: 0, transition: { duration: 0.45, ease: [0.22, 1, 0.36, 1] } },
25	          }}
26	          whileHover={{ y: -3, transition: { duration: 0.2 } }}
27	          className="bg-surface border border-surface-border rounded-xl p-6 shadow-card hover:shadow-raised hover:bg-surface-raised transition-all duration-200"
28	        >
29
Mandate

30
{department.mandate}

31
32

33
Strategic Context

34

35	              {department.strategicContext}
36

37

38	        </motion.div>
39
40	        <motion.div
41	          variants={{
42	            hidden: { opacity: 0, y: 24 },
43	            visible: { opacity: 1, y: 0, transition: { duration: 0.45, ease: [0.22, 1, 0.36, 1] } },
44	          }}
45	          whileHover={{ y: -3, transition: { duration: 0.2 } }}
46	          className="bg-surface border border-gold/30 rounded-xl p-6 shadow-card hover:shadow-raised hover:bg-surface-raised transition-all duration-200 relative overflow-hidden"
47	        >
48

49

50

51	              AlHasbah Direction
52

53
{department.alhashbahNote}

54

55	        </motion.div>
56	      </motion.div>
57

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


Now I can do all the `rounded-xl` → `rounded-lg` replacements:


The file /Users/khalidbinkalban/Desktop/My Workstation/dewa-ai-adoption/src/components/governance/PrincipleCard.tsx has been updated. All occurrences were successfully replaced.


The file /Users/khalidbinkalban/Desktop/My Workstation/dewa-ai-adoption/src/components/impact/StrategicImpact.tsx has been updated. All occurrences were successfully replaced.


The file /Users/khalidbinkalban/Desktop/My Workstation/dewa-ai-adoption/src/components/structure/SectionCard.tsx has been updated. All occurrences were successfully replaced.


The file /Users/khalidbinkalban/Desktop/My Workstation/dewa-ai-adoption/src/components/roadmap/RoadmapView.tsx has been updated. All occurrences were successfully replaced.


The file /Users/khalidbinkalban/Desktop/My Workstation/dewa-ai-adoption/src/components/governance/DecisionLayer.tsx has been updated. All occurrences were successfully replaced.


The file /Users/khalidbinkalban/Desktop/My Workstation/dewa-ai-adoption/src/components/overview/ValuePillars.tsx has been updated. All occurrences were successfully replaced.


The file /Users/khalidbinkalban/Desktop/My Workstation/dewa-ai-adoption/src/components/responsibilities/ResponsibilityPanel.tsx has been updated. All occurrences were successfully replaced.


The file /Users/khalidbinkalban/Desktop/My Workstation/dewa-ai-adoption/src/components/risks/RiskCard.tsx has been updated. All occurrences were successfully replaced.


The file /Users/khalidbinkalban/Desktop/My Workstation/dewa-ai-adoption/src/components/governance/GovernanceMap.tsx has been updated. All occurrences were successfully replaced.


The file /Users/khalidbinkalban/Desktop/My Workstation/dewa-ai-adoption/src/components/overview/KpiStrip.tsx has been updated. All occurrences were successfully replaced.


The file /Users/khalidbinkalban/Desktop/My Workstation/dewa-ai-adoption/src/components/kpis/KpiCard.tsx has been updated. All occurrences were successfully replaced.


The file /Users/khalidbinkalban/Desktop/My Workstation/dewa-ai-adoption/src/components/operating-model/FlowStage.tsx has been updated. All occurrences were successfully replaced.


The file /Users/khalidbinkalban/Desktop/My Workstation/dewa-ai-adoption/src/components/overview/MissionStatement.tsx has been updated. All occurrences were successfully replaced.


Now update `rounded-xl` in vibe/page.tsx and journey/page.tsx:


The file /Users/khalidbinkalban/Desktop/My Workstation/dewa-ai-adoption/src/app/vibe/page.tsx has been updated. All occurrences were successfully replaced.


The file /Users/khalidbinkalban/Desktop/My Workstation/dewa-ai-adoption/src/app/journey/page.tsx has been updated. All occurrences were successfully replaced.


Now check if there's a main page.tsx with any rounded-xl or relevant patterns:


1	import SectionWrapper from '@/components/layout/SectionWrapper'
2	import HeroBanner from '@/components/overview/HeroBanner'
3	import MissionStatement from '@/components/overview/MissionStatement'
4	import ValuePillars from '@/components/overview/ValuePillars'
5	import KpiStrip from '@/components/overview/KpiStrip'
6	import DepartmentMap from '@/components/structure/DepartmentMap'
7	import ResponsibilityPanel from '@/components/responsibilities/ResponsibilityPanel'
8	import KpiCockpit from '@/components/kpis/KpiCockpit'
9	import GovernanceMap from '@/components/governance/GovernanceMap'
10	import OperatingFlow from '@/components/operating-model/OperatingFlow'
11	import RoadmapView from '@/components/roadmap/RoadmapView'
12	import RiskRegister from '@/components/risks/RiskRegister'
13	import StrategicImpact from '@/components/impact/StrategicImpact'
14
15	export default function Home() {
16	  return (
17	    <div className="min-h-screen bg-bg">
18	      <SectionWrapper id="overview">
19	        <HeroBanner />
20	        <MissionStatement />
21	        <ValuePillars />
22	        <KpiStrip />
23	      </SectionWrapper>
24	      <SectionWrapper id="structure">
25	        <DepartmentMap />
26	      </SectionWrapper>
27	      <SectionWrapper id="responsibilities">
28	        <ResponsibilityPanel />
29	      </SectionWrapper>
30	      <SectionWrapper id="kpis">
31	        <KpiCockpit />
32	      </SectionWrapper>
33	      <SectionWrapper id="governance">
34	        <GovernanceMap />
35	      </SectionWrapper>
36	      <SectionWrapper id="operating-model">
37	        <OperatingFlow />
38	      </SectionWrapper>
39	      <SectionWrapper id="roadmap">
40	        <RoadmapView />
41	      </SectionWrapper>
42	      <SectionWrapper id="risks">
43	        <RiskRegister />
44	      </SectionWrapper>
45	      <SectionWrapper id="impact">
46	        <StrategicImpact />
47	      </SectionWrapper>
48	    </div>
49	  )
50	}
51
[result-id: r26]


Good, no rounded-xl in page.tsx. Now let's run the build:


Bash

cd "/Users/khalidbinkalban/Desktop/My Workstation/dewa-ai-adoption" && npm run build 2>&1

Run Next.js build to check for errors


> dewa-ai-adoption@0.1.0 build
> next build

  ▲ Next.js 14.2.35

   Creating an optimized production build ...
 ✓ Compiled successfully
   Linting and checking validity of types ...
   Collecting page data ...
   Generating static pages (0/7) ...
   Generating static pages (1/7)
   Generating static pages (3/7)
   Generating static pages (5/7)
 ✓ Generating static pages (7/7)
   Finalizing page optimization ...
   Collecting build traces ...

Route (app)                              Size     First Load JS
┌ ○ /                                    17.5 kB         146 kB
├ ○ /_not-found                          873 B          88.2 kB
├ ○ /journey                             3.61 kB         141 kB
└ ○ /vibe                                4.68 kB         142 kB
+ First Load JS shared by all            87.3 kB
  ├ chunks/117-4f5b424f20efdcae.js       31.7 kB
  ├ chunks/fd9d1056-b11b2651f33aae7f.js  53.6 kB
  └ other shared chunks (total)          1.96 kB

○  (Static)  prerendered as static content
[result-id: r27]
[rerun: b3]


Build succeeded with no errors. Here is a summary of everything that was done:

**DEWA Design System applied successfully. Build: clean.**

---

**Files modified:**

1. `/Users/khalidbinkalban/Desktop/My Workstation/dewa-ai-adoption/src/app/globals.css`
   - Swapped dark/light theme order — light is now the `:root` default
   - Replaced all color values with DEWA tokens (primary green `#007560`, backgrounds, surfaces, borders, text)
   - Added `--color-card-border`, `--color-elevation-fill`, `--color-elevation-hover` variables
   - Shadows are now flat `0 0 0 1px border` style (no heavy drop shadows)
   - `--font-inter` reference replaced with `--font-dubai`
   - `card-base` utility updated to `rounded-lg` (15px)

2. `/Users/khalidbinkalban/Desktop/My Workstation/dewa-ai-adoption/tailwind.config.ts`
   - `borderRadius`: `sm:5px, md:7px, lg:15px, xl:20px, full:9999px, pill:100px`
   - `accent` token now points to `var(--color-primary)` (green, not blue)
   - Added `card-border`, `elevation-fill`, `elevation-hover` color tokens
   - `boxShadow`: `card` and `raised` use CSS var, `glow-blue` and `glow-gold` set to `none`

3. `/Users/khalidbinkalban/Desktop/My Workstation/dewa-ai-adoption/src/app/layout.tsx`
   - Dubai font not available on Google Fonts — replaced `Inter` with `Noto_Sans` (comment added explaining fallback), variable renamed `--font-dubai`

4. `/Users/khalidbinkalban/Desktop/My Workstation/dewa-ai-adoption/src/components/layout/SiteNav.tsx`
   - Nav `backgroundColor` inline styles updated from old dark-blue to DEWA dark `#212427` / light `#FFFFFF`

5. `/Users/khalidbinkalban/Desktop/My Workstation/dewa-ai-adoption/src/components/kpis/KpiCockpit.tsx`
   - Active tab: `rounded-full` (pill), `shadow-glow-blue` → `shadow-card`

6. `/Users/khalidbinkalban/Desktop/My Workstation/dewa-ai-adoption/src/components/ui/button.tsx`
   - Base button class: `rounded-lg` → `rounded-pill` (100px radius for all buttons)

7. `/Users/khalidbinkalban/Desktop/My Workstation/dewa-ai-adoption/src/app/journey/page.tsx`
   - CTA button: `rounded-lg` → `rounded-pill`, hover updated to `#27A28D`

8. **13 component files** — all `rounded-xl` (cards) replaced with `rounded-lg` (15px): `PrincipleCard`, `StrategicImpact`, `SectionCard`, `RoadmapView`, `DecisionLayer`, `ValuePillars`, `ResponsibilityPanel`, `RiskCard`, `GovernanceMap`, `KpiStrip`, `KpiCard`, `FlowStage`, `MissionStatement`, `HeroBanner`, `vibe/page.tsx`, `journey/page.tsx`