slider section implemented

package.json

@@ -10,6 +10,7 @@
     "react": "^17.0.2",
     "react-countup": "^6.0.0",
     "react-dom": "^17.0.2",
+    "react-owl-carousel": "^2.3.3",
     "react-router-dom": "^5.3.0",
     "react-scripts": "5.0.0",
     "react-slick": "^0.28.1",

public/index.html

@@ -115,4 +115,8 @@
       s.parentNode.insertBefore(po, s);
     })();
   </script>
+
+  <!-- plugins js -->
+  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
+
 </html>

public/manifest.json

@@ -6,16 +6,6 @@
       "src": "favicon.ico",
       "sizes": "64x64 32x32 24x24 16x16",
       "type": "image/x-icon"
-    },
-    {
-      "src": "logo192.png",
-      "type": "image/png",
-      "sizes": "192x192"
-    },
-    {
-      "src": "logo512.png",
-      "type": "image/png",
-      "sizes": "512x512"
     }
   ],
   "start_url": ".",

src/assets/css/main.css

@@ -3249,9 +3249,9 @@ p {
 .modern_ui_section .ui_images{
   border-radius: 100%;
   background-color: #fff;
-  width: 500px;
-  height: 500px;
-  /* padding: 30px 0; */
+  width: auto;
+  height: auto;
+  padding: 30px 10px;
 }
 .modern_ui_section .right_img{
   left: -60px;
@@ -3260,24 +3260,25 @@ p {
 .modern_ui_section .left_img{
   width: 60%;
 }
+
+.modern_ui_section .left_img img{
+  border-radius: 10px;
+}
 .modern_ui_section .right_img{
   width: 40%;
 }
+.modern_ui_section .right_img img {
+  position: relative;
+  z-index: 2;
+}
 .modern_ui_section .right_img .right_img_one{
   width: 120px;
   height: auto;
 }
-.modern_ui_section .right_img .right_img_two{
-  /* 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;
@@ -8593,4 +8594,32 @@ LND PAGE STYLE STARTS HERE
   .banner_text h1{
     font-size: 30px;
   }
+}
+
+
+/* -----------Interface_Section-Css-Start----------------- */
+
+/* interface wraper */
+.interface_section .screen_slider {
+  margin-top: 35px;
+  /* min-height: 520px; */
+  display: flex;
+  align-items: center;
+}
+
+/* interface images */
+.interface_section .owl-item .screen_frame_img img {
+  transform: scale(.9);
+  border: 2px solid #000;
+  border-radius: 20px;
+  transition: 1s all;
+  margin: 0 auto;
+  height: 520px;
+  width: auto;
+}
+
+.interface_section .owl-item.center .screen_frame_img img {
+  transform: scale(1);
+  border: 3px solid #000;
+  padding: 5px;
 }

src/components/HomeOne/FeaturedScreen.js

@@ -0,0 +1,81 @@
+import React from 'react'
+import OwlCarousel from 'react-owl-carousel'
+import localImgLoad from '../../lib/localImgLoad'
+
+import 'owl.carousel/dist/assets/owl.carousel.css'
+import 'owl.carousel/dist/assets/owl.theme.default.css'
+
+export default function FeaturedScreen() {
+  
+    const screen_slider = {
+        loop:true,
+        margin:10,
+        nav:false,
+        autoplay: true,
+        smartSpeed: 1500,
+        center: true,
+        dots: true, 
+        responsive:{
+            0:{
+                items:2
+            },
+            600:{
+                items:3
+            },
+            1000:{
+                items:5
+            }
+        }
+    }
+  return (
+    <>
+        <section className="appie-service-area pt-50 pb-50 interface_section">
+            <div className="container-fluid">
+                <div className="appie-traffic-title section_title text-center" data-aos="fade-up" data-aos-duration="1500" data-aos-delay="100" style={{padding: '0'}}>
+                    <h3 className='title'>App Screens <div className='section_sub_title'></div></h3>
+                    <p>Simplicity of use is our goal always. Here are some of our featured screens.</p>
+                </div>
+                <div className="screen_slider" >
+                    <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" />
+                            </div>
+                        </div>
+                        <div className="item">
+                            <div className="screen_frame_img">
+                                <img src={localImgLoad('images/slider/slider_2.png')} alt="image" />
+                            </div>
+                        </div>
+                        <div className="item">
+                            <div className="screen_frame_img">
+                                <img src={localImgLoad('images/slider/slider_3.png')} alt="image" />
+                            </div>
+                        </div>
+                        <div className="item">
+                            <div className="screen_frame_img">
+                                <img src={localImgLoad('images/slider/slider_4.png')} alt="image" />
+                            </div>
+                        </div>
+                        <div className="item">
+                            <div className="screen_frame_img">
+                                <img src={localImgLoad('images/slider/slider_5.png')} alt="image" />
+                            </div>
+                        </div>
+                        <div className="item">
+                            <div className="screen_frame_img">
+                                <img src={localImgLoad('images/slider/slider_6.png')} alt="image" />
+                            </div>
+                        </div>
+                        <div className="item">
+                            <div className="screen_frame_img">
+                                <img src={localImgLoad('images/slider/slider_7.png')} alt="image" />
+                            </div>
+                        </div>
+                    </OwlCarousel>
+                </div>
+            </div>
+        </section>
+    </>
+  )
+}

src/components/HomeOne/index.js

@@ -18,6 +18,7 @@ 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';
 
 function HomeOne() {
@@ -35,6 +36,7 @@ function HomeOne() {
             {/*<FaqHomeOne />*/}
             {/*<TrafficHomeOne />*/}
             <TrafficHomeTwo />
+            <FeaturedScreen />
             {/*<TestimonialHomeOne />*/}
             {/*<TeamHomeOne />*/}
             {/*<PricingHomeOne />*/}

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

@@ -9,7 +9,7 @@ import img4 from '../../../../assets/images/modern03.png'
 
 const Main = ({gredient}) => {
 
-    const [activeImg, setActiveImg] = useState('')
+    const [activeImg, setActiveImg] = useState(list[0].name)
 
     const changeActiveImg = (name) => {
         setActiveImg(name)
@@ -33,21 +33,6 @@ const Main = ({gredient}) => {
                                 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">
-                                <li data-aos="fade-up" data-aos-duration="1500">
-                                <h4>Carefully designed</h4>
-                                <p>Lorem Ipsum is simply dummy text of the printing and type esetting industry lorem Ipsum has.</p>
-                                </li>
-                                <li data-aos="fade-up" data-aos-duration="1500">
-                                <h4>Seamless Sync</h4>
-                                <p>Simply dummy text of the printing and typesetting inustry lorem Ipsum has Lorem dollar summit.</p>
-                                </li>
-                                <li data-aos="fade-up" data-aos-duration="1500">
-                                <h4>Access Drive</h4>
-                                <p>Printing and typesetting industry lorem Ipsum has been the industrys standard dummy text of type
-                                    setting.</p>
-                                </li>
-                            </ul> */}
                             <div className="row">
                             {list?.map(({ icon, header, paragraph, name }, idx) => (
                                 <div className="col-12 mb-20" key={idx} onClick={()=>changeActiveImg(name)} style={{cursor: 'pointer'}}>
@@ -69,10 +54,10 @@ const Main = ({gredient}) => {
                     <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">
+                                <div className="left_img position-relative">
                                     <img 
-                                        className="moving_position_animatin" 
-                                        src={ activeImg == 'reward' ? img1 : activeImg == 'chores' ? img1 : activeImg == 'financial' ? img1 : activeImg == 'family' ? img1 : img1} 
+                                        className="moving_position_animatin position-relative" 
+                                        src={ localImgLoad(`images/home/${activeImg}.jpg`)} 
                                         alt="image" 
                                         width='332px'
                                         height='auto'
@@ -81,9 +66,28 @@ const Main = ({gredient}) => {
                                 <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} 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={img4} alt="image" />
+                                    <img 
+                                        className="moving_position_animatin right_img_three position-relative" 
+                                        src={localImgLoad(`images/home/wrench-side-logo-1.png`)} 
+                                        alt="image" 
+                                    />
                                 </div>
                             </div>
                         </div>
@@ -100,43 +104,28 @@ 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: 'Reward Goals Met',
         paragraph: 'Set goals together and reward accomplishment',
-        name: 'reward',
+        name: 'reward-goals',
       },
       {
         icon: 'fal fa-check',
         header: 'Assign Regular Chores',
         paragraph: 'Organize essential regular chores to be done',
-        name: 'chores',
+        name: 'assign-chores',
       },
       {
         icon: 'fal fa-check',
         header: 'Financial Education',
         paragraph: 'Get Kids start early on money management',
-        name: 'financial',
+        name: 'financial-edu',
       },
       {
         icon: 'fal fa-check',
         header: 'Family Connect',
         paragraph: 'Connect family, share accomplishments with friends',
-        name: 'family',
+        name: 'family-connect',
       },
     ]