Układ głównej strony serwisu

Chcemy zaktualizować stronę główną serwisu i dostosować ją do silnika WHCMS (HTML + PHP)

Mamy gotowy projekt, trzeba wykonać szablon korzystając z już istniejącego wzoru.

Załączam również specyfikację:

1. Ogólne zasady

• Szablon dokładnie według makiet Figma: wymiary, marginesy, typografia, kolory, stany elementów (hover, active).

• Kod musi być dostosowany do szablonu WHMCS (pliki Smarty / PHP).

• Obowiązkowa responsywność: projekt na desktop, tablet, urządzenia mobilne.

• Cross-browserowość: Chrome, Firefox, Safari, Edge (aktualne wersje).

• Optymalizacja zasobów: minimalizacja CSS/JS, lazy-load dla obrazów, SVG dla ikon, użycie WebP, jeśli to możliwe.

• Sekwencja HTML, poprawne tagi (header, nav, main, footer itd.).

• Wyraźna struktura CSS (można używać metodologii BEM, SMACSS lub podobnych).

• Uwaga na stany elementów (przyciski przy najechaniu, aktywne menu itd.).

2. Struktura strony (na podstawie makiety Figma, orientacyjnie)

Poniżej — orientacyjne bloki, odpowiadające makiecie Figma:

1. Header / nagłówek

   • Logo po lewej stronie.

   • Główne menu (punkty nawigacyjne).

   • Przyciski “Zaloguj się / Rejestracja” (korzystając ze stylów z makiety).

   • Możliwe — przełącznik języka / waluty.

   • Tło / efekt (cienie, gradienty) — jak w makiecie.

   • Stały nagłówek przy przewijaniu (jeśli jest to przewidziane w projekcie).

2. Hero / baner / pierwszy ekran

   • Tytuł + podtytuł — style i wymiary z makiety.

   • Przycisk CTA (Call-to-Action) — kolor, efekt najechania.

   • Tło (obraz / ilustracja / wzór), możliwy parallax lub lekka animacja.

3. Blok zalet / cech

   • Ikony + teksty.

   • Układ (w rzędzie, karty, siatka).

   • Marginesy i wyrównania — jak w makiecie.

4. Blok taryf / planów

   • Karty taryf, wewnątrz:

     • Nazwa taryfy

     • Cena

     • Cechy

     • Przycisk “Zamów / Wybierz”

   • W makiecie mogą być “najlepszy wybór / polecane” — trzeba to zrealizować wizualnie.

   • Możliwość dynamicznego podstawiania cen z WHMCS (zmienne PHP).

5. Blok sprawdzania domeny

   • Pole wprowadzania domeny + wybór strefy (select).

   • Przycisk “Sprawdź” — stylizowany.

   • Wyniki sprawdzenia (zewnętrzny blok) — jak w makiecie.

6. Opinie / przypadki / klienci

   • Slider / karuzela (z kontrolkami).

   • Zdjęcia / awatary + cytaty + imię / stanowisko.

   • Interwały i marginesy — jak w makiecie.

7. FAQ / najczęściej zadawane pytania

   • Akordeon (stany otwarte / zamknięte).

   • Animacja otwierania, strzałki ikony — zgodnie z projektem.

8. Blok CTA / dodatkowe wezwanie do działania

   • Jasne tło / wypełnienie.

   • Tytuł + przycisk → rejestracja / rozpocznij / zamów.

   • Efekty najechania, cienie itd.

9. Footer

   • Kilka kolumn (Menu, Wsparcie, Kontakt itd.).

   • Logo, ikony społecznościowe.

   • Prawa autorskie + drobne linki (Polityka prywatności, Warunki itd.).

   • Kolor tła, marginesy i elementy wizualne — jak w makiecie.

3. Integracja z WHMCS / aspekty funkcjonalne

• Pliki szablonu (clientarea.tpl, header.tpl, footer.tpl itd.) są dostosowywane tak, aby strona główna była dostępna jako część WHMCS (np. przez index.php szablonu klienta).

• Bloki tekstowe (tytuły, opisy) — albo przez pliki językowe WHMCS, albo przez zmienne szablonu (aby można było edytować przez panel administracyjny).

• Ceny taryf — pobierane przez WHMCS (PHP/Smarty), zamiast statycznych cyfr.

• Przyciski zamówienia prowadzą do cart.php?a=add&pid=ID lub do order.php z poprawnym parametrem.

• Formularz sprawdzania domeny → domainchecker.php WHMCS (lub punkt końcowy API WHMCS).

• Autoryzacja / rejestracja — linki prowadzą do stron WHMCS login.php, register.php.

• Jeśli w makiecie są elementy zależne od autoryzacji (np. “Cześć, [imię]” lub “Moje konto”) — uwzględnić warunkowe generowanie przez Smarty ({if $loggedin} itd.).

• Podłączenie CSS/JS — przez standardowy pipeline WHMCS (aby uniknąć konfliktów).

• Wykorzystać możliwości cache'owania WHMCS, gdzie to możliwe, nie naruszając dynamiki.

4. Techniczne / szczegóły

• CSS i JS — w miarę możliwości dzielić: podstawowy + komponenty + strony.

• Używać preprocesora (Sass / Less), jeśli w projekcie jest już przewidziany.

• Minimalizacja w wersji produkcyjnej.

• Ładowanie obrazów — srcset i sizes dla responsywnych obrazów.

• Lazy-loading (opóźnione ładowanie) dla obrazów poza ekranem.

• Ikony — SVG, kod inline lub sprite'y.

• Sprawdzenie poprawności HTML/CSS (W3C).

• Gotowość do SEO: tagi alt, nagłówki (h1, h2…), poprawna zagnieżdżenie.

• Sprawdzenie funkcjonalności na urządzeniach mobilnych — menu hamburgerowe, ukryte elementy, responsywność.