added lnd page route

Merge branch 'images-resizing' of WrenchBoard/WrenchBoardMainSite into master
Resized Images for the landing page
2023-11-02 23:35:54 +01:00 · 2023-11-02 14:02:41 +00:00 · 2023-11-02 05:31:18 -07:00 · 2023-11-01 07:42:55 -04:00 · 2023-10-31 15:44:41 +00:00 · 2023-10-31 08:33:55 -07:00
101 changed files with 1409 additions and 472 deletions
@@ -6,7 +6,7 @@ REACT_APP_USERS_ENDPOINT="https://apigate.lotus.g1.wrenchboard.com/en/wrench/api
 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_DASH_URL_SIGNUP="https://dev-users.wrenchboard.com/signup?cnt=us"
 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'
@@ -6,7 +6,7 @@ REACT_APP_USERS_ENDPOINT="https://apigate.lotus.g1.wrenchboard.com/en/wrench/api
 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_DASH_URL_SIGNUP="https://dev-users.wrenchboard.com/signup?cnt=us"
 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'
@@ -1,12 +1,12 @@
 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_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://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_DASH_URL_SIGNUP="https://users.wrenchboard.com/signup?cnt=us"
 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'
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" id="naira"><path fill="#fff" d="M24,5A19,19,0,1,0,43,24,19,19,0,0,0,24,5Zm7,20a1,1,0,0,1,0,2H29v3A1.94,1.94,0,0,1,27.45,32a2,2,0,0,1-2.26-1.08L20,17.05l0,14a1,1,0,0,1-2,0V27H16a1,1,0,0,1,0-2h2V22H16a1,1,0,0,1,0-2h2V17a1.94,1.94,0,0,1,1.55-1.92,2,2,0,0,1,2.26,1.08L27,30,27,16a1,1,0,0,1,2,0v4h2a1,1,0,0,1,0,2H29v3Z" class="color3b3c3d svgShape"></path><path fill="#e3e3e3" d="M24,48A24,24,0,1,1,48,24,24,24,0,0,1,24,48ZM24,2A22,22,0,1,0,46,24,22,22,0,0,0,24,2Z" class="color3b3c3d svgShape"></path></svg>
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16.933 16.933" id="Coin"><path d="M8.452 281.052a7.487 7.487 0 0 0-7.483 7.482 7.485 7.485 0 0 0 7.483 7.48 7.484 7.484 0 0 0 7.48-7.48 7.486 7.486 0 0 0-7.48-7.482zm0 1.232a6.253 6.253 0 0 1 6.248 6.25 6.25 6.25 0 0 1-6.248 6.248c-3.449 0-6.25-2.8-6.25-6.248a6.254 6.254 0 0 1 6.25-6.25zm0 .53a5.717 5.717 0 0 0-5.721 5.72 5.715 5.715 0 0 0 5.72 5.719 5.713 5.713 0 0 0 5.72-5.719 5.715 5.715 0 0 0-5.72-5.72zm-.004 2.011a.265.265 0 0 1 .267.268v.596H9.74a.265.265 0 1 1 0 .529H8.715v2.05h.17c.856 0 1.551.697 1.551 1.555s-.696 1.555-1.549 1.555h-.172v.596a.265.265 0 1 1-.529 0v-.596H7.161a.265.265 0 1 1 0-.53h1.025v-2.05h-.172a1.552 1.552 0 0 1-1.547-1.555c0-.858.694-1.554 1.547-1.554h.172v-.596a.265.265 0 0 1 .262-.268zm-.434 1.393a1.01 1.01 0 0 0-1.018 1.025 1.01 1.01 0 0 0 1.018 1.026h.172v-2.051zm.701 2.58v2.05h.172c.57 0 1.02-.448 1.02-1.025s-.449-1.025-1.022-1.025z" color="#e3e3e3" font-family="sans-serif" font-weight="400" overflow="visible" transform="translate(0 -280.067)" style="line-height:normal;font-variant-ligatures:normal;font-variant-position:normal;font-variant-caps:normal;font-variant-numeric:normal;font-variant-alternates:normal;font-feature-settings:normal;text-indent:0;text-align:start;text-decoration-line:none;text-decoration-style:solid;text-decoration-color:#000;text-transform:none;text-orientation:mixed;shape-padding:0;isolation:auto;mix-blend-mode:normal" fill="#fff" class="color000000 svgShape"></path></svg>
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" data-name="Layer 1" viewBox="0 0 32 32" id="Family"><path d="M26.305 22.723a4.972 4.972 0 0 0-3.176-8.71 9.917 9.917 0 0 0-3.438-2.292 6 6 0 1 0-7.382 0 9.917 9.917 0 0 0-3.438 2.292 4.972 4.972 0 0 0-3.171 8.71A8.005 8.005 0 0 0 1 30a1 1 0 0 0 2 0 6 6 0 0 1 12 0 1 1 0 0 0 2 0 6 6 0 0 1 12 0 1 1 0 0 0 2 0 8.005 8.005 0 0 0-4.695-7.277ZM26 19a3 3 0 1 1-3-3 3 3 0 0 1 3 3ZM12 7a4 4 0 1 1 4 4 4 4 0 0 1-4-4ZM6 19a3 3 0 1 1 3 3 3 3 0 0 1-3-3Zm10 7.136a8.04 8.04 0 0 0-3.695-3.413 4.949 4.949 0 0 0-1.05-8.16 7.984 7.984 0 0 1 9.49 0 4.949 4.949 0 0 0-1.05 8.16A8.04 8.04 0 0 0 16 26.136Z" fill="#4687ba" class="color000000 svgShape"></path></svg>
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 66 66" id="Account"><path fill="#4687ba" d="M19 36.5c-5.8 0-10.6 4.7-10.6 10.6S13.1 57.6 19 57.6 29.5 52.9 29.5 47 24.8 36.5 19 36.5zm0 19.6c-5 0-9.1-4.1-9.1-9.1s4.1-9 9.1-9 9 4 9 9-4 9.1-9 9.1z" class="color000100 svgShape"></path><path fill="#4687ba" d="M65.7 49.6l-.9-5.4c-1.2-8-7.4-14.3-15.1-15.9 1.3-1.6 2.7-3.9 3.3-7.1.5-.8 2.1-3.5 1.5-5.3-.1-.3-.3-.6-.6-.9.7-2 2.3-9-4.8-12.6C38-3.9 28.7 4.7 30.8 14.6c-.2.3-.5.6-.6 1.1-.3 1.3.1 3 1.3 4.9.2.8 1.5 5 3.9 7.9-3.2.8-6 2.4-8.4 4.6-1.2-.7-2.5-1.2-3.8-1.6l-.8-3.3h-6.8l-.8 3.3c-1.3.4-2.6.9-3.8 1.6l-2.8-1.8-4.8 4.8L5.1 39c-.7 1.2-1.2 2.5-1.6 3.8l-3.3.8v6.8l3.3.8c.4 1.3.9 2.6 1.6 3.8l-1.8 2.9 4.8 4.8 2.8-1.8c1.2.7 2.5 1.2 3.8 1.6l.8 3.3h6.8l.8-3.3c1.3-.4 2.6-.9 3.8-1.6l2.8 1.8 4.8-4.8-.3-.5H59c2 0 3.8-.9 5.1-2.4 1.3-1.4 1.9-3.4 1.6-5.4zM32.9 20.1l-.1-.2c-1.7-2.8-1.3-4.2-.8-4.5l.5-.3c-1.8-6 1.4-11.4 5.6-12.9C43.4.5 57 4.1 52 15.9c.3.1 1 .3 1 .6.3 1-.9 3.3-1.5 4.3-1.1 5.3-4.3 9.7-9.2 9.8-5.1 0-8.1-5.5-9.4-10.5zm-3.3 40.7L27 59.2c-1.1.7-2.4 1.5-5.1 2.1l-.7 3h-4.4l-.7-3c-2.3-.5-3.4-1.1-5.1-2.1l-2.6 1.6-3.1-3.1 1.6-2.6C5.7 53.2 5.2 52 4.7 50l-3-.7v-4.4l3-.7c.3-1.4.7-2.9 2.1-5.2l-1.6-2.6 3.1-3.1 2.6 1.6c1.1-.7 2.4-1.5 5.1-2.1l.7-3h4.4l.7 3c2.3.5 3.4 1.1 5.1 2.1l2.6-1.6 3.1 3.1-1.5 2.6c1.2 1.9 1.6 3.1 2.1 5.1l3 .7v4.4l-3 .7c-.3 1.2-.6 2.8-2.1 5.1l1.6 2.6-3.1 3.2zM63 54.1c-1 1.2-2.4 1.8-4 1.8H33.4l-.5-.9c.7-1.2 1.2-2.5 1.6-3.8l3.3-.8v-6.8l-3.3-.8c-.4-1.3-.9-2.6-1.6-3.8l1.8-2.8-4-4c1.8-1.1 3.8-1.9 6-2.4 1.7 1.5 3.8 2.4 6.2 2.2 2.7-.2 4.4-1.2 5.7-2.4 7.6 1.1 13.7 7.1 14.9 14.8l.8 5.4c.2 1.6-.3 3.1-1.3 4.3z" class="color000100 svgShape"></path></svg>
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1792 1792" id="Bank"><path d="m896 78.526 896 358.4v119.466h-119.467q0 24.267-19.133 42-19.133 17.734-45.267 17.734H183.867q-26.134 0-45.267-17.734-19.133-17.733-19.133-42H0V436.926ZM238.933 675.859h238.934v716.8h119.466v-716.8h238.934v716.8h119.466v-716.8h238.934v716.8h119.466v-716.8h238.934v716.8h55.066q26.134 0 45.267 17.733 19.133 17.734 19.133 42v59.734H119.467v-59.734q0-24.266 19.133-42 19.133-17.733 45.267-17.733h55.066v-716.8zm1488.667 896q26.133 0 45.267 17.733 19.133 17.734 19.133 42v119.467H0v-119.467q0-24.266 19.133-42 19.134-17.733 45.267-17.733h1663.2z" fill="#4687ba" class="color000000 svgShape"></path></svg>
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" id="dashboard"><path fill="none" d="M0 0h24v24H0V0z"></path><path d="M4 13h6c.55 0 1-.45 1-1V4c0-.55-.45-1-1-1H4c-.55 0-1 .45-1 1v8c0 .55.45 1 1 1zm0 8h6c.55 0 1-.45 1-1v-4c0-.55-.45-1-1-1H4c-.55 0-1 .45-1 1v4c0 .55.45 1 1 1zm10 0h6c.55 0 1-.45 1-1v-8c0-.55-.45-1-1-1h-6c-.55 0-1 .45-1 1v8c0 .55.45 1 1 1zM13 4v4c0 .55.45 1 1 1h6c.55 0 1-.45 1-1V4c0-.55-.45-1-1-1h-6c-.55 0-1 .45-1 1z" fill="#4687ba" class="color000000 svgShape"></path></svg>
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" id="error"><path fill="#ff1d25" d="M29.75,25.73,18.68,3.59a3,3,0,0,0-4-1.33,3.05,3.05,0,0,0-1.33,1.33L2.25,25.73a3,3,0,0,0,2.68,4.34H27.07a3,3,0,0,0,3-3A2.88,2.88,0,0,0,29.75,25.73ZM16,25.38a.94.94,0,1,1,.94-.94A.94.94,0,0,1,16,25.38Zm.94-4.69a.94.94,0,1,1-1.88,0V11.31a.94.94,0,1,1,1.88,0Z"></path></svg>
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" id="identificationcard"><path fill="#4687ba" d="M0 6v13c0 1.103.897 2 2 2h20c1.103 0 2-.897 2-2V6" class="color2d98d4 svgShape"></path><path fill="#ff6699" d="M22 3H2a2 2 0 0 0-2 2v2h24V5a2 2 0 0 0-2-2z" class="color0377be svgShape"></path><path fill="#e6e7f9" d="M22 3H2C.897 3 0 3.897 0 5v.25c0-1.103.897-2 2-2h20c1.103 0 2 .897 2 2V5c0-1.103-.897-2-2-2z" opacity=".2" class="colorffffff svgShape"></path><path fill="#4687ba" d="M22 20.75H2c-1.103 0-2-.897-2-2V19c0 1.103.897 2 2 2h20c1.103 0 2-.897 2-2v-.25c0 1.103-.897 2-2 2z" opacity=".1" class="color010101 svgShape"></path><path fill="#e6e7f9" d="M13 17h8v1h-8zM13 14h8v1h-8zM13 11h8v1h-8z" class="colorffffff svgShape"></path><circle cx="7" cy="12" r="2" fill="#e6e7f9" class="colorffffff svgShape"></circle><path fill="#e6e7f9" d="M9.987 15.237C9.288 14.9 8.203 14.5 7 14.5s-2.288.4-2.987.737c-.625.3-1.013.9-1.013 1.566V18h8v-1.197c0-.665-.388-1.265-1.013-1.566z" class="colorffffff svgShape"></path><circle cx="17" cy="5" r="1" fill="#ff6699" class="color0a70b9 svgShape"></circle><path fill="#4687ba" d="M17 4.25a.99.99 0 0 1 .975.875C17.98 5.082 18 5.045 18 5a1 1 0 0 0-2 0c0 .044.02.082.025.125A.99.99 0 0 1 17 4.25z" opacity=".1" class="color010101 svgShape"></path><linearGradient id="a" x1="6.973" x2="21.55" y1="1.973" y2="16.55" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#010101" stop-opacity=".1" class="stopColor010101 svgShape"></stop><stop offset="1" stop-color="#010101" stop-opacity="0" class="stopColor010101 svgShape"></stop></linearGradient><path fill="url(#a)" d="M22 21c1.103 0 2-.897 2-2V7H0l14 14h8z"></path><circle cx="7" cy="5" r="1" fill="#ff6699" class="color0a70b9 svgShape"></circle><path fill="#4687ba" d="M7 4.25a.99.99 0 0 1 .975.875C7.98 5.082 8 5.045 8 5a1 1 0 0 0-2 0c0 .044.02.082.025.125A.99.99 0 0 1 7 4.25z" opacity=".1" class="color010101 svgShape"></path><linearGradient id="b" x1="-.708" x2="24.708" y1="6.074" y2="17.925" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#ffffff" stop-opacity=".2" class="stopColorffffff svgShape"></stop><stop offset="1" stop-color="#ffffff" stop-opacity="0" class="stopColorffffff svgShape"></stop></linearGradient><path fill="url(#b)" d="M22 3H2a2 2 0 0 0-2 2v14c0 1.103.897 2 2 2h20c1.103 0 2-.897 2-2V5a2 2 0 0 0-2-2z"></path></svg>
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" enable-background="new 0 0 128 128" viewBox="0 0 128 128" id="Pin"><path fill="#4687ba" d="M106,13.8L91.7,4.6C86.2,1,78.9,2,74.5,7L41.9,46.9c-9.1,0.4-17.9,3.3-25.4,8.7c-0.7,0.5-0.7,1.6,0.1,2.1
+				l10.2,6.6l0,0L46.4,77l-24,41.4c-1.2,2.1-0.7,4.9,1.4,6.3c2.2,1.6,5.2,1.1,6.7-1.1l28-38.8L78,97.5l0,0l10.2,6.6
+				c0.7,0.5,1.7,0.1,1.9-0.8c1.8-9,0.9-18.3-2.5-26.8l23.1-46C113.6,24.5,111.5,17.4,106,13.8z" class="color2d3e50 svgShape"></path></svg>
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" data-name="Layer 1" viewBox="0 0 32 32" id="Family"><path d="M26.305 22.723a4.972 4.972 0 0 0-3.176-8.71 9.917 9.917 0 0 0-3.438-2.292 6 6 0 1 0-7.382 0 9.917 9.917 0 0 0-3.438 2.292 4.972 4.972 0 0 0-3.171 8.71A8.005 8.005 0 0 0 1 30a1 1 0 0 0 2 0 6 6 0 0 1 12 0 1 1 0 0 0 2 0 6 6 0 0 1 12 0 1 1 0 0 0 2 0 8.005 8.005 0 0 0-4.695-7.277ZM26 19a3 3 0 1 1-3-3 3 3 0 0 1 3 3ZM12 7a4 4 0 1 1 4 4 4 4 0 0 1-4-4ZM6 19a3 3 0 1 1 3 3 3 3 0 0 1-3-3Zm10 7.136a8.04 8.04 0 0 0-3.695-3.413 4.949 4.949 0 0 0-1.05-8.16 7.984 7.984 0 0 1 9.49 0 4.949 4.949 0 0 0-1.05 8.16A8.04 8.04 0 0 0 16 26.136Z" fill="#4687ba" class="color000000 svgShape"></path></svg>
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" id="Logout"><path d="M4,12a1,1,0,0,0,1,1h7.59l-2.3,2.29a1,1,0,0,0,0,1.42,1,1,0,0,0,1.42,0l4-4a1,1,0,0,0,.21-.33,1,1,0,0,0,0-.76,1,1,0,0,0-.21-.33l-4-4a1,1,0,1,0-1.42,1.42L12.59,11H5A1,1,0,0,0,4,12ZM17,2H7A3,3,0,0,0,4,5V8A1,1,0,0,0,6,8V5A1,1,0,0,1,7,4H17a1,1,0,0,1,1,1V19a1,1,0,0,1-1,1H7a1,1,0,0,1-1-1V16a1,1,0,0,0-2,0v3a3,3,0,0,0,3,3H17a3,3,0,0,0,3-3V5A3,3,0,0,0,17,2Z" fill="#e07c8a" class="color000000 svgShape"></path></svg>
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" data-name="Layer 1" viewBox="0 0 512 512" id="FindJobs"><path d="M499.22 437.51 433.68 372a23.19 23.19 0 0 0-26.63-4.41l-22.18-22.18A214.71 214.71 0 0 0 62.78 62.78a214.72 214.72 0 0 0 282.6 322.09l22.18 22.18a23.19 23.19 0 0 0 4.44 26.63l65.54 65.54a43.64 43.64 0 0 0 61.71-61.71ZM341.29 369l-.2.18A199.71 199.71 0 0 1 73.39 73.39a199.71 199.71 0 0 1 295.76 267.67l-.22.26q-6.18 7.5-13.14 14.47T341.29 369Zm15.71 6.26c3.21-2.86 6.36-5.8 9.42-8.86s6-6.21 8.86-9.42l20.29 20.3-18.27 18.27Zm131.61 113.35a28.65 28.65 0 0 1-40.49 0l-65.54-65.54a8.22 8.22 0 0 1 0-11.61l28.88-28.88a8.22 8.22 0 0 1 11.61 0l65.54 65.54a28.65 28.65 0 0 1 0 40.49ZM296.08 161h-31v-11.53A21.13 21.13 0 0 0 244 128.36h-58.8a21.13 21.13 0 0 0-21.11 21.11V161h-31a19.82 19.82 0 0 0-19.81 19.81V281a19.83 19.83 0 0 0 19.81 19.82h163A19.84 19.84 0 0 0 315.9 281V180.81A19.83 19.83 0 0 0 296.08 161Zm-117-11.53a6.12 6.12 0 0 1 6.11-6.11H244a6.12 6.12 0 0 1 6.11 6.11V161h-71ZM300.9 281a4.82 4.82 0 0 1-4.82 4.82h-163a4.82 4.82 0 0 1-4.81-4.82v-63.6l63.8 27.77v4.88a14.52 14.52 0 0 0 14.5 14.5h16a14.52 14.52 0 0 0 14.5-14.5v-4.88l63.83-27.77Zm-93.81-31.45v-15h15v15ZM300.9 201l-64.67 28.14a14.5 14.5 0 0 0-13.64-9.63h-16a14.52 14.52 0 0 0-13.59 9.67L128.29 201v-20.19a4.82 4.82 0 0 1 4.81-4.81h163a4.82 4.82 0 0 1 4.82 4.81Zm36.89-109.61c-67.93-67.93-178.47-67.93-246.4 0a174.23 174.23 0 0 0 246.4 246.4 174.23 174.23 0 0 0 0-246.4Zm-10.6 235.8a159.25 159.25 0 1 1 46.63-112.6 158.76 158.76 0 0 1-46.63 112.6Z" fill="#4687ba" class="color000000 svgShape"></path></svg>
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill-rule="evenodd" clip-rule="evenodd" image-rendering="optimizeQuality" shape-rendering="geometricPrecision" text-rendering="geometricPrecision" viewBox="0 0 9362 9362" id="jobsact"><path d="M8967 8103l-423 0 0 -856 423 0c181,0 329,193 329,428l0 0c0,235 -148,428 -329,428zm-4636 0l4066 0 0 -856 -4066 0 0 856zm-139 0l-738 -327 -268 0c-43,0 -138,-45 -138,-101 0,-56 95,-101 138,-101l268 0 738 -327 0 428 0 428zm-3982 -8103l6388 0 210 0 0 210 0 809 -420 0 0 -600 -5969 0 0 8523 5969 0 0 -551 420 0 0 761 0 210 -210 0 -6388 0 -210 0 0 -210 0 -8942 0 -210 210 0zm6598 6523l0 436 -420 0 0 -436 420 0zm2554 -3158l0 2557c0,175 -143,317 -317,317l-5224 0c-174,0 -317,-142 -317,-317l0 -2557 2486 0 0 491c0,244 199,443 443,443 244,0 443,-199 443,-443l0 -491 2486 0zm-3843 -2062l1827 0c121,0 219,98 219,219l0 626 -340 0 0 -506 -1585 0 0 506 -340 0 0 -626c0,-121 99,-219 219,-219zm-1698 1011l5224 0c174,0 317,143 317,317l0 568 -2650 0 0 657c0,154 -126,279 -279,279l0 0c-154,0 -280,-125 -280,-279l0 -657 -2649 0 0 -568c0,-174 143,-317 317,-317zm2612 1387c74,0 134,60 134,134 0,74 -60,134 -134,134 -74,0 -134,-60 -134,-134 0,-74 60,-134 134,-134zm-4430 -2741l2801 0 0 420 -2801 0 0 -420zm-806 4786l2023 0 0 176c0,87 19,170 52,244l-2075 0 0 -420zm0 -3657l2366 0c-167,80 -292,235 -330,421l-2036 0 0 -421zm0 914l2023 0 0 421 -2023 0 0 -421zm0 914l2023 0 0 421 -2023 0 0 -421zm0 915l2023 0 0 420 -2023 0 0 -420zm0 1828l1371 0 0 421 -1371 0 0 -421z" fill="#4687ba" class="color000000 svgShape"></path></svg>
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 128 128" id="Profile"><path fill="#ffffff" d="M108 124H20c-8.8 0-16-7.2-16-16V20c0-8.8 7.2-16 16-16h88c8.8 0 16 7.2 16 16v88c0 8.8-7.2 16-16 16z" class="colorffffff svgShape"></path><path fill="#d2d4d6" d="M4 18.1v21.2h120V18.1c0-7.8-6.3-14.1-14.1-14.1H18.1C10.3 4 4 10.3 4 18.1z" class="colord2d5d6 svgShape"></path><circle cx="20.5" cy="21.1" r="7.1" fill="#7bbaec" class="colorec7bb0 svgShape"></circle><circle cx="59.5" cy="21.1" r="7.1" fill="#4687ba" class="color82cfcd svgShape"></circle><path fill="#57636d" d="M59.5 29.1c-4.4 0-8.1-3.6-8.1-8.1 0-4.4 3.6-8.1 8.1-8.1 4.4 0 8.1 3.6 8.1 8.1-.1 4.5-3.7 8.1-8.1 8.1zm0-14.1c-3.3 0-6.1 2.7-6.1 6.1s2.7 6.1 6.1 6.1 6.1-2.7 6.1-6.1-2.8-6.1-6.1-6.1z" class="color6a576d svgShape"></path><circle cx="40" cy="21.1" r="7.1" fill="#7bbdf1" class="colorf1ed7b svgShape"></circle><path fill="#57636d" d="M20.5 29.1c-4.4 0-8.1-3.6-8.1-8.1 0-4.4 3.6-8.1 8.1-8.1 4.4 0 8.1 3.6 8.1 8.1s-3.6 8.1-8.1 8.1zm0-14.1c-3.3 0-6.1 2.7-6.1 6.1s2.7 6.1 6.1 6.1 6.1-2.7 6.1-6.1-2.7-6.1-6.1-6.1zm39 14.1c-4.4 0-8.1-3.6-8.1-8.1 0-4.4 3.6-8.1 8.1-8.1 4.4 0 8.1 3.6 8.1 8.1-.1 4.5-3.7 8.1-8.1 8.1zm0-14.1c-3.3 0-6.1 2.7-6.1 6.1s2.7 6.1 6.1 6.1 6.1-2.7 6.1-6.1-2.8-6.1-6.1-6.1zM40 29.1c-4.4 0-8.1-3.6-8.1-8.1 0-4.4 3.6-8.1 8.1-8.1s8.1 3.6 8.1 8.1-3.7 8.1-8.1 8.1zM40 15c-3.3 0-6.1 2.7-6.1 6.1s2.7 6.1 6.1 6.1 6.1-2.7 6.1-6.1S43.3 15 40 15zM4 38.3h120v2H4zM108 104.3H20c-.6 0-1-.4-1-1s.4-1 1-1h88c.6 0 1 .4 1 1s-.4 1-1 1zm-48-48H20c-.6 0-1-.4-1-1s.4-1 1-1h40c.6 0 1 .4 1 1s-.4 1-1 1zm0 16H20c-.6 0-1-.4-1-1s.4-1 1-1h40c.6 0 1 .4 1 1s-.4 1-1 1zm0 16H20c-.6 0-1-.4-1-1s.4-1 1-1h40c.6 0 1 .4 1 1s-.4 1-1 1z" class="color6a576d svgShape"></path><path fill="#57636d" d="M108 125H20c-9.4 0-17-7.6-17-17V20c0-9.4 7.6-17 17-17h88c9.4 0 17 7.6 17 17v88c0 9.4-7.6 17-17 17zM20 5C11.7 5 5 11.7 5 20v88c0 8.3 6.7 15 15 15h88c8.3 0 15-6.7 15-15V20c0-8.3-6.7-15-15-15H20z" class="color6a576d svgShape"></path><path fill="#ffffff" d="M108.9 28.1H79.6c-3.9 0-7.1-3.2-7.1-7.1 0-3.9 3.2-7.1 7.1-7.1h29.3c3.9 0 7.1 3.2 7.1 7.1 0 4-3.2 7.1-7.1 7.1z" class="colorffffff svgShape"></path><path fill="#57636d" d="M108.9 29.1H79.6c-4.4 0-8.1-3.6-8.1-8.1 0-4.4 3.6-8.1 8.1-8.1h29.3c4.4 0 8.1 3.6 8.1 8.1s-3.6 8.1-8.1 8.1zM79.6 15c-3.3 0-6.1 2.7-6.1 6.1s2.7 6.1 6.1 6.1h29.3c3.3 0 6.1-2.7 6.1-6.1s-2.7-6.1-6.1-6.1H79.6z" class="color6a576d svgShape"></path><path fill="#5587af" d="M76 55.3h32v32H76z" class="coloraf5655 svgShape"></path><path fill="#57636d" d="M104.8 88.3H79.2c-2.3 0-4.2-1.9-4.2-4.2V58.5c0-2.3 1.9-4.2 4.2-4.2h25.6c2.3 0 4.2 1.9 4.2 4.2v25.6c0 2.3-1.9 4.2-4.2 4.2zm-25.6-32c-1.2 0-2.2 1-2.2 2.2v25.6c0 1.2 1 2.2 2.2 2.2h25.6c1.2 0 2.2-1 2.2-2.2V58.5c0-1.2-1-2.2-2.2-2.2H79.2z" class="color6a576d svgShape"></path></svg>
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="512" height="512" id="success"><path fill="#80af52" d="M256 26c127.03 0 230 102.97 230 230S383.03 486 256 486 26 383.03 26 256 128.97 26 256 26z"></path><path fill="#fff" d="M215.999 386a9.998 9.998 0 0 1-7.525-3.415l-70-80c-3.637-4.156-3.215-10.474.941-14.11s10.475-3.217 14.111.94l60.961 69.67 142.938-238.23c2.842-4.736 8.983-6.273 13.72-3.43 4.736 2.841 6.271 8.984 3.431 13.72l-150 250a9.998 9.998 0 0 1-8.577 4.855z"></path></svg>
@@ -0,0 +1,10 @@
+<svg xmlns="http://www.w3.org/2000/svg" enable-background="new 0 0 64 64" viewBox="0 0 64 64" id="wallet"><path d="M60.94,33.76H59.6V19.85c0-1.69-1.37-3.06-3.06-3.06h-1.61l-0.47-6.54c-0.12-1.67-1.57-2.94-3.27-2.84l-7.3,0.52
+		l-0.18-2.48c-0.12-1.67-1.57-2.95-3.27-2.84L7.83,4.93c-0.82,0.06-1.56,0.43-2.1,1.05C5.19,6.6,4.93,7.39,4.99,8.2l0.61,8.59H3.06
+		C1.37,16.79,0,18.17,0,19.85v38.48c0,1.69,1.37,3.06,3.06,3.06h53.48c1.69,0,3.06-1.37,3.06-3.06V44.43h1.33
+		c1.69,0,3.06-1.37,3.06-3.06v-4.55C64,35.13,62.63,33.76,60.94,33.76z M51.42,9.94c0.27,0,0.51,0.22,0.53,0.49l0.45,6.36H18.55
+		l-0.28-3.97c-0.01-0.19,0.07-0.32,0.13-0.38c0.05-0.06,0.17-0.17,0.36-0.18L51.42,9.94z M7.65,7.64C7.7,7.58,7.82,7.47,8.01,7.46
+		l32.66-2.32c0.27,0,0.51,0.22,0.53,0.49l0.18,2.48L18.58,9.73c-0.82,0.06-1.56,0.43-2.1,1.05c-0.54,0.62-0.8,1.41-0.74,2.22
+		l0.27,3.79H8.14L7.52,8.02C7.5,7.83,7.59,7.7,7.65,7.64z M57.07,58.34c0,0.28-0.24,0.53-0.53,0.53H3.06
+		c-0.28,0-0.53-0.24-0.53-0.53V19.85c0-0.29,0.24-0.53,0.53-0.53h53.48c0.28,0,0.53,0.24,0.53,0.53v13.91h-4.43
+		c-1.69,0-3.06,1.37-3.06,3.06v4.55c0,1.69,1.37,3.06,3.06,3.06h4.43V58.34z M61.47,41.37c0,0.28-0.24,0.53-0.53,0.53h-8.3
+		c-0.28,0-0.53-0.24-0.53-0.53v-4.55c0-0.28,0.24-0.53,0.53-0.53h8.3c0.29,0,0.53,0.24,0.53,0.53V41.37z"></path></svg>
@@ -5,9 +5,9 @@
    <link type="image/png" rel="icon" href="%PUBLIC_URL%/favicon.ico" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="theme-color" content="#000000" />
