Terra Realty Stats
A brutalist, earth-toned stats overview section designed for real estate platforms.
Features
- 6 real estate metrics in a responsive grid layout
- Brutalist design: heavy 2-3px borders, raw bold typography, sharp corners
- Terracotta (#C75B39) and concrete gray (#D3D0CB) palette
- Each stat shows: big number, label, and trend indicator (up/down with percentage)
- Light mode: warm off-white (#F5F0EB) background
- Dark mode: dark charcoal (#1C1917) background with lighter terracotta accents
- Green/terracotta color coding for positive/negative trends
- Legend for trend color meanings
- WCAG AA compliant color contrast
Usage
import RegistryItem from './registry-item';
export default function Page() {
return <RegistryItem />;
}
Customization
- Edit the
stats array to change metrics, values, and trends
- Adjust terracotta/concrete color values to match your brand
- Add onClick handlers to individual stat cards for drill-down views
- Integrate with real data by replacing static values with API responses
- Modify trend threshold colors for your specific use case
