Continued the home page

package.json

@@ -9,6 +9,8 @@
     "lint": "next lint"
   },
   "dependencies": {
+    "@stripe/react-stripe-js": "^2.3.1",
+    "@stripe/stripe-js": "^2.1.7",
     "next": "13.5.4",
     "react": "^18",
     "react-dom": "^18",

src/app/page.tsx

@@ -46,7 +46,8 @@ export default function Home() {
 					</Link>
 				</div>
 			</header>
-			<section className="w-full relative">
+
+			<section className="w-full relative bg-white">
 				<img src="/home/first_banner.png" alt="IELTS Packages - Together we prepare for the future" className="w-full" />
 				<Link href="https://encoach.com">
 					<button className="absolute bottom-1/10 left-1/12 bg-mti-purple-light hover:bg-mti-purple text-white rounded-xl px-8 py-4 transition ease-in-out duration-300 shadow">
@@ -54,7 +55,8 @@ export default function Home() {
 					</button>
 				</Link>
 			</section>
-			<section className="w-full grid grid-cols-4 p-24">
+
+			<section className="w-full grid grid-cols-4 p-24 bg-white">
 				<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">
 						<BsClockFill className="text-mti-rose-light w-10 h-10" />
@@ -92,8 +94,108 @@ export default function Home() {
 					</div>
 				</div>
 			</section>
-			<section></section>
-			<section className="w-full py-12 px-28 bg-mti-gray-seasalt grid grid-cols-4">
+
+			<section className="w-full py-32 px-28 bg-mti-gray-seasalt items-center justify-center flex flex-col gap-10 relative">
+				<span className="text-xl">
+					<span className="text-white bg-mti-rose-light px-1 py-0">Interested</span> in us?
+				</span>
+				<span className="text-4xl font-bold max-w-sm text-center">
+					Contact us and <span className="text-mti-rose-light">Start</span> Learning
+				</span>
+				<Link href="/contact">
+					<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">
+						Contact Us
+					</button>
+				</Link>
+				<div className="absolute top-1/2 -translate-y-2/3 right-1/4 flex flex-col items-center">
+					<em className="text-xs text-mti-purple-light font-semibold">WhatsApp Contact</em>
+					<img className="w-32 h-32" alt="WhatsApp QR Code for MTI" src="/whatsapp_qrcode.png" />
+					<div className="w-full h-full relative">
+						<div className="w-3 h-3 bg-mti-purple rounded-full absolute -bottom-6" />
+						<div className="w-3 h-3 bg-mti-purple rounded-full absolute -bottom-0 -left-6" />
+						<div className="w-3 h-3 bg-mti-purple rounded-full absolute bottom-6 -left-6" />
+						<div className="w-3 h-3 bg-mti-purple rounded-full absolute bottom-12 -left-6" />
+						<div className="w-3 h-3 bg-mti-purple rounded-full absolute bottom-18 -left-6" />
+						<div className="w-3 h-3 bg-mti-purple rounded-full absolute -bottom-6 -left-6" />
+						<div className="w-3 h-3 bg-mti-purple rounded-full absolute -bottom-6 left-6" />
+						<div className="w-3 h-3 bg-mti-purple rounded-full absolute -bottom-6 left-12" />
+						<div className="w-3 h-3 bg-mti-purple rounded-full absolute -bottom-6 left-18" />
+					</div>
+				</div>
+			</section>
+
+			<section className="w-full py-32 px-32 flex items-center justify-around bg-white">
+				<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">About us</span> Message from CEO
+					</span>
+					<div className="flex flex-col gap-3">
+						<span className="text-4xl font-bold max-w-md">
+							&ldquo;We are the best service and the <span className="text-mti-rose-light">only one</span>&rdquo;
+						</span>
+						<p className="max-w-lg text-base">
+							Engaged in education, especially in providing teaching services for students who do not have the opportunity to learn in
+							conventional institutions.
+						</p>
+					</div>
+					<Link href="/about">
+						<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">
+							Learn more
+						</button>
+					</Link>
+				</div>
+				<div className="w-fit h-fit relative">
+					<div className="w-80 h-80 rounded-t-[120px] rounded-br-[120px] overflow-hidden">
+						<img className="w-full h-full" alt="MTI's CEO" src="/placeholder_person.png" />
+					</div>
+					<div>
+						<div className="w-5 h-5 rounded-full bg-mti-purple-ultralight absolute left-10 -bottom-10" />
+						<div className="w-5 h-5 rounded-full bg-mti-purple-ultralight absolute left-20 -bottom-10" />
+						<div className="w-5 h-5 rounded-full bg-mti-purple-ultralight absolute left-30 -bottom-10" />
+						<div className="w-5 h-5 rounded-full bg-mti-purple-ultralight absolute -bottom-10" />
+						<div className="w-5 h-5 rounded-full bg-mti-purple-ultralight absolute -left-10 -bottom-10" />
+						<div className="w-5 h-5 rounded-full bg-mti-purple-ultralight absolute -left-10 bottom-0" />
+						<div className="w-5 h-5 rounded-full bg-mti-purple-ultralight absolute -left-10 bottom-10" />
+						<div className="w-5 h-5 rounded-full bg-mti-purple-ultralight absolute -left-10 bottom-20" />
+						<div className="w-5 h-5 rounded-full bg-mti-purple-ultralight absolute -left-10 bottom-30" />
+					</div>
+				</div>
+			</section>
+
+			<section className="w-full py-32 px-32 flex bg-white flex-col gap-32">
+				<div className="flex flex-col gap-12 w-full">
+					<span className="text-white bg-mti-rose-light px-1 py-0 font-semibold w-fit">Our Partners</span>
+					<div className="flex gap-9 flex-wrap items-center">
+						<img src="/logos/dq_logo.png" alt="DQ's Logo" className="w-52 h-52 shadow-lg rounded-xl" />
+						<img
+							src="/logos/knowledge_grid_academy_logo.png"
+							alt="Knowledge Grid Academy's Logo"
+							className="w-52 h-52 shadow-lg rounded-xl"
+						/>
+						<img src="/logos/sohar_logo.png" alt="Sohar's Logo" className="w-52 h-52 shadow-lg rounded-xl" />
+						<img src="/logos/partner_logo_unknown.png" alt="Unknown Partner's Logo" className="w-52 h-52 shadow-lg rounded-xl" />
+						<div className="w-52 h-52 shadow-lg rounded-xl flex items-center justify-center">
+							<img src="/logos/sohar_aluminium_logo.png" alt="Sohar Aluminium's Logo" />
+						</div>
+					</div>
+				</div>
+				<div className="flex flex-col gap-12 w-full">
+					<span className="text-white bg-mti-rose-light px-1 py-0 font-semibold w-fit">Accreditation</span>
+					<div className="flex gap-9 flex-wrap items-center">
+						<div className="w-52 h-52 shadow-lg rounded-xl flex items-center justify-center">
+							<img src="/logos/idp_logo.png" alt="IDP's Logo" />
+						</div>
+						<div className="w-52 h-52 shadow-lg rounded-xl flex items-center justify-center">
+							<img src="/logos/ielts_logo.png" alt="IELTS's Logo" />
+						</div>
+						<div className="w-52 h-52 shadow-lg rounded-xl flex items-center justify-center">
+							<img src="/logos/ec_council_logo.png" alt="EC Council's Logo" />
+						</div>
+					</div>
+				</div>
+			</section>
+
+			<section className="w-full py-10 px-28 bg-mti-gray-seasalt grid grid-cols-4">
 				<div className="flex flex-col gap-4">
 					<span className="font-bold text-xl">Navigation</span>
 					<div className="flex flex-col gap-2">
@@ -145,6 +247,7 @@ export default function Home() {
 					</div>
 				</div>
 			</section>
+
 			<footer className="w-full py-10 bg-mti-rose-light text-white flex items-center justify-center">© EnCoach 2023 all rights reserved</footer>
 		</main>
 	);

tailwind.config.ts

@@ -37,6 +37,8 @@ const config: Config = {
 				},
 			},
 			inset: {
+				"18": "4.5rem",
+				"30": "7.5rem",
 				"1/6": "16%",
 				"1/8": "12%",
 				"1/10": "10%",

yarn.lock

@@ -185,6 +185,18 @@
   resolved "https://registry.yarnpkg.com/@rushstack/eslint-patch/-/eslint-patch-1.5.1.tgz#5f1b518ec5fa54437c0b7c4a821546c64fed6922"
   integrity sha512-6i/8UoL0P5y4leBIGzvkZdS85RDMG9y1ihZzmTZQ5LdHUYmZ7pKFoj8X0236s3lusPs1Fa5HTQUpwI+UfTcmeA==
 
+"@stripe/react-stripe-js@^2.3.1":
+  version "2.3.1"
+  resolved "https://registry.yarnpkg.com/@stripe/react-stripe-js/-/react-stripe-js-2.3.1.tgz#2b9d120238369844f35387e2de1efe2471684d51"
+  integrity sha512-vXiwcG2ZjAF4AezjP7DJ8jiwxfCWCen/X2rBhyXaKrfQ7+pwmXhsoUlKRa0eLWioY1oelOQOafauNUiwTwFHgQ==
+  dependencies:
+    prop-types "^15.7.2"
+
+"@stripe/stripe-js@^2.1.7":
+  version "2.1.7"
+  resolved "https://registry.yarnpkg.com/@stripe/stripe-js/-/stripe-js-2.1.7.tgz#9ce9be34ba7f778c626710d6a12171e364a927ba"
+  integrity sha512-oI620ARpFp5jCXfwIYMxyBJmtTFuAjSA8x3k3JgW1M6cvLmw9XgmNcGNegQWmirpozhFNflxrZEgp10og+6MSA==
+
 "@swc/helpers@0.5.2":
   version "0.5.2"
   resolved "https://registry.yarnpkg.com/@swc/helpers/-/helpers-0.5.2.tgz#85ea0c76450b61ad7d10a37050289eded783c27d"
@@ -1917,7 +1929,7 @@ prelude-ls@^1.2.1:
   resolved "https://registry.yarnpkg.com/prelude-ls/-/prelude-ls-1.2.1.tgz#debc6489d7a6e6b0e7611888cec880337d316396"
   integrity sha512-vkcDPrRZo1QZLbn5RLGPpg/WmIQ65qoWWhcGKf/b5eplkkarX0m9z8ppCat4mlOqUsWpyNuYgO3VRyrYHSzX5g==
 
-prop-types@^15.8.1:
+prop-types@^15.7.2, prop-types@^15.8.1:
   version "15.8.1"
   resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.8.1.tgz#67d87bf1a694f48435cf332c24af10214a3140b5"
   integrity sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==