PulseSport – koncepcyjny landing page dla siłowni 24/7

PulseSport to projekt koncepcyjny strony dla całodobowego klubu treningowego w Warszawie. Marka, lokalizacja, trenerzy, opinie, statystyki oraz dane biznesowe zostały przygotowane wyłącznie na potrzeby projektu portfolio — nie opisują rzeczywistego klienta Netova.

Celem nie było zrobienie kolejnego fitnessowego landing page'a z dużym sloganem, trzema kartami i kilkoma animacjami. Chciałem zbudować stronę, która ma własny charakter, dobrze prezentuje fizyczną przestrzeń klubu i prowadzi użytkownika od pierwszego kontaktu z marką do sprawdzenia karnetu lub lokalizacji.

W sierpniu 2026 projekt przeszedł większy redesign. Pierwsza wersja była bardziej klasyczna i opierała się mocniej na rozwiązaniach często spotykanych w nowoczesnych landing page'ach. Nowa wersja poszła w kierunku editorial / performance club: mniej ozdobników, mniej zaokrąglonych kart, bardziej świadoma typografia, mocniejsza siatka i wyraźniejszy rytm sekcji.

Status projektu: projekt koncepcyjny / portfolio. Prezentowane wyniki Lighthouse dotyczą wersji demonstracyjnej strony. Projekt nie posiada danych dotyczących sprzedaży, liczby członków, konwersji ani realnych pozycji lokalnych w Google.

Założenie projektu

Zakres odpowiada stronie firmowej z planu Biznes: jedna rozbudowana strona sprzedażowo-wizerunkowa z pełną prezentacją usługi, cennikiem, zespołem, FAQ, kontaktem i lokalizacją.

Najważniejsze cele projektu:

• stworzyć charakterystyczny design dla klubu treningowego,
• jasno pokazać różne strefy i sposób korzystania z obiektu,
• przedstawić karnety bez komplikowania cennika,
• przygotować czytelną strukturę również na telefonach,
• ograniczyć JavaScript po stronie klienta,
• zadbać o SEO techniczne i lokalne,
• zachować bardzo dobre wyniki Core Web Vitals,
• pokazać, że strona portfolio może mieć charakter bez ładowania jej efektami.

1. Kierunek wizualny

PulseSport korzysta z bardzo ograniczonego systemu kolorystycznego:

• #080808 — główne tło,
• #FFD700 — kolor akcentowy,
• złamana biel — kontrast dla ciemnych sekcji,
• jasne tło w grafiku jako świadome przełamanie całej kompozycji.

Zamiast gradientów, glassmorphismu i dużej liczby kart postawiłem na:

• cienkie linie podziału,
• asymetryczne siatki,
• duże fotografie,
• prostokątne CTA,
• numerowanie elementów,
• mocny kontrast typograficzny,
• dużo kontrolowanej pustej przestrzeni.

Nagłówki wykorzystują Barlow Condensed, natomiast tekst podstawowy Archivo. Fonty są obsługiwane przez next/font, więc nie wymagają dodatkowego requestu do Google Fonts po stronie użytkownika.

Typografia jest mocna, ale responsywna. Rozmiary nagłówków zostały dopasowane osobno do telefonów, tabletów i desktopu, żeby duże hasła nie nachodziły na inne elementy i nie psuły rytmu strony na węższych ekranach.

2. Hero bez typowego schematu landing page'a

Hero jest podzielone na dwie części.

Po lewej znajduje się:

• lokalizacja i informacja o dostępności 24/7,
• główny komunikat marki,
• krótkie wyjaśnienie oferty,
• dwa CTA,
• podstawowe statystyki.

Po prawej znajduje się duża fotografia klubu z informacją o lokalizacji.

Na desktopie daje to mocny, asymetryczny układ. Na telefonie layout składa się naturalnie do jednej kolumny — najpierw komunikat i akcje, później zdjęcie.

Nie wykorzystuję tutaj rozbudowanego scroll-parallaxu ani animowania obrazu przy każdej zmianie pozycji scrolla. Priorytetem stała się stabilność renderowania i prostszy frontend.

Obraz hero korzysta z:

• next/image,
• priority,
• fetchPriority="high",
• responsywnego sizes,
• optymalizacji AVIF/WebP przez Next.js.

To najważniejszy obraz pierwszego widoku, dlatego jest traktowany jako element krytyczny dla LCP.

3. System sekcji

Strona nie powtarza jednego schematu „nagłówek + trzy karty” w każdej części. Poszczególne sekcje celowo korzystają z różnych kompozycji.

Pasek marki

