Należy przenieść projekt z Figma do Framer

ZADANIE TECHNICZNE (ZT)na opracowanie premium landing page„Oczyszczona Woda Pitna”1. Ogólne informacje o projekcie Typ strony: Jednostronicowy premium landing page (Landing Page) z wysoką konwersją i możliwością rozbudowy do pełnoprawnej strony z blogiem/bazą wiedzy. Cel: Pozyskiwanie leadów (wnioski o konsultację), budowanie zaufania do marki poprzez emocjonalną wizualizację, fakty naukowe i prezentację wartości firmy. Platforma: Wykonawca proponuje optymalną platformę (Webflow lub WordPress + Bricks Builder) z uzasadnieniem w ofercie handlowej. Preferowane są rozwiązania zapewniające czysty kod, wysoką prędkość i premium wizualizację bez szablonowych rozwiązań.2. Grupa docelowa Rodziny (szczególnie z dziećmi), które dbają o zdrowie i jakość życia. Ludzie, którzy cenią przemyślaną kuchnię, wysokiej jakości oczyszczoną wodę i długoterminowe rozwiązania dla domu. Osoby w wieku 30–55 lat, o średnich i wyższych dochodach, które szukają niezawodnego partnera do instalacji systemu oczyszczania wody z serwisem.3. Styl wizualny i design (UI/UX) Referencja: Dołączony referencyjny makiet (zdjęcie telefonu z sekcją hero i blokiem „Wartości”). Styl powinien w pełni odpowiadać temu makietowi: czysty, jasny, premium lifestyle z ciepłymi akcentami. Paleta kolorów: Biały i jasnoszary tło (czystość), elementy naturalnego drewna lub ciepłe akcenty, słoneczno-pomarańczowe/żółte przyciski CTA, głęboki niebieski/antacyt dla tekstu. Obrazy: Wyłącznie premium lifestyle. Żywi emocjonalni ludzie (nie patrzą w kamerę), miękkie poranne światło słoneczne, naturalne kolory. Żadne sztuczne zdjęcia stockowe. Typografia: Nowoczesna, czytelna, z odpowiednią interlinią i białą przestrzenią. Profesjonalny poziom bez przeciążenia.4. Struktura landing page (6 głównych bloków)BLOK 1. Ekran główny (Hero) Wizual: Duże jasne zdjęcie na cały ekran — nowoczesna kuchnia, mama, tata, córka i synek piją czystą wodę ze szklanek, uśmiechają się, miękkie poranne słońce. Nagłówek: „Twoje zdrowie zaczyna się od łyka oczyszczonej wody pitnej.” Podtytuł: Systemy oczyszczania wody pitnej z dożywotnią obsługą serwisową dla Twojej rodziny na co dzień. Przycisk CTA: „Uzyskaj konsultację eksperta” (pomarańczowy/żółty, widoczny).BLOK 2. Nasze Wartości i Filozofia (Przemówienie założyciela) Wizual: Profesjonalne zdjęcie właściciela (smart casual, otwarty i ufny wygląd). Tekst (z referencji): NASZA MISJA Osobiste przemówienie: CTA: „Chcę być zdrowy” (przewiń do Bloku 3 lub formularza).BLOK 3. Kurs edukacyjny (Naukowe podejście) Nagłówek: Dowiedz się więcej o wodzie, którą pijesz! Format: Stylowa interaktywna siatka z 10 klikalnymi blokami/kartami. Każda karta prowadzi do osobnej strony artykułu/wideo (zalecane dla SEO) lub okna modalnego z pełnym tekstem/wideo. Uwaga: Teksty/wideo artykułów dostarcza Zamawiający. Wykonawca zapewnia wygodną strukturę i atrakcyjne wyświetlanie.BLOK 4. Oczyszczona woda pitna zmienia smak życia! (Emocjonalne dowody) 4 premium karty w siatce lub kolażu: Zdrowie: Dziewczyna pije oczyszczoną wodę. Tekst: „Odzyskuj swoje zdrowie łyk po łyku.” Barszcz / Dania: Makro barszczu z parą. Tekst: „Poczuj intensywny smak swoich potraw z oczyszczoną wodą pitną.” Kawa / Herbata: Tata parzy kawę, babcia z filiżanką herbaty. Tekst: „Odkryj prawdziwy aromat kawy i ciesz się pachnącą herbatą.” Gospodarstwo / Technika: Córka prasuje koszulę czystą parą. Tekst: „Zachowaj sprzęt na lata: idealna para bez kamienia.”BLOK 5. Kompleksowe rozwiązanie (Produkt) Wizual: Estetyczny montaż 5-stopniowego systemu odwróconej osmozy pod zlewem (czysty wygląd, bez chaosu rur) + stylowy oddzielny kranik na blacie. Tekst: Zalety poprzez końcowy rezultat dla klienta (czystość, smak, dbałość o zdrowie). Oferta: „System pod klucz + Profesjonalny montaż + Dożywotnia obsługa”.BLOK 6. Blok zaufania (Dowody społeczne i gwarancje) Główny trigger: Duża akcentująca plansza: „Jeśli jakość wody Ci się nie spodoba — zwróć system w ciągu 60 dni (0% ryzyka)”. Elementy: Karuzela opinii (wideo lub zrzuty ekranu rzeczywistych rozmów). Galeria rzeczywistych prac „Przed / Po” montażu. Logotypy / wzmianki (jeśli są).5. Wymagania funkcjonalne i techniczneFormularze i generowanie leadów Formularz konsultacji z polami: Imię, Telefon, Miasto/dzielnica, „Jaka woda masz teraz?” (lub krótkie pytanie). Integracja z botem Telegram lub CRM (do wyboru Zamawiającego).Analityka i marketing Google Analytics 4 + zdarzenie na wysłanie formularza. Meta Pixel (Facebook/Instagram). Ustawienia konwersji.Szybkość i SEO PageSpeed Insights ≥ 90 na urządzeniach mobilnych i desktopowych. Czysta semantyczna struktura, zoptymalizowane obrazy, lazy loading.Wersja mobilna Mobile-first design. Idealne wyświetlanie na iPhone i Android (referencja — makieta na telefonie).CMS i artykuły Wygodny system do dodawania i edytowania artykułów kursu (kolekcja/posty).6. Etapy realizacji i zatwierdzenia (4 etapy) Prototyp (UX-szkic): Czarno-biała schemat bloków i przycisków. Sprawdzenie logiki i akcentów. Koncepcja designu (UI): Kolorowy makiet pierwszych 3 bloków z zatwierdzonymi zdjęciami. Sprawdzenie stylu, czcionek, kolorów przycisków. Pełny design: Wizualizacja wszystkich 6 bloków. Ostateczne poprawki graficzne. Kodowanie i uruchomienie: Gotowa strona na wybranej platformie. Sprawdzenie szybkości, responsywności, działania formularzy, analityki.7. Wymagania wobec wykonawcy Doświadczenie w tworzeniu premium landing page dla produktów/usług zdrowia, ekologii, technologii lub marek lifestyle (obowiązkowe portfolio z linkami). Doświadczenie w pracy z Webflow lub Bricks Builder (obowiązkowe). Gotowość do pracy etapowej z pośrednimi zatwierdzeniami.8. Co potrzebne w ofercie handlowej Rekomendowana platforma z uzasadnieniem (Webflow / WP + Bricks). Stała cena z podziałem na etapy (lub stała + możliwe poprawki). Terminy realizacji po etapach. 2–3 odpowiednie przykłady z portfolio (linki + krótki opis). Warunki wsparcia po uruchomieniu (pierwsze 1–3 miesiące). Osoba kontaktowa i gotowość do rozmowy/spotkania w celu omówienia.9. Dodatkowe informacje Cała treść tekstowa (z wyjątkiem referencyjnych fraz) jest dostarczana przez Zamawiającego. Zdjęcia i wizualizacje: Wykonuje wykonawca, integruje i optymalizuje. Domena i hosting: Zamawiający dostarcza lub wykonawca pomaga w podłączeniu. Prawa autorskie: Po pełnej płatności wszystkie prawa do strony przechodzą na Zamawiającego.

