HardGeneral
Customer Reviews

👤 Client Story:

We're launching a new software project next month, and we'd like to have this section ready to be implemented in our website. The design given matches our new branding and we're excited to see this final piece of the puzzle put into place. We take pride in great UI/UX and a minimalistic visual precision of our branding. So, we would like the final product to be delivered exactly as shown in the mockup. The animations should be detailed and subtle, and not too on the nose. We want the animation to play automatically until the user interacts with it. Note: We use the Rubik font which is available through Google Fonts.

Can you build a functional prototype for the reviews section?

🚀 Summary

This project will help you practice CSS flexbox principles and necessitate understanding Javascript animations. Additionally, this hard level project includes advanced requests related to interactive animations and responsive sizing.

📗 Recommended Pre-study

GSAP
https://greensock.com/get-started

Open Source Icon Libaries
https://heroicons.com/ https://icons.getbootstrap.com/

📋 Project Requirements:

Goal: Create a pixel-perfect recreation of the reviews section mockup, with animations and mobile-responsive sizing.

1. Layout:

   • Space the reviews evenly, and round the corners.
   • Display 1 review at a time for mobile users.
   • Display 3 reviews for desktop users.
   • Find and link the correct font in the head section.
   • Add a decorative quote that overhangs the top.

2. Interactivity:

   • Arrows should shift the reviews one review at a time.
   • Play the slideshow automatically until the user clicks.
   • Ensure the animation works on a variety of screen sizes.
   • Ensure the animation works for varying numbers of reviews.
   • Add an animation to indicate the end of the slideshow.
   • As an alternative for demonstration, loop back to the beginning at the end of the slideshow.

⚠️ Challenge

Try switching the project animations to vanilla JS (or to GSAP if you haven't yet).