From 57bc11ee3647789a2b2367e57132649897c19d56 Mon Sep 17 00:00:00 2001 From: Ikki Date: Tue, 5 Nov 2024 23:04:28 +0530 Subject: [PATCH 1/4] adding testimonials section --- website3.0/components/Testmonial.jsx | 190 +++++++++++++++++++++++++++ website3.0/pages/HomePage.js | 8 +- 2 files changed, 197 insertions(+), 1 deletion(-) create mode 100644 website3.0/components/Testmonial.jsx diff --git a/website3.0/components/Testmonial.jsx b/website3.0/components/Testmonial.jsx new file mode 100644 index 00000000..84cb964b --- /dev/null +++ b/website3.0/components/Testmonial.jsx @@ -0,0 +1,190 @@ +import React, { useState, useEffect, useCallback } from 'react'; +import { ChevronLeft, ChevronRight, Star } from 'lucide-react'; +import { useMediaQuery } from 'react-responsive'; + +const reviews = [ + { + name: 'Hema Qureshi', + role: 'Tech Enthusiast', + image: 'https://media.istockphoto.com/id/1320811419/photo/head-shot-portrait-of-confident-successful-smiling-indian-businesswoman.jpg?s=612x612&w=0&k=20&c=bCUTB8vd8MnzZFIq-x645-SmLNk2sQzOvOvWCPGDfZ4=', + quote: 'HelpOps-Hub made troubleshooting easy!', + review: 'The platform offers practical solutions and resources that are perfect for complex DevOps issues.', + rating: 5, + }, + { + name: 'Kavita Singhal', + role: 'Tech Blogger', + image: 'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTyVrIew4wGdw5mK6gL--VNgWtcavnDjErVzg&s', + quote: 'A great knowledge source.', + review: 'The guides and articles here have been invaluable in enhancing my DevOps skills and knowledge base.', + rating: 4, + }, + { + name: 'Rekha Sharma', + role: 'DevOps Enthusiast', + image: 'https://preview.redd.it/a-beautiful-south-indian-girl-v0-2khkhnm0rllb1.png?width=512&format=png&auto=webp&s=2c3bacb21906f66018f792cc83cf1d9b81884c76', + quote: 'Highly recommend!', + review: 'The answers to my questions are detailed and help resolve my issues quickly and effectively every time.', + rating: 5, + }, + { + name: 'Raj Verma', + role: 'Software Engineer', + image: 'https://media.istockphoto.com/id/1141737652/photo/portrait-of-a-confident-young-man.jpg?s=612x612&w=0&k=20&c=YQaYjmbPGpJ0DXxGSTLHFPWsBKjBsAmR_l-XHYt2vHU=', + quote: 'Helped with every query!', + review: 'HelpOps-Hub is fantastic for finding quick solutions and learning new tips on DevOps topics.', + rating: 5, + }, + { + name: 'Ananya Gupta', + role: 'System Admin', + image: 'https://static.vecteezy.com/system/resources/thumbnails/032/946/473/small_2x/smiling-indian-girl-in-traditional-sari-outdoors-free-photo.jpg', + quote: 'A must for DevOps.', + review: 'This platform offers detailed insights and answers for even the most complex DevOps problems.', + rating: 5, + }, + { + name: 'Sunil Rao', + role: 'Cloud Architect', + image: 'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQu-J3wFseTVVZKfaKLjWAl7Q33w1_4-Jlm6A&s', + quote: 'Insightful and practical!', + review: 'The blog articles provide clear, actionable advice on DevOps that is useful in my day-to-day work.', + rating: 4, + }, + ]; + + +const infiniteReviews = reviews; + +const ReviewCard = ({ review, theme, setIsPaused }) => ( +
setIsPaused(true)} + onMouseLeave={() => setIsPaused(false)} + className={`rounded-lg hover:shadow-xl p-4 flex flex-col justify-between h-full transition-shadow duration-300 transform hover:scale-105 shadow-[0_2px_10px_rgba(0,0,0,0.3)] ${theme ? 'bg-white' : 'bg-gray-800'}`} + > +
+
+ {review.name} +
+

{review.name}

+

{review.role}

+
+
+

"{review.quote}"

+

{review.review}

