footer tel_link direct

.env

@@ -1,6 +1,6 @@
 REACT_APP_US_ADDRESS="USA: 32 Oatgrass Dr, Grayson GA 30017"
 REACT_APP_US_PHONE="(415) 251 7583"
-REACT_APP_SUPPORT_EMAIL="support@mermsemr.com"
+REACT_APP_SUPPORT_EMAIL="support@myfit.ai"
 REACT_APP_YEAR=2023
 REACT_APP_ANDROID_URL="https://play.google.com/store/apps/details?id=com.mermsemr.myfit"
 REACT_APP_IOS_URL="https://play.google.com/store/apps/details?id=com.mermsemr.myfit"
@@ -15,7 +15,7 @@ REACT_APP_FACEBOOK="https://www.facebook.com/profile.php?id=100066498622246"
 REACT_APP_TWITTER="https://twitter.com/fluxtra"
 
 
-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_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/"

.env.development

@@ -0,0 +1,21 @@
+REACT_APP_US_ADDRESS="USA: 32 Oatgrass Dr, Grayson GA 30017"
+REACT_APP_US_PHONE="(415) 251 7583"
+REACT_APP_SUPPORT_EMAIL="support@myfit.ai"
+REACT_APP_YEAR=2023
+REACT_APP_ANDROID_URL="https://play.google.com/store/apps/details?id=com.mermsemr.myfit"
+REACT_APP_IOS_URL="https://play.google.com/store/apps/details?id=com.mermsemr.myfit"
+
+
+REACT_APP_APPSITE="https://dev142.users.myfit.mermsemr.com/login"
+# " https://mermsemr.com"
+#REACT_APP_APPSITE="http://localhost:7012"
+
+# Social Media Links
+REACT_APP_FACEBOOK="https://www.facebook.com/profile.php?id=100066498622246"
+REACT_APP_TWITTER="https://twitter.com/fluxtra"
+
+
+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/"

Dockerfile

@@ -1,6 +1,9 @@
 # pull the base image
 FROM node:alpine
 
+# Build args
+ARG NODE_ENV
+
 # set the working direction
 #WORKDIR /app
 WORKDIR /usr/src/app
@@ -8,6 +11,7 @@ WORKDIR /usr/src/app
 # add `/app/node_modules/.bin` to $PATH
 # ENV PATH /app/node_modules/.bin:$PATH
 ENV PATH /usr/src/app/node_modules/.bin:$PATH
+ENV NODE_ENV=$NODE_ENV
 
 # install app dependencies
 COPY package.json ./
@@ -20,4 +24,4 @@ RUN npm install
 COPY . ./
 
 # start app
-CMD ["npm", "start"]
+CMD ["npm", "start"]

docker-compose.yml

@@ -1,9 +1,12 @@
 version: '3'
 services:
   myfit-www:
+    image: registry.myfit.ai/www-myfit:latest
     build:
       context: .
       dockerfile: Dockerfile
+      args:
+        - NODE_ENV=production
     restart: unless-stopped
     ports:
       - 7010:3000
@@ -19,6 +22,7 @@ services:
       - apigateway.wrenchboard.app.lotus.fluxtra.net:172.31.4.19
     environment:
       - CHOKIDAR_USEPOLLING=true
+      - NODE_ENV=${NODE_ENV:-production}
 volumes:
   src:
-  public:
+  public:

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/assets/css/style.css

