updated quote style

src/assets/css/default.css

@@ -1,12 +1,79 @@
-/* Deafult Margin & Padding */
-/*-- Margin Top --*/
+.height-50 {
+	height: 50px;
+}
+.height-100 {
+	height: 100px;
+}
+.height-150 {
+	height: 150px;
+}
+.height-200 {
+	height: 200px;
+}
+
+.italic {
+	font-style: italic;
+}
+
 a {
-    text-decoration: none;
+	text-decoration: none;
     background-color: transparent;
 }
 .expire{
 	color:red;
 }
+
+.border-normal {
+	border: 2px solid black
+}
+.border-thin{
+	border: 4px solid black
+}
+.border-r-5 {
+	border-radius: 5px;
+}
+.border-r-10 {
+	border-radius: 10px;
+}
+
+/* Default Width sizes */
+/*-- Width Sizes --*/
+.custom-w-80 {
+	width: 80%;
+}
+.custom-w-90 {
+	width: 90%;
+}
+
+/* Default Font sizes */
+/*-- Font Sizes --*/
+.font-10 {
+	font-size: 10px;
+}
+.font-16 {
+	font-size: 16px;
+}
+.font-20 {
+	font-size: 20px;
+}
+.font-25 {
+	font-size: 25px;
+}
+.font-30 {
+	font-size: 30px;
+}
+.font-35 {
+	font-size: 35px;
+}
+.font-40 {
+	font-size: 40px;
+}
+.font-45 {
+	font-size: 45px;
+}
+
+/* Deafult Margin & Padding */
+/*-- Margin Top --*/
 .mt-5 {
 	margin-top: 5px;
 }
