home page services and area of injury section updated in dynamicaly
This commit is contained in:
Alaguraj0361
parent
2f4f8a5a2a
commit
d5a1292ff7
@ -1,5 +1,6 @@
|
|||||||
import React from 'react';
|
import React from 'react';
|
||||||
import Link from "next/link"
|
import Link from "next/link"
|
||||||
|
import { areaOfInjuryData } from '@/utils/AreaOfInjery.utils';
|
||||||
export default function AreaOfInjury() {
|
export default function AreaOfInjury() {
|
||||||
const teamMembers = [
|
const teamMembers = [
|
||||||
{ name: 'Black Marvin', role: 'Medical Assistant', image: 'assets/images/team/team-1.jpg' },
|
{ name: 'Black Marvin', role: 'Medical Assistant', image: 'assets/images/team/team-1.jpg' },
|
||||||
@ -31,21 +32,21 @@ export default function AreaOfInjury() {
|
|||||||
</h3>
|
</h3>
|
||||||
</div>
|
</div>
|
||||||
<div className="row clearfix">
|
<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 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="team-block-one wow fadeInUp animated" data-wow-delay={`${index * 200}ms`} data-wow-duration="1500ms">
|
||||||
<div className="inner-box">
|
<div className="inner-box">
|
||||||
<div className="image-box">
|
<div className="image-box">
|
||||||
<figure className="image"><img src={member.image} alt={`${member.name}'s photo`} /></figure>
|
<figure className="image"><img src={area.image} alt={`${area.name}'s photo`} /></figure>
|
||||||
<ul className="social-links clearfix">
|
{/* <ul className="social-links clearfix">
|
||||||
<li><Link href="/#"><i className="icon-4"></i></Link></li>
|
<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-5"></i></Link></li>
|
||||||
<li><Link href="/#"><i className="icon-6"></i></Link></li>
|
<li><Link href="/#"><i className="icon-6"></i></Link></li>
|
||||||
<li><Link href="/#"><i className="icon-7"></i></Link></li>
|
<li><Link href="/#"><i className="icon-7"></i></Link></li>
|
||||||
</ul>
|
</ul> */}
|
||||||
</div>
|
</div>
|
||||||
<div className="lower-content">
|
<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> */}
|
{/* <span className="designation">{member.role}</span> */}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@ -54,7 +55,7 @@ export default function AreaOfInjury() {
|
|||||||
))}
|
))}
|
||||||
<div className='col-12 text-center'>
|
<div className='col-12 text-center'>
|
||||||
<div className="btn-box">
|
<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>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@ -1,3 +1,4 @@
|
|||||||
|
import { servicesList } from "@/utils/Services.utils"
|
||||||
import Link from "next/link"
|
import Link from "next/link"
|
||||||
|
|
||||||
|
|
||||||
@ -11,54 +12,26 @@ export default function MobileServices() {
|
|||||||
<h2>We Offer For You Medical & <br />Saving Lives</h2>
|
<h2>We Offer For You Medical & <br />Saving Lives</h2>
|
||||||
</div>
|
</div>
|
||||||
<div className="row clearfix">
|
<div className="row clearfix">
|
||||||
<div className="col-lg-3 col-md-6 col-6 feature-block">
|
{
|
||||||
<div className="feature-block-one">
|
servicesList?.slice(0, 8)?.map((service, index) => {
|
||||||
<div className="inner-box text-center">
|
return (
|
||||||
<div className="icon-box"><i className="icon-9"></i></div>
|
<div className="col-lg-3 col-md-6 col-6 feature-block" key={index}>
|
||||||
<h3><Link href="/">Qualified Doctor</Link></h3>
|
<div className="feature-block-one">
|
||||||
<div className="btn-box">
|
<div className="inner-box text-center">
|
||||||
<Link href="index-2" className="theme-btn-2 btn-one"><span>View Services</span></Link>
|
<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>
|
</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='col-12 text-center'>
|
||||||
<div className="btn-box">
|
<div className="btn-box">
|
||||||
|
|||||||
@ -1,3 +1,4 @@
|
|||||||
|
import { servicesList } from '@/utils/Services.utils';
|
||||||
import Link from 'next/link';
|
import Link from 'next/link';
|
||||||
import React from 'react';
|
import React from 'react';
|
||||||
|
|
||||||
@ -10,93 +11,39 @@ export default function ServicesSection() {
|
|||||||
<h2>We Offer For You Medical & <br />Saving Lives</h2>
|
<h2>We Offer For You Medical & <br />Saving Lives</h2>
|
||||||
</div>
|
</div>
|
||||||
<div className="row clearfix">
|
<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">
|
servicesList?.slice(0, 6)?.map((service, index) => {
|
||||||
<div className="inner-box">
|
return (
|
||||||
<div className="image-box">
|
<div className="col-lg-4 col-md-6 col-sm-12 service-block" key={index}>
|
||||||
<figure className="image"><Link href="service-details-3"><img src="assets/images/service/service-1.jpg" alt="" /></Link></figure>
|
<div className="service-block-one wow fadeInUp animated" data-wow-delay="00ms" data-wow-duration="1500ms">
|
||||||
<div className="icon-box"><i className="icon-15"></i></div>
|
<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>
|
||||||
<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='col-12 text-center'>
|
||||||
<div className="btn-box">
|
<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>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@ -102,7 +102,7 @@
|
|||||||
.team-block-one .inner-box .lower-content h3{
|
.team-block-one .inner-box .lower-content h3{
|
||||||
display: block;
|
display: block;
|
||||||
font-size: 20px;
|
font-size: 20px;
|
||||||
line-height: 36px;
|
line-height: 30px;
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
margin-bottom: 5px;
|
margin-bottom: 5px;
|
||||||
}
|
}
|
||||||
@ -327,6 +327,7 @@
|
|||||||
.team-block-one .inner-box .lower-content h3{
|
.team-block-one .inner-box .lower-content h3{
|
||||||
font-size: 16px;
|
font-size: 16px;
|
||||||
margin-bottom: 0px;
|
margin-bottom: 0px;
|
||||||
|
line-height: 24px;
|
||||||
}
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user