TwójDonat.pl - strona pączkarni z zamawianiem online
Zaprojektowaliśmy i zbudowaliśmy stronę pączkarni z zamawianiem online. Sercem jest sterowane scrollem hero prezentujące 5 smaków, a zamawianie i konto klienta działają w lekkich, dopracowanych modalach. Postawiliśmy na apetyczny klimat marki, płynne animacje (motion/react), dostępność i wygodę na każdym ekranie - z trwałością danych w przeglądarce zamiast backendu.
Zakres realizacji
- Strona główna (SPA) z sekcjami kotwiczonymi (smaki, historia, zamów) i płynnym przewijaniem
- Sterowane scrollem hero - karuzela 5 smaków (Truskawka, Czekolada, Jagoda, Jeżyna, Pistacja) z parallaxem, interpolacją koloru tła per smak, „pływającymi" owocami/posypką i przenikającymi się tytułami
- Nawigacja hero: kropki paginacji, strzałki prev/next i podpowiedź scrolla; pełne poszanowanie prefers-reduced-motion (wyłącza rotacje i parallax)
- Wybór smaków w siatce kart (glow w kolorze smaku, hover) z licznikami +/-, progiem minimalnego zamówienia, ceną liczoną na żywo i obsługą klawiatury
- Sekcja „historia smaku" z osobnym opisem każdego pączka i animowaną zmianą (AnimatePresence)
- Finalizacja w modalu: tryb dostawa / odbiór osobisty, dane kontaktowe, adres (wybór zapisanego lub nowy), okno czasowe (przedziały 7–11) i metoda płatności (karta / BLIK / gotówka)
- Podsumowanie zamówienia (sticky) z miniaturami i sumą oraz walidacją pól na żywo (telefon, kod pocztowy 00-000)
- Ekran potwierdzenia z numerem zamówienia i informacją o dostawie
- Panel klienta (modal) z logowaniem/rejestracją (wersja demo, bez hasła) i zakładkami: zamówienia, adresy, profil
- Historia zamówień ze statusami (w przygotowaniu / w dostawie / dostarczone) i „zamów ponownie"; zarządzanie zapisanymi adresami (dodaj / edytuj / usuń)
- Trwałość danych w przeglądarce (localStorage: konta i sesja, wersjonowanie, limit 50 zamówień, synchronizacja między kartami)
- Dopracowany UX: dynamiczne logo (jasne/ciemne), sticky nawigacja, modale ładowane na żądanie (next/dynamic), pułapka focusa, ESC i blokada scrolla, memoizacja komponentów
- SEO (Open Graph, Twitter Card, sitemap, robots) i twarde nagłówki bezpieczeństwa (CSP, X-Frame-Options, Referrer-Policy, Permissions-Policy); responsywność z modalami dokowanymi na dole na mobile
Technologie
- Next.js 16
- React 19
- TypeScript
- Tailwind CSS 4
- Framer Motion