Build a dark-themed analytics dashboard using React + Tailwind CSS + Recharts.
LAYOUT
- Sidebar (240px fixed) on left, main content area on right
- Sidebar: dark (#0d0d14) with logo at top, 6 nav links with icons (Overview, Analytics, Customers, Revenue, Reports, Settings), user avatar + name at bottom
- Top bar in main area: page title on left, search input center, notification bell + user avatar on right
- Main content: 24px gutter, scroll-y
DASHBOARD GRID
Row 1 — 4 KPI cards (equal width):
- Each card: label (12px uppercase, muted), value (huge, 32px), small percentage change (green up arrow or red down arrow), 7-day sparkline
- Examples: Total Revenue, Active Users, Conversion Rate, Avg Order Value
Row 2 — 2 cards (2:1 ratio):
- Left (wider): Revenue over time area chart, last 30 days, gradient fill purple, X-axis dates, Y-axis dollar values, hover tooltip
- Right: Top sources list (5 rows), each row: source icon, name, visits count, percentage bar
Row 3 — 3 equal cards:
- Recent transactions table (5 rows: customer name, amount, status pill, date)
- Geographic distribution: world map with intensity colors
- Active users by device: donut chart (Desktop, Mobile, Tablet)
DESIGN
- Background #06080d, card background #0f0f17, border 1px solid rgba(255,255,255,0.06), border-radius 12px
- Text: white headings, muted rgba(255,255,255,0.6) for labels, accent purple #a78bfa for highlights
- Inter font, 14px base
- Status pills: success green bg/text, pending yellow, failed red — all 10% opacity bg + full opacity text
- Charts use color palette: #a78bfa, #ec4899, #22d3ee, #fbbf24
INTERACTIVITY
- Sidebar nav: active item has a glow effect (subtle box-shadow + bg tint)
- KPI cards: hover shows a soft glow border
- Sparklines animate on first mount
- Table rows: hover background tint, clickable