Верстка карточки товара на сайте

Opis: Trzeba jakościowo zrealizować dwie strony analitycznego interfejsu według gotowego makietu z Figma (jeden do jednego) Link: https://www.figma.com Zakres pracy: Strona Single Location: karty metryk, dwie diagramy kołowe, tabela liderów. Strona Multi-Location: karty, interaktywna mapa USA (według stanów), tabela efektywności. Wymagania: Stos: Dowolny według uznania (HTML/CSS/JS, Tailwind, React, Vue itp.) — finalną konwersję kodu pod swoje potrzeby zrobimy sami. Jakość: Ścisłe 1 do 1, staranna responsywna siatka. W odpowiedzi podaj swój stos, cenę, rzeczywiste terminy i dołącz 1–2 przykłady stworzonych przez Ciebie paneli administracyjnych lub dashboardów.

# Potrzebny frontendowiec (WordPress / WooCommerce): karta produktu ## O projekcie Działający sklep internetowy Projekt już gotowy — trzeba go starannie zakodować i zintegrować kartę produktu (single product). - Aktualna strona (przykład): https://obertshop.com.ua/shop/dysky/audi/r21-audi/disk-r21-na-avto-audi-obr9006/ Kodowanie szablonu single-product ## Wymagania - Kodowanie zgodnie z makietą Figma. - Responsywność: desktop + mobile, poprawne wyświetlanie w głównych przeglądarkach. - Integracja z istniejącą tematyką WooCommerce, czysty i wspierany kod. - Wynik — działająca strona na stronie, która odpowiada projektowi. ## Co wysłać w odpowiedzi 1. Portfolio (preferowane WordPress / WooCommerce, karty produktów). 2. Koszt — zaproponuj wygodny format (stała kwota za projekt lub stawka godzinowa). 3. Termin w dniach. 4. Pytania dotyczące makiety oraz lista dostępów/materiałów, które potrzebujemy od nas do rozpoczęcia. Dostęp do Figma, strony i potrzebne materiały przekażę w prywatnych wiadomościach po odpowiedzi.

Potrzebne jest zrealizowanie strony według projektu. Makieta jest trochę krzywa, więc pixel perfect nie jest konieczne. Wykonanie, responsywność dla urządzeń MOB, otwieranie stron po linkach oraz strona w 3 językach. Wszystkie teksty w blokach w innych językach prześlemy później. Dodatkowo: optymalizacja dla Google PageSpeed 100 / 100 dla MOB i PC. Albo przynajmniej 98 z 100, nie mniej!!! Proszę o propozycje terminów i kosztów. Makieta: https://www.figma.com/design/AkM2GAvaLAPw7IAOtkGPIy/DSL-2010--%D0%9F%D1%80%D0%B0%D0%B2%D0%BA%D0%B8-1-?node-id=6177-908&t=u7qPBPqxIifkwaug-0

Strona została stworzona w: Backend: Java + Spring Boot Baza danych: MySQL Frontend: JavaScript, HTML, CSS Silnik szablonów: Thymeleaf Serwer: VPS (Linux Ubuntu) Reverse Proxy: Apache2 Architektura: Aplikacja monolityczna Obecnie na stronie zrealizowano: Blog z panelem administracyjnym. Możliwość tworzenia i edytowania artykułów przez panel admina. Możliwość dodawania HTML i treści przez interfejs wizualny. Statyczne strony serwisu, które są obecnie tworzone przez programistę ręcznie. ⸻ Cel zadania Konieczne jest wdrożenie możliwości tworzenia i zarządzania nowymi stronami usług komercyjnych przez istniejący panel administracyjny, podobnie jak obecnie tworzone są artykuły bloga. Po wdrożeniu administrator powinien mieć możliwość samodzielnego tworzenia nowych stron SEO usług bez udziału programisty. ⸻ Aktualny stan Obecnie przez panel admina można tworzyć tylko wpisy bloga. Przykład: Artykuł 1 Artykuł 2 Artykuł 3 Każdy artykuł ma: Tytuł URL (slug) Treść SEO-parametry Obrazy ⸻ Co należy wdrożyć 1. Nowy typ treści „Usługi” Utworzyć w panelu admina osobną sekcję: „Usługi” Powinna być niezależna od sekcji bloga. Przykład struktury: Blog Usługi ⸻ 1. Tworzenie strony usługi Administrator powinien mieć możliwość stworzenia nowej strony usługi przez interfejs. Strony usług komercyjnych składają się z 13 bloków, z czego 4 bloki są dynamiczne, a 9 statyczne. Pola: Nazwa usługi URL (slug) H1 SEO Tytuł Meta Opis SEO Słowa kluczowe Główna treść strony Obraz Status publikacji (Szkic / Opublikowane) ⸻ 1. Treść strony Treść powinna wspierać: HTML, formatowanie tekstu, nagłówki H2-H6, listy, obrazy, linki Preferowane jest użycie istniejącego edytora, który już jest stosowany w blogu. ⸻ 1. Generowanie URL Każda usługa powinna mieć własny URL. Przykłady: /visa/usa/business-visa-usa /visa/usa/business-visa-uk /visa/usa/business-visa-canada ⸻ 1. Wyświetlanie na stronie Po publikacji strona powinna: automatycznie stać się dostępna pod swoim URL; używać istniejącego szablonu stron usług lub nowego szablonu; poprawnie wyświetlać się na wszystkich urządzeniach. ⸻ 1. SEO Dla każdej usługi należy zapewnić możliwość ustawienia: Tytuł Opis H1 Kanoniczny URL (preferowane) Open Graph (preferowane) Strony powinny być indeksowane przez wyszukiwarki podobnie jak strony bloga. ⸻ 1. Lista usług W panelu admina wdrożyć: listę wszystkich usług; wyszukiwanie; edytowanie; usuwanie; zmianę statusu publikacji. ⸻ 1. Ważne Wdrożyć możliwość tworzenia nowych typów stron SEO bez modyfikacji kodu w przyszłości. przez jeden mechanizm zarządzania treścią. ⸻ Co oczekuje się od programisty Konieczne jest przeanalizowanie istniejącej realizacji bloga i maksymalne wykorzystanie obecnej architektury do stworzenia nowej sekcji „Usługi”. Przy odpowiedzi proszę wskazać: W jaki sposób zadanie zostanie zrealizowane. Jakie zmiany będą potrzebne w bazie danych. Oszacowanie czasu. Koszt prac. Jakie technologie powinien znać wykonawca Obowiązkowo: Java Spring Boot MySQL Thymeleaf HTML/CSS JavaScript Praca z Linux Ubuntu Preferowane: Spring Security SEO-optymalizacja stron serwerowych Doświadczenie w pracy z CMS i modułami CRUD Doświadczenie w wsparciu monolitycznych projektów Spring Boot

Trzeba przeprowadzić audyt istniejącej strony, naprawić błędy techniczne, poprawić SEO, zoptymalizować prędkość i etapowo rozwijać funkcjonalność. Redesign nie jest wymagany Co należy zrobić: Przeprowadzić audyt techniczny strony. Przeprowadzić audyt SEO i zaproponować plan ulepszeń. Znaleźć i usunąć błędy techniczne. Zapropnować ulepszenia w zakresie UX/UI i designu. Zoptymalizować prędkość ładowania. Wprowadzać poprawki na stronie, w razie potrzeby pracować z kodem. W przyszłości — wsparcie i rozwój strony. W odpowiedzi proszę podać: linki do podobnych projektów; doświadczenie w pracy z WordPress (jeśli jest); przybliżony koszt pracy czy są gotowi na długoterminową współpracę.