Propozycje sekcji Dealyo
Status całego katalogu: Propozycja do oceny. To własne adaptacje researchu Firecrawl, nie zatwierdzone zasady marki ani narzędzia produkcyjne.
Otwórz index.html. Komplet stanowią index.html, proposals.css, proposals.js i assets/ (lokalne fonty General Sans oraz oryginalne logo Dealyo). Ilustracje korzystają też z ../assets/dealyo-mark.svg i ../assets/diagram-method-landing-form.webp. Podgląd nie wymaga instalacji ani sieci. Linki powrotne do biblioteki i notatki źródłowe wymagają zachowania miejsca katalogu we wzorniku; przy przenoszeniu scen zachowaj także dwa wymienione zasoby z katalogu nadrzędnego albo zaktualizuj ich ścieżki.
Co zawiera katalog
- Nagłówek z cichym tłem DOM/SVG; ruch dekoracji nie niesie treści.
- Zakres usługi: trzy karty z dokumentami pokazującymi komunikat → ofertę, hierarchię strony i zapytanie → zadanie. Na desktopie ilustracje i opisy mają wspólne linie. Na tablecie każda karta zestawia ilustrację z opisem, na telefonie układają się pionowo. Oryginalne logo, znak i ilustracja Dealyo zachowują swoje proporcje.
- Skończony diagram Reklama → Strona → Zapytanie → Rozmowa, z ponownym odtworzeniem. Łączniki SVG zajmują rzeczywiste przerwy między węzłami; na tablecie i telefonie prowadzą pionowo. Kursor wskazuje przycisk w aktywnym etapie.
- Dostępne zakładki Marketing / Strona www / Automatyzacja. Strzałki lewo/prawo zmieniają zakładkę, Home/End wybierają pierwszą/ostatnią. Automatyzacja zawiera statyczny przykładowy dziennik.
- Pięć stanów procesu w formie dokumentu z czytelnym wynikiem oraz transformację trzech demonstracyjnych zapytań w trzy wpisy listy. Oznaczenia A/B/C wiążą każde wejście z odpowiadającym mu wynikiem.
Ruch i dane
Każdy pokaz procesu odtwarza się tylko raz. Droga do rozmowy trwa 8,8 s, dokument procesu 9,5 s, a porządkowanie zapytań 5,7 s. Ilustracje zakresu i zakładek mają jedno spokojne przejście do gotowej kompozycji; nie powtarzają go w pętli. Wspólny zegar zatrzymuje się poza ekranem, w ukrytej karcie i po użyciu przycisku zatrzymania animacji. prefers-reduced-motion: reduce pokazuje pełny statyczny wynik, także po zmianie ustawienia w trakcie oglądania. Bez JavaScript pozostają kompletne stany końcowe; przyciski odtwarzania są ukryte. Przełączanie zakładek wymaga JavaScript; bez JS wszystkie trzy panele są widoczne jeden pod drugim.
Nie ma formularzy, zewnętrznych żądań, wysyłki ani odczytu danych. Zmiany stanów są stałą ilustracją. Liczby 3 i 5 opisują liczbę przykładów i etapów pokazu. W produkcyjnym narzędziu trzeba je zastąpić stanami wynikającymi z danych. Przykładowe treści nie są ofertą, obietnicą rezultatu ani wynikiem klienta.
Dostosowanie
Kopiuj sekcję z odpowiadającymi jej klasami pg-*, definicjami SVG z początku dokumentu, CSS, JS i zasobami. Zachowaj unikalne identyfikatory przy osadzaniu więcej niż jednej kopii. Globalne reguły bazowe i .ds-page-frame należą do tej galerii; dopasuj je do ramy strony docelowej, zamiast zagnieżdżać kolejną ramę. Demo korzysta z data-demo="flow|progress|transform", a dekoracja z data-ambient.
Źródła: ../research/firecrawl/ (B1–B8, C1–C3), ../STYLE-GUIDE.md, ../REFERENCES.md, aktualny audyt Dealyo. Żadne zasoby ani biblioteki Firecrawl nie są dołączone. Ikony to geometria Lucide: ArrowUpRight, ArrowRight, CircleCheck, Mail, FileText, MousePointer2 i RotateCcw, w viewBox 24×24, stroke 2. CTA ma biały napis i białą strzałkę na #FE4A23; wszystkie karty mają radius 0.
Dopracowanie wizualne — 20.10.2026
Skala ilustracji, wspólne linie kart, tło siatki i rytm opisów są propozycją adaptacji aktualnej strony głównej wzornika (../index.html, sceny hp-scene i mv-*). Zmieniono prezentację istniejących czterech sekcji; nie dodano nowych narzędzi ani działań. Galeria ma własne reguły mobilne w proposals.css, aby rozmiary scen i łączników nie zależały od wspólnych nadpisań innych katalogów.
Materiał → decyzja — 22.10.2026
Nowy kierunek jest oznaczony jako propozycja. Sekcja #material-do-decyzji dodaje do istniejącej galerii scenę źródło → obserwacja → rekomendacja i dwie grafiki rozwijające pojedynczą myśl. To demonstracja wybranych treści, bez prawdziwej analizy strony.
Wnioski z obejrzanych referencji Mobbin:
| Wzór wizualny | Zastosowanie w Dealyo | Stan |
|---|---|---|
| Duża scena z wejściem i wyjściem | Dokument i powiązane rekomendacje A/B/C | Dodane jako propozycja |
| Jedna korzyść i jedna ilustracja | Hierarchia strony oraz połączenie obserwacji ze zmianą | Dodane jako propozycja |
| Asymetryczny nagłówek w ramie | Numer po lewej, duży nagłówek i opis po prawej | Dodane jako propozycja |
| Ruch pokazujący zmianę stanu | Sekwencyjne wskazanie fragmentu i rekomendacji | Własna animacja Dealyo, 8,4 s |
| Czytelna wersja telefonu | Dokumenty pionowo, prawdziwy tekst 16 px, pionowe łączniki | Osobny układ mobilny |
| Opinie i liczby jako dowód | Wymagają prawdziwych materiałów klientów | Nie dodawano fikcyjnych danych |
Referencje: scena przepływu, grafiki w kartach, asymetryczna kompozycja. Mobbin udostępnił zrzuty, więc nie przypisujemy Firecrawl zaprojektowanego tutaj przebiegu animacji. Oryginalny wskazany adres rewizji wymagał logowania w przeglądarce; referencje pozyskano przez konektor Mobbin.
Nowa scena używa klas ev-* i data-demo="evidence" w istniejącym wspólnym zegarze. Ma stan końcowy bez JS, zatrzymanie poza ekranem, odtwarzanie ponownie i wersję bez ruchu. Łączniki pozostają w przerwach siatki; na telefonie zmieniają kierunek na pionowy. Nie dodano narzędzi ani formularzy.
Dopracowanie istniejących scen — 22.10.2026
Cztery wcześniejsze propozycje dopasowano do skali dokumentów i ilustracji w ../home-scenes.css i ../catalog-scenes.css. Nowa sekcja materiał → decyzja pozostała bez zmian. Nie dodano sekcji, narzędzi ani nowych danych.
- Zakres: oznaczenie A łączy komunikat z ofertą oraz zapytanie z rekordem kontaktu. Oryginalna ilustracja strony nie jest kadrowana.
- Droga do rozmowy: reklama, oferta, treść zapytania i rozmowa pokazują jeden spójny kontekst. Łączniki trafiają w środek rzeczywistych przerw między boxami; poniżej 1001 px biegną pionowo.
- Zakładki: marketing rozwija ten sam temat w ofercie, strona pokazuje kolejność odbiorca → zakres → kontakt, a automatyzacja wiąże wiadomość A z zadaniem A.
- Stany: każdy etap planu ma konkretny materiał do kolejnego etapu. Lista zapytań zachowuje oznaczenia A/B/C, źródło i następny krok. Tekst nie udaje wykonanej usługi.
Etykiety i treść wewnątrz zmienionych ilustracji na telefonie mają co najmniej 14 px. Odtwarzanie, zatrzymanie, obsługa klawiatury, wspólny zegar i pełny stan bez JS korzystają z dotychczasowego proposals.js. Dekoracje nagłówka także kończą się po jednym przebiegu. Zasoby pozostają te same; nie dodano zależności ani bibliotek.