Animated Hero Section

Heroes 640

About

Animated Hero Section Description: A responsive, full-screen hero section with a background image and text elements that animate into view. It features a customizable navigation bar, title, description, and call-to-action buttons, making it highly reusable for various landing pages.

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

Code

How Animated 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/animated-hero-section-1";
import { Button } from "@/components/ui/button";
import { MountainIcon } from "lucide-react";

export default function AnimatedHeroDemo() {
  const navLinks = [
    { label: "Solutions", href: "#" },
    { label: "Working", href: "#" },
    { label: "Discover", href: "#" },
  ];

  const handleCtaClick = () => {
    alert("Primary CTA clicked!");
  };
  
  const handleSecondaryCtaClick = () => {
    alert("Secondary CTA clicked!");
  };

  return (
    <AnimatedHero
      backgroundImageUrl="https://cdn.21st.dev/assets/mirror/c5/c5832175f6f9db22d2918483d8cf4039ec0193385658dd908d0dc8201063b110.jpg"
      logo={
        <>
          <MountainIcon className="h-6 w-6 text-primary-foreground" />
          <span className="font-semibold text-primary-foreground">TwentyFirst</span>
        </>
      }
      navLinks={navLinks}

      // UPDATED: The top-right button now uses the same glass style for consistency
      topRightAction={
        <Button className="bg-white/10 backdrop-blur-sm border border-white/20 text-primary-foreground hover:bg-white/20">
          Get Consultation
        </Button>
      }

      title="Take Charge of your Generation Now"
      description="Lead with purpose, build boldly, and shape the future—your generation's moment is now. Own it. Drive it."
      
      ctaButton={{
        text: "Learn More",
        onClick: handleCtaClick,
      }}

      secondaryCta={{
        text: "Contact Us",
        onClick: handleSecondaryCtaClick,
      }}
    />
  );
}