You are working on a Next.js 14 project at `/Users/khalidbinkalban/Desktop/My Workstation/dewa-ai-adoption`. The user wants these enhancements:

1. **Light + dark theme toggle** — add a Sun/Moon button to the SiteNav. Use `data-theme` attribute on `<html>`. Default dark, store in localStorage.
2. **Card height consistency** — add `h-full` to grid item wrappers and card root elements so all cards in a row are equal height.
3. **Mobile improvements** — reduce section padding on mobile, responsive hero text, better tap targets.
4. **Professional polish** — smooth theme transitions, better visual hierarchy.

Here is the exact implementation plan. Do all of these in order:

---

## Step 1: Update `src/app/globals.css`

Replace the entire file with this content (adds light theme variables, shadow CSS vars, theme transition):

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

@layer base {
  /* ── Dark theme (default) ── */
  :root,
  [data-theme="dark"] {
    --color-bg:             #070D1A;
    --color-surface:        #0D1627;
    --color-surface-raised: #132035;
    --color-surface-border: #1E3A5F;

    --color-primary:        #0066FF;
    --color-primary-dim:    #0044BB;
    --color-accent:         #00C2FF;
    --color-gold:           #F0A500;
    --color-gold-dim:       #C98800;

    --color-success:        #22C55E;
    --color-warning:        #F59E0B;
    --color-danger:         #EF4444;
    --color-info:           #38BDF8;

    --color-text:           #EEF2FF;
    --color-text-secondary: #8BAFD4;
    --color-text-dim:       #4A6B8A;

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

    /* shadcn compatibility */
    --background: #070D1A;
    --foreground: #EEF2FF;
    --card: #0D1627;
    --card-foreground: #EEF2FF;
    --border: #1E3A5F;
    --ring: #0066FF;
    --radius: 0.75rem;
  }

  /* ── Light theme ── */
  [data-theme="light"] {
    --color-bg:             #EEF2FB;
    --color-surface:        #FFFFFF;
    --color-surface-raised: #E4EAF8;
    --color-surface-border: #C8D3E8;

    --color-primary:        #0055DD;
    --color-primary-dim:    #003DB5;
    --color-accent:         #0090B8;
    --color-gold:           #C57F0A;
    --color-gold-dim:       #A66805;

    --color-success:        #15803D;
    --color-warning:        #B45309;
    --color-danger:         #DC2626;
    --color-info:           #0284C7;

    --color-text:           #0D1A2E;
    --color-text-secondary: #3A4F6B;
    --color-text-dim:       #617183;

    --shadow-card:      0 1px 3px rgba(0,0,0,0.07), 0 0 0 1px rgba(0,0,0,0.06);
    --shadow-raised:    0 4px 16px rgba(0,0,0,0.1), 0 0 0 1px rgba(0,85,221,0.12);
    --shadow-glow-blue: 0 0 20px rgba(0,85,221,0.1);
    --shadow-glow-gold: 0 0 20px rgba(197,127,10,0.1);

    /* shadcn compatibility */
    --background: #EEF2FB;
    --foreground: #0D1A2E;
    --card: #FFFFFF;
    --card-foreground: #0D1A2E;
    --border: #C8D3E8;
    --ring: #0055DD;
    --radius: 0.75rem;
  }

  * {
    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);
    font-family: var(--font-inter), 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, 102, 255, 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-xl 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;
  }
}
```

---

## Step 2: Update `tailwind.config.ts`

Change the `boxShadow` section to use CSS variables:

```js
boxShadow: {
  card:       'var(--shadow-card)',
  raised:     'var(--shadow-raised)',
  'glow-blue':'var(--shadow-glow-blue)',
  'glow-gold':'var(--shadow-glow-gold)',
},
```

---

## Step 3: Create `src/components/layout/ThemeProvider.tsx`

```tsx
'use client'

import { createContext, useContext, useEffect, useState } from 'react'

type Theme = 'dark' | 'light'

interface ThemeContextValue {
  theme: Theme
  toggleTheme: () => void
}

const ThemeContext = createContext<ThemeContextValue>({
  theme: 'dark',
  toggleTheme: () => {},
})

export function ThemeProvider({ children }: { children: React.ReactNode }) {
  const [theme, setTheme] = useState<Theme>('dark')

  useEffect(() => {
    const stored = (typeof localStorage !== 'undefined' && localStorage.getItem('dewa-theme')) as Theme | null
    const initial: Theme = stored === 'light' ? 'light' : 'dark'
    setTheme(initial)
    document.documentElement.setAttribute('data-theme', initial)
  }, [])

  const toggleTheme = () => {
    const next: Theme = theme === 'dark' ? 'light' : 'dark'
    setTheme(next)
    document.documentElement.setAttribute('data-theme', next)
    try { localStorage.setItem('dewa-theme', next) } catch {}
  }

  return (
    <ThemeContext.Provider value={{ theme, toggleTheme }}>
      {children}
    </ThemeContext.Provider>
  )
}

