next-cochise/src/components/Homepage.tsx

import { features4 } from "@/data/features";
import Image from "next/image";
import Link from "next/link";
import Blog from "./Blogs/Blog";
import Cta3 from "./cta3";
import Facts from "./Facts";
import Service from "./Service";

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={`/slick-contact${dark ? "-dark" : ""}`}
                        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={`small-section bg-dark ps-4 ps-lg-0 pe-4 pe-lg-0 position-relative overflow-hidden`}>
        <div className="decoration-12 bg-white" />
        <div className="decoration-13 bg-white" />
        <div className="col-md-10 offset-md-1 col-lg-8 offset-lg-2 col-xl-6 offset-xl-3 text-center text-white mb-50">
          <h2 className="section-title-small">Why choose Cochise Oncology?</h2>
          <p className="mb-0">
            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>
        </div>
        <Facts />
      </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">Our Services</h2>
              <h3 className="section-title mb-30">A Cancer Treatment Center of Excellence.</h3>
              <p className="section-descr mb-50 mb-sm-40">
                Get compassionate care and excellent medical services from COCHISE ONCOLOGY in Sierra Vista, Arizona.
              </p>
            </div>
            {/* End Left Column */}
            {/* Right Column */}
            <Service />
            {/* End Right Column */}
          </div>
        </div>
      </section>

      <hr className={`mt-0 mb-0 ${dark ? "white" : ""} `} />
      <section
        className="page-section bg-scroll light-content"
        style={{
          backgroundImage: "url(/assets/images/demo-modern/section-bg-3.jpeg)",
        }}
      >
        <div className="bg-overlay bg-gradient-dark-alpha-2 d-none d-md-block" />
        {/* End Desktop Overlay */}
        {/* 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-7 offset-md-5 col-lg-6 offset-lg-6 col-xl-5 offset-xl-7">
              <h2 className="section-title mb-40 mb-sm-30">A Cancer Treatment Center of Excellence</h2>
              <p className="mb-50 mb-sm-40">
                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="blog">
        <div className={`bg-shape-3 ${dark ? "opacity-003" : ""} `}>
          <Image src="/assets/images/demo-slick/bg-shape-3.svg" width={1443} height={644} alt="" />
        </div>
        <Blog />
      </section>
    </>
  );
}