dev #2

Merged
RizqiSyahrendra merged 4 commits from dev into main 2025-02-25 08:41:23 +00:00
34 changed files with 473 additions and 290 deletions
Showing only changes of commit 56c2571329 - Show all commits

View File

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

View File

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

View File

@ -2,23 +2,63 @@ import { BeforeFooterBlock } from "@/components/Blocks/BeforeFooter";
import { fetchTeamDetail } from "@/services/payload/team"; import { fetchTeamDetail } from "@/services/payload/team";
import { RichText } from "@payloadcms/richtext-lexical/react"; import { RichText } from "@payloadcms/richtext-lexical/react";
import Image from "next/image"; import Image from "next/image";
import { Metadata } from "next/types";
import { Suspense } from "react"; 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 }> }) { export default async function BiographySinglePage({ params }: { params: Promise<{ slug: string }> }) {
const slug = (await params).slug; const slug = (await params).slug;
const data = await fetchTeamDetail(slug); const data = await fetchTeamDetail(decodeURIComponent(slug));
if (!data?.data) return <></>; if (!data?.data)
return (
<>
<BeforeFooterBlock />
</>
);
return ( return (
<> <>
<Suspense fallback={<Loading />}> <Suspense fallback={<Loading />}>
<> <>
<section className="page-section bg-dark-1 bg-gradient-gray-dark-1 light-content bg-scroll overflow-hidden"> <section className="page-section bg-dark-1 bg-gradient-gray-dark-1 light-content bg-scroll overflow-hidden">
{/* <!-- Background Shape --> */} {/* <!-- Background Shape --> */}
<div className="bg-shape-1 opacity-003"> <div className="absolute top-0 left-0 w-full h-full opacity-40">
<Image src="/assets/images/demo-fancy/bg-shape-1.svg" width={1300} height={844} alt="" /> <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> </div>
{/* <!-- End Background Shape --> */} {/* <!-- End Background Shape --> */}
<div className="container position-relative pt-sm-40 text-center"> <div className="container position-relative pt-sm-40 text-center">
<div className="row"> <div className="row">
<div className="col-md-10 offset-md-1 col-lg-8 offset-lg-2"> <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 */} {/* Post */}
<div className="blog-item mb-80 mb-xs-40"> <div className="blog-item mb-80 mb-xs-40">
<div className="blog-item-body"> <div className="blog-item-body">
<div className="mb-40 mb-xs-30"> <div className="mb-40 mb-xs-30 flex justify-center">
<Image src={data.imgUrl} alt={data.data.name} width={300} height={500} className="round" /> <Image src={data.imgUrl} alt={data.data.name} width={500} height={800} className="round" />
</div> </div>
<div> <div>
<RichText data={data.data.biography as any} /> <RichText data={data.data.biography as any} />

View File

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

View File

@ -11,15 +11,6 @@ export default function Home1BGVideoMultiPage() {
<div className="theme-main"> <div className="theme-main">
<div className="page" id="top"> <div className="page" id="top">
<main id="main"> <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)]"> <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 /> <Hero6 />
</div> </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>
);
}

View File

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

View File

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

View File

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

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 = { type Props = {
children: React.ReactNode children: React.ReactNode;
className?: string className?: string;
left?: boolean left?: boolean;
ref?: React.Ref<HTMLDivElement> ref?: React.Ref<HTMLDivElement>;
right?: boolean right?: boolean;
} };
export const Gutter: React.FC<Props & { ref?: React.Ref<HTMLDivElement> }> = (props) => { 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 ( return (
<div <div
className={[left && classes.gutterLeft, right && classes.gutterRight, className] className={[left && classes.gutterLeft, right && classes.gutterRight, className].filter(Boolean).join(" ")}
.filter(Boolean)
.join(' ')}
ref={ref} ref={ref}
> >
{children} {children}
</div> </div>
) );
} };

View File

@ -6,4 +6,4 @@
@include mid-break { @include mid-break {
margin: calc(var(--base) * 0.5) 0 calc(var(--base) * 0.5) 0; margin: calc(var(--base) * 0.5) 0 calc(var(--base) * 0.5) 0;
} }
} }

View File

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

View File

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

View File

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

View File

@ -20,4 +20,4 @@
.bottom-small { .bottom-small {
padding-bottom: calc(var(--block-padding) / 3); padding-bottom: calc(var(--block-padding) / 3);
} }

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 = { type Props = {
bottom?: VerticalPaddingOptions bottom?: VerticalPaddingOptions;
children: React.ReactNode children: React.ReactNode;
className?: string className?: string;
top?: VerticalPaddingOptions top?: VerticalPaddingOptions;
} };
export const VerticalPadding: React.FC<Props> = ({ export const VerticalPadding: React.FC<Props> = ({ bottom = "medium", children, className, top = "medium" }) => {
bottom = 'medium',
children,
className,
top = 'medium',
}) => {
return ( return (
<div <div className={[className, classes[`top-${top}`], classes[`bottom-${bottom}`]].filter(Boolean).join(" ")}>
className={[className, classes[`top-${top}`], classes[`bottom-${bottom}`]]
.filter(Boolean)
.join(' ')}
>
{children} {children}
</div> </div>
) );
} };

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<{ export const Width: React.FC<{
children: React.ReactNode children: React.ReactNode;
width?: number width?: number;
}> = ({ children, width }) => { }> = ({ children, width }) => {
return ( return (
<div className={classes.width} style={{ width: width ? `${width}%` : undefined }}> <div className={classes.width} style={{ width: width ? `${width}%` : undefined }}>
{children} {children}
</div> </div>
) );
} };

