Apply the DEWA Design System to the Next.js project at `/Users/khalidbinkalban/Desktop/My Workstation/dewa-ai-adoption`.

The design system spec is:

**Colors — Light Mode:**
- Background: #FFFFFF
- Surface (Input/100): #F2F3F3
- Surface raised: #E5F1EF (active background)
- Surface border (Lines/200): #EFEFF1
- Card border (300): #D7D7DF
- Primary: #007560
- Primary dim (variant): #004937
- Primary hover: #27A28D
- Success: #007560 (same as primary)
- Warning bg: #FCF5E7
- Error: #B00020
- Alert yellow: #FFC600
- Text (900): #222222
- Text secondary (600): #6F6F6F
- Text dim: #6F6F6F (same)
- Elevation fill: #D9EAE7
- Elevation hover fill: #E5F1EF

**Colors — Dark Mode:**
- Background: #212427
- Surface (Input/100): #373B40
- Surface raised: #2B4E48
- Surface border (Lines/200): #5A5A5A
- Card border: #5A5A5A
- Primary: #7FC9BB
- Primary dim: #27A28D
- Primary hover: #004937
- Error: #CF6679
- Warning: #916C0F
- Alert yellow: #856700
- Text (900): #E2E2E2
- Text header: #FFFFFF
- Text secondary (600): #BDBDBD
- Text dim: #BDBDBD

**Data viz colors:**
- Deep blue light: #152685 / dark: #788DD1
- Blue-violet light: #6C47CC / dark: #A28EF2
- Sky blue light: #60A5FA / dark: #065EC9

**Typography:** Dubai font from Google Fonts (family: "Dubai"). Replace Inter.
Sizes: 80px display, 48px h1, 32px h3, 16px body, 14px caption, 12px small.

**Border Radius:**
- Input fields: 5px
- Small elements (tags, badges): 7px
- Standard cards: 15px
- Hero containers: 20px
- Buttons: 100px (full pill)

**Shadows:**
Light: subtle border + optional tint, NO heavy drop shadows. Use 1px border #D7D7DF.
Dark: border #5A5A5A.

**Key rules:**
- Primary green is the brand color (NOT blue)
- Full pill (100px radius) for ALL buttons
- No yellow for buttons — yellow is alerts only
- Cards get 15px radius, hero sections get 20px radius

**What to change:**

1. **`src/app/globals.css`** — Replace all CSS variable values with the DEWA tokens above. Keep the same variable names (`--color-bg`, `--color-surface`, etc.) but update values. Add `--color-elevation-fill` and `--color-elevation-hover` variables.

2. **`tailwind.config.ts`** — Update:
   - `borderRadius`: `{ sm: '5px', md: '7px', lg: '15px', xl: '20px', full: '9999px', pill: '100px' }`
   - Keep all color tokens (they reference CSS vars, values change via CSS)
   - Add `accent` token pointing to `var(--color-primary)` (since accent was blue, now use green)
   - `gold` token can remain for data viz
   - Update `boxShadow`:
     ```
     card: '0 0 0 1px var(--color-card-border)',
     raised: '0 0 0 1px var(--color-primary)',
     'glow-blue': 'none',
     'glow-gold': 'none',
     ```
   - Add `--color-card-border` CSS variable

3. **`src/app/layout.tsx`** — Replace Inter with Dubai font from Google Fonts:
   ```tsx
   import { Dubai } from 'next/font/google'
   const dubai = Dubai({ subsets: ['latin'], weight: ['300', '400', '500', '700'], variable: '--font-dubai' })
   ```
   Use `dubai.variable` in body className.

4. **`src/components/layout/SiteNav.tsx`** — Update nav background inline style to use the new light/dark colors from the design system.

5. **All button elements across all pages/components** — Change `rounded-lg` to `rounded-pill` or `rounded-full`. Primary buttons should use `bg-primary text-white`. Update hover states to use `hover:bg-[#27A28D]` (light) or appropriate.

6. **KPI filter tabs in `src/components/kpis/KpiCockpit.tsx`** — Active tab: `bg-primary text-white rounded-full`.

7. **Cards across all components** — Change `rounded-xl` to `rounded-lg` (15px). Hero/large containers use `rounded-[20px]`.

8. **Update `shadow-glow-blue`** usages — since we no longer have blue glow, replace with `shadow-card`.

**Files to read first before editing:**
- `src/app/globals.css`
- `tailwind.config.ts`
- `src/app/layout.tsx`
- `src/components/layout/SiteNav.tsx`
- `src/components/kpis/KpiCockpit.tsx`
- `src/components/overview/HeroBanner.tsx`
- `src/app/journey/page.tsx`
- `src/app/vibe/page.tsx`

After all changes, run `npm run build` in `/Users/khalidbinkalban/Desktop/My Workstation/dewa-ai-adoption` to verify no errors. Fix any TypeScript or build errors found.

IMPORTANT: The Dubai font might not be directly available as `Dubai` in `next/font/google`. If the import fails, check what's available — it may be listed differently. If Dubai font is not available on Google Fonts, use `Noto Sans` as a fallback and add a comment.


I'll start by reading all the relevant files before making any changes.


