added

2025-03-13 18:07:29 +05:30
parent 3ff5be64de
commit ef61d38753
5 changed files with 68 additions and 51 deletions
--- 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;
--- 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,
          }}
        />
--- 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>
--- 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>
--- 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"