Adaptacja stron do gotowych prototypów z figmy

Trzeba zaprogramować nowy design strony na WordPressie. Poniżej dodaję link do designu https://salesdep-homepage.vercel.app/

Opis zadania Potrzebny doświadczony frontend-deweloper lub deweloper szablonów do etapowego aktualizowania dużej, działającej strony internetowej. Strona działa od wielu lat, zawiera znaczną liczbę stron, różne typy treści, formularze, tabele i interaktywne bloki. Używany jest własny system serwerowy, dostępny jest legacy HTML/CSS. Pełna wymiana technologii lub systemu zarządzania stroną nie jest planowana. Na pierwszym etapie konieczne jest opracowanie nowego responsywnego ogólnego szablonu strony. Po pomyślnym zakończeniu pierwszego etapu planowane jest stopniowe aktualizowanie stron wewnętrznych. Nazwa strony, URL, projekty graficzne oraz aktualne pliki wyjściowe będą udostępnione ograniczonej liczbie kandydatów po wstępnym wyborze na podstawie portfolio i doświadczenia.Co wchodzi w pierwszy etap Konieczne jest wdrożenie ogólnej wizualnej powłoki: nagłówka dla wersji desktopowej i mobilnej; głównej i mobilnej nawigacji; elementów nagłówka; ogólnego kontenera i siatki strony; łańcucha nawigacyjnego („okruszki chleba”); podstawowych elementów interfejsu: przyciski, linki, pola wejściowe; ogólnych stylów typografii z możliwością ich etapowego podłączenia; stopki; responsywnego zachowania szablonu; kompatybilności nowej powłoki ze stronami, które tymczasowo pozostaną w starym designie. Unikalne wewnętrzne bloki poszczególnych stron na pierwszym etapie nie muszą być całkowicie przerabiane.Specyfika projektu Duża działająca strona z wieloma typami stron. Dostępny legacy CSS i miejscami przestarzała struktura HTML. Nowy design będzie wdrażany stopniowo. Jednoczesna pełna wymiana wszystkich stron jest niemożliwa. Wykonawca nie uzyskuje dostępu do serwera, CMS i roboczego projektu. Zleceniodawca samodzielnie zintegrowuje przygotowany szablon. Wykonawcy będą udostępnione aktualne pliki CSS, projekty, materiały graficzne, fragmenty HTML oraz przykłady stron w zakresie niezbędnym do wykonania pracy. Przewiduje się kilka iteracji po testowej integracji w rzeczywistym projekcie.Podejście techniczne Przewiduje się podłączenie nowego CSS nad istniejącymi stylami z późniejszą stopniową migracją i usunięciem przestarzałych reguł. Dozwolone jest: tworzenie nowych plików CSS/SCSS; proponowanie zmian w HTML ogólnych części szablonu; poprawianie istniejących reguł CSS, które przeszkadzają w realizacji; proponowanie ulepszeń struktury DOM; tworzenie nowych komponentów wielokrotnego użytku. Zmiany w istniejącym CSS należy przekazywać osobno w formie: pliku patch/diff; osobnego pliku kompatybilności; lub udokumentowanej listy zmienionych reguł i selektorów. Należy unikać: niekontrolowanego użycia !important; głęboko zagnieżdżonych i kruchych selektorów CSS; przypisywania stylów do tekstu lub numeru porządkowego elementu; duplikowania całej struktury osobno dla wersji desktopowej i mobilnej; podłączania ciężkich frameworków bez wcześniejszej zgody; globalnych reguł, które mogą zakłócić wyświetlanie jeszcze nie zaktualizowanych stron.Wymagania dotyczące jakości Projekt jest zaplanowany na dalszy wieloletni rozwój. Potrzebne jest nie jednorazowe „dopasowanie do zrzutu ekranu”, ale czysty, profesjonalny i łatwy do utrzymania szablon. Oczekiwane jest: zrozumiała struktura komponentów; wielokrotnego użytku klasy CSS; własności CSS dla kolorów, rozmiarów, odstępów i innych tokenów projektowych; rozsądna specyficzność selektorów; semantyczna struktura HTML5; poprawna hierarchia nagłówków; brak zbędnych opakowań DOM; brak duplikowania treści, która jest indeksowana; poprawne użycie header, nav, main, section, footer; użycie przycisków i linków zgodnie z ich przeznaczeniem; dostępność interfejsu z klawiatury; stany hover, focus, active i disabled; brak poziomego przewijania strony; poprawna praca z dynamiczną treścią o różnej długości; zrozumiały i profesjonalnie zorganizowany kod.SEO i wydajność Aktualizacja szablonu nie powinna pogarszać technicznych wskaźników SEO strony. Konieczne jest: zachowanie semantyki głównej treści; nie tworzenie osobnych duplikatów DOM dla wersji mobilnej i desktopowej bez uzasadnionej potrzeby; nie ukrywanie ważnej dla indeksacji treści za pomocą JavaScript; nie naruszanie hierarchii nagłówków; nie usuwanie istniejących atrybutów SEO, analitycznych i strukturalnych z dostarczonych fragmentów HTML; minimalizacja dodatkowego JavaScript; nie używanie ciężkich bibliotek bez zgody; przewidzenie rozmiarów obrazów i braku widocznych przesunięć układu podczas ładowania; nie dopuszczenie do zauważalnego pogorszenia wskaźników Lighthouse i Core Web Vitals po integracji. Wykonawca musi rozumieć, że wysokiej jakości CSS sam w sobie nie naprawia struktury DOM. Jeśli dla profesjonalnego wyniku konieczna jest zmiana struktury, należy przygotować i przekazać zleceniodawcy odpowiednie fragmenty HTML.Responsywność Sprawdzanie szablonu powinno być przeprowadzane przynajmniej na takich szerokościach: 1440 px; 1200 px; 1024 px; 768 px; 390 px; 360 px; 320 px. Między kontrolnymi rozmiarami interfejs również powinien pozostawać poprawny i funkcjonalny. Poziome przewijanie całej strony jest niedopuszczalne. Wyjątki dla poszczególnych komponentów, takich jak duże tabele, muszą być wcześniej uzgodnione.Wynik pierwszego etapu Wykonawca przekazuje: Nowy CSS lub SCSS wraz z gotowym zbudowanym CSS. Autonomiczna demonstracyjna strona HTML. Fragmenty HTML nagłówka, menu i stopki, jeśli struktura była zmieniana. Osobny patch/diff zmian legacy CSS. Nowe SVG, obrazy, ikony i czcionki. Instrukcję podłączenia i integracji. Opis struktury CSS i komponentów. Listę nowych i zmienionych klas oraz selektorów. Zrzuty ekranu wyniku na kontrolnych rozmiarach. Listę znanych ograniczeń i rozbieżności z projektami. Rekomendacje dotyczące dalszej migracji stron wewnętrznych.Iteracje Do kosztów pierwszego etapu powinny wchodzić: Uzgodnienie ogólnej struktury i wersji desktopowej. Responsywne dopracowanie wersji tabletowej i mobilnej. Poprawki wykrytych przez zleceniodawcę problemów po pierwszej testowej integracji. Dodatkowe prace poza uzgodnionym pierwszym etapem będą wyceniane osobno.Co należy wskazać w aplikacji Prosimy o podanie: doświadczenia w pracy z dużymi działającymi stronami oraz legacy CSS; przykładów skomplikowanej responsywnej struktury; przykładów kodu lub linków do repozytoriów, jeśli są dostępne; podejścia do organizacji architektury CSS; doświadczenia w stopniowej migracji designu bez całkowitego zatrzymania strony;

