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 {
@@ -970,7 +973,7 @@ a {
 	color: #222;
 }
 .color-blue {
-	color: #2b70fa;
+	color: #5086BA;
 }
 .color-purple {
 	color: purple;
@@ -981,6 +984,9 @@ a {
 .border-purple {
 	border-color: purple;
 }
+.border-skyblue {
+	border-color: #5086BA;
+}
 /* black overlay */
 
 [data-overlay] {

src/assets/css/main.css

@@ -172,11 +172,6 @@ p {
   border-color: #2b70fa;
   color: #fff;
 }
-.btn-get-started:hover {
-  color: purple;
-  opacity: .9;
-  transition: all .3s;
-}
 
 .appie-section-title {
   padding-bottom: 25px;
@@ -188,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;
@@ -3105,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 
 ===========================*/
@@ -3255,7 +3265,7 @@ p {
 /* .modern_ui_section{
   margin-top: 100px;
 } */
-.modern_ui_section .section_sub_title{
+.modern_ui_section .section_sub_title, .title .section_sub_title{
   font-size: 30px;
   color: purple;
 }

src/components/News/Blogs.js

@@ -48,7 +48,7 @@ function Blogs({ pathname }) {
             data-wow-delay="200ms"
           >
             <Link to={`/blog/blogdetail/${blog?.id}`} className="thumb">
-              <img src={blgImg} alt={blog.post_title} style={{cursor: "pointer"}} width={370} height={278} loading="lazy" />
+              <img src={blgImg} alt={blog.post_title} width={370} height={'auto'} loading="lazy" />
             </Link>
             <div className="content">
               <div className="blog-meta">

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 (
@@ -6,31 +7,36 @@ export default function Right() {
         <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'>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='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-20 mb-10'>Recommend  4 summer chores for a 12 years old</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'>&#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-purple">
-        {list?.map((item, idx) => (
-            <div className="col-12 mb-20" key={idx}>
-                <div
-                    className={`appie-traffic-service-two features appie-modern-design`}
-                >
-                    <div className="icon">
-                    <i className='fal fa-check' />
+        {/* 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' }}
+        >
+            <div className='generative-ai'>
+                {list?.map((item, idx) => (
+                    <div className="col-12 mb-20" key={idx}>
+                        <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='btn btn-get-started px-1 py-2 border-r-5 border-purple border-normal color-purple'>Get Started</button>
-        </div>
         </div>
     </div>
   )