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.
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>
);
}