made faq to show information where public is 1

This reverts commit 10cefdc40d.

.env

@@ -1 +1,19 @@
-ESLINT_NO_DEV_ERRORS=true
+ESLINT_NO_DEV_ERRORS=true
+
+REACT_APP_AUX_ENDPOINT="https://apigate.lotus.g1.wrenchboard.com/en/wrench/api/v1"
+REACT_APP_USERS_ENDPOINT="https://apigate.lotus.g1.wrenchboard.com/en/wrench/api/v1"
+
+REACT_APP_SITE_NAME='WrenchBoard'
+REACT_APP_DASH_URL='https://dev-users.wrenchboard.com'
+REACT_APP_DASH_URL_LOGIN="https://dev-users.wrenchboard.com/login"
+REACT_APP_DASH_URL_SIGNUP="https://dev-users.wrenchboard.com/signup"
+REACT_APP_ANDROID_APP='https://play.google.com/store/apps/details?id=com.wrenchboard.users'
+REACT_APP_APPLE_APP='https://itunes.apple.com/us/app/wrenchboard/id1435718367?ls=1&mt=8'
+REACT_APP_FACEBOOK_LINK='https://www.facebook.com/wrenchboard'
+REACT_APP_TWITTER_LINK='https://twitter.com/wrenchboard/'
+REACT_APP_LINKEDIN_LINK="https://www.linkedin.com/company/wrenchboard/"
+REACT_APP_SUPPORT_EMAIL='support@wrenchboard.com'
+REACT_APP_SUPPORT_PHONE='404 855-7966'
+REACT_APP_SUPPORT_PHONE_NG='(+420) 336 476 328'
+REACT_APP_SUPPORT_US_ADDRESS='Cumberland Pkwy, Atlanta GA 30339'
+REACT_APP_SUPPORT_NG_ADDRESS='Saka Tinubu Street, Victoria Island Lagos, Nigeria'

.env.development

@@ -0,0 +1,19 @@
+ESLINT_NO_DEV_ERRORS=true
+
+REACT_APP_AUX_ENDPOINT="https://apigate.lotus.g1.wrenchboard.com/en/wrench/api/v1"
+REACT_APP_USERS_ENDPOINT="https://apigate.lotus.g1.wrenchboard.com/en/wrench/api/v1"
+
+REACT_APP_SITE_NAME='WrenchBoard'
+REACT_APP_DASH_URL='https://dev-users.wrenchboard.com'
+REACT_APP_DASH_URL_LOGIN="https://dev-users.wrenchboard.com/login"
+REACT_APP_DASH_URL_SIGNUP="https://dev-users.wrenchboard.com/signup"
+REACT_APP_ANDROID_APP='https://play.google.com/store/apps/details?id=com.wrenchboard.users'
+REACT_APP_APPLE_APP='https://itunes.apple.com/us/app/wrenchboard/id1435718367?ls=1&mt=8'
+REACT_APP_FACEBOOK_LINK='https://www.facebook.com/wrenchboard'
+REACT_APP_TWITTER_LINK='https://twitter.com/wrenchboard/'
+REACT_APP_LINKEDIN_LINK="https://www.linkedin.com/company/wrenchboard/"
+REACT_APP_SUPPORT_EMAIL='support@wrenchboard.com'
+REACT_APP_SUPPORT_PHONE='404 855-7966'
+REACT_APP_SUPPORT_PHONE_NG='(+420) 336 476 328'
+REACT_APP_SUPPORT_US_ADDRESS='Cumberland Pkwy, Atlanta GA 30339'
+REACT_APP_SUPPORT_NG_ADDRESS='Saka Tinubu Street, Victoria Island Lagos, Nigeria'

.env.production

@@ -0,0 +1,19 @@
+ESLINT_NO_DEV_ERRORS=true
+
+REACT_APP_AUX_ENDPOINT="https://apigate.orion.g1.wrenchboard.com/en/wrench/api/v1"
+REACT_APP_USERS_ENDPOINT="https://apigate.orion.g1.wrenchboard.com/en/wrench/api/v1"
+
+REACT_APP_SITE_NAME='WrenchBoard'
+REACT_APP_DASH_URL='https://users.wrenchboard.com'
+REACT_APP_DASH_URL_LOGIN="https://users.wrenchboard.com/login"
+REACT_APP_DASH_URL_SIGNUP="https://users.wrenchboard.com/signup"
+REACT_APP_ANDROID_APP='https://play.google.com/store/apps/details?id=com.wrenchboard.users'
+REACT_APP_APPLE_APP='https://itunes.apple.com/us/app/wrenchboard/id1435718367?ls=1&mt=8'
+REACT_APP_FACEBOOK_LINK='https://www.facebook.com/wrenchboard'
+REACT_APP_TWITTER_LINK='https://twitter.com/wrenchboard/'
+REACT_APP_LINKEDIN_LINK="https://www.linkedin.com/company/wrenchboard/"
+REACT_APP_SUPPORT_EMAIL='support@wrenchboard.com'
+REACT_APP_SUPPORT_PHONE='404 855-7966'
+REACT_APP_SUPPORT_PHONE_NG='(+420) 336 476 328'
+REACT_APP_SUPPORT_US_ADDRESS='Cumberland Pkwy, Atlanta GA 30339'
+REACT_APP_SUPPORT_NG_ADDRESS='Saka Tinubu Street, Victoria Island Lagos, Nigeria'

.idea/vcs.xml

@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="VcsDirectoryMappings">
+    <mapping directory="$PROJECT_DIR$" vcs="Git" />
+  </component>
+</project>

.idea/workspace.xml

@@ -0,0 +1,61 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="ChangeListManager">
+    <list default="true" id="fd4afde1-1e8e-4d28-9403-576562526750" name="Changes" comment="">
+      <change beforePath="$PROJECT_DIR$/docker-compose.yml" beforeDir="false" afterPath="$PROJECT_DIR$/docker-compose.yml" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/docker/Dockerfile" beforeDir="false" afterPath="$PROJECT_DIR$/docker/Dockerfile" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/src/assets/css/main.css" beforeDir="false" afterPath="$PROJECT_DIR$/src/assets/css/main.css" afterDir="false" />
+    </list>
+    <option name="SHOW_DIALOG" value="false" />
+    <option name="HIGHLIGHT_CONFLICTS" value="true" />
+    <option name="HIGHLIGHT_NON_ACTIVE_CHANGELIST" value="false" />
+    <option name="LAST_RESOLUTION" value="IGNORE" />
+  </component>
+  <component name="ComposerSettings">
+    <execution />
+  </component>
+  <component name="Git.Settings">
+    <option name="RECENT_GIT_ROOT_PATH" value="$PROJECT_DIR$" />
+  </component>
+  <component name="MarkdownSettingsMigration">
+    <option name="stateVersion" value="1" />
+  </component>
+  <component name="ProjectId" id="25iP36UZglWNAHyrv5jJoQeK0xF" />
+  <component name="ProjectViewState">
+    <option name="hideEmptyMiddlePackages" value="true" />
+    <option name="showLibraryContents" value="true" />
+  </component>
+  <component name="PropertiesComponent">
+    <property name="RunOnceActivity.OpenProjectViewOnStart" value="true" />
+    <property name="RunOnceActivity.ShowReadmeOnStart" value="true" />
+    <property name="WebServerToolWindowFactoryState" value="false" />
+    <property name="last_opened_file_path" value="$PROJECT_DIR$" />
+    <property name="node.js.detected.package.eslint" value="true" />
+    <property name="node.js.selected.package.eslint" value="(autodetect)" />
+    <property name="nodejs_package_manager_path" value="npm" />
+    <property name="vue.rearranger.settings.migration" value="true" />
+  </component>
+  <component name="SpellCheckerSettings" RuntimeDictionaries="0" Folders="0" CustomDictionaries="0" DefaultDictionary="application-level" UseSingleDictionary="true" transferred="true" />
+  <component name="TaskManager">
+    <task active="true" id="Default" summary="Default task">
+      <changelist id="fd4afde1-1e8e-4d28-9403-576562526750" name="Changes" comment="" />
+      <created>1646006732965</created>
+      <option name="number" value="Default" />
+      <option name="presentableId" value="Default" />
+      <updated>1646006732965</updated>
+      <workItem from="1646006734585" duration="420000" />
+      <workItem from="1646165240272" duration="1771000" />
+      <workItem from="1646172842260" duration="10502000" />
+      <workItem from="1646557970520" duration="2123000" />
+      <workItem from="1648155462374" duration="2218000" />
+      <workItem from="1649081744625" duration="1110000" />
+      <workItem from="1649187179749" duration="1116000" />
+      <workItem from="1649967735144" duration="280000" />
+      <workItem from="1650593705732" duration="1075000" />
+    </task>
+    <servers />
+  </component>
+  <component name="TypeScriptGeneratedFilesManager">
+    <option name="version" value="3" />
+  </component>
+</project>

Dockerfile

