Нужно сверстать страницы по макетах (моб. версия сайта)

Cześć wszystkim. Szukam specjalisty, który pomoże rozwiązać problem z źródłami React. Problem polega na tym, że ich nie ma. Dlatego trzeba stworzyć nowe repozytorium, wyciągnąć maksimum z DevTools/source maps, a następnie przywrócić projekt. Szczegóły opiszę kandydatom. Czekam na wasze odpowiedzi.

Strona działa na frameworku Next.js (opartym na React). Trzeba zrealizować wszystkie punkty zgodnie z TŻ. TŻ jest dołączone w pliku. Oczekuję na propozycje.

jest strona https://perfect-okna.com.ua/ główne problemy: ANALIZA PRĘDKOŚCI ŁADOWANIA (Performance) Kluczowe problemy (typowe dla takich stron): · Duże nieoptymalizowane obrazy (JPEG/PNG bez kompresji, brak WebP). · Brak lazy loading dla obrazków w katalogu. · Nie zminifikowane CSS/JS, podłączono wiele niepotrzebnych bibliotek. · Brak cache na poziomie przeglądarki, nie używa się CDN. · Serwer nie wysyła kompresji (gzip/brotli). · Nie używa się HTTP/2. Checklist „Szybkość”: · Skompresować wszystkie obrazy, przekształcić w WebP i dodać fallback. · Ustawić leniwe ładowanie obrazów (loading="lazy"). · Zminifikować HTML, CSS, JS. Połączyć pliki, gdzie to możliwe. · Włączyć Gzip/Brotli na serwerze. · Ustawić nagłówki cache (Cache-Control, Expires) dla statycznych zasobów. · Podłączyć CDN (Cloudflare za darmo). · Usunąć zbędne wtyczki/skrypty (szczególnie jeśli WordPress). · Używać asynchronicznego ładowania dla niekrytycznych skryptów (async/defer). Na stronie głównej często brakuje wyraźnej struktury „kim jesteśmy – co oferujemy – dlaczego warto nas wybrać – jak zamówić”. · Kreator okien (jeśli jest) może być mylący, bez podpowiedzi, nie widać od razu ceny końcowej. · Na urządzeniach mobilnych menu może się przesuwać, kalkulator nie jest dostosowany do palców. · Formularze kontaktowe są długie, bez maski telefonu, bez walidacji. · Brak „szybkich działań”: zadzwonić jednym kliknięciem, komunikatory, czat. · Brak „okruszków” na stronach wewnętrznych. · Stworzyć wersję mobilną bez poziomego scrolla, przyciski nie mniejsze niż 48x48 px. · Na stronie głównej dodać od razu kalkulator ceny „w 3 kliknięcia”. · W nagłówku – numer telefonu klikalny (tel:), komunikatory (Viber/Telegram) z ikonami. · Formularze: tylko imię + telefon + pole „komentarz” (nieobowiązkowe). Maska dla telefonu. · Dodać pływający przycisk „Szybkie zamówienie / Oblicz koszt” na mobilnym. · Na kartach produktów – przycisk „Kup w 1 kliknięcie” (otwiera mini-formularz). · Dodać „okruszki”, poprawić nawigację po działach. · Sprawdzić kontrast tekstu, rozmiar czcionek (nie mniej niż 14 px na mobilnym). · Brak oferty pilnej (promocje z ograniczeniem czasowym). · Niedostateczne dowody społeczne (opinie, recenzje wideo, liczba wykonanych prac). · Nie wyjaśniono, że cena „pod klucz” (montaż, dostawa, demontaż). · Brak CTA (wezwania do działania) na każdym ekranie. Dodać „licznik” – ile klientów już wybrało, ile okien zainstalowano. · Wideo-opinie prawdziwych klientów (krótkie, na 30–60 sek). · Blok „Oblicz w 30 sekund” bezpośrednio na pierwszym ekranie. · Pokazać cenę „pod klucz”: okno + montaż + dostawa, z przejrzystym rozrachunkiem. · Promocje z timerem: „Zniżka -15% przy zamówieniu do końca tygodnia”. · Wyskakujące okno z ofertą bezpłatnego pomiaru, gdy użytkownik próbuje zamknąć zakładkę. Co zrobić: · Interaktywny 3D konfigurator okna (zmiana koloru, otwieranie, pakiet szybowy) – o tym dalej. · Mini-gra lub test: „Jakie okno pasuje do twojego mieszkania?” · Przykłady: zdjęcia „przed/po” w rzeczywistych wnętrzach. · Przewodniki: „Jak wybrać okna do hałaśliwej ulicy”, „Oszczędność energii: jaki pakiet szybowy wybrać”. · Kalkulator oszczędności na ogrzewaniu po wymianie okien. Pilne (Critical) 1. Mobilna adaptacja całej strony, szczególnie kreatora i koszyka. 2. Przyspieszenie ładowania: kompresja obrazów, cache, CDN. 3. Przycisk szybkiego zamówienia (One Click Buy) na wszystkich kartach produktów. Wyskakujący czat z możliwością pozostawienia wiadomości w Viber/Telegram. 5. Ważny HTTPS i przekierowanie z HTTP → HTTPS wszystkich stron. 6. Mikroformatowanie Schema.org (Organization, Product, BreadcrumbList, Review). Ważne (High) 1. Zaktualizować stronę główną: dodać USP, promocje, wideo, szybki kalkulator. 2. Strona „Promocje” z timerem, aktualizowanym co miesiąc. 3. Formularz zwrotnego połączenia – prosty, z maską i automatycznym wstawianiem kodu miasta. 4. Podłączenie CRM (np. amoCRM / Bitrix24) do automatycznego przechwytywania leadów. 5. Dodać płatność online (LiqPay, WayForPay) przynajmniej zaliczkę za pomiar. 6. Struktura SEO URL: /produkciya/plastikovi-vikna/, a nie /?page_id=123. Pożądane (Medium) 1. Rozszerzyć blog artykułami pod kluczowe zapytania (5 artykułów od razu). 2. Interaktywny kreator z 3D-podglądem (osobny blok poniżej). 3. Filtr produktów według cech (rozmiar, profil, kolor, cena). 4. Osobisty panel klienta, gdzie można zobaczyć status zamówienia. 5. Generowanie PDF-oferty handlowej bezpośrednio na stronie. JAK POPRAWIĆ KREATORA (Konfigurator okien) Jeśli teraz to zwykły formularz z rozwijanymi listami – to przestarzałe. Potrzebny nowoczesny 3D-kreator: Obowiązkowe funkcje: · Krokowy kreator (wizard): 1) wybór pokoju, 2) wymiary, 3) liczba skrzydeł, 4) kolor, 5) pakiet szybowy, 6) okucia, 7) siatka przeciw owadom. · Natychmiastowe przeliczenie ceny na każdym kroku (AJAX). · 3D-wizualizacja (Three.js lub gotowy framework js). · Zapisanie wybranej konfiguracji w PDF (generacja na serwerze) i wysłanie na e-mail. · Przycisk „Wyślij wycenę do menedżera” – i w CRM leci karta ze wszystkimi parametrami. · Możliwość podzielenia się linkiem do swojej konfiguracji (np. aby wysłać mężowi/żonie). · Pełna adaptacja pod gesty dotykowe (przesunięcie do obrotu modelu 3D na telefonie) Cena do uzgodnienia!

