129 lines
3.8 KiB
JavaScript
129 lines
3.8 KiB
JavaScript
import React from "react";
|
|
import Image from "next/image";
|
|
|
|
const ProductGallery = () => {
|
|
const galleryImg = [
|
|
{
|
|
id: 1,
|
|
src: "/gallery1.jpg",
|
|
alt: "Gallery image 1",
|
|
text: "All Rudraksha",
|
|
},
|
|
{
|
|
id: 2,
|
|
src: "/gallery3.jpg",
|
|
alt: "Gallery image 2",
|
|
text: "Siddha Mala",
|
|
},
|
|
{
|
|
id: 3,
|
|
src: "/gallery2.jpg",
|
|
alt: "Gallery image 3",
|
|
text: "Murti & Yantra",
|
|
},
|
|
{
|
|
id: 4,
|
|
src: "/gallery4.png",
|
|
alt: "Gallery image 4",
|
|
text: "Rudraksha Combination",
|
|
},
|
|
{ id: 5, src: "/gallery5.webp", alt: "Gallery image 5", text: "Japa Mala" },
|
|
{
|
|
id: 6,
|
|
src: "/gallery6.jpg",
|
|
alt: "Gallery image 6",
|
|
text: "Kantha Mala",
|
|
},
|
|
{ id: 7, src: "/gallery7.webp", alt: "Gallery image 7", text: "Shaligram" },
|
|
];
|
|
|
|
const ImageWithOverlay = ({ src, alt, text, className }) => (
|
|
<div className={`relative overflow-hidden shadow-lg group ${className}`}>
|
|
<Image
|
|
src={src}
|
|
alt={alt}
|
|
layout="fill"
|
|
objectFit="cover"
|
|
className="transition-transform duration-300 group-hover:scale-110 "
|
|
/>
|
|
<div className="absolute inset-0 bg-black bg-opacity-50 opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex items-center justify-center">
|
|
<p className="text-white text-lg font-semibold">{text}</p>
|
|
</div>
|
|
</div>
|
|
);
|
|
|
|
return (
|
|
<div className="min-h-screen bg-gray-100 py-12 px-4 sm:px-6 lg:px-8">
|
|
<div className="max-w-8xl mx-auto">
|
|
<div className="text-center mb-12">
|
|
<h1 className="font-serif text-5xl text-slate-800 mb-4">
|
|
Product Categories
|
|
</h1>
|
|
<h2 className="text-xl text-slate-700">
|
|
Discover the Essence: Explore our Diverse Product Categories
|
|
</h2>
|
|
</div>
|
|
<div className="grid grid-cols-1 lg:grid-cols-3 gap-3">
|
|
{/* Left column */}
|
|
<div className="grid grid-rows-2 gap-3">
|
|
<ImageWithOverlay
|
|
src={galleryImg[2].src}
|
|
alt={galleryImg[2].alt}
|
|
text={galleryImg[2].text}
|
|
className="h-[300px] cursor-pointer"
|
|
/>
|
|
<div className="grid grid-cols-2 gap-3 ">
|
|
<ImageWithOverlay
|
|
src={galleryImg[3].src}
|
|
alt={galleryImg[3].alt}
|
|
text={galleryImg[3].text}
|
|
className="h-[200px] cursor-pointer"
|
|
/>
|
|
<ImageWithOverlay
|
|
src={galleryImg[4].src}
|
|
alt={galleryImg[4].alt}
|
|
text={galleryImg[4].text}
|
|
className="h-[200px]"
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Middle column */}
|
|
<ImageWithOverlay
|
|
src={galleryImg[1].src}
|
|
alt={galleryImg[1].alt}
|
|
text={galleryImg[1].text}
|
|
className="h-[520px]"
|
|
/>
|
|
|
|
{/* Right column */}
|
|
<div className="grid grid-rows-2 gap-3">
|
|
<ImageWithOverlay
|
|
src={galleryImg[0].src}
|
|
alt={galleryImg[0].alt}
|
|
text={galleryImg[0].text}
|
|
className="h-[300px]"
|
|
/>
|
|
<div className="grid grid-cols-2 gap-3">
|
|
<ImageWithOverlay
|
|
src={galleryImg[5].src}
|
|
alt={galleryImg[5].alt}
|
|
text={galleryImg[5].text}
|
|
className="h-[200px]"
|
|
/>
|
|
<ImageWithOverlay
|
|
src={galleryImg[6].src}
|
|
alt={galleryImg[6].alt}
|
|
text={galleryImg[6].text}
|
|
className="h-[200px]"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default ProductGallery;
|