117 lines
3.7 KiB
JavaScript
117 lines
3.7 KiB
JavaScript
"use clients";
|
||
import React, { useEffect, useState } from "react";
|
||
import { motion } from "framer-motion";
|
||
|
||
import { SectionWrapper } from "src/hoc";
|
||
import { fadeIn, textVariant } from "src/utils/motion";
|
||
import { styles } from "src/style";
|
||
import { testimonials } from "src/constans/";
|
||
import Image from "next/image";
|
||
import phi from "@img/adjustw.png";
|
||
import phi1 from "../../src/assets/phi1.png";
|
||
import phi2 from "../../src/assets/phi2.png";
|
||
import phi3 from "../../src/assets/phi3.png";
|
||
|
||
const Feedbacks = () => {
|
||
const [activeIndex, setActiveIndex] = useState(0);
|
||
|
||
useEffect(() => {
|
||
const interval = setInterval(() => {
|
||
setActiveIndex((prevIndex) =>
|
||
prevIndex === testimonials.length - 1 ? 0 : prevIndex + 1
|
||
);
|
||
}, 6000); // 5 seconds interval
|
||
|
||
return () => clearInterval(interval); // Cleanup interval on component unmount
|
||
}, []);
|
||
|
||
console.log(activeIndex);
|
||
return (
|
||
<div className={` rounded-[20px]`}>
|
||
<div className={`bg-tertiary rounded-2xl ]`}>
|
||
<motion.div variants={textVariant()}>
|
||
<div className="flex">
|
||
<div className="w-[120px] mt-[90px]">
|
||
<Image src={phi} />
|
||
</div>
|
||
<span className="text-primary-300 text-[150px] relative top-[60px] !h-fit font-bold">
|
||
HI
|
||
</span>
|
||
</div>
|
||
|
||
<p className="mb-0 text-white">
|
||
{" "}
|
||
Coffee taste always matters the most. With PHI, it will always be
|
||
perfect. Phi means the golden ratio. If you brew your coffee with
|
||
the golden ratio, it will always taste good. In the Phi section,
|
||
there are three boxes that the barista on shift should fill. These
|
||
are the main elements for adjusting the daily coffee recipe:
|
||
</p>
|
||
</motion.div>
|
||
</div>
|
||
<div className={` pb-14 sm:py-16 grid lg:grid-cols-2 xs:grid-cols-1 `}>
|
||
<div>
|
||
{testimonials.map((e, index) => (
|
||
<motion.div
|
||
key={index}
|
||
variants={fadeIn("", "spring", index * 0.5, 0.75)}
|
||
className={` p-5 rounded-3xl w-full tr03 cursor-pointer ${
|
||
activeIndex == index ? "bg-[#35685952]" : ""
|
||
}`}
|
||
onClick={() => setActiveIndex(index)}
|
||
>
|
||
<h3
|
||
className={`text-white font-bold tr03 ${
|
||
activeIndex == index ? "text-[24px]" : "opacity-50"
|
||
}`}
|
||
>
|
||
{e.title}
|
||
</h3>
|
||
|
||
{activeIndex == index && (
|
||
<div className="mt-3">
|
||
<p className="text-white tracking-wider text-[16px] font-light">
|
||
{e.testimonial}
|
||
</p>
|
||
</div>
|
||
)}
|
||
</motion.div>
|
||
))}
|
||
</div>
|
||
|
||
<motion.div variants={fadeIn("", "spring", 1 * 0.5, 0.75)}>
|
||
<Image
|
||
className="tr03"
|
||
src={
|
||
activeIndex == 0
|
||
? phi1
|
||
: activeIndex == 1
|
||
? phi2
|
||
: activeIndex == 2
|
||
? phi3
|
||
: phi3
|
||
}
|
||
/>
|
||
</motion.div>
|
||
{/*
|
||
<div>
|
||
<Image src={phi2} />
|
||
</div>
|
||
|
||
<div>
|
||
<Image src={phi3} />
|
||
</div> */}
|
||
</div>
|
||
|
||
<p className="mb-0 text-white">
|
||
{" "}
|
||
Your barista enters the daily recipe, which will be recorded in your
|
||
database. You can view your adjustment chart see what’s happening in
|
||
your bar, and check the quality of your coffee serving in your store.
|
||
</p>
|
||
</div>
|
||
);
|
||
};
|
||
|
||
export default SectionWrapper(Feedbacks, "platform");
|