terms page added

.env

@@ -1,3 +1,4 @@
+APP_PORT=9081
 ESLINT_NO_DEV_ERRORS=true
 
 NEXT_PUBLIC_AUX_ENDPOINT="https://apigate.lotus.g1.wrenchboard.com/en/wrench/api/v1"

.env.development

@@ -1,3 +1,4 @@
+APP_PORT=9081
 ESLINT_NO_DEV_ERRORS=true
 
 NEXT_PUBLIC_AUX_ENDPOINT="https://apigate.lotus.g1.wrenchboard.com/en/wrench/api/v1"

.env.production

@@ -1,3 +1,4 @@
+APP_PORT=9081
 ESLINT_NO_DEV_ERRORS=true
 
 NEXT_PUBLIC_AUX_ENDPOINT="https://apigate.lotus.g1.wrenchboard.com/en/wrench/api/v1"

app/Services/ContactData.js

@@ -5,7 +5,7 @@ async function ContactData(reqData) {
     for (let value in reqData) {
         formData.append(value, reqData[value]);
       }
-    let response = await axios.post(`${process.env.REACT_APP_AUX_ENDPOINT}/sitecontact`, reqData);
+    let response = await axios.post(`${process.env.NEXT_PUBLIC_AUX_ENDPOINT}/sitecontact`, reqData);
     return response;
 }
 

app/Services/FaqData.js

@@ -1,10 +1,7 @@
 import Axios from 'axios';
-import getConfig from './../Config/config'
 
 async function FaqData() {
-    // debugger;
-    var site = getConfig()[0];
-    let response = await Axios.post(`${process.env.REACT_APP_AUX_ENDPOINT}/faq`);
+    let response = await Axios.post(`${process.env.NEXT_PUBLIC_AUX_ENDPOINT}/faq`);
     return await response;
 }
 

app/Services/JobsData.js

@@ -1,8 +1,7 @@
 import Axios from 'axios';
-import getConfig from './../Config/config'
 
 async function JobsData() {
-    var site = getConfig()[0];
+
     var callData = [{
         "limit": 10,
         "page": 1
@@ -16,7 +15,7 @@ async function JobsData() {
         });
     }
 */
-    let response = await Axios.post(process.env.REACT_APP_AUX_ENDPOINT+'/startjoblist', callData);
+    let response = await Axios.post(process.env.NEXT_PUBLIC_AUX_ENDPOINT+'/startjoblist', callData);
     return await response;
 }
 

app/assets/css/main.css

