bs-p2/app/components/ContinueLearning.tsx

let courseData = [
    {
      id : "1",
      title : "Life History of Dr. Maria Montessori",
      chapter : "1",
      Program : "Graduate Program",
      img : "../../assets/course1.jpg"
    },
      {
      id : "2",
      title : "Introduction to Montessori Methods",
      chapter : "2",
      Program : "Graduate Program",
      img : "../../assets/course2.jpg"
    },
    {
      id : "3",
      title : "Exercises on Practical Life",
      chapter : "3",
      Program : "Graduate Program",
      img : "../../assets/course3.jpg"
    }
];

export default function Index() {
    return (
        <section className='bg-[#FCFCFC]'>
            <div className='container mx-auto'>
                <h2 className='text-[20px] font-[700] my-4 inline-flex leading-[24px]'>Continue Learning <img src="../../assets/right-arrow.svg" alt="" /></h2>
                <div className='grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6'>
                    {courseData.map(data=>(
                        <div key={data.id} className=''>
                            <img className='w-full rounded-[10px]' src={data.img} alt="" />
                            <h2 className='text-[16px] font-[700] my-2'>{data.title}</h2>
                            <p className='text-[14px] font-[500] text-[#6E6E6E]'>
                                <span>Chapter {data.chapter}</span> &#8226; &nbsp;
                                <span>{data.Program}</span>
                            </p>
                        </div>
                    ))}
                </div>
            </div>
        </section>
    )
}