fix: enhanced the alignment of speaker card. (#753)

Co-authored-by: EuniceChidinmaImo <eunicechidinma.ei@gmail.com>

Author: EuniceChidinmaImo

components/Speaker/speaker.tsx

@@ -9,9 +9,15 @@ interface ISpeaker {
 }
 
 function Speaker({ details, location, className }: ISpeaker): JSX.Element {
+  
+  function getName(names: string[]){
+    return `${names[0]} ${names[1]}`;
+  }
+  const shortenedName = details.name.length > 20 ? getName(details.name.split(' ')) : details.name;
+
   return (
     <div
-      className={`w-auto text-center flex flex-col items-center card h-auto rounded-md p-[27px] ${className}`}
+      className={`w-auto text-center flex flex-col items-center card rounded-md p-[27px] ${className}`}
       data-test="speakers-section"
     >
       <div className="w-[300px] h-[300px] lg:w-[250px] lg:h-[250px] relative overflow-hidden  rounded-full border-2 border-gray-300 bg-gray-800">
@@ -25,7 +31,7 @@ function Speaker({ details, location, className }: ISpeaker): JSX.Element {
         />
       </div>
       <div className="mt-[19px]">
-        <h3 className="text-[23px] text-white">{details.name}</h3>
+        <h3 className="text-[23px] text-white">{shortenedName}</h3>
         <div className={`flex flex-col ${'min-h-[150px]'} justify-between`}>
           <div>
             {' '}