fix: remove unused components and pages

public/assets/css/demo-slick/demo-slick.css

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

public/assets/css/style.css

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

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

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

src/app/(main)/coba/page.tsx

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

src/app/(main)/contact/page.tsx

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

src/app/(main)/home-bg-video/page.tsx

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

src/app/(main)/not-found.tsx

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

src/app/(main)/slick-about-dark/AboutDropdown.tsx

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

src/app/(main)/slick-about-dark/page.tsx

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

src/app/(main)/slick-about-dark/page1.tsx

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

src/app/(main)/slick-about/page.tsx

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

src/app/(main)/slick-portfolio/page.tsx

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

src/app/(main)/slick-services/page.tsx

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

src/components/About.tsx

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

src/components/Blocks/BeforeFooter/index.tsx

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

src/components/Blocks/Form/Country/index.module.scss

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

src/components/Blocks/Form/Country/index.tsx

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

src/components/Blocks/Form/Country/options.ts

@@ -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',
-  },
-]

src/components/Blocks/Form/Gutter/index.module.scss

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

src/components/Blocks/Form/Gutter/index.tsx

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

src/components/Blocks/Form/Message/index.module.scss

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

src/components/Blocks/Form/Message/index.tsx

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

src/components/Blocks/Form/Number/index.module.scss

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

src/components/Blocks/Form/Number/index.tsx

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

src/components/Blocks/Form/State/index.module.scss

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

src/components/Blocks/Form/State/index.tsx

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

src/components/Blocks/Form/State/options.ts

@@ -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' },
-]

src/components/Blocks/Form/VerticalPadding/index.module.scss

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

src/components/Blocks/Form/VerticalPadding/index.tsx

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

src/components/Blocks/Form/Width/index.module.scss

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

src/components/Blocks/Form/Width/index.tsx

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

src/components/Blocks/Form/fields.tsx

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

src/components/Blocks/css/app.scss

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

src/components/Blocks/css/colors.scss

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

src/components/Blocks/css/common.scss

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

src/components/Blocks/css/queries.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;
-  }
-}

src/components/Blocks/css/type.scss

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

src/components/Blogs/BlogDetail.tsx

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

src/components/Contacts/Contact.tsx

@@ -1,78 +1,145 @@
-import { contactItems } from "@/data/contact";
-import React, { ReactNode } from "react";
+"use client";
+import React from "react";
 
