speakers card

components/SpeakerCard.tsx

@@ -1,11 +1,29 @@
 import React from 'react'
 
-const SpeakerCard = () => {
+type SpeakerType = {
+  id: number
+  name: string
+  designation: string
+  imageLink: string
+}
+
+const SpeakerCard = ({ speaker }: { speaker: SpeakerType }) => {
   return (
-    <div>
-
+    <div
+      key={speaker.id}
+      className="flex w-72 flex-col space-y-2 rounded-2xl p-4 shadow-lg transition-all duration-300 hover:-translate-y-3"
+    >
+      <img
+        src={speaker.imageLink}
+        className="h-64 w-64 rounded-xl"
+        alt={speaker.name}
+      />
+      <div>
+        <h1 className="text-xl font-bold">{speaker.name}</h1>
+        <h1 className="text-lg text-gray-500">{speaker.designation}</h1>
+      </div>
     </div>
   )
 }
 
-export default SpeakerCard
+export default SpeakerCard

pages/speakers.tsx

@@ -1,50 +1,48 @@
 import React from 'react'
+import SpeakerCard from '../components/SpeakerCard'
 
 type SpeakerType = {
-    id: number,
-    name: string,
-    designation : string,
-    imageLink : string
+  id: number
+  name: string
+  designation: string
+  imageLink: string
 }
 
 const speakerList: SpeakerType[] = [
-    {
-        id: 1,
-        name: "Sri. S S Iyengar",
-        designation: "Distinguised University Professor, Florida International University (FIU), Miami",
-        imageLink: "./speakers/ss_iyenger.jpeg"
-    },
-    {
-        id: 2,
-        name: "Chaitra Vedullapalli",
-        designation: "Cofounder & CMO, Meylah",
-        imageLink: "./speakers/chaitra_v.jpeg"
-    },
-    {
-        id: 3,
-        name: "Rajamani",
-        designation: "Founder and CEO, Google",
-        imageLink: "https://rvu.edu.in/wp-content/uploads/2023/02/02-3.png"
-    }
+  {
+    id: 1,
+    name: 'Sri. S S Iyengar',
+    designation:
+      'Distinguised University Professor, Florida International University (FIU), Miami',
+    imageLink: './speakers/ss_iyenger.jpeg',
+  },
+  {
+    id: 2,
+    name: 'Chaitra Vedullapalli',
+    designation: 'Cofounder & CMO, Meylah',
+    imageLink: './speakers/chaitra_v.jpeg',
+  },
+  {
+    id: 3,
+    name: 'Rajamani',
+    designation: 'Founder and CEO, Google',
+    imageLink: 'https://rvu.edu.in/wp-content/uploads/2023/02/02-3.png',
+  },
 ]
 
 const speakers = () => {
   return (
-    <div className='py-8'>
-        <h1 className='text-4xl font-bold text-center text-transparent bg-clip-text bg-gradient-to-r from-violet-600 to-indigo-600'> Keynote Speakers </h1>
-        <div className='flex py-2 flex-col w-full mt-12 px-0 items-center lg:px-12 lg:justify-between  lg:flex-row space-x-0 lg:space-x-4 space-y-8 lg:space-y-0'>
-            {speakerList.map((speaker:SpeakerType)=>{
-                return <div key={speaker.id} className='flex hover:-translate-y-3 transition-all duration-300 rounded-2xl w-72 flex-col space-y-2 shadow-lg p-4'>
-                    <img src={speaker.imageLink} className='h-64 w-64 rounded-xl' alt={speaker.name} />
-                    <div>
-                        <h1 className='text-xl font-bold'>{speaker.name}</h1>
-                        <h1 className='text-lg text-gray-500'>{speaker.designation}</h1>
-                    </div>
-                </div>
-            })}
-        </div>
+    <div className="py-8">
+      <h1 className="bg-gradient-to-r from-violet-600 to-indigo-600 bg-clip-text text-center text-4xl font-bold text-transparent">
+        Keynote Speakers
+      </h1>
+      <div className="mt-12 flex w-full flex-col items-center space-x-0 space-y-8 py-2 px-0  lg:flex-row lg:justify-between lg:space-x-4 lg:space-y-0 lg:px-12">
+        {speakerList.map((speaker: SpeakerType) => (
+          <SpeakerCard speaker={speaker} />
+        ))}
+      </div>
     </div>
   )
 }
 
-export default speakers
+export default speakers