From 9ec8f7d1e8485f002c061568bb2049dc06938da0 Mon Sep 17 00:00:00 2001
From: Jerome Hardaway <jerome@vetswhocode.io>
Date: Sun, 24 Nov 2024 17:51:49 -0500
Subject: [PATCH]  added new svgs; updated Nav (#638)

---
 public/images/shape-animation/dog-tag.svg     |  15 ++
 src/assets/svgs/shape-2.svg                   |  18 +-
 src/containers/blog/layout-01/index.tsx       |  23 ++-
 .../contact-info/layout-01/index.tsx          |  33 +++-
 src/containers/hero/layout-02/index.tsx       |  45 ++++-
 src/containers/team/layout-01/index.tsx       |  28 ++-
 .../testimonial/layout-04/index.tsx           |  37 +++-
 src/containers/video/layout-01/index.tsx      |  16 +-
 src/containers/video/layout-02/index.tsx      |  18 +-
 src/containers/video/layout-03/index.tsx      |  28 ++-
 src/containers/video/layout-04/index.tsx      |  16 +-
 src/containers/video/layout-06/index.tsx      |  26 ++-
 src/containers/video/layout-07/index.tsx      |  10 +-
 src/data/menu.ts                              | 181 +++++++-----------
 14 files changed, 309 insertions(+), 185 deletions(-)
 create mode 100644 public/images/shape-animation/dog-tag.svg

diff --git a/public/images/shape-animation/dog-tag.svg b/public/images/shape-animation/dog-tag.svg
new file mode 100644
index 000000000..2a9ab7e4c
--- /dev/null
+++ b/public/images/shape-animation/dog-tag.svg
@@ -0,0 +1,15 @@
+
+<svg id="Line_Gradient" data-name="Line Gradient" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 64 64">
+  <defs>
+    <style>
+      .cls-1 { fill: url(#custom-gradient); }
+    </style>
+    <linearGradient id="custom-gradient" x1="4.00917" y1="32" x2="59.99083" y2="32" gradientUnits="userSpaceOnUse">
+      <stop offset="0" stop-color="#091f40"/> <!-- Navy Blue -->
+      <stop offset="0.5" stop-color="#c5203e"/> <!-- Red -->
+      <stop offset="1" stop-color="#ffffff"/> <!-- White -->
+    </linearGradient>
+  </defs>
+  <title>Line Gradient</title>
+  <path class="cls-1" d="M40.03642,12.29256a2.4037,2.4037,0,0,0-3.38724-.00391L11.60938,37.31779a2.41571,2.41571,0,0,0,0,3.40081L23.27374,52.37327a2.4092,2.4092,0,0,0,3.4013,0l2.66012-2.66109A.99277.99277,0,0,1,30.739,51.1159L28.0788,53.777a4.39571,4.39571,0,0,1-6.20881,0L10.20562,42.12236a4.40528,4.40528,0,0,1-.00291-6.20542L35.24246,10.88786c2.14067-2.095,5.14718-1.48333,6.93251.73281a.9935.9935,0,0,1-1.40371,1.40573ZM32.15483,46.893a.99281.99281,0,0,0,1.40381,1.40369l19.5459-19.54686a4.39068,4.39068,0,0,0,.0048-6.19281l-.72412-.73484a.99281.99281,0,0,0-1.41341,1.3941l.73189.74255a2.39575,2.39575,0,0,1-.00294,3.38724ZM59.64345,14.847a37.51268,37.51268,0,0,1-4.50519,3.325l1.85852,1.85861a7.96827,7.96827,0,0,1-.00088,11.232L30.59015,57.67808a7.952,7.952,0,0,1-11.23151,0L6.32406,44.63322a7.96808,7.96808,0,0,1,.00039-11.231L27.5286,12.19757a.99281.99281,0,0,1,1.4038,1.40371L7.72828,34.806a5.97272,5.97272,0,0,0-.00153,8.42157L20.76288,56.27432a5.9623,5.9623,0,0,0,8.42351,0L55.593,29.8579a5.97443,5.97443,0,0,0,.00007-8.4235l-2.24093-2.24094a17.87487,17.87487,0,0,1-4.91966,1.79094,4.45761,4.45761,0,1,1,.052-2.03978,15.79355,15.79355,0,0,0,3.384-1.23483L42.558,8.39924a5.97023,5.97023,0,0,0-8.42351,0l-2.39255,2.39255a.99278.99278,0,0,1-1.4038-1.40372l2.39259-2.39259a7.96,7.96,0,0,1,11.23006-.001l1.85667,1.85667A36.59861,36.59861,0,0,1,49.1463,4.34405a.99252.99252,0,0,1,1.50264,1.29711,34.14878,34.14878,0,0,0-3.38767,4.65389L53.688,16.7218a35.19058,35.19058,0,0,0,4.66412-3.38324.99284.99284,0,0,1,1.2913,1.50846ZM46.22764,21.17841c-1.05727-.10474-3.36557.035-3.06088-1.58208a.99657.99657,0,0,1,1.235-.66887c1.06972.21927,2.9661.81129,1.47173-.80657a2.48632,2.48632,0,1,0,.35413,3.05752ZM24.32559,32.69353,27.169,30.6829l-.0446-3.48127a1.27261,1.27261,0,0,1,2.03681-1.0344l2.78812,2.07946,3.29708-1.11777a1.27336,1.27336,0,0,1,1.6151,1.61509L35.74372,32.0411l2.0814,2.79006a1.26142,1.26142,0,0,1,.11439,1.33783,1.2864,1.2864,0,0,1-1.1517.697l-3.48128-.0446-2.00917,2.84144a1.27333,1.27333,0,0,1-2.2559-.35772l-1.03294-3.32326L24.6838,34.94846a1.27346,1.27346,0,0,1-.35821-2.25493Zm2.32522.78719,2.30437.71642a1.26972,1.26972,0,0,1,.83711.83567l.71691,2.30631,1.39309-1.96992a1.24945,1.24945,0,0,1,1.05379-.538l2.41537.031-1.4435-1.934a1.27226,1.27226,0,0,1-.18323-1.174l.77265-2.2811-2.285.77458a1.27106,1.27106,0,0,1-1.17012-.18516l-1.93405-1.44254.031,2.412a1.27562,1.27562,0,0,1-.5395,1.0567Z"/>
+</svg>
diff --git a/src/assets/svgs/shape-2.svg b/src/assets/svgs/shape-2.svg
index ada85d121..6fb8bc370 100644
--- a/src/assets/svgs/shape-2.svg
+++ b/src/assets/svgs/shape-2.svg
@@ -1,7 +1,13 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 395 397" version="1.1" width="395px" height="397px">
-    <g transform="translate(-51.000000, -1390.000000)">
-        <g transform="translate(-28.000000, 963.000000)">
-            <path d="M353.907509,817.715288 C386.112868,835.281848 455.192882,815.572841 468.907509,740.715288 C483.008804,663.747218 442.907509,661.715288 449.907509,633.715288 C478,592 483.008804,538.76355 453.907509,506.715288 C381.907509,431.715288 363.907509,521.715288 303.907509,466.715288 C279.650772,442.458551 242.907509,413.715288 189.907509,433.715288 C114.974471,461.991907 132.907509,521.005066 132.907509,563.715288 C132.907509,578.753612 85.1423289,607.023718 79.9075093,645.715288 C73.306976,694.501115 103.907509,758.715288 132.907509,780.715288 C178.907509,832.715288 249.907509,820.715288 281.907509,802.715288 C309.384918,787.259246 331.907509,805.715288 353.907509,817.715288 Z" fill="#091f40"></path>
-        </g>
-    </g>
+<svg id="b5823f4c-b0b0-4471-8ee2-882e7eef742d" data-name="Flat Gradient" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 64 64">
+  <defs>
+    <style>
+      .gradient-fill { fill: url(#custom-gradient); }
+    </style>
+    <linearGradient id="custom-gradient" x1="4" y1="32" x2="60" y2="32" gradientUnits="userSpaceOnUse">
+      <stop offset="0" stop-color="#091f40"/> <!-- Navy Blue -->
+      <stop offset="0.5" stop-color="#c5203e"/> <!-- Red -->
+      <stop offset="1" stop-color="#ffffff"/> <!-- White -->
+    </linearGradient>
+  </defs>
+  <path class="gradient-fill" d="M10.7272,39.97037H53.26944a2.87666,2.87666,0,0,0,2.87015-2.87014V12.299a2.87667,2.87667,0,0,0-2.87015-2.87015H10.7272A2.87666,2.87666,0,0,0,7.85706,12.299V37.10023A2.87665,2.87665,0,0,0,10.7272,39.97037Zm-.35-26.61136a1.45974,1.45974,0,0,1,1.45008-1.4601H52.16935a1.45974,1.45974,0,0,1,1.45009,1.4601V36.05019a1.45332,1.45332,0,0,1-1.45009,1.46009H11.82729a1.45331,1.45331,0,0,1-1.45008-1.46009ZM59.67975,48.43083l-4.61023-7.01037a1.94068,1.94068,0,0,0-1.62008-.87H10.5472a1.94068,1.94068,0,0,0-1.62008.87L4.31689,48.43083A1.93466,1.93466,0,0,0,5.937,51.431h52.1227A1.94989,1.94989,0,0,0,59.67975,48.43083Zm-34.90177-.57,1.17-1.78013a.70845.70845,0,0,1,.61-.33H37.4386a.70845.70845,0,0,1,.61.33l1.17005,1.78013a.74262.74262,0,0,1-.61,1.14006H25.388A.74261.74261,0,0,1,24.778,47.8608Zm13.33754.14H25.8749l.82-1.25007H37.29547ZM58.43969,51.831H5.55695a.50149.50149,0,0,0-.5.5A2.0172,2.0172,0,0,0,7.037,54.57115h49.9226A1.98465,1.98465,0,0,0,58.93972,52.591C58.97549,52.23493,58.86323,51.83169,58.43969,51.831Zm-1.48,1.74014h-.00312a.987.987,0,0,0,.95-.74009A.97982.97982,0,0,1,56.95964,53.57111ZM11.82729,36.51023H52.16935a.46345.46345,0,0,0,.45-.46V13.359a.45677.45677,0,0,0-.45-.46H11.82729a.45677.45677,0,0,0-.45.46V36.05019A.46345.46345,0,0,0,11.82729,36.51023ZM31.99832,13.709A11.01361,11.01361,0,0,1,42.99889,24.70957c-.61917,14.59611-21.3904,14.59149-22.00116-.00007A11.00719,11.00719,0,0,1,31.99832,13.709Z"/>
 </svg>
\ No newline at end of file
diff --git a/src/containers/blog/layout-01/index.tsx b/src/containers/blog/layout-01/index.tsx
index 0dcdea6bf..fbc9c6804 100644
--- a/src/containers/blog/layout-01/index.tsx
+++ b/src/containers/blog/layout-01/index.tsx
@@ -19,11 +19,20 @@ type TProps = TSection & {
     };
 };
 
-const BlogArea = ({ data: { section_title, motto, blogs }, space, bg, titleSize }: TProps) => {
+const BlogArea = ({
+    data: { section_title, motto, blogs },
+    space,
+    bg,
+    titleSize,
+}: TProps) => {
     const { trans1, trans2 } = useUI();
 
     return (
-        <Section className="blog-area tw-relative tw-overflow-hidden" space={space} bg={bg}>
+        <Section
+            className="blog-area tw-relative tw-overflow-hidden"
+            space={space}
+            bg={bg}
+        >
             <div className="tw-absolute tw-inset-0 tw-flex jtw-justify-center tw-items-center">
                 <img
                     src="/images/bg/shape-03.png"
@@ -110,9 +119,13 @@ const BlogArea = ({ data: { section_title, motto, blogs }, space, bg, titleSize
                         y: trans1().y,
                     }}
                 >
-                    <span className="tw-block -tw-indent-[99999px] tw-border-desert tw-rounded-full tw-border-[7px] tw-w-[60px] tw-h-[60px] md:tw-border-[12px] md:tw-w-[90px] md:tw-h-[90px]">
-                        shape 3
-                    </span>
+                    <img
+                        src="/images/shape-animation/dog-tag.svg"
+                        alt="shape"
+                        loading="lazy"
+                        width={178}
+                        height={178}
+                    />
                 </motion.div>
                 <motion.div
                     className="tw-absolute tw-z-1 tw-top-[220px] tw-left-[260px]"
diff --git a/src/containers/contact-info/layout-01/index.tsx b/src/containers/contact-info/layout-01/index.tsx
index 12d7ceb84..8fa686139 100644
--- a/src/containers/contact-info/layout-01/index.tsx
+++ b/src/containers/contact-info/layout-01/index.tsx
@@ -29,7 +29,9 @@ const ContactInfo = ({ data: { section_title, items, images } }: TProps) => {
                             <span className="tw-text-lg tw-text-heading tw-leading-none tw-font-medium tw-mb-2.5">
                                 {section_title?.subtitle}
                             </span>
-                            <h2 className="tw-leading-none tw-mb-10">{section_title.title}</h2>
+                            <h2 className="tw-leading-none tw-mb-10">
+                                {section_title.title}
+                            </h2>
                         </>
                     )}
                     {items?.map((item) => (
@@ -43,7 +45,9 @@ const ContactInfo = ({ data: { section_title, items, images } }: TProps) => {
                                     "tw-text-[32px] tw-text-primary tw-absolute tw-left-0 tw-top-0"
                                 )}
                             />
-                            <h3 className="tw-text-lg tw-mb-3.8">{item.title}</h3>
+                            <h3 className="tw-text-lg tw-mb-3.8">
+                                {item.title}
+                            </h3>
                             {item.texts?.map((text) => (
                                 <p
                                     key={text.id}
@@ -81,7 +85,10 @@ const ContactInfo = ({ data: { section_title, items, images } }: TProps) => {
                         }}
                     >
                         <span data-depth="3">
-                            <img src="/images/shape-animation/about-shape-1.png" alt="" />
+                            <img
+                                src="/images/shape-animation/about-shape-1.png"
+                                alt=""
+                            />
                         </span>
                     </motion.div>
 
@@ -92,7 +99,10 @@ const ContactInfo = ({ data: { section_title, items, images } }: TProps) => {
                             y: trans2().y,
                         }}
                     >
-                        <img src="/images/shape-animation/about-shape-1.png" alt="" />
+                        <img
+                            src="/images/shape-animation/about-shape-1.png"
+                            alt=""
+                        />
                     </motion.div>
                     <motion.div
                         className="tw-absolute tw-top-[255px] tw-left-2 sm:tw-top-[355px] sm:-tw-left-2 tw-z-20"
@@ -101,9 +111,13 @@ const ContactInfo = ({ data: { section_title, items, images } }: TProps) => {
                             y: trans1().y,
                         }}
                     >
-                        <span className="tw-block -tw-indent-[99999px] tw-border-[6px] tw-border-desert tw-rounded-full tw-w-[42px] tw-h-[42px] md:tw-w-[62px] md:tw-h-[62px] md:tw-border-8">
-                            shape 3
-                        </span>
+                        <img
+                            src="/images/shape-animation/dog-tag.svg"
+                            alt="shape"
+                            loading="lazy"
+                            width={178}
+                            height={178}
+                        />
                     </motion.div>
                     <motion.div
                         className="tw-absolute -tw-z-1 tw-w-[100px] tw-bottom-3.8 tw-right-5 sm:tw-w-[100px] sm:tw-bottom-[55px] sm:tw-right-[45px] md:tw-w-auto"
@@ -121,7 +135,10 @@ const ContactInfo = ({ data: { section_title, items, images } }: TProps) => {
                             y: trans1().y,
                         }}
                     >
-                        <img src="/images/shape-animation/nwesletter-shape-2.png" alt="" />
+                        <img
+                            src="/images/shape-animation/nwesletter-shape-2.png"
+                            alt=""
+                        />
                     </motion.div>
                 </motion.div>
             </div>
diff --git a/src/containers/hero/layout-02/index.tsx b/src/containers/hero/layout-02/index.tsx
index 24e6c4fce..af3785f91 100644
--- a/src/containers/hero/layout-02/index.tsx
+++ b/src/containers/hero/layout-02/index.tsx
@@ -3,7 +3,13 @@ import clsx from "clsx";
 import Button from "@ui/button";
 import MottoText from "@ui/motto-text";
 import { useUI } from "@contexts/ui-context";
-import { HeadingType, TextType, ButtonType, ImageType, MottoType } from "@utils/types";
+import {
+    HeadingType,
+    TextType,
+    ButtonType,
+    ImageType,
+    MottoType,
+} from "@utils/types";
 import { scrollUpVariants } from "@utils/variants";
 
 type TProps = {
@@ -16,7 +22,9 @@ type TProps = {
     };
 };
 
-const HeroArea = ({ data: { headings, texts, buttons, motto, images } }: TProps) => {
+const HeroArea = ({
+    data: { headings, texts, buttons, motto, images },
+}: TProps) => {
     const { trans1, trans2 } = useUI();
     return (
         <div className="hero-area tw-pt-[65px]">
@@ -48,7 +56,13 @@ const HeroArea = ({ data: { headings, texts, buttons, motto, images } }: TProps)
                             {content}
                         </Button>
                     ))}
-                    {motto && <MottoText {...motto} size="md" className="tw-mt-[25px]" />}
+                    {motto && (
+                        <MottoText
+                            {...motto}
+                            size="md"
+                            className="tw-mt-[25px]"
+                        />
+                    )}
                 </motion.div>
 
                 <div className="tw-relative tw-z-10">
@@ -78,7 +92,10 @@ const HeroArea = ({ data: { headings, texts, buttons, motto, images } }: TProps)
                         }}
                     >
                         <span data-depth="3">
-                            <img src="/images/shape-animation/about-shape-1.png" alt="" />
+                            <img
+                                src="/images/shape-animation/about-shape-1.png"
+                                alt=""
+                            />
                         </span>
                     </motion.div>
 
@@ -89,7 +106,10 @@ const HeroArea = ({ data: { headings, texts, buttons, motto, images } }: TProps)
                             y: trans2().y,
                         }}
                     >
-                        <img src="/images/shape-animation/about-shape-1.png" alt="" />
+                        <img
+                            src="/images/shape-animation/about-shape-1.png"
+                            alt=""
+                        />
                     </motion.div>
                     <motion.div
                         className="tw-absolute tw-top-[255px] tw-left-2 sm:tw-top-[355px] sm:-tw-left-2 tw-z-20"
@@ -98,9 +118,13 @@ const HeroArea = ({ data: { headings, texts, buttons, motto, images } }: TProps)
                             y: trans1().y,
                         }}
                     >
-                        <span className="tw-block -tw-indent-[99999px] tw-border-[6px] tw-border-desert tw-rounded-full tw-w-[42px] tw-h-[42px] md:tw-w-[62px] md:tw-h-[62px] md:tw-border-8">
-                            shape 3
-                        </span>
+                        <img
+                            src="/images/shape-animation/dog-tag.svg"
+                            alt="shape"
+                            loading="lazy"
+                            width={178}
+                            height={178}
+                        />
                     </motion.div>
                     <motion.div
                         className="tw-absolute -tw-z-1 tw-w-[100px] tw-bottom-3.8 tw-right-5 sm:tw-w-[100px] sm:tw-bottom-[55px] sm:tw-right-[45px] md:tw-w-auto"
@@ -118,7 +142,10 @@ const HeroArea = ({ data: { headings, texts, buttons, motto, images } }: TProps)
                             y: trans1().y,
                         }}
                     >
