Features first paragraph modified

package-lock.json

@@ -12,6 +12,7 @@
         "@testing-library/react": "^13.4.0",
         "@testing-library/user-event": "^13.5.0",
         "aos": "^2.3.4",
+        "axios": "^0.24.0",
         "react": "^18.2.0",
         "react-dom": "^18.2.0",
         "react-owl-carousel": "^2.3.3",
@@ -4998,6 +4999,14 @@
         "node": ">=4"
       }
     },
+    "node_modules/axios": {
+      "version": "0.24.0",
+      "resolved": "https://registry.npmjs.org/axios/-/axios-0.24.0.tgz",
+      "integrity": "sha512-Q6cWsys88HoPgAaFAVUb0WpPk0O8iTeisR9IMqy9G8AbO4NlpVknrnQS03zzF9PGAWgO3cgletO3VjV/P7VztA==",
+      "dependencies": {
+        "follow-redirects": "^1.14.4"
+      }
+    },
     "node_modules/axobject-query": {
       "version": "2.2.0",
       "resolved": "https://registry.npmjs.org/axobject-query/-/axobject-query-2.2.0.tgz",
@@ -20670,6 +20679,14 @@
       "resolved": "https://registry.npmjs.org/axe-core/-/axe-core-4.5.2.tgz",
       "integrity": "sha512-u2MVsXfew5HBvjsczCv+xlwdNnB1oQR9HlAcsejZttNjKKSkeDNVwB1vMThIUIFI9GoT57Vtk8iQLwqOfAkboA=="
     },
