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

Added new slide images to homepage #80

Merged
ameye merged 1 commits from homepage-slides-update into master 2024-01-07 11:57:44 +00:00
Conversation 0 Commits 1 Files Changed 6
+84 -74
6 changed files with 84 additions and 74 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/HomeMain/Interface/Main.js
+84 -74
View File
@@ -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;