About page coding done

src/app/about/page.js

@@ -0,0 +1,69 @@
+import Banner from "@/components/Banner";
+import aboutBannerImg from "../../../public/about-banner.jpg";
+import InstructorCard from "@/components/InstructorCard";
+import instructor1 from "../../../public/memb01.jpg";
+import instructor2 from "../../../public/memb02.jpg";
+import instructor3 from "../../../public/memb03.jpg";
+import instructor4 from "../../../public/memb04.jpg";
+import instructor5 from "../../../public/memb05.jpg";
+import instructor6 from "../../../public/memb06.jpg";
+import instructor7 from "../../../public/memb07.jpg";
+import instructor8 from "../../../public/memb08.jpg";
+
+export default function AboutPage() {
+  return (
+    <>
+      <Banner
+        text="We are Coach, Personal Development & Life Advisor Team.​"
+        img={aboutBannerImg}
+      />
+      <section className="max-w-[1440px] mx-auto px-10 bg-[#efefef] py-20">
+        <h2 className="text-4xl font-bold text-center px-5 pb-10">
+          Our Team & Instructors
+        </h2>
+        <div className="grid sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 grid-cols-1 gap-8">
+          <InstructorCard
+            text="The appreciation and love that she has for wildlife and animals makes her especially concerned about environment"
+            name="Jane Ansems"
+            img={instructor1}
+          />
+          <InstructorCard
+            text="A keen yachtsman and editor of a cruising guide, Lawrence is constantly reminded of the effects of pollution in."
+            name="Lawrence Petrie"
+            img={instructor2}
+          />
+          <InstructorCard
+            text="A keen yachtsman and editor of a cruising guide, Lawrence is constantly reminded of the effects of pollution in."
+            name="Jack Peters"
+            img={instructor3}
+          />
+          <InstructorCard
+            text="She is an avid forest-goer and commits to doing what she can to keep world beautiful, clean and healthy."
+            name="Lora Portilla"
+            img={instructor4}
+          />
+          <InstructorCard
+            text="The appreciation and love that she has for wildlife and animals makes her especially concerned about environment"
+            name="Roland Walker"
+            img={instructor5}
+          />
+          <InstructorCard
+            text="The appreciation and love that she has for wildlife and animals makes her especially concerned about environment"
+            name="Ruth Aquilani"
+            img={instructor6}
+          />
+          <InstructorCard
+            text="She is an avid beach-goer and commits to doing what she can to keep world beautiful, clean and healthy."
+            name="Anna Phillips"
+            img={instructor7}
+          />
+          <InstructorCard
+            text="He is an avid beach-goer and commits to doing what he can to keep world beautiful, clean and healthy."
+            name="Lucas Aquilani"
+            img={instructor8}
+          />
+        </div>
+      </section>
+    </>
+  );
+}

src/components/InstructorCard.jsx

@@ -0,0 +1,43 @@
+import Image from "next/image";
+import Link from "next/link";
+import { FaFacebookF, FaInstagram, FaTiktok, FaTwitter } from "react-icons/fa";
+
+const InstructorCard = ({ img, name, text }) => {
+  return (
+    <div className="bg-white">
+      <Image className="w-full" src={img} alt={name} />
+      <div className="flex items-center justify-start">
+        <Link
+          className="text-black bg-[#f5df4d] hover:bg-black hover:text-white text-xs p-3 relative top-[-20px]"
+          href="#"
+        >
+          <FaFacebookF />
+        </Link>
+        <Link
+          className="text-black bg-[#f5df4d] hover:bg-black hover:text-white text-xs p-3 relative top-[-20px]"
+          href="#"
+        >
+          <FaTwitter />
+        </Link>
+        <Link
+          className="text-black bg-[#f5df4d] hover:bg-black hover:text-white text-xs p-3 relative top-[-20px]"
+          href="#"
+        >
+          <FaTiktok />
+        </Link>
+        <Link
+          className="text-black bg-[#f5df4d] hover:bg-black hover:text-white text-xs p-3 relative top-[-20px]"
+          href="#"
+        >
+          <FaInstagram />
+        </Link>
+      </div>
+      <div className="px-8 pb-8">
+        <h2 className="mb-5 font-bold text-xl">{name}</h2>
+        <p className="text-[#545454]">{text}</p>
+      </div>
+    </div>
+  );
+};
+
+export default InstructorCard;