82 lines
4.9 KiB
TypeScript
82 lines
4.9 KiB
TypeScript
import React from 'react';
|
|
|
|
interface WhyChooseTwoProps {
|
|
reverse?: boolean;
|
|
}
|
|
|
|
const WhyChooseTwo: React.FC<WhyChooseTwoProps> = ({ reverse = false }) => {
|
|
return (
|
|
<section className="why-choose-two">
|
|
<img src="https://bracketweb.com/pelocishtml/assets/images/shapes/why-chosse-2-shape.png" alt="pelocis" 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">WHY CHOOSE US</h6>
|
|
<h3 className="sec-title__title">We Providing Psychology People <br /> Choose of Promoting</h3>
|
|
</div>
|
|
<p className="why-choose-two__text">
|
|
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 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">
|
|
<span className="fa-solid fa-lightbulb"></span>
|
|
</div>
|
|
<div className="why-choose-two__item__content">
|
|
<h3 className="why-choose-two__item__title">Family Service Psychology</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">
|
|
<span className="fa-solid fa-brain"></span>
|
|
</div>
|
|
<div className="why-choose-two__item__content">
|
|
<h3 className="why-choose-two__item__title">Cognitive off Psychology</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">
|
|
<span className="fa-solid fa-people-roof"></span>
|
|
</div>
|
|
<div className="why-choose-two__item__content">
|
|
<h3 className="why-choose-two__item__title">Relationship Psychology</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: '-367.812px', marginRight: '0px' } : { marginLeft: '0px', marginRight: '-367.812px' }}>
|
|
<div className="why-choose-two__shape-one">
|
|
<img src="https://bracketweb.com/pelocishtml/assets/images/resources/why-choose-two-img-1.png" alt="pelocis" />
|
|
</div>
|
|
<div className="why-choose-two__shape-two"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
};
|
|
|
|
export default WhyChooseTwo;
|