File created successfully at: /Users/khalidbinkalban/Desktop/My Workstation/dewa-ai-adoption/content/kpis.ts

export type KpiTier = 'P1' | 'P2' | 'P3'
export type KpiCategory =
  | 'adoption'
  | 'productivity'
  | 'training'
  | 'governance'
  | 'value'
  | 'engagement'

export interface Kpi {
  id: string
  label: string
  description: string
  value: string
  unit: string
  target: string
  targetUnit: string
  progress: number        // 0–100
  trend: string
  trendDirection: 'up' | 'down' | 'neutral'
  tier: KpiTier
  category: KpiCategory
  owner: string           // section id
  cadence: 'daily' | 'weekly' | 'monthly' | 'quarterly'
  status: 'on-track' | 'at-risk' | 'critical' | 'planned'
}

export const kpis: Kpi[] = [
  // --- Department Level ---
  {
    id: 'adoption-rate',
    label: 'Enterprise Adoption Rate',
    description: 'Percentage of eligible employees actively using at least one AI tool',
    value: '68',
    unit: '%',
    target: '80',
    targetUnit: '%',
    progress: 85,
    trend: '+12% vs Q3',
    trendDirection: 'up',
    tier: 'P1',
    category: 'adoption',
    owner: 'department',
    cadence: 'monthly',
    status: 'on-track',
  },
  {
    id: 'active-users',
    label: 'Active AI Users',
    description: 'Unique employees with at least one AI tool session in the past 30 days',
    value: '3,240',
    unit: '',
    target: '4,000',
    targetUnit: 'users',
    progress: 81,
    trend: '+480 this month',
    trendDirection: 'up',
    tier: 'P1',
    category: 'adoption',
    owner: 'department',
    cadence: 'monthly',
    status: 'on-track',
  },
  {
    id: 'hours-saved',
    label: 'Estimated Hours Saved',
    description: 'Productivity value generated through AI tool usage, annualised',
    value: '18,600',
    unit: 'hrs',
    target: '24,000',
    targetUnit: 'hrs/quarter',
    progress: 78,
    trend: 'On pace for target',
    trendDirection: 'up',
    tier: 'P1',
    category: 'productivity',
    owner: 'department',
    cadence: 'quarterly',
    status: 'on-track',
  },
  {
    id: 'use-cases-active',
    label: 'Active Use Cases',
    description: 'AI use cases currently in active deployment or pilot across DEWA',
    value: '42',
    unit: '',
    target: '60',
    targetUnit: 'use cases',
    progress: 70,
    trend: '14 scaled to enterprise',
    trendDirection: 'up',
    tier: 'P1',
    category: 'adoption',
    owner: 'ai-acceleration',
    cadence: 'monthly',
    status: 'on-track',
  },
  {
    id: 'champions-active',
    label: 'Active AI Champions',
    description: 'Certified AI Champions actively engaged in divisional adoption activities',
    value: '86',
    unit: '',
    target: '120',
    targetUnit: 'champions',
    progress: 72,
    trend: '+18 this quarter',
    trendDirection: 'up',
    tier: 'P1',
    category: 'engagement',
    owner: 'adoption-office',
    cadence: 'quarterly',
    status: 'on-track',
  },
  {
    id: 'divisional-coverage',
    label: 'Divisional Coverage',
    description: 'Percentage of DEWA divisions with active AI adoption engagement',
    value: '75',
    unit: '%',
    target: '100',
    targetUnit: '%',
    progress: 75,
    trend: '9 of 12 divisions active',
    trendDirection: 'up',
    tier: 'P1',
    category: 'adoption',
    owner: 'adoption-office',
    cadence: 'quarterly',
    status: 'at-risk',
  },
  // --- AI Acceleration ---
  {
    id: 'employees-trained',
    label: 'Employees Trained',
    description: 'Cumulative unique employees who have completed at least one AI training module',
    value: '1,240',
    unit: '',
    target: '2,000',
    targetUnit: 'employees',
    progress: 62,
    trend: '+310 this quarter',
    trendDirection: 'up',
    tier: 'P1',
    category: 'training',
    owner: 'ai-acceleration',
    cadence: 'monthly',
    status: 'on-track',
  },
  {
    id: 'campaigns-executed',
    label: 'Campaigns Executed',
    description: 'Number of AI awareness and activation campaigns completed this year',
    value: '11',
    unit: '',
    target: '16',
    targetUnit: 'campaigns',
    progress: 69,
    trend: 'Q4 campaigns in planning',
    trendDirection: 'neutral',
    tier: 'P2',
    category: 'engagement',
    owner: 'ai-acceleration',
    cadence: 'quarterly',
    status: 'on-track',
  },
  // --- AI Command Center ---
  {
    id: 'dashboard-accuracy',
    label: 'Dashboard Data Accuracy',
    description: 'Percentage of KPI data points validated and current within reporting window',
    value: '96',
    unit: '%',
    target: '99',
    targetUnit: '%',
    progress: 97,
    trend: 'Stable',
    trendDirection: 'neutral',
    tier: 'P1',
    category: 'governance',
    owner: 'command-center',
    cadence: 'weekly',
    status: 'on-track',
  },
  {
    id: 'reporting-adherence',
    label: 'Reporting Cadence Adherence',
    description: 'Percentage of scheduled executive reports delivered on time',
    value: '100',
    unit: '%',
    target: '100',
    targetUnit: '%',
    progress: 100,
    trend: 'All reports on schedule',
    trendDirection: 'neutral',
    tier: 'P1',
    category: 'governance',
    owner: 'command-center',
    cadence: 'monthly',
    status: 'on-track',
  },
  // --- Governance ---
  {
    id: 'governance-closure',
    label: 'Governance Action Closure Rate',
    description: 'Percentage of open governance actions closed within agreed timelines',
    value: '88',
    unit: '%',
    target: '95',
    targetUnit: '%',
    progress: 93,
    trend: '4 actions pending',
    trendDirection: 'up',
    tier: 'P2',
    category: 'governance',
    owner: 'adoption-office',
    cadence: 'monthly',
    status: 'at-risk',
  },
]


Write

export interface GovernancePrinciple {
  id: string
  title: string
  description: string
  icon: string
}

export interface DecisionLayer {
  id: string
  name: string
  description: string
  participants: string[]
  cadence: string
  scope: string
}

export interface GovernanceControl {
  id: string
  area: string
  control: string
  owner: string
  reviewCadence: string
  status: 'active' | 'in-progress' | 'planned'
}

export const governancePrinciples: GovernancePrinciple[] = [
  {
    id: 'strategic-alignment',
    title: 'Strategic Alignment',
    description:
      'All AI adoption activities must align with DEWA strategic objectives, AlHasbah priorities, and approved operating model.',
    icon: 'Target',
  },
  {
    id: 'safe-adoption',
    title: 'Safe and Controlled Adoption',
    description:
      'AI tools and use cases are introduced through a structured review and approval pathway before enterprise-wide rollout.',
    icon: 'ShieldCheck',
  },
  {
    id: 'measurable-value',
    title: 'Measurable Value',
    description:
      'Every AI initiative must have defined KPIs and a value tracking mechanism before it progresses to scale.',
    icon: 'BarChart2',
  },
  {
    id: 'clear-accountability',
    title: 'Clear Accountability',
    description:
      'Every AI adoption activity has a named owner, a defined scope, and an escalation path.',
    icon: 'UserCheck',
  },
  {
    id: 'transparency',
    title: 'Transparency and Reporting',
    description:
      'Adoption performance, risks, and governance actions are reported to leadership on a regular, structured cadence.',
    icon: 'Eye',
  },
  {
    id: 'controlled-scaling',
    title: 'Controlled Scaling',
    description:
      'Scaling of AI use cases follows a defined maturity model with governance checkpoints at each stage.',
    icon: 'Layers',
  },
]

export const decisionLayers: DecisionLayer[] = [
  {
    id: 'leadership',
    name: 'Executive Leadership',
    description:
      'Provides strategic direction, approves major AI investments, and reviews quarterly adoption performance.',
    participants: ['MD & CEO', 'EVP', 'CAIO'],
    cadence: 'Quarterly',
    scope: 'Strategic direction, major investments, enterprise policy',
  },
  {
    id: 'department-head',
    name: 'Department Head',
    description:
      'Owns the operating model, approves programs and partnerships, and signs off on governance frameworks.',
    participants: ['AI Adoption Department Head', 'Section Leads'],
    cadence: 'Monthly',
    scope: 'Operating model, program approvals, cross-section coordination',
  },
  {
    id: 'governance-forum',
    name: 'AI Governance Forum',
    description:
      'Reviews use case approvals, monitors compliance, and manages risk and control actions.',
    participants: ['AI Adoption Office Lead', 'IT Governance', 'Legal / Compliance', 'Risk'],
    cadence: 'Bi-weekly',
    scope: 'Use case approvals, risk actions, compliance monitoring',
  },
  {
    id: 'operational',
    name: 'Operational Review',
    description:
      'Section leads review weekly performance, resolve operational blockers, and manage day-to-day coordination.',
    participants: ['Section Leads', 'Key team members'],
    cadence: 'Weekly',
    scope: 'Performance tracking, blockers, coordination',
  },
]

export const governanceControls: GovernanceControl[] = [
  {
    id: 'tool-approval',
    area: 'AI Tool Onboarding',
    control: 'All new AI tools must pass a security, compliance, and data governance review before enterprise access is granted.',
    owner: 'AI Adoption Office + IT Governance',
    reviewCadence: 'Per request',
    status: 'active',
  },
  {
    id: 'data-usage',
    area: 'Data Usage',
    control: 'AI use cases involving sensitive or personal data require a Data Impact Assessment and CISO sign-off.',
    owner: 'IT Governance + Legal',
    reviewCadence: 'Per use case',
    status: 'active',
  },
  {
    id: 'vendor-risk',
    area: 'Vendor Risk',
    control: 'Strategic AI partners undergo quarterly risk review covering data handling, SLA compliance, and roadmap alignment.',
    owner: 'AI Acceleration + Procurement',
    reviewCadence: 'Quarterly',
    status: 'active',
  },
  {
    id: 'adoption-metrics',
    area: 'Reporting Integrity',
    control: 'All adoption KPIs are validated by AI Command Center before executive reporting.',
    owner: 'AI Command Center',
    reviewCadence: 'Monthly',
    status: 'active',
  },
  {
    id: 'ethics-review',
    area: 'AI Ethics',
    control: 'Use cases with potential workforce or operational impact require an ethics and change management review.',
    owner: 'AI Adoption Office + HR',
    reviewCadence: 'Per use case',
    status: 'in-progress',
  },
]


