Add a testimonial section

src/App.tsx

@@ -3,6 +3,7 @@ import Home from "@/scenes/home";
 import OurClasses from "@/scenes/ourClasses";
 import Benefits from "@/scenes/benefits";
 import ContactUs from "@/scenes/contactUs";
+import Testimonials from "@/scenes/testimonials";
 import Footer from "@/scenes/footer";
 import { useEffect, useState } from "react";
 import { SelectedPage } from "@/shared/types";
@@ -35,6 +36,7 @@ function App() {
       <Home setSelectedPage={setSelectedPage} />
       <Benefits setSelectedPage={setSelectedPage} />
       <OurClasses setSelectedPage={setSelectedPage} />
+      <Testimonials setSelectedPage={setSelectedPage} />
       <ContactUs setSelectedPage={setSelectedPage} />
       <Footer />
     </div>

src/scenes/testimonials/Testimonial.tsx

@@ -0,0 +1,56 @@
+import { motion } from "framer-motion";
+
+type Props = {
+  name: string;
+  image: string;
+  title?: string;
+  description: string;
+};
+
+const childVariant = {
+  hidden: { opacity: 0, scale: 0.9 },
+  visible: { opacity: 1, scale: 1 },
+};
+
+const Testimonial = ({ name, image, title, description }: Props) => {
+  return (
+    <motion.div
+      initial="hidden"
+      whileInView="visible"
+      viewport={{ once: true, amount: 0.5 }}
+      transition={{ duration: 0.5 }}
+      variants={childVariant}
+      className="mb-12 md:mb-0"
+    >
+      <div className="mb-6 flex justify-center">
+        <img
+          src={image}
+          className="w-32 rounded-full shadow-lg"
+          alt="testimonials"
+        />
+      </div>
+      <h5 className="mb-4 text-lg font-bold">{name}</h5>
+      <h6 className="mb-4 font-medium text-primary-500">{title}</h6>
+      <p className="mb-4">
+        <svg
+          aria-hidden="true"
+          focusable="false"
+          data-prefix="fas"
+          data-icon="quote-left"
+          className="inline-block w-6 pr-2"
+          role="img"
+          xmlns="http://www.w3.org/2000/svg"
+          viewBox="0 0 512 512"
+        >
+          <path
+            fill="text-primary-500"
+            d="M464 256h-80v-64c0-35.3 28.7-64 64-64h8c13.3 0 24-10.7 24-24V56c0-13.3-10.7-24-24-24h-8c-88.4 0-160 71.6-160 160v240c0 26.5 21.5 48 48 48h128c26.5 0 48-21.5 48-48V304c0-26.5-21.5-48-48-48zm-288 0H96v-64c0-35.3 28.7-64 64-64h8c13.3 0 24-10.7 24-24V56c0-13.3-10.7-24-24-24h-8C71.6 32 0 103.6 0 192v240c0 26.5 21.5 48 48 48h128c26.5 0 48-21.5 48-48V304c0-26.5-21.5-48-48-48z"
+          ></path>
+        </svg>
+        {description}
+      </p>
+    </motion.div>
+  );
+};
+
+export default Testimonial;

src/scenes/testimonials/index.tsx

@@ -0,0 +1,55 @@
+import { SelectedPage, testimonialType } from "@/shared/types";
+import { motion } from "framer-motion";
+import HText from "@/shared/HText";
+import Testimonial from "./Testimonial";
+import { testimonials } from "@/shared/Testimonials";
+
+type Props = {
+  setSelectedPage: (value: SelectedPage) => void;
+};
+
+const Testimonials = ({ setSelectedPage }: Props) => {
+  return (
+    <section id="testimonials" className="mx-auto min-h-full w-5/6 py-20">
+      <motion.div
+        onViewportEnter={() => setSelectedPage(SelectedPage.Benefits)}
+        className=""
+      >
+        <motion.div
+          initial="hidden"
+          whileInView="visible"
+          viewport={{ once: true, amount: 0.5 }}
+          transition={{ duration: 0.5 }}
+          variants={{
+            hidden: { opacity: 0, x: -50 },
+            visible: { opacity: 1, x: 0 },
+          }}
+          className="md:my-5 md:w-4/5"
+        >
+          <HText>TESTIMONIALS</HText>
+          <p className="py-5">
+            Fringilla a sed at suspendisse ut enim volutpat. Rhoncus vel est
+            tellus quam porttitor. Mauris velit euismod elementum arcu neque
+            facilisi. Amet semper tortor facilisis metus nibh. Rhoncus sit enim
+            mattis odio in risus nunc.
+          </p>
+        </motion.div>
+        <div className="mt-16 items-center justify-between gap-20 text-center md:mt-28 md:flex">
+          <div className="lg:gap-x-12 grid gap-x-6 md:grid-cols-3">
+            {testimonials &&
+              testimonials.map((item: testimonialType) => (
+                <Testimonial
+                  key={item.id}
+                  name={item.name}
+                  image={item.image}
+                  description={item.description}
+                />
+              ))}
+          </div>
+        </div>
+      </motion.div>
+    </section>
+  );
+};
+
+export default Testimonials;

src/shared/Testimonials.tsx

@@ -0,0 +1,31 @@
+import Person1 from "@/assets/person1.jpg";
+import Person2 from "@/assets/person2.jpg";
+import Person3 from "@/assets/person3.jpg";
+import { testimonialType } from "./types";
+
+export const testimonials: Array<testimonialType> = [
+  {
+    id: 1,
+    name: "Maria Smantha",
+    image: Person1,
+    title: "Web Developer",
+    description:
+      "Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quod eos id officiis hic tenetur quae quaerat ad velit ab hic tenetur.",
+  },
+  {
+    id: 2,
+    name: "Lisa Cudrow",
+    image: Person2,
+    title: "Graphic Designer",
+    description:
+      "Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid commodi.",
+  },
+  {
+    id: 3,
+    name: "John Smith",
+    image: Person3,
+    title: "Marketing Specialist",
+    description:
+      "At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque.",
+  },
+];

src/shared/types.ts

@@ -3,6 +3,7 @@ export enum SelectedPage {
   Benefits = "benefits",
   OurClasses = "ourclasses",
   ContactUs = "contactus",
+  Testimonials = "testimonials",
 }
 
 export interface BenefitType {
@@ -16,3 +17,11 @@ export interface ClassType {
   description?: string;
   image: string;
 }
+
+export interface testimonialType {
+  id: number;
+  name: string;
+  image: string;
+  title?: string;
+  description: string;
+}