From 93b7c8b80d81ade975499b4f428dfe9669489921 Mon Sep 17 00:00:00 2001 From: Sawan Date: Sat, 19 Oct 2024 11:23:39 +0530 Subject: [PATCH] Added animated testimonial section --- frontend/src/components/ui/ReviewCarousel.jsx | 271 ++++++++---------- 1 file changed, 113 insertions(+), 158 deletions(-) diff --git a/frontend/src/components/ui/ReviewCarousel.jsx b/frontend/src/components/ui/ReviewCarousel.jsx index b7f0699b..5675827c 100644 --- a/frontend/src/components/ui/ReviewCarousel.jsx +++ b/frontend/src/components/ui/ReviewCarousel.jsx @@ -1,187 +1,142 @@ -import { useState, useEffect } from 'react'; -import { MdStars, MdArrowBackIos, MdArrowForwardIos } from 'react-icons/md'; -import { LazyLoadImage } from 'react-lazy-load-image-component'; -import 'react-lazy-load-image-component/src/effects/blur.css'; +import React, { useEffect, useState } from 'react'; const ReviewCarousel = () => { - const reviews = [ + const [active, setActive] = useState(3); + const items = [ { - 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, + img: "https://www.gravatar.com/avatar/2c7d99fe281ecd3bcd65ab915bac6dd5?s=250", + stars: "★★★★★", + text: "The PlayCafe website project has been an incredible experience for me. The collaborative environment and innovative ideas helped me enhance my skills in web development and user experience design. I’m proud to be part of this initiative!", + name: "- Arjun Sharma", + jobTitle: "Frontend Developer", + location: "Location: Bengaluru, India" }, { - 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, + img: "https://img.freepik.com/free-vector/illustration-user-avatar-icon_53876-5907.jpg?ga=GA1.1.713761379.1679213202&semt=ais_hybrid", + stars: "★★★★", + text: "Working on the PlayCafe project has truly expanded my horizons. I love how we're building a vibrant online space for board game enthusiasts, making it easy for them to connect and enjoy. This project has greatly improved my project management skills!", + name: "- Priya Desai", + jobTitle: "UI/UX Designer", + location: "Location: Mumbai, India" }, { - 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, + img: "https://img.freepik.com/free-vector/gradient-professional-sarah-smith-linkedin-personal-profile-picture_742173-13011.jpg?ga=GA1.1.713761379.1679213202&semt=ais_hybrid", + stars: "★★★★★", + text: "The PlayCafe initiative has been a game-changer for my professional journey. The chance to work with a talented team and contribute to a meaningful project has been fulfilling. I can’t wait to see how our work transforms the cafe experience!", + name: "- Rohan Patel", + jobTitle: "Backend Developer", + location: "Location: Ahmedabad, India" }, { - name: 'Chris Wilson', - review: 'Amazing variety of games and excellent drinks to enjoy.', - img: 'https://randomuser.me/api/portraits/men/22.jpg', - rating: 5, + img: "https://img.freepik.com/free-vector/profile-picture-template-design_742173-22027.jpg?ga=GA1.1.713761379.1679213202&semt=ais_hybrid", + stars: "★★★★", + text: "Participating in the PlayCafe project has ignited my passion for web development. The creativity and teamwork involved in building this platform have not only sharpened my technical skills but also my ability to collaborate effectively.", + name: "- Neha Iyer", + jobTitle: "Content Writer", + location: "Location: Chennai, India" }, { - 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, + img: "https://i.pravatar.cc/250?u=mail@ashallendesign.co.uk", + stars: "★★★★★", + text: "The PlayCafe website project has been an amazing platform for me to learn and grow. I am thrilled to contribute to a project that brings joy to board game lovers and creates a community. The support from my team has been fantastic!", + name: "- Rahul Singh", + jobTitle: "Full Stack Developer", + location: "Location: Hyderabad, India" }, { - 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, + img: "https://www.gravatar.com/avatar/2c7d99fe281ecd3bcd65ab915bac6dd5?s=250", + stars: "★★★★★", + text: "Being part of the PlayCafe initiative has been a rewarding experience. I’ve learned so much about web development while helping create an engaging space for board game enthusiasts. I’m excited to see our vision come to life!", + name: "- Kavita Nair", + jobTitle: "Software Tester", + location: "Location: Pune, India" }, ]; - const [currentIndex, setCurrentIndex] = useState(0); - const [showMoreStates, setShowMoreStates] = useState( - reviews.map(() => false) - ); - - const toggleShowMore = (index) => { - const updatedStates = [...showMoreStates]; - updatedStates[index] = !updatedStates[index]; - setShowMoreStates(updatedStates); - }; - - const nextSlide = () => { - setCurrentIndex((prevIndex) => - prevIndex === reviews.length - 4 ? 0 : prevIndex + 1 - ); - }; - const prevSlide = () => { - setCurrentIndex((prevIndex) => - prevIndex === 0 ? reviews.length - 4 : prevIndex - 1 - ); - }; - const [cardsToShow, setCardsToShow] = useState(1); + useEffect(() => { + loadShow(); + }, [active]); - const updateCardsToShow = () => { - if (window.innerWidth >= 768) { - setCardsToShow(4); - } else { - setCardsToShow(1); + const loadShow = () => { + const itemsElement = document.querySelectorAll('.slider .item'); + itemsElement[active].style.transform = `none`; + itemsElement[active].style.zIndex = 1; + itemsElement[active].style.filter = 'none'; + itemsElement[active].style.opacity = 1; + // Show after + let stt = 0; + for (let i = active + 1; i < itemsElement.length; i++) { + stt++; + itemsElement[i].style.transform = `translateX(${120 * stt}px) scale(${1 - 0.2 * stt}) perspective(16px) rotateY(-1deg)`; + itemsElement[i].style.zIndex = 0; + itemsElement[i].style.filter = 'blur(5px)'; + itemsElement[i].style.opacity = stt > 2 ? 0 : 0.6; + } + stt = 0; + for (let i = (active - 1); i >= 0; i--) { + stt++; + itemsElement[i].style.transform = `translateX(${-120 * stt}px) scale(${1 - 0.2 * stt}) perspective(16px) rotateY(1deg)`; + itemsElement[i].style.zIndex = 0; + itemsElement[i].style.filter = 'blur(5px)'; + itemsElement[i].style.opacity = stt > 2 ? 0 : 0.6; } }; - useEffect(() => { - updateCardsToShow(); - window.addEventListener('resize', updateCardsToShow); - - return () => { - window.removeEventListener('resize', updateCardsToShow); - }; - }, []); - return ( -
-
-

- Customer Feedback -

-
+
-
-
-
- {reviews.map((review, index) => ( -
-
-
- {/* */} - -

- {review.name} -

-
- {Array(review.rating) - .fill() - .map((_, i) => ( - - ))} -
-
-

- {showMoreStates[index] - ? review.review - : `${review.review.substring(0, 50)}...`} - toggleShowMore(index)} - > - {showMoreStates[index] ? ' Show less' : ' Read more'} - -

-
-
- ))} +
+ {items.map((item, index) => ( +
+ User Avatar { + e.currentTarget.style.transform = 'scale(1.1)'; + e.currentTarget.style.filter = 'brightness(1.1)'; // Brightness effect on hover + }} + onMouseOut={e => { + e.currentTarget.style.transform = 'scale(1)'; + e.currentTarget.style.filter = 'brightness(1)'; // Reset brightness + }} + /> +
{item.stars}
+

{item.text}

+

{item.name}

+
{item.jobTitle}
+
{item.location}
-
- {reviews.length > 4 && ( - <> - - - - )} + + ))} + + +
);