50 lines
1.8 KiB
JavaScript
50 lines
1.8 KiB
JavaScript
import React from 'react';
|
|
import Link from "next/link"
|
|
const ProgressBar = ({ label, percent }) => (
|
|
<div className="progress-box">
|
|
<p>{label}</p>
|
|
<div className="bar">
|
|
<div className="bar-inner count-bar" style={{ width: `${percent}%` }}></div>
|
|
<div className="count-text">{`${percent}%`}</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
export default function Solution() {
|
|
return (
|
|
<section className="solutions-section bg-color-1 p_relative">
|
|
<div className="auto-container">
|
|
<div className="row clearfix">
|
|
<div className="col-lg-6 col-md-12 col-sm-12 content-column">
|
|
<div className="content-box">
|
|
<div className="sec-title mb_50">
|
|
<span className="sub-title">Better Solutions</span>
|
|
<h2>Quality Medical Service with Experts</h2>
|
|
</div>
|
|
<div className="progress-inner mb_50">
|
|
|
|
<ProgressBar label="Skilled Doctor" percent={85} />
|
|
<ProgressBar label="Modernized Equipment" percent={90} />
|
|
<ProgressBar label="Dedicated Team" percent={80} />
|
|
</div>
|
|
<div className="btn-box">
|
|
<Link href="index-2" className="theme-btn btn-one"><span>Discover More</span></Link>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div className="col-lg-6 col-md-12 col-sm-12 image-column">
|
|
<div className="image_block_two">
|
|
<div className="image-box">
|
|
<figure className="image image-1"><img src="assets/images/resource/skills-1.jpg" alt="" /></figure>
|
|
<figure className="image image-2"><img src="assets/images/resource/skills-2.jpg" alt="" /></figure>
|
|
<div className="icon-box"><i className="icon-33"></i></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
)
|
|
};
|
|
|
|
|