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

import SectionWrapper from '@/components/layout/SectionWrapper'
import HeroBanner from '@/components/overview/HeroBanner'
import MissionStatement from '@/components/overview/MissionStatement'
import ValuePillars from '@/components/overview/ValuePillars'
import KpiStrip from '@/components/overview/KpiStrip'
import DepartmentMap from '@/components/structure/DepartmentMap'
import ResponsibilityPanel from '@/components/responsibilities/ResponsibilityPanel'
import KpiCockpit from '@/components/kpis/KpiCockpit'
import GovernanceMap from '@/components/governance/GovernanceMap'
import OperatingFlow from '@/components/operating-model/OperatingFlow'
import RoadmapView from '@/components/roadmap/RoadmapView'
import RiskRegister from '@/components/risks/RiskRegister'
import StrategicImpact from '@/components/impact/StrategicImpact'

export default function Home() {
  return (
    <div className="min-h-screen bg-bg">
      <SectionWrapper id="overview">
        <HeroBanner />
        <MissionStatement />
        <ValuePillars />
        <KpiStrip />
      </SectionWrapper>
      <SectionWrapper id="structure">
        <DepartmentMap />
      </SectionWrapper>
      <SectionWrapper id="responsibilities">
        <ResponsibilityPanel />
      </SectionWrapper>
      <SectionWrapper id="kpis">
        <KpiCockpit />
      </SectionWrapper>
      <SectionWrapper id="governance">
        <GovernanceMap />
      </SectionWrapper>
      <SectionWrapper id="operating-model">
        <OperatingFlow />
      </SectionWrapper>
      <SectionWrapper id="roadmap">
        <RoadmapView />
      </SectionWrapper>
      <SectionWrapper id="risks">
        <RiskRegister />
      </SectionWrapper>
      <SectionWrapper id="impact">
        <StrategicImpact />
      </SectionWrapper>
    </div>
  )
}


Good — I have a full picture of all the files. Now I'll work through each Phase 3 item in order. Let me read the remaining files I haven't checked yet.


1	'use client'
2
3	import { useState, useCallback } from 'react'
4	import { Menu, X } from 'lucide-react'
5	import { useActiveSection } from '@/hooks/useActiveSection'
6	import { navLinks } from '@/lib/tokens'
7
8	const sectionIds = navLinks.map((l) => l.href.replace('#', ''))
9
10	export default function SiteNav() {
11	  const [mobileOpen, setMobileOpen] = useState(false)
12	  const activeSection = useActiveSection(sectionIds)
13
14	  const handleNavClick = useCallback((href: string) => {
15	    setMobileOpen(false)
16	    const id = href.replace('#', '')
17	    const el = document.getElementById(id)
18	    if (el) {
19	      el.scrollIntoView({ behavior: 'smooth', block: 'start' })
20	    }
21	  }, [])
22
23	  return (
24	    <>
25
33

34	          {/* Left: Logo + Name */}
35

36

37	              AI
38

39

40	              DEWA
41	              AI Adoption Department
42

43

44
45	          {/* Desktop Nav */}
46
47	            {navLinks.map((link) => {
48	              const id = link.href.replace('#', '')
49	              const isActive = activeSection === id
50	              return (
51	                <button
52	                  key={link.href}
53	                  onClick={() => handleNavClick(link.href)}
54	                  className={`
55	                    px-3 py-1.5 text-xs font-medium tracking-wide transition-colors duration-150 rounded-md
56	                    ${isActive
57	                      ? 'text-primary border-b-2 border-primary rounded-none pb-1'
58	                      : 'text-text-secondary hover:text-text hover:bg-surface-raised'
59	                    }
60	                  `}
61	                >
62	                  {link.label}
63	                </button>
64	              )
65	            })}
66
67
68	          {/* Mobile hamburger */}
69	          <button
70	            className="lg:hidden p-2 text-text-secondary hover:text-text transition-colors"
71	            onClick={() => setMobileOpen((v) => !v)}
72	            aria-label="Toggle menu"
73	          >
74	            {mobileOpen ? <X size={20} /> : <Menu size={20} />}
75	          </button>
76

77
78
79	      {/* Mobile Menu */}
80	      {mobileOpen && (
81

85

86	            {navLinks.map((link) => {
87	              const id = link.href.replace('#', '')
88	              const isActive = activeSection === id
89	              return (
90	                <button
91	                  key={link.href}
92	                  onClick={() => handleNavClick(link.href)}
93	                  className={`
94	                    text-left px-4 py-3 text-base font-medium rounded-lg transition-colors
95	                    ${isActive
96	                      ? 'text-primary bg-primary/10 border border-primary/20'
97	                      : 'text-text-secondary hover:text-text hover:bg-surface-raised'
98	                    }
99	                  `}
100	                >
101	                  {link.label}
102	                </button>
103	              )
104	            })}
105

106

107	      )}
108	    </>
109	  )
110	}
111
[result-id: r29]

'use client'

import { useState, useCallback } from 'react'
import { Menu, X } from 'lucide-react'
import { useActiveSection } from '@/hooks/useActiveSection'
import { navLinks } from '@/lib/tokens'

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

export default function SiteNav() {
  const [mobileOpen, setMobileOpen] = useState(false)
  const activeSection = useActiveSection(sectionIds)

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

  return (
    <>

          {/* Left: Logo + Name */}

              AI

              DEWA
              AI Adoption Department

          {/* Desktop Nav */}

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

          {/* Mobile hamburger */}
          <button
            className="lg:hidden p-2 text-text-secondary hover:text-text transition-colors"
            onClick={() => setMobileOpen((v) => !v)}
            aria-label="Toggle menu"
          >
            {mobileOpen ? <X size={20} /> : <Menu size={20} />}
          </button>

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

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

      )}
    </>
  )
}


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

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

