web/components/landingComponents/Feedbacks.jsx

49 lines
1.4 KiB
JavaScript

import React 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";
const FeedbackCard = ({ index, testimonial, title }) => (
<motion.div
variants={fadeIn("", "spring", index * 0.5, 0.75)}
className="bg-[#35685952] p-10 rounded-3xl w-full"
>
<h3 className="text-white text-[24px] font-bold">{title}</h3>
<div className="mt-3">
<p className="text-white tracking-wider text-[16px] font-light ">
{testimonial}
</p>
</div>
</motion.div>
);
const Feedbacks = () => {
return (
<div className={` rounded-[20px]`}>
<div className={`bg-tertiary rounded-2xl ]`}>
<motion.div variants={textVariant()}>
<h2
className={
"text-white font-black md:text-[60px] sm:text-[50px] xs:text-[40px] text-[30px]"
}
>
Platform Description.
</h2>
</motion.div>
</div>
<div
className={` pb-14 sm:py-16 grid lg:grid-cols-2 xs:grid-cols-1 gap-7`}
>
{testimonials.map((testimonial, index) => (
<FeedbackCard key={testimonial.name} index={index} {...testimonial} />
))}
</div>
</div>
);
};
export default SectionWrapper(Feedbacks, "platform");