Premium dark mode dla aplikacji mobilnej z lekcjami golfa. Stonowana czerń, soczyste zielenie akcentowe i szampanskie złoto dla elementów ekskluzywnych. Wszystkie komponenty zaprojektowane pod jeden mobilny breakpoint (~420 px), z desktopowym wrapperem.
Trzy filary: czerń (ink), zielen marki (brand), szampanskie złoto (gold). Stany: success, warning, danger, info. Wszystko zdefiniowane jako klasy Tailwinda i CSS variables.
Tła i tekst (ink)
Zielen marki (brand)
Zloto szampanskie (gold)
Stany
Gradienty brandowe
Font główny: Manrope (300/400/500/600/700/800). Premium, geometryczny, świetnie radzi sobie na ciemnym tle. Letter-spacing dla wielkich napisów lekko ujemny.
Display · 48-64px · 800
Trenuj z klasą.
H1 · 32-40px · 700
H2 · 24-28px · 700
H3 · 20px · 600
H4 / Eyebrow · 14px · 600 · UPPER + letter-spacing
Lekcja premium
Paragraf · 16px · 400 · line-height 1.6
Golf by Bobiński to miejsce dla golfistów, którzy chcą trenować świadomie i skutecznie. Aplikacja łączy wiedzę trenerską, praktyczne ćwiczenia oraz jasne wskazówki, które pomagają poprawiać każdy element gry — od puttingu, przez krótką grę, aż po strategię na polu.
Small / caption · 12px · 500
Trener: Wojciech Bobiński · Czas trwania: 8:42
Karty lekcji, planow subskrypcyjnych, kategorii. Wariant standard, featured (z glowem) i premium (złota obwódka).
Karta lekcji (standard)
Podstawy zielonej strefy — lekcja 1 z 8
Karta planu (premium — złota obwódka)
Plan 3-miesięczny
229 zl / 3 mies.
76,33 zl miesięcznie · 23% taniej
Karta kategorii (kompakt)
Male etykiety statusu, kategorii lub poziomu. Warianty kolorystyczne, opcjonalna ikona.
Plakietki poziomu
Pełen zestaw pól: tekst, email, hasło, textarea, select, date, file. Klasa .field + .field-input.
Switch (toggle), segmented control, radio i checkbox — wszystkie w spójnym, niestandardowym stylu.
Switch (toggle)
Segmented control
Radio
Checkbox
Default, focus, success, warning, error, disabled — razem z helper-textami.
Adres jest dostępny.
Hasło słabe — dodaj jeszcze 3 znaki.
To nie wygląda na prawidłowy e-mail.
Póle zablokowane do edycji.
Komunikaty osadzone w tresci. Cztery warianty: info, success, warning, error.
Nowy plan treningowy
W tym tygodniu pojawiła sie nowa seria lekcji o grze z bunkra.
Lekcja ukonczona
Świetna robota — przejdź do nastepnej lekcji w serii.
Subskrypcja wygasa za 5 dni
Odnów plan, aby nie stracic dostępu do biblioteki.
Nie udało się odtworzyć wideo
Sprawdź połączenie z internetem i spróbuj ponownie.
Liniowy (z procentem), stepper (numerowany kreator briefu), circular ring.
Linear
Stepper (kreator profilu)
Circular ring
Tygodniowy cel treningowy
3 z 4 sesji wykonane
Chwilowe powiadomienia — sukces, ostrzeżenie, błąd, info. Pojawiają sie u gory ekranu i znikaja po 3,5 s. Wywolaj GBB.toast(msg, type).
Okna potwierdzajace nakładane na tresc. Warianty: danger (destrukcyjna akcja), warning, info, success.
Wysuwany panel boczny — menu nawigacyjne lub panel filtrow. Wsparcie kierunkow: lewo / prawo.
Dymek z dodatkowa trescia po kliknieciu — mini menu, objasnienia, szybkie akcje.
Spinnery, skeleton loadery, shimmer.
Spinner
Skeleton (karta lekcji)
Krótkie podpowiedzi pojawiajace sie po najechaniu (data-tooltip).
Wspólna baza .list-row dla rozmaitych list: lekcje, plany treningowe, pliki, konwersacje.
Lista lekcji
Lista plików / materiałów
Galeria, slider before/after, video player, mikroanimacje.
Video player (placeholder)
Galeria zdjec (siatka)
Mikroanimacje
Empty states, coach marks, karty wyrozne, układy bento.
Empty state
Zapisuj ulubione lekcje, aby wrócić do nich w dowolnym momencie.
Coach mark (onboarding hint)
Witaj w akademii!
Zacznij od lekcji wstępnej w sekcji Putting — tam pokazemy podstawy.
Układ bento (panel statystyk)
Ten tydzień
3/4 sesje
Seria dni
12
Lekcje
28
Inicjaly z gradientem brandowym, opcjonalny status-dot, różne rozmiary.
WB
JK
AK
Biblioteka Lucide. Domyślny rozmiar w UI: w-4 h-4 (16 px) lub w-5 h-5 (20 px). Kolor dziedziczony z tekstu.
Ikony brandowe (akcent)
Klasy Tailwinda rozszerzone o cienie marki: glow zielen i glow złoto.
Focus ring
Bazowa skala: 4 / 8 / 12 / 16 / 24 / 32 / 48 / 64 px. Klasy Tailwinda: space-1 / 2 / 3 / 4 / 6 / 8 / 12 / 16.
Aplikacja jest mobile-only — calosc projektujemy na breakpoint ~420 px. Na desktopie zawartosc jest wycentrowana w mobilnym wrapperze, otoczona neutralnym tlem.
Mobile (główny breakpoint)
320 - 480 px · max-width wrappera: 420 px
Tablet / Desktop
Zawartosc nadal w mobilnym wrapperze, otoczona neutralnym tlem (#F5F5F7)
W /assets/js/main.js dostępne sa wspólne funkcje. Wszystkie pod globalnym obiektem window.GBB.
// Toast
GBB.toast('Lekcja zapisana.', 'success');
// Modal
GBB.openModal('modal-confirm');
GBB.closeModal('modal-confirm');
// Drawer
GBB.openDrawer('mobile-menu');
// Pokażywanie/ukrywanie
GBB.show('#empty-state');
GBB.hide('.success-banner');
GBB.toggle('#filters-panel');
// Walidacja formularzy (atrybuty na input)
// data-validate="required|email|minLength:8"
// data-error-message="Tekst błędu"
// data-success-message="Tekst sukcesu"
// Formularz:
// <form data-validate-form data-success-toast="OK">
// Pasek postępu
<div class="progress-bar" data-value="62"></div>
// Po zmianie:
GBB.refreshProgress();
// Tooltip
<button data-tooltip="Tekst dymka"></button>
// Tab
<div data-tabs>
<button data-tab-trigger="a" aria-selected="true">A</button>
<div data-tab-panel="a">...</div>
</div>
// Akordeon
<div data-accordion="single">
<div data-accordion-item>
<button data-accordion-trigger>Header</button>
<div>Content</div>
</div>
</div>