initial commit

src/Services/ContactData.js

@@ -1,12 +1,11 @@
-import axios from 'axios';
+import Axios from 'axios';
+import getConfig from './../Config/config'
 
-async function ContactData(reqData) {
+async function ContactData(callData) {
-    let formData = new FormData()
+    // debugger;
-    for (let value in reqData) {
+    var site = getConfig()[0];
-        formData.append(value, reqData[value]);
+    let response = await Axios.post(`${process.env.REACT_APP_AUX_ENDPOINT}/sitecontact`, callData);
-      }
+    return response.data.result;
-    let response = await axios.post(`${process.env.REACT_APP_AUX_ENDPOINT}/sitecontact`, reqData);
-    return response;
 }
 
 export default ContactData;

src/assets/css/main.css

@@ -160,11 +160,6 @@ p {
   border: 1px solid #89216b;
   background-image: linear-gradient(90deg, #89216b 0%, #da4453 100%); */
 }
-@media only screen and (max-width: 568px) {
-  .main-btn {
-    padding: 0 15px;
-  }
-}
 .main-btn:hover {
   background-color: #fff;
   color: #2b70fa;
@@ -6735,38 +6730,29 @@ blockquote cite {
   background-repeat: no-repeat;
 }
 
-.appie-about-container {
+.appie-about-8-box {
+  padding: 50px 50px 145px;
   background: #fff;
   border-radius: 6px;
   box-shadow: 0px 40px 40px 0px rgba(14, 17, 51, 0.1);
   position: relative;
   overflow: hidden;
-  height: 100%;
-  display: flex;
-  flex-direction: column;
-  justify-content: space-between;
-}
-
-.appie-about-8-box {
-  padding: 50px 50px 0px 50px;
   z-index: 10;
 }
 @media only screen and (min-width: 992px) and (max-width: 1200px) {
   .appie-about-8-box {
-    padding: 50px 25px 0px 25px;
+    padding: 50px 25px 145px;
   }
 }
 @media only screen and (min-width: 768px) and (max-width: 991px) {
-  .appie-about-container {
+  .appie-about-8-box {
     margin-bottom: 30px;
   }
 }
 @media (max-width: 767px) {
-  .appie-about-container{
-    margin-bottom: 30px;
-  }
   .appie-about-8-box {
-    padding: 50px 20px 0px 20px;
+    margin-bottom: 30px;
+    padding: 50px 20px 145px;
   }
 }
 .appie-about-8-box .thumb {
@@ -6793,13 +6779,13 @@ blockquote cite {
     line-height: 40px;
   }
 }
-.appie-about-container a {
+.appie-about-8-box a {
   border: 2px solid #db0f30;
   color: #db0f30;
   background: #fff;
   margin-top: 30px;
 }
-.appie-about-container a:hover {
+.appie-about-8-box a:hover {
   color: #fff;
   background: #db0f30;
   border-color: #db0f30;

src/components/Contact/Forms.js

@@ -1,4 +1,4 @@
-import React, {useState} from 'react';
+import React from 'react';
 import getConfig from './../../Config/config'
 import ContactData from '../../Services/ContactData';
 
@@ -7,68 +7,33 @@ function Forms() {
 
     var site = getConfig()[0];
 
-    const [formDetails, setFormDetails] = useState({
-        first_name: '',
-        last_name: '',
-        email: '',
-        subject: '',
-        phone_number: '',
-        action: 1001,
-        message: '',
-        channel: 'WEB',
-        terms_conditions: false
-    })
-
-    const validForm = formDetails.first_name && formDetails.last_name && formDetails.email && formDetails.phone_number && formDetails.subject && formDetails.message
-
-    const handleChange = ({target:{name, value}}) => {
-        setFormDetails(prev => ({...prev, [name]:value}))
-    }
-
-    const [requestStatus, setRequestStatus] = useState({loading:false, status:false, msg:''})
-
     function handleSubmit(e) {
-        e.preventDefault()
+        e.preventDefault();
-        setRequestStatus({loading:true, status:false, msg:''})
+      //  console.log('You clicked submit.');
-        if(!validForm){
+      //  console.log(e);
-            setRequestStatus({loading:false, status:false, msg:'please, fill all fields'})
+       // debugger;
-            setTimeout(()=>{
+        const firstname = e.target['f-name'].value;
-                setRequestStatus({loading:false, status:false, msg:''})
+        const lastname = e.target['l-name'].value;
-            },3000)
+        const email = e.target['email'].value;
-            return
+        const phone = e.target['phone'].value;
-        }
+        const subject = e.target['subject'].value;
+        const message =  e.target['message'].value;
+        const terms =   e.target['terms-conditions'].checked;
+//alert(terms);
 
-        delete formDetails.terms_conditions
+        var callData = [{
+            "firstname": firstname,
+            "lastname": lastname,
+            "email": email,
+            "phone": phone,
+            "subject": subject,
+            "message": message,
+            "channel": 'WEB'
+        }];
+
+       const callRet = ContactData(callData);
+       console.log('You clicked submit========> '+ callRet);
 
-       ContactData(formDetails).then(res =>{
-        if(res?.data?.result != '100'){
-            setRequestStatus({loading:false, status:false, msg:'failed to send message'})
-            setTimeout(()=>{
-                setRequestStatus({loading:false, status:false, msg:''})
-            },3000)
-            return
-        }
-        setRequestStatus({loading:false, status:true, msg:'message Sent'})
-        setTimeout(()=>{
-            setRequestStatus({loading:false, status:false, msg:''})
-            setFormDetails({
-                first_name: '',
-                last_name: '',
-                email: '',
-                subject: '',
-                phone_number: '',
-                action: 1001,
-                message: '',
-                channel: 'WEB',
-                terms_conditions: false
-            })
-        },3000)
-       }).catch(err => {
-        setRequestStatus({loading:false, status:false, msg:'failed something went wrong'})
-        setTimeout(()=>{
-            setRequestStatus({loading:false, status:false, msg:''})
-        },3000)
-       });
       }
 
 
@@ -134,10 +99,10 @@ function Forms() {
                                 <h4>Let’s Connect</h4>
                                 <form onSubmit={handleSubmit} className="row">
                                     <div className="col-md-6">
-                                        <input type="text" name="first_name" placeholder="First Name"  maxLength={15} onChange={handleChange} value={formDetails.first_name} />
+                                        <input type="text" name="f-name" placeholder="First Name"  maxLength={15} />
                                     </div>
                                     <div className="col-md-6">
-                                        <input type="text" name="last_name" placeholder="Last Name"  maxLength={15} onChange={handleChange} value={formDetails.last_name} />
+                                        <input type="text" name="l-name" placeholder="Last Name"  maxLength={15} />
                                     </div>
                                     <div className="col-md-6">
                                         <input
@@ -145,52 +110,36 @@ function Forms() {
                                             name="email"
                                             placeholder="Email Address" 
                                             maxLength={35} 
-                                            onChange={handleChange}
-                                            value={formDetails.email}
                                         />
                                     </div>
                                     <div className="col-md-6">
                                         <input
                                             type="number"
-                                            name="phone_number"
+                                            name="phone"
                                             placeholder="Phone Number" 
                                             maxLength={15} 
-                                            onChange={handleChange}
-                                            value={formDetails.phone_number}
                                         />
                                     </div>
                                     <div className="col-md-12">
-                                        <input type="text" name="subject" placeholder="Subject"  maxLength={35} value={formDetails.subject} onChange={handleChange}  />
+                                        <input type="text" name="subject" placeholder="Subject"  maxLength={35}  />
                                     </div>
                                     <div className="col-md-12">
                                         <textarea
                                             name="message"
                                             placeholder="How can we help?"
-                                            onChange={handleChange}
-                                            value={formDetails.message}
                                         ></textarea>
                                     </div>
                                     <div className="col-md-6">
                                         <div className="condition-check">
-                                            <input id="terms-conditions" name="terms_conditions" type="checkbox" value={formDetails.terms_conditions} onChange={handleChange} />
+                                            <input id="terms-conditions" name="terms-conditions" type="checkbox" />
                                             <label htmlFor="terms-conditions">
                                                 I agree to the <a href="#">Terms & Conditions</a>
                                             </label>
                                         </div>
                                     </div>
                                     <div className="col-md-6 text-right">
-                                        <input 
+                                        <input type="submit" name="submit" value="Send Message" />
-                                            type="submit"  
-                                            value={ requestStatus.loading ? 'Sending...' : 'Send Message'} 
-                                            disabled={requestStatus.loading} 
-                                            className={`${!validForm ? 'opacity-25' : 'opacity-100'}`}
-                                        />
                                     </div>
-                                    {/* <div className="p-2 col-12">
-                                        {requestStatus.msg &&
-                                        }
-                                    </div> */}
-                                    <p className={`p-1 w-100 text-center ${requestStatus.status ? 'text-success' : 'text-danger'}`}>{requestStatus.msg}</p>
                                 </form>
                             </div>
                         </div>

src/components/HomeOne/AfterHero.js

@@ -1,90 +0,0 @@
-import React from 'react';
-import thumb4 from '../../assets/images/about-thumb-4.png';
-import thumb5 from '../../assets/images/about-thumb-5.png';
-import cardImg from '../../assets/images/home/card-home-01.png'
-
-function AfterHero() {
-    return (
-        <>
-            <section className="appie-about-8-area pt-100 pb-100">
-                <div className="container">
-                    <div className="row">
-                        <div className="col-lg-12">
-                            <div className="appie-section-title mb-30">
-                                <h3 className="appie-title">
-                                    {/* We bring everything <br />
-                                    that's required to build apps */}
-                                    Set Chores, Set Goals
-                                </h3>
-                            </div>
-                        </div>
-                    </div>
-                    <div className="row">
-                        <div className="col-lg-7 mb-3 mb-lg-0">
-                            <div className='appie-about-container'>
-                                <div className="appie-about-8-box">
-                                    <h3 className="title">
-                                        Reward Accomplishments
-                                    </h3>
-                                    <p>
-                                        Set goals, tasks, or anything that motivates or needs to be done and reward completion. WrenchBoard is the platform to plan rewards off pick your nose and blow
-                                    </p>
-                                </div>
-                                <div className='row'>
-                                    <div className='col-12 col-sm-4 order-2 order-sm-1 align-self-end'>
-                                        <a className="m-1 main-btn" href={process.env.REACT_APP_DASH_URL_LOGIN}>
-                                            Learn More <i className="fal fa-arrow-right" />
-                                        </a>
-                                    </div>
-                                    <div className="col-12 col-sm-8 order-1 order-sm-2">
-                                        <img className='w-100 h-100' src={cardImg} alt="Child Card" />
-                                    </div>
-                                </div>
-                            </div>
-                        </div>
-                        <div className="col-lg-5">
-                            {/* <div className="appie-about-8-box">
-                                <h3 className="title">
-                                    Assign Faster with <br />
-                                    wrenchAgent
-                                </h3>
-                                <p>
-                                    Ask our &#x275B;&#x275B;<span className=''>wrench</span><span className=''>Agent</span>&#x275C;&#x275C; Generative AI to assist
-                                </p>
-                                <a className="main-btn" href={process.env.REACT_APP_DASH_URL_LOGIN}>
-                                    Learn More <i className="fal fa-arrow-right" />
-                                </a>
-                                <div className="thumb mr-30">
-                                    <img src={thumb5} alt="" />
-                                </div>
-                            </div> */}
-                            <div className='appie-about-container'>
-                                <div className="appie-about-8-box">
-                                    <h3 className="title">
-                                        Assign Faster with <br />
-                                        wrenchAgent
-                                    </h3>
-                                    <p>
-                                        Ask our &#x275B;&#x275B;<span className=''>wrench</span><span className=''>Agent</span>&#x275C;&#x275C; Generative AI to assist
-                                    </p>
-                                </div>
-                                <div className='row'>
-                                    <div className='col-12 col-sm-4 order-2 order-sm-1 align-self-end'>
-                                        <a className="m-1 main-btn" href={process.env.REACT_APP_DASH_URL_LOGIN}>
-                                            Learn More <i className="fal fa-arrow-right" />
-                                        </a>
-                                    </div>
-                                    <div className="col-12 col-sm-8 order-1 order-sm-2">
-                                        <img className='w-100 h-100' src={thumb5} alt="" />
-                                    </div>
-                                </div>
-                            </div>
-                        </div>
-                    </div>
-                </div>
-            </section>
-        </>
-    );
-}
-
-export default AfterHero;

src/components/HomeOne/FooterHomeOne.js

@@ -55,7 +55,7 @@ function FooterHomeOne({ className }) {
                                     <li>
                                         <Link to="/use-cases">Use Cases</Link>
                                     </li>
-                                    <li className='d-none'>
+                                    <li>
                                         <a target='_blank' href={process.env.REACT_APP_AGENT_LINK}>Agent</a>
                                     </li>
                                     <li>

src/components/HomeOne/HeroHomeOne.js

@@ -34,7 +34,7 @@ function HeroHomeOne() {
                 <h1 className="appie-title">
                   Turn Chores into Exciting Challenges and Earn <span className='earn-rewards px-2'>Rewards!</span>
                 </h1>
-                <p>Your place to set family goals and reward achievements. Find tasks to earn from, or build a task portfolio and find others to perform tasks for you.</p>
+                <p>Your place to set family goals and reward achievements. Find tasks to earn from, or build a tasks portfolio and find others to perform tasks for you.</p>
                 <ul className='d-flex justify-content-center justify-content-lg-start'>
                   <li className=''>
                       <a className="item-2" target='_blank'  href={process.env.REACT_APP_APPLE_APP}>

src/components/HomeOne/NextAfterHero.js

@@ -1,124 +0,0 @@
-import React from 'react';
-import serviceThumb from '../../assets/images/service-thumb-1.png';
-
-function NextAfterHero() {
-    return (
-        <>
-            <section
-                className="appie-services-2-area appie-services-8-area pt-90 pb-55"
-                id="service"
-            >
-                <div className="container">
-                    <div className="row align-items-end">
-                        <div className="col-lg-6 col-md-8">
-                            <div className="appie-section-title">
-                                <h3 className="appie-title">Solution for every need.</h3>
-                                <p>The app provides design and digital marketing.</p>
-                            </div>
-                        </div>
-                    </div>
-                    <div className="row align-items-center">
-                        <div className="col-lg-7">
-                            <div className="row">
-                                <div className="col-lg-6 col-md-6">
-                                    <div
-                                        className="
-                    appie-single-service-2 appie-single-service-about
-                    mt-30
-                    wow
-                    animated
-                    fadeInUp
-                  "
-                                        data-wow-duration="2000ms"
-                                        data-wow-delay="200ms"
-                                    >
-                                        <div className="icon">
-                                            <i className="fal fa-tv" />
-                                        </div>
-                                        <h4 className="title">Carefully designed</h4>
-                                        <p>
-                                            He lost his bottle loo don't get shirty with me ruddy.
-                                        </p>
-                                    </div>
-                                </div>
-                                <div className="col-lg-6 col-md-6">
-                                    <div
-                                        className="
-                    appie-single-service-2 appie-single-service-about
-                    item-2
-                    mt-30
-                    wow
-                    animated
-                    fadeInUp
-                  "
-                                        data-wow-duration="2000ms"
-                                        data-wow-delay="400ms"
-                                    >
-                                        <div className="icon">
-                                            <i className="fal fa-code" />
-                                        </div>
-                                        <h4 className="title">Clean Modern Code</h4>
-                                        <p>
-                                            He lost his bottle loo don't get shirty with me ruddy.
-                                        </p>
-                                    </div>
-                                </div>
-                                <div className="col-lg-6 col-md-6">
-                                    <div
-                                        className="
-                    appie-single-service-2 appie-single-service-about
-                    item-3
-                    mt-30
-                    wow
-                    animated
-                    fadeInUp
-                  "
-                                        data-wow-duration="2000ms"
-                                        data-wow-delay="600ms"
-                                    >
-                                        <div className="icon">
-                                            <i className="fal fa-user-friends" />
-                                        </div>
-                                        <h4 className="title">User Interactive</h4>
-                                        <p>
-                                            He lost his bottle loo don't get shirty with me ruddy.
-                                        </p>
-                                    </div>
-                                </div>
-                                <div className="col-lg-6 col-md-6">
-                                    <div
-                                        className="
-                    appie-single-service-2 appie-single-service-about
-                    item-4
-                    mt-30
-                    wow
-                    animated
-                    fadeInUp
-                  "
-                                        data-wow-duration="2000ms"
-                                        data-wow-delay="200ms"
-                                    >
-                                        <div className="icon">
-                                            <i className="fal fa-mobile" />
-                                        </div>
-                                        <h4 className="title">Choose a App</h4>
-                                        <p>
-                                            He lost his bottle loo don't get shirty with me ruddy.
-                                        </p>
-                                    </div>
-                                </div>
-                            </div>
-                        </div>
-                        <div className="col-lg-5">
-                            <div className="service-thumb">
-                                <img src={serviceThumb} alt="" />
-                            </div>
-                        </div>
-                    </div>
-                </div>
-            </section>
-        </>
-    );
-}
-
-export default NextAfterHero;

src/components/HomeOne/TrafficHomeOne.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import thumb from '../../assets/images/home-app-page.png';
+import thumb from '../../assets/images/traffic-thumb.png';
 
 function TrafficHomeTwo() {
     return (
@@ -8,9 +8,10 @@ function TrafficHomeTwo() {
                 <div className="row">
                     <div className="col-lg-7">
                         <div className="appie-traffic-title">
-                            <h3 className="title">Family Connect</h3>
+                            <span>Post</span>
+                            <h3 className="title">Posting Jobs.</h3>
                             <p>
-                            All you need for a family to get moving with rewards and more. Plan activities and booster family interactions. 
+                                WrenchBoard platform connects you with quality service to deliver your project with ease.
                             </p>
                         </div>
                         <div className="row">
@@ -19,8 +20,8 @@ function TrafficHomeTwo() {
                                     <div className="icon">
                                         <i className="fal fa-check" />
                                     </div>
-                                    <h5 className="title">Organize Chores</h5>
+                                    <h5 className="title">Create your projects</h5>
-                                    <p>Simple one-time tasks to repeated tasks or promise of performance or set goals.</p>
+                                    <p>from complex to most basic task as targetted offering or market place posting</p>
                                 </div>
                             </div>
                             <div className="col-lg-6 col-md-6">
@@ -28,9 +29,8 @@ function TrafficHomeTwo() {
                                     <div className="icon">
                                         <i className="fal fa-check" />
                                     </div>
-                                    <h5 className="title">Sibling Activities</h5>
+                                    <h5 className="title">Hire experts</h5>
-                                    <p>Wrenchboard allows family members to create product connections with educational content with reward tools.
+                                    <p>from reviewed profiles, accept interest in your project from qualified members.</p>
-                                    </p>
                                 </div>
                             </div>
                             <div className="col-lg-6 col-md-6">
@@ -38,8 +38,8 @@ function TrafficHomeTwo() {
                                     <div className="icon">
                                         <i className="fal fa-check" />
                                     </div>
-                                    <h5 className="title">Personalized Wallet</h5>
+                                    <h5 className="title">Monitor Progress</h5>
-                                    <p>Individual wallet with parental control and guidance. Money education to increase values.</p>
+                                    <p>Monitor work progress and track performance with real time tools from your account</p>
                                 </div>
                             </div>
                             <div className="col-lg-6 col-md-6">
@@ -47,8 +47,8 @@ function TrafficHomeTwo() {
                                     <div className="icon">
                                         <i className="fal fa-check" />
                                     </div>
-                                    <h5 className="title">Games & More </h5>
+                                    <h5 className="title">Get Pay </h5>
-                                    <p>More opportunities to learn with games or the artificial intelligence library and shared material.</p>
+                                    <p>Pay: Make payment easily and securely by milestones or project completion.</p>
                                 </div>
                             </div>
                             <div className="col-lg-12">

src/components/HomeOne/index.js

@@ -3,29 +3,23 @@ import useToggle from '../../Hooks/useToggle';
 import BackToTop from '../BackToTop';
 import Drawer from '../Mobile/Drawer';
 import BlogHomeOne from './BlogHomeOne';
+import FaqHomeOne from './FaqHomeOne';
 import FeaturesHomeOne from './FeaturesHomeOne';
 import FooterHomeOne from './FooterHomeOne';
 import HeroHomeOne from './HeroHomeOne';
 import HomeOneHeader from './HomeOneHeader';
-import ServicesHomeOne from './ServicesHomeOne';
-import TrafficHomeOne from './TrafficHomeOne';
-import TrafficHomeTwo from './TrafficHomeTwo';
-import FeaturedScreen from './FeaturedScreen';
-import AfterHero from './AfterHero';
-import NextAfterHero from './NextAfterHero';
-
-//import FaqHomeOne from './FaqHomeOne';
 //import PricingHomeOne from './PricingHomeOne';
-//import ProjectHomeOne from './ProjectHomeOne';
+import ProjectHomeOne from './ProjectHomeOne';
-//import TeamHomeOne from './TeamHomeOne';
+import ServicesHomeOne from './ServicesHomeOne';
-//import TestimonialHomeOne from './TestimonialHomeOne';
+import TeamHomeOne from './TeamHomeOne';
-//mport WrenchBoardHome from './WrenchBoardHome';
+import TestimonialHomeOne from './TestimonialHomeOne';
-//import RecentJobsOne from './RecentJobsOne';
+//import TrafficHomeOne from './TrafficHomeOne';
-//import StickyHeaderNav from '../StickyHeader/StickyHeaderNav';
+import TrafficHomeTwo from './TrafficHomeTwo';
+import WrenchBoardHome from './WrenchBoardHome';
+import RecentJobsOne from './RecentJobsOne';
+import StickyHeaderNav from '../StickyHeader/StickyHeaderNav';
+import FeaturedScreen from './FeaturedScreen';
 //import BlogData from './../../Services/BlogData';
-// import ServicesHomeEight from '../HomeEight/ServicesHomeEight';
-
-
 
 function HomeOne() {
     const [drawer, drawerAction] = useToggle(false);
@@ -36,23 +30,20 @@ function HomeOne() {
             {/* <StickyHeaderNav action={drawerAction.toggle} /> */}
             <HomeOneHeader action={drawerAction.toggle} />
             <HeroHomeOne />
-            <AfterHero />
-            {/*<NextAfterHero />*/}
-            <FeaturesHomeOne />
             <ServicesHomeOne />
-            <TrafficHomeOne />
+            {/*<RecentJobsOne />*/}
+            <FeaturesHomeOne />
+            {/*<FaqHomeOne />*/}
+            {/*<TrafficHomeOne />*/}
             <TrafficHomeTwo />
             <FeaturedScreen />
-            <BlogHomeOne />
-            <FooterHomeOne />
-            <BackToTop />
-            
-            { /*   <RecentJobsOne /> JOBS ON SITE GONE*/}
-            {/*<FaqHomeOne />*/}
             {/*<TestimonialHomeOne />*/}
             {/*<TeamHomeOne />*/}
             {/*<PricingHomeOne />*/}
+            <BlogHomeOne />
             {/*<ProjectHomeOne />*/}
+            <FooterHomeOne />
+            <BackToTop />
         </>
     );
 }

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="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="row mt-3 align-items-center">
+                            <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="col-lg-6">
-                        <div className="w-100">
-                            <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">
+                            <div className="row my-4">
                             {list?.map(({ icon, header, paragraph, name }, idx) => (
-                                <div className="col-12 mb-10" key={idx} onClick={()=>changeActiveImg(name)} style={{cursor: 'pointer'}}>
+                                <div className="col-12 col-md-6 mb-10 d-flex justify-content-center" 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-lg-6 mt-4 mt-lg-0">
+                    <div className="col-12 mt-4">
                         <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-2 pt-3 bg-white custom-w-90 mx-auto border-r-10 overflow-hidden"
+        <div className="p-5 bg-white w-100 mx-auto border-r-10 overflow-hidden"
-            style={{ backgroundImage: `url(${BGImage})`, backgroundPosition: 'left center', backgroundRepeat: 'no-repeat' }}
+            style={{ backgroundImage: `url(${BGImage})`, backgroundPosition: 'left center', backgroundSize: 'cover', backgroundRepeat: 'no-repeat' }}
         >
             <div className='generative-ai'>
                 {list?.map((item, idx) => (