chore: setup project for production

components/shaligram/ListOfShaligram.jsx

@@ -0,0 +1,63 @@
+import Image from "next/image";
+import Link from "next/link";
+import React from "react";
+
+const ListOfShaligram = () => {
+  const shaligrams = [
+    {
+      title: "Buddha Shaligram",
+      imageUrl: "/shaligram/buddha-shaligram-829.webp",
+    },
+    {
+      title: "Matsya Shaligram",
+      imageUrl: "/shaligram/matsya-shaligram-614.webp",
+    },
+    {
+      title: "Narsimha Shaligram",
+      imageUrl: "/shaligram/narasimha-shaligram-977.webp",
+    },
+    {
+      title: "Parashurama Shaligram",
+      imageUrl: "/shaligram/parashurama-shaligram-855.webp",
+    },
+    {
+      title: "Rama Shaligram",
+      imageUrl: "/shaligram/rama-shaligram-313.webp",
+    },
+    {
+      title: "Vamana Shaligram",
+      imageUrl: "/shaligram/vamana-shaligram-750.webp",
+    },
+  ];
+
+  return (
+    <div className="p-4">
+      <h1 className="sm:text-5xl font-serif text-zinc-800 mt-10 text-center py-8">
+        Vishnu Dashavatar Shaligrams
+      </h1>
+      <div className="flex  flex-wrap gap-7 max-w-6xl mx-auto">
+        {shaligrams.map((item, index) => (
+          <>
+            <div key={index} className="flex flex-col ">
+              <Link href={`/products/${item.title}`}>
+                <div className="bg-[#dfdbdf] p-4 sm:w-[320px] w-[150px] h-[200px] sm:h-[280px]">
+                  <Image
+                    src={item.imageUrl}
+                    alt={item.title}
+                    width={320} 
+                    height={260} 
+                    className="w-full sm:h-[260px] object-cover rounded"
+                  />
+                </div>
+              </Link>
+
+              <h3 className="sm:text-xl w- font-semibold mb-2">{item.title}</h3>
+            </div>
+          </>
+        ))}
+      </div>
+    </div>
+  );
+};
+
+export default ListOfShaligram;