Make the Next.js project at `/Users/khalidbinkalban/Desktop/My Workstation/dewa-ai-adoption` fully mobile-friendly. Go through every component and page and fix all mobile responsiveness issues.

Read all these files first, then make targeted fixes:

**Pages:**
- `src/app/page.tsx`
- `src/app/journey/page.tsx`
- `src/app/vibe/page.tsx`

**Components:**
- `src/components/layout/SiteNav.tsx`
- `src/components/layout/SectionWrapper.tsx`
- `src/components/overview/HeroBanner.tsx`
- `src/components/overview/KpiStrip.tsx`
- `src/components/overview/MissionStatement.tsx`
- `src/components/overview/ValuePillars.tsx`
- `src/components/structure/DepartmentMap.tsx`
- `src/components/structure/SectionCard.tsx`
- `src/components/kpis/KpiCockpit.tsx`
- `src/components/kpis/KpiCard.tsx`
- `src/components/operating-model/OperatingFlow.tsx`
- `src/components/operating-model/FlowStage.tsx`
- `src/components/governance/GovernanceMap.tsx`
- `src/components/governance/PrincipleCard.tsx`
- `src/components/governance/DecisionLayer.tsx`
- `src/components/roadmap/RoadmapView.tsx`
- `src/components/risks/RiskRegister.tsx`
- `src/components/risks/RiskCard.tsx`
- `src/components/responsibilities/ResponsibilityPanel.tsx`
- `src/components/impact/StrategicImpact.tsx`

**Key mobile fixes to apply everywhere:**

1. **Grids**: `grid-cols-1` on mobile, `sm:grid-cols-2`, `lg:grid-cols-3` on larger screens. Never have multi-column grids without mobile fallback.

2. **Padding/spacing**: Use `px-4 sm:px-6` for horizontal padding. Use `py-8 sm:py-12 md:py-20` for sections. Never hardcode large padding without responsive prefix.

3. **Typography**:
   - `text-4xl` → `text-2xl sm:text-3xl lg:text-4xl`
   - `text-3xl` → `text-xl sm:text-2xl lg:text-3xl`
   - `text-2xl` → `text-xl sm:text-2xl`
   - Long text should have `max-w-full` on mobile

4. **Flex layouts**: Add `flex-wrap` where needed. Stack horizontal layouts on mobile with `flex-col sm:flex-row`.

5. **Cards**: Should take full width on mobile. Ensure `min-w-0` on flex children to prevent overflow.

6. **Nav**: Mobile hamburger menu should work properly. Menu items should be large enough to tap (min 44px height).

7. **KPI cockpit tabs**: Should scroll horizontally or stack on very small screens.

8. **Tables/horizontal scrolls**: Wrap any wide content in `overflow-x-auto`.

9. **Hero sections on journey/vibe pages**: Stats grid `grid-cols-2 sm:grid-cols-4` is ok, but text should be responsive.

10. **Buttons**: Min touch target of 44px height. Full width on mobile where appropriate: `w-full sm:w-auto`.

11. **Max widths**: Ensure `max-w-content` containers have proper padding so content doesn't touch screen edges.

After all changes, run `npm run build` to verify no TypeScript/build errors. Fix any errors found.


I'll read all the files first, then make targeted fixes for mobile responsiveness.


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: r1]