export const useTheme = () => useContext(ThemeContext)
```

---

## Step 4: Update `src/app/layout.tsx`

Replace the entire file:

```tsx
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',
})

export const metadata: Metadata = {
  title: 'DEWA AI Adoption Department — Executive Operating Model',
  description:
    'Strategic command center presenting the operating model, KPIs, governance, and roadmap of the DEWA AI Adoption Department.',
}

export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode
}>) {
  return (
    <html lang="en" suppressHydrationWarning>
      <head>
        <script
          dangerouslySetInnerHTML={{
            __html: `(function(){try{var t=localStorage.getItem('dewa-theme');document.documentElement.setAttribute('data-theme',t==='light'?'light':'dark')}catch(e){}})()`,
          }}
        />
      </head>
      <body className={`${inter.variable} antialiased bg-bg text-text`}>
        <ThemeProvider>
          <SiteNav />
          <main className="pt-16">{children}</main>
        </ThemeProvider>
      </body>
    </html>
  )
}
```

---

## Step 5: Update `src/components/layout/SiteNav.tsx`

Add the theme toggle. Import `Sun`, `Moon` from lucide-react, import `useTheme` from `./ThemeProvider`. Add a toggle button at the right end of both desktop nav and mobile menu.

The full updated file:

```tsx
'use client'

import { useState, useCallback } from 'react'
import Link from 'next/link'
import { usePathname } from 'next/navigation'
import { Menu, X, Sun, Moon } from 'lucide-react'
import { useActiveSection } from '@/hooks/useActiveSection'
import { navLinks, pageLinks } from '@/lib/tokens'
import { useTheme } from './ThemeProvider'

const sectionIds = navLinks.map((l) => l.href.replace('#', ''))

export default function SiteNav() {
  const [mobileOpen, setMobileOpen] = useState(false)
  const activeSection = useActiveSection(sectionIds)
  const pathname = usePathname()
  const isHome = pathname === '/'
  const { theme, toggleTheme } = useTheme()

  const handleNavClick = useCallback((href: string) => {
    setMobileOpen(false)
    if (!isHome) return
    const id = href.replace('#', '')
    const el = document.getElementById(id)
    if (el) {
      el.scrollIntoView({ behavior: 'smooth', block: 'start' })
    }
  }, [isHome])

  return (
    <>
      <header
        className="fixed top-0 left-0 right-0 z-50 h-16 border-b border-surface-border transition-colors duration-200"
        style={{
          backgroundColor: theme === 'dark' ? 'rgba(7, 13, 26, 0.92)' : 'rgba(238, 242, 251, 0.94)',
          backdropFilter: 'blur(12px)',
          WebkitBackdropFilter: 'blur(12px)',
        }}
      >
        <div className="mx-auto max-w-site px-4 sm:px-6 h-full flex items-center justify-between gap-4">
          {/* Left: Logo + Name */}
          <Link href="/" className="flex items-center gap-3 flex-shrink-0 no-underline hover:no-underline">
            <div className="flex items-center justify-center w-8 h-8 rounded-md bg-primary/10 border border-primary/20">
              <span className="text-primary font-bold text-xs tracking-wide">AI</span>
            </div>
            <div className="flex flex-col">
              <span className="text-xs font-semibold text-text leading-none">DEWA</span>
              <span className="text-xs text-text-dim leading-none mt-0.5 hidden sm:block">AI Adoption Department</span>
            </div>
          </Link>

          {/* Desktop Nav */}
          <nav className="hidden lg:flex items-center gap-1 flex-1 justify-center">
            {isHome && navLinks.map((link) => {
              const id = link.href.replace('#', '')
              const isActive = activeSection === id
              return (
                <button
                  key={link.href}
                  onClick={() => handleNavClick(link.href)}
                  className={`px-3 py-1.5 text-xs font-medium tracking-wide transition-colors duration-150 rounded-md ${
                    isActive
                      ? 'text-primary border-b-2 border-primary rounded-none pb-1'
                      : 'text-text-secondary hover:text-text hover:bg-surface-raised'
                  }`}
                >
                  {link.label}
                </button>
              )
            })}

            <div className="w-px h-4 bg-surface-border mx-1" />

            {pageLinks.map((link) => {
              const isActive = pathname === link.href
              return (
                <Link
                  key={link.href}
                  href={link.href}
                  className={`px-3 py-1.5 text-xs font-medium tracking-wide transition-colors duration-150 rounded-md no-underline ${
                    isActive
                      ? 'text-accent bg-accent/10'
                      : 'text-text-secondary hover:text-text hover:bg-surface-raised'
                  }`}
                >
                  {link.label}
                </Link>
              )
            })}
          </nav>

          {/* Right: Theme toggle + hamburger */}
          <div className="flex items-center gap-1 flex-shrink-0">
            <button
              onClick={toggleTheme}
              className="p-2 rounded-md text-text-secondary hover:text-text hover:bg-surface-raised transition-colors duration-150"
              aria-label="Toggle theme"
            >
              {theme === 'dark' ? <Sun size={16} /> : <Moon size={16} />}
            </button>
            <button
              className="lg:hidden p-2 text-text-secondary hover:text-text transition-colors"
              onClick={() => setMobileOpen((v) => !v)}
              aria-label="Toggle menu"
              aria-expanded={mobileOpen}
            >
              {mobileOpen ? <X size={20} /> : <Menu size={20} />}
            </button>
          </div>
        </div>
      </header>

      {/* Mobile Menu */}
      {mobileOpen && (
        <div
          className="fixed inset-0 z-40 lg:hidden overflow-y-auto"
          style={{
            backgroundColor: theme === 'dark' ? 'rgba(7, 13, 26, 0.97)' : 'rgba(238, 242, 251, 0.98)',
          }}
        >
          <div className="flex flex-col pt-20 px-6 gap-1 pb-8">
            {isHome && navLinks.map((link) => {
              const id = link.href.replace('#', '')
              const isActive = activeSection === id
              return (
                <button
                  key={link.href}
                  onClick={() => handleNavClick(link.href)}
                  className={`text-left px-4 py-3 text-base font-medium rounded-lg transition-colors ${
                    isActive
                      ? 'text-primary bg-primary/10 border border-primary/20'
                      : 'text-text-secondary hover:text-text hover:bg-surface-raised'
                  }`}
                >
                  {link.label}
                </button>
              )
            })}

            <div className="h-px bg-surface-border my-2" />

            {pageLinks.map((link) => {
              const isActive = pathname === link.href
              return (
                <Link
                  key={link.href}
                  href={link.href}
                  onClick={() => setMobileOpen(false)}
                  className={`px-4 py-3 text-base font-medium rounded-lg transition-colors no-underline ${
                    isActive
                      ? 'text-accent bg-accent/10 border border-accent/20'
                      : 'text-text-secondary hover:text-text hover:bg-surface-raised'
                  }`}
                >
                  {link.label}
                </Link>
              )
            })}
          </div>
        </div>
      )}
    </>
  )
}
```

---

## Step 6: Update `src/components/layout/SectionWrapper.tsx`

Change `py-20` to `py-12 sm:py-20` for mobile:

```tsx
'use client'

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

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

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

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