@@ -6117,7 +6117,7 @@ blockquote cite {
   padding-top: 250px;
   width: 100%;
   min-height: 100vh;
-  background: url("../images//wrench-page-notfound.jpg") center/cover;
+  background: url(/assets//images/wrench-page-notfound.jpg) center/cover;
   position: relative;
   /* z-index: 1; */
 }

app/components/Error/index.js

@@ -0,0 +1,42 @@
+"use client"
+import React from 'react';
+import Link from 'next/link';
+// import { useHistory } from 'react-router-dom';
+import Svg from './Svg';
+
+function Error() {
+    // const history = useHistory();
+    const goBack = (e) => {
+        e.preventDefault();
+        // history.goBack();
+    };
+    return (
+        <>
+            <div className="appie-error-area">
+                <div className="container">
+                    <div className="row justify-content-center">
+                        <div className="col-lg-6">
+                            <div className="appie-error-content text-center">
+                                <Svg />
+                                <span>Sorry!</span>
+                                <h3 className="title">The page can’t be found.</h3>
+                                <p>
+                                    The page you're looking for isn't available. Use the go back
+                                    button below
+                                </p>
+                                {/* <a onClick={(e) => goBack(e)} href="#">
+                                    Go Back <i className="fal fa-arrow-right"></i>
+                                </a> */}
+                                <Link href="/">
+                                    Go Back <i className="fal fa-arrow-right"></i>
+                                </Link>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </>
+    );
+}
+
+export default Error;

app/components/HomeOne.js

@@ -23,7 +23,7 @@ function HomeOne() {
            <HomeNav />
            <HeroHomeOne />
            <AfterHero />
-           <SelectFeatures className='pb-55-err' />
+           <SelectFeatures className='pb-95' />
            {/*<NextAfterHero />*/}
            {/*<ServicesHomeOne />*/}
            <TrafficHomeOne />

app/components/SelectFeatutes.js

@@ -14,8 +14,8 @@ function SelectFeatures({ className }) {
     };
     //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">
+        <section className={`appie-features-area pt-100 ${className}`} id="features" >
+            <div className="container" style={{  marginBottom: '20px' }} >
                 <div className="row align-items-center">
                     <div className="col-lg-3">
                         <div className="appie-features-tabs-btn">

app/components/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/faq/FAQService.js

@@ -0,0 +1,116 @@
+"use client"
+import React, { useEffect, useState } from 'react';
+import Image from 'next/image';
+import Link from 'next/link';
+
+import ServiceSideMenu from '../components/ServiceSideMenu';
+import FaqData from '../Services/FaqData';
+import Arrow from '../assets/images/arrow-down.png'
+
+function FAQService() {
+    const [isOpen, setOpen] = React.useState({type: 'faq0'});
+    const accordionHandler = (name) => {
+      setOpen(prev => {
+        if(prev.type == name){
+            return {type: ''}
+        }else {
+            return {type: name}
+        }
+      });
+    };
+    let [faq, setFaq] = useState([])
+
+    useEffect(()=>{
+        FaqData().then(res => {
+            setFaq(res.data.result_list)
+        }).catch(err => {
+            console.log('You got an error ========> '+ err)
+        })
+    },[])
+
+    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 accordion-wrapper">
+                            <div className="p-3 service-details-content accordion-con">
+                                <div className="container-fluid">
+                                  <div className='content'>
+                                    <h3 className='p-3 text-center title'>Frequently asked questions</h3>
+                                  </div>
+                                </div>
+                                <div className='row'>
+                                    <div class="col-12 col-lg-6 accordion" id="accordionExample">
+                                        {faq.map((item, index)=>{
+                                            if(index%2 == 0 && item.public != 0){
+                                                return(
+                                                <div key={index} className='my-3'>
+                                                    <Accordion name={`faq${index}`} datas={item} accordionHandler={accordionHandler} isOpen={isOpen} />
+                                                </div>
+                                                )
+                                            }
+                                        })}
+                                    </div>
+                                    <div class="col-12 col-lg-6 accordion" id="accordionExample">
+                                        {faq.map((item, index)=>{
+                                            if(index%2 != 0 && item.public != 0){
+                                                return(
+                                                <div key={index} className='my-3'>
+                                                    <Accordion name={`faq${index}`} datas={item} accordionHandler={accordionHandler} isOpen={isOpen} />
+                                                </div>
+                                                )
+                                            }
+                                        })}
+                                    </div>
+                                </div>
+                                <div className='container-fluid text-center'>
+                                    <p className='my-4'>Can't find an answer <Link href='/contact'>contact us</Link> </p>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </section>
+        </>
+    );
+}
+
+export default FAQService;
+
+export function Accordion({ datas, name, accordionHandler, isOpen }) {
+    return (
+      <>
+        <div className="accordion-item">
+          <div
+            className="accordion-title-bar container-fluid"
+            onClick={()=>{accordionHandler(name)}}
+          >
+            <div className="accordion-title">
+              <p className="">
+                {datas.title}
+              </p>
+            </div>
+            <div className="accordion-title-icon">
+              <span className={`horizontal ${isOpen.type == name ? 'vertical' : ''}`}>
+                <Image width='auto' height='auto' className="" src={Arrow} />
+              </span>
+            </div>
+          </div>
+          <div className={`${isOpen.type == name ? "accordion-body-show" : "accordion-body-hide"}`}>
+            <div className="accordion-body-content" style={{display: 'flex', padding: '10px'}}>
+              <div className="rounded-[28px]" style={{width: '3px', backgroundColor: 'skyblue'}}></div>
+              <div className="flex-1">
+                <p className="" style={{padding: '0px 10px', letterSpacing:'.5px'}}>
+                  {datas.msg}
+                </p>
+              </div>
+            </div>
+          </div>
+        </div>
+      </>
+    );
+  }

app/faq/page.tsx

@@ -1,5 +1,9 @@
 import React from 'react'
+import ServiceNav from '../components/navigation/ServiceNav';
+import HeroNews from '../components/News/HeroNews';
+import FAQService from './FAQService'
 import FooterHomeOne from '../components/FooterHomeOne';
+import BackToTop from '../components/BackToTop';
 
 // 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>Faq Here</div>
-    <FooterHomeOne className={undefined} />
+      <ServiceNav />
+      <HeroNews
+          title="Frequently asked questions"
+          breadcrumb={[
+              { link: '/', title: 'Home' },
+              { link: '/faq', title: 'Faq' },
+          ]}
+      />
+      <FAQService />
+      <FooterHomeOne className='' />
+      <BackToTop className='' />
     </>
    
   )

