Compare commits
5 Commits
88e0c623cf
...
02e1010859
| Author | SHA1 | Date | |
|---|---|---|---|
| 02e1010859 | |||
| c54e7b425c | |||
| fe3292f659 | |||
| 56c2571329 | |||
| ffa66c09ec |
@ -38,11 +38,10 @@ export default async function ContactPage() {
|
||||
</section>
|
||||
|
||||
<section className="page-section scrollSpysection" id="contact">
|
||||
<Contact>
|
||||
<Contact />
|
||||
<Suspense fallback={<></>}>
|
||||
<ContactForm />
|
||||
</Suspense>
|
||||
</Contact>
|
||||
</section>
|
||||
</>
|
||||
);
|
||||
|
||||
@ -1,18 +1,18 @@
|
||||
// "use client";
|
||||
import Hero6 from "@/components/Hero";
|
||||
import Hero from "@/components/Hero";
|
||||
|
||||
// const ParallaxContainer = dynamic(() => import("@/components/ParallaxContainer"), {
|
||||
// ssr: false,
|
||||
// });
|
||||
|
||||
export default function Home1BGVideoMultiPage() {
|
||||
export default function HomeBgVideo() {
|
||||
return (
|
||||
<>
|
||||
<div className="theme-main">
|
||||
<div className="page" id="top">
|
||||
<main id="main">
|
||||
<div className="home-section bg-dark-1 bg-dark-alpha-60 light-content parallax-5 bg-[url(/assets/images/full-width-images/section-bg-13.jpeg)]">
|
||||
<Hero6 />
|
||||
<Hero />
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
|
||||
39
src/app/(main)/not-found.tsx
Normal file
39
src/app/(main)/not-found.tsx
Normal file
@ -0,0 +1,39 @@
|
||||
"use client";
|
||||
import Link from "next/link";
|
||||
|
||||
export default function NotFound() {
|
||||
return (
|
||||
<section
|
||||
className="home-section bg-dark-1 bg-dark-alpha-60 light-content parallax-5"
|
||||
style={{
|
||||
backgroundImage: "url(/assets/images/full-width-images/section-bg-13.jpeg)",
|
||||
}}
|
||||
id="home"
|
||||
>
|
||||
<div className="container min-height-100vh d-flex align-items-center pt-100 pb-100 pt-sm-120 pb-sm-120">
|
||||
{/* Home Section Content */}
|
||||
<div className="home-content">
|
||||
<div className="row">
|
||||
<div className="col-sm-10 offset-sm-1 col-md-8 offset-md-2 col-lg-6 offset-lg-3">
|
||||
<div className="hs-wrap">
|
||||
<div className="wow fadeInUp" data-wow-delay=".1s">
|
||||
<h1 className="hs-title-12 mb-40 mb-sm-30">404</h1>
|
||||
</div>
|
||||
<div className="mb-40 mb-sm-30 wow fadeInUp" data-wow-delay=".2s">
|
||||
<h2 className="section-descr mb-20">The page you were looking for could not be found.</h2>
|
||||
</div>
|
||||
<div className="local-scroll wow fadeInUp" data-wow-delay=".3s">
|
||||
<Link href={`/`} className="btn btn-mod btn-w btn-round btn-medium btn-hover-anim">
|
||||
<i className="mi-arrow-left align-center mr-5" />
|
||||
<span>Back To Home Page</span>
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/* End Home Section Content */}
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
@ -1,54 +0,0 @@
|
||||
"use client";
|
||||
import React, { useState, useRef } from "react";
|
||||
import Link from "next/link";
|
||||
|
||||
export default function AboutDropdown() {
|
||||
// State to manage dropdown visibility
|
||||
const [isDropdownOpen, setIsDropdownOpen] = useState(false);
|
||||
|
||||
const dropdownRef = useRef(null);
|
||||
|
||||
// Toggle dropdown visibility
|
||||
const toggleDropdown = () => {
|
||||
setIsDropdownOpen(!isDropdownOpen);
|
||||
};
|
||||
|
||||
return (
|
||||
<li className="relative group">
|
||||
<a
|
||||
href="#"
|
||||
className="mn-has-sub opacity-1 text-black hover:text-purple-700 font-semibold px-4 py-2 flex items-center"
|
||||
onClick={(e) => {
|
||||
e.preventDefault();
|
||||
toggleDropdown();
|
||||
}}
|
||||
>
|
||||
About <i className="ml-1 mi-chevron-down" />
|
||||
</a>
|
||||
|
||||
{/* Dropdown menu with sliding effect */}
|
||||
<ul
|
||||
className={`absolute left-0 mt-2 w-56 bg-white shadow-lg rounded-md border border-gray-300 transition-all duration-300 ${
|
||||
isDropdownOpen ? "opacity-100 visible scale-100" : "opacity-0 invisible scale-95"
|
||||
}`}
|
||||
ref={dropdownRef}
|
||||
>
|
||||
<li className="group relative">
|
||||
<Link href="/oncology-center" className="block px-4 py-2 text-purple-700 hover:bg-gray-200">
|
||||
Our Oncology Center
|
||||
</Link>
|
||||
</li>
|
||||
<li className="group relative">
|
||||
<Link href="/staff" className="block px-4 py-2 text-black hover:bg-gray-200">
|
||||
Our Staff
|
||||
</Link>
|
||||
</li>
|
||||
<li className="group relative">
|
||||
<Link href="/announcements" className="block px-4 py-2 text-black hover:bg-gray-200">
|
||||
Announcements
|
||||
</Link>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
);
|
||||
}
|
||||
@ -1,84 +0,0 @@
|
||||
import Image from "next/image";
|
||||
|
||||
export const metadata = {
|
||||
title: "Slick About Dark || Cochise Oncology",
|
||||
description: "Cochise Oncology",
|
||||
};
|
||||
const dark = true;
|
||||
export default function SlickAboutPageDark() {
|
||||
return (
|
||||
<>
|
||||
<section
|
||||
className="page-section bg-dark-1 bg-gradient-gray-dark-1 light-content bg-scroll overflow-hidden"
|
||||
id="home"
|
||||
>
|
||||
{/* <!-- Background Shape --> */}
|
||||
<div className="bg-shape-1 opacity-003">
|
||||
<Image src="/assets/adobstock-example.webp" width={1443} height={844} alt="" />
|
||||
</div>
|
||||
{/* <!-- End Background Shape --> */}
|
||||
|
||||
<div className="container position-relative pt-sm-40 text-center">
|
||||
<div className="row">
|
||||
<div className="col-md-10 offset-md-1 col-lg-8 offset-lg-2">
|
||||
<h1 className="hs-title-10 mb-10 wow fadeInUp">Our Oncology Center</h1>
|
||||
|
||||
{/* <p className="section-descr mb-0 wow fadeInUp" data-wow-delay="0.2s">
|
||||
Crafting immersive digital journeys for brands.
|
||||
</p> */}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
{/* <section className="page-section bg-white"> */}
|
||||
<section className="page-section text-center bg-white py16 scrollSpysection" id="about">
|
||||
<div className="container position-relative text-center">
|
||||
<div className="row">
|
||||
<div className="col-md-10 offset-md-1 col-lg-8 offset-lg-2">
|
||||
<h2 className="section-title mb-20">Our Commitment to Excellence</h2>
|
||||
<p className="text-gray">
|
||||
Get compassionate care and excellent medical services from COCHISE ONCOLOGY in Sierra Vista, Arizona. We
|
||||
offer a multidisciplinary approach to cancer care with multiple physicians who work together to guide
|
||||
each patient through diagnosis, treatment, and recovery. Our services cover radiation, chemotherapy,
|
||||
immunotherapy, hematology, and infusion services.
|
||||
</p>
|
||||
|
||||
<p className="text-gray">
|
||||
Cochise Oncology’s professional staff works hard to ensure a positive experience throughout the entire
|
||||
course of treatment. While we are best known for our leading-edge cancer therapies, we take particular
|
||||
pride in compassion and dedication to our doctors and entire staff. Excellence in patient care on every
|
||||
level is our commitment.
|
||||
</p>
|
||||
|
||||
<p className="text-gray">
|
||||
Here at Cochise Oncology, we offer the most up-to-date technology in cancer treatment that rivals the
|
||||
largest and most prestigious centers in the country.
|
||||
</p>
|
||||
|
||||
<p className="text-gray">We go the extra mile to address the needs of our patients.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section
|
||||
className={`page-section text-white text-center py16 scrollSpysection ${dark ? "bg-dark-1 light-content" : "bg-light-alpha-90"} bg-scroll`}
|
||||
id="about"
|
||||
>
|
||||
<div className="container mx-auto px-6">
|
||||
<h2 className="text-3xl font-bold mb-4">Begin your path to healing with Cochise Oncology</h2>
|
||||
<p className="text-lg mb-6">
|
||||
Our dedicated team in Sierra Vista, AZ is here to support you with hope, strength, and courage. We offer
|
||||
personalized cancer care using innovative treatments in our state-of-the-art facility. Take the first step
|
||||
towards comprehensive, patient-focused treatment by scheduling a consultation. Let us listen to your needs,
|
||||
answer your questions, and create a tailored plan for your journey. Fill out our form to connect with our
|
||||
compassionate experts and discover how Cochise Oncology can stand with you in your fight against cancer.
|
||||
</p>
|
||||
<a href="#" className="bg-purple-600 hover:bg-purple-700 text-white py-3 px-6 rounded-lg text-lg">
|
||||
Get Started →
|
||||
</a>
|
||||
</div>
|
||||
</section>
|
||||
</>
|
||||
);
|
||||
}
|
||||
@ -1,226 +0,0 @@
|
||||
import Facts from "@/components/Facts";
|
||||
import Testimonials from "@/components/Testimonials";
|
||||
import TestimonialsDark from "@/components/TestimonialsDark";
|
||||
import { features4 } from "@/data/features";
|
||||
import Image from "next/image";
|
||||
import Link from "next/link";
|
||||
|
||||
export const metadata = {
|
||||
title: "Slick About Dark || Cochise Oncology",
|
||||
description: "Cochise Oncology",
|
||||
};
|
||||
const dark = true;
|
||||
export default function SlickAboutPageDark() {
|
||||
return (
|
||||
<>
|
||||
<section
|
||||
className="page-section bg-dark-1 bg-gradient-gray-dark-1 light-content bg-scroll overflow-hidden"
|
||||
id="home"
|
||||
>
|
||||
{/* <!-- Background Shape --> */}
|
||||
<div className="bg-shape-1 opacity-003">
|
||||
<Image src="/assets/adobstock-example.webp" width={1443} height={844} alt="" />
|
||||
</div>
|
||||
{/* <!-- End Background Shape --> */}
|
||||
|
||||
<div className="container position-relative pt-sm-40 text-center">
|
||||
<div className="row">
|
||||
<div className="col-md-10 offset-md-1 col-lg-8 offset-lg-2">
|
||||
<h1 className="hs-title-10 mb-10 wow fadeInUp">Our Oncology Center</h1>
|
||||
|
||||
{/* <p className="section-descr mb-0 wow fadeInUp" data-wow-delay="0.2s">
|
||||
Crafting immersive digital journeys for brands.
|
||||
</p> */}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
{/* <section className="page-section bg-white"> */}
|
||||
<section className="page-section text-center bg-white py16 scrollSpysection" id="about">
|
||||
<div className="container position-relative text-center">
|
||||
<div className="row">
|
||||
<div className="col-md-10 offset-md-1 col-lg-8 offset-lg-2">
|
||||
<h2 className="section-title mb-20">Our Commitment to Excellence</h2>
|
||||
<p className="text-gray">
|
||||
Get compassionate care and excellent medical services from COCHISE ONCOLOGY in Sierra Vista, Arizona. We
|
||||
offer a multidisciplinary approach to cancer care with multiple physicians who work together to guide
|
||||
each patient through diagnosis, treatment, and recovery. Our services cover radiation, chemotherapy,
|
||||
immunotherapy, hematology, and infusion services.
|
||||
</p>
|
||||
|
||||
<p className="text-gray">
|
||||
Cochise Oncology’s professional staff works hard to ensure a positive experience throughout the entire
|
||||
course of treatment. While we are best known for our leading-edge cancer therapies, we take particular
|
||||
pride in compassion and dedication to our doctors and entire staff. Excellence in patient care on every
|
||||
level is our commitment.
|
||||
</p>
|
||||
|
||||
<p className="text-gray">
|
||||
Here at Cochise Oncology, we offer the most up-to-date technology in cancer treatment that rivals the
|
||||
largest and most prestigious centers in the country.
|
||||
</p>
|
||||
|
||||
<p className="text-gray">We go the extra mile to address the needs of our patients.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section
|
||||
className={`page-section text-white text-center py16 scrollSpysection ${dark ? "bg-dark-1 light-content" : "bg-light-alpha-90"} bg-scroll`}
|
||||
id="about"
|
||||
>
|
||||
<div className="container mx-auto px-6">
|
||||
<h2 className="text-3xl font-bold mb-4">Begin your path to healing with Cochise Oncology</h2>
|
||||
<p className="text-lg mb-6">
|
||||
Our dedicated team in Sierra Vista, AZ is here to support you with hope, strength, and courage. We offer
|
||||
personalized cancer care using innovative treatments in our state-of-the-art facility. Take the first step
|
||||
towards comprehensive, patient-focused treatment by scheduling a consultation. Let us listen to your needs,
|
||||
answer your questions, and create a tailored plan for your journey. Fill out our form to connect with our
|
||||
compassionate experts and discover how Cochise Oncology can stand with you in your fight against cancer.
|
||||
</p>
|
||||
<a href="#" className="bg-purple-600 hover:bg-purple-700 text-white py-3 px-6 rounded-lg text-lg">
|
||||
Get Started →
|
||||
</a>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section className={`page-section scrollSpysection ${dark ? "bg-dark-1 light-content" : ""} `} id="about">
|
||||
<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 className="w-100 wow fadeInUp">
|
||||
<h2 className="section-caption-slick mb-30 mb-sm-20">Our Story</h2>
|
||||
<h3 className="section-title mb-30">We believe in creatives with a passion to smart design.</h3>
|
||||
<p className="text-gray mb-40">
|
||||
Etiam fermentum vehicula faucibus. Praesent ullamcorper urna id arcu molestie scelerisque. Sed
|
||||
imperdiet tristique mauris et faucibus. Maecenas semper augue non fringilla placerat. Curabitur luctus
|
||||
erat sit amet ultricies aliquam. Donec dictum convallis mauris et maximus. Nullam massa arcu, porta
|
||||
quis felis et, eleifend varius quam.
|
||||
</p>
|
||||
{/* Features List */}
|
||||
<div className="row features-list mt-n20 mb-50 mb-sm-30">
|
||||
{/* Features List Item */}
|
||||
{features4.map((feature, index) => (
|
||||
<div key={index} className="col-sm-6 col-lg-12 col-xl-6 d-flex mt-20">
|
||||
<div className="features-list-icon">
|
||||
<i className="mi-check" />
|
||||
</div>
|
||||
<div className="features-list-text">{feature.text}</div>
|
||||
</div>
|
||||
))}
|
||||
{/* End Features List Item */}
|
||||
</div>
|
||||
{/* End Features List */}
|
||||
<div className="local-scroll wch-unset">
|
||||
<Link
|
||||
href={`/slick-contact${dark ? "-dark" : ""}`}
|
||||
className="btn btn-mod btn-color btn-large btn-circle btn-hover-anim mb-xs-10"
|
||||
>
|
||||
<span>Start a project</span>
|
||||
</Link>
|
||||
|
||||
<Link
|
||||
href={`/slick-about${dark ? "-dark" : ""}`}
|
||||
className="link-hover-anim ms-2 ms-sm-5 me-2"
|
||||
data-link-animate="y"
|
||||
>
|
||||
<span className="link-strong link-strong-unhovered">
|
||||
Learn more <i className="mi-arrow-right size-24" aria-hidden="true"></i>
|
||||
</span>
|
||||
<span className="link-strong link-strong-hovered" aria-hidden="true">
|
||||
Learn more <i className="mi-arrow-right size-24" aria-hidden="true"></i>
|
||||
</span>
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/* End Section Text */}
|
||||
{/* Image */}
|
||||
<div className="col-lg-6 d-flex align-items-center">
|
||||
<div className="w-100 pe-lg-5">
|
||||
<div className="composition-5">
|
||||
<div className="composition-5-decoration opacity-065">
|
||||
<Image src="/assets/images/demo-slick/decoration-1.svg" alt="" width={228} height={228} />
|
||||
</div>
|
||||
<div className="composition-5-image-1">
|
||||
<div className="composition-5-image-1-inner">
|
||||
<Image
|
||||
src="/assets/images/demo-slick/hs-image-3.jpg"
|
||||
alt="Image Description"
|
||||
width={850}
|
||||
height={914}
|
||||
className="wow scaleOutIn"
|
||||
data-wow-offset={200}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div className="composition-5-image-2">
|
||||
<div className="composition-5-image-2-inner">
|
||||
<Image
|
||||
src="/assets/images/demo-slick/hs-image-4.jpg"
|
||||
alt="Image Description"
|
||||
width={400}
|
||||
height={400}
|
||||
className="wow scaleOutIn"
|
||||
data-wow-offset={0}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/* End Images */}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<section
|
||||
className={`page-section ${dark ? "bg-dark-1 bg-dark-alpha light-content" : "bg-light-alpha-90"} bg-scroll`}
|
||||
style={{
|
||||
backgroundImage: "url(/assets/images/demo-slick/section-bg-1.jpg)",
|
||||
}}
|
||||
>
|
||||
<Facts />
|
||||
</section>
|
||||
<section className={`page-section ${dark ? "bg-dark-1 light-content" : ""} `}>
|
||||
{dark ? <TestimonialsDark /> : <Testimonials />}
|
||||
</section>
|
||||
<section className="page-section pt-0">
|
||||
<div className="container">
|
||||
<div
|
||||
className={`small-section ${
|
||||
dark ? "bg-dark-2 light-content" : "bg-gray-light-1"
|
||||
} ps-4 ps-lg-0 pe-4 pe-lg-0 round position-relative overflow-hidden`}
|
||||
>
|
||||
{/* Decoration Circles */}
|
||||
<div className="decoration-12" />
|
||||
<div className="decoration-13" />
|
||||
{/* End Decoration Circles */}
|
||||
<div className="row">
|
||||
<div className="col-lg-10 offset-lg-1 col-xl-8 offset-xl-2">
|
||||
<div className="row">
|
||||
<div className="col-md-7 col-lg-8 text-center text-md-start mb-sm-20">
|
||||
<h2 className="section-title-small mb-20">Like our creative works?</h2>
|
||||
<p className="text-gray mb-0">
|
||||
Quisque posuere mollis ullamcorper. Ut eget metus lorem ipsum posuere eget at ex. Aenean consequat
|
||||
vitae lorem in vehicula.
|
||||
</p>
|
||||
</div>
|
||||
<div className="col-md-5 col-lg-4 text-center text-md-end pt-2">
|
||||
<Link
|
||||
href={`/slick-portfolio${dark ? "-dark" : ""}`}
|
||||
className="btn btn-mod btn-color btn-large btn-circle btn-hover-anim"
|
||||
>
|
||||
<span>View all works</span>
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</>
|
||||
);
|
||||
}
|
||||
@ -1,174 +0,0 @@
|
||||
import Facts from "@/components/Facts";
|
||||
import Testimonials from "@/components/Testimonials";
|
||||
import TestimonialsDark from "@/components/TestimonialsDark";
|
||||
import { features4 } from "@/data/features";
|
||||
import Image from "next/image";
|
||||
import Link from "next/link";
|
||||
|
||||
export const metadata = {
|
||||
title: "Slick About || Cochise Oncology",
|
||||
description: "Cochise Oncology",
|
||||
};
|
||||
|
||||
const dark = false;
|
||||
export default function SlickAboutPage() {
|
||||
return (
|
||||
<>
|
||||
<section className="page-section bg-gradient-gray-light-1 bg-scroll overflow-hidden" id="home">
|
||||
{/* <!-- Background Shape --> */}
|
||||
<div className="bg-shape-1 wow fadeIn">
|
||||
<Image src="/assets/images/demo-fancy/bg-shape-1.svg" width={1443} height={844} alt="" />
|
||||
</div>
|
||||
{/* <!-- End Background Shape --> */}
|
||||
|
||||
<div className="container position-relative pt-sm-40 text-center">
|
||||
<div className="row">
|
||||
<div className="col-md-10 offset-md-1 col-lg-8 offset-lg-2">
|
||||
<h1 className="hs-title-10 mb-10 wow fadeInUp">About Studio</h1>
|
||||
|
||||
<p className="section-descr mb-0 wow fadeInUp" data-wow-delay="0.2s">
|
||||
Crafting immersive digital journeys for brands.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<section className={`page-section scrollSpysection ${dark ? "bg-dark-1 light-content" : ""} `} id="about">
|
||||
<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 className="w-100 wow fadeInUp">
|
||||
<h2 className="section-caption-slick mb-30 mb-sm-20">Our Story</h2>
|
||||
<h3 className="section-title mb-30">We believe in creatives with a passion to smart design.</h3>
|
||||
<p className="text-gray mb-40">
|
||||
Etiam fermentum vehicula faucibus. Praesent ullamcorper urna id arcu molestie scelerisque. Sed
|
||||
imperdiet tristique mauris et faucibus. Maecenas semper augue non fringilla placerat. Curabitur luctus
|
||||
erat sit amet ultricies aliquam. Donec dictum convallis mauris et maximus. Nullam massa arcu, porta
|
||||
quis felis et, eleifend varius quam.
|
||||
</p>
|
||||
{/* Features List */}
|
||||
<div className="row features-list mt-n20 mb-50 mb-sm-30">
|
||||
{/* Features List Item */}
|
||||
{features4.map((feature, index) => (
|
||||
<div key={index} className="col-sm-6 col-lg-12 col-xl-6 d-flex mt-20">
|
||||
<div className="features-list-icon">
|
||||
<i className="mi-check" />
|
||||
</div>
|
||||
<div className="features-list-text">{feature.text}</div>
|
||||
</div>
|
||||
))}
|
||||
{/* End Features List Item */}
|
||||
</div>
|
||||
{/* End Features List */}
|
||||
<div className="local-scroll wch-unset">
|
||||
<Link
|
||||
href={`/slick-contact${dark ? "-dark" : ""}`}
|
||||
className="btn btn-mod btn-color btn-large btn-circle btn-hover-anim mb-xs-10"
|
||||
>
|
||||
<span>Start a project</span>
|
||||
</Link>
|
||||
|
||||
<Link
|
||||
href={`/slick-about${dark ? "-dark" : ""}`}
|
||||
className="link-hover-anim ms-2 ms-sm-5 me-2"
|
||||
data-link-animate="y"
|
||||
>
|
||||
<span className="link-strong link-strong-unhovered">
|
||||
Learn more <i className="mi-arrow-right size-24" aria-hidden="true"></i>
|
||||
</span>
|
||||
<span className="link-strong link-strong-hovered" aria-hidden="true">
|
||||
Learn more <i className="mi-arrow-right size-24" aria-hidden="true"></i>
|
||||
</span>
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/* End Section Text */}
|
||||
{/* Image */}
|
||||
<div className="col-lg-6 d-flex align-items-center">
|
||||
<div className="w-100 pe-lg-5">
|
||||
<div className="composition-5">
|
||||
<div className="composition-5-decoration opacity-065">
|
||||
<Image src="/assets/images/demo-slick/decoration-1.svg" alt="" width={228} height={228} />
|
||||
</div>
|
||||
<div className="composition-5-image-1">
|
||||
<div className="composition-5-image-1-inner">
|
||||
<Image
|
||||
src="/assets/images/demo-slick/hs-image-3.jpg"
|
||||
alt="Image Description"
|
||||
width={850}
|
||||
height={914}
|
||||
className="wow scaleOutIn"
|
||||
data-wow-offset={200}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div className="composition-5-image-2">
|
||||
<div className="composition-5-image-2-inner">
|
||||
<Image
|
||||
src="/assets/images/demo-slick/hs-image-4.jpg"
|
||||
alt="Image Description"
|
||||
width={400}
|
||||
height={400}
|
||||
className="wow scaleOutIn"
|
||||
data-wow-offset={0}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/* End Images */}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<section
|
||||
className={`page-section ${dark ? "bg-dark-1 bg-dark-alpha light-content" : "bg-light-alpha-90"} bg-scroll`}
|
||||
style={{
|
||||
backgroundImage: "url(/assets/images/demo-slick/section-bg-1.jpg)",
|
||||
}}
|
||||
>
|
||||
<Facts />
|
||||
</section>
|
||||
<section className={`page-section ${dark ? "bg-dark-1 light-content" : ""} `}>
|
||||
{dark ? <TestimonialsDark /> : <Testimonials />}
|
||||
</section>
|
||||
<section className="page-section pt-0">
|
||||
<div className="container">
|
||||
<div
|
||||
className={`small-section ${
|
||||
dark ? "bg-dark-2 light-content" : "bg-gray-light-1"
|
||||
} ps-4 ps-lg-0 pe-4 pe-lg-0 round position-relative overflow-hidden`}
|
||||
>
|
||||
{/* Decoration Circles */}
|
||||
<div className="decoration-12" />
|
||||
<div className="decoration-13" />
|
||||
{/* End Decoration Circles */}
|
||||
<div className="row">
|
||||
<div className="col-lg-10 offset-lg-1 col-xl-8 offset-xl-2">
|
||||
<div className="row">
|
||||
<div className="col-md-7 col-lg-8 text-center text-md-start mb-sm-20">
|
||||
<h2 className="section-title-small mb-20">Like our creative works?</h2>
|
||||
<p className="text-gray mb-0">
|
||||
Quisque posuere mollis ullamcorper. Ut eget metus lorem ipsum posuere eget at ex. Aenean consequat
|
||||
vitae lorem in vehicula.
|
||||
</p>
|
||||
</div>
|
||||
<div className="col-md-5 col-lg-4 text-center text-md-end pt-2">
|
||||
<Link
|
||||
href={`/slick-portfolio${dark ? "-dark" : ""}`}
|
||||
className="btn btn-mod btn-color btn-large btn-circle btn-hover-anim"
|
||||
>
|
||||
<span>View all works</span>
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</>
|
||||
);
|
||||
}
|
||||
@ -1,76 +0,0 @@
|
||||
import Portfolio from "@/components/Portfolio";
|
||||
|
||||
import Image from "next/image";
|
||||
import Link from "next/link";
|
||||
|
||||
export const metadata = {
|
||||
title: "Slick Portfolio || Cochise Oncology",
|
||||
description: "Cochise Oncology",
|
||||
};
|
||||
const dark = false;
|
||||
export default function SlickPortfolioPage() {
|
||||
return (
|
||||
<>
|
||||
<section className="page-section bg-gradient-gray-light-1 bg-scroll overflow-hidden" id="home">
|
||||
{/* <!-- Background Shape --> */}
|
||||
<div className="bg-shape-1 wow fadeIn">
|
||||
<Image src="/assets/images/demo-fancy/bg-shape-1.svg" width={1443} height={844} alt="" />
|
||||
</div>
|
||||
{/* <!-- End Background Shape --> */}
|
||||
|
||||
<div className="container position-relative pt-sm-40 text-center">
|
||||
<div className="row">
|
||||
<div className="col-md-10 offset-md-1 col-lg-8 offset-lg-2">
|
||||
<h1 className="hs-title-10 mb-10 wow fadeInUp">Portfolio</h1>
|
||||
|
||||
<p className="section-descr mb-0 wow fadeInUp" data-wow-delay="0.2s">
|
||||
Explore captivating web design solutions.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<section className={`page-section scrollSpysection ${dark ? "bg-dark-1 light-content" : ""} `} id="portfolio">
|
||||
<div className="container position-relative">
|
||||
<Portfolio />
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section className="page-section pt-0">
|
||||
<div className="container">
|
||||
<div
|
||||
className={`small-section ${
|
||||
dark ? "bg-dark-2 light-content" : "bg-gray-light-1"
|
||||
} ps-4 ps-lg-0 pe-4 pe-lg-0 round position-relative overflow-hidden`}
|
||||
>
|
||||
{/* Decoration Circles */}
|
||||
<div className="decoration-12" />
|
||||
<div className="decoration-13" />
|
||||
{/* End Decoration Circles */}
|
||||
<div className="row">
|
||||
<div className="col-lg-10 offset-lg-1 col-xl-8 offset-xl-2">
|
||||
<div className="row">
|
||||
<div className="col-md-7 col-lg-8 text-center text-md-start mb-sm-20">
|
||||
<h2 className="section-title-small mb-20">Like our creative works?</h2>
|
||||
<p className="text-gray mb-0">
|
||||
Quisque posuere mollis ullamcorper. Ut eget metus lorem ipsum posuere eget at ex. Aenean consequat
|
||||
vitae lorem in vehicula.
|
||||
</p>
|
||||
</div>
|
||||
<div className="col-md-5 col-lg-4 text-center text-md-end pt-2">
|
||||
<Link
|
||||
href={`/slick-portfolio${dark ? "-dark" : ""}`}
|
||||
className="btn btn-mod btn-color btn-large btn-circle btn-hover-anim"
|
||||
>
|
||||
<span>View all works</span>
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</>
|
||||
);
|
||||
}
|
||||
@ -1,191 +0,0 @@
|
||||
import Features from "@/components/Features";
|
||||
import Service from "@/components/Service";
|
||||
|
||||
import Image from "next/image";
|
||||
import Link from "next/link";
|
||||
|
||||
export const metadata = {
|
||||
title: "Slick Services || Cochise Oncology",
|
||||
description: "Cochise Oncology",
|
||||
};
|
||||
|
||||
const dark = false;
|
||||
export default function SlickServicesPage() {
|
||||
return (
|
||||
<>
|
||||
<section className="page-section bg-gradient-gray-light-1 bg-scroll overflow-hidden" id="home">
|
||||
{/* <!-- Background Shape --> */}
|
||||
<div className="bg-shape-1 wow fadeIn">
|
||||
<Image src="/assets/images/demo-fancy/bg-shape-1.svg" width={1443} height={844} alt="" />
|
||||
</div>
|
||||
{/* <!-- End Background Shape --> */}
|
||||
|
||||
<div className="container position-relative pt-sm-40 text-center">
|
||||
<div className="row">
|
||||
<div className="col-md-10 offset-md-1 col-lg-8 offset-lg-2">
|
||||
<h1 className="hs-title-10 mb-10 wow fadeInUp">Our Services</h1>
|
||||
|
||||
<p className="section-descr mb-0 wow fadeInUp" data-wow-delay="0.2s">
|
||||
Web design that leaves an impression.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<section className={`page-section scrollSpysection ${dark ? "bg-dark-1 light-content" : ""} `} id="services">
|
||||
<div className="container position-relative">
|
||||
<div className="row">
|
||||
{/* Left Column */}
|
||||
<div className="col-lg-5 mb-md-60 mb-sm-40">
|
||||
<h2 className="section-caption-slick mb-30 mb-sm-20">WHAT WE DO</h2>
|
||||
<h3 className="section-title mb-30">We provide the best development solutions.</h3>
|
||||
<p className="section-descr mb-50 mb-sm-40">
|
||||
The power of design help us to solve complex problems and cultivate business solutions.
|
||||
</p>
|
||||
<div className="local-scroll">
|
||||
<Link
|
||||
href={`/slick-contact${dark ? "-dark" : ""}`}
|
||||
className="btn btn-mod btn-color btn-large btn-circle btn-hover-anim mb-xs-10"
|
||||
>
|
||||
<span>Request a quote</span>
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
{/* End Left Column */}
|
||||
{/* Right Column */}
|
||||
<Service />
|
||||
{/* End Right Column */}
|
||||
</div>
|
||||
<div className="page-section">
|
||||
<hr className="mt-0 mb-0" />
|
||||
</div>
|
||||
<div className="row mb-50 mb-sm-50">
|
||||
<div className="col-md-10 offset-md-1 col-lg-8 offset-lg-2 col-xl-6 offset-xl-3 text-center">
|
||||
<h2 className="section-title-small mb-20">Why choose Resonance?</h2>
|
||||
<p className="text-gray mb-0">
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et
|
||||
dolore magna aliqua.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
{/* Features Grid */}
|
||||
<Features />
|
||||
{/* End Features Grid */}
|
||||
</div>
|
||||
</section>
|
||||
<hr className={`mt-0 mb-0 ${dark ? "white" : ""} `} />
|
||||
<section className={`page-section ${dark ? "bg-dark-1 light-content" : ""}`}>
|
||||
<div className="container position-relative">
|
||||
<div className="row">
|
||||
{/* Images */}
|
||||
<div className="col-lg-7 d-flex align-items-start mb-md-60 mb-xs-30">
|
||||
<div className="call-action-2-images">
|
||||
<div
|
||||
className="call-action-2-image-1"
|
||||
data-rellax-y=""
|
||||
data-rellax-speed="0.5"
|
||||
data-rellax-percentage="0.7"
|
||||
>
|
||||
<Image
|
||||
width={386}
|
||||
height={400}
|
||||
src="/assets/images/promo-3.jpg"
|
||||
alt="Image Description"
|
||||
className="wow scaleOutIn"
|
||||
data-wow-duration="1.2s"
|
||||
data-wow-offset={255}
|
||||
/>
|
||||
</div>
|
||||
<div className="call-action-2-image-2">
|
||||
<Image
|
||||
width={810}
|
||||
height={512}
|
||||
src="/assets/images/promo-4.jpg"
|
||||
alt="Image Description"
|
||||
className="wow scaleOutIn"
|
||||
data-wow-duration="1.2s"
|
||||
data-wow-offset={134}
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
className="call-action-2-image-3"
|
||||
data-rellax-y=""
|
||||
data-rellax-speed="-0.5"
|
||||
data-rellax-percentage="0.5"
|
||||
>
|
||||
<Image
|
||||
width={386}
|
||||
height={500}
|
||||
src="/assets/images/promo-5.jpg"
|
||||
alt="Image Description"
|
||||
className="wow scaleOutIn"
|
||||
data-wow-duration="1.2s"
|
||||
data-wow-offset={0}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/* End Images */}
|
||||
{/* Text */}
|
||||
<div className="col-lg-5 d-flex align-items-center">
|
||||
<div className="wow fadeInUp" data-wow-duration="1.2s" data-wow-offset="255">
|
||||
<h2 className="section-caption-slick mb-30 mb-sm-20">How we work?</h2>
|
||||
|
||||
<h2 className="section-title mb-30">Get the power of the professional services</h2>
|
||||
|
||||
<p className="text-gray">
|
||||
Pellentesque ultrices purus sit amet velit eleifend, eu iaculis velit malesuada. Proin id mattis elit.
|
||||
Nullam a nisi tellus. Mauris rhoncus diam in sem maximus, nec luctus justo imperdiet. Etiam fermentum
|
||||
vehicula faucibus.
|
||||
</p>
|
||||
|
||||
<p className="text-gray mb-0">
|
||||
Praesent ullamcorper urna id arcu molestie scelerisque. Sed imperdiet tristique mauris et faucibus.
|
||||
Maecenas semper augue non fringilla placerat. Curabitur luctus erat sit amet ultricies aliquam. Donec
|
||||
dictum convallis mauris et maximus. Nullam massa arcu, porta quis felis et, eleifend varius quam.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
{/* End Text */}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section className="page-section pt-0">
|
||||
<div className="container">
|
||||
<div
|
||||
className={`small-section ${
|
||||
dark ? "bg-dark-2 light-content" : "bg-gray-light-1"
|
||||
} ps-4 ps-lg-0 pe-4 pe-lg-0 round position-relative overflow-hidden`}
|
||||
>
|
||||
{/* Decoration Circles */}
|
||||
<div className="decoration-12" />
|
||||
<div className="decoration-13" />
|
||||
{/* End Decoration Circles */}
|
||||
<div className="row">
|
||||
<div className="col-lg-10 offset-lg-1 col-xl-8 offset-xl-2">
|
||||
<div className="row">
|
||||
<div className="col-md-7 col-lg-8 text-center text-md-start mb-sm-20">
|
||||
<h2 className="section-title-small mb-20">Like our creative works?</h2>
|
||||
<p className="text-gray mb-0">
|
||||
Quisque posuere mollis ullamcorper. Ut eget metus lorem ipsum posuere eget at ex. Aenean consequat
|
||||
vitae lorem in vehicula.
|
||||
</p>
|
||||
</div>
|
||||
<div className="col-md-5 col-lg-4 text-center text-md-end pt-2">
|
||||
<Link
|
||||
href={`/slick-portfolio${dark ? "-dark" : ""}`}
|
||||
className="btn btn-mod btn-color btn-large btn-circle btn-hover-anim"
|
||||
>
|
||||
<span>View all works</span>
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</>
|
||||
);
|
||||
}
|
||||
@ -1,13 +1,15 @@
|
||||
import { BeforeFooterBlock } from "@/components/Blocks/BeforeFooter";
|
||||
import { GoogleReviewsBlock } from "@/components/Blocks/GoogleReviews";
|
||||
import { GoogleReviewsSkeleton } from "@/components/Blocks/GoogleReviews/GoogleReviews";
|
||||
import Image from "next/image";
|
||||
import { Suspense } from "react";
|
||||
|
||||
export const metadata = {
|
||||
title: "Testimonials - Cochise Oncology",
|
||||
description: "Testimonials - Cochise Oncology",
|
||||
};
|
||||
|
||||
export default function SlickAboutPage() {
|
||||
export default async function TestimonialsPage() {
|
||||
return (
|
||||
<>
|
||||
<section className="page-section bg-dark-1 bg-gradient-gray-dark-1 light-content bg-scroll overflow-hidden">
|
||||
@ -26,7 +28,9 @@ export default function SlickAboutPage() {
|
||||
</div>
|
||||
</section>
|
||||
<section className="page-section scrollSpysection" id="testimonials">
|
||||
<Suspense fallback={<GoogleReviewsSkeleton />}>
|
||||
<GoogleReviewsBlock />
|
||||
</Suspense>
|
||||
</section>
|
||||
<BeforeFooterBlock />
|
||||
</>
|
||||
|
||||
@ -1,54 +0,0 @@
|
||||
"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 "@/app/globals.css";
|
||||
import "swiper/css";
|
||||
import "jarallax/dist/jarallax.min.css";
|
||||
import "swiper/css/effect-fade";
|
||||
import "react-modal-video/css/modal-video.css";
|
||||
import "photoswipe/dist/photoswipe.css";
|
||||
import "tippy.js/dist/tippy.css";
|
||||
import "@public/assets/css/styles.css";
|
||||
|
||||
export default function RootLayout({
|
||||
children,
|
||||
}: Readonly<{
|
||||
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 (
|
||||
<html lang="en">
|
||||
<body>{children}</body>
|
||||
</html>
|
||||
);
|
||||
}
|
||||
@ -1,72 +0,0 @@
|
||||
"use client";
|
||||
import Header from "@/components/Header";
|
||||
import { BeforeFooterBlock } from "@/components/Blocks/BeforeFooter";
|
||||
import { navMenuData } from "@/data/menu";
|
||||
import Footer from "@/components/Footer";
|
||||
import Link from "next/link";
|
||||
|
||||
export default function NotFound() {
|
||||
return (
|
||||
<div className="theme-slick">
|
||||
<div className="page" id="top">
|
||||
<nav className="main-nav dark transparent stick-fixed wow-menubar wch-unset">
|
||||
<Header links={navMenuData} />
|
||||
</nav>
|
||||
<main id="main">
|
||||
<div className="theme-main">
|
||||
<div className="page" id="top">
|
||||
<>
|
||||
{/* End Navigation Panel */}
|
||||
<main id="main">
|
||||
{/* Home Section */}
|
||||
<section
|
||||
className="home-section bg-dark-1 bg-dark-alpha-60 light-content parallax-5"
|
||||
style={{
|
||||
backgroundImage: "url(/assets/images/full-width-images/section-bg-13.jpeg)",
|
||||
}}
|
||||
id="home"
|
||||
>
|
||||
<div className="container min-height-100vh d-flex align-items-center pt-100 pb-100 pt-sm-120 pb-sm-120">
|
||||
{/* Home Section Content */}
|
||||
<div className="home-content">
|
||||
<div className="row">
|
||||
<div className="col-sm-10 offset-sm-1 col-md-8 offset-md-2 col-lg-6 offset-lg-3">
|
||||
<div className="hs-wrap">
|
||||
<div className="wow fadeInUp" data-wow-delay=".1s">
|
||||
<h1 className="hs-title-12 mb-40 mb-sm-30">404</h1>
|
||||
</div>
|
||||
<div className="mb-40 mb-sm-30 wow fadeInUp" data-wow-delay=".2s">
|
||||
<h2 className="section-descr mb-20">
|
||||
The page you were looking for could not be found.
|
||||
</h2>
|
||||
</div>
|
||||
<div className="local-scroll wow fadeInUp" data-wow-delay=".3s">
|
||||
<Link href={`/`} className="btn btn-mod btn-w btn-round btn-medium btn-hover-anim">
|
||||
<i className="mi-arrow-left align-center mr-5" />
|
||||
<span>Back To Home Page</span>
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/* End Home Section Content */}
|
||||
</div>
|
||||
</section>
|
||||
{/* End Home Section */}
|
||||
</main>
|
||||
</>
|
||||
</div>
|
||||
</div>
|
||||
<BeforeFooterBlock showLinier={false} />
|
||||
</main>
|
||||
{/* <footer className="page-section dark footer bg-dark-2 light-content position-relative overflow-hidden pb-30">
|
||||
<div className="bg-shape-4 opacity-003">
|
||||
<Image src="/assets/images/demo-slick/bg-shape-4.svg" width={1600} height={268} alt="" />
|
||||
</div> */}
|
||||
<Footer />
|
||||
{/* </footer> */}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@ -1,123 +0,0 @@
|
||||
@use '../shared.scss';
|
||||
|
||||
.select {
|
||||
position: relative;
|
||||
margin-bottom: var(--base);
|
||||
}
|
||||
|
||||
.label {
|
||||
margin-bottom: 10px;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.reactSelect {
|
||||
display: flex;
|
||||
|
||||
:global {
|
||||
div.rs__control {
|
||||
@include shared.formInput;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
.rs__input-container {
|
||||
color: var(--color-black);
|
||||
}
|
||||
|
||||
.rs__value-container {
|
||||
padding: 0;
|
||||
> * {
|
||||
margin-top: 0;
|
||||
margin-bottom: 0;
|
||||
padding-top: 0;
|
||||
padding-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.rs__single-value {
|
||||
color: var(--color-black);
|
||||
}
|
||||
|
||||
.rs__indicators {
|
||||
position: absolute;
|
||||
top: calc(var(--base) * 0.9);
|
||||
right: calc(var(--base) * 0.9);
|
||||
.arrow {
|
||||
transform: rotate(90deg);
|
||||
}
|
||||
}
|
||||
|
||||
.rs__indicator {
|
||||
padding: 0px 4px;
|
||||
cursor: pointer;
|
||||
|
||||
svg path {
|
||||
fill: var(--color-dark-gray);
|
||||
}
|
||||
|
||||
&:hover {
|
||||
svg path {
|
||||
fill: var(--color-dark-gray);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.rs__indicator-separator {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.rs__menu {
|
||||
color: var(--color-black);
|
||||
background-color: var(--color-white);
|
||||
z-index: 2;
|
||||
border-radius: 0;
|
||||
box-shadow: 0 4px 11px hsl(0deg 0% 0% / 10%);
|
||||
}
|
||||
|
||||
.rs__menu-list {
|
||||
padding: calc(var(--base) / 4) 0;
|
||||
}
|
||||
|
||||
.rs__group-heading {
|
||||
margin-bottom: calc(var(--base) / 2);
|
||||
}
|
||||
|
||||
.rs__option {
|
||||
font-size: 1rem;
|
||||
padding: calc(var(--base) / 2) var(--base);
|
||||
|
||||
&--is-focused {
|
||||
background-color: var(--color-light-gray);
|
||||
color: var(--color-black);
|
||||
}
|
||||
|
||||
&--is-selected {
|
||||
background-color: var(--color-light-gray);
|
||||
color: var(--color-black);
|
||||
}
|
||||
}
|
||||
|
||||
.rs__multi-value {
|
||||
padding: 0;
|
||||
background: var(--color-light-gray);
|
||||
}
|
||||
|
||||
.rs__multi-value__label {
|
||||
max-width: 150px;
|
||||
color: var(--color-black);
|
||||
padding: calc(var(--base) / 8) calc(var(--base) / 4);
|
||||
}
|
||||
|
||||
.rs__multi-value__remove {
|
||||
cursor: pointer;
|
||||
|
||||
&:hover {
|
||||
color: var(--color-black);
|
||||
background: var(--color-light-gray);
|
||||
}
|
||||
}
|
||||
|
||||
.rs__clear-indicator {
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -1,50 +0,0 @@
|
||||
import type { CountryField } from "@payloadcms/plugin-form-builder/types";
|
||||
import type { Control, FieldErrorsImpl, FieldValues } from "react-hook-form";
|
||||
|
||||
import React from "react";
|
||||
import { Controller } from "react-hook-form";
|
||||
import ReactSelect from "react-select";
|
||||
|
||||
import { Error } from "../Error";
|
||||
import { Width } from "../Width";
|
||||
import classes from "./index.scss";
|
||||
import { countryOptions } from "./options";
|
||||
|
||||
export const Country: React.FC<
|
||||
{
|
||||
control: Control<FieldValues, any>;
|
||||
errors: Partial<
|
||||
FieldErrorsImpl<{
|
||||
[x: string]: any;
|
||||
}>
|
||||
>;
|
||||
} & CountryField
|
||||
> = ({ name, control, errors, label, required, width }) => {
|
||||
return (
|
||||
<Width width={width}>
|
||||
<div className={classes.select}>
|
||||
<label className={classes.label} htmlFor={name}>
|
||||
{label}
|
||||
</label>
|
||||
<Controller
|
||||
control={control}
|
||||
defaultValue=""
|
||||
name={name}
|
||||
render={({ field: { onChange, value } }) => (
|
||||
<ReactSelect
|
||||
className={classes.reactSelect}
|
||||
classNamePrefix="rs"
|
||||
inputId={name}
|
||||
instanceId={name}
|
||||
onChange={(val) => onChange(val ? val.value : "")}
|
||||
options={countryOptions}
|
||||
value={countryOptions.find((c) => c.value === value)}
|
||||
/>
|
||||
)}
|
||||
rules={{ required }}
|
||||
/>
|
||||
{required && errors[name] && <Error />}
|
||||
</div>
|
||||
</Width>
|
||||
);
|
||||
};
|
||||
@ -1,982 +0,0 @@
|
||||
export const countryOptions = [
|
||||
{
|
||||
label: 'Afghanistan',
|
||||
value: 'AF',
|
||||
},
|
||||
{
|
||||
label: 'Åland Islands',
|
||||
value: 'AX',
|
||||
},
|
||||
{
|
||||
label: 'Albania',
|
||||
value: 'AL',
|
||||
},
|
||||
{
|
||||
label: 'Algeria',
|
||||
value: 'DZ',
|
||||
},
|
||||
{
|
||||
label: 'American Samoa',
|
||||
value: 'AS',
|
||||
},
|
||||
{
|
||||
label: 'Andorra',
|
||||
value: 'AD',
|
||||
},
|
||||
{
|
||||
label: 'Angola',
|
||||
value: 'AO',
|
||||
},
|
||||
{
|
||||
label: 'Anguilla',
|
||||
value: 'AI',
|
||||
},
|
||||
{
|
||||
label: 'Antarctica',
|
||||
value: 'AQ',
|
||||
},
|
||||
{
|
||||
label: 'Antigua and Barbuda',
|
||||
value: 'AG',
|
||||
},
|
||||
{
|
||||
label: 'Argentina',
|
||||
value: 'AR',
|
||||
},
|
||||
{
|
||||
label: 'Armenia',
|
||||
value: 'AM',
|
||||
},
|
||||
{
|
||||
label: 'Aruba',
|
||||
value: 'AW',
|
||||
},
|
||||
{
|
||||
label: 'Australia',
|
||||
value: 'AU',
|
||||
},
|
||||
{
|
||||
label: 'Austria',
|
||||
value: 'AT',
|
||||
},
|
||||
{
|
||||
label: 'Azerbaijan',
|
||||
value: 'AZ',
|
||||
},
|
||||
{
|
||||
label: 'Bahamas',
|
||||
value: 'BS',
|
||||
},
|
||||
{
|
||||
label: 'Bahrain',
|
||||
value: 'BH',
|
||||
},
|
||||
{
|
||||
label: 'Bangladesh',
|
||||
value: 'BD',
|
||||
},
|
||||
{
|
||||
label: 'Barbados',
|
||||
value: 'BB',
|
||||
},
|
||||
{
|
||||
label: 'Belarus',
|
||||
value: 'BY',
|
||||
},
|
||||
{
|
||||
label: 'Belgium',
|
||||
value: 'BE',
|
||||
},
|
||||
{
|
||||
label: 'Belize',
|
||||
value: 'BZ',
|
||||
},
|
||||
{
|
||||
label: 'Benin',
|
||||
value: 'BJ',
|
||||
},
|
||||
{
|
||||
label: 'Bermuda',
|
||||
value: 'BM',
|
||||
},
|
||||
{
|
||||
label: 'Bhutan',
|
||||
value: 'BT',
|
||||
},
|
||||
{
|
||||
label: 'Bolivia',
|
||||
value: 'BO',
|
||||
},
|
||||
{
|
||||
label: 'Bosnia and Herzegovina',
|
||||
value: 'BA',
|
||||
},
|
||||
{
|
||||
label: 'Botswana',
|
||||
value: 'BW',
|
||||
},
|
||||
{
|
||||
label: 'Bouvet Island',
|
||||
value: 'BV',
|
||||
},
|
||||
{
|
||||
label: 'Brazil',
|
||||
value: 'BR',
|
||||
},
|
||||
{
|
||||
label: 'British Indian Ocean Territory',
|
||||
value: 'IO',
|
||||
},
|
||||
{
|
||||
label: 'Brunei Darussalam',
|
||||
value: 'BN',
|
||||
},
|
||||
{
|
||||
label: 'Bulgaria',
|
||||
value: 'BG',
|
||||
},
|
||||
{
|
||||
label: 'Burkina Faso',
|
||||
value: 'BF',
|
||||
},
|
||||
{
|
||||
label: 'Burundi',
|
||||
value: 'BI',
|
||||
},
|
||||
{
|
||||
label: 'Cambodia',
|
||||
value: 'KH',
|
||||
},
|
||||
{
|
||||
label: 'Cameroon',
|
||||
value: 'CM',
|
||||
},
|
||||
{
|
||||
label: 'Canada',
|
||||
value: 'CA',
|
||||
},
|
||||
{
|
||||
label: 'Cape Verde',
|
||||
value: 'CV',
|
||||
},
|
||||
{
|
||||
label: 'Cayman Islands',
|
||||
value: 'KY',
|
||||
},
|
||||
{
|
||||
label: 'Central African Republic',
|
||||
value: 'CF',
|
||||
},
|
||||
{
|
||||
label: 'Chad',
|
||||
value: 'TD',
|
||||
},
|
||||
{
|
||||
label: 'Chile',
|
||||
value: 'CL',
|
||||
},
|
||||
{
|
||||
label: 'China',
|
||||
value: 'CN',
|
||||
},
|
||||
{
|
||||
label: 'Christmas Island',
|
||||
value: 'CX',
|
||||
},
|
||||
{
|
||||
label: 'Cocos (Keeling) Islands',
|
||||
value: 'CC',
|
||||
},
|
||||
{
|
||||
label: 'Colombia',
|
||||
value: 'CO',
|
||||
},
|
||||
{
|
||||
label: 'Comoros',
|
||||
value: 'KM',
|
||||
},
|
||||
{
|
||||
label: 'Congo',
|
||||
value: 'CG',
|
||||
},
|
||||
{
|
||||
label: 'Congo, The Democratic Republic of the',
|
||||
value: 'CD',
|
||||
},
|
||||
{
|
||||
label: 'Cook Islands',
|
||||
value: 'CK',
|
||||
},
|
||||
{
|
||||
label: 'Costa Rica',
|
||||
value: 'CR',
|
||||
},
|
||||
{
|
||||
label: "Cote D'Ivoire",
|
||||
value: 'CI',
|
||||
},
|
||||
{
|
||||
label: 'Croatia',
|
||||
value: 'HR',
|
||||
},
|
||||
{
|
||||
label: 'Cuba',
|
||||
value: 'CU',
|
||||
},
|
||||
{
|
||||
label: 'Cyprus',
|
||||
value: 'CY',
|
||||
},
|
||||
{
|
||||
label: 'Czech Republic',
|
||||
value: 'CZ',
|
||||
},
|
||||
{
|
||||
label: 'Denmark',
|
||||
value: 'DK',
|
||||
},
|
||||
{
|
||||
label: 'Djibouti',
|
||||
value: 'DJ',
|
||||
},
|
||||
{
|
||||
label: 'Dominica',
|
||||
value: 'DM',
|
||||
},
|
||||
{
|
||||
label: 'Dominican Republic',
|
||||
value: 'DO',
|
||||
},
|
||||
{
|
||||
label: 'Ecuador',
|
||||
value: 'EC',
|
||||
},
|
||||
{
|
||||
label: 'Egypt',
|
||||
value: 'EG',
|
||||
},
|
||||
{
|
||||
label: 'El Salvador',
|
||||
value: 'SV',
|
||||
},
|
||||
{
|
||||
label: 'Equatorial Guinea',
|
||||
value: 'GQ',
|
||||
},
|
||||
{
|
||||
label: 'Eritrea',
|
||||
value: 'ER',
|
||||
},
|
||||
{
|
||||
label: 'Estonia',
|
||||
value: 'EE',
|
||||
},
|
||||
{
|
||||
label: 'Ethiopia',
|
||||
value: 'ET',
|
||||
},
|
||||
{
|
||||
label: 'Falkland Islands (Malvinas)',
|
||||
value: 'FK',
|
||||
},
|
||||
{
|
||||
label: 'Faroe Islands',
|
||||
value: 'FO',
|
||||
},
|
||||
{
|
||||
label: 'Fiji',
|
||||
value: 'FJ',
|
||||
},
|
||||
{
|
||||
label: 'Finland',
|
||||
value: 'FI',
|
||||
},
|
||||
{
|
||||
label: 'France',
|
||||
value: 'FR',
|
||||
},
|
||||
{
|
||||
label: 'French Guiana',
|
||||
value: 'GF',
|
||||
},
|
||||
{
|
||||
label: 'French Polynesia',
|
||||
value: 'PF',
|
||||
},
|
||||
{
|
||||
label: 'French Southern Territories',
|
||||
value: 'TF',
|
||||
},
|
||||
{
|
||||
label: 'Gabon',
|
||||
value: 'GA',
|
||||
},
|
||||
{
|
||||
label: 'Gambia',
|
||||
value: 'GM',
|
||||
},
|
||||
{
|
||||
label: 'Georgia',
|
||||
value: 'GE',
|
||||
},
|
||||
{
|
||||
label: 'Germany',
|
||||
value: 'DE',
|
||||
},
|
||||
{
|
||||
label: 'Ghana',
|
||||
value: 'GH',
|
||||
},
|
||||
{
|
||||
label: 'Gibraltar',
|
||||
value: 'GI',
|
||||
},
|
||||
{
|
||||
label: 'Greece',
|
||||
value: 'GR',
|
||||
},
|
||||
{
|
||||
label: 'Greenland',
|
||||
value: 'GL',
|
||||
},
|
||||
{
|
||||
label: 'Grenada',
|
||||
value: 'GD',
|
||||
},
|
||||
{
|
||||
label: 'Guadeloupe',
|
||||
value: 'GP',
|
||||
},
|
||||
{
|
||||
label: 'Guam',
|
||||
value: 'GU',
|
||||
},
|
||||
{
|
||||
label: 'Guatemala',
|
||||
value: 'GT',
|
||||
},
|
||||
{
|
||||
label: 'Guernsey',
|
||||
value: 'GG',
|
||||
},
|
||||
{
|
||||
label: 'Guinea',
|
||||
value: 'GN',
|
||||
},
|
||||
{
|
||||
label: 'Guinea-Bissau',
|
||||
value: 'GW',
|
||||
},
|
||||
{
|
||||
label: 'Guyana',
|
||||
value: 'GY',
|
||||
},
|
||||
{
|
||||
label: 'Haiti',
|
||||
value: 'HT',
|
||||
},
|
||||
{
|
||||
label: 'Heard Island and Mcdonald Islands',
|
||||
value: 'HM',
|
||||
},
|
||||
{
|
||||
label: 'Holy See (Vatican City State)',
|
||||
value: 'VA',
|
||||
},
|
||||
{
|
||||
label: 'Honduras',
|
||||
value: 'HN',
|
||||
},
|
||||
{
|
||||
label: 'Hong Kong',
|
||||
value: 'HK',
|
||||
},
|
||||
{
|
||||
label: 'Hungary',
|
||||
value: 'HU',
|
||||
},
|
||||
{
|
||||
label: 'Iceland',
|
||||
value: 'IS',
|
||||
},
|
||||
{
|
||||
label: 'India',
|
||||
value: 'IN',
|
||||
},
|
||||
{
|
||||
label: 'Indonesia',
|
||||
value: 'ID',
|
||||
},
|
||||
{
|
||||
label: 'Iran, Islamic Republic Of',
|
||||
value: 'IR',
|
||||
},
|
||||
{
|
||||
label: 'Iraq',
|
||||
value: 'IQ',
|
||||
},
|
||||
{
|
||||
label: 'Ireland',
|
||||
value: 'IE',
|
||||
},
|
||||
{
|
||||
label: 'Isle of Man',
|
||||
value: 'IM',
|
||||
},
|
||||
{
|
||||
label: 'Israel',
|
||||
value: 'IL',
|
||||
},
|
||||
{
|
||||
label: 'Italy',
|
||||
value: 'IT',
|
||||
},
|
||||
{
|
||||
label: 'Jamaica',
|
||||
value: 'JM',
|
||||
},
|
||||
{
|
||||
label: 'Japan',
|
||||
value: 'JP',
|
||||
},
|
||||
{
|
||||
label: 'Jersey',
|
||||
value: 'JE',
|
||||
},
|
||||
{
|
||||
label: 'Jordan',
|
||||
value: 'JO',
|
||||
},
|
||||
{
|
||||
label: 'Kazakhstan',
|
||||
value: 'KZ',
|
||||
},
|
||||
{
|
||||
label: 'Kenya',
|
||||
value: 'KE',
|
||||
},
|
||||
{
|
||||
label: 'Kiribati',
|
||||
value: 'KI',
|
||||
},
|
||||
{
|
||||
label: "Democratic People's Republic of Korea",
|
||||
value: 'KP',
|
||||
},
|
||||
{
|
||||
label: 'Korea, Republic of',
|
||||
value: 'KR',
|
||||
},
|
||||
{
|
||||
label: 'Kosovo',
|
||||
value: 'XK',
|
||||
},
|
||||
{
|
||||
label: 'Kuwait',
|
||||
value: 'KW',
|
||||
},
|
||||
{
|
||||
label: 'Kyrgyzstan',
|
||||
value: 'KG',
|
||||
},
|
||||
{
|
||||
label: "Lao People's Democratic Republic",
|
||||
value: 'LA',
|
||||
},
|
||||
{
|
||||
label: 'Latvia',
|
||||
value: 'LV',
|
||||
},
|
||||
{
|
||||
label: 'Lebanon',
|
||||
value: 'LB',
|
||||
},
|
||||
{
|
||||
label: 'Lesotho',
|
||||
value: 'LS',
|
||||
},
|
||||
{
|
||||
label: 'Liberia',
|
||||
value: 'LR',
|
||||
},
|
||||
{
|
||||
label: 'Libyan Arab Jamahiriya',
|
||||
value: 'LY',
|
||||
},
|
||||
{
|
||||
label: 'Liechtenstein',
|
||||
value: 'LI',
|
||||
},
|
||||
{
|
||||
label: 'Lithuania',
|
||||
value: 'LT',
|
||||
},
|
||||
{
|
||||
label: 'Luxembourg',
|
||||
value: 'LU',
|
||||
},
|
||||
{
|
||||
label: 'Macao',
|
||||
value: 'MO',
|
||||
},
|
||||
{
|
||||
label: 'Macedonia, The Former Yugoslav Republic of',
|
||||
value: 'MK',
|
||||
},
|
||||
{
|
||||
label: 'Madagascar',
|
||||
value: 'MG',
|
||||
},
|
||||
{
|
||||
label: 'Malawi',
|
||||
value: 'MW',
|
||||
},
|
||||
{
|
||||
label: 'Malaysia',
|
||||
value: 'MY',
|
||||
},
|
||||
{
|
||||
label: 'Maldives',
|
||||
value: 'MV',
|
||||
},
|
||||
{
|
||||
label: 'Mali',
|
||||
value: 'ML',
|
||||
},
|
||||
{
|
||||
label: 'Malta',
|
||||
value: 'MT',
|
||||
},
|
||||
{
|
||||
label: 'Marshall Islands',
|
||||
value: 'MH',
|
||||
},
|
||||
{
|
||||
label: 'Martinique',
|
||||
value: 'MQ',
|
||||
},
|
||||
{
|
||||
label: 'Mauritania',
|
||||
value: 'MR',
|
||||
},
|
||||
{
|
||||
label: 'Mauritius',
|
||||
value: 'MU',
|
||||
},
|
||||
{
|
||||
label: 'Mayotte',
|
||||
value: 'YT',
|
||||
},
|
||||
{
|
||||
label: 'Mexico',
|
||||
value: 'MX',
|
||||
},
|
||||
{
|
||||
label: 'Micronesia, Federated States of',
|
||||
value: 'FM',
|
||||
},
|
||||
{
|
||||
label: 'Moldova, Republic of',
|
||||
value: 'MD',
|
||||
},
|
||||
{
|
||||
label: 'Monaco',
|
||||
value: 'MC',
|
||||
},
|
||||
{
|
||||
label: 'Mongolia',
|
||||
value: 'MN',
|
||||
},
|
||||
{
|
||||
label: 'Montenegro',
|
||||
value: 'ME',
|
||||
},
|
||||
{
|
||||
label: 'Montserrat',
|
||||
value: 'MS',
|
||||
},
|
||||
{
|
||||
label: 'Morocco',
|
||||
value: 'MA',
|
||||
},
|
||||
{
|
||||
label: 'Mozambique',
|
||||
value: 'MZ',
|
||||
},
|
||||
{
|
||||
label: 'Myanmar',
|
||||
value: 'MM',
|
||||
},
|
||||
{
|
||||
label: 'Namibia',
|
||||
value: 'NA',
|
||||
},
|
||||
{
|
||||
label: 'Nauru',
|
||||
value: 'NR',
|
||||
},
|
||||
{
|
||||
label: 'Nepal',
|
||||
value: 'NP',
|
||||
},
|
||||
{
|
||||
label: 'Netherlands',
|
||||
value: 'NL',
|
||||
},
|
||||
{
|
||||
label: 'Netherlands Antilles',
|
||||
value: 'AN',
|
||||
},
|
||||
{
|
||||
label: 'New Caledonia',
|
||||
value: 'NC',
|
||||
},
|
||||
{
|
||||
label: 'New Zealand',
|
||||
value: 'NZ',
|
||||
},
|
||||
{
|
||||
label: 'Nicaragua',
|
||||
value: 'NI',
|
||||
},
|
||||
{
|
||||
label: 'Niger',
|
||||
value: 'NE',
|
||||
},
|
||||
{
|
||||
label: 'Nigeria',
|
||||
value: 'NG',
|
||||
},
|
||||
{
|
||||
label: 'Niue',
|
||||
value: 'NU',
|
||||
},
|
||||
{
|
||||
label: 'Norfolk Island',
|
||||
value: 'NF',
|
||||
},
|
||||
{
|
||||
label: 'Northern Mariana Islands',
|
||||
value: 'MP',
|
||||
},
|
||||
{
|
||||
label: 'Norway',
|
||||
value: 'NO',
|
||||
},
|
||||
{
|
||||
label: 'Oman',
|
||||
value: 'OM',
|
||||
},
|
||||
{
|
||||
label: 'Pakistan',
|
||||
value: 'PK',
|
||||
},
|
||||
{
|
||||
label: 'Palau',
|
||||
value: 'PW',
|
||||
},
|
||||
{
|
||||
label: 'Palestinian Territory, Occupied',
|
||||
value: 'PS',
|
||||
},
|
||||
{
|
||||
label: 'Panama',
|
||||
value: 'PA',
|
||||
},
|
||||
{
|
||||
label: 'Papua New Guinea',
|
||||
value: 'PG',
|
||||
},
|
||||
{
|
||||
label: 'Paraguay',
|
||||
value: 'PY',
|
||||
},
|
||||
{
|
||||
label: 'Peru',
|
||||
value: 'PE',
|
||||
},
|
||||
{
|
||||
label: 'Philippines',
|
||||
value: 'PH',
|
||||
},
|
||||
{
|
||||
label: 'Pitcairn',
|
||||
value: 'PN',
|
||||
},
|
||||
{
|
||||
label: 'Poland',
|
||||
value: 'PL',
|
||||
},
|
||||
{
|
||||
label: 'Portugal',
|
||||
value: 'PT',
|
||||
},
|
||||
{
|
||||
label: 'Puerto Rico',
|
||||
value: 'PR',
|
||||
},
|
||||
{
|
||||
label: 'Qatar',
|
||||
value: 'QA',
|
||||
},
|
||||
{
|
||||
label: 'Reunion',
|
||||
value: 'RE',
|
||||
},
|
||||
{
|
||||
label: 'Romania',
|
||||
value: 'RO',
|
||||
},
|
||||
{
|
||||
label: 'Russian Federation',
|
||||
value: 'RU',
|
||||
},
|
||||
{
|
||||
label: 'Rwanda',
|
||||
value: 'RW',
|
||||
},
|
||||
{
|
||||
label: 'Saint Helena',
|
||||
value: 'SH',
|
||||
},
|
||||
{
|
||||
label: 'Saint Kitts and Nevis',
|
||||
value: 'KN',
|
||||
},
|
||||
{
|
||||
label: 'Saint Lucia',
|
||||
value: 'LC',
|
||||
},
|
||||
{
|
||||
label: 'Saint Pierre and Miquelon',
|
||||
value: 'PM',
|
||||
},
|
||||
{
|
||||
label: 'Saint Vincent and the Grenadines',
|
||||
value: 'VC',
|
||||
},
|
||||
{
|
||||
label: 'Samoa',
|
||||
value: 'WS',
|
||||
},
|
||||
{
|
||||
label: 'San Marino',
|
||||
value: 'SM',
|
||||
},
|
||||
{
|
||||
label: 'Sao Tome and Principe',
|
||||
value: 'ST',
|
||||
},
|
||||
{
|
||||
label: 'Saudi Arabia',
|
||||
value: 'SA',
|
||||
},
|
||||
{
|
||||
label: 'Senegal',
|
||||
value: 'SN',
|
||||
},
|
||||
{
|
||||
label: 'Serbia',
|
||||
value: 'RS',
|
||||
},
|
||||
{
|
||||
label: 'Seychelles',
|
||||
value: 'SC',
|
||||
},
|
||||
{
|
||||
label: 'Sierra Leone',
|
||||
value: 'SL',
|
||||
},
|
||||
{
|
||||
label: 'Singapore',
|
||||
value: 'SG',
|
||||
},
|
||||
{
|
||||
label: 'Slovakia',
|
||||
value: 'SK',
|
||||
},
|
||||
{
|
||||
label: 'Slovenia',
|
||||
value: 'SI',
|
||||
},
|
||||
{
|
||||
label: 'Solomon Islands',
|
||||
value: 'SB',
|
||||
},
|
||||
{
|
||||
label: 'Somalia',
|
||||
value: 'SO',
|
||||
},
|
||||
{
|
||||
label: 'South Africa',
|
||||
value: 'ZA',
|
||||
},
|
||||
{
|
||||
label: 'South Georgia and the South Sandwich Islands',
|
||||
value: 'GS',
|
||||
},
|
||||
{
|
||||
label: 'Spain',
|
||||
value: 'ES',
|
||||
},
|
||||
{
|
||||
label: 'Sri Lanka',
|
||||
value: 'LK',
|
||||
},
|
||||
{
|
||||
label: 'Sudan',
|
||||
value: 'SD',
|
||||
},
|
||||
{
|
||||
label: 'Suriname',
|
||||
value: 'SR',
|
||||
},
|
||||
{
|
||||
label: 'Svalbard and Jan Mayen',
|
||||
value: 'SJ',
|
||||
},
|
||||
{
|
||||
label: 'Swaziland',
|
||||
value: 'SZ',
|
||||
},
|
||||
{
|
||||
label: 'Sweden',
|
||||
value: 'SE',
|
||||
},
|
||||
{
|
||||
label: 'Switzerland',
|
||||
value: 'CH',
|
||||
},
|
||||
{
|
||||
label: 'Syrian Arab Republic',
|
||||
value: 'SY',
|
||||
},
|
||||
{
|
||||
label: 'Taiwan',
|
||||
value: 'TW',
|
||||
},
|
||||
{
|
||||
label: 'Tajikistan',
|
||||
value: 'TJ',
|
||||
},
|
||||
{
|
||||
label: 'Tanzania, United Republic of',
|
||||
value: 'TZ',
|
||||
},
|
||||
{
|
||||
label: 'Thailand',
|
||||
value: 'TH',
|
||||
},
|
||||
{
|
||||
label: 'Timor-Leste',
|
||||
value: 'TL',
|
||||
},
|
||||
{
|
||||
label: 'Togo',
|
||||
value: 'TG',
|
||||
},
|
||||
{
|
||||
label: 'Tokelau',
|
||||
value: 'TK',
|
||||
},
|
||||
{
|
||||
label: 'Tonga',
|
||||
value: 'TO',
|
||||
},
|
||||
{
|
||||
label: 'Trinidad and Tobago',
|
||||
value: 'TT',
|
||||
},
|
||||
{
|
||||
label: 'Tunisia',
|
||||
value: 'TN',
|
||||
},
|
||||
{
|
||||
label: 'Turkey',
|
||||
value: 'TR',
|
||||
},
|
||||
{
|
||||
label: 'Turkmenistan',
|
||||
value: 'TM',
|
||||
},
|
||||
{
|
||||
label: 'Turks and Caicos Islands',
|
||||
value: 'TC',
|
||||
},
|
||||
{
|
||||
label: 'Tuvalu',
|
||||
value: 'TV',
|
||||
},
|
||||
{
|
||||
label: 'Uganda',
|
||||
value: 'UG',
|
||||
},
|
||||
{
|
||||
label: 'Ukraine',
|
||||
value: 'UA',
|
||||
},
|
||||
{
|
||||
label: 'United Arab Emirates',
|
||||
value: 'AE',
|
||||
},
|
||||
{
|
||||
label: 'United Kingdom',
|
||||
value: 'GB',
|
||||
},
|
||||
{
|
||||
label: 'United States',
|
||||
value: 'US',
|
||||
},
|
||||
{
|
||||
label: 'United States Minor Outlying Islands',
|
||||
value: 'UM',
|
||||
},
|
||||
{
|
||||
label: 'Uruguay',
|
||||
value: 'UY',
|
||||
},
|
||||
{
|
||||
label: 'Uzbekistan',
|
||||
value: 'UZ',
|
||||
},
|
||||
{
|
||||
label: 'Vanuatu',
|
||||
value: 'VU',
|
||||
},
|
||||
{
|
||||
label: 'Venezuela',
|
||||
value: 'VE',
|
||||
},
|
||||
{
|
||||
label: 'Viet Nam',
|
||||
value: 'VN',
|
||||
},
|
||||
{
|
||||
label: 'Virgin Islands, British',
|
||||
value: 'VG',
|
||||
},
|
||||
{
|
||||
label: 'Virgin Islands, U.S.',
|
||||
value: 'VI',
|
||||
},
|
||||
{
|
||||
label: 'Wallis and Futuna',
|
||||
value: 'WF',
|
||||
},
|
||||
{
|
||||
label: 'Western Sahara',
|
||||
value: 'EH',
|
||||
},
|
||||
{
|
||||
label: 'Yemen',
|
||||
value: 'YE',
|
||||
},
|
||||
{
|
||||
label: 'Zambia',
|
||||
value: 'ZM',
|
||||
},
|
||||
{
|
||||
label: 'Zimbabwe',
|
||||
value: 'ZW',
|
||||
},
|
||||
]
|
||||
@ -1,7 +0,0 @@
|
||||
.gutterLeft {
|
||||
padding-left: var(--gutter-h);
|
||||
}
|
||||
|
||||
.gutterRight {
|
||||
padding-right: var(--gutter-h);
|
||||
}
|
||||
@ -1,24 +0,0 @@
|
||||
import React from "react";
|
||||
|
||||
import classes from "./index.scss";
|
||||
|
||||
type Props = {
|
||||
children: React.ReactNode;
|
||||
className?: string;
|
||||
left?: boolean;
|
||||
ref?: React.Ref<HTMLDivElement>;
|
||||
right?: boolean;
|
||||
};
|
||||
|
||||
export const Gutter: React.FC<Props & { ref?: React.Ref<HTMLDivElement> }> = (props) => {
|
||||
const { children, className, left = true, right = true, ref } = props;
|
||||
|
||||
return (
|
||||
<div
|
||||
className={[left && classes.gutterLeft, right && classes.gutterRight, className].filter(Boolean).join(" ")}
|
||||
ref={ref}
|
||||
>
|
||||
{children}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
@ -1,9 +0,0 @@
|
||||
@use "../../css/queries.scss" as *;
|
||||
|
||||
.message {
|
||||
margin: var(--base) 0 var(--base) 0;
|
||||
|
||||
@include mid-break {
|
||||
margin: calc(var(--base) * 0.5) 0 calc(var(--base) * 0.5) 0;
|
||||
}
|
||||
}
|
||||
@ -1,15 +0,0 @@
|
||||
import type { MessageField } from "@payloadcms/plugin-form-builder/types";
|
||||
|
||||
import React from "react";
|
||||
|
||||
import RichText from "../RichText";
|
||||
import { Width } from "../Width";
|
||||
import classes from "./index.scss";
|
||||
|
||||
export const Message: React.FC<MessageField> = ({ message }) => {
|
||||
return (
|
||||
<Width width={100}>
|
||||
<RichText className={classes.message} content={message} />
|
||||
</Width>
|
||||
);
|
||||
};
|
||||
@ -1,15 +0,0 @@
|
||||
@use '../shared.scss';
|
||||
|
||||
.wrap {
|
||||
position: relative;
|
||||
margin-bottom: var(--base);
|
||||
}
|
||||
|
||||
.input {
|
||||
@include shared.formInput;
|
||||
}
|
||||
|
||||
.label {
|
||||
margin-bottom: 10px;
|
||||
display: block;
|
||||
}
|
||||
@ -5,7 +5,6 @@ import React from "react";
|
||||
|
||||
import { Error } from "../Error";
|
||||
import { Width } from "../Width";
|
||||
import classes from "./index.scss";
|
||||
|
||||
export const Number: React.FC<
|
||||
{
|
||||
@ -19,11 +18,14 @@ export const Number: React.FC<
|
||||
> = ({ name, errors, label, register, required: requiredFromProps, width }) => {
|
||||
return (
|
||||
<Width width={width}>
|
||||
<div className={classes.wrap}>
|
||||
<label className={classes.label} htmlFor={name}>
|
||||
{label}
|
||||
</label>
|
||||
<input className={classes.input} id={name} type="number" {...register(name, { required: requiredFromProps })} />
|
||||
<div className="form-group pr-4">
|
||||
<label htmlFor={name}>{label}</label>
|
||||
<input
|
||||
type="number"
|
||||
id={name}
|
||||
className="input-lg input-circle form-control"
|
||||
{...register(name, { required: requiredFromProps })}
|
||||
/>
|
||||
{requiredFromProps && errors[name] && <Error />}
|
||||
</div>
|
||||
</Width>
|
||||
|
||||
@ -1,123 +0,0 @@
|
||||
@use '../shared.scss';
|
||||
|
||||
.select {
|
||||
position: relative;
|
||||
margin-bottom: var(--base);
|
||||
}
|
||||
|
||||
.label {
|
||||
margin-bottom: 10px;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.reactSelect {
|
||||
display: flex;
|
||||
|
||||
:global {
|
||||
div.rs__control {
|
||||
@include shared.formInput;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
.rs__input-container {
|
||||
color: var(--color-black);
|
||||
}
|
||||
|
||||
.rs__value-container {
|
||||
padding: 0;
|
||||
> * {
|
||||
margin-top: 0;
|
||||
margin-bottom: 0;
|
||||
padding-top: 0;
|
||||
padding-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.rs__single-value {
|
||||
color: var(--color-black);
|
||||
}
|
||||
|
||||
.rs__indicators {
|
||||
position: absolute;
|
||||
top: calc(var(--base) * 0.9);
|
||||
right: calc(var(--base) * 0.9);
|
||||
.arrow {
|
||||
transform: rotate(90deg);
|
||||
}
|
||||
}
|
||||
|
||||
.rs__indicator {
|
||||
padding: 0px 4px;
|
||||
cursor: pointer;
|
||||
|
||||
svg path {
|
||||
fill: var(--color-dark-gray);
|
||||
}
|
||||
|
||||
&:hover {
|
||||
svg path {
|
||||
fill: var(--color-dark-gray);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.rs__indicator-separator {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.rs__menu {
|
||||
color: var(--color-black);
|
||||
background-color: var(--color-white);
|
||||
z-index: 2;
|
||||
border-radius: 0;
|
||||
box-shadow: 0 4px 11px hsl(0deg 0% 0% / 10%);
|
||||
}
|
||||
|
||||
.rs__menu-list {
|
||||
padding: calc(var(--base) / 4) 0;
|
||||
}
|
||||
|
||||
.rs__group-heading {
|
||||
margin-bottom: calc(var(--base) / 2);
|
||||
}
|
||||
|
||||
.rs__option {
|
||||
font-size: 1rem;
|
||||
padding: calc(var(--base) / 2) var(--base);
|
||||
|
||||
&--is-focused {
|
||||
background-color: var(--color-light-gray);
|
||||
color: var(--color-black);
|
||||
}
|
||||
|
||||
&--is-selected {
|
||||
background-color: var(--color-light-gray);
|
||||
color: var(--color-black);
|
||||
}
|
||||
}
|
||||
|
||||
.rs__multi-value {
|
||||
padding: 0;
|
||||
background: var(--color-light-gray);
|
||||
}
|
||||
|
||||
.rs__multi-value__label {
|
||||
max-width: 150px;
|
||||
color: var(--color-black);
|
||||
padding: calc(var(--base) / 8) calc(var(--base) / 4);
|
||||
}
|
||||
|
||||
.rs__multi-value__remove {
|
||||
cursor: pointer;
|
||||
|
||||
&:hover {
|
||||
color: var(--color-black);
|
||||
background: var(--color-light-gray);
|
||||
}
|
||||
}
|
||||
|
||||
.rs__clear-indicator {
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -1,50 +0,0 @@
|
||||
import type { StateField } from "@payloadcms/plugin-form-builder/types";
|
||||
import type { Control, FieldErrorsImpl, FieldValues } from "react-hook-form";
|
||||
|
||||
import React from "react";
|
||||
import { Controller } from "react-hook-form";
|
||||
import ReactSelect from "react-select";
|
||||
|
||||
import { Error } from "../Error";
|
||||
import { Width } from "../Width";
|
||||
import classes from "./index.scss";
|
||||
import { stateOptions } from "./options";
|
||||
|
||||
export const State: React.FC<
|
||||
{
|
||||
control: Control<FieldValues, any>;
|
||||
errors: Partial<
|
||||
FieldErrorsImpl<{
|
||||
[x: string]: any;
|
||||
}>
|
||||
>;
|
||||
} & StateField
|
||||
> = ({ name, control, errors, label, required, width }) => {
|
||||
return (
|
||||
<Width width={width}>
|
||||
<div className={classes.select}>
|
||||
<label className={classes.label} htmlFor={name}>
|
||||
{label}
|
||||
</label>
|
||||
<Controller
|
||||
control={control}
|
||||
defaultValue=""
|
||||
name={name}
|
||||
render={({ field: { onChange, value } }) => (
|
||||
<ReactSelect
|
||||
className={classes.reactSelect}
|
||||
classNamePrefix="rs"
|
||||
id={name}
|
||||
instanceId={name}
|
||||
onChange={(val) => onChange(val ? val.value : "")}
|
||||
options={stateOptions}
|
||||
value={stateOptions.find((t) => t.value === value)}
|
||||
/>
|
||||
)}
|
||||
rules={{ required }}
|
||||
/>
|
||||
{required && errors[name] && <Error />}
|
||||
</div>
|
||||
</Width>
|
||||
);
|
||||
};
|
||||
@ -1,52 +0,0 @@
|
||||
export const stateOptions = [
|
||||
{ label: 'Alabama', value: 'AL' },
|
||||
{ label: 'Alaska', value: 'AK' },
|
||||
{ label: 'Arizona', value: 'AZ' },
|
||||
{ label: 'Arkansas', value: 'AR' },
|
||||
{ label: 'California', value: 'CA' },
|
||||
{ label: 'Colorado', value: 'CO' },
|
||||
{ label: 'Connecticut', value: 'CT' },
|
||||
{ label: 'Delaware', value: 'DE' },
|
||||
{ label: 'Florida', value: 'FL' },
|
||||
{ label: 'Georgia', value: 'GA' },
|
||||
{ label: 'Hawaii', value: 'HI' },
|
||||
{ label: 'Idaho', value: 'ID' },
|
||||
{ label: 'Illinois', value: 'IL' },
|
||||
{ label: 'Indiana', value: 'IN' },
|
||||
{ label: 'Iowa', value: 'IA' },
|
||||
{ label: 'Kansas', value: 'KS' },
|
||||
{ label: 'Kentucky', value: 'KY' },
|
||||
{ label: 'Louisiana', value: 'LA' },
|
||||
{ label: 'Maine', value: 'ME' },
|
||||
{ label: 'Maryland', value: 'MD' },
|
||||
{ label: 'Massachusetts', value: 'MA' },
|
||||
{ label: 'Michigan', value: 'MI' },
|
||||
{ label: 'Minnesota', value: 'MN' },
|
||||
{ label: 'Mississippi', value: 'MS' },
|
||||
{ label: 'Missouri', value: 'MO' },
|
||||
{ label: 'Montana', value: 'MT' },
|
||||
{ label: 'Nebraska', value: 'NE' },
|
||||
{ label: 'Nevada', value: 'NV' },
|
||||
{ label: 'New Hampshire', value: 'NH' },
|
||||
{ label: 'New Jersey', value: 'NJ' },
|
||||
{ label: 'New Mexico', value: 'NM' },
|
||||
{ label: 'New York', value: 'NY' },
|
||||
{ label: 'North Carolina', value: 'NC' },
|
||||
{ label: 'North Dakota', value: 'ND' },
|
||||
{ label: 'Ohio', value: 'OH' },
|
||||
{ label: 'Oklahoma', value: 'OK' },
|
||||
{ label: 'Oregon', value: 'OR' },
|
||||
{ label: 'Pennsylvania', value: 'PA' },
|
||||
{ label: 'Rhode Island', value: 'RI' },
|
||||
{ label: 'South Carolina', value: 'SC' },
|
||||
{ label: 'South Dakota', value: 'SD' },
|
||||
{ label: 'Tennessee', value: 'TN' },
|
||||
{ label: 'Texas', value: 'TX' },
|
||||
{ label: 'Utah', value: 'UT' },
|
||||
{ label: 'Vermont', value: 'VT' },
|
||||
{ label: 'Virginia', value: 'VA' },
|
||||
{ label: 'Washington', value: 'WA' },
|
||||
{ label: 'West Virginia', value: 'WV' },
|
||||
{ label: 'Wisconsin', value: 'WI' },
|
||||
{ label: 'Wyoming', value: 'WY' },
|
||||
]
|
||||
@ -1,23 +0,0 @@
|
||||
.top-large {
|
||||
padding-top: var(--block-padding);
|
||||
}
|
||||
|
||||
.top-medium {
|
||||
padding-top: calc(var(--block-padding) / 2);
|
||||
}
|
||||
|
||||
.top-small {
|
||||
padding-top: calc(var(--block-padding) / 3);
|
||||
}
|
||||
|
||||
.bottom-large {
|
||||
padding-bottom: var(--block-padding);
|
||||
}
|
||||
|
||||
.bottom-medium {
|
||||
padding-bottom: calc(var(--block-padding) / 2);
|
||||
}
|
||||
|
||||
.bottom-small {
|
||||
padding-bottom: calc(var(--block-padding) / 3);
|
||||
}
|
||||
@ -1,20 +0,0 @@
|
||||
import React from "react";
|
||||
|
||||
import classes from "./index.scss";
|
||||
|
||||
export type VerticalPaddingOptions = "large" | "medium" | "none" | "small";
|
||||
|
||||
type Props = {
|
||||
bottom?: VerticalPaddingOptions;
|
||||
children: React.ReactNode;
|
||||
className?: string;
|
||||
top?: VerticalPaddingOptions;
|
||||
};
|
||||
|
||||
export const VerticalPadding: React.FC<Props> = ({ bottom = "medium", children, className, top = "medium" }) => {
|
||||
return (
|
||||
<div className={[className, classes[`top-${top}`], classes[`bottom-${bottom}`]].filter(Boolean).join(" ")}>
|
||||
{children}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
@ -1,10 +0,0 @@
|
||||
@use "../../css/queries.scss" as *;
|
||||
|
||||
.width {
|
||||
padding-left: calc(var(--base) * 0.5);
|
||||
padding-right: calc(var(--base) * 0.5);
|
||||
|
||||
@include mid-break {
|
||||
width: 100% !important;
|
||||
}
|
||||
}
|
||||
@ -1,14 +1,8 @@
|
||||
import * as React from "react";
|
||||
|
||||
import classes from "./index.scss";
|
||||
|
||||
export const Width: React.FC<{
|
||||
children: React.ReactNode;
|
||||
width?: number;
|
||||
}> = ({ children, width }) => {
|
||||
return (
|
||||
<div className={classes.width} style={{ width: width ? `${width}%` : undefined }}>
|
||||
{children}
|
||||
</div>
|
||||
);
|
||||
return <div style={{ width: width ? `${width}%` : undefined }}>{children}</div>;
|
||||
};
|
||||
|
||||
@ -1,21 +1,15 @@
|
||||
import { Checkbox } from './Checkbox'
|
||||
import { Country } from './Country'
|
||||
import { Email } from './Email'
|
||||
import { Message } from './Message'
|
||||
import { Number } from './Number'
|
||||
import { Select } from './Select'
|
||||
import { State } from './State'
|
||||
import { Text } from './Text'
|
||||
import { Textarea } from './Textarea'
|
||||
import { Checkbox } from "./Checkbox";
|
||||
import { Email } from "./Email";
|
||||
import { Number } from "./Number";
|
||||
import { Select } from "./Select";
|
||||
import { Text } from "./Text";
|
||||
import { Textarea } from "./Textarea";
|
||||
|
||||
export const fields = {
|
||||
checkbox: Checkbox,
|
||||
country: Country,
|
||||
email: Email,
|
||||
message: Message,
|
||||
number: Number,
|
||||
select: Select,
|
||||
state: State,
|
||||
text: Text,
|
||||
textarea: Textarea,
|
||||
}
|
||||
};
|
||||
|
||||
188
src/components/Blocks/GoogleReviews/GoogleReviews.tsx
Normal file
188
src/components/Blocks/GoogleReviews/GoogleReviews.tsx
Normal file
@ -0,0 +1,188 @@
|
||||
"use client";
|
||||
|
||||
import { CardStarRating, CardStarRatingProps, CardStarRatingSkeleton } from "@/components/Ratings/CardStarRating";
|
||||
import StarRating from "@/components/Ratings/StarRating";
|
||||
import Image from "next/image";
|
||||
import { Navigation } from "swiper/modules";
|
||||
import { Swiper, SwiperSlide } from "swiper/react";
|
||||
|
||||
export interface GoogleReviewProps {
|
||||
data: {
|
||||
ratingValue: number;
|
||||
totalRating: number;
|
||||
data: CardStarRatingProps["data"][];
|
||||
};
|
||||
}
|
||||
|
||||
export function GoogleReviews({ data }: GoogleReviewProps) {
|
||||
return (
|
||||
<section className="bg-scroll relative">
|
||||
<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>
|
||||
<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} />
|
||||
</div>
|
||||
|
||||
<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="mt-1">
|
||||
<StarRating size={20} value={data.ratingValue} />
|
||||
</div>
|
||||
<div className="text-xs font-semibold mt-">Over {data.totalRating} Reviews</div>
|
||||
</div>
|
||||
|
||||
<div className="mt-20 relative">
|
||||
<Swiper
|
||||
loop
|
||||
spaceBetween={0}
|
||||
slidesPerView={3}
|
||||
breakpoints={{
|
||||
900: {
|
||||
slidesPerView: 3,
|
||||
},
|
||||
500: {
|
||||
slidesPerView: 2, // When window width is <= 480px
|
||||
},
|
||||
0: {
|
||||
slidesPerView: 1,
|
||||
},
|
||||
}}
|
||||
modules={[Navigation]}
|
||||
navigation={{
|
||||
prevEl: ".snbp1",
|
||||
nextEl: ".snbn1",
|
||||
}}
|
||||
watchSlidesProgress
|
||||
resizeObserver
|
||||
className="team-carousel owl-carousel owl-theme overflow-hidden position-static"
|
||||
style={{
|
||||
opacity: 1,
|
||||
display: "block",
|
||||
}}
|
||||
>
|
||||
{/* Group item */}
|
||||
{data.data.map((rev, index) => (
|
||||
<SwiperSlide className="owl-item py-2 mt-5" key={index}>
|
||||
<div>
|
||||
<CardStarRating data={rev} />
|
||||
</div>
|
||||
</SwiperSlide>
|
||||
))}
|
||||
<div className="owl-controls clickable absolute top-6 w-full">
|
||||
<div className="owl-buttons">
|
||||
<div className="owl-prev snbp1 left" role="button" tabIndex={0}>
|
||||
<span className="visually-hidden">Previous Slide</span>
|
||||
<i className="mi-arrow-left" aria-hidden="true"></i>
|
||||
</div>
|
||||
<div className="owl-next snbn1" role="button" tabIndex={0}>
|
||||
<span className="visually-hidden">Next Slide</span>
|
||||
<i className="mi-arrow-right" aria-hidden="true"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/* End Group item */}
|
||||
</Swiper>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
||||
export function GoogleReviewsSkeleton() {
|
||||
return (
|
||||
<section className="bg-scroll relative">
|
||||
<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>
|
||||
<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} />
|
||||
</div>
|
||||
|
||||
<div className="container px-6">
|
||||
<h2 className="text-3xl font-bold text-center">Reviews</h2>
|
||||
<GoogleReviewsHeaderSkeleton />
|
||||
|
||||
<GoogleReviewsContentSkeleton />
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
||||
function GoogleReviewsHeaderSkeleton() {
|
||||
return (
|
||||
<div className="animate-pulse flex flex-1 justify-center">
|
||||
<div className="h-5 bg-gray-300 rounded w-1/3 mb-2"></div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function GoogleReviewsContentSkeleton() {
|
||||
return (
|
||||
<div className="mt-20 relative">
|
||||
<Swiper
|
||||
loop
|
||||
spaceBetween={0}
|
||||
slidesPerView={3}
|
||||
breakpoints={{
|
||||
900: {
|
||||
slidesPerView: 3,
|
||||
},
|
||||
500: {
|
||||
slidesPerView: 2, // When window width is <= 480px
|
||||
},
|
||||
0: {
|
||||
slidesPerView: 1,
|
||||
},
|
||||
}}
|
||||
modules={[Navigation]}
|
||||
navigation={{
|
||||
prevEl: ".snbp1",
|
||||
nextEl: ".snbn1",
|
||||
}}
|
||||
watchSlidesProgress
|
||||
resizeObserver
|
||||
className="team-carousel owl-carousel owl-theme overflow-hidden position-static"
|
||||
style={{
|
||||
opacity: 1,
|
||||
display: "block",
|
||||
}}
|
||||
>
|
||||
{/* Group item */}
|
||||
<SwiperSlide className="owl-item py-2 mt-5">
|
||||
<CardStarRatingSkeleton />
|
||||
</SwiperSlide>
|
||||
<SwiperSlide className="owl-item py-2 mt-5">
|
||||
<CardStarRatingSkeleton />
|
||||
</SwiperSlide>
|
||||
<SwiperSlide className="owl-item py-2 mt-5">
|
||||
<CardStarRatingSkeleton />
|
||||
</SwiperSlide>
|
||||
<SwiperSlide className="owl-item py-2 mt-5">
|
||||
<CardStarRatingSkeleton />
|
||||
</SwiperSlide>
|
||||
|
||||
<div className="owl-controls clickable absolute top-6 w-full">
|
||||
<div className="owl-buttons">
|
||||
<div className="owl-prev snbp1 left" role="button" tabIndex={0}>
|
||||
<span className="visually-hidden">Previous Slide</span>
|
||||
<i className="mi-arrow-left" aria-hidden="true"></i>
|
||||
</div>
|
||||
<div className="owl-next snbn1" role="button" tabIndex={0}>
|
||||
<span className="visually-hidden">Next Slide</span>
|
||||
<i className="mi-arrow-right" aria-hidden="true"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/* End Group item */}
|
||||
</Swiper>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@ -1,130 +1,66 @@
|
||||
"use client";
|
||||
import { fetchGoogleReviews } from "@/services/payload/google-reviews";
|
||||
import { GoogleReviewProps, GoogleReviews } from "./GoogleReviews";
|
||||
|
||||
import { CardStarRating, CardStarRatingProps } from "@/components/Ratings/CardStarRating";
|
||||
import StarRating from "@/components/Ratings/StarRating";
|
||||
import Image from "next/image";
|
||||
import { Navigation } from "swiper/modules";
|
||||
import { Swiper, SwiperSlide } from "swiper/react";
|
||||
// const data: CardStarRatingProps["data"][] = [
|
||||
// {
|
||||
// star: 5,
|
||||
// description:
|
||||
// "Today i did my cat scan , and met Raymond, he radiates hope and good will, i then met Larry who showed me the hospitality suite, i was overwhelmed by thier kindness, every one i have met so far has been truly amazing.while at physical therapy the doc said i had made a wise",
|
||||
// },
|
||||
// {
|
||||
// star: 5,
|
||||
// description: "Great and caring service. Completely satisfied.",
|
||||
// },
|
||||
// {
|
||||
// star: 5,
|
||||
// description: "Sincere and caring attitude...very professional and inspires confidence.",
|
||||
// },
|
||||
// {
|
||||
// star: 5,
|
||||
// description:
|
||||
// "I've been going to cochise oncology for many years and everyone is always professional and take the time to explain everything",
|
||||
// },
|
||||
// {
|
||||
// star: 5,
|
||||
// description: "One fine person\n Very concerning. Glad to see her",
|
||||
// },
|
||||
// {
|
||||
// star: 5,
|
||||
// description:
|
||||
// "Barbara was very professional and friendly. She shared all info with me and gave me a copy of my lab results.",
|
||||
// },
|
||||
// {
|
||||
// star: 5,
|
||||
// description:
|
||||
// "Barbara is great! She listens and ask questions on other issues outside her area just to be sure you’re well taken care of.",
|
||||
// },
|
||||
// {
|
||||
// star: 5,
|
||||
// description:
|
||||
// "Today, at Cochise Oncology, I had an appointment with Dr. Reid Culton. He explained in great detail from the medical chart of the blood work and listen to my concerns. Dr. Reid Culton also answered my questions in great detail. Thank you.",
|
||||
// },
|
||||
// {
|
||||
// star: 5,
|
||||
// description:
|
||||
// "I absolutely love the people that work at this place. From the front desk to radiation room. Everyone is loving and caring.",
|
||||
// },
|
||||
// ];
|
||||
|
||||
const data: CardStarRatingProps["data"][] = [
|
||||
{
|
||||
star: 5,
|
||||
description:
|
||||
"Today i did my cat scan , and met Raymond, he radiates hope and good will, i then met Larry who showed me the hospitality suite, i was overwhelmed by thier kindness, every one i have met so far has been truly amazing.while at physical therapy the doc said i had made a wise",
|
||||
},
|
||||
{
|
||||
star: 5,
|
||||
description: "Great and caring service. Completely satisfied.",
|
||||
},
|
||||
{
|
||||
star: 5,
|
||||
description: "Sincere and caring attitude...very professional and inspires confidence.",
|
||||
},
|
||||
{
|
||||
star: 5,
|
||||
description:
|
||||
"I've been going to cochise oncology for many years and everyone is always professional and take the time to explain everything",
|
||||
},
|
||||
{
|
||||
star: 5,
|
||||
description: "One fine person\n Very concerning. Glad to see her",
|
||||
},
|
||||
{
|
||||
star: 5,
|
||||
description:
|
||||
"Barbara was very professional and friendly. She shared all info with me and gave me a copy of my lab results.",
|
||||
},
|
||||
{
|
||||
star: 5,
|
||||
description:
|
||||
"Barbara is great! She listens and ask questions on other issues outside her area just to be sure you’re well taken care of.",
|
||||
},
|
||||
{
|
||||
star: 5,
|
||||
description:
|
||||
"Today, at Cochise Oncology, I had an appointment with Dr. Reid Culton. He explained in great detail from the medical chart of the blood work and listen to my concerns. Dr. Reid Culton also answered my questions in great detail. Thank you.",
|
||||
},
|
||||
{
|
||||
star: 5,
|
||||
description:
|
||||
"I absolutely love the people that work at this place. From the front desk to radiation room. Everyone is loving and caring.",
|
||||
},
|
||||
];
|
||||
export async function GoogleReviewsBlock() {
|
||||
const data = await fetchGoogleReviews();
|
||||
if (!data?.id) return <></>;
|
||||
|
||||
export function GoogleReviewsBlock() {
|
||||
return (
|
||||
<section className="bg-scroll relative">
|
||||
<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>
|
||||
<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} />
|
||||
</div>
|
||||
const dataReviews: GoogleReviewProps["data"] = {
|
||||
data:
|
||||
data.ratings?.map?.((r) => {
|
||||
return {
|
||||
star: r.ratingValue,
|
||||
description: r.description,
|
||||
};
|
||||
}) ?? [],
|
||||
ratingValue: data.ratingValue,
|
||||
totalRating: data.totalRating,
|
||||
};
|
||||
|
||||
<div className="container px-6">
|
||||
<h2 className="text-3xl font-bold text-cente">Reviews</h2>
|
||||
<div className="flex justify-center space-x-2">
|
||||
<h2 className="text-xl text-center font-bol">4.8</h2>
|
||||
<div className="mt-1">
|
||||
<StarRating size={20} value={4.8} />
|
||||
</div>
|
||||
<div className="text-xs font-semibold mt-">Over 200 Reviews</div>
|
||||
</div>
|
||||
<div className="mt-20 relative">
|
||||
<Swiper
|
||||
loop
|
||||
spaceBetween={0}
|
||||
slidesPerView={3}
|
||||
breakpoints={{
|
||||
900: {
|
||||
slidesPerView: 3,
|
||||
},
|
||||
500: {
|
||||
slidesPerView: 2, // When window width is <= 480px
|
||||
},
|
||||
0: {
|
||||
slidesPerView: 1,
|
||||
},
|
||||
}}
|
||||
modules={[Navigation]}
|
||||
navigation={{
|
||||
prevEl: ".snbp1",
|
||||
nextEl: ".snbn1",
|
||||
}}
|
||||
watchSlidesProgress
|
||||
resizeObserver
|
||||
className="team-carousel owl-carousel owl-theme overflow-hidden position-static"
|
||||
style={{
|
||||
opacity: 1,
|
||||
display: "block",
|
||||
}}
|
||||
>
|
||||
{/* Group item */}
|
||||
{data.map((rev, index) => (
|
||||
<SwiperSlide className="owl-item py-2 mt-5" key={index}>
|
||||
<div>
|
||||
<CardStarRating data={rev} />
|
||||
</div>
|
||||
</SwiperSlide>
|
||||
))}
|
||||
<div className="owl-controls clickable absolute top-6 w-full">
|
||||
<div className="owl-buttons">
|
||||
<div className="owl-prev snbp1 left" role="button" tabIndex={0}>
|
||||
<span className="visually-hidden">Previous Slide</span>
|
||||
<i className="mi-arrow-left" aria-hidden="true"></i>
|
||||
</div>
|
||||
<div className="owl-next snbn1" role="button" tabIndex={0}>
|
||||
<span className="visually-hidden">Next Slide</span>
|
||||
<i className="mi-arrow-right" aria-hidden="true"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/* End Group item */}
|
||||
</Swiper>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
return <GoogleReviews data={dataReviews} />;
|
||||
}
|
||||
|
||||
@ -1,129 +0,0 @@
|
||||
@use './queries.scss' as *;
|
||||
@use './colors.scss' as *;
|
||||
@use './type.scss' as *;
|
||||
|
||||
:root {
|
||||
--breakpoint-xs-width: #{$breakpoint-xs-width};
|
||||
--breakpoint-s-width: #{$breakpoint-s-width};
|
||||
--breakpoint-m-width: #{$breakpoint-m-width};
|
||||
--breakpoint-l-width: #{$breakpoint-l-width};
|
||||
--scrollbar-width: 17px;
|
||||
|
||||
--base: 24px;
|
||||
--font-body: system-ui;
|
||||
--font-mono: 'Roboto Mono', monospace;
|
||||
|
||||
--gutter-h: 180px;
|
||||
--block-padding: 120px;
|
||||
|
||||
--header-z-index: 100;
|
||||
--modal-z-index: 90;
|
||||
|
||||
@include large-break {
|
||||
--gutter-h: 144px;
|
||||
--block-padding: 96px;
|
||||
}
|
||||
|
||||
@include mid-break {
|
||||
--gutter-h: 24px;
|
||||
--block-padding: 60px;
|
||||
}
|
||||
}
|
||||
|
||||
/////////////////////////////
|
||||
// GLOBAL STYLES
|
||||
/////////////////////////////
|
||||
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
html {
|
||||
@extend %body;
|
||||
background: var(--color-white);
|
||||
-webkit-font-smoothing: antialiased;
|
||||
}
|
||||
|
||||
html,
|
||||
body,
|
||||
#app {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: var(--font-body);
|
||||
color: var(--color-black);
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
::selection {
|
||||
background: var(--color-green);
|
||||
color: var(--color-black);
|
||||
}
|
||||
|
||||
::-moz-selection {
|
||||
background: var(--color-green);
|
||||
color: var(--color-black);
|
||||
}
|
||||
|
||||
img {
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
display: block;
|
||||
}
|
||||
|
||||
h1 {
|
||||
@extend %h1;
|
||||
}
|
||||
|
||||
h2 {
|
||||
@extend %h2;
|
||||
}
|
||||
|
||||
h3 {
|
||||
@extend %h3;
|
||||
}
|
||||
|
||||
h4 {
|
||||
@extend %h4;
|
||||
}
|
||||
|
||||
h5 {
|
||||
@extend %h5;
|
||||
}
|
||||
|
||||
h6 {
|
||||
@extend %h6;
|
||||
}
|
||||
|
||||
p {
|
||||
margin: var(--base) 0;
|
||||
|
||||
@include mid-break {
|
||||
margin: calc(var(--base) * 0.75) 0;
|
||||
}
|
||||
}
|
||||
|
||||
ul,
|
||||
ol {
|
||||
padding-left: var(--base);
|
||||
margin: 0 0 var(--base);
|
||||
}
|
||||
|
||||
a {
|
||||
color: currentColor;
|
||||
|
||||
&:focus {
|
||||
opacity: 0.8;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
&:active {
|
||||
opacity: 0.7;
|
||||
outline: none;
|
||||
}
|
||||
}
|
||||
|
||||
svg {
|
||||
vertical-align: middle;
|
||||
}
|
||||
@ -1,10 +0,0 @@
|
||||
:root {
|
||||
--color-red: rgb(255, 0, 0);
|
||||
--color-green: rgb(178, 255, 214);
|
||||
--color-white: rgb(255, 255, 255);
|
||||
--color-dark-gray: rgb(51, 52, 52);
|
||||
--color-mid-gray: rgb(196, 196, 196);
|
||||
--color-gray: rgb(212, 212, 212);
|
||||
--color-light-gray: rgb(244, 244, 244);
|
||||
--color-black: rgb(0, 0, 0);
|
||||
}
|
||||
@ -1,2 +0,0 @@
|
||||
@forward './queries.scss';
|
||||
@forward './type.scss';
|
||||
@ -1,32 +0,0 @@
|
||||
$breakpoint-xs-width: 400px;
|
||||
$breakpoint-s-width: 768px;
|
||||
$breakpoint-m-width: 1024px;
|
||||
$breakpoint-l-width: 1440px;
|
||||
|
||||
////////////////////////////
|
||||
// MEDIA QUERIES
|
||||
/////////////////////////////
|
||||
|
||||
@mixin extra-small-break {
|
||||
@media (max-width: #{$breakpoint-xs-width}) {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin small-break {
|
||||
@media (max-width: #{$breakpoint-s-width}) {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin mid-break {
|
||||
@media (max-width: #{$breakpoint-m-width}) {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin large-break {
|
||||
@media (max-width: #{$breakpoint-l-width}) {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
@ -1,167 +0,0 @@
|
||||
@use 'queries' as *;
|
||||
|
||||
/////////////////////////////
|
||||
// HEADINGS
|
||||
/////////////////////////////
|
||||
|
||||
%h1,
|
||||
%h2,
|
||||
%h3,
|
||||
%h4,
|
||||
%h5,
|
||||
%h6 {
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
%h1 {
|
||||
margin: 50px 0;
|
||||
font-size: 84px;
|
||||
line-height: 1;
|
||||
|
||||
@include mid-break {
|
||||
font-size: 70px;
|
||||
}
|
||||
|
||||
@include small-break {
|
||||
margin: 24px 0;
|
||||
font-size: 36px;
|
||||
line-height: 42px;
|
||||
}
|
||||
}
|
||||
|
||||
%h2 {
|
||||
margin: 32px 0;
|
||||
font-size: 56px;
|
||||
line-height: 1;
|
||||
|
||||
@include mid-break {
|
||||
margin: 36px 0;
|
||||
font-size: 48px;
|
||||
}
|
||||
|
||||
@include small-break {
|
||||
margin: 24px 0;
|
||||
font-size: 28px;
|
||||
line-height: 32px;
|
||||
}
|
||||
}
|
||||
|
||||
%h3 {
|
||||
margin: 28px 0;
|
||||
font-size: 48px;
|
||||
line-height: 56px;
|
||||
|
||||
@include mid-break {
|
||||
font-size: 40px;
|
||||
line-height: 48px;
|
||||
}
|
||||
|
||||
@include small-break {
|
||||
margin: 24px 0;
|
||||
font-size: 24px;
|
||||
line-height: 30px;
|
||||
}
|
||||
}
|
||||
|
||||
%h4 {
|
||||
margin: 24px 0;
|
||||
font-size: 40px;
|
||||
line-height: 48px;
|
||||
|
||||
@include mid-break {
|
||||
font-size: 33px;
|
||||
line-height: 36px;
|
||||
}
|
||||
|
||||
@include small-break {
|
||||
margin: 20px 0;
|
||||
font-size: 20px;
|
||||
line-height: 24px;
|
||||
}
|
||||
}
|
||||
|
||||
%h5 {
|
||||
margin: 20px 0;
|
||||
font-size: 32px;
|
||||
line-height: 42px;
|
||||
|
||||
@include mid-break {
|
||||
font-size: 26px;
|
||||
line-height: 32px;
|
||||
}
|
||||
|
||||
@include small-break {
|
||||
margin: 16px 0;
|
||||
font-size: 18px;
|
||||
line-height: 24px;
|
||||
}
|
||||
}
|
||||
|
||||
%h6 {
|
||||
margin: 20px 0;
|
||||
font-size: 24px;
|
||||
line-height: 28px;
|
||||
|
||||
@include mid-break {
|
||||
font-size: 20px;
|
||||
line-height: 30px;
|
||||
}
|
||||
|
||||
@include small-break {
|
||||
margin: 16px 0;
|
||||
font-size: 16px;
|
||||
line-height: 22px;
|
||||
}
|
||||
}
|
||||
|
||||
/////////////////////////////
|
||||
// TYPE STYLES
|
||||
/////////////////////////////
|
||||
|
||||
%body {
|
||||
font-size: 18px;
|
||||
line-height: 32px;
|
||||
|
||||
@include mid-break {
|
||||
font-size: 15px;
|
||||
line-height: 24px;
|
||||
}
|
||||
|
||||
@include small-break {
|
||||
font-size: 13px;
|
||||
line-height: 24px;
|
||||
}
|
||||
}
|
||||
|
||||
%large-body {
|
||||
font-size: 25px;
|
||||
line-height: 32px;
|
||||
|
||||
@include mid-break {
|
||||
font-size: 22px;
|
||||
line-height: 30px;
|
||||
}
|
||||
|
||||
@include small-break {
|
||||
font-size: 17px;
|
||||
line-height: 24px;
|
||||
}
|
||||
}
|
||||
|
||||
%label {
|
||||
font-size: 16px;
|
||||
line-height: 24px;
|
||||
letter-spacing: 3px;
|
||||
text-transform: uppercase;
|
||||
|
||||
@include mid-break {
|
||||
font-size: 13px;
|
||||
letter-spacing: 2.75px;
|
||||
}
|
||||
|
||||
@include small-break {
|
||||
font-size: 12px;
|
||||
line-height: 18px;
|
||||
letter-spacing: 2.625px;
|
||||
}
|
||||
}
|
||||
@ -2,6 +2,7 @@ import { fetchBlogDetail } from "@/services/payload/blog";
|
||||
import { RichText } from "@payloadcms/richtext-lexical/react";
|
||||
import { headers } from "next/headers";
|
||||
import Image from "next/image";
|
||||
import { notFound } from "next/navigation";
|
||||
import { FaFacebook, FaLinkedin, FaTwitter } from "react-icons/fa";
|
||||
|
||||
export interface BlogDetailProps {
|
||||
@ -19,7 +20,9 @@ export default async function BlogDetail({ slug }: BlogDetailProps) {
|
||||
twitter: `https://twitter.com/intent/tweet?url=${fullUrl}`,
|
||||
};
|
||||
|
||||
if (!data) return <></>;
|
||||
if (!data) {
|
||||
notFound();
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
|
||||
import { useRef } from "react";
|
||||
|
||||
export default function Hero6() {
|
||||
export default function Hero() {
|
||||
const videoRef = useRef<any | null>(null);
|
||||
|
||||
return (
|
||||
@ -25,7 +25,7 @@ export default function Hero6() {
|
||||
<h1 className="hs-title-9">Cochise Oncology</h1>
|
||||
<p>Southern Arizona’s Only Complete Cancer Treatment Center in Sierra Vista.</p>
|
||||
<a
|
||||
href="#about"
|
||||
href="/contact"
|
||||
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"
|
||||
>
|
||||
|
||||
@ -1,7 +1,8 @@
|
||||
import { BeforeFooterBlock } from "@/components/Blocks/BeforeFooter";
|
||||
import { RenderBlocks } from "@/components/Blocks/RenderBlocks";
|
||||
import BlogDetail from "@/components/Blogs/BlogDetail";
|
||||
import { fetchPageBySlug } from "@/services/payload/page";
|
||||
import Image from "next/image";
|
||||
import { redirect } from "next/navigation";
|
||||
|
||||
export interface PageProps {
|
||||
slug: string | undefined;
|
||||
@ -11,7 +12,12 @@ export default async function Page({ slug }: PageProps) {
|
||||
const page = await fetchPageBySlug({ slug });
|
||||
|
||||
if (!page) {
|
||||
redirect("/page/not-found");
|
||||
return (
|
||||
<>
|
||||
<BlogDetail slug={slug} />;
|
||||
<BeforeFooterBlock />
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
|
||||
@ -19,3 +19,15 @@ export function CardStarRating({ data }: CardStarRatingProps) {
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export function CardStarRatingSkeleton() {
|
||||
return (
|
||||
<div className="bg-white p-2 rounded-lg shadow-md animate-pulse">
|
||||
<div className="flex justify-between">
|
||||
<div className="h-5 bg-gray-300 rounded w-1/3 mb-2"></div>
|
||||
<div className="h-5 bg-gray-300 rounded w-1/5 mb-2"></div>
|
||||
</div>
|
||||
<div className="h-16 bg-gray-300 rounded w-full mb-2"></div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
"use client";
|
||||
|
||||
import { Suspense } from "react";
|
||||
import { GoogleReviewsBlock } from "./Blocks/GoogleReviews";
|
||||
import { GoogleReviewsSkeleton } from "./Blocks/GoogleReviews/GoogleReviews";
|
||||
|
||||
export default function Testimonials() {
|
||||
// const isotopContainer = useRef<any | null>(null);
|
||||
@ -28,7 +28,9 @@ export default function Testimonials() {
|
||||
<GoogleReviewsBlock />
|
||||
</div>
|
||||
</div> */}
|
||||
<Suspense fallback={<GoogleReviewsSkeleton />}>
|
||||
<GoogleReviewsBlock />
|
||||
</Suspense>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
42
src/globals/GoogleReviews.ts
Normal file
42
src/globals/GoogleReviews.ts
Normal file
@ -0,0 +1,42 @@
|
||||
import type { GlobalConfig } from "payload";
|
||||
|
||||
export const GoogleReviews: GlobalConfig = {
|
||||
slug: "google-reviews",
|
||||
fields: [
|
||||
{
|
||||
name: "ratingValue",
|
||||
label: "Rating Value",
|
||||
type: "number",
|
||||
required: true,
|
||||
defaultValue: 0,
|
||||
},
|
||||
{
|
||||
name: "totalRating",
|
||||
type: "number",
|
||||
required: true,
|
||||
defaultValue: 0,
|
||||
},
|
||||
{
|
||||
label: "Ratings",
|
||||
name: "ratings",
|
||||
type: "array",
|
||||
fields: [
|
||||
{
|
||||
name: "ratingValue",
|
||||
label: "Rating Value",
|
||||
type: "number",
|
||||
required: true,
|
||||
defaultValue: 0,
|
||||
},
|
||||
{
|
||||
name: "description",
|
||||
type: "textarea",
|
||||
required: true,
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
admin: {
|
||||
hideAPIURL: true,
|
||||
},
|
||||
};
|
||||
@ -42,8 +42,12 @@ export interface Config {
|
||||
db: {
|
||||
defaultIDType: number;
|
||||
};
|
||||
globals: {};
|
||||
globalsSelect: {};
|
||||
globals: {
|
||||
'google-reviews': GoogleReview;
|
||||
};
|
||||
globalsSelect: {
|
||||
'google-reviews': GoogleReviewsSelect<false> | GoogleReviewsSelect<true>;
|
||||
};
|
||||
locale: null;
|
||||
user: User & {
|
||||
collection: 'users';
|
||||
@ -893,6 +897,42 @@ export interface PayloadMigrationsSelect<T extends boolean = true> {
|
||||
updatedAt?: T;
|
||||
createdAt?: T;
|
||||
}
|
||||
/**
|
||||
* This interface was referenced by `Config`'s JSON-Schema
|
||||
* via the `definition` "google-reviews".
|
||||
*/
|
||||
export interface GoogleReview {
|
||||
id: number;
|
||||
ratingValue: number;
|
||||
totalRating: number;
|
||||
ratings?:
|
||||
| {
|
||||
ratingValue: number;
|
||||
description: string;
|
||||
id?: string | null;
|
||||
}[]
|
||||
| null;
|
||||
updatedAt?: string | null;
|
||||
createdAt?: string | null;
|
||||
}
|
||||
/**
|
||||
* This interface was referenced by `Config`'s JSON-Schema
|
||||
* via the `definition` "google-reviews_select".
|
||||
*/
|
||||
export interface GoogleReviewsSelect<T extends boolean = true> {
|
||||
ratingValue?: T;
|
||||
totalRating?: T;
|
||||
ratings?:
|
||||
| T
|
||||
| {
|
||||
ratingValue?: T;
|
||||
description?: T;
|
||||
id?: T;
|
||||
};
|
||||
updatedAt?: T;
|
||||
createdAt?: T;
|
||||
globalType?: T;
|
||||
}
|
||||
/**
|
||||
* This interface was referenced by `Config`'s JSON-Schema
|
||||
* via the `definition` "auth".
|
||||
|
||||
@ -24,6 +24,7 @@ import {
|
||||
lexicalEditor,
|
||||
LinkFeature,
|
||||
} from "@payloadcms/richtext-lexical";
|
||||
import { GoogleReviews } from "@/globals/GoogleReviews";
|
||||
|
||||
const filename = fileURLToPath(import.meta.url);
|
||||
const dirname = path.dirname(filename);
|
||||
@ -50,6 +51,7 @@ export default buildConfig({
|
||||
theme: "dark",
|
||||
},
|
||||
collections: [Users, Media, Blogs, Pages, Teams, BlogCategories, BlogTags],
|
||||
globals: [GoogleReviews],
|
||||
secret: process.env.PAYLOAD_SECRET || "",
|
||||
typescript: {
|
||||
outputFile: path.resolve(dirname, "payload-types.ts"),
|
||||
|
||||
8
src/services/payload/google-reviews.ts
Normal file
8
src/services/payload/google-reviews.ts
Normal file
@ -0,0 +1,8 @@
|
||||
import payloadConfig from "@/payload.config";
|
||||
import { getPayload } from "payload";
|
||||
|
||||
export async function fetchGoogleReviews() {
|
||||
const payload = await getPayload({ config: payloadConfig });
|
||||
const dataQuery = await payload.findGlobal({ slug: "google-reviews" });
|
||||
return dataQuery;
|
||||
}
|
||||
Loading…
x
Reference in New Issue
Block a user