font fixing in about and services page

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;
 }
 
@@ -2660,13 +2681,16 @@ p {
 .service-details-content .content .title {
   font-size: 30px;
   margin-bottom: 18px;
+  letter-spacing: 2px;
+  text-shadow: 0px 4px 10px rgba(0,0,0,0.3);
 }
-.service-details-content .content span {
-  font-size: 20px;
-  line-height: 30px;
-  color: #0e1133;
-  padding-top: 34px;
-  padding-bottom: 26px;
+.service-details-content .content p {
+  font-size: 18px;
+  line-height: 28px;
+  padding: 10px 0px;
+}
+.service-details-content .content p a {
+  color: #4687ba;
 }
 
 .appie-services-8-area .service-thumb {
@@ -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;
@@ -3006,9 +3043,14 @@ p {
   color: #2b70fa;
 }
 .appie-traffic-title .title {
+  letter-spacing: 2px;
+  text-shadow: 0px 4px 10px rgba(0,0,0,0.3);
   font-size: 44px;
   line-height: 54px;
 }
+.appie-traffic-title p {
+  font-size: 16px;
+}
 @media only screen and (min-width: 992px) and (max-width: 1200px) {
   .appie-traffic-title .title {
     font-size: 36px;
@@ -5580,7 +5622,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 +5753,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 +5802,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 {
@@ -6260,6 +6302,8 @@ blockquote cite {
 }
 .appie-about-top-title .title {
   font-size: 60px;
+  letter-spacing: 2px;
+  text-shadow: 0px 4px 10px rgba(0,0,0,0.3);
   position: relative;
   z-index: 10;
 }
@@ -8199,3 +8243,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,12 +1,23 @@
 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 (
         <>
             <section className="appie-services-2-area pt-90 pb-55" id="service">
                 <div className="container">
                     <div className="row align-items-end">
-                        <div className="col-lg-6 col-md-8">
+                        <div className="col-12 col-md-8">
                             <div className="appie-section-title">
                                 <h3 className="appie-title">We’re driven by our values</h3>
                                 <p>The app provides design and digital marketing. </p>
@@ -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

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

src/components/Service/DetailsService.js

@@ -25,9 +25,9 @@ function DetailsService() {
                                         An open-platform for you to build your self - image, skills set, branded personality,
                                         carve a network and ofcourse an income flow with ease and satisfaction of self - actualization and accomplishments.
                                     </p>
-                                    <span>
+                                    <p>
                                         A major task done by skilled professional with personal touch and completed within the twinkling of an eye in specified time-frame.
-                                    </span>
+                                    </p>
                                     <p>
                                        WrenchBoard is the marketplace that connects independent talent 
                                        with businesses that requires your skill set and get paid.
@@ -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/DetailsTerms.js

@@ -15,21 +15,19 @@ function DetailsService() {
                             <div className="service-details-content">
                                
                                 <div className="content">
-                                    <h3 className="title">Terms of use</h3>
+                                    <h4 className="title">Terms of use</h4>
                                     <p>
                                     These Website Terms & Conditions (“T&Cs”) apply to your access and use of www.wrenchboard.com,dashboard.wrenchboard.com (the “Site”), including all software, data, reports, text, images, sounds, video, and all contents made available through any portion of the Site (collectively, the “Content”). Content includes all such elements as a whole, as well as individual elements and portions thereof.
                                     <hr />
                                     </p>
-                                    <p>
-                                    <h4>Acceptance of Terms </h4>
-                                    WRENCHBOARD permits you (“User” or “you” or “your”) to access and use the Site and Content, subject to these T&Cs. By accessing or using any portion of the Site, you acknowledge that you have read, understood, and agree to be bound by these T&Cs. If you do not agree with these T&Cs, you must not accept these T&Cs or access or use the site or content.
-                                    
+
+                                    <h4 className="title">Acceptance of Terms </h4>
+                                    <p>WRENCHBOARD permits you (“User” or “you” or “your”) to access and use the Site and Content, subject to these T&Cs. By accessing or using any portion of the Site, you acknowledge that you have read, understood, and agree to be bound by these T&Cs. If you do not agree with these T&Cs, you must not accept these T&Cs or access or use the site or content.
                                     <hr />
                                     </p>
-                                    <p>
 
-                                    <h4>General Conditions of Use </h4> 
-                                        <br />
+                                    <h4 className="title">General Conditions of Use </h4> 
+                                    <p>
                                         <b>Authorization to Access and Use Site and Content.</b> Subject to your compliance with these T&Cs and the provisions hereof, you may access or use the Site and Content solely for the purpose of your evaluation of WRENCHBOARD and WRENCHBOARD’s products and services. You may only link to the Site or Content, or any portion thereof, as expressly permitted by WRENCHBOARD.
                                         <br />
                                         <b>Ownership and Restrictions.</b> All rights, title, and interest in and to the Site and Content will remain with and belong exclusively to WRENCHBOARD. You will not (a) sublicense, resell, rent, lease, transfer, assign, time share or otherwise commercially exploit or make the Site and any Content available to any third party, (b) use the Site and Content in any unlawful manner (including without limitation in violation of any data, privacy or export control laws) or in any manner that interferes with or disrupts the integrity or performance of the Site and Content or their related components, or (c) modify, adapt or hack the Site and Content to, or try to, gain unauthorized access to the restricted portions of the Site and Content or related systems or networks (i.e., circumvent any encryption or other security measures, gain access to any source code or any other underlying form of technology or information, and gain access to any part of the Site and Content, or any other products or services of WRENCHBOARD that are not readily made available to the general public).
@@ -43,8 +41,8 @@ function DetailsService() {
 
                                     </p>
 
+                                    <h4 className="title"> Use of Intellectual Property.</h4>
                                     <p>
-                                    <h4> Use of Intellectual Property.</h4>
 
                                         <b>Rights in User Content.</b> By posting your information and other content (“User Content”) on or through the Site and Content, you grant WRENCHBOARD a worldwide, non-exclusive, perpetual, irrevocable, royalty-free, fully paid, sublicensable and transferable license to use, modify, reproduce, distribute, display, publish and perform User Content in connection with the Site and Content. WRENCHBOARD has the right, but not the obligation, to monitor the Site and Content and User Content. WRENCHBOARD may remove or disable any User Content at any time for any reason, or for no reason at all. 
 
@@ -54,8 +52,8 @@ function DetailsService() {
                                     <hr />
                                     </p>
 
+                                    <h4 className="title">Feedback</h4>
                                     <p>
-                                    <h4>Feedback. </h4>
                                    
                                     You may submit ideas, suggestions, or comments (“Feedback”) regarding the Site and Content or WRENCHBOARD’s business, products, or services. By submitting any Feedback, you acknowledge and agree that (a) your Feedback is provided by you voluntarily and WRENCHBOARD may, without any obligations or limitation, use and exploit such Feedback in any manner and for any purpose, (b) you will not seek and are not entitled to any money or other form of compensation, consideration, or attribution with respect to your Feedback regardless of whether WRENCHBOARD considered or used your Feedback in any manner, and (c) your Feedback is not the confidential or proprietary information of you or any third party.
                                     <hr />
@@ -63,35 +61,32 @@ function DetailsService() {
 
 
                                     <p>
-                                   <h4> Termination of Access Due to Violations.</h4>
+                                   <h4 className="title"> Termination of Access Due to Violations.</h4>
                                    WRENCHBOARD may, in its sole discretion and without prior notice, terminate your access to the Site and/or block your future access to the Site if we determine that you have violated these T&Cs or other agreements or guidelines which may be associated with your use of the Site. You also agree that any violation by you of these T&Cs will cause irreparable harm to WRENCHBOARD, for which monetary damages would be inadequate, and you consent to WRENCHBOARD obtaining any injunctive or equitable relief that WRENCHBOARD deems necessary or appropriate in such circumstances, without limiting WRENCHBOARD’s other available remedies. Further, WRENCHBOARD may, in its sole discretion and without prior notice, terminate your access to the Site, for cause, which includes (but is not limited to) (1) requests by law enforcement or other government agencies, (2) discontinuance or material modification of the Site or any service offered on or through the Site, or (3) unexpected technical issues or problems.
                                         <hr />
                                     </p>
 
 
+                                    <h4 className="title"> T&Cs Updates</h4>
                                     <p>
-                                    <h4> T&Cs Updates.</h4>
                                     WRENCHBOARD reserves the right, at its sole discretion, to change or modify portions of these T&Cs at any time. WRENCHBOARD will post the changes to these T&Cs on the Site and will indicate at the top of this page the date these terms were last revised. It is your responsibility to check the T&Cs periodically for changes. Your continued use of the Site and Content after the date any such changes become effective constitutes your acceptance of the new or revised T&Cs.
                                     <hr />
                                     </p>
 
 
+                                    <h4 className="title">NO WARRANTIES AND DISCLAIMER BY WRENCHBOARD</h4> 
                                     <p>
-                                    <h4>NO WARRANTIES AND DISCLAIMER BY WRENCHBOARD.</h4> 
                                         THE SITE AND CONTENT, AND ALL SERVER AND NETWORK COMPONENTS, ARE PROVIDED ON AN “AS IS” AND “AS AVAILABLE” BASIS WITH ALL ERRORS AND DEFECTS AND WITHOUT ANY WARRANTIES OF ANY KIND, AND WRENCHBOARD EXPRESSLY DISCLAIMS ALL REPRESENTATIONS AND WARRANTIES, INCLUDING ANY IMPLIED WARRANTIES OF ACCURACY, COMPLETENESS, MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE OR NON-INFRINGEMENT, AND ANY REPRESENTATIONS OR WARRANTIES ARISING FROM COURSE OF DEALING, COURSE OF PERFORMANCE OR USAGE OF TRADE. YOU ACKNOWLEDGE THAT WRENCHBOARD DOES NOT WARRANT THAT YOUR ACCESS OR USE OR BOTH OF THE SITE AND CONTENT WILL BE UNINTERRUPTED, TIMELY, SECURE, ERROR-FREE OR VIRUS-FREE, AND WRENCHBOARD DOES NOT MAKE ANY WARRANTY AS TO THE RESULTS THAT MAY BE OBTAINED FROM USE OF THE SITE AND CONTENT. NO INFORMATION, ADVICE OR SERVICES OBTAINED BY YOU FROM WRENCHBOARD OR THROUGH THE SITE WILL CREATE ANY WARRANTY NOT EXPRESSLY STATED IN THESE TERMS and CONDITIONS AND YOU SHOULD NOT RELY ON THE SITE AND THE GENERAL CONTENT ALONE AS THE BASIS FOR YOUR BUSINESS DECISIONS.                                   
                                         <hr/>
                                         WRENCHBOARD reserves the right to do any of the following, at any time, without notice: (1) to modify, suspend or terminate operation of or access to the Site, or any portion of the Site, for any reason; (2) to modify or change the Site, or any portion of the Site, for any reason; and (3) to interrupt the operation of the Site, or any portion of the Site, as necessary to perform routine or non-routine maintenance, error correction, or other changes.
                                         <hr />
                                     </p>
 
-<p>
-
-<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.
-Contacting Us: You may contact us about this policy through our email address anytime : support@wrenchboard.com
-
-</p>
+                                    <h4 className="title">Changes To the Policy</h4>
+                                    <p>
+                                    We reserve the rights to update and make changes to this Privacy policy at anytime. Changes will become effective once posted. However, we will notify you by email or when you log on to the service or website about any changes that fundamentally affect how we manage your personal information.
+                                    Contacting Us: You may contact us about this policy through our email address anytime : support@wrenchboard.com
+                                    </p>
                                 </div>
                             </div>
                         </div>

src/components/Service/FAQServices.js

@@ -0,0 +1,117 @@
+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">
+                                  <div className='content'>
+                                    <h3 className='p-3 text-center title'>Frequently asked questions</h3>
+                                  </div>
+                                </div>
+                                <div className='row'>
+                                    <div class="col-12 col-lg-6 accordion" id="accordionExample">
+                                        {faq.map((item, index)=>{
+                                            if(index%2 == 0 && item.public != 0){
+                                                return(
+                                                <div key={index} className='my-3'>
+                                                    <Accordion name={`faq${index}`} datas={item} accordionHandler={accordionHandler} isOpen={isOpen} />
+                                                </div>
+                                                )
+                                            }
+                                        })}
+                                    </div>
+                                    <div class="col-12 col-lg-6 accordion" id="accordionExample">
+                                        {faq.map((item, index)=>{
+                                            if(index%2 != 0 && item.public != 0){
+                                                return(
+                                                <div key={index} className='my-3'>
+                                                    <Accordion name={`faq${index}`} datas={item} accordionHandler={accordionHandler} isOpen={isOpen} />
+                                                </div>
+                                                )
+                                            }
+                                        })}
+                                    </div>
+                                </div>
+                                <div className='container-fluid text-center'>
+                                    <p className='my-4'>Can't find an answer <Link 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>