# Brief dla Claude Design — akademia.3z.pl **Zadanie:** Zaprojektuj nowoczesny, profesjonalny e-commerce sprzedający **stacjonarne szkolenia z implantologii stomatologicznej**. W tej iteracji projektujemy **dwa ekrany: Home + Katalog szkoleń** (desktop + mobile). **Kontekst marki:** Akademia jest częścią ekosystemu 3Z (`https://3z.pl`) — dostawcy systemu implantologicznego ICX i protetyki OpenLab3Z. Branding dziedziczymy z 3z.pl (tokeny poniżej). Odbiorca: lekarze dentyści i implantolodzy (B2B, wysoki próg profesjonalizmu i zaufania). **Ton:** professional, energy medium. Klinicznie czysto, premium, wiarygodnie — nie „marketingowo krzykliwie". --- ## 1. Brand tokens (obowiązkowe — z 3z.pl) ```txt COLOR SCHEME: light COLORS primary #AC2255 (magenta/wine — główny akcent, CTA) secondary #921D48 (ciemniejszy — hover / tekst-akcent na białym) accent #AC2255 background #FFFFFF textPrimary #4E4C4C (główny tekst) link #6C757D (linki / tekst drugorzędny) TYPOGRAPHY font: Montserrat (nagłówki i tekst), fallback: sans-serif h1 80px h2 40px body 18px SPACING baseUnit 4px → skala: 4 / 8 / 12 / 16 / 24 / 32 / 48 / 64 / 96 borderRadius (kontenery/karty) 4px BUTTONS (flat, bez cienia) primary: bg #AC2255 / text #FFFFFF / border #AC2255 / radius 2px secondary: bg #FFFFFF / text #4E4C4C / border #AC2255 / radius 2px LAYOUT siatka: Bootstrap 12-col, container max ~1280px, gutter 24px breakpoints: 576 / 768 / 992 / 1200 / 1400 ASSETS logo: https://3z.pl/wp-content/themes/blankslate-child/assets/img/public/3z-logo.png (alt: "3Z logo", href: /) favicon: https://3z.pl/wp-content/themes/blankslate-child/assets/img/public/favicon/favicon.ico facebook: https://www.facebook.com/3Z.ICX.Polska ``` ### Zasady użycia - **Biel dominuje.** Magenta `#AC2255` wyłącznie jako akcent: CTA, aktywne stany, badge, mikro-detale. Nie zalewać nim dużych powierzchni (co najwyżej jeden pas / hero-akcent). - **Hierarchia wagi Montserrat:** h1 800/700, h2 700, h3 600, body 400, label/eyebrow 600 uppercase z letter-spacing. - **Skala h1 80px** dotyczy desktop hero; skaluj płynnie w dół (mobile ~40–48px). Zdefiniuj responsywny type scale. - **Border-radius:** przyciski 2px (ostro, klinicznie), karty/kontenery/obrazy 4px. Zero pill-shape. - **Cienie:** przyciski płaskie (bez cienia — zgodnie z tokenami). Karty mogą mieć subtelny, miękki cień dla głębi (elevation-1: `0 2px 8px rgba(0,0,0,.06)`), bez ciężkich dropshadowów. - **Kontrast (WCAG AA):** tekst `#4E4C4C` na bieli — OK. Do tekstu-akcentu i linków wymagających kontrastu używaj `#921D48`, nie `#AC2255`. Biały tekst zawsze na pełnym `#AC2255`/`#921D48`, nigdy na jasnym tle. --- ## 2. Kierunek wizualny Estetyka: **medyczny premium / editorial**. Dużo światła (whitespace), wyraźna typografia, precyzyjna siatka, zdjęcia realne (sala szkoleniowa, hands-on na modelach, mikroskop, planowanie cyfrowe) zamiast clipartów. Akcent magenta buduje tożsamość marki i prowadzi wzrok do konwersji. Referencyjny nastrój: strona edukacyjna wysokiej klasy dla profesjonalistów medycznych — wiarygodność ośrodka szkoleniowego + lekkość nowoczesnego sklepu z „event-produktami". **Unikaj:** stockowego „corporate", tęczowych gradientów, clipartu zębów, przeładowania, wyglądu generycznego szablonu, nadmiaru magenty, glassmorphizmu. --- ## 3. Model produktu = szkolenie stacjonarne Każde szkolenie to wydarzenie z terminem. Karta/dane muszą komunikować: - **Tytuł** + krótki lead - **Badge poziomu:** Podstawowy / Zaawansowany / Mistrzowski (kolory-warianty akcentu) - **Typ:** Warsztat hands-on / Wykład / Live surgery / Kurs certyfikowany - **Prowadzący (KOL):** miniatura + imię i nazwisko + tytuł - **Termin:** data (lub kilka terminów) — najbliższy wyróżniony - **Lokalizacja:** miasto + placówka - **Dostępność miejsc:** licznik lub status („Wolne miejsca", „Ostatnie miejsca", „Lista rezerwowa") — mikro-driver pilności, subtelnie - **Czas trwania:** np. „1 dzień / 8h" - **Cena:** netto, z dopiskiem „+ VAT" - **Punkty edukacyjne** + **certyfikat** (ikony/etykiety zaufania) - **CTA:** „Zobacz szczegóły" (secondary) / „Zapisz się" (primary) --- ## 4. HOME — sekcje (kolejność) 1. **Header (sticky):** logo 3Z (link do /), menu poziome — `Szkolenia` · `Ścieżki` · `Prowadzący` · `O Akademii` · `Kontakt`, ikona koszyka (z licznikiem), przycisk `Zaloguj / Moje konto`. Po scrollu header kondensuje wysokość. Mobile: hamburger → panel wysuwany. 2. **Hero:** eyebrow (np. „Akademia implantologii 3Z"), h1 (80px, mocny przekaz — np. „Rozwijaj praktykę implantologiczną z ekspertami"), lead 18px, CTA primary `Zobacz szkolenia` + secondary `Poznaj ścieżki szkoleniowe`. Wizual po prawej lub full-bleg z overlayem (patrz plik grafik: `hero`). Opcjonalny szybki filtr (poziom / miasto / termin) jako pasek pod hero. 3. **Pasek zaufania (stats):** 3–4 metryki: przeszkoleni lekarze, lata doświadczenia, liczba edycji szkoleń, ocena. Liczby duże, Montserrat 700, akcent na wartościach. 4. **Najbliższe terminy:** 3–4 karty szkoleń z nadchodzącymi datami (komponent karty z sekcji 6), link „Zobacz wszystkie →" do katalogu. 5. **Ścieżki szkoleniowe (poziomy):** 3 kafle — Podstawowy / Zaawansowany / Mistrzowski — z krótkim opisem grupy docelowej i CTA. 6. **Dlaczego Akademia 3Z (USP):** 4 wartości z ikonami line-art: praktyka hands-on, eksperci-KOL, system ICX / OpenLab3Z, certyfikat + punkty edukacyjne. 7. **Prowadzący (eksperci):** karuzela/siatka 3–4 sylwetek (foto, nazwisko, tytuł, specjalizacja). 8. **Opinie lekarzy (testimonials):** 2–3 cytaty z podpisem (imię, nazwisko, miasto/placówka). Wiarygodnie, bez przesady. 9. **Ekosystem 3Z / partnerzy:** logotypy ICX, OpenLab3Z, ew. partnerów — pas na jasnoszarym tle. 10. **CTA band:** pełnoszerokościowy pas w `#AC2255` (jedyne duże użycie magenty) — hasło + `Zapisz się na szkolenie` / zapis do newslettera. 11. **Footer:** kolumny — kontakt (adres, tel, e-mail), Szkolenia, O Akademii, dokumenty (Regulamin, Polityka prywatności), newsletter, social (Facebook z tokenów). Dane firmy + NIP na dole. --- ## 5. KATALOG szkoleń Layout: **sidebar filtrów (lewa, ~280px) + siatka kart (prawa)**. Mobile: filtry w drawerze wywoływanym przyciskiem `Filtry`. **Górny pasek katalogu:** - Nagłówek h2 „Szkolenia" + licznik wyników („24 szkolenia") - Sortowanie (dropdown): `Najbliższy termin` (domyślne) · `Cena rosnąco/malejąco` · `Poziom` · `Popularność` - Przełącznik widoku (siatka / lista) — opcjonalnie - Aktywne filtry jako usuwalne chipy **Filtry (sidebar), akordeony:** - **Poziom:** Podstawowy / Zaawansowany / Mistrzowski - **Temat:** np. Chirurgia implantologiczna / Protetyka na implantach / Sterowana regeneracja / Cyfrowe planowanie / Live surgery - **Prowadzący** - **Miasto / lokalizacja** - **Termin:** zakres dat lub miesiące - **Cena:** suwak zakresu - **Dostępność:** tylko z wolnymi miejscami (toggle) - Przyciski `Wyczyść` / (auto-apply lub `Pokaż wyniki`) **Siatka kart:** 3 kolumny (lg), 2 (md), 1 (mobile). Paginacja lub „Załaduj więcej". **Empty state** (brak wyników): grafika + komunikat + `Wyczyść filtry`. --- ## 6. Komponent: karta szkolenia (kluczowy) Struktura (góra→dół): - Obraz 16:9 (radius 4px, górne rogi), na nim badge poziomu (lewy-górny) i badge typu (opcjonalnie) - Pasek daty + miasta (ikony kalendarza/pinezki, tekst `#6C757D`) - Tytuł (h3, 2 linie max, ellipsis) - Prowadzący: mini-avatar + nazwisko - Wiersz meta: czas trwania · punkty edukacyjne (ikona) - Status miejsc (mały tekst; „Ostatnie miejsca" w `#AC2255`) - Stopka karty: cena (netto + „+VAT" mniejszym) po lewej, CTA `Zobacz szczegóły` po prawej **Stany:** hover (uniesienie + delikatna ramka/akcent), focus-visible (obrys), wariant „wyprzedane" (przygaszona, badge „Brak miejsc", CTA → `Lista rezerwowa`). --- ## 7. Komponenty i stany do zdefiniowania - **Przyciski:** primary / secondary (+ hover = `#921D48`, active, disabled, focus-visible). Rozmiary: md (domyślny), lg (hero/CTA band). - **Badge:** poziom (3 warianty), typ, status miejsc. - **Chip filtra** (aktywny/usuwalny). - **Pola formularzy** (input, select, suwak, checkbox, toggle) — spójne z radius 4px, focus w akcencie. - **Dropdown sortowania.** - **Header** (stan domyślny + scrolled), **mega/menu mobilne**. - **Karta prowadzącego, karta opinii, kafel ścieżki.** - **Ikony:** jednolity zestaw line-art, stroke ~1.5–2px, kolor `#4E4C4C`/akcent. --- ## 8. Responsywność Projektuj **desktop (≥1200px) i mobile (~390px)** dla obu ekranów. Zachowania kluczowe: - Header → hamburger < 992px. - Katalog: sidebar → drawer < 992px; siatka 3→2→1 kolumny. - Hero: dwukolumnowy → jednokolumnowy, h1 skalowane. - Touch targets ≥ 44px, filtry wygodne kciukiem. ## 9. Dostępność (AA) Kontrast tekstu ≥ 4.5:1 (użyj `#921D48` tam, gdzie `#AC2255` nie przechodzi), widoczny focus-visible na wszystkich interaktywnych elementach, sensowna hierarchia nagłówków, alt-teksty dla obrazów szkoleń/prowadzących, nawigacja klawiaturą (filtry, drawer, menu). ## 10. Mikrointerakcje (subtelne, profesjonalne) Hover kart (translateY -4px + cień), hover CTA (przejście do `#921D48`), animowane liczniki w pasku stats, płynne rozwijanie akordeonów filtrów, sticky-header shrink. Bez efekciarstwa. --- ## 11. Deliverables 1. **Home** — desktop + mobile. 2. **Katalog** — desktop (z otwartymi filtrami) + mobile (z drawerem filtrów). 3. **Biblioteka komponentów** — przyciski, karta szkolenia (wszystkie stany), badge, chipy, pola, header/footer. 4. Type scale + paleta jako sekcja style-guide. ## 12. Uwagi końcowe Trzymaj się tokenów 3z.pl — spójność z marką jest nadrzędna nad inwencją. Nowoczesność osiągamy światłem, typografią i precyzją siatki, nie kolorem. Priorytet: **zaufanie + czytelna konwersja** (droga: Home → karta → „Zobacz szczegóły"). Cała treść UI po polsku.