feat: testimonials screen and cta

feat(blog): share
2025-02-12 12:55:08 +07:00 · 2025-02-12 10:42:17 +07:00
13 changed files with 233 additions and 286 deletions
--- a/src/app/(main)/blog/[slug]/page.tsx
+++ b/src/app/(main)/blog/[slug]/page.tsx
@ -5,21 +5,22 @@ import Image from "next/image";
 import { Suspense } from "react";
 export async function generateMetadata({ params }: { params: Promise<{ slug: string }> }): Promise<Metadata> {
  const name = "Cochise Oncology";
  const slug = (await params).slug;
  const blog = await fetchBlogDetail(slug);
  if (!blog) {
    return {
-      title: "Cochise Oncology",
+      title: name,
-      description: "Cochise Oncology",
+      description: name,
      openGraph: {
-        title: "Cochise Oncology",
+        title: name,
-        description: "Cochise Oncology",
+        description: name,
      },
    };
  }
-  const title = `${blog.data.title} - Cochise Oncology`;
+  const title = `${blog.data.title} - ${name}`;
  return {
    title: title,
--- a/src/app/(main)/testimonials/page.tsx
+++ b/src/app/(main)/testimonials/page.tsx
@ -0,0 +1,34 @@
 import { BeforeFooterBlock } from "@/components/Blocks/BeforeFooter";
 import { GoogleReviewsBlock } from "@/components/Blocks/GoogleReviews";
 import Image from "next/image";
 export const metadata = {
  title: "Testimonials - Cochise Oncology",
  description: "Testimonials - Cochise Oncology",
 };
 export default function SlickAboutPage() {
  return (
    <>
      <section className="page-section bg-dark-1 bg-gradient-gray-dark-1 light-content bg-scroll overflow-hidden">
        {/* <!-- Background Shape --> */}
        <div className="absolute top-0 left-0 w-full h-full opacity-20">
          <Image src="/assets/images/hero-default.webp" width="0" height="0" sizes="100vw" className="w-full" 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">Testimonials</h1>
            </div>
          </div>
        </div>
      </section>
      <section className="page-section scrollSpysection" id="testimonials">
        <GoogleReviewsBlock />
      </section>
      <BeforeFooterBlock />
    </>
  );
 }
--- a/src/app/frontend-sample-payload/layout.tsx
+++ b/src/app/frontend-sample-payload/layout.tsx
@ -1,19 +0,0 @@
 import React from 'react'
 import './styles.css'
 export const metadata = {
  description: 'A blank template using Payload in a Next.js app.',
  title: 'Payload Blank Template',
 }
 export default async function RootLayout(props: { children: React.ReactNode }) {
  const { children } = props
  return (
    <html lang="en">
      <body>
        <main>{children}</main>
      </body>
    </html>
  )
 }
--- a/src/app/frontend-sample-payload/page.tsx
+++ b/src/app/frontend-sample-payload/page.tsx
@ -1,59 +0,0 @@
 import { headers as getHeaders } from 'next/headers.js'
 import Image from 'next/image'
 import { getPayload } from 'payload'
 import React from 'react'
 import { fileURLToPath } from 'url'
 import config from '@/payload.config'
 import './styles.css'
 export default async function HomePage() {
  const headers = await getHeaders()
  const payloadConfig = await config
  const payload = await getPayload({ config: payloadConfig })
  const { user } = await payload.auth({ headers })
  const fileURL = `vscode://file/${fileURLToPath(import.meta.url)}`
  return (
    <div className="home">
      <div className="content">
        <picture>
          <source srcSet="https://raw.githubusercontent.com/payloadcms/payload/main/packages/ui/src/assets/payload-favicon.svg" />
          <Image
            alt="Payload Logo"
            height={65}
            src="https://raw.githubusercontent.com/payloadcms/payload/main/packages/ui/src/assets/payload-favicon.svg"
            width={65}
          />
        </picture>
        {!user && <h1>Welcome to your new project.</h1>}
        {user && <h1>Welcome back, {user.email}</h1>}
        <div className="links">
          <a
            className="admin"
            href={payloadConfig.routes.admin}
            rel="noopener noreferrer"
            target="_blank"
          >
            Go to admin panel
          </a>
          <a
            className="docs"
            href="https://payloadcms.com/docs"
            rel="noopener noreferrer"
            target="_blank"
          >
            Documentation
          </a>
        </div>
      </div>
      <div className="footer">
        <p>Update this page by editing</p>
        <a className="codeLink" href={fileURL}>
          <code>app/(frontend)/page.tsx</code>
        </a>
      </div>
    </div>
  )
 }
--- a/src/app/frontend-sample-payload/styles.css
+++ b/src/app/frontend-sample-payload/styles.css
@ -1,164 +0,0 @@
 :root {
  --font-mono: 'Roboto Mono', monospace;
 }
 * {
  box-sizing: border-box;
 }
 html {
  font-size: 18px;
  line-height: 32px;
  background: rgb(0, 0, 0);
  -webkit-font-smoothing: antialiased;
 }
 html,
 body,
 #app {
  height: 100%;
 }
 body {
  font-family: system-ui;
  font-size: 18px;
  line-height: 32px;
  margin: 0;
  color: rgb(1000, 1000, 1000);
  @media (max-width: 1024px) {
    font-size: 15px;
    line-height: 24px;
  }
 }
 img {
  max-width: 100%;
  height: auto;
  display: block;
 }
 h1 {
  margin: 40px 0;
  font-size: 64px;
  line-height: 70px;
  font-weight: bold;
  @media (max-width: 1024px) {
    margin: 24px 0;
    font-size: 42px;
    line-height: 42px;
  }
  @media (max-width: 768px) {
    font-size: 38px;
    line-height: 38px;
  }
  @media (max-width: 400px) {
    font-size: 32px;
    line-height: 32px;
  }
 }
 p {
  margin: 24px 0;
  @media (max-width: 1024px) {
    margin: calc(var(--base) * 0.75) 0;
  }
 }
 a {
  color: currentColor;
  &:focus {
    opacity: 0.8;
    outline: none;
  }
  &:active {
    opacity: 0.7;
    outline: none;
  }
 }
 svg {
  vertical-align: middle;
 }
 .home {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  height: 100vh;
  padding: 45px;
  max-width: 1024px;
  margin: 0 auto;
  overflow: hidden;
  @media (max-width: 400px) {
    padding: 24px;
  }
  .content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex-grow: 1;
    h1 {
      text-align: center;
    }
  }
  .links {
    display: flex;
    align-items: center;
    gap: 12px;
    a {
      text-decoration: none;
      padding: 0.25rem 0.5rem;
      border-radius: 4px;
    }
    .admin {
      color: rgb(0, 0, 0);
      background: rgb(1000, 1000, 1000);
      border: 1px solid rgb(0, 0, 0);
    }
    .docs {
      color: rgb(1000, 1000, 1000);
      background: rgb(0, 0, 0);
      border: 1px solid rgb(1000, 1000, 1000);
    }
  }
  .footer {
    display: flex;
    align-items: center;
    gap: 8px;
    @media (max-width: 1024px) {
      flex-direction: column;
      gap: 6px;
    }
    p {
      margin: 0;
    }
    .codeLink {
      text-decoration: none;
      padding: 0 0.5rem;
      background: rgb(60, 60, 60);
      border-radius: 4px;
    }
  }
 }
