image removal and proper text displayed

src/assets/css/main.css

@@ -3227,9 +3227,6 @@ p {
   background: linear-gradient(135deg, #d8aaff 0%, #9b2cfa 100%);
 }
 
-.modern_ui_section{
-  margin-top: 100px;
-}
 .appie-modern-design .icon i {
   height: 26px;
   width: 26px;
@@ -3242,12 +3239,19 @@ p {
   box-shadow: 0px 6px 10px 0px rgba(16, 73, 189, 0.3);
 }
 
+/* .modern_ui_section{
+  margin-top: 100px;
+} */
+.modern_ui_section .section_sub_title{
+  font-size: 30px;
+  color: purple;
+}
 .modern_ui_section .ui_images{
   border-radius: 100%;
   background-color: #fff;
-  width: auto;
-  height: auto;
-  padding: 30px 0;
+  width: 500px;
+  height: 500px;
+  /* padding: 30px 0; */
 }
 .modern_ui_section .right_img{
   left: -60px;
@@ -3264,12 +3268,16 @@ p {
   height: auto;
 }
 .modern_ui_section .right_img .right_img_two{
-  margin-top: -20px !important;
+  /* margin-top: -20px; */
 }
 .modern_ui_section .right_img .right_img_three{
   left: -20px;
 }
 @media only screen and (min-width: 0px) and (max-width: 500px) {
+  .modern_ui_section .ui_images{
+    width: 300px;
+    height: 300px;
+  }
   .modern_ui_section .right_img{
     left: -30px;
     top: -20px;

src/components/HomeOne/ServicesHomeOne.js

@@ -26,10 +26,10 @@ function ServicesHomeOne({ className }) {
 
   return (
     <section
-      className={`appie-service-area pt-20 pb-50 ${className}`}
+      className={`appie-service-area pt-50 pb-50 ${className}`}
       id="service"
     >
-      <div className="container">
+      {/* <div className="container">
         <div className="row justify-content-center">
           <div className="col-lg-8">
             <div className="appie-section-title text-center">
@@ -51,7 +51,7 @@ function ServicesHomeOne({ className }) {
             </div>
           ))}
         </div>
-      </div>
+      </div> */}
       
       <Main />
     </section>

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

@@ -1,4 +1,6 @@
-import React from 'react'
+import React, { useState } from 'react'
+import localImgLoad from '../../../../lib/localImgLoad'
+
 import img1 from '../../../../assets/images/modern01.png'
 import img2 from '../../../../assets/images/secure_data.png'
 import img3 from '../../../../assets/images/modern02.png'
@@ -6,6 +8,13 @@ import img4 from '../../../../assets/images/modern03.png'
 
 
 const Main = ({gredient}) => {
+
+    const [activeImg, setActiveImg] = useState('')
+
+    const changeActiveImg = (name) => {
+        setActiveImg(name)
+    }
+
   return (
     <>
         <section className={`row_am modern_ui_section ${gredient && "gredient-bg"}`} >
@@ -19,10 +28,9 @@ const Main = ({gredient}) => {
                     <div className="col-lg-6">
                         <div className="ui_text w-100">
                             <div className="appie-traffic-title section_title" data-aos="fade-up" data-aos-duration="1500" data-aos-delay="100" style={{padding: '0'}}>
-                                <h3 className='title'>Beautiful design with <div style={{color:'purple'}}>modern UI</div></h3>
+                                <h3 className='title'>Set Chores, Set Goals <div className='section_sub_title'>Rewards Accomplishments</div></h3>
                                 <p className=''>
-                                Lorem Ipsum is simply dummy text of the printing and typesetting industry lorem Ipsum has been the
-                                industrys standard dummy text ever since the when an unknown printer took a galley of type and.
+                                Set goals, tasks, or anything that motivates or needs to be done and reward completion. WrenchBoard is the platform plan rewards.
                                 </p>
                             </div>
                             {/* <ul className="design_block">
@@ -41,10 +49,10 @@ const Main = ({gredient}) => {
                                 </li>
                             </ul> */}
                             <div className="row">
-                            {list?.map(({ icon, header, paragraph }, idx) => (
-                                <div className="col-12" key={idx}>
+                            {list?.map(({ icon, header, paragraph, name }, idx) => (
+                                <div className="col-12 mb-20" key={idx} onClick={()=>changeActiveImg(name)} style={{cursor: 'pointer'}}>
                                     <div
-                                        className={`appie-traffic-service features appie-modern-design mb-30`}
+                                        className={`appie-traffic-service features appie-modern-design`}
                                         style={{ paddingRight: "45px" }}
                                     >
                                         <div className="icon">
@@ -62,11 +70,17 @@ const Main = ({gredient}) => {
                         <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">
-                                    <img className="moving_position_animatin" src={img1} alt="image" />
+                                    <img 
+                                        className="moving_position_animatin" 
+                                        src={ activeImg == 'reward' ? img1 : activeImg == 'chores' ? img1 : activeImg == 'financial' ? img1 : activeImg == 'family' ? img1 : img1} 
+                                        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_one" src={img2} alt="image" />
+                                        {/* <img className="moving_position_animatin right_img_one" src={img2} alt="image" /> */}
                                         <img className="moving_position_animatin right_img_two" src={img3} alt="image" />
                                     </div>
                                     <img className="moving_position_animatin right_img_three position-relative" src={img4} alt="image" />
@@ -86,19 +100,43 @@ export default Main
 
 
 const list = [
+    //   {
+    //     icon: "fal fa-check",
+    //     header: "Carefully designed",
+    //     paragraph: "Get family access from parents, or create your free account.",
+    //   },
+    //   {
+    //     icon: "fal fa-check",
+    //     header: "Seamless Sync",
+    //     paragraph: "Simply dummy text of the printing and typesetting inustry lorem Ipsum has Lorem dollar summit.",
+    //   },
+    //   {
+    //     icon: "fal fa-check",
+    //     header: "Access Drive",
+    //     paragraph: "Printing and typesetting industry lorem Ipsum has been the industrys standard dummy text of typesetting.",
+    //   },
       {
-        icon: "fal fa-check",
-        header: "Carefully designed",
-        paragraph: "Get family access from parents, or create your free account.",
+        icon: 'fal fa-check',
+        header: 'Reward Goals Met',
+        paragraph: 'Set goals together and reward accomplishment',
+        name: 'reward',
       },
       {
-        icon: "fal fa-check",
-        header: "Seamless Sync",
-        paragraph: "Simply dummy text of the printing and typesetting inustry lorem Ipsum has Lorem dollar summit.",
+        icon: 'fal fa-check',
+        header: 'Assign Regular Chores',
+        paragraph: 'Organize essential regular chores to be done',
+        name: 'chores',
       },
       {
-        icon: "fal fa-check",
-        header: "Access Drive",
-        paragraph: "Printing and typesetting industry lorem Ipsum has been the industrys standard dummy text of typesetting.",
+        icon: 'fal fa-check',
+        header: 'Financial Education',
+        paragraph: 'Get Kids start early on money management',
+        name: 'financial',
+      },
+      {
+        icon: 'fal fa-check',
+        header: 'Family Connect',
+        paragraph: 'Connect family, share accomplishments with friends',
+        name: 'family',
       },
     ]