added slider to home page

.prettierrc

@@ -0,0 +1,6 @@
+{
+    "singleQuote": true,
+    "trailingComma": "es5",
+    "tabWidth": 2
+}
+  

public/assets/images/apps/invite-friend.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 8.467 8.467" id="invite-friend"><g paint-order="fill markers stroke"><path fill="#64ddff" d="M5.11 5.15a2.042 2.042 0 0 1-2.043 2.043A2.042 2.042 0 0 1 1.025 5.15a2.042 2.042 0 0 1 2.042-2.043A2.042 2.042 0 0 1 5.11 5.151z"></path><path style="line-height:normal;font-variant-ligatures:normal;font-variant-position:normal;font-variant-caps:normal;font-variant-numeric:normal;font-variant-alternates:normal;font-variant-east-asian:normal;font-feature-settings:normal;font-variation-settings:normal;text-indent:0;text-align:start;text-decoration-line:none;text-decoration-style:solid;text-decoration-color:#000;text-transform:none;text-orientation:mixed;white-space:normal;shape-padding:0;shape-margin:0;inline-size:0;isolation:auto;mix-blend-mode:normal;solid-color:#000;solid-opacity:1" fill="#005fc1" d="M37.255 35.294c-.696 0-1.394.16-1.949.48-.555.32-.883.78-.883 1.276 0 .357.173.695.476.976h.423l.073-.275c-.316-.228-.443-.477-.443-.701 0-.262.172-.559.62-.817.895-.516 2.47-.516 3.365 0 .448.258.621.555.621.817 0 .224-.128.473-.445.701l.073.275h.424c.303-.281.477-.62.477-.976 0-.496-.33-.956-.885-1.276-.554-.32-1.25-.48-1.947-.48zm0-3.207c-.763 0-1.389.623-1.389 1.386 0 .763.626 1.387 1.39 1.387a1.39 1.39 0 0 0 1.386-1.387 1.39 1.39 0 0 0-1.387-1.386zm0 .529c.477 0 .857.38.857.857s-.38.858-.857.858a.855.855 0 0 1-.86-.858c0-.477.383-.857.86-.857z" color="#000" font-family="sans-serif" font-weight="400" overflow="visible" transform="translate(-33.022 -30.617)"></path><path style="line-height:normal;font-variant-ligatures:normal;font-variant-position:normal;font-variant-caps:normal;font-variant-numeric:normal;font-variant-alternates:normal;font-variant-east-asian:normal;font-feature-settings:normal;font-variation-settings:normal;text-indent:0;text-align:start;text-decoration-line:none;text-decoration-style:solid;text-decoration-color:#000;text-transform:none;text-orientation:mixed;white-space:normal;shape-padding:0;shape-margin:0;inline-size:0;isolation:auto;mix-blend-mode:normal;solid-color:#000;solid-opacity:1" fill="#009cff" d="M40.028 32.469a.265.265 0 0 0-.263.265v.397h-.397a.265.265 0 0 0-.266.265.265.265 0 0 0 .266.264h.397v.397a.265.265 0 0 0 .263.265.265.265 0 0 0 .266-.265v-.397h.396a.265.265 0 0 0 .266-.264.265.265 0 0 0-.266-.265h-.396v-.397a.265.265 0 0 0-.266-.265z" color="#000" font-family="sans-serif" font-weight="400" overflow="visible" transform="translate(-33.022 -30.617)"></path><path style="line-height:normal;font-variant-ligatures:normal;font-variant-position:normal;font-variant-caps:normal;font-variant-numeric:normal;font-variant-alternates:normal;font-variant-east-asian:normal;font-feature-settings:normal;font-variation-settings:normal;text-indent:0;text-align:start;text-decoration-line:none;text-decoration-style:solid;text-decoration-color:#000;text-transform:none;text-orientation:mixed;white-space:normal;shape-padding:0;shape-margin:0;inline-size:0;isolation:auto;mix-blend-mode:normal;solid-color:#000;solid-opacity:1" fill="#009cff" d="M37.031 30.889a3.965 3.965 0 0 0-2.398.982 3.972 3.972 0 0 0-.897 4.817 3.972 3.972 0 0 0 4.465 2.017 3.973 3.973 0 0 0 3.024-3.855.265.265 0 0 0-.266-.264.265.265 0 0 0-.264.264 3.44 3.44 0 1 1-1.474-2.823.265.265 0 0 0 .369-.064.265.265 0 0 0-.067-.37 3.96 3.96 0 0 0-2.492-.704z" color="#000" font-family="sans-serif" font-weight="400" overflow="visible" transform="translate(-33.022 -30.617)"></path></g></svg>

