chore: setup project for production
This commit is contained in:
afnaann
79
components/header/FullWidthMenu.jsx
Normal file
79
components/header/FullWidthMenu.jsx
Normal file
@@ -0,0 +1,79 @@
|
||||
'use client'
|
||||
import React, { useContext, useEffect, useState } from "react";
|
||||
import Link from "next/link";
|
||||
import { menuItems } from "@/utils";
|
||||
import ProductContext from "@/app/contexts/productContext";
|
||||
|
||||
const FullWidthMenu = ({ isOpen, onClose, isScrolled }) => {
|
||||
const [isRendered, setIsRendered] = useState(false);
|
||||
const { category } = useContext(ProductContext);
|
||||
|
||||
|
||||
|
||||
const categoryItems = category?.map((category) => ({
|
||||
label: category.category_name,
|
||||
url: `/collections/${category.id}`,
|
||||
})) || []
|
||||
|
||||
useEffect(() => {
|
||||
if (isOpen) {
|
||||
setIsRendered(true);
|
||||
} else {
|
||||
const timer = setTimeout(() => setIsRendered(false), 300); // Match this with the transition duration
|
||||
return () => clearTimeout(timer);
|
||||
}
|
||||
}, [isOpen]);
|
||||
|
||||
if (!isRendered && !isOpen) {
|
||||
return null;
|
||||
}
|
||||
|
||||
return (
|
||||
<div
|
||||
className={`fixed ${
|
||||
isScrolled ? "top-24" : "top-36"
|
||||
} left-0 max-w-[100%] w-full sm:h-full h-[90vh] hide-navbar overflow-y-scroll text-slate-900 bg-white z-40 shadow-md transition-transform duration-300 ease-in ${
|
||||
isOpen ? "translate-x-0" : "-translate-x-full "
|
||||
} `}
|
||||
>
|
||||
{/* hidden items only show on mobile devices */}
|
||||
<div className="flex flex-col space-y-8 sm:hidden ml-7 border-b py-6">
|
||||
{categoryItems.map((item) => (
|
||||
<category
|
||||
key={item.label}
|
||||
href={item.url}
|
||||
className="text-2xl font-medium hover:text-[#AC8C6B] transition-colors"
|
||||
onClick={onClose}
|
||||
>
|
||||
{item.label}
|
||||
</category>
|
||||
))}
|
||||
</div>
|
||||
<div className="container mx-auto sm:py-20 py-7 px-6 flex sm:gap-44 md:gap-36 gap-7 sm:flex-row md:flex-row flex-col">
|
||||
{/* left section */}
|
||||
<div className="sm:h-[70vh] flex flex-col p-3 justify-evenly sm:gap-8 gap-7 sm:ml-10 sm:border-b pb-8">
|
||||
{menuItems.map((menuItem, index) => (
|
||||
<Link href={menuItem.link} key={index} onClick={onClose}>
|
||||
<h2 className="text-xl font-semibold text-slate-900 hover:text-[#AC8C6B] transition-colors">
|
||||
{menuItem.name}
|
||||
</h2>
|
||||
</Link>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* right section */}
|
||||
<div className="flex flex-col p-3 justify-evenly sm:gap-3 gap-7 sm:ml-10 min-h-[300px]">
|
||||
{categoryItems?.map((item) => (
|
||||
<Link href={item.url} key={item.id} onClick={onClose}>
|
||||
<h2 className="text-xl font-semibold text-slate-900">
|
||||
{item.label}
|
||||
</h2>
|
||||
</Link>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default FullWidthMenu;
|
||||
261
components/header/Header.jsx
Normal file
261
components/header/Header.jsx
Normal file
@@ -0,0 +1,261 @@
|
||||
"use client";
|
||||
|
||||
import React from "react";
|
||||
import "./Header.css"; // Include your styles
|
||||
|
||||
import HeaderTwo from "./HeaderTwo";
|
||||
|
||||
const Header = () => {
|
||||
return (
|
||||
<>
|
||||
<header className="desctop-menu-large small-header headertype2">
|
||||
<nav className="panel-menu mobile-main-menu">
|
||||
<ul>
|
||||
<li className="">
|
||||
<a href="/pages/buy-rudraksha">Rudraksha</a>
|
||||
<ul>
|
||||
<li>
|
||||
<a href="/collections/nirakar-zero-mukhi">Nirakar (0) Mukhi </a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="/collections/one-mukhi-1-face-rudraksha">1 Mukhi </a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="/collections/two-mukhi-2-face-rudraksha">2 Mukhi</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="/collections/three-mukhi-3-face-rudraksha">3 Mukhi</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="/collections/four-mukhi-4-face-rudraksha">4 Mukhi</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="/collections/five-mukhi-5-face-rudraksha">5 Mukhi</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="/collections/six-mukhi-6-face-rudraksha">6 Mukhi </a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="/collections/seven-mukhi-7-face-rudraksha">7 Mukhi </a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="/collections/eight-mukhi-8-face-rudraksha">8 Mukhi </a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="/collections/nine-mukhi-9-face-rudraksha">9 Mukhi </a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="/collections/ten-mukhi-10-face-rudraksha">10 Mukhi</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="/collections/eleven-mukhi-11-face-rudraksha">
|
||||
11 Mukhi
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="/collections/twelve-mukhi-12-face-rudraksha">
|
||||
12 Mukhi{" "}
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="/collections/thirteen-mukhi-13-face-rudraksha">
|
||||
13 Mukhi{" "}
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="/collections/fourteen-mukhi-14-face-rudraksha">
|
||||
14 Mukhi{" "}
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="/collections/15-mukhi-rudraksha-nepali">15 Mukhi </a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="/collections/sixteen-mukhi-16-face-rudraksha">
|
||||
16 Mukhi{" "}
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="/collections/seventeen-mukhi-17-face-rudraksha">
|
||||
17 Mukhi
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="/collections/eighteen-mukhi-18-face-rudraksha">
|
||||
18 Mukhi{" "}
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="/collections/nineteen-mukhi-19-face-rudraksha">
|
||||
19 Mukhi
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="/collections/twenty-mukhi-20-face-rudraksha">
|
||||
20 Mukhi{" "}
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="/collections/twenty-one-mukhi-21-face-rudraksha">
|
||||
21 Mukhi{" "}
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="/collections/twenty-two-mukhi-22-face-rudraksha">
|
||||
22 Mukhi{" "}
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="/collections/twenty-three-mukhi-23-face-rudraksha">
|
||||
23 Mukhi{" "}
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="/collections/twenty-four-mukhi-24-face-rudraksha">
|
||||
24 Mukhi{" "}
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="/collections/25-mukhi-rudraksha">25 Mukhi </a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="/collections/26-mukhi-rudraksha">26 Mukhi </a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="/collections/trijuti-rudraksha">Trijuti Rudraksha </a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="/collections/gauri-shankar-rudraksha">
|
||||
Gauri Shankar Rudraksha{" "}
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="/collections/ganesh-rudraksha">Ganesh Rudraksha </a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="/collections/garbha-gauri-rudraksha">
|
||||
Garbha Gauri Rurdaksha{" "}
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li className="">
|
||||
<a href="/pages/exclusive-rudraksha">Exclusive</a>
|
||||
</li>
|
||||
<li className="">
|
||||
<a href="/collections/siddha-mala">Siddha Mala</a>
|
||||
<ul>
|
||||
<li>
|
||||
<a href="/products/siddha-mala-economy-1">
|
||||
Siddha Mala (Economy)
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="/products/siddha-mala-basic">Basic Siddha Mala</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="/products/sarva-siddha-mala">Sarva Siddha Mala </a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="/products/karya-siddha-mala">Karya Siddha Mala</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="/products/gayatri-siddha-mala">Gayatri Siddha Mala</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="/products/maha-mrityunjaya-siddha-mala">
|
||||
Maha MrityunJaya Siddha Mala
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="/products/mangal-siddha-mala">Mangal Siddha Mala</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="/products/indonesian-siddha-mala">
|
||||
Indonesian Siddha Mala
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li className="">
|
||||
<a href="/products/premium-rudraksha-consultation-astrology">
|
||||
Rudraksha Consultation
|
||||
</a>
|
||||
</li>
|
||||
<li className="">
|
||||
<a href="/collections/shaligram">Shaligram</a>
|
||||
<ul>
|
||||
<li>
|
||||
<a href="/collections/vishnu-dashavatar-shaligrams">
|
||||
Vishnu Dashavatar Shaligrams
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="/collections/most-worshipped-shaligrams">
|
||||
Most Worshipped Shaligrams
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li className="main-menus last-child">
|
||||
<a href="#more_menus">More</a>
|
||||
</li>
|
||||
<li className="item-categories">
|
||||
<a href="/collections/online-pooja">
|
||||
<span>Pooja</span>
|
||||
</a>
|
||||
</li>
|
||||
<li className="item-categories">
|
||||
<a href="/collections/rudraksha-japa-mala">
|
||||
<span>Japa Mala</span>
|
||||
</a>
|
||||
</li>
|
||||
<li className="item-categories">
|
||||
<a href="/pages/certification-and-guarantee">
|
||||
<span>Certification and Guarantee</span>
|
||||
</a>
|
||||
</li>
|
||||
<li className="item-categories">
|
||||
<a href="/pages/rudraksha-combination">
|
||||
<span>Combination</span>
|
||||
</a>
|
||||
</li>
|
||||
<li className="item-categories">
|
||||
<a href="/collections/murti-yantra">
|
||||
<span>Murtis & Yantra</span>
|
||||
</a>
|
||||
</li>
|
||||
<li className="item-categories">
|
||||
<a href="/pages/energization">
|
||||
<span>Rudraksha Energization</span>
|
||||
</a>
|
||||
</li>
|
||||
<li className="item-categories">
|
||||
<a href="/pages/about-us">
|
||||
<span>Why Gupta Rudraksha?</span>
|
||||
</a>
|
||||
</li>
|
||||
<li className="item-categories">
|
||||
<a href="/pages/contact">
|
||||
<span>Contact Us</span>
|
||||
</a>
|
||||
</li>
|
||||
<li className="item-categories">
|
||||
<a href="/blogs/blog">
|
||||
<span>Blogs</span>
|
||||
</a>
|
||||
</li>
|
||||
<li className="item-categories">
|
||||
<a href="/pages/knowledge-center">
|
||||
<span>Knowledge Center</span>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
</header>
|
||||
<HeaderTwo />
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default Header;
|
||||
105
components/header/HeaderTwo.jsx
Normal file
105
components/header/HeaderTwo.jsx
Normal file
@@ -0,0 +1,105 @@
|
||||
import React from "react";
|
||||
import "./HeaderTwo.css";
|
||||
import Image from "next/image";
|
||||
const HeaderTwo = () => {
|
||||
return (
|
||||
<div className="tt-mobile-header tt-mobile-header-inline tt-mobile-header-inline-stuck">
|
||||
<div className="container-fluid">
|
||||
<div className="tt-header-row">
|
||||
<div className="tt-mobile-parent-menu">
|
||||
<div className="tt-menu-toggle mainmenumob-js">
|
||||
<svg
|
||||
width={17}
|
||||
height={15}
|
||||
viewBox="0 0 17 15"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M16.4023 0.292969C16.4935 0.397135 16.5651 0.507812 16.6172 0.625C16.6693 0.742188 16.6953 0.865885 16.6953 0.996094C16.6953 1.13932 16.6693 1.26953 16.6172 1.38672C16.5651 1.50391 16.4935 1.60807 16.4023 1.69922C16.2982 1.80339 16.1875 1.88151 16.0703 1.93359C15.9531 1.97266 15.8294 1.99219 15.6992 1.99219H1.69531C1.55208 1.99219 1.42188 1.97266 1.30469 1.93359C1.1875 1.88151 1.08333 1.80339 0.992188 1.69922C0.888021 1.60807 0.809896 1.50391 0.757812 1.38672C0.71875 1.26953 0.699219 1.13932 0.699219 0.996094C0.699219 0.865885 0.71875 0.742188 0.757812 0.625C0.809896 0.507812 0.888021 0.397135 0.992188 0.292969C1.08333 0.201823 1.1875 0.130208 1.30469 0.078125C1.42188 0.0260417 1.55208 0 1.69531 0H15.6992C15.8294 0 15.9531 0.0260417 16.0703 0.078125C16.1875 0.130208 16.2982 0.201823 16.4023 0.292969ZM16.4023 6.28906C16.4935 6.39323 16.5651 6.50391 16.6172 6.62109C16.6693 6.73828 16.6953 6.86198 16.6953 6.99219C16.6953 7.13542 16.6693 7.26562 16.6172 7.38281C16.5651 7.5 16.4935 7.60417 16.4023 7.69531C16.2982 7.79948 16.1875 7.8776 16.0703 7.92969C15.9531 7.98177 15.8294 8.00781 15.6992 8.00781H1.69531C1.55208 8.00781 1.42188 7.98177 1.30469 7.92969C1.1875 7.8776 1.08333 7.79948 0.992188 7.69531C0.888021 7.60417 0.809896 7.5 0.757812 7.38281C0.71875 7.26562 0.699219 7.13542 0.699219 6.99219C0.699219 6.86198 0.71875 6.73828 0.757812 6.62109C0.809896 6.50391 0.888021 6.39323 0.992188 6.28906C1.08333 6.19792 1.1875 6.1263 1.30469 6.07422C1.42188 6.02214 1.55208 5.99609 1.69531 5.99609H15.6992C15.8294 5.99609 15.9531 6.02214 16.0703 6.07422C16.1875 6.1263 16.2982 6.19792 16.4023 6.28906ZM16.4023 12.3047C16.4935 12.3958 16.5651 12.5 16.6172 12.6172C16.6693 12.7344 16.6953 12.8646 16.6953 13.0078C16.6953 13.138 16.6693 13.2617 16.6172 13.3789C16.5651 13.4961 16.4935 13.6068 16.4023 13.7109C16.2982 13.8021 16.1875 13.8737 16.0703 13.9258C15.9531 13.9779 15.8294 14.0039 15.6992 14.0039H1.69531C1.55208 14.0039 1.42188 13.9779 1.30469 13.9258C1.1875 13.8737 1.08333 13.8021 0.992188 13.7109C0.888021 13.6068 0.809896 13.4961 0.757812 13.3789C0.71875 13.2617 0.699219 13.138 0.699219 13.0078C0.699219 12.8646 0.71875 12.7344 0.757812 12.6172C0.809896 12.5 0.888021 12.3958 0.992188 12.3047C1.08333 12.2005 1.1875 12.1224 1.30469 12.0703C1.42188 12.0182 1.55208 11.9922 1.69531 11.9922H15.6992C15.8294 11.9922 15.9531 12.0182 16.0703 12.0703C16.1875 12.1224 16.2982 12.2005 16.4023 12.3047Z"
|
||||
fill="#191919"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
<div className="tt-logo-container">
|
||||
<a className="tt-logo tt-logo-alignment" href="/">
|
||||
<Image
|
||||
src="images/logo_95x.svg"
|
||||
alt="Logo Rudraksha | Gupta Rudraksha"
|
||||
width={95}
|
||||
height={95}
|
||||
className="tt-retina"
|
||||
srcSet="images/logo_95x.svg 1x, images/logo_190x.svg 2x"
|
||||
/>
|
||||
</a>
|
||||
</div>
|
||||
<div className="tt-mobile-parent-menu-icons">
|
||||
{/* search */}
|
||||
<div className="tt-mobile-parent-search tt-parent-box">
|
||||
{/* tt-search */}
|
||||
<div className="tt-search tt-dropdown-obj">
|
||||
<button
|
||||
className="tt-dropdown-toggle"
|
||||
data-tooltip="Search"
|
||||
data-tposition="bottom"
|
||||
>
|
||||
<svg
|
||||
style={{ width: "2.5rem", height: "2.5rem" }}
|
||||
width={25}
|
||||
height={25}
|
||||
viewBox="0 0 25 25"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M22.25 22.8281L20.25 20.8281M11.75 21.8281C12.9976 21.8281 14.2329 21.5824 15.3855 21.105C16.5381 20.6276 17.5854 19.9278 18.4675 19.0456C19.3497 18.1635 20.0494 17.1162 20.5269 15.9636C21.0043 14.811 21.25 13.5757 21.25 12.3281C21.25 11.0806 21.0043 9.84523 20.5269 8.69263C20.0494 7.54004 19.3497 6.49277 18.4675 5.61061C17.5854 4.72845 16.5381 4.02869 15.3855 3.55127C14.2329 3.07385 12.9976 2.82812 11.75 2.82813C9.23044 2.82813 6.81408 3.82901 5.03249 5.61061C3.25089 7.39221 2.25 9.80857 2.25 12.3281C2.25 14.8477 3.25089 17.264 5.03249 19.0456C6.81408 20.8272 9.23044 21.8281 11.75 21.8281Z"
|
||||
stroke="black"
|
||||
strokeWidth="1.5"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
</svg>
|
||||
</button>
|
||||
<div className="tt-dropdown-menu">
|
||||
<div className="container">
|
||||
<form action="/search" method="get" role="search">
|
||||
<div className="tt-col">
|
||||
<input
|
||||
type="hidden"
|
||||
name="type"
|
||||
defaultValue="product"
|
||||
/>
|
||||
<input
|
||||
className="tt-search-input"
|
||||
type="search"
|
||||
name="q"
|
||||
placeholder="SEARCH PRODUCTS..."
|
||||
aria-label="SEARCH PRODUCTS..."
|
||||
/>
|
||||
<button type="submit" className="tt-btn-search" />
|
||||
</div>
|
||||
<div className="tt-col">
|
||||
<button className="tt-btn-close icon-f-84" />
|
||||
</div>
|
||||
<div className="tt-info-text">
|
||||
What are you Looking for?
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/* /tt-search */}
|
||||
</div>
|
||||
{/* /search */}
|
||||
{/* cart */}
|
||||
<div className="tt-mobile-parent-cart tt-parent-box" />
|
||||
{/* /cart */}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default HeaderTwo;
|
||||
114
components/header/Navbar.jsx
Normal file
114
components/header/Navbar.jsx
Normal file
@@ -0,0 +1,114 @@
|
||||
"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"
|
||||
|
||||
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()
|
||||
|
||||
useEffect(() => {
|
||||
setIsMounted(true)
|
||||
const handleScroll = () => {
|
||||
setIsScrolled(window.scrollY > 60)
|
||||
}
|
||||
|
||||
window.addEventListener("scroll", handleScroll)
|
||||
return () => window.removeEventListener("scroll", handleScroll)
|
||||
}, [])
|
||||
|
||||
if (!isMounted) {
|
||||
return null // or a loading placeholder
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
<header className="fixed top-0 left-0 right-0 z-50 transition-all duration-200">
|
||||
<nav className={`bg-white p-4 ${isScrolled ? "shadow-lg" : ""}`}>
|
||||
<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} />}
|
||||
</button>
|
||||
<Link href={"/"} className="flex items-center space-x-2">
|
||||
<Image src="/logo1.jpg" alt="Logo" width={56} height={56} className="object-contain" />
|
||||
</Link>
|
||||
</div>
|
||||
|
||||
{!isOpen && (
|
||||
<div
|
||||
className={`hidden lg:flex items-center w-1/2 space-x-9 capitalize text-xl ${
|
||||
isScrolled ? "opacity-100" : "opacity-0"
|
||||
} transition-opacity duration-200`}
|
||||
>
|
||||
<NavigationMenu className="text-xl">
|
||||
<NavigationMenuList className="text-2xl">
|
||||
<DynamicNavbar toggleMenu={toggleMenu} />
|
||||
</NavigationMenuList>
|
||||
</NavigationMenu>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<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"}`} />
|
||||
</Link>
|
||||
<div className={`cursor-pointer ${isScrolled ? "block" : "hidden"}`}>
|
||||
{token ? (
|
||||
<Link href="/accounts/profile">
|
||||
<UserRound size={20} />
|
||||
</Link>
|
||||
) : (
|
||||
<Link href="/accounts/login">
|
||||
<button className="bg-[#c19a5b] text-white px-3 py-1 rounded hover:bg-[#b48943] text-sm">
|
||||
Login
|
||||
</button>
|
||||
</Link>
|
||||
)}
|
||||
</div>
|
||||
<CurrencySelect
|
||||
selectedCurrency={selectedCurrency}
|
||||
setSelectedCurrency={setSelectedCurrency}
|
||||
SUPPORTED_CURRENCIES={SUPPORTED_CURRENCIES}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
{!isOpen && (
|
||||
<div
|
||||
className={`sm:block hidden bg-white p-2 transition-all duration-300 ${
|
||||
isScrolled ? "opacity-0 h-0 overflow-hidden" : "opacity-100"
|
||||
}`}
|
||||
>
|
||||
<div className="container mx-auto flex justify-center items-center space-x-16">
|
||||
<DynamicNavbar toggleMenu={toggleMenu} />
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</header>
|
||||
|
||||
<FullWidthMenu isOpen={isOpen} onClose={toggleMenu} isScrolled={isScrolled} />
|
||||
|
||||
<div className="h-[104px] sm:h-[150px]"></div>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
export default Navbar
|
||||
|
||||
31
components/header/TopBanner.jsx
Normal file
31
components/header/TopBanner.jsx
Normal file
@@ -0,0 +1,31 @@
|
||||
import React from "react";
|
||||
|
||||
const TopBanner = () => {
|
||||
return (
|
||||
<div className="h-12 bg-gradient-to-r from-[#96724f] to-[#AC8C6B] flex items-center text-white">
|
||||
<marquee
|
||||
behavior=""
|
||||
direction=""
|
||||
className="w-full flex items-center"
|
||||
>
|
||||
<div className="flex items-center space-x-2">
|
||||
<svg
|
||||
width="18"
|
||||
height="18"
|
||||
viewBox="0 0 18 18"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M12.4999 1.66699L11.2499 2.91699L12.4999 4.16699L13.7499 2.91699L12.4999 1.66699ZM9.16658 2.50033C8.33325 7.50033 14.1666 8.33366 16.6666 5.00033L14.9999 3.75033C14.1666 5.00033 10.8333 6.66699 9.16658 2.50033ZM7.49992 5.83366C5.83325 5.83366 3.74992 7.08366 3.74992 7.08366L4.99992 9.16699C5.83325 8.33366 7.49992 7.91699 8.33325 8.33366C9.99992 9.16699 7.49992 10.8337 5.83325 10.0003V12.917C8.33325 11.667 9.99992 13.3337 9.16658 14.5837C6.66658 18.3337 2.49992 13.3337 2.49992 10.8337C0.833251 15.8337 4.99992 18.3337 7.49992 18.3337C9.99992 18.3337 11.6666 16.667 10.4166 12.5003H11.6666C10.4166 16.2503 14.9999 20.0003 17.4999 15.0003C18.3333 13.3337 18.3333 7.91699 14.1666 7.91699C10.8333 7.91699 11.6666 12.5003 8.74992 11.2503C11.6666 8.33366 9.99992 5.83366 7.49992 5.83366ZM15.8333 10.0003C18.3333 12.5003 12.4999 17.5003 12.4999 12.5003C12.4999 10.8337 14.1666 8.75033 15.8333 10.0003Z"
|
||||
fill="white"
|
||||
></path>
|
||||
</svg>
|
||||
<span>Place your order by September 26th to receive your items in Navaratri</span>
|
||||
</div>
|
||||
</marquee>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default TopBanner;
|
||||
98
components/header/hover-content/HoverRudrakshaContent.jsx
Normal file
98
components/header/hover-content/HoverRudrakshaContent.jsx
Normal file
@@ -0,0 +1,98 @@
|
||||
import React, { useState } from 'react';
|
||||
import { ChevronRight } from 'lucide-react';
|
||||
|
||||
const rudrakshaData = {
|
||||
title: "Rudraksha",
|
||||
subtitle: "Explore the World's largest collection of Authentic A+ Grade Gupta Rudraksha.",
|
||||
buttonText: "View All Collection",
|
||||
columns: [
|
||||
[
|
||||
{ name: "Nirakar (0) Mukhi" },
|
||||
{ name: "1 Mukhi" },
|
||||
{ name: "2 Mukhi" },
|
||||
{ name: "3 Mukhi" },
|
||||
{ name: "4 Mukhi" },
|
||||
{ name: "5 Mukhi" },
|
||||
{ name: "6 Mukhi" }
|
||||
],
|
||||
[
|
||||
{ name: "7 Mukhi" },
|
||||
{ name: "8 Mukhi" },
|
||||
{ name: "9 Mukhi" },
|
||||
{ name: "10 Mukhi" },
|
||||
{ name: "11 Mukhi" },
|
||||
{ name: "12 Mukhi" },
|
||||
{ name: "13 Mukhi" }
|
||||
],
|
||||
[
|
||||
{ name: "14 Mukhi" },
|
||||
{ name: "15 Mukhi" },
|
||||
{ name: "16 Mukhi" },
|
||||
{ name: "17 Mukhi" },
|
||||
{ name: "18 Mukhi" },
|
||||
{ name: "19 Mukhi" },
|
||||
{ name: "20 Mukhi" }
|
||||
],
|
||||
[
|
||||
{ name: "21 Mukhi" },
|
||||
{ name: "22 Mukhi" },
|
||||
{ name: "23 Mukhi" },
|
||||
{ name: "24 Mukhi" },
|
||||
{ name: "25 Mukhi" },
|
||||
{ name: "26 Mukhi" }
|
||||
],
|
||||
[
|
||||
{ name: "Trijuti Rudraksha" },
|
||||
{ name: "Gauri Shankar Rudraksha" },
|
||||
{ name: "Ganesh Rudraksha" },
|
||||
{ name: "Garbha Gauri Rurdaksha" }
|
||||
]
|
||||
]
|
||||
};
|
||||
|
||||
const HoverRudrakshaContent = () => {
|
||||
const [selectedMukhi, setSelectedMukhi] = useState(null);
|
||||
|
||||
return (
|
||||
<div className="bg-gradient-to-r from-orange-100 to-red-100 max-h-[50vh] min-w-[100vw] overflow-y-auto p-8">
|
||||
<div className=" mx-auto bg-white rounded-xl shadow-2xl overflow-hidden">
|
||||
<div className="md:flex">
|
||||
<div className=" bg-orange-600 text-white p-8">
|
||||
<h2 className="text-4xl font-bold mb-4">{rudrakshaData.title}</h2>
|
||||
<p className="mb-8 text-lg">{rudrakshaData.subtitle}</p>
|
||||
<button className="bg-white text-orange-600 px-6 py-3 rounded-full font-semibold hover:bg-orange-100 transition duration-300">
|
||||
{rudrakshaData.buttonText}
|
||||
</button>
|
||||
</div>
|
||||
<div className=" p-8">
|
||||
<div className="grid md:grid-cols-5 gap-6">
|
||||
{rudrakshaData.columns.map((column, columnIndex) => (
|
||||
<div key={columnIndex}>
|
||||
{column.map((item, itemIndex) => (
|
||||
<div
|
||||
key={itemIndex}
|
||||
className="mb-2 cursor-pointer group"
|
||||
onClick={() => setSelectedMukhi(item.name)}
|
||||
>
|
||||
<div className="flex items-center space-x-2 p-2 rounded-lg hover:bg-orange-100 transition duration-300">
|
||||
<ChevronRight className="text-orange-600 opacity-0 group-hover:opacity-100 transition-opacity duration-300" size={16} />
|
||||
<span className="text-sm font-medium text-gray-700 group-hover:text-orange-600">{item.name}</span>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{selectedMukhi && (
|
||||
<div className="p-4 bg-orange-100 text-center">
|
||||
<p className="text-lg font-semibold text-orange-800">Selected: {selectedMukhi}</p>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default HoverRudrakshaContent;
|
||||
37
components/header/hover-content/HoverShaligram.jsx
Normal file
37
components/header/hover-content/HoverShaligram.jsx
Normal file
@@ -0,0 +1,37 @@
|
||||
import React from 'react';
|
||||
import Link from 'next/link';
|
||||
|
||||
const HoverShaligram = () => {
|
||||
return (
|
||||
<div className="grid grid-cols-3 gap-4 w-full">
|
||||
<div className='w-full'>
|
||||
<h3 className="font-bold mb-2">Shaligram Types</h3>
|
||||
<ul className="space-y-1">
|
||||
<li><Link href="/shaligram/vishnu">Vishnu Shaligram</Link></li>
|
||||
<li><Link href="/shaligram/lakshmi">Lakshmi Shaligram</Link></li>
|
||||
<li><Link href="/shaligram/narayan">Narayan Shaligram</Link></li>
|
||||
{/* Add more Shaligram types as needed */}
|
||||
</ul>
|
||||
</div>
|
||||
<div>
|
||||
<h3 className="font-bold mb-2">Benefits</h3>
|
||||
<ul className="space-y-1">
|
||||
<li>Spiritual Growth</li>
|
||||
<li>Protection</li>
|
||||
<li>Prosperity</li>
|
||||
{/* Add more benefits as needed */}
|
||||
</ul>
|
||||
</div>
|
||||
<div>
|
||||
<h3 className="font-bold mb-2">Resources</h3>
|
||||
<ul className="space-y-1">
|
||||
<li><Link href="/shaligram/care">Care Instructions</Link></li>
|
||||
<li><Link href="/shaligram/history">History of Shaligram</Link></li>
|
||||
<li><Link href="/shaligram/faq">FAQ</Link></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default HoverShaligram;
|
||||
Reference in New Issue
Block a user