🐞 Review Card Content Overflow Fix + (bullet+slider) style change🐞

[ayushpandey101]

Which issue does this PR close?

• Closes 🐞 Bug Report: Review Card Content Overflow(No Div) 🐞 #206 .

Rationale for this change

• Addresses UI issues with the previous bulky and fixed-height review cards overflowing outside the div.
• Introduces a more compact, flexible, and modern design for better space utilization.
• Improves responsiveness and visual consistency across all devices.
• changing the bullet and slider style

What changes are included in this PR?

• CustomerReviews.jsx:

  • Wrapped the Swiper component in a new .reviews-swiper-wrap div for better layout control.
  • Adjusted Swiper breakpoints to show partial slides on tablet view (slidesPerView: 1.2), improving user engagement.

• CustomerReviews.css:

  • Made .review-card flexible by removing its fixed height and reducing max-width and padding.
  • Reduced the size of card elements (avatar, fonts, quote icon) for a more compact look.
  • Centered the new, narrower cards within each slide using justify-content.

Are these changes tested?

• Yes, manually tested on various screen sizes (mobile, tablet, desktop) to ensure responsiveness.
• Verified Swiper functionality (navigation, pagination, autoplay) works as expected.
• Checked for visual consistency in modern browsers.

Are there any user-facing changes?

• Yes, a visually refreshed and more professional customer reviews section.
• Review cards are now more compact and modern in appearance.
• Improved slider experience, especially on tablets, where adjacent slides are now visible.

Screenshots

Light Mode:

Dark Mode:

[github-actions]

Thanks for creating a PR for your Issue! ☺️

We'll review it as soon as possible.
In the meantime, please double-check the file changes and ensure that all commits are accurate.

If there are any unresolved review comments, feel free to resolve them. 🙌🏼

[ayushpandey101]

@Skrishna0703 please merge the #219 pr first or else git conflict will occur