Merge pull request #258 from Devaki01/main

Added User Testimonials Section
Nactore-Org · Jun 8, 2024 · 382c9de · 382c9de
2 parents a62d282 + f1f77cb
commit 382c9de
Show file tree

Hide file tree

Showing 3 changed files with 9 additions and 6 deletions.
diff --git a/src/components/Layout.jsx b/src/components/Layout.jsx
@@ -3,12 +3,14 @@ import { Outlet, Link } from "react-router-dom";
 import Header from "./Header/Header";
 import Footer from "./Footer/Footer";
 import { Helmet } from "react-helmet";
+import Testimonials from "./Testimonials/Testimonials";
 
 function Layout() {
  return (
  <div className="App">
  <Header />
  <Outlet />
+ <Testimonials />
  <Footer />
  <Link
  to="/feedback"

diff --git a/src/components/Testimonials/Testimonials.jsx b/src/components/Testimonials/Testimonials.jsx
@@ -35,7 +35,7 @@ function Testimonials() {
  };
 
  return (
- <div className='mb-9 flex flex-col gap-4 px-[2rem] md:px-[6.5rem]'>
+ <div className='mb-9 flex flex-col gap-4 px-[2rem] md:px-[6.5rem] '>
  <div className='text-2xl font-bold text-black text-center'>
  What Our Users Say
  </div>
@@ -48,19 +48,19 @@ function Testimonials() {
  <FaChevronLeft size={35} />
  </button>
  </div>
- <div className='w-full flex justify-center overflow-hidden'>
+ <div className='w-full flex justify-center overflow-hidden py-3'>
  <div className='flex transition-transform duration-500 ease-in-out gap-2'>
  {getVisibleTestimonials().map((testimonial, index) => (
  <div key={index} className='flex-shrink-0 w-full md:w-1/3 p-2'>
- <div className='w-full p-4 bg-white border border-green-300 rounded-md shadow-md'>
+ <div className='w-full p-4 bg-teal-50 shadow-inner hover:bg-sky-200 hover:shadow-2xl border-2 border-black-500 rounded-md shadow-md'>
  <div className='flex items-center gap-4 p-2'>
  <img src={testimonial.image} alt={testimonial.name} className='w-16 h-16 rounded-full' />
  <div>
- <p className='text-lg font-semibold text-black'>{testimonial.name}</p>
- <p className='text-sm text-gray-600'>{testimonial.position}, {testimonial.company}</p>
+ <p className='text-lg font-semibold text-red-500'>{testimonial.name}</p>
+ <p className='text-sm text-yellow-500'>{testimonial.position}, {testimonial.company}</p>
  </div>
  </div>
- <p className='mt-4 text-gray-700'>{testimonial.text}</p>
+ <p className='mt-4 text-fuchsia-800'>{testimonial.text}</p>
  </div>
  </div>
  ))}

diff --git a/src/components/Testimonials/testimonials.js b/src/components/Testimonials/testimonials.js
@@ -1,3 +1,4 @@
+
 const testimonials = [
  {
  name: "John Doe",