Components
Loading preview...
A hero section component with animated gradient background and customizable content. Features - Animated gradient background - Customizable title and subtitle - Configurable action buttons - Responsive design - Motion animations - Optional blur effect
npx shadcn@latest add https://21st.dev/r/ohmfordev/heroimport { Hero } from "@/components/blocks/hero"
function HeroDemo() {
return (
<Hero
title="AI that works for you."
subtitle="Transform your workflow with intelligent automation. Simple, powerful, reliable."
actions={[
{
label: "Try Demo",
href: "#",
variant: "outline"
},
{
label: "Start Free",
href: "#",
variant: "default"
}
]}
titleClassName="text-5xl md:text-6xl font-extrabold"
subtitleClassName="text-lg md:text-xl max-w-[600px]"
actionsClassName="mt-8"
/>
);
}
export { HeroDemo }