Compare commits

...

10 Commits

48 changed files with 352 additions and 2906 deletions

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

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

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

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

@ -38,11 +38,10 @@ export default async function ContactPage() {
</section>
<section className="page-section scrollSpysection" id="contact">
<Contact>
<Suspense fallback={<></>}>
<ContactForm />
</Suspense>
</Contact>
<Contact />
<Suspense fallback={<></>}>
<ContactForm />
</Suspense>
</section>
</>
);

@ -1,27 +1,18 @@
// "use client";
import Hero6 from "@/components/Hero";
import Hero from "@/components/Hero";
// const ParallaxContainer = dynamic(() => import("@/components/ParallaxContainer"), {
// ssr: false,
// });
export default function Home1BGVideoMultiPage() {
export default function HomeBgVideo() {
return (
<>
<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 />
<Hero />
</div>
</main>
</div>

@ -0,0 +1,39 @@
"use client";
import Link from "next/link";
export default function NotFound() {
return (
<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>
);
}

@ -1,54 +0,0 @@
"use client";
import React, { useState, useRef } from "react";
import Link from "next/link";
export default function AboutDropdown() {
// State to manage dropdown visibility
const [isDropdownOpen, setIsDropdownOpen] = useState(false);
const dropdownRef = useRef(null);
// Toggle dropdown visibility
const toggleDropdown = () => {
setIsDropdownOpen(!isDropdownOpen);
};
return (
<li className="relative group">
<a
href="#"
className="mn-has-sub opacity-1 text-black hover:text-purple-700 font-semibold px-4 py-2 flex items-center"
onClick={(e) => {
e.preventDefault();
toggleDropdown();
}}
>
About <i className="ml-1 mi-chevron-down" />
</a>
{/* Dropdown menu with sliding effect */}
<ul
className={`absolute left-0 mt-2 w-56 bg-white shadow-lg rounded-md border border-gray-300 transition-all duration-300 ${
isDropdownOpen ? "opacity-100 visible scale-100" : "opacity-0 invisible scale-95"
}`}
ref={dropdownRef}
>
<li className="group relative">
<Link href="/oncology-center" className="block px-4 py-2 text-purple-700 hover:bg-gray-200">
Our Oncology Center
</Link>
</li>
<li className="group relative">
<Link href="/staff" className="block px-4 py-2 text-black hover:bg-gray-200">
Our Staff
</Link>
</li>
<li className="group relative">
<Link href="/announcements" className="block px-4 py-2 text-black hover:bg-gray-200">
Announcements
</Link>
</li>
</ul>
</li>
);
}

@ -1,84 +0,0 @@
import Image from "next/image";
export const metadata = {
title: "Slick About Dark || Cochise Oncology",
description: "Cochise Oncology",
};
const dark = true;
export default function SlickAboutPageDark() {
return (
<>
<section
className="page-section bg-dark-1 bg-gradient-gray-dark-1 light-content bg-scroll overflow-hidden"
id="home"
>
{/* <!-- Background Shape --> */}
<div className="bg-shape-1 opacity-003">
<Image src="/assets/adobstock-example.webp" width={1443} height={844} alt="" />
</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">
<h1 className="hs-title-10 mb-10 wow fadeInUp">Our Oncology Center</h1>
{/* <p className="section-descr mb-0 wow fadeInUp" data-wow-delay="0.2s">
Crafting immersive digital journeys for brands.
</p> */}
</div>
</div>
</div>
</section>
{/* <section className="page-section bg-white"> */}
<section className="page-section text-center bg-white py16 scrollSpysection" id="about">
<div className="container position-relative text-center">
<div className="row">
<div className="col-md-10 offset-md-1 col-lg-8 offset-lg-2">
<h2 className="section-title mb-20">Our Commitment to Excellence</h2>
<p className="text-gray">
Get compassionate care and excellent medical services from COCHISE ONCOLOGY in Sierra Vista, Arizona. We
offer a multidisciplinary approach to cancer care with multiple physicians who work together to guide
each patient through diagnosis, treatment, and recovery. Our services cover radiation, chemotherapy,
immunotherapy, hematology, and infusion services.
</p>
<p className="text-gray">
Cochise Oncologys professional staff works hard to ensure a positive experience throughout the entire
course of treatment. While we are best known for our leading-edge cancer therapies, we take particular
pride in compassion and dedication to our doctors and entire staff. Excellence in patient care on every
level is our commitment.
</p>
<p className="text-gray">
Here at Cochise Oncology, we offer the most up-to-date technology in cancer treatment that rivals the
largest and most prestigious centers in the country.
</p>
<p className="text-gray">We go the extra mile to address the needs of our patients.</p>
</div>
</div>
</div>
</section>
<section
className={`page-section text-white text-center py16 scrollSpysection ${dark ? "bg-dark-1 light-content" : "bg-light-alpha-90"} bg-scroll`}
id="about"
>
<div className="container mx-auto px-6">
<h2 className="text-3xl font-bold mb-4">Begin your path to healing with Cochise Oncology</h2>
<p className="text-lg mb-6">
Our dedicated team in Sierra Vista, AZ is here to support you with hope, strength, and courage. We offer
personalized cancer care using innovative treatments in our state-of-the-art facility. Take the first step
towards comprehensive, patient-focused treatment by scheduling a consultation. Let us listen to your needs,
answer your questions, and create a tailored plan for your journey. Fill out our form to connect with our
compassionate experts and discover how Cochise Oncology can stand with you in your fight against cancer.
</p>
<a href="#" className="bg-purple-600 hover:bg-purple-700 text-white py-3 px-6 rounded-lg text-lg">
Get Started
</a>
</div>
</section>
</>
);
}

@ -1,226 +0,0 @@
import Facts from "@/components/Facts";
import Testimonials from "@/components/Testimonials";
import TestimonialsDark from "@/components/TestimonialsDark";
import { features4 } from "@/data/features";
import Image from "next/image";
import Link from "next/link";
export const metadata = {
title: "Slick About Dark || Cochise Oncology",
description: "Cochise Oncology",
};
const dark = true;
export default function SlickAboutPageDark() {
return (
<>
<section
className="page-section bg-dark-1 bg-gradient-gray-dark-1 light-content bg-scroll overflow-hidden"
id="home"
>
{/* <!-- Background Shape --> */}
<div className="bg-shape-1 opacity-003">
<Image src="/assets/adobstock-example.webp" width={1443} height={844} alt="" />
</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">
<h1 className="hs-title-10 mb-10 wow fadeInUp">Our Oncology Center</h1>
{/* <p className="section-descr mb-0 wow fadeInUp" data-wow-delay="0.2s">
Crafting immersive digital journeys for brands.
</p> */}
</div>
</div>
</div>
</section>
{/* <section className="page-section bg-white"> */}
<section className="page-section text-center bg-white py16 scrollSpysection" id="about">
<div className="container position-relative text-center">
<div className="row">
<div className="col-md-10 offset-md-1 col-lg-8 offset-lg-2">
<h2 className="section-title mb-20">Our Commitment to Excellence</h2>
<p className="text-gray">
Get compassionate care and excellent medical services from COCHISE ONCOLOGY in Sierra Vista, Arizona. We
offer a multidisciplinary approach to cancer care with multiple physicians who work together to guide
each patient through diagnosis, treatment, and recovery. Our services cover radiation, chemotherapy,
immunotherapy, hematology, and infusion services.
</p>
<p className="text-gray">
Cochise Oncologys professional staff works hard to ensure a positive experience throughout the entire
course of treatment. While we are best known for our leading-edge cancer therapies, we take particular
pride in compassion and dedication to our doctors and entire staff. Excellence in patient care on every
level is our commitment.
</p>
<p className="text-gray">
Here at Cochise Oncology, we offer the most up-to-date technology in cancer treatment that rivals the
largest and most prestigious centers in the country.
</p>
<p className="text-gray">We go the extra mile to address the needs of our patients.</p>
</div>
</div>
</div>
</section>
<section
className={`page-section text-white text-center py16 scrollSpysection ${dark ? "bg-dark-1 light-content" : "bg-light-alpha-90"} bg-scroll`}
id="about"
>
<div className="container mx-auto px-6">
<h2 className="text-3xl font-bold mb-4">Begin your path to healing with Cochise Oncology</h2>
<p className="text-lg mb-6">
Our dedicated team in Sierra Vista, AZ is here to support you with hope, strength, and courage. We offer
personalized cancer care using innovative treatments in our state-of-the-art facility. Take the first step
towards comprehensive, patient-focused treatment by scheduling a consultation. Let us listen to your needs,
answer your questions, and create a tailored plan for your journey. Fill out our form to connect with our
compassionate experts and discover how Cochise Oncology can stand with you in your fight against cancer.
</p>
<a href="#" className="bg-purple-600 hover:bg-purple-700 text-white py-3 px-6 rounded-lg text-lg">
Get Started
</a>
</div>
</section>
<section className={`page-section scrollSpysection ${dark ? "bg-dark-1 light-content" : ""} `} id="about">
<div className="container position-relative">
<div className="row">
{/* Section Text */}
<div className="col-lg-6 d-flex align-items-center order-first order-lg-last mb-md-60 mb-sm-40">
<div className="w-100 wow fadeInUp">
<h2 className="section-caption-slick mb-30 mb-sm-20">Our Story</h2>
<h3 className="section-title mb-30">We believe in creatives with a&nbsp;passion to smart design.</h3>
<p className="text-gray mb-40">
Etiam fermentum vehicula faucibus. Praesent ullamcorper urna id arcu molestie scelerisque. Sed
imperdiet tristique mauris et faucibus. Maecenas semper augue non fringilla placerat. Curabitur luctus
erat sit amet ultricies aliquam. Donec dictum convallis mauris et maximus. Nullam massa arcu, porta
quis felis et, eleifend varius quam.
</p>
{/* Features List */}
<div className="row features-list mt-n20 mb-50 mb-sm-30">
{/* Features List Item */}
{features4.map((feature, index) => (
<div key={index} className="col-sm-6 col-lg-12 col-xl-6 d-flex mt-20">
<div className="features-list-icon">
<i className="mi-check" />
</div>
<div className="features-list-text">{feature.text}</div>
</div>
))}
{/* End Features List Item */}
</div>
{/* End Features List */}
<div className="local-scroll wch-unset">
<Link
href={`/slick-contact${dark ? "-dark" : ""}`}
className="btn btn-mod btn-color btn-large btn-circle btn-hover-anim mb-xs-10"
>
<span>Start a project</span>
</Link>
<Link
href={`/slick-about${dark ? "-dark" : ""}`}
className="link-hover-anim ms-2 ms-sm-5 me-2"
data-link-animate="y"
>
<span className="link-strong link-strong-unhovered">
Learn more <i className="mi-arrow-right size-24" aria-hidden="true"></i>
</span>
<span className="link-strong link-strong-hovered" aria-hidden="true">
Learn more <i className="mi-arrow-right size-24" aria-hidden="true"></i>
</span>
</Link>
</div>
</div>
</div>
{/* End Section Text */}
{/* Image */}
<div className="col-lg-6 d-flex align-items-center">
<div className="w-100 pe-lg-5">
<div className="composition-5">
<div className="composition-5-decoration opacity-065">
<Image src="/assets/images/demo-slick/decoration-1.svg" alt="" width={228} height={228} />
</div>
<div className="composition-5-image-1">
<div className="composition-5-image-1-inner">
<Image
src="/assets/images/demo-slick/hs-image-3.jpg"
alt="Image Description"
width={850}
height={914}
className="wow scaleOutIn"
data-wow-offset={200}
/>
</div>
</div>
<div className="composition-5-image-2">
<div className="composition-5-image-2-inner">
<Image
src="/assets/images/demo-slick/hs-image-4.jpg"
alt="Image Description"
width={400}
height={400}
className="wow scaleOutIn"
data-wow-offset={0}
/>
</div>
</div>
</div>
</div>
</div>
{/* End Images */}
</div>
</div>
</section>
<section
className={`page-section ${dark ? "bg-dark-1 bg-dark-alpha light-content" : "bg-light-alpha-90"} bg-scroll`}
style={{
backgroundImage: "url(/assets/images/demo-slick/section-bg-1.jpg)",
}}
>
<Facts />
</section>
<section className={`page-section ${dark ? "bg-dark-1 light-content" : ""} `}>
{dark ? <TestimonialsDark /> : <Testimonials />}
</section>
<section className="page-section pt-0">
<div className="container">
<div
className={`small-section ${
dark ? "bg-dark-2 light-content" : "bg-gray-light-1"
} ps-4 ps-lg-0 pe-4 pe-lg-0 round position-relative overflow-hidden`}
>
{/* Decoration Circles */}
<div className="decoration-12" />
<div className="decoration-13" />
{/* End Decoration Circles */}
<div className="row">
<div className="col-lg-10 offset-lg-1 col-xl-8 offset-xl-2">
<div className="row">
<div className="col-md-7 col-lg-8 text-center text-md-start mb-sm-20">
<h2 className="section-title-small mb-20">Like our creative works?</h2>
<p className="text-gray mb-0">
Quisque posuere mollis ullamcorper. Ut eget metus lorem ipsum posuere eget at ex. Aenean consequat
vitae lorem in vehicula.
</p>
</div>
<div className="col-md-5 col-lg-4 text-center text-md-end pt-2">
<Link
href={`/slick-portfolio${dark ? "-dark" : ""}`}
className="btn btn-mod btn-color btn-large btn-circle btn-hover-anim"
>
<span>View all works</span>
</Link>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
</>
);
}

@ -1,174 +0,0 @@
import Facts from "@/components/Facts";
import Testimonials from "@/components/Testimonials";
import TestimonialsDark from "@/components/TestimonialsDark";
import { features4 } from "@/data/features";
import Image from "next/image";
import Link from "next/link";
export const metadata = {
title: "Slick About || Cochise Oncology",
description: "Cochise Oncology",
};
const dark = false;
export default function SlickAboutPage() {
return (
<>
<section className="page-section bg-gradient-gray-light-1 bg-scroll overflow-hidden" id="home">
{/* <!-- Background Shape --> */}
<div className="bg-shape-1 wow fadeIn">
<Image src="/assets/images/demo-fancy/bg-shape-1.svg" width={1443} height={844} alt="" />
</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">
<h1 className="hs-title-10 mb-10 wow fadeInUp">About Studio</h1>
<p className="section-descr mb-0 wow fadeInUp" data-wow-delay="0.2s">
Crafting immersive digital journeys for brands.
</p>
</div>
</div>
</div>
</section>
<section className={`page-section scrollSpysection ${dark ? "bg-dark-1 light-content" : ""} `} id="about">
<div className="container position-relative">
<div className="row">
{/* Section Text */}
<div className="col-lg-6 d-flex align-items-center order-first order-lg-last mb-md-60 mb-sm-40">
<div className="w-100 wow fadeInUp">
<h2 className="section-caption-slick mb-30 mb-sm-20">Our Story</h2>
<h3 className="section-title mb-30">We believe in creatives with a&nbsp;passion to smart design.</h3>
<p className="text-gray mb-40">
Etiam fermentum vehicula faucibus. Praesent ullamcorper urna id arcu molestie scelerisque. Sed
imperdiet tristique mauris et faucibus. Maecenas semper augue non fringilla placerat. Curabitur luctus
erat sit amet ultricies aliquam. Donec dictum convallis mauris et maximus. Nullam massa arcu, porta
quis felis et, eleifend varius quam.
</p>
{/* Features List */}
<div className="row features-list mt-n20 mb-50 mb-sm-30">
{/* Features List Item */}
{features4.map((feature, index) => (
<div key={index} className="col-sm-6 col-lg-12 col-xl-6 d-flex mt-20">
<div className="features-list-icon">
<i className="mi-check" />
</div>
<div className="features-list-text">{feature.text}</div>
</div>
))}
{/* End Features List Item */}
</div>
{/* End Features List */}
<div className="local-scroll wch-unset">
<Link
href={`/slick-contact${dark ? "-dark" : ""}`}
className="btn btn-mod btn-color btn-large btn-circle btn-hover-anim mb-xs-10"
>
<span>Start a project</span>
</Link>
<Link
href={`/slick-about${dark ? "-dark" : ""}`}
className="link-hover-anim ms-2 ms-sm-5 me-2"
data-link-animate="y"
>
<span className="link-strong link-strong-unhovered">
Learn more <i className="mi-arrow-right size-24" aria-hidden="true"></i>
</span>
<span className="link-strong link-strong-hovered" aria-hidden="true">
Learn more <i className="mi-arrow-right size-24" aria-hidden="true"></i>
</span>
</Link>
</div>
</div>
</div>
{/* End Section Text */}
{/* Image */}
<div className="col-lg-6 d-flex align-items-center">
<div className="w-100 pe-lg-5">
<div className="composition-5">
<div className="composition-5-decoration opacity-065">
<Image src="/assets/images/demo-slick/decoration-1.svg" alt="" width={228} height={228} />
</div>
<div className="composition-5-image-1">
<div className="composition-5-image-1-inner">
<Image
src="/assets/images/demo-slick/hs-image-3.jpg"
alt="Image Description"
width={850}
height={914}
className="wow scaleOutIn"
data-wow-offset={200}
/>
</div>
</div>
<div className="composition-5-image-2">
<div className="composition-5-image-2-inner">
<Image
src="/assets/images/demo-slick/hs-image-4.jpg"
alt="Image Description"
width={400}
height={400}
className="wow scaleOutIn"
data-wow-offset={0}
/>
</div>
</div>
</div>
</div>
</div>
{/* End Images */}
</div>
</div>
</section>
<section
className={`page-section ${dark ? "bg-dark-1 bg-dark-alpha light-content" : "bg-light-alpha-90"} bg-scroll`}
style={{
backgroundImage: "url(/assets/images/demo-slick/section-bg-1.jpg)",
}}
>
<Facts />
</section>
<section className={`page-section ${dark ? "bg-dark-1 light-content" : ""} `}>
{dark ? <TestimonialsDark /> : <Testimonials />}
</section>
<section className="page-section pt-0">
<div className="container">
<div
className={`small-section ${
dark ? "bg-dark-2 light-content" : "bg-gray-light-1"
} ps-4 ps-lg-0 pe-4 pe-lg-0 round position-relative overflow-hidden`}
>
{/* Decoration Circles */}
<div className="decoration-12" />
<div className="decoration-13" />
{/* End Decoration Circles */}
<div className="row">
<div className="col-lg-10 offset-lg-1 col-xl-8 offset-xl-2">
<div className="row">
<div className="col-md-7 col-lg-8 text-center text-md-start mb-sm-20">
<h2 className="section-title-small mb-20">Like our creative works?</h2>
<p className="text-gray mb-0">
Quisque posuere mollis ullamcorper. Ut eget metus lorem ipsum posuere eget at ex. Aenean consequat
vitae lorem in vehicula.
</p>
</div>
<div className="col-md-5 col-lg-4 text-center text-md-end pt-2">
<Link
href={`/slick-portfolio${dark ? "-dark" : ""}`}
className="btn btn-mod btn-color btn-large btn-circle btn-hover-anim"
>
<span>View all works</span>
</Link>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
</>
);
}

@ -1,76 +0,0 @@
import Portfolio from "@/components/Portfolio";
import Image from "next/image";
import Link from "next/link";
export const metadata = {
title: "Slick Portfolio || Cochise Oncology",
description: "Cochise Oncology",
};
const dark = false;
export default function SlickPortfolioPage() {
return (
<>
<section className="page-section bg-gradient-gray-light-1 bg-scroll overflow-hidden" id="home">
{/* <!-- Background Shape --> */}
<div className="bg-shape-1 wow fadeIn">
<Image src="/assets/images/demo-fancy/bg-shape-1.svg" width={1443} height={844} alt="" />
</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">
<h1 className="hs-title-10 mb-10 wow fadeInUp">Portfolio</h1>
<p className="section-descr mb-0 wow fadeInUp" data-wow-delay="0.2s">
Explore captivating web design solutions.
</p>
</div>
</div>
</div>
</section>
<section className={`page-section scrollSpysection ${dark ? "bg-dark-1 light-content" : ""} `} id="portfolio">
<div className="container position-relative">
<Portfolio />
</div>
</section>
<section className="page-section pt-0">
<div className="container">
<div
className={`small-section ${
dark ? "bg-dark-2 light-content" : "bg-gray-light-1"
} ps-4 ps-lg-0 pe-4 pe-lg-0 round position-relative overflow-hidden`}
>
{/* Decoration Circles */}
<div className="decoration-12" />
<div className="decoration-13" />
{/* End Decoration Circles */}
<div className="row">
<div className="col-lg-10 offset-lg-1 col-xl-8 offset-xl-2">
<div className="row">
<div className="col-md-7 col-lg-8 text-center text-md-start mb-sm-20">
<h2 className="section-title-small mb-20">Like our creative works?</h2>
<p className="text-gray mb-0">
Quisque posuere mollis ullamcorper. Ut eget metus lorem ipsum posuere eget at ex. Aenean consequat
vitae lorem in vehicula.
</p>
</div>
<div className="col-md-5 col-lg-4 text-center text-md-end pt-2">
<Link
href={`/slick-portfolio${dark ? "-dark" : ""}`}
className="btn btn-mod btn-color btn-large btn-circle btn-hover-anim"
>
<span>View all works</span>
</Link>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
</>
);
}

@ -1,191 +0,0 @@
import Features from "@/components/Features";
import Service from "@/components/Service";
import Image from "next/image";
import Link from "next/link";
export const metadata = {
title: "Slick Services || Cochise Oncology",
description: "Cochise Oncology",
};
const dark = false;
export default function SlickServicesPage() {
return (
<>
<section className="page-section bg-gradient-gray-light-1 bg-scroll overflow-hidden" id="home">
{/* <!-- Background Shape --> */}
<div className="bg-shape-1 wow fadeIn">
<Image src="/assets/images/demo-fancy/bg-shape-1.svg" width={1443} height={844} alt="" />
</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">
<h1 className="hs-title-10 mb-10 wow fadeInUp">Our Services</h1>
<p className="section-descr mb-0 wow fadeInUp" data-wow-delay="0.2s">
Web design that leaves an impression.
</p>
</div>
</div>
</div>
</section>
<section className={`page-section scrollSpysection ${dark ? "bg-dark-1 light-content" : ""} `} id="services">
<div className="container position-relative">
<div className="row">
{/* Left Column */}
<div className="col-lg-5 mb-md-60 mb-sm-40">
<h2 className="section-caption-slick mb-30 mb-sm-20">WHAT WE DO</h2>
<h3 className="section-title mb-30">We provide the best development solutions.</h3>
<p className="section-descr mb-50 mb-sm-40">
The power of design help us to solve complex problems and cultivate business solutions.
</p>
<div className="local-scroll">
<Link
href={`/slick-contact${dark ? "-dark" : ""}`}
className="btn btn-mod btn-color btn-large btn-circle btn-hover-anim mb-xs-10"
>
<span>Request a quote</span>
</Link>
</div>
</div>
{/* End Left Column */}
{/* Right Column */}
<Service />
{/* End Right Column */}
</div>
<div className="page-section">
<hr className="mt-0 mb-0" />
</div>
<div className="row mb-50 mb-sm-50">
<div className="col-md-10 offset-md-1 col-lg-8 offset-lg-2 col-xl-6 offset-xl-3 text-center">
<h2 className="section-title-small mb-20">Why choose Resonance?</h2>
<p className="text-gray mb-0">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et
dolore magna aliqua.
</p>
</div>
</div>
{/* Features Grid */}
<Features />
{/* End Features Grid */}
</div>
</section>
<hr className={`mt-0 mb-0 ${dark ? "white" : ""} `} />
<section className={`page-section ${dark ? "bg-dark-1 light-content" : ""}`}>
<div className="container position-relative">
<div className="row">
{/* Images */}
<div className="col-lg-7 d-flex align-items-start mb-md-60 mb-xs-30">
<div className="call-action-2-images">
<div
className="call-action-2-image-1"
data-rellax-y=""
data-rellax-speed="0.5"
data-rellax-percentage="0.7"
>
<Image
width={386}
height={400}
src="/assets/images/promo-3.jpg"
alt="Image Description"
className="wow scaleOutIn"
data-wow-duration="1.2s"
data-wow-offset={255}
/>
</div>
<div className="call-action-2-image-2">
<Image
width={810}
height={512}
src="/assets/images/promo-4.jpg"
alt="Image Description"
className="wow scaleOutIn"
data-wow-duration="1.2s"
data-wow-offset={134}
/>
</div>
<div
className="call-action-2-image-3"
data-rellax-y=""
data-rellax-speed="-0.5"
data-rellax-percentage="0.5"
>
<Image
width={386}
height={500}
src="/assets/images/promo-5.jpg"
alt="Image Description"
className="wow scaleOutIn"
data-wow-duration="1.2s"
data-wow-offset={0}
/>
</div>
</div>
</div>
{/* End Images */}
{/* Text */}
<div className="col-lg-5 d-flex align-items-center">
<div className="wow fadeInUp" data-wow-duration="1.2s" data-wow-offset="255">
<h2 className="section-caption-slick mb-30 mb-sm-20">How we work?</h2>
<h2 className="section-title mb-30">Get the power of the professional services</h2>
<p className="text-gray">
Pellentesque ultrices purus sit amet velit eleifend, eu iaculis velit malesuada. Proin id mattis elit.
Nullam a nisi tellus. Mauris rhoncus diam in sem maximus, nec luctus justo imperdiet. Etiam fermentum
vehicula faucibus.
</p>
<p className="text-gray mb-0">
Praesent ullamcorper urna id arcu molestie scelerisque. Sed imperdiet tristique mauris et faucibus.
Maecenas semper augue non fringilla placerat. Curabitur luctus erat sit amet ultricies aliquam. Donec
dictum convallis mauris et maximus. Nullam massa arcu, porta quis felis et, eleifend varius quam.
</p>
</div>
</div>
{/* End Text */}
</div>
</div>
</section>
<section className="page-section pt-0">
<div className="container">
<div
className={`small-section ${
dark ? "bg-dark-2 light-content" : "bg-gray-light-1"
} ps-4 ps-lg-0 pe-4 pe-lg-0 round position-relative overflow-hidden`}
>
{/* Decoration Circles */}
<div className="decoration-12" />
<div className="decoration-13" />
{/* End Decoration Circles */}
<div className="row">
<div className="col-lg-10 offset-lg-1 col-xl-8 offset-xl-2">
<div className="row">
<div className="col-md-7 col-lg-8 text-center text-md-start mb-sm-20">
<h2 className="section-title-small mb-20">Like our creative works?</h2>
<p className="text-gray mb-0">
Quisque posuere mollis ullamcorper. Ut eget metus lorem ipsum posuere eget at ex. Aenean consequat
vitae lorem in vehicula.
</p>
</div>
<div className="col-md-5 col-lg-4 text-center text-md-end pt-2">
<Link
href={`/slick-portfolio${dark ? "-dark" : ""}`}
className="btn btn-mod btn-color btn-large btn-circle btn-hover-anim"
>
<span>View all works</span>
</Link>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
</>
);
}

@ -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 its
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>

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

@ -1,123 +0,0 @@
@use '../shared.scss';
.select {
position: relative;
margin-bottom: var(--base);
}
.label {
margin-bottom: 10px;
display: block;
}
.reactSelect {
display: flex;
:global {
div.rs__control {
@include shared.formInput;
height: auto;
}
.rs__input-container {
color: var(--color-black);
}
.rs__value-container {
padding: 0;
> * {
margin-top: 0;
margin-bottom: 0;
padding-top: 0;
padding-bottom: 0;
}
}
.rs__single-value {
color: var(--color-black);
}
.rs__indicators {
position: absolute;
top: calc(var(--base) * 0.9);
right: calc(var(--base) * 0.9);
.arrow {
transform: rotate(90deg);
}
}
.rs__indicator {
padding: 0px 4px;
cursor: pointer;
svg path {
fill: var(--color-dark-gray);
}
&:hover {
svg path {
fill: var(--color-dark-gray);
}
}
}
.rs__indicator-separator {
display: none;
}
.rs__menu {
color: var(--color-black);
background-color: var(--color-white);
z-index: 2;
border-radius: 0;
box-shadow: 0 4px 11px hsl(0deg 0% 0% / 10%);
}
.rs__menu-list {
padding: calc(var(--base) / 4) 0;
}
.rs__group-heading {
margin-bottom: calc(var(--base) / 2);
}
.rs__option {
font-size: 1rem;
padding: calc(var(--base) / 2) var(--base);
&--is-focused {
background-color: var(--color-light-gray);
color: var(--color-black);
}
&--is-selected {
background-color: var(--color-light-gray);
color: var(--color-black);
}
}
.rs__multi-value {
padding: 0;
background: var(--color-light-gray);
}
.rs__multi-value__label {
max-width: 150px;
color: var(--color-black);
padding: calc(var(--base) / 8) calc(var(--base) / 4);
}
.rs__multi-value__remove {
cursor: pointer;
&:hover {
color: var(--color-black);
background: var(--color-light-gray);
}
}
.rs__clear-indicator {
cursor: pointer;
}
}
}

@ -1,50 +0,0 @@
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 { Error } from '../Error'
import { Width } from '../Width'
import classes from './index.module.scss'
import { countryOptions } from './options'
export const Country: React.FC<
{
control: Control<FieldValues, any>
errors: Partial<
FieldErrorsImpl<{
[x: string]: any
}>
>
} & CountryField
> = ({ name, control, errors, label, required, width }) => {
return (
<Width width={width}>
<div className={classes.select}>
<label className={classes.label} htmlFor={name}>
{label}
</label>
<Controller
control={control}
defaultValue=""
name={name}
render={({ field: { onChange, value } }) => (
<ReactSelect
className={classes.reactSelect}
classNamePrefix="rs"
inputId={name}
instanceId={name}
onChange={(val) => onChange(val ? val.value : '')}
options={countryOptions}
value={countryOptions.find((c) => c.value === value)}
/>
)}
rules={{ required }}
/>
{required && errors[name] && <Error />}
</div>
</Width>
)
}

@ -1,982 +0,0 @@
export const countryOptions = [
{
label: 'Afghanistan',
value: 'AF',
},
{
label: 'Åland Islands',
value: 'AX',
},
{
label: 'Albania',
value: 'AL',
},
{
label: 'Algeria',
value: 'DZ',
},
{
label: 'American Samoa',
value: 'AS',
},
{
label: 'Andorra',
value: 'AD',
},
{
label: 'Angola',
value: 'AO',
},
{
label: 'Anguilla',
value: 'AI',
},
{
label: 'Antarctica',
value: 'AQ',
},
{
label: 'Antigua and Barbuda',
value: 'AG',
},
{
label: 'Argentina',
value: 'AR',
},
{
label: 'Armenia',
value: 'AM',
},
{
label: 'Aruba',
value: 'AW',
},
{
label: 'Australia',
value: 'AU',
},
{
label: 'Austria',
value: 'AT',
},
{
label: 'Azerbaijan',
value: 'AZ',
},
{
label: 'Bahamas',
value: 'BS',
},
{
label: 'Bahrain',
value: 'BH',
},
{
label: 'Bangladesh',
value: 'BD',
},
{
label: 'Barbados',
value: 'BB',
},
{
label: 'Belarus',
value: 'BY',
},
{
label: 'Belgium',
value: 'BE',
},
{
label: 'Belize',
value: 'BZ',
},
{
label: 'Benin',
value: 'BJ',
},
{
label: 'Bermuda',
value: 'BM',
},
{
label: 'Bhutan',
value: 'BT',
},
{
label: 'Bolivia',
value: 'BO',
},
{
label: 'Bosnia and Herzegovina',
value: 'BA',
},
{
label: 'Botswana',
value: 'BW',
},
{
label: 'Bouvet Island',
value: 'BV',
},
{
label: 'Brazil',
value: 'BR',
},
{
label: 'British Indian Ocean Territory',
value: 'IO',
},
{
label: 'Brunei Darussalam',
value: 'BN',
},
{
label: 'Bulgaria',
value: 'BG',
},
{
label: 'Burkina Faso',
value: 'BF',
},
{
label: 'Burundi',
value: 'BI',
},
{
label: 'Cambodia',
value: 'KH',
},
{
label: 'Cameroon',
value: 'CM',
},
{
label: 'Canada',
value: 'CA',
},
{
label: 'Cape Verde',
value: 'CV',
},
{
label: 'Cayman Islands',
value: 'KY',
},
{
label: 'Central African Republic',
value: 'CF',
},
{
label: 'Chad',
value: 'TD',
},
{
label: 'Chile',
value: 'CL',
},
{
label: 'China',
value: 'CN',
},
{
label: 'Christmas Island',
value: 'CX',
},
{
label: 'Cocos (Keeling) Islands',
value: 'CC',
},
{
label: 'Colombia',
value: 'CO',
},
{
label: 'Comoros',
value: 'KM',
},
{
label: 'Congo',
value: 'CG',
},
{
label: 'Congo, The Democratic Republic of the',
value: 'CD',
},
{
label: 'Cook Islands',
value: 'CK',
},
{
label: 'Costa Rica',
value: 'CR',
},
{
label: "Cote D'Ivoire",
value: 'CI',
},
{
label: 'Croatia',
value: 'HR',
},
{
label: 'Cuba',
value: 'CU',
},
{
label: 'Cyprus',
value: 'CY',
},
{
label: 'Czech Republic',
value: 'CZ',
},
{
label: 'Denmark',
value: 'DK',
},
{
label: 'Djibouti',
value: 'DJ',
},
{
label: 'Dominica',
value: 'DM',
},
{
label: 'Dominican Republic',
value: 'DO',
},
{
label: 'Ecuador',
value: 'EC',
},
{
label: 'Egypt',
value: 'EG',
},
{
label: 'El Salvador',
value: 'SV',
},
{
label: 'Equatorial Guinea',
value: 'GQ',
},
{
label: 'Eritrea',
value: 'ER',
},
{
label: 'Estonia',
value: 'EE',
},
{
label: 'Ethiopia',
value: 'ET',
},
{
label: 'Falkland Islands (Malvinas)',
value: 'FK',
},
{
label: 'Faroe Islands',
value: 'FO',
},
{
label: 'Fiji',
value: 'FJ',
},
{
label: 'Finland',
value: 'FI',
},
{
label: 'France',
value: 'FR',
},
{
label: 'French Guiana',
value: 'GF',
},
{
label: 'French Polynesia',
value: 'PF',
},
{
label: 'French Southern Territories',
value: 'TF',
},
{
label: 'Gabon',
value: 'GA',
},
{
label: 'Gambia',
value: 'GM',
},
{
label: 'Georgia',
value: 'GE',
},
{
label: 'Germany',
value: 'DE',
},
{
label: 'Ghana',
value: 'GH',
},
{
label: 'Gibraltar',
value: 'GI',
},
{
label: 'Greece',
value: 'GR',
},
{
label: 'Greenland',
value: 'GL',
},
{
label: 'Grenada',
value: 'GD',
},
{
label: 'Guadeloupe',
value: 'GP',
},
{
label: 'Guam',
value: 'GU',
},
{
label: 'Guatemala',
value: 'GT',
},
{
label: 'Guernsey',
value: 'GG',
},
{
label: 'Guinea',
value: 'GN',
},
{
label: 'Guinea-Bissau',
value: 'GW',
},
{
label: 'Guyana',
value: 'GY',
},
{
label: 'Haiti',
value: 'HT',
},
{
label: 'Heard Island and Mcdonald Islands',
value: 'HM',
},
{
label: 'Holy See (Vatican City State)',
value: 'VA',
},
{
label: 'Honduras',
value: 'HN',
},
{
label: 'Hong Kong',
value: 'HK',
},
{
label: 'Hungary',
value: 'HU',
},
{
label: 'Iceland',
value: 'IS',
},
{
label: 'India',
value: 'IN',
},
{
label: 'Indonesia',
value: 'ID',
},
{
label: 'Iran, Islamic Republic Of',
value: 'IR',
},
{
label: 'Iraq',
value: 'IQ',
},
{
label: 'Ireland',
value: 'IE',
},
{
label: 'Isle of Man',
value: 'IM',
},
{
label: 'Israel',
value: 'IL',
},
{
label: 'Italy',
value: 'IT',
},
{
label: 'Jamaica',
value: 'JM',
},
{
label: 'Japan',
value: 'JP',
},
{
label: 'Jersey',
value: 'JE',
},
{
label: 'Jordan',
value: 'JO',
},
{
label: 'Kazakhstan',
value: 'KZ',
},
{
label: 'Kenya',
value: 'KE',
},
{
label: 'Kiribati',
value: 'KI',
},
{
label: "Democratic People's Republic of Korea",
value: 'KP',
},
{
label: 'Korea, Republic of',
value: 'KR',
},
{
label: 'Kosovo',
value: 'XK',
},
{
label: 'Kuwait',
value: 'KW',
},
{
label: 'Kyrgyzstan',
value: 'KG',
},
{
label: "Lao People's Democratic Republic",
value: 'LA',
},
{
label: 'Latvia',
value: 'LV',
},
{
label: 'Lebanon',
value: 'LB',
},
{
label: 'Lesotho',
value: 'LS',
},
{
label: 'Liberia',
value: 'LR',
},
{
label: 'Libyan Arab Jamahiriya',
value: 'LY',
},
{
label: 'Liechtenstein',
value: 'LI',
},
{
label: 'Lithuania',
value: 'LT',
},
{
label: 'Luxembourg',
value: 'LU',
},
{
label: 'Macao',
value: 'MO',
},
{
label: 'Macedonia, The Former Yugoslav Republic of',
value: 'MK',
},
{
label: 'Madagascar',
value: 'MG',
},
{
label: 'Malawi',
value: 'MW',
},
{
label: 'Malaysia',
value: 'MY',
},
{
label: 'Maldives',
value: 'MV',
},
{
label: 'Mali',
value: 'ML',
},
{
label: 'Malta',
value: 'MT',
},
{
label: 'Marshall Islands',
value: 'MH',
},
{
label: 'Martinique',
value: 'MQ',
},
{
label: 'Mauritania',
value: 'MR',
},
{
label: 'Mauritius',
value: 'MU',
},
{
label: 'Mayotte',
value: 'YT',
},
{
label: 'Mexico',
value: 'MX',
},
{
label: 'Micronesia, Federated States of',
value: 'FM',
},
{
label: 'Moldova, Republic of',
value: 'MD',
},
{
label: 'Monaco',
value: 'MC',
},
{
label: 'Mongolia',
value: 'MN',
},
{
label: 'Montenegro',
value: 'ME',
},
{
label: 'Montserrat',
value: 'MS',
},
{
label: 'Morocco',
value: 'MA',
},
{
label: 'Mozambique',
value: 'MZ',
},
{
label: 'Myanmar',
value: 'MM',
},
{
label: 'Namibia',
value: 'NA',
},
{
label: 'Nauru',
value: 'NR',
},
{
label: 'Nepal',
value: 'NP',
},
{
label: 'Netherlands',
value: 'NL',
},
{
label: 'Netherlands Antilles',
value: 'AN',
},
{
label: 'New Caledonia',
value: 'NC',
},
{
label: 'New Zealand',
value: 'NZ',
},
{
label: 'Nicaragua',
value: 'NI',
},
{
label: 'Niger',
value: 'NE',
},
{
label: 'Nigeria',
value: 'NG',
},
{
label: 'Niue',
value: 'NU',
},
{
label: 'Norfolk Island',
value: 'NF',
},
{
label: 'Northern Mariana Islands',
value: 'MP',
},
{
label: 'Norway',
value: 'NO',
},
{
label: 'Oman',
value: 'OM',
},
{
label: 'Pakistan',
value: 'PK',
},
{
label: 'Palau',
value: 'PW',
},
{
label: 'Palestinian Territory, Occupied',
value: 'PS',
},
{
label: 'Panama',
value: 'PA',
},
{
label: 'Papua New Guinea',
value: 'PG',
},
{
label: 'Paraguay',
value: 'PY',
},
{
label: 'Peru',
value: 'PE',
},
{
label: 'Philippines',
value: 'PH',
},
{
label: 'Pitcairn',
value: 'PN',
},
{
label: 'Poland',
value: 'PL',
},
{
label: 'Portugal',
value: 'PT',
},
{
label: 'Puerto Rico',
value: 'PR',
},
{
label: 'Qatar',
value: 'QA',
},
{
label: 'Reunion',
value: 'RE',
},
{
label: 'Romania',
value: 'RO',
},
{
label: 'Russian Federation',
value: 'RU',
},
{
label: 'Rwanda',
value: 'RW',
},
{
label: 'Saint Helena',
value: 'SH',
},
{
label: 'Saint Kitts and Nevis',
value: 'KN',
},
{
label: 'Saint Lucia',
value: 'LC',
},
{
label: 'Saint Pierre and Miquelon',
value: 'PM',
},
{
label: 'Saint Vincent and the Grenadines',
value: 'VC',
},
{
label: 'Samoa',
value: 'WS',
},
{
label: 'San Marino',
value: 'SM',
},
{
label: 'Sao Tome and Principe',
value: 'ST',
},
{
label: 'Saudi Arabia',
value: 'SA',
},
{
label: 'Senegal',
value: 'SN',
},
{
label: 'Serbia',
value: 'RS',
},
{
label: 'Seychelles',
value: 'SC',
},
{
label: 'Sierra Leone',
value: 'SL',
},
{
label: 'Singapore',
value: 'SG',
},
{
label: 'Slovakia',
value: 'SK',
},
{
label: 'Slovenia',
value: 'SI',
},
{
label: 'Solomon Islands',
value: 'SB',
},
{
label: 'Somalia',
value: 'SO',
},
{
label: 'South Africa',
value: 'ZA',
},
{
label: 'South Georgia and the South Sandwich Islands',
value: 'GS',
},
{
label: 'Spain',
value: 'ES',
},
{
label: 'Sri Lanka',
value: 'LK',
},
{
label: 'Sudan',
value: 'SD',
},
{
label: 'Suriname',
value: 'SR',
},
{
label: 'Svalbard and Jan Mayen',
value: 'SJ',
},
{
label: 'Swaziland',
value: 'SZ',
},
{
label: 'Sweden',
value: 'SE',
},
{
label: 'Switzerland',
value: 'CH',
},
{
label: 'Syrian Arab Republic',
value: 'SY',
},
{
label: 'Taiwan',
value: 'TW',
},
{
label: 'Tajikistan',
value: 'TJ',
},
{
label: 'Tanzania, United Republic of',
value: 'TZ',
},
{
label: 'Thailand',
value: 'TH',
},
{
label: 'Timor-Leste',
value: 'TL',
},
{
label: 'Togo',
value: 'TG',
},
{
label: 'Tokelau',
value: 'TK',
},
{
label: 'Tonga',
value: 'TO',
},
{
label: 'Trinidad and Tobago',
value: 'TT',
},
{
label: 'Tunisia',
value: 'TN',
},
{
label: 'Turkey',
value: 'TR',
},
{
label: 'Turkmenistan',
value: 'TM',
},
{
label: 'Turks and Caicos Islands',
value: 'TC',
},
{
label: 'Tuvalu',
value: 'TV',
},
{
label: 'Uganda',
value: 'UG',
},
{
label: 'Ukraine',
value: 'UA',
},
{
label: 'United Arab Emirates',
value: 'AE',
},
{
label: 'United Kingdom',
value: 'GB',
},
{
label: 'United States',
value: 'US',
},
{
label: 'United States Minor Outlying Islands',
value: 'UM',
},
{
label: 'Uruguay',
value: 'UY',
},
{
label: 'Uzbekistan',
value: 'UZ',
},
{
label: 'Vanuatu',
value: 'VU',
},
{
label: 'Venezuela',
value: 'VE',
},
{
label: 'Viet Nam',
value: 'VN',
},
{
label: 'Virgin Islands, British',
value: 'VG',
},
{
label: 'Virgin Islands, U.S.',
value: 'VI',
},
{
label: 'Wallis and Futuna',
value: 'WF',
},
{
label: 'Western Sahara',
value: 'EH',
},
{
label: 'Yemen',
value: 'YE',
},
{
label: 'Zambia',
value: 'ZM',
},
{
label: 'Zimbabwe',
value: 'ZW',
},
]

@ -1,7 +0,0 @@
.gutterLeft {
padding-left: var(--gutter-h);
}
.gutterRight {
padding-right: var(--gutter-h);
}

@ -1,26 +0,0 @@
import React from 'react'
import classes from './index.module.scss'
type Props = {
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
return (
<div
className={[left && classes.gutterLeft, right && classes.gutterRight, className]
.filter(Boolean)
.join(' ')}
ref={ref}
>
{children}
</div>
)
}

@ -1,9 +0,0 @@
@use "../../css/queries.scss" as *;
.message {
margin: var(--base) 0 var(--base) 0;
@include mid-break {
margin: calc(var(--base) * 0.5) 0 calc(var(--base) * 0.5) 0;
}
}

@ -1,15 +0,0 @@
import type { MessageField } from "@payloadcms/plugin-form-builder/types";
import React from "react";
import RichText from "../RichText";
import { Width } from "../Width";
import classes from "./index.module.scss";
export const Message: React.FC<MessageField> = ({ message }) => {
return (
<Width width={100}>
<RichText className={classes.message} content={message} />
</Width>
);
};

@ -1,15 +0,0 @@
@use '../shared.scss';
.wrap {
position: relative;
margin-bottom: var(--base);
}
.input {
@include shared.formInput;
}
.label {
margin-bottom: 10px;
display: block;
}

@ -5,7 +5,6 @@ import React from "react";
import { Error } from "../Error";
import { Width } from "../Width";
import classes from "./index.module.scss";
export const Number: React.FC<
{
@ -19,11 +18,14 @@ export const Number: React.FC<
> = ({ name, errors, label, register, required: requiredFromProps, width }) => {
return (
<Width width={width}>
<div className={classes.wrap}>
<label className={classes.label} htmlFor={name}>
{label}
</label>
<input className={classes.input} id={name} type="number" {...register(name, { required: requiredFromProps })} />
<div className="form-group pr-4">
<label htmlFor={name}>{label}</label>
<input
type="number"
id={name}
className="input-lg input-circle form-control"
{...register(name, { required: requiredFromProps })}
/>
{requiredFromProps && errors[name] && <Error />}
</div>
</Width>

@ -1,123 +0,0 @@
@use '../shared.scss';
.select {
position: relative;
margin-bottom: var(--base);
}
.label {
margin-bottom: 10px;
display: block;
}
.reactSelect {
display: flex;
:global {
div.rs__control {
@include shared.formInput;
height: auto;
}
.rs__input-container {
color: var(--color-black);
}
.rs__value-container {
padding: 0;
> * {
margin-top: 0;
margin-bottom: 0;
padding-top: 0;
padding-bottom: 0;
}
}
.rs__single-value {
color: var(--color-black);
}
.rs__indicators {
position: absolute;
top: calc(var(--base) * 0.9);
right: calc(var(--base) * 0.9);
.arrow {
transform: rotate(90deg);
}
}
.rs__indicator {
padding: 0px 4px;
cursor: pointer;
svg path {
fill: var(--color-dark-gray);
}
&:hover {
svg path {
fill: var(--color-dark-gray);
}
}
}
.rs__indicator-separator {
display: none;
}
.rs__menu {
color: var(--color-black);
background-color: var(--color-white);
z-index: 2;
border-radius: 0;
box-shadow: 0 4px 11px hsl(0deg 0% 0% / 10%);
}
.rs__menu-list {
padding: calc(var(--base) / 4) 0;
}
.rs__group-heading {
margin-bottom: calc(var(--base) / 2);
}
.rs__option {
font-size: 1rem;
padding: calc(var(--base) / 2) var(--base);
&--is-focused {
background-color: var(--color-light-gray);
color: var(--color-black);
}
&--is-selected {
background-color: var(--color-light-gray);
color: var(--color-black);
}
}
.rs__multi-value {
padding: 0;
background: var(--color-light-gray);
}
.rs__multi-value__label {
max-width: 150px;
color: var(--color-black);
padding: calc(var(--base) / 8) calc(var(--base) / 4);
}
.rs__multi-value__remove {
cursor: pointer;
&:hover {
color: var(--color-black);
background: var(--color-light-gray);
}
}
.rs__clear-indicator {
cursor: pointer;
}
}
}

@ -1,50 +0,0 @@
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 { Error } from '../Error'
import { Width } from '../Width'
import classes from './index.module.scss'
import { stateOptions } from './options'
export const State: React.FC<
{
control: Control<FieldValues, any>
errors: Partial<
FieldErrorsImpl<{
[x: string]: any
}>
>
} & StateField
> = ({ name, control, errors, label, required, width }) => {
return (
<Width width={width}>
<div className={classes.select}>
<label className={classes.label} htmlFor={name}>
{label}
</label>
<Controller
control={control}
defaultValue=""
name={name}
render={({ field: { onChange, value } }) => (
<ReactSelect
className={classes.reactSelect}
classNamePrefix="rs"
id={name}
instanceId={name}
onChange={(val) => onChange(val ? val.value : '')}
options={stateOptions}
value={stateOptions.find((t) => t.value === value)}
/>
)}
rules={{ required }}
/>
{required && errors[name] && <Error />}
</div>
</Width>
)
}

@ -1,52 +0,0 @@
export const stateOptions = [
{ label: 'Alabama', value: 'AL' },
{ label: 'Alaska', value: 'AK' },
{ label: 'Arizona', value: 'AZ' },
{ label: 'Arkansas', value: 'AR' },
{ label: 'California', value: 'CA' },
{ label: 'Colorado', value: 'CO' },
{ label: 'Connecticut', value: 'CT' },
{ label: 'Delaware', value: 'DE' },
{ label: 'Florida', value: 'FL' },
{ label: 'Georgia', value: 'GA' },
{ label: 'Hawaii', value: 'HI' },
{ label: 'Idaho', value: 'ID' },
{ label: 'Illinois', value: 'IL' },
{ label: 'Indiana', value: 'IN' },
{ label: 'Iowa', value: 'IA' },
{ label: 'Kansas', value: 'KS' },
{ label: 'Kentucky', value: 'KY' },
{ label: 'Louisiana', value: 'LA' },
{ label: 'Maine', value: 'ME' },
{ label: 'Maryland', value: 'MD' },
{ label: 'Massachusetts', value: 'MA' },
{ label: 'Michigan', value: 'MI' },
{ label: 'Minnesota', value: 'MN' },
{ label: 'Mississippi', value: 'MS' },
{ label: 'Missouri', value: 'MO' },
{ label: 'Montana', value: 'MT' },
{ label: 'Nebraska', value: 'NE' },
{ label: 'Nevada', value: 'NV' },
{ label: 'New Hampshire', value: 'NH' },
{ label: 'New Jersey', value: 'NJ' },
{ label: 'New Mexico', value: 'NM' },
{ label: 'New York', value: 'NY' },
{ label: 'North Carolina', value: 'NC' },
{ label: 'North Dakota', value: 'ND' },
{ label: 'Ohio', value: 'OH' },
{ label: 'Oklahoma', value: 'OK' },
{ label: 'Oregon', value: 'OR' },
{ label: 'Pennsylvania', value: 'PA' },
{ label: 'Rhode Island', value: 'RI' },
{ label: 'South Carolina', value: 'SC' },
{ label: 'South Dakota', value: 'SD' },
{ label: 'Tennessee', value: 'TN' },
{ label: 'Texas', value: 'TX' },
{ label: 'Utah', value: 'UT' },
{ label: 'Vermont', value: 'VT' },
{ label: 'Virginia', value: 'VA' },
{ label: 'Washington', value: 'WA' },
{ label: 'West Virginia', value: 'WV' },
{ label: 'Wisconsin', value: 'WI' },
{ label: 'Wyoming', value: 'WY' },
]

@ -1,23 +0,0 @@
.top-large {
padding-top: var(--block-padding);
}
.top-medium {
padding-top: calc(var(--block-padding) / 2);
}
.top-small {
padding-top: calc(var(--block-padding) / 3);
}
.bottom-large {
padding-bottom: var(--block-padding);
}
.bottom-medium {
padding-bottom: calc(var(--block-padding) / 2);
}
.bottom-small {
padding-bottom: calc(var(--block-padding) / 3);
}

@ -1,29 +0,0 @@
import React from 'react'
import classes from './index.module.scss'
export type VerticalPaddingOptions = 'large' | 'medium' | 'none' | 'small'
type Props = {
bottom?: VerticalPaddingOptions
children: React.ReactNode
className?: string
top?: VerticalPaddingOptions
}
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(' ')}
>
{children}
</div>
)
}

@ -1,10 +0,0 @@
@use "../../css/queries.scss" as *;
.width {
padding-left: calc(var(--base) * 0.5);
padding-right: calc(var(--base) * 0.5);
@include mid-break {
width: 100% !important;
}
}

@ -1,14 +1,8 @@
import * as React from 'react'
import classes from './index.module.scss'
import * as React from "react";
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>
)
}
return <div style={{ width: width ? `${width}%` : undefined }}>{children}</div>;
};

