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 @@ ...@@ -19,6 +19,7 @@
"react-fully-scrolled": "^1.0.4", "react-fully-scrolled": "^1.0.4",
"react-icons": "^3.7.0", "react-icons": "^3.7.0",
"react-intl": "^2.9.0", "react-intl": "^2.9.0",
"react-owl-carousel": "^2.3.1",
"react-particles-js": "^2.7.0", "react-particles-js": "^2.7.0",
"react-redux": "^7.1.0", "react-redux": "^7.1.0",
"react-router-dom": "^5.0.1", "react-router-dom": "^5.0.1",
......
public/index.html
...@@ -9,6 +9,7 @@ ...@@ -9,6 +9,7 @@
/> />
<link rel="stylesheet" href="owlcarousel/owl.carousel.min.css" /> <link rel="stylesheet" href="owlcarousel/owl.carousel.min.css" />
<link rel="stylesheet" href="owlcarousel/owl.theme.default.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="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" /> <meta name="theme-color" content="#000000" />
......
src/components/Home/About.js
...@@ -7,8 +7,8 @@ const About = ({ isMobileSized }) => { ...@@ -7,8 +7,8 @@ const About = ({ isMobileSized }) => {
<div <div
style={{ style={{
display: "flex", display: "flex",
flexDirection: isMobileSized ? "column" : "row", flexDirection: isMobileSized ? "column" : "row"
height: "90%" // height: "90%"
}} }}
className="content-width section" className="content-width section"
> >
...@@ -17,16 +17,16 @@ const About = ({ isMobileSized }) => { ...@@ -17,16 +17,16 @@ const About = ({ isMobileSized }) => {
<div <div
style={{ style={{
flex: 1, flex: 1,
padding: isMobileSized ? "10px 20px" : "60", padding: isMobileSized ? "10px 20px 80px" : "60",
display: "flex", display: "flex",
flexDirection: "column", flexDirection: "column",
justifyContent: "space-evenly" justifyContent: "center"
}} }}
> >
<h1 className="title"> <h1 className="title">
<FormattedMessage id="About.Title" /> <FormattedMessage id="About.Title" />
</h1> </h1>
<p className="descriptionStyle"> <p className="descriptionStyle" style={{ margin: "50px 0" }}>
<FormattedMessage id="About.Descrip1" /> <FormattedMessage id="About.Descrip1" />
</p> </p>
<p className="descriptionStyle"> <p className="descriptionStyle">
......
src/components/Home/Packages.js
import React from "react"; import React from "react";
import { FormattedMessage } from "react-intl"; 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 = () => { const Card = () => {
return ( return (
<div className="package-card"> <div className="package-card">
...@@ -51,7 +69,8 @@ export default class Packages extends React.Component { ...@@ -51,7 +69,8 @@ export default class Packages extends React.Component {
flexDirection: "column", flexDirection: "column",
alignItems: "center", alignItems: "center",
justifyContent: "space-evenly", justifyContent: "space-evenly",
paddingBottom: "60px" paddingBottom: "60px",
overflow: "hidden"
}} }}
> >
<h1 className="title"> <h1 className="title">
...@@ -80,20 +99,21 @@ export default class Packages extends React.Component { ...@@ -80,20 +99,21 @@ export default class Packages extends React.Component {
</div> </div>
</div> </div>
<div> <div>
{this.state.activeTab === "tab1" && ( <OwlCarousel className="owl-theme" {...options}>
<div className="row"> {this.state.activeTab === "tab1" &&
{[1, 2, 3].map((item, index) => ( [1, 2, 3].map((item, index) => (
<Card /> <div className="item center">
))} <Card />
</div> </div>
)}
{this.state.activeTab === "tab2" && (
<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 />
))}
</div>
)}
</OwlCarousel>
</div> </div>
</div> </div>
); );
......
src/components/Home/Services.js
...@@ -27,7 +27,8 @@ export default class Services extends React.Component { ...@@ -27,7 +27,8 @@ export default class Services extends React.Component {
flexDirection: "column", flexDirection: "column",
alignItems: "center", alignItems: "center",
justifyContent: "space-evenly", justifyContent: "space-evenly",
paddingBottom: "60px" paddingBottom: "60px",
overflow: "hidden"
}} }}
> >
<h1 className="title"> <h1 className="title">
......
src/components/Home/WhyUs.js
import React from "react"; import React from "react";
import { FormattedMessage } from "react-intl"; import { FormattedMessage } from "react-intl";
import { hidden } from "ansi-colors";
const Card = () => { const Card = () => {
return ( return (
...@@ -27,7 +28,8 @@ export default class WhyUs extends React.Component { ...@@ -27,7 +28,8 @@ export default class WhyUs extends React.Component {
flexDirection: "column", flexDirection: "column",
alignItems: "center", alignItems: "center",
justifyContent: "space-evenly", justifyContent: "space-evenly",
paddingBottom: "60px" paddingBottom: "60px",
overflow: "hidden"
}} }}
> >
<h1 className="title"> <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"; ...@@ -6,6 +6,10 @@ import WhyUs from "components/Home/WhyUs";
import Services from "components/Home/Services"; import Services from "components/Home/Services";
import Features from "components/Home/Features"; import Features from "components/Home/Features";
import Packages from "components/Home/Packages"; 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 { class Homepage extends Component {
constructor(props) { constructor(props) {
...@@ -25,173 +29,74 @@ class Homepage extends Component { ...@@ -25,173 +29,74 @@ class Homepage extends Component {
return ( return (
<div> <div>
<Scroller {this.props.windowWidth <= 768 ? (
ref={this.fullPageRef} <>
curPage={1}
onBeforeScroll={(from, to) => {}}
onAfterScroll={page => {}}
isEnabled={true}
>
<Section>
<Banner /> <Banner />
</Section>
<Section
style={{
...baseStyle
}}
>
<About /> <About />
</Section>
<Section
style={{
...baseStyle
}}
>
<WhyUs /> <WhyUs />
</Section>
<Section
style={{
...baseStyle
}}
>
<Services /> <Services />
</Section>
<Section
style={{
...baseStyle
}}
>
<Features /> <Features />
</Section>
<Section
style={{
...baseStyle
}}
>
<Packages /> <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> </div>
); );
} }
} }
export default Homepage; export default WindowDimension(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);
src/scss/style.scss
...@@ -21,7 +21,8 @@ body { ...@@ -21,7 +21,8 @@ body {
} }
.section { .section {
width: 100vw; width: 100vw;
height: 100vh; min-height: 100vh;
height: 100%;
display: flex; display: flex;
justify-content: center; justify-content: center;
} }
...@@ -67,7 +68,7 @@ body { ...@@ -67,7 +68,7 @@ body {
min-width: 245px; min-width: 245px;
height: 360px; height: 360px;
border-radius: 6px; 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; background-color: $white;
margin: 30px; margin: 30px;
z-index: 1; z-index: 1;
...@@ -91,7 +92,7 @@ body { ...@@ -91,7 +92,7 @@ body {
min-width: 265px; min-width: 265px;
height: 399px; height: 399px;
border-radius: 6px; 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; border: solid 0.5px #f0f0f0;
background-color: $white; background-color: $white;
margin: 30px; margin: 30px;
...@@ -184,9 +185,18 @@ body { ...@@ -184,9 +185,18 @@ body {
background-image: linear-gradient(277deg, #3156a3, #3984dd); background-image: linear-gradient(277deg, #3156a3, #3984dd);
} }
.feature-descrip { .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; font-size: 18px;
line-height: 1.33; line-height: 1.33;
color: #777777; -webkit-line-clamp: 4;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
} }
} }
} }
...@@ -211,7 +221,7 @@ body { ...@@ -211,7 +221,7 @@ body {
width: 300px; width: 300px;
height: 450px; height: 450px;
border-radius: 6px; 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; border: solid 0.5px #f0f0f0;
background-image: $white; background-image: $white;
padding: 35px; padding: 35px;
...@@ -289,6 +299,9 @@ body { ...@@ -289,6 +299,9 @@ body {
} }
} }
} }
.owl-carousel .owl-stage-outer {
overflow: visible;
}
.center { .center {
display: flex; display: flex;
align-items: center; align-items: center;
...@@ -304,24 +317,35 @@ body { ...@@ -304,24 +317,35 @@ body {
box-shadow: 0 8px 16px rgba(10, 10, 10, 0); box-shadow: 0 8px 16px rgba(10, 10, 10, 0);
} }
} }
@media screen and (max-width: 992px) {
}
@media screen and (max-width: 768px) { @media screen and (max-width: 768px) {
.descriptionStyle { .descriptionStyle {
font-size: 18px; font-size: 15px;
}
.feature-container .feature-card {
width: 90%;
&:first-child {
margin-top: 30px;
}
} }
.feature-container .feature-card .feature-img, .title {
.feature-card-hidden { font-size: 24px;
display: none;
} }
.feature-container .feature-card-hidden { .feature-container .feature-card-hidden {
display: none; 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 { .banner-text-container {
align-items: center; align-items: center;
.banner-title { .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