added env files and favicon

.env

@@ -0,0 +1,22 @@
+ESLINT_NO_DEV_ERRORS=true
+
+NEXT_PUBLIC_AUX_ENDPOINT="https://apigate.lotus.g1.wrenchboard.com/en/wrench/api/v1"
+NEXT_PUBLIC_USERS_ENDPOINT="https://apigate.lotus.g1.wrenchboard.com/en/wrench/api/v1"
+
+NEXT_PUBLIC_SITE_NAME='WrenchBoard'
+NEXT_PUBLIC_DASH_URL='https://dev-users.wrenchboard.com'
+NEXT_PUBLIC_DASH_URL_LOGIN="https://dev-users.wrenchboard.com/login?cnt=us"
+NEXT_PUBLIC_DASH_URL_SIGNUP="https://dev-users.wrenchboard.com/signup?cnt=us"
+NEXT_PUBLIC_ANDROID_APP='https://play.google.com/store/apps/details?id=com.wrenchboard.users'
+NEXT_PUBLIC_APPLE_APP='https://itunes.apple.com/us/app/wrenchboard/id1435718367?ls=1&mt=8'
+NEXT_PUBLIC_FACEBOOK_LINK='https://www.facebook.com/wrenchboard'
+NEXT_PUBLIC_TWITTER_LINK='https://twitter.com/wrenchboard/'
+NEXT_PUBLIC_LINKEDIN_LINK="https://www.linkedin.com/company/wrenchboard/"
+NEXT_PUBLIC_SUPPORT_EMAIL='support@wrenchboard.com'
+NEXT_PUBLIC_SUPPORT_PHONE='404 855-7966'
+NEXT_PUBLIC_SUPPORT_PHONE_NG='(+420) 336 476 328'
+NEXT_PUBLIC_SUPPORT_US_ADDRESS='Cumberland Pkwy, Atlanta GA 30339'
+NEXT_PUBLIC_SUPPORT_NG_ADDRESS='Saka Tinubu Street, Victoria Island Lagos, Nigeria'
+
+#AGENT LINK
+NEXT_PUBLIC_AGENT_LINK='https://dev-agents.wrenchboard.com'

.env.development

@@ -0,0 +1,22 @@
+ESLINT_NO_DEV_ERRORS=true
+
+NEXT_PUBLIC_AUX_ENDPOINT="https://apigate.lotus.g1.wrenchboard.com/en/wrench/api/v1"
+NEXT_PUBLIC_USERS_ENDPOINT="https://apigate.lotus.g1.wrenchboard.com/en/wrench/api/v1"
+
+NEXT_PUBLIC_SITE_NAME='WrenchBoard'
+NEXT_PUBLIC_DASH_URL='https://dev-users.wrenchboard.com'
+NEXT_PUBLIC_DASH_URL_LOGIN="https://dev-users.wrenchboard.com/login?cnt=us"
+NEXT_PUBLIC_DASH_URL_SIGNUP="https://dev-users.wrenchboard.com/signup?cnt=us"
+NEXT_PUBLIC_ANDROID_APP='https://play.google.com/store/apps/details?id=com.wrenchboard.users'
+NEXT_PUBLIC_APPLE_APP='https://itunes.apple.com/us/app/wrenchboard/id1435718367?ls=1&mt=8'
+NEXT_PUBLIC_FACEBOOK_LINK='https://www.facebook.com/wrenchboard'
+NEXT_PUBLIC_TWITTER_LINK='https://twitter.com/wrenchboard/'
+NEXT_PUBLIC_LINKEDIN_LINK="https://www.linkedin.com/company/wrenchboard/"
+NEXT_PUBLIC_SUPPORT_EMAIL='support@wrenchboard.com'
+NEXT_PUBLIC_SUPPORT_PHONE='404 855-7966'
+NEXT_PUBLIC_SUPPORT_PHONE_NG='(+420) 336 476 328'
+NEXT_PUBLIC_SUPPORT_US_ADDRESS='Cumberland Pkwy, Atlanta GA 30339'
+NEXT_PUBLIC_SUPPORT_NG_ADDRESS='Saka Tinubu Street, Victoria Island Lagos, Nigeria'
+
+#AGENT LINK
+NEXT_PUBLIC_AGENT_LINK='https://dev-agents.wrenchboard.com'

.env.production

