WEB-55 Fix: testimonial card - company and title (#385)

* fix testimonial card - company and title

* fix width of cards

Author: ivke995

apps/website/src/components/Avatar.astro

@@ -2,9 +2,9 @@
 const { imagePath, name, company, role } = Astro.props;
 ---
 
-<div class="grid gap-3 max-md:grid-rows-[auto_auto] md:grid-cols-2">
+<div class="flex gap-3 col-span-2">
   <img src={imagePath} class="h-[72px] w-[72px]" />
-  <span class="text-sm">
+  <span class="text-xl leading-7">
     <strong>{name}</strong><br />
     <span class="underline">{company}</span>
     {role}

apps/website/src/components/testimonial.astro

@@ -16,6 +16,7 @@ for (const testimonial of testimonialCollections) {
     name: testimonial.data.name,
     title: testimonial.data.title,
     imageUrl: testimonial.data.imageUrl,
+    company: testimonial.data.company,
   });
 }
 ---
@@ -30,15 +31,20 @@ for (const testimonial of testimonialCollections) {
     </SectionTitle>
   </div>
   <div
-    class="px-4 sm:px-7 no-scrollbar flex overflow-x-auto w-full gap-2 pt-12 md:pt-16 lg:pt-24"
+    class="px-4 sm:px-7 no-scrollbar flex overflow-x-auto w-full gap-2 pt-12 md:pt-16 lg:pt-24
+  xl:flex-wrap xl:justify-between xl:overflow-hidden"
   >
     {
-      testimonials.map(({ name, content, title, imageUrl }) => (
-        <article class=" bg-[#F4F4F4] rounded-2xl p-7 min-w-[318px] md:min-w-[474px] xl:min-w-0 max-w-full [&_p]:leading-7 [&_p]:text-black [&_p]:w-full">
-          <p set:html={content?.html} class="" />
-
+      testimonials.map(({ name, content, title, imageUrl, company }) => (
+        <article class="flex-1 bg-[#F4F4F4] rounded-2xl p-7 min-w-[318px] md:min-w-[474px] xl:min-w-0 max-h-fit max-w-full [&_p]:leading-7 [&_p]:text-black [&_p]:w-full">
+          <p set:html={content?.html} class="text-base leading-[26px]" />
           <div class="pt-7">
-            <Avatar name={name} role={title} imagePath={imageUrl} />
+            <Avatar
+              name={name}
+              role={title}
+              imagePath={imageUrl}
+              company={company}
+            />
           </div>
         </article>
       ))

apps/website/src/content/testimonials/1raphael-bauer.md

@@ -1,7 +1,8 @@
 ---
 imageUrl: "/raphael-bauer.png"
 name: "Raphael Bauer"
-title: "Interim CTO"
+title: "CTO"
+company: "Interim"
 ---
 
 CroCoder is one of the most trusted partners in my network. We have successfully completed multiple projects in the past. I highly recommend CroCoder - their team is exceptional and they will offer you outstanding support for your projects. I look forward to future collaborations with CroCoder!

apps/website/src/content/testimonials/2paul-jeszensky.md

@@ -1,7 +1,8 @@
 ---
 imageUrl: "/Paul-Jeszenszky.png"
 name: "Paul Jeszenszky"
-title: "Submix co-founder & CEO"
+title: "co-founder & CEO"
+company: "Submix"
 ---
 
 We have found the perfect extension of our team with CroCoder. We operate as one team, celebrating our wins and working through the challenges together. They “own” the roadmap, deadlines and outcomes with us - from the ideation and direction stages through to post-launch optimization.

apps/website/src/content/testimonials/3michele.md

@@ -1,7 +1,8 @@
 ---
 imageUrl: "/michele-rattotti.png"
 name: "Michele Rattotti"
-title: "4evergreen Project Manager"
+title: "Project Manager"
+company: "4evergreen"
 ---
 
 We were impressed by the proactive attitude [of CroCoder] and capacity to turn theory into practice. Their support and assistance was very timely and precise, always followed by concrete implementing steps. The small team has a strong multidisciplinary background and proved a good attitude to work in team with other consultants