File created successfully at: /Users/khalidbinkalban/Desktop/My Workstation/dewa-ai-adoption/content/governance.ts

export interface GovernancePrinciple {
  id: string
  title: string
  description: string
  icon: string
}

export interface DecisionLayer {
  id: string
  name: string
  description: string
  participants: string[]
  cadence: string
  scope: string
}

export interface GovernanceControl {
  id: string
  area: string
  control: string
  owner: string
  reviewCadence: string
  status: 'active' | 'in-progress' | 'planned'
}

export const governancePrinciples: GovernancePrinciple[] = [
  {
    id: 'strategic-alignment',
    title: 'Strategic Alignment',
    description:
      'All AI adoption activities must align with DEWA strategic objectives, AlHasbah priorities, and approved operating model.',
    icon: 'Target',
  },
  {
    id: 'safe-adoption',
    title: 'Safe and Controlled Adoption',
    description:
      'AI tools and use cases are introduced through a structured review and approval pathway before enterprise-wide rollout.',
    icon: 'ShieldCheck',
  },
  {
    id: 'measurable-value',
    title: 'Measurable Value',
    description:
      'Every AI initiative must have defined KPIs and a value tracking mechanism before it progresses to scale.',
    icon: 'BarChart2',
  },
  {
    id: 'clear-accountability',
    title: 'Clear Accountability',
    description:
      'Every AI adoption activity has a named owner, a defined scope, and an escalation path.',
    icon: 'UserCheck',
  },
  {
    id: 'transparency',
    title: 'Transparency and Reporting',
    description:
      'Adoption performance, risks, and governance actions are reported to leadership on a regular, structured cadence.',
    icon: 'Eye',
  },
  {
    id: 'controlled-scaling',
    title: 'Controlled Scaling',
    description:
      'Scaling of AI use cases follows a defined maturity model with governance checkpoints at each stage.',
    icon: 'Layers',
  },
]

export const decisionLayers: DecisionLayer[] = [
  {
    id: 'leadership',
    name: 'Executive Leadership',
    description:
      'Provides strategic direction, approves major AI investments, and reviews quarterly adoption performance.',
    participants: ['MD & CEO', 'EVP', 'CAIO'],
    cadence: 'Quarterly',
    scope: 'Strategic direction, major investments, enterprise policy',
  },
  {
    id: 'department-head',
    name: 'Department Head',
    description:
      'Owns the operating model, approves programs and partnerships, and signs off on governance frameworks.',
    participants: ['AI Adoption Department Head', 'Section Leads'],
    cadence: 'Monthly',
    scope: 'Operating model, program approvals, cross-section coordination',
  },
  {
    id: 'governance-forum',
    name: 'AI Governance Forum',
    description:
      'Reviews use case approvals, monitors compliance, and manages risk and control actions.',
    participants: ['AI Adoption Office Lead', 'IT Governance', 'Legal / Compliance', 'Risk'],
    cadence: 'Bi-weekly',
    scope: 'Use case approvals, risk actions, compliance monitoring',
  },
  {
    id: 'operational',
    name: 'Operational Review',
    description:
      'Section leads review weekly performance, resolve operational blockers, and manage day-to-day coordination.',
    participants: ['Section Leads', 'Key team members'],
    cadence: 'Weekly',
    scope: 'Performance tracking, blockers, coordination',
  },
]

export const governanceControls: GovernanceControl[] = [
  {
    id: 'tool-approval',
    area: 'AI Tool Onboarding',
    control: 'All new AI tools must pass a security, compliance, and data governance review before enterprise access is granted.',
    owner: 'AI Adoption Office + IT Governance',
    reviewCadence: 'Per request',
    status: 'active',
  },
  {
    id: 'data-usage',
    area: 'Data Usage',
    control: 'AI use cases involving sensitive or personal data require a Data Impact Assessment and CISO sign-off.',
    owner: 'IT Governance + Legal',
    reviewCadence: 'Per use case',
    status: 'active',
  },
  {
    id: 'vendor-risk',
    area: 'Vendor Risk',
    control: 'Strategic AI partners undergo quarterly risk review covering data handling, SLA compliance, and roadmap alignment.',
    owner: 'AI Acceleration + Procurement',
    reviewCadence: 'Quarterly',
    status: 'active',
  },
  {
    id: 'adoption-metrics',
    area: 'Reporting Integrity',
    control: 'All adoption KPIs are validated by AI Command Center before executive reporting.',
    owner: 'AI Command Center',
    reviewCadence: 'Monthly',
    status: 'active',
  },
  {
    id: 'ethics-review',
    area: 'AI Ethics',
    control: 'Use cases with potential workforce or operational impact require an ethics and change management review.',
    owner: 'AI Adoption Office + HR',
    reviewCadence: 'Per use case',
    status: 'in-progress',
  },
]


export interface OperatingStage {
  id: string
  order: number
  name: string
  description: string
  outputs: string[]
  sections: string[]   // section ids that contribute
}

export const operatingStages: OperatingStage[] = [
  {
    id: 'intake',
    order: 1,
    name: 'Demand & Opportunity Intake',
    description:
      'AI opportunities, use case ideas, and adoption requests are captured from divisions, partners, and internal initiatives.',
    outputs: ['Use case backlog', 'Opportunity register', 'Division request log'],
    sections: ['adoption-office', 'ai-acceleration'],
  },
  {
    id: 'assessment',
    order: 2,
    name: 'Assessment & Prioritisation',
    description:
      'Opportunities are assessed for strategic fit, feasibility, risk profile, and expected business value.',
    outputs: ['Prioritised use case list', 'Risk assessment notes', 'Value estimation'],
    sections: ['adoption-office', 'ai-acceleration'],
  },
  {
    id: 'alignment',
    order: 3,
    name: 'Strategic Alignment',
    description:
      'Selected use cases and programs are aligned to DEWA priorities, governance frameworks, and AlHasbah objectives.',
    outputs: ['Alignment approval', 'Governance sign-off', 'Stakeholder briefing'],
    sections: ['adoption-office'],
  },
  {
    id: 'enablement',
    order: 4,
    name: 'Adoption Enablement',
    description:
      'Training programs, awareness campaigns, and tool access are deployed to targeted divisions and user groups.',
    outputs: ['Training completions', 'Campaign reach', 'Access grants', 'Activation events'],
    sections: ['ai-acceleration'],
  },
  {
    id: 'acceleration',
    order: 5,
    name: 'Use Case Acceleration',
    description:
      'High-value use cases are accelerated with dedicated support, partner engagement, and cross-divisional coordination.',
    outputs: ['Scaled use cases', 'Partner activations', 'Business unit outcomes'],
    sections: ['ai-acceleration'],
  },
  {
    id: 'monitoring',
    order: 6,
    name: 'Adoption Monitoring',
    description:
      'Usage data, adoption signals, and performance indicators are collected and validated in real time.',
    outputs: ['Usage dashboards', 'Anomaly alerts', 'Trend reports'],
    sections: ['command-center'],
  },
  {
    id: 'kpi-tracking',
    order: 7,
    name: 'KPI Tracking & Value Measurement',
    description:
      'KPIs are tracked against targets. Business value — hours saved, cost reduction, productivity uplift — is quantified.',
    outputs: ['KPI scorecards', 'Value realisation tracker', 'ROI estimates'],
    sections: ['command-center', 'adoption-office'],
  },
  {
    id: 'reporting',
    order: 8,
    name: 'Executive Reporting',
    description:
      'Strategic insights and performance data are packaged into executive-ready reports and command center displays.',
    outputs: ['Executive dashboard', 'Leadership briefing packs', 'Command center displays'],
    sections: ['command-center'],
  },
  {
    id: 'improvement',
    order: 9,
    name: 'Continuous Improvement',
    description:
      'Insights feed back into strategy, operating model updates, and the next intake cycle.',
    outputs: ['Operating model updates', 'Strategy adjustments', 'Next cycle priorities'],
    sections: ['adoption-office', 'ai-acceleration', 'command-center'],
  },
]


File created successfully at: /Users/khalidbinkalban/Desktop/My Workstation/dewa-ai-adoption/content/operating-model.ts

export interface OperatingStage {
  id: string
  order: number
  name: string
  description: string
  outputs: string[]
  sections: string[]   // section ids that contribute
}

export const operatingStages: OperatingStage[] = [
  {
    id: 'intake',
    order: 1,
    name: 'Demand & Opportunity Intake',
    description:
      'AI opportunities, use case ideas, and adoption requests are captured from divisions, partners, and internal initiatives.',
    outputs: ['Use case backlog', 'Opportunity register', 'Division request log'],
    sections: ['adoption-office', 'ai-acceleration'],
  },
  {
    id: 'assessment',
    order: 2,
    name: 'Assessment & Prioritisation',
    description:
      'Opportunities are assessed for strategic fit, feasibility, risk profile, and expected business value.',
    outputs: ['Prioritised use case list', 'Risk assessment notes', 'Value estimation'],
    sections: ['adoption-office', 'ai-acceleration'],
  },
  {
    id: 'alignment',
    order: 3,
    name: 'Strategic Alignment',
    description:
      'Selected use cases and programs are aligned to DEWA priorities, governance frameworks, and AlHasbah objectives.',
    outputs: ['Alignment approval', 'Governance sign-off', 'Stakeholder briefing'],
    sections: ['adoption-office'],
  },
  {
    id: 'enablement',
    order: 4,
    name: 'Adoption Enablement',
    description:
      'Training programs, awareness campaigns, and tool access are deployed to targeted divisions and user groups.',
    outputs: ['Training completions', 'Campaign reach', 'Access grants', 'Activation events'],
    sections: ['ai-acceleration'],
  },
  {
    id: 'acceleration',
    order: 5,
    name: 'Use Case Acceleration',
    description:
      'High-value use cases are accelerated with dedicated support, partner engagement, and cross-divisional coordination.',
    outputs: ['Scaled use cases', 'Partner activations', 'Business unit outcomes'],
    sections: ['ai-acceleration'],
  },
  {
    id: 'monitoring',
    order: 6,
    name: 'Adoption Monitoring',
    description:
      'Usage data, adoption signals, and performance indicators are collected and validated in real time.',
    outputs: ['Usage dashboards', 'Anomaly alerts', 'Trend reports'],
    sections: ['command-center'],
  },
  {
    id: 'kpi-tracking',
    order: 7,
    name: 'KPI Tracking & Value Measurement',
    description:
      'KPIs are tracked against targets. Business value — hours saved, cost reduction, productivity uplift — is quantified.',
    outputs: ['KPI scorecards', 'Value realisation tracker', 'ROI estimates'],
    sections: ['command-center', 'adoption-office'],
  },
  {
    id: 'reporting',
    order: 8,
    name: 'Executive Reporting',
    description:
      'Strategic insights and performance data are packaged into executive-ready reports and command center displays.',
    outputs: ['Executive dashboard', 'Leadership briefing packs', 'Command center displays'],
    sections: ['command-center'],
  },
  {
    id: 'improvement',
    order: 9,
    name: 'Continuous Improvement',
    description:
      'Insights feed back into strategy, operating model updates, and the next intake cycle.',
    outputs: ['Operating model updates', 'Strategy adjustments', 'Next cycle priorities'],
    sections: ['adoption-office', 'ai-acceleration', 'command-center'],
  },
]


