Compare commits
25 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
| 7442f9c691 | |||
| 2b0294d63d | |||
| 2a2a2f7aab | |||
| a81269bc44 | |||
| 5da1291afd | |||
| 3411bd0eba | |||
| 32679cc055 | |||
| e9c173568f | |||
| 7cca3d7696 | |||
| e695720809 | |||
| 9b0d5b7ca3 | |||
| 4fdba68f8b | |||
| 8796d2ee7c | |||
| 46737bd8fd | |||
| f7ac23748d | |||
| bbc2bd29fa | |||
| 71b30b8987 | |||
| 81fe0f6acf | |||
| 8927614cd6 | |||
| f3eb3858e1 | |||
| 3e415062fa | |||
| c3b2006fe2 | |||
| 52b25308d2 | |||
| 34844c08de | |||
| c2b4bf6964 |
+55
-4
@@ -107,12 +107,29 @@ ol {
|
||||
}
|
||||
|
||||
p {
|
||||
font-size: 17px;
|
||||
font-size: 18px;
|
||||
font-weight: 400;
|
||||
line-height: 24px;
|
||||
line-height: 28px;
|
||||
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;
|
||||
@@ -2510,11 +2527,13 @@ p {
|
||||
width: 100px;
|
||||
}
|
||||
.appie-single-service-2 .title {
|
||||
font-size: 20px;
|
||||
font-size: 24px;
|
||||
font-weight: 700;
|
||||
margin-top: 30px;
|
||||
margin-bottom: 10px;
|
||||
text-align: center;
|
||||
text-shadow: 3px 4px 10px rgba(0,0,0,0.3);
|
||||
padding-bottom: 7px;
|
||||
}
|
||||
.appie-single-service-2 a {
|
||||
font-size: 14px;
|
||||
@@ -3023,6 +3042,38 @@ p {
|
||||
color: #9b2cfa;
|
||||
}
|
||||
|
||||
/*===========================
|
||||
6.On WrenchBoard Area css
|
||||
===========================*/
|
||||
.wrench-on-area {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
z-index: 15;
|
||||
/* background-color: #fbf4fe; */
|
||||
}
|
||||
/* .wrench-on-area .traffic-thumb {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
width: 42%;
|
||||
} */
|
||||
/* @media (max-width: 767px) {
|
||||
.wrench-on-area .traffic-thumb {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
@media only screen and (min-width: 768px) and (max-width: 991px) {
|
||||
.wrench-on-area .traffic-thumb {
|
||||
display: none;
|
||||
}
|
||||
} */
|
||||
|
||||
.withFadeEdge{
|
||||
border-radius: 10px 10px 10px 10px;
|
||||
/* box-shadow: inset 0 0 15px 25px white; */
|
||||
box-shadow: 0 0 10px 20px #fff inset;
|
||||
}
|
||||
/*===========================
|
||||
6.APPIE TRAFFICE css
|
||||
===========================*/
|
||||
@@ -6440,7 +6491,7 @@ blockquote cite {
|
||||
color: #fff;
|
||||
padding-top: 18px;
|
||||
line-height: 28px;
|
||||
opacity: 0.7;
|
||||
opacity: 2.9;
|
||||
}
|
||||
.appie-about-page-content a {
|
||||
color: red;
|
||||
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 114 KiB |
@@ -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;
|
||||
@@ -21,12 +21,12 @@ function HeroAbout() {
|
||||
<div className="col-12">
|
||||
<div className="appie-about-page-content">
|
||||
<h3 className="title">
|
||||
Online Marketplace Platform to Get Paid.
|
||||
We Empower Reward for Achievements
|
||||
</h3>
|
||||
<p>
|
||||
WrenchBoard is the marketplace that connects independent talent with businesses that require their skill set and get paid.
|
||||
We serve everyone from one-person startups to a powerful, trust-driven platform that facilitates businesses and freelancers to work concurrently in unique patterns that unlock their potential.
|
||||
Our platform provides a range of skills in categories including consulting, finance & accounting, website & app development, creative & design, customer support and operations. Learn more at <a href={process.env.REACT_APP_DASH_URL}>www.WrenchBoard.com</a>
|
||||
WrenchBoard prioritizes safety above all. Parents can set up family accounts to oversee their children's activities and earnings. We implement strict guidelines to ensure age-appropriate tasks and interactions, providing a worry-free space for both kids and their guardians.
|
||||
We believe that earning should go hand in hand with learning. As kids complete projects and earn, they also acquire essential life skills such as financial literacy, time management, and effective communication. WrenchBoard isn't just about making money; it's about fostering holistic growth.
|
||||
Learn more at <a href={process.env.REACT_APP_DASH_URL}>www.WrenchBoard.com</a>
|
||||
</p>
|
||||
|
||||
</div>
|
||||
|
||||
@@ -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() {
|
||||
@@ -20,108 +11,11 @@ function ServicesAbout() {
|
||||
<div className="col-12 col-lg-8">
|
||||
<div className="appie-section-title">
|
||||
<h3 className="appie-title">We’re driven by your values</h3>
|
||||
<p>The app provides design and digital marketing. </p>
|
||||
</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 prioritizes your needs and desires. We know that the your success depends on how well we meet your needs. So, we always listen to feedback and take suggestions to heart, constantly striving to improve our products and make them as user-friendly as possible. It's not about us - it's about you.</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>We're committed to providing a cutting-edge solution that serves you at all times.Our goal is to create a product that is intuitive and user-friendly, and we are constantly working to improve and refine our tools. We believe that by prioritizing you, we can create a solution that truly makes a difference and exceeds expectations.</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 offers a variety of features to keep you engaged and informed throughout your experience. Email notifications and alerts are designed to ensure that you never miss out on important updates or changes.Whether you prefer to receive updates via email, text message, or push notification, we have 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 offers a comprehensive suite of tools that seamlessly integrate across all devices, allowing you to stay organized and productive no matter where your day takes you. From managing tasks to tracking your responses and staying connected. With WrenchBoard, experience the freedom and flexibility of a truly mobile lifestyle!</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> With WrenchBoard, managing your activities across different platforms is easy and seamless. Our suite of features is designed to work across all devices, so you can stay organized and productive whether you're on your desktop, tablet, or phone. Say goodbye to the hassle of switching between different apps and platforms. WrenchBoard makes it simple and streamlined. .</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>We understand how important privacy is you, which is why we are designed to work without needing to share your data. You can trust that your information will remain safe and confidential while using our suite of features to manage your tasks across different platforms. Experience the convenience of a unified, cross-platform experience without sacrificing your privacy.</p>
|
||||
{/*<p>The app provides design and digital marketing. </p>*/}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</section>
|
||||
</>
|
||||
|
||||
@@ -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 />
|
||||
</>
|
||||
|
||||
@@ -20,7 +20,7 @@ function FooterHomeOne({ className }) {
|
||||
</a>
|
||||
</div>
|
||||
<p>
|
||||
{`It is simple. You can do something that somebody is ready to pay you for. WrenchBoard is the platform to connect you with earning opportunities. `}
|
||||
{`It is simple. You can set goals, task, or anything that need to be done and reward accomplishment. WrenchBoard is the platform to connect opportunities. `}
|
||||
</p>
|
||||
<a href="/service">
|
||||
Read More <i className="fal fa-arrow-right" />
|
||||
|
||||
@@ -4,80 +4,70 @@ import IconTwo from '../../assets/images/icon/Findtaskicon.png';
|
||||
import IconThree from '../../assets/images/icon/taskicon.png';
|
||||
import IconFour from '../../assets/images/icon/walleticon.png';
|
||||
|
||||
// import FirstSlide from '../../assets/images/icon/Untitledxyz.png';
|
||||
|
||||
|
||||
function ServicesHomeOne({ className }) {
|
||||
return (
|
||||
<section className={`appie-service-area pt-90 pb-50 ${className}`} id="service">
|
||||
<div className="container">
|
||||
<div className="row justify-content-center">
|
||||
<div className="col-lg-8">
|
||||
<div className="appie-section-title text-center">
|
||||
<h3 className="appie-title">
|
||||
Start getting paid in easy steps.
|
||||
</h3>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="row">
|
||||
<div className="col-lg-3 col-md-6">
|
||||
<div
|
||||
className="appie-single-service text-center mt-30 wow animated fadeInUp"
|
||||
data-wow-duration="2000ms"
|
||||
data-wow-delay="200ms"
|
||||
>
|
||||
<div className="icon">
|
||||
<img src={IconOne} alt="" />
|
||||
</div>
|
||||
<h4 className="appie-title">Free Account</h4>
|
||||
<p>Join WrenchBoard.<span>Create an account for Income.</span></p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-lg-3 col-md-6">
|
||||
<div
|
||||
className="appie-single-service text-center mt-30 item-2 wow animated fadeInUp"
|
||||
data-wow-duration="2000ms"
|
||||
data-wow-delay="400ms"
|
||||
>
|
||||
<div className="icon">
|
||||
<img src={IconTwo} alt="" />
|
||||
</div>
|
||||
<h4 className="appie-title">Find Task </h4>
|
||||
<p>Build a Self-Portfolio <span>with sole purpose to Cash-Out.</span></p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-lg-3 col-md-6">
|
||||
<div
|
||||
className="appie-single-service text-center mt-30 item-3 wow animated fadeInUp"
|
||||
data-wow-duration="2000ms"
|
||||
data-wow-delay="600ms"
|
||||
>
|
||||
<div className="icon">
|
||||
<img src={IconThree} alt="" />
|
||||
</div>
|
||||
<h4 className="appie-title">Complete</h4>
|
||||
<p>Organize and Manage <span>your teams efficiently. </span> Manage your workgroup.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-lg-3 col-md-6">
|
||||
<div
|
||||
className="appie-single-service text-center mt-30 item-4 wow animated fadeInUp"
|
||||
data-wow-duration="2000ms"
|
||||
data-wow-delay="800ms"
|
||||
>
|
||||
<div className="icon">
|
||||
<img src={IconFour} alt="" />
|
||||
</div>
|
||||
<h4 className="appie-title">Get Paid</h4>
|
||||
<p>Start <span>Boosting your Income </span> By earning Cash for your Time and Skills.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
function ServiceItem({ icon, title, description, index }) {
|
||||
return (
|
||||
<div className="appie-single-service text-center mt-30 wow animated fadeInUp" data-wow-duration="2000ms" data-wow-delay={`${200 * (index + 1)}ms`} style={{ cursor: "default" }}>
|
||||
<div className="icon">
|
||||
<img src={icon} alt={title} />
|
||||
</div>
|
||||
<h4 className="appie-title">{title}</h4>
|
||||
<p>{description}</p>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default ServicesHomeOne;
|
||||
function ServicesHomeOne({ className }) {
|
||||
const serviceTitle = "Set Goals and Rewards to Inspire";
|
||||
const serviceItems = [
|
||||
{
|
||||
icon: IconOne,
|
||||
title: 'Free Account',
|
||||
description: 'Join WrenchBoard. Create an account for Income.',
|
||||
},
|
||||
{
|
||||
icon: IconTwo,
|
||||
title: 'Find Task',
|
||||
description: 'Build a Self-Portfolio with sole purpose to Cash-Out.',
|
||||
},
|
||||
{
|
||||
icon: IconThree,
|
||||
title: 'Complete',
|
||||
description: 'Organize and Manage your teams efficiently. Manage your workgroup.',
|
||||
},
|
||||
{
|
||||
icon: IconFour,
|
||||
title: 'Get Paid',
|
||||
description: 'Start Boosting your Income by earning Cash for your Time and Skills.',
|
||||
},
|
||||
];
|
||||
|
||||
return (
|
||||
<section className={`appie-service-area pt-10 pb-50 ${className}`} id="service">
|
||||
<div className="container">
|
||||
<div className="row justify-content-center">
|
||||
<div className="col-lg-8">
|
||||
<div className="appie-section-title text-center">
|
||||
<h3 className="appie-title">
|
||||
{serviceTitle}
|
||||
</h3>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="row">
|
||||
{serviceItems.map(({ icon, title, description }, index) => (
|
||||
<div key={index} className="col-lg-3 col-md-6">
|
||||
<ServiceItem
|
||||
icon={icon}
|
||||
title={title}
|
||||
description={description}
|
||||
index={index}
|
||||
/>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
||||
export default ServicesHomeOne;
|
||||
@@ -1,80 +1,77 @@
|
||||
import React from 'react';
|
||||
import thumb from '../../assets/images/PerformingTaskNew.png';
|
||||
//import thumb from '../../assets/images/PerformingTaskNew.png';
|
||||
import thumb from '../../assets/images/PerformingTask2.jpg';
|
||||
import getConfig from './../../Config/config'
|
||||
|
||||
function TrafficHomeOne() {
|
||||
var site = getConfig()[0];
|
||||
return (
|
||||
<section className="appie-traffic-area pt-140 pb-180">
|
||||
<div className="container">
|
||||
<div className="row">
|
||||
<div className="col-lg-7">
|
||||
<div className="appie-traffic-title">
|
||||
<h3 className="title">Performing task.</h3>
|
||||
<p>
|
||||
Performing task on WrenchBoard is easy. All you need is a free account and follow the steps below.
|
||||
</p>
|
||||
</div>
|
||||
<div className="row">
|
||||
<div className="col-lg-6 col-md-6">
|
||||
<div className="appie-traffic-service mb-30">
|
||||
<div className="icon">
|
||||
<i className="fal fa-check" />
|
||||
</div>
|
||||
<h5 className="title">Create Account</h5>
|
||||
<p> To publish your skills to be hired. Your ratings will grow with performance.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-lg-6 col-md-6">
|
||||
<div className="appie-traffic-service item-2 mb-30">
|
||||
<div className="icon">
|
||||
<i className="fal fa-check" />
|
||||
</div>
|
||||
<h5 className="title">Find or Accept job</h5>
|
||||
<p> Receive Offers to get hired or search for your skills match.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-lg-6 col-md-6">
|
||||
<div className="appie-traffic-service item-3">
|
||||
<div className="icon">
|
||||
<i className="fal fa-check" />
|
||||
</div>
|
||||
<h5 className="title">Complete tasks professionally</h5>
|
||||
<p> Deliver client specification to tailored solution, communicate messages in real-time using messaging platform.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-lg-6 col-md-6">
|
||||
<div className="appie-traffic-service item-4">
|
||||
<div className="icon">
|
||||
<i className="fal fa-check" />
|
||||
</div>
|
||||
<h5 className="title">Get Paid like a Pro for your skills </h5>
|
||||
<p>Obtain payment authorization after job completion and maintain client relationships. Transparent payment process for task compensation.</p>
|
||||
</div>
|
||||
</div>
|
||||
{/* <div className="col-lg-12">
|
||||
var site = getConfig()[0];
|
||||
return (
|
||||
<section className="wrench-on-area pt-140 pb-180">
|
||||
<div className="container">
|
||||
<div className="row">
|
||||
<div className="col-lg-7">
|
||||
<div className="appie-traffic-title">
|
||||
<h3 className="title">{featuresContent.title}</h3>
|
||||
<p>{featuresContent.detail}</p>
|
||||
</div>
|
||||
<div className="row">
|
||||
{featuresContent.list?.map(({ icon, header, paragraph }, idx) => (
|
||||
<div className="col-lg-6 col-md-6" key={idx}>
|
||||
<div className={`appie-traffic-service features item-${idx + 1} mb-30`} style={{ paddingRight: "45px" }}>
|
||||
<div className="icon">
|
||||
<i className={icon} />
|
||||
</div>
|
||||
<h5 className="title">{header}</h5>
|
||||
<p>{paragraph}</p>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
{/* <div className="col-lg-12">
|
||||
<div className="traffic-btn mt-50">
|
||||
<a className="main-btn" href={process.env.REACT_APP_DASH_URL_LOGIN}>
|
||||
Login <i className="fal fa-arrow-right" />
|
||||
</a>
|
||||
</div>
|
||||
</div> */}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="traffic-thumb ">
|
||||
</div>
|
||||
<div className="traffic-thumb d-none d-lg-flex col-lg-5 justify-content-center align-items-center">
|
||||
<div className='position-relative d-flex'>
|
||||
<div className='withFadeEdge position-absolute bg-transparent w-100 h-100' style={{zIndex: '1'}}></div>
|
||||
<img
|
||||
className="wow animated fadeInRight"
|
||||
data-wow-duration="2000ms"
|
||||
data-wow-delay="200ms"
|
||||
src={thumb}
|
||||
alt=""
|
||||
className="position-relative wow animated fadeInRight p-1"
|
||||
data-wow-duration="2000ms"
|
||||
data-wow-delay="200ms"
|
||||
src={thumb}
|
||||
alt=""
|
||||
style={{zIndex: '0'}}
|
||||
/>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/* <div className="traffic-thumb">
|
||||
<img
|
||||
className="withFadeEdge wow animated fadeInRight"
|
||||
data-wow-duration="2000ms"
|
||||
data-wow-delay="200ms"
|
||||
src={thumb}
|
||||
alt=""
|
||||
/>
|
||||
</div> */}
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
||||
export default TrafficHomeOne;
|
||||
|
||||
const featuresContent = {
|
||||
title: "on WrenchBoard.",
|
||||
detail: "Performing task on WrenchBoard is easy. All you need is a free account.",
|
||||
list: [
|
||||
{ icon: "fal fa-check", header: "Free account", paragraph: "Get family access from parents, or create your free account." },
|
||||
{ icon: "fal fa-check", header: "Suggest or Find Task", paragraph: "Suggest tasks to parents or pick from the market." },
|
||||
{ icon: "fal fa-check", header: "Complete Task", paragraph: "Complete the task as specified." },
|
||||
{ icon: "fal fa-check", header: "Reward", paragraph: "Get your reward as specified." },
|
||||
]
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user