Hero 03

Heroes 92

About

A centered hero section with a serif headline, dual call-to-action buttons, and a portrait image that fades into the page below the copy.

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

Code

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

Usage.tsx

import { Hero03 } from '@/components/ui/hero-03'

export default function Hero03Demo() {
  return (
    <Hero03
      title="Ideas worth sharing with the world."
      description="Turn rough notes into polished stories. Write, refine, and publish from one calm workspace built for focus."
      portraitImage="https://cdn.21st.dev/assets/mirror/83/839c9582581e0c20b8fbd2ad66e9c87c31206f709d28534d411674d10c913757.jpg"
      portraitAlt="Alt"
      animation="subtle"
      primaryCTA={{ ctaEnabled: true, text: 'Get started', link: '', variant: 'default', size: 'default' }}
      secondaryCTA={{ ctaEnabled: true, text: 'Learn more', link: '', variant: 'link' }}
    />
  )
}