export type RoadmapPhase = 'now' | 'next' | 'future'
export type RoadmapTheme =
  | 'governance'
  | 'capability'
  | 'partnerships'
  | 'command-center'
  | 'analytics'
  | 'value-tracking'
  | 'champions'
  | 'strategy'

export interface RoadmapItem {
  id: string
  phase: RoadmapPhase
  theme: RoadmapTheme
  title: string
  description: string
  owner: string
  status: 'in-progress' | 'planned' | 'completed'
  priority: 'high' | 'medium' | 'low'
}

export const roadmapItems: RoadmapItem[] = [
  // NOW
  {
    id: 'r1',
    phase: 'now',
    theme: 'governance',
    title: 'Governance Framework v1 Activation',
    description: 'Activate the formal AI Adoption governance model including review forums, approval pathways, and reporting cadences.',
    owner: 'adoption-office',
    status: 'in-progress',
    priority: 'high',
  },
  {
    id: 'r2',
    phase: 'now',
    theme: 'command-center',
    title: 'Executive AI Dashboard — Phase 1',
    description: 'Launch the first version of the AI Adoption executive dashboard covering top KPIs, adoption trends, and use case pipeline.',
    owner: 'command-center',
    status: 'in-progress',
    priority: 'high',
  },
  {
    id: 'r3',
    phase: 'now',
    theme: 'champions',
    title: 'AI Champions Network Expansion',
    description: 'Grow the AI Champions network to 120 active champions across all 12 DEWA divisions.',
    owner: 'adoption-office',
    status: 'in-progress',
    priority: 'high',
  },
  {
    id: 'r4',
    phase: 'now',
    theme: 'capability',
    title: 'AI Academy — Cohort 2 Launch',
    description: 'Launch the second AI Academy cohort targeting 400 additional employees across Engineering and Operations.',
    owner: 'ai-acceleration',
    status: 'in-progress',
    priority: 'high',
  },
  // NEXT
  {
    id: 'r5',
    phase: 'next',
    theme: 'analytics',
    title: 'Adoption Analytics — Advanced Insights',
    description: 'Build advanced analytics layer with cohort analysis, drop-off detection, and division-level benchmarking.',
    owner: 'command-center',
    status: 'planned',
    priority: 'high',
  },
  {
    id: 'r6',
    phase: 'next',
    theme: 'value-tracking',
    title: 'Business Value Tracking Model',
    description: 'Deploy a structured methodology for quantifying and reporting AI-driven cost savings, productivity gains, and process improvements.',
    owner: 'adoption-office',
    status: 'planned',
    priority: 'high',
  },
  {
    id: 'r7',
    phase: 'next',
    theme: 'partnerships',
    title: 'Strategic AI Partner Ecosystem Expansion',
    description: 'Formalise partnerships with 3 additional strategic AI technology providers to expand enterprise tool access.',
    owner: 'ai-acceleration',
    status: 'planned',
    priority: 'medium',
  },
  {
    id: 'r8',
    phase: 'next',
    theme: 'command-center',
    title: 'Physical Command Center Design',
    description: 'Design and plan the physical AI Command Center space for leadership briefings, showcase events, and live adoption monitoring.',
    owner: 'command-center',
    status: 'planned',
    priority: 'medium',
  },
  // FUTURE
  {
    id: 'r9',
    phase: 'future',
    theme: 'command-center',
    title: 'Physical AI Command Center Launch',
    description: 'Open the permanent physical AI Command Center as an executive showcase and live operations hub.',
    owner: 'command-center',
    status: 'planned',
    priority: 'high',
  },
  {
    id: 'r10',
    phase: 'future',
    theme: 'governance',
    title: 'AI Governance Maturity Level 3',
    description: 'Advance governance maturity to include automated compliance monitoring, AI ethics review boards, and enterprise AI policy.',
    owner: 'adoption-office',
    status: 'planned',
    priority: 'high',
  },
  {
    id: 'r11',
    phase: 'future',
    theme: 'capability',
    title: 'AI Centre of Excellence',
    description: 'Evolve the AI Academy into a permanent Centre of Excellence providing continuous learning, certifications, and advanced tracks.',
    owner: 'ai-acceleration',
    status: 'planned',
    priority: 'medium',
  },
  {
    id: 'r12',
    phase: 'future',
    theme: 'strategy',
    title: 'Enterprise AI Adoption Index',
    description: 'Publish an annual DEWA AI Adoption Index benchmarking enterprise adoption against regional and global energy sector peers.',
    owner: 'command-center',
    status: 'planned',
    priority: 'low',
  },
]


File created successfully at: /Users/khalidbinkalban/Desktop/My Workstation/dewa-ai-adoption/content/roadmap.ts

export type RoadmapPhase = 'now' | 'next' | 'future'
export type RoadmapTheme =
  | 'governance'
  | 'capability'
  | 'partnerships'
  | 'command-center'
  | 'analytics'
  | 'value-tracking'
  | 'champions'
  | 'strategy'

export interface RoadmapItem {
  id: string
  phase: RoadmapPhase
  theme: RoadmapTheme
  title: string
  description: string
  owner: string
  status: 'in-progress' | 'planned' | 'completed'
  priority: 'high' | 'medium' | 'low'
}

export const roadmapItems: RoadmapItem[] = [
  // NOW
  {
    id: 'r1',
    phase: 'now',
    theme: 'governance',
    title: 'Governance Framework v1 Activation',
    description: 'Activate the formal AI Adoption governance model including review forums, approval pathways, and reporting cadences.',
    owner: 'adoption-office',
    status: 'in-progress',
    priority: 'high',
  },
  {
    id: 'r2',
    phase: 'now',
    theme: 'command-center',
    title: 'Executive AI Dashboard — Phase 1',
    description: 'Launch the first version of the AI Adoption executive dashboard covering top KPIs, adoption trends, and use case pipeline.',
    owner: 'command-center',
    status: 'in-progress',
    priority: 'high',
  },
  {
    id: 'r3',
    phase: 'now',
    theme: 'champions',
    title: 'AI Champions Network Expansion',
    description: 'Grow the AI Champions network to 120 active champions across all 12 DEWA divisions.',
    owner: 'adoption-office',
    status: 'in-progress',
    priority: 'high',
  },
  {
    id: 'r4',
    phase: 'now',
    theme: 'capability',
    title: 'AI Academy — Cohort 2 Launch',
    description: 'Launch the second AI Academy cohort targeting 400 additional employees across Engineering and Operations.',
    owner: 'ai-acceleration',
    status: 'in-progress',
    priority: 'high',
  },
  // NEXT
  {
    id: 'r5',
    phase: 'next',
    theme: 'analytics',
    title: 'Adoption Analytics — Advanced Insights',
    description: 'Build advanced analytics layer with cohort analysis, drop-off detection, and division-level benchmarking.',
    owner: 'command-center',
    status: 'planned',
    priority: 'high',
  },
  {
    id: 'r6',
    phase: 'next',
    theme: 'value-tracking',
    title: 'Business Value Tracking Model',
    description: 'Deploy a structured methodology for quantifying and reporting AI-driven cost savings, productivity gains, and process improvements.',
    owner: 'adoption-office',
    status: 'planned',
    priority: 'high',
  },
  {
    id: 'r7',
    phase: 'next',
    theme: 'partnerships',
    title: 'Strategic AI Partner Ecosystem Expansion',
    description: 'Formalise partnerships with 3 additional strategic AI technology providers to expand enterprise tool access.',
    owner: 'ai-acceleration',
    status: 'planned',
    priority: 'medium',
  },
  {
    id: 'r8',
    phase: 'next',
    theme: 'command-center',
    title: 'Physical Command Center Design',
    description: 'Design and plan the physical AI Command Center space for leadership briefings, showcase events, and live adoption monitoring.',
    owner: 'command-center',
    status: 'planned',
    priority: 'medium',
  },
  // FUTURE
  {
    id: 'r9',
    phase: 'future',
    theme: 'command-center',
    title: 'Physical AI Command Center Launch',
    description: 'Open the permanent physical AI Command Center as an executive showcase and live operations hub.',
    owner: 'command-center',
    status: 'planned',
    priority: 'high',
  },
  {
    id: 'r10',
    phase: 'future',
    theme: 'governance',
    title: 'AI Governance Maturity Level 3',
    description: 'Advance governance maturity to include automated compliance monitoring, AI ethics review boards, and enterprise AI policy.',
    owner: 'adoption-office',
    status: 'planned',
    priority: 'high',
  },
  {
    id: 'r11',
    phase: 'future',
    theme: 'capability',
    title: 'AI Centre of Excellence',
    description: 'Evolve the AI Academy into a permanent Centre of Excellence providing continuous learning, certifications, and advanced tracks.',
    owner: 'ai-acceleration',
    status: 'planned',
    priority: 'medium',
  },
  {
    id: 'r12',
    phase: 'future',
    theme: 'strategy',
    title: 'Enterprise AI Adoption Index',
    description: 'Publish an annual DEWA AI Adoption Index benchmarking enterprise adoption against regional and global energy sector peers.',
    owner: 'command-center',
    status: 'planned',
    priority: 'low',
  },
]


export type RiskSeverity = 'high' | 'medium' | 'low'
export type RiskCategory =
  | 'adoption'
  | 'governance'
  | 'data'
  | 'change-management'
  | 'technology'
  | 'dependencies'

export interface Risk {
  id: string
  category: RiskCategory
  title: string
  description: string
  severity: RiskSeverity
  likelihood: RiskSeverity
  owner: string
  mitigations: string[]
  dependencies: string[]
  status: 'open' | 'mitigated' | 'monitoring'
}