Potrzebne jest wdrożenie na stronach OpenCart (3 szt.) pełnoprawnego mechanizmu zarządzania zgodą na użycie plików cookie (Cookie Consent) oraz skonfigurowanie Google Consent Mode v2. Wymagane: zainstalowanie i skonfigurowanie CMP (Cookie Management Platform) lub innego rozwiązania do zarządzania zgodami użytkowników; wdrożenie pełnoprawnego banera Cookie Consent z możliwością akceptacji, odrzucenia oraz konfiguracji kategorii cookie; skonfigurowanie Google Consent Mode v2 za pośrednictwem Google Tag Manager; zapewnienie poprawnego przesyłania statusów zgody do Google Analytics 4, Google Ads, a także innych usług marketingowych; skonfigurowanie działania tagów analitycznych i reklamowych w taki sposób, aby uruchamiały się tylko zgodnie z uzyskanymi zgodami użytkownika. Obecnie baner cookie jest jedynie informacyjny i nie zarządza zgodami, a także nie przesyła ich statusu do usług Google. Potrzebne jest pełne skonfigurowanie zgodnie z aktualnymi wymaganiami GDPR oraz Google Consent Mode v2.

Konieczne jest dodanie 129 produktów. Jest plik z eksportem produktów, jednak standardowy import nie jest odpowiedni, ponieważ przed załadowaniem należy stworzyć strukturę katalogu: kategorie, działy i w razie potrzeby podkategorie. Następnie należy wykonać import produktów i sprawdzić, czy wszystkie karty zostały poprawnie przypisane do kategorii. Jeśli masz doświadczenie w realizacji podobnych zadań, prześlij przykłady prac, terminy realizacji i koszt.

