Skip to content

L
landingPage-Nexpie
Commit 337c5142 by Tonk
Options

update style, test react-owl-carousel in Packages.js

parent 01b0eae6
Showing with 290 additions and 201 deletions
package.json
......@@ -19,6 +19,7 @@
"react-fully-scrolled": "^1.0.4",
"react-icons": "^3.7.0",
"react-intl": "^2.9.0",
"react-owl-carousel": "^2.3.1",
"react-particles-js": "^2.7.0",
"react-redux": "^7.1.0",
"react-router-dom": "^5.0.1",
......
public/index.html
......@@ -9,6 +9,7 @@
/>
<link rel="stylesheet" href="owlcarousel/owl.carousel.min.css" />
<link rel="stylesheet" href="owlcarousel/owl.theme.default.min.css" />
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" />
......
src/components/Home/About.js
......@@ -7,8 +7,8 @@ const About = ({ isMobileSized }) => {
<div
style={{
display: "flex",
flexDirection: isMobileSized ? "column" : "row",
height: "90%"
flexDirection: isMobileSized ? "column" : "row"
// height: "90%"
}}
className="content-width section"
>
......@@ -17,16 +17,16 @@ const About = ({ isMobileSized }) => {
<div
style={{
flex: 1,
padding: isMobileSized ? "10px 20px" : "60",
padding: isMobileSized ? "10px 20px 80px" : "60",
display: "flex",
flexDirection: "column",
justifyContent: "space-evenly"
justifyContent: "center"
}}
>
<h1 className="title">
<FormattedMessage id="About.Title" />
</h1>
<p className="descriptionStyle">
<p className="descriptionStyle" style={{ margin: "50px 0" }}>
<FormattedMessage id="About.Descrip1" />
</p>
<p className="descriptionStyle">
......
src/components/Home/Packages.js
import React from "react";
import { FormattedMessage } from "react-intl";
import OwlCarousel from "react-owl-carousel";
const options = {
center: true,
responsiveClass: true,
startPosition: 1,
responsive: {
0: {
items: 1,
loop: true
},
768: {
items: 2
},
992: {
items: 3
}
}
};
const Card = () => {
return (
<div className="package-card">
......@@ -51,7 +69,8 @@ export default class Packages extends React.Component {
flexDirection: "column",
alignItems: "center",
justifyContent: "space-evenly",
paddingBottom: "60px"
paddingBottom: "60px",
overflow: "hidden"
}}
>
<h1 className="title">
......@@ -80,20 +99,21 @@ export default class Packages extends React.Component {
</div>
</div>
<div>
{this.state.activeTab === "tab1" && (
<div className="row">
{[1, 2, 3].map((item, index) => (
<Card />
))}
</div>
)}
{this.state.activeTab === "tab2" && (
<div className="row">
{[1, 2, 3].map((item, index) => (
<Card />
<OwlCarousel className="owl-theme" {...options}>
{this.state.activeTab === "tab1" &&
[1, 2, 3].map((item, index) => (
<div className="item center">
<Card />
</div>
))}
</div>
)}
{this.state.activeTab === "tab2" && (
<div className="row">
{[1, 2, 3].map((item, index) => (
<Card />
))}
</div>
)}
</OwlCarousel>
</div>
</div>
);
......
src/components/Home/Services.js
......@@ -27,7 +27,8 @@ export default class Services extends React.Component {
flexDirection: "column",
alignItems: "center",
justifyContent: "space-evenly",
paddingBottom: "60px"
paddingBottom: "60px",
overflow: "hidden"
}}
>
<h1 className="title">
......
src/components/Home/WhyUs.js
import React from "react";
import { FormattedMessage } from "react-intl";
import { hidden } from "ansi-colors";
const Card = () => {
return (
......@@ -27,7 +28,8 @@ export default class WhyUs extends React.Component {
flexDirection: "column",
alignItems: "center",
justifyContent: "space-evenly",
paddingBottom: "60px"
paddingBottom: "60px",
overflow: "hidden"
}}
>
<h1 className="title">
......
src/components/SimpleSlider.js 0 → 100644
import React from "react";
import ReactDOM from "react-dom";
import OwlCarousel from "react-owl-carousel";
const options = {
items: 4
};
class SimpleSlider extends React.Component {
render() {
return (
<OwlCarousel className="owl-theme" loop margin={10} nav {...options}>
<div class="item">
<img src="1.jpg" />
</div>
<div class="item">
<img src="2.jpg" />
</div>
<div class="item">
<img src="3.jpg" />
</div>
<div class="item">
<img src="4.jpg" />
</div>
<div class="item">
<img src="5.jpg" />
</div>
</OwlCarousel>
);
}
}
export default SimpleSlider;
src/pages/Homepage.js
......@@ -6,6 +6,10 @@ import WhyUs from "components/Home/WhyUs";
import Services from "components/Home/Services";
import Features from "components/Home/Features";
import Packages from "components/Home/Packages";
import WindowDimension from "../components/utils/WindowDimension";
import SimpleSlider from "components/SimpleSlider";
import "owl.carousel/dist/assets/owl.carousel.css";
import "owl.carousel/dist/assets/owl.theme.default.css";
class Homepage extends Component {
constructor(props) {
......@@ -25,173 +29,74 @@ class Homepage extends Component {
return (
<div>
<Scroller
ref={this.fullPageRef}
curPage={1}
onBeforeScroll={(from, to) => {}}
onAfterScroll={page => {}}
isEnabled={true}
>
<Section>
{this.props.windowWidth <= 768 ? (
<>
<Banner />
</Section>
<Section
style={{
...baseStyle
}}
>
<About />
</Section>
<Section
style={{
...baseStyle
}}
>
<WhyUs />
</Section>
<Section
style={{
...baseStyle
}}
>
<Services />
</Section>
<Section
style={{
...baseStyle
}}
>
<Features />
</Section>
<Section
style={{
...baseStyle
}}
>
<Packages />
</Section>
</Scroller>
</>
) : (
<Scroller
ref={this.fullPageRef}
curPage={1}
onBeforeScroll={(from, to) => {}}
onAfterScroll={page => {}}
isEnabled={true}
>
<Section>
<Banner />
</Section>
<Section
style={{
...baseStyle
}}
>
<About />
</Section>
<Section
style={{
...baseStyle
}}
>
<WhyUs />
</Section>
<Section
style={{
...baseStyle
}}
>
<Services />
</Section>
<Section
style={{
...baseStyle
}}
>
<Features />
</Section>
<Section
style={{
...baseStyle
}}
>
<Packages />
</Section>
<Section
style={{
...baseStyle
}}
>
footer
<SimpleSlider />
</Section>
</Scroller>
)}
</div>
);
}
}
export default Homepage;
// class HeaderComponent extends Component {
// static defaultProps = {
// className: 'full-page-controls',
// style: {
// left: '50%',
// paddingTop: '10px',
// position: 'fixed',
// transform: 'translateX(-50%)',
// },
// };
// state = {
// activeIndex: 0,
// open: false,
// };
// ButtonNavs = [
// { index: 1, name: <FormattedMessage id='BottomNav.Home' /> },
// { index: 2, name: <FormattedMessage id='BottomNav.Docs' /> },
// { index: 3, name: <FormattedMessage id='BottomNav.Features' /> },
// { index: 4, name: <FormattedMessage id='BottomNav.Benefits' /> },
// { index: 5, name: <FormattedMessage id='BottomNav.Packages' /> },
// ];
// renderSlidesNumbers(currentSlideIndex) {
// const { slidesCount, scrollToSlide } = this.props;
// const slidesNumbers = [];
// for (let i = 0; i < slidesCount; i++) {
// const buttonProps = {
// color: currentSlideIndex === i ? 'primary' : 'white',
// key: i,
// onClick: () => scrollToSlide(i),
// };
// slidesNumbers.push(
// <Navbar.Item key={`Button${i}`} renderAs='a' href='#'>
// <Button
// fullwidth
// // color={index === activeIndex ? 'primary' : 'white'}
// style={{ paddingVertical: '0.2em' }}
// {...buttonProps}
// >
// {i + 1}
// </Button>
// </Navbar.Item>
// // <button type='button' {...buttonProps}>
// // {i + 1}
// // </button>
// );
// }
// return slidesNumbers;
// }
// render() {
// const { getCurrentSlideIndex, slidesCount, style, className, language } = this.props;
// const { open } = this.state;
// const currentSlideIndex = getCurrentSlideIndex();
// return (
// // <div className={className} style={style}>
// // </div>
// <Navbar fixed={'top'} transparent={true} active={open}>
// <Navbar.Brand>
// <Navbar.Item renderAs='a' href='#'>
// <Image src={logo} style={{ width: 170 }} />
// </Navbar.Item>
// <Navbar.Burger onClick={() => this.setState(prevState => ({ open: !prevState.open }))} />
// </Navbar.Brand>
// <Navbar.Menu>
// <Navbar.Container position='end'>
// {this.renderSlidesNumbers(currentSlideIndex)}
// <Navbar.Item
// style={{ display: 'flex', flex: 1, justifyContent: 'center', alignContent: 'center' }}
// href='#'
// >
// <Dropdown
// value={language}
// color={'white'}
// onChange={value => {
// this.props.setLanguage(value);
// }}
// >
// <Dropdown.Item value='en'>
// <Flag nation='gb' />
// EN
// </Dropdown.Item>
// <Dropdown.Item value='th'>
// <Flag nation='th' />
// TH
// </Dropdown.Item>
// </Dropdown>
// </Navbar.Item>
// <Navbar.Item href='#'>
// <Button style={{ paddingVertical: '0.2em' }} fullwidth color={'light'}>
// Go to Dashboard
// </Button>
// </Navbar.Item>
// </Navbar.Container>
// </Navbar.Menu>
// </Navbar>
// );
// }
// }
// const mapDispatchToProps = {
// setLanguage,
// };
// const mapStateToProps = state => ({ language: state.localeReducer.language });
// const WrappedHeader = connect(
// mapStateToProps,
// mapDispatchToProps
// )(HeaderComponent);
export default WindowDimension(Homepage);
src/scss/style.scss
......@@ -21,7 +21,8 @@ body {
}
.section {
width: 100vw;
height: 100vh;
min-height: 100vh;
height: 100%;
display: flex;
justify-content: center;
}
......@@ -67,7 +68,7 @@ body {
min-width: 245px;
height: 360px;
border-radius: 6px;
box-shadow: 0 52px 85px 0 rgba(0, 0, 0, 0.09);
box-shadow: 0 52px 40px 0 rgba(0, 0, 0, 0.09);
background-color: $white;
margin: 30px;
z-index: 1;
......@@ -91,7 +92,7 @@ body {
min-width: 265px;
height: 399px;
border-radius: 6px;
box-shadow: 0 52px 85px 0 rgba(0, 0, 0, 0.09);
box-shadow: 0 52px 40px 0 rgba(0, 0, 0, 0.09);
border: solid 0.5px #f0f0f0;
background-color: $white;
margin: 30px;
......@@ -184,9 +185,18 @@ body {
background-image: linear-gradient(277deg, #3156a3, #3984dd);
}
.feature-descrip {
color: #777777;
display: block; /* Fallback for non-webkit */
display: -webkit-box;
max-width: 400px;
height: 4; /* Fallback for non-webkit */
margin: 0 auto;
font-size: 18px;
line-height: 1.33;
color: #777777;
-webkit-line-clamp: 4;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
}
}
}
......@@ -211,7 +221,7 @@ body {
width: 300px;
height: 450px;
border-radius: 6px;
box-shadow: 0 52px 85px 0 rgba(0, 0, 0, 0.09);
box-shadow: 0 52px 40px 0 rgba(0, 0, 0, 0.09);
border: solid 0.5px #f0f0f0;
background-image: $white;
padding: 35px;
......@@ -289,6 +299,9 @@ body {
}
}
}
.owl-carousel .owl-stage-outer {
overflow: visible;
}
.center {
display: flex;
align-items: center;
......@@ -304,24 +317,35 @@ body {
box-shadow: 0 8px 16px rgba(10, 10, 10, 0);
}
}
@media screen and (max-width: 992px) {
}
@media screen and (max-width: 768px) {
.descriptionStyle {
font-size: 18px;
}
.feature-container .feature-card {
width: 90%;
&:first-child {
margin-top: 30px;
}
font-size: 15px;
}
.feature-container .feature-card .feature-img,
.feature-card-hidden {
display: none;
.title {
font-size: 24px;
}
.feature-container .feature-card-hidden {
display: none;
}
.feature-container {
.feature-card {
width: 90%;
&:first-child {
margin-top: 30px;
}
.feature-text-wrapper {
.feature-title {
font-size: 16px;
}
.feature-descrip {
font-size: 12px;
}
}
}
}
.banner-text-container {
align-items: center;
.banner-title {
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment