Front-end praca laboratoria

Wtyczka jest używana w panelu AdminLTE2 v.4 (oparta na bootstrap5) https://adminlte.io/ potrzebne jest, aby dropdown poprawnie kolorował się w obu trybach data-bs-theme="light" i data-bs-theme="dark" to znaczy w trybie ciemnym miał czarne tło i biały tekst w załączniku testowy przykład Problem pojawił się podczas przenoszenia projektu https://github.com/leon-mbs/zstore na nowy bootstrap z wbudowanym ciemnym motywem Poprzednia wersja adminlte (z bs4) używała swojego trybu ciemnego i tam wszystko działało samo Można zmienić (lub przebudować) css, ważne, aby było jasne, które zmienne lub style należy zmienić w rzeczywistym projekcie. Aby uprościć zmiany, można wstawić do tagu w Może są jakieś sensowne alternatywne rozwiązania, dodające wyszukiwanie w tagu html select Wykonawca musi rozumieć, co robi - żadnego AI-łajdactwa

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ę.

Potrzebne jest opracowanie anglojęzycznej strony internetowej dla firmy w tematyce fintech, licencjonowanego biznesu, M&A oraz wsparcia prawnego. Jest 10 gotowych projektów stron w formacie PNG, a także oddzielne obrazy i logo. Nie ma makiet Figma. Nie jest wymagane dokładne odwzorowanie pixel-perfect, ale ważne jest zachowanie ogólnej stylistyki, struktury, typografii, kolorów i logiki bloków. Strona musi być w pełni zakodowana, a nie złożona ze zrzutów ekranu lub obrazów. Strony Strona główna; katalog ofert; strona pojedynczej oferty; Usługi prawne — ogólna strona usług; strona pojedynczej usługi; lista artykułów; strona artykułu; O nas; Kontakt; Wyślij zapytanie / formularz zapytania. Co należy zrealizować niestandardowy motyw WordPress bez Elementor, Divi, WPBakery i innych wizualnych konstruktorów; czysty HTML/CSS/JS kod; ACF / ACF Pro dla wygodnej edycji treści przez panel administracyjny; oddzielne typy wpisów dla Ofert, Usług Prawnych, Artykułów; katalog ofert z wyszukiwarką, filtrami, sortowaniem i paginacją; bloki wyróżnionych ofert, powiązanych ofert, najnowszych informacji oraz powiązanych artykułów; formularze kontaktowe z wysyłaniem zgłoszeń na email i podstawową ochroną przed spamem; edycja przez panel administracyjny kontaktów, bloków CTA, menu, stopki i innych powtarzających się elementów; podstawowa optymalizacja prędkości: WebP, lazy load, zoptymalizowane obrazy. Wersja mobilna Nie ma oddzielnych makiet mobilnych. Należy samodzielnie wykonać logiczną i wygodną adaptację na podstawie desktopowych referencji. Szczególnie ważne jest poprawne dostosowanie menu, kart, katalogu i filtrów ofert, formularzy, charakterystyk na stronach ofert, bloków CTA oraz stopki. Nie jest wymagany oddzielny skomplikowany projekt mobilny od podstaw, ale to nie może być tylko pomniejszona wersja desktopowa.

# Specyfikacja techniczna Potrzebne jest zaktualizowanie projektu sklepu internetowego na WordPress/WooCommerce oraz wykonanie szeregu poprawek technicznych. ## 1. Redesign strony Aktualna strona: https://promo.doctor-magnesium.com.ua/ Za podstawę nowego projektu wykorzystać: https://demo.templatemonster.com/demo/220581.html ### Wymagania Maksymalnie zbliżyć wygląd do referencji. Dostosować projekt do istniejącej struktury sklepu. Zachować cały istniejący funkcjonalność. Całkowicie responsywne układ (PC, tablet, urządzenia mobilne). Optymalizować szybkość ładowania stron. Nie pogorszyć SEO (URL, metadane, indeksowanie). ## 2. WooCommerce Konieczne jest sprawdzenie i poprawienie wyświetlania statusów zamówień. Obecnie statusy działają niepoprawnie. Należy zapewnić prawidłowe wyświetlanie i przetwarzanie standardowych statusów WooCommerce, w szczególności: Opłacono W trakcie realizacji Wykonywane Zakończone Oczekuje na płatność Anulowane Zwrot pieniędzy Inne standardowe statusy Trzeba znaleźć przyczynę problemu (wtyczka, motyw lub kod niestandardowy) i naprawić ją bez utraty funkcjonalności. ## 3. Angielska wersja strony Konieczne jest wdrożenie pełnoprawnej anglojęzycznej wersji strony. Wymagania: możliwość przełączania języków; angielska wersja wszystkich głównych stron; tłumaczenie interfejsu sklepu; tłumaczenie WooCommerce; tłumaczenie karty produktu; poprawne działanie koszyka i składania zamówienia w języku angielskim. Można użyć odpowiedniej wtyczki (WPML, Polylang lub innej), ale pożądane jest zaproponowanie optymalnego rozwiązania. ## 4. Ogólne wymagania Przed rozpoczęciem prac wykonać kopię zapasową strony. Wszystkie zmiany należy najpierw wprowadzać na kopii testowej. Kod powinien być schludny i zgodny z przyszłymi aktualizacjami WordPress i WooCommerce. Po zakończeniu dostarczyć krótki raport o wykonanych pracach. ## W odpowiedzi proszę podać Orientacyjną cenę. Terminy realizacji. Doświadczenie w pracy z WordPress/WooCommerce. Przykłady podobnych projektów (jeśli są dostępne). Jakie podejście zostanie wykorzystane do realizacji anglojęzycznej wersji.