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

Reviewed-on: #1

public/assets/css/bootstrap.min.css

@@ -47,16 +47,10 @@
   --bs-black-rgb: 0, 0, 0;
   --bs-body-color-rgb: 33, 37, 41;
   --bs-body-bg-rgb: 255, 255, 255;
-  --bs-font-sans-serif: system-ui, -apple-system, "Segoe UI", Roboto,
+  --bs-font-sans-serif: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans",
-    "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif,
+    "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
-    "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+  --bs-font-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
-  --bs-font-monospace: SFMono-Regular, Menlo, Monaco, Consolas,
+  --bs-gradient: linear-gradient(180deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0));
-    "Liberation Mono", "Courier New", monospace;
-  --bs-gradient: linear-gradient(
-    180deg,
-    rgba(255, 255, 255, 0.15),
-    rgba(255, 255, 255, 0)
-  );
   --bs-body-font-family: var(--bs-font-sans-serif);
   --bs-body-font-size: 1rem;
   --bs-body-font-weight: 400;
@@ -232,7 +226,7 @@ sup {
 }
 a {
   color: #0d6efd;
-  text-decoration: underline;
+  /* text-decoration: underline; */
 }
 a:hover {
   color: #0a58ca;
@@ -1860,7 +1854,9 @@ progress {
   -moz-appearance: none;
   appearance: none;
   border-radius: 0.25rem;
-  transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
+  transition:
+    border-color 0.15s ease-in-out,
+    box-shadow 0.15s ease-in-out;
 }
 @media (prefers-reduced-motion: reduce) {
   .form-control {
@@ -1909,11 +1905,16 @@ progress {
   border-width: 0;
   border-inline-end-width: 1px;
   border-radius: 0;
-  -webkit-transition: color 0.15s ease-in-out,
+  -webkit-transition:
-    background-color 0.15s ease-in-out, border-color 0.15s ease-in-out,
+    color 0.15s ease-in-out,
+    background-color 0.15s ease-in-out,
+    border-color 0.15s ease-in-out,
+    box-shadow 0.15s ease-in-out;
+  transition:
+    color 0.15s ease-in-out,
+    background-color 0.15s ease-in-out,
+    border-color 0.15s ease-in-out,
     box-shadow 0.15s ease-in-out;
-  transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out,
-    border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
 }
 .form-control::file-selector-button {
   padding: 0.375rem 0.75rem;
@@ -1928,8 +1929,11 @@ progress {
   border-width: 0;
   border-inline-end-width: 1px;
   border-radius: 0;
-  transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out,
+  transition:
-    border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
+    color 0.15s ease-in-out,
+    background-color 0.15s ease-in-out,
+    border-color 0.15s ease-in-out,
+    box-shadow 0.15s ease-in-out;
 }
 @media (prefers-reduced-motion: reduce) {
   .form-control::-webkit-file-upload-button {
@@ -1959,11 +1963,16 @@ progress {
   border-width: 0;
   border-inline-end-width: 1px;
   border-radius: 0;
-  -webkit-transition: color 0.15s ease-in-out,
+  -webkit-transition:
-    background-color 0.15s ease-in-out, border-color 0.15s ease-in-out,
+    color 0.15s ease-in-out,
+    background-color 0.15s ease-in-out,
+    border-color 0.15s ease-in-out,
+    box-shadow 0.15s ease-in-out;
+  transition:
+    color 0.15s ease-in-out,
+    background-color 0.15s ease-in-out,
+    border-color 0.15s ease-in-out,
     box-shadow 0.15s ease-in-out;
-  transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out,
-    border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
 }
 @media (prefers-reduced-motion: reduce) {
   .form-control::-webkit-file-upload-button {
@@ -2079,7 +2088,9 @@ textarea.form-control-lg {
   background-size: 16px 12px;
   border: 1px solid #ced4da;
   border-radius: 0.25rem;
-  transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
+  transition:
+    border-color 0.15s ease-in-out,
+    box-shadow 0.15s ease-in-out;
   -webkit-appearance: none;
   -moz-appearance: none;
   appearance: none;
@@ -2235,10 +2246,14 @@ textarea.form-control-lg {
   outline: 0;
 }
 .form-range:focus::-webkit-slider-thumb {
-  box-shadow: 0 0 0 1px #fff, 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
+  box-shadow:
+    0 0 0 1px #fff,
+    0 0 0 0.25rem rgba(13, 110, 253, 0.25);
 }
 .form-range:focus::-moz-range-thumb {
-  box-shadow: 0 0 0 1px #fff, 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
+  box-shadow:
+    0 0 0 1px #fff,
+    0 0 0 0.25rem rgba(13, 110, 253, 0.25);
 }
 .form-range::-moz-focus-outer {
   border: 0;
@@ -2250,9 +2265,13 @@ textarea.form-control-lg {
   background-color: #0d6efd;
   border: 0;
   border-radius: 1rem;
-  -webkit-transition: background-color 0.15s ease-in-out,
+  -webkit-transition:
-    border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
+    background-color 0.15s ease-in-out,
-  transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out,
+    border-color 0.15s ease-in-out,
+    box-shadow 0.15s ease-in-out;
+  transition:
+    background-color 0.15s ease-in-out,
+    border-color 0.15s ease-in-out,
     box-shadow 0.15s ease-in-out;
   -webkit-appearance: none;
   appearance: none;
@@ -2281,9 +2300,13 @@ textarea.form-control-lg {
   background-color: #0d6efd;
   border: 0;
   border-radius: 1rem;
-  -moz-transition: background-color 0.15s ease-in-out,
+  -moz-transition:
-    border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
+    background-color 0.15s ease-in-out,
-  transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out,
+    border-color 0.15s ease-in-out,
+    box-shadow 0.15s ease-in-out;
+  transition:
+    background-color 0.15s ease-in-out,
+    border-color 0.15s ease-in-out,
     box-shadow 0.15s ease-in-out;
   -moz-appearance: none;
   appearance: none;
@@ -2332,7 +2355,9 @@ textarea.form-control-lg {
   pointer-events: none;
   border: 1px solid transparent;
   transform-origin: 0 0;
-  transition: opacity 0.1s ease-in-out, transform 0.1s ease-in-out;
+  transition:
+    opacity 0.1s ease-in-out,
+    transform 0.1s ease-in-out;
 }
 @media (prefers-reduced-motion: reduce) {
   .form-floating > label {
@@ -2439,21 +2464,19 @@ textarea.form-control-lg {
   padding-right: 3rem;
 }
 .input-group:not(.has-validation) > .dropdown-toggle:nth-last-child(n + 3),
-.input-group:not(.has-validation)
+.input-group:not(.has-validation) > :not(:last-child):not(.dropdown-toggle):not(.dropdown-menu) {
-  > :not(:last-child):not(.dropdown-toggle):not(.dropdown-menu) {
   border-top-right-radius: 0;
   border-bottom-right-radius: 0;
 }
 .input-group.has-validation > .dropdown-toggle:nth-last-child(n + 4),
-.input-group.has-validation
+.input-group.has-validation > :nth-last-child(n + 3):not(.dropdown-toggle):not(.dropdown-menu) {
-  > :nth-last-child(n + 3):not(.dropdown-toggle):not(.dropdown-menu) {
   border-top-right-radius: 0;
   border-bottom-right-radius: 0;
 }
 .input-group
-  > :not(:first-child):not(.dropdown-menu):not(.valid-tooltip):not(
+  > :not(:first-child):not(.dropdown-menu):not(.valid-tooltip):not(.valid-feedback):not(.invalid-tooltip):not(
-    .valid-feedback
+    .invalid-feedback
-  ):not(.invalid-tooltip):not(.invalid-feedback) {
+  ) {
   margin-left: -1px;
   border-top-left-radius: 0;
   border-bottom-left-radius: 0;
@@ -2501,8 +2524,7 @@ textarea.form-control-lg {
 .was-validated textarea.form-control:valid,
 textarea.form-control.is-valid {
   padding-right: calc(1.5em + 0.75rem);
-  background-position: top calc(0.375em + 0.1875rem) right
+  background-position: top calc(0.375em + 0.1875rem) right calc(0.375em + 0.1875rem);
-    calc(0.375em + 0.1875rem);
 }
 .form-select.is-valid,
 .was-validated .form-select:valid {
@@ -2515,8 +2537,12 @@ textarea.form-control.is-valid {
   padding-right: 4.125rem;
   background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e"),
     url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3e%3cpath fill='%23198754' d='M2.3 6.73L.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/%3e%3c/svg%3e");
-  background-position: right 0.75rem center, center right 2.25rem;
+  background-position:
-  background-size: 16px 12px, calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
+    right 0.75rem center,
+    center right 2.25rem;
+  background-size:
+    16px 12px,
+    calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
 }
 .form-select.is-valid:focus,
 .was-validated .form-select:valid:focus {
@@ -2597,8 +2623,7 @@ textarea.form-control.is-valid {
 .was-validated textarea.form-control:invalid,
 textarea.form-control.is-invalid {
   padding-right: calc(1.5em + 0.75rem);
-  background-position: top calc(0.375em + 0.1875rem) right
+  background-position: top calc(0.375em + 0.1875rem) right calc(0.375em + 0.1875rem);
-    calc(0.375em + 0.1875rem);
 }
 .form-select.is-invalid,
 .was-validated .form-select:invalid {
@@ -2611,8 +2636,12 @@ textarea.form-control.is-invalid {
   padding-right: 4.125rem;
   background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e"),
     url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' width='12' height='12' fill='none' stroke='%23dc3545'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3cpath stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/%3e%3ccircle cx='6' cy='8.2' r='.6' fill='%23dc3545' stroke='none'/%3e%3c/svg%3e");
-  background-position: right 0.75rem center, center right 2.25rem;
+  background-position:
-  background-size: 16px 12px, calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
+    right 0.75rem center,
+    center right 2.25rem;
+  background-size:
+    16px 12px,
+    calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
 }
 .form-select.is-invalid:focus,
 .was-validated .form-select:invalid:focus {
@@ -2667,8 +2696,11 @@ textarea.form-control.is-invalid {
   padding: 0.375rem 0.75rem;
   font-size: 1rem;
   border-radius: 0.25rem;
-  transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out,
+  transition:
-    border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
+    color 0.15s ease-in-out,
+    background-color 0.15s ease-in-out,
+    border-color 0.15s ease-in-out,
+    box-shadow 0.15s ease-in-out;
 }
 @media (prefers-reduced-motion: reduce) {
   .btn {
@@ -3729,7 +3761,9 @@ fieldset:disabled .btn {
   padding: 0.5rem 1rem;
   color: #0d6efd;
   text-decoration: none;
-  transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out,
+  transition:
+    color 0.15s ease-in-out,
+    background-color 0.15s ease-in-out,
     border-color 0.15s ease-in-out;
 }
 @media (prefers-reduced-motion: reduce) {
@@ -4438,8 +4472,11 @@ fieldset:disabled .btn {
   border: 0;
   border-radius: 0;
   overflow-anchor: none;
-  transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out,
+  transition:
-    border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out,
+    color 0.15s ease-in-out,
+    background-color 0.15s ease-in-out,
+    border-color 0.15s ease-in-out,
+    box-shadow 0.15s ease-in-out,
     border-radius 0.15s ease;
 }
 @media (prefers-reduced-motion: reduce) {
@@ -4562,8 +4599,11 @@ fieldset:disabled .btn {
   text-decoration: none;
   background-color: #fff;
   border: 1px solid #dee2e6;
-  transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out,
+  transition:
-    border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
+    color 0.15s ease-in-out,
+    background-color 0.15s ease-in-out,
+    border-color 0.15s ease-in-out,
+    box-shadow 0.15s ease-in-out;
 }
 @media (prefers-reduced-motion: reduce) {
   .page-link {
@@ -6088,18 +6128,8 @@ fieldset:disabled .btn {
   }
 }
 .placeholder-wave {
-  -webkit-mask-image: linear-gradient(
+  -webkit-mask-image: linear-gradient(130deg, #000 55%, rgba(0, 0, 0, 0.8) 75%, #000 95%);
-    130deg,
+  mask-image: linear-gradient(130deg, #000 55%, rgba(0, 0, 0, 0.8) 75%, #000 95%);
-    #000 55%,
-    rgba(0, 0, 0, 0.8) 75%,
-    #000 95%
-  );
-  mask-image: linear-gradient(
-    130deg,
-    #000 55%,
-    rgba(0, 0, 0, 0.8) 75%,
-    #000 95%
-  );
   -webkit-mask-size: 200% 100%;
   mask-size: 200% 100%;
   -webkit-animation: placeholder-wave 2s linear infinite;
@@ -7200,24 +7230,15 @@ fieldset:disabled .btn {
 }
 .bg-primary {
   --bs-bg-opacity: 1;
-  background-color: rgba(
+  background-color: rgba(var(--bs-primary-rgb), var(--bs-bg-opacity)) !important;
-    var(--bs-primary-rgb),
-    var(--bs-bg-opacity)
-  ) !important;
 }
 .bg-secondary {
   --bs-bg-opacity: 1;
-  background-color: rgba(
+  background-color: rgba(var(--bs-secondary-rgb), var(--bs-bg-opacity)) !important;
-    var(--bs-secondary-rgb),
-    var(--bs-bg-opacity)
-  ) !important;
 }
 .bg-success {
   --bs-bg-opacity: 1;
-  background-color: rgba(
+  background-color: rgba(var(--bs-success-rgb), var(--bs-bg-opacity)) !important;
-    var(--bs-success-rgb),
-    var(--bs-bg-opacity)
-  ) !important;
 }
 .bg-info {
   --bs-bg-opacity: 1;
@@ -7225,10 +7246,7 @@ fieldset:disabled .btn {
 }
 .bg-warning {
   --bs-bg-opacity: 1;
-  background-color: rgba(
+  background-color: rgba(var(--bs-warning-rgb), var(--bs-bg-opacity)) !important;
-    var(--bs-warning-rgb),
-    var(--bs-bg-opacity)
-  ) !important;
 }
 .bg-danger {
   --bs-bg-opacity: 1;
@@ -7252,10 +7270,7 @@ fieldset:disabled .btn {
 }
 .bg-body {
   --bs-bg-opacity: 1;
-  background-color: rgba(
+  background-color: rgba(var(--bs-body-bg-rgb), var(--bs-bg-opacity)) !important;
-    var(--bs-body-bg-rgb),
-    var(--bs-bg-opacity)
-  ) !important;
 }
 .bg-transparent {
   --bs-bg-opacity: 1;

public/assets/css/style.css

@@ -754,12 +754,12 @@ body {
 }
 a {
   color: var(--color-dark-1);
-  text-decoration: underline;
+  /* text-decoration: underline; */
   transition: color 0.1s var(--ease-default);
 }
 a:hover {
   color: var(--color-dark-4);
-  text-decoration: underline;
+  /* text-decoration: underline; */
 }
 b,
 strong {
@@ -10141,9 +10141,9 @@ a.link-to-top.color:before {
 .footer-text {
   text-transform: none;
 }
-.footer-text a {
+/* .footer-text a {
   text-decoration: underline;
-}
+} */
 .fw-top-link {
   text-decoration: none;
 }

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

@@ -1,10 +1,9 @@
-"use client";
+// "use client";
 import Hero6 from "@/components/Hero";
-import dynamic from "next/dynamic";
 
-const ParallaxContainer = dynamic(() => import("@/components/ParallaxContainer"), {
+// const ParallaxContainer = dynamic(() => import("@/components/ParallaxContainer"), {
-  ssr: false,
+//   ssr: false,
-});
+// });
 
 export default function Home1BGVideoMultiPage() {
   return (
@@ -12,7 +11,7 @@ export default function Home1BGVideoMultiPage() {
       <div className="theme-main">
         <div className="page" id="top">
           <main id="main">
-            <ParallaxContainer
+            {/* <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)",
@@ -20,7 +19,10 @@ export default function Home1BGVideoMultiPage() {
               id="home"
             >
               <Hero6 />
-            </ParallaxContainer>
+            </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 />
+            </div>
           </main>
         </div>
       </div>

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

@@ -2,6 +2,7 @@ import type { ElementType } from "react";
 
 import Link from "next/link";
 import React from "react";
+import { CgSpinner } from "react-icons/cg";
 
 export type Props = {
   appearance?: "default" | "primary" | "secondary";
@@ -12,6 +13,7 @@ export type Props = {
   label?: string;
   newTab?: boolean | null;
   onClick?: () => void;
+  isLoading?: boolean;
 };
 
 export const Button: React.FC<Props> = ({
@@ -21,6 +23,7 @@ export const Button: React.FC<Props> = ({
   href,
   label,
   newTab,
+  isLoading,
 }) => {
   const newTabProps = newTab ? { rel: "noopener noreferrer", target: "_blank" } : {};
   const Element: ElementType = el;
@@ -35,19 +38,21 @@ export const Button: React.FC<Props> = ({
 
   const content = (
     <div className="btn btn-mod btn-color btn-large btn-full btn-circle btn-hover-anim">
-      <span>{label}</span>
+      <span className="flex flex-row">
+        {label} {isLoading && <CgSpinner color="var(--ext-color-primary-1)" className="animate-spin ml-2" size={24} />}
+      </span>
     </div>
   );
 
   return (
-    <Element {...elementProps}>
+    <Element {...elementProps} {...{ disabled: isLoading }}>
       <React.Fragment>
         {(el === "link" || el === "a") && (
           <Link {...newTabProps} href={href || ""}>
             {content}
           </Link>
         )}
-        {el === "button" && content}
+        {el === "button" && <>{content}</>}
       </React.Fragment>
     </Element>
   );

src/components/Blocks/Form/index.tsx

@@ -76,7 +76,7 @@ export const FormBlock: React.FC<
         // delay loading indicator by 1s
         loadingTimerID = setTimeout(() => {
           setIsLoading(true);
-        }, 1000);
+        }, 250);
 
         try {
           const req = await fetch(`${process.env.NEXT_PUBLIC_PAYLOAD_URL}/api/form-submissions`, {
@@ -160,7 +160,7 @@ export const FormBlock: React.FC<
                   return null;
                 })}
             </div>
-            <Button appearance="primary" el="button" form={formID} label={submitButtonLabel} />
+            <Button appearance="primary" el="button" form={formID} label={submitButtonLabel} isLoading={isLoading} />
           </form>
         )}
       </div>

src/components/Footer.tsx

@@ -36,7 +36,7 @@ export default function Footer() {
                   href="https://www.google.com/maps/place/5151+AZ-90,+Sierra+Vista,+AZ+85635"
                   target="_blank"
                   rel="noopener noreferrer"
-                  className="underline text-lg text-white"
+                  className="text-lg text-white"
                 >
                   5151 E HIGHWAY 90
                 </a>
@@ -58,7 +58,7 @@ export default function Footer() {
                 href="https://www.facebook.com/p/Cochise-Oncology-61556262839823"
                 target="_blank"
                 rel="noopener noreferrer"
-                className="underline text-lg text-white"
+                className="text-lg text-white"
               >
                 Facebook
               </a>

src/components/Hero.tsx

@@ -2,6 +2,7 @@
 
 import ModalVideo from "react-modal-video";
 import { useState } from "react";
+import Link from "next/link";
 
 export default function Hero6() {
   const [isOpen, setOpen] = useState(false);
@@ -34,9 +35,9 @@ export default function Hero6() {
                 data-wow-duration="1.2s"
                 data-wow-offset={0}
               >
-                <button className="bg-[#64B3B4] text-white px-4 py-2 m-3 rounded-3xl hover:opacity-[0.7]">
+                <Link href="/contact" className="bg-[#64B3B4] text-white px-4 py-2 m-3 rounded-3xl hover:opacity-[0.7]">
                   Request Consultation
-                </button>
+                </Link>
                 {/* <a
                   onClick={() => setOpen(true)}
                   className="link-hover-anim align-middle lightbox mfp-iframe mt-10"

src/components/Homepage.tsx

@@ -98,20 +98,14 @@ export default function homepage({ onePage = false, dark = false }) {
       <section className="my-5 w-full">
         <Testimonials />
       </section>
-      <section
+      <section className="page-section bg-scroll light-content bg-[url(/assets/images/demo-modern/section-bg-3.jpeg)]">
-        className="page-section bg-scroll light-content"
-        style={{
-          backgroundImage: "url(/assets/images/demo-modern/section-bg-3.jpeg)",
-        }}
-      >
         <div className="bg-overlay bg-gradient-dark-alpha-2 d-none d-md-block" />
-        {/* End Desktop Overlay */}
         {/* Mobile Overlay */}
         <div className="bg-overlay bg-dark-1 opacity-09 d-md-none" />
         {/* End Mobile Overlay */}
         <div className="container position-relative">
           <div className="row wow fadeInUp">
-            <div className="col-md-2 offset-md-5 col-lg-6 offset-lg-6 col-xl-7 offset-xl-7">
+            <div className="col-md-2 offset-md-5 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

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