@@ -0,0 +1,121 @@
+FROM alpine:3.15
+
+ENV NODE_VERSION 14.19.0
+
+RUN addgroup -g 1000 node \
+    && adduser -u 1000 -G node -s /bin/sh -D node \
+    && apk add --no-cache \
+        libstdc++ \
+    && apk add --no-cache --virtual .build-deps \
+        curl \
+    && ARCH= && alpineArch="$(apk --print-arch)" \
+      && case "${alpineArch##*-}" in \
+        x86_64) \
+          ARCH='x64' \
+          CHECKSUM="8d5e638d88b62de2f147dee812a5d74e4860a20468eb7ff32c41a02b58e2aebf" \
+          ;; \
+        *) ;; \
+      esac \
+  && if [ -n "${CHECKSUM}" ]; then \
+    set -eu; \
+    curl -fsSLO --compressed "https://unofficial-builds.nodejs.org/download/release/v$NODE_VERSION/node-v$NODE_VERSION-linux-$ARCH-musl.tar.xz"; \
+    echo "$CHECKSUM  node-v$NODE_VERSION-linux-$ARCH-musl.tar.xz" | sha256sum -c - \
+      && tar -xJf "node-v$NODE_VERSION-linux-$ARCH-musl.tar.xz" -C /usr/local --strip-components=1 --no-same-owner \
+      && ln -s /usr/local/bin/node /usr/local/bin/nodejs; \
+  else \
+    echo "Building from source" \
+    # backup build
+    && apk add --no-cache --virtual .build-deps-full \
+        binutils-gold \
+        g++ \
+        gcc \
+        gnupg \
+        libgcc \
+        linux-headers \
+        make \
+        python3 \
+    # gpg keys listed at https://github.com/nodejs/node#release-keys
+    && for key in \
+      4ED778F539E3634C779C87C6D7062848A1AB005C \
+      94AE36675C464D64BAFA68DD7434390BDBE9B9C5 \
+      74F12602B6F1C4E913FAA37AD3A89613643B6201 \
+      71DCFD284A79C3B38668286BC97EC7A07EDE3FC1 \
+      8FCCA13FEF1D0C2E91008E09770F7A9A5AE15600 \
+      C4F0DFFF4E8C1A8236409D08E73BC641CC11F4C8 \
+      C82FA3AE1CBEDC6BE46B9360C43CEC45C17AB93C \
+      DD8F2338BAE7501E3DD5AC78C273792F7D83545D \
+      A48C2BEE680E841632CD4E44F07496B3EB3C1762 \
+      108F52B48DB57BB0CC439B2997B01419BD92F80A \
+      B9E2F5981AA6E0CD28160D9FF13993A75599653C \
+    ; do \
+      gpg --batch --keyserver hkps://keys.openpgp.org --recv-keys "$key" || \
+      gpg --batch --keyserver keyserver.ubuntu.com --recv-keys "$key" ; \
+    done \
+    && curl -fsSLO --compressed "https://nodejs.org/dist/v$NODE_VERSION/node-v$NODE_VERSION.tar.xz" \
+    && curl -fsSLO --compressed "https://nodejs.org/dist/v$NODE_VERSION/SHASUMS256.txt.asc" \
+    && gpg --batch --decrypt --output SHASUMS256.txt SHASUMS256.txt.asc \
+    && grep " node-v$NODE_VERSION.tar.xz\$" SHASUMS256.txt | sha256sum -c - \
+    && tar -xf "node-v$NODE_VERSION.tar.xz" \
+    && cd "node-v$NODE_VERSION" \
+    && ./configure \
+    && make -j$(getconf _NPROCESSORS_ONLN) V= \
+    && make install \
+    && apk del .build-deps-full \
+    && cd .. \
+    && rm -Rf "node-v$NODE_VERSION" \
+    && rm "node-v$NODE_VERSION.tar.xz" SHASUMS256.txt.asc SHASUMS256.txt; \
+  fi \
+  && rm -f "node-v$NODE_VERSION-linux-$ARCH-musl.tar.xz" \
+  && apk del .build-deps \
+  # smoke tests
+  && node --version \
+  && npm --version
+
+ENV YARN_VERSION 1.22.17
+
+RUN apk add --no-cache --virtual .build-deps-yarn curl gnupg tar \
+  && for key in \
+    6A010C5166006599AA17F08146C2130DFD2497F5 \
+  ; do \
+    gpg --batch --keyserver hkps://keys.openpgp.org --recv-keys "$key" || \
+    gpg --batch --keyserver keyserver.ubuntu.com --recv-keys "$key" ; \
+  done \
+  && curl -fsSLO --compressed "https://yarnpkg.com/downloads/$YARN_VERSION/yarn-v$YARN_VERSION.tar.gz" \
+  && curl -fsSLO --compressed "https://yarnpkg.com/downloads/$YARN_VERSION/yarn-v$YARN_VERSION.tar.gz.asc" \
+  && gpg --batch --verify yarn-v$YARN_VERSION.tar.gz.asc yarn-v$YARN_VERSION.tar.gz \
+  && mkdir -p /opt \
+  && tar -xzf yarn-v$YARN_VERSION.tar.gz -C /opt/ \
+  && ln -s /opt/yarn-v$YARN_VERSION/bin/yarn /usr/local/bin/yarn \
+  && ln -s /opt/yarn-v$YARN_VERSION/bin/yarnpkg /usr/local/bin/yarnpkg \
+  && rm yarn-v$YARN_VERSION.tar.gz.asc yarn-v$YARN_VERSION.tar.gz \
+  && apk del .build-deps-yarn \
+  # smoke test
+  && yarn --version
+
+COPY docker-entrypoint.sh /usr/local/bin/
+ENTRYPOINT ["docker-entrypoint.sh"]
+
+# set working directory
+WORKDIR /app
+
+# add `/app/node_modules/.bin` to $PATH
+ENV PATH /app/node_modules/.bin:$PATH
+
+# install app dependencies
+COPY package.json ./
+#COPY package-lock.json ./
+RUN npm install --silent
+RUN npm install react-scripts@3.4.1 -g --silent
+RUN npm install -g serve
+
+# add app
+COPY . ./
+
+# build app
+RUN npm run-script build
+
+# start app
+# CMD ["serve", "-s", "build"]
+
+CMD ["npm", "start"]
+

docker-compose.yml

@@ -5,19 +5,17 @@ services:
       context: .
       dockerfile: docker/Dockerfile
     restart: unless-stopped
-    volumes:
-      - ./:/app
-      - '/app/node_modules'
+    image: registry.chiefsoft.net/wrenchboardmainsite_wrenchboard-www:latest
     ports:
       - 9081:3000
     extra_hosts:
       - backend.wrenchboard.api.live:10.10.33.15
       - backend.wrenchboard.api.test:10.10.33.15
-      #- backend.wrenchboard.api.live:172.31.4.27
-      #- backend.wrenchboard.api.test:10.20.30.27
+      # #- backend.wrenchboard.api.live:172.31.4.27
+      # #- backend.wrenchboard.api.test:10.20.30.27
       - apigateway.wrenchboard.app.dev.fluxtra.net:10.20.30.19
       - apigateway.wrenchboard.app.lotus.fluxtra.net:172.31.4.19
     environment:
       - CHOKIDAR_USEPOLLING=true
 volumes:
-  src:
+  src:

docker-entrypoint.sh

@@ -0,0 +1,11 @@
+#!/bin/sh
+set -e
+
+# Run command with node if the first argument contains a "-" or is not a system command. The last
+# part inside the "{}" is a workaround for the following bug in ash/dash:
+# https://bugs.debian.org/cgi-bin/bugreport.cgi?bug=874264
+if [ "${1#-}" != "${1}" ] || [ -z "$(command -v "${1}")" ] || { [ -f "${1}" ] && ! [ -x "${1}" ]; }; then
+  set -- node "$@"
+fi
+
+exec "$@"

docker/Dockerfile

@@ -1,5 +1,99 @@
-# pull official base image
-FROM node:13.12.0-alpine
+FROM alpine:3.15
+
+ENV NODE_VERSION 14.19.0
+
+RUN addgroup -g 1000 node \
+    && adduser -u 1000 -G node -s /bin/sh -D node \
+    && apk add --no-cache \
+        libstdc++ \
+    && apk add --no-cache --virtual .build-deps \
+        curl \
+    && ARCH= && alpineArch="$(apk --print-arch)" \
+      && case "${alpineArch##*-}" in \
+        x86_64) \
+          ARCH='x64' \
+          CHECKSUM="8d5e638d88b62de2f147dee812a5d74e4860a20468eb7ff32c41a02b58e2aebf" \
+          ;; \
+        *) ;; \
+      esac \
+  && if [ -n "${CHECKSUM}" ]; then \
+    set -eu; \
+    curl -fsSLO --compressed "https://unofficial-builds.nodejs.org/download/release/v$NODE_VERSION/node-v$NODE_VERSION-linux-$ARCH-musl.tar.xz"; \
+    echo "$CHECKSUM  node-v$NODE_VERSION-linux-$ARCH-musl.tar.xz" | sha256sum -c - \
+      && tar -xJf "node-v$NODE_VERSION-linux-$ARCH-musl.tar.xz" -C /usr/local --strip-components=1 --no-same-owner \
+      && ln -s /usr/local/bin/node /usr/local/bin/nodejs; \
+  else \
+    echo "Building from source" \
+    # backup build
+    && apk add --no-cache --virtual .build-deps-full \
+        binutils-gold \
+        g++ \
+        gcc \
+        gnupg \
+        libgcc \
+        linux-headers \
+        make \
+        python3 \
+    # gpg keys listed at https://github.com/nodejs/node#release-keys
+    && for key in \
+      4ED778F539E3634C779C87C6D7062848A1AB005C \
+      94AE36675C464D64BAFA68DD7434390BDBE9B9C5 \
+      74F12602B6F1C4E913FAA37AD3A89613643B6201 \
+      71DCFD284A79C3B38668286BC97EC7A07EDE3FC1 \
+      8FCCA13FEF1D0C2E91008E09770F7A9A5AE15600 \
+      C4F0DFFF4E8C1A8236409D08E73BC641CC11F4C8 \
+      C82FA3AE1CBEDC6BE46B9360C43CEC45C17AB93C \
+      DD8F2338BAE7501E3DD5AC78C273792F7D83545D \
+      A48C2BEE680E841632CD4E44F07496B3EB3C1762 \
+      108F52B48DB57BB0CC439B2997B01419BD92F80A \
+      B9E2F5981AA6E0CD28160D9FF13993A75599653C \
+    ; do \
+      gpg --batch --keyserver hkps://keys.openpgp.org --recv-keys "$key" || \
+      gpg --batch --keyserver keyserver.ubuntu.com --recv-keys "$key" ; \
+    done \
+    && curl -fsSLO --compressed "https://nodejs.org/dist/v$NODE_VERSION/node-v$NODE_VERSION.tar.xz" \
+    && curl -fsSLO --compressed "https://nodejs.org/dist/v$NODE_VERSION/SHASUMS256.txt.asc" \
+    && gpg --batch --decrypt --output SHASUMS256.txt SHASUMS256.txt.asc \
+    && grep " node-v$NODE_VERSION.tar.xz\$" SHASUMS256.txt | sha256sum -c - \
+    && tar -xf "node-v$NODE_VERSION.tar.xz" \
+    && cd "node-v$NODE_VERSION" \
+    && ./configure \
+    && make -j$(getconf _NPROCESSORS_ONLN) V= \
+    && make install \
+    && apk del .build-deps-full \
+    && cd .. \
+    && rm -Rf "node-v$NODE_VERSION" \
+    && rm "node-v$NODE_VERSION.tar.xz" SHASUMS256.txt.asc SHASUMS256.txt; \
+  fi \
+  && rm -f "node-v$NODE_VERSION-linux-$ARCH-musl.tar.xz" \
+  && apk del .build-deps \
+  # smoke tests
+  && node --version \
+  && npm --version
+
+ENV YARN_VERSION 1.22.17
+
+RUN apk add --no-cache --virtual .build-deps-yarn curl gnupg tar \
+  && for key in \
+    6A010C5166006599AA17F08146C2130DFD2497F5 \
+  ; do \
+    gpg --batch --keyserver hkps://keys.openpgp.org --recv-keys "$key" || \
+    gpg --batch --keyserver keyserver.ubuntu.com --recv-keys "$key" ; \
+  done \
+  && curl -fsSLO --compressed "https://yarnpkg.com/downloads/$YARN_VERSION/yarn-v$YARN_VERSION.tar.gz" \
+  && curl -fsSLO --compressed "https://yarnpkg.com/downloads/$YARN_VERSION/yarn-v$YARN_VERSION.tar.gz.asc" \
+  && gpg --batch --verify yarn-v$YARN_VERSION.tar.gz.asc yarn-v$YARN_VERSION.tar.gz \
+  && mkdir -p /opt \
+  && tar -xzf yarn-v$YARN_VERSION.tar.gz -C /opt/ \
+  && ln -s /opt/yarn-v$YARN_VERSION/bin/yarn /usr/local/bin/yarn \
+  && ln -s /opt/yarn-v$YARN_VERSION/bin/yarnpkg /usr/local/bin/yarnpkg \
+  && rm yarn-v$YARN_VERSION.tar.gz.asc yarn-v$YARN_VERSION.tar.gz \
+  && apk del .build-deps-yarn \
+  # smoke test
+  && yarn --version
+
+COPY docker-entrypoint.sh /usr/local/bin/
+ENTRYPOINT ["docker-entrypoint.sh"]
 
 # set working directory
 WORKDIR /app
@@ -12,9 +106,13 @@ COPY package.json ./
 #COPY package-lock.json ./
 RUN npm install --silent
 RUN npm install react-scripts@3.4.1 -g --silent
+RUN npm install -g serve
 
 # add app
 COPY . ./
 
+# build app
+RUN npm run-script build
+
 # start app
-CMD ["npm", "start"]
+CMD ["serve", "-s", "build"]

public/index.html

@@ -26,19 +26,42 @@
       Learn how to configure a non-root public URL by running `npm run build`.
     -->
     <title>WrenchBoard</title>
+    <meta property="og:image" content="%PUBLIC_URL%/favicon.png" />
+    <meta property="business:contact_data:street_address" content="Cumberland Pkwy">
+    
+
+
+    <script>
+      (function (i, s, o, g, r, a, m) {
+          i['GoogleAnalyticsObject'] = r;
+          i[r] = i[r] || function () {
+              (i[r].q = i[r].q || []).push(arguments)
+          }, i[r].l = 1 * new Date();
+          a = s.createElement(o),
+                  m = s.getElementsByTagName(o)[0];
+          a.async = 1;
+          a.src = g;
+          m.parentNode.insertBefore(a, m)
+      })(window, document, 'script', 'https://www.google-analytics.com/analytics.js', 'ga');
+
+      ga('create', 'UA-54829827-4', 'auto');
+      ga('send', 'pageview');
+
+  </script>
   </head>
   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>
     <div id="root"></div>
     <!--