1	'use client'
2
3	import Link from 'next/link'
4	import { motion } from 'framer-motion'
5	import { ArrowLeft, ChevronRight } from 'lucide-react'
6	import { journeyHero, challengeCards, solutionSteps, techStack } from '@/content/journey'
7
8	const reveal = {
9	  hidden: { opacity: 0, y: 24 },
10	  visible: { opacity: 1, y: 0, transition: { duration: 0.45, ease: [0.22, 1, 0.36, 1] as [number, number, number, number] } },
11	}
12
13	const stagger = (delay = 0.07) => ({
14	  hidden: {},
15	  visible: { transition: { staggerChildren: delay } },
16	})
17
18	const badgeClass: Record<string, string> = {
19	  Framework:  'bg-primary/10 text-primary border-primary/20',
20	  Language:   'bg-accent/10 text-accent border-accent/20',
21	  Styling:    'bg-gold/10 text-gold border-gold/20',
22	  Components: 'bg-success/10 text-success border-success/20',
23	  Animation:  'bg-primary/10 text-primary border-primary/20',
24	  Charts:     'bg-accent/10 text-accent border-accent/20',
25	  Icons:      'bg-gold/10 text-gold border-gold/20',
26	  Typography: 'bg-success/10 text-success border-success/20',
27	}
28
29	export default function JourneyPage() {
30	  return (
31

32	      {/* Back link */}
33

34	        <Link
35	          href="/"
36	          className="inline-flex items-center gap-1.5 text-xs text-text-dim hover:text-text transition-colors duration-150 no-underline"
37	        >
38	          <ArrowLeft className="w-3.5 h-3.5" />
39	          Back to Dashboard
40	        </Link>
41

42
43	      {/* ── Hero ──────────────────────────────────────────── */}
44

45

46	          <motion.div
47	            initial="hidden"
48	            animate="visible"
49	            variants={stagger(0.08)}
50	          >
51	            <motion.div variants={reveal}>
52
53	                {journeyHero.badge}
54
55	            </motion.div>
56
57	            <motion.h1
58	              variants={reveal}
59	              className="text-4xl font-bold text-text leading-tight max-w-3xl mb-5"
60	            >
61	              {journeyHero.title}
62	            </motion.h1>
63
64	            <motion.p
65	              variants={reveal}
66	              className="text-md text-text-secondary leading-relaxed max-w-2xl mb-12"
67	            >
68	              {journeyHero.description}
69	            </motion.p>
70
71	            {/* Stats row */}
72	            <motion.div
73	              variants={stagger(0.07)}
74	              initial="hidden"
75	              animate="visible"
76	              className="grid grid-cols-2 md:grid-cols-4 gap-4"
77	            >
78	              {journeyHero.stats.map((stat) => (
79	                <motion.div
80	                  key={stat.label}
81	                  variants={reveal}
82	                  className="bg-surface border border-surface-border rounded-lg p-5 shadow-card"
83	                >
84

85	                    {stat.label}
86

87

88	                    {stat.value}
89	                    {stat.unit && (
90	                      {stat.unit}
91	                    )}
92

93	                </motion.div>
94	              ))}
95	            </motion.div>
96	          </motion.div>
97

98

99
100	      {/* ── The Challenge ─────────────────────────────────── */}
101

102

103	          <motion.div
104	            initial="hidden"
105	            whileInView="visible"
106	            viewport={{ once: true, margin: '-10%' }}
107	            variants={stagger(0.09)}
108	          >
109	            <motion.div variants={reveal}>
110

111	                The Challenge
112

113

114	            </motion.div>
115
116	            <motion.h2
117	              variants={reveal}
118	              className="text-2xl font-bold text-text mb-3 max-w-xl"
119	            >
120	              Enterprise AI at Scale is Not a Technology Problem
121	            </motion.h2>
122
123	            <motion.p
124	              variants={reveal}
125	              className="text-base text-text-secondary leading-relaxed max-w-2xl mb-10"
126	            >
127	              It is an organisational problem. Without a dedicated adoption engine, AI tools proliferate
128	              unevenly, governance gaps emerge, and leadership loses visibility over what is actually
129	              delivering value.
130	            </motion.p>
131
132	            <motion.div
133	              variants={stagger(0.08)}
134	              className="grid grid-cols-1 md:grid-cols-3 gap-6"
135	            >
136	              {challengeCards.map((card) => (
137	                <motion.div
138	                  key={card.number}
139	                  variants={reveal}
140	                  whileHover={{ y: -3, transition: { duration: 0.2 } }}
141	                  className="bg-surface border border-surface-border rounded-lg p-6 shadow-card hover:shadow-raised hover:bg-surface-raised transition-all duration-200"
142	                >
143
144	                    {card.number}
145
146
{card.title}

147
{card.description}

148	                </motion.div>
149	              ))}
150	            </motion.div>
151	          </motion.div>
152

153

154
155	      {/* ── The Solution ──────────────────────────────────── */}
156

157

158	          <motion.div
159	            initial="hidden"
160	            whileInView="visible"
161	            viewport={{ once: true, margin: '-10%' }}
162	            variants={stagger(0.08)}
163	          >
164	            <motion.div variants={reveal}>
165

166	                The Solution
167

168

169	            </motion.div>
170
171	            <motion.h2
172	              variants={reveal}
173	              className="text-2xl font-bold text-text mb-3"
174	            >
175	              A Three-Section Operating Engine
176	            </motion.h2>
177
178	            <motion.p
179	              variants={reveal}
180	              className="text-base text-text-secondary leading-relaxed max-w-2xl mb-12"
181	            >
182	              The AI Adoption Department operates as a four-step pipeline that converts AI opportunity
183	              into measurable enterprise value — systematically, repeatably, at scale.
184	            </motion.p>
185
186	            {/* Vertical pipeline */}
187

188	              {solutionSteps.map((step, i) => (
189	                <motion.div
190	                  key={step.number}
191	                  initial="hidden"
192	                  whileInView="visible"
193	                  viewport={{ once: true, margin: '-10%' }}
194	                  variants={reveal}
195	                  className="flex gap-6 pb-8 last:pb-0"
196	                >
197	                  {/* Left: number + line */}
198

199

200	                      {step.number}
201

202	                    {i < solutionSteps.length - 1 && (
203

204	                    )}
205

206
207	                  {/* Right: content */}
208

209

210
{step.title}

211	                      <span className={`text-xs font-semibold tracking-wide px-2.5 py-0.5 rounded-full border ${
212	                        step.ownerColor === 'text-primary' ? 'bg-primary/10 text-primary border-primary/20' :
213	                        step.ownerColor === 'text-accent'  ? 'bg-accent/10 text-accent border-accent/20' :
214	                        step.ownerColor === 'text-gold'    ? 'bg-gold/10 text-gold border-gold/20' :
215	                        'bg-success/10 text-success border-success/20'
216	                      }`}>
217	                        {step.owner}
218
219

220
{step.description}

221	                    {i < solutionSteps.length - 1 && (
222	                      <ChevronRight className="w-4 h-4 text-text-dim mt-4 rotate-90" />
223	                    )}
224

225	                </motion.div>
226	              ))}
227

228	          </motion.div>
229

230

231
232	      {/* ── Tech Stack ────────────────────────────────────── */}
233

234

235	          <motion.div
236	            initial="hidden"
237	            whileInView="visible"
238	            viewport={{ once: true, margin: '-10%' }}
239	            variants={stagger(0.07)}
240	          >
241	            <motion.div variants={reveal}>
242

243	                Tech Stack
244

245

246	            </motion.div>
247
248	            <motion.h2 variants={reveal} className="text-2xl font-bold text-text mb-10">
249	              Built on a Production-Grade Foundation
250	            </motion.h2>
251
252	            <motion.div
253	              variants={stagger(0.05)}
254	              className="grid grid-cols-2 sm:grid-cols-4 gap-4"
255	            >
256	              {techStack.map((tech) => (
257	                <motion.div
258	                  key={tech.name}
259	                  variants={reveal}
260	                  whileHover={{ y: -3, transition: { duration: 0.2 } }}
261	                  className="bg-surface border border-surface-border rounded-lg p-5 shadow-card hover:shadow-raised hover:bg-surface-raised transition-all duration-200"
262	                >
263	                  <span className={`inline-flex text-xs font-semibold tracking-wide px-2 py-0.5 rounded-full border mb-3 ${badgeClass[tech.badge] ?? 'bg-primary/10 text-primary border-primary/20'}`}>
264	                    {tech.badge}
265
266
{tech.name}

267
{tech.description}

268	                </motion.div>
269	              ))}
270	            </motion.div>
271
272	            {/* CTA */}
273	            <motion.div variants={reveal} className="mt-12 pt-8 border-t border-surface-border flex flex-col sm:flex-row items-start sm:items-center justify-between gap-4">
274

275
Explore the full operating model

276
The executive dashboard has all 10 sections — strategy, structure, KPIs, governance, roadmap, and impact.

277

278	              <Link
279	                href="/"
280	                className="inline-flex items-center gap-2 px-5 py-2.5 bg-primary text-white rounded-pill text-sm font-semibold hover:bg-[#27A28D] transition-colors duration-150 no-underline flex-shrink-0"
281	              >
282	                Open Dashboard
283	                <ChevronRight className="w-4 h-4" />
284	              </Link>
285	            </motion.div>
286	          </motion.div>
287

288

289
290

291

292	  )
293	}
294
[result-id: r2]


