Create a dashboard overview page for Seeno.ai (AI Brand Intelligence for e-commerce). Premium light theme: cream bg #F6F5F1, white cards, indigo #4F46E5 accent. DM Sans body, Instrument Serif headings. Content: Header with brand name + Run Scan button. AI Visibility Score large circular gauge 0-100%. 4 metric cards: SOV%, Avg Position, Engines Active, Prompts Tracked. SOV line chart 30 days (recharts). Top Competitors table. Recent Recommendations 3 cards. Category Breakdown horizontal bars. Tailwind CSS, React, recharts. No emoji.
Now let me build the full dashboard with all components.
Now I'll build all the components and update the theme:
Now let's build all the dashboard components:
Now let's assemble the main page:
Now let's add the custom color tokens to the globals.css @theme inline block so Tailwind can use them:
The Seeno.ai dashboard is fully built. Here's a summary of what was created:
DashboardHeader (with animated Run Scan button), VisibilityScoreGauge (SVG half-circle gauge with count-up animation), MetricCards (4 KPI tiles with trend badges), SovChart (30-day area chart via Recharts), CompetitorsTable (inline SOV bars + trend icons), CategoryBreakdown (hover-interactive horizontal bars), and RecentRecommendations (priority-tagged action cards).#F6F5F1 background, white cards, indigo #4F46E5 primary, with all tokens wired through globals.css and Tailwind's @theme inline block.next/font/google.The issue is clear. The 0 label is positioned at x={strokeWidth / 2 + 2} which puts it right at the edge, and the arc itself starts at x={strokeWidth / 2} — so both the arc endpoints and labels are flush against the SVG boundary with no breathing room. I'll shrink the SVG/arc to give the labels room, and reposition both labels inward so they always render inside the card.
Now update the SVG paths and label positions to use the new cx, cy, radius, and padding values:
The fix works by introducing a padding = 20 inset that shrinks the arc radius inward from the SVG edges on both sides. The arc endpoints now live at cx ± radius (well inside the SVG boundary), and both "0" and "100" labels use textAnchor="middle" centered on those same x-positions — so they're always fully visible. The SVG height is also recalculated to exactly fit the arc plus the label row below it, with no wasted space.
Make the metric numbers more visually prominent in the 4 stat cards (Share of Voice, Avg Position, Engines Active, Prompts Tracked). The numbers (38.4%, 2.1, 6, 1284) should stand out more:
#4F46E5) or a dark bold color (#111827) with heavier font weight (font-extrabold)