-      This HTML file is a template.
-      If you open it directly in the browser, you will see an empty page.
-
-      You can add webfonts, meta tags, or analytics to this file.
-      The build step will place the bundled scripts into the <body> tag.
-
-      To begin the development, run `npm start` or `yarn start`.
-      To create a production bundle, use `npm run build` or `yarn build`.
+      need jv8
     -->
   </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>

src/Config/config.js

@@ -12,10 +12,14 @@ function getConfig() {
             "apple_app": 'https://itunes.apple.com/us/app/wrenchboard/id1435718367?ls=1&mt=8',
             "facebook_link": 'https://www.facebook.com/wrenchboard',
             "twitter_link": 'https://twitter.com/wrenchboard/',
+            "linked_link": "https://www.linkedin.com/company/wrenchboard/",
             "support_email": 'support@wrenchboard.com',
             "support_phone": '404 855-7966',
-            "support_us_address": 'Atlanta,GA 30339',
+            "support_phone_ng": '(+420) 336 476 328',
+            "support_us_address": 'Cumberland Pkwy, Atlanta GA 30339',
+            "support_ng_address": 'Saka Tinubu Street, Victoria Island Lagos, Nigeria',
             "dummy": "2018-06-25T18:54:22.000Z",
+            "user_service_endpoint": process.env.REACT_APP_AUX_ENDPOINT,
         }
     ];
 

src/Routes.js

@@ -20,6 +20,7 @@ import UseCases from './components/UseCases';
 
 import Privacy from './components/Service/Privacy';
 import Terms from './components/Service/Terms';
