package.json

@@ -14,7 +14,6 @@
     "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;
+  transition: max-height 0.3s ease-in-out;
 }
 
 .mn-sub.open {

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

@@ -66,11 +66,9 @@
   --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:
+  --box-shadow: 0px 5px 10px 0px rgba(30, 36, 50, 0.05), 0px 1px 1px 0px rgba(30, 36, 50, 0.03),
-    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:
+  --box-shadow-strong: 0px 5px 10px 0px rgba(30, 36, 50, 0.08), 0px 1px 1px 0px rgba(30, 36, 50, 0.06),
-    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);
@@ -203,8 +201,12 @@
 .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: "";
@@ -232,7 +234,11 @@
 .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:
+  --box-shadow: 0px 5px 10px 0px rgba(0, 0, 0, 0.05), 0px 1px 1px 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);
+    0px 3px 5px 0px rgba(0, 0, 0, 0.03);
-  --box-shadow-strong:
+  --box-shadow-strong: 0px 5px 10px 0px rgba(0, 0, 0, 0.08), 0px 1px 1px 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);
+    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,6 +3880,7 @@ 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;
@@ -3978,6 +3979,7 @@ 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);
 }
@@ -3988,6 +3990,7 @@ 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%;
@@ -4321,11 +4324,22 @@ 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;
 }
@@ -4349,13 +4363,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="Phone" width={32} height={22} />
+        <Image src="/assets/icons/phone.png" alt="Image Description" width={25} height={22} />
         <b className="text-[17px]">(520) 803-6644</b>
       </span>
     ),
@@ -41,20 +41,23 @@ 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={500}
+              width={105}
-              height={195}
+              height={34}
               className="light-mode-logo"
             />
             <Image
               src="/assets/images/demo-slick/logo-dark.webp"
               alt="Your Company Logo"
-              width={500}
+              width={405}
-              height={195}
+              height={34}
               className="dark-mode-logo"
             />
           </Link>
@@ -67,10 +70,11 @@ 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,19 +7,12 @@ import { scrollToElement } from "@/utils/scrollToElement";
 import { toggleMobileMenu } from "@/utils/toggleMobileMenu";
 import Link from "next/link";
 import { Fragment, useEffect, useRef, useState } from "react";
