Social-Proof-Section (React and Tailwind)

Community feedback

• 

  Ehsan Tatasadi•1,800

  @tatasadi

  Posted over 1 year ago

  Hey there,

  Firstly, fantastic job on the challenge! It's evident that a lot of effort and skill went into this project. I do have a few suggestions that might help in refining the code further:

  Regarding the Social Component:

  The current implementation uses a component just to render an image:

  export default function Social() {
    return <img src="/images/icon-star.svg" alt="icon-star" />;
  }
  

  While modularizing is generally a good practice, in this case, it might be an over-abstraction. Unless there are additional functionalities or complexities anticipated for the Social component in the future, directly embedding the image where it's needed might be more straightforward.

  Naming and Structure of the Count Component:

  The Count component seems to be more aligned with the functionality of a testimonial card. A more descriptive name like TestimonialCard would better reflect its purpose:

  export default function TestimonialCard({ icon, title, text }) {
    // component code
  }
  

  Also, assigning a fixed height to the card (h-[15.5rem]) could lead to content overflow for longer texts. It's generally better to let the card's height adjust based on its content.

  Styling of the Main Element:

  Avoid setting a fixed width and height for the main element. Allowing it to grow and adapt to different screen sizes and content lengths is usually more effective for responsive design.

  CSS for Card Alignment:

  The current approach to aligning cards using margins in the media query is not ideal:

  @media (min-width: 64em) {
    div.btn:nth-child(1) {
      margin-left: 1px;
    }
    div.btn:nth-child(2) {
      margin-left: 35px;
    }
    div.btn:nth-child(3) {
      margin-left: 65px;
    }
    div.wrap:nth-child(2) {
      margin-top: 50px;
    }
    div.wrap:nth-child(3) {
      margin-top: 80px;
    }
  }
  

  Instead of manually adjusting margins for each card, consider using CSS Grid. Grid layout offers a more dynamic and flexible way to arrange elements, especially for responsive designs. It can automatically handle the spacing and alignment of cards, reducing the need for specific margin adjustments.

  00

  Marked as helpful