+import FAQ from './components/FAQ/Index';
 
 function Routes() {
     const [loading, setLoading] = useState(true);
@@ -52,6 +53,7 @@ function Routes() {
                             <Route exact path="/privacy" component={Privacy} />
                             <Route exact path="/about-us" component={AboutUs} />
                             <Route exact path="/contact" component={Contact} />
+                            <Route exact path="/faq" component={FAQ} />
                             <Route exact path="/error" component={Error} />
                             <Route component={Error} />
                         </Switch>

src/Services/ContactData.js

@@ -0,0 +1,11 @@
+import Axios from 'axios';
+import getConfig from './../Config/config'
+
+async function ContactData(callData) {
+    // debugger;
+    var site = getConfig()[0];
+    let response = await Axios.post(`${process.env.REACT_APP_AUX_ENDPOINT}/sitecontact`, callData);
+    return response.data.result;
+}
+
+export default ContactData;

src/Services/FaqData.js

@@ -0,0 +1,11 @@
+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`);
+    return await response;
+}
+
+export default FaqData;

src/Services/JobsData.js

@@ -1,146 +1,24 @@
-// http://172.31.4.19:8000/wordpress-data
-
-//import React from 'react';
 import Axios from 'axios';
+import getConfig from './../Config/config'
 
-function JobsData() {
-
-    var callData =[ {
+async function JobsData() {
+    var site = getConfig()[0];
+    var callData = [{
         "limit": 10,
-        "page":1
-    } ];
-
-    console.log("~~~~~~~~ ameye jobData ~~~~~~~~~");
-var res = null;
-   const getWrenchBoardJobs = () => {
-        Axios.post("https://www.wrenchboard.com/svs/user/startjoblist",callData).then((response) => {
-           console.log(response);
-           res = response;
-           console.log("~~~~~~~~ jobData ~~~~~~~~~");
-           return response;
-          // console.log(blogResultData);
+        "page": 1
+    }];
+/*
+    var res = null;
+    const getWrenchBoardJobs = () => {
+        Axios.post("https://dashboard.wrenchboard.com/svs/user/startjoblist", callData).then((response) => {
+            res = response;
+            return response;
         });
     }
-
-  /*  return (
-        <>
-            Ameye
-        </>
-    );
 */
-getWrenchBoardJobs();
-
-//console.log(getWrenchBoardBlog());
-
-//console.log("Ameye got here");
- //   return blogResultData; // getWrenchBoardBlog();
-
- var res1  =[
-    {
-        "title": "Post 5 articles to social ",
-        "description": "This  task is about posting 5 articles like from www.dorcastore.com to you Facebook page",
-        "id": "109",
-        "job_description": null,
-        "price": null,
-        "timeline_days": null,
-        "expire": "5th Jan 2022",
-        "sent": null
-    },
-    {
-        "title": "Article",
-        "description": "Opinion (Nigeria economy/politics) for Publication",
-        "id": "108",
-        "job_description": null,
-        "price": null,
-        "timeline_days": null,
-        "expire": "5th Dec 2019",
-        "sent": null
-    },
-    {
-        "title": "Create a family related article for my blog",
-        "description": "Propose a title and write about 500-word article for my blog",
-        "id": "23",
-        "job_description": null,
-        "price": null,
-        "timeline_days": null,
-        "expire": "14th Nov 2018",
-        "sent": null
-    },
-    {
-        "title": "Promote my blog with your Facebook page",
-        "description": "You will need to have a Facebook page with at least 400 friends to for this task",
-        "id": "73",
-        "job_description": null,
-        "price": null,
-        "timeline_days": null,
-        "expire": "14th Nov 2018",
-        "sent": null
-    },
-    {
-        "title": "Promote health care based articles",
-        "description": "Promote by placing my articles on your blog with good Alexa ranking ",
-        "id": "92",
-        "job_description": null,
-        "price": null,
-        "timeline_days": null,
-        "expire": "14th Nov 2018",
-        "sent": null
-    },
-    {
-        "title": "Pictures of Product Display In Supermarket",
-        "description": "We are conducting a product research and I want to know the most common products in my line of business. Go to ten supermarkets around and take pictures of the wine sections clearly showing the wines",
-        "id": "103",
-        "job_description": null,
-        "price": null,
-        "timeline_days": null,
-        "expire": "9th Nov 2018",
-        "sent": null
-    },
-    {
-        "title": "Write a Health Article for a blog",
-        "description": "Write a 1-page article on “The need for healthy eating in Nigeria”. The article is for publication on a health and wellness blog.",
-        "id": "101",
-        "job_description": null,
-        "price": null,
-        "timeline_days": null,
-        "expire": "9th Nov 2018",
-        "sent": null
-    },
-    {
-        "title": "Who are Niger Delta's Warlords?",
-        "description": "Describe the situation that led to Niger Delta Amnesty Programme?",
-        "id": "105",
-        "job_description": null,
-        "price": null,
-        "timeline_days": null,
-        "expire": "31st Oct 2018",
-        "sent": null
-    },
-    {
-        "title": "What is Niger Delta Ecology?",
-        "description": "Write article on Niger Delta Ecology",
-        "id": "104",
-        "job_description": null,
-        "price": null,
-        "timeline_days": null,
-        "expire": "28th Oct 2018",
-        "sent": null
-    },
-    {
-        "title": "Promote health care based articles",
-        "description": "Promote by placing my articles on your blog with good Alexa ranking ",
-        "id": "92",
-        "job_description": null,
-        "price": null,
-        "timeline_days": null,
-        "expire": "25th Jul 2018",
-        "sent": null
-    }
-];
-
-
- return res1;
-  }
+    let response = await Axios.post(process.env.REACT_APP_AUX_ENDPOINT+'/startjoblist', callData);
+    return await response;
+}
 
 export default JobsData;
 

src/assets/css/default.css

@@ -4,6 +4,9 @@ a {
     text-decoration: none;
     background-color: transparent;
 }
+.expire{
+	color:red;
+}
 .mt-5 {
 	margin-top: 5px;
 }

src/assets/css/main.css

@@ -174,34 +174,36 @@ p {
 .appie-section-title .appie-title {
   font-size: 44px;
   line-height: 54px;
-  color: #08538d;
+  /* color: #08538d; */
+  letter-spacing: 2px;
+  text-shadow: 0px 4px 10px rgba(0,0,0,0.3);
 }
 @media only screen and (min-width: 992px) and (max-width: 1200px) {
   .appie-section-title .appie-title {
     font-size: 36px;
     line-height: 46px;
-    color: #08538d;
+    /* color: #08538d; */
   }
 }
 @media only screen and (min-width: 768px) and (max-width: 991px) {
   .appie-section-title .appie-title {
     font-size: 36px;
     line-height: 46px;
-    color: #08538d;
+    /* color: #08538d; */
   }
 }
 @media (max-width: 767px) {
   .appie-section-title .appie-title {
     font-size: 26px;
     line-height: 36px;
-    color: #08538d;
+    /* color: #08538d; */
   }
 }
 @media only screen and (min-width: 576px) and (max-width: 767px) {
   .appie-section-title .appie-title {
     font-size: 36px;
     line-height: 46px;
-    color: #08538d;
+    /* color: #08538d; */
   }
 }
 .appie-section-title p {
@@ -1405,8 +1407,8 @@ p {
     3.APPIE HERO css 
 ===========================*/
 .appie-hero-area {
-  padding-top: 200px;
-  padding-bottom: 110px;
+  padding-top: 120px;
+  padding-bottom: 30px;
   overflow: hidden;
   position: relative;
   z-index: 10;
@@ -1430,6 +1432,8 @@ p {
   line-height: 80px;
   padding: 0 80px;
   color: #08538d;
+  letter-spacing: 2px;
+  text-shadow: 0px 4px 10px rgba(0,0,0,0.3);
 }
 @media only screen and (min-width: 992px) and (max-width: 1200px) {
   .appie-hero-area.appie-hero-3-area .appie-hero-content .appie-title {
@@ -1726,7 +1730,7 @@ p {
   }
 }
 .appie-hero-content > span {
-  color: #2b70fa;
+  color: #4687ba;
   font-size: 14px;
   font-weight: 500;
 }
@@ -1735,6 +1739,8 @@ p {
   line-height: 70px;
   margin-top: 10px;
   margin-bottom: 22px;
+  letter-spacing: 4.6px;
+  text-shadow: 0px 4px 10px rgba(0,0,0,0.3);
 }
 @media only screen and (min-width: 992px) and (max-width: 1200px) {
   .appie-hero-content .appie-title {
@@ -2199,7 +2205,7 @@ p {
 }
 
 .appie-page-title-area {
-  height: 450px;
+  height: 250px;
   background-image: url(../images/service-back.jpg);
   background-size: cover;
   background-position: center;
@@ -2208,7 +2214,7 @@ p {
   align-items: center;
 }
 .appie-page-title-area.appie-page-service-title-area {
-  height: 450px;
+  height: 400px;
   background-image: url(../images/service-back.jpg);
 }
 @media only screen and (min-width: 768px) and (max-width: 991px) {
@@ -2313,7 +2319,15 @@ p {
     4.APPIE SERVOCE css 
 ===========================*/
 .appie-service-area {
-  background: #eef1f6;
+  background: #fbf4fe;
+  position: relative;
+  background-position: 92% 100%;
+  background-repeat: no-repeat;
+  background-size: auto;
+}
+
+.appie-service-area.features-section{
+  /* background: #fff; */
   position: relative;
   background-position: 92% 100%;
   background-repeat: no-repeat;
@@ -2351,8 +2365,8 @@ p {
   width: 70px;
   text-align: center;
   line-height: 70px;
-  background: linear-gradient(135deg, #84bcfa 0%, #2b70fa 100%);
-  box-shadow: 0px 6px 10px 0px rgba(16, 73, 189, 0.3);
+  /*background: linear-gradient(135deg, #84bcfa 0%, #2b70fa 100%);
+  box-shadow: 0px 6px 10px 0px rgba(16, 73, 189, 0.3);*/
   position: relative;
 }
 .appie-single-service .icon > span {
@@ -2379,22 +2393,22 @@ p {
   transform: translateY(-15px);
 }
 .appie-single-service.item-2 .icon {
-  background: linear-gradient(135deg, #f7b8af 0%, #f8452d 100%);
+  /*background: linear-gradient(135deg, #f7b8af 0%, #f8452d 100%);*/
 }
 .appie-single-service.item-2 .icon span {
   background: #f8452d;
 }
 .appie-single-service.item-3 .icon {
-  background: linear-gradient(135deg, #a0eac2 0%, #31c369 100%);
+  /*background: linear-gradient(135deg, #a0eac2 0%, #31c369 100%);*/
 }
 .appie-single-service.item-3 .icon span {
   background: #31c369;
 }
 .appie-single-service.item-4 .icon {
-  background: linear-gradient(135deg, #d8aaff 0%, #9b2cfa 100%);
+  /*background: linear-gradient(135deg, #d8aaff 0%, #9b2cfa 100%);*/
 }
 .appie-single-service.item-4 .icon span {
-  background: #9b2cfa;
+  background: #2b70fa;
 }
 .appie-single-service.appie-single-services-3 {
   background: transparent;
@@ -2460,7 +2474,7 @@ p {
 .appie-single-service-2 {
   border: 1px solid #eef0f4;
   border-radius: 10px;
-  padding: 48px;
+  padding: 40px;
   -webkit-transition: all 0.3s ease-out 0s;
   -moz-transition: all 0.3s ease-out 0s;
   -ms-transition: all 0.3s ease-out 0s;
@@ -2482,6 +2496,10 @@ p {
   color: #fff;
   border-radius: 50%;
 }
+.appie-single-service-2 .icon img {
+  height: 100px;
+  width: 100px;
+}
 .appie-single-service-2 .title {
   font-size: 20px;
   font-weight: 700;
@@ -2535,19 +2553,19 @@ p {
 }
 .appie-single-service-2.appie-single-service-about {
   border-radius: 0;
-  padding: 0 90px 30px 0;
+  /* padding: 0 30px 30px 0; */
   border: 0;
   transition: all linear 0.3s;
 }
 @media only screen and (min-width: 992px) and (max-width: 1200px) {
   .appie-single-service-2.appie-single-service-about {
-    padding-right: 30px;
+    /* padding-right: 30px; */
   }
 }
 @media (max-width: 767px) {
   .appie-single-service-2.appie-single-service-about {
-    padding-right: 50px;
-    padding-left: 50px;
+    /* padding-right: 50px;
+    padding-left: 50px; */
   }
 }
 .appie-single-service-2.appie-single-service-about .icon i {
@@ -2626,10 +2644,13 @@ p {
   margin-bottom: 20px;
 }
 .service-details-sidebar .service-category-widget ul li i {
-  color: #2b70fa;
+  color: #4687ba;
   width: 15px;
   margin-right: 15px;
 }
+.service-details-sidebar .service-category-widget ul li a {
+  color: #4687ba;
+}
 .service-details-sidebar .service-category-widget ul li:last-child {
   margin-bottom: 0;
 }
@@ -2643,10 +2664,10 @@ p {
   color: #505056;
 }
 .service-details-sidebar .service-download-widget a:hover {
-  color: #2b70fa;
+  color: #4687ba;
 }
 .service-details-sidebar .service-download-widget i {
-  color: #2b70fa;
+  color: #4687ba;
   padding-right: 15px;
 }
 
@@ -2668,6 +2689,9 @@ p {
   padding-top: 34px;
   padding-bottom: 26px;
 }
+.service-details-content .content p a {
+  color: #4687ba;
+}
 
 .appie-services-8-area .service-thumb {
   margin-left: -50px;
@@ -2786,26 +2810,38 @@ p {
   color: #2b70fa;
   margin-bottom: 8px;
 }
+
+.appie-features-content {
+  background: #fff;
+  border-radius: 6px;
+  padding: 20px;
+  transition: all .25s;
+}
+
+.appie-features-content:hover {
+  box-shadow: 0px 40px 40px 0px rgba(14, 17, 51, 0.1);
+}
+
 .appie-features-content .title {
-  font-size: 44px;
-  line-height: 54px;
+  font-size: 20px;
+  line-height: 24px;
   margin-bottom: 10px;
 }
 @media only screen and (min-width: 992px) and (max-width: 1200px) {
   .appie-features-content .title {
-    font-size: 36px;
-    line-height: 44px;
+    font-size: 18px;
+    line-height: 24px;
   }
 }
 @media (max-width: 767px) {
   .appie-features-content .title {
-    font-size: 30px;
-    line-height: 40px;
+    font-size: 18px;
+    line-height: 24px;
   }
 }
 .appie-features-content p {
-  font-size: 18px;
-  line-height: 28px;
+  font-size: 16px;
+  line-height: 20px;
   padding-bottom: 30px;
 }
 
@@ -2936,13 +2972,13 @@ p {
 @media only screen and (min-width: 768px) and (max-width: 991px) {
   .appie-features-thumb {
     text-align: center;
-    margin-top: 50px;
+    margin-top: 10px;
   }
 }
 @media (max-width: 767px) {
   .appie-features-thumb {
     text-align: center;
-    margin-top: 50px;
+    margin-top: 10px;
   }
 }
 
@@ -2972,6 +3008,7 @@ p {
   position: relative;
   overflow: hidden;
   z-index: 15;
+  background-color: #fbf4fe;
 }
 .appie-traffic-area .traffic-thumb {
   position: absolute;
@@ -5580,7 +5617,7 @@ blockquote cite {
   ul
   li
   a:hover {
-  color: #db0f30;
+  color: #4687ba;
 }
 .appie-footer-area.appie-footer-about-area.appie-footer-8-area
   .footer-widget-info
@@ -5711,7 +5748,7 @@ blockquote cite {
   margin-bottom: 6px;
 }
 .footer-navigation ul li a:hover {
-  color: #2b70fa;
+  color: #4687ba;
 }
 .footer-navigation.footer-navigation-2 ul li a:hover {
   color: #ff3e66;
@@ -5760,9 +5797,9 @@ blockquote cite {
 }
 
 .footer-copyright {
-  padding-top: 35px;
-  border-top: 1px solid #e1e5ec;
-  margin-top: 80px;
+  /* padding-top: 35px; */
+  /* border-top: 1px solid #e1e5ec; */
+  margin-top: 10px;
 }
 @media only screen and (min-width: 768px) and (max-width: 991px) {
   .footer-copyright {
@@ -8199,3 +8236,71 @@ blockquote cite {
 }
 
 /*# sourceMappingURL=style.css.map */
+
+/* CSS FOR FAQ ACCORDION DISPLAY */
+.accordion-con{
+  background-color: #f5f6f7;
+}
+
+.accordion-item{
+  position: relative;
+  overflow: hidden;
+  /* z-index: 1; */
+  border-radius: 5px;
+  box-shadow: 0px 0px 15px #ddd;
+  padding: 10px;
+  background-color: #fff;
+}
+.accordion-title-bar{
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  cursor: pointer;
+  position: relative;
+}
+.accordion-title p {
+  font-weight: 600;
+}
+
+.accordion-title-icon{
+  position: absolute;
+  right: 5px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+.accordion-title-icon img{
+  width: 20px;
+  height: 20px;
+  margin-top: 2px;
+}
+.horizontal{
+  transition: all .5s;
+  display: flex;
+  align-items: center;
+  background-color: skyblue;
+  color: #fff;
+  border-radius: 999px;
+  padding: 2px 3px;
+}
+.vertical{
+  transform: rotate(180deg);
+  background-color: #4687ba;
+}
+
+.accordion-body-hide{
+  position: relative;
+  height: 0;
+  visibility: hidden;
+  transition: all .5s;
+}
+.accordion-body-show{
+  position: relative;
+  /* height: 100px; */
+  visibility: visible;
+  transition: all .5s;
+  /* animation-name: slidedown;
+  animation-timing-function: linear;
+  animation-duration: .5s;
+  animation-fill-mode: forwards; */
+}

src/assets/css/style.css

@@ -5,6 +5,17 @@
   justify-content: center;
   align-items: center;
 }
+.font_black{
+  color: black;
+}
+.font_red{
+  color: red;
+}
+.boxBorder{
+  border-color: aqua;
+  background-color: #f5f6f7 ;
+  height:300px;
+}
 .appie-loader {
   opacity: 0;
 }

src/components/AboutUs/HeaderAbout.js

@@ -2,11 +2,14 @@ import React, { useEffect } from 'react';
 import logo from '../../assets/images/wrenchboard.png';
 import StickyMenu from '../../lib/StickyMenu';
 import Navigation from '../Navigation';
+import getConfig from './../../Config/config'
 
 function HeaderAbout({ action }) {
     useEffect(() => {
         StickyMenu();
     });
+    var site = getConfig()[0];
+
     return (
         <>
             <header className="appie-header-area appie-sticky">
@@ -27,10 +30,10 @@ function HeaderAbout({ action }) {
                             </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="#">
+                                    <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="#">
+                                    <a className="main-btn ml-30" href={process.env.REACT_APP_DASH_URL_SIGNUP}>
                                         Get Started
                                     </a>
                                     <div

src/components/AboutUs/ServicesAbout.js

@@ -1,5 +1,16 @@
 import React from 'react';
 
+import Design from '../../assets/images/value-design.png'
+import Approach from '../../assets/images/value-approach.png'
+import Interactive from '../../assets/images/value-interactive.png'
+import Mobility from '../../assets/images/value-mobility.png'
+import Privacy from '../../assets/images/value-privacy.png'
+import Seamless from '../../assets/images/value-seamless.png'
+
+
+
+
+
 function ServicesAbout() {
     return (
         <>
@@ -20,8 +31,11 @@ function ServicesAbout() {
                                 data-wow-duration="2000ms"
                                 data-wow-delay="200ms"
                             >
-                                <div className="icon">
-                                    <i className="fal fa-tv"></i>
+                                <div className="icon d-flex justify-content-center align-items-center">
+                                    {/* <div className='container'>
+                                        <i className="fal fa-tv"></i>
+                                    </div> */}
+                                    <img src={Design} />
                                 </div>
                                 <h4 className="title">Carefully designed</h4>
                                 <p>We listen to how the users will love to use our tools. It is always about the users</p>
@@ -33,8 +47,11 @@ function ServicesAbout() {
                                 data-wow-duration="2000ms"
                                 data-wow-delay="400ms"
                             >
-                                <div className="icon">
-                                    <i className="fal fa-code"></i>
+                                <div className="icon d-flex justify-content-center align-items-center">
+                                    {/* <div className='container'>
+                                        <i className="fal fa-code"></i>
+                                    </div> */}
+                                    <img src={Approach} />
                                 </div>
                                 <h4 className="title">Modern Approach</h4>
                                 <p>Our target is to present a cutting-edge solution that serves the users at all times.</p>
@@ -46,8 +63,11 @@ function ServicesAbout() {
                                 data-wow-duration="2000ms"
                                 data-wow-delay="600ms"
                             >
-                                <div className="icon">
-                                    <i className="fal fa-user-friends"></i>
+                                <div className="icon d-flex justify-content-center align-items-center">
+                                    {/* <div className='container'>
+                                        <i className="fal fa-user-friends"></i>
+                                    </div> */}
+                                    <img src={Interactive} />
                                 </div>
                                 <h4 className="title">User Interactive</h4>
                                 <p>Email, notifications, and alerts to get you engaged in the process.</p>
@@ -59,8 +79,11 @@ function ServicesAbout() {
                                 data-wow-duration="2000ms"
                                 data-wow-delay="200ms"
                             >
-                                <div className="icon">
-                                    <i className="fal fa-mobile"></i>
+                                <div className="icon d-flex justify-content-center align-items-center">
+                                    {/* <div className='container'>
+                                        <i className="fal fa-mobile"></i>
+                                    </div> */}
+                                    <img src={Mobility} />
                                 </div>
                                 <h4 className="title">Mobility Approach</h4>
                                 <p>Web and native app solution for your continuously moving life.</p>
@@ -72,8 +95,11 @@ function ServicesAbout() {
                                 data-wow-duration="2000ms"
                                 data-wow-delay="400ms"
                             >
-                                <div className="icon">
-                                    <i className="fal fa-retweet"></i>
+                                <div className="icon d-flex justify-content-center align-items-center">
+                                    {/* <div className='container'>
+                                        <i className="fal fa-retweet"></i>
+                                    </div> */}
+                                    <img src={Seamless} />
                                 </div>
                                 <h4 className="title">Seamless Sync</h4>
                                 <p> Changes across platforms is simplified and streamlined.</p>
@@ -85,8 +111,11 @@ function ServicesAbout() {
                                 data-wow-duration="2000ms"
                                 data-wow-delay="600ms"
                             >
-                                <div className="icon">
-                                    <i className="fal fa-bell"></i>
+                                <div className="icon d-flex justify-content-center align-items-center">
+                                    {/* <div className='container'>
+                                        <i className="fal fa-bell"></i>
+                                    </div> */}
+                                    <img src={Privacy} />
                                 </div>
                                 <h4 className="title">Privacy</h4>
                                 <p>We truly respect your need for privacy. Our solution doesn't need to share your data to work for you.</p>

src/components/Contact/Forms.js

@@ -1,6 +1,42 @@
 import React from 'react';
+import getConfig from './../../Config/config'
+import ContactData from '../../Services/ContactData';
+
 
 function Forms() {
+
+    var site = getConfig()[0];
+
+    function handleSubmit(e) {
+        e.preventDefault();
+      //  console.log('You clicked submit.');
+      //  console.log(e);
+       // debugger;
+        const firstname = e.target['f-name'].value;
+        const lastname = e.target['l-name'].value;
+        const email = e.target['email'].value;
+        const phone = e.target['phone'].value;
+        const subject = e.target['subject'].value;
+        const message =  e.target['message'].value;
+        const terms =   e.target['terms-conditions'].checked;
+//alert(terms);
+
+        var callData = [{
+            "firstname": firstname,
+            "lastname": lastname,
+            "email": email,
+            "phone": phone,
+            "subject": subject,
+            "message": message,
+            "channel": 'WEB'
+        }];
+
+       const callRet = ContactData(callData);
+       console.log('You clicked submit========> '+ callRet);
+
+      }
+
+
     return (
         <>
             <section className="contact-section">
@@ -14,14 +50,12 @@ function Forms() {
                                     <h5>Headquaters</h5>
                                     <p>
                                         <i className="fal fa-home"></i>
-                                        Cumberland Pkwy, Atlanta
-                                        <br /> GA 30339
+                                        {process.env.REACT_APP_SUPPORT_US_ADDRESS}
                                     </p>
 
                                     <p>
                                         <i className="fal fa-home"></i>
-                                        Saka Tinubu Street, Victoria Island
-                                        <br />Lagos, Nigeria
+                                        {process.env.REACT_APP_SUPPORT_NG_ADDRESS}
                                     </p>
 
                                 </div>
@@ -29,31 +63,31 @@ function Forms() {
                                     <h5>Phone</h5>
                                     <p>
                                         <i className="fal fa-phone"></i>
-                                        (+1) 404 855-7966
+                                        {process.env.REACT_APP_SUPPORT_PHONE}
                                         <br />
-                                        (+420) 336 476 328
+                                       {process.env.REACT_APP_SUPPORT_PHONE_NG}
                                     </p>
                                 </div>
                                 <div className="single-info">
                                     <h5>Support</h5>
                                     <p>
                                         <i className="fal fa-envelope"></i>
-                                        support@wrenchboard.com
+                                        {process.env.REACT_APP_SUPPORT_EMAIL}
                                        
                                     </p>
                                 </div>
                                 <div className="ab-social">
                                     <h5>Follow Us</h5>
-                                    <a className="fac" href="https://www.facebook.com/wrenchboard">
+                                    <a className="fac" href={process.env.REACT_APP_FACEBOOK_LINK}>
                                         <i className="fab fa-facebook-f"></i>
                                     </a>
-                                    <a className="twi" href="https://www.twitter.com/wrenchboard/">
+                                    <a className="twi" href={process.env.REACT_APP_TWITTER_LINK}>
                                         <i className="fab fa-twitter"></i>
                                     </a>
                                     <a className="you" href="#">
                                         <i className="fab fa-youtube"></i>
                                     </a>
-                                    <a className="lin" href="#">
+                                    <a className="lin" href={process.env.REACT_APP_LINKEDIN_LINK}>
                                         <i className="fab fa-linkedin-in"></i>
                                     </a>
                                 </div>
@@ -62,29 +96,31 @@ function Forms() {
                         <div className="col-md-8">
                             <div className="contact-form">
                                 <h4>Let’s Connect</h4>
-                                <form action="#" method="post" className="row">
+                                <form onSubmit={handleSubmit} className="row">
                                     <div className="col-md-6">
-                                        <input type="text" name="f-name" placeholder="First Name" />
+                                        <input type="text" name="f-name" placeholder="First Name"  maxLength={15} />
                                     </div>
                                     <div className="col-md-6">
-                                        <input type="text" name="l-name" placeholder="Last Name" />
+                                        <input type="text" name="l-name" placeholder="Last Name"  maxLength={15} />
                                     </div>
                                     <div className="col-md-6">
                                         <input
                                             type="email"
                                             name="email"
-                                            placeholder="Email Address"
+                                            placeholder="Email Address" 
+                                            maxLength={35} 
                                         />
                                     </div>
                                     <div className="col-md-6">
                                         <input
                                             type="number"
                                             name="phone"
-                                            placeholder="Phone Number"
+                                            placeholder="Phone Number" 
+                                            maxLength={15} 
                                         />
                                     </div>
                                     <div className="col-md-12">
-                                        <input type="text" name="suject" placeholder="Subject" />
+                                        <input type="text" name="subject" placeholder="Subject"  maxLength={35}  />
                                     </div>
                                     <div className="col-md-12">
                                         <textarea
@@ -94,7 +130,7 @@ function Forms() {
                                     </div>
                                     <div className="col-md-6">
                                         <div className="condition-check">
-                                            <input id="terms-conditions" type="checkbox" />
+                                            <input id="terms-conditions" name="terms-conditions" type="checkbox" />
                                             <label htmlFor="terms-conditions">
                                                 I agree to the <a href="#">Terms & Conditions</a>
                                             </label>
@@ -113,7 +149,7 @@ function Forms() {
             <div className="bisylms-map">
                 <iframe
                     title="map"
-                    src="https://maps.google.com/maps?width=720&amp;height=600&amp;hl=en&amp;coord=39.966528,-75.158284&amp;q=1%20Grafton%20Street%2C%20Dublin%2C%20Ireland+(My%20Business%20Name)&amp;ie=UTF8&amp;t=p&amp;z=16&amp;iwloc=B&amp;output=embed"
+                    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>
         </>

src/components/FAQ/Index.js

@@ -0,0 +1,35 @@
+import React, { useEffect } from 'react';
+import useToggle from '../../Hooks/useToggle';
+import Drawer from '../Mobile/Drawer';
+import FooterHomeOne from '../HomeOne/FooterHomeOne';
+import BackToTop from '../BackToTop';
+import StickyMenu from '../../lib/StickyMenu';
+import FAQService from '../Service/FAQServices';
+import HeroNews from '../News/HeroNews';
+import HeaderNews from '../News/HeaderNews';
+
+
+function FAQ() {
+    useEffect(() => {
+        StickyMenu();
+    });
+    const [drawer, drawerAction] = useToggle(false);
+    return (
+        <>
+            <Drawer drawer={drawer} action={drawerAction.toggle} />
+            <HeaderNews action={drawerAction.toggle} />
+            <HeroNews
+                title="Frequently asked questions"
+                breadcrumb={[
+                    { link: '/', title: 'home' },
+                    { link: '/faq', title: 'Faq' },
+                ]}
+            />
+            <FAQService />
+            <FooterHomeOne />
+            <BackToTop />
+        </>
+    );
+}
+
+export default FAQ;

src/components/Helper/CountDownTimer.js

@@ -0,0 +1,72 @@
+import React, { useEffect, useState } from 'react';
+
+const CountDownTimer = ({ targetDate, aboutToExpire=false }) => {
+  const calculateTimeLeft = () => {
+    const difference = +new Date(targetDate) - +new Date();
+    let timeLeft = {};
+
+    if (difference > 0) {
+      timeLeft = {
+        days: Math.floor(difference / (1000 * 60 * 60 * 24)),
+        hours: Math.floor((difference / (1000 * 60 * 60)) % 24),
+        minutes: Math.floor((difference / 1000 / 60) % 60),
+        seconds: Math.floor((difference / 1000) % 60)
+      };
+    }
+    return timeLeft;
+  };
+
+  const [timeLeft, setTimeLeft] = useState(calculateTimeLeft());
+
+  useEffect(() => {
+    const timer = setInterval(() => {
+      setTimeLeft(calculateTimeLeft());
+    }, 1000);
+
+    return () => clearTimeout(timer);
+  },[]);
+
+  const formatTime = (value) => {
+    return value.toString().padStart(2, '0');
+  };
+
+  const { days, hours, minutes, seconds } = timeLeft;
+  
+  const newHours = hours+days*24
+
+  if (!days && !hours && !minutes && !seconds) {
+    return <span>{targetDate}</span>;
+  }
+
+  return (
+    <div>
+        <div>{formatTime(newHours)} : {formatTime(minutes)} : {formatTime(seconds)}</div>
+        <div>Hrs Min Sec</div>
+        {/* <span className='d-flex flex-column count-timer'>
+            <span>{formatTime(days)}</span>
+            <span>day(s)</span>
+        </span> */}
+        {/* <span className='d-flex flex-column count-timer'>
+            <span>{formatTime(newHours)}</span>
+            <span>hr(s)</span>
+        </span>
+        <span className='p-3'>:</span>
+        <span className='d-flex flex-column count-timer'>
+            <span>{formatTime(minutes)}</span>
+            <span>min(s)</span>
+        </span>
+        <span className='p-3'>:</span>
+        <span className='d-flex flex-column count-timer'>
+            <span>{formatTime(seconds)}</span>
+            <span>sec(s)</span>
+        </span> */}
+    </div>
+  );
+};
+
+export default CountDownTimer;
+
+{/* <span>{days && <span>{formatTime(days)} days </span>}</span> */}
+{/* <span>{hours && <span>{formatTime(hours)} hours </span>}</span> */}
+{/* <span>{minutes && <span>{formatTime(minutes)} minutes </span>}</span> */}
+{/* <span>{seconds && <span>{formatTime(seconds)} seconds </span>}</span> */}

src/components/HomeOne/BlogHomeOne.js

@@ -52,6 +52,8 @@ var res = null;
                         
                      {
                          blogResult.map(i=>{
+                            var options = { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' };
+                            var postDt  = new Date(i.post_date).toLocaleDateString("en-US", options);                             
                             var blgImg  = i.meta_value!=null?"https://blog.wrenchboard.com/wp-content/uploads/"+ i.meta_value : blogOne;
                            return (  <div className="col-lg-4 col-md-6">
                              <div
@@ -65,7 +67,7 @@ var res = null;
                                  <div className="content">
                                      <div className="blog-meta">
                                          <ul>
-                                             <li>{i.post_date}</li>
+                                             <li>{postDt}</li>
                                          </ul>
                                      </div>
                                      <h3 className="title">

src/components/HomeOne/FeaturesHomeOne.js

@@ -1,239 +1,124 @@
 import React, { useState } from 'react';
 import { Link } from 'react-router-dom';
-import thumb from '../../assets/images/ACC.jpg';
-import thumb2 from '../../assets/images/MarketPlace004.jpg';
-import thumb3 from '../../assets/images/CompleteTask002.jpg';
-import thumb4 from '../../assets/images/MoneyBitPay.jpg';
+// import thumb from '../../assets/images/onlineregistration.png';
+// import thumb22 from '../../assets/images/marketplace.png';
+// import thumb3 from '../../assets/images/product-listing-on-online-marketplace.png';
+// import thumb4 from '../../assets/images/flying.png';
+import freeAccount from '../../assets/images/free_account.png';
+import marketPlace from '../../assets/images/market_place.png';
+import task from '../../assets/images/task.png';
+import getPaid from '../../assets/images/get_paid.png';
+
+// import taskThumbnail from '../../assets/images/task-thumb.png'
+// import marketThumbnail from '../../assets/images/market-thumb.png'
+// import getPaidThumbnail from '../../assets/images/getpaid-thumb.png'
+// import accountThumbnail from '../../assets/images/account-thumb.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 getConfig from './../../Config/config'
 
 function FeaturesHomeOne({ className }) {
     var site = getConfig()[0];
-    const [tab, setTab] = useState('setting');
-    const handleClick = (e, value) => {
-        e.preventDefault();
-        setTab(value);
-    };
     return (
-        <section className={`appie-features-area pt-100 pb-90 ${className}`} id="features">
-            <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-user" /> Free Account
-                                </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-search-dollar" /> Marketplace
-                                </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-check" /> Complete Task
-                                </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-comments-dollar" /> Get Paid
-                                </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"
-                                        >
-                                            <img src={thumb} alt="" />
-                                        </div>
-                                    </div>
-                                    <div className="col-lg-6">
-                                        <div
-                                            className="appie-features-content wow animated fadeInRight"
-                                            data-wow-duration="2000ms"
-                                            data-wow-delay="600ms"
-                                        >
-                                            
-                                            <h3 className="title">
-                                               Create free account.
-                                            </h3>
-                                            <p>
-                                               If you are either currently employed, unemployed or unsatisfied with your job or want extra cash on the side, consider WrenchBoard as a reliable partner to connect you with new opportunities.
-                                            </p>
-                                            <Link className="main-btn" to="/about-us">
-                                                Learn More
-                                            </Link>
-                                        </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"
-                                        >
-                                            <img src={thumb2} alt="" />
-                                        </div>
-                                    </div>
-                                    <div className="col-lg-6">
-                                        <div
-                                            className="appie-features-content animated fadeInRight"
-                                            data-wow-duration="2000ms"
-                                            data-wow-delay="600ms"
-                                        >
-                                           
-                                            <h3 className="title">
-                                                Browse Marketplace
-                                            </h3>
-                                            <p>
-                                            WrenchBoard platform connects you with quality service that need articles writing, blog management, photography, product testing research and surveys and more to deliver your project with ease.
-                                            </p>
-                                            <a className="main-btn" href={site.dash_url_login}>
-                                                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"
-                                        >
-                                            <img src={thumb3} alt="" />
-                                        </div>
-                                    </div>
-                                    <div className="col-lg-6">
-                                        <div
-                                            className="appie-features-content animated fadeInRight"
-                                            data-wow-duration="2000ms"
-                                            data-wow-delay="600ms"
-                                        >
-                                           
-                                            <h3 className="title">
-                                            Complete Task
-                                            </h3>
-                                            <p>
-                                                Cash in the Pocket with WrenchBoard as a reliable partner to connect you with new opportunities.Track, Organize your Portfolio and Manage your Skills, preferred workgroup and teams efficiently.
-                                            </p>
-                                            <a className="main-btn" href={site.dash_url_login}>
-                                                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"
-                                        >
-                                            <img src={thumb4} alt="" />
-                                        </div>
-                                    </div>
-                                    <div className="col-lg-6">
-                                        <div
-                                            className="appie-features-content animated fadeInRight"
-                                            data-wow-duration="2000ms"
-                                            data-wow-delay="600ms"
-                                        >
-                                            
-                                            <h3 className="title">
-                                                Get Paid
-                                            </h3>
-                                            <p>
-                                                Get paid Instantly for completed task using WrenchBoard. Achieve your short-term goals or long-term income by Connecting with WrenchBoard. Complete access to your earnings.
-                                            </p>
-                                            <a className="main-btn" href={site.dash_url_login}>
-                                                Learn More
-                                            </a>
-                                        </div>
-                                    </div>
-                                </div>
-                            </div>
-                        </div>
-                    </div>
-                </div>
-            </div>
-           
-        </section>
+        <></>
+        // <section className={`appie-service-area features-section pt-50 pb-100 ${className}`} id="service">
+        //     <div className="container">
+        //         <div className="row">
+        //             <div className="col-xl-3 col-md-6 mb-50">
+        //                 <div
+        //                     className="appie-features-content wow animated fadeInRight"
+        //                     data-wow-duration="2000ms"
+        //                     data-wow-delay="600ms"
+        //                 >
+        //                     <div className='text-center'>
+        //                         <img className='pb-2' src={accountThumbnail} alt='image thumbnail' />
+        //                     </div>
+                            
+        //                     <h3 className="title">
+        //                         Create free account.
+        //                     </h3>
+        //                     <p>
+        //                         If you are either currently employed, unemployed or unsatisfied with your job or want extra cash on the side, consider WrenchBoard as a reliable partner to connect you with new opportunities.
+        //                     </p>
+        //                     <Link className="main-btn" to="/about-us">
+        //                         Learn More
+        //                     </Link>
+        //                     {/* <div
+        //                         className="appie-features-thumb text-center wow animated fadeInUp"
+        //                         data-wow-duration="2000ms"
+        //                         data-wow-delay="200ms"
+        //                     >
+        //                         <img className='p-3' src={freeAccount} alt="" />
+        //                     </div> */}
+        //                 </div>
+        //             </div>
+        //             <div className="col-xl-3 col-md-6 mb-50">
+        //                 <div
+        //                     className="appie-features-content animated fadeInRight"
+        //                     data-wow-duration="2000ms"
+        //                     data-wow-delay="600ms"
+        //                 >
+        //                     <div className='text-center'>
+        //                         <img className='pb-2' src={marketThumbnail} alt='image thumbnail' />
+        //                     </div>
+                            
+        //                     <h3 className="title">
+        //                         Browse Marketplace
+        //                     </h3>
+        //                     <p>
+        //                     WrenchBoard platform connects you with quality service that need articles writing, blog management, photography, product testing research and surveys and more to deliver your project with ease.
+        //                     </p>
+        //                     <a className="main-btn" href={process.env.REACT_APP_DASH_URL_LOGIN}>
+        //                         Learn More
+        //                     </a>
+        //                 </div>
+        //             </div>
+        //             <div className="col-xl-3 col-md-6 mb-50">
+        //                 <div
+        //                     className="appie-features-content animated fadeInRight"
+        //                     data-wow-duration="2000ms"
+        //                     data-wow-delay="600ms"
+        //                 >
+        //                     <div className='text-center'>
+        //                         <img className='pb-2' src={taskThumbnail} alt='image thumbnail' />
+        //                     </div>
+                            
+        //                     <h3 className="title">
+        //                     Complete Task
+        //                     </h3>
+        //                     <p>
+        //                         Cash in the Pocket with WrenchBoard as a reliable partner to connect you with new opportunities.Track, Organize your Portfolio and Manage your Skills, preferred workgroup and teams efficiently.
+        //                     </p>
+        //                     <a className="main-btn" href={process.env.REACT_APP_DASH_URL_LOGIN}>
+        //                         Learn More
+        //                     </a>
+        //                 </div>
+        //             </div>
+        //             <div className="col-xl-3 col-md-6 mb-50">
+        //                 <div
+        //                     className="appie-features-content animated fadeInRight"
+        //                     data-wow-duration="2000ms"
+        //                     data-wow-delay="600ms"
+        //                 >
+        //                     <div className='text-center'>
+        //                         <img className='pb-2' src={getPaidThumbnail} alt='image thumbnail' />
+        //                     </div>
+                            
+        //                     <h3 className="title">
+        //                         Get Paid
+        //                     </h3>
+        //                     <p>
+        //                         Get paid Instantly for completed task using WrenchBoard. Achieve your short-term goals or long-term income by Connecting with WrenchBoard. Complete access to your earnings.
+        //                     </p>
+        //                     <a className="main-btn" href={process.env.REACT_APP_DASH_URL_LOGIN}>
+        //                         Learn More
+        //                     </a>
+        //                 </div>
+        //             </div>
+        //         </div>
+        //     </div>
+        //     {/* <hr className='mt-50'/> */}
+        // </section>
     );
 }
 

src/components/HomeOne/FeaturesHomeOne.js.rej

@@ -1,14 +0,0 @@
-diff a/src/components/HomeOne/FeaturesHomeOne.js b/src/components/HomeOne/FeaturesHomeOne.js	(rejected hunks)
-@@ -1,9 +1,9 @@
- import React, { useState } from 'react';
- import { Link } from 'react-router-dom';
--import thumb from '../../assets/images/HowItWorks.jpg';
-+import thumb from '../../assets/images/ACC.jpg';
- import thumb2 from '../../assets/images/MarketPlace004.jpg';
--import thumb3 from '../../assets/images/CompleteTask.jpg';
--import thumb4 from '../../assets/images/MoneyPay.jpg';
-+import thumb3 from '../../assets/images/CompleteTask002.jpg';
-+import thumb4 from '../../assets/images/MoneyBitPay.jpg';
- 
- import shapeSix from '../../assets/images/shape/shape-6.png';
- import shapeSeven from '../../assets/images/shape/shape-7.png';

src/components/HomeOne/FooterHomeOne.js

@@ -5,6 +5,7 @@ import getConfig from './../../Config/config'
 
 function FooterHomeOne({ className }) {
     var site = getConfig()[0];
+    let newDate = new Date().getFullYear()
 
     return (
         <>
@@ -15,13 +16,13 @@ function FooterHomeOne({ className }) {
                             <div className="footer-about-widget">
                                 <div className="logo">
                                     <a href="#">
-                                        <img src={logo} alt="" />
+                                        <img src={logo} alt="WrenchBoard" />
                                     </a>
                                 </div>
                                 <p>
                                     {`It is simple. You can do something that somebody is ready to pay you for. WrenchBoard is the platform to connect you with earning opportunities. `}
                                 </p>
-                                <a href="/services">
+                                <a href="/service">
                                     Read More <i className="fal fa-arrow-right" />
                                 </a>
                                 <div className="social mt-30">
@@ -32,7 +33,7 @@ function FooterHomeOne({ className }) {
                                             </a>
                                         </li>
                                         <li>
-                                            <a href={site.twitter_link}>
+                                            <a href={process.env.REACT_APP_TWITTER_LINK}>
                                                 <i className="fab fa-twitter" />
                                             </a>
                                         </li>
@@ -107,16 +108,16 @@ 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-35">
+                            <div className="footer-copyright d-flex align-items-center justify-content-between pt-2">
                                 <div className="apps-download-btn">
                                     <ul>
                                         <li>
-                                            <a href={site.apple_app}>
+                                            <a href={process.env.APPLE_APP}>
                                                 <i className="fab fa-apple" /> Download for iOS
                                             </a>
                                         </li>
                                         <li>
-                                            <a className="item-2" href={site.android_app}>
+                                            <a className="item-2" href={process.env.REACT_APP_ANDROID_APP}>
                                                 <i className="fab fa-google-play" /> Download for
                                                 Android
                                             </a>
@@ -124,7 +125,7 @@ function FooterHomeOne({ className }) {
                                     </ul>
                                 </div>
                                 <div className="copyright-text">
-                                    <p>Copyright © 2022 WrenchBoard. All rights reserved.</p>
+                                    <p>Copyright © {newDate} WrenchBoard. All rights reserved.</p>
                                 </div>
                             </div>
                         </div>

src/components/HomeOne/HeroHomeOne.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import heroThumbOne from '../../assets/images/app-thumb-1.png';
-import heroThumbTwo from '../../assets/images/hero-thumb-2.png';
+import heroThumbTwo from '../../assets/images/app-pic.png';
 import shapeTwo from '../../assets/images/shape/shape-2.png';
 import shapeThree from '../../assets/images/shape/shape-3.png';
 import shapeFour from '../../assets/images/shape/shape-4.png';
@@ -18,19 +18,19 @@ function HeroHomeOne() {
                             <div className="appie-hero-content">
                                 <span>Welcome To WrenchBoard..</span>
                                 <h1 className="appie-title">
-                                    Make money with any skill.
+                                    Earn Money with Any Skill.
                                 </h1>
                                 <p>
-                                    The marketplace to make money from your skills, find, buy and sell professional services. Connect with freelancers to get work done faster.
+                                    The Marketplace platform to earn money with your skills, find, buy and sell professional services. Connect, build an outstanding portfolio and link to an integrated community with best services via a digital platform.
                                 </p>
                                 <ul>
                                     <li>
-                                        <a href={site.apple_app}>
+                                        <a href={process.env.APPLE_APP}>
                                             <i className="fab fa-apple" /> Download for iOS
                                         </a>
                                     </li>
                                     <li>
-                                        <a className="item-2" href={site.android_app}>
+                                        <a className="item-2" href={process.env.REACT_APP_ANDROID_APP}>
                                             <i className="fab fa-google-play" /> Download for
                                             Android
                                         </a>

src/components/HomeOne/HomeOneHeader.js

@@ -28,10 +28,10 @@ function HomeOneHeader({ action }) {
                         </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={site.dash_url_login}>
+                                <a className="login-btn" href={process.env.REACT_APP_DASH_URL_LOGIN}>
                                     <i className="fal fa-user" /> Login
                                 </a>
-                                <a className="main-btn ml-30" href={site.dash_url_signup}>
+                                <a className="main-btn ml-30" href={process.env.REACT_APP_DASH_URL_SIGNUP}>
                                     Get Started
                                 </a>
                                 <div

src/components/HomeOne/RecentJobsOne.js

@@ -1,88 +1,136 @@
-import React from 'react';
+import React, { Component } from 'react';
 import blogOne from '../../assets/images/blog-1.jpg';
 import blogTwo from '../../assets/images/blog-2.jpg';
 import blogThree from '../../assets/images/blog-3.jpg';
 import JobsData from '../../Services/JobsData';
+import getConfig from './../../Config/config'
+import CountDownTimer from '../Helper/CountDownTimer';
 
-function RecentJobsOne() {
-    const jobsDataResults = JobsData();
-var dashUrl  = "https://dashboard.wrenchboard.com/";
+class RecentJobsOne extends Component {
 
-    return (
-        <>
-            <section className="appie-blog-area pt-90 pb-95">
-                <div className="container">
-                    <div className="row">
-                        <div className="col-lg-12">
-                            <div className="appie-section-title text-center">
-                                <h3 className="appie-title">WrenchBoard Market</h3>
-                            </div>
-                        </div>
-                    </div>
-                    <div className="row">
+    constructor() {
+      //  debugger;
+        super();
+        this.state = { jobsDataResults: [] };
+    }
 
-                    {
-                         jobsDataResults.map(i=>{
+async componentDidMount(){
+  //  debugger;
+    JobsData().then(res => {
+        this.setState({jobsDataResults:res.data.result_list});
+    }).catch(err => {
+        console.log('startjoblist error', err)
+    })
+}
 
-                           return ( <div className="col-lg-3 col-md-6">
-                            <div
-                                className="appie-blog-item mt-30 wow animated fadeInUp"
-                                data-wow-duration="3000ms"
-                                data-wow-delay="200ms"
-                            >
-                               
-                                <div className="content">
+titleLen(title){
+    let maxl = 45;
+    title.replace('/', ' ');
+    title.replace('www.', '');
+    title.replace('.com', '');
+    title.replace('http//', '');
+    
+    return (title.length > maxl)? title.substring(0,maxl-2)+'...': title;
+}
+    //  if (jobsDataResults ()== null){
+    //       return null;
+    //   }
+    render() {
+        var site = getConfig()[0];
+       if ( this.state.jobsDataResults== undefined ){
+           return null;
+       }
+        var dashUrl = process.env.REACT_APP_DASH_URL;
 
-                                    <h3 className="title">
-                                        <a href={dashUrl}>
-                                            {i.title}
-                                        </a>
-                                    </h3>
-                                        <div className="blog-meta">
-                                        <ul>
-                                            <li>
-                                              <a href={dashUrl}>Expires : {i.expire}</a>
-                                            </li>
-                                        </ul>
-                                    </div>                                
-                                    <a href={dashUrl}>
-                                        Learn More <i className="fal fa-arrow-right" />
-                                    </a>
-                                </div>
-                            </div>
-                        </div>)
+        if (this.state.jobsDataResults.length == 0){
+            return <></>;
+        }
 
-
-                         })
-                    }
-
-
-                        <div className="col-lg-3 col-md-6">
-                            <div
-                                className="appie-blog-item mt-30 wow animated fadeInUp"
-                                data-wow-duration="3000ms"
-                                data-wow-delay="600ms"
-                            >
-                      
-                                <div className="content">
-                                   
-                                    <h3 className="title">
-                                       <a href={dashUrl}>
-                                            Find more oprotunities at our marketplace.
-                                        </a>
-                                    </h3>
-                                    <a href="https://www.wrenchboard.com/login">
-                                       Login now <i className="fal fa-arrow-right" />
-                                    </a>
+        return (
+            <>
+                <section className="appie-blog-area pt-90 pb-95">
+                    <div className="container">
+                        <div className="row">
+                            <div className="col-lg-12">
+                                <div className="appie-section-title text-center">
+                                    <h3 className="appie-title">Current Projects</h3>
                                 </div>
                             </div>
                         </div>
+                        <div className="row">
 
+                            {
+                                this.state.jobsDataResults.map(i => {
+                                    var options = { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' };
+                                    var postDt  = new Date(i.expire).toLocaleDateString("en-US", options); 
+
+                                    return (<div className="col-lg-3 col-md-6">
+                                        <div
+                                            className="appie-single-service mt-30 wow animated fadeInUp boxBorder d-flex align-items-center"
+                                            data-wow-duration="3000ms"
+                                            data-wow-delay="200ms"
+                                        >
+                                            <div className="content d-flex flex-column justify-content-between align-items-center" style={{height: '260px'}}>
+                                                <div className="titleBox">
+                                                    <h3 className="title">
+                                                        <a href={dashUrl}>
+                                                        <span className='font_black'>{this.titleLen(i.title)} </span>   
+                                                        </a>
+                                                    </h3>
+                                                </div>
+                                                <div className='p-0 container-fluid'>
+                                                    <div><hr /></div>
+                                                    <div className="blog-meta">
+                                                        <ul>
+                                                            <li className="expire">
+                                                                {/* <a href={dashUrl}><span className='font_red'> Expires : {postDt} </span></a> */}
+                                                                <a href={dashUrl}><span className='font_red'> Expires : <CountDownTimer targetDate={postDt}/> </span></a>
+                                                            </li>
+                                                        </ul>
+                                                    </div>
+                                                    <div className='lmoreTxt'>
+                                                        <a href={dashUrl}>
+                                                        Learn More <i className="fal fa-arrow-right" />
+                                                    </a>                                                
+                                                    </div>
+                                                </div>
+                                            </div>
+                                        </div>
+
+                                    </div>)
+
+
+                                })
+                            }
+
+
+                            <div className="col-lg-3 col-md-6">
+                                <div
+                                    className="appie-blog-item mt-30 wow animated fadeInUp"
+                                    data-wow-duration="3000ms"
+                                    data-wow-delay="600ms"
+                                >
+
+                                    <div className="content">
+
+                                        <h3 className="title">
+                                            <a href={dashUrl}>
+                                                Find more opportunities at our marketplace.
+                                            </a>
+                                        </h3>
+                                        <a href="https://dashboard.wrenchboard.com/login">
+                                            Login now <i className="fal fa-arrow-right" />
+                                        </a>
+                                    </div>
+                                </div>
+                            </div>
+
+                        </div>
                     </div>
-                </div>
-            </section>
-        </>
-    );
+                </section>
+            </>
+        );
+    }
 }
 
 export default RecentJobsOne;

src/components/HomeOne/ServicesHomeOne.js

@@ -1,12 +1,15 @@
 import React from 'react';
-import IconOne from '../../assets/images/icon/CreateAccount.png';
-import IconTwo from '../../assets/images/icon/FindTask.png';
-import IconThree from '../../assets/images/icon/Organize.png';
-import IconFour from '../../assets/images/icon/Money.png';
+import IconOne from '../../assets/images/icon/usericon.png';
+import IconTwo from '../../assets/images/icon/Findtaskicon.png';
+import IconThree from '../../assets/images/icon/taskicon.png';
+import IconFour from '../../assets/images/icon/walleticon.png';
+
+// import FirstSlide from '../../assets/images/icon/Untitledxyz.png';
+
 
 function ServicesHomeOne({ className }) {
     return (
-        <section className={`appie-service-area pt-90 pb-100 ${className}`} id="service">
+        <section className={`appie-service-area pt-90 pb-50 ${className}`} id="service">
             <div className="container">
                 <div className="row justify-content-center">
                     <div className="col-lg-8">
@@ -26,8 +29,7 @@ function ServicesHomeOne({ className }) {
                             data-wow-delay="200ms"
                         >
                             <div className="icon">
-                                <img src={IconOne} alt="" />
-                                <span>1</span>
+                                <img src={IconOne} alt="" /> 
                             </div>
                             <h4 className="appie-title">Free Account</h4>
                             <p>Join WrenchBoard.<span>Create an account for Income.</span></p>
@@ -41,7 +43,6 @@ function ServicesHomeOne({ className }) {
                         >
                             <div className="icon">
                                 <img src={IconTwo} alt="" />
-                                <span>2</span>
                             </div>
                             <h4 className="appie-title">Find Task </h4>
                             <p>Build a Self-Portfolio <span>with sole purpose to Cash-Out.</span></p>
@@ -54,8 +55,7 @@ function ServicesHomeOne({ className }) {
                             data-wow-delay="600ms"
 >
                             <div className="icon">
-                                <img src={IconThree} alt="" />
-                                <span>3</span>
+                                <img src={IconThree} alt="" />   
                             </div>
                             <h4 className="appie-title">Complete</h4>
                             <p>Organize and Manage <span>your teams efficiently. </span> Manage your workgroup.</p>
@@ -69,7 +69,6 @@ function ServicesHomeOne({ className }) {
                         >
                             <div className="icon">
                                 <img src={IconFour} alt="" />
-                                <span>4</span>
                             </div>
                             <h4 className="appie-title">Get Paid</h4>
                             <p>Start <span>Boosting your Income </span> By earning Cash for your Time and Skills.</p>

src/components/HomeOne/TrafficHomeTwo.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import thumb from '../../assets/images/PerformingTask.jpg';
+import thumb from '../../assets/images/PerformingTaskNew.png';
 import getConfig from './../../Config/config'
 
 function TrafficHomeOne() {
@@ -52,13 +52,13 @@ function TrafficHomeOne() {
                                     <p>Get your account credited when the job is completed, and the client authorizes payment.</p>
                                 </div>
                             </div>
-                            <div className="col-lg-12">
+                            {/* <div className="col-lg-12">
                                 <div className="traffic-btn mt-50">
-                                    <a className="main-btn" href={site.dash_url_login}>
+                                    <a className="main-btn" href={process.env.REACT_APP_DASH_URL_LOGIN}>
                                         Login <i className="fal fa-arrow-right" />
                                     </a>
                                 </div>
-                            </div>
+                            </div> */}
                         </div>
                     </div>
                 </div>

src/components/Mobile/Drawer.js

@@ -1,8 +1,12 @@
 import React, { useState } from 'react';
 import { Link } from 'react-router-dom';
-import logo from '../../assets/images/logo.png';
+import logo from '../../assets/images/wrenchboard.png';
+import getConfig from './../../Config/config'
+
 
 function Drawer({ drawer, action }) {
+    var site = getConfig()[0];
+
     const [itemSize, setSize] = useState('0px');
     const [item, setItem] = useState('home');
     const handler = (e, value) => {
@@ -30,7 +34,7 @@ function Drawer({ drawer, action }) {
                                     </a>
                                 </div>
                                 <div className="offcanvas-brand text-center mb-40">
-                                    <img src={logo} alt="" />
+                                    <img src={logo} alt="WrechBoard" />
                                 </div>
                                 <div id="menu" className="text-left ">
                                     <ul className="offcanvas_main_menu">
@@ -39,21 +43,9 @@ function Drawer({ drawer, action }) {
                                             id="home"
                                             className="menu-item-has-children active"
                                         >
-                                            <span className="menu-expand">
-                                                <i className="fa fa-angle-down"></i>
-                                            </span>
-                                            <a href="#">Home</a>
-                                            <ul
-                                                className="sub-menu"
-                                                style={{
-                                                    height: item === 'home' ? itemSize : '0px',
-                                                }}
-                                            >
-                                                <li>
-                                                    <Link to="/">Home 1</Link>
-                                                </li>
-                                              
-                                            </ul>
+                                          
+                                            <a href="/">Home</a>
+                                            
                                         </li>
                                         <li
                                             onClick={(e) => handler(e, 'service')}
@@ -62,53 +54,12 @@ function Drawer({ drawer, action }) {
                                         >
                                             <Link to="/service">Service</Link>
                                         </li>
-                                        <li
-                                            onClick={(e) => handler(e, 'pages')}
-                                            id="pages"
-                                            className="menu-item-has-children active"
-                                        >
-                                            <span className="menu-expand">
-                                                <i className="fa fa-angle-down"></i>
-                                            </span>
-                                            <a href="#">Pages</a>
-                                            <ul
-                                                className="sub-menu"
-                                                style={{
-                                                    height: item === 'pages' ? itemSize : '0px',
-                                                }}
-                                            >
-                                                <li>
+                                        <li>
                                                     <Link to="/about-us">About Us</Link>
                                                 </li>
 
-                                                <li>
-                                                    <Link to="/error">Error</Link>
-                                                </li>
-                                            </ul>
-                                        </li>
-                                        <li
-                                            onClick={(e) => handler(e, 'news')}
-                                            id="news"
-                                            className="menu-item-has-children active"
-                                        >
-                                            <span className="menu-expand">
-                                                <i className="fa fa-angle-down"></i>
-                                            </span>
-                                            <a href="#">News</a>
-                                            <ul
-                                                className="sub-menu"
-                                                style={{
-                                                    height: item === 'news' ? itemSize : '0px',
-                                                }}
-                                            >
-                                                <li>
-                                                    <Link to="/news">news page</Link>
-                                                </li>
-                                                <li>
-                                                    <Link to="/news/single-news">Single News</Link>
-                                                </li>
-                                            </ul>
-                                        </li>
+                                        
+                                      
                                         <li
                                             onClick={(e) => handler(e, 'contact')}
                                             id="contact"
@@ -121,25 +72,16 @@ function Drawer({ drawer, action }) {
                                 <div className="offcanvas-social">
                                     <ul className="text-center">
                                         <li>
-                                            <a href="$">
+                                            <a href={process.env.REACT_APP_FACEBOOK_LINK} >
                                                 <i className="fab fa-facebook-f"></i>
                                             </a>
                                         </li>
                                         <li>
-                                            <a href="$">
+                                            <a href={site.twitter_link}>
                                                 <i className="fab fa-twitter"></i>
                                             </a>
                                         </li>
-                                        <li>
-                                            <a href="$">
-                                                <i className="fab fa-instagram"></i>
-                                            </a>
-                                        </li>
-                                        <li>
-                                            <a href="$">
-                                                <i className="fab fa-dribbble"></i>
-                                            </a>
-                                        </li>
+                                      
                                     </ul>
                                 </div>
                                 <div className="footer-widget-info">
@@ -147,18 +89,18 @@ function Drawer({ drawer, action }) {
                                         <li>
                                             <a href="#">
                                                 <i className="fal fa-envelope"></i>{' '}
-                                                support@appie.com
+                                               {process.env.REACT_APP_SUPPORT_EMAIL}
                                             </a>
                                         </li>
                                         <li>
                                             <a href="#">
-                                                <i className="fal fa-phone"></i> +(642) 342 762 44
+                                                <i className="fal fa-phone"></i> {process.env.REACT_APP_SUPPORT_PHONE}
                                             </a>
                                         </li>
                                         <li>
                                             <a href="#">
-                                                <i className="fal fa-map-marker-alt"></i> 442 Belle
-                                                Terre St Floor 7, San Francisco, AV 4206
+                                                <i className="fal fa-map-marker-alt"></i> 
+                                                {site.support_us_address}
                                             </a>
                                         </li>
                                     </ul>
@@ -173,3 +115,4 @@ function Drawer({ drawer, action }) {
 }
 
 export default Drawer;
+

src/components/News/Blogs.js

@@ -13,6 +13,8 @@ function Blogs() {
 
                 {
                     BlogDataResult.map(i => {
+                        var options = { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' };
+                        var postDt  = new Date(i.post_date).toLocaleDateString("en-US", options);
                         var blgImg = i.meta_value != null ? "https://blog.wrenchboard.com/wp-content/uploads/" + i.meta_value : blogOne;
                         return (<div className="col-lg-4 col-md-6">
                             <div
@@ -26,7 +28,7 @@ function Blogs() {
                                 <div className="content">
                                     <div className="blog-meta">
                                         <ul>
-                                            <li>{i.post_date}</li>
+                                            <li>{postDt}</li>
                                         </ul>
                                     </div>
                                     <h3 className="title">

src/components/News/HeaderNews.js

@@ -2,8 +2,10 @@ import React, { useEffect } from 'react';
 import logo from '../../assets/images/wrenchboard.png';
 import StickyMenu from '../../lib/StickyMenu';
 import Navigation from '../Navigation';
+import getConfig from './../../Config/config'
 
 function HeaderNews({ action }) {
+    var site = getConfig()[0];
     useEffect(() => {
         StickyMenu();
     });
@@ -27,10 +29,10 @@ function HeaderNews({ action }) {
                             </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="#">
+                                    <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="#">
+                                    <a className="main-btn ml-30" href={process.env.REACT_APP_DASH_URL_SIGNUP}>
                                         Get Started
                                     </a>
                                     <div

src/components/Service/DetailsPrivacy.js

@@ -35,10 +35,10 @@ function DetailsService() {
 
                                     </p>
                                     <p>
-
+                                    <hr size="1" />
                                     <h4>Use of Personal Information </h4> 
                                     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">
+                                    <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>
@@ -52,6 +52,7 @@ function DetailsService() {
                                     </p>
 
                                     <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>
@@ -63,6 +64,7 @@ Finally, we may share your information with companies that we plan to to merge w
 
 
                                     <p>
+                                    <hr size="1" />
                                    <h4> How We Use Cookies and Related Technologies.</h4>
 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.
@@ -71,18 +73,28 @@ You may elect to disable cookies to prevent installation of cookies from the web
 
 
                                     <p>
+                                    <hr size="1" />
                                     <h4> Measures We Take to Secure Your Information</h4>
 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>
 
 
-                                    <p>
-                                    <h4>Updating Your Information or Opting Out.</h4> 
-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>
+    <p>
+    <hr size="1" />
+    <h4>Updating Your Information or Opting Out.</h4> 
+    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>
 
-<p>
+   
 
+    <p>
+    <hr size="1" />
+    <h4>Deactivate/Delete your account.</h4> 
+    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>
+
+    <p>
+
+<hr size="1" />
 <h4>Changes To the Policy</h4>
 
 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.

src/components/Service/DetailsService.js

@@ -38,7 +38,7 @@ function DetailsService() {
                                        finance & accounting, website & app development, creative & design, 
                                        customer support and operations.
                                        <hr />
-                                       Learn more at < a href ={site.dash_url_login} >WrenchBoard</a>
+                                       Learn more at < a href ={process.env.REACT_APP_DASH_URL_LOGIN} >WrenchBoard</a>
                                     </p>
                                 </div>
                             </div>

src/components/Service/FAQServices.js

@@ -0,0 +1,115 @@
+import React, { useEffect, useState } from 'react';
+import ServiceSideMenu from './ServiceSideMenu';
+import {Link} from 'react-router-dom'
+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">
+                                    <h3 className='p-3 text-center'>Frequently asked questions</h3>
+                                </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 to='/contact'>contact us</Link> </p>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </section>
+        </>
+    );
+}
+
+export default FAQService;
+
+export function Accordion({ datas, name, accordionHandler, isOpen }) {
+    // const [isOpen, setOpen] = React.useState(false);
+    // const accordionHandler = () => {
+    //   setOpen(!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' : ''}`}>
+                <img 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>
+      </>
+    );
+  }

