---
title: "Hero"
type: component
version: "2.2.2"
doc_version: "2.7.3"
status: stable
date: 2026-07-05
library: Frutjam
stack: tailwind_css
compatibility: universal
framework_agnostic: true
runtime_requirement: none
description: "Tailwind CSS Hero section with centered, split, and overlay layouts. Semantic HTML with CTA buttons and media support for high-converting landing pages."
url: https://frutjam.com/tr/components/hero
---

# Hero Component

Hero bileşenleri, sayfanızı veya ürününüzü ilgi çekici görseller ve mesajlarla tanıtan göz alıcı, tam genişlikte bölümler oluşturur. Anlamsal HTML ve esnek düzenlerle oluşturulan kahraman bölümleri, kullanıcı etkileşiminin tonunu belirler. Frutjam kahraman sistemi birden fazla arka planı, kaplamayı ve duyarlı hizalamayı destekler; açılış sayfaları, ürün lansmanları ve öne çıkan duyurular için idealdir.

Yalnızca CSS, JavaScript gerekmez. WCAG AA erişilebilir ve çerçeveden bağımsız — Django, HTMX, Laravel, React ve tüm yığınlarla çalışır.

| Sınıf        | Tip         | Tanım                                         |
| ------------ | ----------- | --------------------------------------------- |
| hero         | Temel       | Ortalanmış içeriğe sahip tam genişlikli bölüm |
| hero-content | Değiştirici | Esnek düzene sahip iç içerik alanı            |
| hero-overlay | Değiştirici | Arka plan resimleri için yarı şeffaf kaplama  |

## Temel Kullanım

Ortalanmış metin içeriği ve harekete geçirici mesaj içeren basit bir kahraman bölümü oluşturun.

## Kaplamalı Kahraman

Daha iyi metin okunabilirliği için kahraman bölümlerine arka plan resimleri içeren bir renk katmanı ekleyin.

```html
<div class="hero min-h-screen bg-base-200">
  <div class="hero-overlay bg-opacity-60"></div>
  <div class="hero-content text-center text-on-neutral">
    <div class="max-w-md">
      <h1 class="mb-5 text-5xl font-bold">Featured Content</h1>
      <p class="mb-5">Combine gradient backgrounds with overlay effects for visual depth.</p>
      <button class="btn btn-primary">Explore</button>
    </div>
  </div>
</div>
```

## Kahraman Düzenleri

Farklı içerik düzenlemeleriyle duyarlı kahraman bölümleri oluşturun.

### Resimli Kahraman (İçerik + Resim)

```html
<div class="hero bg-base-200 min-h-screen">
  <div class="hero-content flex-col lg:flex-row">
    <picture>
      <source media="(max-width: 640px)" srcset="https://cdn.frutjam.com/images/photo-1.jpg?format=webp&width=320&height=240">
      <img src="https://cdn.frutjam.com/images/photo-1.jpg?format=webp&width=480&height=360" alt="Product" class="max-w-sm rounded-lg shadow-2xl" loading="lazy" />
    </picture>
    <div>
      <h1 class="text-5xl font-bold">Amazing Product</h1>
      <p class="py-6">Display product images alongside descriptive content for engaging hero sections on larger screens.</p>
      <button class="btn btn-primary">Learn More</button>
    </div>
  </div>
</div>
```

### Görüntülü Kahraman (Ters)

```html
<div class="hero bg-base-200 min-h-screen">
  <div class="hero-content flex-col lg:flex-row-reverse">
    <picture>
      <source media="(max-width: 640px)" srcset="https://cdn.frutjam.com/images/photo-2.jpg?format=webp&width=320&height=240">
      <img src="https://cdn.frutjam.com/images/photo-2.jpg?format=webp&width=480&height=360" alt="Showcase" class="max-w-sm rounded-lg shadow-2xl" loading="lazy" />
    </picture>
    <div>
      <h1 class="text-5xl font-bold">Showcase</h1>
      <p class="py-6">Reverse layout places image on the right side for alternative visual hierarchy.</p>
      <button class="btn btn-primary">View Details</button>
    </div>
  </div>
</div>
```

## Formlu Kahraman

Dönüşüm odaklı açılış sayfaları için kahraman bölümlerini kayıt veya iletişim formlarıyla birleştirin.

```html
<div class="hero bg-base-200 min-h-screen">
  <div class="hero-content flex-col lg:flex-row-reverse">
    <div class="text-center lg:text-left max-w-md">
      <h1 class="text-5xl font-bold">Subscribe Now</h1>
      <p class="py-6">Join our community and get updates on the latest features and news.</p>
    </div>
    <div class="card bg-base-100 shadow-xl shrink-0 w-full max-w-sm">
      <div class="card-content">
        <h2 class="card-title">Get Started</h2>
        <input type="email" placeholder="Enter your email" class="input input-outline w-full mb-4">
        <button class="btn btn-primary w-full">Subscribe</button>
      </div>
    </div>
  </div>
</div>
```

## Kahraman Duyarlı İstifleme

Kahraman bölümleri mobil cihazlarda otomatik olarak yığılır ve daha büyük ekranlarda yatay olarak düzenlenir.

```html
<div class="hero bg-base-200 min-h-screen">
  <div class="hero-content flex-col">
    <div class="text-center max-w-lg">
      <h1 class="text-4xl md:text-5xl font-bold">Responsive Hero</h1>
      <p class="py-6">This layout automatically adapts to different screen sizes for optimal viewing on all devices.</p>
      <button class="btn btn-primary">Get Started</button>
      <button class="btn btn-ghost">Learn More</button>
    </div>
  </div>
</div>
```