chore: setup project for production

components/products/RelatedProductCards.jsx

@@ -0,0 +1,63 @@
+"use client";
+import React, { useContext } from "react";
+import Image from "next/image";
+import Link from "next/link";
+import { productsCards } from "@/utils";
+import ProductContext from "@/app/contexts/productContext";
+import { backendUrl } from "@/utils/axios";
+
+const RelatedProductCards = ({ productId }) => {
+  const { products } = useContext(ProductContext);
+
+  if (!products) {
+    return null;
+  }
+
+  const product = products?.find((pr) => pr.id == productId);
+  const relatedProducts = products?.filter(
+    (prod) => prod.product_category.id == product.id && prod.id != productId
+  );
+
+  if (relatedProducts.length == 0) {
+    return null;
+  }
+  return (
+    <div className="container mx-auto min-h-[70vh] px-4 py-8 max-w-8xl ">
+      <div className="text-center mb-12">
+        <h1 className="font-serif capitalize tracking-wide font-semibold text-5xl text-slate-800 mb-4">
+          You may also like
+        </h1>
+      </div>
+      <div className="overflow-x-auto sm:pl-[400px] hide-navbar gap-5 flex items-center justify-center">
+        {relatedProducts.map((product) => (
+          <Link href={`/products/${product.id}`} key={product.id}>
+            <div
+              key={product.id}
+              className="relative bg-[#EDE8E0]  overflow-hidden sm:h-[350px] sm:w-[300px] "
+            >
+              <div className="absolute top-0 left-0 bg-[#C19A5B] text-white py-1 px-3 rounded-br-lg z-10">
+                Exclusive
+              </div>
+              <div className="sm:h-[300px] h-[200px] w-[200px] sm:w-[300px] flex items-center justify-center overflow-hidden">
+                <Image
+                  src={`${backendUrl}${product?.images[0]?.image}`}
+                  alt={`Logo for ${product.title}`}
+                  width={300}
+                  height={300}
+                  className="w-full h-full object-cover hover:scale-125 transition-transform ease-in-out duration-300"
+                />
+              </div>
+              <div className="p-4 ">
+                <h3 className="text-center text-[1rem] uppercase  text-gray-800">
+                  {product.title}
+                </h3>
+              </div>
+            </div>
+          </Link>
+        ))}
+      </div>
+    </div>
+  );
+};
+
+export default RelatedProductCards;