@@ -0,0 +1,22 @@
+ESLINT_NO_DEV_ERRORS=true
+
+NEXT_PUBLIC_AUX_ENDPOINT="https://apigate.lotus.g1.wrenchboard.com/en/wrench/api/v1"
+NEXT_PUBLIC_USERS_ENDPOINT="https://apigate.lotus.g1.wrenchboard.com/en/wrench/api/v1"
+
+NEXT_PUBLIC_SITE_NAME='WrenchBoard'
+NEXT_PUBLIC_DASH_URL='https://users.wrenchboard.com'
+NEXT_PUBLIC_DASH_URL_LOGIN="https://users.wrenchboard.com/login?cnt=us"
+NEXT_PUBLIC_DASH_URL_SIGNUP="https://users.wrenchboard.com/signup?cnt=us"
+NEXT_PUBLIC_ANDROID_APP='https://play.google.com/store/apps/details?id=com.wrenchboard.users'
+NEXT_PUBLIC_APPLE_APP='https://itunes.apple.com/us/app/wrenchboard/id1435718367?ls=1&mt=8'
+NEXT_PUBLIC_FACEBOOK_LINK='https://www.facebook.com/wrenchboard'
+NEXT_PUBLIC_TWITTER_LINK='https://twitter.com/wrenchboard/'
+NEXT_PUBLIC_LINKEDIN_LINK="https://www.linkedin.com/company/wrenchboard/"
+NEXT_PUBLIC_SUPPORT_EMAIL='support@wrenchboard.com'
+NEXT_PUBLIC_SUPPORT_PHONE='404 855-7966'
+NEXT_PUBLIC_SUPPORT_PHONE_NG='(+420) 336 476 328'
+NEXT_PUBLIC_SUPPORT_US_ADDRESS='Cumberland Pkwy, Atlanta GA 30339'
+NEXT_PUBLIC_SUPPORT_NG_ADDRESS='Saka Tinubu Street, Victoria Island Lagos, Nigeria'
+
+#AGENT LINK
+NEXT_PUBLIC_AGENT_LINK='https://agents.wrenchboard.com'

app/Mobile/Drawer.js

@@ -1,6 +1,7 @@
 import logo from '../assets/images/wrenchboard-logo-text.png';
 import getConfig from  "../../Config/config"; // './../../Config/config'
 import Image from 'next/image';
