Sceny procesu w katalogach — propozycja adaptacji

Źródło wskazane przez Daniela: wcześniejszy audyt Dealyo AI-Ready. To punkt odniesienia dla kompozycji scen, a nie nowy standard marki. Sceny zasobów i szablonów zostały następnie przebudowane w nowe propozycje procesów, inspirowane także demonstracjami Firecrawl. Nie są kopiami źródłowych animacji.

Oryginalna implementacja to ProcessVisual i pomocniczy Window w app/process-visual.tsx oraz odpowiadające im reguły w app/globals.css:337–342. Lokalny projekt źródłowy: /Users/danielstopa/Documents/Codex/2026-09-14/codex-mcp-add-mobbin-url-https/outputs/ai-ready-landing/. Plików tego projektu nie zmieniono.

Pierwsza wersja scen korzystała z miniaturowych interfejsów i zapętlonych sekwencji w assets-process.css, templates-process.css i subpage-motion.css. Zastąpiono ją kompozycjami opisanymi w sekcji „Spójne sceny katalogów”. Inspiracja Firecrawl dotyczy pokazania konkretnej zmiany; nie przejmujemy jego tokenów marki. Ruch nie jest rzeczywistym skanowaniem ani automatyczną produkcją plików.

Ikony są inline SVG o geometrii Lucide z projektu źródłowego. Znak i logo pochodzą z istniejących assets/dealyo-mark.svg i assets/dealyo-logo.svg; nie przerysowano ich. Firecrawl pozostaje zewnętrzną inspiracją prezentacji. Źródłem pierwotnych scen jest wcześniejszy audyt Dealyo; cztery nowe procesy w zasobach i szablonach są osobnymi propozycjami.

Strona główna — procesy

Podglądy raportu, landingu i drogi do kontaktu są nowymi propozycjami demonstracji. Pokazują odpowiednio: obserwację prowadzącą do działania; ofertę, przykład i kontakt składane w stronę; przejście od reklamy przez stronę do wiadomości. Przykładowe obserwacje i wiadomości służą wyjaśnieniu procesu, nie są danymi klienta ani wynikami kampanii.

Demonstracja składu w pierwszej sekcji wykorzystuje oryginalny logotyp, General Sans, ilustrację i kolor Dealyo. Połączenia wynikają z rzeczywistej pozycji źródeł i docelowych elementów; kolejne etapy pokazują, gdzie zastosowano zasób. Gotowy układ pozostaje widoczny i można odtworzyć demonstrację ponownie.

Nowe demonstracje korzystają ze wspólnego przełącznika ruchu strony. Poza ekranem i w ukrytej karcie zatrzymują się; ograniczenie ruchu oraz brak JavaScriptu pozostawiają kompletny rezultat. Zmiany dotyczą prezentacji biblioteki, bez modyfikacji oryginalnych komponentów i plików do pobrania.

Dopracowanie grafik w boxach

Biblioteka pokazuje dwie dodatkowe kompozycje: złożenie miniatury strony z nagłówka, oryginalnej ilustracji i CTA oraz zastosowanie znaku, kroju i koloru na planszy marki. To propozycje prezentacji istniejących elementów, nie nowe funkcje ani generator publikacji. Grafiki korzystają z oryginalnych plików Dealyo; elementy wejściowe, etap składania i rezultat mają własne miejsca w kompozycji.

Punktem odniesienia dla hierarchii grafiki, jasnych powierzchni i prowadzenia wzroku są sekcje Firecrawl z Mobbin. Ruch jest własną adaptacją: zrzuty Mobbin dokumentują wygląd, a nie przebieg animacji.

Wcześniejsze sceny biblioteki używały library-visual-motion.js i mobbin-visual.css, a cztery sceny katalogów powtarzanego cyklu 12 s. Ich aktualne zamienniki i sposób odtwarzania opisano poniżej.

Pozostałe sceny strony głównej rozwijają ten sam sposób prezentacji. Raport pokazuje obserwację i wynikający z niej następny krok, landing składa ofertę, pokaz działania i kontakt, a przepływ łączy reklamę, stronę oraz przygotowaną wiadomość. To przykłady bez danych klienta i bez wysyłki. Plansza publikacji wykorzystuje istniejące eksporty PNG; plansze projektów są kompozycjami referencyjnymi, a nie zrzutami aktualnych stron. Archiwalne obrazy moodboardu pozostają niezmienione.

Aktualizacja istniejących scen — 22.10.2026

Cztery podglądy w bibliotece strony głównej zastąpiono większymi kompozycjami dsf-*: komponenty (hierarchia → ilustracja → działanie), zasoby (SVG / krój / kolor → materiał), raport (źródło → obserwacja → rekomendacja) i landing (oferta → wyjaśnienie → kontakt). Używają tych samych oryginalnych zasobów Dealyo i pozostają demonstracjami, nie rzeczywistą analizą lub generowaniem materiałów.

home-scenes.css i home-scenes.js zastępują wcześniejsze .ml-* oraz raport/landing .hp-* w tych czterech miejscach. Sekwencja trwa 8,4 s widocznego czasu, kończy się pełnym układem i ma przycisk ponownego odtworzenia. home.js nadal jest wspólnym właścicielem pauzy, widoczności i preferencji ruchu. Brak JS i ograniczenie ruchu pokazują stan końcowy. Nazwy i linki istniejących kart pozostały takie same.

Istniejący warsztat .home-workflow korzysta z workflow-visual.css: oryginalne cztery diagramy SVG mają większe pola ilustracji i jednorazowe, etapowe animacje. Nie zmieniono geometrii znaku marki ani źródłowych komponentów. Kierunek prezentacji rozwija nową kompozycję materiał → decyzja, z jawnymi źródłami Firecrawl/Mobbin opisanymi przy tej propozycji.

Spójne sceny katalogów — 22.10.2026

Sześć ilustracji w istniejących katalogach komponentów, zasobów i szablonów rozwija ten sam kierunek co home-scenes: większe dokumenty, czytelne etapy i konkretne powiązanie elementu z rezultatem. To propozycje prezentacji biblioteki. Źródłowe podglądy komponentów, pliki marki i szablony do pobrania pozostają niezależne od tych demonstracji.

catalog-scenes.css definiuje kompozycje, a catalog-scenes.js prowadzi trzy etapy po 2,8 s widocznego czasu. Po 8,4 s pozostaje kompletny rezultat. Przycisk odtwarza wybraną demonstrację ponownie. Wspólny subpage-motion.js steruje pauzą, widocznością i tłem; nie podmienia już ilustracji przez innerHTML. Bez JavaScriptu oraz przy ograniczeniu ruchu HTML pokazuje pełny układ.

Sceny wykorzystują oryginalne zasoby i ikonografię Dealyo; pomarańcz #FE4A23, General Sans, białe CTA i proste narożniki pozostają zasadami marki. Pokazywane fragmenty treści i potwierdzenia są przykładami procesu, nie rzeczywistą wysyłką lub analizą klienta.