chore: setup project for production

components/siddha-mala/ExploreSiddhamala.jsx

@@ -0,0 +1,69 @@
+"use client";
+
+import Link from "next/link";
+import React, { useContext } from "react";
+import { backendUrl } from "@/utils/axios";
+import Image from "next/image";
+import { useCurrency } from "@/app/contexts/currencyContext";
+import ProductContext from "@/app/contexts/productContext";
+
+export default function ExploreSiddhaMala({ params }) {
+  const { products, category } = useContext(ProductContext);
+  const { formatPrice, isLoading } = useCurrency();
+
+  const filteredProducts = products?.filter(
+    (product) => product.product_category?.id == params.id
+  );
+  const selectedCategory = category?.find((cat) => cat.id == params.id);
+
+  return (
+    <section className="py-16 bg-gray-50">
+      <div className="container mx-auto px-4">
+        <h2 className="text-4xl font-bold text-center text-gray-800 mb-12">
+          Explore{" "}
+          {selectedCategory ? selectedCategory.category_name : "Products"}
+        </h2>
+        <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-8">
+          {filteredProducts?.map((product) => (
+            <div
+              key={product.id}
+              className="bg-white shadow-lg rounded-lg overflow-hidden transition-transform transform hover:scale-105"
+            >
+              <Link href={`/products/${product.id}`}>
+                <div className="relative w-full h-64 bg-gray-200">
+                  <Image
+                    src={`${backendUrl}${product?.images[0]?.image}`}
+                    alt={product.product_name}
+                    layout="fill"
+                    objectFit="cover"
+                    className="rounded-t-lg"
+                  />
+                </div>
+              </Link>
+              <div className="p-5">
+                <h3 className="text-lg font-semibold text-gray-900 mb-2 truncate">
+                  {product.product_name}
+                </h3>
+                {product.variants?.length > 0 ? (
+                  <p className="text-lg font-bold text-green-600">
+                    {isLoading
+                      ? "Loading..."
+                      : formatPrice(
+                          Math.min(
+                            ...product.variants.map((variant) => variant.price)
+                          )
+                        )}
+                  </p>
+                ) : (
+                  <p className="text-md font-medium text-gray-500">
+                    Price on request
+                  </p>
+                )}
+              </div>
+            </div>
+          ))}
+        </div>
+      </div>
+    </section>
+  );
+}

components/siddha-mala/SiddhaThree.jsx

@@ -0,0 +1,56 @@
+import React from "react";
+
+const SiddhaThree = () => {
+  return (
+    <div className="bg-[#F5F1EB] min-h-screen py-12 px-6 sm:px-12">
+      <h1 className="sm:pt-14 pb-10 font-serif mt-4 sm:text-6xl text-3xl text-zinc-800 text-center">
+        Design Available
+      </h1>
+      <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-2 lg:grid-cols-4 gap-8">
+        {[
+          {
+            title: "Loose Beads/Red Thread",
+            description:
+              "Loose beads provide flexibility in crafting your own unique Rudraksha accessories. Ideal for those who wish to design custom malas or incorporate Rudraksha beads into existing jewelry pieces.",
+            image: "/sidhi-mala/1.webp",
+          },
+          {
+            title: "Silver Capped",
+            description:
+              "Silver-capped Rudraksha beads add an elegant touch to your spiritual accessories. The silver caps not only enhance the aesthetics but also provide additional durability.",
+            image: "/sidhi-mala/2_01d4b37c-ade7-44a1-8847-b63ca7945b5b.webp",
+          },
+          {
+            title: "Silver Chain",
+            description:
+              "A Rudraksha chain with silver links combines the sacred energy of Rudraksha with the elegance of silver. The chain design allows for a more versatile and adjustable accessory, suitable for daily wear.",
+            image: "/sidhi-mala/3_4bb67323-1af4-4167-9f11-34cdab60e320.webp",
+          },
+          {
+            title: "Rudraksha Chain",
+            description:
+              "A Rudraksha chain with silver links combines the sacred energy of Rudraksha with the elegance of silver. The chain design allows for a more versatile and adjustable accessory, suitable for daily wear.",
+            image: "/sidhi-mala/4_b5f14d83-0ef5-4e47-8e96-d36db882aadc.webp",
+          },
+        ].map((item, index) => (
+          <div
+            key={index}
+            className="relative text-white flex flex-col justify-end h-64 sm:h-80 bg-cover bg-center bg-no-repeat w-full p-6 rounded-lg shadow-lg hover:shadow-xl transition-shadow duration-300"
+            style={{ backgroundImage: `url(${item.image})` }}
+          >
+            <div className="bg-black bg-opacity-50 p-4 rounded-lg">
+              <h1 className="sm:text-2xl text-lg font-bold mb-2">
+                {item.title}
+              </h1>
+              <h3 className="sm:text-sm text-xs leading-relaxed">
+                {item.description}
+              </h3>
+            </div>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+};
+
+export default SiddhaThree;

components/siddha-mala/categoryHero.jsx

@@ -0,0 +1,65 @@
+"use client";
+
+import { useContext } from "react";
+import Image from "next/image";
+import { motion } from "framer-motion";
+import ProductContext from "@/app/contexts/productContext";
+import { Button } from "@/components/ui/button";
+
+const cleanHTML = (html) => {
+  if (!html) return "";
+  return html.replace(/style="[^"]*color:[^;]*;?"/gi, "");
+};
+
+const CategoryHero = ({ params }) => {
+  const { category } = useContext(ProductContext);
+  const selectedCategory = category?.find((cat) => cat.id == params.id);
+
+  // Fallback values
+  const fallbackImage = "/placeholder-image.jpg";
+  const fallbackDescription =
+    "Explore our curated collection of spiritual items designed to enhance your journey of self-discovery and inner peace.";
+  const fallbackCategoryName = "Spiritual Essentials";
+
+  return (
+    <section className="relative h-[50vh] flex items-center justify-center overflow-hidden">
+      <div className="absolute inset-0 z-0">
+        <Image
+          src="/sidhi-mala/Artboard_1_bf5ccd46-7152-4355-82a8-9e9f27c1bfc2.jpg"
+          alt="Category Background"
+          layout="fill"
+          objectFit="cover"
+          quality={100}
+          priority
+          className="brightness-75"
+        />
+      </div>
+
+      <div className="relative z-10 text-center px-6 md:px-12 max-w-3xl">
+        <motion.h1
+          initial={{ opacity: 0, y: -20 }}
+          animate={{ opacity: 1, y: 0 }}
+          transition={{ duration: 0.6 }}
+          className="text-4xl md:text-6xl font-bold text-white mb-4 drop-shadow-lg"
+        >
+          {selectedCategory?.category_name || fallbackCategoryName}
+        </motion.h1>
+
+        <motion.div
+          initial={{ opacity: 0, y: 20 }}
+          animate={{ opacity: 1, y: 0 }}
+          transition={{ duration: 0.8, delay: 0.2 }}
+          className="text-lg md:text-xl text-gray-200 drop-shadow-md"
+          dangerouslySetInnerHTML={{
+            __html: cleanHTML(
+              selectedCategory?.descriptions || fallbackDescription
+            ),
+          }}
+        />
+
+      </div>
+    </section>
+  );
+};
+
+export default CategoryHero;