blog data

.env

@@ -1,11 +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@mermsemr.com"
-REACT_APP_YEAR=2023
+REACT_APP_SUPPORT_EMAIL="support@myfit.ai"
+REACT_APP_YEAR=2025
 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_APPSITE="https://myfitapp.mermsemr.com"
+
+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=2025
+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/"

.env.production

@@ -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=2025
+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://users.myfit.ai/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/"

.gitignore

@@ -1 +1,2 @@
-node_modules/*
+node_modules/*
+build/*

.idea/.gitignore

@@ -0,0 +1,8 @@
+# Default ignored files
+/shelf/
+/workspace.xml
+# Datasource local storage ignored files
+/dataSources/
+/dataSources.local.xml
+# Editor-based HTTP Client requests
+/httpRequests/

.idea/modules.xml

@@ -0,0 +1,8 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="ProjectModuleManager">
+    <modules>
+      <module fileurl="file://$PROJECT_DIR$/.idea/www-myfit.iml" filepath="$PROJECT_DIR$/.idea/www-myfit.iml" />
+    </modules>
+  </component>
+</project>

.idea/vcs.xml

@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="VcsDirectoryMappings">
+    <mapping directory="$PROJECT_DIR$" vcs="Git" />
+  </component>
+</project>

.idea/www-myfit.iml

@@ -0,0 +1,8 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<module type="WEB_MODULE" version="4">
+  <component name="NewModuleRootManager">
+    <content url="file://$MODULE_DIR$" />
+    <orderEntry type="inheritedJdk" />
+    <orderEntry type="sourceFolder" forTests="false" />
+  </component>
+</module>

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,16 +11,26 @@ 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 nginx
+RUN apk update
+RUN apk add nginx
 
 # install app dependencies
 COPY package.json ./
 
 COPY package-lock.json ./
 
+COPY nginx.conf ./
+
+COPY run.sh ./
+
 RUN npm install
 
 # add app
 COPY . ./
 
 # start app
-CMD ["npm", "start"]
+CMD /bin/sh ./run.sh
+

docker-compose.yml

@@ -1,12 +1,15 @@
 version: '3'
 services:
   myfit-www:
+    image: registry.chiefsoft.net/www-myfit:latest
     build:
       context: .
       dockerfile: Dockerfile
+      args:
+        - NODE_ENV=production
     restart: unless-stopped
     ports:
-      - 9057:3000
+      - 7010:3000
     stdin_open: true
     working_dir: /usr/src/app
     volumes:
@@ -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:

nginx.conf

@@ -0,0 +1,29 @@
+worker_processes 1;
+
+events {
+  worker_connections 1024;
+}
+
+http {
+  access_log /var/log/nginx/access.log;
+  error_log  /var/log/nginx/error.log;
+
+  server {
+    gzip on;
+    listen 3000;
+    server_name localhost;
+    root /usr/src/app/build;
+
+    include /etc/nginx/mime.types;
+
+    location /nginx_status {
+      stub_status on;
+      access_log off;
+    }
+
+    location / {
+      try_files $uri $uri/ /index.html;
+    }
+  }
+}
+

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",

package.json

@@ -18,8 +18,8 @@
     "axios": "^0.24.0"
   },
   "scripts": {
-    "start": "react-scripts start -e .env",
-    "build": "react-scripts build -e .env",
+    "start": "react-scripts start -e .env.development",
+    "build": "react-scripts build -e .env.production",
     "test": "react-scripts test",
     "eject": "react-scripts eject"
   },

public/assets/css/style.css

@@ -1733,7 +1733,7 @@ iframe#youtubevideo {
     padding: 20px 100px;
     padding-bottom: 50px;
     position: relative;
-    z-index: 999999;
+    /* z-index: 999999; */
 }
 
 /* download app dark background */

public/index.html

@@ -7,7 +7,7 @@
 
     <!-- favicons Icons -->
     <link rel="manifest" href="%PUBLIC_URL%/manifest.json">
-    <meta name="description" content="APPER:: App Landing Page" />
+    <meta name="description" content="Cloud-based electronic health record platform for all users. patient health record, family health record">
 
     <!-- fonts -->
     <link rel="stylesheet" href="assets/css/icofont.min.css">

run.sh

@@ -0,0 +1,15 @@
+#!/usr/bin/env sh
+set -e
+set -x
+
+export NODE_ENV="${NODE_ENV:-development}"
+
+if [ $NODE_ENV == "development" ]; then
+  # this runs webpack-dev-server with hot reloading
+  npm start
+else
+  # build the app and serve it via nginx
+  npm run build
+  nginx -g 'daemon off;' -c /usr/src/app/nginx.conf
+  nginx -c /usr/src/app/nginx.conf
+fi

src/component/AboutUs/Main.js

@@ -6,9 +6,32 @@ 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)
 
