Layout of the feedback block for Kursach.site

1. General Information

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

2. Layout and References

• Link to the layout: kursach – Figma

3. Block Description

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

4. Structure

• Header
  

• Review Blocks

  • 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 header and confirm/delete reviews through the WordPress admin panel

6. Interactive Elements

• Review blocks can be scrolled using the scroll buttons (3 items are scrolled at a time). Depending on the current page of displayed review pages - the scroll slider on the 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 confirmation (it is also sent to email - this is currently implemented). 

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

8. Final Result

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