fix: homepage image and circle cta styling

fix: contact service lint error
fix: footer linkedin data, integrated from payload
2025-03-03 11:40:00 +07:00 · 2025-02-28 19:36:54 +07:00 · 2025-02-28 19:35:54 +07:00 · 2025-02-28 19:07:37 +07:00 · 2025-02-28 13:47:35 +07:00 · 2025-02-28 03:52:33 +00:00
23 changed files with 486 additions and 211 deletions
--- a/public/assets/images/cochise-medical-oncology-768x512.webp
+++ b/public/assets/images/cochise-medical-oncology-768x512.webp
--- a/public/assets/images/cochise-radiation-oncology-768x512.webp
+++ b/public/assets/images/cochise-radiation-oncology-768x512.webp
--- a/public/assets/images/cochise-skin-cancer-768x512.webp
+++ b/public/assets/images/cochise-skin-cancer-768x512.webp
--- a/src/app/(main)/layout.tsx
+++ b/src/app/(main)/layout.tsx
@ -1,59 +1,29 @@
-"use client";
-import { usePathname } from "next/navigation";
-import { useEffect } from "react";
-import { init_wow } from "@/utils/initWow";
-import { parallaxMouseMovement, parallaxScroll } from "@/utils/parallax";
-import { headerChangeOnScroll } from "@/utils/changeHeaderOnScroll";
-import Header from "@/components/Header";
-import Footer from "@/components/Footer";
-import { navMenuData } from "@/data/menu";
 import "@/app/globals.css";
-import "swiper/css";
-import "jarallax/dist/jarallax.min.css";
-import "swiper/css/effect-fade";
-import "react-modal-video/css/modal-video.css";
-import "photoswipe/dist/photoswipe.css";
-import "tippy.js/dist/tippy.css";
+import Footer, { FooterSkeleton } from "@/components/Footer";
+import Header from "@/components/Header";
+import InitialScript from "@/components/InitialScript";
+import { navMenuData } from "@/data/menu";
+
 import "@public/assets/css/styles.css";
+import "jarallax/dist/jarallax.min.css";
 import { Roboto } from "next/font/google";
+import "photoswipe/dist/photoswipe.css";
+import { Suspense } from "react";
+import "react-modal-video/css/modal-video.css";
+import "swiper/css";
+import "swiper/css/effect-fade";
+import "tippy.js/dist/tippy.css";

 const roboto = Roboto({ subsets: ["latin"] });
+
 export default function MainLayout({
  children,
 }: Readonly<{
  children: React.ReactNode;
 }>) {
-  const path = usePathname();
-
-  useEffect(() => {
-    init_wow();
-    parallaxMouseMovement();
-    const mainNav = document.querySelector(".main-nav");
-    if (mainNav?.classList.contains("transparent")) {
-      mainNav.classList.add("js-transparent");
-    } else if (!mainNav?.classList?.contains("dark")) {
-      mainNav?.classList.add("js-no-transparent-white");
-    }
-
-    window.addEventListener("scroll", headerChangeOnScroll);
-    parallaxScroll();
-    return () => {
-      window.removeEventListener("scroll", headerChangeOnScroll);
-    };
-  }, [path]);
-
-  useEffect(() => {
-    if (typeof window !== "undefined") {
-      // Import the script only on the client side
-      // @ts-ignore
-      import("bootstrap/dist/js/bootstrap.esm").then(() => {
-        // Module is imported, you can access any exported functionality if
-      });
-    }
-  }, []);
-
  return (
    <html lang="en" className={`no-mobile no-touch ${roboto.className}`}>
+      <InitialScript />
      <body className="appear-animate body">
        <div className="theme-slick">
          <div className="page" id="top">
@ -61,7 +31,9 @@ export default function MainLayout({
              <Header links={navMenuData} />
            </nav>
            <main id="main">{children}</main>
-            <Footer />
+            <Suspense fallback={<FooterSkeleton />}>
+              <Footer />
+            </Suspense>
          </div>
        </div>
      </body>
--- a/src/app/globals.css
+++ b/src/app/globals.css
@ -9,6 +9,7 @@
  --ext-color-primary-4: #d4a187;
  --ext-color-primary-5: #e7ccc0;
  --ext-color-primary-6: #64b3b4;
+  --ext-color-primary-7: #a8dcca;
  --background: #ffffff;
  --foreground: #171717;
 }
@ -21,6 +22,7 @@
    --ext-color-primary-4: #d4a187;
    --ext-color-primary-5: #e7ccc0;
    --ext-color-primary-6: #64b3b4;
+    --ext-color-primary-7: #a8dcca;
    --background: #0a0a0a;
    --foreground: #ededed;
  }
--- a/src/collections/Media.ts
+++ b/src/collections/Media.ts
@ -15,5 +15,6 @@ export const Media: CollectionConfig = {
  upload: true,
  admin: {
    hideAPIURL: true,
+    group: "General",
  },
 };
--- a/src/collections/Pages.ts
+++ b/src/collections/Pages.ts
@ -72,4 +72,8 @@ export const Pages: CollectionConfig = {
      ],
    },
  ],
