rankrunners-dev/next-cochise
4
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Compare commits

base: rankrunners-dev:4a3b9a0a227775208644778f0fff195ff96b97d9
Branches Tags
rankrunners-dev:main
rankrunners-dev:dev
...
compare: rankrunners-dev:9cbc376f97598a09195dde8c228b60f5306d1dbf
Branches Tags
rankrunners-dev:main
rankrunners-dev:dev

6 Commits
4a3b9a0a22 ... 9cbc376f97

Author SHA1 Message Date
RizqiSyahrendra
9cbc376f97 fix: homepage image and circle cta styling 2025-03-03 11:40:00 +07:00
RizqiSyahrendra
04c48ccfb4 fix: contact service lint error 2025-02-28 19:36:54 +07:00
RizqiSyahrendra
72638cab43 fix: footer linkedin data, integrated from payload 2025-02-28 19:35:54 +07:00
RizqiSyahrendra
3a08a76b3f fix: layout and footer, 
- restructure layout and footer
- footer (contact) data from payload
 2025-02-28 19:07:37 +07:00
RizqiSyahrendra
ae9ec00946 fix: HeaderNav types and defect 2025-02-28 13:47:35 +07:00
RizqiSyahrendra
312e4bed2f Merge pull request 'dev' (#5) from dev into main 
Reviewed-on: #5
 2025-02-28 03:52:33 +00:00
23 changed files with 486 additions and 211 deletions
Show Stats Expand all files Collapse all files

BIN
public/assets/images/cochise-medical-oncology-768x512.webp Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 38 KiB

BIN
public/assets/images/cochise-radiation-oncology-768x512.webp Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 47 KiB

BIN
public/assets/images/cochise-skin-cancer-768x512.webp Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 18 KiB

62
src/app/(main)/layout.tsx
View File

@ -1,59 +1,29 @@
"use client";
import { usePathname } from "next/navigation";
import { useEffect } from "react";
import { init_wow } from "@/utils/initWow";
import { parallaxMouseMovement, parallaxScroll } from "@/utils/parallax";
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 "@/app/globals.css";
import "swiper/css"; import Footer, { FooterSkeleton } from "@/components/Footer";
import "jarallax/dist/jarallax.min.css"; import Header from "@/components/Header";
import "swiper/css/effect-fade"; import InitialScript from "@/components/InitialScript";
import "react-modal-video/css/modal-video.css"; import { navMenuData } from "@/data/menu";
import "photoswipe/dist/photoswipe.css";
import "tippy.js/dist/tippy.css";
import "@public/assets/css/styles.css"; import "@public/assets/css/styles.css";
import "jarallax/dist/jarallax.min.css";
import { Roboto } from "next/font/google"; import { Roboto } from "next/font/google";
import "photoswipe/dist/photoswipe.css";
import { Suspense } from "react";
import "react-modal-video/css/modal-video.css";
import "swiper/css";
import "swiper/css/effect-fade";
import "tippy.js/dist/tippy.css";
const roboto = Roboto({ subsets: ["latin"] }); const roboto = Roboto({ subsets: ["latin"] });
export default function MainLayout({ export default function MainLayout({
children, children,
}: Readonly<{ }: Readonly<{
children: React.ReactNode; children: React.ReactNode;
}>) { }>) {
const path = usePathname();
useEffect(() => {
init_wow();
parallaxMouseMovement();
const mainNav = document.querySelector(".main-nav");
if (mainNav?.classList.contains("transparent")) {
mainNav.classList.add("js-transparent");
} else if (!mainNav?.classList?.contains("dark")) {
mainNav?.classList.add("js-no-transparent-white");
}
window.addEventListener("scroll", headerChangeOnScroll);
parallaxScroll();
return () => {
window.removeEventListener("scroll", headerChangeOnScroll);
};
}, [path]);
useEffect(() => {
if (typeof window !== "undefined") {
// Import the script only on the client side
// @ts-ignore
import("bootstrap/dist/js/bootstrap.esm").then(() => {
// Module is imported, you can access any exported functionality if
});
}
}, []);
return ( return (
<html lang="en" className={`no-mobile no-touch ${roboto.className}`}> <html lang="en" className={`no-mobile no-touch ${roboto.className}`}>
<InitialScript />
<body className="appear-animate body"> <body className="appear-animate body">
<div className="theme-slick"> <div className="theme-slick">
<div className="page" id="top"> <div className="page" id="top">
@ -61,7 +31,9 @@ export default function MainLayout({
<Header links={navMenuData} /> <Header links={navMenuData} />
</nav> </nav>
<main id="main">{children}</main> <main id="main">{children}</main>
<Footer /> <Suspense fallback={<FooterSkeleton />}>
<Footer />
</Suspense>
</div> </div>
</div> </div>
</body> </body>

2
src/app/globals.css
View File

@ -9,6 +9,7 @@
--ext-color-primary-4: #d4a187; --ext-color-primary-4: #d4a187;
--ext-color-primary-5: #e7ccc0; --ext-color-primary-5: #e7ccc0;
--ext-color-primary-6: #64b3b4; --ext-color-primary-6: #64b3b4;
--ext-color-primary-7: #a8dcca;
--background: #ffffff; --background: #ffffff;
--foreground: #171717; --foreground: #171717;
} }
@ -21,6 +22,7 @@
--ext-color-primary-4: #d4a187; --ext-color-primary-4: #d4a187;
--ext-color-primary-5: #e7ccc0; --ext-color-primary-5: #e7ccc0;
--ext-color-primary-6: #64b3b4; --ext-color-primary-6: #64b3b4;
--ext-color-primary-7: #a8dcca;
--background: #0a0a0a; --background: #0a0a0a;
--foreground: #ededed; --foreground: #ededed;
} }

1
src/collections/Media.ts
View File

@ -15,5 +15,6 @@ export const Media: CollectionConfig = {
upload: true, upload: true,
admin: { admin: {
hideAPIURL: true, hideAPIURL: true,
group: "General",
}, },
}; };

4
src/collections/Pages.ts
View File

@ -72,4 +72,8 @@ export const Pages: CollectionConfig = {
], ],
}, },
], ],
admin: {
hideAPIURL: true,
group: "General",
},
}; };

