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

2023-11-03 11:41:10 +00:00
parent 5e3fe0ff0a 23bbad6552
commit 5e5527ea59
10 changed files with 253 additions and 331 deletions
@@ -2,20 +2,26 @@
 <html lang="en">
  <head>
    <meta charset="utf-8" />
-    <link type="image/png" rel="icon" href="%PUBLIC_URL%/favicon.ico" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="theme-color" content="#000000" />
-    <meta name="description" content="WrenchBoard.com is the place to set family goals and reward achievements. Find tasks to earn from, or send tasks for others to perform for you." />
-    <meta name="title" content="WrenchBoard: Reward Accomplishments  | Get Family Engaged" />
-    <meta name="keywords" content="Empower families to reward accomplishment, set goals, and encourage kids to understand goals, earning, and the benefit of savings  – in one app experience. " />
+    <meta
+      name="description"
+      content="WrenchBoard.com is the place to set family goals and reward achievements. Find tasks to earn from, or send tasks for others to perform for you."
+    />
+    <meta
+      name="title"
+      content="WrenchBoard: Reward Accomplishments | Get Family Engaged"
+    />
+    <meta
+      name="keywords"
+      content="Empower families to reward accomplishment, set goals, and encourage kids to understand goals, earning, and the benefit of savings – in one app experience."
+    />
+    <meta property="og:image" content="%PUBLIC_URL%/favicon-32x32.png" />
+    <meta
+      property="business:contact_data:street_address"
+      content="Cumberland Pkwy"
+    />

-   
-    <!-- <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" /> -->
-    <!--
-      manifest.json provides metadata used when your web app is installed on a
-      user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
-    -->
-    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
    <!--
      Notice the use of %PUBLIC_URL% in the tags above.
      It will be replaced with the URL of the `public` folder during the build.
@@ -25,47 +31,78 @@
      work correctly both with client-side routing and a non-root public URL.
      Learn how to configure a non-root public URL by running `npm run build`.
    -->
+    <link type="image/png" rel="icon" href="%PUBLIC_URL%/favicon.ico" />
+    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
+
+    <!-- Preload Font Awesome -->
+    <link
+      rel="preload"
+      href="//use.fontawesome.com/releases/v6.4.2/css/all.css"
+      as="style"
+      onload="this.onload=null;this.rel='stylesheet'"
+    />
+    <noscript>
+      <link
+        rel="stylesheet"
+        href="//use.fontawesome.com/releases/v6.4.2/css/all.css"
+      />
+    </noscript>

-    <!-- link to font awesome -->
-    <link rel="stylesheet" href="//use.fontawesome.com/releases/v6.4.2/css/all.css">
-    
    <title>WrenchBoard</title>
-    <meta property="og:image" content="%PUBLIC_URL%/favicon-32x32.png" />
-    <meta property="business:contact_data:street_address" content="Cumberland Pkwy">
-    
-
-
-    <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>
  </head>
+
  <body>
    <noscript>You need to enable JavaScript to run this app.</noscript>
    <div id="root"></div>
-    <!--
-      need jv8
-    -->
  </body>
-  <script>var LHC_API = LHC_API||{};
-    LHC_API.args = {mode:'widget',lhc_base_url:'//chat.live.wrenchboard.com/',wheight:450,wwidth:350,pheight:520,pwidth:500,leaveamessage:true,check_messages:false};
-    (function() {
-    var po = document.createElement('script'); po.type = 'text/javascript'; po.setAttribute('crossorigin','anonymous'); po.async = true;
-    var date = new Date();po.src = '//chat.live.wrenchboard.com/design/defaulttheme/js/widgetv2/index.js?'+(""+date.getFullYear() + date.getMonth() + date.getDate());
-    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
+
+  <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 || {};
+    LHC_API.args = {
+      mode: "widget",
+      lhc_base_url: "//chat.live.wrenchboard.com/",
+      wheight: 450,
+      wwidth: 350,
+      pheight: 520,
+      pwidth: 500,
+      leaveamessage: true,
+      check_messages: false,
+    };
+    (function () {
+      var po = document.createElement("script");
+      po.type = "text/javascript";
+      po.setAttribute("crossorigin", "anonymous");
+      po.async = true;
+      var date = new Date();
+      po.src =
+        "//chat.live.wrenchboard.com/design/defaulttheme/js/widgetv2/index.js?" +
+        ("" + date.getFullYear() + date.getMonth() + date.getDate());
+      var s = document.getElementsByTagName("script")[0];
+      s.parentNode.insertBefore(po, s);
    })();
-   </script>
+  </script>
 </html>
@@ -1,26 +1,3 @@
-/*-----------------------------------------------------------------------------------
-
-    Template Name: Sample - Corporate Business Bootstrap4 HTML5 Template
-    Template URI: site.com
-    Description: Sample - Corporate Business Bootstrap4 HTML5 Template
-    Author: MD THAHERIL ISLAM
-    Author URI: site.com
-    Version: 1.0
-
-----------------------------------------------------------------------------------
-
-    CSS INDEX
-    ===================
-
-    01. Theme default CSS
-	02. Header
-    03. Hero
-	04. Footer
-
-----------------------------------------------------------------------------------*/
-/*===========================
-    1. COMMON css 
-===========================*/
@import url("https://fonts.googleapis.com/css2?family=Roboto:wght@100;300;400;500;700;900&display=swap");
 body {
  font-family: "Roboto", sans-serif;
@@ -38,7 +15,6 @@ body[data-theme="light"] {
  --logo: url("../images/wrenchboard.png") no-repeat;
 }

-
 /* ==========================================vue */
 * {
  margin: 0;
@@ -2314,6 +2290,18 @@ p {
    display: none;
  }
 }
+
+@media screen and (min-width: 688px) and (max-width: 1031px) {
+  /* Your CSS styles for this viewport size */
+  .appie-blog-item{
+    display: flex; 
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+  }
+}
+
+
 .black{
  color:#000;
 }
@@ -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>
@@ -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>
@@ -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;
@@ -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">
@@ -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>
  );
 }
@@ -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">
@@ -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>
@@ -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;