From 8927614cd60c4c370a1d4f81c9d9d3c1ae33435e Mon Sep 17 00:00:00 2001
From: Ebube <chukwumdiebubeojinta@gmail.com>
Date: Mon, 28 Aug 2023 18:34:17 +0100
Subject: [PATCH] more clean up for that section

---
 src/components/HomeOne/ServicesHomeOne.js | 139 ++++++++++------------
 src/components/HomeOne/TrafficHomeTwo.js  |  90 +++++++-------
 2 files changed, 109 insertions(+), 120 deletions(-)

diff --git a/src/components/HomeOne/ServicesHomeOne.js b/src/components/HomeOne/ServicesHomeOne.js
index 79b2509..93d229e 100644
--- a/src/components/HomeOne/ServicesHomeOne.js
+++ b/src/components/HomeOne/ServicesHomeOne.js
@@ -4,80 +4,69 @@ import IconTwo from '../../assets/images/icon/Findtaskicon.png';
 import IconThree from '../../assets/images/icon/taskicon.png';
 import IconFour from '../../assets/images/icon/walleticon.png';
 
-// import FirstSlide from '../../assets/images/icon/Untitledxyz.png';
-
-
-function ServicesHomeOne({ className }) {
-    return (
-        <section className={`appie-service-area pt-90 pb-50 ${className}`} id="service">
-            <div className="container">
-                <div className="row justify-content-center">
-                    <div className="col-lg-8">
-                        <div className="appie-section-title text-center">
-                            <h3 className="appie-title">
-                               Start getting paid in easy steps.
-                            </h3>
-                          
-                        </div>
-                    </div>
-                </div>
-                <div className="row">
-                    <div className="col-lg-3 col-md-6">
-                        <div
-                            className="appie-single-service text-center mt-30 wow animated fadeInUp"
-                            data-wow-duration="2000ms"
-                            data-wow-delay="200ms"
-                        >
-                            <div className="icon">
-                                <img src={IconOne} alt="" /> 
-                            </div>
-                            <h4 className="appie-title">Free Account</h4>
-                            <p>Join WrenchBoard.<span>Create an account for Income.</span></p>
-                        </div>
-                    </div>
-                    <div className="col-lg-3 col-md-6">
-                        <div
-                            className="appie-single-service text-center mt-30 item-2 wow animated fadeInUp"
-                            data-wow-duration="2000ms"
-                            data-wow-delay="400ms"
-                        >
-                            <div className="icon">
-                                <img src={IconTwo} alt="" />
-                            </div>
-                            <h4 className="appie-title">Find Task </h4>
-                            <p>Build a Self-Portfolio <span>with sole purpose to Cash-Out.</span></p>
-                        </div>
-                    </div>
-                    <div className="col-lg-3 col-md-6">
-                        <div
-                            className="appie-single-service text-center mt-30 item-3 wow animated fadeInUp"
-                            data-wow-duration="2000ms"
-                            data-wow-delay="600ms"
->
-                            <div className="icon">
-                                <img src={IconThree} alt="" />   
-                            </div>
-                            <h4 className="appie-title">Complete</h4>
-                            <p>Organize and Manage <span>your teams efficiently. </span> Manage your workgroup.</p>
-                        </div>
-                    </div>
-                    <div className="col-lg-3 col-md-6">
-                        <div
-                            className="appie-single-service text-center mt-30 item-4 wow animated fadeInUp"
-                            data-wow-duration="2000ms"
-                            data-wow-delay="800ms"
-                        >
-                            <div className="icon">
-                                <img src={IconFour} alt="" />
-                            </div>
-                            <h4 className="appie-title">Get Paid</h4>
-                            <p>Start <span>Boosting your Income </span> By earning Cash for your Time and Skills.</p>
-                        </div>
-                    </div>
-                </div>
-            </div>
-        </section>
-    );
+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)}`} style={{ cursor: "default" }}>
+      <div className="icon">
+        <img src={icon} alt={title} />
+      </div>
+      <h4 className="appie-title">{title}</h4>
+      <p>{description}</p>
+    </div>
+  );
 }
 
-export default ServicesHomeOne;
+function ServicesHomeOne({ className }) {
+  const serviceItems = [
+    {
+      icon: IconOne,
+      title: 'Free Account',
+      description: 'Join WrenchBoard. Create an account for Income.',
+    },
+    {
+      icon: IconTwo,
+      title: 'Find Task',
+      description: 'Build a Self-Portfolio with sole purpose to Cash-Out.',
+    },
+    {
+      icon: IconThree,
+      title: 'Complete',
+      description: 'Organize and Manage your teams efficiently. Manage your workgroup.',
+    },
+    {
+      icon: IconFour,
+      title: 'Get Paid',
+      description: 'Start Boosting your Income by earning Cash for your Time and Skills.',
+    },
+  ];
+
+  return (
+    <section className={`appie-service-area pt-90 pb-50 ${className}`} id="service">
+      <div className="container">
+        <div className="row justify-content-center">
+          <div className="col-lg-8">
+            <div className="appie-section-title text-center">
+              <h3 className="appie-title">
+                Start getting paid in easy steps.
+              </h3>
+            </div>
+          </div>
+        </div>
+        <div className="row">
+          {serviceItems.map(({ icon, title, description }, index) => (
+            <div key={index} className="col-lg-3 col-md-6">
+              <ServiceItem
+                icon={icon}
+                title={title}
+                description={description}
+                index={index}
+              />
+            </div>
+          ))}
+        </div>
+      </div>
+    </section>
+  );
+}
+
+export default ServicesHomeOne;
\ No newline at end of file
diff --git a/src/components/HomeOne/TrafficHomeTwo.js b/src/components/HomeOne/TrafficHomeTwo.js
index 73945fc..eab58e1 100644
--- a/src/components/HomeOne/TrafficHomeTwo.js
+++ b/src/components/HomeOne/TrafficHomeTwo.js
@@ -3,61 +3,61 @@ import thumb from '../../assets/images/PerformingTaskNew.png';
 import getConfig from './../../Config/config'
 
 function TrafficHomeOne() {
-    var site = getConfig()[0];
-    return (
-        <section className="appie-traffic-area pt-140 pb-180">
-            <div className="container">
-                <div className="row">
-                    <div className="col-lg-7">
-                        <div className="appie-traffic-title">
-                            <h3 className="title">{featuresContent.title}</h3>
-                            <p>{featuresContent.detail}</p>
-                        </div>
-                        <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} mb-30`} style={{ paddingRight: "45px" }}>
-                                        <div className="icon">
-                                            <i className={icon} />
-                                        </div>
-                                        <h5 className="title">{header}</h5>
-                                        <p>{paragraph}</p>
-                                    </div>
-                                </div>
-                            ))}
-                            {/* <div className="col-lg-12">
+  var site = getConfig()[0];
+  return (
+    <section className="appie-traffic-area pt-140 pb-180">
+      <div className="container">
+        <div className="row">
+          <div className="col-lg-7">
+            <div className="appie-traffic-title">
+              <h3 className="title">{featuresContent.title}</h3>
+              <p>{featuresContent.detail}</p>
+            </div>
+            <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} mb-30`} style={{ paddingRight: "45px" }}>
+                    <div className="icon">
+                      <i className={icon} />
+                    </div>
+                    <h5 className="title">{header}</h5>
+                    <p>{paragraph}</p>
+                  </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>
             </div>
-            <div className="traffic-thumb ">
-                <img
-                    className="wow animated fadeInRight"
-                    data-wow-duration="2000ms"
-                    data-wow-delay="200ms"
-                    src={thumb}
-                    alt=""
-                />
-            </div>
-        </section>
-    );
+          </div>
+        </div>
+      </div>
+      <div className="traffic-thumb ">
+        <img
+          className="wow animated fadeInRight"
+          data-wow-duration="2000ms"
+          data-wow-delay="200ms"
+          src={thumb}
+          alt=""
+        />
+      </div>
+    </section>
+  );
 }
 
 export default TrafficHomeOne;
 
 const featuresContent = {
-    title: "on WrenchBoard.",
-    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." },
-    ]
+  title: "on WrenchBoard.",
+  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." },
+  ]
 }