diff --git a/package-lock.json b/package-lock.json index d65087f..8826370 100644 --- a/package-lock.json +++ b/package-lock.json @@ -18,10 +18,12 @@ "animejs": "^3.2.2", "bootstrap": "^5.1.3", "dayjs": "^1.11.13", + "framer-motion": "^12.4.13", "graphql": "^16.10.0", "imagesloaded": "^5.0.0", "isotope-layout": "^3.0.6", "jarallax": "^2.2.1", + "motion": "^12.4.13", "next": "15.2.0-canary.30", "payload": "^3.20.0", "photoswipe": "^5.4.4", @@ -8092,6 +8094,33 @@ "url": "https://github.com/sponsors/isaacs" } }, + "node_modules/framer-motion": { + "version": "12.4.13", + "resolved": "https://registry.npmjs.org/framer-motion/-/framer-motion-12.4.13.tgz", + "integrity": "sha512-JHSXIdL7WOTCSEb2UUurHURV85pWTn6UIg+iWLBhH5SFndbjni8CEQcxwsBwOs3RHZ83TkE4xoxb9cHsFPY9yQ==", + "license": "MIT", + "dependencies": { + "motion-dom": "^12.4.11", + "motion-utils": "^12.4.10", + "tslib": "^2.4.0" + }, + "peerDependencies": { + "@emotion/is-prop-valid": "*", + "react": "^18.0.0 || ^19.0.0", + "react-dom": "^18.0.0 || ^19.0.0" + }, + "peerDependenciesMeta": { + "@emotion/is-prop-valid": { + "optional": true + }, + "react": { + "optional": true + }, + "react-dom": { + "optional": true + } + } + }, "node_modules/fsevents": { "version": "2.3.3", "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.3.tgz", @@ -10289,6 +10318,47 @@ "license": "MIT", "peer": true }, + "node_modules/motion": { + "version": "12.4.13", + "resolved": "https://registry.npmjs.org/motion/-/motion-12.4.13.tgz", + "integrity": "sha512-8ehpE6Sd8ack6jLLzweW6RwCBQoASf+yVu8aUPFNKHsJIVejJaBPGsMiswcpfzHeCusZ/ztNIKbgoEn7ruJaOw==", + "license": "MIT", + "dependencies": { + "framer-motion": "^12.4.13", + "tslib": "^2.4.0" + }, + "peerDependencies": { + "@emotion/is-prop-valid": "*", + "react": "^18.0.0 || ^19.0.0", + "react-dom": "^18.0.0 || ^19.0.0" + }, + "peerDependenciesMeta": { + "@emotion/is-prop-valid": { + "optional": true + }, + "react": { + "optional": true + }, + "react-dom": { + "optional": true + } + } + }, + "node_modules/motion-dom": { + "version": "12.4.11", + "resolved": "https://registry.npmjs.org/motion-dom/-/motion-dom-12.4.11.tgz", + "integrity": "sha512-wstlyV3pktgFjqsjbXMo1NX9hQD9XTVqxQNvfc+FREAgxr3GVzgWIEKvbyyNlki3J1jmmh+et9X3aCKeqFPcxA==", + "license": "MIT", + "dependencies": { + "motion-utils": "^12.4.10" + } + }, + "node_modules/motion-utils": { + "version": "12.4.10", + "resolved": "https://registry.npmjs.org/motion-utils/-/motion-utils-12.4.10.tgz", + "integrity": "sha512-NPwZd94V013SwRf++jMrk2+HEBgPkeIE2RiOzhAuuQlqxMJPkKt/LXVh6Upl+iN8oarSGD2dlY5/bqgsYXDABA==", + "license": "MIT" + }, "node_modules/ms": { "version": "2.1.3", "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz", diff --git a/package.json b/package.json index a296a90..a4c6bef 100644 --- a/package.json +++ b/package.json @@ -14,6 +14,7 @@ "tsc": "tsc" }, "dependencies": { + "@next/third-parties": "^15.2.2", "@payloadcms/db-postgres": "^3.20.0", "@payloadcms/next": "^3.20.0", "@payloadcms/payload-cloud": "^3.20.0", @@ -24,10 +25,12 @@ "animejs": "^3.2.2", "bootstrap": "^5.1.3", "dayjs": "^1.11.13", + "framer-motion": "^12.4.13", "graphql": "^16.10.0", "imagesloaded": "^5.0.0", "isotope-layout": "^3.0.6", "jarallax": "^2.2.1", + "motion": "^12.4.13", "next": "15.2.0-canary.30", "payload": "^3.20.0", "photoswipe": "^5.4.4", diff --git a/public/assets/css/bootstrap.min.css b/public/assets/css/bootstrap.min.css index 20c4785..f926694 100644 --- a/public/assets/css/bootstrap.min.css +++ b/public/assets/css/bootstrap.min.css @@ -47,8 +47,9 @@ --bs-black-rgb: 0, 0, 0; --bs-body-color-rgb: 33, 37, 41; --bs-body-bg-rgb: 255, 255, 255; - --bs-font-sans-serif: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", - "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; + --bs-font-sans-serif: + system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, + "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; --bs-font-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; --bs-gradient: linear-gradient(180deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0)); --bs-body-font-family: var(--bs-font-sans-serif); @@ -70,7 +71,6 @@ } body { margin: 0; - font-family: var(--bs-body-font-family); font-size: var(--bs-body-font-size); font-weight: var(--bs-body-font-weight); line-height: var(--bs-body-line-height); @@ -172,10 +172,7 @@ address { font-style: normal; line-height: inherit; } -ol, -ul { - padding-left: 2rem; -} + dl, ol, ul { @@ -2535,7 +2532,8 @@ textarea.form-control.is-valid { .was-validated .form-select:valid:not([multiple]):not([size]), .was-validated .form-select:valid:not([multiple])[size="1"] { padding-right: 4.125rem; - background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e"), + background-image: + url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e"), url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3e%3cpath fill='%23198754' d='M2.3 6.73L.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/%3e%3c/svg%3e"); background-position: right 0.75rem center, @@ -2634,7 +2632,8 @@ textarea.form-control.is-invalid { .was-validated .form-select:invalid:not([multiple]):not([size]), .was-validated .form-select:invalid:not([multiple])[size="1"] { padding-right: 4.125rem; - background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e"), + background-image: + url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e"), url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' width='12' height='12' fill='none' stroke='%23dc3545'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3cpath stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/%3e%3ccircle cx='6' cy='8.2' r='.6' fill='%23dc3545' stroke='none'/%3e%3c/svg%3e"); background-position: right 0.75rem center, diff --git a/public/assets/css/custom.css b/public/assets/css/custom.css index 9511a6e..79f45ec 100644 --- a/public/assets/css/custom.css +++ b/public/assets/css/custom.css @@ -20,13 +20,12 @@ .dark .light-mode-logo { display: none; } -@media (min-width: 1025px) { +/* @media (min-width: 1025px) { .mn-has-sub:hover + *, .mn-has-sub + *:hover { - display: block !important; z-index: 1; } -} +} */ .fadeInText { animation: animationFadeText 0.5s linear 0s 1; @@ -87,7 +86,7 @@ a { } .mn-sub { - transition: max-height 0.3s ease-in-out; + transition: max-height; } .mn-sub.open { diff --git a/public/assets/css/demo-slick/demo-slick.css b/public/assets/css/demo-slick/demo-slick.css index 19b0fb9..bfb0386 100644 --- a/public/assets/css/demo-slick/demo-slick.css +++ b/public/assets/css/demo-slick/demo-slick.css @@ -1,6 +1,4 @@ .theme-slick { - --font-global: "Plus Jakarta Sans", sans-serif; - --font-alt: "Plus Jakarta Sans", sans-serif; --section-padding-y: 50px; --color-teal-1: #64b3b4; --color-dark-1: #1e2432; @@ -66,14 +64,15 @@ --gradient-gray-light-1: linear-gradient(0deg, #f7f9fc 0%, #fff 100%); --gradient-gray-light-2: linear-gradient(0deg, #fff 0%, #f7f9fc 100%); --border-radius-default: 10px; - --box-shadow: 0px 5px 10px 0px rgba(30, 36, 50, 0.05), 0px 1px 1px 0px rgba(30, 36, 50, 0.03), + --box-shadow: + 0px 5px 10px 0px rgba(30, 36, 50, 0.05), 0px 1px 1px 0px rgba(30, 36, 50, 0.03), 0px 3px 5px 0px rgba(30, 36, 50, 0.03); - --box-shadow-strong: 0px 5px 10px 0px rgba(30, 36, 50, 0.08), 0px 1px 1px 0px rgba(30, 36, 50, 0.06), + --box-shadow-strong: + 0px 5px 10px 0px rgba(30, 36, 50, 0.08), 0px 1px 1px 0px rgba(30, 36, 50, 0.06), 0px 3px 5px 0px rgba(30, 36, 50, 0.06); --box-shadow-block: 0px 10px 30px 0px rgba(30, 36, 50, 0.07), 0px 0px 1px 0px rgba(30, 36, 50, 0.1); --box-shadow-block-strong: 0px 15px 50px 0px rgba(30, 36, 50, 0.14), 0px 0px 1px 0px rgba(30, 36, 50, 0.15); color: var(--color-dark-1); - font-family: var(--font-global); font-size: 17px; font-weight: 400; line-height: 1.725; @@ -201,9 +200,6 @@ .theme-slick .inner-nav ul li { margin: 0 18px; } -.theme-slick .inner-nav > ul > li > a { - opacity: 0.7; -} .theme-slick .inner-nav ul li a { position: relative; } @@ -233,11 +229,7 @@ .theme-slick .mobile-on .desktop-nav ul { background: rgba(30, 36, 50, 0.99); } -.theme-slick .mobile-on .desktop-nav ul li a, -.theme-slick .inner-nav ul li .mn-sub li a, -.theme-slick .mn-group-title { - color: rgba(255, 255, 255, 0.9) !important; -} + .theme-slick .form label { margin-bottom: 15px; font-size: 18px; diff --git a/public/assets/css/style.css b/public/assets/css/style.css index 16c8505..aff3e25 100644 --- a/public/assets/css/style.css +++ b/public/assets/css/style.css @@ -238,10 +238,10 @@ Primary use: Multipurpose Template --gradient-primary-alpha-2: linear-gradient(90deg, transparent 13%, var(--color-primary-1) 60%); --border-radius-default: 4px; --border-radius-large: 30px; - --box-shadow: 0px 5px 10px 0px rgba(0, 0, 0, 0.05), 0px 1px 1px 0px rgba(0, 0, 0, 0.03), - 0px 3px 5px 0px rgba(0, 0, 0, 0.03); - --box-shadow-strong: 0px 5px 10px 0px rgba(0, 0, 0, 0.08), 0px 1px 1px 0px rgba(0, 0, 0, 0.06), - 0px 3px 5px 0px rgba(0, 0, 0, 0.06); + --box-shadow: + 0px 5px 10px 0px rgba(0, 0, 0, 0.05), 0px 1px 1px 0px rgba(0, 0, 0, 0.03), 0px 3px 5px 0px rgba(0, 0, 0, 0.03); + --box-shadow-strong: + 0px 5px 10px 0px rgba(0, 0, 0, 0.08), 0px 1px 1px 0px rgba(0, 0, 0, 0.06), 0px 3px 5px 0px rgba(0, 0, 0, 0.06); --box-shadow-block: 0px 3px 50px 0px rgba(0, 0, 0, 0.05); --box-shadow-block-strong: 0px 3px 50px 0px rgba(0, 0, 0, 0.15); --transition-default: all 0.27s cubic-bezier(0, 0, 0.58, 1); @@ -746,7 +746,6 @@ video { body { color: var(--color-dark-1); - font-family: var(--font-global); font-size: 18px; font-weight: 400; letter-spacing: normal; @@ -3835,7 +3834,6 @@ a.logo:hover { .inner-nav ul { margin: auto; font-size: 17px; - font-weight: 500; text-align: center; letter-spacing: 0; line-height: 1.3; @@ -3880,7 +3878,6 @@ a.logo:hover { display: table-cell; vertical-align: middle; height: var(--menu-bar-height); - opacity: 0.65; } .main-nav:not(.mobile-on).small-height .inner-nav > ul > li > a { height: var(--menu-bar-height-scrolled) !important; @@ -3925,7 +3922,7 @@ a.logo:hover { transition: var(--transition-default); } .mn-sub { - display: none; + /* opacity: 0; */ width: 220px; position: absolute; top: 100%; @@ -3979,7 +3976,6 @@ a.logo:hover { border-left: none; border-right: none; letter-spacing: 0; - color: var(--color-gray-light-5) !important; outline-offset: -2px !important; transition: var(--transition-default); } @@ -3990,7 +3986,6 @@ a.logo:hover { .inner-nav ul li .mn-sub li a:hover, .mn-sub li a.active { background: rgba(255, 255, 255, 0.09); - color: var(--color-gray-light-1) !important; } .mn-sub:not(.mn-has-multi) li ul { left: 100%; @@ -4324,20 +4319,11 @@ a.logo:hover { backdrop-filter: blur(10px); } .main-nav.dark .inner-nav ul > li > a { - font-size: 18px; - color: #fff; - opacity: 0.78; + font-weight: 500; + line-height: 1.2em; padding: 10px; } -.main-nav.dark .inner-nav ul > li > a:hover, -.main-nav.dark .inner-nav ul > li > a.active { - color: #fff; - opacity: 1 !important; -} -.main-nav.dark .inner-nav ul li .mn-sub li a { - opacity: 1; -} .main-nav.dark .main-nav-icon-cart { opacity: 1; } @@ -4361,13 +4347,13 @@ a.logo:hover { font-size: 18px; font-weight: 700; text-decoration: none; - color: rgba(255, 255, 255, 0.9); + /* color: rgba(255, 255, 255, 0.9); */ } -.main-nav.dark .mn-sub { +/* .main-nav.dark .mn-sub { -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; -} +} */ .main-nav.dark .mi-chevron-down, .main-nav.dark.body-scrolled .inner-nav ul > li > a:hover .mi-chevron-down, .main-nav.dark.body-scrolled .inner-nav ul > li > a.active .mi-chevron-down { diff --git a/src/app/(main)/blog/page.tsx b/src/app/(main)/blog/page.tsx index f616d55..9936842 100644 --- a/src/app/(main)/blog/page.tsx +++ b/src/app/(main)/blog/page.tsx @@ -2,22 +2,106 @@ import { BeforeFooterBlock } from "@/components/Blocks/BeforeFooter"; import { BlogCardItemSkeleton } from "@/components/Blogs/BlogCardItem"; import Blogs from "@/components/Blogs/Blogs"; import HeroOther from "@/components/HeroOther"; +import { getDefaultMetadata } from "@/utils/metadata"; import { sanitizePageNumber } from "@/utils/sanitize"; +import { Metadata } from "next"; +import { headers } from "next/headers"; import { Suspense } from "react"; -export const metadata = { - title: "Blog - Cochise Oncology", - description: "Blog - Cochise Oncology", -}; +const metaDesc = + "Explore the latest insights, news, and patient resources on the Cochise Oncology blog. Stay informed about cancer treatments, patient support services, and wellness tips. Read our expert articles today."; + +export async function generateMetadata(): Promise { + const metadata = await getDefaultMetadata(); + metadata.title = `Blog - ${metadata.openGraph?.siteName}`; + metadata.description = metaDesc; + + return metadata; +} export default async function BlogPage({ searchParams }: { searchParams?: Promise<{ page?: string; s?: string }> }) { const params = await searchParams; const paramsPage = params?.page; const paramsSearch = params?.s; const page = sanitizePageNumber(paramsPage); + const headersList = await headers(); + const mainUrl = headersList.get("x-main-url"); + const fullUrl = headersList.get("x-full-url"); + const siteName = headersList.get("x-site-name"); + + const jsonLd = { + "@context": "https://schema.org", + "@graph": [ + { + "@type": "WebPage", + "@id": fullUrl, + url: fullUrl, + name: `Blog - ${siteName}`, + isPartOf: { + "@id": `${mainUrl}/#website`, + }, + datePublished: "2024-07-18T16:42:14+00:00", + dateModified: "2025-02-27T01:20:38+00:00", + description: metaDesc, + breadcrumb: { + "@id": `${fullUrl}#breadcrumb`, + }, + inLanguage: "en-US", + potentialAction: [ + { + "@type": "ReadAction", + target: [fullUrl], + }, + ], + }, + { + "@type": "WebSite", + "@id": `${mainUrl}/#website`, + url: `${mainUrl}/`, + name: siteName, + description: "", + publisher: { + "@id": `${mainUrl}/#organization`, + }, + potentialAction: [ + { + "@type": "SearchAction", + target: { + "@type": "EntryPoint", + urlTemplate: `${mainUrl}/?s={search_term_string}`, + }, + "query-input": { + "@type": "PropertyValueSpecification", + valueRequired: true, + valueName: "search_term_string", + }, + }, + ], + inLanguage: "en-US", + }, + { + "@type": "Organization", + "@id": `${mainUrl}/#organization`, + name: siteName, + url: `${mainUrl}/`, + logo: { + "@type": "ImageObject", + inLanguage: "en-US", + "@id": `${mainUrl}/#/schema/logo/image/`, + url: `${mainUrl}/assets/images/logo-dark.webp`, + contentUrl: `${mainUrl}/assets/images/logo-dark.webp`, + caption: siteName, + }, + image: { + "@id": `${mainUrl}/#/schema/logo/image/`, + }, + }, + ], + }; return ( <> +