feat: biography

public/assets/css/demo-slick/demo-slick.css

@@ -64,11 +64,9 @@
   --gradient-gray-light-1: linear-gradient(0deg, #f7f9fc 0%, #fff 100%);
   --gradient-gray-light-2: linear-gradient(0deg, #fff 0%, #f7f9fc 100%);
   --border-radius-default: 10px;
-  --box-shadow:
+  --box-shadow: 0px 5px 10px 0px rgba(30, 36, 50, 0.05), 0px 1px 1px 0px rgba(30, 36, 50, 0.03),
-    0px 5px 10px 0px rgba(30, 36, 50, 0.05), 0px 1px 1px 0px rgba(30, 36, 50, 0.03),
     0px 3px 5px 0px rgba(30, 36, 50, 0.03);
-  --box-shadow-strong:
+  --box-shadow-strong: 0px 5px 10px 0px rgba(30, 36, 50, 0.08), 0px 1px 1px 0px rgba(30, 36, 50, 0.06),
-    0px 5px 10px 0px rgba(30, 36, 50, 0.08), 0px 1px 1px 0px rgba(30, 36, 50, 0.06),
     0px 3px 5px 0px rgba(30, 36, 50, 0.06);
   --box-shadow-block: 0px 10px 30px 0px rgba(30, 36, 50, 0.07), 0px 0px 1px 0px rgba(30, 36, 50, 0.1);
   --box-shadow-block-strong: 0px 15px 50px 0px rgba(30, 36, 50, 0.14), 0px 0px 1px 0px rgba(30, 36, 50, 0.15);

public/assets/css/style.css

@@ -4373,8 +4373,8 @@ a.logo:hover {
  */
 
 .main-nav.transparent {
-  /* background: transparent !important; */
+  background: transparent !important;
-  background: linear-gradient(to right, #64b3b4, #a8dcca) !important;
+  /* background: linear-gradient(to right, #64b3b4, #a8dcca) !important; */
   box-shadow: none;
 }
 .main-nav.js-transparent {
@@ -6461,8 +6461,7 @@ img.services-image {
   overflow: hidden;
 }
 .team-item-image img {
-  width: 300px;
+  height: 380px;
-  height: 400px;
   transition: all 0.4s ease;
   object-fit: cover;
 }

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

@@ -2,12 +2,46 @@ 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 { Metadata } from "next/types";
 import { Suspense } from "react";
 
+export async function generateMetadata({ params }: { params: Promise<{ slug: string }> }): Promise<Metadata> {
+  const name = "Cochise Oncology";
+  let title = "Page";
+  let description = "Page";
+  let imgUrl = "";
+
+  const slug = (await params).slug;
+  const blog = await fetchTeamDetail(decodeURIComponent(slug));
+
+  // check for blog data
+  if (!!blog) {
+    title = `${name} Staff - ${blog.data.name}`;
+    description = `${name} Staff - ${blog.data.name}`;
+    imgUrl = blog.imgUrl;
+  }
+
+  return {
+    title: title,
+    description: description,
+    openGraph: {
+      title: title,
+      description: description,
+      images: !!imgUrl ? { url: imgUrl } : undefined,
+    },
+  };
+}
+
 export default async function BiographySinglePage({ params }: { params: Promise<{ slug: string }> }) {
   const slug = (await params).slug;
-  const data = await fetchTeamDetail(slug);
+  const data = await fetchTeamDetail(decodeURIComponent(slug));
-  if (!data?.data) return <></>;
+  if (!data?.data)
+    return (
+      <>
+        <BeforeFooterBlock />
+      </>
+    );
+
   return (
     <>
       <Suspense fallback={<Loading />}>
@@ -45,8 +79,8 @@ export default async function BiographySinglePage({ params }: { params: Promise<
                   {/* Post */}
                   <div className="blog-item mb-80 mb-xs-40">
                     <div className="blog-item-body">
-                      <div className="mb-40 mb-xs-30">
+                      <div className="mb-40 mb-xs-30 flex justify-center">
-                        <Image src={data.imgUrl} alt={data.data.name} width={300} height={500} className="round" />
+                        <Image src={data.imgUrl} alt={data.data.name} width={400} height={800} className="round" />
                       </div>
                       <div>
                         <RichText data={data.data.biography as any} />

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

@@ -11,15 +11,6 @@ export default function Home1BGVideoMultiPage() {
       <div className="theme-main">
         <div className="page" id="top">
           <main id="main">
-            {/* <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)",
-              }}
-              id="home"
-            >
-              <Hero6 />
-            </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>

src/components/About.tsx

@@ -32,17 +32,17 @@ export default function About() {
       <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
+          RadixactRadixact® is a cutting-edge radiation therapy designed to treat a wide variety of cancers with
-          of TomoTherapy®, a system of CT imaging that provides 3D images of the tumor, then targets it more precisely
+          remarkable precision. This advanced treatment uses TomoTherapy® technology, which combines CT imaging to
-          to minimize the effects on healthy tissue. It also works from all directions to treat tumors more effectively
+          create detailed, 3D images of your tumor. These images allow us to focus the radiation exactly where it’s
-          from multiple angles.
+          needed, minimizing the impact on surrounding healthy tissue. Radixact® works from all directions, ensuring
+          that tumors are treated 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
+          At Cochise Oncology, we are proud to be the only cancer treatment center in Southern Arizona offering
-          side effects of radiation therapy include fatigue and local skin irritation in the treatment area. Radixact®
+          Radixact®. With daily CT imaging to guide treatment and its ability to target hard-to-reach or recurring
-          decreases the occurrence of these problems by leaving healthy tissue as untouched as possible. Radixact®
+          tumors, Radixact® helps reduce radiation exposure to healthy tissue, resulting in fewer side effects and
-          patients usually go about their daily lives during treatment with minimal disruption.
+          better outcomes for our patients.
         </p>
       </div>
     </div>

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

@@ -1,23 +1,23 @@
-import type { CountryField } from '@payloadcms/plugin-form-builder/types'
+import type { CountryField } from "@payloadcms/plugin-form-builder/types";
-import type { Control, FieldErrorsImpl, FieldValues } from 'react-hook-form'
+import type { Control, FieldErrorsImpl, FieldValues } from "react-hook-form";
 
-import React from 'react'
+import React from "react";
-import { Controller } from 'react-hook-form'
+import { Controller } from "react-hook-form";
-import ReactSelect from 'react-select'
+import ReactSelect from "react-select";
 
-import { Error } from '../Error'
+import { Error } from "../Error";
-import { Width } from '../Width'
+import { Width } from "../Width";
-import classes from './index.module.scss'
+import classes from "./index.scss";
-import { countryOptions } from './options'
+import { countryOptions } from "./options";
 
 export const Country: React.FC<
   {
-    control: Control<FieldValues, any>
+    control: Control<FieldValues, any>;
     errors: Partial<
       FieldErrorsImpl<{
-        [x: string]: any
+        [x: string]: any;
       }>
-    >
+    >;
   } & CountryField
 > = ({ name, control, errors, label, required, width }) => {
   return (
@@ -36,7 +36,7 @@ export const Country: React.FC<
               classNamePrefix="rs"
               inputId={name}
               instanceId={name}
-              onChange={(val) => onChange(val ? val.value : '')}
+              onChange={(val) => onChange(val ? val.value : "")}
               options={countryOptions}
               value={countryOptions.find((c) => c.value === value)}
             />
@@ -46,5 +46,5 @@ export const Country: React.FC<
         {required && errors[name] && <Error />}
       </div>
     </Width>
-  )
+  );
-}
+};

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

@@ -1,26 +1,24 @@
-import React from 'react'
+import React from "react";
 
-import classes from './index.module.scss'
+import classes from "./index.scss";
 
 type Props = {
-  children: React.ReactNode
+  children: React.ReactNode;
-  className?: string
+  className?: string;
-  left?: boolean
+  left?: boolean;
-  ref?: React.Ref<HTMLDivElement>
+  ref?: React.Ref<HTMLDivElement>;
-  right?: boolean
+  right?: boolean;
-}
+};
 
 export const Gutter: React.FC<Props & { ref?: React.Ref<HTMLDivElement> }> = (props) => {
-  const { children, className, left = true, right = true, ref } = props
+  const { children, className, left = true, right = true, ref } = props;
 
   return (
     <div
-      className={[left && classes.gutterLeft, right && classes.gutterRight, className]
+      className={[left && classes.gutterLeft, right && classes.gutterRight, className].filter(Boolean).join(" ")}
-        .filter(Boolean)
-        .join(' ')}
       ref={ref}
     >
       {children}
     </div>
-  )
+  );
-}
+};

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

@@ -4,7 +4,7 @@ import React from "react";
 
 import RichText from "../RichText";
 import { Width } from "../Width";
-import classes from "./index.module.scss";
+import classes from "./index.scss";
 
 export const Message: React.FC<MessageField> = ({ message }) => {
   return (

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

@@ -5,7 +5,7 @@ import React from "react";
 
 import { Error } from "../Error";
 import { Width } from "../Width";
-import classes from "./index.module.scss";
+import classes from "./index.scss";
 
 export const Number: React.FC<
   {

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

@@ -1,23 +1,23 @@
-import type { StateField } from '@payloadcms/plugin-form-builder/types'
+import type { StateField } from "@payloadcms/plugin-form-builder/types";
-import type { Control, FieldErrorsImpl, FieldValues } from 'react-hook-form'
+import type { Control, FieldErrorsImpl, FieldValues } from "react-hook-form";
 
-import React from 'react'
+import React from "react";
-import { Controller } from 'react-hook-form'
+import { Controller } from "react-hook-form";
-import ReactSelect from 'react-select'
+import ReactSelect from "react-select";
 
-import { Error } from '../Error'
+import { Error } from "../Error";
-import { Width } from '../Width'
+import { Width } from "../Width";
-import classes from './index.module.scss'
+import classes from "./index.scss";
-import { stateOptions } from './options'
+import { stateOptions } from "./options";
 
 export const State: React.FC<
   {
-    control: Control<FieldValues, any>
+    control: Control<FieldValues, any>;
     errors: Partial<
       FieldErrorsImpl<{
-        [x: string]: any
+        [x: string]: any;
       }>
-    >
+    >;
   } & StateField
 > = ({ name, control, errors, label, required, width }) => {
   return (
@@ -36,7 +36,7 @@ export const State: React.FC<
               classNamePrefix="rs"
               id={name}
               instanceId={name}
-              onChange={(val) => onChange(val ? val.value : '')}
+              onChange={(val) => onChange(val ? val.value : "")}
               options={stateOptions}
               value={stateOptions.find((t) => t.value === value)}
             />
@@ -46,5 +46,5 @@ export const State: React.FC<
         {required && errors[name] && <Error />}
       </div>
     </Width>
-  )
+  );
-}
+};

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

@@ -1,29 +1,20 @@
-import React from 'react'
+import React from "react";
 
-import classes from './index.module.scss'
+import classes from "./index.scss";
 
-export type VerticalPaddingOptions = 'large' | 'medium' | 'none' | 'small'
+export type VerticalPaddingOptions = "large" | "medium" | "none" | "small";
 
 type Props = {
-  bottom?: VerticalPaddingOptions
+  bottom?: VerticalPaddingOptions;
-  children: React.ReactNode
+  children: React.ReactNode;
-  className?: string
+  className?: string;
-  top?: VerticalPaddingOptions
+  top?: VerticalPaddingOptions;
-}
+};
 
-export const VerticalPadding: React.FC<Props> = ({
+export const VerticalPadding: React.FC<Props> = ({ bottom = "medium", children, className, top = "medium" }) => {
-  bottom = 'medium',
-  children,
-  className,
-  top = 'medium',
-}) => {
   return (
-    <div
+    <div className={[className, classes[`top-${top}`], classes[`bottom-${bottom}`]].filter(Boolean).join(" ")}>
-      className={[className, classes[`top-${top}`], classes[`bottom-${bottom}`]]
-        .filter(Boolean)
-        .join(' ')}
-    >
       {children}
     </div>
-  )
+  );
-}
+};

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

@@ -1,14 +1,14 @@
-import * as React from 'react'
+import * as React from "react";
 
-import classes from './index.module.scss'
+import classes from "./index.scss";
 
 export const Width: React.FC<{
-  children: React.ReactNode
+  children: React.ReactNode;
-  width?: number
+  width?: number;
 }> = ({ children, width }) => {
   return (
     <div className={classes.width} style={{ width: width ? `${width}%` : undefined }}>
       {children}
     </div>
-  )
+  );
-}
+};

src/components/Contacts/Contact.tsx

@@ -1,78 +1,145 @@
-import { contactItems } from "@/data/contact";
+"use client";
-import React, { ReactNode } from "react";
+import React from "react";
 
-export interface ContactProps {
+export default function Contact() {
-  children?: ReactNode;
-}
-
-export default function Contact({ children }: ContactProps) {
   return (
     <div className="container position-relative">
       <div className="row">
-        {/* Left Column */}
+        <div className="col-lg-6">
-        <div className="col-lg-4 mb-md-50 mb-sm-30 position-relative z-index-1">
+          <div className="row mb-50">
-          <h2 className="section-caption-slick mb-30 mb-sm-20">Contact Us</h2>
+            <div className="col-lg-10">
-          <h3 className="section-title mb-50 mb-sm-30">We’re open to talk to anyone.</h3>
+              <h2 className="section-caption-slick mb-xs-10">Contact Us</h2>
-          {/* Contact Information */}
-          <div className="row">
-            <div className="col-md-11">
-              {/* Address */}
-              {contactItems.map((item: any, index: number) => (
-                <React.Fragment key={index}>
-                  <div className={`contact-item ${index !== 3 ? "mb-40 mb-sm-20" : ""}`}>
-                    <div className="ci-icon">
-                      <i className={item.iconClass} />
             </div>
-                    <h4 className="ci-title  visually-hidden">{item.title}</h4>
+          </div>
-                    <div className="ci-text">{item.text}</div>
+        </div>
-                    <div>
+      </div>
-                      <a
+      <div className="row wow fadeInUp" data-wow-delay="0.5s">
-                        href={item.link.url}
+        <div className="col-md-6 mb-sm-50">
-                        target={item.link.target}
+          {/* Contact Form */}
-                        rel={item.link.rel}
+          <div className="row mb-60 mb-sm-50">
-                        className="link-hover-anim"
+            {/* Contact Item */}
-                        data-link-animate="y"
+            <div className="col-sm-6 mb-xs-30 d-flex align-items-stretch">
+              <div className="alt-features-item border-left mt-0 wow fadeScaleIn" data-wow-delay=".3s">
+                <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"
                   >
-                        <span className="link-strong link-strong-unhovered">
+                    <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" />
-                          {item.link.text} <i className="mi-arrow-right size-18" aria-hidden="true"></i>
+                  </svg>
-                        </span>
+                </div>
-                        <span className="link-strong link-strong-hovered" aria-hidden="true">
+
-                          {item.link.text} <i className="mi-arrow-right size-18" aria-hidden="true"></i>
+                <h4 className="alt-features-title">Location</h4>
-                        </span>
+                <div className="alt-features-descr clearlinks">
-                      </a>
+                  <div>
+                    <a href="https://maps.app.goo.gl/1sK5Mgi7mtqZsYkcA">5151 E HWY 90, Sierra Vista, Arizona 85635</a>
                   </div>
                 </div>
-                </React.Fragment>
-              ))}
-              {/* End Phone */}
               </div>
             </div>
-          {/* End Contact Information */}
+            {/* End Contact Item */}
+            {/* Contact Item */}
+            <div className="col-sm-6 d-flex align-items-stretch">
+              <div className="alt-features-item border-left mt-0 wow fadeScaleIn" data-wow-delay=".5s">
+                <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>
-        {/* End Left Column */}
+                <h4 className="alt-features-title">Phone</h4>
-        {/* Right Column */}
+                <div className="alt-features-descr clearlinks">
-        <div className="col-lg-8 col-xl-7 offset-xl-1 wow fadeInUp">
+                  <div>
-          <div className="row g-0">
+                    <a href="tel:(520) 803-6644">(520) 803-6644</a>
-            {/* Google Map Column */}
+                  </div>
-            <div className="col-12 d-flex align-items-stretch pt-40 pt-sm-0 pb-40 pb-sm-0 mb-sm-30">
+                </div>
-              <div className="map-boxed-1 d-flex align-items-stretch h-[400px]">
+              </div>
+            </div>
+            {/* End Contact Item */}
+          </div>
+          <div className="row mb-60 mb-sm-50">
+            {/* Contact Item */}
+            <div className="col-sm-6 mb-xs-30 d-flex align-items-stretch">
+              <div className="alt-features-item border-left mt-0 wow fadeScaleIn" data-wow-delay=".3s">
+                <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="alt-features-descr clearlinks">
+                  <p className="text-nowrap">Monday to Friday: 8:00 AM – 5:00 PM</p>
+                </div>
+              </div>
+            </div>
+            {/* End Contact Item */}
+            {/* Contact Item */}
+            <div className="col-sm-6 mb-xs-30 d-flex align-items-stretch">
+              <div className="alt-features-item border-left mt-0 wow fadeScaleIn" data-wow-delay=".3s">
+                <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="alt-features-descr clearlinks">
+                  <div>
+                    <a href="tel:(520) 459-3193">(520) 459-3193</a>
+                  </div>
+                </div>
+              </div>
+            </div>
+            {/* End Contact Item */}
+          </div>
+          {/* End Contact Form */}
+        </div>
+        <div className="col-md-6 d-flex align-items-stretch">
+          {/* Google Map */}
+          <div className="map-boxed">
             <iframe
-                  src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3399.869553403109!2d-110.24257920000001!3d31.555194399999998!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x86d7292ebdc13925%3A0x43d6cab7d0f93f14!2s5151%20AZ-90%2C%20Sierra%20Vista%2C%20AZ%2085635%2C%20USA!5e0!3m2!1sen!2sid!4v1738604989180!5m2!1sen!2sid"
+              src="https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d108795.7060636289!2d-110.242613!3d31.555297!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x86d7292e9b858975%3A0xc2519e5d827cd79c!2sCochise%20Oncology!5e0!3m2!1sen!2sus!4v1740412623968!5m2!1sen!2sus"
               width={600}
-                  height={600}
+              height={450}
               style={{ border: 0 }}
               loading="lazy"
               referrerPolicy="no-referrer-when-downgrade"
             />
           </div>
-            </div>
+          {/* End Google Map */}
-            {/* End Google Map Column */}
         </div>
       </div>
-        {/* End Right Column */}
-      </div>
-
-      {children}
     </div>
   );
 }

src/components/Header.tsx

@@ -5,7 +5,7 @@ import Link from "next/link";
 
 export default function Header1Multipage({ links }: any) {
   return (
-    <div className="main-nav-sub full-wrapper" style={{ background: "linear-gradient(to right, #64B3B4, #A8DCCA)" }}>
+    <div className="main-nav-sub full-wrapper">
       {/* Logo  (* Add your text or image to the link tag. Use SVG or PNG image format. 
               If you use a PNG logo image, the image resolution must be equal 200% of the visible logo
               image size for support of retina screens. See details in the template documentation. *) */}

src/components/HeaderNav.tsx

@@ -66,7 +66,7 @@ export default function HeaderNav({ links, animateY = false }: any) {
                   {link.text} <i className="mi-chevron-down" />
                 </Link>
 
-                <ul className={`mn-sub to-left ${isDropdownOpen.includes(link.text) && "open"}`} ref={dropdownRef}>
+                <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) && (
@@ -87,7 +87,7 @@ export default function HeaderNav({ links, animateY = false }: any) {
                             {subLink.text} <i className="mi-chevron-down" />
                           </Link>
 
-                          <ul className={`mn-sub to-left ${isDropdownOpen.includes(subLink.text) && "open"}`}>
+                          <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()}>

src/components/Hero.tsx

@@ -1,64 +1,56 @@
 "use client";
 
-import ModalVideo from "react-modal-video";
+import { useRef } from "react";
-import { useState } from "react";
-import Link from "next/link";
 
 export default function Hero6() {
-  const [isOpen, setOpen] = useState(false);
+  const videoRef = useRef<any | null>(null);
+
   return (
-    <>
+    <section className="home-section bg-dark-1 bg-dark-alpha-30 light-content scrollSpysection" id="home">
-      <div className="container min-height-80vh d-flex align-items-center pt-100 pb-100 pt-sm-120 pb-sm-120">
+      <div className="container min-height-100vh 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 col-lg-8 offset-lg-2">
+            <div className="col-md-10 offset-md-1 mb-20 mb-sm-0">
-              <h2 className="section-caption mb-30 mb-xs-10" data-wow-duration="1.2s">
+              <h2 className="hs-title-11 mb-30 mb-xs-10">Healing Begins Here</h2>
-                Healing Begins Here
+              <h1 className="hs-title-12 mb-50 mb-sm-30">
-              </h2>
+                <span className="wow charsAnimIn" data-splitting="chars">
-              <h1 className="hs-title-1 mb-30">
-                <span className="" data-splitting="chars">
                   Cochise Oncology
                 </span>
               </h1>
-              <div className="row">
-                <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
+                Southern Arizona’s Only Complete Cancer Treatment Center in Sierra Vista.
               </p>
-                </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 hover:opacity-[0.5]"
-                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}
               >
-                <Link href="/contact" className="bg-[#64B3B4] text-white px-4 py-2 m-3 rounded-3xl hover:opacity-[0.7]">
                 Request Consultation
-                </Link>
+              </a>
-                {/* <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 */}
-      </div>{" "}
+        {/* Scroll Down */}
-      <ModalVideo
+        <div className="local-scroll scroll-down-wrap" data-wow-offset={0}>
-        channel="youtube"
+          <a href="#about" className="scroll-down">
-        youtube={{ mute: 0, autoplay: 0 }}
+            <i className="mi-chevron-down" />
-        isOpen={isOpen}
+            <span className="visually-hidden">Scroll to the next section</span>
-        videoId="jTea_8Fk5Ns"
+          </a>
-        onClose={() => setOpen(false)}
+        </div>
-      />{" "}
+        {/* End Scroll Down */}
-    </>
+      </div>
+    </section>
   );
 }

src/components/Homepage.tsx

@@ -4,6 +4,7 @@ import Link from "next/link";
 import Cta3 from "./cta3";
 import Testimonials from "./Testimonials";
 import About from "./About";
+import Contact from "./Contacts/Contact";
 
 export default function homepage({ onePage = false, dark = false }) {
   return (
@@ -95,7 +96,7 @@ export default function homepage({ onePage = false, dark = false }) {
           </div>
         </div>
       </section>
-      <section className="my-5 w-full">
+      <section className="mb-5 w-full">
         <Testimonials />
       </section>
       <section className="page-section bg-scroll light-content bg-[url(/assets/images/demo-modern/section-bg-3.jpeg)]">
@@ -133,17 +134,17 @@ export default function homepage({ onePage = false, dark = false }) {
         </div>
       </section>
 
-      <section className={`page-section scrollSpysection ${dark ? "bg-dark-1 light-content" : ""}`} id="about">
+      <section className={`mt-16 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>
+              <h2 className="section-caption-slick 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"
+                className="decoration-2 d-none d-md-block mt-24"
                 data-rellax-y=""
                 data-rellax-speed="0.7"
                 data-rellax-percentage="-0.2"
@@ -165,6 +166,10 @@ export default function homepage({ onePage = false, dark = false }) {
           <About />
         </div>
       </section>
+
+      <section className={`mb-5 scrollSpysection ${dark ? "bg-dark-1 light-content" : ""}`} id="contact">
+        <Contact />{" "}
+      </section>
     </>
   );
 }

src/components/Team.tsx

@@ -19,7 +19,7 @@ export default function Team({ data }: any) {
           <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]">
+              <button className="bg-[#64B3B4] text-white px-5 py-1 m-3 rounded-3xl hover:opacity-[0.7]">
                 Biography
               </button>
             </Link>

src/components/Teams/CardTeam.tsx

@@ -15,8 +15,8 @@ export function CardTeam({ data }: CardTeamProps) {
         <div className="team-item-image">
           <Image
             src={data.img.url}
-            width={625}
+            width={400}
-            height={767}
+            height={400}
             className="wow scaleOutIn"
             data-wow-duration="1.2s"
             alt={`Image of ${data.name}`}

src/services/payload/team.ts

@@ -12,6 +12,7 @@ export async function fetchTeamDetail(name: string | undefined) {
     limit: 1,
     pagination: false,
   });
+  console.log("data", name);
 
   if (!blogDataQuery?.docs?.[0]) return null;