faded image edges

.prettierrc

@@ -0,0 +1,6 @@
+{
+    "singleQuote": true,
+    "trailingComma": "es5",
+    "tabWidth": 2
+}
+  

public/assets/images/apps/invite-friend.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 8.467 8.467" id="invite-friend"><g paint-order="fill markers stroke"><path fill="#64ddff" d="M5.11 5.15a2.042 2.042 0 0 1-2.043 2.043A2.042 2.042 0 0 1 1.025 5.15a2.042 2.042 0 0 1 2.042-2.043A2.042 2.042 0 0 1 5.11 5.151z"></path><path 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-variant-east-asian:normal;font-feature-settings:normal;font-variation-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;white-space:normal;shape-padding:0;shape-margin:0;inline-size:0;isolation:auto;mix-blend-mode:normal;solid-color:#000;solid-opacity:1" fill="#005fc1" d="M37.255 35.294c-.696 0-1.394.16-1.949.48-.555.32-.883.78-.883 1.276 0 .357.173.695.476.976h.423l.073-.275c-.316-.228-.443-.477-.443-.701 0-.262.172-.559.62-.817.895-.516 2.47-.516 3.365 0 .448.258.621.555.621.817 0 .224-.128.473-.445.701l.073.275h.424c.303-.281.477-.62.477-.976 0-.496-.33-.956-.885-1.276-.554-.32-1.25-.48-1.947-.48zm0-3.207c-.763 0-1.389.623-1.389 1.386 0 .763.626 1.387 1.39 1.387a1.39 1.39 0 0 0 1.386-1.387 1.39 1.39 0 0 0-1.387-1.386zm0 .529c.477 0 .857.38.857.857s-.38.858-.857.858a.855.855 0 0 1-.86-.858c0-.477.383-.857.86-.857z" color="#000" font-family="sans-serif" font-weight="400" overflow="visible" transform="translate(-33.022 -30.617)"></path><path 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-variant-east-asian:normal;font-feature-settings:normal;font-variation-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;white-space:normal;shape-padding:0;shape-margin:0;inline-size:0;isolation:auto;mix-blend-mode:normal;solid-color:#000;solid-opacity:1" fill="#009cff" d="M40.028 32.469a.265.265 0 0 0-.263.265v.397h-.397a.265.265 0 0 0-.266.265.265.265 0 0 0 .266.264h.397v.397a.265.265 0 0 0 .263.265.265.265 0 0 0 .266-.265v-.397h.396a.265.265 0 0 0 .266-.264.265.265 0 0 0-.266-.265h-.396v-.397a.265.265 0 0 0-.266-.265z" color="#000" font-family="sans-serif" font-weight="400" overflow="visible" transform="translate(-33.022 -30.617)"></path><path 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-variant-east-asian:normal;font-feature-settings:normal;font-variation-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;white-space:normal;shape-padding:0;shape-margin:0;inline-size:0;isolation:auto;mix-blend-mode:normal;solid-color:#000;solid-opacity:1" fill="#009cff" d="M37.031 30.889a3.965 3.965 0 0 0-2.398.982 3.972 3.972 0 0 0-.897 4.817 3.972 3.972 0 0 0 4.465 2.017 3.973 3.973 0 0 0 3.024-3.855.265.265 0 0 0-.266-.264.265.265 0 0 0-.264.264 3.44 3.44 0 1 1-1.474-2.823.265.265 0 0 0 .369-.064.265.265 0 0 0-.067-.37 3.96 3.96 0 0 0-2.492-.704z" color="#000" font-family="sans-serif" font-weight="400" overflow="visible" transform="translate(-33.022 -30.617)"></path></g></svg>

