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:

• 6 components: 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).
• The theme is fully custom — cream #F6F5F1 background, white cards, indigo #4F46E5 primary, with all tokens wired through globals.css and Tailwind's @theme inline block.
• DM Sans is used for all body/UI text and Instrument Serif for display headings and large numerals, loaded via 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.