Hero Section

Heroes

About

Bold first impression block. Combines striking headline text, scenic imagery with creative masking, and a newsletter form to drive engagement. Ideal for adventure brands, landing pages, or campaigns seeking an inspiring, high-impact intro.

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 { HeroSection } from "@/components/ui/hero-section";
import { Mountain, Facebook, Twitter, Instagram } from "lucide-react";

export default function HeroSectionDemo() {
  // Data for the component props
  const navLinks = [
    { href: "#", label: "About Us" },
    { href: "#", label: "Store" },
    { href: "#", label: "Offers" },
    { href: "#", label: "Blog" },
  ];

  const socialIcons = [
    {
      href: "#",
      label: "Facebook",
      icon: <Facebook className="h-5 w-5 text-muted-foreground" />,
    },
    {
      href: "#",
      label: "Twitter",
      icon: <Twitter className="h-5 w-5 text-muted-foreground" />,
    },
    {
      href: "#",
      label: "Instagram",
      icon: <Instagram className="h-5 w-5 text-muted-foreground" />,
    },
  ];

  const logo = (
    <>
      <Mountain className="h-8 w-8 text-foreground" />
      <span className="font-bold text-lg tracking-wider uppercase">Mountain</span>
    </>
  );

  const title = (
    <>
      Let's hike and <span className="block font-extrabold">breathe!</span>
    </>
  );

  return (
    <div className="w-full">
      <HeroSection
        logo={logo}
        navLinks={navLinks}
        socialIcons={socialIcons}
        title={title}
        subtitle="Learn more about our packs!"
        formLabel="Subscribe to our newsletter and get special offers!"
        inputPlaceholder="Your Email"
        submitButtonText="SUBMIT"
        imageUrl="https://cdn.21st.dev/assets/mirror/5c/5c94637fd7e76954b66898cf5f8ec3f5a7aec24e1fe09940e5edd56234032a32.jpg"
        imageAlt="Hiker on a mountain trail during sunset"
      />
    </div>
  );
}