From fb65a89d84914579a47ac55c5b469139bfd8e0f0 Mon Sep 17 00:00:00 2001 From: Val <44112412+LawfaL@users.noreply.github.com> Date: Tue, 11 Feb 2025 23:59:16 +0700 Subject: [PATCH] fix: navbar --- package-lock.json | 15 ++++ package.json | 9 +- public/assets/css/custom.css | 3 +- src/app/(main)/[pageslug]/page.tsx | 4 - src/app/(main)/home-bg-video/page.tsx | 2 +- src/app/(main)/page.tsx | 18 ++++ src/collections/Pages.ts | 3 +- src/components/Blocks/RenderBlocks.tsx | 2 - src/components/Facts.tsx | 30 +++++-- src/components/Footer.tsx | 19 ++-- src/components/Header.tsx | 11 +-- src/components/HeaderNav.tsx | 33 +++++-- src/components/Hero.tsx | 13 ++- src/components/Homepage.tsx | 119 ++++--------------------- src/components/Pages/Page.tsx | 1 + src/components/SplashScreen.tsx | 52 +++++++++++ src/payload-types.ts | 23 ----- 17 files changed, 169 insertions(+), 188 deletions(-) create mode 100644 src/components/SplashScreen.tsx diff --git a/package-lock.json b/package-lock.json index b876761..9722b28 100644 --- a/package-lock.json +++ b/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", diff --git a/package.json b/package.json index a84e52d..7d59963 100644 --- a/package.json +++ b/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" -} \ No newline at end of file + } +} diff --git a/public/assets/css/custom.css b/public/assets/css/custom.css index 5582ce6..9511a6e 100644 --- a/public/assets/css/custom.css +++ b/public/assets/css/custom.css @@ -91,8 +91,7 @@ a { } .mn-sub.open { - max-height: 200px; - overflow: auto !important; + max-height: 1000px; opacity: 1 !important; } html { diff --git a/src/app/(main)/[pageslug]/page.tsx b/src/app/(main)/[pageslug]/page.tsx index 86bcf48..59623a0 100644 --- a/src/app/(main)/[pageslug]/page.tsx +++ b/src/app/(main)/[pageslug]/page.tsx @@ -24,16 +24,12 @@ function Loading() { return ( <>
- {/* */}
- {/* */}
- {/* Section */} - {/* End Section */} ); } diff --git a/src/app/(main)/home-bg-video/page.tsx b/src/app/(main)/home-bg-video/page.tsx index 5bffa45..8ac4840 100644 --- a/src/app/(main)/home-bg-video/page.tsx +++ b/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() { diff --git a/src/app/(main)/page.tsx b/src/app/(main)/page.tsx index cc47c27..78e456b 100644 --- a/src/app/(main)/page.tsx +++ b/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() { diff --git a/src/collections/Pages.ts b/src/collections/Pages.ts index 766bf8b..533af53 100644 --- a/src/collections/Pages.ts +++ b/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", diff --git a/src/components/Blocks/RenderBlocks.tsx b/src/components/Blocks/RenderBlocks.tsx index 646d7d1..37a92e3 100644 --- a/src/components/Blocks/RenderBlocks.tsx +++ b/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<{ diff --git a/src/components/Facts.tsx b/src/components/Facts.tsx index 622d088..7f4f920 100644 --- a/src/components/Facts.tsx +++ b/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 */}
{/* Numbers Item */} - {numbers.map((number, index) => ( -
-
-
{number.title}
-
{number.descr}
+ {features5.map((elm: any, i: number) => ( +
+
+
+ +
+

{elm.title}

+
{elm.description}
))} diff --git a/src/components/Footer.tsx b/src/components/Footer.tsx index e36c532..2469426 100644 --- a/src/components/Footer.tsx +++ b/src/components/Footer.tsx @@ -16,20 +16,13 @@ export default function Footer() { return ( <>
-
-
+
+
Cochise Oncology Logo - Cochise Oncology Logo @@ -38,7 +31,7 @@ export default function Footer() {
{/* Footer Widget */} -
+

Business Hours

  • @@ -48,7 +41,7 @@ export default function Footer() {
{/* End Footer Widget */} {/* Footer Widget */} -
+

Contact Us

    @@ -56,7 +49,7 @@ export default function Footer() {
{/* End Footer Widget */} {/* Footer Widget */} -
+

Legal & Press

    {footerLinks.map((elm: any, i: number) => ( diff --git a/src/components/Header.tsx b/src/components/Header.tsx index 6e67ba6..839cac2 100644 --- a/src/components/Header.tsx +++ b/src/components/Header.tsx @@ -43,16 +43,7 @@ export default function Header1Multipage({ links }: any) { {/* Languages */} {/* */} {/* End Languages */} -
  • - - - Request Consultation - - - -
    • +
{/* End Main Menu */} diff --git a/src/components/HeaderNav.tsx b/src/components/HeaderNav.tsx index 5f138c0..d19931f 100644 --- a/src/components/HeaderNav.tsx +++ b/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} -
    +
      {link.child.map((subLink: any, subLinkIdx: number) => (
    • - {!Array.isArray(subLink?.child) && {subLink?.text}} - + {!Array.isArray(subLink?.child) && ( + toggleMobileMenu()}> + {subLink?.text} + + )} {Array.isArray(subLink?.child) && ( <> { e.preventDefault(); - // toggleDropdown(); + toggleDropdown([link.text, subLink.text]); }} > {subLink.text} -
        +
          {subLink.child.map((subLink2: any, subLinkIdx2: number) => (
        • - {subLink2?.text} + toggleMobileMenu()}> + {subLink2?.text} +
          • ))}
        diff --git a/src/components/Hero.tsx b/src/components/Hero.tsx index cb55330..d26fe6b 100644 --- a/src/components/Hero.tsx +++ b/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(null); @@ -68,13 +69,11 @@ export default function Hero6() { > Learn More - - Get In Touch - + + +
{/* End Home Section Text */} diff --git a/src/components/Homepage.tsx b/src/components/Homepage.tsx index 1ec9a80..4e65442 100644 --- a/src/components/Homepage.tsx +++ b/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 ? ( - <> - {" "} - - - Learn more - - - - + <> ) : ( <> {" "} - - - Learn more - - + +
+ Find more about Radixact + +
)} @@ -120,12 +102,16 @@ export default function homepage({ onePage = false, dark = false }) {
-
+
+
+
+
+

Why choose Cochise Oncology?

+

+ 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. +

+
@@ -164,73 +150,6 @@ export default function homepage({ onePage = false, dark = false }) { {/* End Right Column */}
-
-
-
-
-
-

Why choose Cochise Oncology?

-

- 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. -

-
-
- {/* Features Grid */} - - {/* End Features Grid */} -
- -
-
- -
-
-
-
- {/* Decoration Circles */} -
-
- {/* End Decoration Circles */} -
-
-
-
-

Like our creative works?

-

- Quisque posuere mollis ullamcorper. Ut eget metus lorem ipsum posuere eget at ex. Aenean consequat - vitae lorem in vehicula. -

-
-
- {onePage ? ( - <> - - Start a project - - - ) : ( - <> - - View all works - - - )} -
-
-
-
-
@@ -243,12 +162,6 @@ export default function homepage({ onePage = false, dark = false }) {
-
- -
-
- {dark ? : } -
); } diff --git a/src/components/Pages/Page.tsx b/src/components/Pages/Page.tsx index 60012c3..f908cdd 100644 --- a/src/components/Pages/Page.tsx +++ b/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(); } diff --git a/src/components/SplashScreen.tsx b/src/components/SplashScreen.tsx new file mode 100644 index 0000000..53be7ce --- /dev/null +++ b/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 = ({ 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 ? ( +
+ +
+ ) : ( + <> + ); +}; + +export default SplashScreen; diff --git a/src/payload-types.ts b/src/payload-types.ts index 56dede4..80374ba 100644 --- a/src/payload-types.ts +++ b/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 { id?: T; blockName?: T; }; - imageSliderBlock?: - | T - | { - images?: - | T - | { - image?: T; - id?: T; - }; - id?: T; - blockName?: T; - }; }; meta?: | T