home app icons changed

public/index.html

@@ -25,6 +25,10 @@
       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 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">

src/assets/css/font-awesome.min.css

@@ -5632,6 +5632,9 @@ readers do not read off random characters that represent icons */
 .fa-twitter:before {
   content: "\f099"; }
 
+.fa-x-twitter:before {
+  content: "\e61b"; }
+
 .fa-twitter-square:before {
   content: "\f081"; }
 

src/assets/css/main.css

@@ -29,6 +29,16 @@ body {
   color: #505056;
   overflow-x: hidden;
 }
+
+body[data-theme="dark"] {
+  --logo: url("../images/wrenchboard-logo-text.png") no-repeat;
+}
+
+body[data-theme="light"] {
+  --logo: url("../images/wrenchboard.png") no-repeat;
+}
+
+
 /* ==========================================vue */
 * {
   margin: 0;
@@ -1472,6 +1482,17 @@ p {
   /* text-shadow: 2px 2px 2px #fff; */
 }
 
+/* .earn-rewards::before {
+  background: #f54747!important;
+  border-radius: 7px;
+  content: "";
+  height: 3.8rem;
+  position: absolute;
+  width: 17rem;
+  z-index: -1;
+  transform: translate(-10px, 5px) rotate(357deg);
+} */
+
 @media only screen and (min-width: 992px) and (max-width: 1200px) {
   .appie-hero-area.appie-hero-3-area .appie-hero-content .appie-title {
     font-size: 54px;
@@ -1968,7 +1989,8 @@ p {
   border-color: #fff;
 }
 .appie-hero-content.appie-hero-content-6 ul li a.item-2 {
-  background: #fff;
+  /* background: #fff; */
+  background-color: rgb(219, 237, 245);
   border-color: #fff;
 }
 .appie-hero-content.appie-hero-content-6 ul li a.item-2:hover {

src/assets/images/icon/twitter_icon.svg

@@ -0,0 +1,3 @@
+<svg width="1200" height="1227" viewBox="0 0 1200 1227" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M714.163 519.284L1160.89 0H1055.03L667.137 450.887L357.328 0H0L468.492 681.821L0 1226.37H105.866L515.491 750.218L842.672 1226.37H1200L714.137 519.284H714.163ZM569.165 687.828L521.697 619.934L144.011 79.6944H306.615L611.412 515.685L658.88 583.579L1055.08 1150.3H892.476L569.165 687.854V687.828Z" fill="white"/>
+</svg>

src/components/AboutText/AboutText.js

@@ -1,130 +1,148 @@
-    import React from 'react';
+import React from "react";
 
-    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'
+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";
 
-    
-    function AboutTextComponent () {
-    
-        return (
-            <>
-            <div className="container">
-                <div className="row">
-                    <div className="col-lg-4 col-md-6">
-                        <div
-                            className="appie-single-service-2 appie-single-service-about mt-30 wow animated fadeInUp"
-                            data-wow-duration="2000ms"
-                            data-wow-delay="200ms"
-                        >
-                            <div className="icon d-flex justify-content-center align-items-center">
-                                <img src={Design} alt="Design Icon" />
-                            </div>
-                            <h4 className="designed-title">Unlocking Potential</h4>
-                            <p className="designed-description">
-                            At WrenchBoard, we believe age should never limit one's ability to pursue their passions and generate income. 
-                            Our platform offers a variety of categories for kids to explore and turn into profitable endeavors, 
-                            fostering financial awareness and unlocking their potential for a brighter future.</p>
-                        </div>
-                    </div>
+function ServiceItem(props) {
+  return (
+    <div
+      className={`appie-single-service-2 appie-single-service-about item-${props.index} mt-30 wow animated fadeInUp`}
+      data-wow-duration="2000ms"
+      data-wow-delay={`${props.delay}ms`}
+      style={{ cursor: "default" }}
+    >
+      <div className="icon d-flex justify-content-center align-items-center">
+        <img src={props.image} alt="icon" />
+      </div>
+      <h4 className="title">{props.title}</h4>
+      <p>{props.description}</p>
+    </div>
+  );
+}
 
-                    
-                    
-                    <div className="col-lg-4 col-md-6">
-                        <div
-                                    className="appie-single-service-2 appie-single-service-about item-2 mt-30 wow animated fadeInUp"
-                                    data-wow-duration="2000ms"
-                                    data-wow-delay="400ms"
-                                >
-                                    <div className="icon d-flex justify-content-center align-items-center">
-                                        
-                                        <img src={Approach} alt="Approach Icon"/>
-                                    </div>
-                                    <h4 className="designed-title">Growing Money Mindset</h4>
-                                    <p className="designed-description">
-                                    We prioritize developing a strong money mindset in Kids. 
-                                    WrenchBoard offers a safe and supportive space for kids to explore their passions, learn new skills, and earn money. 
-                                    By instilling the value of hard work, saving, and investing, 
-                                    we aim to empower the next generation to make informed financial decisions and reach their goals.</p>
-                                </div>
-                    </div>
+function AboutTextComponent() {
+  return (
+    <>
+      <div className="container">
+        <div className="row">
+          <div className="row">
+            {servicesContent?.map(({ id, ...item }) => (
+              <div className="col-lg-4 col-md-6">
+                <ServiceItem index={id} {...item} />
+              </div>
+            ))}
+          </div>
+        </div>
+      </div>
+    </>
+  );
+}
 
-                    <div className="col-lg-4 col-md-6">
-                        <div
-                                    className="appie-single-service-2 appie-single-service-about item-3 mt-30 wow animated fadeInUp"
-                                    data-wow-duration="2000ms"
-                                    data-wow-delay="600ms"
-                                >
-                                    <div className="icon d-flex justify-content-center align-items-center">
-                                    
-                                        <img src={Interactive} alt="Interactive Icon"/>
-                                    </div>
-                                    <h4 className="designed-title">Realtime Notifications</h4>
-                                    <p className="designed-description">
-                                    Stay up-to-date with WrenchBoard! Our platform keeps you in the loop with convenient alerts and notifications. 
-                                    Choose your preferred method of receiving updates - email, text, or push notifications - and never miss a beat. </p>
-                                </div>
-                    </div>
+export default AboutTextComponent;
 
-                    <div className="col-lg-4 col-md-6">
-                        <div
-                                        className="appie-single-service-2 appie-single-service-about item-4 mt-30 wow animated fadeInUp"
-                                        data-wow-duration="2000ms"
-                                        data-wow-delay="200ms"
-                                    >
-                                        <div className="icon d-flex justify-content-center align-items-center">
-                                            <img src={Mobility} alt="Mobility Icon" />
-                                        </div>
-                                        <h4 className="designed-title">Social Media Management</h4>
-                                        <p className="designed-description">
-                                        Teach youngsters the art of handling social media profiles for small enterprises,
-                                        cultivating essential marketing and communication abilities while also generating income. 
-                                        Manage tasks, track responses, and stay connected effortlessly. 
-                                        Experience a true mobile lifestyle with WrenchBoard!</p>
-                                    </div>
-                    </div>
+const servicesContent = [
+  {
+    id: 1,
+    image: Design,
+    delay: 200,
+    title: "Engagement",
+    description:
+      "We encourage healthy online activities for individuals, groups, or households.",
+  },
+  {
+    id: 2,
+    image: Approach,
+    delay: 400,
+    title: "Opportunity",
+    description:
+      "We prioritize developing a strong opportunity mindset and teamwork.",
+  },
+  {
+    id: 3,
+    image: Interactive,
+    delay: 600,
+    title: "Online Safety",
+    description:
+      "Stay up-to-date with WrenchBoard! We ensure healthy communication at all times.",
+  },
+  // {
+  //   id: 4,
+  //   image: Mobility,
+  //   delay: 200,
+  //   title: "Social Media Management",
+  //   description:
+  //     "Teach youngsters the art of handling social media profiles for small enterprises, cultivating essential marketing and communication abilities while also generating income. Manage tasks, track responses, and stay connected effortlessly. Experience a true mobile lifestyle with WrenchBoard!",
+  // },
+  // {
+  //   id: 5,
+  //   image: Seamless,
+  //   delay: 400,
+  //   title: "Inspiring Future Leaders",
+  //   description:
+  //     "By offering a platform for kids to earn, learn, and contribute, WrenchBoard is nurturing the next generation of entrepreneurs, creators, and leaders. We're sowing the seeds of ambition and self-confidence, preparing them for a brighter future.",
+  // },
+  // {
+  //   id: 6,
+  //   image: Privacy,
+  //   delay: 600,
+  //   title: "Privacy",
+  //   description:
+  //     "Your privacy matters. WrenchBoard works without data sharing, ensuring your information stays secure. Manage tasks across platforms confidently, enjoying a unified experience that respects your privacy.",
+  // },
+];
 
-                    <div className="col-lg-4 col-md-6">
-                        <div
-                                    className="appie-single-service-2 appie-single-service-about item-5 mt-30 wow animated fadeInUp"
-                                    data-wow-duration="2000ms"
-                                    data-wow-delay="400ms"
-                                >
-                                    <div className="icon d-flex justify-content-center align-items-center">
-                                        
-                                        <img src={Seamless} alt="Seamless Icon"/>
-                                    </div>
-                                    <h4 className="designed-title">Inspiring Future Leaders</h4>
-                                    <p className="designed-description"> 
-                                    By offering a platform for kids to earn, learn, and contribute, 
-                                    WrenchBoard is nurturing the next generation of entrepreneurs, creators, and leaders. 
-                                    We're sowing the seeds of ambition and self-confidence, preparing them for a brighter future.</p>
-                                </div>
-                    </div>
 
-                    <div className="col-lg-4 col-md-6">
-                        <div
-                                    className="appie-single-service-2 appie-single-service-about item-6 mt-30 wow animated fadeInUp"
-                                    data-wow-duration="2000ms"
-                                    data-wow-delay="600ms"
-                                >
-                                    <div className="icon d-flex justify-content-center align-items-center">
-                                    
-                                        <img src={Privacy} alt="Privacy Icon"/>
-                                    </div>
-                                    <h4 className="designed-title">Privacy</h4>
-                                    <p className="designed-description">
-                                        Your privacy matters. WrenchBoard works without data sharing, ensuring your information stays secure. 
-                                        Manage tasks across platforms confidently, enjoying a unified experience that respects your privacy.</p>
-                                </div>
-                    </div>
-                </div>
-            </div>
-            </>
-        );
-    };
-
-    export default AboutTextComponent;
+const servicesContentBAK = [
+  {
+    id: 1,
+    image: Design,
+    delay: 200,
+    title: "Unlocking Potential",
+    description:
+        "At WrenchBoard, we believe age should never limit one's ability to pursue their passions and generate income. Our platform offers a variety of categories for kids to explore and turn into profitable endeavors, fostering financial awareness and unlocking their potential for a brighter future.",
+  },
+  {
+    id: 2,
+    image: Approach,
+    delay: 400,
+    title: "Growing Money Mindset",
+    description:
+        "We prioritize developing a strong money mindset in Kids. WrenchBoard offers a safe and supportive space for kids to explore their passions, learn new skills, and earn money. By instilling the value of hard work, saving, and investing, we aim to empower the next generation to make informed financial decisions and reach their goals.",
+  },
+  {
+    id: 3,
+    image: Interactive,
+    delay: 600,
+    title: "Realtime Notifications",
+    description:
+        "Stay up-to-date with WrenchBoard! Our platform keeps you in the loop with convenient alerts and notifications. Choose your preferred method of receiving updates - email, text, or push notifications - and never miss a beat.",
+  },
+  {
+    id: 4,
+    image: Mobility,
+    delay: 200,
+    title: "Social Media Management",
+    description:
+        "Teach youngsters the art of handling social media profiles for small enterprises, cultivating essential marketing and communication abilities while also generating income. Manage tasks, track responses, and stay connected effortlessly. Experience a true mobile lifestyle with WrenchBoard!",
+  },
+  {
+    id: 5,
+    image: Seamless,
+    delay: 400,
+    title: "Inspiring Future Leaders",
+    description:
+        "By offering a platform for kids to earn, learn, and contribute, WrenchBoard is nurturing the next generation of entrepreneurs, creators, and leaders. We're sowing the seeds of ambition and self-confidence, preparing them for a brighter future.",
+  },
+  {
+    id: 6,
+    image: Privacy,
+    delay: 600,
+    title: "Privacy",
+    description:
+        "Your privacy matters. WrenchBoard works without data sharing, ensuring your information stays secure. Manage tasks across platforms confidently, enjoying a unified experience that respects your privacy.",
+  },
+];

src/components/AboutUs/HeroAbout.js

@@ -1,41 +1,39 @@
-import React from 'react';
 
 function HeroAbout() {
-    return (
-        <>
-            <div className="appie-about-top-title-area">
-                <div className="container">
-                    <div className="row">
-                        <div className="col-lg-7">
-                            <div className="appie-about-top-title">
-                                <h2 className="title">Our team is here to support you.</h2>
-                            </div>
-                        </div>
-                    </div>
-                </div>
+  return (
+    <>
+      <div className="appie-about-top-title-area">
+        <div className="container">
+          <div className="row">
+            <div className="col-lg-7">
+              <div className="appie-about-top-title">
+                <h2 className="title">Our team is here to support you.</h2>
+              </div>
             </div>
             <section className="appie-about-page-area">
-                <div className="container">
-                    <div className="row">
-                        {/* col-lg-8 */}
-                        <div className="col-12">
-                            <div className="appie-about-page-content">
-                                <h3 className="title">
-                                    We Empower Reward for Achievements
-                                </h3>
-                                <p>
+              <div className="container">
+                <div className="row">
+                  {/* col-lg-8 */}
+                  <div className="col-12">
+                    <div className="appie-about-page-content">
+                      <h3 className="title">
+                      We Empower Reward for Achievements
+                      </h3>
+                      <p>
                                 WrenchBoard prioritizes safety above all. Parents can set up family accounts to oversee their children's activities and earnings. We implement strict guidelines to ensure age-appropriate tasks and interactions, providing a worry-free space for both kids and their guardians.
                                 We believe that earning should go hand in hand with learning. As kids complete projects and earn, they also acquire essential life skills such as financial literacy, time management, and effective communication. WrenchBoard isn't just about making money; it's about fostering holistic growth.
                                 <p>Learn more at <a href={process.env.REACT_APP_DASH_URL}>www.WrenchBoard.com</a></p>
                                 </p>
-                               
-                            </div>
-                        </div>
                     </div>
+                  </div>
                 </div>
+              </div>
             </section>
-        </>
-    );
+          </div>
+        </div>
+      </div>
+    </>
+  );
 }
 
 export default HeroAbout;

src/components/AboutUs/ServicesAbout.js

@@ -1,25 +1,23 @@
 import React from 'react';
 import AboutTextComponent from '../AboutText/AboutText';
 
-
 function ServicesAbout() {
-    return (
-        <>
-            <section className="appie-services-2-area pt-90 pb-55" id="service">
-                <div className="container">
-                    <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 your values</h3>
-                                {/*<p>The app provides design and digital marketing. </p>*/}
-                            </div>
-                        </div>
-                    </div>
-                    
-                </div>
-            </section>
-        </>
-    );
+  return (
+    <>
+      <section className="appie-services-2-area pt-90 pb-55" id="service">
+        <div className="container">
+          <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 your values</h3>
+                {/* <p>{servicesContent.subTitle}</p> */}
+              </div>
+            </div>
+          </div>        
+        </div>
+      </section>
+    </>
+  );
 }
 
 export default ServicesAbout;

src/components/Contact/Forms.js

@@ -82,7 +82,8 @@ function Forms() {
                                         <i className="fab fa-facebook-f"></i>
                                     </a>
                                     <a className="twi" href={process.env.REACT_APP_TWITTER_LINK}>
-                                        <i className="fab fa-twitter"></i>
+                                        {/* <i className="fab fa-twitter"></i> */}
+                                        <i className="fab fa-x-twitter" />
                                     </a>
                                     <a className="you" href="#">
                                         <i className="fab fa-youtube"></i>

src/components/HomeOne/FooterHomeOne.js

@@ -34,7 +34,8 @@ function FooterHomeOne({ className }) {
                                         </li>
                                         <li>
                                             <a href={process.env.REACT_APP_TWITTER_LINK}>
-                                                <i className="fab fa-twitter" />
+                                                {/* <i className="fab fa-twitter" /> */}
+                                                <i className="fab fa-x-twitter" />
                                             </a>
                                         </li>
                                     </ul>

src/components/HomeOne/HeroHomeOne.js

@@ -11,66 +11,69 @@ import CustomSlider from '../customSlider/CustomSlider';
 
 
 function HeroHomeOne() {
-    var site = getConfig()[0];
-    return (
-        <>
-            <section className="appie-hero-area">
-                <div className="container">
-                    <div className="row align-items-center">
-                        <div className="col-lg-6">
-                            <div className="appie-hero-content">
-                                {/*<span>Welcome To WrenchBoard..</span>*/}
-                                <h1 className="appie-title">
-                                    Turn Chores into Exciting Challenges and Earn <span className='earn-rewards px-2'>Rewards!</span>
-                                </h1>
-                                <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.REACT_APP_APPLE_APP} className="dark" target="_blank">
-                                            <i className="fab fa-apple" /> Download for iOS
-                                        </a>
-                                    </li>
-                                    <li>
-                                        <a className="item-2 light" href={process.env.REACT_APP_ANDROID_APP} target="_blank">
-                                            <i className="fab fa-google-play" /> Download for
-                                            Android
-                                        </a>
-                                    </li>
-                                </ul>
-                            </div>
-                        </div>
-                        <div className="col-lg-6">
-                            <div className="appie-hero-thumb">
-                                <div
-                                    className="thumb wow animated fadeInUp"
-                                    data-wow-duration="2000ms"
-                                    data-wow-delay="200ms"
-                                >
-                                    {/* <img src={heroThumbOne} alt="WrenchBoard" /> */}
-                                    <div style={{width: '350px', margin: 'auto'}}>
-                                        <CustomSlider
-                                            images={[heroThumbOne, heroThumbOne1, heroThumbOne]}
-                                            speed='5'
-                                            indicatorColor='#333'
-                                        />
-                                    </div>
-                                </div>
-                                <div
-                                    className="thumb-2 wow animated fadeInRight"
-                                    data-wow-duration="2000ms"
-                                    data-wow-delay="600ms"
-                                >
-                                    <img src={heroThumbTwo} alt="" />
-                                </div>
-                            </div>
-                        </div>
-                    </div>
+  var site = getConfig()[0];
+  return (
+    <>
+      <section className="appie-hero-area">
+        <div className="container">
+          <div className="row align-items-center">
+            <div className="col-lg-6">
+              <div className="appie-hero-content appie-hero-content-6">
+                {/*<span>Welcome To WrenchBoard..</span>*/}
+                <h1 className="appie-title">
+                  Turn Chores into Exciting Challenges and Earn <span className='earn-rewards px-2'>Rewards!</span>
+                </h1>
+                <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 className=''>
+                      <a className="item-2" target='_blank'  href={process.env.REACT_APP_APPLE_APP}>
+                          <i className="fab fa-apple"></i>
+                          <span>
+                              Available on the <span>App Store</span>
+                          </span>
+                      </a>
+                  </li>
+                  <li className=''>
+                      <a className="item-2" target='_blank' href={process.env.REACT_APP_ANDROID_APP}>
+                          <i className="fab fa-google-play"></i>
+                          <span>
+                              Available on the <span>Google Play</span>
+                          </span>
+                      </a>
+                  </li>
+                </ul>
+              </div>
+            </div>
+            <div className="col-lg-6">
+              <div className="appie-hero-thumb">
+                <div
+                  className="thumb wow animated fadeInUp"
+                  data-wow-duration="2000ms"
+                  data-wow-delay="200ms"
+                >
+                  {/* <img src={heroThumbOne} alt="WrenchBoard" /> */}
+                  <div style={{ width: '350px', margin: 'auto' }}>
+                    <CustomSlider
+                      images={[heroThumbOne, heroThumbOne1, heroThumbOne]}
+                      speed='5'
+                      indicatorColor='#333'
+                    />
+                  </div>
                 </div>
-
-            </section>
-        </>
-    );
+                <div
+                  className="thumb-2 wow animated fadeInRight"
+                  data-wow-duration="2000ms"
+                  data-wow-delay="600ms"
+                >
+                  <img src={heroThumbTwo} alt="" />
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </section>
+    </>
+  );
 }
 
 export default HeroHomeOne;

src/components/HomeOne/ServicesHomeOne.js

@@ -1,12 +1,17 @@
 import React from 'react';
-import IconOne from '../../assets/images/icon/play.png';
+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 (
-    <div className="appie-single-service text-center mt-30 wow animated fadeInUp" data-wow-duration="2000ms" data-wow-delay={`${200 * (index + 1)}ms`} style={{ cursor: "default" }}>
+    <div
+      className="appie-single-service text-center mt-30 wow animated fadeInUp"
+      data-wow-duration="2000ms"
+      data-wow-delay={`${200 * (index + 1)}ms`}
+      style={{ cursor: "default" }}
+    >
       <div className="icon">
         <img src={icon} alt={title} />
       </div>
@@ -47,9 +52,7 @@ function ServicesHomeOne({ className }) {
         <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">{serviceTitle}</h3>
             </div>
           </div>
         </div>
@@ -70,4 +73,4 @@ function ServicesHomeOne({ className }) {
   );
 }
 
-export default ServicesHomeOne;
+export default ServicesHomeOne;

src/components/HomeOne/TrafficHomeTwo.js

@@ -17,7 +17,12 @@ function TrafficHomeOne() {
             <div className="row">
               {featuresContent.list?.map(({ icon, header, paragraph }, idx) => (
                 <div className="col-lg-6 col-md-6" key={idx}>
-                  <div className={`appie-traffic-service features item-${idx + 1} mb-30`} style={{ paddingRight: "45px" }}>
+                  <div
+                    className={`appie-traffic-service features item-${
+                      idx + 1
+                    } mb-30`}
+                    style={{ paddingRight: "45px" }}
+                  >
                     <div className="icon">
                       <i className={icon} />
                     </div>
@@ -67,11 +72,28 @@ export default TrafficHomeOne;
 
 const featuresContent = {
   title: "on WrenchBoard.",
-  detail: "Performing task on WrenchBoard is easy. All you need is a free account.",
+  detail:
+    "Performing task on WrenchBoard is easy. All you need is a free account.",
   list: [
-    { icon: "fal fa-check", header: "Free account", paragraph: "Get family access from parents, or create your free account." },
-    { icon: "fal fa-check", header: "Suggest or Find Task", paragraph: "Suggest tasks to parents or pick from the market." },
-    { icon: "fal fa-check", header: "Complete Task", paragraph: "Complete the task as specified." },
-    { icon: "fal fa-check", header: "Reward", paragraph: "Get your reward as specified." },
-  ]
-}
+    {
+      icon: "fal fa-check",
+      header: "Free account",
+      paragraph: "Get family access from parents, or create your free account.",
+    },
+    {
+      icon: "fal fa-check",
+      header: "Suggest or Find Task",
+      paragraph: "Suggest tasks to parents or pick from the market.",
+    },
+    {
+      icon: "fal fa-check",
+      header: "Complete Task",
+      paragraph: "Complete the task as specified.",
+    },
+    {
+      icon: "fal fa-check",
+      header: "Reward",
+      paragraph: "Get your reward as specified.",
+    },
+  ],
+};

src/components/customSlider/CustomSlider.js

@@ -96,4 +96,83 @@ function CustomSlider({images, speed, indicatorColor, indicatorClass}) {
   )
 }
 
-export default CustomSlider
+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;
+