blog data

.env

@@ -1,7 +1,7 @@
 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"
 
@@ -15,7 +15,7 @@ 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_AUX_ENDPOINT="https://devapi.mermsemr.com/en/desktop/api/v2/myfit"
+REACT_APP_FORM_TIMEOUT=10000
+REACT_APP_MAX_MESSAGE_LENGHT=300
 REACT_APP_BLOGSITE="https://blog.mermsemr.com/"

.env.development

@@ -0,0 +1,21 @@
+REACT_APP_US_ADDRESS="USA: 32 Oatgrass Dr, Grayson GA 30017"
+REACT_APP_US_PHONE="(415) 251 7583"
+REACT_APP_SUPPORT_EMAIL="support@myfit.ai"
+REACT_APP_YEAR=2025
+REACT_APP_ANDROID_URL="https://play.google.com/store/apps/details?id=com.mermsemr.myfit"
+REACT_APP_IOS_URL="https://play.google.com/store/apps/details?id=com.mermsemr.myfit"
+
+
+REACT_APP_APPSITE="https://dev142.users.myfit.mermsemr.com/login"
+# " https://mermsemr.com"
+#REACT_APP_APPSITE="http://localhost:7012"
+
+# Social Media Links
+REACT_APP_FACEBOOK="https://www.facebook.com/profile.php?id=100066498622246"
+REACT_APP_TWITTER="https://twitter.com/fluxtra"
+
+
+REACT_APP_AUX_ENDPOINT="https://devapi.mermsemr.com/en/desktop/api/v2/myfit"
+REACT_APP_FORM_TIMEOUT=10000
+REACT_APP_MAX_MESSAGE_LENGHT=300
+REACT_APP_BLOGSITE="https://blog.mermsemr.com/"

.env.production

@@ -0,0 +1,21 @@
+REACT_APP_US_ADDRESS="USA: 32 Oatgrass Dr, Grayson GA 30017"
+REACT_APP_US_PHONE="(415) 251 7583"
+REACT_APP_SUPPORT_EMAIL="support@myfit.ai"
+REACT_APP_YEAR=2025
+REACT_APP_ANDROID_URL="https://play.google.com/store/apps/details?id=com.mermsemr.myfit"
+REACT_APP_IOS_URL="https://play.google.com/store/apps/details?id=com.mermsemr.myfit"
+
+
+REACT_APP_APPSITE="https://users.myfit.ai/login"
+# " https://mermsemr.com"
+#REACT_APP_APPSITE="http://localhost:7012"
+
+# Social Media Links
+REACT_APP_FACEBOOK="https://www.facebook.com/profile.php?id=100066498622246"
+REACT_APP_TWITTER="https://twitter.com/fluxtra"
+
+
+REACT_APP_AUX_ENDPOINT="https://devapi.mermsemr.com/en/desktop/api/v2/myfit"
+REACT_APP_FORM_TIMEOUT=10000
+REACT_APP_MAX_MESSAGE_LENGHT=300
+REACT_APP_BLOGSITE="https://blog.mermsemr.com/"

.gitignore

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

Dockerfile

@@ -1,6 +1,9 @@
 # pull the base image
 FROM node:alpine
 
+# Build args
+ARG NODE_ENV
+
 # set the working direction
 #WORKDIR /app
 WORKDIR /usr/src/app
@@ -8,16 +11,26 @@ WORKDIR /usr/src/app
 # add `/app/node_modules/.bin` to $PATH
 # ENV PATH /app/node_modules/.bin:$PATH
 ENV PATH /usr/src/app/node_modules/.bin:$PATH
+ENV NODE_ENV=$NODE_ENV
+
+# install nginx
+RUN apk update
+RUN apk add nginx
 
 # install app dependencies
 COPY package.json ./
 
 COPY package-lock.json ./
 
+COPY nginx.conf ./
+
+COPY run.sh ./
+
 RUN npm install
 
 # add app
 COPY . ./
 
 # start app
-CMD ["npm", "start"]
+CMD /bin/sh ./run.sh
+

docker-compose.yml

@@ -1,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:

nginx.conf

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

package.json

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

public/assets/css/style.css

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

run.sh

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

src/assets/css/style.css

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

src/component/AboutUs/Main.js

@@ -16,8 +16,9 @@ const Main = ({brdcum}) => {
     const [ytShow , setytShow] = useState (false)
 
     // About us text variables
-    let innovativeDesc = 'The team at myFit by Fluxtra LLC works with you to achieve your health objectives without getting in your way. Do your health your way to get the best result for you and your family. We are you, always ready and always engaged with the users to help get the best out of our solution.'
-    'We work with you to achieve your health and fitness goals by providing solutions that fit your goals.'
+    let 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.",
@@ -251,4 +252,4 @@ const Main = ({brdcum}) => {
   )
 }
 