-    <meta name="description" content="wrenchboard.com is an online marketplace to make money from your skills, find, buy and sell professional services. Connect with freelancers to get work done faster. Trade your freelance services." />
-    <meta name="title" content="WrenchBoard: Find a Freelancer  | Sell Professional Services" />
-    <meta name="keywords" content="Online Jobs, Online Workers, work online Nigeria, hire a freelancer, hire freelancers, freelance marketplace, freelancer hire, freelance service, freelance professional services, How to make money online, find workers online, Online Services, digital services, freelancers community in Ghana, freelancers community in Nigeria, freelancer site in Africa, Best freelance website in Africa,  Freelance Designers, Photographers,  Writers in Nigeria, freelancers, freelance outsourcing in Nigeria, freelance IT services in Nigeria, hire freelancers online in Nigeria, freelance services online in Nigeria, freelance contractor in Nigeria, freelance sites in Nigeria, freelance jobs in Nigeria, freelance projects in Nigeria, freelance jobs online in Nigeria, professional freelancers in Nigeria, buy professional services in Nigeria, professional services jobs, professional business services, professional service providers in Nigeria, freelancing services, freelancing sites in Nigeria, freelancers for hire in Nigeria, freelancer search in Nigeria, search freelancer in Nigeria, find freelancers in Nigeria, Find workers US. Outsource from US to Nigeria, find a freelancer in Nigeria, freelancing projects in Nigeria, web freelancing in Nigeria, outsourcing sites freelancers in Nigeria, website for freelancers in Nigeria, marketplace for freelancers " />
+    <meta name="description" content="WrenchBoard.com is the place to set family goals and reward achievements. Find tasks to earn from, or send tasks for others to perform for you." />
+    <meta name="title" content="WrenchBoard: Reward Accomplishments  | Get Family Engaged" />
+    <meta name="keywords" content="Empower families to reward accomplishment, set goals, and encourage kids to understand goals, earning, and the benefit of savings  – in one app experience. " />

   
    <!-- <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" /> -->
