Jak stworzyć niesamowitą stronę internetową za pomocą AI? ChatGPT, Codex i Gemini w praktyce

Jesteś światowej klasy zespołem składającym się z senior creative developera, art directora, projektanta UX/UI specjalizującego się w luksusowych stronach produktowych, eksperta od zaawansowanych animacji GSAP, senior frontend engineera React oraz specjalisty optymalizacji wydajności. Twoim zadaniem jest samodzielne zaprojektowanie i zbudowanie od podstaw kompletnej, niezwykle efektownej, w pełni funkcjonalnej, responsywnej strony internetowej dla fikcyjnego polskiego producenta pergoli aluminiowych premium o nazwie LAMELIO. Nie oczekuję zwykłego szablonu, makiety, demonstracji kilku animacji ani przeciętnego landing page'a. Oczekuję dopracowanego doświadczenia cyfrowego klasy premium, które pod względem kompozycji, typografii, animacji, interakcji i narracji produktowej może konkurować z najlepszymi realizacjami prezentowanymi na Awwwards, MotionSites i stronach renomowanych studiów kreatywnych. Strona ma wyglądać jak projekt wykonany na indywidualne zamówienie przez luksusową agencję interaktywną, ale jednocześnie musi być wiarygodną, praktyczną witryną prawdziwego polskiego producenta pergoli. Nie przesadzaj z abstrakcyjnymi ozdobnikami, efektami science fiction, szklanymi panelami, gradientami ani ogromnymi zaokrąglonymi kartami. Fundamentem projektu ma być profesjonalna fotografia architektoniczna w postaci dostarczonego wideo, perfekcyjna typografia, przemyślany układ, bardzo wysokiej jakości mikrointerakcje, animacje reagujące na przewijanie oraz wyrafinowany minimalizm. STOS TECHNOLOGICZNY: wykorzystaj React 19 z TypeScript, Vite, Tailwind CSS w aktualnej stabilnej wersji, GSAP wraz ze ScrollTrigger jako podstawowy silnik zaawansowanych animacji oraz Lucide React do ikon. Możesz użyć dodatkowych niewielkich bibliotek, jeżeli mają konkretne uzasadnienie techniczne, ale nie instaluj przypadkowych zależności. Wykorzystaj CSS custom properties do zarządzania kolorami, rozmiarami, rytmem typograficznym i animacjami. Zadbaj o czytelną, modułową strukturę komponentów, pełne typowanie TypeScript, poprawne zarządzanie cyklem życia GSAP w React i profesjonalną jakość kodu. W folderze projektu znajduje się film o nazwie pergola_loop.mp4 przedstawiający nowoczesną aluminiową pergolę z ruchomymi lamelami dachowymi w luksusowym ogrodzie. Znajdź ten plik w projekcie i wykorzystaj go jako absolutnie najważniejszy element wizualny strony. Nie zastępuj go innym filmem, nie generuj nowego materiału i nie korzystaj z zewnętrznego hostingu wideo. Jest to przygotowana wcześniej animacja zapętlona metodą ping-pong, dlatego nie zmieniaj jej kolejności klatek ani kierunku odtwarzania. Wideo powinno być odtwarzane automatycznie, bez dźwięku, w nieskończonej pętli, z atrybutami autoplay, muted, loop i playsInline, bez kontrolek odtwarzania. Przygotuj również wysokiej jakości statyczny poster wyodrębniony z filmu. Wideo musi zajmować cały ekran jako warstwa tła, z odpowiednim object-fit: cover i starannie przemyślanym object-position. Zachowaj maksymalną widoczność pergoli, ponieważ to produkt, który sprzedajemy. Tło nie może być nadmiernie przyciemnione. Zastosuj lokalne, inteligentnie rozmieszczone gradienty, które zwiększają kontrast tekstu wyłącznie w obszarach zajmowanych przez treść. Na desktopie centralna pergola powinna pozostawać głównym obiektem wizualnym, a układ tekstów należy dopasować do jej rzeczywistego położenia w kadrze. Na smartfonach dostosuj kadrowanie i rozmiar warstw, aby użytkownik nie oglądał przypadkowego fragmentu filmu. ABSOLUTNIE KLUCZOWE ZAŁOŻENIE PROJEKTOWE: pierwsza, najbardziej spektakularna część strony ma być zaawansowaną, wieloetapową prezentacją scrollytelling, w której wideo pozostaje stale nieruchome względem okna przeglądarki, a użytkownik przewijając stronę przechodzi przez kolejne rozdziały treści bez fizycznego przesuwania tła. Chcę efektu przypiętej sceny, znanego z interaktywnych prezentacji produktów Apple i luksusowych stron architektonicznych. Nie twórz zwykłego slidera, karuzeli ani kolejnych sekcji umieszczonych pod sobą. Zaprojektuj jeden pełnoekranowy obszar typu pinned stage, utrzymywany w tym samym miejscu podczas przewijania przez około siedem lub osiem kolejnych rozdziałów. Wewnątrz tej sceny treść ma płynnie transformować się pomiędzy kolejnymi kompozycjami. Wykorzystaj GSAP ScrollTrigger, pinning i precyzyjne mapowanie postępu przewijania na oś czasu animacji. Tło wideo ma nadal niezależnie odtwarzać się w pętli; scroll nie powinien sterować czasem filmu, ponieważ chcę zachować jego naturalny, ciągły ruch. Nie stosuj kilku kopii tego samego filmu ani nie przeładowuj go przy zmianie rozdziałów. Jeden element video ma być stale zamontowany i widoczny przez cały pinned storytelling. Poszczególne rozdziały mogą mieć pozycjonowanie absolutne wewnątrz wspólnej sceny, ale tylko aktywny rozdział może przechwytywać interakcje użytkownika. Zadbaj o poprawną kolejność warstw, pointer-events, aria-hidden i focus management, aby niewidoczne elementy nie pozostawały aktywne. ScrollTrigger musi poprawnie obsługiwać przewijanie w obie strony: użytkownik może przewijać w dół oraz w górę, a wszystkie animacje mają być w pełni odwracalne, bez migotania, powielania elementów, przeskoków i utraty synchronizacji. Nie implementuj sztucznego blokowania kółka myszy ani agresywnego przechwytywania zdarzeń scroll, które psuje natywne przewijanie. Zamiast tego zastosuj odpowiednio długi scroll distance, pinSpacing, scrub oraz timeline GSAP. Możesz zastosować subtelny snapping do kolejnych rozdziałów, ale wyłącznie jeśli nie pogorszy komfortu obsługi touchpada, kółka myszy i urządzeń dotykowych. Każda plansza ma mieć własną wyraźnie odmienną kompozycję, a nie tylko podmieniany nagłówek w identycznym miejscu. Przejścia mają wykorzystywać wyrafinowane animacje masek tekstowych, clip-path, translacje, subtelne skalowanie, kontrolowane rozmycie, zmianę przezroczystości, animowane linie oraz wejścia elementów z odpowiednio dobranym opóźnieniem. Wszystkie animacje muszą być spójne stylistycznie i oparte na wyczuciu czasu. Zastosuj głównie animacje transform i opacity, z uwzględnieniem wydajności GPU. Unikaj niepotrzebnego animowania kosztownych właściwości layoutu. KIERUNEK WIZUALNY: zaprojektuj identyfikację marki LAMELIO jako połączenie nowoczesnej architektury, precyzyjnej inżynierii i eleganckiego stylu życia. Dominujące kolory to głęboki antracyt #171C1B, ciepła złamana biel #F3F0E8, stonowany beż #C9BDAA oraz subtelny akcent oliwkowo-szałwiowy #A5AC96. Korzystaj z kolorów świadomie i oszczędnie. Typografia powinna być wyrazista, współczesna i prestiżowa. Wybierz profesjonalną rodzinę bezszeryfową o architektonicznym charakterze, np. Manrope lub Plus Jakarta Sans, a wybrane słowa w wielkich hasłach możesz wyróżnić elegancką kursywą szeryfową, np. Instrument Serif Italic. Nie nadużywaj kursywy. Stwórz własny logotyp typograficzny LAMELIO z dyskretnym symbolem inspirowanym równoległymi lamelami dachowymi. Logo powinno być wykonane kodem SVG lub CSS, aby było ostre przy każdej rozdzielczości. Zadbaj o piękną hierarchię nagłówków, duże i świadomie wykorzystywane przestrzenie negatywne, precyzyjnie dopracowane marginesy i dopasowanie treści do proporcji kadru. HEADER: na górze strony stwórz luksusową, transparentną nawigację z logo LAMELIO po lewej, pozycjami „Pergole”, „Technologia”, „Realizacje”, „O nas”, „Kontakt” oraz wyróżnionym przyciskiem „Zaprojektuj pergolę” po prawej. Header powinien być zintegrowany z wizualną kompozycją sceny i nie może przypominać gotowego komponentu Bootstrap. Zastosuj subtelną linię oddzielającą, lekkie rozmycie tła tylko tam, gdzie faktycznie pomaga czytelności, eleganckie hover effects i dopracowaną animację mobilnego menu. Header ma reagować na przejście między ciemną sceną filmową a jasnymi sekcjami dalszej strony, automatycznie zmieniając wariant kolorystyczny w odpowiednim momencie. W pierwszym etapie storytellingu wyświetl duży, mocny, spektakularny nagłówek „Przestrzeń, która oddycha.”, z wyróżnieniem słowa „oddycha” elegancką kursywą. Nad nim niewielki podpis „PERGOLE ALUMINIOWE NOWEJ GENERACJI”. Pod nim opis: „Tworzymy pergole, które pozwalają cieszyć się przestrzenią na własnych zasadach. Światło, cień i komfort w doskonałej harmonii.” Dodaj dwa przyciski: „Poznaj nasze pergole” oraz „Zobacz możliwości”. Jeden powinien być wypełniony ciepłą jasną barwą, drugi transparentny z eleganckim obramowaniem. Przyciski muszą faktycznie działać i prowadzić do odpowiednich fragmentów witryny. Stwórz premium intro animation: logo pojawia się subtelnie, główny nagłówek odsłania się linia po linii, opis płynnie wyłania się pod nim, a następnie wchodzą przyciski. Zadbaj, aby animacja wejścia nie powodowała ukrywania treści przez zbyt długi czas. W dolnej części sceny dodaj wskaźnik przewijania z cienką animowaną linią i napisem „PRZEWIŃ, ABY ODKRYĆ”, oznaczenie „01 / 08” oraz bardzo elegancki pionowy lub poziomy progress indicator pokazujący postęp całej historii. Wskaźnik musi aktualizować się na podstawie faktycznej pozycji przewijania, a nie sztucznego timera. ROZDZIAŁ DRUGI — „Architektura dopasowana do życia”: pierwsze hasło znika za pomocą miękkiego mask reveal, a z prawej lub lewej strony wjeżdża duży numer 02 i nowe hasło „Nie tylko zadaszenie. Nowy wymiar codzienności.” Towarzyszy mu krótki, elegancki opis o tym, jak pergola zmienia taras w funkcjonalną przestrzeń wypoczynku. Dodaj minimalistyczne etykiety wskazujące elementy widocznej pergoli: „Konstrukcja aluminiowa”, „Ruchome lamele”, „Zintegrowane oświetlenie”. Etykiety powinny mieć cienkie linie prowadzące do odpowiednich obszarów produktu, ale nie zakładaj na ślepo położenia obiektów — przeanalizuj kadr filmu i dostosuj pozycje. Elementy nie mogą zasłaniać produktu ani być przypadkowo rozmieszczone. ROZDZIAŁ TRZECI — „Światło pod Twoją kontrolą”: zmień kompozycję na bardzo duży nagłówek oraz minimalistyczny interaktywny panel z napisem „Dopasuj kąt lameli”. Zaprojektuj efektowny suwak z zakresem od 0 do 90 stopni, który użytkownik może płynnie przesuwać. Suwak ma animować stworzoną kodem schematyczną, trójwymiarową lub pseudotrójwymiarową wizualizację kilku lameli, pokazując rzeczywisty obrót ich przekroju oraz zmianę przepuszczania światła. Nie udawaj, że suwak fizycznie steruje lamelami na odtwarzanym filmie — film pozostaje niezależny, a interaktywna demonstracja jest osobnym elementem interfejsu. Wykorzystaj CSS transforms, SVG lub lekką implementację Canvas, wybierając rozwiązanie zapewniające precyzyjny i atrakcyjny efekt. Zastosuj dynamiczny odczyt kąta i zmianę wizualizacji cienia na podłożu. Zadbaj o obsługę myszy, dotyku i klawiatury. Interaktywny panel ma pozostać aktywny i czytelny, nie uruchamiaj w jego trakcie niekontrolowanego scrollowania, które uniemożliwiałoby manipulację suwakiem. ROZDZIAŁ CZWARTY — „Komfort bez względu na pogodę”: wprowadź efektowny układ trzech cech technologicznych: „Ochrona przed słońcem”, „Odprowadzanie wody”, „Trwała konstrukcja”. Każda cecha ma mieć własną elegancką ikonę SVG, krótkie objaśnienie i animację ujawniającą kolejne detale. Możesz stworzyć subtelne schematy techniczne lub architektoniczne linie i geometryczne ilustracje wykonane kodem. Nie umieszczaj tutaj fikcyjnych certyfikatów, parametrów wytrzymałościowych ani obietnic technicznych niepopartych danymi. Treści mają być realistyczne marketingowo i zgodne z charakterystyką przykładowych pergoli lamelowych. ROZDZIAŁ PIĄTY — „Jedna konstrukcja. Nieskończone możliwości.”: wyświetl trzy warianty zastosowania pergoli: „Przy domu”, „W ogrodzie”, „Dla biznesu”. Warianty zaprezentuj jako bardzo eleganckie, duże panele tekstowo-wizualne z numeracją 01, 02, 03, przy czym interfejs powinien reagować na najechanie kursorem albo wybór danego wariantu. Każdy wariant ma odsłaniać własny opis i istotne cechy zastosowania. Dla zastosowania przy domu opisz taras i strefę relaksu; w ogrodzie — niezależną strefę wypoczynku; dla biznesu — przestrzeń restauracji, hotelu lub obiektu usługowego. Nie używaj zwykłych kart z ogromnym border-radius. Inspiruj się luksusowymi katalogami architektonicznymi i nowoczesnym edytorialowym layoutem. ROZDZIAŁ SZÓSTY — „Detal tworzy różnicę”: zaprezentuj jakość konstrukcji, estetykę wykończeń i możliwość dopasowania kolorystycznego. Stwórz interaktywny selektor trzech przykładowych kolorów konstrukcji: antracyt, jasny szary i biały. Wybór koloru powinien zmieniać barwę realistycznej, przygotowanej w kodzie wizualizacji fragmentu profilu aluminiowego lub schematu pergoli, bez fałszowania oryginalnego filmu. Wariant wybrany musi być czytelnie oznaczony. Możesz zastosować realistyczne gradienty materiałowe wyłącznie wewnątrz wizualizacji samego aluminium. ROZDZIAŁ SIÓDMY — „Od pomysłu do Twojego tarasu”: przedstaw w jednej scenie cztery etapy współpracy: „Rozmowa”, „Projekt”, „Produkcja”, „Montaż”. Zbuduj efektowną, animowaną linię procesu, która odsłania kolejne punkty podczas postępu przewijania. Każdy etap ma otrzymać zwięzły, profesjonalny opis. Przewijanie powinno sterować animacją linii, numerami i zmianami opisów. Nie buduj tu ogromnego bloku tekstu — całość ma być łatwa do zrozumienia na pierwszy rzut oka. ROZDZIAŁ ÓSMY — finałowa plansza sprzedażowa: stopniowo wycisz pozostałe elementy UI, pozostawiając film w całej okazałości. Na jego tle wyświetl monumentalne hasło „Twój taras zasługuje na więcej.”, pod nim zdanie „Opowiedz nam o swojej przestrzeni. Pomożemy stworzyć pergolę dopasowaną do Twoich potrzeb.” oraz duży, elegancki przycisk „Rozpocznij projekt”. Dodaj dyskretną informację „Projekt • Produkcja • Montaż” oraz płynnie animowaną strzałkę sugerującą dalszą część strony. Ten finał ma być emocjonalnym zwieńczeniem całego storytellingu, a nie zwykłym banerem CTA. Po zakończeniu ósmego rozdziału pinned scene ma się naturalnie odpiąć i udostępnić dalszą część strony. Zaprojektuj to przejście szczególnie efektownie: podczas ostatniego odcinka przewijania ciemna, filmowa scena może zostać delikatnie zasłonięta przez jasną powierzchnię nadchodzącej sekcji, przy czym wideo cały czas pozostaje zakotwiczone i nie przesuwa się względem viewportu do chwili zakończenia przypięcia. Możesz wykorzystać elegancki reveal w postaci jasnej płaszczyzny wchodzącej od dołu lub maskę, która odsłania kolejną sekcję, ale nie stosuj gwałtownych cięć, migotania tła ani przypadkowych zmian skali. DALSZA CZĘŚĆ STRONY: po zakończeniu filmowego storytellingu stwórz w pełni rozbudowaną, rzeczywistą stronę producenta pergoli, która nadal prezentuje najwyższą jakość designu. W odróżnieniu od przypiętej sceny dalsza część może przewijać się naturalnie, z subtelnymi animacjami wejścia elementów. Sekcja „Nasze pergole” powinna przedstawiać trzy przykładowe linie produktowe: LAMELIO ONE — minimalistyczna pergola przyścienna dla nowoczesnych tarasów, LAMELIO FREE — wolnostojąca konstrukcja ogrodowa oraz LAMELIO PRO — rozbudowane rozwiązanie dla większych przestrzeni i zastosowań komercyjnych. Każdy model powinien mieć własny duży panel prezentacyjny, opis zastosowania, najważniejsze zalety i przycisk „Poznaj model”. Nie wymyślaj szczegółowych wymiarów, certyfikatów ani parametrów nośności. Zamiast fabrykować zdjęcia produktów albo używać losowych obrazów z internetu, wykorzystaj autorskie wizualizacje SVG/CSS, starannie przygotowane kompozycje typograficzne oraz ewentualnie statyczne kadry z dostarczonego filmu, jeżeli zachowują wysoką jakość i mają sens wizualny. Zadbaj o to, by trzy modele wyglądały jak spójna rodzina produktów, a nie trzy przypadkowe oferty. Następnie przygotuj sekcję „Technologia w służbie komfortu” z efektowną demonstracją przekroju lameli, odprowadzania wody i możliwości integracji oświetlenia. Ilustracje powinny być wykonane w kodzie, estetyczne, uproszczone technicznie i wyraźnie opisane jako wizualizacje poglądowe, jeżeli nie są rzeczywistymi przekrojami konstrukcyjnymi. Kolejna sekcja ma prezentować inspiracje i zastosowania pergoli. Zaprojektuj wysokiej jakości galerię o charakterze architektonicznego portfolio, z dużą, asymetryczną siatką elementów, zróżnicowanymi proporcjami i subtelnymi animacjami hover. Jeśli nie ma zdjęć realizacji, nie udawaj, że istnieją. Przygotuj wizualnie atrakcyjne przykładowe kompozycje lub wyraźnie oznaczone koncepcyjne inspiracje, które użytkownik może później zastąpić własnymi fotografiami. Nie korzystaj z losowych zewnętrznych adresów URL, które mogą przestać działać. Stwórz również sekcję „Dlaczego LAMELIO?” opartą na rzeczywistych korzyściach użytkowych: projekt dopasowany do przestrzeni, estetyka aluminium, możliwość regulacji światła, przemyślane wykończenie i wsparcie podczas doboru rozwiązania. Nie wymyślaj lat działalności, liczby realizacji, opinii klientów, nagród, danych firmy ani gwarancji. Jeżeli prezentujesz liczby, muszą to być uzasadnione elementy oferty, np. trzy linie produktowe albo cztery etapy procesu, a nie sfabrykowane osiągnięcia. Zaprojektuj następną sekcję jako interaktywny konfigurator wstępny pergoli. Konfigurator ma pozwalać użytkownikowi wybrać rodzaj zabudowy: przyścienna lub wolnostojąca, orientacyjny rozmiar, kolor konstrukcji, oświetlenie LED i osłony boczne. Nie musi podawać ostatecznej ceny, ponieważ wymagałoby to rzeczywistego cennika, ale musi działać jako prawdziwy interaktywny komponent React ze stanem, walidacją i dynamicznym podsumowaniem wyborów. Przycisk „Wyślij zapytanie o wycenę” powinien przenosić wybraną konfigurację do formularza kontaktowego i automatycznie wypełniać podsumowanie. Zadbaj o estetyczne kontrolki, logiczne etapy, czytelną informację o aktualnych wyborach i możliwość cofania zmian. Konfigurator ma wyglądać jak element luksusowej strony produktowej, a nie standardowy formularz administracyjny. Następnie przygotuj sekcję „Jak wygląda współpraca?” w formie eleganckiej osi procesu z czterema etapami. Możesz wykorzystać duże numery, animowane linie i wyrafinowaną typografię. Dodaj sekcję z odpowiedziami na kilka najważniejszych pytań związanych z pergolami, takich jak możliwość montażu na istniejącym tarasie, dobór konstrukcji, regulacja lameli i indywidualna wycena. Odpowiedzi mają być rzeczowe i nie mogą zawierać niezweryfikowanych obietnic technicznych ani prawnych. Przygotuj sekcję kontaktową z dużym hasłem „Zacznijmy od Twojej przestrzeni.”, estetycznym formularzem obejmującym imię, adres e-mail, opcjonalny telefon, rodzaj pergoli i opis projektu. Dodaj poprawną walidację, komunikaty błędów i potwierdzenie przygotowania zapytania. Ponieważ nie ma podłączonego backendu, nie udawaj, że dane zostały wysłane na serwer. Możesz zastosować działający mechanizm mailto z odpowiednio sformatowaną wiadomością lub przygotować modularną warstwę do podłączenia prawdziwego API. Jeśli używasz mailto, jasno informuj użytkownika o otwarciu programu pocztowego. Nie wymyślaj numerów telefonów, adresów, danych rejestrowych ani fizycznej siedziby firmy. Stopka powinna zawierać pięknie zaprojektowane logo LAMELIO, krótką deklarację marki, linki do najważniejszych sekcji oraz dyskretną informację, że jest to demonstracyjny projekt strony. MIKROINTERAKCJE: cały projekt powinien być bogaty w subtelne, jakościowe interakcje. Przyciski mogą mieć animowaną strzałkę, przesuwające się wypełnienie lub elegancką maskę tekstową. Linki nawigacyjne powinny odsłaniać cienką linię podczas hover. Karty produktów mogą delikatnie reagować na pozycję kursora, ale efekt musi być bardzo subtelny. Wskaźnik postępu scrollytellingu powinien mieć animowany pasek i aktywną numerację rozdziału. Rozważ własny minimalistyczny kursor tylko na urządzeniach z precyzyjnym wskaźnikiem i tylko jeśli faktycznie poprawia wygląd; nie zastępuj standardowego kursora w sposób pogarszający użyteczność. Dodaj animacje liczników jedynie dla danych, które rzeczywiście wynikają z zawartości strony, nie twórz fikcyjnych statystyk. Możesz wykorzystać efekty maskowania obrazu i reveal przy wejściu kolejnych sekcji. Zadbaj o elegancki stan focus-visible i płynne przechodzenie pomiędzy interakcjami. NAWIGACJA I OBSŁUGA SCROLLA: wszystkie linki nawigacyjne i CTA muszą działać. Kliknięcie w pozycję dotyczącą konkretnego rozdziału pinned storytellingu powinno przewijać dokument do właściwej pozycji na osi ScrollTrigger, a nie tylko próbować scrollować do absolutnie pozycjonowanego elementu. Przejście do sekcji znajdujących się poniżej musi być poprawne również przy odświeżeniu strony z hashem URL. Jeśli wykorzystujesz GSAP ScrollToPlugin, zadbaj o prawidłową konfigurację; możesz też zastosować natywne scrollTo z wyliczoną pozycją. Przy przewijaniu do formularza z konfiguratora zachowaj wybrane dane. Stwórz przejrzystą architekturę rozdziałów i mapowanie numerów na scroll progress, tak aby łatwo można było później edytować treści, liczbę plansz i czasy animacji bez przebudowy całego projektu. Nie powoduj przypadkowego przewijania do pierwszego ekranu przy zmianie stanu komponentów. RESPONSYWNOŚĆ: na desktopie 1920 × 1080 i 1440 × 900 strona ma prezentować się spektakularnie. Na laptopach 1366 × 768 i mniejszych wysokościach viewportu zadbaj o odpowiednie skalowanie typografii oraz ograniczanie wysokości komponentów. Na tabletach układ powinien pozostać czytelny i elegancki, z dostosowaną długością animacji. Na telefonach nie próbuj mechanicznie zmniejszać desktopowych layoutów. Zaprojektuj osobną kompozycję mobilną: bardziej zwartą typografię, odpowiednio kadrowane wideo, przewidywalną nawigację i duże pola dotykowe. Jeżeli pełny pinned storytelling okaże się niewygodny na małych ekranach, przygotuj świadomie uproszczoną, mobilną wersję historii z krótszymi etapami i bez kosztownych efektów rozmycia, nadal zachowując wspólne, nieruchome tło podczas głównych przejść. Użyj dynamicznych jednostek viewportu z odpowiednim fallbackiem, uwzględnij safe-area-inset i zapobiegaj poziomemu przewijaniu. Menu mobilne powinno otwierać się płynnie, być obsługiwane klawiaturą, mieć możliwość zamknięcia klawiszem Escape i blokować przewijanie tła tylko na czas otwarcia menu. WYDAJNOŚĆ: strona musi być możliwie lekka i płynna. Nie twórz animacji, które powodują permanentne przeliczanie layoutu, nie montuj wielu kopii filmu, nie stosuj ogromnych filtrów blur na pełnym ekranie i nie wprowadzaj ciężkiego silnika 3D, jeśli efekt można osiągnąć przy pomocy CSS, SVG i GSAP. Przygotuj poster wideo, zoptymalizuj zasoby lokalne, stosuj lazy loading dla elementów poniżej pierwszego ekranu, poprawne rozmiary zasobów oraz nowoczesne formaty, kiedy to uzasadnione. Zapewnij, że tekst i CTA pierwszego ekranu pozostają widoczne również wtedy, gdy film nie może zostać automatycznie odtworzony. W przypadku prefers-reduced-motion wyłącz ciężkie animacje, usuń wymuszony pinning, jeśli staje się nieergonomiczny, i zapewnij normalne, dostępne przewijanie przez treść. Rozważ zatrzymanie wideo przy preferencji ograniczonego ruchu. Dopracuj Core Web Vitals, szczególnie CLS, LCP i INP. Unikaj renderowania kosztownych elementów przy każdym pikselu scrolla; nie synchronizuj całej animacji React state, lecz użyj GSAP do aktualizacji właściwości animowanych. W razie potrzeby ogranicz aktualizację wskaźników React do rzeczywistych zmian aktywnego rozdziału. DOSTĘPNOŚĆ: poprawna hierarchia nagłówków, semantyczne sekcje, opisowe przyciski, etykiety formularzy, widoczne stany focus, prawidłowy kontrast tekstu na dynamicznym tle oraz poprawne atrybuty ARIA. Nie dopuść, by ukryte plansze pozostawały dostępne w kolejności tabulacji. Przy zmianie rozdziałów nie przenoś agresywnie fokusu użytkownika, ale zapewnij możliwość dostępu do treści klawiaturą i czytnikiem ekranowym. Rozwiąż konflikt pomiędzy warstwą dekoracyjnego wideo a interaktywnymi elementami strony, ustawiając wideo jako nieinteraktywne tło. Dodaj alternatywną, czytelną strukturę treści dla użytkowników z ograniczonym ruchem i technologii asystujących. SEO: wszystkie widoczne teksty mają być po polsku, html lang="pl", profesjonalny meta title i meta description, odpowiedni viewport, Open Graph, Twitter Cards, logiczna struktura H1-H2-H3, canonical możliwy do skonfigurowania przez domenę i podstawowy JSON-LD typu Organization lub WebSite bez wymyślonych danych kontaktowych. Upewnij się, że podstawowa treść strony pozostaje dostępna bez odtwarzania filmu. JAKOŚĆ REALIZACJI: zanim rozpoczniesz kodowanie, przeanalizuj strukturę folderu projektu, sprawdź wideo i wyodrębnij kilka klatek referencyjnych, aby zrozumieć położenie pergoli, rozkład świateł i kompozycję tła. Następnie przygotuj przemyślaną architekturę aplikacji i wdroż ją w całości. Nie pokazuj wyłącznie planu — wykonaj wszystkie kroki. Utwórz komponenty odpowiedzialne za filmowe tło, nawigację, pinned storytelling, poszczególne rozdziały, wskaźnik postępu, interaktywny demonstrator lameli, konfigurator, sekcje ofertowe, galerię i formularz kontaktowy. Oddziel dane produktów i treści od komponentów, aby edycja była łatwa. Utrzymuj porządek w plikach i spójne nazewnictwo. Zadbaj o cleanup GSAP i ScrollTrigger po odmontowaniu komponentów, eliminację problemów w React StrictMode, poprawne przeliczanie pozycji po resize, zmianie orientacji ekranu i załadowaniu fontów, a także brak wycieków pamięci i powielonych instancji timeline. Uruchom lokalny serwer developerski, wykonaj build produkcyjny i sprawdź błędy TypeScript, konsoli oraz działania wszystkich kluczowych interakcji. Jeśli środowisko umożliwia testowanie w przeglądarce, przetestuj scrollowanie na desktopie, urządzeniach mobilnych, przewijanie wstecz, szybki scroll, klikanie CTA, konfigurator i formularz. Jeśli wykryjesz problemy, napraw je przed zakończeniem pracy. Nie kończ zadania po wygenerowaniu pierwszej działającej wersji — przeprowadź dodatkowy etap dopracowania wizualnego, oceniając typografię, spacing, kontrast, rytm przejść, dopasowanie kompozycji do filmu oraz jakość mikrointerakcji. Na koniec przygotuj krótką instrukcję uruchomienia projektu i wskaż, które elementy są demonstracyjne i wymagają podmiany na rzeczywiste dane producenta. NAJWAŻNIEJSZE KRYTERIUM SUKCESU: użytkownik wchodzący na stronę ma zobaczyć piękną, prawdziwą pergolę w ruchu na całym ekranie, a następnie podczas przewijania doświadczać spektakularnej, lecz eleganckiej historii produktu, w której film pozostaje w jednym stałym miejscu, a kompozycje tekstów, demonstracje technologii, interaktywne elementy i argumenty sprzedażowe płynnie się zmieniają. Efekt ma być tak dobry, aby oglądający poradnik YouTube był autentycznie zaskoczony, że tak zaawansowana strona powstała z jednego wideo AI i kodu wygenerowanego przez Codex. Nie pytaj o dodatkowe szczegóły projektowe — podejmuj samodzielnie profesjonalne decyzje w ramach podanej koncepcji. Nie rezygnuj z trudniejszych efektów na rzecz prostego szablonu. Priorytetem jest jakość wizualna, płynność działania, poprawność techniczna i kompletny rezultat gotowy do lokalnej prezentacji.