app/not-found.tsx

@@ -0,0 +1,18 @@
+import React from 'react'
+import Error from './components/Error'
+
+// 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';
+
+
+export default function notFound() {
+  return (
+    <Error />
+  )
+}

app/terms/DetailsService.js

@@ -0,0 +1,281 @@
+import React from 'react';
+import ServiceSideMenu from './ServiceSideMenu';
+
+function DetailsService() {
+    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">
+                                    <div className="mb-4">
+                                    <h4 className="title mb-4">
+                                        Terms of use
+                                    </h4>
+                                    <p className="">
+                                        (updated August 10, 2023)
+                                    </p>
+                                    <p className="">
+                                        These Website Terms & Conditions (“T&Cs”) apply to your access and
+                                        use of www.wrenchboard.com,users.wrenchboard.com (the “Site”),
+                                        native apps, including all software, data, reports, text, images,
+                                        sounds, video, and all contents made available through any portion
+                                        of the Site (collectively, the “Content”). The range includes all
+                                        such elements as whole, individual, and parts.
+                                    </p>
+                                    </div>
+                                    <hr />
+                                    <div className="my-4">
+                                    <h4 className="title mb-4">
+                                        Acceptance of Terms
+                                    </h4>
+                                    <p className="">
+                                        WRENCHBOARD permits you (“User” or “you” or “your”) to access and
+                                        use the Site and Content, subject to these T&Cs. By accessing or
+                                        using any portion of the Site, you acknowledge that you have read,
+                                        understood, and agree to be bound by these T&Cs. If you do not agree
+                                        with these T&Cs, you must not accept these T&Cs or access or use the
+                                        site or content.
+                                    </p>
+                                    </div>
+                                    <hr />
+
+                                    <div className="my-4">
+                                    <h4 className="title mb-4">
+                                        General Conditions of Use
+                                    </h4>
+                                    <ul className="ml-4">
+                                        <li className="">
+                                        <h6 className="title my-4">
+                                            Authorization to Access and Use Site and Content.
+                                        </h6>
+                                        <p className="">
+                                            Subject to your compliance with these T&Cs and the provisions
+                                            hereof, you may access or use the Site and Content solely to
+                                            evaluate WRENCHBOARD and WRENCHBOARD’s products and services.
+                                            You may only link to the Site or Content, or any portion
+                                            thereof, as expressly permitted by WRENCHBOARD.
+                                        </p>
+                                        </li>
+                                        <li className="">
+                                        <h6 className="title my-4">
+                                            Ownership and Restrictions
+                                        </h6>
+                                        <p className="">
+                                            All rights, title, and interest in and to the Site and Content
+                                            will remain exclusive to WRENCHBOARD. You will not:
+                                        </p>
+                                        <ol className="ml-4" style={{listStyleType: 'number'}}>
+                                            <li className="my-2">
+                                            Sublicense, resell, rent, lease, transfer, assign, timeshare,
+                                            or commercially exploit or make the Site and any Content
+                                            available to any third party.
+                                            </li>
+                                            <li className="my-2">
+                                            Use the Site and Content in any unlawful manner (including
+                                            without limitation in violation of any data, privacy, or
+                                            export control laws) or in any way that interferes with or
+                                            disrupts the integrity or performance of the Site and Content
+                                            or their related components.
+                                            </li>
+                                            <li className="my-2">
+                                            Modify, adapt, or hack the Site and Content to, or try to,
+                                            gain unauthorized access to the restricted portions of the
+                                            Site and Content or related systems or networks (i.e.,
+                                            circumvent any encryption or other security measures, gain
+                                            access to any source code or any other underlying form of
+                                            technology or information, and gain access to any part of the
+                                            Site and Content, or any other products or services of
+                                            WRENCHBOARD that are not readily made available to the general
+                                            public).
+                                            </li>
+                                        </ol>
+                                        <p className="my-4">
+                                            You are not permitted to copy, modify, frame, repost, publicly
+                                            perform or display, sell, reproduce, distribute, or create
+                                            derivative works of the Site and Content, except that you may
+                                            download and print one copy of the publicly available materials
+                                            (i.e., the Content that does not require an Account name or
+                                            password to access) on any single computer solely for your
+                                            personal, non-commercial use, provided that you do not modify
+                                            the material in any way. You keep intact all copyright,
+                                            trademark, and other proprietary notices.
+                                        </p>
+                                        <p className="my-4">
+                                            You agree not to access the Site or Content by any means other
+                                            than through the interface that WRENCHBOARD provides to access
+                                            the same. You may not use any “page-scrape,” “deep-link,”
+                                            “spider,” or “robot or other automatic program, device,
+                                            algorithm or methodology, or any similar manual process, to
+                                            access, copy, acquire, or monitor any portion of the Site or any
+                                            Content, or in any way reproduce or circumvent the presentation
+                                            or navigational structure of the Site or any Content, to obtain
+                                            or attempt to obtain any Content or other information through
+                                            any means not made generally available through the Site by
+                                            WRENCHBOARD.
+                                        </p>
+                                        <p className="my-4">
+                                            WRENCHBOARD reserves the right to take lawful measures to
+                                            prevent such activity. You may not forge headers or otherwise
+                                            manipulate identifiers to disguise the origin of any message or
+                                            transmittal you send to WRENCHBOARD on or through the Site or
+                                            any service offered on or through the Site. You may not pretend
+                                            that you are, or that you represent, someone else or impersonate
+                                            any other individual or entity.
+                                        </p>
+                                        </li>
+                                        <li className="">
+                                        <h6 className="title my-4">
+                                            Responsibility for Your Data
+                                        </h6>
+                                        <p className="">
+                                            You are solely responsible for all data, information, and other
+                                            Content, that you upload, post, or otherwise provide or store
+                                            (hereafter “post(ing)”) in connection with or relating to the
+                                            Site. By posting your information and other Content (“User
+                                            Content”) on or through the Site and Content, you grant
+                                            WRENCHBOARD a worldwide, non-exclusive, perpetual, irrevocable,
+                                            royalty-free, sublicensable, and transferable license to use,
+                                            modify, reproduce, distribute, display, publish and perform User
+                                            Content in connection with the Site and Content. WRENCHBOARD has
+                                            the right, but not the obligation, to monitor the Site and
+                                            Content and User Content. <br />
+                                            WRENCHBOARD may remove or turn off any User Content at any time
+                                            for any reason or no reason. WRENCHBOARD will have no liability
+                                            to you for any unauthorized access or use of any of User Content
+                                            or any corruption, deletion, destruction, or loss of any of User
+                                            Content.
+                                        </p>
+                                        </li>
+                                        <li className="">
+                                        <h6 className="title my-4">
+                                            Feedback
+                                        </h6>
+                                        <p className="">
+                                            You may submit ideas, suggestions, or comments (“Feedback”)
+                                            regarding the Site and Content or WRENCHBOARD’s business,
+                                            products, or services. By submitting any Feedback, you
+                                            acknowledge and agree that:{" "}
+                                        </p>
+                                        <ol className="ml-5" style={{listStyleType: 'number'}}>
+                                            <li className="my-2">
+                                            Your Feedback is provided by you voluntarily, and WRENCHBOARD
+                                            may, without any obligations or limitations, use and exploit
+                                            such Feedback in any manner and for any purpose.
+                                            </li>
+                                            <li className="my-2">
+                                            You will not seek and are not entitled to any money or other
+                                            form of compensation, consideration, or attribution concerning
+                                            your Feedback, regardless of whether WRENCHBOARD considered or
+                                            used your Feedback in any manner.
+                                            </li>
+                                            <li className="my-2">
+                                            Your Feedback is not confidential or proprietary information
+                                            of you or any third party.
+                                            </li>
+                                        </ol>
+                                        </li>
+                                    </ul>
+                                    </div>
+                                    <hr />
+
+                                    <div className="my-4">
+                                    <h4 className="title mb-4">
+                                        Termination of Access Due to Violations
+                                    </h4>
+                                    <p className="">
+                                        WRENCHBOARD may, in its sole discretion and without prior notice,
+                                        terminate your access to the Site and block your future access to
+                                        the Site if we determine that you have violated these T&Cs or other
+                                        agreements or guidelines which may be associated with your use of
+                                        the Site. Further, WRENCHBOARD may, in its sole discretion and
+                                        without prior notice, terminate your access to the Site for cause,
+                                        which includes (but is not limited to):
+                                    </p>
+                                    <ol className="ml-4" style={{listStyleType: 'number'}}>
+                                        <li className="my-2">
+                                        Requests by law enforcement or other government agencies
+                                        </li>
+                                        <li className="my-2">
+                                        Discontinuance or material modification of the Site or any service
+                                        offered on or through the Site
+                                        </li>
+                                        <li className="my-2">
+                                        Unexpected technical issues or problems.T&Cs Updates
+                                        </li>
+                                    </ol>
+                                    <p className="">
+                                        WRENCHBOARD reserves the right, at its sole discretion, to change or
+                                        modify portions of these T&Cs at any time. WRENCHBOARD will post the
+                                        changes to these T&Cs on the Site and indicate at the top of this
+                                        page the date these terms were last revised. It is your
+                                        responsibility to check the T&Cs periodically for changes. Your
+                                        continued use of the Site and Content after the date any such
+                                        changes become effective constitutes your acceptance of the new or
+                                        revised T&Cs.
+                                    </p>
+                                    </div>
+                                    <hr />
+
+                                    <div className="my-4">
+                                    <h4 className="title mb-4">
+                                        NO WARRANTIES AND DISCLAIMER BY WRENCHBOARD
+                                    </h4>
+                                    <p className="">
+                                        THE SITE AND CONTENT, AND ALL SERVER AND NETWORK COMPONENTS, ARE
+                                        PROVIDED ON AN “AS IS” AND “AS AVAILABLE” BASIS WITH ALL ERRORS AND
+                                        DEFECTS AND WITHOUT ANY WARRANTIES OF ANY KIND, AND WRENCHBOARD
+                                        EXPRESSLY DISCLAIMS ALL REPRESENTATIONS AND WARRANTIES, INCLUDING
+                                        ANY IMPLIED WARRANTIES OF ACCURACY, COMPLETENESS, MERCHANTABILITY,
+                                        FITNESS FOR A PARTICULAR PURPOSE OR NON-INFRINGEMENT, AND ANY
+                                        REPRESENTATIONS OR WARRANTIES ARISING FROM COURSE OF DEALING, COURSE
+                                        OF PERFORMANCE OR USAGE OF TRADE. YOU ACKNOWLEDGE THAT WRENCHBOARD
+                                        DOES NOT WARRANT THAT YOUR ACCESS OR USE OR BOTH OF THE SITE AND
+                                        CONTENT WILL BE UNINTERRUPTED, TIMELY, SECURE, ERROR-FREE, OR
+                                        VIRUS-FREE, AND WRENCHBOARD DOES NOT MAKE ANY WARRANTY AS TO THE
+                                        RESULTS THAT MAY BE OBTAINED FROM THE USE OF THE SITE AND CONTENT.
+                                        NO INFORMATION, ADVICE, OR SERVICES OBTAINED BY YOU FROM WRENCHBOARD
+                                        OR THROUGH THE SITE WILL CREATE ANY WARRANTY NOT EXPRESSLY STATED IN
+                                        THESE TERMS and CONDITIONS, AND YOU SHOULD NOT RELY ON THE SITE AND
+                                        THE GENERAL CONTENT ALONE AS THE BASIS FOR YOUR BUSINESS DECISIONS.
+                                    </p>
+                                    </div>
+                                    <hr />
+
+                                    <div className="my-4">
+                                    <p className="">
+                                        WRENCHBOARD reserves the right to do any of the following, at any
+                                        time, without notice: ( 1 ); to modify, suspend or terminate operation
+                                        of or access to the Site, or any portion of the Site, for any
+                                        reason; ( 2 ) to modify or change the Site, or any portion of the
+                                        Site, for any reason; and ( 3 ) to interrupt the operation of the
+                                        Site, or any portion of the Site, as necessary to perform routine or
+                                        non-routine maintenance, error correction, or other changes. Changes
+                                        to the Policy
+                                    </p>
+
+                                    <p className="my-4">
+                                        We reserve the right to update and change this Privacy policy at any
+                                        time. Changes will become effective once posted. However, we will
+                                        notify you by email or when you log on to the service or website
+                                        about any changes that fundamentally affect how we manage your
+                                        personal information. Contacting Us: You may contact us about this
+                                        policy through our email address anytime: support@wrenchboard.com
+                                    </p>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </section>
+        </>
+    );
+}
+
+export default DetailsService;

