Compare commits
31 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
| 6dd5dbc7b2 | |||
| f8acc0a29e | |||
| d175ef8922 | |||
| 751bcd6c5d | |||
| 8a4c7d92e8 | |||
| 0c4e464c5e | |||
| 3586b01756 | |||
| 715972dbde | |||
| 9cc252b2cd | |||
| a1b56a0b81 | |||
| 87ea20bde8 | |||
| 0ebbc26104 | |||
| e323168927 | |||
| 2224472046 | |||
| 87e7aa7270 | |||
| 53da8d6992 | |||
| 64f69eff72 | |||
| 63cb665140 | |||
| 11b4713db5 | |||
| f109e89f96 | |||
| c9ed414753 | |||
| 2a7643e8b2 | |||
| 1a5644f2df | |||
| 209c75ed2e | |||
| 9684e36427 | |||
| 96d8708b5a | |||
| 7946e0e09c | |||
| dc755e9db1 | |||
| cf0206da44 | |||
| 7a219cc888 | |||
| 5cdc08341f |
@@ -18,6 +18,8 @@
|
||||
.env.test.local
|
||||
.env.production.local
|
||||
|
||||
.idea
|
||||
|
||||
|
||||
npm-debug.log*
|
||||
yarn-debug.log*
|
||||
|
||||
|
After Width: | Height: | Size: 14 KiB |
|
After Width: | Height: | Size: 91 KiB |
|
After Width: | Height: | Size: 23 KiB |
|
After Width: | Height: | Size: 72 KiB |
|
After Width: | Height: | Size: 35 KiB |
|
After Width: | Height: | Size: 78 KiB |
|
After Width: | Height: | Size: 84 KiB |
|
After Width: | Height: | Size: 11 KiB |
|
After Width: | Height: | Size: 8.7 KiB |
|
After Width: | Height: | Size: 1.1 KiB |
|
After Width: | Height: | Size: 1.3 KiB |
|
After Width: | Height: | Size: 10 KiB |
|
After Width: | Height: | Size: 3.9 KiB |
|
After Width: | Height: | Size: 5.2 KiB |
|
After Width: | Height: | Size: 3.7 KiB |
|
After Width: | Height: | Size: 1.6 KiB |
|
After Width: | Height: | Size: 38 KiB |
|
After Width: | Height: | Size: 43 KiB |
|
After Width: | Height: | Size: 4.9 KiB |
|
After Width: | Height: | Size: 64 KiB |
|
After Width: | Height: | Size: 24 KiB |
|
After Width: | Height: | Size: 58 KiB |
|
After Width: | Height: | Size: 4.1 KiB |
|
After Width: | Height: | Size: 3.3 KiB |
|
After Width: | Height: | Size: 95 KiB |
|
After Width: | Height: | Size: 41 KiB |
|
After Width: | Height: | Size: 57 KiB |
|
After Width: | Height: | Size: 125 KiB |
|
After Width: | Height: | Size: 20 KiB |
|
After Width: | Height: | Size: 158 KiB |
|
After Width: | Height: | Size: 28 KiB |
|
After Width: | Height: | Size: 12 KiB |
|
After Width: | Height: | Size: 11 KiB |
@@ -49,6 +49,16 @@
|
||||
</noscript>
|
||||
|
||||
<title>WrenchBoard</title>
|
||||
<!-- Google tag (gtag.js) -->
|
||||
<script async src="https://www.googletagmanager.com/gtag/js?id=G-WB8G0ZD483"></script>
|
||||
<script>
|
||||
window.dataLayer = window.dataLayer || [];
|
||||
function gtag(){dataLayer.push(arguments);}
|
||||
gtag('js', new Date());
|
||||
|
||||
gtag('config', 'G-WB8G0ZD483');
|
||||
</script>
|
||||
|
||||
</head>
|
||||
|
||||
<body>
|
||||
@@ -56,29 +66,29 @@
|
||||
<div id="root"></div>
|
||||
</body>
|
||||
|
||||
<script>
|
||||
(function (i, s, o, g, r, a, m) {
|
||||
i["GoogleAnalyticsObject"] = r;
|
||||
(i[r] =
|
||||
i[r] ||
|
||||
function () {
|
||||
(i[r].q = i[r].q || []).push(arguments);
|
||||
}),
|
||||
(i[r].l = 1 * new Date());
|
||||
(a = s.createElement(o)), (m = s.getElementsByTagName(o)[0]);
|
||||
a.async = 1;
|
||||
a.src = g;
|
||||
m.parentNode.insertBefore(a, m);
|
||||
})(
|
||||
window,
|
||||
document,
|
||||
"script",
|
||||
"https://www.google-analytics.com/analytics.js",
|
||||
"ga"
|
||||
);
|
||||
ga("create", "UA-54829827-4", "auto");
|
||||
ga("send", "pageview");
|
||||
</script>
|
||||
<!-- <script>-->
|
||||
<!-- (function (i, s, o, g, r, a, m) {-->
|
||||
<!-- i["GoogleAnalyticsObject"] = r;-->
|
||||
<!-- (i[r] =-->
|
||||
<!-- i[r] ||-->
|
||||
<!-- function () {-->
|
||||
<!-- (i[r].q = i[r].q || []).push(arguments);-->
|
||||
<!-- }),-->
|
||||
<!-- (i[r].l = 1 * new Date());-->
|
||||
<!-- (a = s.createElement(o)), (m = s.getElementsByTagName(o)[0]);-->
|
||||
<!-- a.async = 1;-->
|
||||
<!-- a.src = g;-->
|
||||
<!-- m.parentNode.insertBefore(a, m);-->
|
||||
<!-- })(-->
|
||||
<!-- window,-->
|
||||
<!-- document,-->
|
||||
<!-- "script",-->
|
||||
<!-- "https://www.google-analytics.com/analytics.js",-->
|
||||
<!-- "ga"-->
|
||||
<!-- );-->
|
||||
<!-- ga("create", "UA-54829827-4", "auto");-->
|
||||
<!-- ga("send", "pageview");-->
|
||||
<!-- </script>-->
|
||||
|
||||
<script>
|
||||
var LHC_API = LHC_API || {};
|
||||
|
||||
@@ -1,7 +1,19 @@
|
||||
import Routes from './Routes';
|
||||
import { Redirect, useLocation } from 'react-router-dom';
|
||||
|
||||
|
||||
function App() {
|
||||
return <Routes />;
|
||||
const {pathname} = useLocation()
|
||||
|
||||
return (
|
||||
<>
|
||||
{pathname.startsWith('/@') ?
|
||||
<Redirect to='/app' />
|
||||
:
|
||||
<Routes />
|
||||
}
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
export default App;
|
||||
|
||||
@@ -25,6 +25,7 @@ import Privacy from './components/Service/Privacy';
|
||||
import Terms from './components/Service/Terms';
|
||||
import FAQ from './components/FAQ/Index';
|
||||
import Lnd from './components/lnd/Lnd';
|
||||
import AppDownload from './components/AppDownload/AppDownload';
|
||||
|
||||
function Routes() {
|
||||
const [loading, setLoading] = useState(true);
|
||||
@@ -44,28 +45,27 @@ function Routes() {
|
||||
</div>
|
||||
)}
|
||||
<div className={`appie-visible ${loading === false ? 'active' : ''}`}>
|
||||
<Router>
|
||||
<ScrollToTop>
|
||||
<Switch>
|
||||
<Route exact path="/" component={HomeOne} />
|
||||
<Route exact path="/eoffer" component={HomeOne} />
|
||||
{/*<Route exact path="/news" component={News} />*/}
|
||||
<Route exact path="/blog" component={Blog} />
|
||||
<Route exact path="/blog/blogdetail/:id" component={BlogDetail} />
|
||||
<Route exact path="/use-cases" component={UseCases} />
|
||||
{/*<Route exact path="/news/single-news" component={SingleNews} />*/}
|
||||
<Route exact path="/service" component={Service} />
|
||||
<Route exact path="/terms" component={Terms} />
|
||||
<Route exact path="/privacy" component={Privacy} />
|
||||
<Route exact path="/about-us" component={AboutUs} />
|
||||
<Route exact path="/contact" component={Contact} />
|
||||
<Route exact path="/faq" component={FAQ} />
|
||||
<Route exact path="/error" component={Error} />
|
||||
<Route exact path="/lnd/*" component={Lnd} />
|
||||
<Route component={Error} />
|
||||
</Switch>
|
||||
</ScrollToTop>
|
||||
</Router>
|
||||
<ScrollToTop>
|
||||
<Switch>
|
||||
<Route exact path="/" component={HomeOne} />
|
||||
<Route exact path="/eoffer" component={HomeOne} />
|
||||
{/*<Route exact path="/news" component={News} />*/}
|
||||
<Route exact path="/blog" component={Blog} />
|
||||
<Route exact path="/blog/blogdetail/:id" component={BlogDetail} />
|
||||
<Route exact path="/use-cases" component={UseCases} />
|
||||
{/*<Route exact path="/news/single-news" component={SingleNews} />*/}
|
||||
<Route exact path="/service" component={Service} />
|
||||
<Route exact path="/terms" component={Terms} />
|
||||
<Route exact path="/privacy" component={Privacy} />
|
||||
<Route exact path="/about-us" component={AboutUs} />
|
||||
<Route exact path="/contact" component={Contact} />
|
||||
<Route exact path="/faq" component={FAQ} />
|
||||
<Route exact path="/error" component={Error} />
|
||||
<Route exact path="/lnd/*" component={Lnd} />
|
||||
<Route exact path="/app" component={AppDownload} />
|
||||
<Route component={Error} />
|
||||
</Switch>
|
||||
</ScrollToTop>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
|
||||
@@ -3227,6 +3227,63 @@ p {
|
||||
background: linear-gradient(135deg, #d8aaff 0%, #9b2cfa 100%);
|
||||
}
|
||||
|
||||
.appie-modern-design .icon i {
|
||||
height: 26px;
|
||||
width: 26px;
|
||||
text-align: center;
|
||||
line-height: 26px;
|
||||
border-radius: 50%;
|
||||
background: purple;
|
||||
color: #fff;
|
||||
font-size: 14px;
|
||||
box-shadow: 0px 6px 10px 0px rgba(16, 73, 189, 0.3);
|
||||
}
|
||||
|
||||
/* .modern_ui_section{
|
||||
margin-top: 100px;
|
||||
} */
|
||||
.modern_ui_section .section_sub_title{
|
||||
font-size: 30px;
|
||||
color: purple;
|
||||
}
|
||||
.modern_ui_section .ui_images{
|
||||
border-radius: 100%;
|
||||
background-color: #fff;
|
||||
width: auto;
|
||||
height: auto;
|
||||
padding: 30px 10px;
|
||||
}
|
||||
.modern_ui_section .right_img{
|
||||
left: -60px;
|
||||
top: -20px;
|
||||
}
|
||||
.modern_ui_section .left_img{
|
||||
width: 60%;
|
||||
}
|
||||
|
||||
.modern_ui_section .left_img img{
|
||||
border-radius: 10px;
|
||||
}
|
||||
.modern_ui_section .right_img{
|
||||
width: 40%;
|
||||
}
|
||||
.modern_ui_section .right_img img {
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
}
|
||||
.modern_ui_section .right_img .right_img_one{
|
||||
width: 120px;
|
||||
height: auto;
|
||||
}
|
||||
.modern_ui_section .right_img .right_img_three{
|
||||
left: -20px;
|
||||
}
|
||||
@media only screen and (min-width: 0px) and (max-width: 500px) {
|
||||
.modern_ui_section .right_img{
|
||||
left: -30px;
|
||||
top: -20px;
|
||||
}
|
||||
}
|
||||
@media only screen and (min-width: 992px) and (max-width: 1200px) {
|
||||
.traffic-btn {
|
||||
margin-top: 30px;
|
||||
@@ -4894,6 +4951,28 @@ p {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.service-item{
|
||||
background: transparent;
|
||||
border-radius: 6px;
|
||||
padding: 30px 10px;
|
||||
}
|
||||
|
||||
.service-item .icon {
|
||||
display: inline-block;
|
||||
text-align: center;
|
||||
|
||||
border-radius: 20px;
|
||||
height: 80px;
|
||||
line-height: 70px;
|
||||
margin-bottom: 10px;
|
||||
position: relative;
|
||||
width: 80px;
|
||||
}
|
||||
|
||||
.service-item h4 {
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
.tags a {
|
||||
display: inline-block;
|
||||
height: 34px;
|
||||
|
||||
@@ -107,6 +107,27 @@
|
||||
margin-top: -20px;
|
||||
}
|
||||
|
||||
.app-download.options{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-direction: column;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.app-download.options .main-btn {
|
||||
color: #0e1133;
|
||||
background-color: #fff;
|
||||
border: 3px solid #3EAFCC;
|
||||
padding: 2px 112px;
|
||||
letter-spacing: 1px;
|
||||
}
|
||||
|
||||
.app-download.appie-hero-content h5 {
|
||||
color: #51B5D0;
|
||||
/* border-color: #fff; */
|
||||
}
|
||||
|
||||
@media only screen and (min-width: 300px) and (max-width: 1024px) {
|
||||
.testimonial-about-slider-active .testimonial-box {
|
||||
box-shadow: none;
|
||||
|
||||
|
After Width: | Height: | Size: 12 KiB |
|
After Width: | Height: | Size: 11 KiB |
|
After Width: | Height: | Size: 56 KiB |
|
After Width: | Height: | Size: 69 KiB |
|
After Width: | Height: | Size: 76 KiB |
|
After Width: | Height: | Size: 73 KiB |
|
After Width: | Height: | Size: 163 KiB |
|
After Width: | Height: | Size: 151 KiB |
|
After Width: | Height: | Size: 151 KiB |
|
After Width: | Height: | Size: 113 KiB |
|
Before Width: | Height: | Size: 2.8 KiB After Width: | Height: | Size: 123 KiB |
@@ -0,0 +1,11 @@
|
||||
import HomeOneHeader from '../HomeOne/HomeOneHeader';
|
||||
import AppDownloadDetails from './AppDownloadDetails';
|
||||
|
||||
export default function AppDownload() {
|
||||
return (
|
||||
<>
|
||||
<HomeOneHeader showLogoOnly={true} />
|
||||
<AppDownloadDetails />
|
||||
</>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,78 @@
|
||||
import React from 'react'
|
||||
import heroThumbOne from '../../assets/images/app-thumb-1.png';
|
||||
import heroThumbOne1 from '../../assets/images/app-thumb-2.png';
|
||||
|
||||
import heroThumbTwo from '../../assets/images/app-pic.png';
|
||||
import CustomSlider from '../customSlider/CustomSlider';
|
||||
|
||||
const AppDownloadDetails = () => {
|
||||
return (
|
||||
<>
|
||||
<section className="appie-hero-area">
|
||||
<div className="container">
|
||||
<div className="row align-items-center">
|
||||
<div className="col-lg-6">
|
||||
<div className="app-download appie-hero-content appie-hero-content-6">
|
||||
<h5 className='title'>Download from</h5>
|
||||
<div className='flex app-download options'>
|
||||
<ul>
|
||||
<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>
|
||||
<h5>OR</h5>
|
||||
<a target='_blank' href={process.env.REACT_APP_DASH_URL_SIGNUP} className='main-btn'>
|
||||
Register Online
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<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 tasks portfolio and find others to perform tasks for you.</p>
|
||||
</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', margin: 'auto' }}>
|
||||
<CustomSlider
|
||||
images={[heroThumbOne, heroThumbOne1, heroThumbOne]}
|
||||
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 AppDownloadDetails
|
||||
@@ -19,12 +19,12 @@ function Blog({ blogItem, imgUrl, loader }) {
|
||||
|
||||
const headerLoaderStyles = {
|
||||
"--text-container-width": "300px",
|
||||
"--text-container-height": "34px",
|
||||
"--text-container-height": "18px",
|
||||
};
|
||||
|
||||
const bodyTextLoaderStyles = {
|
||||
"--text-container-width": "770px",
|
||||
"--text-container-height": "150px",
|
||||
"--text-container-height": "15px",
|
||||
};
|
||||
|
||||
return (
|
||||
|
||||
@@ -20,7 +20,7 @@ function FooterHomeOne({ className }) {
|
||||
</a>
|
||||
</div>
|
||||
<p>
|
||||
{`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. `}
|
||||
{`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>
|
||||
<a href="/service">
|
||||
Read More <i className="fal fa-arrow-right" />
|
||||
@@ -95,12 +95,12 @@ function FooterHomeOne({ className }) {
|
||||
</li>
|
||||
<li>
|
||||
<a href="#">
|
||||
<i className="fal fa-phone" /> 404 855-7966
|
||||
<i className="fal fa-phone" /> 404-855-7966
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#">
|
||||
<i className="fal fa-map-marker-alt" />Atlanta,GA 30339
|
||||
<i className="fal fa-map-marker-alt" />Atlanta, GA 30339
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
@@ -4,7 +4,7 @@ import StickyMenu from '../../lib/StickyMenu';
|
||||
import Navigation from '../Navigation';
|
||||
import getConfig from './../../Config/config'
|
||||
|
||||
function HomeOneHeader({ action }) {
|
||||
function HomeOneHeader({ action, showLogoOnly = false }) {
|
||||
var site = getConfig()[0];
|
||||
useEffect(() => {
|
||||
StickyMenu();
|
||||
@@ -21,27 +21,30 @@ function HomeOneHeader({ action }) {
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<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" />
|
||||
|
||||
{!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>
|
||||
<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>
|
||||
|
||||
@@ -1,13 +1,14 @@
|
||||
import React from "react";
|
||||
import IconOne from "../../assets/images/icon/account_login.png";
|
||||
import IconTwo from "../../assets/images/icon/task.png";
|
||||
import IconThree from "../../assets/images/icon/target.png";
|
||||
import IconFour from "../../assets/images/icon/reward.png";
|
||||
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="appie-single-service text-center mt-30 wow animated fadeInUp"
|
||||
className="service-item text-center mt-30 wow animated fadeInUp"
|
||||
data-wow-duration="2000ms"
|
||||
data-wow-delay={`${200 * (index + 1)}ms`}
|
||||
style={{ cursor: "default" }}
|
||||
@@ -22,40 +23,19 @@ function ServiceItem({ icon, title, description, index }) {
|
||||
}
|
||||
|
||||
function ServicesHomeOne({ className }) {
|
||||
const serviceTitle = "Set Goals and Rewards to Inspire";
|
||||
const serviceItems = [
|
||||
{
|
||||
icon: IconOne,
|
||||
title: "Free Account",
|
||||
description: "Join WrenchBoard. Get your free account.",
|
||||
},
|
||||
{
|
||||
icon: IconTwo,
|
||||
title: "Set Goals",
|
||||
description: "Suggest or find what you want to get rewarded for.",
|
||||
},
|
||||
{
|
||||
icon: IconThree,
|
||||
title: "Complete",
|
||||
description: "Complete task, and notify assigner with ease.",
|
||||
},
|
||||
{
|
||||
icon: IconFour,
|
||||
title: "Reward",
|
||||
description: "Task completed. Find your reward.",
|
||||
},
|
||||
];
|
||||
|
||||
return (
|
||||
<section
|
||||
className={`appie-service-area pt-10 pb-50 ${className}`}
|
||||
className={`appie-service-area pt-50 pb-50 ${className}`}
|
||||
id="service"
|
||||
>
|
||||
<div className="container">
|
||||
{/* <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>
|
||||
<h3 className="appie-title">
|
||||
Set Chores, Set Goals and <br /> Rewards Accomplishments
|
||||
</h3>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -71,9 +51,35 @@ function ServicesHomeOne({ className }) {
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div> */}
|
||||
|
||||
<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',
|
||||
},
|
||||
];
|
||||
@@ -9,9 +9,9 @@ function Navigation() {
|
||||
<Link to="/">Home</Link>
|
||||
</li>
|
||||
<li>
|
||||
<Link to="/service">Services</Link>
|
||||
<Link to="/about-us">About</Link>
|
||||
</li>
|
||||
<li>
|
||||
{/* <li>
|
||||
<a href="#">
|
||||
Resources <i className="fal fa-angle-down" />
|
||||
</a>
|
||||
@@ -26,8 +26,7 @@ function Navigation() {
|
||||
<Link to="/faq">FAQs</Link>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
|
||||
</li> */}
|
||||
</ul>
|
||||
</>
|
||||
);
|
||||
|
||||
@@ -1,4 +1,6 @@
|
||||
import React from 'react'
|
||||
import React, { useState } from 'react'
|
||||
import localImgLoad from '../../../../lib/localImgLoad'
|
||||
|
||||
import img1 from '../../../../assets/images/modern01.png'
|
||||
import img2 from '../../../../assets/images/secure_data.png'
|
||||
import img3 from '../../../../assets/images/modern02.png'
|
||||
@@ -6,49 +8,69 @@ import img4 from '../../../../assets/images/modern03.png'
|
||||
|
||||
|
||||
const Main = ({gredient}) => {
|
||||
|
||||
const [activeImg, setActiveImg] = useState(list[0].name)
|
||||
|
||||
const changeActiveImg = (name) => {
|
||||
setActiveImg(name)
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
<section className={`row_am modern_ui_section ${gredient && "gredient-bg"}`} >
|
||||
{gredient &&
|
||||
<div className="modernui_section_bg modernui-gredient"> <img src="assets/images/section-bg.png" alt="image"/> </div>}
|
||||
<div className="modernui_section_bg modernui-gredient">
|
||||
<img src="assets/images/section-bg.png" alt="image"/>
|
||||
</div>
|
||||
}
|
||||
<div className="container">
|
||||
<div className="row">
|
||||
<div className="row align-items-center">
|
||||
<div className="col-lg-6">
|
||||
<div className="ui_text">
|
||||
<div className="section_title" data-aos="fade-up" data-aos-duration="1500" data-aos-delay="100">
|
||||
<h2>Beautiful design with <span>modern UI</span></h2>
|
||||
<p>
|
||||
Lorem Ipsum is simply dummy text of the printing and typesetting industry lorem Ipsum has been the
|
||||
industrys standard dummy text ever since the when an unknown printer took a galley of type and.
|
||||
</p>
|
||||
</div>
|
||||
<ul className="design_block">
|
||||
<li data-aos="fade-up" data-aos-duration="1500">
|
||||
<h4>Carefully designed</h4>
|
||||
<p>Lorem Ipsum is simply dummy text of the printing and type esetting industry lorem Ipsum has.</p>
|
||||
</li>
|
||||
<li data-aos="fade-up" data-aos-duration="1500">
|
||||
<h4>Seamless Sync</h4>
|
||||
<p>Simply dummy text of the printing and typesetting inustry lorem Ipsum has Lorem dollar summit.</p>
|
||||
</li>
|
||||
<li data-aos="fade-up" data-aos-duration="1500">
|
||||
<h4>Access Drive</h4>
|
||||
<p>Printing and typesetting industry lorem Ipsum has been the industrys standard dummy text of type
|
||||
setting.</p>
|
||||
</li>
|
||||
</ul>
|
||||
<div className="ui_text w-100">
|
||||
<div className="appie-traffic-title section_title" data-aos="fade-up" data-aos-duration="1500" data-aos-delay="100" style={{padding: '0'}}>
|
||||
<h3 className='title'>Set Chores, Set Goals <div className='section_sub_title'>Rewards Accomplishments</div></h3>
|
||||
<p className=''>
|
||||
Set goals, tasks, or anything that motivates or needs to be done and reward completion. WrenchBoard is the platform plan rewards.
|
||||
</p>
|
||||
</div>
|
||||
<div className="row">
|
||||
{list?.map(({ icon, header, paragraph, name }, idx) => (
|
||||
<div className="col-12 mb-20" key={idx} onClick={()=>changeActiveImg(name)} style={{cursor: 'pointer'}}>
|
||||
<div
|
||||
className={`appie-traffic-service features appie-modern-design`}
|
||||
style={{ paddingRight: "45px" }}
|
||||
>
|
||||
<div className="icon">
|
||||
<i className={icon} />
|
||||
</div>
|
||||
<h5 className="title">{header}</h5>
|
||||
<p>{paragraph}</p>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-lg-6">
|
||||
<div className="ui_images" data-aos="fade-in" data-aos-duration="1500">
|
||||
<div className="left_img">
|
||||
<img className="moving_position_animatin" src={img1} alt="image" />
|
||||
</div>
|
||||
<div className="right_img">
|
||||
<img className="moving_position_animatin" src={img2} alt="image" />
|
||||
<img className="moving_position_animatin" src={img3} alt="image" />
|
||||
<img className="moving_position_animatin" src={img4} alt="image" />
|
||||
</div>
|
||||
<div className='w-100 ui_image_con d-flex justify-content-center align-items-center'>
|
||||
<div className="ui_images position-relative d-flex justify-content-center align-items-center" data-aos="fade-in" data-aos-duration="1500">
|
||||
<div className="left_img position-relative">
|
||||
<img
|
||||
className="moving_position_animatin position-relative"
|
||||
src={ localImgLoad(`images/home/${activeImg}.jpg`)}
|
||||
alt="image"
|
||||
width='332px'
|
||||
height='auto'
|
||||
/>
|
||||
</div>
|
||||
<div className="right_img position-relative d-flex flex-column justify-content-start align-items-center">
|
||||
<div className='d-flex flex-column justify-content-start align-items-center'>
|
||||
{/* <img className="moving_position_animatin right_img_one" src={img2} alt="image" /> */}
|
||||
<img className="moving_position_animatin right_img_two" src={img3} alt="image" />
|
||||
</div>
|
||||
<img className="moving_position_animatin right_img_three position-relative" src={img4} alt="image" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -58,4 +80,33 @@ const Main = ({gredient}) => {
|
||||
)
|
||||
}
|
||||
|
||||
export default Main
|
||||
export default Main
|
||||
|
||||
|
||||
|
||||
const list = [
|
||||
{
|
||||
icon: 'fal fa-check',
|
||||
header: 'Reward Goals Met',
|
||||
paragraph: 'Set goals together and reward accomplishment',
|
||||
name: 'reward-goals',
|
||||
},
|
||||
{
|
||||
icon: 'fal fa-check',
|
||||
header: 'Assign Regular Chores',
|
||||
paragraph: 'Organize essential regular chores to be done',
|
||||
name: 'assign-chores',
|
||||
},
|
||||
{
|
||||
icon: 'fal fa-check',
|
||||
header: 'Financial Education',
|
||||
paragraph: 'Get Kids start early on money management',
|
||||
name: 'financial-edu',
|
||||
},
|
||||
{
|
||||
icon: 'fal fa-check',
|
||||
header: 'Family Connect',
|
||||
paragraph: 'Connect family, share accomplishments with friends',
|
||||
name: 'family-connect',
|
||||
},
|
||||
]
|
||||
@@ -1,5 +1,7 @@
|
||||
import React from 'react';
|
||||
import ReactDOM from 'react-dom';
|
||||
import { BrowserRouter as Router } from 'react-router-dom';
|
||||
|
||||
import App from './App';
|
||||
import './assets/css/bootstrap.min.css';
|
||||
import './assets/css/custom-animated.css';
|
||||
@@ -12,7 +14,9 @@ import './assets/css/style.css';
|
||||
|
||||
ReactDOM.render(
|
||||
<React.StrictMode>
|
||||
<App />
|
||||
<Router>
|
||||
<App />
|
||||
</Router>
|
||||
</React.StrictMode>,
|
||||
document.getElementById('root')
|
||||
);
|
||||
|
||||