From ef61d38753a16d3d2e887c7f624e79f86702d25e Mon Sep 17 00:00:00 2001
From: Aritra Ghorai <aritra1521@gmail.com>
Date: Thu, 13 Mar 2025 18:07:29 +0530
Subject: [PATCH] added

---
 components/header/Navbar.jsx                | 87 ++++++++++++---------
 components/hero-page/HeroSix.jsx            |  4 +-
 components/products/RelatedProductCards.jsx |  6 +-
 components/search/searchComponent.jsx       | 12 +--
 components/sliders/SliderTwo.jsx            | 10 +--
 5 files changed, 68 insertions(+), 51 deletions(-)

diff --git a/components/header/Navbar.jsx b/components/header/Navbar.jsx
index 143b031..d8e8b6f 100644
--- a/components/header/Navbar.jsx
+++ b/components/header/Navbar.jsx
@@ -1,38 +1,42 @@
-"use client"
+"use client";
 
-import React, { useContext, useEffect, useState } from "react"
-import { Menu, ShoppingBag, UserRound } from "lucide-react"
-import { IoMdClose } from "react-icons/io"
-import Link from "next/link"
-import { NavigationMenu, NavigationMenuList } from "@/components/ui/navigation-menu"
-import FullWidthMenu from "./FullWidthMenu"
-import MainContext from "@/app/contexts/mainContext"
-import DynamicNavbar from "../dynamic-navbar/dynamicNavbar"
-import SearchComponent from "../search/searchComponent"
-import { useCurrency } from "@/app/contexts/currencyContext"
-import CurrencySelect from "../dynamic-navbar/currencySelect"
-import Image from "next/image"
+import React, { useContext, useEffect, useState } from "react";
+import { Menu, ShoppingBag, UserRound } from "lucide-react";
+import { IoMdClose } from "react-icons/io";
+import Link from "next/link";
+import {
+  NavigationMenu,
+  NavigationMenuList,
+} from "@/components/ui/navigation-menu";
+import FullWidthMenu from "./FullWidthMenu";
+import MainContext from "@/app/contexts/mainContext";
+import DynamicNavbar from "../dynamic-navbar/dynamicNavbar";
+import SearchComponent from "../search/searchComponent";
+import { useCurrency } from "@/app/contexts/currencyContext";
+import CurrencySelect from "../dynamic-navbar/currencySelect";
+import Image from "next/image";
 
 const Navbar = () => {
-  const [isOpen, setIsOpen] = useState(false)
-  const [isScrolled, setIsScrolled] = useState(false)
-  const [isMounted, setIsMounted] = useState(false)
-  const { token } = useContext(MainContext)
-  const toggleMenu = () => setIsOpen(!isOpen)
-  const { selectedCurrency, setSelectedCurrency, SUPPORTED_CURRENCIES } = useCurrency()
+  const [isOpen, setIsOpen] = useState(false);
+  const [isScrolled, setIsScrolled] = useState(false);
+  const [isMounted, setIsMounted] = useState(false);
+  const { token } = useContext(MainContext);
+  const toggleMenu = () => setIsOpen(!isOpen);
+  const { selectedCurrency, setSelectedCurrency, SUPPORTED_CURRENCIES } =
+    useCurrency();
 
   useEffect(() => {
-    setIsMounted(true)
+    setIsMounted(true);
     const handleScroll = () => {
-      setIsScrolled(window.scrollY > 60)
-    }
+      setIsScrolled(window.scrollY > 60);
+    };
 
-    window.addEventListener("scroll", handleScroll)
-    return () => window.removeEventListener("scroll", handleScroll)
-  }, [])
+    window.addEventListener("scroll", handleScroll);
+    return () => window.removeEventListener("scroll", handleScroll);
+  }, []);
 
   if (!isMounted) {
-    return null // or a loading placeholder
+    return null; // or a loading placeholder
   }
 
   return (
@@ -42,10 +46,20 @@ const Navbar = () => {
           <div className="container mx-auto flex justify-between items-center">
             <div className="flex items-center">
               <button onClick={toggleMenu} className="z-50">
-                {isOpen ? <IoMdClose size={44} /> : <Menu size={44} strokeWidth={1} />}
+                {isOpen ? (
+                  <IoMdClose size={44} />
+                ) : (
+                  <Menu size={44} strokeWidth={1} />
+                )}
               </button>
               <Link href={"/"} className="flex items-center space-x-2">
-                <Image src="/logo1.jpg" alt="Logo" width={56} height={56} className="object-contain" />
+                <Image
+                  src="/logo1.jpg"
+                  alt="Logo"
+                  width={56}
+                  height={56}
+                  className="object-contain"
+                />
               </Link>
             </div>
 
@@ -66,9 +80,9 @@ const Navbar = () => {
             <div className="flex items-center space-x-4">
               <SearchComponent isScrolled={isScrolled} />
               <Link href="/pages/shopping-cart">
-                <ShoppingBag size={20} className={`cursor-pointer ${isScrolled ? "block" : "hidden"}`} />
+                <ShoppingBag size={20} className={`cursor-pointer `} />
               </Link>
-              <div className={`cursor-pointer ${isScrolled ? "block" : "hidden"}`}>
+              <div className={`cursor-pointer `}>
                 {token ? (
                   <Link href="/accounts/profile">
                     <UserRound size={20} />
@@ -103,12 +117,15 @@ const Navbar = () => {
         )}
       </header>
 
-      <FullWidthMenu isOpen={isOpen} onClose={toggleMenu} isScrolled={isScrolled} />
+      <FullWidthMenu
+        isOpen={isOpen}
+        onClose={toggleMenu}
+        isScrolled={isScrolled}
+      />
 
       <div className="h-[104px] sm:h-[150px]"></div>
     </>
-  )
-}
-
-export default Navbar
+  );
+};
 
