From 58a155dfccbccaad080c0807437a7fa53071f333 Mon Sep 17 00:00:00 2001
From: Pulkit <kpulkit15234@gmail.com>
Date: Mon, 23 Dec 2024 17:09:16 +0530
Subject: [PATCH] fix: testimonials alignment

---
 components/Testimonial.tsx | 43 +++++++++++++++++++++++---------------
 1 file changed, 26 insertions(+), 17 deletions(-)

diff --git a/components/Testimonial.tsx b/components/Testimonial.tsx
index b8a2d5abce27..36e1413f35a3 100644
--- a/components/Testimonial.tsx
+++ b/components/Testimonial.tsx
@@ -12,38 +12,47 @@ interface TestimonialProps {
 }
 
 /**
- * @description This component displays Testimonial component.
+ * @description This component displays a Testimonial card with consistent spacing and alignment.
  *
  * @param {TestimonialProps} props - The props for the Testimonial component.
  * @param {string} props.className - Additional CSS class for styling the card.
  * @param {string} props.text - The testimonial from the author.
  * @param {string} props.authorName - The name of the author.
  * @param {string} props.authorDescription - The description of the author.
- * @param {string} props.authorAvatar - The path to avatar of the author.
+ * @param {string} props.authorAvatar - The path to the avatar of the author.
  */
 export default function Testimonial({
   className = '',
   text,
   authorName,
   authorDescription,
-  authorAvatar
+  authorAvatar,
 }: TestimonialProps) {
   return (
-    <li className={`p-4 sm:px-6 md:flex md:flex-row md:py-4 md:pr-0 ${className}`}>
-      <blockquote className='mt-8 md:flex md:grow md:flex-col'>
-        <div className='relative text-lg font-medium leading-7 text-gray-600 md:flex-1'>
-          <IconQuote className='absolute left-0 top-0 size-8 -translate-y-2 text-primary-500' />
-          <Paragraph className='relative pl-10 text-left'>{text}</Paragraph>
+    <li
+      className={`flex flex-col gap-6 p-6 sm:px-8 sm:py-6 md:flex-row md:gap-8 md:p-8 ${className}`}
+    >
+      <blockquote className="flex flex-col gap-6 text-left md:flex-grow">
+        <div className="relative text-lg font-medium leading-7 text-gray-600">
+          <IconQuote className="absolute left-0 top-0 h-8 w-8 -translate-y-2 text-primary-500" />
+          <Paragraph className="relative pl-12">{text}</Paragraph>
         </div>
-        <footer className='mt-6'>
-          <div className='flex'>
-            <figure className='inline-flex shrink-0 rounded-full border-2 border-white'>
-              <img className='size-12 rounded-full' src={authorAvatar} alt={authorName} data-testid='Testimonial-img' />
-            </figure>
-            <div className='ml-4 text-left'>
-              <p className='text-base font-bold leading-6 text-gray-900'>{authorName}</p>
-              <p className='text-base font-medium leading-6 text-primary-500'>{authorDescription}</p>
-            </div>
+        <footer className="flex items-center gap-4">
+          <figure className="flex-shrink-0 rounded-full border-2 border-white">
+            <img
+              className="w-12 h-12 rounded-full"
+              src={authorAvatar}
+              alt={authorName}
+              data-testid="Testimonial-img"
+            />
+          </figure>
+          <div>
+            <p className="text-base font-bold leading-6 text-gray-900">
+              {authorName}
+            </p>
+            <p className="text-sm font-medium leading-5 text-primary-500">
+              {authorDescription}
+            </p>
           </div>
         </footer>
       </blockquote>