Editorial Image Hero

Heroes 387

About

A hero section with a full-width landscape image above and a top-aligned tagline paired with a right-aligned serif headline, description, and call-to-action buttons below.

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

Code

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

Usage.tsx

import { Hero07 } from '@/components/ui/hero-07'

export default function Hero07Demo() {
  return (
    <Hero07
      tagline="Architecture, interiors, and spaces built to last"
      title="Design-led homes for people who care how a place feels."
      description="From first sketch to final detail, we shape residential projects that balance light, material, and daily life. Thoughtful planning, refined finishes, and a calm build process."
      landscapeImage="https://cdn.21st.dev/assets/mirror/18/18129f9729d7e9fd5393c61d23efb785da4320478b3a878a3e6dd084d86a229d.jpg"
      landscapeAlt="Modern residential architecture"
      animation="subtle"
      primaryCTA={{ ctaEnabled: false, text: 'View projects', link: '', variant: 'default' }}
      secondaryCTA={{ ctaEnabled: false, text: 'Book a consultation', link: '', variant: 'link' }}
    />
  )
}