refactor: change image styles in speakers section

in this commit i've changed some images styles to sync the new img
format changes
also changed some speaker component styles for better output

Author: dofxo

src/components/sections/speakers/Speaker.tsx

@@ -8,7 +8,7 @@ const Speaker = ({ speakerInfo }: { speakerInfo: speakerInfoType }) => {
 
   const { name, role, company, imageUrl } = speakerInfo;
   return (
-    <div className="speaker-card flex w-[146px] flex-col gap-[12px]">
+    <div className="speaker-card flex w-[138px] flex-col gap-[12px]">
       {/* speaker picture */}
       <div className="relative flex items-center justify-center rounded-[8px] p-[5px]">
         {/* Gradient */}
@@ -24,29 +24,28 @@ const Speaker = ({ speakerInfo }: { speakerInfo: speakerInfoType }) => {
 
         <Image
           src={imageUrl ?? null}
-          width={0}
-          height={0}
+          width={100}
+          height={100}
           alt={name}
-          layout="responsive"
-          className="rounded-inherit z-[1]"
+          className="rounded-inherit z-[1] w-[128px]"
         />
       </div>
       {/* info section*/}
       <div className="info-wrapper flex flex-col items-center font-[400]">
         {/* speaker name*/}
         <span className="text-[20px] text-[#FAFAFA]">{name}</span>
         {/* speaker role (stack)*/}
-        <span className="text-[16px] text-[#A1A1AA]">{role}</span>
+        <span className="w-max text-[16px] text-[#A1A1AA]">{role}</span>
         {/* speaker company details */}
         <div className="mt-[12px] flex items-center gap-[16px]">
           <span className="text-[16px]">در</span>
           <div className="flex items-center gap-[4px]">
             <Image
-              width={0}
-              height={0}
+              width={100}
+              height={100}
               src={company.logo ?? null}
               alt={company.name}
-              className="w-[28px] border-[1px] border-[#FFFFFF1A]"
+              className="w-[20px] border-[1px] border-[#FFFFFF1A]"
             />
             <span className="text-[14px] font-[500]">{company.name}</span>
           </div>

src/configs/speakers.ts

@@ -5,82 +5,82 @@ export const speakersData: speakerInfoType[] = [
   {
     name: "پوریا باباعلی",
     role: "توسعده دهنده فرانت اند",
-    imageUrl: "/images/speakers/profile-picture/pooria-baba-ali.svg",
+    imageUrl: "/images/speakers/profile-picture/pooria-baba-ali.webp",
     company: {
       name: "رسمیو",
-      logo: "/images/speakers/company-logo/rasmio.svg",
+      logo: "/images/speakers/company-logo/rasmio.png",
     },
   },
   {
     name: "پوریا باباعلی",
     role: "توسعده دهنده فرانت اند",
-    imageUrl: "/images/speakers/profile-picture/pooria-baba-ali.svg",
+    imageUrl: "/images/speakers/profile-picture/pooria-baba-ali.webp",
     company: {
       name: "رسمیو",
-      logo: "/images/speakers/company-logo/rasmio.svg",
+      logo: "/images/speakers/company-logo/rasmio.png",
     },
   },
   {
     name: "پوریا باباعلی",
     role: "توسعده دهنده فرانت اند",
-    imageUrl: "/images/speakers/profile-picture/pooria-baba-ali.svg",
+    imageUrl: "/images/speakers/profile-picture/pooria-baba-ali.webp",
     company: {
       name: "رسمیو",
-      logo: "/images/speakers/company-logo/rasmio.svg",
+      logo: "/images/speakers/company-logo/rasmio.png",
     },
   },
   {
     name: "پوریا باباعلی",
     role: "توسعده دهنده فرانت اند",
-    imageUrl: "/images/speakers/profile-picture/pooria-baba-ali.svg",
+    imageUrl: "/images/speakers/profile-picture/pooria-baba-ali.webp",
     company: {
       name: "رسمیو",
-      logo: "/images/speakers/company-logo/rasmio.svg",
+      logo: "/images/speakers/company-logo/rasmio.png",
     },
   },
   {
     name: "پوریا باباعلی",
     role: "توسعده دهنده فرانت اند",
-    imageUrl: "/images/speakers/profile-picture/pooria-baba-ali.svg",
+    imageUrl: "/images/speakers/profile-picture/pooria-baba-ali.webp",
     company: {
       name: "رسمیو",
-      logo: "/images/speakers/company-logo/rasmio.svg",
+      logo: "/images/speakers/company-logo/rasmio.png",
     },
   },
   {
     name: "پوریا باباعلی",
     role: "توسعده دهنده فرانت اند",
-    imageUrl: "/images/speakers/profile-picture/pooria-baba-ali.svg",
+    imageUrl: "/images/speakers/profile-picture/pooria-baba-ali.webp",
     company: {
       name: "رسمیو",
-      logo: "/images/speakers/company-logo/rasmio.svg",
+      logo: "/images/speakers/company-logo/rasmio.png",
     },
   },
   {
     name: "پوریا باباعلی",
     role: "توسعده دهنده فرانت اند",
-    imageUrl: "/images/speakers/profile-picture/pooria-baba-ali.svg",
+    imageUrl: "/images/speakers/profile-picture/pooria-baba-ali.webp",
     company: {
       name: "رسمیو",
-      logo: "/images/speakers/company-logo/rasmio.svg",
+      logo: "/images/speakers/company-logo/rasmio.png",
     },
   },
   {
     name: "پوریا باباعلی",
     role: "توسعده دهنده فرانت اند",
-    imageUrl: "/images/speakers/profile-picture/pooria-baba-ali.svg",
+    imageUrl: "/images/speakers/profile-picture/pooria-baba-ali.webp",
     company: {
       name: "رسمیو",
-      logo: "/images/speakers/company-logo/rasmio.svg",
+      logo: "/images/speakers/company-logo/rasmio.png",
     },
   },
   {
     name: "پوریا باباعلی",
     role: "توسعده دهنده فرانت اند",
-    imageUrl: "/images/speakers/profile-picture/pooria-baba-ali.svg",
+    imageUrl: "/images/speakers/profile-picture/pooria-baba-ali.webp",
     company: {
       name: "رسمیو",
-      logo: "/images/speakers/company-logo/rasmio.svg",
+      logo: "/images/speakers/company-logo/rasmio.png",
     },
   },
 ];