Sandbox

Design System

Production section components rendered with mock data. Edit fixtures in mocks/ to iterate on visuals without touching PayloadCMS.

Full page demos

ATOferta marketingowa — Akademia Triathlonu

22-stronicowy landing dla partnerów marketingowych, zmontowany z dedykowanych mock-only komponentów (hero, brand showcase, pricing, stats, case study, final CTA). Linkuje do PDF.

Hero

Strona główna

Animated carousel + sidebar posts + today's events.

#hero

Featured Post

shared (home, kategorie)

Single post with large image and label.

#featured-post

Post Grid

shared (home, kategorie, autor)

3-column grid of post cards.

#post-grid

Category — Spotlight

Strona kategorii

Variant 1: featured post + sidebar list.

#category-spotlight

Category — Grid

Strona kategorii

Variant 2: hero card + 4-column grid.

#category-grid

Category — Magazine

Strona kategorii

Variant 3: magazine layout.

#category-magazine

Ad — Banner

shared (cały serwis)

Full-width sponsor banner (size: xl).

#ad-banner

Ad — Sponsored

shared (cały serwis)

Sponsored editorial card with image + description.

#ad-sponsored
Materiał sponsorowany · BetaRun
Trophy and race medal

Jak dobrać buty trailowe do swojego stylu biegania

Praktyczny przewodnik po cechach, na które warto zwrócić uwagę przy zakupie butów do biegów górskich.

Ad — Partners Strip

shared (cały serwis)

Row of partner logos.

#ad-partners-strip
Nasi partnerzy
Wspierają nasze działania

Ad — Patronite

shared (cały serwis)

Support call-to-action with avatar.

#ad-patronite
Patron avatar

Wesprzyj nas na Patronite

Niezależne dziennikarstwo biegowe wymaga wsparcia. Dołącz do grona patronów i pomóż nam tworzyć więcej wartościowych treści.

Zostań patronem

Ad — Partner Badge

shared (cały serwis)

Compact 'powered by' partner badge.

#ad-partner-badge

Form Block

shared (kontakt, klub-zapis)

Form-builder placeholder with intro content.

#form-block

Masz pytanie? Zostaw wiadomość — odpowiadamy w 48 godzin.

Skontaktuj się z nami

Form — All Field Types