@layer base {
  :root {
    /* DEWA Design System Tokens */
    --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;

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

  * {
    box-sizing: border-box;
  }

  html {
    scroll-behavior: smooth;
    background-color: var(--color-bg);
  }

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

  ::selection {
    background-color: rgba(0, 102, 255, 0.3);
    color: #EEF2FF;
  }

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


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

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)",
        primary: "var(--color-primary)",
        "primary-dim": "var(--color-primary-dim)",
        accent: "var(--color-accent)",
        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)",
      },
      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: "4px",
        md: "8px",
        lg: "12px",
        xl: "16px",
        full: "9999px",
      },
      boxShadow: {
        card: "0 1px 3px rgba(0,0,0,0.4), 0 0 0 1px rgba(30,58,95,0.6)",
        raised: "0 4px 16px rgba(0,0,0,0.5), 0 0 0 1px rgba(0,102,255,0.15)",
        "glow-blue": "0 0 24px rgba(0,102,255,0.2)",
        "glow-gold": "0 0 24px rgba(240,165,0,0.15)",
      },
      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-accent))",
      },
    },
  },
  plugins: [],
};

export default config;


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

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

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" className="dark">
      <body className={`${inter.variable} antialiased bg-bg text-text`}>
        <SiteNav />
        <main className="pt-16">{children}</main>
      </body>
    </html>
  )
}


1	'use client'
2
3	import { useState, useEffect } from 'react'
4
5	export function useActiveSection(sectionIds: string[]): string {
6	  const [activeSection, setActiveSection] = useState<string>(sectionIds[0] ?? '')
7
8	  useEffect(() => {
9	    const observers = new Map<string, IntersectionObserver>()
10
11	    sectionIds.forEach((id) => {
12	      const el = document.getElementById(id)
13	      if (!el) return
14
15	      const observer = new IntersectionObserver(
16	        (entries) => {
17	          entries.forEach((entry) => {
18	            if (entry.isIntersecting) {
19	              setActiveSection(id)
20	            }
21	          })
22	        },
23	        {
24	          rootMargin: '-20% 0px -70% 0px',
25	          threshold: 0,
26	        }
27	      )
28
29	      observer.observe(el)
30	      observers.set(id, observer)
31	    })
32
33	    return () => {
34	      observers.forEach((observer) => observer.disconnect())
35	    }
36	  }, [sectionIds])
37
38	  return activeSection
39	}
40
[result-id: r33]

'use client'

import { useState, useEffect } from 'react'

export function useActiveSection(sectionIds: string[]): string {
  const [activeSection, setActiveSection] = useState<string>(sectionIds[0] ?? '')

  useEffect(() => {
    const observers = new Map<string, IntersectionObserver>()

    sectionIds.forEach((id) => {
      const el = document.getElementById(id)
      if (!el) return

      const observer = new IntersectionObserver(
        (entries) => {
          entries.forEach((entry) => {
            if (entry.isIntersecting) {
              setActiveSection(id)
            }
          })
        },
        {
          rootMargin: '-20% 0px -70% 0px',
          threshold: 0,
        }
      )

      observer.observe(el)
      observers.set(id, observer)
    })

    return () => {
      observers.forEach((observer) => observer.disconnect())
    }
  }, [sectionIds])

  return activeSection
}


1	interface KpiTargetBarProps {
2	  progress: number
3	  status: string
4	}
5
6	const fillClass: Record<string, string> = {
7	  'on-track': 'from-success to-success',
8	  'at-risk': 'from-warning to-warning',
9	  'critical': 'from-danger to-danger',
10	  'planned': 'from-primary to-primary',
11	}
12
13	export default function KpiTargetBar({ progress, status }: KpiTargetBarProps) {
14	  const fill = fillClass[status] ?? 'from-primary to-primary'
15	  const clamped = Math.min(100, Math.max(0, progress))
16
17	  return (
18

19

20	        <div
21	          className={`h-full bg-gradient-to-r ${fill} rounded-full transition-all duration-700`}
22	          style={{ width: `${clamped}%` }}
23	        />
24

25
{clamped}% of target

26

27	  )
28	}
29
[result-id: r34]

interface KpiTargetBarProps {
  progress: number
  status: string
}

const fillClass: Record<string, string> = {
  'on-track': 'from-success to-success',
  'at-risk': 'from-warning to-warning',
  'critical': 'from-danger to-danger',
  'planned': 'from-primary to-primary',
}

export default function KpiTargetBar({ progress, status }: KpiTargetBarProps) {
  const fill = fillClass[status] ?? 'from-primary to-primary'
  const clamped = Math.min(100, Math.max(0, progress))

  return (

        <div
          className={`h-full bg-gradient-to-r ${fill} rounded-full transition-all duration-700`}
          style={{ width: `${clamped}%` }}
        />

{clamped}% of target

  )
}


Full picture is clear. Here's what I found needs work:

**Gaps to fill:**
- `MissionStatement`, `KpiStrip`, `KpiCockpit`, `ResponsibilityPanel` — no entrance animations
- `DecisionLayerCard`, `FlowStage`, `RiskCard`, roadmap items, `StrategicImpact` contributions/metrics — no `whileHover`
- `KpiStrip` + `KpiCard` — no count-up (need a custom hook, `react-countup` not installed)
- `KpiTargetBar` — bar jumps to final width on render, should animate in
- `KpiCard` value — `text-2xl` but spec says `text-3xl` for KPI numbers
- `StrategicImpact` contribution row — tagline badge + long name can collide on mobile

Starting Item 1 now.

---

**Item 1 — Framer Motion entrance animations**

