Onboarding Carousel - Copy this React, Tailwind Component to your project

import { locations } from "@/Data/Home-Section2-Icons"; import Image from "next/image"; import React from "react"; import ShadowCircle from "../ui/Shadow-Circle"; const BottomSection = () => { return ( <div className="flex flex-col items-center py-10 text-white w-full justify-center space-y-8"> {/* Title Section */} <div> </div> <div className="space-y-8"> <div className="flex flex-row justify-center items-center space-x-4"> {/* Shadow */} <ShadowCircle/> {/* Text */} <div className="text-white text-[15px] font-bold font-['Blauer Nue'] leading-[30px]">What we do</div> </div> {/* Heading */} <h2 className="text-center text-white text-[45px] font-normal font-['Blauer Nue']"> Crafting Digital Success <br /> {/* Green Heading */} <span className="mix-blend-exclusion text-[#3be29a] text-[60px] font-normal font-['Blauer Nue'] uppercase">ACROSS CONTINENTS</span> </h2> {/* Para */} <p className="text-center text-white text-[22px] font-normal font-['Blauer Nue']"> Identity, Communications, and Experiences for brands with a 2.0 mindset </p> </div> {/* Locations Icons Grid */} <div className="grid grid-cols-2 md:grid-cols-5 w-[100%]"> {locations.map((location, index) => ( <div key={index} className="flex flex-col justify-center items-center text-center transition transform hover:scale-105 border-r-2 last:border-none" > {/* Icon */} <div className="relative w-[100px] h-[100px] md:w-[150px] md:h-[150px]"> <Image src={location.icon} alt={location.city} fill className="object-contain" /> </div> {/* City Name */} <p className="font-semibold text-lg mt-3">{location.city}</p> </div> ))} </div> </div> ); }; export default BottomSection; I want that div i have shoed this will come fron side and on hove the flipcart effectwill apply and on the back ide a paragragh will show and dont distub my code and layouts