feat: explore more

public/assets/css/style.css

@@ -3909,7 +3909,7 @@ a.logo:hover {
 }
 
 .body-scrolled .social-nav {
-  color: var(--color-dark-3);
+  color: #00898b;
 }
 
 /* Menu sub */

src/components/Blogs/Blog.tsx

@@ -15,24 +15,12 @@ export default async function Blog() {
         <div className="row mb-60 mb-sm-40">
           <div className="col-lg-8 offset-lg-2 text-center mb-md-30">
             <h2 className="section-caption-slick mb-30 mb-sm-20">Our Blog</h2>
-            <h3 className="section-title mb-30">Check the latest news about our company in our blog.</h3>
-            <p className="section-descr mb-0">
-              There are three kinds of web developer specialization front-end developer, back-end developer, and
-              full-stack developer.
+            <h3 className="section-title-large mb-30">Knowledge and Support for Your Cancer Journey</h3>
+            <p className="mb-0">
+              Cancer treatment involves a team of specialists providing personalized, comprehensive care. Staying
+              informed and engaged empowers you to choose the best approach. Remember, you’re not alone in this journey.
             </p>
           </div>
-          <div className="col-lg-2 d-flex align-items-end">
-            <div className="local-scroll text-center text-lg-end w-100">
-              <Link href={`/slick-blog-dark`} className="link-hover-anim" data-link-animate="y">
-                <span className="link-strong link-strong-unhovered">
-                  Our blog <i className="mi-arrow-right size-24" aria-hidden="true"></i>
-                </span>
-                <span className="link-strong link-strong-hovered" aria-hidden="true">
-                  Our blog <i className="mi-arrow-right size-24" aria-hidden="true"></i>
-                </span>
-              </Link>
-            </div>
-          </div>
         </div>
         {/* Blog Posts Grid */}
         <div className="row mt-n30">

src/components/Blogs/BlogDetail.tsx

@@ -4,6 +4,7 @@ import { RichText } from "@payloadcms/richtext-lexical/react";
 import { headers } from "next/headers";
 import Image from "next/image";
 import { notFound } from "next/navigation";
+import Blog from "./Blog";
 
 export interface BlogDetailProps {
   slug: string | undefined;
@@ -48,10 +49,14 @@ export default async function BlogDetail({ slug }: BlogDetailProps) {
               {/* End Post */}
             </div>
             {/* End Content */}
+            <hr style={{ width: "100%", border: "1px solid #aaa" }} />
           </div>
         </div>
       </section>
       {/* End Section */}
+      <div className="mb-5">
+        <Blog />
+      </div>
     </>
   );
 }