+ {/* Mobile sidebar overlay */}
+ {sidebarOpen && (
+
setSidebarOpen(false)}
+ />
+ )}
+
+ {/* Sidebar */}
+
+
+ PRAVADO
+
+
+
+
+
+ {/* Main content */}
+
+ {/* Top bar */}
+
+
+ {/* Page content */}
+
+ {children}
+
+
+
+ {/* Mobile sidebar close button */}
+ {sidebarOpen && (
+
+ )}
+
+ )
+}
\ No newline at end of file
diff --git a/apps/web/src/lib/chartTheme.ts b/apps/web/src/lib/chartTheme.ts
new file mode 100644
index 00000000..e07a6d94
--- /dev/null
+++ b/apps/web/src/lib/chartTheme.ts
@@ -0,0 +1,81 @@
+// Chart.js theme initialization for enterprise branding
+
+let isInitialized = false;
+
+export function initializeChartTheme() {
+ // Only initialize once to avoid repeated imports
+ if (isInitialized) return;
+
+ // Chart.js theme will be initialized when/if Chart.js is actually used
+ // This avoids build-time dependency issues
+ console.log('Chart theme ready for initialization when Chart.js is loaded');
+ isInitialized = true;
+}
+
+// Function to apply theme when Chart.js is available
+export function applyChartTheme() {
+ try {
+ // Check if Chart.js is available in global scope
+ if (typeof window !== 'undefined' && (window as any).Chart) {
+ const Chart = (window as any).Chart;
+ const css = getComputedStyle(document.documentElement);
+
+ // Get theme colors from CSS variables
+ const foreground = `hsl(${css.getPropertyValue('--fg').trim()})`;
+ const border = `hsl(${css.getPropertyValue('--border').trim()})`;
+
+ // Configure global Chart.js defaults
+ Chart.defaults.color = foreground;
+ Chart.defaults.borderColor = border;
+
+ // Apply other theme configurations...
+ console.log('Chart.js theme applied successfully');
+ }
+ } catch (error) {
+ console.warn('Chart.js theme application failed:', error);
+ }
+}
+
+// Brand color palette for charts
+export const chartColors = {
+ primary: 'hsl(var(--brand))',
+ success: 'hsl(var(--success))',
+ warning: 'hsl(var(--warning))',
+ danger: 'hsl(var(--danger))',
+ muted: 'hsl(var(--fg) / 0.6)',
+
+ // Alpha variants for areas/backgrounds
+ primaryAlpha: 'hsl(var(--brand) / 0.1)',
+ successAlpha: 'hsl(var(--success) / 0.1)',
+ warningAlpha: 'hsl(var(--warning) / 0.1)',
+ dangerAlpha: 'hsl(var(--danger) / 0.1)',
+}
+
+// Common chart configurations
+export const chartConfig = {
+ responsive: true,
+ maintainAspectRatio: false,
+ interaction: {
+ intersect: false,
+ mode: 'index' as const,
+ },
+ plugins: {
+ legend: {
+ position: 'bottom' as const,
+ align: 'start' as const,
+ },
+ },
+ scales: {
+ x: {
+ grid: {
+ display: false,
+ },
+ },
+ y: {
+ beginAtZero: true,
+ grid: {
+ drawBorder: false,
+ },
+ },
+ },
+}
\ No newline at end of file
diff --git a/apps/web/src/lib/utils.ts b/apps/web/src/lib/utils.ts
new file mode 100644
index 00000000..1a860ee3
--- /dev/null
+++ b/apps/web/src/lib/utils.ts
@@ -0,0 +1,6 @@
+import { type ClassValue, clsx } from "clsx"
+import { twMerge } from "tailwind-merge"
+
+export function cn(...inputs: ClassValue[]) {
+ return twMerge(clsx(inputs))
+}
\ No newline at end of file
diff --git a/apps/web/src/main.tsx b/apps/web/src/main.tsx
new file mode 100644
index 00000000..fc591644
--- /dev/null
+++ b/apps/web/src/main.tsx
@@ -0,0 +1,14 @@
+import { StrictMode } from 'react'
+import { createRoot } from 'react-dom/client'
+import './styles/globals.css'
+import App from './App.tsx'
+import { initializeChartTheme } from './lib/chartTheme'
+
+// Initialize chart theme for enterprise branding
+initializeChartTheme()
+
+createRoot(document.getElementById('root')!).render(
+
+
+ ,
+)
diff --git a/apps/web/src/pages/Analytics.tsx b/apps/web/src/pages/Analytics.tsx
new file mode 100644
index 00000000..36bc9bfb
--- /dev/null
+++ b/apps/web/src/pages/Analytics.tsx
@@ -0,0 +1,27 @@
+export function Analytics() {
+ return (
+
+
+
Analytics
+
Cross-pillar performance analysis and attribution
+
+
+
+
+
Attribution Map
+
Track campaign influence across channels
+
+
+
+
Share of Voice
+
Market presence and competitor analysis
+
+
+
+
Conversions
+
Revenue attribution and ROI tracking
+
+
+
+ )
+}
\ No newline at end of file
diff --git a/apps/web/src/pages/Campaigns.tsx b/apps/web/src/pages/Campaigns.tsx
new file mode 100644
index 00000000..d58c6799
--- /dev/null
+++ b/apps/web/src/pages/Campaigns.tsx
@@ -0,0 +1,15 @@
+export function Campaigns() {
+ return (
+
+
+
Campaigns
+
Manage your marketing campaigns with Kanban workflows
+
+
+
+
Campaign Management
+
Kanban board with Planning β Drafting β Outreach β Results workflow coming soon
+
+
+ )
+}
\ No newline at end of file
diff --git a/apps/web/src/pages/ContentStudio.tsx b/apps/web/src/pages/ContentStudio.tsx
new file mode 100644
index 00000000..77f3bac8
--- /dev/null
+++ b/apps/web/src/pages/ContentStudio.tsx
@@ -0,0 +1,204 @@
+import { useEffect } from 'react'
+import { FileText, Target, Users, Lightbulb, Wand2, RotateCcw, Save, Send } from 'lucide-react'
+import { useTheme } from '../hooks/useTheme'
+
+export function ContentStudio() {
+ const { setLightMode } = useTheme()
+
+ // Force light mode for Content Studio per spec
+ useEffect(() => {
+ setLightMode()
+ }, [setLightMode])
+
+ return (
+
+ {/* Header */}
+
+
Content Studio
+
Create, edit, and optimize content with AI assistance
+
+
+ {/* Main Content Area */}
+
+ {/* Brief Panel */}
+
+ {/* Content Brief */}
+
+
+
+
Content Brief
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {/* AI Assistance Panel */}
+
+
+
+
AI Assistant
+ Live
+
+
+
+
+
+
+
+
+
+
+
+
+
+
π‘ AI Suggestion
+
+ Consider adding a case study in section 3 to increase engagement by ~25%
+
+
+
+
+
+ {/* Editor Area */}
+
+
+ {/* Editor Header */}
+
+
+
+
+
+
+
+ Auto-saved 2 min ago
+
+
+
+
+
+ {/* Editor Content */}
+
+
+
+
+ {/* Editor Footer */}
+
+
+ Words: 0
+ Characters: 0
+ Reading time: 0 min
+
+
+
+
+
+
+
+
+ )
+}
\ No newline at end of file
diff --git a/apps/web/src/pages/Copilot.tsx b/apps/web/src/pages/Copilot.tsx
new file mode 100644
index 00000000..afa6eb9c
--- /dev/null
+++ b/apps/web/src/pages/Copilot.tsx
@@ -0,0 +1,27 @@
+import { Bot, Zap } from 'lucide-react'
+
+export function Copilot() {
+ return (
+
+
+
AI Copilot
+
Your intelligent marketing assistant
+
+
+
+
+
Context-Aware AI Assistant
+
Get intelligent recommendations and automate tasks based on your current workflow
+
+
+
+ Slide-in drawer interface coming soon
+
+
+
+
+
+ )
+}
\ No newline at end of file
diff --git a/apps/web/src/pages/Dashboard.tsx b/apps/web/src/pages/Dashboard.tsx
new file mode 100644
index 00000000..e242dbd7
--- /dev/null
+++ b/apps/web/src/pages/Dashboard.tsx
@@ -0,0 +1,198 @@
+import { Brain, Calendar, Activity, TrendingUp } from 'lucide-react'
+import { KPIHero } from '../components/KPIHero'
+import { SectionCard } from '../components/SectionCard'
+
+const mockData = {
+ visibilityScore: 74,
+ delta: { value: '+12', positive: true },
+ sparklineData: [65, 68, 72, 69, 74, 71, 74],
+ recommendations: [
+ {
+ type: 'Campaign',
+ title: 'Optimize Q4 product launch timing',
+ description: 'Analytics suggest delaying launch by 2 weeks for 34% higher engagement',
+ confidence: 'High'
+ },
+ {
+ type: 'Content',
+ title: 'Expand "Marketing Automation" content',
+ description: 'This topic shows 3x higher conversion rates in your funnel',
+ confidence: 'Medium'
+ },
+ {
+ type: 'PR',
+ title: 'Target TechCrunch for enterprise story',
+ description: 'Perfect timing based on their recent coverage patterns',
+ confidence: 'High'
+ }
+ ],
+ recentActivity: [
+ { time: '2 hours ago', event: 'Campaign "Q4 Launch" approved and scheduled', type: 'campaign' },
+ { time: '4 hours ago', event: 'PR pitch sent to 12 journalists in enterprise beat', type: 'pr' },
+ { time: '6 hours ago', event: 'Content piece "Marketing Trends 2024" published', type: 'content' },
+ { time: '1 day ago', event: 'SEO ranking improved for "marketing automation" (+3 positions)', type: 'seo' },
+ ]
+}
+
+export function Dashboard() {
+ return (
+
+ {/* Content wrapper with content island */}
+
+
+ {/* Page header */}
+
+
Marketing Command Center
+
Monitor your visibility and manage campaigns from your central dashboard
+
+
+ {/* Row 1: KPI Hero (12 columns) */}
+
+ console.log('View details clicked')}
+ onBreakdown={() => console.log('Breakdown clicked')}
+ />
+
+
+ {/* Row 2: AI Recommendations (6 columns) */}
+
+
+ View All
+
+ }
+ >
+
+ {mockData.recommendations.map((rec, index) => (
+
+
+
+
+
+ {rec.type}
+
+
+ {rec.confidence} Confidence
+
+
+
{rec.title}
+
{rec.description}
+
+
+
+
+
+
+
+ ))}
+
+
+
+ {/* Row 2: Recent Activity (6 columns) */}
+
+
+ View Timeline
+
+ }
+ >
+
+ {mockData.recentActivity.map((activity, index) => (
+
+
+
+
{activity.event}
+
{activity.time}
+
+
+ ))}
+
+
+
+ {/* Row 3: SEO Summary (12 columns) */}
+
+
+
+
+
+ }
+ >
+
+
+
142
+
Tracked Keywords
+
+
+ +8 this week
+
+
+
+
23
+
Top 10 Rankings
+
+
+ +3 improved
+
+
+
+
67
+
Backlinks
+
+
+ +12 acquired
+
+
+
+
18
+
Opportunities
+
+
+ High priority
+
+
+
+
+
+
+