image removal and proper text displayed

Merge branch 'section-addition' of WrenchBoard/WrenchBoardMainSite into master
Merge branch 'master' into section-addition
2024-01-30 06:04:55 +01:00 · 2024-01-28 23:10:06 +00:00 · 2024-01-28 07:34:48 +01:00 · 2024-01-28 07:32:27 +01:00 · 2024-01-27 14:47:37 -05:00 · 2024-01-22 18:28:24 +00:00
13 changed files with 274 additions and 98 deletions
@@ -18,6 +18,8 @@
 .env.test.local
 .env.production.local
 .idea
 npm-debug.log*
 yarn-debug.log*
@@ -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>
+<!--  <script>-->
-    (function (i, s, o, g, r, a, m) {
+<!--    (function (i, s, o, g, r, a, m) {-->
-      i["GoogleAnalyticsObject"] = r;
+<!--      i["GoogleAnalyticsObject"] = r;-->
-      (i[r] =
+<!--      (i[r] =-->
-        i[r] ||
+<!--        i[r] ||-->
-        function () {
+<!--        function () {-->
-          (i[r].q = i[r].q || []).push(arguments);
+<!--          (i[r].q = i[r].q || []).push(arguments);-->
-        }),
+<!--        }),-->
-        (i[r].l = 1 * new Date());
+<!--        (i[r].l = 1 * new Date());-->
-      (a = s.createElement(o)), (m = s.getElementsByTagName(o)[0]);
+<!--      (a = s.createElement(o)), (m = s.getElementsByTagName(o)[0]);-->
-      a.async = 1;
+<!--      a.async = 1;-->
-      a.src = g;
+<!--      a.src = g;-->
-      m.parentNode.insertBefore(a, m);
+<!--      m.parentNode.insertBefore(a, m);-->
-    })(
+<!--    })(-->
-      window,
+<!--      window,-->
-      document,
+<!--      document,-->
-      "script",
+<!--      "script",-->
-      "https://www.google-analytics.com/analytics.js",
+<!--      "https://www.google-analytics.com/analytics.js",-->
-      "ga"
+<!--      "ga"-->
-    );
+<!--    );-->
-    ga("create", "UA-54829827-4", "auto");
+<!--    ga("create", "UA-54829827-4", "auto");-->
-    ga("send", "pageview");
+<!--    ga("send", "pageview");-->
-  </script>
+<!--  </script>-->
  <script>
    var LHC_API = LHC_API || {};
@@ -3227,6 +3227,62 @@ 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: 500px;
  height: 500px;
  /* padding: 30px 0; */
 }
 .modern_ui_section .right_img{
  left: -60px;
  top: -20px;
 }
 .modern_ui_section .left_img{
  width: 60%;
 }
 .modern_ui_section .right_img{
  width: 40%;
 }
 .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;
  }
 }