app/terms/HeroTerms.js

@@ -0,0 +1,28 @@
+import React from 'react';
+import thumb from '../assets/images/fun-fact-thumb.png';
+import Image from 'next/image';
+
+function HeroTerms({title}) {
+    return (
+        <>
+            <div className="appie-page-title-area appie-page-service-title-area">
+                <div className="container">
+                    <div className="row">
+                        <div className="col-lg-12">
+                            <div className="appie-page-title-item">
+                                <h1 className="appie-title">
+                                {title}
+                                </h1>
+                                <div className="thumb">
+                                    <Image src={thumb} alt="" />
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </>
+    );
+}
+
+export default HeroTerms;

app/terms/ServiceSideMenu.js

@@ -0,0 +1,83 @@
+import React from 'react';
+import Link from 'next/link';
+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">
+                    <Link href="/">
+                        {/* <i className="fal fa-download"></i> */}
+                        <Image src={HomeIcon} alt='sidenav-icon' />
+                        <span>Home</span>
+                    </Link>
+                </div>
+
+                <div className="service-download-widget">
+                    <Link href="/about-us">
+                        {/* <i className="fal fa-download"></i> */}
+                        <Image src={AboutIcon} alt='sidenav-icon' />
+                        <span>About us</span>
+                    </Link>
+                </div>
+                <div className="service-download-widget">
+                    <Link href="/use-cases">
+                        {/* <i className="fal fa-file-pdf"></i> */}
+                        <Image src={UseCaseIcon} alt='sidenav-icon' />
+                        <span>Use Cases</span>
+                    </Link>
+                </div>
+
+
+
+                <div className="service-download-widget">
+                    <Link href="/privacy">
+                        {/* <i className="fal fa-download"></i> */}
+                        <Image src={PrivacyIcon} alt='sidenav-icon' />
+                        <span>Privacy Policy</span>
+                    </Link>
+                </div>
+                <div className="service-download-widget">
+                    <Link href="/terms">
+                        {/* <i className="fal fa-file-pdf"></i> */}
+                        <Image src={TermsIcon} alt='sidenav-icon' />
+                        <span>Terms of use</span>
+                    </Link>
+                </div>
+
+                <div className="service-category-widget">
+                    <ul>
+                        <li>
+                            Get WrenchBoard App
+                        </li>
+
+                        <li>
+                            <a href={process.env.NEXT_PUBLIC_APPLE_APP}>
+                                <i className="fab fa-apple" /> Download for iOS
+                            </a>
+                        </li>
+                        <li>
+                            <a className="item-2" href={process.env.NEXT_PUBLIC_ANDROID_APP}>
+                                <i className="fab fa-google-play" /> Download for
+                                Android
+                            </a>
+                        </li>
+                    </ul>
+                </div>
+
+            </div>
+
+
+        </>
+    );
+}
+
+export default ServiceSideMenu;

