fix: header nav styling

package.json

@@ -14,6 +14,7 @@
     "tsc": "tsc"
   },
   "dependencies": {
+    "@next/third-parties": "^15.2.2",
     "@payloadcms/db-postgres": "^3.20.0",
     "@payloadcms/next": "^3.20.0",
     "@payloadcms/payload-cloud": "^3.20.0",

public/assets/css/custom.css

@@ -87,7 +87,7 @@ a {
 }
 
 .mn-sub {
-  transition: max-height 0.3s ease-in-out;
+  transition: max-height;
 }
 
 .mn-sub.open {

public/assets/css/demo-slick/demo-slick.css

@@ -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;

public/assets/css/style.css

@@ -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),
+  --box-shadow:
-    0px 3px 5px 0px rgba(0, 0, 0, 0.03);
+    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),
+  --box-shadow-strong:
-    0px 3px 5px 0px rgba(0, 0, 0, 0.06);
+    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 {

src/components/Header.tsx

@@ -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}
+              width={500}
-              height={34}
+              height={195}
               className="light-mode-logo"
             />
             <Image
               src="/assets/images/demo-slick/logo-dark.webp"
               alt="Your Company Logo"
-              width={405}
+              width={500}
-              height={34}
+              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"

src/components/HeaderNav.tsx

@@ -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
+          <li>
-            initial={{ opacity: 0 }}
-            animate={{ opacity: 1 }}
-            transition={{ duration: 0.3, delay: index * 0.1 }}
-          >
             {!Array.isArray(link?.child) && (
-              <Link href={link.href}>
+              <Link
-                <span className="text-white">
+                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
+                <Link
-                  className="mn-has-sub flex justify-between text-white"
+                  href={link?.href ?? "#"}
-                  whileHover={{ scale: 1.05 }}
+                  className="mn-has-sub !flex justify-between items-center !text-white hover:!text-extColorPrimary3 !text-[20px] !transition-all !duration-500"
-                  transition={{ duration: 0.3 }}
+                  onClick={() => toggleDropdown([link.text])}
                 >
-                  <Link href={link?.href ?? "#"}>
+                  {link.text} <FaCaretDown className="ml-2" />
-                    {link.text} <i className="mi-chevron-down" />
                 </Link>
-                </motion.div>
 
-                <motion.ul
+                <ul
-                  className={`mn-sub to-right ${isDropdownOpen.includes(link.text) && "open"} !bg-extColorPrimary8 text-white`}
+                  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
+                    <li key={subLinkIdx}>
-                      key={subLinkIdx}
-                      initial={{ opacity: 0 }}
-                      animate={{ opacity: 1 }}
-                      transition={{ duration: 0.3, delay: subLinkIdx * 0.1 }}
-                    >
                       {!Array.isArray(subLink?.child) && (
-                        <Link href={subLink?.href} onClick={() => toggleMobileMenu()}>
+                        <Link
-                          <span className="text-white">{subLink?.text}</span>
+                          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
+                          <Link
-                            className="mn-has-sub !flex !justify-between"
+                            href={subLink?.href ?? "#"}
-                            whileHover={{ scale: 1.05 }}
+                            className="mn-has-sub !flex !justify-between !items-center !text-white hover:!text-extColorPrimary3 transition-all duration-500"
-                            transition={{ duration: 0.3 }}
                           >
-                            <Link href={subLink?.href ?? "#"}>
+                            <span className="!text-[14px]">{subLink.text}</span>
-                              <span>{subLink.text}</span>
+                            <FaCaretRight className="ml-2" />
-                              <i className="mi-chevron-down" />
                           </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
+                              <li key={subLinkIdx2}>
-                                key={subLinkIdx2}
+                                <Link
-                                initial={{ opacity: 0 }}
+                                  href={subLink2?.href}
-                                animate={{ opacity: 1 }}
+                                  className="!text-[14px] !items-center !text-white hover:!text-extColorPrimary3 transition-all duration-500"
-                                transition={{ duration: 0.3, delay: subLinkIdx2 * 0.1 }}
+                                  onClick={() => toggleMobileMenu()}
                                 >
-                                <Link href={subLink2?.href} onClick={() => toggleMobileMenu()}>
+                                  {subLink2?.text}
-                                  <span className="text-white">{subLink2?.text}</span>
                                 </Link>
-                              </motion.li>
+                              </li>
                             ))}
-                          </motion.ul>
+                          </ul>
                         </>
                       )}
-                    </motion.li>
+                    </li>
                   ))}
-                </motion.ul>
+                </ul>
               </>
             )}
-          </motion.li>
+          </li>
-          {index !== links.length - 1 && (
+          {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" }}

src/components/InitialScript.tsx

@@ -5,6 +5,7 @@ import { init_wow } from "@/utils/initWow";
 import { parallaxMouseMovement, parallaxScroll } from "@/utils/parallax";
 import { usePathname } from "next/navigation";
 import { useEffect } from "react";
+import { GoogleTagManager } from "@next/third-parties/google";
 
 export default function InitialScript() {
   const path = usePathname();
@@ -36,5 +37,9 @@ export default function InitialScript() {
     }
   }, []);
 
-  return <></>;
+  return (
+    <>
+      <GoogleTagManager gtmId="GTM-XYZ" />
+    </>
+  );
 }

src/payload-types.ts

@@ -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;