First, create the `useCountUp` hook (needed for Item 2 but I'll build it now so count-up and animations land together per file):


Write

'use client'

import { useEffect, useRef, useState } from 'react'

function parseNumeric(value: string): number {
  return parseFloat(value.replace(/,/g, '')) || 0
}

function formatToMatch(num: number, original: string): string {
  const rounded = Math.round(num)
  return original.includes(',') ? rounded.toLocaleString('en-US') : String(rounded)
}

export function useCountUp(value: string, inView: boolean, duration = 1400): string {
  const [display, setDisplay] = useState('0')
  const started = useRef(false)
  const target = parseNumeric(value)

  useEffect(() => {
    if (!inView || started.current) return
    started.current = true

    const start = performance.now()

    const tick = (now: number) => {
      const t = Math.min((now - start) / duration, 1)
      const eased = 1 - Math.pow(1 - t, 3)
      setDisplay(formatToMatch(eased * target, value))
      if (t < 1) requestAnimationFrame(tick)
    }

    requestAnimationFrame(tick)
  }, [inView, target, value, duration])

  return display
}


File created successfully at: /Users/khalidbinkalban/Desktop/My Workstation/dewa-ai-adoption/src/hooks/useCountUp.ts

'use client'

import { useEffect, useRef, useState } from 'react'

function parseNumeric(value: string): number {
  return parseFloat(value.replace(/,/g, '')) || 0
}

function formatToMatch(num: number, original: string): string {
  const rounded = Math.round(num)
  return original.includes(',') ? rounded.toLocaleString('en-US') : String(rounded)
}

export function useCountUp(value: string, inView: boolean, duration = 1400): string {
  const [display, setDisplay] = useState('0')
  const started = useRef(false)
  const target = parseNumeric(value)

  useEffect(() => {
    if (!inView || started.current) return
    started.current = true

    const start = performance.now()

    const tick = (now: number) => {
      const t = Math.min((now - start) / duration, 1)
      const eased = 1 - Math.pow(1 - t, 3)
      setDisplay(formatToMatch(eased * target, value))
      if (t < 1) requestAnimationFrame(tick)
    }

    requestAnimationFrame(tick)
  }, [inView, target, value, duration])

  return display
}


Now add entrance animation + count-up + hover to `KpiStrip`, animate `MissionStatement`, stagger `KpiCockpit`, and stagger `ResponsibilityPanel` — all in parallel:


'use client'

import { useRef } from 'react'
import { motion, useInView } from 'framer-motion'
import { department, type TopMetric } from '@/content/department'
import { useCountUp } from '@/hooks/useCountUp'

function MetricCard({ metric }: { metric: TopMetric }) {
  const ref = useRef<HTMLDivElement>(null)
  const inView = useInView(ref, { once: true })
  const displayValue = useCountUp(metric.value, inView)

  return (
    <motion.div
      ref={ref}
      variants={{
        hidden: { opacity: 0, y: 20 },
        visible: { opacity: 1, y: 0, transition: { duration: 0.4, ease: [0.22, 1, 0.36, 1] } },
      }}
      whileHover={{ y: -3, transition: { duration: 0.2 } }}
      className="bg-surface border border-surface-border rounded-xl p-4 shadow-card hover:shadow-raised hover:bg-surface-raised transition-all duration-200"
    >

        {metric.label}

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

{metric.trend}

    </motion.div>
  )
}

export default function KpiStrip() {
  return (

      <motion.div
        className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-6 gap-4"
        initial="hidden"
        whileInView="visible"
        viewport={{ once: true, margin: '-10%' }}
        variants={{ visible: { transition: { staggerChildren: 0.07 } } }}
      >
        {department.topMetrics.map((metric) => (
          <MetricCard key={metric.id} metric={metric} />
        ))}
      </motion.div>

  )
}


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

'use client'

import { useRef } from 'react'
import { motion, useInView } from 'framer-motion'
import { department, type TopMetric } from '@/content/department'
import { useCountUp } from '@/hooks/useCountUp'

function MetricCard({ metric }: { metric: TopMetric }) {
  const ref = useRef<HTMLDivElement>(null)
  const inView = useInView(ref, { once: true })
  const displayValue = useCountUp(metric.value, inView)

  return (
    <motion.div
      ref={ref}
      variants={{
        hidden: { opacity: 0, y: 20 },
        visible: { opacity: 1, y: 0, transition: { duration: 0.4, ease: [0.22, 1, 0.36, 1] } },
      }}
      whileHover={{ y: -3, transition: { duration: 0.2 } }}
      className="bg-surface border border-surface-border rounded-xl p-4 shadow-card hover:shadow-raised hover:bg-surface-raised transition-all duration-200"
    >

        {metric.label}

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

{metric.trend}

    </motion.div>
  )
}

export default function KpiStrip() {
  return (

      <motion.div
        className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-6 gap-4"
        initial="hidden"
        whileInView="visible"
        viewport={{ once: true, margin: '-10%' }}
        variants={{ visible: { transition: { staggerChildren: 0.07 } } }}
      >
        {department.topMetrics.map((metric) => (
          <MetricCard key={metric.id} metric={metric} />
        ))}
      </motion.div>

  )
}

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

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

+import { motion, useInView } from 'framer-motion'

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

+import { useCountUp } from '@/hooks/useCountUp'

+  const ref = useRef<HTMLDivElement>(null)

+  const inView = useInView(ref, { once: true })

+  const displayValue = useCountUp(metric.value, inView)

-    <div className="bg-surface border border-surface-border rounded-xl p-4 shadow-card hover:shadow-raised hover:bg-surface-raised transition-all duration-200">

+        visible: { opacity: 1, y: 0, transition: { duration: 0.4, ease: [0.22, 1, 0.36, 1] } },

+      whileHover={{ y: -3, transition: { duration: 0.2 } }}

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

<p className="text-xs font-medium tracking-widest uppercase text-text-dim mb-2">

-      <div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-6 gap-4">

+        className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-6 gap-4"

+        viewport={{ once: true, margin: '-10%' }}

+        variants={{ visible: { transition: { staggerChildren: 0.07 } } }}

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

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

        {metric.label}

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

{metric.trend}

  )
}

export default function KpiStrip() {
  return (

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

  )
}


'use client'

import { motion } from 'framer-motion'
import { department } from '@/content/department'

