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

main #9

Merged
RizqiSyahrendra merged 10 commits from main into dev 2025-03-04 04:16:47 +00:00
Conversation 0 Commits 10 Files Changed 12 +188 -62
7 changed files with 188 additions and 62 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit 4e40b72d18 - Show all commits

5
src/app/(main)/layout.tsx
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>

10
src/components/Blocks/GoogleReviews/GoogleReviews.tsx
View File

@ -17,8 +17,8 @@ export interface GoogleReviewProps {
export function GoogleReviews({ data }: GoogleReviewProps) { export function GoogleReviews({ data }: GoogleReviewProps) {
return ( return (
<section className="bg-scroll relative"> <section className="bg-scroll relative">
<div className="decoration-14" /> {/* <div className="decoration-14" />
<div className="decoration-15" /> <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>
@ -29,12 +29,12 @@ export function GoogleReviews({ data }: GoogleReviewProps) {
<div className="container px-6"> <div className="container px-6">
<h2 className="text-3xl font-bold text-center">Reviews</h2> <h2 className="text-3xl font-bold text-center">Reviews</h2>
<div className="flex justify-center space-x-2"> <div className="flex justify-center items-center space-x-2">
<h2 className="text-xl text-center font-bol">{data.ratingValue}</h2> <h2 className="text-xl text-center font-bol mt-[15px]">{data.ratingValue}</h2>
<div className="mt-1"> <div className="mt-1">
<StarRating size={20} value={data.ratingValue} /> <StarRating size={20} value={data.ratingValue} />
</div> </div>
<div className="text-xs font-semibold mt-">Over {data.totalRating} Reviews</div> <div className="text-xs font-medium">Over {data.totalRating} Reviews</div>
</div> </div>
<div className="mt-20 relative"> <div className="mt-20 relative">

155
src/components/Contacts/Contact.tsx
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>
);
}

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 { 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"

31
src/components/Homepage.tsx
View File

@ -2,6 +2,7 @@ import Image from "next/image";
import Link from "next/link"; import Link from "next/link";
import About from "./About"; import About from "./About";
import Contact from "./Contacts/Contact"; import Contact from "./Contacts/Contact";
import Testimonials from "./Testimonials";
export default function homepage({ dark = false }) { export default function homepage({ dark = false }) {
return ( return (
@ -37,44 +38,44 @@ 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] hover:scale-105 transition-transform duration-500 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] hover:scale-105 transition-transform duration-500 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] hover:scale-105 transition-transform duration-500 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>
</Link> </Link>
</div> </div>
</section> </section>
{/* <section className="mb-5 w-full"> <section className="py-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

25
src/components/Testimonials.tsx
View File

@ -3,31 +3,8 @@ import { GoogleReviewsBlock } from "./Blocks/GoogleReviews";
import { GoogleReviewsSkeleton } from "./Blocks/GoogleReviews/GoogleReviews"; import { GoogleReviewsSkeleton } from "./Blocks/GoogleReviews/GoogleReviews";
export default function Testimonials() { export default function Testimonials() {
// const isotopContainer = useRef<any | null>(null);
// const initIsotop = async () => {
// const Isotope = (await import("isotope-layout")).default;
// const imagesloaded = (await import("imagesloaded")).default;
// const isotope = new Isotope(isotopContainer.current, {
// itemSelector: ".col-md-6",
// layoutMode: "masonry",
// });
// imagesloaded(isotopContainer.current).on("progress", function () {
// isotope.layout();
// });
// };
// useEffect(() => {
// initIsotop();
// }, []);
return ( return (
<div className="text-center wow fadeInUp"> <div className="text-center wow fadeInUp relative">
{/* <div className="row">
<div className="flex align-items-center justify-center wow fadeInUp">
<GoogleReviewsBlock />
</div>
</div> */}
<Suspense fallback={<GoogleReviewsSkeleton />}> <Suspense fallback={<GoogleReviewsSkeleton />}>
<GoogleReviewsBlock /> <GoogleReviewsBlock />
</Suspense> </Suspense>

9
src/services/payload/contact.ts
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;
} }