fix(images): update image formats and improve styling in SectionClientSay component

src/components/SectionClientSay.tsx

@@ -3,14 +3,14 @@
 import React, { FC, useState } from "react";
 import Heading from "@/shared/Heading";
 import clientSayMain from "@/images/clientSayMain.png";
-import clientSay1 from "@/images/clientSay1.png";
-import clientSay2 from "@/images/clientSay2.png";
-import clientSay3 from "@/images/clientSay3.png";
-import clientSay4 from "@/images/clientSay4.png";
-import clientSay5 from "@/images/clientSay5.png";
-import clientSay6 from "@/images/clientSay6.png";
-import quotationImg from "@/images/quotation.png";
-import quotationImg2 from "@/images/quotation2.png";
+import clientSay1 from "@/images/clientSay1.jpg";
+import clientSay2 from "@/images/clientSay2.webp";
+import clientSay3 from "@/images/clientSay3.jpg";
+import clientSay4 from "@/images/clientSay4.jpg";
+import clientSay5 from "@/images/clientSay5.jpg";
+import clientSay6 from "@/images/clientSay6.jpg";
+import quotationImg from "@/images/quotation.jpg";
+import quotationImg2 from "@/images/quotation.png";
 import { MapPinIcon } from "@heroicons/react/24/outline";
 import { AnimatePresence, motion, MotionConfig } from "framer-motion";
 import Image from "next/image";
@@ -60,32 +60,32 @@ const SectionClientSay: FC<SectionClientSayProps> = ({
     return (
       <div className="hidden md:block">
         <Image
-          className="absolute top-9 -left-20"
+          className="absolute top-9 -left-20 w-14 h-14 object-cover rounded-full"
           src={clientSay1}
           alt={t("sectionClientSay.imageAltClient1")}
         />
         <Image
-          className="absolute bottom-[100px] right-full mr-40"
+          className="absolute bottom-[100px] right-full mr-40  w-14 h-14 object-cover rounded-full"
           src={clientSay2}
           alt={t("sectionClientSay.imageAltClient2")}
         />
         <Image
-          className="absolute top-full left-[140px]"
+          className="absolute top-full left-[140px] w-14 h-14 object-cover rounded-full"
           src={clientSay3}
           alt={t("sectionClientSay.imageAltClient3")}
         />
         <Image
-          className="absolute -bottom-10 right-[140px]"
+          className="absolute -bottom-10 right-[140px]  w-14 h-14 object-cover rounded-full"
           src={clientSay4}
           alt={t("sectionClientSay.imageAltClient4")}
         />
         <Image
-          className="absolute left-full ml-32 bottom-[80px]"
+          className="absolute left-full ml-32 bottom-[80px]  w-14 h-14 object-cover rounded-full"
           src={clientSay5}
           alt={t("sectionClientSay.imageAltClient5")}
         />
         <Image
-          className="absolute -right-10 top-10"
+          className="absolute -right-10 top-10  w-14 h-14 object-cover rounded-full"
           src={clientSay6}
           alt={t("sectionClientSay.imageAltClient6")}
         />
@@ -100,9 +100,9 @@ const SectionClientSay: FC<SectionClientSayProps> = ({
       </Heading>
       <div className="relative md:mb-16 max-w-2xl mx-auto">
         {renderBg()}
-        <Image className="mx-auto" src={clientSayMain} alt={t("sectionClientSay.imageAltMain")} />
+        <Image className="mx-auto  w-32 h-32 object-cover rounded-full" src={quotationImg} alt={t("sectionClientSay.imageAltMain")} />
         <div className={`mt-12 lg:mt-16 relative`}>
-          <Image
+          {/* <Image
             className="opacity-50 md:opacity-100 absolute -mr-16 lg:mr-3 right-full top-1"
             src={quotationImg}
             alt={t("sectionClientSay.imageAltQuotation1")}
@@ -111,7 +111,7 @@ const SectionClientSay: FC<SectionClientSayProps> = ({
             className="opacity-50 md:opacity-100 absolute -ml-16 lg:ml-3 left-full top-1"
             src={quotationImg2}
             alt={t("sectionClientSay.imageAltQuotation2")}
-          />
+          /> */}
 
           <MotionConfig
             transition={{