From ba547bed7cdd94d2f1881707611889eea4c5cfb5 Mon Sep 17 00:00:00 2001
From: iqbal024 <muhammadiqbalalikhadafi@gmail.com>
Date: Thu, 13 Feb 2025 01:00:37 +0700
Subject: [PATCH 1/3] update background

---
 src/app/(main)/layout.tsx |  8 ++++----
 src/components/Footer.tsx | 12 +++++++++---
 src/data/features.ts      | 10 +++++-----
 3 files changed, 18 insertions(+), 12 deletions(-)

diff --git a/src/app/(main)/layout.tsx b/src/app/(main)/layout.tsx
index 3823f1b..9084b4f 100644
--- a/src/app/(main)/layout.tsx
+++ b/src/app/(main)/layout.tsx
@@ -83,12 +83,12 @@ export default function MainLayout({
               <Header links={navMenuData} />
             </nav>
             <main id="main">{children}</main>
-            <footer className="page-section dark footer bg-dark-2 light-content position-relative overflow-hidden pb-30">
+            {/* <footer className="page-section dark footer bg-dark-2 light-content position-relative overflow-hidden pb-30">
               <div className="bg-shape-4 opacity-003">
                 <Image src="/assets/images/demo-slick/bg-shape-4.svg" width={1600} height={268} alt="" />
-              </div>
-              <Footer />
-            </footer>
+              </div> */}
+            <Footer />
+            {/* </footer> */}
           </div>
         </div>
       </body>
diff --git a/src/components/Footer.tsx b/src/components/Footer.tsx
index fbeab97..a19884c 100644
--- a/src/components/Footer.tsx
+++ b/src/components/Footer.tsx
@@ -10,7 +10,13 @@ export default function Footer() {
   };
 
   return (
-    <div className="relative text-white py-10">
+    <div
+      className="relative text-white py-10"
+      style={{
+        backgroundColor: "transparent",
+        backgroundImage: "linear-gradient(172deg, #2E2D51 0%, #64B3B4 100%)",
+      }}
+    >
       <div className="container mx-auto flex flex-wrap justify-between items-start px-6">
         <div className="w-full md:w-1/4 mb-6 md:mb-0 flex flex-col items-start">
           <Image src="/assets/images/demo-slick/logo-dark.webp" alt="Cochise Oncology Logo" width={363} height={138} />
@@ -30,7 +36,7 @@ export default function Footer() {
                   href="https://www.google.com/maps/place/5151+AZ-90,+Sierra+Vista,+AZ+85635"
                   target="_blank"
                   rel="noopener noreferrer"
-                  className="underline text-lg"
+                  className="underline text-lg text-white"
                 >
                   5151 E HIGHWAY 90
                 </a>
@@ -52,7 +58,7 @@ export default function Footer() {
                 href="https://www.facebook.com/p/Cochise-Oncology-61556262839823"
                 target="_blank"
                 rel="noopener noreferrer"
-                className="underline text-lg"
+                className="underline text-lg text-white"
               >
                 Facebook
               </a>
diff --git a/src/data/features.ts b/src/data/features.ts
index c6f4b50..fe0a996 100644
--- a/src/data/features.ts
+++ b/src/data/features.ts
@@ -86,11 +86,11 @@ export const features2 = [
     text: "Courage",
     desc: "Fighting cancer requires immense courage. We believe no one should face this alone, so we provide whole patient care.",
   },
-  {
-    id: 4,
-    text: "Resilience",
-    desc: "adapt, recover, and grow stronger in the face of challenges and adversity",
-  },
+  // {
+  //   id: 4,
+  //   text: "Resilience",
+  //   desc: "adapt, recover, and grow stronger in the face of challenges and adversity",
+  // },
 ];
 
 export const features3 = [

From b44e3356dbb63ebc11ae5a9ff2a348cd3c2a955f Mon Sep 17 00:00:00 2001
From: Val <44112412+LawfaL@users.noreply.github.com>
Date: Thu, 13 Feb 2025 01:35:57 +0700
Subject: [PATCH 2/3] fix: eslint

---
 eslint.config.mjs                             |   3 +-
 src/app/(main)/page.tsx                       |   3 +-
 src/app/(main)/slick-about-dark/page.tsx      |   5 -
 src/app/(main)/slick-portfolio/page.tsx       |  40 ++----
 src/app/(main)/slick-services/page.tsx        |  93 ++++---------
 src/components/Blocks/GoogleReviews/index.tsx |   6 +-
 src/components/Blocks/OurTeam/index.tsx       |  26 +---
 src/components/Blogs/Blog.tsx                 |   1 -
 src/components/Facts.tsx                      |   2 -
 src/components/Hero.tsx                       |  23 +---
 src/components/Homepage.tsx                   |  17 +--
 src/components/{Stars => Modal.tsx}           |   0
 src/components/Team.tsx                       | 125 +++---------------
 src/components/Teams/CardTeam.tsx             |  47 +++++--
 src/migrations/20250212_164255_cannonical.ts  |  10 +-
 src/payload-types.ts                          |  54 --------
 src/services/payload/page.ts                  |   3 -
 src/utils/parallax.ts                         |   4 +-
 18 files changed, 107 insertions(+), 355 deletions(-)
 rename src/components/{Stars => Modal.tsx} (100%)

diff --git a/eslint.config.mjs b/eslint.config.mjs
index 93fe29e..6763a8c 100644
--- a/eslint.config.mjs
+++ b/eslint.config.mjs
@@ -13,10 +13,9 @@ const eslintConfig = [
   ...compat.extends("next/core-web-vitals", "next/typescript"),
   {
     rules: {
-      "@typescript-eslint/no-unused-vars": "warn",
       "@typescript-eslint/no-explicit-any": "off",
       "@typescript-eslint/ban-ts-comment": "off",
-      "@next/next/no-html-link-for-pages": "off"
+      "@next/next/no-html-link-for-pages": "off",
     },
   },
 ];
diff --git a/src/app/(main)/page.tsx b/src/app/(main)/page.tsx
index 99965dc..78a1fdf 100644
--- a/src/app/(main)/page.tsx
+++ b/src/app/(main)/page.tsx
@@ -1,6 +1,6 @@
-import Blogs from "@/components/Blogs/Blogs";
 import Parallax from "./home-bg-video/page";
 import Homepage from "@/components/Homepage";
+import { BeforeFooterBlock } from "@/components/Blocks/BeforeFooter";
 
 export const metadata = {
   title: "HomePage - Cochise Oncology",
@@ -30,6 +30,7 @@ export default function Home() {
     <>
       <Parallax />
       <Homepage />
+      <BeforeFooterBlock />
     </>
   );
 }
diff --git a/src/app/(main)/slick-about-dark/page.tsx b/src/app/(main)/slick-about-dark/page.tsx
index 8f2a5e5..9d08c57 100644
--- a/src/app/(main)/slick-about-dark/page.tsx
+++ b/src/app/(main)/slick-about-dark/page.tsx
@@ -1,9 +1,4 @@
-import Facts from "@/components/Facts";
-import Testimonials from "@/components/Testimonials";
-import TestimonialsDark from "@/components/TestimonialsDark";
-import { features4 } from "@/data/features";
 import Image from "next/image";
-import Link from "next/link";
 
 export const metadata = {
   title: "Slick About Dark || Resonance &mdash; One & Multi Page React Nextjs Creative Template",
diff --git a/src/app/(main)/slick-portfolio/page.tsx b/src/app/(main)/slick-portfolio/page.tsx
index 11efe50..0f7e8e3 100644
--- a/src/app/(main)/slick-portfolio/page.tsx
+++ b/src/app/(main)/slick-portfolio/page.tsx
@@ -4,28 +4,17 @@ import Image from "next/image";
 import Link from "next/link";
 
 export const metadata = {
-  title:
-    "Slick Portfolio || Resonance &mdash; One & Multi Page React Nextjs Creative Template",
-  description:
-    "Resonance &mdash; One & Multi Page React Nextjs Creative Template",
+  title: "Slick Portfolio || Resonance &mdash; One & Multi Page React Nextjs Creative Template",
+  description: "Resonance &mdash; One & Multi Page React Nextjs Creative Template",
 };
-const onePage = false;
 const dark = false;
 export default function SlickPortfolioPage() {
   return (
     <>
-      <section
-        className="page-section bg-gradient-gray-light-1 bg-scroll overflow-hidden"
-        id="home"
-      >
+      <section className="page-section bg-gradient-gray-light-1 bg-scroll overflow-hidden" id="home">
         {/* <!-- Background Shape --> */}
         <div className="bg-shape-1 wow fadeIn">
-          <Image
-            src="/assets/images/demo-fancy/bg-shape-1.svg"
-            width={1443}
-            height={844}
-            alt=""
-          />
+          <Image src="/assets/images/demo-fancy/bg-shape-1.svg" width={1443} height={844} alt="" />
         </div>
         {/* <!-- End Background Shape --> */}
 
@@ -34,22 +23,14 @@ export default function SlickPortfolioPage() {
             <div className="col-md-10 offset-md-1 col-lg-8 offset-lg-2">
               <h1 className="hs-title-10 mb-10 wow fadeInUp">Portfolio</h1>
 
-              <p
-                className="section-descr mb-0 wow fadeInUp"
-                data-wow-delay="0.2s"
-              >
+              <p className="section-descr mb-0 wow fadeInUp" data-wow-delay="0.2s">
                 Explore captivating web design solutions.
               </p>
             </div>
           </div>
         </div>
       </section>
-      <section
-        className={`page-section  scrollSpysection  ${
-          dark ? "bg-dark-1 light-content" : ""
-        } `}
-        id="portfolio"
-      >
+      <section className={`page-section  scrollSpysection  ${dark ? "bg-dark-1 light-content" : ""} `} id="portfolio">
         <div className="container position-relative">
           <Portfolio />
         </div>
@@ -70,13 +51,10 @@ export default function SlickPortfolioPage() {
               <div className="col-lg-10 offset-lg-1 col-xl-8 offset-xl-2">
                 <div className="row">
                   <div className="col-md-7 col-lg-8 text-center text-md-start mb-sm-20">
-                    <h2 className="section-title-small mb-20">
-                      Like our creative works?
-                    </h2>
+                    <h2 className="section-title-small mb-20">Like our creative works?</h2>
                     <p className="text-gray mb-0">
-                      Quisque posuere mollis ullamcorper. Ut eget metus lorem
-                      ipsum posuere eget at ex. Aenean consequat vitae lorem in
-                      vehicula.
+                      Quisque posuere mollis ullamcorper. Ut eget metus lorem ipsum posuere eget at ex. Aenean consequat
+                      vitae lorem in vehicula.
                     </p>
                   </div>
                   <div className="col-md-5 col-lg-4 text-center text-md-end pt-2">
diff --git a/src/app/(main)/slick-services/page.tsx b/src/app/(main)/slick-services/page.tsx
index de96ae9..eddefe9 100644
--- a/src/app/(main)/slick-services/page.tsx
+++ b/src/app/(main)/slick-services/page.tsx
@@ -5,28 +5,18 @@ import Image from "next/image";
 import Link from "next/link";
 
 export const metadata = {
-  title:
-    "Slick Services || Resonance &mdash; One & Multi Page React Nextjs Creative Template",
-  description:
-    "Resonance &mdash; One & Multi Page React Nextjs Creative Template",
+  title: "Slick Services || Resonance &mdash; One & Multi Page React Nextjs Creative Template",
+  description: "Resonance &mdash; One & Multi Page React Nextjs Creative Template",
 };
-const onePage = false;
+
 const dark = false;
 export default function SlickServicesPage() {
   return (
     <>
-      <section
-        className="page-section bg-gradient-gray-light-1 bg-scroll overflow-hidden"
-        id="home"
-      >
+      <section className="page-section bg-gradient-gray-light-1 bg-scroll overflow-hidden" id="home">
         {/* <!-- Background Shape --> */}
         <div className="bg-shape-1 wow fadeIn">
-          <Image
-            src="/assets/images/demo-fancy/bg-shape-1.svg"
-            width={1443}
-            height={844}
-            alt=""
-          />
+          <Image src="/assets/images/demo-fancy/bg-shape-1.svg" width={1443} height={844} alt="" />
         </div>
         {/* <!-- End Background Shape --> */}
 
@@ -35,35 +25,22 @@ export default function SlickServicesPage() {
             <div className="col-md-10 offset-md-1 col-lg-8 offset-lg-2">
               <h1 className="hs-title-10 mb-10 wow fadeInUp">Our Services</h1>
 
-              <p
-                className="section-descr mb-0 wow fadeInUp"
-                data-wow-delay="0.2s"
-              >
+              <p className="section-descr mb-0 wow fadeInUp" data-wow-delay="0.2s">
                 Web design that leaves an impression.
               </p>
             </div>
           </div>
         </div>
       </section>
-      <section
-        className={`page-section  scrollSpysection  ${
-          dark ? "bg-dark-1 light-content" : ""
-        } `}
-        id="services"
-      >
+      <section className={`page-section  scrollSpysection  ${dark ? "bg-dark-1 light-content" : ""} `} id="services">
         <div className="container position-relative">
           <div className="row">
             {/* Left Column */}
             <div className="col-lg-5 mb-md-60 mb-sm-40">
-              <h2 className="section-caption-slick mb-30 mb-sm-20">
-                WHAT WE DO
-              </h2>
-              <h3 className="section-title mb-30">
-                We provide the best development solutions.
-              </h3>
+              <h2 className="section-caption-slick mb-30 mb-sm-20">WHAT WE DO</h2>
+              <h3 className="section-title mb-30">We provide the best development solutions.</h3>
               <p className="section-descr mb-50 mb-sm-40">
-                The power of design help us to solve complex problems and
-                cultivate business solutions.
+                The power of design help us to solve complex problems and cultivate business solutions.
               </p>
               <div className="local-scroll">
                 <Link
@@ -84,12 +61,10 @@ export default function SlickServicesPage() {
           </div>
           <div className="row mb-50 mb-sm-50">
             <div className="col-md-10 offset-md-1 col-lg-8 offset-lg-2 col-xl-6 offset-xl-3 text-center">
-              <h2 className="section-title-small mb-20">
-                Why choose Resonance?
-              </h2>
+              <h2 className="section-title-small mb-20">Why choose Resonance?</h2>
               <p className="text-gray mb-0">
-                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
-                eiusmod tempor incididunt ut labore et dolore magna aliqua.
+                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et
+                dolore magna aliqua.
               </p>
             </div>
           </div>
@@ -99,9 +74,7 @@ export default function SlickServicesPage() {
         </div>
       </section>
       <hr className={`mt-0 mb-0 ${dark ? "white" : ""} `} />
-      <section
-        className={`page-section  ${dark ? "bg-dark-1 light-content" : ""}`}
-      >
+      <section className={`page-section  ${dark ? "bg-dark-1 light-content" : ""}`}>
         <div className="container position-relative">
           <div className="row">
             {/* Images */}
@@ -155,32 +128,21 @@ export default function SlickServicesPage() {
             {/* End Images */}
             {/* Text */}
             <div className="col-lg-5 d-flex align-items-center">
-              <div
-                className="wow fadeInUp"
-                data-wow-duration="1.2s"
-                data-wow-offset="255"
-              >
-                <h2 className="section-caption-slick mb-30 mb-sm-20">
-                  How we work?
-                </h2>
+              <div className="wow fadeInUp" data-wow-duration="1.2s" data-wow-offset="255">
+                <h2 className="section-caption-slick mb-30 mb-sm-20">How we work?</h2>
 
-                <h2 className="section-title mb-30">
-                  Get the power of the professional services
-                </h2>
+                <h2 className="section-title mb-30">Get the power of the professional services</h2>
 
                 <p className="text-gray">
-                  Pellentesque ultrices purus sit amet velit eleifend, eu
-                  iaculis velit malesuada. Proin id mattis elit. Nullam a nisi
-                  tellus. Mauris rhoncus diam in sem maximus, nec luctus justo
-                  imperdiet. Etiam fermentum vehicula faucibus.
+                  Pellentesque ultrices purus sit amet velit eleifend, eu iaculis velit malesuada. Proin id mattis elit.
+                  Nullam a nisi tellus. Mauris rhoncus diam in sem maximus, nec luctus justo imperdiet. Etiam fermentum
+                  vehicula faucibus.
                 </p>
 
                 <p className="text-gray mb-0">
-                  Praesent ullamcorper urna id arcu molestie scelerisque. Sed
-                  imperdiet tristique mauris et faucibus. Maecenas semper augue
-                  non fringilla placerat. Curabitur luctus erat sit amet
-                  ultricies aliquam. Donec dictum convallis mauris et maximus.
-                  Nullam massa arcu, porta quis felis et, eleifend varius quam.
+                  Praesent ullamcorper urna id arcu molestie scelerisque. Sed imperdiet tristique mauris et faucibus.
+                  Maecenas semper augue non fringilla placerat. Curabitur luctus erat sit amet ultricies aliquam. Donec
+                  dictum convallis mauris et maximus. Nullam massa arcu, porta quis felis et, eleifend varius quam.
                 </p>
               </div>
             </div>
@@ -204,13 +166,10 @@ export default function SlickServicesPage() {
               <div className="col-lg-10 offset-lg-1 col-xl-8 offset-xl-2">
                 <div className="row">
                   <div className="col-md-7 col-lg-8 text-center text-md-start mb-sm-20">
-                    <h2 className="section-title-small mb-20">
-                      Like our creative works?
-                    </h2>
+                    <h2 className="section-title-small mb-20">Like our creative works?</h2>
                     <p className="text-gray mb-0">
-                      Quisque posuere mollis ullamcorper. Ut eget metus lorem
-                      ipsum posuere eget at ex. Aenean consequat vitae lorem in
-                      vehicula.
+                      Quisque posuere mollis ullamcorper. Ut eget metus lorem ipsum posuere eget at ex. Aenean consequat
+                      vitae lorem in vehicula.
                     </p>
                   </div>
                   <div className="col-md-5 col-lg-4 text-center text-md-end pt-2">
diff --git a/src/components/Blocks/GoogleReviews/index.tsx b/src/components/Blocks/GoogleReviews/index.tsx
index 1100d59..8880d36 100644
--- a/src/components/Blocks/GoogleReviews/index.tsx
+++ b/src/components/Blocks/GoogleReviews/index.tsx
@@ -64,13 +64,13 @@ export function GoogleReviewsBlock() {
       </div>
 
       <div className="container px-6">
-        <h2 className="text-3xl font-bold text-center">Reviews</h2>
+        <h2 className="text-3xl font-bold text-center text-white">Reviews</h2>
         <div className="flex justify-center space-x-2">
-          <h2 className="text-xl text-center font-bold">4.8</h2>
+          <h2 className="text-xl text-center font-bold text-white">4.8</h2>
           <div className="mt-1">
             <StarRating size={20} value={4.8} />
           </div>
-          <div className="text-xs font-semibold mt-1 text-neutral-500">Over 200 Reviews</div>
+          <div className="text-xs font-semibold mt-1 text-white">Over 200 Reviews</div>
         </div>
         <div className="mt-20 relative">
           <Swiper
diff --git a/src/components/Blocks/OurTeam/index.tsx b/src/components/Blocks/OurTeam/index.tsx
index 3413e2e..3340c2f 100644
--- a/src/components/Blocks/OurTeam/index.tsx
+++ b/src/components/Blocks/OurTeam/index.tsx
@@ -1,4 +1,4 @@
-import { CardTeam } from "@/components/Teams/CardTeam";
+import Team from "@/components/Team";
 
 type Team = {
   id: number;
@@ -13,27 +13,5 @@ export interface OurTeamProps {
 }
 
 export function OurTeamBlock({ team }: OurTeamProps) {
-  return (
-    <section className="page-section bg-gray-light-1 relative">
-      {/* Decoration Circles */}
-      <div className="decoration-12" />
-      <div className="decoration-13" />
-      {/* End Decoration Circles */}
-      <div className="container mx-auto px-6 text-center">
-        <h2 className="text-4xl font-semibold text-gray-800 mb-8">Our Team</h2>
-        <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-6">
-          {team.map((member, idx) => (
-            <CardTeam
-              key={idx}
-              data={{
-                name: member.name,
-                img: member.img.url,
-                role: member.role,
-              }}
-            />
-          ))}
-        </div>
-      </div>
-    </section>
-  );
+  return <Team data={team} />;
 }
diff --git a/src/components/Blogs/Blog.tsx b/src/components/Blogs/Blog.tsx
index 781779d..809e60f 100644
--- a/src/components/Blogs/Blog.tsx
+++ b/src/components/Blogs/Blog.tsx
@@ -1,4 +1,3 @@
-import { blogs9 } from "@/data/blogs";
 import React from "react";
 import Image from "next/image";
 import Link from "next/link";
diff --git a/src/components/Facts.tsx b/src/components/Facts.tsx
index 7f4f920..c20d942 100644
--- a/src/components/Facts.tsx
+++ b/src/components/Facts.tsx
@@ -1,6 +1,4 @@
-import { numbers } from "@/data/facts";
 import { features5 } from "@/data/features";
-import { services5 } from "@/data/services";
 import React from "react";
 
 export default function Facts() {
diff --git a/src/components/Hero.tsx b/src/components/Hero.tsx
index dea36c5..79332a4 100644
--- a/src/components/Hero.tsx
+++ b/src/components/Hero.tsx
@@ -1,32 +1,11 @@
 "use client";
 
-import { useRef, useState } from "react";
+import { useRef } from "react";
 import Link from "next/link";
 
 export default function Hero6() {
   const videoRef = useRef<any | null>(null);
-  const [isPlaying, setIsPlaying] = useState(true);
-  const [isMuted, setIsMuted] = useState(true);
 
-  const togglePlayPause = () => {
-    if (isPlaying) {
-      videoRef.current.pause();
-      setIsPlaying(false);
-    } else {
-      videoRef.current.play();
-      setIsPlaying(true);
-    }
-  };
-
-  const toggleMuteUnmute = () => {
-    if (isMuted) {
-      videoRef.current.muted = false;
-      setIsMuted(false);
-    } else {
-      videoRef.current.muted = true;
-      setIsMuted(true);
-    }
-  };
   return (
     <section className="home-section bg-dark-1 bg-dark-alpha-30 light-content scrollSpysection" id="home">
       <div className="container min-height-100vh d-flex align-items-center pt-100 pb-100 pt-sm-120 pb-sm-120">
diff --git a/src/components/Homepage.tsx b/src/components/Homepage.tsx
index 0865447..9a0082a 100644
--- a/src/components/Homepage.tsx
+++ b/src/components/Homepage.tsx
@@ -1,10 +1,9 @@
 import { features4 } from "@/data/features";
 import Image from "next/image";
 import Link from "next/link";
-import Blog from "./Blogs/Blog";
 import Cta3 from "./cta3";
-import Facts from "./Facts";
 import Service from "./Service";
+import { GoogleReviewsBlock } from "./Blocks/GoogleReviews";
 
 export default function homepage({ onePage = false, dark = false }) {
   return (
@@ -100,13 +99,9 @@ export default function homepage({ onePage = false, dark = false }) {
         <div className="decoration-12 bg-white" />
         <div className="decoration-13 bg-white" />
         <div className="col-md-10 offset-md-1 col-lg-8 offset-lg-2 col-xl-6 offset-xl-3 text-center text-white mb-50">
-          <h2 className="section-title-small">Why choose Cochise Oncology?</h2>
-          <p className="mb-0">
-            Here at Cochise Oncology we offer the most up-to-date technology in cancer treatment that rivals the largest
-            and most prestigious centers in the country.
-          </p>
+          <h2 className="section-title-small">Testimonials</h2>
         </div>
-        <Facts />
+        <GoogleReviewsBlock />
       </section>
       <section className={`page-section  scrollSpysection  ${dark ? "bg-dark-1 light-content" : ""} `} id="services">
         <div className="container position-relative">
@@ -157,12 +152,6 @@ export default function homepage({ onePage = false, dark = false }) {
           </div>
         </div>
       </section>
-      <section className={`page-section  scrollSpysection  ${dark ? "bg-dark-1 light-content" : ""} `} id="blog">
-        <div className={`bg-shape-3 ${dark ? "opacity-003" : ""} `}>
-          <Image src="/assets/images/demo-slick/bg-shape-3.svg" width={1443} height={644} alt="" />
-        </div>
-        <Blog />
-      </section>
     </>
   );
 }
diff --git a/src/components/Stars b/src/components/Modal.tsx
similarity index 100%
rename from src/components/Stars
rename to src/components/Modal.tsx
diff --git a/src/components/Team.tsx b/src/components/Team.tsx
index d4b476e..c8b6d57 100644
--- a/src/components/Team.tsx
+++ b/src/components/Team.tsx
@@ -1,113 +1,28 @@
 "use client";
-import { Swiper, SwiperSlide } from "swiper/react";
-import { Navigation } from "swiper/modules";
-import { teamMembers } from "@/data/team";
-import Image from "next/image";
+import { CardTeam } from "./Teams/CardTeam";
 
-export default function Team() {
+export default function Team({ data }: any) {
   return (
-    <div className="container position-relative">
-      <div className="row">
-        {/* Quote */}
-        <div className="col-md-6 mb-sm-60 mb-xs-40 d-flex flex-column align-items-center">
-          <h2 className="section-caption-slick mb-30 mb-sm-20">Our Teams</h2>
-          <blockquote className="testimonial mb-0 wow fadeInUp">
-            <div className="blockquote-icon" aria-hidden="true">
-              ”
-            </div>
-            <p>Our goal is to spend quality time with every patient</p>
-            <footer>
-              <div className="section-line mb-10" />
-              Cecilia Hirales
-              <div className="small">Clinical Director, Co-founder</div>
-            </footer>
-          </blockquote>
-        </div>
-        {/* End Quote */}
-        {/* Team Carousel */}
-        <div className="col-md-6 relative">
-          <div>
-            <Swiper
-              spaceBetween={0}
-              slidesPerView={2}
-              breakpoints={{
-                500: {
-                  slidesPerView: 2, // When window width is <= 480px
-                },
-                0: {
-                  slidesPerView: 1,
-                },
-              }}
-              modules={[Navigation]}
-              navigation={{
-                prevEl: ".snbp1",
-                nextEl: ".snbn1",
-              }}
-              watchSlidesProgress
-              resizeObserver
-              className="team-carousel owl-carousel owl-theme overflow-hidden position-static"
-              style={{
-                opacity: 1,
-                display: "block",
-              }}
-            >
-              {/* Team item */}
-              {teamMembers.map((member, index) => (
-                <SwiperSlide className="owl-item" key={index}>
-                  <div className="team-carousel-item">
-                    <div className="team-item">
-                      <div className="team-item-image">
-                        <Image
-                          width={600}
-                          height={800}
-                          src={member.image}
-                          className="wow scaleOutIn"
-                          alt="Image Description"
-                        />
-                        <div className="team-item-detail">
-                          <div className="team-social-links">
-                            {member.socials.map((social, socialIndex) => (
-                              <a href={social.url} target="_blank" rel="noopener nofollow" key={socialIndex}>
-                                <div className="visually-hidden">{social.platform}</div>
-                                <i className={social.icon} />
-                              </a>
-                            ))}
-                          </div>
-                        </div>
-                      </div>
-                      <div className="team-item-descr">
-                        <div className="team-item-name">{member.name}</div>
-                        <div className="team-item-role">{member.role}</div>
-                      </div>
-                    </div>
-                  </div>
-                </SwiperSlide>
-              ))}
-              <div className="owl-controls clickable">
-                <div className="owl-pagination">
-                  <div className="owl-page">
-                    <span className=""></span>
-                  </div>
-                  <div className="owl-page active">
-                    <span className=""></span>
-                  </div>
-                </div>
-                <div className="owl-buttons">
-                  <div className="owl-prev snbp1 owl-prev-testimonial-1" role="button" tabIndex={0}>
-                    <span className="visually-hidden">Previous Slide</span>
-                    <i className="mi-arrow-left" aria-hidden="true"></i>
-                  </div>
-                  <div className="owl-next snbn1" role="button" tabIndex={0}>
-                    <span className="visually-hidden">Next Slide</span>
-                    <i className="mi-arrow-right" aria-hidden="true"></i>
-                  </div>
-                </div>
-              </div>
-              {/* End Team item */}
-            </Swiper>
+    <div className="container">
+      <div className="row mb-70 mb-sm-50">
+        <div className="col-md-12 offset-md-2 col-lg-6 offset-lg-3 text-center">
+          <h2 className="section-title mb-30 mb-sm-20">
+            <span className="text-gray">Our</span> Team
+            <span className="text-gray">.</span>
+          </h2>
+          <div className="text-gray">
+            The same color can evoke different emotions, or have various meanings to different individuals and cultures.
           </div>
         </div>
-        {/* End Team Carousel */}
+      </div>
+      <div className="row mt-n40">
+        {/* Team item */}
+        {data.map((member: any, index: any) => (
+          <div key={index}>
+            <CardTeam data={member} />
+          </div>
+        ))}
+        {/* End Team item */}
       </div>
     </div>
   );
diff --git a/src/components/Teams/CardTeam.tsx b/src/components/Teams/CardTeam.tsx
index 75d5ccc..18ca208 100644
--- a/src/components/Teams/CardTeam.tsx
+++ b/src/components/Teams/CardTeam.tsx
@@ -1,27 +1,46 @@
+"use client";
 import Image from "next/image";
-
 export interface CardTeamProps {
   data: {
     name: string;
     role: string;
-    img: string;
+    img: { url: string };
   };
 }
 
 export function CardTeam({ data }: CardTeamProps) {
   return (
-    <div className="bg-white p-6 rounded-lg shadow-md">
-      <Image
-        src={data.img}
-        alt={data.name}
-        width={80}
-        height={80}
-        className="rounded-full object-cover mx-auto"
-        style={{ width: "80px", height: "80px" }}
-      />
-      <h3 className="mt-4 text-lg font-medium text-gray-900">{data.name}</h3>
-      <p className="text-gray-600">{data.role}</p>
-      <button className="bg-slate-400 rounded-full p-2 font-semibold text-slate-50 text-xs">BIOGRAPHY</button>
+    <div className="col-md-4 mt-40">
+      <div className="team-item">
+        <div className="team-item-image">
+          <Image
+            src={data.img.url}
+            width={625}
+            height={767}
+            className="wow scaleOutIn"
+            data-wow-duration="1.2s"
+            alt={`Image of ${data.name}`}
+          />
+          <div className="team-item-detail">
+            <div className="team-social-links">
+              {[
+                { platform: "Facebook", icon: "fa-facebook-f", url: "#" },
+                { platform: "Twitter", icon: "fa-twitter", url: "#" },
+                { platform: "Pinterest", icon: "fa-pinterest-p", url: "#" },
+              ].map((social, idx) => (
+                <a key={idx} href={social.url} target="_blank" rel="noopener nofollow">
+                  <div className="visually-hidden">{social.platform}</div>
+                  <i className={social.icon} />
+                </a>
+              ))}
+            </div>
+          </div>
+        </div>
+        <div className="team-item-descr">
+          <div className="team-item-name">{data.name}</div>
+          <div className="team-item-role">{data.role}</div>
+        </div>
+      </div>
     </div>
   );
 }
diff --git a/src/migrations/20250212_164255_cannonical.ts b/src/migrations/20250212_164255_cannonical.ts
index 2314cef..ae74ad9 100644
--- a/src/migrations/20250212_164255_cannonical.ts
+++ b/src/migrations/20250212_164255_cannonical.ts
@@ -1,6 +1,6 @@
-import { MigrateUpArgs, MigrateDownArgs, sql } from '@payloadcms/db-postgres'
+import { MigrateUpArgs, MigrateDownArgs, sql } from "@payloadcms/db-postgres";
 
-export async function up({ db, payload, req }: MigrateUpArgs): Promise<void> {
+export async function up({ db }: MigrateUpArgs): Promise<void> {
   await db.execute(sql`
    CREATE TYPE "public"."enum_forms_confirmation_type" AS ENUM('message', 'redirect');
   CREATE TABLE IF NOT EXISTS "users" (
@@ -705,10 +705,10 @@ export async function up({ db, payload, req }: MigrateUpArgs): Promise<void> {
   CREATE INDEX IF NOT EXISTS "payload_preferences_rels_path_idx" ON "payload_preferences_rels" USING btree ("path");
   CREATE INDEX IF NOT EXISTS "payload_preferences_rels_users_id_idx" ON "payload_preferences_rels" USING btree ("users_id");
   CREATE INDEX IF NOT EXISTS "payload_migrations_updated_at_idx" ON "payload_migrations" USING btree ("updated_at");
-  CREATE INDEX IF NOT EXISTS "payload_migrations_created_at_idx" ON "payload_migrations" USING btree ("created_at");`)
+  CREATE INDEX IF NOT EXISTS "payload_migrations_created_at_idx" ON "payload_migrations" USING btree ("created_at");`);
 }
 
-export async function down({ db, payload, req }: MigrateDownArgs): Promise<void> {
+export async function down({ db }: MigrateDownArgs): Promise<void> {
   await db.execute(sql`
    DROP TABLE "users" CASCADE;
   DROP TABLE "media" CASCADE;
@@ -743,5 +743,5 @@ export async function down({ db, payload, req }: MigrateDownArgs): Promise<void>
   DROP TABLE "payload_preferences" CASCADE;
   DROP TABLE "payload_preferences_rels" CASCADE;
   DROP TABLE "payload_migrations" CASCADE;
-  DROP TYPE "public"."enum_forms_confirmation_type";`)
+  DROP TYPE "public"."enum_forms_confirmation_type";`);
 }
diff --git a/src/payload-types.ts b/src/payload-types.ts
index de40e14..450b276 100644
--- a/src/payload-types.ts
+++ b/src/payload-types.ts
@@ -6,60 +6,6 @@
  * 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;
diff --git a/src/services/payload/page.ts b/src/services/payload/page.ts
index b46ec12..583221d 100644
--- a/src/services/payload/page.ts
+++ b/src/services/payload/page.ts
@@ -1,10 +1,7 @@
 import payloadConfig from "@/payload.config";
-import { draftMode } from "next/headers";
 import { getPayload } from "payload";
 
 export const fetchPageBySlug = async ({ slug }: { slug: string | undefined }) => {
-  const { isEnabled: draft } = await draftMode();
-
   const payload = await getPayload({ config: payloadConfig });
 
   const result = await payload.find({
diff --git a/src/utils/parallax.ts b/src/utils/parallax.ts
index ec38ace..e9d15e7 100644
--- a/src/utils/parallax.ts
+++ b/src/utils/parallax.ts
@@ -27,7 +27,7 @@ export const parallaxMouseMovement = () => {
       // });
     });
 
-    scene.addEventListener("mouseenter", function (e) {
+    scene.addEventListener("mouseenter", function () {
       this.querySelectorAll(".parallax-mousemove-follow").forEach((el) => {
         setTimeout(() => {
           el.style.transition = "all .27s var(--ease-out-short)";
@@ -36,7 +36,7 @@ export const parallaxMouseMovement = () => {
       });
     });
 
-    scene.addEventListener("mouseout", function (e) {
+    scene.addEventListener("mouseout", function () {
       this.querySelectorAll(".parallax-mousemove-follow").forEach((el) => {
         el.style.transition = "none";
       });

From 0bacd23fc58dc2bfe4ba2cc03b8ffd1ebc77b6c2 Mon Sep 17 00:00:00 2001
From: iqbal024 <muhammadiqbalalikhadafi@gmail.com>
Date: Thu, 13 Feb 2025 02:19:31 +0700
Subject: [PATCH 3/3] update navbar

---
 .../assets/css/demo-elegant/demo-elegant.css  | 27 ++----
 public/assets/css/demo-slick/demo-slick.css   | 91 +++++--------------
 public/assets/css/style.css                   | 20 ++--
 src/components/Header.tsx                     |  2 +-
 4 files changed, 43 insertions(+), 97 deletions(-)

diff --git a/public/assets/css/demo-elegant/demo-elegant.css b/public/assets/css/demo-elegant/demo-elegant.css
index 30b0b2b..565c7b0 100644
--- a/public/assets/css/demo-elegant/demo-elegant.css
+++ b/public/assets/css/demo-elegant/demo-elegant.css
@@ -34,26 +34,10 @@
   );
   --gradient-gray-light-1: linear-gradient(0deg, #f5f5f5 0%, #fff 100%);
   --gradient-gray-light-2: linear-gradient(0deg, #fff 0%, #f5f5f5 100%);
-  --gradient-dark-alpha-1: linear-gradient(
-    90deg,
-    var(--color-dark-1) 40%,
-    transparent 87%
-  );
-  --gradient-dark-alpha-2: linear-gradient(
-    90deg,
-    transparent 13%,
-    var(--color-dark-1) 60%
-  );
-  --gradient-primary-alpha-1: linear-gradient(
-    90deg,
-    var(--color-primary-1) 40%,
-    transparent 87%
-  );
-  --gradient-primary-alpha-2: linear-gradient(
-    90deg,
-    transparent 13%,
-    var(--color-primary-1) 60%
-  );
+  --gradient-dark-alpha-1: linear-gradient(90deg, var(--color-dark-1) 40%, transparent 87%);
+  --gradient-dark-alpha-2: linear-gradient(90deg, transparent 13%, var(--color-dark-1) 60%);
+  --gradient-primary-alpha-1: linear-gradient(90deg, var(--color-primary-1) 40%, transparent 87%);
+  --gradient-primary-alpha-2: linear-gradient(90deg, transparent 13%, var(--color-primary-1) 60%);
   color: var(--color-dark-1);
   font-family: var(--font-global);
   font-size: 16px;
@@ -81,7 +65,8 @@
   letter-spacing: 0;
 } */
 .theme-elegant .main-nav.dark-mode {
-  background-color: rgba(30, 30, 30, 0.905);
+  background-color: linear-gradient(to right, #64b3b4, #a8dcca) !important;
+  /* background-color: rgba(30, 30, 30, 0.905); */
 }
 .theme-elegant .form label {
   margin-bottom: 15px;
diff --git a/public/assets/css/demo-slick/demo-slick.css b/public/assets/css/demo-slick/demo-slick.css
index fc583fc..42c796e 100644
--- a/public/assets/css/demo-slick/demo-slick.css
+++ b/public/assets/css/demo-slick/demo-slick.css
@@ -57,39 +57,21 @@
   );
   --gradient-gray-light-1: linear-gradient(0deg, #f5f5f5 0%, #fff 100%);
   --gradient-gray-light-2: linear-gradient(0deg, #fff 0%, #f5f5f5 100%);
-  --gradient-dark-alpha-1: linear-gradient(
-    90deg,
-    var(--color-dark-1) 40%,
-    transparent 87%
-  );
-  --gradient-dark-alpha-2: linear-gradient(
-    90deg,
-    transparent 13%,
-    var(--color-dark-1) 60%
-  );
-  --gradient-primary-alpha-1: linear-gradient(
-    90deg,
-    var(--color-primary-1) 40%,
-    transparent 87%
-  );
-  --gradient-primary-alpha-2: linear-gradient(
-    90deg,
-    transparent 13%,
-    var(--color-primary-1) 60%
-  );
+  --gradient-dark-alpha-1: linear-gradient(90deg, var(--color-dark-1) 40%, transparent 87%);
+  --gradient-dark-alpha-2: linear-gradient(90deg, transparent 13%, var(--color-dark-1) 60%);
+  --gradient-primary-alpha-1: linear-gradient(90deg, var(--color-primary-1) 40%, transparent 87%);
+  --gradient-primary-alpha-2: linear-gradient(90deg, transparent 13%, var(--color-primary-1) 60%);
   --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);
+  --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);
   color: var(--color-dark-1);
   font-family: var(--font-global);
   font-size: 17px;
@@ -132,26 +114,10 @@
     var(--color-primary-2) 67%,
     var(--color-primary-1) 100%
   );
-  --gradient-dark-alpha-1: linear-gradient(
-    90deg,
-    var(--color-dark-1) 40%,
-    transparent 87%
-  );
-  --gradient-dark-alpha-2: linear-gradient(
-    90deg,
-    transparent 13%,
-    var(--color-dark-1) 60%
-  );
-  --gradient-primary-alpha-1: linear-gradient(
-    90deg,
-    var(--color-primary-1) 40%,
-    transparent 87%
-  );
-  --gradient-primary-alpha-2: linear-gradient(
-    90deg,
-    transparent 13%,
-    var(--color-primary-1) 60%
-  );
+  --gradient-dark-alpha-1: linear-gradient(90deg, var(--color-dark-1) 40%, transparent 87%);
+  --gradient-dark-alpha-2: linear-gradient(90deg, transparent 13%, var(--color-dark-1) 60%);
+  --gradient-primary-alpha-1: linear-gradient(90deg, var(--color-primary-1) 40%, transparent 87%);
+  --gradient-primary-alpha-2: linear-gradient(90deg, transparent 13%, var(--color-primary-1) 60%);
 }
 .theme-slick h1,
 .theme-slick h2,
@@ -220,10 +186,12 @@
   opacity: 0.9;
 }
 .theme-slick .main-nav.dark {
-  background-color: rgba(16, 24, 40, 0.8777);
+  /* background-color: rgba(16, 24, 40, 0.8777); */
+  background-color: linear-gradient(to right, #64b3b4, #a8dcca) !important;
 }
 .theme-slick .main-nav.dark-mode {
-  background-color: rgba(55, 63, 78, 0.9);
+  /* background-color: rgba(55, 63, 78, 0.9); */
+  background-color: linear-gradient(to right, #64b3b4, #a8dcca) !important;
 }
 .theme-slick .inner-nav ul {
   font-size: 16px;
@@ -255,12 +223,7 @@
 .theme-slick .inner-nav > ul > li > a.active:before {
   transform: scaleX(1);
 }
-.theme-slick
-  .main-nav.mobile-on
-  .inner-nav
-  > ul
-  > li
-  > a:not(.no-hover):before {
+.theme-slick .main-nav.mobile-on .inner-nav > ul > li > a:not(.no-hover):before {
   display: none;
 }
 .theme-slick .mn-sub {
@@ -473,7 +436,9 @@
 .theme-slick .scroll-down-1-text {
   font-weight: 500;
   opacity: 0.7;
-  transition: opacity 0.4s ease, transform 0.4s var(--ease-elastic-2);
+  transition:
+    opacity 0.4s ease,
+    transform 0.4s var(--ease-elastic-2);
 }
 .theme-slick .typewrite .wrap:after {
   font-size: 0.9em;
@@ -487,18 +452,10 @@
 }
 .theme-slick .light-content .section-caption-slick {
   color: #fff;
-  background-image: linear-gradient(
-    45deg,
-    rgba(5, 16, 38, 0.75) 0%,
-    transparent 100%
-  );
+  background-image: linear-gradient(45deg, rgba(5, 16, 38, 0.75) 0%, transparent 100%);
 }
 .theme-slick .light-content .section-caption-fancy {
-  background-image: linear-gradient(
-    15deg,
-    rgba(5, 16, 38, 0.75) 0%,
-    transparent 100%
-  );
+  background-image: linear-gradient(15deg, rgba(5, 16, 38, 0.75) 0%, transparent 100%);
 }
 .theme-slick .section-title {
   font-size: 48px !important;
diff --git a/public/assets/css/style.css b/public/assets/css/style.css
index 3902096..238c61c 100644
--- a/public/assets/css/style.css
+++ b/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),
-    0px 3px 5px 0px rgba(0, 0, 0, 0.03);
-  --box-shadow-strong: 0px 5px 10px 0px rgba(0, 0, 0, 0.08), 0px 1px 1px 0px rgba(0, 0, 0, 0.06),
-    0px 3px 5px 0px rgba(0, 0, 0, 0.06);
+  --box-shadow:
+    0px 5px 10px 0px rgba(0, 0, 0, 0.05), 0px 1px 1px 0px rgba(0, 0, 0, 0.03), 0px 3px 5px 0px rgba(0, 0, 0, 0.03);
+  --box-shadow-strong:
+    0px 5px 10px 0px rgba(0, 0, 0, 0.08), 0px 1px 1px 0px rgba(0, 0, 0, 0.06), 0px 3px 5px 0px rgba(0, 0, 0, 0.06);
   --box-shadow-block: 0px 3px 50px 0px rgba(0, 0, 0, 0.05);
   --box-shadow-block-strong: 0px 3px 50px 0px rgba(0, 0, 0, 0.15);
   --transition-default: all 0.27s cubic-bezier(0, 0, 0.58, 1);
@@ -3806,7 +3806,8 @@ a.logo:hover {
   top: 0;
   left: 0;
   text-align: left;
-  background: rgba(255, 255, 255, 0.98);
+  /* background: rgba(255, 255, 255, 0.98); */
+  background: linear-gradient(to right, #64b3b4, #a8dcca);
   box-shadow:
     0px 0px 10px 0px rgba(0, 0, 0, 0.025),
     0px 1px 1px 0px rgba(0, 0, 0, 0.01),
@@ -4303,7 +4304,8 @@ a.logo:hover {
   display: none;
 }
 .main-nav.dark {
-  background-color: rgba(10, 10, 10, 0.905);
+  /* background-color: rgba(10, 10, 10, 0.905); */
+  background-color: linear-gradient(to right, #64b3b4, #a8dcca) !important;
   box-shadow: none;
 
   -webkit-box-shadow: none;
@@ -4311,7 +4313,8 @@ a.logo:hover {
   box-shadow: none;
 }
 .main-nav.dark-mode {
-  background-color: rgba(27, 27, 27, 0.905);
+  /* background-color: rgba(27, 27, 27, 0.905); */
+  background-color: linear-gradient(to right, #64b3b4, #a8dcca) !important;
 }
 .main-nav:not(.transparent) {
   -webkit-backdrop-filter: blur(10px);
@@ -4370,7 +4373,8 @@ a.logo:hover {
  */
 
 .main-nav.transparent {
-  background: transparent !important;
+  /* background: transparent !important; */
+  background: linear-gradient(to right, #64b3b4, #a8dcca) !important;
   box-shadow: none;
 }
 .main-nav.js-transparent {
diff --git a/src/components/Header.tsx b/src/components/Header.tsx
index 839cac2..6f4769e 100644
--- a/src/components/Header.tsx
+++ b/src/components/Header.tsx
@@ -5,7 +5,7 @@ import Link from "next/link";
 
 export default function Header1Multipage({ links }: any) {
   return (
-    <div className="main-nav-sub full-wrapper">
+    <div className="main-nav-sub full-wrapper" style={{ background: "linear-gradient(to right, #64B3B4, #A8DCCA)" }}>
       {/* 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. *) */}