Hero with Dashboard Mockup

Heroes 123

About

A left-aligned serif hero section with a media panel showing an image backdrop and a floating dashboard mockup, plus an animated call-to-action.

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

Code

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

Usage.tsx

import { Hero02, type Hero02Props } from '@/components/ui/hero-02'

const values = {
  title: 'Every metric that matters,',
  titleLine2: 'in one clear view.',
  description:
    'Track revenue, users, and activity in real time, with no setup and no spreadsheets.',
  washImage:
    'https://cdn.21st.dev/assets/mirror/18/18129f9729d7e9fd5393c61d23efb785da4320478b3a878a3e6dd084d86a229d.jpg',
  animation: 'subtle',
  primaryCTA: {
    ctaEnabled: true,
    text: 'Start free',
    link: '',
    variant: 'default',
    size: 'default',
  },
} satisfies Hero02Props

export default function Hero02Demo() {
  return <Hero02 {...values} />
}