Skip to main content
Frutjam logo Frutjam
v2.2.2
Theme

Komponen Pahlawan

Terakhir diperbarui:

Bagian pahlawan CSS Tailwind khusus CSS untuk laman landas. Tata letak lebar penuh dengan judul, deskripsi, dan CTA di tengah. WCAG AA dapat diakses, bekerja dengan Django, HTMX, Laravel, React, dan tumpukan apa pun.

Komponen pahlawan membuat bagian yang menarik dan lebar yang memperkenalkan halaman atau produk Anda dengan visual dan pesan yang menarik. Dibangun dengan HTML semantik dan tata letak yang fleksibel, bagian pahlawan mengatur suasana untuk keterlibatan pengguna. Sistem pahlawan Frutjam mendukung berbagai latar belakang, overlay, dan penyelarasan responsif—ideal untuk halaman arahan, peluncuran produk, dan pengumuman penting.

Hanya CSS, tidak diperlukan JavaScript. WCAG AA dapat diakses dan tidak memiliki kerangka kerja — bekerja dengan Django, HTMX, Laravel, React, dan tumpukan apa pun.

Kelas Jenis Keterangan
heroBasisBagian lebar penuh dengan konten terpusat
hero-contentPengubahArea konten bagian dalam dengan tata letak fleksibel
hero-overlayPengubahHamparan semi-transparan untuk gambar latar belakang

Penggunaan Dasar

Buat bagian pahlawan sederhana dengan konten teks terpusat dan ajakan bertindak.

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>

Pahlawan dengan Hamparan

Tambahkan hamparan warna ke bagian pahlawan dengan gambar latar belakang untuk meningkatkan keterbacaan teks.

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>

Tata Letak Pahlawan

Buat bagian pahlawan responsif dengan pengaturan konten berbeda.

Pahlawan dengan Gambar (Konten + Gambar)

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>

Pahlawan dengan Gambar (Terbalik)

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>

Pahlawan dengan Bentuk

Gabungkan bagian pahlawan dengan formulir pendaftaran atau kontak untuk halaman arahan yang berfokus pada konversi.

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>

Stack Hero Responsif

Bagian pahlawan secara otomatis ditumpuk di perangkat seluler dan disusun secara horizontal di layar yang lebih besar.

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>

Using Claude Code, Cursor, or another AI editor?

Cherry MCP memberi editor AI Anda nama dan struktur kelas Pahlawan yang tepat sesuai permintaan. Tidak ada lagi kelas berhalusinasi.

Coba Cherry MCP