public/assets/images/apps/msg/FILE.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" id="files"><path fill="#56B3E5" d="M9 0h10.1c.9 0 1.7.4 2.1 1.1l.4.6c.5.7 1.3 1.1 2.1 1.1H39c1.4 0 2.5 1.1 2.5 2.5v17.3c0 1.4-1.1 2.5-2.5 2.5H9c-1.4 0-2.5-1.1-2.5-2.5V2.5C6.5 1.1 7.6 0 9 0z"></path><path fill="#E6E6E5" d="M35.9 2.7H9.3c-.5 0-.9.4-.9.9v8.9c0 .5.4.9.9.9h26.5c.5 0 .9-.4.9-.9V3.6c.1-.5-.3-.9-.8-.9z"></path><path fill="#98D0F1" d="M39 1.6H28.8c-.9 0-1.7.4-2.1 1.1l-.4.6c-.5.7-1.3 1.1-2.1 1.1H9c-1.4 0-2.5 1.1-2.5 2.5v17.3c0 1.4 1.1 2.5 2.5 2.5h30c1.4 0 2.5-1.1 2.5-2.5v-20c0-1.4-1.1-2.6-2.5-2.6z"></path><path fill="#D66556" d="M5.7 5.5h12.4c1 0 2 .5 2.6 1.4l.5.8c.6.9 1.5 1.4 2.6 1.4h18.5c1.7 0 3.1 1.4 3.1 3.1v21.2c0 1.7-1.4 3.1-3.1 3.1H5.7c-1.7 0-3.1-1.4-3.1-3.1V8.6c0-1.7 1.4-3.1 3.1-3.1z"></path><path fill="#FFF" d="M38.5 8.8H6.1c-.6 0-1.2.5-1.2 1.2v10.9c0 .6.5 1.2 1.2 1.2h32.5c.6 0 1.2-.5 1.2-1.2V10c-.1-.7-.6-1.2-1.3-1.2z"></path><path fill="#ED7161" d="M42.3 7.5H29.9c-1 0-2 .5-2.6 1.4l-.5.8c-.6.9-1.5 1.4-2.6 1.4H5.7c-1.7 0-3.1 1.4-3.1 3.1v21.2c0 1.7 1.4 2.1 3.1 2.1h36.6c1.7 0 3.1-.4 3.1-2.1V10.6c0-1.7-1.4-3.1-3.1-3.1z"></path><path fill="#E7B95E" d="M3.6 12.3h13.8c1.2 0 2.3.6 2.9 1.6l.6.9c.6 1 1.7 1.6 2.9 1.6h20.7c1.9 0 3.5 1.6 3.5 3.5v22.6c0 1.9-1.6 3.5-3.5 3.5H3.6C1.7 46 .1 44.4.1 42.5V15.7c0-1.9 1.6-3.4 3.5-3.4z"></path><path fill="#FFF" d="M40.2 15.9H4c-.7 0-1.3.6-1.3 1.3v12.2c0 .7.6 1.3 1.3 1.3h36.2c.7 0 1.3-.6 1.3-1.3V17.2c0-.7-.6-1.3-1.3-1.3z"></path><path fill="#FFCC67" d="M44.4 14.5H30.6c-1.2 0-2.3.6-2.9 1.6l-.6.9c-.6 1-1.7 1.6-2.9 1.6H3.6c-1.9 0-3.5 1.6-3.5 3.5v22.6c0 1.9 1.6 3.5 3.5 3.5h40.9c1.9 0 3.5-1.6 3.5-3.5V17.9c-.1-1.9-1.7-3.4-3.6-3.4z"></path></svg>

