Merge branch 'main' of https://giteadev3.link/rankrunners-dev/next-cochise into main

public/assets/css/style-responsive.css

@@ -586,6 +586,9 @@
   .blog-item {
     margin-bottom: 50px;
   }
+  .list-bullet li {
+    list-style-type: circle;
+  }
   .blog-item-title {
     font-size: 28px;
   }

public/assets/css/style.css

@@ -238,10 +238,10 @@ Primary use: Multipurpose Template
   --gradient-primary-alpha-2: linear-gradient(90deg, transparent 13%, var(--color-primary-1) 60%);
   --border-radius-default: 4px;
   --border-radius-large: 30px;
-  --box-shadow:
+  --box-shadow: 0px 5px 10px 0px rgba(0, 0, 0, 0.05), 0px 1px 1px 0px rgba(0, 0, 0, 0.03),
-    0px 5px 10px 0px rgba(0, 0, 0, 0.05), 0px 1px 1px 0px rgba(0, 0, 0, 0.03), 0px 3px 5px 0px rgba(0, 0, 0, 0.03);
+    0px 3px 5px 0px rgba(0, 0, 0, 0.03);
-  --box-shadow-strong:
+  --box-shadow-strong: 0px 5px 10px 0px rgba(0, 0, 0, 0.08), 0px 1px 1px 0px rgba(0, 0, 0, 0.06),
-    0px 5px 10px 0px rgba(0, 0, 0, 0.08), 0px 1px 1px 0px rgba(0, 0, 0, 0.06), 0px 3px 5px 0px rgba(0, 0, 0, 0.06);
+    0px 3px 5px 0px rgba(0, 0, 0, 0.06);
   --box-shadow-block: 0px 3px 50px 0px rgba(0, 0, 0, 0.05);
   --box-shadow-block-strong: 0px 3px 50px 0px rgba(0, 0, 0, 0.15);
   --transition-default: all 0.27s cubic-bezier(0, 0, 0.58, 1);
@@ -10290,6 +10290,9 @@ a.link-to-top.color:before {
   position: relative;
   margin-bottom: 80px;
 }
