fix: navbar

package-lock.json

@@ -15,6 +15,7 @@
         "@payloadcms/richtext-lexical": "^3.20.0",
         "@payloadcms/storage-s3": "^3.20.0",
         "@popperjs/core": "2.11.8",
+        "animejs": "^3.2.2",
         "bootstrap": "^5.1.3",
         "dayjs": "^1.11.13",
         "graphql": "^16.10.0",
@@ -39,6 +40,7 @@
       },
       "devDependencies": {
         "@eslint/eslintrc": "^3",
+        "@types/animejs": "^3.1.13",
         "@types/bootstrap": "^5.2.10",
         "@types/imagesloaded": "^4.1.6",
         "@types/isotope-layout": "^3.0.14",
@@ -4266,6 +4268,13 @@
         "@types/estree": "*"
       }
     },
+    "node_modules/@types/animejs": {
+      "version": "3.1.13",
+      "resolved": "https://registry.npmjs.org/@types/animejs/-/animejs-3.1.13.tgz",
+      "integrity": "sha512-yWg9l1z7CAv/TKpty4/vupEh24jDGUZXv4r26StRkpUPQm04ztJaftgpto8vwdFs8SiTq6XfaPKCSI+wjzNMvQ==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/@types/bootstrap": {
       "version": "5.2.10",
       "resolved": "https://registry.npmjs.org/@types/bootstrap/-/bootstrap-5.2.10.tgz",
@@ -4785,6 +4794,12 @@
       "integrity": "sha512-+mRmCTv6SbCmtYJCN4faJMNFVNN5EuCTTprDTAo7YzIGji2KADmakjVA3+8mVDkZ2Bf09vayB35lSQIex2+QaQ==",
       "license": "MIT"
     },
+    "node_modules/animejs": {
+      "version": "3.2.2",
+      "resolved": "https://registry.npmjs.org/animejs/-/animejs-3.2.2.tgz",
+      "integrity": "sha512-Ao95qWLpDPXXM+WrmwcKbl6uNlC5tjnowlaRYtuVDHHoygjtIPfDUoK9NthrlZsQSKjZXlmji2TrBUAVbiH0LQ==",
+      "license": "MIT"
+    },
     "node_modules/ansi-regex": {
       "version": "6.1.0",
       "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-6.1.0.tgz",

package.json

@@ -4,7 +4,7 @@
   "private": true,
   "type": "module",
   "scripts": {
-    "dev": "NEXT_DEBUG_TURBOPACK=1 next dev --turbopack",
+    "dev": "next dev --turbopack",
     "dev-old": "next dev",
     "build": "next build",
     "start": "next start",
@@ -20,6 +20,7 @@
     "@payloadcms/richtext-lexical": "^3.20.0",
     "@payloadcms/storage-s3": "^3.20.0",
     "@popperjs/core": "2.11.8",
+    "animejs": "^3.2.2",
     "bootstrap": "^5.1.3",
     "dayjs": "^1.11.13",
     "graphql": "^16.10.0",
@@ -44,6 +45,7 @@
   },
   "devDependencies": {
     "@eslint/eslintrc": "^3",
+    "@types/animejs": "^3.1.13",
     "@types/bootstrap": "^5.2.10",
     "@types/imagesloaded": "^4.1.6",
     "@types/isotope-layout": "^3.0.14",
@@ -60,6 +62,5 @@
     "prettier": "^3.4.2",
     "tailwindcss": "^3.4.1",
     "typescript": "^5"
-  },
+  }
-  "packageManager": "yarn@4.6.0"
 }

public/assets/css/custom.css

