276 lines
11 KiB
TypeScript
276 lines
11 KiB
TypeScript
import React from "react";
|
|
|
|
const AboutService = () => {
|
|
return (
|
|
<section className="about-service section-space">
|
|
<div className="container">
|
|
<div className="row align-items-center">
|
|
<div className="col-lg-6">
|
|
<div className="about-image-stack p-relative">
|
|
{/* Experience Box */}
|
|
{/* <div className="experience-box animate-bounce-y">
|
|
<h3>37+</h3>
|
|
<span>Years Experience</span>
|
|
</div> */}
|
|
|
|
{/* Background Image */}
|
|
<div className="main-img-wrap">
|
|
<img src="/assets/img/about/about-img1.png" alt="Office Meeting" />
|
|
</div>
|
|
|
|
{/* Foreground Curved Image */}
|
|
<div className="curved-img-wrap">
|
|
<img src="/assets/img/about/about-img13.png" alt="Collaborative Work" />
|
|
</div>
|
|
|
|
{/* Decorative Dots */}
|
|
<div className="dots-shape">
|
|
<img src="/assets/imgs/shapes/shape-6.png" alt="dots" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="col-lg-6">
|
|
<div className="content-area pl-60">
|
|
<div className="section-title-wrapper mb-30">
|
|
<span className="section-subtitle">
|
|
<i className="fa-solid fa-play rotate-triangle"></i> OUR ABOUT US
|
|
</span>
|
|
<h2 className="section-title">
|
|
We Provide Professional Advice About This Business.
|
|
</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="single-format-content mb-40">
|
|
<div className="format-row d-flex align-items-start gap-4">
|
|
{/* <div className="small-feature-img">
|
|
<img src="/assets/img/about/about-img10.png" alt="Team" className="rounded-3" />
|
|
</div> */}
|
|
<div className="feature-bullets">
|
|
<div className="bullet-item d-flex align-items-center mb-15">
|
|
<i className="fa-solid fa-circle-check maroon-icon"></i>
|
|
<span>Great solution for your business growth.</span>
|
|
</div>
|
|
<div className="bullet-item d-flex align-items-center">
|
|
<i className="fa-solid fa-circle-check maroon-icon"></i>
|
|
<span>Remind yourself Business know fact.</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="btn-wrapper">
|
|
<a href="/about-us" className="about-more-btn">
|
|
<span>ABOUT MORE</span>
|
|
<div className="icon-circle">
|
|
<i className="fa-solid fa-chevron-right"></i>
|
|
</div>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<style jsx>{`
|
|
.about-service {
|
|
padding: 80px 0;
|
|
background: #fff;
|
|
overflow: hidden;
|
|
}
|
|
@media (max-width: 767px) {
|
|
.about-service {
|
|
padding: 60px 0;
|
|
}
|
|
}
|
|
.about-image-stack {
|
|
padding-top: 50px;
|
|
padding-left: 30px;
|
|
}
|
|
.experience-box {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
background: #3779b9;
|
|
color: #fff;
|
|
padding: 40px 30px;
|
|
z-index: 3;
|
|
text-align: center;
|
|
border-radius: 4px;
|
|
box-shadow: 0 10px 30px rgba(60, 114, 252, 0.3);
|
|
}
|
|
.experience-box h3 {
|
|
font-size: 54px;
|
|
font-weight: 800;
|
|
margin: 0;
|
|
line-height: 1;
|
|
}
|
|
.experience-box span {
|
|
font-size: 16px;
|
|
font-weight: 600;
|
|
display: block;
|
|
margin-top: 5px;
|
|
line-height: 1.2;
|
|
}
|
|
.main-img-wrap {
|
|
width: 100%;
|
|
max-width: 450px;
|
|
border-radius: 10px;
|
|
overflow: hidden;
|
|
margin-left: auto;
|
|
box-shadow: 0 20px 50px rgba(0,0,0,0.08);
|
|
}
|
|
.main-img-wrap img {
|
|
width: 100%;
|
|
display: block;
|
|
}
|
|
.curved-img-wrap {
|
|
position: absolute;
|
|
bottom: -40px;
|
|
left: -20px;
|
|
width: 320px;
|
|
height: 320px;
|
|
border-radius: 100px 30px 100px 100px;
|
|
overflow: hidden;
|
|
border: 8px solid #fff;
|
|
z-index: 2;
|
|
box-shadow: 0 15px 45px rgba(0,0,0,0.12);
|
|
}
|
|
.curved-img-wrap img {
|
|
width: 100%;
|
|
height: 100%;
|
|
object-fit: cover;
|
|
}
|
|
.dots-shape {
|
|
position: absolute;
|
|
top: 80px;
|
|
left: -40px;
|
|
z-index: 1;
|
|
opacity: 0.4;
|
|
}
|
|
.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: 1.5px;
|
|
}
|
|
.rotate-triangle {
|
|
font-size: 14px;
|
|
transform: rotate(-30deg);
|
|
}
|
|
.section-title {
|
|
font-size: 46px;
|
|
font-weight: 800;
|
|
color: #0f172a;
|
|
line-height: 1.2;
|
|
margin-bottom: 25px;
|
|
}
|
|
.section-desc {
|
|
font-size: 16px;
|
|
color: #64748b;
|
|
line-height: 1.8;
|
|
margin-bottom: 35px;
|
|
}
|
|
.small-feature-img {
|
|
width: 140px;
|
|
flex-shrink: 0;
|
|
}
|
|
.small-feature-img img {
|
|
width: 100%;
|
|
}
|
|
.maroon-icon {
|
|
color: #0f172a;
|
|
font-size: 18px;
|
|
margin-right: 12px;
|
|
}
|
|
.bullet-item span {
|
|
font-size: 16px;
|
|
font-weight: 600;
|
|
color: #0f172a;
|
|
}
|
|
.about-more-btn {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
background: #3779b9;
|
|
color: #fff;
|
|
padding: 8px 8px 8px 25px;
|
|
border-radius: 6px;
|
|
text-decoration: none;
|
|
font-weight: 700;
|
|
font-size: 14px;
|
|
letter-spacing: 1px;
|
|
transition: all 0.3s ease;
|
|
}
|
|
.about-more-btn:hover {
|
|
background: #2563eb;
|
|
transform: translateY(-2px);
|
|
}
|
|
.icon-circle {
|
|
width: 40px;
|
|
height: 40px;
|
|
background: #fff;
|
|
color: #3779b9;
|
|
border-radius: 4px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
margin-left: 20px;
|
|
}
|
|
.animate-bounce-y {
|
|
animation: bounceY 4s infinite ease-in-out;
|
|
}
|
|
@keyframes bounceY {
|
|
0%, 100% { transform: translateY(0); }
|
|
50% { transform: translateY(-15px); }
|
|
}
|
|
@media (max-width: 1199px) {
|
|
.content-area {
|
|
padding-left: 30px;
|
|
}
|
|
.section-title {
|
|
font-size: 38px;
|
|
}
|
|
.curved-img-wrap {
|
|
width: 260px;
|
|
height: 260px;
|
|
}
|
|
}
|
|
@media (max-width: 991px) {
|
|
.about-image-stack {
|
|
margin-bottom: 80px;
|
|
padding-left: 0;
|
|
}
|
|
.content-area {
|
|
padding-left: 0;
|
|
}
|
|
}
|
|
@media (max-width: 575px) {
|
|
.curved-img-wrap {
|
|
width: 200px;
|
|
height: 200px;
|
|
bottom: -20px;
|
|
left: 0;
|
|
}
|
|
.experience-box {
|
|
padding: 25px 20px;
|
|
}
|
|
.experience-box h3 {
|
|
font-size: 40px;
|
|
}
|
|
}
|
|
`}</style>
|
|
</section>
|
|
);
|
|
};
|
|
|
|
export default AboutService;
|