Ana içeriğe atla
Frutjam logo Frutjam
v2.2.2
Theme

Hero Component

CSS-only Tailwind CSS hero section for landing pages. Full-width layout with centered heading, description, and CTA. WCAG AA accessible, works with Django, HTMX, Laravel, React, and any stack.

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
heroTemelOrtalanmış içeriğe sahip tam genişlikli bölüm
hero-contentDeğiştiriciEsnek düzene sahip iç içerik alanı
hero-overlayDeğiştiriciArka 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.

Hello there

Introduce your product or service with compelling messaging that resonates with your audience.

1
2
3
4
5
6
7
8
9
<div class="hero min-h-screen bg-base-200">
  <div class="hero-content text-center">
    <div class="max-w-md">
      <h1 class="text-5xl font-bold">Hello there</h1>
      <p class="py-6">Introduce your product or service with compelling messaging that resonates with your audience.</p>
      <button class="btn btn-primary">Get Started</button>
    </div>
  </div>
</div>

1
2
3
4
5
6
7
8
9
<div className="hero min-h-screen bg-base-200">
  <div className="hero-content text-center">
    <div className="max-w-md">
      <h1 className="text-5xl font-bold">Hello there</h1>
      <p className="py-6">Introduce your product or service with compelling messaging that resonates with your audience.</p>
      <button className="btn btn-primary">Get Started</button>
    </div>
  </div>
</div>

Kaplamalı Kahraman

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

Featured Content

Combine gradient backgrounds with overlay effects for visual depth.

html 
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
<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)

Product

Amazing Product

Display product images alongside descriptive content for engaging hero sections on larger screens.

html 
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
<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)

Showcase

Showcase

Reverse layout places image on the right side for alternative visual hierarchy.

html 
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
<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.

Subscribe Now

Join our community and get updates on the latest features and news.

Get Started

html 
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
<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.

Responsive Hero

This layout automatically adapts to different screen sizes for optimal viewing on all devices.

html 
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
<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>