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

dev #17

Merged
RizqiSyahrendra merged 3 commits from dev into main 2025-03-13 08:40:48 +00:00
Conversation 0 Commits 3 Files Changed 15 +68 -411
15 changed files with 68 additions and 411 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
package.json
View File

@ -9,8 +9,8 @@
"build": "next build",
"start": "next start",
"lint": "next lint",
"payload": "cross-env PAYLOAD_CONFIG_PATH=src/payload.config.ts payload",
"payload:generate:types": "payload generate:types",
"payload:generate:importMap": "payload generate:importMap",
"tsc": "tsc"
},
"dependencies": {
@ -69,4 +69,4 @@
"typescript": "^5"
},
"packageManager": "yarn@4.6.0"
}
}

4
src/app/(payload)/admin/importMap.js
View File

@ -22,6 +22,7 @@ import { BoldFeatureClient as BoldFeatureClient_e70f5e05f09f93e00b997edb1ef0c864
import { ItalicFeatureClient as ItalicFeatureClient_e70f5e05f09f93e00b997edb1ef0c864 } from '@payloadcms/richtext-lexical/client'
import { FixedToolbarFeatureClient as FixedToolbarFeatureClient_e70f5e05f09f93e00b997edb1ef0c864 } from '@payloadcms/richtext-lexical/client'
import { default as default_382980007b1adf7b8e8832707f1169fb } from '@/components/Logo/AdminLogo'
import { S3ClientUploadHandler as S3ClientUploadHandler_f97aa6c64367fa259c5bc0567239ef24 } from '@payloadcms/storage-s3/client'
export const importMap = {
"@payloadcms/richtext-lexical/rsc#RscEntryLexicalCell": RscEntryLexicalCell_44fe37237e0ebf4470c9990d8cb7b07e,
@ -47,5 +48,6 @@ export const importMap = {
"@payloadcms/richtext-lexical/client#BoldFeatureClient": BoldFeatureClient_e70f5e05f09f93e00b997edb1ef0c864,
"@payloadcms/richtext-lexical/client#ItalicFeatureClient": ItalicFeatureClient_e70f5e05f09f93e00b997edb1ef0c864,
"@payloadcms/richtext-lexical/client#FixedToolbarFeatureClient": FixedToolbarFeatureClient_e70f5e05f09f93e00b997edb1ef0c864,
"/components/Logo/AdminLogo#default": default_382980007b1adf7b8e8832707f1169fb
"/components/Logo/AdminLogo#default": default_382980007b1adf7b8e8832707f1169fb,
"@payloadcms/storage-s3/client#S3ClientUploadHandler": S3ClientUploadHandler_f97aa6c64367fa259c5bc0567239ef24
}

34
src/app/globals.css
View File

@ -36,31 +36,43 @@ body {
}
@layer components {
/* casual button */
.ext-btn {
@apply py-2 px-4 rounded-full hover:opacity-95 hover:scale-95 transition-transform font-semibold no-underline;
@apply py-2 px-4 rounded-full hover:opacity-95 hover:scale-105 transition-all font-medium no-underline duration-300;
}
.ext-btn-primary {
@apply bg-extColorPrimary text-white;
@apply ext-btn bg-extColorPrimary text-white hover:text-extColorPrimary3;
}
.ext-btn-primary2 {
@apply bg-extColorPrimary2 text-white;
@apply ext-btn bg-extColorPrimary2 text-white hover:text-extColorPrimary3;
}
.ext-btn-primary3 {
@apply bg-extColorPrimary3 text-white;
@apply ext-btn bg-extColorPrimary3 text-white hover:text-extColorPrimary3;
}
.ext-btn-primary4 {
@apply bg-extColorPrimary4 text-white;
@apply ext-btn bg-extColorPrimary4 text-white hover:text-extColorPrimary3;
}
.ext-btn-shadow-sm {
@apply py-2 px-3 rounded-full text-sm font-medium no-underline shadow-[0px_0px_10px_0px_rgba(0,0,0,0.5)];
/* CTA button */
.ext-btn-cta {
@apply inline-block !text-[16px] font-medium bg-extColorPrimary6 hover:bg-extColorPrimary8 !text-white py-1 px-6 hover:scale-105 rounded-full text-lg shadow-sm transition-all duration-300;
}
.ext-btn-shadow-sm-primary4 {
@apply bg-extColorPrimary4 text-white hover:text-white hover:bg-extColorPrimary6 transition-colors;
.ext-btn-cta * {
@apply !inline-block;
}
.ext-btn-cta-md {
@apply ext-btn-cta !text-lg py-4 px-8;
}
.ext-btn-shadow-sm-primary8 {
@apply bg-extColorPrimary8 text-white hover:text-white hover:bg-extColorPrimary6 transition-colors;
/* button with shadow */
.ext-btn-shadow {
@apply py-2 px-3 rounded-full text-sm font-medium no-underline shadow-[0px_0px_10px_0px_rgba(0,0,0,0.5)] transition-colors duration-300;
}
.ext-btn-shadow-primary4 {
@apply ext-btn-shadow bg-extColorPrimary4 text-white hover:text-white hover:bg-extColorPrimary6;
}
.ext-btn-shadow-primary8 {
@apply ext-btn-shadow bg-extColorPrimary8 text-white hover:text-white hover:bg-extColorPrimary6;
}
.shadow-nav {

8
src/components/Blocks/BeforeFooter/index.tsx
View File

@ -1,4 +1,5 @@
import Link from "next/link";
import { FaArrowRight } from "react-icons/fa";
export interface BeforeFooterBlockProps {
id?: string;
@ -50,11 +51,8 @@ export function BeforeFooterBlock({ title, description, buttonText, showLinier =
<h4 className="text-4xl font-medium mb-3">{title ?? placeholderTitle}</h4>
<span className="text-lg leading-relaxed mb-6">{description ?? placeholderDescription}</span>
<div className="pt-5">
<Link
href="/contact"
className="inline-block bg-extColorPrimary6 hover:bg-extColorPrimary8 text-white py-3 px-6 hover:scale-105 rounded-full text-lg shadow-sm transition-all duration-500"
>
{buttonText ?? placeholderButtonText} →
<Link href="/contact" className="ext-btn-cta-md">
{buttonText ?? placeholderButtonText} <FaArrowRight />
</Link>
</div>
</div>

2
src/components/Blocks/BoxMenuGrid/BoxMenu.tsx
View File

@ -11,7 +11,7 @@ export default function BoxMenu({ title, description, href }: BoxMenuProps) {
<div className="flex flex-col bg-extColorPrimary4 text-white rounded-md items-center px-4 py-4">
<span className="font-semibold text-2xl">{title ?? ""}</span>
<div className="text-center font-medium mt-4">{description ?? ""}</div>
<Link href={fixedHref(href)} className="ext-btn ext-btn-primary mt-4">
<Link href={fixedHref(href)} className="ext-btn-primary mt-4">
Learn More
</Link>
</div>

132
src/components/Blocks/Contact/index.tsx
View File

@ -1,5 +1,7 @@
import { fetchContact } from "@/services/payload/contact";
import { Suspense } from "react";
import { FaClock, FaFax, FaMapMarkerAlt } from "react-icons/fa";
import { GiRotaryPhone } from "react-icons/gi";
export default function ContactBlock() {
return (
@ -31,22 +33,8 @@ async function ContactWithData() {
<div className="row mb-60 mb-sm-50">
{/* Contact Item */}
<div className="col-sm-6 mb-xs-30 d-flex align-items-stretch">
<div className="alt-features-item border-left mt-0">
<div className="alt-features-icon">
<svg
width={24}
height={24}
viewBox="0 0 24 24"
fill="currentColor"
aria-hidden="true"
xmlns="http://www.w3.org/2000/svg"
fillRule="evenodd"
clipRule="evenodd"
>
<path d="M12 2C8.134 2 5 5.134 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.866-3.134-7-7-7zm0 9.5c-1.381 0-2.5-1.119-2.5-2.5s1.119-2.5 2.5-2.5 2.5 1.119 2.5 2.5-1.119 2.5-2.5 2.5z" />
</svg>
</div>
<div className="alt-features-item border-left mt-0 fadeScaleIn">
<FaMapMarkerAlt className="text-4xl m-5" />
<h4 className="alt-features-title">Location</h4>
<div className="alt-features-descr clearlinks">
<div>
@ -60,21 +48,8 @@ async function ContactWithData() {
{/* End Contact Item */}
{/* Contact Item */}
<div className="col-sm-6 d-flex align-items-stretch">
<div className="alt-features-item border-left mt-0">
<div className="alt-features-icon">
<svg
width={24}
height={24}
viewBox="0 0 24 24"
fill="currentColor"
aria-hidden="true"
xmlns="http://www.w3.org/2000/svg"
fillRule="evenodd"
clipRule="evenodd"
>
<path d="M17 2H7C5.9 2 5 2.9 5 4v16c0 1.1.9 2 2 2h10c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm0 17H7V5h10v14zM12 16c.55 0 1-.45 1-1s-.45-1-1-1-1 .45-1 1 .45 1 1 1z" />
</svg>
</div>
<div className="alt-features-item border-left mt-0 fadeScaleIn">
<GiRotaryPhone className="text-4xl m-5" />
<h4 className="alt-features-title">Phone</h4>
<div className="alt-features-descr clearlinks">
<div>
@ -88,21 +63,8 @@ async function ContactWithData() {
<div className="row mb-60 mb-sm-50">
{/* Contact Item */}
<div className="col-sm-6 mb-xs-30 d-flex align-items-stretch">
<div className="alt-features-item border-left mt-0">
<div className="alt-features-icon">
<svg
width={24}
height={24}
viewBox="0 0 24 24"
fill="currentColor"
aria-hidden="true"
xmlns="http://www.w3.org/2000/svg"
fillRule="evenodd"
clipRule="evenodd"
>
<path d="M12 2C6.486 2 2 6.486 2 12s4.486 10 10 10 10-4.486 10-10S17.514 2 12 2zm0 18c-4.411 0-8-3.589-8-8s3.589-8 8-8 8 3.589 8 8-3.589 8-8 8zm1-8h4v2h-6V7h2v5z" />
</svg>
</div>
<div className="alt-features-item border-left mt-0 fadeScaleIn">
<FaClock className="text-4xl m-5" />
<h4 className="alt-features-title">Hours</h4>
<div className="alt-features-descr clearlinks">
{Array.isArray(contact?.hours) &&
@ -117,21 +79,8 @@ async function ContactWithData() {
{/* End Contact Item */}
{/* Contact Item */}
<div className="col-sm-6 mb-xs-30 d-flex align-items-stretch">
<div className="alt-features-item border-left mt-0">
<div className="alt-features-icon">
<svg
width={24}
height={24}
viewBox="0 0 24 24"
fill="currentColor"
aria-hidden="true"
xmlns="http://www.w3.org/2000/svg"
fillRule="evenodd"
clipRule="evenodd"
>
<path d="M12 2C6.486 2 2 6.486 2 12s4.486 10 10 10 10-4.486 10-10S17.514 2 12 2zm0 18c-4.411 0-8-3.589-8-8s3.589-8 8-8 8 3.589 8 8-3.589 8-8 8zm1-12h-2v2h2V8zm0 4h-2v6h2v-6zm-4-2H7v2h2v-2zm6 0h-2v2h2v-2z" />
</svg>
</div>
<div className="alt-features-item border-left mt-0 fadeScaleIn">
<FaFax className="text-4xl m-5" />
<h4 className="alt-features-title">Fax</h4>
<div className="alt-features-descr clearlinks">
<div>
@ -182,21 +131,7 @@ function ContactSkeleton() {
{/* Contact Item */}
<div className="col-sm-6 mb-xs-30 d-flex align-items-stretch">
<div className="flex-1 alt-features-item border-left mt-0">
<div className="alt-features-icon">
<svg
width={24}
height={24}
viewBox="0 0 24 24"
fill="currentColor"
aria-hidden="true"
xmlns="http://www.w3.org/2000/svg"
fillRule="evenodd"
clipRule="evenodd"
>
<path d="M12 2C8.134 2 5 5.134 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.866-3.134-7-7-7zm0 9.5c-1.381 0-2.5-1.119-2.5-2.5s1.119-2.5 2.5-2.5 2.5 1.119 2.5 2.5-1.119 2.5-2.5 2.5z" />
</svg>
</div>
<FaMapMarkerAlt className="text-4xl m-5" />
<h4 className="alt-features-title">Location</h4>
<div className="h-3 bg-gray-300 rounded flex-1"></div>
</div>
@ -205,20 +140,7 @@ function ContactSkeleton() {
{/* Contact Item */}
<div className="col-sm-6 d-flex align-items-stretch">
<div className="flex-1 alt-features-item border-left mt-0">
<div className="alt-features-icon">
<svg
width={24}
height={24}
viewBox="0 0 24 24"
fill="currentColor"
aria-hidden="true"
xmlns="http://www.w3.org/2000/svg"
fillRule="evenodd"
clipRule="evenodd"
>
<path d="M17 2H7C5.9 2 5 2.9 5 4v16c0 1.1.9 2 2 2h10c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm0 17H7V5h10v14zM12 16c.55 0 1-.45 1-1s-.45-1-1-1-1 .45-1 1 .45 1 1 1z" />
</svg>
</div>
<GiRotaryPhone className="text-4xl m-5" />
<h4 className="alt-features-title">Phone</h4>
<div className="h-3 bg-gray-300 rounded flex-1"></div>
</div>
@ -229,20 +151,7 @@ function ContactSkeleton() {
{/* Contact Item */}
<div className="col-sm-6 mb-xs-30 d-flex align-items-stretch">
<div className="flex-1 alt-features-item border-left mt-0">
<div className="alt-features-icon">
<svg
width={24}
height={24}
viewBox="0 0 24 24"
fill="currentColor"
aria-hidden="true"
xmlns="http://www.w3.org/2000/svg"
fillRule="evenodd"
clipRule="evenodd"
>
<path d="M12 2C6.486 2 2 6.486 2 12s4.486 10 10 10 10-4.486 10-10S17.514 2 12 2zm0 18c-4.411 0-8-3.589-8-8s3.589-8 8-8 8 3.589 8 8-3.589 8-8 8zm1-8h4v2h-6V7h2v5z" />
</svg>
</div>
<FaClock className="text-4xl m-5" />
<h4 className="alt-features-title">Hours</h4>
<div className="h-3 bg-gray-300 rounded flex-1"></div>
</div>
@ -251,20 +160,7 @@ function ContactSkeleton() {
{/* Contact Item */}
<div className="col-sm-6 mb-xs-30 d-flex align-items-stretch">
<div className="flex-1 alt-features-item border-left mt-0">
<div className="alt-features-icon">
<svg
width={24}
height={24}
viewBox="0 0 24 24"
fill="currentColor"
aria-hidden="true"
xmlns="http://www.w3.org/2000/svg"
fillRule="evenodd"
clipRule="evenodd"
>
<path d="M12 2C6.486 2 2 6.486 2 12s4.486 10 10 10 10-4.486 10-10S17.514 2 12 2zm0 18c-4.411 0-8-3.589-8-8s3.589-8 8-8 8 3.589 8 8-3.589 8-8 8zm1-12h-2v2h2V8zm0 4h-2v6h2v-6zm-4-2H7v2h2v-2zm6 0h-2v2h2v-2z" />
</svg>
</div>
<FaFax className="text-4xl m-5" />
<h4 className="alt-features-title">Fax</h4>
<div className="h-3 bg-gray-300 rounded flex-1"></div>
</div>

4
src/components/Blocks/Form/index.tsx
View File

@ -89,7 +89,7 @@ export const FormBlock: React.FC<
}, 250);
try {
const req = await fetch(`${process.env.NEXT_PUBLIC_PAYLOAD_URL}/api/form-submissions`, {
const req = await fetch(`/api/form-submissions`, {
body: JSON.stringify({
form: formID,
submissionData: dataToSend,
@ -140,7 +140,7 @@ export const FormBlock: React.FC<
);
return (
<div>
<div className="container">
<div>
{!!enableIntro && introContent && !hasSubmitted && <RichText content={introContent} />}
{!isLoading && hasSubmitted && confirmationType === "message" && <RichText content={confirmationMessage} />}

2
src/components/Blocks/RenderBlocks.tsx
View File

@ -51,7 +51,7 @@ export const RenderBlocks: React.FC<{
);
} else if (blockType === "formBlock") {
return (
<div className="my-10 px-8" key={index}>
<div className="my-10" key={index}>
<FormBlock
id={block.id}
enableIntro={block.enableIntro}

2
src/components/Blogs/BlogCardItem.tsx
View File

@ -31,7 +31,7 @@ export function BlogCardItem({ data }: BlogCardItemProps) {
<a href={`/${data.slug}/`}>{data.title}</a>
</h2>
<div className="flex justify-center mt-2">
<a href={`/${data.slug}/`} className="ext-btn-shadow-sm ext-btn-shadow-sm-primary8">
<a href={`/${data.slug}/`} className="ext-btn-shadow-primary8">
Continue Reading
</a>
</div>

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

@ -1,233 +0,0 @@
import { fetchContact } from "@/services/payload/contact";
import { FaClock, FaFax, FaMapMarkerAlt } from "react-icons/fa";
import { GiRotaryPhone } from "react-icons/gi";
import { Suspense } from "react";
export default function Contact() {
return (
<>
<Suspense fallback={<ContactSkeleton />}>
<ContactWithData />
</Suspense>
</>
);
}
async function ContactWithData() {
const contact = await fetchContact();
return (
<div className="container position-relative">
<div className="row">
<div className="col-lg-6">
<div className="row mb-50">
<div className="col-lg-10">
<h2 className="section-caption-slick mb-xs-10">Contact Us</h2>
</div>
</div>
</div>
</div>
<div className="row" data-wow-delay="0.5s">
<div className="col-md-6 mb-sm-10">
{/* Contact Form */}
<div className="row mb-60 mb-sm-50">
{/* Contact Item */}
<div className="col-sm-6 mb-xs-30 d-flex align-items-stretch">
<div className="alt-features-item border-left mt-0 wow fadeScaleIn" data-wow-delay=".3s">
<FaMapMarkerAlt className="text-4xl m-5" />
<h4 className="alt-features-title">Location</h4>
<div className="alt-features-descr clearlinks">
<div>
<a target="_blank" href={contact?.location?.href ?? "#"}>
{contact?.fullLocation ?? ""}
</a>
</div>
</div>
</div>
</div>
{/* End Contact Item */}
{/* Contact Item */}
<div className="col-sm-6 d-flex align-items-stretch">
<div className="alt-features-item border-left mt-0 wow fadeScaleIn" data-wow-delay=".5s">
<GiRotaryPhone className="text-4xl m-5" />
<h4 className="alt-features-title">Phone</h4>
<div className="alt-features-descr clearlinks">
<div>
<a href={`tel:${contact?.phone ?? "#"}`}>{contact?.phone ?? ""}</a>
</div>
</div>
</div>
</div>
{/* End Contact Item */}
</div>
<div className="row mb-60 mb-sm-50">
{/* Contact Item */}
<div className="col-sm-6 mb-xs-30 d-flex align-items-stretch">
<div className="alt-features-item border-left mt-0 wow fadeScaleIn" data-wow-delay=".3s">
<FaClock className="text-4xl m-5" />
<h4 className="alt-features-title">Hours</h4>
<div className="alt-features-descr clearlinks">
{Array.isArray(contact?.hours) &&
contact.hours.map((h) => (
<p key={h.id} className="text-wrap">
{h.hour ?? ""}
</p>
))}
</div>
</div>
</div>
{/* End Contact Item */}
{/* Contact Item */}
<div className="col-sm-6 mb-xs-30 d-flex align-items-stretch">
<div className="alt-features-item border-left mt-0 wow fadeScaleIn" data-wow-delay=".3s">
<FaFax className="text-4xl m-5" />
<h4 className="alt-features-title">Fax</h4>
<div className="alt-features-descr clearlinks">
<div>
<a href={`tel:${contact?.fax ?? "#"}`}>{contact?.fax ?? ""}</a>
</div>
</div>
</div>
</div>
{/* End Contact Item */}
</div>
{/* End Contact Form */}
</div>
<div className="col-md-6 d-flex align-items-stretch">
{/* Google Map */}
<div className="map-boxed">
<iframe
src="https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d108795.7060636289!2d-110.242613!3d31.555297!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x86d7292e9b858975%3A0xc2519e5d827cd79c!2sCochise%20Oncology!5e0!3m2!1sen!2sus!4v1740412623968!5m2!1sen!2sus"
width={600}
height={450}
style={{ border: 0 }}
loading="lazy"
referrerPolicy="no-referrer-when-downgrade"
/>
</div>
{/* End Google Map */}
</div>
</div>
</div>
);
}
function ContactSkeleton() {
return (
<div className="container position-relative animate-pulse">
<div className="row">
<div className="col-lg-6">
<div className="row mb-50">
<div className="col-lg-10">
<h2 className="section-caption-slick mb-xs-10">Contact Us</h2>
</div>
</div>
</div>
</div>
<div className="row">
<div className="col-md-6 mb-sm-10">
{/* Contact Form */}
<div className="row mb-60 mb-sm-50">
{/* Contact Item */}
<div className="col-sm-6 mb-xs-30 d-flex align-items-stretch">
<div className="flex-1 alt-features-item border-left mt-0">
<div className="alt-features-icon">
<svg
width={24}
height={24}
viewBox="0 0 24 24"
fill="currentColor"
aria-hidden="true"
xmlns="http://www.w3.org/2000/svg"
fillRule="evenodd"
clipRule="evenodd"
>
<path d="M12 2C8.134 2 5 5.134 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.866-3.134-7-7-7zm0 9.5c-1.381 0-2.5-1.119-2.5-2.5s1.119-2.5 2.5-2.5 2.5 1.119 2.5 2.5-1.119 2.5-2.5 2.5z" />
</svg>
</div>
<h4 className="alt-features-title">Location</h4>
<div className="h-3 bg-gray-300 rounded flex-1"></div>
</div>
</div>
{/* End Contact Item */}
{/* Contact Item */}
<div className="col-sm-6 d-flex align-items-stretch">
<div className="flex-1 alt-features-item border-left mt-0">
<div className="alt-features-icon">
<svg
width={24}
height={24}
viewBox="0 0 24 24"
fill="currentColor"
aria-hidden="true"
xmlns="http://www.w3.org/2000/svg"
fillRule="evenodd"
clipRule="evenodd"
>
<path d="M17 2H7C5.9 2 5 2.9 5 4v16c0 1.1.9 2 2 2h10c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm0 17H7V5h10v14zM12 16c.55 0 1-.45 1-1s-.45-1-1-1-1 .45-1 1 .45 1 1 1z" />
</svg>
</div>
<h4 className="alt-features-title">Phone</h4>
<div className="h-3 bg-gray-300 rounded flex-1"></div>
</div>
</div>
{/* End Contact Item */}
</div>
<div className="row mb-60 mb-sm-50">
{/* Contact Item */}
<div className="col-sm-6 mb-xs-30 d-flex align-items-stretch">
<div className="flex-1 alt-features-item border-left mt-0">
<div className="alt-features-icon">
<svg
width={24}
height={24}
viewBox="0 0 24 24"
fill="currentColor"
aria-hidden="true"
xmlns="http://www.w3.org/2000/svg"
fillRule="evenodd"
clipRule="evenodd"
>
<path d="M12 2C6.486 2 2 6.486 2 12s4.486 10 10 10 10-4.486 10-10S17.514 2 12 2zm0 18c-4.411 0-8-3.589-8-8s3.589-8 8-8 8 3.589 8 8-3.589 8-8 8zm1-8h4v2h-6V7h2v5z" />
</svg>
</div>
<h4 className="alt-features-title">Hours</h4>
<div className="h-3 bg-gray-300 rounded flex-1"></div>
</div>
</div>
{/* End Contact Item */}
{/* Contact Item */}
<div className="col-sm-6 mb-xs-30 d-flex align-items-stretch">
<div className="flex-1 alt-features-item border-left mt-0">
<div className="alt-features-icon">
<svg
width={24}
height={24}
viewBox="0 0 24 24"
fill="currentColor"
aria-hidden="true"
xmlns="http://www.w3.org/2000/svg"
fillRule="evenodd"
clipRule="evenodd"
>
<path d="M12 2C6.486 2 2 6.486 2 12s4.486 10 10 10 10-4.486 10-10S17.514 2 12 2zm0 18c-4.411 0-8-3.589-8-8s3.589-8 8-8 8 3.589 8 8-3.589 8-8 8zm1-12h-2v2h2V8zm0 4h-2v6h2v-6zm-4-2H7v2h2v-2zm6 0h-2v2h2v-2z" />
</svg>
</div>
<h4 className="alt-features-title">Fax</h4>
<div className="h-3 bg-gray-300 rounded flex-1"></div>
</div>
</div>
{/* End Contact Item */}
</div>
{/* End Contact Form */}
</div>
<div className="col-md-6 d-flex align-items-stretch">
{/* Google Map */}
<div className="h-80 bg-gray-300 rounded flex-1"></div>
{/* End Google Map */}
</div>
</div>
</div>
);
}

17
src/components/Contacts/ContactForm.tsx
View File

@ -1,17 +0,0 @@
import { fetchForm } from "@/services/payload/form";
import { FormBlock } from "@/components/Blocks/Form";
export default async function ContactForm() {
const form = await fetchForm(1);
if (!form) return <></>;
return (
<div className="box-shadow bg-white round p-4 p-sm-5 position-relative z-index-1">
<h4 className="h3 mb-40 mb-sm-30">{form?.title ?? ""}</h4>
<div>
<FormBlock enableIntro={true} form={form} />
</div>
</div>
);
}

15
src/components/Header.tsx
View File

@ -13,7 +13,7 @@ const shareIcons: Record<string, any> = {
dom: (
<span className="social-nav flex text-2xl text-white space-x-3 lg:space-x-1">
<Image src="/assets/icons/phone.png" alt="Phone" width={30} height={25} />
<b className="text-[17px]">(520) 803-6644</b>
<b className="text-[17px] hover:!text-extColorPrimary3 transition-all duration-300">(520) 803-6644</b>
</span>
),
},
@ -21,7 +21,7 @@ const shareIcons: Record<string, any> = {
link: "https://www.facebook.com/p/Cochise-Oncology-61556262839823",
dom: (
<span className="social-nav flex text-2xl text-white space-x-3 lg:space-x-1">
<FaFacebook size={25} />
<FaFacebook size={25} className="hover:!text-extColorPrimary3 transition-all duration-300" />
<b className="text-[17px] lg:hidden">Facebook</b>
</span>
),
@ -30,7 +30,7 @@ const shareIcons: Record<string, any> = {
link: "https://linkedin.com/company/cochise-oncology",
dom: (
<span className="social-nav flex text-2xl text-white space-x-3 lg:space-x-1">
<FaLinkedin size={25} />
<FaLinkedin size={25} className="hover:!text-extColorPrimary3" />
<b className="text-[17px] lg:hidden">Linkedin</b>
</span>
),
@ -65,8 +65,8 @@ export default function Header({ links }: { links: typeof navMenuData }) {
<Image
src="/assets/images/demo-slick/logo-dark.webp"
alt="Company Logo"
width={165}
height={100}
width={204}
height={104}
className="dark-mode-logo"
/>
</Link>
@ -75,10 +75,7 @@ export default function Header({ links }: { links: typeof navMenuData }) {
<li>
<div className="flex flex-col items-center h-full w-full content-center justify-center gap-2">
<div className="flex justify-center">
<a
href="/contact"
className="bg-extColorPrimary6 hover:bg-extColorPrimary8 px-4 py-2 rounded-full text-white font-semibold hover:cursor-pointer hover:scale-[1.15] mt-3 lg:mt-0 transition-all duration-300"
>
<a href="/contact" className="ext-btn-cta">
REQUEST CONSULTATION
</a>
</div>

5
src/components/HeaderNav.tsx
View File

@ -45,6 +45,7 @@ export default function HeaderNav({ links, animateY = false }: { links: typeof n
<li>
{!Array.isArray(link?.child) && (
<Link
prefetch={false}
href={link.href}
className="!text-white hover:!text-extColorPrimary3 !text-[20px] !transition-all !duration-500"
>
@ -64,6 +65,7 @@ export default function HeaderNav({ links, animateY = false }: { links: typeof n
{Array.isArray(link?.child) && (
<div onMouseOver={() => setHoveredNavItem(`${index}`)} onMouseLeave={() => setHoveredNavItem("")}>
<Link
prefetch={false}
href={link?.href ?? "#"}
className="mn-has-sub !flex justify-between items-center !text-white hover:!text-extColorPrimary3 !text-[20px] !transition-all !duration-500"
onClick={() => toggleDropdown([link.text])}
@ -82,6 +84,7 @@ export default function HeaderNav({ links, animateY = false }: { links: typeof n
>
{!Array.isArray(subLink?.child) && (
<Link
prefetch={false}
href={subLink?.href}
onClick={() => toggleMobileMenu()}
className="!text-[14px] !text-white hover:!bg-extColorPrimary5 hover:!text-extColorPrimary3 !transition-all !duration-500"
@ -92,6 +95,7 @@ export default function HeaderNav({ links, animateY = false }: { links: typeof n
{Array.isArray(subLink?.child) && (
<>
<Link
prefetch={false}
href={subLink?.href ?? "#"}
className="mn-has-sub !flex !justify-between !items-center !text-white hover:!bg-extColorPrimary5 hover:!text-extColorPrimary3 transition-all duration-500"
onClick={() => setIsSubDropdownOpen(`${index}-${subLinkIdx}`)}
@ -106,6 +110,7 @@ export default function HeaderNav({ links, animateY = false }: { links: typeof n
{subLink.child.map((subLink2: any, subLinkIdx2: number) => (
<li key={subLinkIdx2}>
<Link
prefetch={false}
href={subLink2?.href}
className="!text-[14px] !items-center !text-white hover:!bg-extColorPrimary5 hover:!text-extColorPrimary3 transition-all duration-500"
onClick={() => toggleMobileMenu()}

11
src/components/Hero.tsx
View File

@ -22,15 +22,10 @@ export default function Hero() {
<h2 className="hs-title-3">Healing Begins Here</h2>
<h1 className="text-3xl md:text-6xl">Cochise Oncology</h1>
<p className="text-xl">Southern Arizona’s Only Complete Cancer Treatment Center in Sierra Vista.</p>
<a
href="/contact"
// className="btn btn-mod btn-border-w btn-large btn-round align-middle w-full md:w-1/2 lg:w-1/4 hover:opacity-[0.5]"
className="inline-block bg-extColorPrimary6 hover:bg-extColorPrimary8 text-white py-1 px-6 hover:scale-105 rounded-full text-lg shadow-lg transition-all duration-500"
data-btn-animate="y"
>
Request Consultation
</a>
</div>
<a href="/contact" className="ext-btn-cta-md mt-7" data-btn-animate="y">
Request Consultation
</a>
</div>
{/* End Home Section Content */}
</div>

6
src/components/Homepage.tsx
View File

@ -1,8 +1,8 @@
import Image from "next/image";
import Link from "next/link";
import About from "./About";
import Contact from "./Contacts/Contact";
import Testimonials from "./Testimonials";
import ContactBlock from "./Blocks/Contact";
export default function homepage({ dark = false }) {
return (
@ -179,7 +179,9 @@ export default function homepage({ dark = false }) {
</section>
<section className={`mb-5 scrollSpysection ${dark ? "bg-dark-1 light-content" : ""}`} id="contact">
<Contact />
<div className="wow fadeInUp">
<ContactBlock />
</div>
</section>
</>
);