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

@@ -1181,6 +1181,10 @@ header.fixed .navbar {
 .how_it_works .step_block ul li .step_img img {
   max-width: 100%;
 }
+.how_it_works .step_block ul li .step_img img.create-account-logo {
+  border-radius: 15px;
+  box-shadow: 0px 0px 10px #c7c6c6;
+}
 
 /* how it works heading h4 */
 .how_it_works .step_block ul li .step_text h4 {
@@ -2693,7 +2697,11 @@ header.fix_style.white_header {
 }
 
 .app_solution_section .app_images ul li img {
-  max-width: 100%;
+  max-width: 98%;
+  padding: 1%;
+  border-radius: 15px;
+  box-shadow: 0px 0px 30px #c1dec9;
+  filter: grayscale(40%);
 }
 
 .app_solution_section .app_images li:first-child {
@@ -2768,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---------- */
 
@@ -3601,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;
@@ -3614,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-timing-function: linear;
-  animation-duration: 0.5s;
+  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

@@ -6,6 +6,12 @@ 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 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)
 
@@ -23,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 (
     <>       
@@ -84,12 +90,12 @@ const Main = ({brdcum}) => {
                     <div className="col-lg-6">
                         <div className="app_images" data-aos="fade-in" data-aos-duration="1500">
                         <ul>
-                            <li><img src="assets/images/abt_01.png" alt="" /></li>
+                            <li><img src={About1} alt="health monitor gadget" /></li>
                             <li>
                             <a data-url="#" onClick = {() => setytShow(true)}  className="popup-youtube play-button"
                                 data-toggle="modal"
                                 data-target="#myModal" title="About Video">
-                                <img src="assets/images/abt_02.png" alt="" />
+                                <img src={About2} alt="" />
                                 <div className="waves-block">
                                 <div className="waves wave-1"></div>
                                 <div className="waves wave-2"></div>
@@ -98,7 +104,8 @@ const Main = ({brdcum}) => {
                                 <span className="play_icon"><img src="assets/images/play_black.png" alt="image"/></span>
                             </a>
                             </li>
-                            <li><img src="assets/images/abt_03.png" alt="" /></li>
+                            {/* <li><img src="assets/images/abt_03.png" alt="" /></li> */}
+                            <li><img src={About3} alt="" /></li>
                         </ul>
                         </div>
                     </div>
@@ -166,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">
@@ -230,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/Blog/Blog/Main.js

@@ -8,8 +8,8 @@ const Main = ({ brdcum, bgimg }) => {
 
   const api = new SiteService();
   useEffect(() => {
-    getBlogData();
+    if(blogData.length===0){getBlogData()};
-  }, []);
+  }, [blogData]);
 
   const getBlogData = async () => {
     try {
@@ -69,14 +69,14 @@ const Main = ({ brdcum, bgimg }) => {
 
       <section className="row_am blog_list_main">
         {blogData.map((data,index) => {
-          if (index == 0){
+          if (index === 0){
             return (
               <div className="container">
               <div className="row">
                 <div
                   className="col-lg-6"
-                  data-aos="fade-in"
+                  // data-aos="fade-in"
-                  data-aos-duration="1500"
+                  // data-aos-duration="1500"
                 >
                   <div className="blog_img">
                     <img 
@@ -118,7 +118,7 @@ const Main = ({ brdcum, bgimg }) => {
               if (index > 0){
                 return (
                   <div key={data.id} className="col-md-4">
-                <div className="story_box" data-aos="fade-up" data-aos-duration="1500">
+                <div className="story_box">
                   <div className="story_img">
                     <img src={data.meta_value} alt="image" />
                     <span>{new Date (data && data.post_date).toDateString()}</span>

src/component/Blog/BlogSingle/Main.js

@@ -101,42 +101,8 @@ const Main = ({brdcum}) => {
                         <h3>{data && data.post_name}</h3>
                         <div dangerouslySetInnerHTML={{__html: data && data.post_content}}></div>
                     </div>
-                    {/* <div className="info">
+
-                        <p>Lorem Ipsum is simply dummy text of the printing and typesetting in dustry lorem Ipsum has been the industrys standard dummy text ev er since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic Lorem Ipsum is simply dummy text of the printing and typesettingindustry lorem Ipsum has been the industrys standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived.</p>
+                   
-                        <p>Printing and typesetting in dustry lorem Ipsum has been the industrys standard dummy text ev er since the 1500s, when an unnown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic Lorem Ipsum is simply dummy text of the printing and typesettingindustry lorem Ipsum has been the industrys centuries, but also the leap into electronic.</p>
-                        <h3>Why we are best</h3>
-                        <p>Lorem Ipsum is simply dummy text of the printing and typesetting in dustry lorem Ipsum has been the industrys standard dummy text ev er since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic.</p>
-                        <ul>
-                            <li><p> <span className="icon"><i className="icofont-check-circled"></i></span> Lorem Ipsum is simply dummy text of the printing and typesetting in </p></li>
-                            <li><p> <span className="icon"><i className="icofont-check-circled"></i></span> Dustry lorem Ipsum has been the industrys standard dummy text ev er since the when</p></li>
-                            <li><p> <span className="icon"><i className="icofont-check-circled"></i></span> Unknown printer took a galley of type and scrambled it to make.</p></li>
-                            <li><p> <span className="icon"><i className="icofont-check-circled"></i></span> Type specimen book. It has survived not only five centuries, but also the leap into electronic.</p></li>
-                            <li><p> <span className="icon"><i className="icofont-check-circled"></i></span> Lorem Ipsum is simply dummy text of the printing.</p></li>
-                            <li><p> <span className="icon"><i className="icofont-check-circled"></i></span> Dustry lorem Ipsum has been the industrys standard dummy text ev er since.</p></li>
-                            <li><p> <span className="icon"><i className="icofont-check-circled"></i></span> Unknown printer took a galley of type and scrambled it to make.</p></li>
-                            <li><p> <span className="icon"><i className="icofont-check-circled"></i></span> Type specimen book. It has survived not only.</p></li>
-                        </ul>
-                    </div> 
-                    <div className="two_img">
-                        <div className="row">
-                            <div className="col-md-6">
-                            <img src="assets/images/blog_sub_01.png" alt="image" />
-                            </div>
-                            <div className="col-md-6">
-                            <img src="assets/images/blog_sub_02.png" alt="image" />
-                            </div>
-                        </div>
-                    </div>
-                    <div className="info">
-                        <h3>Why we are best</h3>
-                        <p>Lorem Ipsum is simply dummy text of the printing and typesetting in dustry lorem Ipsum has been the industrys standard dummy text ev er since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic Lorem Ipsum is simply dummy text of the printing and typesettingindustry lorem Ipsum has been the industrys standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived.</p>
-                    </div>
-                    <div className="quote_block">
-                        <span className="q_icon"><img src="assets/images/quote_icon.png" alt="image" /></span>
-                        <h2>Lorem Ipsum is simply dummy text of the printing and typesetting in dustry lorem Ipsum has been the industrys standard dummy.</h2>
-                        <p><span className="name">Mr. John Doe,</span> Apper Inc</p>
-                    </div> */}
-                    {/* <p>Lorem Ipsum is simply dummy text of the printing and typesetting in dustry lorem Ipsum has been the industrys standard dummy text ev er since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic industry.</p> */}
                     <div className="blog_authore">
                         <div className="authore_info">
                             {/* <div className="avtar">

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'>
+          setShowSuccessfulImage(true) // sets show success image to true
-      <div><img src=${SuccessImg} /></div>
+
-      <p>We have received your message and will follow up promptly.</p>
-      </div>`;
           setTimeout(() => {
             navigate("/");
           }, 10000);
@@ -177,107 +176,114 @@ const Main = ({ brdcum }) => {
         id="contact">
         <div className="container">
           <div className="contact_inner">
-            <div
+            <div className="contact_form" id="contact_body">
-              className="contact_form"
+              {showSuccessfulImage ? (
-              id="contact_body">
+                <>
-              <div className="section_title">
+                  <div><img className="img-fluid animate-image" src={SuccessImg} alt='success image' /></div>
-                <h2>
+                  <p>We have received your message and will follow up promptly.</p>
-                  <span>Leave a</span> message
+                </>
-                </h2>
+              ) : (
-                <p>Fill up form below, our team will get back soon</p>
+                <>
-              </div>
+                <div className="section_title">
-
+                  <h2>
-              {/* Contact Form */}
+                    <span>Leave a</span> message
-              <form onSubmit={handleSubmit}>
+                  </h2>
-                <FormInput
+                  <p>Fill up form below, our team will get back soon</p>
-                  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>
 
-                <FormInput
+                {/* Contact Form */}
-                  name="phone"
+                <form onSubmit={handleSubmit}>
-                  type="number"
+                  <FormInput
-                  placeholder="Phone"
+                    name="name"
-                  errorMessage="It should be a valid phone number!"
+                    type="text"
-                  maxLenght={15}
+                    placeholder="Name"
-                  value={values.phone}
+                    errorMessage="Please enter your first and last name. (e.g: Mark John)"
-                  onChange={onChange}
+                    required={true}
-                  pattern="^[0-9]{15}$"
+                    maxLenght={35}
-                />
+                    value={values.name}
-
-                <div className="form-group">
-                  <textarea
-                    name="message"
-                    className="form-control"
-                    placeholder="Your message"
-                    value={values.message}
                     onChange={onChange}
-                    maxLength={300}
+                    pattern="^\w+( \w+)$"
-                    pattern="^[A-Za-z0-9]{5, 300}$"
                   />
-                </div>
+
-                <div className="form-group term_check">
+                  <FormInput
-                  <input
+                    name="email"
-                    type="checkbox"
+                    type="email"
-                    id="term"
+                    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
+                  <div className="form-group">
-                  </label>
+                    <select
-                </div>
+                      className="form-control"
-                <div className="form-group mb-0">
+                      name="country"
-                  <button
+                      value={values.country}
-                    type="submit"
+                      onChange={onChange}
-                    className="btn puprple_btn contact_btn"
+                      required>
-                    aria-label="submit form"
+                      <option value={""}>
-                    id="contact_loader">
+                        Country
-                    <p> SEND MESSAGE </p>
+                      </option>
-                  </button>
+                      {countries.length > 0 &&
-                </div>
+                        countries.map((country, index) => (
-              </form>
+                          <option
-              {/* Error Tag */}
+                            key={index}
-              <p id="errText"></p>
+                            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

@@ -79,7 +79,9 @@ const Main = ({ footer }) => {
                     <h3>Useful Links</h3>
                     <ul>
                       <li>
-                        <Link to="/">Home</Link>
+                        {/* <Link to="/">Home</Link> */}
+                        <HashLink to="/#">Home</HashLink>
+
                       </li>
                       <li>
                         <Link to="/about">About us</Link>

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>
+                    <h2>Flexible & 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
+                    <p className="gredient-p">
-                        standard dummy.</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>
+                    <h2>Flexible & Simple <span>pricing</span></h2>
-                    <p>Lorem Ipsum is simply dummy text of the printing and typese tting <br/> indus orem Ipsum has beenthe
+                    <p>Choose your myFit Pricing Plan <br/> myFit has a free Standard for Basics , $5 per month for Premium <br />
-                        standard dummy.</p>
+                        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/HomeMain/Work/Main.js

@@ -1,7 +1,7 @@
 import React , {useState} from 'react'
 import { Link } from 'react-router-dom'
 import img from '../../../assets/images/appdownload.png'
-import img1 from '../../../assets/images/create_account2.png'
+// import img1 from '../../../assets/images/create_account2.png'
 import img2 from '../../../assets/images/download_app1.png'
 import line from '../../../assets/images/anim_line.png'
 import banner from '../../../assets/images/banner-shape1.png'
@@ -9,6 +9,7 @@ import banner1 from '../../../assets/images/banner-shape2.png'
 import banner2 from '../../../assets/images/banner-shape3.png'
 import video from '../../../assets/images/play_icon.png'
 import ytvideo from '../../../assets/images/yt_thumb.png'
+import createAccount from '../../../assets/images/create_account.png'
 
 const Main = ({dark}) => {
     const [ytShow , setytShow] = useState (false)
@@ -50,7 +51,7 @@ const Main = ({dark}) => {
                                 <h3>02</h3>
                                 </div>
                                 <div className="step_img" data-aos="fade-right" data-aos-duration="1500">
-                                <img src={img1} alt="image" />
+                                <img className="create-account-logo" src={createAccount} alt="create account logo"/>
                                 </div>
                             </li>
                             <li>

src/component/Navbar/Main.js

@@ -143,7 +143,8 @@ const Main = ({navbar}) => {
                                 <Link to="/contact" className="nav-link" >Contact</Link>
                             </li>
                             <li className="nav-item">
-                                <Link to="/" className="nav-link dark_btn">GET STARTED</Link>
+                                 <a href={process.env.REACT_APP_APPSITE} className="nav-link dark_btn">GET STARTED</a>
+                                {/* <Link to="/" className="nav-link dark_btn">GET STARTED</Link> */}
                             </li>
 
                         </div >
@@ -211,7 +212,8 @@ const Main = ({navbar}) => {
                                     <Link to="/contact" className="nav-link" >Contact</Link>
                                 </li>
                                 <li className="nav-item">
-                                    <Link to="/contact" className="nav-link dark_btn">GET STARTED</Link>
+                                    <a href={process.env.REACT_APP_APPSITE} className="nav-link dark_btn">GET STARTED</a>
+                                    {/* <Link to="/contact" className="nav-link dark_btn">GET STARTED</Link> */}
                                 </li>
                             </ul>
                         </div>
@@ -275,7 +277,8 @@ const Main = ({navbar}) => {
                                 <Link to="/contact" className="nav-link" >Contact</Link>
                             </li>
                             <li className="nav-item">
-                                <Link to="/contact" className="nav-link dark_btn">GET STARTED</Link>
+                                <a href={process.env.REACT_APP_APPSITE} className="nav-link dark_btn">GET STARTED</a>
+                                {/* <Link to="/contact" className="nav-link dark_btn">GET STARTED</Link> */}
                             </li>
                         </ul>
                     </div>
@@ -330,7 +333,8 @@ const Main = ({navbar}) => {
                                 <Link to="/contact" className="nav-link" >Contact</Link>
                             </li>
                             <li className="nav-item">
-                                <Link to="/contact" className="nav-link dark_btn">GET STARTED</Link>
+                                <a href={process.env.REACT_APP_APPSITE} className="nav-link dark_btn">GET STARTED</a>
+                                {/* <Link to="/contact" className="nav-link dark_btn">GET STARTED</Link> */}
                             </li>
                         </ul>
                     </div>
@@ -393,7 +397,8 @@ const Main = ({navbar}) => {
                                 <Link smooth to="#contact" className="nav-link" >Contact</Link>
                             </li>
                             <li className="nav-item">
-                                <Link to="/contact" className="nav-link dark_btn">GET STARTED</Link>
+                                <a href={process.env.REACT_APP_APPSITE} className="nav-link dark_btn">GET STARTED</a>
+                                {/* <Link to="/contact" className="nav-link dark_btn">GET STARTED</Link> */}
                             </li>
                         </ul>
                     </div>
@@ -449,7 +454,8 @@ const Main = ({navbar}) => {
                                 <Link to="/contact" className="nav-link" >Contact</Link>
                             </li>
                             <li className="nav-item">
-                                <Link to="/contact" className="nav-link dark_btn">GET STARTED</Link>
+                                <a href={process.env.REACT_APP_APPSITE} className="nav-link dark_btn">GET STARTED</a>
+                                {/* <Link to="/contact" className="nav-link dark_btn">GET STARTED</Link> */}
                             </li>
                         </ul>
                     </div>
@@ -522,7 +528,8 @@ const Main = ({navbar}) => {
                                 <Link to="/contact" className="nav-link" >Contact</Link>
                             </li>
                             <li className="nav-item">
-                                <Link to="/contact" className="nav-link dark_btn">GET STARTED</Link>
+                                <a href={process.env.REACT_APP_APPSITE} className="nav-link dark_btn">GET STARTED</a>
+                                {/* <Link to="/contact" className="nav-link dark_btn">GET STARTED</Link> */}
                             </li>
                         </ul>
                     </div>
@@ -578,7 +585,8 @@ const Main = ({navbar}) => {
                                 <Link to="/contact" className="nav-link" >Contact</Link>
                             </li>
                             <li className="nav-item">
-                                <Link to="/contact" className="nav-link dark_btn">GET STARTED</Link>
+                                <a href={process.env.REACT_APP_APPSITE} className="nav-link dark_btn">GET STARTED</a>
+                                {/* <Link to="/contact" className="nav-link dark_btn">GET STARTED</Link> */}
                             </li>
                         </ul>
                     </div>

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