s1

app/components/ContinueLearning.tsx

@@ -0,0 +1,45 @@
+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>
+    )
+}