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;

components/product-category/SecondGallery.jsx

@@ -0,0 +1,53 @@
+import React from "react";
+import Image from "next/image";
+
+const SecondGallery = () => {
+  return (
+    <div className="bg-[#f9f3f5c8] flex flex-col sm:flex-row justify-center items-center text-[#896C42] p-6 sm:p-12">
+      {/* Left Image */}
+      <div className="w-full sm:w-1/3 flex justify-center items-center p-4">
+        <Image
+          src="/product_swami.jpeg"
+          alt="Gupta Rudraksha"
+          width={300}
+          height={300}
+          className="rounded-lg shadow-lg"
+        />
+      </div>
+
+      {/* Right content */}
+      <div className="w-full sm:w-1/3 flex flex-col justify-center items-center text-center p-4 sm:p-8">
+        <h2 className="text-3xl sm:text-4xl mb-5 font-serif tracking-wide">
+          Nepal&#39;s 1st & only
+          <span className="text-4xl sm:text-6xl block my-5 tracking-wider">
+            ISO Certified
+          </span>
+          Rudraksha Organization
+        </h2>
+        <p className="text-zinc-800 text-lg sm:text-xl mb-5 sm:w-3/4">
+          Explore the largest collection of authentic Gupta Rudraksha energized
+          as per our vedic process. For nearly 3+ generations Gupta Rudraksha
+          has been the pioneer of Rudraksha and Shaligram and has supported
+          millions of devotees attain spiritual and professional goals.
+        </p>
+        <h2 className="text-xl sm:text-2xl sm:w-3/4">
+          Gupta Rudraksha - The Only Vendor in the World To 100% Lifetime Money
+          Back Authenticity Guarantee.
+        </h2>
+      </div>
+
+      {/* Right Image */}
+      <div className="w-full sm:w-1/3 flex justify-center items-center p-4">
+        <Image
+          src="/temple.jpeg"
+          alt="Gupta Rudraksha Collection"
+          width={300}
+          height={300}
+          className="rounded-lg shadow-lg"
+        />
+      </div>
+    </div>
+  );
+};
+
+export default SecondGallery;