Bezpośrednio pod hero działa lekki marquee:

PULSESPORT 24/7 — STRENGTH — CONDITIONING — RECOVERY

Animacja jest realizowana w CSS, bez dokładania biblioteki animacyjnej i bez JavaScriptu działającego w każdej klatce.

Obsługiwane jest również prefers-reduced-motion.

Statystyki

Podstawowe liczby są pokazane w jednej poziomej strukturze:

• 2500 m²,
• 120+ stanowisk,
• 18 trenerów,
• dostęp 24/7.

W projekcie są to dane scenariuszowe służące do pokazania sposobu prezentacji informacji na stronie.

Manifest klubu

Zamiast klasycznych kart z ikonami sekcja wykorzystuje cztery duże wiersze:

• numer,
• krótkie hasło,
• opis.

Układ działa bardziej jak fragment magazynu lub identyfikacji wizualnej niż typowa sekcja „features”.

Strefy treningowe

Cztery strefy tworzą nieregularną galerię:

• Free Weights,
• Performance,
• Recovery,
• Studio GX.

Na dużym ekranie zdjęcia mają różne szerokości i tworzą bardziej dynamiczną kompozycję. Na telefonie przechodzą do jednej kolumny.

Obrazy poza pierwszym widokiem nie są oznaczone jako priority, dzięki czemu nie konkurują z hero podczas początkowego ładowania strony.

Grafik

Grafik świadomie przełamuje dark theme.

Cała sekcja wykorzystuje jasne tło i prostą tabelaryczną strukturę, dzięki czemu użytkownik od razu widzi zmianę kontekstu i może szybko przeskanować tydzień.

Na małych ekranach dane układają się pionowo, a od breakpointu sm przechodzą do pełnego wiersza.

Cennik

Zamiast czterech dużych kart zastosowałem jeden pionowy system wierszy.

Każdy plan ma:

• numer,
• nazwę,
• krótki opis,
• cenę,
• CTA.

Dzięki temu cennik zajmuje mniej miejsca, jest prostszy do porównania i wizualnie pasuje do reszty strony.

Trenerzy

Zespół jest pokazany jako trzy proste profile ze specjalizacją i krótkim opisem sposobu pracy.

W projekcie imiona i profile są elementami scenariusza demonstracyjnego.

Opinie

Opinie zostały potraktowane jako przykład modułu social proof. Nie są to prawdziwe recenzje klientów ani użytkowników PulseSport.

Sekcja wykorzystuje duże cytaty, numerowanie oraz bardzo ograniczoną ilość dekoracji.

FAQ

FAQ korzysta z natywnych elementów HTML details i summary.

Daje to kilka korzyści:

• podstawowe działanie bez dodatkowego JavaScriptu,
• poprawną obsługę klawiatury,
• czytelną strukturę semantyczną,
• mniejszy koszt po stronie klienta.

FAQ pozostaje elementem UX i zawartości strony, bez obietnic dotyczących specjalnych rozszerzeń wyników Google.

Kontakt i mapa

Sekcja kontaktowa prezentuje cztery podstawowe informacje:

• adres,
• telefon,
• e-mail,
• dostępność 24/7.

Google Maps nie jest pobierane przy pierwszym wejściu.

Użytkownik najpierw widzi statyczny moduł lokalizacji, a iframe Google Maps jest tworzony dopiero po kliknięciu „Pokaż lokalizację”.

Pozwala to uniknąć pobierania zewnętrznego iframe i jego zasobów podczas początkowego renderowania.

4. Mobile-first

Redesign był przygotowywany od najmniejszych ekranów, a nie jako desktop pomniejszony przez breakpointy.

Najważniejsze zmiany dla mobile:

• mniejsze i bezpieczniejsze nagłówki,
• większy line-height tam, gdzie tekst może się zawijać,
• osobne odstępy pionowe dla 360–430 px,
• CTA ustawiane pionowo przed breakpointem sm,
• hero bez wymuszania pełnej wysokości viewportu na telefonie,
• jedna kolumna dla galerii stref,
• uproszczony cennik,
• pełnoekranowe menu mobilne,
• duże pola klikalne,
• poprawne focus states,
• ograniczenie kosztownych efektów wizualnych.

Cookie Consent również działa jako mobile-first bottom sheet zamiast małego desktopowego modala wciśniętego na telefon.

5. Frontend

Stack technologiczny:

• Next.js 16
• React 19
• TypeScript 5
• Tailwind CSS 4
• next/image
• next/font
• Lucide React
• Vercel
• PWA Web Manifest

Aktualna wersja strony nie opiera głównego interfejsu na Framer Motion.