@@ -25,6 +25,10 @@
      work correctly both with client-side routing and a non-root public URL.
      Learn how to configure a non-root public URL by running `npm run build`.
    -->
+
+    <!-- link to font awesome -->
+    <link rel="stylesheet" href="//use.fontawesome.com/releases/v6.4.2/css/all.css">
+    
    <title>WrenchBoard</title>
    <meta property="og:image" content="%PUBLIC_URL%/favicon-32x32.png" />
    <meta property="business:contact_data:street_address" content="Cumberland Pkwy">
@@ -14,6 +14,9 @@ import HomeOne from './components/HomeOne';
 // import HomeThree from './components/HomeThree';
 // import Hometwo from './components/HomeTwo';
 import News from './components/News';
+import Blog from "./components/Blog";
+import BlogDetail from "./components/Blog/BlogDetail";
+
 import SingleNews from './components/News/SingleNews';
 import Service from './components/Service';
 import UseCases from './components/UseCases';
@@ -21,6 +24,7 @@ import UseCases from './components/UseCases';
 import Privacy from './components/Service/Privacy';
 import Terms from './components/Service/Terms';
 import FAQ from './components/FAQ/Index';
+import Lnd from './components/lnd/Lnd';

 function Routes() {
    const [loading, setLoading] = useState(true);
@@ -45,10 +49,11 @@ function Routes() {
                        <Switch>
                            <Route exact path="/" component={HomeOne} />
                            <Route exact path="/eoffer" component={HomeOne} />
-                            <Route exact path="/news" component={News} />
-                            <Route exact path="/blog" component={News} />
+                            {/*<Route exact path="/news" component={News} />*/}
+                            <Route exact path="/blog" component={Blog} />
+                            <Route exact path="/blog/blogdetail/:id" component={BlogDetail} />
                            <Route exact path="/use-cases" component={UseCases} />
-                            <Route exact path="/news/single-news" component={SingleNews} />
+                            {/*<Route exact path="/news/single-news" component={SingleNews} />*/}
                            <Route exact path="/service" component={Service} />
                            <Route exact path="/terms" component={Terms} />
                            <Route exact path="/privacy" component={Privacy} />
@@ -56,6 +61,7 @@ function Routes() {
                            <Route exact path="/contact" component={Contact} />
                            <Route exact path="/faq" component={FAQ} />
                            <Route exact path="/error" component={Error} />
+                            <Route exact path="/lnd/*" component={Lnd} />
                            <Route component={Error} />
                        </Switch>
                    </ScrollToTop>
@@ -5632,6 +5632,9 @@ readers do not read off random characters that represent icons */
 .fa-twitter:before {
  content: "\f099"; }

+.fa-x-twitter:before {
+  content: "\e61b"; }
+
 .fa-twitter-square:before {
  content: "\f081"; }

@@ -29,6 +29,16 @@ body {
  color: #505056;
  overflow-x: hidden;
 }
+
+body[data-theme="dark"] {
+  --logo: url("../images/wrenchboard-logo-text.png") no-repeat;
+}
+
+body[data-theme="light"] {
+  --logo: url("../images/wrenchboard.png") no-repeat;
+}
+
+
 /* ==========================================vue */
 * {
  margin: 0;
@@ -107,12 +117,29 @@ ol {
 }

 p {
-  font-size: 17px;
+  font-size: 18px;
  font-weight: 400;
-  line-height: 24px;
+  line-height: 28px;
  color: #505056;
  margin: 0px;
 }
+.designed-title {
+  font-size: 24px;
+  font-weight: 700;
+  margin-bottom: 10px;
+  margin-top: 30px;
+  padding-bottom: 7px;
+  text-align: center;
+  text-shadow: 3px 4px 10px rgba(0,0,0,.3);
+}
+
+.designed-description {
+  font-size: 20px;
+  line-height: 28px;
+  font-weight: 400;
+  color: #505056;
+  text-align: center;
+}

 .bg_cover {
  background-position: center center;
@@ -890,6 +917,20 @@ p {
 .appie-header-area.appie-header-page-area.appie-sticky.sticky {
  background: #4687ba;
 }
+
+.wrench-logo-box {
+  box-sizing: border-box;
+  -webkit-box-sizing: border-box;
+  scroll-behavior: smooth;
+}
+
+.wrench-logo-box img {
+  max-width: 100%; /* Ensures the image doesn't overflow its container */
+  filter: brightness(1.2); /* Adjust image brightness */
+  opacity: 2.4; /* Adjust image opacity */
+}
+
+
 .appie-header-area.appie-header-7-area.appie-sticky.sticky {
  background: #290645;
 }
@@ -1441,6 +1482,17 @@ p {
  /* text-shadow: 2px 2px 2px #fff; */
 }

+/* .earn-rewards::before {
+  background: #f54747!important;
+  border-radius: 7px;
+  content: "";
+  height: 3.8rem;
+  position: absolute;
+  width: 17rem;
+  z-index: -1;
+  transform: translate(-10px, 5px) rotate(357deg);
+} */
+
@media only screen and (min-width: 992px) and (max-width: 1200px) {
  .appie-hero-area.appie-hero-3-area .appie-hero-content .appie-title {
    font-size: 54px;
@@ -1937,7 +1989,8 @@ p {
  border-color: #fff;
 }
 .appie-hero-content.appie-hero-content-6 ul li a.item-2 {
-  background: #fff;
+  /* background: #fff; */
+  background-color: rgb(219, 237, 245);
  border-color: #fff;
 }
 .appie-hero-content.appie-hero-content-6 ul li a.item-2:hover {
@@ -2510,11 +2563,13 @@ p {
  width: 100px;
 }
 .appie-single-service-2 .title {
-  font-size: 20px;
+  font-size: 24px;
  font-weight: 700;
  margin-top: 30px;
  margin-bottom: 10px;
  text-align: center;
+  text-shadow: 3px 4px 10px rgba(0,0,0,0.3);
+  padding-bottom: 7px;
 }
 .appie-single-service-2 a {
  font-size: 14px;
@@ -3023,6 +3078,38 @@ p {
  color: #9b2cfa;
 }

+/*===========================
+    6.On WrenchBoard Area  css
+===========================*/
+.wrench-on-area {
+  position: relative;
+  overflow: hidden;
+  z-index: 15;
+/* background-color: #fbf4fe; */
+}
+/* .wrench-on-area .traffic-thumb {
+  position: absolute;
+  right: 0;
+  top: 50%;
+  transform: translateY(-50%);
+  width: 42%;
+} */
+/* @media (max-width: 767px) {
+  .wrench-on-area .traffic-thumb {
+    display: none;
+  }
+}
+@media only screen and (min-width: 768px) and (max-width: 991px) {
+  .wrench-on-area .traffic-thumb {
+    display: none;
+  }
+} */
+
+.withFadeEdge{
+  border-radius: 10px 10px 10px 10px;
+  /* box-shadow: inset 0 0 15px 25px white; */
+  box-shadow: 0 0 10px 20px #fff inset;
+}
 /*===========================
    6.APPIE TRAFFICE css 
 ===========================*/
@@ -5928,6 +6015,22 @@ blockquote cite {

 .appie-error-area {
  padding-top: 250px;
+  width: 100%;
+  min-height: 100vh;
+  background: url("../images//wrench-page-notfound.jpg") center/cover;
+  position: relative;
+  /* z-index: 1; */
+}
+
+.appie-error-area::before{
+  content: "";
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background: #cdcdcd;
+  opacity: 0.8;
 }

 .appie-error-content span {
@@ -5945,7 +6048,7 @@ blockquote cite {
 }
 .appie-error-content p {
  line-height: 26px;
-  color: #505056;
+  color: #27272a;
  font-size: 16px;
  padding: 0 50px;
 }
@@ -6440,7 +6543,7 @@ blockquote cite {
  color: #fff;
  padding-top: 18px;
  line-height: 28px;
-  opacity: 0.7;
+  opacity: 2.9;
 }
 .appie-about-page-content a {
  color: red;
@@ -0,0 +1,33 @@
+:root {
+    --loader-width: auto;
+    --loader-height: auto;
+    --text-container-width: 400px;
+    --text-container-height: auto;
+    --line-height: 1.5;
+}
+
+.image-skeleton-loader,
+.blog-text-skeleton-loader {
+    width: var(--loader-width);
+    height: var(--loader-height);
+    background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
+    background-size: 200% 100%;
+    animation: loading 1.5s infinite;
+}
+
+.image-skeleton-loader{
+    border-radius: 10px;
+}
+
+.blog-text-skeleton-loader {
+    line-height: calc(var(--text-container-height) * var(--line-height));
+}
+
+@keyframes loading {
+    0% {
+        background-position: -200% 0;
+    }
+    100% {
+        background-position: 200% 0;
+    }
+}   
@@ -0,0 +1,3 @@
+<svg width="1200" height="1227" viewBox="0 0 1200 1227" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M714.163 519.284L1160.89 0H1055.03L667.137 450.887L357.328 0H0L468.492 681.821L0 1226.37H105.866L515.491 750.218L842.672 1226.37H1200L714.137 519.284H714.163ZM569.165 687.828L521.697 619.934L144.011 79.6944H306.615L611.412 515.685L658.88 583.579L1055.08 1150.3H892.476L569.165 687.854V687.828Z" fill="white"/>
+</svg>
@@ -0,0 +1,148 @@
+import React from "react";
+
+import Design from "../../assets/images/design.png";
+import Approach from "../../assets/images/approach.png";
+import Interactive from "../../assets/images/interactive.png";
+import Mobility from "../../assets/images/mobility-approach.png";
+import Privacy from "../../assets/images/privacy.png";
+import Seamless from "../../assets/images/seamless.png";
+
+function ServiceItem(props) {
+  return (
+    <div
+      className={`appie-single-service-2 appie-single-service-about item-${props.index} mt-30 wow animated fadeInUp`}
+      data-wow-duration="2000ms"
+      data-wow-delay={`${props.delay}ms`}
+      style={{ cursor: "default" }}
+    >
+      <div className="icon d-flex justify-content-center align-items-center">
+        <img src={props.image} alt="icon" />
+      </div>
+      <h4 className="title">{props.title}</h4>
+      <p>{props.description}</p>
+    </div>
+  );
+}
+
+function AboutTextComponent() {
+  return (
+    <>
+      <div className="container">
+        <div className="row">
+          <div className="row">
+            {servicesContent?.map(({ id, ...item }) => (
+              <div className="col-lg-4 col-md-6">
+                <ServiceItem index={id} {...item} />
+              </div>
+            ))}
+          </div>
+        </div>
+      </div>
+    </>
+  );
+}
+
+export default AboutTextComponent;
+
+const servicesContent = [
+  {
+    id: 1,
+    image: Design,
+    delay: 200,
+    title: "Engagement",
+    description:
+      "We encourage healthy online activities for individuals, groups, or households.",
+  },
+  {
+    id: 2,
+    image: Approach,
+    delay: 400,
+    title: "Opportunity",
+    description:
+      "We prioritize developing a strong opportunity mindset and teamwork.",
+  },
+  {
+    id: 3,
+    image: Interactive,
+    delay: 600,
+    title: "Online Safety",
+    description:
+      "Stay up-to-date with WrenchBoard! We ensure healthy communication at all times.",
+  },
+  // {
+  //   id: 4,
+  //   image: Mobility,
+  //   delay: 200,
+  //   title: "Social Media Management",
+  //   description:
+  //     "Teach youngsters the art of handling social media profiles for small enterprises, cultivating essential marketing and communication abilities while also generating income. Manage tasks, track responses, and stay connected effortlessly. Experience a true mobile lifestyle with WrenchBoard!",
+  // },
+  // {
+  //   id: 5,
+  //   image: Seamless,
+  //   delay: 400,
+  //   title: "Inspiring Future Leaders",
+  //   description:
+  //     "By offering a platform for kids to earn, learn, and contribute, WrenchBoard is nurturing the next generation of entrepreneurs, creators, and leaders. We're sowing the seeds of ambition and self-confidence, preparing them for a brighter future.",
+  // },
+  // {
+  //   id: 6,
+  //   image: Privacy,
+  //   delay: 600,
+  //   title: "Privacy",
+  //   description:
+  //     "Your privacy matters. WrenchBoard works without data sharing, ensuring your information stays secure. Manage tasks across platforms confidently, enjoying a unified experience that respects your privacy.",
+  // },
+];
+
+
+const servicesContentBAK = [
+  {
+    id: 1,
+    image: Design,
+    delay: 200,
+    title: "Unlocking Potential",
+    description:
+        "At WrenchBoard, we believe age should never limit one's ability to pursue their passions and generate income. Our platform offers a variety of categories for kids to explore and turn into profitable endeavors, fostering financial awareness and unlocking their potential for a brighter future.",
+  },
+  {
+    id: 2,
+    image: Approach,
+    delay: 400,
+    title: "Growing Money Mindset",
+    description:
+        "We prioritize developing a strong money mindset in Kids. WrenchBoard offers a safe and supportive space for kids to explore their passions, learn new skills, and earn money. By instilling the value of hard work, saving, and investing, we aim to empower the next generation to make informed financial decisions and reach their goals.",
+  },
+  {
+    id: 3,
+    image: Interactive,
+    delay: 600,
+    title: "Realtime Notifications",
+    description:
+        "Stay up-to-date with WrenchBoard! Our platform keeps you in the loop with convenient alerts and notifications. Choose your preferred method of receiving updates - email, text, or push notifications - and never miss a beat.",
+  },
+  {
+    id: 4,
+    image: Mobility,
+    delay: 200,
+    title: "Social Media Management",
+    description:
+        "Teach youngsters the art of handling social media profiles for small enterprises, cultivating essential marketing and communication abilities while also generating income. Manage tasks, track responses, and stay connected effortlessly. Experience a true mobile lifestyle with WrenchBoard!",
+  },
+  {
+    id: 5,
+    image: Seamless,
+    delay: 400,
+    title: "Inspiring Future Leaders",
+    description:
+        "By offering a platform for kids to earn, learn, and contribute, WrenchBoard is nurturing the next generation of entrepreneurs, creators, and leaders. We're sowing the seeds of ambition and self-confidence, preparing them for a brighter future.",
+  },
+  {
+    id: 6,
+    image: Privacy,
+    delay: 600,
+    title: "Privacy",
+    description:
+        "Your privacy matters. WrenchBoard works without data sharing, ensuring your information stays secure. Manage tasks across platforms confidently, enjoying a unified experience that respects your privacy.",
+  },
+];
@@ -1,41 +1,39 @@
-import React from 'react';

 function HeroAbout() {
-    return (
-        <>
-            <div className="appie-about-top-title-area">
-                <div className="container">
-                    <div className="row">
-                        <div className="col-lg-7">
-                            <div className="appie-about-top-title">
-                                <h2 className="title">Our team is here to support you.</h2>
-                            </div>
-                        </div>
-                    </div>
-                </div>
+  return (
+    <>
+      <div className="appie-about-top-title-area">
+        <div className="container">
+          <div className="row">
+            <div className="col-lg-7">
+              <div className="appie-about-top-title">
+                <h2 className="title">Our team is here to support you.</h2>
+              </div>
            </div>
            <section className="appie-about-page-area">
-                <div className="container">
-                    <div className="row">
-                        {/* col-lg-8 */}
-                        <div className="col-12">
-                            <div className="appie-about-page-content">
-                                <h3 className="title">
-                                    Online Marketplace Platform to Get Paid.
-                                </h3>
-                                <p>
-                                WrenchBoard is the marketplace that connects independent talent with businesses that require their skill set and get paid. 
-                                We serve everyone from one-person startups to a powerful, trust-driven platform that facilitates businesses and freelancers to work concurrently in unique patterns that unlock their potential. 
-                                Our platform provides a range of skills in categories including consulting, finance & accounting, website & app development, creative & design, customer support and operations. Learn more at <a href={process.env.REACT_APP_DASH_URL}>www.WrenchBoard.com</a>
+              <div className="container">
+                <div className="row">
+                  {/* col-lg-8 */}
+                  <div className="col-12">
+                    <div className="appie-about-page-content">
+                      <h3 className="title">
+                      We Empower Reward for Achievements
+                      </h3>
+                      <p>
+                                WrenchBoard prioritizes safety above all. Parents can set up family accounts to oversee their children's activities and earnings. We implement strict guidelines to ensure age-appropriate tasks and interactions, providing a worry-free space for both kids and their guardians.
+                                We believe that earning should go hand in hand with learning. As kids complete projects and earn, they also acquire essential life skills such as financial literacy, time management, and effective communication. WrenchBoard isn't just about making money; it's about fostering holistic growth.
+                                <p>Learn more at <a href={process.env.REACT_APP_DASH_URL}>www.WrenchBoard.com</a></p>
                                </p>
-                               
-                            </div>
-                        </div>
                    </div>
+                  </div>
                </div>
+              </div>
            </section>
-        </>
-    );
+          </div>
+        </div>
+      </div>
+    </>
+  );
 }

 export default HeroAbout;
@@ -1,131 +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'
-
-
-
-
+import AboutTextComponent from '../AboutText/AboutText';

 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-12 col-lg-8">
-                            <div className="appie-section-title">
-                                <h3 className="appie-title">We’re driven by your values</h3>
-                                <p>The app provides design and digital marketing. </p>
-                            </div>
-                        </div>
-                    </div>
-                    <div className="row">
-                        <div className="col-lg-4 col-md-6">
-                            <div
-                                className="appie-single-service-2 appie-single-service-about mt-30 wow animated fadeInUp"
-                                data-wow-duration="2000ms"
-                                data-wow-delay="200ms"
-                            >
-                                <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>
-                            </div>
-                        </div>
-                        <div className="col-lg-4 col-md-6">
-                            <div
-                                className="appie-single-service-2 appie-single-service-about item-2 mt-30 wow animated fadeInUp"
-                                data-wow-duration="2000ms"
-                                data-wow-delay="400ms"
-                            >
-                                <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>
-                            </div>
-                        </div>
-                        <div className="col-lg-4 col-md-6">
-                            <div
-                                className="appie-single-service-2 appie-single-service-about item-3 mt-30 wow animated fadeInUp"
-                                data-wow-duration="2000ms"
-                                data-wow-delay="600ms"
-                            >
-                                <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>
-                            </div>
-                        </div>
-                        <div className="col-lg-4 col-md-6">
-                            <div
-                                className="appie-single-service-2 appie-single-service-about item-4 mt-30 wow animated fadeInUp"
-                                data-wow-duration="2000ms"
-                                data-wow-delay="200ms"
-                            >
-                                <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>
-                            </div>
-                        </div>
-                        <div className="col-lg-4 col-md-6">
-                            <div
-                                className="appie-single-service-2 appie-single-service-about item-5 mt-30 wow animated fadeInUp"
-                                data-wow-duration="2000ms"
-                                data-wow-delay="400ms"
-                            >
-                                <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>
-                            </div>
-                        </div>
-                        <div className="col-lg-4 col-md-6">
-                            <div
-                                className="appie-single-service-2 appie-single-service-about item-6 mt-30 wow animated fadeInUp"
-                                data-wow-duration="2000ms"
-                                data-wow-delay="600ms"
-                            >
-                                <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>
-                            </div>
-                        </div>
-                    </div>
-                </div>
-            </section>
-        </>
-    );
+  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-12 col-lg-8">
+              <div className="appie-section-title">
+                <h3 className="appie-title">We’re driven by your values</h3>
+                {/* <p>{servicesContent.subTitle}</p> */}
+              </div>
+            </div>
+          </div>        
+        </div>
+      </section>
+    </>
+  );
 }

 export default ServicesAbout;
@@ -10,6 +10,7 @@ import HeroAbout from './HeroAbout';
 import ServicesAbout from './ServicesAbout';
 import TeamAbout from './TeamAbout';
 import StickyHeaderNav from '../StickyHeader/StickyHeaderNav';
+import AboutTextComponent from '../AboutText/AboutText';

 function AboutUs() {
    const [drawer, drawerAction] = useToggle(false);
@@ -23,6 +24,7 @@ function AboutUs() {
            {/* <TeamAbout />*/}
            {/* <SponserHomeTwo />
           <SignupHomeEight />*/}
+           <AboutTextComponent/>
            <FooterHomeOne className="appie-footer-about-area" />
            <BackToTop />
        </>
@@ -0,0 +1,71 @@
+import singlePost from "../../assets/images/single-post/1.jpg";
+import { BlogLoader, ImageLoader } from "../../lib/SkeletonLoaders";
+import LazyImage from "../../lib/LazyImage";
+
+/**
+ * Renders a blog post component.
+ * @returns {JSX.Element} The rendered blog post component.
+ */
+function Blog({ blogItem, imgUrl, loader }) {
+  // Generate a unique ID
+  const uniqueId = `element_${Math.random().toString(36).substr(2, 9)}`;
+
+  const blogImg = `${imgUrl}/${blogItem?.meta_value || singlePost}`;
+
+  const imgLoaderStyles = {
+    "--loader-width": "750px",
+    "--loader-height": "550px",
+  };
+
+  const headerLoaderStyles = {
+    "--text-container-width": "300px",
+    "--text-container-height": "34px",
+  };
+
+  const bodyTextLoaderStyles = {
+    "--text-container-width": "770px",
+    "--text-container-height": "150px",
+  };
+
+  return (
+    <>
+      <div className="single-post-area">
+        <div className="post-thumb" style={{ marginTop: "0" }}>
+          {loader ? (
+            <div style={imgLoaderStyles}>
+              <ImageLoader />
+            </div>
+          ) : (
+            <LazyImage src={blogImg} alt={blogItem?.meta_value || "single-post.jpg"} key={uniqueId} />
+          )}
+        </div>
+        {loader ? (
+          <div style={headerLoaderStyles}>
+            <BlogLoader />
+          </div>
+        ) : (
+          <h4 className="article-title">{blogItem?.post_title}</h4>
+        )}
+        {loader ? (
+          <div style={bodyTextLoaderStyles}>
+            <BlogLoader />
+          </div>
+        ) : (
+          <div
+            dangerouslySetInnerHTML={{ __html: blogItem?.post_content }}
+          ></div>
+        )}
+      </div>
+
+      {/* <blockquote>
+        <p>
+          I don't want no agro brilliant are you taking the piss skive off super
+          boot chancer don't get shirty.
+        </p>
+        <cite>Indigo Violet</cite>
+      </blockquote> */}
+    </>
+  );
+}
+
+export default Blog;
@@ -0,0 +1,87 @@
+import React, { useEffect, useMemo, useState } from "react";
+import { useParams } from "react-router-dom";
+import useToggle from "../../Hooks/useToggle";
+import BackToTop from "../BackToTop";
+import FooterHomeOne from "../HomeOne/FooterHomeOne";
+import Drawer from "../Mobile/Drawer";
+import Blog from "./Blog";
+import BlogData from "../../Services/BlogData";
+import BlogSideBar from "./BlogSideBar";
+import HeaderNews from "./HeaderNews";
+import HeroNews from "./HeroNews";
+import StickyHeaderNav from "../StickyHeader/StickyHeaderNav";
+
+/**
+ * Renders the blog detail page.
+ */
+function BlogDetail() {
+  const [drawer, drawerAction] = useToggle(false);
+  const [isLoading, setIsLoading] = useState(false);
+  const [blogs, setBlogs] = useState([]);
+  const { id } = useParams();
+
+  useEffect(() => {
+    const fetchBlogs = async () => {
+      setIsLoading(true);
+      try {
+        const res = await BlogData();
+        setBlogs(res.data);
+      } catch (err) {
+        console.log("Error loading blogdata", err);
+      } finally {
+        setTimeout(() => setIsLoading(false), 1500);
+      }
+    };
+
+    fetchBlogs();
+  }, []);
+
+  const blogItem = useMemo(() => {
+    return blogs.blogdata?.find((item) => +item.id === +id);
+  }, [blogs, id]);
+
+  return (
+    <>
+      {/* Renders the drawer component */}
+      <Drawer drawer={drawer} action={drawerAction.toggle} />
+
+      {/* Renders the header component */}
+      <HeaderNews action={drawerAction.toggle} />
+
+      {/* Renders the hero section */}
+      <HeroNews
+        title="Blog"
+        breadcrumb={[
+          { link: "/", title: "Home" },
+          { link: "/blog", title: "Blogs" },
+          {
+            link: `/blog/blogdetail/${id}`,
+            title: isLoading ? "please wait..." : blogItem ? blogItem.post_title : "Post not found",
+          },
+        ]}
+      />
+
+      {/* Renders the blog content and sidebar */}
+      <section className="blogpage-section">
+        <div className="container">
+          <div className="row">
+            <div className="col-lg-8 col-md-7">
+              <Blog blogItem={blogItem} imgUrl={blogs?.image_url} loader={isLoading} />
+            </div>
+            <div className="col-lg-4 col-md-5">
+              <BlogSideBar blogs={blogs} />
+            </div>
+          </div>
+        </div>
+      </section>
+
+      {/* Renders the footer */}
+      <FooterHomeOne />
+
+      {/* Renders the back-to-top button */}
+      <BackToTop />
+    </>
+  );
+}
+
+export default BlogDetail;
@@ -0,0 +1,69 @@
+import React from "react";
+import { Link } from "react-router-dom";
+import BlogImg1 from "../../assets/images/blog/p1.jpg";
+
+/**
+ * Renders a sidebar for a blog.
+ * @param {Object} blogs - An object containing the data for the blog posts.
+ * @returns {JSX.Element} - JSX code that renders the blog sidebar.
+ */
+function BlogSideBar({ blogs }) {
+  /**
+   * Renders other blog posts.
+   * This is an Array of JSX elements representing the other blog posts.
+   */
+  const renderOtherBlogPosts = () => {
+    return blogs?.blogdata?.slice(0, 4).map((post) => {
+      const blogDate = new Date(post.post_date).toLocaleDateString("en-US", {
+        year: "numeric",
+        month: "short",
+        day: "numeric",
+      });
+
+      const blogImg =
+        post.meta_value != null
+          ? `${blogs?.image_url}/${post.meta_value}`
+          : BlogImg1;
+
+      return (
+        <div className="popular-post" key={post.id}>
+          <Link to={`/blog/blogdetail/${post?.id}`}>
+            <img src={blogImg} alt="blog-img" style={{top: "20px"}} loading="lazy" />
+          </Link>
+          <h5>
+            <Link to={`/blog/blogdetail/${post?.id}`}>{post?.post_title}</Link>
+          </h5>
+          <span>{blogDate}</span>
+        </div>
+      );
+    });
+  };
+
+  return (
+    <div className="blog-sidebar">
+      <aside className="widget widget-categories">
+        {/*<h3 className="widget-title">Categories</h3>*/}
+        <ul>
+          <li>
+            <Link to="/about-us">About</Link>
+          </li>
+          <li>
+            <a href={process.env.REACT_APP_DASH_URL_SIGNUP}>Sign up</a>
+          </li>
+          <li>
+            <a href={process.env.REACT_APP_DASH_URL_LOGIN}>Login</a>
+          </li>
+          <li>
+            <a href="https://blog.wrenchboard.com/">More Articles</a>
+          </li>
+        </ul>
+      </aside>
+      <aside className="widget widget-trend-post">
+        <h3 className="widget-title">Other Posts</h3>
+        {renderOtherBlogPosts()}
+      </aside>
+    </div>
+  );
+}
+
+export default BlogSideBar;
@@ -0,0 +1,89 @@
+import React, { useEffect, useState } from "react";
+import { Link } from "react-router-dom";
+import blogOne from "../../assets/images/blog/1.jpg";
+import BlogData from "../../Services/BlogData";
+
+/**
+ * Fetches blog data from an API and renders the blogs on the page.
+ * Displays a maximum of six blogs on the home page and all blogs on other pages.
+ *
+ * @param {string} pathname - The current path of the page.
+ * @returns {JSX.Element} - The rendered HTML of the blogs component.
+ */
+function Blogs({ pathname }) {
+  const [blogs, setBlogs] = useState([]);
+
+  useEffect(() => {
+    const fetchBlogData = async () => {
+      try {
+        const res = await BlogData();
+        setBlogs(res.data);
+      } catch (err) {
+        console.log("Error loading blogdata", err);
+      }
+    };
+
+    fetchBlogData();
+  }, []);
+
+  const renderBlogItem = (blog) => {
+    const options = {
+      weekday: "short",
+      year: "numeric",
+      month: "long",
+      day: "numeric",
+    };
+    const postDt = new Date(blog.post_date).toLocaleDateString(
+      "en-US",
+      options
+    );
+    const blgImg =
+      blog.meta_value != null
+        ? `${blogs?.blogconfig?.media_url}/${blog.meta_value}`
+        : blogOne;
+
+    return (
+      <div key={blog.id} className="col-lg-4 col-md-6">
+        <div
+          className="appie-blog-item mt-30 wow animated fadeInUp"
+          data-wow-duration="3000ms"
+          data-wow-delay="200ms"
+        >
+          <Link to={`/blog/blogdetail/${blog?.id}`} className="thumb">
+            <img
+              src={blgImg}
+              alt={blog.post_title}
+              style={{ cursor: "pointer" }}
+            />
+          </Link>
+          <div className="content">
+            <div className="blog-meta">
+              <ul>
+                <li style={{ cursor: "pointer" }}>{postDt}</li>
+              </ul>
+            </div>
+            <h3 className="title">
+              <Link to={`/blog/blogdetail/${blog?.id}`}>{blog.post_title}</Link>
+            </h3>
+            <Link to={`/blog/blogdetail/${blog?.id}`}>
+              Learn More <i className="fal fa-arrow-right" />
+            </Link>
+          </div>
+        </div>
+      </div>
+    );
+  };
+
+  return (
+    <>
+      <div className="row">
+        {pathname === "/" // ON HOME PAGE LIMIT TO SIX(6) BLOGS
+          ? blogs?.blogdata?.slice(0, 6).map(renderBlogItem)
+          : // ON OTHER PAGES SHOW ALL BLOG
+            blogs?.blogdata?.map(renderBlogItem)}
+      </div>
+    </>
+  );
+}
+
+export default Blogs;
@@ -0,0 +1,54 @@
+import React, { useEffect } from 'react';
+import logo from '../../assets/images/wrenchboard-logo-text.png';
+import StickyMenu from '../../lib/StickyMenu';
+import Navigation from '../Navigation';
+import getConfig from './../../Config/config'
+
+function HeaderNews({ action }) {
+    var site = getConfig()[0];
+    useEffect(() => {
+        StickyMenu();
+    });
+    return (
+        <>
+            <header className="appie-header-area appie-header-page-area appie-sticky">
+                <div className="container">
+                    <div className="header-nav-box header-nav-box-3 header-nav-box-inner-page">
+                        <div className="row align-items-center">
+                            <div className="col-lg-2 col-md-4 col-sm-5 col-6 order-1 order-sm-1">
+                                <div className="wrench-logo-box">
+                                    <a href="/">
+                                        <img src={logo} alt="" />
+                                    </a>
+                                </div>
+                            </div>
+                            <div className="col-lg-6 col-md-1 col-sm-1 order-3 order-sm-2">
+                                <div className="appie-header-main-menu">
+                                    <Navigation />
+                                </div>
+                            </div>
+                            <div className="col-lg-4  col-md-7 col-sm-6 col-6 order-2 order-sm-3">
+                                <div className="appie-btn-box text-right">
+                                    <a className="login-btn" href={process.env.REACT_APP_DASH_URL_LOGIN}>
+                                        <i className="fal fa-user"></i> Login
+                                    </a>
+                                    <a className="main-btn ml-30" href={process.env.REACT_APP_DASH_URL_SIGNUP}>
+                                        Get Started
+                                    </a>
+                                    <div
+                                        onClick={(e) => action(e)}
+                                        className="toggle-btn ml-30 canvas_open d-lg-none d-block"
+                                    >
+                                        <i className="fa fa-bars"></i>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </header>
+        </>
+    );
+}
+
+export default HeaderNews;
@@ -0,0 +1,31 @@
+import React from 'react';
+import { Link } from 'react-router-dom';
+
+function HeroNews({ title, breadcrumb }) {
+    return (
+        <>
+            <div className="appie-page-title-area">
+                <div className="container">
+                    <div className="row">
+                        <div className="col-lg-12">
+                            <div className="appie-page-title-item">
+                                <h3 className="title">{title}</h3>
+                                <nav aria-label="breadcrumb">
+                                    <ol className="breadcrumb">
+                                        {breadcrumb.map((value) => (
+                                            <li key={Math.random()} className="breadcrumb-item">
+                                                <Link to={value.link}>{value.title}</Link>
+                                            </li>
+                                        ))}
+                                    </ol>
+                                </nav>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </>
+    );
+}
+
+export default HeroNews;
@@ -0,0 +1,41 @@
+import React from "react";
+import useToggle from "../../Hooks/useToggle";
+import BackToTop from "../BackToTop";
+import FooterHomeOne from "../HomeOne/FooterHomeOne";
+import Drawer from "../Mobile/Drawer";
+import Blogs from "./Blogs";
+import BlogSideBar from "./BlogSideBar";
+import HeaderNews from "./HeaderNews";
+import HeroNews from "./HeroNews";
+import StickyHeaderNav from "../StickyHeader/StickyHeaderNav";
+
+function Blog() {
+  const [drawer, drawerAction] = useToggle(false);
+  return (
+    <>
+      <Drawer drawer={drawer} action={drawerAction.toggle} />
+      {/* <StickyHeaderNav action={drawerAction.toggle} /> */}
+      <HeaderNews action={drawerAction.toggle} />
+      <HeroNews
+        title="Blogs"
+        breadcrumb={[
+          { link: "/", title: "Home" },
+          { link: "/blog", title: "Blogs" },
+        ]}
+      />
+      <section className="blogpage-section">
+        <div className="container">
+          <div className="row">
+            <div className="col-lg-12 col-md-7">
+              <Blogs />
+            </div>
+          </div>
+        </div>
+      </section>
+      <FooterHomeOne />
+      <BackToTop />
+    </>
+  );
+}
+
+export default Blog;
@@ -82,7 +82,8 @@ function Forms() {
                                        <i className="fab fa-facebook-f"></i>
                                    </a>
                                    <a className="twi" href={process.env.REACT_APP_TWITTER_LINK}>
-                                        <i className="fab fa-twitter"></i>
+                                        {/* <i className="fab fa-twitter"></i> */}
+                                        <i className="fab fa-x-twitter" />
                                    </a>
                                    <a className="you" href="#">
                                        <i className="fab fa-youtube"></i>
@@ -1,26 +1,20 @@
 import React, { useState } 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 Blogs from '../News/Blogs';

-
 function BlogHomeOne() {
    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">Our latest blog posts</h3>
-                            </div>
+        <section className="appie-blog-area pt-45 pb-95">
+            <div className="container">
+                <div className="row">
+                    <div className="col-lg-12">
+                        <div className="appie-section-title text-center">
+                            <h3 className="appie-title">Our latest blog posts</h3>
                        </div>
                    </div>
-                    <Blogs pathname='/' />
                </div>
-            </section>
-        </>
+                <Blogs pathname='/' />
+            </div>
+        </section>
    );
 }

@@ -20,7 +20,7 @@ function FooterHomeOne({ className }) {
                                    </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. `}
+                                    {`It is simple. You can set goals, task, or anything that need to be done and reward accomplishment. WrenchBoard is the platform to connect opportunities. `}
                                </p>
                                <a href="/service">
                                    Read More <i className="fal fa-arrow-right" />
@@ -34,7 +34,8 @@ function FooterHomeOne({ className }) {
                                        </li>
                                        <li>
                                            <a href={process.env.REACT_APP_TWITTER_LINK}>
-                                                <i className="fab fa-twitter" />
+                                                {/* <i className="fab fa-twitter" /> */}
+                                                <i className="fab fa-x-twitter" />
                                            </a>
                                        </li>
                                    </ul>
@@ -1,66 +1,79 @@
 import React from 'react';
 import heroThumbOne from '../../assets/images/app-thumb-1.png';
+import heroThumbOne1 from '../../assets/images/app-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';
 import getConfig from './../../Config/config'
+import CustomSlider from '../customSlider/CustomSlider';


 function HeroHomeOne() {
-    var site = getConfig()[0];
-    return (
-        <>
-            <section className="appie-hero-area">
-                <div className="container">
-                    <div className="row align-items-center">
-                        <div className="col-lg-6">
-                            <div className="appie-hero-content">
-                                {/*<span>Welcome To WrenchBoard..</span>*/}
-                                <h1 className="appie-title">
-                                    Turn Chores into Exciting Challenges and Earn <span className='earn-rewards px-2'>Rewards!</span>
-                                </h1>
-                                <p>
-                                    Your place to set family goals and reward achievements. Find tasks to earn from, or build a tasks portfolio and find others to perform tasks for you.                                </p>
-                                <ul>
-                                    <li>
-                                        <a href={process.env.REACT_APP_APPLE_APP} className="dark" target="_blank">
-                                            <i className="fab fa-apple" /> Download for iOS
-                                        </a>
-                                    </li>
-                                    <li>
-                                        <a className="item-2 light" href={process.env.REACT_APP_ANDROID_APP} target="_blank">
-                                            <i className="fab fa-google-play" /> Download for
-                                            Android
-                                        </a>
-                                    </li>
-                                </ul>
-                            </div>
-                        </div>
-                        <div className="col-lg-6">
-                            <div className="appie-hero-thumb">
-                                <div
-                                    className="thumb wow animated fadeInUp"
-                                    data-wow-duration="2000ms"
-                                    data-wow-delay="200ms"
-                                >
-                                    <img src={heroThumbOne} alt="WrenchBoard" />
-                                </div>
-                                <div
-                                    className="thumb-2 wow animated fadeInRight"
-                                    data-wow-duration="2000ms"
-                                    data-wow-delay="600ms"
-                                >
-                                    <img src={heroThumbTwo} alt="" />
-                                </div>
-                            </div>
-                        </div>
-                    </div>
+  var site = getConfig()[0];
+  return (
+    <>
+      <section className="appie-hero-area">
+        <div className="container">
+          <div className="row align-items-center">
+            <div className="col-lg-6">
+              <div className="appie-hero-content appie-hero-content-6">
+                {/*<span>Welcome To WrenchBoard..</span>*/}
+                <h1 className="appie-title">
+                  Turn Chores into Exciting Challenges and Earn <span className='earn-rewards px-2'>Rewards!</span>
+                </h1>
+                <p>Your place to set family goals and reward achievements. Find tasks to earn from, or build a tasks portfolio and find others to perform tasks for you.</p>
+                <ul>
+                  <li className=''>
+                      <a className="item-2" target='_blank'  href={process.env.REACT_APP_APPLE_APP}>
+                          <i className="fab fa-apple"></i>
+                          <span>
+                              Available on the <span>App Store</span>
+                          </span>
+                      </a>
+                  </li>
+                  <li className=''>
+                      <a className="item-2" target='_blank' href={process.env.REACT_APP_ANDROID_APP}>
+                          <i className="fab fa-google-play"></i>
+                          <span>
+                              Available on the <span>Google Play</span>
+                          </span>
+                      </a>
+                  </li>
+                </ul>
+              </div>
+            </div>
+            <div className="col-lg-6">
+              <div className="appie-hero-thumb">
+                <div
+                  className="thumb wow animated fadeInUp"
+                  data-wow-duration="2000ms"
+                  data-wow-delay="200ms"
+                >
+                  {/* <img src={heroThumbOne} alt="WrenchBoard" /> */}
+                  <div style={{ width: '350px', margin: 'auto' }}>
+                    <CustomSlider
+                      images={[heroThumbOne, heroThumbOne1, heroThumbOne]}
+                      speed='5'
+                      indicatorColor='#333'
+                    />
+                  </div>
                </div>
-
-            </section>
-        </>
-    );
+                <div
+                  className="thumb-2 wow animated fadeInRight"
+                  data-wow-duration="2000ms"
+                  data-wow-delay="600ms"
+                >
+                  <img src={heroThumbTwo} alt="" />
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </section>
+    </>
+  );
 }

 export default HeroHomeOne;
@@ -1,83 +1,76 @@
 import React from 'react';
-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';
+import IconOne from '../../assets/images/icon/account_login.png';
+import IconTwo from '../../assets/images/icon/task.png';
+import IconThree from '../../assets/images/icon/target.png';
+import IconFour from '../../assets/images/icon/reward.png';

+function ServiceItem({ icon, title, description, index }) {
+  return (
+    <div
+      className="appie-single-service text-center mt-30 wow animated fadeInUp"
+      data-wow-duration="2000ms"
+      data-wow-delay={`${200 * (index + 1)}ms`}
+      style={{ cursor: "default" }}
+    >
+      <div className="icon">
+        <img src={icon} alt={title} />
+      </div>
+      <h4 className="appie-title">{title}</h4>
+      <p>{description}</p>
+    </div>
+  );
+}

 function ServicesHomeOne({ className }) {
-    return (
-        <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">
-                        <div className="appie-section-title text-center">
-                            <h3 className="appie-title">
-                               Start getting paid in easy steps.
-                            </h3>
-                          
-                        </div>
-                    </div>
-                </div>
-                <div className="row">
-                    <div className="col-lg-3 col-md-6">
-                        <div
-                            className="appie-single-service text-center mt-30 wow animated fadeInUp"
-                            data-wow-duration="2000ms"
-                            data-wow-delay="200ms"
-                        >
-                            <div className="icon">
-                                <img src={IconOne} alt="" /> 
-                            </div>
-                            <h4 className="appie-title">Free Account</h4>
-                            <p>Join WrenchBoard.<span>Create an account for Income.</span></p>
-                        </div>
-                    </div>
-                    <div className="col-lg-3 col-md-6">
-                        <div
-                            className="appie-single-service text-center mt-30 item-2 wow animated fadeInUp"
-                            data-wow-duration="2000ms"
-                            data-wow-delay="400ms"
-                        >
-                            <div className="icon">
-                                <img src={IconTwo} alt="" />
-                            </div>
-                            <h4 className="appie-title">Find Task </h4>
-                            <p>Build a Self-Portfolio <span>with sole purpose to Cash-Out.</span></p>
-                        </div>
-                    </div>
-                    <div className="col-lg-3 col-md-6">
-                        <div
-                            className="appie-single-service text-center mt-30 item-3 wow animated fadeInUp"
-                            data-wow-duration="2000ms"
-                            data-wow-delay="600ms"
->
-                            <div className="icon">
-                                <img src={IconThree} alt="" />   
-                            </div>
-                            <h4 className="appie-title">Complete</h4>
-                            <p>Organize and Manage <span>your teams efficiently. </span> Manage your workgroup.</p>
-                        </div>
-                    </div>
-                    <div className="col-lg-3 col-md-6">
-                        <div
-                            className="appie-single-service text-center mt-30 item-4 wow animated fadeInUp"
-                            data-wow-duration="2000ms"
-                            data-wow-delay="800ms"
-                        >
-                            <div className="icon">
-                                <img src={IconFour} alt="" />
-                            </div>
-                            <h4 className="appie-title">Get Paid</h4>
-                            <p>Start <span>Boosting your Income </span> By earning Cash for your Time and Skills.</p>
-                        </div>
-                    </div>
-                </div>
+  const serviceTitle = "Set Goals and Rewards to Inspire";
+  const serviceItems = [
+    {
+      icon: IconOne,
+      title: 'Free Account',
+      description: 'Join WrenchBoard. Get your free account.',
+    },
+    {
+      icon: IconTwo,
+      title: 'Set Goals',
+      description: 'Suggest or find what you want to get rewarded for.',
+    },
+    {
+      icon: IconThree,
+      title: 'Complete',
+      description: 'Complete task, and notify assigner with ease.',
+    },
+    {
+      icon: IconFour,
+      title: 'Reward',
+      description: 'Task completed. Find your reward.',
+    },
+  ];
+
+  return (
+    <section className={`appie-service-area pt-10 pb-50 ${className}`} id="service">
+      <div className="container">
+        <div className="row justify-content-center">
+          <div className="col-lg-8">
+            <div className="appie-section-title text-center">
+              <h3 className="appie-title">{serviceTitle}</h3>
            </div>
-        </section>
-    );
+          </div>
+        </div>
+        <div className="row">
+          {serviceItems.map(({ icon, title, description }, index) => (
+            <div key={index} className="col-lg-3 col-md-6">
+              <ServiceItem
+                icon={icon}
+                title={title}
+                description={description}
+                index={index}
+              />
+            </div>
+          ))}
+        </div>
+      </div>
+    </section>
+  );
 }

 export default ServicesHomeOne;
@@ -1,80 +1,99 @@
 import React from 'react';
-import thumb from '../../assets/images/PerformingTaskNew.png';
+//import thumb from '../../assets/images/PerformingTaskNew.png';
+import thumb from '../../assets/images/PerformingTask2.jpg';
 import getConfig from './../../Config/config'

 function TrafficHomeOne() {
-    var site = getConfig()[0];
-    return (
-        <section className="appie-traffic-area pt-140 pb-180">
-            <div className="container">
-                <div className="row">
-                    <div className="col-lg-7">
-                        <div className="appie-traffic-title">
-                            <h3 className="title">Performing task.</h3>
-                            <p>
-                                Performing task on WrenchBoard is easy. All you need is a free account and follow the steps below.
-                            </p>
-                        </div>
-                        <div className="row">
-                            <div className="col-lg-6 col-md-6">
-                                <div className="appie-traffic-service mb-30">
-                                    <div className="icon">
-                                        <i className="fal fa-check" />
-                                    </div>
-                                    <h5 className="title">Create Account</h5>
-                                    <p> To publish your skills to be hired. Your ratings will grow with performance.</p>
-                                </div>
-                            </div>
-                            <div className="col-lg-6 col-md-6">
-                                <div className="appie-traffic-service item-2 mb-30">
-                                    <div className="icon">
-                                        <i className="fal fa-check" />
-                                    </div>
-                                    <h5 className="title">Find or Accept job</h5>
-                                    <p> Receive Offers to get hired or search for your skills match.</p>
-                                </div>
-                            </div>
-                            <div className="col-lg-6 col-md-6">
-                                <div className="appie-traffic-service item-3">
-                                    <div className="icon">
-                                        <i className="fal fa-check" />
-                                    </div>
-                                    <h5 className="title">Complete tasks professionally</h5>
-                                    <p> Deliver client specification to tailored solution, communicate messages in real-time using messaging platform.
-                                    </p>
-                                </div>
-                            </div>
-                            <div className="col-lg-6 col-md-6">
-                                <div className="appie-traffic-service item-4">
-                                    <div className="icon">
-                                        <i className="fal fa-check" />
-                                    </div>
-                                    <h5 className="title">Get Paid like a Pro for your skills </h5>
-                                    <p>Obtain payment authorization after job completion and maintain client relationships. Transparent payment process for task compensation.</p>
-                                </div>
-                            </div>
-                            {/* <div className="col-lg-12">
+  var site = getConfig()[0];
+  return (
+    <section className="wrench-on-area pt-90 pb-45">
+      <div className="container">
+        <div className="row">
+          <div className="col-lg-7">
+            <div className="appie-traffic-title">
+              <h3 className="title">{featuresContent.title}</h3>
+              <p>{featuresContent.detail}</p>
+            </div>
+            <div className="row">
+              {featuresContent.list?.map(({ icon, header, paragraph }, idx) => (
+                <div className="col-lg-6 col-md-6" key={idx}>
+                  <div
+                    className={`appie-traffic-service features item-${
+                      idx + 1
+                    } mb-30`}
+                    style={{ paddingRight: "45px" }}
+                  >
+                    <div className="icon">
+                      <i className={icon} />
+                    </div>
+                    <h5 className="title">{header}</h5>
+                    <p>{paragraph}</p>
+                  </div>
+                </div>
+              ))}
+              {/* <div className="col-lg-12">
                                <div className="traffic-btn mt-50">
                                    <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>
-            <div className="traffic-thumb ">
+          </div>
+          <div className="traffic-thumb d-none d-lg-flex col-lg-5 justify-content-center align-items-center">
+            <div className='position-relative d-flex'>
+              <div className='withFadeEdge position-absolute bg-transparent w-100 h-100' style={{zIndex: '1'}}></div>
                <img
-                    className="wow animated fadeInRight"
-                    data-wow-duration="2000ms"
-                    data-wow-delay="200ms"
-                    src={thumb}
-                    alt=""
+                  className="position-relative wow animated fadeInRight p-1"
+                  data-wow-duration="2000ms"
+                  data-wow-delay="200ms"
+                  src={thumb}
+                  alt=""
+                  style={{zIndex: '0'}}
                />
            </div>
-        </section>
-    );
+          </div>
+        </div>
+      </div>
+      {/* <div className="traffic-thumb">
+        <img
+          className="withFadeEdge wow animated fadeInRight"
+          data-wow-duration="2000ms"
+          data-wow-delay="200ms"
+          src={thumb}
+          alt=""
+        />
+      </div> */}
+    </section>
+  );
 }

 export default TrafficHomeOne;
+
+const featuresContent = {
+  title: "on WrenchBoard.",
+  detail:
+    "Performing task on WrenchBoard is easy. All you need is a free account.",
+  list: [
+    {
+      icon: "fal fa-check",
+      header: "Free account",
+      paragraph: "Get family access from parents, or create your free account.",
+    },
+    {
+      icon: "fal fa-check",
+      header: "Suggest or Find Task",
+      paragraph: "Suggest tasks to parents or pick from the market.",
+    },
+    {
+      icon: "fal fa-check",
+      header: "Complete Task",
+      paragraph: "Complete the task as specified.",
+    },
+    {
+      icon: "fal fa-check",
+      header: "Reward",
+      paragraph: "Get your reward as specified.",
+    },
+  ],
+};
@@ -1,96 +1,81 @@
-import React, { useEffect, useState } from 'react';
-import blogOne from '../../assets/images/blog/1.jpg';
-import BlogData from '../../Services/BlogData';
+import React, { useEffect, useState } from "react";
+import { Link } from "react-router-dom";
+import blogOne from "../../assets/images/blog/1.jpg";
+import BlogData from "../../Services/BlogData";

-function Blogs({pathname}) {
-    const [blogs, setBlogs] = useState([])
+/**
+ * Fetches blog data from an API and renders the blogs on the page.
+ * Displays a maximum of six blogs on the home page and all blogs on other pages.
+ */
+function Blogs({ pathname }) {
+  const [blogs, setBlogs] = useState([]);

-    useEffect(()=>{
-        BlogData().then(res => {
-            setBlogs(res.data)
-        }).catch(err => {
-            console.log('Error loading blogdata', err)
-        })
-    },[])
+  useEffect(() => {
+    const fetchBlogs = async () => {
+      try {
+        const res = await BlogData();
+        setBlogs(res.data);
+      } catch (err) {
+        console.log("Error loading blogdata", err);
+      }
+    };

-    return (
-        <>
-            <div className="row">
-                { pathname == '/' ? // ON HOME PAGE LIMIT TO SIX(6) BLOGS
-                    blogs?.blogdata?.map((i, index)=> {
-                        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 ? `${blogs?.blogconfig?.media_url}/${i.meta_value}` : blogOne;
-                        if(index < 6){
-                        return (
-                        <div key={i.id} className="col-lg-4 col-md-6">
-                            <div
-                                className="appie-blog-item mt-30 wow animated fadeInUp"
-                                data-wow-duration="3000ms"
-                                data-wow-delay="200ms"
-                            >
-                                <div className="thumb">
-                                    <img src={blgImg} alt={i.post_title} />
-                                </div>
-                                <div className="content">
-                                    <div className="blog-meta">
-                                        <ul>
-                                            <li>{postDt}</li>
-                                        </ul>
-                                    </div>
-                                    <h3 className="title">
-                                        <a href={i.guid}>
-                                            {i.post_title}
-                                        </a>
-                                    </h3>
-                                    <a href={i.guid}>
-                                        Learn More <i className="fal fa-arrow-right" />
-                                    </a>
-                                </div>
-                            </div>
-                        </div>
-                        )
-                        }
-                    })
-                    : // ON OTHER PAGES SHOW ALL BLOG
-                    blogs?.blogdata?.map((i, index)=> {
-                        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 ? `${blogs?.blogconfig?.media_url}/${i.meta_value}` : blogOne;
-                        return (
-                        <div key={i.id} className="col-lg-4 col-md-6">
-                            <div
-                                className="appie-blog-item mt-30 wow animated fadeInUp"
-                                data-wow-duration="3000ms"
-                                data-wow-delay="200ms"
-                            >
-                                <div className="thumb">
-                                    <img src={blgImg} alt={i.post_title} />
-                                </div>
-                                <div className="content">
-                                    <div className="blog-meta">
-                                        <ul>
-                                            <li>{postDt}</li>
-                                        </ul>
-                                    </div>
-                                    <h3 className="title">
-                                        <a href={i.guid}>
-                                            {i.post_title}
-                                        </a>
-                                    </h3>
-                                    <a href={i.guid}>
-                                        Learn More <i className="fal fa-arrow-right" />
-                                    </a>
-                                </div>
-                            </div>
-                        </div>
-                        )
-                    })
-                }
+    fetchBlogs();
+  }, []);
+
+  const renderBlogs = () => {
+    return blogs?.blogdata?.map((blog, index) => {
+      const options = {
+        weekday: "short",
+        year: "numeric",
+        month: "long",
+        day: "numeric",
+      };
+      const postDt = new Date(blog.post_date).toLocaleDateString(
+        "en-US",
+        options
+      );
+      const blgImg =
+        blog.meta_value != null
+          ? `${blogs?.blogconfig?.media_url}/${blog.meta_value}`
+          : blogOne;
+
+      return (
+        <div key={blog.id} className="col-lg-4 col-md-6">
+          <div
+            className="appie-blog-item mt-30 wow animated fadeInUp"
+            data-wow-duration="3000ms"
+            data-wow-delay="200ms"
+          >
+            <Link to={`/blog/blogdetail/${blog?.id}`} className="thumb">
+              <img src={blgImg} alt={blog.post_title} style={{cursor: "pointer"}} />
+            </Link>
+            <div className="content">
+              <div className="blog-meta">
+                <ul>
+                  <li style={{cursor: "pointer"}}>{postDt}</li>
+                </ul>
+              </div>
+              <h3 className="title">
+                <Link to={`/blog/blogdetail/${blog?.id}`}>{blog.post_title}</Link>
+              </h3>
+              <Link to={`/blog/blogdetail/${blog?.id}`}>
+                Learn More <i className="fal fa-arrow-right" />
+              </Link>
            </div>
+          </div>
+        </div>
+      );
+    });
+  };

-        </>
-    );
+  return (
+    <>
+      <div className="row">
+        {pathname === "/" ? renderBlogs()?.slice(0, 6) : renderBlogs()}
+      </div>
+    </>
+  );
 }

-export default Blogs;
+export default Blogs;
@@ -16,7 +16,7 @@ function HeaderNews({ action }) {
                    <div className="header-nav-box header-nav-box-3 header-nav-box-inner-page">
                        <div className="row align-items-center">
                            <div className="col-lg-2 col-md-4 col-sm-5 col-6 order-1 order-sm-1">
-                                <div className="appie-logo-box">
+                                <div className="wrench-logo-box">
                                    <a href="/">
                                        <img src={logo} alt="" />
                                    </a>
@@ -12,7 +12,7 @@ function HeaderService({ action }) {
                    <div className="header-nav-box header-nav-box-3 header-nav-box-inner-page">
                        <div className="row align-items-center">
                            <div className="col-lg-2 col-md-4 col-sm-5 col-6 order-1 order-sm-1">
-                                <div className="appie-logo-box">
+                                <div className="wrench-logo-box">
                                    <a href="/">
                                        <img src={logo} alt="" />
                                    </a>
@@ -17,7 +17,7 @@ function HeaderNews({ action }) {
                    <div className="header-nav-box header-nav-box-3 header-nav-box-inner-page">
                        <div className="row align-items-center">
                            <div className="col-lg-2 col-md-4 col-sm-5 col-6 order-1 order-sm-1">
-                                <div className="appie-logo-box">
+                                <div className="wrench-logo-box">
                                    <a href="/">
                                        <img src={logo} alt={process.env.REACT_APP_SITE_NAME} />
                                    </a>
@@ -0,0 +1,178 @@
+// import React, { useEffect, useState, useRef } from 'react'
+
+// function CustomSlider({images, speed, indicatorColor, indicatorClass}) {
+//     const imageElement = useRef()
+//     let [sliderCount, setSliderCount] = useState(0)
+
+//     const sliderStart = (count) => {
+//         imageElement.current.classList.add('sliding-images')
+//         setTimeout(()=>{
+//             imageElement.current.classList.remove('sliding-images')
+//         }, 1000)
+//         if(count+1 && typeof(count) == 'number'){
+//             return setSliderCount(count)
+//         } 
+//         if(sliderCount >= images.length-1){
+//             return setSliderCount(0)
+//         }
+//         setSliderCount(prev => prev + 1)
+//     }
+
+//   useEffect(()=>{
+//     const sliderInterval = setInterval(()=>{
+//         sliderStart()
+//     }, speed*1000)
+//     return () => {
+//         clearInterval(sliderInterval)
+//     }
+//   },[sliderCount])
+
+//   return (
+//     <div className='' style={{width:'100%', margin:'auto', position:'relative', overflow: 'hidden'}}>
+//         <img ref={imageElement} className={`sliding-images`} src={images[sliderCount]} alt='image' style={{width:'100%', height:'auto'}} />
+//         <div className='custom_indicators' style={{margin: '10px auto', display:'flex', gap:'10px', justifyContent: 'center'}}>
+//             {images.map((image, index)=>(
+//                 <div 
+//                     key={index} 
+//                     onClick={()=>sliderStart(index)}
+//                     className={`custom_indicator ${indicatorClass}`} 
+//                     style={{backgroundColor:`${sliderCount == index ? `${indicatorColor}` : ''}`, width:'15px', height: '15px', borderRadius: '999px', border: `1px solid ${indicatorColor}`, cursor:'pointer'}}
+//                 ></div>
+//             ))}
+//         </div>
+//     </div>
+//   )
+// }
+
+// export default CustomSlider
+
+import React, { useEffect, useState } from 'react'
+
+function CustomSlider({images, speed, indicatorColor, indicatorClass}) {
+    let [sliderCount, setSliderCount] = useState(0)
+
+    const sliderStart = (count) => {
+        if(count+1 && typeof(count) == 'number'){
+            return setSliderCount(count)
+        } 
+        if(sliderCount >= images.length-1){
+            return setSliderCount(0)
+        }
+        setSliderCount(prev => prev + 1)
+    }
+
+  useEffect(()=>{
+    const sliderInterval = setInterval(()=>{
+        sliderStart()
+    }, speed*1000)
+    return () => {
+        clearInterval(sliderInterval)
+    }
+  },[sliderCount])
+
+  return (
+    <div className='' style={{width:'100%', margin:'auto', position:'relative', overflow:'hidden' }}>
+        <div className='' style={{width: '100%', display:'flex'}}>
+            {images.map((image, index)=>(
+                <img 
+                    key={index} 
+                    src={image} alt='image' 
+                    style={{minWidth:'100%', height:'auto', position:'relative', transition:'.9s', right:`${sliderCount == index ? sliderCount*100+'%':'-100%'}`, opacity:`${sliderCount == index ? '1':'0'}`}} 
+                    // style={{minWidth:'100%', height:'auto', position:'relative', transition:'.9s', right:`${sliderCount*100}%`, opacity:`${sliderCount == index ? '1':'0'}`}} 
+                />
+            ))}
+        </div>
+        <div className='custom_indicators' style={{margin: '10px auto', display:'flex', gap:'10px', justifyContent: 'center'}}>
+            {images.map((image, index)=>(
+                <div 
+                    key={index} 
+                    onClick={()=>sliderStart(index)}
+                    className={`custom_indicator ${indicatorClass}`} 
+                    style={{backgroundColor:`${sliderCount == index ? `${indicatorColor}` : ''}`, width:'15px', height: '15px', borderRadius: '999px', border: `1px solid ${indicatorColor}`, cursor:'pointer'}}
+                ></div>
+            ))}
+        </div>
+    </div>
+  )
+}
+
+export default CustomSlider
+
+// import React, { useEffect, useState } from 'react';
+
+// function CustomSlider({ images, speed, indicatorColor, indicatorClass }) {
+//   const [sliderCount, setSliderCount] = useState(0);
+
+//   const sliderStart = (count) => {
+//     if (count + 1 && typeof count === 'number') {
+//       return setSliderCount(count);
+//     }
+//     if (sliderCount >= images.length - 1) {
+//       return setSliderCount(0);
+//     }
+//     setSliderCount((prev) => prev + 1);
+//   };
+
+//   useEffect(() => {
+//     const sliderInterval = setInterval(() => {
+//       sliderStart();
+//     }, speed * 1000);
+//     return () => {
+//       clearInterval(sliderInterval);
+//     };
+//   }, [sliderCount, speed]);
+
+//   console.log("This is slider count", sliderCount)
+
+//   return (
+//     <div
+//       className=""
+//       style={{ width: '100%', margin: 'auto', position: 'relative', overflow: 'hidden' }}
+//     >
+//       <div className="" style={{ width: '100%', display: 'flex' }}>
+//         {images.map((image, index) => (
+//           <img
+//             key={index}
+//             src={image}
+//             alt="image"
+//             style={{
+//               minWidth: '100%',
+//               height: 'auto',
+//               position: 'relative',
+//               transition: 'opacity .9s',
+//               opacity: sliderCount == index ? '1' : '0',
+//             }}
+//           />
+//         ))}
+//       </div>
+//       <div
+//         className="custom_indicators"
+//         style={{
+//           margin: '10px auto',
+//           display: 'flex',
+//           gap: '10px',
+//           justifyContent: 'center',
+//         }}
+//       >
+//         {images.map((image, index) => (
+//           <div
+//             key={index}
+//             onClick={() => sliderStart(index)}
+//             className={`custom_indicator ${indicatorClass}`}
+//             style={{
+//               backgroundColor: sliderCount === index ? `${indicatorColor}` : '',
+//               width: '15px',
+//               height: '15px',
+//               borderRadius: '999px',
+//               border: `1px solid ${indicatorColor}`,
+//               cursor: 'pointer',
+//             }}
+//           ></div>
+//         ))}
+//       </div>
+//     </div>
+//   );
+// }
+
+// export default CustomSlider;
+
@@ -0,0 +1,26 @@
+import React from 'react'
+import useToggle from '../../Hooks/useToggle';
+import Drawer from '../Mobile/Drawer';
+import HomeOneHeader from '../HomeOne/HomeOneHeader';
+import FooterHomeOne from '../HomeOne/FooterHomeOne';
+import BackToTop from '../BackToTop';
+
+
+function Lnd() {
+    const [drawer, drawerAction] = useToggle(false);
+
+    return (
+        <>
+            <Drawer drawer={drawer} action={drawerAction.toggle} />
+            {/* <StickyHeaderNav action={drawerAction.toggle} /> */}
+            <HomeOneHeader action={drawerAction.toggle} />
+            <div className='min-vh-100 d-flex flex-column justify-content-center align-items-center'>
+                <p>Dummy Empty Page</p>
+            </div>
+            <FooterHomeOne />
+            <BackToTop />
+        </>
+    );
+}
+
+export default Lnd
@@ -0,0 +1,52 @@
+import React, { useEffect, useRef, useState } from 'react';
+
+/**
+ * Renders an image lazily using the Intersection Observer API.
+ * The image is initially hidden and becomes visible once it enters the viewport.
+ * This approach improves performance by only loading images that are actually visible to the user.
+ * 
+ * @returns {JSX.Element} - The lazy image component.
+ */
+function LazyImage({ src, alt }) {
+  const imgRef = useRef();
+  const [isVisible, setIsVisible] = useState(false);
+
+  useEffect(() => {
+    const observer = new IntersectionObserver(
+      (entries) => {
+        const [entry] = entries;
+        if (entry.isIntersecting) {
+          setIsVisible(true);
+          observer.unobserve(imgRef.current); // Stop observing once the image is in the viewport
+        }
+      },
+      {
+        root: null, // Viewport
+        rootMargin: '0px', // No margin
+        threshold: 0.1, // Percentage of the image that needs to be visible
+      }
+    );
+
+    if (imgRef.current) {
+      observer.observe(imgRef.current);
+    }
+
+    return () => {
+      if (imgRef.current) {
+        observer.unobserve(imgRef.current);
+      }
+    };
+  }, []);
+
+  return (
+    <img
+      ref={imgRef}
+      src={isVisible ? src : ''}
+      alt={alt}
+      loading="lazy"
+      className={isVisible ? 'visible' : 'hidden'} // You can apply CSS classes for animations
+    />
+  );
+}
+
+export default LazyImage;
--- a/Show More
+++ b/Show More
Author	SHA1	Message	Date
victorAnumudu	6ca0fe290a	added lnd page route	2023-11-02 23:35:54 +01:00
ameye	ab4d41b3f2	Merge branch 'images-resizing' of WrenchBoard/WrenchBoardMainSite into master	2023-11-02 14:02:41 +00:00
Chief Bube	ce0bb90b51	Resized Images for the landing page	2023-11-02 05:31:18 -07:00
$CHIEFSOFT\ameye$ CHIEFSOFT\ameye	416d07839d	app icons	2023-11-01 07:42:55 -04:00
ameye	6c88af3e4d	Merge branch 'Add-Background-to-Page-not-found-page' of WrenchBoard/WrenchBoardMainSite into master	2023-10-31 15:44:41 +00:00
Chief Bube	6a77e888fb	Add Background to Page not found page	2023-10-31 08:33:55 -07:00
$CHIEFSOFT\ameye$ CHIEFSOFT\ameye	135683e062	currencies	2023-10-30 20:21:59 -04:00
$CHIEFSOFT\ameye$ CHIEFSOFT\ameye	46de9602c6	job list	2023-10-27 20:33:43 -04:00
$CHIEFSOFT\ameye$ CHIEFSOFT\ameye	6849862db2	redeem	2023-10-27 20:22:43 -04:00
$CHIEFSOFT\ameye$ CHIEFSOFT\ameye	3adcdad314	log out jpget	2023-10-27 20:12:30 -04:00
$CHIEFSOFT\ameye$ CHIEFSOFT\ameye	7619d8aa6f	added log out image	2023-10-14 07:33:41 -04:00
$CHIEFSOFT\ameye$ CHIEFSOFT\ameye	05a37b10bc	image	2023-09-27 12:16:23 -04:00
$CHIEFSOFT\ameye$ CHIEFSOFT\ameye	06bb18dae6	https://www.wrenchboard.com/assets/images/apps/rewards.png	2023-09-23 20:41:14 -04:00
$CHIEFSOFT\ameye$ CHIEFSOFT\ameye	618d4c8e2f	family suggest	2023-09-17 09:09:20 -04:00
ameye	890764cba8	Merge branch 'Performing-task-Text-and-Image' of WrenchBoard/WrenchBoardMainSite into master	2023-09-14 13:16:35 +00:00
Ebube	1fb8ae7c8b	fixed a little grammatical error	2023-09-14 12:43:16 +01:00
ameye	87e0ed3a47	Merge branch 'Performing-task-Text-and-Image' of WrenchBoard/WrenchBoardMainSite into master	2023-09-14 10:48:17 +00:00
Ebube	5ceda514a8	added setTimeout to sync with image revealing	2023-09-14 06:15:47 +01:00
Ebube	05e9ece8e1	added custom skeleton loader	2023-09-14 06:08:12 +01:00
ameye	438a3077a3	Merge branch 'Performing-task-Text-and-Image' of WrenchBoard/WrenchBoardMainSite into master	2023-09-12 23:37:09 +00:00
Ebube	d0409422e3	Merge branch 'master' of http://gitlab.chiefsoft.net/WrenchBoard/WrenchBoardMainSite into Performing-task-Text-and-Image	2023-09-13 00:34:48 +01:00
Ebube	ecdf2590a5	fixed the specified bugs	2023-09-13 00:34:26 +01:00
ameye	c3b59cbf5f	Merge branch 'Performing-task-Text-and-Image' of WrenchBoard/WrenchBoardMainSite into master	2023-09-12 22:43:39 +00:00
Ebube	18baab3c1b	Task Complete	2023-09-12 22:30:20 +01:00
$CHIEFSOFT\ameye$ CHIEFSOFT\ameye	216dbdf371	blog components	2023-09-12 08:32:55 -04:00
$CHIEFSOFT\ameye$ CHIEFSOFT\ameye	093786c919	fix text	2023-09-12 07:30:11 -04:00
$CHIEFSOFT\ameye$ CHIEFSOFT\ameye	97284c5c15	Header stuffs	2023-09-12 07:28:36 -04:00
$CHIEFSOFT\ameye$ CHIEFSOFT\ameye	927a7c798a	sign up link	2023-09-11 21:04:26 -04:00
ameye	ee0221f7e1	Merge branch 'homepage-icon-change' of WrenchBoard/WrenchBoardMainSite into master	2023-09-11 15:30:41 +00:00
victorAnumudu	40fb8e67ee	home app icons changed	2023-09-11 13:06:00 +01:00
$CHIEFSOFT\ameye$ CHIEFSOFT\ameye	08e03b27f0	text reduction	2023-09-04 19:03:15 -04:00
ameye	6fde25c65c	Merge branch 'Performing-task-Text-and-Image' of WrenchBoard/WrenchBoardMainSite into master	2023-09-04 18:41:21 +00:00
Ebube	377b2c86be	.	2023-09-04 14:17:03 +01:00
ameye	c643c4e7b7	Merge branch 'Performing-task-Text-and-Image' of WrenchBoard/WrenchBoardMainSite into master	2023-09-04 12:55:41 +00:00
$CHIEFSOFT\ameye$ CHIEFSOFT\ameye	9a503e74ac	family waiting	2023-09-04 03:32:35 -04:00
Ebube	56cc7efa0e	Merge branch 'master' of http://gitlab.chiefsoft.net/WrenchBoard/WrenchBoardMainSite into Performing-task-Text-and-Image	2023-09-04 02:39:31 +01:00
ameye	eb0a27babd	Merge branch 'twitter-logo-replacement' of WrenchBoard/WrenchBoardMainSite into master	2023-09-03 12:59:48 +00:00
victorAnumudu	74176e6b40	twitter logo replaced	2023-09-03 12:36:12 +01:00
$CHIEFSOFT\ameye$ CHIEFSOFT\ameye	32dc4106f2	logo	2023-09-02 16:44:32 -04:00
ameye	e6c152c475	Merge branch 'section-padding' of WrenchBoard/WrenchBoardMainSite into master	2023-09-02 19:24:09 +00:00
victorAnumudu	3a37c79560	section padding reduced	2023-09-02 20:10:43 +01:00
$CHIEFSOFT\ameye$ CHIEFSOFT\ameye	102beac0ba	family svg	2023-09-02 11:23:16 -04:00
$CHIEFSOFT\ameye$ CHIEFSOFT\ameye	8f032e2889	slider	2023-09-01 23:02:47 -04:00
$CHIEFSOFT\ameye$ CHIEFSOFT\ameye	cfd7cce271	set goals	2023-09-01 22:34:36 -04:00
$CHIEFSOFT\ameye$ CHIEFSOFT\ameye	9bb9fecd1a	home items	2023-09-01 22:08:38 -04:00
$CHIEFSOFT\ameye$ CHIEFSOFT\ameye	ad2b213230	home tast	2023-09-01 21:48:42 -04:00
$CHIEFSOFT\ameye$ CHIEFSOFT\ameye	cb26c9361f	app images	2023-09-01 21:00:59 -04:00
$CHIEFSOFT\ameye$ CHIEFSOFT\ameye	42b1286650	Merge branch 'master' of https://gitlab.chiefsoft.net/WrenchBoard/WrenchBoardMainSite	2023-09-01 20:45:41 -04:00
$CHIEFSOFT\ameye$ CHIEFSOFT\ameye	67d9c6cbef	offer img	2023-09-01 20:45:33 -04:00
Ebube	19b18f1af7	Merge branch 'master' of http://gitlab.chiefsoft.net/WrenchBoard/WrenchBoardMainSite into Performing-task-Text-and-Image	2023-09-01 14:12:07 +01:00
Ebube	fd204159d7	tilted div at home page	2023-09-01 13:59:04 +01:00
tokslaw	37a6c3ba10	Logo shows on darker theme	2023-08-31 20:23:53 -04:00
tokslaw	ad088caade	HeaderService logo visible	2023-08-31 19:52:49 -04:00
tokslaw	a6a2f3e535	Merge branch 'master' of https://gitlab.chiefsoft.net/WrenchBoard/WrenchBoardMainSite	2023-08-31 18:03:27 -04:00
tokslaw	46873dcd79	AboutUs - More edits	2023-08-31 18:03:13 -04:00
Ebube	4dbef76ed7	clean up	2023-08-31 06:23:59 +01:00
ameye	c66393792e	Merge branch 'home-image-fade' of WrenchBoard/WrenchBoardMainSite into master	2023-08-30 21:23:19 +00:00
victorAnumudu	7442f9c691	faded image edges	2023-08-30 21:15:54 +01:00
$CHIEFSOFT\ameye$ CHIEFSOFT\ameye	2b0294d63d	box shadow	2023-08-30 08:58:51 -04:00
$CHIEFSOFT\ameye$ CHIEFSOFT\ameye	2a2a2f7aab	on wrench sectioon	2023-08-30 08:50:51 -04:00
$CHIEFSOFT\ameye$ CHIEFSOFT\ameye	a81269bc44	style update	2023-08-30 07:38:22 -04:00
$CHIEFSOFT\ameye$ CHIEFSOFT\ameye	5da1291afd	On wrench area	2023-08-30 07:14:31 -04:00
$CHIEFSOFT\ameye$ CHIEFSOFT\ameye	3411bd0eba	footer text	2023-08-30 07:05:35 -04:00
$CHIEFSOFT\ameye$ CHIEFSOFT\ameye	32679cc055	service title	2023-08-30 06:39:26 -04:00
$CHIEFSOFT\ameye$ CHIEFSOFT\ameye	e9c173568f	Merge branch 'master' of https://gitlab.chiefsoft.net/WrenchBoard/WrenchBoardMainSite	2023-08-29 21:04:03 -04:00
$CHIEFSOFT\ameye$ CHIEFSOFT\ameye	7cca3d7696	fix texts	2023-08-29 20:19:54 -04:00
tokslaw	e695720809	About-text component	2023-08-29 08:13:32 -04:00
Ebube	616250faf4	Merge branch 'master' of http://gitlab.chiefsoft.net/WrenchBoard/WrenchBoardMainSite into Performing-task-Text-and-Image	2023-08-29 11:35:08 +01:00
Ebube	0c4be2733f	.	2023-08-29 11:20:07 +01:00
tokslaw	9b0d5b7ca3	text center reverted	2023-08-28 21:24:06 -04:00
tokslaw	4fdba68f8b	text remodified -ongoing	2023-08-28 20:59:03 -04:00
tokslaw	8796d2ee7c	About us first header text modified	2023-08-28 15:02:32 -04:00
tokslaw	46737bd8fd	Merge branch 'Performing-task-Text-and-Image' of WrenchBoard/WrenchBoardMainSite into master	2023-08-28 18:20:32 +00:00
Ebube	f7ac23748d	proper indentation	2023-08-28 18:48:19 +01:00
Ebube	bbc2bd29fa	added unit	2023-08-28 18:44:04 +01:00
Ebube	71b30b8987	.	2023-08-28 18:42:12 +01:00
Ebube	81fe0f6acf	Merge branch 'master' of http://gitlab.chiefsoft.net/WrenchBoard/WrenchBoardMainSite into Performing-task-Text-and-Image	2023-08-28 18:35:13 +01:00
Ebube	8927614cd6	more clean up for that section	2023-08-28 18:34:17 +01:00
Ebube	f3eb3858e1	fixed text alignment and clean up	2023-08-28 18:15:13 +01:00
ameye	3e415062fa	Merge branch 'home-slider' of WrenchBoard/WrenchBoardMainSite into master	2023-08-28 16:34:44 +00:00
tokslaw	c3b2006fe2	Carmelcase text	2023-08-28 12:17:01 -04:00
tokslaw	52b25308d2	Merge branch 'Performing-task-Text-and-Image' of WrenchBoard/WrenchBoardMainSite into master	2023-08-28 16:14:29 +00:00
victorAnumudu	ec9a3be2cd	added slider to home page	2023-08-28 17:00:56 +01:00
Ebube	34844c08de	Merge branch 'master' of http://gitlab.chiefsoft.net/WrenchBoard/WrenchBoardMainSite into Performing-task-Text-and-Image	2023-08-28 05:43:25 +01:00
Ebube	c2b4bf6964	Performing task Text and Image	2023-08-28 05:41:07 +01:00
tokslaw	9ca5ae17b7	About us img+text modified	2023-08-27 21:00:14 -04:00
ameye	ca5668a6a5	Merge branch 'minor-social-link-modification' of WrenchBoard/WrenchBoardMainSite into master	2023-08-24 10:37:04 +00:00
				`@@ -0,0 +1 @@`
				<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" id="naira"><path fill="#fff" d="M24,5A19,19,0,1,0,43,24,19,19,0,0,0,24,5Zm7,20a1,1,0,0,1,0,2H29v3A1.94,1.94,0,0,1,27.45,32a2,2,0,0,1-2.26-1.08L20,17.05l0,14a1,1,0,0,1-2,0V27H16a1,1,0,0,1,0-2h2V22H16a1,1,0,0,1,0-2h2V17a1.94,1.94,0,0,1,1.55-1.92,2,2,0,0,1,2.26,1.08L27,30,27,16a1,1,0,0,1,2,0v4h2a1,1,0,0,1,0,2H29v3Z" class="color3b3c3d svgShape"></path><path fill="#e3e3e3" d="M24,48A24,24,0,1,1,48,24,24,24,0,0,1,24,48ZM24,2A22,22,0,1,0,46,24,22,22,0,0,0,24,2Z" class="color3b3c3d svgShape"></path></svg>
				`@@ -0,0 +1 @@`
				`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" id="error"><path fill="#ff1d25" d="M29.75,25.73,18.68,3.59a3,3,0,0,0-4-1.33,3.05,3.05,0,0,0-1.33,1.33L2.25,25.73a3,3,0,0,0,2.68,4.34H27.07a3,3,0,0,0,3-3A2.88,2.88,0,0,0,29.75,25.73ZM16,25.38a.94.94,0,1,1,.94-.94A.94.94,0,0,1,16,25.38Zm.94-4.69a.94.94,0,1,1-1.88,0V11.31a.94.94,0,1,1,1.88,0Z"></path></svg>`