-import { FaCaretDown, FaCaretRight } from "react-icons/fa";
+import { motion } from "framer-motion";
 
 export default function HeaderNav({ links, animateY = false }: { links: typeof navMenuData; animateY?: boolean }) {
-  const [isDropdownOpen, setIsDropdownOpen] = useState([""]);
+  const [isDropdownOpen, setIsDropdownOpen] = useState<string[]>([]);
   const dropdownRef = useRef(null);
 
-  const toggleDropdown = (section: string[]) => {
-    if (section == isDropdownOpen) {
-      setIsDropdownOpen([""]);
-    }
-    setIsDropdownOpen(section);
-  };
-
   useEffect(() => {
     setTimeout(() => {
       scrollToElement();
@@ -39,84 +32,101 @@ export default function HeaderNav({ links, animateY = false }: { links: typeof n
     <>
       {links.map((link, index) => (
         <Fragment key={index}>
-          <li>
+          <motion.li
+            initial={{ opacity: 0 }}
+            animate={{ opacity: 1 }}
+            transition={{ duration: 0.3, delay: index * 0.1 }}
+          >
             {!Array.isArray(link?.child) && (
-              <Link
+              <Link href={link.href}>
-                href={link.href}
+                <span className="text-white">
-                className="!text-white hover:!text-extColorPrimary3 !text-[20px] !transition-all !duration-500"
+                  {animateY ? (
-              >
+                    <span className="btn-animate-y">
-                {animateY ? (
+                      <span className="btn-animate-y-1">{link.text}</span>
-                  <span className="btn-animate-y">
+                      <span className="btn-animate-y-2" aria-hidden="true">
-                    <span className="btn-animate-y-1">{link.text}</span>
+                        {link.text}
-                    <span className="btn-animate-y-2" aria-hidden="true">
+                      </span>
-                      {link.text}
                     </span>
-                  </span>
+                  ) : (
-                ) : (
+                    link.text
-                  link.text
+                  )}
-                )}
+                </span>
               </Link>
             )}
 
             {Array.isArray(link?.child) && (
               <>
-                <Link
+                <motion.div
-                  href={link?.href ?? "#"}
+                  className="mn-has-sub flex justify-between text-white"
-                  className="mn-has-sub !flex justify-between items-center !text-white hover:!text-extColorPrimary3 !text-[20px] !transition-all !duration-500"
+                  whileHover={{ scale: 1.05 }}
-                  onClick={() => toggleDropdown([link.text])}
+                  transition={{ duration: 0.3 }}
                 >
-                  {link.text} <FaCaretDown className="ml-2" />
+                  <Link href={link?.href ?? "#"}>
-                </Link>
+                    {link.text} <i className="mi-chevron-down" />
+                  </Link>
+                </motion.div>
 
-                <ul
+                <motion.ul
-                  className={`mn-sub to-right ${isDropdownOpen.includes(link.text) && "open"} lg:!top-[90px] !bg-extColorPrimary8 !shadow-2xl !transition-all !duration-500`}
+                  className={`mn-sub to-right ${isDropdownOpen.includes(link.text) && "open"} !bg-extColorPrimary8 text-white`}
                   ref={dropdownRef}
+                  initial={{ opacity: 0 }}
+                  animate={{ opacity: 1 }}
+                  transition={{ duration: 0.3 }}
+                  whileHover={{ opacity: 1 }}
                 >
                   {link.child.map((subLink: any, subLinkIdx: number) => (
-                    <li key={subLinkIdx}>
+                    <motion.li
+                      key={subLinkIdx}
+                      initial={{ opacity: 0 }}
+                      animate={{ opacity: 1 }}
+                      transition={{ duration: 0.3, delay: subLinkIdx * 0.1 }}
+                    >
                       {!Array.isArray(subLink?.child) && (
-                        <Link
+                        <Link href={subLink?.href} onClick={() => toggleMobileMenu()}>
-                          href={subLink?.href}
+                          <span className="text-white">{subLink?.text}</span>
-                          onClick={() => toggleMobileMenu()}
-                          className="!text-[14px] !text-white hover:!text-extColorPrimary3 !transition-all !duration-500"
-                        >
-                          {subLink?.text}
                         </Link>
                       )}
                       {Array.isArray(subLink?.child) && (
                         <>
-                          <Link
+                          <motion.div
-                            href={subLink?.href ?? "#"}
+                            className="mn-has-sub !flex !justify-between"
-                            className="mn-has-sub !flex !justify-between !items-center !text-white hover:!text-extColorPrimary3 transition-all duration-500"
+                            whileHover={{ scale: 1.05 }}
+                            transition={{ duration: 0.3 }}
                           >
-                            <span className="!text-[14px]">{subLink.text}</span>
+                            <Link href={subLink?.href ?? "#"}>
-                            <FaCaretRight className="ml-2" />
+                              <span>{subLink.text}</span>
-                          </Link>
+                              <i className="mi-chevron-down" />
+                            </Link>
+                          </motion.div>
 
-                          <ul
+                          <motion.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) => (
-                              <li key={subLinkIdx2}>
+                              <motion.li
-                                <Link
+                                key={subLinkIdx2}
-                                  href={subLink2?.href}
+                                initial={{ opacity: 0 }}
-                                  className="!text-[14px] !items-center !text-white hover:!text-extColorPrimary3 transition-all duration-500"
+                                animate={{ opacity: 1 }}
-                                  onClick={() => toggleMobileMenu()}
+                                transition={{ duration: 0.3, delay: subLinkIdx2 * 0.1 }}
-                                >
+                              >
-                                  {subLink2?.text}
+                                <Link href={subLink2?.href} onClick={() => toggleMobileMenu()}>
+                                  <span className="text-white">{subLink2?.text}</span>
                                 </Link>
-                              </li>
+                              </motion.li>
                             ))}
-                          </ul>
+                          </motion.ul>
                         </>
                       )}
-                    </li>
+                    </motion.li>
                   ))}
-                </ul>
+                </motion.ul>
               </>
             )}
-          </li>
+          </motion.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,7 +5,6 @@ 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();
@@ -37,9 +36,5 @@ export default function InitialScript() {
     }
   }, []);
 
-  return (
+  return <></>;
-    <>
-      <GoogleTagManager gtmId="GTM-XYZ" />
-    </>
-  );
 }

src/payload-types.ts

@@ -6,65 +6,10 @@
  * 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;