Testimonials

1"use client";
2import { useState } from "react";
3import useMeasure from "react-use-measure"; // need this dependecie to work
4import Image from "next/image";
5import { FaQuoteRight } from "react-icons/fa";
6import { MdOutlineStar } from "react-icons/md";
7import { motion } from "framer-motion";
8import { FaArrowLeft, FaArrowRight } from "react-icons/fa";
9
10const TestimonialCarousel = () => {
11  return (
12    <section className="flex flex-col items-center justify-center text-center gap-8 w-full py-16 p-4 overflow-hidden bg-slate-100">
13      <p className="relative w-fit flex items-center gap-2 text-orange-500 text-xl font-semibold uppercase after:content-[''] after:absolute after:w-12 after:h-[2px] after:bg-orange-500 after:-right-16 after:hidden sm:after:block">
14        Clients Reviews
15      </p>
16      <h6 className="text-6xl font-semibold max-w-2xl">
17        What clients say about us?
18      </h6>
19      <Swiper />
20    </section>
21  );
22};
23
24export default TestimonialCarousel;
25
26interface Review {
27  img: string;
28  review: string;
29  rating: number;
30  name: string;
31}
32
33let CARD_WIDTH = 615;
34const MARGIN = 25;
35const CARD_SIZE = CARD_WIDTH + MARGIN;
36
37const BREAKPOINTS = {
38  sm: 640,
39  lg: 1024,
40};
41
42const Swiper = () => {
43  const [ref, { width }] = useMeasure();
44  const [offset, setOffset] = useState(0);
45
46  const CARD_BUFFER =
47    width > BREAKPOINTS.lg ? 2 : width > BREAKPOINTS.sm ? 1 : 1;
48
49  const CAN_SHIFT_LEFT = offset < 0;
50
51  const CAN_SHIFT_RIGHT =
52    Math.abs(offset) < CARD_SIZE * (reviews.length - CARD_BUFFER);
53
54  const shiftLeft = () => {
55    if (!CAN_SHIFT_LEFT) {
56      return;
57    }
58    setOffset((pv) => (pv += CARD_SIZE));
59  };
60
61  const shiftRight = () => {
62    if (!CAN_SHIFT_RIGHT) {
63      return;
64    }
65    setOffset((pv) => (pv -= CARD_SIZE));
66  };
67
68  return (
69    <div className="flex flex-col lg:flex-row items-center justify-center gap-12 overflow-hidden w-full">
70      <div className="flex items-center justify-center gap-4 lg:hidden">
71        <button
72          className="grid place-items-center p-4 bg-white shadow-[4px_4px_0px_#F68A0A] "
73          onClick={shiftLeft}
74        >
75          <FaArrowLeft />
76        </button>
77        <button
78          className="grid  place-items-center p-4 bg-white shadow-[4px_4px_0px_#F68A0A]"
79          onClick={shiftRight}
80        >
81          <FaArrowRight />
82        </button>
83      </div>
84      <button
85        className="lg:grid place-items-center p-4 bg-white shadow-[4px_4px_0px_#F68A0A] hidden"
86        onClick={shiftLeft}
87      >
88        <FaArrowLeft />
89      </button>
90      <div className=" w-full max-w-7xl overflow-hidden p-4">
91        <motion.div
92          animate={{
93            x: offset,
94          }}
95          transition={{
96            ease: "easeInOut",
97          }}
98          className="flex "
99          ref={ref}
100        >
101          {reviews.map((content: Review, index: number) => (
102            <TestimonialItem
103              content={content}
104              key={index}
105              width={CARD_WIDTH}
106              margin={MARGIN}
107            />
108          ))}
109        </motion.div>
110      </div>
111      <button
112        className="lg:grid hidden place-items-center p-4 bg-white shadow-[4px_4px_0px_#F68A0A]"
113        onClick={shiftRight}
114      >
115        <FaArrowRight />
116      </button>
117    </div>
118  );
119};
120
121interface Review {
122  img: string;
123  review: string;
124  rating: number;
125  name: string;
126}
127const TestimonialItem = ({
128  content,
129  width,
130  margin,
131}: {
132  content: Review;
133  width: number;
134  margin: number;
135}) => {
136  const rating = [];
137
138  for (let i = 1; i <= content.rating; i++) {
139    rating.push(<MdOutlineStar key={i} />);
140  }
141
142  return (
143    <div
144      className="relative overflow-hidden flex flex-col justify-center max-w-[320px] md:max-w-full items-start gap-4 p-12 bg-white shadow-md text-start shrink-0 cursor-pointer transition-all hover:scale-[1.015] hover:shadow-xl group"
145      style={{ width: width + "px", marginRight: margin + "px" }}
146    >
147      <Image
148        width={150}
149        height={150}
150        alt="This person does not exist"
151        src={content.img}
152        className="size-24 object-cover"
153      />
154      <p className=" text-neutral-500">{content.review}</p>
155      <div className="flex flex-col-reverse md:flex-row justify-between items-center w-full">
156        <p className="text-2xl">{content.name}</p>
157        <div className="flex text-xl text-yellow-400">{rating}</div>
158      </div>
159      <p className="absolute top-6 right-6 text-neutral-100 text-[10rem] z-10 rotate-12 group-hover:text-neutral-200 transition-colors duration-300">
160        <FaQuoteRight />
161      </p>
162    </div>
163  );
164};
165
166const reviews = [
167  {
168    img: "https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?q=80&w=1974&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
169    review:
170      "Great construction company, work completed on time and as expected. From the very beginning of our cooperation, I felt confident because the team was very professional. I recommend them to anyone looking for reliable specialists.",
171    rating: 5,
172    name: "John Smith",
173  },
174  {
175    img: "https://images.unsplash.com/photo-1556157382-97eda2d62296?q=80&w=2070&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
176    review:
177      "Very good quality of services, although it could be cheaper. Despite that, I am satisfied with the results. Everything was done according to plan, and the materials used for construction were of the highest quality.",
178    rating: 4,
179    name: "Emil Johnson",
180  },
181  {
182    img: "https://images.unsplash.com/photo-1718209881007-c0ecdfc00f9d?q=80&w=2080&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
183    review:
184      "Professional service, but the project was not completed on time. Despite some delays, the company made every effort to correct the situation, and in the end, I am satisfied with the results.",
185    rating: 3,
186    name: "Michael Davis",
187  },
188  {
189    img: "https://images.unsplash.com/photo-1676484639103-4afa24e93c06?q=80&w=2045&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
190    review:
191      "I am satisfied with the work done, I recommend this company to everyone. The construction crew was very polite and competent, and the entire process went smoothly without major issues.",
192    rating: 5,
193    name: "James Brown",
194  },
195  {
196    img: "https://images.unsplash.com/photo-1624797432677-6f803a98acb3?q=80&w=1972&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
197    review:
198      "Service was performed as expected, but communication could have been better. At certain points, I felt a lack of updates on the progress of the work, but the final result was very good.",
199    rating: 4,
200    name: "David Wilson",
201  },
202];
203