Real Estate Search Hero

Heroes 187

About

A centered hero section with a rounded search bar, a masked architecture image that fades into the page, and a split closing statement.

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

Code

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

Usage.tsx

import { Hero09 } from '@/components/ui/hero-09'

export default function Default() {
  return (
    <Hero09
      title="Find the perfect"
      titleLine2="block for your app."
      description="Production-ready UI blocks built with React, Tailwind, and shadcn."
      searchPlaceholder="Search blocks and components"
      searchButtonText="Search"
      heroImage="https://cdn.21st.dev/assets/mirror/8d/8d6b8927fc5fd13f2c538f74a7e6ee2ad417f81122087ce36345c92a73400b33.jpg"
      heroAlt="Modern minimalist house with clean architecture"
      bottomTitle="Blocks"
      bottomTitleLine2="crafted with purpose."
      bottomText="A curated library where clean design, accessibility, and copy-paste code come together."
      animation="subtle"
    />
  )
}