export const risks: Risk[] = [
  {
    id: 'risk-1',
    category: 'adoption',
    title: 'Low Divisional Adoption Velocity',
    description:
      'Some divisions may resist or deprioritise AI adoption due to workload pressures, unclear mandates, or limited local champions.',
    severity: 'high',
    likelihood: 'medium',
    owner: 'AI Adoption Office',
    mitigations: [
      'Activate division-level AI Champions to drive peer adoption',
      'Escalate low-adoption divisions to Department Head for leadership intervention',
      'Provide targeted divisional enablement support through AI Acceleration',
    ],
    dependencies: ['Divisional Director engagement', 'AI Champions activation rate'],
    status: 'monitoring',
  },
  {
    id: 'risk-2',
    category: 'governance',
    title: 'Governance Action Backlog',
    description:
      'Governance review forums may accumulate unresolved actions if participation is inconsistent or capacity is constrained.',
    severity: 'medium',
    likelihood: 'medium',
    owner: 'AI Adoption Office',
    mitigations: [
      'Enforce bi-weekly governance forum attendance with named deputies',
      'Track open actions in the Command Center dashboard with RAG status',
      'Escalate overdue actions to Department Head monthly',
    ],
    dependencies: ['Governance forum participation', 'Command Center reporting accuracy'],
    status: 'open',
  },
  {
    id: 'risk-3',
    category: 'data',
    title: 'Adoption Data Quality Gaps',
    description:
      'Inconsistent or incomplete usage data from AI tools may reduce confidence in KPI reporting and executive dashboards.',
    severity: 'high',
    likelihood: 'medium',
    owner: 'AI Command Center',
    mitigations: [
      'Establish data quality validation process before each reporting cycle',
      'Work with IT to standardise usage data exports from all AI platforms',
      'Flag data gaps visibly in dashboards rather than suppressing incomplete data',
    ],
    dependencies: ['IT platform data exports', 'Vendor API access'],
    status: 'monitoring',
  },
  {
    id: 'risk-4',
    category: 'change-management',
    title: 'Employee Resistance to AI Adoption',
    description:
      'Employees may be concerned about AI replacing roles, creating hesitance to engage with tools or programs.',
    severity: 'high',
    likelihood: 'medium',
    owner: 'AI Acceleration',
    mitigations: [
      'Lead communications with productivity and empowerment narratives, not automation narratives',
      'Engage HR and Communications in messaging strategy',
      'Feature employee success stories prominently in campaigns',
    ],
    dependencies: ['HR communications alignment', 'Leadership tone-setting'],
    status: 'monitoring',
  },
  {
    id: 'risk-5',
    category: 'technology',
    title: 'AI Tool Security or Compliance Issue',
    description:
      'A deployed AI tool may have a security vulnerability, data handling issue, or compliance breach that requires rapid containment.',
    severity: 'high',
    likelihood: 'low',
    owner: 'AI Adoption Office + IT Governance',
    mitigations: [
      'All tools must pass security review before enterprise access is granted',
      'Maintain rapid response protocol for tool suspension if needed',
      'Monitor vendor security advisories continuously',
    ],
    dependencies: ['IT Governance review process', 'Vendor security disclosures'],
    status: 'open',
  },
  {
    id: 'risk-6',
    category: 'dependencies',
    title: 'Cross-Divisional Alignment Delays',
    description:
      'Slow response from divisional stakeholders may delay use case approvals, training deployment, or governance actions.',
    severity: 'medium',
    likelihood: 'high',
    owner: 'AI Adoption Office',
    mitigations: [
      'Maintain a named engagement contact in each division',
      'Escalate alignment gaps to EVP level if unresolved after 2 cycles',
      'Build flexibility into program timelines to absorb divisional delays',
    ],
    dependencies: ['Divisional Director availability', 'Cross-divisional governance mandate'],
    status: 'open',
  },
]


File created successfully at: /Users/khalidbinkalban/Desktop/My Workstation/dewa-ai-adoption/content/risks.ts

export type RiskSeverity = 'high' | 'medium' | 'low'
export type RiskCategory =
  | 'adoption'
  | 'governance'
  | 'data'
  | 'change-management'
  | 'technology'
  | 'dependencies'

export interface Risk {
  id: string
  category: RiskCategory
  title: string
  description: string
  severity: RiskSeverity
  likelihood: RiskSeverity
  owner: string
  mitigations: string[]
  dependencies: string[]
  status: 'open' | 'mitigated' | 'monitoring'
}

export const risks: Risk[] = [
  {
    id: 'risk-1',
    category: 'adoption',
    title: 'Low Divisional Adoption Velocity',
    description:
      'Some divisions may resist or deprioritise AI adoption due to workload pressures, unclear mandates, or limited local champions.',
    severity: 'high',
    likelihood: 'medium',
    owner: 'AI Adoption Office',
    mitigations: [
      'Activate division-level AI Champions to drive peer adoption',
      'Escalate low-adoption divisions to Department Head for leadership intervention',
      'Provide targeted divisional enablement support through AI Acceleration',
    ],
    dependencies: ['Divisional Director engagement', 'AI Champions activation rate'],
    status: 'monitoring',
  },
  {
    id: 'risk-2',
    category: 'governance',
    title: 'Governance Action Backlog',
    description:
      'Governance review forums may accumulate unresolved actions if participation is inconsistent or capacity is constrained.',
    severity: 'medium',
    likelihood: 'medium',
    owner: 'AI Adoption Office',
    mitigations: [
      'Enforce bi-weekly governance forum attendance with named deputies',
      'Track open actions in the Command Center dashboard with RAG status',
      'Escalate overdue actions to Department Head monthly',
    ],
    dependencies: ['Governance forum participation', 'Command Center reporting accuracy'],
    status: 'open',
  },
  {
    id: 'risk-3',
    category: 'data',
    title: 'Adoption Data Quality Gaps',
    description:
      'Inconsistent or incomplete usage data from AI tools may reduce confidence in KPI reporting and executive dashboards.',
    severity: 'high',
    likelihood: 'medium',
    owner: 'AI Command Center',
    mitigations: [
      'Establish data quality validation process before each reporting cycle',
      'Work with IT to standardise usage data exports from all AI platforms',
      'Flag data gaps visibly in dashboards rather than suppressing incomplete data',
    ],
    dependencies: ['IT platform data exports', 'Vendor API access'],
    status: 'monitoring',
  },
  {
    id: 'risk-4',
    category: 'change-management',
    title: 'Employee Resistance to AI Adoption',
    description:
      'Employees may be concerned about AI replacing roles, creating hesitance to engage with tools or programs.',
    severity: 'high',
    likelihood: 'medium',
    owner: 'AI Acceleration',
    mitigations: [
      'Lead communications with productivity and empowerment narratives, not automation narratives',
      'Engage HR and Communications in messaging strategy',
      'Feature employee success stories prominently in campaigns',
    ],
    dependencies: ['HR communications alignment', 'Leadership tone-setting'],
    status: 'monitoring',
  },
  {
    id: 'risk-5',
    category: 'technology',
    title: 'AI Tool Security or Compliance Issue',
    description:
      'A deployed AI tool may have a security vulnerability, data handling issue, or compliance breach that requires rapid containment.',
    severity: 'high',
    likelihood: 'low',
    owner: 'AI Adoption Office + IT Governance',
    mitigations: [
      'All tools must pass security review before enterprise access is granted',
      'Maintain rapid response protocol for tool suspension if needed',
      'Monitor vendor security advisories continuously',
    ],
    dependencies: ['IT Governance review process', 'Vendor security disclosures'],
    status: 'open',
  },
  {
    id: 'risk-6',
    category: 'dependencies',
    title: 'Cross-Divisional Alignment Delays',
    description:
      'Slow response from divisional stakeholders may delay use case approvals, training deployment, or governance actions.',
    severity: 'medium',
    likelihood: 'high',
    owner: 'AI Adoption Office',
    mitigations: [
      'Maintain a named engagement contact in each division',
      'Escalate alignment gaps to EVP level if unresolved after 2 cycles',
      'Build flexibility into program timelines to absorb divisional delays',
    ],
    dependencies: ['Divisional Director availability', 'Cross-divisional governance mandate'],
    status: 'open',
  },
]


All content files created. Now let me verify the file tree:


Bash

find /Users/khalidbinkalban/Desktop/My\ Workstation/dewa-ai-adoption -not -path '*/node_modules/*' -not -name '*.lock' | sort


