pixelated avatar icon of Kuba Nawrot

MAD bikes

MAD bikes

typ

Strona internetowa

rok

2025

sprawdź online
MAD bikes
MTB
GSAP
animacje
inspiracje

A może nowy rower?

Czemu nie! Na codzień jestem pasjonatem kolarstwa w różnych odmianach - tej romantycznej, w której nie liczą się waty i równa kadencja, ale bardziej okoliczności przyrody i odpowiednia ilość przystanków na kawę i lody, ale też tej ekstremalnej, gdzie prędkość przy zjeździe zawęża pole widzenia, zawieszenie pracuje w pełnym zakresie a widok najbliższej hopy powoduje niekontrolowany wzrost adrenaliny (ale i endorfin, zakładając pomyślne lądowanie…)

Zainspirowany jednym z projektów znalezionych na dribbble.com, postanowiłem połączyć jedną pasję z drugą i stworzyć produktowy landing page z wygenerowanym przez AI rowerem do jazdy trailowej/enduro. Krótki film w sekcji hero, nieco danych technicznych, ujęcia prezentujące kluczowe komponenty, mocna typografia - wszystko to zmieszane w jednym garnku, podgrzane do odpowiedniej temperatury ze szczyptą animacji przy wykorzystaniu GSAP - to może być przepis na całkiem przyjemną w odbiorze prezentację produktu.

projekt od strony technicznej

MAD Bikes stworzyłem na bazie Next.js - mimo że na codzień stawiam na Vue i Nuxt.js, to lubię być na bieżąco z innymi technologiami i frameworkami do tworzenia stron i aplikacji.

Strona wykorzystuje GSAP do mniej i bardziej zaawansowanych animacji - ScrollTrigger, Timeline, metody gsap.set, gsap.from, gsap.to można znaleźć w niemal każdym komponencie.

CSS - jak zawsze - z wykorzystaniem TailwindCSS, tym razem już w wersji 4.1.7.

Stack

next.js
tailwindcss
gsap

–  DEVELOPMENT  –  DESIGN  –  strony internetowe  –  aplikacje  

zróbmy coś razem!