export default function MissionStatement() {
  return (

        Department Mandate

      <motion.div
        className="space-y-4"
        initial="hidden"
        whileInView="visible"
        viewport={{ once: true, margin: '-10%' }}
        variants={{ visible: { transition: { staggerChildren: 0.1 } } }}
      >
        <motion.div
          variants={{
            hidden: { opacity: 0, y: 24 },
            visible: { opacity: 1, y: 0, transition: { duration: 0.45, ease: [0.22, 1, 0.36, 1] } },
          }}
          whileHover={{ y: -3, transition: { duration: 0.2 } }}
          className="bg-surface border border-surface-border rounded-xl p-6 shadow-card hover:shadow-raised hover:bg-surface-raised transition-all duration-200"
        >

Mandate

{department.mandate}

Strategic Context

              {department.strategicContext}

        </motion.div>

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

              AlHasbah Direction

{department.alhashbahNote}

        </motion.div>
      </motion.div>

  )
}


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

'use client'

import { motion } from 'framer-motion'
import { department } from '@/content/department'

export default function MissionStatement() {
  return (

        Department Mandate

      <motion.div
        className="space-y-4"
        initial="hidden"
        whileInView="visible"
        viewport={{ once: true, margin: '-10%' }}
        variants={{ visible: { transition: { staggerChildren: 0.1 } } }}
      >
        <motion.div
          variants={{
            hidden: { opacity: 0, y: 24 },
            visible: { opacity: 1, y: 0, transition: { duration: 0.45, ease: [0.22, 1, 0.36, 1] } },
          }}
          whileHover={{ y: -3, transition: { duration: 0.2 } }}
          className="bg-surface border border-surface-border rounded-xl p-6 shadow-card hover:shadow-raised hover:bg-surface-raised transition-all duration-200"
        >

Mandate

{department.mandate}

Strategic Context

              {department.strategicContext}

        </motion.div>

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

              AlHasbah Direction

{department.alhashbahNote}

        </motion.div>
      </motion.div>

  )
}

<div className="w-12 h-0.5 bg-gradient-to-r from-primary to-accent rounded-full my-4" />

-      <div className="bg-surface border border-surface-border rounded-xl p-6 shadow-card mb-6">

+        variants={{ visible: { transition: { staggerChildren: 0.1 } } }}

+            hidden: { opacity: 0, y: 24 },

+            visible: { opacity: 1, y: 0, transition: { duration: 0.45, ease: [0.22, 1, 0.36, 1] } },

+          whileHover={{ y: -3, transition: { duration: 0.2 } }}

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

-        <div className="mt-6 pt-6 border-t border-surface-border">

-          <p className="text-text-secondary leading-relaxed text-sm">

-            {department.strategicContext}

+          <div className="mt-6 pt-6 border-t border-surface-border">

+            <p className="text-text-secondary leading-relaxed text-sm">

+              {department.strategicContext}

-      <div className="bg-surface border border-gold/30 rounded-xl p-6 shadow-card relative overflow-hidden">

-        <div className="absolute left-0 top-0 bottom-0 w-1 bg-gradient-to-b from-gold to-gold-dim rounded-l-xl" />

-          <p className="text-xs font-medium tracking-widest uppercase text-gold mb-3">

+          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"

+          <div className="absolute left-0 top-0 bottom-0 w-1 bg-gradient-to-b from-gold to-gold-dim rounded-l-xl" />

+            <p className="text-xs font-medium tracking-widest uppercase text-gold mb-3">

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

export default function MissionStatement() {
  return (

        Department Mandate

Mandate

{department.mandate}

Strategic Context

            {department.strategicContext}

            AlHasbah Direction

{department.alhashbahNote}

  )
}


'use client'

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

type FilterTab = 'All' | KpiTier

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

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

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

  return (

        KPI Framework

Performance Visibility

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

      <AnimatePresence mode="wait">
        <motion.div
          key={activeTab}
          className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-5"
          initial="hidden"
          animate="visible"
          exit={{ opacity: 0, transition: { duration: 0.15 } }}
          variants={{ visible: { transition: { staggerChildren: 0.06 } } }}
        >
          {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>
          ))}
        </motion.div>
      </AnimatePresence>

  )
}


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

'use client'

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

type FilterTab = 'All' | KpiTier

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

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

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

  return (

        KPI Framework

Performance Visibility

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

      <AnimatePresence mode="wait">
        <motion.div
          key={activeTab}
          className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-5"
          initial="hidden"
          animate="visible"
          exit={{ opacity: 0, transition: { duration: 0.15 } }}
          variants={{ visible: { transition: { staggerChildren: 0.06 } } }}
        >
          {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>
          ))}
        </motion.div>
      </AnimatePresence>

  )
}

+import { motion, AnimatePresence } from 'framer-motion'

-      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-5">

-          <KpiCard key={kpi.id} kpi={kpi} />

+          className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-5"

+          exit={{ opacity: 0, transition: { duration: 0.15 } }}

+          variants={{ visible: { transition: { staggerChildren: 0.06 } } }}

+                hidden: { opacity: 0, y: 20 },

+                visible: { opacity: 1, y: 0, transition: { duration: 0.4, ease: [0.22, 1, 0.36, 1] } },

'use client'

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

type FilterTab = 'All' | KpiTier

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

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

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

  return (

        KPI Framework

Performance Visibility

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

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

  )
}


