fix: hero

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 (
     <>
-      <ParallaxContainer
+      <div className="theme-main">
-        className="home-section bg-gray-light-1 bg-light-alpha-90 parallax-5 parallax-mousemove-scene scrollSpysection"
+        <div className="page" id="top">
-        style={{
+          <main id="main">
-          backgroundImage: "url(/assets/images/full-width-images/section-bg-1.jpg)",
+            <ParallaxContainer
-        }}
+              className="home-section bg-dark-1 bg-dark-alpha-60 light-content parallax-5 scrollSpysection"
-        id="home"
+              style={{
-      >
+                backgroundImage: "url(/assets/images/full-width-images/section-bg-13.jpeg)",
-        <Hero />
+              }}
-      </ParallaxContainer>
+              id="home"
+            >
+              <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,

src/components/HeaderNav.tsx

@@ -41,7 +41,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,65 +1,63 @@
 "use client";
 
-import { useRef } from "react";
+import ModalVideo from "react-modal-video";
-import Link from "next/link";
+import { useState } from "react";
-import Modal from "./Modal";
 
 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>
+                  <p className="section-descr mb-50" data-wow-delay="0.6s" data-wow-duration="1.2s">
-              <div className="local-scroll wch-unset wow fadeInUp" data-wow-delay="0.4s">
+                    Southern Arizona’s Only Complete Cancer Treatment Center in Sierra Vista
-                <a
+                  </p>
-                  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"
+              </div>
-                  data-btn-animate="y"
+              <div
+                className="local-scroll mt-n10 wch-unset"
+                data-wow-delay="0.7s"
+                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]">
+                  Request Consultation
+                </button>
+                {/* <a
+                  onClick={() => setOpen(true)}
+                  className="link-hover-anim align-middle lightbox mfp-iframe mt-10"
+                  data-link-animate="y"
                 >
-                  Learn More
+                  <i className="icon-play size-13 me-1" /> How it works?
-                </a>
+                </a> */}
-                <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>
               </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

@@ -4,6 +4,7 @@ import Link from "next/link";
 import Cta3 from "./cta3";
 import Service from "./Service";
 import { GoogleReviewsBlock } from "./Blocks/GoogleReviews";
+import Testimonials from "./Testimonials";
 
 export default function homepage({ onePage = false, dark = false }) {
   return (
@@ -95,33 +96,6 @@ 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`}>
-        <div className="decoration-12 bg-white" />
-        <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"
@@ -152,6 +126,9 @@ export default function homepage({ onePage = false, dark = false }) {
           </div>
         </div>
       </section>
+      <section className="my-5">
+        <Testimonials />
+      </section>
     </>
   );
 }

src/components/Team.tsx

@@ -4,22 +4,20 @@ 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="row mt-n40">
+      <div className="grid grid-cols-4 gap-5">
         {/* Team item */}
         {data.map((member: any, index: any) => (
-          <div key={index}>
+          <div key={index} className="text-center">
             <CardTeam data={member} />
+            <button className="bg-[#64B3B4] text-white px-2 py-1 m-3 rounded-3xl hover:opacity-[0.7]">Biography</button>
           </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

@@ -15,7 +15,7 @@ export default function Testimonials() {
 
     const isotope = new Isotope(isotopContainer.current, {
       itemSelector: ".col-md-6",
-      layoutMode: "masonry", 
+      layoutMode: "masonry",
     });
     imagesloaded(isotopContainer.current).on("progress", function () {
       isotope.layout();
@@ -31,16 +31,11 @@ export default function Testimonials() {
         {/* Section Text */}
         <div className="col-lg-5 col-xl-5 d-flex align-items-center mb-md-60 mb-sm-40">
           <div className="w-100">
-            <h2 className="section-caption-slick mb-30 mb-sm-20">
+            <h2 className="section-caption-slick mb-30 mb-sm-20">Testimonials</h2>
-              Testimonials
+            <h3 className="section-title mb-30">We&apos;re trusted by leading companies.</h3>
-            </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
+              A static website stores a unique file for every page of a static website. Each time that page is
-              website. Each time that page is requested, the same content is
+              requested, the same content is returned.
-              returned.
             </p>
             {/* Numbers */}
             <div className="row mt-sm-n10">
@@ -58,16 +53,10 @@ export default function Testimonials() {
         {/* 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
+            <div ref={isotopContainer} className="row masonry mb-n30 wow fadeInUp">
-              ref={isotopContainer}
-              className="row masonry mb-n30 wow fadeInUp"
-            >
               {/* Testimonials Item */}
               {testimonials5.map((testimonial: any, index: number) => (
-                <div
+                <div key={index} className={`col-md-6 mb-30 ${!index ? "mt-50 mt-sm-0" : ""} `}>
-                  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" />
@@ -76,12 +65,7 @@ export default function Testimonials() {
                       <p className="mb-0">{testimonial.text}</p>
                       <footer className="testimonials-4-author mt-30 clearfix">
                         <div className="testimonials-4-author-img float-start">
-                          <Image
+                          <Image width={44} height={44} src={testimonial.imgSrc} alt={testimonial.altText} />
-                            width={44}
-                            height={44}
-                            src={testimonial.imgSrc}
-                            alt={testimonial.altText}
-                          />
                         </div>
                         <div className="overflow-hidden">
                           {testimonial.author}
@@ -100,45 +84,7 @@ export default function Testimonials() {
         {/* 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" },
     ],
   },
 ];