Elite One — fotowoltaika, magazyny energii i pompy ciepła
Elite One montuje fotowoltaikę, magazyny energii, pompy ciepła i klimatyzację, a do tego pomaga w dotacjach — dla domów, firm i gospodarstw rolnych. Strona ma dwa równorzędne zadania: zbierać zapytania o darmową wycenę i rekrutować handlowców. Zbudowałem ją jako one-page na autorskim motywie WordPress, bez ani jednej wtyczki.
Wyzwanie
Firma potrzebowała strony, która jednocześnie sprzedaje instalacje domom, firmom i gospodarstwom rolnym oraz przyciąga kandydatów do pracy — bez mieszania zapytań klientów z aplikacjami o pracę.
Rozwiązanie
Przełożyłem zaakceptowany projekt na autorski motyw WordPress: dwa osobne formularze (wycena i rekrutacja) z własnymi odbiorcami i zgodami, wysyłka maili przez SMTP bez wtyczek, pasek liczb z danymi firmy edytowalny w panelu i 59 testów automatycznych pilnujących, że nic się nie rozjedzie.
Jak to robiliśmy
- 01
Wybór kierunku i projekt, którego się trzymam
Klientka dostała dwa warianty strony głównej i wybrała „heraldyczny”: symetryczną nawigację z logo w geometrycznym środku, ciemny pełnoekranowy hero i jasną, spokojną resztę. Ten projekt stał się źródłem prawdy z twardymi zasadami: zero zaokrągleń, zero cieni, żadnych ikon, Cinzel do nagłówków i Manrope do reszty. Głębię dają tylko tło i obramowania 1 px.
- 02
Motyw od zera, bez wtyczek
Zakodowałem własny motyw w klasycznym PHP — bez page buildera, frameworków CSS i bez WooCommerce, bo konwersją jest rozmowa, a nie zakup. Projekt nie miał wersji mobilnej, więc dorobiłem breakpointy i pełnoekranowe menu na telefon jako propozycję do akceptacji. Zdjęcia przeszły na WebP z srcset: z 13 MB zrobiło się 1,5 MB.
- 03
Rekrutacja oddzielona od sprzedaży
Po pierwszej rundzie uwag sekcja Kariera dostała własny formularz: osobna klauzula zgody, osobny adres odbiorcy i Reply-To ustawione na kandydata. Oba formularze stoją na jednej stronie i korzystają z tego samego silnika, więc pilnuję, żeby błąd albo potwierdzenie pokazały się tylko w tym, który je wywołał. Bez załącznika CV — to decyzja klientki, bo pierwszy kontakt i tak jest telefoniczny.
- 04
Poczta, która naprawdę dochodzi
Wysyłkę zrobiłem bez wtyczki: PHPMailer na uwierzytelniony SMTP, z nadawcą wyrównanym do skrzynki, żeby SPF przepuścił zgłoszenia zamiast wrzucać je do spamu. Dane logowania trzymam w konfiguracji serwera, a nie w panelu — hasło skrzynki nie ma czego szukać w bazie. Przy wdrożeniu wyłapałem literówkę w domenie domyślnego odbiorcy, przez którą zgłoszenia odbijałyby się w próżnię.
- 05
Staging, przenosiny i testy na żywej stronie
Klientka oglądała stronę na stagingu z blokadą indeksowania na trzech poziomach. Produkcja stoi na jej własnym hostingu współdzielonym, więc przygotowałem paczkę i skrypt wgrywający po FTP z wznawianiem przerwanego transferu. Po przenosinach cały zestaw testów E2E — razem z migawkami wizualnymi całej strony — przeszedł na zielono na produkcji, a oba formularze wysłały prawdziwe maile.
Co wyróżnia ten projekt
Nawigacja z logo w środku
Siatka 1fr auto 1fr trzyma logo w geometrycznym centrum niezależnie od długości grup linków — to esencja wybranego wariantu. Na telefonie zamienia się w pełnoekranowe menu z dużymi pozycjami.
Dwa formularze, dwie skrzynki
Zapytania o wycenę i zgłoszenia kandydatów trafiają do różnych odbiorców ustawianych w panelu, z osobnymi zgodami RODO. Oba mają nonce, honeypot i walidację po stronie serwera.
Dane firmy edytowalne w panelu
Pasek liczb z danymi firmy, telefon, e-mail i adres siedzą w Dostosuj — właścicielka zmienia je bez programisty i bez ryzyka rozjechania układu.
59 testów automatycznych
Playwright w 1440 i 375 px pilnuje kolejności sekcji, formularzy, braku poziomego scrolla i podpisu w stopce, a migawki całej strony wyłapują każdą niezamierzoną zmianę wyglądu.
Widoki i elementy
Właścicielka dostaje zapytania i zgłoszenia kandydatów do dwóch różnych skrzynek, a stronę edytuje sama w panelu — bez wtyczek, które trzeba aktualizować.
Zacznijmy Twój projekt.
Opisz w kilku zdaniach, czego potrzebujesz — odezwę się z konkretnymi pytaniami i propozycją kolejnych kroków. Bez zobowiązań.