Feat: Added testimonials section.

src/Pages/LandingPage.jsx

@@ -1,14 +1,15 @@
 import React from "react";
 import Form from "../components/Form/Form";
 import { Link } from "react-router-dom";
+import Testimonials from "../components/Testimonials/Testimonials"; // Import the Testimonials component
 
 function LandingPage() {
  return (
  <>
  <div className="relative">
  {/* Block 1 */}
  <div
- className="h-[45rem] py-28 text-center lxg:text-left lxg:w-[70rem] m-auto justify-center gap-8 relative bg-gradient-to-b flex "
+ className="h-[45rem] py-28 text-center lxg:text-left lxg:w-[70rem] m-auto justify-center gap-8 relative bg-gradient-to-b flex"
  id="block1"
  >
  <div className="py-10 px-7">
@@ -24,20 +25,20 @@ function LandingPage() {
  Cure, personalized care plans, flexible scheduling, health
  insurance and much more.
  </p>
- <div className="mt-12 sm:mt-9 flex items-center flex-col sm:flex-row sm:justify-center lxg:justify-start sm:gap-4">
- <Link to="book-nurse"><button className="bg-green-600 w-48 mb-4 sm:mb-0 sm:min-w-[10rem] transition-all shadow-lg shadow-green-300 hover:shadow-lg hover:scale-105 hover:shadow-green-400 text-white px-12 py-3 rounded-sm">
- Book Nurse
- </button>
+ <div className="mt-12 sm:mt-9 flex items-center flex-col sm:flex-row sm:justify-center lxg:justify-start sm:gap-4">
+ <Link to="book-nurse">
+ <button className="bg-green-600 w-48 mb-4 sm:mb-0 sm:min-w-[10rem] transition-all shadow-lg shadow-green-300 hover:shadow-lg hover:scale-105 hover:shadow-green-400 text-white px-12 py-3 rounded-sm">
+ Book Nurse
+ </button>
  </Link>
  <a href="#block2">
- {/* TODO : Change this about to some block below since we are not planning an about page */}
  <button className="bg-black w-48 mb-4 sm:mb-0 sm:min-w-[10rem] transition-all shadow-lg shadow-zinc-300 hover:shadow-lg hover:shadow-zinc-400 hover:scale-105 text-white px-12 py-3 rounded-sm">
  Learn More
  </button>
  </a>
  </div>
  </div>
- <div className="py-10  items-end hidden lxg:flex px-7">
+ <div className="py-10 items-end hidden lxg:flex px-7">
  <img
  width={400}
  height={400}
@@ -52,14 +53,14 @@ function LandingPage() {
  </div>
 
  {/* Block 2 */}
- <div className="px-8 lg:px-16  sm:mt-28 md:mt-28 mb-28" id="block2">
- <div className="text-center mb-14 ">
+ <div className="px-8 lg:px-16 sm:mt-28 md:mt-28 mb-28" id="block2">
+ <div className="text-center mb-14">
  <h3 className="text-3xl font-medium">Book a health checkup now</h3>
  <h2 className="text-5xl font-bold">
  Quick & easy care for elderly and your loved ones
  </h2>
  </div>
- <div className="flex flex-col  m-auto max-w-[75rem] lg:flex-row justify-evenly mt-14 lg:mt-28">
+ <div className="flex flex-col m-auto max-w-[75rem] lg:flex-row justify-evenly mt-14 lg:mt-28">
  <div className="flex flex-col items-center">
  <img
  src="/assets/nurseFlaticon.png"
@@ -90,7 +91,7 @@ function LandingPage() {
  <h2 className="text-2xl font-bold">Contact Support</h2>
  <p className="max-w-[40ch] mt-3 text-gray-500 font-medium">
  Our knowledgeable and friendly operators are always ready to
- help with any questions or concerns
+ help with any questions or concerns.
  </p>
  </div>
  </div>
@@ -104,7 +105,7 @@ function LandingPage() {
  alt=""
  />
  <div className="text-center mt-8">
- <h2 className="text-2xl font-bold">We Care for you</h2>
+ <h2 className="text-2xl font-bold">We Care for You</h2>
  <p className="max-w-[40ch] mt-3 text-gray-500 font-medium">
  Personalized care tailored to you, with comprehensive health
  insurance coverage.
@@ -114,55 +115,46 @@ function LandingPage() {
  </div>
  </div>
 
- {/* Block 3 */}
- {/* <div className="mt-52 max-w-screen-xl mx-auto" id="block3">
- <div className="text-center">
- <h3 className="text-3xl font-medium">Category</h3>
- <h2 className="text-5xl mb-20 font-bold">Choose your ride now</h2>
- </div>
- <CatPrev />
- </div> */}
-
  {/* Block 5 */}
  <div className="m-auto flex flex-col items-center">
- <div className="block text-center smd:text-left smd:flex justify-between m-auto px-11 py-6 gap-11 mt-8 mb-8 ">
+ <div className="block text-center smd:text-left smd:flex justify-between m-auto px-11 py-6 gap-11 mt-8 mb-8">
  <div>
  <div>
  <h4 className="font-bold text-2xl">Why Choose Us</h4>
  <h2 className="font-bold text-center ml-auto mr-auto smd:ml-0 text-5xl my-4 smd:text-left max-w-[20ch]">
- We value for health, healthcare workers and the nation
+ We value health, healthcare workers, and the nation
  </h2>
  <p className="w-full text-center smd:text-left max-w-[65ch] my-2 text-zinc-600">
  We believe in valuing every aspect of health, from individual
  wellness to the tireless dedication of those who nurture it.
- Nurses in India are migrating to different nation to find
- better opportunities but we are on a mission to provide them
+ Nurses in India are migrating to different nations to find
+ better opportunities, but we are on a mission to provide them
  work opportunities by fulfilling the needs of home nursing as
- a freelancing solution and connect the patients with certified
- nurses.
+ a freelancing solution and connecting the patients with
+ certified nurses.
  </p>
  <p className="w-full text-center smd:text-left max-w-[65ch] my-2 text-zinc-600">
- For the care seekers, We provide them personalized healthcare
- care plans and health insurances which will protect them in
- case of emergency. Covering both the aspects of care seekers
- and care givers we are aiming to solve the health care for
+ For the care seekers, we provide personalized healthcare plans
+ and health insurances which will protect them in case of
+ emergency. Covering both the aspects of care seekers and care
+ givers, we aim to solve the healthcare challenges for the
  world's largest democratic nation.
  </p>
  </div>
  </div>
  <div className="my-16 text-center m-auto smd:text-left">
- <div className="flex flex-col gap-3  items-center smd:gap-5 smd:flex smd:flex-row max-w-[70ch] mb-4">
+ <div className="flex flex-col gap-3 items-center smd:gap-5 smd:flex smd:flex-row max-w-[70ch] mb-4">
  <div>
  <img
- src="\assets\health-professional.png"
+ src="/assets/health-professional.png"
  height={100}
  width={100}
  alt=""
  />
  </div>
  <div className="max-w-[70ch] mb-3">
  <h2 className="text-zinc-700 font-bold text-xl">
- Certified Professional Healthcare workers
+ Certified Professional Healthcare Workers
  </h2>
  <p className="max-w-[38ch] text-zinc-500 font-medium text-xm">
  We ensure quality care by connecting you with certified
@@ -171,38 +163,41 @@ function LandingPage() {
  </p>
  </div>
  </div>
- <div className="flex flex-col  gap-3 items-center  smd:gap-5 smd:flex smd:flex-row max-w-[70ch] mb-4">
+ <div className="flex flex-col gap-3 items-center smd:gap-5 smd:flex smd:flex-row max-w-[70ch] mb-4">
  <div>
- <img src="\assets\debt.png" height={100} width={100} alt="" />
+ <img src="/assets/debt.png" height={100} width={100} alt="" />
  </div>
  <div className="max-w-[70ch] mb-3">
  <h2 className="text-zinc-700 font-bold text-xl">
  No Hidden Charges
  </h2>
  <p className="max-w-[38ch] text-zinc-500 font-medium text-xm">
  Enjoy peace of mind with our no hidden charges policy. We
- believe in transparent and honest pricing and what you see
- will be the last amount that you'd ever pay.
+ believe in transparent and honest pricing, and what you see
+ is what you pay.
  </p>
  </div>
  </div>
- <div className=" flex flex-col gap-3  items-center smd:gap-5  smd:flex  smd:flex-row max-w-[70ch] mb-4">
+ <div className="flex flex-col gap-3 items-center smd:gap-5 smd:flex smd:flex-row max-w-[70ch] mb-4">
  <div>
- <img src="\assets\india.png" height={100} width={100} />
+ <img src="/assets/india.png" height={100} width={100} />
  </div>
  <div className="max-w-[70ch] mb-3">
  <h2 className="text-zinc-700 font-bold text-xl">
  Get Care, Anywhere
  </h2>
  <p className="max-w-[38ch] text-zinc-500 font-medium text-xm">
  We are constantly expanding our service across cities in
- India
+ India.
  </p>
  </div>
  </div>
  </div>
  </div>
  </div>
+
+ {/* Testimonials */}
+ <Testimonials /> {/* Add the Testimonials component here */}
  </div>
  </>
  );

src/components/Testimonials/Testimonials.jsx

@@ -0,0 +1,82 @@
+import React, { useState, useEffect } from 'react';
+import { FaChevronLeft, FaChevronRight } from 'react-icons/fa';
+import testimonials from './testimonials';
+
+function Testimonials() {
+ const [currentIndex, setCurrentIndex] = useState(0);
+ const [isSmallScreen, setIsSmallScreen] = useState(false);
+ const itemsPerPage = isSmallScreen ? 1 : 3;
+
+ useEffect(() => {
+ const checkScreenSize = () => {
+ setIsSmallScreen(window.innerWidth < 768);
+ };
+
+ checkScreenSize();
+ window.addEventListener('resize', checkScreenSize);
+
+ return () => window.removeEventListener('resize', checkScreenSize);
+ }, []);
+
+ const handleNext = () => {
+ setCurrentIndex((prevIndex) => (prevIndex + 1) % testimonials.length);
+ };
+
+ const handlePrev = () => {
+ setCurrentIndex((prevIndex) => (prevIndex - 1 + testimonials.length) % testimonials.length);
+ };
+
+ const getVisibleTestimonials = () => {
+ const end = currentIndex + itemsPerPage;
+ if (end > testimonials.length) {
+ return [...testimonials.slice(currentIndex), ...testimonials.slice(0, end - testimonials.length)];
+ }
+ return testimonials.slice(currentIndex, end);
+ };
+
+ return (
+ <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>
+ <div className='relative w-full flex justify-center items-center'>
+ <div className='absolute left-[-30px] top-1/2 transform -translate-y-1/2'>
+ <button 
+ onClick={handlePrev} 
+ className='bg-transparent text-black p-2 rounded-full z-10 hover:bg-green-200 transition duration-300'
+ >
+ <FaChevronLeft size={35} />
+ </button>
+ </div>
+ <div className='w-full flex justify-center overflow-hidden'>
+ <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='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>
+ </div>
+ </div>
+ <p className='mt-4 text-gray-700'>{testimonial.text}</p>
+ </div>
+ </div>
+ ))}
+ </div>
+ </div>
+ <div className='absolute right-[-35px] top-1/2 transform -translate-y-1/2'>
+ <button 
+ onClick={handleNext} 
+ className='bg-transparent text-black p-2 rounded-full z-10 hover:bg-green-200 transition duration-300'
+ >
+ <FaChevronRight size={35} />
+ </button>
+ </div>
+ </div>
+ </div>
+ );
+}
+
+export default Testimonials;

src/components/Testimonials/testimonials.js

@@ -0,0 +1,39 @@
+const testimonials = [
+ {
+ name: "John Doe",
+ position: "Care Seeker",
+ company: "Nacto Care",
+ image: "https://dpemoji.com/wp-content/uploads/2023/01/Whatsapp-dp-for-boys-57.png",
+ text: "Nacto Care has been a lifesaver for my family. The nurse we hired through their platform provided excellent care for my elderly parents. The entire process was smooth and professional."
+ },
+ {
+ name: "Jane Smith",
+ position: "Care Seeker",
+ company: "Nacto Care",
+ image: "https://t3.ftcdn.net/jpg/06/36/69/86/360_F_636698674_DroChEj5eWmZiaZOSDMnj8hcDqqw74Fp.jpg",
+ text: "The personalized care plans and flexible scheduling options offered by Nacto Care made it easy for us to get the help we needed. The nurse was knowledgeable and compassionate."
+ },
+ {
+ name: "Michael Johnson",
+ position: "Customer",
+ company: "Nacto Care",
+ image: "https://dpemoji.com/wp-content/uploads/2023/01/Whatsapp-dp-for-boys-57.png",
+ text: "I was impressed by the quality of service provided by Nacto Care. The platform is user-friendly, and the nurses are highly qualified. I would highly recommend them to anyone in need of home care services."
+ },
+ {
+ name: "Emily Brown",
+ position: "Care Seeker",
+ company: "Nacto Care",
+ image: "https://t3.ftcdn.net/jpg/06/36/69/86/360_F_636698674_DroChEj5eWmZiaZOSDMnj8hcDqqw74Fp.jpg",
+ text: "Nacto Care connected us with a fantastic nurse who took great care of my grandfather. The support and attention to detail were outstanding. Thank you for making a difference in our lives."
+ },
+ {
+ name: "Alex Williams",
+ position: "Customer",
+ company: "Nacto Care",
+ image: "https://dpemoji.com/wp-content/uploads/2023/01/Whatsapp-dp-for-boys-57.png",
+ text: "The life insurance scheme offered by Nacto Care gives us peace of mind knowing that our loved ones are protected. The nurse we hired was professional and dedicated to providing the best care possible."
+ }
+];
+
+export default testimonials;