+  admin: {
+    hideAPIURL: true,
+    group: "General",
+  },
 };
--- a/src/collections/Teams.ts
+++ b/src/collections/Teams.ts
@ -30,5 +30,6 @@ export const Teams: CollectionConfig = {
  admin: {
    hideAPIURL: true,
    useAsTitle: "name",
+    group: "General",
  },
 };
--- a/src/collections/Users.ts
+++ b/src/collections/Users.ts
@ -5,6 +5,7 @@ export const Users: CollectionConfig = {
  admin: {
    useAsTitle: "email",
    hideAPIURL: true,
+    group: "Users",
  },
  auth: true,
  fields: [
--- a/src/components/Footer.tsx
+++ b/src/components/Footer.tsx
@ -1,13 +1,10 @@
-"use client";
-import React from "react";
 import Image from "next/image";
-import { FaPhone, FaFax, FaFacebook, FaMapMarkerAlt, FaClock } from "react-icons/fa";
+import { FaClock, FaFacebook, FaFax, FaLinkedin, FaMapMarkerAlt, FaPhone } from "react-icons/fa";
+import ScrollToTop from "./ScrollToTop";
+import { fetchContact } from "@/services/payload/contact";

-export default function Footer() {
-  const scrollToTop = (event: React.MouseEvent<HTMLDivElement, MouseEvent>) => {
-    event.preventDefault();
-    window.scrollTo({ top: 0, behavior: "smooth" });
-  };
+export default async function Footer() {
+  const contact = await fetchContact();

  return (
    <div
@ -33,29 +30,43 @@ export default function Footer() {
              <FaMapMarkerAlt className="text-2xl text-gray-300" />
              <div className="leading-tight">
                <a
-                  href="https://www.google.com/maps/place/5151+AZ-90,+Sierra+Vista,+AZ+85635"
+                  href={contact?.location?.href ?? ""}
                  target="_blank"
                  rel="noopener noreferrer"
                  className="text-lg text-white"
                >
-                  5151 E HIGHWAY 90
+                  {contact?.location?.street ?? ""}
                </a>
                <br />
-                <span className="text-sm text-gray-300">Sierra Vista, Arizona 85635</span>
+                <span className="text-sm text-gray-300">{contact?.fullLocation ?? ""}</span>
              </div>
            </li>
            <li className="flex items-center space-x-4 border-b border-gray-500 pb-2">
              <FaPhone className="text-2xl text-gray-300" />
-              <span className="text-lg">(520) 803-6644</span>
+              <a
+                href={`tel:${contact?.phone ?? ""}`}
+                target="_blank"
+                rel="noopener noreferrer"
+                className="text-lg text-white"
+              >
+                {contact?.phone ?? ""}
+              </a>
            </li>
            <li className="flex items-center space-x-4 border-b border-gray-500 pb-2">
              <FaFax className="text-2xl text-gray-300" />
-              <span className="text-lg">Fax: (520) 459-3193</span>
+              <a
+                href={`tel:${contact?.fax ?? ""}`}
+                target="_blank"
+                rel="noopener noreferrer"
+                className="text-lg text-white"
+              >
+                Fax: {contact?.fax ?? ""}
+              </a>
            </li>
-            <li className="flex items-center space-x-4">
+            <li className="flex items-center space-x-4 border-b border-gray-500 pb-2">
              <FaFacebook className="text-2xl text-gray-300" />
              <a
-                href="https://www.facebook.com/p/Cochise-Oncology-61556262839823"
+                href={contact?.facebook ?? ""}
                target="_blank"
                rel="noopener noreferrer"
                className="text-lg text-white"
@ -63,21 +74,91 @@ export default function Footer() {
                Facebook
              </a>
            </li>
+            <li className="flex items-center space-x-4">
+              <FaLinkedin className="text-2xl text-gray-300" />
+              <a
+                href={contact?.linkedin ?? ""}
+                target="_blank"
+                rel="noopener noreferrer"
+                className="text-lg text-white"
+              >
+                Linkedin
+              </a>
+            </li>
          </ul>
        </div>

        <div className="w-full md:w-1/4">
          <h3 className="text-lg font-semibold mb-4">Business Hours</h3>
-          <div className="flex items-center space-x-2">
-            <FaClock className="text-xl" />
-            <span className="text-base font-medium">Monday - Friday: 8am - 5pm</span>
-          </div>
+          {contact?.hours?.map?.((hour) => (
+            <div key={hour.id} className="flex items-center space-x-2">
+              <FaClock className="text-xl" />
+              <span className="text-base font-medium">{hour?.hour ?? ""}</span>
+            </div>
+          )) ?? []}
        </div>
      </div>

      <div className="text-center mt-6">
-        <div onClick={scrollToTop} className="cursor-pointer text-white font-semibold" aria-label="Scroll to top">
-          Back to Top ↑
+        <ScrollToTop />
+      </div>
+    </div>
+  );
+}
+
+export function FooterSkeleton() {
+  return (
+    <div
+      className="relative text-white py-10"
+      style={{
+        backgroundColor: "transparent",
+        backgroundImage: "linear-gradient(172deg, #798D90 0%, #C48853 100%)",
+      }}
+    >
+      <div className="container mx-auto flex flex-wrap justify-between items-start px-6">
+        <div className="w-full md:w-1/4 mb-6 md:mb-0 flex flex-col items-start">
+          <Image src="/assets/images/demo-slick/logo-dark.webp" alt="Cochise Oncology Logo" width={363} height={138} />
+          <p className="text-sm mt-3">© {new Date().getFullYear()} All Rights Reserved</p>
+        </div>
+
+        <div className="w-full md:w-1/3 mb-6 md:mb-0 animate-pulse">
+          <h3 className="text-lg font-semibold mb-4">Contact Us</h3>
+          <ul className="space-y-4 border-gray-400 pl-0">
+            <li className="flex items-center space-x-4 border-b border-gray-500 pb-2">
+              <FaMapMarkerAlt className="text-2xl text-gray-300" />
+              <div className="h-2 bg-gray-300 rounded flex-1"></div>
+              <div className="h-2 bg-gray-300 rounded flex-1"></div>
+            </li>
+            <li className="flex items-center space-x-4 border-b border-gray-500 pb-2">
+              <FaPhone className="text-2xl text-gray-300" />
+              <div className="h-2 bg-gray-300 rounded flex-1"></div>
+              <div className="h-2 bg-gray-300 rounded flex-1"></div>
+            </li>
+            <li className="flex items-center space-x-4 border-b border-gray-500 pb-2">
+              <FaFax className="text-2xl text-gray-300" />
+              <div className="h-2 bg-gray-300 rounded flex-1"></div>
+              <div className="h-2 bg-gray-300 rounded flex-1"></div>
+            </li>
+            <li className="flex items-center space-x-4">
+              <FaFacebook className="text-2xl text-gray-300" />
+              <div className="h-2 bg-gray-300 rounded flex-1"></div>
+              <div className="h-2 bg-gray-300 rounded flex-1"></div>
+            </li>
+            <li className="flex items-center space-x-4">
+              <FaLinkedin className="text-2xl text-gray-300" />
+              <div className="h-2 bg-gray-300 rounded flex-1"></div>
+              <div className="h-2 bg-gray-300 rounded flex-1"></div>
+            </li>
+          </ul>
+        </div>
+
+        <div className="w-full md:w-1/4 animate-pulse">
+          <h3 className="text-lg font-semibold mb-4">Business Hours</h3>
+          <div className="flex items-center space-x-2">
+            <FaClock className="text-xl" />
+            <div className="h-2 bg-gray-300 rounded flex-1"></div>
+            <div className="h-2 bg-gray-300 rounded flex-1"></div>
+          </div>
        </div>
      </div>
    </div>
--- a/src/components/Header.tsx
+++ b/src/components/Header.tsx
@ -1,3 +1,5 @@
+"use client";
+
 import HeaderNav from "@/components/HeaderNav";
 import { navMenuData } from "@/data/menu";
 import { toggleMobileMenu } from "@/utils/toggleMobileMenu";
--- a/src/components/HeaderNav.tsx
+++ b/src/components/HeaderNav.tsx
@ -1,12 +1,12 @@
 "use client";

+import { navMenuData } from "@/data/menu";
 import addScrollspy from "@/utils/addScroll";
 import { init_classic_menu_resize } from "@/utils/menuToggle";
 import { scrollToElement } from "@/utils/scrollToElement";
-import { closeMobileMenu, toggleMobileMenu } from "@/utils/toggleMobileMenu";
-import { Fragment, useEffect, useRef, useState } from "react";
+import { toggleMobileMenu } from "@/utils/toggleMobileMenu";
 import Link from "next/link";
-import { navMenuData } from "@/data/menu";
+import { Fragment, useEffect, useRef, useState } from "react";

 export default function HeaderNav({ links, animateY = false }: { links: typeof navMenuData; animateY?: boolean }) {
  const [isDropdownOpen, setIsDropdownOpen] = useState([""]);
@ -36,89 +36,70 @@ export default function HeaderNav({ links, animateY = false }: { links: typeof n

  return (
    <>
-      {links[0].href?.includes("/") &&
-        links.map((link, index) => (
-          <Fragment key={index}>
-            <li>
-              {!Array.isArray(link?.child) && (
-                <Link href={link.href}>
-                  {animateY ? (
-                    <span className="btn-animate-y">
-                      <span className="btn-animate-y-1">{link.text}</span>
-                      <span className="btn-animate-y-2" aria-hidden="true">
-                        {link.text}
-                      </span>
+      {links.map((link, index) => (
+        <Fragment key={index}>
+          <li>
+            {!Array.isArray(link?.child) && (
+              <Link href={link.href}>
+                {animateY ? (
+                  <span className="btn-animate-y">
+                    <span className="btn-animate-y-1">{link.text}</span>
+                    <span className="btn-animate-y-2" aria-hidden="true">
+                      {link.text}
                    </span>
-                  ) : (
-                    link.text
-                  )}
-                </Link>
-              )}
-
-              {Array.isArray(link?.child) && (
-                <>
-                  <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-right ${isDropdownOpen.includes(link.text) && "open"}`} ref={dropdownRef}>
-                    {link.child.map((subLink: any, subLinkIdx: number) => (
-                      <li key={subLinkIdx}>
-                        {!Array.isArray(subLink?.child) && (
-                          <Link href={subLink?.href} onClick={() => toggleMobileMenu()}>
-                            {subLink?.text}
-                          </Link>
-                        )}
-                        {Array.isArray(subLink?.child) && (
-                          <>
-                            <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-right ${isDropdownOpen.includes(subLink.text) && "open"}`}>
-                              {subLink.child.map((subLink2: any, subLinkIdx2: number) => (
-                                <li key={subLinkIdx2}>
-                                  <Link href={subLink2?.href} onClick={() => toggleMobileMenu()}>
-                                    {subLink2?.text}
-                                  </Link>
-                                </li>
-                              ))}
-                            </ul>
-                          </>
-                        )}
-                      </li>
-                    ))}
-                  </ul>
-                </>
-              )}
-            </li>
-            {index != links.length - 1 && (
-              <div className="text-white h-[25px] mx-2 opacity-[0.3]" style={{ border: "1px solid white" }} />
-            )}
-          </Fragment>
-        ))}
-
-      {!links[0].href?.includes("/") &&
-        links.map((link: any, index: any) => (
-          <li className="scrollspy-link" key={index}>
-            <a onClick={() => closeMobileMenu()} className="" href={link.href}>
-              {animateY ? (
-                <span className="btn-animate-y">
-                  <span className="btn-animate-y-1">{link.text}</span>
-                  <span className="btn-animate-y-2" aria-hidden="true">
-                    {link.text}
                  </span>
-                </span>
-              ) : (
-                link.text
-              )}
-            </a>
+                ) : (
+                  link.text
+                )}
+              </Link>
+            )}
+
+            {Array.isArray(link?.child) && (
+              <>
+                <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-right ${isDropdownOpen.includes(link.text) && "open"}`} ref={dropdownRef}>
+                  {link.child.map((subLink: any, subLinkIdx: number) => (
+                    <li key={subLinkIdx}>
+                      {!Array.isArray(subLink?.child) && (
+                        <Link href={subLink?.href} onClick={() => toggleMobileMenu()}>
+                          {subLink?.text}
+                        </Link>
+                      )}
+                      {Array.isArray(subLink?.child) && (
+                        <>
+                          <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-right ${isDropdownOpen.includes(subLink.text) && "open"}`}>
+                            {subLink.child.map((subLink2: any, subLinkIdx2: number) => (
+                              <li key={subLinkIdx2}>
+                                <Link href={subLink2?.href} onClick={() => toggleMobileMenu()}>
+                                  {subLink2?.text}
+                                </Link>
+                              </li>
+                            ))}
+                          </ul>
+                        </>
+                      )}
+                    </li>
+                  ))}
+                </ul>
+              </>
+            )}
          </li>
-        ))}
+          {index != links.length - 1 && (
+            <div
+              className="text-white bg-white h-[1px] md:h-[25px] mx-2 opacity-[0.3]"
+              style={{ border: "1px solid white" }}
+            />
+          )}
+        </Fragment>
+      ))}
    </>
  );
 }
