Feedback block

Layout of the reviews block

1. General Information

• Location: Home (instead of the current one), commercial pages (instead of the current one), warranty page (under the block with the public offer)

2. Layout

• Link to the layout: Figma

3. Description of the Block

The block will be automatically updated, pulling data from sources with reviews (currently Google), from which we will later take data for markup.

4. Structure

• Title
  

• Review cards

  • Photo

  • First Name/Last Name

  • Type of Work

  • Rating

  • Review Text

  • Source of Review

• Scroll buttons

• Scroll slider (desktop)
  

• “Leave a Review” button

5. Layout Requirements

• The block must be responsive and have a separate fixed view for the following sizes:

  • 320px, 360px, 414px - mobile versions

  • from 414px to 768px, 834px, 1024px - tablets

  • from 1024 to 1280px, 1366px, 1440px, 1600px, 1920px

• The block must occupy exactly 100% of the screen width, without horizontal scrolling.

• We must be able to edit the title and approve/delete reviews through the WordPress admin panel

6. Interactive Elements

• Review cards can be scrolled using the scroll buttons (3 at a time). Depending on the current page of displayed review pages, the scroll slider on desktop changes.

• When hovering over the “Leave a Review” button, a shadow appears (as on other buttons on the site)

7. Logic

We are not entirely sure how to implement this, so we would appreciate consultation.

At the moment, we need to connect only reviews from Google.

Photo, First Name/Last Name, rating, and review text are taken from the review itself. The source of the review is determined based on where the review came from (this needs to be automated). The type of work is set through the WordPress admin panel

The “Leave a Review” button opens the NPS form (it should work as it does now). After leaving a review through this button, it should also go to the WordPress admin panel for our approval (it also goes to email - this is currently implemented).

If the review has not been approved, we do not display it in the block

8. Final Result

The finished block must be laid out according to the layout, responsive, fully occupy the screen width (while being the same size as other blocks), display correctly at all planned widths, and be integrated into the places specified in the technical specifications.