chore: setup project for production

components/exclusive-rudraksha/WhyShouldChooseUs.jsx

@@ -0,0 +1,41 @@
+import { guranteeData } from "@/utils";
+import Image from "next/image";
+import React from "react";
+
+const WhyShouldChooseUs = () => {
+  return (
+    <div className="min-h-[60vh] bg-zinc-50 mt-14 px-4 sm:px-8">
+      <div className="text-center mb-12">
+        <h1 className="font-serif text-3xl sm:text-4xl md:text-5xl text-slate-800 mb-4">
+          Why should you choose us?
+        </h1>
+        <h2 className="text-base sm:text-xl  text-slate-700">
+          Witness the ancient craft of harvesting and crafting these sacred
+          beads straight from the trees. Experience the authentic power and
+          beauty of genuine Rudraksha with our exclusive video.`
+        </h2>
+      </div>
+      <div className="flex justify-center gap-6 flex-wrap">
+        {guranteeData.map((item) => (
+          <div
+            key={item.id}
+            className="flex flex-col justify-center items-center mb-4 w-full sm:w-[45%] md:w-[30%] lg:w-[18%]"
+          >
+            <Image
+              height={300}
+              width={300}
+              src={item.imageUrl}
+              alt={item.title}
+              className="w-[100px] h-[100px] sm:w-[160px] sm:h-[160px] object-cover"
+            />
+            <h2 className="text-sm sm:text-lg uppercase text-zinc-800 mt-3 text-center w-[80%]">
+              {item.title}
+            </h2>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+};
+
+export default WhyShouldChooseUs;