---

## Step 7: Update `src/components/overview/HeroBanner.tsx`

Make headline responsive:

Change:
```tsx
<h1 className="text-4xl font-bold bg-gradient-to-r from-primary to-accent bg-clip-text text-transparent leading-tight max-w-4xl">
```
To:
```tsx
<h1 className="text-2xl sm:text-3xl lg:text-4xl font-bold bg-gradient-to-r from-primary to-accent bg-clip-text text-transparent leading-tight max-w-4xl">
```

---

## Step 8: Add `h-full` to card components and their grid wrappers

### `src/components/structure/SectionCard.tsx`
Add `h-full` to the root `motion.div` className.

### `src/components/governance/PrincipleCard.tsx`
Add `h-full` to the root `motion.div` className.

### `src/components/kpis/KpiCard.tsx`
Add `h-full` to the root `motion.div` className.

### `src/components/operating-model/FlowStage.tsx`
Add `h-full` to the root `motion.div` className.

### `src/components/structure/DepartmentMap.tsx`
Add `className="h-full"` to the inner `motion.div` (the stagger child that wraps SectionCard).

### `src/components/governance/GovernanceMap.tsx`
Add `className="h-full"` to the inner `motion.div` wrappers around PrincipleCard.

### `src/components/kpis/KpiCockpit.tsx`
Add `className="h-full"` to the motion.div wrappers around KpiCard.

### `src/components/operating-model/OperatingFlow.tsx`
Add `className="h-full relative"` to the stagger child motion.div (it already has `className="relative"`).

---

## Step 9: Verify build

Run: `cd "/Users/khalidbinkalban/Desktop/My Workstation/dewa-ai-adoption" && npx tsc --noEmit && npm run build`

Fix any TypeScript errors found. Report results.

---

Do all steps in order. Write complete file contents, not partial edits, for the files you need to fully rewrite. For small targeted changes (Step 8), use Edit tool to only change the relevant className strings.


I'll implement all the steps in order. Let me start by reading the existing files.