CO TRZEBA ZROBIĆ Prace podzielone są na bloki, można zająć się wszystkim lub poszczególnymi blokami: Blok 1 — Optymalizacja prędkości (Mobile-First) Aktualna ocena mobilnej wersji PageSpeed — 51/100. Należy podnieść do 80+. Docelowe metryki: LCP < 2.5 s (obecnie 7.4 s), FCP < 1.8 s (obecnie 3.9 s), TBT < 200 ms. Prace: krytyczny CSS inline, opóźniony JS, WebP/AVIF, lazy load, audyt wtyczek. Blok 2 — GTM i analityka Usunąć hardcoded skrypty GA4/Google Ads z header.php. Zainstalować i skonfigurować wtyczkę GTM4WP. Wdrożyć Google Consent Mode v2 (skrypt lub cookie-banner). Blok 3 — Szablon karty produktu Jedyny Mobile-First szablon Single Product w Elementorze. Sticky przycisk „Kup” podczas przewijania na urządzeniach mobilnych. Cross-sell blok usług pod przyciskiem zakupu. Sprawdzenie automatycznego przesyłania zdarzeń view_item, add_to_cart przez GTM4WP. Blok 4 — Feed produktowy dla Google Merchant Center Zainstalować Product Feed Pro (AdTribes) lub CTX Feed. Skonfigurować XML-feed z poprawnym mapowaniem pól (id, title, gtin, brand, price, availability). Codzienne aktualizacje przez WP-Cron, automatyczne wykluczanie produktów „brak w magazynie”. Blok 5 — 6 stron docelowych (landingów) w Elementorze 3 strony e-commerce: katalog komponentów, gotowe rozwiązania UPS, zestawy SES. 3 strony lead generation: montaż UPS pod klucz, SES dla domu, rozwiązania dla biznesu. Istnieją szczegółowe prototypy ze strukturą i blokami każdej strony. Blok 6 — Formy i zdarzenia dataLayer 6 unikalnych zdarzeń dataLayer przy pomyślnym przesłaniu formularzy (CF7 i Elementor Pro Forms). Wymagania obowiązkowe dla wszystkich formularzy: maska wprowadzania telefonu, ochrona przed ponownym przesłaniem, reCAPTCHA v3 lub Honeypot. --- WYMAGANIA — Praktyczne doświadczenie z Elementor Pro (szablony Single Product, niestandardowe Page Templates) — Zrozumienie WooCommerce dataLayer i działania GTM4WP — Doświadczenie w optymalizacji prędkości WordPress (Critical CSS, WebP, WP Rocket lub analogiczne) — Doświadczenie w konfiguracji zdarzeń dataLayer dla CF7 lub Elementor Pro Forms — Portfolio lub przykłady podobnych prac — obowiązkowo Znajomość Google Consent Mode v2 będzie atutem. --- WARUNKI PRACY Strona na produkcyjnym hostingu — wszystkie zmiany tylko przez staging lub testowy duplikat. Jakakolwiek optymalizacja nie powinna naruszać inicjalizacji GTM i dynamicznego dataLayer. Szczegółowe wymagania zostaną przekazane po pierwszym kontakcie. Wynagrodzenie etapowe według bloków lub za cały projekt (dogadamy się) Napisz w odpowiedzi: 1. Twoje doświadczenie z podobnymi zadaniami (link lub krótki opis przypadku) 2. Czy jesteś gotów wykonać cały projekt czy poszczególne bloki 3. Orientacyjny koszt i terminy po zapoznaniu się z wymaganiami