public/assets/images/apps/msg/TEXT.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" id="message"><g fill="none" stroke="#303c42" stroke-linecap="round" stroke-linejoin="round" data-name="Chat Bubble 13"><path d="M21 1.5H3A1.5 1.5 0 0 0 1.5 3v19.5l5-5H21a1.5 1.5 0 0 0 1.5-1.5V3A1.5 1.5 0 0 0 21 1.5Z"></path><circle cx="12" cy="10" r=".5"></circle><circle cx="7" cy="10" r=".5"></circle><circle cx="17" cy="10" r=".5"></circle></g></svg>

src/assets/css/main.css

@@ -1802,6 +1802,7 @@ p {
   }
 }
 .appie-hero-content ul li a {
+  cursor: pointer;
   background: #0e1133;
   color: #fff;
   line-height: 40px;
@@ -4275,6 +4276,7 @@ p {
   background-position: center;
   background-repeat: no-repeat;
   background-size: cover;
+  box-shadow: 0 0 15px 25px #eef1f6 inset;
 }
 @media only screen and (max-width: 991px) {
   .mission-side-box {

src/components/AboutUs/ServicesAbout.js

@@ -1,11 +1,11 @@
 import React from 'react';
 
-import Design from '../../assets/images/value-design.png'
-import Approach from '../../assets/images/value-approach.png'
-import Interactive from '../../assets/images/value-interactive.png'
-import Mobility from '../../assets/images/value-mobility.png'
-import Privacy from '../../assets/images/value-privacy.png'
-import Seamless from '../../assets/images/value-seamless.png'
+import Design from '../../assets/images/design.png'
+import Approach from '../../assets/images/approach.png'
+import Interactive from '../../assets/images/interactive.png'
+import Mobility from '../../assets/images/mobility-approach.png'
+import Privacy from '../../assets/images/privacy.png'
+import Seamless from '../../assets/images/seamless.png'
 
 
 
@@ -19,7 +19,7 @@ function ServicesAbout() {
                     <div className="row align-items-end">
                         <div className="col-12 col-lg-8">
                             <div className="appie-section-title">
-                                <h3 className="appie-title">We’re driven by our values</h3>
+                                <h3 className="appie-title">We’re driven by your values</h3>
                                 <p>The app provides design and digital marketing. </p>
                             </div>
                         </div>
@@ -38,7 +38,7 @@ function ServicesAbout() {
                                     <img src={Design} />
                                 </div>
                                 <h4 className="title">Carefully designed</h4>
-                                <p>We listen to how the users will love to use our tools. It is always about the users</p>
+                                <p>Wrenchboard prioritizes your needs and desires. We know that the your success depends on how well we meet your needs. So, we always listen to feedback and take suggestions to heart, constantly striving to improve our products and make them as user-friendly as possible. It's not about us - it's about you.</p>
                             </div>
                         </div>
                         <div className="col-lg-4 col-md-6">
@@ -54,7 +54,7 @@ function ServicesAbout() {
                                     <img src={Approach} />
                                 </div>
                                 <h4 className="title">Modern Approach</h4>
-                                <p>Our target is to present a cutting-edge solution that serves the users at all times.</p>
+                                <p>We're committed to providing a cutting-edge solution that serves you at all times.Our goal is to create a product that is intuitive and user-friendly, and we are constantly working to improve and refine our tools. We believe that by prioritizing you, we can create a solution that truly makes a difference and exceeds expectations.</p>
                             </div>
                         </div>
                         <div className="col-lg-4 col-md-6">
@@ -70,7 +70,7 @@ function ServicesAbout() {
                                     <img src={Interactive} />
                                 </div>
                                 <h4 className="title">User Interactive</h4>
-                                <p>Email, notifications, and alerts to get you engaged in the process.</p>
+                                <p>WrenchBoard offers a variety of features to keep you engaged and informed throughout your experience. Email notifications and alerts are designed to ensure that you never miss out on important updates or changes.Whether you prefer to receive updates via email, text message, or push notification, we have you covered. </p>
                             </div>
                         </div>
                         <div className="col-lg-4 col-md-6">
@@ -86,7 +86,7 @@ function ServicesAbout() {
                                     <img src={Mobility} />
                                 </div>
                                 <h4 className="title">Mobility Approach</h4>
-                                <p>Web and native app solution for your continuously moving life.</p>
+                                <p>WrenchBoard offers a comprehensive suite of tools that seamlessly integrate across all devices, allowing you to stay organized and productive no matter where your day takes you. From managing tasks to tracking your responses and staying connected. With WrenchBoard, experience the freedom and flexibility of a truly mobile lifestyle!</p>
                             </div>
                         </div>
                         <div className="col-lg-4 col-md-6">
@@ -102,7 +102,7 @@ function ServicesAbout() {
                                     <img src={Seamless} />
                                 </div>
                                 <h4 className="title">Seamless Sync</h4>
-                                <p> Changes across platforms is simplified and streamlined.</p>
+                                <p> With WrenchBoard, managing your activities across different platforms is easy and seamless. Our suite of features is designed to work across all devices, so you can stay organized and productive whether you're on your desktop, tablet, or phone. Say goodbye to the hassle of switching between different apps and platforms. WrenchBoard makes it simple and streamlined. .</p>
                             </div>
                         </div>
                         <div className="col-lg-4 col-md-6">
@@ -118,7 +118,7 @@ function ServicesAbout() {
                                     <img src={Privacy} />
                                 </div>
                                 <h4 className="title">Privacy</h4>
-                                <p>We truly respect your need for privacy. Our solution doesn't need to share your data to work for you.</p>
+                                <p>We understand how important privacy is you, which is why we are designed to work without needing to share your data. You can trust that your information will remain safe and confidential while using our suite of features to manage your tasks across different platforms. Experience the convenience of a unified, cross-platform experience without sacrificing your privacy.</p>
                             </div>
                         </div>
                     </div>

src/components/AboutUs/index.js

@@ -16,8 +16,8 @@ function AboutUs() {
     return (
         <>
             <Drawer drawer={drawer} action={drawerAction.toggle} />
-            <StickyHeaderNav action={drawerAction.toggle} />
-            {/* <HeaderAbout drawer={drawer} action={drawerAction.toggle} /> */}
+            {/* <StickyHeaderNav action={drawerAction.toggle} /> */}
+            <HeaderAbout drawer={drawer} action={drawerAction.toggle} />
             <HeroAbout />
             <ServicesAbout />
             {/* <TeamAbout />*/}

src/components/Contact/index.js

@@ -13,8 +13,8 @@ function Contact() {
     return (
         <>
             <Drawer drawer={drawer} action={drawerAction.toggle} />
-            <StickyHeaderNav action={drawerAction.toggle} />
-            {/* <HeaderNews drawer={drawer} action={drawerAction.toggle} /> */}
+            {/* <StickyHeaderNav action={drawerAction.toggle} /> */}
+            <HeaderNews drawer={drawer} action={drawerAction.toggle} />
             <HeroNews
                 title="Contact us"
                 breadcrumb={[

src/components/FAQ/Index.js

@@ -18,12 +18,12 @@ function FAQ() {
     return (
         <>
             <Drawer drawer={drawer} action={drawerAction.toggle} />
-            <StickyHeaderNav action={drawerAction.toggle} />
-            {/* <HeaderNews action={drawerAction.toggle} /> */}
+            {/* <StickyHeaderNav action={drawerAction.toggle} /> */}
+            <HeaderNews action={drawerAction.toggle} />
             <HeroNews
                 title="Frequently asked questions"
                 breadcrumb={[
-                    { link: '/', title: 'home' },
+                    { link: '/', title: 'Home' },
                     { link: '/faq', title: 'Faq' },
                 ]}
             />

src/components/HomeOne/FooterHomeOne.js

@@ -112,12 +112,12 @@ function FooterHomeOne({ className }) {
                                 <div className="apps-download-btn">
                                     <ul>
                                         <li>
-                                            <a href={process.env.APPLE_APP}>
+                                            <a href={process.env.REACT_APP_APPLE_APP} target="_blank">
                                                 <i className="fab fa-apple" /> Download for iOS
                                             </a>
                                         </li>
                                         <li>
-                                            <a className="item-2" href={process.env.REACT_APP_ANDROID_APP}>
+                                            <a className="item-2" href={process.env.REACT_APP_ANDROID_APP} target="_blank">
                                                 <i className="fab fa-google-play" /> Download for
                                                 Android
                                             </a>

src/components/HomeOne/HeroHomeOne.js

@@ -5,6 +5,7 @@ import shapeTwo from '../../assets/images/shape/shape-2.png';
 import shapeThree from '../../assets/images/shape/shape-3.png';
 import shapeFour from '../../assets/images/shape/shape-4.png';
 import getConfig from './../../Config/config'
+import CustomSlider from '../customSlider/CustomSlider';
 
 
 function HeroHomeOne() {
@@ -21,16 +22,15 @@ function HeroHomeOne() {
                                     Turn Chores into Exciting Challenges and Earn <span className='earn-rewards px-2'>Rewards!</span>
                                 </h1>
                                 <p>
-                                    The Marketplace platform to earn money with your skills, find, buy and sell professional services. Connect, build an outstanding portfolio and link to an integrated community with best services via a digital platform.
-                                </p>
+                                    Your place to set family goals and reward achievements. Find tasks to earn from, or build a tasks portfolio and find others to perform tasks for you.                                </p>
                                 <ul>
                                     <li>
-                                        <a href={process.env.APPLE_APP}>
+                                        <a href={process.env.REACT_APP_APPLE_APP} className="dark" target="_blank">
                                             <i className="fab fa-apple" /> Download for iOS
                                         </a>
                                     </li>
                                     <li>
-                                        <a className="item-2" href={process.env.REACT_APP_ANDROID_APP}>
+                                        <a className="item-2 light" href={process.env.REACT_APP_ANDROID_APP} target="_blank">
                                             <i className="fab fa-google-play" /> Download for
                                             Android
                                         </a>
@@ -45,7 +45,14 @@ function HeroHomeOne() {
                                     data-wow-duration="2000ms"
                                     data-wow-delay="200ms"
                                 >
-                                    <img src={heroThumbOne} alt="WrenchBoard" />
+                                    {/* <img src={heroThumbOne} alt="WrenchBoard" /> */}
+                                    <div style={{width: '350px', margin: 'auto'}}>
+                                        <CustomSlider
+                                            images={[heroThumbOne, heroThumbOne, heroThumbOne]}
+                                            speed='5'
+                                            indicatorColor='#333'
+                                        />
+                                    </div>
                                 </div>
                                 <div
                                     className="thumb-2 wow animated fadeInRight"

src/components/HomeOne/index.js

@@ -23,12 +23,11 @@ import StickyHeaderNav from '../StickyHeader/StickyHeaderNav';
 function HomeOne() {
     const [drawer, drawerAction] = useToggle(false);
 
-
     return (
         <>
             <Drawer drawer={drawer} action={drawerAction.toggle} />
-            <StickyHeaderNav action={drawerAction.toggle} />
-            {/* <HomeOneHeader action={drawerAction.toggle} /> */}
+            {/* <StickyHeaderNav action={drawerAction.toggle} /> */}
+            <HomeOneHeader action={drawerAction.toggle} />
             <HeroHomeOne />
             <ServicesHomeOne />
             {/*<RecentJobsOne />*/}

src/components/News/SingleNews.js

@@ -14,8 +14,8 @@ function SingleNews() {
     return (
         <>
             <Drawer drawer={drawer} action={drawerAction.toggle} />
-            <StickyHeaderNav action={drawerAction.toggle} />
-            {/* <HeaderNews action={drawerAction.toggle} /> */}
+            {/* <StickyHeaderNav action={drawerAction.toggle} /> */}
+            <HeaderNews action={drawerAction.toggle} />
             <HeroNews
                 title="Blog"
                 breadcrumb={[

src/components/News/index.js

@@ -14,8 +14,8 @@ function News() {
     return (
         <>
             <Drawer drawer={drawer} action={drawerAction.toggle} />
-            <StickyHeaderNav action={drawerAction.toggle} />
-            {/* <HeaderNews action={drawerAction.toggle} /> */}
+            {/* <StickyHeaderNav action={drawerAction.toggle} /> */}
+            <HeaderNews action={drawerAction.toggle} />
             <HeroNews
                 title="Blogs"
                 breadcrumb={[

src/components/Service/Privacy.js

@@ -13,15 +13,15 @@ import StickyHeaderNav from '../StickyHeader/StickyHeaderNav';
 
 
 function Privacy() {
-    // useEffect(() => {
-    //     StickyMenu();
-    // });
+    useEffect(() => {
+        StickyMenu();
+    });
     const [drawer, drawerAction] = useToggle(false);
     return (
         <>
             <Drawer drawer={drawer} action={drawerAction.toggle} />
-            <StickyHeaderNav action={drawerAction.toggle} />
-            {/* <HeaderService action={drawerAction.toggle} /> */}
+            {/* <StickyHeaderNav action={drawerAction.toggle} /> */}
+            <HeaderService action={drawerAction.toggle} />
             <HeroService title="Privacy Policy" />
             <DetailsPrivacy />
             {/*<ProjectHomeOne />*/}

src/components/Service/ServiceSideMenu.js

@@ -59,7 +59,7 @@ function ServiceSideMenu() {
                         </li>
 
                         <li>
-                            <a href={site.apple_app}>
+                            <a href={process.env.REACT_APP_APPLE_APP}>
                                 <i className="fab fa-apple" /> Download for iOS
                             </a>
                         </li>

src/components/Service/Terms.js

@@ -12,15 +12,15 @@ import DetailsTerms from './DetailsTerms';
 import StickyHeaderNav from '../StickyHeader/StickyHeaderNav';
 
 function Terms() {
-    // useEffect(() => {
-    //     StickyMenu();
-    // });
+    useEffect(() => {
+        StickyMenu();
+    });
     const [drawer, drawerAction] = useToggle(false);
     return (
         <>
             <Drawer drawer={drawer} action={drawerAction.toggle} />
-            <StickyHeaderNav action={drawerAction.toggle} />
-            {/* <HeaderService action={drawerAction.toggle} /> */}
+            {/* <StickyHeaderNav action={drawerAction.toggle} /> */}
+            <HeaderService action={drawerAction.toggle} />
             <HeroService title="Terms of use" />
             <DetailsTerms />
             {/*<ProjectHomeOne />*/}

src/components/Service/index.js

@@ -14,15 +14,15 @@ import ServiceTopart from "./ServiceTopart";
 import StickyHeaderNav from '../StickyHeader/StickyHeaderNav';
 
 function Service() {
-    // useEffect(() => {
-    //     StickyMenu();
-    // });
+    useEffect(() => {
+        StickyMenu();
+    });
     const [drawer, drawerAction] = useToggle(false);
     return (
         <>
             <Drawer drawer={drawer} action={drawerAction.toggle} />
-            <StickyHeaderNav action={drawerAction.toggle} />
-            {/* <HeaderService action={drawerAction.toggle} /> */}
+            {/* <StickyHeaderNav action={drawerAction.toggle} /> */}
+            <HeaderService action={drawerAction.toggle} />
             {/* <HeroService title="Our Service to you" /> */}
             <HeroNews
                 title="Services"

src/components/UseCases/index.js

@@ -14,8 +14,8 @@ function UseCases() {
     return (
         <>
             <Drawer drawer={drawer} action={drawerAction.toggle} />
-            <StickyHeaderNav action={drawerAction.toggle} />
-            {/* <HeaderNews action={drawerAction.toggle} /> */}
+            {/* <StickyHeaderNav action={drawerAction.toggle} /> */}
+            <HeaderNews action={drawerAction.toggle} />
             <HeroNews
                 title="Use Cases"
                 breadcrumb={[

src/components/customSlider/CustomSlider.js

@@ -0,0 +1,99 @@
+// import React, { useEffect, useState, useRef } from 'react'
+
+// function CustomSlider({images, speed, indicatorColor, indicatorClass}) {
+//     const imageElement = useRef()
+//     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)
+    }
+
+  useEffect(()=>{
+    const sliderInterval = setInterval(()=>{
+        sliderStart()
+    }, speed*1000)
+    return () => {
+        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>
+  )
+}
+
+export default CustomSlider