image blended with container bg

src/assets/css/main.css

@@ -1435,6 +1435,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;
@@ -2665,6 +2671,14 @@ p {
 .service-details-sidebar .service-download-widget a {
   padding: 13px 30px;
   color: #505056;
+  display: flex;
+  align-items: center;
+  gap: '2px'
+}
+.service-details-sidebar .service-download-widget a img {
+  width: 25px;
+  height: 25px;
+  margin-right: 5px;
 }
 .service-details-sidebar .service-download-widget a:hover {
   color: #4687ba;
@@ -4261,6 +4275,7 @@ p {
   background-position: center;
   background-repeat: no-repeat;
   background-size: cover;
+  box-shadow: 0 0 15px 25px #eef1f6 inset;
 }
 @media only screen and (max-width: 991px) {
   .mission-side-box {
@@ -6422,18 +6437,20 @@ blockquote cite {
 }
 .appie-about-page-content p {
   color: #fff;
-  padding-top: 15px;
+  padding-top: 18px;
+  line-height: 28px;
   opacity: 0.7;
 }
 .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/AboutUs/HeroAbout.js

@@ -17,7 +17,8 @@ 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.
@@ -25,7 +26,7 @@ function HeroAbout() {
                                 <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
+                                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>
                                 </p>
                                
                             </div>

src/components/AboutUs/ServicesAbout.js

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

src/components/AboutUs/index.js

@@ -9,12 +9,14 @@ import HeaderAbout from './HeaderAbout';
 import HeroAbout from './HeroAbout';
 import ServicesAbout from './ServicesAbout';
 import TeamAbout from './TeamAbout';
+import StickyHeaderNav from '../StickyHeader/StickyHeaderNav';
 
 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 />

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,6 +18,7 @@ function FAQ() {
     return (
         <>
             <Drawer drawer={drawer} action={drawerAction.toggle} />
+            {/* <StickyHeaderNav action={drawerAction.toggle} /> */}
             <HeaderNews action={drawerAction.toggle} />
             <HeroNews
                 title="Frequently asked questions"

src/components/HomeOne/HeroHomeOne.js

@@ -18,7 +18,7 @@ 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.

src/components/HomeOne/index.js

@@ -17,6 +17,7 @@ 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() {
@@ -26,6 +27,7 @@ function HomeOne() {
     return (
         <>
             <Drawer drawer={drawer} action={drawerAction.toggle} />
+            {/* <StickyHeaderNav action={drawerAction.toggle} /> */}
             <HomeOneHeader action={drawerAction.toggle} />
             <HeroHomeOne />
             <ServicesHomeOne />

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/Privacy.js

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

src/components/Service/ServiceSideMenu.js

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

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