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;
@@ -2691,10 +2731,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;
@@ -3012,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 
 ===========================*/
@@ -4265,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 {
@@ -6426,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/DetailsTerms.js

@@ -13,80 +13,262 @@ function DetailsService() {
                         </div>
                         <div className="col-lg-8">
                             <div className="service-details-content">
-                               
                                 <div className="content">
-                                    <h4 className="title">Terms of use</h4>
-                                    <p>
-                                    These Website Terms & Conditions (“T&Cs”) apply to your access and use of www.wrenchboard.com,dashboard.wrenchboard.com (the “Site”), including all software, data, reports, text, images, sounds, video, and all contents made available through any portion of the Site (collectively, the “Content”). Content includes all such elements as a whole, as well as individual elements and portions thereof.
+                                    <div className="mb-4">
+                                    <h4 className="title mb-4">
+                                        Terms of use
+                                    </h4>
+                                    <p className="">
+                                        (updated August 10, 2023)
+                                    </p>
+                                    <p className="">
+                                        These Website Terms & Conditions (“T&Cs”) apply to your access and
+                                        use of www.wrenchboard.com,users.wrenchboard.com (the “Site”),
+                                        native apps, including all software, data, reports, text, images,
+                                        sounds, video, and all contents made available through any portion
+                                        of the Site (collectively, the “Content”). The range includes all
+                                        such elements as whole, individual, and parts.
+                                    </p>
+                                    </div>
                                     <hr />
+                                    <div className="my-4">
+                                    <h4 className="title mb-4">
+                                        Acceptance of Terms
+                                    </h4>
+                                    <p className="">
+                                        WRENCHBOARD permits you (“User” or “you” or “your”) to access and
+                                        use the Site and Content, subject to these T&Cs. By accessing or
+                                        using any portion of the Site, you acknowledge that you have read,
+                                        understood, and agree to be bound by these T&Cs. If you do not agree
+                                        with these T&Cs, you must not accept these T&Cs or access or use the
+                                        site or content.
                                     </p>
-
-                                    <h4 className="title">Acceptance of Terms </h4>
-                                    <p>WRENCHBOARD permits you (“User” or “you” or “your”) to access and use the Site and Content, subject to these T&Cs. By accessing or using any portion of the Site, you acknowledge that you have read, understood, and agree to be bound by these T&Cs. If you do not agree with these T&Cs, you must not accept these T&Cs or access or use the site or content.
+                                    </div>
                                     <hr />
-                                    </p>
-
-                                    <h4 className="title">General Conditions of Use </h4> 
-                                    <p>
-                                        <b>Authorization to Access and Use Site and Content.</b> Subject to your compliance with these T&Cs and the provisions hereof, you may access or use the Site and Content solely for the purpose of your evaluation of WRENCHBOARD and WRENCHBOARD’s products and services. You may only link to the Site or Content, or any portion thereof, as expressly permitted by WRENCHBOARD.
-                                        <br />
-                                        <b>Ownership and Restrictions.</b> All rights, title, and interest in and to the Site and Content will remain with and belong exclusively to WRENCHBOARD. You will not (a) sublicense, resell, rent, lease, transfer, assign, time share or otherwise commercially exploit or make the Site and any Content available to any third party, (b) use the Site and Content in any unlawful manner (including without limitation in violation of any data, privacy or export control laws) or in any manner that interferes with or disrupts the integrity or performance of the Site and Content or their related components, or (c) modify, adapt or hack the Site and Content to, or try to, gain unauthorized access to the restricted portions of the Site and Content or related systems or networks (i.e., circumvent any encryption or other security measures, gain access to any source code or any other underlying form of technology or information, and gain access to any part of the Site and Content, or any other products or services of WRENCHBOARD that are not readily made available to the general public).
-                                        You are not permitted to copy, modify, frame, repost, publicly perform or display, sell, reproduce, distribute, or create derivative works of the Site and Content, except that you may download, display, and print one copy of the publicly available materials (i.e., the Content that does not require an Account name or password to access) on any single computer solely for your personal, non-commercial use, provided that you do not modify the material in any way and you keep intact all copyright, trademark, and other proprietary notices. You agree not to access the Site or Content by any means other than through the interface that is provided by WRENCHBOARD to access the same. You may not use any “page-scrape,” “deep-link,” “spider,” or “robot or other automatic program, device, algorithm or methodology, or any similar manual process, to access, copy, acquire, or monitor any portion of the Site or any Content, or in any way reproduce or circumvent the presentation or navigational structure of the Site or any Content, to obtain or attempt to obtain any Content or other information through any means not made generally available through the Site by WRENCHBOARD. WRENCHBOARD reserves the right to take any lawful measures to prevent any such activity. You may not forge headers or otherwise manipulate identifiers in order to disguise the origin of any message or transmittal you send to WRENCHBOARD on or through the Site or any service offered on or through the Site. You may not pretend that you are, or that you represent, someone else, or impersonate any other individual or entity.
-                                        <br />
-                                        <b>Responsibility for Your Data.</b> You are solely responsible for all data, information, and other content, that you upload, post, or otherwise provide or store (hereafter “post(ing)”) in connection with or relating to the Site.
-
-
-                                        <hr />
-
-
-                                    </p>
-
-                                    <h4 className="title"> Use of Intellectual Property.</h4>
-                                    <p>
-
-                                        <b>Rights in User Content.</b> By posting your information and other content (“User Content”) on or through the Site and Content, you grant WRENCHBOARD a worldwide, non-exclusive, perpetual, irrevocable, royalty-free, fully paid, sublicensable and transferable license to use, modify, reproduce, distribute, display, publish and perform User Content in connection with the Site and Content. WRENCHBOARD has the right, but not the obligation, to monitor the Site and Content and User Content. WRENCHBOARD may remove or disable any User Content at any time for any reason, or for no reason at all. 
-
-                                        You, the user, acknowledge that you bear sole responsibility for adequate security, protection, and backup of User Content. WRENCHBOARD will have no liability to you for any unauthorized access or use of any of User Content, or any corruption, deletion, destruction, or loss of any of User Content.
-
 
+                                    <div className="my-4">
+                                    <h4 className="title mb-4">
+                                        General Conditions of Use
+                                    </h4>
+                                    <ul className="ml-4">
+                                        <li className="">
+                                        <h6 className="title my-4">
+                                            Authorization to Access and Use Site and Content.
+                                        </h6>
+                                        <p className="">
+                                            Subject to your compliance with these T&Cs and the provisions
+                                            hereof, you may access or use the Site and Content solely to
+                                            evaluate WRENCHBOARD and WRENCHBOARD’s products and services.
+                                            You may only link to the Site or Content, or any portion
+                                            thereof, as expressly permitted by WRENCHBOARD.
+                                        </p>
+                                        </li>
+                                        <li className="">
+                                        <h6 className="title my-4">
+                                            Ownership and Restrictions
+                                        </h6>
+                                        <p className="">
+                                            All rights, title, and interest in and to the Site and Content
+                                            will remain exclusive to WRENCHBOARD. You will not:
+                                        </p>
+                                        <ol className="ml-4" style={{listStyleType: 'number'}}>
+                                            <li className="my-2">
+                                            Sublicense, resell, rent, lease, transfer, assign, timeshare,
+                                            or commercially exploit or make the Site and any Content
+                                            available to any third party.
+                                            </li>
+                                            <li className="my-2">
+                                            Use the Site and Content in any unlawful manner (including
+                                            without limitation in violation of any data, privacy, or
+                                            export control laws) or in any way that interferes with or
+                                            disrupts the integrity or performance of the Site and Content
+                                            or their related components.
+                                            </li>
+                                            <li className="my-2">
+                                            Modify, adapt, or hack the Site and Content to, or try to,
+                                            gain unauthorized access to the restricted portions of the
+                                            Site and Content or related systems or networks (i.e.,
+                                            circumvent any encryption or other security measures, gain
+                                            access to any source code or any other underlying form of
+                                            technology or information, and gain access to any part of the
+                                            Site and Content, or any other products or services of
+                                            WRENCHBOARD that are not readily made available to the general
+                                            public).
+                                            </li>
+                                        </ol>
+                                        <p className="my-4">
+                                            You are not permitted to copy, modify, frame, repost, publicly
+                                            perform or display, sell, reproduce, distribute, or create
+                                            derivative works of the Site and Content, except that you may
+                                            download and print one copy of the publicly available materials
+                                            (i.e., the Content that does not require an Account name or
+                                            password to access) on any single computer solely for your
+                                            personal, non-commercial use, provided that you do not modify
+                                            the material in any way. You keep intact all copyright,
+                                            trademark, and other proprietary notices.
+                                        </p>
+                                        <p className="my-4">
+                                            You agree not to access the Site or Content by any means other
+                                            than through the interface that WRENCHBOARD provides to access
+                                            the same. You may not use any “page-scrape,” “deep-link,”
+                                            “spider,” or “robot or other automatic program, device,
+                                            algorithm or methodology, or any similar manual process, to
+                                            access, copy, acquire, or monitor any portion of the Site or any
+                                            Content, or in any way reproduce or circumvent the presentation
+                                            or navigational structure of the Site or any Content, to obtain
+                                            or attempt to obtain any Content or other information through
+                                            any means not made generally available through the Site by
+                                            WRENCHBOARD.
+                                        </p>
+                                        <p className="my-4">
+                                            WRENCHBOARD reserves the right to take lawful measures to
+                                            prevent such activity. You may not forge headers or otherwise
+                                            manipulate identifiers to disguise the origin of any message or
+                                            transmittal you send to WRENCHBOARD on or through the Site or
+                                            any service offered on or through the Site. You may not pretend
+                                            that you are, or that you represent, someone else or impersonate
+                                            any other individual or entity.
+                                        </p>
+                                        </li>
+                                        <li className="">
+                                        <h6 className="title my-4">
+                                            Responsibility for Your Data
+                                        </h6>
+                                        <p className="">
+                                            You are solely responsible for all data, information, and other
+                                            Content, that you upload, post, or otherwise provide or store
+                                            (hereafter “post(ing)”) in connection with or relating to the
+                                            Site. By posting your information and other Content (“User
+                                            Content”) on or through the Site and Content, you grant
+                                            WRENCHBOARD a worldwide, non-exclusive, perpetual, irrevocable,
+                                            royalty-free, sublicensable, and transferable license to use,
+                                            modify, reproduce, distribute, display, publish and perform User
+                                            Content in connection with the Site and Content. WRENCHBOARD has
+                                            the right, but not the obligation, to monitor the Site and
+                                            Content and User Content. <br />
+                                            WRENCHBOARD may remove or turn off any User Content at any time
+                                            for any reason or no reason. WRENCHBOARD will have no liability
+                                            to you for any unauthorized access or use of any of User Content
+                                            or any corruption, deletion, destruction, or loss of any of User
+                                            Content.
+                                        </p>
+                                        </li>
+                                        <li className="">
+                                        <h6 className="title my-4">
+                                            Feedback
+                                        </h6>
+                                        <p className="">
+                                            You may submit ideas, suggestions, or comments (“Feedback”)
+                                            regarding the Site and Content or WRENCHBOARD’s business,
+                                            products, or services. By submitting any Feedback, you
+                                            acknowledge and agree that:{" "}
+                                        </p>
+                                        <ol className="ml-5" style={{listStyleType: 'number'}}>
+                                            <li className="my-2">
+                                            Your Feedback is provided by you voluntarily, and WRENCHBOARD
+                                            may, without any obligations or limitations, use and exploit
+                                            such Feedback in any manner and for any purpose.
+                                            </li>
+                                            <li className="my-2">
+                                            You will not seek and are not entitled to any money or other
+                                            form of compensation, consideration, or attribution concerning
+                                            your Feedback, regardless of whether WRENCHBOARD considered or
+                                            used your Feedback in any manner.
+                                            </li>
+                                            <li className="my-2">
+                                            Your Feedback is not confidential or proprietary information
+                                            of you or any third party.
+                                            </li>
+                                        </ol>
+                                        </li>
+                                    </ul>
+                                    </div>
                                     <hr />
-                                    </p>
 
-                                    <h4 className="title">Feedback</h4>
-                                    <p>
-                                   
-                                    You may submit ideas, suggestions, or comments (“Feedback”) regarding the Site and Content or WRENCHBOARD’s business, products, or services. By submitting any Feedback, you acknowledge and agree that (a) your Feedback is provided by you voluntarily and WRENCHBOARD may, without any obligations or limitation, use and exploit such Feedback in any manner and for any purpose, (b) you will not seek and are not entitled to any money or other form of compensation, consideration, or attribution with respect to your Feedback regardless of whether WRENCHBOARD considered or used your Feedback in any manner, and (c) your Feedback is not the confidential or proprietary information of you or any third party.
+                                    <div className="my-4">
+                                    <h4 className="title mb-4">
+                                        Termination of Access Due to Violations
+                                    </h4>
+                                    <p className="">
+                                        WRENCHBOARD may, in its sole discretion and without prior notice,
+                                        terminate your access to the Site and block your future access to
+                                        the Site if we determine that you have violated these T&Cs or other
+                                        agreements or guidelines which may be associated with your use of
+                                        the Site. Further, WRENCHBOARD may, in its sole discretion and
+                                        without prior notice, terminate your access to the Site for cause,
+                                        which includes (but is not limited to):
+                                    </p>
+                                    <ol className="ml-4" style={{listStyleType: 'number'}}>
+                                        <li className="my-2">
+                                        Requests by law enforcement or other government agencies
+                                        </li>
+                                        <li className="my-2">
+                                        Discontinuance or material modification of the Site or any service
+                                        offered on or through the Site
+                                        </li>
+                                        <li className="my-2">
+                                        Unexpected technical issues or problems.T&Cs Updates
+                                        </li>
+                                    </ol>
+                                    <p className="">
+                                        WRENCHBOARD reserves the right, at its sole discretion, to change or
+                                        modify portions of these T&Cs at any time. WRENCHBOARD will post the
+                                        changes to these T&Cs on the Site and indicate at the top of this
+                                        page the date these terms were last revised. It is your
+                                        responsibility to check the T&Cs periodically for changes. Your
+                                        continued use of the Site and Content after the date any such
+                                        changes become effective constitutes your acceptance of the new or
+                                        revised T&Cs.
+                                    </p>
+                                    </div>
                                     <hr />
+
+                                    <div className="my-4">
+                                    <h4 className="title mb-4">
+                                        NO WARRANTIES AND DISCLAIMER BY WRENCHBOARD
+                                    </h4>
+                                    <p className="">
+                                        THE SITE AND CONTENT, AND ALL SERVER AND NETWORK COMPONENTS, ARE
+                                        PROVIDED ON AN “AS IS” AND “AS AVAILABLE” BASIS WITH ALL ERRORS AND
+                                        DEFECTS AND WITHOUT ANY WARRANTIES OF ANY KIND, AND WRENCHBOARD
+                                        EXPRESSLY DISCLAIMS ALL REPRESENTATIONS AND WARRANTIES, INCLUDING
+                                        ANY IMPLIED WARRANTIES OF ACCURACY, COMPLETENESS, MERCHANTABILITY,
+                                        FITNESS FOR A PARTICULAR PURPOSE OR NON-INFRINGEMENT, AND ANY
+                                        REPRESENTATIONS OR WARRANTIES ARISING FROM COURSE OF DEALING, COURSE
+                                        OF PERFORMANCE OR USAGE OF TRADE. YOU ACKNOWLEDGE THAT WRENCHBOARD
+                                        DOES NOT WARRANT THAT YOUR ACCESS OR USE OR BOTH OF THE SITE AND
+                                        CONTENT WILL BE UNINTERRUPTED, TIMELY, SECURE, ERROR-FREE, OR
+                                        VIRUS-FREE, AND WRENCHBOARD DOES NOT MAKE ANY WARRANTY AS TO THE
+                                        RESULTS THAT MAY BE OBTAINED FROM THE USE OF THE SITE AND CONTENT.
+                                        NO INFORMATION, ADVICE, OR SERVICES OBTAINED BY YOU FROM WRENCHBOARD
+                                        OR THROUGH THE SITE WILL CREATE ANY WARRANTY NOT EXPRESSLY STATED IN
+                                        THESE TERMS and CONDITIONS, AND YOU SHOULD NOT RELY ON THE SITE AND
+                                        THE GENERAL CONTENT ALONE AS THE BASIS FOR YOUR BUSINESS DECISIONS.
                                     </p>
-
-
-                                    <p>
-                                   <h4 className="title"> Termination of Access Due to Violations.</h4>
-                                   WRENCHBOARD may, in its sole discretion and without prior notice, terminate your access to the Site and/or block your future access to the Site if we determine that you have violated these T&Cs or other agreements or guidelines which may be associated with your use of the Site. You also agree that any violation by you of these T&Cs will cause irreparable harm to WRENCHBOARD, for which monetary damages would be inadequate, and you consent to WRENCHBOARD obtaining any injunctive or equitable relief that WRENCHBOARD deems necessary or appropriate in such circumstances, without limiting WRENCHBOARD’s other available remedies. Further, WRENCHBOARD may, in its sole discretion and without prior notice, terminate your access to the Site, for cause, which includes (but is not limited to) (1) requests by law enforcement or other government agencies, (2) discontinuance or material modification of the Site or any service offered on or through the Site, or (3) unexpected technical issues or problems.
-                                        <hr />
-                                    </p>
-
-
-                                    <h4 className="title"> T&Cs Updates</h4>
-                                    <p>
-                                    WRENCHBOARD reserves the right, at its sole discretion, to change or modify portions of these T&Cs at any time. WRENCHBOARD will post the changes to these T&Cs on the Site and will indicate at the top of this page the date these terms were last revised. It is your responsibility to check the T&Cs periodically for changes. Your continued use of the Site and Content after the date any such changes become effective constitutes your acceptance of the new or revised T&Cs.
+                                    </div>
                                     <hr />
+
+                                    <div className="my-4">
+                                    <p className="">
+                                        WRENCHBOARD reserves the right to do any of the following, at any
+                                        time, without notice: ( 1 ); to modify, suspend or terminate operation
+                                        of or access to the Site, or any portion of the Site, for any
+                                        reason; ( 2 ) to modify or change the Site, or any portion of the
+                                        Site, for any reason; and ( 3 ) to interrupt the operation of the
+                                        Site, or any portion of the Site, as necessary to perform routine or
+                                        non-routine maintenance, error correction, or other changes. Changes
+                                        to the Policy
                                     </p>
 
-
-                                    <h4 className="title">NO WARRANTIES AND DISCLAIMER BY WRENCHBOARD</h4> 
-                                    <p>
-                                        THE SITE AND CONTENT, AND ALL SERVER AND NETWORK COMPONENTS, ARE PROVIDED ON AN “AS IS” AND “AS AVAILABLE” BASIS WITH ALL ERRORS AND DEFECTS AND WITHOUT ANY WARRANTIES OF ANY KIND, AND WRENCHBOARD EXPRESSLY DISCLAIMS ALL REPRESENTATIONS AND WARRANTIES, INCLUDING ANY IMPLIED WARRANTIES OF ACCURACY, COMPLETENESS, MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE OR NON-INFRINGEMENT, AND ANY REPRESENTATIONS OR WARRANTIES ARISING FROM COURSE OF DEALING, COURSE OF PERFORMANCE OR USAGE OF TRADE. YOU ACKNOWLEDGE THAT WRENCHBOARD DOES NOT WARRANT THAT YOUR ACCESS OR USE OR BOTH OF THE SITE AND CONTENT WILL BE UNINTERRUPTED, TIMELY, SECURE, ERROR-FREE OR VIRUS-FREE, AND WRENCHBOARD DOES NOT MAKE ANY WARRANTY AS TO THE RESULTS THAT MAY BE OBTAINED FROM USE OF THE SITE AND CONTENT. NO INFORMATION, ADVICE OR SERVICES OBTAINED BY YOU FROM WRENCHBOARD OR THROUGH THE SITE WILL CREATE ANY WARRANTY NOT EXPRESSLY STATED IN THESE TERMS and CONDITIONS AND YOU SHOULD NOT RELY ON THE SITE AND THE GENERAL CONTENT ALONE AS THE BASIS FOR YOUR BUSINESS DECISIONS.                                   
-                                        <hr/>
-                                        WRENCHBOARD reserves the right to do any of the following, at any time, without notice: (1) to modify, suspend or terminate operation of or access to the Site, or any portion of the Site, for any reason; (2) to modify or change the Site, or any portion of the Site, for any reason; and (3) to interrupt the operation of the Site, or any portion of the Site, as necessary to perform routine or non-routine maintenance, error correction, or other changes.
-                                        <hr />
-                                    </p>
-
-                                    <h4 className="title">Changes To the Policy</h4>
-                                    <p>
-                                    We reserve the rights to update and make changes to this Privacy policy at anytime. Changes will become effective once posted. However, we will notify you by email or when you log on to the service or website about any changes that fundamentally affect how we manage your personal information.
-                                    Contacting Us: You may contact us about this policy through our email address anytime : support@wrenchboard.com
+                                    <p className="my-4">
+                                        We reserve the right to update and change this Privacy policy at any
+                                        time. Changes will become effective once posted. However, we will
+                                        notify you by email or when you log on to the service or website
+                                        about any changes that fundamentally affect how we manage your
+                                        personal information. Contacting Us: You may contact us about this
+                                        policy through our email address anytime: support@wrenchboard.com
                                     </p>
+                                    </div>
                                 </div>
                             </div>
                         </div>

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

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