Generate a professional SEO dashboard using Shadcn/UI and Tailwind CSS. Use a dark/light mode toggle. Include a search bar that triggers a 'GEO Scan', a radial progress chart for 'AI Sentiment', and a clean feed for 'Recent Mentions'. Make it look like a premium agency tool for Shark Branding Solutions."
I'll create a premium SEO dashboard for Shark Branding Solutions. Let me first generate design inspiration and check the codebase structure.
Now let me read the relevant files to understand the structure:
Now I'll build the SEO dashboard. Let me update the globals.css with a dark theme inspired by the design, update the layout for theme support, and create the dashboard components:
Now let me create the dashboard components:
Now let me create the main dashboard page:
I need to add the date-fns dependency since it's used in the recent mentions component:
date-fns is already included in the dependencies. The dashboard is complete! Let me verify everything is properly set up by checking one more component for the input:
The dashboard is now complete. I've built a premium SEO dashboard for Shark Branding Solutions with:
- Header - Company branding with shark wave icon, a GEO Scan search bar that triggers analysis, and a dark/light mode toggle
- Stats Cards - Four KPI cards showing Visibility Score, Share of Voice, GEO Score, and AI Citations with trend indicators
- Visibility Chart - An area chart comparing your brand against competitors over time
- AI Sentiment Chart - A radial progress chart showing the sentiment score with color-coded status
- Competitors Table - Ranked list of competitors with progress bars and change indicators
- Recent Mentions - A scrollable feed showing brand mentions from various sources with sentiment badges and reach metrics
The design follows a dark theme with purple accents inspired by the cognizo.ai reference, featuring clean card layouts, subtle animations, and a professional agency aesthetic. The theme system supports both dark and light modes via next-themes.