dev #16
@ -87,7 +87,7 @@ a {
|
||||
}
|
||||
|
||||
.mn-sub {
|
||||
transition: max-height 0.3s ease-in-out;
|
||||
transition: max-height;
|
||||
}
|
||||
|
||||
.mn-sub.open {
|
||||
|
@ -66,9 +66,11 @@
|
||||
--gradient-gray-light-1: linear-gradient(0deg, #f7f9fc 0%, #fff 100%);
|
||||
--gradient-gray-light-2: linear-gradient(0deg, #fff 0%, #f7f9fc 100%);
|
||||
--border-radius-default: 10px;
|
||||
--box-shadow: 0px 5px 10px 0px rgba(30, 36, 50, 0.05), 0px 1px 1px 0px rgba(30, 36, 50, 0.03),
|
||||
--box-shadow:
|
||||
0px 5px 10px 0px rgba(30, 36, 50, 0.05), 0px 1px 1px 0px rgba(30, 36, 50, 0.03),
|
||||
0px 3px 5px 0px rgba(30, 36, 50, 0.03);
|
||||
--box-shadow-strong: 0px 5px 10px 0px rgba(30, 36, 50, 0.08), 0px 1px 1px 0px rgba(30, 36, 50, 0.06),
|
||||
--box-shadow-strong:
|
||||
0px 5px 10px 0px rgba(30, 36, 50, 0.08), 0px 1px 1px 0px rgba(30, 36, 50, 0.06),
|
||||
0px 3px 5px 0px rgba(30, 36, 50, 0.06);
|
||||
--box-shadow-block: 0px 10px 30px 0px rgba(30, 36, 50, 0.07), 0px 0px 1px 0px rgba(30, 36, 50, 0.1);
|
||||
--box-shadow-block-strong: 0px 15px 50px 0px rgba(30, 36, 50, 0.14), 0px 0px 1px 0px rgba(30, 36, 50, 0.15);
|
||||
@ -201,12 +203,8 @@
|
||||
.theme-slick .inner-nav ul li {
|
||||
margin: 0 18px;
|
||||
}
|
||||
.theme-slick .inner-nav > ul > li > a {
|
||||
opacity: 0.7;
|
||||
}
|
||||
.theme-slick .inner-nav ul li a {
|
||||
position: relative;
|
||||
color: #fff;
|
||||
}
|
||||
.theme-slick .inner-nav > ul > li > a:not(.no-hover):before {
|
||||
content: "";
|
||||
@ -234,11 +232,7 @@
|
||||
.theme-slick .mobile-on .desktop-nav ul {
|
||||
background: rgba(30, 36, 50, 0.99);
|
||||
}
|
||||
.theme-slick .mobile-on .desktop-nav ul li a,
|
||||
.theme-slick .inner-nav ul li .mn-sub li a,
|
||||
.theme-slick .mn-group-title {
|
||||
color: rgba(255, 255, 255, 0.9) !important;
|
||||
}
|
||||
|
||||
.theme-slick .form label {
|
||||
margin-bottom: 15px;
|
||||
font-size: 18px;
|
||||
|
@ -238,10 +238,10 @@ Primary use: Multipurpose Template
|
||||
--gradient-primary-alpha-2: linear-gradient(90deg, transparent 13%, var(--color-primary-1) 60%);
|
||||
--border-radius-default: 4px;
|
||||
--border-radius-large: 30px;
|
||||
--box-shadow: 0px 5px 10px 0px rgba(0, 0, 0, 0.05), 0px 1px 1px 0px rgba(0, 0, 0, 0.03),
|
||||
0px 3px 5px 0px rgba(0, 0, 0, 0.03);
|
||||
--box-shadow-strong: 0px 5px 10px 0px rgba(0, 0, 0, 0.08), 0px 1px 1px 0px rgba(0, 0, 0, 0.06),
|
||||
0px 3px 5px 0px rgba(0, 0, 0, 0.06);
|
||||
--box-shadow:
|
||||
0px 5px 10px 0px rgba(0, 0, 0, 0.05), 0px 1px 1px 0px rgba(0, 0, 0, 0.03), 0px 3px 5px 0px rgba(0, 0, 0, 0.03);
|
||||
--box-shadow-strong:
|
||||
0px 5px 10px 0px rgba(0, 0, 0, 0.08), 0px 1px 1px 0px rgba(0, 0, 0, 0.06), 0px 3px 5px 0px rgba(0, 0, 0, 0.06);
|
||||
--box-shadow-block: 0px 3px 50px 0px rgba(0, 0, 0, 0.05);
|
||||
--box-shadow-block-strong: 0px 3px 50px 0px rgba(0, 0, 0, 0.15);
|
||||
--transition-default: all 0.27s cubic-bezier(0, 0, 0.58, 1);
|
||||
@ -3880,7 +3880,6 @@ a.logo:hover {
|
||||
display: table-cell;
|
||||
vertical-align: middle;
|
||||
height: var(--menu-bar-height);
|
||||
opacity: 0.65;
|
||||
}
|
||||
.main-nav:not(.mobile-on).small-height .inner-nav > ul > li > a {
|
||||
height: var(--menu-bar-height-scrolled) !important;
|
||||
@ -3979,7 +3978,6 @@ a.logo:hover {
|
||||
border-left: none;
|
||||
border-right: none;
|
||||
letter-spacing: 0;
|
||||
color: var(--color-gray-light-5) !important;
|
||||
outline-offset: -2px !important;
|
||||
transition: var(--transition-default);
|
||||
}
|
||||
@ -3990,7 +3988,6 @@ a.logo:hover {
|
||||
.inner-nav ul li .mn-sub li a:hover,
|
||||
.mn-sub li a.active {
|
||||
background: rgba(255, 255, 255, 0.09);
|
||||
color: var(--color-gray-light-1) !important;
|
||||
}
|
||||
.mn-sub:not(.mn-has-multi) li ul {
|
||||
left: 100%;
|
||||
@ -4324,22 +4321,11 @@ a.logo:hover {
|
||||
backdrop-filter: blur(10px);
|
||||
}
|
||||
.main-nav.dark .inner-nav ul > li > a {
|
||||
font-size: 18px;
|
||||
font-weight: 500;
|
||||
line-height: 1.2em;
|
||||
color: #fff;
|
||||
opacity: 0.78;
|
||||
padding: 10px;
|
||||
}
|
||||
.main-nav.dark .inner-nav ul > li > a:hover,
|
||||
.main-nav.dark .inner-nav ul > li > a.active {
|
||||
color: #fff;
|
||||
opacity: 1 !important;
|
||||
}
|
||||
|
||||
.main-nav.dark .inner-nav ul li .mn-sub li a {
|
||||
opacity: 1;
|
||||
}
|
||||
.main-nav.dark .main-nav-icon-cart {
|
||||
opacity: 1;
|
||||
}
|
||||
@ -4363,13 +4349,13 @@ a.logo:hover {
|
||||
font-size: 18px;
|
||||
font-weight: 700;
|
||||
text-decoration: none;
|
||||
color: rgba(255, 255, 255, 0.9);
|
||||
/* color: rgba(255, 255, 255, 0.9); */
|
||||
}
|
||||
.main-nav.dark .mn-sub {
|
||||
/* .main-nav.dark .mn-sub {
|
||||
-webkit-box-shadow: none;
|
||||
-moz-box-shadow: none;
|
||||
box-shadow: none;
|
||||
}
|
||||
} */
|
||||
.main-nav.dark .mi-chevron-down,
|
||||
.main-nav.dark.body-scrolled .inner-nav ul > li > a:hover .mi-chevron-down,
|
||||
.main-nav.dark.body-scrolled .inner-nav ul > li > a.active .mi-chevron-down {
|
||||
|
@ -12,7 +12,7 @@ const shareIcons: Record<string, any> = {
|
||||
link: "tel:+15208036644",
|
||||
dom: (
|
||||
<span className="social-nav flex gap-1 text-2xl lg:text-white">
|
||||
<Image src="/assets/icons/phone.png" alt="Image Description" width={25} height={22} />
|
||||
<Image src="/assets/icons/phone.png" alt="Phone" width={32} height={22} />
|
||||
<b className="text-[17px]">(520) 803-6644</b>
|
||||
</span>
|
||||
),
|
||||
@ -41,23 +41,20 @@ export default function Header({ links }: { links: typeof navMenuData }) {
|
||||
return (
|
||||
<nav className="main-nav dark stick-fixed wow-menubar wch-unset relative">
|
||||
<div className="main-nav-sub full-wrapper">
|
||||
{/* Logo (* Add your text or image to the link tag. Use SVG or PNG image format.
|
||||
If you use a PNG logo image, the image resolution must be equal 200% of the visible logo
|
||||
image size for support of retina screens. See details in the template documentation. *) */}
|
||||
<div className="nav-logo-wrap local-scroll">
|
||||
<Link href={`/`} className="logo">
|
||||
<Image
|
||||
src="/assets/images/demo-slick/logo-dark.webp"
|
||||
alt="Your Company Logo"
|
||||
width={105}
|
||||
height={34}
|
||||
width={500}
|
||||
height={195}
|
||||
className="light-mode-logo"
|
||||
/>
|
||||
<Image
|
||||
src="/assets/images/demo-slick/logo-dark.webp"
|
||||
alt="Your Company Logo"
|
||||
width={405}
|
||||
height={34}
|
||||
width={500}
|
||||
height={195}
|
||||
className="dark-mode-logo"
|
||||
/>
|
||||
</Link>
|
||||
@ -70,11 +67,10 @@ export default function Header({ links }: { links: typeof navMenuData }) {
|
||||
{/* Main Menu */}
|
||||
<div className="inner-nav desktop-nav">
|
||||
<ul className="clearlist local-scroll">
|
||||
{/* Item With Sub */}
|
||||
<HeaderNav links={links} />
|
||||
{/* End Item With Sub */}
|
||||
</ul>
|
||||
<ul className="items-end clearlist flex flex-col justify-center h-full">
|
||||
|
||||
<ul className="items-end flex flex-col justify-center h-full">
|
||||
<div className="flex flex-col items-center h-full w-full content-center justify-center gap-2">
|
||||
<a
|
||||
href="/contact"
|
||||
|
@ -7,12 +7,19 @@ import { scrollToElement } from "@/utils/scrollToElement";
|
||||
import { toggleMobileMenu } from "@/utils/toggleMobileMenu";
|
||||
import Link from "next/link";
|
||||
import { Fragment, useEffect, useRef, useState } from "react";
|
||||
import { motion } from "framer-motion";
|
||||
import { FaCaretDown, FaCaretRight } from "react-icons/fa";
|
||||
|
||||
export default function HeaderNav({ links, animateY = false }: { links: typeof navMenuData; animateY?: boolean }) {
|
||||
const [isDropdownOpen, setIsDropdownOpen] = useState<string[]>([]);
|
||||
const [isDropdownOpen, setIsDropdownOpen] = useState([""]);
|
||||
const dropdownRef = useRef(null);
|
||||
|
||||
const toggleDropdown = (section: string[]) => {
|
||||
if (section == isDropdownOpen) {
|
||||
setIsDropdownOpen([""]);
|
||||
}
|
||||
setIsDropdownOpen(section);
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
setTimeout(() => {
|
||||
scrollToElement();
|
||||
@ -32,14 +39,12 @@ export default function HeaderNav({ links, animateY = false }: { links: typeof n
|
||||
<>
|
||||
{links.map((link, index) => (
|
||||
<Fragment key={index}>
|
||||
<motion.li
|
||||
initial={{ opacity: 0 }}
|
||||
animate={{ opacity: 1 }}
|
||||
transition={{ duration: 0.3, delay: index * 0.1 }}
|
||||
>
|
||||
<li>
|
||||
{!Array.isArray(link?.child) && (
|
||||
<Link href={link.href}>
|
||||
<span className="text-white">
|
||||
<Link
|
||||
href={link.href}
|
||||
className="!text-white hover:!text-extColorPrimary3 !text-[20px] !transition-all !duration-500"
|
||||
>
|
||||
{animateY ? (
|
||||
<span className="btn-animate-y">
|
||||
<span className="btn-animate-y-1">{link.text}</span>
|
||||
@ -50,83 +55,68 @@ export default function HeaderNav({ links, animateY = false }: { links: typeof n
|
||||
) : (
|
||||
link.text
|
||||
)}
|
||||
</span>
|
||||
</Link>
|
||||
)}
|
||||
|
||||
{Array.isArray(link?.child) && (
|
||||
<>
|
||||
<motion.div
|
||||
className="mn-has-sub flex justify-between text-white"
|
||||
whileHover={{ scale: 1.05 }}
|
||||
transition={{ duration: 0.3 }}
|
||||
<Link
|
||||
href={link?.href ?? "#"}
|
||||
className="mn-has-sub !flex justify-between items-center !text-white hover:!text-extColorPrimary3 !text-[20px] !transition-all !duration-500"
|
||||
onClick={() => toggleDropdown([link.text])}
|
||||
>
|
||||
<Link href={link?.href ?? "#"}>
|
||||
{link.text} <i className="mi-chevron-down" />
|
||||
{link.text} <FaCaretDown className="ml-2" />
|
||||
</Link>
|
||||
</motion.div>
|
||||
|
||||
<motion.ul
|
||||
className={`mn-sub to-right ${isDropdownOpen.includes(link.text) && "open"} !bg-extColorPrimary8 text-white`}
|
||||
<ul
|
||||
className={`mn-sub to-right ${isDropdownOpen.includes(link.text) && "open"} lg:!top-[90px] !bg-extColorPrimary8 !shadow-2xl !transition-all !duration-500`}
|
||||
ref={dropdownRef}
|
||||
initial={{ opacity: 0 }}
|
||||
animate={{ opacity: 1 }}
|
||||
transition={{ duration: 0.3 }}
|
||||
whileHover={{ opacity: 1 }}
|
||||
>
|
||||
{link.child.map((subLink: any, subLinkIdx: number) => (
|
||||
<motion.li
|
||||
key={subLinkIdx}
|
||||
initial={{ opacity: 0 }}
|
||||
animate={{ opacity: 1 }}
|
||||
transition={{ duration: 0.3, delay: subLinkIdx * 0.1 }}
|
||||
>
|
||||
<li key={subLinkIdx}>
|
||||
{!Array.isArray(subLink?.child) && (
|
||||
<Link href={subLink?.href} onClick={() => toggleMobileMenu()}>
|
||||
<span className="text-white">{subLink?.text}</span>
|
||||
<Link
|
||||
href={subLink?.href}
|
||||
onClick={() => toggleMobileMenu()}
|
||||
className="!text-[14px] !text-white hover:!text-extColorPrimary3 !transition-all !duration-500"
|
||||
>
|
||||
{subLink?.text}
|
||||
</Link>
|
||||
)}
|
||||
{Array.isArray(subLink?.child) && (
|
||||
<>
|
||||
<motion.div
|
||||
className="mn-has-sub !flex !justify-between"
|
||||
whileHover={{ scale: 1.05 }}
|
||||
transition={{ duration: 0.3 }}
|
||||
<Link
|
||||
href={subLink?.href ?? "#"}
|
||||
className="mn-has-sub !flex !justify-between !items-center !text-white hover:!text-extColorPrimary3 transition-all duration-500"
|
||||
>
|
||||
<Link href={subLink?.href ?? "#"}>
|
||||
<span>{subLink.text}</span>
|
||||
<i className="mi-chevron-down" />
|
||||
<span className="!text-[14px]">{subLink.text}</span>
|
||||
<FaCaretRight className="ml-2" />
|
||||
</Link>
|
||||
</motion.div>
|
||||
|
||||
<motion.ul
|
||||
<ul
|
||||
className={`mn-sub to-right ${isDropdownOpen.includes(subLink.text) && "open"} !bg-extColorPrimary8`}
|
||||
initial={{ opacity: 0 }}
|
||||
animate={{ opacity: 1 }}
|
||||
transition={{ duration: 0.3 }}
|
||||
>
|
||||
{subLink.child.map((subLink2: any, subLinkIdx2: number) => (
|
||||
<motion.li
|
||||
key={subLinkIdx2}
|
||||
initial={{ opacity: 0 }}
|
||||
animate={{ opacity: 1 }}
|
||||
transition={{ duration: 0.3, delay: subLinkIdx2 * 0.1 }}
|
||||
<li key={subLinkIdx2}>
|
||||
<Link
|
||||
href={subLink2?.href}
|
||||
className="!text-[14px] !items-center !text-white hover:!text-extColorPrimary3 transition-all duration-500"
|
||||
onClick={() => toggleMobileMenu()}
|
||||
>
|
||||
<Link href={subLink2?.href} onClick={() => toggleMobileMenu()}>
|
||||
<span className="text-white">{subLink2?.text}</span>
|
||||
{subLink2?.text}
|
||||
</Link>
|
||||
</motion.li>
|
||||
</li>
|
||||
))}
|
||||
</motion.ul>
|
||||
</ul>
|
||||
</>
|
||||
)}
|
||||
</motion.li>
|
||||
</li>
|
||||
))}
|
||||
</motion.ul>
|
||||
</ul>
|
||||
</>
|
||||
)}
|
||||
</motion.li>
|
||||
{index !== links.length - 1 && (
|
||||
</li>
|
||||
{index != links.length - 1 && (
|
||||
<div
|
||||
className="text-white bg-white h-[1px] md:h-[25px] mx-2 opacity-[0.3]"
|
||||
style={{ border: "1px solid white" }}
|
||||
|
@ -6,10 +6,65 @@
|
||||
* and re-run `payload generate:types` to regenerate this file.
|
||||
*/
|
||||
|
||||
/**
|
||||
* Supported timezones in IANA format.
|
||||
*
|
||||
* This interface was referenced by `Config`'s JSON-Schema
|
||||
* via the `definition` "supportedTimezones".
|
||||
*/
|
||||
export type SupportedTimezones =
|
||||
| 'Pacific/Midway'
|
||||
| 'Pacific/Niue'
|
||||
| 'Pacific/Honolulu'
|
||||
| 'Pacific/Rarotonga'
|
||||
| 'America/Anchorage'
|
||||
| 'Pacific/Gambier'
|
||||
| 'America/Los_Angeles'
|
||||
| 'America/Tijuana'
|
||||
| 'America/Denver'
|
||||
| 'America/Phoenix'
|
||||
| 'America/Chicago'
|
||||
| 'America/Guatemala'
|
||||
| 'America/New_York'
|
||||
| 'America/Bogota'
|
||||
| 'America/Caracas'
|
||||
| 'America/Santiago'
|
||||
| 'America/Buenos_Aires'
|
||||
| 'America/Sao_Paulo'
|
||||
| 'Atlantic/South_Georgia'
|
||||
| 'Atlantic/Azores'
|
||||
| 'Atlantic/Cape_Verde'
|
||||
| 'Europe/London'
|
||||
| 'Europe/Berlin'
|
||||
| 'Africa/Lagos'
|
||||
| 'Europe/Athens'
|
||||
| 'Africa/Cairo'
|
||||
| 'Europe/Moscow'
|
||||
| 'Asia/Riyadh'
|
||||
| 'Asia/Dubai'
|
||||
| 'Asia/Baku'
|
||||
| 'Asia/Karachi'
|
||||
| 'Asia/Tashkent'
|
||||
| 'Asia/Calcutta'
|
||||
| 'Asia/Dhaka'
|
||||
| 'Asia/Almaty'
|
||||
| 'Asia/Jakarta'
|
||||
| 'Asia/Bangkok'
|
||||
| 'Asia/Shanghai'
|
||||
| 'Asia/Singapore'
|
||||
| 'Asia/Tokyo'
|
||||
| 'Asia/Seoul'
|
||||
| 'Australia/Sydney'
|
||||
| 'Pacific/Guam'
|
||||
| 'Pacific/Noumea'
|
||||
| 'Pacific/Auckland'
|
||||
| 'Pacific/Fiji';
|
||||
|
||||
export interface Config {
|
||||
auth: {
|
||||
users: UserAuthOperations;
|
||||
};
|
||||
blocks: {};
|
||||
collections: {
|
||||
users: User;
|
||||
media: Media;
|
||||
|
Loading…
x
Reference in New Issue
Block a user