1	@import "tw-animate-css";
2	@import "shadcn/tailwind.css";
3	@tailwind base;
4	@tailwind components;
5	@tailwind utilities;
6
7	@layer base {
8	  :root {
9	    /* DEWA Design System Tokens */
10	    --color-bg:             #070D1A;
11	    --color-surface:        #0D1627;
12	    --color-surface-raised: #132035;
13	    --color-surface-border: #1E3A5F;
14
15	    --color-primary:        #0066FF;
16	    --color-primary-dim:    #0044BB;
17	    --color-accent:         #00C2FF;
18	    --color-gold:           #F0A500;
19	    --color-gold-dim:       #C98800;
20
21	    --color-success:        #22C55E;
22	    --color-warning:        #F59E0B;
23	    --color-danger:         #EF4444;
24	    --color-info:           #38BDF8;
25
26	    --color-text:           #EEF2FF;
27	    --color-text-secondary: #8BAFD4;
28	    --color-text-dim:       #4A6B8A;
29
30	    /* shadcn compatibility */
31	    --background: #070D1A;
32	    --foreground: #EEF2FF;
33	    --card: #0D1627;
34	    --card-foreground: #EEF2FF;
35	    --border: #1E3A5F;
36	    --ring: #0066FF;
37	    --radius: 0.75rem;
38	  }
39
40	  * {
41	    box-sizing: border-box;
42	  }
43
44	  html {
45	    scroll-behavior: smooth;
46	    background-color: var(--color-bg);
47	  }
48
49	  body {
50	    background-color: var(--color-bg);
51	    color: var(--color-text);
52	    font-family: var(--font-inter), ui-sans-serif, system-ui, sans-serif;
53	    -webkit-font-smoothing: antialiased;
54	    -moz-osx-font-smoothing: grayscale;
55	  }
56
57	  ::selection {
58	    background-color: rgba(0, 102, 255, 0.3);
59	    color: #EEF2FF;
60	  }
61
62	  ::-webkit-scrollbar {
63	    width: 6px;
64	  }
65
66	  ::-webkit-scrollbar-track {
67	    background: var(--color-bg);
68	  }
69
70	  ::-webkit-scrollbar-thumb {
71	    background: var(--color-surface-border);
72	    border-radius: 3px;
73	  }
74
75	  ::-webkit-scrollbar-thumb:hover {
76	    background: var(--color-primary-dim);
77	  }
78	}
79
80	@layer utilities {
81	  .text-balance {
82	    text-wrap: balance;
83	  }
84
85	  .section-eyebrow {
86	    @apply text-xs font-medium tracking-widest uppercase text-text-dim;
87	  }
88
89	  .section-divider {
90	    @apply w-12 h-0.5 bg-gradient-to-r from-primary to-accent rounded-full my-4;
91	  }
92
93	  .card-base {
94	    @apply bg-surface border border-surface-border rounded-xl p-6 shadow-card hover:shadow-raised hover:bg-surface-raised transition-all duration-200;
95	  }
96
97	  .gradient-text {
98	    @apply bg-gradient-to-r from-primary to-accent bg-clip-text text-transparent;
99	  }
100	}
101
[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: "0 1px 3px rgba(0,0,0,0.4), 0 0 0 1px rgba(30,58,95,0.6)",
61	        raised: "0 4px 16px rgba(0,0,0,0.5), 0 0 0 1px rgba(0,102,255,0.15)",
62	        "glow-blue": "0 0 24px rgba(0,102,255,0.2)",
63	        "glow-gold": "0 0 24px rgba(240,165,0,0.15)",
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
6	const inter = Inter({
7	  subsets: ['latin'],
8	  variable: '--font-inter',
9	  display: 'swap',
10	})
11
12	export const metadata: Metadata = {
13	  title: 'DEWA AI Adoption Department — Executive Operating Model',
14	  description:
15	    'Strategic command center presenting the operating model, KPIs, governance, and roadmap of the DEWA AI Adoption Department.',
16	}
17
18	export default function RootLayout({
19	  children,
20	}: Readonly<{
21	  children: React.ReactNode
22	}>) {
23	  return (
24	    <html lang="en" className="dark">
25	      <body className={`${inter.variable} antialiased bg-bg text-text`}>
26	        <SiteNav />
27	        <main className="pt-16">{children}</main>
28	      </body>
29	    </html>
30	  )
31	}
32
[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 } from 'lucide-react'
7	import { useActiveSection } from '@/hooks/useActiveSection'
8	import { navLinks, pageLinks } from '@/lib/tokens'
9
10	const sectionIds = navLinks.map((l) => l.href.replace('#', ''))
11
12	export default function SiteNav() {
13	  const [mobileOpen, setMobileOpen] = useState(false)
14	  const activeSection = useActiveSection(sectionIds)
15	  const pathname = usePathname()
16	  const isHome = pathname === '/'
17
18	  const handleNavClick = useCallback((href: string) => {
19	    setMobileOpen(false)
20	    if (!isHome) return
21	    const id = href.replace('#', '')
22	    const el = document.getElementById(id)
23	    if (el) {
24	      el.scrollIntoView({ behavior: 'smooth', block: 'start' })
25	    }
26	  }, [isHome])
27
28	  return (
29	    <>
30
38

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

42	              AI
43

44

45	              DEWA
46	              AI Adoption Department
47

48	          </Link>
49
50	          {/* Desktop Nav */}
51
52	            {/* Section anchor links — home only */}
53	            {isHome && navLinks.map((link) => {
54	              const id = link.href.replace('#', '')
55	              const isActive = activeSection === id
56	              return (
57	                <button
58	                  key={link.href}
59	                  onClick={() => handleNavClick(link.href)}
60	                  className={`
61	                    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	                >
68	                  {link.label}
69	                </button>
70	              )
71	            })}
72
73	            {/* Divider */}
74

75
76	            {/* Page links */}
77	            {pageLinks.map((link) => {
78	              const isActive = pathname === link.href
79	              return (
80	                <Link
81	                  key={link.href}
82	                  href={link.href}
83	                  className={`
84	                    px-3 py-1.5 text-xs font-medium tracking-wide transition-colors duration-150 rounded-md no-underline
85	                    ${isActive
86	                      ? 'text-accent bg-accent/10'
87	                      : 'text-text-secondary hover:text-text hover:bg-surface-raised'
88	                    }
89	                  `}
90	                >
91	                  {link.label}
92	                </Link>
93	              )
94	            })}
95
96
97	          {/* Mobile hamburger */}
98	          <button
99	            className="lg:hidden p-2 text-text-secondary hover:text-text transition-colors"
100	            onClick={() => setMobileOpen((v) => !v)}
101	            aria-label="Toggle menu"
102	            aria-expanded={mobileOpen}
103	          >
104	            {mobileOpen ? <X size={20} /> : <Menu size={20} />}
105	          </button>
106

107
108
109	      {/* Mobile Menu */}
110	      {mobileOpen && (
111

115

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

139
140	            {/* Page links */}
141	            {pageLinks.map((link) => {
142	              const isActive = pathname === link.href
143	              return (
144	                <Link
145	                  key={link.href}
146	                  href={link.href}
147	                  onClick={() => setMobileOpen(false)}
148	                  className={`
149	                    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	                >
156	                  {link.label}
157	                </Link>
158	              )
159	            })}
160

161

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


Now let me read the remaining files I need to modify.


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


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

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

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

45

46	        {section.tagline}
47

48
{section.mandate}

49
50

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

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

56	        ))}
57

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


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

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

40	      )}
41
{principle.title}

