fix: hero

2025-02-13 21:32:58 +07:00 · 2025-02-13 21:32:58 +07:00 · 43822fd7ea
commit 43822fd7ea
parent 4de92cb1d5
11 changed files with 90 additions and 165 deletions
--- a/public/assets/images/full-width-images/section-bg-13.jpeg
+++ b/public/assets/images/full-width-images/section-bg-13.jpeg
--- a/src/app/(main)/biography/page.tsx
+++ b/src/app/(main)/biography/page.tsx
--- a/src/app/(main)/home-bg-video/page.tsx
+++ b/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>
    </>
  );
 }
--- a/src/app/(main)/layout.tsx
+++ b/src/app/(main)/layout.tsx
@ -1,20 +1,20 @@
 "use client";
-import "@/app/globals.css";
-import Footer from "@/components/Footer";
-import Header from "@/components/Header";
-import { navMenuData } from "@/data/menu";
-import { headerChangeOnScroll } from "@/utils/changeHeaderOnScroll";
+import { usePathname } from "next/navigation";
+import { useEffect } from "react";
 import { init_wow } from "@/utils/initWow";
 import { parallaxMouseMovement, parallaxScroll } from "@/utils/parallax";
-import "@public/assets/css/styles.css";
-import "jarallax/dist/jarallax.min.css";
-import { usePathname } from "next/navigation";
-import "photoswipe/dist/photoswipe.css";
-import { useEffect } from "react";
-import "react-modal-video/css/modal-video.css";
+import { headerChangeOnScroll } from "@/utils/changeHeaderOnScroll";
+import Header from "@/components/Header";
+import Footer from "@/components/Footer";
+import { navMenuData } from "@/data/menu";
+import "@/app/globals.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,
--- a/src/components/HeaderNav.tsx
+++ b/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>
--- a/src/components/Hero.tsx
+++ b/src/components/Hero.tsx
@ -1,65 +1,63 @@
 "use client";

-import { useRef } from "react";
-import Link from "next/link";
-import Modal from "./Modal";
+import ModalVideo from "react-modal-video";
+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">
-        {/* 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>
+    <>
+      <div className="container min-height-80vh d-flex align-items-center pt-100 pb-100 pt-sm-120 pb-sm-120">
        {/* 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">
-              <h2 className="hs-title-11 mb-30 mb-xs-10 wow fadeInUp">Healing Begins Here</h2>
-              <h1 className="hs-title-12 mb-50 mb-sm-30">
-                <span className="wow charsAnimIn" data-splitting="chars">
+            <div className="col-md-10 offset-md-1 col-lg-8 offset-lg-2">
+              <h2 className="section-caption mb-30 mb-xs-10" data-wow-duration="1.2s">
+                Healing Begins Here
+              </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">
-                Southern Arizona’s Only Complete Cancer Treatment Center in Sierra Vista.
+              <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
                  </p>
-              <div className="local-scroll wch-unset wow fadeInUp" data-wow-delay="0.4s">
-                <a
-                  href="#about"
-                  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"
-                  data-btn-animate="y"
+                </div>
+              </div>
+              <div
+                className="local-scroll mt-n10 wch-unset"
+                data-wow-delay="0.7s"
+                data-wow-duration="1.2s"
+                data-wow-offset={0}
              >
-                  Learn More
-                </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 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"
+                  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 className="local-scroll scroll-down-wrap wow fadeInUp" data-wow-offset={0}>
-          <a href="#about" className="scroll-down">
-            <i className="mi-chevron-down" />
-            <span className="visually-hidden">Scroll to the next section</span>
-          </a>
-        </div>
-        {/* End Scroll Down */}
-      </div>
-    </section>
+      </div>{" "}
+      <ModalVideo
+        channel="youtube"
+        youtube={{ mute: 0, autoplay: 0 }}
+        isOpen={isOpen}
+        videoId="jTea_8Fk5Ns"
+        onClose={() => setOpen(false)}
+      />{" "}
+    </>
  );
 }
--- a/src/components/Homepage.tsx
+++ b/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>
    </>
  );
 }
--- a/src/components/Team.tsx
+++ b/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 */}
--- a/src/components/Teams/CardTeam.tsx
+++ b/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
--- a/src/components/Testimonials.tsx
+++ b/src/components/Testimonials.tsx
@ -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">
-              Testimonials
-            </h2>
-            <h3 className="section-title mb-30">
-              We&apos;re trusted by leading companies.
-            </h3>
+            <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.
+              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">
@ -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
-              ref={isotopContainer}
-              className="row masonry mb-n30 wow fadeInUp"
-            >
+            <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 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
-                            width={44}
-                            height={44}
-                            src={testimonial.imgSrc}
-                            alt={testimonial.altText}
-                          />
+                          <Image 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>
  );
--- a/src/data/menu.ts
+++ b/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" },
    ],
  },
 ];