Improvement of the Bropack website on WordPress (layout adjustments, form settings, and SEO)

Task Description:

We are looking for an experienced WordPress developer/front-end developer to promptly complete the project https://bropack.com.ua/. The site has already been designed and set up on WordPress, but due to the previous contractor missing deadlines, it is necessary to finalize the technical part, set up basic SEO, and make a number of specific visual adjustments strictly according to the Figma layout.

Important: The work requires strict adherence to deadlines and attention to detail. Payment is made only after checking all points of the technical specifications. We have a complete backup of the site (theme files + database) and a link to the layouts in Figma.

Cost: The cost of work should include adjustments up to 10% of the current technical specifications, which may currently be invisible due to unfinished layout. There may also be minor design changes to some blocks (height, width, button placement, image size).

Corrections: Corrections are sent as a Word file by the client. They are accepted from the contractor in the same file with comments next to each line. Without such a response to corrections, the contractor will be changed.

1. Theme Architecture and Basic Optimization

• Assembly Feature (Custom PHP): The site is a custom theme written in PHP/HTML/CSS/JS (without using heavy visual builders). The content management logic is integrated into the built-in WordPress customizer (Appearance -> Customize). All key sections (Header, Hero, Collages, Benefits Blocks) are edited there. You will need to work directly with the code (PHP templates) and this structure.

• URLs: Set up automatic transliteration of URLs (SEO-friendly URLs). All Cyrillic page and post titles must automatically convert to Latin (for example, "Про компанію" -> /pro-kompaniyu/)

• SEO Plugin: The Yoast SEO plugin is installed but not configured. Basic setup is required for correct snippet generation, indexing, and full readiness of landing pages for launching advertising campaigns.

• SEO for Custom Blocks: Ensure proper SEO functionality/setup on pages with blocks.

• Image Attributes (Alt/Title): In the current PHP templates (specifically, in blog articles and grid elements), alt and title attributes for images are not displayed. The logic for displaying images needs to be improved so that these attributes are dynamically pulled from the standard WordPress media library. Without this, proper SEO optimization of images is impossible.

• Microdata (Schema.org): In the Yoast SEO plugin, set up Schema.org microdata for Google.
  - Configure global organization parameters (company name, logo, contact details).
  - Check the correctness of tag generation and the technical date of page modification (dateModified), so that search engines instantly see manual date updates on the site.
  - Ensure that the standard Yoast functionality for precise control of markup types is displayed and works correctly on custom PHP page templates - assign page types according to the client's recommendations.

• Blog Template (Articles): It is necessary to remove complex article layouts exclusively through custom blocks/fields. Articles should be published through the standard WordPress text editor. It is required to configure the output of the_content() and write CSS styles so that all standard elements within the article automatically adopt the design from Figma (global styles). Specifically:
  1. Standard text (paragraphs, line spacing, color).
  2. Headings H1, H2, H3 (size, font weight, margins).
  3. Images and embedded videos (responsive width, margins, possibly rounded corners as per the layout).
  4. Lists (bulleted and numbered).
  5. Standard buttons.
  
  
  

2. Technical Part: Forms, Protection, and Logic

It is necessary to establish secure operation of all lead capture forms:

• Integration: Set up lead submission via SendPulse. Indicate at the start of work what access (API keys, etc.) you will need for this.

• Anti-spam: Install reliable spam protection on all forms (preferably Cloudflare Turnstile, or suggest a justified alternative).

• Implement flood protection. Limit: a form can be submitted a maximum of 2 times from one IP address within 5 minutes. All other attempts should be blocked.

• Validation and Mask: Check the input mask for the phone number (missing fields are filled with digits). The "Phone" field must be mandatory in all forms. The "Name" field should be optional in all forms - check.

• Behavior after Submission: Set up automatic clearing of form fields after successful submission. The page should not reload or scroll up/down — the user remains at the current screen position.

3. Current Corrections According to Figma

It is necessary to eliminate shortcomings and bring the layout to 100% compliance with the layout (detailed screenshots will be provided to the selected contractor):

Styles:

• Adjust the background of the main banner (make it lighter according to the layout) and move the button (suggest 3 screenshots for approval) https://bropack.com.ua/ready-solutions/.

• In sliders and video blocks, leave exactly 5 buttons (dots).

• Check the text "Оновлено" (in italics) at the bottom of the pages.

• On mobile, check the swipe functionality in all sliders; sometimes it captures the right or left edge of the site instead of swiping.

Grid, Blocks, and Margins:

• Reduce some margins between blocks according to Figma - 15-20 pcs.

• Increase the height of specified blocks and font size in them to values from Figma.

• Check the lower lead capture forms: increase their overall height, as well as the height of buttons and font inside.

• On the "Про компанію" page: lower the dividing line for alignment with the left column, shift the heading "Наші цінності" to the left.

Pop-ups and Graphics (Character):

• Return the character that has shifted to the right in the modal window (popup) to its place.

• In the popup, place the close icon (cross) on the gray circle according to the layout.

• Fix the proportions/display of the vertical photo in the popup.

• Completely remove the empty popup without text.

• Adjust the positioning of characters (heroes): in one of the blocks, reduce the size; on the "Контакти" page, shift left and up; on the "Про компанію" page — increase and shift to the right.