1
src/collections/Teams.ts
View File

@ -30,5 +30,6 @@ export const Teams: CollectionConfig = {
admin: { admin: {
hideAPIURL: true, hideAPIURL: true,
useAsTitle: "name", useAsTitle: "name",
group: "General",
}, },
}; };

1
src/collections/Users.ts
View File

@ -5,6 +5,7 @@ export const Users: CollectionConfig = {
admin: { admin: {
useAsTitle: "email", useAsTitle: "email",
hideAPIURL: true, hideAPIURL: true,
group: "Users",
}, },
auth: true, auth: true,
fields: [ fields: [

123
src/components/Footer.tsx
View File

@ -1,13 +1,10 @@
"use client";
import React from "react";
import Image from "next/image"; import Image from "next/image";
import { FaPhone, FaFax, FaFacebook, FaMapMarkerAlt, FaClock } from "react-icons/fa"; import { FaClock, FaFacebook, FaFax, FaLinkedin, FaMapMarkerAlt, FaPhone } from "react-icons/fa";
import ScrollToTop from "./ScrollToTop";
import { fetchContact } from "@/services/payload/contact";
export default function Footer() { export default async function Footer() {
const scrollToTop = (event: React.MouseEvent<HTMLDivElement, MouseEvent>) => { const contact = await fetchContact();
event.preventDefault();
window.scrollTo({ top: 0, behavior: "smooth" });
};
return ( return (
<div <div
@ -33,29 +30,43 @@ export default function Footer() {
<FaMapMarkerAlt className="text-2xl text-gray-300" /> <FaMapMarkerAlt className="text-2xl text-gray-300" />
<div className="leading-tight"> <div className="leading-tight">
<a <a
href="https://www.google.com/maps/place/5151+AZ-90,+Sierra+Vista,+AZ+85635" href={contact?.location?.href ?? ""}
target="_blank" target="_blank"
rel="noopener noreferrer" rel="noopener noreferrer"
className="text-lg text-white" className="text-lg text-white"
> >
5151 E HIGHWAY 90 {contact?.location?.street ?? ""}
</a> </a>
<br /> <br />
<span className="text-sm text-gray-300">Sierra Vista, Arizona 85635</span> <span className="text-sm text-gray-300">{contact?.fullLocation ?? ""}</span>
</div> </div>
</li> </li>
<li className="flex items-center space-x-4 border-b border-gray-500 pb-2"> <li className="flex items-center space-x-4 border-b border-gray-500 pb-2">
<FaPhone className="text-2xl text-gray-300" /> <FaPhone className="text-2xl text-gray-300" />
<span className="text-lg">(520) 803-6644</span> <a
href={`tel:${contact?.phone ?? ""}`}
target="_blank"
rel="noopener noreferrer"
className="text-lg text-white"
>
{contact?.phone ?? ""}
</a>
</li> </li>
<li className="flex items-center space-x-4 border-b border-gray-500 pb-2"> <li className="flex items-center space-x-4 border-b border-gray-500 pb-2">
<FaFax className="text-2xl text-gray-300" /> <FaFax className="text-2xl text-gray-300" />
<span className="text-lg">Fax: (520) 459-3193</span> <a
href={`tel:${contact?.fax ?? ""}`}
target="_blank"
rel="noopener noreferrer"
className="text-lg text-white"
>
Fax: {contact?.fax ?? ""}
</a>
</li> </li>
<li className="flex items-center space-x-4"> <li className="flex items-center space-x-4 border-b border-gray-500 pb-2">
<FaFacebook className="text-2xl text-gray-300" /> <FaFacebook className="text-2xl text-gray-300" />
<a <a
href="https://www.facebook.com/p/Cochise-Oncology-61556262839823" href={contact?.facebook ?? ""}
target="_blank" target="_blank"
rel="noopener noreferrer" rel="noopener noreferrer"
className="text-lg text-white" className="text-lg text-white"
@ -63,21 +74,91 @@ export default function Footer() {
Facebook Facebook
</a> </a>
</li> </li>
<li className="flex items-center space-x-4">
<FaLinkedin className="text-2xl text-gray-300" />
<a
href={contact?.linkedin ?? ""}
target="_blank"
rel="noopener noreferrer"
className="text-lg text-white"
>
Linkedin
</a>
</li>
</ul> </ul>
</div> </div>
<div className="w-full md:w-1/4"> <div className="w-full md:w-1/4">
<h3 className="text-lg font-semibold mb-4">Business Hours</h3> <h3 className="text-lg font-semibold mb-4">Business Hours</h3>
<div className="flex items-center space-x-2"> {contact?.hours?.map?.((hour) => (
<FaClock className="text-xl" /> <div key={hour.id} className="flex items-center space-x-2">
<span className="text-base font-medium">Monday - Friday: 8am - 5pm</span> <FaClock className="text-xl" />
</div> <span className="text-base font-medium">{hour?.hour ?? ""}</span>
</div>
)) ?? []}
</div> </div>
</div> </div>
<div className="text-center mt-6"> <div className="text-center mt-6">
<div onClick={scrollToTop} className="cursor-pointer text-white font-semibold" aria-label="Scroll to top"> <ScrollToTop />
Back to Top ↑ </div>
</div>
);
}
export function FooterSkeleton() {
return (
<div
className="relative text-white py-10"
style={{
backgroundColor: "transparent",
backgroundImage: "linear-gradient(172deg, #798D90 0%, #C48853 100%)",
}}
>
<div className="container mx-auto flex flex-wrap justify-between items-start px-6">
<div className="w-full md:w-1/4 mb-6 md:mb-0 flex flex-col items-start">
<Image src="/assets/images/demo-slick/logo-dark.webp" alt="Cochise Oncology Logo" width={363} height={138} />
<p className="text-sm mt-3">© {new Date().getFullYear()} All Rights Reserved</p>
</div>
<div className="w-full md:w-1/3 mb-6 md:mb-0 animate-pulse">
<h3 className="text-lg font-semibold mb-4">Contact Us</h3>
<ul className="space-y-4 border-gray-400 pl-0">
<li className="flex items-center space-x-4 border-b border-gray-500 pb-2">
<FaMapMarkerAlt className="text-2xl text-gray-300" />
<div className="h-2 bg-gray-300 rounded flex-1"></div>
<div className="h-2 bg-gray-300 rounded flex-1"></div>
</li>
<li className="flex items-center space-x-4 border-b border-gray-500 pb-2">
<FaPhone className="text-2xl text-gray-300" />
<div className="h-2 bg-gray-300 rounded flex-1"></div>
<div className="h-2 bg-gray-300 rounded flex-1"></div>
</li>
<li className="flex items-center space-x-4 border-b border-gray-500 pb-2">
<FaFax className="text-2xl text-gray-300" />
<div className="h-2 bg-gray-300 rounded flex-1"></div>
<div className="h-2 bg-gray-300 rounded flex-1"></div>
</li>
<li className="flex items-center space-x-4">
<FaFacebook className="text-2xl text-gray-300" />
<div className="h-2 bg-gray-300 rounded flex-1"></div>
<div className="h-2 bg-gray-300 rounded flex-1"></div>
</li>
<li className="flex items-center space-x-4">
<FaLinkedin className="text-2xl text-gray-300" />
<div className="h-2 bg-gray-300 rounded flex-1"></div>
<div className="h-2 bg-gray-300 rounded flex-1"></div>
</li>
</ul>
</div>
<div className="w-full md:w-1/4 animate-pulse">
<h3 className="text-lg font-semibold mb-4">Business Hours</h3>
<div className="flex items-center space-x-2">
<FaClock className="text-xl" />
<div className="h-2 bg-gray-300 rounded flex-1"></div>
<div className="h-2 bg-gray-300 rounded flex-1"></div>
</div>
</div> </div>
</div> </div>
</div> </div>

2
src/components/Header.tsx
View File

@ -1,3 +1,5 @@
"use client";
import HeaderNav from "@/components/HeaderNav"; import HeaderNav from "@/components/HeaderNav";
import { navMenuData } from "@/data/menu"; import { navMenuData } from "@/data/menu";
import { toggleMobileMenu } from "@/utils/toggleMobileMenu"; import { toggleMobileMenu } from "@/utils/toggleMobileMenu";

147
src/components/HeaderNav.tsx
View File

@ -1,12 +1,12 @@
"use client"; "use client";
import { navMenuData } from "@/data/menu";
import addScrollspy from "@/utils/addScroll"; import addScrollspy from "@/utils/addScroll";
import { init_classic_menu_resize } from "@/utils/menuToggle"; import { init_classic_menu_resize } from "@/utils/menuToggle";
import { scrollToElement } from "@/utils/scrollToElement"; import { scrollToElement } from "@/utils/scrollToElement";
import { closeMobileMenu, toggleMobileMenu } from "@/utils/toggleMobileMenu"; import { toggleMobileMenu } from "@/utils/toggleMobileMenu";
import { Fragment, useEffect, useRef, useState } from "react";
import Link from "next/link"; import Link from "next/link";
import { navMenuData } from "@/data/menu"; import { Fragment, useEffect, useRef, useState } from "react";
export default function HeaderNav({ links, animateY = false }: { links: typeof navMenuData; animateY?: boolean }) { export default function HeaderNav({ links, animateY = false }: { links: typeof navMenuData; animateY?: boolean }) {
const [isDropdownOpen, setIsDropdownOpen] = useState([""]); const [isDropdownOpen, setIsDropdownOpen] = useState([""]);
@ -36,89 +36,70 @@ export default function HeaderNav({ links, animateY = false }: { links: typeof n
return ( return (
<> <>
{links[0].href?.includes("/") && {links.map((link, index) => (
links.map((link, index) => ( <Fragment key={index}>
<Fragment key={index}> <li>
<li> {!Array.isArray(link?.child) && (
{!Array.isArray(link?.child) && ( <Link href={link.href}>
<Link href={link.href}> {animateY ? (
{animateY ? ( <span className="btn-animate-y">
<span className="btn-animate-y"> <span className="btn-animate-y-1">{link.text}</span>
<span className="btn-animate-y-1">{link.text}</span> <span className="btn-animate-y-2" aria-hidden="true">
<span className="btn-animate-y-2" aria-hidden="true"> {link.text}
{link.text}
</span>
</span> </span>
) : (
link.text
)}
</Link>
)}
{Array.isArray(link?.child) && (
<>
<Link href={link?.href ?? "#"} className="mn-has-sub">
{link.text} <i className="mi-chevron-down" onClick={() => toggleDropdown([link.text])} />
</Link>
<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) && (
<Link href={subLink?.href} onClick={() => toggleMobileMenu()}>
{subLink?.text}
</Link>
)}
{Array.isArray(subLink?.child) && (
<>
<Link href={subLink?.href ?? "#"} className="mn-has-sub">
{subLink.text}{" "}
<i
className="mi-chevron-down"
onClick={() => toggleDropdown([link.text, subLink.text])}
/>
</Link>
<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()}>
{subLink2?.text}
</Link>
</li>
))}
</ul>
</>
)}
</li>
))}
</ul>
</>
)}
</li>
{index != links.length - 1 && (
<div className="text-white h-[25px] mx-2 opacity-[0.3]" style={{ border: "1px solid white" }} />
)}
</Fragment>
))}
{!links[0].href?.includes("/") &&
links.map((link: any, index: any) => (
<li className="scrollspy-link" key={index}>
<a onClick={() => closeMobileMenu()} className="" href={link.href}>
{animateY ? (
<span className="btn-animate-y">
<span className="btn-animate-y-1">{link.text}</span>
<span className="btn-animate-y-2" aria-hidden="true">
{link.text}
</span> </span>
</span> ) : (
) : ( link.text
link.text )}
)} </Link>
</a> )}
{Array.isArray(link?.child) && (
<>
<Link href={link?.href ?? "#"} className="mn-has-sub">
{link.text} <i className="mi-chevron-down" onClick={() => toggleDropdown([link.text])} />
</Link>
<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) && (
<Link href={subLink?.href} onClick={() => toggleMobileMenu()}>
{subLink?.text}
</Link>
)}
{Array.isArray(subLink?.child) && (
<>
<Link href={subLink?.href ?? "#"} className="mn-has-sub">
{subLink.text}
<i className="mi-chevron-down" onClick={() => toggleDropdown([link.text, subLink.text])} />
</Link>
<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()}>
{subLink2?.text}
</Link>
</li>
))}
</ul>
</>
)}
</li>
))}
</ul>
</>
)}
</li> </li>
))} {index != links.length - 1 && (
<div
className="text-white bg-white h-[1px] md:h-[25px] mx-2 opacity-[0.3]"
style={{ border: "1px solid white" }}
/>
)}
</Fragment>
))}
</> </>
); );
} }

