From 0c4be2733f9b5d6032de17c9df468e20ace9d2cc Mon Sep 17 00:00:00 2001 From: Ebube Date: Tue, 29 Aug 2023 11:20:07 +0100 Subject: [PATCH 1/2] . --- src/components/AboutUs/HeroAbout.js | 78 ++++---- src/components/AboutUs/ServicesAbout.js | 225 ++++++++++------------ src/components/HomeOne/HeroHomeOne.js | 145 +++++++------- src/components/HomeOne/ServicesHomeOne.js | 48 +++-- src/components/HomeOne/TrafficHomeTwo.js | 44 +++-- 5 files changed, 282 insertions(+), 258 deletions(-) diff --git a/src/components/AboutUs/HeroAbout.js b/src/components/AboutUs/HeroAbout.js index 88583b4..b500c71 100644 --- a/src/components/AboutUs/HeroAbout.js +++ b/src/components/AboutUs/HeroAbout.js @@ -1,41 +1,49 @@ -import React from 'react'; +import React from "react"; function HeroAbout() { - return ( - <> -
-
-
-
-
-

Our team is here to support you.

-
-
-
-
+ return ( + <> +
+
+
+
+
+

Our team is here to support you.

+
-
-
-
- {/* col-lg-8 */} -
-
-

- Online Marketplace Platform to Get Paid. -

-

- 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 www.WrenchBoard.com -

- -
-
-
-
-
- - ); +
+
+
+
+
+
+ {/* col-lg-8 */} +
+
+

+ Online Marketplace Platform to Get Paid. +

+

+ 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{" "} + + www.WrenchBoard.com + +

+
+
+
+
+
+ + ); } export default HeroAbout; diff --git a/src/components/AboutUs/ServicesAbout.js b/src/components/AboutUs/ServicesAbout.js index fd49275..50ed88e 100644 --- a/src/components/AboutUs/ServicesAbout.js +++ b/src/components/AboutUs/ServicesAbout.js @@ -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 ( +
+
+ +
+

{props.title}

+

{props.description}

+
+ ); +} function ServicesAbout() { - return ( - <> -
-
-
-
-
-

We’re driven by your values

-

The app provides design and digital marketing.

-
-
-
-
-
-
-
- {/*
- -
*/} - -
-

Carefully designed

-

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.

-
-
-
-
-
- {/*
- -
*/} - -
-

Modern Approach

-

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.

-
-
-
-
-
- {/*
- -
*/} - -
-

User Interactive

-

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.

-
-
-
-
-
- {/*
- -
*/} - -
-

Mobility Approach

-

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!

-
-
-
-
-
- {/*
- -
*/} - -
-

Seamless Sync

-

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. .

-
-
-
-
-
- {/*
- -
*/} - -
-

Privacy

-

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.

-
-
-
-
-
- - ); + return ( + <> +
+
+
+
+
+

{servicesContent.heading}

+

{servicesContent.subTitle}

+
+
+
+
+ {servicesContent.list?.map(({ id, ...item }) => ( +
+ +
+ ))} +
+
+
+ + ); } export default ServicesAbout; + +const servicesContent = { + heading: "We’re 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.", + }, + ], +}; diff --git a/src/components/HomeOne/HeroHomeOne.js b/src/components/HomeOne/HeroHomeOne.js index 5c1bd79..6139482 100644 --- a/src/components/HomeOne/HeroHomeOne.js +++ b/src/components/HomeOne/HeroHomeOne.js @@ -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 ( - <> -
-
-
-
-
- {/*Welcome To WrenchBoard..*/} -

- Turn Chores into Exciting Challenges and Earn Rewards! -

-

- 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.

- -
-
-
-
-
- {/* WrenchBoard */} -
- -
-
-
- -
-
-
-
+ var site = getConfig()[0]; + return ( + <> +
+
+
+
+
+ {/*Welcome To WrenchBoard..*/} +

+ Turn Chores into Exciting Challenges and Earn{" "} + Rewards! +

+

+ 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.{" "} +

+ +
+
+
+
+
+ {/* WrenchBoard */} +
+ +
- -
- - ); +
+ +
+
+
+ + + + + ); } export default HeroHomeOne; diff --git a/src/components/HomeOne/ServicesHomeOne.js b/src/components/HomeOne/ServicesHomeOne.js index 8d1e1dc..ec8ddc6 100644 --- a/src/components/HomeOne/ServicesHomeOne.js +++ b/src/components/HomeOne/ServicesHomeOne.js @@ -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 ( -
+
{title}
@@ -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 ( -
+
-

- {serviceTitle} -

+

{serviceTitle}

@@ -70,4 +78,4 @@ function ServicesHomeOne({ className }) { ); } -export default ServicesHomeOne; \ No newline at end of file +export default ServicesHomeOne; diff --git a/src/components/HomeOne/TrafficHomeTwo.js b/src/components/HomeOne/TrafficHomeTwo.js index 86d4b8a..ace35e9 100644 --- a/src/components/HomeOne/TrafficHomeTwo.js +++ b/src/components/HomeOne/TrafficHomeTwo.js @@ -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() {
{featuresContent.list?.map(({ icon, header, paragraph }, idx) => (
-
+
@@ -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.", + }, + ], +}; From fd204159d7d635dc0469a4c1a67d987bd59053e0 Mon Sep 17 00:00:00 2001 From: Ebube Date: Fri, 1 Sep 2023 13:59:04 +0100 Subject: [PATCH 2/2] tilted div at home page --- src/assets/css/main.css | 27 ++++++- src/components/HomeOne/HeroHomeOne.js | 2 +- src/components/customSlider/CustomSlider.js | 81 ++++++++++++++++++++- 3 files changed, 105 insertions(+), 5 deletions(-) diff --git a/src/assets/css/main.css b/src/assets/css/main.css index 7166e26..ce23926 100755 --- a/src/assets/css/main.css +++ b/src/assets/css/main.css @@ -29,6 +29,16 @@ body { color: #505056; overflow-x: hidden; } + +body[data-theme="dark"] { + --logo: url("../images/wrenchboard-logo-text.png") no-repeat; +} + +body[data-theme="light"] { + --logo: url("../images/wrenchboard.png") no-repeat; +} + + /* ==========================================vue */ * { margin: 0; @@ -1452,10 +1462,21 @@ p { letter-spacing: 2px; text-shadow: 0px 4px 10px rgba(0,0,0,0.3); } -.appie-title .earn-rewards{ - border-radius: 7px; - background-color: rgb(245, 71, 71) !important; +/* .appie-title .earn-rewards{ */ + /* border-radius: 7px; + background-color: rgb(245, 71, 71) !important; */ /* text-shadow: 2px 2px 2px #fff; */ +/* } */ + +.earn-rewards::before { + background: #f54747!important; + border-radius: 7px; + content: ""; + height: 3.8rem; + position: absolute; + width: 17rem; + z-index: -1; + transform: translate(-10px, 5px) rotate(357deg); } @media only screen and (min-width: 992px) and (max-width: 1200px) { diff --git a/src/components/HomeOne/HeroHomeOne.js b/src/components/HomeOne/HeroHomeOne.js index 6139482..d6924d9 100644 --- a/src/components/HomeOne/HeroHomeOne.js +++ b/src/components/HomeOne/HeroHomeOne.js @@ -60,7 +60,7 @@ function HeroHomeOne() {
diff --git a/src/components/customSlider/CustomSlider.js b/src/components/customSlider/CustomSlider.js index 9d9033d..9796b26 100644 --- a/src/components/customSlider/CustomSlider.js +++ b/src/components/customSlider/CustomSlider.js @@ -96,4 +96,83 @@ function CustomSlider({images, speed, indicatorColor, indicatorClass}) { ) } -export default CustomSlider \ No newline at end of file +export default CustomSlider + +// import React, { useEffect, useState } from 'react'; + +// function CustomSlider({ images, speed, indicatorColor, indicatorClass }) { +// const [sliderCount, setSliderCount] = useState(0); + +// const sliderStart = (count) => { +// if (count + 1 && typeof count === 'number') { +// return setSliderCount(count); +// } +// if (sliderCount >= images.length - 1) { +// return setSliderCount(0); +// } +// setSliderCount((prev) => prev + 1); +// }; + +// useEffect(() => { +// const sliderInterval = setInterval(() => { +// sliderStart(); +// }, speed * 1000); +// return () => { +// clearInterval(sliderInterval); +// }; +// }, [sliderCount, speed]); + +// console.log("This is slider count", sliderCount) + +// return ( +//
+//
+// {images.map((image, index) => ( +// image +// ))} +//
+//
+// {images.map((image, index) => ( +//
sliderStart(index)} +// className={`custom_indicator ${indicatorClass}`} +// style={{ +// backgroundColor: sliderCount === index ? `${indicatorColor}` : '', +// width: '15px', +// height: '15px', +// borderRadius: '999px', +// border: `1px solid ${indicatorColor}`, +// cursor: 'pointer', +// }} +// >
+// ))} +//
+//
+// ); +// } + +// export default CustomSlider; +