import React from "react"; import nike1 from "../assets/nike-1.png"; import nike2 from "../assets/nike-2.png"; import nike3 from "../assets/nike-3.png"; import nike4 from "../assets/nike-4.png"; import { FaBagShopping } from "react-icons/fa6"; const images = [nike1, nike2, nike3, nike4, nike1, nike2, nike3, nike4]; const shoedata = [ { title: "Nike Air Max 1 Premium", cost: "₹ 14, 995.00" }, { title: "Nike Air Max Plus 3", cost: "₹ 17, 495.00" }, { title: "Luka 2 PF", cost: "₹ 11, 895.00" }, { title: "Nike Air Max Dn", cost: "₹ 13, 995.00" }, { title: "Nike Air Max 1 Premium", cost: "₹ 14, 995.00" }, { title: "Nike Air Max Plus 3", cost: "₹ 17, 495.00" }, { title: "Luka 2 PF", cost: "₹ 11, 895.00" }, { title: "Nike Air Max Dn", cost: "₹ 13, 995.00" }, ]; const BentoGrid = () => { return (

{[...Array(8)].map((_, i) => (

{ e.currentTarget.querySelector(".hover-text").style.opacity = 1; e.currentTarget.querySelector("img").style.opacity = 0.7; e.currentTarget.querySelector("img").style.transform = "scale(1.1)"; e.currentTarget.querySelector("img").style.transitionDuration = "300ms"; }} onMouseLeave={(e) => { e.currentTarget.querySelector(".hover-text").style.opacity = 0; e.currentTarget.querySelector("img").style.opacity = 1; e.currentTarget.querySelector("img").style.transform = "scale(1.0)"; }} > {`nike${i

{shoedata[i].title}

))}

); }; export default BentoGrid;

1. The One For Bento Grids