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.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Hero Section to your project and fits it to your theme.

import { Component } from "@/components/ui/hero-section";

export default function DemoOne() {
  return <Component />;
}