Implemented the FAQ link

.env

@@ -9,6 +9,11 @@ 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="http://localhost:7012"
+
 
 REACT_APP_AUX_ENDPOINT = "https://devapi.mermsemr.com/en/desktop/api/v2/myfit"
-REACT_APP_FORM_TIMEOUT = 10000
+REACT_APP_FORM_TIMEOUT = 10000
+REACT_APP_MAX_MESSAGE_LENGHT =300
+REACT_APP_BLOGSITE="https://blog.mermsemr.com/"
+

src/assets/css/style.css

@@ -3525,6 +3525,24 @@ header.fix_style.white_header {
   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;

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 axios from "axios";
+import SuccessImg from "../../assets/images/experts_01.png"
 
 import SiteService from "../../vendors/service/siteService";
 
@@ -100,7 +100,7 @@ const Main = ({ brdcum }) => {
           response.innerHTML = `<p> SEND MESSAGE </p>`;
 
           contact_body.innerHTML = `<div class='contact_body animate pop'>
-      <div><img /></div>
+      <div><img src=${SuccessImg} /></div>
       <p>We have received your message and will follow up promptly.</p>
       </div>`;
           setTimeout(() => {
@@ -240,12 +240,13 @@ const Main = ({ brdcum }) => {
 
                 <FormInput
                   name="phone"
-                  type="text"
+                  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">
@@ -254,8 +255,10 @@ const Main = ({ brdcum }) => {
                     className="form-control"
                     placeholder="Your message"
                     value={values.msg}
+                    errorMessage='words have exceeded 350 characters!'
                     onChange={onChange}
-                    maxLength={350}
+                    maxLength={300}
+                    pattern="^[A-Za-z0-9]{5, 300}$"
                   />
                 </div>
                 <div className="form-group term_check">

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/Work/Main.js

@@ -56,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

@@ -9,7 +9,7 @@ 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