Implemented the FAQ link

.env

@@ -8,6 +8,12 @@ REACT_APP_IOS_URL="https://play.google.com/store/apps/details?id=com.mermsemr.my
 REACT_APP_FACEBOOK="https://www.facebook.com/profile.php?id=100066498622246"
 REACT_APP_TWITTER="https://twitter.com/fluxtra"
 
-REACT_APP_APPSITE="https://myfitapp.mermsemr.com"
+REACT_APP_APPSITE=" https://myfitapp.mermsemr.com"
+#REACT_APP_APPSITE="http://localhost:7012"
+
 
 REACT_APP_AUX_ENDPOINT = "https://devapi.mermsemr.com/en/desktop/api/v2/myfit"
+REACT_APP_FORM_TIMEOUT = 10000
+REACT_APP_MAX_MESSAGE_LENGHT =300
+REACT_APP_BLOGSITE="https://blog.mermsemr.com/"
+

src/assets/css/style.css

@@ -3521,6 +3521,108 @@ header.fix_style.white_header {
   margin-bottom: 20px;
 }
 
+.contact_page_section .contact_inner .contact_form form .form-group textarea {
+  resize: none;
+}
+
+/* Textarea scrollbar */
+.contact_page_section .contact_inner .contact_form form .form-group textarea::-webkit-scrollbar {
+  width: 12px;
+  cursor: pointer;
+}
+
+.contact_page_section .contact_inner .contact_form form .form-group textarea::-webkit-scrollbar-track {
+  -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); 
+  border-radius: 10px;
+  background-color: var(--light-bg);
+}
+
+.contact_page_section .contact_inner .contact_form form .form-group textarea::-webkit-scrollbar-thumb {
+  border-radius: 10px;
+  -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5); 
+  background-color: var(--body-text-purple);
+}
+
+.contact_page_section .contact_inner .contact_form form .form-group .contact_btn{
+  display: flex !important;
+  align-items: center;
+  justify-content: center;
+}
+
+.contact_page_section .contact_inner .contact_form form .form-group .contact_btn p{
+  margin: 0 !important;
+}
+
+.contact_page_section .contact_inner .contact_form form .form-group .contact_btn > span{
+  width: 24px;
+  height: 24px;
+}
+
+#contact_body{
+  min-height: 48rem;
+  display: flex;
+  flex-direction: column;
+  align-content: center;
+  justify-content: center;
+  gap: 10px;
+}
+
+.contact_body{
+  display: flex;
+  flex-direction: column;
+  align-content: center;
+  justify-content: center;
+  gap: 10px;
+  font-size: 20px;
+  font-weight: 800;
+  text-align: center;
+}
+
+/* Animations */
+.animate.pop {
+  animation-name: animate-pop;
+  animation-timing-function: cubic-bezier(0.26, 0.53, 0.74, 1.48);
+  animation-duration: 0.5s;
+}
+
+@keyframes animate-pop {
+  0% {
+    opacity: 0;
+    transform: scale(0.5, 0.5);
+  }
+
+  100% {
+    opacity: 1;
+    transform: scale(1, 1);
+  }
+}
+
+/* For the err msg */
+#errText{
+  text-align: center;
+  color: tomato;
+  font-weight: 600;
+}
+
+.contact_page_section .contact_inner .contact_form form .form-group span{
+  font-size: 12px;
+  color: tomato;
+  padding: 3px;
+  display: none;
+}
+
+.contact_page_section .contact_inner .contact_form form .form-group input:valid[focused="true"]{
+  border: 1px solid var(--dark-purple);
+}
+
+.contact_page_section .contact_inner .contact_form form .form-group input:invalid[focused="true"]{
+  border: 1px solid tomato;
+}
+
+.contact_page_section .contact_inner .contact_form form .form-group input:invalid[focused="true"] ~ span{
+  display: block;
+}
+
 .contact_page_section
   .contact_inner
   .contact_form
@@ -4585,6 +4687,55 @@ header.fix_style.white_header {
   padding: 20px 0 0 0;
 }
 
