This commit is contained in:
Ebube
2023-08-29 11:20:07 +01:00
parent f7ac23748d
commit 0c4be2733f
5 changed files with 282 additions and 258 deletions
+43 -35
View File
@@ -1,41 +1,49 @@
import React from 'react';
import React from "react";
function HeroAbout() {
return (
<>
<div className="appie-about-top-title-area">
<div className="container">
<div className="row">
<div className="col-lg-7">
<div className="appie-about-top-title">
<h2 className="title">Our team is here to support you.</h2>
</div>
</div>
</div>
</div>
return (
<>
<div className="appie-about-top-title-area">
<div className="container">
<div className="row">
<div className="col-lg-7">
<div className="appie-about-top-title">
<h2 className="title">Our team is here to support you.</h2>
</div>
</div>
<section className="appie-about-page-area">
<div className="container">
<div className="row">
{/* col-lg-8 */}
<div className="col-12">
<div className="appie-about-page-content">
<h3 className="title">
Online Marketplace Platform to Get Paid.
</h3>
<p>
WrenchBoard is the marketplace that connects independent talent with businesses that require their skill set and get paid.
We serve everyone from one-person startups to a powerful, trust-driven platform that facilitates businesses and freelancers to work concurrently in unique patterns that unlock their potential.
Our platform provides a range of skills in categories including consulting, finance & accounting, website & app development, creative & design, customer support and operations. Learn more at <a href={process.env.REACT_APP_DASH_URL}>www.WrenchBoard.com</a>
</p>
</div>
</div>
</div>
</div>
</section>
</>
);
</div>
</div>
</div>
<section className="appie-about-page-area">
<div className="container">
<div className="row">
{/* col-lg-8 */}
<div className="col-12">
<div className="appie-about-page-content">
<h3 className="title">
Online Marketplace Platform to Get Paid.
</h3>
<p>
WrenchBoard is the marketplace that connects independent
talent with businesses that require their skill set and get
paid. We serve everyone from one-person startups to a
powerful, trust-driven platform that facilitates businesses
and freelancers to work concurrently in unique patterns that
unlock their potential. Our platform provides a range of
skills in categories including consulting, finance &
accounting, website & app development, creative & design,
customer support and operations. Learn more at{" "}
<a href={process.env.REACT_APP_DASH_URL}>
www.WrenchBoard.com
</a>
</p>
</div>
</div>
</div>
</div>
</section>
</>
);
}
export default HeroAbout;
+101 -124
View File
@@ -1,131 +1,108 @@
import React from 'react';
import Design from '../../assets/images/design.png'
import Approach from '../../assets/images/approach.png'
import Interactive from '../../assets/images/interactive.png'
import Mobility from '../../assets/images/mobility-approach.png'
import Privacy from '../../assets/images/privacy.png'
import Seamless from '../../assets/images/seamless.png'
import React from "react";
import Design from "../../assets/images/design.png";
import Approach from "../../assets/images/approach.png";
import Interactive from "../../assets/images/interactive.png";
import Mobility from "../../assets/images/mobility-approach.png";
import Privacy from "../../assets/images/privacy.png";
import Seamless from "../../assets/images/seamless.png";
function ServiceItem(props) {
return (
<div
className={`appie-single-service-2 appie-single-service-about item-${props.index} mt-30 wow animated fadeInUp`}
data-wow-duration="2000ms"
data-wow-delay={`${props.delay}ms`}
style={{ cursor: "default" }}
>
<div className="icon d-flex justify-content-center align-items-center">
<img src={props.image} />
</div>
<h4 className="title">{props.title}</h4>
<p>{props.description}</p>
</div>
);
}
function ServicesAbout() {
return (
<>
<section className="appie-services-2-area pt-90 pb-55" id="service">
<div className="container">
<div className="row align-items-end">
<div className="col-12 col-lg-8">
<div className="appie-section-title">
<h3 className="appie-title">Were driven by your values</h3>
<p>The app provides design and digital marketing. </p>
</div>
</div>
</div>
<div className="row">
<div className="col-lg-4 col-md-6">
<div
className="appie-single-service-2 appie-single-service-about mt-30 wow animated fadeInUp"
data-wow-duration="2000ms"
data-wow-delay="200ms"
>
<div className="icon d-flex justify-content-center align-items-center">
{/* <div className='container'>
<i className="fal fa-tv"></i>
</div> */}
<img src={Design} />
</div>
<h4 className="title">Carefully designed</h4>
<p>Wrenchboard prioritizes your needs and desires. We know that the your success depends on how well we meet your needs. So, we always listen to feedback and take suggestions to heart, constantly striving to improve our products and make them as user-friendly as possible. It's not about us - it's about you.</p>
</div>
</div>
<div className="col-lg-4 col-md-6">
<div
className="appie-single-service-2 appie-single-service-about item-2 mt-30 wow animated fadeInUp"
data-wow-duration="2000ms"
data-wow-delay="400ms"
>
<div className="icon d-flex justify-content-center align-items-center">
{/* <div className='container'>
<i className="fal fa-code"></i>
</div> */}
<img src={Approach} />
</div>
<h4 className="title">Modern Approach</h4>
<p>We're committed to providing a cutting-edge solution that serves you at all times.Our goal is to create a product that is intuitive and user-friendly, and we are constantly working to improve and refine our tools. We believe that by prioritizing you, we can create a solution that truly makes a difference and exceeds expectations.</p>
</div>
</div>
<div className="col-lg-4 col-md-6">
<div
className="appie-single-service-2 appie-single-service-about item-3 mt-30 wow animated fadeInUp"
data-wow-duration="2000ms"
data-wow-delay="600ms"
>
<div className="icon d-flex justify-content-center align-items-center">
{/* <div className='container'>
<i className="fal fa-user-friends"></i>
</div> */}
<img src={Interactive} />
</div>
<h4 className="title">User Interactive</h4>
<p>WrenchBoard offers a variety of features to keep you engaged and informed throughout your experience. Email notifications and alerts are designed to ensure that you never miss out on important updates or changes.Whether you prefer to receive updates via email, text message, or push notification, we have you covered. </p>
</div>
</div>
<div className="col-lg-4 col-md-6">
<div
className="appie-single-service-2 appie-single-service-about item-4 mt-30 wow animated fadeInUp"
data-wow-duration="2000ms"
data-wow-delay="200ms"
>
<div className="icon d-flex justify-content-center align-items-center">
{/* <div className='container'>
<i className="fal fa-mobile"></i>
</div> */}
<img src={Mobility} />
</div>
<h4 className="title">Mobility Approach</h4>
<p>WrenchBoard offers a comprehensive suite of tools that seamlessly integrate across all devices, allowing you to stay organized and productive no matter where your day takes you. From managing tasks to tracking your responses and staying connected. With WrenchBoard, experience the freedom and flexibility of a truly mobile lifestyle!</p>
</div>
</div>
<div className="col-lg-4 col-md-6">
<div
className="appie-single-service-2 appie-single-service-about item-5 mt-30 wow animated fadeInUp"
data-wow-duration="2000ms"
data-wow-delay="400ms"
>
<div className="icon d-flex justify-content-center align-items-center">
{/* <div className='container'>
<i className="fal fa-retweet"></i>
</div> */}
<img src={Seamless} />
</div>
<h4 className="title">Seamless Sync</h4>
<p> With WrenchBoard, managing your activities across different platforms is easy and seamless. Our suite of features is designed to work across all devices, so you can stay organized and productive whether you're on your desktop, tablet, or phone. Say goodbye to the hassle of switching between different apps and platforms. WrenchBoard makes it simple and streamlined. .</p>
</div>
</div>
<div className="col-lg-4 col-md-6">
<div
className="appie-single-service-2 appie-single-service-about item-6 mt-30 wow animated fadeInUp"
data-wow-duration="2000ms"
data-wow-delay="600ms"
>
<div className="icon d-flex justify-content-center align-items-center">
{/* <div className='container'>
<i className="fal fa-bell"></i>
</div> */}
<img src={Privacy} />
</div>
<h4 className="title">Privacy</h4>
<p>We understand how important privacy is you, which is why we are designed to work without needing to share your data. You can trust that your information will remain safe and confidential while using our suite of features to manage your tasks across different platforms. Experience the convenience of a unified, cross-platform experience without sacrificing your privacy.</p>
</div>
</div>
</div>
</div>
</section>
</>
);
return (
<>
<section className="appie-services-2-area pt-90 pb-55" id="service">
<div className="container">
<div className="row align-items-end">
<div className="col-12 col-lg-8">
<div className="appie-section-title">
<h3 className="appie-title">{servicesContent.heading}</h3>
<p>{servicesContent.subTitle}</p>
</div>
</div>
</div>
<div className="row">
{servicesContent.list?.map(({ id, ...item }) => (
<div className="col-lg-4 col-md-6">
<ServiceItem index={id} {...item} />
</div>
))}
</div>
</div>
</section>
</>
);
}
export default ServicesAbout;
const servicesContent = {
heading: "Were driven by your values",
subTitle: "The app provides design and digital marketing.",
list: [
{
id: 1,
image: Design,
delay: 200,
title: "Carefully designed",
description:
"WrenchBoard prioritizes your needs and desires. We know that the your success depends on how well we meet your needs. So, we always listen to feedback and take suggestions to heart, constantly striving to improve our products and make them as user-friendly as possible. It's not about us - it's about you.",
},
{
id: 2,
image: Approach,
delay: 400,
title: "Modern Approach",
description:
"We're committed to providing a cutting-edge solution that serves you at all times.Our goal is to create a product that is intuitive and user-friendly, and we are constantly working to improve and refine our tools. We believe that by prioritizing you, we can create a solution that truly makes a difference and exceeds expectations.",
},
{
id: 3,
image: Interactive,
delay: 600,
title: "User Interactive",
description:
"WrenchBoard offers a variety of features to keep you engaged and informed throughout your experience. Email notifications and alerts are designed to ensure that you never miss out on important updates or changes.Whether you prefer to receive updates via email, text message, or push notification, we have you covered.",
},
{
id: 4,
image: Mobility,
delay: 200,
title: "Mobility Approach",
description:
"WrenchBoard offers a comprehensive suite of tools that seamlessly integrate across all devices, allowing you to stay organized and productive no matter where your day takes you. From managing tasks to tracking your responses and staying connected. With WrenchBoard, experience the freedom and flexibility of a truly mobile lifestyle!",
},
{
id: 5,
image: Seamless,
delay: 400,
title: "Seamless Sync",
description:
"With WrenchBoard, managing your activities across different platforms is easy and seamless. Our suite of features is designed to work across all devices, so you can stay organized and productive whether you're on your desktop, tablet, or phone. Say goodbye to the hassle of switching between different apps and platforms. WrenchBoard makes it simple and streamlined.",
},
{
id: 6,
image: Privacy,
delay: 600,
title: "Privacy",
description:
"We understand how important privacy is to you, which is why we are designed to work without needing to share your data. You can trust that your information will remain safe and confidential while using our suite of features to manage your tasks across different platforms. Experience the convenience of a unified, cross-platform experience without sacrificing your privacy.",
},
],
};
+77 -68
View File
@@ -1,74 +1,83 @@
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 shapeThree from '../../assets/images/shape/shape-3.png';
import shapeFour from '../../assets/images/shape/shape-4.png';
import getConfig from './../../Config/config'
import CustomSlider from '../customSlider/CustomSlider';
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 shapeThree from "../../assets/images/shape/shape-3.png";
import shapeFour from "../../assets/images/shape/shape-4.png";
import getConfig from "./../../Config/config";
import CustomSlider from "../customSlider/CustomSlider";
function HeroHomeOne() {
var site = getConfig()[0];
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">
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>
<ul>
<li>
<a href={process.env.REACT_APP_APPLE_APP} className="dark" target="_blank">
<i className="fab fa-apple" /> Download for iOS
</a>
</li>
<li>
<a className="item-2 light" href={process.env.REACT_APP_ANDROID_APP} target="_blank">
<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="WrenchBoard" /> */}
<div style={{width: '350px', margin: 'auto'}}>
<CustomSlider
images={[heroThumbOne, heroThumbOne, 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="" />
</div>
</div>
</div>
</div>
var site = getConfig()[0];
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">
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>
<ul>
<li>
<a
href={process.env.REACT_APP_APPLE_APP}
className="dark"
target="_blank"
>
<i className="fab fa-apple" /> Download for iOS
</a>
</li>
<li>
<a
className="item-2 light"
href={process.env.REACT_APP_ANDROID_APP}
target="_blank"
>
<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="WrenchBoard" /> */}
<div style={{ width: "350px", margin: "auto" }}>
<CustomSlider
images={[heroThumbOne, heroThumbOne, heroThumbOne]}
speed="5"
indicatorColor="#333"
/>
</div>
</div>
</section>
</>
);
<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 HeroHomeOne;
+28 -20
View File
@@ -1,12 +1,17 @@
import React from 'react';
import IconOne from '../../assets/images/icon/usericon.png';
import IconTwo from '../../assets/images/icon/Findtaskicon.png';
import IconThree from '../../assets/images/icon/taskicon.png';
import IconFour from '../../assets/images/icon/walleticon.png';
import React from "react";
import IconOne from "../../assets/images/icon/usericon.png";
import IconTwo from "../../assets/images/icon/Findtaskicon.png";
import IconThree from "../../assets/images/icon/taskicon.png";
import IconFour from "../../assets/images/icon/walleticon.png";
function ServiceItem({ icon, title, description, index }) {
return (
<div className="appie-single-service text-center mt-30 wow animated fadeInUp" data-wow-duration="2000ms" data-wow-delay={`${200 * (index + 1)}ms`} style={{ cursor: "default" }}>
<div
className="appie-single-service text-center mt-30 wow animated fadeInUp"
data-wow-duration="2000ms"
data-wow-delay={`${200 * (index + 1)}ms`}
style={{ cursor: "default" }}
>
<div className="icon">
<img src={icon} alt={title} />
</div>
@@ -17,39 +22,42 @@ function ServiceItem({ icon, title, description, index }) {
}
function ServicesHomeOne({ className }) {
const serviceTitle = ""
const serviceTitle = "";
const serviceItems = [
{
icon: IconOne,
title: 'Free Account',
description: 'Join WrenchBoard. Create an account for Income.',
title: "Free Account",
description: "Join WrenchBoard. Create an account for Income.",
},
{
icon: IconTwo,
title: 'Find Task',
description: 'Build a Self-Portfolio with sole purpose to Cash-Out.',
title: "Find Task",
description: "Build a Self-Portfolio with sole purpose to Cash-Out.",
},
{
icon: IconThree,
title: 'Complete',
description: 'Organize and Manage your teams efficiently. Manage your workgroup.',
title: "Complete",
description:
"Organize and Manage your teams efficiently. Manage your workgroup.",
},
{
icon: IconFour,
title: 'Get Paid',
description: 'Start Boosting your Income by earning Cash for your Time and Skills.',
title: "Get Paid",
description:
"Start Boosting your Income by earning Cash for your Time and Skills.",
},
];
return (
<section className={`appie-service-area pt-90 pb-50 ${className}`} id="service">
<section
className={`appie-service-area pt-90 pb-50 ${className}`}
id="service"
>
<div className="container">
<div className="row justify-content-center">
<div className="col-lg-8">
<div className="appie-section-title text-center">
<h3 className="appie-title">
{serviceTitle}
</h3>
<h3 className="appie-title">{serviceTitle}</h3>
</div>
</div>
</div>
@@ -70,4 +78,4 @@ function ServicesHomeOne({ className }) {
);
}
export default ServicesHomeOne;
export default ServicesHomeOne;
+33 -11
View File
@@ -1,6 +1,6 @@
import React from 'react';
import thumb from '../../assets/images/PerformingTaskNew.png';
import getConfig from './../../Config/config'
import React from "react";
import thumb from "../../assets/images/PerformingTaskNew.png";
import getConfig from "./../../Config/config";
function TrafficHomeOne() {
var site = getConfig()[0];
@@ -16,7 +16,12 @@ function TrafficHomeOne() {
<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={`appie-traffic-service features item-${
idx + 1
} mb-30`}
style={{ paddingRight: "45px" }}
>
<div className="icon">
<i className={icon} />
</div>
@@ -53,11 +58,28 @@ export default TrafficHomeOne;
const featuresContent = {
title: "on WrenchBoard.",
detail: "Performing task on WrenchBoard is easy. All you need is a free account.",
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." },
]
}
{
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.",
},
],
};