diff --git a/package-lock.json b/package-lock.json
index d65087f..8826370 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -18,10 +18,12 @@
         "animejs": "^3.2.2",
         "bootstrap": "^5.1.3",
         "dayjs": "^1.11.13",
+        "framer-motion": "^12.4.13",
         "graphql": "^16.10.0",
         "imagesloaded": "^5.0.0",
         "isotope-layout": "^3.0.6",
         "jarallax": "^2.2.1",
+        "motion": "^12.4.13",
         "next": "15.2.0-canary.30",
         "payload": "^3.20.0",
         "photoswipe": "^5.4.4",
@@ -8092,6 +8094,33 @@
         "url": "https://github.com/sponsors/isaacs"
       }
     },
+    "node_modules/framer-motion": {
+      "version": "12.4.13",
+      "resolved": "https://registry.npmjs.org/framer-motion/-/framer-motion-12.4.13.tgz",
+      "integrity": "sha512-JHSXIdL7WOTCSEb2UUurHURV85pWTn6UIg+iWLBhH5SFndbjni8CEQcxwsBwOs3RHZ83TkE4xoxb9cHsFPY9yQ==",
+      "license": "MIT",
+      "dependencies": {
+        "motion-dom": "^12.4.11",
+        "motion-utils": "^12.4.10",
+        "tslib": "^2.4.0"
+      },
+      "peerDependencies": {
+        "@emotion/is-prop-valid": "*",
+        "react": "^18.0.0 || ^19.0.0",
+        "react-dom": "^18.0.0 || ^19.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@emotion/is-prop-valid": {
+          "optional": true
+        },
+        "react": {
+          "optional": true
+        },
+        "react-dom": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/fsevents": {
       "version": "2.3.3",
       "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.3.tgz",
@@ -10289,6 +10318,47 @@
       "license": "MIT",
       "peer": true
     },
+    "node_modules/motion": {
+      "version": "12.4.13",
+      "resolved": "https://registry.npmjs.org/motion/-/motion-12.4.13.tgz",
+      "integrity": "sha512-8ehpE6Sd8ack6jLLzweW6RwCBQoASf+yVu8aUPFNKHsJIVejJaBPGsMiswcpfzHeCusZ/ztNIKbgoEn7ruJaOw==",
+      "license": "MIT",
+      "dependencies": {
+        "framer-motion": "^12.4.13",
+        "tslib": "^2.4.0"
+      },
+      "peerDependencies": {
+        "@emotion/is-prop-valid": "*",
+        "react": "^18.0.0 || ^19.0.0",
+        "react-dom": "^18.0.0 || ^19.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@emotion/is-prop-valid": {
+          "optional": true
+        },
+        "react": {
+          "optional": true
+        },
+        "react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/motion-dom": {
+      "version": "12.4.11",
+      "resolved": "https://registry.npmjs.org/motion-dom/-/motion-dom-12.4.11.tgz",
+      "integrity": "sha512-wstlyV3pktgFjqsjbXMo1NX9hQD9XTVqxQNvfc+FREAgxr3GVzgWIEKvbyyNlki3J1jmmh+et9X3aCKeqFPcxA==",
+      "license": "MIT",
+      "dependencies": {
+        "motion-utils": "^12.4.10"
+      }
+    },
+    "node_modules/motion-utils": {
+      "version": "12.4.10",
+      "resolved": "https://registry.npmjs.org/motion-utils/-/motion-utils-12.4.10.tgz",
+      "integrity": "sha512-NPwZd94V013SwRf++jMrk2+HEBgPkeIE2RiOzhAuuQlqxMJPkKt/LXVh6Upl+iN8oarSGD2dlY5/bqgsYXDABA==",
+      "license": "MIT"
+    },
     "node_modules/ms": {
       "version": "2.1.3",
       "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz",
diff --git a/package.json b/package.json
index b21e973..a4c6bef 100644
--- a/package.json
+++ b/package.json
@@ -25,10 +25,12 @@
     "animejs": "^3.2.2",
     "bootstrap": "^5.1.3",
     "dayjs": "^1.11.13",
+    "framer-motion": "^12.4.13",
     "graphql": "^16.10.0",
     "imagesloaded": "^5.0.0",
     "isotope-layout": "^3.0.6",
     "jarallax": "^2.2.1",
+    "motion": "^12.4.13",
     "next": "15.2.0-canary.30",
     "payload": "^3.20.0",
     "photoswipe": "^5.4.4",
diff --git a/public/assets/css/demo-slick/demo-slick.css b/public/assets/css/demo-slick/demo-slick.css
index 19b0fb9..6fb263a 100644
--- a/public/assets/css/demo-slick/demo-slick.css
+++ b/public/assets/css/demo-slick/demo-slick.css
@@ -206,6 +206,7 @@
 }
 .theme-slick .inner-nav ul li a {
   position: relative;
+  color: #fff;
 }
 .theme-slick .inner-nav > ul > li > a:not(.no-hover):before {
   content: "";
diff --git a/src/components/HeaderNav.tsx b/src/components/HeaderNav.tsx
index 01dbdee..1e8577b 100644
--- a/src/components/HeaderNav.tsx
+++ b/src/components/HeaderNav.tsx
@@ -7,18 +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 { 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();
@@ -38,66 +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 href={link.href}>
-                {animateY ? (
-                  <span className="btn-animate-y">
-                    <span className="btn-animate-y-1">{link.text}</span>
-                    <span className="btn-animate-y-2" aria-hidden="true">
-                      {link.text}
+                <span className="text-white">
+                  {animateY ? (
+                    <span className="btn-animate-y">
+                      <span className="btn-animate-y-1">{link.text}</span>
+                      <span className="btn-animate-y-2" aria-hidden="true">
+                        {link.text}
+                      </span>
                     </span>
-                  </span>
-                ) : (
-                  link.text
-                )}
+                  ) : (
+                    link.text
+                  )}
+                </span>
               </Link>
             )}
 
             {Array.isArray(link?.child) && (
               <>
-                <Link href={link?.href ?? "#"} className="mn-has-sub flex justify-between">
-                  {link.text} <i className="mi-chevron-down" onClick={() => toggleDropdown([link.text])} />
-                </Link>
+                <motion.div
+                  className="mn-has-sub flex justify-between text-white"
+                  whileHover={{ scale: 1.05 }}
+                  transition={{ duration: 0.3 }}
+                >
+                  <Link href={link?.href ?? "#"}>
+                    {link.text} <i className="mi-chevron-down" />
+                  </Link>
+                </motion.div>
 
-                <ul
-                  className={`mn-sub to-right ${isDropdownOpen.includes(link.text) && "open"} !bg-extColorPrimary8`}
+                <motion.ul
+                  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 href={subLink?.href} onClick={() => toggleMobileMenu()}>
-                          {subLink?.text}
+                          <span className="text-white">{subLink?.text}</span>
                         </Link>
                       )}
                       {Array.isArray(subLink?.child) && (
                         <>
-                          <Link href={subLink?.href ?? "#"} className="mn-has-sub !flex !justify-between">
-                            <span>{subLink.text}</span>
-                            <i className="mi-chevron-down" onClick={() => toggleDropdown([link.text, subLink.text])} />
-                          </Link>
+                          <motion.div
+                            className="mn-has-sub !flex !justify-between"
+                            whileHover={{ scale: 1.05 }}
+                            transition={{ duration: 0.3 }}
+                          >
+                            <Link href={subLink?.href ?? "#"}>
+                              <span>{subLink.text}</span>
+                              <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
+                                key={subLinkIdx2}
+                                initial={{ opacity: 0 }}
+                                animate={{ opacity: 1 }}
+                                transition={{ duration: 0.3, delay: subLinkIdx2 * 0.1 }}
+                              >
                                 <Link href={subLink2?.href} onClick={() => toggleMobileMenu()}>
-                                  {subLink2?.text}
+                                  <span className="text-white">{subLink2?.text}</span>
                                 </Link>
-                              </li>
+                              </motion.li>
                             ))}
-                          </ul>
+                          </motion.ul>
                         </>
                       )}