1	@import "tw-animate-css";
2	@import "shadcn/tailwind.css";
3	@tailwind base;
4	@tailwind components;
5	@tailwind utilities;
6
7	@layer base {
8	  /* ── Dark theme (default) ── */
9	  :root,
10	  [data-theme="dark"] {
11	    --color-bg:             #070D1A;
12	    --color-surface:        #0D1627;
13	    --color-surface-raised: #132035;
14	    --color-surface-border: #1E3A5F;
15
16	    --color-primary:        #0066FF;
17	    --color-primary-dim:    #0044BB;
18	    --color-accent:         #00C2FF;
19	    --color-gold:           #F0A500;
20	    --color-gold-dim:       #C98800;
21
22	    --color-success:        #22C55E;
23	    --color-warning:        #F59E0B;
24	    --color-danger:         #EF4444;
25	    --color-info:           #38BDF8;
26
27	    --color-text:           #EEF2FF;
28	    --color-text-secondary: #8BAFD4;
29	    --color-text-dim:       #4A6B8A;
30
31	    --shadow-card:      0 1px 3px rgba(0,0,0,0.4), 0 0 0 1px rgba(30,58,95,0.6);
32	    --shadow-raised:    0 4px 16px rgba(0,0,0,0.5), 0 0 0 1px rgba(0,102,255,0.15);
33	    --shadow-glow-blue: 0 0 24px rgba(0,102,255,0.2);
34	    --shadow-glow-gold: 0 0 24px rgba(240,165,0,0.15);
35
36	    /* shadcn compatibility */
37	    --background: #070D1A;
38	    --foreground: #EEF2FF;
39	    --card: #0D1627;
40	    --card-foreground: #EEF2FF;
41	    --border: #1E3A5F;
42	    --ring: #0066FF;
43	    --radius: 0.75rem;
44	  }
45
46	  /* ── Light theme ── */
47	  [data-theme="light"] {
48	    --color-bg:             #EEF2FB;
49	    --color-surface:        #FFFFFF;
50	    --color-surface-raised: #E4EAF8;
51	    --color-surface-border: #C8D3E8;
52
53	    --color-primary:        #0055DD;
54	    --color-primary-dim:    #003DB5;
55	    --color-accent:         #0090B8;
56	    --color-gold:           #C57F0A;
57	    --color-gold-dim:       #A66805;
58
59	    --color-success:        #15803D;
60	    --color-warning:        #B45309;
61	    --color-danger:         #DC2626;
62	    --color-info:           #0284C7;
63
64	    --color-text:           #0D1A2E;
65	    --color-text-secondary: #3A4F6B;
66	    --color-text-dim:       #617183;
67
68	    --shadow-card:      0 1px 3px rgba(0,0,0,0.07), 0 0 0 1px rgba(0,0,0,0.06);
69	    --shadow-raised:    0 4px 16px rgba(0,0,0,0.1), 0 0 0 1px rgba(0,85,221,0.12);
70	    --shadow-glow-blue: 0 0 20px rgba(0,85,221,0.1);
71	    --shadow-glow-gold: 0 0 20px rgba(197,127,10,0.1);
72
73	    /* shadcn compatibility */
74	    --background: #EEF2FB;
75	    --foreground: #0D1A2E;
76	    --card: #FFFFFF;
77	    --card-foreground: #0D1A2E;
78	    --border: #C8D3E8;
79	    --ring: #0055DD;
80	    --radius: 0.75rem;
81	  }
82
83	  * {
84	    box-sizing: border-box;
85	  }
86
87	  html {
88	    scroll-behavior: smooth;
89	    background-color: var(--color-bg);
90	    transition: background-color 0.2s ease;
91	  }
92
93	  body {
94	    background-color: var(--color-bg);
95	    color: var(--color-text);
96	    font-family: var(--font-inter), ui-sans-serif, system-ui, sans-serif;
97	    -webkit-font-smoothing: antialiased;
98	    -moz-osx-font-smoothing: grayscale;
99	    transition: background-color 0.2s ease, color 0.2s ease;
100	  }
101
102	  ::selection {
103	    background-color: rgba(0, 102, 255, 0.2);
104	    color: var(--color-text);
105	  }
106
107	  ::-webkit-scrollbar { width: 6px; }
108	  ::-webkit-scrollbar-track { background: var(--color-bg); }
109	  ::-webkit-scrollbar-thumb { background: var(--color-surface-border); border-radius: 3px; }
110	  ::-webkit-scrollbar-thumb:hover { background: var(--color-primary-dim); }
111	}
112
113	@layer utilities {
114	  .text-balance { text-wrap: balance; }
115
116	  .section-eyebrow {
117	    @apply text-xs font-medium tracking-widest uppercase text-text-dim;
118	  }
119
120	  .section-divider {
121	    @apply w-12 h-0.5 bg-gradient-to-r from-primary to-accent rounded-full my-4;
122	  }
123
124	  .card-base {
125	    @apply bg-surface border border-surface-border rounded-xl p-6 shadow-card hover:shadow-raised hover:bg-surface-raised transition-all duration-200;
126	  }
127
128	  .gradient-text {
129	    @apply bg-gradient-to-r from-primary to-accent bg-clip-text text-transparent;
130	  }
131	}
132
[result-id: r1]


1	import type { Config } from "tailwindcss";
2
3	const config: Config = {
4	  darkMode: "class",
5	  content: [
6	    "./src/pages/**/*.{js,ts,jsx,tsx,mdx}",
7	    "./src/components/**/*.{js,ts,jsx,tsx,mdx}",
8	    "./src/app/**/*.{js,ts,jsx,tsx,mdx}",
9	  ],
10	  theme: {
11	    extend: {
12	      colors: {
13	        // DEWA Design Tokens
14	        bg: "var(--color-bg)",
15	        surface: "var(--color-surface)",
16	        "surface-raised": "var(--color-surface-raised)",
17	        "surface-border": "var(--color-surface-border)",
18	        primary: "var(--color-primary)",
19	        "primary-dim": "var(--color-primary-dim)",
20	        accent: "var(--color-accent)",
21	        gold: "var(--color-gold)",
22	        "gold-dim": "var(--color-gold-dim)",
23	        success: "var(--color-success)",
24	        warning: "var(--color-warning)",
25	        danger: "var(--color-danger)",
26	        info: "var(--color-info)",
27	        text: "var(--color-text)",
28	        "text-secondary": "var(--color-text-secondary)",
29	        "text-dim": "var(--color-text-dim)",
30	      },
31	      fontSize: {
32	        xs: ["11px", { lineHeight: "1.5" }],
33	        sm: ["13px", { lineHeight: "1.5" }],
34	        base: ["15px", { lineHeight: "1.7" }],
35	        md: ["17px", { lineHeight: "1.5" }],
36	        lg: ["20px", { lineHeight: "1.4" }],
37	        xl: ["24px", { lineHeight: "1.3" }],
38	        "2xl": ["30px", { lineHeight: "1.2" }],
39	        "3xl": ["38px", { lineHeight: "1.2" }],
40	        "4xl": ["48px", { lineHeight: "1.1" }],
41	      },
42	      fontWeight: {
43	        regular: "400",
44	        medium: "500",
45	        semibold: "600",
46	        bold: "700",
47	      },
48	      letterSpacing: {
49	        wide: "0.04em",
50	        widest: "0.1em",
51	      },
52	      borderRadius: {
53	        sm: "4px",
54	        md: "8px",
55	        lg: "12px",
56	        xl: "16px",
57	        full: "9999px",
58	      },
59	      boxShadow: {
60	        card:       'var(--shadow-card)',
61	        raised:     'var(--shadow-raised)',
62	        'glow-blue':'var(--shadow-glow-blue)',
63	        'glow-gold':'var(--shadow-glow-gold)',
64	      },
65	      maxWidth: {
66	        content: "1200px",
67	        site: "1440px",
68	      },
69	      spacing: {
70	        "1": "4px",
71	        "2": "8px",
72	        "3": "12px",
73	        "4": "16px",
74	        "5": "20px",
75	        "6": "24px",
76	        "8": "32px",
77	        "10": "40px",
78	        "12": "48px",
79	        "16": "64px",
80	        "20": "80px",
81	        "24": "96px",
82	      },
83	      backgroundImage: {
84	        "gradient-brand": "linear-gradient(135deg, var(--color-primary), var(--color-accent))",
85	      },
86	    },
87	  },
88	  plugins: [],
89	};
90
91	export default config;
92
[result-id: r2]


