# Prompt dla Claude Design — Homepage akademia.3z.pl > **Jak używać:** Skopiuj całość poniższego briefu do Claude Design. Sekcja brandingu jest wyekstrahowana 1:1 z danych produkcyjnych 3z.pl i jest **wiążąca** — nie improwizuj kolorów, fontów ani promieni. --- ## 1. Kontekst i cel Zaprojektuj **stronę główną (homepage)** dla `akademia.3z.pl` — platformy e-commerce sprzedającej **stacjonarne szkolenia z implantologii stomatologicznej**. Serwis jest siostrzaną marką [3z.pl](https://3z.pl/) (system implantologiczny ICX, protetyka OpenLab3Z, technologie cyfrowe dla gabinetów). Akademia musi być **wizualnie spójna** z marką matką: ten sam język kolorów, typografia i charakter, ale z własną, wyraźną tożsamością „edukacyjno-sprzedażową". **Cel biznesowy homepage:** doprowadzić dentystę/implantologa do zapisu na konkretny termin szkolenia. Strona to nie broszura — to lejek konwersji z jasnym, powtarzalnym CTA „Zapisz się". **Poziom jakości:** nowoczesny, profesjonalny, „premium medical". Ma budzić zaufanie kliniczne, ale nie być zimny ani szpitalny. Absolutnie unikaj wyglądu generycznego szablonu WordPress/Bootstrap. --- ## 2. Grupa docelowa Profesjonaliści stomatologiczni: - **Dentyści i implantolodzy** rozwijający praktykę — chcą podnieść kompetencje i wprowadzić implantologię/protetykę cyfrową do gabinetu. - **Właściciele gabinetów** — decydują o inwestycji w rozwój zespołu. Ich mindset przy zakupie: oceniają **wiarygodność prowadzącego**, **program**, **certyfikację**, **dostępność terminu i lokalizacji** oraz **cenę vs. wartość**. Są zajęci — decyzję muszą podjąć szybko, na podstawie skanowalnej treści. **Kluczowe obiekcje do rozbrojenia na homepage:** „Czy to jest dla mojego poziomu?", „Kto prowadzi?", „Czy jest termin blisko mnie?", „Czy dostanę certyfikat / punkty edukacyjne?", „Czy warte swojej ceny?". --- ## 3. Model produktu (WAŻNE dla układu) Produktem jest **termin szkolenia stacjonarnego**, nie kurs abstrakcyjny. Każde szkolenie ma: - **tytuł + poziom** (np. podstawowy / zaawansowany / mistrzowski), - **datę / zakres dat**, - **lokalizację** (różne miasta — np. Warszawa, Katowice, Będzin), - **prowadzącego** (różne osoby — imię, nazwisko, tytuł, zdjęcie), - **limit miejsc / liczbę wolnych miejsc** (kluczowe dla urgency), - **cenę**, - **CTA „Zapisz się"**. Ten model dyktuje, że najważniejszym modułem homepage jest **lista najbliższych terminów** — traktuj ją jak listing produktów w e-commerce, gdzie „wariantem" jest para *lokalizacja + data*. --- ## 4. Branding — wytyczne wiążące (źródło: 3z.pl.json) ### 4.1. Kolory | Rola | HEX | |---|---| | Primary | `#AC2255` | | Secondary | `#921D48` | | Accent | `#AC2255` | | Background | `#FFFFFF` | | Text primary | `#4E4C4C` | | Link | `#6C757D` | Schemat: **light**. Primary (magenta/bordo) to kolor akcji i akcentów — stosuj oszczędnie, głównie na CTA i wyróżnikach. Tło utrzymuj czyste, białe / bardzo jasne. Secondary `#921D48` używaj jako stan `:hover`/`:active` dla przycisków primary oraz do głębszych akcentów. ### 4.2. Typografia - **Font (heading + body):** `Montserrat`, fallback `sans-serif`. - **Skala desktop (ze źródła):** H1 `80px`, H2 `40px`, body `18px`. - **Uzupełnij brakujące poziomy** (spójnie, modularnie): sugerowany H3 `28px`, H4 `22px`, small/caption `14px`, line-height body `1.6`. - **Skala mobile:** przeskaluj nagłówki (np. H1 `40–44px`, H2 `28–30px`), body min. `16px`. Zachowaj czytelność i hierarchię. ### 4.3. Przyciski **Primary:** tło `#AC2255`, tekst `#FFFFFF`, border `#AC2255`, border-radius `2px`, brak cienia. Hover: przyciemnij do `#921D48`. **Secondary:** tło `#FFFFFF`, tekst `#4E4C4C`, border `#AC2255` (1px), border-radius `2px`, brak cienia. Hover: subtelne wypełnienie tłem primary lub delikatne tło. > Uwaga: brand używa ostrego promienia `2px` na przyciskach i `4px` globalnie — utrzymaj **minimalistyczny, ostry** charakter narożników. Nie zaokrąglaj mocno (żadnych pill-buttonów). ### 4.4. Spacing i kształty - Base unit: `4px` — cały rytm odstępów buduj na wielokrotnościach 4 (4/8/16/24/32/48/64/96). - Global border-radius: `4px` (karty), `2px` (przyciski). ### 4.5. Assety marki - **Logo:** `https://3z.pl/wp-content/themes/blankslate-child/assets/img/public/3z-logo.png` — alt `"3Z logo"`, link do `/`. - **Favicon:** `https://3z.pl/wp-content/themes/blankslate-child/assets/img/public/favicon/favicon.ico`. - Charakter marki: **professional**, energia **medium**, odbiorca **dental professionals**. ### 4.6. Gotowe design tokens (użyj jako fundamentu CSS) ```css :root { --color-primary: #AC2255; --color-secondary: #921D48; --color-accent: #AC2255; --color-bg: #FFFFFF; --color-text: #4E4C4C; --color-link: #6C757D; --font-base: 'Montserrat', sans-serif; --fs-h1: 80px; --fs-h2: 40px; --fs-body: 18px; --space-unit: 4px; --radius-card: 4px; --radius-btn: 2px; } ``` --- ## 5. Zakres tej iteracji **Projektujesz TYLKO homepage**, ale w pełnej jakości prototypu: - Wersja **desktop** i **mobile** (responsive, mobile-first w myśleniu). - Wszystkie sekcje z pkt. 6. - **Stany interaktywne**: hover / focus / active dla linków, przycisków i kart; stan „ostatnie miejsca" na kartach szkoleń. - Realistyczna treść (PL) i realistyczne dane szkoleń — bez „lorem ipsum". Pozostałe ekrany opisane są w pkt. 9 jako **roadmapa** — nie projektuj ich teraz, ale utrzymaj homepage tak, by naturalnie do nich prowadził. --- ## 6. Struktura homepage (sekcje + intencja UX) Zaprojektuj w tej kolejności: **1. Header (sticky)** Logo 3Z (lewa), nawigacja (Szkolenia, Terminy, Prowadzący, O Akademii, Kontakt), po prawej CTA secondary „Zaloguj się" + ikona koszyka. Na mobile — hamburger ze slide-down menu. **2. Hero** Mocna propozycja wartości nad kreską (np. „Rozwiń praktykę implantologiczną — szkolenia prowadzone przez ekspertów ICX"). Podtytuł 1–2 zdania. Primary CTA „Zobacz najbliższe terminy" + secondary „Poznaj program". Wizualnie: profesjonalne zdjęcie kliniczne/szkoleniowe lub zestaw akcentów marki. Opcjonalnie pasek mikro-zaufania pod CTA (liczba absolwentów, ocena, lata doświadczenia). **3. Pasek zaufania / social proof** Liczby (np. „500+ przeszkolonych lekarzy", „12 lat doświadczenia", „System ICX"), ewentualnie logotypy partnerów/certyfikacji. Buduje wiarygodność zanim padnie prośba o zakup. **4. Najbliższe terminy — moduł kluczowy (listing produktów)** Siatka **kart szkoleń** (patrz pkt. 7). Nad siatką: nagłówek „Najbliższe szkolenia" + skróty filtrów (poziom / lokalizacja) sygnalizujące pełny katalog. To główny motor konwersji — daj mu przestrzeń i priorytet wizualny. **5. Kategorie / ścieżki rozwoju** 3–4 kafle wg poziomu lub tematu (Podstawy implantologii, Zaawansowana chirurgia, Protetyka cyfrowa OpenLab3Z, Sterowana implantacja). Pomaga w samosegmentacji odbiorcy. **6. Dlaczego Akademia 3Z** 3–4 benefity z ikonami: certyfikacja, praktyka na modelach/pacjentach, kameralne grupy, wsparcie po szkoleniu. Rozbraja obiekcje. **7. Prowadzący / eksperci** Karuzela lub siatka sylwetek: zdjęcie, imię i nazwisko, tytuł, specjalizacja. Autorytet prowadzącego to główny driver zakupu w tej branży. **8. Opinie / testimonials** 2–4 cytaty absolwentów (imię, tytuł, miasto praktyki), opcjonalnie ocena. Autentyczny ton. **9. FAQ** Accordion: certyfikaty/punkty edukacyjne, poziom zaawansowania, co obejmuje cena, faktura, rezygnacja/przeniesienie terminu. **10. Newsletter / lead capture** Zapis na powiadomienia o nowych terminach (email). Lekki, jeden input + przycisk. **11. CTA końcowe (pełnej szerokości)** Domykające, na tle akcentowym primary/secondary: „Nie znalazłeś terminu? Zostaw kontakt — poinformujemy o najbliższym szkoleniu w Twojej okolicy." **12. Footer** Kolumny: O Akademii, Szkolenia, Pomoc (FAQ, regulamin, polityka prywatności, kontakt), dane firmy + social (link do FB `3Z.ICX.Polska`). Logo, copyright. --- ## 7. Karta szkolenia (komponent e-commerce) Najważniejszy komponent. Musi zawierać: - **Badge poziomu** (Podstawowy / Zaawansowany / Mistrzowski) — kolorystycznie odróżniony. - **Tytuł** szkolenia. - **Prowadzący** — miniatura + imię i nazwisko. - **Data** + **lokalizacja** (miasto) — wyraźnie, z ikonami. - **Wskaźnik dostępności miejsc** — np. „Ostatnie 3 miejsca" w kolorze primary jako urgency; „Dostępne" neutralnie. - **Cena** (brutto, PLN). - **CTA primary „Zapisz się"** + drugorzędny link „Szczegóły". - Stan hover: subtelne uniesienie/obramowanie akcentem, bez ciężkich cieni (branding = shadow none — trzymaj się lekkości). Karta ma być w pełni skanowalna w 2 sekundy: poziom → prowadzący → gdzie i kiedy → ile miejsc → cena → akcja. --- ## 8. Wytyczne UX / konwersji / techniczne - **Hierarchia CTA:** jedno dominujące działanie na sekcję. Primary tylko dla akcji zakupowych („Zapisz się", „Zobacz terminy"). Secondary dla akcji poznawczych. - **Urgency bez nachalności:** limity miejsc i najbliższe daty eksponuj faktami, nie krzykiem. - **Skanowalność:** krótkie nagłówki, dużo światła (base unit 4px), listy zamiast bloków tekstu. - **Responsywność:** mobile-first. Siatka kart: 3 kolumny desktop → 2 tablet → 1 mobile. Sticky header kompaktowy na scroll. - **Dostępność (WCAG AA):** zwróć uwagę na kontrast — `--color-link #6C757D` na białym jest na granicy AA dla małego tekstu; dla linków w treści rozważ ciemniejszy odcień lub podkreślenie. Tekst primary `#4E4C4C` na bieli jest OK. Focus states widoczne. Alt-teksty dla zdjęć prowadzących. - **Spójność z 3z.pl:** ten sam font, paleta i ostre narożniki — użytkownik przechodzący z 3z.pl ma czuć „to ta sama marka". - **Charakter wizualny:** czysto, przestronnie, z akcentem bordo/magenta jako sygnaturą. Fotografia realna i profesjonalna (klinika, dłonie w rękawiczkach, szkolenie), nie stockowe klisze korporacyjne. **Czego unikać:** domyślnych komponentów Bootstrap „as-is", gradientowych tła bez celu, ciężkich cieni (branding: `shadow: none`), zaokrąglonych pill-buttonów, przeładowania kolorem primary. --- ## 9. Roadmapa kolejnych ekranów (NIE projektuj teraz) Homepage ma prowadzić do poniższych widoków — zaplanowanych do realizacji w kolejnych iteracjach: 1. **Katalog szkoleń + filtry** — lista wszystkich terminów; filtry: poziom, lokalizacja/miasto, prowadzący, zakres dat, cena; sortowanie (najbliższy termin / cena); wyszukiwarka. 2. **Karta pojedynczego szkolenia** — pełny program (agenda godzinowa), bio prowadzącego, lokalizacja z mapą, harmonogram terminów tego szkolenia, co w cenie, certyfikat, sekcja zapisu z wyborem terminu, opinie, powiązane szkolenia. 3. **Koszyk / Checkout** — podsumowanie wybranego terminu, dane uczestnika/uczestników, dane do faktury (NIP/firma — B2B!), metoda płatności, zgody, potwierdzenie. 4. **Panel kursanta / konto** — moje szkolenia (nadchodzące / archiwalne), certyfikaty do pobrania, faktury, dane profilu. Trzymaj homepage otwartą na tę architekturę: nawigacja i CTA powinny naturalnie kierować do katalogu i kart szkoleń. --- ## 10. Deliverable Wieloekranowy prototyp homepage: **desktop + mobile**, wszystkie sekcje z pkt. 6, komponent karty szkolenia z pkt. 7 w kilku stanach (dostępne / ostatnie miejsca / hover), realistyczna treść PL. Design tokens z pkt. 4.6 jako fundament stylów.