From d5a1292ff71b6801f260794775333bfb252d8a64 Mon Sep 17 00:00:00 2001
From: Alaguraj0361 <alaguraj0361@gmail.com>
Date: Fri, 29 Aug 2025 18:34:21 +0530
Subject: [PATCH] home page services and area of injury section updated in
 dynamicaly

---
 components/sections/home/AreaOfInjury.js      |  13 +-
 .../sections/home/MobileServicesSection.js    |  67 +++-------
 components/sections/home/ServicesSection.js   | 115 +++++-------------
 public/assets/css/module-css/team.css         |   3 +-
 4 files changed, 60 insertions(+), 138 deletions(-)

diff --git a/components/sections/home/AreaOfInjury.js b/components/sections/home/AreaOfInjury.js
index 20ea2f0..3b72cb5 100644
--- a/components/sections/home/AreaOfInjury.js
+++ b/components/sections/home/AreaOfInjury.js
@@ -1,5 +1,6 @@
 import React from 'react';
 import Link from "next/link"
+import { areaOfInjuryData } from '@/utils/AreaOfInjery.utils';
 export default function AreaOfInjury() {
     const teamMembers = [
         { name: 'Black Marvin', role: 'Medical Assistant', image: 'assets/images/team/team-1.jpg' },
@@ -31,21 +32,21 @@ export default function AreaOfInjury() {
                     </h3>
                 </div>
                 <div className="row clearfix">
-                    {teamMembers.map((member, index) => (
+                    {areaOfInjuryData.slice(0, 8).map((area, index) => (
                         <div key={index} className="col-lg-3 col-md-6 col-6 team-block">
                             <div className="team-block-one wow fadeInUp animated" data-wow-delay={`${index * 200}ms`} data-wow-duration="1500ms">
                                 <div className="inner-box">
                                     <div className="image-box">
-                                        <figure className="image"><img src={member.image} alt={`${member.name}'s photo`} /></figure>
-                                        <ul className="social-links clearfix">
+                                        <figure className="image"><img src={area.image} alt={`${area.name}'s photo`} /></figure>
+                                        {/* <ul className="social-links clearfix">
                                             <li><Link href="/#"><i className="icon-4"></i></Link></li>
                                             <li><Link href="/#"><i className="icon-5"></i></Link></li>
                                             <li><Link href="/#"><i className="icon-6"></i></Link></li>
                                             <li><Link href="/#"><i className="icon-7"></i></Link></li>
-                                        </ul>
+                                        </ul> */}
                                     </div>
                                     <div className="lower-content">
-                                        <h3><Link href="team-details">{member.name}</Link></h3>
+                                        <h3><Link href={`/area-of-injury/${area.slug}`}>{area.title}</Link></h3>
                                         {/* <span className="designation">{member.role}</span> */}
                                     </div>
                                 </div>
@@ -54,7 +55,7 @@ export default function AreaOfInjury() {
                     ))}
                     <div className='col-12 text-center'>
                         <div className="btn-box">
-                            <Link href="index-2" className="theme-btn btn-one"><span>View All</span></Link>
+                            <Link href="/area-of-injury" className="theme-btn btn-one"><span>View All</span></Link>
                         </div>
                     </div>
                 </div>
diff --git a/components/sections/home/MobileServicesSection.js b/components/sections/home/MobileServicesSection.js
index 29b4a32..c96c999 100644
--- a/components/sections/home/MobileServicesSection.js
+++ b/components/sections/home/MobileServicesSection.js
@@ -1,3 +1,4 @@
+import { servicesList } from "@/utils/Services.utils"
 import Link from "next/link"
 
 
@@ -11,54 +12,26 @@ export default function MobileServices() {
                         <h2>We Offer For You Medical & <br />Saving Lives</h2>
                     </div>
                     <div className="row clearfix">
-                        <div className="col-lg-3 col-md-6 col-6 feature-block">
-                            <div className="feature-block-one">
-                                <div className="inner-box text-center">
-                                    <div className="icon-box"><i className="icon-9"></i></div>
-                                    <h3><Link href="/">Qualified Doctor</Link></h3>
-                                    <div className="btn-box">
-                                        <Link href="index-2" className="theme-btn-2 btn-one"><span>View Services</span></Link>
+                        {
+                            servicesList?.slice(0, 8)?.map((service, index) => {
+                                return (
+                                    <div className="col-lg-3 col-md-6 col-6 feature-block" key={index}>
+                                        <div className="feature-block-one">
+                                            <div className="inner-box text-center">
+                                                <div className="icon-box"><i className="icon-9"></i></div>
+                                                <h3><Link href="/">     {service?.title?.length > 20
+                                                    ? service.title.slice(0, 20) + "..."
+                                                    : service.title}</Link></h3>
+                                                <div className="btn-box">
+                                                    <Link href="index-2" className="theme-btn-2 btn-one"><span>View Services</span></Link>
+                                                </div>
+                                                {/* <p>Lorem ipsum dolor sit amet ctetur adipiscing</p> */}
+                                            </div>
+                                        </div>
                                     </div>
-                                    {/* <p>Lorem ipsum dolor sit amet ctetur adipiscing</p> */}
-                                </div>
-                            </div>
-                        </div>
-                        <div className="col-lg-3 col-md-6 col-6 feature-block">
-                            <div className="feature-block-one">
-                                <div className="inner-box text-center">
-                                    <div className="icon-box"><i className="icon-10"></i></div>
-                                    <h3><Link href="/">Emergency Help</Link></h3>
-                                    <div className="btn-box">
-                                        <Link href="index-2" className="theme-btn-2 btn-one"><span>View Services</span></Link>
-                                    </div>
-                                    {/* <p>Lorem ipsum dolor sit amet ctetur adipiscing</p> */}
-                                </div>
-                            </div>
-                        </div>
-                        <div className="col-lg-3 col-md-6 col-6 feature-block">
-                            <div className="feature-block-one">
-                                <div className="inner-box text-center">
-                                    <div className="icon-box"><i className="icon-11"></i></div>
-                                    <h3><Link href="/">Modern Equipment</Link></h3>
-                                    <div className="btn-box">
-                                        <Link href="index-2" className="theme-btn-2 btn-one"><span>View Services</span></Link>
-                                    </div>
-                                    {/* <p>Lorem ipsum dolor sit amet ctetur adipiscing</p> */}
-                                </div>
-                            </div>
-                        </div>
-                        <div className="col-lg-3 col-md-6 col-6 feature-block">
-                            <div className="feature-block-one">
-                                <div className="inner-box text-center">
-                                    <div className="icon-box"><i className="icon-12"></i></div>
-                                    <h3><Link href="/">Family Medicine</Link></h3>
-                                    <div className="btn-box">
-                                        <Link href="index-2" className="theme-btn-2 btn-one"><span>View Services</span></Link>
-                                    </div>
-                                    {/* <p>Lorem ipsum dolor sit amet ctetur adipiscing</p> */}
-                                </div>
-                            </div>
-                        </div>
+                                )
+                            })
+                        }
 
                         <div className='col-12 text-center'>
                             <div className="btn-box">
diff --git a/components/sections/home/ServicesSection.js b/components/sections/home/ServicesSection.js
index aa1dfe9..51c27b6 100644
--- a/components/sections/home/ServicesSection.js
+++ b/components/sections/home/ServicesSection.js
@@ -1,3 +1,4 @@
+import { servicesList } from '@/utils/Services.utils';
 import Link from 'next/link';
 import React from 'react';
 
@@ -10,93 +11,39 @@ export default function ServicesSection() {
                     <h2>We Offer For You Medical & <br />Saving Lives</h2>
                 </div>
                 <div className="row clearfix">
-                    <div className="col-lg-4 col-md-6 col-sm-12 service-block">
-                        <div className="service-block-one wow fadeInUp animated" data-wow-delay="00ms" data-wow-duration="1500ms">
-                            <div className="inner-box">
-                                <div className="image-box">
-                                    <figure className="image"><Link href="service-details-3"><img src="assets/images/service/service-1.jpg" alt="" /></Link></figure>
-                                    <div className="icon-box"><i className="icon-15"></i></div>
+                    {
+                        servicesList?.slice(0, 6)?.map((service, index) => {
+                            return (
+                                <div className="col-lg-4 col-md-6 col-sm-12 service-block" key={index}>
+                                    <div className="service-block-one wow fadeInUp animated" data-wow-delay="00ms" data-wow-duration="1500ms">
+                                        <div className="inner-box">
+                                            <div className="image-box">
+                                                <figure className="image"><Link href="service-details-3"><img src="assets/images/service/service-1.jpg" alt="" /></Link></figure>
+                                                <div className="icon-box"><i className="icon-15"></i></div>
+                                            </div>
+                                            <div className="lower-content">
+                                                <h3>
+                                                    <Link href={`/etobicoke-treatment-service/${service.slug}`}>
+                                                        {service?.title?.length > 25
+                                                            ? service.title.slice(0, 25) + "..."
+                                                            : service.title}
+                                                    </Link>
+                                                </h3>
+                                                <p>
+                                                    {service?.shortDescription?.length > 70
+                                                        ? service.shortDescription.slice(0, 70) + "..."
+                                                        : service.shortDescription}
+                                                </p>
+                                            </div>
+                                        </div>
+                                    </div>
                                 </div>
-                                <div className="lower-content">
-                                    <h3><Link href="service-details-3">Neurosurgery</Link></h3>
-                                    <p>Amet minim mollit non deserunt ullamco aliqua dolor do amet sint.</p>
-                                </div>
-                            </div>
-                        </div>
-                    </div>
-                    <div className="col-lg-4 col-md-6 col-sm-12 service-block">
-                        <div className="service-block-one wow fadeInUp animated" data-wow-delay="300ms" data-wow-duration="1500ms">
-                            <div className="inner-box">
-                                <div className="image-box">
-                                    <figure className="image"><Link href="service-details-6"><img src="assets/images/service/service-2.jpg" alt="" /></Link></figure>
-                                    <div className="icon-box"><i className="icon-16"></i></div>
-                                </div>
-                                <div className="lower-content">
-                                    <h3><Link href="service-details-6">Modern Laboratory</Link></h3>
-                                    <p>Amet minim mollit non deserunt ullamco aliqua dolor do amet sint.</p>
-                                </div>
-                            </div>
-                        </div>
-                    </div>
-                    <div className="col-lg-4 col-md-6 col-sm-12 service-block">
-                        <div className="service-block-one wow fadeInUp animated" data-wow-delay="600ms" data-wow-duration="1500ms">
-                            <div className="inner-box">
-                                <div className="image-box">
-                                    <figure className="image"><Link href="service-details"><img src="assets/images/service/service-3.jpg" alt="" /></Link></figure>
-                                    <div className="icon-box"><i className="icon-17"></i></div>
-                                </div>
-                                <div className="lower-content">
-                                    <h3><Link href="service-details">Experienced Doctors</Link></h3>
-                                    <p>Amet minim mollit non deserunt ullamco aliqua dolor do amet sint.</p>
-                                </div>
-                            </div>
-                        </div>
-                    </div>
-                     <div className="col-lg-4 col-md-6 col-sm-12 service-block">
-                        <div className="service-block-one wow fadeInUp animated" data-wow-delay="00ms" data-wow-duration="1500ms">
-                            <div className="inner-box">
-                                <div className="image-box">
-                                    <figure className="image"><Link href="service-details-3"><img src="assets/images/service/service-1.jpg" alt="" /></Link></figure>
-                                    <div className="icon-box"><i className="icon-15"></i></div>
-                                </div>
-                                <div className="lower-content">
-                                    <h3><Link href="service-details-3">Neurosurgery</Link></h3>
-                                    <p>Amet minim mollit non deserunt ullamco aliqua dolor do amet sint.</p>
-                                </div>
-                            </div>
-                        </div>
-                    </div>
-                    <div className="col-lg-4 col-md-6 col-sm-12 service-block">
-                        <div className="service-block-one wow fadeInUp animated" data-wow-delay="300ms" data-wow-duration="1500ms">
-                            <div className="inner-box">
-                                <div className="image-box">
-                                    <figure className="image"><Link href="service-details-6"><img src="assets/images/service/service-2.jpg" alt="" /></Link></figure>
-                                    <div className="icon-box"><i className="icon-16"></i></div>
-                                </div>
-                                <div className="lower-content">
-                                    <h3><Link href="service-details-6">Modern Laboratory</Link></h3>
-                                    <p>Amet minim mollit non deserunt ullamco aliqua dolor do amet sint.</p>
-                                </div>
-                            </div>
-                        </div>
-                    </div>
-                    <div className="col-lg-4 col-md-6 col-sm-12 service-block">
-                        <div className="service-block-one wow fadeInUp animated" data-wow-delay="600ms" data-wow-duration="1500ms">
-                            <div className="inner-box">
-                                <div className="image-box">
-                                    <figure className="image"><Link href="service-details"><img src="assets/images/service/service-3.jpg" alt="" /></Link></figure>
-                                    <div className="icon-box"><i className="icon-17"></i></div>
-                                </div>
-                                <div className="lower-content">
-                                    <h3><Link href="service-details">Experienced Doctors</Link></h3>
-                                    <p>Amet minim mollit non deserunt ullamco aliqua dolor do amet sint.</p>
-                                </div>
-                            </div>
-                        </div>
-                    </div>
+                            )
+                        })
+                    }
                     <div className='col-12 text-center'>
                         <div className="btn-box">
-                            <Link href="index-2" className="theme-btn btn-one"><span>View All Services</span></Link>
+                            <Link href="/etobicoke-treatment-service" className="theme-btn btn-one"><span>View All Services</span></Link>
                         </div>
                     </div>
                 </div>
diff --git a/public/assets/css/module-css/team.css b/public/assets/css/module-css/team.css
index 1c42c28..8777f7d 100644
--- a/public/assets/css/module-css/team.css
+++ b/public/assets/css/module-css/team.css
@@ -102,7 +102,7 @@
 .team-block-one .inner-box .lower-content h3{
   display: block;
   font-size: 20px;
-  line-height: 36px;
+  line-height: 30px;
   font-weight: 600;
   margin-bottom: 5px;
 }
@@ -327,6 +327,7 @@
 .team-block-one .inner-box .lower-content h3{
   font-size: 16px;
   margin-bottom: 0px;
+  line-height: 24px;
 }
 
 }