+export default Navbar;
diff --git a/components/hero-page/HeroSix.jsx b/components/hero-page/HeroSix.jsx
index 0458e10..d6ecc97 100644
--- a/components/hero-page/HeroSix.jsx
+++ b/components/hero-page/HeroSix.jsx
@@ -8,7 +8,7 @@ import { backendUrl } from "@/utils/axios";
 
 const HeroSix = ({ guranteeData, data }) => {
   console.log(data);
-  const { heading2, description2, heading9, description6 } = data | {};
+  const { heading2, description2, header9, description6 } = data || {};
   return (
     <section className="py-16 bg-gradient-to-b from-background to-muted">
       <div className="container px-4 mx-auto">
@@ -29,7 +29,7 @@ const HeroSix = ({ guranteeData, data }) => {
         <PremiumBannerOne
           bannerImage={`${backendUrl}${data.image1?.path}`}
           data={{
-            header2: heading9,
+            header2: header9,
             description2: description6,
           }}
         />
diff --git a/components/products/RelatedProductCards.jsx b/components/products/RelatedProductCards.jsx
index 04812dc..c68b7ae 100644
--- a/components/products/RelatedProductCards.jsx
+++ b/components/products/RelatedProductCards.jsx
@@ -30,7 +30,7 @@ const RelatedProductCards = ({ productId }) => {
           You may also like
         </h1>
       </div>
-      <div className="overflow-x-auto sm:pl-[400px] hide-navbar gap-5 flex items-center justify-center">
+      <div className="overflow-x-auto  hide-navbar gap-5 flex items-center justify-center">
         {relatedProducts.map((product) => (
           <Link href={`/products/${product.id}`} key={product.id}>
             <div
@@ -43,7 +43,7 @@ const RelatedProductCards = ({ productId }) => {
               <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}`}
+                  alt={`Logo for ${product.product_name}`}
                   width={300}
                   height={300}
                   className="w-full h-full object-cover hover:scale-125 transition-transform ease-in-out duration-300"
@@ -51,7 +51,7 @@ const RelatedProductCards = ({ productId }) => {
               </div>
               <div className="p-4 ">
                 <h3 className="text-center text-[1rem] uppercase  text-gray-800">
-                  {product.title}
+                  {product.product_name}
                 </h3>
               </div>
             </div>
diff --git a/components/search/searchComponent.jsx b/components/search/searchComponent.jsx
index 388b737..22c39d7 100644
--- a/components/search/searchComponent.jsx
+++ b/components/search/searchComponent.jsx
@@ -102,11 +102,11 @@ const SearchComponent = ({ isScrolled }) => {
                 <div className="flex items-center gap-2">
                   {product.images?.[0] && (
                     <Image
-                      src={`${backendUrl}${product.images[0].image}`} 
-                      alt={product.product_name} 
-                      width={32} 
-                      height={32} 
-                      className="object-cover" 
+                      src={`${backendUrl}${product.images[0].image}`}
+                      alt={product.product_name}
+                      width={32}
+                      height={32}
+                      className="object-cover"
                     />
                   )}
                   <span>{product.product_name}</span>
@@ -130,7 +130,7 @@ const SearchComponent = ({ isScrolled }) => {
             <Search size={20} />
           </button>
           {isExpanded && (
-            <div className="absolute right-0 top-12 bg-white shadow-lg w-72 p-4">
+            <div className="absolute right-[-10rem] top-12 bg-white shadow-lg w-72 p-4">
               <SearchInput />
               <Suggestions />
             </div>
diff --git a/components/sliders/SliderTwo.jsx b/components/sliders/SliderTwo.jsx
index 4c9356d..89fedf5 100644
--- a/components/sliders/SliderTwo.jsx
+++ b/components/sliders/SliderTwo.jsx
@@ -43,7 +43,7 @@ const EnhancedSlider = () => {
                   Best-Selling {catData.category?.category_name}
                 </h2>
                 <Link
-                  href={`/category/${catData.category?.id}`}
+                  href={`/collections/${catData.category?.id}`}
                   className="inline-flex items-center text-primary hover:text-primary/80 transition-colors"
                 >
                   <span className="text-lg font-medium">
@@ -58,20 +58,20 @@ const EnhancedSlider = () => {
               opts={{
                 align: "start",
               }}
-              className="w-full"
+              className="w-full "
             >
-              <CarouselContent className="-ml-2 md:-ml-4">
+              <CarouselContent className="-ml-2 md:-ml-4 p-10">
                 {catData.products?.map((product, idx) => (
                   <CarouselItem
                     key={idx}
-                    className="pl-2 md:pl-4 md:basis-1/2 lg:basis-1/3"
+                    className="pl-2 md:pl-4 md:basis-1/2 lg:basis-1/6"
                   >
                     <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">
+                        <div className="aspect-square relative overflow-hidden max-h-[50%]">
                           <Image
                             src={`${backendUrl}${
                               product.images[0]?.image || "/placeholder.jpg"