Merge pull request 'dev' (#7) from dev into main

Reviewed-on: #7

src/app/(main)/layout.tsx

@@ -1,5 +1,5 @@
 import "@/app/globals.css";
-import Footer, { FooterSkeleton } from "@/components/Footer";
+import Footer from "@/components/Footer";
 import Header from "@/components/Header";
 import InitialScript from "@/components/InitialScript";
 import { navMenuData } from "@/data/menu";
@@ -8,7 +8,6 @@ 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";
@@ -31,9 +30,7 @@ export default function MainLayout({
               <Header links={navMenuData} />
             </nav>
             <main id="main">{children}</main>
-            <Suspense fallback={<FooterSkeleton />}>
+            <Footer />
-              <Footer />
-            </Suspense>
           </div>
         </div>
       </body>

src/components/Blocks/GoogleReviews/GoogleReviews.tsx

@@ -17,8 +17,8 @@ export interface GoogleReviewProps {
 export function GoogleReviews({ data }: GoogleReviewProps) {
   return (
     <section className="bg-scroll relative">
-      <div className="decoration-14" />
+      {/* <div className="decoration-14" />
-      <div className="decoration-15" />
+      <div className="decoration-15" /> */}
       <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>
@@ -29,12 +29,12 @@ export function GoogleReviews({ data }: GoogleReviewProps) {
       <div className="container px-6">
         <h2 className="text-3xl font-bold text-center">Reviews</h2>
 
-        <div className="flex justify-center space-x-2">
+        <div className="flex justify-center items-center space-x-2">
-          <h2 className="text-xl text-center font-bol">{data.ratingValue}</h2>
+          <h2 className="text-xl text-center font-bol mt-[15px]">{data.ratingValue}</h2>
           <div className="mt-1">
             <StarRating size={20} value={data.ratingValue} />
           </div>
-          <div className="text-xs font-semibold mt-">Over {data.totalRating} Reviews</div>
+          <div className="text-xs font-medium">Over {data.totalRating} Reviews</div>
         </div>
 
         <div className="mt-20 relative">

src/components/Contacts/Contact.tsx

@@ -1,7 +1,19 @@
-"use client";
+import { fetchContact } from "@/services/payload/contact";
-import React from "react";
+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">
@@ -13,8 +25,8 @@ export default function Contact() {
           </div>
         </div>
       </div>
-      <div className="row wow fadeInUp" data-wow-delay="0.5s">
+      <div className="row" data-wow-delay="0.5s">
-        <div className="col-md-6 mb-sm-50">
+        <div className="col-md-6 mb-sm-10">
           {/* Contact Form */}
           <div className="row mb-60 mb-sm-50">
             {/* Contact Item */}
@@ -38,7 +50,9 @@ export default function Contact() {
                 <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>
+                    <a target="_blank" href={contact?.location?.href ?? "#"}>
+                      {contact?.fullLocation ?? ""}
+                    </a>
                   </div>
                 </div>
               </div>
@@ -64,7 +78,7 @@ export default function Contact() {
                 <h4 className="alt-features-title">Phone</h4>
                 <div className="alt-features-descr clearlinks">
                   <div>
-                    <a href="tel:(520) 803-6644">(520) 803-6644</a>
+                    <a href={`tel:${contact?.phone ?? "#"}`}>{contact?.phone ?? ""}</a>
                   </div>
                 </div>
               </div>
@@ -91,7 +105,12 @@ export default function Contact() {
                 </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>
+                  {Array.isArray(contact?.hours) &&
+                    contact.hours.map((h) => (
+                      <p key={h.id} className="text-wrap">
+                        {h.hour ?? ""}
+                      </p>
+                    ))}
                 </div>
               </div>
             </div>
@@ -116,7 +135,7 @@ export default function Contact() {
                 <h4 className="alt-features-title">Fax</h4>
                 <div className="alt-features-descr clearlinks">
                   <div>
-                    <a href="tel:(520) 459-3193">(520) 459-3193</a>
+                    <a href={`tel:${contact?.fax ?? "#"}`}>{contact?.fax ?? ""}</a>
                   </div>
                 </div>
               </div>
@@ -143,3 +162,123 @@ export default function Contact() {
     </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/Footer.tsx

@@ -2,8 +2,19 @@ import Image from "next/image";
 import { FaClock, FaFacebook, FaFax, FaLinkedin, FaMapMarkerAlt, FaPhone } from "react-icons/fa";
 import ScrollToTop from "./ScrollToTop";
 import { fetchContact } from "@/services/payload/contact";
+import { Suspense } from "react";
 
 export default async function Footer() {
+  return (
+    <>
+      <Suspense fallback={<FooterSkeleton />}>
+        <FooterWithData />
+      </Suspense>
+    </>
+  );
+}
+
+async function FooterWithData() {
   const contact = await fetchContact();
 
   return (
@@ -106,7 +117,7 @@ export default async function Footer() {
   );
 }
 
-export function FooterSkeleton() {
+function FooterSkeleton() {
   return (
     <div
       className="relative text-white py-10"

src/components/Homepage.tsx

@@ -2,6 +2,7 @@ import Image from "next/image";
 import Link from "next/link";
 import About from "./About";
 import Contact from "./Contacts/Contact";
+import Testimonials from "./Testimonials";
 
 export default function homepage({ dark = false }) {
   return (
@@ -37,44 +38,44 @@ export default function homepage({ dark = false }) {
             </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]">
+        <div className="w-full flex flex-wrap justify-center space-x-5 space-y-4 mt-[550px] md:mt-[24vh] lg:mt-[62vh] wow fadeInUp">
           <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="w-[320px] h-[320px] hover:scale-105 transition-transform duration-500 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">
+              <p className="text-[36px] text-center px-4 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="w-[320px] h-[320px] hover:scale-105 transition-transform duration-500 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>
+              <div className="h-full w-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">
+              <p className="text-[36px] text-center px-4 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="w-[320px] h-[320px] hover:scale-105 transition-transform duration-500 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>
+              <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">
+              <p className="text-[36px] text-center px-4 m-0 absolute text-white font-medium tracking-tight leading-10">
                 Skin Cancer
               </p>
             </div>
           </Link>
         </div>
       </section>
-      {/* <section className="mb-5 w-full">
+      <section className="py-5 w-full">
         <Testimonials />
-      </section> */}
+      </section>
-      <section className="page-section bg-scroll light-content bg-[url(/assets/images/demo-modern/section-bg-3.jpeg)]">
+      <section className="page-section bg-scroll light-content bg-[url(/assets/images/demo-modern/section-bg-3.jpeg)] bg-cover">
-        <div className="bg-overlay bg-gradient-dark-alpha-2 d-none d-md-block" />
+        <div className="bg-overlay bg-gradient-dark-alpha-2 d-none d-lg-block" />
         {/* Mobile Overlay */}
-        <div className="bg-overlay bg-dark-1 opacity-09 d-md-none" />
+        <div className="bg-overlay bg-dark-1 opacity-09 d-lg-none" />
         {/* End Mobile Overlay */}
         <div className="container position-relative">
           <div className="row wow fadeInUp">
-            <div className="col-md-2 offset-md-5 col-lg-6 offset-lg-6 col-xl-6 offset-xl-6">
+            <div className="col-12 col-lg-6 offset-lg-6 col-xl-6 offset-xl-6">
               <h2 className="section-title mb-40 mb-sm-30">A Cancer Treatment Center of Excellence</h2>
               <p className="text-sm">
                 Get compassionate care and excellent medical services from COCHISE ONCOLOGY in Sierra Vista, Arizona. We

src/components/Testimonials.tsx

@@ -3,31 +3,8 @@ import { GoogleReviewsBlock } from "./Blocks/GoogleReviews";
 import { GoogleReviewsSkeleton } from "./Blocks/GoogleReviews/GoogleReviews";
 
 export default function Testimonials() {
-  // const isotopContainer = useRef<any | null>(null);
-  // const initIsotop = async () => {
-  //   const Isotope = (await import("isotope-layout")).default;
-  //   const imagesloaded = (await import("imagesloaded")).default;
-
-  //   const isotope = new Isotope(isotopContainer.current, {
-  //     itemSelector: ".col-md-6",
-  //     layoutMode: "masonry",
-  //   });
-  //   imagesloaded(isotopContainer.current).on("progress", function () {
-  //     isotope.layout();
-  //   });
-  // };
-
-  // useEffect(() => {
-  //   initIsotop();
-  // }, []);
-
   return (
-    <div className="text-center wow fadeInUp">
+    <div className="text-center wow fadeInUp relative">
-      {/* <div className="row">
-        <div className="flex align-items-center justify-center wow fadeInUp">
-          <GoogleReviewsBlock />
-        </div>
-      </div> */}
       <Suspense fallback={<GoogleReviewsSkeleton />}>
         <GoogleReviewsBlock />
       </Suspense>

src/services/payload/contact.ts

@@ -6,20 +6,21 @@ export async function fetchContact() {
   const dataQuery = await payload.findGlobal({ slug: "contacts" });
 
   const fullLocationArr: string[] = [];
+  if (!!dataQuery?.location?.street) {
+    fullLocationArr.push(dataQuery.location.street);
+  }
   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(","),
+        fullLocation: `${fullLocationArr.join(", ")} ${dataQuery?.location?.postcode ?? ""}`,
+        fullLocationWithoutStreet: `${fullLocationArr.slice(1).join(", ")} ${dataQuery?.location?.postcode ?? ""}`,
       }
     : null;
 }