About-text component

This commit is contained in:
2023-08-29 08:13:32 -04:00
parent 9b0d5b7ca3
commit e695720809
4 changed files with 151 additions and 108 deletions
+17
View File
@@ -113,6 +113,23 @@ p {
color: #505056;
margin: 0px;
}
.designed-title {
font-size: 24px;
font-weight: 700;
margin-bottom: 10px;
margin-top: 30px;
padding-bottom: 7px;
text-align: center;
text-shadow: 3px 4px 10px rgba(0,0,0,.3);
}
.designed-description {
font-size: 20px;
line-height: 28px;
font-weight: 400;
color: #505056;
text-align: center;
}
.bg_cover {
background-position: center center;
+130
View File
@@ -0,0 +1,130 @@
import React from 'react';
import Design from '../../assets/images/design.png'
import Approach from '../../assets/images/approach.png'
import Interactive from '../../assets/images/interactive.png'
import Mobility from '../../assets/images/mobility-approach.png'
import Privacy from '../../assets/images/privacy.png'
import Seamless from '../../assets/images/seamless.png'
function AboutTextComponent () {
return (
<>
<div className="container">
<div className="row">
<div className="col-lg-4 col-md-6">
<div
className="appie-single-service-2 appie-single-service-about mt-30 wow animated fadeInUp"
data-wow-duration="2000ms"
data-wow-delay="200ms"
>
<div className="icon d-flex justify-content-center align-items-center">
<img src={Design} alt="Design Icon" />
</div>
<h4 className="designed-title">Carefully designed</h4>
<p className="designed-description">
Wrenchboard focuses on your needs and desires.
Your success is our priority, driving us to listen and adapt to your feedback.
We're dedicated to enhancing our products for your convenience. It's all about you, not us.</p>
</div>
</div>
<div className="col-lg-4 col-md-6">
<div
className="appie-single-service-2 appie-single-service-about item-2 mt-30 wow animated fadeInUp"
data-wow-duration="2000ms"
data-wow-delay="400ms"
>
<div className="icon d-flex justify-content-center align-items-center">
<img src={Approach} alt="Approach Icon"/>
</div>
<h4 className="designed-title">Modern Approach</h4>
<p className="designed-description">
Our commitment is delivering a top-tier solution for you.
Our aim: an intuitive, user-friendly product that continually evolves.
By focusing on you, we'll surpass expectations and make a real impact.</p>
</div>
</div>
<div className="col-lg-4 col-md-6">
<div
className="appie-single-service-2 appie-single-service-about item-3 mt-30 wow animated fadeInUp"
data-wow-duration="2000ms"
data-wow-delay="600ms"
>
<div className="icon d-flex justify-content-center align-items-center">
<img src={Interactive} alt="Interactive Icon"/>
</div>
<h4 className="designed-title">User Interactive</h4>
<p className="designed-description">
WrenchBoard keeps you engaged with diverse features.
Email alerts guarantee you're always in the loop.
Get updates your way: email, text, or push notifications .
We've got you covered. </p>
</div>
</div>
<div className="col-lg-4 col-md-6">
<div
className="appie-single-service-2 appie-single-service-about item-4 mt-30 wow animated fadeInUp"
data-wow-duration="2000ms"
data-wow-delay="200ms"
>
<div className="icon d-flex justify-content-center align-items-center">
<img src={Mobility} alt="Mobility Icon" />
</div>
<h4 className="designed-title">Mobility Approach</h4>
<p className="designed-description">
WrenchBoard's tools unite devices for seamless organization and productivity anywhere.
Manage tasks, track responses, and stay connected effortlessly.
Experience a true mobile lifestyle with WrenchBoard!</p>
</div>
</div>
<div className="col-lg-4 col-md-6">
<div
className="appie-single-service-2 appie-single-service-about item-5 mt-30 wow animated fadeInUp"
data-wow-duration="2000ms"
data-wow-delay="400ms"
>
<div className="icon d-flex justify-content-center align-items-center">
<img src={Seamless} alt="Seamless Icon"/>
</div>
<h4 className="designed-title">Seamless Sync</h4>
<p className="designed-description">
WrenchBoard simplifies cross-platform activity management.
Our features sync seamlessly on desktop, tablet, and phone, ensuring organization and productivity.
No more app hopping . WrenchBoard streamlines the process.</p>
</div>
</div>
<div className="col-lg-4 col-md-6">
<div
className="appie-single-service-2 appie-single-service-about item-6 mt-30 wow animated fadeInUp"
data-wow-duration="2000ms"
data-wow-delay="600ms"
>
<div className="icon d-flex justify-content-center align-items-center">
<img src={Privacy} alt="Privacy Icon"/>
</div>
<h4 className="designed-title">Privacy</h4>
<p className="designed-description">
Your privacy matters. WrenchBoard works without data sharing, ensuring your information stays secure.
Manage tasks across platforms confidently, enjoying a unified experience that respects your privacy.</p>
</div>
</div>
</div>
</div>
</>
);
};
export default AboutTextComponent;
+2 -108
View File
@@ -1,14 +1,5 @@
import React from 'react';
import Design from '../../assets/images/design.png'
import Approach from '../../assets/images/approach.png'
import Interactive from '../../assets/images/interactive.png'
import Mobility from '../../assets/images/mobility-approach.png'
import Privacy from '../../assets/images/privacy.png'
import Seamless from '../../assets/images/seamless.png'
import AboutTextComponent from '../AboutText/AboutText';
function ServicesAbout() {
@@ -24,104 +15,7 @@ function ServicesAbout() {
</div>
</div>
</div>
<div className="row">
<div className="col-lg-4 col-md-6">
<div
className="appie-single-service-2 appie-single-service-about mt-30 wow animated fadeInUp"
data-wow-duration="2000ms"
data-wow-delay="200ms"
>
<div className="icon d-flex justify-content-center align-items-center">
{/* <div className='container'>
<i className="fal fa-tv"></i>
</div> */}
<img src={Design} />
</div>
<h4 className="title">Carefully designed</h4>
<p>Wrenchboard focuses on your needs and desires. Your success is our priority, driving us to listen and adapt to your feedback. We're dedicated to enhancing our products for your convenience. It's all about you, not us.</p>
</div>
</div>
<div className="col-lg-4 col-md-6">
<div
className="appie-single-service-2 appie-single-service-about item-2 mt-30 wow animated fadeInUp"
data-wow-duration="2000ms"
data-wow-delay="400ms"
>
<div className="icon d-flex justify-content-center align-items-center">
{/* <div className='container'>
<i className="fal fa-code"></i>
</div> */}
<img src={Approach} />
</div>
<h4 className="title">Modern Approach</h4>
<p>Our commitment is delivering a top-tier solution for you. Our aim: an intuitive, user-friendly product that continually evolves. By focusing on you, we'll surpass expectations and make a real impact.</p>
</div>
</div>
<div className="col-lg-4 col-md-6">
<div
className="appie-single-service-2 appie-single-service-about item-3 mt-30 wow animated fadeInUp"
data-wow-duration="2000ms"
data-wow-delay="600ms"
>
<div className="icon d-flex justify-content-center align-items-center">
{/* <div className='container'>
<i className="fal fa-user-friends"></i>
</div> */}
<img src={Interactive} />
</div>
<h4 className="title">User Interactive</h4>
<p>WrenchBoard keeps you engaged with diverse features. Email alerts guarantee you're always in the loop. Get updates your way: email, text, or push notifications . We've got you covered. </p>
</div>
</div>
<div className="col-lg-4 col-md-6">
<div
className="appie-single-service-2 appie-single-service-about item-4 mt-30 wow animated fadeInUp"
data-wow-duration="2000ms"
data-wow-delay="200ms"
>
<div className="icon d-flex justify-content-center align-items-center">
{/* <div className='container'>
<i className="fal fa-mobile"></i>
</div> */}
<img src={Mobility} />
</div>
<h4 className="title">Mobility Approach</h4>
<p>WrenchBoard's tools unite devices for seamless organization and productivity anywhere. Manage tasks, track responses, and stay connected effortlessly. Experience a true mobile lifestyle with WrenchBoard!</p>
</div>
</div>
<div className="col-lg-4 col-md-6">
<div
className="appie-single-service-2 appie-single-service-about item-5 mt-30 wow animated fadeInUp"
data-wow-duration="2000ms"
data-wow-delay="400ms"
>
<div className="icon d-flex justify-content-center align-items-center">
{/* <div className='container'>
<i className="fal fa-retweet"></i>
</div> */}
<img src={Seamless} />
</div>
<h4 className="title">Seamless Sync</h4>
<p> WrenchBoard simplifies cross-platform activity management. Our features sync seamlessly on desktop, tablet, and phone, ensuring organization and productivity. No more app hopping . WrenchBoard streamlines the process.</p>
</div>
</div>
<div className="col-lg-4 col-md-6">
<div
className="appie-single-service-2 appie-single-service-about item-6 mt-30 wow animated fadeInUp"
data-wow-duration="2000ms"
data-wow-delay="600ms"
>
<div className="icon d-flex justify-content-center align-items-center">
{/* <div className='container'>
<i className="fal fa-bell"></i>
</div> */}
<img src={Privacy} />
</div>
<h4 className="title">Privacy</h4>
<p>Your privacy matters. WrenchBoard works without data sharing, ensuring your information stays secure. Manage tasks across platforms confidently, enjoying a unified experience that respects your privacy.</p>
</div>
</div>
</div>
</div>
</section>
</>
+2
View File
@@ -10,6 +10,7 @@ import HeroAbout from './HeroAbout';
import ServicesAbout from './ServicesAbout';
import TeamAbout from './TeamAbout';
import StickyHeaderNav from '../StickyHeader/StickyHeaderNav';
import AboutTextComponent from '../AboutText/AboutText';
function AboutUs() {
const [drawer, drawerAction] = useToggle(false);
@@ -23,6 +24,7 @@ function AboutUs() {
{/* <TeamAbout />*/}
{/* <SponserHomeTwo />
<SignupHomeEight />*/}
<AboutTextComponent/>
<FooterHomeOne className="appie-footer-about-area" />
<BackToTop />
</>