1	'use client'
2
3	import { useRef } from 'react'
4	import Link from 'next/link'
5	import { motion, useInView } from 'framer-motion'
6	import { ArrowLeft } from 'lucide-react'
7	import {
8	  vibeHero,
9	  buildStats,
10	  efficiencyStats,
11	  codeBreakdown,
12	  sessionOutput,
13	  buildTimeline,
14	  toolsUsed,
15	} from '@/content/vibe-stats'
16	import { useCountUp } from '@/hooks/useCountUp'
17
18	const reveal = {
19	  hidden: { opacity: 0, y: 24 },
20	  visible: { opacity: 1, y: 0, transition: { duration: 0.45, ease: [0.22, 1, 0.36, 1] as [number, number, number, number] } },
21	}
22
23	const stagger = (delay = 0.07) => ({
24	  hidden: {},
25	  visible: { transition: { staggerChildren: delay } },
26	})
27
28	// ── Animated code breakdown bar ──────────────────────────────────────────────
29	function BreakdownBar({ item, index }: { item: (typeof codeBreakdown)[0]; index: number }) {
30	  const ref = useRef<HTMLDivElement>(null)
31	  const inView = useInView(ref, { once: true })
32	  const displayLines = useCountUp(String(item.lines), inView)
33
34	  return (
35	    <motion.div
36	      ref={ref}
37	      variants={reveal}
38	      className="grid grid-cols-[1fr_auto] gap-4 items-center py-3 border-b border-surface-border last:border-0"
39	    >
40

41

42	          {item.category}
43
44	            {displayLines} lines
45
46

47

48	          <motion.div
49	            className={`h-full rounded-full ${item.colorClass}`}
50	            initial={{ width: '0%' }}
51	            animate={inView ? { width: `${item.pct}%` } : { width: '0%' }}
52	            transition={{ duration: 0.9, ease: [0.22, 1, 0.36, 1], delay: index * 0.06 + 0.2 }}
53	          />
54

55

56
57	        {item.pct}%
58
59	    </motion.div>
60	  )
61	}
62
63	// ── Big stat card ─────────────────────────────────────────────────────────────
64	function BigStat({ stat }: { stat: (typeof buildStats)[0] }) {
65	  const ref = useRef<HTMLDivElement>(null)
66	  const inView = useInView(ref, { once: true })
67	  const displayValue = useCountUp(stat.value.replace('~', ''), inView)
68
69	  return (
70	    <motion.div
71	      ref={ref}
72	      variants={reveal}
73	      whileHover={{ y: -3, transition: { duration: 0.2 } }}
74	      className="bg-surface border border-surface-border rounded-lg p-6 shadow-card hover:shadow-raised hover:bg-surface-raised transition-all duration-200"
75	    >
76

77	        {stat.label}
78

79

80	        {stat.value.startsWith('~') ? '~' : ''}{displayValue}
81	        {stat.unit && (
82	          {stat.unit}
83	        )}
84

85
{stat.note}

86	    </motion.div>
87	  )
88	}
89
90	// ── Efficiency stat ───────────────────────────────────────────────────────────
91	function EfficiencyItem({ stat }: { stat: (typeof efficiencyStats)[0] }) {
92	  const ref = useRef<HTMLDivElement>(null)
93	  const inView = useInView(ref, { once: true })
94	  const display = useCountUp(String(stat.value), inView)
95
96	  return (
97	    <motion.div ref={ref} variants={reveal} className="text-center">
98	      <p className={`text-3xl font-bold ${stat.colorClass} leading-none`}>
99	        {display}
100	        {stat.unit}
101

102

103	        {stat.label}
104

105	    </motion.div>
106	  )
107	}
108
109	export default function VibeStatsPage() {
110	  return (
111

112	      {/* Back link */}
113

114	        <Link
115	          href="/"
116	          className="inline-flex items-center gap-1.5 text-xs text-text-dim hover:text-text transition-colors duration-150 no-underline"
117	        >
118	          <ArrowLeft className="w-3.5 h-3.5" />
119	          Back to Dashboard
120	        </Link>
121

122
123	      {/* ── Hero ──────────────────────────────────────────── */}
124

125

126	          <motion.div initial="hidden" animate="visible" variants={stagger(0.08)}>
127	            <motion.div variants={reveal}>
128
129	                {vibeHero.badge}
130
131	            </motion.div>
132
133	            <motion.h1
134	              variants={reveal}
135	              className="text-4xl font-bold text-text leading-tight max-w-2xl mb-5"
136	            >
137	              {vibeHero.title}
138	            </motion.h1>
139
140	            <motion.p
141	              variants={reveal}
142	              className="text-md text-text-secondary leading-relaxed max-w-2xl"
143	            >
144	              {vibeHero.description}
145	            </motion.p>
146	          </motion.div>
147

148

149
150	      {/* ── Build Stats ───────────────────────────────────── */}
151

152

153	          <motion.div
154	            initial="hidden"
155	            whileInView="visible"
156	            viewport={{ once: true, margin: '-10%' }}
157	            variants={stagger(0.09)}
158	          >
159	            <motion.div variants={reveal}>
160

161	                By the Numbers
162

163

164	            </motion.div>
165
166	            <motion.h2 variants={reveal} className="text-2xl font-bold text-text mb-10">
167	              What 18 Prompts Produced
168	            </motion.h2>
169
170	            <motion.div
171	              variants={stagger(0.07)}
172	              className="grid grid-cols-2 md:grid-cols-4 gap-5"
173	            >
174	              {buildStats.map((stat) => (
175	                <BigStat key={stat.label} stat={stat} />
176	              ))}
177	            </motion.div>
178	          </motion.div>
179

180

181
182	      {/* ── Efficiency ────────────────────────────────────── */}
183

184

185	          <motion.div
186	            initial="hidden"
187	            whileInView="visible"
188	            viewport={{ once: true, margin: '-10%' }}
189	            variants={stagger(0.08)}
190	          >
191	            <motion.div variants={reveal}>
192

193	                Efficiency
194

195

196	            </motion.div>
197
198	            <motion.h2 variants={reveal} className="text-2xl font-bold text-text mb-10">
199	              Zero Lines Typed by Hand
200	            </motion.h2>
201
202	            {/* Stat trio */}
203	            <motion.div
204	              variants={stagger(0.08)}
205	              className="grid grid-cols-1 sm:grid-cols-3 gap-6 mb-8"
206	            >
207	              {efficiencyStats.map((stat) => (
208	                <EfficiencyItem key={stat.label} stat={stat} />
209	              ))}
210	            </motion.div>
211
212	            {/* 100% AI badge */}
213	            <motion.div
214	              variants={reveal}
215	              className="bg-surface border border-accent/30 rounded-lg p-6 shadow-card flex items-center gap-5 relative overflow-hidden"
216	            >
217

218

219

220	                  100% AI-Generated Code
221

222

223	                  Every file, every function, every animation, and every TypeScript interface was written
224	                  by Claude Code. The human role was direction, not implementation.
225

226

227	            </motion.div>
228	          </motion.div>
229

230

231
232	      {/* ── Code Breakdown ────────────────────────────────── */}
233

234

235	          <motion.div
236	            initial="hidden"
237	            whileInView="visible"
238	            viewport={{ once: true, margin: '-10%' }}
239	            variants={stagger(0.08)}
240	          >
241	            <motion.div variants={reveal}>
242

243	                Code Breakdown
244

245

246	            </motion.div>
247
248	            <motion.h2 variants={reveal} className="text-2xl font-bold text-text mb-8">
249	              2,977 Lines by Category
250	            </motion.h2>
251
252	            <motion.div
253	              variants={stagger(0.06)}
254	              className="bg-surface border border-surface-border rounded-lg p-6 shadow-card"
255	            >
256	              {codeBreakdown.map((item, i) => (
257	                <BreakdownBar key={item.category} item={item} index={i} />
258	              ))}
259	            </motion.div>
260	          </motion.div>
261

262

263
264	      {/* ── What One Session Produced ─────────────────────── */}
265

266

267	          <motion.div
268	            initial="hidden"
269	            whileInView="visible"
270	            viewport={{ once: true, margin: '-10%' }}
271	            variants={stagger(0.07)}
272	          >
273	            <motion.div variants={reveal}>
274

275	                Output
276

277

278	            </motion.div>
279
280	            <motion.h2 variants={reveal} className="text-2xl font-bold text-text mb-10">
281	              What Three Sessions Produced
282	            </motion.h2>
283
284	            <motion.div
285	              variants={stagger(0.04)}
286	              className="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-4 gap-4"
287	            >
288	              {sessionOutput.map((item) => (
289	                <motion.div
290	                  key={item.label}
291	                  variants={reveal}
292	                  whileHover={{ y: -3, transition: { duration: 0.2 } }}
293	                  className="bg-surface border border-surface-border rounded-lg p-4 shadow-card hover:shadow-raised hover:bg-surface-raised transition-all duration-200"
294	                >
295
{item.value}

296
{item.label}

297	                </motion.div>
298	              ))}
299	            </motion.div>
300	          </motion.div>
301

302

303
304	      {/* ── Build Timeline ────────────────────────────────── */}
305

306

307	          <motion.div
308	            initial="hidden"
309	            whileInView="visible"
310	            viewport={{ once: true, margin: '-10%' }}
311	            variants={stagger(0.08)}
312	          >
313	            <motion.div variants={reveal}>
314

315	                Build Timeline
316

317

318	            </motion.div>
319
320	            <motion.h2 variants={reveal} className="text-2xl font-bold text-text mb-10">
321	              Three Phases, One Complete Product
322	            </motion.h2>
323
324

325	              {buildTimeline.map((phase, i) => (
326	                <motion.div
327	                  key={phase.phase}
328	                  initial="hidden"
329	                  whileInView="visible"
330	                  viewport={{ once: true, margin: '-10%' }}
331	                  variants={reveal}
332	                  className="flex gap-6 pb-8 last:pb-0"
333	                >
334	                  {/* Marker */}
335

336

337	                    {i < buildTimeline.length - 1 && (
338

339	                    )}
340

341
342	                  {/* Content */}
343

344

345
346	                        {phase.phase}
347
348
{phase.title}

349

350
{phase.description}

351

352	                </motion.div>
353	              ))}
354

355	          </motion.div>
356

357

358
359	      {/* ── Tools Used ────────────────────────────────────── */}
360

361

362	          <motion.div
363	            initial="hidden"
364	            whileInView="visible"
365	            viewport={{ once: true, margin: '-10%' }}
366	            variants={stagger(0.08)}
367	          >
368	            <motion.div variants={reveal}>
369

370	                Tools Used
371

372

373	            </motion.div>
374
375	            <motion.h2 variants={reveal} className="text-2xl font-bold text-text mb-10">
376	              The Stack Behind the Build
377	            </motion.h2>
378
379	            <motion.div
380	              variants={stagger(0.07)}
381	              className="grid grid-cols-1 md:grid-cols-2 gap-5"
382	            >
383	              {toolsUsed.map((tool) => (
384	                <motion.div
385	                  key={tool.name}
386	                  variants={reveal}
387	                  whileHover={{ y: -3, transition: { duration: 0.2 } }}
388	                  className="bg-surface border border-surface-border rounded-lg p-6 shadow-card hover:shadow-raised hover:bg-surface-raised transition-all duration-200"
389	                >
390

391
{tool.name}

392	                    <span className={`text-xs font-semibold tracking-wide px-2.5 py-0.5 rounded-full border flex-shrink-0 ${tool.badgeClass}`}>
393	                      {tool.badge}
394
395

396
{tool.description}

397	                </motion.div>
398	              ))}
399	            </motion.div>
400	          </motion.div>
401

402

403
404

405

406	  )
407	}
408
[result-id: r3]


