Zadanie końcowe – Moduł 4 – Animacje, interakcje i estetyka

Zadanie końcowe – Moduł 4 – Animacje, interakcje i estetyka

Twoim zadaniem jest stworzenie estetycznego i dynamicznego komponentu sekcji powitalnej („hero”), który łączy animacje CSS, spójny styl wizualny, kolory, typografię i dobre praktyki projektowania komponentów.

To zadanie sprawdzi, jak radzisz sobie z:

• projektowaniem przejrzystego i estetycznego interfejsu,
• stosowaniem animacji w UI (wejścia, mikrozachowania),
• użyciem zmiennych CSS, klas komponentowych i stylów narzędziowych,
• porządkowaniem kodu według zasad modularnego designu.

Opis komponentu

Stwórz sekcję „hero”, która zawiera:

• tytuł (np. <h1>) z animacją wejścia z dołu,
• krótki opis (np. <p>) z delikatnym opóźnieniem animacji,
• przycisk CTA z efektem hovera,
• opcjonalnie – ikonę lub grafikę dekoracyjną,
• całość powinna być responsywna i estetycznie wycentrowana.

Wymagania techniczne

1. Wykorzystaj zmienne CSS do kolorów, spacingu i fontów. Jeśli nie masz gotowych – możesz skorzystać z tych, które poznaliśmy w lekcji o design systemie.
2. Dodaj animację pojawiania się każdego elementu z użyciem @keyframes i animation-delay – tak, by powstała sekwencja wejścia.
3. Zastosuj klasę komponentową, np. .hero, oraz klasy potomne: .hero-title, .hero-description, .hero-button.
4. Użyj klas narzędziowych, np. .text-center, .mt-lg, .text-muted (możesz dodać własne).
5. Unikaj nadmiernych dekoracji – postaw na prosty, nowoczesny i czytelny wygląd.

Wskazówki

To zadanie nie jest testem – to ćwiczenie praktyczne, które pomoże Ci utrwalić to, czego się nauczyłeś.
Możesz i **powinieneś wracać do lekcji**, np.:

• jeśli nie pamiętasz jak działa animation-delay → lekcja 4.1,
• jeśli chcesz przypomnieć sobie strukturę zmiennych CSS → lekcja 4.2 i 4.4,
• jeśli chcesz ponownie przejrzeć styl komponentów → lekcje 4.4.

Rozszerzenie dla chętnych

Jeśli masz ochotę, możesz dodać dodatkową sekcję „zaufali nam” z ikonami/logotypami lub stopkę z prostym stylem. Ale nie jest to wymagane.

Efekt końcowy

Twoja strona powitalna powinna:

• być estetyczna i spójna wizualnie,
• zawierać płynne animacje wejścia,
• być zorganizowana w komponent .hero,
• opierać się na zmiennych CSS i klasach pomocniczych.

Podsumowanie

Nie musisz się spieszyć. To zadanie jest świetną okazją do przećwiczenia wszystkiego z Modułu 4.
Zrób je dokładnie, eksperymentuj, baw się kolorem i ruchem – a jeśli coś nie działa, wróć do odpowiednich lekcji. To zupełnie normalne.

Gotowy? 💡 Po zakończeniu tego zadania przejdziemy do quizu końcowego, który sprawdzi Twoją wiedzę z całego modułu.