services page

app/about-us/AboutText.js

@@ -1,4 +1,5 @@
 import React from "react";
+import Image from "next/image";
 
 import Design from "../assets/images/design.png";
 import Approach from "../assets/images/approach.png";
@@ -17,7 +18,7 @@ function ServiceItem(props) {
       style={{ cursor: "default" }}
     >
       <div className="icon d-flex justify-content-center align-items-center">
-        <img src={props.image} alt="icon" />
+        <Image width={'auto'} height={'auto'} src={props.image} alt="icon" />
       </div>
       <h4 className="title">{props.title}</h4>
       <p>{props.description}</p>

app/about-us/page.tsx

@@ -1,11 +1,10 @@
-"use client"
 import React from 'react'
-import useToggle from '../Hooks/useToggle';
+import HomeNav from '../components/navigation/HomeNav';
 import FooterHomeOne from '../components/FooterHomeOne';
 import HeroAbout from './HeroAbout';
 import ServicesAbout from './ServicesAbout';
 import AboutTextComponent from './AboutText';
-import HeaderAbout from './HeaderAbout';
+import BackToTop from '../components/BackToTop'
 
 // must be a better way to centralize the style = TEMPORARY USE 
 import '../assets/css/bootstrap.min.css';
@@ -18,16 +17,15 @@ import '../assets/css/style.css';
 
 
 function page() {
-    const [drawer, drawerAction] = useToggle(false);
 
   return (
     <> 
-    <div>Abouut us  Here</div>
-    {/* <HeaderAbout drawer={drawer} action={drawerAction.toggle} /> */}
+    <HomeNav />
     <HeroAbout />
     <ServicesAbout />
     <AboutTextComponent/>
     <FooterHomeOne className="appie-footer-about-area" />
+    <BackToTop className='' />
     </>
    
   )

app/assets/css/main.css

@@ -2269,7 +2269,7 @@ p {
 
 .appie-page-title-area {
   height: 250px;
-  background-image: url(../images/service-back.jpg);
+  background-image: url(/assets/images/service-back.jpg);
   background-size: cover;
   background-position: center;
   background-repeat: no-repeat;
@@ -2278,7 +2278,7 @@ p {
 }
 .appie-page-title-area.appie-page-service-title-area {
   height: 400px;
-  background-image: url(../images/service-back.jpg);
+  background-image: url(/assets/images/service-back.jpg);
 }
 @media only screen and (min-width: 768px) and (max-width: 991px) {
   .appie-page-title-area.appie-page-service-title-area {
@@ -4420,7 +4420,7 @@ p {
   right: 0;
   height: 100%;
   width: 50%;
-  background-image: url(../images/faq-play-bg.png);
+  background-image: url(/assets/images/faq-play-bg.png);
   background-position: center;
   background-repeat: no-repeat;
   background-size: cover;
@@ -4432,7 +4432,7 @@ p {
   right: 0;
   height: 750px;
   width: 50%;
-  background-image: url(../images/mission-bg.png);
+  background-image: url(/assets/images/mission-bg.png);
   background-position: center;
   background-repeat: no-repeat;
   background-size: cover;
@@ -6642,7 +6642,7 @@ blockquote cite {
   opacity: 2.9;
 }
 .appie-about-page-content a {
-  color: red;
+  color: red !important;
   border: 2px solid #fff;
   border-radius: 10px;
   padding: 0px 10px;
@@ -6654,7 +6654,7 @@ blockquote cite {
 }
 .appie-about-page-content a:hover {
   background: #fff;
-  color: #2b70fa;
+  color: #2b70fa !important;
 }
 .appie-about-page-content::before {
   position: absolute;
@@ -6663,7 +6663,7 @@ blockquote cite {
   top: -710px;
   height: 645px;
   width: 80vw;
-  background-image: url(../images/about-us-main.jpg);
+  background-image: url(/assets/images/about-us-main.jpg);
   background-size: cover;
   background-position: center;
   background-repeat: no-repeat;

app/components/BackToTop.js

@@ -0,0 +1,20 @@
+"use client"
+import React, { useEffect } from 'react';
+import TopToBottom from '../lib/TopToBottom';
+
+function BackToTop({ className }) {
+    useEffect(() => {
+        TopToBottom('.back-to-top');
+    });
+    return (
+        <>
+            <div className={`back-to-top ${className}`}>
+                <a href="#">
+                    <i className="fal fa-arrow-up" />
+                </a>
+            </div>
+        </>
+    );
+}
+
+export default BackToTop;

app/components/HomeOne.js

@@ -1,5 +1,4 @@
 import React from 'react';
-// import BackToTop from '../BackToTop';
 import HomeNav from './navigation/HomeNav'
 import BlogHomeOne from './BlogHomeOne';
 // import FeaturesHomeOne from './FeaturesHomeOne';
@@ -11,6 +10,7 @@ import TrafficHomeTwo from './TrafficHomeTwo';
 //import FeaturedScreen from './FeaturedScreen'; 
 import AfterHero from './AfterHero';
 import NextAfterHero from './NextAfterHero';
+import BackToTop from './BackToTop';
 
 
 
@@ -28,6 +28,7 @@ function HomeOne() {
            <TrafficHomeTwo />
            <BlogHomeOne />
            <FooterHomeOne />
+           <BackToTop className='' />
         </>
     );
 }

app/components/News/HeroNews.js

@@ -1,5 +1,4 @@
 import React from 'react';
-import { Link } from 'react-router-dom';
 
 function HeroNews({ title, breadcrumb }) {
     return (
@@ -14,7 +13,7 @@ function HeroNews({ title, breadcrumb }) {
                                     <ol className="breadcrumb">
                                         {breadcrumb.map((value) => (
                                             <li key={Math.random()} className="breadcrumb-item">
-                                                <Link to={value.link}>{value.title}</Link>
+                                                <a href={value.link}>{value.title}</a>
                                             </li>
                                         ))}
                                     </ol>

app/components/PopupVideo.js

@@ -0,0 +1,42 @@
+import React from 'react';
+
+function PopupVideo({ videoSrc, handler }) {
+    /* 
+     //www.youtube.com/embed/EE7NqzhMDms?autoplay=1
+    */
+    return (
+        <div>
+            <div onClick={handler} className="mfp-bg mfp-ready"></div>
+            <div
+                className="mfp-wrap mfp-close-btn-in mfp-auto-cursor mfp-ready"
+                tabIndex="-1"
+                style={{ overflow: ' hidden auto' }}
+            >
+                <div className="mfp-container mfp-s-ready mfp-iframe-holder">
+                    <div className="mfp-content">
+                        <div className="mfp-iframe-scaler">
+                            <button
+                                onClick={handler}
+                                title="Close (Esc)"
+                                type="button"
+                                className="mfp-close"
+                            >
+                                ×
+                            </button>
+                            <iframe
+                                title="video"
+                                className="mfp-iframe"
+                                src={videoSrc}
+                                frameBorder="0"
+                                allowFullScreen=""
+                            />
+                        </div>
+                    </div>
+                    <div className="mfp-preloader">Loading...</div>
+                </div>
+            </div>
+        </div>
+    );
+}
+
+export default PopupVideo;

app/components/navigation/ServiceNav.js

@@ -0,0 +1,20 @@
+"use client"
+import React, {useEffect} from 'react'
+import useToggle from '../../Hooks/useToggle'
+import Drawer from '../../Mobile/Drawer'
+import Services from './Services'
+import StickyMenu from '../../lib/StickyMenu';
+ 
+
+export default function ServiceNav() {
+    const [drawer, drawerAction] = useToggle(false);
+    useEffect(() => {
+      StickyMenu();
+  });
+  return (
+    <>
+        <Drawer drawer={drawer} action={drawerAction.toggle} />
+        <Services action={drawerAction.toggle} />
+    </>
+  )
+}

app/components/navigation/Services.js

@@ -0,0 +1,50 @@
+import React from 'react';
+import logo from '../../assets/images/wrenchboard-logo-text.png';
+import Navigation from './Navigation';
+import Image from 'next/image';
+
+function Services({ action }) {
+
+    return (
+        <>
+            <header className="appie-header-area appie-header-page-area appie-sticky">
+                <div className="container">
+                    <div className="header-nav-box header-nav-box-3 header-nav-box-inner-page">
+                        <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="wrench-logo-box">
+                                    <a href="/">
+                                        <Image src={logo} alt="WrenchBoard" loading='eager' width="175" height="38" />
+                                    </a>
+                                </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 Services;

app/service/MissionStatement.js

@@ -0,0 +1,111 @@
+
+"use client"
+import React, { useState } from 'react';
+import PopupVideo from '../components/PopupVideo'
+
+
+function MissionStatement() {
+    const [showQuestion, setQuestion] = useState(1);
+    const [showVideo, setVideoValue] = useState(false);
+    const openQuestion = (e, value) => {
+        e.preventDefault();
+        setQuestion(value);
+    };
+
+    const ourMissions = [
+        {
+            id: 1,
+            title: "Rewards Family and Personal Goals",
+            content: "We will be the best platform for you to set a rewardable goal for you, your family, and others",
+        },
+        {
+            id: 2,
+            title: "Expand Earning Opportunities",
+            content: "We will always present opportunities equally",
+        },
+        {
+            id: 3,
+            title: "Exhibit  your Capabilities",
+            content: "We will let your ability shine to opportunities",
+        },
+        {
+            id: 4,
+            title: "Get your work done",
+            content: "For other tasks you need to get done, we will be there for smooth engagement",
+        }
+    ];
+
+    const handleShowVideo = (e) => {
+        e.preventDefault();
+        setVideoValue(!showVideo);
+    };
+    return (
+        <>
+            {showVideo && (
+                <PopupVideo
+                    videoSrc="//www.youtube.com/embed/EE7NqzhMDms?autoplay=1"
+                    handler={(e) => handleShowVideo(e)}
+                />
+            )}
+            <div className="appie-faq-8-area pt-100 pb-100" id="counter">
+                <div className="container">
+                    <div className="row">
+                        <div className="col-lg-5">
+                            <div className="appie-section-title">
+                                <h3 className="appie-title">Our Mission.</h3>
+                                <p>
+                                    Our mission at WrenchBoard is to empower individuals, families and communities through :
+                                </p>
+                            </div>
+                            <div
+                                className="faq-accordion wow fadeInRight mt-30"
+                                data-wow-duration="1500ms"
+                            >
+                                <div
+                                    className="accrodion-grp wow fadeIn faq-accrodion"
+                                    data-wow-duration="1500ms"
+                                    data-grp-name="faq-accrodion"
+                                >
+                                    {
+                                         ourMissions.map((item) => (
+                                                <div
+                                                    className={`accrodion ${
+                                                        showQuestion === item.id ? 'active' : ''
+                                                    }`}
+                                                    onClick={(e) => openQuestion(e, item.id)}
+                                                >
+                                                    <div className="accrodion-inner">
+                                                        <div className="accrodion-title">
+                                                            <h4>{item.title}</h4>
+                                                        </div>
+                                                        <div
+                                                            className="accrodion-content"
+                                                            style={{
+                                                                display: showQuestion === item.id ? 'block' : 'none',
+                                                            }}
+                                                        >
+                                                            <div className="inner">
+                                                                <p>
+                                                                    {item.content}
+                                                                </p>
+                                                            </div>
+                                                        </div>
+                                                    </div>
+                                                </div>
+
+                                            ))
+                                    }
+
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                <div className="mission-side-box"></div>
+            </div>
+        </>
+    );
+}
+
+export default MissionStatement;
+

app/service/ServiceSideMenu.js

@@ -0,0 +1,83 @@
+import React from 'react';
+import Image from 'next/image';
+import AboutIcon from '../assets/images/icon/about-us.ico'
+import HomeIcon from '../assets/images/icon/home-icon.ico'
+import UseCaseIcon from '../assets/images/icon/use-case.ico'
+import PrivacyIcon from '../assets/images/icon/privacy-policy.ico'
+import TermsIcon from '../assets/images/icon/term-and-conditions.ico'
+
+
+function ServiceSideMenu() {
+
+    return (
+        <>
+            <div className="service-details-sidebar mr-50">
+
+                <div className="service-download-widget">
+                    <a href="/">
+                        {/* <i className="fal fa-download"></i> */}
+                        <Image src={HomeIcon} alt='sidenav-icon' width={'auto'} height={'auto'} />
+                        <span>Home</span>
+                    </a>
+                </div>
+
+                <div className="service-download-widget">
+                    <a href="/about-us">
+                        {/* <i className="fal fa-download"></i> */}
+                        <Image src={AboutIcon} alt='sidenav-icon' width={'auto'} height={'auto'} />
+                        <span>About us</span>
+                    </a>
+                </div>
+                <div className="service-download-widget">
+                    <a href="/use-cases">
+                        {/* <i className="fal fa-file-pdf"></i> */}
+                        <Image src={UseCaseIcon} alt='sidenav-icon' width={'auto'} height={'auto'} />
+                        <span>Use Cases</span>
+                    </a>
+                </div>
+
+
+
+                <div className="service-download-widget">
+                    <a href="/privacy">
+                        {/* <i className="fal fa-download"></i> */}
+                        <Image src={PrivacyIcon} alt='sidenav-icon' width={'auto'} height={'auto'} />
+                        <span>Privacy Policy</span>
+                    </a>
+                </div>
+                <div className="service-download-widget">
+                    <a href="/terms">
+                        {/* <i className="fal fa-file-pdf"></i> */}
+                        <Image src={TermsIcon} alt='sidenav-icon' width={'auto'} height={'auto'} />
+                        <span>Terms of use</span>
+                    </a>
+                </div>
+
+                <div className="service-category-widget">
+                    <ul>
+                        <li>
+                            Get WrenchBoard App
+                        </li>
+
+                        <li>
+                            <a href={process.env.REACT_APP_APPLE_APP}>
+                                <i className="fab fa-apple" /> Download for iOS
+                            </a>
+                        </li>
+                        <li>
+                            <a className="item-2" href={process.env.REACT_APP_ANDROID_APP}>
+                                <i className="fab fa-google-play" /> Download for
+                                Android
+                            </a>
+                        </li>
+                    </ul>
+                </div>
+
+            </div>
+
+
+        </>
+    );
+}
+
+export default ServiceSideMenu;

app/service/ServiceTopart.js

@@ -0,0 +1,50 @@
+import React from 'react';
+import ServiceSideMenu from './ServiceSideMenu';
+
+function ServiceTopart() {
+
+    return (
+        <>
+            <section className="appie-service-details-area pt-100 pb-100">
+                <div className="container">
+                    <div className="row">
+                        <div className="col-lg-4">
+                            <ServiceSideMenu />
+                        </div>
+                        <div className="col-lg-8">
+                            <div className="service-details-content">
+                                <div className="content">
+                                    <h3 className="title">What we do.</h3>
+                                    <p>
+                                    WrenchBoard is where you set goals and reward accomplishments or find somebody to perform a needed task.
+                                    </p>
+                                    {/*<hr />*/}
+                                    {/*<p>*/}
+                                    {/*    /!*An open-platform for you to build your self - image, skills set, branded personality,*!/*/}
+                                    {/*    /!*carve a network and ofcourse an income flow with ease and satisfaction of self - actualization and accomplishments.*!/*/}
+                                    {/*</p>*/}
+                                    {/*<p>*/}
+                                    {/*    A major task done by skilled professional with personal touch and completed within the twinkling of an eye in specified time-frame.*/}
+                                    {/*</p>*/}
+                                    <hr />
+                                    <p>
+                                    WrenchBoard is the marketplace that allows users to raise their hands and gives you the power to select who you want to perform your task.
+                                    </p>
+                                    <hr />
+                                    <p>
+                                    Our commitment to quality ensures that WrenchBoard.com remains a trusted platform for reliable transaction and redspectable partnerships.
+                                    </p>
+                                    <hr />
+                                    Do more at < a href ={process.env.REACT_APP_DASH_URL_LOGIN} >WrenchBoard</a>
+
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </section>
+        </>
+    );
+}
+
+export default ServiceTopart;

app/service/page.tsx

@@ -1,5 +1,10 @@
 import React from 'react'
 import FooterHomeOne from '../components/FooterHomeOne';
+import ServiceNav from '../components/navigation/ServiceNav'
+import HeroNews from '../components/News/HeroNews'
+import ServiceTopart from './ServiceTopart'
+import MissionStatement from './MissionStatement'
+import BackToTop from '../components/BackToTop'
 
 // must be a better way to centralize the style = TEMPORARY USE 
 import '../assets/css/bootstrap.min.css';
@@ -14,8 +19,18 @@ import '../assets/css/style.css';
 function page() {
   return (
     <> 
-    <div>Service Here</div>
+    <ServiceNav />
+    <HeroNews
+        title="Services"
+        breadcrumb={[
+            { link: '/', title: 'Home' },
+            { link: '/service', title: 'Service' },
+        ]}
+    />
+    <ServiceTopart />
+    <MissionStatement />
     <FooterHomeOne className={undefined} />
+    <BackToTop className='' />
     </>
    
   )

app/terms/page.tsx

@@ -1,6 +1,6 @@
 import React from 'react'
 import FooterHomeOne from '../components/FooterHomeOne';
-
+import HomeNav from '../components/navigation/HomeNav'
 // must be a better way to centralize the style = TEMPORARY USE 
 import '../assets/css/bootstrap.min.css';
 import '../assets/css/custom-animated.css';
@@ -13,7 +13,8 @@ import '../assets/css/style.css';
 
 function page() {
   return (
-    <> 
+    <>
+    <HomeNav />
     <div>Terms Here</div>
     <FooterHomeOne className={undefined} />
     </>