fix: blog header and readme

README.md

@@ -37,3 +37,10 @@ The admin panel has been provided by `Payload CMS`, you can access it by visitin
 ```
 http://localhost:3000/admin
 ```
+
+Credential:
+
+```
+e-mail: rankrunners@gmail.com
+pw: Iloveskyrim99
+```

src/app/(main)/blog/[slug]/page.tsx

@@ -6,11 +6,7 @@ import { RichText } from "@payloadcms/richtext-lexical/react";
 import { Metadata } from "next";
 import Image from "next/image";
 
-export async function generateMetadata({
-  params,
-}: {
-  params: { slug: string };
-}): Promise<Metadata> {
+export async function generateMetadata({ params }: { params: { slug: string } }): Promise<Metadata> {
   const blog = await fetchBlogDetail(params.slug);
 
   if (!blog) {
@@ -38,11 +34,7 @@ export async function generateMetadata({
   };
 }
 
-export default async function SingleBlogPage({
-  params,
-}: {
-  params: Promise<{ slug: string }>;
-}) {
+export default async function SingleBlogPage({ params }: { params: Promise<{ slug: string }> }) {
   const slug = (await params).slug;
   const data = await fetchBlogDetail(slug);
 
@@ -50,43 +42,28 @@ export default async function SingleBlogPage({
 
   return (
     <>
-      <section
-        className="page-section bg-gradient-gray-light-1 bg-scroll overflow-hidden"
-        id="home"
-      >
+      <section className="page-section bg-dark-1 bg-gradient-gray-dark-1 light-content bg-scroll overflow-hidden">
         {/* <!-- 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 className="bg-shape-1 opacity-003">
+          <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">
-                {data.data.title}
-              </h1>
+              <h1 className="hs-title-10 mb-10 wow fadeInUp">{data.data.title}</h1>
               {/* Author, Categories, Comments */}
-              <div
-                className="blog-item-data mb-0 wow fadeIn"
-                data-wow-delay="0.2s"
-              >
+              <div className="blog-item-data mb-0 wow fadeIn" data-wow-delay="0.2s">
                 <div className="d-inline-block me-3">
                   <a href="#">
                     <i className="mi-clock size-16" />
-                    <span className="visually-hidden">Date:</span>{" "}
-                    {data.createdAt}
+                    <span className="visually-hidden">Date:</span> {data.createdAt}
                   </a>
                 </div>
                 <div className="d-inline-block me-3">
                   <i className="mi-folder size-16" />
-                  <span className="visually-hidden">Categories:</span>{" "}
-                  <a href="#">Design</a>, <a href="#">Branding</a>
+                  <span className="visually-hidden">Categories:</span> <a href="#">Design</a>, <a href="#">Branding</a>
                 </div>
               </div>
               {/* End Author, Categories, Comments */}
@@ -94,6 +71,7 @@ export default async function SingleBlogPage({
           </div>
         </div>
       </section>
+
       <>
         {/* Section */}
         <section className="page-section">
@@ -105,13 +83,7 @@ export default async function SingleBlogPage({
                 <div className="blog-item mb-80 mb-xs-40">
                   <div className="blog-item-body">
                     <div className="mb-40 mb-xs-30">
-                      <Image
-                        src={data.imgUrl}
-                        alt="Image Description"
-                        width={1350}
-                        height={759}
-                        className="round"
-                      />
+                      <Image src={data.imgUrl} alt="Image Description" width={1350} height={759} className="round" />
                     </div>
                     <div>
                       <RichText data={data.data.content} />

src/app/(main)/blog/page.tsx

@@ -10,27 +10,15 @@ export const metadata = {
   description: "Blogs | Cochise Oncology",
 };
 
-export default async function BlogPage({
-  searchParams,
-}: {
-  searchParams?: { page?: string };
-}) {
+export default async function BlogPage({ searchParams }: { searchParams?: { page?: string } }) {
   const page = sanitizePageNumber(searchParams?.page);
 
   return (
     <>
-      <section
-        className="page-section bg-gradient-gray-light-1 bg-scroll overflow-hidden"
-        id="home"
-      >
+      <section className="page-section bg-dark-1 bg-gradient-gray-dark-1 light-content bg-scroll overflow-hidden">
         {/* <!-- 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 className="bg-shape-1 opacity-003">
+          <Image src="/assets/images/demo-fancy/bg-shape-1.svg" width={1443} height={844} alt="" />
         </div>
         {/* <!-- End Background Shape --> */}
 
@@ -38,17 +26,11 @@ export default async function BlogPage({
           <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">Blog</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" id="blog">
         <Blogs page={page} />
       </section>