app/terms/page.tsx

@@ -1,6 +1,10 @@
 import React from 'react'
+import ServiceNav from '../components/navigation/ServiceNav';
+import HeroTerms from './HeroTerms'
+import DetailsService from './DetailsService'
 import FooterHomeOne from '../components/FooterHomeOne';
-import HomeNav from '../components/navigation/HomeNav'
+import BackToTop from '../components/BackToTop';
+
 // must be a better way to centralize the style = TEMPORARY USE 
 import '../assets/css/bootstrap.min.css';
 import '../assets/css/custom-animated.css';
@@ -14,9 +18,11 @@ import '../assets/css/style.css';
 function page() {
   return (
     <>
-    <HomeNav />
-    <div>Terms Here</div>
-    <FooterHomeOne className={undefined} />
+      <ServiceNav />
+      <HeroTerms title="Terms of use" />
+      <DetailsService />
+      <FooterHomeOne className='' />
+      <BackToTop className='' />
     </>
    
   )

docker-compose.yml

@@ -5,9 +5,9 @@ services:
       context: .
       dockerfile: docker/Dockerfile
     restart: unless-stopped
-    #image: registry.chiefsoft.net/wrenchboardmainsite_wrenchboard-www:latest
+    image: registry.chiefsoft.net/wrenchboardmainsite_wrenchboard-www2025:latest
     ports:
-      - 9581:3000
+      - ${APP_PORT}:3000
     working_dir: /app
     volumes:
       - ./:/app

docker/Dockerfile

@@ -122,6 +122,7 @@ COPY package.json ./
 RUN npm install --silent
 #RUN npm install react-scripts@3.4.1 -g --silent
 #RUN npm install -g serve
+RUN npm install -g next
 
 # add app
 COPY . ./

package-lock.json

@@ -8,18 +8,19 @@
       "name": "wrenchboard-www2025",
       "version": "0.1.0",
       "dependencies": {
+        "axios": "^1.7.2",
         "next": "14.2.5",
         "react": "^18",
         "react-dom": "^18",
         "react-router-dom": "^6.25.1"
       },
       "devDependencies": {
-        "@types/node": "^20",
-        "@types/react": "^18",
+        "@types/node": "20.14.14",
+        "@types/react": "18.3.3",
         "@types/react-dom": "^18",
         "eslint": "^8",
         "eslint-config-next": "14.2.5",
-        "typescript": "^5"
+        "typescript": "5.5.4"
       }
     },
     "node_modules/@eslint-community/eslint-utils": {
@@ -415,11 +416,10 @@
       "license": "MIT"
     },
     "node_modules/@types/node": {
-      "version": "20.14.13",
-      "resolved": "https://registry.npmjs.org/@types/node/-/node-20.14.13.tgz",
-      "integrity": "sha512-+bHoGiZb8UiQ0+WEtmph2IWQCjIqg8MDZMAV+ppRRhUZnquF5mQkP/9vpSwJClEiSM/C7fZZExPzfU0vJTyp8w==",
+      "version": "20.14.14",
+      "resolved": "https://registry.npmjs.org/@types/node/-/node-20.14.14.tgz",
+      "integrity": "sha512-d64f00982fS9YoOgJkAMolK7MN8Iq3TDdVjchbYHdEmjth/DHowx82GnoA+tVUAN+7vxfYUgAzi+JXbKNd2SDQ==",
       "dev": true,
-      "license": "MIT",
       "dependencies": {
         "undici-types": "~5.26.4"
       }
@@ -436,7 +436,6 @@
       "resolved": "https://registry.npmjs.org/@types/react/-/react-18.3.3.tgz",
       "integrity": "sha512-hti/R0pS0q1/xx+TsI73XIqk26eBsISZ2R0wUijXIngRK9R/e7Xw/cXVxQK7R5JjW+SV4zGcn5hXjudkN/pLIw==",
       "dev": true,
-      "license": "MIT",
       "dependencies": {
         "@types/prop-types": "*",
         "csstype": "^3.0.2"
@@ -851,6 +850,11 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/asynckit": {
+      "version": "0.4.0",
+      "resolved": "https://registry.npmjs.org/asynckit/-/asynckit-0.4.0.tgz",
+      "integrity": "sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q=="
+    },
     "node_modules/available-typed-arrays": {
       "version": "1.0.7",
       "resolved": "https://registry.npmjs.org/available-typed-arrays/-/available-typed-arrays-1.0.7.tgz",
@@ -877,6 +881,16 @@
         "node": ">=4"
       }
     },
