chore: setup project for production

components/sliders/BannerSlider.jsx

@@ -0,0 +1,86 @@
+"use client";
+import React from "react";
+import Image from "next/image";
+import { motion } from "framer-motion";
+import { ArrowRight } from "lucide-react";
+
+const categories = [
+  { title: "Spirituality", image: "/one-two.jpg" },
+  { title: "Meditation", image: "/gallery1.jpg" },
+  { title: "Wellness", image: "/pooja_image.webp" },
+];
+
+const BannerSlider = () => {
+  return (
+    <section className="relative h-fit bg-gradient-to-br from-yellow-800 to-yellow-700 overflow-hidden">
+      {/* Background image */}
+      <Image
+        src="/herothree.jpg"
+        alt="Background"
+        layout="fill"
+        objectFit="cover"
+        className="mix-blend-overlay opacity-30"
+      />
+
+      <div className="container mx-auto px-4 py-16 relative z-10">
+        <div className="flex flex-col lg:flex-row items-center justify-between gap-12">
+          {/* Text content */}
+          <motion.div
+            initial={{ opacity: 0, y: 20 }}
+            animate={{ opacity: 1, y: 0 }}
+            transition={{ duration: 0.6 }}
+            className="lg:w-1/3 text-center lg:text-left"
+          >
+            <h2 className="text-2xl font-medium text-primary-foreground mb-4">
+              Discover Your Path
+            </h2>
+            <h1 className="text-4xl lg:text-5xl font-bold text-white mb-6">
+              Astrology-Guided Personal Growth
+            </h1>
+            <p className="text-lg text-primary-foreground/80 mb-8">
+              Unlock your potential with our expert-led consultations and sacred
+              Rudraksha beads.
+            </p>
+            <a
+              href="#consultation"
+              className="inline-flex items-center gap-2 bg-white text-primary px-6 py-3 rounded-full hover:bg-primary-foreground hover:text-primary transition-colors"
+            >
+              Book a Consultation
+              <ArrowRight className="w-4 h-4" />
+            </a>
+          </motion.div>
+
+          {/* Static Cards */}
+          <motion.div
+            initial={{ opacity: 0, x: 20 }}
+            animate={{ opacity: 1, x: 0 }}
+            transition={{ duration: 0.6, delay: 0.3 }}
+            className="lg:w-2/3 grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6"
+          >
+            {categories.map((category, index) => (
+              <div
+                key={index}
+                className="relative aspect-square rounded-lg overflow-hidden group"
+              >
+                <Image
+                  src={category.image || "/placeholder.svg"}
+                  alt={category.title}
+                  layout="fill"
+                  objectFit="cover"
+                  className="transition-transform duration-300 group-hover:scale-110"
+                />
+                <div className="absolute inset-0 bg-gradient-to-t from-black/60 to-transparent flex items-end p-4">
+                  <h3 className="text-white text-lg font-medium">
+                    {category.title}
+                  </h3>
+                </div>
+              </div>
+            ))}
+          </motion.div>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export default BannerSlider;

components/sliders/SliderTwo.jsx

@@ -0,0 +1,109 @@
+"use client";
+
+import React, { useContext } from "react";
+import {
+  Carousel,
+  CarouselContent,
+  CarouselItem,
+  CarouselNext,
+  CarouselPrevious,
+} from "@/components/ui/carousel";
+import Link from "next/link";
+import ProductContext from "@/app/contexts/productContext";
+import { backendUrl } from "@/utils/axios";
+import Image from "next/image";
+import { motion } from "framer-motion";
+import { ArrowRight } from "lucide-react";
+
+const EnhancedSlider = () => {
+  const { category, products } = useContext(ProductContext);
+
+  const selectedCategories = category?.slice(0, 2);
+  const categorizedProducts = selectedCategories?.map((cat) => ({
+    category: cat,
+    products: products
+      ?.filter((product) => product.product_category?.id === cat.id)
+      .slice(0, 3),
+  }));
+
+  return (
+    <section className="bg-gradient-to-b from-background to-secondary/10 py-16 md:py-24">
+      <div className="container mx-auto px-4">
+        {categorizedProducts?.map((catData, index) => (
+          <motion.div
+            key={index}
+            initial={{ opacity: 0, y: 20 }}
+            animate={{ opacity: 1, y: 0 }}
+            transition={{ duration: 0.6, delay: index * 0.2 }}
+            className="mb-20 last:mb-0"
+          >
+            <div className="flex flex-col md:flex-row items-center justify-between mb-8">
+              <div className="text-center md:text-left mb-6 md:mb-0">
+                <h2 className="text-3xl md:text-4xl font-bold text-foreground mb-4">
+                  Best-Selling {catData.category?.category_name}
+                </h2>
+                <Link
+                  href={`/category/${catData.category?.id}`}
+                  className="inline-flex items-center text-primary hover:text-primary/80 transition-colors"
+                >
+                  <span className="text-lg font-medium">
+                    Explore Collection
+                  </span>
+                  <ArrowRight className="ml-2 h-5 w-5" />
+                </Link>
+              </div>
+            </div>
+
+            <Carousel
+              opts={{
+                align: "start",
+              }}
+              className="w-full"
+            >
+              <CarouselContent className="-ml-2 md:-ml-4">
+                {catData.products?.map((product, idx) => (
+                  <CarouselItem
+                    key={idx}
+                    className="pl-2 md:pl-4 md:basis-1/2 lg:basis-1/3"
+                  >
+                    <Link href={`/products/${product.id}`}>
+                      <motion.div
+                        whileHover={{ y: -5 }}
+                        className="group rounded-lg overflow-hidden bg-card shadow-lg transition-shadow hover:shadow-xl"
+                      >
+                        <div className="aspect-square relative overflow-hidden">
+                          <Image
+                            src={`${backendUrl}${
+                              product.images[0]?.image || "/placeholder.jpg"
+                            }`}
+                            alt={product.product_name}
+                            layout="fill"
+                            objectFit="cover"
+                            className="transition-transform duration-300 group-hover:scale-110"
+                          />
+                        </div>
+                        <div className="p-4">
+                          <h3 className="text-lg font-semibold text-foreground group-hover:text-primary transition-colors">
+                            {product.product_name}
+                          </h3>
+                          <p className="text-sm text-muted-foreground mt-2">
+                            {product.short_description ||
+                              "Discover more about this product"}
+                          </p>
+                        </div>
+                      </motion.div>
+                    </Link>
+                  </CarouselItem>
+                ))}
+              </CarouselContent>
+              <CarouselPrevious className="hidden md:flex -left-4 bg-background/50 hover:bg-background text-foreground" />
+              <CarouselNext className="hidden md:flex -right-4 bg-background/50 hover:bg-background text-foreground" />
+            </Carousel>
+          </motion.div>
+        ))}
+      </div>
+    </section>
+  );
+};
+
+export default EnhancedSlider;

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;