235 lines
9.0 KiB
TypeScript
235 lines
9.0 KiB
TypeScript
import React from "react";
|
|
|
|
const WhyChooseUs = () => {
|
|
return (
|
|
<section className="why-choose-us section-space">
|
|
<div className="container">
|
|
<div className="row align-items-center">
|
|
<div className="col-lg-6">
|
|
<div className="content-area pr-50">
|
|
<div className="section-title-wrapper mb-30">
|
|
<span className="section-subtitle">
|
|
<i className="fa-solid fa-play rotate-triangle"></i> WHY CHOOSE US
|
|
</span>
|
|
<h2 className="section-title">
|
|
Consulting Solutions For Your Business Development.
|
|
</h2>
|
|
<p className="section-desc">
|
|
Business tailored design, management & support services Business business agency elit,
|
|
sed do eiusmod tempor majority have in some we form, by injected humour solution.
|
|
</p>
|
|
</div>
|
|
|
|
<div className="feature-list mb-40">
|
|
<div className="feature-item d-flex align-items-center mb-30">
|
|
<div className="feature-icon">
|
|
<i className="fa-solid fa-handshake-angle"></i>
|
|
</div>
|
|
<div className="feature-content">
|
|
<h4>We Are Improve Choose Business.</h4>
|
|
<p>Market research branding of engagement.</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="feature-item d-flex align-items-center mb-0 border-top-line">
|
|
<div className="feature-icon">
|
|
<i className="fa-solid fa-lightbulb"></i>
|
|
</div>
|
|
<div className="feature-content">
|
|
<h4>Business Consulting This Network.</h4>
|
|
<p>Business tailored design, management & off support.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="bottom-note">
|
|
<div className="note-item">
|
|
<i className="fa-solid fa-circle-arrow-right"></i>
|
|
<span>We are business many variations of passages of this business magical solution.</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="col-lg-6">
|
|
<div className="image-area-wrapper p-relative">
|
|
<div className="main-image">
|
|
<img src="/assets/img/about/about-img8.png" alt="Business Meeting" />
|
|
</div>
|
|
<div className="circular-image">
|
|
<div className="inner-circle">
|
|
<img src="/assets/img/about/about-img10.png" alt="Profile" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<style jsx>{`
|
|
.why-choose-us {
|
|
padding: 80px 0;
|
|
background: #fff;
|
|
}
|
|
@media (max-width: 767px) {
|
|
.why-choose-us {
|
|
padding: 60px 0;
|
|
}
|
|
}
|
|
.section-subtitle {
|
|
color: #3779b9;
|
|
font-weight: 700;
|
|
margin-bottom: 15px;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 12px;
|
|
font-size: 15px;
|
|
text-transform: uppercase;
|
|
letter-spacing: 1px;
|
|
}
|
|
.rotate-triangle {
|
|
font-size: 14px;
|
|
transform: rotate(-30deg);
|
|
margin-top: -2px;
|
|
}
|
|
.section-title {
|
|
font-size: 44px;
|
|
font-weight: 800;
|
|
color: #1a1a1a;
|
|
line-height: 1.2;
|
|
margin-bottom: 25px;
|
|
}
|
|
.section-desc {
|
|
font-size: 16px;
|
|
color: #666;
|
|
line-height: 1.7;
|
|
margin-bottom: 35px;
|
|
}
|
|
.feature-item {
|
|
padding: 25px 0;
|
|
}
|
|
.border-top-line {
|
|
border-top: 1px solid #eee;
|
|
}
|
|
.feature-icon {
|
|
width: 70px;
|
|
height: 70px;
|
|
background: #3779b9;
|
|
border-radius: 6px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
margin-right: 25px;
|
|
flex-shrink: 0;
|
|
color: #fff;
|
|
font-size: 28px;
|
|
}
|
|
.feature-content h4 {
|
|
font-size: 22px;
|
|
font-weight: 700;
|
|
margin-bottom: 8px;
|
|
color: #1a1a1a;
|
|
}
|
|
.feature-content p {
|
|
font-size: 15px;
|
|
color: #666;
|
|
margin: 0;
|
|
}
|
|
.bottom-note {
|
|
padding-top: 30px;
|
|
border-top: 1px solid #eee;
|
|
}
|
|
.note-item {
|
|
display: flex;
|
|
align-items: flex-start;
|
|
gap: 15px;
|
|
}
|
|
.note-item i {
|
|
color: #1a1a1a;
|
|
font-size: 18px;
|
|
margin-top: 3px;
|
|
}
|
|
.note-item span {
|
|
font-size: 16px;
|
|
color: #444;
|
|
font-weight: 500;
|
|
line-height: 1.5;
|
|
}
|
|
.image-area-wrapper {
|
|
padding-left: 20px;
|
|
}
|
|
.main-image {
|
|
width: 100%;
|
|
border-radius: 4px;
|
|
overflow: hidden;
|
|
box-shadow: 0 30px 60px rgba(0,0,0,0.1);
|
|
}
|
|
.main-image img {
|
|
width: 100%;
|
|
display: block;
|
|
}
|
|
.circular-image {
|
|
position: absolute;
|
|
top: 50%;
|
|
left: -80px;
|
|
transform: translateY(-50%);
|
|
width: 280px;
|
|
height: 280px;
|
|
background: #fff;
|
|
padding: 10px;
|
|
border-radius: 50%;
|
|
box-shadow: 0 10px 40px rgba(0,0,0,0.15);
|
|
z-index: 2;
|
|
}
|
|
.inner-circle {
|
|
width: 100%;
|
|
height: 100%;
|
|
border-radius: 50%;
|
|
overflow: hidden;
|
|
border: 2px solid #fff;
|
|
}
|
|
.inner-circle img {
|
|
width: 100%;
|
|
height: 100%;
|
|
object-fit: cover;
|
|
}
|
|
@media (max-width: 1199px) {
|
|
.circular-image {
|
|
width: 220px;
|
|
height: 220px;
|
|
left: -50px;
|
|
}
|
|
.section-title {
|
|
font-size: 36px;
|
|
}
|
|
}
|
|
@media (max-width: 991px) {
|
|
.content-area {
|
|
padding-right: 0;
|
|
margin-bottom: 60px;
|
|
}
|
|
.image-area-wrapper {
|
|
padding-left: 0;
|
|
}
|
|
.circular-image {
|
|
width: 200px;
|
|
height: 200px;
|
|
left: -30px;
|
|
}
|
|
}
|
|
@media (max-width: 575px) {
|
|
.circular-image {
|
|
position: relative;
|
|
top: 0;
|
|
left: 0;
|
|
transform: none;
|
|
margin: -60px auto 0;
|
|
}
|
|
}
|
|
`}</style>
|
|
</section>
|
|
);
|
|
};
|
|
|
|
export default WhyChooseUs;
|