Update homepage slides and interface images

src/component/Home/Main.js

@@ -16,6 +16,8 @@ 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 frame from "../../assets/images/mobile_frame_svg.svg";
 
 const Main = ({ setfooter, setnavbar, setbrdcum }) => {
@@ -94,21 +96,6 @@ const Main = ({ setfooter, setnavbar, setbrdcum }) => {
                   </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" />
-                    <img className="white_img" src={whiteapp} alt="image" />
-                  </Link>
-                </li>
-                <li>
-                  <Link to="https://play.google.com/store/apps/details?id=com.mermsemr.myfit">
-                    <img className="blue_img" src={blue} alt="image" />
-                    <img className="white_img" src={white} alt="image" />
-                  </Link>
-                </li>
-              </ul> */}
             </div>
             <div
               className="col-lg-6 col-md-12"
@@ -129,12 +116,12 @@ const Main = ({ setfooter, setnavbar, setbrdcum }) => {
                 >
                   <div className="item">
                     <div className="slider_img">
-                      <img src={screen} alt="image" />
+                      <img src={firstSlide} alt="image" />
                     </div>
                   </div>
                   <div className="item">
                     <div className="slider_img">
-                      <img src={screen} alt="image" />
+                      <img src={secondSlide} alt="image" />
                     </div>
                   </div>
                   <div className="item">

src/component/HomeMain/Interface/Main.js

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