Compare commits

...

7 Commits

Author SHA1 Message Date
victorAnumudu 9e72f3d893 added home nav 2024-07-30 19:07:27 +01:00
CHIEFSOFT\ameye 137c309765 fix path 2024-07-30 12:02:41 -04:00
CHIEFSOFT\ameye a51499bf92 blog details 2024-07-30 11:55:47 -04:00
CHIEFSOFT\ameye 8b9dc3f045 axios added 2024-07-30 11:38:21 -04:00
ameye 5fa4f178fc Merge branch 'home-blog-section' of WrenchBoard/WrenchBoardMainSite2025 into master 2024-07-30 15:03:30 +00:00
CHIEFSOFT\ameye 1cab67cafb about text 2024-07-30 08:22:08 -04:00
CHIEFSOFT\ameye 496977981a about us page 2024-07-30 08:01:50 -04:00
14 changed files with 584 additions and 35 deletions
+5 -18
View File
@@ -1,23 +1,10 @@
"use client"
import React, { useState } from 'react';
import { Link } from 'react-router-dom';
import logo from '../assets/images/wrenchboard-logo-text.png';
import getConfig from "../../Config/config"; // './../../Config/config'
import Image from 'next/image';
function Drawer({ drawer, action }) {
var site = getConfig()[0];
const [itemSize, setSize] = useState('0px');
const [item, setItem] = useState('home');
const handler = (e, value) => {
e.preventDefault();
const getItems = document.querySelectorAll(`#${value} li`).length;
if (getItems > 0) {
setSize(`${43 * getItems}px`);
setItem(value);
}
};
return (
<>
<div
@@ -35,7 +22,7 @@ function Drawer({ drawer, action }) {
</a>
</div>
<div className="offcanvas-brand text-center mb-40">
<img src={logo} alt="WrechBoard" />
<Image width='260' height='57' src={logo} alt="WrechBoard" />
</div>
<div id="menu" className="text-left ">
<ul className="offcanvas_main_menu">
@@ -53,10 +40,10 @@ function Drawer({ drawer, action }) {
id="service"
className="menu-item-has-children active"
>
<Link to="/service">Service</Link>
<a href="/service">Service</a>
</li>
<li>
<Link to="/about-us">About Us</Link>
<a href="/about-us">About Us</a>
</li>
@@ -66,7 +53,7 @@ function Drawer({ drawer, action }) {
id="contact"
className="menu-item-has-children active"
>
<Link to="/contact">Contact</Link>
<a href="/contact">Contact</a>
</li>
</ul>
</div>
+157
View File
@@ -0,0 +1,157 @@
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 Security from "../assets/images/security.png";
function ServiceItem(props) {
return (
<div
className={`mt-0 p-4 appie-single-service-2 appie-single-service-about item-${props.index} 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} alt="icon" />
</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-3 col-md-6">
<ServiceItem index={id} {...item} />
</div>
))}
</div>
</div>
</div>
</>
);
}
export default AboutTextComponent;
const servicesContent = [
{
id: 1,
image: Design,
delay: 200,
title: "Engagement",
description:
"We encourage healthy online activities for individuals, groups, or households.",
},
{
id: 2,
image: Mobility,
delay: 400,
title: "Opportunity",
description:
"We prioritize developing a strong opportunity mindset for our users and teamwork.",
},
{
id: 3,
image: Interactive,
delay: 600,
title: "Modern",
description:
"We endeavor to improve our features to catch up to how we can best serve our users.",
},
{
id: 4,
image: Security,
delay: 600,
title: "Security & Safety",
description:
"Healthy communication and privacy are the foundation of all features now and in the future.",
},
// {
// id: 4,
// image: Mobility,
// delay: 200,
// title: "Social Media Management",
// description:
// "Teach youngsters the art of handling social media profiles for small enterprises, cultivating essential marketing and communication abilities while also generating income. Manage tasks, track responses, and stay connected effortlessly. Experience a true mobile lifestyle with WrenchBoard!",
// },
// {
// id: 5,
// image: Seamless,
// delay: 400,
// title: "Inspiring Future Leaders",
// description:
// "By offering a platform for kids to earn, learn, and contribute, WrenchBoard is nurturing the next generation of entrepreneurs, creators, and leaders. We're sowing the seeds of ambition and self-confidence, preparing them for a brighter future.",
// },
// {
// 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.",
// },
];
const servicesContentBAK = [
{
id: 1,
image: Design,
delay: 200,
title: "Unlocking Potential",
description:
"At WrenchBoard, we believe age should never limit one's ability to pursue their passions and generate income. Our platform offers a variety of categories for kids to explore and turn into profitable endeavors, fostering financial awareness and unlocking their potential for a brighter future.",
},
{
id: 2,
image: Approach,
delay: 400,
title: "Growing Money Mindset",
description:
"We prioritize developing a strong money mindset in Kids. WrenchBoard offers a safe and supportive space for kids to explore their passions, learn new skills, and earn money. By instilling the value of hard work, saving, and investing, we aim to empower the next generation to make informed financial decisions and reach their goals.",
},
{
id: 3,
image: Interactive,
delay: 600,
title: "Realtime Notifications",
description:
"Stay up-to-date with WrenchBoard! Our platform keeps you in the loop with convenient alerts and notifications. Choose your preferred method of receiving updates - email, text, or push notifications - and never miss a beat.",
},
{
id: 4,
image: Mobility,
delay: 200,
title: "Social Media Management",
description:
"Teach youngsters the art of handling social media profiles for small enterprises, cultivating essential marketing and communication abilities while also generating income. Manage tasks, track responses, and stay connected effortlessly. Experience a true mobile lifestyle with WrenchBoard!",
},
{
id: 5,
image: Seamless,
delay: 400,
title: "Inspiring Future Leaders",
description:
"By offering a platform for kids to earn, learn, and contribute, WrenchBoard is nurturing the next generation of entrepreneurs, creators, and leaders. We're sowing the seeds of ambition and self-confidence, preparing them for a brighter future.",
},
{
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.",
},
];
+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';
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;
+13 -1
View File
@@ -1,5 +1,11 @@
"use client"
import React from 'react'
import useToggle from '../Hooks/useToggle';
import FooterHomeOne from '../components/FooterHomeOne';
import HeroAbout from './HeroAbout';
import ServicesAbout from './ServicesAbout';
import AboutTextComponent from './AboutText';
import HeaderAbout from './HeaderAbout';
// must be a better way to centralize the style = TEMPORARY USE
import '../assets/css/bootstrap.min.css';
@@ -12,10 +18,16 @@ import '../assets/css/style.css';
function page() {
const [drawer, drawerAction] = useToggle(false);
return (
<>
<div>Abouut us Here</div>
<FooterHomeOne className={undefined} />
{/* <HeaderAbout drawer={drawer} action={drawerAction.toggle} /> */}
<HeroAbout />
<ServicesAbout />
<AboutTextComponent/>
<FooterHomeOne className="appie-footer-about-area" />
</>
)
+24
View File
@@ -0,0 +1,24 @@
import React from 'react'
import FooterHomeOne from '../../components/FooterHomeOne';
// must be a better way to centralize the style = TEMPORARY USE
import '../../assets/css/bootstrap.min.css';
import '../../assets/css/custom-animated.css';
import '../../assets/css/default.css';
import '../../assets/css/font-awesome.min.css';
import '../../assets/css/magnific-popup.css';
import '../../assets/css/main.css';
import '../../assets/css/style.css';
function page() {
return (
<>
<div>Bog Detail Here</div>
<FooterHomeOne className={undefined} />
</>
)
}
export default page
+2 -7
View File
@@ -1,12 +1,10 @@
import React from 'react';
import useToggle from '../Hooks/useToggle';
// import BackToTop from '../BackToTop';
import Drawer from '../Mobile/Drawer';
import HomeNav from './navigation/HomeNav'
import BlogHomeOne from './BlogHomeOne';
// import FeaturesHomeOne from './FeaturesHomeOne';
import FooterHomeOne from './FooterHomeOne';
import HeroHomeOne from './HeroHomeOne';
// import HomeOneHeader from './HomeOneHeader';
import ServicesHomeOne from './ServicesHomeOne';
import TrafficHomeOne from './TrafficHomeOne';
import TrafficHomeTwo from './TrafficHomeTwo';
@@ -19,12 +17,9 @@ import NextAfterHero from './NextAfterHero';
function HomeOne() {
// needed const [drawer, drawerAction] = useToggle(false);
return (
<>
{/* <Drawer drawer={drawer} action={drawerAction.toggle} /> */}
<div className='text-center'>THIS IS HOME </div>
<HomeNav />
<HeroHomeOne />
<AfterHero />
<NextAfterHero />
+8 -9
View File
@@ -1,12 +1,11 @@
"use client"
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';
import logo from '../assets/images/wrenchboard-logo-text.png';
import StickyMenu from '../lib/StickyMenu';
import Navigation from './navigation/Navigation';
import Image from 'next/image';
function HomeOneHeader({ action, showLogoOnly = false }) {
var site = getConfig()[0];
useEffect(() => {
StickyMenu();
}, []);
@@ -17,9 +16,9 @@ function HomeOneHeader({ action, showLogoOnly = false }) {
<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="WrenchBoard" loading='eager' width="175px" height="38px" />
</Link>
<a href="/">
<Image src={logo} alt="WrenchBoard" loading='eager' width="175" height="38" />
</a>
</div>
</div>
+15
View File
@@ -0,0 +1,15 @@
"use client"
import React from 'react'
import useToggle from '../../Hooks/useToggle'
import HomeOneHeader from '../HomeOneHeader'
import Drawer from '../../Mobile/Drawer'
export default function HomeNav() {
const [drawer, drawerAction] = useToggle(false);
return (
<>
<Drawer drawer={drawer} action={drawerAction.toggle} />
<HomeOneHeader action={drawerAction.toggle} />
</>
)
}
+34
View File
@@ -0,0 +1,34 @@
import React from 'react';
function Navigation() {
return (
<>
<ul>
<li>
<a href="/">Home</a>
</li>
<li>
<a href="/about-us">About</a>
</li>
{/* <li>
<a href="#">
Resources <i className="fal fa-angle-down" />
</a>
<ul className="sub-menu">
<li>
<Link to="/about-us">About</Link>
</li>
<li>
<Link to="/blog">Blog</Link>
</li>
<li>
<Link to="/faq">FAQs</Link>
</li>
</ul>
</li> */}
</ul>
</>
);
}
export default Navigation;
+1
View File
@@ -9,6 +9,7 @@
"lint": "next lint"
},
"dependencies": {
"axios": "^1.7.2",
"next": "14.2.5",
"react": "^18",
"react-dom": "^18",