@@ -2776,6 +2776,17 @@ header.fix_style.white_header {
 .about_page_sectino img {
   max-width: 100%;
 }
+.about_page_sectino .abt_img img {
+  animation: scale;
+  animation-duration: 1s;
+  animation-timing-function: linear;
+  animation-iteration-count: infinite;
+}
+@keyframes scale {
+  0%{transform: scale(1);}
+  50%{transform: scale(1.01);}
+  100%{transform: scale(1);}
+}
 
 /* -----------experts_team_sectio---------- */
 
@@ -3609,11 +3620,11 @@ header.fix_style.white_header {
   display: flex;
   flex-direction: column;
   align-content: center;
-  justify-content: center;
+  justify-items: center;
   gap: 10px;
 }
 
-.contact_body {
+/* .contact_body {
   display: flex;
   flex-direction: column;
   align-content: center;
@@ -3622,24 +3633,25 @@ header.fix_style.white_header {
   font-size: 20px;
   font-weight: 800;
   text-align: center;
-}
+} */
 
 /* Animations */
-.animate.pop {
+.animate-image {
   animation-name: animate-pop;
-  animation-timing-function: cubic-bezier(0.26, 0.53, 0.74, 1.48);
-  animation-duration: 0.5s;
+  animation-timing-function: linear;
+  animation-duration: 1s;
+  animation-fill-mode: forwards;
 }
 
 @keyframes animate-pop {
   0% {
     opacity: 0;
-    transform: scale(0.5, 0.5);
+    transform: scale(0.5);
   }
 
   100% {
     opacity: 1;
-    transform: scale(1, 1);
+    transform: scale(1);
   }
 }
 

src/component/AboutUs/Main.js

@@ -10,6 +10,8 @@ import About1 from '../../assets/images/about_one.png'
 import About2 from '../../assets/images/about_two.png'
 import About3 from '../../assets/images/about_three.png'
 
+import AboutMainImg from '../../assets/images/about_main_image.png'
+
 const Main = ({brdcum}) => {
     const [ytShow , setytShow] = useState (false)
 
@@ -27,7 +29,7 @@ const Main = ({brdcum}) => {
         title3: 'Ease of Use',
         title4: 'Support'
     }
-    let queryDesc = 'If you have an query, please get in touch with us, we will revert back quickly.'
+    let queryDesc = 'If you have any questions, please get in touch with us, we will revert back quickly.'
     
   return (
     <>       
@@ -171,7 +173,7 @@ const Main = ({brdcum}) => {
                 <div className="row">
                     <div className="col-lg-6">
                         <div className="abt_img" data-aos="fade-in" data-aos-duration="1500">
-                            <img src="assets/images/about_main.png" alt="image"/>
+                            <img src={AboutMainImg} alt="image"/>
                         </div>
                     </div>
                     <div className="col-lg-6">
@@ -235,7 +237,7 @@ const Main = ({brdcum}) => {
                     <span className="banner_shape3"> <img src="assets/images/banner-shape3.png" alt="image" /> </span>
                 
                     <div className="section_title">
-                        <h2>Have any query about ?</h2>
+                        <h2>Have any questions about ?</h2>
                         <p>{queryDesc}</p>
                     </div>
                     <Link to="/contact" className="btn white_btn">CONTACT US NOW</Link>

src/component/Contact/Main.js

@@ -6,7 +6,7 @@ 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 SuccessImg from "../../assets/images/confirmed-letter.jpg"
 
 import SiteService from "../../vendors/service/siteService";
 
@@ -51,10 +51,11 @@ const FormInput = (props) => {
 
 const Main = ({ brdcum }) => {
   let response = document.getElementById("contact_loader");
-  let contact_body = document.getElementById("contact_body");
   let errText = document.getElementById("errText");
   let navigate = useNavigate();
 
+  let [showSuccessfulImage, setShowSuccessfulImage] = useState(false) // Handles when sucess image is shown
+
   // Form Validation
   const [values, setValues] = useState({
     name: "",
@@ -100,10 +101,8 @@ const Main = ({ brdcum }) => {
         }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>`;
+          setShowSuccessfulImage(true) // sets show success image to true
+
           setTimeout(() => {
             navigate("/");
           }, 10000);
@@ -177,107 +176,114 @@ const Main = ({ brdcum }) => {
         id="contact">
         <div className="container">
           <div className="contact_inner">
-            <div
-              className="contact_form"
-              id="contact_body">
-              <div className="section_title">
-                <h2>
-                  <span>Leave a</span> message
-                </h2>
-                <p>Fill up form below, our team will get back soon</p>
-              </div>
-
-              {/* Contact Form */}
-              <form onSubmit={handleSubmit}>
-                <FormInput
-                  name="name"
-                  type="text"
-                  placeholder="Name"
-                  errorMessage="Please enter your first and last name. (e.g: Mark John)"
-                  required={true}
-                  maxLenght={35}
-                  value={values.name}
-                  onChange={onChange}
-                  pattern="^\w+( \w+)$"
-                />
-
-                <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"
-                    name="country"
-                    value={values.country}
-                    onChange={onChange}
-                    required>
-                    <option value={""}>
-                      Country
-                    </option>
-                    {countries.length > 0 &&
-                      countries.map((country, index) => (
-                        <option
-                          key={index}
-                          value={country[0]}>
-                          {country[1]}
-                        </option>
-                      ))}
-                  </select>
+            <div className="contact_form" id="contact_body">
+              {showSuccessfulImage ? (
+                <>
+                  <div><img className="img-fluid animate-image" src={SuccessImg} alt='success image' /></div>
+                  <p>We have received your message and will follow up promptly.</p>
+                </>
+              ) : (
+                <>
+                <div className="section_title">
+                  <h2>
+                    <span>Leave a</span> message
+                  </h2>
+                  <p>Fill up form below, our team will get back soon</p>
                 </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="message"
-                    className="form-control"
-                    placeholder="Your message"
-                    value={values.message}
+                {/* Contact Form */}
+                <form onSubmit={handleSubmit}>
+                  <FormInput
+                    name="name"
+                    type="text"
+                    placeholder="Name"
+                    errorMessage="Please enter your first and last name. (e.g: Mark John)"
+                    required={true}
+                    maxLenght={35}
+                    value={values.name}
                     onChange={onChange}
-                    maxLength={300}
-                    pattern="^[A-Za-z0-9]{5, 300}$"
+                    pattern="^\w+( \w+)$"
                   />
-                </div>
-                <div className="form-group term_check">
-                  <input
-                    type="checkbox"
-                    id="term"
+
+                  <FormInput
+                    name="email"
+                    type="email"
+                    placeholder="Email"
+                    errorMessage="It should be a valid email address!"
+                    required={true}
+                    maxLenght={35}
+                    value={values.email}
                     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 contact_btn"
-                    aria-label="submit form"
-                    id="contact_loader">
-                    <p> SEND MESSAGE </p>
-                  </button>
-                </div>
-              </form>
-              {/* Error Tag */}
-              <p id="errText"></p>
+
+                  <div className="form-group">
+                    <select
+                      className="form-control"
+                      name="country"
+                      value={values.country}
+                      onChange={onChange}
+                      required>
+                      <option value={""}>
+                        Country
+                      </option>
+                      {countries.length > 0 &&
+                        countries.map((country, index) => (
+                          <option
+                            key={index}
+                            value={country[0]}>
+                            {country[1]}
+                          </option>
+                        ))}
+                    </select>
+                  </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="message"
+                      className="form-control"
+                      placeholder="Your message"
+                      value={values.message}
+                      onChange={onChange}
+                      maxLength={300}
+                      pattern="^[A-Za-z0-9]{5, 300}$"
+                    />
+                  </div>
+                  <div className="form-group term_check">
+                    <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 contact_btn"
+                      aria-label="submit form"
+                      id="contact_loader">
+                      <p> SEND MESSAGE </p>
+                    </button>
+                  </div>
+                </form>
+                {/* Error Tag */}
+                <p id="errText"></p>
+                </>
+              )}
             </div>
 
             {/* Contact Info */}

src/component/Footer/Main.js

@@ -52,12 +52,18 @@ const Main = ({ footer }) => {
                     </div>
                     <ul>
                       <li>
-                        <Link to="#">
+                        {/* <Link to="#">
                           {process.env.REACT_APP_SUPPORT_EMAIL}
-                        </Link>
+                        </Link> */}
+                        <a href={`mailto: ${process.env.REACT_APP_SUPPORT_EMAIL}`}>
+                          {process.env.REACT_APP_SUPPORT_EMAIL}
+                        </a>
                       </li>
                       <li>
-                        <Link to="#">{process.env.REACT_APP_US_PHONE}</Link>
+                        {/* <Link to="#">{process.env.REACT_APP_US_PHONE}</Link> */}
+                        <a href={`tel: ${process.env.REACT_APP_US_PHONE}`}>
+                          {process.env.REACT_APP_US_PHONE}
+                        </a>
                       </li>
                     </ul>
                     <ul className="social_media">
@@ -191,12 +197,18 @@ const Main = ({ footer }) => {
                     </div>
                     <ul>
                       <li>
-                        <Link to="#">
+                        {/* <Link to="#">
                           {process.env.REACT_APP_SUPPORT_EMAIL}
-                        </Link>
+                        </Link> */}
+                        <a href={`mailto: ${process.env.REACT_APP_SUPPORT_EMAIL}`}>
+                          {process.env.REACT_APP_SUPPORT_EMAIL}
+                        </a>
                       </li>
                       <li>
-                        <Link to="#">{process.env.REACT_APP_US_PHONE}</Link>
+                        {/* <Link to="#">{process.env.REACT_APP_US_PHONE}</Link> */}
+                        <a href={`tel: ${process.env.REACT_APP_US_PHONE}`}>
+                          {process.env.REACT_APP_US_PHONE}
+                        </a>
                       </li>
                     </ul>
                     <ul className="social_media">
@@ -314,12 +326,18 @@ const Main = ({ footer }) => {
                     </div>
                     <ul>
                       <li>
-                        <Link to="#">
+                        {/* <Link to="#">
                           {process.env.REACT_APP_SUPPORT_EMAIL}
-                        </Link>
+                        </Link> */}
+                        <a href={`mailto: ${process.env.REACT_APP_SUPPORT_EMAIL}`}>
+                          {process.env.REACT_APP_SUPPORT_EMAIL}
+                        </a>
                       </li>
                       <li>
-                        <Link to="#">{process.env.REACT_APP_US_PHONE}</Link>
+                        {/* <Link to="#">{process.env.REACT_APP_US_PHONE}</Link> */}
+                        <a href={`tel: ${process.env.REACT_APP_US_PHONE}`}>
+                          {process.env.REACT_APP_US_PHONE}
+                        </a>
                       </li>
                     </ul>
                     <ul className="social_media">
@@ -439,12 +457,18 @@ const Main = ({ footer }) => {
                     </div>
                     <ul>
                       <li>
-                        <Link to="#">
+                        {/* <Link to="#">
                           {process.env.REACT_APP_SUPPORT_EMAIL}
-                        </Link>
+                        </Link> */}
+                        <a href={`mailto: ${process.env.REACT_APP_SUPPORT_EMAIL}`}>
+                          {process.env.REACT_APP_SUPPORT_EMAIL}
+                        </a>
                       </li>
                       <li>
-                        <Link to="#">{process.env.REACT_APP_US_PHONE}</Link>
+                        {/* <Link to="#">{process.env.REACT_APP_US_PHONE}</Link> */}
+                        <a href={`tel: ${process.env.REACT_APP_US_PHONE}`}>
+                          {process.env.REACT_APP_US_PHONE}
+                        </a>
                       </li>
                     </ul>
                     <ul className="social_media">
@@ -572,12 +596,18 @@ const Main = ({ footer }) => {
                     </div>
                     <ul>
                       <li>
-                        <Link to="#">
+                        {/* <Link to="#">
                           {process.env.REACT_APP_SUPPORT_EMAIL}
-                        </Link>
+                        </Link> */}
+                        <a href={`mailto: ${process.env.REACT_APP_SUPPORT_EMAIL}`}>
+                          {process.env.REACT_APP_SUPPORT_EMAIL}
+                        </a>
                       </li>
                       <li>
-                        <Link to="#">{process.env.REACT_APP_US_PHONE}</Link>
+                        {/* <Link to="#">{process.env.REACT_APP_US_PHONE}</Link> */}
+                        <a href={`tel: ${process.env.REACT_APP_US_PHONE}`}>
+                          {process.env.REACT_APP_US_PHONE}
+                        </a>
                       </li>
                     </ul>
                     <ul className="social_media">

src/component/HomeMain/Faq/Main.js

@@ -27,73 +27,7 @@ const Main = ({gredient}) => {
                     <p>Organizing all types of wellness activity you desire.<br/>Proven step to increase pleasure and commitment.</p>
                 </div>
                 <div className="faq_panel">
-                    <div className="accordion" id="accordionExample">
-                        {/* <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">
-                                {activeFaq.a ? <i className="icon_faq icofont-minus"></i>  : <i className="icon_faq icofont-plus"></i>} How can i pay ?</button>
-                                </h2>
-                            </div>
-                            <div id="collapseOne" className="collapse show" aria-labelledby="headingOne" data-parent="#accordionExample">
-                                <div className="card-body">
-                                <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry lorem Ipsum has. been the
-                                    industrys standard dummy text ever since the when an unknown printer took a galley of type and
-                                    scrambled it to make a type specimen book. It has survived not only five cen turies but also the
-                                    leap into electronic typesetting, remaining essentially unchanged.</p>
-                                </div>
-                            </div>
-                        </div>
-                        <div className="card" data-aos="fade-up" data-aos-duration="1500">
-                            <div className="card-header" id="headingTwo">
-                                <h2 className="mb-0">
-                                <button type="button" className={`btn btn-link ${activeFaq.b && "active"}`} onClick= {() => setActiveFaq(activeFaq.b ? {b : false} : {b : true})} data-toggle="collapse"
-                                    data-target="#collapseTwo">{activeFaq.b ? <i className="icon_faq icofont-minus"></i>  : <i className="icon_faq icofont-plus"></i>} How to setup account ?</button>
-                                </h2>
-                            </div>
-                            <div id="collapseTwo" className="collapse" aria-labelledby="headingTwo" data-parent="#accordionExample">
-                                <div className="card-body">
-                                <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry lorem Ipsum has. been the
-                                    industrys standard dummy text ever since the when an unknown printer took a galley of type and
-                                    scrambled it to make a type specimen book. It has survived not only five cen turies but also the
-                                    leap into electronic typesetting, remaining essentially unchanged.</p>
-                                </div>
-                            </div>
-                        </div>
-                        <div className="card" data-aos="fade-up" data-aos-duration="1500">
-                            <div className="card-header" id="headingThree">
-                                <h2 className="mb-0">
-                                <button type="button" className={`btn btn-link ${activeFaq.c && "active"}`} onClick= {() => setActiveFaq(activeFaq.c ? {c : false} : {c : true})} data-toggle="collapse"
-                                    data-target="#collapseThree">{activeFaq.c ? <i className="icon_faq icofont-minus"></i>  : <i className="icon_faq icofont-plus"></i>}What is process to get refund
-                                    ?</button>
-                                </h2>
-                            </div>
-                            <div id="collapseThree" className="collapse" aria-labelledby="headingThree" data-parent="#accordionExample">
-                                <div className="card-body">
-                                <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry lorem Ipsum has. been the
-                                    industrys standard dummy text ever since the when an unknown printer took a galley of type and
-                                    scrambled it to make a type specimen book. It has survived not only five cen turies but also the
-                                    leap into electronic typesetting, remaining essentially unchanged.</p>
-                                </div>
-                            </div>
-                        </div>
-                        <div className="card" data-aos="fade-up" data-aos-duration="1500">
-                            <div className="card-header" id="headingFour">
-                                <h2 className="mb-0">
-                                <button type="button" className={`btn btn-link ${activeFaq.d && "active"}`} onClick= {() => setActiveFaq(activeFaq.d ? {d : false} : {d : true})} data-toggle="collapse"
-                                    data-target="#collapseFour">{activeFaq.d ? <i className="icon_faq icofont-minus"></i>  : <i className="icon_faq icofont-plus"></i>}What is process to get refund
-                                    ?</button>
-                                </h2>
-                            </div>
-                            <div id="collapseFour" className="collapse" aria-labelledby="headingFour" data-parent="#accordionExample">
-                                <div className="card-body">
-                                <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry lorem Ipsum has. been the
-                                    industrys standard dummy text ever since the when an unknown printer took a galley of type and
-                                    scrambled it to make a type specimen book. It has survived not only five cen turies but also the
-                                    leap into electronic typesetting, remaining essentially unchanged.</p>
-                                </div>
-                            </div>
-                        </div> */}
+                    <div className="accordion" id="accordionMyfitFaq">
 
                         {/* displays loading ... while the page fetches the FAQs */}
                         {faqs.length < 1 && <h3>Loading...</h3>}
@@ -112,7 +46,7 @@ const Main = ({gredient}) => {
                                     </h2>
                                 </div>
 
-                                <div id={target} className="collapse" aria-labelledby={id} data-parent="#accordionExample">
+                                <div id={target} className="collapse" aria-labelledby={id} data-parent="#accordionMyfitFaq">
                                     <div className="card-body">
                                         <p>{faq.text}</p>
                                     </div>

src/component/HomeMain/Features/Main.js

@@ -8,63 +8,7 @@ import img5 from '../../../assets/images/features_frame.png'
 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>
-                </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">
+        {<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>
@@ -76,14 +20,14 @@ const Main = ({video}) => {
     
                     <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>
+                        <p>myFit continuously help you organize both general and the few health questions relevant to you. </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>
+                        <p>Collect your health statistics yourself, weight changes, blood pressure, blood glucose or data that fits you specifically.</p>
                     </div>
                     </div>
                 </div>

src/component/HomeMain/Pricing/Main.js

@@ -8,11 +8,13 @@ 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
 
+    const [pricing_text_02, setPricingtext02] = useState('');
+
     let priceServices = new SiteService(); // instantiating the class
 
     const getAllPriceData = () => {
@@ -20,7 +22,9 @@ const Main = ({gredient , video}) => {
     };
 
     useEffect(() => {
-        getAllPriceData().then((data) => setPrices(data.data));
+        getAllPriceData().then((data) => {
+            setPricingtext02(data.data.pricing_text_02);
+            setPrices(data.data.pricing) });
         AOS.init();
         AOS.refresh();
     }, []);
@@ -31,9 +35,13 @@ const Main = ({gredient , video}) => {
             <section className="row_am pricing_section gredient-pricing" id="pricing">
                 <div className="container">
                     <div className="section_title" data-aos="fade-up" data-aos-duration="1500" data-aos-delay="300">
-                    <h2>Best & simple <span>pricing</span></h2>
-                    <p className="gredient-p">Lorem Ipsum is simply dummy text of the printing and typese tting <br/> indus orem Ipsum has beenthe
-                        standard dummy.</p>
+                    <h2>Flexible & Simple <span>pricing</span></h2>
+                    <p className="gredient-p">
+                    {/*    <>*/}
+                    {/*    {pricing_text_02}*/}
+                    {/*</>*/}
+                         Choose your myFit Pricing Plan <br/> myFit has a free Standard for Basics , $5 per month for Premium <br />
+                        and $7.99 per month for Gold-tier</p>
                     </div>
                     <div className="toggle_block" data-aos="fade-up" data-aos-duration="1500">
                         <span className={`month ${tog ? 'active' : ''}`}>Monthly</span>
@@ -140,9 +148,9 @@ const Main = ({gredient , video}) => {
             <section className="row_am pricing_section" id="pricing">
                 <div className="container">
                     <div className="section_title" data-aos="fade-up" data-aos-duration="1500" data-aos-delay="300">
-                    <h2>Best & simple <span>pricing</span></h2>
-                    <p>Lorem Ipsum is simply dummy text of the printing and typese tting <br/> indus orem Ipsum has beenthe
-                        standard dummy.</p>
+                    <h2>Flexible & Simple <span>pricing</span></h2>
+                    <p>Choose your myFit Pricing Plan <br/> myFit has a free Standard for Basics , $5 per month for Premium <br />
+                        and $7.99 per month for Gold-tier.</p>
                     </div>
                     <div className="toggle_block" data-aos="fade-up" data-aos-duration="1500">
                         <span className={`month ${tog ? 'active' : ''}`}>Monthly</span>

src/component/Pricing/Main.js

@@ -22,7 +22,7 @@ const Main = ({brdcum}) => {
         <Bredcrumb 
         no={1}
         title="Our Pricing & Plans" 
-        paragraph="Lorem Ipsum is simply dummy text of the printing and typesetting"
+        paragraph="Flexible & Convienent Pricing Options"
         tag="Our Pricing & Plans" 
         bgimg={BGImg}/>}
 
@@ -30,7 +30,7 @@ const Main = ({brdcum}) => {
         <Bredcrumb 
         no={2}
         title="Our Pricing & Plans" 
-        paragraph="Lorem Ipsum is simply dummy text of the printing and typesetting"
+        paragraph="Flexible & Convienent Pricing Options"
         tag="Our Pricing & Plans" 
         bgimg={BGImg1}/>}
 
@@ -38,7 +38,7 @@ const Main = ({brdcum}) => {
         <Bredcrumb 
         no={5}
         title="Our Pricing & Plans" 
-        paragraph="Lorem Ipsum is simply dummy text of the printing and typesetting"
+        paragraph="Flexible & Convienent Pricing Options"
         tag="Our Pricing & Plans" 
         bgimg={BGImg}/>}
 
@@ -47,14 +47,14 @@ const Main = ({brdcum}) => {
         <Bredcrumb 
         no={3}
         title="Our Pricing & Plans" 
-        paragraph="Lorem Ipsum is simply dummy text of the printing and typesetting"
+        paragraph="Flexible & Convienent Pricing Options"
         tag="Our Pricing & Plans" />}
 
         {brdcum.b4 && 
         <Bredcrumb 
         no={4}
         title="Our Pricing & Plans" 
-        paragraph="Lorem Ipsum is simply dummy text of the printing and typesetting"
+        paragraph="Flexible & Convienent Pricing Options"
         tag="Our Pricing & Plans" 
         bgimg={BGImg2}/>}