28
src/components/Hero.tsx
View File

@ -7,7 +7,7 @@ export default function Hero() {
return ( return (
<section className="home-section bg-dark-1 bg-dark-alpha-30 light-content scrollSpysection" id="home"> <section className="home-section bg-dark-1 bg-dark-alpha-30 light-content scrollSpysection" id="home">
<div className="container min-h-[80vh] d-flex align-items-center pt-100 pb-100 pt-sm-120 pb-sm-120"> <div className="container min-h-[90vh] d-flex align-items-center pt-100 pb-100 pt-sm-120 pb-sm-120">
{/* Background Video */} {/* Background Video */}
{/* Please replace the video file in folder "video" with your own file */} {/* Please replace the video file in folder "video" with your own file */}
<div className="bg-video-wrapper"> <div className="bg-video-wrapper">
@ -18,21 +18,17 @@ export default function Hero() {
</div> </div>
{/* Home Section Content */} {/* Home Section Content */}
<div className="home-content"> <div className="home-content">
<div className="row"> <div className="space-y-5">
{/* Home Section Text */} <h2 className="hs-title-3">Healing Begins Here</h2>
<div className="col-md-10 offset-md-1"> <h1 className="text-3xl md:text-6xl">Cochise Oncology</h1>
<h2 className="hs-title-3 m-0 p-0">Healing Begins Here</h2> <p className="text-xl">Southern Arizona’s Only Complete Cancer Treatment Center in Sierra Vista.</p>
<h1 className="hs-title-2 m-0 p-0">Cochise Oncology</h1> <a
<p className="text-2xl">Southern Arizona’s Only Complete Cancer Treatment Center in Sierra Vista.</p> href="/contact"
<a className="btn btn-mod btn-border-w btn-large btn-round align-middle w-full md:w-1/2 lg:w-1/4 hover:opacity-[0.5]"
href="/contact" data-btn-animate="y"
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]" >
data-btn-animate="y" Request Consultation
> </a>
Request Consultation
</a>
</div>
{/* End Home Section Text */}
</div> </div>
</div> </div>
{/* End Home Section Content */} {/* End Home Section Content */}

90
src/components/Homepage.tsx
View File

@ -6,55 +6,63 @@ import Contact from "./Contacts/Contact";
export default function homepage({ dark = false }) { export default function homepage({ dark = false }) {
return ( return (
<> <>
<hr className={`mt-0 mb-0 ${dark ? "white" : ""} `} /> <section className="w-full py-5 bg-gradient-to-b from-white to-extColorPrimary7 relative">
<section <div className="bg-scroll">
className={`page-section scrollSpysection relative ${dark ? "bg-dark-1 light-content" : ""} `}
id="about"
>
<div className="w-full absolute top-[-5vw] z-[99] flex justify-center">
<div className="bg-white h-full flex justify-center p-8 gap-3 rounded-xl shadow-xl">
<Image
src="/assets/images/Cochise_New-service_Radixact-Announcement-900x900-1-1-768x768.webp"
width={450}
height={0}
alt=""
/>
<Image src="/assets/images/cochise-welcome.png" width={500} height={0} alt="" />
</div>
</div>
<div className="container position-relative">
<div className="row">
{/* Section Text */}
<div className="col-lg-6 d-flex align-items-center order-first order-lg-last mb-md-60 mb-sm-40"></div>
{/* End Section Text */}
</div>
</div>
</section>
<section className="mb-5 w-full min-h-[50vh]">
<section className="bg-scroll relative">
<div className="decoration-14" />
<div className="decoration-15" />
<div className="decoration-16 opacity-035 d-none d-md-block"> <div className="decoration-16 opacity-035 d-none d-md-block">
<Image src="/assets/images/demo-slick/decoration-2.svg" alt="Image Description" width={128} height={228} /> <Image src="/assets/images/demo-slick/decoration-2.svg" alt="Image Description" width={128} height={228} />
</div> </div>
<div className="decoration-17 opacity-035 d-none d-md-block"> <div className="decoration-17 opacity-035 d-none d-md-block">
<Image src="/assets/images/demo-slick/decoration-2.svg" alt="Image Description" width={128} height={228} /> <Image src="/assets/images/demo-slick/decoration-2.svg" alt="Image Description" width={128} height={228} />
</div> </div>
</section> </div>
<div className="pt-[12vw] w-full flex justify-center gap-5"> <div className="w-full absolute -top-20 md:-top-40 lg:-top-20 z-[99] flex">
<div className="w-[300px] h-[300px] bg-gradient-to-br from-white via-yellow-200 to-yellow-400 rounded-full flex items-center justify-center overflow-auto relative"> <div className="bg-white w-11/12 lg:w-9/12 xl:w-8/12 mx-auto flex flex-col md:flex-row p-3 space-x-3 space-y-3 rounded-xl shadow-xl">
<div className="bg-[url('/assets/images/cochise-welcome.png')] h-full w-full bg-[left] bg-cover text-center align-middle flex items-center justify-center opacity-[0.7]"></div> <div className="flex-1 relative">
<p className="text-[36px] text-center p-0 m-0 absolute text-white font-semibold tracking-tight"> <Image
Radiation Oncology src="/assets/images/Cochise_New-service_Radixact-Announcement-900x900-1-1-768x768.webp"
</p> alt=""
</div> width={500}
<div className="w-[300px] h-[300px] bg-green-300 rounded-full flex items-center justify-center"> height={0}
Medical Oncology className="w-full h-auto rounded-xl"
</div> />
<div className="w-[300px] h-[300px] bg-green-300 rounded-full flex items-center justify-center"> </div>
Skin Cancer <div className="flex-1 relative">
<Image
src="/assets/images/cochise-welcome.png"
alt=""
width={500}
height={0}
className="w-full h-auto rounded-xl"
/>
</div>
</div> </div>
</div> </div>
<div className="w-full flex flex-wrap justify-center space-x-5 space-y-4 mt-[550px] md:mt-[24vh] lg:mt-[62vh]">
<Link href="/radiation-oncology">
<div className="w-[320px] h-[320px] bg-[url('/assets/images/cochise-radiation-oncology-768x512.webp')] bg-cover rounded-full flex items-center justify-center overflow-auto relative">
<div className="h-full w-full rounded-full bg-gradient-to-b from-[#E3B19B82] to-[#798D90] text-center align-middle flex items-center justify-center"></div>
<p className="text-[36px] text-center p-0 m-0 absolute text-white font-medium tracking-tight leading-10">
Radiation Oncology
</p>
</div>
</Link>
<Link href="/medical-oncology">
<div className="w-[320px] h-[320px] bg-[url('/assets/images/cochise-medical-oncology-768x512.webp')] bg-cover rounded-full flex items-center justify-center overflow-auto relative">
<div className="h-full w-full bg-gradient-to-b from-[#E3B19B82] to-[#798D90] text-center align-middle flex items-center justify-center opacity-[0.7]"></div>
<p className="text-[36px] text-center p-0 m-0 absolute text-white font-medium tracking-tight leading-10">
Medical Oncology
</p>
</div>
</Link>
<Link href="/skin-cancer">
<div className="w-[320px] h-[320px] bg-[url('/assets/images/cochise-skin-cancer-768x512.webp')] bg-cover rounded-full flex items-center justify-center overflow-auto relative">
<div className="h-full w-full rounded-full bg-gradient-to-b from-[#E3B19B82] to-[#798D90] text-center align-middle flex items-center justify-center opacity-[0.7]"></div>
<p className="text-[36px] text-center p-0 m-0 absolute text-white font-medium tracking-tight leading-10">
Skin Cancer
</p>
</div>
</Link>
</div>
</section> </section>
{/* <section className="mb-5 w-full"> {/* <section className="mb-5 w-full">
<Testimonials /> <Testimonials />

40
src/components/InitialScript.tsx Normal file
View File

@ -0,0 +1,40 @@
"use client";
import { headerChangeOnScroll } from "@/utils/changeHeaderOnScroll";
import { init_wow } from "@/utils/initWow";
import { parallaxMouseMovement, parallaxScroll } from "@/utils/parallax";
import { usePathname } from "next/navigation";
import { useEffect } from "react";
export default function InitialScript() {
const path = usePathname();
useEffect(() => {
init_wow();
parallaxMouseMovement();
const mainNav = document.querySelector(".main-nav");
if (mainNav?.classList.contains("transparent")) {
mainNav.classList.add("js-transparent");
} else if (!mainNav?.classList?.contains("dark")) {
mainNav?.classList.add("js-no-transparent-white");
}
window.addEventListener("scroll", headerChangeOnScroll);
parallaxScroll();
return () => {
window.removeEventListener("scroll", headerChangeOnScroll);
};
}, [path]);
useEffect(() => {
if (typeof window !== "undefined") {
// Import the script only on the client side
// @ts-ignore
import("bootstrap/dist/js/bootstrap.esm").then(() => {
// Module is imported, you can access any exported functionality if
});
}
}, []);
return <></>;
}

14
src/components/ScrollToTop.tsx Normal file
View File

@ -0,0 +1,14 @@
"use client";
export default function ScrollToTop() {
const scrollToTop = (event: React.MouseEvent<HTMLDivElement, MouseEvent>) => {
event.preventDefault();
window.scrollTo({ top: 0, behavior: "smooth" });
};
return (
<div onClick={scrollToTop} className="cursor-pointer text-white font-semibold" aria-label="Scroll to top">
Back to Top ↑
</div>
);
}

7
src/data/menu.ts
View File

@ -1,8 +1,4 @@
export const navMenuData = [ 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: "#", href: "#",
text: "About", text: "About",
@ -68,10 +64,13 @@ export const navMenuData = [
}, },
], ],
}, },
{ href: "https://cochise.mdnavigatorclinical.com/prognocistc1/cochiseClinicIndex.html", text: "Patient Portal" },
{ href: "/blog", text: "Blog" },
{ {
href: "#", href: "#",
text: "Resources", text: "Resources",
child: [ child: [
{ href: "/testimonials", text: "Testimonials" },
{ href: "/insurances", text: "Insurances" }, { href: "/insurances", text: "Insurances" },
{ href: "/support", text: "Support Groups" }, { href: "/support", text: "Support Groups" },
{ href: "/hospitality-house", text: "Hospitality House" }, { href: "/hospitality-house", text: "Hospitality House" },

79
src/globals/Contacts.ts Normal file
View File

@ -0,0 +1,79 @@
import type { GlobalConfig } from "payload";
export const Contacts: GlobalConfig = {
slug: "contacts",
fields: [
{
name: "location",
type: "group",
fields: [
{
name: "street",
label: "Street",
type: "text",
},
{
name: "city",
label: "City",
type: "text",
},
{
name: "state",
label: "State",
type: "text",
},
{
name: "postcode",
label: "Postcode",
type: "text",
},
{
name: "href",
label: "Google Map Link",
type: "text",
},
{
name: "iframeSrc",
label: "Google Map Iframe Source",
type: "text",
},
],
},
{
name: "phone",
label: "Phone Number",
type: "text",
},
{
name: "fax",
label: "Fax",
type: "text",
},
{
name: "facebook",
label: "Facebook Link",
type: "text",
},
{
name: "linkedin",
label: "Linkedin Link",
type: "text",
},
{
name: "hours",
label: "Business Hours",
type: "array",
minRows: 1,
fields: [
{
name: "hour",
type: "text",
},
],
},
],
admin: {
hideAPIURL: true,
group: "General",
},
};

1
src/globals/GoogleReviews.ts
View File

@ -38,5 +38,6 @@ export const GoogleReviews: GlobalConfig = {
], ],
admin: { admin: {
hideAPIURL: true, hideAPIURL: true,
group: "General",
}, },
}; };

58
src/payload-types.ts
View File

@ -44,9 +44,11 @@ export interface Config {
}; };
globals: { globals: {
'google-reviews': GoogleReview; 'google-reviews': GoogleReview;
contacts: Contact;
}; };
globalsSelect: { globalsSelect: {
'google-reviews': GoogleReviewsSelect<false> | GoogleReviewsSelect<true>; 'google-reviews': GoogleReviewsSelect<false> | GoogleReviewsSelect<true>;
contacts: ContactsSelect<false> | ContactsSelect<true>;
}; };
locale: null; locale: null;
user: User & { user: User & {
@ -926,6 +928,33 @@ export interface GoogleReview {
updatedAt?: string | null; updatedAt?: string | null;
createdAt?: string | null; createdAt?: string | null;
} }
/**
* This interface was referenced by `Config`'s JSON-Schema
* via the `definition` "contacts".
*/
export interface Contact {
id: number;
location?: {
street?: string | null;
city?: string | null;
state?: string | null;
postcode?: string | null;
href?: string | null;
iframeSrc?: string | null;
};
phone?: string | null;
fax?: string | null;
facebook?: string | null;
linkedin?: string | null;
hours?:
| {
hour?: string | null;
id?: string | null;
}[]
| null;
updatedAt?: string | null;
createdAt?: string | null;
}
/** /**
* This interface was referenced by `Config`'s JSON-Schema * This interface was referenced by `Config`'s JSON-Schema
* via the `definition` "google-reviews_select". * via the `definition` "google-reviews_select".
@ -944,6 +973,35 @@ export interface GoogleReviewsSelect<T extends boolean = true> {
createdAt?: T; createdAt?: T;
globalType?: T; globalType?: T;
} }
/**
* This interface was referenced by `Config`'s JSON-Schema
* via the `definition` "contacts_select".
*/
export interface ContactsSelect<T extends boolean = true> {
location?:
| T
| {
street?: T;
city?: T;
state?: T;
postcode?: T;
href?: T;
iframeSrc?: T;
};
phone?: T;
fax?: T;
facebook?: T;
linkedin?: T;
hours?:
| T
| {
hour?: T;
id?: T;
};
updatedAt?: T;
createdAt?: T;
globalType?: T;
}
/** /**
* This interface was referenced by `Config`'s JSON-Schema * This interface was referenced by `Config`'s JSON-Schema
* via the `definition` "auth". * via the `definition` "auth".

11
src/payload.config.ts
View File

@ -25,6 +25,7 @@ import {
LinkFeature, LinkFeature,
} from "@payloadcms/richtext-lexical"; } from "@payloadcms/richtext-lexical";
import { GoogleReviews } from "@/globals/GoogleReviews"; import { GoogleReviews } from "@/globals/GoogleReviews";
import { Contacts } from "./globals/Contacts";
const filename = fileURLToPath(import.meta.url); const filename = fileURLToPath(import.meta.url);
const dirname = path.dirname(filename); const dirname = path.dirname(filename);
@ -51,7 +52,7 @@ export default buildConfig({
theme: "dark", theme: "dark",
}, },
collections: [Users, Media, Blogs, Pages, Teams, BlogCategories, BlogTags], collections: [Users, Media, Blogs, Pages, Teams, BlogCategories, BlogTags],
globals: [GoogleReviews], globals: [GoogleReviews, Contacts],
secret: process.env.PAYLOAD_SECRET || "", secret: process.env.PAYLOAD_SECRET || "",
typescript: { typescript: {
outputFile: path.resolve(dirname, "payload-types.ts"), outputFile: path.resolve(dirname, "payload-types.ts"),
@ -111,6 +112,14 @@ export default buildConfig({
}, },
formOverrides: { formOverrides: {
fields: undefined, fields: undefined,
admin: {
group: "General",
},
},
formSubmissionOverrides: {
admin: {
group: "General",
},
}, },
}), }),
], ],

25
src/services/payload/contact.ts Normal file
View File

@ -0,0 +1,25 @@
import payloadConfig from "@/payload.config";
import { getPayload } from "payload";
export async function fetchContact() {
const payload = await getPayload({ config: payloadConfig });
const dataQuery = await payload.findGlobal({ slug: "contacts" });
const fullLocationArr: string[] = [];
if (!!dataQuery?.location?.city) {
fullLocationArr.push(dataQuery.location.city);
}
if (!!dataQuery?.location?.state) {
fullLocationArr.push(dataQuery.location.state);
}
if (!!dataQuery?.location?.postcode) {
fullLocationArr.push(dataQuery.location.postcode);
}
return !!dataQuery
? {
...dataQuery,
fullLocation: fullLocationArr.join(","),
}
: null;
}

1
tailwind.config.ts
View File

@ -17,6 +17,7 @@ export default {
extColorPrimary4: "var(--ext-color-primary-4)", extColorPrimary4: "var(--ext-color-primary-4)",
extColorPrimary5: "var(--ext-color-primary-5)", extColorPrimary5: "var(--ext-color-primary-5)",
extColorPrimary6: "var(--ext-color-primary-6)", extColorPrimary6: "var(--ext-color-primary-6)",
extColorPrimary7: "var(--ext-color-primary-7)",
}, },
}, },
}, },