dev #7
@ -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>
|
||||
|
||||
@ -17,8 +17,8 @@ export interface GoogleReviewProps {
|
||||
export function GoogleReviews({ data }: GoogleReviewProps) {
|
||||
return (
|
||||
<section className="bg-scroll relative">
|
||||
<div className="decoration-14" />
|
||||
<div className="decoration-15" />
|
||||
{/* <div className="decoration-14" />
|
||||
<div className="decoration-15" /> */}
|
||||
<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} />
|
||||
</div>
|
||||
@ -29,12 +29,12 @@ export function GoogleReviews({ data }: GoogleReviewProps) {
|
||||
<div className="container px-6">
|
||||
<h2 className="text-3xl font-bold text-center">Reviews</h2>
|
||||
|
||||
<div className="flex justify-center space-x-2">
|
||||
<h2 className="text-xl text-center font-bol">{data.ratingValue}</h2>
|
||||
<div className="flex justify-center items-center space-x-2">
|
||||
<h2 className="text-xl text-center font-bol mt-[15px]">{data.ratingValue}</h2>
|
||||
<div className="mt-1">
|
||||
<StarRating size={20} value={data.ratingValue} />
|
||||
</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 className="mt-20 relative">
|
||||
|
||||
@ -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>
|
||||
);
|
||||
}
|
||||
|
||||
@ -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"
|
||||
|
||||
@ -2,6 +2,7 @@ import Image from "next/image";
|
||||
import Link from "next/link";
|
||||
import About from "./About";
|
||||
import Contact from "./Contacts/Contact";
|
||||
import Testimonials from "./Testimonials";
|
||||
|
||||
export default function homepage({ dark = false }) {
|
||||
return (
|
||||
@ -37,44 +38,44 @@ 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="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>
|
||||
<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="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"></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="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"></div>
|
||||
<p className="text-[36px] text-center px-4 m-0 absolute text-white font-medium tracking-tight leading-10">
|
||||
Skin Cancer
|
||||
</p>
|
||||
</div>
|
||||
</Link>
|
||||
</div>
|
||||
</section>
|
||||
{/* <section className="mb-5 w-full">
|
||||
<section className="py-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>
|
||||
<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
|
||||
|
||||
@ -3,31 +3,8 @@ import { GoogleReviewsBlock } from "./Blocks/GoogleReviews";
|
||||
import { GoogleReviewsSkeleton } from "./Blocks/GoogleReviews/GoogleReviews";
|
||||
|
||||
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 (
|
||||
<div className="text-center wow fadeInUp">
|
||||
{/* <div className="row">
|
||||
<div className="flex align-items-center justify-center wow fadeInUp">
|
||||
<GoogleReviewsBlock />
|
||||
</div>
|
||||
</div> */}
|
||||
<div className="text-center wow fadeInUp relative">
|
||||
<Suspense fallback={<GoogleReviewsSkeleton />}>
|
||||
<GoogleReviewsBlock />
|
||||
</Suspense>
|
||||
|
||||
@ -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;
|
||||
}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user