Cobalt Real Estate Stats
A clean, professional stats overview designed for real estate agencies, property platforms, and market report dashboards.
Features
- Corporate palette — Light gray (#f8f9fc) background with cobalt blue (#1e40af) accents and white card surfaces
- Modern typography — Sora for headings and stat numbers, Crimson Text serif for descriptive body text
- 6 metric cards — Properties sold, avg sale price, client satisfaction, markets covered, active listings, days on market
- Mini SVG charts — Each card has a sparkline chart with gradient fill and animated line drawing
- Trend indicators — Green/blue badges showing percentage change with direction
- City skyline — Full-width SVG silhouette at bottom with map-pin markers
- Live indicator — Pulsing green dot with "Live" label showing real-time data
- Chart line animation — SVG stroke-dasharray drawing effect on card charts
- Responsive grid — 1 → 2 → 3 column card grid with hover lift effects
Dependencies
@/components/ui/badge — Shadcn Badge@/components/ui/button — Shadcn Button@/components/ui/card — Shadcn Card, CardContent, CardHeader, CardTitle@/components/ui/separator — Shadcn Separator@remixicon/react — RiHome4Line, RiMoneyDollarCircleLine, RiGroupLine, RiMapPinLine, RiArrowRightUpLine, RiBuilding2Line- Google Fonts — Sora (sans-serif headings), Crimson Text (serif body)
Customization
- Accent color: Replace
#1e40af (cobalt) with your brand blue
- : Edit the array — change values, labels, chart paths, and trend data
