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

dev #7

Merged
RizqiSyahrendra merged 3 commits from dev into main 2025-03-03 13:07:14 +00:00
Conversation 0 Commits 3 Files Changed 7 +176 -28
5 changed files with 176 additions and 28 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit 6d3d1dabb0 - Show all commits

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

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

155
src/components/Contacts/Contact.tsx
View File

@ -1,7 +1,19 @@
"use client";
import React from "react";
import { fetchContact } from "@/services/payload/contact";
import { Suspense } from "react";
export default function Contact() {
return (
<>
<Suspense fallback={<ContactSkeleton />}>
<ContactWithData />
</Suspense>
</>
);
}
async function ContactWithData() {
const contact = await fetchContact();
return (
<div className="container position-relative">
<div className="row">
@ -13,8 +25,8 @@ export default function Contact() {
</div>
</div>
</div>
<div className="row wow fadeInUp" data-wow-delay="0.5s">
<div className="col-md-6 mb-sm-50">
<div className="row" data-wow-delay="0.5s">
<div className="col-md-6 mb-sm-10">
{/* Contact Form */}
<div className="row mb-60 mb-sm-50">
{/* Contact Item */}
@ -38,7 +50,9 @@ export default function Contact() {
<h4 className="alt-features-title">Location</h4>
<div className="alt-features-descr clearlinks">
<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>
@ -64,7 +78,7 @@ export default function Contact() {
<h4 className="alt-features-title">Phone</h4>
<div className="alt-features-descr clearlinks">
<div>
<a href="tel:(520) 803-6644">(520) 803-6644</a>
<a href={`tel:${contact?.phone ?? "#"}`}>{contact?.phone ?? ""}</a>
</div>
</div>
</div>
@ -91,7 +105,12 @@ export default function Contact() {
</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>
{Array.isArray(contact?.hours) &&
contact.hours.map((h) => (
<p key={h.id} className="text-wrap">
{h.hour ?? ""}
</p>
))}
</div>
</div>
</div>
@ -116,7 +135,7 @@ export default function Contact() {
<h4 className="alt-features-title">Fax</h4>
<div className="alt-features-descr clearlinks">
<div>
<a href="tel:(520) 459-3193">(520) 459-3193</a>
<a href={`tel:${contact?.fax ?? "#"}`}>{contact?.fax ?? ""}</a>
</div>
</div>
</div>
@ -143,3 +162,123 @@ export default function Contact() {
</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>
);
}

13
src/components/Footer.tsx
View File

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

20
src/components/Homepage.tsx
View File

@ -37,27 +37,27 @@ export default function homepage({ dark = false }) {
</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">
<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">
<p className="text-[36px] text-center px-4 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">
<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 px-4 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">
<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 px-4 m-0 absolute text-white font-medium tracking-tight leading-10">
Skin Cancer
</p>
</div>
@ -67,14 +67,14 @@ export default function homepage({ dark = false }) {
{/* <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)]">
<div className="bg-overlay bg-gradient-dark-alpha-2 d-none d-md-block" />
<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-lg-block" />
{/* 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 */}
<div className="container position-relative">
<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>
<p className="text-sm">
Get compassionate care and excellent medical services from COCHISE ONCOLOGY in Sierra Vista, Arizona. We

9
src/services/payload/contact.ts
View File

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