updated quote style

src/assets/css/main.css

@@ -142,6 +142,7 @@ p {
   -moz-user-select: none;
   -ms-user-select: none;
   user-select: none;
+  border: 1px solid #4687ba;
   padding: 0 30px;
   font-size: 15px;
   line-height: 45px;
@@ -155,18 +156,11 @@ p {
   -o-transition: all 0.4s ease-out 0s;
   transition: all 0.4s ease-out 0s;
   background-color: #4687ba;
-  border: 1px solid #4687ba;
-  /* transition: all linear 0.3s;
-  border: 1px solid #89216b;
-  background-image: linear-gradient(90deg, #89216b 0%, #da4453 100%); */
 }
 .main-btn:hover {
   background-color: #fff;
   color: #2b70fa;
   border-color: #2b70fa;
-  /* background-image: linear-gradient(90deg, #000 0%, #000 100%);
-  color: #fff;
-  border-color: #000; */
 }
 .main-btn.main-btn-2 {
   background-color: #fff;
@@ -247,17 +241,17 @@ p {
     font-size: 15px;
   }
 }
-/* .appie-section-title .main-btn {
+.appie-section-title .main-btn {
   border-radius: 30px;
   border: 2px solid #e7eaef;
   background: #fff;
   color: #0e1133;
-} */
-/* .appie-section-title .main-btn:hover {
+}
+.appie-section-title .main-btn:hover {
   background: #ff3e66;
   color: #fff;
   border-color: #ff3e66;
-} */
+}
 .appie-section-title.appie-section-title-2 .appie-title {
   color: #fff;
 }
@@ -893,15 +887,15 @@ p {
   right: 0;
   z-index: 999;
 }
-/* .appie-header-area.appie-header-2-area .appie-btn-box .main-btn {
+.appie-header-area.appie-header-2-area .appie-btn-box .main-btn {
   background: #ff3e66;
   border-radius: 30px;
   border-color: #ff3e66;
-} */
-/* .appie-header-area.appie-header-2-area .appie-btn-box .main-btn:hover {
+}
+.appie-header-area.appie-header-2-area .appie-btn-box .main-btn:hover {
   background: transparent;
   color: #ff3e66;
-} */
+}
 .appie-header-area.appie-header-3-area.appie-sticky.sticky {
   background: #0e1133;
 }
@@ -981,30 +975,30 @@ p {
 .header-nav-box.header-nav-box-3 .appie-btn-box .login-btn {
   color: #fff;
 }
-/* .header-nav-box.header-nav-box-3 .appie-btn-box .main-btn {
+.header-nav-box.header-nav-box-3 .appie-btn-box .main-btn {
   background: #ff6b58;
   border-color: #ff6b58;
-} */
-/* .header-nav-box.header-nav-box-3 .appie-btn-box .main-btn:hover {
+}
+.header-nav-box.header-nav-box-3 .appie-btn-box .main-btn:hover {
   background: transparent;
   color: #ff6b58;
-} */
+}
 .header-nav-box.header-nav-box-3 .toggle-btn {
   color: #fff;
   font-size: 20px;
 }
-/* .header-nav-box.header-nav-box-3.header-nav-box-inner-page
+.header-nav-box.header-nav-box-3.header-nav-box-inner-page
   .appie-btn-box
   .main-btn {
   border-color: #fff;
   background: transparent;
-} */
-/* .header-nav-box.header-nav-box-3.header-nav-box-inner-page
+}
+.header-nav-box.header-nav-box-3.header-nav-box-inner-page
   .appie-btn-box
   .main-btn:hover {
   background: #fff;
   color: #2b70fa;
-} */
+}
 .header-nav-box.header-nav-box-5 .appie-header-main-menu ul > li > a {
   color: #fff;
 }