+    "node_modules/axios": {
+      "version": "1.7.3",
+      "resolved": "https://registry.npmjs.org/axios/-/axios-1.7.3.tgz",
+      "integrity": "sha512-Ar7ND9pU99eJ9GpoGQKhKf58GpUOgnzuaB7ueNQ5BMi0p+LZ5oaEnfF999fAArcTIBwXTCHAmGcHOZJaWPq9Nw==",
+      "dependencies": {
+        "follow-redirects": "^1.15.6",
+        "form-data": "^4.0.0",
+        "proxy-from-env": "^1.1.0"
+      }
+    },
     "node_modules/axobject-query": {
       "version": "3.1.1",
       "resolved": "https://registry.npmjs.org/axobject-query/-/axobject-query-3.1.1.tgz",
@@ -1022,6 +1036,17 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/combined-stream": {
+      "version": "1.0.8",
+      "resolved": "https://registry.npmjs.org/combined-stream/-/combined-stream-1.0.8.tgz",
+      "integrity": "sha512-FQN4MRfuJeHf7cBbBMJFXhKSDq+2kAArBlmRBvcvFE5BB1HZKXtSFASDhdlz9zOYwxh8lDdnvmMOe/+5cdoEdg==",
+      "dependencies": {
+        "delayed-stream": "~1.0.0"
+      },
+      "engines": {
+        "node": ">= 0.8"
+      }
+    },
     "node_modules/concat-map": {
       "version": "0.0.1",
       "resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz",
@@ -1206,6 +1231,14 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/delayed-stream": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/delayed-stream/-/delayed-stream-1.0.0.tgz",
+      "integrity": "sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ==",
+      "engines": {
+        "node": ">=0.4.0"
+      }
+    },
     "node_modules/dir-glob": {
       "version": "3.0.1",
       "resolved": "https://registry.npmjs.org/dir-glob/-/dir-glob-3.0.1.tgz",
@@ -2022,6 +2055,25 @@
       "dev": true,
       "license": "ISC"
     },