/Users/khalidbinkalban/Desktop/My Workstation/dewa-ai-adoption
/Users/khalidbinkalban/Desktop/My Workstation/dewa-ai-adoption/.eslintrc.json
/Users/khalidbinkalban/Desktop/My Workstation/dewa-ai-adoption/.git
/Users/khalidbinkalban/Desktop/My Workstation/dewa-ai-adoption/.git/COMMIT_EDITMSG
/Users/khalidbinkalban/Desktop/My Workstation/dewa-ai-adoption/.git/HEAD
/Users/khalidbinkalban/Desktop/My Workstation/dewa-ai-adoption/.git/config
/Users/khalidbinkalban/Desktop/My Workstation/dewa-ai-adoption/.git/description
/Users/khalidbinkalban/Desktop/My Workstation/dewa-ai-adoption/.git/hooks
/Users/khalidbinkalban/Desktop/My Workstation/dewa-ai-adoption/.git/hooks/applypatch-msg.sample
/Users/khalidbinkalban/Desktop/My Workstation/dewa-ai-adoption/.git/hooks/commit-msg.sample
/Users/khalidbinkalban/Desktop/My Workstation/dewa-ai-adoption/.git/hooks/fsmonitor-watchman.sample
/Users/khalidbinkalban/Desktop/My Workstation/dewa-ai-adoption/.git/hooks/post-update.sample
/Users/khalidbinkalban/Desktop/My Workstation/dewa-ai-adoption/.git/hooks/pre-applypatch.sample
/Users/khalidbinkalban/Desktop/My Workstation/dewa-ai-adoption/.git/hooks/pre-commit.sample
/Users/khalidbinkalban/Desktop/My Workstation/dewa-ai-adoption/.git/hooks/pre-merge-commit.sample
/Users/khalidbinkalban/Desktop/My Workstation/dewa-ai-adoption/.git/hooks/pre-push.sample
/Users/khalidbinkalban/Desktop/My Workstation/dewa-ai-adoption/.git/hooks/pre-rebase.sample
/Users/khalidbinkalban/Desktop/My Workstation/dewa-ai-adoption/.git/hooks/pre-receive.sample
/Users/khalidbinkalban/Desktop/My Workstation/dewa-ai-adoption/.git/hooks/prepare-commit-msg.sample
/Users/khalidbinkalban/Desktop/My Workstation/dewa-ai-adoption/.git/hooks/push-to-checkout.sample
/Users/khalidbinkalban/Desktop/My Workstation/dewa-ai-adoption/.git/hooks/update.sample
/Users/khalidbinkalban/Desktop/My Workstation/dewa-ai-adoption/.git/index
/Users/khalidbinkalban/Desktop/My Workstation/dewa-ai-adoption/.git/info
/Users/khalidbinkalban/Desktop/My Workstation/dewa-ai-adoption/.git/info/exclude
/Users/khalidbinkalban/Desktop/My Workstation/dewa-ai-adoption/.git/logs
/Users/khalidbinkalban/Desktop/My Workstation/dewa-ai-adoption/.git/logs/HEAD
/Users/khalidbinkalban/Desktop/My Workstation/dewa-ai-adoption/.git/logs/refs
/Users/khalidbinkalban/Desktop/My Workstation/dewa-ai-adoption/.git/logs/refs/heads
/Users/khalidbinkalban/Desktop/My Workstation/dewa-ai-adoption/.git/logs/refs/heads/main
/Users/khalidbinkalban/Desktop/My Workstation/dewa-ai-adoption/.git/objects
/Users/khalidbinkalban/Desktop/My Workstation/dewa-ai-adoption/.git/objects/02
/Users/khalidbinkalban/Desktop/My Workstation/dewa-ai-adoption/.git/objects/02/1c39379d298a783317a256f478e679d3c60ddc
/Users/khalidbinkalban/Desktop/My Workstation/dewa-ai-adoption/.git/objects/13
/Users/khalidbinkalban/Desktop/My Workstation/dewa-ai-adoption/.git/objects/13/d40b892057e0e4271c5c8f9fc8db30e80f2409
/Users/khalidbinkalban/Desktop/My Workstation/dewa-ai-adoption/.git/objects/1a
/Users/khalidbinkalban/Desktop/My Workstation/dewa-ai-adoption/.git/objects/1a/69fd2a450afc3bf47e08b22c149190df0ffdb4
/Users/khalidbinkalban/Desktop/My Workstation/dewa-ai-adoption/.git/objects/1b
/Users/khalidbinkalban/Desktop/My Workstation/dewa-ai-adoption/.git/objects/1b/62daacff96dad6584e71cd962051b82957c313
/Users/khalidbinkalban/Desktop/My Workstation/dewa-ai-adoption/.git/objects/37
/Users/khalidbinkalban/Desktop/My Workstation/dewa-ai-adoption/.git/objects/37/224185490e6db2d26a574d66d4d476336bf644
/Users/khalidbinkalban/Desktop/My Workstation/dewa-ai-adoption/.git/objects/46
/Users/khalidbinkalban/Desktop/My Workstation/dewa-ai-adoption/.git/objects/46/78774e6d606704bce1897a5dab960cd798bf66
/Users/khalidbinkalban/Desktop/My Workstation/dewa-ai-adoption/.git/objects/4d
/Users/khalidbinkalban/Desktop/My Workstation/dewa-ai-adoption/.git/objects/4d/ceb7c11c98efdfc930270b6bc998e8a9067a85
/Users/khalidbinkalban/Desktop/My Workstation/dewa-ai-adoption/.git/objects/55
/Users/khalidbinkalban/Desktop/My Workstation/dewa-ai-adoption/.git/objects/55/27c09706df3fc16b294253b809cf4b6d9811d0
/Users/khalidbinkalban/Desktop/My Workstation/dewa-ai-adoption/.git/objects/6f
/Users/khalidbinkalban/Desktop/My Workstation/dewa-ai-adoption/.git/objects/6f/e62d19b42eddd6326cfd46829c3501e4e5debc
/Users/khalidbinkalban/Desktop/My Workstation/dewa-ai-adoption/.git/objects/71
/Users/khalidbinkalban/Desktop/My Workstation/dewa-ai-adoption/.git/objects/71/8d6fea4835ec2d246af9800eddb7ffb276240c
/Users/khalidbinkalban/Desktop/My Workstation/dewa-ai-adoption/.git/objects/7b
/Users/khalidbinkalban/Desktop/My Workstation/dewa-ai-adoption/.git/objects/7b/2858930495fc4a76d7a51d958bacf2d64eb81f
/Users/khalidbinkalban/Desktop/My Workstation/dewa-ai-adoption/.git/objects/86
/Users/khalidbinkalban/Desktop/My Workstation/dewa-ai-adoption/.git/objects/86/69d6d872f57ae36ce56b7becfc6d57819ef167
/Users/khalidbinkalban/Desktop/My Workstation/dewa-ai-adoption/.git/objects/a3
/Users/khalidbinkalban/Desktop/My Workstation/dewa-ai-adoption/.git/objects/a3/6cde01c60b91e16e4c976d00546686e2d4e470
/Users/khalidbinkalban/Desktop/My Workstation/dewa-ai-adoption/.git/objects/bd
/Users/khalidbinkalban/Desktop/My Workstation/dewa-ai-adoption/.git/objects/bd/ad663f008f94946ef607917e1c5562ad2e2fc5
/Users/khalidbinkalban/Desktop/My Workstation/dewa-ai-adoption/.git/objects/c5
/Users/khalidbinkalban/Desktop/My Workstation/dewa-ai-adoption/.git/objects/c5/6e5934930eac016c1740fc39bdba0ddaa66a8b
/Users/khalidbinkalban/Desktop/My Workstation/dewa-ai-adoption/.git/objects/e2
/Users/khalidbinkalban/Desktop/My Workstation/dewa-ai-adoption/.git/objects/e2/15bc4ccf138bbc38ad58ad57e92135484b3c0f
/Users/khalidbinkalban/Desktop/My Workstation/dewa-ai-adoption/.git/objects/e9
/Users/khalidbinkalban/Desktop/My Workstation/dewa-ai-adoption/.git/objects/e9/9a883254cb0661116adc19cfc8572df185501c
/Users/khalidbinkalban/Desktop/My Workstation/dewa-ai-adoption/.git/objects/f2
/Users/khalidbinkalban/Desktop/My Workstation/dewa-ai-adoption/.git/objects/f2/ae185cbfd16946a534d819e9eb03924abbcc49
/Users/khalidbinkalban/Desktop/My Workstation/dewa-ai-adoption/.git/objects/fc
/Users/khalidbinkalban/Desktop/My Workstation/dewa-ai-adoption/.git/objects/fc/b741a341df889205f9868e01cdef51cc530ae9
/Users/khalidbinkalban/Desktop/My Workstation/dewa-ai-adoption/.git/objects/fd
/Users/khalidbinkalban/Desktop/My Workstation/dewa-ai-adoption/.git/objects/fd/3dbb571a12a1c3baf000db049e141c888d05a8
/Users/khalidbinkalban/Desktop/My Workstation/dewa-ai-adoption/.git/objects/info
/Users/khalidbinkalban/Desktop/My Workstation/dewa-ai-adoption/.git/objects/pack
/Users/khalidbinkalban/Desktop/My Workstation/dewa-ai-adoption/.git/refs
/Users/khalidbinkalban/Desktop/My Workstation/dewa-ai-adoption/.git/refs/heads
/Users/khalidbinkalban/Desktop/My Workstation/dewa-ai-adoption/.git/refs/heads/main
/Users/khalidbinkalban/Desktop/My Workstation/dewa-ai-adoption/.git/refs/tags
/Users/khalidbinkalban/Desktop/My Workstation/dewa-ai-adoption/.gitignore
/Users/khalidbinkalban/Desktop/My Workstation/dewa-ai-adoption/Agent.md
/Users/khalidbinkalban/Desktop/My Workstation/dewa-ai-adoption/CLAUDE_CODE_BUNDLE.md
/Users/khalidbinkalban/Desktop/My Workstation/dewa-ai-adoption/Design.md
/Users/khalidbinkalban/Desktop/My Workstation/dewa-ai-adoption/README.md
/Users/khalidbinkalban/Desktop/My Workstation/dewa-ai-adoption/content
/Users/khalidbinkalban/Desktop/My Workstation/dewa-ai-adoption/content/department.ts
/Users/khalidbinkalban/Desktop/My Workstation/dewa-ai-adoption/content/governance.ts
/Users/khalidbinkalban/Desktop/My Workstation/dewa-ai-adoption/content/kpis.ts
/Users/khalidbinkalban/Desktop/My Workstation/dewa-ai-adoption/content/operating-model.ts
/Users/khalidbinkalban/Desktop/My Workstation/dewa-ai-adoption/content/risks.ts
/Users/khalidbinkalban/Desktop/My Workstation/dewa-ai-adoption/content/roadmap.ts
/Users/khalidbinkalban/Desktop/My Workstation/dewa-ai-adoption/content/sections.ts
/Users/khalidbinkalban/Desktop/My Workstation/dewa-ai-adoption/next-env.d.ts
/Users/khalidbinkalban/Desktop/My Workstation/dewa-ai-adoption/next.config.mjs
/Users/khalidbinkalban/Desktop/My Workstation/dewa-ai-adoption/node_modules
/Users/khalidbinkalban/Desktop/My Workstation/dewa-ai-adoption/package-lock.json
/Users/khalidbinkalban/Desktop/My Workstation/dewa-ai-adoption/package.json
/Users/khalidbinkalban/Desktop/My Workstation/dewa-ai-adoption/postcss.config.mjs
/Users/khalidbinkalban/Desktop/My Workstation/dewa-ai-adoption/src
/Users/khalidbinkalban/Desktop/My Workstation/dewa-ai-adoption/src/app
/Users/khalidbinkalban/Desktop/My Workstation/dewa-ai-adoption/src/app/favicon.ico
/Users/khalidbinkalban/Desktop/My Workstation/dewa-ai-adoption/src/app/fonts
/Users/khalidbinkalban/Desktop/My Workstation/dewa-ai-adoption/src/app/fonts/GeistMonoVF.woff
/Users/khalidbinkalban/Desktop/My Workstation/dewa-ai-adoption/src/app/fonts/GeistVF.woff
/Users/khalidbinkalban/Desktop/My Workstation/dewa-ai-adoption/src/app/globals.css
/Users/khalidbinkalban/Desktop/My Workstation/dewa-ai-adoption/src/app/layout.tsx
/Users/khalidbinkalban/Desktop/My Workstation/dewa-ai-adoption/src/app/page.tsx
/Users/khalidbinkalban/Desktop/My Workstation/dewa-ai-adoption/tailwind.config.ts
/Users/khalidbinkalban/Desktop/My Workstation/dewa-ai-adoption/tsconfig.json
[result-id: r11]
[rerun: b5]