--- a/src/app/my-route/route.ts
+++ b/src/app/my-route/route.ts
@ -1,14 +0,0 @@
 import configPromise from '@payload-config'
 import { getPayload } from 'payload'
 export const GET = async () => {
  const payload = await getPayload({
    config: configPromise,
  })
  const data = await payload.find({
    collection: 'users',
  })
  return Response.json(data)
 }
--- a/src/components/Blocks/BeforeFooter/index.tsx
+++ b/src/components/Blocks/BeforeFooter/index.tsx
@ -1,28 +1,33 @@
 import Link from "next/link";
 export interface BeforeFooterBlockProps {
-  id: string;
+  id?: string;
-  title: string;
+  title?: string;
-  description: string;
+  description?: string;
-  buttonText: string;
+  buttonText?: string;
 }
 const placeholderTitle = "Begin your path to healing with Cochise Oncology";
 const placeholderDescription =
  "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.";
 const placeholderButtonText = "Get Started";
 export function BeforeFooterBlock({ title, description, buttonText }: BeforeFooterBlockProps) {
  return (
    <section
      className={`page-section text-white text-center scrollSpysection bg-dark-1 light-content bg-scroll relative`}
      id="about"
    >
      <div className="decoration-12 bg-white" />
      <div className="decoration-13 bg-white" />
      <div className="container mx-auto px-6 z-50">
-        <h2 className="text-3xl font-bold mb-4">{title}</h2>
+        <h2 className="text-3xl font-bold mb-4">{title ?? placeholderTitle}</h2>
-        <p className="text-lg mb-6">{description}</p>
+        <p className="text-lg mb-6">{description ?? placeholderDescription}</p>
-        {!!buttonText && (
+        <div className="pt-5">
-          <div className="pt-5">
+          <Link href="/contact" className="bg-purple-600 hover:bg-purple-700 text-white py-3 px-6 rounded-lg text-lg">
-            <Link href="/contact" className="bg-purple-600 hover:bg-purple-700 text-white py-3 px-6 rounded-lg text-lg">
+            {buttonText ?? placeholderButtonText}
-              {buttonText}
+          </Link>
-            </Link>
+        </div>
          </div>
        )}
      </div>
    </section>
  );
--- a/src/components/Blocks/GoogleReviews/index.tsx
+++ b/src/components/Blocks/GoogleReviews/index.tsx
@ -1,13 +1,59 @@
-import { CardStarRating } from "@/components/Ratings/CardStarRating";
+"use client";
 import { CardStarRating, CardStarRatingProps } from "@/components/Ratings/CardStarRating";
 import StarRating from "@/components/Ratings/StarRating";
 import { teamMembers } from "@/data/team";
 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.",
  },
 ];
 export function GoogleReviewsBlock() {
  return (
-    <section className="bg-scroll relative py-20">
+    <section className="bg-scroll relative">
      <div className="decoration-14" />
      <div className="decoration-15" />
      <div className="decoration-16 opacity-035 d-none d-md-block">
@ -22,7 +68,7 @@ export function GoogleReviewsBlock() {
        <div className="flex justify-center space-x-2">
          <h2 className="text-xl text-center font-bold">4.8</h2>
          <div className="mt-1">
-            <StarRating size={20} value={3} />
+            <StarRating size={20} value={4.8} />
          </div>
          <div className="text-xs font-semibold mt-1 text-neutral-500">Over 200 Reviews</div>
        </div>
@ -56,16 +102,16 @@ export function GoogleReviewsBlock() {
            }}
          >
            {/* Group item */}
-            {teamMembers.map((member, index) => (
+            {data.map((rev, index) => (
              <SwiperSlide className="owl-item py-2 mt-5" key={index}>
                <div>
-                  <CardStarRating />
+                  <CardStarRating data={rev} />
                </div>
              </SwiperSlide>
            ))}
-            <div className="owl-controls clickable">
+            <div className="owl-controls clickable absolute top-6 w-full">
              <div className="owl-buttons">
-                <div className="owl-prev snbp1 lef" role="button" tabIndex={0}>
+                <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>
--- a/src/components/Blogs/BlogDetail.tsx
+++ b/src/components/Blogs/BlogDetail.tsx
@ -1,6 +1,8 @@
 import { fetchBlogDetail } from "@/services/payload/blog";
 import { RichText } from "@payloadcms/richtext-lexical/react";
 import { headers } from "next/headers";
 import Image from "next/image";
 import { FaFacebook, FaLinkedin, FaTwitter } from "react-icons/fa";
 export interface BlogDetailProps {
  slug: string;
@ -8,6 +10,14 @@ export interface BlogDetailProps {
 export default async function BlogDetail({ slug }: BlogDetailProps) {
  const data = await fetchBlogDetail(slug);
  const headersList = await headers();
  const fullUrl = headersList.get("x-full-url");
  const shareUrl = {
    facebook: `https://www.facebook.com/sharer/sharer.php?u=${fullUrl}`,
    linkedin: `https://www.linkedin.com/sharing/share-offsite/?url=${fullUrl}`,
    twitter: `https://twitter.com/intent/tweet?url=${fullUrl}`,
  };
  if (!data) return <></>;
@ -32,6 +42,18 @@ export default async function BlogDetail({ slug }: BlogDetailProps) {
                </div>
              </div>
              {/* End Author, Categories, Comments */}
              <div className="flex justify-center space-x-5 mt-8 wow fadeIn">
                <a className="cursor-pointer" href={shareUrl["facebook"]} target="_blank">
                  <FaFacebook className="text-2xl text-gray-300" />
                </a>
                <a className="cursor-pointer" href={shareUrl["linkedin"]} target="_blank">
                  <FaLinkedin className="text-2xl text-gray-300" />
                </a>
                <a className="cursor-pointer" href={shareUrl["twitter"]} target="_blank">
                  <FaTwitter className="text-2xl text-gray-300" />
                </a>
              </div>
            </div>
          </div>
        </div>
--- a/src/components/Homepage.tsx
+++ b/src/components/Homepage.tsx
@ -50,7 +50,7 @@ export default function homepage({ onePage = false, dark = false }) {
                  ) : (
                    <>
                      <Link
-                        href={`/slick-contact${dark ? "-dark" : ""}`}
+                        href={`/contact`}
                        className="btn btn-mod btn-color btn-large btn-circle btn-hover-anim mb-xs-10"
                      >
                        <span>Contact us</span>
--- a/src/components/Ratings/CardStarRating.tsx
+++ b/src/components/Ratings/CardStarRating.tsx
@ -1,14 +1,21 @@
 import Image from "next/image";
 import StarRating from "./StarRating";
-export function CardStarRating() {
+export interface CardStarRatingProps {
  data: {
    star: number;
    description: string;
  };
 }
 export function CardStarRating({ data }: CardStarRatingProps) {
  return (
    <div className="bg-white p-2 rounded-lg shadow-md">
      <div className="flex justify-between">
-        <StarRating size={20} value={3} />
+        <StarRating size={20} value={data.star} />
        <Image src="/assets/images/google-provider.svg" width={20} height={20} alt="" />
      </div>
-      <p className="text-xs pl-1 mt-4">Today my cat scan</p>
+      <p className="text-xs pl-1 mt-4">{data.description}</p>
    </div>
  );
 }
--- a/src/middleware.ts
+++ b/src/middleware.ts
@ -0,0 +1,34 @@
 // middleware.ts
 import { NextResponse } from "next/server";
 import type { NextRequest } from "next/server";
 // the following code is taken from : https://nextjs.org/docs/advanced-features/middleware#setting-headers
 export function middleware(request: NextRequest) {
  const protocol = request.headers.get("x-forwarded-proto") || "http"; // Default to 'http' if not provided
  const host = request.headers.get("x-forwarded-host") || request.nextUrl.hostname;
  const path = request.nextUrl.pathname + request.nextUrl.search;
  // Construct the full URL
  const fullUrl = `${protocol}://${host}${path}`;
  request.headers.set("x-full-url", fullUrl);
  return NextResponse.next({
    request: {
      // New request headers
      headers: request.headers,
    },
  });
 }
 // the following code has been copied from https://nextjs.org/docs/advanced-features/middleware#matcher
 export const config = {
  matcher: [
    /*
     * Match all request paths except for the ones starting with:
     * - api (API routes)
     * - _next/static (static files)
     * - _next/image (image optimization files)
     * - favicon.ico, sitemap.xml, robots.txt (metadata files)
     */
    "/((?!api|_next/static|_next/image|assets|sw.js|favicon.ico|sitemap.xml|robots.txt).*)",
  ],
 };
--- a/src/payload-types.ts
+++ b/src/payload-types.ts
@ -6,6 +6,60 @@
 * and re-run `payload generate:types` to regenerate this file.
 */
 /**
 * Supported timezones in IANA format.
 *
 * This interface was referenced by `Config`'s JSON-Schema
 * via the `definition` "supportedTimezones".
 */
 export type SupportedTimezones =
  | 'Pacific/Midway'
  | 'Pacific/Niue'
  | 'Pacific/Honolulu'
  | 'Pacific/Rarotonga'
  | 'America/Anchorage'
  | 'Pacific/Gambier'
  | 'America/Los_Angeles'
  | 'America/Tijuana'
  | 'America/Denver'
  | 'America/Phoenix'
  | 'America/Chicago'
  | 'America/Guatemala'
  | 'America/New_York'
  | 'America/Bogota'
  | 'America/Caracas'
  | 'America/Santiago'
  | 'America/Buenos_Aires'
  | 'America/Sao_Paulo'
  | 'Atlantic/South_Georgia'
  | 'Atlantic/Azores'
  | 'Atlantic/Cape_Verde'
  | 'Europe/London'
  | 'Europe/Berlin'
  | 'Africa/Lagos'
  | 'Europe/Athens'
  | 'Africa/Cairo'
  | 'Europe/Moscow'
  | 'Asia/Riyadh'
  | 'Asia/Dubai'
  | 'Asia/Baku'
  | 'Asia/Karachi'
  | 'Asia/Tashkent'
  | 'Asia/Calcutta'
  | 'Asia/Dhaka'
  | 'Asia/Almaty'
  | 'Asia/Jakarta'
  | 'Asia/Bangkok'
  | 'Asia/Shanghai'
  | 'Asia/Singapore'
  | 'Asia/Tokyo'
  | 'Asia/Seoul'
  | 'Australia/Sydney'
  | 'Pacific/Guam'
  | 'Pacific/Noumea'
  | 'Pacific/Auckland'
  | 'Pacific/Fiji';
 export interface Config {
  auth: {
    users: UserAuthOperations;
Author	SHA1	Message	Date
RizqiSyahrendra	3433d3a597	feat: testimonials screen and cta	2025-02-12 12:55:08 +07:00
RizqiSyahrendra	cb23d77967	feat(blog): share	2025-02-12 10:42:17 +07:00