Default Component - Copy this React, Tailwind Component to your project

import React, { useState, useEffect } from "react"; import { MdOutlineSportsSoccer } from "react-icons/md"; import { LuTreePine } from "react-icons/lu"; import { GrTechnology } from "react-icons/gr"; import { IoGameController } from "react-icons/io5"; import { MdOutlineSmartToy } from "react-icons/md"; import { TbRibbonHealth } from "react-icons/tb"; import { LuTentTree } from "react-icons/lu"; import { FaHandHoldingHeart } from "react-icons/fa6"; import { IoIosArrowForward } from "react-icons/io"; import HangingCard from "../HangingCard/HangingCard"; export default function EventHero() { const [activeSlide, setActiveSlide] = useState(0); const events = [ { id: 1, title: "Mid night party woooh!!", location: "Boardroom, Kingston", price: "$2000", date: "14th Feb, 2025", time: "9:30 pm onwards", image: "https://images.unsplash.com/photo-1492684223066-81342ee5ff30?fm=jpg&q=60&w=3000&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8Mnx8ZXZlbnR8ZW58MHx8MHx8fDA%3D", }, { id: 2, title: "Music Concert Night", location: "Grand Arena, NYC", price: "$2500", date: "20th Feb, 2025", time: "8:00 pm onwards", image: "https://cdn.pixabay.com/photo/2016/11/23/15/48/audience-1853662_640.jpg", }, { id: 3, title: "DJ Party Club Night", location: "The Club, LA", price: "$1800", date: "15th Feb, 2025", time: "10:00 pm onwards", image: "https://images.pexels.com/photos/2263436/pexels-photo-2263436.jpeg?cs=srgb&dl=pexels-teddy-2263436.jpg&fm=jpg", }, { id: 4, title: "DJ Party Club Night", location: "The Club, LA", price: "$1800", date: "25th Feb, 2025", time: "10:00 pm onwards", image: "https://images.pexels.com/photos/2263436/pexels-photo-2263436.jpeg?cs=srgb&dl=pexels-teddy-2263436.jpg&fm=jpg", }, { id: 5, title: "DJ Party Club Night", location: "The Club, LA", price: "$1800", date: "21th Feb, 2025", time: "10:00 pm onwards", image: "https://images.pexels.com/photos/2263436/pexels-photo-2263436.jpeg?cs=srgb&dl=pexels-teddy-2263436.jpg&fm=jpg", }, ]; const categories = [ { id: 1, Icon: LuTreePine, name: "Travel and Outdoor", color: "text-green-600", }, { id: 2, Icon: LuTentTree, name: "Social Activities", color: "text-rose-600", }, { Icon: FaHandHoldingHeart, name: "Hobbies and Passions", color: "text-orange-400", }, { id: 3, Icon: MdOutlineSportsSoccer, name: "Sports and Fitness", color: "text-sky-500", }, { id: 4, Icon: TbRibbonHealth, name: "Health and Wellbeing", color: "text-emerald-600", }, { id: 5, Icon: GrTechnology, name: "Technology", color: "text-purple-600", }, { id: 6, Icon: MdOutlineSmartToy, name: "Art and Culture", color: "text-amber-500", }, { id: 7, Icon: IoGameController, name: "Games", color: "text-teal-600", }, ] useEffect(() => { const interval = setInterval(() => { setActiveSlide((prev) => (prev + 1) % events.length); }, 3000); return () => clearInterval(interval); }, [events.length]); return ( <div className="px-4 pt-2 w-full container mx-auto py-5"> {/* Trending Events */} <div className="flex items-center justify-between mt-3"> <h3 className="text-white text-xl font-semibold flex items-center gap-2"> Trending Events <span className="text-lg">🔥</span> </h3> <a href="#" className="text-white text-xl font-semibold flex items-center"> View all <span className="hover:translate-x-1.5 duration-200 ease-in"><IoIosArrowForward /></span> </a> </div> {/* Event Slider */} <div className="relative mt-5 overflow-hidden rounded-2xl Z-20"> <div className="relative lg:h-[600px] flex transition-transform duration-700 ease-in-out" style={{ transform: `translateX(-${activeSlide * 100}%)` }} > {events.map((event) => ( <div key={event.id} className="w-full flex-shrink-0 relative"> <img src={event.image} alt={event.title} className="w-full object-cover" /> <div className="absolute bottom-0 left-0 right-0 p-5 px-7 bg-black/50 backdrop-blur-lg rounded-2xl z-20"> <div className="flex items-center justify-between text-white/80 text-sm"> <div className="text-lg gap-2"> <h4 className="text-white text-xl font-semibold ">{event.title}</h4> {event.location} <span className="text-amber-400 font-bold">•</span> {event.price}</div> <div className="flex flex-col justify-center items-center mb-3 gap-3"> <div><h1 className="text-lg backdrop-blur-sm bg-gray-600 p-2 font-semibold lg:px-7 rounded-2xl">{event.date}</h1></div> <div> <h1 className="text-lg backdrop-blur-sm bg-gray-500 p-2 lg:px-4 rounded-2xl">{event.time}</h1></div> </div> </div> </div> <div className=" absolute px-4 py-4 container mx-auto"> { categories.map((card)=>( <div className="absolute grid grid-cols-2 md:grid-cols-4 lg:grid-cols-8 gap-4"> <div className="flex flex-col items-center justify-center p-4 bg-amber-500 rounded-lg hover:bg-amber-400 transition-colors cursor-pointer" > {/* <Icon className={`w-8 h-8 mb-2 ${color}`} /> */} <span className="text-xl text-white text-center font-medium">{card.name}</span> </div> </div> )) } </div> </div> ))} </div> </div> {/* Slider Dots */} <div className="flex justify-center gap-2 mt-4"> {events.map((_, index) => ( <div key={index} className={`${index === activeSlide ? "w-7 h-3 bg-yellow-400 rounded-full transition-all duration-300" : "w-3 h-3 bg-yellow-400 rounded-full transition-all duration-300" }`} onClick={() => setActiveSlide(index)} ></div> ))} </div> </div> ); } ...no need thing i am try so much .....can u fix it.......