blog data

Merge branch 'master' of https://gitlab.chiefsoft.net/MyFit/www-myfit
fix data
2025-08-23 19:55:21 -04:00 · 2025-08-23 19:42:28 -04:00 · 2025-08-23 19:42:06 -04:00 · 2025-05-18 11:41:07 -04:00 · 2025-05-18 11:31:00 -04:00 · 2025-03-19 19:28:21 +00:00
58 changed files with 934 additions and 742 deletions
@@ -1,19 +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_APPSITE="http://localhost:7012"

-
-REACT_APP_AUX_ENDPOINT = "https://devapi.mermsemr.com/en/desktop/api/v2/myfit"
-REACT_APP_FORM_TIMEOUT = 10000
-REACT_APP_MAX_MESSAGE_LENGHT =300
+REACT_APP_AUX_ENDPOINT="https://devapi.mermsemr.com/en/desktop/api/v2/myfit"
+REACT_APP_FORM_TIMEOUT=10000
+REACT_APP_MAX_MESSAGE_LENGHT=300
 REACT_APP_BLOGSITE="https://blog.mermsemr.com/"
-
@@ -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/"
@@ -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/"
@@ -1 +1,2 @@
-node_modules/*
+node_modules/*
+build/*
@@ -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
+
@@ -1,9 +1,12 @@
 version: '3'
 services:
  myfit-www:
+    image: registry.chiefsoft.net/www-myfit:latest
    build:
      context: .
      dockerfile: Dockerfile
+      args:
+        - NODE_ENV=production
    restart: unless-stopped
    ports:
      - 7010:3000
@@ -19,6 +22,7 @@ services:
      - apigateway.wrenchboard.app.lotus.fluxtra.net:172.31.4.19
    environment:
      - CHOKIDAR_USEPOLLING=true
+      - NODE_ENV=${NODE_ENV:-production}
 volumes:
  src:
-  public:
+  public:
@@ -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;
+    }
+  }
+}
+
@@ -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",
@@ -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"
  },
@@ -1733,7 +1733,7 @@ iframe#youtubevideo {
    padding: 20px 100px;
    padding-bottom: 50px;
    position: relative;
-    z-index: 999999;
+    /* z-index: 999999; */
 }

 /* download app dark background */