-export default Main
+export default Main

src/component/Footer/Main.js

@@ -1,5 +1,5 @@
 import { Link } from "react-router-dom";
-import { HashLink } from 'react-router-hash-link';
+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";
@@ -14,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">
@@ -52,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">
@@ -67,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>
@@ -81,13 +67,12 @@ const Main = ({ footer }) => {
                       <li>
                         {/* <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>
@@ -191,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>
@@ -314,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">
@@ -329,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>
@@ -370,7 +371,7 @@ const Main = ({ footer }) => {
                         <Link to="#">Support</Link>
                       </li>
                       <li>
-                         <HashLink to="/#how_it_work">How it works</HashLink>
+                        <HashLink to="/#how_it_work">How it works</HashLink>
                       </li>
                       <li>
                         <Link to="/terms">Terms & conditions</Link>
@@ -386,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>
@@ -439,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">
@@ -454,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>
@@ -495,7 +504,7 @@ const Main = ({ footer }) => {
                         <Link to="#">Support</Link>
                       </li>
                       <li>
-                          <HashLink to="/#how_it_work">How it works</HashLink>
+                        <HashLink to="/#how_it_work">How it works</HashLink>
                       </li>
                       <li>
                         <Link to="/terms">Terms & conditions</Link>
@@ -572,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">
@@ -587,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>
@@ -627,7 +644,7 @@ const Main = ({ footer }) => {
                         <Link to="#">Support</Link>
                       </li>
                       <li>
-                         <HashLink to="/#how_it_work">How it works</HashLink>
+                        <HashLink to="/#how_it_work">How it works</HashLink>
                       </li>
                       <li>
                         <Link to="/terms">Terms & conditions</Link>
@@ -642,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>

src/component/Home/Main.js

@@ -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
@@ -103,37 +84,19 @@ const Main = ({ setfooter, setnavbar, setbrdcum }) => {
                 </p>
               </div>
               <ul className="app_btn">
-                  <li>
-                      <a href={process.env.REACT_APP_ANDROID_URL}>
-                        <img src={blueapp} alt="image" />
-                        <img className="white_img" src={whiteapp} alt="image" />
-                      </a>
-                  </li>
-                  <li>
-                      <a href={process.env.REACT_APP_IOS_URL}>
-                        <img src={blue} alt="image" />
-                        <img className="white_img" src={white} alt="image" />
-                      </a>
-                  </li>
-              </ul>
-
-
-              {/* <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> */}
-
-
+              </ul>
             </div>
             <div
               className="col-lg-6 col-md-12"
@@ -154,17 +117,17 @@ const Main = ({ setfooter, setnavbar, setbrdcum }) => {
                 >
                   <div className="item">
                     <div className="slider_img">
-                      <img src={screen} alt="image" />
+                      <img src={firstSlide} alt="image" />
                     </div>
                   </div>
                   <div className="item">
                     <div className="slider_img">
-                      <img src={screen} alt="image" />
+                      <img src={secondSlide} alt="image" />
                     </div>
                   </div>
                   <div className="item">
                     <div className="slider_img">
-                      <img src={screen} alt="image" />
+                      <img src={thirdSlide} alt="image" />
                     </div>
                   </div>
                 </OwlCarousel>

src/component/HomeMain/Download/Main.js

@@ -1,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;

src/component/HomeMain/Faq/Main.js

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

src/component/HomeMain/Features/Main.js

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

src/component/HomeMain/Interface/Main.js

@@ -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;

src/component/HomeMain/Story/Main.js

@@ -33,7 +33,7 @@ const Main = () => {
                 </div>
                 <div className="row">
                   
-                {blogData.slice(1, 4).map((data, index) => (
+                { (blogData !== undefined) && (blogData?.length > 0) && blogData.slice(1, 4).map((data, index) => (
               <div
                 className="col-md-4"
                 key={index}>

src/component/Pages/Review/Main.js

@@ -6,6 +6,8 @@ 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}) => {
 
@@ -362,4 +364,4 @@ const Main = ({brdcum}) => {
   )
 }
 
-export default Main
+export default Main

src/routes/index.js

@@ -17,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} />}
@@ -65,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} />} />
@@ -88,7 +93,6 @@ const Routing = () => {
         <Route path="/blogdetails/:id" element={<BlogSingle brdcum={brdcum} />} />
         <Route path="/terms" element={<Terms brdcum={brdcum} />} />
         <Route path="/privacy" element={<Privacy brdcum={brdcum} />} />
-
       </Routes>
       {footerpage && <Footer footer={footer} />}
     </>

src/vendors/service/siteService.js

@@ -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}
@@ -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) => {