+    "node_modules/follow-redirects": {
+      "version": "1.15.6",
+      "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.6.tgz",
+      "integrity": "sha512-wWN62YITEaOpSK584EZXJafH1AGpO8RVgElfkuXbTOrPX4fIfOyEpW/CsiNd8JdYrAoOvafRTOEnvsO++qCqFA==",
+      "funding": [
+        {
+          "type": "individual",
+          "url": "https://github.com/sponsors/RubenVerborgh"
+        }
+      ],
+      "engines": {
+        "node": ">=4.0"
+      },
+      "peerDependenciesMeta": {
+        "debug": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/for-each": {
       "version": "0.3.3",
       "resolved": "https://registry.npmjs.org/for-each/-/for-each-0.3.3.tgz",
@@ -2049,6 +2101,19 @@
         "url": "https://github.com/sponsors/isaacs"
       }
     },
+    "node_modules/form-data": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/form-data/-/form-data-4.0.0.tgz",
+      "integrity": "sha512-ETEklSGi5t0QMZuiXoA/Q6vcnxcLQP5vdugSpuAyi6SVGi2clPPp+xgEhuMaHC+zGgn31Kd235W35f7Hykkaww==",
+      "dependencies": {
+        "asynckit": "^0.4.0",
+        "combined-stream": "^1.0.8",
+        "mime-types": "^2.1.12"
+      },
+      "engines": {
+        "node": ">= 6"
+      }
+    },
     "node_modules/fs.realpath": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/fs.realpath/-/fs.realpath-1.0.0.tgz",
