next-cochise/src/components/Homepage.tsx

import { features4 } from "@/data/features";
import Image from "next/image";
import Link from "next/link";
import Cta3 from "./cta3";
import Testimonials from "./Testimonials";
import About from "./About";

export default function homepage({ onePage = false, dark = false }) {
  return (
    <>
      <hr className={`mt-0 mb-0 ${dark ? "white" : ""} `} />
      <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">About Oncology</h2>
                <h3 className="section-title mb-30">Begin your path to healing with Cochise Oncology.</h3>
                <p className="text-gray mb-40">
                  Our dedicated team in Sierra Vista, AZ is here to support you with hope, strength, and courage. We
                  offer personalized cancer care using innovative treatments in our state-of-the-art facility. Take the
                  first step towards comprehensive, patient-focused treatment by scheduling a consultation. Let us
                  listen to your needs, answer your questions, and create a tailored plan for your journey. Fill out our
                  form to connect with our compassionate experts and discover how Cochise Oncology can stand with you in
                  your fight against cancer.
                </p>
                {/* Features List */}
                <div className="row features-list mt-n20 mb-50 mb-sm-30">
                  {/* Features List Item */}
                  {features4.map((feature, index) => (
                    <div key={index} className="col-sm-6 col-lg-12 col-xl-6 d-flex mt-20">
                      <div className="features-list-icon">
                        <i className="mi-check" />
                      </div>
                      <div className="features-list-text">{feature.text}</div>
                    </div>
                  ))}
                  {/* End Features List Item */}
                </div>
                {/* End Features List */}
                <div className="local-scroll wch-unset">
                  {onePage ? (
                    <>
                      <a href="#contact" className="btn btn-mod btn-color btn-large btn-circle btn-hover-anim mb-xs-10">
                        <span>Contact us</span>
                      </a>
                    </>
                  ) : (
                    <>
                      <Link
                        href={`/contact`}
                        className="btn btn-mod btn-color btn-large btn-circle btn-hover-anim mb-xs-10"
                      >
                        <span>Contact us</span>
                      </Link>
                    </>
                  )}
                  {onePage ? (
                    <></>
                  ) : (
                    <>
                      {" "}
                      <Link href={`/radixact`} className="link-hover-anim ms-2 ms-sm-5 me-2" data-link-animate="y">
                        <div className="link-strong">
                          Find more about Radixact
                          <i className="mi-arrow-right ml-4" aria-hidden="true"></i>
                        </div>
                      </Link>
                    </>
                  )}
                </div>
              </div>
            </div>
            {/* End Section Text */}
            {/* Image */}
            <div className="col-lg-6 d-flex align-items-center">
              <div className="w-100 pe-lg-5">
                <div className="composition-5">
                  <div className="composition-5-decoration opacity-065">
                    <Image src="/assets/images/demo-slick/decoration-1.svg" alt="" width={228} height={228} />
                  </div>
                  <Image
                    src="/assets/images/cochise-welcome.png"
                    alt="Image Description"
                    width={550}
                    height={600}
                    className="wow scaleOutIn"
                    data-wow-offset={200}
                  />
                </div>
              </div>
            </div>
            {/* End Images */}
          </div>
        </div>
      </section>
      <section className="my-5 w-full">
        <Testimonials />
      </section>
      <section className="page-section bg-scroll light-content bg-[url(/assets/images/demo-modern/section-bg-3.jpeg)]">
        <div className="bg-overlay bg-gradient-dark-alpha-2 d-none d-md-block" />
        {/* Mobile Overlay */}
        <div className="bg-overlay bg-dark-1 opacity-09 d-md-none" />
        {/* End Mobile Overlay */}
        <div className="container position-relative">
          <div className="row wow fadeInUp">
            <div className="col-md-2 offset-md-5 col-lg-6 offset-lg-6 col-xl-6 offset-xl-6">
              <h2 className="section-title mb-40 mb-sm-30">A Cancer Treatment Center of Excellence</h2>
              <p className="text-sm">
                Get compassionate care and excellent medical services from COCHISE ONCOLOGY in Sierra Vista, Arizona. We
                are the largest full-service cancer treatment center between Albuquerque, New Mexico and Tucson,
                Arizona. Our services cover radiation treatments as well as chemotherapy, and we also have an infusion
                center. We offer support groups as well as free hospitality housing for patients undergoing treatment.
                Read on to learn more about our establishment, or reach out to us via phone or email to make an inquiry.
              </p>
              <h4>The Mission of Cochise Oncology</h4>
              <p className="text-sm">
                To provide excellence in cancer and patient care in a comprehensive center for the local community.
                Optimal cancer treatment places the patient first—from the patient’s first greeting with the front
                office staff to the trust they develop with the physicians and the whole treatment team. We believe our
                patients deserve and demand the very best in timely treatments, personalized care, professional
                competence, and advanced technology. We will achieve this vision by employing caring and competent staff
                with excellent training, developing multidisciplinary collaborations, and using the latest technology
                available in the most comfortable environment.
              </p>

              {/* Features List */}
              <Cta3 />
              {/* End Features List */}
            </div>
          </div>
        </div>
      </section>

      <section className={`page-section 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>
              <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"
                data-rellax-y=""
                data-rellax-speed="0.7"
                data-rellax-percentage="-0.2"
              >
                <Image width="103" height="223" src="/assets/images/decoration-2.svg" alt="" />
              </div>
              {/* End Decorative Dots */}

              <Link href={`/radixact`} className="link-hover-anim underline align-middle" data-link-animate="y">
                <span className="link-strong link-strong-unhovered">
                  Explore Radixact® <i className="mi-arrow-right size-18" aria-hidden="true"></i>
                </span>
                <span className="link-strong link-strong-hovered" aria-hidden="true">
                  Explore Radixact® <i className="mi-arrow-right size-18" aria-hidden="true"></i>
                </span>
              </Link>
            </div>
          </div>
          <About />
        </div>
      </section>
    </>
  );
}