slider section implemented

added new slide section
Merge branch 'master' of https://gitlab.chiefsoft.net/WrenchBoard/WrenchBoardMainSite
2024-02-01 07:54:48 +01:00 · 2024-02-01 00:12:36 +01:00 · 2024-01-31 16:31:57 -05:00 · 2024-01-31 16:30:11 -05:00 · 2024-01-31 19:54:41 +00:00 · 2024-01-31 19:32:18 +01:00
24 changed files with 318 additions and 72 deletions
@@ -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",
@@ -49,6 +49,16 @@
    </noscript>

    <title>WrenchBoard</title>
+    <!-- Google tag (gtag.js) -->
+    <script async src="https://www.googletagmanager.com/gtag/js?id=G-WB8G0ZD483"></script>
+    <script>
+      window.dataLayer = window.dataLayer || [];
+      function gtag(){dataLayer.push(arguments);}
+      gtag('js', new Date());
+
+      gtag('config', 'G-WB8G0ZD483');
+    </script>
+
  </head>

  <body>
@@ -56,29 +66,29 @@
    <div id="root"></div>
  </body>

-  <script>
-    (function (i, s, o, g, r, a, m) {
-      i["GoogleAnalyticsObject"] = r;
-      (i[r] =
-        i[r] ||
-        function () {
-          (i[r].q = i[r].q || []).push(arguments);
-        }),
-        (i[r].l = 1 * new Date());
-      (a = s.createElement(o)), (m = s.getElementsByTagName(o)[0]);
-      a.async = 1;
-      a.src = g;
-      m.parentNode.insertBefore(a, m);
-    })(
-      window,
-      document,
-      "script",
-      "https://www.google-analytics.com/analytics.js",
-      "ga"
-    );
-    ga("create", "UA-54829827-4", "auto");
-    ga("send", "pageview");
-  </script>
+<!--  <script>-->
+<!--    (function (i, s, o, g, r, a, m) {-->
+<!--      i["GoogleAnalyticsObject"] = r;-->
+<!--      (i[r] =-->
+<!--        i[r] ||-->
+<!--        function () {-->
+<!--          (i[r].q = i[r].q || []).push(arguments);-->
+<!--        }),-->
+<!--        (i[r].l = 1 * new Date());-->
+<!--      (a = s.createElement(o)), (m = s.getElementsByTagName(o)[0]);-->
+<!--      a.async = 1;-->
+<!--      a.src = g;-->
+<!--      m.parentNode.insertBefore(a, m);-->
+<!--    })(-->
+<!--      window,-->
+<!--      document,-->
+<!--      "script",-->
+<!--      "https://www.google-analytics.com/analytics.js",-->
+<!--      "ga"-->
+<!--    );-->
+<!--    ga("create", "UA-54829827-4", "auto");-->
+<!--    ga("send", "pageview");-->
+<!--  </script>-->

  <script>
    var LHC_API = LHC_API || {};
@@ -105,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>
@@ -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": ".",
@@ -3227,6 +3227,63 @@ p {
  background: linear-gradient(135deg, #d8aaff 0%, #9b2cfa 100%);
 }

+.appie-modern-design .icon i {
+  height: 26px;
+  width: 26px;
+  text-align: center;
+  line-height: 26px;
+  border-radius: 50%;
+  background: purple;
+  color: #fff;
+  font-size: 14px;
+  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 10px;
+}
+.modern_ui_section .right_img{
+  left: -60px;
+  top: -20px;
+}
+.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_three{
+  left: -20px;
+}
+@media only screen and (min-width: 0px) and (max-width: 500px) {
+  .modern_ui_section .right_img{
+    left: -30px;
+    top: -20px;
+  }
+}
@media only screen and (min-width: 992px) and (max-width: 1200px) {
  .traffic-btn {
    margin-top: 30px;
@@ -8537,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;
 }
@@ -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>
+    </>
+  )
+}
@@ -3,6 +3,7 @@ import IconOne from '../../assets/images/icon/reward.png';
 import IconTwo from '../../assets/images/icon/assign-chores.png';
 import IconThree from '../../assets/images/icon/financial-education.png';
 import IconFour from '../../assets/images/icon/family-connect.png';
+import Main from '../lnd/LndParts/Design/Main';

 function ServiceItem({ icon, title, description, index }) {
  return (
@@ -25,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">
@@ -50,7 +51,9 @@ function ServicesHomeOne({ className }) {
            </div>
          ))}
        </div>
-      </div>
+      </div> */}
+      
+      <Main />
    </section>
  );
 }