Większość sekcji może zostać wyrenderowana po stronie serwera. Client Components są zostawione tylko tam, gdzie rzeczywiście potrzebny jest stan lub interakcja, między innymi:

• menu mobilne,
• mapa click-to-load,
• obsługa zgód cookies.

To ogranicza ilość JavaScriptu wysyłanego do przeglądarki.

6. Decyzje pod Web Vitals

Podczas przebudowy zwracałem uwagę nie tylko na sam wynik Lighthouse, ale również na architekturę, która pozwala utrzymać dobre wyniki po dalszym rozwijaniu strony.

LCP

Główny obraz:

• ładowany przez next/image,
• posiada priority,
• posiada fetchPriority="high",
• ma zdefiniowany sizes,
• nie konkuruje z pozostałymi zdjęciami.

CLS

Layout wykorzystuje z góry określone wysokości i proporcje elementów.

Dodatkowo:

scrollbar-gutter: stable;

ogranicza zmianę szerokości layoutu przy pojawianiu się lub blokowaniu scrollbara.

Cookie Consent kompensuje szerokość scrollbara przy blokowaniu strony, dzięki czemu otwarcie komunikatu nie powinno powodować charakterystycznego przesunięcia całego layoutu.

JavaScript

Nie wykorzystuję biblioteki animacyjnej do prostych efektów, które można wykonać CSS-em.

FAQ działa natywnie przez details, a mapa ładuje zewnętrzny iframe dopiero po interakcji.

Google Analytics jest ładowane dopiero po zaakceptowaniu opcjonalnych cookies i wykorzystuje strategię lazyOnload.

Accessibility

W projekcie uwzględniłem między innymi:

• semantyczne section, article, figure, nav,
• prawidłową strukturę nagłówków,
• opisowe alt,
• widoczne focus-visible,
• odpowiednie aria-label dla menu i mapy,
• obsługę prefers-reduced-motion,
• natywne details/summary dla FAQ.

7. SEO

Projekt pokazuje techniczną bazę pod lokalną stronę usługową.

Zaimplementowane zostały:

• Next.js Metadata API,
• unikalny title,
• meta description,
• canonical,
• Open Graph,
• Twitter Cards,
• robots.ts,
• sitemap.ts,
• poprawna hierarchia nagłówków,
• opisowe teksty alternatywne,
• semantyczny HTML,
• dane strukturalne HealthClub.

Dane strukturalne zawierają przykładowe:

• nazwę klubu,
• opis,
• adres,
• telefon,
• e-mail,
• godziny otwarcia,
• przedział cenowy.

Ponieważ PulseSport jest projektem koncepcyjnym, te dane pokazują sposób implementacji lokalnego SEO, a nie reprezentują rzeczywistej firmy działającej pod wskazanym adresem.

Nie prezentuję również fikcyjnych informacji o pozycjach na frazy typu „siłownia Warszawa”, ponieważ projekt nie był prowadzony jako realna kampania SEO.

8. PWA i metadata

Projekt posiada programowo generowany manifest.ts.

Konfiguracja zawiera między innymi:

• nazwę aplikacji,
• nazwę skróconą,
• start_url,
• kolor tła,
• kolor motywu,
• ikonę.

Dzięki temu strona posiada podstawową konfigurację Progressive Web App i może być rozwijana dalej w kierunku bardziej aplikacyjnego doświadczenia.

Architektura strony

Weryfikacja techniczna wersji demonstracyjnej

Wyniki dotyczą technicznej wersji demonstracyjnej i nie są wynikami biznesowymi fikcyjnego klubu.

Podsumowanie

PulseSport jest przykładem tego, jak podchodzę do stron dla biznesów, w których design musi być czymś więcej niż estetycznym dodatkiem.

Redesign celowo ograniczył typowe schematy nowoczesnych landing page'y: mniej identycznych kart, mniej przypadkowych animacji, mniej dekoracji. W ich miejsce pojawiły się mocna typografia, asymetryczna kompozycja, fotografie, wyraźna hierarchia i prostszy frontend.

Jednocześnie warstwa wizualna nie jest budowana kosztem technicznych fundamentów. Projekt uwzględnia mobile-first, Core Web Vitals, SEO, dostępność, PWA, kontrolowane ładowanie zewnętrznych skryptów oraz ograniczenie JavaScriptu tam, gdzie nie jest potrzebny.

---

Prowadzisz siłownię, studio fitness albo inny biznes usługowy? Porozmawiajmy o stronie przygotowanej pod Twoją ofertę, markę i sposób pozyskiwania klientów.