@ -1,21 +1,15 @@
import { Checkbox } from './Checkbox'
import { Country } from './Country'
import { Email } from './Email'
import { Message } from './Message'
import { Number } from './Number'
import { Select } from './Select'
import { State } from './State'
import { Text } from './Text'
import { Textarea } from './Textarea'
import { Checkbox } from "./Checkbox";
import { Email } from "./Email";
import { Number } from "./Number";
import { Select } from "./Select";
import { Text } from "./Text";
import { Textarea } from "./Textarea";
export const fields = {
checkbox: Checkbox,
country: Country,
email: Email,
message: Message,
number: Number,
select: Select,
state: State,
text: Text,
textarea: Textarea,
}
};

@ -1,129 +0,0 @@
@use './queries.scss' as *;
@use './colors.scss' as *;
@use './type.scss' as *;
:root {
--breakpoint-xs-width: #{$breakpoint-xs-width};
--breakpoint-s-width: #{$breakpoint-s-width};
--breakpoint-m-width: #{$breakpoint-m-width};
--breakpoint-l-width: #{$breakpoint-l-width};
--scrollbar-width: 17px;
--base: 24px;
--font-body: system-ui;
--font-mono: 'Roboto Mono', monospace;
--gutter-h: 180px;
--block-padding: 120px;
--header-z-index: 100;
--modal-z-index: 90;
@include large-break {
--gutter-h: 144px;
--block-padding: 96px;
}
@include mid-break {
--gutter-h: 24px;
--block-padding: 60px;
}
}
/////////////////////////////
// GLOBAL STYLES
/////////////////////////////
* {
box-sizing: border-box;
}
html {
@extend %body;
background: var(--color-white);
-webkit-font-smoothing: antialiased;
}
html,
body,
#app {
height: 100%;
}
body {
font-family: var(--font-body);
color: var(--color-black);
margin: 0;
}
::selection {
background: var(--color-green);
color: var(--color-black);
}
::-moz-selection {
background: var(--color-green);
color: var(--color-black);
}
img {
max-width: 100%;
height: auto;
display: block;
}
h1 {
@extend %h1;
}
h2 {
@extend %h2;
}
h3 {
@extend %h3;
}
h4 {
@extend %h4;
}
h5 {
@extend %h5;
}
h6 {
@extend %h6;
}
p {
margin: var(--base) 0;
@include mid-break {
margin: calc(var(--base) * 0.75) 0;
}
}
ul,
ol {
padding-left: var(--base);
margin: 0 0 var(--base);
}
a {
color: currentColor;
&:focus {
opacity: 0.8;
outline: none;
}
&:active {
opacity: 0.7;
outline: none;
}
}
svg {
vertical-align: middle;
}

