section layout update

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

@@ -25,24 +25,24 @@ const Main = ({gredient}) => {
             </div>
             }
             <div className="container">
-                <div className="row">
-                    <div className="col-12">
+                <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>
+                    <p className=''>
+                    Set goals, tasks, or anything that motivates or needs to be done and reward completion. WrenchBoard is the platform to plan rewards.
+                    </p>
+                </div>
+                <div className="row mt-3 align-items-center">
+                    <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>
-                                <p className=''>
-                                Set goals, tasks, or anything that motivates or needs to be done and reward completion. WrenchBoard is the platform to plan rewards.
-                                </p>
-                            </div>
-                            <div className="appie-traffic-title section_title my-5" data-aos="fade-up" data-aos-duration="1500" data-aos-delay="100" style={{padding: '0'}}>
+                            <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'>Assign Faster with</h3>
                                 <h3 className='w-100 title text-center d-flex justify-content-center flex-nowrap'>
                                     <div className='color-blue italic'>wrench</div><div className='color-purple'>Agent</div>
                                 </h3>
                             </div>
-                            <div className="row my-4">
+                            <div className="row">
                             {list?.map(({ icon, header, paragraph, name }, idx) => (
-                                <div className="col-12 col-md-6 mb-10 d-flex justify-content-center" key={idx} onClick={()=>changeActiveImg(name)} style={{cursor: 'pointer'}}>
+                                <div className="col-12 mb-10" key={idx} onClick={()=>changeActiveImg(name)} style={{cursor: 'pointer'}}>
                                     <div
                                         className={`appie-traffic-service features appie-modern-design`}
                                     >
@@ -57,7 +57,7 @@ const Main = ({gredient}) => {
                             </div>
                         </div>
                     </div>
-                    <div className="col-12 mt-4">
+                    <div className="col-lg-6 mt-4 mt-lg-0">
                         <Right />
                     </div>
                 </div>

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

@@ -18,8 +18,8 @@ export default function Right() {
         </div>
         {/* </div> */}
         {/* withFadeEdge-light-purple border-skyblue border-thin*/}
-        <div className="p-5 bg-white w-100 mx-auto border-r-10 overflow-hidden"
-            style={{ backgroundImage: `url(${BGImage})`, backgroundPosition: 'left center', backgroundSize: 'cover', backgroundRepeat: 'no-repeat' }}
+        <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' }}
         >
             <div className='generative-ai'>
                 {list?.map((item, idx) => (