reference (sections/shared/form/*)

Render wszystkich pól FormBuilder z sections/shared/form/* w jednym formularzu — text, email, phone, number, select, country, state, message, textarea, checkbox. Wrapper bg-white border border-neutral-200 jak w contact-section.

#form-fields

Wszystkie typy pól formularza

Wiadomość pomocnicza w środku formularza (blockType: message).

Example Block

dev / scaffold

Reference block scaffold for new section types.

#example-block

Przykładowy blok demonstracyjny

Ten blok służy jako szablon dla nowych sekcji w PayloadCMS — pokazuje jak prosto można rozszerzyć layout o własne komponenty.

Page Hero

shared (Patronat, Klub, Zniżki listing)

Hero dla stron non-blog (Patronat, Klub, listing Zniżek). Wybierz jeden wariant.

#page-hero

Patronat AT

Wesprzyj rozwój Akademii Triathlonu

Twoje wsparcie pozwala nam organizować zawody, prowadzić kluby i pomagać kolejnym pokoleniom triathlonistów rozwijać pasję.

Zostań patronem

Athlete Hero

Profil zawodnika

Hero dla profilu zawodnika — foto, imię, klub, opis, linki social.

#athlete-hero

AT Warszawa

Anna Kowalska

Zawodniczka triathlonu długodystansowego, mama dwójki dzieci i trenerka. Łączę 15 godzin treningu tygodniowo z pracą i rodziną — pokazuję, że pasja jest dla każdego.

Anna Kowalska — portret zawodniczki

Content Block

shared (Patronat, Klub, Zawodnik, Partner, Event)

Uniwersalny blok: zdjęcie + tekst (dla Patronat / Klub / Athlete).

#content-block
Trener prowadzący zajęcia z triathlonistami

O nas

Triathlon to coś więcej niż trening

Akademia Triathlonu to wspólnota ludzi, dla których triathlon jest czymś więcej niż dyscypliną sportu — to styl życia, sposób na poznawanie siebie i innych.

Od ponad 10 lat organizujemy zawody, prowadzimy kluby treningowe i wspieramy zawodników na każdym etapie rozwoju. Dziś jesteśmy największą w Polsce społecznością miłośników triathlonu.

Poznaj historię

Feature List

Strona Patronat (główne)

Lista benefitów / opcji (główny komponent strony Patronat).

#feature-list

Co daje patronat

Patronat AT — sześć obszarów wsparcia

Każda składka przekłada się na konkretne działania w każdym z poniższych obszarów.

Wsparcie dla zawodników

Wybrani zawodnicy AT otrzymują finansowe wsparcie startów, sprzętu i obozów treningowych dzięki naszym patronom.

Organizacja zawodów

Każdego roku przygotowujemy kilka cykli zawodów triathlonowych w Polsce — od dystansu Sprint po Iron.

Społeczność klubów

Prowadzimy ponad 20 klubów AT w Polsce, gdzie pasjonaci spotykają się na regularnych treningach.

Edukacja i rozwój

Webinary, podcasty, materiały szkoleniowe i konferencje przygotowane razem z najlepszymi trenerami.

Media i treści

Codziennie publikujemy artykuły, wywiady i analizy z polskiego i światowego triathlonu.

Inicjatywy charytatywne

Wspieramy programy „Triathlon dla każdego" — wprowadzamy dzieci z domów dziecka do sportu.

CTA Section

shared (Patronat, Klub, Event)

Call-to-action: Patronat CTA, zapis do klubu, rejestracja na zawody.

#cta-section

Dołącz do nas

Zostań patronem AT już dziś

Wybierz dowolną kwotę miesięczną — od 10 zł — i pomóż nam dalej rozwijać polski triathlon.

Video Section

Strona klubu

Sekcja z wideo (np. dla strony klubu).

#video-section

Klub AT Warszawa

Zobacz, jak żyje klub

Krótki film o naszej drodze, treningach i społeczności.

Location

Strona klubu

Lokalizacja klubu — mapa, adres, godziny otwarcia, kontakt.

#location-section

Znajdź nas

Klub AT Warszawa

AT Warszawa — siedziba klubu

ul. Sportowa 1
00-001
Warszawa
Wyznacz trasę

Support — Athlete

Profil zawodnika

Sekcja wsparcia zawodnika — social media + patronat.

#support-section

Wesprzyj zawodniczkę

Pomagaj Annie iść dalej

Obserwuj na social mediach i wesprzyj patronatem — każda forma wsparcia ma znaczenie.

Logo Patronite

Wesprzyj na Patronite

Stań się częścią drogi Anny — patronat finansuje starty, sprzęt i sesje fizjoterapii. Każda kwota pomaga.

Zostań patronem

Discount Card

Strona zniżek (lista + szczegóły)

Karta zniżki (port z PHP plugin). „Kopiuj kod" działa po kliknięciu. Code-strip pokazuje obraz tła po hover.

#discount-card

Partner Logo Grid

shared (Event sponsorzy, Patronat strategicznych)

Siatka logotypów partnerów (port z PHP plugin).

#partner-logo-grid

Partnerzy strategiczni

Razem tworzymy AT

Marki, które wspierają nas od wielu lat — oficjalni partnerzy strategiczni Akademii.

Decathlon logo
Sportstech logo
EnergiaSport logo
TriBike logo
Aquasport logo
RunGear logo
BikeStore logo
NutriPro logo

Event Hero

Szczegóły zawodów

Hero szczegółów zawodów — fakty (data, dystanse, organizator), badge statusu, cover.

#event-hero
Nadchodzące

AT Triathlon Warszawa 2026

Główny start sezonu Akademii Triathlonu — najszybsza trasa rowerowa w stolicy, pływanie w Wiśle Szablakowej i bieg przez Stadion Narodowy.

Data
14 czerwca 2026
Lokalizacja
Warszawa, Stadion Narodowy
Dyscyplina
Triathlon
Cykl
AT Series
Organizator
Akademia Triathlonu
Dystanse
Sprint · Olimpijski · Half
Zawodnicy podczas startu AT Triathlon Warszawa

Distance List

Szczegóły zawodów

Context block — renderuje dystanse hosta (event.generalSettings.distances) jako chipy.

#distance-list

Dystanse

Wybierz swój dystans

Każdy dystans ma osobne klasyfikacje wiekowe i nagrody.

SuperSprintSprintOlimpijskiHalf 70.3Ironman 140.6

Calendar

Listing zawodów (/events)

Kalendarz wydarzeń — siatka miesięczna z chipami oraz wariant 'najbliższy start + lista'. Renderowany w listingu /events.

#calendar

Kalendarz

Sezon 2026

Wszystkie zawody Akademii Triathlonu w jednym miejscu — kliknij datę, aby zobaczyć szczegóły.

10 wydarzeń
21 września 2025LublinTriathlon
SprintOlimpijski
14 czerwca 2026WarszawaTriathlonAT Series
SprintOlimpijskiHalf 70.3
14 czerwca 2026WarszawaTriathlon
Sprint
21 czerwca 2026KrakówTriathlonAT Series
SprintOlimpijski
28 czerwca 2026WarszawaTriathlon
5 lipca 2026GdyniaTriathlonAT Series
SprintOlimpijskiHalf 70.3Ironman 140.6
19 lipca 2026PoznańTriathlon
SprintOlimpijski
2 sierpnia 2026WrocławTriathlon
SprintOlimpijski
23 sierpnia 2026KatowiceTriathlon
OlimpijskiHalf 70.3
13 września 2026OlsztynTriathlonAT Series
OlimpijskiHalf 70.3
Na stronie:
110 z 10

Athlete Card (primitive)

shared (Katalog zawodników, sidebary, related)

Karta zawodnika — używana w katalogu, sidebarach, related sections.

#athlete-card

Athlete Catalog

Katalog zawodników

Listing zawodników z filtrami — pełna sekcja katalogu.

#athlete-catalog

Club Card (primitive)

shared (Katalog klubów, sidebary, mapy)

Karta klubu — używana w katalogu klubów, mapach, sidebarach.

#club-card

Club Catalog

Katalog klubów

Listing klubów — grid, mapa, grupowanie po mieście.

#club-catalog

Partner Hero

Podstrona partnera

Hero podstrony partnera — branding + opis + opcjonalny featured offer.

#partner-hero
Decathlon logo
Partner strategiczny

Decathlon

Sport Pour Tous

Decathlon to oficjalny partner sprzętowy Akademii Triathlonu od 2020 roku. Wspólnie organizujemy zawody, treningi pokazowe i programy "Pierwszy Triathlon" dla debiutantów.

Odwiedź stronę partnera →

Partner Slot

shared (nav, sidebar, post, kalendarz, footer)

Reusable moduł brandowany do osadzania w nav/sidebar/postach/footer.

#partner-slot
Partner sezonu
Decathlon logo

Decathlon — oficjalny sprzęt AT

Skorzystaj z 15% zniżki dla społeczności Akademii Triathlonu.

Skorzystaj z rabatu

Author Header

shared (Profil autora, byline w postach)

Nagłówek profilu autora + byline w artykułach.

#author-header
Marek Krawczyk

Trener i redaktor AT

Marek Krawczyk

Trener triathlonu z 12-letnim doświadczeniem. Współpracował z medalistami MŚ i prowadzi rubrykę „Z perspektywy trenera" na portalu Akademii Triathlonu.

87 publikacji

Contact Section

shared (Strona kontaktu, kalendarz)

Strona kontaktu — formularz z FormBuilder + alternatywne kanały. Compact używany na innych stronach (np. kalendarz).

#contact-section

Skontaktuj się z nami

Napisz do nas

Współpraca, patronaty, konsultacje IW — wybierz formę kontaktu po prawej.

End of design system preview · 37 sections