+
+
+ {[...Array(5)].map((_, i) => ( + + ))} +
+
+); + + + +const Testimonial = ({ theme }) => { + const [currentIndex, setCurrentIndex] = useState(1); // Start at the first real review + const [isTransitioning, setIsTransitioning] = useState(true); + const isSmallScreen = useMediaQuery({ query: '(max-width: 640px)' }); + const isLargeScreen = useMediaQuery({ query: '(min-width: 641px)' }); + const reviewWidth = isSmallScreen ? 100 : 100 / 3; + const [isPaused, setIsPaused] = useState(false); + + // Separate out auto-scroll to respect `isPaused` + const autoNextReview = useCallback(() => { + if (!isPaused) { + setIsTransitioning(true); + setCurrentIndex((prevIndex) => prevIndex + 1); + } + }, [isPaused]); + + const nextReview = () => { + setIsTransitioning(true); + setCurrentIndex((prevIndex) => prevIndex + 1); + }; + + const prevReview = () => { + setIsTransitioning(true); + setCurrentIndex((prevIndex) => prevIndex - 1); + }; + + useEffect(() => { + if (currentIndex === infiniteReviews.length - 2) { + setTimeout(() => { + setIsTransitioning(false); + setCurrentIndex(1); + }, 4000); + } else if (currentIndex === 0) { + setTimeout(() => { + setIsTransitioning(false); + setCurrentIndex(infiniteReviews.length - 2); + }, 500); + } + }, [currentIndex]); + + useEffect(() => { + const timer = setInterval(autoNextReview, 4000); + return () => clearInterval(timer); + }, [autoNextReview]); + + return ( +
+
+

+ What Our Community Says +

+
+
+
+ {infiniteReviews.map((review, index) => ( +
+ +
+ ))} +
+
+ {currentIndex !== 1 && ( + + )} + {currentIndex !== infiniteReviews.length - 2 && ( + + )} +
+
+ {infiniteReviews + .slice(1, isLargeScreen ? infiniteReviews.length - 1 : infiniteReviews.length - 1) + .map((_, index) => ( +
setCurrentIndex(index + 1)} + className={`w-2 h-2 mx-1 rounded-full cursor-pointer transition-colors duration-200 ${index + 1 === currentIndex ? 'bg-red-600' : 'bg-gray-300'}`} + /> + ))} +
+
+
+ ); +}; + + + + +export default Testimonial; \ No newline at end of file diff --git a/website3.0/pages/HomePage.js b/website3.0/pages/HomePage.js index 3d837410..7a7b23ae 100644 --- a/website3.0/pages/HomePage.js +++ b/website3.0/pages/HomePage.js @@ -5,7 +5,7 @@ import Lodaernewletter from "../components/Loadernewletter"; import Spline from "@splinetool/react-spline"; //Importing FontAwesome for Icons import Image from 'next/image'; - +import Testimonial from "@components/Testmonial"; import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; import { faStar, @@ -739,6 +739,12 @@ async function func() { + {/*Section: Testimonial*/} +
+ + +
); } From caca4fb480c6814135f0edb1119e93b6b49e1250 Mon Sep 17 00:00:00 2001 From: Ikki Date: Tue, 5 Nov 2024 23:04:38 +0530 Subject: [PATCH 2/4] adding-dependencies --- website3.0/package.json | 3 +++ 1 file changed, 3 insertions(+) diff --git a/website3.0/package.json b/website3.0/package.json index 72c073c9..37759253 100644 --- a/website3.0/package.json +++ b/website3.0/package.json @@ -19,6 +19,7 @@ "@splidejs/react-splide": "^0.7.12", "@splidejs/splide-extension-auto-scroll": "^0.5.3", "@splinetool/react-spline": "^4.0.0", + "@splinetool/runtime": "^1.9.36", "@syncfusion/ej2-react-charts": "^26.2.5", "@tsparticles/all": "^3.4.0", "@tsparticles/react": "^3.0.0", @@ -33,6 +34,7 @@ "email-verifier": "^0.4.1", "framer-motion": "^11.3.6", "jsonwebtoken": "^9.0.2", + "lucide-react": "^0.454.0", "mongodb": "^6.7.0", "mongoose": "^8.4.4", "next": "14.2.12", @@ -48,6 +50,7 @@ "react-loading-skeleton": "^3.4.0", "react-modal": "^3.16.1", "react-quill": "^2.0.0", + "react-responsive": "^10.0.0", "react-share": "^5.1.0", "react-tooltip": "^5.27.1", "rellax": "^1.12.1", From 5d3fa783e40cc58e9db37e3c419c660155442a1a Mon Sep 17 00:00:00 2001 From: Ikki Date: Wed, 6 Nov 2024 10:12:23 +0530 Subject: [PATCH 3/4] testimonial-design-fix --- website3.0/components/Testmonial.jsx | 4 ++-- website3.0/pages/HomePage.js | 5 ++++- 2 files changed, 6 insertions(+), 3 deletions(-) diff --git a/website3.0/components/Testmonial.jsx b/website3.0/components/Testmonial.jsx index 84cb964b..3536aa4a 100644 --- a/website3.0/components/Testmonial.jsx +++ b/website3.0/components/Testmonial.jsx @@ -129,11 +129,11 @@ const Testimonial = ({ theme }) => { }, [autoNextReview]); return ( -
+

+ } mb-5 text-center text-4xl max-sm:text-4xl max-sm:mt-20 font-semibold`}> What Our Community Says

diff --git a/website3.0/pages/HomePage.js b/website3.0/pages/HomePage.js index 7a7b23ae..9f263bf4 100644 --- a/website3.0/pages/HomePage.js +++ b/website3.0/pages/HomePage.js @@ -740,11 +740,14 @@ async function func() {
{/*Section: Testimonial*/} +
+
+ } rounded-3xl flex w-[90%] mx-auto shadow-lg max-[900px]:flex-col items-center align-center`}>
+
); } From 0eef85e733687bf0d054647660dc47c39603f502 Mon Sep 17 00:00:00 2001 From: Ikki Date: Wed, 6 Nov 2024 10:15:48 +0530 Subject: [PATCH 4/4] testimonial-margin-added --- website3.0/pages/HomePage.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/website3.0/pages/HomePage.js b/website3.0/pages/HomePage.js index 9f263bf4..c1c65c7e 100644 --- a/website3.0/pages/HomePage.js +++ b/website3.0/pages/HomePage.js @@ -743,7 +743,7 @@ async function func() {
+ } rounded-3xl mb-10 flex w-[90%] mx-auto shadow-lg max-[900px]:flex-col items-center align-center`}>