Opis zamówienia: Poszukujemy doświadczonego frontend-dewelopera/specjalisty od OpenCart do optymalizacji szybkości ładowania strony (kategorie i karty produktów) zgodnie z wymaganiami Google Core Web Vitals. O projekcie: * CMS: OpenCart. * Specyfika: Strona działa w trybie katalogu (brak koszyka i składania zamówienia). * Zakres: 2900 pozycji. * Część serwerowa: Już zoptymalizowana (działa na OpenLiteSpeed). * Stos: Prace prowadzone są wyłącznie z kodem szablonu, modyfikatorami i frontendem. Bez pracy z bazą danych. Co należy zrobić (Zadanie techniczne): 1. Opóźnione ładowanie skryptów (Delay JS): * Problem: Zewnętrzne skrypty analityczne (GTM, Google Tag) blokują główny strumień na urządzeniach mobilnych przez około 4,3 sekundy. * Zadanie: Skonfigurować opóźnione uruchamianie tych skryptów. Skrypty powinny aktywować się ściśle po pierwszej akcji użytkownika (pierwsze przewinięcie, dotknięcie ekranu lub ruch myszą). * Ważne: Zbieranie statystyk, analityka i działanie reklamy muszą pozostać w pełnym zakresie. 2. Poprawa metryki CLS (Stabilność układu): * Problem: Strona "skacze" i przesuwa się podczas ładowania obrazków. * Zadanie: W plikach stylów lub szablonu motywu sztywno wpisać atrybuty HTML width i height dla wszystkich obrazów produktów w katalogu (listach) oraz kartach produktów. * Cel: Zarezerwować miejsce pod obrazki w drzewie DOM do ich faktycznego załadowania, aby uniemożliwić przesunięcie treści. Sprawdzić, aby responsywność (CSS) nie została uszkodzona. 3. Optymalizacja krytycznej ścieżki (LCP): * Zadanie: Wpisać dla głównego (najważniejszego) obrazu produktu na pierwszym ekranie tag fetchpriority="high". To da przeglądarce polecenie ładowania głównego zdjęcia produktu w priorytetowy sposób. Wymagania wobec wykonawcy i warunki przyjęcia: 1. Bez zbędnych modułów: Praca wykonywana jest czystym kodem/modyfikatorami, bez instalowania dodatkowych zewnętrznych lub płatnych wtyczek optymalizacyjnych. 2. Bezpieczeństwo i układ: Ponosisz pełną odpowiedzialność za układ. Po wprowadzeniu poprawek wizualne wyświetlanie strony na urządzeniach mobilnych i PC, a także funkcjonalność (filtry, przełączanie zdjęć w galerii, menu) muszą pozostać bez zmian. 3. Kryterium oddania pracy (DoD): Przedstawienie zrzutu ekranu oraz linku do żywego testu raportu Google PageSpeed Insights (dla wersji mobilnej). Wskaźnik wydajności nie może być niższy niż 75 punktów, a metryka CLS — nie więcej niż 0,1 (w zielonej strefie). Poprawki wprowadzać należy wyłącznie przez modyfikatory (OCMOD) lub kopię motywu, aby nie nadpisać aktualizacji jądra. W odpowiedzi proszę podać: 1. Czy miałeś doświadczenie w konfiguracji Delay JS właśnie dla GTM na OpenCart? 2. Termin realizacji zadania. 3. Koszt pracy.