Case study02 / 10Strona firmowaProjekt autorski2026

Bella Cucina.

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

Zobacz na żywo Kod na GitHub

Projekt na ekranieZobacz, jak działa

Bella Cucina, wersja desktopowa — Wersja desktopowa

Bella Cucina, 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: Projekt autorski (demo)
Technologie: Next.js
React
TypeScript
Tailwind CSS
Framer Motion
Blender
Zakres projektu: Projekt UI/UX
Art direction zdjęć
Menu online
Formularz rezerwacji
Render 3D (Blender)
SEO lokalne

Wyzwanie

Większość lokali gastronomicznych w Polsce działa wyłącznie na Instagramie i Facebooku. Menu krąży jako zdjęcie sprzed miesięcy, nie da się zarezerwować stolika online, a Google nie ma czego zaindeksować - lokal jest niewidoczny dla nowych gości.

Karta dań na komputerze: przyklejony pasek kategorii od Antipasti do Bevande, przystawki z cenami na kropkowanych liniach i zdjęcie burraty w łukowym kadrze — Menu, które krążyło jako zdjęcie kartki, jest teraz czytelną stroną z cenami, oznaczeniami diet i jednym zdjęciem na kategorię.

Rozwiązanie

Zaprojektowałem stronę jak drukowaną kartę dań trattorii: hero ze zdjęciem w łuku ceglanego sklepienia, menu z jednym zdjęciem na kategorię i cenami na kropkowanych liniach, a na telefonie przyklejony pasek kategorii. Wszystkie zdjęcia tworzą jedną serię w tym samym świetle świec, z lnem i cegłą, a uzupełnia ją martwa natura z makaronu wyrenderowana w Blenderze. Dojazd pokazuje własny plan Starego Miasta, a mapa Google wczytuje się dopiero po kliknięciu, więc strona nie zapisuje ciasteczek na starcie. Formularz rezerwacji podpowiada godziny zależne od dnia tygodnia.

Karta dań na telefonie: pasek kategorii pod nagłówkiem, sekcja Pasta ze zdjęciem carbonary i cenami, na dole przyciski Zadzwoń i Zarezerwuj stolik — Kategorie zmienia się jednym dotknięciem, a telefon i rezerwacja są pod kciukiem.

Galeria na ciemnym tle: sala pod ceglanym sklepieniem ze świecami, piec opalany drewnem i kuchnia z miedzianymi rondlami — Spójna seria zdjęć w jednym świetle pokazuje klimat lokalu, zanim gość przekroczy próg.

Sekcja dojazdu: adres przy Floriańskiej, przyciski Wyznacz trasę i Otwórz w Mapach Google, godziny z wyróżnionym dzisiejszym dniem i schematyczny plan Starego Miasta — Plan Starego Miasta od razu pokazuje drogę, a mapa Google wczytuje się dopiero na życzenie, bez ciasteczek na starcie.

Efekt

Gość w kilka sekund widzi menu z cenami i drogę do lokalu, a potem wysyła prośbę o stolik bez dzwonienia i przeszukiwania mediów społecznościowych. Lokal zyskuje spójny wizerunek, a karta dań trafia do Google jako tekst i dane strukturalne.

Sekcja rezerwacji: numer telefonu i godziny otwarcia obok formularza z imieniem, telefonem, datą, godziną, liczbą osób, uwagami i zgodą — Formularz podpowiada godziny otwarcia w wybranym dniu i opisuje błędy przy polach, więc prośba o stolik zajmuje chwilę.

Potwierdzenie na telefonie: podziękowanie z imieniem gościa, data zapisana słownie, godzina, liczba osób i numer, na który lokal oddzwoni — Gość widzi podsumowanie prośby i wie, że lokal oddzwoni, żeby ją potwierdzić.

Chcesz podobny projekt?

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

Wyceń projekt

Strona firmowa

Glow Studio

Strona studia fryzjerskiego w duchu drukowanej karty salonu: uczciwe metamorfozy, cennik w zakładkach i własna rezerwacja wizyt bez prowizji platform.