create testimonial components and its carts

src/App.js

@@ -3,6 +3,7 @@ import Campus from "./components/Campus/Campus";
 import Hero from "./components/Hero/Hero";
 import Navbar from "./components/Navbar/Navbar";
 import Programs from "./components/Programs/Programs";
+import Testimonials from "./components/Testimonials/Testimonials";
 import Title from "./components/title/Title";
 
 function App() {
@@ -17,6 +18,7 @@ function App() {
         <Title subtitle="Gallery" title="Campus Photos" />
         <Campus />
         <Title subtitle="Testimonials" title="What Students Says" />
+        <Testimonials />
       </div>
     </div>
   );

src/components/Testimonials/Testimonials.css

@@ -0,0 +1,59 @@
+.testimonials {
+  margin: 80px auto;
+  padding: 0 80px;
+  position: relative;
+}
+.back-btn,
+.next-btn {
+  position: absolute;
+  top: 50%;
+  right: 0;
+  transform: translateY(-50%);
+  padding: 15px;
+  width: 50px;
+  border-radius: 50%;
+  cursor: pointer;
+  background-color: #212ea0;
+}
+.back-btn {
+  right: auto;
+  left: 0;
+}
+.slider {
+  overflow: hidden;
+}
+
+.slider ul {
+  display: flex;
+  width: 200%;
+  overflow-x: hidden;
+  transition: 0.5s;
+}
+
+.slider ul li {
+  list-style: none;
+  width: 50%;
+  padding: 20px;
+}
+.slide {
+  box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
+  padding: 40px;
+  border-radius: 10px;
+  color: #676767;
+  line-height: 1.4;
+}
+.slide img {
+  width: 65px;
+  border-radius: 50%;
+  margin-right: 10px;
+  border: 4px solid #212ea0;
+}
+.user-info {
+  display: flex;
+  align-items: center;
+  margin-bottom: 20px;
+  font-size: 15px;
+}
+.user-info h3 {
+  color: #212ea0;
+}

src/components/Testimonials/Testimonials.jsx

@@ -0,0 +1,70 @@
+import React from 'react'
+import "./Testimonials.css"
+import next_icon from "../../assets/next-icon.png"
+import back_icon from "../../assets/back-icon.png"
+import user_1 from "../../assets/user-1.png"
+import user_2 from "../../assets/user-2.png"
+import user_3 from "../../assets/user-3.png"
+import user_4 from "../../assets/user-4.png"
+ const Testimonials = () => {
+  return (
+    <div className='testimonials'>
+      <img src={next_icon} alt='back' className='next-btn'/>
+      <img src={back_icon} alt='back' className='back-btn'/>
+      <div className='slider'>
+        <ul>
+            <li>
+                <div className='slide'>
+                    <div className='user-info'>
+                        <img src={user_1} alt='user'/>
+                        <div>
+                            <h3>Omid Sargazi</h3>
+                            <span>Edusity, USA</span>
+                        </div>
+                    </div>
+                    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Harum sunt possimus explicabo molestiae, minus accusamus aliquid reprehenderit nulla nesciunt earum! Architecto, voluptatem. Accusantium consectetur expedita repellat tempore at amet minus.</p>
+                </div>
+            </li>
+            <li>
+                <div className='slide'>
+                    <div className='user-info'>
+                        <img src={user_2} alt='user'/>
+                        <div>
+                            <h3>Lrila Sargazi</h3>
+                            <span>Edusity, USA</span>
+                        </div>
+                    </div>
+                    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Harum sunt possimus explicabo molestiae, minus accusamus aliquid reprehenderit nulla nesciunt earum! Architecto, voluptatem. Accusantium consectetur expedita repellat tempore at amet minus.</p>
+                </div>
+            </li>
+            <li>
+                <div className='slide'>
+                    <div className='user-info'>
+                        <img src={user_3} alt='user'/>
+                        <div>
+                            <h3>Feilsa Sargazi</h3>
+                            <span>Edusity, USA</span>
+                        </div>
+                    </div>
+                    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Harum sunt possimus explicabo molestiae, minus accusamus aliquid reprehenderit nulla nesciunt earum! Architecto, voluptatem. Accusantium consectetur expedita repellat tempore at amet minus.</p>
+                </div>
+            </li>
+            <li>
+                <div className='slide'>
+                    <div className='user-info'>
+                        <img src={user_4} alt='user'/>
+                        <div>
+                            <h3>Saeed argazi</h3>
+                            <span>Edusity, USA</span>
+                        </div>
+                    </div>
+                    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Harum sunt possimus explicabo molestiae, minus accusamus aliquid reprehenderit nulla nesciunt earum! Architecto, voluptatem. Accusantium consectetur expedita repellat tempore at amet minus.</p>
+                </div>
+            </li>
+        </ul>
+      </div>
+    </div>
+  )
+}
+
+export default Testimonials