+    // About us text variables
+    let innovativeDesc = `The team at myFit by Fluxtra LLC works with you to achieve your health objectives without getting in your way. Do your health your way to get the best result for you and your family. We are you, always ready and always engaged with the users to help get the best out of our solution. 
+    We work with you to achieve your health and fitness goals by providing solutions that fit your goals.`
+
+    let whyWeAreDiff = {
+        desc:'We work with you to achieve your health and fitness goals by providing solutions that fit your goals.',
+        secureDesc:"MyFit is built to keep your data secure and protect your privacy. Your data is encrypted and you are always in control of your information.",
+        richFeaturesDesc: " Self-service & Scheduling, Tracking of health and fitness, Performance metrics. A more active, healthier interaction and improved quality of life.",
+        easeOfUseDesc:" MyFit keeps you connected to your health, a healthy partner for a healthy life. Measure and keep track of your health & awareness in one place.",
+        supportDesc:" myFit alerts you of irregular rhythms. You can connect with your health facilitator.",
+        title1: 'Secure',
+        title2: 'Rich Features',
+        title3: 'Ease of Use',
+        title4: 'Support'
+    }
+    let queryDesc = 'If you have any questions, please get in touch with us, we will revert back quickly.'
+    
   return (
     <>       
        {brdcum.b1 && 
@@ -56,28 +79,24 @@ const Main = ({brdcum}) => {
                             life easy to grow.</h2>
                         </div>
                         <p data-aos="fade-up" data-aos-duration="1500">
-                            Lorem Ipsum is simply dummy text of the printing and type
-                            setting 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 centuries, but also the leap into electronic typesetting, remaining to make a type speci
-                            men book. It has survived essentially unchanged.
+                            {innovativeDesc}
                         </p>
-                        <p data-aos="fade-up" data-aos-duration="1500">
+                        {/* <p data-aos="fade-up" data-aos-duration="1500">
                             Standard dummy text ever since the when an unknown printer took a galley of type and scrambled it to
                             make a type specien book. It has survived not only five centuries, but also the leap into electronic
                             typesetting.
-                        </p>
+                        </p> */}
                         </div>
                     </div>
                     <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>
@@ -86,7 +105,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>
@@ -98,55 +118,50 @@ const Main = ({brdcum}) => {
                 <div className="container">
                 <div className="section_title" data-aos="fade-up" data-aos-duration="1500" data-aos-delay="100">
                     <h2><span>Why we are different</span> from others!</h2>
-                    <p>Lorem Ipsum is simply dummy text of the printing and typese tting <br/> indus orem Ipsum has beenthe standard
-                    dummy.</p>
+                    <p>{whyWeAreDiff.desc}</p>
                 </div>
                 <div className="row">
                     <div className="col-md-6 col-lg-3">
                     <div className="why_box" data-aos="fade-up" data-aos-duration="1500" data-aos-delay="100">
-                        <div className="icon">
+                        {/* <div className="icon">
                         <img src="assets/images/secure.png" alt="image"/>
-                        </div>
+                        </div> */}
                         <div className="text">
-                        <h3>Secure code</h3>
-                        <p>Lorem Ipsum is simply dummy text of the printing and type
-                            setting indus ideas.
-                        </p>
+                        <h3>{whyWeAreDiff.title1}</h3>
+                        <p> {whyWeAreDiff.secureDesc}</p>
                         </div>
                     </div>
                     </div>
                     <div className="col-md-6 col-lg-3">
                     <div className="why_box" data-aos="fade-up" data-aos-duration="1500" data-aos-delay="200">
-                        <div className="icon">
+                        {/* <div className="icon">
                         <img src="assets/images/abt_functional.png" alt="image"/>
-                        </div>
+                        </div> */}
                         <div className="text">
-                        <h3>Fully functional</h3>
-                        <p>Simply dummy text of the printing and typesetting indus lorem Ipsum is dummy.</p>
+                        <h3>{whyWeAreDiff.title2}</h3>
+                         <p>{whyWeAreDiff.richFeaturesDesc}</p>
                         </div>
                     </div>
                     </div>
                     <div className="col-md-6 col-lg-3">
                     <div className="why_box" data-aos="fade-up" data-aos-duration="1500" data-aos-delay="300">
-                        <div className="icon">
+                        {/* <div className="icon">
                         <img src="assets/images/communication.png" alt="image"/>
-                        </div>
+                        </div> */}
                         <div className="text">
-                        <h3>Best communication</h3>
-                        <p>Lorem Ipsum is simply dummy text of the printing and type
-                            setting indus ideas.
-                        </p>
+                        <h3>{whyWeAreDiff.title3}</h3>
+                         <p>{whyWeAreDiff.easeOfUseDesc}</p>
                         </div>
                     </div>
                     </div>
                     <div className="col-md-6 col-lg-3">
                     <div className="why_box" data-aos="fade-up" data-aos-duration="1500" data-aos-delay="400">
-                        <div className="icon">
+                        {/* <div className="icon">
                         <img src="assets/images/abt_support.png" alt="image"/>
-                        </div>
+                        </div> */}
                         <div className="text">
-                        <h3>24-7 Support</h3>
-                        <p>Simply dummy text of the printing and typesetting indus lorem Ipsum is dummy.</p>
+                        <h3>{whyWeAreDiff.title4}</h3>
+                        <p>{whyWeAreDiff.supportDesc}</p>
                         </div>
                     </div>
                     </div>
@@ -159,7 +174,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">
@@ -167,45 +182,45 @@ const Main = ({brdcum}) => {
                         <div className="section_title" data-aos="fade-up" data-aos-duration="1500" data-aos-delay="100">
                             <h2> <span>We focus on quality,</span> never
                             focus on quantity</h2>
-                            <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.
-                            </p>
+                            
+                            <p>{innovativeDesc}</p>
                         </div>
                         <ul className="app_statstic" id="counter" data-aos="fade-in" data-aos-duration="1500">
                             <li>
-                            <div className="icon">
+                            {/* <div className="icon">
                                 <img src="assets/images/download.png" alt="image" />
-                            </div>
+                            </div> */}
                             <div className="text">
-                                <p><span className="counter-value" data-count="17">0</span><span>M+</span></p>
-                                <p>Download</p>
+                                <h3>Manage</h3>
+                                <p>health plan</p>
                             </div>
+                            
                             </li>
                             <li>
-                            <div className="icon">
+                            {/* <div className="icon">
                                 <img src="assets/images/followers.png" alt="image" />
-                            </div>
+                            </div> */}
                             <div className="text">
-                                <p><span className="counter-value" data-count="08">0 </span><span>M+</span></p>
-                                <p>Followers</p>
+                                <h3>Health Record</h3>
+                                <p>with you</p>
                             </div>
                             </li>
                             <li>
-                            <div className="icon">
+                            {/* <div className="icon">
                                 <img src="assets/images/reviews.png" alt="image" />
-                            </div>
+                            </div> */}
                             <div className="text">
-                                <p><span className="counter-value" data-count="2300">1500</span><span>+</span></p>
-                                <p>Reviews</p>
+                                <h3>Health</h3>
+                                <p>reminders</p>
                             </div>
                             </li>
                             <li>
-                            <div className="icon">
+                            {/* <div className="icon">
                                 <img src="assets/images/countries.png" alt="image" />
-                            </div>
+                            </div> */}
                             <div className="text">
-                                <p><span className="counter-value" data-count="150">0</span><span>+</span></p>
-                                <p>Countries</p>
+                                <h3>Quick</h3>
+                                <p>Schedule</p>
                             </div>
                             </li>
                         </ul>
@@ -223,8 +238,8 @@ 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>
-                        <p>Lorem Ipsum is simply dummy text of the printing and typese tting <br/> indus orem Ipsum has beenthe standard dummy.</p>
+                        <h2>Have any questions about ?</h2>
+                        <p>{queryDesc}</p>
                     </div>
                     <Link to="/contact" className="btn white_btn">CONTACT US NOW</Link>
                 </div>
@@ -237,4 +252,4 @@ const Main = ({brdcum}) => {
   )
 }
 
-export default Main
+export default Main

src/component/Blog/Blog/Main.js

@@ -1,27 +1,61 @@
-import React from 'react'
-import { Link } from 'react-router-dom'
-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 React, { useEffect, useState } from "react";
+import { Link } from "react-router-dom";
+import BGImg from "../../../assets/images/bread_crumb_bg.png";
+import SiteService from "../../../vendors/service/siteService";
+const Main = ({ brdcum, bgimg }) => {
+  const [blogData, setBlogData] = useState([]);
+  console.log(blogData);
 
-const Main = ({brdcum,bgimg}) => {
+  const api = new SiteService();
+  useEffect(() => {
+    if(blogData.length===0){getBlogData()};
+  }, [blogData]);
+
+  const getBlogData = async () => {
+    try {
+      const res = await api.blogData();
+
+      setBlogData(res.data);
+
+      // console.log(res.data);
+
+      
+    } catch (error) {
+      console.log("Error from blog data ", error);
+    }
+  };
+  
   return (
     <>
-        
-        <div className="bred_crumb" style={{ backgroundImage : `url(${BGImg})`}}>
-            <div className="container">
-                <span className="banner_shape1"> <img src="assets/images/banner-shape1.png" alt="image" /> </span>
-                <span className="banner_shape2"> <img src="assets/images/banner-shape2.png" alt="image" /> </span>
-                <span className="banner_shape3"> <img src="assets/images/banner-shape3.png" alt="image" /> </span>
+      <div className="bred_crumb" style={{ backgroundImage: `url(${BGImg})` }}>
+        <div className="container">
+          <span className="banner_shape1">
+            {" "}
+            <img src="assets/images/banner-shape1.png" alt="image" />{" "}
+          </span>
+          <span className="banner_shape2">
+            {" "}
+            <img src="assets/images/banner-shape2.png" alt="image" />{" "}
+          </span>
+          <span className="banner_shape3">
+            {" "}
+            <img src="assets/images/banner-shape3.png" alt="image" />{" "}
+          </span>
 
-                <div className="bred_text">
-                <h1>Latest Blog Post</h1>
-                <ul>
-                    <li><Link to="/">Home</Link></li>
-                    <li><span>»</span></li>
-                    <li><Link to="/blog">Blog</Link></li>
-                </ul>
-               {/* <div className="search_bar">
+          <div className="bred_text">
+            <h1>Latest Blog Post</h1>
+            <ul>
+              <li>
+                <Link to="/">Home</Link>
+              </li>
+              <li>
+                <span>»</span>
+              </li>
+              <li>
+                <Link to="/blog">Blog</Link>
+              </li>
+            </ul>
+            {/* <div className="search_bar">
                     <form action="">
                         <div className="form-group">
                             <input type="text" placeholder="Search here" className="form-control"/>
@@ -29,126 +63,96 @@ const Main = ({brdcum,bgimg}) => {
                         </div>
                     </form>
         </div>*/}
-                </div>
-            </div>
+          </div>
         </div>
+      </div>
 
-
-        <section className="row_am blog_list_main">
-            <div className="container">
-                <div className="row">
-                <div className="col-lg-6" data-aos="fade-in" data-aos-duration="1500">
-                    <div className="blog_img">
-                        <img src="https://picsum.photos/seed/picsum/505/378" alt="image"/>
-                        <span>20 min ago</span>
-                    </div>
+      <section className="row_am blog_list_main">
+        {blogData.map((data,index) => {
+          if (index === 0){
+            return (
+              <div className="container">
+              <div className="row">
+                <div
+                  className="col-lg-6"
+                  // data-aos="fade-in"
+                  // data-aos-duration="1500"
+                >
+                  <div className="blog_img">
+                    <img 
+                      src={data.meta_value}
+                      alt="image"
+                    />
+                    {/* <span>20 min ago</span> */}
+    
+                    <span>{new Date (data.post_date).toDateString()}</span>
+                  </div>
                 </div>
                 <div className="col-lg-6">
-                    <div className="blog_text">
-                        <div className="section_title">
-                        <h2>Top rated app of the year!</h2>
-                        <p>myFit has powerful connectivity, fitness, health, and safety features
-                            Also makes provision Fitness tracking,Workout tracking,Heart rate monitoringscrambled 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 typesetting.</p>
-                            <Link to="/blog-single">READ MORE</Link>
-                        </div>
+                  <div className="blog_text">
+                    <div className="section_title">
+                      <h2>{data.post_title}</h2>
+                      <div dangerouslySetInnerHTML={{__html: data.post_content.substring(0,400)+'  . . .'}}></div>
+                      {/* <Link to={`/blog-single/${data.id}`} state={{data}}>
+                          READ MORE
+                        </Link> */}
+                        <Link to={`/blogdetails/${data.id}`} state={{data, allData: blogData}}>
+                      READ MORE
+                    </Link>
                     </div>
+                  </div>
                 </div>
-                </div>
+              </div>
             </div>
-        </section>
-        <section className="row_am latest_story blog_list_story" id="blog">
-            <div className="container">
-                <div className="row">
-                    <div className="col-md-4">
-                        <div className="story_box" data-aos="fade-up" data-aos-duration="1500">
-                            <div className="story_img">
-                            <img src="https://picsum.photos/seed/picsum/505/378" alt="image" />
-                            <span>45 min ago</span>
-                            </div>
-                            <div className="story_text">
-                                <h3>Cool features added!</h3>
-                                <p>Lorem Ipsum is simply dummy text of the printing and typesetting 
-                                industry lorem Ipsum has.</p>
-                                <Link to="/blog-single">READ MORE</Link>
-                            </div>
-                        </div>
-                    </div>
-                    <div className="col-md-4">
-                        <div className="story_box" data-aos="fade-up" data-aos-duration="1500">
-                            <div className="story_img">
-                            <img src="https://picsum.photos/seed/picsum/505/378" alt="image" />
-                            <span>45 min ago</span>
-                            </div>
-                            <div className="story_text">
-                                <h3>Top rated app! Yupp.</h3>
-                                <p>Simply dummy text of the printing and typesetting industry lorem Ipsum has Lorem Ipsum is.</p>
-                                <Link to="/blog-single">READ MORE</Link>
-                            </div>
-                        </div>
-                    </div>
-                    <div className="col-md-4">
-                        <div className="story_box" data-aos="fade-up" data-aos-duration="1500">
-                            <div className="story_img">
-                            <img src="https://picsum.photos/seed/picsum/505/378" alt="image"/>
-                            <span>45 min ago</span>
-                            </div>
-                            <div className="story_text">
-                                <h3>Creative ideas on app.</h3>
-                                <p>Printing and typesetting industry lorem Ipsum has Lorem simply dummy text of the.</p>
-                                <Link to="/blog-single">READ MORE</Link>
-                            </div>
-                        </div>
-                    </div>
-                    <div className="col-md-4">
-                        <div className="story_box" data-aos="fade-up" data-aos-duration="1500">
-                            <div className="story_img">
-                            <img src="https://picsum.photos/seed/picsum/505/378" alt="image"/>
-                            <span>45 min ago</span>
-                            </div>
-                            <div className="story_text">
-                                <h3>Excellence UI design</h3>
-                                <p>Lorem Ipsum is simply dummy text of the printing and typesetting 
-                                industry lorem Ipsum has.</p>
-                                <Link to="/blog-single">READ MORE</Link>
-                            </div>
-                        </div>
-                    </div>
-                    <div className="col-md-4">
-                        <div className="story_box" data-aos="fade-up" data-aos-duration="1500">
-                            <div className="story_img">
-                            <img src="https://picsum.photos/seed/picsum/505/378" alt="image"/>
-                            <span>45 min ago</span>
-                            </div>
-                            <div className="story_text">
-                                <h3>Quick and easy Search</h3>
-                                <p>Simply dummy text of the printing and typesetting industry lorem Ipsum has Lorem Ipsum is.</p>
-                                <Link to="/blog-single">READ MORE</Link>
-                            </div>
-                        </div>
-                    </div>
-                    <div className="col-md-4">
-                        <div className="story_box" data-aos="fade-up" data-aos-duration="1500">
-                            <div className="story_img">
-                            <img src="https://picsum.photos/seed/picsum/505/378" alt="image"/>
-                            <span>45 min ago</span>
-                            </div>
-                            <div className="story_text">
-                                <h3>Chat function eded</h3>
-                                <p>Printing and typesetting industry lorem Ipsum has Lorem simply dummy text of the.</p>
-                                <Link to="/blog-single">READ MORE</Link>
-                            </div>
-                        </div>
-                    </div>
-                </div>
-                <div className="pagination_block">
-                    <ul>
-                        <li><Link to="#" className="prev"> Visit our blog</Link></li>
-                    </ul>
-                </div>
-            </div>
-        </section>
-    </>
-  )
-}
 
-export default Main
+            )
+          }          
+        })}
+       
+       
+      </section>
+      <section className="row_am latest_story blog_list_story" id="blog">
+        <div className="container">
+          <div className="row">
+            {blogData.map((data, index) => {
+              if (index > 0){
+                return (
+                  <div key={data.id} className="col-md-4">
+                <div className="story_box">
+                  <div className="story_img">
+                    <img src={data.meta_value} alt="image" />
+                    <span>{new Date (data && data.post_date).toDateString()}</span>
+                  </div>
+                  <div className="story_text">
+                    <h3>{data.post_title}</h3>
+                    <div dangerouslySetInnerHTML={{__html: data && data.post_content.substring(0,100)+'  . . .'}}></div>
+                    <Link to={`/blogdetails/${data.id}`} state={{data, allData: blogData}}>
+                      READ MORE
+                    </Link>
+                  </div>
+                </div>
+              </div>
+
+                )}
+
+              
+              })}
+          </div>
+          <div className="pagination_block">
+            <ul>
+              <li>
+                <Link to={process.env.REACT_APP_BLOGSITE}
+                 className="prev">
+                  {" "}
+                  Visit our blog
+                </Link>
+              </li>
+            </ul>
+          </div>
+        </div>
+      </section>
+    </>
+  );
+};
+
+export default Main;

src/component/Blog/BlogSingle/Main.js

@@ -1,12 +1,50 @@
-import React from 'react'
-import { Link } from 'react-router-dom'
+import React, { useEffect, useState } from "react";
+import { Link, useLocation } from 'react-router-dom'
 import Bredcrumb from '../../Bredcrumb/Main'
 import BGImg from "../../../assets/images/bread_crumb_bg.png"
 import BGImg1 from "../../../assets/images/bread_crumb_bg_one.png"
 import BGImg2 from "../../../assets/images/bread_crumb_bg_two.png"
+import { useParams } from "react-router-dom";
+import SiteService from "../../../vendors/service/siteService";
+
 
 const Main = ({brdcum}) => {
-    
+    const { id } = useParams();
+    const location = useLocation();
+    const [blogData, setBlogData] = useState([]);
+    const [newAllData, setNewAllData] = useState([]);
+   
+
+  useEffect(() => {
+    getBlogData();
+    getLatestBlog();
+  }, [location.state?.data]);
+
+  const api = new SiteService();
+  const data = location.state?.data;
+  const allData = location.state?.allData;
+  
+  
+  const getLatestBlog = () =>{
+    const arrData = [ ...allData ];
+    const itemIndex = arrData.findIndex(x => x.id === data.id)
+     arrData.splice(itemIndex, 1);
+    const newAllData = arrData.splice(0, 3);
+    setNewAllData(newAllData);
+
+    console.log('All data ', arrData, newAllData);
+}
+
+  const getBlogData = async () => {
+    try {
+      const res = await api.blogData();
+      setBlogData(res.data);
+      
+    } catch (error) {
+      console.log("Error from blog data ", error);
+    }
+  };
+        
   return (
     <>
         
@@ -49,81 +87,55 @@ const Main = ({brdcum}) => {
                 <div className="blog_inner_pannel">
                     <div className="review">
                         <span>Review</span>
-                        <span>45 min ago</span>
+                        {/* <span>45 min ago</span> */}
+                        <span>{new Date (data && data.post_modified).toDateString()}</span>
+
                     </div>
                     <div className="section_title">
-                        <h2>Top rated app of the year!</h2>
+                        <h2>{data && data.post_title}</h2>
                     </div>
                     <div className="main_img">
-                        <img src="assets/images/blog_detail_main.png" alt="image" />
+                        <img src={data && data.meta_value} alt="image" />
                     </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>
+                        <h3>{data && data.post_name}</h3>
+                        <div dangerouslySetInnerHTML={{__html: data && data.post_content}}></div>
                     </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">
+                            {/* <div className="avtar">
                                 <img src="assets/images/blog_d02.png" alt="image" />
-                            </div>
+                            </div> */}
                             <div className="text">
-                                <h3>By: John Dow</h3>
-                                <span>July 25, 2022</span>
+                                <h3>{data && data.post_author}</h3>
+                                <span>{new Date (data && data.post_date).toDateString()}</span>
                             </div>
                         </div>
                         <div className="social_media">
                             <ul>
-                                <li><Link to="#"><i className="icofont-facebook"></i></Link></li>
-                                <li><Link to="#"><i className="icofont-twitter"></i></Link></li>
-                                <li><Link to="#"><i className="icofont-instagram"></i></Link></li>
-                                <li><Link to="#"><i className="icofont-pinterest"></i></Link></li>
+                                <li>
+                                <a href={process.env.REACT_APP_FACEBOOK}>
+                                    <i className="icofont-facebook"></i>
+                                </a>
+                                </li>
+                                <li>
+                                <a href={process.env.REACT_APP_TWITTER}>
+                                    <i className="icofont-twitter"></i>
+                                </a>
+                                </li>
                             </ul>
                         </div>
                     </div>
                     <div className="blog_tags">
-                        <ul>
-                        <li className="tags"><p>Tags:</p></li>
-                        <li><span>app,</span></li>
-                        <li><span>rating,</span></li>
-                        <li><span>development</span></li>
-                        </ul>
+                        <a href={process.env.REACT_APP_BLOGSITE}>Visit Blog Site </a>
                     </div>
                 </div>
             </div>
         </section>
-        <section className="row_am comment_section">
+
+        {/* <section className="row_am comment_section">
             <div className="container">
                 <div className="section_title">
                     <h2>3 Comments</h2>
@@ -216,7 +228,7 @@ const Main = ({brdcum}) => {
                     </div>
                 </form>
             </div>
-        </section>
+        </section> */}
 
         <section className="row_am latest_story" id="blog">
             <div className="container">
@@ -225,21 +237,33 @@ const Main = ({brdcum}) => {
                     <p>Lorem Ipsum is simply dummy text of the printing and typese tting <br/> indus orem Ipsum has beenthe standard dummy.</p>
                 </div>
                 <div className="row">
-                    <div className="col-md-4">
-                        <div className="story_box" data-aos="fade-up" data-aos-duration="1500">
-                            <div className="story_img">
-                            <img src="assets/images/story01.png" alt="image" />
-                            <span>45 min ago</span>
-                            </div>
-                            <div className="story_text">
-                                <h3>Cool features added!</h3>
-                                <p>Lorem Ipsum is simply dummy text of the printing and typesetting 
-                                industry lorem Ipsum has.</p>
-                                <Link to="#">READ MORE</Link>
-                            </div>
-                        </div>
-                    </div>
-                    <div className="col-md-4">
+
+                 {newAllData.map((data) => {
+                    
+                    return (
+
+                     <div className="col-md-4">
+                     <div className="story_box" data-aos="fade-up" data-aos-duration="1500">
+                         <div className="story_img">
+                        <img src={data.meta_value} alt="image" />
+                         <span>45 min ago</span>
+                         </div>
+                         <div className="story_text">
+                            <h3>{data.post_title}</h3>
+                             <div dangerouslySetInnerHTML={{__html: data.post_content.substring(0,300)+'  . . .'}}></div>
+                            {/* <Link to={`/blog-single/${data.id}`} state={{data}}>
+                                 READ MORE
+                            </Link> */}
+                            <Link to={`/blogdetails/${data.id}`} state={{data, allData: blogData}}>
+                                 READ MORE
+                            </Link>
+                         </div>
+                     </div>
+                 </div>
+
+                 )})}
+
+                    {/* <div className="col-md-4">
                         <div className="story_box" data-aos="fade-up" data-aos-duration="1500">
                             <div className="story_img">
                             <img src="assets/images/story02.png" alt="image" />
@@ -264,7 +288,7 @@ const Main = ({brdcum}) => {
                                 <Link to="#">READ MORE</Link>
                             </div>
                         </div>
-                    </div>
+                    </div> */}
                 </div>
             </div>
         </section>

src/component/Bredcrumb/Main.js

@@ -19,7 +19,7 @@ const Main = ({title,tag,bgimg,paragraph,no}) => {
                         <ul>
                             <li><Link to="/">Home</Link></li>
                             <li><span>»</span></li>
-                            <li><Link to="/about">{tag}</Link></li>
+                            <li><Link to="#">{tag}</Link></li>
                         </ul>
                     </div>
                 </div>
@@ -39,7 +39,7 @@ const Main = ({title,tag,bgimg,paragraph,no}) => {
                         <ul>
                             <li><Link to="/">Home</Link></li>
                             <li><span>»</span></li>
-                            <li><Link to="/about">{tag}</Link></li>
+                            <li><Link to="#">{tag}</Link></li>
                         </ul>
                     </div>
                 </div>
@@ -58,7 +58,7 @@ const Main = ({title,tag,bgimg,paragraph,no}) => {
                         <ul>
                             <li><Link to="/">Home</Link></li>
                             <li><span>»</span></li>
-                            <li><Link to="/about">{tag}</Link></li>
+                            <li><Link to="#">{tag}</Link></li>
                         </ul>
                     </div>
                 </div>
@@ -77,7 +77,7 @@ const Main = ({title,tag,bgimg,paragraph,no}) => {
                         <ul>
                             <li><Link to="/">Home</Link></li>
                             <li><span>»</span></li>
-                            <li><Link to="/about">{tag}</Link></li>
+                            <li><Link to="#">{tag}</Link></li>
                         </ul>
                     </div>
                 </div>
@@ -96,7 +96,7 @@ const Main = ({title,tag,bgimg,paragraph,no}) => {
                         <ul>
                             <li><Link to="/">Home</Link></li>
                             <li><span>»</span></li>
-                            <li><Link to="/about">{tag}</Link></li>
+                            <li><Link to="#">{tag}</Link></li>
                         </ul>
                     </div>
                 </div>

src/component/Contact/Main.js

@@ -1,18 +1,132 @@
-import React, { useEffect } from "react";
-import { Link } from "react-router-dom";
+/** @format */
+
+import React, { useEffect, useState } from "react";
+import { Link, useNavigate } from "react-router-dom";
 import Bredcrumb from "../Bredcrumb/Main";
 import BGImg from "../../assets/images/bread_crumb_bg.png";
 import BGImg1 from "../../assets/images/bread_crumb_bg_one.png";
 import BGImg2 from "../../assets/images/bread_crumb_bg_two.png";
+import SuccessImg from "../../assets/images/confirmed-letter.jpg"
+
+import SiteService from "../../vendors/service/siteService";
+
+// Form Inputs
+const FormInput = (props) => {
+  let {
+    name,
+    type,
+    placeholder,
+    required,
+    maxLenght,
+    errorMessage,
+    value,
+    onChange,
+    pattern,
+  } = props;
+
+  const [focused, setFocused] = useState(false);
+  const handleFocus = () => {
+    return setFocused(true);
+  };
+
+  return (
+    <div className="form-group">
+      <input
+        name={name}
+        type={type}
+        placeholder={placeholder}
+        className="form-control"
+        maxLength={maxLenght}
+        required={required}
+        value={value}
+        onChange={onChange}
+        onBlur={handleFocus}
+        pattern={pattern}
+        focused={focused.toString()}
+      />
+      <span>{errorMessage}</span>
+    </div>
+  );
+};
 
 const Main = ({ brdcum }) => {
+  let response = document.getElementById("contact_loader");
+  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: "",
+    email: "",
+    phone: "",
+    message: "",
+    country: "",
+  }); //initial state values
+  const [countries, setCountries] = useState([]); // initial state for country dropdown
+
+  const [myData, setMyData] = useState(null);
+
+  // Gave a generic name for multiple calls
+  const API_CALL = new SiteService(); // instantiating the class
+  // API CALL
+  const allCountry = () => {
+    return API_CALL.countryData();
+  };
+  const contactForm = async (value) => {
+    return await API_CALL.contactData(value);
+  };
+
+  const onChange = (e) => {
+    setValues((prev) => ({ ...prev, [e.target.name]: e.target.value }));
+  };
+
+  // Submitting form
+  const handleSubmit = async (e) => {
+    e.preventDefault();
+
+    response.innerHTML = `<div
+    class="loader loader-sm"
+    id="loader-1" style='margin-right: 20px'></div>`;
+
+    contactForm(values)
+      .then((contact) => {
+        setMyData(contact);
+
+        // Checking for errors
+        if (contact?.data?.status < 1 || contact?.data?.message_id == ""){
+          errText.textContent = "unable to send your message, please try again";
+          response.innerHTML = `<p> SEND MESSAGE </p>`;
+        }else {
+          response.innerHTML = `<p> SEND MESSAGE </p>`;
+
+          setShowSuccessfulImage(true) // sets show success image to true
+
+          setTimeout(() => {
+            navigate("/");
+          }, 10000);
+        }
+      })
+      .catch(() => {
+        errText.textContent = "unable to send your message, please try again";
+        response.innerHTML = `<p> SEND MESSAGE </p>`;
+      });
+  };
+
+  //CALLS THE API AFTER COMPONENT LOADS
+  useEffect(() => {
+    allCountry().then((data) => setCountries(Object.entries(data.data))).catch((err)=>console.log(err.message));
+  }, []);
+
+
   return (
     <>
       {brdcum.b1 && (
         <Bredcrumb
           no={1}
           title="Contact Us"
-          paragraph="Ib you have an query, please get in touch with us, we will revert back quickly."
+          paragraph="If you have an query, please get in touch with us, we will revert back quickly."
           tag="Contact us"
           bgimg={BGImg}
         />
@@ -57,106 +171,182 @@ const Main = ({ brdcum }) => {
         />
       )}
 
-      <section className="contact_page_section" id="contact">
+      <section
+        className="contact_page_section"
+        id="contact">
         <div className="container">
           <div className="contact_inner">
-            <div className="contact_form">
-              <div className="section_title">
-                <h2>
-                  Leave a <span>message</span>
-                </h2>
-                <p>Fill up form below, our team will get back soon</p>
-              </div>
-              <form action="">
-                <div className="form-group">
-                  <input
+            <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>
+
+                {/* Contact Form */}
+                <form onSubmit={handleSubmit}>
+                  <FormInput
+                    name="name"
                     type="text"
                     placeholder="Name"
-                    className="form-control"
+                    errorMessage="Please enter your first and last name. (e.g: Mark John)"
+                    required={true}
+                    maxLenght={35}
+                    value={values.name}
+                    onChange={onChange}
+                    pattern="^\w+( \w+)$"
                   />
-                </div>
-                <div className="form-group">
-                  <input
+
+                  <FormInput
+                    name="email"
                     type="email"
                     placeholder="Email"
-                    className="form-control"
+                    errorMessage="It should be a valid email address!"
+                    required={true}
+                    maxLenght={35}
+                    value={values.email}
+                    onChange={onChange}
                   />
-                </div>
 
-                <div className="form-group">
-                  <select className="form-control">
-                    <option value="">Country</option>
-                  </select>
-                </div>
-                <div className="form-group">
-                  <input
-                    type="text"
+                  <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"
-                    className="form-control"
+                    errorMessage="It should be a valid phone number!"
+                    maxLenght={15}
+                    value={values.phone}
+                    onChange={onChange}
+                    pattern="^[0-9]{15}$"
                   />
-                </div>
 
-                <div className="form-group">
-                  <textarea
-                    className="form-control"
-                    placeholder="Your message"
-                  ></textarea>
-                </div>
-                <div className="form-group term_check">
-                  <input type="checkbox" id="term" />
-                  <label htmlFor="term">
-                    I agree to the terms and conditions
-                  </label>
-                </div>
-                <div className="form-group mb-0">
-                  <button type="submit" className="btn puprple_btn">
-                    SEND MESSAGE
-                  </button>
-                </div>
-              </form>
+                  <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 */}
             <div className="contact_info">
               <div className="icon">
-                <img src="assets/images/contact_message_icon.png" alt="image" />
+                <img
+                  src="assets/images/contact_message_icon.png"
+                  alt="image"
+                />
               </div>
               <div className="section_title">
                 <h2>
-                  Have any <span>question?</span>
+                  <span> Have any </span>question?
                 </h2>
                 <p>
                   If you have any question about our product, service, payment
                   or company, Visit our <Link to="/faq">FAQs page.</Link>
                 </p>
               </div>
-              <Link to="/faq" className="btn puprple_btn">
+              <Link
+                to="/faq"
+                className="btn puprple_btn">
                 READ FAQ
               </Link>
               <ul className="contact_info_list">
                 <li>
                   <div className="img">
-                    <img src="assets/images/mail_icon.png" alt="image" />
+                    <img
+                      src="assets/images/mail_icon.png"
+                      alt="image"
+                    />
                   </div>
                   <div className="text">
                     <span>Email Us</span>
-                    <Link to="#">example@gmail.com</Link>
+                    <a href={`mailto: ${process.env.REACT_APP_SUPPORT_EMAIL}`}>
+                      {process.env.REACT_APP_SUPPORT_EMAIL}
+                    </a>
                   </div>
                 </li>
                 <li>
                   <div className="img">
-                    <img src="assets/images/call_icon.png" alt="image" />
+                    <img
+                      src="assets/images/call_icon.png"
+                      alt="image"
+                    />
                   </div>
                   <div className="text">
                     <span>Call Us</span>
-                    <Link to="#">+1 (888) 553-46-11</Link>
+                    <a href={`tel: ${process.env.REACT_APP_US_PHONE}`}>
+                      {process.env.REACT_APP_US_PHONE}
+                    </a>
                   </div>
                 </li>
                 <li>
                   <div className="img">
-                    <img src="assets/images/location_icon.png" alt="image" />
+                    <img
+                      src="assets/images/location_icon.png"
+                      alt="image"
+                    />
                   </div>
                   <div className="text">
                     <span>Visit Us</span>
-                    <p>5687, Business Avenue, New York, USA 5687</p>
+                    <p>{process.env.REACT_APP_US_ADDRESS}</p>
                   </div>
                 </li>
               </ul>
@@ -165,7 +355,9 @@ const Main = ({ brdcum }) => {
         </div>
       </section>
       <section className="row_am map_section">
-        <div className="container"></div>
+        <div className="container">
+
+        </div>
       </section>
     </>
   );

src/component/Footer/Main.js

@@ -1,4 +1,5 @@
 import { Link } from "react-router-dom";
+import { HashLink } from "react-router-hash-link";
 import React from "react";
 import line from "../../assets/images/anim_line.png";
 import blueapp from "../../assets/images/appstore_blue.png";
@@ -13,33 +14,11 @@ const Main = ({ footer }) => {
         <footer>
           <div className="top_footer" id="contact">
             <div className="anim_line dark_bg">
-              <span>
-                <img src={line} alt="anim_line" />
-              </span>
-              <span>
-                <img src={line} alt="anim_line" />
-              </span>
-              <span>
-                <img src={line} alt="anim_line" />
-              </span>
-              <span>
-                <img src={line} alt="anim_line" />
-              </span>
-              <span>
-                <img src={line} alt="anim_line" />
-              </span>
-              <span>
-                <img src={line} alt="anim_line" />
-              </span>
-              <span>
-                <img src={line} alt="anim_line" />
-              </span>
-              <span>
-                <img src={line} alt="anim_line" />
-              </span>
-              <span>
-                <img src={line} alt="anim_line" />
-              </span>
+              {[...Array(9)].map((_, index) => (
+                <span key={index}>
+                  <img src={line} alt="anim_line" />
+                </span>
+              ))}
             </div>
             <div className="container">
               <div className="row">
@@ -51,24 +30,32 @@ 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">
                       <li>
-                        <Link to="#">
+                        <a href={process.env.REACT_APP_FACEBOOK}>
                           <i className="icofont-facebook"></i>
-                        </Link>
+                        </a>
                       </li>
                       <li>
-                        <Link to="#">
+                        <a href={process.env.REACT_APP_TWITTER}>
                           <i className="icofont-twitter"></i>
-                        </Link>
+                        </a>
                       </li>
                     </ul>
                   </div>
@@ -78,13 +65,14 @@ 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>
                       </li>
                       <li>
-                        <Link to="/blog">Blog</Link>
+                        <Link to="https://blog.myfit.ai/">Blog</Link>
                       </li>
                       <li>
                         <Link to="/contact">Contact us</Link>
@@ -94,13 +82,13 @@ const Main = ({ footer }) => {
                 </div>
                 <div className="col-lg-3 col-md-6 col-12">
                   <div className="links">
-                    <h3>Help & Suport</h3>
+                    <h3>Help & Support</h3>
                     <ul>
                       <li>
                         <Link to="/faq">FAQs</Link>
                       </li>
                       <li>
-                        <Link to="/#how_it_work">How it works</Link>
+                        <HashLink to="/#how_it_work">How it works</HashLink>
                       </li>
                       <li>
                         <Link to="/terms">Terms & conditions</Link>
@@ -116,14 +104,14 @@ const Main = ({ footer }) => {
                     <h3>Let’s Try Out</h3>
                     <ul className="app_btn">
                       <li>
-                        <Link to="https://play.google.com/store/apps/details?id=com.mermsemr.myfit">
+                        <a href={process.env.REACT_APP_ANDROID_URL}>
                           <img src={blueapp} alt="image" />
-                        </Link>
+                        </a>
                       </li>
                       <li>
-                        <Link to="https://play.google.com/store/apps/details?id=com.mermsemr.myfit">
+                        <a href={process.env.REACT_APP_IOS_URL}>
                           <img src={blue} alt="image" />
-                        </Link>
+                        </a>
                       </li>
                     </ul>
                   </div>
@@ -188,24 +176,32 @@ 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">
                       <li>
-                        <Link to="#">
+                        <a href={process.env.REACT_APP_FACEBOOK}>
                           <i className="icofont-facebook"></i>
-                        </Link>
+                        </a>
                       </li>
                       <li>
-                        <Link to="#">
+                        <a href={process.env.REACT_APP_TWITTER}>
                           <i className="icofont-twitter"></i>
-                        </Link>
+                        </a>
                       </li>
                     </ul>
                   </div>
@@ -231,13 +227,13 @@ const Main = ({ footer }) => {
                 </div>
                 <div className="col-lg-3 col-md-6 col-12">
                   <div className="links">
-                    <h3>Help & Suport</h3>
+                    <h3>Help & Support</h3>
                     <ul>
                       <li>
                         <Link to="/faq">FAQs</Link>
                       </li>
                       <li>
-                        <Link to="/#how_it_work">How it works</Link>
+                        <HashLink to="/#how_it_work">How it works</HashLink>
                       </li>
                       <li>
                         <Link to="/terms">Terms & conditions</Link>
@@ -253,20 +249,14 @@ const Main = ({ footer }) => {
                     <h3>Let’s Try Out</h3>
                     <ul className="app_btn">
                       <li>
-                        <Link to="https://play.google.com/store/apps/details?id=com.mermsemr.myfit">
-                          <img
-                            src="assets/images/appstore_blue.png"
-                            alt="image"
-                          />
-                        </Link>
+                        <a href={process.env.REACT_APP_ANDROID_URL}>
+                          <img src={blueapp} alt="image" />
+                        </a>
                       </li>
                       <li>
-                        <Link to="https://play.google.com/store/apps/details?id=com.mermsemr.myfit">
-                          <img
-                            src="assets/images/googleplay_blue.png"
-                            alt="image"
-                          />
-                        </Link>
+                        <a href={process.env.REACT_APP_IOS_URL}>
+                          <img src={blue} alt="image" />
+                        </a>
                       </li>
                     </ul>
                   </div>
@@ -317,24 +307,32 @@ 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">
                       <li>
-                        <Link to="#">
+                        <a href={process.env.REACT_APP_FACEBOOK}>
                           <i className="icofont-facebook"></i>
-                        </Link>
+                        </a>
                       </li>
                       <li>
-                        <Link to="#">
+                        <a href={process.env.REACT_APP_TWITTER}>
                           <i className="icofont-twitter"></i>
-                        </Link>
+                        </a>
                       </li>
                     </ul>
                   </div>
@@ -373,7 +371,7 @@ const Main = ({ footer }) => {
                         <Link to="#">Support</Link>
                       </li>
                       <li>
-                        <Link to="/work">How it works</Link>
+                        <HashLink to="/#how_it_work">How it works</HashLink>
                       </li>
                       <li>
                         <Link to="/terms">Terms & conditions</Link>
@@ -390,20 +388,14 @@ const Main = ({ footer }) => {
                     <h3>Let’s Try Out</h3>
                     <ul className="app_btn">
                       <li>
-                        <Link to="https://play.google.com/store/apps/details?id=com.mermsemr.myfit">
-                          <img
-                            src="assets/images/appstore_blue.png"
-                            alt="image"
-                          />
-                        </Link>
+                        <a href={process.env.REACT_APP_ANDROID_URL}>
+                          <img src={blueapp} alt="image" />
+                        </a>
                       </li>
                       <li>
-                        <Link to="https://play.google.com/store/apps/details?id=com.mermsemr.myfit">
-                          <img
-                            src="assets/images/googleplay_blue.png"
-                            alt="image"
-                          />
-                        </Link>
+                        <a href={process.env.REACT_APP_IOS_URL}>
+                          <img src={blue} alt="image" />
+                        </a>
                       </li>
                     </ul>
                   </div>
@@ -448,24 +440,32 @@ 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">
                       <li>
-                        <Link to="#">
+                        <a href={process.env.REACT_APP_FACEBOOK}>
                           <i className="icofont-facebook"></i>
-                        </Link>
+                        </a>
                       </li>
                       <li>
-                        <Link to="#">
+                        <a href={process.env.REACT_APP_TWITTER}>
                           <i className="icofont-twitter"></i>
-                        </Link>
+                        </a>
                       </li>
                     </ul>
                   </div>
@@ -495,7 +495,7 @@ const Main = ({ footer }) => {
 
                 <div className="col-lg-3 col-md-6 col-12">
                   <div className="links">
-                    <h3>Help & Suport</h3>
+                    <h3>Help & Support</h3>
                     <ul>
                       <li>
                         <Link to="/faq">FAQs</Link>
@@ -504,7 +504,7 @@ const Main = ({ footer }) => {
                         <Link to="#">Support</Link>
                       </li>
                       <li>
-                        <Link to="/work">How it works</Link>
+                        <HashLink to="/#how_it_work">How it works</HashLink>
                       </li>
                       <li>
                         <Link to="/terms">Terms & conditions</Link>
@@ -521,20 +521,14 @@ const Main = ({ footer }) => {
                     <h3>Let’s Try Out</h3>
                     <ul className="app_btn">
                       <li>
-                        <Link to="https://play.google.com/store/apps/details?id=com.mermsemr.myfit">
-                          <img
-                            src="assets/images/appstore_blue.png"
-                            alt="image"
-                          />
-                        </Link>
+                        <a href={process.env.REACT_APP_ANDROID_URL}>
+                          <img src={blueapp} alt="image" />
+                        </a>
                       </li>
                       <li>
-                        <Link to="https://play.google.com/store/apps/details?id=com.mermsemr.myfit">
-                          <img
-                            src="assets/images/googleplay_blue.png"
-                            alt="image"
-                          />
-                        </Link>
+                        <a href={process.env.REACT_APP_IOS_URL}>
+                          <img src={blue} alt="image" />
+                        </a>
                       </li>
                     </ul>
                   </div>
@@ -587,24 +581,32 @@ 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">
                       <li>
-                        <Link to="#">
+                        <a href={process.env.REACT_APP_FACEBOOK}>
                           <i className="icofont-facebook"></i>
-                        </Link>
+                        </a>
                       </li>
                       <li>
-                        <Link to="#">
+                        <a href={process.env.REACT_APP_TWITTER}>
                           <i className="icofont-twitter"></i>
-                        </Link>
+                        </a>
                       </li>
                     </ul>
                   </div>
@@ -633,7 +635,7 @@ const Main = ({ footer }) => {
                 </div>
                 <div className="col-lg-3 col-md-6 col-12">
                   <div className="links">
-                    <h3>Help & Suport</h3>
+                    <h3>Help & Support</h3>
                     <ul>
                       <li>
                         <Link to="/faq">FAQs</Link>
@@ -642,7 +644,7 @@ const Main = ({ footer }) => {
                         <Link to="#">Support</Link>
                       </li>
                       <li>
-                        <Link to="/work">How it works</Link>
+                        <HashLink to="/#how_it_work">How it works</HashLink>
                       </li>
                       <li>
                         <Link to="/terms">Terms & conditions</Link>
@@ -658,20 +660,14 @@ const Main = ({ footer }) => {
                     <h3>Let’s Try Out</h3>
                     <ul className="app_btn">
                       <li>
-                        <Link to="https://play.google.com/store/apps/details?id=com.mermsemr.myfit">
-                          <img
-                            src="assets/images/appstore_blue.png"
-                            alt="image"
-                          />
-                        </Link>
+                        <a href={process.env.REACT_APP_ANDROID_URL}>
+                          <img src={blueapp} alt="image" />
+                        </a>
                       </li>
                       <li>
-                        <Link to="https://play.google.com/store/apps/details?id=com.mermsemr.myfit">
-                          <img
-                            src="assets/images/googleplay_blue.png"
-                            alt="image"
-                          />
-                        </Link>
+                        <a href={process.env.REACT_APP_IOS_URL}>
+                          <img src={blue} alt="image" />
+                        </a>
                       </li>
                     </ul>
                   </div>

src/component/Home/Main.js

@@ -2,30 +2,23 @@ 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";
+import firstSlide from "../../assets/images/myfitscreenhome.png";
+import secondSlide from "../../assets/images/myfitscreenlogin.png";
+import thirdSlide from "../../assets/images/myfitscreenstartpage.png";
 import frame from "../../assets/images/mobile_frame_svg.svg";
 
 const Main = ({ setfooter, setnavbar, setbrdcum }) => {
@@ -66,33 +59,11 @@ const Main = ({ setfooter, setnavbar, setbrdcum }) => {
       <section className="banner_section home-banner">
         <div className="container">
           <div className="anim_line">
-            <span>
-              <img src={anim} alt="anim_line" />
-            </span>
-            <span>
-              <img src={anim} alt="anim_line" />
-            </span>
-            <span>
-              <img src={anim} alt="anim_line" />
-            </span>
-            <span>
-              <img src={anim} alt="anim_line" />
-            </span>
-            <span>
-              <img src={anim} alt="anim_line" />
-            </span>
-            <span>
-              <img src={anim} alt="anim_line" />
-            </span>
-            <span>
-              <img src={anim} alt="anim_line" />
-            </span>
-            <span>
-              <img src={anim} alt="anim_line" />
-            </span>
-            <span>
-              <img src={anim} alt="anim_line" />
-            </span>
+            {[...Array(9)].map((_, index) => (
+              <span key={index}>
+                <img src={anim} alt="anim_line" />
+              </span>
+            ))}
           </div>
           <div className="row">
             <div
@@ -114,16 +85,16 @@ const Main = ({ setfooter, setnavbar, setbrdcum }) => {
               </div>
               <ul className="app_btn">
                 <li>
-                  <Link to="https://play.google.com/store/apps/details?id=com.mermsemr.myfit">
-                    <img className="blue_img" src={blueapp} alt="image" />
+                  <a href={process.env.REACT_APP_ANDROID_URL}>
+                    <img src={blueapp} alt="image" />
                     <img className="white_img" src={whiteapp} alt="image" />
-                  </Link>
+                  </a>
                 </li>
                 <li>
-                  <Link to="https://play.google.com/store/apps/details?id=com.mermsemr.myfit">
-                    <img className="blue_img" src={blue} alt="image" />
+                  <a href={process.env.REACT_APP_IOS_URL}>
+                    <img src={blue} alt="image" />
                     <img className="white_img" src={white} alt="image" />
-                  </Link>
+                  </a>
                 </li>
               </ul>
             </div>
@@ -146,17 +117,17 @@ const Main = ({ setfooter, setnavbar, setbrdcum }) => {
                 >
                   <div className="item">
                     <div className="slider_img">
-                      <img src={screen} alt="image" />
+                      <img src={firstSlide} alt="image" />
                     </div>
                   </div>
                   <div className="item">
                     <div className="slider_img">
-                      <img src={screen} alt="image" />
+                      <img src={secondSlide} alt="image" />
                     </div>
                   </div>
                   <div className="item">
                     <div className="slider_img">
-                      <img src={screen} alt="image" />
+                      <img src={thirdSlide} alt="image" />
                     </div>
                   </div>
                 </OwlCarousel>

src/component/HomeMain/Download/Main.js

@@ -1,82 +1,97 @@
-import { Link } from 'react-router-dom'
-import React, {useState} from 'react'
-import img from '../../../assets/images/anim_line.png'
-import blueapp from '../../../assets/images/appstore_blue.png'
-import blue from '../../../assets/images/googleplay_blue.png'
-import screen from '../../../assets/images/download-screen01.png'
-import screen1 from '../../../assets/images/download-screen02.png'
-
+import { Link } from "react-router-dom";
+import React, { useState } from "react";
+import img from "../../../assets/images/anim_line.png";
+import blueapp from "../../../assets/images/appstore_blue.png";
+import blue from "../../../assets/images/googleplay_blue.png";
+import screen from "../../../assets/images/download-screen01.png";
+import screen1 from "../../../assets/images/download-screen02.png";
 
 const Main = () => {
-    const [animate, setanimate] = useState()
-   
+  const [animate, setAnimate] = useState(false);
+  const [purple, setPurple] = useState(false);
 
-    const [purple, setpurple] = useState()
-    window.addEventListener('scroll', function() {
-        const element = document.getElementsByClassName('free_text');
-        const position = element[0].getBoundingClientRect();
-        
-        if(position.top < window.innerHeight && position.bottom >= 0) {
-            const elm = document.getElementsByClassName("purple_backdrop");
-            elm[0].style.opacity = "1"; 
-        }else{
-            const elm = document.getElementsByClassName("purple_backdrop");
-            elm[0].style.opacity = "0"; 
+//   useEffect(() => {
+//     const handleScroll = () => {
+//       const element = document.getElementsByClassName("free_text")[0];
+//       const position = element.getBoundingClientRect();
 
-        }
-    });
+//       if (position.top < window.innerHeight && position.bottom >= 0) {
+//         document.getElementsByClassName("purple_backdrop")[0].style.opacity =
+//           "1";
+//       } else {
+//         document.getElementsByClassName("purple_backdrop")[0].style.opacity =
+//           "0";
+//       }
+//     };
+
+//     window.addEventListener("scroll", handleScroll);
+
+//     return () => {
+//       window.removeEventListener("scroll", handleScroll);
+//     };
+//   }, []);
 
   return (
     <>
-        <section className="row_am free_app_section review_freeapp" id="getstarted">
-            <div className="container">
-                <div className={`free_app_inner aos-init ${animate && "aos-animate"}`} data-aos="fade-in" data-aos-duration="1500" data-aos-delay="100"> 
-                    <div className="anim_line dark_bg">
-                        <span><img src={img} alt="anim_line" /></span>
-                        <span><img src={img} alt="anim_line" /></span>
-                        <span><img src={img} alt="anim_line" /></span>
-                        <span><img src={img} alt="anim_line" /></span>
-                        <span><img src={img} alt="anim_line" /></span>
-                        <span><img src={img} alt="anim_line" /></span>
-                        <span><img src={img} alt="anim_line" /></span>
-                        <span><img src={img} alt="anim_line" /></span>
-                        <span><img src={img} alt="anim_line" /></span>
-                    </div>
-                    <div className="row">
-                        <div className="col-md-6">
-                            <div className="free_text">
-                                <div className="section_title">
-                                    <h2>Let’s download free from apple and play store</h2>
-                                    <p>Instant free download from apple and play store orem Ipsum is simply dummy text of the printing.
-                                    and typese tting indus orem Ipsum has beenthe standard</p>
-                                </div>
-                                <ul className="app_btn">
-                                <li>
-                                    <Link to="https://play.google.com/store/apps/details?id=com.mermsemr.myfit">
-                                    <img src={blueapp} alt="image" />
-                                    </Link>
-                                </li>
-                                <li>
-                                    <Link to="https://play.google.com/store/apps/details?id=com.mermsemr.myfit">
-                                    <img src={blue} alt="image" />
-                                    </Link>
-                                </li>
-                                </ul>
-                            </div>
-                        </div>
-                        <div className="col-md-6">
-                            <div className="free_img">
-                                <img src={screen} alt="image" />
-                                <img className="mobile_mockup" src={screen1} alt="image" />
-                            </div>
-                        </div>
-                    </div>
-                </div>
+      <section
+        className={`row_am free_app_section review_freeapp ${
+          animate && "aos-animate"
+        }`}
+        id="getstarted"
+      >
+        <div className="container">
+          <div
+            className="free_app_inner"
+            data-aos="fade-in"
+            data-aos-duration="1500"
+            data-aos-delay="100"
+          >
+            <div className="anim_line dark_bg">
+              {[...Array(9)].map((_, index) => (
+                <span key={index}>
+                  <img src={img} alt="anim_line" />
+                </span>
+              ))}
             </div>
-        </section>
-        <div className="purple_backdrop"></div>
+            <div className="row">
+              <div className="col-md-6">
+                <div className="free_text">
+                  <div className="section_title">
+                    <h2>Let’s download free from apple and play store</h2>
+                    <p>
+                      Instant free download from apple and play store. All you
+                      need is an iPhone or Android device to enjoy all
+                      personalized metrics for personal use. Welcome to myFit
+                      App.
+                    </p>
+                  </div>
+                  <ul className="app_btn">
+                    <li>
+                      <a href={process.env.REACT_APP_ANDROID_URL}>
+                        <img src={blueapp} alt="image" />
+                      </a>
+                    </li>
+                    <li>
+                      <a href={process.env.REACT_APP_IOS_URL}>
+                        <img src={blue} alt="image" />
+                      </a>
+                    </li>
+                  </ul>
+                </div>
+              </div>
+              <div className="col-md-6">
+                <div className="free_img">
+                  <img src={screen} alt="image" />
+                  <img className="mobile_mockup" src={screen1} alt="image" />
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </section>
+      {/* <div className="purple_backdrop"></div> */}
     </>
-  )
-}
+  );
+};
 
-export default Main
+export default Main;

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 (
     <>
@@ -11,77 +24,36 @@ const Main = ({gredient}) => {
             <div className="container">
                 <div className="section_title" data-aos="fade-up" data-aos-duration="1500" data-aos-delay="300">
                     <h2><span>FAQ</span> - Frequently Asked Questions</h2>
-                    <p>Lorem Ipsum is simply dummy text of the printing and typese tting <br/> indus orem Ipsum has beenthe
-                        standard dummy.</p>
+                    <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 className="accordion" id="accordionMyfitFaq">
+
+                        {/* 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="#accordionMyfitFaq">
+                                    <div className="card-body">
+                                        <p>{faq.text}</p>
+                                    </div>
                                 </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>
                 </div>
             </div>

src/component/HomeMain/Features/Main.js

@@ -8,68 +8,11 @@ import img5 from '../../../assets/images/features_frame.png'
 const Main = ({video}) => {
   return (
     <>
-        {video ?
-        <section className="row_am features_section video-features" 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>
-                <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">
-            <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>Lorem Ipsum is simply dummy text of the printing and typese tting <br/> indus orem Ipsum has beenthe
-                    standard dummy.</p>
+                <p>Fitness Integration with your health plan in your pocket bolsters<br/>healthier life by tracking and experiencing life-changing results.</p>
                 </div>
                 <div className="feature_detail">
                 <div className="left_data feature_box">
@@ -77,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/Interface/Main.js

@@ -1,81 +1,92 @@
-import OwlCarousel from 'react-owl-carousel'
-import React from 'react'
-import img1 from '../../../assets/images/screen-1.png'
-import img2 from '../../../assets/images/screen-2.png'
-import img3 from '../../../assets/images/screen-3.png'
-import img4 from '../../../assets/images/screen-4.png'
-import img5 from '../../../assets/images/screen-5.png'
+import OwlCarousel from "react-owl-carousel";
+import React from "react";
+import img1 from "../../../assets/images/myfitstartpage.png";
+import img2 from "../../../assets/images/screen-2.png";
+import img3 from "../../../assets/images/myfithomepage.png";
+import img4 from "../../../assets/images/screen-4.png";
+import img5 from "../../../assets/images/myfitloginpage.png";
 
 const Main = () => {
-
-    const screen_slider = {
-        loop:true,
-        margin:10,
-        nav:false,
-        autoplay: true,
-        smartSpeed: 1500,
-        center: true,
-        dots: true, 
-        responsive:{
-            0:{
-                items:2
-            },
-            600:{
-                items:3
-            },
-            1000:{
-                items:5
-            }
-        }
-    }
+  const screen_slider = {
+    loop: true,
+    margin: 10,
+    nav: false,
+    autoplay: true,
+    smartSpeed: 1500,
+    center: true,
+    dots: true,
+    responsive: {
+      0: {
+        items: 2,
+      },
+      600: {
+        items: 3,
+      },
+      1000: {
+        items: 5,
+      },
+    },
+  };
   return (
     <>
-        <section className="row_am interface_section">
-            <div className="container-fluid">
-                <div className="section_title" data-aos="fade-up" data-aos-duration="1500" data-aos-delay="300">
-                    <h2>Beautifull <span>interface</span></h2>
-                    <p>
-                    Lorem Ipsum is simply dummy text of the printing and typese tting <br/> indus orem Ipsum has beenthe standard dummy.
-                    </p>
+      <section className="row_am interface_section">
+        <div className="container-fluid">
+          <div
+            className="section_title"
+            data-aos="fade-up"
+            data-aos-duration="1500"
+            data-aos-delay="300"
+          >
+            <h2>
+              Beautiful <span>interface</span>
+            </h2>
+            <p>
+              myFit appends a fun yet simple process to keep you consistently
+              <br /> motivated,engaged and moving again without any shrewdness.
+            </p>
+          </div>
+          <div className="screen_slider">
+            <OwlCarousel
+              id="screen_slider"
+              {...screen_slider}
+              className="owl-carousel owl-theme owl-loaded owl-drag"
+            >
+              <div className="item">
+                <div className="screen_frame_img">
+                  <img src={img1} alt="image" />
                 </div>
-                <div className="screen_slider" >
-                    <OwlCarousel id="screen_slider" {...screen_slider} className="owl-carousel owl-theme owl-loaded owl-drag">
-                        <div className="item">
-                            <div className="screen_frame_img">
-                                <img src={img1} alt="image" />
-                            </div>
-                        </div>
-                        <div className="item">
-                            <div className="screen_frame_img">
-                                <img src={img2} alt="image" />
-                            </div>
-                        </div>
-                        <div className="item">
-                            <div className="screen_frame_img">
-                                <img src={img3} alt="image" />
-                            </div>
-                        </div>
-                        <div className="item">
-                            <div className="screen_frame_img">
-                                <img src={img4} alt="image" />
-                            </div>
-                        </div>
-                        <div className="item">
-                            <div className="screen_frame_img">
-                                <img src={img5} alt="image" />
-                            </div>
-                        </div>
-                        <div className="item">
-                            <div className="screen_frame_img">
-                                <img src={img3} alt="image" />
-                            </div>
-                        </div>
-                    </OwlCarousel>
+              </div>
+              <div className="item">
+                <div className="screen_frame_img">
+                  <img src={img2} alt="image" />
                 </div>
-            </div>
-        </section>
+              </div>
+              <div className="item">
+                <div className="screen_frame_img">
+                  <img src={img3} alt="image" />
+                </div>
+              </div>
+              <div className="item">
+                <div className="screen_frame_img">
+                  <img src={img4} alt="image" />
+                </div>
+              </div>
+              <div className="item">
+                <div className="screen_frame_img">
+                  <img src={img5} alt="image" />
+                </div>
+              </div>
+              <div className="item">
+                <div className="screen_frame_img">
+                  <img src={img2} alt="image" />
+                </div>
+              </div>
+            </OwlCarousel>
+          </div>
+        </div>
+      </section>
     </>
-  )
-}
+  );
+};
 
-export default Main
+export default Main;

src/component/HomeMain/Pricing/Main.js

@@ -1,22 +1,47 @@
 import { Link } from 'react-router-dom'
-import React , { useState} from 'react'
+import React , { useState, useEffect} from 'react'
+import AOS from "aos";
 import img1 from '../../../assets/images/standard.png'
 import img2 from '../../../assets/images/unlimited.png'
 import img3 from '../../../assets/images/premium.png'
 
+import SiteService from '../../../vendors/service/siteService'
+
 const Main = ({gredient , video}) => {
-    
+
     const[tog, setTog] = useState()
 
+    const [prices, setPrices] = useState([]); // initial state for FAQs before API call
+
+    const [pricing_text_02, setPricingtext02] = useState('');
+
+    let priceServices = new SiteService(); // instantiating the class
+
+    const getAllPriceData = () => {
+        return priceServices.priceData();
+    };
+
+    useEffect(() => {
+        getAllPriceData().then((data) => {
+            setPricingtext02(data.data.pricing_text_02);
+            setPrices(data.data.pricing) });
+        AOS.init();
+        AOS.refresh();
+    }, []);
+
   return (
     <>
         {gredient ?
             <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>
@@ -24,42 +49,36 @@ const Main = ({gredient , video}) => {
                             <span className={`tog_btn ${tog && "month_active"}`} onClick = {() => setTog(tog === true ? false : true)}></span>
                         </div>
                         <span className="years">Yearly</span>
-                        <span className="offer">50% off</span>
+                        {/* <span className="offer">50% off</span> */}
                     </div>
 
                     <div className={`pricing_pannel monthly_plan ${tog ? '' : 'active'}`}>
                         <div className="row">
-                            <div className="col-md-4">
-                                <div className="pricing_block">
-                                    <div className="icon">
-                                    <img src="assets/images/standard-one.png" alt="image" />
-                                    </div>
-                                    <div className="pkg_name">
-                                    <h3>Standard</h3>
-                                    <span>For the basics</span>
-                                    </div>
-                                    <span className="price">$15</span>
-                                    <ul className="benifits">
-                                    <li>
-                                        <p>Up to 5 Website</p>
-                                    </li>
-                                    <li>
-                                        <p>50 GB disk space</p>
-                                    </li>
-                                    <li>
-                                        <p>10 Customize sub pages</p>
-                                    </li>
-                                    <li>
-                                        <p>2 Domains access</p>
-                                    </li>
-                                    <li>
-                                        <p>Support on request</p>
-                                    </li>
-                                    </ul>
-                                    <Link to="/faq" className="btn white_btn">BUY NOW</Link>
-                                </div>
-                            </div>
-                            <div className="col-md-4">
+
+                        {prices.length > 0 &&
+                                prices.map((price, index) => {
+                                        return (
+                                            <div key={index} className="col-md-4">
+                                                <div className={`pricing_block ${index % 2 == 0? '' : 'highlited_block'}`}>
+                                                    <div className="icon">
+                                                    { video ? <img src="assets/images/standard-one.png" alt="image" /> : <img src={price.icon} alt="image" /> }
+                                                    </div>
+                                                    <div className="pkg_name">
+                                                    <h3>{price.title}</h3>
+                                                    <span>{price.text}</span>
+                                                    </div>
+                                                    <span className="price">{price.price}</span>
+                                                    <ul className="benifits">
+                                                        {price.features.map((feature, index)=> <li key={index}><p>{feature}</p></li>)}
+                                                    </ul>
+                                                    <Link to="/" className="btn white_btn">Start Now</Link>
+                                                </div>
+                                            </div>
+                                        );
+                                })
+                            }
+
+                            {/* <div className="col-md-4">
                                 <div className="pricing_block highlited_block">
                                     <div className="icon">
                                     <img src="assets/images/unlimited-one.png" alt="image"/>
@@ -86,136 +105,39 @@ const Main = ({gredient , video}) => {
                                         <p>24/7 Customer support</p>
                                     </li>
                                     </ul>
-                                    <Link to="/faq" className="btn white_btn">BUY NOW</Link>
+                                    <Link to="/" className="btn white_btn">Start Now</Link>
                                 </div>
-                            </div>
-                            <div className="col-md-4">
-                                <div className="pricing_block">
-                                    <div className="icon">
-                                    <img src="assets/images/premium-one.png" alt="image" />
-                                    </div>
-                                    <div className="pkg_name">
-                                    <h3>Premium</h3>
-                                    <span>For small team</span>
-                                    </div>
-                                    <span className="price">$55</span>
-                                    <ul className="benifits">
-                                    <li>
-                                        <p>Up to 10 Website</p>
-                                    </li>
-                                    <li>
-                                        <p>100 GB disk space</p>
-                                    </li>
-                                    <li>
-                                        <p>15 Customize sub pages</p>
-                                    </li>
-                                    <li>
-                                        <p>4 Domains access</p>
-                                    </li>
-                                    <li>
-                                        <p>24/7 Customer support</p>
-                                    </li>
-                                    </ul>
-                                    <Link to="/faq" className="btn white_btn">BUY NOW</Link>
-                                </div>
-                            </div>
+                            </div> */}
+
                         </div>
                     </div>
 
                     <div className={`pricing_pannel yearly_plan ${tog ? 'active' : ''}`} >
                         <div className="row">
-                            <div className="col-md-4">
-                                <div className="pricing_block">
-                                    <div className="icon">
-                                    <img src="assets/images/standard.png" alt="image" />
-                                    </div>
-                                    <div className="pkg_name">
-                                    <h3>Standard</h3>
-                                    <span>For the basics</span>
-                                    </div>
-                                    <span className="price">$150</span>
-                                    <ul className="benifits">
-                                    <li>
-                                        <p>Up to 10 Website</p>
-                                    </li>
-                                    <li>
-                                        <p>100 GB disk space</p>
-                                    </li>
-                                    <li>
-                                        <p>25 Customize sub pages</p>
-                                    </li>
-                                    <li>
-                                        <p>4 Domains access</p>
-                                    </li>
-                                    <li>
-                                        <p>Support on request</p>
-                                    </li>
-                                    </ul>
-                                    <Link to="/faq" className="btn white_btn">BUY NOW</Link>
-                                </div>
-                            </div>
 
-                            <div className="col-md-4">
-                                <div className="pricing_block highlited_block">
-                                    <div className="icon">
-                                    <img src="assets/images/unlimited.png" alt="image" />
-                                    </div>
-                                    <div className="pkg_name">
-                                    <h3>Unlimited</h3>
-                                    <span>For the professionals</span>
-                                    </div>
-                                    <span className="price">$999</span>
-                                    <ul className="benifits">
-                                    <li>
-                                        <p>Unlimited Website</p>
-                                    </li>
-                                    <li>
-                                        <p>400 GB disk space</p>
-                                    </li>
-                                    <li>
-                                        <p>40 Customize sub pages</p>
-                                    </li>
-                                    <li>
-                                        <p>20 Domains access</p>
-                                    </li>
-                                    <li>
-                                        <p>24/7 Customer support</p>
-                                    </li>
-                                    </ul>
-                                    <Link to="/faq" className="btn white_btn">BUY NOW</Link>
-                                </div>
-                            </div>
+                        {prices.length > 0 &&
+                                prices.map((price, index) => {
+                                        return (
+                                            <div key={index} className="col-md-4">
+                                                <div className={`pricing_block ${index % 2 == 0? '' : 'highlited_block'}`}>
+                                                    <div className="icon">
+                                                    { video ? <img src="assets/images/standard-one.png" alt="image" /> : <img src={price.icon} alt="image" /> }
+                                                    </div>
+                                                    <div className="pkg_name">
+                                                    <h3>{price.title}</h3>
+                                                    <span>{price.text}</span>
+                                                    </div>
+                                                    <span className="price">{price.price_anual}</span>
+                                                    <ul className="benifits">
+                                                        {price.features.map((feature, index)=> <li key={index}><p>{feature}</p></li>)}
+                                                    </ul>
+                                                    <Link to="/" className="btn white_btn">Start Now</Link>
+                                                </div>
+                                            </div>
+                                        );
+                                })
+                            }
 
-                            <div className="col-md-4">
-                                <div className="pricing_block">
-                                    <div className="icon">
-                                    <img src="assets/images/premium.png" alt="image" />
-                                    </div>
-                                    <div className="pkg_name">
-                                    <h3>Premium</h3>
-                                    <span>For small team</span>
-                                    </div>
-                                    <span className="price">$550</span>
-                                    <ul className="benifits">
-                                    <li>
-                                        <p>Up to 20 Website</p>
-                                    </li>
-                                    <li>
-                                        <p>200 GB disk space</p>
-                                    </li>
-                                    <li>
-                                        <p>25 Customize sub pages</p>
-                                    </li>
-                                    <li>
-                                        <p>8 Domains access</p>
-                                    </li>
-                                    <li>
-                                        <p>24/7 Customer support</p>
-                                    </li>
-                                    </ul>
-                                    <Link to="/faq" className="btn white_btn">BUY NOW</Link>
-                                </div>
-                            </div>
                         </div>
                     </div>
 
@@ -226,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>
@@ -236,198 +158,64 @@ const Main = ({gredient , video}) => {
                             <span className={`tog_btn ${tog && "month_active"}`} onClick = {() => setTog(tog === true ? false : true)}></span>
                         </div>
                         <span className="years">Yearly</span>
-                        <span className="offer">50% off</span>
+                        {/* <span className="offer">50% off</span> */}
                     </div>
 
                     <div className={`pricing_pannel monthly_plan ${tog ? '' : 'active'}`}>
                         <div className="row">
-                            <div className="col-md-4">
-                                <div className="pricing_block">
-                                    <div className="icon">
-                                    { video ? <img src="assets/images/standard-one.png" alt="image" /> : <img src={img1} alt="image" /> }
-                                    </div>
-                                    <div className="pkg_name">
-                                    <h3>Standard</h3>
-                                    <span>For the basics</span>
-                                    </div>
-                                    <span className="price">$15</span>
-                                    <ul className="benifits">
-                                    <li>
-                                        <p>Up to 5 Website</p>
-                                    </li>
-                                    <li>
-                                        <p>50 GB disk space</p>
-                                    </li>
-                                    <li>
-                                        <p>10 Customize sub pages</p>
-                                    </li>
-                                    <li>
-                                        <p>2 Domains access</p>
-                                    </li>
-                                    <li>
-                                        <p>Support on request</p>
-                                    </li>
-                                    </ul>
-                                    <Link to="/faq" className="btn white_btn">BUY NOW</Link>
-                                </div>
-                            </div>
-                            <div className="col-md-4">
-                                <div className="pricing_block highlited_block">
-                                    <div className="icon">
-                                    { video ? <img src="assets/images/unlimited-one.png" alt="image"/> : <img src={img2} alt="image"/> }
-                                    </div>
-                                    <div className="pkg_name">
-                                    <h3>Unlimited</h3>
-                                    <span>For the professionals</span>
-                                    </div>
-                                    <span className="price">$99</span>
-                                    <ul className="benifits">
-                                    <li>
-                                        <p>Unlimited Website</p>
-                                    </li>
-                                    <li>
-                                        <p>200 GB disk space</p>
-                                    </li>
-                                    <li>
-                                        <p>20 Customize sub pages</p>
-                                    </li>
-                                    <li>
-                                        <p>10 Domains access</p>
-                                    </li>
-                                    <li>
-                                        <p>24/7 Customer support</p>
-                                    </li>
-                                    </ul>
-                                    <Link to="/faq" className="btn white_btn">BUY NOW</Link>
-                                </div>
-                            </div>
-                            <div className="col-md-4">
-                                <div className="pricing_block">
-                                    <div className="icon">
-                                    {video ? <img src="assets/images/premium-one.png" alt="image" /> : <img src={img3} alt="image" /> }
-                                    </div>
-                                    <div className="pkg_name">
-                                    <h3>Premium</h3>
-                                    <span>For small team</span>
-                                    </div>
-                                    <span className="price">$55</span>
-                                    <ul className="benifits">
-                                    <li>
-                                        <p>Up to 10 Website</p>
-                                    </li>
-                                    <li>
-                                        <p>100 GB disk space</p>
-                                    </li>
-                                    <li>
-                                        <p>15 Customize sub pages</p>
-                                    </li>
-                                    <li>
-                                        <p>4 Domains access</p>
-                                    </li>
-                                    <li>
-                                        <p>24/7 Customer support</p>
-                                    </li>
-                                    </ul>
-                                    <Link to="/faq" className="btn white_btn">BUY NOW</Link>
-                                </div>
-                            </div>
+
+                            {prices.length > 0 &&
+                                prices.map((price, index) => {
+                                        return (
+                                            <div key={index} className="col-md-4">
+                                                <div className={`pricing_block ${index % 2 == 0? '' : 'highlited_block'}`}>
+                                                    <div className="icon">
+                                                    { video ? <img src="assets/images/standard-one.png" alt="image" /> : <img src={price.icon} alt="image" /> }
+                                                    </div>
+                                                    <div className="pkg_name">
+                                                    <h3>{price.title}</h3>
+                                                    <span>{price.text}</span>
+                                                    </div>
+                                                    <span className="price">{price.price}</span>
+                                                    <ul className="benifits">
+                                                        {price.features.map((feature, index)=> <li key={index}><p>{feature}</p></li>)}
+                                                    </ul>
+                                                    <Link to="/" className="btn white_btn">Start Now</Link>
+                                                </div>
+                                            </div>
+                                        );
+                                   })
+                            }
+
                         </div>
                     </div>
 
                     <div className={`pricing_pannel yearly_plan ${tog ? 'active' : ''}`} >
                         <div className="row">
-                            <div className="col-md-4">
-                                <div className="pricing_block">
-                                    <div className="icon">
-                                    { video ? <img src="assets/images/standard-one.png" alt="image" /> : <img src={img1} alt="image" /> }
-                                    </div>
-                                    <div className="pkg_name">
-                                    <h3>Standard</h3>
-                                    <span>For the basics</span>
-                                    </div>
-                                    <span className="price">$150</span>
-                                    <ul className="benifits">
-                                    <li>
-                                        <p>Up to 10 Website</p>
-                                    </li>
-                                    <li>
-                                        <p>100 GB disk space</p>
-                                    </li>
-                                    <li>
-                                        <p>25 Customize sub pages</p>
-                                    </li>
-                                    <li>
-                                        <p>4 Domains access</p>
-                                    </li>
-                                    <li>
-                                        <p>Support on request</p>
-                                    </li>
-                                    </ul>
-                                    <Link to="/faq" className="btn white_btn">BUY NOW</Link>
-                                </div>
-                            </div>
 
-                            <div className="col-md-4">
-                                <div className="pricing_block highlited_block">
-                                    <div className="icon">
-                                    { video ? <img src="assets/images/unlimited-one.png" alt="image"/> : <img src={img2}alt="image"/> }
-                                    </div>
-                                    <div className="pkg_name">
-                                    <h3>Unlimited</h3>
-                                    <span>For the professionals</span>
-                                    </div>
-                                    <span className="price">$999</span>
-                                    <ul className="benifits">
-                                    <li>
-                                        <p>Unlimited Website</p>
-                                    </li>
-                                    <li>
-                                        <p>400 GB disk space</p>
-                                    </li>
-                                    <li>
-                                        <p>40 Customize sub pages</p>
-                                    </li>
-                                    <li>
-                                        <p>20 Domains access</p>
-                                    </li>
-                                    <li>
-                                        <p>24/7 Customer support</p>
-                                    </li>
-                                    </ul>
-                                    <Link to="/faq" className="btn white_btn">BUY NOW</Link>
-                                </div>
-                            </div>
+                        {prices.length > 0 &&
+                                prices.map((price, index) => {
+                                        return (
+                                            <div key={index} className="col-md-4">
+                                                <div className={`pricing_block ${index % 2 == 0? '' : 'highlited_block'}`}>
+                                                    <div className="icon">
+                                                    { video ? <img src="assets/images/standard-one.png" alt="image" /> : <img src={price.icon} alt="image" /> }
+                                                    </div>
+                                                    <div className="pkg_name">
+                                                    <h3>{price.title}</h3>
+                                                    <span>{price.text}</span>
+                                                    </div>
+                                                    <span className="price">{price.price_anual}</span>
+                                                    <ul className="benifits">
+                                                        {price.features.map((feature, index)=> <li key={index}><p>{feature}</p></li>)}
+                                                    </ul>
+                                                    <Link to="/" className="btn white_btn">Start Now</Link>
+                                                </div>
+                                            </div>
+                                        );
+                                })
+                            }
 
-                            <div className="col-md-4">
-                                <div className="pricing_block">
-                                    <div className="icon">
-                                    {video ? <img src="assets/images/premium-one.png" alt="image" /> : <img src={img3} alt="image" /> }
-                                    </div>
-                                    <div className="pkg_name">
-                                    <h3>Premium</h3>
-                                    <span>For small team</span>
-                                    </div>
-                                    <span className="price">$550</span>
-                                    <ul className="benifits">
-                                    <li>
-                                        <p>Up to 20 Website</p>
-                                    </li>
-                                    <li>
-                                        <p>200 GB disk space</p>
-                                    </li>
-                                    <li>
-                                        <p>25 Customize sub pages</p>
-                                    </li>
-                                    <li>
-                                        <p>8 Domains access</p>
-                                    </li>
-                                    <li>
-                                        <p>24/7 Customer support</p>
-                                    </li>
-                                    </ul>
-                                    <Link to="/faq" className="btn white_btn">BUY NOW</Link>
-                                </div>
-                            </div>
                         </div>
                     </div>
 

src/component/HomeMain/Story/Main.js

@@ -1,20 +1,68 @@
-import { Link } from 'react-router-dom'
-import React from 'react'
-import story1 from '../../../assets/images/story01.png'
-import story2 from '../../../assets/images/story02.png'
-import story3 from '../../../assets/images/story03.png'
+import React, { useEffect, useState } from "react";
+import { Link } from 'react-router-dom';
+// import story1 from '../../../assets/images/story01.png';
+// import story2 from '../../../assets/images/story02.png';
+// import story3 from '../../../assets/images/story03.png';
+import SiteService from "../../../vendors/service/siteService";
+
 
 const Main = () => {
+    const [blogData, setBlogData] = useState([]);
+
+  let api = new SiteService();
+  useEffect(() => {
+    getBlogData();
+  }, []);
+
+  const getBlogData = async () => { 
+      try {
+        let res = await api.blogData();
+        setBlogData(res.data);
+       
+      } catch (error) {
+        console.log("Error from blog data ", error);
+      }    
+  };
+  
   return (
     <>
         <section className="row_am latest_story" id="blog">
             <div className="container">
                 <div className="section_title" data-aos="fade-in" data-aos-duration="1500" data-aos-delay="100">
                     <h2>Read latest <span>story</span></h2>
-                    <p>Lorem Ipsum is simply dummy text of the printing and typese tting <br/> indus orem Ipsum has beenthe standard dummy.</p>
                 </div>
                 <div className="row">
-                    <div className="col-md-4">
+                  
+                { (blogData !== undefined) && (blogData?.length > 0) && blogData.slice(1, 4).map((data, index) => (
+              <div
+                className="col-md-4"
+                key={index}>
+                <div
+                  className="story_box"
+                  data-aos="fade-up"
+                  data-aos-duration="1500">
+                  <div className="story_img">
+                    <img
+                      src={data.meta_value}
+                      alt="image"
+                    />
+                    <span>{new Date(data.post_date).toDateString()}</span>
+                  </div>
+                  <div className="story_text">
+                    <h3>{data.post_title}</h3>
+                    <div
+                      dangerouslySetInnerHTML={{
+                        __html: data.post_content.substring(0, 100) + "  . . .",
+                      }}></div>
+                      <Link to={`/blogdetails/${data.id}`} state={{data, allData: blogData}}>
+                                 READ MORE
+                            </Link>
+                    {/* <Link to={`/blogdetails/${item.id}`}>READ MORE</Link> */}
+                  </div>
+                </div>
+              </div>
+            ))}
+                    {/* <div className="col-md-4">
                         <div className="story_box" data-aos="fade-up" data-aos-duration="1500">
                             <div className="story_img">
                             <img src={story1} alt="image" />
@@ -53,7 +101,7 @@ const Main = () => {
                                 <Link to="/blog-single">READ MORE</Link>
                             </div>
                         </div>
-                    </div>
+                    </div> */}
                 </div>
             </div>
         </section> 

src/component/HomeMain/Work/Main.js

@@ -1,14 +1,15 @@
 import React , {useState} from 'react'
 import { Link } from 'react-router-dom'
-import img from '../../../assets/images/download_app.jpg'
-import img1 from '../../../assets/images/create_account.jpg'
-import img2 from '../../../assets/images/enjoy_app.jpg'
+import img from '../../../assets/images/appdownload.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'
 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)
@@ -20,8 +21,7 @@ const Main = ({dark}) => {
                 <div className={`how_it_inner ${dark && "dark"}`}>
                     <div className="section_title" data-aos="fade-up" data-aos-duration="1500" data-aos-delay="300">
                         <h2><span>How it works</span> - 3 easy steps</h2>
-                        <p>Lorem Ipsum is simply dummy text of the printing and typese tting <br/> indus orem Ipsum has beenthe
-                        standard dummy.</p>
+                        <p>myFit has powerful connectivity, fitness, health, and safety features,<br/> Also makes provision Fitness tracking,Workout tracking,Heart rate monitoring.</p>
                     </div>
                     <div className="step_block">
                         <ul>
@@ -29,8 +29,8 @@ const Main = ({dark}) => {
                                 <div className="step_text" data-aos="fade-right" data-aos-duration="1500">
                                 <h4>Download app</h4>
                                 <div className="app_icon">
-                                    <Link to={process.env.REACT_APP_ANDROID_URL}><i className="icofont-brand-android-robot"></i></Link>
-                                    <Link to={process.env.REACT_APP_IOS_URL}><i className="icofont-brand-apple"></i></Link>
+                                    <a href={process.env.REACT_APP_ANDROID_URL}><i className="icofont-brand-android-robot"></i></a>
+                                    <a href={process.env.REACT_APP_IOS_URL}><i className="icofont-brand-apple"></i></a>
                                 </div>
                                 <p>Download App either for Mac or Android</p>
                                 </div>
@@ -44,20 +44,20 @@ const Main = ({dark}) => {
                             <li>
                                 <div className="step_text" data-aos="fade-left" data-aos-duration="1500">
                                 <h4>Create account</h4>
-                                <span>14 days free trial</span>
+                                <span>Free Account</span>
                                 <p>Sign up free for App account. One account for all devices.</p>
                                 </div>
                                 <div className="step_number"> 
                                 <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>
                                 <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/Navbar/Main.js

@@ -55,7 +55,7 @@ const Main = ({navbar}) => {
                                 <Link to="/contact" className="nav-link" >Contact</Link>
                             </li>
                             <li className="nav-item">
-                                <Link to={process.env.REACT_APP_APPSITE} className="nav-link dark_btn">GET STARTED</Link>
+                                <a href={process.env.REACT_APP_APPSITE} className="nav-link dark_btn">GET STARTED</a>
                             </li>
                         </ul>
                     </div>
@@ -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>
@@ -286,7 +289,7 @@ const Main = ({navbar}) => {
                                 <span className="drp_btn" ><i className="icofont-rounded-down"></i></span>
                                 <div className="sub_menu" style={{ display: show ? "block" : "none" }}>
                                 <ul>
-                                    <li><Link to="/">Home Defoult</Link></li>
+                                    <li><Link to="/">Home Default</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>
@@ -359,7 +363,7 @@ const Main = ({navbar}) => {
                                 <span className="drp_btn" ><i className="icofont-rounded-down"></i></span>
                                 <div className="sub_menu">
                                 <ul>
-                                    <li><Link to="/">Home Defoult</Link></li>
+                                    <li><Link to="/">Home Default</Link></li>
                                   
                                   
                                 </ul>
@@ -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>
@@ -404,7 +409,7 @@ const Main = ({navbar}) => {
                                 <span className="drp_btn" ><i className="icofont-rounded-down"></i></span>
                                 <div className="sub_menu" style={{ display: show ? "block" : "none" }}>
                                 <ul>
-                                    <li><Link to="/">Home Defoult</Link></li>
+                                    <li><Link to="/">Home Default</Link></li>
                                   
                                   
                                 </ul>
@@ -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>
@@ -477,7 +483,7 @@ const Main = ({navbar}) => {
                                 <span className="drp_btn" ><i className="icofont-rounded-down"></i></span>
                                 <div className="sub_menu">
                                 <ul>
-                                    <li><Link to="/">Home Defoult</Link></li>
+                                    <li><Link to="/">Home Default</Link></li>
                                   
                                   
                                 </ul>
@@ -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>
@@ -533,7 +540,7 @@ const Main = ({navbar}) => {
                                 <span className="drp_btn" ><i className="icofont-rounded-down"></i></span>
                                 <div className="sub_menu" style={{ display: show ? "block" : "none" }}>
                                 <ul>
-                                    <li><Link to="/">Home Defoult</Link></li>
+                                    <li><Link to="/">Home Default</Link></li>
                                    
                                    
                                 </ul>
@@ -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/Pages/Faq/Main.js

@@ -1,20 +1,39 @@
 import React , { useState , useEffect} from 'react'
 import { Link } from 'react-router-dom'
+import blueapp from "../../../assets/images/appstore_blue.png"
+import blue from "../../../assets/images/googleplay_blue.png"
 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 Faq from '../../HomeMain/Faq/Main'
+import screen from '../../../assets/images/download-screen01.png'
+import screen1 from '../../../assets/images/download-screen02.png'
+
+import SiteService from '../../../vendors/service/siteService'
 
 const Main = ({brdcum}) => {
 
-    const[activeFaq, setActiveFaq] = useState({a : true})
+    // const[activeFaq, setActiveFaq] = useState({btn0 : false})
+
+    // const [faqs, setFaqs] = useState([]); // initial state for FAQs before API call
+
+    // let faqServices = new SiteService(); // instantiating the class
+
+    // const allFaqData = () => {
+    //     return faqServices.faqData();
+    // };
+
+    // useEffect(() => {
+    //     allFaqData().then((data) => setFaqs(data.data));
+    // }, []);
   return (
     <>
         {brdcum.b1 && 
         <Bredcrumb 
             no={1}
             title="Have questions? look here" 
-            paragraph="Lorem Ipsum is simply dummy text of the printing and typesetting"
+            paragraph="Learn more about myFit  through answers to frequently asked questions."
             tag="Faq" 
             bgimg={BGImg}/>}
 
@@ -22,7 +41,7 @@ const Main = ({brdcum}) => {
         <Bredcrumb 
             no={2}
             title="Have questions? look here" 
-            paragraph="Lorem Ipsum is simply dummy text of the printing and typesetting"
+            paragraph="Learn more about myFit  through answers to frequently asked questions."
             tag="Faq" 
             bgimg={BGImg1}/>}
 
@@ -30,7 +49,7 @@ const Main = ({brdcum}) => {
         <Bredcrumb 
         no={5}
         title="Have questions? look here" 
-        paragraph="Lorem Ipsum is simply dummy text of the printing and typesetting"
+        paragraph="Learn more about myFit  through answers to frequently asked questions."
         tag="Faq" 
         bgimg={BGImg}/>}
 
@@ -38,22 +57,22 @@ const Main = ({brdcum}) => {
         <Bredcrumb 
             no={3}
             title="Have questions? look here" 
-            paragraph="Lorem Ipsum is simply dummy text of the printing and typesetting"
+            paragraph="Learn more about myFit  through answers to frequently asked questions."
             tag="Faq" />}
 
         {brdcum.b4 && 
         <Bredcrumb 
             no={4}
             title="Have questions? look here" 
-            paragraph="Lorem Ipsum is simply dummy text of the printing and typesetting"
+            paragraph="Learn more about myFit  through answers to frequently asked questions."
             tag="Faq" 
             bgimg={BGImg2}/>}
 
-
-        <section className="row_am faq_section">
+        {/* <section className="row_am faq_section">
             <div className="container">
                 <div className="faq_panel">
                     <div className="accordion" id="accordionExample">
+
                         <div className="card" data-aos="fade-up" >
                             <div className="card-header" id="headingOne">
                                 <h2 className="mb-0">
@@ -70,6 +89,7 @@ const Main = ({brdcum}) => {
                                 </div>
                             </div>
                         </div>
+
                         <div className="card" data-aos="fade-up" >
                             <div className="card-header" id="headingTwo">
                                 <h2 className="mb-0">
@@ -183,7 +203,10 @@ const Main = ({brdcum}) => {
                     </div>
                 </div>
             </div>
-        </section>
+        </section> */}
+
+        <Faq />
+
         <section className="row_am free_app_section review_freeapp" id="getstarted">
             <div className="container">
                 <div className="free_app_inner aos-init" data-aos="fade-in" data-aos-duration="1500" data-aos-delay="100"> 
@@ -203,27 +226,31 @@ const Main = ({brdcum}) => {
                             <div className="free_text">
                                 <div className="section_title">
                                     <h2>Let’s download free from apple and play store</h2>
-                                    <p>Instant free download from apple and play store orem Ipsum is simply dummy text of the printing.
-                                    and typese tting indus orem Ipsum has beenthe standard</p>
+                                    <p>Instant free download from apple and play store. All you need is an iPhone or Android device to enjoy all personalized metrics for personal use. Welcome to myFit App.</p>
                                 </div>
                                 <ul className="app_btn">
-                                <li>
-                                    <Link to="#">
-                                    <img src="assets/images/appstore_blue.png" alt="image" />
-                                    </Link>
-                                </li>
-                                <li>
-                                    <Link to="#">
-                                    <img src="assets/images/googleplay_blue.png" alt="image" />
-                                    </Link>
-                                </li>
+                                    <li>
+                                        <a href={process.env.REACT_APP_ANDROID_URL}>
+                                        <img src={blueapp} alt="image" />
+                                        </a>
+                                    </li>
+                                    <li>
+                                        <a href={process.env.REACT_APP_IOS_URL}>
+                                        <img src={blue} alt="image" />
+                                        </a>
+                                    </li>
+
                                 </ul>
                             </div>
                         </div>
                         <div className="col-md-6">
-                            <div className="free_img">
+                            {/* <div className="free_img">
                                 <img src="assets/images/download-screen01.png" alt="image" />
                                 <img className="mobile_mockup" src="assets/images/download-screen02.png" alt="image" />
+                            </div> */}
+                            <div className="free_img">
+                                <img src={screen} alt="image" />
+                                <img className="mobile_mockup" src={screen1} alt="image" />
                             </div>
                         </div>
                     </div>

src/component/Pages/Review/Main.js

@@ -4,6 +4,10 @@ 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 screen from '../../../assets/images/download-screen01.png'
+import screen1 from '../../../assets/images/download-screen02.png'
+import blueapp from "../../../assets/images/appstore_blue.png";
+import blue from "../../../assets/images/googleplay_blue.png";
 
 const Main = ({brdcum}) => {
 
@@ -326,27 +330,30 @@ const Main = ({brdcum}) => {
                             <div className="free_text">
                                 <div className="section_title">
                                     <h2>Let’s download free from apple and play store</h2>
-                                    <p>Instant free download from apple and play store orem Ipsum is simply dummy text of the printing.
-                                    and typese tting indus orem Ipsum has beenthe standard</p>
+                                   <p>Instant free download from apple and play store. All you need is an iPhone or Android device to enjoy all personalized metrics for personal use. Welcome to myFit App.</p>
                                 </div>
-                                <ul className="app_btn">
+                                 <ul className="app_btn">
                                 <li>
-                                    <Link to="#">
-                                    <img src="assets/images/appstore_blue.png" alt="image" />
-                                    </Link>
+                                    <a href={process.env.REACT_APP_ANDROID_URL}>
+                                    <img src={blueapp} alt="image" />
+                                    </a>
                                 </li>
                                 <li>
-                                    <Link to="#">
-                                    <img src="assets/images/googleplay_blue.png" alt="image" />
-                                    </Link>
+                                    <a href={process.env.REACT_APP_IOS_URL}>
+                                    <img src={blue} alt="image" />
+                                    </a>
                                 </li>
                                 </ul>
                             </div>
                         </div>
                         <div className="col-md-6">
-                            <div className="free_img">
+                            {/* <div className="free_img">
                                 <img src="assets/images/download-screen01.png" alt="image" />
                                 <img className="mobile_mockup" src="assets/images/download-screen02.png" alt="image" />
+                            </div> */}
+                            <div className="free_img">
+                                <img src={screen} alt="image" />
+                                <img className="mobile_mockup" src={screen1} alt="image" />
                             </div>
                         </div>
                     </div>
@@ -357,4 +364,4 @@ const Main = ({brdcum}) => {
   )
 }
 
-export default Main
+export default Main

src/component/Pricing/Main.js

@@ -1,10 +1,16 @@
 import { Link } from 'react-router-dom'
 import React , {useState ,useEffect} from 'react'
 import Pricing from '../HomeMain/Pricing/Main'
+import Faq from '../HomeMain/Faq/Main'
 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 blueapp from "../../assets/images/appstore_blue.png";
+import blue from "../../assets/images/googleplay_blue.png";
+import screen from '../../assets/images/download-screen01.png'
+import screen1 from '../../assets/images/download-screen02.png'
+
 
 
 const Main = ({brdcum}) => {
@@ -16,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}/>}
 
@@ -24,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}/>}
 
@@ -32,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}/>}
 
@@ -41,19 +47,20 @@ 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}/>}
 
         <Pricing/>
-        <section className="row_am faq_section">
+        <Faq />
+        {/* <section className="row_am faq_section">
             <div className="container">
                 <div className="faq_panel">
                     <div className="accordion" id="accordionExample">
@@ -187,7 +194,7 @@ const Main = ({brdcum}) => {
             </div>
             </div>
         </div>
-        </section>
+        </section> */}
         <section className="row_am free_app_section review_freeapp" id="getstarted">
             <div className="container">
                 <div className="free_app_inner aos-init" data-aos="fade-in" data-aos-duration="1500" data-aos-delay="100"> 
@@ -207,27 +214,27 @@ const Main = ({brdcum}) => {
                             <div className="free_text">
                                 <div className="section_title">
                                     <h2>Let’s download free from apple and play store</h2>
-                                    <p>Instant free download from apple and play store orem Ipsum is simply dummy text of the printing.
-                                    and typese tting indus orem Ipsum has beenthe standard</p>
+                                   <p>Instant free download from apple and play store. All you need is an iPhone or Android device to enjoy all personalized metrics for personal use. Welcome to myFit App.</p>
                                 </div>
                                 <ul className="app_btn">
-                                <li>
-                                    <Link to="#">
-                                    <img src="assets/images/appstore_blue.png" alt="image" />
-                                    </Link>
-                                </li>
-                                <li>
-                                    <Link to="#">
-                                    <img src="assets/images/googleplay_blue.png" alt="image" />
-                                    </Link>
-                                </li>
+                                     <li>
+                                        <a href={process.env.REACT_APP_ANDROID_URL}>
+                                        <img src={blueapp} alt="image" />
+                                        </a>
+                                    </li>
+                                    <li>
+                                        <a href={process.env.REACT_APP_IOS_URL}>
+                                        <img src={blue} alt="image" />
+                                        </a>
+                                    </li>
+
                                 </ul>
                             </div>
                         </div>
                         <div className="col-md-6">
-                            <div className="free_img">
-                                <img src="assets/images/download-screen01.png" alt="image" />
-                                <img className="mobile_mockup" src="assets/images/download-screen02.png" alt="image" />
+                        <div className="free_img">
+                                <img src={screen} alt="image" />
+                                <img className="mobile_mockup" src={screen1} alt="image" />
                             </div>
                         </div>
                     </div>

src/component/Privacy/Main.js

@@ -6,86 +6,431 @@ 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"
 
-const Main = ({brdcum}) => {
-    
-  return (
-    <>
-        
-     
-        <Bredcrumb 
-        no={1}
-        title="Privacy" 
-        tag="Privacy" 
-        bgimg={BGImg}/>
-
-
+const Main = ({ brdcum }) => {
+    return (
+      <>
+        <Bredcrumb no={1} title="Privacy" tag="Privacy" bgimg={BGImg} />
+  
         <section className="blog_detail_section">
-            <div className="container">
-                <div className="blog_inner_pannel">
-                 
-                    <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">
-                                <img src="assets/images/blog_d02.png" alt="image" />
-                            </div>
-                            <div className="text">
-                                <h3>Name of App</h3>
-                            </div>
-                        </div>
-                        <div className="social_media">
-                            <ul>
-                                <li><Link to="#"><i className="icofont-facebook"></i></Link></li>
-                                <li><Link to="#"><i className="icofont-twitter"></i></Link></li>
-                            </ul>
-                        </div>
-                    </div>
-                    <div className="blog_tags">
-                        <ul>
-                        <li className="tags"><p>Updated:</p></li>
-                        <li><span>01-01-2023</span></li>
-                        </ul>
-                    </div>
+          <div className="container">
+            <div className="blog_inner_pannel">
+              <div className="info">
+                <h3>MERMS PRIVACY POLICY</h3>
+                <p>Last Updated: 02/04/2021</p>
+                <p>
+                  myFit . ("MERMS myFit") is committed to upholding the privacy
+                  rights of individuals. This Privacy Policy explains the
+                  collection, use, purpose, and sharing of personally identifiable
+                  information ("PII") related to the use of Merms's myFit website
+                  https://myfit.mermsemr.com/ , MERMS providing of services to our
+                  users ("Partners"), or from our employees. PII does not include
+                  information that is anonymized or aggregated, and other
+                  information which is excluded from the scope of applicable
+                  privacy laws.
+                </p>
+  
+                <p>
+                  myFit does not require you to register or provide PII to visit
+                  our website. By accessing our website or purchasing our
+                  services, you agree to this Privacy Policy in addition to any
+                  other agreements we might have with you.
+                </p>
+  
+                <p>
+                  myFit complies with the EU-U.S. Privacy Shield Framework as set
+                  forth by the U.S. Department of Commerce regarding the
+                  collection, use, and retention of all personal information
+                  transferred from the European Union to the United States.
+                </p>
+  
+                <p>
+                  myFit adheres to the Privacy Shield Principles, and is subject
+                  to the investigatory and enforcement powers of the Federal Trade
+                  Commission. If there is any conflict between the terms in this
+                  Privacy Policy and the Privacy Shield Principles, the Privacy
+                  Shield Principles shall govern.
+                </p>
+  
+                <p>
+                  Provides its services (described below) to you through its
+                  website located at https://myfit.mermsemr.com/ (the "Site") and
+                  through its mobile applications and related services
+                  (collectively, such services, including any new features and
+                  applications, and the Site, the "Service(s)"), subject to the
+                  following Terms of Service (as amended from time to time, the
+                  "Terms of Service").
+                </p>
+  
+                <h3>ADDITIONAL TERMS</h3>
+                <p>
+                Your use of the Services is at all times subject to our separate Terms of Use or such other customer or user agreement between myFit and the entity through which you access and use the Services, which incorporates this Privacy Policy. We use any terms in this Privacy Policy without defining them with the definitions given to them in our Terms of Use.
+                </p>
+  
+                <h4>Access and Use of the Service</h4>
+  
+                <p>Services Description: Our Services are designed to provide you with personal health information platform service that helps you to manage the intricacies of your daily and long term health activities. It allows you to consolidate, track and optimize your health habits. Our Services may include health plan to track your health, organizing your prescription, health routines. Health tips, help you manage both general and the few health questions relevant to you. Health Records. Record you control your information. Your health record is yours at all point; you decide your provider access as needed from time to time. Add family record and determine how you want your providers to access your record, including Health Stats that collect your health statistics yourself, weight changes, blood pressure, blood glucose data, and ensure that your provider is creating plans that fit you precisely. We may provide certain recommendations based on your health habits. Our Services may also present you information relating to third-party products or services ("myFit Offers") that you may be interested in. The Services may also provide you with general tips, recommendations and educational material.</p>
+  
+                <p>Access to Third Party Service Accounts: To use certain features of the Services, you may elect to grant myFit access to your accounts with certain third-party platforms for myFit to obtain certain history information about you. myFit will only use this information to provide you with the Services or in an aggregated and anonymized manner to generally improve its products and services. You represent that you are entitled to grant us access for this purpose, without any obligation by myFit to pay any fees or be subject to any restrictions or limitations. Using the Services, you expressly authorize myFit to access your account information maintained by identified third parties, on your behalf as your agent, and you expressly authorize such third parties to disclose your information to us. When you use the "Add Accounts" feature of the Services, you will be directly connected to the website for the third party you have identified. myFit will submit information including usernames and passwords that you provide to log into the Site. You hereby authorize and permit myFit to use and store the information submitted by you to accomplish the foregoing and configure the Services to be compatible with the third party sites for which you submit your information. For purposes of this Agreement and solely to provide the account information to you as part of the Services, you grant myFit a limited power of attorney, and appoint myFit as your attorney-in-fact and agent, to access third party sites, retrieve and use your information with the full power and authority to do and perform each thing necessary in connection with such activities, as you could do in person.</p>
+  
+                <p>YOU ACKNOWLEDGE AND AGREE THAT WHEN myFit IS ACCESSING AND RETRIEVING ACCOUNT INFORMATION FROM THIRD PARTY SITES, myFit IS ACTING AS YOUR AGENT, AND NOT AS THE AGENT OF OR ON BEHALF OF THE THIRD PARTY THAT OPERATES THE THIRD PARTY SITE. You understand and agree that the Services are not sponsored or endorsed by any third parties accessible through the Services. myFit is not responsible for any payment processing errors or fees or other Services-related issues, including those issues that may arise from inaccurate account information.</p>
+  
+                <p>Your Registration Obligations: You may be required to register with myFit to access and use certain Service features. If you choose to register for the Service, you agree to provide and maintain true, accurate, current and complete information about yourself as prompted by the Service's registration form. Our Privacy Policy governs registration data and certain other information about you. If you are under 13 years of age, you cannot use the Service, with or without registering. Also, if you are under 18 years old, you may use the Service, with or without registering, only with your parent or guardian's approval.</p>
+  
+                <p>Member Account, Password and Security: You are responsible for maintaining the confidentiality of your password and account, if any, and are fully responsible for any activities that occur under your password or account. You agree to (a) immediately notify myFit of any unauthorized use of your password or account or any other breach of security, and (b) ensure that you exit from your account at the end of each session when accessing the Service. myFit will not be liable for any loss or damage arising from your failure to comply with this Section.</p>
+  
+                <p>Modifications to Service: myFit reserves the right to modify or discontinue, temporarily or permanently, the Service (or any part thereof) with or without notice. You agree that myFit will not be liable to you or to any third party for any modification, suspension or discontinuance of the Service.</p>
+  
+                <p>General Practices Regarding Use and Storage: You acknowledge that myFit may establish general practices and limits concerning use of the Service, including without limitation the maximum period of time that data or other content will be retained by the Service and the maximum storage space that will be allotted on myFit servers on your behalf. You agree that myFit has no responsibility or liability for the deletion or failure to store any data or other content maintained or uploaded by the Service. You acknowledge that myFit reserves the right to terminate accounts that are inactive for an extended period of time. You further acknowledge that myFit reserves the right to change these general practices and limits at any time, in its sole discretion, with or without notice.</p>
+  
+                <p>Mobile Services: The Service includes certain services that are available via a mobile device, including (i) the ability to upload content to the Service via a mobile device, (ii) the ability to browse the Service and the Site from a mobile device and (iii) the ability to access certain features through an application downloaded and installed on a mobile device (collectively, the Mobile Services). To the extent you access the Service through a mobile device, your wireless service carrier standard charges, data rates and other fees may apply. In addition, downloading, installing, or using certain Mobile Services may be prohibited or restricted by your carrier, and not all Mobile Services may work with all carriers or devices. By using the Mobile Services, you agree that we may communicate with you regarding myFit and other entities by SMS, MMS, text message or other electronic means to your mobile device and that certain information about your usage of the Mobile Services may be communicated to us. In the event you change or deactivate your mobile telephone number, you agree to promptly update your myFit account information to ensure that your messages are not sent to the person that acquires your old number.</p>
+  
+                <h4>Conditions of Use</h4>
+  
+                <p>User Conduct: You are solely responsible for all code, video, images, information, data, text, software, music, sound, photographs, graphics, messages or other materials (Content) that you upload, post, publish or display (hereinafter, upload) or email or otherwise use via the Service. The following are examples of the kind of content and/or use that is illegal or prohibited by myFit. myFit reserves the right to investigate and take appropriate legal action against anyone who, in myFit sole discretion, violates this provision, including without limitation, removing the offending content from the Service, suspending or terminating the account of such violators and reporting you to the law enforcement authorities. You agree to not use the Service to:</p>
+  
+                <p>email or otherwise upload any content that (i) infringes any intellectual property or other proprietary rights of any party; (ii) you do not have a right to upload under any law or under contractual or fiduciary relationships; (iii) contains software viruses or any other computer code, files or programs designed to interrupt, destroy or limit the functionality of any computer software or hardware or telecommunications equipment; (iv) poses or creates a privacy or security risk to any person; (v) constitutes unsolicited or unauthorized advertising, promotional materials, commercial activities and/or sales, junk mail, spam, chain letters, pyramid schemes,contests,sweepstakes, or any other form of solicitation; (vi) is unlawful, harmful, threatening, abusive, harassing, tortious, excessively violent, defamatory, vulgar, obscene, pornographic, libelous, invasive of anothers privacy, hateful racially, ethnically or otherwise objectionable; or (vii) in the sole judgment of myFit, is objectionable or which restricts or inhibits any other person from using or enjoying the Service, or which may expose myFit or its users to any harm or liability of any type;</p>
+  
+                <p>interfere with or disrupt the Service or servers or networks connected to the Service, or disobey any requirements, procedures, policies or regulations of networks connected to the Service; or</p>
+  
+                <p>violate any applicable local, state, national or international law, or any regulations having the force of law;</p>
+                
+                <p>impersonate any person or entity, or falsely state or otherwise misrepresent your affiliation with a person or entity;</p>
+  
+                <p>solicit personal information from anyone under the age of 18;</p>
+  
+                <p>harvest or collect email addresses or other contact information of other users from the Service by electronic or other means for the purposes of sending unsolicited emails or other unsolicited communications; advertise or offer to sell or buy any goods or services for any business purpose that is not specifically authorized; further or promote any criminal activity or enterprise or provide instructional information about illegal activities; or obtain or attempt to access or otherwise obtain any materials or information through any means not intentionally made available or provided for through the Service.</p>
+  
+                <p>Fees: To the extent the Service or any portion thereof is made available for any fee, you will be required to select a payment plan and provide myFit information regarding your credit card or other payment instrument. You represent and warrant to myFit that such information is true and that you are authorized to use the payment instrument. You will promptly update your account information with any changes (for example, a change in your billing address or credit card expiration date) that may occur. You agree to pay myFit the amount that is specified in the payment plan in accordance with the terms of such plan and this Terms of Service. You hereby authorize myFit to bill your payment instrument in advance on a periodic basis in accordance with the terms of the applicable payment plan until you terminate your account, and you further agree to pay any charges so incurred If you dispute any charges you must let myFit know within sixty (60) days after the date that myFit charges you. We reserve the right to change myFit prices. If myFit does change prices, myFit will provide notice of the change on the Site or in email to you, at myFit option, at least 30 days before the change is to take effect. Your continued use of the Service after the price change becomes effective constitutes your agreement to pay the changed amount. You shall be responsible for all taxes associated with the Services other than U.S. taxes based on myFit net income.</p>
+  
+                <p>Special Notice for International Use; Export Controls: Software (defined below) available in connection with the Service and the transmission of applicable data, if any, is subject to United States export controls. No Software may be downloaded from the Service or otherwise exported or re-exported in violation of U.S. export laws. Downloading or using the Software is at your sole risk. Recognizing the global nature of the Internet, you agree to comply with all local rules and laws regarding your use of the Service, including as it concerns online conduct and acceptable content.</p>
+  
+                <p>Special Notice for International Use; Export Controls: Software (defined below) available in connection with the Service and the transmission of applicable data, if any, is subject to United States export controls. No Software may be downloaded from the Service or otherwise exported or re-exported in violation of U.S. export laws. Downloading or using the Software is at your sole risk. Recognizing the global nature of the Internet, you agree to comply with all local rules and laws regarding your use of the Service, including as it concerns online conduct and acceptable content.</p>
+  
+                <p>Rewards Program: Your account with myFit may accrue cash rewards in a variety of ways (Rewards). You can earn Rewards by changing your mobility behaviour in specific ways as suggested by myFit. The details of the Rewards are set forth on the myFit app and website, and you can track your Rewards in progress in you Special Notice for International Use; Export Controls: Software (defined below) available in connection with the Service and the transmission of applicable data, if any, is subject to United States export controls. No Software may be downloaded from the Service or otherwise exported or re-exported in violation of U.S. export laws. Downloading or using the Software is at your sole risk. Recognizing the global nature of the Internet, you agree to comply with all local rules and laws regarding your use of the Service, including as it concerns online conduct and acceptable content. r account Rewards page. myFit shall pay you the Rewards, upon request, whenever they accrue at least 1000 points, to be paid out in cash and sent to your bank account listed in your account.</p>
+  
+                <p>No Commercial Use: The Service is for your personal use only. Unless otherwise expressly authorized herein or in the Service, you agree not to display, distribute, license, perform, publish, reproduce, duplicate, copy, create derivative works from, modify, sell, resell, exploit, transfer or upload for any commercial purposes, any portion of the Service, use of the Service, or access to the Service</p>
+  
+                <h4>Third-Party Distribution Channels</h4>
+  
+                <p>myFit offers Software applications that may be made available through the Android App Store, Android Marketplace or other distribution channels (Distribution Channels). If you obtain such Software through a Distribution Channel, you may be subject to additional terms of the Distribution Channel. These Terms of Service are between you and us only, and not with the Distribution Channel. To the extent that you utilize any other third party products and services in connection with your use of our Services, you agree to comply with all applicable terms of any agreement for such third party products and services.</p>
+  
+                <p>With respect to Software that is made available for your use in connection with an Android-branded product (such Software, Android-Enabled Software), in addition to the other terms and conditions set forth in these Terms of Service, the following terms and conditions apply:</p>
+  
+                <p>myFit and you acknowledge that these Terms of Service are concluded between myFit and you only, and not with Android Inc. (Android), and that as between myFit and Android, myFit, not Android, is solely responsible for the Android-Enabled Software and the content thereof.</p>
+  
+                <p>You may not use the Android-Enabled Software in any manner that is in violation of or inconsistent with the Usage Rules set forth for Android-Enabled Software in, or otherwise be in conflict with, the App Store Terms of Service.</p>
+                
+                <p>Your license to use the Android-Enabled Software is limited to a non-transferable license to use the Android-Enabled Software on an Android Product that you own or control, as permitted by the Usage Rules set forth in the App Store Terms of Service.</p>
+  
+                <p>Android has no obligation whatsoever to provide any maintenance or support services with respect to the Android-Enabled Software.</p>
+  
+                <p>Android is not responsible for any product warranties, whether express or implied by law. In the event of any failure of the Android-Enabled Software to conform to any applicable warranty, you may notify Android, and Android will refund the purchase price for the Android-Enabled Software to you, if any; and, to the maximum extent permitted by applicable law, Android will have no other warranty obligation whatsoever with respect to the Android-Enabled Software, or any other claims, losses, liabilities, damages, costs or expenses attributable to any failure to conform to any warranty, which will be myFit sole responsibility, to the extent it cannot be disclaimed under applicable law.</p>
+  
+                <p>myFit and you acknowledge that myFit, not Android, is responsible for addressing any claims of you or any third party relating to the Android-Enabled Software or your possession and/or use of that Android-Enabled Software, including, but not limited to: (i) product liability claims; (ii) any claim that the Android-Enabled Software fails to conform to any applicable legal or regulatory requirement; and (iii) claims arising under consumer protection or similar legislation.</p>
+  
+                <p>In the event of any third party claim that the Android-Enabled Software or the end-users possession and use of that Android-Enabled Software infringes that third partys intellectual property rights, as between myFit and Android, myFit, not Android, will be solely responsible for the investigation, defense, settlement and discharge of any such intellectual property infringement claim.</p>
+  
+                <p>You represent and warrant that (i) you are not located in a country that is subject to a U.S. Government embargo, or that has been designated by the U.S. Government as a terrorist supporting country; and (ii) you are not listed on any U.S. Government list of prohibited or restricted parties.</p>
+  
+                <p>If you have any questions, complaints or claims with respect to the Android-Enabled Software, they should be directed to myFit as follows:</p>
+  
+                <p>support@mermsemr.com</p>
+  
+                <p>myFit and you acknowledge and agree that Android, and Androids subsidiaries, are third-party beneficiaries of these Terms of Service with respect to the Android-Enabled Software, and that, upon your acceptance of the terms and conditions of these Terms of Service, Android will have the right (and will be deemed to have accepted the right) to enforce these Terms of Service against you with respect to the Android-Enabled Software as a third party beneficiary thereof.</p>
+  
+                <h4>Intellectual Property Rights</h4>
+  
+                <p>Service Content, Software and Trademarks: You acknowledge and agree that the Service may contain content or features (Service Content) that are protected by copyright, patent, trademark, trade secret or other proprietary rights and laws. Except as expressly authorized by myFit, you agree not to modify, copy, frame, scrape, rent, lease, loan, sell, distribute or create derivative works based on the Service or the Service Content, in whole or in part, except that the foregoing does not apply to your own User Content (as defined below) that you legally upload to the Service. In connection with your use of the Service you will not engage in or use any data mining, robots, scraping or similar data gathering or extraction methods. If you are blocked by myFit from accessing the Service (including by blocking your IP address), you agree not to implement any measures to circumvent such blocking (e.g., by masking your IP address or using a proxy IP address). Any use of the Service or the Service Content other than as specifically authorized herein is strictly prohibited. The technology and software underlying the Service or distributed in connection therewith are the property of myFit, our affiliates and our partners (the Software). You agree not to copy, modify, create a derivative work of, reverse engineer, reverse assemble or otherwise attempt to discover any source code, sell, assign, sublicense, or otherwise transfer any right in the Software. Any rights not expressly granted herein are reserved by myFit.</p>
+  
+                <p>The myFit name and logos are trademarks and service marks of myFit (collectively the myFit Trademarks). Other company, product, and service names and logos used and displayed via the Service may be trademarks or service marks of their respective owners who may or may not endorse or be affiliated with or connected to myFit. Nothing in this Terms of Service or the Service should be construed as granting, by implication, estoppel, or otherwise, any license or right to use any of myFit Trademarks displayed on the Service, without our prior written permission in each instance. All goodwill generated from the use of myFit Trademarks will inure to our exclusive benefit.</p>
+  
+                <p>Third-Party Material: Under no circumstances will myFit be liable in any way for any content or materials of any third parties (including users), including, but not limited to, for any errors or omissions in any content, or for any loss or damage of any kind incurred as a result of the use of any such content. You acknowledge that myFit does not pre-screen Content, but that myFit and its designees will have the right (but not the obligation) in their sole discretion to refuse or remove any content that is available via the Service. Without limiting the foregoing, myFit and its designees will have the right to remove any content that violates these Terms of Service or is deemed by myFit, in its sole discretion, to be otherwise objectionable. You agree that you must evaluate, and bear all risks associated with, the use of any content, including any reliance on the accuracy, completeness, or usefulness of such content.</p>
+  
+                <p>User Content Transmitted Through the Service: With respect to the content or other materials you upload through the Service or share with other users or recipients (collectively, User Content), you represent and warrant that you own all right, title and interest in and to such User Content, including, without limitation, all copyrights and rights of publicity contained therein. By uploading any User Content you hereby grant and will grant myFit and its affiliated companies a nonexclusive, worldwide, royalty-free, fully paid up, transferable, sublicensable, perpetual, irrevocable license to copy, display, upload, perform, distribute, store, modify and otherwise use your User Content in connection with the operation of the Service, in any form, medium or technology now known or later developed.</p>
+  
+                <p>You acknowledge and agree that any questions, comments, suggestions, ideas, feedback or other information about the Service (Submissions), provided by you to myFit are non-confidential and myFit will be entitled to the unrestricted use and dissemination of these Submissions for any purpose, commercial or otherwise, without acknowledgment or compensation to you.</p>
+  
+                <p>You acknowledge and agree that myFit may preserve Content and may also disclose Content if required to do so by law or in the good faith belief that such preservation or disclosure is reasonably necessary to: (a) comply with legal process, applicable laws or government requests; (b) enforce these Terms of Service; (c) respond to claims that any content violates the rights of third parties; or (d) protect the rights, property, or personal safety of myFit, its users and the public. You understand that the technical processing and transmission of the Service, including your content, may involve (a) transmissions over various networks; and (b) changes to conform and adapt to technical requirements of connecting networks or devices.</p>
+  
+                <p>Copyright Complaints: myFit respects the intellectual property of others, and we ask our users to do the same. If you believe that your work has been copied in a way that constitutes copyright infringement, or that your intellectual property rights have been otherwise violated, you should notify myFit of your infringement claim in accordance with the procedure set forth below.</p>
+  
+                <p>myFit will process and investigate notices of alleged infringement and will take appropriate actions under the Digital Millennium Copyright Act (DMCA) and other applicable intellectual property laws with respect to any alleged or actual infringement. A notification of claimed copyright infringement should be emailed to myFit Copyright Agent at support@mermsemr.com (Subject line: DMCA Takedown Request). You may also contact us by mail or facsimile at:</p>
+  
+                <p>support@mermsemr.com</p>
+  
+                <p>To be effective, the notification must be in writing and contain the following information:</p>
+  
+                <p>an electronic or physical signature of the person authorized to act on behalf of the owner of the copyright or other intellectual property interest;</p>
+  
+                <p>a description of the copyrighted work or other intellectual property that you claim has been infringed;</p>
+  
+                <p>a description of where the material that you claim is infringing is located on the Service, with enough detail that we may find it on the Service;</p>
+  
+                <p>your address, telephone number, and email address;</p>
+  
+                <p>a statement by you that you have a good faith belief that the disputed use is not authorized by the copyright or intellectual property owner, its agent, or the law;</p>
+  
+                <p>a statement by you, made under penalty of perjury, that the above information in your Notice is accurate and that you are the copyright or intellectual property owner or authorized to act on the copyright or intellectual property owners behalf.</p>
+  
+                <p>Counter-Notice: If you believe that your User Content that was removed (or to which access was disabled) is not infringing, or that you have the authorization from the copyright owner, the copyright owners agent, or pursuant to the law, to upload and use the content in your User Content, you may send a written counter-notice containing the following information to the Copyright Agent:</p>
+  
+                <p>your physical or electronic signature;</p>
+  
+                <p>identification of the content that has been removed or to which access has been disabled and the location at which the content appeared before it was removed or disabled;</p>
+  
+                <p>a statement that you have a good faith belief that the content was removed or disabled as a result of mistake or a misidentification of the content; and</p>
+  
+                <p>your name, address, telephone number, and email address, a statement that you consent to the jurisdiction of the federal court located within Northern District of California and a statement that you will accept service of process from the person who provided notification of the alleged infringement.</p>
+  
+                <p>If a counter-notice is received by the Copyright Agent, myFit will send a copy of the counter-notice to the original complaining party informing that person that it may replace the removed content or cease disabling it in 10 business days. Unless the copyright owner files an action seeking a court order against the content provider, member or user, the removed content may be replaced, or access to it restored, in 10 to 14 business days or more after receipt of the counter-notice, at our sole discretion.</p>
+  
+                <p>Repeat Infringer Policy: In accordance with the DMCA and other applicable law, myFit has adopted a policy of terminating, in appropriate circumstances and at myFit's sole discretion, users who are deemed to be repeat infringers. myFit may also at its sole discretion limit access to the Service and/or terminate the memberships of any users who infringe any intellectual property rights of others, whether or not there is any repeat infringement.</p>
+  
+                <h4>Third-Party Websites</h4>
+  
+                <p>The Service may provide, or third parties may provide, links or other access to other sites and resources on the Internet. myFit has no control over such sites and resources and myFit is not responsible for and does not endorse such sites and resources. You further acknowledge and agree that myFit will not be responsible or liable, directly or indirectly, for any damage or loss caused or alleged to be caused by or in connection with use of or reliance on any content, events, goods or services available on or through any such site or resource. Any dealings you have with third parties found while using the Service are between you and the third-party, and you agree that myFit is not liable for any loss or claim that you may have against any such third party.</p>
+  
+                <h4>Social Networking Services</h4>
+  
+                <p>You may enable or log in to the Service via various online third-party services, such as social media and social networking services like Facebook or Twitter (Social Networking Services). By logging in or directly integrating these Social Networking Services into the Service, we make your online experiences richer and more personalized. To take advantage of this feature and capabilities, we may ask you to authenticate, register for or log into Social Networking Services on the websites of their respective providers. As part of such integration, the Social Networking Services will provide us with access to certain information that you have provided to such Social Networking Services, and we will use, store and disclose such information in accordance with our Privacy Policy. For more information about the implications of activating these Social Networking Services and myFit use, storage and disclosure of information related to you and your use of such services within myFit (including your friend lists and the like), please see our Privacy Policy. However, please remember that the manner in which Social Networking Services use, store and disclose your information is governed solely by the policies of such third parties, and myFit shall have no liability or responsibility for the privacy practices or other actions of any third-party site or service that may be enabled within the Service.</p>
+  
+                <p>In addition, myFit is not responsible for the accuracy, availability or reliability of any information, content, goods, data, opinions, advice or statements made available in connection with Social Networking Services. As such, myFit is not liable for any damage or loss caused or alleged to be caused by or in connection with use of or reliance on any such Social Networking Services. myFit enables these features merely as a convenience and the integration or inclusion of such features does not imply an endorsement or recommendation.</p>
+  
+                <h4>Indemnity and Release</h4>
+  
+                <p>You agree to release, indemnify and hold myFit and its affiliates and their officers, employees, directors and agents (collectively, Indemnitees) harmless from any from any and all losses, damages, expenses, including reasonable attorneys fees, rights, claims, actions of any kind and injury (including death) arising out of or relating to your use of the Service, any User Content, your connection to the Service, your violation of these Terms of Service or your violation of any rights of another. Notwithstanding the foregoing, you will have no obligation to indemnify or hold harmless any Indemnitee from or against any liability, losses, damages or expenses incurred as a result of any action or inaction of such Indemnitee. If you are a California resident, you waive California Civil Code Section 1542, which says: A general release does not extend to claims which the creditor does not know or suspect to exist in his favor at the time of executing the release, which if known by him must have materially affected his settlement with the debtor. If you are a resident of another jurisdiction, you waive any comparable statute or doctrine.</p>
+  
+                <h4>Disclaimer of Warranties</h4>
+  
+                <p>YOUR USE OF THE SERVICE IS AT YOUR SOLE RISK. THE SERVICE IS PROVIDED ON AN AS IS AND AS AVAILABLE BASIS. myFit EXPRESSLY DISCLAIMS ALL WARRANTIES OF ANY KIND, WHETHER EXPRESS, IMPLIED OR STATUTORY, INCLUDING, BUT NOT LIMITED TO THE IMPLIED WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE, TITLE AND NON-INFRINGEMENT.</p>
+  
+                <p>myFit MAKES NO WARRANTY THAT (I) THE SERVICE WILL MEET YOUR REQUIREMENTS, (II) THE SERVICE WILL BE UNINTERRUPTED, TIMELY, SECURE, OR ERROR-FREE, (III) THE RESULTS THAT MAY BE OBTAINED FROM THE USE OF THE SERVICE WILL BE ACCURATE OR RELIABLE, OR (IV) THE QUALITY OF ANY PRODUCTS, SERVICES, INFORMATION, OR OTHER MATERIAL PURCHASED OR OBTAINED BY YOU THROUGH THE SERVICE WILL MEET YOUR EXPECTATIONS.</p>
+  
+                <h4>Limitation of Liability</h4>
+  
+                <p>YOU EXPRESSLY UNDERSTAND AND AGREE THAT myFit WILL NOT BE LIABLE FOR ANY INDIRECT, INCIDENTAL, SPECIAL, CONSEQUENTIAL, EXEMPLARY DAMAGES, OR DAMAGES FOR LOSS OF PROFITS INCLUDING BUT NOT LIMITED TO, DAMAGES FOR LOSS OF GOODWILL, USE, DATA OR OTHER INTANGIBLE LOSSES (EVEN IF myFit HAS BEEN ADVISED OF THE POSSIBILITY OF SUCH DAMAGES), WHETHER BASED ON CONTRACT, TORT, NEGLIGENCE, STRICT LIABILITY OR OTHERWISE, RESULTING FROM: (I) THE USE OR THE INABILITY TO USE THE SERVICE; (II) THE COST OF PROCUREMENT OF SUBSTITUTE GOODS AND SERVICES RESULTING FROM ANY GOODS, DATA, INFORMATION OR SERVICES PURCHASED OR OBTAINED OR MESSAGES RECEIVED OR TRANSACTIONS ENTERED INTO THROUGH OR FROM THE SERVICE; (III) UNAUTHORIZED ACCESS TO OR ALTERATION OF YOUR TRANSMISSIONS OR DATA; (IV) STATEMENTS OR CONDUCT OF ANY THIRD PARTY ON THE SERVICE; OR (V) ANY OTHER MATTER RELATING TO THE SERVICE. IN NO EVENT WILL myFitS TOTAL LIABILITY TO YOU FOR ALL DAMAGES, LOSSES OR CAUSES OF ACTION EXCEED THE AMOUNT YOU HAVE PAID myFit IN THE LAST SIX (6) MONTHS, OR, IF GREATER, ONE HUNDRED DOLLARS ($100).</p>
+  
+                <p>SOME JURISDICTIONS DO NOT ALLOW THE DISCLAIMER OR EXCLUSION OF CERTAIN WARRANTIES OR THE LIMITATION OR EXCLUSION OF LIABILITY FOR INCIDENTAL OR CONSEQUENTIAL DAMAGES. ACCORDINGLY, SOME OF THE ABOVE LIMITATIONS SET FORTH ABOVE MAY NOT APPLY TO YOU OR BE ENFORCEABLE WITH RESPECT TO YOU. IF YOU ARE DISSATISFIED WITH ANY PORTION OF THE SERVICE OR WITH THESE TERMS OF SERVICE, YOUR SOLE AND EXCLUSIVE REMEDY IS TO DISCONTINUE USE OF THE SERVICE.</p>
+  
+                <p>IF YOU ARE A USER FROM NEW JERSEY, THE FOREGOING SECTIONS TITLED DISCLAIMER OF WARRANTIES AND LIMITATION OF LIABILITY ARE INTENDED TO BE ONLY AS BROAD AS IS PERMITTED UNDER THE LAWS OF THE STATE OF NEW JERSEY. IF ANY PORTION OF THESE SECTIONS IS HELD TO BE INVALID UNDER THE LAWS OF THE STATE OF NEW JERSEY, THE INVALIDITY OF SUCH PORTION SHALL NOT AFFECT THE VALIDITY OF THE REMAINING PORTIONS OF THE APPLICABLE SECTIONS.</p>
+  
+                <p>Dispute Resolution By Binding Arbitration: PLEASE READ THIS SECTION CAREFULLY AS IT AFFECTS YOUR RIGHTS.</p>
+                
+                <h4>Agreement to Arbitrate</h4>
+  
+                <p>This Dispute Resolution by Binding Arbitration section is referred to in this Terms of Service as the Arbitration Agreement. You agree that any and all disputes or claims that have arisen or may arise between you and myFit, whether arising out of or relating to this Terms of Service (including any alleged breach thereof), the Services, any advertising, any aspect of the relationship or transactions between us, shall be resolved exclusively through final and binding arbitration, rather than a court, in accordance with the terms of this Arbitration Agreement, except that you may assert individual claims in small claims court, if your claims qualify. Further, this Arbitration Agreement does not preclude you from bringing issues to the attention of federal, state, or local agencies, and such agencies can, if the law allows, seek relief against us on your behalf. You agree that, by entering into this Terms of Service, you and myFit are each waiving the right to a trial by jury or to participate in a class action. Your rights will be determined by a neutral arbitrator, not a judge or jury. The Federal Arbitration Act governs the interpretation and enforcement of this Arbitration Agreement.</p>
+  
+                <p>Prohibition of Class and Representative Actions and Non-Individualized Relief</p>
+  
+                <p>YOU AND myFit AGREE THAT EACH OF US MAY BRING CLAIMS AGAINST THE OTHER ONLY ON AN INDIVIDUAL BASIS AND NOT AS A PLAINTIFF OR CLASS MEMBER IN ANY PURPORTED CLASS OR REPRESENTATIVE ACTION OR PROCEEDING. UNLESS BOTH YOU AND myFit AGREE OTHERWISE, THE ARBITRATOR MAY NOT CONSOLIDATE OR JOIN MORE THAN ONE PERSONS OR PARTYS CLAIMS AND MAY NOT OTHERWISE PRESIDE OVER ANY FORM OF A CONSOLIDATED, REPRESENTATIVE, OR CLASS PROCEEDING. ALSO, THE ARBITRATOR MAY AWARD RELIEF (INCLUDING MONETARY, INJUNCTIVE, AND DECLARATORY RELIEF) ONLY IN FAVOR OF THE INDIVIDUAL PARTY SEEKING RELIEF AND ONLY TO THE EXTENT NECESSARY TO PROVIDE RELIEF NECESSITATED BY THAT PARTYS INDIVIDUAL CLAIM(S), EXCEPT THAT YOU MAY PURSUE A CLAIM FOR AND THE ARBITRATOR MAY AWARD PUBLIC INJUNCTIVE RELIEF UNDER APPLICABLE LAW TO THE EXTENT REQUIRED FOR THE ENFORCEABILITY OF THIS PROVISION.</p>
+  
+                <p>Pre-Arbitration Dispute Resolution</p>
+  
+                <p>myFit is always interested in resolving disputes amicably and efficiently, and most customer concerns can be resolved quickly and to the customer's satisfaction by emailing customer support at support@mymyFit.com. If such efforts prove unsuccessful, a party who intends to seek arbitration must first send to the other, by certified mail, a written Notice of Dispute ("Notice"). The Notice to myFit should be sent to 1070 Cresta Way, Unit 2, San Rafael, CA 94903 ("Notice Address"). The Notice must (i) describe the nature and basis of the claim or dispute and (ii) set forth the specific relief sought. If myFit and you do not resolve the claim within sixty (60) calendar days after the Notice is received, you or myFit may commence an arbitration proceeding. During the arbitration, the amount of any settlement offer made by myFit or you shall not be disclosed to the arbitrator until after the arbitrator determines the amount, if any, to which you or myFit is entitled.</p>
+  
+                <h4>Arbitration Procedures</h4>
+  
+                <p>Arbitration will be conducted by a neutral arbitrator in accordance with the American Arbitration Associations (AAA) rules and procedures, including the AAAs Consumer Arbitration Rules (collectively, the AAA Rules), as modified by this Arbitration Agreement. For information on the AAA, please visit its website, http://www.adr.org. Information about the AAA Rules and fees for consumer disputes can be found at the AAAs consumer arbitration page, http://www.adr.org/consumer_arbitration. If there is any inconsistency between any term of the AAA Rules and any term of this Arbitration Agreement, the applicable terms of this Arbitration Agreement will control unless the arbitrator determines that the application of the inconsistent Arbitration Agreement terms would not result in a fundamentally fair arbitration. The arbitrator must also follow the provisions of these Terms of Service as a court would. All issues are for the arbitrator to decide, including, but not limited to, issues relating to the scope, enforceability, and arbitrability of this Arbitration Agreement. Although arbitration proceedings are usually simpler and more streamlined than trials and other judicial proceedings, the arbitrator can award the same damages and relief on an individual basis that a court can award to an individual under the Terms of Service and applicable law. Decisions by the arbitrator are enforceable in court and may be overturned by a court only for very limited reasons.</p>
+  
+                <p>Unless myFit and you agree otherwise, any arbitration hearings will take place in a reasonably convenient location for both parties with due consideration of their ability to travel and other pertinent circumstances. If the parties are unable to agree on a location, the determination shall be made by AAA. If your claim is for $10,000 or less, myFit agrees that you may choose whether the arbitration will be conducted solely on the basis of documents submitted to the arbitrator, through a telephonic hearing, or by an in-person hearing as established by the AAA Rules. If your claim exceeds $10,000, the right to a hearing will be determined by the AAA Rules. Regardless of the manner in which the arbitration is conducted, the arbitrator shall issue a reasoned written decision sufficient to explain the essential findings and conclusions on which the award is based.</p>
+  
+                <h4>Costs of Arbitration</h4>
+  
+                <p>Payment of all filing, administration, and arbitrator fees (collectively, the Arbitration Fees) will be governed by the AAA Rules, unless otherwise provided in this Arbitration Agreement. If the value of the relief sought is $75,000 or less, at your request, myFit will pay all Arbitration Fees. If the value of relief sought is more than $75,000 and you are able to demonstrate to the arbitrator that you are economically unable to pay your portion of the Arbitration Fees or if the arbitrator otherwise determines for any reason that you should not be required to pay your portion of the Arbitration Fees, myFit will pay your portion of such fees. In addition, if you demonstrate to the arbitrator that the costs of arbitration will be prohibitive as compared to the costs of litigation, myFit will pay as much of the Arbitration Fees as the arbitrator deems necessary to prevent the arbitration from being cost-prohibitive. Any payment of attorneys fees will be governed by the AAA Rules.</p>
+  
+                <h4>Confidentiality</h4>
+  
+                <p>All aspects of the arbitration proceeding, and any ruling, decision, or award by the arbitrator, will be strictly confidential for the benefit of all parties.</p>
+  
+                <h4>Severability</h4>
+  
+                <p>If a court or the arbitrator decides that any term or provision of this Arbitration Agreement (other than the subsection (b) titled -Prohibition of Class and Representative Actions and Non-Individualized Relief above) is invalid or unenforceable, the parties agree to replace such term or provision with a term or provision that is valid and enforceable and that comes closest to expressing the intention of the invalid or unenforceable term or provision, and this Arbitration Agreement shall be enforceable as so modified. If a court or the arbitrator decides that any of the provisions of subsection (b) above titled- Prohibition of Class and Representative Actions and Non-Individualized Relief are invalid or unenforceable, then the entirety of this Arbitration Agreement shall be null and void, unless such provisions are deemed to be invalid or unenforceable solely with respect to claims for public injunctive relief. The remainder of the Terms of Service will continue to apply.</p>
+  
+                <p>Future Changes to Arbitration Agreement</p>
+  
+                <p>Notwithstanding any provision in this Terms of Service to the contrary, myFit agrees that if it makes any future change to this Arbitration Agreement (other than a change to the Notice Address) while you are a user of the Services, you may reject any such change by sending myFit written notice within thirty (30) calendar days of the change to the Notice Address provided above. By rejecting any future change, you are agreeing that you will arbitrate any dispute between us in accordance with the language of this Arbitration Agreement as of the date you first accepted these Terms of Service (or accepted any subsequent changes to these Terms of Service).</p>
+  
+                <h4>Termination</h4>
+  
+                <p>You agree that myFit, in its sole discretion, may suspend or terminate your account (or any part thereof) or use of the Service and remove and discard any content within the Service, for any reason, including, without limitation, for lack of use or if myFit believes that you have violated or acted inconsistently with the letter or spirit of these Terms of Service. Any suspected fraudulent, abusive or illegal activity that may be grounds for termination of your use of Service, may be referred to appropriate law enforcement authorities. myFit may also in its sole discretion and at any time discontinue providing the Service, or any part thereof, with or without notice. You agree that any termination of your access to the Service under any provision of this Terms of Service may be effected without prior notice, and acknowledge and agree that myFit may immediately deactivate or delete your account and all related information and files in your account and/or bar any further access to such files or the Service. Further, you agree that myFit will not be liable to you or any third party for any termination of your access to the Service.</p>
+  
+                <h4>User Disputes</h4>
+  
+                <p>You agree that you are solely responsible for your interactions with any other user in connection with the Service and myFit will have no liability or responsibility with respect thereto. myFit reserves the right, but has no obligation, to become involved in any way with disputes between you and any other user of the Service.</p>
+  
+                <h4>General</h4>
+  
+                <p>These Terms of Service constitute the entire agreement between you and myFit and govern your use of the Service, superseding any prior agreements between you and myFit with respect to the Service. You also may be subject to additional terms and conditions that may apply when you use affiliate or third-party services, third-party content or third party software. These Terms of Service will be governed by the laws of the State of California without regard to its conflict of law provisions. With respect to any disputes or claims not subject to arbitration, as set forth above, you and myFit agree to submit to the personal and exclusive jurisdiction of the state and federal courts located within San Francisco County, California. The failure of myFit to exercise or enforce any right or provision of these Terms of Service will not constitute a waiver of such right or provision. If any provision of these Terms of Service is found by a court of competent jurisdiction to be invalid, the parties nevertheless agree that the court should endeavor to give effect to the parties intentions as reflected in the provision, and the other provisions of these Terms of Service remain in full force and effect. You agree that regardless of any statute or law to the contrary, any claim or cause of action arising out of or related to use of the Service or these Terms of Service must be filed within one (1) year after such claim or cause of action arose or be forever barred. A printed version of this agreement and of any notice given in electronic form will be admissible in judicial or administrative proceedings based upon or relating to this agreement to the same extent and subject to the same conditions as other business documents and records originally generated and maintained in printed form. You may not assign this Terms of Service without the prior written consent of myFit, but myFit may assign or transfer this Terms of Service, in whole or in part, without restriction. The section titles in these Terms of Service are for convenience only and have no legal or contractual effect. Notices to you may be made via either email or regular mail. The Service may also provide notices to you of changes to these Terms of Service or other matters by displaying notices or links to notices generally on the Service.</p>
+  
+                <p>Your Privacy At myFit, we respect the privacy of our users. For details please see our Privacy Policy. By using the Service, you consent to our collection and use of personal data as outlined therein. To the extent you use the myFit services and access your third party bank accounts, you also agree to the terms of our provider Salt Edge located here: Salt Edge End User License Agreement.</p>
+  
+                <p>Notice for California Users Under California Civil Code Section 1789.3, users of the Service from California are entitled to the following specific consumer rights notice: The Complaint Assistance Unit of the Division of Consumer Services of the California Department of Consumer Affairs may be contacted in writing at 1625 North Market Blvd., Suite N 112, Sacramento, CA 95834, or by telephone at (916) 445-1254 or (800) 952-5210. You may contact us at myFit, Inc., 1070 Cresta Way, Unit 2, San Rafael, CA 94903. +1.917.362.8893 Questions? Concerns? Suggestions? Please contact us at support@mermsemr.com to report any violations of these Terms of Service or to pose any questions regarding this Terms of Service or the Service. myFit . ("MERMS myFit") is committed to upholding the privacy rights of individuals. This Privacy Policy explains the collection, use, purpose, and sharing of personally identifiable information ("PII") related to the use of Merms's myFit website https://myfit.mermsemr.com/ , MERMS providing of services to our users ("Partners"), or from our employees. PII does not include information that is anonymized or aggregated, and other information which is excluded from the scope of applicable privacy laws.</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">
+                    <img src="assets/images/blog_d02.png" alt="image" />
+                  </div>
+                  <div className="text">
+                    <h3>Name of App</h3>
+                  </div>
+                </div>
+                <div className="social_media">
+                  <ul>
+                    <li>
+                      <Link to="#">
+                        <i className="icofont-facebook"></i>
+                      </Link>
+                    </li>
+                    <li>
+                      <Link to="#">
+                        <i className="icofont-twitter"></i>
+                      </Link>
+                    </li>
+                  </ul>
+                </div>
+              </div>
+              <div className="blog_tags">
+                <ul>
+                  <li className="tags">
+                    <p>Updated:</p>
+                  </li>
+                  <li>
+                    <span>01-01-2023</span>
+                  </li>
+                </ul>
+              </div> */}
             </div>
+          </div>
         </section>
-    </>
-  )
-}
+      </>
+    );
+  };
 
 export default Main

src/routes/index.js

@@ -13,49 +13,55 @@ import Pricing from "../component/Pricing/Main";
 import Blog from "../component/Blog/Blog/Main";
 import BlogSingle from "../component/Blog/BlogSingle/Main";
 
+
 import Terms from "../component/Terms/Main";
 import Privacy from "../component/Privacy/Main";
 
+/**
+ * Renders the appropriate component based on the current URL path.
+ * Manages the state of the navbar and footer components based on the current path.
+ * @returns {JSX.Element} The rendered components based on the current URL path.
+ */
 const Routing = () => {
-  const [homepage, sethomepage] = useState(false);
+  const [homepage, setHomepage] = useState(false);
+  const [footerpage, setFooterpage] = useState(false);
+  const [footer, setFooter] = useState({ f1: true });
+  const [navbar, setNavbar] = useState({ n1: true });
+  const [brdcum, setBrdcum] = useState({ n1: true });
   const location = useLocation();
 
   useEffect(() => {
     if (location.pathname === "/sign-in" || location.pathname === "/sign-up") {
-      sethomepage(false);
+      setHomepage(false);
     } else {
-      sethomepage(true);
+      setHomepage(true);
     }
   }, [location]);
 
-  const [footerpage, setfooterpage] = useState(false);
   useEffect(() => {
     if (location.pathname === "/sign-in" || location.pathname === "/sign-up") {
-      setfooterpage(false);
+      setFooterpage(false);
     } else {
-      setfooterpage(true);
+      setFooterpage(true);
     }
   }, [location]);
 
   useEffect(() => {
-    if (localStorage.getItem("navbar") === "darkhome") {
-      setfooter({ f2: true });
-      setnavbar({ n3: true });
-      setbrdcum({ b2: true });
-    } else if (localStorage.getItem("navbar") === "home") {
-      setfooter({ f1: true });
-      setnavbar({ n2: true });
-      setbrdcum({ b1: true });
+    const navbarValue = localStorage.getItem("navbar");
+    if (navbarValue === "darkhome") {
+      setFooter({ f2: true });
+      setNavbar({ n3: true });
+      setBrdcum({ b2: true });
+    } else if (navbarValue === "home") {
+      setFooter({ f1: true });
+      setNavbar({ n2: true });
+      setBrdcum({ b1: true });
     } else {
-      setfooter({ f1: true });
-      setnavbar({ n2: true });
+      setFooter({ f1: true });
+      setNavbar({ n2: true });
     }
   }, []);
 
-  const [footer, setfooter] = useState({ f1: true });
-  const [navbar, setnavbar] = useState({ n1: true });
-  const [brdcum, setbrdcum] = useState({ n1: true });
-
   return (
     <>
       {homepage && <Navbar navbar={navbar} />}
@@ -64,19 +70,19 @@ const Routing = () => {
           path="/"
           element={
             <Home
-              setfooter={setfooter}
-              setnavbar={setnavbar}
-              setbrdcum={setbrdcum}
+              setfooter={setFooter}
+              setnavbar={setNavbar}
+              setbrdcum={setBrdcum}
             />
           }
         />
         <Route
           path="/about"
-          element={<AboutUs setnavbar={setnavbar} brdcum={brdcum} />}
+          element={<AboutUs setnavbar={setNavbar} brdcum={brdcum} />}
         />
         <Route
           path="/review"
-          element={<Review setnavbar={setnavbar} brdcum={brdcum} />}
+          element={<Review setnavbar={setNavbar} brdcum={brdcum} />}
         />
         <Route path="/contact" element={<Contact brdcum={brdcum} />} />
         <Route path="/faq" element={<Faq brdcum={brdcum} />} />
@@ -84,7 +90,7 @@ const Routing = () => {
         <Route path="/sign-up" element={<SignUp />} />
         <Route path="/pricing" element={<Pricing brdcum={brdcum} />} />
         <Route path="/blog" element={<Blog brdcum={brdcum} />} />
-        <Route path="/blog-single" element={<BlogSingle brdcum={brdcum} />} />
+        <Route path="/blogdetails/:id" element={<BlogSingle brdcum={brdcum} />} />
         <Route path="/terms" element={<Terms brdcum={brdcum} />} />
         <Route path="/privacy" element={<Privacy brdcum={brdcum} />} />
       </Routes>

src/vendors/service/siteService.js

@@ -0,0 +1,105 @@
+import React from "react";
+import Axios from "axios";
+
+class SiteService {
+  constructor() {
+    console.log("Er are here anyway");
+  }
+  // Blog Data {Get}
+  blogData(id) {
+    //myfit
+    return this.getBlogEnd("/myfit", null);
+  }
+
+  // Country Data {GET}
+  countryData() {
+    return this.getAuxEnd("/country", null);
+  }
+
+  // Contact Data{POST}
+  contactData(value) {
+    return this.postAuxEnd("/contact", value)
+  }
+
+  faqData() {
+    return this.getAuxEnd("/faq", null);
+  }
+
+  priceData() {
+    return this.getAuxEnd("/pricing", null);
+  }
+  
+  //----------------------------------------  -----
+  //----------------------------------------  -----
+  // Unified call below 
+  //----------------------------------------  -----
+  //----------------------------------------  -----
+  getAuxEnd(uri, reqData) {
+    const endPoint = process.env.REACT_APP_AUX_ENDPOINT + uri;
+    return Axios.get(endPoint)
+      .then((response) => {
+        // console.log(response);
+        // res = response;
+        // console.log("~~~~~~~ Toks2 GET ~~~~~~~~");
+        return response;
+      })
+      .catch((error) => {
+        if (error.response) {
+          //response status is an error code
+          console.log(error.response.status);
+        } else if (error.request) {
+          //response not received though the request was sent
+          console.log(error.request);
+        } else {
+          //an error occurred when setting up the request
+          console.log(error.message);
+        }
+      });
+  }
+
+  getBlogEnd(uri, reqData) {
+    const endPoint = "https://blogdata.chiefsoft.net/blogdata" + uri;
+    return Axios.get(endPoint)
+        .then((response) => {
+          // console.log(response);
+          // res = response;
+          // console.log("~~~~~~~ Toks2 GET ~~~~~~~~");
+          return response;
+        })
+        .catch((error) => {
+          if (error.response) {
+            //response status is an error code
+            console.log(error.response.status);
+          } else if (error.request) {
+            //response not received though the request was sent
+            console.log(error.request);
+          } else {
+            //an error occurred when setting up the request
+            console.log(error.message);
+          }
+        });
+  }
+  postAuxEnd(uri, reqData) {
+    const endPoint = process.env.REACT_APP_AUX_ENDPOINT + uri;
+    return Axios.post(endPoint, reqData)
+      .then((response) => {
+        console.log(response);
+        // res = response
+        return response;
+      })
+      .catch((error) => {
+        if (error.response) {
+          //response status is an error code
+          console.log(error.response.status);
+        } else if (error.request) {
+          //response not received though the request was sent
+          console.log(error.request);
+        } else {
+          //an error occurred when setting up the request
+          console.log(error.message);
+        }
+      });
+  }
+}
+
+export default SiteService;