enhanced the alignment of speaker card.

Author: EuniceChidinmaImo

components/Speaker/speaker.tsx

@@ -1,6 +1,7 @@
 import Image from 'next/image';
 import React from 'react';
 import { Speaker as SpeakerTypes } from '../../types/types';
+import { get } from 'cypress/types/lodash';
 
 interface ISpeaker {
   details: SpeakerTypes;
@@ -9,9 +10,14 @@ 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>
             {' '}