first commit
This commit is contained in:
CHIEFSOFT\ameye
@@ -0,0 +1,90 @@
|
||||
import React from 'react';
|
||||
import thumb4 from '../assets/images/about-thumb-4.png';
|
||||
import thumb5 from '../assets/images/about-thumb-5.png';
|
||||
import cardImg from '../assets/images/home/card-home-01.png'
|
||||
|
||||
function AfterHero() {
|
||||
return (
|
||||
<>
|
||||
<section className="appie-about-8-area pt-100 pb-100">
|
||||
<div className="container">
|
||||
<div className="row">
|
||||
<div className="col-lg-12">
|
||||
<div className="appie-section-title mb-30">
|
||||
<h3 className="appie-title">
|
||||
{/* We bring everything <br />
|
||||
that's required to build apps */}
|
||||
Set Chores, Set Goals
|
||||
</h3>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="row">
|
||||
<div className="col-lg-7 mb-3 mb-lg-0">
|
||||
<div className='appie-about-container'>
|
||||
<div className="appie-about-8-box">
|
||||
<h3 className="title">
|
||||
Reward Accomplishments
|
||||
</h3>
|
||||
<p>
|
||||
Set goals, tasks, or anything that motivates or needs to be done and reward completion. WrenchBoard is the platform to plan rewards off pick your nose and blow
|
||||
</p>
|
||||
</div>
|
||||
<div className='row'>
|
||||
<div className='col-12 col-sm-4 order-2 order-sm-1 align-self-end'>
|
||||
<a className="m-1 main-btn" href={process.env.REACT_APP_DASH_URL_LOGIN}>
|
||||
Learn More <i className="fal fa-arrow-right" />
|
||||
</a>
|
||||
</div>
|
||||
<div className="col-12 col-sm-8 order-1 order-sm-2">
|
||||
<img className='w-100 h-100' src={cardImg} alt="Child Card" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-lg-5">
|
||||
{/* <div className="appie-about-8-box">
|
||||
<h3 className="title">
|
||||
Assign Faster with <br />
|
||||
wrenchAgent
|
||||
</h3>
|
||||
<p>
|
||||
Ask our ❛❛<span className=''>wrench</span><span className=''>Agent</span>❜❜ Generative AI to assist
|
||||
</p>
|
||||
<a className="main-btn" href={process.env.REACT_APP_DASH_URL_LOGIN}>
|
||||
Learn More <i className="fal fa-arrow-right" />
|
||||
</a>
|
||||
<div className="thumb mr-30">
|
||||
<img src={thumb5} alt="" />
|
||||
</div>
|
||||
</div> */}
|
||||
<div className='appie-about-container'>
|
||||
<div className="appie-about-8-box">
|
||||
<h3 className="title">
|
||||
Assign Faster with <br />
|
||||
wrenchAgent
|
||||
</h3>
|
||||
<p>
|
||||
Ask our ❛❛<span className=''>wrench</span><span className=''>Agent</span>❜❜ Generative AI to assist
|
||||
</p>
|
||||
</div>
|
||||
<div className='row'>
|
||||
<div className='col-12 col-sm-4 order-2 order-sm-1 align-self-end'>
|
||||
<a className="m-1 main-btn" href={process.env.REACT_APP_DASH_URL_LOGIN}>
|
||||
Learn More <i className="fal fa-arrow-right" />
|
||||
</a>
|
||||
</div>
|
||||
<div className="col-12 col-sm-8 order-1 order-sm-2">
|
||||
<img className='w-100 h-100' src={thumb5} alt="" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
export default AfterHero;
|
||||
@@ -0,0 +1,21 @@
|
||||
import React, { useState } from 'react';
|
||||
import Blogs from '../News/Blogs';
|
||||
|
||||
function BlogHomeOne() {
|
||||
return (
|
||||
<section className="appie-blog-area pt-45 pb-95">
|
||||
<div className="container">
|
||||
<div className="row">
|
||||
<div className="col-lg-12">
|
||||
<div className="appie-section-title text-center">
|
||||
<h3 className="appie-title">Our latest blog posts</h3>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<Blogs pathname='/' />
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
||||
export default BlogHomeOne;
|
||||
@@ -0,0 +1,69 @@
|
||||
import React from 'react';
|
||||
import thumb from '../../assets/images/traffic-thumb.png';
|
||||
|
||||
function TrafficHomeOne({ className }) {
|
||||
return (
|
||||
<section section className={`appie-faq-area pt-90 pb-95 ${className}`}>
|
||||
<div className="container">
|
||||
<div className="row">
|
||||
<div className="col-lg-7">
|
||||
<div className="appie-traffic-title">
|
||||
<span>Post</span>
|
||||
<h3 className="title">Posting Jobs.</h3>
|
||||
<p>
|
||||
WrenchBoard platform connects you with quality service to deliver your project with ease.
|
||||
</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 your projects</h5>
|
||||
<p>from complex to most basic task as targeted offering or market place posting</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">Hire experts</h5>
|
||||
<p>from reviewed profiles, accept interest in your project from qualified members.</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">Monitor Progress</h5>
|
||||
<p>Monitor work progress and track performance with real time tools from your account</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 Pay </h5>
|
||||
<p>Pay: Make payment easily and securely by milestones or project completion.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-lg-12">
|
||||
<div className="traffic-btn mt-50">
|
||||
<a className="main-btn" href="#">
|
||||
Learn more about what you can do with WrenchBoard <i className="fal fa-arrow-right" />
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
||||
export default TrafficHomeOne;
|
||||
@@ -0,0 +1,95 @@
|
||||
import React from 'react'
|
||||
import OwlCarousel from 'react-owl-carousel'
|
||||
import localImgLoad from '../../lib/localImgLoad'
|
||||
|
||||
import 'owl.carousel/dist/assets/owl.carousel.css'
|
||||
import 'owl.carousel/dist/assets/owl.theme.default.css'
|
||||
import LazyImage from '../../lib/LazyImage'
|
||||
|
||||
export default function FeaturedScreen() {
|
||||
|
||||
const screen_slider = {
|
||||
loop:true,
|
||||
margin:10,
|
||||
nav:false,
|
||||
autoplay: true,
|
||||
smartSpeed: 1500,
|
||||
center: true,
|
||||
dots: true,
|
||||
responsive:{
|
||||
0:{
|
||||
items:1
|
||||
},
|
||||
600:{
|
||||
items:2
|
||||
},
|
||||
800:{
|
||||
items:3
|
||||
},
|
||||
1200:{
|
||||
items:4
|
||||
},
|
||||
1400:{
|
||||
items:5
|
||||
}
|
||||
}
|
||||
}
|
||||
return (
|
||||
<>
|
||||
<section className="appie-service-area pt-50 pb-50 interface_section">
|
||||
<div className="container-fluid">
|
||||
<div className="appie-traffic-title section_title text-center" data-aos="fade-up" data-aos-duration="1500" data-aos-delay="100" style={{padding: '0'}}>
|
||||
<h3 className='title'>App Screens <div className='section_sub_title'></div></h3>
|
||||
<p>Simplicity of use is our goal always. Here are some of our featured screens.</p>
|
||||
</div>
|
||||
<div className="screen_slider" >
|
||||
<OwlCarousel id="screen_slider" {...screen_slider} className="owl-carousel owl-theme owl-loaded owl-drag">
|
||||
<div className="item">
|
||||
<div className="screen_frame_img">
|
||||
{/* <img src={localImgLoad('images/slider/slider_1.png')} alt="image" /> */}
|
||||
<img src={localImgLoad('images/slider/app_sliders/screen_1.png')} alt="image" />
|
||||
</div>
|
||||
</div>
|
||||
<div className="item">
|
||||
<div className="screen_frame_img">
|
||||
{/* <img src={localImgLoad('images/slider/slider_2.png')} alt="image" /> */}
|
||||
<img src={localImgLoad('images/slider/app_sliders/screen_2.png')} alt="image" />
|
||||
</div>
|
||||
</div>
|
||||
<div className="item">
|
||||
<div className="screen_frame_img">
|
||||
{/* <img src={localImgLoad('images/slider/slider_3.png')} alt="image" /> */}
|
||||
<img src={localImgLoad('images/slider/app_sliders/screen_3.png')} alt="image" />
|
||||
</div>
|
||||
</div>
|
||||
<div className="item">
|
||||
<div className="screen_frame_img">
|
||||
{/* <img src={localImgLoad('images/slider/slider_4.png')} alt="image" /> */}
|
||||
<img src={localImgLoad('images/slider/app_sliders/screen_6.png')} alt="image" />
|
||||
</div>
|
||||
</div>
|
||||
<div className="item">
|
||||
<div className="screen_frame_img">
|
||||
{/* <img src={localImgLoad('images/slider/slider_5.png')} alt="image" /> */}
|
||||
<img src={localImgLoad('images/slider/app_sliders/screen_4.png')} alt="image" />
|
||||
</div>
|
||||
</div>
|
||||
<div className="item">
|
||||
<div className="screen_frame_img">
|
||||
{/* <img src={localImgLoad('images/slider/slider_7.png')} alt="image" /> */}
|
||||
<img src={localImgLoad('images/slider/app_sliders/screen_7.png')} alt="image" />
|
||||
</div>
|
||||
</div>
|
||||
<div className="item">
|
||||
<div className="screen_frame_img">
|
||||
{/* <img src={localImgLoad('images/slider/slider_7.png')} alt="image" /> */}
|
||||
<img src={localImgLoad('images/slider/app_sliders/screen_5.png')} alt="image" />
|
||||
</div>
|
||||
</div>
|
||||
</OwlCarousel>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,125 @@
|
||||
import React, { useState } from 'react';
|
||||
import { Link } from 'react-router-dom';
|
||||
// import thumb from '../../assets/images/onlineregistration.png';
|
||||
// import thumb22 from '../../assets/images/marketplace.png';
|
||||
// import thumb3 from '../../assets/images/product-listing-on-online-marketplace.png';
|
||||
// import thumb4 from '../../assets/images/flying.png';
|
||||
import freeAccount from '../../assets/images/free_account.png';
|
||||
import marketPlace from '../../assets/images/market_place.png';
|
||||
import task from '../../assets/images/task.png';
|
||||
import getPaid from '../../assets/images/get_paid.png';
|
||||
|
||||
// import taskThumbnail from '../../assets/images/task-thumb.png'
|
||||
// import marketThumbnail from '../../assets/images/market-thumb.png'
|
||||
// import getPaidThumbnail from '../../assets/images/getpaid-thumb.png'
|
||||
// import accountThumbnail from '../../assets/images/account-thumb.png'
|
||||
|
||||
|
||||
import getConfig from './../../Config/config'
|
||||
|
||||
function FeaturesHomeOne({ className }) {
|
||||
var site = getConfig()[0];
|
||||
return (
|
||||
<></>
|
||||
// <section className={`appie-service-area features-section pt-50 pb-100 ${className}`} id="service">
|
||||
// <div className="container">
|
||||
// <div className="row">
|
||||
// <div className="col-xl-3 col-md-6 mb-50">
|
||||
// <div
|
||||
// className="appie-features-content wow animated fadeInRight"
|
||||
// data-wow-duration="2000ms"
|
||||
// data-wow-delay="600ms"
|
||||
// >
|
||||
// <div className='text-center'>
|
||||
// <img className='pb-2' src={accountThumbnail} alt='image thumbnail' />
|
||||
// </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
|
||||
// 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 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={marketThumbnail} alt='image thumbnail' />
|
||||
// </div>
|
||||
|
||||
// <h3 className="title">
|
||||
// Browse Marketplace
|
||||
// </h3>
|
||||
// <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.
|
||||
// </p>
|
||||
// <a className="main-btn" href={process.env.REACT_APP_DASH_URL_LOGIN}>
|
||||
// Learn More
|
||||
// </a>
|
||||
// </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>
|
||||
|
||||
// <h3 className="title">
|
||||
// Complete Task
|
||||
// </h3>
|
||||
// <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.
|
||||
// </p>
|
||||
// <a className="main-btn" href={process.env.REACT_APP_DASH_URL_LOGIN}>
|
||||
// Learn More
|
||||
// </a>
|
||||
// </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>
|
||||
|
||||
// <h3 className="title">
|
||||
// Get Paid
|
||||
// </h3>
|
||||
// <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.
|
||||
// </p>
|
||||
// <a className="main-btn" href={process.env.REACT_APP_DASH_URL_LOGIN}>
|
||||
// Learn More
|
||||
// </a>
|
||||
// </div>
|
||||
// </div>
|
||||
// </div>
|
||||
// </div>
|
||||
// {/* <hr className='mt-50'/> */}
|
||||
// </section>
|
||||
);
|
||||
}
|
||||
|
||||
export default FeaturesHomeOne;
|
||||
@@ -0,0 +1,143 @@
|
||||
import React, { useMemo } from 'react';
|
||||
import { Link } from 'react-router-dom';
|
||||
import logo from '../../assets/images/wrenchboard-logo-text.png';
|
||||
import getConfig from './../../Config/config'
|
||||
|
||||
function FooterHomeOne({ className }) {
|
||||
var site = useMemo(() => getConfig()[0], []);;
|
||||
let newDate = new Date().getFullYear()
|
||||
|
||||
return (
|
||||
<>
|
||||
<section className={`appie-footer-area ${className || ''}`}>
|
||||
<div className="container">
|
||||
<div className="row">
|
||||
<div className="col-lg-4 col-md-6">
|
||||
<div className="footer-about-widget">
|
||||
<div className="logo">
|
||||
<a href="#">
|
||||
<img src={logo} alt="WrenchBoard" loading='eager' width={175} height={38} />
|
||||
</a>
|
||||
</div>
|
||||
<p>
|
||||
{`It is simple. You can set goals, task, or anything that needs to be done and reward accomplishment. WrenchBoard is the platform to connect opportunities. `}
|
||||
</p>
|
||||
<Link to="/service">
|
||||
Read More <i className="fal fa-arrow-right" />
|
||||
</Link>
|
||||
<div className="social mt-30">
|
||||
<ul>
|
||||
<li>
|
||||
<a to={site.facebook_link}>
|
||||
<i className="fab fa-facebook-f" />
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href={process.env.REACT_APP_TWITTER_LINK}>
|
||||
{/* <i className="fab fa-twitter" /> */}
|
||||
<i className="fab fa-x-twitter" />
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-lg-2 col-md-6">
|
||||
<div className="footer-navigation">
|
||||
<h4 className="title">Company</h4>
|
||||
<ul>
|
||||
<li>
|
||||
<Link to="/about-us">About Us</Link>
|
||||
</li>
|
||||
<li>
|
||||
<Link to="/service">Our Services</Link>
|
||||
</li>
|
||||
<li>
|
||||
<Link to="/use-cases">Use Cases</Link>
|
||||
</li>
|
||||
<li className='d-none'>
|
||||
<a target='_blank' href={process.env.REACT_APP_AGENT_LINK}>Agent</a>
|
||||
</li>
|
||||
<li>
|
||||
<Link to="/blog">Blog</Link>
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-lg-3 col-md-6">
|
||||
<div className="footer-navigation">
|
||||
<h4 className="title">Support</h4>
|
||||
<ul>
|
||||
<li>
|
||||
<Link to="/contact">Contact</Link>
|
||||
</li>
|
||||
<li>
|
||||
<Link to="/faq">Faqs</Link>
|
||||
</li>
|
||||
<li>
|
||||
<a href="https://blog.wrenchboard.com/resources/">Resources</a>
|
||||
</li>
|
||||
<li>
|
||||
<Link to="/privacy">Privacy Policy</Link>
|
||||
</li>
|
||||
<li>
|
||||
<Link to="/terms">Terms of use</Link>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-lg-3 col-md-6">
|
||||
<div className="footer-widget-info">
|
||||
<h4 className="title">Get In Touch</h4>
|
||||
<ul>
|
||||
<li>
|
||||
<a href="#">
|
||||
<i className="fal fa-envelope" /> {site.support_email}
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#">
|
||||
<i className="fal fa-phone" /> 404-855-7966
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#">
|
||||
<i className="fal fa-map-marker-alt" />Atlanta, GA 30339
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="row">
|
||||
<div className="col-lg-12">
|
||||
<div className="footer-copyright d-flex align-items-center justify-content-between pt-2">
|
||||
<div className="apps-download-btn">
|
||||
<ul>
|
||||
<li>
|
||||
<a href={process.env.REACT_APP_APPLE_APP} target="_blank">
|
||||
<i className="fab fa-apple" /> Download for iOS
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a className="item-2" href={process.env.REACT_APP_ANDROID_APP} target="_blank">
|
||||
<i className="fab fa-google-play" /> Download for
|
||||
Android
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div className="copyright-text">
|
||||
<p>Copyright © {newDate} WrenchBoard. All rights reserved.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
export default FooterHomeOne;
|
||||
@@ -0,0 +1,90 @@
|
||||
import React from 'react';
|
||||
import heroThumbOne from '../../assets/images/app-thumb-1.png';
|
||||
|
||||
import heroThumbTwo from '../../assets/images/app-pic.png';
|
||||
import shapeTwo from '../../assets/images/shape/shape-2.png';
|
||||
|
||||
import getConfig from './../../Config/config'
|
||||
import CustomSlider from '../customSlider/CustomSlider';
|
||||
|
||||
// import SliderOne from '../../assets/images/home/app-slide-home-0.png'
|
||||
|
||||
import SliderOne from '../../assets/images/home/top_sliders/slide_1.png'
|
||||
import SliderTwo from '../../assets/images/home/top_sliders/slide_2.png'
|
||||
import SliderThree from '../../assets/images/home/top_sliders/slide_3.png'
|
||||
import SliderFour from '../../assets/images/home/top_sliders/slide_4.png'
|
||||
import SliderFive from '../../assets/images/home/top_sliders/slide_5.png'
|
||||
import SliderCenter from '../../assets/images/home/top_sliders/slide_33.png'
|
||||
|
||||
|
||||
function HeroHomeOne() {
|
||||
|
||||
const sliders = [
|
||||
SliderOne, SliderTwo, SliderCenter, SliderThree, SliderFour, SliderFive
|
||||
]
|
||||
|
||||
return (
|
||||
<>
|
||||
<section className="appie-hero-area">
|
||||
<div className="container">
|
||||
<div className="row">
|
||||
<div className="col-lg-6">
|
||||
<div className="appie-hero-content appie-hero-content-6 d-flex flex-column h-100">
|
||||
{/*<span>Welcome To WrenchBoard..</span>*/}
|
||||
<h1 className="appie-title">
|
||||
Turn Chores into Exciting Challenges and Earn <span className='earn-rewards px-2'>Rewards!</span>
|
||||
</h1>
|
||||
<p>Your place to set family goals and reward achievements. Find tasks to earn from, or build a task portfolio and find others to perform tasks for you.</p>
|
||||
<ul className='d-flex justify-content-center justify-content-lg-start'>
|
||||
<li className=''>
|
||||
<a className="item-2" target='_blank' href={process.env.REACT_APP_APPLE_APP}>
|
||||
<i className="fab fa-apple"></i>
|
||||
<span>
|
||||
Available on the <span>App Store</span>
|
||||
</span>
|
||||
</a>
|
||||
</li>
|
||||
<li className=''>
|
||||
<a className="item-2" target='_blank' href={process.env.REACT_APP_ANDROID_APP}>
|
||||
<i className="fab fa-google-play"></i>
|
||||
<span>
|
||||
Available on the <span>Google Play</span>
|
||||
</span>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-lg-6">
|
||||
<div className="appie-hero-thumb">
|
||||
<div
|
||||
className="thumb wow animated fadeInUp"
|
||||
data-wow-duration="2000ms"
|
||||
data-wow-delay="200ms"
|
||||
>
|
||||
{/* <img src={heroThumbOne} alt="WrenchBoard" /> */}
|
||||
<div style={{ width: '350px', height:'auto', margin: 'auto' }}>
|
||||
<CustomSlider
|
||||
images={sliders}
|
||||
speed='5'
|
||||
indicatorColor='#333'
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
className="thumb-2 wow animated fadeInRight"
|
||||
data-wow-duration="2000ms"
|
||||
data-wow-delay="600ms"
|
||||
>
|
||||
<img src={heroThumbTwo} alt="" width="100%" height="100%" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
export default HeroHomeOne;
|
||||
@@ -0,0 +1,51 @@
|
||||
import React from 'react';
|
||||
import useToggle from '../Hooks/useToggle';
|
||||
// import BackToTop from '../BackToTop';
|
||||
import Drawer from '../Mobile/Drawer';
|
||||
// import BlogHomeOne from './BlogHomeOne';
|
||||
// import FeaturesHomeOne from './FeaturesHomeOne';
|
||||
// import FooterHomeOne from './FooterHomeOne';
|
||||
// import HeroHomeOne from './HeroHomeOne';
|
||||
// import HomeOneHeader from './HomeOneHeader';
|
||||
// import ServicesHomeOne from './ServicesHomeOne';
|
||||
// import TrafficHomeOne from './TrafficHomeOne';
|
||||
// import TrafficHomeTwo from './TrafficHomeTwo';
|
||||
// import FeaturedScreen from './FeaturedScreen';
|
||||
import AfterHero from './AfterHero';
|
||||
// import NextAfterHero from './NextAfterHero';
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
function HomeOne() {
|
||||
// cORRECT CALL const [drawer, drawerAction] = useToggle(false);
|
||||
const [drawer, drawerAction] = useToggle();
|
||||
|
||||
return (
|
||||
<>
|
||||
<Drawer drawer={drawer} action={drawerAction.toggle} />
|
||||
<div>THIS IS HOME </div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
export default HomeOne;
|
||||
|
||||
|
||||
{/* <StickyHeaderNav action={drawerAction.toggle} /> */}
|
||||
// <HomeOneHeader action={drawerAction.toggle} />
|
||||
// <HeroHomeOne />
|
||||
<AfterHero />
|
||||
// <NextAfterHero />
|
||||
// <FeaturesHomeOne />
|
||||
// <ServicesHomeOne />
|
||||
// <TrafficHomeOne />
|
||||
// <TrafficHomeTwo />
|
||||
// <FeaturedScreen />
|
||||
// <BlogHomeOne />
|
||||
// <FooterHomeOne />
|
||||
// <BackToTop />
|
||||
|
||||
|
||||
|
||||
@@ -0,0 +1,56 @@
|
||||
import React, { useEffect } from 'react';
|
||||
import logo from '../../assets/images/wrenchboard-logo-text.png';
|
||||
import StickyMenu from '../../lib/StickyMenu';
|
||||
import Navigation from '../Navigation';
|
||||
import getConfig from './../../Config/config'
|
||||
import { Link } from 'react-router-dom';
|
||||
|
||||
function HomeOneHeader({ action, showLogoOnly = false }) {
|
||||
var site = getConfig()[0];
|
||||
useEffect(() => {
|
||||
StickyMenu();
|
||||
}, []);
|
||||
return (
|
||||
<header className="appie-header-area appie-sticky">
|
||||
<div className="container">
|
||||
<div className="header-nav-box">
|
||||
<div className="row align-items-center">
|
||||
<div className="col-lg-2 col-md-4 col-sm-5 col-6 order-1 order-sm-1">
|
||||
<div className="appie-logo-box">
|
||||
<Link to="/">
|
||||
<img src={logo} alt="WrenchBoard" loading='eager' width="175px" height="38px" />
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{!showLogoOnly && <>
|
||||
<div className="col-lg-6 col-md-1 col-sm-1 order-3 order-sm-2">
|
||||
<div className="appie-header-main-menu">
|
||||
<Navigation />
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-lg-4 col-md-7 col-sm-6 col-6 order-2 order-sm-3">
|
||||
<div className="appie-btn-box text-right">
|
||||
<a className="login-btn" href={process.env.REACT_APP_DASH_URL_LOGIN}>
|
||||
<i className="fal fa-user" /> Login
|
||||
</a>
|
||||
<a className="main-btn ml-30" href={process.env.REACT_APP_DASH_URL_SIGNUP}>
|
||||
Get Started
|
||||
</a>
|
||||
<div
|
||||
onClick={(e) => action(e)}
|
||||
className="toggle-btn ml-30 canvas_open d-lg-none d-block"
|
||||
>
|
||||
<i className="fa fa-bars" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</>}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
);
|
||||
}
|
||||
|
||||
export default HomeOneHeader;
|
||||
@@ -0,0 +1,124 @@
|
||||
import React from 'react';
|
||||
import serviceThumb from '../../assets/images/service-thumb-1.png';
|
||||
|
||||
function NextAfterHero() {
|
||||
return (
|
||||
<>
|
||||
<section
|
||||
className="appie-services-2-area appie-services-8-area pt-90 pb-55"
|
||||
id="service"
|
||||
>
|
||||
<div className="container">
|
||||
<div className="row align-items-end">
|
||||
<div className="col-lg-6 col-md-8">
|
||||
<div className="appie-section-title">
|
||||
<h3 className="appie-title">Solution for every need.</h3>
|
||||
<p>The app provides design and digital marketing.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="row align-items-center">
|
||||
<div className="col-lg-7">
|
||||
<div className="row">
|
||||
<div className="col-lg-6 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">
|
||||
<i className="fal fa-tv" />
|
||||
</div>
|
||||
<h4 className="title">Carefully designed</h4>
|
||||
<p>
|
||||
He lost his bottle loo don't get shirty with me ruddy.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-lg-6 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">
|
||||
<i className="fal fa-code" />
|
||||
</div>
|
||||
<h4 className="title">Clean Modern Code</h4>
|
||||
<p>
|
||||
He lost his bottle loo don't get shirty with me ruddy.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-lg-6 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">
|
||||
<i className="fal fa-user-friends" />
|
||||
</div>
|
||||
<h4 className="title">User Interactive</h4>
|
||||
<p>
|
||||
He lost his bottle loo don't get shirty with me ruddy.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-lg-6 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">
|
||||
<i className="fal fa-mobile" />
|
||||
</div>
|
||||
<h4 className="title">Choose a App</h4>
|
||||
<p>
|
||||
He lost his bottle loo don't get shirty with me ruddy.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-lg-5">
|
||||
<div className="service-thumb">
|
||||
<img src={serviceThumb} alt="" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
export default NextAfterHero;
|
||||
@@ -0,0 +1,254 @@
|
||||
import React, { useState } from 'react';
|
||||
|
||||
function PricingHomeOne({ className }) {
|
||||
const [toggleSwitch, setSwitchValue] = useState(true);
|
||||
return (
|
||||
<>
|
||||
<section className={`appie-pricing-area pt-90 pb-90 ${className || ''}`}>
|
||||
<div className="container">
|
||||
<div className="row">
|
||||
<div className="col-lg-12">
|
||||
<div className="appie-section-title text-center">
|
||||
<h3 className="appie-title">Choose your plan</h3>
|
||||
<p>Different layouts and styles for team sections.</p>
|
||||
</div>
|
||||
<ul
|
||||
className="list-inline text-center switch-toggler-list"
|
||||
role="tablist"
|
||||
id="switch-toggle-tab"
|
||||
>
|
||||
<li className={`month ${toggleSwitch ? 'active' : ''}`}>
|
||||
<a href="#">Monthly</a>
|
||||
</li>
|
||||
<li>
|
||||
<label
|
||||
onClick={() => setSwitchValue(!toggleSwitch)}
|
||||
className={`switch ${toggleSwitch ? 'on' : 'off'}`}
|
||||
>
|
||||
<span className="slider round" />
|
||||
</label>
|
||||
</li>
|
||||
<li className={`year ${toggleSwitch === false ? 'active' : ''}`}>
|
||||
<a href="#">Annualy</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div className="tabed-content">
|
||||
{toggleSwitch ? (
|
||||
<div id="month">
|
||||
<div className="row justify-content-center">
|
||||
<div className="col-lg-4 col-md-6 wow animated fadeInLeft">
|
||||
<div className="pricing-one__single">
|
||||
<div className="pricig-heading">
|
||||
<h6>Fresh</h6>
|
||||
<div className="price-range">
|
||||
<sup>$</sup> <span>04</span>
|
||||
<p>/month</p>
|
||||
</div>
|
||||
<p>Get your 14 day free trial</p>
|
||||
</div>
|
||||
<div className="pricig-body">
|
||||
<ul>
|
||||
<li>
|
||||
<i className="fal fa-check" /> 60-day chat
|
||||
history
|
||||
</li>
|
||||
<li>
|
||||
<i className="fal fa-check" /> 15 GB cloud
|
||||
storage
|
||||
</li>
|
||||
</ul>
|
||||
<div className="pricing-btn mt-35">
|
||||
<a className="main-btn" href="#">
|
||||
Choose plan
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-lg-4 col-md-6 wow animated fadeInUp">
|
||||
<div className="pricing-one__single center">
|
||||
<div className="pricig-heading">
|
||||
<h6>Sweet</h6>
|
||||
<div className="price-range">
|
||||
<sup>$</sup> <span>16</span>
|
||||
<p>/month</p>
|
||||
</div>
|
||||
<p>Billed $276 per website annually.</p>
|
||||
</div>
|
||||
<div className="pricig-body">
|
||||
<ul>
|
||||
<li>
|
||||
<i className="fal fa-check" /> 60-day chat
|
||||
history
|
||||
</li>
|
||||
<li>
|
||||
<i className="fal fa-check" /> 50 GB cloud
|
||||
storage
|
||||
</li>
|
||||
<li>
|
||||
<i className="fal fa-check" /> 24/7 Support
|
||||
</li>
|
||||
</ul>
|
||||
<div className="pricing-btn mt-35">
|
||||
<a className="main-btn" href="#">
|
||||
Choose plan
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div className="pricing-rebon">
|
||||
<span>Most Popular</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-lg-4 col-md-6 wow animated fadeInRight">
|
||||
<div className="pricing-one__single">
|
||||
<div className="pricig-heading">
|
||||
<h6>Juicy</h6>
|
||||
<div className="price-range">
|
||||
<sup>$</sup> <span>27</span>
|
||||
<p>/month</p>
|
||||
</div>
|
||||
<p>Billed $276 per website annually.</p>
|
||||
</div>
|
||||
<div className="pricig-body">
|
||||
<ul>
|
||||
<li>
|
||||
<i className="fal fa-check" /> 60-day chat
|
||||
history
|
||||
</li>
|
||||
<li>
|
||||
<i className="fal fa-check" /> Data security
|
||||
</li>
|
||||
<li>
|
||||
<i className="fal fa-check" /> 100 GB cloud
|
||||
storage
|
||||
</li>
|
||||
<li>
|
||||
<i className="fal fa-check" /> 24/7 Support
|
||||
</li>
|
||||
</ul>
|
||||
<div className="pricing-btn mt-35">
|
||||
<a className="main-btn" href="#">
|
||||
Choose plan
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
<div id="year">
|
||||
<div className="row justify-content-center">
|
||||
<div className="col-lg-4 col-md-6 wow animated fadeInLeft">
|
||||
<div className="pricing-one__single">
|
||||
<div className="pricig-heading">
|
||||
<h6>Fresh</h6>
|
||||
<div className="price-range">
|
||||
<sup>$</sup> <span>32</span>
|
||||
<p>/Yearly</p>
|
||||
</div>
|
||||
<p>Get your 14 day free trial</p>
|
||||
</div>
|
||||
<div className="pricig-body">
|
||||
<ul>
|
||||
<li>
|
||||
<i className="fal fa-check" /> 60-day chat
|
||||
history
|
||||
</li>
|
||||
<li>
|
||||
<i className="fal fa-check" /> 15 GB cloud
|
||||
storage
|
||||
</li>
|
||||
</ul>
|
||||
<div className="pricing-btn mt-35">
|
||||
<a className="main-btn" href="#">
|
||||
Choose plan
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-lg-4 col-md-6 wow animated fadeInUp">
|
||||
<div className="pricing-one__single center">
|
||||
<div className="pricig-heading">
|
||||
<h6>Sweet</h6>
|
||||
<div className="price-range">
|
||||
<sup>$</sup> <span>116</span>
|
||||
<p>/Yearly</p>
|
||||
</div>
|
||||
<p>Billed $276 per website annually.</p>
|
||||
</div>
|
||||
<div className="pricig-body">
|
||||
<ul>
|
||||
<li>
|
||||
<i className="fal fa-check" /> 60-day chat
|
||||
history
|
||||
</li>
|
||||
<li>
|
||||
<i className="fal fa-check" /> 50 GB cloud
|
||||
storage
|
||||
</li>
|
||||
<li>
|
||||
<i className="fal fa-check" /> 24/7 Support
|
||||
</li>
|
||||
</ul>
|
||||
<div className="pricing-btn mt-35">
|
||||
<a className="main-btn" href="#">
|
||||
Choose plan
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div className="pricing-rebon">
|
||||
<span>Most Popular</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-lg-4 col-md-6 wow animated fadeInRight">
|
||||
<div className="pricing-one__single">
|
||||
<div className="pricig-heading">
|
||||
<h6>Juicy</h6>
|
||||
<div className="price-range">
|
||||
<sup>$</sup> <span>227</span>
|
||||
<p>/Yearly</p>
|
||||
</div>
|
||||
<p>Billed $276 per website annually.</p>
|
||||
</div>
|
||||
<div className="pricig-body">
|
||||
<ul>
|
||||
<li>
|
||||
<i className="fal fa-check" /> 60-day chat
|
||||
history
|
||||
</li>
|
||||
<li>
|
||||
<i className="fal fa-check" /> Data security
|
||||
</li>
|
||||
<li>
|
||||
<i className="fal fa-check" /> 100 GB cloud
|
||||
storage
|
||||
</li>
|
||||
<li>
|
||||
<i className="fal fa-check" /> 24/7 Support
|
||||
</li>
|
||||
</ul>
|
||||
<div className="pricing-btn mt-35">
|
||||
<a className="main-btn" href="#">
|
||||
Choose plan
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
export default PricingHomeOne;
|
||||
@@ -0,0 +1,43 @@
|
||||
import React from 'react';
|
||||
|
||||
function ProjectHomeOne() {
|
||||
return (
|
||||
<>
|
||||
<section className="appie-project-area pb-100">
|
||||
<div className="container">
|
||||
<div className="row">
|
||||
<div className="col-lg-12">
|
||||
<div
|
||||
className="appie-project-box wow animated slideInUp"
|
||||
data-wow-duration="1000ms"
|
||||
data-wow-delay="0ms"
|
||||
>
|
||||
<div className="row">
|
||||
<div className="col-lg-6">
|
||||
<div className="appie-project-content">
|
||||
<h3 className="title">
|
||||
Start your project with WrenchBoard.
|
||||
</h3>
|
||||
<p>Manage your small, medium and big projects with WrenchBoard.<br/> WrenchBoard Platform enables you to organize teams of freelancers as well as dedicated skills sets for your goals.</p>
|
||||
<form action="#">
|
||||
<div className="input-box mt-30">
|
||||
<input type="text" placeholder="Your email" />
|
||||
<button type="button">Subscribe</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="appie-project-thumb">
|
||||
<img src="assets/images/project-thumb.png" alt="" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
export default ProjectHomeOne;
|
||||
@@ -0,0 +1,140 @@
|
||||
import React, { Component } from 'react';
|
||||
import blogOne from '../../assets/images/blog-1.jpg';
|
||||
import blogTwo from '../../assets/images/blog-2.jpg';
|
||||
import blogThree from '../../assets/images/blog-3.jpg';
|
||||
import JobsData from '../../Services/JobsData';
|
||||
import getConfig from './../../Config/config'
|
||||
import CountDownTimer from '../Helper/CountDownTimer';
|
||||
|
||||
class RecentJobsOne extends Component {
|
||||
|
||||
constructor() {
|
||||
// debugger;
|
||||
super();
|
||||
this.state = { jobsDataResults: [] };
|
||||
}
|
||||
|
||||
async componentDidMount(){
|
||||
// debugger;
|
||||
JobsData().then(res => {
|
||||
this.setState({jobsDataResults:res.data.result_list});
|
||||
}).catch(err => {
|
||||
console.log('startjoblist error', err)
|
||||
})
|
||||
}
|
||||
|
||||
titleLen(title){
|
||||
let maxl = 45;
|
||||
title.replace('/', ' ');
|
||||
title.replace('www.', '');
|
||||
title.replace('.com', '');
|
||||
title.replace('http//', '');
|
||||
|
||||
return (title.length > maxl)? title.substring(0,maxl-2)+'...': title;
|
||||
}
|
||||
// if (jobsDataResults ()== null){
|
||||
// return null;
|
||||
// }
|
||||
render() {
|
||||
var site = getConfig()[0];
|
||||
if ( this.state.jobsDataResults== undefined ){
|
||||
return null;
|
||||
}
|
||||
var dashUrl = process.env.REACT_APP_DASH_URL;
|
||||
|
||||
if (this.state.jobsDataResults.length == 0){
|
||||
return <></>;
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
<section className="appie-blog-area pt-90 pb-95">
|
||||
<div className="container">
|
||||
<div className="row">
|
||||
<div className="col-lg-12">
|
||||
<div className="appie-section-title text-center">
|
||||
<h3 className="appie-title">Current Projects</h3>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="row">
|
||||
|
||||
{
|
||||
this.state.jobsDataResults.map(i => {
|
||||
var options = { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' };
|
||||
var postDt = new Date(i.expire).toLocaleDateString("en-US", options);
|
||||
|
||||
return (<div className="col-md-6 col-xl-3">
|
||||
<div
|
||||
className="appie-single-service container-fluid mt-30 wow animated fadeInUp boxBorder d-flex align-items-center"
|
||||
data-wow-duration="3000ms"
|
||||
data-wow-delay="200ms"
|
||||
>
|
||||
<div className="content d-flex flex-column justify-content-between" style={{height: '200px', width: '100%'}}>
|
||||
<div className="titleBox">
|
||||
<h3 className="title">
|
||||
<a href={dashUrl}>
|
||||
<span className='font_black'>{this.titleLen(i.title)} </span>
|
||||
</a>
|
||||
</h3>
|
||||
</div>
|
||||
<div className='p-0 container-fluid'>
|
||||
<div><hr /></div>
|
||||
<div className="blog-meta">
|
||||
<ul>
|
||||
<li className="expire">
|
||||
<a href={dashUrl} className='d-block'>
|
||||
<div className='font_red d-flex align-items-start'>
|
||||
<div className='pr-2'>Expires :</div>
|
||||
<CountDownTimer targetDate={postDt}/>
|
||||
</div>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div className='lmoreTxt d-flex justify-content-end align-items-center'>
|
||||
<a href={dashUrl}>
|
||||
Learn More <i className="fal fa-arrow-right" />
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>)
|
||||
|
||||
|
||||
})
|
||||
}
|
||||
|
||||
|
||||
<div className="col-lg-3 col-md-6">
|
||||
<div
|
||||
className="appie-blog-item mt-30 wow animated fadeInUp"
|
||||
data-wow-duration="3000ms"
|
||||
data-wow-delay="600ms"
|
||||
>
|
||||
|
||||
<div className="content">
|
||||
|
||||
<h3 className="title">
|
||||
<a href={dashUrl}>
|
||||
Find more opportunities at our marketplace.
|
||||
</a>
|
||||
</h3>
|
||||
<a href="https://dashboard.wrenchboard.com/login">
|
||||
Login now <i className="fal fa-arrow-right" />
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default RecentJobsOne;
|
||||
@@ -0,0 +1,61 @@
|
||||
import React from 'react';
|
||||
import IconOne from '../../assets/images/icon/reward.png';
|
||||
import IconTwo from '../../assets/images/icon/assign-chores.png';
|
||||
import IconThree from '../../assets/images/icon/financial-education.png';
|
||||
import IconFour from '../../assets/images/icon/family-connect.png';
|
||||
import Main from '../lnd/LndParts/Design/Main';
|
||||
|
||||
function ServiceItem({ icon, title, description, index }) {
|
||||
return (
|
||||
<div
|
||||
className="service-item 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} width={70} height={70} loading="lazy" />
|
||||
</div>
|
||||
<h4 className="appie-title">{title}</h4>
|
||||
<p>{description}</p>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function ServicesHomeOne({ className }) {
|
||||
|
||||
return (
|
||||
<section
|
||||
className={`appie-service-area pt-50 pb-50 ${className}`}
|
||||
id="service"
|
||||
>
|
||||
<Main />
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
||||
export default ServicesHomeOne;
|
||||
|
||||
const serviceTitle = `Set Chores, Set Goals and Rewards Accomplishments`;
|
||||
const serviceItems = [
|
||||
{
|
||||
icon: IconOne,
|
||||
title: 'Reward Goals Met',
|
||||
description: 'Set goals together and reward accomplishment',
|
||||
},
|
||||
{
|
||||
icon: IconTwo,
|
||||
title: 'Assign Regular Chores',
|
||||
description: 'Organize essential regular chores to be done',
|
||||
},
|
||||
{
|
||||
icon: IconThree,
|
||||
title: 'Financial Education',
|
||||
description: 'Get Kids start early on money management',
|
||||
},
|
||||
{
|
||||
icon: IconFour,
|
||||
title: 'Family Connect',
|
||||
description: 'Connect family, share accomplishments with friends',
|
||||
},
|
||||
];
|
||||
@@ -0,0 +1,164 @@
|
||||
import React from 'react';
|
||||
import teamOne from '../../assets/images/Olu-Amey-001.jpg';
|
||||
import teamTwo from '../../assets/images/team-2.jpg';
|
||||
import teamThree from '../../assets/images/Toks-Law.jpg';
|
||||
import teamFour from '../../assets/images/team-4.jpg';
|
||||
|
||||
function TeamHomeOne() {
|
||||
return (
|
||||
<>
|
||||
<section className="appie-team-area pt-90 pb-100">
|
||||
<div className="container">
|
||||
<div className="row">
|
||||
<div className="col-lg-12">
|
||||
<div className="appie-section-title text-center">
|
||||
<h3 className="appie-title">Meet Our Team Members</h3>
|
||||
<p>Helping you reaching your full potential.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="row">
|
||||
<div className="col-lg-4 col-md-6">
|
||||
<div
|
||||
className="appie-team-item mt-30 wow animated fadeInUp"
|
||||
data-wow-duration="2000ms"
|
||||
data-wow-delay="200ms"
|
||||
>
|
||||
<div className="thumb">
|
||||
<img src={teamOne} alt="" />
|
||||
<ul>
|
||||
<li>
|
||||
<a href="#">
|
||||
<i className="fab fa-facebook-f" />
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#">
|
||||
<i className="fab fa-twitter" />
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="https://www.oluameye.com/" target ="_blank">
|
||||
<i className="fab fa-pinterest-p" />
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div className="content text-center">
|
||||
<h5 className="title">Olu Amey</h5>
|
||||
<span>Co-Founder & Director</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-lg-4 col-md-6">
|
||||
<div
|
||||
className="appie-team-item mt-30 wow animated fadeInUp"
|
||||
data-wow-duration="2000ms"
|
||||
data-wow-delay="400ms"
|
||||
>
|
||||
<div className="thumb">
|
||||
<img src={teamTwo} alt="" />
|
||||
<ul>
|
||||
<li>
|
||||
<a href="#">
|
||||
<i className="fab fa-facebook-f" />
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#">
|
||||
<i className="fab fa-twitter" />
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#">
|
||||
<i className="fab fa-pinterest-p" />
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div className="content text-center">
|
||||
<h5 className="title">Obax Noma </h5>
|
||||
<span>Co-Founder & CEO</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-lg-4 col-md-6">
|
||||
<div
|
||||
className="appie-team-item mt-30 wow animated fadeInUp"
|
||||
data-wow-duration="2000ms"
|
||||
data-wow-delay="600ms"
|
||||
>
|
||||
<div className="thumb">
|
||||
<img src={teamThree} alt="" />
|
||||
<ul>
|
||||
<li>
|
||||
<a href="#">
|
||||
<i className="fab fa-facebook-f" />
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#">
|
||||
<i className="fab fa-twitter" />
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="https://www.tokslaw.com/" target = "_blank" >
|
||||
<i className="fab fa-pinterest-p" />
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div className="content text-center">
|
||||
<h5 className="title">Toks Law</h5>
|
||||
<span>Mobile App Design & Development</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/* <div className="col-lg-3 col-md-6">
|
||||
<div
|
||||
className="appie-team-item mt-30 wow animated fadeInUp"
|
||||
data-wow-duration="2000ms"
|
||||
data-wow-delay="800ms"
|
||||
>
|
||||
<div className="thumb">
|
||||
<img src={teamFour} alt="" />
|
||||
<ul>
|
||||
<li>
|
||||
<a href="#">
|
||||
<i className="fab fa-facebook-f" />
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#">
|
||||
<i className="fab fa-twitter" />
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#">
|
||||
<i className="fab fa-pinterest-p" />
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div className="content text-center">
|
||||
<h5 className="title">Benjamin Evalent</h5>
|
||||
<span>CEO-Founder</span>
|
||||
</div>
|
||||
</div>
|
||||
</div> */}
|
||||
<div className="col-lg-12">
|
||||
<div className="team-btn text-center mt-50">
|
||||
<a className="main-btn" href="#">
|
||||
{' '}
|
||||
View all Members <i className="fal fa-arrow-right" />
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
export default TeamHomeOne;
|
||||
@@ -0,0 +1,140 @@
|
||||
import React, { useRef } from 'react';
|
||||
import Slider from 'react-slick';
|
||||
import 'slick-carousel/slick/slick-theme.css';
|
||||
import 'slick-carousel/slick/slick.css';
|
||||
import user from '../../assets/images/testimonial-user.png';
|
||||
|
||||
function TestimonialHomeOne() {
|
||||
const sliderRef = useRef();
|
||||
const sliderNext = () => {
|
||||
sliderRef.current.slickNext();
|
||||
};
|
||||
const sliderPrev = () => {
|
||||
sliderRef.current.slickPrev();
|
||||
};
|
||||
return (
|
||||
<section className="appie-testimonial-area pt-100 pb-160" id="testimonial">
|
||||
<div className="container">
|
||||
<div className="row justify-content-center">
|
||||
<div className="col-lg-8">
|
||||
<div className="appie-testimonial-slider" style={{ position: 'relative' }}>
|
||||
<span
|
||||
className="prev slick-arrow"
|
||||
style={{ display: 'block' }}
|
||||
onClick={sliderNext}
|
||||
role="button"
|
||||
tabIndex="0"
|
||||
>
|
||||
<i className="fal fa-arrow-left" />
|
||||
</span>
|
||||
<Slider ref={sliderRef} dots arrows={false}>
|
||||
<div className="appie-testimonial-item text-center">
|
||||
<div className="author-info">
|
||||
<img src={user} alt="" />
|
||||
<h5 className="title">Lanta Greece</h5>
|
||||
<span>July, 2021</span>
|
||||
</div>
|
||||
<div className="text">
|
||||
<p>
|
||||
Loving what you do to earn an income is the new word of mouth. I would absolutely recommend WrenchBoard.It 's so easy to use and you get paid instantly.
|
||||
</p>
|
||||
<ul>
|
||||
<li>
|
||||
<i className="fas fa-star" />
|
||||
</li>
|
||||
<li>
|
||||
<i className="fas fa-star" />
|
||||
</li>
|
||||
<li>
|
||||
<i className="fas fa-star" />
|
||||
</li>
|
||||
<li>
|
||||
<i className="fas fa-star" />
|
||||
</li>
|
||||
<li>
|
||||
<i className="fas fa-star" />
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div className="appie-testimonial-item text-center">
|
||||
<div className="author-info">
|
||||
<img src={user} alt="" />
|
||||
<h5 className="title">Jason Response</h5>
|
||||
<span>April 14, 2022</span>
|
||||
</div>
|
||||
<div className="text">
|
||||
<p>
|
||||
Why I say old chap that is spiffing lurgy Oxford
|
||||
cracking goal bleeder, bog-standard Harry brilliant mush
|
||||
a blinding shot starkers.
|
||||
</p>
|
||||
<ul>
|
||||
<li>
|
||||
<i className="fas fa-star" />
|
||||
</li>
|
||||
<li>
|
||||
<i className="fas fa-star" />
|
||||
</li>
|
||||
<li>
|
||||
<i className="fas fa-star" />
|
||||
</li>
|
||||
<li>
|
||||
<i className="fas fa-star" />
|
||||
</li>
|
||||
<li>
|
||||
<i className="fas fa-star" />
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div className="appie-testimonial-item text-center">
|
||||
<div className="author-info">
|
||||
<img src={user} alt="" />
|
||||
<h5 className="title">Jason Response</h5>
|
||||
<span>April 14, 2022</span>
|
||||
</div>
|
||||
<div className="text">
|
||||
<p>
|
||||
Why I say old chap that is spiffing lurgy Oxford
|
||||
cracking goal bleeder, bog-standard Harry brilliant mush
|
||||
a blinding shot starkers.
|
||||
</p>
|
||||
<ul>
|
||||
<li>
|
||||
<i className="fas fa-star" />
|
||||
</li>
|
||||
<li>
|
||||
<i className="fas fa-star" />
|
||||
</li>
|
||||
<li>
|
||||
<i className="fas fa-star" />
|
||||
</li>
|
||||
<li>
|
||||
<i className="fas fa-star" />
|
||||
</li>
|
||||
<li>
|
||||
<i className="fas fa-star" />
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</Slider>
|
||||
<span
|
||||
onClick={sliderPrev}
|
||||
role="button"
|
||||
tabIndex="-1"
|
||||
className="next slick-arrow"
|
||||
style={{ display: 'block' }}
|
||||
>
|
||||
<i className="fal fa-arrow-right" />
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
||||
export default TestimonialHomeOne;
|
||||
@@ -0,0 +1,78 @@
|
||||
import React from 'react';
|
||||
import thumb from '../../assets/images/home-app-page.png';
|
||||
|
||||
function TrafficHomeTwo() {
|
||||
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">Family Connect</h3>
|
||||
<p>
|
||||
All you need for a family to get moving with rewards and more. Plan activities and booster family interactions.
|
||||
</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">Organize Chores</h5>
|
||||
<p>Simple one-time tasks to repeated tasks or promise of performance or set goals.</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">Sibling Activities</h5>
|
||||
<p>Wrenchboard allows family members to create product connections with educational content with reward tools.
|
||||
</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">Personalized Wallet</h5>
|
||||
<p>Individual wallet with parental control and guidance. Money education to increase values.</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">Games & More </h5>
|
||||
<p>More opportunities to learn with games or the artificial intelligence library and shared material.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-lg-12">
|
||||
<div className="traffic-btn mt-50">
|
||||
<a className="main-btn" href="#">
|
||||
Learn more about what you can do with WrenchBoard <i className="fal fa-arrow-right" />
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="traffic-thumb ">
|
||||
<img
|
||||
className="wow animated fadeInRight"
|
||||
data-wow-duration="2000ms"
|
||||
data-wow-delay="200ms"
|
||||
src={thumb}
|
||||
alt=""
|
||||
/>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
||||
export default TrafficHomeTwo;
|
||||
@@ -0,0 +1,84 @@
|
||||
import React from "react";
|
||||
import thumb from "../../assets/images/PerformingTask2.jpg";
|
||||
import getConfig from "./../../Config/config";
|
||||
|
||||
function TrafficHomeOne() {
|
||||
return (
|
||||
<section className="wrench-on-area pt-90 pb-45">
|
||||
<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>
|
||||
</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="position-relative wow animated fadeInRight p-1"
|
||||
data-wow-duration="2000ms"
|
||||
data-wow-delay="200ms"
|
||||
src={thumb}
|
||||
alt=""
|
||||
style={{ zIndex: "0", minHeight: "300px", minWidth: "400px", width: "100%" }}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</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.",
|
||||
},
|
||||
],
|
||||
};
|
||||
@@ -0,0 +1,64 @@
|
||||
import React from 'react';
|
||||
import heroThumbOne from '../../assets/images/Actualize.jpg';
|
||||
import heroThumbTwo from '../../assets/images/hero-thumb-2.png';
|
||||
import shapeTwo from '../../assets/images/shape/shape-2.png';
|
||||
import shapeThree from '../../assets/images/shape/shape-3.png';
|
||||
import shapeFour from '../../assets/images/shape/shape-4.png';
|
||||
|
||||
function WrenchBoardHome() {
|
||||
return (
|
||||
<>
|
||||
<section className="appie-hero-area">
|
||||
<div className="container">
|
||||
<div className="row align-items-center">
|
||||
<div className="col-lg-6">
|
||||
<div className="appie-hero-content">
|
||||
<span>Welcome To WrenchBoard.....</span>
|
||||
<h1 className="appie-title">
|
||||
Make money with any skill.
|
||||
</h1>
|
||||
<p>
|
||||
The marketplace to make money from your skills, find, buy and sell professional services. Connect with freelancers to get work done faster.
|
||||
</p>
|
||||
<ul>
|
||||
<li>
|
||||
<a href="#">
|
||||
<i className="fab fa-apple" /> Download for iOS
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a className="item-2" href="#">
|
||||
<i className="fab fa-google-play" /> Download for
|
||||
Android
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-lg-6">
|
||||
<div className="appie-hero-thumb">
|
||||
<div
|
||||
className="thumb wow animated fadeInUp"
|
||||
data-wow-duration="2000ms"
|
||||
data-wow-delay="200ms"
|
||||
>
|
||||
<img src={heroThumbOne} alt="" />
|
||||
</div>
|
||||
<div
|
||||
className="thumb-2 wow animated fadeInRight"
|
||||
data-wow-duration="2000ms"
|
||||
data-wow-delay="600ms"
|
||||
>
|
||||
<img src={heroThumbTwo} alt="" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</section>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
export default WrenchBoardHome;
|
||||
Reference in New Issue
Block a user