Merge branch 'master' of https://gitlab.chiefsoft.net/MyFit/www-myfit into myfit_implement_blogdata-api

.env

@@ -5,15 +5,16 @@ 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://mermsemr.com"
+#REACT_APP_APPSITE="http://localhost:7012"
+
+# Social Media Links
 REACT_APP_FACEBOOK="https://www.facebook.com/profile.php?id=100066498622246"
 REACT_APP_TWITTER="https://twitter.com/fluxtra"
 
-REACT_APP_APPSITE=" https://myfitapp.mermsemr.com"
-#REACT_APP_APPSITE="http://localhost:7012"
-
 
 REACT_APP_AUX_ENDPOINT = "https://devapi.mermsemr.com/en/desktop/api/v2/myfit"
 REACT_APP_FORM_TIMEOUT = 10000
 REACT_APP_MAX_MESSAGE_LENGHT =300
 REACT_APP_BLOGSITE="https://blog.mermsemr.com/"
-

docker-compose.yml

@@ -6,7 +6,7 @@ services:
       dockerfile: Dockerfile
     restart: unless-stopped
     ports:
-      - 9057:3000
+      - 7010:3000
     stdin_open: true
     working_dir: /usr/src/app
     volumes:

src/assets/css/style.css

@@ -3008,11 +3008,17 @@ header.fix_style.white_header {
   margin-bottom: 15px;
 }
 