-export interface ContactProps {
-  children?: ReactNode;
-}
-
-export default function Contact({ children }: ContactProps) {
+export default function Contact() {
   return (
     <div className="container position-relative">
       <div className="row">
-        {/* Left Column */}
-        <div className="col-lg-4 mb-md-50 mb-sm-30 position-relative z-index-1">
-          <h2 className="section-caption-slick mb-30 mb-sm-20">Contact Us</h2>
-          <h3 className="section-title mb-50 mb-sm-30">We’re open to talk to anyone.</h3>
-          {/* Contact Information */}
-          <div className="row">
-            <div className="col-md-11">
-              {/* Address */}
-              {contactItems.map((item: any, index: number) => (
-                <React.Fragment key={index}>
-                  <div className={`contact-item ${index !== 3 ? "mb-40 mb-sm-20" : ""}`}>
-                    <div className="ci-icon">
-                      <i className={item.iconClass} />
-                    </div>
-                    <h4 className="ci-title  visually-hidden">{item.title}</h4>
-                    <div className="ci-text">{item.text}</div>
-                    <div>
-                      <a
-                        href={item.link.url}
-                        target={item.link.target}
-                        rel={item.link.rel}
-                        className="link-hover-anim"
-                        data-link-animate="y"
-                      >
-                        <span className="link-strong link-strong-unhovered">
-                          {item.link.text} <i className="mi-arrow-right size-18" aria-hidden="true"></i>
-                        </span>
-                        <span className="link-strong link-strong-hovered" aria-hidden="true">
-                          {item.link.text} <i className="mi-arrow-right size-18" aria-hidden="true"></i>
-                        </span>
-                      </a>
-                    </div>
-                  </div>
-                </React.Fragment>
-              ))}
-              {/* End Phone */}
+        <div className="col-lg-6">
+          <div className="row mb-50">
+            <div className="col-lg-10">
+              <h2 className="section-caption-slick mb-xs-10">Contact Us</h2>
             </div>
           </div>
-          {/* End Contact Information */}
         </div>
-        {/* End Left Column */}
-        {/* Right Column */}
-        <div className="col-lg-8 col-xl-7 offset-xl-1 wow fadeInUp">
-          <div className="row g-0">
-            {/* Google Map Column */}
-            <div className="col-12 d-flex align-items-stretch pt-40 pt-sm-0 pb-40 pb-sm-0 mb-sm-30">
-              <div className="map-boxed-1 d-flex align-items-stretch h-[400px]">
-                <iframe
-                  src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3399.869553403109!2d-110.24257920000001!3d31.555194399999998!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x86d7292ebdc13925%3A0x43d6cab7d0f93f14!2s5151%20AZ-90%2C%20Sierra%20Vista%2C%20AZ%2085635%2C%20USA!5e0!3m2!1sen!2sid!4v1738604989180!5m2!1sen!2sid"
-                  width={600}
-                  height={600}
-                  style={{ border: 0 }}
-                  loading="lazy"
-                  referrerPolicy="no-referrer-when-downgrade"
-                />
+      </div>
+      <div className="row wow fadeInUp" data-wow-delay="0.5s">
+        <div className="col-md-6 mb-sm-50">
+          {/* Contact Form */}
+          <div className="row mb-60 mb-sm-50">
+            {/* Contact Item */}
+            <div className="col-sm-6 mb-xs-30 d-flex align-items-stretch">
+              <div className="alt-features-item border-left mt-0 wow fadeScaleIn" data-wow-delay=".3s">
+                <div className="alt-features-icon">
+                  <svg
+                    width={24}
+                    height={24}
+                    viewBox="0 0 24 24"
+                    fill="currentColor"
+                    aria-hidden="true"
+                    xmlns="http://www.w3.org/2000/svg"
+                    fillRule="evenodd"
+                    clipRule="evenodd"
+                  >
+                    <path d="M12 2C8.134 2 5 5.134 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.866-3.134-7-7-7zm0 9.5c-1.381 0-2.5-1.119-2.5-2.5s1.119-2.5 2.5-2.5 2.5 1.119 2.5 2.5-1.119 2.5-2.5 2.5z" />
+                  </svg>
+                </div>
+
+                <h4 className="alt-features-title">Location</h4>
+                <div className="alt-features-descr clearlinks">
+                  <div>
+                    <a href="https://maps.app.goo.gl/1sK5Mgi7mtqZsYkcA">5151 E HWY 90, Sierra Vista, Arizona 85635</a>
+                  </div>
+                </div>
               </div>
             </div>
-            {/* End Google Map Column */}
+            {/* End Contact Item */}
+            {/* Contact Item */}
+            <div className="col-sm-6 d-flex align-items-stretch">
+              <div className="alt-features-item border-left mt-0 wow fadeScaleIn" data-wow-delay=".5s">
+                <div className="alt-features-icon">
+                  <svg
+                    width={24}
+                    height={24}
+                    viewBox="0 0 24 24"
+                    fill="currentColor"
+                    aria-hidden="true"
+                    xmlns="http://www.w3.org/2000/svg"
+                    fillRule="evenodd"
+                    clipRule="evenodd"
+                  >
+                    <path d="M17 2H7C5.9 2 5 2.9 5 4v16c0 1.1.9 2 2 2h10c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm0 17H7V5h10v14zM12 16c.55 0 1-.45 1-1s-.45-1-1-1-1 .45-1 1 .45 1 1 1z" />
+                  </svg>
+                </div>
+                <h4 className="alt-features-title">Phone</h4>
+                <div className="alt-features-descr clearlinks">
+                  <div>
+                    <a href="tel:(520) 803-6644">(520) 803-6644</a>
+                  </div>
+                </div>
+              </div>
+            </div>
+            {/* End Contact Item */}
           </div>
+          <div className="row mb-60 mb-sm-50">
+            {/* Contact Item */}
+            <div className="col-sm-6 mb-xs-30 d-flex align-items-stretch">
+              <div className="alt-features-item border-left mt-0 wow fadeScaleIn" data-wow-delay=".3s">
+                <div className="alt-features-icon">
+                  <svg
+                    width={24}
+                    height={24}
+                    viewBox="0 0 24 24"
+                    fill="currentColor"
+                    aria-hidden="true"
+                    xmlns="http://www.w3.org/2000/svg"
+                    fillRule="evenodd"
+                    clipRule="evenodd"
+                  >
+                    <path d="M12 2C6.486 2 2 6.486 2 12s4.486 10 10 10 10-4.486 10-10S17.514 2 12 2zm0 18c-4.411 0-8-3.589-8-8s3.589-8 8-8 8 3.589 8 8-3.589 8-8 8zm1-8h4v2h-6V7h2v5z" />
+                  </svg>
+                </div>
+                <h4 className="alt-features-title">Hours</h4>
+                <div className="alt-features-descr clearlinks">
+                  <p className="text-nowrap">Monday to Friday: 8:00 AM – 5:00 PM</p>
+                </div>
+              </div>
+            </div>
+            {/* End Contact Item */}
+            {/* Contact Item */}
+            <div className="col-sm-6 mb-xs-30 d-flex align-items-stretch">
+              <div className="alt-features-item border-left mt-0 wow fadeScaleIn" data-wow-delay=".3s">
+                <div className="alt-features-icon">
+                  <svg
+                    width={24}
+                    height={24}
+                    viewBox="0 0 24 24"
+                    fill="currentColor"
+                    aria-hidden="true"
+                    xmlns="http://www.w3.org/2000/svg"
+                    fillRule="evenodd"
+                    clipRule="evenodd"
+                  >
+                    <path d="M12 2C6.486 2 2 6.486 2 12s4.486 10 10 10 10-4.486 10-10S17.514 2 12 2zm0 18c-4.411 0-8-3.589-8-8s3.589-8 8-8 8 3.589 8 8-3.589 8-8 8zm1-12h-2v2h2V8zm0 4h-2v6h2v-6zm-4-2H7v2h2v-2zm6 0h-2v2h2v-2z" />
+                  </svg>
+                </div>
+                <h4 className="alt-features-title">Fax</h4>
+                <div className="alt-features-descr clearlinks">
+                  <div>
+                    <a href="tel:(520) 459-3193">(520) 459-3193</a>
+                  </div>
+                </div>
+              </div>
+            </div>
+            {/* End Contact Item */}
+          </div>
+          {/* End Contact Form */}
+        </div>
+        <div className="col-md-6 d-flex align-items-stretch">
+          {/* Google Map */}
+          <div className="map-boxed">
+            <iframe
+              src="https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d108795.7060636289!2d-110.242613!3d31.555297!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x86d7292e9b858975%3A0xc2519e5d827cd79c!2sCochise%20Oncology!5e0!3m2!1sen!2sus!4v1740412623968!5m2!1sen!2sus"
+              width={600}
+              height={450}
+              style={{ border: 0 }}
+              loading="lazy"
+              referrerPolicy="no-referrer-when-downgrade"
+            />
+          </div>
+          {/* End Google Map */}
         </div>
-        {/* End Right Column */}
       </div>
-
-      {children}
     </div>
   );
 }

src/components/Header.tsx

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

src/components/HeaderNav.tsx

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

src/components/Hero.tsx

@@ -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 Arizona’s Only Complete Cancer Treatment Center in Sierra Vista
-                  </p>
-                </div>
-              </div>
-              <div
-                className="local-scroll mt-n10 wch-unset"
-                data-wow-delay="0.7s"
-                data-wow-duration="1.2s"
-                data-wow-offset={0}
+            <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 Arizona’s 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>
   );
 }

src/components/Homepage.tsx

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

src/components/Team.tsx

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

src/components/Teams/CardTeam.tsx

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

src/services/payload/team.ts

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