A centered marketing hero section with a headline, dual call-to-action buttons, a full-width photo with a floating chat/demo panel overlaid on it, and a logo strip below.
import { Hero14, type Hero14Props } from "@/components/ui/hero-14";
export const values = {
title: "Describe the screen. Ship the block.",
description:
"Turn a plain-language brief into a production-ready block you can copy into your app.",
image:
"https://cdn.21st.dev/assets/mirror/4f/4fe63ac180f95ef8238e0c0bc6e4f3ffb0f2294f16970badb8c79554003a68c0.jpg",
imageAlt: "A pastel wildflower meadow at golden hour",
logos: ["Northwind", "Vertex Labs", "Solstice", "Anchorpoint", "Lumen"],
animation: "subtle",
variant: "standard",
primaryCTA: {
ctaEnabled: true,
text: "Browse Blocks",
link: "",
size: "default",
},
secondaryCTA: {
ctaEnabled: true,
text: "How It Works",
link: "",
variant: "outline",
size: "default",
},
} satisfies Hero14Props;
export default function Hero14Example() {
return <Hero14 {...values} />;
}