Merge branch 'images-resizing' of WrenchBoard/WrenchBoardMainSite into master

src/components/AboutUs/HeaderAbout.js

@@ -19,7 +19,7 @@ function HeaderAbout({ action }) {
                             <div className="col-lg-2 col-md-4 col-sm-5 col-6 order-1 order-sm-1">
                                 <div className="appie-logo-box">
                                     <a href="/">
-                                        <img src={logo} alt="" />
+                                        <img src={logo} alt="" width="175px" height="38px" loading='eager' />
                                     </a>
                                 </div>
                             </div>

src/components/HomeOne/FooterHomeOne.js

@@ -1,10 +1,10 @@
-import React from 'react';
+import React, { useMemo } from 'react';
 import { Link } from 'react-router-dom';
 import logo from '../../assets/images/wrenchboard-logo-text.png';
 import getConfig from './../../Config/config'
 
 function FooterHomeOne({ className }) {
-    var site = getConfig()[0];
+    var site = useMemo(() => getConfig()[0], []);;
     let newDate = new Date().getFullYear()
 
     return (
@@ -16,7 +16,7 @@ function FooterHomeOne({ className }) {
                             <div className="footer-about-widget">
                                 <div className="logo">
                                     <a href="#">
-                                        <img src={logo} alt="WrenchBoard" />
+                                        <img src={logo} alt="WrenchBoard" loading='eager' width={300} height={65} />
                                     </a>
                                 </div>
                                 <p>

src/components/HomeOne/HomeOneHeader.js

@@ -5,48 +5,48 @@ import Navigation from '../Navigation';
 import getConfig from './../../Config/config'
 
 function HomeOneHeader({ action }) {
-    var site = getConfig()[0];
-    useEffect(() => {
-        StickyMenu();
-    }, []);
-    return (
-        <header className="appie-header-area appie-sticky">
-            <div className="container">
-                <div className="header-nav-box">
-                    <div className="row align-items-center">
-                        <div className="col-lg-2 col-md-4 col-sm-5 col-6 order-1 order-sm-1">
-                            <div className="appie-logo-box">
-                                <a href="/">
-                                    <img src={logo} alt="WrenchBoard" />
-                                </a>
-                            </div>
-                        </div>
-                        <div className="col-lg-6 col-md-1 col-sm-1 order-3 order-sm-2">
-                            <div className="appie-header-main-menu">
-                                <Navigation />
-                            </div>
-                        </div>
-                        <div className="col-lg-4  col-md-7 col-sm-6 col-6 order-2 order-sm-3">
-                            <div className="appie-btn-box text-right">
-                                <a className="login-btn" href={process.env.REACT_APP_DASH_URL_LOGIN}>
-                                    <i className="fal fa-user" /> Login
-                                </a>
-                                <a className="main-btn ml-30" href={process.env.REACT_APP_DASH_URL_SIGNUP}>
-                                    Get Started
-                                </a>
-                                <div
-                                    onClick={(e) => action(e)}
-                                    className="toggle-btn ml-30 canvas_open d-lg-none d-block"
-                                >
-                                    <i className="fa fa-bars" />
-                                </div>
-                            </div>
-                        </div>
-                    </div>
-                </div>
+  var site = getConfig()[0];
+  useEffect(() => {
+    StickyMenu();
+  }, []);
+  return (
+    <header className="appie-header-area appie-sticky">
+      <div className="container">
+        <div className="header-nav-box">
+          <div className="row align-items-center">
+            <div className="col-lg-2 col-md-4 col-sm-5 col-6 order-1 order-sm-1">
+              <div className="appie-logo-box">
+                <a href="/">
+                  <img src={logo} alt="WrenchBoard" loading='eager' width="175px" height="38px" />
+                </a>
+              </div>
             </div>
-        </header>
-    );
+            <div className="col-lg-6 col-md-1 col-sm-1 order-3 order-sm-2">
+              <div className="appie-header-main-menu">
+                <Navigation />
+              </div>
+            </div>
+            <div className="col-lg-4  col-md-7 col-sm-6 col-6 order-2 order-sm-3">
+              <div className="appie-btn-box text-right">
+                <a className="login-btn" href={process.env.REACT_APP_DASH_URL_LOGIN}>
+                  <i className="fal fa-user" /> Login
+                </a>
+                <a className="main-btn ml-30" href={process.env.REACT_APP_DASH_URL_SIGNUP}>
+                  Get Started
+                </a>
+                <div
+                  onClick={(e) => action(e)}
+                  className="toggle-btn ml-30 canvas_open d-lg-none d-block"
+                >
+                  <i className="fa fa-bars" />
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </header>
+  );
 }
 
 export default HomeOneHeader;

src/components/HomeOne/ServicesHomeOne.js

@@ -1,8 +1,8 @@
-import React from 'react';
-import IconOne from '../../assets/images/icon/account_login.png';
-import IconTwo from '../../assets/images/icon/task.png';
-import IconThree from '../../assets/images/icon/target.png';
-import IconFour from '../../assets/images/icon/reward.png';
+import React from "react";
+import IconOne from "../../assets/images/icon/account_login.png";
+import IconTwo from "../../assets/images/icon/task.png";
+import IconThree from "../../assets/images/icon/target.png";
+import IconFour from "../../assets/images/icon/reward.png";
 
 function ServiceItem({ icon, title, description, index }) {
   return (
@@ -13,7 +13,7 @@ function ServiceItem({ icon, title, description, index }) {
       style={{ cursor: "default" }}
     >
       <div className="icon">
-        <img src={icon} alt={title} />
+        <img src={icon} alt={title} width={70} height={70} loading="lazy" />
       </div>
       <h4 className="appie-title">{title}</h4>
       <p>{description}</p>
@@ -26,28 +26,31 @@ function ServicesHomeOne({ className }) {
   const serviceItems = [
     {
       icon: IconOne,
-      title: 'Free Account',
-      description: 'Join WrenchBoard. Get your free account.',
+      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.',
+      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.',
+      title: "Complete",
+      description: "Complete task, and notify assigner with ease.",
     },
     {
       icon: IconFour,
-      title: 'Reward',
-      description: 'Task completed. Find your reward.',
+      title: "Reward",
+      description: "Task completed. Find your reward.",
     },
   ];
 
   return (
-    <section className={`appie-service-area pt-10 pb-50 ${className}`} id="service">
+    <section
+      className={`appie-service-area pt-10 pb-50 ${className}`}
+      id="service"
+    >
       <div className="container">
         <div className="row justify-content-center">
           <div className="col-lg-8">

src/components/HomeOne/TrafficHomeTwo.js

@@ -1,10 +1,8 @@
-import React from 'react';
-//import thumb from '../../assets/images/PerformingTaskNew.png';
-import thumb from '../../assets/images/PerformingTask2.jpg';
-import getConfig from './../../Config/config'
+import React from "react";
+import thumb from "../../assets/images/PerformingTask2.jpg";
+import getConfig from "./../../Config/config";
 
 function TrafficHomeOne() {
-  var site = getConfig()[0];
   return (
     <section className="wrench-on-area pt-90 pb-45">
       <div className="container">
@@ -31,39 +29,26 @@ function TrafficHomeOne() {
                   </div>
                 </div>
               ))}
-              {/* <div className="col-lg-12">
-                                <div className="traffic-btn mt-50">
-                                    <a className="main-btn" href={process.env.REACT_APP_DASH_URL_LOGIN}>
-                                        Login <i className="fal fa-arrow-right" />
-                                    </a>
-                                </div>
-                            </div> */}
             </div>
           </div>
           <div className="traffic-thumb d-none d-lg-flex col-lg-5 justify-content-center align-items-center">
-            <div className='position-relative d-flex'>
-              <div className='withFadeEdge position-absolute bg-transparent w-100 h-100' style={{zIndex: '1'}}></div>
-                <img
-                  className="position-relative wow animated fadeInRight p-1"
-                  data-wow-duration="2000ms"
-                  data-wow-delay="200ms"
-                  src={thumb}
-                  alt=""
-                  style={{zIndex: '0'}}
-                />
+            <div className="position-relative d-flex">
+              <div
+                className="withFadeEdge position-absolute bg-transparent w-100 h-100"
+                style={{ zIndex: "1" }}
+              ></div>
+              <img
+                className="position-relative wow animated fadeInRight p-1"
+                data-wow-duration="2000ms"
+                data-wow-delay="200ms"
+                src={thumb}
+                alt=""
+                style={{ zIndex: "0", minHeight: "300", minWidth: "400" }}
+              />
             </div>
           </div>
         </div>
       </div>
-      {/* <div className="traffic-thumb">
-        <img
-          className="withFadeEdge wow animated fadeInRight"
-          data-wow-duration="2000ms"
-          data-wow-delay="200ms"
-          src={thumb}
-          alt=""
-        />
-      </div> */}
     </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"}} />
+              <img src={blgImg} alt={blog.post_title} style={{cursor: "pointer"}} width={370} height={278} loading="lazy" />
             </Link>
             <div className="content">
               <div className="blog-meta">

src/components/StickyHeader/StickyHeaderNav.js

@@ -16,7 +16,7 @@ function StickyHeaderNav({action}) {
                         <div className="col-lg-2 col-md-4 col-sm-5 col-6 order-1 order-sm-1">
                             <div className="appie-logo-box">
                                 <a href="/">
-                                    <img src={logo} alt="WrenchBoard" />
+                                    <img src={logo} alt="WrenchBoard" width="175px" height="38px" />
                                 </a>
                             </div>
                         </div>

src/components/customSlider/CustomSlider.js

@@ -1,178 +1,87 @@
-// import React, { useEffect, useState, useRef } from 'react'
+import React, { useEffect, useState } from "react";
 
-// function CustomSlider({images, speed, indicatorColor, indicatorClass}) {
-//     const imageElement = useRef()
-//     let [sliderCount, setSliderCount] = useState(0)
+function CustomSlider({ images, speed, indicatorColor, indicatorClass }) {
+  let [sliderCount, setSliderCount] = useState(0);
 
-//     const sliderStart = (count) => {
-//         imageElement.current.classList.add('sliding-images')
-//         setTimeout(()=>{
-//             imageElement.current.classList.remove('sliding-images')
-//         }, 1000)
-//         if(count+1 && typeof(count) == 'number'){
-//             return setSliderCount(count)
-//         } 
-//         if(sliderCount >= images.length-1){
-//             return setSliderCount(0)
-//         }
-//         setSliderCount(prev => prev + 1)
-//     }
-
-//   useEffect(()=>{
-//     const sliderInterval = setInterval(()=>{
-//         sliderStart()
-//     }, speed*1000)
-//     return () => {
-//         clearInterval(sliderInterval)
-//     }
-//   },[sliderCount])
-
-//   return (
-//     <div className='' style={{width:'100%', margin:'auto', position:'relative', overflow: 'hidden'}}>
-//         <img ref={imageElement} className={`sliding-images`} src={images[sliderCount]} alt='image' style={{width:'100%', height:'auto'}} />
-//         <div className='custom_indicators' style={{margin: '10px auto', display:'flex', gap:'10px', justifyContent: 'center'}}>
-//             {images.map((image, index)=>(
-//                 <div 
-//                     key={index} 
-//                     onClick={()=>sliderStart(index)}
-//                     className={`custom_indicator ${indicatorClass}`} 
-//                     style={{backgroundColor:`${sliderCount == index ? `${indicatorColor}` : ''}`, width:'15px', height: '15px', borderRadius: '999px', border: `1px solid ${indicatorColor}`, cursor:'pointer'}}
-//                 ></div>
-//             ))}
-//         </div>
-//     </div>
-//   )
-// }
-
-// export default CustomSlider
-
-import React, { useEffect, useState } from 'react'
-
-function CustomSlider({images, speed, indicatorColor, indicatorClass}) {
-    let [sliderCount, setSliderCount] = useState(0)
-
-    const sliderStart = (count) => {
-        if(count+1 && typeof(count) == 'number'){
-            return setSliderCount(count)
-        } 
-        if(sliderCount >= images.length-1){
-            return setSliderCount(0)
-        }
-        setSliderCount(prev => prev + 1)
+  const sliderStart = (count) => {
+    if (count + 1 && typeof count == "number") {
+      return setSliderCount(count);
     }
+    if (sliderCount >= images.length - 1) {
+      return setSliderCount(0);
+    }
+    setSliderCount((prev) => prev + 1);
+  };
 
-  useEffect(()=>{
-    const sliderInterval = setInterval(()=>{
-        sliderStart()
-    }, speed*1000)
+  useEffect(() => {
+    const sliderInterval = setInterval(() => {
+      sliderStart();
+    }, speed * 1000);
     return () => {
-        clearInterval(sliderInterval)
-    }
-  },[sliderCount])
+      clearInterval(sliderInterval);
+    };
+  }, [sliderCount]);
 
   return (
-    <div className='' style={{width:'100%', margin:'auto', position:'relative', overflow:'hidden' }}>
-        <div className='' style={{width: '100%', display:'flex'}}>
-            {images.map((image, index)=>(
-                <img 
-                    key={index} 
-                    src={image} alt='image' 
-                    style={{minWidth:'100%', height:'auto', position:'relative', transition:'.9s', right:`${sliderCount == index ? sliderCount*100+'%':'-100%'}`, opacity:`${sliderCount == index ? '1':'0'}`}} 
-                    // style={{minWidth:'100%', height:'auto', position:'relative', transition:'.9s', right:`${sliderCount*100}%`, opacity:`${sliderCount == index ? '1':'0'}`}} 
-                />
-            ))}
-        </div>
-        <div className='custom_indicators' style={{margin: '10px auto', display:'flex', gap:'10px', justifyContent: 'center'}}>
-            {images.map((image, index)=>(
-                <div 
-                    key={index} 
-                    onClick={()=>sliderStart(index)}
-                    className={`custom_indicator ${indicatorClass}`} 
-                    style={{backgroundColor:`${sliderCount == index ? `${indicatorColor}` : ''}`, width:'15px', height: '15px', borderRadius: '999px', border: `1px solid ${indicatorColor}`, cursor:'pointer'}}
-                ></div>
-            ))}
-        </div>
+    <div
+      className=""
+      style={{
+        width: "100%",
+        margin: "auto",
+        position: "relative",
+        overflow: "hidden",
+      }}
+    >
+      <div className="" style={{ width: "100%", display: "flex" }}>
+        {images.map((image, index) => (
+          <img
+            key={index}
+            src={image}
+            alt="image"
+            style={{
+              minWidth: "100%",
+              maxHeight: "695px",
+              height: "100%",
+              position: "relative",
+              transition: ".9s",
+              right: `${
+                sliderCount == index ? sliderCount * 100 + "%" : "-100%"
+              }`,
+              opacity: `${sliderCount == index ? "1" : "0"}`,
+            }}
+            // style={{minWidth:'100%', height:'auto', position:'relative', transition:'.9s', right:`${sliderCount*100}%`, opacity:`${sliderCount == index ? '1':'0'}`}}
+          />
+        ))}
+      </div>
+      <div
+        className="custom_indicators"
+        style={{
+          margin: "10px auto",
+          display: "flex",
+          gap: "10px",
+          justifyContent: "center",
+        }}
+      >
+        {images.map((image, index) => (
+          <div
+            key={index}
+            onClick={() => sliderStart(index)}
+            className={`custom_indicator ${indicatorClass}`}
+            style={{
+              backgroundColor: `${
+                sliderCount == index ? `${indicatorColor}` : ""
+              }`,
+              width: "15px",
+              height: "15px",
+              borderRadius: "999px",
+              border: `1px solid ${indicatorColor}`,
+              cursor: "pointer",
+            }}
+          ></div>
+        ))}
+      </div>
     </div>
-  )
+  );
 }
 
-export default CustomSlider
-
-// import React, { useEffect, useState } from 'react';
-
-// function CustomSlider({ images, speed, indicatorColor, indicatorClass }) {
-//   const [sliderCount, setSliderCount] = useState(0);
-
-//   const sliderStart = (count) => {
-//     if (count + 1 && typeof count === 'number') {
-//       return setSliderCount(count);
-//     }
-//     if (sliderCount >= images.length - 1) {
-//       return setSliderCount(0);
-//     }
-//     setSliderCount((prev) => prev + 1);
-//   };
-
-//   useEffect(() => {
-//     const sliderInterval = setInterval(() => {
-//       sliderStart();
-//     }, speed * 1000);
-//     return () => {
-//       clearInterval(sliderInterval);
-//     };
-//   }, [sliderCount, speed]);
-
-//   console.log("This is slider count", sliderCount)
-
-//   return (
-//     <div
-//       className=""
-//       style={{ width: '100%', margin: 'auto', position: 'relative', overflow: 'hidden' }}
-//     >
-//       <div className="" style={{ width: '100%', display: 'flex' }}>
-//         {images.map((image, index) => (
-//           <img
-//             key={index}
-//             src={image}
-//             alt="image"
-//             style={{
-//               minWidth: '100%',
-//               height: 'auto',
-//               position: 'relative',
-//               transition: 'opacity .9s',
-//               opacity: sliderCount == index ? '1' : '0',
-//             }}
-//           />
-//         ))}
-//       </div>
-//       <div
-//         className="custom_indicators"
-//         style={{
-//           margin: '10px auto',
-//           display: 'flex',
-//           gap: '10px',
-//           justifyContent: 'center',
-//         }}
-//       >
-//         {images.map((image, index) => (
-//           <div
-//             key={index}
-//             onClick={() => sliderStart(index)}
-//             className={`custom_indicator ${indicatorClass}`}
-//             style={{
-//               backgroundColor: sliderCount === index ? `${indicatorColor}` : '',
-//               width: '15px',
-//               height: '15px',
-//               borderRadius: '999px',
-//               border: `1px solid ${indicatorColor}`,
-//               cursor: 'pointer',
-//             }}
-//           ></div>
-//         ))}
-//       </div>
-//     </div>
-//   );
-// }
-
-// export default CustomSlider;
-
+export default CustomSlider;