React Components Marketplace Hero

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 recharts
• ArrowRight, LayoutTemplate — from lucide-react
• useState, useEffect — from react

Props / Customization

• Swap chart data in the chartData array (top of file)
• Change headline copy, stats, and card numbers inline