42
{principle.description}

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


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

40

41

42	            {kpi.label}
43

44

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

51
52

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

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

62

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

67
68

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

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


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

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

34
35

36
{stage.name}

37
{stage.description}

38

39
40

41

42	          Outputs
43

44

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

47
48	              {output}
49

50	          ))}
51

52

53
54

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

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


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

27

28	        Governance Framework
29

30

31

32	        How AI Adoption is Controlled and Overseen
33

34
35	      {/* Principles */}
36

37

38	          Governing Principles
39

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

60
61	      {/* Decision Layers */}
62

63

64	          Decision Layers
65

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

78
79	      {/* Governance Controls */}
80

81

82	          Governance Controls
83

84

85

86
Area

87
Control

88
Owner

89
Cadence

90
Status

91

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

98
{ctrl.area}

99
{ctrl.control}

100
{ctrl.owner}

101
{ctrl.reviewCadence}

102
107	                  {controlStatusLabels[ctrl.status]}
108
109

110

111	          ))}
112

113

114

115	  )
116	}
117
[result-id: r11]


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

10

11	        Department Structure
12

13

14
Three Sections. One Unified Department.

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

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


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	            >
59	              <KpiCard kpi={kpi} />
60	            </motion.div>
61	          ))}
62	        </motion.div>
63	      </AnimatePresence>
64

65	  )
66	}
67
[result-id: r13]


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

10

11	        Operating Model
12

13

14

15	        How the Department Works End-to-End
16

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

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

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

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


Now I have all the files I need. Let me implement all steps in order.

**Step 1: Update globals.css**


Write

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

