202306-NEA-DZ-FEW · samiba6 · Nov 21, 2023 · Nov 22, 2023 · Nov 22, 2023 · Nov 23, 2023
diff --git a/public/Hocine.jpg b/public/Hocine.jpg
diff --git a/public/Katia.png b/public/Katia.png
diff --git a/public/Khaoula.png b/public/Khaoula.png
diff --git a/public/Samy.jpg b/public/Samy.jpg
diff --git a/public/Tewfik.png b/public/Tewfik.png
diff --git a/public/mounia.jfif b/public/mounia.jfif
diff --git a/src/components/OurTeam/OurTeam.jsx b/src/components/OurTeam/OurTeam.jsx
@@ -0,0 +1,80 @@
+import React from "react";
+import Image from "next/image";
+import Link from "next/link";
+import { FaGithub, FaLinkedin } from "react-icons/fa";
+import Head from "next/head";
+const OurTeam = ({ data }) => {
+    return (
+        <section className='p-2 bg-[#32314D] '>
+            <div className='text-center  text-black'>
+                {" "}
+                <h1 className='text-4xl font-bold text-[#585785]  '>
+                    {" "}
+                    MEET OUR TEAM
+                </h1>
+                <p className='text-xl leading-relaxed  '>
+                    {" "}
+                    Were a dynamic group of individuals who are passionate about
+                    what we do and dedicated to delivering the best results for
+                    our clients.
+                </p>{" "}
+            </div>
+
+            <div className='grid md:grid-cols-2 xl:grid-cols-3 gap-8 justify-center p-12'>
+                {data?.map((teamMember, key) => {
+                    const { id, image, name, title, github, linkedin } =
+                        teamMember;
+                    return (
+                        <div
+                            key={id}
+                            className='m-6 md:2 flex items-center justify-center '
+                        >
+                            <div className='group  w-56 h-56 bg-[#F1F6FA]     drop-shadow-lg p-8 rounded-full shadow-md transition-all duration-500 hover:rounded-2xl hover:h-50'>
+                                <div className='img group-hover:h-40 w-full h-full'>
+                                    <img
+                                        src={image}
+                                        alt='Profile'
+                                        className='w-full h-full rounded-full transition duration-500 transform group-hover:-translate-y-20 group-hover:rounded-xl group-hover:shadow-xl '
+                                    />
+                                </div>
+                                <div className='caption text-center transform -translate-y-20  ease-in-out	 opacity-0 delay-200  transition-all duration-100 group-hover:opacity-100 '>
+                                    <div className='card-content  flex-col  '>
+                                        <div>
+                                            {" "}
+                                            <h4 className=' break-normal font-bold text-lg  text-[#585785] '>
+                                                {name}
+                                            </h4>
+                                            <h2 className='text-md text-black'>
+                                                {" "}
+                                                {title}{" "}
+                                            </h2>
+                                        </div>
+
+                                        <div className='social-media flex justify-center space-x-4 '>
+                                            <Link
+                                                className='cursor-pointer hover:text-[#000000]'
+                                                href={`${github}`}
+                                                target='_blank'
+                                            >
+                                                <FaGithub size={25} />
+                                            </Link>
+                                            <Link
+                                                className=' cursor-pointer   hover:text-[#0e76a8]'
+                                                href={`${linkedin}`}
+                                                target='_blank'
+                                            >
+                                                <FaLinkedin size={25} />
+                                            </Link>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    );
+                })}
+            </div>
+        </section>
+    );
+};
+
+export default OurTeam;
diff --git a/src/components/OurTeam/__test__/OurTeam.test.js b/src/components/OurTeam/__test__/OurTeam.test.js
@@ -0,0 +1,8 @@
+import renderer from "react-test-renderer";
+
+import OurTeam from "../OurTeam";
+
+it("renders correctly", () => {
+    const tree = renderer.create(<OurTeam />).toJSON();
+    expect(tree).toMatchSnapshot();
+});
diff --git a/src/components/OurTeam/__test__/__snapshots__/OurTeam.test.js.snap b/src/components/OurTeam/__test__/__snapshots__/OurTeam.test.js.snap
@@ -0,0 +1,29 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders correctly 1`] = `
+<section
+  className="p-2 bg-[#32314D] "
+>
+  <div
+    className="text-center  text-black"
+  >
+
+    <h1
+      className="text-4xl font-bold text-[#585785]  "
+    >
+
+      MEET OUR TEAM
+    </h1>
+    <p
+      className="text-xl leading-relaxed  "
+    >
+
+      Were a dynamic group of individuals who are passionate about what we do and dedicated to delivering the best results for our clients.
+    </p>
+
+  </div>
+  <div
+    className="grid md:grid-cols-2 xl:grid-cols-3 gap-8 justify-center p-12"
+  />
+</section>
+`;
diff --git a/src/pages/aboutus/index.jsx b/src/pages/aboutus/index.jsx
@@ -1,7 +1,70 @@
+import OurTeam from "@/components/OurTeam/OurTeam";
 import React from "react";
 
+const data = [
+    {
+        id: 1,
+        image: "/Hocine.jpg",
+        name: "Hocine Benouddane",
+        title: "Front-end Developer",
+        bio: "An enthusiastic front-end developer with a deep love for coding and an insatiable curiosity for exploring and mastering new technologies.",
+        github: "https://github.com/hocine1212",
+        linkedin: "www.linkedin.com/in/hocine12",
+    },
+    {
+        id: 2,
+        image: "/Tewfik.png",
+        title: "Front-end Developer",
+        name: "Benarba Tewfik",
+        bio: "Passionate frontend developer from Algeria, always eager to embrace new challenges and learn the latest in web development.",
+        github: "https://github.com/Ben-Tewfik",
+        linkedin: "https://www.linkedin.com/in/mohammed-tewfik-benarba/",
+    },
+    {
+        id: 3,
+        image: "/Khaoula.png",
+        title: "Financial auditor/ front end developer",
+        name: "Khaoula AOURRA",
+        bio: "Hey, I'm Khaoula Aourra—a finance and banking grad turned tech enthusiast! I embraced the world of front-end development through Re-coded's boot camp. Excited to fuse financial savvy with tech skills and make a splash in this dynamic industry! 🚀",
+        github: "https://github.com/khaoulasara/AOURRAkhaoula",
+        linkedin:
+            "https://www.eventbrite.com/e/discover-photography-registration-36242436102?aff=ebdssbdestsearch&keep_tld=1",
+    },
+    {
+        id: 4,
+        image: "/mounia.jfif",
+        title: "Fullstack developer",
+        name: "Mounia Belkheir",
+        bio: "Hey, I'm Khaoula Aourra—a finance and banking grad turned tech enthusiast! I embraced the world of front-end development through Re-coded's boot camp. Excited to fuse financial savvy with tech skills and make a splash in this dynamic industry! 🚀",
+        github: "https://github.com/MouniaBelkheir",
+        linkedin: "https://www.linkedin.com/in/mounia-belkheir-5709011b9/",
+    },
+    {
+        id: 5,
+        image: "/Samy.jpg",
+        title: "Computer Scientist",
+        name: "Sami BABOUCHE",
+        bio: "Hey, I'm Khaoula Aourra—a finance and banking grad turned tech enthusiast! I embraced the world of front-end development through Re-coded's boot camp. Excited to fuse financial savvy with tech skills and make a splash in this dynamic industry! 🚀",
+        github: "https://github.com/samiba6",
+        linkedin: "https://www.linkedin.com/in/sami-babouche-4400551b0/",
+    },
+    {
+        id: 6,
+        image: "/Katia.png",
+        title: "Fullstack Developer",
+        name: "Katia Ghezali",
+        bio: "Hey, I'm Khaoula Aourra—a finance and banking grad turned tech enthusiast! I embraced the world of front-end development through Re-coded's boot camp. Excited to fuse financial savvy with tech skills and make a splash in this dynamic industry! 🚀",
+        github: "https://github.com/KatiaGhezali",
+        linkedin: "https://www.linkedin.com/in/katiaghezali/",
+    },
+];
 function AboutUs() {
-    return <div>AboutUs.</div>;
+    return (
+        <div>
+            AboutUs.
+            <OurTeam data={data}></OurTeam>
+        </div>
+    );
 }
 
 export default AboutUs;