'use client'

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

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

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

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

  return (

        Section Responsibilities

Who Owns What

      <motion.div
        className="space-y-4"
        initial="hidden"
        whileInView="visible"
        viewport={{ once: true, margin: '-10%' }}
        variants={{ visible: { transition: { staggerChildren: 0.09 } } }}
      >
        {sections.map((section) => {
          const isOpen = openId === section.id
          const colors = colorClasses[section.id] ?? colorClasses['adoption-office']

          return (
            <motion.div
              key={section.id}
              variants={{
                hidden: { opacity: 0, y: 20 },
                visible: { opacity: 1, y: 0, transition: { duration: 0.4, ease: [0.22, 1, 0.36, 1] } },
              }}
              className={`bg-surface border border-surface-border border-l-4 ${colors.border} rounded-xl shadow-card overflow-hidden`}
            >
              <button
                onClick={() => toggle(section.id)}
                className="w-full flex items-center justify-between px-6 py-4 text-left hover:bg-surface-raised transition-colors duration-150"
              >

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

                    {section.tagline}

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

              <AnimatePresence initial={false}>
                {isOpen && (
                  <motion.div
                    initial={{ height: 0, opacity: 0 }}
                    animate={{ height: 'auto', opacity: 1, transition: { duration: 0.3, ease: [0.22, 1, 0.36, 1] } }}
                    exit={{ height: 0, opacity: 0, transition: { duration: 0.2 } }}
                    className="overflow-hidden"
                  >

                          Responsibilities

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

                              {r}

                          ))}

                            Core Activities

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

                                {a}

                            ))}

                            Key Deliverables

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

                                {d}

                            ))}

                          Stakeholders

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

                          ))}

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

  )
}


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

'use client'

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

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

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

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

  return (

        Section Responsibilities

Who Owns What

      <motion.div
        className="space-y-4"
        initial="hidden"
        whileInView="visible"
        viewport={{ once: true, margin: '-10%' }}
        variants={{ visible: { transition: { staggerChildren: 0.09 } } }}
      >
        {sections.map((section) => {
          const isOpen = openId === section.id
          const colors = colorClasses[section.id] ?? colorClasses['adoption-office']

          return (
            <motion.div
              key={section.id}
              variants={{
                hidden: { opacity: 0, y: 20 },
                visible: { opacity: 1, y: 0, transition: { duration: 0.4, ease: [0.22, 1, 0.36, 1] } },
              }}
              className={`bg-surface border border-surface-border border-l-4 ${colors.border} rounded-xl shadow-card overflow-hidden`}
            >
              <button
                onClick={() => toggle(section.id)}
                className="w-full flex items-center justify-between px-6 py-4 text-left hover:bg-surface-raised transition-colors duration-150"
              >

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

                    {section.tagline}

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

              <AnimatePresence initial={false}>
                {isOpen && (
                  <motion.div
                    initial={{ height: 0, opacity: 0 }}
                    animate={{ height: 'auto', opacity: 1, transition: { duration: 0.3, ease: [0.22, 1, 0.36, 1] } }}
                    exit={{ height: 0, opacity: 0, transition: { duration: 0.2 } }}
                    className="overflow-hidden"
                  >

                          Responsibilities

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

                              {r}

                          ))}

                            Core Activities

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

                                {a}

                            ))}

                            Key Deliverables

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

                                {d}

                            ))}

                          Stakeholders

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

                          ))}

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

  )
}

<div className="w-12 h-0.5 bg-gradient-to-r from-primary to-accent rounded-full my-4" />

+        viewport={{ once: true, margin: '-10%' }}

+        variants={{ visible: { transition: { staggerChildren: 0.09 } } }}

-              className={`bg-surface border border-surface-border border-l-4 ${colors.border} rounded-xl shadow-card overflow-hidden transition-all duration-200`}

+              className={`bg-surface border border-surface-border border-l-4 ${colors.border} rounded-xl shadow-card overflow-hidden`}

-                <div className="px-6 pb-6 space-y-6 border-t border-surface-border pt-4">

-                    <h4 className="text-xs font-medium tracking-widest uppercase text-text-dim mb-3">

-                    <ul className="space-y-2">

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

-                        <li key={i} className="flex items-start gap-2 text-sm text-text-secondary">

-                          <span className="mt-1.5 w-1.5 h-1.5 rounded-full flex-shrink-0 bg-primary/50" />

+              <AnimatePresence initial={false}>

+                    initial={{ height: 0, opacity: 0 }}

+                    animate={{ height: 'auto', opacity: 1, transition: { duration: 0.3, ease: [0.22, 1, 0.36, 1] } }}

+                    exit={{ height: 0, opacity: 0, transition: { duration: 0.2 } }}

+                    className="overflow-hidden"

+                    <div className="px-6 pb-6 space-y-6 border-t border-surface-border pt-4">

+                        <h4 className="text-xs font-medium tracking-widest uppercase text-text-dim mb-3">

+                          Responsibilities

+                        <ul className="space-y-2">

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

+                            <li key={i} className="flex items-start gap-2 text-sm text-text-secondary">

+                              <span className="mt-1.5 w-1.5 h-1.5 rounded-full flex-shrink-0 bg-primary/50" />

-                  <div className="grid grid-cols-1 md:grid-cols-2 gap-6">

-                        Core Activities

-                      <ul className="space-y-1.5">

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

-                          <li key={i} className="text-sm text-text-secondary flex items-start gap-2">

-                            <span className="mt-1.5 w-1 h-1 rounded-full flex-shrink-0 bg-accent/50" />

+                      <div className="grid grid-cols-1 md:grid-cols-2 gap-6">

+                            Core Activities

+                          <ul className="space-y-1.5">

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

+                              <li key={i} className="text-sm text-text-secondary flex items-start gap-2">

+                                <span className="mt-1.5 w-1 h-1 rounded-full flex-shrink-0 bg-accent/50" />

-                        Key Deliverables

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

-                            <span className="mt-1.5 w-1 h-1 rounded-full flex-shrink-0 bg-gold/50" />

+                            Key Deliverables

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

+                                <span className="mt-1.5 w-1 h-1 rounded-full flex-shrink-0 bg-gold/50" />

-                    <div className="flex flex-wrap gap-2">