@@ -3075,6 +3140,25 @@
         "node": ">=8.6"
       }
     },
+    "node_modules/mime-db": {
+      "version": "1.52.0",
+      "resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.52.0.tgz",
+      "integrity": "sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg==",
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/mime-types": {
+      "version": "2.1.35",
+      "resolved": "https://registry.npmjs.org/mime-types/-/mime-types-2.1.35.tgz",
+      "integrity": "sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw==",
+      "dependencies": {
+        "mime-db": "1.52.0"
+      },
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
     "node_modules/minimatch": {
       "version": "3.1.2",
       "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.2.tgz",
@@ -3542,6 +3626,11 @@
         "react-is": "^16.13.1"
       }
     },
+    "node_modules/proxy-from-env": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/proxy-from-env/-/proxy-from-env-1.1.0.tgz",
+      "integrity": "sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg=="
+    },
     "node_modules/punycode": {
       "version": "2.3.1",
       "resolved": "https://registry.npmjs.org/punycode/-/punycode-2.3.1.tgz",
@@ -4416,7 +4505,6 @@
       "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.5.4.tgz",
       "integrity": "sha512-Mtq29sKDAEYP7aljRgtPOpTvOfbwRWlS6dPRzwjdE+C0R4brX/GUyhHSecbHMFLNBLcJIPt9nl9yG5TZ1weH+Q==",
       "dev": true,
-      "license": "Apache-2.0",
       "bin": {
         "tsc": "bin/tsc",
         "tsserver": "bin/tsserver"

package.json

@@ -16,11 +16,11 @@
     "react-router-dom": "^6.25.1"
   },
   "devDependencies": {
-    "@types/node": "^20",
-    "@types/react": "^18",
+    "@types/node": "20.14.14",
+    "@types/react": "18.3.3",
     "@types/react-dom": "^18",
     "eslint": "^8",
     "eslint-config-next": "14.2.5",
-    "typescript": "^5"
+    "typescript": "5.5.4"
   }
 }

public/index.html

@@ -53,13 +53,13 @@
 
     <title>WrenchBoard</title>
     <!-- Google tag (gtag.js) -->
-    <script async src="https://www.googletagmanager.com/gtag/js?id=G-WB8G0ZD483"></script>
+    <script async src="https://www.googletagmanager.com/gtag/js?id=G-DPVPFCJYLP"></script>
     <script>
       window.dataLayer = window.dataLayer || [];
       function gtag(){dataLayer.push(arguments);}
       gtag('js', new Date());
 
-      gtag('config', 'G-WB8G0ZD483');
+      gtag('config', 'G-DPVPFCJYLP');
     </script>
 
   </head>