@@ -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
@@ -1181,6 +1181,10 @@ header.fixed .navbar {
 .how_it_works .step_block ul li .step_img img {
  max-width: 100%;
 }
+.how_it_works .step_block ul li .step_img img.create-account-logo {
+  border-radius: 15px;
+  box-shadow: 0px 0px 10px #c7c6c6;
+}

 /* how it works heading h4 */
 .how_it_works .step_block ul li .step_text h4 {
@@ -1754,7 +1758,7 @@ iframe#youtubevideo {
  padding: 20px 100px;
  padding-bottom: 50px;
  position: relative;
-  z-index: 999999;
+  /* z-index: 999999; */
 }

 /* download app dark background */
@@ -2693,7 +2697,11 @@ header.fix_style.white_header {
 }

 .app_solution_section .app_images ul li img {
-  max-width: 100%;
+  max-width: 98%;
+  padding: 1%;
+  border-radius: 15px;
+  box-shadow: 0px 0px 30px #c1dec9;
+  filter: grayscale(40%);
 }

 .app_solution_section .app_images li:first-child {
@@ -2768,6 +2776,17 @@ header.fix_style.white_header {
 .about_page_sectino img {
  max-width: 100%;
 }
+.about_page_sectino .abt_img img {
+  animation: scale;
+  animation-duration: 1s;
+  animation-timing-function: linear;
+  animation-iteration-count: infinite;
+}
+@keyframes scale {
+  0%{transform: scale(1);}
+  50%{transform: scale(1.01);}
+  100%{transform: scale(1);}
+}

 /* -----------experts_team_sectio---------- */

@@ -3008,11 +3027,17 @@ header.fix_style.white_header {
  margin-bottom: 15px;
 }

-.blog_detail_section .blog_inner_pannel .review span {
+.blog_detail_section .blog_inner_pannel span.blog_date {
  line-height: 1;
+  color: var(--purple);
+  display: flex;
+  font-weight: 700;
+  text-align: center;
+  justify-content: center;
+  align-items: center;
 }

-.blog_detail_section .blog_inner_pannel .review span:first-child {
+/* .blog_detail_section .blog_inner_pannel .review span:first-child {
  color: var(--purple);
  display: inline-block;
  font-weight: 700;
@@ -3024,7 +3049,7 @@ header.fix_style.white_header {
  margin-left: 15px;
  padding-left: 15px;
  border-left: 1px solid var(--dark-purple);
-}
+} */

 .blog_detail_section .blog_inner_pannel .section_title {
  margin-bottom: 40px;
@@ -3043,29 +3068,29 @@ header.fix_style.white_header {
 }

 .blog_detail_section .blog_inner_pannel .info h3 {
-    font-weight: 700;
-    color: var(--dark-purple);
-    margin-top: 30px;
-    font-size: 25px;
-    margin-bottom: 15px;
+  font-weight: 700;
+  color: var(--dark-purple);
+  margin-top: 30px;
+  font-size: 25px;
+  margin-bottom: 15px;
 }

 /* To highlight the link in the terms section */
-.blog_detail_section .blog_inner_pannel .info p span a{
-    color: var(--dark-purple);
-    text-decoration: underline;
+.blog_detail_section .blog_inner_pannel .info p span a {
+  color: var(--dark-purple);
+  text-decoration: underline;
 }

 /* To reduce the fonts for sub-headers */
 .blog_detail_section .blog_inner_pannel .info h4 {
-    font-weight: 700;
-    color: var(--dark-purple);
-    margin-top: 30px;
-    font-size: 20px;
-    margin-bottom: 15px;
-  }
+  font-weight: 700;
+  color: var(--dark-purple);
+  margin-top: 30px;
+  font-size: 20px;
+  margin-bottom: 15px;
+}

-  /* To align the text for proper readability */
+/* To align the text for proper readability */
 .blog_detail_section .blog_inner_pannel .info p {
  text-align: justify;
 }
@@ -3526,48 +3551,80 @@ header.fix_style.white_header {
 }

 /* Textarea scrollbar */
-.contact_page_section .contact_inner .contact_form form .form-group textarea::-webkit-scrollbar {
+.contact_page_section
+  .contact_inner
+  .contact_form
+  form
+  .form-group
+  textarea::-webkit-scrollbar {
  width: 12px;
  cursor: pointer;
 }

-.contact_page_section .contact_inner .contact_form form .form-group textarea::-webkit-scrollbar-track {
-  -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); 
+.contact_page_section
+  .contact_inner
+  .contact_form
+  form
+  .form-group
+  textarea::-webkit-scrollbar-track {
+  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
  border-radius: 10px;
  background-color: var(--light-bg);
 }

-.contact_page_section .contact_inner .contact_form form .form-group textarea::-webkit-scrollbar-thumb {
+.contact_page_section
+  .contact_inner
+  .contact_form
+  form
+  .form-group
+  textarea::-webkit-scrollbar-thumb {
  border-radius: 10px;
-  -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5); 
+  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.5);
  background-color: var(--body-text-purple);
 }

-.contact_page_section .contact_inner .contact_form form .form-group .contact_btn{
+.contact_page_section
+  .contact_inner
+  .contact_form
+  form
+  .form-group
+  .contact_btn {
  display: flex !important;
  align-items: center;
  justify-content: center;
 }

-.contact_page_section .contact_inner .contact_form form .form-group .contact_btn p{
+.contact_page_section
+  .contact_inner
+  .contact_form
+  form
+  .form-group
+  .contact_btn
+  p {
  margin: 0 !important;
 }

-.contact_page_section .contact_inner .contact_form form .form-group .contact_btn > span{
+.contact_page_section
+  .contact_inner
+  .contact_form
+  form
+  .form-group
+  .contact_btn
+  > span {
  width: 24px;
  height: 24px;
 }

-#contact_body{
+#contact_body {
  min-height: 48rem;
  display: flex;
  flex-direction: column;
  align-content: center;
-  justify-content: center;
+  justify-items: center;
  gap: 10px;
 }

-.contact_body{
+/* .contact_body {
  display: flex;
  flex-direction: column;
  align-content: center;
@@ -3576,50 +3633,67 @@ header.fix_style.white_header {
  font-size: 20px;
  font-weight: 800;
  text-align: center;
-}
+} */

 /* Animations */
-.animate.pop {
+.animate-image {
  animation-name: animate-pop;
-  animation-timing-function: cubic-bezier(0.26, 0.53, 0.74, 1.48);
-  animation-duration: 0.5s;
+  animation-timing-function: linear;
+  animation-duration: 1s;
+  animation-fill-mode: forwards;
 }

@keyframes animate-pop {
  0% {
    opacity: 0;
-    transform: scale(0.5, 0.5);
+    transform: scale(0.5);
  }

  100% {
    opacity: 1;
-    transform: scale(1, 1);
+    transform: scale(1);
  }
 }

 /* For the err msg */
-#errText{
+#errText {
  text-align: center;
  color: tomato;
  font-weight: 600;
 }

-.contact_page_section .contact_inner .contact_form form .form-group span{
+.contact_page_section .contact_inner .contact_form form .form-group span {
  font-size: 12px;
  color: tomato;
  padding: 3px;
  display: none;
 }

-.contact_page_section .contact_inner .contact_form form .form-group input:valid[focused="true"]{
+.contact_page_section
+  .contact_inner
+  .contact_form
+  form
+  .form-group
+  input:valid[focused="true"] {
  border: 1px solid var(--dark-purple);
 }

-.contact_page_section .contact_inner .contact_form form .form-group input:invalid[focused="true"]{
+.contact_page_section
+  .contact_inner
+  .contact_form
+  form
+  .form-group
+  input:invalid[focused="true"] {
  border: 1px solid tomato;
 }

-.contact_page_section .contact_inner .contact_form form .form-group input:invalid[focused="true"] ~ span{
+.contact_page_section
+  .contact_inner
+  .contact_form
+  form
+  .form-group
+  input:invalid[focused="true"]
+  ~ span {
  display: block;
 }

@@ -4689,19 +4763,20 @@ header.fix_style.white_header {

 /* Loader */

-.loader{
+.loader {
  border-radius: 100%;
  position: relative;
 }

-.loader-sm{
+.loader-sm {
  width: 24px;
  height: 24px;
 }

 /* LOADER 1 */

-#loader-1:before, #loader-1:after{
+#loader-1:before,
+#loader-1:after {
  content: "";
  position: absolute;
  width: 100%;
@@ -4711,24 +4786,24 @@ header.fix_style.white_header {
  border-top-color: var(--body-text-purple);
 }

-#loader-1:before{
+#loader-1:before {
  z-index: 100;
  animation: spin 1.5s infinite;
 }

-#loader-1:after{
+#loader-1:after {
  border: 3.5px solid #ccc;
 }

-@keyframes spin{
-  0%{
+@keyframes spin {
+  0% {
    -webkit-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
  }

-  100%{
+  100% {
    -webkit-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    -o-transform: rotate(360deg);
@@ -6,19 +6,31 @@ 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 Flxuxtra 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 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 (
    <>       
@@ -79,12 +91,12 @@ const Main = ({brdcum}) => {
                    <div className="col-lg-6">
                        <div className="app_images" data-aos="fade-in" data-aos-duration="1500">
                        <ul>
-                            <li><img src="assets/images/abt_01.png" alt="" /></li>
+                            <li><img src={About1} alt="health monitor gadget" /></li>
                            <li>
                            <a data-url="#" onClick = {() => setytShow(true)}  className="popup-youtube play-button"
                                data-toggle="modal"
                                data-target="#myModal" title="About Video">
-                                <img src="assets/images/abt_02.png" alt="" />
+                                <img src={About2} alt="" />
                                <div className="waves-block">
                                <div className="waves wave-1"></div>
                                <div className="waves wave-2"></div>
@@ -93,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>
@@ -115,9 +128,7 @@ const Main = ({brdcum}) => {
                        </div> */}
                        <div className="text">
                        <h3>{whyWeAreDiff.title1}</h3>
-                        <p>Lorem Ipsum is simply dummy text of the printing and type
-                            setting indus ideas.
-                        </p>
+                        <p> {whyWeAreDiff.secureDesc}</p>
                        </div>
                    </div>
                    </div>
@@ -128,7 +139,7 @@ const Main = ({brdcum}) => {
                        </div> */}
                        <div className="text">
                        <h3>{whyWeAreDiff.title2}</h3>
-                        <p>Simply dummy text of the printing and typesetting indus lorem Ipsum is dummy.</p>
+                         <p>{whyWeAreDiff.richFeaturesDesc}</p>
                        </div>
                    </div>
                    </div>
@@ -139,9 +150,7 @@ const Main = ({brdcum}) => {
                        </div> */}
                        <div className="text">
                        <h3>{whyWeAreDiff.title3}</h3>
-                        <p>Lorem Ipsum is simply dummy text of the printing and type
-                            setting indus ideas.
-                        </p>
+                         <p>{whyWeAreDiff.easeOfUseDesc}</p>
                        </div>
                    </div>
                    </div>
@@ -152,7 +161,7 @@ const Main = ({brdcum}) => {
                        </div> */}
                        <div className="text">
                        <h3>{whyWeAreDiff.title4}</h3>
-                        <p>Simply dummy text of the printing and typesetting indus lorem Ipsum is dummy.</p>
+                        <p>{whyWeAreDiff.supportDesc}</p>
                        </div>
                    </div>
                    </div>
@@ -165,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">
@@ -173,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>
@@ -229,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>
@@ -243,4 +252,4 @@ const Main = ({brdcum}) => {
  )
 }

-export default Main
+export default Main
@@ -1,8 +1,6 @@
 import React, { useEffect, useState } 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 SiteService from "../../../vendors/service/siteService";
 const Main = ({ brdcum, bgimg }) => {
  const [blogData, setBlogData] = useState([]);
@@ -10,8 +8,8 @@ const Main = ({ brdcum, bgimg }) => {

  const api = new SiteService();
  useEffect(() => {
-    getBlogData();
-  }, []);
+    if(blogData.length===0){getBlogData()};
+  }, [blogData]);

  const getBlogData = async () => {
    try {
@@ -71,14 +69,14 @@ const Main = ({ brdcum, bgimg }) => {

      <section className="row_am blog_list_main">
        {blogData.map((data,index) => {
-          if (index == 0){
+          if (index === 0){
            return (
              <div className="container">
              <div className="row">
                <div
                  className="col-lg-6"
-                  data-aos="fade-in"
-                  data-aos-duration="1500"
+                  // data-aos="fade-in"
+                  // data-aos-duration="1500"
                >
                  <div className="blog_img">
                    <img 
@@ -95,9 +93,12 @@ const Main = ({ brdcum, bgimg }) => {
                    <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}}>
+                      {/* <Link to={`/blog-single/${data.id}`} state={{data}}>
                          READ MORE
-                        </Link>
+                        </Link> */}
+                        <Link to={`/blogdetails/${data.id}`} state={{data, allData: blogData}}>
+                      READ MORE
+                    </Link>
                    </div>
                  </div>
                </div>
@@ -117,7 +118,7 @@ const Main = ({ brdcum, bgimg }) => {
              if (index > 0){
                return (
                  <div key={data.id} className="col-md-4">
-                <div className="story_box" data-aos="fade-up" data-aos-duration="1500">
+                <div className="story_box">
                  <div className="story_img">
                    <img src={data.meta_value} alt="image" />
                    <span>{new Date (data && data.post_date).toDateString()}</span>
@@ -125,7 +126,7 @@ const Main = ({ brdcum, bgimg }) => {
                  <div className="story_text">
                    <h3>{data.post_title}</h3>
                    <div dangerouslySetInnerHTML={{__html: data && data.post_content.substring(0,100)+'  . . .'}}></div>
-                    <Link to={`/blog-single/${data.id}`} state={{data, allData: blogData}}>
+                    <Link to={`/blogdetails/${data.id}`} state={{data, allData: blogData}}>
                      READ MORE
                    </Link>
                  </div>
@@ -140,7 +141,8 @@ const Main = ({ brdcum, bgimg }) => {
          <div className="pagination_block">
            <ul>
              <li>
-                <Link to="#" className="prev">
+                <Link to={process.env.REACT_APP_BLOGSITE}
+                 className="prev">
                  {" "}
                  Visit our blog
                </Link>
@@ -101,42 +101,8 @@ const Main = ({brdcum}) => {
                        <h3>{data && data.post_name}</h3>
                        <div dangerouslySetInnerHTML={{__html: data && data.post_content}}></div>
                    </div>
-                    {/* <div className="info">
-                        <p>Lorem Ipsum is simply dummy text of the printing and typesetting in dustry lorem Ipsum has been the industrys standard dummy text ev er since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic Lorem Ipsum is simply dummy text of the printing and typesettingindustry lorem Ipsum has been the industrys standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived.</p>
-                        <p>Printing and typesetting in dustry lorem Ipsum has been the industrys standard dummy text ev er since the 1500s, when an unnown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic Lorem Ipsum is simply dummy text of the printing and typesettingindustry lorem Ipsum has been the industrys centuries, but also the leap into electronic.</p>
-                        <h3>Why we are best</h3>
-                        <p>Lorem Ipsum is simply dummy text of the printing and typesetting in dustry lorem Ipsum has been the industrys standard dummy text ev er since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic.</p>
-                        <ul>
-                            <li><p> <span className="icon"><i className="icofont-check-circled"></i></span> Lorem Ipsum is simply dummy text of the printing and typesetting in </p></li>
-                            <li><p> <span className="icon"><i className="icofont-check-circled"></i></span> Dustry lorem Ipsum has been the industrys standard dummy text ev er since the when</p></li>
-                            <li><p> <span className="icon"><i className="icofont-check-circled"></i></span> Unknown printer took a galley of type and scrambled it to make.</p></li>
-                            <li><p> <span className="icon"><i className="icofont-check-circled"></i></span> Type specimen book. It has survived not only five centuries, but also the leap into electronic.</p></li>
-                            <li><p> <span className="icon"><i className="icofont-check-circled"></i></span> Lorem Ipsum is simply dummy text of the printing.</p></li>
-                            <li><p> <span className="icon"><i className="icofont-check-circled"></i></span> Dustry lorem Ipsum has been the industrys standard dummy text ev er since.</p></li>
-                            <li><p> <span className="icon"><i className="icofont-check-circled"></i></span> Unknown printer took a galley of type and scrambled it to make.</p></li>
-                            <li><p> <span className="icon"><i className="icofont-check-circled"></i></span> Type specimen book. It has survived not only.</p></li>
-                        </ul>
-                    </div> 
-                    <div className="two_img">
-                        <div className="row">
-                            <div className="col-md-6">
-                            <img src="assets/images/blog_sub_01.png" alt="image" />
-                            </div>
-                            <div className="col-md-6">
-                            <img src="assets/images/blog_sub_02.png" alt="image" />
-                            </div>
-                        </div>
-                    </div>
-                    <div className="info">
-                        <h3>Why we are best</h3>
-                        <p>Lorem Ipsum is simply dummy text of the printing and typesetting in dustry lorem Ipsum has been the industrys standard dummy text ev er since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic Lorem Ipsum is simply dummy text of the printing and typesettingindustry lorem Ipsum has been the industrys standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived.</p>
-                    </div>
-                    <div className="quote_block">
-                        <span className="q_icon"><img src="assets/images/quote_icon.png" alt="image" /></span>
-                        <h2>Lorem Ipsum is simply dummy text of the printing and typesetting in dustry lorem Ipsum has been the industrys standard dummy.</h2>
-                        <p><span className="name">Mr. John Doe,</span> Apper Inc</p>
-                    </div> */}
-                    {/* <p>Lorem Ipsum is simply dummy text of the printing and typesetting in dustry lorem Ipsum has been the industrys standard dummy text ev er since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic industry.</p> */}
+
+                   
                    <div className="blog_authore">
                        <div className="authore_info">
                            {/* <div className="avtar">
@@ -149,25 +115,27 @@ const Main = ({brdcum}) => {
                        </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>
@@ -260,7 +228,7 @@ const Main = ({brdcum}) => {
                    </div>
                </form>
            </div>
-        </section>
+        </section> */}

        <section className="row_am latest_story" id="blog">
            <div className="container">
@@ -283,7 +251,10 @@ const Main = ({brdcum}) => {
                         <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}}>
+                            {/* <Link to={`/blog-single/${data.id}`} state={{data}}>
+                                 READ MORE
+                            </Link> */}
+                            <Link to={`/blogdetails/${data.id}`} state={{data, allData: blogData}}>
                                 READ MORE
                            </Link>
                         </div>
@@ -291,10 +262,6 @@ const Main = ({brdcum}) => {
                 </div>

                 )})}
-            
-
-                   
-

                    {/* <div className="col-md-4">
                        <div className="story_box" data-aos="fade-up" data-aos-duration="1500">
@@ -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>
@@ -6,7 +6,7 @@ import Bredcrumb from "../Bredcrumb/Main";
 import BGImg from "../../assets/images/bread_crumb_bg.png";
 import BGImg1 from "../../assets/images/bread_crumb_bg_one.png";
 import BGImg2 from "../../assets/images/bread_crumb_bg_two.png";
-import SuccessImg from "../../assets/images/experts_01.png"
+import SuccessImg from "../../assets/images/confirmed-letter.jpg"

 import SiteService from "../../vendors/service/siteService";

@@ -51,10 +51,11 @@ const FormInput = (props) => {

 const Main = ({ brdcum }) => {
  let response = document.getElementById("contact_loader");
-  let contact_body = document.getElementById("contact_body");
  let errText = document.getElementById("errText");
  let navigate = useNavigate();

+  let [showSuccessfulImage, setShowSuccessfulImage] = useState(false) // Handles when sucess image is shown
+
  // Form Validation
  const [values, setValues] = useState({
    name: "",
@@ -64,7 +65,9 @@ const Main = ({ brdcum }) => {
    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
@@ -78,7 +81,6 @@ const Main = ({ brdcum }) => {
  const onChange = (e) => {
    setValues((prev) => ({ ...prev, [e.target.name]: e.target.value }));
  };
-  console.log(values);

  // Submitting form
  const handleSubmit = async (e) => {
@@ -93,36 +95,30 @@ const Main = ({ brdcum }) => {
        setMyData(contact);

        // Checking for errors
-        if (contact?.data?.status < 1 || contact?.data?.message_id == "")
-          return (errText.textContent =
-            "unable to send your message, please try able");
-        else {
+        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>`;

-          contact_body.innerHTML = `<div class='contact_body animate pop'>
-      <div><img src=${SuccessImg} /></div>
-      <p>We have received your message and will follow up promptly.</p>
-      </div>`;
+          setShowSuccessfulImage(true) // sets show success image to true
+
          setTimeout(() => {
            navigate("/");
          }, 10000);
-
-          setValues((prev) => ({ ...prev, [e.target.name]: "" }));
        }
      })
-      .catch((error) => {
-        console.log(error);
+      .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.values(data.data)));
+    allCountry().then((data) => setCountries(Object.entries(data.data))).catch((err)=>console.log(err.message));
  }, []);

-  useEffect(() => {
-    console.log(myData);
-  }, [myData]);

  return (
    <>
@@ -180,110 +176,114 @@ const Main = ({ brdcum }) => {
        id="contact">
        <div className="container">
          <div className="contact_inner">
-            <div
-              className="contact_form"
-              id="contact_body">
-              <div className="section_title">
-                <h2>
-                  <span>Leave a</span> message
-                </h2>
-                <p>Fill up form below, our team will get back soon</p>
-              </div>
-
-              {/* Contact Form */}
-              <form onSubmit={handleSubmit}>
-                <FormInput
-                  name="name"
-                  type="text"
-                  placeholder="Name"
-                  errorMessage="Please enter your name"
-                  required={true}
-                  maxLenght={35}
-                  value={values.name}
-                  onChange={onChange}
-                  pattern="^[A-Za-z]{1,35}$"
-                />
-
-                <FormInput
-                  name="email"
-                  type="email"
-                  placeholder="Email"
-                  errorMessage="It should be a valid email address!"
-                  required={true}
-                  maxLenght={35}
-                  value={values.email}
-                  onChange={onChange}
-                />
-
-                <div className="form-group">
-                  <select
-                    className="form-control"
-                    name="country"
-                    value={values.country}
-                    onChange={onChange}
-                    required>
-                    <option
-                      value={""}
-                      onCha>
-                      Country
-                    </option>
-                    {countries.length > 0 &&
-                      countries.map((country, index) => (
-                        <option
-                          key={index}
-                          value={country}>
-                          {country}
-                        </option>
-                      ))}
-                  </select>
+            <div className="contact_form" id="contact_body">
+              {showSuccessfulImage ? (
+                <>
+                  <div><img className="img-fluid animate-image" src={SuccessImg} alt='success image' /></div>
+                  <p>We have received your message and will follow up promptly.</p>
+                </>
+              ) : (
+                <>
+                <div className="section_title">
+                  <h2>
+                    <span>Leave a</span> message
+                  </h2>
+                  <p>Fill up form below, our team will get back soon</p>
                </div>

-                <FormInput
-                  name="phone"
-                  type="number"
-                  placeholder="Phone"
-                  errorMessage="It should be a valid phone number!"
-                  maxLenght={15}
-                  value={values.phone}
-                  onChange={onChange}
-                  pattern="^[0-9]{15}$"
-                />
-
-                <div className="form-group">
-                  <textarea
-                    name="msg"
-                    className="form-control"
-                    placeholder="Your message"
-                    value={values.msg}
-                    errorMessage='words have exceeded 350 characters!'
+                {/* Contact Form */}
+                <form onSubmit={handleSubmit}>
+                  <FormInput
+                    name="name"
+                    type="text"
+                    placeholder="Name"
+                    errorMessage="Please enter your first and last name. (e.g: Mark John)"
+                    required={true}
+                    maxLenght={35}
+                    value={values.name}
                    onChange={onChange}
-                    maxLength={300}
-                    pattern="^[A-Za-z0-9]{5, 300}$"
+                    pattern="^\w+( \w+)$"
                  />
-                </div>
-                <div className="form-group term_check">
-                  <input
-                    type="checkbox"
-                    id="term"
+
+                  <FormInput
+                    name="email"
+                    type="email"
+                    placeholder="Email"
+                    errorMessage="It should be a valid email address!"
+                    required={true}
+                    maxLenght={35}
+                    value={values.email}
                    onChange={onChange}
-                    required
                  />
-                  <label htmlFor="term">
-                    I agree to the terms and conditions
-                  </label>
-                </div>
-                <div className="form-group mb-0">
-                  <button
-                    type="submit"
-                    className="btn puprple_btn contact_btn"
-                    aria-label="submit form"
-                    id="contact_loader">
-                    <p> SEND MESSAGE </p>
-                  </button>
-                </div>
-              </form>
-              {/* Error Tag */}
-              <p id="errText" />
+
+                  <div className="form-group">
+                    <select
+                      className="form-control"
+                      name="country"
+                      value={values.country}
+                      onChange={onChange}
+                      required>
+                      <option value={""}>
+                        Country
+                      </option>
+                      {countries.length > 0 &&
+                        countries.map((country, index) => (
+                          <option
+                            key={index}
+                            value={country[0]}>
+                            {country[1]}
+                          </option>
+                        ))}
+                    </select>
+                  </div>
+
+                  <FormInput
+                    name="phone"
+                    type="number"
+                    placeholder="Phone"
+                    errorMessage="It should be a valid phone number!"
+                    maxLenght={15}
+                    value={values.phone}
+                    onChange={onChange}
+                    pattern="^[0-9]{15}$"
+                  />
+
+                  <div className="form-group">
+                    <textarea
+                      name="message"
+                      className="form-control"
+                      placeholder="Your message"
+                      value={values.message}
+                      onChange={onChange}
+                      maxLength={300}
+                      pattern="^[A-Za-z0-9]{5, 300}$"
+                    />
+                  </div>
+                  <div className="form-group term_check">
+                    <input
+                      type="checkbox"
+                      id="term"
+                      onChange={onChange}
+                      required
+                    />
+                    <label htmlFor="term">
+                      I agree to the terms and conditions
+                    </label>
+                  </div>
+                  <div className="form-group mb-0">
+                    <button
+                      type="submit"
+                      className="btn puprple_btn contact_btn"
+                      aria-label="submit form"
+                      id="contact_loader">
+                      <p> SEND MESSAGE </p>
+                    </button>
+                  </div>
+                </form>
+                {/* Error Tag */}
+                <p id="errText"></p>
+                </>
+              )}
            </div>

            {/* Contact Info */}
@@ -355,7 +355,9 @@ const Main = ({ brdcum }) => {
        </div>
      </section>
      <section className="row_am map_section">
-        <div className="container" />
+        <div className="container">
+
+        </div>
      </section>
    </>
  );
@@ -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,12 +30,20 @@ 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">
@@ -66,7 +53,7 @@ const Main = ({ footer }) => {
                        </a>
                      </li>
                      <li>
-                        <a href ={process.env.REACT_APP_TWITTER}>
+                        <a href={process.env.REACT_APP_TWITTER}>
                          <i className="icofont-twitter"></i>
                        </a>
                      </li>
@@ -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>
@@ -100,7 +88,7 @@ const Main = ({ footer }) => {
                        <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>
@@ -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>
-                          <a href={process.env.REACT_APP_FACEBOOK}>
-                            <i className="icofont-facebook"></i>
-                          </a>
+                      <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>
+                        <a href={process.env.REACT_APP_TWITTER}>
+                          <i className="icofont-twitter"></i>
+                        </a>
                      </li>
                    </ul>
                  </div>
@@ -237,7 +233,7 @@ const Main = ({ footer }) => {
                        <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>
@@ -311,12 +307,20 @@ 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">
@@ -326,7 +330,7 @@ const Main = ({ footer }) => {
                        </a>
                      </li>
                      <li>
-                        <a href ={process.env.REACT_APP_TWITTER}>
+                        <a href={process.env.REACT_APP_TWITTER}>
                          <i className="icofont-twitter"></i>
                        </a>
                      </li>
@@ -367,7 +371,7 @@ const Main = ({ footer }) => {
                        <Link to="#">Support</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>
@@ -383,7 +387,7 @@ const Main = ({ footer }) => {
                  <div className="try_out">
                    <h3>Let’s Try Out</h3>
                    <ul className="app_btn">
-                     <li>
+                      <li>
                        <a href={process.env.REACT_APP_ANDROID_URL}>
                          <img src={blueapp} alt="image" />
                        </a>
@@ -436,12 +440,20 @@ 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">
@@ -451,7 +463,7 @@ const Main = ({ footer }) => {
                        </a>
                      </li>
                      <li>
-                        <a href ={process.env.REACT_APP_TWITTER}>
+                        <a href={process.env.REACT_APP_TWITTER}>
                          <i className="icofont-twitter"></i>
                        </a>
                      </li>
@@ -492,7 +504,7 @@ const Main = ({ footer }) => {
                        <Link to="#">Support</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>
@@ -569,12 +581,20 @@ 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">
@@ -584,7 +604,7 @@ const Main = ({ footer }) => {
                        </a>
                      </li>
                      <li>
-                        <a href ={process.env.REACT_APP_TWITTER}>
+                        <a href={process.env.REACT_APP_TWITTER}>
                          <i className="icofont-twitter"></i>
                        </a>
                      </li>
@@ -624,7 +644,7 @@ const Main = ({ footer }) => {
                        <Link to="#">Support</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>
@@ -639,7 +659,7 @@ const Main = ({ footer }) => {
                  <div className="try_out">
                    <h3>Let’s Try Out</h3>
                    <ul className="app_btn">
-                     <li>
+                      <li>
                        <a href={process.env.REACT_APP_ANDROID_URL}>
                          <img src={blueapp} alt="image" />
                        </a>
@@ -16,6 +16,9 @@ import white from "../../assets/images/googleplay_white.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 }) => {
@@ -56,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
@@ -104,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>
@@ -136,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>
@@ -1,81 +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. 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>
+      <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;
@@ -27,73 +27,7 @@ const Main = ({gredient}) => {
                    <p>Organizing all types of wellness activity you desire.<br/>Proven step to increase pleasure and commitment.</p>
                </div>
                <div className="faq_panel">
-                    <div className="accordion" id="accordionExample">
-                        {/* <div className="card" data-aos="fade-up" data-aos-duration="1500">
-                            <div className="card-header" id="headingOne">
-                                <h2 className="mb-0">
-                                <button type="button" className={`btn btn-link ${activeFaq.a && "active"}`} onClick= {() => setActiveFaq(activeFaq.a ? {a : false} : {a : true})} data-toggle="collapse" data-target="#collapseOne">
-                                {activeFaq.a ? <i className="icon_faq icofont-minus"></i>  : <i className="icon_faq icofont-plus"></i>} How can i pay ?</button>
-                                </h2>
-                            </div>
-                            <div id="collapseOne" className="collapse show" aria-labelledby="headingOne" data-parent="#accordionExample">
-                                <div className="card-body">
-                                <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry lorem Ipsum has. been the
-                                    industrys standard dummy text ever since the when an unknown printer took a galley of type and
-                                    scrambled it to make a type specimen book. It has survived not only five cen turies but also the
-                                    leap into electronic typesetting, remaining essentially unchanged.</p>
-                                </div>
-                            </div>
-                        </div>
-                        <div className="card" data-aos="fade-up" data-aos-duration="1500">
-                            <div className="card-header" id="headingTwo">
-                                <h2 className="mb-0">
-                                <button type="button" className={`btn btn-link ${activeFaq.b && "active"}`} onClick= {() => setActiveFaq(activeFaq.b ? {b : false} : {b : true})} data-toggle="collapse"
-                                    data-target="#collapseTwo">{activeFaq.b ? <i className="icon_faq icofont-minus"></i>  : <i className="icon_faq icofont-plus"></i>} How to setup account ?</button>
-                                </h2>
-                            </div>
-                            <div id="collapseTwo" className="collapse" aria-labelledby="headingTwo" data-parent="#accordionExample">
-                                <div className="card-body">
-                                <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry lorem Ipsum has. been the
-                                    industrys standard dummy text ever since the when an unknown printer took a galley of type and
-                                    scrambled it to make a type specimen book. It has survived not only five cen turies but also the
-                                    leap into electronic typesetting, remaining essentially unchanged.</p>
-                                </div>
-                            </div>
-                        </div>
-                        <div className="card" data-aos="fade-up" data-aos-duration="1500">
-                            <div className="card-header" id="headingThree">
-                                <h2 className="mb-0">
-                                <button type="button" className={`btn btn-link ${activeFaq.c && "active"}`} onClick= {() => setActiveFaq(activeFaq.c ? {c : false} : {c : true})} data-toggle="collapse"
-                                    data-target="#collapseThree">{activeFaq.c ? <i className="icon_faq icofont-minus"></i>  : <i className="icon_faq icofont-plus"></i>}What is process to get refund
-                                    ?</button>
-                                </h2>
-                            </div>
-                            <div id="collapseThree" className="collapse" aria-labelledby="headingThree" data-parent="#accordionExample">
-                                <div className="card-body">
-                                <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry lorem Ipsum has. been the
-                                    industrys standard dummy text ever since the when an unknown printer took a galley of type and
-                                    scrambled it to make a type specimen book. It has survived not only five cen turies but also the
-                                    leap into electronic typesetting, remaining essentially unchanged.</p>
-                                </div>
-                            </div>
-                        </div>
-                        <div className="card" data-aos="fade-up" data-aos-duration="1500">
-                            <div className="card-header" id="headingFour">
-                                <h2 className="mb-0">
-                                <button type="button" className={`btn btn-link ${activeFaq.d && "active"}`} onClick= {() => setActiveFaq(activeFaq.d ? {d : false} : {d : true})} data-toggle="collapse"
-                                    data-target="#collapseFour">{activeFaq.d ? <i className="icon_faq icofont-minus"></i>  : <i className="icon_faq icofont-plus"></i>}What is process to get refund
-                                    ?</button>
-                                </h2>
-                            </div>
-                            <div id="collapseFour" className="collapse" aria-labelledby="headingFour" data-parent="#accordionExample">
-                                <div className="card-body">
-                                <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry lorem Ipsum has. been the
-                                    industrys standard dummy text ever since the when an unknown printer took a galley of type and
-                                    scrambled it to make a type specimen book. It has survived not only five cen turies but also the
-                                    leap into electronic typesetting, remaining essentially unchanged.</p>
-                                </div>
-                            </div>
-                        </div> */}
+                    <div className="accordion" id="accordionMyfitFaq">

                        {/* displays loading ... while the page fetches the FAQs */}
                        {faqs.length < 1 && <h3>Loading...</h3>}
@@ -112,7 +46,7 @@ const Main = ({gredient}) => {
                                    </h2>
                                </div>

-                                <div id={target} className="collapse" aria-labelledby={id} data-parent="#accordionExample">
+                                <div id={target} className="collapse" aria-labelledby={id} data-parent="#accordionMyfitFaq">
                                    <div className="card-body">
                                        <p>{faq.text}</p>
                                    </div>
@@ -8,63 +8,7 @@ import img5 from '../../../assets/images/features_frame.png'
 const Main = ({video}) => {
  return (
    <>
-        {video ?
-        <section className="row_am features_section video-features" id="features">
-            <div className="container">
-                <div className="section_title" data-aos="fade-up" data-aos-duration="1500" data-aos-delay="100">
-                <h2><span>Features</span> that makes app different!</h2>
-                <p>myFit has powerful connectivity, fitness, health, and safety features <br/> 
-                Also makes provision Fitness tracking,Workout tracking,Heart rate monitoring</p>
-                </div>
-                <div className="feature_detail">
-                <div className="left_data feature_box">
-                    <div className="data_block" data-aos="fade-right" data-aos-duration="1500">
-                    <div className="icon">
-                        <img src="assets/images/secure.png" alt="image" />
-                    </div>
-                    <div className="text">
-                        <h4>Secure data</h4>
-                        <p>Lorem Ipsum is simply dummy text of the printing and type setting indus ideas.</p>
-                    </div>
-                    </div>
-                    <div className="data_block" data-aos="fade-right" data-aos-duration="1500">
-                    <div className="icon">
-                        <img src="assets/images/abt_functional.png" alt="image" />
-                    </div>
-                    <div className="text">
-                        <h4>Fully functional</h4>
-                        <p>Simply dummy text of the printing and typesetting indus lorem Ipsum is dummy.</p>
-                    </div>
-                    </div>
-                </div>
-                <div className="right_data feature_box">
-                    <div className="data_block" data-aos="fade-left" data-aos-duration="1500">
-                    <div className="icon">
-                        <img src="assets/images/communication.png" alt="image"/>
-                    </div>
-                    <div className="text">
-                        <h4>Live chat</h4>
-                        <p>Lorem Ipsum is simply dummy text of the printing and type setting indus ideas.</p>
-                    </div>
-                    </div>
-                    <div className="data_block" data-aos="fade-left" data-aos-duration="1500">
-                    <div className="icon">
-                        <img src="assets/images/abt_support.png" alt="image" />
-                    </div>
-                    <div className="text">
-                        <h4>24-7 Support</h4>
-                        <p>Simply dummy text of the printing and typesetting indus lorem Ipsum is dummy.</p>
-                    </div>
-                    </div>
-                </div>
-                <div className="feature_img" data-aos="fade-up" data-aos-duration="1500" data-aos-delay="100">
-                    <img src="assets/images/features_frame.png" alt="image" />
-                </div>
-                </div>
-            </div>
-        </section>
-        :
-        <section className="row_am features_section" id="features">
+        {<section className="row_am features_section" id="features">
            <div className="container">
                <div className="section_title" data-aos="fade-up" data-aos-duration="1500" data-aos-delay="100">
                <h2><span>Features</span> that makes app different!</h2>
@@ -76,14 +20,14 @@ const Main = ({video}) => {
    
                    <div className="text">
                        <h4>Health Tips</h4>
-                        <p>myFit continuously help you organize both general and the few health questions relevant to you. We can privately help you find answer in our communities to new questions.</p>
+                        <p>myFit continuously help you organize both general and the few health questions relevant to you. </p>
                    </div>
                    </div>
                    <div className="data_block" data-aos="fade-right" data-aos-duration="1500">
        
                    <div className="text">
                        <h4>Health Statistics</h4>
-                        <p>Collect your health statistics yourself, weight changes, blood pressure, blood glucose data all helps to ensure that your provider is creating plans that fits you specifically..</p>
+                        <p>Collect your health statistics yourself, weight changes, blood pressure, blood glucose or data that fits you specifically.</p>
                    </div>
                    </div>
                </div>
@@ -1,82 +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>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>
+      <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;
@@ -8,11 +8,13 @@ import img3 from '../../../assets/images/premium.png'
 import SiteService from '../../../vendors/service/siteService'

 const Main = ({gredient , video}) => {
-    
+
    const[tog, setTog] = useState()

    const [prices, setPrices] = useState([]); // initial state for FAQs before API call

+    const [pricing_text_02, setPricingtext02] = useState('');
+
    let priceServices = new SiteService(); // instantiating the class

    const getAllPriceData = () => {
@@ -20,7 +22,9 @@ const Main = ({gredient , video}) => {
    };

    useEffect(() => {
-        getAllPriceData().then((data) => setPrices(data.data));
+        getAllPriceData().then((data) => {
+            setPricingtext02(data.data.pricing_text_02);
+            setPrices(data.data.pricing) });
        AOS.init();
        AOS.refresh();
    }, []);
@@ -31,9 +35,13 @@ const Main = ({gredient , video}) => {
            <section className="row_am pricing_section gredient-pricing" id="pricing">
                <div className="container">
                    <div className="section_title" data-aos="fade-up" data-aos-duration="1500" data-aos-delay="300">
-                    <h2>Best & simple <span>pricing</span></h2>
-                    <p className="gredient-p">Lorem Ipsum is simply dummy text of the printing and typese tting <br/> indus orem Ipsum has beenthe
-                        standard dummy.</p>
+                    <h2>Flexible & Simple <span>pricing</span></h2>
+                    <p className="gredient-p">
+                    {/*    <>*/}
+                    {/*    {pricing_text_02}*/}
+                    {/*</>*/}
+                         Choose your myFit Pricing Plan <br/> myFit has a free Standard for Basics , $5 per month for Premium <br />
+                        and $7.99 per month for Gold-tier</p>
                    </div>
                    <div className="toggle_block" data-aos="fade-up" data-aos-duration="1500">
                        <span className={`month ${tog ? 'active' : ''}`}>Monthly</span>
@@ -140,9 +148,9 @@ const Main = ({gredient , video}) => {
            <section className="row_am pricing_section" id="pricing">
                <div className="container">
                    <div className="section_title" data-aos="fade-up" data-aos-duration="1500" data-aos-delay="300">
-                    <h2>Best & simple <span>pricing</span></h2>
-                    <p>Lorem Ipsum is simply dummy text of the printing and typese tting <br/> indus orem Ipsum has beenthe
-                        standard dummy.</p>
+                    <h2>Flexible & Simple <span>pricing</span></h2>
+                    <p>Choose your myFit Pricing Plan <br/> myFit has a free Standard for Basics , $5 per month for Premium <br />
+                        and $7.99 per month for Gold-tier.</p>
                    </div>
                    <div className="toggle_block" data-aos="fade-up" data-aos-duration="1500">
                        <span className={`month ${tog ? 'active' : ''}`}>Monthly</span>
@@ -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> 
@@ -1,14 +1,15 @@
 import React , {useState} from 'react'
 import { Link } from 'react-router-dom'
-import img from '../../../assets/images/download_app1.png'
-import img1 from '../../../assets/images/create_account2.png'
-import img2 from '../../../assets/images/enjoy_app01.png'
+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)
@@ -28,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>
@@ -50,7 +51,7 @@ const Main = ({dark}) => {
                                <h3>02</h3>
                                </div>
                                <div className="step_img" data-aos="fade-right" data-aos-duration="1500">
-                                <img src={img1} alt="image" />
+                                <img className="create-account-logo" src={createAccount} alt="create account logo"/>
                                </div>
                            </li>
                            <li>
@@ -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>
@@ -134,7 +134,7 @@ const Main = ({navbar}) => {
                                <Link smooth to="/#features" className="nav-link">Features</Link>
                            </li>
                            <li className="nav-item">
-                                <Link smooth to="#how_it_work" className="nav-link">How it works</Link>
+                                <Link smooth to="/#how_it_work" className="nav-link">How it works</Link>
                            </li>
                            <li className="nav-item" >
                                <Link to="/blog" className="nav-link">Blog</Link>
@@ -143,7 +143,8 @@ const Main = ({navbar}) => {
                                <Link to="/contact" className="nav-link" >Contact</Link>
                            </li>
                            <li className="nav-item">
-                                <Link to="/" className="nav-link dark_btn">GET STARTED</Link>
+                                 <a href={process.env.REACT_APP_APPSITE} className="nav-link dark_btn">GET STARTED</a>
+                                {/* <Link to="/" className="nav-link dark_btn">GET STARTED</Link> */}
                            </li>

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

@@ -29,7 +33,7 @@ const Main = ({brdcum}) => {
        <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}/>}

@@ -37,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}/>}

@@ -45,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}/>}

@@ -53,18 +57,17 @@ 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">
            <div className="container">
                <div className="faq_panel">
@@ -241,9 +244,13 @@ const Main = ({brdcum}) => {
                            </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>
@@ -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}) => {

@@ -343,9 +347,13 @@ const Main = ({brdcum}) => {
                            </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>
@@ -356,4 +364,4 @@ const Main = ({brdcum}) => {
  )
 }

-export default Main
+export default Main
@@ -6,6 +6,11 @@ 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}) => {
@@ -17,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}/>}

@@ -25,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}/>}

@@ -33,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}/>}

@@ -42,14 +47,14 @@ const Main = ({brdcum}) => {
        <Bredcrumb 
        no={3}
        title="Our Pricing & Plans" 
-        paragraph="Lorem Ipsum is simply dummy text of the printing and typesetting"
+        paragraph="Flexible & Convienent Pricing Options"
        tag="Our Pricing & Plans" />}

        {brdcum.b4 && 
        <Bredcrumb 
        no={4}
        title="Our Pricing & Plans" 
-        paragraph="Lorem Ipsum is simply dummy text of the printing and typesetting"
+        paragraph="Flexible & Convienent Pricing Options"
        tag="Our Pricing & Plans" 
        bgimg={BGImg2}/>}

@@ -227,9 +232,9 @@ const Main = ({brdcum}) => {
                            </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>
@@ -3,7 +3,6 @@ import { Route, Routes, useLocation } from "react-router-dom";
 import Navbar from "../component/Navbar/Main";
 import Footer from "../component/Footer/Main";
 import Home from "../component/Home/Main";
-import Work from "../component/HomeMain/Work/Main"
 import AboutUs from "../component/AboutUs/Main";
 import Review from "../component/Pages/Review/Main";
 import Contact from "../component/Contact/Main";
@@ -18,46 +17,51 @@ 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} />}
@@ -66,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} />} />
@@ -86,11 +90,9 @@ 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/:id" 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} />} />
-        <Route path="/how_it_work" element={<Work brdcum={brdcum} />} />
-
      </Routes>
      {footerpage && <Footer footer={footer} />}
    </>
@@ -7,7 +7,8 @@ class SiteService {
  }
  // Blog Data {Get}
  blogData(id) {
-    return this.getAuxEnd("/blogdata", null);
+    //myfit
+    return this.getBlogEnd("/myfit", null);
  }

  // Country Data {GET}
@@ -16,8 +17,8 @@ class SiteService {
  }

  // Contact Data{POST}
-  contactData() {
-    return this.postAuxEnd("/contact", null)
+  contactData(value) {
+    return this.postAuxEnd("/contact", value)
  }

  faqData() {
@@ -56,13 +57,34 @@ class SiteService {
      });
  }

+  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;
-        console.log("~~~~~~~ Toks2 POST ~~~~~~~~");
+        // res = response
        return response;
      })
      .catch((error) => {
Author	SHA1	Message	Date
$CHIEFSOFT\ameye$ CHIEFSOFT\ameye	ed95226b67	blog data	2025-08-23 19:55:21 -04:00
$CHIEFSOFT\ameye$ CHIEFSOFT\ameye	2b1ce891b2	Merge branch 'master' of https://gitlab.chiefsoft.net/MyFit/www-myfit	2025-08-23 19:42:28 -04:00
$CHIEFSOFT\ameye$ CHIEFSOFT\ameye	2615396bf4	fix data	2025-08-23 19:42:06 -04:00
Fluxtra	47b29961ab	addded slash to footer file	2025-05-18 11:41:07 -04:00
Fluxtra	418c43cde4	Fix the env date	2025-05-18 11:31:00 -04:00
Olusesan Ameye	28b9a1980e	Switched docker registry registry.myfit.ai/www-myfit => registry.chiefsoft.net/www-myfit	2025-03-19 19:28:21 +00:00
ameye	c5e05a562d	Merge branch 'homepage-slides-update' of MyFit/www-myfit into master	2024-01-07 18:01:25 +00:00
ebube	25dbb98a9d	added new photo	2024-01-07 09:54:07 -08:00
ameye	df86cd9a42	Merge branch 'homepage-slides-update' of MyFit/www-myfit into master	2024-01-07 11:57:44 +00:00
ebube	6e91aea3b1	Add: images to homepage	2024-01-06 22:24:51 -08:00
ebube	d732d35023	Added new slide images to homepage and removed unused app download links	2024-01-06 22:20:24 -08:00
$CHIEFSOFT\ameye$ CHIEFSOFT\ameye	2460f5d618	my fit logo	2024-01-04 15:14:47 -05:00
ameye	654d30182d	Merge branch 'Dark-Cover-when-scrolled-down' of MyFit/www-myfit into master	2023-10-04 10:52:03 +00:00
Ebube	9372c1483d	Dark Cover when scrolled down	2023-10-03 16:19:48 +01:00
tolik	508eb82ff4	Production build	2023-03-12 07:43:40 +08:00
tolik	b492faedfa	Fix ESLint errors for production build	2023-03-12 07:26:54 +08:00
tolik	9aab8b0a2b	Fix ESLint errors for production build	2023-03-12 07:25:44 +08:00
jenkins	0cdd977815	production env file added	2023-03-04 19:03:56 -05:00
tokslaw	24ee079f8f	Merge branch 'footer_email_link_changed' of MyFit/www-myfit into master	2023-03-01 02:46:41 +00:00
victorAnumudu	ba1c8b8180	footer tel_link direct	2023-02-28 22:28:56 +01:00
victorAnumudu	3474d8150f	footer email link redirect	2023-02-28 20:52:34 +01:00
tolik	05e2353e83	:Merge branch 'master' of ssh://gitlab.chiefsoft.net/MyFit/www-myfit	2023-02-26 21:45:41 +00:00
tolik	9b1e1e401d	Environment files	2023-02-26 21:45:05 +00:00
Olu Amey	0767301fe6	Faq Clean up	2023-02-24 21:27:00 -05:00
Olu Amey	e51d118a57	Reduced text	2023-02-24 21:22:29 -05:00
tolik	f8f7c3e0cd	Image name fix	2023-02-19 00:46:49 +00:00
tolik	a4b752ed84	Docker fixes - build & registry	2023-02-18 23:04:00 +00:00
tokslaw	7ee2942c44	Merge branch 'about_main_image_fixed' of MyFit/www-myfit into master	2023-02-10 14:21:19 +00:00
victorAnumudu	e84cdc57b7	About page main image fixed	2023-02-10 11:43:48 +01:00
jenkins	0ef7ec3d10	white logo	2023-02-04 23:37:49 -05:00
tokslaw	2cf139db18	Merge branch 'successful_contact_us_image' of MyFit/www-myfit into master	2023-02-04 19:16:55 +00:00
tokslaw	4f567b3acf	pricing text	2023-02-04 13:39:18 -05:00
tokslaw	1dcccce8c6	pricing options text	2023-02-04 12:22:47 -05:00
victorAnumudu	350da5a215	Added contact us successful image	2023-02-03 08:18:48 +01:00
tokslaw	ddb5cab8b2	Questions text modify	2023-01-30 09:36:13 -05:00
tokslaw	e53d07b491	Merge branch 'myfit_fix_broken-links' of MyFit/www-myfit into master	2023-01-30 14:28:05 +00:00
$DESKTOP-QHP1O2H\MIKE$ DESKTOP-QHP1O2H\MIKE	f598bcd708	Merge branch 'master' of https://gitlab.chiefsoft.net/MyFit/www-myfit into myfit_fix_broken-links	2023-01-30 03:08:23 -05:00
$DESKTOP-QHP1O2H\MIKE$ DESKTOP-QHP1O2H\MIKE	ed08551714	reloading blog page	2023-01-30 03:07:13 -05:00
tokslaw	50605f6b6b	Merge branch 'about_page_images_fix' of MyFit/www-myfit into master	2023-01-28 00:06:53 +00:00
tokslaw	3703ecdc40	Merge branch 'myfit_create_account' of MyFit/www-myfit into master	2023-01-28 00:06:44 +00:00
victorAnumudu	2bcaa2d737	added border and create account image	2023-01-27 18:34:55 +01:00
$DESKTOP-QHP1O2H\MIKE$ DESKTOP-QHP1O2H\MIKE	b56721a018	fixed broken links	2023-01-27 12:32:49 -05:00
victorAnumudu	93837bfda5	changed the create account image on landing page	2023-01-27 18:24:31 +01:00
victorAnumudu	49403090db	Adjusted images to blend with page	2023-01-27 15:44:19 +01:00
tokslaw	70969c4cc9	Merge branch 'myfit_about_us_image' of MyFit/www-myfit into master	2023-01-27 10:57:16 +00:00
victorAnumudu	fe56c4afc4	added the about us images	2023-01-27 06:36:50 +01:00
Olu Amey	b15f580c35	Logo	2023-01-26 16:08:30 -05:00
tokslaw	2603495d8f	Merge branch 'fixing_links' of MyFit/www-myfit into master	2023-01-26 20:05:09 +00:00
$DESKTOP-QHP1O2H\MIKE$ DESKTOP-QHP1O2H\MIKE	b9cf520bcf	fixed broken links	2023-01-26 14:45:32 -05:00
tokslaw	6914a8fe99	step2 img modified	2023-01-26 11:02:00 -05:00
tokslaw	cd3732122b	About_us_desc	2023-01-26 06:25:41 -05:00
tokslaw	3aa53025cf	Merge branch 'master' of https://gitlab.chiefsoft.net/MyFit/www-myfit	2023-01-26 06:21:06 -05:00
tokslaw	e372f8a036	About_us_texts remodified	2023-01-26 06:20:03 -05:00
tokslaw	f6727c98d0	Merge branch 'import-img-faq-pricing' of MyFit/www-myfit into master	2023-01-26 11:15:20 +00:00
tokslaw	26cdf65d76	About_us_texts modified	2023-01-26 06:13:19 -05:00
tokslaw	de2b95fed5	Merge branch 'task-48-About-us-clean-up' of MyFit/www-myfit into master	2023-01-26 11:09:02 +00:00
$DESKTOP-QHP1O2H\MIKE$ DESKTOP-QHP1O2H\MIKE	dc921d42d2	imported image in pricing	2023-01-25 16:16:39 -05:00
ChineseChikki	b05b7b6956	About us page updated	2023-01-25 21:14:49 +01:00
tokslaw	fa649aef81	Merge branch 'myfit-import_images' of MyFit/www-myfit into master	2023-01-25 18:28:23 +00:00
$DESKTOP-QHP1O2H\MIKE$ DESKTOP-QHP1O2H\MIKE	30ac6f6a69	Merge branch 'master' of https://gitlab.chiefsoft.net/MyFit/www-myfit into myfit-import_images	2023-01-25 13:09:56 -05:00
$DESKTOP-QHP1O2H\MIKE$ DESKTOP-QHP1O2H\MIKE	f81aa3e467	resized and imported image in faq and review	2023-01-25 13:09:27 -05:00
jenkins	de6044b561	.env update	2023-01-25 12:26:19 -05:00
$DESKTOP-QHP1O2H\MIKE$ DESKTOP-QHP1O2H\MIKE	e8fcf95efb	Merge branch 'master' of https://gitlab.chiefsoft.net/MyFit/www-myfit into myfit-import_images	2023-01-25 11:59:23 -05:00
$DESKTOP-QHP1O2H\MIKE$ DESKTOP-QHP1O2H\MIKE	6c99163825	resize and import image	2023-01-25 11:58:56 -05:00
tokslaw	1db651722b	Merge branch 'myfit_contact_page_name_fix' of MyFit/www-myfit into master	2023-01-25 16:43:02 +00:00
victorAnumudu	d2f4996186	made first and last name required in name input tag	2023-01-25 15:55:29 +01:00
tokslaw	2f5ab5a1f7	Merge branch 'myfit_country_code_return_value_fixed' of MyFit/www-myfit into master	2023-01-25 14:03:22 +00:00
victorAnumudu	40caafdeb5	made country input tag to show country but returns country code as value	2023-01-25 14:23:11 +01:00
tokslaw	e2bc8b517e	Merge branch 'myfit_country_code_fix' of MyFit/www-myfit into master	2023-01-25 12:25:35 +00:00
victorAnumudu	6d73d9151f	country code changes when another country is seleted	2023-01-25 08:38:23 +01:00
tokslaw	65c3474519	Merge branch 'myfit-about-us-fix' of MyFit/www-myfit into master	2023-01-24 22:53:51 +00:00
$DESKTOP-QHP1O2H\MIKE$ DESKTOP-QHP1O2H\MIKE	b6baa37a1f	text variable query section	2023-01-24 11:02:52 -05:00
$DESKTOP-QHP1O2H\MIKE$ DESKTOP-QHP1O2H\MIKE	2b351b9825	Merge branch 'master' of https://gitlab.chiefsoft.net/MyFit/www-myfit into myfit-about-us-fix	2023-01-24 10:26:57 -05:00
$DESKTOP-QHP1O2H\MIKE$ DESKTOP-QHP1O2H\MIKE	a09bfac386	text as variable	2023-01-24 10:26:24 -05:00
tokslaw	209b35b26d	Merge branch 'myfit_contact_message_and_countrycode_fix' of MyFit/www-myfit into master	2023-01-24 14:33:21 +00:00
tokslaw	0229091c81	Merge branch 'myfit-about-us-fix' of MyFit/www-myfit into master	2023-01-24 14:19:01 +00:00
$DESKTOP-QHP1O2H\MIKE$ DESKTOP-QHP1O2H\MIKE	ef292121b8	added new information	2023-01-24 05:00:26 -05:00
$VICTOR\anumu$ VICTOR\anumu	7098e8a2fe	fixed contact message to return message and country to return country code	2023-01-24 09:43:08 +01:00
tokslaw	cf6a83423e	Merge branch 'home_blog_link' of MyFit/www-myfit into master	2023-01-24 08:10:06 +00:00
tokslaw	63ea81ec40	Merge branch 'task-37-fix-how-it-works-pages-footer' of MyFit/www-myfit into master	2023-01-24 02:05:58 +00:00
tokslaw	79cd247c16	Merge branch 'myfit_contact_page_name_issue' of MyFit/www-myfit into master	2023-01-24 02:05:46 +00:00
$VICTOR\anumu$ VICTOR\anumu	84eacb05d7	Made the contact page input name to accept both first and last name	2023-01-23 20:32:14 +01:00
$DESKTOP-QHP1O2H\MIKE$ DESKTOP-QHP1O2H\MIKE	88d106f3a4	Merge branch 'master' of https://gitlab.chiefsoft.net/MyFit/www-myfit into home_blog_link	2023-01-23 13:10:34 -05:00
$DESKTOP-QHP1O2H\MIKE$ DESKTOP-QHP1O2H\MIKE	0a93f6fc8a	fixed blog link on home main	2023-01-23 13:07:52 -05:00
$DESKTOP-QHP1O2H\MIKE$ DESKTOP-QHP1O2H\MIKE	4463a98b63	first commit	2023-01-23 11:31:46 -05:00
ChineseChikki	fa2a9fd116	Final commit on broken how-it-works-page	2023-01-23 17:04:31 +01:00
tokslaw	623dc8164b	error message	2023-01-23 09:15:21 -05:00
tokslaw	8f07d4380f	Merge branch 'task-37-fixed-broken-Nav-Bar' of MyFit/www-myfit into master	2023-01-23 12:23:12 +00:00
tokslaw	d3d4f3f8f8	Merge branch 'master' of https://gitlab.chiefsoft.net/MyFit/www-myfit	2023-01-23 07:15:48 -05:00
tokslaw	92a802750d	Merge branch 'myfit_implement_blogdata-api' of MyFit/www-myfit into master	2023-01-23 12:11:00 +00:00
ChineseChikki	8d47da611d	Fixed broken nav-Bar of missing header	2023-01-21 09:04:49 +01:00
$DESKTOP-QHP1O2H\MIKE$ DESKTOP-QHP1O2H\MIKE	ec475103b8	Merge branch 'master' of https://gitlab.chiefsoft.net/MyFit/www-myfit into myfit_implement_blogdata-api	2023-01-20 18:07:35 -05:00
$DESKTOP-QHP1O2H\MIKE$ DESKTOP-QHP1O2H\MIKE	5dde6e6e91	fixed latest story on homepage	2023-01-20 18:07:01 -05:00
tokslaw	0e7862df7f	faq_header_text	2023-01-20 18:01:38 -05:00
tokslaw	3c1d1f4324	Merge branch 'myfit_update_pricing_page_broken_link' of MyFit/www-myfit into master	2023-01-20 21:52:59 +00:00
victor.ebuka	d579941a8c	Merge branch 'myfit_pricing_page_broken_link' of MyFit/www-myfit into master	2023-01-20 21:30:25 +00:00
tokslaw	4efb4bf2f8	Merge branch 'myfit_get_started_link_fixed' of MyFit/www-myfit into master	2023-01-20 21:00:30 +00:00
$VICTOR\anumu$ VICTOR\anumu	fe311f8610	Updated pricing_page_broken link	2023-01-20 21:44:58 +01:00
$VICTOR\anumu$ VICTOR\anumu	bcdcdc7b54	fixed pricing page broken link	2023-01-20 21:25:13 +01:00
tokslaw	0dd929c513	Merge branch 'myFit--BlogDetails' of MyFit/www-myfit into master	2023-01-20 19:05:55 +00:00
tokslaw	296ed23ec9	Merge branch 'myfit_apple_google_links' of MyFit/www-myfit into master	2023-01-20 19:04:17 +00:00
$VICTOR\anumu$ VICTOR\anumu	6866d405c9	fixed 'Get Started' broken link on nav bar	2023-01-20 19:39:53 +01:00
Chukwumdiebube	c497556866	removed links	2023-01-20 19:22:22 +01:00
$DESKTOP-QHP1O2H\MIKE$ DESKTOP-QHP1O2H\MIKE	c3c9c9d70f	linked google play store link to .env file	2023-01-20 13:06:59 -05:00
Chukwumdiebube	3ea82b41cf	remove console logs and added loader	2023-01-20 18:29:47 +01:00
Chukwumdiebube	11ef4d7442	added link	2023-01-20 17:35:38 +01:00
Chukwumdiebube	e68246c86c	removing the unnecessary console logs	2023-01-20 17:31:06 +01:00
Chukwumdiebube	fda5297756	fixed a stubborn span	2023-01-20 17:26:37 +01:00
Chukwumdiebube	e866662f4d	addition to this	2023-01-20 16:51:53 +01:00
Chukwumdiebube	b5f78d1372	Merge branch 'master' of https://gitlab.chiefsoft.net/MyFit/www-myfit into myFit--BlogDetails	2023-01-20 16:50:57 +01:00
Chukwumdiebube	362324925b	Worked on the blog single page	2023-01-20 16:17:13 +01:00
tokslaw	0a22ac7ade	Merge branch 'task-29-review-env-variable' of MyFit/www-myfit into master	2023-01-20 14:19:45 +00:00
tokslaw	18b18aba96	Merge branch 'task-34-FAQ-broken-links' of MyFit/www-myfit into master	2023-01-20 14:12:07 +00:00
ChineseChikki	099c0ce0a4	FAQ broken link fixed	2023-01-20 15:02:02 +01:00