fix: header styling and nav prefetch

package.json

@@ -9,8 +9,8 @@
     "build": "next build",
     "start": "next start",
     "lint": "next lint",
-    "payload": "cross-env PAYLOAD_CONFIG_PATH=src/payload.config.ts payload",
     "payload:generate:types": "payload generate:types",
+    "payload:generate:importMap": "payload generate:importMap",
     "tsc": "tsc"
   },
   "dependencies": {

src/app/(payload)/admin/importMap.js

@@ -22,6 +22,7 @@ import { BoldFeatureClient as BoldFeatureClient_e70f5e05f09f93e00b997edb1ef0c864
 import { ItalicFeatureClient as ItalicFeatureClient_e70f5e05f09f93e00b997edb1ef0c864 } from '@payloadcms/richtext-lexical/client'
 import { FixedToolbarFeatureClient as FixedToolbarFeatureClient_e70f5e05f09f93e00b997edb1ef0c864 } from '@payloadcms/richtext-lexical/client'
 import { default as default_382980007b1adf7b8e8832707f1169fb } from '@/components/Logo/AdminLogo'
+import { S3ClientUploadHandler as S3ClientUploadHandler_f97aa6c64367fa259c5bc0567239ef24 } from '@payloadcms/storage-s3/client'
 
 export const importMap = {
   "@payloadcms/richtext-lexical/rsc#RscEntryLexicalCell": RscEntryLexicalCell_44fe37237e0ebf4470c9990d8cb7b07e,
@@ -47,5 +48,6 @@ export const importMap = {
   "@payloadcms/richtext-lexical/client#BoldFeatureClient": BoldFeatureClient_e70f5e05f09f93e00b997edb1ef0c864,
   "@payloadcms/richtext-lexical/client#ItalicFeatureClient": ItalicFeatureClient_e70f5e05f09f93e00b997edb1ef0c864,
   "@payloadcms/richtext-lexical/client#FixedToolbarFeatureClient": FixedToolbarFeatureClient_e70f5e05f09f93e00b997edb1ef0c864,
-  "/components/Logo/AdminLogo#default": default_382980007b1adf7b8e8832707f1169fb
+  "/components/Logo/AdminLogo#default": default_382980007b1adf7b8e8832707f1169fb,
+  "@payloadcms/storage-s3/client#S3ClientUploadHandler": S3ClientUploadHandler_f97aa6c64367fa259c5bc0567239ef24
 }

src/app/globals.css

@@ -36,31 +36,43 @@ body {
 }
 
 @layer components {
+  /* casual button */
   .ext-btn {
-    @apply py-2 px-4 rounded-full hover:opacity-95 hover:scale-95 transition-transform font-semibold no-underline;
+    @apply py-2 px-4 rounded-full hover:opacity-95 hover:scale-105 transition-all font-medium no-underline duration-300;
   }
   .ext-btn-primary {
-    @apply bg-extColorPrimary text-white;
+    @apply ext-btn bg-extColorPrimary text-white hover:text-extColorPrimary3;
   }
   .ext-btn-primary2 {
-    @apply bg-extColorPrimary2 text-white;
+    @apply ext-btn bg-extColorPrimary2 text-white hover:text-extColorPrimary3;
   }
   .ext-btn-primary3 {
-    @apply bg-extColorPrimary3 text-white;
+    @apply ext-btn bg-extColorPrimary3 text-white hover:text-extColorPrimary3;
   }
   .ext-btn-primary4 {
-    @apply bg-extColorPrimary4 text-white;
+    @apply ext-btn bg-extColorPrimary4 text-white hover:text-extColorPrimary3;
   }
 
-  .ext-btn-shadow-sm {
-    @apply py-2 px-3 rounded-full text-sm font-medium no-underline shadow-[0px_0px_10px_0px_rgba(0,0,0,0.5)];
+  /* CTA button */
+  .ext-btn-cta {
+    @apply inline-block !text-[16px] font-medium bg-extColorPrimary6 hover:bg-extColorPrimary8 !text-white py-1 px-6 hover:scale-105 rounded-full text-lg shadow-sm transition-all duration-300;
   }
-  .ext-btn-shadow-sm-primary4 {
-    @apply bg-extColorPrimary4 text-white hover:text-white hover:bg-extColorPrimary6 transition-colors;
+  .ext-btn-cta * {
+    @apply !inline-block;
+  }
+  .ext-btn-cta-md {
+    @apply ext-btn-cta !text-lg py-4 px-8;
   }
 
-  .ext-btn-shadow-sm-primary8 {
-    @apply bg-extColorPrimary8 text-white hover:text-white hover:bg-extColorPrimary6 transition-colors;
+  /* button with shadow */
+  .ext-btn-shadow {
+    @apply py-2 px-3 rounded-full text-sm font-medium no-underline shadow-[0px_0px_10px_0px_rgba(0,0,0,0.5)] transition-colors duration-300;
+  }
+  .ext-btn-shadow-primary4 {
+    @apply ext-btn-shadow bg-extColorPrimary4 text-white hover:text-white hover:bg-extColorPrimary6;
+  }
+  .ext-btn-shadow-primary8 {
+    @apply ext-btn-shadow bg-extColorPrimary8 text-white hover:text-white hover:bg-extColorPrimary6;
   }
 
   .shadow-nav {

src/components/Blocks/BeforeFooter/index.tsx

@@ -1,4 +1,5 @@
 import Link from "next/link";
+import { FaArrowRight } from "react-icons/fa";
 
 export interface BeforeFooterBlockProps {
   id?: string;
@@ -50,11 +51,8 @@ export function BeforeFooterBlock({ title, description, buttonText, showLinier =
         <h4 className="text-4xl font-medium mb-3">{title ?? placeholderTitle}</h4>
         <span className="text-lg leading-relaxed mb-6">{description ?? placeholderDescription}</span>
         <div className="pt-5">
-          <Link
-            href="/contact"
-            className="inline-block bg-extColorPrimary6 hover:bg-extColorPrimary8 text-white py-3 px-6 hover:scale-105 rounded-full text-lg shadow-sm transition-all duration-500"
-          >
-            {buttonText ?? placeholderButtonText} →
+          <Link href="/contact" className="ext-btn-cta-md">
+            {buttonText ?? placeholderButtonText} <FaArrowRight />
           </Link>
         </div>
       </div>

src/components/Blocks/BoxMenuGrid/BoxMenu.tsx

@@ -11,7 +11,7 @@ export default function BoxMenu({ title, description, href }: BoxMenuProps) {
     <div className="flex flex-col bg-extColorPrimary4 text-white rounded-md items-center px-4 py-4">
       <span className="font-semibold text-2xl">{title ?? ""}</span>
       <div className="text-center font-medium mt-4">{description ?? ""}</div>
-      <Link href={fixedHref(href)} className="ext-btn ext-btn-primary mt-4">
+      <Link href={fixedHref(href)} className="ext-btn-primary mt-4">
         Learn More
       </Link>
     </div>

src/components/Blocks/Contact/index.tsx

@@ -1,5 +1,7 @@
 import { fetchContact } from "@/services/payload/contact";
 import { Suspense } from "react";
+import { FaClock, FaFax, FaMapMarkerAlt } from "react-icons/fa";
+import { GiRotaryPhone } from "react-icons/gi";
 
 export default function ContactBlock() {
   return (
@@ -31,22 +33,8 @@ async function ContactWithData() {
           <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">
-                <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>
-
+              <div className="alt-features-item border-left mt-0 fadeScaleIn">
+                <FaMapMarkerAlt className="text-4xl m-5" />
                 <h4 className="alt-features-title">Location</h4>
                 <div className="alt-features-descr clearlinks">
                   <div>
@@ -60,21 +48,8 @@ async function ContactWithData() {
             {/* End Contact Item */}
             {/* Contact Item */}
             <div className="col-sm-6 d-flex align-items-stretch">
-              <div className="alt-features-item border-left mt-0">
-                <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>
+              <div className="alt-features-item border-left mt-0 fadeScaleIn">
+                <GiRotaryPhone className="text-4xl m-5" />
                 <h4 className="alt-features-title">Phone</h4>
                 <div className="alt-features-descr clearlinks">
                   <div>
@@ -88,21 +63,8 @@ async function ContactWithData() {
           <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">
-                <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>
+              <div className="alt-features-item border-left mt-0 fadeScaleIn">
+                <FaClock className="text-4xl m-5" />
                 <h4 className="alt-features-title">Hours</h4>
                 <div className="alt-features-descr clearlinks">
                   {Array.isArray(contact?.hours) &&
@@ -117,21 +79,8 @@ async function ContactWithData() {
             {/* 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">
-                <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>
+              <div className="alt-features-item border-left mt-0 fadeScaleIn">
+                <FaFax className="text-4xl m-5" />
                 <h4 className="alt-features-title">Fax</h4>
                 <div className="alt-features-descr clearlinks">
                   <div>
@@ -182,21 +131,7 @@ function ContactSkeleton() {
             {/* Contact Item */}
             <div className="col-sm-6 mb-xs-30 d-flex align-items-stretch">
               <div className="flex-1 alt-features-item border-left mt-0">
-                <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>
-
+                <FaMapMarkerAlt className="text-4xl m-5" />
                 <h4 className="alt-features-title">Location</h4>
                 <div className="h-3 bg-gray-300 rounded flex-1"></div>
               </div>
@@ -205,20 +140,7 @@ function ContactSkeleton() {
             {/* Contact Item */}
             <div className="col-sm-6 d-flex align-items-stretch">
               <div className="flex-1 alt-features-item border-left mt-0">
-                <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>
+                <GiRotaryPhone className="text-4xl m-5" />
                 <h4 className="alt-features-title">Phone</h4>
                 <div className="h-3 bg-gray-300 rounded flex-1"></div>
               </div>
@@ -229,20 +151,7 @@ function ContactSkeleton() {
             {/* Contact Item */}
             <div className="col-sm-6 mb-xs-30 d-flex align-items-stretch">
               <div className="flex-1 alt-features-item border-left mt-0">
-                <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>
+                <FaClock className="text-4xl m-5" />
                 <h4 className="alt-features-title">Hours</h4>
                 <div className="h-3 bg-gray-300 rounded flex-1"></div>
               </div>
@@ -251,20 +160,7 @@ function ContactSkeleton() {
             {/* Contact Item */}
             <div className="col-sm-6 mb-xs-30 d-flex align-items-stretch">
               <div className="flex-1 alt-features-item border-left mt-0">
-                <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>
+                <FaFax className="text-4xl m-5" />
                 <h4 className="alt-features-title">Fax</h4>
                 <div className="h-3 bg-gray-300 rounded flex-1"></div>
               </div>

src/components/Blocks/Form/index.tsx

@@ -89,7 +89,7 @@ export const FormBlock: React.FC<
         }, 250);
 
         try {
-          const req = await fetch(`${process.env.NEXT_PUBLIC_PAYLOAD_URL}/api/form-submissions`, {
+          const req = await fetch(`/api/form-submissions`, {
             body: JSON.stringify({
               form: formID,
               submissionData: dataToSend,
@@ -140,7 +140,7 @@ export const FormBlock: React.FC<
   );
 
   return (
-    <div>
+    <div className="container">
       <div>
         {!!enableIntro && introContent && !hasSubmitted && <RichText content={introContent} />}
         {!isLoading && hasSubmitted && confirmationType === "message" && <RichText content={confirmationMessage} />}

src/components/Blocks/RenderBlocks.tsx

@@ -51,7 +51,7 @@ export const RenderBlocks: React.FC<{
               );
             } else if (blockType === "formBlock") {
               return (
-                <div className="my-10 px-8" key={index}>
+                <div className="my-10" key={index}>
                   <FormBlock
                     id={block.id}
                     enableIntro={block.enableIntro}

src/components/Blogs/BlogCardItem.tsx

@@ -31,7 +31,7 @@ export function BlogCardItem({ data }: BlogCardItemProps) {
             <a href={`/${data.slug}/`}>{data.title}</a>
           </h2>
           <div className="flex justify-center mt-2">
-            <a href={`/${data.slug}/`} className="ext-btn-shadow-sm ext-btn-shadow-sm-primary8">
+            <a href={`/${data.slug}/`} className="ext-btn-shadow-primary8">
               Continue Reading
             </a>
           </div>

src/components/Contacts/Contact.tsx

@@ -1,233 +0,0 @@
-import { fetchContact } from "@/services/payload/contact";
-import { FaClock, FaFax, FaMapMarkerAlt } from "react-icons/fa";
-import { GiRotaryPhone } from "react-icons/gi";
-import { Suspense } from "react";
-
-export default function Contact() {
-  return (
-    <>
-      <Suspense fallback={<ContactSkeleton />}>
-        <ContactWithData />
-      </Suspense>
-    </>
-  );
-}
-
-async function ContactWithData() {
-  const contact = await fetchContact();
-
-  return (
-    <div className="container position-relative">
-      <div className="row">
-        <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>
-        </div>
-      </div>
-      <div className="row" data-wow-delay="0.5s">
-        <div className="col-md-6 mb-sm-10">
-          {/* 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">
-                <FaMapMarkerAlt className="text-4xl m-5" />
-                <h4 className="alt-features-title">Location</h4>
-                <div className="alt-features-descr clearlinks">
-                  <div>
-                    <a target="_blank" href={contact?.location?.href ?? "#"}>
-                      {contact?.fullLocation ?? ""}
-                    </a>
-                  </div>
-                </div>
-              </div>
-            </div>
-            {/* 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">
-                <GiRotaryPhone className="text-4xl m-5" />
-                <h4 className="alt-features-title">Phone</h4>
-                <div className="alt-features-descr clearlinks">
-                  <div>
-                    <a href={`tel:${contact?.phone ?? "#"}`}>{contact?.phone ?? ""}</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">
-                <FaClock className="text-4xl m-5" />
-                <h4 className="alt-features-title">Hours</h4>
-                <div className="alt-features-descr clearlinks">
-                  {Array.isArray(contact?.hours) &&
-                    contact.hours.map((h) => (
-                      <p key={h.id} className="text-wrap">
-                        {h.hour ?? ""}
-                      </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">
-                <FaFax className="text-4xl m-5" />
-                <h4 className="alt-features-title">Fax</h4>
-                <div className="alt-features-descr clearlinks">
-                  <div>
-                    <a href={`tel:${contact?.fax ?? "#"}`}>{contact?.fax ?? ""}</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>
-      </div>
-    </div>
-  );
-}
-
-function ContactSkeleton() {
-  return (
-    <div className="container position-relative animate-pulse">
-      <div className="row">
-        <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>
-        </div>
-      </div>
-      <div className="row">
-        <div className="col-md-6 mb-sm-10">
-          {/* 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="flex-1 alt-features-item border-left mt-0">
-                <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="h-3 bg-gray-300 rounded flex-1"></div>
-              </div>
-            </div>
-            {/* End Contact Item */}
-            {/* Contact Item */}
-            <div className="col-sm-6 d-flex align-items-stretch">
-              <div className="flex-1 alt-features-item border-left mt-0">
-                <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="h-3 bg-gray-300 rounded flex-1"></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="flex-1 alt-features-item border-left mt-0">
-                <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="h-3 bg-gray-300 rounded flex-1"></div>
-              </div>
-            </div>
-            {/* End Contact Item */}
-            {/* Contact Item */}
-            <div className="col-sm-6 mb-xs-30 d-flex align-items-stretch">
-              <div className="flex-1 alt-features-item border-left mt-0">
-                <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="h-3 bg-gray-300 rounded flex-1"></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="h-80 bg-gray-300 rounded flex-1"></div>
-          {/* End Google Map */}
-        </div>
-      </div>
-    </div>
-  );
-}

src/components/Contacts/ContactForm.tsx

@@ -1,17 +0,0 @@
-import { fetchForm } from "@/services/payload/form";
-import { FormBlock } from "@/components/Blocks/Form";
-
-export default async function ContactForm() {
-  const form = await fetchForm(1);
-
-  if (!form) return <></>;
-
-  return (
-    <div className="box-shadow bg-white round p-4 p-sm-5 position-relative z-index-1">
-      <h4 className="h3 mb-40 mb-sm-30">{form?.title ?? ""}</h4>
-      <div>
-        <FormBlock enableIntro={true} form={form} />
-      </div>
-    </div>
-  );
-}

src/components/Header.tsx

@@ -13,7 +13,7 @@ const shareIcons: Record<string, any> = {
     dom: (
       <span className="social-nav flex text-2xl text-white space-x-3 lg:space-x-1">
         <Image src="/assets/icons/phone.png" alt="Phone" width={30} height={25} />
-        <b className="text-[17px]">(520) 803-6644</b>
+        <b className="text-[17px] hover:!text-extColorPrimary3 transition-all duration-300">(520) 803-6644</b>
       </span>
     ),
   },
@@ -21,7 +21,7 @@ const shareIcons: Record<string, any> = {
     link: "https://www.facebook.com/p/Cochise-Oncology-61556262839823",
     dom: (
       <span className="social-nav flex text-2xl text-white space-x-3 lg:space-x-1">
-        <FaFacebook size={25} />
+        <FaFacebook size={25} className="hover:!text-extColorPrimary3 transition-all duration-300" />
         <b className="text-[17px] lg:hidden">Facebook</b>
       </span>
     ),
@@ -30,7 +30,7 @@ const shareIcons: Record<string, any> = {
     link: "https://linkedin.com/company/cochise-oncology",
     dom: (
       <span className="social-nav flex text-2xl text-white space-x-3 lg:space-x-1">
-        <FaLinkedin size={25} />
+        <FaLinkedin size={25} className="hover:!text-extColorPrimary3" />
         <b className="text-[17px] lg:hidden">Linkedin</b>
       </span>
     ),
@@ -65,8 +65,8 @@ export default function Header({ links }: { links: typeof navMenuData }) {
                 <Image
                   src="/assets/images/demo-slick/logo-dark.webp"
                   alt="Company Logo"
-                  width={165}
-                  height={100}
+                  width={204}
+                  height={104}
                   className="dark-mode-logo"
                 />
               </Link>
@@ -75,10 +75,7 @@ export default function Header({ links }: { links: typeof navMenuData }) {
             <li>
               <div className="flex flex-col items-center h-full w-full content-center justify-center gap-2">
                 <div className="flex justify-center">
-                  <a
-                    href="/contact"
-                    className="bg-extColorPrimary6 hover:bg-extColorPrimary8 px-4 py-2 rounded-full text-white font-semibold hover:cursor-pointer hover:scale-[1.15] mt-3 lg:mt-0 transition-all duration-300"
-                  >
+                  <a href="/contact" className="ext-btn-cta">
                     REQUEST CONSULTATION
                   </a>
                 </div>

src/components/HeaderNav.tsx

@@ -45,6 +45,7 @@ export default function HeaderNav({ links, animateY = false }: { links: typeof n
           <li>
             {!Array.isArray(link?.child) && (
               <Link
+                prefetch={false}
                 href={link.href}
                 className="!text-white hover:!text-extColorPrimary3 !text-[20px] !transition-all !duration-500"
               >
@@ -64,6 +65,7 @@ export default function HeaderNav({ links, animateY = false }: { links: typeof n
             {Array.isArray(link?.child) && (
               <div onMouseOver={() => setHoveredNavItem(`${index}`)} onMouseLeave={() => setHoveredNavItem("")}>
                 <Link
+                  prefetch={false}
                   href={link?.href ?? "#"}
                   className="mn-has-sub !flex justify-between items-center !text-white hover:!text-extColorPrimary3 !text-[20px] !transition-all !duration-500"
                   onClick={() => toggleDropdown([link.text])}
@@ -82,6 +84,7 @@ export default function HeaderNav({ links, animateY = false }: { links: typeof n
                     >
                       {!Array.isArray(subLink?.child) && (
                         <Link
+                          prefetch={false}
                           href={subLink?.href}
                           onClick={() => toggleMobileMenu()}
                           className="!text-[14px] !text-white hover:!bg-extColorPrimary5 hover:!text-extColorPrimary3 !transition-all !duration-500"
@@ -92,6 +95,7 @@ export default function HeaderNav({ links, animateY = false }: { links: typeof n
                       {Array.isArray(subLink?.child) && (
                         <>
                           <Link
+                            prefetch={false}
                             href={subLink?.href ?? "#"}
                             className="mn-has-sub !flex !justify-between !items-center !text-white hover:!bg-extColorPrimary5 hover:!text-extColorPrimary3 transition-all duration-500"
                             onClick={() => setIsSubDropdownOpen(`${index}-${subLinkIdx}`)}
@@ -106,6 +110,7 @@ export default function HeaderNav({ links, animateY = false }: { links: typeof n
                             {subLink.child.map((subLink2: any, subLinkIdx2: number) => (
                               <li key={subLinkIdx2}>
                                 <Link
+                                  prefetch={false}
                                   href={subLink2?.href}
                                   className="!text-[14px] !items-center !text-white hover:!bg-extColorPrimary5 hover:!text-extColorPrimary3 transition-all duration-500"
                                   onClick={() => toggleMobileMenu()}

src/components/Hero.tsx

@@ -22,15 +22,10 @@ export default function Hero() {
             <h2 className="hs-title-3">Healing Begins Here</h2>
             <h1 className="text-3xl md:text-6xl">Cochise Oncology</h1>
             <p className="text-xl">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 align-middle w-full md:w-1/2 lg:w-1/4 hover:opacity-[0.5]"
-              className="inline-block bg-extColorPrimary6 hover:bg-extColorPrimary8 text-white py-1 px-6 hover:scale-105 rounded-full text-lg shadow-lg transition-all duration-500"
-              data-btn-animate="y"
-            >
-              Request Consultation
-            </a>
           </div>
+          <a href="/contact" className="ext-btn-cta-md mt-7" data-btn-animate="y">
+            Request Consultation
+          </a>
         </div>
         {/* End Home Section Content */}
       </div>

src/components/Homepage.tsx

@@ -1,8 +1,8 @@
 import Image from "next/image";
 import Link from "next/link";
 import About from "./About";
-import Contact from "./Contacts/Contact";
 import Testimonials from "./Testimonials";
+import ContactBlock from "./Blocks/Contact";
 
 export default function homepage({ dark = false }) {
   return (
@@ -179,7 +179,9 @@ export default function homepage({ dark = false }) {
       </section>
 
       <section className={`mb-5 scrollSpysection ${dark ? "bg-dark-1 light-content" : ""}`} id="contact">
-        <Contact />
+        <div className="wow fadeInUp">
+          <ContactBlock />
+        </div>
       </section>
     </>
   );