quote added

src/assets/css/default.css

@@ -882,6 +882,9 @@ a {
 .pl-125 {
 	padding-left: 125px;
 }
+.pl-150 {
+	padding-left: 150px;
+}
 /*-- Padding right --*/
 
 .pr-0 {

src/assets/css/main.css

@@ -183,6 +183,16 @@ p {
   letter-spacing: 2px;
   text-shadow: 0px 4px 10px rgba(0,0,0,0.3);
 }
+.generative-ai{
+  padding-left: 150px;
+}
+
+@media only screen and (max-width: 568px) {
+  .generative-ai{
+    padding-left: 50px;
+  }
+}
+
 @media only screen and (min-width: 992px) and (max-width: 1200px) {
   .appie-section-title .appie-title {
     font-size: 36px;
@@ -3100,6 +3110,11 @@ p {
   /* box-shadow: inset 0 0 15px 25px white; */
   box-shadow: 0 0 10px 20px #fff inset;
 }
+.withFadeEdge-light-purple{
+  border-radius: 10px 10px 10px 10px;
+  /* box-shadow: inset 0 0 15px 25px white; */
+  box-shadow: 0 0 5px 10px #fbf4fe inset;
+}
 /*===========================
     6.APPIE TRAFFICE css 
 ===========================*/

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

@@ -28,7 +28,7 @@ const Main = ({gredient}) => {
                 <div className="row">
                     <div className="col-lg-6">
                         <div className="w-100">
-                            <div className="appie-traffic-title section_title" data-aos="fade-up" data-aos-duration="1500" data-aos-delay="100" style={{padding: '0'}}>
+                            <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'>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 plan rewards.
@@ -52,43 +52,6 @@ const Main = ({gredient}) => {
                         </div>
                     </div>
                     <div className="col-lg-6">
-                        {/* <div className='w-100 ui_image_con d-flex justify-content-center align-items-center'>
-                            <div className="ui_images position-relative d-flex justify-content-center align-items-center" data-aos="fade-in" data-aos-duration="1500">
-                                <div className="left_img position-relative">
-                                    <img 
-                                        className="moving_position_animatin position-relative" 
-                                        src={ localImgLoad(`images/home/${activeImg}.jpg`)} 
-                                        alt="image" 
-                                        width='332px'
-                                        height='auto'
-                                    />
-                                </div>
-                                <div className="right_img position-relative d-flex flex-column justify-content-start align-items-center">
-                                    <div className='d-flex flex-column justify-content-start align-items-center'>
-                                        <img 
-                                            className="moving_position_animatin right_img_two" 
-                                            src={
-                                                activeImg == 'reward-goals' ? localImgLoad(`images/home/box-reward.png`)
-                                                :
-                                                activeImg == 'assign-chores' ? localImgLoad(`images/home/box-chores.png`)
-                                                :
-                                                activeImg == 'financial-edu' ? localImgLoad(`images/home/box-financial.png`)
-                                                :
-                                                activeImg == 'family-connect' ? localImgLoad(`images/home/box-family.png`)
-                                                :
-                                                null
-                                            } 
-                                            alt="image" 
-                                        />
-                                    </div>
-                                    <img 
-                                        className="d-none moving_position_animatin right_img_three position-relative" 
-                                        src={localImgLoad(`images/home/wrenchboard_logo_4.png`)} 
-                                        alt="image" 
-                                    />
-                                </div>
-                            </div>
-                        </div> */}
                         <Right />
                     </div>
                 </div>

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

@@ -1,4 +1,5 @@
 import React from 'react'
+import BGImage from "../../../../assets/images/sec-background.jpg";
 
 export default function Right() {
   return (
@@ -9,28 +10,33 @@ export default function Right() {
                 <div className='color-blue italic'>Wrench</div><div className='color-purple'>Agent</div>
             </h3>
         </div>
-        <div className='p-2 w-100 bg-white my-2'> 
+        <div className='p-2 w-100 my-2'> 
             <div className='color-purple text-center'>
-                <h3 className='color-purple font-25 mb-10'>Ask our "WrenchAgent" Generative AI to assist</h3>
+                <h3 className='color-purple font-25 mb-10'>Ask our <span className='black'>&#x275B;&#x275B;WrenchAgent&#x275C;&#x275C;</span> Generative AI to assist</h3>
-                <h3 className='font_black font-20 mb-10'>"Recommend  4 summer chores for a 12 years old"</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 bg-white custom-w-90 mx-auto border-thin border-r-10 border-skyblue">
+        {/* withFadeEdge-light-purple border-skyblue border-thin*/}
-        {list?.map((item, idx) => (
+        <div className="p-2 pt-3 bg-white custom-w-90 mx-auto border-r-10 overflow-hidden"
-            <div className="col-12 mb-20" key={idx}>
+            style={{ backgroundImage: `url(${BGImage})`, backgroundPosition: 'left center', backgroundRepeat: 'no-repeat' }}
-                <div
+        >
-                    className={`appie-traffic-service-two features appie-modern-design`}
+            <div className='generative-ai'>
-                >
+                {list?.map((item, idx) => (
-                    <div className="icon">
+                    <div className="col-12 mb-20" key={idx}>
-                    <i className='fal fa-check' />
+                        <div
+                            className={`appie-traffic-service-two features appie-modern-design`}
+                        >
+                            <div className="icon">
+                            <i className='fal fa-check' />
+                            </div>
+                            <h5 className="title italic color-purple">{item}</h5>
+                        </div>
                     </div>
-                    <h5 className="title italic color-purple">{item}</h5>
+                ))}
+                <div className='w-100 d-flex justify-content-end'>
+                    <a className='main-btn' href={process.env.REACT_APP_DASH_URL_SIGNUP}>Get Started</a>
                 </div>
             </div>
-        ))}
-        <div className='w-100 d-flex justify-content-end'>
-            <button className='main-btn'>Get Started</button>
-        </div>
         </div>
     </div>
   )