Implementation of a page in HTML (design in Figme)

The plugin is used in the AdminLTE2 v.4 admin panel (built on top of bootstrap5) https://adminlte.io/ It is necessary for the dropdown to be correctly colored in both modes data-bs-theme="light" and data-bs-theme="dark" That is, in dark mode there should be a black background and white text A test example is attached The problem arose when translating the project https://github.com/leon-mbs/zstore to the new bootstrap with the built-in dark theme The previous version of adminlte (with bs4) used its own dark mode and everything worked automatically there CSS can be changed (or rebuilt), the main thing is to understand which variables or styles need to be modified in the actual project. To simplify changes, you can insert into the tag in the Maybe there are some reasonable alternative solutions, adding search to the html select tag The performer must understand what they are doing - no AI-bullcoding

The website is developed on: Backend: Java + Spring Boot Database: MySQL Frontend: JavaScript, HTML, CSS Template Engine: Thymeleaf Server: VPS (Linux Ubuntu) Reverse Proxy: Apache2 Architecture: Monolithic application Currently, the website has implemented: A blog with an admin panel. The ability to create and edit articles through the admin panel. The ability to add HTML markup and content through a visual interface. Static pages of the site, which are currently created by the developer manually. ⸻ Task Objective It is necessary to implement the ability to create and manage new commercial service pages through the existing admin panel similarly to how blog articles are currently created. After implementation, the administrator should be able to independently create new SEO service pages without the involvement of the developer. ⸻ Current State Currently, only blog posts can be created through the admin panel. Example: Article 1 Article 2 Article 3 Each article has: Title URL (slug) Content SEO parameters Images ⸻ What Needs to be Implemented 1. New content type "Services" Create a separate section in the admin panel: "Services" It should be independent of the blog section. Example structure: Blog Services ⸻ 1. Creating a service page The administrator should be able to create a new service page through the interface. Commercial service pages consist of 13 blocks, of which 4 blocks are dynamic and 9 are static. Fields: Service name URL (slug) H1 SEO Title Meta Description SEO Keywords Main content of the page Image Publication status (Draft / Published) ⸻ 1. Page content The content should support: HTML markup Text formatting Headings H2-H6 Lists Images Links It is preferable to use the existing editor that is already applied in the blog. ⸻ 1. URL generation Each service should have its own URL. Examples: /visa/usa/business-visa-usa /visa/usa/business-visa-uk /visa/usa/business-visa-canada ⸻ 1. Display on the site After publication, the page should: automatically become available at its URL; use the existing service page template or a new template; display correctly on all devices. ⸻ 1. SEO For each service, it is necessary to provide the ability to configure: Title Description H1 Canonical URL (preferably) Open Graph (preferably) Pages should be indexed by search engines similarly to blog pages. ⸻ 1. List of services In the admin panel, implement: a list of all services; search; editing; deletion; changing publication status. ⸻ 1. Important Implement the ability to create new types of SEO pages without code modifications in the future. through a unified content management mechanism. ⸻ What is Expected from the Developer It is necessary to analyze the existing implementation of the blog and maximize the reuse of the current architecture to create the new "Services" section. When responding, please indicate: How the task will be implemented. What changes will be required in the database. Time estimate. Cost of work. What technologies should the performer know Mandatory: Java Spring Boot MySQL Thymeleaf HTML/CSS JavaScript Working with Linux Ubuntu Desirable: Spring Security SEO optimization of server pages Experience with CMS and CRUD modules Experience supporting monolithic Spring Boot projects

It is necessary to conduct an audit of the existing website, fix technical errors, improve SEO, optimize speed, and gradually enhance functionality. Redesign is not required. What needs to be done: Conduct a technical audit of the website. Conduct an SEO audit and propose a plan for improvements. Identify and eliminate technical errors. Propose improvements for UX/UI and design. Optimize loading speed. Make enhancements to the website, and if necessary, work with the code. In the future — support and development of the website. In your response, please include: links to similar projects; experience working with WordPress (if any); estimated cost of work; whether you are ready for long-term cooperation.

A corporate website in English needs to be developed in the fintech theme, licensed business, M&A, and legal support. There are 10 ready-made page designs in PNG, as well as separate images and a logo. There are no Figma layouts. A precise pixel-perfect reproduction is not required, but it is important to maintain the overall style, structure, typography, colors, and logic of the blocks. The site must be fully coded, not assembled from screenshots or images. Pages Home; offers catalog; individual offer page; Legal Services — general services page; individual service page; list of articles; article page; About; Contact; Submit Inquiry / inquiry form. What needs to be implemented custom WordPress theme without Elementor, Divi, WPBakery, and other visual builders; clean HTML/CSS/JS coding; ACF / ACF Pro for convenient content editing through the admin panel; separate post types for Offers, Legal Services, Articles; offers catalog with search, filters, sorting, and pagination; blocks for featured offers, related offers, latest insights, and related articles; inquiry forms with email submission and basic spam protection; editing through the admin panel of contacts, CTA blocks, menus, footer, and other repeating elements; basic speed optimization: WebP, lazy load, optimized images. Mobile version There are no separate mobile layouts. A logical and convenient adaptation based on desktop references needs to be done independently. It is especially important to correctly adapt the menu, cards, catalog and offer filters, forms, specifications on offer pages, CTA blocks, and footer. A separate complex mobile design from scratch is not needed, but it should not just be a reduced desktop version.

# Technical Task It is necessary to update the design of the online store on WordPress/WooCommerce and perform a number of technical improvements. ## 1. Website Redesign Current website: https://promo.doctor-magnesium.com.ua/ Use as the basis for the new design: https://demo.templatemonster.com/demo/220581.html ### Requirements Bring the appearance as close as possible to the reference. Adapt the design to the existing structure of the store. Preserve all existing functionality. Fully responsive layout (PC, tablet, mobile devices). Optimize page loading speed. Do not worsen SEO (URL, metadata, indexing). ## 2. WooCommerce It is necessary to check and correct the display of order statuses. Currently, the statuses are not working correctly. It is necessary to ensure the correct display and processing of standard WooCommerce statuses, including: Paid Processing In Progress Completed Awaiting Payment Canceled Refund Other standard statuses It is necessary to find the cause of the problem (plugin, theme, or custom code) and fix it without losing functionality. ## 3. English Version of the Site It is necessary to implement a full English version of the site. Requirements: language switching capability; English version of all main pages; translation of the store interface; translation of WooCommerce; translation of the product card; correct operation of the cart and order placement in English. A suitable plugin can be used (WPML, Polylang, or another), but it is preferable to propose the optimal solution. ## 4. General Requirements Before starting work, make a backup of the site. All changes should preferably be made first on a test copy. The code must be clean and compatible with future updates of WordPress and WooCommerce. After completion, provide a brief report on the completed work. ## When responding, please indicate Estimated cost. Completion time. Experience with WordPress/WooCommerce. Examples of similar projects (if available). What approach will be used to implement the English version.