Landing page dla firmy produkującej maty EVA do samochodów
Opis projektu:
Stworzyłem nowoczesną stronę typu one-page do sprzedaży indywidualnych mat EVA do samochodów. Główne zadanie — stworzenie szybkiego, stylowego i wygodnego landing page'a z naciskiem na konwersję i zamówienia online.
Co zostało zrealizowane:
UI/UX design: minimalistyczny styl, kolory akcentowe, płynne animacje, responsywność na wszystkie urządzenia.
Blok Hero z dużym tłem, nagłówkiem i przyciskami CTA.
Zalety produktu — blok z ikonami i opisem kluczowych plusów.
Galeria prac oparta na Swiper.js z responsywnymi obrazami (webp/avif).
Konfigurator produktu:
wybór marki, modelu i roku samochodu;
wybór wyposażenia, wzoru, koloru i obramowania;
dynamiczne obliczanie kosztów;
maski dla telefonu (Inputmask).
Animacje za pomocą GSAP + ScrollTrigger, płynne przewijanie na Lenis.
Opinie klientów w kartach z animacją pojawiania się.
SEO-optymalizacja:
prawidłowo skonfigurowane meta tagi (title, description, OG, Twitter card);
strukturalne dane Schema.org (Organization + Product);
optymalizowane obrazy z lazy loading.
Część techniczna:
spersonalizowany TailwindCSS przez CDN;
własne style (glass, noise, gradientowe obramowania);
responsywne układanie (mobile-first).
Analiza i reklama: podłączenie Google Tag, Meta Pixel, TikTok Pixel (skomentowane dla klienta).
Wynik:
Szybki, responsywny landing page z interaktywnym konfiguratoriem, który pozwala użytkownikowi skompletować swój zestaw mat EVA i złożyć zamówienie online.
Technologie:
HTML5, Tailwind CSS, JavaScript (ES6), GSAP, ScrollTrigger, Swiper.js, Lenis, Inputmask, Schema.org JSON-LD.
P.S. Stworzone do portfolio. Możliwy wykup:
ekskluzywnie (z przekazaniem wszystkich praw),
na warunkach licencji (prawo do używania bez przekazywania kodu innym osobom).
Stworzyłem nowoczesną stronę typu one-page do sprzedaży indywidualnych mat EVA do samochodów. Główne zadanie — stworzenie szybkiego, stylowego i wygodnego landing page'a z naciskiem na konwersję i zamówienia online.
Co zostało zrealizowane:
UI/UX design: minimalistyczny styl, kolory akcentowe, płynne animacje, responsywność na wszystkie urządzenia.
Blok Hero z dużym tłem, nagłówkiem i przyciskami CTA.
Zalety produktu — blok z ikonami i opisem kluczowych plusów.
Galeria prac oparta na Swiper.js z responsywnymi obrazami (webp/avif).
Konfigurator produktu:
wybór marki, modelu i roku samochodu;
wybór wyposażenia, wzoru, koloru i obramowania;
dynamiczne obliczanie kosztów;
maski dla telefonu (Inputmask).
Animacje za pomocą GSAP + ScrollTrigger, płynne przewijanie na Lenis.
Opinie klientów w kartach z animacją pojawiania się.
SEO-optymalizacja:
prawidłowo skonfigurowane meta tagi (title, description, OG, Twitter card);
strukturalne dane Schema.org (Organization + Product);
optymalizowane obrazy z lazy loading.
Część techniczna:
spersonalizowany TailwindCSS przez CDN;
własne style (glass, noise, gradientowe obramowania);
responsywne układanie (mobile-first).
Analiza i reklama: podłączenie Google Tag, Meta Pixel, TikTok Pixel (skomentowane dla klienta).
Wynik:
Szybki, responsywny landing page z interaktywnym konfiguratoriem, który pozwala użytkownikowi skompletować swój zestaw mat EVA i złożyć zamówienie online.
Technologie:
HTML5, Tailwind CSS, JavaScript (ES6), GSAP, ScrollTrigger, Swiper.js, Lenis, Inputmask, Schema.org JSON-LD.
P.S. Stworzone do portfolio. Możliwy wykup:
ekskluzywnie (z przekazaniem wszystkich praw),
na warunkach licencji (prawo do używania bez przekazywania kodu innym osobom).