chore: setup project for production

components/sliders/categorySlider.jsx

@@ -0,0 +1,51 @@
+import React, { useContext } from "react";
+import {
+  Carousel,
+  CarouselContent,
+  CarouselItem,
+  CarouselNext,
+  CarouselPrevious,
+} from "@/components/ui/carousel";
+import Link from "next/link";
+import Image from "next/image";
+
+const CategorySlider = ({ categoryData, products }) => {
+  return (
+    <div className="w-full sm:w-[70%] p-4">
+      <h2 className="capitalize font-serif text-2xl sm:text-4xl font-bold mb-4 sm:mb-7">
+        Top Selling {categoryData?.category_name}
+      </h2>
+      <Carousel className="w-full max-w-full sm:max-w-[90%]">
+        <CarouselContent className="-ml-1">
+          {products?.slice(0, 3).map((product, index) => (
+            <CarouselItem
+              key={index}
+              className="pl-3 sm:basis-1/2 lg:basis-1/3"
+            >
+              <Link href={`/products/${product.product_name}`}>
+                <div className="p-1">
+                  <div className="bg-white shadow-md hover:shadow-xl">
+                    <div className="flex aspect-square items-center justify-center p-8">
+                      <Image
+                        src={product.images[0]?.image || "/placeholder.jpg"} 
+                        alt={product.product_name}
+                        className="hover:scale-105 object-cover object-center transition-all ease-in duration-300" // Tailwind styling
+                      />
+                    </div>
+                  </div>
+                  <h2 className="mt-3 text-center text-lg sm:text-xl font-medium">
+                    {product.product_name}
+                  </h2>
+                </div>
+              </Link>
+            </CarouselItem>
+          ))}
+        </CarouselContent>
+        <CarouselPrevious className="text-black hidden sm:flex" />
+        <CarouselNext className="text-black hover:bg-[#C19A5B] hidden sm:flex" />
+      </Carousel>
+    </div>
+  );
+};
+
+export default CategorySlider;