@@ -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 />*/}
@@ -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,49 +8,88 @@ import img4 from '../../../../assets/images/modern03.png'


 const Main = ({gredient}) => {
+
+    const [activeImg, setActiveImg] = useState(list[0].name)
+
+    const changeActiveImg = (name) => {
+        setActiveImg(name)
+    }
+
  return (
    <>
        <section className={`row_am modern_ui_section ${gredient && "gredient-bg"}`} >
            {gredient &&
-            <div className="modernui_section_bg modernui-gredient"> <img src="assets/images/section-bg.png" alt="image"/> </div>}
+            <div className="modernui_section_bg modernui-gredient"> 
+                <img src="assets/images/section-bg.png" alt="image"/> 
+            </div>
+            }
            <div className="container">
-                <div className="row">
+                <div className="row align-items-center">
                    <div className="col-lg-6">
-                        <div className="ui_text">
-                        <div className="section_title" data-aos="fade-up" data-aos-duration="1500" data-aos-delay="100">
-                            <h2>Beautiful design with <span>modern UI</span></h2>
-                            <p>
-                            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.
-                            </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="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'>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.
+                                </p>
+                            </div>
+                            <div className="row">
+                            {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`}
+                                        style={{ paddingRight: "45px" }}
+                                    >
+                                        <div className="icon">
+                                        <i className={icon} />
+                                        </div>
+                                        <h5 className="title">{header}</h5>
+                                        <p>{paragraph}</p>
+                                    </div>
+                                </div>
+                            ))}
+                            </div>
                        </div>
                    </div>
                    <div className="col-lg-6">
-                        <div className="ui_images" data-aos="fade-in" data-aos-duration="1500">
-                        <div className="left_img">
-                            <img className="moving_position_animatin" src={img1} alt="image" />
-                        </div>
-                        <div className="right_img">
-                            <img className="moving_position_animatin" src={img2} alt="image" />
-                            <img className="moving_position_animatin" src={img3} alt="image" />
-                            <img className="moving_position_animatin" src={img4} alt="image" />
-                        </div>
+                        <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>
                    </div>
                </div>
@@ -58,4 +99,33 @@ const Main = ({gredient}) => {
  )
 }

-export default Main
+export default Main
+
+
+
+const list = [
+      {
+        icon: 'fal fa-check',
+        header: 'Reward Goals Met',
+        paragraph: 'Set goals together and reward accomplishment',
+        name: 'reward-goals',
+      },
+      {
+        icon: 'fal fa-check',
+        header: 'Assign Regular Chores',
+        paragraph: 'Organize essential regular chores to be done',
+        name: 'assign-chores',
+      },
+      {
+        icon: 'fal fa-check',
+        header: 'Financial Education',
+        paragraph: 'Get Kids start early on money management',
+        name: 'financial-edu',
+      },
+      {
+        icon: 'fal fa-check',
+        header: 'Family Connect',
+        paragraph: 'Connect family, share accomplishments with friends',
+        name: 'family-connect',
+      },
+    ]
Author	SHA1	Message	Date
victorAnumudu	e78561c93f	slider section implemented	2024-02-01 07:54:48 +01:00
victorAnumudu	e13d973b30	added new slide section	2024-02-01 00:12:36 +01:00
$CHIEFSOFT\ameye$ CHIEFSOFT\ameye	bd3d945f55	Merge branch 'master' of https://gitlab.chiefsoft.net/WrenchBoard/WrenchBoardMainSite	2024-01-31 16:31:57 -05:00
$CHIEFSOFT\ameye$ CHIEFSOFT\ameye	62e7cda35d	"react-owl-carousel": "^2.3.3",	2024-01-31 16:30:11 -05:00
ameye	e11c35e49b	Merge branch 'slider-images' of WrenchBoard/WrenchBoardMainSite into master	2024-01-31 19:54:41 +00:00
victorAnumudu	9e23fd83a8	added slider images	2024-01-31 19:32:18 +01:00
ameye	537e639a65	Merge branch 'logo-addition' of WrenchBoard/WrenchBoardMainSite into master	2024-01-31 17:01:17 +00:00
victorAnumudu	02075a95c0	images added for each selected item	2024-01-31 17:20:41 +01:00
victorAnumudu	2873b22183	added logo image	2024-01-31 16:32:59 +01:00
ameye	7b01bea019	Merge branch 'image-addition' of WrenchBoard/WrenchBoardMainSite into master	2024-01-31 01:21:36 +00:00
victorAnumudu	6dd5dbc7b2	added images for home page	2024-01-30 19:16:32 +01:00
ameye	f8acc0a29e	Merge branch 'section-adjustment' of WrenchBoard/WrenchBoardMainSite into master	2024-01-30 12:34:35 +00:00
victorAnumudu	d175ef8922	image removal and proper text displayed	2024-01-30 06:04:55 +01:00
ameye	751bcd6c5d	Merge branch 'section-addition' of WrenchBoard/WrenchBoardMainSite into master	2024-01-28 23:10:06 +00:00
victorAnumudu	8a4c7d92e8	Merge branch 'master' into section-addition	2024-01-28 07:34:48 +01:00
victorAnumudu	0c4e464c5e	added a new section on home page	2024-01-28 07:32:27 +01:00
$CHIEFSOFT\ameye$ CHIEFSOFT\ameye	3586b01756	google anayltical	2024-01-27 14:47:37 -05:00
ameye	715972dbde	Merge branch 'modified-services-text' of WrenchBoard/WrenchBoardMainSite into master	2024-01-22 18:28:24 +00:00