@@ -1020,14 +1014,14 @@ p {
 .header-nav-box.header-nav-box-5 .appie-btn-box .login-btn {
   color: #fff;
 }
-/* .header-nav-box.header-nav-box-5 .appie-btn-box .main-btn {
+.header-nav-box.header-nav-box-5 .appie-btn-box .main-btn {
   background: #f84a6e;
   border-color: #f84a6e;
-} */
-/* .header-nav-box.header-nav-box-5 .appie-btn-box .main-btn:hover {
+}
+.header-nav-box.header-nav-box-5 .appie-btn-box .main-btn:hover {
   background: transparent;
   color: #f84a6e;
-} */
+}
 .header-nav-box.header-nav-box-5 .toggle-btn {
   color: #fff;
   font-size: 20px;
@@ -1035,14 +1029,14 @@ p {
 .header-nav-box.header-nav-4-box .appie-header-main-menu ul > li > a:hover {
   color: #801f82;
 }
-/* .header-nav-box.header-nav-4-box .appie-btn-box .main-btn {
+.header-nav-box.header-nav-4-box .appie-btn-box .main-btn {
   background: #801f82;
   border-color: #801f82;
-} */
-/* .header-nav-box.header-nav-4-box .appie-btn-box .main-btn:hover {
+}
+.header-nav-box.header-nav-4-box .appie-btn-box .main-btn:hover {
   background: transparent;
   color: #801f82;
-} */
+}
 @media (max-width: 767px) {
   .header-nav-box.header-nav-4-box .appie-btn-box ul {
     margin-right: 10px;
@@ -1073,14 +1067,14 @@ p {
   background: #801f82;
   border-radius: 50%;
 }
-/* .header-nav-box.header-nav-box-6 .main-btn {
+.header-nav-box.header-nav-box-6 .main-btn {
   background: #9b2cfa;
   border-color: #9b2cfa;
-} */
-/* .header-nav-box.header-nav-box-6 .main-btn:hover {
+}
+.header-nav-box.header-nav-box-6 .main-btn:hover {
   background: transparent;
   color: #9b2cfa;
-} */
+}
 .header-nav-box.header-nav-box-6 .appie-header-main-menu ul > li > a:hover {
   color: #9b2cfa;
 }
@@ -1426,14 +1420,14 @@ p {
     top: 0;
   }
 }
-/* .appie-header-8-area .header-nav-box .appie-btn-box .main-btn {
+.appie-header-8-area .header-nav-box .appie-btn-box .main-btn {
   background: #db0f30;
   border-color: #db0f30;
-} */
-/* .appie-header-8-area .header-nav-box .appie-btn-box .main-btn:hover {
+}
+.appie-header-8-area .header-nav-box .appie-btn-box .main-btn:hover {
   background: #fff;
   color: #db0f30;
-} */
+}
 .appie-header-8-area .header-nav-box .appie-header-main-menu ul > li a:hover {
   color: #db0f30;
 }
@@ -1651,20 +1645,20 @@ p {
   i {
   border-color: rgba(255, 255, 255, 0.2);
 }
-/* .appie-hero-area.appie-hero-3-area.appie-hero-5-area
+.appie-hero-area.appie-hero-3-area.appie-hero-5-area
   .appie-hero-content
   .hero-btns
   .main-btn {
   border-color: rgba(255, 255, 255, 0.2);
   color: #fff;
-} */
-/* .appie-hero-area.appie-hero-3-area.appie-hero-5-area
+}
+.appie-hero-area.appie-hero-3-area.appie-hero-5-area
   .appie-hero-content
   .hero-btns
   .main-btn:hover {
   background: #f84a6e;
   color: #fff;
-} */
+}
 .appie-hero-area .hero-shape-1 {
   position: absolute;
   left: 0;
@@ -1916,7 +1910,7 @@ p {
     line-height: 50px;
   }
 }
-/* .appie-hero-content.appie-hero-content-4 a.main-btn {
+.appie-hero-content.appie-hero-content-4 a.main-btn {
   border: 2px solid #801f82;
   color: #801f82;
   background: #fff;
@@ -1924,11 +1918,11 @@ p {
   padding: 0 40px;
   font-size: 16px;
   margin-top: 40px;
-} */
-/* .appie-hero-content.appie-hero-content-4 a.main-btn:hover {
+}
+.appie-hero-content.appie-hero-content-4 a.main-btn:hover {
   background: #801f82;
   color: #fff;
-} */
+}
 .appie-hero-content.appie-hero-content-6 > span {
   color: #9b2cfa;
 }