+/* Loader */
+
+.loader{
+  border-radius: 100%;
+  position: relative;
+}
+
+.loader-sm{
+  width: 24px;
+  height: 24px;
+}
+
+/* LOADER 1 */
+
+#loader-1:before, #loader-1:after{
+  content: "";
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  border-radius: 100%;
+  border: 3.5px solid transparent;
+  border-top-color: var(--body-text-purple);
+}
+
+#loader-1:before{
+  z-index: 100;
+  animation: spin 1.5s infinite;
+}
+
+#loader-1:after{
+  border: 3.5px solid #ccc;
+}
+
+@keyframes spin{
+  0%{
+    -webkit-transform: rotate(0deg);
+    -ms-transform: rotate(0deg);
+    -o-transform: rotate(0deg);
+    transform: rotate(0deg);
+  }
+
+  100%{
+    -webkit-transform: rotate(360deg);
+    -ms-transform: rotate(360deg);
+    -o-transform: rotate(360deg);
+    transform: rotate(360deg);
+  }
+}
+
 @media screen and (max-width: 992px) {
   .navbar-expand-lg .navbar-nav .has_dropdown .drp_btn {
     position: absolute !important;

src/component/Contact/Main.js

@@ -1,24 +1,128 @@
+/** @format */
+
 import React, { useEffect, useState } from "react";
-import { Link } from "react-router-dom";
+import { Link, useNavigate } from "react-router-dom";
 import Bredcrumb from "../Bredcrumb/Main";
 import BGImg from "../../assets/images/bread_crumb_bg.png";
 import BGImg1 from "../../assets/images/bread_crumb_bg_one.png";
 import BGImg2 from "../../assets/images/bread_crumb_bg_two.png";
+import SuccessImg from "../../assets/images/experts_01.png"
 
 import SiteService from "../../vendors/service/siteService";
 
+// Form Inputs
+const FormInput = (props) => {
+  let {
+    name,
+    type,
+    placeholder,
+    required,
+    maxLenght,
+    errorMessage,
+    value,
+    onChange,
+    pattern,
+  } = props;
+
+  const [focused, setFocused] = useState(false);
+  const handleFocus = () => {
+    return setFocused(true);
+  };
+
+  return (
+    <div className="form-group">
+      <input
+        name={name}
+        type={type}
+        placeholder={placeholder}
+        className="form-control"
+        maxLength={maxLenght}
+        required={required}
+        value={value}
+        onChange={onChange}
+        onBlur={handleFocus}
+        pattern={pattern}
+        focused={focused.toString()}
+      />
+      <span>{errorMessage}</span>
+    </div>
+  );
+};
+
 const Main = ({ brdcum }) => {
-  let [countries, setCountries] = useState([]) // initial state for country dropdown
-  let countryClass = new SiteService() // instantiating the class
-  
+  let response = document.getElementById("contact_loader");
+  let contact_body = document.getElementById("contact_body");
+  let errText = document.getElementById("errText");
+  let navigate = useNavigate();
+
+  // Form Validation
+  const [values, setValues] = useState({
+    name: "",
+    email: "",
+    phone: "",
+    message: "",
+    country: "",
+  }); //initial state values
+  const [countries, setCountries] = useState([]); // initial state for country dropdown
+  const [myData, setMyData] = useState(null);
+  // Gave a generic name for multiple calls
+  const API_CALL = new SiteService(); // instantiating the class
+  // API CALL
   const allCountry = () => {
-    return countryClass.countryData();
-  }
+    return API_CALL.countryData();
+  };
+  const contactForm = async (value) => {
+    return await API_CALL.contactData(value);
+  };
+
+  const onChange = (e) => {
+    setValues((prev) => ({ ...prev, [e.target.name]: e.target.value }));
+  };
+  console.log(values);
+
+  // Submitting form
+  const handleSubmit = async (e) => {
+    e.preventDefault();
+
+    response.innerHTML = `<div
+    class="loader loader-sm"
+    id="loader-1" style='margin-right: 20px'></div>`;
+
+    contactForm(values)
+      .then((contact) => {
+        setMyData(contact);
+
+        // Checking for errors
+        if (contact?.data?.status < 1 || contact?.data?.message_id == "")
+          return (errText.textContent =
+            "unable to send your message, please try able");
+        else {
+          response.innerHTML = `<p> SEND MESSAGE </p>`;
+
+          contact_body.innerHTML = `<div class='contact_body animate pop'>
+      <div><img src=${SuccessImg} /></div>
+      <p>We have received your message and will follow up promptly.</p>
+      </div>`;
+          setTimeout(() => {
+            navigate("/");
+          }, 10000);
+
+          setValues((prev) => ({ ...prev, [e.target.name]: "" }));
+        }
+      })
+      .catch((error) => {
+        console.log(error);
+      });
+  };
 
   //CALLS THE API AFTER COMPONENT LOADS
-  useEffect(()=>{
-    allCountry().then((data)=> setCountries(Object.values(data.data)))
-  },[])
+  useEffect(() => {
+    allCountry().then((data) => setCountries(Object.values(data.data)));
+  }, []);
+
+  useEffect(() => {
+    console.log(myData);
+  }, [myData]);
 
   return (
     <>
@@ -71,107 +175,178 @@ const Main = ({ brdcum }) => {
         />
       )}
 
-      <section className="contact_page_section" id="contact">
+      <section
+        className="contact_page_section"
+        id="contact">
         <div className="container">
           <div className="contact_inner">
-            <div className="contact_form">
+            <div
+              className="contact_form"
+              id="contact_body">
               <div className="section_title">
                 <h2>
-                  Leave a <span>message</span>
+                  <span>Leave a</span> message
                 </h2>
                 <p>Fill up form below, our team will get back soon</p>
               </div>
-              <form action="">
-                <div className="form-group">
-                  <input
-                    type="text"
-                    placeholder="Name"
-                    className="form-control"
-                  />
-                </div>
-                <div className="form-group">
-                  <input
-                    type="email"
-                    placeholder="Email"
-                    className="form-control"
-                  />
-                </div>
+
+              {/* Contact Form */}
+              <form onSubmit={handleSubmit}>
+                <FormInput
+                  name="name"
+                  type="text"
+                  placeholder="Name"
+                  errorMessage="Please enter your name"
+                  required={true}
+                  maxLenght={35}
+                  value={values.name}
+                  onChange={onChange}
+                  pattern="^[A-Za-z]{1,35}$"
+                />
+
+                <FormInput
+                  name="email"
+                  type="email"
+                  placeholder="Email"
+                  errorMessage="It should be a valid email address!"
+                  required={true}
+                  maxLenght={35}
+                  value={values.email}
+                  onChange={onChange}
+                />
 
                 <div className="form-group">
-                  <select className="form-control">
-                    <option value="">Country</option>
-                    {countries.length > 0 && countries.map((country, index) => <option key={index} value={country}>{country}</option>)}
+                  <select
+                    className="form-control"
+                    name="country"
+                    value={values.country}
+                    onChange={onChange}
+                    required>
+                    <option
+                      value={""}
+                      onCha>
+                      Country
+                    </option>
+                    {countries.length > 0 &&
+                      countries.map((country, index) => (
+                        <option
+                          key={index}
+                          value={country}>
+                          {country}
+                        </option>
+                      ))}
                   </select>
                 </div>
-                <div className="form-group">
-                  <input
-                    type="text"
-                    placeholder="Phone"
-                    className="form-control"
-                  />
-                </div>
+
+                <FormInput
+                  name="phone"
+                  type="number"
+                  placeholder="Phone"
+                  errorMessage="It should be a valid phone number!"
+                  maxLenght={15}
+                  value={values.phone}
+                  onChange={onChange}
+                  pattern="^[0-9]{15}$"
+                />
 
                 <div className="form-group">
                   <textarea
+                    name="msg"
                     className="form-control"
                     placeholder="Your message"
-                  ></textarea>
+                    value={values.msg}
+                    errorMessage='words have exceeded 350 characters!'
+                    onChange={onChange}
+                    maxLength={300}
+                    pattern="^[A-Za-z0-9]{5, 300}$"
+                  />
                 </div>
                 <div className="form-group term_check">
-                  <input type="checkbox" id="term" />
+                  <input
+                    type="checkbox"
+                    id="term"
+                    onChange={onChange}
+                    required
+                  />
                   <label htmlFor="term">
                     I agree to the terms and conditions
                   </label>
                 </div>
                 <div className="form-group mb-0">
-                  <button type="submit" className="btn puprple_btn">
-                    SEND MESSAGE
+                  <button
+                    type="submit"
+                    className="btn puprple_btn contact_btn"
+                    aria-label="submit form"
+                    id="contact_loader">
+                    <p> SEND MESSAGE </p>
                   </button>
                 </div>
               </form>
+              {/* Error Tag */}
+              <p id="errText" />
             </div>
+
+            {/* Contact Info */}
             <div className="contact_info">
               <div className="icon">
-                <img src="assets/images/contact_message_icon.png" alt="image" />
+                <img
+                  src="assets/images/contact_message_icon.png"
+                  alt="image"
+                />
               </div>
               <div className="section_title">
                 <h2>
-                  Have any <span>question?</span>
+                  <span> Have any </span>question?
                 </h2>
                 <p>
                   If you have any question about our product, service, payment
                   or company, Visit our <Link to="/faq">FAQs page.</Link>
                 </p>
               </div>
-              <Link to="/faq" className="btn puprple_btn">
+              <Link
+                to="/faq"
+                className="btn puprple_btn">
                 READ FAQ
               </Link>
               <ul className="contact_info_list">
                 <li>
                   <div className="img">
-                    <img src="assets/images/mail_icon.png" alt="image" />
+                    <img
+                      src="assets/images/mail_icon.png"
+                      alt="image"
+                    />
                   </div>
                   <div className="text">
                     <span>Email Us</span>
-                    <Link to="#">example@gmail.com</Link>
+                    <a href={`mailto: ${process.env.REACT_APP_SUPPORT_EMAIL}`}>
+                      {process.env.REACT_APP_SUPPORT_EMAIL}
+                    </a>
                   </div>
                 </li>
                 <li>
                   <div className="img">
-                    <img src="assets/images/call_icon.png" alt="image" />
+                    <img
+                      src="assets/images/call_icon.png"
+                      alt="image"
+                    />
                   </div>
                   <div className="text">
                     <span>Call Us</span>
-                    <Link to="#">+1 (888) 553-46-11</Link>
+                    <a href={`tel: ${process.env.REACT_APP_US_PHONE}`}>
+                      {process.env.REACT_APP_US_PHONE}
+                    </a>
                   </div>
                 </li>
                 <li>
                   <div className="img">
-                    <img src="assets/images/location_icon.png" alt="image" />
+                    <img
+                      src="assets/images/location_icon.png"
+                      alt="image"
+                    />
                   </div>
                   <div className="text">
                     <span>Visit Us</span>
-                    <p>5687, Business Avenue, New York, USA 5687</p>
+                    <p>{process.env.REACT_APP_US_ADDRESS}</p>
                   </div>
                 </li>
               </ul>
@@ -180,7 +355,7 @@ const Main = ({ brdcum }) => {
         </div>
       </section>
       <section className="row_am map_section">
-        <div className="container"></div>
+        <div className="container" />
       </section>
     </>
   );

src/component/Home/Main.js

@@ -2,27 +2,17 @@ import { HashLink as Link } from "react-router-hash-link";
 import React, { useEffect, useState } from "react";
 import AOS from "aos";
 import OwlCarousel from "react-owl-carousel";
-//import Trusted from "../HomeMain/Trusted/Main";
 import Features from "../HomeMain/Features/Main";
-//import AboutApp from "../HomeMain/AboutApp/Main";
-//import Design from "../HomeMain/Design/Main";
 import Work from "../HomeMain/Work/Main";
-//import Testimonial from "../HomeMain/Testimonial/Main";
-//import Pricing from "../HomeMain/Pricing/Main";
 import Faq from "../HomeMain/Faq/Main";
 import Interface from "../HomeMain/Interface/Main";
 import Download from "../HomeMain/Download/Main";
 import Story from "../HomeMain/Story/Main";
-
 import anim from "../../assets/images/anim_line.png";
 import blueapp from "../../assets/images/appstore_blue.png";
 import whiteapp from "../../assets/images/appstore_white.png";
 import blue from "../../assets/images/googleplay_blue.png";
 import white from "../../assets/images/googleplay_white.png";
-//import used1 from "../../assets/images/used01.png";
-//import used2 from "../../assets/images/used02.png";
-//import used3 from "../../assets/images/used03.png";
-//import used4 from "../../assets/images/used04.png";
 import msg from "../../assets/images/message_icon.png";
 import shield from "../../assets/images/shield_icon.png";
 import screen from "../../assets/images/screen.png";

src/component/HomeMain/Faq/Main.js

@@ -1,8 +1,21 @@
-import React ,{ useState } from 'react'
+import React ,{ useState, useEffect } from 'react'
+import SiteService from '../../../vendors/service/siteService'
 
 const Main = ({gredient}) => {
 
-    const[activeFaq, setActiveFaq] = useState({a : true})
+    const[activeFaq, setActiveFaq] = useState({btn0 : false})
+
+    const [faqs, setFaqs] = useState([]); // initial state for FAQs before API call
+
+    let faqServices = new SiteService(); // instantiating the class
+
+    const allFaqData = () => {
+        return faqServices.faqData();
+    };
+
+    useEffect(() => {
+        allFaqData().then((data) => setFaqs(data.data));
+    }, []);
 
   return (
     <>
@@ -16,7 +29,7 @@ const Main = ({gredient}) => {
                 </div>
                 <div className="faq_panel">
                     <div className="accordion" id="accordionExample">
-                        <div className="card" data-aos="fade-up" data-aos-duration="1500">
+                        {/* <div className="card" data-aos="fade-up" data-aos-duration="1500">
                             <div className="card-header" id="headingOne">
                                 <h2 className="mb-0">
                                 <button type="button" className={`btn btn-link ${activeFaq.a && "active"}`} onClick= {() => setActiveFaq(activeFaq.a ? {a : false} : {a : true})} data-toggle="collapse" data-target="#collapseOne">
@@ -81,7 +94,33 @@ const Main = ({gredient}) => {
                                     leap into electronic typesetting, remaining essentially unchanged.</p>
                                 </div>
                             </div>
-                        </div>
+                        </div> */}
+
+                        {/* displays loading ... while the page fetches the FAQs */}
+                        {faqs.length < 1 && <h3>Loading...</h3>}
+
+                        {faqs.length > 0 && faqs.map((faq, index) => {
+                            let id = `heading${index}`; //headingSeven
+                            let target = `collapse${index}`; //#collapseSeven
+
+                            return(
+                            <div key={index} className="card" data-aos="fade-up">
+                                <div className="card-header" id={id}>
+                                    <h2 className="mb-0">
+                                    <button type="button" className={`btn btn-link collapsed ${activeFaq[`btn${index}`] && "active"}`} onClick= {() => setActiveFaq(activeFaq[`btn${index}`] ? {[`btn${index}`] : false} : {[`btn${index}`] : true})} data-toggle="collapse"
+                                        data-target={`#${target}`}>{activeFaq[`btn${index}`] ? <i className="icon_faq icofont-minus"></i>  : <i className="icon_faq icofont-plus"></i>}{faq.title}
+                                    </button>
+                                    </h2>
+                                </div>
+
+                                <div id={target} className="collapse" aria-labelledby={id} data-parent="#accordionExample">
+                                    <div className="card-body">
+                                        <p>{faq.text}</p>
+                                    </div>
+                                </div>
+                            </div>
+                            )
+                        })}
                     </div>
                 </div>
             </div>

src/component/HomeMain/Features/Main.js

@@ -1,210 +1,116 @@
-import React from "react";
-import img1 from "../../../assets/images/secure_data.png";
-import img2 from "../../../assets/images/functional.png";
-import img3 from "../../../assets/images/live-chat.png";
-import img4 from "../../../assets/images/support.png";
-import img5 from "../../../assets/images/features_frame.png";
+import React from 'react'
+import img1 from '../../../assets/images/secure_data.png'
+import img2 from '../../../assets/images/functional.png'
+import img3 from '../../../assets/images/live-chat.png'
+import img4 from '../../../assets/images/support.png'
+import img5 from '../../../assets/images/features_frame.png'
 
-const Main = ({ video }) => {
+const Main = ({video}) => {
   return (
     <>
-      {video ? (
-        <section
-          className="row_am features_section video-features"
-          id="features"
-        >
-          <div className="container">
-            <div
-              className="section_title"
-              data-aos="fade-up"
-              data-aos-duration="1500"
-              data-aos-delay="100"
-            >
-              <h2>
-                <span>Features</span> that makes app different!
-              </h2>
-              <p>
-                myFit has powerful connectivity, fitness, health, and
-                safety features <br />
-                Also makes provision Fitness tracking,Workout tracking,Heart
-                rate monitoring
-              </p>
+        {video ?
+        <section className="row_am features_section video-features" id="features">
+            <div className="container">
+                <div className="section_title" data-aos="fade-up" data-aos-duration="1500" data-aos-delay="100">
+                <h2><span>Features</span> that makes app different!</h2>
+                <p>myFit has powerful connectivity, fitness, health, and safety features <br/> 
+                Also makes provision Fitness tracking,Workout tracking,Heart rate monitoring</p>
+                </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>
-            <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="section_title"
-              data-aos="fade-up"
-              data-aos-duration="1500"
-              data-aos-delay="100"
-            >
-              <h2>
-                <span>Features</span> that makes app different!
-              </h2>
-              <p>
-                Fitness Integration with your health plan in your pocket
-                bolsters
-                <br /> healthier life by tracking and experiencing life-changing
-                results
-              </p>
-            </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="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 className="container">
+                <div className="section_title" data-aos="fade-up" data-aos-duration="1500" data-aos-delay="100">
+                <h2><span>Features</span> that makes app different!</h2>
+                <p>Fitness Integration with your health plan in your pocket bolsters<br/>healthier life by tracking and experiencing life-changing results.</p>
                 </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 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>
-              <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="right_data feature_box">
+                    <div className="data_block" data-aos="fade-left" data-aos-duration="1500">
 
-export default Main;
+                    <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

src/component/HomeMain/Pricing/Main.js

@@ -1,13 +1,30 @@
 import { Link } from 'react-router-dom'
-import React , { useState} from 'react'
+import React , { useState, useEffect} from 'react'
+import AOS from "aos";
 import img1 from '../../../assets/images/standard.png'
 import img2 from '../../../assets/images/unlimited.png'
 import img3 from '../../../assets/images/premium.png'
 
+import SiteService from '../../../vendors/service/siteService'
+
 const Main = ({gredient , video}) => {
     
     const[tog, setTog] = useState()
 
+    const [prices, setPrices] = useState([]); // initial state for FAQs before API call
+
+    let priceServices = new SiteService(); // instantiating the class
+
+    const getAllPriceData = () => {
+        return priceServices.priceData();
+    };
+
+    useEffect(() => {
+        getAllPriceData().then((data) => setPrices(data.data));
+        AOS.init();
+        AOS.refresh();
+    }, []);
+
   return (
     <>
         {gredient ?
@@ -29,37 +46,52 @@ const Main = ({gredient , video}) => {
 
                     <div className={`pricing_pannel monthly_plan ${tog ? '' : 'active'}`}>
                         <div className="row">
-                            <div className="col-md-4">
-                                <div className="pricing_block">
-                                    <div className="icon">
-                                    <img src="assets/images/standard-one.png" alt="image" />
-                                    </div>
-                                    <div className="pkg_name">
-                                    <h3>Standard</h3>
-                                    <span>For the basics</span>
-                                    </div>
-                                    <span className="price">$15</span>
-                                    <ul className="benifits">
-                                    <li>
-                                        <p>Up to 5 Website</p>
-                                    </li>
-                                    <li>
-                                        <p>50 GB disk space</p>
-                                    </li>
-                                    <li>
-                                        <p>10 Customize sub pages</p>
-                                    </li>
-                                    <li>
-                                        <p>2 Domains access</p>
-                                    </li>
-                                    <li>
-                                        <p>Support on request</p>
-                                    </li>
-                                    </ul>
-                                    <Link to="/faq" className="btn white_btn">BUY NOW</Link>
-                                </div>
-                            </div>
-                            <div className="col-md-4">
+
+                        {prices.length > 0 &&
+                                prices.map((price, index) => {
+                                    if (index % 2 == 0) {
+                                        return (
+                                            <div key={index} className="col-md-4">
+                                                <div className="pricing_block">
+                                                    <div className="icon">
+                                                    { video ? <img src="assets/images/standard-one.png" alt="image" /> : <img src={price.icon} alt="image" /> }
+                                                    </div>
+                                                    <div className="pkg_name">
+                                                    <h3>{price.title}</h3>
+                                                    <span>{price.text}</span>
+                                                    </div>
+                                                    <span className="price">{price.price}</span>
+                                                    <ul className="benifits">
+                                                        {price.features.map((feature, index)=> <p key={index}>{feature}</p>)}
+                                                    </ul>
+                                                    <Link to="/" className="btn white_btn">Start Now</Link>
+                                                </div>
+                                            </div>
+                                        );
+                                    } else {
+                                        return (
+                                            <div key={index} className="col-md-4">
+                                                <div className="pricing_block highlited_block">
+                                                    <div className="icon">
+                                                    { video ? <img src="assets/images/standard-one.png" alt="image" /> : <img src={price.icon} alt="image" /> }
+                                                    </div>
+                                                    <div className="pkg_name">
+                                                    <h3>{price.title}</h3>
+                                                    <span>{price.text}</span>
+                                                    </div>
+                                                    <span className="price">{price.price}</span>
+                                                    <ul className="benifits">
+                                                        {price.features.map((feature, index)=> <p key={index}>{feature}</p>)}
+                                                    </ul>
+                                                    <Link to="/" className="btn white_btn">Start Now</Link>
+                                                </div>
+                                            </div>
+                                        );
+                                    }
+                                })
+                            }
+
+                            {/* <div className="col-md-4">
                                 <div className="pricing_block highlited_block">
                                     <div className="icon">
                                     <img src="assets/images/unlimited-one.png" alt="image"/>
@@ -86,136 +118,60 @@ const Main = ({gredient , video}) => {
                                         <p>24/7 Customer support</p>
                                     </li>
                                     </ul>
-                                    <Link to="/faq" className="btn white_btn">BUY NOW</Link>
+                                    <Link to="/" className="btn white_btn">Start Now</Link>
                                 </div>
-                            </div>
-                            <div className="col-md-4">
-                                <div className="pricing_block">
-                                    <div className="icon">
-                                    <img src="assets/images/premium-one.png" alt="image" />
-                                    </div>
-                                    <div className="pkg_name">
-                                    <h3>Premium</h3>
-                                    <span>For small team</span>
-                                    </div>
-                                    <span className="price">$55</span>
-                                    <ul className="benifits">
-                                    <li>
-                                        <p>Up to 10 Website</p>
-                                    </li>
-                                    <li>
-                                        <p>100 GB disk space</p>
-                                    </li>
-                                    <li>
-                                        <p>15 Customize sub pages</p>
-                                    </li>
-                                    <li>
-                                        <p>4 Domains access</p>
-                                    </li>
-                                    <li>
-                                        <p>24/7 Customer support</p>
-                                    </li>
-                                    </ul>
-                                    <Link to="/faq" className="btn white_btn">BUY NOW</Link>
-                                </div>
-                            </div>
+                            </div> */}
+
                         </div>
                     </div>
 
                     <div className={`pricing_pannel yearly_plan ${tog ? 'active' : ''}`} >
                         <div className="row">
-                            <div className="col-md-4">
-                                <div className="pricing_block">
-                                    <div className="icon">
-                                    <img src="assets/images/standard.png" alt="image" />
-                                    </div>
-                                    <div className="pkg_name">
-                                    <h3>Standard</h3>
-                                    <span>For the basics</span>
-                                    </div>
-                                    <span className="price">$150</span>
-                                    <ul className="benifits">
-                                    <li>
-                                        <p>Up to 10 Website</p>
-                                    </li>
-                                    <li>
-                                        <p>100 GB disk space</p>
-                                    </li>
-                                    <li>
-                                        <p>25 Customize sub pages</p>
-                                    </li>
-                                    <li>
-                                        <p>4 Domains access</p>
-                                    </li>
-                                    <li>
-                                        <p>Support on request</p>
-                                    </li>
-                                    </ul>
-                                    <Link to="/faq" className="btn white_btn">BUY NOW</Link>
-                                </div>
-                            </div>
 
-                            <div className="col-md-4">
-                                <div className="pricing_block highlited_block">
-                                    <div className="icon">
-                                    <img src="assets/images/unlimited.png" alt="image" />
-                                    </div>
-                                    <div className="pkg_name">
-                                    <h3>Unlimited</h3>
-                                    <span>For the professionals</span>
-                                    </div>
-                                    <span className="price">$999</span>
-                                    <ul className="benifits">
-                                    <li>
-                                        <p>Unlimited Website</p>
-                                    </li>
-                                    <li>
-                                        <p>400 GB disk space</p>
-                                    </li>
-                                    <li>
-                                        <p>40 Customize sub pages</p>
-                                    </li>
-                                    <li>
-                                        <p>20 Domains access</p>
-                                    </li>
-                                    <li>
-                                        <p>24/7 Customer support</p>
-                                    </li>
-                                    </ul>
-                                    <Link to="/faq" className="btn white_btn">BUY NOW</Link>
-                                </div>
-                            </div>
+                        {prices.length > 0 &&
+                                prices.map((price, index) => {
+                                    if (index % 2 == 0) {
+                                        return (
+                                            <div key={index} className="col-md-4">
+                                                <div className="pricing_block">
+                                                    <div className="icon">
+                                                    { video ? <img src="assets/images/standard-one.png" alt="image" /> : <img src={price.icon} alt="image" /> }
+                                                    </div>
+                                                    <div className="pkg_name">
+                                                    <h3>{price.title}</h3>
+                                                    <span>{price.text}</span>
+                                                    </div>
+                                                    <span className="price">{price.price}</span>
+                                                    <ul className="benifits">
+                                                        {price.features.map((feature, index)=> <p key={index}>{feature}</p>)}
+                                                    </ul>
+                                                    <Link to="/" className="btn white_btn">Start Now</Link>
+                                                </div>
+                                            </div>
+                                        );
+                                    } else {
+                                        return (
+                                            <div key={index} className="col-md-4">
+                                                <div className="pricing_block highlited_block">
+                                                    <div className="icon">
+                                                    { video ? <img src="assets/images/standard-one.png" alt="image" /> : <img src={price.icon} alt="image" /> }
+                                                    </div>
+                                                    <div className="pkg_name">
+                                                    <h3>{price.title}</h3>
+                                                    <span>{price.text}</span>
+                                                    </div>
+                                                    <span className="price">{price.price}</span>
+                                                    <ul className="benifits">
+                                                        {price.features.map((feature, index)=> <p key={index}>{feature}</p>)}
+                                                    </ul>
+                                                    <Link to="/" className="btn white_btn">Start Now</Link>
+                                                </div>
+                                            </div>
+                                        );
+                                    }
+                                })
+                            }
 
-                            <div className="col-md-4">
-                                <div className="pricing_block">
-                                    <div className="icon">
-                                    <img src="assets/images/premium.png" alt="image" />
-                                    </div>
-                                    <div className="pkg_name">
-                                    <h3>Premium</h3>
-                                    <span>For small team</span>
-                                    </div>
-                                    <span className="price">$550</span>
-                                    <ul className="benifits">
-                                    <li>
-                                        <p>Up to 20 Website</p>
-                                    </li>
-                                    <li>
-                                        <p>200 GB disk space</p>
-                                    </li>
-                                    <li>
-                                        <p>25 Customize sub pages</p>
-                                    </li>
-                                    <li>
-                                        <p>8 Domains access</p>
-                                    </li>
-                                    <li>
-                                        <p>24/7 Customer support</p>
-                                    </li>
-                                    </ul>
-                                    <Link to="/faq" className="btn white_btn">BUY NOW</Link>
-                                </div>
-                            </div>
                         </div>
                     </div>
 
@@ -241,193 +197,101 @@ const Main = ({gredient , video}) => {
 
                     <div className={`pricing_pannel monthly_plan ${tog ? '' : 'active'}`}>
                         <div className="row">
-                            <div className="col-md-4">
-                                <div className="pricing_block">
-                                    <div className="icon">
-                                    { video ? <img src="assets/images/standard-one.png" alt="image" /> : <img src={img1} alt="image" /> }
-                                    </div>
-                                    <div className="pkg_name">
-                                    <h3>Standard</h3>
-                                    <span>For the basics</span>
-                                    </div>
-                                    <span className="price">$15</span>
-                                    <ul className="benifits">
-                                    <li>
-                                        <p>Up to 5 Website</p>
-                                    </li>
-                                    <li>
-                                        <p>50 GB disk space</p>
-                                    </li>
-                                    <li>
-                                        <p>10 Customize sub pages</p>
-                                    </li>
-                                    <li>
-                                        <p>2 Domains access</p>
-                                    </li>
-                                    <li>
-                                        <p>Support on request</p>
-                                    </li>
-                                    </ul>
-                                    <Link to="/faq" className="btn white_btn">BUY NOW</Link>
-                                </div>
-                            </div>
-                            <div className="col-md-4">
-                                <div className="pricing_block highlited_block">
-                                    <div className="icon">
-                                    { video ? <img src="assets/images/unlimited-one.png" alt="image"/> : <img src={img2} alt="image"/> }
-                                    </div>
-                                    <div className="pkg_name">
-                                    <h3>Unlimited</h3>
-                                    <span>For the professionals</span>
-                                    </div>
-                                    <span className="price">$99</span>
-                                    <ul className="benifits">
-                                    <li>
-                                        <p>Unlimited Website</p>
-                                    </li>
-                                    <li>
-                                        <p>200 GB disk space</p>
-                                    </li>
-                                    <li>
-                                        <p>20 Customize sub pages</p>
-                                    </li>
-                                    <li>
-                                        <p>10 Domains access</p>
-                                    </li>
-                                    <li>
-                                        <p>24/7 Customer support</p>
-                                    </li>
-                                    </ul>
-                                    <Link to="/faq" className="btn white_btn">BUY NOW</Link>
-                                </div>
-                            </div>
-                            <div className="col-md-4">
-                                <div className="pricing_block">
-                                    <div className="icon">
-                                    {video ? <img src="assets/images/premium-one.png" alt="image" /> : <img src={img3} alt="image" /> }
-                                    </div>
-                                    <div className="pkg_name">
-                                    <h3>Premium</h3>
-                                    <span>For small team</span>
-                                    </div>
-                                    <span className="price">$55</span>
-                                    <ul className="benifits">
-                                    <li>
-                                        <p>Up to 10 Website</p>
-                                    </li>
-                                    <li>
-                                        <p>100 GB disk space</p>
-                                    </li>
-                                    <li>
-                                        <p>15 Customize sub pages</p>
-                                    </li>
-                                    <li>
-                                        <p>4 Domains access</p>
-                                    </li>
-                                    <li>
-                                        <p>24/7 Customer support</p>
-                                    </li>
-                                    </ul>
-                                    <Link to="/faq" className="btn white_btn">BUY NOW</Link>
-                                </div>
-                            </div>
+
+                            {prices.length > 0 &&
+                                prices.map((price, index) => {
+                                    if (index % 2 == 0) {
+                                        return (
+                                            <div key={index} className="col-md-4">
+                                                <div className="pricing_block">
+                                                    <div className="icon">
+                                                    { video ? <img src="assets/images/standard-one.png" alt="image" /> : <img src={price.icon} alt="image" /> }
+                                                    </div>
+                                                    <div className="pkg_name">
+                                                    <h3>{price.title}</h3>
+                                                    <span>{price.text}</span>
+                                                    </div>
+                                                    <span className="price">{price.price}</span>
+                                                    <ul className="benifits">
+                                                        {price.features.map((feature, index)=> <p key={index}>{feature}</p>)}
+                                                    </ul>
+                                                    <Link to="/" className="btn white_btn">Start Now</Link>
+                                                </div>
+                                            </div>
+                                        );
+                                    } else {
+                                        return (
+                                            <div key={index} className="col-md-4">
+                                                <div className="pricing_block highlited_block">
+                                                    <div className="icon">
+                                                    { video ? <img src="assets/images/standard-one.png" alt="image" /> : <img src={price.icon} alt="image" /> }
+                                                    </div>
+                                                    <div className="pkg_name">
+                                                    <h3>{price.title}</h3>
+                                                    <span>{price.text}</span>
+                                                    </div>
+                                                    <span className="price">{price.price}</span>
+                                                    <ul className="benifits">
+                                                        {price.features.map((feature, index)=> <p key={index}>{feature}</p>)}
+                                                    </ul>
+                                                    <Link to="/" className="btn white_btn">Start Now</Link>
+                                                </div>
+                                            </div>
+                                        );
+                                    }
+                                })
+                            }
+
                         </div>
                     </div>
 
                     <div className={`pricing_pannel yearly_plan ${tog ? 'active' : ''}`} >
                         <div className="row">
-                            <div className="col-md-4">
-                                <div className="pricing_block">
-                                    <div className="icon">
-                                    { video ? <img src="assets/images/standard-one.png" alt="image" /> : <img src={img1} alt="image" /> }
-                                    </div>
-                                    <div className="pkg_name">
-                                    <h3>Standard</h3>
-                                    <span>For the basics</span>
-                                    </div>
-                                    <span className="price">$150</span>
-                                    <ul className="benifits">
-                                    <li>
-                                        <p>Up to 10 Website</p>
-                                    </li>
-                                    <li>
-                                        <p>100 GB disk space</p>
-                                    </li>
-                                    <li>
-                                        <p>25 Customize sub pages</p>
-                                    </li>
-                                    <li>
-                                        <p>4 Domains access</p>
-                                    </li>
-                                    <li>
-                                        <p>Support on request</p>
-                                    </li>
-                                    </ul>
-                                    <Link to="/faq" className="btn white_btn">BUY NOW</Link>
-                                </div>
-                            </div>
 
-                            <div className="col-md-4">
-                                <div className="pricing_block highlited_block">
-                                    <div className="icon">
-                                    { video ? <img src="assets/images/unlimited-one.png" alt="image"/> : <img src={img2}alt="image"/> }
-                                    </div>
-                                    <div className="pkg_name">
-                                    <h3>Unlimited</h3>
-                                    <span>For the professionals</span>
-                                    </div>
-                                    <span className="price">$999</span>
-                                    <ul className="benifits">
-                                    <li>
-                                        <p>Unlimited Website</p>
-                                    </li>
-                                    <li>
-                                        <p>400 GB disk space</p>
-                                    </li>
-                                    <li>
-                                        <p>40 Customize sub pages</p>
-                                    </li>
-                                    <li>
-                                        <p>20 Domains access</p>
-                                    </li>
-                                    <li>
-                                        <p>24/7 Customer support</p>
-                                    </li>
-                                    </ul>
-                                    <Link to="/faq" className="btn white_btn">BUY NOW</Link>
-                                </div>
-                            </div>
+                        {prices.length > 0 &&
+                                prices.map((price, index) => {
+                                    if (index % 2 == 0) {
+                                        return (
+                                            <div key={index} className="col-md-4">
+                                                <div className="pricing_block">
+                                                    <div className="icon">
+                                                    { video ? <img src="assets/images/standard-one.png" alt="image" /> : <img src={price.icon} alt="image" /> }
+                                                    </div>
+                                                    <div className="pkg_name">
+                                                    <h3>{price.title}</h3>
+                                                    <span>{price.text}</span>
+                                                    </div>
+                                                    <span className="price">{price.price}</span>
+                                                    <ul className="benifits">
+                                                        {price.features.map((feature, index)=> <p key={index}>{feature}</p>)}
+                                                    </ul>
+                                                    <Link to="/" className="btn white_btn">Start Now</Link>
+                                                </div>
+                                            </div>
+                                        );
+                                    } else {
+                                        return (
+                                            <div key={index} className="col-md-4">
+                                                <div className="pricing_block highlited_block">
+                                                    <div className="icon">
+                                                    { video ? <img src="assets/images/standard-one.png" alt="image" /> : <img src={price.icon} alt="image" /> }
+                                                    </div>
+                                                    <div className="pkg_name">
+                                                    <h3>{price.title}</h3>
+                                                    <span>{price.text}</span>
+                                                    </div>
+                                                    <span className="price">{price.price}</span>
+                                                    <ul className="benifits">
+                                                        {price.features.map((feature, index)=> <p key={index}>{feature}</p>)}
+                                                    </ul>
+                                                    <Link to="/" className="btn white_btn">Start Now</Link>
+                                                </div>
+                                            </div>
+                                        );
+                                    }
+                                })
+                            }
 
-                            <div className="col-md-4">
-                                <div className="pricing_block">
-                                    <div className="icon">
-                                    {video ? <img src="assets/images/premium-one.png" alt="image" /> : <img src={img3} alt="image" /> }
-                                    </div>
-                                    <div className="pkg_name">
-                                    <h3>Premium</h3>
-                                    <span>For small team</span>
-                                    </div>
-                                    <span className="price">$550</span>
-                                    <ul className="benifits">
-                                    <li>
-                                        <p>Up to 20 Website</p>
-                                    </li>
-                                    <li>
-                                        <p>200 GB disk space</p>
-                                    </li>
-                                    <li>
-                                        <p>25 Customize sub pages</p>
-                                    </li>
-                                    <li>
-                                        <p>8 Domains access</p>
-                                    </li>
-                                    <li>
-                                        <p>24/7 Customer support</p>
-                                    </li>
-                                    </ul>
-                                    <Link to="/faq" className="btn white_btn">BUY NOW</Link>
-                                </div>
-                            </div>
                         </div>
                     </div>
 

src/component/HomeMain/Work/Main.js

@@ -20,8 +20,7 @@ const Main = ({dark}) => {
                 <div className={`how_it_inner ${dark && "dark"}`}>
                     <div className="section_title" data-aos="fade-up" data-aos-duration="1500" data-aos-delay="300">
                         <h2><span>How it works</span> - 3 easy steps</h2>
-                        <p>Lorem Ipsum is simply dummy text of the printing and typese tting <br/> indus orem Ipsum has beenthe
-                        standard dummy.</p>
+                        <p>myFit has powerful connectivity, fitness, health, and safety features,<br/> Also makes provision Fitness tracking,Workout tracking,Heart rate monitoring.</p>
                     </div>
                     <div className="step_block">
                         <ul>
@@ -57,7 +56,7 @@ const Main = ({dark}) => {
                             <li>
                                 <div className="step_text" data-aos="fade-right" data-aos-duration="1500">
                                 <h4>It’s done, enjoy the app</h4>
-                                <span>Have any questions check our <Link to="#">FAQs</Link></span>
+                                <span>Have any questions check our <Link to="/faq">FAQs</Link></span>
                                 <p>Get most amazing app experience,Explore and share the app</p>
                                 </div>
                                 <div className="step_number">

src/component/Pages/Faq/Main.js

@@ -5,9 +5,23 @@ import BGImg from "../../../assets/images/bread_crumb_bg.png"
 import BGImg1 from "../../../assets/images/bread_crumb_bg_one.png"
 import BGImg2 from "../../../assets/images/bread_crumb_bg_two.png"
 
+import SiteService from '../../../vendors/service/siteService'
+
 const Main = ({brdcum}) => {
 
-    const[activeFaq, setActiveFaq] = useState({a : true})
+    const[activeFaq, setActiveFaq] = useState({btn0 : false})
+
+    const [faqs, setFaqs] = useState([]); // initial state for FAQs before API call
+
+    let faqServices = new SiteService(); // instantiating the class
+
+    const allFaqData = () => {
+        return faqServices.faqData();
+    };
+
+    useEffect(() => {
+        allFaqData().then((data) => setFaqs(data.data));
+    }, []);
   return (
     <>
         {brdcum.b1 && 
@@ -54,7 +68,8 @@ const Main = ({brdcum}) => {
             <div className="container">
                 <div className="faq_panel">
                     <div className="accordion" id="accordionExample">
-                        <div className="card" data-aos="fade-up" >
+
+                        {/* <div className="card" data-aos="fade-up" >
                             <div className="card-header" id="headingOne">
                                 <h2 className="mb-0">
                                 <button type="button" className={`btn btn-link ${activeFaq.a && "active"}`} onClick= {() => setActiveFaq(activeFaq.a ? {a : false} : {a : true})} data-toggle="collapse" data-target="#collapseOne">
@@ -69,8 +84,9 @@ const Main = ({brdcum}) => {
                                     leap into electronic typesetting, remaining essentially unchanged.</p>
                                 </div>
                             </div>
-                        </div>
-                        <div className="card" data-aos="fade-up" >
+                        </div> */}
+
+                        {/* <div className="card" data-aos="fade-up" >
                             <div className="card-header" id="headingTwo">
                                 <h2 className="mb-0">
                                 <button type="button" className={`btn btn-link collapsed ${activeFaq.b && "active"}`} onClick= {() => setActiveFaq(activeFaq.b ? {b : false} : {b : true})} data-toggle="collapse"
@@ -85,9 +101,9 @@ const Main = ({brdcum}) => {
                                     leap into electronic typesetting, remaining essentially unchanged.</p>
                                 </div>
                             </div>
-                        </div>
+                        </div> */}
 
-                        <div className="card" data-aos="fade-up" >
+                        {/* <div className="card" data-aos="fade-up" >
                             <div className="card-header" id="headingThree">
                                 <h2 className="mb-0">
                                 <button type="button" className={`btn btn-link collapsed ${activeFaq.c && "active"}`} onClick= {() => setActiveFaq(activeFaq.c ? {c : false} : {c : true})} data-toggle="collapse"
@@ -103,9 +119,9 @@ const Main = ({brdcum}) => {
                                     leap into electronic typesetting, remaining essentially unchanged.</p>
                                 </div>
                             </div>
-                        </div>
+                        </div> */}
 
-                        <div className="card" data-aos="fade-up" >
+                        {/* <div className="card" data-aos="fade-up" >
                             <div className="card-header" id="headingFour">
                                 <h2 className="mb-0">
                                 <button type="button" className={`btn btn-link collapsed ${activeFaq.d && "active"}`} onClick= {() => setActiveFaq(activeFaq.d ? {d : false} : {d : true})} data-toggle="collapse"
@@ -122,9 +138,9 @@ const Main = ({brdcum}) => {
                                     leap into electronic typesetting, remaining essentially unchanged.</p>
                                 </div>
                             </div>
-                        </div>
+                        </div> */}
 
-                        <div className="card" data-aos="fade-up" >
+                        {/* <div className="card" data-aos="fade-up" >
                             <div className="card-header" id="headingFive">
                                 <h2 className="mb-0">
                                 <button type="button" className={`btn btn-link collapsed ${activeFaq.e && "active"}`} onClick= {() => setActiveFaq(activeFaq.e ? {e : false} : {e : true})} data-toggle="collapse"
@@ -141,9 +157,9 @@ const Main = ({brdcum}) => {
                                     leap into electronic typesetting, remaining essentially unchanged.</p>
                                 </div>
                             </div>
-                        </div>
+                        </div> */}
 
-                        <div className="card" data-aos="fade-up" >
+                        {/* <div className="card" data-aos="fade-up" >
                             <div className="card-header" id="headingSix">
                                 <h2 className="mb-0">
                                 <button type="button" className={`btn btn-link collapsed ${activeFaq.f && "active"}`} onClick= {() => setActiveFaq(activeFaq.f ? {f : false} : {f : true})} data-toggle="collapse"
@@ -160,9 +176,9 @@ const Main = ({brdcum}) => {
                                     leap into electronic typesetting, remaining essentially unchanged.</p>
                                 </div>
                             </div>
-                        </div>
+                        </div> */}
 
-                        <div className="card" data-aos="fade-up" >
+                        {/* <div className="card" data-aos="fade-up" >
                             <div className="card-header" id="headingSeven">
                                 <h2 className="mb-0">
                                 <button type="button" className={`btn btn-link collapsed ${activeFaq.g && "active"}`} onClick= {() => setActiveFaq(activeFaq.g ? {g : false} : {g : true})} data-toggle="collapse"
@@ -179,7 +195,33 @@ const Main = ({brdcum}) => {
                                     leap into electronic typesetting, remaining essentially unchanged.</p>
                                 </div>
                             </div>
+                        </div> */}
+
+                    {/* displays loading ... while the page fetches the FAQs */}
+                    {faqs.length < 1 && <h3>Loading...</h3>}
+
+                    {faqs.length > 0 && faqs.map((faq, index) => {
+                        let id = `heading${index}`; //headingSeven
+                        let target = `collapse${index}`; //#collapseSeven
+
+                        return(
+                        <div key={index} className="card" data-aos="fade-up" >
+                            <div className="card-header" id={id}>
+                                <h2 className="mb-0">
+                                <button type="button" className={`btn btn-link collapsed ${activeFaq.b && "active"}`} data-toggle="collapse"
+                                    data-target={`#${target}`}>{activeFaq.b ? <i className="icon_faq icofont-minus"></i>  : <i className="icon_faq icofont-plus"></i>}{faq.title}
+                                </button>
+                                </h2>
+                            </div>
+
+                            <div id={target} className="collapse" aria-labelledby={id} data-parent="#accordionExample">
+                                <div className="card-body">
+                                    <p>{faq.text}</p>
+                                </div>
+                            </div>
                         </div>
+                        )
+                    })}
                     </div>
                 </div>
             </div>

src/vendors/service/siteService.js

@@ -5,15 +5,28 @@ class SiteService {
   constructor() {
     console.log("Er are here anyway");
   }
+  // Blog Data {Get}
   blogData() {
     return this.getAuxEnd("blogdata", null);
   }
 
+  // Country Data {GET}
   countryData() {
     return this.getAuxEnd("/country", null);
   }
 
-  faqData() {}
+  // Contact Data{POST}
+  contactData() {
+    return this.postAuxEnd("/contact", null)
+  }
+
+  faqData() {
+    return this.getAuxEnd("/faq", null);
+  }
+
+  priceData() {
+    return this.getAuxEnd("/pricing", null);
+  }
   
   //----------------------------------------  -----
   //----------------------------------------  -----
@@ -45,7 +58,7 @@ class SiteService {
 
   postAuxEnd(uri, reqData) {
     const endPoint = process.env.REACT_APP_AUX_ENDPOINT + uri;
-    Axios.post(endPoint)
+    return Axios.post(endPoint, reqData)
       .then((response) => {
         console.log(response);
         // res = response;