Case study01 / 10Strona firmowaRealizacja dla klienta2026

TopAuto Serwis.

Strona lokalnego warsztatu w Nieskurzowie Starym: oferta serwisu, podstrony usług i bezpośredni kontakt z mechanikiem.

Zobacz na żywo

Projekt na ekranieZobacz, jak działa

TopAuto Serwis, wersja desktopowa — Wersja desktopowa

TopAuto Serwis, wersja mobilna — Wersja mobilna

Od wyzwania do efektu.

Każdy etap pokazuję na zrzutach z działającej wersji. Kliknij ujęcie, żeby je powiększyć.

Klient: TopAuto Serwis Zbigniew Orłowski
Technologie: Next.js
React
TypeScript
Tailwind CSS
GSAP
Zakres projektu: Projekt UI/UX
Podstrony usług
Wersja mobilna
Mapa i kontakt
Jasny i ciemny motyw

Wyzwanie

Przygotowujący się do otwarcia warsztat potrzebował czytelnej prezentacji oferty, lokalizacji i sposobu umawiania wizyt. Najważniejsze było ułatwienie kierowcom kontaktu telefonicznego oraz znalezienia dojazdu.

Sekcja zakresu usług w ciemnym motywie: nagłówek „Dobra robota. Od podstaw.”, czarno-białe zdjęcie opon i numerowana lista czterech usług — Kierowca od razu widzi cztery usługi warsztatu, opisane bez obietnic, których właściciel nie potwierdził.

Rozwiązanie

Strona prezentuje wulkanizację, serwis olejowy, klimatyzację i bieżące naprawy na osobnych podstronach. Wyeksponowane przyciski telefonu, informacje o warsztacie, FAQ oraz mapa z dojazdem prowadzą użytkownika od poznania oferty do kontaktu. Projekt obejmuje wersję mobilną oraz jasny i ciemny motyw.

Pierwszy ekran w jasnym motywie: nagłówek „Mechanika. Wulkanizacja. Po sąsiedzku.”, przyciski Zadzwoń i Dojazd oraz pomarańczowy panel z adresem warsztatu — Przy pierwszej wizycie strona przejmuje jasny lub ciemny motyw z telefonu, a przełącznik w nagłówku pozwala go zmienić.

Podstrona wymiany opon i wulkanizacji w okolicach Baćkowic: okruszki nawigacji, przyciski kontaktu, zdjęcie opon i początek listy „Co podać przez telefon” — Każda usługa ma własną podstronę pod lokalne wyszukiwanie, z listą informacji, które warto podać przez telefon.

Telefon w ciemnym motywie: trzy kroki umawiania serwisu na pomarańczowej osi i stały pasek Zadzwoń oraz Dojazd na dole ekranu — Zadzwoń i Dojazd są zawsze pod kciukiem, a wizytę umawia się w trzech krokach.

Efekt

Warsztat ma jedno miejsce z aktualną ofertą i danymi kontaktowymi. Kierowca może sprawdzić zakres usługi, zadzwonić w sprawie terminu i wyznaczyć trasę do warsztatu.

Sekcja kontaktu w jasnym motywie: status otwarcia, adres, godziny, e-mail i mapa okolicy z pinezką TopAuto Serwis oraz odnośnikiem Wyznacz trasę — Adres, godziny i mapa są w jednym miejscu, a nad nimi widać, czy warsztat jest teraz otwarty.

Telefon w jasnym motywie: mapa okolicy z pinezką warsztatu, przyciskami powiększania i odnośnikiem Wyznacz trasę — Kierowca jednym dotknięciem wyznacza trasę do warsztatu w małej miejscowości.

Chcesz podobny projekt?

Opowiedz mi o swojej firmie. Przygotuję bezpłatną wycenę i propozycję rozwiązania.

Wyceń projekt

Strona firmowa

Bella Cucina

Strona trattorii złożona jak drukowana karta dań: menu online, spójna seria zdjęć i prośba o stolik bez dzwonienia.