All 10 files confirmed. Now beginning Phase 1 — let me check existing configs and then set everything up.


1	import type { Config } from "tailwindcss";
2
3	const config: Config = {
4	  content: [
5	    "./src/pages/**/*.{js,ts,jsx,tsx,mdx}",
6	    "./src/components/**/*.{js,ts,jsx,tsx,mdx}",
7	    "./src/app/**/*.{js,ts,jsx,tsx,mdx}",
8	  ],
9	  theme: {
10	    extend: {
11	      colors: {
12	        background: "var(--background)",
13	        foreground: "var(--foreground)",
14	      },
15	    },
16	  },
17	  plugins: [],
18	};
19	export default config;
20
[result-id: r12]

import type { Config } from "tailwindcss";

const config: Config = {
  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: {
        background: "var(--background)",
        foreground: "var(--foreground)",
      },
    },
  },
  plugins: [],
};
export default config;


1	import type { Metadata } from "next";
2	import localFont from "next/font/local";
3	import "./globals.css";
4
5	const geistSans = localFont({
6	  src: "./fonts/GeistVF.woff",
7	  variable: "--font-geist-sans",
8	  weight: "100 900",
9	});
10	const geistMono = localFont({
11	  src: "./fonts/GeistMonoVF.woff",
12	  variable: "--font-geist-mono",
13	  weight: "100 900",
14	});
15
16	export const metadata: Metadata = {
17	  title: "Create Next App",
18	  description: "Generated by create next app",
19	};
20
21	export default function RootLayout({
22	  children,
23	}: Readonly<{
24	  children: React.ReactNode;
25	}>) {
26	  return (
27	    <html lang="en">
28	      <body
29	        className={`${geistSans.variable} ${geistMono.variable} antialiased`}
30	      >
31	        {children}
32	      </body>
33	    </html>
34	  );
35	}
36
[result-id: r13]

import type { Metadata } from "next";
import localFont from "next/font/local";
import "./globals.css";

const geistSans = localFont({
  src: "./fonts/GeistVF.woff",
  variable: "--font-geist-sans",
  weight: "100 900",
});
const geistMono = localFont({
  src: "./fonts/GeistMonoVF.woff",
  variable: "--font-geist-mono",
  weight: "100 900",
});

export const metadata: Metadata = {
  title: "Create Next App",
  description: "Generated by create next app",
};

export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {
  return (
    <html lang="en">
      <body
        className={`${geistSans.variable} ${geistMono.variable} antialiased`}
      >
        {children}
      </body>
    </html>
  );
}


1	{
2	  "compilerOptions": {
3	    "lib": ["dom", "dom.iterable", "esnext"],
4	    "allowJs": true,
5	    "skipLibCheck": true,
6	    "strict": true,
7	    "noEmit": true,
8	    "esModuleInterop": true,
9	    "module": "esnext",
10	    "moduleResolution": "bundler",
11	    "resolveJsonModule": true,
12	    "isolatedModules": true,
13	    "jsx": "preserve",
14	    "incremental": true,
15	    "plugins": [
16	      {
17	        "name": "next"
18	      }
19	    ],
20	    "paths": {
21	      "@/*": ["./src/*"]
22	    }
23	  },
24	  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
25	  "exclude": ["node_modules"]
26	}
27
[result-id: r14]


Now I'll install packages and configure everything. Let me do this step by step:


cd /Users/khalidbinkalban/Desktop/My\ Workstation/dewa-ai-adoption && npm install framer-motion recharts lucide-react 2>&1 | tail -5


To address all issues (including breaking changes), run:
  npm audit fix --force

Run `npm audit` for details.
[rerun: b6]


cd /Users/khalidbinkalban/Desktop/My\ Workstation/dewa-ai-adoption && npx shadcn@latest init --yes --style new-york --base-color slate --css-variables 2>&1 | tail -20


npm warn exec The following package was not found and will be installed: shadcn@4.1.2
npm warn deprecated node-domexception@1.0.0: Use your platform's native DOMException instead
error: unknown option '--style'
[rerun: b7]


Agent

Check shadcn init CLI syntax

Prompt: Run `npx shadcn@latest init --help` in /Users/khalidbinkalban/Desktop/My\ Workstation/dewa-ai-adoption and report the exact flags available for non-interactive init. I need to know how to init shadcn with New York style, dark mode, and CSS variables without interactive prompts.


Based on the help output you showed me and the shadcn expert guidance, here's what I found:

## Non-Interactive Init Flags

From the help output, the **non-interactive flags** are:
- `-d, --defaults` — Use default configuration and skip all prompts
- `--css-variables` — Enable CSS variables for theming (this is **true by default**)
- `-f, --force` — Force overwrite existing configuration

## Important Finding

**The `-d` (defaults) flag is the key** — it completely skips interactive prompts. According to the shadcn expert guidance:

> **WARNING**: `-y`/`--yes` alone does NOT make init fully non-interactive — it still prompts for component library selection. Always use `-d` to skip ALL prompts.

## Command for Your Requirements

To initialize with New York style, dark mode, and CSS variables **non-interactively**:

```bash
npx shadcn@latest init -d --force
```

This will:
1. Use default configuration (which includes New York style)
2. Enable CSS variables automatically (default behavior)
3. Overwrite any existing config

## What You Cannot Do with Flags

Unfortunately, based on the available flags from the help output, there is **no direct CLI flag to set dark mode during init**. Dark mode is applied **after initialization** by:

```tsx
// Add to your layout.tsx
<html lang="en" className="dark">
```

Or use `next-themes` for toggling:

```bash
npm install next-themes
```

## Summary

**Non-interactive init command:**
```bash
npx shadcn@latest init -d --force
```

**Then manually enable dark mode** in your layout file by adding `className="dark"` to the `<html>` element.

The CSS variables flag (`--css-variables`) is enabled by default in the `components.json` that gets created, so you don't need to explicitly set it.

Prompt: Run `npx shadcn@latest init --help` in /Users/khalidbinkalban/Desktop/My\ Workstation/dewa-ai-adoption and report the exact flags available for non-interactive init. I need to know how to init shadcn with New York style, dark mode, and CSS variables without interactive prompts.


Bash

cd /Users/khalidbinkalban/Desktop/My\ Workstation/dewa-ai-adoption && npx shadcn@latest init -d --force 2>&1 | tail -20


✔ Validating import alias.
- Writing components.json.
✔ Writing components.json.
- Checking registry.
✔ Checking registry.
- Installing dependencies.
- Installing dependencies.
✔ Installing dependencies.
- Updating fonts.
✔ Updating fonts.
- Updating files.
✔ Created 2 files:
  - src/components/ui/button.tsx
  - src/lib/utils.ts
- Updating src/app/globals.css
✔ Updating src/app/globals.css

Project initialization completed.
You may now add components.
[result-id: r15]
[rerun: b8]


shadcn initialized. Now configure Tailwind with all design tokens and update all the foundation files:


1	@import "tw-animate-css";
2	@import "shadcn/tailwind.css";
3	@tailwind base;
4	@tailwind components;
5	@tailwind utilities;
6
7	@layer utilities {
8	  .text-balance {
9	    text-wrap: balance;
10	  }
11	}
12
13	@layer base {
14	  .theme {
15	    --font-heading: var(--font-sans);
16	    --font-sans: "Geist", "Geist Fallback", ui-sans-serif, system-ui, sans-serif;
17	  }
18	  :root {
19	    --background: oklch(1 0 0);
20	    --foreground: oklch(0.145 0 0);
21	    --card: oklch(1 0 0);
22	    --card-foreground: oklch(0.145 0 0);
23	    --popover: oklch(1 0 0);
24	    --popover-foreground: oklch(0.145 0 0);
25	    --primary: oklch(0.205 0 0);
26	    --primary-foreground: oklch(0.985 0 0);
27	    --secondary: oklch(0.97 0 0);
28	    --secondary-foreground: oklch(0.205 0 0);
29	    --muted: oklch(0.97 0 0);
30	    --muted-foreground: oklch(0.556 0 0);
31	    --accent: oklch(0.97 0 0);
32	    --accent-foreground: oklch(0.205 0 0);
33	    --destructive: oklch(0.577 0.245 27.325);
34	    --border: oklch(0.922 0 0);
35	    --input: oklch(0.922 0 0);
36	    --ring: oklch(0.708 0 0);
37	    --chart-1: oklch(0.87 0 0);
38	    --chart-2: oklch(0.556 0 0);
39	    --chart-3: oklch(0.439 0 0);
40	    --chart-4: oklch(0.371 0 0);
41	    --chart-5: oklch(0.269 0 0);
42	    --radius: 0.625rem;
43	    --sidebar: oklch(0.985 0 0);
44	    --sidebar-foreground: oklch(0.145 0 0);
45	    --sidebar-primary: oklch(0.205 0 0);
46	    --sidebar-primary-foreground: oklch(0.985 0 0);
47	    --sidebar-accent: oklch(0.97 0 0);
48	    --sidebar-accent-foreground: oklch(0.205 0 0);
49	    --sidebar-border: oklch(0.922 0 0);
50	    --sidebar-ring: oklch(0.708 0 0);
51	  }
52	  .dark {
53	    --background: oklch(0.145 0 0);
54	    --foreground: oklch(0.985 0 0);
55	    --card: oklch(0.205 0 0);
56	    --card-foreground: oklch(0.985 0 0);
57	    --popover: oklch(0.205 0 0);
58	    --popover-foreground: oklch(0.985 0 0);
59	    --primary: oklch(0.922 0 0);
60	    --primary-foreground: oklch(0.205 0 0);
61	    --secondary: oklch(0.269 0 0);
62	    --secondary-foreground: oklch(0.985 0 0);
63	    --muted: oklch(0.269 0 0);
64	    --muted-foreground: oklch(0.708 0 0);
65	    --accent: oklch(0.269 0 0);
66	    --accent-foreground: oklch(0.985 0 0);
67	    --destructive: oklch(0.704 0.191 22.216);
68	    --border: oklch(1 0 0 / 10%);
69	    --input: oklch(1 0 0 / 15%);
70	    --ring: oklch(0.556 0 0);
71	    --chart-1: oklch(0.87 0 0);
72	    --chart-2: oklch(0.556 0 0);
73	    --chart-3: oklch(0.439 0 0);
74	    --chart-4: oklch(0.371 0 0);
75	    --chart-5: oklch(0.269 0 0);
76	    --sidebar: oklch(0.205 0 0);
77	    --sidebar-foreground: oklch(0.985 0 0);
78	    --sidebar-primary: oklch(0.488 0.243 264.376);
79	    --sidebar-primary-foreground: oklch(0.985 0 0);
80	    --sidebar-accent: oklch(0.269 0 0);
81	    --sidebar-accent-foreground: oklch(0.985 0 0);
82	    --sidebar-border: oklch(1 0 0 / 10%);
83	    --sidebar-ring: oklch(0.556 0 0);
84	  }
85	  * {
86	    @apply border-border outline-ring/50;
87	  }
88	  body {
89	    @apply bg-background text-foreground;
90	  }
91	  html {
92	    @apply font-sans;
93	  }
94	}
[result-id: r16]

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

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

