About page main image fixed

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/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}/>}