@@ -1983,18 +1977,14 @@ p {
   border-color: #fff;
 }
 .appie-hero-content.appie-hero-content-6 ul li a.item-2 {
+  /* background: #fff; */
   background-color: rgb(219, 237, 245);
   border-color: #fff;
-  /* color: #fff;
-  border-color:#89216b;
-  background-image: linear-gradient(90deg, #89216b 0%, #da4453 100%); */
 }
 .appie-hero-content.appie-hero-content-6 ul li a.item-2:hover {
   background: #9b2cfa;
   border-color: #9b2cfa;
   color: #fff;
-  /* background-image: linear-gradient(90deg, #000 0%, #000 100%);
-  border-color:#000; */
 }
 .appie-hero-content.appie-hero-content-6.appie-hero-content-7 .appie-title {
   color: #fff;
@@ -2047,7 +2037,7 @@ p {
   height: 500px;
   width: 500px;
   transform: translate(-50%, -50%);
-  background: #dbedf5;
+  background: #4687ba;
   border-radius: 50%;
   z-index: -1;
 }
@@ -2389,7 +2379,7 @@ p {
     4.APPIE SERVOCE css 
 ===========================*/
 .appie-service-area {
-  background: #fdfaf4;
+  background: #fbf4fe;
   position: relative;
   background-position: 92% 100%;
   background-repeat: no-repeat;
@@ -2679,10 +2669,10 @@ p {
   border-radius: 21% 79% 58% 42% / 50% 46% 54% 50%;
 }
 
-/* .appie-services-6-area .appie-section-title .main-btn:hover {
+.appie-services-6-area .appie-section-title .main-btn:hover {
   background: #9b2cfa;
   border-color: #9b2cfa;
-} */
+}
 .appie-services-6-area .appie-single-service-2 a:hover {
   color: #9b2cfa;
 }
@@ -3154,7 +3144,7 @@ p {
 
 .appie-traffic-title {
   padding-right: 220px;
-  margin-bottom: 20px;
+  margin-bottom: 43px;
 }
 @media (max-width: 767px) {
   .appie-traffic-title {
@@ -3200,12 +3190,29 @@ p {
 }
 .appie-traffic-service {
   padding-left: 40px;
-  /* padding-right: 70px; */
+  padding-right: 70px;
 }
 .appie-traffic-service-two {
   padding-left: 40px;
 }
 
+@media only screen and (min-width: 992px) and (max-width: 1200px) {
+  .appie-traffic-service, .appie-traffic-service-two {
+    padding-right: 0;
+  }
+}
+@media only screen and (min-width: 768px) and (max-width: 991px) {
+  .appie-traffic-service {
+    margin-bottom: 30px;
+    padding-right: 50px;
+  }
+}
+@media (max-width: 767px) {
+  .appie-traffic-service {
+    margin-bottom: 30px;
+    padding-right: 0px;
+  }
+}
 .appie-traffic-service .icon, .appie-traffic-service-two .icon {
   position: absolute;
   left: 0;
@@ -3223,13 +3230,13 @@ p {
   box-shadow: 0px 6px 10px 0px rgba(16, 73, 189, 0.3);
 }
 .appie-traffic-service .title, .appie-traffic-service-two title {
-  font-size: 20px;
+  font-size: 24px;
   font-weight: 700;
   padding-bottom: 7px;
   text-shadow: 3px 4px 10px rgba(0,0,0,0.3);
 }
 .appie-traffic-service p, .appie-traffic-service-two p {
-  font-size: 16px;
+  font-size: 17px;
   margin-top: 10px;
   /*margin-bottom: 2px;*/
 }
@@ -3323,10 +3330,10 @@ p {
 .traffic-btn a.main-btn i {
   padding-left: 6px;
 }
-/* .traffic-btn a.main-btn:hover {
+.traffic-btn a.main-btn:hover {
   background: #2b70fa;
   color: #fff;
-} */
+}
 
 /*===========================
     6.APPIE TRAFFICE css 
@@ -7247,17 +7254,17 @@ blockquote cite {
   font-weight: 700;
   margin-bottom: 8px;
 }
-/* .appie-download-3-box .content a.main-btn {
+.appie-download-3-box .content a.main-btn {
   background: #fff;
   color: #0e1133;
   border-color: #fff;
   margin-top: 33px;
-} */
-/* .appie-download-3-box .content a.main-btn:hover {
+}
+.appie-download-3-box .content a.main-btn:hover {
   background: #ff6b58;
   border-color: #ff6b58;
   color: #fff;
-} */
+}
 .appie-download-3-box .content a.main-btn i {
   padding-right: 6px;
 }
@@ -7271,18 +7278,18 @@ blockquote cite {
   color: #0e1133;
   border-color: #fff;
 }
-/* .appie-download-3-box.appie-download-6-box a.main-btn:hover {
+.appie-download-3-box.appie-download-6-box a.main-btn:hover {
   background: #9b2cfa;
   border-color: #9b2cfa;
-} */
+}
 .appie-download-3-box.appie-download-6-box a.main-btn.main-btn-2 {
   background: #9b2cfa;
   border-color: #9b2cfa;
 }
-/* .appie-download-3-box.appie-download-5-box a.main-btn:hover {
+.appie-download-3-box.appie-download-5-box a.main-btn:hover {
   background: #801f82;
   border-color: #801f82;
-} */
+}
 .appie-download-3-box.appie-download-5-box a.main-btn.main-btn-2 {
   background: #801f82;
   border-color: #801f82;

src/components/AboutUs/HeaderAbout.js

@@ -3,7 +3,6 @@ import logo from '../../assets/images/wrenchboard-logo-text.png';
 import StickyMenu from '../../lib/StickyMenu';
 import Navigation from '../Navigation';
 import getConfig from './../../Config/config'
-import { Link } from 'react-router-dom';
 
 function HeaderAbout({ action }) {
     useEffect(() => {
@@ -19,9 +18,9 @@ function HeaderAbout({ action }) {
                         <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">
-                                    <Link to="/">
+                                    <a href="/">
                                         <img src={logo} alt="" width="175px" height="38px" loading='eager' />
-                                    </Link>
+                                    </a>
                                 </div>
                             </div>
                             <div className="col-lg-6 col-md-1 col-sm-1 order-3 order-sm-2">

src/components/HomeOne/FooterHomeOne.js

@@ -22,13 +22,13 @@ function FooterHomeOne({ className }) {
                                 <p>
                                     {`It is simple. You can set goals, task, or anything that needs to be done and reward accomplishment. WrenchBoard is the platform to connect opportunities. `}
                                 </p>
-                                <Link to="/service">
+                                <a href="/service">
                                     Read More <i className="fal fa-arrow-right" />
-                                </Link>
+                                </a>
                                 <div className="social mt-30">
                                     <ul>
                                         <li>
-                                            <a to={site.facebook_link}>
+                                            <a href={site.facebook_link}>
                                                 <i className="fab fa-facebook-f" />
                                             </a>
                                         </li>
@@ -53,7 +53,7 @@ function FooterHomeOne({ className }) {
                                         <Link to="/service">Our Services</Link>
                                     </li>
                                     <li>
-                                        <Link to="/use-cases">Use Cases</Link>
+                                        <a href="/use-cases">Use Cases</a>
                                     </li>
                                     <li>
                                         <a target='_blank' href={process.env.REACT_APP_AGENT_LINK}>Agent</a>
@@ -73,16 +73,16 @@ function FooterHomeOne({ className }) {
                                         <Link to="/contact">Contact</Link>
                                     </li>
                                     <li>
-                                        <Link to="/faq">Faqs</Link>
+                                        <a href="/faq">Faqs</a>
                                     </li>
                                     <li>
                                         <a href="https://blog.wrenchboard.com/resources/">Resources</a>
                                     </li>
                                     <li>
-                                        <Link to="/privacy">Privacy Policy</Link>
+                                        <a href="/privacy">Privacy Policy</a>
                                     </li>
                                     <li>
-                                        <Link to="/terms">Terms of use</Link>
+                                        <a href="/terms">Terms of use</a>
                                     </li>
                                 </ul>
                             </div>

src/components/HomeOne/HeroHomeOne.js

@@ -13,14 +13,13 @@ import SliderOne from '../../assets/images/home/top_sliders/slide_1.png'
 import SliderTwo from '../../assets/images/home/top_sliders/slide_2.png'
 import SliderThree from '../../assets/images/home/top_sliders/slide_3.png'
 import SliderFour from '../../assets/images/home/top_sliders/slide_4.png'
-import SliderFive from '../../assets/images/home/top_sliders/slide_5.png'
-import SliderCenter from '../../assets/images/home/top_sliders/slide_33.png'
+// import SliderFive from '../../assets/images/home/top_sliders/slide_5.png'
 
 
 function HeroHomeOne() {
 
   const sliders = [
-    SliderOne, SliderTwo, SliderCenter, SliderThree, SliderFour, SliderFive
+    SliderOne, SliderTwo, SliderThree, SliderFour
   ]
 
   return (

src/components/HomeOne/HomeOneHeader.js

@@ -3,7 +3,6 @@ import logo from '../../assets/images/wrenchboard-logo-text.png';
 import StickyMenu from '../../lib/StickyMenu';
 import Navigation from '../Navigation';
 import getConfig from './../../Config/config'
-import { Link } from 'react-router-dom';
 
 function HomeOneHeader({ action, showLogoOnly = false }) {
   var site = getConfig()[0];
@@ -17,9 +16,9 @@ function HomeOneHeader({ action, showLogoOnly = false }) {
           <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">
-                <Link to="/">
+                <a href="/">
                   <img src={logo} alt="WrenchBoard" loading='eager' width="175px" height="38px" />
-                </Link>
+                </a>
               </div>
             </div>
 

src/components/Service/ServiceSideMenu.js

@@ -5,7 +5,6 @@ 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'
-import { Link } from 'react-router-dom';
 
 function ServiceSideMenu() {
     var site = getConfig()[0];
@@ -14,43 +13,43 @@ function ServiceSideMenu() {
             <div className="service-details-sidebar mr-50">
 
                 <div className="service-download-widget">
-                    <Link to="/">
+                    <a href="/">
                         {/* <i className="fal fa-download"></i> */}
                         <img src={HomeIcon} alt='sidenav-icon' />
                         <span>Home</span>
-                    </Link>
+                    </a>
                 </div>
 
                 <div className="service-download-widget">
-                    <Link to="/about-us">
+                    <a href="/about-us">
                         {/* <i className="fal fa-download"></i> */}
                         <img src={AboutIcon} alt='sidenav-icon' />
                         <span>About us</span>
-                    </Link>
+                    </a>
                 </div>
                 <div className="service-download-widget">
-                    <Link to="/use-cases">
+                    <a href="/use-cases">
                         {/* <i className="fal fa-file-pdf"></i> */}
                         <img src={UseCaseIcon} alt='sidenav-icon' />
                         <span>Use Cases</span>
-                    </Link>
+                    </a>
                 </div>
 
 
 
                 <div className="service-download-widget">
-                    <Link to="/privacy">
+                    <a href="/privacy">
                         {/* <i className="fal fa-download"></i> */}
                         <img src={PrivacyIcon} alt='sidenav-icon' />
                         <span>Privacy Policy</span>
-                    </Link>
+                    </a>
                 </div>
                 <div className="service-download-widget">
-                    <Link to="/terms">
+                    <a href="/terms">
                         {/* <i className="fal fa-file-pdf"></i> */}
                         <img src={TermsIcon} alt='sidenav-icon' />
                         <span>Terms of use</span>
-                    </Link>
+                    </a>
                 </div>
 
                 <div className="service-category-widget">

src/components/lnd/LndParts/Design/Main.js

@@ -29,20 +29,14 @@ const Main = ({gredient}) => {
                     <div className="col-lg-6">
                         <div className="w-100">
                             <div className="p-0 appie-traffic-title section_title" data-aos="fade-up" data-aos-duration="1500" data-aos-delay="100">
-                                <h3 className='title'>Set Chores, Set Goals <div className='section_sub_title'>Reward Accomplishments</div></h3>
+                                <h3 className='title'>Set Chores, Set Goals <div className='section_sub_title'>Rewards Accomplishments</div></h3>
                                 <p className=''>
-                                Set goals, tasks, or anything that motivates or needs to be done and reward completion. WrenchBoard is the platform to plan rewards.
+                                Set goals, tasks, or anything that motivates or needs to be done and reward completion. WrenchBoard is the platform plan rewards.
                                 </p>
                             </div>
-                            <div className="appie-traffic-title section_title mb-3" data-aos="fade-up" data-aos-duration="1500" data-aos-delay="100" style={{padding: '0'}}>
-                                <h3 className='title text-center text-lg-left'>Assign Faster with</h3>
-                                <h3 className='w-100 title text-center d-flex justify-content-center justify-content-lg-end flex-nowrap'>
-                                    <div className='color-blue italic'>wrench</div><div className='color-purple'>Agent</div>
-                                </h3>
-                            </div>
                             <div className="row">
                             {list?.map(({ icon, header, paragraph, name }, idx) => (
-                                <div className="col-12 col-md-6 mb-10" key={idx} onClick={()=>changeActiveImg(name)} style={{cursor: 'pointer'}}>
+                                <div className="col-12 mb-20" key={idx} onClick={()=>changeActiveImg(name)} style={{cursor: 'pointer'}}>
                                     <div
                                         className={`appie-traffic-service features appie-modern-design`}
                                     >
@@ -50,14 +44,14 @@ const Main = ({gredient}) => {
                                         <i className={icon} />
                                         </div>
                                         <h5 className="title">{header}</h5>
-                                        {/* <p>{paragraph}</p> */}
+                                        <p>{paragraph}</p>
                                     </div>
                                 </div>
                             ))}
                             </div>
                         </div>
                     </div>
-                    <div className="col-lg-6 mt-4 mt-lg-0">
+                    <div className="col-lg-6">
                         <Right />
                     </div>
                 </div>

src/components/lnd/LndParts/Design/Right.js

@@ -3,20 +3,19 @@ import BGImage from "../../../../assets/images/sec-background.jpg";
 
 export default function Right() {
   return (
-    <div className="p-1 w-100">
-        {/* <div className="appie-traffic-title section_title mb-0" data-aos="fade-up" data-aos-duration="1500" data-aos-delay="100" style={{padding: '0'}}>
+    <div className="w-100">
+        <div className="appie-traffic-title section_title mb-0" data-aos="fade-up" data-aos-duration="1500" data-aos-delay="100" style={{padding: '0'}}>
             <h3 className='title text-center'>Assign Faster with</h3>
             <h3 className='title text-center d-flex justify-content-center flex-nowrap'>
-                <div className='color-blue italic'>wrench</div><div className='color-purple'>Agent</div>
+                <div className='color-blue italic'>Wrench</div><div className='color-purple'>Agent</div>
             </h3>
-        </div> */}
-        {/* <div className='px-2 w-100 mb-2'>  */}
-        <div className='color-purple text-center mb-2'>
-            {/* <h3 className='color-purple font-25 mb-10'>Ask our <span>&#x275B;&#x275B;<span className='color-blue italic'>wrench</span>Agent&#x275C;&#x275C;</span> Generative AI to assist</h3> */}
-            <h3 className='color-purple font-25 mb-10'>Ask our &#x275B;&#x275B;<span className='color-blue italic'>Wrench</span><span className='color-purple'>Agent</span>&#x275C;&#x275C; Generative AI to assist</h3>
-            <h3 className='font_black font-20 mb-10'>&#x275B;&#x275B;Recommend  4 summer chores for a 12 years old&#x275C;&#x275C;</h3>
         </div>
-        {/* </div> */}
+        <div className='p-2 w-100 my-2'> 
+            <div className='color-purple text-center'>
+                <h3 className='color-purple font-25 mb-10'>Ask our &#x275B;&#x275B;<span className='color-blue italic'>Wrench</span><span className='color-purple'>Agent</span>&#x275C;&#x275C; Generative AI to assist</h3>
+                <h3 className='font_black font-20 mb-10'>&#x275B;&#x275B;Recommend  4 summer chores for a 12 years old&#x275C;&#x275C;</h3>
+            </div>
+        </div>
         {/* withFadeEdge-light-purple border-skyblue border-thin*/}
         <div className="p-2 pt-3 bg-white custom-w-90 mx-auto border-r-10 overflow-hidden"
             style={{ backgroundImage: `url(${BGImage})`, backgroundPosition: 'left center', backgroundRepeat: 'no-repeat' }}