Blog_API Change

.env

@@ -1,13 +1,12 @@
 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_SUPPORT_EMAIL="support@mermsemr.com"
-REACT_APP_YEAR=2025
+REACT_APP_YEAR=2023
 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"
+REACT_APP_APPSITE=" https://myfitapp.mermsemr.com"
-# " https://mermsemr.com"
 #REACT_APP_APPSITE="http://localhost:7012"
 
 # Social Media Links
@@ -15,7 +14,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_AUX_ENDPOINT = "https://devapi.mermsemr.com/en/desktop/api/v2/myfit"
-REACT_APP_FORM_TIMEOUT=10000
+REACT_APP_FORM_TIMEOUT = 10000
-REACT_APP_MAX_MESSAGE_LENGHT=300
+REACT_APP_MAX_MESSAGE_LENGHT =300
 REACT_APP_BLOGSITE="https://blog.mermsemr.com/"

.env.development

@@ -1,21 +0,0 @@
-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

@@ -1,21 +0,0 @@
-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,2 +1 @@
 node_modules/*
-build/*

Dockerfile

@@ -1,9 +1,6 @@
 # pull the base image
 FROM node:alpine
 
-# Build args
-ARG NODE_ENV
-
 # set the working direction
 #WORKDIR /app
 WORKDIR /usr/src/app
@@ -11,26 +8,16 @@ 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 /bin/sh ./run.sh
+CMD ["npm", "start"]
-

docker-compose.yml

@@ -1,12 +1,9 @@
 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
@@ -22,7 +19,6 @@ services:
       - apigateway.wrenchboard.app.lotus.fluxtra.net:172.31.4.19
     environment:
       - CHOKIDAR_USEPOLLING=true
-      - NODE_ENV=${NODE_ENV:-production}
 volumes:
   src:
   public:

nginx.conf

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

package-lock.json

@@ -12,7 +12,6 @@
         "@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",
@@ -4999,14 +4998,6 @@
         "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",
@@ -20679,14 +20670,6 @@
       "resolved": "https://registry.npmjs.org/axe-core/-/axe-core-4.5.2.tgz",
       "integrity": "sha512-u2MVsXfew5HBvjsczCv+xlwdNnB1oQR9HlAcsejZttNjKKSkeDNVwB1vMThIUIFI9GoT57Vtk8iQLwqOfAkboA=="
     },
-    "axios": {
-      "version": "0.24.0",
-      "resolved": "https://registry.npmjs.org/axios/-/axios-0.24.0.tgz",
-      "integrity": "sha512-Q6cWsys88HoPgAaFAVUb0WpPk0O8iTeisR9IMqy9G8AbO4NlpVknrnQS03zzF9PGAWgO3cgletO3VjV/P7VztA==",
-      "requires": {
-        "follow-redirects": "^1.14.4"
-      }
-    },
     "axobject-query": {
       "version": "2.2.0",
       "resolved": "https://registry.npmjs.org/axobject-query/-/axobject-query-2.2.0.tgz",

package.json

@@ -18,8 +18,8 @@
     "axios": "^0.24.0"
   },
   "scripts": {
-    "start": "react-scripts start -e .env.development",
+    "start": "react-scripts start -e .env",
-    "build": "react-scripts build -e .env.production",
+    "build": "react-scripts build -e .env",
     "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

@@ -1,15 +0,0 @@
-#!/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

@@ -1181,10 +1181,6 @@ 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 {
@@ -1758,7 +1754,7 @@ iframe#youtubevideo {
   padding: 20px 100px;
   padding-bottom: 50px;
   position: relative;
-  /* z-index: 999999; */
+  z-index: 999999;
 }
 
 /* download app dark background */
@@ -2697,11 +2693,7 @@ header.fix_style.white_header {
 }
 
 .app_solution_section .app_images ul li img {
-  max-width: 98%;
+  max-width: 100%;
-  padding: 1%;
-  border-radius: 15px;
-  box-shadow: 0px 0px 30px #c1dec9;
-  filter: grayscale(40%);
 }
 
 .app_solution_section .app_images li:first-child {
@@ -2776,17 +2768,6 @@ 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---------- */
 
@@ -3620,11 +3601,11 @@ header.fix_style.white_header {
   display: flex;
   flex-direction: column;
   align-content: center;
-  justify-items: center;
+  justify-content: center;
   gap: 10px;
 }
 
-/* .contact_body {
+.contact_body {
   display: flex;
   flex-direction: column;
   align-content: center;
@@ -3633,25 +3614,24 @@ header.fix_style.white_header {
   font-size: 20px;
   font-weight: 800;
   text-align: center;
-} */
+}
 
 /* Animations */
