Pizzeria Napoli – koncepcyjna strona restauracji z autorskim designem i naciskiem na mobile

Pizzeria Napoli to projekt koncepcyjny przygotowany do portfolio. Nie przedstawia współpracy z prawdziwą restauracją ani rzeczywistych wyników sprzedażowych.

Celem było zaprojektowanie strony dla lokalnej gastronomii, która nie wygląda jak kolejny gotowy szablon — z autorskim charakterem, ale przede wszystkim zbudowanej wokół realnych zachowań użytkownika mobilnego: szybkie sprawdzenie menu, lokalizacji, numeru telefonu albo przejście do zamówienia.

Co chciałem pokazać

• oryginalny, edytorialny design zamiast typowego układu „hero z gradientem i zaokrąglonymi kartami”,
• projektowanie mobile-first dla lokalnego biznesu,
• prostą ścieżkę od wejścia na stronę do zamówienia lub kontaktu,
• czytelną prezentację menu i najważniejszych informacji,
• techniczne SEO dla biznesu lokalnego,
• wydajność, PWA i optymalizację obrazów,
• formularz kontaktowy i zabezpieczenia przed spamem.

Status projektu: projekt koncepcyjny / portfolio. Nie ma tu fikcyjnych danych o zamówieniach, ruchu ani pozycjach w Google.

Jak zbudowałem projekt

Projekt realizowaliśmy w ramach planu Biznes (od 4 000 PLN).

1. Audyt i strategia

• Analiza konkurencji (5 pizzerii w okolicy) i przegląd typowych stron tego typu — większość korzysta z tych samych szablonów, gradientów i czcionek (Inter, Poppins), przez co trudno je od siebie odróżnić
• Badanie fraz kluczowych: „pizza Warszawa", „pizzeria neapolitańska", „dostawa pizzy"
• Mapa ciepła starej strony → zidentyfikowaliśmy, że 82% użytkowników nie scrollowało poniżej Hero

2. Projekt UI/UX — design bez efektu „AI-template"

Zamiast popularnego zestawu (gradienty, duże zaokrąglone karty, miękkie cienie, Inter jako font systemowy) postawiliśmy na rozwiązania rzadziej spotykane w gotowych szablonach:

• Paleta barw budująca ciepły, „papierowy" klimat: terakota #B3432B jako kolor wiodący, głęboki atrament #221F1B, kremowy papier #F6F1E6, musztardowy akcent #C99A3C i stonowana oliwka #5B6B4D — zero gradientów
• Typografia: Fraunces (nagłówki, z kursywą jako akcent stylistyczny) w duecie z Archivo (tekst) — świadoma rezygnacja z Inter i innych czcionek „domyślnych" dla projektów AI
• Twarde, przesunięte cienie (box-shadow bez rozmycia) i ostre krawędzie zamiast miękkich, dużych zaokrągleń — spójna sygnatura wizualna widoczna w kartach menu, przyciskach i formularzu
• Przyciski w stylu „stempla" — reagują ruchem i redukcją cienia przy hover/kliknięciu zamiast typowego podświetlenia
• Rezygnacja z „eyebrow’ów” (- Tekst -) na rzecz małego kwadratowego markera i tekstu w trackingu
• Cyfrowa numeracja sekcji (01–05) w tle jako detal typowy dla stron portfolio, budujący edytorialny charakter
• Subtelna faktura ziarna (grain) na całej stronie — detal wizualny bez wpływu na wydajność
• Mobile-first design: prosty pasek nawigacji z hamburger menu na mobilce, czytelna nawigacja pozioma na desktopie
• Każda sekcja ma jasny CTA prowadzący do menu lub kontaktu

3. Rozwój

Stack technologiczny:

• Next.js 16 — Server-Side Rendering, natywna optymalizacja obrazów, generowanie sitemap i robots.txt
• Tailwind CSS 4 — utility-first styling, autorskie klasy (twarde cienie, tekstura ziarna) bez dodatkowych zależności npm
• React Icons — tylko ikony, których faktycznie używamy (tree-shaking)
• Vercel — edge hosting z CDN, automatyczne deploye z GitHub

Kluczowe decyzje techniczne:

• Fonty Fraunces i Archivo ładowane przez next/font/google (self-hosted, display: swap, zero layout shiftu)
• Hero zbudowany jako układ dwukolumnowy (tekst + oprawione w ramkę zdjęcie) zamiast pełnoekranowego tła z overlayem — lepszy kontrast tekstu bez przyciemniania zdjęcia
• Mapa Google ładowana dopiero po kliknięciu (click-to-load) → zero kosztów iframe przy pierwszym renderze
• JSON-LD LocalBusiness/Restaurant → rich snippets w Google (adres, godziny, ocena)
• Generowane programowo sitemap.xml i robots.txt przez natywne API Next.js

4. SEO on-page

• Metadata: rozbudowane title templates, opisy z frazami kluczowymi
• Open Graph + Twitter Card: obraz OG 1200×800 z pizzą
• Schema.org: Restaurant, AggregateRating, OpeningHoursSpecification
• Semantyczny HTML: prawidłowe nagłówki h1→h3, landmark roles, ARIA labels, skip-link do treści głównej
• Web Manifest: PWA-ready z theme_color dopasowanym do palety (terakota) i ikonami

Sekcje strony

Najważniejszym celem było pokazanie, że strona lokalnej restauracji może mieć rozpoznawalny, autorski charakter i jednocześnie pozostać szybka, wygodna na telefonie i zbudowana wokół konkretnych działań użytkownika.

Weryfikacja techniczna wersji demonstracyjnej

To parametry techniczne wdrożonej wersji demonstracyjnej, a nie dane biznesowe restauracji.

Podsumowanie

Pizzeria Napoli pokazuje moje podejście do stron dla gastronomii: priorytetem jest telefon, szybkość, czytelna oferta i możliwie krótka droga do kontaktu lub zamówienia — a wszystko to w oprawie, która nie wygląda jak kolejny wygenerowany szablon. Technologia i design są tu zapleczem dla prostego, zapadającego w pamięć doświadczenia użytkownika.

---

Potrzebujesz strony dla restauracji lub innego lokalnego biznesu? Porozmawiajmy o rozwiązaniu dopasowanym do sposobu, w jaki klienci faktycznie korzystają z Twojej oferty.