# Hero Section

> A modern, responsive Hero Section built with Framer Motion, TailwindCSS, and Lucide Icons. This layout combines an animated headline, call-to-action buttons, a count-up number animation, and feature cards into a clean, engaging landing section — perfect for fintech, SaaS, or startup landing pages.  Includes:  Motion-based entrance animations triggered on scroll  Count-up number animation for financial/statistical metrics  Responsive 3-column feature layout  Two clear call-to-action buttons  Utility-based styling with Tailwind  🚀 Features: ✅ Framer Motion Integration – Animates on scroll with smooth inView detection and layout transitions.  ✅ Animated Count-Up Number – Show KPI growth or fundraising stats dynamically.  ✅ Lucide Icons Support – Flexible icon system using React.ElementType.  ✅ TailwindCSS Utility Styling – Easy to customize, mobile-responsive, and clean.  ✅ Component Composition – Breaks UI into reusable FeatureCard, FeatureListItem, and AnimatedNumber components.  ✅ Accessibility Ready – All buttons include hover/focus states and keyboard accessibility.  ✅ SSR-Compatible – Works in frameworks like Next.js, Astro, etc.  📦 Tech Stack: Framework: React  Animation: Framer Motion  Styling: Tailwind CSS  Icons: Lucide React  Hosting Ready: Works on 21st.dev, Vercel, Netlify  🧠 Use Cases: 🌐 Fintech startups highlighting financial growth  📈 Investor landing pages showing fundraising stats  💼 SaaS hero section with CTA + feature highlights  🧠 Portfolio intro with personalized stats  🚀 Startup showcase (Seed funding, metrics, etc.)  ⚙️ How to Use: Copy the component into your React project (Next.js, Vite, etc.).  Replace the mock avatar/image URL and edit card content as per your product.  Tailor the AnimatedNumber component if you need different formats (%, $M, etc.)  Swap Lucide icons with others if needed (e.g., heroicons, phosphor-react).  Adjust colors, spacing, or layout using Tailwind classes.  📌 Notes: Works well as a first section of your homepage.  Optimized for desktop and tablet; can be extended with mobile layouts.  The animation runs only once on scroll (useInView with once: true).  Lightweight, no external styles or CSS files.

- Author: [Sonu](https://21st.dev/@uniquesonu)
- License: unknown
- npm dependencies: lucide-react, framer-motion
- Live preview: https://21st.dev/@uniquesonu/components/hero-section

## Install

```bash
npx shadcn@latest add "https://21st.dev/r/uniquesonu/hero-section?api_key=$API_KEY_21ST"
```

Requires a 21st API key (generate one at https://21st.dev/mcp) passed as `API_KEY_21ST`. Free accounts get a limited number of installs per day; unlimited on a paid plan — see https://21st.dev/pricing.

Full component directory: https://21st.dev/llms.txt