Hero Section

Heroes

About

Hero Section with Animation This is a responsive hero section designed to capture user attention. It features a two-column layout with animated text and an image, which gracefully stacks on smaller screens.

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.

Code

How Hero Section is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

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

export default function AnimatedHeroDemo() {
  return (
    <div className="w-full bg-background text-foreground">
      <AnimatedHero
        title="A platform that was built to move"
        description="Transform the way your company moves and feeds its people with our integrated business solutions."
        buttonText="Get started for free"
        // A placeholder image that resembles the style from the screenshot
        imageUrl="https://cdn.21st.dev/assets/mirror/8e/8e3f5fc10efefbe7d14f223cd7972893368165fb5cc15a2bf785910c4885e34d.gif"
        imageAlt="Illustration of a person working at a desk"
        onButtonClick={() => alert("Button clicked!")}
      />
    </div>
  );
}