Now let me read all the components:


1	'use client'
2
3	import { useState, useCallback } from 'react'
4	import Link from 'next/link'
5	import { usePathname } from 'next/navigation'
6	import { Menu, X, Sun, Moon } from 'lucide-react'
7	import { useActiveSection } from '@/hooks/useActiveSection'
8	import { navLinks, pageLinks } from '@/lib/tokens'
9	import { useTheme } from './ThemeProvider'
10
11	const sectionIds = navLinks.map((l) => l.href.replace('#', ''))
12
13	export default function SiteNav() {
14	  const [mobileOpen, setMobileOpen] = useState(false)
15	  const activeSection = useActiveSection(sectionIds)
16	  const pathname = usePathname()
17	  const isHome = pathname === '/'
18	  const { theme, toggleTheme } = useTheme()
19
20	  const handleNavClick = useCallback((href: string) => {
21	    setMobileOpen(false)
22	    if (!isHome) return
23	    const id = href.replace('#', '')
24	    const el = document.getElementById(id)
25	    if (el) {
26	      el.scrollIntoView({ behavior: 'smooth', block: 'start' })
27	    }
28	  }, [isHome])
29
30	  return (
31	    <>
32
40

41	          {/* Left: Logo + Name */}
42	          <Link href="/" className="flex items-center gap-3 flex-shrink-0 no-underline hover:no-underline">
43

44	              AI
45

46

47	              DEWA
48	              AI Adoption Department
49

50	          </Link>
51
52	          {/* Desktop Nav */}
53
54	            {isHome && navLinks.map((link) => {
55	              const id = link.href.replace('#', '')
56	              const isActive = activeSection === id
57	              return (
58	                <button
59	                  key={link.href}
60	                  onClick={() => handleNavClick(link.href)}
61	                  className={`px-3 py-1.5 text-xs font-medium tracking-wide transition-colors duration-150 rounded-md ${
62	                    isActive
63	                      ? 'text-primary border-b-2 border-primary rounded-none pb-1'
64	                      : 'text-text-secondary hover:text-text hover:bg-surface-raised'
65	                  }`}
66	                >
67	                  {link.label}
68	                </button>
69	              )
70	            })}
71
72

73
74	            {pageLinks.map((link) => {
75	              const isActive = pathname === link.href
76	              return (
77	                <Link
78	                  key={link.href}
79	                  href={link.href}
80	                  className={`px-3 py-1.5 text-xs font-medium tracking-wide transition-colors duration-150 rounded-md no-underline ${
81	                    isActive
82	                      ? 'text-accent bg-accent/10'
83	                      : 'text-text-secondary hover:text-text hover:bg-surface-raised'
84	                  }`}
85	                >
86	                  {link.label}
87	                </Link>
88	              )
89	            })}
90
91
92	          {/* Right: Theme toggle + hamburger */}
93

94	            <button
95	              onClick={toggleTheme}
96	              className="p-2 rounded-md text-text-secondary hover:text-text hover:bg-surface-raised transition-colors duration-150"
97	              aria-label="Toggle theme"
98	            >
99	              {theme === 'dark' ? <Sun size={16} /> : <Moon size={16} />}
100	            </button>
101	            <button
102	              className="lg:hidden p-2 text-text-secondary hover:text-text transition-colors"
103	              onClick={() => setMobileOpen((v) => !v)}
104	              aria-label="Toggle menu"
105	              aria-expanded={mobileOpen}
106	            >
107	              {mobileOpen ? <X size={20} /> : <Menu size={20} />}
108	            </button>
109

110

111
112
113	      {/* Mobile Menu */}
114	      {mobileOpen && (
115

121

122	            {isHome && navLinks.map((link) => {
123	              const id = link.href.replace('#', '')
124	              const isActive = activeSection === id
125	              return (
126	                <button
127	                  key={link.href}
128	                  onClick={() => handleNavClick(link.href)}
129	                  className={`text-left px-4 py-3 text-base font-medium rounded-lg transition-colors ${
130	                    isActive
131	                      ? 'text-primary bg-primary/10 border border-primary/20'
132	                      : 'text-text-secondary hover:text-text hover:bg-surface-raised'
133	                  }`}
134	                >
135	                  {link.label}
136	                </button>
137	              )
138	            })}
139
140

141
142	            {pageLinks.map((link) => {
143	              const isActive = pathname === link.href
144	              return (
145	                <Link
146	                  key={link.href}
147	                  href={link.href}
148	                  onClick={() => setMobileOpen(false)}
149	                  className={`px-4 py-3 text-base font-medium rounded-lg transition-colors no-underline ${
150	                    isActive
151	                      ? 'text-accent bg-accent/10 border border-accent/20'
152	                      : 'text-text-secondary hover:text-text hover:bg-surface-raised'
153	                  }`}
154	                >
155	                  {link.label}
156	                </Link>
157	              )
158	            })}
159

160

161	      )}
162	    </>
163	  )
164	}
165
[result-id: r4]


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-12 sm: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-4 sm:px-6"
27	      >
28	        {children}
29	      </motion.div>
30	    </section>
31	  )
32	}
33
[result-id: r5]


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-lg 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: r6]


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-lg 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: r7]