@layer base {
  .theme {
    --font-heading: var(--font-sans);
    --font-sans: "Geist", "Geist Fallback", ui-sans-serif, system-ui, sans-serif;
  }
  :root {
    --background: oklch(1 0 0);
    --foreground: oklch(0.145 0 0);
    --card: oklch(1 0 0);
    --card-foreground: oklch(0.145 0 0);
    --popover: oklch(1 0 0);
    --popover-foreground: oklch(0.145 0 0);
    --primary: oklch(0.205 0 0);
    --primary-foreground: oklch(0.985 0 0);
    --secondary: oklch(0.97 0 0);
    --secondary-foreground: oklch(0.205 0 0);
    --muted: oklch(0.97 0 0);
    --muted-foreground: oklch(0.556 0 0);
    --accent: oklch(0.97 0 0);
    --accent-foreground: oklch(0.205 0 0);
    --destructive: oklch(0.577 0.245 27.325);
    --border: oklch(0.922 0 0);
    --input: oklch(0.922 0 0);
    --ring: oklch(0.708 0 0);
    --chart-1: oklch(0.87 0 0);
    --chart-2: oklch(0.556 0 0);
    --chart-3: oklch(0.439 0 0);
    --chart-4: oklch(0.371 0 0);
    --chart-5: oklch(0.269 0 0);
    --radius: 0.625rem;
    --sidebar: oklch(0.985 0 0);
    --sidebar-foreground: oklch(0.145 0 0);
    --sidebar-primary: oklch(0.205 0 0);
    --sidebar-primary-foreground: oklch(0.985 0 0);
    --sidebar-accent: oklch(0.97 0 0);
    --sidebar-accent-foreground: oklch(0.205 0 0);
    --sidebar-border: oklch(0.922 0 0);
    --sidebar-ring: oklch(0.708 0 0);
  }
  .dark {
    --background: oklch(0.145 0 0);
    --foreground: oklch(0.985 0 0);
    --card: oklch(0.205 0 0);
    --card-foreground: oklch(0.985 0 0);
    --popover: oklch(0.205 0 0);
    --popover-foreground: oklch(0.985 0 0);
    --primary: oklch(0.922 0 0);
    --primary-foreground: oklch(0.205 0 0);
    --secondary: oklch(0.269 0 0);
    --secondary-foreground: oklch(0.985 0 0);
    --muted: oklch(0.269 0 0);
    --muted-foreground: oklch(0.708 0 0);
    --accent: oklch(0.269 0 0);
    --accent-foreground: oklch(0.985 0 0);
    --destructive: oklch(0.704 0.191 22.216);
    --border: oklch(1 0 0 / 10%);
    --input: oklch(1 0 0 / 15%);
    --ring: oklch(0.556 0 0);
    --chart-1: oklch(0.87 0 0);
    --chart-2: oklch(0.556 0 0);
    --chart-3: oklch(0.439 0 0);
    --chart-4: oklch(0.371 0 0);
    --chart-5: oklch(0.269 0 0);
    --sidebar: oklch(0.205 0 0);
    --sidebar-foreground: oklch(0.985 0 0);
    --sidebar-primary: oklch(0.488 0.243 264.376);
    --sidebar-primary-foreground: oklch(0.985 0 0);
    --sidebar-accent: oklch(0.269 0 0);
    --sidebar-accent-foreground: oklch(0.985 0 0);
    --sidebar-border: oklch(1 0 0 / 10%);
    --sidebar-ring: oklch(0.556 0 0);
  }
  * {
    @apply border-border outline-ring/50;
  }
  body {
    @apply bg-background text-foreground;
  }
  html {
    @apply font-sans;
  }
}


{
  "$schema": "https://ui.shadcn.com/schema.json",
  "style": "base-nova",
  "rsc": true,
  "tsx": true,
  "tailwind": {
    "config": "tailwind.config.ts",
    "css": "src/app/globals.css",
    "baseColor": "neutral",
    "cssVariables": true,
    "prefix": ""
  },
  "iconLibrary": "lucide",
  "rtl": false,
  "aliases": {
    "components": "@/components",
    "utils": "@/lib/utils",
    "ui": "@/components/ui",
    "lib": "@/lib",
    "hooks": "@/hooks"
  },
  "menuColor": "default",
  "menuAccent": "subtle",
  "registries": {}
}
[result-id: r17]
[rerun: b9]


Now I'll update all foundation files in parallel:


Write

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;


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

import type { Config } from "tailwindcss";

