Components
Loading preview...
A modern, animated hero section with mockup display and gradient effects inspired by Launch UI. It features a large headline, description, dual CTAs, and a floating mockup image. Features: • Responsive design with a mobile-first approach • Staggered fade-in animations • Gradient text and button effects • Floating glow background • Dark mode support • Customizable CTAs • Optimized image loading
npx shadcn@latest add https://21st.dev/r/serafimcloud/hero-with-mockupimport { HeroWithMockup } from "@/components/blocks/hero-with-mockup"
export function HeroDemo() {
return (
<HeroWithMockup
title="Build AI-powered apps in minutes, not months"
description="Create sophisticated AI applications with our intuitive platform. No ML expertise required."
primaryCta={{
text: "Start Building",
href: "/signup",
}}
secondaryCta={{
text: "View on GitHub",
href: "https://github.com/your-ai-platform",
}}
mockupImage={{
alt: "AI Platform Dashboard",
width: 1248,
height: 765,
src: "https://www.launchuicomponents.com/app-light.png"
}}
/>
)
}