@@ -91,8 +91,7 @@ a {
 }
 
 .mn-sub.open {
-  max-height: 200px;
+  max-height: 1000px;
-  overflow: auto !important;
   opacity: 1 !important;
 }
 html {

src/app/(main)/[pageslug]/page.tsx

@@ -24,16 +24,12 @@ function Loading() {
   return (
     <>
       <section className="page-section bg-dark-1 bg-gradient-gray-dark-1 light-content bg-scroll overflow-hidden">
-        {/* <!-- Background Shape --> */}
         <div className="bg-shape-1 opacity-003">
           <Image src="/assets/images/demo-fancy/bg-shape-1.svg" width={1443} height={844} alt="" />
         </div>
-        {/* <!-- End Background Shape --> */}
       </section>
 
-      {/* Section */}
       <BlogDetailContentSkeleton />
-      {/* End Section */}
     </>
   );
 }

src/app/(main)/home-bg-video/page.tsx

@@ -4,7 +4,7 @@ import Homepage from "@/components/Homepage";
 import dynamic from "next/dynamic";
 
 const ParallaxContainer = dynamic(() => import("@/components/ParallaxContainer"), {
-  ssr: false, // Disable server-side rendering
+  ssr: true,
 });
 
 export default function Home1BGVideoMultiPage() {

src/app/(main)/page.tsx

@@ -2,6 +2,24 @@ import Homepage from "./home-bg-video/page";
 export const metadata = {
   title: "HomePage - Cochise Oncology",
   description: "Resonance — One & Multi Page React Nextjs Creative Template",
+  keywords: "Cochise Oncology, Oncology, Healthcare, Medical Services, Cancer Treatment",
+  author: "Cochise Oncology",
+  viewport: "width=device-width, initial-scale=1.0",
+  robots: "index, follow",
+  og: {
+    title: "HomePage - Cochise Oncology",
+    description: "Resonance — One & Multi Page React Nextjs Creative Template",
+    type: "website",
+    url: "https://www.cochiseoncology.com",
+    image: "https://www.cochiseoncology.com/og-image.jpg",
+  },
+  twitter: {
+    card: "summary_large_image",
+    site: "@CochiseOncology",
+    title: "HomePage - Cochise Oncology",
+    description: "Resonance — One & Multi Page React Nextjs Creative Template",
+    image: "https://www.cochiseoncology.com/twitter-image.jpg",
+  },
 };
 
 export default function Home() {

src/collections/Pages.ts

@@ -1,7 +1,6 @@
 import { BeforeFooterBlock } from "@/blocks/BeforeFooter";
 import { ContentBlock } from "@/blocks/Content";
 import { HorizontalImageContentBlock } from "@/blocks/HorizontalImageContent";
-import { ImageSliderBlock } from "@/blocks/ImageSlider";
 import { OurTeamBlock } from "@/blocks/OurTeam";
 import formatSlug from "@/utils/formatSlug";
 import { CollectionConfig } from "payload";
@@ -37,7 +36,7 @@ export const Pages: CollectionConfig = {
       label: "Page Layout",
       type: "blocks",
       minRows: 1,
-      blocks: [ContentBlock, BeforeFooterBlock, OurTeamBlock, HorizontalImageContentBlock, ImageSliderBlock],
+      blocks: [ContentBlock, BeforeFooterBlock, OurTeamBlock, HorizontalImageContentBlock],
     },
     {
       name: "meta",

src/components/Blocks/RenderBlocks.tsx

@@ -5,14 +5,12 @@ import { ContentBlock } from "./Content";
 import { BeforeFooterBlock } from "./BeforeFooter";
 import { OurTeamBlock } from "./OurTeam";
 import { HorizontalImageContentBlock } from "./HorizontalImageContent";
-import { ImageSliderBlock } from "./ImageSlider";
 
 const blockComponents = {
   contentBlock: ContentBlock,
   beforeFooterBlock: BeforeFooterBlock,
   ourTeamBlock: OurTeamBlock,
   horizontalImageContentBlock: HorizontalImageContentBlock,
-  imageSliderBlock: ImageSliderBlock,
 };
 
 export const RenderBlocks: React.FC<{

src/components/Facts.tsx

@@ -1,4 +1,6 @@
 import { numbers } from "@/data/facts";
+import { features5 } from "@/data/features";
+import { services5 } from "@/data/services";
 import React from "react";
 
 export default function Facts() {
@@ -7,14 +9,26 @@ export default function Facts() {
       {/* Numbers Grid */}
       <div className="row mt-n30 wow fadeInUp">
         {/* Numbers Item */}
-        {numbers.map((number, index) => (
+        {features5.map((elm: any, i: number) => (
-          <div
+          <div key={i} className="col-sm-6 col-xl-3 d-flex align-items-stretch">
-            key={index}
+            <div className="alt-features-item box-shadow text-center mt-30">
-            className="col-sm-6 col-xl-3 d-flex align-items-stretch mt-30"
+              <div className="alt-features-icon mb-10 color-primary-1">
-          >
+                <svg
-            <div className="number-2-item">
+                  width={24}
-              <div className="number-2-title">{number.title}</div>
+                  height={24}
-              <div className="number-2-descr">{number.descr}</div>
+                  viewBox="0 0 24 24"
+                  fill="currentColor"
+                  aria-hidden="true"
+                  focusable="false"
+                  xmlns="http://www.w3.org/2000/svg"
+                  fillRule="evenodd"
+                  clipRule="evenodd"
+                >
+                  <path d={elm.svgPath} />
+                </svg>
+              </div>
+              <h4 className="alt-features-title">{elm.title}</h4>
+              <div className="alt-features-descr">{elm.description}</div>
             </div>
           </div>
         ))}

src/components/Footer.tsx

@@ -16,20 +16,13 @@ export default function Footer() {
   return (
     <>
       <div className="container position-relative">
-        <div className="row pb-120 pb-sm-80 pb-xs-50">
+        <div className="row pb-sm-80 pb-xs-50">
-          <div className="col-md-4 col-lg-3 text-gray mb-sm-50">
+          <div className="col-md-2 col-lg-3 text-gray mb-sm-50">
             <div className="mb-30">
               <Image
                 src="/assets/images/demo-slick/logo-dark.webp"
                 alt="Cochise Oncology Logo"
-                width={126}
+                width={250}
-                height={56}
-                className="light-mode-logo"
-              />
-              <Image
-                src="/assets/images/demo-slick/logo-dark.webp"
-                alt="Cochise Oncology Logo"
-                width={126}
                 height={56}
                 className="dark-mode-logo"
               />
@@ -38,7 +31,7 @@ export default function Footer() {
           <div className="col-md-7 offset-md-1 offset-lg-2">
             <div className="row mt-n30">
               {/* Footer Widget */}
-              <div className="col-sm-4 mt-30">
+              <div className="col-sm-3 mt-30 mx-4">
                 <h3 className="fw-title">Business Hours</h3>
                 <ul className="fw-menu clearlist local-scroll">
                   <li>
@@ -48,7 +41,7 @@ export default function Footer() {
               </div>
               {/* End Footer Widget */}
               {/* Footer Widget */}
-              <div className="col-sm-4 mt-30">
+              <div className="col-sm-3 mt-30 mx-4">
                 <h3 className="fw-title">Contact Us</h3>
                 <ul className="fw-menu clearlist">
                   <FooterSocials />
@@ -56,7 +49,7 @@ export default function Footer() {
               </div>
               {/* End Footer Widget */}
               {/* Footer Widget */}
-              <div className="col-sm-4 mt-30">
+              <div className="col-sm-3 mt-30 mx-4">
                 <h3 className="fw-title">Legal &amp; Press</h3>
                 <ul className="fw-menu clearlist">
                   {footerLinks.map((elm: any, i: number) => (

src/components/Header.tsx

@@ -43,16 +43,7 @@ export default function Header1Multipage({ links }: any) {
           {/* Languages */}
           {/* <LanguageSelect /> */}
           {/* End Languages */}
-          <li>
+          <li></li>
-            <Link href="/contact" className="opacity-1 no-hover">
-              <span className="link-hover-anim underline" data-link-animate="y">
-                <span className="link-strong link-strong-unhovered">Request Consultation</span>
-                <span className="link-strong link-strong-hovered" aria-hidden="true">
-                  Request Consultation
-                </span>
-              </span>
-            </Link>
-          </li>
         </ul>
       </div>
       {/* End Main Menu */}

src/components/HeaderNav.tsx

@@ -3,12 +3,22 @@
 import addScrollspy from "@/utils/addScroll";
 import { init_classic_menu_resize } from "@/utils/menuToggle";
 import { scrollToElement } from "@/utils/scrollToElement";
-import { closeMobileMenu } from "@/utils/toggleMobileMenu";
+import { closeMobileMenu, toggleMobileMenu } from "@/utils/toggleMobileMenu";
 import { usePathname } from "next/navigation";
-import { useEffect } from "react";
+import { useEffect, useRef, useState } from "react";
 import Link from "next/link";
 
 export default function HeaderNav({ links, animateY = false }: any) {
+  const [isDropdownOpen, setIsDropdownOpen] = useState([""]);
+  const dropdownRef = useRef(null);
+
+  const toggleDropdown = (section: string[]) => {
+    if (section == isDropdownOpen) {
+      setIsDropdownOpen([""]);
+    }
+    setIsDropdownOpen(section);
+  };
+
   useEffect(() => {
     setTimeout(() => {
       scrollToElement();
@@ -52,17 +62,20 @@ export default function HeaderNav({ links, animateY = false }: any) {
                   className="mn-has-sub"
                   onClick={(e) => {
                     e.preventDefault();
-                    // toggleDropdown();
+                    toggleDropdown([link.text]);
                   }}
                 >
                   {link.text} <i className="mi-chevron-down" />
                 </a>
 
-                <ul className={`mn-sub to-left`}>
+                <ul className={`mn-sub to-left ${isDropdownOpen.includes(link.text) && "open"}`} ref={dropdownRef}>
                   {link.child.map((subLink: any, subLinkIdx: number) => (
                     <li key={subLinkIdx}>
-                      {!Array.isArray(subLink?.child) && <Link href={subLink?.href}>{subLink?.text}</Link>}
+                      {!Array.isArray(subLink?.child) && (
-
+                        <Link href={subLink?.href} onClick={() => toggleMobileMenu()}>
+                          {subLink?.text}
+                        </Link>
+                      )}
                       {Array.isArray(subLink?.child) && (
                         <>
                           <a
@@ -70,16 +83,18 @@ export default function HeaderNav({ links, animateY = false }: any) {
                             className="mn-has-sub"
                             onClick={(e) => {
                               e.preventDefault();
-                              // toggleDropdown();
+                              toggleDropdown([link.text, subLink.text]);
                             }}
                           >
                             {subLink.text} <i className="mi-chevron-down" />
                           </a>
 
-                          <ul className={`mn-sub to-left`}>
+                          <ul className={`mn-sub to-left ${isDropdownOpen.includes(subLink.text) && "open"}`}>
                             {subLink.child.map((subLink2: any, subLinkIdx2: number) => (
                               <li key={subLinkIdx2}>
-                                <Link href={subLink2?.href}>{subLink2?.text}</Link>
+                                <Link href={subLink2?.href} onClick={() => toggleMobileMenu()}>
+                                  {subLink2?.text}
+                                </Link>
                               </li>
                             ))}
                           </ul>

src/components/Hero.tsx

@@ -1,6 +1,7 @@
 "use client";
 
 import { useRef, useState } from "react";
+import Link from "next/link";
 
 export default function Hero6() {
   const videoRef = useRef<any | null>(null);
@@ -68,13 +69,11 @@ export default function Hero6() {
                 >
                   Learn More
                 </a>
-                <a
+                <Link href="/radixact">
-                  href="#contact"
+                  <button className="btn btn-mod btn-w btn-border-w btn-round btn-large btn-hover-anim ms-1 me-1 mt-2 align-middle">
-                  className="btn btn-mod btn-w btn-large btn-round ms-1 me-1 mt-2 align-middle"
+                    <span>Request Consultant</span>
-                  data-btn-animate="y"
+                  </button>
-                >
+                </Link>
-                  Get In Touch
-                </a>
               </div>
             </div>
             {/* End Home Section Text */}

src/components/Homepage.tsx

@@ -11,8 +11,6 @@ import Link from "next/link";
 import TestimonialsDark from "./TestimonialsDark";
 import ContactDark from "./ContactDark";
 import { features4 } from "@/data/features";
-import Features from "./Features";
-import Team from "./Team";
 
 export default function homepage({ onePage = false, dark = false }) {
   return (
@@ -66,31 +64,15 @@ export default function homepage({ onePage = false, dark = false }) {
                     </>
                   )}
                   {onePage ? (
-                    <>
+                    <></>
-                      {" "}
-                      <a href="#services" className="link-hover-anim ms-2 ms-sm-5 me-2" data-link-animate="y">
-                        <span className="link-strong link-strong-unhovered">
-                          Learn more <i className="mi-arrow-right size-24" aria-hidden="true"></i>
-                        </span>
-                        <span className="link-strong link-strong-hovered" aria-hidden="true">
-                          Learn more <i className="mi-arrow-right size-24" aria-hidden="true"></i>
-                        </span>
-                      </a>
-                    </>
                   ) : (
                     <>
                       {" "}
-                      <Link
+                      <Link href={`/radixact`} className="link-hover-anim ms-2 ms-sm-5 me-2" data-link-animate="y">
-                        href={`/slick-about${dark ? "-dark" : ""}`}
+                        <div className="link-strong">
-                        className="link-hover-anim ms-2 ms-sm-5 me-2"
+                          Find more about Radixact
-                        data-link-animate="y"
+                          <i className="mi-arrow-right ml-4" aria-hidden="true"></i>
-                      >
+                        </div>
-                        <span className="link-strong link-strong-unhovered">
-                          Learn more <i className="mi-arrow-right size-24" aria-hidden="true"></i>
-                        </span>
-                        <span className="link-strong link-strong-hovered" aria-hidden="true">
-                          Learn more <i className="mi-arrow-right size-24" aria-hidden="true"></i>
-                        </span>
                       </Link>
                     </>
                   )}
@@ -120,12 +102,16 @@ export default function homepage({ onePage = false, dark = false }) {
           </div>
         </div>
       </section>
-      <section
+      <section className={`small-section bg-dark ps-4 ps-lg-0 pe-4 pe-lg-0 position-relative overflow-hidden`}>
-        className={`page-section ${dark ? "bg-dark-1 bg-dark-alpha light-content" : "bg-light-alpha-90"}  bg-scroll`}
+        <div className="decoration-12 bg-white" />
-        style={{
+        <div className="decoration-13 bg-white" />
-          backgroundImage: "url(/assets/images/demo-slick/section-bg-1.jpg)",
+        <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>
+        </div>
         <Facts />
       </section>
       <section className={`page-section  scrollSpysection  ${dark ? "bg-dark-1 light-content" : ""} `} id="services">
@@ -164,73 +150,6 @@ export default function homepage({ onePage = false, dark = false }) {
             <Service />
             {/* End Right Column */}
           </div>
-          <div className="page-section">
-            <hr className="mt-0 mb-0" />
-          </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 Cochise Oncology?</h2>
-              <p className="text-gray 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>
-            </div>
-          </div>
-          {/* Features Grid */}
-          <Features />
-          {/* End Features Grid */}
-        </div>
-      </section>
-      <hr className={`mt-0 mb-0 ${dark ? "white" : ""} `} />
-      <section
-        className={`page-section pb-0 scrollSpysection  ${dark ? "bg-dark-1 light-content" : ""} mb-5`}
-        id="team"
-      >
-        <Team />
-      </section>
-      <section className="page-section pt-0 pb-0 mt-5">
-        <div className="container">
-          <div
-            className={`small-section ${
-              dark ? "bg-dark-2 light-content" : "bg-gray-light-1"
-            }  ps-4 ps-lg-0 pe-4 pe-lg-0 round position-relative overflow-hidden`}
-          >
-            {/* Decoration Circles */}
-            <div className="decoration-12" />
-            <div className="decoration-13" />
-            {/* End Decoration Circles */}
-            <div className="row">
-              <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>
-                    <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.
-                    </p>
-                  </div>
-                  <div className="col-md-5 col-lg-4 text-center text-md-end pt-2">
-                    {onePage ? (
-                      <>
-                        <a href="#contact" className="btn btn-mod btn-color btn-large btn-circle btn-hover-anim">
-                          <span>Start a project</span>
-                        </a>
-                      </>
-                    ) : (
-                      <>
-                        <Link
-                          href={`/slick-portfolio${dark ? "-dark" : ""}`}
-                          className="btn btn-mod btn-color btn-large btn-circle btn-hover-anim"
-                        >
-                          <span>View all works</span>
-                        </Link>
-                      </>
-                    )}
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
         </div>
       </section>
       <section className={`page-section  ${dark ? "bg-dark-1 light-content" : ""} `}>
@@ -243,12 +162,6 @@ export default function homepage({ onePage = false, dark = false }) {
         </div>
         <Blog />
       </section>
-      <section className={`page-section ${dark ? "bg-dark-2 light-content" : "bg-gray-light-1"}  overflow-hidden`}>
-        <Newsletter />
-      </section>
-      <section className={`page-section  scrollSpysection  ${dark ? "bg-dark-1 light-content" : ""} `} id="contact">
-        {dark ? <ContactDark /> : <Contact />}
-      </section>
     </>
   );
 }

src/components/Pages/Page.tsx

@@ -9,6 +9,7 @@ export interface PageProps {
 
 export default async function Page({ slug }: PageProps) {
   const page = await fetchPageBySlug({ slug });
+
   if (!page) {
     return notFound();
   }

src/components/SplashScreen.tsx

@@ -0,0 +1,52 @@
+import React, { useEffect, useState } from "react";
+import Image from "next/image";
+import anime from "animejs";
+
+interface SplashScreenProps {
+  finishLoading: () => void;
+}
+
+const SplashScreen: React.FC<SplashScreenProps> = ({ finishLoading }) => {
+  const [isMounted, setIsMounted] = useState(false);
+
+  const animate = () => {
+    const loader = anime.timeline({
+      complete: () => finishLoading(),
+    });
+
+    loader
+      .add({
+        targets: "#logo",
+        delay: 0,
+        scale: 1,
+        duration: 500,
+        easing: "easeInOutExpo",
+      })
+      .add({
+        targets: "#logo",
+        delay: 0,
+        scale: 1.25,
+        duration: 500,
+        easing: "easeInOutExpo",
+      });
+  };
+
+  useEffect(() => {
+    const timeout = setTimeout(() => {
+      setIsMounted(true);
+    }, 10);
+
+    animate();
+    return () => clearTimeout(timeout);
+  }, []);
+
+  return isMounted ? (
+    <div className="flex h-screen items-center justify-center">
+      <Image id="logo" src={"/assets/images/demo-slick/logo-dark.webp"} alt="" width={500} height={500} />
+    </div>
+  ) : (
+    <></>
+  );
+};
+
+export default SplashScreen;

src/payload-types.ts

@@ -197,17 +197,6 @@ export interface Page {
             blockName?: string | null;
             blockType: 'horizontalImageContentBlock';
           }
-        | {
-            images?:
-              | {
-                  image?: (number | null) | Media;
-                  id?: string | null;
-                }[]
-              | null;
-            id?: string | null;
-            blockName?: string | null;
-            blockType: 'imageSliderBlock';
-          }
       )[]
     | null;
   meta?: {
@@ -580,18 +569,6 @@ export interface PagesSelect<T extends boolean = true> {
               id?: T;
               blockName?: T;
             };
-        imageSliderBlock?:
-          | T
-          | {
-              images?:
-                | T
-                | {
-                    image?: T;
-                    id?: T;
-                  };
-              id?: T;
-              blockName?: T;
-            };
       };
   meta?:
     | T