public/assets/images/apps/msg/FILE.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" id="files"><path fill="#56B3E5" d="M9 0h10.1c.9 0 1.7.4 2.1 1.1l.4.6c.5.7 1.3 1.1 2.1 1.1H39c1.4 0 2.5 1.1 2.5 2.5v17.3c0 1.4-1.1 2.5-2.5 2.5H9c-1.4 0-2.5-1.1-2.5-2.5V2.5C6.5 1.1 7.6 0 9 0z"></path><path fill="#E6E6E5" d="M35.9 2.7H9.3c-.5 0-.9.4-.9.9v8.9c0 .5.4.9.9.9h26.5c.5 0 .9-.4.9-.9V3.6c.1-.5-.3-.9-.8-.9z"></path><path fill="#98D0F1" d="M39 1.6H28.8c-.9 0-1.7.4-2.1 1.1l-.4.6c-.5.7-1.3 1.1-2.1 1.1H9c-1.4 0-2.5 1.1-2.5 2.5v17.3c0 1.4 1.1 2.5 2.5 2.5h30c1.4 0 2.5-1.1 2.5-2.5v-20c0-1.4-1.1-2.6-2.5-2.6z"></path><path fill="#D66556" d="M5.7 5.5h12.4c1 0 2 .5 2.6 1.4l.5.8c.6.9 1.5 1.4 2.6 1.4h18.5c1.7 0 3.1 1.4 3.1 3.1v21.2c0 1.7-1.4 3.1-3.1 3.1H5.7c-1.7 0-3.1-1.4-3.1-3.1V8.6c0-1.7 1.4-3.1 3.1-3.1z"></path><path fill="#FFF" d="M38.5 8.8H6.1c-.6 0-1.2.5-1.2 1.2v10.9c0 .6.5 1.2 1.2 1.2h32.5c.6 0 1.2-.5 1.2-1.2V10c-.1-.7-.6-1.2-1.3-1.2z"></path><path fill="#ED7161" d="M42.3 7.5H29.9c-1 0-2 .5-2.6 1.4l-.5.8c-.6.9-1.5 1.4-2.6 1.4H5.7c-1.7 0-3.1 1.4-3.1 3.1v21.2c0 1.7 1.4 2.1 3.1 2.1h36.6c1.7 0 3.1-.4 3.1-2.1V10.6c0-1.7-1.4-3.1-3.1-3.1z"></path><path fill="#E7B95E" d="M3.6 12.3h13.8c1.2 0 2.3.6 2.9 1.6l.6.9c.6 1 1.7 1.6 2.9 1.6h20.7c1.9 0 3.5 1.6 3.5 3.5v22.6c0 1.9-1.6 3.5-3.5 3.5H3.6C1.7 46 .1 44.4.1 42.5V15.7c0-1.9 1.6-3.4 3.5-3.4z"></path><path fill="#FFF" d="M40.2 15.9H4c-.7 0-1.3.6-1.3 1.3v12.2c0 .7.6 1.3 1.3 1.3h36.2c.7 0 1.3-.6 1.3-1.3V17.2c0-.7-.6-1.3-1.3-1.3z"></path><path fill="#FFCC67" d="M44.4 14.5H30.6c-1.2 0-2.3.6-2.9 1.6l-.6.9c-.6 1-1.7 1.6-2.9 1.6H3.6c-1.9 0-3.5 1.6-3.5 3.5v22.6c0 1.9 1.6 3.5 3.5 3.5h40.9c1.9 0 3.5-1.6 3.5-3.5V17.9c-.1-1.9-1.7-3.4-3.6-3.4z"></path></svg>

public/assets/images/apps/msg/TEXT.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" id="message"><g fill="none" stroke="#303c42" stroke-linecap="round" stroke-linejoin="round" data-name="Chat Bubble 13"><path d="M21 1.5H3A1.5 1.5 0 0 0 1.5 3v19.5l5-5H21a1.5 1.5 0 0 0 1.5-1.5V3A1.5 1.5 0 0 0 21 1.5Z"></path><circle cx="12" cy="10" r=".5"></circle><circle cx="7" cy="10" r=".5"></circle><circle cx="17" cy="10" r=".5"></circle></g></svg>

public/assets/images/site.webmanifest

@@ -0,0 +1 @@
+{"name":"","short_name":"","icons":[{"src":"/android-chrome-192x192.png","sizes":"192x192","type":"image/png"},{"src":"/android-chrome-512x512.png","sizes":"512x512","type":"image/png"}],"theme_color":"#ffffff","background_color":"#ffffff","display":"standalone"}

public/index.html

@@ -2,7 +2,7 @@
 <html lang="en">
   <head>
     <meta charset="utf-8" />
