home page services and area of injury section updated in dynamicaly

This commit is contained in:
Alaguraj0361 2025-08-29 18:34:21 +05:30
parent 2f4f8a5a2a
commit d5a1292ff7
4 changed files with 60 additions and 138 deletions

View File

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

View File

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

View File

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

View File

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