-.animate-image {
+.animate.pop {
   animation-name: animate-pop;
-  animation-timing-function: linear;
+  animation-timing-function: cubic-bezier(0.26, 0.53, 0.74, 1.48);
-  animation-duration: 1s;
+  animation-duration: 0.5s;
-  animation-fill-mode: forwards;
 }
 
 @keyframes animate-pop {
   0% {
     opacity: 0;
-    transform: scale(0.5);
+    transform: scale(0.5, 0.5);
   }
 
   100% {
     opacity: 1;
-    transform: scale(1);
+    transform: scale(1, 1);
   }
 }
 

src/component/AboutUs/Main.js

@@ -6,31 +6,19 @@ import BGImg from "../../assets/images/bread_crumb_bg.png"
 import BGImg1 from "../../assets/images/bread_crumb_bg_one.png"
 import BGImg2 from "../../assets/images/bread_crumb_bg_two.png"
 
-import About1 from '../../assets/images/about_one.png'
-import About2 from '../../assets/images/about_two.png'
-import About3 from '../../assets/images/about_three.png'
-
-import AboutMainImg from '../../assets/images/about_main_image.png'
-
 const Main = ({brdcum}) => {
     const [ytShow , setytShow] = useState (false)
 
     // About us text variables
-    let innovativeDesc = `The team at myFit by Fluxtra LLC works with you to achieve your health objectives without getting in your way. Do your health your way to get the best result for you and your family. We are you, always ready and always engaged with the users to help get the best out of our solution. 
+    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.`
+    '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 (
     <>       
@@ -91,12 +79,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={About1} alt="health monitor gadget" /></li>
+                            <li><img src="assets/images/abt_01.png" alt="" /></li>
                             <li>
                             <a data-url="#" onClick = {() => setytShow(true)}  className="popup-youtube play-button"
                                 data-toggle="modal"
                                 data-target="#myModal" title="About Video">
-                                <img src={About2} alt="" />
+                                <img src="assets/images/abt_02.png" alt="" />
                                 <div className="waves-block">
                                 <div className="waves wave-1"></div>
                                 <div className="waves wave-2"></div>
@@ -105,8 +93,7 @@ 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>
@@ -128,7 +115,9 @@ const Main = ({brdcum}) => {
                         </div> */}
                         <div className="text">
                         <h3>{whyWeAreDiff.title1}</h3>
-                        <p> {whyWeAreDiff.secureDesc}</p>
+                        <p>Lorem Ipsum is simply dummy text of the printing and type
+                            setting indus ideas.
+                        </p>
                         </div>
                     </div>
                     </div>
@@ -139,7 +128,7 @@ const Main = ({brdcum}) => {
                         </div> */}
                         <div className="text">
                         <h3>{whyWeAreDiff.title2}</h3>
-                         <p>{whyWeAreDiff.richFeaturesDesc}</p>
+                        <p>Simply dummy text of the printing and typesetting indus lorem Ipsum is dummy.</p>
                         </div>
                     </div>
                     </div>
@@ -150,7 +139,9 @@ const Main = ({brdcum}) => {
                         </div> */}
                         <div className="text">
                         <h3>{whyWeAreDiff.title3}</h3>
-                         <p>{whyWeAreDiff.easeOfUseDesc}</p>
+                        <p>Lorem Ipsum is simply dummy text of the printing and type
+                            setting indus ideas.
+                        </p>
                         </div>
                     </div>
                     </div>
@@ -161,7 +152,7 @@ const Main = ({brdcum}) => {
                         </div> */}
                         <div className="text">
                         <h3>{whyWeAreDiff.title4}</h3>
-                        <p>{whyWeAreDiff.supportDesc}</p>
+                        <p>Simply dummy text of the printing and typesetting indus lorem Ipsum is dummy.</p>
                         </div>
                     </div>
                     </div>
@@ -174,7 +165,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={AboutMainImg} alt="image"/>
+                            <img src="assets/images/about_main.png" alt="image"/>
                         </div>
                     </div>
                     <div className="col-lg-6">
@@ -182,45 +173,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>
-                            <p>{innovativeDesc}</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>
                         </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 className="text">
-                                <h3>Manage</h3>
-                                <p>health plan</p>
                             </div>
-                            
+                            <div className="text">
+                                <p><span className="counter-value" data-count="17">0</span><span>M+</span></p>
+                                <p>Download</p>
+                            </div>
                             </li>
                             <li>
-                            {/* <div className="icon">
+                            <div className="icon">
                                 <img src="assets/images/followers.png" alt="image" />
-                            </div> */}
+                            </div>
                             <div className="text">
-                                <h3>Health Record</h3>
+                                <p><span className="counter-value" data-count="08">0 </span><span>M+</span></p>
-                                <p>with you</p>
+                                <p>Followers</p>
                             </div>
                             </li>
                             <li>
-                            {/* <div className="icon">
+                            <div className="icon">
                                 <img src="assets/images/reviews.png" alt="image" />
-                            </div> */}
+                            </div>
                             <div className="text">
-                                <h3>Health</h3>
+                                <p><span className="counter-value" data-count="2300">1500</span><span>+</span></p>
-                                <p>reminders</p>
+                                <p>Reviews</p>
                             </div>
                             </li>
                             <li>
-                            {/* <div className="icon">
+                            <div className="icon">
                                 <img src="assets/images/countries.png" alt="image" />
-                            </div> */}
+                            </div>
                             <div className="text">
-                                <h3>Quick</h3>
+                                <p><span className="counter-value" data-count="150">0</span><span>+</span></p>
-                                <p>Schedule</p>
+                                <p>Countries</p>
                             </div>
                             </li>
                         </ul>
@@ -238,8 +229,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 questions about ?</h2>
+                        <h2>Have any query about ?</h2>
-                        <p>{queryDesc}</p>
+                        <p>Lorem Ipsum is simply dummy text of the printing and typese tting <br/> indus orem Ipsum has beenthe standard dummy.</p>
                     </div>
                     <Link to="/contact" className="btn white_btn">CONTACT US NOW</Link>
                 </div>

src/component/Blog/Blog/Main.js

@@ -1,45 +1,74 @@
+/** @format */
+
 import React, { useEffect, useState } from "react";
 import { Link } from "react-router-dom";
 import BGImg from "../../../assets/images/bread_crumb_bg.png";
 import SiteService from "../../../vendors/service/siteService";
+
 const Main = ({ brdcum, bgimg }) => {
   const [blogData, setBlogData] = useState([]);
-  console.log(blogData);
 
-  const api = new SiteService();
+  let api = new SiteService();
   useEffect(() => {
-    if(blogData.length===0){getBlogData()};
+    getBlogData();
-  }, [blogData]);
+  }, []);
 
   const getBlogData = async () => {
-    try {
+    /* 
-      const res = await api.blogData();
+        The reason for this, is because of the breaking I had when building the blog
+        I decided to save to the local storage for an hour so that it won't need to be going to the server again but I can change this
+    */
+    // Saving it locally to avoid interfering with server
+    if (localStorage.getItem("myFit--blogData") == null) {
+      try {
+        let res = await api.blogData();
 
-      setBlogData(res.data);
+        // Set the blog data to local storage
-
+        localStorage.setItem("myFit--blogData", JSON.stringify(res.data));
-      // console.log(res.data);
+        setBlogData(res.data);
-
+        // Set a time out for the blog data to be deleted from local storage
-      
+        setTimeout(() => {
-    } catch (error) {
+          localStorage.removeItem("myFit--blogData");
-      console.log("Error from blog data ", error);
+        }, 3600000);
+      } catch (error) {
+        console.log("Error from blog data ", error);
+      }
+    } else {
+      try {
+        let data = JSON.parse(localStorage.getItem("myFit--blogData"));
+        setBlogData(data);
+      } catch (error) {
+        console.error("Error parsing JSON data: ", error);
+      }
     }
   };
 
   return (
     <>
-      <div className="bred_crumb" style={{ backgroundImage: `url(${BGImg})` }}>
+      <div
+        className="bred_crumb"
+        style={{ backgroundImage: `url(${BGImg})` }}>
         <div className="container">
           <span className="banner_shape1">
             {" "}
-            <img src="assets/images/banner-shape1.png" alt="image" />{" "}
+            <img
+              src="assets/images/banner-shape1.png"
+              alt="image"
+            />{" "}
           </span>
           <span className="banner_shape2">
             {" "}
-            <img src="assets/images/banner-shape2.png" alt="image" />{" "}
+            <img
+              src="assets/images/banner-shape2.png"
+              alt="image"
+            />{" "}
           </span>
           <span className="banner_shape3">
             {" "}
-            <img src="assets/images/banner-shape3.png" alt="image" />{" "}
+            <img
+              src="assets/images/banner-shape3.png"
+              alt="image"
+            />{" "}
           </span>
 
           <div className="bred_text">
@@ -52,97 +81,122 @@ const Main = ({ brdcum, bgimg }) => {
                 <span>»</span>
               </li>
               <li>
-                <Link to="/blog">Blog</Link>
+                <Link to="/blog">
+                  {blogData.map((item, idx) => {
+                    if (idx === 0) {
+                      return <span>{item.post_title}</span>;
+                    }
+                  })}
+                </Link>
               </li>
             </ul>
-            {/* <div className="search_bar">
-                    <form action="">
-                        <div className="form-group">
-                            <input type="text" placeholder="Search here" className="form-control"/>
-                            <button className="btn" type="submit"><i className="icofont-search-1"></i></button>
-                        </div>
-                    </form>
-        </div>*/}
           </div>
         </div>
       </div>
 
       <section className="row_am blog_list_main">
-        {blogData.map((data,index) => {
+        {blogData.length < 1 && (
-          if (index === 0){
+          <div
+            className="loader loader-sm"
+            id="loader-1"></div>
+        )}
+        {blogData.map((data, index) => {
+          if (index == 0) {
             return (
-              <div className="container">
+              <div
-              <div className="row">
+                className="container"
-                <div
+                key={data.id}>
-                  className="col-lg-6"
+                <div className="row">
-                  // data-aos="fade-in"
+                  <div
-                  // data-aos-duration="1500"
+                    className="col-lg-6"
-                >
+                    data-aos="fade-in"
-                  <div className="blog_img">
+                    data-aos-duration="1500">
-                    <img 
+                    <div className="blog_img">
-                      src={data.meta_value}
+                      <img
-                      alt="image"
+                        src={data.meta_value}
-                    />
+                        alt="image"
-                    {/* <span>20 min ago</span> */}
+                      />
 
-                    <span>{new Date (data.post_date).toDateString()}</span>
+                      <span>{new Date(data.post_date).toDateString()}</span>
+                    </div>
                   </div>
-                </div>
+                  <div className="col-lg-6">
-                <div className="col-lg-6">
+                    <div className="blog_text">
-                  <div className="blog_text">
+                      <div className="section_title">
-                    <div className="section_title">
+                        <h2>{data.post_title}</h2>
-                      <h2>{data.post_title}</h2>
+                        <div
-                      <div dangerouslySetInnerHTML={{__html: data.post_content.substring(0,400)+'  . . .'}}></div>
+                          dangerouslySetInnerHTML={{
-                      {/* <Link to={`/blog-single/${data.id}`} state={{data}}>
+                            __html:
+                              data.post_content.substring(0, 400) + "  . . .",
+                          }}></div>
+                        {/* Change the route name */}
+                        <Link
+                          to={`/blogdetails/${data.id}`}
+                          state={{ data }}>
                           READ MORE
-                        </Link> */}
+                        </Link>
-                        <Link to={`/blogdetails/${data.id}`} state={{data, allData: blogData}}>
+                      </div>
-                      READ MORE
-                    </Link>
                     </div>
                   </div>
                 </div>
               </div>
-            </div>
+            );
-
-            )
           }
         })}
-       
-       
       </section>
-      <section className="row_am latest_story blog_list_story" id="blog">
+
+      <section
+        className="row_am latest_story blog_list_story"
+        id="blog">
         <div className="container">
           <div className="row">
             {blogData.map((data, index) => {
-              if (index > 0){
+              if (index > 0) {
                 return (
-                  <div key={data.id} className="col-md-4">
+                  <div
-                <div className="story_box">
+                    key={data.id}
-                  <div className="story_img">
+                    className="col-md-4">
-                    <img src={data.meta_value} alt="image" />
+                    <div
-                    <span>{new Date (data && data.post_date).toDateString()}</span>
+                      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 && data.post_date).toDateString()}
+                        </span>
+                      </div>
+                      <div className="story_text">
+                        <h3>{data.post_title}</h3>
+                        <div
+                          dangerouslySetInnerHTML={{
+                            __html:
+                              data &&
+                              data.post_content.substring(0, 100) + "  . . .",
+                          }}></div>
+                        {/* Change the route name */}
+                        <Link
+                          to={`/blogdetails/${data.id}`}
+                          state={{ data }}>
+                          READ MORE
+                        </Link>
+                      </div>
+                    </div>
                   </div>
-                  <div className="story_text">
+                );
-                    <h3>{data.post_title}</h3>
+              }
-                    <div dangerouslySetInnerHTML={{__html: data && data.post_content.substring(0,100)+'  . . .'}}></div>
+            })}
-                    <Link to={`/blogdetails/${data.id}`} state={{data, allData: blogData}}>
-                      READ MORE
-                    </Link>
-                  </div>
-                </div>
-              </div>
-
-                )}
-
-              
-              })}
           </div>
+
           <div className="pagination_block">
             <ul>
               <li>
-                <Link to={process.env.REACT_APP_BLOGSITE}
+                <Link
-                 className="prev">
+                  to={process.env.REACT_APP_BLOGSITE}
+                  className="prev">
                   {" "}
                   Visit our blog
                 </Link>

src/component/Blog/BlogSingle/Main.js

@@ -1,299 +1,181 @@
+/** @format */
+
 import React, { useEffect, useState } from "react";
-import { Link, useLocation } from 'react-router-dom'
+import { Link, useLocation } from "react-router-dom";
-import Bredcrumb from '../../Bredcrumb/Main'
+import Bredcrumb from "../../Bredcrumb/Main";
-import BGImg from "../../../assets/images/bread_crumb_bg.png"
+import BGImg from "../../../assets/images/bread_crumb_bg.png";
-import BGImg1 from "../../../assets/images/bread_crumb_bg_one.png"
+import BGImg1 from "../../../assets/images/bread_crumb_bg_one.png";
-import BGImg2 from "../../../assets/images/bread_crumb_bg_two.png"
+import BGImg2 from "../../../assets/images/bread_crumb_bg_two.png";
-import { useParams } from "react-router-dom";
 import SiteService from "../../../vendors/service/siteService";
 
+const Main = ({ brdcum }) => {
+  const location = useLocation();
+  let data = location.state?.data;
+  const [blogData, setBlogData] = useState([]);
 
-const Main = ({brdcum}) => {
+  let api_call = new SiteService();
-    const { id } = useParams();
-    const location = useLocation();
-    const [blogData, setBlogData] = useState([]);
-    const [newAllData, setNewAllData] = useState([]);
-   
-
   useEffect(() => {
     getBlogData();
-    getLatestBlog();
+  }, [blogData]);
-  }, [location.state?.data]);
-
-  const api = new SiteService();
-  const data = location.state?.data;
-  const allData = location.state?.allData;
-  
-  
-  const getLatestBlog = () =>{
-    const arrData = [ ...allData ];
-    const itemIndex = arrData.findIndex(x => x.id === data.id)
-     arrData.splice(itemIndex, 1);
-    const newAllData = arrData.splice(0, 3);
-    setNewAllData(newAllData);
-
-    console.log('All data ', arrData, newAllData);
-}
 
   const getBlogData = async () => {
-    try {
+      try {
-      const res = await api.blogData();
+        let res = await api_call.blogData();
-      setBlogData(res.data);
 
-    } catch (error) {
+        setBlogData(res.data);
-      console.log("Error from blog data ", error);
+        
-    }
+      } catch (error) {
+        console.log("Error from blog data ", error);
+      }
   };
 
   return (
     <>
-        
+      {brdcum.b1 && (
-        {brdcum.b1 && 
         <Bredcrumb
-        no={1}
+          no={1}
-        title="Blog details" 
+          title="Blog details"
-        tag="Blog single" 
+          tag={data && data.post_title}
-        bgimg={BGImg}/>}
+          bgimg={BGImg}
+        />
+      )}
 
-        {brdcum.b2 && 
+      {brdcum.b2 && (
         <Bredcrumb
-        no={2}
+          no={2}
-        title="Blog details" 
+          title="Blog details"
-        tag="Blog single" 
+          tag={data && data.post_title}
-        bgimg={BGImg1}/>}
+          bgimg={BGImg1}
+        />
+      )}
 
-        {brdcum.b5 && 
+      {brdcum.b5 && (
         <Bredcrumb
-        no={5}
+          no={5}
-        title="Blog details" 
+          title="Blog details"
-        tag="Blog single" 
+          tag={data && data.post_title}
-        bgimg={BGImg}/>}
+          bgimg={BGImg}
+        />
+      )}
 
-        {brdcum.b3 && 
+      {brdcum.b3 && (
         <Bredcrumb
-        no={3}
+          no={3}
-        title="Blog details" 
+          title="Blog details"
-        tag="Blog single" />}
+          tag={data && data.post_title}
+        />
+      )}
 
-        {brdcum.b4 && 
+      {brdcum.b4 && (
         <Bredcrumb
-        no={4}
+          no={4}
-        title="Blog details" 
+          title="Blog details"
-        tag="Blog single" 
+          tag={data && data.post_title}
-        bgimg={BGImg2}/>}
+          bgimg={BGImg2}
+        />
+      )}
 
-        <section className="blog_detail_section">
+      <section className="blog_detail_section">
-            <div className="container">
+        <div className="container">
-                <div className="blog_inner_pannel">
+          <div className="blog_inner_pannel">
-                    <div className="review">
+            <span className="blog_date">
-                        <span>Review</span>
+              {new Date(data && data.post_modified).toDateString()}
-                        {/* <span>45 min ago</span> */}
+            </span>
-                        <span>{new Date (data && data.post_modified).toDateString()}</span>
 
-                    </div>
+            <div className="section_title">
-                    <div className="section_title">
+              <h2>{data && data.post_title}</h2>
-                        <h2>{data && data.post_title}</h2>
+            </div>
-                    </div>
+            <div className="main_img">
-                    <div className="main_img">
+              <img
-                        <img src={data && data.meta_value} alt="image" />
+                src={data && data.meta_value}
-                    </div>
+                alt="image"
-                    <div className="info">
+              />
-                        <h3>{data && data.post_name}</h3>
+            </div>
-                        <div dangerouslySetInnerHTML={{__html: data && data.post_content}}></div>
+            <div className="info">
-                    </div>
+              <h3>{data && data.post_name}</h3>
-
+              <div
-                   
+                dangerouslySetInnerHTML={{
-                    <div className="blog_authore">
+                  __html: data && data.post_content,
-                        <div className="authore_info">
+                }}></div>
-                            {/* <div className="avtar">
-                                <img src="assets/images/blog_d02.png" alt="image" />
-                            </div> */}
-                            <div className="text">
-                                <h3>{data && data.post_author}</h3>
-                                <span>{new Date (data && data.post_date).toDateString()}</span>
-                            </div>
-                        </div>
-                        <div className="social_media">
-                            <ul>
-                                <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">
-                        <a href={process.env.REACT_APP_BLOGSITE}>Visit Blog Site </a>
-                    </div>
-                </div>
             </div>
-        </section>
 
-        {/* <section className="row_am comment_section">
+            <div className="blog_authore">
-            <div className="container">
+              <div className="authore_info">
-                <div className="section_title">
+                <div className="text">
-                    <h2>3 Comments</h2>
+                  {/* <h3>{data && data.post_author}</h3> */}
+                  <span>{new Date(data && data.post_date).toDateString()}</span>
                 </div>
+              </div>
+              <div className="social_media">
                 <ul>
-                    <li>
+                  <li>
-                        <div className="authore_info">
+                    <a href={process.env.REACT_APP_FACEBOOK}>
-                        <div className="avtar">
+                      <i className="icofont-facebook"></i>
-                            <img src="assets/images/blog_d01.png" alt="image" />
+                    </a>
-                        </div>
+                  </li>
-                        <div className="text">
+                  <li>
-                            <span>30 min ago</span>
+                    <a href={process.env.REACT_APP_TWITTER}>
-                            <h4>Dolly Shell</h4>
+                      <i className="icofont-twitter"></i>
-                        </div>
+                    </a>
-                        </div>
+                  </li>
-                        <div className="comment">
-                        <p>Lorem Ipsum is simply dummy text of the printing and typesetting in dustry lorem Ipsum has been the in
-                            dustrys 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. </p>
-                        </div>
-                    </li>
-                    <li className="replay_comment">
-                        <div className="authore_info">
-                        <div className="avtar">
-                            <img src="assets/images/blog_d02.png" alt="image" />
-                        </div>
-                        <div className="text">
-                            <span>15 min ago</span>
-                            <h4>Devil Joe</h4>
-                        </div>
-                        </div>
-                        <div className="comment">
-                        <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 when.</p>
-                        </div>
-                    </li>
-                    <li>
-                        <div className="authore_info">
-                        <div className="avtar">
-                            <img src="assets/images/blog_d03.png" alt="image" />
-                        </div>
-                        <div className="text">
-                            <span>2 days ago</span>
-                            <h4>Sherly Shie</h4>
-                        </div>
-                        </div>
-                        <div className="comment">
-                        <p>Lorem Ipsum is simply dummy text of the printing and typesetting in dustry lorem Ipsum has been the in
-                            dustrys 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. </p>
-                        </div>
-                    </li>
                 </ul>
+              </div>
             </div>
-        </section>
+            <div className="blog_tags">
-
+              <a href={process.env.REACT_APP_BLOGSITE}>Visit Blog Site </a>
-        <section className="row_am comment_form_section">
-            <div className="container">
-                <div className="section_title">
-                    <h2>Leave a <span>comment</span></h2>
-                    <p>Your email address will not be published. Required fields are marked *</p>
-                </div>
-                <form action="">
-                    <div className="row">
-                        <div className="col-md-6">
-                        <div className="form-group">
-                            <input type="text" className="form-control" placeholder="Name *" />
-                        </div>
-                        </div>
-                        <div className="col-md-6">
-                        <div className="form-group">
-                            <input type="email" className="form-control" placeholder="Email *" />
-                        </div>
-                        </div>
-                        <div className="col-md-6">
-                        <div className="form-group">
-                            <input type="text" className="form-control" placeholder="Phone" />
-                        </div>
-                        </div>
-                        <div className="col-md-6">
-                        <div className="form-group">
-                            <input type="text" className="form-control" placeholder="Website  " />
-                        </div>
-                        </div>
-                        <div className="col-md-12">
-                        <div className="form-group">
-                            <textarea className="form-control" placeholder="Comments"></textarea>
-                        </div>
-                        </div>
-                        <div className="col-md-12 text-center">
-                        <button className="btn puprple_btn" type="submit">POST COMMENTS</button>
-                        </div>
-                    </div>
-                </form>
             </div>
-        </section> */}
+          </div>
+        </div>
+      </section>
 
-        <section className="row_am latest_story" id="blog">
+      <section
-            <div className="container">
+        className="row_am latest_story"
-                <div className="section_title" data-aos="fade-in" data-aos-duration="1500" data-aos-delay="100">
+        id="blog">
-                    <h2>Read latest <span>story</span></h2>
+        <div className="container">
-                    <p>Lorem Ipsum is simply dummy text of the printing and typese tting <br/> indus orem Ipsum has beenthe standard dummy.</p>
+          {/* Latest Title */}
+          <div
+            className="section_title"
+            data-aos="fade-in"
+            data-aos-duration="1500"
+            data-aos-delay="100">
+            <h2>
+              Read latest <span>story</span>
+            </h2>
+            <br />
+          </div>
+          {/* Body */}
+          <div className="row">
+            {blogData.slice(-4, -1).map((item, 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={item.meta_value}
+                      alt="image"
+                    />
+                    <span>{new Date(item.post_date).toDateString()}</span>
+                  </div>
+                  <div className="story_text">
+                    <h3>{item.post_title}</h3>
+                    <div
+                      dangerouslySetInnerHTML={{
+                        __html: item.post_content.substring(0, 100) + "  . . .",
+                      }}></div>
+                    <Link to={`/blogdetails/${item.id}`}>READ MORE</Link>
+                  </div>
                 </div>
-                <div className="row">
+              </div>
-
+            ))}
-                 {newAllData.map((data) => {
+          </div>
-                    
+        </div>
-                    return (
+      </section>
-
-                     <div className="col-md-4">
-                     <div className="story_box" data-aos="fade-up" data-aos-duration="1500">
-                         <div className="story_img">
-                        <img src={data.meta_value} alt="image" />
-                         <span>45 min ago</span>
-                         </div>
-                         <div className="story_text">
-                            <h3>{data.post_title}</h3>
-                             <div dangerouslySetInnerHTML={{__html: data.post_content.substring(0,300)+'  . . .'}}></div>
-                            {/* <Link to={`/blog-single/${data.id}`} state={{data}}>
-                                 READ MORE
-                            </Link> */}
-                            <Link to={`/blogdetails/${data.id}`} state={{data, allData: blogData}}>
-                                 READ MORE
-                            </Link>
-                         </div>
-                     </div>
-                 </div>
-
-                 )})}
-
-                    {/* <div className="col-md-4">
-                        <div className="story_box" data-aos="fade-up" data-aos-duration="1500">
-                            <div className="story_img">
-                            <img src="assets/images/story02.png" alt="image" />
-                            <span>45 min ago</span>
-                            </div>
-                            <div className="story_text">
-                                <h3>Top rated app! Yupp.</h3>
-                                <p>Simply dummy text of the printing and typesetting industry lorem Ipsum has Lorem Ipsum is.</p>
-                                <Link to="#">READ MORE</Link>
-                            </div>
-                        </div>
-                    </div>
-                    <div className="col-md-4">
-                        <div className="story_box" data-aos="fade-up" data-aos-duration="1500">
-                            <div className="story_img">
-                            <img src="assets/images/story03.png" alt="image" />
-                            <span>45 min ago</span>
-                            </div>
-                            <div className="story_text">
-                                <h3>Creative ideas on app.</h3>
-                                <p>Printing and typesetting industry lorem Ipsum has Lorem simply dummy text of the.</p>
-                                <Link to="#">READ MORE</Link>
-                            </div>
-                        </div>
-                    </div> */}
-                </div>
-            </div>
-        </section>
     </>
-  )
+  );
-}
+};
 
