chat support added

app/blog/blogdetail/Blog.jsx

@@ -0,0 +1,64 @@
+import singlePost from "../../assets/images/single-post/1.jpg";
+import { BlogLoader, ImageLoader } from "../../lib/SkeletonLoaders";
+// import Image from "next/image";
+// import LazyImage from "../../lib/LazyImage";
+
+/**
+ * Renders a blog post component.
+ * @returns {JSX.Element} The rendered blog post component.
+ */
+function Blog({ blogItem, imgUrl, loader }) {
+  // Generate a unique ID
+  const uniqueId = `element_${Math.random().toString(36).substr(2, 9)}`;
+
+  const blogImg = `${imgUrl}/${blogItem?.meta_value || singlePost}`;
+
+  const imgLoaderStyles = {
+    "--loader-width": "750px",
+    "--loader-height": "550px",
+  };
+
+  const headerLoaderStyles = {
+    "--text-container-width": "300px",
+    "--text-container-height": "18px",
+  };
+
+  const bodyTextLoaderStyles = {
+    "--text-container-width": "770px",
+    "--text-container-height": "15px",
+  };
+
+  return (
+    <>
+      <div className="single-post-area">
+        <div className="post-thumb" style={{ marginTop: "0" }}>
+          {loader ? (
+            <div style={imgLoaderStyles}>
+              <ImageLoader />
+            </div>
+          ) : (
+            <img src={blogImg} alt={blogItem?.meta_value || "single-post.jpg"} key={uniqueId} />
+          )}
+        </div>
+        {loader ? (
+          <div style={headerLoaderStyles}>
+            <BlogLoader />
+          </div>
+        ) : (
+          <h4 className="article-title">{blogItem?.post_title}</h4>
+        )}
+        {loader ? (
+          <div style={bodyTextLoaderStyles}>
+            <BlogLoader />
+          </div>
+        ) : (
+          <div
+            dangerouslySetInnerHTML={{ __html: blogItem?.post_content }}
+          ></div>
+        )}
+      </div>
+    </>
+  );
+}
+
+export default Blog;

app/blog/blogdetail/BlogSideBar.js

@@ -0,0 +1,69 @@
+import React from "react";
+import Link from "next/link";
+import BlogImg1 from "../../assets/images/blog/p1.jpg";
+
+/**
+ * Renders a sidebar for a blog.
+ * @param {Object} blogs - An object containing the data for the blog posts.
+ * @returns {JSX.Element} - JSX code that renders the blog sidebar.
+ */
+function BlogSideBar({ blogs }) {
+  /**
+   * Renders other blog posts.
+   * This is an Array of JSX elements representing the other blog posts.
+   */
+  const renderOtherBlogPosts = () => {
+    return blogs?.blogdata?.slice(0, 4).map((post) => {
+      const blogDate = new Date(post.post_date).toLocaleDateString("en-US", {
+        year: "numeric",
+        month: "short",
+        day: "numeric",
+      });
+
+      const blogImg =
+        post.meta_value != null
+          ? `${blogs?.image_url}/${post.meta_value}`
+          : BlogImg1;
+
+      return (
+        <div className="popular-post" key={post.id}>
+          <Link href={`/blog/blogdetail/${post?.id}`}>
+            <img width='auto' height='auto' src={blogImg} alt="blog-img" style={{top: "20px"}} loading="lazy" />
+          </Link>
+          <h5>
+            <Link href={`/blog/blogdetail/${post?.id}`}>{post?.post_title}</Link>
+          </h5>
+          <span>{blogDate}</span>
+        </div>
+      );
+    });
+  };
+
+  return (
+    <div className="blog-sidebar">
+      <aside className="widget widget-categories">
+        {/*<h3 className="widget-title">Categories</h3>*/}
+        <ul>
+          <li>
+            <Link href="/about-us">About</Link>
+          </li>
+          <li>
+            <a href={process.env.NEXT_PUBLIC_DASH_URL_SIGNUP}>Sign up</a>
+          </li>
+          <li>
+            <a href={process.env.NEXT_PUBLIC_DASH_URL_LOGIN}>Login</a>
+          </li>
+          <li>
+            <a href="https://blog.wrenchboard.com/">More Articles</a>
+          </li>
+        </ul>
+      </aside>
+      <aside className="widget widget-trend-post">
+        <h3 className="widget-title">Other Posts</h3>
+        {renderOtherBlogPosts()}
+      </aside>
+    </div>
+  );
+}
+
+export default BlogSideBar;

