fix: navbar

This commit is contained in:
Val 2025-02-11 23:59:16 +07:00
parent 269a89be71
commit fb65a89d84
17 changed files with 169 additions and 188 deletions

15
package-lock.json generated
View File

@ -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",

View File

@ -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"
}
}
}

View File

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

View File

@ -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 */}
</>
);
}

View File

@ -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() {

View File

@ -2,6 +2,24 @@ import Homepage from "./home-bg-video/page";
export const metadata = {
title: "HomePage - Cochise Oncology",
description: "Resonance &mdash; 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 &mdash; 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 &mdash; One & Multi Page React Nextjs Creative Template",
image: "https://www.cochiseoncology.com/twitter-image.jpg",
},
};
export default function Home() {

View File

@ -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",

View File

@ -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<{

View File

@ -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) => (
<div
key={index}
className="col-sm-6 col-xl-3 d-flex align-items-stretch mt-30"
>
<div className="number-2-item">
<div className="number-2-title">{number.title}</div>
<div className="number-2-descr">{number.descr}</div>
{features5.map((elm: any, i: number) => (
<div key={i} className="col-sm-6 col-xl-3 d-flex align-items-stretch">
<div className="alt-features-item box-shadow text-center mt-30">
<div className="alt-features-icon mb-10 color-primary-1">
<svg
width={24}
height={24}
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>
))}

View File

@ -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="col-md-4 col-lg-3 text-gray mb-sm-50">
<div className="row pb-sm-80 pb-xs-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}
height={56}
className="light-mode-logo"
/>
<Image
src="/assets/images/demo-slick/logo-dark.webp"
alt="Cochise Oncology Logo"
width={126}
width={250}
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) => (

View File

@ -43,16 +43,7 @@ export default function Header1Multipage({ links }: any) {
{/* Languages */}
{/* <LanguageSelect /> */}
{/* End Languages */}
<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>
<li></li>
</ul>
</div>
{/* End Main Menu */}

View File

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

View File

@ -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
href="#contact"
className="btn btn-mod btn-w btn-large btn-round ms-1 me-1 mt-2 align-middle"
data-btn-animate="y"
>
Get In Touch
</a>
<Link href="/radixact">
<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">
<span>Request Consultant</span>
</button>
</Link>
</div>
</div>
{/* End Home Section Text */}

View File

@ -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
href={`/slick-about${dark ? "-dark" : ""}`}
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>
<Link href={`/radixact`} className="link-hover-anim ms-2 ms-sm-5 me-2" data-link-animate="y">
<div className="link-strong">
Find more about Radixact
<i className="mi-arrow-right ml-4" aria-hidden="true"></i>
</div>
</Link>
</>
)}
@ -120,12 +102,16 @@ export default function homepage({ onePage = false, dark = false }) {
</div>
</div>
</section>
<section
className={`page-section ${dark ? "bg-dark-1 bg-dark-alpha light-content" : "bg-light-alpha-90"} bg-scroll`}
style={{
backgroundImage: "url(/assets/images/demo-slick/section-bg-1.jpg)",
}}
>
<section className={`small-section bg-dark ps-4 ps-lg-0 pe-4 pe-lg-0 position-relative overflow-hidden`}>
<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>
</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>
</>
);
}

View File

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

View File

@ -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;

View File

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