-                        <img src="/images/shape-animation/nwesletter-shape-2.png" alt="" />
+                        <img
+                            src="/images/shape-animation/nwesletter-shape-2.png"
+                            alt=""
+                        />
                     </motion.div>
                 </div>
             </div>
diff --git a/src/containers/team/layout-01/index.tsx b/src/containers/team/layout-01/index.tsx
index 59f89cf7a..c970b9eb7 100644
--- a/src/containers/team/layout-01/index.tsx
+++ b/src/containers/team/layout-01/index.tsx
@@ -14,7 +14,12 @@ type TProps = TSection & {
     };
 };
 
-const TeamArea = ({ data: { section_title, buttons }, space, bg, titleSize }: TProps) => {
+const TeamArea = ({
+    data: { section_title, buttons },
+    space,
+    bg,
+    titleSize,
+}: TProps) => {
     const { trans1, trans2 } = useUI();
     return (
         <Section className="team-area" space={space} bg={bg}>
@@ -62,9 +67,13 @@ const TeamArea = ({ data: { section_title, buttons }, space, bg, titleSize }: TP
                             y: trans1().y,
                         }}
                     >
-                        <span className="tw-block -tw-indent-[99999px] tw-border-desert tw-rounded-full tw-border-[6px] tw-w-[45px] tw-h-[45px] md:tw-border-8 md:tw-w-15 md:tw-h-15">
-                            shape 3
-                        </span>
+                        <img
+                            src="/images/shape-animation/dog-tag.svg"
+                            alt="shape"
+                            loading="lazy"
+                            width={178}
+                            height={178}
+                        />
                     </motion.div>
                     <motion.div
                         className="tw-absolute -tw-z-1 tw-left-1/2 -tw-bottom-5 tw-w-[120px] lg:-tw-bottom-[70px] lg:tw-w-auto"
@@ -88,7 +97,10 @@ const TeamArea = ({ data: { section_title, buttons }, space, bg, titleSize }: TP
                             y: trans1().y,
                         }}
                     >
-                        <img src="/images/shape-animation/cta-shape-01.png" alt="" />
+                        <img
+                            src="/images/shape-animation/cta-shape-01.png"
+                            alt=""
+                        />
                     </motion.div>
                 </motion.div>
                 <motion.div
@@ -99,7 +111,11 @@ const TeamArea = ({ data: { section_title, buttons }, space, bg, titleSize }: TP
                     variants={scrollUpVariants}
                 >
                     {section_title && (
-                        <SectionTitle {...section_title} align="left" titleSize={titleSize} />
+                        <SectionTitle
+                            {...section_title}
+                            align="left"
+                            titleSize={titleSize}
+                        />
                     )}
                     {buttons?.map(({ id, content, ...rest }) => (
                         <Button key={id} className="tw-mt-1" {...rest}>
diff --git a/src/containers/testimonial/layout-04/index.tsx b/src/containers/testimonial/layout-04/index.tsx
index 0c53f2d62..a5a1c9c6c 100644
--- a/src/containers/testimonial/layout-04/index.tsx
+++ b/src/containers/testimonial/layout-04/index.tsx
@@ -48,7 +48,12 @@ const TestimonialArea = ({
                             className="tw-my-7.5"
                         />
                     )}
-                    {items?.[1] && <Testimonial04 title={items[1].title} className="tw-ml-auto" />}
+                    {items?.[1] && (
+                        <Testimonial04
+                            title={items[1].title}
+                            className="tw-ml-auto"
+                        />
+                    )}
                     <motion.div
                         className="tw-absolute -tw-z-1 tw-left-[-110px] tw-bottom-[130px] tw-w-[166px] tw-h-[-110px]"
                         animate={{
@@ -81,7 +86,9 @@ const TestimonialArea = ({
                     viewport={{ once: true, amount: 0.4 }}
                     variants={scrollUpVariants}
                 >
-                    {total_reviews && <RatingBox {...total_reviews} className="tw-mb-7.5" />}
+                    {total_reviews && (
+                        <RatingBox {...total_reviews} className="tw-mb-7.5" />
+                    )}
                     {items?.[2] && (
                         <Testimonial03
                             image={{
@@ -102,9 +109,13 @@ const TestimonialArea = ({
                             y: trans1().y,
                         }}
                     >
-                        <span className="tw-block -tw-indent-[99999px] tw-border-desert tw-rounded-full tw-border-8 tw-w-[54px] tw-h-[54px]">
-                            shape 3
-                        </span>
+                        <img
+                            src="/images/shape-animation/dog-tag.svg"
+                            alt="shape"
+                            loading="lazy"
+                            width={178}
+                            height={178}
+                        />
                     </motion.div>
                     <motion.div
                         className="tw-absolute -tw-z-1 -tw-right-2.5 tw-bottom-15"
@@ -113,7 +124,10 @@ const TestimonialArea = ({
                             y: trans1().y,
                         }}
                     >
-                        <img src="/images/shape-animation/nwesletter-shape-2.png" alt="" />
+                        <img
+                            src="/images/shape-animation/nwesletter-shape-2.png"
+                            alt=""
+                        />
                     </motion.div>
                 </motion.div>
                 <motion.div
@@ -124,11 +138,18 @@ const TestimonialArea = ({
                     variants={scrollUpVariants}
                 >
                     {section_title && (
-                        <SectionTitle {...section_title} align="left" titleSize={titleSize} />
+                        <SectionTitle
+                            {...section_title}
+                            align="left"
+                            titleSize={titleSize}
+                        />
                     )}
 
                     {buttons?.[0]?.content && (
-                        <Button {...buttons[0]} className="tw-mt-4 lg:tw-mt-7.5">
+                        <Button
+                            {...buttons[0]}
+                            className="tw-mt-4 lg:tw-mt-7.5"
+                        >
                             {buttons[0].content}
                         </Button>
                     )}
diff --git a/src/containers/video/layout-01/index.tsx b/src/containers/video/layout-01/index.tsx
index 0be2ad048..c108df79f 100644
--- a/src/containers/video/layout-01/index.tsx
+++ b/src/containers/video/layout-01/index.tsx
@@ -20,7 +20,11 @@ type TProps = TSection & {
     };
 };
 
-const VideoArea = ({ data: { section_title, images, video }, space, bg }: TProps) => {
+const VideoArea = ({
+    data: { section_title, images, video },
+    space,
+    bg,
+}: TProps) => {
     const { trans1, trans2 } = useUI();
     return (
         <Section
@@ -92,9 +96,13 @@ const VideoArea = ({ data: { section_title, images, video }, space, bg }: TProps
                         y: trans1().y,
                     }}
                 >
-                    <span className="tw-block -tw-indent-[99999px] tw-border-desert tw-rounded-full tw-border-[6px] tw-w-[45px] tw-h-[45px] md:tw-border-[12px] md:tw-w-[90px] md:tw-h-[90px]">
-                        shape 3
-                    </span>
+                    <img
+                        src="/images/shape-animation/dog-tag.svg"
+                        alt="shape"
+                        loading="lazy"
+                        width={178}
+                        height={178}
+                    />
                 </motion.div>
                 <motion.div
                     className="tw-absolute tw-z-1 -tw-bottom-[45px] tw-right-5 tw-w-[85px] md:tw-w-auto"
diff --git a/src/containers/video/layout-02/index.tsx b/src/containers/video/layout-02/index.tsx
index 59e4caded..6eca807b1 100644
--- a/src/containers/video/layout-02/index.tsx
+++ b/src/containers/video/layout-02/index.tsx
@@ -7,7 +7,13 @@ import BottomShape from "@ui/bottom-shape/shape-03";
 import Shape2 from "@assets/svgs/shape-2.svg";
 import { useUI } from "@contexts/ui-context";
 import { scrollUpVariants } from "@utils/variants";
-import { ImageType, MottoType, SectionTitleType, TSection, VideoType } from "@utils/types";
+import {
+    ImageType,
+    MottoType,
+    SectionTitleType,
+    TSection,
+    VideoType,
+} from "@utils/types";
 
 const AnimatedSectionTitle = motion(SectionTitle);
 const AnimatedMottoText = motion(MottoText);
@@ -69,9 +75,13 @@ const VideoArea = ({
                             y: trans1().y,
                         }}
                     >
-                        <span className="tw-block -tw-indent-[99999px] tw-border-[6px] tw-border-desert tw-rounded-full tw-w-[45px] tw-h-[45px] md:tw-border-8 md:tw-w-15 md:tw-h-15">
-                            shape 3
-                        </span>
+                        <img
+                            src="/images/shape-animation/dog-tag.svg"
+                            alt="shape"
+                            loading="lazy"
+                            width={178}
+                            height={178}
+                        />
                     </motion.div>
                     <motion.div
                         className="tw-absolute tw-z-1 tw-right-0 -tw-bottom-15 tw-w-[85px] md:tw-w-auto"
diff --git a/src/containers/video/layout-03/index.tsx b/src/containers/video/layout-03/index.tsx
index 0ddcb1f1a..c90e3b0ca 100644
--- a/src/containers/video/layout-03/index.tsx
+++ b/src/containers/video/layout-03/index.tsx
@@ -6,7 +6,13 @@ import BottomShape from "@ui/bottom-shape/shape-03";
 import Video from "@ui/video-with-poster/video-02";
 import Shape2 from "@assets/svgs/shape-2.svg";
 import { useUI } from "@contexts/ui-context";
-import { ImageType, MottoType, SectionTitleType, TSection, VideoType } from "@utils/types";
+import {
+    ImageType,
+    MottoType,
+    SectionTitleType,
+    TSection,
+    VideoType,
+} from "@utils/types";
 import { scrollUpVariants } from "@utils/variants";
 
 const AnimatedVideo = motion(Video);
@@ -68,9 +74,13 @@ const VideoArea = ({
                             y: trans1().y,
                         }}
                     >
-                        <span className="tw-block -tw-indent-[99999px] tw-border-[6px] tw-border-desert tw-rounded-full tw-w-[45px] tw-h-[45px] md:tw-border-8 md:tw-w-15 md:tw-h-15">
-                            shape 3
-                        </span>
+                        <img
+                            src="/images/shape-animation/dog-tag.svg"
+                            alt="shape"
+                            loading="lazy"
+                            width={178}
+                            height={178}
+                        />
                     </motion.div>
                     <motion.div
                         className="tw-absolute tw-z-1 tw-right-0 -tw-bottom-15 tw-w-[85px] md:tw-w-auto"
@@ -90,10 +100,16 @@ const VideoArea = ({
                     variants={scrollUpVariants}
                 >
                     {section_title && (
-                        <SectionTitle {...section_title} align="left" titleSize={titleSize} />
+                        <SectionTitle
+                            {...section_title}
+                            align="left"
+                            titleSize={titleSize}
+                        />
                     )}
 
-                    {motto && <MottoText className="tw-mt-1" size="md" {...motto} />}
+                    {motto && (
+                        <MottoText className="tw-mt-1" size="md" {...motto} />
+                    )}
                 </motion.div>
             </div>
             <BottomShape />
diff --git a/src/containers/video/layout-04/index.tsx b/src/containers/video/layout-04/index.tsx
index 1c421636c..c379579cd 100644
--- a/src/containers/video/layout-04/index.tsx
+++ b/src/containers/video/layout-04/index.tsx
@@ -18,7 +18,11 @@ type TProps = TSection & {
 const VideoArea = ({ data: { images, video }, space, bg }: TProps) => {
     const { trans1, trans2 } = useUI();
     return (
-        <Section className="video-area tw-relative tw-z-10" space={space} bg={bg}>
+        <Section
+            className="video-area tw-relative tw-z-10"
+            space={space}
+            bg={bg}
+        >
             <h2 className="tw-sr-only">Video Section</h2>
             <div className="tw-container -tw-bottom-[140px] -tw-mt-[140px]">
                 {video && images?.[0] && (
@@ -63,9 +67,13 @@ const VideoArea = ({ data: { images, video }, space, bg }: TProps) => {
                         y: trans1().y,
                     }}
                 >
-                    <span className="tw-block -tw-indent-[99999px] tw-border-desert tw-rounded-full tw-border-[6px] tw-w-[45px] tw-h-[45px] md:tw-border-[12px] md:tw-w-[90px] md:tw-h-[90px]">
-                        shape 3
-                    </span>
+                    <img
+                        src="/images/shape-animation/dog-tag.svg"
+                        alt="shape"
+                        loading="lazy"
+                        width={178}
+                        height={178}
+                    />
                 </motion.div>
                 <motion.div
                     className="tw-absolute tw-z-1 -tw-bottom-[45px] tw-right-5 tw-w-[85px] md:tw-w-auto"
diff --git a/src/containers/video/layout-06/index.tsx b/src/containers/video/layout-06/index.tsx
index 2624b5e62..ee9d6b182 100644
--- a/src/containers/video/layout-06/index.tsx
+++ b/src/containers/video/layout-06/index.tsx
@@ -4,7 +4,12 @@ import MottoText from "@ui/motto-text";
 import SectionTitle from "@components/section-title";
 import Shape2 from "@assets/svgs/shape-2.svg";
 import { useUI } from "@contexts/ui-context";
-import { ImageType, MottoType, SectionTitleType, VideoType } from "@utils/types";
+import {
+    ImageType,
+    MottoType,
+    SectionTitleType,
+    VideoType,
+} from "@utils/types";
 import { scrollUpVariants } from "@utils/variants";
 
 const AnimatedVideo = motion(Video);
@@ -19,7 +24,10 @@ type TProps = {
     titleSize?: "default" | "large";
 };
 
-const VideoArea = ({ data: { section_title, motto, images, video }, titleSize }: TProps) => {
+const VideoArea = ({
+    data: { section_title, motto, images, video },
+    titleSize,
+}: TProps) => {
     const { trans1, trans2 } = useUI();
 
     return (
@@ -62,9 +70,13 @@ const VideoArea = ({ data: { section_title, motto, images, video }, titleSize }:
                             y: trans1().y,
                         }}
                     >
-                        <span className="tw-block -tw-indent-[99999px] tw-border-[6px] tw-border-desert tw-rounded-full tw-w-[45px] tw-h-[45px] md:tw-border-8 md:tw-w-15 md:tw-h-15">
-                            shape 3
-                        </span>
+                        <img
+                            src="/images/shape-animation/dog-tag.svg"
+                            alt="shape"
+                            loading="lazy"
+                            width={178}
+                            height={178}
+                        />
                     </motion.div>
                     <motion.div
                         className="tw-absolute tw-z-1 tw-right-0 -tw-bottom-15 tw-w-[85px] md:tw-w-auto"
@@ -90,7 +102,9 @@ const VideoArea = ({ data: { section_title, motto, images, video }, titleSize }:
                             className="lg:tw-max-w-[420px]"
                         />
                     )}
-                    {motto && <MottoText className="tw-mt-4" size="md" {...motto} />}
+                    {motto && (
+                        <MottoText className="tw-mt-4" size="md" {...motto} />
+                    )}
                 </motion.div>
             </div>
         </div>
diff --git a/src/containers/video/layout-07/index.tsx b/src/containers/video/layout-07/index.tsx
index 0b0b016e5..b4b177d42 100644
--- a/src/containers/video/layout-07/index.tsx
+++ b/src/containers/video/layout-07/index.tsx
@@ -85,9 +85,13 @@ const VideoArea = ({ data: { section_title, images, video }, space, bg }: TProps
                         y: trans1().y,
                     }}
                 >
-                    <span className="tw-block -tw-indent-[99999px] tw-border-desert tw-rounded-full tw-border-[6px] tw-w-[45px] tw-h-[45px] md:tw-border-[12px] md:tw-w-[90px] md:tw-h-[90px]">
-                        shape 3
-                    </span>
+                    <img
+                        src="/images/shape-animation/dog-tag.svg"
+                        alt="shape"
+                        loading="lazy"
+                        width={178}
+                        height={178}
+                    />
                 </motion.div>
                 <motion.div
                     className="tw-absolute tw-z-1 -tw-bottom-[120px] tw-right-5 tw-w-[85px] md:tw-w-auto"
diff --git a/src/data/menu.ts b/src/data/menu.ts
index 698efbda3..389063b85 100644
--- a/src/data/menu.ts
+++ b/src/data/menu.ts
@@ -1,100 +1,43 @@
-export default [
+// Types for menu structure
+type MenuStatus = "hot" | "coming soon" | "new";
+
+interface MenuItem {
+    id: number;
+    label: string;
+    path: string;
+    external?: boolean;
+    status?: MenuStatus;
+}
+
+interface SubMenuItem extends MenuItem {
+    submenu?: MenuItem[];
+}
+
+interface MegaMenuGroup {
+    id: number;
+    title: string;
+    submenu: MenuItem[];
+}
+
+interface BannerSection {
+    path: string;
+    image: {
+        src: string;
+        alt?: string;
+    };
+}
+
+interface MegaMenuItem extends MenuItem {
+    megamenu?: (MegaMenuGroup | { id: number; title: string; banner: BannerSection })[];
+}
+
+type NavigationItem = SubMenuItem | MegaMenuItem;
+
+const navigation: NavigationItem[] = [
     {
         id: 1,
         label: "Home",
         path: "/",
-        /* megamenu: [
-            {
-                id: 11,
-                title: "Group 01",
-                submenu: [
-                    {
-                        id: 111,
-                        label: "submenu item 01",
-                        path: "/",
-                        status: "hot",
-                    },
-                    {
-                        id: 112,
-                        label: "submenu item 02",
-                        path: "#",
-                    },
-                    {
-                        id: 113,
-                        label: "submenu item 03",
-                        path: "#",
-                        status: "hot",
-                    },
-                    {
-                        id: 114,
-                        label: "submenu item 04",
-                        path: "#",
-                    },
-                    {
-                        id: 115,
-                        label: "submenu item 05",
-                        path: "#",
-                    },
-                    {
-                        id: 116,
-                        label: "submenu item 06",
-                        path: "#",
-                    },
-                ],
-            },
-            {
-                id: 12,
-                title: "Group 02",
-                submenu: [
-                    {
-                        id: 121,
-                        label: "submenu item 07",
-                        path: "/",
-                        status: "coming soon",
-                    },
-                    {
-                        id: 122,
-                        label: "submenu item 08",
-                        path: "/",
-                        status: "coming soon",
-                    },
-                    {
-                        id: 123,
-                        label: "submenu item 09",
-                        path: "/",
-                        status: "coming soon",
-                    },
-                    {
-                        id: 124,
-                        label: "submenu item 10",
-                        path: "/",
-                        status: "coming soon",
-                    },
-                    {
-                        id: 125,
-                        label: "submenu item 11",
-                        path: "/",
-                        status: "coming soon",
-                    },
-                    {
-                        id: 126,
-                        label: "submenu item 12",
-                        path: "/",
-                        status: "coming soon",
-                    },
-                ],
-            },
-            {
-                id: 13,
-                title: "Banner",
-                banner: {
-                    path: "/",
-                    image: {
-                        src: "/images/menu/mega-menu.jpg",
-                    },
-                },
-            },
-        ], */
     },
     {
         id: 2,
@@ -103,7 +46,7 @@ export default [
         submenu: [
             {
                 id: 21,
-                label: "About",
+                label: "About Us",
                 path: "/about-us",
             },
             {
@@ -124,46 +67,52 @@ export default [
         path: "#!",
         submenu: [
             {
-                id: 24,
+                id: 31,
                 label: "Become a Mentor",
                 path: "/mentor",
             },
             {
-                id: 25,
+                id: 32,
                 label: "Apply to be a Student",
                 path: "/apply",
+                status: "new",
             },
-            /*           {
-                id: 26,
-                label: "Join our community",
-                path: "/join-our-community",
-            },
-*/
         ],
     },
     {
         id: 4,
-        label: "Events",
-        path: "/events",
-    },
-    {
-        id: 5,
         label: "Blog",
         path: "/blogs/blog",
     },
     {
-        id: 6,
+        id: 5,
         label: "Contact Us",
         path: "/contact-us",
     },
     {
-        id: 7,
-        label: "Shop",
-        path: "https://hashflag.shop/",
-    },
-    {
-        id: 8,
-        label: "Donate",
-        path: "/donate",
+        id: 6,
+        label: "Support",
+        path: "#!",
+        submenu: [
+            {
+                id: 61,
+                label: "Events",
+                path: "/events",
+            },
+            {
+                id: 62,
+                label: "Shop",
+                path: "https://hashflag.shop/",
+                external: true,
+            },
+            {
+                id: 63,
+                label: "Donate",
+                path: "/donate",
+                status: "hot",
+            },
+        ],
     },
 ];
+
+export default navigation;