Podgląd komponentu

Fullscreen hero slider wyświetlający się na 100% szerokości i wysokości ekranu. Powyżej znajduje się pełny podgląd z navbarem negative — przewiń w górę aby zobaczyć.

Funkcje: fade in/out między slajdami, zoom-in na obrazach, autoplay video (muted), animowany content wchodzący od góry strony, pager na dole.

Użycie

@@include('hero-slider.html')

Klasy CSS

Klasa	Opis
.hero-slider	Wrapper sekcji (100vh)
.hero-slider__slide	Pojedynczy slajd (fade transition)
.hero-slider__bg-image	Obraz tła (z efektem zoom-in)
.hero-slider__bg-video	Video tła (autoplay, muted)
.hero-slider__content	Kontener na treść slajdu
.hero-slider__content-item	Element contentu (animowany staggered)
.hero-slider__title	Tytuł (44px desktop / 26px mobile)
.hero-slider__divider	Pionowa kreska między tytułami
.hero-slider__winpoints	Badge WinPoints (opcjonalny)
.hero-slider__pager	Pager (bar indicators)
.hero-slider__pager-item	Pojedynczy indicator pagera

Stany slajdów

Klasa	Opis
.is-active	Aktywny slajd (opacity: 1)
.is-animated	Content animowany (slide-down od góry)

Typ tła

Atrybut	Wartość	Opis
data-slide-type	"image"	Obraz z efektem zoom-in
data-slide-type	"video"	Video autoplay (bez dźwięku)

JavaScript

Moduł: src/js/modules/hero-slider.js

• Auto-advance co 7s
• Fade transitions (opacity, CSS)
• Staggered content animation (od CTA po pierwszy tytuł)
• Video pause/play przy przejściach
• Touch/swipe support
• Pauza na hover (desktop)