Now let me read the remaining components:


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-lg 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-lg 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: r8]


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-lg 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: r9]


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	            className="h-full"
31	          >
32	            <SectionCard section={section} />
33	          </motion.div>
34	        ))}
35	      </motion.div>
36

37	  )
38	}
39
[result-id: r10]


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={`h-full bg-surface border border-surface-border border-l-4 ${colors.border} rounded-lg 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: r11]


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

19

20	        KPI Framework
21

22

23

24
Performance Visibility

25

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

40

41
42	      <AnimatePresence mode="wait">
43	        <motion.div
44	          key={activeTab}
45	          className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-5"
46	          initial="hidden"
47	          animate="visible"
48	          exit={{ opacity: 0, transition: { duration: 0.15 } }}
49	          variants={{ visible: { transition: { staggerChildren: 0.06 } } }}
50	        >
51	          {filtered.map((kpi) => (
52	            <motion.div
53	              key={kpi.id}
54	              variants={{
55	                hidden: { opacity: 0, y: 20 },
56	                visible: { opacity: 1, y: 0, transition: { duration: 0.4, ease: [0.22, 1, 0.36, 1] } },
57	              }}
58	              className="h-full"
59	            >
60	              <KpiCard kpi={kpi} />
61	            </motion.div>
62	          ))}
63	        </motion.div>
64	      </AnimatePresence>
65

66	  )
67	}
68
[result-id: r12]


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-lg 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: r13]


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 h-full"
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: r14]


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-lg 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: r15]


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: r16]


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="h-full bg-surface border border-surface-border rounded-lg 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: r17]


1	'use client'
2
3	import { motion } from 'framer-motion'
4	import { type DecisionLayer } from '@/content/governance'
5
6	interface DecisionLayerProps {
7	  layer: DecisionLayer
8	  index: number
9	}
10
11	const accentColors = [
12	  'border-l-primary',
13	  'border-l-accent',
14	  'border-l-gold',
15	  'border-l-success',
16	]
17
18	export default function DecisionLayerCard({ layer, index }: DecisionLayerProps) {
19	  const borderColor = accentColors[index % accentColors.length]
20
21	  return (
22	    <motion.div
23	      variants={{
24	        hidden: { opacity: 0, y: 20 },
25	        visible: { opacity: 1, y: 0, transition: { duration: 0.4, ease: [0.22, 1, 0.36, 1] } },
26	      }}
27	      whileHover={{ y: -3, transition: { duration: 0.2 } }}
28	      className={`bg-surface border border-surface-border border-l-4 ${borderColor} rounded-lg p-5 shadow-card hover:shadow-raised hover:bg-surface-raised transition-all duration-200`}
29	    >
30

31
{layer.name}

32
33	          {layer.cadence}
34
35

36
{layer.description}

37
38

39

40

41	            Participants
42

43

44	            {layer.participants.map((p, i) => (
45
49	                {p}
50
51	            ))}
52

53

54

55

56	            Scope
57

58
{layer.scope}

59

60

61	    </motion.div>
62	  )
63	}
64
[result-id: r18]


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	                <motion.div
66	                  key={item.id}
67	                  whileHover={{ y: -3, transition: { duration: 0.2 } }}
68	                  className="bg-surface border border-surface-border rounded-lg p-4 shadow-card hover:shadow-raised hover:bg-surface-raised transition-all duration-200"
69	                >
70

71

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

75
80	                      {statusLabels[item.status]}
81
82

83
84
{item.title}

85

86	                    {item.description}
87

88

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

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

97

98	  )
99	}
100
[result-id: r19]


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: r20]


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

48

49

50
51	              {categoryLabels[risk.category] ?? risk.category}
52
53
58	              {statusLabels[risk.status]}
59
60

61

62
63
{risk.title}

64
{risk.description}

65
66

67

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

71

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

75

76
77
Owner: {risk.owner}

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

95
96	      {expanded && (
97

98
Mitigations

99

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

102
103	                {m}
104

105	            ))}
106

107

108	      )}
109	    </motion.div>
110	  )
111	}
112
[result-id: r21]


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

35

36	        Section Responsibilities
37

38

39
Who Owns What

40
41	      <motion.div
42	        className="space-y-4"
43	        initial="hidden"
44	        whileInView="visible"
45	        viewport={{ once: true, margin: '-10%' }}
46	        variants={{ visible: { transition: { staggerChildren: 0.09 } } }}
47	      >
48	        {sections.map((section) => {
49	          const isOpen = openId === section.id
50	          const colors = colorClasses[section.id] ?? colorClasses['adoption-office']
51
52	          return (
53	            <motion.div
54	              key={section.id}
55	              variants={{
56	                hidden: { opacity: 0, y: 20 },
57	                visible: { opacity: 1, y: 0, transition: { duration: 0.4, ease: [0.22, 1, 0.36, 1] } },
58	              }}
59	              className={`bg-surface border border-surface-border border-l-4 ${colors.border} rounded-lg shadow-card overflow-hidden`}
60	            >
61	              <button
62	                onClick={() => toggle(section.id)}
63	                aria-expanded={isOpen}
64	                className="w-full flex items-center justify-between px-6 py-4 text-left hover:bg-surface-raised transition-colors duration-150"
65	              >
66

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

69	                    {section.tagline}
70

71

72	                {isOpen ? (
73	                  <ChevronUp className="w-5 h-5 text-text-dim flex-shrink-0" />
74	                ) : (
75	                  <ChevronDown className="w-5 h-5 text-text-dim flex-shrink-0" />
76	                )}
77	              </button>
78
79	              <AnimatePresence initial={false}>
80	                {isOpen && (
81	                  <motion.div
82	                    initial={{ height: 0, opacity: 0 }}
83	                    animate={{ height: 'auto', opacity: 1, transition: { duration: 0.3, ease: [0.22, 1, 0.36, 1] } }}
84	                    exit={{ height: 0, opacity: 0, transition: { duration: 0.2 } }}
85	                    className="overflow-hidden"
86	                  >
87

88

89

90	                          Responsibilities
91

92

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

95
96	                              {r}
97

98	                          ))}
99

100

101
102

103

104

105	                            Core Activities
106

107

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

110
111	                                {a}
112

113	                            ))}
114

115

116
117

118

119	                            Key Deliverables
120

121

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

124
125	                                {d}
126

127	                            ))}
128

129

130

131
132

133

134	                          Stakeholders
135

136

137	                          {section.stakeholders.map((s, i) => (
138	                            <span
139	                              key={i}
140	                              className={`text-xs px-2.5 py-1 rounded-full border font-semibold ${colors.badge}`}
141	                            >
142	                              {s}
143
144	                          ))}
145

146

147

148	                  </motion.div>
149	                )}
150	              </AnimatePresence>
151	            </motion.div>
152	          )
153	        })}
154	      </motion.div>
155

156	  )
157	}
158
[result-id: r22]


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 */}
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, transition: { duration: 0.45, ease: [0.22, 1, 0.36, 1] } },
47	              }}
48	              whileHover={{ y: -3, transition: { duration: 0.2 } }}
49	              className="bg-surface border border-surface-border rounded-lg p-6 shadow-card hover:shadow-raised hover:bg-surface-raised transition-all duration-200"
50	            >
51	              {Icon && (
52

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

55	              )}
56
{pillar.title}

57
{pillar.description}

58	            </motion.div>
59	          )
60	        })}
61	      </motion.div>
62
63	      {/* Key Stats */}
64	      <motion.div
65	        className="grid grid-cols-1 sm:grid-cols-3 gap-4 mb-10"
66	        initial="hidden"
67	        whileInView="visible"
68	        viewport={{ once: true, margin: '-10%' }}
69	        variants={{ visible: { transition: { staggerChildren: 0.08 } } }}
70	      >
71	        {emphasisMetrics.map((metric) => (
72	          <motion.div
73	            key={metric.id}
74	            variants={{
75	              hidden: { opacity: 0, y: 20 },
76	              visible: { opacity: 1, y: 0, transition: { duration: 0.4, ease: [0.22, 1, 0.36, 1] } },
77	            }}
78	            whileHover={{ y: -3, transition: { duration: 0.2 } }}
79	            className="bg-surface border border-surface-border rounded-lg p-5 shadow-card hover:shadow-raised hover:bg-surface-raised transition-all duration-200 text-center"
80	          >
81

82	              {metric.value}
83	              {metric.unit && (
84	                {metric.unit}
85	              )}
86

87
{metric.label}

88
{metric.trend}

89	          </motion.div>
90	        ))}
91	      </motion.div>
92
93	      {/* Section contributions */}
94

95

96	          Section Contributions to DEWA Mission
97

98	        <motion.div
99	          className="space-y-4"
100	          initial="hidden"
101	          whileInView="visible"
102	          viewport={{ once: true, margin: '-10%' }}
103	          variants={{ visible: { transition: { staggerChildren: 0.07 } } }}
104	        >
105	          {sections.map((section) => {
106	            const colors = sectionColorClasses[section.id] ?? sectionColorClasses['adoption-office']
107	            return (
108	              <motion.div
109	                key={section.id}
110	                variants={{
111	                  hidden: { opacity: 0, y: 20 },
112	                  visible: { opacity: 1, y: 0, transition: { duration: 0.4, ease: [0.22, 1, 0.36, 1] } },
113	                }}
114	                whileHover={{ y: -3, transition: { duration: 0.2 } }}
115	                className={`bg-surface border border-surface-border border-l-4 ${colors.border} rounded-lg p-5 shadow-card hover:shadow-raised hover:bg-surface-raised transition-all duration-200`}
116	              >
117

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

119	                  <span className={`text-xs px-2 py-0.5 rounded-full border font-semibold hidden sm:inline-flex ${colors.badge}`}>
120	                    {section.tagline}
121
122

123
{section.purpose}

124	              </motion.div>
125	            )
126	          })}
127	        </motion.div>
128

129
130	      {/* AlHasbah closing statement */}
131	      <motion.div
132	        initial={{ opacity: 0, y: 20 }}
133	        whileInView={{ opacity: 1, y: 0 }}
134	        viewport={{ once: true, margin: '-10%' }}
135	        transition={{ duration: 0.45, ease: [0.22, 1, 0.36, 1] }}
136	        className="bg-surface border border-gold/30 rounded-lg p-6 shadow-card relative overflow-hidden"
137	      >
138

139

140

141	            AlHasbah Direction
142

143
{department.alhashbahNote}

144

145	      </motion.div>
146

147	  )
148	}
149
[result-id: r23]


Now I have a complete picture of all files. Let me make the targeted mobile fixes. I'll work through them file by file:


Edit

      {/* Back link */}
      <div className="mx-auto max-w-content px-6 pt-24 pb-0">

      {/* Back link */}
      <div className="mx-auto max-w-content px-4 sm:px-6 pt-24 pb-0">


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


{/* ── Hero ──────────────────────────────────────────── */}

{/* ── Hero ──────────────────────────────────────────── */}


            <motion.h1
              variants={reveal}
              className="text-4xl font-bold text-text leading-tight max-w-3xl mb-5"
            >

            <motion.h1
              variants={reveal}
              className="text-2xl sm:text-3xl lg:text-4xl font-bold text-text leading-tight max-w-3xl mb-5"
            >


{/* ── The Challenge ─────────────────────────────────── */}

{/* ── The Challenge ─────────────────────────────────── */}


            <motion.div
              variants={stagger(0.08)}
              className="grid grid-cols-1 md:grid-cols-3 gap-6"
            >
              {challengeCards.map((card) => (

            <motion.div
              variants={stagger(0.08)}
              className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6"
            >
              {challengeCards.map((card) => (


{/* ── The Solution ──────────────────────────────────── */}

{/* ── The Solution ──────────────────────────────────── */}


{/* ── Tech Stack ────────────────────────────────────── */}

{/* ── Tech Stack ────────────────────────────────────── */}


className="inline-flex items-center gap-2 px-5 py-2.5 bg-primary text-white rounded-pill text-sm font-semibold hover:bg-[#27A28D] transition-colors duration-150 no-underline flex-shrink-0"

className="inline-flex items-center justify-center gap-2 px-5 py-3 min-h-[44px] bg-primary text-white rounded-pill text-sm font-semibold hover:bg-[#27A28D] transition-colors duration-150 no-underline flex-shrink-0 w-full sm:w-auto"


Now fix the vibe page:


      {/* Back link */}
      <div className="mx-auto max-w-content px-6 pt-24 pb-0">

      {/* Back link */}
      <div className="mx-auto max-w-content px-4 sm:px-6 pt-24 pb-0">


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


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


            <motion.h1
              variants={reveal}
              className="text-4xl font-bold text-text leading-tight max-w-2xl mb-5"
            >

            <motion.h1
              variants={reveal}
              className="text-2xl sm:text-3xl lg:text-4xl font-bold text-text leading-tight max-w-2xl mb-5"
            >


Now fix the stat grid in vibe/page.tsx — `grid-cols-2 md:grid-cols-4` → add `sm:grid-cols-2` and the `text-3xl` stat values:


170	            <motion.div
171	              variants={stagger(0.07)}
172	              className="grid grid-cols-2 md:grid-cols-4 gap-5"
173	            >
174	              {buildStats.map((stat) => (
175	                <BigStat key={stat.label} stat={stat} />
176	              ))}
177	            </motion.div>
178	          </motion.div>
179

180

181
182	      {/* ── Efficiency ────────────────────────────────────── */}
183

184

[result-id: r24]


Now let me fix the KpiCockpit tabs so they scroll horizontally on small screens, and fix remaining components:


Performance Visibility

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

Performance Visibility

          {tabs.map((tab) => (
            <button
              key={tab}
              onClick={() => setActiveTab(tab)}
              className={`px-4 py-2 min-h-[44px] rounded-full text-sm font-medium transition-all duration-150 flex-shrink-0 ${
                activeTab === tab
                  ? 'bg-primary text-white shadow-card'
                  : 'text-text-secondary hover:text-text'
              }`}
            >
              {tab}
            </button>
          ))}


The file /Users/khalidbinkalban/Desktop/My Workstation/dewa-ai-adoption/src/components/kpis/KpiCockpit.tsx has been updated successfully.


Now fix the GovernanceMap — the controls table needs `overflow-x-auto` wrapper:


          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]}

          ))}

          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]}

            ))}


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


Now fix the GovernanceMap headings and principle grid:


How AI Adoption is Controlled and Overseen

How AI Adoption is Controlled and Overseen


Now fix all remaining component headings and grids. Let me do them all at once:


Three Sections. One Unified Department.

      <motion.div
        className="grid grid-cols-1 md:grid-cols-3 gap-6"

Three Sections. One Unified Department.

      <motion.div
        className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6"


The file /Users/khalidbinkalban/Desktop/My Workstation/dewa-ai-adoption/src/components/structure/DepartmentMap.tsx has been updated successfully.


className="grid grid-cols-1 md:grid-cols-3 gap-6 mt-6"

className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6 mt-6"


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


The file /Users/khalidbinkalban/Desktop/My Workstation/dewa-ai-adoption/src/components/operating-model/OperatingFlow.tsx has been updated successfully.


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


The file /Users/khalidbinkalban/Desktop/My Workstation/dewa-ai-adoption/src/components/risks/RiskRegister.tsx has been updated successfully.


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


Why This Department Matters to DEWA

      {/* Value Pillars */}
      <motion.div
        className="grid grid-cols-1 md:grid-cols-3 gap-6 mb-10"

Why This Department Matters to DEWA

      {/* Value Pillars */}
      <motion.div
        className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6 mb-10"


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


Now fix the RiskCard expand button touch target, and the ResponsibilityPanel button touch target:


        <button
          onClick={() => setExpanded((p) => !p)}
          aria-expanded={expanded}
          className="flex items-center gap-1.5 text-xs font-medium text-primary hover:text-accent transition-colors duration-150"
        >

        <button
          onClick={() => setExpanded((p) => !p)}
          aria-expanded={expanded}
          className="flex items-center gap-1.5 text-xs font-medium text-primary hover:text-accent transition-colors duration-150 min-h-[44px] py-2"
        >


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


              <button
                onClick={() => toggle(section.id)}
                aria-expanded={isOpen}
                className="w-full flex items-center justify-between px-6 py-4 text-left hover:bg-surface-raised transition-colors duration-150"
              >

              <button
                onClick={() => toggle(section.id)}
                aria-expanded={isOpen}
                className="w-full flex items-center justify-between px-4 sm:px-6 py-4 min-h-[56px] text-left hover:bg-surface-raised transition-colors duration-150"
              >


Now fix the DecisionLayer to handle small screens better (the flex layout):


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


Now fix the SiteNav — the mobile menu items already have py-3 which is 12px padding each side, giving ~44px+ touch targets. Let me verify there are no issues and also improve a few details in the nav. The nav looks mostly good, but let me ensure the logo text doesn't overflow on small screens:


<Link href="/" className="flex items-center gap-3 flex-shrink-0 no-underline hover:no-underline">

              AI

              DEWA
              AI Adoption Department

          </Link>

<Link href="/" className="flex items-center gap-2 sm:gap-3 flex-shrink-0 no-underline hover:no-underline min-w-0">

              AI

              DEWA
              AI Adoption Department

          </Link>


The file /Users/khalidbinkalban/Desktop/My Workstation/dewa-ai-adoption/src/components/layout/SiteNav.tsx has been updated successfully.


Now let's also make the theme toggle and hamburger buttons have proper touch targets:


            <button
              onClick={toggleTheme}
              className="p-2 rounded-md text-text-secondary hover:text-text hover:bg-surface-raised transition-colors duration-150"
              aria-label="Toggle theme"
            >
              {theme === 'dark' ? <Sun size={16} /> : <Moon size={16} />}
            </button>
            <button
              className="lg:hidden p-2 text-text-secondary hover:text-text transition-colors"
              onClick={() => setMobileOpen((v) => !v)}
              aria-label="Toggle menu"
              aria-expanded={mobileOpen}
            >
              {mobileOpen ? <X size={20} /> : <Menu size={20} />}
            </button>

            <button
              onClick={toggleTheme}
              className="p-2.5 min-h-[44px] min-w-[44px] flex items-center justify-center rounded-md text-text-secondary hover:text-text hover:bg-surface-raised transition-colors duration-150"
              aria-label="Toggle theme"
            >
              {theme === 'dark' ? <Sun size={16} /> : <Moon size={16} />}
            </button>
            <button
              className="lg:hidden p-2.5 min-h-[44px] min-w-[44px] flex items-center justify-center text-text-secondary hover:text-text transition-colors"
              onClick={() => setMobileOpen((v) => !v)}
              aria-label="Toggle menu"
              aria-expanded={mobileOpen}
            >
              {mobileOpen ? <X size={20} /> : <Menu size={20} />}
            </button>


Now let me also fix the HeroBanner tagline text responsiveness:


The file /Users/khalidbinkalban/Desktop/My Workstation/dewa-ai-adoption/src/components/overview/HeroBanner.tsx has been updated successfully.


Now fix the MissionStatement padding inside the expanded panel on mobile:


<motion.div
          variants={{
            hidden: { opacity: 0, y: 24 },
            visible: { opacity: 1, y: 0, transition: { duration: 0.45, ease: [0.22, 1, 0.36, 1] } },
          }}
          whileHover={{ y: -3, transition: { duration: 0.2 } }}
          className="bg-surface border border-surface-border rounded-lg p-6 shadow-card hover:shadow-raised hover:bg-surface-raised transition-all duration-200"
        >

Mandate

{department.mandate}

<motion.div
          variants={{
            hidden: { opacity: 0, y: 24 },
            visible: { opacity: 1, y: 0, transition: { duration: 0.45, ease: [0.22, 1, 0.36, 1] } },
          }}
          whileHover={{ y: -3, transition: { duration: 0.2 } }}
          className="bg-surface border border-surface-border rounded-lg p-4 sm:p-6 shadow-card hover:shadow-raised hover:bg-surface-raised transition-all duration-200"
        >

Mandate

{department.mandate}


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


Now fix the AlHasbah note card:


className="bg-surface border border-gold/30 rounded-lg p-6 shadow-card hover:shadow-raised hover:bg-surface-raised transition-all duration-200 relative overflow-hidden"

className="bg-surface border border-gold/30 rounded-lg p-4 sm:p-6 shadow-card hover:shadow-raised hover:bg-surface-raised transition-all duration-200 relative overflow-hidden"


Now fix the StrategicImpact - the AlHasbah note text size:


className="bg-surface border border-gold/30 rounded-lg p-6 shadow-card relative overflow-hidden"

className="bg-surface border border-gold/30 rounded-lg p-4 sm:p-6 shadow-card relative overflow-hidden"


<tool_use_error>String to replace not found in file.
String:           className="bg-surface border border-gold/30 rounded-lg p-6 shadow-card relative overflow-hidden"</tool_use_error>

Error: String to replace not found in file.
String:           className="bg-surface border border-gold/30 rounded-lg p-6 shadow-card relative overflow-hidden"


136:        className="bg-surface border border-gold/30 rounded-lg p-6 shadow-card relative overflow-hidden"


className="bg-surface border border-gold/30 rounded-lg p-6 shadow-card relative overflow-hidden"

className="bg-surface border border-gold/30 rounded-lg p-4 sm:p-6 shadow-card relative overflow-hidden"


Now fix the KpiCockpit grid to already be good (it's `grid-cols-1 md:grid-cols-2 lg:grid-cols-3` which is fine). Let me check if any remaining grids need `sm:` intermediary breakpoints. The `grid-cols-1 lg:grid-cols-3` in RoadmapView could use `sm:grid-cols-2` but since it's a "Now/Next/Future" column layout, keeping them as single column then 3 on desktop is fine for readability.

Let me now also fix the `flex items-center gap-4` severity/likelihood row in RiskCard that could overflow on very small screens:


            <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}

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

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


Now let me also fix the journey page's stats `text-3xl` stat values and the solution pipeline `flex gap-6` which could be tight on mobile:


78	              {journeyHero.stats.map((stat) => (
79	                <motion.div
80	                  key={stat.label}
81	                  variants={reveal}
82	                  className="bg-surface border border-surface-border rounded-lg p-5 shadow-card"
83	                >
84

85	                    {stat.label}
86

87

88	                    {stat.value}
89	                    {stat.unit && (
90	                      {stat.unit}
91	                    )}
92

93	                </motion.div>
94	              ))}
95	            </motion.div>
96	          </motion.div>
97

98

99
100	      {/* ── The Challenge ─────────────────────────────────── */}
101

102

[result-id: r25]


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

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


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


Now fix the solution pipeline steps' `flex gap-6` — the number icon is 40px wide + 24px gap = 64px on the left, leaving enough room. But let's make the gap slightly smaller on mobile:


className="flex gap-6 pb-8 last:pb-0"
                >
                  {/* Left: number + line */}

className="flex gap-4 sm:gap-6 pb-8 last:pb-0"
                >
                  {/* Left: number + line */}


Now fix the vibe page BigStat `text-3xl` values:


      <p className="text-3xl font-bold text-gold leading-none">
        {stat.value.startsWith('~') ? '~' : ''}{displayValue}

      <p className="text-2xl sm:text-3xl font-bold text-gold leading-none">
        {stat.value.startsWith('~') ? '~' : ''}{displayValue}


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


<p className={`text-3xl font-bold ${stat.colorClass} leading-none`}>

<p className={`text-2xl sm:text-3xl font-bold ${stat.colorClass} leading-none`}>


Also fix the vibe page build timeline `flex gap-6`:


                  className="flex gap-6 pb-8 last:pb-0"
                >
                  {/* Marker */}
                  <div className="flex flex-col items-center flex-shrink-0">

                  className="flex gap-4 sm:gap-6 pb-8 last:pb-0"
                >
                  {/* Marker */}
                  <div className="flex flex-col items-center flex-shrink-0">


Also fix the KpiCard `text-3xl` value:


<span className="text-3xl font-bold text-gold">

<span className="text-2xl sm:text-3xl font-bold text-gold">


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


Also fix StrategicImpact key stats `text-3xl`:


<p className="text-3xl font-bold text-gold mb-1">

<p className="text-2xl sm:text-3xl font-bold text-gold mb-1">


Also fix KpiStrip MetricCard `text-2xl`:


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

<p className={`text-xl sm:text-2xl font-bold ${metric.emphasis ? 'text-gold' : 'text-text'}`}>


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


Now let's also fix the FlowStage `text-4xl` number:


<span className="text-4xl font-bold text-text-dim/30 leading-none select-none">

<span className="text-3xl sm:text-4xl font-bold text-text-dim/30 leading-none select-none">


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


Now fix the challenge cards `text-4xl` in journey page:


<span className="text-4xl font-bold text-text-dim/20 leading-none select-none block mb-4">

<span className="text-3xl sm:text-4xl font-bold text-text-dim/20 leading-none select-none block mb-4">


Now let's run the build to check for any TypeScript errors:


Bash

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


> 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.7 kB         146 kB
├ ○ /_not-found                          873 B          88.2 kB
├ ○ /journey                             3.68 kB         141 kB
└ ○ /vibe                                4.71 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: r26]
[rerun: b1]


Build passes cleanly with no errors. Here's a summary of every change made:

**Pages fixed:**

- `/src/app/journey/page.tsx` — All section padding changed to `py-12 sm:py-20`, all `px-6` → `px-4 sm:px-6`. H1 `text-4xl` → `text-2xl sm:text-3xl lg:text-4xl`. Challenge grid `md:grid-cols-3` → `sm:grid-cols-2 lg:grid-cols-3`. Stat values `text-3xl` → `text-2xl sm:text-3xl`. Pipeline steps `gap-6` → `gap-4 sm:gap-6`, number circle sized down on mobile. CTA button gets `min-h-[44px] w-full sm:w-auto`.

- `/src/app/vibe/page.tsx` — Same section padding fixes, `px-4 sm:px-6` applied everywhere, H1 responsive. BigStat and EfficiencyItem values `text-3xl` → `text-2xl sm:text-3xl`. Timeline steps `gap-6` → `gap-4 sm:gap-6`.

**Components fixed:**

- `SiteNav.tsx` — Theme toggle and hamburger get `min-h-[44px] min-w-[44px]` touch targets with flex centering. Logo uses `min-w-0` to prevent overflow.

- `HeroBanner.tsx` — Mission text `text-md` → `text-sm sm:text-base` with `max-w-full sm:max-w-3xl`.

- `MissionStatement.tsx` — Cards use `p-4 sm:p-6`, body text `text-sm sm:text-base`.

- `ValuePillars.tsx` — Grid `md:grid-cols-3` → `sm:grid-cols-2 lg:grid-cols-3`.

- `DepartmentMap.tsx` — Heading `text-xl sm:text-2xl`, grid `md:grid-cols-3` → `sm:grid-cols-2 lg:grid-cols-3`.

- `KpiCockpit.tsx` — Header row stacks on mobile (`flex-col sm:flex-row`), heading `text-xl sm:text-2xl`, tab buttons get `min-h-[44px]`, tabs container `overflow-x-auto`.

- `KpiCard.tsx` — Value `text-3xl` → `text-2xl sm:text-3xl`.

- `OperatingFlow.tsx` — Heading `text-xl sm:text-2xl`.

- `FlowStage.tsx` — Step number `text-4xl` → `text-3xl sm:text-4xl`.

- `GovernanceMap.tsx` — Heading `text-xl sm:text-2xl`. Controls table wrapped in `overflow-x-auto` with `min-w-[600px]` inner container to prevent table distortion on small screens.

- `DecisionLayer.tsx` — Header row uses `flex-wrap` to prevent overflow.

- `RoadmapView.tsx` — Heading `text-xl sm:text-2xl`.

- `RiskRegister.tsx` — Heading `text-xl sm:text-2xl`.

- `RiskCard.tsx` — Expand button gets `min-h-[44px] py-2`. Severity/likelihood row uses `flex-wrap gap-3`.

- `ResponsibilityPanel.tsx` — Heading `text-xl sm:text-2xl`, accordion button gets `px-4 sm:px-6 min-h-[56px]`.

- `StrategicImpact.tsx` — Heading `text-xl sm:text-2xl`, value pillars grid `md:grid-cols-3` → `sm:grid-cols-2 lg:grid-cols-3`, stat values `text-3xl` → `text-2xl sm:text-3xl`, AlHasbah card `p-4 sm:p-6`.