@@ -815,6 +882,9 @@ a {
 .pl-125 {
 	padding-left: 125px;
 }
+.pl-150 {
+	padding-left: 150px;
+}
 /*-- Padding right --*/
 
 .pr-0 {
@@ -902,6 +972,21 @@ a {
 .black {
 	color: #222;
 }
+.color-blue {
+	color: #5086BA;
+}
+.color-purple {
+	color: purple;
+}
+.bg-purple {
+	color: purple;
+}
+.border-purple {
+	border-color: purple;
+}
+.border-skyblue {
+	border-color: #5086BA;
+}
 /* black overlay */
 
 [data-overlay] {

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;
@@ -2549,8 +2559,8 @@ p {
   border-radius: 50%;
 }
 .appie-single-service-2 .icon img {
-  height: 100px;
-  width: 100px;
+  height: 200px;
+  /* width: 100px; */
 }
 .appie-single-service-2 .title {
   font-size: 24px;
@@ -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 
 ===========================*/
@@ -3170,13 +3185,19 @@ p {
   }
 }
 
-.appie-traffic-service {
+.appie-traffic-service, .appie-traffic-service-two {
   position: relative;
+}
+.appie-traffic-service {
   padding-left: 40px;
   padding-right: 70px;
 }
+.appie-traffic-service-two {
+  padding-left: 40px;
+}
+
 @media only screen and (min-width: 992px) and (max-width: 1200px) {
-  .appie-traffic-service {
+  .appie-traffic-service, .appie-traffic-service-two {
     padding-right: 0;
   }
 }
@@ -3192,12 +3213,12 @@ p {
     padding-right: 0px;
   }
 }
-.appie-traffic-service .icon {
+.appie-traffic-service .icon, .appie-traffic-service-two .icon {
   position: absolute;
   left: 0;
-  top: 5px;
+  top: 0;
 }
-.appie-traffic-service .icon i {
+.appie-traffic-service .icon i, .appie-traffic-service-two .icon i {
   height: 26px;
   width: 26px;
   text-align: center;
@@ -3208,13 +3229,13 @@ p {
   font-size: 14px;
   box-shadow: 0px 6px 10px 0px rgba(16, 73, 189, 0.3);
 }
-.appie-traffic-service .title {
+.appie-traffic-service .title, .appie-traffic-service-two title {
   font-size: 24px;
   font-weight: 700;
   padding-bottom: 7px;
   text-shadow: 3px 4px 10px rgba(0,0,0,0.3);
 }
-.appie-traffic-service p {
+.appie-traffic-service p, .appie-traffic-service-two p {
   font-size: 17px;
   margin-top: 10px;
   /*margin-bottom: 2px;*/
@@ -3244,13 +3265,13 @@ 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;
 }
 .modern_ui_section .ui_images{
   border-radius: 100%;
-  background-color: #fff;
+  background-color: #f9f4fe;
   width: auto;
   height: auto;
   padding: 30px 10px;
@@ -8612,7 +8633,7 @@ LND PAGE STYLE STARTS HERE
 /* interface images */
 .interface_section .owl-item .screen_frame_img img {
   transform: scale(.9);
-  border: 2px solid #000;
+  /* border: 2px solid #000; */
   border-radius: 20px;
   transition: 1s all;
   margin: 0 auto;
@@ -8622,6 +8643,6 @@ LND PAGE STYLE STARTS HERE
 
 .interface_section .owl-item.center .screen_frame_img img {
   transform: scale(1);
-  border: 3px solid #000;
-  padding: 5px;
+  /* border: 3px solid #000; */
+  /* padding: 5px; */
 }

src/components/Blog/index.js

@@ -26,7 +26,7 @@ function Blog() {
       <section className="blogpage-section">
         <div className="container">
           <div className="row">
-            <div className="col-lg-12 col-md-7">
+            <div className="col-12">
               <Blogs />
             </div>
           </div>

src/components/HomeOne/FeaturedScreen.js

@@ -18,12 +18,18 @@ export default function FeaturedScreen() {
         dots: true, 
         responsive:{
             0:{
-                items:2
+                items:1
             },
             600:{
+                items:2
+            },
+            800:{
                 items:3
             },
-            1000:{
+            1200:{
+                items:4
+            },
+            1400:{
                 items:5
             }
         }
@@ -40,37 +46,44 @@ export default function FeaturedScreen() {
                     <OwlCarousel id="screen_slider" {...screen_slider} className="owl-carousel owl-theme owl-loaded owl-drag">
                         <div className="item">
                             <div className="screen_frame_img">
-                                <img src={localImgLoad('images/slider/slider_1.png')} alt="image" />
+                                {/* <img src={localImgLoad('images/slider/slider_1.png')} alt="image" /> */}
+                                <img src={localImgLoad('images/slider/app_sliders/screen_1.png')} alt="image" />
                             </div>
                         </div>
                         <div className="item">
                             <div className="screen_frame_img">
-                                <img src={localImgLoad('images/slider/slider_2.png')} alt="image" />
+                                {/* <img src={localImgLoad('images/slider/slider_2.png')} alt="image" /> */}
+                                <img src={localImgLoad('images/slider/app_sliders/screen_2.png')} alt="image" />
                             </div>
                         </div>
                         <div className="item">
                             <div className="screen_frame_img">
-                                <img src={localImgLoad('images/slider/slider_3.png')} alt="image" />
+                                {/* <img src={localImgLoad('images/slider/slider_3.png')} alt="image" /> */}
+                                <img src={localImgLoad('images/slider/app_sliders/screen_3.png')} alt="image" />
                             </div>
                         </div>
                         <div className="item">
                             <div className="screen_frame_img">
-                                <img src={localImgLoad('images/slider/slider_4.png')} alt="image" />
+                                {/* <img src={localImgLoad('images/slider/slider_4.png')} alt="image" /> */}
+                                <img src={localImgLoad('images/slider/app_sliders/screen_6.png')} alt="image" />
                             </div>
                         </div>
                         <div className="item">
                             <div className="screen_frame_img">
-                                <img src={localImgLoad('images/slider/slider_5.png')} alt="image" />
+                                {/* <img src={localImgLoad('images/slider/slider_5.png')} alt="image" /> */}
+                                <img src={localImgLoad('images/slider/app_sliders/screen_4.png')} alt="image" />
                             </div>
                         </div>
                         <div className="item">
                             <div className="screen_frame_img">
-                                <img src={localImgLoad('images/slider/slider_6.png')} alt="image" />
+                                {/* <img src={localImgLoad('images/slider/slider_7.png')} alt="image" /> */}
+                                <img src={localImgLoad('images/slider/app_sliders/screen_7.png')} alt="image" />
                             </div>
                         </div>
                         <div className="item">
                             <div className="screen_frame_img">
-                                <img src={localImgLoad('images/slider/slider_7.png')} alt="image" />
+                                {/* <img src={localImgLoad('images/slider/slider_7.png')} alt="image" /> */}
+                                <img src={localImgLoad('images/slider/app_sliders/screen_5.png')} alt="image" />
                             </div>
                         </div>
                     </OwlCarousel>

src/components/HomeOne/HeroHomeOne.js

@@ -1,23 +1,25 @@
 import React from 'react';
 import heroThumbOne from '../../assets/images/app-thumb-1.png';
-import heroThumbOne1 from '../../assets/images/app-thumb-2.png';
 
 import heroThumbTwo from '../../assets/images/app-pic.png';
 import shapeTwo from '../../assets/images/shape/shape-2.png';
-import shapeThree from '../../assets/images/shape/shape-3.png';
-import shapeFour from '../../assets/images/shape/shape-4.png';
+
 import getConfig from './../../Config/config'
 import CustomSlider from '../customSlider/CustomSlider';
-import SliderOne from '../../assets/images/home/app-slide-home-0.png'
-import SliderTwo from '../../assets/images/home/app-slide-home-1.png'
-import SliderThree from '../../assets/images/home/app-slide-home-2.png'
+
+// import SliderOne from '../../assets/images/home/app-slide-home-0.png'
+
+import SliderOne from '../../assets/images/home/top_sliders/slide_1.png'
+import SliderTwo from '../../assets/images/home/top_sliders/slide_2.png'
+import SliderThree from '../../assets/images/home/top_sliders/slide_3.png'
+import SliderFour from '../../assets/images/home/top_sliders/slide_4.png'
+// import SliderFive from '../../assets/images/home/top_sliders/slide_5.png'
 
 
 function HeroHomeOne() {
-  var site = getConfig()[0];
 
   const sliders = [
-    SliderOne, SliderTwo, SliderThree
+    SliderOne, SliderTwo, SliderThree, SliderFour
   ]
 
   return (
@@ -60,9 +62,8 @@ function HeroHomeOne() {
                   data-wow-delay="200ms"
                 >
                   {/* <img src={heroThumbOne} alt="WrenchBoard" /> */}
-                  <div style={{ width: '350px', margin: 'auto' }}>
+                  <div style={{ width: '350px', height:'auto', margin: 'auto' }}>
                     <CustomSlider
-                      // images={[heroThumbOne, heroThumbOne1, heroThumbOne]}
                       images={sliders}
                       speed='5'
                       indicatorColor='#333'

src/components/HomeOne/ServicesHomeOne.js

@@ -28,31 +28,7 @@ function ServicesHomeOne({ className }) {
     <section
       className={`appie-service-area pt-50 pb-50 ${className}`}
       id="service"
-    >
-      {/* <div className="container">
-        <div className="row justify-content-center">
-          <div className="col-lg-8">
-            <div className="appie-section-title text-center">
-              <h3 className="appie-title">
-              Set Chores, Set Goals and <br /> Rewards Accomplishments
-              </h3>
-            </div>
-          </div>
-        </div>
-        <div className="row">
-          {serviceItems.map(({ icon, title, description }, index) => (
-            <div key={index} className="col-lg-3 col-md-6">
-              <ServiceItem
-                icon={icon}
-                title={title}
-                description={description}
-                index={index}
-              />
-            </div>
-          ))}
-        </div>
-      </div> */}
-      
+    >    
       <Main />
     </section>
   );

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/Service/MissionStatement.js

@@ -29,7 +29,7 @@ function MissionStatement() {
         },
         {
             id: 4,
-            title: "Get you work done",
+            title: "Get your work done",
             content: "For other tasks you need to get done, we will be there for smooth engagement",
         }
     ];

src/components/Service/index.js

@@ -27,7 +27,7 @@ function Service() {
             <HeroNews
                 title="Services"
                 breadcrumb={[
-                    { link: '/', title: 'home' },
+                    { link: '/', title: 'Home' },
                     { link: '/service', title: 'Service' },
                 ]}
             />

src/components/UseCases/index.js

@@ -20,7 +20,7 @@ function UseCases() {
             <HeroNews
                 title="Use Cases"
                 breadcrumb={[
-                    { link: '/', title: 'home' },
+                    { link: '/', title: 'Home' },
                     { link: '/use-cases', title: 'Use Cases' },
                 ]}
             />

src/components/customSlider/CustomSlider.js

@@ -50,7 +50,6 @@ function CustomSlider({ images, speed, indicatorColor, indicatorClass }) {
               }`,
               opacity: `${sliderCount == index ? "1" : "0"}`,
             }}
-            // style={{minWidth:'100%', height:'auto', position:'relative', transition:'.9s', right:`${sliderCount*100}%`, opacity:`${sliderCount == index ? '1':'0'}`}}
           />
         ))}
       </div>

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

@@ -5,6 +5,7 @@ import img1 from '../../../../assets/images/modern01.png'
 import img2 from '../../../../assets/images/secure_data.png'
 import img3 from '../../../../assets/images/modern02.png'
 import img4 from '../../../../assets/images/modern03.png'
+import Right from './Right'
 
 
 const Main = ({gredient}) => {
@@ -17,17 +18,17 @@ const Main = ({gredient}) => {
 
   return (
     <>
-        <section className={`row_am modern_ui_section ${gredient && "gredient-bg"}`} >
+        <section className={`row_am ${gredient && "gredient-bg"}`} >
             {gredient &&
             <div className="modernui_section_bg modernui-gredient"> 
                 <img src="assets/images/section-bg.png" alt="image"/> 
             </div>
             }
             <div className="container">
-                <div className="row align-items-center">
+                <div className="row">
                     <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'}}>
+                        <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'>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.
@@ -38,7 +39,6 @@ const Main = ({gredient}) => {
                                 <div className="col-12 mb-20" key={idx} onClick={()=>changeActiveImg(name)} style={{cursor: 'pointer'}}>
                                     <div
                                         className={`appie-traffic-service features appie-modern-design`}
-                                        style={{ paddingRight: "45px" }}
                                     >
                                         <div className="icon">
                                         <i className={icon} />
@@ -52,45 +52,7 @@ 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_one" src={img2} alt="image" /> */}
-                                        <img 
-                                            className="moving_position_animatin right_img_two" 
-                                            // src={img3} 
-                                            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="moving_position_animatin right_img_three position-relative" 
-                                        src={localImgLoad(`images/home/wrench-side-logo-1.png`)} 
-                                        alt="image" 
-                                    />
-                                </div>
-                            </div>
-                        </div>
+                        <Right />
                     </div>
                 </div>
             </div>

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

@@ -0,0 +1,52 @@
+import React from 'react'
+import BGImage from "../../../../assets/images/sec-background.jpg";
+
+export default function Right() {
+  return (
+    <div className="w-100">
+        <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 italic'>Wrench</div><div className='color-purple'>Agent</div>
+            </h3>
+        </div>
+        <div className='p-2 w-100 my-2'> 
+            <div className='color-purple text-center'>
+                <h3 className='color-purple font-25 mb-10'>Ask our &#x275B;&#x275B;<span className='color-blue italic'>Wrench</span><span className='color-purple'>Agent</span>&#x275C;&#x275C; 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>
+        {/* 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>
+                ))}
+                <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>
+    </div>
+  )
+}
+
+
+
+const list = [
+    'Watering the plants and garden',
+    'Helping with meal preparation and cooking',
+    'Assisting with organizing and cleaning out a specific area of the house',
+    'Taking care of a pet, such as feeding, walking, and grooming'
+]