leadstocompany/rudarksh-frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

added

Browse Source
This commit is contained in:
Aritra Ghorai
2025-03-13 18:07:29 +05:30
parent 3ff5be64de
commit ef61d38753
5 changed files with 68 additions and 51 deletions
Download Patch File Download Diff File Expand all files Collapse all files

87
components/header/Navbar.jsx
View File

@@ -1,38 +1,42 @@
"use client" "use client";
import React, { useContext, useEffect, useState } from "react" import React, { useContext, useEffect, useState } from "react";
import { Menu, ShoppingBag, UserRound } from "lucide-react" import { Menu, ShoppingBag, UserRound } from "lucide-react";
import { IoMdClose } from "react-icons/io" import { IoMdClose } from "react-icons/io";
import Link from "next/link" import Link from "next/link";
import { NavigationMenu, NavigationMenuList } from "@/components/ui/navigation-menu" import {
import FullWidthMenu from "./FullWidthMenu" NavigationMenu,
import MainContext from "@/app/contexts/mainContext" NavigationMenuList,
import DynamicNavbar from "../dynamic-navbar/dynamicNavbar" } from "@/components/ui/navigation-menu";
import SearchComponent from "../search/searchComponent" import FullWidthMenu from "./FullWidthMenu";
import { useCurrency } from "@/app/contexts/currencyContext" import MainContext from "@/app/contexts/mainContext";
import CurrencySelect from "../dynamic-navbar/currencySelect" import DynamicNavbar from "../dynamic-navbar/dynamicNavbar";
import Image from "next/image" 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 Navbar = () => {
const [isOpen, setIsOpen] = useState(false) const [isOpen, setIsOpen] = useState(false);
const [isScrolled, setIsScrolled] = useState(false) const [isScrolled, setIsScrolled] = useState(false);
const [isMounted, setIsMounted] = useState(false) const [isMounted, setIsMounted] = useState(false);
const { token } = useContext(MainContext) const { token } = useContext(MainContext);
const toggleMenu = () => setIsOpen(!isOpen) const toggleMenu = () => setIsOpen(!isOpen);
const { selectedCurrency, setSelectedCurrency, SUPPORTED_CURRENCIES } = useCurrency() const { selectedCurrency, setSelectedCurrency, SUPPORTED_CURRENCIES } =
useCurrency();
useEffect(() => { useEffect(() => {
setIsMounted(true) setIsMounted(true);
const handleScroll = () => { const handleScroll = () => {
setIsScrolled(window.scrollY > 60) setIsScrolled(window.scrollY > 60);
} };
window.addEventListener("scroll", handleScroll) window.addEventListener("scroll", handleScroll);
return () => window.removeEventListener("scroll", handleScroll) return () => window.removeEventListener("scroll", handleScroll);
}, []) }, []);
if (!isMounted) { if (!isMounted) {
return null // or a loading placeholder return null; // or a loading placeholder
} }
return ( return (
@@ -42,10 +46,20 @@ const Navbar = () => {
<div className="container mx-auto flex justify-between items-center"> <div className="container mx-auto flex justify-between items-center">
<div className="flex items-center"> <div className="flex items-center">
<button onClick={toggleMenu} className="z-50"> <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> </button>
<Link href={"/"} className="flex items-center space-x-2"> <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> </Link>
</div> </div>
@@ -66,9 +80,9 @@ const Navbar = () => {
<div className="flex items-center space-x-4"> <div className="flex items-center space-x-4">
<SearchComponent isScrolled={isScrolled} /> <SearchComponent isScrolled={isScrolled} />
<Link href="/pages/shopping-cart"> <Link href="/pages/shopping-cart">
<ShoppingBag size={20} className={`cursor-pointer ${isScrolled ? "block" : "hidden"}`} /> <ShoppingBag size={20} className={`cursor-pointer `} />
</Link> </Link>
<div className={`cursor-pointer ${isScrolled ? "block" : "hidden"}`}> <div className={`cursor-pointer `}>
{token ? ( {token ? (
<Link href="/accounts/profile"> <Link href="/accounts/profile">
<UserRound size={20} /> <UserRound size={20} />
@@ -103,12 +117,15 @@ const Navbar = () => {
)} )}
</header> </header>
<FullWidthMenu isOpen={isOpen} onClose={toggleMenu} isScrolled={isScrolled} /> <FullWidthMenu
isOpen={isOpen}
onClose={toggleMenu}
isScrolled={isScrolled}
/>
<div className="h-[104px] sm:h-[150px]"></div> <div className="h-[104px] sm:h-[150px]"></div>
</> </>
) );
} };
export default Navbar
export default Navbar;

4
components/hero-page/HeroSix.jsx
View File

@@ -8,7 +8,7 @@ import { backendUrl } from "@/utils/axios";
const HeroSix = ({ guranteeData, data }) => { const HeroSix = ({ guranteeData, data }) => {
console.log(data); console.log(data);
const { heading2, description2, heading9, description6 } = data | {}; const { heading2, description2, header9, description6 } = data || {};
return ( return (
<section className="py-16 bg-gradient-to-b from-background to-muted"> <section className="py-16 bg-gradient-to-b from-background to-muted">
<div className="container px-4 mx-auto"> <div className="container px-4 mx-auto">
@@ -29,7 +29,7 @@ const HeroSix = ({ guranteeData, data }) => {
<PremiumBannerOne <PremiumBannerOne
bannerImage={`${backendUrl}${data.image1?.path}`} bannerImage={`${backendUrl}${data.image1?.path}`}
data={{ data={{
header2: heading9, header2: header9,
description2: description6, description2: description6,
}} }}
/> />

6
components/products/RelatedProductCards.jsx
View File

@@ -30,7 +30,7 @@ const RelatedProductCards = ({ productId }) => {
You may also like You may also like
</h1> </h1>
</div> </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) => ( {relatedProducts.map((product) => (
<Link href={`/products/${product.id}`} key={product.id}> <Link href={`/products/${product.id}`} key={product.id}>
<div <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"> <div className="sm:h-[300px] h-[200px] w-[200px] sm:w-[300px] flex items-center justify-center overflow-hidden">
<Image <Image
src={`${backendUrl}${product?.images[0]?.image}`} src={`${backendUrl}${product?.images[0]?.image}`}
alt={`Logo for ${product.title}`} alt={`Logo for ${product.product_name}`}
width={300} width={300}
height={300} height={300}
className="w-full h-full object-cover hover:scale-125 transition-transform ease-in-out duration-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>
<div className="p-4 "> <div className="p-4 ">
<h3 className="text-center text-[1rem] uppercase text-gray-800"> <h3 className="text-center text-[1rem] uppercase text-gray-800">
{product.title} {product.product_name}
</h3> </h3>
</div> </div>
</div> </div>

2
components/search/searchComponent.jsx
View File

@@ -130,7 +130,7 @@ const SearchComponent = ({ isScrolled }) => {
<Search size={20} /> <Search size={20} />
</button> </button>
{isExpanded && ( {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 /> <SearchInput />
<Suggestions /> <Suggestions />
</div> </div>

8
components/sliders/SliderTwo.jsx
View File

@@ -43,7 +43,7 @@ const EnhancedSlider = () => {
Best-Selling {catData.category?.category_name} Best-Selling {catData.category?.category_name}
</h2> </h2>
<Link <Link
href={`/category/${catData.category?.id}`} href={`/collections/${catData.category?.id}`}
className="inline-flex items-center text-primary hover:text-primary/80 transition-colors" className="inline-flex items-center text-primary hover:text-primary/80 transition-colors"
> >
<span className="text-lg font-medium"> <span className="text-lg font-medium">
@@ -60,18 +60,18 @@ const EnhancedSlider = () => {
}} }}
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) => ( {catData.products?.map((product, idx) => (
<CarouselItem <CarouselItem
key={idx} 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}`}> <Link href={`/products/${product.id}`}>
<motion.div <motion.div
whileHover={{ y: -5 }} whileHover={{ y: -5 }}
className="group rounded-lg overflow-hidden bg-card shadow-lg transition-shadow hover:shadow-xl" 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 <Image
src={`${backendUrl}${ src={`${backendUrl}${
product.images[0]?.image || "/placeholder.jpg" product.images[0]?.image || "/placeholder.jpg"