Strona marki kawowej z kreatorem subskrypcji

Wielostronicowy serwis produktowy, w którym wybór planu kawowego prowadzi użytkownika krok po kroku do gotowego zamówienia.

Frontend Mentor
Strona produktowa
RWD

Zobacz wersję live Omów podobny projekt

Strona główna Coffee Roasters w widoku desktopowym

Sekcja hero „Great coffee made simple” w widoku mobilnym

O projekcie

Coffee Roasters to wyzwanie Frontend Mentor: fikcyjna palarnia kawy z kilkoma podstronami, opisem procesu i kreatorem planu subskrypcji. Punktem wyjścia był gotowy projekt graficzny, który należało odwzorować co do detalu.

Strona główna Coffee Roasters z hasłem marki i wejściem do kreatora

Wyzwanie

Kreator planu to cztery zależne od siebie wybory, które muszą złożyć się w jedno czytelne podsumowanie zamówienia. Do tego dochodzi wierność designowi na każdej szerokości ekranu — właśnie tam takie projekty najczęściej się sypią.

Karty czterech mieszanek kawy z opisami w sekcji „Our collection”

Karty mieszanek kawy w układzie jednokolumnowym na telefonie

Rozwiązanie

Kreator prowadzi krok po kroku i na bieżąco buduje zdanie podsumowujące wybór, więc użytkownik cały czas widzi, co zamawia. Sekcje rozwijają się i zwijają, żeby formularz nie przytłaczał na starcie.

Layout opiera się na siatce, która skaluje się od telefonu po desktop bez łamania proporcji z projektu.

Kreator planu z listą kroków i rozwijanymi pytaniami o preferencje

Kreator planu subskrypcji Coffee Roasters w widoku mobilnym

Technologie

React
TypeScript
SCSS
React Router
Netlify

Zakres i efekty

Co dokładnie zrobiliśmy

Wielostronicowa strona marki kawowej z kreatorem planu subskrypcji i dopracowanym layoutem.

Klient: Frontend Mentor
Termin: Marzec 2025
Rola: Projekt treningowy
Czas realizacji: 2-4 tyg.

RWD
wielostronicowy layout
kreator planu kawowego
Frontend Mentor

Efekt

estetyczna prezentacja produktu z intuicyjną ścieżką wyboru planu

Ścieżka wyboru: Kreator planu w czterech krokach
Zgodność z designem: Odwzorowanie makiet na każdej szerokości
RWD: Jedna siatka od telefonu po desktop

Inne realizacje

Sprawdź pozostałe projekty

Zobacz całe portfolio

WWW / e-commerce

Sugar Madam — witryna studia urody ze sklepem i panelem CMS

Witryna studia urody z Zielonej Góry łącząca wizytówkę marki, sklep z kosmetykami i rezerwację wizyt. Strony marketingowe renderowane po stronie serwera pod kątem lokalnego SEO, sklep obsługiwany przez Stripe Checkout z ceną liczoną wyłącznie serwerowo, a zamówienia trafiają do panelu CMS, w którym właścicielka samodzielnie zarządza produktami, cennikiem i galerią.

projekt UX/UI
sklep i płatności Stripe
panel CMS (Payload)
SEO lokalne
maile powtierdzające transakcje

Efekt: jedno miejsce, które prezentuje ofertę, sprzedaje kosmetyki i prowadzi do rezerwacji wizyty

Czas: 4 tyg.

Zobacz case study

WWW / marka osobista

Bastet Studio — portfolio fotografki

Portfolio Pauliny Bukalskiej, fotografki z Lublina, zaprojektowane wokół pełnoekranowych historii zdjęciowych, subtelnych animacji i prostego kontaktu. Serwis łączy charakterystyczny język wizualny marki z wydajnym, dostępnym frontem i lokalnym SEO.

projekt UX/UI
interaktywne galerie
SEO lokalne
formularz z Turnstile

Efekt: spójna witryna marki, która prezentuje sesje i prowadzi do zapytania o termin

Czas: 3 tyg.

Zobacz case study

WWW / lokalny biznes

Ten Vape - strona dla lokalnego sklepu

Wizerunkowo-informacyjna strona dla vape shopu w Lublinie, która szybko pokazuje ofertę, lokalizacje, godziny otwarcia, opinie klientów i najważniejsze informacje przed wizytą w sklepie.

projekt UX/UI
Animacje
SEO lokalne
FAQ i opinie Google

Efekt: czytelna wizytówka online wspierająca ruch w sklepach stacjonarnych

Czas: 4-6 tyg.

Zobacz case study

Następny projekt

Masz pomysł, brief albo problem do rozwiązania?

Wyślij nam kontekst. Wrócimy z pytaniami, sensownym zakresem i kierunkiem, który da się wdrożyć bez przepalania budżetu.

Skontaktuj się Zobacz usługi