import Image from "next/image"; import React from "react"; const images = [ { src: "https://images.pexels.com/photos/15286/pexels-photo.jpg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2", alt: "Image 1", className: "col-span-2 row-span-2", }, { src: "https://images.pexels.com/photos/417173/pexels-photo-417173.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2", alt: "Image 2", className: "col-span-1 row-span-1", }, { src: "https://images.pexels.com/photos/672630/pexels-photo-672630.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2", alt: "Image 3", className: "col-span-1 row-span-2", }, { src: "https://images.pexels.com/photos/19036833/pexels-photo-19036833/free-photo-of-view-of-autumnal-trees-and-a-rocky-mountain.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2", alt: "Image 4", className: "col-span-1 row-span-1", }, { src: "https://images.pexels.com/photos/1563356/pexels-photo-1563356.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2", alt: "Image 6", className: "col-span-1 row-span-1", }, { src: "https://images.pexels.com/photos/813872/pexels-photo-813872.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2", alt: "Image 7", className: "col-span-1 row-span-1", }, { src: "https://images.pexels.com/photos/1026234/pexels-photo-1026234.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2", alt: "Image 8", className: "col-span-1 row-span-1", }, { src: "https://images.pexels.com/photos/189215/pexels-photo-189215.jpeg?auto=compress&cs=tinysrgb&w=600", alt: "Image 9", className: "col-span-1 row-span-1", }, ]; export default function ImageGallery() { return ( <div className="columns-1 md:columns-2 xl:columns-3"> {images.map((image, index) => ( <div key={index} className={`mb-4 ${image.className}`}> <Image className="h-auto max-w-full rounded-md transition-all duration-300 ease-in-out filter grayscale hover:grayscale-0" src={image.src} alt={image.alt} width={1260} height={750} /> </div> ))} </div> ); }