HANPAK
Strona firmowa B2B w Next.js z panelem CMS
Zaprojektowaliśmy i wdrożyliśmy stronę dla producenta opakowań z tektury falistej, który sprzedaje firmom w całej Polsce. Front zbudowaliśmy w Next.js i TypeScripcie na hostingu Vercel, bazę danych i pliki trzyma Supabase, a treść klient prowadzi w panelu Optiweb CMS. Zakres objął makiety, identyfikację wizualną w stylu kartonu, ofertę opisaną kodami FEFCO, katalog w podglądzie PDF, warunki sprzedaży oraz formularz wyceny zapisujący zapytania w panelu.
Wykorzystane technologie
Zakres prac przy tej stronie
Odbiorcą strony jest zaopatrzeniowiec, który porównuje dostawców i posługuje się oznaczeniami FEFCO, a nie nazwami handlowymi. Serwis musiał mówić językiem branży, dawać szybki dostęp do katalogu konstrukcji i warunków sprzedaży, a przy tym prowadzić prosto do zapytania o wycenę.
Etapy realizacji
Zamiast neutralnego szablonu zaprojektowaliśmy język wizualny wzięty z produktu: rogi zaokrąglone ledwie o 2 piksele, płaskie cienie, przerywaną linię pod nagłówkami jak linię cięcia i ukośne prążki w tle. Kolory marki, bursztyn i granat, prowadzą przez wszystkie podstrony.
Pierwszy ekran łączy wideo w tle, nagłówek podmieniający rodzaj opakowania i sześć unoszących się ilustracji kartonów. Animacje napisaliśmy w samym CSS, bez dodatkowych bibliotek, żeby górna część strony ładowała się od razu.
Ofertę rozpisaliśmy na sześć kategorii, od pudeł klapowych i fasonowych po nadruki fleksograficzne, z oznaczeniami FEFCO, którymi posługują się zaopatrzeniowcy. Uzupełniają ją proces współpracy w czterech krokach i sekcja FAQ z pytaniami o zamówienia.
Katalog konstrukcji FEFCO osadziliśmy jako podgląd PDF z przyciskami otwarcia i pobrania, bez odsyłania klienta na zewnątrz. Obok powstała osobna podstrona z ogólnymi warunkami sprzedaży, którą klient edytuje w panelu jak każdą inną treść.
Zapytania z formularza trafiają do panelu ze statusami od nowego po archiwum, a firma dostaje powiadomienie mailowe. Nadawca otrzymuje potwierdzenie z szablonu. Formularz chroni limit zgłoszeń z jednego adresu i reCAPTCHA, którą klient włącza w panelu.
Klient prowadzi treści wszystkich podstron w panelu Optiweb CMS: włącza i przestawia sekcje, wraca do wcześniejszych wersji, podmienia zdjęcia i ustawia SEO. Po uruchomieniu przeprowadziliśmy audyt bezpieczeństwa: nagłówki, limity logowania i szyfrowanie kluczy w bazie.
Zamów bezpłatną konsultację
Zadaj nam dowolne pytanie, wystarczy, że klikniesz poniższy przycisk i skontaktujesz się z jednym z naszych specjalistów.