Hero with Mockup

Heroes 500

About

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

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

Code

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

Usage.tsx

import { 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://cdn.21st.dev/assets/mirror/86/867a175524a0966eb144327b962159fa1ac4e1822b0cd857759b754306f3b0d4.png"
      }}
    />
  )
}