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

feat: biography

Browse Source
This commit is contained in:
Val 2025-02-24 23:58:32 +07:00
parent a600a6b9ea
commit 835a45dbef
29 changed files with 298 additions and 222 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

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

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

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

@ -2,12 +2,46 @@ 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 />}>
@ -45,8 +79,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={400} height={800} className="round" />
</div>
<div>
<RichText data={data.data.biography as any} />

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>

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>

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

4
src/components/HeaderNav.tsx
View File

@ -66,7 +66,7 @@ export default function HeaderNav({ links, animateY = false }: any) {
{link.text} <i className="mi-chevron-down" />
</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) && (
@ -87,7 +87,7 @@ export default function HeaderNav({ links, animateY = false }: any) {
{subLink.text} <i className="mi-chevron-down" />
</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,56 @@
"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-height-100vh 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">
<div className="col-md-10 offset-md-1 mb-20 mb-sm-0">
<h2 className="hs-title-11 mb-30 mb-xs-10">Healing Begins Here</h2>
<h1 className="hs-title-12 mb-50 mb-sm-30">
<span className="wow charsAnimIn" 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}
<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>
<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>
</>
);
}

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;