Achievement Timeline - Copy this React, Tailwind Component to your project
"use client"; import Image from "next/image"; import { useTranslation } from "react-i18next"; import { Swiper, SwiperSlide } from "swiper/react"; import { Autoplay, Navigation } from "swiper/modules"; import "swiper/css"; import "swiper/css/navigation"; import { LuArrowLeft, LuArrowRight } from "react-icons/lu"; const partners = [ { category: "educational", logos: [ { src: "/partners/teachme.png", alt: "TeachMe" }, { src: "/partners/braintrain.png", alt: "BrainTrain" }, { src: "/partners/abajim.png", alt: "Abajim" }, ], }, { category: "associations", logos: [{ src: "/partners/matar.png", alt: "Matar Association" }], }, { category: "technology", logos: [ { src: "/partners/waialys.png", alt: "Waialys" }, { src: "/partners/aws.png", alt: "AWS" }, { src: "/partners/openai.png", alt: "OpenAI" }, { src: "/partners/elevenlabs.png", alt: "ElevenLabs" }, ], }, { category: "incubation", logos: [ { src: "/partners/arena.png", alt: "Arena Challenges" }, { src: "/partners/moovjee.png", alt: "Moovjee" }, { src: "/partners/ost.png", alt: "Open Startup Tunisia" }, { src: "/partners/sparkitup.png", alt: "Spark it Up" }, { src: "/partners/revup.png", alt: "Revup" }, { src: "/partners/tech4impact.png", alt: "Tech4Impact" }, ], }, ]; const PartnersCarousel = () => { const { t } = useTranslation("home"); return ( <section className="py-16 bg-gradient-to-b from-[#f9faff] to-[#edeffa] dark:from-[#0D47A1] dark:to-[#1565C0]"> <div className="container mx-auto px-6"> <h2 className="text-3xl sm:text-4xl font-bold text-[#002366] dark:text-[#FFD700] text-center font-poppins mb-12"> {t("partners.title")} </h2> <div className="relative group"> <Swiper modules={[Autoplay, Navigation]} spaceBetween={40} slidesPerView={3} loop autoplay={{ delay: 2500, disableOnInteraction: false }} navigation={{ nextEl: ".swiper-button-next", prevEl: ".swiper-button-prev", }} breakpoints={{ 320: { slidesPerView: 2 }, 640: { slidesPerView: 3 }, 1024: { slidesPerView: 4 }, }} className="py-4" > {partners.flatMap((partner) => partner.logos.map((logo, idx) => ( <SwiperSlide key={`${partner.category}-${idx}`} className="flex items-center justify-center" > <div className="flex justify-center items-center h-24 opacity-80 hover:opacity-100 transition-opacity p-4"> <Image src={logo.src} alt={logo.alt} width={180} height={80} className="object-contain h-full w-auto grayscale hover:grayscale-0 transition-all duration-300" /> </div> </SwiperSlide> )) )} </Swiper> {/* Minimalist Navigation Icons */} <button className="swiper-button-prev absolute left-0 top-1/2 -translate-y-1/2 z-10 flex items-center justify-center w-10 h-10 rounded-full bg-white dark:bg-[#002366] shadow-md transition-all opacity-0 group-hover:opacity-100 hover:shadow-lg"> <LuArrowLeft className="text-xl text-[#002366] dark:text-[#FFD700]" /> </button> <button className="swiper-button-next absolute right-0 top-1/2 -translate-y-1/2 z-10 flex items-center justify-center w-10 h-10 rounded-full bg-white dark:bg-[#002366] shadow-md transition-all opacity-0 group-hover:opacity-100 hover:shadow-lg"> <LuArrowRight className="text-xl text-[#002366] dark:text-[#FFD700]" /> </button> </div> </div> </section> ); }; export default PartnersCarousel; Please correct arrows and make them minimalist
