blog details categories updated

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}>
+    <Layout
-      <section className="sidebar-page-container sec-pad-2">
+      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>

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">

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;
 }

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: `