# daisyUI Documentation - Hero Component

Hero is a component for displaying a large box or image with a title and description.

## Classes and Usage

### Core Classes:
- **hero** - The main hero component
- **hero-content** - Content container inside hero
- **hero-overlay** - Overlay for hero background
- **hero-center** - Centers content in hero
- **hero-start** - Aligns content to start
- **hero-end** - Aligns content to end
- **hero-text** - Text content styling
- **hero-image** - Image container styling

## Examples

### Basic Hero

```html
<div class="hero bg-base-200">
  <div class="hero-content text-center">
    <div class="max-w-md">
      <h1 class="text-5xl font-bold">Welcome to daisyUI!</h1>
      <p class="py-6">Providing useful component class names to help you write less code and build faster.</p>
      <button class="btn btn-primary">Get Started</button>
    </div>
  </div>
</div>
```

### Hero with Image

```html
<div class="hero bg-base-200">
  <div class="hero-content flex-col lg:flex-row">
    <div class="lg:w-1/2">
      <img src="https://img.daisyui.com/images/stock/photo-1635805737707-57588507996c.webp" class="rounded-lg shadow-2xl" />
    </div>
    <div class="lg:w-1/2">
      <h1 class="text-5xl font-bold">Your Title Here!</h1>
      <p class="py-6">With the Hero component, you can easily create a large banner area with text and images.</p>
      <button class="btn btn-primary">Get Started</button>
    </div>
  </div>
</div>
```

### Hero with Overlay

```html
<div class="hero bg-base-200">
  <div class="hero-overlay bg-opacity-60"></div>
  <div class="hero-content text-center text-neutral-content">
    <div class="max-w-md">
      <h1 class="text-5xl font-bold">Welcome!</h1>
      <p class="py-6">This hero has an overlay to make the text more readable.</p>
      <button class="btn btn-primary">Get Started</button>
    </div>
  </div>
</div>
```

### Hero with Background Image

```html
<div class="hero bg-[url('https://img.daisyui.com/images/stock/photo-1635805737707-57588507996c.webp')] bg-cover">
  <div class="hero-overlay bg-base-200 bg-opacity-60"></div>
  <div class="hero-content text-center text-neutral-content">
    <div class="max-w-md">
      <h1 class="text-5xl font-bold">Background Image Hero</h1>
      <p class="py-6">This hero uses a background image with overlay.</p>
      <button class="btn btn-primary">Get Started</button>
    </div>
  </div>
</div>
```

## Features

- Large banner area for showcasing content
- Responsive design that works on all screen sizes
- Can include images and text
- Supports overlays for better readability
- Flexible layout options (flex-col, lg:flex-row)
- Customizable with Tailwind classes

This component is useful for creating attention-grabbing introductory sections on websites.