From d583b4aae24fe5bdcadce140e50486942bd50ff2 Mon Sep 17 00:00:00 2001
From: selvi <selvi@metatroncube.in>
Date: Mon, 15 Sep 2025 13:00:19 +0530
Subject: [PATCH] blog details categories updated

---
 app/blog/[slug]/page.js                  | 84 +++++++++++++++++++++---
 app/blog/page.js                         |  8 ++-
 public/assets/css/module-css/service.css | 11 ++++
 utils/Blog.utils.js                      |  6 ++
 4 files changed, 99 insertions(+), 10 deletions(-)

diff --git a/app/blog/[slug]/page.js b/app/blog/[slug]/page.js
index 1ae95dd..3fb9c60 100644
--- a/app/blog/[slug]/page.js
+++ b/app/blog/[slug]/page.js
@@ -14,12 +14,84 @@ export default function BlogDetails({ params }) {
 
   if (!blog) return notFound();
 
+  const sameCategoryBlogs = Blogs.filter(
+    (item) => item.category === blog.category && item.slug !== blog.slug
+  );
+
+  const relatedBlogs = sameCategoryBlogs.length > 0 ? [sameCategoryBlogs[0]] : [];
+
   return (
-    <Layout headerStyle={2} footerStyle={1} breadcrumbTitle={blog.title}  bannerImage={blog.bannerImage}>
-      <section className="sidebar-page-container sec-pad-2">
+    <Layout
+      headerStyle={2}
+      footerStyle={1}
+      breadcrumbTitle={blog.title}
+      bannerImage={blog.bannerImage}
+    >
+      <section className="service-details pt_90 pb_90">
         <div className="auto-container">
           <div className="row clearfix">
-            <div className="col-lg-12 col-md-12 col-sm-12 content-side">
+
+            <div className="col-lg-4 col-md-12 col-sm-12 sidebar-side">
+              <div className="default-sidebar service-sidebar mr_15">
+
+                <div className="sidebar-widget category-widget">
+                  <div className="widget-title">
+                    <h3>Categories</h3>
+                  </div>
+                  <div className="widget-content">
+                    <ul className="category-list clearfix">
+                      {Blogs.map((b) => (
+                        <li key={b.id}>
+                          <Link
+                            href={`/blog/${b.slug}`}
+                            className={b.slug === blog.slug ? "current" : ""}
+                          >
+                            {b.title}
+                          </Link>
+                        </li>
+                      ))}
+                    </ul>
+                  </div>
+                </div>
+
+                {relatedBlogs.length > 0 && (
+                  <div className="sidebar-widget related-post">
+                    <div className="widget-title">
+                      <h3>Related Blog</h3>
+                    </div>
+                    <div className="post-inner">
+                      {relatedBlogs.map((related) => (
+                        <div className="service-block-one" key={related.id}>
+                          <div className="inner-box">
+                            <div className="image-box">
+                              <figure className="image">
+                                <img src={related.thumbnail} alt={related.title} />
+                              </figure>
+                            </div>
+                            <div className="lower-content2">
+                              <h3>
+                                <Link href={`/blog/${related.slug}`}>
+                                  {related.title}
+                                </Link>
+                              </h3>
+                              <p>{related.shortDesc.slice(0, 80)}...</p>
+                              <Link
+                                href={`/blog/${related.slug}`}
+                                className="read-more"
+                              >
+                                Read More
+                              </Link>
+                            </div>
+                          </div>
+                        </div>
+                      ))}
+                    </div>
+                  </div>
+                )}
+              </div>
+            </div>
+
+            <div className="col-lg-8 col-md-12 col-sm-12 content-side">
               <div className="blog-details-content">
                 <div className="news-block-one">
                   <div className="inner-box">
@@ -31,11 +103,6 @@ export default function BlogDetails({ params }) {
                       />
                     </figure>
                     <div className="lower-content">
-                      {/* <ul className="post-info mb_15 clearfix">
-                        <li><Link href="#">{blog.author}</Link></li>
-                        <li>{blog.date}</li>
-                        <li>{blog.comments}</li>
-                      </ul> */}
                       <h2>{blog.title}</h2>
                       <div dangerouslySetInnerHTML={{ __html: blog.content }} />
                     </div>
@@ -43,6 +110,7 @@ export default function BlogDetails({ params }) {
                 </div>
               </div>
             </div>
+
           </div>
         </div>
       </section>
diff --git a/app/blog/page.js b/app/blog/page.js
index ba2ec96..f02ba2b 100644
--- a/app/blog/page.js
+++ b/app/blog/page.js
@@ -6,7 +6,7 @@ import Blogs from "@/utils/Blog.utils";
 export default function Blog() {
   return (
     <Layout headerStyle={2} footerStyle={1} breadcrumbTitle="Blog">
-      <section className="news-section sec-pad bg-color-1">
+      <section className="news-section sec-pad">
         <div className="auto-container">
           <div className="sec-title mb_50 centred">
             <span className="sub-title">Our Blog</span>
@@ -34,7 +34,11 @@ export default function Blog() {
                         <li>{blog.comments}</li>
                       </ul> */}
                       <h3>
-                        <Link href={`/blog/${blog.slug}`}>{blog.title}</Link>
+                        <Link href={`/blog/${blog.slug}`}>
+                          {blog.title.split(" ").length > 6
+                            ? blog.title.split(" ").slice(0, 6).join(" ") + "..."
+                            : blog.title}
+                        </Link>
                       </h3>
                       <p>{blog.shortDesc}</p>
                       <div className="link">
diff --git a/public/assets/css/module-css/service.css b/public/assets/css/module-css/service.css
index 2bf48b5..25ed4e8 100644
--- a/public/assets/css/module-css/service.css
+++ b/public/assets/css/module-css/service.css
@@ -51,6 +51,17 @@
   min-height: 285px;
 }
 
+.service-block-one .inner-box .lower-content2{
+  position: relative;
+  display: block;
+  border: 1px solid rgba(0, 0, 0, 0.05);
+  border-radius: 0px 0px 20px 20px;
+  padding: 40px 40px 40px 40px;
+  transition: all 500ms ease;
+  overflow: visible; 
+  min-height: 285px;
+}
+
 .service-block-one .inner-box:hover .lower-content {
   border-color: #fff;
 }
diff --git a/utils/Blog.utils.js b/utils/Blog.utils.js
index 385688d..14b96b5 100644
--- a/utils/Blog.utils.js
+++ b/utils/Blog.utils.js
@@ -9,6 +9,7 @@ const Blogs = [
     thumbnail: "/assets/images/blog/card/blog-1.webp",
     bannerImage: "/assets/images/blog/blog-1/blog-1-banner.webp",
     bigImage: "/assets/images/blog/blog-1/blog-1-big-img.webp",
+    category: "Physiotherapy",
     shortDesc:
       "Living with chronic pain can disrupt every aspect of life. At Rapharehab in Etobicoke, our physiotherapy and massage therapy services help you regain control, move with confidence, and enjoy lasting relief.",
     content: `
@@ -86,6 +87,7 @@ const Blogs = [
     thumbnail: "/assets/images/blog/card/blog-2.webp",
     bannerImage: "/assets/images/blog/blog-2/blog-2-banner.webp",
     bigImage: "/assets/images/blog/blog-2/blog-2-big-img.webp",
+    category: "Physiotherapy",
     shortDesc:
       "Healthy, pain-free hands are essential for daily life. Rapharehab in Etobicoke offers hand massage and physiotherapy to restore strength, relieve tension, and maintain hand health.",
     content: `
@@ -164,6 +166,7 @@ const Blogs = [
     thumbnail: "/assets/images/blog/card/blog-3.webp",
     bannerImage: "/assets/images/blog/blog-3/blog-3-banner.webp",
     bigImage: "/assets/images/blog/blog-3/blog-3-big-img.webp",
+    category: "Physiotherapy",
     shortDesc:
       "Wondering what happens during your very first osteopathy visit? At Rapha Rehab in Etobicoke, our expert and caring team provides gentle, hands-on care to restore balance and support wellness.",
     content: `
@@ -251,6 +254,7 @@ const Blogs = [
     thumbnail: "/assets/images/blog/card/blog-4.webp",
     bannerImage: "/assets/images/blog/blog-4/blog-4-banner.webp",
     bigImage: "/assets/images/blog/blog-4/blog-4-big-img.webp",
+    category: "Workout",
     shortDesc:
       "Strength training can be a game-changer for rehabilitation. Rapha Rehab in Etobicoke helps patients safely build muscle, protect joints, and regain confidence in their movements.",
     content: `
@@ -343,6 +347,7 @@ const Blogs = [
     thumbnail: "/assets/images/blog/card/blog-5.webp",
     bannerImage: "/assets/images/blog/blog-5/blog-5-banner.webp",
     bigImage: "/assets/images/blog/blog-5/blog-5-big-img.webp",
+    category: "Workout",
     shortDesc:
       "Learn safe techniques for training your biceps, triceps, and back. Rapha Rehab in Etobicoke combines physiotherapy with strength training to build power and prevent injury.",
     content: `
@@ -448,6 +453,7 @@ const Blogs = [
     thumbnail: "/assets/images/blog/card/blog-6.webp",
     bannerImage: "/assets/images/blog/blog-6/blog-6-banner.webp",
     bigImage: "/assets/images/blog/blog-6/blog-6-big-img.webp",
+    category: "Workout",
     shortDesc:
       "Rebuild strength, flexibility, and confidence safely with beginner-friendly workouts at Rapha Rehab in Etobicoke. Tailored programs support rehabilitation and long-term wellness.",
     content: `