Testimonials - Copy this React, Tailwind Component to your project

import-React,-{-useState,-useEffect-}-from-"react";-import-{-motion,-useAnimation,-useViewportScroll-}-from-"framer-motion";-import-{-FiMenu,-FiX-}-from-"react-icons/fi";-import-{-TypeAnimation-}-from-"react-type-animation";-const-LearningPlatform-=-()-=>-{-const-[isOpen,-setIsOpen]-=-useState(false);-const-[scrollY,-setScrollY]-=-useState(0);-const-controls-=-useAnimation();-const-{-scrollYProgress-}-=-useViewportScroll();-useEffect(()-=>-{-const-handleScroll-=-()-=>-{-setScrollY(window.scrollY);-};-window.addEventListener("scroll",-handleScroll);-return-()-=>-window.removeEventListener("scroll",-handleScroll);-},-[]);-//-Added-animation-variants-const-pageVariants-=-{-initial:-{-opacity:-0,-y:-20-},-animate:-{-opacity:-1,-y:-0,-transition:-{-duration:-0.8,-staggerChildren:-0.2-}-},-exit:-{-opacity:-0,-y:--20-}-};-const-floatingVariants-=-{-animate:-{-y:-[0,--20,-0],-transition:-{-duration:-4,-repeat:-Infinity,-ease:-"easeInOut"-}-}-};-const-navLinks-=-[-{-title:-"Home",-href:-"#"-},-{-title:-"Features",-href:-"#features"-},-{-title:-"Courses",-href:-"#courses"-},-{-title:-"About",-href:-"#about"-},-];-const-features-=-[-{-title:-"Interactive-Learning",-description:-"Engage-with-dynamic-content-and-real-time-feedback",-image:-"https://images.unsplash.com/photo-1516321318423-f06f85e504b3"-},-{-title:-"Expert-Mentorship",-description:-"Learn-from-industry-professionals",-image:-"https://images.unsplash.com/photo-1531482615713-2afd69097998"-},-{-title:-"Project-Based-Learning",-description:-"Build-real-world-projects",-image:-"https://images.unsplash.com/photo-1517694712202-14dd9538aa97"-}-];-return-(-<motion.div-initial="initial"-animate="animate"-exit="exit"-variants={pageVariants}-className="min-h-screen-bg-gradient-to-br-from-gray-900-via-purple-900-to-violet-900-text-white-overflow-hidden"->-{/*-Progress-Bar-*/}-<motion.div-className="fixed-top-0-left-0-right-0-h-1-bg-purple-500-z-50"-style={{-scaleX:-scrollYProgress-}}-/>-{/*-Navbar-*/}-<nav-className="fixed-w-full-z-50-bg-opacity-20-bg-black-backdrop-blur-lg">-<div-className="max-w-7xl-mx-auto-px-4-sm:px-6-lg:px-8">-<div-className="flex-items-center-justify-between-h-16">-<motion.div-initial={{-opacity:-0,-x:--20-}}-animate={{-opacity:-1,-x:-0-}}-className="flex-shrink-0"->-<h1-className="text-2xl-font-bold-bg-gradient-to-r-from-purple-400-to-pink-600-bg-clip-text-text-transparent">-EduTech-</h1>-</motion.div>-<div-className="hidden-md:block">-<div-className="ml-10-flex-items-baseline-space-x-4">-{navLinks.map((link,-index)-=>-(-<motion.a-key={index}-href={link.href}-className="px-3-py-2-rounded-md-text-sm-font-medium-hover:bg-purple-500-hover:bg-opacity-20-transition-all-duration-300"-whileHover={{-scale:-1.05,-rotate:-[0,-2,--2,-0]-}}-whileTap={{-scale:-0.95-}}->-{link.title}-</motion.a>-))}-</div>-</div>-<div-className="md:hidden">-<motion.button-onClick={()-=>-setIsOpen(!isOpen)}-className="p-2-rounded-md-hover:bg-purple-500-hover:bg-opacity-20-transition-all-duration-300"-whileHover={{-rotate:-180-}}-transition={{-duration:-0.3-}}->-{isOpen-?-<FiX-size={24}-/>-:-<FiMenu-size={24}-/>}-</motion.button>-</div>-</div>-</div>-</nav>-{/*-Hero-Section-*/}-<motion.div-className="relative-min-h-screen-flex-items-center-justify-center-px-4-sm:px-6-lg:px-8"-style={{-backgroundImage:-"radial-gradient(circle-at-50%-50%,-rgba(124,-58,-237,-0.1)-0%,-rgba(0,-0,-0,-0)-50%)"-}}->-<motion.div-className="absolute-inset-0-overflow-hidden"-animate={{-opacity:-[0.05,-0.1,-0.05],-}}-transition={{-duration:-5,-repeat:-Infinity,-ease:-"easeInOut"-}}->-<div-className="absolute-inset-0-bg-[url('https://images.unsplash.com/photo-1517694712202-14dd9538aa97')]-bg-cover-bg-center-opacity-10"-/>-</motion.div>-<div-className="relative-max-w-7xl-mx-auto-text-center">-<motion.div-variants={floatingVariants}-animate="animate"->-<h2-className="text-4xl-sm:text-6xl-font-bold-mb-8">-<TypeAnimation-sequence={[-"Learn.-Create.-Innovate.",-2000,-"Master-New-Skills.",-2000,-"Build-Your-Future.",-2000-]}-wrapper="span"-repeat={Infinity}-className="bg-gradient-to-r-from-purple-400-to-pink-600-bg-clip-text-text-transparent"-/>-</h2>-<motion.p-className="text-xl-mb-12-text-gray-300"-animate={{-scale:-[1,-1.02,-1],-opacity:-[0.8,-1,-0.8]-}}-transition={{-duration:-3,-repeat:-Infinity,-ease:-"easeInOut"-}}->-Transform-your-learning-experience-with-cutting-edge-technology-</motion.p>-<motion.button-whileHover={{-scale:-1.05,-boxShadow:-"0-0-25px-rgba(168,-85,-247,-0.5)"-}}-whileTap={{-scale:-0.95-}}-className="px-8-py-4-bg-gradient-to-r-from-purple-500-to-pink-500-rounded-full-font-bold-text-lg-hover:shadow-lg-hover:shadow-purple-500/50-transition-all-duration-300"->-Get-Started-</motion.button>-</motion.div>-</div>-</motion.div>-{/*-Features-Section-*/}-<section-id="features"-className="py-20-px-4-sm:px-6-lg:px-8">-<div-className="max-w-7xl-mx-auto">-<motion.h3-initial={{-opacity:-0-}}-whileInView={{-opacity:-1-}}-className="text-3xl-font-bold-text-center-mb-16"->-Why-Choose-Us-</motion.h3>-<div-className="grid-grid-cols-1-md:grid-cols-3-gap-8">-{features.map((feature,-index)-=>-(-<motion.div-key={index}-initial={{-opacity:-0,-y:-50-}}-whileInView={{-opacity:-1,-y:-0-}}-whileHover={{-scale:-1.05,-rotateY:-10,-boxShadow:-"0-0-25px-rgba(168,-85,-247,-0.2)"-}}-transition={{-delay:-index-*-0.2,-duration:-0.3-}}-className="bg-white-bg-opacity-5-backdrop-blur-lg-rounded-2xl-p-8-transition-all-duration-300"->-<motion.div-className="h-48-mb-6-overflow-hidden-rounded-xl"-whileHover={{-scale:-1.1-}}-transition={{-duration:-0.3-}}->-<img-src={feature.image}-alt={feature.title}-className="w-full-h-full-object-cover"-/>-</motion.div>-<h4-className="text-xl-font-bold-mb-4">{feature.title}</h4>-<p-className="text-gray-400">{feature.description}</p>-</motion.div>-))}-</div>-</div>-</section>-</motion.div>-);-};-export-default-LearningPlatform;-add-images-in-hero-section-also-add-one-more-section-related-learners-experience