--- a/src/components/Hero.tsx
+++ b/src/components/Hero.tsx
@ -7,7 +7,7 @@ export default function Hero() {

  return (
    <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">
+      <div className="container min-h-[90vh] 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">
@ -18,21 +18,17 @@ export default function Hero() {
        </div>
        {/* Home Section Content */}
        <div className="home-content">
-          <div className="row">
-            {/* Home Section Text */}
-            <div className="col-md-10 offset-md-1">
-              <h2 className="hs-title-3 m-0 p-0">Healing Begins Here</h2>
-              <h1 className="hs-title-2 m-0 p-0">Cochise Oncology</h1>
-              <p className="text-2xl">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"
-              >
-                Request Consultation
-              </a>
-            </div>
-            {/* End Home Section Text */}
+          <div className="space-y-5">
+            <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]"
+              data-btn-animate="y"
+            >
+              Request Consultation
+            </a>
          </div>
        </div>
        {/* End Home Section Content */}
--- a/src/components/Homepage.tsx
+++ b/src/components/Homepage.tsx
@ -6,55 +6,63 @@ import Contact from "./Contacts/Contact";
 export default function homepage({ dark = false }) {
  return (
    <>
-      <hr className={`mt-0 mb-0 ${dark ? "white" : ""} `} />
-      <section
-        className={`page-section scrollSpysection relative ${dark ? "bg-dark-1 light-content" : ""} `}
-        id="about"
-      >
-        <div className="w-full absolute top-[-5vw] z-[99] flex justify-center">
-          <div className="bg-white h-full flex justify-center p-8 gap-3 rounded-xl shadow-xl">
-            <Image
-              src="/assets/images/Cochise_New-service_Radixact-Announcement-900x900-1-1-768x768.webp"
-              width={450}
-              height={0}
-              alt=""
-            />
-            <Image src="/assets/images/cochise-welcome.png" width={500} height={0} alt="" />
-          </div>
-        </div>
-        <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>
-            {/* End Section Text */}
-          </div>
-        </div>
-      </section>
-      <section className="mb-5 w-full min-h-[50vh]">
-        <section className="bg-scroll relative">
-          <div className="decoration-14" />
-          <div className="decoration-15" />
+      <section className="w-full py-5 bg-gradient-to-b from-white to-extColorPrimary7 relative">
+        <div className="bg-scroll">
          <div className="decoration-16 opacity-035 d-none d-md-block">
            <Image src="/assets/images/demo-slick/decoration-2.svg" alt="Image Description" width={128} height={228} />
          </div>
          <div className="decoration-17 opacity-035 d-none d-md-block">
            <Image src="/assets/images/demo-slick/decoration-2.svg" alt="Image Description" width={128} height={228} />
          </div>
-        </section>
-        <div className="pt-[12vw] w-full flex justify-center gap-5">
-          <div className="w-[300px] h-[300px] bg-gradient-to-br from-white via-yellow-200 to-yellow-400 rounded-full flex items-center justify-center overflow-auto relative">
-            <div className="bg-[url('/assets/images/cochise-welcome.png')] h-full w-full bg-[left] bg-cover text-center align-middle flex items-center justify-center opacity-[0.7]"></div>
-            <p className="text-[36px] text-center p-0 m-0 absolute text-white font-semibold tracking-tight">
-              Radiation Oncology
-            </p>
-          </div>
-          <div className="w-[300px] h-[300px] bg-green-300 rounded-full flex items-center justify-center">
-            Medical Oncology
-          </div>
-          <div className="w-[300px] h-[300px] bg-green-300 rounded-full flex items-center justify-center">
-            Skin Cancer
+        </div>
+        <div className="w-full absolute -top-20 md:-top-40 lg:-top-20 z-[99] flex">
+          <div className="bg-white w-11/12 lg:w-9/12 xl:w-8/12 mx-auto flex flex-col md:flex-row p-3 space-x-3 space-y-3 rounded-xl shadow-xl">
+            <div className="flex-1 relative">
+              <Image
+                src="/assets/images/Cochise_New-service_Radixact-Announcement-900x900-1-1-768x768.webp"
+                alt=""
+                width={500}
+                height={0}
+                className="w-full h-auto rounded-xl"
+              />
+            </div>
+            <div className="flex-1 relative">
+              <Image
+                src="/assets/images/cochise-welcome.png"
+                alt=""
+                width={500}
+                height={0}
+                className="w-full h-auto rounded-xl"
+              />
+            </div>
          </div>
        </div>
+        <div className="w-full flex flex-wrap justify-center space-x-5 space-y-4 mt-[550px] md:mt-[24vh] lg:mt-[62vh]">
+          <Link href="/radiation-oncology">
+            <div className="w-[320px] h-[320px] bg-[url('/assets/images/cochise-radiation-oncology-768x512.webp')] bg-cover rounded-full flex items-center justify-center overflow-auto relative">
+              <div className="h-full w-full rounded-full bg-gradient-to-b from-[#E3B19B82] to-[#798D90] text-center align-middle flex items-center justify-center"></div>
+              <p className="text-[36px] text-center p-0 m-0 absolute text-white font-medium tracking-tight leading-10">
+                Radiation Oncology
+              </p>
+            </div>
+          </Link>
+          <Link href="/medical-oncology">
+            <div className="w-[320px] h-[320px] bg-[url('/assets/images/cochise-medical-oncology-768x512.webp')] bg-cover rounded-full flex items-center justify-center overflow-auto relative">
+              <div className="h-full w-full bg-gradient-to-b from-[#E3B19B82] to-[#798D90] text-center align-middle flex items-center justify-center opacity-[0.7]"></div>
+              <p className="text-[36px] text-center p-0 m-0 absolute text-white font-medium tracking-tight leading-10">
+                Medical Oncology
+              </p>
+            </div>
+          </Link>
+          <Link href="/skin-cancer">
+            <div className="w-[320px] h-[320px] bg-[url('/assets/images/cochise-skin-cancer-768x512.webp')] bg-cover rounded-full flex items-center justify-center overflow-auto relative">
+              <div className="h-full w-full rounded-full bg-gradient-to-b from-[#E3B19B82] to-[#798D90] text-center align-middle flex items-center justify-center opacity-[0.7]"></div>
+              <p className="text-[36px] text-center p-0 m-0 absolute text-white font-medium tracking-tight leading-10">
+                Skin Cancer
+              </p>
+            </div>
+          </Link>
+        </div>
      </section>
      {/* <section className="mb-5 w-full">
        <Testimonials />
--- a/src/components/InitialScript.tsx
+++ b/src/components/InitialScript.tsx
@ -0,0 +1,40 @@
+"use client";
+
+import { headerChangeOnScroll } from "@/utils/changeHeaderOnScroll";
+import { init_wow } from "@/utils/initWow";
+import { parallaxMouseMovement, parallaxScroll } from "@/utils/parallax";
+import { usePathname } from "next/navigation";
+import { useEffect } from "react";
+
+export default function InitialScript() {
+  const path = usePathname();
+
+  useEffect(() => {
+    init_wow();
+    parallaxMouseMovement();
+    const mainNav = document.querySelector(".main-nav");
+    if (mainNav?.classList.contains("transparent")) {
+      mainNav.classList.add("js-transparent");
+    } else if (!mainNav?.classList?.contains("dark")) {
+      mainNav?.classList.add("js-no-transparent-white");
+    }
+
+    window.addEventListener("scroll", headerChangeOnScroll);
+    parallaxScroll();
+    return () => {
+      window.removeEventListener("scroll", headerChangeOnScroll);
+    };
+  }, [path]);
+
+  useEffect(() => {
+    if (typeof window !== "undefined") {
+      // Import the script only on the client side
+      // @ts-ignore
+      import("bootstrap/dist/js/bootstrap.esm").then(() => {
+        // Module is imported, you can access any exported functionality if
+      });
+    }
+  }, []);
+
+  return <></>;
+}
--- a/src/components/ScrollToTop.tsx
+++ b/src/components/ScrollToTop.tsx
@ -0,0 +1,14 @@
+"use client";
+
+export default function ScrollToTop() {
+  const scrollToTop = (event: React.MouseEvent<HTMLDivElement, MouseEvent>) => {
+    event.preventDefault();
+    window.scrollTo({ top: 0, behavior: "smooth" });
+  };
+
+  return (
+    <div onClick={scrollToTop} className="cursor-pointer text-white font-semibold" aria-label="Scroll to top">
+      Back to Top ↑
+    </div>
+  );
+}
--- a/src/data/menu.ts
+++ b/src/data/menu.ts
@ -1,8 +1,4 @@
 export const navMenuData = [
-  { href: "/", text: "Home" },
-  { href: "/blog", text: "Blog" },
-  { href: "/testimonials", text: "Testimonials" },
-  { href: "https://cochise.mdnavigatorclinical.com/prognocistc1/cochiseClinicIndex.html", text: "Patient Portal" },
  {
    href: "#",
    text: "About",
@ -68,10 +64,13 @@ export const navMenuData = [
      },
    ],
  },
+  { href: "https://cochise.mdnavigatorclinical.com/prognocistc1/cochiseClinicIndex.html", text: "Patient Portal" },
+  { href: "/blog", text: "Blog" },
  {
    href: "#",
    text: "Resources",
    child: [
+      { href: "/testimonials", text: "Testimonials" },
      { href: "/insurances", text: "Insurances" },
      { href: "/support", text: "Support Groups" },
      { href: "/hospitality-house", text: "Hospitality House" },
--- a/src/globals/Contacts.ts
+++ b/src/globals/Contacts.ts
@ -0,0 +1,79 @@
+import type { GlobalConfig } from "payload";
+
+export const Contacts: GlobalConfig = {
+  slug: "contacts",
+  fields: [
+    {
+      name: "location",
+      type: "group",
+      fields: [
+        {
+          name: "street",
+          label: "Street",
+          type: "text",
+        },
+        {
+          name: "city",
+          label: "City",
+          type: "text",
+        },
+        {
+          name: "state",
+          label: "State",
+          type: "text",
+        },
+        {
+          name: "postcode",
+          label: "Postcode",
+          type: "text",
+        },
+        {
+          name: "href",
+          label: "Google Map Link",
+          type: "text",
+        },
+        {
+          name: "iframeSrc",
+          label: "Google Map Iframe Source",
+          type: "text",
+        },
+      ],
+    },
+    {
+      name: "phone",
+      label: "Phone Number",
+      type: "text",
+    },
+    {
+      name: "fax",
+      label: "Fax",
+      type: "text",
+    },
+    {
+      name: "facebook",
+      label: "Facebook Link",
+      type: "text",
+    },
+    {
+      name: "linkedin",
+      label: "Linkedin Link",
+      type: "text",
+    },
+    {
+      name: "hours",
+      label: "Business Hours",
+      type: "array",
+      minRows: 1,
+      fields: [
+        {
+          name: "hour",
+          type: "text",
+        },
+      ],
+    },
+  ],
+  admin: {
+    hideAPIURL: true,
+    group: "General",
+  },
+};
--- a/src/globals/GoogleReviews.ts
+++ b/src/globals/GoogleReviews.ts
@ -38,5 +38,6 @@ export const GoogleReviews: GlobalConfig = {
  ],
  admin: {
    hideAPIURL: true,
+    group: "General",
  },
 };
--- a/src/payload-types.ts
+++ b/src/payload-types.ts
@ -44,9 +44,11 @@ export interface Config {
  };
  globals: {
    'google-reviews': GoogleReview;
+    contacts: Contact;
  };
  globalsSelect: {
    'google-reviews': GoogleReviewsSelect<false> | GoogleReviewsSelect<true>;
+    contacts: ContactsSelect<false> | ContactsSelect<true>;
  };
  locale: null;
  user: User & {
@ -926,6 +928,33 @@ export interface GoogleReview {
  updatedAt?: string | null;
  createdAt?: string | null;
 }
+/**
+ * This interface was referenced by `Config`'s JSON-Schema
+ * via the `definition` "contacts".
+ */
+export interface Contact {
+  id: number;
+  location?: {
+    street?: string | null;
+    city?: string | null;
+    state?: string | null;
+    postcode?: string | null;
+    href?: string | null;
+    iframeSrc?: string | null;
+  };
+  phone?: string | null;
+  fax?: string | null;
+  facebook?: string | null;
+  linkedin?: string | null;
+  hours?:
+    | {
+        hour?: string | null;
+        id?: string | null;
+      }[]
+    | null;
+  updatedAt?: string | null;
+  createdAt?: string | null;
+}
 /**
 * This interface was referenced by `Config`'s JSON-Schema
 * via the `definition` "google-reviews_select".
@ -944,6 +973,35 @@ export interface GoogleReviewsSelect<T extends boolean = true> {
  createdAt?: T;
  globalType?: T;
 }
+/**
+ * This interface was referenced by `Config`'s JSON-Schema
+ * via the `definition` "contacts_select".
+ */
+export interface ContactsSelect<T extends boolean = true> {
+  location?:
+    | T
+    | {
+        street?: T;
+        city?: T;
+        state?: T;
+        postcode?: T;
+        href?: T;
+        iframeSrc?: T;
+      };
+  phone?: T;
+  fax?: T;
+  facebook?: T;
+  linkedin?: T;
+  hours?:
+    | T
+    | {
+        hour?: T;
+        id?: T;
+      };
+  updatedAt?: T;
+  createdAt?: T;
+  globalType?: T;
+}
 /**
 * This interface was referenced by `Config`'s JSON-Schema
 * via the `definition` "auth".
--- a/src/payload.config.ts
+++ b/src/payload.config.ts
@ -25,6 +25,7 @@ import {
  LinkFeature,
 } from "@payloadcms/richtext-lexical";
 import { GoogleReviews } from "@/globals/GoogleReviews";
+import { Contacts } from "./globals/Contacts";

 const filename = fileURLToPath(import.meta.url);
 const dirname = path.dirname(filename);
@ -51,7 +52,7 @@ export default buildConfig({
    theme: "dark",
  },
  collections: [Users, Media, Blogs, Pages, Teams, BlogCategories, BlogTags],
-  globals: [GoogleReviews],
+  globals: [GoogleReviews, Contacts],
  secret: process.env.PAYLOAD_SECRET || "",
  typescript: {
    outputFile: path.resolve(dirname, "payload-types.ts"),
@ -111,6 +112,14 @@ export default buildConfig({
      },
      formOverrides: {
        fields: undefined,
+        admin: {
+          group: "General",
+        },
+      },
+      formSubmissionOverrides: {
+        admin: {
+          group: "General",
+        },
      },
    }),
  ],
--- a/src/services/payload/contact.ts
+++ b/src/services/payload/contact.ts
@ -0,0 +1,25 @@
+import payloadConfig from "@/payload.config";
+import { getPayload } from "payload";
+
+export async function fetchContact() {
+  const payload = await getPayload({ config: payloadConfig });
+  const dataQuery = await payload.findGlobal({ slug: "contacts" });
+
+  const fullLocationArr: string[] = [];
+  if (!!dataQuery?.location?.city) {
+    fullLocationArr.push(dataQuery.location.city);
+  }
+  if (!!dataQuery?.location?.state) {
+    fullLocationArr.push(dataQuery.location.state);
+  }
+  if (!!dataQuery?.location?.postcode) {
+    fullLocationArr.push(dataQuery.location.postcode);
+  }
+
+  return !!dataQuery
+    ? {
+        ...dataQuery,
+        fullLocation: fullLocationArr.join(","),
+      }
+    : null;
+}
--- a/tailwind.config.ts
+++ b/tailwind.config.ts
@ -17,6 +17,7 @@ export default {
        extColorPrimary4: "var(--ext-color-primary-4)",
        extColorPrimary5: "var(--ext-color-primary-5)",
        extColorPrimary6: "var(--ext-color-primary-6)",
+        extColorPrimary7: "var(--ext-color-primary-7)",
      },
    },
  },
Author	SHA1	Message	Date
RizqiSyahrendra	9cbc376f97	fix: homepage image and circle cta styling	2025-03-03 11:40:00 +07:00
RizqiSyahrendra	04c48ccfb4	fix: contact service lint error	2025-02-28 19:36:54 +07:00
RizqiSyahrendra	72638cab43	fix: footer linkedin data, integrated from payload	2025-02-28 19:35:54 +07:00
RizqiSyahrendra	3a08a76b3f	fix: layout and footer, - restructure layout and footer - footer (contact) data from payload	2025-02-28 19:07:37 +07:00
RizqiSyahrendra	ae9ec00946	fix: HeaderNav types and defect	2025-02-28 13:47:35 +07:00
RizqiSyahrendra	312e4bed2f	Merge pull request 'dev' (#5 ) from dev into main Reviewed-on: #5	2025-02-28 03:52:33 +00:00