-                    </li>
+                    </motion.li>
                   ))}
-                </ul>
+                </motion.ul>
               </>
             )}
-          </li>
-          {index != links.length - 1 && (
+          </motion.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" }}
diff --git a/yarn.lock b/yarn.lock
index 1b8fe54..e59acf0 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -10388,108 +10388,69 @@ __metadata:
   linkType: hard
 
 "wrap-ansi-cjs@npm:wrap-ansi@^7.0.0":
-  version: 7.0.0
-  resolution: "wrap-ansi@npm:7.0.0"
+  version "7.0.0"
+  resolved "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-7.0.0.tgz"
+  integrity sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==
   dependencies:
-    ansi-styles: "npm:^4.0.0"
-    string-width: "npm:^4.1.0"
-    strip-ansi: "npm:^6.0.0"
-  checksum: 10c0/d15fc12c11e4cbc4044a552129ebc75ee3f57aa9c1958373a4db0292d72282f54373b536103987a4a7594db1ef6a4f10acf92978f79b98c49306a4b58c77d4da
-  languageName: node
-  linkType: hard
+    ansi-styles "^4.0.0"
+    string-width "^4.1.0"
+    strip-ansi "^6.0.0"
 
-"wrap-ansi@npm:^8.1.0":
-  version: 8.1.0
-  resolution: "wrap-ansi@npm:8.1.0"
+wrap-ansi@^8.1.0:
+  version "8.1.0"
+  resolved "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-8.1.0.tgz"
+  integrity sha512-si7QWI6zUMq56bESFvagtmzMdGOtoxfR+Sez11Mobfc7tm+VkUckk9bW2UeffTGVUbOksxmSw0AA2gs8g71NCQ==
   dependencies:
-    ansi-styles: "npm:^6.1.0"
-    string-width: "npm:^5.0.1"
-    strip-ansi: "npm:^7.0.1"
-  checksum: 10c0/138ff58a41d2f877eae87e3282c0630fc2789012fc1af4d6bd626eeb9a2f9a65ca92005e6e69a75c7b85a68479fe7443c7dbe1eb8fbaa681a4491364b7c55c60
-  languageName: node
-  linkType: hard
+    ansi-styles "^6.1.0"
+    string-width "^5.0.1"
+    strip-ansi "^7.0.1"
 
-"wrappy@npm:1":
-  version: 1.0.2
-  resolution: "wrappy@npm:1.0.2"
-  checksum: 10c0/56fece1a4018c6a6c8e28fbc88c87e0fbf4ea8fd64fc6c63b18f4acc4bd13e0ad2515189786dd2c30d3eec9663d70f4ecf699330002f8ccb547e4a18231fc9f0
-  languageName: node
-  linkType: hard
+wrappy@1:
+  version "1.0.2"
+  resolved "https://registry.npmjs.org/wrappy/-/wrappy-1.0.2.tgz"
+  integrity sha512-l4Sp/DRseor9wL6EvV2+TuQn63dMkPjZ/sp9XkghTEbV9KlPS1xUsZ3u7/IQO4wxtcFB4bgpQPRcR3QCvezPcQ==
 
-"ws@npm:^8.16.0":
-  version: 8.18.0
-  resolution: "ws@npm:8.18.0"
-  peerDependencies:
-    bufferutil: ^4.0.1
-    utf-8-validate: ">=5.0.2"
-  peerDependenciesMeta:
-    bufferutil:
-      optional: true
-    utf-8-validate:
-      optional: true
-  checksum: 10c0/25eb33aff17edcb90721ed6b0eb250976328533ad3cd1a28a274bd263682e7296a6591ff1436d6cbc50fa67463158b062f9d1122013b361cec99a05f84680e06
-  languageName: node
-  linkType: hard
+ws@^8.16.0:
+  version "8.18.0"
+  resolved "https://registry.npmjs.org/ws/-/ws-8.18.0.tgz"
+  integrity sha512-8VbfWfHLbbwu3+N6OKsOMpBdT4kXPDDB9cJk2bJ6mh9ucxdlnNvH1e+roYkKmN9Nxw2yjz7VzeO9oOz2zJ04Pw==
 
-"xss@npm:^1.0.6":
-  version: 1.0.15
-  resolution: "xss@npm:1.0.15"
+xss@^1.0.6:
+  version "1.0.15"
+  resolved "https://registry.npmjs.org/xss/-/xss-1.0.15.tgz"
+  integrity sha512-FVdlVVC67WOIPvfOwhoMETV72f6GbW7aOabBC3WxN/oUdoEMDyLz4OgRv5/gck2ZeNqEQu+Tb0kloovXOfpYVg==
   dependencies:
-    commander: "npm:^2.20.3"
-    cssfilter: "npm:0.0.10"
-  bin:
-    xss: bin/xss
-  checksum: 10c0/9b31bee62a208f78e2b7bc8154e3ee87d980f4661dc4ab850ce6f4de7bc50eb152f0bdc13fa759ff8ab6d9bfdf8c0d79cf9f6f86249872b92181912309bccd08
-  languageName: node
-  linkType: hard
+    commander "^2.20.3"
+    cssfilter "0.0.10"
 
-"xtend@npm:^4.0.0":
-  version: 4.0.2
-  resolution: "xtend@npm:4.0.2"
-  checksum: 10c0/366ae4783eec6100f8a02dff02ac907bf29f9a00b82ac0264b4d8b832ead18306797e283cf19de776538babfdcb2101375ec5646b59f08c52128ac4ab812ed0e
-  languageName: node
-  linkType: hard
+xtend@^4.0.0:
+  version "4.0.2"
+  resolved "https://registry.npmjs.org/xtend/-/xtend-4.0.2.tgz"
+  integrity sha512-LKYU1iAXJXUgAXn9URjiu+MWhyUXHsvfp7mcuYm9dSUKK0/CjtrUwFAxD82/mCWbtLsGjFIad0wIsod4zrTAEQ==
 
-"yallist@npm:^4.0.0":
-  version: 4.0.0
-  resolution: "yallist@npm:4.0.0"
-  checksum: 10c0/2286b5e8dbfe22204ab66e2ef5cc9bbb1e55dfc873bbe0d568aa943eb255d131890dfd5bf243637273d31119b870f49c18fcde2c6ffbb7a7a092b870dc90625a
-  languageName: node
-  linkType: hard
+yaml@^1.10.0:
+  version "1.10.2"
+  resolved "https://registry.npmjs.org/yaml/-/yaml-1.10.2.tgz"
+  integrity sha512-r3vXyErRCYJ7wg28yvBY5VSoAF8ZvlcW9/BwUzEtUsjvX/DKs24dIkuwjtuprwJJHsbyUbLApepYTR1BN4uHrg==
 
-"yallist@npm:^5.0.0":
-  version: 5.0.0
-  resolution: "yallist@npm:5.0.0"
-  checksum: 10c0/a499c81ce6d4a1d260d4ea0f6d49ab4da09681e32c3f0472dee16667ed69d01dae63a3b81745a24bd78476ec4fcf856114cb4896ace738e01da34b2c42235416
-  languageName: node
-  linkType: hard
+yaml@^2.3.4:
+  version "2.7.0"
+  resolved "https://registry.npmjs.org/yaml/-/yaml-2.7.0.tgz"
+  integrity sha512-+hSoy/QHluxmC9kCIJyL/uyFmLmc+e5CFR5Wa+bpIhIj85LVb9ZH2nVnqrHoSvKogwODv0ClqZkmiSSaIH5LTA==
 
-"yaml@npm:^1.10.0":
-  version: 1.10.2
-  resolution: "yaml@npm:1.10.2"
-  checksum: 10c0/5c28b9eb7adc46544f28d9a8d20c5b3cb1215a886609a2fd41f51628d8aaa5878ccd628b755dbcd29f6bb4921bd04ffbc6dcc370689bb96e594e2f9813d2605f
-  languageName: node
-  linkType: hard
+yjs@>=13.5.22:
+  version "13.6.23"
+  resolved "https://registry.npmjs.org/yjs/-/yjs-13.6.23.tgz"
+  integrity sha512-ExtnT5WIOVpkL56bhLeisG/N5c4fmzKn4k0ROVfJa5TY2QHbH7F0Wu2T5ZhR7ErsFWQEFafyrnSI8TPKVF9Few==
+  dependencies:
+    lib0 "^0.2.99"
 
-"yaml@npm:^2.3.4":
-  version: 2.7.0
-  resolution: "yaml@npm:2.7.0"
-  bin:
-    yaml: bin.mjs
-  checksum: 10c0/886a7d2abbd70704b79f1d2d05fe9fb0aa63aefb86e1cb9991837dced65193d300f5554747a872b4b10ae9a12bc5d5327e4d04205f70336e863e35e89d8f4ea9
-  languageName: node
-  linkType: hard
+yocto-queue@^0.1.0:
+  version "0.1.0"
+  resolved "https://registry.npmjs.org/yocto-queue/-/yocto-queue-0.1.0.tgz"
+  integrity sha512-rVksvsnNCdJ/ohGc6xgPwyN8eheCxsiLM8mxuE/t/mOVqJewPuO1miLpTHQiRgTKCLexL4MeAFVagts7HmNZ2Q==
 
-"yocto-queue@npm:^0.1.0":
-  version: 0.1.0
-  resolution: "yocto-queue@npm:0.1.0"
-  checksum: 10c0/dceb44c28578b31641e13695d200d34ec4ab3966a5729814d5445b194933c096b7ced71494ce53a0e8820685d1d010df8b2422e5bf2cdea7e469d97ffbea306f
-  languageName: node
-  linkType: hard
-
-"zwitch@npm:^2.0.0":
-  version: 2.0.4
-  resolution: "zwitch@npm:2.0.4"
-  checksum: 10c0/3c7830cdd3378667e058ffdb4cf2bb78ac5711214e2725900873accb23f3dfe5f9e7e5a06dcdc5f29605da976fc45c26d9a13ca334d6eea2245a15e77b8fc06e
-  languageName: node
-  linkType: hard
+zwitch@^2.0.0:
+  version "2.0.4"
+  resolved "https://registry.npmjs.org/zwitch/-/zwitch-2.0.4.tgz"
+  integrity sha512-bXE4cR/kVZhKZX/RjPEflHaKVhUVl85noU3v6b8apfQEc1x4A+zBxjZ4lN8LqGd6WZ3dl98pY4o717VFmoPp+A==