chore: setup project for production

2025-02-19 17:00:55 +05:30
commit 12caeee710
271 changed files with 16199 additions and 0 deletions
--- a/components/sliders/SliderTwo.jsx
+++ b/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;