+import Link from 'next/link'
 
 
 function Drawer({ drawer, action }) {
@@ -32,7 +33,7 @@ function Drawer({ drawer, action }) {
                                             className="menu-item-has-children active"
                                         >
                                           
-                                            <a href="/">Home</a>
+                                            <Link href="/">Home</Link>
                                             
                                         </li>
                                         <li
@@ -40,10 +41,10 @@ function Drawer({ drawer, action }) {
                                             id="service"
                                             className="menu-item-has-children active"
                                         >
-                                            <a href="/service">Service</a>
+                                            <Link href="/service">Service</Link>
                                         </li>
                                         <li>
-                                                    <a href="/about-us">About Us</a>
+                                                    <Link href="/about-us">About Us</Link>
                                                 </li>
 
                                         
@@ -53,7 +54,7 @@ function Drawer({ drawer, action }) {
                                             id="contact"
                                             className="menu-item-has-children active"
                                         >
-                                            <a href="/contact">Contact</a>
+                                            <Link href="/contact">Contact</Link>
                                         </li>
                                     </ul>
                                 </div>

app/Services/BlogData.js

@@ -1,8 +1,7 @@
 import Axios from 'axios';
 
 async function BlogData() {
-    // let response = await Axios.post(`${process.env.REACT_APP_AUX_ENDPOINT}/blogdata`);
-    let response = await Axios.post(`${'https://apigate.lotus.g1.wrenchboard.com/en/wrench/api/v1'}/blogdata`);
+    let response = await Axios.post(`${process.env.NEXT_PUBLIC_AUX_ENDPOINT}/blogdata`);
     return await response;
 }
 

app/assets/css/font-awesome.min.css

@@ -5633,7 +5633,7 @@ readers do not read off random characters that represent icons */
   content: "\f099"; }
 
 .fa-x-twitter:before {
-  content: "\e61b"; }
+  content: "𝕏"; }
 
 .fa-twitter-square:before {
   content: "\f081"; }

app/assets/css/main.css

@@ -49,6 +49,10 @@ span,
 a {
   display: inline-block;
   transition: all linear 0.3s;
+  text-decoration: none;
+}
+a:hover {
+  text-decoration: none !important;
 }
 
 h1,
@@ -185,7 +189,7 @@ p {
 }
 
 .appie-section-title {
-  padding-bottom: 25px;
+  padding-bottom: 15px;
 }
 .appie-section-title .appie-title {
   font-size: 44px;
@@ -4420,7 +4424,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 +4436,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;
@@ -6729,7 +6733,7 @@ blockquote cite {
 }
 
 .appie-about-8-area {
-  /* background-image: url(../images/background-bg.jpg); */
+  background-image: url(/assets/images/background-bg.jpg);
   background-size: cover;
   background-position: center;
   background-repeat: no-repeat;

app/components/AfterHero.js

@@ -1,17 +1,17 @@
 import React from 'react';
 import thumb5 from '../assets/images/about-thumb-5.png';
 import cardImg from '../assets/images/home/card-home-01.png'
-import bg from '../assets/images/background-bg.jpg'
+// import bg from '../assets/images/background-bg.jpg'
 import Image from 'next/image';
 
 function AfterHero() {
     return (
         <>
-            <section className="appie-about-8-area pt-50 pb-70" style={{ backgroundImage: `url(${bg.src})`, backgroundSize: 'cover' }}>
+            <section className="appie-about-8-area pt-50 pb-70">
                 <div className="container">
                     <div className="row">
                         <div className="col-lg-12">
-                            <div className="appie-section-title mb-30">
+                            <div className="appie-section-title">
                                 <h3 className="appie-title">
                                     {/* We bring everything <br />
                                     that's required to build apps */}

app/components/FooterHomeOne.js

@@ -2,6 +2,7 @@ import React, { useMemo } from 'react';
 import Image from 'next/image';
 import logo from '../assets/images/wrenchboard-logo-text.png';
 import getConfig from '../../Config/config'; // './../../Config/config'
+import Link from 'next/link';
 
 function FooterHomeOne({ className }) {
     var site = useMemo(() => getConfig()[0], []);;
@@ -15,21 +16,21 @@ function FooterHomeOne({ className }) {
                         <div className="col-lg-4 col-md-6">
                             <div className="footer-about-widget">
                                 <div className="logo">
-                                    <a href="#">
+                                    <Link href="#">
                                         <Image
                                             src={logo}
                                             width={'175'}
                                             height={'38'}
                                             alt="" 
                                         />
-                                    </a>
+                                    </Link>
                                 </div>
                                 <p>
                                     {`It is simple. You can set goals, task, or anything that needs to be done and reward accomplishment. WrenchBoard is the platform to connect opportunities. `}
                                 </p>
-                                <a href="/service">
+                                <Link href="/service">
                                     Read More <i className="fal fa-arrow-right" />
-                                </a>
+                                </Link>
                                 <div className="social mt-30">
                                     <ul>
                                         <li>
@@ -38,9 +39,9 @@ function FooterHomeOne({ className }) {
                                             </a>
                                         </li>
                                         <li>
-                                            <a href={process.env.REACT_APP_TWITTER_LINK}>
+                                            <a href={process.env.NEXT_PUBLIC_TWITTER_LINK}>
                                                 {/* <i className="fab fa-twitter" /> */}
-                                                <i className="fab fa-x-twitter" />
+                                                <i className="fab fa-x-twitter"></i>
                                             </a>
                                         </li>
                                     </ul>
@@ -52,19 +53,19 @@ function FooterHomeOne({ className }) {
                                 <h4 className="title">Company</h4>
                                 <ul>
                                     <li>
-                                        <a href="/about-us">About Us</a>
+                                        <Link href="/about-us">About Us</Link>
                                     </li>
                                     <li>
-                                        <a href="/service">Our Services</a>
+                                        <Link href="/service">Our Services</Link>
                                     </li>
                                     <li>
-                                        <a href="/use-cases">Use Cases</a>
+                                        <Link href="/use-cases">Use Cases</Link>
                                     </li>
                                     <li className='d-none'>
-                                        <a target='_blank' href={process.env.REACT_APP_AGENT_LINK}>Agent</a>
+                                        <a target='_blank' href={process.env.NEXT_PUBLIC_AGENT_LINK}>Agent</a>
                                     </li>
                                     <li>
-                                        <a href="/blog">Blog</a>
+                                        <Link href="/blog">Blog</Link>
                                     </li>
                                    
                                 </ul>
@@ -75,19 +76,19 @@ function FooterHomeOne({ className }) {
                                 <h4 className="title">Support</h4>
                                 <ul>
                                     <li>
-                                        <a href="/contact">Contact</a>
+                                        <Link href="/contact">Contact</Link>
                                     </li>
                                     <li>
-                                        <a href="/faq">Faqs</a>
+                                        <Link href="/faq">Faqs</Link>
                                     </li>
                                     <li>
                                         <a href="https://blog.wrenchboard.com/resources/">Resources</a>
                                     </li>
                                     <li>
-                                        <a href="/privacy">Privacy Policy</a>
+                                        <Link href="/privacy">Privacy Policy</Link>
                                     </li>
                                     <li>
-                                        <a href="/terms">Terms of use</a>
+                                        <Link href="/terms">Terms of use</Link>
                                     </li>
                                 </ul>
                             </div>
@@ -121,12 +122,12 @@ function FooterHomeOne({ className }) {
                                 <div className="apps-download-btn">
                                     <ul>
                                         <li>
-                                            <a href={process.env.REACT_APP_APPLE_APP} target="_blank">
+                                            <a href={process.env.NEXT_PUBLIC_APPLE_APP} target="_blank">
                                                 <i className="fab fa-apple" /> Download for iOS
                                             </a>
                                         </li>
                                         <li>
-                                            <a className="item-2" href={process.env.REACT_APP_ANDROID_APP} target="_blank">
+                                            <a className="item-2" href={process.env.NEXT_PUBLIC_ANDROID_APP} target="_blank">
                                                 <i className="fab fa-google-play" /> Download for
                                                 Android
                                             </a>

app/components/HomeOneHeader.js

@@ -4,6 +4,7 @@ import logo from '../assets/images/wrenchboard-logo-text.png';
 import StickyMenu from '../lib/StickyMenu';
 import Navigation from './navigation/Navigation';
 import Image from 'next/image';
+import Link from 'next/link';
 
 function HomeOneHeader({ action, showLogoOnly = false }) {
   useEffect(() => {
@@ -16,9 +17,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">
-                <a href="/">
+                <Link href="/">
                   <Image src={logo} alt="WrenchBoard" loading='eager' width="175" height="38" />
-                </a>
+                </Link>
               </div>
             </div>
 
@@ -30,10 +31,10 @@ function HomeOneHeader({ action, showLogoOnly = false }) {
               </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}>
+                  <a className="login-btn" href={process.env.NEXT_PUBLIC_DASH_URL_LOGIN}>
                     <i className="fal fa-user" /> Login
                   </a>
-                  <a className="main-btn ml-30" href={process.env.REACT_APP_DASH_URL_SIGNUP}>
+                  <a className="main-btn ml-30" href={process.env.NEXT_PUBLIC_DASH_URL_SIGNUP}>
                     Get Started
                   </a>
                   <div

app/components/News/HeroNews.js

@@ -1,3 +1,4 @@
+import Link from 'next/link';
 import React from 'react';
 
 function HeroNews({ title, breadcrumb }) {
@@ -13,7 +14,7 @@ function HeroNews({ title, breadcrumb }) {
                                     <ol className="breadcrumb">
                                         {breadcrumb.map((value) => (
                                             <li key={Math.random()} className="breadcrumb-item">
-                                                <a href={value.link}>{value.title}</a>
+                                                <Link href={value.link}>{value.title}</Link>
                                             </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/Navigation.js

@@ -1,3 +1,4 @@
+import Link from 'next/link';
 import React from 'react';
 
 function Navigation() {
@@ -5,10 +6,10 @@ function Navigation() {
         <>
             <ul>
                 <li>
-                    <a href="/">Home</a>
+                    <Link href="/">Home</Link>
                 </li>
                 <li>
-                    <a href="/about-us">About</a>
+                    <Link href="/about-us">About</Link>
                 </li>
                 {/* <li>
                     <a href="#">

app/components/navigation/Services.js

@@ -2,6 +2,7 @@ import React from 'react';
 import logo from '../../assets/images/wrenchboard-logo-text.png';
 import Navigation from './Navigation';
 import Image from 'next/image';
+import Link from 'next/link';
 
 function Services({ action }) {
 
@@ -13,9 +14,9 @@ function Services({ action }) {
                         <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="/">
+                                    <Link href="/">
                                         <Image src={logo} alt="WrenchBoard" loading='eager' width="175" height="38" />
-                                    </a>
+                                    </Link>
                                 </div>
                             </div>
                             <div className="col-lg-6 col-md-1 col-sm-1 order-3 order-sm-2">

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/page.tsx

@@ -3,6 +3,8 @@ 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';
@@ -26,9 +28,9 @@ function page() {
         ]}
     />
     <ServiceTopart />
-    {/* <MissionStatement /> */}
+    <MissionStatement />
     <FooterHomeOne className={undefined} />
-    {/* <BackToTop /> */}
+    <BackToTop className='' />
     </>
    
   )

public/index.html

@@ -36,7 +36,7 @@
     <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
 
     <!-- Preload Font Awesome -->
-    <link
+    <!-- <link
       rel="preload"
       href="//use.fontawesome.com/releases/v6.4.2/css/all.css"
       as="style"
@@ -47,7 +47,9 @@
         rel="stylesheet"
         href="//use.fontawesome.com/releases/v6.4.2/css/all.css"
       />
-    </noscript>
+    </noscript> -->
+    <!-- link to font awesome -->
+    <link rel="stylesheet" href="//use.fontawesome.com/releases/v6.4.2/css/all.css">
 
     <title>WrenchBoard</title>
     <!-- Google tag (gtag.js) -->