section padding reduced

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>

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;
 }
@@ -2510,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;
@@ -3023,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 
 ===========================*/
@@ -6440,7 +6505,7 @@ blockquote cite {
   color: #fff;
   padding-top: 18px;
   line-height: 28px;
-  opacity: 0.7;
+  opacity: 2.9;
 }
 .appie-about-page-content a {
   color: red;

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

@@ -21,12 +21,12 @@ function HeroAbout() {
                         <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 <a href={process.env.REACT_APP_DASH_URL}>www.WrenchBoard.com</a>
+                                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/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'
-
-
-
+import AboutTextComponent from '../AboutText/AboutText';
 
 
 function ServicesAbout() {
@@ -20,108 +11,11 @@ function ServicesAbout() {
                         <div className="col-12 col-lg-8">
                             <div className="appie-section-title">
                                 <h3 className="appie-title">We’re driven by your values</h3>
-                                <p>The app provides design and digital marketing. </p>
-                            </div>
-                        </div>
-                    </div>
-                    <div className="row">
-                        <div className="col-lg-4 col-md-6">
-                            <div
-                                className="appie-single-service-2 appie-single-service-about mt-30 wow animated fadeInUp"
-                                data-wow-duration="2000ms"
-                                data-wow-delay="200ms"
-                            >
-                                <div className="icon d-flex justify-content-center align-items-center">
-                                    {/* <div className='container'>
-                                        <i className="fal fa-tv"></i>
-                                    </div> */}
-                                    <img src={Design} />
-                                </div>
-                                <h4 className="title">Carefully designed</h4>
-                                <p>Wrenchboard prioritizes your needs and desires. We know that the your success depends on how well we meet your needs. So, we always listen to feedback and take suggestions to heart, constantly striving to improve our products and make them as user-friendly as possible. It's not about us - it's about you.</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>We're committed to providing a cutting-edge solution that serves you at all times.Our goal is to create a product that is intuitive and user-friendly, and we are constantly working to improve and refine our tools. We believe that by prioritizing you, we can create a solution that truly makes a difference and exceeds expectations.</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>WrenchBoard offers a variety of features to keep you engaged and informed throughout your experience. Email notifications and alerts are designed to ensure that you never miss out on important updates or changes.Whether you prefer to receive updates via email, text message, or push notification, we have you covered. </p>
-                            </div>
-                        </div>
-                        <div className="col-lg-4 col-md-6">
-                            <div
-                                className="appie-single-service-2 appie-single-service-about item-4 mt-30 wow animated fadeInUp"
-                                data-wow-duration="2000ms"
-                                data-wow-delay="200ms"
-                            >
-                                <div className="icon d-flex justify-content-center align-items-center">
-                                    {/* <div className='container'>
-                                        <i className="fal fa-mobile"></i>
-                                    </div> */}
-                                    <img src={Mobility} />
-                                </div>
-                                <h4 className="title">Mobility Approach</h4>
-                                <p>WrenchBoard offers a comprehensive suite of tools that seamlessly integrate across all devices, allowing you to stay organized and productive no matter where your day takes you. From managing tasks to tracking your responses and staying connected. With WrenchBoard, experience the freedom and flexibility of a truly mobile lifestyle!</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> With WrenchBoard, managing your activities across different platforms is easy and seamless. Our suite of features is designed to work across all devices, so you can stay organized and productive whether you're on your desktop, tablet, or phone. Say goodbye to the hassle of switching between different apps and platforms. WrenchBoard makes it simple 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 understand how important privacy is you, which is why we are designed to work without needing to share your data. You can trust that your information will remain safe and confidential while using our suite of features to manage your tasks across different platforms. Experience the convenience of a unified, cross-platform experience without sacrificing your privacy.</p>
+                                {/*<p>The app provides design and digital marketing. </p>*/}
                             </div>
                         </div>
                     </div>
+                    
                 </div>
             </section>
         </>

src/components/AboutUs/index.js

@@ -10,6 +10,7 @@ import HeroAbout from './HeroAbout';
 import ServicesAbout from './ServicesAbout';
 import TeamAbout from './TeamAbout';
 import StickyHeaderNav from '../StickyHeader/StickyHeaderNav';
+import AboutTextComponent from '../AboutText/AboutText';
 
 function AboutUs() {
     const [drawer, drawerAction] = useToggle(false);
@@ -23,6 +24,7 @@ function AboutUs() {
             {/* <TeamAbout />*/}
             {/* <SponserHomeTwo />
            <SignupHomeEight />*/}
+           <AboutTextComponent/>
             <FooterHomeOne className="appie-footer-about-area" />
             <BackToTop />
         </>

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" />

src/components/HomeOne/HeroHomeOne.js

@@ -1,5 +1,7 @@
 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';
@@ -48,7 +50,7 @@ function HeroHomeOne() {
                                     {/* <img src={heroThumbOne} alt="WrenchBoard" /> */}
                                     <div style={{width: '350px', margin: 'auto'}}>
                                         <CustomSlider
-                                            images={[heroThumbOne, heroThumbOne, heroThumbOne]}
+                                            images={[heroThumbOne, heroThumbOne1, heroThumbOne]}
                                             speed='5'
                                             indicatorColor='#333'
                                         />

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