Added a new section

src/templates/Home.tsx

@@ -37,7 +37,7 @@ export default function Home({language}: Props) {
 
 			{/* Modules Section */}
 			<section className="w-full bg-white">
-				<div className="w-full grid grid-rows-4 md:grid-rows-1 md:grid-cols-4 gap-8 p-8 md:p-24 container mx-auto">
+				<div className="w-full grid grid-rows-4 md:grid-rows-1 md:grid-cols-4 gap-8 p-8 md:p-20 container mx-auto">
 					<div className="flex flex-col items-center gap-6">
 						<div className="bg-mti-rose-ultralight border border-mti-rose-light p-6 rounded-3xl flex items-center justify-center">
 							<BsBook className="text-mti-rose-light w-10 h-10" />
@@ -77,6 +77,43 @@ export default function Home({language}: Props) {
 				</div>
 			</section>
 
+			{/* Learn with AI */}
+			<section className="w-full bg-mti-gray-seasalt">
+				<div className="w-full p-8 md:p-20 lg:py-16 lg:px-32 flex flex-col gap-8 md:gap-24 lg:flex-row items-center justify-center container mx-auto">
+					<div className="flex flex-col gap-8">
+						<span className="text-lg font-semibold">
+							<span className="text-white bg-mti-rose-light px-1 py-0">{translation.learn_ai.tag.highlight[language]}</span>{" "}
+							{translation.learn_ai.tag.text[language]}
+						</span>
+						<div className="flex flex-col gap-3">
+							<span className="text-4xl font-bold max-w-md">
+								{translation.learn_ai.title.text[language]}{" "}
+								<span className="text-mti-rose-light">{translation.learn_ai.title.highlight[language]}</span>
+							</span>
+							<p className="max-w-lg text-base">{translation.learn_ai.description[language]}</p>
+						</div>
+						<Link href="/join">
+							<button className="bg-mti-purple-light hover:bg-mti-purple text-white rounded-xl px-8 py-4 transition ease-in-out duration-300 shadow">
+								{translation.learn_more[language]}
+							</button>
+						</Link>
+					</div>
+					<div className="relative h-full w-1/3 grid grid-cols-4 place-items-center gap-8 -md:px-8">
+						<div />
+						<div className="w-96 h-48 rounded-xl overflow-hidden flex items-center justify-center">
+							<img src="/person_laptop_3.jpg" alt="Person using a laptop" />
+						</div>
+						<div />
+						<div />
+						<div />
+						<div />
+						<div className="w-96 h-48 rounded-xl overflow-hidden flex items-center justify-center">
+							<img src="/person_laptop_2.jpg" alt="Person using a laptop" />
+						</div>
+					</div>
+				</div>
+			</section>
+
 			{/* EnCoach Benefits Section */}
 			<section className="w-full bg-white">
 				<div className="w-full p-8 md:p-20 lg:p-32 flex flex-col-reverse gap-8 md:gap-24 md:flex-row items-center justify-center container mx-auto">

src/translation/home.json

@@ -45,6 +45,36 @@
       }
     }
   },
+  "learn_ai": {
+    "tag": {
+      "text": {
+        "en": "Learn with AI",
+        "ar": "الإنكوتش"
+      },
+      "highlight": {
+        "en": "Join us",
+        "ar": "فوائد"
+      }
+    },
+    "title": {
+      "text": {
+        "en": "Get your answers evaluated by",
+        "ar": "لقد تم تسجيل الطلاب على موقعنا"
+      },
+      "highlight": {
+        "en": "AI",
+        "ar": "منصة"
+      }
+    },
+    "description": {
+      "en": "Our evaluation system uses artificial intelligence to give you the best feedback possible without the need of a tutor.",
+      "ar": "لدينا بالفعل العديد من الطلاب الذين يدرسون عبر الإنترنت تحت إشراف مدربنا الرقمي، لذا تعال وانضم إلى المجتمع"
+    },
+    "join": {
+      "en": "Join",
+      "ar": "ينضم"
+    }
+  },
   "learn_more": {
     "en": "Learn more",
     "ar": "يتعلم أكثر"