@layer base {
  /* ── Dark theme (default) ── */
  :root,
  [data-theme="dark"] {
    --color-bg:             #070D1A;
    --color-surface:        #0D1627;
    --color-surface-raised: #132035;
    --color-surface-border: #1E3A5F;

    --color-primary:        #0066FF;
    --color-primary-dim:    #0044BB;
    --color-accent:         #00C2FF;
    --color-gold:           #F0A500;
    --color-gold-dim:       #C98800;

    --color-success:        #22C55E;
    --color-warning:        #F59E0B;
    --color-danger:         #EF4444;
    --color-info:           #38BDF8;

    --color-text:           #EEF2FF;
    --color-text-secondary: #8BAFD4;
    --color-text-dim:       #4A6B8A;

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

    /* shadcn compatibility */
    --background: #070D1A;
    --foreground: #EEF2FF;
    --card: #0D1627;
    --card-foreground: #EEF2FF;
    --border: #1E3A5F;
    --ring: #0066FF;
    --radius: 0.75rem;
  }

  /* ── Light theme ── */
  [data-theme="light"] {
    --color-bg:             #EEF2FB;
    --color-surface:        #FFFFFF;
    --color-surface-raised: #E4EAF8;
    --color-surface-border: #C8D3E8;

    --color-primary:        #0055DD;
    --color-primary-dim:    #003DB5;
    --color-accent:         #0090B8;
    --color-gold:           #C57F0A;
    --color-gold-dim:       #A66805;

    --color-success:        #15803D;
    --color-warning:        #B45309;
    --color-danger:         #DC2626;
    --color-info:           #0284C7;

    --color-text:           #0D1A2E;
    --color-text-secondary: #3A4F6B;
    --color-text-dim:       #617183;

    --shadow-card:      0 1px 3px rgba(0,0,0,0.07), 0 0 0 1px rgba(0,0,0,0.06);
    --shadow-raised:    0 4px 16px rgba(0,0,0,0.1), 0 0 0 1px rgba(0,85,221,0.12);
    --shadow-glow-blue: 0 0 20px rgba(0,85,221,0.1);
    --shadow-glow-gold: 0 0 20px rgba(197,127,10,0.1);

    /* shadcn compatibility */
    --background: #EEF2FB;
    --foreground: #0D1A2E;
    --card: #FFFFFF;
    --card-foreground: #0D1A2E;
    --border: #C8D3E8;
    --ring: #0055DD;
    --radius: 0.75rem;
  }

  * {
    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);
    font-family: var(--font-inter), 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, 102, 255, 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-xl 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.


**Step 2: Update tailwind.config.ts boxShadow to use CSS variables**


Edit

      boxShadow: {
        card:       'var(--shadow-card)',
        raised:     'var(--shadow-raised)',
        'glow-blue':'var(--shadow-glow-blue)',
        'glow-gold':'var(--shadow-glow-gold)',
      },


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


**Step 3: Create ThemeProvider.tsx**


Write

'use client'

import { createContext, useContext, useEffect, useState } from 'react'

type Theme = 'dark' | 'light'

interface ThemeContextValue {
  theme: Theme
  toggleTheme: () => void
}

const ThemeContext = createContext<ThemeContextValue>({
  theme: 'dark',
  toggleTheme: () => {},
})

export function ThemeProvider({ children }: { children: React.ReactNode }) {
  const [theme, setTheme] = useState<Theme>('dark')

  useEffect(() => {
    const stored = (typeof localStorage !== 'undefined' && localStorage.getItem('dewa-theme')) as Theme | null
    const initial: Theme = stored === 'light' ? 'light' : 'dark'
    setTheme(initial)
    document.documentElement.setAttribute('data-theme', initial)
  }, [])

  const toggleTheme = () => {
    const next: Theme = theme === 'dark' ? 'light' : 'dark'
    setTheme(next)
    document.documentElement.setAttribute('data-theme', next)
    try { localStorage.setItem('dewa-theme', next) } catch {}
  }

  return (
    <ThemeContext.Provider value={{ theme, toggleTheme }}>
      {children}
    </ThemeContext.Provider>
  )
}

export const useTheme = () => useContext(ThemeContext)


File created successfully at: /Users/khalidbinkalban/Desktop/My Workstation/dewa-ai-adoption/src/components/layout/ThemeProvider.tsx


**Step 4: Update layout.tsx**


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',
})

export const metadata: Metadata = {
  title: 'DEWA AI Adoption Department — Executive Operating Model',
  description:
    'Strategic command center presenting the operating model, KPIs, governance, and roadmap of the DEWA AI Adoption Department.',
}

export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode
}>) {
  return (
    <html lang="en" suppressHydrationWarning>
      <head>
        <script
          dangerouslySetInnerHTML={{
            __html: `(function(){try{var t=localStorage.getItem('dewa-theme');document.documentElement.setAttribute('data-theme',t==='light'?'light':'dark')}catch(e){}})()`,
          }}
        />
      </head>
      <body className={`${inter.variable} antialiased bg-bg text-text`}>
        <ThemeProvider>
          <SiteNav />
          <main className="pt-16">{children}</main>
        </ThemeProvider>
      </body>
    </html>
  )
}


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


**Step 5: Update SiteNav.tsx**


'use client'

import { useState, useCallback } from 'react'
import Link from 'next/link'
import { usePathname } from 'next/navigation'
import { Menu, X, Sun, Moon } from 'lucide-react'
import { useActiveSection } from '@/hooks/useActiveSection'
import { navLinks, pageLinks } from '@/lib/tokens'
import { useTheme } from './ThemeProvider'

const sectionIds = navLinks.map((l) => l.href.replace('#', ''))

