about us page

This commit is contained in:
CHIEFSOFT\ameye
2024-07-30 08:01:50 -04:00
parent 045fe85938
commit 496977981a
6 changed files with 327 additions and 0 deletions
+56
View File
@@ -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 HeaderAbout({ action }) {
useEffect(() => {
StickyMenu();
});
var site = getConfig()[0];
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="" width="175px" height="38px" loading='eager' />
</Link>
</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"></i> 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"></i>
</div>
</div>
</div>
</div>
</div>
</div>
</header>
</>
);
}
export default HeaderAbout;
+49
View File
@@ -0,0 +1,49 @@
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">Plan and reward accomplishment with ease.</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">
We Empower Reward for Achievements
</h3>
<p>
WrenchBoard is the platform for planning and rewarding accomplishments for individuals and parents. Parents can set up family accounts to oversee their children's activities and earnings.
</p>
<p>
At WrenchBoard, we believe in the power of motivating through rewards. As children complete projects, tasks, or chores and earn rewards, children also gain financial, time management, and valuable execution skills that enhance the joy of personal growth.
</p>
<p>
WrenchBoard is more than just a platform for rewards; it fosters holistic growth in children, and WrenchBoard prioritizes safety above all. We implement strict guidelines to ensure age-appropriate tasks and interactions, providing a worry-free space for kids and their guardians.
{/*WrenchBoard prioritizes safety above all. Parents can set up family accounts to oversee their children's activities and earnings. We implement strict guidelines to ensure age-appropriate tasks and interactions, providing a worry-free space for both kids and their guardians.*/}
{/*We believe that earning should go hand in hand with learning. As kids complete projects and earn, they also acquire essential life skills such as financial literacy, time management, and effective communication. WrenchBoard isn't just about making money; it's about fostering holistic growth.*/}
</p>
<p>Learn more at <a href={process.env.REACT_APP_DASH_URL}>www.WrenchBoard.com</a></p>
</div>
</div>
</div>
</div>
</section>
</div>
</div>
</div>
</>
);
}
export default HeroAbout;
+23
View File
@@ -0,0 +1,23 @@
import React from 'react';
import AboutTextComponent from '../AboutText/AboutText';
function ServicesAbout() {
return (
<>
<section className="appie-services-2-area pt-20" id="service">
<div className="container">
<div className="row align-items-end">
<div className="col-12 col-lg-8">
<div className="appie-section-title pb-0">
<h3 className="appie-title">Were driven by your values</h3>
{/* <p>{servicesContent.subTitle}</p> */}
</div>
</div>
</div>
</div>
</section>
</>
);
}
export default ServicesAbout;
+163
View File
@@ -0,0 +1,163 @@
import React from 'react';
import team1 from '../../assets/images/team-1.jpg';
import team2 from '../../assets/images/team-2.jpg';
import team3 from '../../assets/images/team-3.jpg';
import team4 from '../../assets/images/team-4.jpg';
function TeamAbout() {
return (
<>
<section className="appie-team-area appie-team-about-area pb-90">
<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>Different layouts and styles for team sections.</p>
</div>
</div>
</div>
<div className="row">
<div className="col-lg-3 col-md-6">
<div
className="appie-team-item appie-team-item-about mt-30 wow animated fadeInUp"
data-wow-duration="2000ms"
data-wow-delay="200ms"
>
<div className="thumb">
<img src={team1} alt="" />
<ul>
<li>
<a href="#">
<i className="fab fa-facebook-f"></i>
</a>
</li>
<li>
<a href="#">
<i className="fab fa-twitter"></i>
</a>
</li>
<li>
<a href="#">
<i className="fab fa-pinterest-p"></i>
</a>
</li>
</ul>
</div>
<div className="content text-left">
<h5 className="title">Benjamin Evalent</h5>
<span>CEO-Founder</span>
</div>
</div>
</div>
<div className="col-lg-3 col-md-6">
<div
className="appie-team-item appie-team-item-about mt-30 wow animated fadeInUp"
data-wow-duration="2000ms"
data-wow-delay="400ms"
>
<div className="thumb">
<img src={team2} alt="" />
<ul>
<li>
<a href="#">
<i className="fab fa-facebook-f"></i>
</a>
</li>
<li>
<a href="#">
<i className="fab fa-twitter"></i>
</a>
</li>
<li>
<a href="#">
<i className="fab fa-pinterest-p"></i>
</a>
</li>
</ul>
</div>
<div className="content text-left">
<h5 className="title">Benjamin Evalent</h5>
<span>CEO-Founder</span>
</div>
</div>
</div>
<div className="col-lg-3 col-md-6">
<div
className="appie-team-item appie-team-item-about mt-30 wow animated fadeInUp"
data-wow-duration="2000ms"
data-wow-delay="600ms"
>
<div className="thumb">
<img src={team3} alt="" />
<ul>
<li>
<a href="#">
<i className="fab fa-facebook-f"></i>
</a>
</li>
<li>
<a href="#">
<i className="fab fa-twitter"></i>
</a>
</li>
<li>
<a href="#">
<i className="fab fa-pinterest-p"></i>
</a>
</li>
</ul>
</div>
<div className="content text-left">
<h5 className="title">Benjamin Evalent</h5>
<span>CEO-Founder</span>
</div>
</div>
</div>
<div className="col-lg-3 col-md-6">
<div
className="appie-team-item appie-team-item-about mt-30 wow animated fadeInUp"
data-wow-duration="2000ms"
data-wow-delay="800ms"
>
<div className="thumb">
<img src={team4} alt="" />
<ul>
<li>
<a href="#">
<i className="fab fa-facebook-f"></i>
</a>
</li>
<li>
<a href="#">
<i className="fab fa-twitter"></i>
</a>
</li>
<li>
<a href="#">
<i className="fab fa-pinterest-p"></i>
</a>
</li>
</ul>
</div>
<div className="content text-left">
<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="https://www.wrenchboard.com/signup">
Get Started <i className="fal fa-arrow-right"></i>
</a>
</div>
</div>
</div>
</div>
</section>
</>
);
}
export default TeamAbout;
+34
View File
@@ -0,0 +1,34 @@
import React from 'react';
import useToggle from '../../Hooks/useToggle';
import BackToTop from '../BackToTop';
import SignupHomeEight from '../HomeEight/SignupHomeEight';
import FooterHomeOne from '../HomeOne/FooterHomeOne';
import SponserHomeTwo from '../HomeTwo/SponserHomeTwo';
import Drawer from '../Mobile/Drawer';
import HeaderAbout from './HeaderAbout';
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);
return (
<>
<Drawer drawer={drawer} action={drawerAction.toggle} />
{/* <StickyHeaderNav action={drawerAction.toggle} /> */}
<HeaderAbout drawer={drawer} action={drawerAction.toggle} />
<HeroAbout />
<ServicesAbout />
{/* <TeamAbout />*/}
{/* <SponserHomeTwo />
<SignupHomeEight />*/}
<AboutTextComponent/>
<FooterHomeOne className="appie-footer-about-area" />
<BackToTop />
</>
);
}
export default AboutUs;
+2
View File
@@ -1,5 +1,6 @@
import React from 'react'
import FooterHomeOne from '../components/FooterHomeOne';
import HeroAbout from './HeroAbout';
// must be a better way to centralize the style = TEMPORARY USE
import '../assets/css/bootstrap.min.css';
@@ -15,6 +16,7 @@ function page() {
return (
<>
<div>Abouut us Here</div>
<HeroAbout />
<FooterHomeOne className={undefined} />
</>