-    <link type="image/png" rel="icon" href="%PUBLIC_URL%/favicon.png" />
+    <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." />
@@ -26,7 +26,7 @@
       Learn how to configure a non-root public URL by running `npm run build`.
     -->
     <title>WrenchBoard</title>
-    <meta property="og:image" content="%PUBLIC_URL%/favicon.png" />
+    <meta property="og:image" content="%PUBLIC_URL%/favicon-32x32.png" />
     <meta property="business:contact_data:street_address" content="Cumberland Pkwy">
     
 

public/site.webmanifest

@@ -0,0 +1 @@
+{"name":"","short_name":"","icons":[{"src":"/android-chrome-192x192.png","sizes":"192x192","type":"image/png"},{"src":"/android-chrome-512x512.png","sizes":"512x512","type":"image/png"}],"theme_color":"#ffffff","background_color":"#ffffff","display":"standalone"}

src/Routes.js

@@ -44,6 +44,7 @@ function Routes() {
                     <ScrollToTop>
                         <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="/use-cases" component={UseCases} />

src/assets/css/main.css

@@ -107,12 +107,29 @@ ol {
 }
 
 p {
-  font-size: 16px;
+  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;
@@ -1435,6 +1452,12 @@ p {
   letter-spacing: 2px;
   text-shadow: 0px 4px 10px rgba(0,0,0,0.3);
 }
+.appie-title .earn-rewards{
+  border-radius: 7px;
+  background-color: rgb(245, 71, 71) !important;
+  /* text-shadow: 2px 2px 2px #fff; */
+}
+
 @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;
@@ -1735,7 +1758,7 @@ p {
   font-weight: 500;
 }
 .appie-hero-content .appie-title {
-  font-size: 60px;
+  font-size: 53px;
   line-height: 70px;
   margin-top: 10px;
   margin-bottom: 22px;
@@ -1796,6 +1819,7 @@ p {
   }
 }
 .appie-hero-content ul li a {
+  cursor: pointer;
   background: #0e1133;
   color: #fff;
   line-height: 40px;
@@ -2348,14 +2372,16 @@ p {
 }
 
 .appie-single-service {
-  padding: 50px 30px 43px;
+  /* padding: 50px 30px 43px; */
+  padding: 30px;
   background: #fff;
   border-radius: 6px;
   transition: all linear 0.3s;
 }
 @media only screen and (min-width: 992px) and (max-width: 1200px) {
   .appie-single-service {
-    padding: 50px 15px 43px;
+    /* padding: 50px 15px 43px; */
+    padding: 30px;
   }
 }
 .appie-single-service .icon {
@@ -2501,10 +2527,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;
@@ -2662,6 +2691,14 @@ p {
 .service-details-sidebar .service-download-widget a {
   padding: 13px 30px;
   color: #505056;
+  display: flex;
+  align-items: center;
+  gap: '2px'
+}
+.service-details-sidebar .service-download-widget a img {
+  width: 25px;
+  height: 25px;
+  margin-right: 5px;
 }
 .service-details-sidebar .service-download-widget a:hover {
   color: #4687ba;
@@ -2680,10 +2717,14 @@ p {
 }
 .service-details-content .content .title {
   font-size: 30px;
-  margin-bottom: 18px;
+  /* margin-bottom: 18px; */
   letter-spacing: 2px;
   text-shadow: 0px 4px 10px rgba(0,0,0,0.3);
 }
+.service-details-content .content h6.title {
+  font-size: 20px;
+  letter-spacing: 1px;
+}
 .service-details-content .content p {
   font-size: 18px;
   line-height: 28px;
@@ -3001,6 +3042,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 
 ===========================*/
@@ -3050,6 +3123,7 @@ p {
 }
 .appie-traffic-title p {
   font-size: 16px;
+  margin-top: 10px;
 }
 @media only screen and (min-width: 992px) and (max-width: 1200px) {
   .appie-traffic-title .title {
@@ -3109,12 +3183,15 @@ p {
   box-shadow: 0px 6px 10px 0px rgba(16, 73, 189, 0.3);
 }
 .appie-traffic-service .title {
-  font-size: 20px;
+  font-size: 24px;
   font-weight: 700;
   padding-bottom: 7px;
+  text-shadow: 3px 4px 10px rgba(0,0,0,0.3);
 }
 .appie-traffic-service p {
-  font-size: 15px;
+  font-size: 17px;
+  margin-top: 10px;
+  /*margin-bottom: 2px;*/
 }
 .appie-traffic-service.item-2 .icon i {
   background: linear-gradient(135deg, #f7b8af 0%, #f8452d 100%);
@@ -4239,16 +4316,26 @@ p {
   background-repeat: no-repeat;
   background-size: cover;
 }
+
 .mission-side-box {
   position: absolute;
   top: 0;
   right: 0;
-  height: 100%;
+  height: 750px;
   width: 50%;
   background-image: url(../images/mission-bg.png);
   background-position: center;
   background-repeat: no-repeat;
   background-size: cover;
+  box-shadow: 0 0 15px 25px #eef1f6 inset;
+}
+@media only screen and (max-width: 991px) {
+  .mission-side-box {
+    position: relative;
+    height: 500px;
+    width: 100%;
+    margin: 20px auto 0 auto;
+  }
 }
 
 @media only screen and (min-width: 768px) and (max-width: 991px) {
@@ -5686,6 +5773,10 @@ blockquote cite {
 .footer-about-widget {
   padding-right: 70px;
   margin-top: 30px;
+  .logo {
+    position: relative;
+    top: -12px;
+  }
 }
 @media (max-width: 767px) {
   .footer-about-widget {
@@ -5694,7 +5785,7 @@ blockquote cite {
   }
 }
 .footer-about-widget p {
-  padding-top: 25px;
+  padding-top: 1px;
 }
 .footer-about-widget > a {
   font-size: 15px;
@@ -5749,9 +5840,10 @@ blockquote cite {
   }
 }
 .footer-navigation .title {
-  font-size: 20px;
+  font-size: 25px;
   font-weight: 700;
   margin-bottom: 18px;
+  text-shadow: 0px 4px 10px rgba(0,0,0,0.3);
 }
 .footer-navigation ul {
   margin: 0;
@@ -5789,9 +5881,10 @@ blockquote cite {
   }
 }
 .footer-widget-info .title {
-  font-size: 20px;
+  font-size: 25px;
   font-weight: 700;
   margin-bottom: 18px;
+  text-shadow: 0px 4px 10px rgba(0,0,0,0.3);
 }
 .footer-widget-info ul {
   margin: 0;
@@ -6396,18 +6489,20 @@ blockquote cite {
 }
 .appie-about-page-content p {
   color: #fff;
-  padding-top: 15px;
-  opacity: 0.7;
+  padding-top: 18px;
+  line-height: 28px;
+  opacity: 2.9;
 }
 .appie-about-page-content a {
-  color: #fff;
+  color: red;
   border: 2px solid #fff;
   border-radius: 10px;
-  line-height: 40px;
+  padding: 0px 10px;
+  font-weight: 500;
+  /* line-height: 40px;
   padding: 0 30px;
   font-size: 14px;
-  font-weight: 500;
-  margin-top: 43px;
+  margin-top: 43px; */
 }
 .appie-about-page-content a:hover {
   background: #fff;

src/assets/css/style.css

@@ -14,7 +14,6 @@
 .boxBorder{
   border-color: aqua;
   background-color: #f5f6f7 ;
-  height:300px;
 }
 .appie-loader {
   opacity: 0;

src/components/AboutText/AboutText.js

@@ -0,0 +1,130 @@
+    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 AboutTextComponent () {
+    
+        return (
+            <>
+            <div className="container">
+                <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">
+                                <img src={Design} alt="Design Icon" />
+                            </div>
+                            <h4 className="designed-title">Carefully designed</h4>
+                            <p className="designed-description">
+                                Wrenchboard focuses on your needs and desires. 
+                                Your success is our priority, driving us to listen and adapt to your feedback.
+                                We're dedicated to enhancing our products for your convenience. It's all about you, not us.</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">
+                                        
+                                        <img src={Approach} alt="Approach Icon"/>
+                                    </div>
+                                    <h4 className="designed-title">Modern Approach</h4>
+                                    <p className="designed-description">
+                                        Our commitment is delivering a top-tier solution for you. 
+                                        Our aim: an intuitive, user-friendly product that continually evolves.
+                                        By focusing on you, we'll surpass expectations and make a real impact.</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">
+                                    
+                                        <img src={Interactive} alt="Interactive Icon"/>
+                                    </div>
+                                    <h4 className="designed-title">User Interactive</h4>
+                                    <p className="designed-description">
+                                        WrenchBoard keeps you engaged with diverse features. 
+                                        Email alerts guarantee you're always in the loop. 
+                                        Get updates your way: email, text, or push notifications . 
+                                        We've got you covered. </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">
+                                            <img src={Mobility} alt="Mobility Icon" />
+                                        </div>
+                                        <h4 className="designed-title">Mobility Approach</h4>
+                                        <p className="designed-description">
+                                            WrenchBoard's tools unite devices for seamless organization and productivity anywhere.
+                                            Manage tasks, track responses, and stay connected effortlessly. 
+                                            Experience a true mobile lifestyle with WrenchBoard!</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">
+                                        
+                                        <img src={Seamless} alt="Seamless Icon"/>
+                                    </div>
+                                    <h4 className="designed-title">Seamless Sync</h4>
+                                    <p className="designed-description"> 
+                                        WrenchBoard simplifies cross-platform activity management. 
+                                        Our features sync seamlessly on desktop, tablet, and phone, ensuring organization and productivity.
+                                        No more app hopping . WrenchBoard streamlines the process.</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">
+                                    
+                                        <img src={Privacy} alt="Privacy Icon"/>
+                                    </div>
+                                    <h4 className="designed-title">Privacy</h4>
+                                    <p className="designed-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.</p>
+                                </div>
+                    </div>
+                </div>
+            </div>
+            </>
+        );
+    };
+
+    export default AboutTextComponent;

src/components/AboutUs/HeaderAbout.js

@@ -1,5 +1,5 @@
 import React, { useEffect } from 'react';
-import logo from '../../assets/images/wrenchboard.png';
+import logo from '../../assets/images/wrenchboard-logo-text.png';
 import StickyMenu from '../../lib/StickyMenu';
 import Navigation from '../Navigation';
 import getConfig from './../../Config/config'

src/components/AboutUs/HeroAbout.js

@@ -17,15 +17,16 @@ function HeroAbout() {
             <section className="appie-about-page-area">
                 <div className="container">
                     <div className="row">
-                        <div className="col-lg-8">
+                        {/* col-lg-8 */}
+                        <div className="col-12">
                             <div className="appie-about-page-content">
                                 <h3 className="title">
-                                    Online Marketplace Platform to Get Paid.
+                                    We Empower Reward for Achievements
                                 </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 www.wrenchBoard.com
+                                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.
+                                Learn more at <a href={process.env.REACT_APP_DASH_URL}>www.WrenchBoard.com</a>
                                 </p>
                                
                             </div>

src/components/AboutUs/ServicesAbout.js

@@ -1,14 +1,5 @@
 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() {
@@ -17,111 +8,14 @@ function ServicesAbout() {
             <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-md-8">
+                        <div className="col-12 col-lg-8">
                             <div className="appie-section-title">
-                                <h3 className="appie-title">We’re driven by our values</h3>
-                                <p>The app provides design and digital marketing. </p>
-                            </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>
+                                <h3 className="appie-title">We’re driven by your values</h3>
+                                {/*<p>The app provides design and digital marketing. </p>*/}
                             </div>
                         </div>
                     </div>
+                    
                 </div>
             </section>
         </>

src/components/AboutUs/index.js

@@ -9,18 +9,22 @@ import HeaderAbout from './HeaderAbout';
 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);
     return (
         <>
             <Drawer drawer={drawer} action={drawerAction.toggle} />
+            {/* <StickyHeaderNav action={drawerAction.toggle} /> */}
             <HeaderAbout drawer={drawer} action={drawerAction.toggle} />
             <HeroAbout />
             <ServicesAbout />
             {/* <TeamAbout />*/}
             {/* <SponserHomeTwo />
            <SignupHomeEight />*/}
+           <AboutTextComponent/>
             <FooterHomeOne className="appie-footer-about-area" />
             <BackToTop />
         </>

src/components/Contact/Forms.js

@@ -54,8 +54,8 @@ function Forms() {
                                     </p>
 
                                     <p>
-                                        <i className="fal fa-home"></i>
-                                        {process.env.REACT_APP_SUPPORT_NG_ADDRESS}
+                                        {/*<i className="fal fa-home"></i>*/}
+                                        {/*{process.env.REACT_APP_SUPPORT_NG_ADDRESS}*/}
                                     </p>
 
                                 </div>
@@ -65,7 +65,7 @@ function Forms() {
                                         <i className="fal fa-phone"></i>
                                         {process.env.REACT_APP_SUPPORT_PHONE}
                                         <br />
-                                       {process.env.REACT_APP_SUPPORT_PHONE_NG}
+                                       {/*{process.env.REACT_APP_SUPPORT_PHONE_NG}*/}
                                     </p>
                                 </div>
                                 <div className="single-info">

src/components/Contact/index.js

@@ -6,12 +6,14 @@ import Drawer from '../Mobile/Drawer';
 import HeaderNews from '../News/HeaderNews';
 import HeroNews from '../News/HeroNews';
 import Forms from './Forms';
+import StickyHeaderNav from '../StickyHeader/StickyHeaderNav';
 
 function Contact() {
     const [drawer, drawerAction] = useToggle(false);
     return (
         <>
             <Drawer drawer={drawer} action={drawerAction.toggle} />
+            {/* <StickyHeaderNav action={drawerAction.toggle} /> */}
             <HeaderNews drawer={drawer} action={drawerAction.toggle} />
             <HeroNews
                 title="Contact us"

src/components/FAQ/Index.js

@@ -7,6 +7,7 @@ import StickyMenu from '../../lib/StickyMenu';
 import FAQService from '../Service/FAQServices';
 import HeroNews from '../News/HeroNews';
 import HeaderNews from '../News/HeaderNews';
+import StickyHeaderNav from '../StickyHeader/StickyHeaderNav';
 
 
 function FAQ() {
@@ -17,11 +18,12 @@ function FAQ() {
     return (
         <>
             <Drawer drawer={drawer} action={drawerAction.toggle} />
+            {/* <StickyHeaderNav action={drawerAction.toggle} /> */}
             <HeaderNews action={drawerAction.toggle} />
             <HeroNews
                 title="Frequently asked questions"
                 breadcrumb={[
-                    { link: '/', title: 'home' },
+                    { link: '/', title: 'Home' },
                     { link: '/faq', title: 'Faq' },
                 ]}
             />

src/components/HomeOne/FooterHomeOne.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import { Link } from 'react-router-dom';
-import logo from '../../assets/images/wrenchboard.png';
+import logo from '../../assets/images/wrenchboard-logo-text.png';
 import getConfig from './../../Config/config'
 
 function FooterHomeOne({ className }) {
@@ -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" />
@@ -112,12 +112,12 @@ function FooterHomeOne({ className }) {
                                 <div className="apps-download-btn">
                                     <ul>
                                         <li>
-                                            <a href={process.env.APPLE_APP}>
+                                            <a href={process.env.REACT_APP_APPLE_APP} target="_blank">
                                                 <i className="fab fa-apple" /> Download for iOS
                                             </a>
                                         </li>
                                         <li>
-                                            <a className="item-2" href={process.env.REACT_APP_ANDROID_APP}>
+                                            <a className="item-2" href={process.env.REACT_APP_ANDROID_APP} target="_blank">
                                                 <i className="fab fa-google-play" /> Download for
                                                 Android
                                             </a>

src/components/HomeOne/HeroHomeOne.js

@@ -5,6 +5,7 @@ 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() {
@@ -16,21 +17,20 @@ function HeroHomeOne() {
                     <div className="row align-items-center">
                         <div className="col-lg-6">
                             <div className="appie-hero-content">
-                                <span>Welcome To WrenchBoard..</span>
+                                {/*<span>Welcome To WrenchBoard..</span>*/}
                                 <h1 className="appie-title">
-                                    Earn Money with Any Skill.
+                                    Turn Chores into Exciting Challenges and Earn <span className='earn-rewards px-2'>Rewards!</span>
                                 </h1>
                                 <p>
-                                    The Marketplace platform to earn money with your skills, find, buy and sell professional services. Connect, build an outstanding portfolio and link to an integrated community with best services via a digital platform.
-                                </p>
+                                    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.APPLE_APP}>
+                                        <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" href={process.env.REACT_APP_ANDROID_APP}>
+                                        <a className="item-2 light" href={process.env.REACT_APP_ANDROID_APP} target="_blank">
                                             <i className="fab fa-google-play" /> Download for
                                             Android
                                         </a>
@@ -45,7 +45,14 @@ function HeroHomeOne() {
                                     data-wow-duration="2000ms"
                                     data-wow-delay="200ms"
                                 >
-                                    <img src={heroThumbOne} alt="WrenchBoard" />
+                                    {/* <img src={heroThumbOne} alt="WrenchBoard" /> */}
+                                    <div style={{width: '350px', margin: 'auto'}}>
+                                        <CustomSlider
+                                            images={[heroThumbOne, heroThumbOne, heroThumbOne]}
+                                            speed='5'
+                                            indicatorColor='#333'
+                                        />
+                                    </div>
                                 </div>
                                 <div
                                     className="thumb-2 wow animated fadeInRight"

src/components/HomeOne/HomeOneHeader.js

@@ -1,5 +1,5 @@
 import React, { useEffect } from 'react';
-import logo from '../../assets/images/wrenchboard.png';
+import logo from '../../assets/images/wrenchboard-logo-text.png';
 import StickyMenu from '../../lib/StickyMenu';
 import Navigation from '../Navigation';
 import getConfig from './../../Config/config'

src/components/HomeOne/RecentJobsOne.js

@@ -64,13 +64,13 @@ titleLen(title){
                                     var options = { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' };
                                     var postDt  = new Date(i.expire).toLocaleDateString("en-US", options); 
 
-                                    return (<div className="col-lg-3 col-md-6">
+                                    return (<div className="col-md-6 col-xl-3">
                                         <div
-                                            className="appie-single-service mt-30 wow animated fadeInUp boxBorder d-flex align-items-center"
+                                            className="appie-single-service container-fluid mt-30 wow animated fadeInUp boxBorder d-flex align-items-center"
                                             data-wow-duration="3000ms"
                                             data-wow-delay="200ms"
                                         >
-                                            <div className="content d-flex flex-column justify-content-between align-items-center" style={{height: '260px'}}>
+                                            <div className="content d-flex flex-column justify-content-between" style={{height: '200px', width: '100%'}}>
                                                 <div className="titleBox">
                                                     <h3 className="title">
                                                         <a href={dashUrl}>
@@ -83,12 +83,16 @@ titleLen(title){
                                                     <div className="blog-meta">
                                                         <ul>
                                                             <li className="expire">
-                                                                {/* <a href={dashUrl}><span className='font_red'> Expires : {postDt} </span></a> */}
-                                                                <a href={dashUrl}><span className='font_red'> Expires : <CountDownTimer targetDate={postDt}/> </span></a>
+                                                                <a href={dashUrl} className='d-block'>
+                                                                    <div className='font_red d-flex align-items-start'> 
+                                                                        <div className='pr-2'>Expires :</div>
+                                                                        <CountDownTimer targetDate={postDt}/>
+                                                                    </div>
+                                                                </a>
                                                             </li>
                                                         </ul>
                                                     </div>
-                                                    <div className='lmoreTxt'>
+                                                    <div className='lmoreTxt d-flex justify-content-end align-items-center'>
                                                         <a href={dashUrl}>
                                                         Learn More <i className="fal fa-arrow-right" />
                                                     </a>                                                

src/components/HomeOne/ServicesHomeOne.js

@@ -4,80 +4,70 @@ import IconTwo from '../../assets/images/icon/Findtaskicon.png';
 import IconThree from '../../assets/images/icon/taskicon.png';
 import IconFour from '../../assets/images/icon/walleticon.png';
 
-// import FirstSlide from '../../assets/images/icon/Untitledxyz.png';
-
-
-function ServicesHomeOne({ className }) {
-    return (
-        <section className={`appie-service-area pt-90 pb-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>
-            </div>
-        </section>
-    );
+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>
+  );
 }
 
-export default ServicesHomeOne;
+function ServicesHomeOne({ className }) {
+  const serviceTitle = "Set Goals and Rewards to Inspire";
+  const serviceItems = [
+    {
+      icon: IconOne,
+      title: 'Free Account',
+      description: 'Join WrenchBoard. Create an account for Income.',
+    },
+    {
+      icon: IconTwo,
+      title: 'Find Task',
+      description: 'Build a Self-Portfolio with sole purpose to Cash-Out.',
+    },
+    {
+      icon: IconThree,
+      title: 'Complete',
+      description: 'Organize and Manage your teams efficiently. Manage your workgroup.',
+    },
+    {
+      icon: IconFour,
+      title: 'Get Paid',
+      description: 'Start Boosting your Income by earning Cash for your Time and Skills.',
+    },
+  ];
+
+  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>
+          </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;

src/components/HomeOne/TrafficHomeTwo.js

@@ -1,79 +1,77 @@
 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 free 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> Offers to get hired or search in the marketplace for your skill 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 the task professionally</h5>
-                                    <p> Deliver client specification, communicate with instant messaging.</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 Pay for your skills put to use </h5>
-                                    <p>Get your account credited when the job is completed, and the client authorizes payment.</p>
-                                </div>
-                            </div>
-                            {/* <div className="col-lg-12">
+  var site = getConfig()[0];
+  return (
+    <section className="wrench-on-area pt-140 pb-180">
+      <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." },
+  ]
+}

src/components/HomeOne/index.js

@@ -17,19 +17,20 @@ import TestimonialHomeOne from './TestimonialHomeOne';
 import TrafficHomeTwo from './TrafficHomeTwo';
 import WrenchBoardHome from './WrenchBoardHome';
 import RecentJobsOne from './RecentJobsOne';
+import StickyHeaderNav from '../StickyHeader/StickyHeaderNav';
 //import BlogData from './../../Services/BlogData';
 
 function HomeOne() {
     const [drawer, drawerAction] = useToggle(false);
 
-
     return (
         <>
             <Drawer drawer={drawer} action={drawerAction.toggle} />
+            {/* <StickyHeaderNav action={drawerAction.toggle} /> */}
             <HomeOneHeader action={drawerAction.toggle} />
             <HeroHomeOne />
             <ServicesHomeOne />
-            <RecentJobsOne />
+            {/*<RecentJobsOne />*/}
             <FeaturesHomeOne />
             {/*<FaqHomeOne />*/}
             {/*<TrafficHomeOne />*/}

src/components/Mobile/Drawer.js

@@ -1,6 +1,6 @@
 import React, { useState } from 'react';
 import { Link } from 'react-router-dom';
-import logo from '../../assets/images/wrenchboard.png';
+import logo from '../../assets/images/wrenchboard-logo-text.png';
 import getConfig from './../../Config/config'
 
 

src/components/News/HeaderNews.js

@@ -1,5 +1,5 @@
 import React, { useEffect } from 'react';
-import logo from '../../assets/images/wrenchboard.png';
+import logo from '../../assets/images/wrenchboard-logo-text.png';
 import StickyMenu from '../../lib/StickyMenu';
 import Navigation from '../Navigation';
 import getConfig from './../../Config/config'

src/components/News/SingleNews.js

@@ -7,12 +7,14 @@ import Blog from './Blog';
 import BlogSideBar from './BlogSideBar';
 import HeaderNews from './HeaderNews';
 import HeroNews from './HeroNews';
+import StickyHeaderNav from '../StickyHeader/StickyHeaderNav';
 
 function SingleNews() {
     const [drawer, drawerAction] = useToggle(false);
     return (
         <>
             <Drawer drawer={drawer} action={drawerAction.toggle} />
+            {/* <StickyHeaderNav action={drawerAction.toggle} /> */}
             <HeaderNews action={drawerAction.toggle} />
             <HeroNews
                 title="Blog"