export default function SiteNav() {
  const [mobileOpen, setMobileOpen] = useState(false)
  const activeSection = useActiveSection(sectionIds)
  const pathname = usePathname()
  const isHome = pathname === '/'
  const { theme, toggleTheme } = useTheme()

  const handleNavClick = useCallback((href: string) => {
    setMobileOpen(false)
    if (!isHome) return
    const id = href.replace('#', '')
    const el = document.getElementById(id)
    if (el) {
      el.scrollIntoView({ behavior: 'smooth', block: 'start' })
    }
  }, [isHome])

  return (
    <>

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

              AI

              DEWA
              AI Adoption Department

          </Link>

          {/* Desktop Nav */}

            {isHome && navLinks.map((link) => {
              const id = link.href.replace('#', '')
              const isActive = activeSection === id
              return (
                <button
                  key={link.href}
                  onClick={() => handleNavClick(link.href)}
                  className={`px-3 py-1.5 text-xs font-medium tracking-wide transition-colors duration-150 rounded-md ${
                    isActive
                      ? 'text-primary border-b-2 border-primary rounded-none pb-1'
                      : 'text-text-secondary hover:text-text hover:bg-surface-raised'
                  }`}
                >
                  {link.label}
                </button>
              )
            })}

            {pageLinks.map((link) => {
              const isActive = pathname === link.href
              return (
                <Link
                  key={link.href}
                  href={link.href}
                  className={`px-3 py-1.5 text-xs font-medium tracking-wide transition-colors duration-150 rounded-md no-underline ${
                    isActive
                      ? 'text-accent bg-accent/10'
                      : 'text-text-secondary hover:text-text hover:bg-surface-raised'
                  }`}
                >
                  {link.label}
                </Link>
              )
            })}

          {/* Right: Theme toggle + hamburger */}

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

      {/* Mobile Menu */}
      {mobileOpen && (

            {isHome && navLinks.map((link) => {
              const id = link.href.replace('#', '')
              const isActive = activeSection === id
              return (
                <button
                  key={link.href}
                  onClick={() => handleNavClick(link.href)}
                  className={`text-left px-4 py-3 text-base font-medium rounded-lg transition-colors ${
                    isActive
                      ? 'text-primary bg-primary/10 border border-primary/20'
                      : 'text-text-secondary hover:text-text hover:bg-surface-raised'
                  }`}
                >
                  {link.label}
                </button>
              )
            })}

            {pageLinks.map((link) => {
              const isActive = pathname === link.href
              return (
                <Link
                  key={link.href}
                  href={link.href}
                  onClick={() => setMobileOpen(false)}
                  className={`px-4 py-3 text-base font-medium rounded-lg transition-colors no-underline ${
                    isActive
                      ? 'text-accent bg-accent/10 border border-accent/20'
                      : 'text-text-secondary hover:text-text hover:bg-surface-raised'
                  }`}
                >
                  {link.label}
                </Link>
              )
            })}

      )}
    </>
  )
}


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


**Step 6: Update SectionWrapper.tsx**


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


Also update the inner `px-6` to `px-4 sm:px-6`:


Edit

className="mx-auto max-w-content px-4 sm:px-6"


**Step 7: Update HeroBanner.tsx headline**


<h1 className="text-4xl font-bold bg-gradient-to-r from-primary to-accent bg-clip-text text-transparent leading-tight max-w-4xl">

<h1 className="text-2xl sm:text-3xl lg:text-4xl font-bold bg-gradient-to-r from-primary to-accent bg-clip-text text-transparent leading-tight max-w-4xl">


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


**Step 8: Add h-full to card components and grid wrappers**

SectionCard.tsx — add `h-full` to root motion.div:


className={`bg-surface border border-surface-border border-l-4 ${colors.border} rounded-xl p-6 shadow-card hover:shadow-raised hover:bg-surface-raised transition-all duration-200`}

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


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


PrincipleCard.tsx — add `h-full`:


className="bg-surface border border-surface-border rounded-xl p-5 shadow-card hover:shadow-raised hover:bg-surface-raised transition-all duration-200"

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"


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


KpiCard.tsx — add `h-full`:


className="bg-surface border border-surface-border rounded-xl p-5 shadow-card hover:shadow-raised hover:bg-surface-raised transition-all duration-200 flex flex-col gap-4"

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"


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


FlowStage.tsx — add `h-full`:


className="bg-surface border border-surface-border rounded-xl p-5 shadow-card hover:shadow-raised hover:bg-surface-raised transition-all duration-200 flex flex-col gap-3"

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"


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


DepartmentMap.tsx — add `className="h-full"` to the stagger child motion.div wrapping SectionCard:


          <motion.div
            key={section.id}
            variants={{
              hidden: { opacity: 0, y: 24 },
              visible: { opacity: 1, y: 0 },
            }}
          >
            <SectionCard section={section} />
          </motion.div>

          <motion.div
            key={section.id}
            variants={{
              hidden: { opacity: 0, y: 24 },
              visible: { opacity: 1, y: 0 },
            }}
            className="h-full"
          >
            <SectionCard section={section} />
          </motion.div>


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


