This commit is contained in:
Ebube
2023-08-31 06:23:59 +01:00
9 changed files with 177 additions and 105 deletions
+49
View File
@@ -113,6 +113,23 @@ p {
color: #505056;
margin: 0px;
}
.designed-title {
font-size: 24px;
font-weight: 700;
margin-bottom: 10px;
margin-top: 30px;
padding-bottom: 7px;
text-align: center;
text-shadow: 3px 4px 10px rgba(0,0,0,.3);
}
.designed-description {
font-size: 20px;
line-height: 28px;
font-weight: 400;
color: #505056;
text-align: center;
}
.bg_cover {
background-position: center center;
@@ -3025,6 +3042,38 @@ p {
color: #9b2cfa;
}
/*===========================
6.On WrenchBoard Area css
===========================*/
.wrench-on-area {
position: relative;
overflow: hidden;
z-index: 15;
/* background-color: #fbf4fe; */
}
/* .wrench-on-area .traffic-thumb {
position: absolute;
right: 0;
top: 50%;
transform: translateY(-50%);
width: 42%;
} */
/* @media (max-width: 767px) {
.wrench-on-area .traffic-thumb {
display: none;
}
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
.wrench-on-area .traffic-thumb {
display: none;
}
} */
.withFadeEdge{
border-radius: 10px 10px 10px 10px;
/* box-shadow: inset 0 0 15px 25px white; */
box-shadow: 0 0 10px 20px #fff inset;
}
/*===========================
6.APPIE TRAFFICE css
===========================*/
Binary file not shown.

After

Width:  |  Height:  |  Size: 114 KiB

+96
View File
@@ -0,0 +1,96 @@
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 AboutTextComponent() {
return (
<>
<div className="container">
<div className="row">
<div className="row">
{servicesContent?.map(({ id, ...item }) => (
<div className="col-lg-4 col-md-6">
<ServiceItem index={id} {...item} />
</div>
))}
</div>
</div>
</div>
</>
);
}
export default AboutTextComponent;
const servicesContent = [
{
id: 1,
image: Design,
delay: 200,
title: "Carefully designed",
description:
"WrenchBoard focuses on your needs and desires. Your success is our priority, driving us to listen and adapt to your feedback. We're dedicated to enhancing our products for your convenience. It's all about you, not us.",
},
{
id: 2,
image: Approach,
delay: 400,
title: "Modern Approach",
description:
"Our commitment is delivering a top-tier solution for you. Our aim: an intuitive, user-friendly product that continually evolves. By focusing on you, we'll surpass expectations and make a real impact.",
},
{
id: 3,
image: Interactive,
delay: 600,
title: "User Interactive",
description:
"WrenchBoard keeps you engaged with diverse features. Email alerts guarantee you're always in the loop. Get updates your way: email, text, or push notifications . We've got you covered.",
},
{
id: 4,
image: Mobility,
delay: 200,
title: "Mobility Approach",
description:
"WrenchBoard's tools unite devices for seamless organization and productivity anywhere. Manage tasks, track responses, and stay connected effortlessly. Experience a true mobile lifestyle with WrenchBoard!",
},
{
id: 5,
image: Seamless,
delay: 400,
title: "Seamless Sync",
description:
"WrenchBoard simplifies cross-platform activity management. Our features sync seamlessly on desktop, tablet, and phone, ensuring organization and productivity. No more app hopping . WrenchBoard streamlines the process.",
},
{
id: 6,
image: Privacy,
delay: 600,
title: "Privacy",
description:
"Your privacy matters. WrenchBoard works without data sharing, ensuring your information stays secure. Manage tasks across platforms confidently, enjoying a unified experience that respects your privacy.",
},
];
+1 -2
View File
@@ -17,8 +17,7 @@ function HeroAbout() {
<div className="col-12">
<div className="appie-about-page-content">
<h3 className="title">
Empower Young Talent to Earn and Learn Financial
Literacy
We Empower Reward for Achievements
</h3>
<p>
WrenchBoard prioritizes safety above all. Parents can
+5 -90
View File
@@ -1,28 +1,5 @@
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>
);
}
import React from 'react';
import AboutTextComponent from '../AboutText/AboutText';
function ServicesAbout() {
return (
@@ -32,18 +9,11 @@ function ServicesAbout() {
<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>
<h3 className="appie-title">Were driven by your values</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>
</div>
</section>
</>
@@ -51,58 +21,3 @@ function ServicesAbout() {
}
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 focuses on your needs and desires. Your success is our priority, driving us to listen and adapt to your feedback. We're dedicated to enhancing our products for your convenience. It's all about you, not us.",
},
{
id: 2,
image: Approach,
delay: 400,
title: "Modern Approach",
description:
"Our commitment is delivering a top-tier solution for you. Our aim: an intuitive, user-friendly product that continually evolves. By focusing on you, we'll surpass expectations and make a real impact.",
},
{
id: 3,
image: Interactive,
delay: 600,
title: "User Interactive",
description:
"WrenchBoard keeps you engaged with diverse features. Email alerts guarantee you're always in the loop. Get updates your way: email, text, or push notifications . We've got you covered.",
},
{
id: 4,
image: Mobility,
delay: 200,
title: "Mobility Approach",
description:
"WrenchBoard's tools unite devices for seamless organization and productivity anywhere. Manage tasks, track responses, and stay connected effortlessly. Experience a true mobile lifestyle with WrenchBoard!",
},
{
id: 5,
image: Seamless,
delay: 400,
title: "Seamless Sync",
description:
"WrenchBoard simplifies cross-platform activity management. Our features sync seamlessly on desktop, tablet, and phone, ensuring organization and productivity. No more app hopping . WrenchBoard streamlines the process.",
},
{
id: 6,
image: Privacy,
delay: 600,
title: "Privacy",
description:
"Your privacy matters. WrenchBoard works without data sharing, ensuring your information stays secure. Manage tasks across platforms confidently, enjoying a unified experience that respects your privacy.",
},
],
};
+2
View File
@@ -10,6 +10,7 @@ import HeroAbout from './HeroAbout';
import ServicesAbout from './ServicesAbout';
import TeamAbout from './TeamAbout';
import StickyHeaderNav from '../StickyHeader/StickyHeaderNav';
import AboutTextComponent from '../AboutText/AboutText';
function AboutUs() {
const [drawer, drawerAction] = useToggle(false);
@@ -23,6 +24,7 @@ function AboutUs() {
{/* <TeamAbout />*/}
{/* <SponserHomeTwo />
<SignupHomeEight />*/}
<AboutTextComponent/>
<FooterHomeOne className="appie-footer-about-area" />
<BackToTop />
</>
+1 -1
View File
@@ -20,7 +20,7 @@ function FooterHomeOne({ className }) {
</a>
</div>
<p>
{`It is simple. You can do something that somebody is ready to pay you for. WrenchBoard is the platform to connect you with earning opportunities. `}
{`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. `}
</p>
<a href="/service">
Read More <i className="fal fa-arrow-right" />
+2 -5
View File
@@ -22,7 +22,7 @@ function ServiceItem({ icon, title, description, index }) {
}
function ServicesHomeOne({ className }) {
const serviceTitle = "";
const serviceTitle = "Set Goals and Rewards to Inspire";
const serviceItems = [
{
icon: IconOne,
@@ -49,10 +49,7 @@ function ServicesHomeOne({ className }) {
];
return (
<section
className={`appie-service-area pt-90 pb-50 ${className}`}
id="service"
>
<section className={`appie-service-area pt-10 pb-50 ${className}`} id="service">
<div className="container">
<div className="row justify-content-center">
<div className="col-lg-8">
+21 -7
View File
@@ -1,11 +1,12 @@
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 thumb from '../../assets/images/PerformingTask2.jpg';
import getConfig from './../../Config/config'
function TrafficHomeOne() {
var site = getConfig()[0];
return (
<section className="appie-traffic-area pt-140 pb-180">
<section className="wrench-on-area pt-140 pb-180">
<div className="container">
<div className="row">
<div className="col-lg-7">
@@ -39,17 +40,30 @@ function TrafficHomeOne() {
</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'}}
/>
</div>
</div>
</div>
</div>
<div className="traffic-thumb ">
{/* <div className="traffic-thumb">
<img
className="wow animated fadeInRight"
className="withFadeEdge wow animated fadeInRight"
data-wow-duration="2000ms"
data-wow-delay="200ms"
src={thumb}
alt=""
/>
</div>
</div> */}
</section>
);
}