fix: logo, ratings, write a review bttn allignment & size

Author: wenyngcar

app/(home)/components/Testimonials.tsx

@@ -1,6 +1,5 @@
 'use client';
 
-import { Star } from 'lucide-react';
 import { Button } from '@/components/ui/button';
 import Image from 'next/image';
 import { Container } from '@/components/ui/container';
@@ -90,46 +89,46 @@ export function Testimonials() {
 
   return (
     <section className="relative z-10 text-white py-12 sm:py-16">
-      <Container>
+      <Container className='space-y-8'>
         {/* Combined container: Ratings + Button */}
-        <div className="flex flex-col gap-8 sm:gap-12 lg:flex-row lg:items-center lg:justify-between">
+        <div className="flex flex-col space-y-5 lg:flex-row lg:items-center lg:justify-between">
           {/* Logo & Ratings */}
-          <div className="flex flex-col items-center text-center lg:items-start lg:text-left max-w-xl">
-            <div className="flex items-center gap-2">
-              <Image
-                src="/assets/logo.svg"
-                height={64}
-                width={64}
-                className="h-20 md:h-24 w-auto"
-                alt="Durianpy Logo"
-                priority
-              />
-              <h2 className="text-2xl sm:text-3xl md:text-4xl font-normal">
-                Ratings
-              </h2>
-            </div>
+          <div className="flex flex-col items-center lg:items-start lg:text-left w-full">
+            <div>
+              <div className="flex items-center gap-x-4">
+                <Image
+                  src="/assets/logo.svg"
+                  height={64}
+                  width={64}
+                  className="h-20 md:h-24 w-auto"
+                  alt="Durianpy Logo"
+                  priority
+                />
+                <h2 className="text-2xl sm:text-3xl md:text-4xl font-normal">
+                  Ratings
+                </h2>
+              </div>
 
-            <div className="flex flex-col sm:flex-row items-center gap-2 mt-4">
-              <span className="text-xl sm:text-2xl font-bold">4.8</span>
-              <div className="flex">
-                {[...Array(4)].map((_, i) => (
-                  <Star
-                    key={i}
-                    className="text-yellow-500 fill-yellow-500 w-5 h-5 sm:w-6 sm:h-6 md:w-8 md:h-8"
-                  />
-                ))}
-                <Star className="text-white fill-current w-5 h-5 sm:w-6 sm:h-6 md:w-8 md:h-8" />
+              {/* Star Ratings */}
+              <div className="flex sm:flex-row self items-center sm:space-x-4 -mt-5 ms-2">
+                <span className="">4.8</span>
+                <div className="flex -space-x-2 sm:-space-x-1">
+                  {[...Array(4)].map((_, i) => (
+                    <Image src={yellowStarIcon} alt="yellow star" key={i} className="p-2 sm:p-[6px]" />
+                  ))}
+                  <Image src={whiteStarIcon} alt="yellow star" className="p-2 sm:p-[6px]" />
+                </div>
+                <span className="font-light">5 reviews</span>
               </div>
-              <span className="text-lg sm:text-xl font-light">5 reviews</span>
             </div>
           </div>
 
           {/* Button */}
-          <div className="w-full sm:w-auto flex justify-center lg:justify-end">
+          <div className="mx-auto">
             <Link href="https://www.meetup.com/durianpy/" target="_blank">
               <Button
                 variant="footer"
-                className="w-full sm:w-[180px] md:w-[220px] h-12 sm:h-14 text-black sm:text-lg md:text-2xl"
+                className="py-1 px-4 sm:py-2 sm:px-6 text-black sm:text-lg sm:font-normal"
               >
                 Write a Review
               </Button>
@@ -150,7 +149,7 @@ export function Testimonials() {
             autoplayInterval={5000}
             className="mx-auto"
           >
-            <CarouselContent className="mx-auto py-20">
+            <CarouselContent className="mx-auto">
               {dummyData.map((data, index) => (
                 <CarouselItem
                   className="relative px-[3%] flex justify-center lg:basis-1/3"