GovernanceMap.tsx — add `className="h-full"` to the motion.div wrapper around PrincipleCard:


          {governancePrinciples.map((principle) => (
            <motion.div
              key={principle.id}
              variants={{
                hidden: { opacity: 0, y: 20 },
                visible: { opacity: 1, y: 0 },
              }}
            >
              <PrincipleCard principle={principle} />
            </motion.div>
          ))}

          {governancePrinciples.map((principle) => (
            <motion.div
              key={principle.id}
              variants={{
                hidden: { opacity: 0, y: 20 },
                visible: { opacity: 1, y: 0 },
              }}
              className="h-full"
            >
              <PrincipleCard principle={principle} />
            </motion.div>
          ))}


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


KpiCockpit.tsx — add `className="h-full"` to the motion.div wrappers around KpiCard:


          {filtered.map((kpi) => (
            <motion.div
              key={kpi.id}
              variants={{
                hidden: { opacity: 0, y: 20 },
                visible: { opacity: 1, y: 0, transition: { duration: 0.4, ease: [0.22, 1, 0.36, 1] } },
              }}
            >
              <KpiCard kpi={kpi} />
            </motion.div>
          ))}

          {filtered.map((kpi) => (
            <motion.div
              key={kpi.id}
              variants={{
                hidden: { opacity: 0, y: 20 },
                visible: { opacity: 1, y: 0, transition: { duration: 0.4, ease: [0.22, 1, 0.36, 1] } },
              }}
              className="h-full"
            >
              <KpiCard kpi={kpi} />
            </motion.div>
          ))}


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


OperatingFlow.tsx — update stagger child motion.div className from `"relative"` to `"relative h-full"`:


            className="relative"
          >
            <FlowStage stage={stage} index={index} />

            className="relative h-full"
          >
            <FlowStage stage={stage} index={index} />


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


**Step 9: Run TypeScript check and build**


Bash

cd "/Users/khalidbinkalban/Desktop/My Workstation/dewa-ai-adoption" && npx tsc --noEmit 2>&1

Run TypeScript type check


[rerun: b1]


cd "/Users/khalidbinkalban/Desktop/My Workstation/dewa-ai-adoption" && npx tsc --noEmit 2>&1; echo "EXIT:$?"

TypeScript type check with exit code


EXIT:0
[rerun: b2]


TypeScript passes cleanly. Now run the build:


cd "/Users/khalidbinkalban/Desktop/My Workstation/dewa-ai-adoption" && npm run build 2>&1; echo "EXIT:$?"

Next.js production build


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

  ▲ Next.js 14.2.35

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

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

○  (Static)  prerendered as static content

EXIT:0
[result-id: r15]
[rerun: b3]


Build succeeded with no errors. All 9 steps are complete.

Here is a summary of everything done:

**Files created:**
- `/Users/khalidbinkalban/Desktop/My Workstation/dewa-ai-adoption/src/components/layout/ThemeProvider.tsx` — new React context providing `theme` state and `toggleTheme`, with localStorage persistence and an inline script in `layout.tsx` to prevent flash of wrong theme.

**Files fully rewritten:**
- `src/app/globals.css` — added light theme CSS variables under `[data-theme="light"]`, shadow CSS variables (`--shadow-card` etc.) for both themes, and smooth `transition` on `html` and `body`.
- `src/app/layout.tsx` — wraps app in `ThemeProvider`, adds anti-FOUC inline script, uses `suppressHydrationWarning` on `<html>`.
- `src/components/layout/SiteNav.tsx` — imports `Sun`/`Moon` from lucide-react and `useTheme`, adds theme toggle button next to the hamburger, makes nav background theme-aware, adds responsive padding and `flex-shrink-0` to logo.

**Files edited (targeted changes):**
- `tailwind.config.ts` — `boxShadow` values now reference CSS variables so shadows adapt to both themes.
- `src/components/layout/SectionWrapper.tsx` — `py-20` → `py-12 sm:py-20`, `px-6` → `px-4 sm:px-6`.
- `src/components/overview/HeroBanner.tsx` — `text-4xl` → `text-2xl sm:text-3xl lg:text-4xl`.
- `src/components/structure/SectionCard.tsx`, `src/components/governance/PrincipleCard.tsx`, `src/components/kpis/KpiCard.tsx`, `src/components/operating-model/FlowStage.tsx` — added `h-full` to root `motion.div`.
- `src/components/structure/DepartmentMap.tsx`, `src/components/governance/GovernanceMap.tsx`, `src/components/kpis/KpiCockpit.tsx`, `src/components/operating-model/OperatingFlow.tsx` — added `className="h-full"` (or `"relative h-full"`) to stagger-child `motion.div` wrappers.

TypeScript check: clean (exit 0). Production build: clean (exit 0), all 7 static pages generated successfully.