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

Compare commits

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

No commits in common. "4a3b9a0a227775208644778f0fff195ff96b97d9" and "debfdcfb335ac78232051163ab951decd133f1e4" have entirely different histories.
4a3b9a0a22 ... debfdcfb33

11 changed files with 7467 additions and 10589 deletions
Show Stats Expand all files Collapse all files

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

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

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

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 43 KiB

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

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

3
src/components/Header.tsx
View File

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

19
src/components/HeaderNav.tsx
View File

@ -4,11 +4,10 @@ import addScrollspy from "@/utils/addScroll";
import { init_classic_menu_resize } from "@/utils/menuToggle";
import { scrollToElement } from "@/utils/scrollToElement";
import { closeMobileMenu, toggleMobileMenu } from "@/utils/toggleMobileMenu";
import { Fragment, useEffect, useRef, useState } from "react";
import { useEffect, useRef, useState } from "react";
import Link from "next/link";
import { navMenuData } from "@/data/menu";
export default function HeaderNav({ links, animateY = false }: { links: typeof navMenuData; animateY?: boolean }) {
export default function HeaderNav({ links, animateY = false }: any) {
const [isDropdownOpen, setIsDropdownOpen] = useState([""]);
const dropdownRef = useRef(null);
@ -37,9 +36,8 @@ export default function HeaderNav({ links, animateY = false }: { links: typeof n
return (
<>
{links[0].href?.includes("/") &&
links.map((link, index) => (
<Fragment key={index}>
<li>
links.map((link: any, index: any) => (
<li key={index}>
{!Array.isArray(link?.child) && (
<Link href={link.href}>
{animateY ? (
@ -73,10 +71,7 @@ export default function HeaderNav({ links, animateY = false }: { links: typeof n
<>
<Link href={subLink?.href ?? "#"} className="mn-has-sub">
{subLink.text}{" "}
<i
className="mi-chevron-down"
onClick={() => toggleDropdown([link.text, 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"}`}>
@ -96,10 +91,6 @@ export default function HeaderNav({ links, animateY = false }: { links: typeof n
</>
)}
</li>
{index != links.length - 1 && (
<div className="text-white h-[25px] mx-2 opacity-[0.3]" style={{ border: "1px solid white" }} />
)}
</Fragment>
))}
{!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>
<source src="/assets/videos/cochise.webm" type="video/webm" />
</video>
<div className="bg-video-overlay bg-black opacity-[0.7]" />
<div className="bg-video-overlay bg-dark-alpha-50" />
</div>
{/* Home Section Content */}
<div className="home-content">
<div className="row">
{/* Home Section Text */}
<div className="col-md-10 offset-md-1">
<h2 className="hs-title-3 m-0 p-0">Healing Begins Here</h2>
<h1 className="hs-title-2 m-0 p-0">Cochise Oncology</h1>
<p className="text-2xl">Southern Arizona’s Only Complete Cancer Treatment Center in Sierra Vista.</p>
<h2 className="hs-title-11">Healing Begins Here</h2>
<h1 className="hs-title-9">Cochise Oncology</h1>
<p>Southern Arizona’s Only Complete Cancer Treatment Center in Sierra Vista.</p>
<a
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]"
@ -36,6 +36,14 @@ export default function Hero() {
</div>
</div>
{/* 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>
</section>
);

130
src/components/Homepage.tsx
View File

@ -1,64 +1,104 @@
import { features4 } from "@/data/features";
import Image from "next/image";
import Link from "next/link";
import Cta3 from "./cta3";
import Testimonials from "./Testimonials";
import About from "./About";
import Contact from "./Contacts/Contact";
export default function homepage({ dark = false }) {
export default function homepage({ onePage = false, dark = false }) {
return (
<>
<hr className={`mt-0 mb-0 ${dark ? "white" : ""} `} />
<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>
<section className={`page-section scrollSpysection ${dark ? "bg-dark-1 light-content" : ""} `} id="about">
<div className="container position-relative">
<div className="row">
{/* Section Text */}
<div className="col-lg-6 d-flex align-items-center order-first order-lg-last mb-md-60 mb-sm-40"></div>
{/* End Section Text */}
</div>
</div>
</section>
<section className="mb-5 w-full min-h-[50vh]">
<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
<div className="col-lg-6 d-flex align-items-center order-first order-lg-last mb-md-60 mb-sm-40">
<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="w-[300px] h-[300px] bg-green-300 rounded-full flex items-center justify-center">
Medical Oncology
<div className="features-list-text">{feature.text}</div>
</div>
<div className="w-[300px] h-[300px] bg-green-300 rounded-full flex items-center justify-center">
Skin Cancer
))}
{/* 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 */}
{/* 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>
</section>
{/* <section className="mb-5 w-full">
<section className="mb-5 w-full">
<Testimonials />
</section> */}
</section>
<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" />
{/* Mobile Overlay */}
@ -85,6 +125,10 @@ export default function homepage({ dark = false }) {
with excellent training, developing multidisciplinary collaborations, and using the latest technology
available in the most comfortable environment.
</p>
{/* Features List */}
<Cta3 />
{/* End Features List */}
</div>
</div>
</div>

7
src/utils/changeHeaderOnScroll.ts
View File

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

17753
yarn.lock
View File

File diff suppressed because it is too large Load Diff