@ -1,10 +0,0 @@
:root {
--color-red: rgb(255, 0, 0);
--color-green: rgb(178, 255, 214);
--color-white: rgb(255, 255, 255);
--color-dark-gray: rgb(51, 52, 52);
--color-mid-gray: rgb(196, 196, 196);
--color-gray: rgb(212, 212, 212);
--color-light-gray: rgb(244, 244, 244);
--color-black: rgb(0, 0, 0);
}

@ -1,2 +0,0 @@
@forward './queries.scss';
@forward './type.scss';

@ -1,32 +0,0 @@
$breakpoint-xs-width: 400px;
$breakpoint-s-width: 768px;
$breakpoint-m-width: 1024px;
$breakpoint-l-width: 1440px;
////////////////////////////
// MEDIA QUERIES
/////////////////////////////
@mixin extra-small-break {
@media (max-width: #{$breakpoint-xs-width}) {
@content;
}
}
@mixin small-break {
@media (max-width: #{$breakpoint-s-width}) {
@content;
}
}
@mixin mid-break {
@media (max-width: #{$breakpoint-m-width}) {
@content;
}
}
@mixin large-break {
@media (max-width: #{$breakpoint-l-width}) {
@content;
}
}

@ -1,167 +0,0 @@
@use 'queries' as *;
/////////////////////////////
// HEADINGS
/////////////////////////////
%h1,
%h2,
%h3,
%h4,
%h5,
%h6 {
font-weight: 700;
}
%h1 {
margin: 50px 0;
font-size: 84px;
line-height: 1;
@include mid-break {
font-size: 70px;
}
@include small-break {
margin: 24px 0;
font-size: 36px;
line-height: 42px;
}
}
%h2 {
margin: 32px 0;
font-size: 56px;
line-height: 1;
@include mid-break {
margin: 36px 0;
font-size: 48px;
}
@include small-break {
margin: 24px 0;
font-size: 28px;
line-height: 32px;
}
}
%h3 {
margin: 28px 0;
font-size: 48px;
line-height: 56px;
@include mid-break {
font-size: 40px;
line-height: 48px;
}
@include small-break {
margin: 24px 0;
font-size: 24px;
line-height: 30px;
}
}
%h4 {
margin: 24px 0;
font-size: 40px;
line-height: 48px;
@include mid-break {
font-size: 33px;
line-height: 36px;
}
@include small-break {
margin: 20px 0;
font-size: 20px;
line-height: 24px;
}
}
%h5 {
margin: 20px 0;
font-size: 32px;
line-height: 42px;
@include mid-break {
font-size: 26px;
line-height: 32px;
}
@include small-break {
margin: 16px 0;
font-size: 18px;
line-height: 24px;
}
}
%h6 {
margin: 20px 0;
font-size: 24px;
line-height: 28px;
@include mid-break {
font-size: 20px;
line-height: 30px;
}
@include small-break {
margin: 16px 0;
font-size: 16px;
line-height: 22px;
}
}
/////////////////////////////
// TYPE STYLES
/////////////////////////////
%body {
font-size: 18px;
line-height: 32px;
@include mid-break {
font-size: 15px;
line-height: 24px;
}
@include small-break {
font-size: 13px;
line-height: 24px;
}
}
%large-body {
font-size: 25px;
line-height: 32px;
@include mid-break {
font-size: 22px;
line-height: 30px;
}
@include small-break {
font-size: 17px;
line-height: 24px;
}
}
%label {
font-size: 16px;
line-height: 24px;
letter-spacing: 3px;
text-transform: uppercase;
@include mid-break {
font-size: 13px;
letter-spacing: 2.75px;
}
@include small-break {
font-size: 12px;
line-height: 18px;
letter-spacing: 2.625px;
}
}

@ -2,6 +2,7 @@ import { fetchBlogDetail } from "@/services/payload/blog";
import { RichText } from "@payloadcms/richtext-lexical/react";
import { headers } from "next/headers";
import Image from "next/image";
import { notFound } from "next/navigation";
import { FaFacebook, FaLinkedin, FaTwitter } from "react-icons/fa";
export interface BlogDetailProps {
@ -19,7 +20,9 @@ export default async function BlogDetail({ slug }: BlogDetailProps) {
twitter: `https://twitter.com/intent/tweet?url=${fullUrl}`,
};
if (!data) return <></>;
if (!data) {
notFound();
}
return (
<>

@ -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">Were 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>
);
}

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

@ -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()}>

@ -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 Hero() {
const videoRef = useRef<any | null>(null);
export default function Hero6() {
const [isOpen, setOpen] = useState(false);
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 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}
<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 Arizonas Only Complete Cancer Treatment Center in Sierra Vista.</p>
<a
href="/contact"
className="btn btn-mod btn-border-w btn-large btn-round ms-1 me-1 mt-2 align-middle w-full md:w-1/4 hover:opacity-[0.5]"
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>
);
}

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

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

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

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