src/components/Service/HeaderService.js

@@ -25,10 +25,10 @@ function HeaderService({ action }) {
                             </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={site.dash_url_login}>
+                                    <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={site.dash_url_signup}>
+                                    <a className="main-btn ml-30" href={process.env.REACT_APP_DASH_URL_SIGNUP}>
                                         Get Started
                                     </a>
                                     <div

src/components/Service/ServiceSideMenu.js

@@ -54,7 +54,7 @@ function ServiceSideMenu() {
                             </a>
                         </li>
                         <li>
-                            <a className="item-2" href={site.android_app}>
+                            <a className="item-2" href={process.env.REACT_APP_ANDROID_APP}>
                                 <i className="fab fa-google-play" /> Download for
                                 Android
                             </a>

src/components/Service/index.js

@@ -8,6 +8,7 @@ import Drawer from '../Mobile/Drawer';
 import DetailsService from './DetailsService';
 import HeaderService from './HeaderService';
 import HeroService from './HeroService';
+import HeroNews from '../News/HeroNews';
 
 function Service() {
     useEffect(() => {
@@ -18,7 +19,14 @@ function Service() {
         <>
             <Drawer drawer={drawer} action={drawerAction.toggle} />
             <HeaderService action={drawerAction.toggle} />
-            <HeroService title="Our Service to you" />
+            {/* <HeroService title="Our Service to you" /> */}
+            <HeroNews
+                title="Services"
+                breadcrumb={[
+                    { link: '/', title: 'home' },
+                    { link: '/service', title: 'Service' },
+                ]}
+            />
             <DetailsService />
             {/*<ProjectHomeOne />*/}
             <FooterHomeOne />

src/components/UseCases/HeaderNews.js

@@ -19,7 +19,7 @@ function HeaderNews({ action }) {
                             <div className="col-lg-2 col-md-4 col-sm-5 col-6 order-1 order-sm-1">
                                 <div className="appie-logo-box">
                                     <a href="/">
-                                        <img src={logo} alt={site.site_name} />
+                                        <img src={logo} alt={process.env.REACT_APP_SITE_NAME} />
                                     </a>
                                 </div>
                             </div>
@@ -30,10 +30,10 @@ function HeaderNews({ action }) {
                             </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={site.dash_url_login}>
+                                    <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={site.dash_url_signup}>
+                                    <a className="main-btn ml-30" href={process.env.REACT_APP_DASH_URL_SIGNUP}>
                                         Get Started
                                     </a>
                                     <div

src/components/UseCases/UseCase.js

@@ -31,11 +31,11 @@ function UseCase() {
                                     <div className="b-post-details">
 
                                         <h3>
-                                            <a href={site.dash_url_login}>
+                                            <a href={process.env.REACT_APP_DASH_URL_LOGIN}>
                                                 {i.title}
                                             </a>
                                         </h3>
-                                        <a className="read-more" href={site.dash_url_login}>
+                                        <a className="read-more" href={process.env.REACT_APP_DASH_URL_LOGIN}>
                                             Learn more<i className="fal fa-arrow-right"></i>
                                         </a>
                                     </div>