83 lines
5.4 KiB
TypeScript
83 lines
5.4 KiB
TypeScript
import React from 'react';
|
||
|
||
interface WhyChooseTwoProps {
|
||
reverse?: boolean;
|
||
}
|
||
|
||
const WhyChooseTwo: React.FC<WhyChooseTwoProps> = ({ reverse = false }) => {
|
||
return (
|
||
<section className="why-choose-two">
|
||
<img loading="lazy" src="/assets/images/about/3/element-bottom-left.webp" alt="Agency that gets excited about element" className="why-choose-two__shape-three" />
|
||
<div className="container">
|
||
<div className={`row ${reverse ? 'flex-row-reverse' : ''}`}>
|
||
<div className="col-xl-6">
|
||
<div className="why-choose-two__content">
|
||
<div className="sec-title">
|
||
<div className="sec-title__shape"></div>
|
||
<h6 className="sec-title__tagline text-white">Watch Us Live</h6>
|
||
<h3 className="sec-title__title text-white">An Agency That Gets Excited <br /> About Your Mission</h3>
|
||
</div>
|
||
<p className='text-white'>
|
||
Every project we take on is personal. We get excited about your goals, your grit, and the journey you’re on.
|
||
</p>
|
||
<p className="why-choose-two__text">
|
||
Whether you’re launching something new or leveling up an existing brand, we bring fresh energy, deep expertise, and full-stack creativity to your table. We don’t just work for you, we work with you, as committed collaborators invested in your long-term growth.
|
||
</p>
|
||
<div className="why-choose-two__box">
|
||
<ul className="why-choose-two__list">
|
||
<li className="why-choose-two__item">
|
||
<div className="why-choose-two__count"></div>
|
||
<div className="why-choose-two__icon">
|
||
<img loading="lazy" src="/assets/images/about/3/icon-1.webp" alt="Urgent development solutions" />
|
||
</div>
|
||
<div className="why-choose-two__item__content">
|
||
<h3 className="why-choose-two__item__title">Urgent development solutions</h3>
|
||
{/* <p className="why-choose-two__item__text">
|
||
Supporting individuals in overcoming service
|
||
</p> */}
|
||
</div>
|
||
</li>
|
||
<li className="why-choose-two__item">
|
||
<div className="why-choose-two__count"></div>
|
||
<div className="why-choose-two__icon">
|
||
<img loading="lazy" src="/assets/images/about/3/icon-2.webp" alt="Top quality services with reasonable price" />
|
||
</div>
|
||
<div className="why-choose-two__item__content">
|
||
<h3 className="why-choose-two__item__title">Top quality services with reasonable price</h3>
|
||
{/* <p className="why-choose-two__item__text">
|
||
Supporting individuals in overcoming service
|
||
</p> */}
|
||
</div>
|
||
</li>
|
||
<li className="why-choose-two__item">
|
||
<div className="why-choose-two__count"></div>
|
||
<div className="why-choose-two__icon">
|
||
<img loading="lazy" src="/assets/images/about/3/icon-3.webp" alt="Professional & experienced team" />
|
||
</div>
|
||
<div className="why-choose-two__item__content">
|
||
<h3 className="why-choose-two__item__title">Professional & experienced team</h3>
|
||
{/* <p className="why-choose-two__item__text">
|
||
Supporting individuals in overcoming service
|
||
</p> */}
|
||
</div>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div className="col-xl-6">
|
||
<div className="pelocis-stretch-element-inside-column" style={reverse ? { marginLeft: '-227.812px', marginRight: '0px' } : { marginLeft: '0px', marginRight: '-267.812px' }}>
|
||
<div className="why-choose-two__shape-one">
|
||
<img loading="lazy" src="/assets/images/about/3/right-img.webp" alt="Agency that gets excited about" />
|
||
</div>
|
||
<div className="why-choose-two__shape-two"></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
);
|
||
};
|
||
|
||
export default WhyChooseTwo;
|