link fixed

.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,14 +54,14 @@ 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>
                                 <div className="offcanvas-social">
                                     <ul className="text-center">
                                         <li>
-                                            <a href={process.env.REACT_APP_FACEBOOK_LINK} >
+                                            <a href={process.env.NEXT_PUBLIC_FACEBOOK_LINK} >
                                                 <i className="fab fa-facebook-f"></i>
                                             </a>
                                         </li>
@@ -90,12 +78,12 @@ function Drawer({ drawer, action }) {
                                         <li>
                                             <a href="#">
                                                 <i className="fal fa-envelope"></i>{' '}
-                                               {process.env.REACT_APP_SUPPORT_EMAIL}
+                                               {process.env.NEXT_PUBLIC_SUPPORT_EMAIL}
                                             </a>
                                         </li>
                                         <li>
                                             <a href="#">
-                                                <i className="fal fa-phone"></i> {process.env.REACT_APP_SUPPORT_PHONE}
+                                                <i className="fal fa-phone"></i> {process.env.NEXT_PUBLIC_SUPPORT_PHONE}
                                             </a>
                                         </li>
                                         <li>

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;
@@ -6748,12 +6752,12 @@ blockquote cite {
 }
 
 .appie-about-8-box {
-  padding: 50px 50px 0px 50px;
+  padding: 50px;
   z-index: 10;
 }
 @media only screen and (min-width: 992px) and (max-width: 1200px) {
   .appie-about-8-box {
-    padding: 50px 25px 0px 25px;
+    padding: 25px;
   }
 }
 @media only screen and (min-width: 768px) and (max-width: 991px) {

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

@@ -1,5 +1,9 @@
 import React from 'react'
 import FooterHomeOne from '../components/FooterHomeOne';
+import HeroNews from '../components/News/HeroNews';
+import BackToTop from '../components/BackToTop';
+import ServiceNav from '../components/navigation/ServiceNav';
+import Blogs from '../components/News/Blogs';
 
 // must be a better way to centralize the style = TEMPORARY USE 
 import '../assets/css/bootstrap.min.css';
@@ -14,8 +18,25 @@ import '../assets/css/style.css';
 function page() {
   return (
     <> 
-    <div>Bog Here</div>
-    <FooterHomeOne className={undefined} />
+         <ServiceNav />
+        <HeroNews
+          title="Blogs"
+          breadcrumb={[
+            { link: "/", title: "Home" },
+            { link: "/blog", title: "Blogs" },
+          ]}
+        />
+        <section className="blogpage-section">
+          <div className="container">
+            <div className="row">
+              <div className="col-12">
+                <Blogs pathname='/blog' />
+              </div>
+            </div>
+          </div>
+        </section>
+        <FooterHomeOne className='' />
+        <BackToTop className='' />
     </>
    
   )

app/components/AboutApp.js

@@ -0,0 +1,55 @@
+import React from 'react'
+import frame from '../assets/images/use-case-side-main.png'; //about-frame.png'
+import screen from '../assets/images/use-case-side-extra.png'; //about-screen.png'
+import Image from 'next/image';
+
+const AboutApp = ({ video, dark }) => {
+  return (
+    <>
+      <section className="row_am about_app_section _">
+        <div className="container">
+          <div className="row modern_ui_section">
+            <div className="col-lg-6">
+              <div className="about_img" data-aos="fade-in" data-aos-duration="1500">
+                <div className="frame_img">
+                  <Image width='100%' height='auto' className="w-100 moving_position_animatin" src={frame} alt="image" />
+                </div>
+                <div className="screen_img">
+                  <Image width='100%' height='auto' className="w-100 moving_animation" src={screen} alt="image" />
+                </div>
+              </div>
+            </div>
+            <div className="col-lg-6">
+              <div className="about_text">
+                <div className="section_title" data-aos="fade-up" data-aos-duration="1500" data-aos-delay="100">
+                  <h2>Motivate & Organize <br /> <span>Rewards</span></h2>
+                  <p>
+                    With a planned reward, the parent can introduce the family to earning and start financial education early.
+                  </p>
+                </div>
+
+
+                <ul className="design_block">
+                  <li data-aos="fade-up" data-aos-duration="1500">
+                    <h4>Goals Completed</h4>
+                    <p>Motivate with rewards for goals completed, passing the exam, finishing chores, and learning new skills. </p>
+                  </li>
+                  <li data-aos="fade-up" data-aos-duration="1500">
+                    <h4>Connect Family</h4>
+                    <p>It takes a village to raise a kid and share good news and encouragement from the more prominent family. Connect family to the achievements to boost encouragement. </p>
+                  </li>
+                  <li data-aos="fade-up" data-aos-duration="1500">
+                    <h4>Find any Task </h4>
+                    <p>Make more, connect to the marketplace, and earn from appropriate tasks.</p>
+                  </li>
+                </ul>
+              </div>
+            </div>
+          </div>
+        </div>
+      </section>
+    </>
+  )
+}
+
+export default AboutApp

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 cardImg from '../assets/images/home/wrench-card-only.png'
+// 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 */}
@@ -23,23 +23,24 @@ function AfterHero() {
                     <div className="row">
                         <div className="col-lg-7 mb-3 mb-lg-0">
                             <div className='appie-about-container'>
-                                <div className="appie-about-8-box">
-                                    <h3 className="title">
-                                        Reward Accomplishments
-                                    </h3>
-                                    <p>
-                                        Set goals, tasks, or anything that motivates or needs to be done and reward completion. WrenchBoard is the platform to plan rewards off pick your nose and blow
-                                    </p>
-                                </div>
-                                <div className='row'>
-                                    <div className='col-12 col-sm-4 order-2 order-sm-1 align-self-end'>
-                                        <a className="m-1 main-btn" href={process.env.REACT_APP_DASH_URL_LOGIN}>
-                                            Learn More <i className="fal fa-arrow-right" />
-                                        </a>
+                                <div className='row appie-about-8-box'>
+                                    <div className="col-12 col-md-6">
+                                        <h3 className="title">
+                                            Reward Accomplishments
+                                        </h3>
+                                        <p>
+                                            Set goals, tasks, or anything that motivates or needs to be done and reward completion. WrenchBoard is the platform to plan rewards off pick your nose and blow
+                                        </p>
+                                        <div className=''>
+                                            <a className="mb-5 mb-md-0 main-btn" href={process.env.NEXT_PUBLIC_DASH_URL_LOGIN}>
+                                                Learn More <i className="fal fa-arrow-right" />
+                                            </a>
+                                        </div>
                                     </div>
-                                    <div className="col-12 col-sm-8 order-1 order-sm-2">
+                                    <div className="col-12 col-md-6">
                                         <Image
                                             src={cardImg}
+                                            className='w-100 h-100'
                                             width={'100%'}
                                             height={'100%'}
                                             alt="" 
@@ -50,24 +51,25 @@ function AfterHero() {
                         </div>
                         <div className="col-lg-5">
                             <div className='appie-about-container'>
-                                <div className="appie-about-8-box">
-                                    <h3 className="title">
-                                        Assign Faster with <br />
-                                        wrenchAgent
-                                    </h3>
-                                    <p>
-                                        Ask our &#x275B;&#x275B;<span className=''>wrench</span><span className=''>Agent</span>&#x275C;&#x275C; Generative AI to assist
-                                    </p>
-                                </div>
-                                <div className='row'>
-                                    <div className='col-12 col-sm-4 order-2 order-sm-1 align-self-end'>
-                                        <a className="m-1 main-btn" href={process.env.REACT_APP_DASH_URL_LOGIN}>
-                                            Learn More <i className="fal fa-arrow-right" />
-                                        </a>
+                                <div className='row appie-about-8-box'>
+                                    <div className="col-12 col-md-6">
+                                        <h3 className="title">
+                                            Assign Faster with <br />
+                                            wrenchAgent
+                                        </h3>
+                                        <p>
+                                            Ask our &#x275B;&#x275B;<span className=''>wrench</span><span className=''>Agent</span>&#x275C;&#x275C; Generative AI to assist
+                                        </p>
+                                        <div className=''>
+                                            <a className="mb-5 mb-md-0 main-btn" href={process.env.NEXT_PUBLIC_DASH_URL_LOGIN}>
+                                                Learn More <i className="fal fa-arrow-right" />
+                                            </a>
+                                        </div>
                                     </div>
-                                    <div className="col-12 col-sm-8 order-1 order-sm-2">
+                                    <div className="col-12 col-md-6">
                                         <Image
                                             src={thumb5}
+                                            className='w-100 h-100'
                                             width={'100%'}
                                             height={'100%'}
                                             alt="" 

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

@@ -34,7 +34,7 @@ function HeroHomeOne() {
                 <p>Your place to set family goals and reward achievements. Find tasks to earn from, or build a task portfolio and find others to perform tasks for you.</p>
                 <ul className='d-flex justify-content-center justify-content-lg-start'>
                   <li className=''>
-                      <a className="item-2" target='_blank'  href={process.env.REACT_APP_APPLE_APP}>
+                      <a className="item-2" target='_blank'  href={process.env.NEXT_PUBLIC_APPLE_APP}>
                           <i className="fab fa-apple"></i>
                           <span>
                               Available on the <span>App Store</span>
@@ -42,7 +42,7 @@ function HeroHomeOne() {
                       </a>
                   </li>
                   <li className=''>
-                      <a className="item-2" target='_blank' href={process.env.REACT_APP_ANDROID_APP}>
+                      <a className="item-2" target='_blank' href={process.env.NEXT_PUBLIC_ANDROID_APP}>
                           <i className="fab fa-google-play"></i>
                           <span>
                               Available on the <span>Google Play</span>

app/components/HomeOne.js

@@ -1,38 +1,36 @@
 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';
+import SelectFeatures from "@/app/components/SelectFeatutes";
 
 
 
 
 
 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 />
-           <ServicesHomeOne />
+           <SelectFeatures className='pb-55-err' />
+           {/*<NextAfterHero />*/}
+           {/*<ServicesHomeOne />*/}
            <TrafficHomeOne />
-           <TrafficHomeTwo />
+           {/*<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/SelectFeatutes.js

@@ -0,0 +1,252 @@
+"use client"
+import React, { useState } from 'react';
+//import { Link } from 'react-router-dom';
+import thumb from '../assets/images/features-thumb-01.png';
+import shapeSix from '../assets/images/shape/shape-6.png';
+import shapeSeven from '../assets/images/shape/shape-7.png';
+import shapeEight from '../assets/images/shape/shape-8.png';
+import Image from 'next/image';
+function SelectFeatures({ className }) {
+    const [tab, setTab] = useState('setting');
+    const handleClick = (e, value) => {
+        e.preventDefault();
+        setTab(value);
+    };
+    //appie-services-2-area appie-services-8-area pt-90 pb-55
+    return (
+        <section className={`appie-features-area pt-100 ${className}`} id="features"    style={{  marginBottom: '20px' }} >
+            <div className="container">
+                <div className="row align-items-center">
+                    <div className="col-lg-3">
+                        <div className="appie-features-tabs-btn">
+                            <div
+                                className="nav flex-column nav-pills"
+                                id="v-pills-tab"
+                                role="tablist"
+                                aria-orientation="vertical"
+                            >
+                                <a
+                                    onClick={(e) => handleClick(e, 'setting')}
+                                    className={`nav-link ${tab === 'setting' ? 'active' : ''}`}
+                                    id="v-pills-home-tab"
+                                    data-toggle="pill"
+                                    href="#v-pills-home"
+                                    role="tab"
+                                    aria-controls="v-pills-home"
+                                    aria-selected="true"
+                                >
+                                    <i className="fas fa-cog" /> Reward achievement
+                                </a>
+                                <a
+                                    onClick={(e) => handleClick(e, 'report')}
+                                    className={`nav-link ${tab === 'report' ? 'active' : ''}`}
+                                    id="v-pills-profile-tab"
+                                    data-toggle="pill"
+                                    href="#v-pills-profile"
+                                    role="tab"
+                                    aria-controls="v-pills-profile"
+                                    aria-selected="false"
+                                >
+                                    <i className="fas fa-exclamation-triangle" /> Assign tasks or chores
+                                </a>
+                                <a
+                                    onClick={(e) => handleClick(e, 'notice')}
+                                    className={`nav-link ${tab === 'notice' ? 'active' : ''}`}
+                                    id="v-pills-messages-tab"
+                                    data-toggle="pill"
+                                    href="#v-pills-messages"
+                                    role="tab"
+                                    aria-controls="v-pills-messages"
+                                    aria-selected="false"
+                                >
+                                    <i className="fas fa-bell" /> Family engagement
+                                </a>
+                                <a
+                                    onClick={(e) => handleClick(e, 'app')}
+                                    className={`nav-link ${tab === 'app' ? 'active' : ''}`}
+                                    id="v-pills-settings-tab"
+                                    data-toggle="pill"
+                                    href="#v-pills-settings"
+                                    role="tab"
+                                    aria-controls="v-pills-settings"
+                                    aria-selected="false"
+                                >
+                                    <i className="fas fa-lock" /> Fund wallets
+                                </a>
+                            </div>
+                        </div>
+                    </div>
+                    <div className="col-lg-9">
+                        <div className="tab-content" id="v-pills-tabContent">
+                            <div
+                                className={`${
+                                    tab === 'setting' ? 'show active' : ''
+                                } tab-pane fade`}
+                                id="v-pills-home"
+                                role="tabpanel"
+                                aria-labelledby="v-pills-home-tab"
+                            >
+                                <div className="row align-items-center">
+                                    <div className="col-lg-6">
+                                        <div
+                                            className="appie-features-thumb text-center wow animated fadeInUp"
+                                            data-wow-duration="2000ms"
+                                            data-wow-delay="200ms"
+                                        >
+                                            <Image src={thumb} alt=""
+                                                   style={{ width: '350px', height:'auto', margin: 'auto' }} />
+                                        </div>
+                                    </div>
+                                    <div className="col-lg-6">
+                                        <div
+                                            className="appie-features-content wow animated fadeInRight"
+                                            data-wow-duration="2000ms"
+                                            data-wow-delay="600ms"
+                                        >
+                                            <span>Custom Reactions</span>
+                                            <h3 className="title">
+                                                Let the <br /> Conversation flow
+                                            </h3>
+                                            <p>
+                                                Car boot absolutely bladdered posh burke the
+                                                wireless mush some dodg.
+                                            </p>
+                                            <a className="main-btn" href="/about-us">
+                                                Learn More
+                                            </a>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                            <div
+                                className={`${tab === 'report' ? 'show active' : ''} tab-pane fade`}
+                                id="v-pills-profile"
+                                role="tabpanel"
+                                aria-labelledby="v-pills-profile-tab"
+                            >
+                                <div className="row align-items-center">
+                                    <div className="col-lg-6">
+                                        <div
+                                            className="appie-features-thumb text-center animated fadeInUp"
+                                            data-wow-duration="2000ms"
+                                            data-wow-delay="200ms"
+                                        >
+                                            <Image src={thumb} alt=""
+                                                   style={{ width: '350px', height:'auto', margin: 'auto' }} />
+                                        </div>
+                                    </div>
+                                    <div className="col-lg-6">
+                                        <div
+                                            className="appie-features-content animated fadeInRight"
+                                            data-wow-duration="2000ms"
+                                            data-wow-delay="600ms"
+                                        >
+                                            <span>Custom Reacyions</span>
+                                            <h3 className="title">
+                                                Let the <br /> Conversation flow
+                                            </h3>
+                                            <p>
+                                                Car boot absolutely bladdered posh burke the
+                                                wireless mush some dodg.
+                                            </p>
+                                            <a className="main-btn" href="#">
+                                                Learn More
+                                            </a>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                            <div
+                                className={`${tab === 'notice' ? 'show active' : ''} tab-pane fade`}
+                                id="v-pills-messages"
+                                role="tabpanel"
+                                aria-labelledby="v-pills-messages-tab"
+                            >
+                                <div className="row align-items-center">
+                                    <div className="col-lg-6">
+                                        <div
+                                            className="appie-features-thumb text-center animated fadeInUp"
+                                            data-wow-duration="2000ms"
+                                            data-wow-delay="200ms"
+                                        >
+                                            <Image src={thumb} alt=""
+                                                   style={{ width: '350px', height:'auto', margin: 'auto' }} />
+                                        </div>
+                                    </div>
+                                    <div className="col-lg-6">
+                                        <div
+                                            className="appie-features-content animated fadeInRight"
+                                            data-wow-duration="2000ms"
+                                            data-wow-delay="600ms"
+                                        >
+                                            <span>Custom Reacyions</span>
+                                            <h3 className="title">
+                                                Let the <br /> Conversation flow
+                                            </h3>
+                                            <p>
+                                                Car boot absolutely bladdered posh burke the
+                                                wireless mush some dodg.
+                                            </p>
+                                            <a className="main-btn" href="#">
+                                                Learn More
+                                            </a>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                            <div
+                                className={`${tab === 'app' ? 'show active' : ''} tab-pane fade`}
+                                id="v-pills-settings"
+                                role="tabpanel"
+                                aria-labelledby="v-pills-settings-tab"
+                            >
+                                <div className="row align-items-center">
+                                    <div className="col-lg-6">
+                                        <div
+                                            className="appie-features-thumb text-center animated fadeInUp"
+                                            data-wow-duration="2000ms"
+                                            data-wow-delay="200ms"
+                                        >
+                                            <Image src={thumb} alt=""
+                                                   style={{ width: '350px', height:'auto', margin: 'auto' }} />
+                                        </div>
+                                    </div>
+                                    <div className="col-lg-6">
+                                        <div
+                                            className="appie-features-content animated fadeInRight"
+                                            data-wow-duration="2000ms"
+                                            data-wow-delay="600ms"
+                                        >
+                                            <span>Custom Reacyions</span>
+                                            <h3 className="title">
+                                                Let the <br /> Conversation flow
+                                            </h3>
+                                            <p>
+                                                Car boot absolutely bladdered posh burke the
+                                                wireless mush some dodg.
+                                            </p>
+                                            <a className="main-btn" href="#">
+                                                Learn More
+                                            </a>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            {/*<div className="features-shape-1">*/}
+            {/*    <Image src={shapeSix} alt="" />*/}
+            {/*</div>*/}
+            {/*<div className="features-shape-2">*/}
+            {/*    <Image src={shapeSeven} alt="" />*/}
+            {/*</div>*/}
+            {/*<div className="features-shape-3">*/}
+            {/*    <Image src={shapeEight} alt="" />*/}
+            {/*</div>*/}
+        </section>
+    );
+}
+
+export default SelectFeatures;

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.NEXT_PUBLIC_DASH_URL_LOGIN}>
+                                        <i className="fal fa-user"></i> Login
+                                    </a>
+                                    <a className="main-btn ml-30" href={process.env.NEXT_PUBLIC_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/contact/Forms.js

@@ -0,0 +1,202 @@
+"use client"
+import React, {useState} from 'react';
+import ContactData from '../Services/ContactData';
+
+
+function Forms() {
+
+    const [formDetails, setFormDetails] = useState({
+        first_name: '',
+        last_name: '',
+        email: '',
+        subject: '',
+        phone_number: '',
+        action: 1001,
+        message: '',
+        channel: 'WEB',
+        terms_conditions: false
+    })
+
+    const validForm = formDetails.first_name && formDetails.last_name && formDetails.email && formDetails.phone_number && formDetails.subject && formDetails.message
+
+    const handleChange = ({target:{name, value}}) => {
+        setFormDetails(prev => ({...prev, [name]:value}))
+    }
+
+    const [requestStatus, setRequestStatus] = useState({loading:false, status:false, msg:''})
+
+    function handleSubmit(e) {
+        e.preventDefault()
+        setRequestStatus({loading:true, status:false, msg:''})
+        if(!validForm){
+            setRequestStatus({loading:false, status:false, msg:'please, fill all fields'})
+            setTimeout(()=>{
+                setRequestStatus({loading:false, status:false, msg:''})
+            },3000)
+            return
+        }
+
+        delete formDetails.terms_conditions
+
+       ContactData(formDetails).then(res =>{
+        if(res?.data?.result != '100'){
+            setRequestStatus({loading:false, status:false, msg:'failed to send message'})
+            setTimeout(()=>{
+                setRequestStatus({loading:false, status:false, msg:''})
+            },3000)
+            return
+        }
+        setRequestStatus({loading:false, status:true, msg:'message Sent'})
+        setTimeout(()=>{
+            setRequestStatus({loading:false, status:false, msg:''})
+            setFormDetails({
+                first_name: '',
+                last_name: '',
+                email: '',
+                subject: '',
+                phone_number: '',
+                action: 1001,
+                message: '',
+                channel: 'WEB',
+                terms_conditions: false
+            })
+        },3000)
+       }).catch(err => {
+        setRequestStatus({loading:false, status:false, msg:'failed something went wrong'})
+        setTimeout(()=>{
+            setRequestStatus({loading:false, status:false, msg:''})
+        },3000)
+       });
+    }
+
+
+    return (
+        <>
+            <section className="contact-section">
+                <div className="container">
+                    <div className="row">
+                        <div className="col-md-4">
+                            <div className="contact--info-area">
+                                <h3>Get in touch</h3>
+                                <p>Looking for help? Fill the form and start a new discussion.</p>
+                                <div className="single-info">
+                                    <h5>Headquaters</h5>
+                                    <p>
+                                        <i className="fal fa-home"></i>
+                                        {process.env.NEXT_PUBLIC_SUPPORT_US_ADDRESS}
+                                    </p>
+                                </div>
+                                <div className="single-info">
+                                    <h5>Phone</h5>
+                                    <p>
+                                        <i className="fal fa-phone"></i>
+                                        {process.env.NEXT_PUBLIC_SUPPORT_PHONE}
+                                        <br />
+                                    </p>
+                                </div>
+                                <div className="single-info">
+                                    <h5>Support</h5>
+                                    <p>
+                                        <i className="fal fa-envelope"></i>
+                                        {process.env.NEXT_PUBLIC_SUPPORT_EMAIL}
+                                       
+                                    </p>
+                                </div>
+                                <div className="ab-social">
+                                    <h5>Follow Us</h5>
+                                    <a className="fac" href={process.env.NEXT_PUBLIC_FACEBOOK_LINK}>
+                                        <i className="fab fa-facebook-f"></i>
+                                    </a>
+                                    <a className="twi" href={process.env.NEXT_PUBLIC_TWITTER_LINK}>
+                                        {/* <i className="fab fa-twitter"></i> */}
+                                        <i className="fab fa-x-twitter" />
+                                    </a>
+                                    <a className="you" href="#">
+                                        <i className="fab fa-youtube"></i>
+                                    </a>
+                                    <a className="lin" href={process.env.NEXT_PUBLIC_LINKEDIN_LINK}>
+                                        <i className="fab fa-linkedin-in"></i>
+                                    </a>
+                                </div>
+                            </div>
+                        </div>
+                        <div className="col-md-8">
+                            <div className="contact-form">
+                                <h4>Let’s Connect</h4>
+                                <form onSubmit={handleSubmit} className="row">
+                                    <div className="col-md-6">
+                                        <input type="text" name="first_name" placeholder="First Name"  maxLength={15} onChange={handleChange} value={formDetails.first_name} />
+                                    </div>
+                                    <div className="col-md-6">
+                                        <input type="text" name="last_name" placeholder="Last Name"  maxLength={15} onChange={handleChange} value={formDetails.last_name} />
+                                    </div>
+                                    <div className="col-md-6">
+                                        <input
+                                            type="email"
+                                            name="email"
+                                            placeholder="Email Address" 
+                                            maxLength={35} 
+                                            onChange={handleChange}
+                                            value={formDetails.email}
+                                        />
+                                    </div>
+                                    <div className="col-md-6">
+                                        <input
+                                            type="number"
+                                            name="phone_number"
+                                            placeholder="Phone Number" 
+                                            maxLength={15} 
+                                            onChange={handleChange}
+                                            value={formDetails.phone_number}
+                                        />
+                                    </div>
+                                    <div className="col-md-12">
+                                        <input type="text" name="subject" placeholder="Subject"  maxLength={35} value={formDetails.subject} onChange={handleChange}  />
+                                    </div>
+                                    <div className="col-md-12">
+                                        <textarea
+                                            name="message"
+                                            placeholder="How can we help?"
+                                            onChange={handleChange}
+                                            value={formDetails.message}
+                                        ></textarea>
+                                    </div>
+                                    <div className="col-md-6">
+                                        <div className="condition-check">
+                                            <input id="terms-conditions" name="terms_conditions" type="checkbox" value={formDetails.terms_conditions} onChange={handleChange} />
+                                            <label htmlFor="terms-conditions">
+                                                I agree to the <a href="#">Terms & Conditions</a>
+                                            </label>
+                                        </div>
+                                    </div>
+                                    <div className="col-md-6 text-right">
+                                        <input 
+                                            type="submit"  
+                                            value={ requestStatus.loading ? 'Sending...' : 'Send Message'} 
+                                            disabled={requestStatus.loading} 
+                                            className={`${!validForm ? 'opacity-25' : 'opacity-100'}`}
+                                        />
+                                    </div>
+                                    {/* <div className="p-2 col-12">
+                                        {requestStatus.msg &&
+                                        }
+                                    </div> */}
+                                    <p className={`p-1 w-100 text-center ${requestStatus.status ? 'text-success' : 'text-danger'}`}>{requestStatus.msg}</p>
+                                </form>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </section>
+
+            <div className="bisylms-map">
+                <iframe
+                    title="map"
+                    src="https://maps.google.com/maps?width=720&amp;height=600&amp;hl=en&amp;coord=33.8573837,-84.4766235&amp;q=Cumberland+Pkwy+SE,+Atlanta,+GA+30339&amp;ie=UTF8&amp;t=p&amp;z=16&amp;iwloc=B&amp;output=embed"
+                ></iframe>
+            </div>
+        </>
+    );
+}
+
+export default Forms;

app/contact/page.tsx

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

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} />
     </>

app/use-cases/UseCase.js

@@ -0,0 +1,47 @@
+import React from 'react';
+import blogImg1 from '../assets/images/blog/1.jpg';
+import UseCaseData from '../Services/UseCaseData';
+import Image from 'next/image';
+import Link from 'next/link';
+
+
+function UseCase() {
+
+    var UseCaseDataResult = UseCaseData();
+
+    return (
+        <>
+            <div className="row">
+                {
+                    UseCaseDataResult.map((i, index )=> {
+                        var blgImg = i.meta_value != null ? "/images/" + i.meta_value : blogImg1;
+
+                        return (
+                            <div key={index} className="col-12 col-md-6 col-lg-4">
+                                <div className="post-item-1">
+
+                                    {<img src={blgImg} alt={i.title} />}
+                                    <div className="b-post-details">
+                                        <h3>
+                                            <Link href={process.env.NEXT_PUBLIC_DASH_URL_LOGIN}>
+                                                {i.title}
+                                            </Link>
+                                        </h3>
+                                        <Link className="read-more" href={process.env.NEXT_PUBLIC_DASH_URL_LOGIN}>
+                                            Learn more<i className="fal fa-arrow-right"></i>
+                                        </Link>
+                                    </div>
+
+                                </div>
+                            </div>
+
+                        )
+
+                    })
+                }
+            </div>
+        </>
+    );
+}
+
+export default UseCase;

app/use-cases/page.tsx

@@ -1,5 +1,10 @@
 import React from 'react'
 import FooterHomeOne from '../components/FooterHomeOne';
+import BackToTop from '../components/BackToTop';
+import HeroNews from '../components/News/HeroNews';
+import ServiceNav from '../components/navigation/ServiceNav';
+import AboutApp from '../components/AboutApp'
+import UseCase from './UseCase'
 
 // must be a better way to centralize the style = TEMPORARY USE 
 import '../assets/css/bootstrap.min.css';
@@ -14,8 +19,27 @@ import '../assets/css/style.css';
 function page() {
   return (
     <> 
-    <div>use Case Here</div>
-    <FooterHomeOne className={undefined} />
+      <ServiceNav />
+      <HeroNews
+          title="Use Cases"
+          breadcrumb={[
+              { link: '/', title: 'Home' },
+              { link: '/use-cases', title: 'Use Cases' },
+          ]}
+      />
+      <AboutApp video='' dark='' />
+      <section className="blogpage-section">
+          <div className="container">
+              <div className="row">
+                  {/* <div className="col-lg-12 col-md-7">
+                      <UseCase />
+                  </div> */}
+                  <UseCase />
+              </div>
+          </div>
+      </section>
+      <FooterHomeOne className='' />
+      <BackToTop className='' />
     </>
    
   )

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