-                      {section.stakeholders.map((s, i) => (

-                          className={`text-xs px-2.5 py-1 rounded-full border font-medium ${colors.badge}`}

+                        <div className="flex flex-wrap gap-2">

+                          {section.stakeholders.map((s, i) => (

+                              className={`text-xs px-2.5 py-1 rounded-full border font-medium ${colors.badge}`}

'use client'

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

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

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

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

  return (

        Section Responsibilities

Who Owns What

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

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

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

                    {section.tagline}

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

              {isOpen && (

                      Responsibilities

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

                          {r}

                      ))}

                        Core Activities

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

                            {a}

                        ))}

                        Key Deliverables

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

                            {d}

                        ))}

                      Stakeholders

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

                      ))}

              )}

          )
        })}

  )
}


Also upgraded `ResponsibilityPanel` with `AnimatePresence` for smooth accordion open/close. Now the `DecisionLayer` stagger — both the card and the `GovernanceMap` parent:


'use client'

import { motion } from 'framer-motion'
import { type DecisionLayer } from '@/content/governance'

interface DecisionLayerProps {
  layer: DecisionLayer
  index: number
}

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

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

  return (
    <motion.div
      variants={{
        hidden: { opacity: 0, y: 20 },
        visible: { opacity: 1, y: 0, transition: { duration: 0.4, ease: [0.22, 1, 0.36, 1] } },
      }}
      whileHover={{ y: -3, transition: { duration: 0.2 } }}
      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`}
    >

{layer.name}

          {layer.cadence}

{layer.description}

            Participants

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

                {p}

            ))}

            Scope

{layer.scope}

    </motion.div>
  )
}


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

'use client'

import { motion } from 'framer-motion'
import { type DecisionLayer } from '@/content/governance'

interface DecisionLayerProps {
  layer: DecisionLayer
  index: number
}

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

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

  return (
    <motion.div
      variants={{
        hidden: { opacity: 0, y: 20 },
        visible: { opacity: 1, y: 0, transition: { duration: 0.4, ease: [0.22, 1, 0.36, 1] } },
      }}
      whileHover={{ y: -3, transition: { duration: 0.2 } }}
      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`}
    >

{layer.name}

          {layer.cadence}

{layer.description}

            Participants

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

                {p}

            ))}

            Scope

{layer.scope}

    </motion.div>
  )
}

-      className={`bg-surface border border-surface-border border-l-4 ${borderColor} rounded-xl p-5 shadow-card`}

+        visible: { opacity: 1, y: 0, transition: { duration: 0.4, ease: [0.22, 1, 0.36, 1] } },

+      whileHover={{ y: -3, transition: { duration: 0.2 } }}

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

<div className="flex items-start justify-between gap-4 mb-3">

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

interface DecisionLayerProps {
  layer: DecisionLayer
  index: number
}

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

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

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

{layer.name}

          {layer.cadence}

{layer.description}

            Participants

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

                {p}

            ))}

            Scope

{layer.scope}

  )
}


Now add the stagger container in `GovernanceMap` around decision layers:


Edit

{/* Decision Layers */}

          Decision Layers

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

{/* Decision Layers */}

          Decision Layers

        <motion.div
          className="space-y-4"
          initial="hidden"
          whileInView="visible"
          viewport={{ once: true, margin: '-10%' }}
          variants={{ visible: { transition: { staggerChildren: 0.08 } } }}
        >
          {decisionLayers.map((layer, i) => (
            <DecisionLayerCard key={layer.id} layer={layer} index={i} />
          ))}
        </motion.div>


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

{/* Decision Layers */}

          Decision Layers

        <motion.div
          className="space-y-4"
          initial="hidden"
          whileInView="visible"
          viewport={{ once: true, margin: '-10%' }}
          variants={{ visible: { transition: { staggerChildren: 0.08 } } }}
        >
          {decisionLayers.map((layer, i) => (
            <DecisionLayerCard key={layer.id} layer={layer} index={i} />
          ))}
        </motion.div>

'use client'

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

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

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

export default function GovernanceMap() {
  return (

        Governance Framework

        How AI Adoption is Controlled and Overseen

      {/* Principles */}

          Governing Principles

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

      {/* Decision Layers */}

          Decision Layers

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

      {/* Governance Controls */}

          Governance Controls

Area

Control

Owner

Cadence

Status

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

{ctrl.area}

{ctrl.control}

{ctrl.owner}

{ctrl.reviewCadence}

                  {controlStatusLabels[ctrl.status]}

          ))}

  )
}

<h3 className="text-xs font-semibold tracking-widest uppercase text-text-secondary mb-4">

+          viewport={{ once: true, margin: '-10%' }}

+          variants={{ visible: { transition: { staggerChildren: 0.08 } } }}


**Item 1 complete.** Now Item 2 — count-up on `KpiCard`, and Item 3 hover states — doing all card files simultaneously:

---

**Items 2 & 3 — Count-up + remaining hover states**


Write

'use client'

import { useRef } from 'react'
import { motion, useInView } from 'framer-motion'
import { type Kpi } from '@/content/kpis'
import KpiTargetBar from './KpiTargetBar'
import { useCountUp } from '@/hooks/useCountUp'

interface KpiCardProps {
  kpi: Kpi
}

const statusStyles: Record<string, string> = {
  'on-track': 'bg-success/10 text-success border-success/20',
  'at-risk': 'bg-warning/10 text-warning border-warning/20',
  'critical': 'bg-danger/10 text-danger border-danger/20',
  'planned': 'bg-primary/10 text-primary border-primary/20',
}

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

export default function KpiCard({ kpi }: KpiCardProps) {
  const cardRef = useRef<HTMLDivElement>(null)
  const inView = useInView(cardRef, { once: true })
  const displayValue = useCountUp(kpi.value, inView)
  const badgeClass = statusStyles[kpi.status] ?? statusStyles['planned']

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

            {kpi.label}

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

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

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

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

{kpi.description}

        {kpi.trend}
        {kpi.cadence}

    </motion.div>
  )
}


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

'use client'

import { useRef } from 'react'
import { motion, useInView } from 'framer-motion'
import { type Kpi } from '@/content/kpis'
import KpiTargetBar from './KpiTargetBar'
import { useCountUp } from '@/hooks/useCountUp'

