Merge branch 'homepage_easy_steps_modified' of WrenchBoard/WrenchBoardMainSite into master
This commit is contained in:
Gogs
+25
-10
@@ -2319,6 +2319,14 @@ p {
|
|||||||
background-repeat: no-repeat;
|
background-repeat: no-repeat;
|
||||||
background-size: auto;
|
background-size: auto;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.appie-service-area.features-section{
|
||||||
|
background: #fff;
|
||||||
|
position: relative;
|
||||||
|
background-position: 92% 100%;
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
background-size: auto;
|
||||||
|
}
|
||||||
.appie-service-area.appie-service-3-area {
|
.appie-service-area.appie-service-3-area {
|
||||||
background: none;
|
background: none;
|
||||||
}
|
}
|
||||||
@@ -2786,26 +2794,33 @@ p {
|
|||||||
color: #2b70fa;
|
color: #2b70fa;
|
||||||
margin-bottom: 8px;
|
margin-bottom: 8px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.appie-features-content {
|
||||||
|
background: #eef1f6;
|
||||||
|
border-radius: 6px;
|
||||||
|
padding: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
.appie-features-content .title {
|
.appie-features-content .title {
|
||||||
font-size: 44px;
|
font-size: 20px;
|
||||||
line-height: 54px;
|
line-height: 24px;
|
||||||
margin-bottom: 10px;
|
margin-bottom: 10px;
|
||||||
}
|
}
|
||||||
@media only screen and (min-width: 992px) and (max-width: 1200px) {
|
@media only screen and (min-width: 992px) and (max-width: 1200px) {
|
||||||
.appie-features-content .title {
|
.appie-features-content .title {
|
||||||
font-size: 36px;
|
font-size: 18px;
|
||||||
line-height: 44px;
|
line-height: 24px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@media (max-width: 767px) {
|
@media (max-width: 767px) {
|
||||||
.appie-features-content .title {
|
.appie-features-content .title {
|
||||||
font-size: 30px;
|
font-size: 18px;
|
||||||
line-height: 40px;
|
line-height: 24px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
.appie-features-content p {
|
.appie-features-content p {
|
||||||
font-size: 18px;
|
font-size: 16px;
|
||||||
line-height: 28px;
|
line-height: 20px;
|
||||||
padding-bottom: 30px;
|
padding-bottom: 30px;
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -2936,13 +2951,13 @@ p {
|
|||||||
@media only screen and (min-width: 768px) and (max-width: 991px) {
|
@media only screen and (min-width: 768px) and (max-width: 991px) {
|
||||||
.appie-features-thumb {
|
.appie-features-thumb {
|
||||||
text-align: center;
|
text-align: center;
|
||||||
margin-top: 50px;
|
margin-top: 10px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@media (max-width: 767px) {
|
@media (max-width: 767px) {
|
||||||
.appie-features-thumb {
|
.appie-features-thumb {
|
||||||
text-align: center;
|
text-align: center;
|
||||||
margin-top: 50px;
|
margin-top: 10px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
Binary file not shown.
|
After Width: | Height: | Size: 6.6 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 100 KiB After Width: | Height: | Size: 85 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 84 KiB After Width: | Height: | Size: 64 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 15 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 7.6 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 61 KiB After Width: | Height: | Size: 53 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 3.0 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 51 KiB After Width: | Height: | Size: 44 KiB |
@@ -9,234 +9,135 @@ import marketPlace from '../../assets/images/market_place.png';
|
|||||||
import task from '../../assets/images/task.png';
|
import task from '../../assets/images/task.png';
|
||||||
import getPaid from '../../assets/images/get_paid.png';
|
import getPaid from '../../assets/images/get_paid.png';
|
||||||
|
|
||||||
import shapeSix from '../../assets/images/shape/shape-6.png';
|
import taskThumbnail from '../../assets/images/task-thumb.png'
|
||||||
import shapeSeven from '../../assets/images/shape/shape-7.png';
|
import marketThumbnail from '../../assets/images/market-thumb.png'
|
||||||
import shapeEight from '../../assets/images/shape/shape-8.png';
|
import getPaidThumbnail from '../../assets/images/getpaid-thumb.png'
|
||||||
|
import accountThumbnail from '../../assets/images/account-thumb.png'
|
||||||
|
|
||||||
|
|
||||||
import getConfig from './../../Config/config'
|
import getConfig from './../../Config/config'
|
||||||
|
|
||||||
function FeaturesHomeOne({ className }) {
|
function FeaturesHomeOne({ className }) {
|
||||||
var site = getConfig()[0];
|
var site = getConfig()[0];
|
||||||
const [tab, setTab] = useState('setting');
|
|
||||||
const handleClick = (e, value) => {
|
|
||||||
e.preventDefault();
|
|
||||||
setTab(value);
|
|
||||||
};
|
|
||||||
return (
|
return (
|
||||||
<section className={`appie-features-area pt-100 pb-90 ${className}`} id="features">
|
<section className={`appie-service-area features-section pt-90 ${className}`} id="service">
|
||||||
<div className="container">
|
<div className="container">
|
||||||
<div className="row align-items-center">
|
<div className="row">
|
||||||
<div className="col-lg-3">
|
<div className="col-xl-3 col-md-6 mb-50">
|
||||||
<div className="appie-features-tabs-btn">
|
<div
|
||||||
<div
|
className="appie-features-content wow animated fadeInRight"
|
||||||
className="nav flex-column nav-pills"
|
data-wow-duration="2000ms"
|
||||||
id="v-pills-tab"
|
data-wow-delay="600ms"
|
||||||
role="tablist"
|
>
|
||||||
aria-orientation="vertical"
|
<div className='text-center'>
|
||||||
>
|
<img className='pb-2' src={accountThumbnail} alt='image thumbnail' />
|
||||||
<a
|
|
||||||
onClick={(e) => handleClick(e, 'setting')}
|
|
||||||
className={`nav-link ${tab === 'setting' ? 'active' : ''}`}
|
|
||||||
id="v-pills-home-tab"
|
|
||||||
data-toggle="pill"
|
|
||||||
href="#v-pills-home"
|
|
||||||
role="tab"
|
|
||||||
aria-controls="v-pills-home"
|
|
||||||
aria-selected="true"
|
|
||||||
>
|
|
||||||
<i className="fas fa-user" /> Free Account
|
|
||||||
</a>
|
|
||||||
<a
|
|
||||||
onClick={(e) => handleClick(e, 'report')}
|
|
||||||
className={`nav-link ${tab === 'report' ? 'active' : ''}`}
|
|
||||||
id="v-pills-profile-tab"
|
|
||||||
data-toggle="pill"
|
|
||||||
href="#v-pills-profile"
|
|
||||||
role="tab"
|
|
||||||
aria-controls="v-pills-profile"
|
|
||||||
aria-selected="false"
|
|
||||||
>
|
|
||||||
<i className="fas fa-search-dollar" /> Marketplace
|
|
||||||
</a>
|
|
||||||
<a
|
|
||||||
onClick={(e) => handleClick(e, 'notice')}
|
|
||||||
className={`nav-link ${tab === 'notice' ? 'active' : ''}`}
|
|
||||||
id="v-pills-messages-tab"
|
|
||||||
data-toggle="pill"
|
|
||||||
href="#v-pills-messages"
|
|
||||||
role="tab"
|
|
||||||
aria-controls="v-pills-messages"
|
|
||||||
aria-selected="false"
|
|
||||||
>
|
|
||||||
<i className="fas fa-check" /> Complete Task
|
|
||||||
</a>
|
|
||||||
<a
|
|
||||||
onClick={(e) => handleClick(e, 'app')}
|
|
||||||
className={`nav-link ${tab === 'app' ? 'active' : ''}`}
|
|
||||||
id="v-pills-settings-tab"
|
|
||||||
data-toggle="pill"
|
|
||||||
href="#v-pills-settings"
|
|
||||||
role="tab"
|
|
||||||
aria-controls="v-pills-settings"
|
|
||||||
aria-selected="false"
|
|
||||||
>
|
|
||||||
<i className="fas fa-comments-dollar" /> Get Paid
|
|
||||||
</a>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<h3 className="title">
|
||||||
|
Create free account.
|
||||||
|
</h3>
|
||||||
|
<p>
|
||||||
|
If you are either currently employed, unemployed or unsatisfied with your job or want extra cash on the side, consider WrenchBoard as a reliable partner to connect you with new opportunities.
|
||||||
|
</p>
|
||||||
|
<Link className="main-btn" to="/about-us">
|
||||||
|
Learn More
|
||||||
|
</Link>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
className="appie-features-thumb text-center wow animated fadeInUp"
|
||||||
|
data-wow-duration="2000ms"
|
||||||
|
data-wow-delay="200ms"
|
||||||
|
>
|
||||||
|
<img className='p-3' src={freeAccount} alt="" />
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div className="col-lg-9">
|
<div className="col-xl-3 col-md-6 mb-50">
|
||||||
<div className="tab-content" id="v-pills-tabContent">
|
<div
|
||||||
<div
|
className="appie-features-content animated fadeInRight"
|
||||||
className={`${
|
data-wow-duration="2000ms"
|
||||||
tab === 'setting' ? 'show active' : ''
|
data-wow-delay="600ms"
|
||||||
} tab-pane fade`}
|
>
|
||||||
id="v-pills-home"
|
<div className='text-center'>
|
||||||
role="tabpanel"
|
<img className='pb-2' src={marketThumbnail} alt='image thumbnail' />
|
||||||
aria-labelledby="v-pills-home-tab"
|
|
||||||
>
|
|
||||||
<div className="row align-items-center">
|
|
||||||
<div className="col-lg-6">
|
|
||||||
<div
|
|
||||||
className="appie-features-thumb text-center wow animated fadeInUp"
|
|
||||||
data-wow-duration="2000ms"
|
|
||||||
data-wow-delay="200ms"
|
|
||||||
>
|
|
||||||
<img src={freeAccount} alt="" />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div className="col-lg-6">
|
|
||||||
<div
|
|
||||||
className="appie-features-content wow animated fadeInRight"
|
|
||||||
data-wow-duration="2000ms"
|
|
||||||
data-wow-delay="600ms"
|
|
||||||
>
|
|
||||||
|
|
||||||
<h3 className="title">
|
|
||||||
Create free account.
|
|
||||||
</h3>
|
|
||||||
<p>
|
|
||||||
If you are either currently employed, unemployed or unsatisfied with your job or want extra cash on the side, consider WrenchBoard as a reliable partner to connect you with new opportunities.
|
|
||||||
</p>
|
|
||||||
<Link className="main-btn" to="/about-us">
|
|
||||||
Learn More
|
|
||||||
</Link>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
<div
|
|
||||||
className={`${tab === 'report' ? 'show active' : ''} tab-pane fade`}
|
|
||||||
id="v-pills-profile"
|
|
||||||
role="tabpanel"
|
|
||||||
aria-labelledby="v-pills-profile-tab"
|
|
||||||
>
|
|
||||||
<div className="row align-items-center">
|
|
||||||
<div className="col-lg-6">
|
|
||||||
<div
|
|
||||||
className="appie-features-thumb text-center animated fadeInUp"
|
|
||||||
data-wow-duration="2000ms"
|
|
||||||
data-wow-delay="200ms"
|
|
||||||
>
|
|
||||||
<img src={marketPlace} alt="" />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div className="col-lg-6">
|
|
||||||
<div
|
|
||||||
className="appie-features-content animated fadeInRight"
|
|
||||||
data-wow-duration="2000ms"
|
|
||||||
data-wow-delay="600ms"
|
|
||||||
>
|
|
||||||
|
|
||||||
<h3 className="title">
|
<h3 className="title">
|
||||||
Browse Marketplace
|
Browse Marketplace
|
||||||
</h3>
|
</h3>
|
||||||
<p>
|
<p>
|
||||||
WrenchBoard platform connects you with quality service that need articles writing, blog management, photography, product testing research and surveys and more to deliver your project with ease.
|
WrenchBoard platform connects you with quality service that need articles writing, blog management, photography, product testing research and surveys and more to deliver your project with ease.
|
||||||
</p>
|
</p>
|
||||||
<a className="main-btn" href={site.dash_url_login}>
|
<a className="main-btn" href={site.dash_url_login}>
|
||||||
Learn More
|
Learn More
|
||||||
</a>
|
</a>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
<div
|
||||||
</div>
|
className="appie-features-thumb text-center wow animated fadeInUp"
|
||||||
|
data-wow-duration="2000ms"
|
||||||
|
data-wow-delay="200ms"
|
||||||
|
>
|
||||||
|
<img className='p-3' src={marketPlace} alt="" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="col-xl-3 col-md-6 mb-50">
|
||||||
|
<div
|
||||||
|
className="appie-features-content animated fadeInRight"
|
||||||
|
data-wow-duration="2000ms"
|
||||||
|
data-wow-delay="600ms"
|
||||||
|
>
|
||||||
|
<div className='text-center'>
|
||||||
|
<img className='pb-2' src={taskThumbnail} alt='image thumbnail' />
|
||||||
</div>
|
</div>
|
||||||
<div
|
|
||||||
className={`${tab === 'notice' ? 'show active' : ''} tab-pane fade`}
|
|
||||||
id="v-pills-messages"
|
|
||||||
role="tabpanel"
|
|
||||||
aria-labelledby="v-pills-messages-tab"
|
|
||||||
>
|
|
||||||
<div className="row align-items-center">
|
|
||||||
<div className="col-lg-6">
|
|
||||||
<div
|
|
||||||
className="appie-features-thumb text-center animated fadeInUp"
|
|
||||||
data-wow-duration="2000ms"
|
|
||||||
data-wow-delay="200ms"
|
|
||||||
>
|
|
||||||
<img src={task} alt="" />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div className="col-lg-6">
|
|
||||||
<div
|
|
||||||
className="appie-features-content animated fadeInRight"
|
|
||||||
data-wow-duration="2000ms"
|
|
||||||
data-wow-delay="600ms"
|
|
||||||
>
|
|
||||||
|
|
||||||
<h3 className="title">
|
<h3 className="title">
|
||||||
Complete Task
|
Complete Task
|
||||||
</h3>
|
</h3>
|
||||||
<p>
|
<p>
|
||||||
Cash in the Pocket with WrenchBoard as a reliable partner to connect you with new opportunities.Track, Organize your Portfolio and Manage your Skills, preferred workgroup and teams efficiently.
|
Cash in the Pocket with WrenchBoard as a reliable partner to connect you with new opportunities.Track, Organize your Portfolio and Manage your Skills, preferred workgroup and teams efficiently.
|
||||||
</p>
|
</p>
|
||||||
<a className="main-btn" href={site.dash_url_login}>
|
<a className="main-btn" href={site.dash_url_login}>
|
||||||
Learn More
|
Learn More
|
||||||
</a>
|
</a>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
<div
|
||||||
</div>
|
className="appie-features-thumb text-center wow animated fadeInUp"
|
||||||
|
data-wow-duration="2000ms"
|
||||||
|
data-wow-delay="200ms"
|
||||||
|
>
|
||||||
|
<img className='p-3' src={task} alt="" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="col-xl-3 col-md-6 mb-50">
|
||||||
|
<div
|
||||||
|
className="appie-features-content animated fadeInRight"
|
||||||
|
data-wow-duration="2000ms"
|
||||||
|
data-wow-delay="600ms"
|
||||||
|
>
|
||||||
|
<div className='text-center'>
|
||||||
|
<img className='pb-2' src={getPaidThumbnail} alt='image thumbnail' />
|
||||||
</div>
|
</div>
|
||||||
<div
|
|
||||||
className={`${tab === 'app' ? 'show active' : ''} tab-pane fade`}
|
|
||||||
id="v-pills-settings"
|
|
||||||
role="tabpanel"
|
|
||||||
aria-labelledby="v-pills-settings-tab"
|
|
||||||
>
|
|
||||||
<div className="row align-items-center">
|
|
||||||
<div className="col-lg-6">
|
|
||||||
<div
|
|
||||||
className="appie-features-thumb text-center animated fadeInUp"
|
|
||||||
data-wow-duration="2000ms"
|
|
||||||
data-wow-delay="200ms"
|
|
||||||
>
|
|
||||||
<img src={getPaid} alt="" />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div className="col-lg-6">
|
|
||||||
<div
|
|
||||||
className="appie-features-content animated fadeInRight"
|
|
||||||
data-wow-duration="2000ms"
|
|
||||||
data-wow-delay="600ms"
|
|
||||||
>
|
|
||||||
|
|
||||||
<h3 className="title">
|
<h3 className="title">
|
||||||
Get Paid
|
Get Paid
|
||||||
</h3>
|
</h3>
|
||||||
<p>
|
<p>
|
||||||
Get paid Instantly for completed task using WrenchBoard. Achieve your short-term goals or long-term income by Connecting with WrenchBoard. Complete access to your earnings.
|
Get paid Instantly for completed task using WrenchBoard. Achieve your short-term goals or long-term income by Connecting with WrenchBoard. Complete access to your earnings.
|
||||||
</p>
|
</p>
|
||||||
<a className="main-btn" href={site.dash_url_login}>
|
<a className="main-btn" href={site.dash_url_login}>
|
||||||
Learn More
|
Learn More
|
||||||
</a>
|
</a>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
<div
|
||||||
</div>
|
className="appie-features-thumb text-center wow animated fadeInUp"
|
||||||
</div>
|
data-wow-duration="2000ms"
|
||||||
|
data-wow-delay="200ms"
|
||||||
|
>
|
||||||
|
<img className='p-3' src={getPaid} alt="" />
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
<hr className='mt-50'/>
|
||||||
</section>
|
</section>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user