-export default Main
+export default Main;

src/component/Bredcrumb/Main.js

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

src/component/Contact/Main.js

@@ -6,7 +6,7 @@ import Bredcrumb from "../Bredcrumb/Main";
 import BGImg from "../../assets/images/bread_crumb_bg.png";
 import BGImg1 from "../../assets/images/bread_crumb_bg_one.png";
 import BGImg2 from "../../assets/images/bread_crumb_bg_two.png";
-import SuccessImg from "../../assets/images/confirmed-letter.jpg"
+import SuccessImg from "../../assets/images/experts_01.png"
 
 import SiteService from "../../vendors/service/siteService";
 
@@ -51,11 +51,10 @@ 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: "",
@@ -65,9 +64,7 @@ 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
@@ -95,30 +92,36 @@ const Main = ({ brdcum }) => {
         setMyData(contact);
 
         // Checking for errors
-        if (contact?.data?.status < 1 || contact?.data?.message_id == ""){
+        if (contact?.data?.status < 1 || contact?.data?.message_id == "")
-          errText.textContent = "unable to send your message, please try again";
+          return (errText.textContent =
-          response.innerHTML = `<p> SEND MESSAGE </p>`;
+            "unable to send your message, please try able");
-        }else {
+        else {
           response.innerHTML = `<p> SEND MESSAGE </p>`;
 
-          setShowSuccessfulImage(true) // sets show success image to true
+          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>`;
           setTimeout(() => {
             navigate("/");
           }, 10000);
+
+          setValues((prev) => ({ ...prev, [e.target.name]: "" }));
         }
       })
-      .catch(() => {
+      .catch((error) => {
-        errText.textContent = "unable to send your message, please try again";
+        console.log(error);
-        response.innerHTML = `<p> SEND MESSAGE </p>`;
       });
   };
 
   //CALLS THE API AFTER COMPONENT LOADS
   useEffect(() => {
-    allCountry().then((data) => setCountries(Object.entries(data.data))).catch((err)=>console.log(err.message));
+    allCountry().then((data) => setCountries(Object.values(data.data)));
   }, []);
 
+  useEffect(() => {
+    myData
+  }, [myData]);
 
   return (
     <>
@@ -176,114 +179,110 @@ const Main = ({ brdcum }) => {
         id="contact">
         <div className="container">
           <div className="contact_inner">
-            <div className="contact_form" id="contact_body">
+            <div
-              {showSuccessfulImage ? (
+              className="contact_form"
-                <>
+              id="contact_body">
-                  <div><img className="img-fluid animate-image" src={SuccessImg} alt='success image' /></div>
+              <div className="section_title">
-                  <p>We have received your message and will follow up promptly.</p>
+                <h2>
-                </>
+                  <span>Leave a</span> message
-              ) : (
+                </h2>
-                <>
+                <p>Fill up form below, our team will get back soon</p>
-                <div className="section_title">
+              </div>
-                  <h2>
+
-                    <span>Leave a</span> message
+              {/* Contact Form */}
-                  </h2>
+              <form onSubmit={handleSubmit}>
-                  <p>Fill up form below, our team will get back soon</p>
+                <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>
 
-                {/* Contact Form */}
+                <FormInput
-                <form onSubmit={handleSubmit}>
+                  name="phone"
-                  <FormInput
+                  type="number"
-                    name="name"
+                  placeholder="Phone"
-                    type="text"
+                  errorMessage="It should be a valid phone number!"
-                    placeholder="Name"
+                  maxLenght={15}
-                    errorMessage="Please enter your first and last name. (e.g: Mark John)"
+                  value={values.phone}
-                    required={true}
+                  onChange={onChange}
-                    maxLenght={35}
+                  pattern="^[0-9]{15}$"
-                    value={values.name}
+                />
+
+                <div className="form-group">
+                  <textarea
+                    name="msg"
+                    className="form-control"
+                    placeholder="Your message"
+                    value={values.msg}
+                    errorMessage='words have exceeded 350 characters!'
                     onChange={onChange}
-                    pattern="^\w+( \w+)$"
+                    maxLength={300}
+                    pattern="^[A-Za-z0-9]{5, 300}$"
                   />
-
+                </div>
-                  <FormInput
+                <div className="form-group term_check">
-                    name="email"
+                  <input
-                    type="email"
+                    type="checkbox"
-                    placeholder="Email"
+                    id="term"
-                    errorMessage="It should be a valid email address!"
-                    required={true}
-                    maxLenght={35}
-                    value={values.email}
                     onChange={onChange}
+                    required
                   />
-
+                  <label htmlFor="term">
-                  <div className="form-group">
+                    I agree to the terms and conditions
-                    <select
+                  </label>
-                      className="form-control"
+                </div>
-                      name="country"
+                <div className="form-group mb-0">
-                      value={values.country}
+                  <button
-                      onChange={onChange}
+                    type="submit"
-                      required>
+                    className="btn puprple_btn contact_btn"
-                      <option value={""}>
+                    aria-label="submit form"
-                        Country
+                    id="contact_loader">
-                      </option>
+                    <p> SEND MESSAGE </p>
-                      {countries.length > 0 &&
+                  </button>
-                        countries.map((country, index) => (
+                </div>
-                          <option
+              </form>
-                            key={index}
+              {/* Error Tag */}
-                            value={country[0]}>
+              <p id="errText" />
-                            {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,9 +354,7 @@ const Main = ({ brdcum }) => {
         </div>
       </section>
       <section className="row_am map_section">
-        <div className="container">
+        <div className="container" />
-
-        </div>
       </section>
     </>
   );

src/component/Footer/Main.js

@@ -1,5 +1,4 @@
 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";
@@ -14,11 +13,33 @@ const Main = ({ footer }) => {
         <footer>
           <div className="top_footer" id="contact">
             <div className="anim_line dark_bg">
-              {[...Array(9)].map((_, index) => (
+              <span>
-                <span key={index}>
+                <img src={line} alt="anim_line" />
-                  <img src={line} alt="anim_line" />
+              </span>
-                </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>
             </div>
             <div className="container">
               <div className="row">
@@ -30,20 +51,12 @@ 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">
@@ -53,7 +66,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>
@@ -65,14 +78,13 @@ 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="https://blog.myfit.ai/">Blog</Link>
+                        <Link to="/blog">Blog</Link>
                       </li>
                       <li>
                         <Link to="/contact">Contact us</Link>
@@ -88,7 +100,7 @@ const Main = ({ footer }) => {
                         <Link to="/faq">FAQs</Link>
                       </li>
                       <li>
-                        <HashLink to="/#how_it_work">How it works</HashLink>
+                        <Link to="/how_it_work">How it works</Link>
                       </li>
                       <li>
                         <Link to="/terms">Terms & conditions</Link>
@@ -176,32 +188,24 @@ 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>
+                     <li>
-                        <a href={process.env.REACT_APP_FACEBOOK}>
+                          <a href={process.env.REACT_APP_FACEBOOK}>
-                          <i className="icofont-facebook"></i>
+                            <i className="icofont-facebook"></i>
-                        </a>
+                          </a>
                       </li>
                       <li>
-                        <a href={process.env.REACT_APP_TWITTER}>
+                          <a href ={process.env.REACT_APP_TWITTER}>
-                          <i className="icofont-twitter"></i>
+                            <i className="icofont-twitter"></i>
-                        </a>
+                          </a>
                       </li>
                     </ul>
                   </div>
@@ -233,7 +237,7 @@ const Main = ({ footer }) => {
                         <Link to="/faq">FAQs</Link>
                       </li>
                       <li>
-                        <HashLink to="/#how_it_work">How it works</HashLink>
+                       <Link to="/how_it_work">How it works</Link>
                       </li>
                       <li>
                         <Link to="/terms">Terms & conditions</Link>
@@ -307,20 +311,12 @@ 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">
@@ -330,7 +326,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>
@@ -371,7 +367,7 @@ const Main = ({ footer }) => {
                         <Link to="#">Support</Link>
                       </li>
                       <li>
-                        <HashLink to="/#how_it_work">How it works</HashLink>
+                        <Link to="/how_it_work">How it works</Link>
                       </li>
                       <li>
                         <Link to="/terms">Terms & conditions</Link>
@@ -387,7 +383,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>
@@ -440,20 +436,12 @@ 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">
@@ -463,7 +451,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>
@@ -504,7 +492,7 @@ const Main = ({ footer }) => {
                         <Link to="#">Support</Link>
                       </li>
                       <li>
-                        <HashLink to="/#how_it_work">How it works</HashLink>
+                        <Link to="/how_it_work">How it works</Link>
                       </li>
                       <li>
                         <Link to="/terms">Terms & conditions</Link>
@@ -581,20 +569,12 @@ 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">
@@ -604,7 +584,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>
@@ -644,7 +624,7 @@ const Main = ({ footer }) => {
                         <Link to="#">Support</Link>
                       </li>
                       <li>
-                        <HashLink to="/#how_it_work">How it works</HashLink>
+                        <Link to="/how_it_work">How it works</Link>
                       </li>
                       <li>
                         <Link to="/terms">Terms & conditions</Link>
@@ -659,7 +639,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,9 +16,6 @@ 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 }) => {
@@ -59,11 +56,33 @@ const Main = ({ setfooter, setnavbar, setbrdcum }) => {
       <section className="banner_section home-banner">
         <div className="container">
           <div className="anim_line">
-            {[...Array(9)].map((_, index) => (
+            <span>
-              <span key={index}>
+              <img src={anim} alt="anim_line" />
-                <img src={anim} alt="anim_line" />
+            </span>
-              </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>
           </div>
           <div className="row">
             <div
@@ -85,16 +104,16 @@ const Main = ({ setfooter, setnavbar, setbrdcum }) => {
               </div>
               <ul className="app_btn">
                 <li>
-                  <a href={process.env.REACT_APP_ANDROID_URL}>
+                  <Link to="https://play.google.com/store/apps/details?id=com.mermsemr.myfit">
-                    <img src={blueapp} alt="image" />
+                    <img className="blue_img" src={blueapp} alt="image" />
                     <img className="white_img" src={whiteapp} alt="image" />
-                  </a>
+                  </Link>
                 </li>
                 <li>
-                  <a href={process.env.REACT_APP_IOS_URL}>
+                  <Link to="https://play.google.com/store/apps/details?id=com.mermsemr.myfit">
-                    <img src={blue} alt="image" />
+                    <img className="blue_img" src={blue} alt="image" />
                     <img className="white_img" src={white} alt="image" />
-                  </a>
+                  </Link>
                 </li>
               </ul>
             </div>
@@ -117,17 +136,17 @@ const Main = ({ setfooter, setnavbar, setbrdcum }) => {
                 >
                   <div className="item">
                     <div className="slider_img">
-                      <img src={firstSlide} alt="image" />
+                      <img src={screen} alt="image" />
                     </div>
                   </div>
                   <div className="item">
                     <div className="slider_img">
-                      <img src={secondSlide} alt="image" />
+                      <img src={screen} alt="image" />
                     </div>
                   </div>
                   <div className="item">
                     <div className="slider_img">
-                      <img src={thirdSlide} alt="image" />
+                      <img src={screen} alt="image" />
                     </div>
                   </div>
                 </OwlCarousel>

src/component/HomeMain/Download/Main.js

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

src/component/HomeMain/Faq/Main.js

@@ -27,7 +27,73 @@ 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="accordionMyfitFaq">
+                    <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> */}
 
                         {/* displays loading ... while the page fetches the FAQs */}
                         {faqs.length < 1 && <h3>Loading...</h3>}
@@ -46,7 +112,7 @@ const Main = ({gredient}) => {
                                     </h2>
                                 </div>
 
-                                <div id={target} className="collapse" aria-labelledby={id} data-parent="#accordionMyfitFaq">
+                                <div id={target} className="collapse" aria-labelledby={id} data-parent="#accordionExample">
                                     <div className="card-body">
                                         <p>{faq.text}</p>
                                     </div>

src/component/HomeMain/Features/Main.js

@@ -8,7 +8,63 @@ import img5 from '../../../assets/images/features_frame.png'
 const Main = ({video}) => {
   return (
     <>
-        {<section className="row_am features_section" id="features">
+        {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">
             <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>
@@ -20,14 +76,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. </p>
+                        <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>
                     </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 or data that fits you specifically.</p>
+                        <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>
                     </div>
                     </div>
                 </div>

src/component/HomeMain/Interface/Main.js

@@ -1,92 +1,82 @@
-import OwlCarousel from "react-owl-carousel";
+import OwlCarousel from 'react-owl-carousel'
-import React from "react";
+import React from 'react'
-import img1 from "../../../assets/images/myfitstartpage.png";
+import img1 from '../../../assets/images/screen-1.png'
-import img2 from "../../../assets/images/screen-2.png";
+import img2 from '../../../assets/images/screen-2.png'
-import img3 from "../../../assets/images/myfithomepage.png";
+import img3 from '../../../assets/images/screen-3.png'
-import img4 from "../../../assets/images/screen-4.png";
+import img4 from '../../../assets/images/screen-4.png'
-import img5 from "../../../assets/images/myfitloginpage.png";
+import img5 from '../../../assets/images/screen-5.png'
 
 const Main = () => {
-  const screen_slider = {
+
-    loop: true,
+    const screen_slider = {
-    margin: 10,
+        loop:true,
-    nav: false,
+        margin:10,
-    autoplay: true,
+        nav:false,
-    smartSpeed: 1500,
+        autoplay: true,
-    center: true,
+        smartSpeed: 1500,
-    dots: true,
+        center: true,
-    responsive: {
+        dots: true, 
-      0: {
+        responsive:{
-        items: 2,
+            0:{
-      },
+                items:2
-      600: {
+            },
-        items: 3,
+            600:{
-      },
+                items:3
-      1000: {
+            },
-        items: 5,
+            1000:{
-      },
+                items:5
-    },
+            }
-  };
+        }
+    }
   return (
     <>
-      <section className="row_am interface_section">
+        <section className="row_am interface_section">
-        <div className="container-fluid">
+            <div className="container-fluid">
-          <div
+                <div className="section_title" data-aos="fade-up" data-aos-duration="1500" data-aos-delay="300">
-            className="section_title"
+                    <h2>Beautiful <span>interface</span></h2>
-            data-aos="fade-up"
+                    <p>
-            data-aos-duration="1500"
+                    myFit appends a fun yet simple process to keep you consistently<br/> motivated,engaged and moving again without any shrewdness.
-            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>
-              <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={img2} alt="image" />
-                </div>
-              </div>
-            </OwlCarousel>
-          </div>
-        </div>
-      </section>
-    </>
-  );
-};
 
-export default Main;
+                    </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>
+                        <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>
+        </section>
+    </>
+  )
+}
+
+export default Main

src/component/HomeMain/Pricing/Main.js

@@ -13,8 +13,6 @@ const Main = ({gredient , video}) => {
 
     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 = () => {
@@ -22,9 +20,7 @@ const Main = ({gredient , video}) => {
     };
 
     useEffect(() => {
-        getAllPriceData().then((data) => {
+        getAllPriceData().then((data) => setPrices(data.data));
-            setPricingtext02(data.data.pricing_text_02);
-            setPrices(data.data.pricing) });
         AOS.init();
         AOS.refresh();
     }, []);
@@ -35,13 +31,9 @@ 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>Flexible & Simple <span>pricing</span></h2>
+                    <h2>Best & simple <span>pricing</span></h2>
-                    <p className="gredient-p">
+                    <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>
-                    {/*    {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>
@@ -148,9 +140,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>Flexible & Simple <span>pricing</span></h2>
+                    <h2>Best & 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 />
+                    <p>Lorem Ipsum is simply dummy text of the printing and typese tting <br/> indus orem Ipsum has beenthe
-                        and $7.99 per month for Gold-tier.</p>
+                        standard dummy.</p>
                     </div>
                     <div className="toggle_block" data-aos="fade-up" data-aos-duration="1500">
                         <span className={`month ${tog ? 'active' : ''}`}>Monthly</span>

src/component/HomeMain/Story/Main.js

@@ -1,68 +1,20 @@
-import React, { useEffect, useState } from "react";
+import { Link } from 'react-router-dom'
-import { Link } from 'react-router-dom';
+import React from 'react'
-// import story1 from '../../../assets/images/story01.png';
+import story1 from '../../../assets/images/story01.png'
-// import story2 from '../../../assets/images/story02.png';
+import story2 from '../../../assets/images/story02.png'
-// import story3 from '../../../assets/images/story03.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" />
@@ -101,7 +53,7 @@ const Main = () => {
                                 <Link to="/blog-single">READ MORE</Link>
                             </div>
                         </div>
-                    </div> */}
+                    </div>
                 </div>
             </div>
         </section> 

src/component/HomeMain/Work/Main.js

@@ -1,15 +1,14 @@
 import React , {useState} from 'react'
 import { Link } from 'react-router-dom'
-import img from '../../../assets/images/appdownload.png'
+import img from '../../../assets/images/download_app1.png'
-// import img1 from '../../../assets/images/create_account2.png'
+import img1 from '../../../assets/images/create_account2.png'
-import img2 from '../../../assets/images/download_app1.png'
+import img2 from '../../../assets/images/enjoy_app01.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)
@@ -29,8 +28,8 @@ const Main = ({dark}) => {
                                 <div className="step_text" data-aos="fade-right" data-aos-duration="1500">
                                 <h4>Download app</h4>
                                 <div className="app_icon">
-                                    <a href={process.env.REACT_APP_ANDROID_URL}><i className="icofont-brand-android-robot"></i></a>
+                                    <Link to={process.env.REACT_APP_ANDROID_URL}><i className="icofont-brand-android-robot"></i></Link>
-                                    <a href={process.env.REACT_APP_IOS_URL}><i className="icofont-brand-apple"></i></a>
+                                    <Link to={process.env.REACT_APP_IOS_URL}><i className="icofont-brand-apple"></i></Link>
                                 </div>
                                 <p>Download App either for Mac or Android</p>
                                 </div>
@@ -51,7 +50,7 @@ const Main = ({dark}) => {
                                 <h3>02</h3>
                                 </div>
                                 <div className="step_img" data-aos="fade-right" data-aos-duration="1500">
-                                <img className="create-account-logo" src={createAccount} alt="create account logo"/>
+                                <img src={img1} alt="image" />
                                 </div>
                             </li>
                             <li>

src/component/Navbar/Main.js

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

src/component/Pages/Faq/Main.js

@@ -7,8 +7,6 @@ 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'
 
@@ -33,7 +31,7 @@ const Main = ({brdcum}) => {
         <Bredcrumb 
             no={1}
             title="Have questions? look here" 
-            paragraph="Learn more about myFit  through answers to frequently asked questions."
+            paragraph="Lorem Ipsum is simply dummy text of the printing and typesetting"
             tag="Faq" 
             bgimg={BGImg}/>}
 
@@ -41,7 +39,7 @@ const Main = ({brdcum}) => {
         <Bredcrumb 
             no={2}
             title="Have questions? look here" 
-            paragraph="Learn more about myFit  through answers to frequently asked questions."
+            paragraph="Lorem Ipsum is simply dummy text of the printing and typesetting"
             tag="Faq" 
             bgimg={BGImg1}/>}
 
@@ -49,7 +47,7 @@ const Main = ({brdcum}) => {
         <Bredcrumb 
         no={5}
         title="Have questions? look here" 
-        paragraph="Learn more about myFit  through answers to frequently asked questions."
+        paragraph="Lorem Ipsum is simply dummy text of the printing and typesetting"
         tag="Faq" 
         bgimg={BGImg}/>}
 
@@ -57,14 +55,14 @@ const Main = ({brdcum}) => {
         <Bredcrumb 
             no={3}
             title="Have questions? look here" 
-            paragraph="Learn more about myFit  through answers to frequently asked questions."
+            paragraph="Lorem Ipsum is simply dummy text of the printing and typesetting"
             tag="Faq" />}
 
         {brdcum.b4 && 
         <Bredcrumb 
             no={4}
             title="Have questions? look here" 
-            paragraph="Learn more about myFit  through answers to frequently asked questions."
+            paragraph="Lorem Ipsum is simply dummy text of the printing and typesetting"
             tag="Faq" 
             bgimg={BGImg2}/>}
 
@@ -244,13 +242,9 @@ 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>

src/component/Pages/Review/Main.js

@@ -4,10 +4,6 @@ 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}) => {
 
@@ -347,13 +343,9 @@ 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>

src/component/Pricing/Main.js

@@ -6,11 +6,6 @@ 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}) => {
@@ -22,7 +17,7 @@ const Main = ({brdcum}) => {
         <Bredcrumb 
         no={1}
         title="Our Pricing & Plans" 
-        paragraph="Flexible & Convienent Pricing Options"
+        paragraph="Lorem Ipsum is simply dummy text of the printing and typesetting"
         tag="Our Pricing & Plans" 
         bgimg={BGImg}/>}
 
@@ -30,7 +25,7 @@ const Main = ({brdcum}) => {
         <Bredcrumb 
         no={2}
         title="Our Pricing & Plans" 
-        paragraph="Flexible & Convienent Pricing Options"
+        paragraph="Lorem Ipsum is simply dummy text of the printing and typesetting"
         tag="Our Pricing & Plans" 
         bgimg={BGImg1}/>}
 
@@ -38,7 +33,7 @@ const Main = ({brdcum}) => {
         <Bredcrumb 
         no={5}
         title="Our Pricing & Plans" 
-        paragraph="Flexible & Convienent Pricing Options"
+        paragraph="Lorem Ipsum is simply dummy text of the printing and typesetting"
         tag="Our Pricing & Plans" 
         bgimg={BGImg}/>}
 
@@ -47,14 +42,14 @@ const Main = ({brdcum}) => {
         <Bredcrumb 
         no={3}
         title="Our Pricing & Plans" 
-        paragraph="Flexible & Convienent Pricing Options"
+        paragraph="Lorem Ipsum is simply dummy text of the printing and typesetting"
         tag="Our Pricing & Plans" />}
 
         {brdcum.b4 && 
         <Bredcrumb 
         no={4}
         title="Our Pricing & Plans" 
-        paragraph="Flexible & Convienent Pricing Options"
+        paragraph="Lorem Ipsum is simply dummy text of the printing and typesetting"
         tag="Our Pricing & Plans" 
         bgimg={BGImg2}/>}
 
@@ -232,9 +227,9 @@ const Main = ({brdcum}) => {
                             </div>
                         </div>
                         <div className="col-md-6">
-                        <div className="free_img">
+                            <div className="free_img">
-                                <img src={screen} alt="image" />
+                                <img src="assets/images/download-screen01.png" alt="image" />
-                                <img className="mobile_mockup" src={screen1} alt="image" />
+                                <img className="mobile_mockup" src="assets/images/download-screen02.png" alt="image" />
                             </div>
                         </div>
                     </div>

src/routes/index.js

@@ -3,6 +3,7 @@ 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";
@@ -17,51 +18,46 @@ 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(() => {
-    const navbarValue = localStorage.getItem("navbar");
+    if (localStorage.getItem("navbar") === "darkhome") {
-    if (navbarValue === "darkhome") {
+      setfooter({ f2: true });
-      setFooter({ f2: true });
+      setnavbar({ n3: true });
-      setNavbar({ n3: true });
+      setbrdcum({ b2: true });
-      setBrdcum({ b2: true });
+    } else if (localStorage.getItem("navbar") === "home") {
-    } else if (navbarValue === "home") {
+      setfooter({ f1: true });
-      setFooter({ f1: true });
+      setnavbar({ n2: true });
-      setNavbar({ n2: true });
+      setbrdcum({ b1: true });
-      setBrdcum({ b1: true });
     } else {
-      setFooter({ f1: true });
+      setfooter({ f1: true });
-      setNavbar({ n2: 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} />}
@@ -70,19 +66,19 @@ const Routing = () => {
           path="/"
           element={
             <Home
-              setfooter={setFooter}
+              setfooter={setfooter}
-              setnavbar={setNavbar}
+              setnavbar={setnavbar}
-              setbrdcum={setBrdcum}
+              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} />} />
@@ -93,6 +89,8 @@ const Routing = () => {
         <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} />}
     </>

src/vendors/service/siteService.js

@@ -7,8 +7,7 @@ class SiteService {
   }
   // Blog Data {Get}
   blogData(id) {
-    //myfit
+    return this.getAuxEnd("/blogdata", null);
-    return this.getBlogEnd("/myfit", null);
   }
 
   // Country Data {GET}
@@ -17,8 +16,8 @@ class SiteService {
   }
 
   // Contact Data{POST}
-  contactData(value) {
+  contactData() {
-    return this.postAuxEnd("/contact", value)
+    return this.postAuxEnd("/contact", null)
   }
 
   faqData() {
@@ -57,34 +56,13 @@ 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
+        // res = response;
+        console.log("~~~~~~~ Toks2 POST ~~~~~~~~");
         return response;
       })
       .catch((error) => {