interface KpiCardProps {
  kpi: Kpi
}

const statusStyles: Record<string, string> = {
  'on-track': 'bg-success/10 text-success border-success/20',
  'at-risk': 'bg-warning/10 text-warning border-warning/20',
  'critical': 'bg-danger/10 text-danger border-danger/20',
  'planned': 'bg-primary/10 text-primary border-primary/20',
}

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

export default function KpiCard({ kpi }: KpiCardProps) {
  const cardRef = useRef<HTMLDivElement>(null)
  const inView = useInView(cardRef, { once: true })
  const displayValue = useCountUp(kpi.value, inView)
  const badgeClass = statusStyles[kpi.status] ?? statusStyles['planned']

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

            {kpi.label}

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

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

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

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

{kpi.description}

        {kpi.trend}
        {kpi.cadence}

    </motion.div>
  )
}

+import { motion, useInView } from 'framer-motion'

+import { useCountUp } from '@/hooks/useCountUp'

+  const cardRef = useRef<HTMLDivElement>(null)

+  const inView = useInView(cardRef, { once: true })

+  const displayValue = useCountUp(kpi.value, inView)

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

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

'use client'

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

interface KpiCardProps {
  kpi: Kpi
}

const statusStyles: Record<string, string> = {
  'on-track': 'bg-success/10 text-success border-success/20',
  'at-risk': 'bg-warning/10 text-warning border-warning/20',
  'critical': 'bg-danger/10 text-danger border-danger/20',
  'planned': 'bg-primary/10 text-primary border-primary/20',
}

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

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

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

            {kpi.label}

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

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

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

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

{kpi.description}

        {kpi.trend}
        {kpi.cadence}

    </motion.div>
  )
}


Now animate the `KpiTargetBar` fill from 0 → target on scroll-enter:


'use client'

import { motion } from 'framer-motion'

interface KpiTargetBarProps {
  progress: number
  status: string
}

const fillClass: Record<string, string> = {
  'on-track': 'from-success to-success',
  'at-risk': 'from-warning to-warning',
  'critical': 'from-danger to-danger',
  'planned': 'from-primary to-primary',
}

export default function KpiTargetBar({ progress, status }: KpiTargetBarProps) {
  const fill = fillClass[status] ?? 'from-primary to-primary'
  const clamped = Math.min(100, Math.max(0, progress))

  return (

        <motion.div
          className={`h-full bg-gradient-to-r ${fill} rounded-full`}
          initial={{ width: '0%' }}
          whileInView={{ width: `${clamped}%` }}
          viewport={{ once: true }}
          transition={{ duration: 0.9, ease: [0.22, 1, 0.36, 1], delay: 0.15 }}
        />

{clamped}% of target

  )
}


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

'use client'

import { motion } from 'framer-motion'

interface KpiTargetBarProps {
  progress: number
  status: string
}

const fillClass: Record<string, string> = {
  'on-track': 'from-success to-success',
  'at-risk': 'from-warning to-warning',
  'critical': 'from-danger to-danger',
  'planned': 'from-primary to-primary',
}

export default function KpiTargetBar({ progress, status }: KpiTargetBarProps) {
  const fill = fillClass[status] ?? 'from-primary to-primary'
  const clamped = Math.min(100, Math.max(0, progress))

  return (

        <motion.div
          className={`h-full bg-gradient-to-r ${fill} rounded-full`}
          initial={{ width: '0%' }}
          whileInView={{ width: `${clamped}%` }}
          viewport={{ once: true }}
          transition={{ duration: 0.9, ease: [0.22, 1, 0.36, 1], delay: 0.15 }}
        />

{clamped}% of target

  )
}

+'use client'
+
+import { motion } from 'framer-motion'
+
interface KpiTargetBarProps {
progress: number
status: string

<div className="w-full h-1.5 bg-surface-border rounded-full overflow-hidden">

-          className={`h-full bg-gradient-to-r ${fill} rounded-full transition-all duration-700`}

-          style={{ width: `${clamped}%` }}

+          className={`h-full bg-gradient-to-r ${fill} rounded-full`}

+          whileInView={{ width: `${clamped}%` }}

interface KpiTargetBarProps {
  progress: number
  status: string
}

const fillClass: Record<string, string> = {
  'on-track': 'from-success to-success',
  'at-risk': 'from-warning to-warning',
  'critical': 'from-danger to-danger',
  'planned': 'from-primary to-primary',
}

export default function KpiTargetBar({ progress, status }: KpiTargetBarProps) {
  const fill = fillClass[status] ?? 'from-primary to-primary'
  const clamped = Math.min(100, Math.max(0, progress))

  return (

        <div
          className={`h-full bg-gradient-to-r ${fill} rounded-full transition-all duration-700`}
          style={{ width: `${clamped}%` }}
        />

{clamped}% of target

  )
}


Now add `whileHover` to the remaining cards — `FlowStage`, `RiskCard`, roadmap items, `StrategicImpact`:


'use client'

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

interface FlowStageProps {
  stage: OperatingStage
  index: number
}

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

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

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

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

{stage.name}

{stage.description}

          Outputs

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

              {output}

          ))}

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

            {sectionLabels[sectionId] ?? sectionId}

        ))}

    </motion.div>
  )
}


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

'use client'

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

interface FlowStageProps {
  stage: OperatingStage
  index: number
}

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

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

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

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

{stage.name}

{stage.description}

          Outputs

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

              {output}

          ))}

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

            {sectionLabels[sectionId] ?? sectionId}

        ))}

    </motion.div>
  )
}

-    <div 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">

+      whileHover={{ y: -3, transition: { duration: 0.2 } }}

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

<div className="flex items-start justify-between gap-2">

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

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

interface FlowStageProps {
  stage: OperatingStage
  index: number
}

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

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

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

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

{stage.name}

{stage.description}

          Outputs

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

              {output}

          ))}

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

            {sectionLabels[sectionId] ?? sectionId}

        ))}

  )
}


'use client'

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