Musimy zrobić projekt w Figma z plików html (wszystko umieszczę w dokumencie do zadania) Abyśmy mogli później zrealizować te wszystkie strony w kreatorze stron Maksymalny nacisk na design mobilny i responsywność, cały ruch stamtąd To będzie strona główna witryny + strona płatności + 2 strony z dodatkowymi sprzedażami (1 produkt - 1 strona) Ogólnie zadanie, aby były przygotowane do kodowania i z adaptacją pod urządzenia mobilne Na dysku będzie główna + strona płatności + 1 strona dodatkowej sprzedaży + nasze logo (umieszczamy wszędzie), ogólnie dostosowujemy we wszystkich aspektach do naszej marki Ostatni projekt znajduje się pod tym linkiem https://3plus3.heroman.com.ua/upsells/t-shirt/ Stopka na dole wszystkich stron umieszczana wszędzie jak na stronie głównej (the Rich) Logika lejka sprzedażowego Strona główna strona płatności dodatkowa sprzedaż 1 dodatkowa sprzedaż 2 Strona dziękuję (mamy ją) LINK DO ARCHIWUM Z STRONAMI https://drive.google.com/drive/folders/1IKh0sTVd6WCIUm0QSBFctRlaD6iEasez?usp=sharing

Trzeba to zrobić podobnym do tego, co wyślę z figmy. Nie musi być identyczne. Ogólnie pierwsza strona jest gotowa.

Trzeba przenieść gotowy projekt strony (landing pod kurs, infobiz) z Figma na Weblium w ciągu jednego dnia.