View File

@ -1,78 +1,145 @@
import { contactItems } from "@/data/contact"; "use client";
import React, { ReactNode } from "react"; import React from "react";
export interface ContactProps { export default function Contact() {
children?: ReactNode;
}
export default function Contact({ children }: ContactProps) {
return ( return (
<div className="container position-relative"> <div className="container position-relative">
<div className="row"> <div className="row">
{/* Left Column */} <div className="col-lg-6">
<div className="col-lg-4 mb-md-50 mb-sm-30 position-relative z-index-1"> <div className="row mb-50">
<h2 className="section-caption-slick mb-30 mb-sm-20">Contact Us</h2> <div className="col-lg-10">
<h3 className="section-title mb-50 mb-sm-30">Were open to talk to anyone.</h3> <h2 className="section-caption-slick mb-xs-10">Contact Us</h2>
{/* 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> </div>
</div> </div>
{/* End Contact Information */}
</div> </div>
{/* End Left Column */} </div>
{/* Right Column */} <div className="row wow fadeInUp" data-wow-delay="0.5s">
<div className="col-lg-8 col-xl-7 offset-xl-1 wow fadeInUp"> <div className="col-md-6 mb-sm-50">
<div className="row g-0"> {/* Contact Form */}
{/* Google Map Column */} <div className="row mb-60 mb-sm-50">
<div className="col-12 d-flex align-items-stretch pt-40 pt-sm-0 pb-40 pb-sm-0 mb-sm-30"> {/* Contact Item */}
<div className="map-boxed-1 d-flex align-items-stretch h-[400px]"> <div className="col-sm-6 mb-xs-30 d-flex align-items-stretch">
<iframe <div className="alt-features-item border-left mt-0 wow fadeScaleIn" data-wow-delay=".3s">
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" <div className="alt-features-icon">
width={600} <svg
height={600} width={24}
style={{ border: 0 }} height={24}
loading="lazy" viewBox="0 0 24 24"
referrerPolicy="no-referrer-when-downgrade" 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>
</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>
<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> </div>
{/* End Right Column */}
</div> </div>
{children}
</div> </div>
); );
} }

View File

@ -5,7 +5,7 @@ import Link from "next/link";
export default function Header1Multipage({ links }: any) { export default function Header1Multipage({ links }: any) {
return ( 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. {/* 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 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. *) */} image size for support of retina screens. See details in the template documentation. *) */}

View File

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

View File

@ -1,64 +1,50 @@
"use client"; "use client";
import ModalVideo from "react-modal-video"; import { useRef } from "react";
import { useState } from "react";
import Link from "next/link";
export default function Hero6() { export default function Hero6() {
const [isOpen, setOpen] = useState(false); const videoRef = useRef<any | null>(null);
return ( return (
<> <section className="home-section bg-dark-1 bg-dark-alpha-30 light-content scrollSpysection" id="home">
<div className="container min-height-80vh d-flex align-items-center pt-100 pb-100 pt-sm-120 pb-sm-120"> <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 */} {/* 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 col-lg-8 offset-lg-2"> <div className="col-md-10 offset-md-1">
<h2 className="section-caption mb-30 mb-xs-10" data-wow-duration="1.2s"> <h2 className="hs-title-11">Healing Begins Here</h2>
Healing Begins Here <h1 className="hs-title-9">Cochise Oncology</h1>
</h2> <p>Southern Arizonas Only Complete Cancer Treatment Center in Sierra Vista.</p>
<h1 className="hs-title-1 mb-30"> <a
<span className="" data-splitting="chars"> href="#about"
Cochise Oncology 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]"
</span> data-btn-animate="y"
</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 Arizonas 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}
> >
<Link href="/contact" className="bg-[#64B3B4] text-white px-4 py-2 m-3 rounded-3xl hover:opacity-[0.7]"> Request Consultation
Request Consultation </a>
</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>
</div> </div>
{/* End Home Section Text */} {/* End Home Section Text */}
</div> </div>
</div> </div>
{/* End Home Section Content */} {/* End Home Section Content */}
</div>{" "} {/* Scroll Down */}
<ModalVideo <div className="local-scroll scroll-down-wrap" data-wow-offset={0}>
channel="youtube" <a href="#about" className="scroll-down">
youtube={{ mute: 0, autoplay: 0 }} <i className="mi-chevron-down" />
isOpen={isOpen} <span className="visually-hidden">Scroll to the next section</span>
videoId="jTea_8Fk5Ns" </a>
onClose={() => setOpen(false)} </div>
/>{" "} {/* End Scroll Down */}
</> </div>
</section>
); );
} }

View File

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

View File

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

View File

@ -19,7 +19,7 @@ export default function Team({ data }: any) {
<div key={index} className="text-center"> <div key={index} className="text-center">
<CardTeam data={member} /> <CardTeam data={member} />
<Link href={`/biography/${member.name}`} passHref> <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 Biography
</button> </button>
</Link> </Link>

View File

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

View File

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