chore: setup project for production

components/product-category/ProductGallery.jsx

@@ -0,0 +1,128 @@
+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;