rankrunners-dev/next-cochise
4
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Compare commits

base: rankrunners-dev:debfdcfb335ac78232051163ab951decd133f1e4
Branches Tags
rankrunners-dev:main
rankrunners-dev:dev
...
compare: rankrunners-dev:4a3b9a0a227775208644778f0fff195ff96b97d9
Branches Tags
rankrunners-dev:main
rankrunners-dev:dev

3 Commits
debfdcfb33 ... 4a3b9a0a22

Author SHA1 Message Date
RizqiSyahrendra
4a3b9a0a22 fix: header and nav types 2025-02-28 10:49:46 +07:00
RizqiSyahrendra
0bfe900bab Merge branch 'main' into dev 2025-02-28 10:23:41 +07:00
Val
9d8b4e4219 feat: update homepage 2025-02-28 01:30:56 +07:00
11 changed files with 10585 additions and 7463 deletions
Show Stats Expand all files Collapse all files

2
package.json
View File

@ -66,4 +66,4 @@
"typescript": "^5" "typescript": "^5"
}, },
"packageManager": "yarn@4.6.0" "packageManager": "yarn@4.6.0"
} }

11
public/assets/css/style.css
View File

@ -1164,8 +1164,8 @@ hr.thick {
} }
.hs-title-2 { .hs-title-2 {
margin-top: 0; margin-top: 0;
font-size: 120px !important; font-size: 100px !important;
font-weight: 400 !important; font-weight: 700 !important;
line-height: 1.2 !important; line-height: 1.2 !important;
letter-spacing: -0.025em !important; letter-spacing: -0.025em !important;
} }
@ -1181,8 +1181,9 @@ hr.thick {
font-size: 38px !important; font-size: 38px !important;
font-weight: 400 !important; font-weight: 400 !important;
line-height: 1.3 !important; line-height: 1.3 !important;
letter-spacing: 0.3em !important; letter-spacing: 0.1em !important;
text-transform: uppercase !important; text-transform: uppercase !important;
color: #e3b19b;
} }
.hs-title-3a { .hs-title-3a {
margin-top: 0 !important; margin-top: 0 !important;
@ -4319,15 +4320,17 @@ a.logo:hover {
backdrop-filter: blur(10px); backdrop-filter: blur(10px);
} }
.main-nav.dark .inner-nav ul > li > a { .main-nav.dark .inner-nav ul > li > a {
font-size: 16px; font-size: 18px;
color: #fff; color: #fff;
opacity: 0.78; opacity: 0.78;
padding: 10px;
} }
.main-nav.dark .inner-nav ul > li > a:hover, .main-nav.dark .inner-nav ul > li > a:hover,
.main-nav.dark .inner-nav ul > li > a.active { .main-nav.dark .inner-nav ul > li > a.active {
color: #fff; color: #fff;
opacity: 1 !important; opacity: 1 !important;
} }
.main-nav.dark .inner-nav ul li .mn-sub li a { .main-nav.dark .inner-nav ul li .mn-sub li a {
opacity: 1; opacity: 1;
} }

BIN
public/assets/images/Cochise_New-service_Radixact-Announcement-900x900-1-1-768x768.webp Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 43 KiB

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

@ -11,7 +11,7 @@ export default function HomeBgVideo() {
<div className="theme-main"> <div className="theme-main">
<div className="page" id="top"> <div className="page" id="top">
<main id="main"> <main id="main">
<div className="home-section bg-dark-1 bg-dark-alpha-60 light-content parallax-5 bg-[url(/assets/images/full-width-images/section-bg-13.jpeg)]"> <div className="home-section bg-dark-1 bg-dark-alpha-60 light-content parallax-5 bg-[url(/assets/images/full-width-images/section-bg-13.jpeg)]">
<Hero /> <Hero />
</div> </div>
</main> </main>

9
src/app/(main)/layout.tsx
View File

@ -15,7 +15,9 @@ import "react-modal-video/css/modal-video.css";
import "photoswipe/dist/photoswipe.css"; import "photoswipe/dist/photoswipe.css";
import "tippy.js/dist/tippy.css"; import "tippy.js/dist/tippy.css";
import "@public/assets/css/styles.css"; import "@public/assets/css/styles.css";
import { Roboto } from "next/font/google";
const roboto = Roboto({ subsets: ["latin"] });
export default function MainLayout({ export default function MainLayout({
children, children,
}: Readonly<{ }: Readonly<{
@ -51,7 +53,7 @@ export default function MainLayout({
}, []); }, []);
return ( return (
<html lang="en" className="no-mobile no-touch"> <html lang="en" className={`no-mobile no-touch ${roboto.className}`}>
<body className="appear-animate body"> <body className="appear-animate body">
<div className="theme-slick"> <div className="theme-slick">
<div className="page" id="top"> <div className="page" id="top">
@ -59,12 +61,7 @@ export default function MainLayout({
<Header links={navMenuData} /> <Header links={navMenuData} />
</nav> </nav>
<main id="main">{children}</main> <main id="main">{children}</main>
{/* <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 />
{/* </footer> */}
</div> </div>
</div> </div>
</body> </body>

3
src/components/Header.tsx
View File

@ -1,9 +1,10 @@
import HeaderNav from "@/components/HeaderNav"; import HeaderNav from "@/components/HeaderNav";
import { navMenuData } from "@/data/menu";
import { toggleMobileMenu } from "@/utils/toggleMobileMenu"; import { toggleMobileMenu } from "@/utils/toggleMobileMenu";
import Image from "next/image"; import Image from "next/image";
import Link from "next/link"; import Link from "next/link";
export default function Header1Multipage({ links }: any) { export default function Header({ links }: { links: typeof navMenuData }) {
return ( return (
<div className="main-nav-sub full-wrapper"> <div className="main-nav-sub full-wrapper">
{/* Logo (* Add your text or image to the link tag. Use SVG or PNG image format. {/* Logo (* Add your text or image to the link tag. Use SVG or PNG image format.

111
src/components/HeaderNav.tsx
View File

@ -4,10 +4,11 @@ import addScrollspy from "@/utils/addScroll";
import { init_classic_menu_resize } from "@/utils/menuToggle"; import { init_classic_menu_resize } from "@/utils/menuToggle";
import { scrollToElement } from "@/utils/scrollToElement"; import { scrollToElement } from "@/utils/scrollToElement";
import { closeMobileMenu, toggleMobileMenu } from "@/utils/toggleMobileMenu"; import { closeMobileMenu, toggleMobileMenu } from "@/utils/toggleMobileMenu";
import { useEffect, useRef, useState } from "react"; import { Fragment, useEffect, useRef, useState } from "react";
import Link from "next/link"; import Link from "next/link";
import { navMenuData } from "@/data/menu";
export default function HeaderNav({ links, animateY = false }: any) { export default function HeaderNav({ links, animateY = false }: { links: typeof navMenuData; animateY?: boolean }) {
const [isDropdownOpen, setIsDropdownOpen] = useState([""]); const [isDropdownOpen, setIsDropdownOpen] = useState([""]);
const dropdownRef = useRef(null); const dropdownRef = useRef(null);
@ -36,61 +37,69 @@ export default function HeaderNav({ links, animateY = false }: any) {
return ( return (
<> <>
{links[0].href?.includes("/") && {links[0].href?.includes("/") &&
links.map((link: any, index: any) => ( links.map((link, index) => (
<li key={index}> <Fragment key={index}>
{!Array.isArray(link?.child) && ( <li>
<Link href={link.href}> {!Array.isArray(link?.child) && (
{animateY ? ( <Link href={link.href}>
<span className="btn-animate-y"> {animateY ? (
<span className="btn-animate-y-1">{link.text}</span> <span className="btn-animate-y">
<span className="btn-animate-y-2" aria-hidden="true"> <span className="btn-animate-y-1">{link.text}</span>
{link.text} <span className="btn-animate-y-2" aria-hidden="true">
{link.text}
</span>
</span> </span>
</span> ) : (
) : ( link.text
link.text )}
)}
</Link>
)}
{Array.isArray(link?.child) && (
<>
<Link href={link?.href ?? "#"} className="mn-has-sub">
{link.text} <i className="mi-chevron-down" onClick={() => toggleDropdown([link.text])} />
</Link> </Link>
)}
<ul className={`mn-sub to-right ${isDropdownOpen.includes(link.text) && "open"}`} ref={dropdownRef}> {Array.isArray(link?.child) && (
{link.child.map((subLink: any, subLinkIdx: number) => ( <>
<li key={subLinkIdx}> <Link href={link?.href ?? "#"} className="mn-has-sub">
{!Array.isArray(subLink?.child) && ( {link.text} <i className="mi-chevron-down" onClick={() => toggleDropdown([link.text])} />
<Link href={subLink?.href} onClick={() => toggleMobileMenu()}> </Link>
{subLink?.text}
</Link> <ul className={`mn-sub to-right ${isDropdownOpen.includes(link.text) && "open"}`} ref={dropdownRef}>
)} {link.child.map((subLink: any, subLinkIdx: number) => (
{Array.isArray(subLink?.child) && ( <li key={subLinkIdx}>
<> {!Array.isArray(subLink?.child) && (
<Link href={subLink?.href ?? "#"} className="mn-has-sub"> <Link href={subLink?.href} onClick={() => toggleMobileMenu()}>
{subLink.text}{" "} {subLink?.text}
<i className="mi-chevron-down" onClick={() => toggleDropdown([link.text, subLink.text])} />
</Link> </Link>
)}
{Array.isArray(subLink?.child) && (
<>
<Link href={subLink?.href ?? "#"} className="mn-has-sub">
{subLink.text}{" "}
<i
className="mi-chevron-down"
onClick={() => toggleDropdown([link.text, subLink.text])}
/>
</Link>
<ul className={`mn-sub to-right ${isDropdownOpen.includes(subLink.text) && "open"}`}> <ul className={`mn-sub to-right ${isDropdownOpen.includes(subLink.text) && "open"}`}>
{subLink.child.map((subLink2: any, subLinkIdx2: number) => ( {subLink.child.map((subLink2: any, subLinkIdx2: number) => (
<li key={subLinkIdx2}> <li key={subLinkIdx2}>
<Link href={subLink2?.href} onClick={() => toggleMobileMenu()}> <Link href={subLink2?.href} onClick={() => toggleMobileMenu()}>
{subLink2?.text} {subLink2?.text}
</Link> </Link>
</li> </li>
))} ))}
</ul> </ul>
</> </>
)} )}
</li> </li>
))} ))}
</ul> </ul>
</> </>
)}
</li>
{index != links.length - 1 && (
<div className="text-white h-[25px] mx-2 opacity-[0.3]" style={{ border: "1px solid white" }} />
)} )}
</li> </Fragment>
))} ))}
{!links[0].href?.includes("/") && {!links[0].href?.includes("/") &&

16
src/components/Hero.tsx
View File

@ -14,16 +14,16 @@ export default function Hero() {
<video ref={videoRef} className="bg-video" preload="auto" autoPlay muted loop> <video ref={videoRef} className="bg-video" preload="auto" autoPlay muted loop>
<source src="/assets/videos/cochise.webm" type="video/webm" /> <source src="/assets/videos/cochise.webm" type="video/webm" />
</video> </video>
<div className="bg-video-overlay bg-dark-alpha-50" /> <div className="bg-video-overlay bg-black opacity-[0.7]" />
</div> </div>
{/* Home Section Content */} {/* Home Section Content */}
<div className="home-content"> <div className="home-content">
<div className="row"> <div className="row">
{/* Home Section Text */} {/* Home Section Text */}
<div className="col-md-10 offset-md-1"> <div className="col-md-10 offset-md-1">
<h2 className="hs-title-11">Healing Begins Here</h2> <h2 className="hs-title-3 m-0 p-0">Healing Begins Here</h2>
<h1 className="hs-title-9">Cochise Oncology</h1> <h1 className="hs-title-2 m-0 p-0">Cochise Oncology</h1>
<p>Southern Arizona’s Only Complete Cancer Treatment Center in Sierra Vista.</p> <p className="text-2xl">Southern Arizona’s Only Complete Cancer Treatment Center in Sierra Vista.</p>
<a <a
href="/contact" href="/contact"
className="btn btn-mod btn-border-w btn-large btn-round ms-1 me-1 mt-2 align-middle w-full md:w-1/4 hover:opacity-[0.5]" className="btn btn-mod btn-border-w btn-large btn-round ms-1 me-1 mt-2 align-middle w-full md:w-1/4 hover:opacity-[0.5]"
@ -36,14 +36,6 @@ export default function Hero() {
</div> </div>
</div> </div>
{/* End Home Section Content */} {/* End Home Section Content */}
{/* Scroll Down */}
<div className="local-scroll scroll-down-wrap" data-wow-offset={0}>
<a href="#about" className="scroll-down">
<i className="mi-chevron-down" />
<span className="visually-hidden">Scroll to the next section</span>
</a>
</div>
{/* End Scroll Down */}
</div> </div>
</section> </section>
); );

134
src/components/Homepage.tsx
View File

@ -1,104 +1,64 @@
import { features4 } from "@/data/features";
import Image from "next/image"; import Image from "next/image";
import Link from "next/link"; import Link from "next/link";
import Cta3 from "./cta3";
import Testimonials from "./Testimonials";
import About from "./About"; import About from "./About";
import Contact from "./Contacts/Contact"; import Contact from "./Contacts/Contact";
export default function homepage({ onePage = false, dark = false }) { export default function homepage({ dark = false }) {
return ( return (
<> <>
<hr className={`mt-0 mb-0 ${dark ? "white" : ""} `} /> <hr className={`mt-0 mb-0 ${dark ? "white" : ""} `} />
<section className={`page-section scrollSpysection ${dark ? "bg-dark-1 light-content" : ""} `} id="about"> <section
className={`page-section scrollSpysection relative ${dark ? "bg-dark-1 light-content" : ""} `}
id="about"
>
<div className="w-full absolute top-[-5vw] z-[99] flex justify-center">
<div className="bg-white h-full flex justify-center p-8 gap-3 rounded-xl shadow-xl">
<Image
src="/assets/images/Cochise_New-service_Radixact-Announcement-900x900-1-1-768x768.webp"
width={450}
height={0}
alt=""
/>
<Image src="/assets/images/cochise-welcome.png" width={500} height={0} alt="" />
</div>
</div>
<div className="container position-relative"> <div className="container position-relative">
<div className="row"> <div className="row">
{/* Section Text */} {/* Section Text */}
<div className="col-lg-6 d-flex align-items-center order-first order-lg-last mb-md-60 mb-sm-40"> <div className="col-lg-6 d-flex align-items-center order-first order-lg-last mb-md-60 mb-sm-40"></div>
<div className="w-100 wow fadeInUp">
<h2 className="section-caption-slick mb-30 mb-sm-20">About Oncology</h2>
<h3 className="section-title mb-30">Begin your path to healing with Cochise Oncology.</h3>
<p className="text-gray mb-40">
Our dedicated team in Sierra Vista, AZ is here to support you with hope, strength, and courage. We
offer personalized cancer care using innovative treatments in our state-of-the-art facility. Take the
first step towards comprehensive, patient-focused treatment by scheduling a consultation. Let us
listen to your needs, answer your questions, and create a tailored plan for your journey. Fill out our
form to connect with our compassionate experts and discover how Cochise Oncology can stand with you in
your fight against cancer.
</p>
{/* Features List */}
<div className="row features-list mt-n20 mb-50 mb-sm-30">
{/* Features List Item */}
{features4.map((feature, index) => (
<div key={index} className="col-sm-6 col-lg-12 col-xl-6 d-flex mt-20">
<div className="features-list-icon">
<i className="mi-check" />
</div>
<div className="features-list-text">{feature.text}</div>
</div>
))}
{/* End Features List Item */}
</div>
{/* End Features List */}
<div className="local-scroll wch-unset">
{onePage ? (
<>
<a href="#contact" className="btn btn-mod btn-color btn-large btn-circle btn-hover-anim mb-xs-10">
<span>Contact us</span>
</a>
</>
) : (
<>
<Link
href={`/contact`}
className="btn btn-mod btn-color btn-large btn-circle btn-hover-anim mb-xs-10"
>
<span>Contact us</span>
</Link>
</>
)}
{onePage ? (
<></>
) : (
<>
{" "}
<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>
</>
)}
</div>
</div>
</div>
{/* End Section Text */} {/* End Section Text */}
{/* Image */}
<div className="col-lg-6 d-flex align-items-center">
<div className="w-100 pe-lg-5">
<div className="composition-5">
<div className="composition-5-decoration opacity-065">
<Image src="/assets/images/demo-slick/decoration-1.svg" alt="" width={228} height={228} />
</div>
<Image
src="/assets/images/cochise-welcome.png"
alt="Image Description"
width={550}
height={600}
className="wow scaleOutIn"
data-wow-offset={200}
/>
</div>
</div>
</div>
{/* End Images */}
</div> </div>
</div> </div>
</section> </section>
<section className="mb-5 w-full"> <section className="mb-5 w-full min-h-[50vh]">
<Testimonials /> <section className="bg-scroll relative">
<div className="decoration-14" />
<div className="decoration-15" />
<div className="decoration-16 opacity-035 d-none d-md-block">
<Image src="/assets/images/demo-slick/decoration-2.svg" alt="Image Description" width={128} height={228} />
</div>
<div className="decoration-17 opacity-035 d-none d-md-block">
<Image src="/assets/images/demo-slick/decoration-2.svg" alt="Image Description" width={128} height={228} />
</div>
</section>
<div className="pt-[12vw] w-full flex justify-center gap-5">
<div className="w-[300px] h-[300px] bg-gradient-to-br from-white via-yellow-200 to-yellow-400 rounded-full flex items-center justify-center overflow-auto relative">
<div className="bg-[url('/assets/images/cochise-welcome.png')] h-full w-full bg-[left] bg-cover text-center align-middle flex items-center justify-center opacity-[0.7]"></div>
<p className="text-[36px] text-center p-0 m-0 absolute text-white font-semibold tracking-tight">
Radiation Oncology
</p>
</div>
<div className="w-[300px] h-[300px] bg-green-300 rounded-full flex items-center justify-center">
Medical Oncology
</div>
<div className="w-[300px] h-[300px] bg-green-300 rounded-full flex items-center justify-center">
Skin Cancer
</div>
</div>
</section> </section>
{/* <section className="mb-5 w-full">
<Testimonials />
</section> */}
<section className="page-section bg-scroll light-content bg-[url(/assets/images/demo-modern/section-bg-3.jpeg)]"> <section className="page-section bg-scroll light-content bg-[url(/assets/images/demo-modern/section-bg-3.jpeg)]">
<div className="bg-overlay bg-gradient-dark-alpha-2 d-none d-md-block" /> <div className="bg-overlay bg-gradient-dark-alpha-2 d-none d-md-block" />
{/* Mobile Overlay */} {/* Mobile Overlay */}
@ -125,10 +85,6 @@ export default function homepage({ onePage = false, dark = false }) {
with excellent training, developing multidisciplinary collaborations, and using the latest technology with excellent training, developing multidisciplinary collaborations, and using the latest technology
available in the most comfortable environment. available in the most comfortable environment.
</p> </p>
{/* Features List */}
<Cta3 />
{/* End Features List */}
</div> </div>
</div> </div>
</div> </div>

7
src/utils/changeHeaderOnScroll.ts
View File

@ -1,16 +1,13 @@
export const headerChangeOnScroll = () => { export const headerChangeOnScroll = () => {
const mainNav = document.querySelector(".main-nav"); const mainNav = document.querySelector(".main-nav");
const navLogoWrapLogo = document.querySelector(".nav-logo-wrap .logo");
const lightAfterScroll = document.querySelector(".light-after-scroll"); const lightAfterScroll = document.querySelector(".light-after-scroll");
if (window.scrollY > 0) { if (window.scrollY > 0) {
mainNav?.classList.remove("transparent"); mainNav?.classList.remove("transparent");
mainNav?.classList.add("small-height", "body-scrolled"); mainNav?.classList.add("body-scrolled");
if (navLogoWrapLogo) navLogoWrapLogo.classList.add("small-height");
if (lightAfterScroll) lightAfterScroll.classList.remove("dark"); if (lightAfterScroll) lightAfterScroll.classList.remove("dark");
} else if (window.scrollY === 0) { } else if (window.scrollY === 0) {
mainNav?.classList.add("transparent"); mainNav?.classList.add("transparent");
mainNav?.classList.remove("small-height", "body-scrolled"); mainNav?.classList.remove("body-scrolled");
if (navLogoWrapLogo) navLogoWrapLogo.classList.remove("small-height");
if (lightAfterScroll) lightAfterScroll.classList.add("dark"); if (lightAfterScroll) lightAfterScroll.classList.add("dark");
} }
}; };

17753
yarn.lock
View File

File diff suppressed because it is too large Load Diff