1	import type { Metadata } from 'next'
2	import { Inter } from 'next/font/google'
3	import './globals.css'
4	import SiteNav from '@/components/layout/SiteNav'
5	import { ThemeProvider } from '@/components/layout/ThemeProvider'
6
7	const inter = Inter({
8	  subsets: ['latin'],
9	  variable: '--font-inter',
10	  display: 'swap',
11	})
12
13	export const metadata: Metadata = {
14	  title: 'DEWA AI Adoption Department — Executive Operating Model',
15	  description:
16	    'Strategic command center presenting the operating model, KPIs, governance, and roadmap of the DEWA AI Adoption Department.',
17	}
18
19	export default function RootLayout({
20	  children,
21	}: Readonly<{
22	  children: React.ReactNode
23	}>) {
24	  return (
25	    <html lang="en" suppressHydrationWarning>
26	      <head>
27	        <script
28	          dangerouslySetInnerHTML={{
29	            __html: `(function(){try{var t=localStorage.getItem('dewa-theme');document.documentElement.setAttribute('data-theme',t==='light'?'light':'dark')}catch(e){}})()`,
30	          }}
31	        />
32	      </head>
33	      <body className={`${inter.variable} antialiased bg-bg text-text`}>
34	        <ThemeProvider>
35	          <SiteNav />
36	          <main className="pt-16">{children}</main>
37	        </ThemeProvider>
38	      </body>
39	    </html>
40	  )
41	}
42
[result-id: r3]


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 { 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-md text-sm font-medium transition-all duration-150 ${
31	                activeTab === tab
32	                  ? 'bg-primary text-white shadow-glow-blue'
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: 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-xl px-4 py-3 shadow-card"
49	              >
50	                {Icon && (
51

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

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

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


Now let me read the remaining files and also check what Google Fonts are available for Dubai font.


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-xl 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-xl 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-xl 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-lg text-sm font-semibold hover:bg-primary-dim 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: r7]


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


Now let me check if Dubai font is available in next/font/google and look for any other components with buttons or cards:


Bash

cd "/Users/khalidbinkalban/Desktop/My Workstation/dewa-ai-adoption" && node -e "const fonts = require('next/dist/compiled/@next/font/dist/google/font-data.json'); const keys = Object.keys(fonts); console.log(keys.filter(k => k.toLowerCase().includes('dubai') || k.toLowerCase().includes('noto')))" 2>/dev/null || echo "Could not check font list"

Check if Dubai font is in next/font/google


[
  'Monoton',
  'Noto Color Emoji',
  'Noto Emoji',
  'Noto Kufi Arabic',
  'Noto Music',
  'Noto Naskh Arabic',
  'Noto Nastaliq Urdu',
  'Noto Rashi Hebrew',
  'Noto Sans',
  'Noto Sans Adlam',
  'Noto Sans Adlam Unjoined',
  'Noto Sans Anatolian Hieroglyphs',
  'Noto Sans Arabic',
  'Noto Sans Armenian',
  'Noto Sans Avestan',
  'Noto Sans Balinese',
  'Noto Sans Bamum',
  'Noto Sans Bassa Vah',
  'Noto Sans Batak',
  'Noto Sans Bengali',
  'Noto Sans Bhaiksuki',
  'Noto Sans Brahmi',
  'Noto Sans Buginese',
  'Noto Sans Buhid',
  'Noto Sans Canadian Aboriginal',
  'Noto Sans Carian',
  'Noto Sans Caucasian Albanian',
  'Noto Sans Chakma',
  'Noto Sans Cham',
  'Noto Sans Cherokee',
  'Noto Sans Chorasmian',
  'Noto Sans Coptic',
  'Noto Sans Cuneiform',
  'Noto Sans Cypriot',
  'Noto Sans Cypro Minoan',
  'Noto Sans Deseret',
  'Noto Sans Devanagari',
  'Noto Sans Display',
  'Noto Sans Duployan',
  'Noto Sans Egyptian Hieroglyphs',
  'Noto Sans Elbasan',
  'Noto Sans Elymaic',
  'Noto Sans Ethiopic',
  'Noto Sans Georgian',
  'Noto Sans Glagolitic',
  'Noto Sans Gothic',
  'Noto Sans Grantha',
  'Noto Sans Gujarati',
  'Noto Sans Gunjala Gondi',
  'Noto Sans Gurmukhi',
  'Noto Sans HK',
  'Noto Sans Hanifi Rohingya',
  'Noto Sans Hanunoo',
  'Noto Sans Hatran',
  'Noto Sans Hebrew',
  'Noto Sans Imperial Aramaic',
  'Noto Sans Indic Siyaq Numbers',
  'Noto Sans Inscriptional Pahlavi',
  'Noto Sans Inscriptional Parthian',
  'Noto Sans JP',
  'Noto Sans Javanese',
  'Noto Sans KR',
  'Noto Sans Kaithi',
  'Noto Sans Kannada',
  'Noto Sans Kawi',
  'Noto Sans Kayah Li',
  'Noto Sans Kharoshthi',
  'Noto Sans Khmer',
  'Noto Sans Khojki',
  'Noto Sans Khudawadi',
  'Noto Sans Lao',
  'Noto Sans Lao Looped',
  'Noto Sans Lepcha',
  'Noto Sans Limbu',
  'Noto Sans Linear A',
  'Noto Sans Linear B',
  'Noto Sans Lisu',
  'Noto Sans Lycian',
  'Noto Sans Lydian',
  'Noto Sans Mahajani',
  'Noto Sans Malayalam',
  'Noto Sans Mandaic',
  'Noto Sans Manichaean',
  'Noto Sans Marchen',
  'Noto Sans Masaram Gondi',
  'Noto Sans Math',
  'Noto Sans Mayan Numerals',
  'Noto Sans Medefaidrin',
  'Noto Sans Meetei Mayek',
  'Noto Sans Mende Kikakui',
  'Noto Sans Meroitic',
  'Noto Sans Miao',
  'Noto Sans Modi',
  'Noto Sans Mongolian',
  'Noto Sans Mono',
  'Noto Sans Mro',
  'Noto Sans Multani',
  'Noto Sans Myanmar',
  'Noto Sans NKo',
  'Noto Sans NKo Unjoined',
  ... 109 more items
]
[result-id: r9]
[rerun: b1]


No files found


find "/Users/khalidbinkalban/Desktop/My Workstation/dewa-ai-adoption/src" -name "*.tsx" | head -40

Find all TSX files in src


/Users/khalidbinkalban/Desktop/My Workstation/dewa-ai-adoption/src/app/journey/page.tsx
/Users/khalidbinkalban/Desktop/My Workstation/dewa-ai-adoption/src/app/layout.tsx
/Users/khalidbinkalban/Desktop/My Workstation/dewa-ai-adoption/src/app/vibe/page.tsx
/Users/khalidbinkalban/Desktop/My Workstation/dewa-ai-adoption/src/app/page.tsx
/Users/khalidbinkalban/Desktop/My Workstation/dewa-ai-adoption/src/components/operating-model/FlowStage.tsx
/Users/khalidbinkalban/Desktop/My Workstation/dewa-ai-adoption/src/components/operating-model/OperatingFlow.tsx
/Users/khalidbinkalban/Desktop/My Workstation/dewa-ai-adoption/src/components/ui/button.tsx
/Users/khalidbinkalban/Desktop/My Workstation/dewa-ai-adoption/src/components/roadmap/RoadmapView.tsx
/Users/khalidbinkalban/Desktop/My Workstation/dewa-ai-adoption/src/components/responsibilities/ResponsibilityPanel.tsx
/Users/khalidbinkalban/Desktop/My Workstation/dewa-ai-adoption/src/components/layout/ThemeProvider.tsx
/Users/khalidbinkalban/Desktop/My Workstation/dewa-ai-adoption/src/components/layout/SectionWrapper.tsx
/Users/khalidbinkalban/Desktop/My Workstation/dewa-ai-adoption/src/components/layout/SiteNav.tsx
/Users/khalidbinkalban/Desktop/My Workstation/dewa-ai-adoption/src/components/kpis/KpiCard.tsx
/Users/khalidbinkalban/Desktop/My Workstation/dewa-ai-adoption/src/components/kpis/KpiCockpit.tsx
/Users/khalidbinkalban/Desktop/My Workstation/dewa-ai-adoption/src/components/kpis/KpiTargetBar.tsx
/Users/khalidbinkalban/Desktop/My Workstation/dewa-ai-adoption/src/components/risks/RiskCard.tsx
/Users/khalidbinkalban/Desktop/My Workstation/dewa-ai-adoption/src/components/risks/RiskRegister.tsx
/Users/khalidbinkalban/Desktop/My Workstation/dewa-ai-adoption/src/components/governance/GovernanceMap.tsx
/Users/khalidbinkalban/Desktop/My Workstation/dewa-ai-adoption/src/components/governance/DecisionLayer.tsx
/Users/khalidbinkalban/Desktop/My Workstation/dewa-ai-adoption/src/components/governance/PrincipleCard.tsx
/Users/khalidbinkalban/Desktop/My Workstation/dewa-ai-adoption/src/components/overview/MissionStatement.tsx
/Users/khalidbinkalban/Desktop/My Workstation/dewa-ai-adoption/src/components/overview/KpiStrip.tsx
/Users/khalidbinkalban/Desktop/My Workstation/dewa-ai-adoption/src/components/overview/ValuePillars.tsx
/Users/khalidbinkalban/Desktop/My Workstation/dewa-ai-adoption/src/components/overview/HeroBanner.tsx
/Users/khalidbinkalban/Desktop/My Workstation/dewa-ai-adoption/src/components/structure/DepartmentMap.tsx
/Users/khalidbinkalban/Desktop/My Workstation/dewa-ai-adoption/src/components/structure/SectionCard.tsx
/Users/khalidbinkalban/Desktop/My Workstation/dewa-ai-adoption/src/components/impact/StrategicImpact.tsx
[result-id: r10]
[rerun: b2]


Dubai font is not available in next/font/google. I'll use `Noto Sans` as the fallback. Now let me check the button component and scan for `rounded-xl`, `shadow-glow-blue`, and button patterns:


1	import { Button as ButtonPrimitive } from "@base-ui/react/button"
2	import { cva, type VariantProps } from "class-variance-authority"
3
4	import { cn } from "@/lib/utils"
5
6	const buttonVariants = cva(
7	  "group/button inline-flex shrink-0 items-center justify-center rounded-lg border border-transparent bg-clip-padding text-sm font-medium whitespace-nowrap transition-all outline-none select-none focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 active:not-aria-[haspopup]:translate-y-px disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
8	  {
9	    variants: {
10	      variant: {
11	        default: "bg-primary text-primary-foreground [a]:hover:bg-primary/80",
12	        outline:
13	          "border-border bg-background hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground dark:border-input dark:bg-input/30 dark:hover:bg-input/50",
14	        secondary:
15	          "bg-secondary text-secondary-foreground hover:bg-secondary/80 aria-expanded:bg-secondary aria-expanded:text-secondary-foreground",
16	        ghost:
17	          "hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground dark:hover:bg-muted/50",
18	        destructive:
19	          "bg-destructive/10 text-destructive hover:bg-destructive/20 focus-visible:border-destructive/40 focus-visible:ring-destructive/20 dark:bg-destructive/20 dark:hover:bg-destructive/30 dark:focus-visible:ring-destructive/40",
20	        link: "text-primary underline-offset-4 hover:underline",
21	      },
22	      size: {
23	        default:
24	          "h-8 gap-1.5 px-2.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2",
25	        xs: "h-6 gap-1 rounded-[min(var(--radius-md),10px)] px-2 text-xs in-data-[slot=button-group]:rounded-lg has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3",
26	        sm: "h-7 gap-1 rounded-[min(var(--radius-md),12px)] px-2.5 text-[0.8rem] in-data-[slot=button-group]:rounded-lg has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3.5",
27	        lg: "h-9 gap-1.5 px-2.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2",
28	        icon: "size-8",
29	        "icon-xs":
30	          "size-6 rounded-[min(var(--radius-md),10px)] in-data-[slot=button-group]:rounded-lg [&_svg:not([class*='size-'])]:size-3",
31	        "icon-sm":
32	          "size-7 rounded-[min(var(--radius-md),12px)] in-data-[slot=button-group]:rounded-lg",
33	        "icon-lg": "size-9",
34	      },
35	    },
36	    defaultVariants: {
37	      variant: "default",
38	      size: "default",
39	    },
40	  }
41	)
42
43	function Button({
44	  className,
45	  variant = "default",
46	  size = "default",
47	  ...props
48	}: ButtonPrimitive.Props & VariantProps<typeof buttonVariants>) {
49	  return (
50	    <ButtonPrimitive
51	      data-slot="button"
52	      className={cn(buttonVariants({ variant, size, className }))}
53	      {...props}
54	    />
55	  )
56	}
57
58	export { Button, buttonVariants }
59
[result-id: r11]


src/components/ui/button.tsx:7:[Omitted long matching line]
src/components/ui/button.tsx:25:        xs: "h-6 gap-1 rounded-[min(var(--radius-md),10px)] px-2 text-xs in-data-[slot=button-group]:rounded-lg has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3",
src/components/ui/button.tsx:26:        sm: "h-7 gap-1 rounded-[min(var(--radius-md),12px)] px-2.5 text-[0.8rem] in-data-[slot=button-group]:rounded-lg has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3.5",
src/components/ui/button.tsx:30:          "size-6 rounded-[min(var(--radius-md),10px)] in-data-[slot=button-group]:rounded-lg [&_svg:not([class*='size-'])]:size-3",
src/components/ui/button.tsx:32:          "size-7 rounded-[min(var(--radius-md),12px)] in-data-[slot=button-group]:rounded-lg",
src/components/risks/RiskRegister.tsx:17:

src/components/risks/RiskRegister.tsx:22:
src/components/risks/RiskRegister.tsx:27:
src/components/risks/RiskRegister.tsx:32:
src/components/governance/PrincipleCard.tsx:34:      className="h-full bg-surface border border-surface-border rounded-xl p-5 shadow-card hover:shadow-raised hover:bg-surface-raised transition-all duration-200"
src/components/governance/PrincipleCard.tsx:37:

src/components/impact/StrategicImpact.tsx:28:

src/components/impact/StrategicImpact.tsx:49:              className="bg-surface border border-surface-border rounded-xl p-6 shadow-card hover:shadow-raised hover:bg-surface-raised transition-all duration-200"
src/components/impact/StrategicImpact.tsx:52:

src/components/impact/StrategicImpact.tsx:79:            className="bg-surface border border-surface-border rounded-xl p-5 shadow-card hover:shadow-raised hover:bg-surface-raised transition-all duration-200 text-center"
src/components/impact/StrategicImpact.tsx:115:                className={`bg-surface border border-surface-border border-l-4 ${colors.border} rounded-xl p-5 shadow-card hover:shadow-raised hover:bg-surface-raised transition-all duration-200`}
src/components/impact/StrategicImpact.tsx:119:                  <span className={`text-xs px-2 py-0.5 rounded-full border font-semibold hidden sm:inline-flex ${colors.badge}`}>
src/components/impact/StrategicImpact.tsx:136:        className="bg-surface border border-gold/30 rounded-xl p-6 shadow-card relative overflow-hidden"
src/components/layout/SiteNav.tsx:43:

src/components/layout/SiteNav.tsx:61:                  className={`px-3 py-1.5 text-xs font-medium tracking-wide transition-colors duration-150 rounded-md ${
src/components/layout/SiteNav.tsx:80:                  className={`px-3 py-1.5 text-xs font-medium tracking-wide transition-colors duration-150 rounded-md no-underline ${
src/components/layout/SiteNav.tsx:96:              className="p-2 rounded-md text-text-secondary hover:text-text hover:bg-surface-raised transition-colors duration-150"
src/components/layout/SiteNav.tsx:129:                  className={`text-left px-4 py-3 text-base font-medium rounded-lg transition-colors ${
src/components/layout/SiteNav.tsx:149:                  className={`px-4 py-3 text-base font-medium rounded-lg transition-colors no-underline ${
src/components/structure/SectionCard.tsx:34:      className={`h-full bg-surface border border-surface-border border-l-4 ${colors.border} rounded-xl p-6 shadow-card hover:shadow-raised hover:bg-surface-raised transition-all duration-200`}
src/components/structure/SectionCard.tsx:38:          className={`inline-flex items-center justify-center w-7 h-7 rounded-full text-xs font-bold border ${colors.badge}`}
src/components/structure/SectionCard.tsx:53:            <span className={`mt-0.5 w-1.5 h-1.5 rounded-full flex-shrink-0 bg-current ${colors.text}`} />
src/components/roadmap/RoadmapView.tsx:42:

src/components/roadmap/RoadmapView.tsx:58:                <span className={`text-xs px-3 py-1 rounded-full border font-bold tracking-widest ${badge}`}>
src/components/roadmap/RoadmapView.tsx:68:                  className="bg-surface border border-surface-border rounded-xl p-4 shadow-card hover:shadow-raised hover:bg-surface-raised transition-all duration-200"
src/components/roadmap/RoadmapView.tsx:72:                      <span className={`w-2 h-2 rounded-full flex-shrink-0 ${priorityDot[item.priority]}`} />
src/components/roadmap/RoadmapView.tsx:76:                      className={`text-xs px-2 py-0.5 rounded-full border font-semibold flex-shrink-0 ${
src/components/overview/HeroBanner.tsx:31:

src/components/overview/HeroBanner.tsx:48:                className="flex items-center gap-3 bg-surface border border-surface-border rounded-xl px-4 py-3 shadow-card"
src/components/overview/HeroBanner.tsx:51:

src/components/governance/DecisionLayer.tsx:28:      className={`bg-surface border border-surface-border border-l-4 ${borderColor} rounded-xl p-5 shadow-card hover:shadow-raised hover:bg-surface-raised transition-all duration-200`}
src/components/governance/DecisionLayer.tsx:32:
src/components/governance/DecisionLayer.tsx:47:                className="text-xs px-2 py-0.5 rounded-md bg-surface-border text-text-secondary"
src/components/overview/ValuePillars.tsx:19:

src/components/overview/ValuePillars.tsx:38:              className="bg-surface border border-surface-border rounded-xl p-6 shadow-card hover:shadow-raised hover:bg-surface-raised transition-all duration-200"
src/components/overview/ValuePillars.tsx:41:

src/components/operating-model/OperatingFlow.tsx:13:

src/components/responsibilities/ResponsibilityPanel.tsx:38:

src/components/responsibilities/ResponsibilityPanel.tsx:59:              className={`bg-surface border border-surface-border border-l-4 ${colors.border} rounded-xl shadow-card overflow-hidden`}
src/components/responsibilities/ResponsibilityPanel.tsx:95:
src/components/responsibilities/ResponsibilityPanel.tsx:110:
src/components/responsibilities/ResponsibilityPanel.tsx:124:
src/components/responsibilities/ResponsibilityPanel.tsx:140:                              className={`text-xs px-2.5 py-1 rounded-full border font-semibold ${colors.badge}`}
src/components/risks/RiskCard.tsx:45:      className="bg-surface border border-surface-border rounded-xl shadow-card hover:shadow-raised transition-all duration-200"
src/components/risks/RiskCard.tsx:50:
src/components/risks/RiskCard.tsx:54:              className={`text-xs px-2.5 py-0.5 rounded-full border font-semibold ${
src/components/risks/RiskCard.tsx:68:            <span className={`w-2 h-2 rounded-full ${severityDot[risk.severity]}`} />
src/components/risks/RiskCard.tsx:72:            <span className={`w-2 h-2 rounded-full ${severityDot[risk.likelihood]}`} />
src/components/risks/RiskCard.tsx:102:
src/app/vibe/page.tsx:47:

src/app/vibe/page.tsx:49:            className={`h-full rounded-full ${item.colorClass}`}
src/app/vibe/page.tsx:74:      className="bg-surface border border-surface-border rounded-xl p-6 shadow-card hover:shadow-raised hover:bg-surface-raised transition-all duration-200"
src/app/vibe/page.tsx:128:
src/app/vibe/page.tsx:163:

src/app/vibe/page.tsx:195:

src/app/vibe/page.tsx:215:              className="bg-surface border border-accent/30 rounded-xl p-6 shadow-card flex items-center gap-5 relative overflow-hidden"
src/app/vibe/page.tsx:245:

src/app/vibe/page.tsx:254:              className="bg-surface border border-surface-border rounded-xl p-6 shadow-card"
src/app/vibe/page.tsx:277:

src/app/vibe/page.tsx:293:                  className="bg-surface border border-surface-border rounded-xl p-4 shadow-card hover:shadow-raised hover:bg-surface-raised transition-all duration-200"
src/app/vibe/page.tsx:317:

src/app/vibe/page.tsx:336:

src/app/vibe/page.tsx:345:
src/app/vibe/page.tsx:372:

src/app/vibe/page.tsx:388:                  className="bg-surface border border-surface-border rounded-xl p-6 shadow-card hover:shadow-raised hover:bg-surface-raised transition-all duration-200"
src/app/vibe/page.tsx:392:                    <span className={`text-xs font-semibold tracking-wide px-2.5 py-0.5 rounded-full border flex-shrink-0 ${tool.badgeClass}`}>
src/components/governance/GovernanceMap.tsx:30:

src/components/governance/GovernanceMap.tsx:85:

src/components/governance/GovernanceMap.tsx:104:                  className={`text-xs px-2.5 py-1 rounded-full border font-semibold w-fit ${
src/components/structure/DepartmentMap.tsx:13:

src/components/kpis/KpiTargetBar.tsx:23:

src/components/kpis/KpiTargetBar.tsx:25:          className={`h-full bg-gradient-to-r ${fill} rounded-full`}
src/app/journey/page.tsx:52:
src/app/journey/page.tsx:82:                  className="bg-surface border border-surface-border rounded-xl p-5 shadow-card"
src/app/journey/page.tsx:113:

src/app/journey/page.tsx:141:                  className="bg-surface border border-surface-border rounded-xl p-6 shadow-card hover:shadow-raised hover:bg-surface-raised transition-all duration-200"
src/app/journey/page.tsx:168:

src/app/journey/page.tsx:199:

src/app/journey/page.tsx:211:                      <span className={`text-xs font-semibold tracking-wide px-2.5 py-0.5 rounded-full border ${
src/app/journey/page.tsx:245:

src/app/journey/page.tsx:261:                  className="bg-surface border border-surface-border rounded-xl p-5 shadow-card hover:shadow-raised hover:bg-surface-raised transition-all duration-200"
src/app/journey/page.tsx: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'}`}>
src/app/journey/page.tsx:280:                className="inline-flex items-center gap-2 px-5 py-2.5 bg-primary text-white rounded-lg text-sm font-semibold hover:bg-primary-dim transition-colors duration-150 no-underline flex-shrink-0"
src/components/overview/KpiStrip.tsx:21:      className="bg-surface border border-surface-border rounded-xl p-4 shadow-card hover:shadow-raised hover:bg-surface-raised transition-all duration-200"
src/components/kpis/KpiCard.tsx:37:      className="h-full bg-surface border border-surface-border rounded-xl p-5 shadow-card hover:shadow-raised hover:bg-surface-raised transition-all duration-200 flex flex-col gap-4"
src/components/kpis/KpiCard.tsx:46:          className={`text-xs px-2 py-0.5 rounded-full border font-semibold flex-shrink-0 ${badgeClass}`}
src/components/operating-model/FlowStage.tsx:27:      className="h-full bg-surface border border-surface-border rounded-xl p-5 shadow-card hover:shadow-raised hover:bg-surface-raised transition-all duration-200 flex flex-col gap-3"
src/components/operating-model/FlowStage.tsx:47:
src/components/operating-model/FlowStage.tsx:58:            className={`text-xs px-2 py-0.5 rounded-full border font-semibold ${
src/components/kpis/KpiCockpit.tsx:22:

src/components/kpis/KpiCockpit.tsx:25:

src/components/kpis/KpiCockpit.tsx:30:              className={`px-4 py-1.5 rounded-md text-sm font-medium transition-all duration-150 ${
src/components/kpis/KpiCockpit.tsx:32:                  ? 'bg-primary text-white shadow-glow-blue'
src/components/overview/MissionStatement.tsx:12:

src/components/overview/MissionStatement.tsx:27:          className="bg-surface border border-surface-border rounded-xl p-6 shadow-card hover:shadow-raised hover:bg-surface-raised transition-all duration-200"
src/components/overview/MissionStatement.tsx:46:          className="bg-surface border border-gold/30 rounded-xl p-6 shadow-card hover:shadow-raised hover:bg-surface-raised transition-all duration-200 relative overflow-hidden"
[result-id: r12]


Now I have a full picture. Let me also check the `--color-card-border` variable usage to understand what I need to add. Now I'll make all the changes:


Write

@import "tw-animate-css";
@import "shadcn/tailwind.css";
@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  /* ── Light theme (default) ── */
  :root,
  [data-theme="light"] {
    --color-bg:             #FFFFFF;
    --color-surface:        #F2F3F3;
    --color-surface-raised: #E5F1EF;
    --color-surface-border: #EFEFF1;
    --color-card-border:    #D7D7DF;

    --color-primary:        #007560;
    --color-primary-dim:    #004937;
    --color-accent:         #007560;
    --color-gold:           #FFC600;
    --color-gold-dim:       #916C0F;

    --color-success:        #007560;
    --color-warning:        #FCF5E7;
    --color-danger:         #B00020;
    --color-info:           #007560;

    --color-text:           #222222;
    --color-text-secondary: #6F6F6F;
    --color-text-dim:       #6F6F6F;

    --color-elevation-fill:       #D9EAE7;
    --color-elevation-hover:      #E5F1EF;

    --shadow-card:      0 0 0 1px var(--color-card-border);
    --shadow-raised:    0 0 0 1px var(--color-primary);
    --shadow-glow-blue: none;
    --shadow-glow-gold: none;

    /* shadcn compatibility */
    --background: #FFFFFF;
    --foreground: #222222;
    --card: #F2F3F3;
    --card-foreground: #222222;
    --border: #D7D7DF;
    --ring: #007560;
    --radius: 0.9375rem;
  }

  /* ── Dark theme ── */
  [data-theme="dark"] {
    --color-bg:             #212427;
    --color-surface:        #373B40;
    --color-surface-raised: #2B4E48;
    --color-surface-border: #5A5A5A;
    --color-card-border:    #5A5A5A;

    --color-primary:        #7FC9BB;
    --color-primary-dim:    #27A28D;
    --color-accent:         #7FC9BB;
    --color-gold:           #856700;
    --color-gold-dim:       #916C0F;

    --color-success:        #7FC9BB;
    --color-warning:        #916C0F;
    --color-danger:         #CF6679;
    --color-info:           #7FC9BB;

    --color-text:           #E2E2E2;
    --color-text-secondary: #BDBDBD;
    --color-text-dim:       #BDBDBD;

    --color-elevation-fill:       #2B4E48;
    --color-elevation-hover:      #2B4E48;

    --shadow-card:      0 0 0 1px var(--color-card-border);
    --shadow-raised:    0 0 0 1px var(--color-primary);
    --shadow-glow-blue: none;
    --shadow-glow-gold: none;

    /* shadcn compatibility */
    --background: #212427;
    --foreground: #E2E2E2;
    --card: #373B40;
    --card-foreground: #E2E2E2;
    --border: #5A5A5A;
    --ring: #7FC9BB;
    --radius: 0.9375rem;
  }

  * {
    box-sizing: border-box;
  }

  html {
    scroll-behavior: smooth;
    background-color: var(--color-bg);
    transition: background-color 0.2s ease;
  }

  body {
    background-color: var(--color-bg);
    color: var(--color-text);
    /* Dubai font not available on Google Fonts — using Noto Sans as fallback */
    font-family: var(--font-dubai), ui-sans-serif, system-ui, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    transition: background-color 0.2s ease, color 0.2s ease;
  }

  ::selection {
    background-color: rgba(0, 117, 96, 0.2);
    color: var(--color-text);
  }

  ::-webkit-scrollbar { width: 6px; }
  ::-webkit-scrollbar-track { background: var(--color-bg); }
  ::-webkit-scrollbar-thumb { background: var(--color-surface-border); border-radius: 3px; }
  ::-webkit-scrollbar-thumb:hover { background: var(--color-primary-dim); }
}

@layer utilities {
  .text-balance { text-wrap: balance; }

  .section-eyebrow {
    @apply text-xs font-medium tracking-widest uppercase text-text-dim;
  }

  .section-divider {
    @apply w-12 h-0.5 bg-gradient-to-r from-primary to-accent rounded-full my-4;
  }

  .card-base {
    @apply bg-surface border border-surface-border rounded-lg p-6 shadow-card hover:shadow-raised hover:bg-surface-raised transition-all duration-200;
  }

  .gradient-text {
    @apply bg-gradient-to-r from-primary to-accent bg-clip-text text-transparent;
  }
}


The file /Users/khalidbinkalban/Desktop/My Workstation/dewa-ai-adoption/src/app/globals.css has been updated successfully.


import type { Config } from "tailwindcss";

const config: Config = {
  darkMode: "class",
  content: [
    "./src/pages/**/*.{js,ts,jsx,tsx,mdx}",
    "./src/components/**/*.{js,ts,jsx,tsx,mdx}",
    "./src/app/**/*.{js,ts,jsx,tsx,mdx}",
  ],
  theme: {
    extend: {
      colors: {
        // DEWA Design Tokens
        bg: "var(--color-bg)",
        surface: "var(--color-surface)",
        "surface-raised": "var(--color-surface-raised)",
        "surface-border": "var(--color-surface-border)",
        "card-border": "var(--color-card-border)",
        primary: "var(--color-primary)",
        "primary-dim": "var(--color-primary-dim)",
        accent: "var(--color-primary)",
        gold: "var(--color-gold)",
        "gold-dim": "var(--color-gold-dim)",
        success: "var(--color-success)",
        warning: "var(--color-warning)",
        danger: "var(--color-danger)",
        info: "var(--color-info)",
        text: "var(--color-text)",
        "text-secondary": "var(--color-text-secondary)",
        "text-dim": "var(--color-text-dim)",
        "elevation-fill": "var(--color-elevation-fill)",
        "elevation-hover": "var(--color-elevation-hover)",
      },
      fontSize: {
        xs: ["11px", { lineHeight: "1.5" }],
        sm: ["13px", { lineHeight: "1.5" }],
        base: ["15px", { lineHeight: "1.7" }],
        md: ["17px", { lineHeight: "1.5" }],
        lg: ["20px", { lineHeight: "1.4" }],
        xl: ["24px", { lineHeight: "1.3" }],
        "2xl": ["30px", { lineHeight: "1.2" }],
        "3xl": ["38px", { lineHeight: "1.2" }],
        "4xl": ["48px", { lineHeight: "1.1" }],
      },
      fontWeight: {
        regular: "400",
        medium: "500",
        semibold: "600",
        bold: "700",
      },
      letterSpacing: {
        wide: "0.04em",
        widest: "0.1em",
      },
      borderRadius: {
        sm: "5px",
        md: "7px",
        lg: "15px",
        xl: "20px",
        full: "9999px",
        pill: "100px",
      },
      boxShadow: {
        card:        'var(--shadow-card)',
        raised:      'var(--shadow-raised)',
        'glow-blue': 'none',
        'glow-gold': 'none',
      },
      maxWidth: {
        content: "1200px",
        site: "1440px",
      },
      spacing: {
        "1": "4px",
        "2": "8px",
        "3": "12px",
        "4": "16px",
        "5": "20px",
        "6": "24px",
        "8": "32px",
        "10": "40px",
        "12": "48px",
        "16": "64px",
        "20": "80px",
        "24": "96px",
      },
      backgroundImage: {
        "gradient-brand": "linear-gradient(135deg, var(--color-primary), var(--color-primary-dim))",
      },
    },
  },
  plugins: [],
};

export default config;


The file /Users/khalidbinkalban/Desktop/My Workstation/dewa-ai-adoption/tailwind.config.ts has been updated successfully.


Now update layout.tsx to use Noto Sans (Dubai fallback):


Edit

import type { Metadata } from 'next'
import { Inter } from 'next/font/google'
import './globals.css'
import SiteNav from '@/components/layout/SiteNav'
import { ThemeProvider } from '@/components/layout/ThemeProvider'

const inter = Inter({
  subsets: ['latin'],
  variable: '--font-inter',
  display: 'swap',
})

import type { Metadata } from 'next'
// Dubai font is not available on Google Fonts — using Noto Sans as the closest fallback.
// When Dubai becomes available via next/font/google, replace Noto_Sans with Dubai.
import { Noto_Sans } from 'next/font/google'
import './globals.css'
import SiteNav from '@/components/layout/SiteNav'
import { ThemeProvider } from '@/components/layout/ThemeProvider'

const dubai = Noto_Sans({
  subsets: ['latin'],
  weight: ['300', '400', '500', '700'],
  variable: '--font-dubai',
  display: 'swap',
})


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


<body className={`${inter.variable} antialiased bg-bg text-text`}>

<body className={`${dubai.variable} antialiased bg-bg text-text`}>


Now update SiteNav.tsx - update the nav background inline styles to use DEWA colors:


        style={{
          backgroundColor: theme === 'dark' ? 'rgba(7, 13, 26, 0.92)' : 'rgba(238, 242, 251, 0.94)',
          backdropFilter: 'blur(12px)',
          WebkitBackdropFilter: 'blur(12px)',
        }}

        style={{
          backgroundColor: theme === 'dark' ? 'rgba(33, 36, 39, 0.92)' : 'rgba(255, 255, 255, 0.94)',
          backdropFilter: 'blur(12px)',
          WebkitBackdropFilter: 'blur(12px)',
        }}


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


Now update KpiCockpit.tsx - active tab gets `rounded-full` and remove `shadow-glow-blue`:


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

        <div className="flex gap-1 bg-surface border border-surface-border rounded-lg p-1">
          {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'
              }`}
            >


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


Now update the button in journey/page.tsx from `rounded-lg` to `rounded-pill`:


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

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"


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


Now update the button component's base radius from `rounded-lg` to `rounded-pill`:


"group/button inline-flex shrink-0 items-center justify-center rounded-lg border border-transparent bg-clip-padding text-sm font-medium whitespace-nowrap transition-all outline-none select-none focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 active:not-aria-[haspopup]:translate-y-px disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",

"group/button inline-flex shrink-0 items-center justify-center rounded-pill border border-transparent bg-clip-padding text-sm font-medium whitespace-nowrap transition-all outline-none select-none focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 active:not-aria-[haspopup]:translate-y-px disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",


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


Now update all `rounded-xl` card occurrences to `rounded-lg` (15px) across all components. Let me do this systematically for each file:


<tool_use_error>File has not been read yet. Read it first before writing to it.</tool_use_error>

Error: File has not been read yet. Read it first before writing to it.


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


I need to read the unread files first:


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-xl p-5 shadow-card hover:shadow-raised hover:bg-surface-raised transition-all duration-200"
35	    >
36	      {Icon && (
37

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

40	      )}
41
{principle.title}

42
{principle.description}

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


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-xl 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-xl 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-xl 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-xl 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: r14]


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-xl p-6 shadow-card hover:shadow-raised hover:bg-surface-raised transition-all duration-200`}
35	    >
36

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

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

45

46	        {section.tagline}
47

48
{section.mandate}

49
50

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

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

56	        ))}
57

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


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


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-xl 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: r17]


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

16

17	        Value Pillars
18

19

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

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

44	              )}
45
{pillar.title}

46
{pillar.description}

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

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


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-xl 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: r19]


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