feat: add random blog on homepage

src/app/(main)/home-bg-video/page.tsx

@@ -1,6 +1,5 @@
 "use client";
 import Hero from "@/components/Hero";
-import Homepage from "@/components/Homepage";
 import dynamic from "next/dynamic";
 
 const ParallaxContainer = dynamic(() => import("@/components/ParallaxContainer"), {
@@ -19,7 +18,6 @@ export default function Home1BGVideoMultiPage() {
       >
         <Hero />
       </ParallaxContainer>
-      <Homepage />
     </>
   );
 }

src/app/(main)/page.tsx

@@ -1,4 +1,7 @@
-import Homepage from "./home-bg-video/page";
+import Blogs from "@/components/Blogs/Blogs";
+import Parallax from "./home-bg-video/page";
+import Homepage from "@/components/Homepage";
+
 export const metadata = {
   title: "HomePage - Cochise Oncology",
   description: "Resonance — One & Multi Page React Nextjs Creative Template",
@@ -25,6 +28,7 @@ export const metadata = {
 export default function Home() {
   return (
     <>
+      <Parallax />
       <Homepage />
     </>
   );

src/components/Blogs/Blog.tsx

@@ -2,8 +2,13 @@ import { blogs9 } from "@/data/blogs";
 import React from "react";
 import Image from "next/image";
 import Link from "next/link";
+import { fetchBlog } from "@/services/payload/blog";
+import { sanitizeBlogContentIntoStringPreview } from "@/utils/sanitize";
 
-export default function Blog() {
+export default async function Blog() {
+  const data = await fetchBlog(undefined);
+
+  if (!data?.totalDocs) return <></>;
   return (
     <>
       {/* End Background Shape */}
@@ -33,15 +38,15 @@ export default function Blog() {
         {/* Blog Posts Grid */}
         <div className="row mt-n30">
           {/* Post Item */}
-          {blogs9.map((elm: any, i: number) => (
+          {data?.formattedData?.slice(0, 2).map((elm: any, i: number) => (
             <div key={i} className="post-prev-3 col-12 col-lg-10 offset-lg-1 col-xl-6 offset-xl-0 mt-30">
               <div className="post-prev-3-container d-block d-sm-flex">
                 <div className="post-prev-3-img">
-                  <Link href={`/slick-blog-single/${elm.id}`}>
+                  <Link href={elm.slug}>
                     <Image
-                      src={elm.imgSrc}
+                      src={elm.imgFormatted.url}
                       width={400}
-                      height={488}
+                      height={200}
                       alt="Add Image Description"
                       className="wow scaleOutIn"
                     />
@@ -49,24 +54,12 @@ export default function Blog() {
                 </div>
                 <div className="post-prev-3-intro">
                   <h4 className="post-prev-3-title">
-                    <Link href={`/slick-blog-single/${elm.id}`}>{elm.title}</Link>
+                    <Link href={elm.slug}>{elm.title}</Link>
                   </h4>
-                  <div className="post-prev-3-text">{elm.intro}</div>
+                  <div className="post-prev-3-text">{sanitizeBlogContentIntoStringPreview(elm.content)}</div>
                   <div className="post-prev-3-info clearfix">
-                    <div className="float-start">
-                      <a href="#">
-                        <Image
-                          className="post-prev-3-author-img"
-                          width={30}
-                          height={30}
-                          src={elm.authorImgSrc}
-                          alt="Image Description"
-                        />
-                      </a>
-                      <a href="#">{elm.authorName}</a>
-                    </div>
                     <div className="float-end">
-                      <a href="#">{elm.date}</a>
+                      <a href="#">{elm.createdAtFormatted}</a>
                     </div>
                   </div>
                 </div>

src/components/Homepage.tsx

@@ -12,6 +12,7 @@ import TestimonialsDark from "./TestimonialsDark";
 import ContactDark from "./ContactDark";
 import { features4 } from "@/data/features";
 import Cta3 from "./cta3";
+import { fetchBlog } from "@/services/payload/blog";
 
 export default function homepage({ onePage = false, dark = false }) {
   return (
@@ -125,26 +126,6 @@ export default function homepage({ onePage = false, dark = false }) {
               <p className="section-descr mb-50 mb-sm-40">
                 Get compassionate care and excellent medical services from COCHISE ONCOLOGY in Sierra Vista, Arizona.
               </p>
-              <div className="local-scroll">
-                {onePage ? (
-                  <>
-                    {" "}
-                    <a href="#contact" className="btn btn-mod btn-color btn-large btn-circle btn-hover-anim mb-xs-10">
-                      <span>Request a quote</span>
-                    </a>
-                  </>
-                ) : (
-                  <>
-                    {" "}
-                    <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 */}

src/components/cta3.tsx

@@ -4,10 +4,9 @@ import React from "react";
 export default function Cta3() {
   return (
     <>
-      <div className="row mt-n10">
+      <div key="cta-3" className="row mt-n10">
         {/* Features List Item */}
         {features2.map((elm, i) => (
-          <>
           <div key={i} className="col-lg-6 d-flex mt-10">
             <div className="features-list-icon features-list-grad">
               <i className="mi-check" />
@@ -17,7 +16,6 @@ export default function Cta3() {
               <small className="text-sm">{elm.desc}</small>
             </div>
           </div>
-          </>
         ))}
         {/* End Features List Item */}
       </div>

src/services/payload/blog.ts

@@ -2,7 +2,7 @@ import payloadConfig from "@/payload.config";
 import { formatDate } from "@/utils/datetime";
 import { getPayload } from "payload";
 
-export async function fetchBlog(page: number = 1) {
+export async function fetchBlog(page: number | undefined) {
   const payload = await getPayload({ config: payloadConfig });
   const blogDataQuery = await payload.find({
     collection: "blogs",