section padding reduced

.prettierrc

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

public/assets/images/apps/family.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>

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>

src/assets/css/main.css

@@ -107,12 +107,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 +907,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;
 }
@@ -1435,6 +1466,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;
@@ -1796,6 +1833,7 @@ p {
   }
 }
 .appie-hero-content ul li a {
+  cursor: pointer;
   background: #0e1133;
   color: #fff;
   line-height: 40px;
@@ -2503,11 +2541,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;
@@ -2665,6 +2705,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;
@@ -3008,6 +3056,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 
 ===========================*/
@@ -4261,6 +4341,7 @@ p {
   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 {
@@ -6422,18 +6503,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/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">Unlocking Potential</h4>
+                            <p className="designed-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.</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">Growing Money Mindset</h4>
+                                    <p className="designed-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.</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">Realtime Notifications</h4>
+                                    <p className="designed-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. </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">Social Media Management</h4>
+                                        <p className="designed-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!</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">Inspiring Future Leaders</h4>
+                                    <p className="designed-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.</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/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.
+                                <p>Learn more at <a href={process.env.REACT_APP_DASH_URL}>www.WrenchBoard.com</a></p>
                                 </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/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/BlogHomeOne.js

@@ -8,7 +8,7 @@ import Blogs from '../News/Blogs';
 function BlogHomeOne() {
     return (
         <>
-            <section className="appie-blog-area pt-90 pb-95">
+            <section className="appie-blog-area pt-45 pb-95">
                 <div className="container">
                     <div className="row">
                         <div className="col-lg-12">

src/components/HomeOne/FooterHomeOne.js

@@ -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

@@ -1,10 +1,13 @@
 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() {
@@ -18,19 +21,18 @@ function HeroHomeOne() {
                             <div className="appie-hero-content">
                                 {/*<span>Welcome To WrenchBoard..</span>*/}
                                 <h1 className="appie-title">
-                                    Turn Chores into Exciting Challenges and Earn Rewards!
+                                    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 +47,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, heroThumbOne1, heroThumbOne]}
+                                            speed='5'
+                                            indicatorColor='#333'
+                                        />
+                                    </div>
                                 </div>
                                 <div
                                     className="thumb-2 wow animated fadeInRight"

src/components/HomeOne/ServicesHomeOne.js

@@ -1,83 +1,73 @@
 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 IconOne from '../../assets/images/icon/play.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';
 
-// 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. 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>
+          </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,80 +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 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." },
+  ]
+}

src/components/HomeOne/index.js

@@ -17,15 +17,16 @@ 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 />

src/components/News/HeaderNews.js

@@ -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>

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"

src/components/News/index.js

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

src/components/Service/HeaderService.js

@@ -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>

src/components/Service/Privacy.js

@@ -9,6 +9,7 @@ import DetailsService from './DetailsService';
 import HeaderService from './HeaderService';
 import HeroService from './HeroService';
 import DetailsPrivacy from './DetailsPrivacy';
+import StickyHeaderNav from '../StickyHeader/StickyHeaderNav';
 
 
 function Privacy() {
@@ -19,6 +20,7 @@ function Privacy() {
     return (
         <>
             <Drawer drawer={drawer} action={drawerAction.toggle} />
+            {/* <StickyHeaderNav action={drawerAction.toggle} /> */}
             <HeaderService action={drawerAction.toggle} />
             <HeroService title="Privacy Policy" />
             <DetailsPrivacy />

src/components/Service/ServiceSideMenu.js

@@ -1,5 +1,10 @@
 import React from 'react';
 import getConfig from './../../Config/config'
+import AboutIcon from '../../assets/images/icon/about-us.ico'
+import HomeIcon from '../../assets/images/icon/home-icon.ico'
+import UseCaseIcon from '../../assets/images/icon/use-case.ico'
+import PrivacyIcon from '../../assets/images/icon/privacy-policy.ico'
+import TermsIcon from '../../assets/images/icon/term-and-conditions.ico'
 
 function ServiceSideMenu() {
     var site = getConfig()[0];
@@ -9,20 +14,23 @@ function ServiceSideMenu() {
 
                 <div className="service-download-widget">
                     <a href="/">
-                        <i className="fal fa-download"></i>
+                        {/* <i className="fal fa-download"></i> */}
+                        <img src={HomeIcon} alt='sidenav-icon' />
                         <span>Home</span>
                     </a>
                 </div>
 
                 <div className="service-download-widget">
                     <a href="/about-us">
-                        <i className="fal fa-download"></i>
+                        {/* <i className="fal fa-download"></i> */}
+                        <img src={AboutIcon} alt='sidenav-icon' />
                         <span>About us</span>
                     </a>
                 </div>
                 <div className="service-download-widget">
                     <a href="/use-cases">
-                        <i className="fal fa-file-pdf"></i>
+                        {/* <i className="fal fa-file-pdf"></i> */}
+                        <img src={UseCaseIcon} alt='sidenav-icon' />
                         <span>Use Cases</span>
                     </a>
                 </div>
@@ -31,13 +39,15 @@ function ServiceSideMenu() {
 
                 <div className="service-download-widget">
                     <a href="/privacy">
-                        <i className="fal fa-download"></i>
+                        {/* <i className="fal fa-download"></i> */}
+                        <img src={PrivacyIcon} alt='sidenav-icon' />
                         <span>Privacy Policy</span>
                     </a>
                 </div>
                 <div className="service-download-widget">
                     <a href="/terms">
-                        <i className="fal fa-file-pdf"></i>
+                        {/* <i className="fal fa-file-pdf"></i> */}
+                        <img src={TermsIcon} alt='sidenav-icon' />
                         <span>Terms of use</span>
                     </a>
                 </div>
@@ -49,7 +59,7 @@ function ServiceSideMenu() {
                         </li>
 
                         <li>
-                            <a href={site.apple_app}>
+                            <a href={process.env.REACT_APP_APPLE_APP}>
                                 <i className="fab fa-apple" /> Download for iOS
                             </a>
                         </li>

src/components/Service/Terms.js

@@ -9,6 +9,7 @@ import DetailsService from './DetailsService';
 import HeaderService from './HeaderService';
 import HeroService from './HeroService';
 import DetailsTerms from './DetailsTerms';
+import StickyHeaderNav from '../StickyHeader/StickyHeaderNav';
 
 function Terms() {
     useEffect(() => {
@@ -18,6 +19,7 @@ function Terms() {
     return (
         <>
             <Drawer drawer={drawer} action={drawerAction.toggle} />
+            {/* <StickyHeaderNav action={drawerAction.toggle} /> */}
             <HeaderService action={drawerAction.toggle} />
             <HeroService title="Terms of use" />
             <DetailsTerms />

src/components/Service/index.js

@@ -11,6 +11,7 @@ import HeroService from './HeroService';
 import HeroNews from '../News/HeroNews';
 import MissionStatement from "./MissionStatement";
 import ServiceTopart from "./ServiceTopart";
+import StickyHeaderNav from '../StickyHeader/StickyHeaderNav';
 
 function Service() {
     useEffect(() => {
@@ -20,6 +21,7 @@ function Service() {
     return (
         <>
             <Drawer drawer={drawer} action={drawerAction.toggle} />
+            {/* <StickyHeaderNav action={drawerAction.toggle} /> */}
             <HeaderService action={drawerAction.toggle} />
             {/* <HeroService title="Our Service to you" /> */}
             <HeroNews

src/components/StickyHeader/StickyHeaderNav.js

@@ -0,0 +1,51 @@
+import React, { useEffect } from 'react';
+import logo from '../../assets/images/wrenchboard-logo-text.png';
+import StickyMenu from '../../lib/StickyMenu';
+import Navigation from '../Navigation';
+
+
+function StickyHeaderNav({action}) {
+    useEffect(() => {
+        StickyMenu();
+    }, []);
+    return (
+        <header className="appie-header-area appie-sticky">
+            <div className="container">
+                <div className="header-nav-box">
+                    <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">
+                                <a href="/">
+                                    <img src={logo} alt="WrenchBoard" />
+                                </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" /> 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" />
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </header>
+    );
+}
+
+export default StickyHeaderNav

src/components/UseCases/HeaderNews.js

@@ -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>

src/components/UseCases/index.js

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

src/components/customSlider/CustomSlider.js

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