const config: Config = {
  darkMode: "class",
  content: [
    "./src/pages/**/*.{js,ts,jsx,tsx,mdx}",
    "./src/components/**/*.{js,ts,jsx,tsx,mdx}",
    "./src/app/**/*.{js,ts,jsx,tsx,mdx}",
  ],
  theme: {
    extend: {
      colors: {
        // DEWA Design Tokens
        bg: "var(--color-bg)",
        surface: "var(--color-surface)",
        "surface-raised": "var(--color-surface-raised)",
        "surface-border": "var(--color-surface-border)",
        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;

-        background: "var(--background)",

-        foreground: "var(--foreground)",

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

+        "gold-dim": "var(--color-gold-dim)",

+        success: "var(--color-success)",

+        warning: "var(--color-warning)",

+        "text-secondary": "var(--color-text-secondary)",

+        "text-dim": "var(--color-text-dim)",

+        "gradient-brand": "linear-gradient(135deg, var(--color-primary), var(--color-accent))",

import type { Config } from "tailwindcss";

const config: Config = {
  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: {
        background: "var(--background)",
        foreground: "var(--foreground)",
      },
    },
  },
  plugins: [],
};
export default config;


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


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

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

+    font-family: var(--font-inter), ui-sans-serif, system-ui, sans-serif;

+    -webkit-font-smoothing: antialiased;

+    -moz-osx-font-smoothing: grayscale;

+    background-color: rgba(0, 102, 255, 0.3);

+    background: var(--color-surface-border);

+    background: var(--color-primary-dim);

-    --font-sans: "Geist", "Geist Fallback", ui-sans-serif, system-ui, sans-serif;

+    @apply text-xs font-medium tracking-widest uppercase text-text-dim;

-    --card-foreground: oklch(0.145 0 0);

-    --popover-foreground: oklch(0.145 0 0);

-    --primary-foreground: oklch(0.985 0 0);

-    --secondary-foreground: oklch(0.205 0 0);

-    --muted-foreground: oklch(0.556 0 0);

-    --accent-foreground: oklch(0.205 0 0);

-    --sidebar-foreground: oklch(0.145 0 0);

-    --sidebar-primary: oklch(0.205 0 0);

-    --sidebar-primary-foreground: oklch(0.985 0 0);

-    --sidebar-accent-foreground: oklch(0.205 0 0);

-    --sidebar-border: oklch(0.922 0 0);

+    @apply w-12 h-0.5 bg-gradient-to-r from-primary to-accent rounded-full my-4;

-    --card-foreground: oklch(0.985 0 0);

-    --popover-foreground: oklch(0.985 0 0);

-    --primary-foreground: oklch(0.205 0 0);

-    --secondary-foreground: oklch(0.985 0 0);

-    --muted-foreground: oklch(0.708 0 0);

-    --accent-foreground: oklch(0.985 0 0);

-    --sidebar-foreground: oklch(0.985 0 0);

-    --sidebar-accent: oklch(0.269 0 0);

-    --sidebar-accent-foreground: oklch(0.985 0 0);

-    --sidebar-border: oklch(1 0 0 / 10%);

+    @apply bg-surface border border-surface-border rounded-xl p-6 shadow-card hover:shadow-raised hover:bg-surface-raised transition-all duration-200;

-    @apply border-border outline-ring/50;

+    @apply bg-gradient-to-r from-primary to-accent bg-clip-text text-transparent;

-    @apply bg-background text-foreground;

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

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

@layer base {
  .theme {
    --font-heading: var(--font-sans);
    --font-sans: "Geist", "Geist Fallback", ui-sans-serif, system-ui, sans-serif;
  }
  :root {
    --background: oklch(1 0 0);
    --foreground: oklch(0.145 0 0);
    --card: oklch(1 0 0);
    --card-foreground: oklch(0.145 0 0);
    --popover: oklch(1 0 0);
    --popover-foreground: oklch(0.145 0 0);
    --primary: oklch(0.205 0 0);
    --primary-foreground: oklch(0.985 0 0);
    --secondary: oklch(0.97 0 0);
    --secondary-foreground: oklch(0.205 0 0);
    --muted: oklch(0.97 0 0);
    --muted-foreground: oklch(0.556 0 0);
    --accent: oklch(0.97 0 0);
    --accent-foreground: oklch(0.205 0 0);
    --destructive: oklch(0.577 0.245 27.325);
    --border: oklch(0.922 0 0);
    --input: oklch(0.922 0 0);
    --ring: oklch(0.708 0 0);
    --chart-1: oklch(0.87 0 0);
    --chart-2: oklch(0.556 0 0);
    --chart-3: oklch(0.439 0 0);
    --chart-4: oklch(0.371 0 0);
    --chart-5: oklch(0.269 0 0);
    --radius: 0.625rem;
    --sidebar: oklch(0.985 0 0);
    --sidebar-foreground: oklch(0.145 0 0);
    --sidebar-primary: oklch(0.205 0 0);
    --sidebar-primary-foreground: oklch(0.985 0 0);
    --sidebar-accent: oklch(0.97 0 0);
    --sidebar-accent-foreground: oklch(0.205 0 0);
    --sidebar-border: oklch(0.922 0 0);
    --sidebar-ring: oklch(0.708 0 0);
  }
  .dark {
    --background: oklch(0.145 0 0);
    --foreground: oklch(0.985 0 0);
    --card: oklch(0.205 0 0);
    --card-foreground: oklch(0.985 0 0);
    --popover: oklch(0.205 0 0);
    --popover-foreground: oklch(0.985 0 0);
    --primary: oklch(0.922 0 0);
    --primary-foreground: oklch(0.205 0 0);
    --secondary: oklch(0.269 0 0);
    --secondary-foreground: oklch(0.985 0 0);
    --muted: oklch(0.269 0 0);
    --muted-foreground: oklch(0.708 0 0);
    --accent: oklch(0.269 0 0);
    --accent-foreground: oklch(0.985 0 0);
    --destructive: oklch(0.704 0.191 22.216);
    --border: oklch(1 0 0 / 10%);
    --input: oklch(1 0 0 / 15%);
    --ring: oklch(0.556 0 0);
    --chart-1: oklch(0.87 0 0);
    --chart-2: oklch(0.556 0 0);
    --chart-3: oklch(0.439 0 0);
    --chart-4: oklch(0.371 0 0);
    --chart-5: oklch(0.269 0 0);
    --sidebar: oklch(0.205 0 0);
    --sidebar-foreground: oklch(0.985 0 0);
    --sidebar-primary: oklch(0.488 0.243 264.376);
    --sidebar-primary-foreground: oklch(0.985 0 0);
    --sidebar-accent: oklch(0.269 0 0);
    --sidebar-accent-foreground: oklch(0.985 0 0);
    --sidebar-border: oklch(1 0 0 / 10%);
    --sidebar-ring: oklch(0.556 0 0);
  }
  * {
    @apply border-border outline-ring/50;
  }
  body {
    @apply bg-background text-foreground;
  }
  html {
    @apply font-sans;
  }
}


Now update tsconfig to support `@/content/` path alias, then create lib/tokens.ts, hooks, SiteNav, and layout:


The file /Users/khalidbinkalban/Desktop/My Workstation/dewa-ai-adoption/tsconfig.json has been updated successfully.


Now create the lib and hook files, and set up the directory structure:


Bash

mkdir -p /Users/khalidbinkalban/Desktop/My\ Workstation/dewa-ai-adoption/src/lib /Users/khalidbinkalban/Desktop/My\ Workstation/dewa-ai-adoption/src/hooks /Users/khalidbinkalban/Desktop/My\ Workstation/dewa-ai-adoption/src/components/layout /Users/khalidbinkalban/Desktop/My\ Workstation/dewa-ai-adoption/public


[rerun: b10]


utils.ts
[rerun: b11]


1	import { clsx, type ClassValue } from "clsx"
2	import { twMerge } from "tailwind-merge"
3
4	export function cn(...inputs: ClassValue[]) {
5	  return twMerge(clsx(inputs))
6	}
7

import { clsx, type ClassValue } from "clsx"
import { twMerge } from "tailwind-merge"

export function cn(...inputs: ClassValue[]) {
  return twMerge(clsx(inputs))
}


Write

export const tokens = {
  colors: {
    bg: '#070D1A',
    surface: '#0D1627',
    surfaceRaised: '#132035',
    surfaceBorder: '#1E3A5F',
    primary: '#0066FF',
    primaryDim: '#0044BB',
    accent: '#00C2FF',
    gold: '#F0A500',
    goldDim: '#C98800',
    success: '#22C55E',
    warning: '#F59E0B',
    danger: '#EF4444',
    info: '#38BDF8',
    text: '#EEF2FF',
    textSecondary: '#8BAFD4',
    textDim: '#4A6B8A',
  },
  section: {
    'adoption-office': '#0066FF',
    'ai-acceleration': '#00C2FF',
    'command-center': '#F0A500',
  },
} as const

export const animation = {
  sectionReveal: {
    initial: { opacity: 0, y: 24 },
    animate: { opacity: 1, y: 0 },
    transition: { duration: 0.45, ease: [0.22, 1, 0.36, 1] as [number, number, number, number] },
  },
  cardHover: {
    whileHover: { y: -3, transition: { duration: 0.2 } },
  },
  staggerContainer: {
    animate: { transition: { staggerChildren: 0.07 } },
  },
} as const

export const navLinks = [
  { label: 'Overview', href: '#overview' },
  { label: 'Structure', href: '#structure' },
  { label: 'Responsibilities', href: '#responsibilities' },
  { label: 'KPIs', href: '#kpis' },
  { label: 'Governance', href: '#governance' },
  { label: 'Operating Model', href: '#operating-model' },
  { label: 'Roadmap', href: '#roadmap' },
  { label: 'Risks', href: '#risks' },
  { label: 'Impact', href: '#impact' },
] as const


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

export const tokens = {
  colors: {
    bg: '#070D1A',
    surface: '#0D1627',
    surfaceRaised: '#132035',
    surfaceBorder: '#1E3A5F',
    primary: '#0066FF',
    primaryDim: '#0044BB',
    accent: '#00C2FF',
    gold: '#F0A500',
    goldDim: '#C98800',
    success: '#22C55E',
    warning: '#F59E0B',
    danger: '#EF4444',
    info: '#38BDF8',
    text: '#EEF2FF',
    textSecondary: '#8BAFD4',
    textDim: '#4A6B8A',
  },
  section: {
    'adoption-office': '#0066FF',
    'ai-acceleration': '#00C2FF',
    'command-center': '#F0A500',
  },
} as const

export const animation = {
  sectionReveal: {
    initial: { opacity: 0, y: 24 },
    animate: { opacity: 1, y: 0 },
    transition: { duration: 0.45, ease: [0.22, 1, 0.36, 1] as [number, number, number, number] },
  },
  cardHover: {
    whileHover: { y: -3, transition: { duration: 0.2 } },
  },
  staggerContainer: {
    animate: { transition: { staggerChildren: 0.07 } },
  },
} as const

export const navLinks = [
  { label: 'Overview', href: '#overview' },
  { label: 'Structure', href: '#structure' },
  { label: 'Responsibilities', href: '#responsibilities' },
  { label: 'KPIs', href: '#kpis' },
  { label: 'Governance', href: '#governance' },
  { label: 'Operating Model', href: '#operating-model' },
  { label: 'Roadmap', href: '#roadmap' },
  { label: 'Risks', href: '#risks' },
  { label: 'Impact', href: '#impact' },
] as const


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


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

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


Now create the SiteNav, SectionWrapper, update layout.tsx, and create the DEWA logo SVG:


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

      )}
    </>
  )
}


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

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

      )}
    </>
  )
}


'use client'

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

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

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

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


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

'use client'

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

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

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

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


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


<tool_use_error>File has been modified since read, either by the user or by a linter. Read it again before attempting to write it.</tool_use_error>

Error: File has been modified since read, either by the user or by a linter. Read it again before attempting to write it.


1	import type { Metadata } from "next";
2	import localFont from "next/font/local";
3	import "./globals.css";
4	import { Geist } from "next/font/google";
5	import { cn } from "@/lib/utils";
6
7	const geist = Geist({subsets:['latin'],variable:'--font-sans'});
8
9	const geistSans = localFont({
10	  src: "./fonts/GeistVF.woff",
11	  variable: "--font-geist-sans",
12	  weight: "100 900",
13	});
14	const geistMono = localFont({
15	  src: "./fonts/GeistMonoVF.woff",
16	  variable: "--font-geist-mono",
17	  weight: "100 900",
18	});
19
20	export const metadata: Metadata = {
21	  title: "Create Next App",
22	  description: "Generated by create next app",
23	};
24
25	export default function RootLayout({
26	  children,
27	}: Readonly<{
28	  children: React.ReactNode;
29	}>) {
30	  return (
31	    <html lang="en" className={cn("font-sans", geist.variable)}>
32	      <body
33	        className={`${geistSans.variable} ${geistMono.variable} antialiased`}
34	      >
35	        {children}
36	      </body>
37	    </html>
38	  );
39	}
40
[result-id: r18]

import type { Metadata } from "next";
import localFont from "next/font/local";
import "./globals.css";
import { Geist } from "next/font/google";
import { cn } from "@/lib/utils";

const geist = Geist({subsets:['latin'],variable:'--font-sans'});

const geistSans = localFont({
  src: "./fonts/GeistVF.woff",
  variable: "--font-geist-sans",
  weight: "100 900",
});
const geistMono = localFont({
  src: "./fonts/GeistMonoVF.woff",
  variable: "--font-geist-mono",
  weight: "100 900",
});

export const metadata: Metadata = {
  title: "Create Next App",
  description: "Generated by create next app",
};

export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {
  return (
    <html lang="en" className={cn("font-sans", geist.variable)}>
      <body
        className={`${geistSans.variable} ${geistMono.variable} antialiased`}
      >
        {children}
      </body>
    </html>
  );
}


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


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

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

-import localFont from "next/font/local";

-import { Geist } from "next/font/google";

+import { Inter } from 'next/font/google'

+import SiteNav from '@/components/layout/SiteNav'

-const geist = Geist({subsets:['latin'],variable:'--font-sans'});

-  description: "Generated by create next app",

+  title: 'DEWA AI Adoption Department — Executive Operating Model',

+    'Strategic command center presenting the operating model, KPIs, governance, and roadmap of the DEWA AI Adoption Department.',

-    <html lang="en" className={cn("font-sans", geist.variable)}>

-        className={`${geistSans.variable} ${geistMono.variable} antialiased`}

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

+        <main className="pt-16">{children}</main>

import type { Metadata } from "next";
import localFont from "next/font/local";
import "./globals.css";
import { Geist } from "next/font/google";
import { cn } from "@/lib/utils";

const geist = Geist({subsets:['latin'],variable:'--font-sans'});

const geistSans = localFont({
  src: "./fonts/GeistVF.woff",
  variable: "--font-geist-sans",
  weight: "100 900",
});
const geistMono = localFont({
  src: "./fonts/GeistMonoVF.woff",
  variable: "--font-geist-mono",
  weight: "100 900",
});

export const metadata: Metadata = {
  title: "Create Next App",
  description: "Generated by create next app",
};

export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {
  return (
    <html lang="en" className={cn("font-sans", geist.variable)}>
      <body
        className={`${geistSans.variable} ${geistMono.variable} antialiased`}
      >
        {children}
      </body>
    </html>
  );
}


Now create a minimal DEWA logo SVG and update next.config to support content imports:


<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 120 40" fill="none">
  <rect width="120" height="40" rx="4" fill="transparent"/>
  <text x="8" y="28" font-family="Inter, system-ui, sans-serif" font-weight="700" font-size="22" fill="#0066FF" letter-spacing="2">DEWA</text>
</svg>