Overview
A premium, production-ready hero section designed for React component marketplaces and developer tool landing pages. Features a two-column layout with compelling copy on the left and an interactive dashboard card mockup on the right.
Features
- Two-column responsive grid — stacks to single column on mobile
- Animated Recharts area chart — smooth ease-out animation on page load
- Live dashboard card — displays component sales count, monthly revenue, and active licenses
- Crosshair box frame — decorative corner-crossing line frame around the card (desktop only)
- Subtle background grid — CSS grid pattern with warm glow orbs
- Stats row — horizontally aligned with visible dividers, centered on mobile
- Full-width buttons on mobile — CTA buttons stack and stretch on small screens
- Zero serif fonts — uses system sans-serif (Geist or system-ui)
- No focus ring on chart — SVG outline removed for clean UX
- TypeScript — fully typed including custom Recharts tooltip
Components Used
AreaChart, Area, XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer — from rechartsArrowRight, LayoutTemplate — from lucide-reactuseState, useEffect — from react
Props / Customization
- Swap chart data in the
chartData array (top of file)
- Change headline copy, stats, and card numbers inline
- Primary CTA color:
#ff9b85 (coral) — update in the button className
- Accent text color:
#ff7a5c — update in the <span> inside <h1>
- Container max-width:
max-w-290 (~1160px) — adjust in the container div
Dependencies
npm install recharts lucide-react
Usage
import HeroSection from '@/components/blocks/hero-section/hero-section'
export default function Page() {
return <HeroSection />
}