-.blog_detail_section .blog_inner_pannel .review span {
+.blog_detail_section .blog_inner_pannel span.blog_date {
   line-height: 1;
+  color: var(--purple);
+  display: flex;
+  font-weight: 700;
+  text-align: center;
+  justify-content: center;
+  align-items: center;
 }
 
-.blog_detail_section .blog_inner_pannel .review span:first-child {
+/* .blog_detail_section .blog_inner_pannel .review span:first-child {
   color: var(--purple);
   display: inline-block;
   font-weight: 700;
@@ -3024,7 +3030,7 @@ header.fix_style.white_header {
   margin-left: 15px;
   padding-left: 15px;
   border-left: 1px solid var(--dark-purple);
-}
+} */
 
 .blog_detail_section .blog_inner_pannel .section_title {
   margin-bottom: 40px;
@@ -3043,29 +3049,29 @@ header.fix_style.white_header {
 }
 
 .blog_detail_section .blog_inner_pannel .info h3 {
-    font-weight: 700;
-    color: var(--dark-purple);
-    margin-top: 30px;
-    font-size: 25px;
-    margin-bottom: 15px;
+  font-weight: 700;
+  color: var(--dark-purple);
+  margin-top: 30px;
+  font-size: 25px;
+  margin-bottom: 15px;
 }
 
 /* To highlight the link in the terms section */
-.blog_detail_section .blog_inner_pannel .info p span a{
-    color: var(--dark-purple);
-    text-decoration: underline;
+.blog_detail_section .blog_inner_pannel .info p span a {
+  color: var(--dark-purple);
+  text-decoration: underline;
 }
 
 /* To reduce the fonts for sub-headers */
 .blog_detail_section .blog_inner_pannel .info h4 {
-    font-weight: 700;
-    color: var(--dark-purple);
-    margin-top: 30px;
-    font-size: 20px;
-    margin-bottom: 15px;
-  }
+  font-weight: 700;
+  color: var(--dark-purple);
+  margin-top: 30px;
+  font-size: 20px;
+  margin-bottom: 15px;
+}
 
-  /* To align the text for proper readability */
+/* To align the text for proper readability */
 .blog_detail_section .blog_inner_pannel .info p {
   text-align: justify;
 }
@@ -3526,39 +3532,71 @@ header.fix_style.white_header {
 }
 
 /* Textarea scrollbar */
-.contact_page_section .contact_inner .contact_form form .form-group textarea::-webkit-scrollbar {
+.contact_page_section
+  .contact_inner
+  .contact_form
+  form
+  .form-group
+  textarea::-webkit-scrollbar {
   width: 12px;
   cursor: pointer;
 }
 
-.contact_page_section .contact_inner .contact_form form .form-group textarea::-webkit-scrollbar-track {
-  -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); 
+.contact_page_section
+  .contact_inner
+  .contact_form
+  form
+  .form-group
+  textarea::-webkit-scrollbar-track {
+  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
   border-radius: 10px;
   background-color: var(--light-bg);
 }
 
-.contact_page_section .contact_inner .contact_form form .form-group textarea::-webkit-scrollbar-thumb {
+.contact_page_section
+  .contact_inner
+  .contact_form
+  form
+  .form-group
+  textarea::-webkit-scrollbar-thumb {
   border-radius: 10px;
-  -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5); 
+  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.5);
   background-color: var(--body-text-purple);
 }
 
-.contact_page_section .contact_inner .contact_form form .form-group .contact_btn{
+.contact_page_section
+  .contact_inner
+  .contact_form
+  form
+  .form-group
+  .contact_btn {
   display: flex !important;
   align-items: center;
   justify-content: center;
 }
 
-.contact_page_section .contact_inner .contact_form form .form-group .contact_btn p{
+.contact_page_section
+  .contact_inner
+  .contact_form
+  form
+  .form-group
+  .contact_btn
+  p {
   margin: 0 !important;
 }
 
-.contact_page_section .contact_inner .contact_form form .form-group .contact_btn > span{
+.contact_page_section
+  .contact_inner
+  .contact_form
+  form
+  .form-group
+  .contact_btn
+  > span {
   width: 24px;
   height: 24px;
 }
 
-#contact_body{
+#contact_body {
   min-height: 48rem;
   display: flex;
   flex-direction: column;
@@ -3567,7 +3605,7 @@ header.fix_style.white_header {
   gap: 10px;
 }
 
-.contact_body{
+.contact_body {
   display: flex;
   flex-direction: column;
   align-content: center;
@@ -3598,28 +3636,44 @@ header.fix_style.white_header {
 }
 
 /* For the err msg */
-#errText{
+#errText {
   text-align: center;
   color: tomato;
   font-weight: 600;
 }
 
-.contact_page_section .contact_inner .contact_form form .form-group span{
+.contact_page_section .contact_inner .contact_form form .form-group span {
   font-size: 12px;
   color: tomato;
   padding: 3px;
   display: none;
 }
 
-.contact_page_section .contact_inner .contact_form form .form-group input:valid[focused="true"]{
+.contact_page_section
+  .contact_inner
+  .contact_form
+  form
+  .form-group
+  input:valid[focused="true"] {
   border: 1px solid var(--dark-purple);
 }
 
-.contact_page_section .contact_inner .contact_form form .form-group input:invalid[focused="true"]{
+.contact_page_section
+  .contact_inner
+  .contact_form
+  form
+  .form-group
+  input:invalid[focused="true"] {
   border: 1px solid tomato;
 }
 
-.contact_page_section .contact_inner .contact_form form .form-group input:invalid[focused="true"] ~ span{
+.contact_page_section
+  .contact_inner
+  .contact_form
+  form
+  .form-group
+  input:invalid[focused="true"]
+  ~ span {
   display: block;
 }
 
@@ -4689,19 +4743,20 @@ header.fix_style.white_header {
 
 /* Loader */
 
-.loader{
+.loader {
   border-radius: 100%;
   position: relative;
 }
 
-.loader-sm{
+.loader-sm {
   width: 24px;
   height: 24px;
 }
 
 /* LOADER 1 */
 
-#loader-1:before, #loader-1:after{
+#loader-1:before,
+#loader-1:after {
   content: "";
   position: absolute;
   width: 100%;
@@ -4711,24 +4766,24 @@ header.fix_style.white_header {
   border-top-color: var(--body-text-purple);
 }
 
-#loader-1:before{
+#loader-1:before {
   z-index: 100;
   animation: spin 1.5s infinite;
 }
 
-#loader-1:after{
+#loader-1:after {
   border: 3.5px solid #ccc;
 }
 
-@keyframes spin{
-  0%{
+@keyframes spin {
+  0% {
     -webkit-transform: rotate(0deg);
     -ms-transform: rotate(0deg);
     -o-transform: rotate(0deg);
     transform: rotate(0deg);
   }
 
-  100%{
+  100% {
     -webkit-transform: rotate(360deg);
     -ms-transform: rotate(360deg);
     -o-transform: rotate(360deg);

src/component/AboutUs/Main.js

@@ -9,6 +9,17 @@ import BGImg2 from "../../assets/images/bread_crumb_bg_two.png"
 const Main = ({brdcum}) => {
     const [ytShow , setytShow] = useState (false)
 
+    // About us text variables
+    let innovativeDesc = 'The team at myFit by Flxuxtra LLC works with you to achieve your health objectives without getting in your way. Do your health your way to get the best result for you and your family. We are you, always ready and always engaged with the users to help get the best out of our solution.'
+    'We work with you to achieve your health and fitness goals by providing solutions that fit your goals.'
+    let whyWeAreDiff = {
+        desc:'We work with you to achieve your health and fitness goals by providing solutions that fit your goals.',
+        title1: 'Secure',
+        title2: 'Rich Features',
+        title3: 'Ease of Use',
+        title4: 'Support'
+    }
+    
   return (
     <>       
        {brdcum.b1 && 
@@ -56,17 +67,13 @@ const Main = ({brdcum}) => {
                             life easy to grow.</h2>
                         </div>
                         <p data-aos="fade-up" data-aos-duration="1500">
-                            Lorem Ipsum is simply dummy text of the printing and type
-                            setting industry lorem Ipsum has been the industrys standard dummy text ever since the when an unknown
-                            printer took a galley of type and scrambled it to make a type specimen book. It has survived not only
-                            five centuries, but also the leap into electronic typesetting, remaining to make a type speci
-                            men book. It has survived essentially unchanged.
+                            {innovativeDesc}
                         </p>
-                        <p data-aos="fade-up" data-aos-duration="1500">
+                        {/* <p data-aos="fade-up" data-aos-duration="1500">
                             Standard dummy text ever since the when an unknown printer took a galley of type and scrambled it to
                             make a type specien book. It has survived not only five centuries, but also the leap into electronic
                             typesetting.
-                        </p>
+                        </p> */}
                         </div>
                     </div>
                     <div className="col-lg-6">
@@ -98,17 +105,16 @@ const Main = ({brdcum}) => {
                 <div className="container">
                 <div className="section_title" data-aos="fade-up" data-aos-duration="1500" data-aos-delay="100">
                     <h2><span>Why we are different</span> from others!</h2>
-                    <p>Lorem Ipsum is simply dummy text of the printing and typese tting <br/> indus orem Ipsum has beenthe standard
-                    dummy.</p>
+                    <p>{whyWeAreDiff.desc}</p>
                 </div>
                 <div className="row">
                     <div className="col-md-6 col-lg-3">
                     <div className="why_box" data-aos="fade-up" data-aos-duration="1500" data-aos-delay="100">
-                        <div className="icon">
+                        {/* <div className="icon">
                         <img src="assets/images/secure.png" alt="image"/>
-                        </div>
+                        </div> */}
                         <div className="text">
-                        <h3>Secure code</h3>
+                        <h3>{whyWeAreDiff.title1}</h3>
                         <p>Lorem Ipsum is simply dummy text of the printing and type
                             setting indus ideas.
                         </p>
@@ -117,22 +123,22 @@ const Main = ({brdcum}) => {
                     </div>
                     <div className="col-md-6 col-lg-3">
                     <div className="why_box" data-aos="fade-up" data-aos-duration="1500" data-aos-delay="200">
-                        <div className="icon">
+                        {/* <div className="icon">
                         <img src="assets/images/abt_functional.png" alt="image"/>
-                        </div>
+                        </div> */}
                         <div className="text">
-                        <h3>Fully functional</h3>
+                        <h3>{whyWeAreDiff.title2}</h3>
                         <p>Simply dummy text of the printing and typesetting indus lorem Ipsum is dummy.</p>
                         </div>
                     </div>
                     </div>
                     <div className="col-md-6 col-lg-3">
                     <div className="why_box" data-aos="fade-up" data-aos-duration="1500" data-aos-delay="300">
-                        <div className="icon">
+                        {/* <div className="icon">
                         <img src="assets/images/communication.png" alt="image"/>
-                        </div>
+                        </div> */}
                         <div className="text">
-                        <h3>Best communication</h3>
+                        <h3>{whyWeAreDiff.title3}</h3>
                         <p>Lorem Ipsum is simply dummy text of the printing and type
                             setting indus ideas.
                         </p>
@@ -141,11 +147,11 @@ const Main = ({brdcum}) => {
                     </div>
                     <div className="col-md-6 col-lg-3">
                     <div className="why_box" data-aos="fade-up" data-aos-duration="1500" data-aos-delay="400">
-                        <div className="icon">
+                        {/* <div className="icon">
                         <img src="assets/images/abt_support.png" alt="image"/>
-                        </div>
+                        </div> */}
                         <div className="text">
-                        <h3>24-7 Support</h3>
+                        <h3>{whyWeAreDiff.title4}</h3>
                         <p>Simply dummy text of the printing and typesetting indus lorem Ipsum is dummy.</p>
                         </div>
                     </div>

src/component/Blog/Blog/Main.js

@@ -1,46 +1,75 @@
+/** @format */
+
 import React, { useEffect, useState } from "react";
 import { Link } from "react-router-dom";
 import BGImg from "../../../assets/images/bread_crumb_bg.png";
-import BGImg1 from "../../../assets/images/bread_crumb_bg_one.png";
-import BGImg2 from "../../../assets/images/bread_crumb_bg_two.png";
 import SiteService from "../../../vendors/service/siteService";
+
 const Main = ({ brdcum, bgimg }) => {
   const [blogData, setBlogData] = useState([]);
 
-  const api = new SiteService();
+  let api = new SiteService();
   useEffect(() => {
     getBlogData();
   }, []);
 
   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);
-
-      console.log(res.data);
-
-      
-    } catch (error) {
-      console.log("Error from blog data ", error);
+        // Set the blog data to local storage
+        localStorage.setItem("myFit--blogData", JSON.stringify(res.data));
+        setBlogData(res.data);
+        // Set a time out for the blog data to be deleted from local storage
+        setTimeout(() => {
+          localStorage.removeItem("myFit--blogData");
+        }, 3600);
+      } 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">
@@ -53,93 +82,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) => {
-          if (index == 0){
+        {blogData.length < 1 && (
+          <div
+            className="loader loader-sm"
+            id="loader-1"></div>
+        )}
+        {blogData.map((data, index) => {
+          if (index == 0) {
             return (
-              <div className="container">
-              <div className="row">
-                <div
-                  className="col-lg-6"
-                  data-aos="fade-in"
-                  data-aos-duration="1500"
-                >
-                  <div className="blog_img">
-                    <img 
-                      src={data.meta_value}
-                      alt="image"
-                    />
-                    {/* <span>20 min ago</span> */}
-    
-                    <span>{new Date (data.post_date).toDateString()}</span>
+              <div
+                className="container"
+                key={data.id}>
+                <div className="row">
+                  <div
+                    className="col-lg-6"
+                    data-aos="fade-in"
+                    data-aos-duration="1500">
+                    <div className="blog_img">
+                      <img
+                        src={data.meta_value}
+                        alt="image"
+                      />
+
+                      <span>{new Date(data.post_date).toDateString()}</span>
+                    </div>
                   </div>
-                </div>
-                <div className="col-lg-6">
-                  <div className="blog_text">
-                    <div className="section_title">
-                      <h2>{data.post_title}</h2>
-                      <div dangerouslySetInnerHTML={{__html: data.post_content.substring(0,400)+'  . . .'}}></div>
-                      <Link to={`/blog-single/${data.id}`} state={{data}}>
+                  <div className="col-lg-6">
+                    <div className="blog_text">
+                      <div className="section_title">
+                        <h2>{data.post_title}</h2>
+                        <div
+                          dangerouslySetInnerHTML={{
+                            __html:
+                              data.post_content.substring(0, 400) + "  . . .",
+                          }}></div>
+                        {/* Change the route name */}
+                        <Link
+                          to={`/blogdetails/${data.id}`}
+                          state={{ data }}>
                           READ MORE
                         </Link>
+                      </div>
                     </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 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
+                    key={data.id}
+                    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>
+                          {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={`/blog-single/${data.id}`} state={{data}}>
-                      READ MORE
-                    </Link>
-                  </div>
-                </div>
-              </div>
-
-                )}
-
-              
-              })}
+                );
+              }
+            })}
           </div>
+
           <div className="pagination_block">
             <ul>
               <li>
-                <Link to="#" className="prev">
+                <Link
+                  to={process.env.REACT_APP_BLOGSITE}
+                  className="prev">
                   {" "}
                   Visit our blog
                 </Link>

src/component/Blog/BlogSingle/Main.js

@@ -1,288 +1,201 @@
+/** @format */
+
 import React, { useEffect, useState } from "react";
-import { Link, useLocation } from 'react-router-dom'
-import Bredcrumb from '../../Bredcrumb/Main'
-import BGImg from "../../../assets/images/bread_crumb_bg.png"
-import BGImg1 from "../../../assets/images/bread_crumb_bg_one.png"
-import BGImg2 from "../../../assets/images/bread_crumb_bg_two.png"
-import { useParams } from "react-router-dom";
+import { Link, useLocation } from "react-router-dom";
+import Bredcrumb from "../../Bredcrumb/Main";
+import BGImg from "../../../assets/images/bread_crumb_bg.png";
+import BGImg1 from "../../../assets/images/bread_crumb_bg_one.png";
+import BGImg2 from "../../../assets/images/bread_crumb_bg_two.png";
+import SiteService from "../../../vendors/service/siteService";
 
-const Main = ({brdcum}) => {
+const Main = ({ brdcum }) => {
+  const location = useLocation();
+  let data = location.state?.data;
+  const [blogData, setBlogData] = useState([]);
+
+  let api_call = new SiteService();
+  useEffect(() => {
+    getBlogData();
+  }, []);
+
+  const getBlogData = async () => {
+    /* 
+        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_call.blogData();
+
+        // Set the blog data to local storage
+        localStorage.setItem("myFit--blogData", JSON.stringify(res.data));
+        setBlogData(res.data);
+        // Set a time out for the blog data to be deleted from local storage
+        setTimeout(() => {
+          localStorage.removeItem("myFit--blogData");
+        }, 3600);
+      } 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);
+      }
+    }
+  };
 
-    const { id } = useParams();
-    const location = useLocation();
-    const data = location.state?.data;
-    
-    console.log("location", location, data);
-    
   return (
     <>
-        
-        {brdcum.b1 && 
-        <Bredcrumb 
-        no={1}
-        title="Blog details" 
-        tag="Blog single" 
-        bgimg={BGImg}/>}
+      {brdcum.b1 && (
+        <Bredcrumb
+          no={1}
+          title="Blog details"
+          tag={data && data.post_title}
+          bgimg={BGImg}
+        />
+      )}
 
-        {brdcum.b2 && 
-        <Bredcrumb 
-        no={2}
-        title="Blog details" 
-        tag="Blog single" 
-        bgimg={BGImg1}/>}
+      {brdcum.b2 && (
+        <Bredcrumb
+          no={2}
+          title="Blog details"
+          tag={data && data.post_title}
+          bgimg={BGImg1}
+        />
+      )}
 
-        {brdcum.b5 && 
-        <Bredcrumb 
-        no={5}
-        title="Blog details" 
-        tag="Blog single" 
-        bgimg={BGImg}/>}
+      {brdcum.b5 && (
+        <Bredcrumb
+          no={5}
+          title="Blog details"
+          tag={data && data.post_title}
+          bgimg={BGImg}
+        />
+      )}
 
-        {brdcum.b3 && 
-        <Bredcrumb 
-        no={3}
-        title="Blog details" 
-        tag="Blog single" />}
+      {brdcum.b3 && (
+        <Bredcrumb
+          no={3}
+          title="Blog details"
+          tag={data && data.post_title}
+        />
+      )}
 
-        {brdcum.b4 && 
-        <Bredcrumb 
-        no={4}
-        title="Blog details" 
-        tag="Blog single" 
-        bgimg={BGImg2}/>}
+      {brdcum.b4 && (
+        <Bredcrumb
+          no={4}
+          title="Blog details"
+          tag={data && data.post_title}
+          bgimg={BGImg2}
+        />
+      )}
 
-        <section className="blog_detail_section">
-            <div className="container">
-                <div className="blog_inner_pannel">
-                    <div className="review">
-                        <span>Review</span>
-                        {/* <span>45 min ago</span> */}
-                        <span>{new Date (data && data.post_modified).toDateString()}</span>
+      <section className="blog_detail_section">
+        <div className="container">
+          <div className="blog_inner_pannel">
+            <span className="blog_date">
+              {new Date(data && data.post_modified).toDateString()}
+            </span>
 
-                    </div>
-                    <div className="section_title">
-                        <h2>{data && data.post_title}</h2>
-                    </div>
-                    <div className="main_img">
-                        <img src={data && data.meta_value} alt="image" />
-                    </div>
-                    <div className="info">
-                        <h3>{data && data.post_name}</h3>
-                        <div dangerouslySetInnerHTML={{__html: data && data.post_content}}></div>
-                    </div>
-                    {/* <div className="info">
-                        <p>Lorem Ipsum is simply dummy text of the printing and typesetting in dustry lorem Ipsum has been the industrys standard dummy text ev er since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic Lorem Ipsum is simply dummy text of the printing and typesettingindustry lorem Ipsum has been the industrys standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived.</p>
-                        <p>Printing and typesetting in dustry lorem Ipsum has been the industrys standard dummy text ev er since the 1500s, when an unnown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic Lorem Ipsum is simply dummy text of the printing and typesettingindustry lorem Ipsum has been the industrys centuries, but also the leap into electronic.</p>
-                        <h3>Why we are best</h3>
-                        <p>Lorem Ipsum is simply dummy text of the printing and typesetting in dustry lorem Ipsum has been the industrys standard dummy text ev er since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic.</p>
-                        <ul>
-                            <li><p> <span className="icon"><i className="icofont-check-circled"></i></span> Lorem Ipsum is simply dummy text of the printing and typesetting in </p></li>
-                            <li><p> <span className="icon"><i className="icofont-check-circled"></i></span> Dustry lorem Ipsum has been the industrys standard dummy text ev er since the when</p></li>
-                            <li><p> <span className="icon"><i className="icofont-check-circled"></i></span> Unknown printer took a galley of type and scrambled it to make.</p></li>
-                            <li><p> <span className="icon"><i className="icofont-check-circled"></i></span> Type specimen book. It has survived not only five centuries, but also the leap into electronic.</p></li>
-                            <li><p> <span className="icon"><i className="icofont-check-circled"></i></span> Lorem Ipsum is simply dummy text of the printing.</p></li>
-                            <li><p> <span className="icon"><i className="icofont-check-circled"></i></span> Dustry lorem Ipsum has been the industrys standard dummy text ev er since.</p></li>
-                            <li><p> <span className="icon"><i className="icofont-check-circled"></i></span> Unknown printer took a galley of type and scrambled it to make.</p></li>
-                            <li><p> <span className="icon"><i className="icofont-check-circled"></i></span> Type specimen book. It has survived not only.</p></li>
-                        </ul>
-                    </div> 
-                    <div className="two_img">
-                        <div className="row">
-                            <div className="col-md-6">
-                            <img src="assets/images/blog_sub_01.png" alt="image" />
-                            </div>
-                            <div className="col-md-6">
-                            <img src="assets/images/blog_sub_02.png" alt="image" />
-                            </div>
-                        </div>
-                    </div>
-                    <div className="info">
-                        <h3>Why we are best</h3>
-                        <p>Lorem Ipsum is simply dummy text of the printing and typesetting in dustry lorem Ipsum has been the industrys standard dummy text ev er since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic Lorem Ipsum is simply dummy text of the printing and typesettingindustry lorem Ipsum has been the industrys standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived.</p>
-                    </div>
-                    <div className="quote_block">
-                        <span className="q_icon"><img src="assets/images/quote_icon.png" alt="image" /></span>
-                        <h2>Lorem Ipsum is simply dummy text of the printing and typesetting in dustry lorem Ipsum has been the industrys standard dummy.</h2>
-                        <p><span className="name">Mr. John Doe,</span> Apper Inc</p>
-                    </div> */}
-                    {/* <p>Lorem Ipsum is simply dummy text of the printing and typesetting in dustry lorem Ipsum has been the industrys standard dummy text ev er since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic industry.</p> */}
-                    <div className="blog_authore">
-                        <div className="authore_info">
-                            {/* <div className="avtar">
-                                <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><Link to="#"><i className="icofont-facebook"></i></Link></li>
-                                <li><Link to="#"><i className="icofont-twitter"></i></Link></li>
-                                <li><Link to="#"><i className="icofont-instagram"></i></Link></li>
-                                <li><Link to="#"><i className="icofont-pinterest"></i></Link></li>
-                            </ul>
-                        </div>
-                    </div>
-                    <div className="blog_tags">
-                        <ul>
-                        <li className="tags"><p>Tags:</p></li>
-                        <li><span>app,</span></li>
-                        <li><span>rating,</span></li>
-                        <li><span>development</span></li>
-                        </ul>
-                    </div>
-                </div>
+            <div className="section_title">
+              <h2>{data && data.post_title}</h2>
             </div>
-        </section>
-        <section className="row_am comment_section">
-            <div className="container">
-                <div className="section_title">
-                    <h2>3 Comments</h2>
+            <div className="main_img">
+              <img
+                src={data && data.meta_value}
+                alt="image"
+              />
+            </div>
+            <div className="info">
+              <h3>{data && data.post_name}</h3>
+              <div
+                dangerouslySetInnerHTML={{
+                  __html: data && data.post_content,
+                }}></div>
+            </div>
+
+            <div className="blog_authore">
+              <div className="authore_info">
+                <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>
-                        <div className="authore_info">
-                        <div className="avtar">
-                            <img src="assets/images/blog_d01.png" alt="image" />
-                        </div>
-                        <div className="text">
-                            <span>30 min ago</span>
-                            <h4>Dolly Shell</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>
-                    <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>
+                  <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>
-        </section>
+            <div className="blog_tags">
+              <a href={process.env.REACT_APP_BLOGSITE}>Visit Blog Site </a>
+            </div>
+          </div>
+        </div>
+      </section>
 
-        <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>
+      <section
+        className="row_am latest_story"
+        id="blog">
+        <div className="container">
+          {/* 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>
+                    <a href={`/blogdetails/${item.id}`}>READ MORE</a>
+                    {/* <Link to={`/blogdetails/${item.id}`}>READ MORE</Link> */}
+                  </div>
                 </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>
-
-        <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">
-                        <div className="story_box" data-aos="fade-up" data-aos-duration="1500">
-                            <div className="story_img">
-                            <img src="assets/images/story01.png" alt="image" />
-                            <span>45 min ago</span>
-                            </div>
-                            <div className="story_text">
-                                <h3>Cool features added!</h3>
-                                <p>Lorem Ipsum is simply dummy text of the printing and typesetting 
-                                industry lorem Ipsum has.</p>
-                                <Link to="#">READ MORE</Link>
-                            </div>
-                        </div>
-                    </div>
-                    <div className="col-md-4">
-                        <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>
+              </div>
+            ))}
+          </div>
+        </div>
+      </section>
     </>
-  )
-}
+  );
+};
 
-export default Main
+export default Main;

src/component/Contact/Main.js

@@ -78,7 +78,6 @@ const Main = ({ brdcum }) => {
   const onChange = (e) => {
     setValues((prev) => ({ ...prev, [e.target.name]: e.target.value }));
   };
-  console.log(values);
 
   // Submitting form
   const handleSubmit = async (e) => {
@@ -121,7 +120,7 @@ const Main = ({ brdcum }) => {
   }, []);
 
   useEffect(() => {
-    console.log(myData);
+    myData
   }, [myData]);
 
   return (

src/component/Footer/Main.js

@@ -61,14 +61,14 @@ const Main = ({ footer }) => {
                     </ul>
                     <ul className="social_media">
                       <li>
-                        <Link to="#">
+                        <a href={process.env.REACT_APP_FACEBOOK}>
                           <i className="icofont-facebook"></i>
-                        </Link>
+                        </a>
                       </li>
                       <li>
-                        <Link to="#">
+                        <a href ={process.env.REACT_APP_TWITTER}>
                           <i className="icofont-twitter"></i>
-                        </Link>
+                        </a>
                       </li>
                     </ul>
                   </div>
@@ -94,13 +94,13 @@ const Main = ({ footer }) => {
                 </div>
                 <div className="col-lg-3 col-md-6 col-12">
                   <div className="links">
-                    <h3>Help & Suport</h3>
+                    <h3>Help & Support</h3>
                     <ul>
                       <li>
                         <Link to="/faq">FAQs</Link>
                       </li>
                       <li>
-                        <Link to="/#how_it_work">How it works</Link>
+                        <Link to="/how_it_work">How it works</Link>
                       </li>
                       <li>
                         <Link to="/terms">Terms & conditions</Link>
@@ -116,12 +116,12 @@ const Main = ({ footer }) => {
                     <h3>Let’s Try Out</h3>
                     <ul className="app_btn">
                       <li>
-                        <a href="https://play.google.com/store/apps/details?id=com.mermsemr.myfit">
+                        <a href={process.env.REACT_APP_ANDROID_URL}>
                           <img src={blueapp} alt="image" />
                         </a>
                       </li>
                       <li>
-                        <a href="https://play.google.com/store/apps/details?id=com.mermsemr.myfit">
+                        <a href={process.env.REACT_APP_IOS_URL}>
                           <img src={blue} alt="image" />
                         </a>
                       </li>
@@ -197,15 +197,15 @@ const Main = ({ footer }) => {
                       </li>
                     </ul>
                     <ul className="social_media">
-                      <li>
-                        <Link to="#">
-                          <i className="icofont-facebook"></i>
-                        </Link>
+                     <li>
+                          <a href={process.env.REACT_APP_FACEBOOK}>
+                            <i className="icofont-facebook"></i>
+                          </a>
                       </li>
                       <li>
-                        <Link to="#">
-                          <i className="icofont-twitter"></i>
-                        </Link>
+                          <a href ={process.env.REACT_APP_TWITTER}>
+                            <i className="icofont-twitter"></i>
+                          </a>
                       </li>
                     </ul>
                   </div>
@@ -231,13 +231,13 @@ const Main = ({ footer }) => {
                 </div>
                 <div className="col-lg-3 col-md-6 col-12">
                   <div className="links">
-                    <h3>Help & Suport</h3>
+                    <h3>Help & Support</h3>
                     <ul>
                       <li>
                         <Link to="/faq">FAQs</Link>
                       </li>
                       <li>
-                        <Link to="/#how_it_work">How it works</Link>
+                       <Link to="/how_it_work">How it works</Link>
                       </li>
                       <li>
                         <Link to="/terms">Terms & conditions</Link>
@@ -253,19 +253,13 @@ const Main = ({ footer }) => {
                     <h3>Let’s Try Out</h3>
                     <ul className="app_btn">
                       <li>
-                        <a href="https://play.google.com/store/apps/details?id=com.mermsemr.myfit">
-                          <img
-                            src="assets/images/appstore_blue.png"
-                            alt="image"
-                          />
+                        <a href={process.env.REACT_APP_ANDROID_URL}>
+                          <img src={blueapp} alt="image" />
                         </a>
                       </li>
                       <li>
-                        <a href="https://play.google.com/store/apps/details?id=com.mermsemr.myfit">
-                          <img
-                            src="assets/images/googleplay_blue.png"
-                            alt="image"
-                          />
+                        <a href={process.env.REACT_APP_IOS_URL}>
+                          <img src={blue} alt="image" />
                         </a>
                       </li>
                     </ul>
@@ -327,14 +321,14 @@ const Main = ({ footer }) => {
                     </ul>
                     <ul className="social_media">
                       <li>
-                        <Link to="#">
+                        <a href={process.env.REACT_APP_FACEBOOK}>
                           <i className="icofont-facebook"></i>
-                        </Link>
+                        </a>
                       </li>
                       <li>
-                        <Link to="#">
+                        <a href ={process.env.REACT_APP_TWITTER}>
                           <i className="icofont-twitter"></i>
-                        </Link>
+                        </a>
                       </li>
                     </ul>
                   </div>
@@ -373,7 +367,7 @@ const Main = ({ footer }) => {
                         <Link to="#">Support</Link>
                       </li>
                       <li>
-                        <Link to="/work">How it works</Link>
+                        <Link to="/how_it_work">How it works</Link>
                       </li>
                       <li>
                         <Link to="/terms">Terms & conditions</Link>
@@ -389,20 +383,14 @@ const Main = ({ footer }) => {
                   <div className="try_out">
                     <h3>Let’s Try Out</h3>
                     <ul className="app_btn">
-                      <li>
-                        <a href="https://play.google.com/store/apps/details?id=com.mermsemr.myfit">
-                          <img
-                            src="assets/images/appstore_blue.png"
-                            alt="image"
-                          />
+                     <li>
+                        <a href={process.env.REACT_APP_ANDROID_URL}>
+                          <img src={blueapp} alt="image" />
                         </a>
                       </li>
                       <li>
-                        <a href to="https://play.google.com/store/apps/details?id=com.mermsemr.myfit">
-                          <img
-                            src="assets/images/googleplay_blue.png"
-                            alt="image"
-                          />
+                        <a href={process.env.REACT_APP_IOS_URL}>
+                          <img src={blue} alt="image" />
                         </a>
                       </li>
                     </ul>
@@ -458,14 +446,14 @@ const Main = ({ footer }) => {
                     </ul>
                     <ul className="social_media">
                       <li>
-                        <Link to="#">
+                        <a href={process.env.REACT_APP_FACEBOOK}>
                           <i className="icofont-facebook"></i>
-                        </Link>
+                        </a>
                       </li>
                       <li>
-                        <Link to="#">
+                        <a href ={process.env.REACT_APP_TWITTER}>
                           <i className="icofont-twitter"></i>
-                        </Link>
+                        </a>
                       </li>
                     </ul>
                   </div>
@@ -495,7 +483,7 @@ const Main = ({ footer }) => {
 
                 <div className="col-lg-3 col-md-6 col-12">
                   <div className="links">
-                    <h3>Help & Suport</h3>
+                    <h3>Help & Support</h3>
                     <ul>
                       <li>
                         <Link to="/faq">FAQs</Link>
@@ -504,7 +492,7 @@ const Main = ({ footer }) => {
                         <Link to="#">Support</Link>
                       </li>
                       <li>
-                        <Link to="/work">How it works</Link>
+                        <Link to="/how_it_work">How it works</Link>
                       </li>
                       <li>
                         <Link to="/terms">Terms & conditions</Link>
@@ -521,19 +509,13 @@ const Main = ({ footer }) => {
                     <h3>Let’s Try Out</h3>
                     <ul className="app_btn">
                       <li>
-                        <a href="https://play.google.com/store/apps/details?id=com.mermsemr.myfit">
-                          <img
-                            src="assets/images/appstore_blue.png"
-                            alt="image"
-                          />
+                        <a href={process.env.REACT_APP_ANDROID_URL}>
+                          <img src={blueapp} alt="image" />
                         </a>
                       </li>
                       <li>
-                        <a href="https://play.google.com/store/apps/details?id=com.mermsemr.myfit">
-                          <img
-                            src="assets/images/googleplay_blue.png"
-                            alt="image"
-                          />
+                        <a href={process.env.REACT_APP_IOS_URL}>
+                          <img src={blue} alt="image" />
                         </a>
                       </li>
                     </ul>
@@ -597,14 +579,14 @@ const Main = ({ footer }) => {
                     </ul>
                     <ul className="social_media">
                       <li>
-                        <Link to="#">
+                        <a href={process.env.REACT_APP_FACEBOOK}>
                           <i className="icofont-facebook"></i>
-                        </Link>
+                        </a>
                       </li>
                       <li>
-                        <Link to="#">
+                        <a href ={process.env.REACT_APP_TWITTER}>
                           <i className="icofont-twitter"></i>
-                        </Link>
+                        </a>
                       </li>
                     </ul>
                   </div>
@@ -633,7 +615,7 @@ const Main = ({ footer }) => {
                 </div>
                 <div className="col-lg-3 col-md-6 col-12">
                   <div className="links">
-                    <h3>Help & Suport</h3>
+                    <h3>Help & Support</h3>
                     <ul>
                       <li>
                         <Link to="/faq">FAQs</Link>
@@ -642,7 +624,7 @@ const Main = ({ footer }) => {
                         <Link to="#">Support</Link>
                       </li>
                       <li>
-                        <Link to="/work">How it works</Link>
+                        <Link to="/how_it_work">How it works</Link>
                       </li>
                       <li>
                         <Link to="/terms">Terms & conditions</Link>
@@ -657,20 +639,14 @@ const Main = ({ footer }) => {
                   <div className="try_out">
                     <h3>Let’s Try Out</h3>
                     <ul className="app_btn">
-                      <li>
-                        <a href="https://play.google.com/store/apps/details?id=com.mermsemr.myfit">
-                          <img
-                            src="assets/images/appstore_blue.png"
-                            alt="image"
-                          />
+                     <li>
+                        <a href={process.env.REACT_APP_ANDROID_URL}>
+                          <img src={blueapp} alt="image" />
                         </a>
                       </li>
                       <li>
-                        <a href="https://play.google.com/store/apps/details?id=com.mermsemr.myfit">
-                          <img
-                            src="assets/images/googleplay_blue.png"
-                            alt="image"
-                          />
+                        <a href={process.env.REACT_APP_IOS_URL}>
+                          <img src={blue} alt="image" />
                         </a>
                       </li>
                     </ul>

src/component/Home/Main.js

@@ -103,6 +103,22 @@ const Main = ({ setfooter, setnavbar, setbrdcum }) => {
                 </p>
               </div>
               <ul className="app_btn">
+                  <li>
+                      <a href={process.env.REACT_APP_ANDROID_URL}>
+                        <img src={blueapp} alt="image" />
+                        <img className="white_img" src={whiteapp} alt="image" />
+                      </a>
+                  </li>
+                  <li>
+                      <a href={process.env.REACT_APP_IOS_URL}>
+                        <img src={blue} alt="image" />
+                        <img className="white_img" src={white} alt="image" />
+                      </a>
+                  </li>
+              </ul>
+
+
+              {/* <ul className="app_btn">
                 <li>
                   <Link to="https://play.google.com/store/apps/details?id=com.mermsemr.myfit">
                     <img className="blue_img" src={blueapp} alt="image" />
@@ -115,7 +131,9 @@ const Main = ({ setfooter, setnavbar, setbrdcum }) => {
                     <img className="white_img" src={white} alt="image" />
                   </Link>
                 </li>
-              </ul>
+              </ul> */}
+
+
             </div>
             <div
               className="col-lg-6 col-md-12"

src/component/HomeMain/Download/Main.js

@@ -47,19 +47,18 @@ const Main = () => {
                             <div className="free_text">
                                 <div className="section_title">
                                     <h2>Let’s download free from apple and play store</h2>
-                                    <p>Instant free download from apple and play store orem Ipsum is simply dummy text of the printing.
-                                    and typese tting indus orem Ipsum has beenthe standard</p>
+                                    <p>Instant free download from apple and play store. All you need is an iPhone or Android device to enjoy all personalized metrics for personal use. Welcome to myFit App.</p>
                                 </div>
                                 <ul className="app_btn">
                                 <li>
-                                    <Link to="https://play.google.com/store/apps/details?id=com.mermsemr.myfit">
+                                    <a href={process.env.REACT_APP_ANDROID_URL}>
                                     <img src={blueapp} alt="image" />
-                                    </Link>
+                                    </a>
                                 </li>
                                 <li>
-                                    <Link to="https://play.google.com/store/apps/details?id=com.mermsemr.myfit">
+                                    <a href={process.env.REACT_APP_IOS_URL}>
                                     <img src={blue} alt="image" />
-                                    </Link>
+                                    </a>
                                 </li>
                                 </ul>
                             </div>

src/component/HomeMain/Faq/Main.js

@@ -24,8 +24,7 @@ const Main = ({gredient}) => {
             <div className="container">
                 <div className="section_title" data-aos="fade-up" data-aos-duration="1500" data-aos-delay="300">
                     <h2><span>FAQ</span> - Frequently Asked Questions</h2>
-                    <p>Lorem Ipsum is simply dummy text of the printing and typese tting <br/> indus orem Ipsum has beenthe
-                        standard dummy.</p>
+                    <p>Organizing all types of wellness activity you desire.<br/>Proven step to increase pleasure and commitment.</p>
                 </div>
                 <div className="faq_panel">
                     <div className="accordion" id="accordionExample">

src/component/HomeMain/Story/Main.js

@@ -1,20 +1,64 @@
-import { Link } from 'react-router-dom'
-import React from 'react'
-import story1 from '../../../assets/images/story01.png'
-import story2 from '../../../assets/images/story02.png'
-import story3 from '../../../assets/images/story03.png'
+import React, { useEffect, useState } from "react";
+import { Link } from 'react-router-dom';
+// import story1 from '../../../assets/images/story01.png';
+// import story2 from '../../../assets/images/story02.png';
+// import story3 from '../../../assets/images/story03.png';
+import SiteService from "../../../vendors/service/siteService";
+
 
 const Main = () => {
+    const [blogData, setBlogData] = useState([]);
+
+  let api = new SiteService();
+  useEffect(() => {
+    getBlogData();
+  }, []);
+
+  const getBlogData = async () => { 
+      try {
+        let res = await api.blogData();
+        setBlogData(res.data);
+       
+      } catch (error) {
+        console.log("Error from blog data ", error);
+      }    
+  };
+  
   return (
     <>
         <section className="row_am latest_story" id="blog">
             <div className="container">
                 <div className="section_title" data-aos="fade-in" data-aos-duration="1500" data-aos-delay="100">
                     <h2>Read latest <span>story</span></h2>
-                    <p>Lorem Ipsum is simply dummy text of the printing and typese tting <br/> indus orem Ipsum has beenthe standard dummy.</p>
                 </div>
                 <div className="row">
-                    <div className="col-md-4">
+                {blogData.slice(1, 4).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>
+            ))}
+                    {/* <div className="col-md-4">
                         <div className="story_box" data-aos="fade-up" data-aos-duration="1500">
                             <div className="story_img">
                             <img src={story1} alt="image" />
@@ -53,7 +97,7 @@ const Main = () => {
                                 <Link to="/blog-single">READ MORE</Link>
                             </div>
                         </div>
-                    </div>
+                    </div> */}
                 </div>
             </div>
         </section> 

src/component/Navbar/Main.js

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

src/component/Pages/Faq/Main.js

@@ -1,5 +1,7 @@
 import React , { useState , useEffect} from 'react'
 import { Link } from 'react-router-dom'
+import blueapp from "../../../assets/images/appstore_blue.png"
+import blue from "../../../assets/images/googleplay_blue.png"
 import Bredcrumb from '../../Bredcrumb/Main'
 import BGImg from "../../../assets/images/bread_crumb_bg.png"
 import BGImg1 from "../../../assets/images/bread_crumb_bg_one.png"
@@ -64,7 +66,6 @@ const Main = ({brdcum}) => {
             tag="Faq" 
             bgimg={BGImg2}/>}
 
-
         {/* <section className="row_am faq_section">
             <div className="container">
                 <div className="faq_panel">
@@ -223,20 +224,20 @@ const Main = ({brdcum}) => {
                             <div className="free_text">
                                 <div className="section_title">
                                     <h2>Let’s download free from apple and play store</h2>
-                                    <p>Instant free download from apple and play store orem Ipsum is simply dummy text of the printing.
-                                    and typese tting indus orem Ipsum has beenthe standard</p>
+                                    <p>Instant free download from apple and play store. All you need is an iPhone or Android device to enjoy all personalized metrics for personal use. Welcome to myFit App.</p>
                                 </div>
                                 <ul className="app_btn">
-                                <li>
-                                    <Link to="#">
-                                    <img src="assets/images/appstore_blue.png" alt="image" />
-                                    </Link>
-                                </li>
-                                <li>
-                                    <Link to="#">
-                                    <img src="assets/images/googleplay_blue.png" alt="image" />
-                                    </Link>
-                                </li>
+                                    <li>
+                                        <a href={process.env.REACT_APP_ANDROID_URL}>
+                                        <img src={blueapp} alt="image" />
+                                        </a>
+                                    </li>
+                                    <li>
+                                        <a href={process.env.REACT_APP_IOS_URL}>
+                                        <img src={blue} alt="image" />
+                                        </a>
+                                    </li>
+
                                 </ul>
                             </div>
                         </div>

src/component/Pages/Review/Main.js

@@ -326,19 +326,18 @@ const Main = ({brdcum}) => {
                             <div className="free_text">
                                 <div className="section_title">
                                     <h2>Let’s download free from apple and play store</h2>
-                                    <p>Instant free download from apple and play store orem Ipsum is simply dummy text of the printing.
-                                    and typese tting indus orem Ipsum has beenthe standard</p>
+                                   <p>Instant free download from apple and play store. All you need is an iPhone or Android device to enjoy all personalized metrics for personal use. Welcome to myFit App.</p>
                                 </div>
-                                <ul className="app_btn">
+                                 <ul className="app_btn">
                                 <li>
-                                    <Link to="#">
-                                    <img src="assets/images/appstore_blue.png" alt="image" />
-                                    </Link>
+                                    <a href={process.env.REACT_APP_ANDROID_URL}>
+                                    <img src={blueapp} alt="image" />
+                                    </a>
                                 </li>
                                 <li>
-                                    <Link to="#">
-                                    <img src="assets/images/googleplay_blue.png" alt="image" />
-                                    </Link>
+                                    <a href={process.env.REACT_APP_IOS_URL}>
+                                    <img src={blue} alt="image" />
+                                    </a>
                                 </li>
                                 </ul>
                             </div>

src/component/Pricing/Main.js

@@ -6,6 +6,8 @@ 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";
 
 
 const Main = ({brdcum}) => {
@@ -209,20 +211,20 @@ const Main = ({brdcum}) => {
                             <div className="free_text">
                                 <div className="section_title">
                                     <h2>Let’s download free from apple and play store</h2>
-                                    <p>Instant free download from apple and play store orem Ipsum is simply dummy text of the printing.
-                                    and typese tting indus orem Ipsum has beenthe standard</p>
+                                   <p>Instant free download from apple and play store. All you need is an iPhone or Android device to enjoy all personalized metrics for personal use. Welcome to myFit App.</p>
                                 </div>
                                 <ul className="app_btn">
-                                <li>
-                                    <Link to="#">
-                                    <img src="assets/images/appstore_blue.png" alt="image" />
-                                    </Link>
-                                </li>
-                                <li>
-                                    <Link to="#">
-                                    <img src="assets/images/googleplay_blue.png" alt="image" />
-                                    </Link>
-                                </li>
+                                     <li>
+                                        <a href={process.env.REACT_APP_ANDROID_URL}>
+                                        <img src={blueapp} alt="image" />
+                                        </a>
+                                    </li>
+                                    <li>
+                                        <a href={process.env.REACT_APP_IOS_URL}>
+                                        <img src={blue} alt="image" />
+                                        </a>
+                                    </li>
+
                                 </ul>
                             </div>
                         </div>

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";
@@ -13,6 +14,7 @@ import Pricing from "../component/Pricing/Main";
 import Blog from "../component/Blog/Blog/Main";
 import BlogSingle from "../component/Blog/BlogSingle/Main";
 
+
 import Terms from "../component/Terms/Main";
 import Privacy from "../component/Privacy/Main";
 
@@ -84,9 +86,11 @@ const Routing = () => {
         <Route path="/sign-up" element={<SignUp />} />
         <Route path="/pricing" element={<Pricing brdcum={brdcum} />} />
         <Route path="/blog" element={<Blog brdcum={brdcum} />} />
-        <Route path="/blog-single/:id" element={<BlogSingle brdcum={brdcum} />} />
+        <Route path="/blogdetails/:id" element={<BlogSingle brdcum={brdcum} />} />
         <Route path="/terms" element={<Terms brdcum={brdcum} />} />
         <Route path="/privacy" element={<Privacy brdcum={brdcum} />} />
+        <Route path="/how_it_work" element={<Work brdcum={brdcum} />} />
+
       </Routes>
       {footerpage && <Footer footer={footer} />}
     </>

src/vendors/service/siteService.js

@@ -6,7 +6,7 @@ class SiteService {
     console.log("Er are here anyway");
   }
   // Blog Data {Get}
-  blogData() {
+  blogData(id) {
     return this.getAuxEnd("/blogdata", null);
   }