MyFit/www-myfit
4
0
Fork 0
Code Issues Pull Requests Releases Activity

Update homepage slides and interface images

Browse Source
This commit is contained in:
Chukwumdiebube Ojinta
2024-01-06 22:08:56 -08:00
parent 654d30182d
commit fced9b6084
7 changed files with 88 additions and 91 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/assets/images/myfithomepage.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 138 KiB

src/assets/images/myfitloginpage.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 54 KiB

src/assets/images/myfitscreenhome.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 128 KiB

src/assets/images/myfitscreenlogin.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 39 KiB

src/assets/images/myfitstartpage.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 250 KiB

src/component/Home/Main.js
+4 -17
View File
@@ -16,6 +16,8 @@ import white from "../../assets/images/googleplay_white.png";
import msg from "../../assets/images/message_icon.png"; import msg from "../../assets/images/message_icon.png";
import shield from "../../assets/images/shield_icon.png"; import shield from "../../assets/images/shield_icon.png";
import screen from "../../assets/images/screen.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"; import frame from "../../assets/images/mobile_frame_svg.svg";
const Main = ({ setfooter, setnavbar, setbrdcum }) => { const Main = ({ setfooter, setnavbar, setbrdcum }) => {
@@ -94,21 +96,6 @@ const Main = ({ setfooter, setnavbar, setbrdcum }) => {
</a> </a>
</li> </li>
</ul> </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>
<div <div
className="col-lg-6 col-md-12" className="col-lg-6 col-md-12"
@@ -129,12 +116,12 @@ const Main = ({ setfooter, setnavbar, setbrdcum }) => {
> >
<div className="item"> <div className="item">
<div className="slider_img"> <div className="slider_img">
<img src={screen} alt="image" /> <img src={firstSlide} alt="image" />
</div> </div>
</div> </div>
<div className="item"> <div className="item">
<div className="slider_img"> <div className="slider_img">
<img src={screen} alt="image" /> <img src={secondSlide} alt="image" />
</div> </div>
</div> </div>
<div className="item"> <div className="item">
src/component/HomeMain/Interface/Main.js
+84 -74
View File
@@ -1,82 +1,92 @@
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/screen-1.png' import img1 from "../../../assets/images/myfitstartpage.png";
import img2 from '../../../assets/images/screen-2.png' import img2 from "../../../assets/images/screen-2.png";
import img3 from '../../../assets/images/screen-3.png' import img3 from "../../../assets/images/myfithomepage.png";
import img4 from '../../../assets/images/screen-4.png' import img4 from "../../../assets/images/screen-4.png";
import img5 from '../../../assets/images/screen-5.png' import img5 from "../../../assets/images/myfitloginpage.png";
const Main = () => { const Main = () => {
const screen_slider = {
const screen_slider = { loop: true,
loop:true, margin: 10,
margin:10, nav: false,
nav:false, autoplay: true,
autoplay: true, smartSpeed: 1500,
smartSpeed: 1500, center: true,
center: true, dots: true,
dots: true, responsive: {
responsive:{ 0: {
0:{ items: 2,
items:2 },
}, 600: {
600:{ items: 3,
items:3 },
}, 1000: {
1000:{ items: 5,
items:5 },
} },
} };
}
return ( return (
<> <>
<section className="row_am interface_section"> <section className="row_am interface_section">
<div className="container-fluid"> <div className="container-fluid">
<div className="section_title" data-aos="fade-up" data-aos-duration="1500" data-aos-delay="300"> <div
<h2>Beautiful <span>interface</span></h2> className="section_title"
<p> data-aos="fade-up"
myFit appends a fun yet simple process to keep you consistently<br/> motivated,engaged and moving again without any shrewdness. data-aos-duration="1500"
data-aos-delay="300"
</p> >
<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="screen_slider" > </div>
<OwlCarousel id="screen_slider" {...screen_slider} className="owl-carousel owl-theme owl-loaded owl-drag"> <div className="item">
<div className="item"> <div className="screen_frame_img">
<div className="screen_frame_img"> <img src={img2} alt="image" />
<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>
</div> </div>
</section> <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;