Components
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.
Loading preview...
import { Component } from "@/components/ui/hero-section";
export default function DemoOne() {
return <Component />;
}