@media only screen and (min-width: 992px) and (max-width: 1200px) {
  .traffic-btn {
    margin-top: 30px;
@@ -4894,6 +4950,28 @@ p {
  position: relative;
 }
 .service-item{
  background: transparent;
  border-radius: 6px;
  padding: 30px 10px;
 }
 .service-item .icon {
  display: inline-block;
  text-align: center;
  border-radius: 20px;
  height: 80px;
  line-height: 70px;
  margin-bottom: 10px;
  position: relative;
  width: 80px;
 }
 .service-item h4 {
  font-size: 20px;
 }
 .tags a {
  display: inline-block;
  height: 34px;
@@ -19,12 +19,12 @@ function Blog({ blogItem, imgUrl, loader }) {
  const headerLoaderStyles = {
    "--text-container-width": "300px",
-    "--text-container-height": "34px",
+    "--text-container-height": "18px",
  };
  const bodyTextLoaderStyles = {
    "--text-container-width": "770px",
-    "--text-container-height": "150px",
+    "--text-container-height": "15px",
  };
  return (
@@ -1,13 +1,14 @@
-import React from "react";
+import React from 'react';
-import IconOne from "../../assets/images/icon/account_login.png";
+import IconOne from '../../assets/images/icon/reward.png';
-import IconTwo from "../../assets/images/icon/task.png";
+import IconTwo from '../../assets/images/icon/assign-chores.png';
-import IconThree from "../../assets/images/icon/target.png";
+import IconThree from '../../assets/images/icon/financial-education.png';
-import IconFour from "../../assets/images/icon/reward.png";
+import IconFour from '../../assets/images/icon/family-connect.png';
 import Main from '../lnd/LndParts/Design/Main';
 function ServiceItem({ icon, title, description, index }) {
  return (
    <div
-      className="appie-single-service text-center mt-30 wow animated fadeInUp"
+      className="service-item text-center mt-30 wow animated fadeInUp"
      data-wow-duration="2000ms"
      data-wow-delay={`${200 * (index + 1)}ms`}
      style={{ cursor: "default" }}
@@ -22,40 +23,19 @@ function ServiceItem({ icon, title, description, index }) {
 }
 function ServicesHomeOne({ className }) {
  const serviceTitle = "Set Goals and Rewards to Inspire";
  const serviceItems = [
    {
      icon: IconOne,
      title: "Free Account",
      description: "Join WrenchBoard. Get your free account.",
    },
    {
      icon: IconTwo,
      title: "Set Goals",
      description: "Suggest or find what you want to get rewarded for.",
    },
    {
      icon: IconThree,
      title: "Complete",
      description: "Complete task, and notify assigner with ease.",
    },
    {
      icon: IconFour,
      title: "Reward",
      description: "Task completed. Find your reward.",
    },
  ];
  return (
    <section
-      className={`appie-service-area pt-10 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">
-              <h3 className="appie-title">{serviceTitle}</h3>
+              <h3 className="appie-title">
              Set Chores, Set Goals and <br /> Rewards Accomplishments
              </h3>
            </div>
          </div>
        </div>
@@ -71,9 +51,35 @@ function ServicesHomeOne({ className }) {
            </div>
          ))}
        </div>
-      </div>
+      </div> */}
      <Main />
    </section>
  );
 }
 export default ServicesHomeOne;
 const serviceTitle = `Set Chores, Set Goals and Rewards Accomplishments`;
 const serviceItems = [
  {
    icon: IconOne,
    title: 'Reward Goals Met',
    description: 'Set goals together and reward accomplishment',
  },
  {
    icon: IconTwo,
    title: 'Assign Regular Chores',
    description: 'Organize essential regular chores to be done',
  },
  {
    icon: IconThree,
    title: 'Financial Education',
    description: 'Get Kids start early on money management',
  },
  {
    icon: IconFour,
    title: 'Family Connect',
    description: 'Connect family, share accomplishments with friends',
  },
 ];
@@ -9,9 +9,9 @@ function Navigation() {
                    <Link to="/">Home</Link>
                </li>
                <li>
-                    <Link to="/service">Services</Link>
+                    <Link to="/about-us">About</Link>
                </li>
-                <li>
+                {/* <li>
                    <a href="#">
                        Resources <i className="fal fa-angle-down" />
                    </a>
@@ -26,8 +26,7 @@ function Navigation() {
                            <Link to="/faq">FAQs</Link>
                        </li>
                    </ul>
-                </li>
+                </li> */}
            </ul>
        </>
    );
@@ -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,84 @@ import img4 from '../../../../assets/images/modern03.png'
 const Main = ({gredient}) => {
    const [activeImg, setActiveImg] = useState('')
    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="ui_text w-100">
-                        <div className="section_title" data-aos="fade-up" data-aos-duration="1500" data-aos-delay="100">
+                            <div className="appie-traffic-title section_title" data-aos="fade-up" data-aos-duration="1500" data-aos-delay="100" style={{padding: '0'}}>
-                            <h2>Beautiful design with <span>modern UI</span></h2>
+                                <h3 className='title'>Set Chores, Set Goals <div className='section_sub_title'>Rewards Accomplishments</div></h3>
-                            <p>
+                                <p className=''>
-                            Lorem Ipsum is simply dummy text of the printing and typesetting industry lorem Ipsum has been the
+                                Set goals, tasks, or anything that motivates or needs to be done and reward completion. WrenchBoard is the platform plan rewards.
-                            industrys standard dummy text ever since the when an unknown printer took a galley of type and.
+                                </p>
-                            </p>
+                            </div>
-                        </div>
+                            {/* <ul className="design_block">
-                        <ul className="design_block">
+                                <li data-aos="fade-up" data-aos-duration="1500">
-                            <li data-aos="fade-up" data-aos-duration="1500">
+                                <h4>Carefully designed</h4>
-                            <h4>Carefully designed</h4>
+                                <p>Lorem Ipsum is simply dummy text of the printing and type esetting industry lorem Ipsum has.</p>
-                            <p>Lorem Ipsum is simply dummy text of the printing and type esetting industry lorem Ipsum has.</p>
+                                </li>
-                            </li>
+                                <li data-aos="fade-up" data-aos-duration="1500">
-                            <li data-aos="fade-up" data-aos-duration="1500">
+                                <h4>Seamless Sync</h4>
-                            <h4>Seamless Sync</h4>
+                                <p>Simply dummy text of the printing and typesetting inustry lorem Ipsum has Lorem dollar summit.</p>
-                            <p>Simply dummy text of the printing and typesetting inustry lorem Ipsum has Lorem dollar summit.</p>
+                                </li>
-                            </li>
+                                <li data-aos="fade-up" data-aos-duration="1500">
-                            <li data-aos="fade-up" data-aos-duration="1500">
+                                <h4>Access Drive</h4>
-                            <h4>Access Drive</h4>
+                                <p>Printing and typesetting industry lorem Ipsum has been the industrys standard dummy text of type
-                            <p>Printing and typesetting industry lorem Ipsum has been the industrys standard dummy text of type
+                                    setting.</p>
-                                setting.</p>
+                                </li>
-                            </li>
+                            </ul> */}
-                        </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'}}>
                                    <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='w-100 ui_image_con d-flex justify-content-center align-items-center'>
-                        <div className="left_img">
+                            <div className="ui_images position-relative d-flex justify-content-center align-items-center" data-aos="fade-in" data-aos-duration="1500">
-                            <img className="moving_position_animatin" src={img1} alt="image" />
+                                <div className="left_img">
-                        </div>
+                                    <img 
-                        <div className="right_img">
+                                        className="moving_position_animatin" 
-                            <img className="moving_position_animatin" src={img2} alt="image" />
+                                        src={ activeImg == 'reward' ? img1 : activeImg == 'chores' ? img1 : activeImg == 'financial' ? img1 : activeImg == 'family' ? img1 : img1} 
-                            <img className="moving_position_animatin" src={img3} alt="image" />
+                                        alt="image" 
-                            <img className="moving_position_animatin" src={img4} alt="image" />
+                                        width='332px'
-                        </div>
+                                        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} alt="image" />
                                    </div>
                                    <img className="moving_position_animatin right_img_three position-relative" src={img4} alt="image" />
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
@@ -59,3 +96,47 @@ const Main = ({gredient}) => {
 }
 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',
      },
      {
        icon: 'fal fa-check',
        header: 'Assign Regular Chores',
        paragraph: 'Organize essential regular chores to be done',
        name: 'chores',
      },
      {
        icon: 'fal fa-check',
        header: 'Financial Education',
        paragraph: 'Get Kids start early on money management',
        name: 'financial',
      },
      {
        icon: 'fal fa-check',
        header: 'Family Connect',
        paragraph: 'Connect family, share accomplishments with friends',
        name: 'family',
      },
    ]
Author	SHA1	Message	Date
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
Ebube	9cc252b2cd	adjusted spacing points for the service feature	2024-01-19 15:37:08 +01:00
ameye	a1b56a0b81	Merge branch 'modified-services-text' of WrenchBoard/WrenchBoardMainSite into master	2024-01-13 20:19:02 +00:00
Ebube	87ea20bde8	update nav items	2024-01-13 20:56:01 +01:00
Ebube	0ebbc26104	added new images and text to the services sections	2024-01-13 20:47:24 +01:00
$CHIEFSOFT\ameye$ CHIEFSOFT\ameye	e323168927	no kid image	2024-01-13 12:04:00 -05:00
ameye	2224472046	Merge branch 'address-fix' of WrenchBoard/WrenchBoardMainSite into master	2024-01-12 13:21:32 +00:00