Przejdź do głównej treści
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.

Komponenty bohatera tworzą przyciągające wzrok sekcje o pełnej szerokości, które przedstawiają Twoją stronę lub produkt za pomocą atrakcyjnych efektów wizualnych i komunikatów. Sekcje główne, zbudowane w oparciu o semantyczny kod HTML i elastyczne układy, nadają ton zaangażowaniu użytkowników. System bohater Frutjam obsługuje wiele teł, nakładek i responsywnych dopasowań — idealnie nadaje się do stron docelowych, premier produktów i widocznych ogłoszeń.

Tylko CSS, nie wymaga JavaScript. Dostępny w WCAG AA i niezależny od frameworka — współpracuje z Django, HTMX, Laravel, React i dowolnym stosem.

Klasa Typ Opis
heroOpieraćSekcja o pełnej szerokości z wyśrodkowaną zawartością
hero-contentModyfikatorWewnętrzny obszar treści z elastycznym układem
hero-overlayModyfikatorPółprzezroczysta nakładka na obrazy tła

Podstawowe użycie

Utwórz prostą sekcję bohatera z wyśrodkowaną treścią tekstową i wezwaniem do działania.

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>

Bohater z nakładką

Dodaj kolorową nakładkę do sekcji głównych z obrazami tła, aby poprawić czytelność tekstu.

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>

Układy bohaterów

Twórz responsywne sekcje bohaterów z różnymi aranżacjami treści.

Bohater z obrazem (treść + obraz)

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>

Bohater z obrazem (rewers)

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>

Bohater z formą

Połącz sekcje główne z formularzami rejestracyjnymi lub kontaktowymi, aby uzyskać strony docelowe nastawione na konwersję.

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>

Responsywne układanie bohaterów

Sekcje bohaterów automatycznie układają się w stosy na urządzeniach mobilnych i układają poziomo na większych ekranach.

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>