app/blog/blogdetail/[id]/page.js

@@ -0,0 +1,84 @@
+"use client"
+import React, { useEffect, useMemo, useState } from 'react'
+import { useParams } from 'next/navigation';
+import ServiceNav from '@/app/components/navigation/ServiceNav';
+import HeroNews from '@/app/components/News/HeroNews';
+import FooterHomeOne from '../../../components/FooterHomeOne';
+import BackToTop from '@/app/components/BackToTop';
+import BlogData from '@/app/Services/BlogData';
+
+import Blog from '../Blog'
+import BlogSideBar from '../BlogSideBar'
+
+// 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() {
+    const [isLoading, setIsLoading] = useState(false);
+    const [blogs, setBlogs] = useState([]);
+    const { id } = useParams();
+  
+    useEffect(() => {
+      const fetchBlogs = async () => {
+        setIsLoading(true);
+        try {
+          const res = await BlogData();
+          setBlogs(res.data);
+          setIsLoading(false)
+        } catch (err) {
+          console.log("Error loading blogdata", err);
+          setIsLoading(false)
+        }
+      };
+  
+      fetchBlogs();
+    }, []);
+  
+    const blogItem = useMemo(() => {
+      return blogs?.blogdata?.find((item) => item.id == id);
+    }, [blogs, id]);
+  return (
+    <>
+      <ServiceNav />
+
+      {/* Renders the hero section */}
+      <HeroNews
+        title="Blog"
+        breadcrumb={[
+          { link: "/", title: "Home" },
+          { link: "/blog", title: "Blogs" },
+          {
+            link: `/blog/blogdetail/${id}`,
+            title: isLoading ? "please wait..." : blogItem ? blogItem.post_title : "Post not found",
+          },
+        ]}
+      />
+
+      {/* Renders the blog content and sidebar */}
+      <section className="blogpage-section">
+        <div className="container">
+          <div className="row">
+            <div className="col-lg-8 col-md-7">
+              <Blog blogItem={blogItem} imgUrl={blogs?.image_url} loader={isLoading} />
+            </div>
+            <div className="col-lg-4 col-md-5">
+              <BlogSideBar blogs={blogs} />
+            </div>
+          </div>
+        </div>
+      </section>
+      <FooterHomeOne className='' />
+      <BackToTop className='' />
+    </>
+   
+  )
+}
+
+export default page

app/blog/blogdetail/page.tsx

@@ -1,24 +0,0 @@
-import React from 'react'
-import FooterHomeOne from '../../components/FooterHomeOne';
-
-// must be a better way to centralize the style = TEMPORARY USE 
-import '../../assets/css/bootstrap.min.css';
-import '../../assets/css/custom-animated.css';
-import '../../assets/css/default.css';
-import '../../assets/css/font-awesome.min.css';
-import '../../assets/css/magnific-popup.css';
-import '../../assets/css/main.css';
-import '../../assets/css/style.css';
-
-
-function page() {
-  return (
-    <> 
-    <div>Bog Detail Here</div>
-    <FooterHomeOne className={undefined} />
-    </>
-   
-  )
-}
-
-export default page

app/components/FooterHomeOne.js

