Hero (variant="page", centrovaný layout) + LogoMarquee vo footer slote ↓

Testovacia plocha základov

Primitívy, médiá a motion na jednom mieste

Demá komponentov, ktoré nemajú vlastnú sekciu na /sekcie ani /konverzie: Accordion, Tabs, Breadcrumbs, slidery, médiá, počítadlá a stavy formulárov.

LogoMarquee — nekonečný pás (pauza na hover, reduced-motion = statický riadok)

  • Next.js
  • React
  • Tailwind
  • Turborepo
  • TypeScript
  • Vercel

Breadcrumbs · RatingStars · CountryFlag · CounterNumber

4 / 5
CountryFlag (SVG z /flags)

CounterNumber: 0+

CheckList — markery check / cross / dot

  • Prvá položka
  • Druhá položka
  • Tretia položka
  • Nezahrnutá vec
  • Ďalšia nezahrnutá vec
  • Neutrálny bod
  • Ďalší neutrálny bod
  • Malá veľkosť (sm)

Accordion (defaultOpen, allowMultiple) · Tabs (klientský stav)

Odpoveď na prvú otázku. allowMultiple dovoľuje otvoriť viac panelov naraz.

Panel pre interiér — obsah prvej záložky.

FormField — hint vs. error stav (aria-invalid styling)

Použijeme len na odpoveď.

Zadajte platný e-mail.

StatsGrid — layout="start" (ľavé zarovnanie s popisom)

0+Ukážková metrika A

Popisný riadok pod metrikou.

0Ukážková metrika B

Layout start má ikonu v boxe vľavo hore.

24/7Ukážková metrika C

Nečíselná hodnota cez prop text.

BeforeAfterSlider (klávesnica ←/→) · BeforeAfterShowcase

Ukážkový stav poPredPo
Ukážkový stav poPredPo

Ukážkové porovnanie

Showcase wrapper s popisom pod sliderom.

ImageWithSkeleton · Lightbox (klik na dlaždicu)

VideoBackground — poster mód (srcMp4 nezadané → len obrázok)

Obsah nad pozadím — po dodaní srcMp4/srcWebm sa poster povýši na video (rešpektuje reduced-motion).

Reveal — scroll-in animácia (reduced-motion = statické)

Reveal delay=0

Blok sa objaví pri vstupe do viewportu.

Reveal delay=0.1

Blok sa objaví pri vstupe do viewportu.

Reveal delay=0.2

Blok sa objaví pri vstupe do viewportu.

Hero (variant="spotlight" — vysoký domovský hero, min-h 88vh) ↓

Hero variant spotlight

Vysoký domovský hero s trust pätičkou

min-h-[88vh], väčší titulok a footer slot — presne ako na homepage reliableteam.

Trust bod jeden
Trust bod dva
Trust bod tri