+.list-bullet li {
+  list-style-type: disc;
+}
 .blog-item .lead,
 .blog-item blockquote p {
   font-size: 130%;

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

@@ -0,0 +1,96 @@
+import { BeforeFooterBlock } from "@/components/Blocks/BeforeFooter";
+import { fetchTeamDetail } from "@/services/payload/team";
+import { RichText } from "@payloadcms/richtext-lexical/react";
+import Image from "next/image";
+import { Suspense } from "react";
+
+export default async function BiographySinglePage({ params }: { params: Promise<{ slug: string }> }) {
+  const slug = (await params).slug;
+  const data = await fetchTeamDetail(slug);
+  if (!data?.data) return <></>;
+  return (
+    <>
+      <Suspense fallback={<Loading />}>
+        <>
+          <section className="page-section bg-dark-1 bg-gradient-gray-dark-1 light-content bg-scroll overflow-hidden">
+            {/* <!-- Background Shape --> */}
+            <div className="bg-shape-1 opacity-003">
+              <Image src="/assets/images/demo-fancy/bg-shape-1.svg" width={1300} height={844} alt="" />
+            </div>
+            {/* <!-- End Background Shape --> */}
+
+            <div className="container position-relative pt-sm-40 text-center">
+              <div className="row">
+                <div className="col-md-10 offset-md-1 col-lg-8 offset-lg-2">
+                  <h1 className="hs-title-10 mb-10 wow fadeInUp">{data.data.name}</h1>
+                  {/* Author, Categories, Comments */}
+                  <div className="blog-item-data mb-0 wow fadeIn" data-wow-delay="0.2s">
+                    <div className="flex justify-center items-center">
+                      <i className="mi-clock mr-2" />
+                      <a href="#">{data.createdAt}</a>
+                    </div>
+                  </div>
+                  {/* End Author, Categories, Comments */}
+                </div>
+              </div>
+            </div>
+          </section>
+
+          {/* Section */}
+          <section className="page-section">
+            <div className="container relative">
+              <div className="row">
+                {/* Content */}
+                <div className="col-md-10 offset-md-1 col-lg-8 offset-lg-2">
+                  {/* Post */}
+                  <div className="blog-item mb-80 mb-xs-40">
+                    <div className="blog-item-body">
+                      <div className="mb-40 mb-xs-30">
+                        <Image src={data.imgUrl} alt={data.data.name} width={300} height={500} className="round" />
+                      </div>
+                      <div>
+                        <RichText data={data.data.biography as any} />
+                      </div>
+                    </div>
+                  </div>
+                  {/* End Post */}
+                </div>
+                {/* End Content */}
+              </div>
+            </div>
+          </section>
+          {/* End Section */}
+        </>
+        <BeforeFooterBlock />
+      </Suspense>
+    </>
+  );
+}
+
+function Loading() {
+  return (
+    <section className="page-section animate-pulse">
+      <div className="container relative">
+        <div className="row">
+          {/* Content */}
+          <div className="col-md-10 offset-md-1 col-lg-8 offset-lg-2">
+            {/* Post */}
+            <div className="blog-item mb-80 mb-xs-40">
+              <div className="blog-item-body">
+                <div className="mb-40 mb-xs-30">
+                  <div className="w-full h-72 bg-gray-300 rounded-lg"></div>
+                  <div className="h-5 bg-gray-300 rounded w-full mt-3"></div>
+                  <div className="h-5 bg-gray-300 rounded w-3/4 mt-3"></div>
+                  <div className="h-5 bg-gray-300 rounded w-2/3 mt-3"></div>
+                </div>
+                <div></div>
+              </div>
+            </div>
+            {/* End Post */}
+          </div>
+          {/* End Content */}
+        </div>
+      </div>
+    </section>
+  );
+}

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

@@ -1,5 +1,5 @@
 "use client";
-import Hero from "@/components/Hero";
+import Hero6 from "@/components/Hero";
 import dynamic from "next/dynamic";
 
 const ParallaxContainer = dynamic(() => import("@/components/ParallaxContainer"), {
@@ -9,15 +9,21 @@ const ParallaxContainer = dynamic(() => import("@/components/ParallaxContainer")
 export default function Home1BGVideoMultiPage() {
   return (
     <>
+      <div className="theme-main">
+        <div className="page" id="top">
+          <main id="main">
             <ParallaxContainer
-        className="home-section bg-gray-light-1 bg-light-alpha-90 parallax-5 parallax-mousemove-scene scrollSpysection"
+              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-1.jpg)",
+                backgroundImage: "url(/assets/images/full-width-images/section-bg-13.jpeg)",
               }}
               id="home"
             >
-        <Hero />
+              <Hero6 />
             </ParallaxContainer>
+          </main>
+        </div>
+      </div>
     </>
   );
 }

src/app/(main)/layout.tsx

@@ -1,20 +1,20 @@
 "use client";
-import "@/app/globals.css";
+import { usePathname } from "next/navigation";
-import Footer from "@/components/Footer";
+import { useEffect } from "react";
-import Header from "@/components/Header";
-import { navMenuData } from "@/data/menu";
-import { headerChangeOnScroll } from "@/utils/changeHeaderOnScroll";
 import { init_wow } from "@/utils/initWow";
 import { parallaxMouseMovement, parallaxScroll } from "@/utils/parallax";
-import "@public/assets/css/styles.css";
+import { headerChangeOnScroll } from "@/utils/changeHeaderOnScroll";
-import "jarallax/dist/jarallax.min.css";
+import Header from "@/components/Header";
-import { usePathname } from "next/navigation";
+import Footer from "@/components/Footer";
-import "photoswipe/dist/photoswipe.css";
+import { navMenuData } from "@/data/menu";
-import { useEffect } from "react";
+import "@/app/globals.css";
-import "react-modal-video/css/modal-video.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 "@public/assets/css/styles.css";
 
 export default function MainLayout({
   children,
@@ -52,29 +52,6 @@ export default function MainLayout({
 
   return (
     <html lang="en" className="no-mobile no-touch">
-      <head>
-        <link href="https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;700&display=swap" rel="stylesheet" />
-        <link
-          href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,400;0,500;1,400;1,500&display=swap"
-          rel="stylesheet"
-        />
-        <link
-          href="https://fonts.googleapis.com/css2?family=Epilogue:wght@400;500&family=Poppins&display=swap"
-          rel="stylesheet"
-        />
-        <link
-          href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap"
-          rel="stylesheet"
-        />
-        <link
-          href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:ital,wght@0,400;0,500;0,600;1,400&display=swap"
-          rel="stylesheet"
-        />
-        <link
-          href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:ital,wght@0,300;0,400;0,500;0,600;1,400&display=swap"
-          rel="stylesheet"
-        />
-      </head>
       <body className="appear-animate body">
         <div className="theme-slick">
           <div className="page" id="top">

src/components/About.tsx

@@ -0,0 +1,50 @@
+"use client";
+import Image from "next/image";
+
+export default function About() {
+  return (
+    <div className="row wow fadeInUp" data-wow-delay="0.5s">
+      <div className="col-lg-6 mb-md-60">
+        <div className="position-relative">
+          {/* Image */}
+          <div className="position-relative overflow-hidden">
+            <Image
+              width={960}
+              height={539}
+              src="/assets/images/about-image.webp"
+              className="image-fullwidth relative"
+              alt="Image Description"
+            />
+          </div>
+          {/* End Image */}
+          {/* Decorative Waves */}
+          <div
+            className="decoration-1 d-none d-sm-block"
+            data-rellax-y=""
+            data-rellax-speed={1}
+            data-rellax-percentage="0.1"
+          >
+            <Image width="159" height="74" src="/assets/images/decoration-1.svg" className="svg-shape" alt="" />
+          </div>
+          {/* End Decorative Waves */}
+        </div>
+      </div>
+      <div className="col-lg-6 col-xl-5 offset-xl-1">
+        <h4 className="h5">What is Radixact® Radiation Therapy?</h4>
+        <p className="text-gray">
+          Radixact® is an advanced form of radiation therapy that targets a wide range of cancers. Radixact® is a form
+          of TomoTherapy®, a system of CT imaging that provides 3D images of the tumor, then targets it more precisely
+          to minimize the effects on healthy tissue. It also works from all directions to treat tumors more effectively
+          from multiple angles.
+        </p>
+        <h4 className="h5">What are the Side Effects of Radixact®?</h4>
+        <p className="text-gray">
+          Radixact® reduces many of the common after-effects of radiation therapy by protecting healthy tissue. Common
+          side effects of radiation therapy include fatigue and local skin irritation in the treatment area. Radixact®
+          decreases the occurrence of these problems by leaving healthy tissue as untouched as possible. Radixact®
+          patients usually go about their daily lives during treatment with minimal disruption.
+        </p>
+      </div>
+    </div>
+  );
+}

src/components/Blocks/GoogleReviews/index.tsx

@@ -64,13 +64,13 @@ export function GoogleReviewsBlock() {
       </div>
 
       <div className="container px-6">
-        <h2 className="text-3xl font-bold text-center text-white">Reviews</h2>
+        <h2 className="text-3xl font-bold text-cente">Reviews</h2>
         <div className="flex justify-center space-x-2">
-          <h2 className="text-xl text-center font-bold text-white">4.8</h2>
+          <h2 className="text-xl text-center font-bol">4.8</h2>
           <div className="mt-1">
             <StarRating size={20} value={4.8} />
           </div>
-          <div className="text-xs font-semibold mt-1 text-white">Over 200 Reviews</div>
+          <div className="text-xs font-semibold mt-">Over 200 Reviews</div>
         </div>
         <div className="mt-20 relative">
           <Swiper

src/components/HeaderNav.tsx

@@ -4,7 +4,6 @@ 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 { usePathname } from "next/navigation";
 import { useEffect, useRef, useState } from "react";
 import Link from "next/link";
 
@@ -33,7 +32,6 @@ export default function HeaderNav({ links, animateY = false }: any) {
       window.removeEventListener("resize", init_classic_menu_resize);
     };
   }, []);
-  const pathname = usePathname();
 
   return (
     <>
@@ -41,7 +39,7 @@ export default function HeaderNav({ links, animateY = false }: any) {
         links.map((link: any, index: any) => (
           <li key={index}>
             {!Array.isArray(link?.child) && (
-              <Link className={pathname.split("/")[1] == link.href.split("/")[1] ? "active" : ""} href={link.href}>
+              <Link href={link.href}>
                 {animateY ? (
                   <span className="btn-animate-y">
                     <span className="btn-animate-y-1">{link.text}</span>

src/components/Hero.tsx

@@ -1,64 +1,63 @@
 "use client";
 
-import { useRef } from "react";
+import ModalVideo from "react-modal-video";
-import Link from "next/link";
+import { useState } from "react";
 
 export default function Hero6() {
-  const videoRef = useRef<any | null>(null);
+  const [isOpen, setOpen] = useState(false);
-
   return (
-    <section className="home-section bg-dark-1 bg-dark-alpha-30 light-content scrollSpysection" id="home">
+    <>
-      <div className="container min-height-100vh d-flex align-items-center pt-100 pb-100 pt-sm-120 pb-sm-120">
+      <div className="container min-height-80vh d-flex align-items-center pt-100 pb-100 pt-sm-120 pb-sm-120">
-        {/* Background Video */}
-        {/* Please replace the video file in folder "video" with your own file */}
-        <div className="bg-video-wrapper">
-          <video ref={videoRef} className="bg-video" preload="auto" autoPlay muted loop>
-            <source src="/assets/videos/cochise.webm" type="video/webm" />
-          </video>
-          <div className="bg-video-overlay bg-dark-alpha-50" />
-        </div>
         {/* Home Section Content */}
         <div className="home-content">
           <div className="row">
             {/* Home Section Text */}
-            <div className="col-md-10 offset-md-1 mb-20 mb-sm-0">
+            <div className="col-md-10 offset-md-1 col-lg-8 offset-lg-2">
-              <h2 className="hs-title-11 mb-30 mb-xs-10 wow fadeInUp">Healing Begins Here</h2>
+              <h2 className="section-caption mb-30 mb-xs-10" data-wow-duration="1.2s">
-              <h1 className="hs-title-12 mb-50 mb-sm-30">
+                Healing Begins Here
-                <span className="wow charsAnimIn" data-splitting="chars">
+              </h2>
+              <h1 className="hs-title-1 mb-30">
+                <span className="" data-splitting="chars">
                   Cochise Oncology
                 </span>
               </h1>
-              <p className="section-descr mb-50 wow fadeInUp" data-wow-delay="0.6s" data-wow-duration="1.2s">
+              <div className="row">
-                Southern Arizona’s Only Complete Cancer Treatment Center in Sierra Vista.
+                <div className="col-lg-8 offset-lg-2">
+                  <p className="section-descr mb-50" data-wow-delay="0.6s" data-wow-duration="1.2s">
+                    Southern Arizona’s Only Complete Cancer Treatment Center in Sierra Vista
                   </p>
-              <div className="local-scroll wch-unset wow fadeInUp" data-wow-delay="0.4s">
+                </div>
-                <a
+              </div>
-                  href="#about"
+              <div
-                  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"
+                className="local-scroll mt-n10 wch-unset"
-                  data-btn-animate="y"
+                data-wow-delay="0.7s"
+                data-wow-duration="1.2s"
+                data-wow-offset={0}
               >
-                  Learn More
+                <button className="bg-[#64B3B4] text-white px-4 py-2 m-3 rounded-3xl hover:opacity-[0.7]">
-                </a>
+                  Request Consultation
-                <Link href="/contact">
-                  <button className="btn btn-mod btn-w btn-border-w btn-round btn-large btn-hover-anim ms-1 me-1 mt-2 align-middle w-full md:w-1/4">
-                    <span>Request Consultation</span>
                 </button>
-                </Link>
+                {/* <a
+                  onClick={() => setOpen(true)}
+                  className="link-hover-anim align-middle lightbox mfp-iframe mt-10"
+                  data-link-animate="y"
+                >
+                  <i className="icon-play size-13 me-1" /> How it works?
+                </a> */}
               </div>
             </div>
             {/* End Home Section Text */}
           </div>
         </div>
         {/* End Home Section Content */}
-        {/* Scroll Down */}
+      </div>{" "}
-        <div className="local-scroll scroll-down-wrap wow fadeInUp" data-wow-offset={0}>
+      <ModalVideo
-          <a href="#about" className="scroll-down">
+        channel="youtube"
-            <i className="mi-chevron-down" />
+        youtube={{ mute: 0, autoplay: 0 }}
-            <span className="visually-hidden">Scroll to the next section</span>
+        isOpen={isOpen}
-          </a>
+        videoId="jTea_8Fk5Ns"
-        </div>
+        onClose={() => setOpen(false)}
-        {/* End Scroll Down */}
+      />{" "}
-      </div>
+    </>
-    </section>
   );
 }

src/components/Homepage.tsx

@@ -2,8 +2,8 @@ import { features4 } from "@/data/features";
 import Image from "next/image";
 import Link from "next/link";
 import Cta3 from "./cta3";
-import Service from "./Service";
+import Testimonials from "./Testimonials";
-import { GoogleReviewsBlock } from "./Blocks/GoogleReviews";
+import About from "./About";
 
 export default function homepage({ onePage = false, dark = false }) {
   return (
@@ -95,34 +95,9 @@ export default function homepage({ onePage = false, dark = false }) {
           </div>
         </div>
       </section>
-      <section className={`small-section bg-dark ps-4 ps-lg-0 pe-4 pe-lg-0 position-relative overflow-hidden`}>
+      <section className="my-5 w-full">
-        <div className="decoration-12 bg-white" />
+        <Testimonials />
-        <div className="decoration-13 bg-white" />
-        <div className="col-md-10 offset-md-1 col-lg-8 offset-lg-2 col-xl-6 offset-xl-3 text-center text-white mb-50">
-          <h2 className="section-title-small">Testimonials</h2>
-        </div>
-        <GoogleReviewsBlock />
       </section>
-      <section className={`page-section  scrollSpysection  ${dark ? "bg-dark-1 light-content" : ""} `} id="services">
-        <div className="container position-relative">
-          <div className="row">
-            {/* Left Column */}
-            <div className="col-lg-5 mb-md-60 mb-sm-40">
-              <h2 className="section-caption-slick mb-30 mb-sm-20">Our Services</h2>
-              <h3 className="section-title mb-30">A Cancer Treatment Center of Excellence.</h3>
-              <p className="section-descr mb-50 mb-sm-40">
-                Get compassionate care and excellent medical services from COCHISE ONCOLOGY in Sierra Vista, Arizona.
-              </p>
-            </div>
-            {/* End Left Column */}
-            {/* Right Column */}
-            <Service />
-            {/* End Right Column */}
-          </div>
-        </div>
-      </section>
-
-      <hr className={`mt-0 mb-0 ${dark ? "white" : ""} `} />
       <section
         className="page-section bg-scroll light-content"
         style={{
@@ -136,13 +111,24 @@ export default function homepage({ onePage = false, dark = false }) {
         {/* End Mobile Overlay */}
         <div className="container position-relative">
           <div className="row wow fadeInUp">
-            <div className="col-md-7 offset-md-5 col-lg-6 offset-lg-6 col-xl-5 offset-xl-7">
+            <div className="col-md-2 offset-md-5 col-lg-6 offset-lg-6 col-xl-7 offset-xl-7">
               <h2 className="section-title mb-40 mb-sm-30">A Cancer Treatment Center of Excellence</h2>
-              <p className="mb-50 mb-sm-40">
+              <p className="text-sm">
-                We believe our patients deserve and demand the very best in timely treatments, personalized care,
+                Get compassionate care and excellent medical services from COCHISE ONCOLOGY in Sierra Vista, Arizona. We
-                professional competence, and advanced technology. We will achieve this vision by employing caring and
+                are the largest full-service cancer treatment center between Albuquerque, New Mexico and Tucson,
-                competent staff with excellent training, developing multidisciplinary collaborations, and using the
+                Arizona. Our services cover radiation treatments as well as chemotherapy, and we also have an infusion
-                latest technology available in the most comfortable environment.
+                center. We offer support groups as well as free hospitality housing for patients undergoing treatment.
+                Read on to learn more about our establishment, or reach out to us via phone or email to make an inquiry.
+              </p>
+              <h4>The Mission of Cochise Oncology</h4>
+              <p className="text-sm">
+                To provide excellence in cancer and patient care in a comprehensive center for the local community.
+                Optimal cancer treatment places the patient first—from the patient’s first greeting with the front
+                office staff to the trust they develop with the physicians and the whole treatment team. We believe our
+                patients deserve and demand the very best in timely treatments, personalized care, professional
+                competence, and advanced technology. We will achieve this vision by employing caring and competent staff
+                with excellent training, developing multidisciplinary collaborations, and using the latest technology
+                available in the most comfortable environment.
               </p>
 
               {/* Features List */}
@@ -152,6 +138,39 @@ export default function homepage({ onePage = false, dark = false }) {
           </div>
         </div>
       </section>
+
+      <section className={`page-section scrollSpysection ${dark ? "bg-dark-1 light-content" : ""}`} id="about">
+        <div className="container position-relative">
+          <div className="row mb-60 mb-xs-30">
+            <div className="col-md-6">
+              <h2 className="section-caption mb-xs-10">Our Service</h2>
+              <h3 className="section-title mb-0">Radixact® Radiation Therapy</h3>
+            </div>
+            <div className="col-md-5 offset-md-1 relative text-start text-md-end pt-40 pt-sm-20 local-scroll">
+              {/* Decorative Dots */}
+              <div
+                className="decoration-2 d-none d-md-block"
+                data-rellax-y=""
+                data-rellax-speed="0.7"
+                data-rellax-percentage="-0.2"
+              >
+                <Image width="103" height="223" src="/assets/images/decoration-2.svg" alt="" />
+              </div>
+              {/* End Decorative Dots */}
+
+              <Link href={`/radixact`} className="link-hover-anim underline align-middle" data-link-animate="y">
+                <span className="link-strong link-strong-unhovered">
+                  Explore Radixact® <i className="mi-arrow-right size-18" aria-hidden="true"></i>
+                </span>
+                <span className="link-strong link-strong-hovered" aria-hidden="true">
+                  Explore Radixact® <i className="mi-arrow-right size-18" aria-hidden="true"></i>
+                </span>
+              </Link>
+            </div>
+          </div>
+          <About />
+        </div>
+      </section>
     </>
   );
 }

src/components/SplashScreen.tsx

@@ -1,52 +0,0 @@
-import React, { useEffect, useState } from "react";
-import Image from "next/image";
-import anime from "animejs";
-
-interface SplashScreenProps {
-  finishLoading: () => void;
-}
-
-const SplashScreen: React.FC<SplashScreenProps> = ({ finishLoading }) => {
-  const [isMounted, setIsMounted] = useState(false);
-
-  const animate = () => {
-    const loader = anime.timeline({
-      complete: () => finishLoading(),
-    });
-
-    loader
-      .add({
-        targets: "#logo",
-        delay: 0,
-        scale: 1,
-        duration: 500,
-        easing: "easeInOutExpo",
-      })
-      .add({
-        targets: "#logo",
-        delay: 0,
-        scale: 1.25,
-        duration: 500,
-        easing: "easeInOutExpo",
-      });
-  };
-
-  useEffect(() => {
-    const timeout = setTimeout(() => {
-      setIsMounted(true);
-    }, 10);
-
-    animate();
-    return () => clearTimeout(timeout);
-  }, []);
-
-  return isMounted ? (
-    <div className="flex h-screen items-center justify-center">
-      <Image id="logo" src={"/assets/images/demo-slick/logo-dark.webp"} alt="" width={500} height={500} />
-    </div>
-  ) : (
-    <></>
-  );
-};
-
-export default SplashScreen;

src/components/Team.tsx

@@ -1,25 +1,28 @@
 "use client";
+import Link from "next/link";
 import { CardTeam } from "./Teams/CardTeam";
 
 export default function Team({ data }: any) {
   return (
     <div className="container">
-      <div className="row mb-70 mb-sm-50">
+      <div className="row">
         <div className="col-md-12 offset-md-2 col-lg-6 offset-lg-3 text-center">
           <h2 className="section-title mb-30 mb-sm-20">
             <span className="text-gray">Our</span> Team
             <span className="text-gray">.</span>
           </h2>
-          <div className="text-gray">
-            The same color can evoke different emotions, or have various meanings to different individuals and cultures.
         </div>
       </div>
-      </div>
+      <div className="grid grid-cols-4 gap-5">
-      <div className="row mt-n40">
         {/* Team item */}
         {data.map((member: any, index: any) => (
-          <div key={index}>
+          <div key={index} className="text-center">
             <CardTeam data={member} />
+            <Link href={`/biography/${member.name}`} passHref>
+              <button className="bg-[#64B3B4] text-white px-2 py-1 m-3 rounded-3xl hover:opacity-[0.7]">
+                Biography
+              </button>
+            </Link>
           </div>
         ))}
         {/* End Team item */}

src/components/Teams/CardTeam.tsx

@@ -10,7 +10,7 @@ export interface CardTeamProps {
 
 export function CardTeam({ data }: CardTeamProps) {
   return (
-    <div className="col-md-4 mt-40">
+    <div className="col-md-12 mt-40">
       <div className="team-item">
         <div className="team-item-image">
           <Image

src/components/Testimonials.tsx

@@ -1,11 +1,6 @@
 "use client";
-import { brands } from "@/data/brands";
-import { numberItems4 } from "@/data/facts";
-import { testimonials5 } from "@/data/testimonials";
 import { useEffect, useRef } from "react";
-import { Autoplay } from "swiper/modules";
+import { GoogleReviewsBlock } from "./Blocks/GoogleReviews";
-import { Swiper, SwiperSlide } from "swiper/react";
-import Image from "next/image";
 
 export default function Testimonials() {
   const isotopContainer = useRef<any | null>(null);
@@ -26,120 +21,12 @@ export default function Testimonials() {
     initIsotop();
   }, []);
   return (
-    <div className="container position-relative">
+    <div className="text-center">
       <div className="row">
-        {/* Section Text */}
+        <div className="flex align-items-center justify-center wow fadeInUp">
-        <div className="col-lg-5 col-xl-5 d-flex align-items-center mb-md-60 mb-sm-40">
+          <GoogleReviewsBlock />
-          <div className="w-100">
-            <h2 className="section-caption-slick mb-30 mb-sm-20">
-              Testimonials
-            </h2>
-            <h3 className="section-title mb-30">
-              We&apos;re trusted by leading companies.
-            </h3>
-            <p className="section-descr mb-50 mb-sm-30">
-              A static website stores a unique file for every page of a static
-              website. Each time that page is requested, the same content is
-              returned.
-            </p>
-            {/* Numbers */}
-            <div className="row mt-sm-n10">
-              {numberItems4.map((item, index) => (
-                <div key={index} className="col-md-6 mt-sm-10">
-                  <div className="number-3-title">{item.title}</div>
-                  <div className="number-3-descr">{item.description}</div>
-                </div>
-              ))}
-            </div>
-            {/* End Numbers */}
         </div>
       </div>
-        {/* End Section Text */}
-        {/* Testimonials Grid */}
-        <div className="col-lg-7 col-xl-6 offset-xl-1 d-flex align-items-center">
-          <div className="w-100 position-relative">
-            <div
-              ref={isotopContainer}
-              className="row masonry mb-n30 wow fadeInUp"
-            >
-              {/* Testimonials Item */}
-              {testimonials5.map((testimonial: any, index: number) => (
-                <div
-                  key={index}
-                  className={`col-md-6 mb-30 ${!index ? "mt-50 mt-sm-0" : ""} `}
-                >
-                  <div className="testimonials-4-item">
-                    <div className="testimonials-4-icon">
-                      <i className="icon-quotation-mark" />
-                    </div>
-                    <blockquote className="testimonials-4-text">
-                      <p className="mb-0">{testimonial.text}</p>
-                      <footer className="testimonials-4-author mt-30 clearfix">
-                        <div className="testimonials-4-author-img float-start">
-                          <Image
-                            width={44}
-                            height={44}
-                            src={testimonial.imgSrc}
-                            alt={testimonial.altText}
-                          />
-                        </div>
-                        <div className="overflow-hidden">
-                          {testimonial.author}
-                          <div className="small">{testimonial.position}</div>
-                        </div>
-                      </footer>
-                    </blockquote>
-                  </div>
-                </div>
-              ))}
-
-              {/* End Testimonials Item */}
-            </div>
-          </div>
-        </div>
-        {/* Testimonials Grid */}
-      </div>
-      {/* Logotypes */}
-      <div className="page-section pb-0 text-center">
-        <h3 className="section-title-tiny">Trusted by Leading Companies</h3>
-        <Swiper
-          spaceBetween={0}
-          slidesPerView={6}
-          breakpoints={{
-            1199: {
-              slidesPerView: 6, // When window width is <= 1199px
-            },
-
-            768: {
-              slidesPerView: 4, // When window width is <= 768px
-            },
-            0: {
-              slidesPerView: 2, // When window width is <= 480px
-            },
-          }}
-          watchSlidesProgress
-          modules={[Autoplay]}
-          autoplay
-          resizeObserver
-          className="small-item-carousel black owl-carousel mb-0 owl-theme overflow-hidden position-static"
-          style={{
-            opacity: 1,
-            display: "block",
-          }}
-        >
-          {/* Team item */}
-          {brands.map((elm: any, i: number) => (
-            <SwiperSlide className="owl-item" key={i}>
-              <div className="logo-item">
-                <Image src={elm} width={215} height={75} alt="Company Name" />
-              </div>
-            </SwiperSlide>
-          ))}
-
-          {/* End Team item */}
-        </Swiper>
-      </div>
-      {/* End Logotypes */}
     </div>
   );
 }

src/data/menu.ts

@@ -1,5 +1,8 @@
 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",
@@ -69,14 +72,11 @@ export const navMenuData = [
     href: "#",
     text: "Resources",
     child: [
-      { href: "/testimonials", text: "Testimonials" },
       { href: "/insurances", text: "Insurances" },
       { href: "/support", text: "Support Groups" },
       { href: "/hospitality-house", text: "Hospitality House" },
       { href: "/in-house-lab", text: "In-House Lab" },
       { href: "/american-cancer-society", text: "American Cancer Society" },
-      { href: "/#", text: "Patient Portal" },
-      { href: "/blog", text: "Blog" },
     ],
   },
 ];

src/data/testimonials.ts

@@ -17,9 +17,9 @@ export const testimonials = [
     role: "Business Owner",
     image: "/assets/images/ts1-user.jpg",
   },
-  ];
+];
 
-  export const testimonials2 = [
+export const testimonials2 = [
   {
     id: 1,
     blockquote:
@@ -50,9 +50,9 @@ export const testimonials = [
       imgSrc: "/assets/images/ts1-user.jpg",
     },
   },
-  ];
+];
 
-  export const testimonials3 = [
+export const testimonials3 = [
   {
     text: "Beautiful template, nice code and easy to customize. Optimization, structure and pages are very good for SEO basics.",
     author: "Thomas Johnson",
@@ -89,9 +89,9 @@ export const testimonials = [
     role: "Business owner",
     imgSrc: "/assets/images/demo-gradient/user-3.jpg",
   },
-  ];
+];
 
-  export const testimonials4 = [
+export const testimonials4 = [
   {
     id: 1,
     delay: "0s",
@@ -113,9 +113,9 @@ export const testimonials = [
     text: "“I have super enjoyed working with Resonance.”",
     caption: "Rated 4.5 on Trustpilot",
   },
-  ];
+];
 
-  export const testimonialItems = [
+export const testimonialItems = [
   {
     imageSrc: "/assets/images/demo-corporate/testimonial-1.jpg",
     quote:
@@ -130,9 +130,9 @@ export const testimonials = [
     author: "Jordan Harvey",
     position: "SEO/SMO Expert",
   },
-  ];
+];
 
-  export const testimonials5 = [
+export const testimonials5 = [
   {
     text: "Beautifull template, nice code and easy to customize. Optimization and structure are verry good for SEO basics.",
     author: "Thomas Johnson",
@@ -165,5 +165,4 @@ export const testimonials = [
     altText: "Image description is here",
     extraClass: "",
   },
-  ];
+];
-  

src/services/payload/team.ts

@@ -0,0 +1,27 @@
+import payloadConfig from "@/payload.config";
+import { formatDate } from "@/utils/datetime";
+import { getPayload } from "payload";
+
+export async function fetchTeamDetail(name: string | undefined) {
+  const payload = await getPayload({ config: payloadConfig });
+  const blogDataQuery = await payload.find({
+    collection: "teams",
+    where: {
+      name: { like: `%${name}%` },
+    },
+    limit: 1,
+    pagination: false,
+  });
+
+  if (!blogDataQuery?.docs?.[0]) return null;
+
+  const data = blogDataQuery?.docs?.[0];
+  const createdAt = formatDate(data.createdAt);
+  const imgUrl = typeof data.img !== "number" ? (data?.img?.url ?? "") : "";
+
+  return {
+    data,
+    createdAt,
+    imgUrl,
+  };
+}