Meta projektu Zrealizować integrację Viber bez użycia zewnętrznych systemów CRM. Cała praca z wiadomościami powinna być wykonywana bezpośrednio w naszym wewnętrznym CRM opartym na BAS / 1C 8.3.Aktualny system BAS / 1C 8.3 Samodzielnie napisana konfiguracja "Obsługa klientów" Baza ponad 40 000 abonentówWymagane do zrealizowania Integracja przez oficjalnego dostawcę Viber Business (TurboSMS, GMS Worldwide lub inna uzgodniona usługa). Przycisk "Napisz w Viber" w karcie abonenta. Wysyłanie wiadomości bezpośrednio z BAS. Odbieranie wiadomości przychodzących przez Webhook. Automatyczne przypisanie wiadomości do abonenta według numeru telefonu. Pełne zachowanie historii korespondencji w karcie abonenta. Wyświetlanie czasu, statusu wiadomości oraz menedżera, który odpowiadał. Praca kilku menedżerów jednocześnie. Szablony wiadomości do szybkiej odpowiedzi. Pomoc w konfiguracji dostawcy Viber, kluczy API i Webhook. Przekazanie całego kodu źródłowego i ustawień po zakończeniu prac.Warunki odbioru Praca uznawana jest za wykonaną po pomyślnym przetestowaniu wszystkich funkcji na roboczej bazie oraz przekazaniu kodu źródłowego.Gwarancja 1 miesiąc gwarancji na poprawki błędów związanych z zrealizowanym funkcjonalnością. Dalsze poprawki realizowane są na osobnej umowie.Rezultat Po zakończeniu projektu menedżerowie powinni mieć możliwość pełnej pracy z Viber bezpośrednio w BAS: pisać do klientów, otrzymywać odpowiedzi, przeglądać historię korespondencji i prowadzić komunikację bez użycia zewnętrznych systemów CRM. Cały kod źródłowy, poprawki, klucze API i ustawienia po zakończeniu projektu są przekazywane zamawiającemu.

