first commit
This commit is contained in:
CHIEFSOFT\ameye
@@ -0,0 +1,90 @@
|
||||
'use client'
|
||||
|
||||
import React, { useState , useEffect } from "react";
|
||||
import Link from "next/link";
|
||||
import MegaMenu from "./mega-menu/MegaMenu";
|
||||
import MegaMenuMobile from "./mega-menu/MegaMenuMobile";
|
||||
import Image from "next/image";
|
||||
|
||||
const Header = () => {
|
||||
const [navbar, setNavbar] = useState(false);
|
||||
|
||||
const changeBackground = () => {
|
||||
if (typeof window !== "undefined") {
|
||||
if (window.scrollY >= 68) {
|
||||
setNavbar(true);
|
||||
} else {
|
||||
setNavbar(false);
|
||||
}
|
||||
}
|
||||
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
window.addEventListener("scroll", changeBackground);
|
||||
|
||||
return () => {
|
||||
window.removeEventListener("scroll", changeBackground);
|
||||
}
|
||||
}, [])
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
return (
|
||||
<>
|
||||
<div
|
||||
className={
|
||||
navbar
|
||||
? "theme-main-menu sticky-menu theme-menu-one bg-none fixed"
|
||||
: "theme-main-menu sticky-menu theme-menu-one bg-none"
|
||||
}
|
||||
>
|
||||
<div className="d-flex align-items-center justify-content-between">
|
||||
<div className="logo">
|
||||
<Link href="/">
|
||||
<Image width="87" height="40" src="/images/logo/deski_01.svg" alt="brand logo" />
|
||||
</Link>
|
||||
</div>
|
||||
{/* End Logo */}
|
||||
|
||||
<nav id="mega-menu-holder" className="navbar navbar-expand-lg">
|
||||
<div className="container nav-container">
|
||||
<div
|
||||
className="navbar-collapse collapse"
|
||||
id="navbarSupportedContent"
|
||||
>
|
||||
<div className="d-lg-flex align-items-center">
|
||||
<MegaMenu />
|
||||
{/* End MegaMenu */}
|
||||
|
||||
{/*<ul className="right-button-group d-flex align-items-center justify-content-center">*/}
|
||||
{/* <li>*/}
|
||||
{/* <Link href="/login" className="signIn-action">*/}
|
||||
{/* Login*/}
|
||||
{/* </Link>*/}
|
||||
{/* </li>*/}
|
||||
{/* <li>*/}
|
||||
{/* <Link href="/signup" className="signUp-action">*/}
|
||||
{/* Get Started*/}
|
||||
{/* </Link>*/}
|
||||
{/* </li>*/}
|
||||
{/*</ul>*/}
|
||||
{/* End right-button-group */}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
{/* End nav */}
|
||||
</div>
|
||||
|
||||
<MegaMenuMobile />
|
||||
{/* End Mega Menu for Mobile */}
|
||||
</div>
|
||||
{/* /.theme-main-menu */}
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default Header;
|
||||
@@ -0,0 +1,90 @@
|
||||
'use client'
|
||||
|
||||
import React, { useState , useEffect } from "react";
|
||||
import Link from "next/link";
|
||||
import MegaMenu from "./mega-menu/MegaMenu";
|
||||
import MegaMenuMobile from "./mega-menu/MegaMenuMobile";
|
||||
import Image from "next/image";
|
||||
|
||||
const HeaderFive = () => {
|
||||
const [navbar, setNavbar] = useState(false);
|
||||
|
||||
const changeBackground = () => {
|
||||
if (typeof window !== "undefined") {
|
||||
if (window.scrollY >= 68) {
|
||||
setNavbar(true);
|
||||
} else {
|
||||
setNavbar(false);
|
||||
}
|
||||
}
|
||||
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
|
||||
window.addEventListener("scroll", changeBackground);
|
||||
return () => {
|
||||
window.removeEventListener("scroll", changeBackground);
|
||||
}
|
||||
}, [])
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
return (
|
||||
<>
|
||||
<div
|
||||
className={
|
||||
navbar
|
||||
? "theme-main-menu sticky-menu theme-menu-one center-white fixed"
|
||||
: "theme-main-menu sticky-menu theme-menu-one center-white"
|
||||
}
|
||||
>
|
||||
<div className="d-flex align-items-center justify-content-center">
|
||||
<div className="logo">
|
||||
<Link href="/">
|
||||
<Image width="137" height="34" src="/images/logo/deski_09.svg" alt="brand logo" />
|
||||
</Link>
|
||||
</div>
|
||||
{/* End Logo */}
|
||||
|
||||
<nav id="mega-menu-holder" className="navbar navbar-expand-lg">
|
||||
<div className="container nav-container">
|
||||
<div
|
||||
className="navbar-collapse collapse"
|
||||
id="navbarSupportedContent"
|
||||
>
|
||||
<div className="d-lg-flex align-items-center">
|
||||
<MegaMenu />
|
||||
{/* End MegaMenu */}
|
||||
|
||||
{/*<ul className="right-button-group d-flex align-items-center justify-content-center">*/}
|
||||
{/* <li>*/}
|
||||
{/* <Link href="/login" className="signIn-action">*/}
|
||||
{/* Login*/}
|
||||
{/* </Link>*/}
|
||||
{/* </li>*/}
|
||||
{/* <li>*/}
|
||||
{/* <Link href="/signup" className="signUp-action">*/}
|
||||
{/* Get Started*/}
|
||||
{/* </Link>*/}
|
||||
{/* </li>*/}
|
||||
{/*</ul>*/}
|
||||
{/* End right-button-group */}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
{/* End nav */}
|
||||
</div>
|
||||
|
||||
<MegaMenuMobile />
|
||||
{/* End Mega Menu for Mobile */}
|
||||
</div>
|
||||
{/* /.theme-main-menu */}
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default HeaderFive;
|
||||
@@ -0,0 +1,94 @@
|
||||
'use client'
|
||||
|
||||
import React, { useState , useEffect} from "react";
|
||||
|
||||
import Link from "next/link";
|
||||
import MegaMenu from "./mega-menu/MegaMenu";
|
||||
import MegaMenuMobile from "./mega-menu/MegaMenuMobile";
|
||||
import Image from "next/image";
|
||||
|
||||
const HeaderFour = () => {
|
||||
const [navbar, setNavbar] = useState(false);
|
||||
|
||||
const changeBackground = () => {
|
||||
if (typeof window !== "undefined") {
|
||||
|
||||
if (window.scrollY >= 68) {
|
||||
setNavbar(true);
|
||||
} else {
|
||||
setNavbar(false);
|
||||
}
|
||||
}
|
||||
};
|
||||
useEffect(() => {
|
||||
|
||||
window.addEventListener("scroll", changeBackground);
|
||||
|
||||
|
||||
|
||||
return () => {
|
||||
|
||||
window.removeEventListener("scroll", changeBackground);
|
||||
}
|
||||
}, [])
|
||||
|
||||
|
||||
|
||||
|
||||
return (
|
||||
<>
|
||||
<div
|
||||
className={
|
||||
navbar
|
||||
? "theme-main-menu sticky-menu theme-menu-four bg-none fixed"
|
||||
: "theme-main-menu sticky-menu theme-menu-four bg-none"
|
||||
}
|
||||
>
|
||||
<div className="d-flex align-items-center justify-content-between">
|
||||
<div className="logo">
|
||||
<Link href="/">
|
||||
<Image width={136}
|
||||
height={43} src="/images/logo/deski_05.svg" alt="brand logo" />
|
||||
</Link>
|
||||
</div>
|
||||
{/* End Logo */}
|
||||
|
||||
<nav id="mega-menu-holder" className="navbar navbar-expand-lg">
|
||||
<div className="container nav-container">
|
||||
<div
|
||||
className="navbar-collapse collapse"
|
||||
id="navbarSupportedContent"
|
||||
>
|
||||
<div className="d-lg-flex align-items-center">
|
||||
<MegaMenu />
|
||||
{/* End MegaMenu */}
|
||||
|
||||
{/*<ul className="right-button-group d-flex align-items-center justify-content-center">*/}
|
||||
{/* <li>*/}
|
||||
{/* <Link href="/login" className="signIn-action">*/}
|
||||
{/* Login*/}
|
||||
{/* </Link>*/}
|
||||
{/* </li>*/}
|
||||
{/* <li>*/}
|
||||
{/* <Link href="/signup" className="theme-btn-five">*/}
|
||||
{/* Create your event*/}
|
||||
{/* </Link>*/}
|
||||
{/* </li>*/}
|
||||
{/*</ul>*/}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
{/* End nav */}
|
||||
</div>
|
||||
|
||||
<MegaMenuMobile />
|
||||
|
||||
{/* End Mega Menu for Mobile */}
|
||||
</div>
|
||||
{/* /.theme-main-menu */}
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default HeaderFour;
|
||||
@@ -0,0 +1,98 @@
|
||||
'use client'
|
||||
import Image from "next/image";
|
||||
import React, { useState , useEffect } from "react";
|
||||
import Link from "next/link";
|
||||
import MegaMenu from "./mega-menu/MegaMenu";
|
||||
import MegaMenuMobile from "./mega-menu/MegaMenuMobile";
|
||||
|
||||
const HeaderThree = () => {
|
||||
const [navbar, setNavbar] = useState(false);
|
||||
|
||||
const changeBackground = () => {
|
||||
if (typeof window !== "undefined") {
|
||||
if (window.scrollY >= 68) {
|
||||
setNavbar(true);
|
||||
} else {
|
||||
setNavbar(false);
|
||||
}
|
||||
}
|
||||
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
window.addEventListener("scroll", changeBackground);
|
||||
|
||||
return () => {
|
||||
window.removeEventListener("scroll", changeBackground);
|
||||
}
|
||||
}, [])
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
return (
|
||||
<>
|
||||
<div
|
||||
className={
|
||||
navbar
|
||||
? "theme-main-menu sticky-menu theme-menu-three bg-none fixed"
|
||||
: "theme-main-menu sticky-menu theme-menu-three bg-none"
|
||||
}
|
||||
>
|
||||
<div className="d-flex align-items-center justify-content-center">
|
||||
<div className="logo">
|
||||
<Link href="/">
|
||||
<Image width="87" height="40" src="/images/logo/deski_01.svg" alt="brand logo" />
|
||||
</Link>
|
||||
</div>
|
||||
{/* End Logo */}
|
||||
|
||||
<nav id="mega-menu-holder" className="navbar navbar-expand-lg">
|
||||
<div className="container nav-container">
|
||||
<div
|
||||
className="navbar-collapse collapse"
|
||||
id="navbarSupportedContent"
|
||||
>
|
||||
<div className="d-lg-flex justify-content-between align-items-center">
|
||||
<MegaMenu />
|
||||
{/* End MegaMenu */}
|
||||
|
||||
{/*<ul className="right-widget user-login-button d-flex align-items-center justify-content-center">*/}
|
||||
{/* <li>*/}
|
||||
{/* <Link*/}
|
||||
{/* href="/login"*/}
|
||||
{/* className="signIn-action d-flex align-items-center"*/}
|
||||
{/* >*/}
|
||||
{/* <Image width="14" height="19" src="/images/icon/52.svg" alt="icon" />*/}
|
||||
{/* <span>Login</span>*/}
|
||||
{/* </Link>*/}
|
||||
{/* </li>*/}
|
||||
{/* /!* End li *!/*/}
|
||||
{/* <li>*/}
|
||||
{/* <Link*/}
|
||||
{/* href="/signup"*/}
|
||||
{/* className="signUp-action d-flex align-items-center"*/}
|
||||
{/* >*/}
|
||||
{/* <span>Getting Started</span>*/}
|
||||
{/* <Image width={21} height={10} src="/images/icon/53.svg" alt="icon" />*/}
|
||||
{/* </Link>*/}
|
||||
{/* </li>*/}
|
||||
{/*</ul>*/}
|
||||
{/* End right-button-group */}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
{/* End nav */}
|
||||
</div>
|
||||
|
||||
<MegaMenuMobile />
|
||||
{/* End Mega Menu for Mobile */}
|
||||
</div>
|
||||
{/* /.theme-main-menu */}
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default HeaderThree;
|
||||
@@ -0,0 +1,109 @@
|
||||
'use client'
|
||||
|
||||
import React, { useEffect, useState } from "react";
|
||||
import Link from "next/link";
|
||||
import MegaMenu from "./mega-menu/MegaMenu";
|
||||
import MegaMenuMobile from "./mega-menu/MegaMenuMobile";
|
||||
import Image from "next/image";
|
||||
|
||||
const HeaderThree = () => {
|
||||
const [navbar, setNavbar] = useState(false);
|
||||
|
||||
const changeBackground = () => {
|
||||
if (typeof window !== "undefined") {
|
||||
if (window.scrollY >= 68) {
|
||||
setNavbar(true);
|
||||
} else {
|
||||
setNavbar(false);
|
||||
}
|
||||
}
|
||||
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
|
||||
window.addEventListener("scroll", changeBackground);
|
||||
return () => {
|
||||
window.removeEventListener("scroll", changeBackground);
|
||||
}
|
||||
}, [])
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
return (
|
||||
<>
|
||||
<div
|
||||
className={
|
||||
navbar
|
||||
? "theme-main-menu sticky-menu theme-menu-two bg-none fixed"
|
||||
: "theme-main-menu sticky-menu theme-menu-two bg-none"
|
||||
}
|
||||
>
|
||||
<div className="d-flex align-items-center justify-content-center">
|
||||
<div className="logo">
|
||||
<Link href="/">
|
||||
<Image width="87" height="40" src="/images/logo/deski_01.svg" alt="brand logo" />
|
||||
</Link>
|
||||
</div>
|
||||
{/* End Logo */}
|
||||
|
||||
<nav id="mega-menu-holder" className="navbar navbar-expand-lg">
|
||||
<div className="container nav-container">
|
||||
<div
|
||||
className="navbar-collapse collapse"
|
||||
id="navbarSupportedContent"
|
||||
>
|
||||
<div className="d-lg-flex justify-content-between align-items-center">
|
||||
<MegaMenu />
|
||||
{/* End MegaMenu */}
|
||||
|
||||
{/*<ul className="right-widget">*/}
|
||||
{/* <li className="d-sm-flex">*/}
|
||||
{/* <ul className="language-button-group d-flex align-items-center justify-content-center">*/}
|
||||
{/* <li>*/}
|
||||
{/* <a href="#" className="eng-lang active">*/}
|
||||
{/* En.{" "}*/}
|
||||
{/* </a>*/}
|
||||
{/* </li>*/}
|
||||
{/* <li>*/}
|
||||
{/* <a href="#" className="ru-lang">*/}
|
||||
{/* Ru.*/}
|
||||
{/* </a>*/}
|
||||
{/* </li>*/}
|
||||
{/* </ul>*/}
|
||||
{/* /!* End ul *!/*/}
|
||||
|
||||
{/* <ul className="user-login-button d-flex align-items-center justify-content-center">*/}
|
||||
{/* <li>*/}
|
||||
{/* <Link href="/login" className="signIn-action">*/}
|
||||
{/* Login*/}
|
||||
{/* </Link>*/}
|
||||
{/* </li>*/}
|
||||
{/* <li>*/}
|
||||
{/* <Link href="/signup" className="signUp-action">*/}
|
||||
{/* Sign Up*/}
|
||||
{/* </Link>*/}
|
||||
{/* </li>*/}
|
||||
{/* </ul>*/}
|
||||
{/* /!* End ul *!/*/}
|
||||
{/* </li>*/}
|
||||
{/*</ul>*/}
|
||||
{/* End right-button-group */}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
{/* End nav */}
|
||||
</div>
|
||||
|
||||
<MegaMenuMobile />
|
||||
{/* End Mega Menu for Mobile */}
|
||||
</div>
|
||||
{/* /.theme-main-menu */}
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default HeaderThree;
|
||||
@@ -0,0 +1,460 @@
|
||||
|
||||
'use client'
|
||||
|
||||
import Image from 'next/image';
|
||||
import Link from 'next/link';
|
||||
import { usePathname } from 'next/navigation';
|
||||
import React , {useState,useEffect} from 'react'
|
||||
export const menuList = [
|
||||
{
|
||||
title: "Home",
|
||||
links: [
|
||||
{
|
||||
label: "Event Organiser",
|
||||
href: "/",
|
||||
},
|
||||
{
|
||||
label: "Project Management",
|
||||
href: "/project-management",
|
||||
},
|
||||
{
|
||||
label: "Customer Support",
|
||||
href: "/customer-support",
|
||||
},
|
||||
{
|
||||
label: "Doc landing",
|
||||
href: "/doc-landing",
|
||||
},
|
||||
{
|
||||
label: "Product landing",
|
||||
href: "/product-landing",
|
||||
},
|
||||
{
|
||||
label: "Product landing Dark",
|
||||
href: "/product-landing-dark",
|
||||
},
|
||||
{
|
||||
label: "Note Taking App landing",
|
||||
href: "/note-taking-landing",
|
||||
},
|
||||
{
|
||||
label: "Video Editor Landing",
|
||||
href: "/video-editor-landing",
|
||||
},
|
||||
{
|
||||
label: "Appointment Scheduling",
|
||||
href: "/appointment-scheduling",
|
||||
},
|
||||
{
|
||||
label: "Mobile App",
|
||||
href: "/mobile-app-landing",
|
||||
},
|
||||
{
|
||||
label: "Doc Signature",
|
||||
href: "/doc-signature",
|
||||
},
|
||||
{
|
||||
label: "Website Builder",
|
||||
href: "/website-builder",
|
||||
},
|
||||
{
|
||||
label: "Form Survey",
|
||||
href: "/form-survey-landing",
|
||||
},
|
||||
{
|
||||
label: "VR Landing",
|
||||
href: "/vr-landing",
|
||||
},
|
||||
{
|
||||
label: "E-Commerce",
|
||||
href: "/e-commerce",
|
||||
},
|
||||
{
|
||||
label: "Coming Soon",
|
||||
href: "/coming-soon",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Pages",
|
||||
links: [
|
||||
{
|
||||
title: "Pricing",
|
||||
links: [
|
||||
{
|
||||
label: "Customer Support",
|
||||
href: "/pricing-cs",
|
||||
},
|
||||
{
|
||||
label: "Event Organiser",
|
||||
href: "/pricing-eo",
|
||||
},
|
||||
{
|
||||
label: "Project Management",
|
||||
href: "/pricing-pm",
|
||||
},
|
||||
]
|
||||
},
|
||||
{
|
||||
title: "About Us",
|
||||
|
||||
links:[
|
||||
{
|
||||
label: "Customer Support",
|
||||
href: "/about-cs",
|
||||
},
|
||||
{
|
||||
label: "Event Organiser",
|
||||
href: "/about-eo",
|
||||
},
|
||||
{
|
||||
label: "Project Management",
|
||||
href: "/about-pm",
|
||||
},
|
||||
{
|
||||
label: "Documentation",
|
||||
href: "/about-doc",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Contact",
|
||||
links: [
|
||||
{
|
||||
label: "Custom Support",
|
||||
href: "/contact-cs",
|
||||
},
|
||||
{
|
||||
label: "Event Organizer",
|
||||
href: "/contact-eo",
|
||||
},
|
||||
{
|
||||
label: "Project Management",
|
||||
href: "/contact-pm",
|
||||
},
|
||||
{
|
||||
label: "Documentation",
|
||||
href: "/contact-doc",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Teams",
|
||||
links: [
|
||||
{
|
||||
label: "Team Version 01",
|
||||
href: "/team-1",
|
||||
},
|
||||
{
|
||||
label: "Team Version 02",
|
||||
href: "/team-2",
|
||||
},
|
||||
{
|
||||
label: "Team Version 03",
|
||||
href: "/team-3",
|
||||
},
|
||||
{
|
||||
label: "Team Version 04",
|
||||
href: "/team-4",
|
||||
},
|
||||
{
|
||||
label: "Team Version 05",
|
||||
href: "/team-5",
|
||||
},
|
||||
{
|
||||
label: "Team Version 06",
|
||||
href: "/team-6",
|
||||
},
|
||||
{
|
||||
label: "Team Details",
|
||||
href: "/teams/1",
|
||||
},
|
||||
{
|
||||
label: "Team Details Slider",
|
||||
href: "/team-details-v2/1",
|
||||
},
|
||||
],
|
||||
},
|
||||
{ href: "/faq", label: "Faq" },
|
||||
{ href: "/faqs/2", label: "Faq Details" },
|
||||
|
||||
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Features",
|
||||
links: [
|
||||
{
|
||||
title: "Services",
|
||||
links: [
|
||||
{
|
||||
label: "Service Version 01",
|
||||
href: "/service-v1",
|
||||
},
|
||||
{
|
||||
label: "Service Version 02",
|
||||
href: "/service-v2",
|
||||
},
|
||||
{
|
||||
label: "Service Version 03",
|
||||
href: "/service-v3",
|
||||
},
|
||||
{
|
||||
label: "Service Version 04",
|
||||
href: "/service-v4",
|
||||
},
|
||||
{
|
||||
label: "Service Details",
|
||||
href: "/services/3",
|
||||
},
|
||||
]
|
||||
},
|
||||
{
|
||||
title: "Miscellaneous",
|
||||
links: [
|
||||
{
|
||||
label: "Terms & Condition",
|
||||
href: "/terms-conditions",
|
||||
},
|
||||
{
|
||||
label: "Login",
|
||||
href: "/login",
|
||||
},
|
||||
{
|
||||
label: "Signup",
|
||||
href: "/signup",
|
||||
},
|
||||
{
|
||||
label: "404",
|
||||
href: "/not-found",
|
||||
},
|
||||
]
|
||||
},
|
||||
{ href: "/solution-management", label: "Our Solution" },
|
||||
{ href: "/product-customer-support", label: "Product Features" },
|
||||
{ href: "/features-customer-support", label: "Our Features" },
|
||||
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Portfolio",
|
||||
links: [
|
||||
{
|
||||
label: "Classic Style",
|
||||
href: "/classic-style",
|
||||
},
|
||||
{
|
||||
label: "Grid 2 Columns",
|
||||
href: "/grid-two-col",
|
||||
},
|
||||
{
|
||||
label: "Grid 3 Columns",
|
||||
href: "/grid-three-col",
|
||||
},
|
||||
{
|
||||
label: "Gallery Slider",
|
||||
href: "/gallery-slider",
|
||||
},
|
||||
{
|
||||
label: "Grid Single",
|
||||
href: "/grid-single",
|
||||
},
|
||||
{
|
||||
label: "Classic Details",
|
||||
href: "/portfolios/2",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Blogs",
|
||||
links: [
|
||||
{
|
||||
label: "Blog Version 01",
|
||||
href: "/blog-v1",
|
||||
},
|
||||
{
|
||||
label: "Blog Version 02",
|
||||
href: "/blog-v2",
|
||||
},
|
||||
{
|
||||
label: "Blog Version 03",
|
||||
href: "/blog-v3",
|
||||
},
|
||||
{
|
||||
label: "Blog Version 04",
|
||||
href: "/blog-v4",
|
||||
},
|
||||
{
|
||||
label: "Blog Version 05",
|
||||
href: "/blog-v5",
|
||||
},
|
||||
{
|
||||
label: "Blog Version 06",
|
||||
href: "/blog-v6",
|
||||
},
|
||||
{
|
||||
label: "Blog Details",
|
||||
href: "/blogs/3",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Docs",
|
||||
links: [
|
||||
{
|
||||
label: "Full Width",
|
||||
href: "/doc-full-width",
|
||||
},
|
||||
{
|
||||
label: "Full Width Banner",
|
||||
href: "/doc-full-width-banner",
|
||||
},
|
||||
{
|
||||
label: "Doc Box",
|
||||
href: "/doc-box",
|
||||
},
|
||||
{
|
||||
label: "Doc Box With Banner",
|
||||
href: "/doc-box-with-banner",
|
||||
},
|
||||
{
|
||||
label: "Changelog",
|
||||
href: "/changelog",
|
||||
},
|
||||
],
|
||||
},
|
||||
];
|
||||
export default function MobileMenu() {
|
||||
const [showMenu, setShowMenu] = useState(false);
|
||||
const [menuNesting, setMenuNesting] = useState([]);
|
||||
const [menuItem, setMenuItem] = useState("");
|
||||
const [submenu, setSubmenu] = useState("");
|
||||
const pathname = usePathname();
|
||||
|
||||
useEffect(() => {
|
||||
menuList.forEach((elm) => {
|
||||
elm?.links?.forEach((elm2) => {
|
||||
if (elm2.href == pathname) {
|
||||
setMenuItem(elm.title);
|
||||
} else {
|
||||
elm2?.links?.map((elm3) => {
|
||||
if (elm3.href == pathname) {
|
||||
setMenuItem(elm.title);
|
||||
setSubmenu(elm2.title);
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
});
|
||||
}, []);
|
||||
return (
|
||||
<>
|
||||
<div className="sidebarMenu text-dark-1">
|
||||
{menuList.map((elm, i) => {
|
||||
if (elm.title) {
|
||||
return (
|
||||
<div key={i} className="submenuOne">
|
||||
<div
|
||||
className="title title1"
|
||||
onClick={() =>
|
||||
setMenuNesting((pre) =>
|
||||
pre[0] == elm.title ? [] : [elm.title],
|
||||
)
|
||||
}
|
||||
>
|
||||
<span
|
||||
className={
|
||||
elm.title == menuItem ? "activeMenu" : "inActiveMenu"
|
||||
}
|
||||
>
|
||||
{elm.title}
|
||||
</span>
|
||||
|
||||
</div>
|
||||
|
||||
{elm.links &&
|
||||
elm.links.map((itm, index) => (
|
||||
<div
|
||||
key={index}
|
||||
className={
|
||||
menuNesting[0] == elm.title
|
||||
? "toggle active"
|
||||
: "toggle"
|
||||
}
|
||||
>
|
||||
{itm.href && (
|
||||
<Link
|
||||
key={i}
|
||||
className={
|
||||
pathname == itm.href
|
||||
? "activeMenu link"
|
||||
: "link inActiveMenu"
|
||||
}
|
||||
href={itm.href}
|
||||
>
|
||||
{itm.label}
|
||||
</Link>
|
||||
)}
|
||||
|
||||
{itm.links && (
|
||||
<div className="submenuTwo">
|
||||
<div
|
||||
className="title"
|
||||
onClick={() =>
|
||||
setMenuNesting((pre) =>
|
||||
pre[1] == itm.title
|
||||
? [pre[0]]
|
||||
: [pre[0], itm.title],
|
||||
)
|
||||
}
|
||||
>
|
||||
<span
|
||||
className={
|
||||
itm.title == submenu
|
||||
? "activeMenu"
|
||||
: "inActiveMenu"
|
||||
}
|
||||
>
|
||||
{itm.title && itm.title}
|
||||
</span>
|
||||
|
||||
|
||||
</div>
|
||||
<div
|
||||
className={
|
||||
menuNesting[1] == itm.title
|
||||
? "toggle active"
|
||||
: "toggle"
|
||||
}
|
||||
>
|
||||
{itm.links &&
|
||||
itm.links.map((itm2, index3) => (
|
||||
<Link
|
||||
key={index3}
|
||||
className={
|
||||
pathname == itm2.href
|
||||
? "activeMenu link"
|
||||
: "link inActiveMenu"
|
||||
}
|
||||
href={itm2.href}
|
||||
>
|
||||
{itm2.label}
|
||||
</Link>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
})}
|
||||
</div>
|
||||
</>
|
||||
)
|
||||
|
||||
|
||||
|
||||
|
||||
}
|
||||
@@ -0,0 +1,475 @@
|
||||
|
||||
'use client'
|
||||
|
||||
import Image from 'next/image';
|
||||
import Link from 'next/link';
|
||||
import { usePathname } from 'next/navigation';
|
||||
import React , {useState,useEffect} from 'react'
|
||||
export const menuList = [
|
||||
{
|
||||
title: "Home",
|
||||
links: [
|
||||
{
|
||||
label: "Event Organiser",
|
||||
href: "/",
|
||||
},
|
||||
{
|
||||
label: "Project Management",
|
||||
href: "/project-management",
|
||||
},
|
||||
{
|
||||
label: "Customer Support",
|
||||
href: "/customer-support",
|
||||
},
|
||||
{
|
||||
label: "Doc landing",
|
||||
href: "/doc-landing",
|
||||
},
|
||||
{
|
||||
label: "Product landing",
|
||||
href: "/product-landing",
|
||||
},
|
||||
{
|
||||
label: "Product landing Dark",
|
||||
href: "/product-landing-dark",
|
||||
},
|
||||
{
|
||||
label: "Note Taking App landing",
|
||||
href: "/note-taking-landing",
|
||||
},
|
||||
{
|
||||
label: "Video Editor Landing",
|
||||
href: "/video-editor-landing",
|
||||
},
|
||||
{
|
||||
label: "Appointment Scheduling",
|
||||
href: "/appointment-scheduling",
|
||||
},
|
||||
{
|
||||
label: "Mobile App",
|
||||
href: "/mobile-app-landing",
|
||||
},
|
||||
{
|
||||
label: "Doc Signature",
|
||||
href: "/doc-signature",
|
||||
},
|
||||
{
|
||||
label: "Website Builder",
|
||||
href: "/website-builder",
|
||||
},
|
||||
{
|
||||
label: "Form Survey",
|
||||
href: "/form-survey-landing",
|
||||
},
|
||||
{
|
||||
label: "VR Landing",
|
||||
href: "/vr-landing",
|
||||
},
|
||||
{
|
||||
label: "E-Commerce",
|
||||
href: "/e-commerce",
|
||||
},
|
||||
{
|
||||
label: "Coming Soon",
|
||||
href: "/coming-soon",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Pages",
|
||||
links: [
|
||||
{
|
||||
title: "Pricing",
|
||||
links: [
|
||||
{
|
||||
label: "Customer Support",
|
||||
href: "/pricing-cs",
|
||||
},
|
||||
{
|
||||
label: "Event Organiser",
|
||||
href: "/pricing-eo",
|
||||
},
|
||||
{
|
||||
label: "Project Management",
|
||||
href: "/pricing-pm",
|
||||
},
|
||||
]
|
||||
},
|
||||
{
|
||||
title: "About Us",
|
||||
|
||||
links:[
|
||||
{
|
||||
label: "Customer Support",
|
||||
href: "/about-cs",
|
||||
},
|
||||
{
|
||||
label: "Event Organiser",
|
||||
href: "/about-eo",
|
||||
},
|
||||
{
|
||||
label: "Project Management",
|
||||
href: "/about-pm",
|
||||
},
|
||||
{
|
||||
label: "Documentation",
|
||||
href: "/about-doc",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Contact",
|
||||
links: [
|
||||
{
|
||||
label: "Custom Support",
|
||||
href: "/contact-cs",
|
||||
},
|
||||
{
|
||||
label: "Event Organizer",
|
||||
href: "/contact-eo",
|
||||
},
|
||||
{
|
||||
label: "Project Management",
|
||||
href: "/contact-pm",
|
||||
},
|
||||
{
|
||||
label: "Documentation",
|
||||
href: "/contact-doc",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Teams",
|
||||
links: [
|
||||
{
|
||||
label: "Team Version 01",
|
||||
href: "/team-1",
|
||||
},
|
||||
{
|
||||
label: "Team Version 02",
|
||||
href: "/team-2",
|
||||
},
|
||||
{
|
||||
label: "Team Version 03",
|
||||
href: "/team-3",
|
||||
},
|
||||
{
|
||||
label: "Team Version 04",
|
||||
href: "/team-4",
|
||||
},
|
||||
{
|
||||
label: "Team Version 05",
|
||||
href: "/team-5",
|
||||
},
|
||||
{
|
||||
label: "Team Version 06",
|
||||
href: "/team-6",
|
||||
},
|
||||
{
|
||||
label: "Team Details",
|
||||
href: "/teams/1",
|
||||
},
|
||||
{
|
||||
label: "Team Details Slider",
|
||||
href: "/team-details-v2/1",
|
||||
},
|
||||
],
|
||||
},
|
||||
{ href: "/faq", label: "Faq" },
|
||||
{ href: "/faqs/2", label: "Faq Details" },
|
||||
|
||||
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Features",
|
||||
links: [
|
||||
{
|
||||
title: "Services",
|
||||
links: [
|
||||
{
|
||||
label: "Service Version 01",
|
||||
href: "/service-v1",
|
||||
},
|
||||
{
|
||||
label: "Service Version 02",
|
||||
href: "/service-v2",
|
||||
},
|
||||
{
|
||||
label: "Service Version 03",
|
||||
href: "/service-v3",
|
||||
},
|
||||
{
|
||||
label: "Service Version 04",
|
||||
href: "/service-v4",
|
||||
},
|
||||
{
|
||||
label: "Service Details",
|
||||
href: "/services/3",
|
||||
},
|
||||
]
|
||||
},
|
||||
{
|
||||
title: "Miscellaneous",
|
||||
links: [
|
||||
{
|
||||
label: "Terms & Condition",
|
||||
href: "/terms-conditions",
|
||||
},
|
||||
{
|
||||
label: "Login",
|
||||
href: "/login",
|
||||
},
|
||||
{
|
||||
label: "Signup",
|
||||
href: "/signup",
|
||||
},
|
||||
{
|
||||
label: "404",
|
||||
href: "/not-found",
|
||||
},
|
||||
]
|
||||
},
|
||||
{ href: "/solution-management", label: "Our Solution" },
|
||||
{ href: "/product-customer-support", label: "Product Features" },
|
||||
{ href: "/features-customer-support", label: "Our Features" },
|
||||
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Portfolio",
|
||||
links: [
|
||||
{
|
||||
label: "Classic Style",
|
||||
href: "/classic-style",
|
||||
},
|
||||
{
|
||||
label: "Grid 2 Columns",
|
||||
href: "/grid-two-col",
|
||||
},
|
||||
{
|
||||
label: "Grid 3 Columns",
|
||||
href: "/grid-three-col",
|
||||
},
|
||||
{
|
||||
label: "Gallery Slider",
|
||||
href: "/gallery-slider",
|
||||
},
|
||||
{
|
||||
label: "Grid Single",
|
||||
href: "/grid-single",
|
||||
},
|
||||
{
|
||||
label: "Classic Details",
|
||||
href: "/portfolios/2",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Blogs",
|
||||
links: [
|
||||
{
|
||||
label: "Blog Version 01",
|
||||
href: "/blog-v1",
|
||||
},
|
||||
{
|
||||
label: "Blog Version 02",
|
||||
href: "/blog-v2",
|
||||
},
|
||||
{
|
||||
label: "Blog Version 03",
|
||||
href: "/blog-v3",
|
||||
},
|
||||
{
|
||||
label: "Blog Version 04",
|
||||
href: "/blog-v4",
|
||||
},
|
||||
{
|
||||
label: "Blog Version 05",
|
||||
href: "/blog-v5",
|
||||
},
|
||||
{
|
||||
label: "Blog Version 06",
|
||||
href: "/blog-v6",
|
||||
},
|
||||
{
|
||||
label: "Blog Details",
|
||||
href: "/blogs/3",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Docs",
|
||||
links: [
|
||||
{
|
||||
label: "Full Width",
|
||||
href: "/doc-full-width",
|
||||
},
|
||||
{
|
||||
label: "Full Width Banner",
|
||||
href: "/doc-full-width-banner",
|
||||
},
|
||||
{
|
||||
label: "Doc Box",
|
||||
href: "/doc-box",
|
||||
},
|
||||
{
|
||||
label: "Doc Box With Banner",
|
||||
href: "/doc-box-with-banner",
|
||||
},
|
||||
{
|
||||
label: "Changelog",
|
||||
href: "/changelog",
|
||||
},
|
||||
],
|
||||
},
|
||||
];
|
||||
export default function MobileMenuTwo() {
|
||||
const [showMenu, setShowMenu] = useState(false);
|
||||
const [menuNesting, setMenuNesting] = useState([]);
|
||||
const [menuItem, setMenuItem] = useState("");
|
||||
const [submenu, setSubmenu] = useState("");
|
||||
const pathname = usePathname();
|
||||
|
||||
useEffect(() => {
|
||||
menuList.forEach((elm) => {
|
||||
elm?.links?.forEach((elm2) => {
|
||||
if (elm2.href == pathname) {
|
||||
setMenuItem(elm.title);
|
||||
} else {
|
||||
elm2?.links?.map((elm3) => {
|
||||
if (elm3.href == pathname) {
|
||||
setMenuItem(elm.title);
|
||||
setSubmenu(elm2.title);
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
});
|
||||
}, []);
|
||||
return (
|
||||
<>
|
||||
<div className="mobileMenu text-dark-1">
|
||||
{menuList.map((elm, i) => {
|
||||
if (elm.title) {
|
||||
return (
|
||||
<div key={i} className="submenuOne">
|
||||
<div
|
||||
className="title title1"
|
||||
onClick={() =>
|
||||
setMenuNesting((pre) =>
|
||||
pre[0] == elm.title ? [] : [elm.title],
|
||||
)
|
||||
}
|
||||
>
|
||||
<span
|
||||
className={
|
||||
elm.title == menuItem ? "activeMenu" : "inActiveMenu"
|
||||
}
|
||||
>
|
||||
{elm.title}
|
||||
</span>
|
||||
<Image alt='chevron'
|
||||
style={{fill:'fff'}}
|
||||
width={15} height={15}
|
||||
src={
|
||||
menuNesting[0] == elm.title
|
||||
? "/images/menusicon/chevron-down.svg"
|
||||
: "/images/menusicon/chevron-right.svg"
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{elm.links &&
|
||||
elm.links.map((itm, index) => (
|
||||
<div
|
||||
key={index}
|
||||
className={
|
||||
menuNesting[0] == elm.title
|
||||
? "toggle active"
|
||||
: "toggle"
|
||||
}
|
||||
>
|
||||
{itm.href && (
|
||||
<Link
|
||||
key={i}
|
||||
className={
|
||||
pathname == itm.href
|
||||
? "activeMenu link"
|
||||
: "link inActiveMenu"
|
||||
}
|
||||
href={itm.href}
|
||||
>
|
||||
{itm.label}
|
||||
</Link>
|
||||
)}
|
||||
|
||||
{itm.links && (
|
||||
<div className="submenuTwo">
|
||||
<div
|
||||
className="title"
|
||||
onClick={() =>
|
||||
setMenuNesting((pre) =>
|
||||
pre[1] == itm.title
|
||||
? [pre[0]]
|
||||
: [pre[0], itm.title],
|
||||
)
|
||||
}
|
||||
>
|
||||
<span
|
||||
className={
|
||||
itm.title == submenu
|
||||
? "activeMenu"
|
||||
: "inActiveMenu"
|
||||
}
|
||||
>
|
||||
{itm.title && itm.title}
|
||||
</span>
|
||||
<Image alt='chevron'
|
||||
width={22} height={22}
|
||||
style={{fill:'fff'}}
|
||||
src={
|
||||
menuNesting[1] == itm.title
|
||||
? "/images/menusicon/dash.svg"
|
||||
: "/images/menusicon/plus.svg"
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
className={
|
||||
menuNesting[1] == itm.title
|
||||
? "toggle active"
|
||||
: "toggle"
|
||||
}
|
||||
>
|
||||
{itm.links &&
|
||||
itm.links.map((itm2, index3) => (
|
||||
<Link
|
||||
key={index3}
|
||||
className={
|
||||
pathname == itm2.href
|
||||
? "activeMenu link"
|
||||
: "link inActiveMenu"
|
||||
}
|
||||
href={itm2.href}
|
||||
>
|
||||
{itm2.label}
|
||||
</Link>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
})}
|
||||
</div>
|
||||
</>
|
||||
)
|
||||
|
||||
|
||||
|
||||
|
||||
}
|
||||
@@ -0,0 +1,240 @@
|
||||
'use client'
|
||||
|
||||
import React, { useEffect, useState } from "react";
|
||||
|
||||
import Link from "next/link";
|
||||
import Modal from "react-modal";
|
||||
import HeaderPopupForm from "../../form/HeaderPopupForm";
|
||||
import MegaMenuLanding from "../../header/mega-menu/MegaMenuLanding";
|
||||
import Image from "next/image";
|
||||
|
||||
// Modal.setAppElement("#root");
|
||||
|
||||
const logo = "/images/logo/deski_06.svg";
|
||||
|
||||
const HeaderLanding = () => {
|
||||
const [isOpen, setIsOpen] = useState(false);
|
||||
const [click, setClick] = useState(false);
|
||||
const handleClick = () => setClick(!click);
|
||||
const [navbar, setNavbar] = useState(false);
|
||||
|
||||
function toggleModalOne() {
|
||||
setIsOpen(!isOpen);
|
||||
}
|
||||
|
||||
const changeBackground = () => {
|
||||
if (typeof window !== "undefined") {
|
||||
if (window.scrollY >= 90) {
|
||||
setNavbar(true);
|
||||
} else {
|
||||
setNavbar(false);
|
||||
}
|
||||
}
|
||||
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
window.addEventListener("scroll", changeBackground);
|
||||
|
||||
return () => {
|
||||
window.removeEventListener("scroll", changeBackground);
|
||||
}
|
||||
}, [])
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
return (
|
||||
<>
|
||||
{/* =============================================
|
||||
Theme Main Menu
|
||||
============================================== */}
|
||||
<div
|
||||
className={
|
||||
navbar
|
||||
? "theme-main-menu sticky-menu theme-menu-five fixed"
|
||||
: "theme-main-menu sticky-menu theme-menu-five"
|
||||
}
|
||||
>
|
||||
<div className="d-flex align-items-center justify-content-center">
|
||||
<div className="logo">
|
||||
<Link href="/">
|
||||
<Image width={138} height={47} src={logo} alt="brand" />
|
||||
</Link>
|
||||
</div>
|
||||
{/* End logo */}
|
||||
|
||||
<nav id="mega-menu-holder" className="navbar navbar-expand-lg">
|
||||
<div className="container nav-container">
|
||||
<div className="mob-header">
|
||||
<button className="toggler-menu" onClick={handleClick}>
|
||||
<div className={click ? "active" : ""}>
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
</div>
|
||||
</button>
|
||||
</div>
|
||||
{/* End Header */}
|
||||
|
||||
<div
|
||||
className="navbar-collapse collapse landing-menu-onepage"
|
||||
id="navbarSupportedContent"
|
||||
>
|
||||
<div className="d-lg-flex justify-content-between align-items-center">
|
||||
<div
|
||||
className="navbar-nav main-side-nav font-gordita"
|
||||
|
||||
>
|
||||
<div data-to-scrollspy-id="home" className="nav-item dropdown position-static">
|
||||
<a
|
||||
className="nav-link dropdown-toggle"
|
||||
href="#home"
|
||||
data-toggle="dropdown"
|
||||
|
||||
>
|
||||
Home
|
||||
</a>
|
||||
<div className="dropdown-menu">
|
||||
<MegaMenuLanding />
|
||||
</div>
|
||||
</div>
|
||||
<div data-to-scrollspy-id="features" className="nav-item">
|
||||
<a href="#features" className="nav-link">
|
||||
Features
|
||||
</a>
|
||||
</div>
|
||||
<div data-to-scrollspy-id="about" className="nav-item">
|
||||
<a href="#about" className="nav-link">
|
||||
About
|
||||
</a>
|
||||
</div>
|
||||
<div data-to-scrollspy-id="product" className="nav-item">
|
||||
<a href="#product" className="nav-link">
|
||||
Product
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div data-to-scrollspy-id="pricing" className="nav-item">
|
||||
<a href="#pricing" className="nav-link">
|
||||
Pricing
|
||||
</a>
|
||||
</div> <div data-to-scrollspy-id="feedback" className="nav-item">
|
||||
<a href="#feedback" className="nav-link">
|
||||
Feedback
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
<div className="right-widget">
|
||||
<button className="demo-button" onClick={toggleModalOne}>
|
||||
<span>Request A Demo</span>
|
||||
<Image width={20} height={20} src="/images/icon/user.svg" alt="icon" />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/* /.theme-main-menu */}
|
||||
|
||||
{/* Mobile Menu Start */}
|
||||
<div className={click ? "mobile-menu menu-open" : "mobile-menu"}>
|
||||
<div className="logo order-md-1">
|
||||
<Link href="/">
|
||||
<Image width={138} height={47} style={{width:'100%',height:'fit-content'}} src="/images/logo/deski_06.svg" alt="brand" />
|
||||
</Link>
|
||||
<div className="fix-icon text-dark" onClick={handleClick}>
|
||||
<Image width="14" height="14" src="/images/icon/close.svg" alt="icon" />
|
||||
</div>
|
||||
{/* Mobile Menu close icon */}
|
||||
</div>
|
||||
|
||||
<div
|
||||
|
||||
>
|
||||
<p data-to-scrollspy-id="home" className="nav-item">
|
||||
<a href="#home" className="nav-link" onClick={handleClick}>
|
||||
Home
|
||||
</a>
|
||||
</p>
|
||||
<div data-to-scrollspy-id="features" className="nav-item">
|
||||
<a href="#features" className="nav-link" onClick={handleClick}>
|
||||
Features
|
||||
</a>
|
||||
</div>
|
||||
<div data-to-scrollspy-id="about" className="nav-item">
|
||||
<a href="#about" className="nav-link" onClick={handleClick}>
|
||||
About
|
||||
</a>
|
||||
</div>
|
||||
<div data-to-scrollspy-id="product" className="nav-item">
|
||||
<a href="#product" className="nav-link" onClick={handleClick}>
|
||||
Product
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div data-to-scrollspy-id="pricing" className="nav-item">
|
||||
<a href="#pricing" className="nav-link" onClick={handleClick}>
|
||||
Pricing
|
||||
</a>
|
||||
</div><div data-to-scrollspy-id="feedback" className="nav-item">
|
||||
<a href="#feedback" className="nav-link" onClick={handleClick}>
|
||||
Feedback
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/* Mobile Menu End */}
|
||||
|
||||
<Modal
|
||||
isOpen={isOpen}
|
||||
onRequestClose={toggleModalOne}
|
||||
contentLabel="My dialog"
|
||||
className="custom-modal modal-contact-popup-one"
|
||||
overlayClassName="custom-overlay"
|
||||
closeTimeoutMS={500}
|
||||
>
|
||||
<div className="box_inner ">
|
||||
<main className="main-body box_inner modal-content clearfix">
|
||||
<button className="close" onClick={toggleModalOne}>
|
||||
<Image width="14" height="14" src="/images/icon/close.svg" alt="close" />
|
||||
</button>
|
||||
{/* End close icon */}
|
||||
|
||||
<div className="left-side">
|
||||
<div className="d-flex flex-column justify-content-between h-100">
|
||||
<div className="row">
|
||||
<div className="col-xl-10 col-lg-8 m-auto">
|
||||
<blockquote>
|
||||
“I never dreamed about success. I worked for it.”
|
||||
</blockquote>
|
||||
<span className="bio">—Estée Lauder</span>
|
||||
</div>
|
||||
</div>
|
||||
<Image width="649" height="466"
|
||||
src="/images/assets/ils_18.svg"
|
||||
alt="image"
|
||||
className="illustration mt-auto"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
{/* /.left-side */}
|
||||
|
||||
<div className="right-side">
|
||||
<h2 className="form-title">Contact us</h2>
|
||||
<HeaderPopupForm />
|
||||
</div>
|
||||
{/* /.right-side */}
|
||||
</main>
|
||||
{/* /.main-body */}
|
||||
</div>
|
||||
</Modal>
|
||||
{/* End Modal For Request a demo */}
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default HeaderLanding;
|
||||
@@ -0,0 +1,183 @@
|
||||
'use client'
|
||||
|
||||
import React, { useEffect, useState } from "react";
|
||||
|
||||
import Link from "next/link";
|
||||
import MegaMenuLanding from "../../header/mega-menu/MegaMenuLanding";
|
||||
import Image from "next/image";
|
||||
|
||||
const HeaderLandingAppointment = () => {
|
||||
const [click, setClick] = useState(false);
|
||||
const handleClick = () => setClick(!click);
|
||||
const [navbar, setNavbar] = useState(false);
|
||||
|
||||
const changeBackground = () => {
|
||||
if (typeof window !== "undefined") {
|
||||
if (window.scrollY >= 90) {
|
||||
setNavbar(true);
|
||||
} else {
|
||||
setNavbar(false);
|
||||
}
|
||||
}
|
||||
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
window.addEventListener("scroll", changeBackground);
|
||||
|
||||
return () => {
|
||||
window.removeEventListener("scroll", changeBackground);
|
||||
}
|
||||
}, [])
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
return (
|
||||
<>
|
||||
{/* =============================================
|
||||
Theme Main Menu
|
||||
============================================== */}
|
||||
<div
|
||||
className={
|
||||
navbar
|
||||
? "theme-main-menu sticky-menu theme-menu-six bg-none fixed"
|
||||
: "theme-main-menu sticky-menu theme-menu-six bg-none"
|
||||
}
|
||||
>
|
||||
<div className="d-flex align-items-center">
|
||||
<div className="logo">
|
||||
<Link href="/project-management">
|
||||
<Image width="138" height="47" src="/images/logo/deski_06.svg" alt="brand" />
|
||||
</Link>
|
||||
</div>
|
||||
{/* End logo */}
|
||||
|
||||
<div className="right-widget order-lg-3">
|
||||
<ul className="d-flex align-items-center">
|
||||
<li>
|
||||
<Link
|
||||
href="/login"
|
||||
className="signIn-action d-flex align-items-center"
|
||||
>
|
||||
<Image width="20" height="21" src="/images/icon/120.svg" alt="icon" />
|
||||
<span>login</span>
|
||||
</Link>
|
||||
</li>
|
||||
<li>
|
||||
<Link href="/signup" className="signup-btn">
|
||||
<span>Sign up</span>
|
||||
</Link>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
{/* End .right-widget */}
|
||||
|
||||
<nav
|
||||
id="mega-menu-holder"
|
||||
className="navbar navbar-expand-lg ms-lg-auto order-lg-2"
|
||||
>
|
||||
<div className="container nav-container">
|
||||
<div className="mob-header">
|
||||
<button className="toggler-menu" onClick={handleClick}>
|
||||
<div className={click ? "active" : ""}>
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
</div>
|
||||
</button>
|
||||
</div>
|
||||
{/* End Header */}
|
||||
|
||||
<div
|
||||
className="navbar-collapse collapse landing-menu-onepage"
|
||||
id="navbarSupportedContent"
|
||||
>
|
||||
<div className="d-lg-flex justify-content-between align-items-center">
|
||||
<div
|
||||
className="navbar-nav main-side-nav font-gordita"
|
||||
|
||||
>
|
||||
<div data-to-scrollspy-id="home" className="nav-item dropdown position-static">
|
||||
<a
|
||||
className="nav-link dropdown-toggle"
|
||||
href="#home"
|
||||
data-toggle="dropdown"
|
||||
|
||||
>
|
||||
Home
|
||||
</a>
|
||||
<div className="dropdown-menu">
|
||||
<MegaMenuLanding />
|
||||
</div>
|
||||
</div>
|
||||
<div data-to-scrollspy-id="feature" className="nav-item">
|
||||
<a href="#feature" className="nav-link">
|
||||
Features
|
||||
</a>
|
||||
</div>
|
||||
<div data-to-scrollspy-id="service" className="nav-item">
|
||||
<a href="#service" className="nav-link">
|
||||
Service
|
||||
</a>
|
||||
</div>
|
||||
<div data-to-scrollspy-id="feedback" className="nav-item">
|
||||
<a href="#feedback" className="nav-link">
|
||||
Feedback
|
||||
</a>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
</div>
|
||||
</div>
|
||||
{/* /.theme-main-menu */}
|
||||
|
||||
{/* Mobile Menu Start */}
|
||||
<div className={click ? "mobile-menu menu-open" : "mobile-menu"}>
|
||||
<div className="logo order-md-1">
|
||||
<Link href="/project-management">
|
||||
<Image width="138" height="47" src="/images/logo/deski_06.svg" alt="brand" />
|
||||
</Link>
|
||||
<div className="fix-icon text-dark" onClick={handleClick}>
|
||||
<Image width="14" height="14" src="/images/icon/close.svg" alt="icon" />
|
||||
</div>
|
||||
{/* Mobile Menu close icon */}
|
||||
</div>
|
||||
|
||||
<div
|
||||
|
||||
>
|
||||
<p data-to-scrollspy-id="home" className="nav-item">
|
||||
<a href="#home" className="nav-link" onClick={handleClick}>
|
||||
Home
|
||||
</a>
|
||||
</p>
|
||||
<div data-to-scrollspy-id="feature" className="nav-item">
|
||||
<a href="#feature" className="nav-link" onClick={handleClick}>
|
||||
Features
|
||||
</a>
|
||||
</div>
|
||||
<div data-to-scrollspy-id="service" className="nav-item">
|
||||
<a href="#service" className="nav-link" onClick={handleClick}>
|
||||
Service
|
||||
</a>
|
||||
</div>
|
||||
<div data-to-scrollspy-id="feedback" className="nav-item">
|
||||
<a href="#feedback" className="nav-link" onClick={handleClick}>
|
||||
Feedback
|
||||
</a>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
{/* Mobile Menu End */}
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default HeaderLandingAppointment;
|
||||
@@ -0,0 +1,237 @@
|
||||
'use client'
|
||||
|
||||
import React, { useEffect, useState } from "react";
|
||||
|
||||
import Link from "next/link";
|
||||
import Modal from "react-modal";
|
||||
import HeaderPopupForm from "../../form/HeaderPopupForm";
|
||||
import MegaMenuLanding from "../../header/mega-menu/MegaMenuLanding";
|
||||
import Image from "next/image";
|
||||
|
||||
// Modal.setAppElement("#root");
|
||||
|
||||
const HeaderLandingDark = () => {
|
||||
const [isOpen, setIsOpen] = useState(false);
|
||||
const [click, setClick] = useState(false);
|
||||
const handleClick = () => setClick(!click);
|
||||
const [navbar, setNavbar] = useState(false);
|
||||
|
||||
function toggleModalOne() {
|
||||
setIsOpen(!isOpen);
|
||||
}
|
||||
|
||||
const changeBackground = () => {
|
||||
if (typeof window !== "undefined") {
|
||||
if (window.scrollY >= 90) {
|
||||
setNavbar(true);
|
||||
} else {
|
||||
setNavbar(false);
|
||||
}
|
||||
}
|
||||
|
||||
};
|
||||
useEffect(() => {
|
||||
window.addEventListener("scroll", changeBackground);
|
||||
|
||||
return () => {
|
||||
window.removeEventListener("scroll", changeBackground);
|
||||
}
|
||||
}, [])
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
return (
|
||||
<>
|
||||
{/* =============================================
|
||||
Theme Main Menu
|
||||
============================================== */}
|
||||
<div
|
||||
className={
|
||||
navbar
|
||||
? "theme-main-menu sticky-menu theme-menu-five fixed"
|
||||
: "theme-main-menu sticky-menu theme-menu-five"
|
||||
}
|
||||
>
|
||||
<div className="d-flex align-items-center justify-content-center">
|
||||
<div className="logo">
|
||||
<Link href="/doc-landing">
|
||||
<Image width="138" height="47" src="/images/logo/deski_06.svg" alt="brand" />
|
||||
</Link>
|
||||
</div>
|
||||
{/* End logo */}
|
||||
|
||||
<nav id="mega-menu-holder" className="navbar navbar-expand-lg">
|
||||
<div className="container nav-container">
|
||||
<div className="mob-header">
|
||||
<button className="toggler-menu" onClick={handleClick}>
|
||||
<div className={click ? "active" : ""}>
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
</div>
|
||||
</button>
|
||||
</div>
|
||||
{/* End Header */}
|
||||
|
||||
<div
|
||||
className="navbar-collapse collapse landing-menu-onepage"
|
||||
id="navbarSupportedContent"
|
||||
>
|
||||
<div className="d-lg-flex justify-content-between align-items-center">
|
||||
<div
|
||||
className="navbar-nav main-side-nav font-gordita"
|
||||
|
||||
>
|
||||
<div data-to-scrollspy-id="home" className="nav-item dropdown position-static">
|
||||
<a
|
||||
className="nav-link dropdown-toggle"
|
||||
href="#home"
|
||||
data-toggle="dropdown"
|
||||
|
||||
>
|
||||
Home
|
||||
</a>
|
||||
<div className="dropdown-menu">
|
||||
<MegaMenuLanding />
|
||||
</div>
|
||||
</div>
|
||||
<div data-to-scrollspy-id="about" className="nav-item">
|
||||
<a href="#about" className="nav-link">
|
||||
About Us
|
||||
</a>
|
||||
</div>
|
||||
<div data-to-scrollspy-id="features" className="nav-item">
|
||||
<a href="#features" className="nav-link">
|
||||
Features
|
||||
</a>
|
||||
</div>
|
||||
<div data-to-scrollspy-id="product" className="nav-item">
|
||||
<a href="#product" className="nav-link">
|
||||
Product
|
||||
</a>
|
||||
</div>
|
||||
<div data-to-scrollspy-id="feedback" className="nav-item">
|
||||
<a href="#feedback" className="nav-link">
|
||||
Feedback
|
||||
</a>
|
||||
</div>
|
||||
<div data-to-scrollspy-id="pricing" className="nav-item">
|
||||
<a href="#pricing" className="nav-link">
|
||||
Pricing
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
<div className="right-widget">
|
||||
<button className="demo-button" onClick={toggleModalOne}>
|
||||
<span>Request A Demo</span>
|
||||
<Image width={20} height={20} src="/images/icon/user.svg" alt="icon" />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/* /.theme-main-menu */}
|
||||
|
||||
{/* Mobile Menu Start */}
|
||||
<div className={click ? "mobile-menu menu-open" : "mobile-menu"}>
|
||||
<div className="logo order-md-1">
|
||||
<Link href="/doc-landing">
|
||||
<Image width="138" height="47" src="/images/logo/deski_06.svg" alt="brand" />
|
||||
</Link>
|
||||
<div className="fix-icon text-dark" onClick={handleClick}>
|
||||
<Image width="14" height="14" src="/images/icon/close.svg" alt="icon" />
|
||||
</div>
|
||||
{/* Mobile Menu close icon */}
|
||||
</div>
|
||||
|
||||
<div
|
||||
|
||||
>
|
||||
<p data-to-scrollspy-id="home" className="nav-item">
|
||||
<a href="#home" className="nav-link" onClick={handleClick}>
|
||||
Home
|
||||
</a>
|
||||
</p>
|
||||
<div data-to-scrollspy-id="features" className="nav-item">
|
||||
<a href="#feature" className="nav-link" onClick={handleClick}>
|
||||
Features
|
||||
</a>
|
||||
</div>
|
||||
<div data-to-scrollspy-id="about" className="nav-item">
|
||||
<a href="#about" className="nav-link" onClick={handleClick}>
|
||||
About Us
|
||||
</a>
|
||||
</div>
|
||||
<div data-to-scrollspy-id="product" className="nav-item">
|
||||
<a href="#product" className="nav-link" onClick={handleClick}>
|
||||
Product
|
||||
</a>
|
||||
</div>
|
||||
<div data-to-scrollspy-id="feedback" className="nav-item">
|
||||
<a href="#feedback" className="nav-link" onClick={handleClick}>
|
||||
Feedback
|
||||
</a>
|
||||
</div>
|
||||
<div data-to-scrollspy-id="pricing" className="nav-item">
|
||||
<a href="#pricing" className="nav-link" onClick={handleClick}>
|
||||
Pricing
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/* Mobile Menu End */}
|
||||
|
||||
<Modal
|
||||
isOpen={isOpen}
|
||||
onRequestClose={toggleModalOne}
|
||||
contentLabel="My dialog"
|
||||
className="custom-modal modal-contact-popup-one dark-style"
|
||||
overlayClassName="custom-overlay"
|
||||
closeTimeoutMS={500}
|
||||
>
|
||||
<div className="box_inner ">
|
||||
<main className="main-body box_inner modal-content clearfix">
|
||||
<button className="close" onClick={toggleModalOne}>
|
||||
<Image width="14" height="14" src="/images/icon/close.svg" alt="close" />
|
||||
</button>
|
||||
{/* End close icon */}
|
||||
|
||||
<div className="left-side">
|
||||
<div className="d-flex flex-column justify-content-between h-100">
|
||||
<div className="row">
|
||||
<div className="col-xl-10 col-lg-8 m-auto">
|
||||
<blockquote>
|
||||
“I never dreamed about success. I worked for it.”
|
||||
</blockquote>
|
||||
<span className="bio">—Estée Lauder</span>
|
||||
</div>
|
||||
</div>
|
||||
<Image width="649" height="516"
|
||||
src="/images/assets/ils_19.svg"
|
||||
alt="image"
|
||||
className="illustration mt-auto"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
{/* /.left-side */}
|
||||
|
||||
<div className="right-side">
|
||||
<h2 className="form-title">Contact us</h2>
|
||||
<HeaderPopupForm />
|
||||
</div>
|
||||
{/* /.right-side */}
|
||||
</main>
|
||||
{/* /.main-body */}
|
||||
</div>
|
||||
</Modal>
|
||||
{/* End Modal For Request a demo */}
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default HeaderLandingDark;
|
||||
@@ -0,0 +1,237 @@
|
||||
'use client'
|
||||
|
||||
import React, { useEffect, useState } from "react";
|
||||
|
||||
import Link from "next/link";
|
||||
import Modal from "react-modal";
|
||||
import HeaderPopupForm from "../../form/HeaderPopupForm";
|
||||
import MegaMenuLanding from "../../header/mega-menu/MegaMenuLanding";
|
||||
import Image from "next/image";
|
||||
|
||||
// ReactModal.setAppElement('#lll');
|
||||
|
||||
const HeaderLandingDocSignature = () => {
|
||||
const [isOpen, setIsOpen] = useState(false);
|
||||
const [click, setClick] = useState(false);
|
||||
const handleClick = () => setClick(!click);
|
||||
const [navbar, setNavbar] = useState(false);
|
||||
|
||||
function toggleModalOne() {
|
||||
setIsOpen(!isOpen);
|
||||
}
|
||||
|
||||
const changeBackground = () => {
|
||||
if (typeof window !== "undefined") {
|
||||
if (window.scrollY >= 90) {
|
||||
setNavbar(true);
|
||||
} else {
|
||||
setNavbar(false);
|
||||
}
|
||||
}
|
||||
|
||||
};
|
||||
useEffect(() => {
|
||||
window.addEventListener("scroll", changeBackground);
|
||||
|
||||
return () => {
|
||||
window.removeEventListener("scroll", changeBackground);
|
||||
}
|
||||
}, [])
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
return (
|
||||
<>
|
||||
{/* =============================================
|
||||
Theme Main Menu
|
||||
============================================== */}
|
||||
<div
|
||||
className={
|
||||
navbar
|
||||
? "theme-main-menu sticky-menu theme-menu-five fixed"
|
||||
: "theme-main-menu sticky-menu theme-menu-five"
|
||||
}
|
||||
>
|
||||
<div className="d-flex align-items-center justify-content-center">
|
||||
<div className="logo">
|
||||
<Link href="/">
|
||||
<Image width="138" height="47" src="/images/logo/deski_06.svg" alt="brand" />
|
||||
</Link>
|
||||
</div>
|
||||
{/* End logo */}
|
||||
|
||||
<nav id="mega-menu-holder" className="navbar navbar-expand-lg">
|
||||
<div className="container nav-container">
|
||||
<div className="mob-header">
|
||||
<button className="toggler-menu" onClick={handleClick}>
|
||||
<div className={click ? "active" : ""}>
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
</div>
|
||||
</button>
|
||||
</div>
|
||||
{/* End Header */}
|
||||
|
||||
<div
|
||||
className="navbar-collapse collapse landing-menu-onepage"
|
||||
id="navbarSupportedContent"
|
||||
>
|
||||
<div className="d-lg-flex justify-content-between align-items-center">
|
||||
<div
|
||||
className="navbar-nav main-side-nav font-gordita"
|
||||
|
||||
>
|
||||
<div data-to-scrollspy-id="home" className="nav-item dropdown position-static">
|
||||
<a
|
||||
className="nav-link dropdown-toggle"
|
||||
href="#home"
|
||||
data-toggle="dropdown"
|
||||
|
||||
>
|
||||
Home
|
||||
</a>
|
||||
<div className="dropdown-menu">
|
||||
<MegaMenuLanding />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div data-to-scrollspy-id="product" className="nav-item">
|
||||
<a href="#product" className="nav-link">
|
||||
Product
|
||||
</a>
|
||||
</div> <div data-to-scrollspy-id="feature" className="nav-item">
|
||||
<a href="#feature" className="nav-link">
|
||||
Features
|
||||
</a>
|
||||
</div>
|
||||
<div data-to-scrollspy-id="story" className="nav-item">
|
||||
<a href="#story" className="nav-link">
|
||||
Stories
|
||||
</a>
|
||||
</div>
|
||||
<div data-to-scrollspy-id="pricing" className="nav-item">
|
||||
<a href="#pricing" className="nav-link">
|
||||
Pricing
|
||||
</a>
|
||||
</div>
|
||||
<div data-to-scrollspy-id="faq" className="nav-item">
|
||||
<a href="#faq" className="nav-link">
|
||||
FAQ’s
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
<div className="right-widget">
|
||||
<button className="demo-button" onClick={toggleModalOne}>
|
||||
<span>Request A Demo</span>
|
||||
<Image width={20} height={20} src="/images/icon/user.svg" alt="icon" />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/* /.theme-main-menu */}
|
||||
|
||||
{/* Mobile Menu Start */}
|
||||
<div className={click ? "mobile-menu menu-open" : "mobile-menu"}>
|
||||
<div className="logo order-md-1">
|
||||
<Link href="/">
|
||||
<Image width="138" height="47" src="/images/logo/deski_06.svg" alt="brand" />
|
||||
</Link>
|
||||
<div className="fix-icon text-dark" onClick={handleClick}>
|
||||
<Image width="14" height="14" src="/images/icon/close.svg" alt="icon" />
|
||||
</div>
|
||||
{/* Mobile Menu close icon */}
|
||||
</div>
|
||||
|
||||
<div
|
||||
|
||||
>
|
||||
<p data-to-scrollspy-id="home" className="nav-item">
|
||||
<a href="#home" className="nav-link" onClick={handleClick}>
|
||||
Home
|
||||
</a>
|
||||
</p>
|
||||
|
||||
<div data-to-scrollspy-id="product" className="nav-item">
|
||||
<a href="#product" className="nav-link" onClick={handleClick}>
|
||||
Product
|
||||
</a>
|
||||
</div> <div data-to-scrollspy-id="feature" className="nav-item">
|
||||
<a href="#feature" className="nav-link" onClick={handleClick}>
|
||||
Features
|
||||
</a>
|
||||
</div>
|
||||
<div data-to-scrollspy-id="story" className="nav-item">
|
||||
<a href="#story" className="nav-link" onClick={handleClick}>
|
||||
Feedback
|
||||
</a>
|
||||
</div>
|
||||
<div data-to-scrollspy-id="pricing" className="nav-item">
|
||||
<a href="#pricing" className="nav-link" onClick={handleClick}>
|
||||
Pricing
|
||||
</a>
|
||||
</div>
|
||||
<div data-to-scrollspy-id="faq" className="nav-item">
|
||||
<a href="#faq" className="nav-link" onClick={handleClick}>
|
||||
FAQ’s
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/* Mobile Menu End */}
|
||||
|
||||
<Modal
|
||||
isOpen={isOpen}
|
||||
onRequestClose={toggleModalOne}
|
||||
contentLabel="My dialog"
|
||||
className="custom-modal modal-contact-popup-one"
|
||||
overlayClassName="custom-overlay"
|
||||
closeTimeoutMS={500}
|
||||
>
|
||||
<div className="box_inner ">
|
||||
<main className="main-body box_inner modal-content clearfix">
|
||||
<button className="close" onClick={toggleModalOne}>
|
||||
<Image width="14" height="14" src="/images/icon/close.svg" alt="close" />
|
||||
</button>
|
||||
{/* End close icon */}
|
||||
|
||||
<div className="left-side">
|
||||
<div className="d-flex flex-column justify-content-between h-100">
|
||||
<div className="row">
|
||||
<div className="col-xl-10 col-lg-8 m-auto">
|
||||
<blockquote>
|
||||
“I never dreamed about success. I worked for it.”
|
||||
</blockquote>
|
||||
<span className="bio">—Estée Lauder</span>
|
||||
</div>
|
||||
</div>
|
||||
<Image width="649" height="466"
|
||||
src="/images/assets/ils_18.svg"
|
||||
alt="image"
|
||||
className="illustration mt-auto"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
{/* /.left-side */}
|
||||
|
||||
<div className="right-side">
|
||||
<h2 className="form-title">Contact us</h2>
|
||||
<HeaderPopupForm />
|
||||
</div>
|
||||
{/* /.right-side */}
|
||||
</main>
|
||||
{/* /.main-body */}
|
||||
</div>
|
||||
</Modal>
|
||||
{/* End Modal For Request a demo */}
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default HeaderLandingDocSignature;
|
||||
@@ -0,0 +1,189 @@
|
||||
'use client'
|
||||
|
||||
import React, { useEffect, useState } from "react";
|
||||
|
||||
import Link from "next/link";
|
||||
import MegaMenuLanding from "../../header/mega-menu/MegaMenuLanding";
|
||||
import Image from "next/image";
|
||||
|
||||
const HeaderLandingEditor = () => {
|
||||
const [click, setClick] = useState(false);
|
||||
const handleClick = () => setClick(!click);
|
||||
const [navbar, setNavbar] = useState(false);
|
||||
|
||||
const changeBackground = () => {
|
||||
if (typeof window !== "undefined") {
|
||||
if (window.scrollY >= 90) {
|
||||
setNavbar(true);
|
||||
} else {
|
||||
setNavbar(false);
|
||||
}
|
||||
}
|
||||
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
|
||||
window.addEventListener("scroll", changeBackground);
|
||||
return () => {
|
||||
window.removeEventListener("scroll", changeBackground);
|
||||
}
|
||||
}, [])
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
return (
|
||||
<>
|
||||
{/* =============================================
|
||||
Theme Main Menu
|
||||
============================================== */}
|
||||
<div
|
||||
className={
|
||||
navbar
|
||||
? "theme-main-menu sticky-menu theme-menu-five fixed"
|
||||
: "theme-main-menu sticky-menu theme-menu-five"
|
||||
}
|
||||
>
|
||||
<div className="d-flex align-items-center justify-content-center">
|
||||
<div className="logo">
|
||||
<Link href="/customer-support">
|
||||
<Image width="138" height="47" src="/images/logo/deski_06.svg" alt="brand" />
|
||||
</Link>
|
||||
</div>
|
||||
{/* End logo */}
|
||||
|
||||
<nav id="mega-menu-holder" className="navbar navbar-expand-lg">
|
||||
<div className="container nav-container">
|
||||
<div className="mob-header">
|
||||
<button className="toggler-menu" onClick={handleClick}>
|
||||
<div className={click ? "active" : ""}>
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
</div>
|
||||
</button>
|
||||
</div>
|
||||
{/* End Header */}
|
||||
|
||||
<div
|
||||
className="navbar-collapse collapse landing-menu-onepage"
|
||||
id="navbarSupportedContent"
|
||||
>
|
||||
<div className="d-lg-flex justify-content-between align-items-center">
|
||||
<div
|
||||
className="navbar-nav main-side-nav font-gordita"
|
||||
|
||||
>
|
||||
<div data-to-scrollspy-id="home" className="nav-item dropdown position-static">
|
||||
<a
|
||||
className="nav-link dropdown-toggle"
|
||||
href="#home"
|
||||
data-toggle="dropdown"
|
||||
|
||||
>
|
||||
Home
|
||||
</a>
|
||||
<div className="dropdown-menu">
|
||||
<MegaMenuLanding />
|
||||
</div>
|
||||
</div>
|
||||
<div data-to-scrollspy-id="feature" className="nav-item">
|
||||
<a href="#feature" className="nav-link">
|
||||
Features
|
||||
</a>
|
||||
</div>
|
||||
<div data-to-scrollspy-id="effect" className="nav-item">
|
||||
<a href="#effect" className="nav-link">
|
||||
Effect
|
||||
</a>
|
||||
</div>
|
||||
<div data-to-scrollspy-id="template" className="nav-item">
|
||||
<a href="#template" className="nav-link">
|
||||
Template
|
||||
</a>
|
||||
</div>
|
||||
<div data-to-scrollspy-id="feedback" className="nav-item">
|
||||
<a href="#feedback" className="nav-link">
|
||||
Feedback
|
||||
</a>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
<div className="right-widget">
|
||||
<ul className="d-flex align-items-center">
|
||||
<li>
|
||||
<Link
|
||||
href="/login"
|
||||
className="signIn-action d-flex align-items-center"
|
||||
>
|
||||
<Image width="14" height="19" src="/images/icon/52.svg" alt="icon" />
|
||||
<span>login</span>
|
||||
</Link>
|
||||
</li>
|
||||
<li>
|
||||
<Link href="/signup" className="signup-btn">
|
||||
<span>Sign up</span>- It’s Free
|
||||
</Link>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
{/* End .right-widget */}
|
||||
</div>
|
||||
</div>
|
||||
{/* /.theme-main-menu */}
|
||||
|
||||
{/* Mobile Menu Start */}
|
||||
<div className={click ? "mobile-menu menu-open" : "mobile-menu"}>
|
||||
<div className="logo order-md-1">
|
||||
<Link href="/customer-support">
|
||||
<Image width="138" height="47" src="/images/logo/deski_06.svg" alt="brand" />
|
||||
</Link>
|
||||
<div className="fix-icon text-dark" onClick={handleClick}>
|
||||
<Image width="14" height="14" src="/images/icon/close.svg" alt="icon" />
|
||||
</div>
|
||||
{/* Mobile Menu close icon */}
|
||||
</div>
|
||||
|
||||
<div
|
||||
|
||||
>
|
||||
<p data-to-scrollspy-id="home" className="nav-item">
|
||||
<a href="#home" className="nav-link" onClick={handleClick}>
|
||||
Home
|
||||
</a>
|
||||
</p>
|
||||
<div data-to-scrollspy-id="feature" className="nav-item">
|
||||
<a href="#feature" className="nav-link" onClick={handleClick}>
|
||||
Features
|
||||
</a>
|
||||
</div>
|
||||
<div data-to-scrollspy-id="effect" className="nav-item">
|
||||
<a href="#effect" className="nav-link" onClick={handleClick}>
|
||||
Effect
|
||||
</a>
|
||||
</div>
|
||||
<div data-to-scrollspy-id="template" className="nav-item">
|
||||
<a href="#template" className="nav-link" onClick={handleClick}>
|
||||
Template
|
||||
</a>
|
||||
</div>
|
||||
<div data-to-scrollspy-id="feedback" className="nav-item">
|
||||
<a href="#feedback" className="nav-link" onClick={handleClick}>
|
||||
Feedback
|
||||
</a>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
{/* Mobile Menu End */}
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default HeaderLandingEditor;
|
||||
@@ -0,0 +1,217 @@
|
||||
'use client'
|
||||
|
||||
import React, { useEffect, useState } from "react";
|
||||
|
||||
import Link from "next/link";
|
||||
import MegaMenuLanding from "../../header/mega-menu/MegaMenuLanding";
|
||||
import Image from "next/image";
|
||||
|
||||
const HeaderLandingMobileApp = () => {
|
||||
// For header select menu
|
||||
const [click1, setClick1] = useState(false);
|
||||
const handleClick1 = () => setClick1(!click1);
|
||||
|
||||
// For Mobile menu
|
||||
const [click, setClick] = useState(false);
|
||||
const handleClick = () => setClick(!click);
|
||||
const [navbar, setNavbar] = useState(false);
|
||||
|
||||
const changeBackground = () => {
|
||||
if (typeof window !== "undefined") {
|
||||
if (window.scrollY >= 90) {
|
||||
setNavbar(true);
|
||||
} else {
|
||||
setNavbar(false);
|
||||
}
|
||||
}
|
||||
|
||||
};
|
||||
useEffect(() => {
|
||||
window.addEventListener("scroll", changeBackground);
|
||||
|
||||
return () => {
|
||||
window.removeEventListener("scroll", changeBackground);
|
||||
}
|
||||
}, [])
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
return (
|
||||
<>
|
||||
{/* =============================================
|
||||
Theme Main Menu
|
||||
============================================== */}
|
||||
<div
|
||||
className={
|
||||
navbar
|
||||
? "theme-main-menu sticky-menu theme-menu-five fixed"
|
||||
: "theme-main-menu sticky-menu theme-menu-five"
|
||||
}
|
||||
>
|
||||
<div className="d-flex align-items-center justify-content-center">
|
||||
<div className="logo">
|
||||
<Link href="/doc-landing">
|
||||
<Image width="138" height="47" src="/images/logo/deski_06.svg" alt="brand" />
|
||||
</Link>
|
||||
</div>
|
||||
{/* End logo */}
|
||||
|
||||
<nav id="mega-menu-holder" className="navbar navbar-expand-lg">
|
||||
<div className="container nav-container">
|
||||
<div className="mob-header">
|
||||
<button className="toggler-menu" onClick={handleClick}>
|
||||
<div className={click ? "active" : ""}>
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
</div>
|
||||
</button>
|
||||
</div>
|
||||
{/* End Header */}
|
||||
|
||||
<div
|
||||
className="navbar-collapse collapse landing-menu-onepage"
|
||||
id="navbarSupportedContent"
|
||||
>
|
||||
<div className="d-lg-flex justify-content-between align-items-center">
|
||||
<div
|
||||
className="navbar-nav main-side-nav font-gordita"
|
||||
|
||||
>
|
||||
<div data-to-scrollspy-id="home" className="nav-item dropdown position-static">
|
||||
<a
|
||||
className="nav-link dropdown-toggle"
|
||||
href="#home"
|
||||
data-toggle="dropdown"
|
||||
|
||||
>
|
||||
Home
|
||||
</a>
|
||||
<div className="dropdown-menu">
|
||||
<MegaMenuLanding />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div data-to-scrollspy-id="product" className="nav-item">
|
||||
<a href="#product" className="nav-link">
|
||||
Product
|
||||
</a>
|
||||
</div> <div data-to-scrollspy-id="features" className="nav-item">
|
||||
<a href="#features" className="nav-link">
|
||||
Features
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div data-to-scrollspy-id="pricing" className="nav-item">
|
||||
<a href="#pricing" className="nav-link">
|
||||
Pricing
|
||||
</a>
|
||||
</div> <div data-to-scrollspy-id="feedback" className="nav-item">
|
||||
<a href="#feedback" className="nav-link">
|
||||
Feedback
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
{/* End Navbar */}
|
||||
|
||||
<div className="right-widget">
|
||||
<ul className="d-flex align-items-center">
|
||||
<li>
|
||||
<div
|
||||
className={
|
||||
click1
|
||||
? "dropdown download-btn ms-0 style-two show"
|
||||
: "dropdown download-btn ms-0 style-two"
|
||||
}
|
||||
>
|
||||
<button
|
||||
className="dropdown-toggle"
|
||||
onClick={handleClick1}
|
||||
type="button"
|
||||
>
|
||||
Download
|
||||
</button>
|
||||
<div
|
||||
className={click1 ? "dropdown-menu show" : "dropdown-menu"}
|
||||
>
|
||||
<a
|
||||
className="dropdown-item d-flex align-items-center"
|
||||
href="#"
|
||||
onClick={handleClick1}
|
||||
>
|
||||
<Image width="22" height="22" src="/images/icon/103.svg" alt="icon" />
|
||||
<span>IOS & Android</span>
|
||||
</a>
|
||||
<a
|
||||
className="dropdown-item d-flex align-items-center"
|
||||
href="#"
|
||||
onClick={handleClick1}
|
||||
>
|
||||
<Image width="20" height="20" src="/images/icon/104.svg" alt="icon" />
|
||||
<span>Mac & Windows</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
{/* End right-widget */}
|
||||
</div>
|
||||
</div>
|
||||
{/* /.theme-main-menu */}
|
||||
|
||||
{/* Mobile Menu Start */}
|
||||
<div className={click ? "mobile-menu menu-open" : "mobile-menu"}>
|
||||
<div className="logo order-md-1">
|
||||
<Link href="/doc-landing">
|
||||
<Image width="138" height="47" src="/images/logo/deski_06.svg" alt="brand" />
|
||||
</Link>
|
||||
<div className="fix-icon text-dark" onClick={handleClick}>
|
||||
<Image width="14" height="14" src="/images/icon/close.svg" alt="icon" />
|
||||
</div>
|
||||
{/* Mobile Menu close icon */}
|
||||
</div>
|
||||
|
||||
|
||||
<div
|
||||
|
||||
>
|
||||
<p data-to-scrollspy-id="home" className="nav-item">
|
||||
<a href="#home" className="nav-link" onClick={handleClick}>
|
||||
Home
|
||||
</a>
|
||||
</p>
|
||||
|
||||
<div data-to-scrollspy-id="product" className="nav-item">
|
||||
<a href="#product" className="nav-link" onClick={handleClick}>
|
||||
Product
|
||||
</a>
|
||||
</div> <div data-to-scrollspy-id="features" className="nav-item">
|
||||
<a href="#features" className="nav-link" onClick={handleClick}>
|
||||
Features
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div data-to-scrollspy-id="pricing" className="nav-item">
|
||||
<a href="#pricing" className="nav-link" onClick={handleClick}>
|
||||
Pricing
|
||||
</a>
|
||||
</div> <div data-to-scrollspy-id="feedback" className="nav-item">
|
||||
<a href="#feedback" className="nav-link" onClick={handleClick}>
|
||||
Feedback
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/* Mobile Menu End */}
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default HeaderLandingMobileApp;
|
||||
@@ -0,0 +1,240 @@
|
||||
'use client'
|
||||
|
||||
import React, { useEffect, useState } from "react";
|
||||
|
||||
import Link from "next/link";
|
||||
import MegaMenuLanding from "../../header/mega-menu/MegaMenuLanding";
|
||||
import Image from "next/image";
|
||||
|
||||
const HeaderLandingNoteTaking = () => {
|
||||
// For header select menu
|
||||
const [click1, setClick1] = useState(false);
|
||||
const handleClick1 = () => setClick1(!click1);
|
||||
|
||||
// For Mobile menu
|
||||
const [click, setClick] = useState(false);
|
||||
const handleClick = () => setClick(!click);
|
||||
const [navbar, setNavbar] = useState(false);
|
||||
|
||||
const changeBackground = () => {
|
||||
if (typeof window !== "undefined") {
|
||||
if (window.scrollY >= 90) {
|
||||
setNavbar(true);
|
||||
} else {
|
||||
setNavbar(false);
|
||||
}
|
||||
}
|
||||
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
window.addEventListener("scroll", changeBackground);
|
||||
|
||||
return () => {
|
||||
window.removeEventListener("scroll", changeBackground);
|
||||
}
|
||||
}, [])
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
return (
|
||||
<>
|
||||
{/* =============================================
|
||||
Theme Main Menu
|
||||
============================================== */}
|
||||
<div
|
||||
className={
|
||||
navbar
|
||||
? "theme-main-menu sticky-menu theme-menu-five fixed"
|
||||
: "theme-main-menu sticky-menu theme-menu-five"
|
||||
}
|
||||
>
|
||||
<div className="d-flex align-items-center justify-content-center">
|
||||
<div className="logo">
|
||||
<Link href="/doc-landing">
|
||||
<Image width="138" height="47" src="/images/logo/deski_06.svg" alt="brand" />
|
||||
</Link>
|
||||
</div>
|
||||
{/* End logo */}
|
||||
|
||||
<nav id="mega-menu-holder" className="navbar navbar-expand-lg">
|
||||
<div className="container nav-container">
|
||||
<div className="mob-header">
|
||||
<button className="toggler-menu" onClick={handleClick}>
|
||||
<div className={click ? "active" : ""}>
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
</div>
|
||||
</button>
|
||||
</div>
|
||||
{/* End Header */}
|
||||
|
||||
<div
|
||||
className="navbar-collapse collapse landing-menu-onepage"
|
||||
id="navbarSupportedContent"
|
||||
>
|
||||
<div className="d-lg-flex justify-content-between align-items-center">
|
||||
<div
|
||||
className="navbar-nav main-side-nav font-gordita"
|
||||
|
||||
>
|
||||
<div data-to-scrollspy-id="home" className="nav-item dropdown position-static">
|
||||
<a
|
||||
className="nav-link dropdown-toggle"
|
||||
href="#home"
|
||||
data-toggle="dropdown"
|
||||
|
||||
>
|
||||
Home
|
||||
</a>
|
||||
<div className="dropdown-menu">
|
||||
<MegaMenuLanding />
|
||||
</div>
|
||||
</div>
|
||||
<div data-to-scrollspy-id="product" className="nav-item">
|
||||
<a href="#product" className="nav-link">
|
||||
Product
|
||||
</a>
|
||||
</div>
|
||||
<div data-to-scrollspy-id="features" className="nav-item">
|
||||
<a href="#features" className="nav-link">
|
||||
Features
|
||||
</a>
|
||||
</div>
|
||||
<div data-to-scrollspy-id="why_us" className="nav-item">
|
||||
<a href="#why_us" className="nav-link">
|
||||
Why Us
|
||||
</a>
|
||||
</div>
|
||||
|
||||
|
||||
<div data-to-scrollspy-id="pricing" className="nav-item">
|
||||
<a href="#pricing" className="nav-link">
|
||||
Pricing
|
||||
</a>
|
||||
</div> <div data-to-scrollspy-id="feedback" className="nav-item">
|
||||
<a href="#feedback" className="nav-link">
|
||||
Feedback
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
{/* End Navbar */}
|
||||
|
||||
<div className="right-widget">
|
||||
<ul className="d-flex align-items-center">
|
||||
<li>
|
||||
<Link
|
||||
href="/login"
|
||||
className="signIn-action d-flex align-items-center"
|
||||
>
|
||||
<Image width="14" height="19" src="/images/icon/52.svg" alt="icon" />
|
||||
<span>login</span>
|
||||
</Link>
|
||||
</li>
|
||||
{/* End login */}
|
||||
<li>
|
||||
<div
|
||||
className={
|
||||
click1
|
||||
? "dropdown download-btn show"
|
||||
: "dropdown download-btn"
|
||||
}
|
||||
>
|
||||
<button
|
||||
className="dropdown-toggle"
|
||||
onClick={handleClick1}
|
||||
type="button"
|
||||
>
|
||||
Download
|
||||
</button>
|
||||
<div
|
||||
className={click1 ? "dropdown-menu show" : "dropdown-menu"}
|
||||
>
|
||||
<a
|
||||
className="dropdown-item d-flex align-items-center"
|
||||
href="#"
|
||||
onClick={handleClick1}
|
||||
>
|
||||
<Image width="22" height="22" src="/images/icon/103.svg" alt="icon" />
|
||||
<span>IOS & Android</span>
|
||||
</a>
|
||||
<a
|
||||
className="dropdown-item d-flex align-items-center"
|
||||
href="#"
|
||||
onClick={handleClick1}
|
||||
>
|
||||
<Image width="20" height="20" src="/images/icon/104.svg" alt="icon" />
|
||||
<span>Mac & Windows</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
{/* End right-widget */}
|
||||
</div>
|
||||
</div>
|
||||
{/* /.theme-main-menu */}
|
||||
|
||||
{/* Mobile Menu Start */}
|
||||
<div className={click ? "mobile-menu menu-open" : "mobile-menu"}>
|
||||
<div className="logo order-md-1">
|
||||
<Link href="/doc-landing">
|
||||
<Image width="138" height="47" src="/images/logo/deski_06.svg" alt="brand" />
|
||||
</Link>
|
||||
<div className="fix-icon text-dark" onClick={handleClick}>
|
||||
<Image width="14" height="14" src="/images/icon/close.svg" alt="icon" />
|
||||
</div>
|
||||
{/* Mobile Menu close icon */}
|
||||
</div>
|
||||
|
||||
<div
|
||||
|
||||
>
|
||||
<p data-to-scrollspy-id="home" className="nav-item">
|
||||
<a href="#home" className="nav-link" onClick={handleClick}>
|
||||
Home
|
||||
</a>
|
||||
</p>
|
||||
<div data-to-scrollspy-id="features" className="nav-item">
|
||||
<a href="#features" className="nav-link" onClick={handleClick}>
|
||||
Features
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div data-to-scrollspy-id="product" className="nav-item">
|
||||
<a href="#product" className="nav-link" onClick={handleClick}>
|
||||
Product
|
||||
</a>
|
||||
</div>
|
||||
<div data-to-scrollspy-id="why_us" className="nav-item">
|
||||
<a href="#why_us" className="nav-link" onClick={handleClick}>
|
||||
Why Us
|
||||
</a>
|
||||
</div>
|
||||
|
||||
|
||||
<div data-to-scrollspy-id="pricing" className="nav-item">
|
||||
<a href="#pricing" className="nav-link" onClick={handleClick}>
|
||||
Pricing
|
||||
</a>
|
||||
</div> <div data-to-scrollspy-id="feedback" className="nav-item">
|
||||
<a href="#feedback" className="nav-link" onClick={handleClick}>
|
||||
Feedback
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/* Mobile Menu End */}
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default HeaderLandingNoteTaking;
|
||||
@@ -0,0 +1,196 @@
|
||||
'use client'
|
||||
|
||||
import React, { useEffect, useState } from "react";
|
||||
|
||||
import Link from "next/link";
|
||||
import MegaMenuLanding from "../../header/mega-menu/MegaMenuLanding";
|
||||
import Image from "next/image";
|
||||
|
||||
const HeaderLandingWebsiteBuilder = () => {
|
||||
// For Mobile menu
|
||||
const [click, setClick] = useState(false);
|
||||
const handleClick = () => setClick(!click);
|
||||
const [navbar, setNavbar] = useState(false);
|
||||
|
||||
const changeBackground = () => {
|
||||
if (typeof window !== "undefined") {
|
||||
if (window.scrollY >= 90) {
|
||||
setNavbar(true);
|
||||
} else {
|
||||
setNavbar(false);
|
||||
}
|
||||
}
|
||||
|
||||
};
|
||||
|
||||
|
||||
useEffect(() => {
|
||||
window.addEventListener("scroll", changeBackground);
|
||||
|
||||
return () => {
|
||||
window.removeEventListener("scroll", changeBackground);
|
||||
}
|
||||
}, [])
|
||||
|
||||
|
||||
|
||||
|
||||
return (
|
||||
<>
|
||||
{/* =============================================
|
||||
Theme Main Menu
|
||||
============================================== */}
|
||||
<div
|
||||
className={
|
||||
navbar
|
||||
? "theme-main-menu sticky-menu theme-menu-seven bg-none fixed"
|
||||
: "theme-main-menu sticky-menu theme-menu-seven bg-none"
|
||||
}
|
||||
>
|
||||
<div className="d-flex align-items-center justify-content-between">
|
||||
<div className="logo order-lg-1">
|
||||
<Link href="/doc-landing">
|
||||
<Image width="137" height="34" src="/images/logo/deski_09.svg" alt="brand" />
|
||||
</Link>
|
||||
</div>
|
||||
{/* End logo */}
|
||||
|
||||
<div className="right-widget order-lg-3">
|
||||
<ul className="d-flex align-items-center">
|
||||
<li>
|
||||
<Link
|
||||
href="/login"
|
||||
className="signIn-action d-flex align-items-center"
|
||||
>
|
||||
<Image width="20" height="21" src="/images/icon/120.svg" alt="icon" />
|
||||
<span>login</span>
|
||||
</Link>
|
||||
</li>
|
||||
{/* End login */}
|
||||
<li>
|
||||
<Link
|
||||
href="/signup"
|
||||
className="theme-btn-twelve d-none d-lg-block"
|
||||
>
|
||||
Start Free Trial
|
||||
</Link>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
{/* End right-widget */}
|
||||
|
||||
<nav
|
||||
id="mega-menu-holder"
|
||||
className="navbar navbar-expand-lg ps-xl-5 ms-xl-5 order-lg-2"
|
||||
>
|
||||
<div className="container nav-container">
|
||||
<div className="mob-header">
|
||||
<button className="toggler-menu" onClick={handleClick}>
|
||||
<div className={click ? "active" : ""}>
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
</div>
|
||||
</button>
|
||||
</div>
|
||||
{/* End Header */}
|
||||
|
||||
<div
|
||||
className="navbar-collapse collapse landing-menu-onepage"
|
||||
id="navbarSupportedContent"
|
||||
>
|
||||
<div
|
||||
className="navbar-nav main-side-nav font-gordita"
|
||||
// items={[
|
||||
// "home",
|
||||
// "feature",
|
||||
// "product",
|
||||
// "feedback",
|
||||
// "pricing",
|
||||
// ]}
|
||||
// currentClassName="active"
|
||||
// offset={-500}
|
||||
>
|
||||
<div data-to-scrollspy-id="home" className="nav-item dropdown position-static">
|
||||
<a
|
||||
className="nav-link dropdown-toggle"
|
||||
href="#home"
|
||||
data-toggle="dropdown"
|
||||
|
||||
>
|
||||
Home
|
||||
</a>
|
||||
<div className="dropdown-menu">
|
||||
<MegaMenuLanding />
|
||||
</div>
|
||||
</div>
|
||||
<div data-to-scrollspy-id="feature" className="nav-item">
|
||||
<a href="#feature" className="nav-link">
|
||||
Features
|
||||
</a>
|
||||
</div>
|
||||
<div data-to-scrollspy-id="p-tour" className="nav-item">
|
||||
<a href="#p-tour" className="nav-link">
|
||||
Product Tour
|
||||
</a>
|
||||
</div>
|
||||
<div data-to-scrollspy-id="feedback" className="nav-item">
|
||||
<a href="#feedback" className="nav-link">
|
||||
Feedback
|
||||
</a>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
{/* End Navbar */}
|
||||
</div>
|
||||
</div>
|
||||
{/* /.theme-main-menu */}
|
||||
|
||||
{/* Mobile Menu Start */}
|
||||
<div className={click ? "mobile-menu menu-open" : "mobile-menu"}>
|
||||
<div className="logo order-md-1">
|
||||
<Link href="/doc-landing">
|
||||
<Image width="138" height="47" src="/images/logo/deski_06.svg" alt="brand" />
|
||||
</Link>
|
||||
<div className="fix-icon text-dark" onClick={handleClick}>
|
||||
<Image width="14" height="14" src="/images/icon/close.svg" alt="icon" />
|
||||
</div>
|
||||
{/* Mobile Menu close icon */}
|
||||
</div>
|
||||
|
||||
|
||||
<div
|
||||
|
||||
>
|
||||
<p data-to-scrollspy-id="home" className="nav-item">
|
||||
<a href="#home" className="nav-link" onClick={handleClick}>
|
||||
Home
|
||||
</a>
|
||||
</p>
|
||||
<div data-to-scrollspy-id="feature" className="nav-item">
|
||||
<a href="#feature" className="nav-link" onClick={handleClick}>
|
||||
Features
|
||||
</a>
|
||||
</div>
|
||||
<div data-to-scrollspy-id="p-tour" className="nav-item">
|
||||
<a href="#p-tour" className="nav-link" onClick={handleClick}>
|
||||
Product Tour
|
||||
</a>
|
||||
</div>
|
||||
<div data-to-scrollspy-id="feedback" className="nav-item">
|
||||
<a href="#feedback" className="nav-link" onClick={handleClick}>
|
||||
Feedback
|
||||
</a>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
{/* Mobile Menu End */}
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default HeaderLandingWebsiteBuilder;
|
||||
@@ -0,0 +1,278 @@
|
||||
|
||||
|
||||
'use client'
|
||||
import Image from "next/image";
|
||||
import React, { useState } from "react";
|
||||
import Link from "next/link";
|
||||
import { usePathname } from "next/navigation";
|
||||
import MenuLink from "./MenuLink";
|
||||
import MenuLinkTwo from "./MenuLinkTwo";
|
||||
const HomeDropdown = [
|
||||
{
|
||||
img: "home06",
|
||||
routerPath: "/",
|
||||
inenerText: "",
|
||||
inenerTextWrapClass: "",
|
||||
clasName: `dropdown-item img-box`,
|
||||
title: "Product Landing Dark",
|
||||
},
|
||||
{
|
||||
img: "home01",
|
||||
routerPath: "/home",
|
||||
inenerText: "",
|
||||
inenerTextWrapClass: "",
|
||||
clasName: `dropdown-item img-box`,
|
||||
title: "Event Organizer",
|
||||
},
|
||||
{
|
||||
img: "home02",
|
||||
routerPath: "/doc-landing",
|
||||
inenerText: "",
|
||||
inenerTextWrapClass: "",
|
||||
clasName: `dropdown-item img-box`,
|
||||
title: "Doc Landing",
|
||||
},
|
||||
{
|
||||
img: "home03",
|
||||
routerPath: "/project-management",
|
||||
inenerText: "",
|
||||
inenerTextWrapClass: "",
|
||||
clasName: `dropdown-item img-box`,
|
||||
title: "Project Management",
|
||||
},
|
||||
];
|
||||
|
||||
const Pricing = [
|
||||
{
|
||||
name: "Customer Support",
|
||||
routerPath: "/pricing-cs",
|
||||
},
|
||||
{
|
||||
name: "Event Organiser",
|
||||
routerPath: "/pricing-eo",
|
||||
},
|
||||
{
|
||||
name: "Project Management",
|
||||
routerPath: "/pricing-pm",
|
||||
},
|
||||
];
|
||||
const AboutUs = [
|
||||
{
|
||||
name: "Customer Support",
|
||||
routerPath: "/about-cs",
|
||||
},
|
||||
{
|
||||
name: "Event Organiser",
|
||||
routerPath: "/about-eo",
|
||||
},
|
||||
{
|
||||
name: "Project Management",
|
||||
routerPath: "/about-pm",
|
||||
},
|
||||
{
|
||||
name: "Documentation",
|
||||
routerPath: "/about-doc",
|
||||
},
|
||||
];
|
||||
|
||||
const ContactUS = [
|
||||
{
|
||||
name: "Customer Support",
|
||||
routerPath: "/contact-cs",
|
||||
},
|
||||
{
|
||||
name: "Event Organiser",
|
||||
routerPath: "/contact-eo",
|
||||
},
|
||||
{
|
||||
name: "Project Management",
|
||||
routerPath: "/contact-pm",
|
||||
},
|
||||
{
|
||||
name: "Documentation",
|
||||
routerPath: "/contact-doc",
|
||||
},
|
||||
];
|
||||
const Team = [
|
||||
{
|
||||
name: "Team Version 01",
|
||||
routerPath: "/team-1",
|
||||
},
|
||||
{
|
||||
name: "Team Version 02",
|
||||
routerPath: "/team-2",
|
||||
},
|
||||
{
|
||||
name: "Team Version 03",
|
||||
routerPath: "/team-3",
|
||||
},
|
||||
{
|
||||
name: "Team Version 04",
|
||||
routerPath: "/team-4",
|
||||
},
|
||||
{
|
||||
name: "Team Version 05",
|
||||
routerPath: "/team-5",
|
||||
},
|
||||
{
|
||||
name: "Team Version 06",
|
||||
routerPath: "/team-6",
|
||||
},
|
||||
{
|
||||
name: "Team Details",
|
||||
routerPath: "/teams/1",
|
||||
},
|
||||
{
|
||||
name: "Team Details Slider",
|
||||
routerPath: "/team-details-v2/1",
|
||||
},
|
||||
];
|
||||
|
||||
const Services = [
|
||||
{
|
||||
name: "Service Version 01",
|
||||
routerPath: "/service-v1",
|
||||
},
|
||||
{
|
||||
name: "Service Version 02",
|
||||
routerPath: "/service-v2",
|
||||
},
|
||||
{
|
||||
name: "Service Version 03",
|
||||
routerPath: "/service-v3",
|
||||
},
|
||||
{
|
||||
name: "Service Version 04",
|
||||
routerPath: "/service-v4",
|
||||
},
|
||||
{
|
||||
name: "Service Details",
|
||||
routerPath: "/services/1",
|
||||
},
|
||||
];
|
||||
const Miscellaneous = [
|
||||
{
|
||||
name: "Terms & Condition",
|
||||
routerPath: "/terms-conditions",
|
||||
},
|
||||
{
|
||||
name: "Login",
|
||||
routerPath: "/login",
|
||||
},
|
||||
{
|
||||
name: "Signup",
|
||||
routerPath: "/signup",
|
||||
},
|
||||
{
|
||||
name: "404",
|
||||
routerPath: "/not-found",
|
||||
},
|
||||
];
|
||||
const Portfolio = [
|
||||
{
|
||||
name: "Classic Style",
|
||||
routerPath: "/classic-style",
|
||||
},
|
||||
{
|
||||
name: "Grid 2 Columns",
|
||||
routerPath: "/grid-two-col",
|
||||
},
|
||||
{
|
||||
name: "Grid 3 Columns",
|
||||
routerPath: "/grid-three-col",
|
||||
},
|
||||
{
|
||||
name: "Gallery Slider",
|
||||
routerPath: "/gallery-slider",
|
||||
},
|
||||
{
|
||||
name: "Grid Single",
|
||||
routerPath: "/grid-single",
|
||||
},
|
||||
{
|
||||
name: "Classic Details",
|
||||
routerPath: "/portfolios/3",
|
||||
},
|
||||
];
|
||||
const Blogs = [
|
||||
{
|
||||
name: "Blog Version 01",
|
||||
routerPath: "/blog-v1",
|
||||
},
|
||||
{
|
||||
name: "Blog Version 02",
|
||||
routerPath: "/blog-v2",
|
||||
},
|
||||
{
|
||||
name: "Blog Version 03",
|
||||
routerPath: "/blog-v3",
|
||||
},
|
||||
{
|
||||
name: "Blog Version 04",
|
||||
routerPath: "/blog-v4",
|
||||
},
|
||||
{
|
||||
name: "Blog Version 05",
|
||||
routerPath: "/blog-v5",
|
||||
},
|
||||
{
|
||||
name: "Blog Version 06",
|
||||
routerPath: "/blog-v6",
|
||||
},
|
||||
{
|
||||
name: "Blog Details",
|
||||
routerPath: "/blogs/1",
|
||||
},
|
||||
];
|
||||
const Docs = [
|
||||
{
|
||||
name: "Full Width",
|
||||
routerPath: "/doc-full-width",
|
||||
},
|
||||
{
|
||||
name: "Full Width Banner",
|
||||
routerPath: "/doc-full-width-banner",
|
||||
},
|
||||
{
|
||||
name: "Doc Box",
|
||||
routerPath: "/doc-box",
|
||||
},
|
||||
{
|
||||
name: "Doc Box With Banner",
|
||||
routerPath: "/doc-box-with-banner",
|
||||
},
|
||||
{
|
||||
name: "Changelog ***",
|
||||
routerPath: "/changelog",
|
||||
},
|
||||
];
|
||||
|
||||
const MegaMenu = () => {
|
||||
const pathname = usePathname();
|
||||
const [currentTopRoute, setCurrentTopRoute] = useState('Home')
|
||||
return (
|
||||
<ul className="navbar-nav">
|
||||
<li className={currentTopRoute == 'Home' ? "nav-item position-static active":"nav-item position-static" } >
|
||||
<a className="nav-link" href="/" data-toggle="dropdown">
|
||||
Home
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li className={currentTopRoute == 'Pages' ? "nav-item active":"nav-item" }>
|
||||
<a className={currentTopRoute == 'Pages' ? "nav-link active":"nav-link"} href="/about-cs" data-toggle="dropdown">
|
||||
About
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li className={currentTopRoute == 'Blogs' ? "nav-item active":"nav-item" }>
|
||||
<a className={currentTopRoute == 'Blogs' ? "nav-link active":"nav-link "} href="/blog-v2" data-toggle="dropdown">
|
||||
Blogs
|
||||
</a>
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
);
|
||||
// End navbar nav mega menu main
|
||||
};
|
||||
|
||||
export default MegaMenu;
|
||||
@@ -0,0 +1,158 @@
|
||||
'use client'
|
||||
|
||||
import React from "react";
|
||||
import Link from "next/link";
|
||||
import Image from "next/image";
|
||||
const HomeDropdown = [
|
||||
{
|
||||
img: "home01",
|
||||
routerPath: "/",
|
||||
inenerText: "",
|
||||
inenerTextWrapClass: "",
|
||||
clasName: `dropdown-item img-box`,
|
||||
title: "Event Organizer",
|
||||
},
|
||||
{
|
||||
img: "home02",
|
||||
routerPath: "/doc-landing",
|
||||
inenerText: "",
|
||||
inenerTextWrapClass: "",
|
||||
clasName: `dropdown-item img-box`,
|
||||
title: "Doc Landing",
|
||||
},
|
||||
{
|
||||
img: "home03",
|
||||
routerPath: "/project-management",
|
||||
inenerText: "",
|
||||
inenerTextWrapClass: "",
|
||||
clasName: `dropdown-item img-box`,
|
||||
title: "Project Management",
|
||||
},
|
||||
{
|
||||
img: "home04",
|
||||
routerPath: "/customer-support",
|
||||
inenerText: "",
|
||||
inenerTextWrapClass: "",
|
||||
clasName: `dropdown-item img-box`,
|
||||
title: "Customer Support",
|
||||
},
|
||||
{
|
||||
img: "home05",
|
||||
routerPath: "/product-landing",
|
||||
inenerText: "",
|
||||
inenerTextWrapClass: "",
|
||||
clasName: `dropdown-item img-box`,
|
||||
title: "Product Landing",
|
||||
},
|
||||
{
|
||||
img: "home06",
|
||||
routerPath: "/product-landing-dark",
|
||||
inenerText: "",
|
||||
inenerTextWrapClass: "",
|
||||
clasName: `dropdown-item img-box`,
|
||||
title: "Product Landing Dark",
|
||||
},
|
||||
{
|
||||
img: "home07",
|
||||
routerPath: "/note-taking-landing",
|
||||
inenerText: "",
|
||||
inenerTextWrapClass: "",
|
||||
clasName: `dropdown-item img-box`,
|
||||
title: "Not Taking Landing",
|
||||
},
|
||||
{
|
||||
img: "home08",
|
||||
routerPath: "/video-editor-landing",
|
||||
inenerText: "",
|
||||
inenerTextWrapClass: "",
|
||||
clasName: `dropdown-item img-box`,
|
||||
title: "Video Editor Landing",
|
||||
},
|
||||
{
|
||||
img: "home10",
|
||||
routerPath: "/appointment-scheduling",
|
||||
inenerText: "",
|
||||
inenerTextWrapClass: "",
|
||||
clasName: `dropdown-item img-box`,
|
||||
title: "Appointment Scheduling",
|
||||
},
|
||||
{
|
||||
img: "home13",
|
||||
routerPath: "/website-builder",
|
||||
inenerText: "",
|
||||
inenerTextWrapClass: "",
|
||||
clasName: `dropdown-item img-box`,
|
||||
title: "Website Builder",
|
||||
},
|
||||
{
|
||||
img: "home11",
|
||||
routerPath: "/mobile-app-landing",
|
||||
inenerText: "",
|
||||
inenerTextWrapClass: "",
|
||||
clasName: `dropdown-item img-box`,
|
||||
title: "Mobile App Landing",
|
||||
},
|
||||
{
|
||||
img: "home12",
|
||||
routerPath: "/doc-signature",
|
||||
inenerText: "",
|
||||
inenerTextWrapClass: "",
|
||||
clasName: `dropdown-item img-box`,
|
||||
title: "Doc Signature",
|
||||
},
|
||||
{
|
||||
img: "home14",
|
||||
routerPath: "/form-survey-landing",
|
||||
inenerText: "",
|
||||
inenerTextWrapClass: "",
|
||||
clasName: `dropdown-item img-box`,
|
||||
title: "Form Survey",
|
||||
},
|
||||
{
|
||||
img: "home16",
|
||||
routerPath: "/vr-landing",
|
||||
inenerText: "",
|
||||
inenerTextWrapClass: "",
|
||||
clasName: `dropdown-item img-box`,
|
||||
title: "VR Landing",
|
||||
},
|
||||
|
||||
{
|
||||
img: "home09",
|
||||
routerPath: "/coming-soon",
|
||||
inenerText: "",
|
||||
inenerTextWrapClass: "",
|
||||
clasName: `dropdown-item img-box`,
|
||||
title: "Coming Soon",
|
||||
},
|
||||
{
|
||||
img: "home15",
|
||||
routerPath: "/e-commerce",
|
||||
inenerText: "",
|
||||
inenerTextWrapClass: "",
|
||||
clasName: `dropdown-item img-box`,
|
||||
title: "E-commerce",
|
||||
},
|
||||
];
|
||||
import { usePathname } from "next/navigation";
|
||||
const MegaMenuLanding = () => {
|
||||
const pathname = usePathname();
|
||||
return (
|
||||
<ul className="mega-menu d-flex " style={{maxHeight:'calc(100vh - 100px)',overflowY:'scroll'}}>
|
||||
{HomeDropdown.map((val, i) => (
|
||||
<li key={i}>
|
||||
<Link href={val.routerPath} className={val.clasName}>
|
||||
<Image width={990} height={890} style={{width:'100%',height:'fit-content'}} src={`/images/menu/${val.img}.png`} alt="home-demo" />
|
||||
<span className={pathname == val.routerPath ? "font-rubik activeMenu" : 'font-rubik'}>{val.title}</span>
|
||||
<div className={val.inenerTextWrapClass}>
|
||||
<div className="font-rubik">{val.inenerText}</div>
|
||||
</div>
|
||||
</Link>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
);
|
||||
// End navbar nav mega menu main
|
||||
};
|
||||
|
||||
export default MegaMenuLanding;
|
||||
@@ -0,0 +1,327 @@
|
||||
'use client'
|
||||
|
||||
import React, { useState } from "react";
|
||||
import Link from "next/link";
|
||||
|
||||
import Image from "next/image";
|
||||
|
||||
const HomeMobileMenu = [
|
||||
{
|
||||
label: "Event Organiser",
|
||||
href: "/",
|
||||
},
|
||||
{
|
||||
label: "Project Management",
|
||||
href: "/project-management",
|
||||
},
|
||||
{
|
||||
label: "Customer Support",
|
||||
href: "/customer-support",
|
||||
},
|
||||
{
|
||||
label: "Doc landing",
|
||||
href: "/doc-landing",
|
||||
},
|
||||
{
|
||||
label: "Product landing",
|
||||
href: "/product-landing",
|
||||
},
|
||||
{
|
||||
label: "Product landing Dark",
|
||||
href: "/product-landing-dark",
|
||||
},
|
||||
{
|
||||
label: "Note Taking App landing",
|
||||
href: "/note-taking-landing",
|
||||
},
|
||||
{
|
||||
label: "Video Editor Landing",
|
||||
href: "/video-editor-landing",
|
||||
},
|
||||
{
|
||||
label: "Appointment Scheduling",
|
||||
href: "/appointment-scheduling",
|
||||
},
|
||||
{
|
||||
label: "Mobile App",
|
||||
href: "/mobile-app-landing",
|
||||
},
|
||||
{
|
||||
label: "Doc Signature",
|
||||
href: "/doc-signature",
|
||||
},
|
||||
{
|
||||
label: "Website Builder",
|
||||
href: "/website-builder",
|
||||
},
|
||||
{
|
||||
label: "Form Survey",
|
||||
href: "/form-survey-landing",
|
||||
},
|
||||
{
|
||||
label: "VR Landing",
|
||||
href: "/vr-landing",
|
||||
},
|
||||
{
|
||||
label: "E-Commerce",
|
||||
href: "/e-commerce",
|
||||
},
|
||||
{
|
||||
label: "Coming Soon",
|
||||
href: "/coming-soon",
|
||||
},
|
||||
];
|
||||
|
||||
const Pricing = [
|
||||
{
|
||||
label: "Customer Support",
|
||||
href: "/pricing-cs",
|
||||
},
|
||||
{
|
||||
label: "Event Organiser",
|
||||
href: "/pricing-eo",
|
||||
},
|
||||
{
|
||||
label: "Project Management",
|
||||
href: "/pricing-pm",
|
||||
},
|
||||
];
|
||||
const AboutUs = [
|
||||
{
|
||||
label: "Customer Support",
|
||||
href: "/about-cs",
|
||||
},
|
||||
{
|
||||
label: "Event Organiser",
|
||||
href: "/about-eo",
|
||||
},
|
||||
{
|
||||
label: "Project Management",
|
||||
href: "/about-pm",
|
||||
},
|
||||
{
|
||||
label: "Documentation",
|
||||
href: "/about-doc",
|
||||
},
|
||||
];
|
||||
const ContactUs = [
|
||||
{
|
||||
label: "Custom Support",
|
||||
href: "/contact-cs",
|
||||
},
|
||||
{
|
||||
label: "Event Organizer",
|
||||
href: "/contact-eo",
|
||||
},
|
||||
{
|
||||
label: "Project Management",
|
||||
href: "/contact-pm",
|
||||
},
|
||||
{
|
||||
label: "Documentation",
|
||||
href: "/contact-doc",
|
||||
},
|
||||
];
|
||||
const Team = [
|
||||
{
|
||||
label: "Team Version 01",
|
||||
href: "/team-1",
|
||||
},
|
||||
{
|
||||
label: "Team Version 02",
|
||||
href: "/team-2",
|
||||
},
|
||||
{
|
||||
label: "Team Version 03",
|
||||
href: "/team-3",
|
||||
},
|
||||
{
|
||||
label: "Team Version 04",
|
||||
href: "/team-4",
|
||||
},
|
||||
{
|
||||
label: "Team Version 05",
|
||||
href: "/team-5",
|
||||
},
|
||||
{
|
||||
label: "Team Version 06",
|
||||
href: "/team-6",
|
||||
},
|
||||
{
|
||||
label: "Team Details",
|
||||
href: "/teams/1",
|
||||
},
|
||||
{
|
||||
label: "Team Details Slider",
|
||||
href: "/team-details-v2/1",
|
||||
},
|
||||
];
|
||||
const Services = [
|
||||
{
|
||||
label: "Service Version 01",
|
||||
href: "/service-v1",
|
||||
},
|
||||
{
|
||||
label: "Service Version 02",
|
||||
href: "/service-v2",
|
||||
},
|
||||
{
|
||||
label: "Service Version 03",
|
||||
href: "/service-v3",
|
||||
},
|
||||
{
|
||||
label: "Service Version 04",
|
||||
href: "/service-v4",
|
||||
},
|
||||
{
|
||||
label: "Service Details",
|
||||
href: "/services/3",
|
||||
},
|
||||
];
|
||||
const Miscellaneous = [
|
||||
{
|
||||
label: "Terms & Condition)",
|
||||
href: "/terms-conditions",
|
||||
},
|
||||
{
|
||||
label: "Login",
|
||||
href: "/login",
|
||||
},
|
||||
{
|
||||
label: "Signup",
|
||||
href: "/signup",
|
||||
},
|
||||
{
|
||||
label: "404",
|
||||
href: "/not-found",
|
||||
},
|
||||
];
|
||||
const Portfolio = [
|
||||
{
|
||||
label: "Classic Style",
|
||||
href: "/classic-style",
|
||||
},
|
||||
{
|
||||
label: "Grid 2 Columns",
|
||||
href: "/grid-two-col",
|
||||
},
|
||||
{
|
||||
label: "Grid 3 Columns",
|
||||
href: "/grid-three-col",
|
||||
},
|
||||
{
|
||||
label: "Gallery Slider",
|
||||
href: "/gallery-slider",
|
||||
},
|
||||
{
|
||||
label: "Grid Single",
|
||||
href: "/grid-single",
|
||||
},
|
||||
{
|
||||
label: "Classic Details",
|
||||
href: "/portfolios/2",
|
||||
},
|
||||
];
|
||||
const Blogs = [
|
||||
{
|
||||
label: "Blog Version 01",
|
||||
href: "/blog-v1",
|
||||
},
|
||||
{
|
||||
label: "Blog Version 02",
|
||||
href: "/blog-v2",
|
||||
},
|
||||
{
|
||||
label: "Blog Version 03",
|
||||
href: "/blog-v3",
|
||||
},
|
||||
{
|
||||
label: "Blog Version 04",
|
||||
href: "/blog-v4",
|
||||
},
|
||||
{
|
||||
label: "Blog Version 05",
|
||||
href: "/blog-v5",
|
||||
},
|
||||
{
|
||||
label: "Blog Version 06",
|
||||
href: "/blog-v6",
|
||||
},
|
||||
{
|
||||
label: "Blog Details",
|
||||
href: "/blogs/3",
|
||||
},
|
||||
];
|
||||
const Docs = [
|
||||
{
|
||||
label: "Full Width",
|
||||
href: "/doc-full-width",
|
||||
},
|
||||
{
|
||||
label: "Full Width Banner",
|
||||
href: "/doc-full-width-banner",
|
||||
},
|
||||
{
|
||||
label: "Doc Box",
|
||||
href: "/doc-box",
|
||||
},
|
||||
{
|
||||
label: "Doc Box With Banner",
|
||||
href: "/doc-box-with-banner",
|
||||
},
|
||||
{
|
||||
label: "Changelog",
|
||||
href: "/changelog",
|
||||
},
|
||||
];
|
||||
import { usePathname } from "next/navigation";
|
||||
import MenuLinkTwo from "./MenuLinkTwo";
|
||||
import MobileMenuTwo from "../MobileMenuTwo";
|
||||
const MegaMenuMobile = () => {
|
||||
const [click, setClick] = useState(false);
|
||||
const handleClick = () => setClick(!click);
|
||||
|
||||
|
||||
return (
|
||||
<div className={`mega-menu-wrapper ${click ? 'active':''}`} style={{position:'fixed',top:'0px',left:'0px'}} >
|
||||
<div className="mega-swicher"></div>
|
||||
<div className="mob-header multi-mob-header">
|
||||
<button className="toggler-menu" onClick={handleClick}>
|
||||
<div className={click ? "active" : ""}>
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
</div>
|
||||
</button>
|
||||
</div>
|
||||
{/* End Header */}
|
||||
|
||||
<div
|
||||
style={{background:'#17192B',height:'100vh'}}
|
||||
|
||||
className={click ? "mega-mobile-menu menu-open wrapper-two-menu active" : "mega-mobile-menu wrapper-two-menu"}
|
||||
|
||||
|
||||
>
|
||||
<div>
|
||||
<div className="logo position-static" style={{paddingTop:'40px',paddingLeft:'16px'}} >
|
||||
<Link href="/">
|
||||
<Image width="137" height="34" src="/images/logo/deski_07.svg" alt="home-demo" />
|
||||
</Link>
|
||||
</div>
|
||||
<div className="fix-icon text-dark" onClick={handleClick}>
|
||||
<Image width="14" height="15" src="/images/icon/close-w.svg" alt="icon" />
|
||||
</div>
|
||||
{/* Mobile Menu close icon */}
|
||||
|
||||
{/* End logo */}
|
||||
</div>
|
||||
<div style={{background:'#17192B',}} >
|
||||
<MobileMenuTwo/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default MegaMenuMobile;
|
||||
@@ -0,0 +1,24 @@
|
||||
|
||||
'use client'
|
||||
import Link from "next/link";
|
||||
import React, { useEffect } from 'react'
|
||||
import { usePathname } from "next/navigation";
|
||||
export default function MenuLink({val,setCurrentTopRoute,topMenu}) {
|
||||
const pathname = usePathname();
|
||||
useEffect(() => {
|
||||
if (pathname.split('/')[1] == val.routerPath.split('/')[1]) {
|
||||
setCurrentTopRoute(topMenu)
|
||||
|
||||
}
|
||||
|
||||
|
||||
}, [])
|
||||
|
||||
return (
|
||||
<li >
|
||||
<Link href={val.routerPath} className={pathname.split('/')[1] == val.routerPath.split('/')[1] ? "dropdown-item active":'dropdown-item'}>
|
||||
{val.name}
|
||||
</Link>
|
||||
</li>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,21 @@
|
||||
'use client'
|
||||
import Link from "next/link";
|
||||
import React, { useEffect } from 'react'
|
||||
import { usePathname } from "next/navigation";
|
||||
|
||||
export default function MenuLinkTwo({val,setCurrentTopRoute,topMenu}) {
|
||||
const pathname = usePathname();
|
||||
useEffect(() => {
|
||||
if (pathname.split('/')[1] == val.routerPath.split('/')[1]) {
|
||||
setCurrentTopRoute(topMenu)
|
||||
|
||||
}
|
||||
|
||||
|
||||
}, [])
|
||||
return (
|
||||
<Link href={val.routerPath} className={pathname.split('/')[1] == val.routerPath.split('/')[1] ? "dropdown-item activeMenu":'dropdown-item'}>
|
||||
{val.name}
|
||||
</Link>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user