dev #7

Merged
RizqiSyahrendra merged 3 commits from dev into main 2025-03-03 13:07:14 +00:00
5 changed files with 176 additions and 28 deletions
Showing only changes of commit 6d3d1dabb0 - Show all commits

View File

@ -1,5 +1,5 @@
import "@/app/globals.css"; import "@/app/globals.css";
import Footer, { FooterSkeleton } from "@/components/Footer"; import Footer from "@/components/Footer";
import Header from "@/components/Header"; import Header from "@/components/Header";
import InitialScript from "@/components/InitialScript"; import InitialScript from "@/components/InitialScript";
import { navMenuData } from "@/data/menu"; import { navMenuData } from "@/data/menu";
@ -8,7 +8,6 @@ import "@public/assets/css/styles.css";
import "jarallax/dist/jarallax.min.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 "photoswipe/dist/photoswipe.css";
import { Suspense } from "react";
import "react-modal-video/css/modal-video.css"; import "react-modal-video/css/modal-video.css";
import "swiper/css"; import "swiper/css";
import "swiper/css/effect-fade"; import "swiper/css/effect-fade";
@ -31,9 +30,7 @@ export default function MainLayout({
<Header links={navMenuData} /> <Header links={navMenuData} />
</nav> </nav>
<main id="main">{children}</main> <main id="main">{children}</main>
<Suspense fallback={<FooterSkeleton />}>
<Footer /> <Footer />
</Suspense>
</div> </div>
</div> </div>
</body> </body>

View File

@ -1,7 +1,19 @@
"use client"; import { fetchContact } from "@/services/payload/contact";
import React from "react"; import { Suspense } from "react";
export default function Contact() { export default function Contact() {
return (
<>
<Suspense fallback={<ContactSkeleton />}>
<ContactWithData />
</Suspense>
</>
);
}
async function ContactWithData() {
const contact = await fetchContact();
return ( return (
<div className="container position-relative"> <div className="container position-relative">
<div className="row"> <div className="row">
@ -13,8 +25,8 @@ export default function Contact() {
</div> </div>
</div> </div>
</div> </div>
<div className="row wow fadeInUp" data-wow-delay="0.5s"> <div className="row" data-wow-delay="0.5s">
<div className="col-md-6 mb-sm-50"> <div className="col-md-6 mb-sm-10">
{/* Contact Form */} {/* Contact Form */}
<div className="row mb-60 mb-sm-50"> <div className="row mb-60 mb-sm-50">
{/* Contact Item */} {/* Contact Item */}
@ -38,7 +50,9 @@ export default function Contact() {
<h4 className="alt-features-title">Location</h4> <h4 className="alt-features-title">Location</h4>
<div className="alt-features-descr clearlinks"> <div className="alt-features-descr clearlinks">
<div> <div>
<a href="https://maps.app.goo.gl/1sK5Mgi7mtqZsYkcA">5151 E HWY 90, Sierra Vista, Arizona 85635</a> <a target="_blank" href={contact?.location?.href ?? "#"}>
{contact?.fullLocation ?? ""}
</a>
</div> </div>
</div> </div>
</div> </div>
@ -64,7 +78,7 @@ export default function Contact() {
<h4 className="alt-features-title">Phone</h4> <h4 className="alt-features-title">Phone</h4>
<div className="alt-features-descr clearlinks"> <div className="alt-features-descr clearlinks">
<div> <div>
<a href="tel:(520) 803-6644">(520) 803-6644</a> <a href={`tel:${contact?.phone ?? "#"}`}>{contact?.phone ?? ""}</a>
</div> </div>
</div> </div>
</div> </div>
@ -91,7 +105,12 @@ export default function Contact() {
</div> </div>
<h4 className="alt-features-title">Hours</h4> <h4 className="alt-features-title">Hours</h4>
<div className="alt-features-descr clearlinks"> <div className="alt-features-descr clearlinks">
<p className="text-nowrap">Monday to Friday: 8:00 AM 5:00 PM</p> {Array.isArray(contact?.hours) &&
contact.hours.map((h) => (
<p key={h.id} className="text-wrap">
{h.hour ?? ""}
</p>
))}
</div> </div>
</div> </div>
</div> </div>
@ -116,7 +135,7 @@ export default function Contact() {
<h4 className="alt-features-title">Fax</h4> <h4 className="alt-features-title">Fax</h4>
<div className="alt-features-descr clearlinks"> <div className="alt-features-descr clearlinks">
<div> <div>
<a href="tel:(520) 459-3193">(520) 459-3193</a> <a href={`tel:${contact?.fax ?? "#"}`}>{contact?.fax ?? ""}</a>
</div> </div>
</div> </div>
</div> </div>
@ -143,3 +162,123 @@ export default function Contact() {
</div> </div>
); );
} }
function ContactSkeleton() {
return (
<div className="container position-relative animate-pulse">
<div className="row">
<div className="col-lg-6">
<div className="row mb-50">
<div className="col-lg-10">
<h2 className="section-caption-slick mb-xs-10">Contact Us</h2>
</div>
</div>
</div>
</div>
<div className="row">
<div className="col-md-6 mb-sm-10">
{/* Contact Form */}
<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="flex-1 alt-features-item border-left mt-0">
<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 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" />
</svg>
</div>
<h4 className="alt-features-title">Location</h4>
<div className="h-3 bg-gray-300 rounded flex-1"></div>
</div>
</div>
{/* End Contact Item */}
{/* Contact Item */}
<div className="col-sm-6 d-flex align-items-stretch">
<div className="flex-1 alt-features-item border-left mt-0">
<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>
<h4 className="alt-features-title">Phone</h4>
<div className="h-3 bg-gray-300 rounded flex-1"></div>
</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="flex-1 alt-features-item border-left mt-0">
<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="h-3 bg-gray-300 rounded flex-1"></div>
</div>
</div>
{/* End Contact Item */}
{/* Contact Item */}
<div className="col-sm-6 mb-xs-30 d-flex align-items-stretch">
<div className="flex-1 alt-features-item border-left mt-0">
<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="h-3 bg-gray-300 rounded flex-1"></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="h-80 bg-gray-300 rounded flex-1"></div>
{/* End Google Map */}
</div>
</div>
</div>
);
}

View File

@ -2,8 +2,19 @@ import Image from "next/image";
import { FaClock, FaFacebook, FaFax, FaLinkedin, FaMapMarkerAlt, FaPhone } from "react-icons/fa"; import { FaClock, FaFacebook, FaFax, FaLinkedin, FaMapMarkerAlt, FaPhone } from "react-icons/fa";
import ScrollToTop from "./ScrollToTop"; import ScrollToTop from "./ScrollToTop";
import { fetchContact } from "@/services/payload/contact"; import { fetchContact } from "@/services/payload/contact";
import { Suspense } from "react";
export default async function Footer() { export default async function Footer() {
return (
<>
<Suspense fallback={<FooterSkeleton />}>
<FooterWithData />
</Suspense>
</>
);
}
async function FooterWithData() {
const contact = await fetchContact(); const contact = await fetchContact();
return ( return (
@ -106,7 +117,7 @@ export default async function Footer() {
); );
} }
export function FooterSkeleton() { function FooterSkeleton() {
return ( return (
<div <div
className="relative text-white py-10" className="relative text-white py-10"

View File

@ -37,27 +37,27 @@ export default function homepage({ dark = false }) {
</div> </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]"> <div className="w-full flex flex-wrap justify-center space-x-5 space-y-4 mt-[550px] md:mt-[24vh] lg:mt-[62vh] wow fadeInUp">
<Link href="/radiation-oncology"> <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="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> <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"> <p className="text-[36px] text-center px-4 m-0 absolute text-white font-medium tracking-tight leading-10">
Radiation Oncology Radiation Oncology
</p> </p>
</div> </div>
</Link> </Link>
<Link href="/medical-oncology"> <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="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> <div className="h-full w-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"> <p className="text-[36px] text-center px-4 m-0 absolute text-white font-medium tracking-tight leading-10">
Medical Oncology Medical Oncology
</p> </p>
</div> </div>
</Link> </Link>
<Link href="/skin-cancer"> <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="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> <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"> <p className="text-[36px] text-center px-4 m-0 absolute text-white font-medium tracking-tight leading-10">
Skin Cancer Skin Cancer
</p> </p>
</div> </div>
@ -67,14 +67,14 @@ export default function homepage({ dark = false }) {
{/* <section className="mb-5 w-full"> {/* <section className="mb-5 w-full">
<Testimonials /> <Testimonials />
</section> */} </section> */}
<section className="page-section bg-scroll light-content bg-[url(/assets/images/demo-modern/section-bg-3.jpeg)]"> <section className="page-section bg-scroll light-content bg-[url(/assets/images/demo-modern/section-bg-3.jpeg)] bg-cover">
<div className="bg-overlay bg-gradient-dark-alpha-2 d-none d-md-block" /> <div className="bg-overlay bg-gradient-dark-alpha-2 d-none d-lg-block" />
{/* Mobile Overlay */} {/* Mobile Overlay */}
<div className="bg-overlay bg-dark-1 opacity-09 d-md-none" /> <div className="bg-overlay bg-dark-1 opacity-09 d-lg-none" />
{/* End Mobile Overlay */} {/* End Mobile Overlay */}
<div className="container position-relative"> <div className="container position-relative">
<div className="row wow fadeInUp"> <div className="row wow fadeInUp">
<div className="col-md-2 offset-md-5 col-lg-6 offset-lg-6 col-xl-6 offset-xl-6"> <div className="col-12 col-lg-6 offset-lg-6 col-xl-6 offset-xl-6">
<h2 className="section-title mb-40 mb-sm-30">A Cancer Treatment Center of Excellence</h2> <h2 className="section-title mb-40 mb-sm-30">A Cancer Treatment Center of Excellence</h2>
<p className="text-sm"> <p className="text-sm">
Get compassionate care and excellent medical services from COCHISE ONCOLOGY in Sierra Vista, Arizona. We Get compassionate care and excellent medical services from COCHISE ONCOLOGY in Sierra Vista, Arizona. We

View File

@ -6,20 +6,21 @@ export async function fetchContact() {
const dataQuery = await payload.findGlobal({ slug: "contacts" }); const dataQuery = await payload.findGlobal({ slug: "contacts" });
const fullLocationArr: string[] = []; const fullLocationArr: string[] = [];
if (!!dataQuery?.location?.street) {
fullLocationArr.push(dataQuery.location.street);
}
if (!!dataQuery?.location?.city) { if (!!dataQuery?.location?.city) {
fullLocationArr.push(dataQuery.location.city); fullLocationArr.push(dataQuery.location.city);
} }
if (!!dataQuery?.location?.state) { if (!!dataQuery?.location?.state) {
fullLocationArr.push(dataQuery.location.state); fullLocationArr.push(dataQuery.location.state);
} }
if (!!dataQuery?.location?.postcode) {
fullLocationArr.push(dataQuery.location.postcode);
}
return !!dataQuery return !!dataQuery
? { ? {
...dataQuery, ...dataQuery,
fullLocation: fullLocationArr.join(","), fullLocation: `${fullLocationArr.join(", ")} ${dataQuery?.location?.postcode ?? ""}`,
fullLocationWithoutStreet: `${fullLocationArr.slice(1).join(", ")} ${dataQuery?.location?.postcode ?? ""}`,
} }
: null; : null;
} }