@@ -118,7 +118,7 @@ function FooterHomeOne({ className }) {
                     </div>
                     <div className="row">
                         <div className="col-lg-12">
-                            <div className="footer-copyright d-flex align-items-center justify-content-between pt-2">
+                            <div className="footer-copyright d-lg-flex align-items-center justify-content-between pt-2">
                                 <div className="apps-download-btn">
                                     <ul>
                                         <li>

app/components/HomeOne.js

@@ -7,7 +7,7 @@ import HeroHomeOne from './HeroHomeOne';
 import ServicesHomeOne from './ServicesHomeOne';
 import TrafficHomeOne from './TrafficHomeOne';
 import TrafficHomeTwo from './TrafficHomeTwo';
-//import FeaturedScreen from './FeaturedScreen'; 
+//import FeaturedScreen from './FeaturedScreen';
 import AfterHero from './AfterHero';
 import NextAfterHero from './NextAfterHero';
 import BackToTop from './BackToTop';
@@ -28,6 +28,7 @@ function HomeOne() {
            {/*<ServicesHomeOne />*/}
            <TrafficHomeOne />
            {/*<TrafficHomeTwo />*/}
+           {/*<FeaturedScreen />*/}
            <BlogHomeOne />
            <FooterHomeOne />
            <BackToTop className='' />

app/components/News/Blogs.js

@@ -1,7 +1,9 @@
 "use client"
 import React, { useEffect, useState } from "react";
+import Link from "next/link";
 import blogOne from "../../assets/images/blog/1.jpg";
 import BlogData from "../../Services/BlogData";
+// import Image from "next/image";
 
 /**
  * Fetches blog data from an API and renders the blogs on the page.
@@ -47,14 +49,14 @@ function Blogs({ pathname }) {
             data-wow-duration="3000ms"
             data-wow-delay="200ms"
           >
-            <a href={`/blog/blogdetail/${blog?.id}`} className="thumb">
+            <Link href={`/blog/blogdetail/${blog?.id}`} className="thumb">
               <img 
                 src={blgImg}
                 alt={blog.post_title} 
                 width={370} height={'auto'}
                 // style={{height: 'auto' }}
               />
-            </a>
+            </Link>
             <div className="content">
               <div className="blog-meta">
                 <ul>
@@ -62,11 +64,11 @@ function Blogs({ pathname }) {
                 </ul>
               </div>
               <h3 className="title">
-                <a href={`/blog/blogdetail/${blog?.id}`}>{blog.post_title}</a>
+                <Link href={`/blog/blogdetail/${blog?.id}`}>{blog.post_title}</Link>
               </h3>
-              <a href={`/blog/blogdetail/${blog?.id}`}>
+              <Link href={`/blog/blogdetail/${blog?.id}`}>
                 Learn More <i className="fal fa-arrow-right" />
-              </a>
+              </Link>
             </div>
           </div>
         </div>

app/components/SelectFeatutes.js

@@ -1,7 +1,7 @@
 "use client"
 import React, { useState } from 'react';
 //import { Link } from 'react-router-dom';
-import thumb from '../assets/images/features-thumb-01.png';
+import thumb from '../assets/images/features-thumb-11.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';
@@ -103,13 +103,14 @@ function SelectFeatures({ className }) {
                                             data-wow-duration="2000ms"
                                             data-wow-delay="600ms"
                                         >
-                                            <span>Custom Reactions</span>
+                                            <span>
+                                                {/*Reward Achievement*/}
+                                            </span>
                                             <h3 className="title">
-                                                Let the <br /> Conversation flow
+                                                Reward <br /> Achievement
                                             </h3>
                                             <p>
-                                                Car boot absolutely bladdered posh burke the
-                                                wireless mush some dodg.
+                                                Reward with points, badges, recognition, or money rewards with easy steps
                                             </p>
                                             <a className="main-btn" href="/about-us">
                                                 Learn More
@@ -141,13 +142,14 @@ function SelectFeatures({ className }) {
                                             data-wow-duration="2000ms"
                                             data-wow-delay="600ms"
                                         >
-                                            <span>Custom Reacyions</span>
+                                            <span>
+                                                {/*Reward Achievement ee*/}
+                                            </span>
                                             <h3 className="title">
-                                                Let the <br /> Conversation flow
+                                                Assign <br /> tasks or chores
                                             </h3>
                                             <p>
-                                                Car boot absolutely bladdered posh burke the
-                                                wireless mush some dodg.
+                                                Adapt to your family's needs with the flexibility of using one-time or repeated tasks or chores with the option to find any task.
                                             </p>
                                             <a className="main-btn" href="#">
                                                 Learn More
@@ -179,13 +181,14 @@ function SelectFeatures({ className }) {
                                             data-wow-duration="2000ms"
                                             data-wow-delay="600ms"
                                         >
-                                            <span>Custom Reacyions</span>
+                                            <span>
+                                                {/*Custom Reacyions 77*/}
+                                            </span>
                                             <h3 className="title">
-                                                Let the <br /> Conversation flow
+                                                Family  <br /> engagement
                                             </h3>
                                             <p>
-                                                Car boot absolutely bladdered posh burke the
-                                                wireless mush some dodg.
+                                                Connect with education challenges, such as quizzes or learning tasks, and private chats, and invite others to your family.
                                             </p>
                                             <a className="main-btn" href="#">
                                                 Learn More
@@ -217,13 +220,14 @@ function SelectFeatures({ className }) {
                                             data-wow-duration="2000ms"
                                             data-wow-delay="600ms"
                                         >
-                                            <span>Custom Reacyions</span>
+                                            <span>
+                                                {/*Reward Achievement*/}
+                                            </span>
                                             <h3 className="title">
-                                                Let the <br /> Conversation flow
+                                                Fund  <br /> wallets
                                             </h3>
                                             <p>
-                                                Car boot absolutely bladdered posh burke the
-                                                wireless mush some dodg.
+                                                Take control and feel secure by creating a virtual or physical card, allocating funds, and managing wallets for your kids. .
                                             </p>
                                             <a className="main-btn" href="#">
                                                 Learn More
@@ -250,3 +254,11 @@ function SelectFeatures({ className }) {
 }
 
 export default SelectFeatures;
+
+
+
+
+
+
+
+

app/components/ServiceSideMenu.js

@@ -60,12 +60,12 @@ function ServiceSideMenu() {
                         </li>
 
                         <li>
-                            <a href={process.env.REACT_APP_APPLE_APP}>
+                            <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.REACT_APP_ANDROID_APP}>
+                            <a className="item-2" href={process.env.NEXT_PUBLIC_ANDROID_APP}>
                                 <i className="fab fa-google-play" /> Download for
                                 Android
                             </a>

app/layout.tsx

@@ -1,6 +1,7 @@
 import type { Metadata } from "next";
 import { Inter } from "next/font/google";
 import "./globals.css";
+import Script from "next/script";
 
 const inter = Inter({ subsets: ["latin"] });
 
@@ -31,6 +32,33 @@ export default function RootLayout({
     <meta property="og:image" content="%PUBLIC_URL%/favicon-32x32.png" />
 
       <body className={inter.className}>{children}</body>
+      <Script>
+        {`
+            var LHC_API = LHC_API || {};
+            LHC_API.args = {
+              mode: "widget",
+              lhc_base_url: "//chat.live.wrenchboard.com/",
+              wheight: 450,
+              wwidth: 350,
+              pheight: 520,
+              pwidth: 500,
+              leaveamessage: true,
+              check_messages: false,
+            };
+            (function () {
+              var po = document.createElement("script");
+              po.type = "text/javascript";
+              po.setAttribute("crossorigin", "anonymous");
+              po.async = true;
+              var date = new Date();
+              po.src =
+                "//chat.live.wrenchboard.com/design/defaulttheme/js/widgetv2/index.js?" +
+                ("" + date.getFullYear() + date.getMonth() + date.getDate());
+              var s = document.getElementsByTagName("script")[0];
+              s.parentNode.insertBefore(po, s);
+            })();
+        `}
+      </Script>
     </html>
   );
 }

app/lib/LazyImage.js

@@ -1,3 +1,4 @@
+"use client"
 import React, { useEffect, useRef, useState } from 'react';
 
 /**

app/privacy/DetailsPrivacy.js

@@ -0,0 +1,98 @@
+import React from 'react';
+import ServiceSideMenu from '../components/ServiceSideMenu';
+
+function DetailsPrivacy() {
+    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">
+                                    <h4 className="title">Privacy Policy</h4>
+                                    <p>
+                                    Wrenchboard issues this policy to inform users about the information we collect, the use and disclosures in the course of interactions with the WrenchBoard services by customers. We value the privacy of our customers and such strive to employ best industry standards and practices to protect their privacy. By signing up for this services, using our products or technologies offered through the WrenchBoard website, you expressly agree to the terms of this Privacy Policy.
+                                    </p>
+                                    <span>
+                                      -
+                                    </span>
+                                    <hr size="1" />
+                                    <h4 className="title">Collection of Information </h4>
+                                    <p>
+                                    When you sign up for WrenchBoard platform as a user, freelancer, worker or client, you inadvertently provide certain personal information such as name and email address. This information may be used to identify or contact you as part of the service we provide. Below is information we may collect from registered users of the service.
+                                    <ul class="list-group">
+                                        <li class="list-group-item">We collect financial information which include bank account numbers, debit/credit account.</li>
+                                        <li class="list-group-item">We also collect other personal information such as date of birth to ensure compliance to lab our regulations as the platform is strictly for persons 18 years and above.</li>
+                                        <li class="list-group-item">We collect personal information (names email addresses) from you and your friends when you use our referral program. We may also receive information about you from third party sites during promotions and campaigns.</li>
+                                    </ul>
+                                    </p>
+                                    <hr size="1" />
+                                    <h4 className="title">Use of Personal Information </h4> 
+                                    <p>
+                                    The information we collect about you is mainly utilized to provide a secure, efficient and smooth user experience as you interact with the site. We may also utilize the information to contact you to resolve issues with your account or resolve disputes between freelancers and clients. We also use your personal information in the following ways.
+                                    <ul class="list-group">
+                                        <li class="list-group-item">To comply with the regulatory requirement, whenever the need arises. </li>
+                                        <li class="list-group-item">To improve business relationship between Wrenchboard and users. </li>
+                                        <li class="list-group-item">To manage and protect our IT infrastructure. </li>
+                                        <li class="list-group-item">To contact you as the need arises as part of the services we offer to users. </li>
+                                        <li class="list-group-item">To provide some indication on the promotional offers and advertisement we direct to you. </li>
+                                        <li class="list-group-item">To protect you and your information. We regularly send you notification based on activities as you use the service. </li>
+                                    </ul>
+                                    </p>
+
+                                    <hr size="1" />
+                                    <h4>How We Share Your Personal Information: </h4>
+                                    <p>
+                                        When you sign up to the Service as a freelancer and create a profile, we will share your limited personal information with clients or project owners for whom you may perform a task or do work for based on expression of interest. Such information will include name, profile information with experience and your ranking based on previous performance. This information will be available to the public.</p>
+                                    <p>When you register as a client or project owner and post a job in the market place or offer jobs to preselected freelancers or workers on this service, information about you, your business will be shared. This information will be based on the information provided in your profile.</p>
+                                    <p>In order to deliver a quality service on WrenchBoard, we require the services of third parties and agents such as PayPal, Quickteller Service or banks to facilitate and process transactions.</p>
+                                    <p>We may also share your personal information when and if compelled or mandated by government agencies, or court injunctions or regulatory requirement. In order to settle disputes or claims, we may also be compelled to share your information in order to deliver services to you.</p>
+                                    <p>Finally, we may share your information with companies that we plan to to merge with or to be acquired by. We will take necessary measure to ensure that all such new affiliations and corporate entities comply with the Privacy Policies hereby stated failing which you will be notified duly.</p>
+                                
+                                    <hr size="1" />
+                                   <h4 className="title"> How We Use Cookies and Related Technologies.</h4>
+                                    <p>
+                                        When you access the service or website, www.wrenchboard.com , we store small files called Cookies in your browser. Cookies and related technologies like beacons and tags are used to identify customers uniquely. With Cookies, we can track and trend the pages of interest within the website. Hence, these technologies help us focus only relevant promotions or advertisement to each customer. Through this technologies, we are able to improve the service based on the feedback from the interaction with users. We also rely on these technologies to mitigate fraudulent attempts on your WrenchBoard account. You may elect to disable cookies to prevent installation of cookies from the website to your browser. However, your functional experience with the service or website may be impacted. Note that you automatically disconnect from cookies when you close your browser session or log out of the service.
+                                    </p>
+
+
+                                    <hr size="1" />
+                                    <h4 className="title"> Measures We Take to Secure Your Information</h4>
+                                    <p>
+                                        Your data and privacy are important to us as such we take extreme care on how we protect your information. We use a combination of industry standard encryption technologies to protect your information. Your password is not visible to our technical support team or any one in WrenchBoard. Our IT infrastructures are located in hosting facilities with strict access controls, and security protocols with only pre checked and authorized persons have access.
+                                    </p>
+
+
+                                    <hr size="1" />
+                                    <h4 className="title">Updating Your Information or Opting Out.</h4> 
+                                    <p>
+                                    Users of this service may update the information posted in profiles or their accounts at any time. The accuracy of information posted on the profiles and accounts is entirely the responsibility of users. You may also decide to opt out the service or close your account at any time. We may also deactivate your account if you violate the terms of use of the website. Whilst we will endeavor to delete your core information in such instances, we will retain minimal records for reasons including disputes, claims or administrative purposes. Also, note that it may not be possible to delete any information you had shared with other users on the website previously.
+                                    </p>
+
+                                    <hr size="1" />
+                                    <h4 className="title">Deactivate/Delete your account.</h4> 
+                                    <p>
+                                    If you no longer wish to use our Services, you can deactivate your Services account. If you want to deactivate your account, that setting is available to you in your account settings. Otherwise, please get in touch with our support. While we close any associated process, you will not be able to access your account. Note that this process cannot be reversed since we will remove your data. If you want to use our services in the future, it will be a new account altogether.   </p>
+
+                                    <hr size="1" />
+                                    <h4 className="title">Changes To the Policy</h4>
+                                    <p>
+                                    We reserve the rights to update and make changes to this Privacy policy at anytime. 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>
+            </section>
+        </>
+    );
+}
+
+export default DetailsPrivacy;

app/privacy/HeroPrivacy.js

@@ -0,0 +1,28 @@
+import React from 'react';
+import thumb from '../assets/images/fun-fact-thumb.png';
+import Image from 'next/image';
+
+function HeroPrivacy({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 HeroPrivacy;

app/privacy/page.tsx

@@ -1,5 +1,9 @@
 import React from 'react'
+import ServiceNav from '../components/navigation/ServiceNav';
+import HeroPrivacy from './HeroPrivacy'
+import DetailsPrivacy from './DetailsPrivacy'
 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,11 @@ import '../assets/css/style.css';
 function page() {
   return (
     <> 
-    <div>Privacy Here</div>
-    <FooterHomeOne className={undefined} />
+      <ServiceNav />
+      <HeroPrivacy title="Privacy Policy" />
+      <DetailsPrivacy />
+      <FooterHomeOne className='' />
+      <BackToTop className='' />
     </>
    
   )

app/service/ServiceSideMenu.js

@@ -1,83 +0,0 @@
-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

@@ -1,5 +1,6 @@
 import React from 'react';
-import ServiceSideMenu from './ServiceSideMenu';
+// import ServiceSideMenu from './ServiceSideMenu';
+import ServiceSideMenu from '../components/ServiceSideMenu';
 
 function ServiceTopart() {
 

public/index.html

@@ -1,6 +1,16 @@
 <!DOCTYPE html>
 <html lang="en">
   <head>
+    <!-- Google tag (gtag.js) -->
+    <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-DPVPFCJYLP');
+    </script>
+
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <meta name="theme-color" content="#000000" />
@@ -50,18 +60,7 @@
     </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) -->
-    <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-DPVPFCJYLP');
-    </script>
-
   </head>
 
   <body>