Hero 12

Heroes 56

About

A full-bleed image hero section with an oversized title, an optional established/label tag, and a rounded pill call-to-action button anchored to the bottom corner.

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

Code

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

Usage.tsx

import Hero12, { type Hero12Props } from "@/components/ui/hero-12";

const values: Hero12Props = {
  title: "Aspen Ridge",
  established: "Est. 2019",
  description:
    "A secluded mountain retreat set among the aspens, with floor-to-ceiling windows framing uninterrupted views of the Rockies. Wake to still water, quiet forest, and nothing on the schedule.",
  backgroundImage:
    "https://cdn.21st.dev/assets/mirror/8d/8d2ed5965f4ca681970c6a9ff04f55433f12d0838a2dcdb02e6f98c13e9917a2.jpg",
  backgroundAlt: "A calm mountain lake at dusk beneath a forested ridge",
  animation: "subtle",
  primaryCTA: {
    ctaEnabled: true,
    text: "Reserve a Stay",
    link: "",
    size: "default",
  },
};

export default function Hero12Demo() {
  return (
    <div className="flex min-h-screen w-full max-w-full overflow-hidden p-0">
      <Hero12 {...values} />
    </div>
  );
}