interface RiskCardProps {
  risk: Risk
}

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

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

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

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

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

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

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

              {statusLabels[risk.status]}

{risk.title}

{risk.description}

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

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

Owner: {risk.owner}

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

      {expanded && (

Mitigations

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

                {m}

            ))}

      )}
    </motion.div>
  )
}


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

'use client'

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

interface RiskCardProps {
  risk: Risk
}

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

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

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

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

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

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

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

              {statusLabels[risk.status]}

{risk.title}

{risk.description}

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

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

Owner: {risk.owner}

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

      {expanded && (

Mitigations

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

                {m}

            ))}

      )}
    </motion.div>
  )
}

-    <div className="bg-surface border border-surface-border rounded-xl shadow-card hover:shadow-raised transition-all duration-200">

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

<div className="flex items-start justify-between gap-3 mb-3">

<div className="flex items-center gap-2 flex-wrap">

'use client'

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

interface RiskCardProps {
  risk: Risk
}

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

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

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

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

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

  return (

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

              {statusLabels[risk.status]}

{risk.title}

{risk.description}

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

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

Owner: {risk.owner}

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

      {expanded && (

Mitigations

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

                {m}

            ))}

      )}

  )
}


Edit

              {items.map((item) => (
                <div
                  key={item.id}
                  className="bg-surface border border-surface-border rounded-xl p-4 shadow-card hover:shadow-raised hover:bg-surface-raised transition-all duration-200"
                >

              {items.map((item) => (
                <motion.div
                  key={item.id}
                  whileHover={{ y: -3, transition: { duration: 0.2 } }}
                  className="bg-surface border border-surface-border rounded-xl p-4 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/roadmap/RoadmapView.tsx has been updated successfully.

              {items.map((item) => (
                <div
                  key={item.id}
                  className="bg-surface border border-surface-border rounded-xl p-4 shadow-card hover:shadow-raised hover:bg-surface-raised transition-all duration-200"
                >

              {items.map((item) => (
                <motion.div
                  key={item.id}
                  whileHover={{ y: -3, transition: { duration: 0.2 } }}
                  className="bg-surface border border-surface-border rounded-xl p-4 shadow-card hover:shadow-raised hover:bg-surface-raised transition-all duration-200"
                >

'use client'

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

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

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

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

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

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

export default function RoadmapView() {
  return (

        Strategic Roadmap

Now, Next, and Future

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

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

                {items.length} items

              {items.map((item) => (

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

                      {statusLabels[item.status]}

{item.title}

                    {item.description}

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

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

  )
}

+                  whileHover={{ y: -3, transition: { duration: 0.2 } }}

<div className="flex items-start justify-between gap-2 mb-2">


                  <p className="text-xs text-text-dim">
                    {ownerLabels[item.owner] ?? item.owner}
                  </p>
                </div>
              ))}

                  <p className="text-xs text-text-dim">
                    {ownerLabels[item.owner] ?? item.owner}
                  </p>
                </motion.div>
              ))}


                  <p className="text-xs text-text-dim">
                    {ownerLabels[item.owner] ?? item.owner}
                  </p>
                </div>
              ))}

                  <p className="text-xs text-text-dim">
                    {ownerLabels[item.owner] ?? item.owner}
                  </p>
                </motion.div>
              ))}

'use client'

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

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

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

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

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

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

export default function RoadmapView() {
  return (

        Strategic Roadmap

Now, Next, and Future

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

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

                {items.length} items

              {items.map((item) => (
                <motion.div
                  key={item.id}
                  whileHover={{ y: -3, transition: { duration: 0.2 } }}
                  className="bg-surface border border-surface-border rounded-xl p-4 shadow-card hover:shadow-raised hover:bg-surface-raised transition-all duration-200"
                >

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

                      {statusLabels[item.status]}

{item.title}

                    {item.description}

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

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

  )
}


Now update `StrategicImpact` — adds `whileHover` to value pillar cards, emphasis metrics, and section contribution cards, plus the responsive fix:


Write

'use client'

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

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

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

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

  return (

        Strategic Impact

Why This Department Matters to DEWA

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

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

              )}

{pillar.title}

{pillar.description}

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

      {/* Key Stats */}
      <motion.div
        className="grid grid-cols-1 sm:grid-cols-3 gap-4 mb-10"
        initial="hidden"
        whileInView="visible"
        viewport={{ once: true, margin: '-10%' }}
        variants={{ visible: { transition: { staggerChildren: 0.08 } } }}
      >
        {emphasisMetrics.map((metric) => (
          <motion.div
            key={metric.id}
            variants={{
              hidden: { opacity: 0, y: 20 },
              visible: { opacity: 1, y: 0, transition: { duration: 0.4, ease: [0.22, 1, 0.36, 1] } },
            }}
            whileHover={{ y: -3, transition: { duration: 0.2 } }}
            className="bg-surface border border-surface-border rounded-xl p-5 shadow-card hover:shadow-raised hover:bg-surface-raised transition-all duration-200 text-center"
          >

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

{metric.label}

{metric.trend}

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

      {/* Section contributions */}

          Section Contributions to DEWA Mission

        <motion.div
          className="space-y-4"
          initial="hidden"
          whileInView="visible"
          viewport={{ once: true, margin: '-10%' }}
          variants={{ visible: { transition: { staggerChildren: 0.07 } } }}
        >
          {sections.map((section) => {
            const colors = sectionColorClasses[section.id] ?? sectionColorClasses['adoption-office']
            return (
              <motion.div
                key={section.id}
                variants={{
                  hidden: { opacity: 0, y: 20 },
                  visible: { opacity: 1, y: 0, transition: { duration: 0.4, ease: [0.22, 1, 0.36, 1] } },
                }}
                whileHover={{ y: -3, transition: { duration: 0.2 } }}
                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`}
              >

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

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

{section.purpose}

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

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

            AlHasbah Direction

{department.alhashbahNote}

      </motion.div>

  )
}