Skip to content

Commit

Permalink
Customer Feedback Section modified successfully
Browse files Browse the repository at this point in the history
  • Loading branch information
@tech-dhawal-03
tech-dhawal-03 committed Oct 4, 2024
1 parent f08795a commit 5625872
Show file tree
Hide file tree
Showing 5 changed files with 232 additions and 130 deletions.
3 changes: 3 additions & 0 deletions package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,13 +21,16 @@
"react-intersection-observer": "^9.13.0",
"react-pageflip": "^2.0.3",
"react-router-dom": "^6.24.1",
"react-slick": "^0.30.2",
"slick-carousel": "^1.8.1",
"tailwind-merge": "^2.5.2",
"tailwindcss": "^3.4.4"
},
"devDependencies": {
"@types/react": "^18.3.3",
"@types/react-dom": "^18.3.0",
"@vitejs/plugin-react": "^4.3.1",
"daisyui": "^4.12.12",
"eslint": "^8.57.0",
"eslint-plugin-react": "^7.34.2",
"eslint-plugin-react-hooks": "^4.6.2",
Expand Down
197 changes: 197 additions & 0 deletions src/Components/Cards/FeedbackCard.jsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,197 @@
import { useState, useEffect } from "react";
import { MdStars, MdArrowBackIos, MdArrowForwardIos } from "react-icons/md";
import quote from "../../assets/img/quote.png";
import "slick-carousel/slick/slick.css";
import "slick-carousel/slick/slick-theme.css";
import Slider from "react-slick"; // Import Slider




const colors = [
"bg-pink-600",
"bg-yellow-400",
"bg-cyan-400",
"bg-rose-600",
"bg-green-600",
"bg-purple-500",
"bg-amber-400",
"bg-lime-500",
"bg-emerald-600",
"bg-sky-400",
"bg-blue-600"




]

const reviews = [
{
name: "Jane Smith",
review:
"Great games and coffee. The perfect spot to unwind with friends!",
img: "https://randomuser.me/api/portraits/men/51.jpg",
rating: 5,
},
{
name: "Sophia Lee",
review: "Cozy place with a fantastic selection of snacks and games!",
img: "https://randomuser.me/api/portraits/women/90.jpg",
rating: 4,
},
{
name: "Emily Davis",
review: "Friendly staff and delicious food make for a great experience.",
img: "https://randomuser.me/api/portraits/women/63.jpg",
rating: 5,
},
{
name: "Chris Wilson",
review: "Amazing variety of games and excellent drinks to enjoy.",
img: "https://randomuser.me/api/portraits/men/22.jpg",
rating: 5,
},
{
name: "Michael Johnson",
review: "Had a fantastic time with the games and tasty beverages!",
img: "https://randomuser.me/api/portraits/men/85.jpg",
rating: 5,
},
{
name: "Jia Wang",
review: "Loved the games, the ambiance, and the overall vibe here!",
img: "https://randomuser.me/api/portraits/women/61.jpg",
rating: 5,
},
{
name: "Olivia Green",
review:
"Great atmosphere and an excellent selection of board games. Will be back!",
img: "https://randomuser.me/api/portraits/women/72.jpg",
rating: 4,
},
{
name: "Ethan White",
review:
"The vibe is amazing, and the staff is super friendly. Highly recommend!",
img: "https://randomuser.me/api/portraits/men/33.jpg",
rating: 5,
},
];



export default function customerFeedback() {

const settings = {
dots: true,
infinite: true,
speed: 500,
slidesToShow: 2,
slidesToScroll: 1,
autoplay: true,
autoplaySpeed: 3000,
cssEase: "linear",
};

const [currentIndex, setCurrentIndex] = useState(0);

function getRandomColor(colorsArray) {
const randomIndex = Math.floor(Math.random() * colorsArray.length);
return colorsArray[randomIndex];
}


useEffect(() => {
const intervalId = setInterval(() => {
setCurrentIndex((prevIndex) => (prevIndex + 1) % reviews.length);
}, 3000);


return () => clearInterval(intervalId); // Clean up interval on component unmount
}, [reviews.length]);


return (



<div className=" bg-[#004D43] min-h-[50vh] mt-10 flex flex-row items-center justify-center relative rounded-3xl mx-20 mb-10 md:min-h-[80vh]">
<div className="hidden flex-col -top-16 absolute left-10 gap-10 md:flex ">
<div className="flex bg-yellow-400 w-[150px] h-[150px] p-1 rounded-full">
<img src={quote}
alt="double_quote"
className="w-full h-full object-contain"
/>


</div>

<div className="flex text-5xl font-extrabold text-white mt-3">
What Our {<br />} Customer Say
</div>

<div className="text-2xl text-yellow-300 text-wrap text-justify md:w-400 ">
Here’s what our Valued Customers
{<br />}
said about their experiences with us.
{<br />}
Their testimonials reflect the joy and
{<br />}
connection fostered within our walls,
{<br />}
showcasing the vibrant community we
{<br />}
have built.


</div>



</div>



<div className="absolute -top-24 -right-16 ">
<Slider {...settings} className="carousel rounded-box w-[840px] gap-10 h-[550px] overflow-hidden hover:scale-105 ">
{reviews.map((review, index) => {
const shade = getRandomColor(colors);
return (
<div key={review.id || index} className={`carousel-item transition-opacity duration-1000 ease-in-out`}>
<div className={`card glass w-96 ${shade} lg:h-[550px] sm:h-[350px]`}>
<figure>
<img
src={review.img}
alt={`Profile of ${review.name}`}
className="rounded-full m-10 scale-125 hover:transition-transform hover:scale-150"
/>
</figure>
<div className="card-body bg-white border-4 border-black border-solid m-5 rounded-lg hover:bg-yellow-400 transition duration-300 scale-105">
<h2 className="card-title justify-center my-2 scale-150">
{Array(review.rating)
.fill()
.map((_, i) => (
<MdStars key={i} className="text-[#004D43]" />
))}
</h2>
<p className="justify-center text-xl text-justify mt-4 h-full">{review.review}</p>
<h1 className="text-2xl text-center">~{review.name}</h1>
</div>
</div>
</div>
);
})}
</Slider>
</div>
</div>
)







}
150 changes: 21 additions & 129 deletions src/Components/ui/ReviewCarousel.jsx
View file
Original file line number Diff line number Diff line change
@@ -1,140 +1,32 @@
import { useState } from "react";
import { MdStars, MdArrowBackIos, MdArrowForwardIos } from "react-icons/md";
import FeedbackCard from "../Cards/FeedbackCard";


const ReviewCarousel = () => {
const reviews = [
{
name: "Jane Smith",
review:
"Great games and coffee. The perfect spot to unwind with friends!",
img: "https://randomuser.me/api/portraits/men/51.jpg",
rating: 5,
},
{
name: "Sophia Lee",
review: "Cozy place with a fantastic selection of snacks and games!",
img: "https://randomuser.me/api/portraits/women/90.jpg",
rating: 4,
},
{
name: "Emily Davis",
review: "Friendly staff and delicious food make for a great experience.",
img: "https://randomuser.me/api/portraits/women/63.jpg",
rating: 5,
},
{
name: "Chris Wilson",
review: "Amazing variety of games and excellent drinks to enjoy.",
img: "https://randomuser.me/api/portraits/men/22.jpg",
rating: 5,
},
{
name: "Michael Johnson",
review: "Had a fantastic time with the games and tasty beverages!",
img: "https://randomuser.me/api/portraits/men/85.jpg",
rating: 5,
},
{
name: "Jia Wang",
review: "Loved the games, the ambiance, and the overall vibe here!",
img: "https://randomuser.me/api/portraits/women/61.jpg",
rating: 5,
},
{
name: "Olivia Green",
review:
"Great atmosphere and an excellent selection of board games. Will be back!",
img: "https://randomuser.me/api/portraits/women/72.jpg",
rating: 4,
},
{
name: "Ethan White",
review:
"The vibe is amazing, and the staff is super friendly. Highly recommend!",
img: "https://randomuser.me/api/portraits/men/33.jpg",
rating: 5,
},
];

const [currentIndex, setCurrentIndex] = useState(0);

const nextSlide = () => {
setCurrentIndex((prevIndex) =>
prevIndex === reviews.length - 4 ? 0 : prevIndex + 1
);
};

const prevSlide = () => {
setCurrentIndex((prevIndex) =>
prevIndex === 0 ? reviews.length - 4 : prevIndex - 1
);
};



return (
<div className="mb-20">
<div className="items-center flex justify-center mb-10">
<h1 className="md:text-6xl text-4xl pl-3 pr-3 text-center font-bold text-[#004D43]">
Customer Feedback
<div className="items-center flex justify-center mb-10 mt-10">
<h1 className="md:text-6xl text-4xl pl-3 pr-3 text-center font-bold text-[#004D43] mt-4 mb-20">
Testimonials
</h1>
</div>

<div className="bg-[#004D43] min-h-[50vh] p-4 md:p-20 items-center justify-center flex relative ">
<div className="w-full max-w-7xl md:overflow-hidden overflow-x-auto ">
<div
className="flex transition-transform duration-300 ease-in-out"
style={{
transform: `translateX(-${currentIndex * (100 / 4)}%)`,
width: `${reviews.length * (100 / 4)}%`,
}}
>
{reviews.map((review, index) => (
<div
key={index}
className="w-full sm:w-1/2 md:w-1/3 lg:w-1/4 p-2 "
>
<div className="relative h-[40vh] md:h-[35vh] p-4 rounded-xl md:w-full w-[42vh] bg-amber-200 z-10 overflow-hidden">
<div className="items-center flex flex-col justify-center mb-3">
<img
src={review.img}
alt=""
className="rounded-full h-20 w-20"
/>
<h1 className="text-xl font-semibold">{review.name}</h1>
<div className="flex">
{Array(review.rating)
.fill()
.map((_, i) => (
<MdStars key={i} className="text-[#004D43]" />
))}
</div>
</div>
<p className="text-center text-lg leading-6 tracking-wide mt-4 ">
{review.review}
</p>
</div>
</div>
))}
</div>
</div>
{reviews.length > 4 && (
<>
<button
onClick={prevSlide}
className=" hidden md:block absolute left-20 top-1/2 transform -translate-y-1/2 bg-white rounded-full p-2"
>
<MdArrowBackIos className="text-[#004D43]" />
</button>
<button
onClick={nextSlide}
className=" hidden md:block absolute right-20 top-1/2 transform -translate-y-1/2 bg-white rounded-full p-2"
>
<MdArrowForwardIos className="text-[#004D43]" />
</button>
</>
)}
</div>
</div>


<FeedbackCard />

</div>








);
};

export default ReviewCarousel;
export default ReviewCarousel;
Binary file added src/assets/img/quote.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
12 changes: 11 additions & 1 deletion tailwind.config.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,5 +23,15 @@ export default {
},
},
},
plugins: [],

plugins : [
require('daisyui')
],

daisyui: {
themes: [],
},



}

0 comments on commit 5625872

Please sign in to comment.