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

dev #2

Merged
RizqiSyahrendra merged 4 commits from dev into main 2025-02-25 08:41:23 +00:00
Conversation 0 Commits 4 Files Changed 46 +473 -290
34 changed files with 473 additions and 290 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit 56c2571329 - Show all commits

6
public/assets/css/demo-slick/demo-slick.css
View File

@ -64,11 +64,9 @@
--gradient-gray-light-1: linear-gradient(0deg, #f7f9fc 0%, #fff 100%);
--gradient-gray-light-2: linear-gradient(0deg, #fff 0%, #f7f9fc 100%);
--border-radius-default: 10px;
--box-shadow:
0px 5px 10px 0px rgba(30, 36, 50, 0.05), 0px 1px 1px 0px rgba(30, 36, 50, 0.03),
--box-shadow: 0px 5px 10px 0px rgba(30, 36, 50, 0.05), 0px 1px 1px 0px rgba(30, 36, 50, 0.03),
0px 3px 5px 0px rgba(30, 36, 50, 0.03);
--box-shadow-strong:
0px 5px 10px 0px rgba(30, 36, 50, 0.08), 0px 1px 1px 0px rgba(30, 36, 50, 0.06),
--box-shadow-strong: 0px 5px 10px 0px rgba(30, 36, 50, 0.08), 0px 1px 1px 0px rgba(30, 36, 50, 0.06),
0px 3px 5px 0px rgba(30, 36, 50, 0.06);
--box-shadow-block: 0px 10px 30px 0px rgba(30, 36, 50, 0.07), 0px 0px 1px 0px rgba(30, 36, 50, 0.1);
--box-shadow-block-strong: 0px 15px 50px 0px rgba(30, 36, 50, 0.14), 0px 0px 1px 0px rgba(30, 36, 50, 0.15);

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

@ -4146,7 +4146,6 @@ a.logo:hover {
}
/* Mobile nav menu sub */
.mobile-on .mn-has-sub > .mi-chevron-down {
display: block;
width: 24px;
@ -4321,6 +4320,7 @@ a.logo:hover {
backdrop-filter: blur(10px);
}
.main-nav.dark .inner-nav ul > li > a {
font-size: 16px;
color: #fff;
opacity: 0.78;
}
@ -4373,8 +4373,8 @@ a.logo:hover {
*/
.main-nav.transparent {
/* background: transparent !important; */
background: linear-gradient(to right, #64b3b4, #a8dcca) !important;
background: transparent !important;
/* background: linear-gradient(to right, #64b3b4, #a8dcca) !important; */
box-shadow: none;
}
.main-nav.js-transparent {
@ -6461,8 +6461,7 @@ img.services-image {
overflow: hidden;
}
.team-item-image img {
width: 300px;
height: 400px;
height: 380px;
transition: all 0.4s ease;
object-fit: cover;
}

54
src/app/(main)/biography/[slug]/page.tsx
View File

@ -2,23 +2,63 @@ import { BeforeFooterBlock } from "@/components/Blocks/BeforeFooter";
import { fetchTeamDetail } from "@/services/payload/team";
import { RichText } from "@payloadcms/richtext-lexical/react";
import Image from "next/image";
import { Metadata } from "next/types";
import { Suspense } from "react";
export async function generateMetadata({ params }: { params: Promise<{ slug: string }> }): Promise<Metadata> {
const name = "Cochise Oncology";
let title = "Page";
let description = "Page";
let imgUrl = "";
const slug = (await params).slug;
const blog = await fetchTeamDetail(decodeURIComponent(slug));
// check for blog data
if (!!blog) {
title = `${name} Staff - ${blog.data.name}`;
description = `${name} Staff - ${blog.data.name}`;
imgUrl = blog.imgUrl;
}
return {
title: title,
description: description,
openGraph: {
title: title,
description: description,
images: !!imgUrl ? { url: imgUrl } : undefined,
},
};
}
export default async function BiographySinglePage({ params }: { params: Promise<{ slug: string }> }) {
const slug = (await params).slug;
const data = await fetchTeamDetail(slug);
if (!data?.data) return <></>;
const data = await fetchTeamDetail(decodeURIComponent(slug));
if (!data?.data)
return (
<>
<BeforeFooterBlock />
</>
);
return (
<>
<Suspense fallback={<Loading />}>
<>
<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={1300} height={844} alt="" />
<div className="absolute top-0 left-0 w-full h-full opacity-40">
<Image
src={"/assets/images/full-width-images/section-bg-13.jpeg"}
width="0"
height="0"
sizes="100vw"
className="w-full"
alt={"section-bg-13"}
/>
</div>
{/* <!-- End Background Shape --> */}
<div className="container position-relative pt-sm-40 text-center">
<div className="row">
<div className="col-md-10 offset-md-1 col-lg-8 offset-lg-2">
@ -45,8 +85,8 @@ export default async function BiographySinglePage({ params }: { params: Promise<
{/* Post */}
<div className="blog-item mb-80 mb-xs-40">
<div className="blog-item-body">
<div className="mb-40 mb-xs-30">
<Image src={data.imgUrl} alt={data.data.name} width={300} height={500} className="round" />
<div className="mb-40 mb-xs-30 flex justify-center">
<Image src={data.imgUrl} alt={data.data.name} width={500} height={800} className="round" />
</div>
<div>
<RichText data={data.data.biography as any} />

3
src/app/(main)/coba/page.tsx
View File

@ -1,3 +0,0 @@
export default function CobaPage() {
return <></>;
}

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

@ -11,15 +11,6 @@ export default function Home1BGVideoMultiPage() {
<div className="theme-main">
<div className="page" id="top">
<main id="main">
{/* <ParallaxContainer
className="home-section bg-dark-1 bg-dark-alpha-60 light-content parallax-5 scrollSpysection"
style={{
backgroundImage: "url(/assets/images/full-width-images/section-bg-13.jpeg)",
}}
id="home"
>
<Hero6 />
</ParallaxContainer> */}
<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)]">
<Hero6 />
</div>

54
src/app/layout.tsx Normal file
View File

@ -0,0 +1,54 @@
"use client";
import { usePathname } from "next/navigation";
import { useEffect } from "react";
import { init_wow } from "@/utils/initWow";
import { parallaxMouseMovement, parallaxScroll } from "@/utils/parallax";
import { headerChangeOnScroll } from "@/utils/changeHeaderOnScroll";
import "@/app/globals.css";
import "swiper/css";
import "jarallax/dist/jarallax.min.css";
import "swiper/css/effect-fade";
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";
export default function RootLayout({
children,
}: Readonly<{
children: React.ReactNode;
}>) {
const path = usePathname();
useEffect(() => {
init_wow();
parallaxMouseMovement();
const mainNav = document.querySelector(".main-nav");
if (mainNav?.classList.contains("transparent")) {
mainNav.classList.add("js-transparent");
} else if (!mainNav?.classList?.contains("dark")) {
mainNav?.classList.add("js-no-transparent-white");
}
window.addEventListener("scroll", headerChangeOnScroll);
parallaxScroll();
return () => {
window.removeEventListener("scroll", headerChangeOnScroll);
};
}, [path]);
useEffect(() => {
if (typeof window !== "undefined") {
// Import the script only on the client side
// @ts-ignore
import("bootstrap/dist/js/bootstrap.esm").then(() => {
// Module is imported, you can access any exported functionality if
});
}
}, []);
return (
<html lang="en">
<body>{children}</body>
</html>
);
}

72
src/app/not-found.tsx Normal file
View File

@ -0,0 +1,72 @@
"use client";
import Header from "@/components/Header";
import { BeforeFooterBlock } from "@/components/Blocks/BeforeFooter";
import { navMenuData } from "@/data/menu";
import Footer from "@/components/Footer";
import Link from "next/link";
export default function NotFound() {
return (
<div className="theme-slick">
<div className="page" id="top">
<nav className="main-nav dark transparent stick-fixed wow-menubar wch-unset">
<Header links={navMenuData} />
</nav>
<main id="main">
<div className="theme-main">
<div className="page" id="top">
<>
{/* End Navigation Panel */}
<main id="main">
{/* Home Section */}
<section
className="home-section bg-dark-1 bg-dark-alpha-60 light-content parallax-5"
style={{
backgroundImage: "url(/assets/images/full-width-images/section-bg-13.jpeg)",
}}
id="home"
>
<div className="container min-height-100vh d-flex align-items-center pt-100 pb-100 pt-sm-120 pb-sm-120">
{/* Home Section Content */}
<div className="home-content">
<div className="row">
<div className="col-sm-10 offset-sm-1 col-md-8 offset-md-2 col-lg-6 offset-lg-3">
<div className="hs-wrap">
<div className="wow fadeInUp" data-wow-delay=".1s">
<h1 className="hs-title-12 mb-40 mb-sm-30">404</h1>
</div>
<div className="mb-40 mb-sm-30 wow fadeInUp" data-wow-delay=".2s">
<h2 className="section-descr mb-20">
The page you were looking for could not be found.
</h2>
</div>
<div className="local-scroll wow fadeInUp" data-wow-delay=".3s">
<Link href={`/`} className="btn btn-mod btn-w btn-round btn-medium btn-hover-anim">
<i className="mi-arrow-left align-center mr-5" />
<span>Back To Home Page</span>
</Link>
</div>
</div>
</div>
</div>
</div>
{/* End Home Section Content */}
</div>
</section>
{/* End Home Section */}
</main>
</>
</div>
</div>
<BeforeFooterBlock showLinier={false} />
</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>
);
}

18
src/components/About.tsx
View File

@ -32,17 +32,17 @@ export default function About() {
<div className="col-lg-6 col-xl-5 offset-xl-1">
<h4 className="h5">What is Radixact® Radiation Therapy?</h4>
<p className="text-gray">
Radixact® is an advanced form of radiation therapy that targets a wide range of cancers. Radixact® is a form
of TomoTherapy®, a system of CT imaging that provides 3D images of the tumor, then targets it more precisely
to minimize the effects on healthy tissue. It also works from all directions to treat tumors more effectively
from multiple angles.
RadixactRadixact® is a cutting-edge radiation therapy designed to treat a wide variety of cancers with
remarkable precision. This advanced treatment uses TomoTherapy® technology, which combines CT imaging to
create detailed, 3D images of your tumor. These images allow us to focus the radiation exactly where it’s
needed, minimizing the impact on surrounding healthy tissue. Radixact® works from all directions, ensuring
that tumors are treated more effectively from multiple angles.
</p>
<h4 className="h5">What are the Side Effects of Radixact®?</h4>
<p className="text-gray">
Radixact® reduces many of the common after-effects of radiation therapy by protecting healthy tissue. Common
side effects of radiation therapy include fatigue and local skin irritation in the treatment area. Radixact®
decreases the occurrence of these problems by leaving healthy tissue as untouched as possible. Radixact®
patients usually go about their daily lives during treatment with minimal disruption.
At Cochise Oncology, we are proud to be the only cancer treatment center in Southern Arizona offering
Radixact®. With daily CT imaging to guide treatment and its ability to target hard-to-reach or recurring
tumors, Radixact® helps reduce radiation exposure to healthy tissue, resulting in fewer side effects and
better outcomes for our patients.
</p>
</div>
</div>

53
src/components/Blocks/BeforeFooter/index.tsx
View File

@ -5,6 +5,7 @@ export interface BeforeFooterBlockProps {
title?: string;
description?: string;
buttonText?: string;
showLinier?: boolean;
}
const placeholderTitle = "Begin your path to healing with Cochise Oncology";
@ -12,36 +13,38 @@ const placeholderDescription =
"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.";
const placeholderButtonText = "Get Started";
export function BeforeFooterBlock({ title, description, buttonText }: BeforeFooterBlockProps) {
export function BeforeFooterBlock({ title, description, buttonText, showLinier = true }: BeforeFooterBlockProps) {
return (
<section
className="relative py-16 px-6 text-center text-white"
style={{ background: "linear-gradient(to right, #64B3B4, #A8DCCA)" }}
>
<div className="absolute top-0 left-0 w-full overflow-hidden leading-none rotate-180">
<svg
viewBox="0 0 1200 120"
xmlns="http://www.w3.org/2000/svg"
preserveAspectRatio="none"
className="w-full h-[100px]"
>
<path
d="M0,80 C150,110 350,20 600,80 C850,140 1050,40 1200,80 L1200,120 L0,120 Z"
fill="white"
opacity="0.8"
></path>
<path
d="M0,90 C150,130 350,50 600,90 C850,150 1050,60 1200,90 L1200,120 L0,120 Z"
fill="white"
opacity="0.5"
></path>
<path
d="M0,100 C150,150 350,80 600,100 C850,160 1050,90 1200,100 L1200,120 L0,120 Z"
fill="white"
opacity="0.3"
></path>
</svg>
</div>
{showLinier && (
<div className="absolute top-0 left-0 w-full overflow-hidden leading-none rotate-180">
<svg
viewBox="0 0 1200 120"
xmlns="http://www.w3.org/2000/svg"
preserveAspectRatio="none"
className="w-full h-[100px]"
>
<path
d="M0,80 C150,110 350,20 600,80 C850,140 1050,40 1200,80 L1200,120 L0,120 Z"
fill="white"
opacity="0.8"
></path>
<path
d="M0,90 C150,130 350,50 600,90 C850,150 1050,60 1200,90 L1200,120 L0,120 Z"
fill="white"
opacity="0.5"
></path>
<path
d="M0,100 C150,150 350,80 600,100 C850,160 1050,90 1200,100 L1200,120 L0,120 Z"
fill="white"
opacity="0.3"
></path>
</svg>
</div>
)}
<div className="max-w-4xl mx-auto mt-12">
<h2 className="text-4xl font-semibold mb-4">{title ?? placeholderTitle}</h2>

0
src/components/Blocks/Form/Country/index.module.scss → src/components/Blocks/Form/Country/index.scss
View File

30
src/components/Blocks/Form/Country/index.tsx
View File

@ -1,23 +1,23 @@
import type { CountryField } from '@payloadcms/plugin-form-builder/types'
import type { Control, FieldErrorsImpl, FieldValues } from 'react-hook-form'
import type { CountryField } from "@payloadcms/plugin-form-builder/types";
import type { Control, FieldErrorsImpl, FieldValues } from "react-hook-form";
import React from 'react'
import { Controller } from 'react-hook-form'
import ReactSelect from 'react-select'
import React from "react";
import { Controller } from "react-hook-form";
import ReactSelect from "react-select";
import { Error } from '../Error'
import { Width } from '../Width'
import classes from './index.module.scss'
import { countryOptions } from './options'
import { Error } from "../Error";
import { Width } from "../Width";
import classes from "./index.scss";
import { countryOptions } from "./options";
export const Country: React.FC<
{
control: Control<FieldValues, any>
control: Control<FieldValues, any>;
errors: Partial<
FieldErrorsImpl<{
[x: string]: any
[x: string]: any;
}>
>
>;
} & CountryField
> = ({ name, control, errors, label, required, width }) => {
return (
@ -36,7 +36,7 @@ export const Country: React.FC<
classNamePrefix="rs"
inputId={name}
instanceId={name}
onChange={(val) => onChange(val ? val.value : '')}
onChange={(val) => onChange(val ? val.value : "")}
options={countryOptions}
value={countryOptions.find((c) => c.value === value)}
/>
@ -46,5 +46,5 @@ export const Country: React.FC<
{required && errors[name] && <Error />}
</div>
</Width>
)
}
);
};

0
src/components/Blocks/Form/Error/index.module.scss → src/components/Blocks/Form/Error/index.scss
View File

0
src/components/Blocks/Form/Gutter/index.module.scss → src/components/Blocks/Form/Gutter/index.scss
View File

26
src/components/Blocks/Form/Gutter/index.tsx
View File

@ -1,26 +1,24 @@
import React from 'react'
import React from "react";
import classes from './index.module.scss'
import classes from "./index.scss";
type Props = {
children: React.ReactNode
className?: string
left?: boolean
ref?: React.Ref<HTMLDivElement>
right?: boolean
}
children: React.ReactNode;
className?: string;
left?: boolean;
ref?: React.Ref<HTMLDivElement>;
right?: boolean;
};
export const Gutter: React.FC<Props & { ref?: React.Ref<HTMLDivElement> }> = (props) => {
const { children, className, left = true, right = true, ref } = props
const { children, className, left = true, right = true, ref } = props;
return (
<div
className={[left && classes.gutterLeft, right && classes.gutterRight, className]
.filter(Boolean)
.join(' ')}
className={[left && classes.gutterLeft, right && classes.gutterRight, className].filter(Boolean).join(" ")}
ref={ref}
>
{children}
</div>
)
}
);
};

0
src/components/Blocks/Form/Message/index.module.scss → src/components/Blocks/Form/Message/index.scss
View File

2
src/components/Blocks/Form/Message/index.tsx
View File

@ -4,7 +4,7 @@ import React from "react";
import RichText from "../RichText";
import { Width } from "../Width";
import classes from "./index.module.scss";
import classes from "./index.scss";
export const Message: React.FC<MessageField> = ({ message }) => {
return (

0
src/components/Blocks/Form/Number/index.module.scss → src/components/Blocks/Form/Number/index.scss
View File

2
src/components/Blocks/Form/Number/index.tsx
View File

@ -5,7 +5,7 @@ import React from "react";
import { Error } from "../Error";
import { Width } from "../Width";
import classes from "./index.module.scss";
import classes from "./index.scss";
export const Number: React.FC<
{

0
src/components/Blocks/Form/State/index.module.scss → src/components/Blocks/Form/State/index.scss
View File

30
src/components/Blocks/Form/State/index.tsx
View File

@ -1,23 +1,23 @@
import type { StateField } from '@payloadcms/plugin-form-builder/types'
import type { Control, FieldErrorsImpl, FieldValues } from 'react-hook-form'
import type { StateField } from "@payloadcms/plugin-form-builder/types";
import type { Control, FieldErrorsImpl, FieldValues } from "react-hook-form";
import React from 'react'
import { Controller } from 'react-hook-form'
import ReactSelect from 'react-select'
import React from "react";
import { Controller } from "react-hook-form";
import ReactSelect from "react-select";
import { Error } from '../Error'
import { Width } from '../Width'
import classes from './index.module.scss'
import { stateOptions } from './options'
import { Error } from "../Error";
import { Width } from "../Width";
import classes from "./index.scss";
import { stateOptions } from "./options";
export const State: React.FC<
{
control: Control<FieldValues, any>
control: Control<FieldValues, any>;
errors: Partial<
FieldErrorsImpl<{
[x: string]: any
[x: string]: any;
}>
>
>;
} & StateField
> = ({ name, control, errors, label, required, width }) => {
return (
@ -36,7 +36,7 @@ export const State: React.FC<
classNamePrefix="rs"
id={name}
instanceId={name}
onChange={(val) => onChange(val ? val.value : '')}
onChange={(val) => onChange(val ? val.value : "")}
options={stateOptions}
value={stateOptions.find((t) => t.value === value)}
/>
@ -46,5 +46,5 @@ export const State: React.FC<
{required && errors[name] && <Error />}
</div>
</Width>
)
}
);
};

0
src/components/Blocks/Form/VerticalPadding/index.module.scss → src/components/Blocks/Form/VerticalPadding/index.scss
View File

33
src/components/Blocks/Form/VerticalPadding/index.tsx
View File

@ -1,29 +1,20 @@
import React from 'react'
import React from "react";
import classes from './index.module.scss'
import classes from "./index.scss";
export type VerticalPaddingOptions = 'large' | 'medium' | 'none' | 'small'
export type VerticalPaddingOptions = "large" | "medium" | "none" | "small";
type Props = {
bottom?: VerticalPaddingOptions
children: React.ReactNode
className?: string
top?: VerticalPaddingOptions
}
bottom?: VerticalPaddingOptions;
children: React.ReactNode;
className?: string;
top?: VerticalPaddingOptions;
};
export const VerticalPadding: React.FC<Props> = ({
bottom = 'medium',
children,
className,
top = 'medium',
}) => {
export const VerticalPadding: React.FC<Props> = ({ bottom = "medium", children, className, top = "medium" }) => {
return (
<div
className={[className, classes[`top-${top}`], classes[`bottom-${bottom}`]]
.filter(Boolean)
.join(' ')}
>
<div className={[className, classes[`top-${top}`], classes[`bottom-${bottom}`]].filter(Boolean).join(" ")}>
{children}
</div>
)
}
);
};

0
src/components/Blocks/Form/Width/index.module.scss → src/components/Blocks/Form/Width/index.scss
View File

12
src/components/Blocks/Form/Width/index.tsx
View File

@ -1,14 +1,14 @@
import * as React from 'react'
import * as React from "react";
import classes from './index.module.scss'
import classes from "./index.scss";
export const Width: React.FC<{
children: React.ReactNode
width?: number
children: React.ReactNode;
width?: number;
}> = ({ children, width }) => {
return (
<div className={classes.width} style={{ width: width ? `${width}%` : undefined }}>
{children}
</div>
)
}
);
};

0
src/components/Blocks/Form/index.module.scss → src/components/Blocks/Form/index.scss
View File

193
src/components/Contacts/Contact.tsx
View File

@ -1,78 +1,145 @@
import { contactItems } from "@/data/contact";
import React, { ReactNode } from "react";
"use client";
import React from "react";
export interface ContactProps {
children?: ReactNode;
}
export default function Contact({ children }: ContactProps) {
export default function Contact() {
return (
<div className="container position-relative">
<div className="row">
{/* Left Column */}
<div className="col-lg-4 mb-md-50 mb-sm-30 position-relative z-index-1">
<h2 className="section-caption-slick mb-30 mb-sm-20">Contact Us</h2>
<h3 className="section-title mb-50 mb-sm-30">We’re open to talk to anyone.</h3>
{/* Contact Information */}
<div className="row">
<div className="col-md-11">
{/* Address */}
{contactItems.map((item: any, index: number) => (
<React.Fragment key={index}>
<div className={`contact-item ${index !== 3 ? "mb-40 mb-sm-20" : ""}`}>
<div className="ci-icon">
<i className={item.iconClass} />
</div>
<h4 className="ci-title visually-hidden">{item.title}</h4>
<div className="ci-text">{item.text}</div>
<div>
<a
href={item.link.url}
target={item.link.target}
rel={item.link.rel}
className="link-hover-anim"
data-link-animate="y"
>
<span className="link-strong link-strong-unhovered">
{item.link.text} <i className="mi-arrow-right size-18" aria-hidden="true"></i>
</span>
<span className="link-strong link-strong-hovered" aria-hidden="true">
{item.link.text} <i className="mi-arrow-right size-18" aria-hidden="true"></i>
</span>
</a>
</div>
</div>
</React.Fragment>
))}
{/* End Phone */}
<div className="col-lg-6">
<div className="row mb-50">
<div className="col-lg-10">
<h2 className="section-caption-slick mb-xs-10">Contact Us</h2>
</div>
</div>
{/* End Contact Information */}
</div>
{/* End Left Column */}
{/* Right Column */}
<div className="col-lg-8 col-xl-7 offset-xl-1 wow fadeInUp">
<div className="row g-0">
{/* Google Map Column */}
<div className="col-12 d-flex align-items-stretch pt-40 pt-sm-0 pb-40 pb-sm-0 mb-sm-30">
<div className="map-boxed-1 d-flex align-items-stretch h-[400px]">
<iframe
src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3399.869553403109!2d-110.24257920000001!3d31.555194399999998!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x86d7292ebdc13925%3A0x43d6cab7d0f93f14!2s5151%20AZ-90%2C%20Sierra%20Vista%2C%20AZ%2085635%2C%20USA!5e0!3m2!1sen!2sid!4v1738604989180!5m2!1sen!2sid"
width={600}
height={600}
style={{ border: 0 }}
loading="lazy"
referrerPolicy="no-referrer-when-downgrade"
/>
</div>
<div className="row wow fadeInUp" data-wow-delay="0.5s">
<div className="col-md-6 mb-sm-50">
{/* Contact Form */}
<div className="row mb-60 mb-sm-50">
{/* Contact Item */}
<div className="col-sm-6 mb-xs-30 d-flex align-items-stretch">
<div className="alt-features-item border-left mt-0 wow fadeScaleIn" data-wow-delay=".3s">
<div className="alt-features-icon">
<svg
width={24}
height={24}
viewBox="0 0 24 24"
fill="currentColor"
aria-hidden="true"
xmlns="http://www.w3.org/2000/svg"
fillRule="evenodd"
clipRule="evenodd"
>
<path d="M12 2C8.134 2 5 5.134 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.866-3.134-7-7-7zm0 9.5c-1.381 0-2.5-1.119-2.5-2.5s1.119-2.5 2.5-2.5 2.5 1.119 2.5 2.5-1.119 2.5-2.5 2.5z" />
</svg>
</div>
<h4 className="alt-features-title">Location</h4>
<div className="alt-features-descr clearlinks">
<div>
<a href="https://maps.app.goo.gl/1sK5Mgi7mtqZsYkcA">5151 E HWY 90, Sierra Vista, Arizona 85635</a>
</div>
</div>
</div>
</div>
{/* End Google Map Column */}
{/* End Contact Item */}
{/* Contact Item */}
<div className="col-sm-6 d-flex align-items-stretch">
<div className="alt-features-item border-left mt-0 wow fadeScaleIn" data-wow-delay=".5s">
<div className="alt-features-icon">
<svg
width={24}
height={24}
viewBox="0 0 24 24"
fill="currentColor"
aria-hidden="true"
xmlns="http://www.w3.org/2000/svg"
fillRule="evenodd"
clipRule="evenodd"
>
<path d="M17 2H7C5.9 2 5 2.9 5 4v16c0 1.1.9 2 2 2h10c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm0 17H7V5h10v14zM12 16c.55 0 1-.45 1-1s-.45-1-1-1-1 .45-1 1 .45 1 1 1z" />
</svg>
</div>
<h4 className="alt-features-title">Phone</h4>
<div className="alt-features-descr clearlinks">
<div>
<a href="tel:(520) 803-6644">(520) 803-6644</a>
</div>
</div>
</div>
</div>
{/* End Contact Item */}
</div>
<div className="row mb-60 mb-sm-50">
{/* Contact Item */}
<div className="col-sm-6 mb-xs-30 d-flex align-items-stretch">
<div className="alt-features-item border-left mt-0 wow fadeScaleIn" data-wow-delay=".3s">
<div className="alt-features-icon">
<svg
width={24}
height={24}
viewBox="0 0 24 24"
fill="currentColor"
aria-hidden="true"
xmlns="http://www.w3.org/2000/svg"
fillRule="evenodd"
clipRule="evenodd"
>
<path d="M12 2C6.486 2 2 6.486 2 12s4.486 10 10 10 10-4.486 10-10S17.514 2 12 2zm0 18c-4.411 0-8-3.589-8-8s3.589-8 8-8 8 3.589 8 8-3.589 8-8 8zm1-8h4v2h-6V7h2v5z" />
</svg>
</div>
<h4 className="alt-features-title">Hours</h4>
<div className="alt-features-descr clearlinks">
<p className="text-nowrap">Monday to Friday: 8:00 AM – 5:00 PM</p>
</div>
</div>
</div>
{/* End Contact Item */}
{/* Contact Item */}
<div className="col-sm-6 mb-xs-30 d-flex align-items-stretch">
<div className="alt-features-item border-left mt-0 wow fadeScaleIn" data-wow-delay=".3s">
<div className="alt-features-icon">
<svg
width={24}
height={24}
viewBox="0 0 24 24"
fill="currentColor"
aria-hidden="true"
xmlns="http://www.w3.org/2000/svg"
fillRule="evenodd"
clipRule="evenodd"
>
<path d="M12 2C6.486 2 2 6.486 2 12s4.486 10 10 10 10-4.486 10-10S17.514 2 12 2zm0 18c-4.411 0-8-3.589-8-8s3.589-8 8-8 8 3.589 8 8-3.589 8-8 8zm1-12h-2v2h2V8zm0 4h-2v6h2v-6zm-4-2H7v2h2v-2zm6 0h-2v2h2v-2z" />
</svg>
</div>
<h4 className="alt-features-title">Fax</h4>
<div className="alt-features-descr clearlinks">
<div>
<a href="tel:(520) 459-3193">(520) 459-3193</a>
</div>
</div>
</div>
</div>
{/* End Contact Item */}
</div>
{/* End Contact Form */}
</div>
<div className="col-md-6 d-flex align-items-stretch">
{/* Google Map */}
<div className="map-boxed">
<iframe
src="https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d108795.7060636289!2d-110.242613!3d31.555297!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x86d7292e9b858975%3A0xc2519e5d827cd79c!2sCochise%20Oncology!5e0!3m2!1sen!2sus!4v1740412623968!5m2!1sen!2sus"
width={600}
height={450}
style={{ border: 0 }}
loading="lazy"
referrerPolicy="no-referrer-when-downgrade"
/>
</div>
{/* End Google Map */}
</div>
{/* End Right Column */}
</div>
{children}
</div>
);
}

2
src/components/Header.tsx
View File

@ -5,7 +5,7 @@ import Link from "next/link";
export default function Header1Multipage({ links }: any) {
return (
<div className="main-nav-sub full-wrapper" style={{ background: "linear-gradient(to right, #64B3B4, #A8DCCA)" }}>
<div className="main-nav-sub full-wrapper">
{/* Logo (* Add your text or image to the link tag. Use SVG or PNG image format.
If you use a PNG logo image, the image resolution must be equal 200% of the visible logo
image size for support of retina screens. See details in the template documentation. *) */}

41
src/components/HeaderNav.tsx
View File

@ -8,15 +8,15 @@ import { useEffect, useRef, useState } from "react";
import Link from "next/link";
export default function HeaderNav({ links, animateY = false }: any) {
const [isDropdownOpen] = useState([""]);
const [isDropdownOpen, setIsDropdownOpen] = useState([""]);
const dropdownRef = useRef(null);
// const toggleDropdown = (section: string[]) => {
// if (section == isDropdownOpen) {
// setIsDropdownOpen([""]);
// }
// setIsDropdownOpen(section);
// };
const toggleDropdown = (section: string[]) => {
if (section == isDropdownOpen) {
setIsDropdownOpen([""]);
}
setIsDropdownOpen(section);
};
useEffect(() => {
setTimeout(() => {
@ -55,18 +55,11 @@ export default function HeaderNav({ links, animateY = false }: any) {
{Array.isArray(link?.child) && (
<>
<Link
href={link?.href ?? "#"}
className="mn-has-sub"
// onClick={(e) => {
// e.preventDefault();
// toggleDropdown([link.text]);
// }}
>
{link.text} <i className="mi-chevron-down" />
<Link href={link?.href ?? "#"} className="mn-has-sub">
{link.text} <i className="mi-chevron-down" onClick={() => toggleDropdown([link.text])} />
</Link>
<ul className={`mn-sub to-left ${isDropdownOpen.includes(link.text) && "open"}`} ref={dropdownRef}>
<ul className={`mn-sub to-right ${isDropdownOpen.includes(link.text) && "open"}`} ref={dropdownRef}>
{link.child.map((subLink: any, subLinkIdx: number) => (
<li key={subLinkIdx}>
{!Array.isArray(subLink?.child) && (
@ -76,18 +69,12 @@ export default function HeaderNav({ links, animateY = false }: any) {
)}
{Array.isArray(subLink?.child) && (
<>
<Link
href={subLink?.href ?? "#"}
className="mn-has-sub"
// onClick={(e) => {
// e.preventDefault();
// toggleDropdown([link.text, subLink.text]);
// }}
>
{subLink.text} <i className="mi-chevron-down" />
<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-left ${isDropdownOpen.includes(subLink.text) && "open"}`}>
<ul className={`mn-sub to-right ${isDropdownOpen.includes(subLink.text) && "open"}`}>
{subLink.child.map((subLink2: any, subLinkIdx2: number) => (
<li key={subLinkIdx2}>
<Link href={subLink2?.href} onClick={() => toggleMobileMenu()}>

80
src/components/Hero.tsx
View File

@ -1,64 +1,50 @@
"use client";
import ModalVideo from "react-modal-video";
import { useState } from "react";
import Link from "next/link";
import { useRef } from "react";
export default function Hero6() {
const [isOpen, setOpen] = useState(false);
const videoRef = useRef<any | null>(null);
return (
<>
<div className="container min-height-80vh d-flex align-items-center pt-100 pb-100 pt-sm-120 pb-sm-120">
<section className="home-section bg-dark-1 bg-dark-alpha-30 light-content scrollSpysection" id="home">
<div className="container min-h-[80vh] d-flex align-items-center pt-100 pb-100 pt-sm-120 pb-sm-120">
{/* Background Video */}
{/* Please replace the video file in folder "video" with your own file */}
<div className="bg-video-wrapper">
<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-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 col-lg-8 offset-lg-2">
<h2 className="section-caption mb-30 mb-xs-10" data-wow-duration="1.2s">
Healing Begins Here
</h2>
<h1 className="hs-title-1 mb-30">
<span className="" data-splitting="chars">
Cochise Oncology
</span>
</h1>
<div className="row">
<div className="col-lg-8 offset-lg-2">
<p className="section-descr mb-50" data-wow-delay="0.6s" data-wow-duration="1.2s">
Southern Arizona’s Only Complete Cancer Treatment Center in Sierra Vista
</p>
</div>
</div>
<div
className="local-scroll mt-n10 wch-unset"
data-wow-delay="0.7s"
data-wow-duration="1.2s"
data-wow-offset={0}
<div className="col-md-10 offset-md-1">
<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="#about"
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]"
data-btn-animate="y"
>
<Link href="/contact" className="bg-[#64B3B4] text-white px-4 py-2 m-3 rounded-3xl hover:opacity-[0.7]">
Request Consultation
</Link>
{/* <a
onClick={() => setOpen(true)}
className="link-hover-anim align-middle lightbox mfp-iframe mt-10"
data-link-animate="y"
>
<i className="icon-play size-13 me-1" /> How it works?
</a> */}
</div>
Request Consultation
</a>
</div>
{/* End Home Section Text */}
</div>
</div>
{/* End Home Section Content */}
</div>{" "}
<ModalVideo
channel="youtube"
youtube={{ mute: 0, autoplay: 0 }}
isOpen={isOpen}
videoId="jTea_8Fk5Ns"
onClose={() => setOpen(false)}
/>{" "}
</>
{/* 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>
);
}

13
src/components/Homepage.tsx
View File

@ -4,6 +4,7 @@ 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({ onePage = false, dark = false }) {
return (
@ -95,7 +96,7 @@ export default function homepage({ onePage = false, dark = false }) {
</div>
</div>
</section>
<section className="my-5 w-full">
<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)]">
@ -133,17 +134,17 @@ export default function homepage({ onePage = false, dark = false }) {
</div>
</section>
<section className={`page-section scrollSpysection ${dark ? "bg-dark-1 light-content" : ""}`} id="about">
<section className={`mt-16 scrollSpysection ${dark ? "bg-dark-1 light-content" : ""}`} id="about">
<div className="container position-relative">
<div className="row mb-60 mb-xs-30">
<div className="col-md-6">
<h2 className="section-caption mb-xs-10">Our Service</h2>
<h2 className="section-caption-slick mb-xs-10">Our Service</h2>
<h3 className="section-title mb-0">Radixact® Radiation Therapy</h3>
</div>
<div className="col-md-5 offset-md-1 relative text-start text-md-end pt-40 pt-sm-20 local-scroll">
{/* Decorative Dots */}
<div
className="decoration-2 d-none d-md-block"
className="decoration-2 d-none d-md-block mt-24"
data-rellax-y=""
data-rellax-speed="0.7"
data-rellax-percentage="-0.2"
@ -165,6 +166,10 @@ export default function homepage({ onePage = false, dark = false }) {
<About />
</div>
</section>
<section className={`mb-5 scrollSpysection ${dark ? "bg-dark-1 light-content" : ""}`} id="contact">
<Contact />
</section>
</>
);
}

10
src/components/Pages/Page.tsx
View File

@ -1,8 +1,7 @@
import { BeforeFooterBlock } from "@/components/Blocks/BeforeFooter";
import { RenderBlocks } from "@/components/Blocks/RenderBlocks";
import BlogDetail from "@/components/Blogs/BlogDetail";
import { fetchPageBySlug } from "@/services/payload/page";
import Image from "next/image";
import { redirect } from "next/navigation";
export interface PageProps {
slug: string | undefined;
@ -12,12 +11,7 @@ export default async function Page({ slug }: PageProps) {
const page = await fetchPageBySlug({ slug });
if (!page) {
return (
<>
<BlogDetail slug={slug} />;
<BeforeFooterBlock />
</>
);
redirect("/page/not-found");
}
return (

2
src/components/Team.tsx
View File

@ -19,7 +19,7 @@ export default function Team({ data }: any) {
<div key={index} className="text-center">
<CardTeam data={member} />
<Link href={`/biography/${member.name}`} passHref>
<button className="bg-[#64B3B4] text-white px-2 py-1 m-3 rounded-3xl hover:opacity-[0.7]">
<button className="bg-[#64B3B4] text-white px-5 py-1 m-3 rounded-3xl hover:opacity-[0.7]">
Biography
</button>
</Link>

4
src/components/Teams/CardTeam.tsx
View File

@ -15,8 +15,8 @@ export function CardTeam({ data }: CardTeamProps) {
<div className="team-item-image">
<Image
src={data.img.url}
width={625}
height={767}
width={400}
height={400}
className="wow scaleOutIn"
data-wow-duration="1.2s"
alt={`Image of ${data.name}`}

1
src/services/payload/team.ts
View File

@ -12,6 +12,7 @@ export async function fetchTeamDetail(name: string | undefined) {
limit: 1,
pagination: false,
});
console.log("data", name);
if (!blogDataQuery?.docs?.[0]) return null;