Formularz już istnieje i działa. Należy zmienić tylko logikę dla usługi sprzątania domowego. Inne formularze i usługi nie powinny być zmieniane. 1. Pierwszy krok formularzaObecnie klient wybiera:- powierzchnię mieszkania (m²);- typ sprzątania:- Jednorazowe; - cotygodniowe; - co 2 tygodnie; - co 4 tygodnie.Ten krok należy pozostawić bez zmian.2. Zmienić logikę obliczeńObecnie system automatycznie oblicza lub rekomenduje liczbę godzin w zależności od powierzchni mieszkania.Ta funkcjonalność musi zostać całkowicie usunięta.Powierzchnia mieszkania powinna pozostać jedynie jako informacja w zgłoszeniu i nie wpływać na obliczenie kosztów.3. Dodać wybór liczby godzinPo wyborze typu sprzątania klient powinien wybrać liczbę godzin:- 1 godz.- 2 godziny;- 3 godziny;- 4 godziny;- Inna liczba godzin. Jeśli wybierze „Inna liczba godzin”, klient powinien mieć możliwość ręcznego wprowadzenia potrzebnej liczby.4. Nowe obliczenie kosztówKoszt powinien być obliczany wyłącznie na podstawie:- typu sprzątania;- liczby godzin.Stawki po RUT:- Jednorazowe sprzątanie — 260 SEK/godz.- Co 4 tygodnie — 250 SEK/godz.- Co 2 tygodnie — 240 SEK/godz.- Cotygodniowe sprzątanie — 230 SEK/godz.5. Wyświetlanie kosztówPo wyborze liczby godzin należy automatycznie pokazać:- cenę przed RUT;- cenę po RUT.Dla regularnego sprzątania warto pokazać standardową cenę przekreśloną, a obok — nową cenę po rabacie.Na przykład:/780 SEK/720 SEKlub/780 SEK/690 SEK6. Dodać notatkęDodać pod formularzem tekst:„Dla adresów znajdujących się w odległości ponad 15 km od Skellefteå może być pobierana dodatkowa opłata za dojazd. Dokładny koszt ustalany jest indywidualnie po otrzymaniu zgłoszenia.”7. Zachować istniejącą logikę zgłoszeniaPo wprowadzeniu zmian należy koniecznie zachować całą istniejącą funkcjonalność.Obecnie po złożeniu zamówienia zgłoszenie trafia:- do bota Telegram;- na e-mail.Ta funkcjonalność powinna działać tak samo, jak teraz.Należy również pozostawić bez zmian wszystkie pola końcowe formularza, w tym: pola kontaktowe, które już są w formularzu. Do zgłoszenia powinny być przekazywane wszystkie dane, w tym:- powierzchnia mieszkania;- typ sprzątania;- liczba godzin;- koszt przed RUT;- koszt po RUT;- dane kontaktowe klienta.8. Możliwość samodzielnej zmiany cenWarto zrealizować stawki tak, aby w przyszłości mogła samodzielnie zmieniać koszt za godzinę dla każdego typu sprzątania bez wprowadzania zmian w kodzie.Chciałabym, aby ceny można było edytować przez panel administracyjny lub w inny prosty sposób.9. Czego oczekuję od wykonawcy- Sprawdzić istniejący kod formularza.- Wprowadzić zmiany tylko w formularzu sprzątania domowego.- Nie naruszyć działania innych formularzy i stron serwisu.- Sprawdzić poprawność obliczeń.- Upewnić się, że wszystkie dane poprawnie trafiają do bota Telegram i na e-mail.- Sprawdzić działanie formularza na urządzeniach mobilnych i komputerze.Proszę napisać:- koszt wykonania;- orientacyjny termin;