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,23 +1,11 @@
-"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';
+import Link from 'next/link'
 
 
 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 +23,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">
@@ -45,7 +33,7 @@ function Drawer({ drawer, action }) {
                                             className="menu-item-has-children active"
                                         >
                                           
-                                            <a href="/">Home</a>
+                                            <Link href="/">Home</Link>
                                             
                                         </li>
                                         <li
@@ -53,10 +41,10 @@ function Drawer({ drawer, action }) {
                                             id="service"
                                             className="menu-item-has-children active"
                                         >
-                                            <Link to="/service">Service</Link>
+                                            <Link href="/service">Service</Link>
                                         </li>
                                         <li>
-                                                    <Link to="/about-us">About Us</Link>
+                                                    <Link href="/about-us">About Us</Link>
                                                 </li>
 
                                         
@@ -66,7 +54,7 @@ function Drawer({ drawer, action }) {
                                             id="contact"
                                             className="menu-item-has-children active"
                                         >
-                                            <Link to="/contact">Contact</Link>
+                                            <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/about-us/AboutText.js

@@ -0,0 +1,158 @@
+import React from "react";
+import Image from "next/image";
+
+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">
+        <Image width={'auto'} height={'auto'} 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.",
+  },
+];

app/about-us/HeaderAbout.js

@@ -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;

app/about-us/HeroAbout.js

@@ -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;

app/about-us/ServicesAbout.js

@@ -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">We’re driven by your values</h3>
+                {/* <p>{servicesContent.subTitle}</p> */}
+              </div>
+            </div>
+          </div>        
+        </div>
+      </section>
+    </>
+  );
+}
+
+export default ServicesAbout;

app/about-us/TeamAbout.js

@@ -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;

app/about-us/index.js

@@ -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;

app/about-us/page.tsx

@@ -1,5 +1,10 @@
 import React from 'react'
+import HomeNav from '../components/navigation/HomeNav';
 import FooterHomeOne from '../components/FooterHomeOne';
+import HeroAbout from './HeroAbout';
+import ServicesAbout from './ServicesAbout';
+import AboutTextComponent from './AboutText';
+import BackToTop from '../components/BackToTop'
 
 // must be a better way to centralize the style = TEMPORARY USE 
 import '../assets/css/bootstrap.min.css';
@@ -12,10 +17,15 @@ import '../assets/css/style.css';
 
 
 function page() {
+
   return (
     <> 
-    <div>Abouut us  Here</div>
-    <FooterHomeOne className={undefined} />
+    <HomeNav />
+    <HeroAbout />
+    <ServicesAbout />
+    <AboutTextComponent/>
+    <FooterHomeOne className="appie-footer-about-area" />
+    <BackToTop className='' />
     </>
    
   )

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;
@@ -2269,7 +2273,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 +2282,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 +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;
@@ -6642,7 +6646,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 +6658,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 +6667,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;
@@ -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/blog/blogdetail/page.tsx

@@ -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

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/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/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/HomeOne.js

@@ -1,30 +1,25 @@
 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';
 //import FeaturedScreen from './FeaturedScreen'; 
 import AfterHero from './AfterHero';
 import NextAfterHero from './NextAfterHero';
+import BackToTop from './BackToTop';
 
 
 
 
 
 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 />
@@ -33,6 +28,7 @@ function HomeOne() {
            <TrafficHomeTwo />
            <BlogHomeOne />
            <FooterHomeOne />
+           <BackToTop className='' />
         </>
     );
 }

app/components/HomeOneHeader.js

@@ -1,12 +1,12 @@
+"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';
+import Link from 'next/link';
 
 function HomeOneHeader({ action, showLogoOnly = false }) {
-  var site = getConfig()[0];
   useEffect(() => {
     StickyMenu();
   }, []);
@@ -17,8 +17,8 @@ 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 href="/">
+                  <Image src={logo} alt="WrenchBoard" loading='eager' width="175" height="38" />
                 </Link>
               </div>
             </div>
@@ -31,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,5 +1,5 @@
+import Link from 'next/link';
 import React from 'react';
-import { Link } from 'react-router-dom';
 
 function HeroNews({ title, breadcrumb }) {
     return (
@@ -14,7 +14,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>
+                                                <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/HomeNav.js

@@ -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} />
+    </>
+  )
+}

app/components/navigation/Navigation.js

@@ -0,0 +1,35 @@
+import Link from 'next/link';
+import React from 'react';
+
+function Navigation() {
+    return (
+        <>
+            <ul>
+                <li>
+                    <Link href="/">Home</Link>
+                </li>
+                <li>
+                    <Link href="/about-us">About</Link>
+                </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;

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,51 @@
+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 }) {
+
+    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">
+                                    <Link href="/">
+                                        <Image src={logo} alt="WrenchBoard" loading='eager' width="175" height="38" />
+                                    </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 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} />
     </>

package.json

@@ -9,6 +9,7 @@
     "lint": "next lint"
   },
   "dependencies": {
+    "axios": "^1.7.2",
     "next": "14.2.5",
     "react": "^18",
     "react-dom": "^18",

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) -->