+    "axios": {
+      "version": "0.24.0",
+      "resolved": "https://registry.npmjs.org/axios/-/axios-0.24.0.tgz",
+      "integrity": "sha512-Q6cWsys88HoPgAaFAVUb0WpPk0O8iTeisR9IMqy9G8AbO4NlpVknrnQS03zzF9PGAWgO3cgletO3VjV/P7VztA==",
+      "requires": {
+        "follow-redirects": "^1.14.4"
+      }
+    },
     "axobject-query": {
       "version": "2.2.0",
       "resolved": "https://registry.npmjs.org/axobject-query/-/axobject-query-2.2.0.tgz",

src/component/HomeMain/Features/Main.js

@@ -1,117 +1,209 @@
-import React from 'react'
+import React from "react";
-import img1 from '../../../assets/images/secure_data.png'
+import img1 from "../../../assets/images/secure_data.png";
-import img2 from '../../../assets/images/functional.png'
+import img2 from "../../../assets/images/functional.png";
-import img3 from '../../../assets/images/live-chat.png'
+import img3 from "../../../assets/images/live-chat.png";
-import img4 from '../../../assets/images/support.png'
+import img4 from "../../../assets/images/support.png";
-import img5 from '../../../assets/images/features_frame.png'
+import img5 from "../../../assets/images/features_frame.png";
 
-const Main = ({video}) => {
+const Main = ({ video }) => {
   return (
     <>
-        {video ?
+      {video ? (
-        <section className="row_am features_section video-features" id="features">
+        <section
-            <div className="container">
+          className="row_am features_section video-features"
-                <div className="section_title" data-aos="fade-up" data-aos-duration="1500" data-aos-delay="100">
+          id="features"
-                <h2><span>Features</span> that makes app different!</h2>
+        >
-                <p>myFit has powerful connectivity, fitness, health, and safety features <br/> 
+          <div className="container">
-                Also makes provision Fitness tracking,Workout tracking,Heart rate monitoring</p>
+            <div
-                </div>
+              className="section_title"
-                <div className="feature_detail">
+              data-aos="fade-up"
-                <div className="left_data feature_box">
+              data-aos-duration="1500"
-                    <div className="data_block" data-aos="fade-right" data-aos-duration="1500">
+              data-aos-delay="100"
-                    <div className="icon">
+            >
-                        <img src="assets/images/secure.png" alt="image" />
+              <h2>
-                    </div>
+                <span>Features</span> that makes app different!
-                    <div className="text">
+              </h2>
-                        <h4>Secure data</h4>
+              <p>
-                        <p>Lorem Ipsum is simply dummy text of the printing and type setting indus ideas.</p>
+                myFit has powerful connectivity, fitness, health, and
-                    </div>
+                safety features <br />
-                    </div>
+                Also makes provision Fitness tracking,Workout tracking,Heart
-                    <div className="data_block" data-aos="fade-right" data-aos-duration="1500">
+                rate monitoring
-                    <div className="icon">
+              </p>
-                        <img src="assets/images/abt_functional.png" alt="image" />
-                    </div>
-                    <div className="text">
-                        <h4>Fully functional</h4>
-                        <p>Simply dummy text of the printing and typesetting indus lorem Ipsum is dummy.</p>
-                    </div>
-                    </div>
-                </div>
-                <div className="right_data feature_box">
-                    <div className="data_block" data-aos="fade-left" data-aos-duration="1500">
-                    <div className="icon">
-                        <img src="assets/images/communication.png" alt="image"/>
-                    </div>
-                    <div className="text">
-                        <h4>Live chat</h4>
-                        <p>Lorem Ipsum is simply dummy text of the printing and type setting indus ideas.</p>
-                    </div>
-                    </div>
-                    <div className="data_block" data-aos="fade-left" data-aos-duration="1500">
-                    <div className="icon">
-                        <img src="assets/images/abt_support.png" alt="image" />
-                    </div>
-                    <div className="text">
-                        <h4>24-7 Support</h4>
-                        <p>Simply dummy text of the printing and typesetting indus lorem Ipsum is dummy.</p>
-                    </div>
-                    </div>
-                </div>
-                <div className="feature_img" data-aos="fade-up" data-aos-duration="1500" data-aos-delay="100">
-                    <img src="assets/images/features_frame.png" alt="image" />
-                </div>
-                </div>
             </div>
+            <div className="feature_detail">
+              <div className="left_data feature_box">
+                <div
+                  className="data_block"
+                  data-aos="fade-right"
+                  data-aos-duration="1500"
+                >
+                  <div className="icon">
+                    <img src="assets/images/secure.png" alt="image" />
+                  </div>
+                  <div className="text">
+                    <h4>Secure data</h4>
+                    <p>
+                      Lorem Ipsum is simply dummy text of the printing and type
+                      setting indus ideas.
+                    </p>
+                  </div>
+                </div>
+                <div
+                  className="data_block"
+                  data-aos="fade-right"
+                  data-aos-duration="1500"
+                >
+                  <div className="icon">
+                    <img src="assets/images/abt_functional.png" alt="image" />
+                  </div>
+                  <div className="text">
+                    <h4>Fully functional</h4>
+                    <p>
+                      Simply dummy text of the printing and typesetting indus
+                      lorem Ipsum is dummy.
+                    </p>
+                  </div>
+                </div>
+              </div>
+              <div className="right_data feature_box">
+                <div
+                  className="data_block"
+                  data-aos="fade-left"
+                  data-aos-duration="1500"
+                >
+                  <div className="icon">
+                    <img src="assets/images/communication.png" alt="image" />
+                  </div>
+                  <div className="text">
+                    <h4>Live chat</h4>
+                    <p>
+                      Lorem Ipsum is simply dummy text of the printing and type
+                      setting indus ideas.
+                    </p>
+                  </div>
+                </div>
+                <div
+                  className="data_block"
+                  data-aos="fade-left"
+                  data-aos-duration="1500"
+                >
+                  <div className="icon">
+                    <img src="assets/images/abt_support.png" alt="image" />
+                  </div>
+                  <div className="text">
+                    <h4>24-7 Support</h4>
+                    <p>
+                      Simply dummy text of the printing and typesetting indus
+                      lorem Ipsum is dummy.
+                    </p>
+                  </div>
+                </div>
+              </div>
+              <div
+                className="feature_img"
+                data-aos="fade-up"
+                data-aos-duration="1500"
+                data-aos-delay="100"
+              >
+                <img src="assets/images/features_frame.png" alt="image" />
+              </div>
+            </div>
+          </div>
         </section>
-        :
+      ) : (
         <section className="row_am features_section" id="features">
-            <div className="container">
+          <div className="container">
-                <div className="section_title" data-aos="fade-up" data-aos-duration="1500" data-aos-delay="100">
+            <div
-                <h2><span>Features</span> that makes app different!</h2>
+              className="section_title"
-                <p>Lorem Ipsum is simply dummy text of the printing and typese tting <br/> indus orem Ipsum has beenthe
+              data-aos="fade-up"
-                    standard dummy.</p>
+              data-aos-duration="1500"
-                </div>
+              data-aos-delay="100"
-                <div className="feature_detail">
+            >
-                <div className="left_data feature_box">
+              <h2>
-                    <div className="data_block" data-aos="fade-right" data-aos-duration="1500">
+                <span>Features</span> that makes app different!
-    
+              </h2>
-                    <div className="text">
+              <p>
-                        <h4>Health Tips</h4>
+                Fitness Integration with your health plan in your pocket
-                        <p>myFit continuously help you organize both general and the few health questions relevant to you. We can privately help you find answer in our communities to new questions.</p>
+                bolsters healthier life by tracking and experiencing
-                    </div>
+                life-changing results .
-                    </div>
+              </p>
-                    <div className="data_block" data-aos="fade-right" data-aos-duration="1500">
-        
-                    <div className="text">
-                        <h4>Health Statistics</h4>
-                        <p>Collect your health statistics yourself, weight changes, blood pressure, blood glucose data all helps to ensure that your provider is creating plans that fits you specifically..</p>
-                    </div>
-                    </div>
-                </div>
-                <div className="right_data feature_box">
-                    <div className="data_block" data-aos="fade-left" data-aos-duration="1500">
-
-                    <div className="text">
-                        <h4>Reminders</h4>
-                        <p>Miss no appointment, medication schedule and more with myFit reminders. Allow your provider or simply set up whatever you needed reminding for.</p>
-                    </div>
-                    </div>
-                    <div className="data_block" data-aos="fade-left" data-aos-duration="1500">
-   
-                    <div className="text">
-                        <h4>Health Plan</h4>
-                        <p>Your health plan your way - myFit assist you organizing your prescription, health routines, your providers treatment plans in one place.</p>
-                    </div>
-                    </div>
-                </div>
-                <div className="feature_img" data-aos="fade-up" data-aos-duration="1500" data-aos-delay="100">
-                    <img src={img5} alt="image" />
-                </div>
-                </div>
             </div>
-        </section>}
+            <div className="feature_detail">
+              <div className="left_data feature_box">
+                <div
+                  className="data_block"
+                  data-aos="fade-right"
+                  data-aos-duration="1500"
+                >
+                  <div className="text">
+                    <h4>Health Tips</h4>
+                    <p>
+                      myFit continuously help you organize both general and the
+                      few health questions relevant to you. We can privately
+                      help you find answer in our communities to new questions.
+                    </p>
+                  </div>
+                </div>
+                <div
+                  className="data_block"
+                  data-aos="fade-right"
+                  data-aos-duration="1500"
+                >
+                  <div className="text">
+                    <h4>Health Statistics</h4>
+                    <p>
+                      Collect your health statistics yourself, weight changes,
+                      blood pressure, blood glucose data all helps to ensure
+                      that your provider is creating plans that fits you
+                      specifically..
+                    </p>
+                  </div>
+                </div>
+              </div>
+              <div className="right_data feature_box">
+                <div
+                  className="data_block"
+                  data-aos="fade-left"
+                  data-aos-duration="1500"
+                >
+                  <div className="text">
+                    <h4>Reminders</h4>
+                    <p>
+                      Miss no appointment, medication schedule and more with
+                      myFit reminders. Allow your provider or simply set up
+                      whatever you needed reminding for.
+                    </p>
+                  </div>
+                </div>
+                <div
+                  className="data_block"
+                  data-aos="fade-left"
+                  data-aos-duration="1500"
+                >
+                  <div className="text">
+                    <h4>Health Plan</h4>
+                    <p>
+                      Your health plan your way - myFit assist you organizing
+                      your prescription, health routines, your providers
+                      treatment plans in one place.
+                    </p>
+                  </div>
+                </div>
+              </div>
+              <div
+                className="feature_img"
+                data-aos="fade-up"
+                data-aos-duration="1500"
+                data-aos-delay="100"
+              >
+                <img src={img5} alt="image" />
+              </div>
+            </div>
+          </div>
+        </section>
+      )}
     </>
-  )
+  );
-}
+};
 
-export default Main
+export default Main;