Skip to content

L
landingPage-Nexpie
Commit c3efa56c by HaOuiha
Options

responsive for language toggle &change lib fullpage

parent 337c5142
Showing with 1190 additions and 1008 deletions
.prettierrc 0 → 100644
{
"printWidth": 120,
"trailingComma": "es5",
"tabWidth": 4,
"singleQuote": true,
"jsxBracketSameLine": true,
"useTabs": true
}
package.json
...@@ -7,6 +7,7 @@ ...@@ -7,6 +7,7 @@
"@babel/cli": "^7.5.5", "@babel/cli": "^7.5.5",
"babel-plugin-react-intl": "^4.1.3", "babel-plugin-react-intl": "^4.1.3",
"bulma": "^0.7.5", "bulma": "^0.7.5",
"fullpage-react": "^3.1.0",
"node-sass": "^4.12.0", "node-sass": "^4.12.0",
"node-sass-chokidar": "1.3.5", "node-sass-chokidar": "1.3.5",
"prop-types": "^15.7.2", "prop-types": "^15.7.2",
......
src/components/Flag.js
import React from 'react'; import React from 'react';
import ReactCountryFlag from 'react-country-flag'; import ReactCountryFlag from 'react-country-flag';
const Flag = ({ nation }) => ( const Flag = ({ nation, style }) => (
<ReactCountryFlag <ReactCountryFlag
styleProps={{ styleProps={{
width: 16, width: 16,
...@@ -10,6 +10,7 @@ const Flag = ({ nation }) => ( ...@@ -10,6 +10,7 @@ const Flag = ({ nation }) => (
alignItems: 'center', alignItems: 'center',
marginBottom: 4, marginBottom: 4,
marginRight: 8, marginRight: 8,
...style,
}} }}
code={nation} code={nation}
svg svg
......
src/components/Header.js
import React, { Component } from "react"; import React, { Component } from 'react';
import Navbar from "react-bulma-components/lib/components/navbar"; import Navbar from 'react-bulma-components/lib/components/navbar';
import Image from "react-bulma-components/lib/components/image"; import Image from 'react-bulma-components/lib/components/image';
import Button from "react-bulma-components/lib/components/button"; import Button from 'react-bulma-components/lib/components/button';
import Dropdown from "react-bulma-components/lib/components/dropdown"; import Dropdown from 'react-bulma-components/lib/components/dropdown';
import { FormattedMessage } from "react-intl"; import { FormattedMessage } from 'react-intl';
import { connect } from "react-redux"; import { connect } from 'react-redux';
import { setLanguage } from "../redux/actions/localeAction"; import { setLanguage } from '../redux/actions/localeAction';
import logo from "assets/logo.png"; import logo from 'assets/logo.png';
import Flag from "./Flag"; import Flag from './Flag';
import WindowDimensions from '../utils/WindowDimension';
const ButtonNavs = [ const ButtonNavs = [
{ index: 0, name: <FormattedMessage id="BottomNav.Home" /> }, { index: 0, name: <FormattedMessage id="BottomNav.Home" /> },
{ index: 1, name: <FormattedMessage id="BottomNav.Docs" /> }, { index: 1, name: <FormattedMessage id="BottomNav.Docs" /> },
{ index: 2, name: <FormattedMessage id="BottomNav.Features" /> }, { index: 2, name: <FormattedMessage id="BottomNav.Features" /> },
{ index: 3, name: <FormattedMessage id="BottomNav.Benefits" /> }, { index: 3, name: <FormattedMessage id="BottomNav.Benefits" /> },
{ index: 4, name: <FormattedMessage id="BottomNav.Customer" /> }, { index: 4, name: <FormattedMessage id="BottomNav.Customer" /> },
{ index: 5, name: <FormattedMessage id="BottomNav.Packages" /> }, { index: 5, name: <FormattedMessage id="BottomNav.Packages" /> },
{ index: 6, name: ["EN", "TH"] }, { index: 6, name: ['EN', 'TH'] },
{ index: 7, name: <FormattedMessage id="GoToDashboard" /> } { index: 7, name: <FormattedMessage id="GoToDashboard" /> },
]; ];
class HeaderComponent extends Component { class HeaderComponent extends Component {
state = { state = {
activeIndex: 0, activeIndex: 0,
open: false open: false,
}; };
renderButtonNavs = () => { renderButtonNavs = () => {
const { language } = this.props; // const { language } = this.props;
let NavItems = []; let NavItems = [];
NavItems = ButtonNavs.filter(firstSection => firstSection.index <= 5).map( NavItems = ButtonNavs.filter(ButtonNav => ButtonNav.index <= 5).map((firstSection, index) => {
(firstSection, index) => { const { activeIndex } = this.state;
const { activeIndex } = this.state; return (
return ( <Navbar.Item key={`Button${index}`} renderAs="a" href="#">
<Navbar.Item key={`Button${index}`} renderAs="a" href="#"> <Button fullwidth color={index === activeIndex ? 'primary' : 'white'}>
<Button {firstSection.name}
fullwidth </Button>
color={index === activeIndex ? "primary" : "white"} </Navbar.Item>
> );
{firstSection.name} });
</Button>
</Navbar.Item>
);
}
);
NavItems.push( const renderToggleLanguage = () => (
<Navbar.Item <Navbar.Item
style={{ style={{
display: "flex", display: 'flex',
flex: 1, flex: 1,
justifyContent: "center", justifyContent: 'center',
alignContent: "center" alignContent: 'center',
}} }}
href="#" href="#">
> <Dropdown
<Dropdown value={this.props.language}
value={language} color={'white'}
color={"white"} onChange={value => {
onChange={value => { this.props.setLanguage(value);
this.props.setLanguage(value); }}>
}} <Dropdown.Item value="en">
> <Flag nation="gb" />
<Dropdown.Item value="en"> {ButtonNavs[6].name[0]}
<Flag nation="gb" /> </Dropdown.Item>
{ButtonNavs[6].name[0]} <Dropdown.Item value="th">
</Dropdown.Item> <Flag nation="th" />
<Dropdown.Item value="th"> {ButtonNavs[6].name[1]}
<Flag nation="th" /> </Dropdown.Item>
{ButtonNavs[6].name[1]} </Dropdown>
</Dropdown.Item> </Navbar.Item>
</Dropdown> );
</Navbar.Item>,
<Navbar.Item href="#">
<Button style={{ paddingVertical: "0.1em" }} fullwidth color={"light"}>
{ButtonNavs[7].name}
</Button>
</Navbar.Item>
);
return NavItems;
};
render() { const renderToggleLanguageButton = () => (
const { open } = this.state; <Navbar.Item
return ( style={{
<Navbar display: 'flex',
// fixed={"top"} flex: 1,
transparent={true} justifyContent: 'center',
active={open} alignContent: 'center',
style={{ padding: "0.5rem 2rem" }} }}
> href="#">
<Navbar.Brand> <Button
<Navbar.Item renderAs="a" href="#"> fullwidth
<Image src={logo} style={{ width: 170 }} /> color="white"
</Navbar.Item> onClick={() => {
<Navbar.Burger this.props.setLanguage(this.props.language === 'en' ? 'th' : 'en');
onClick={() => }}>
this.setState(prevState => ({ open: !prevState.open })) <Flag nation={this.props.language === 'en' ? 'th' : 'gb'} style={{ marginBottom: 0 }} />
} {ButtonNavs[6].name[this.props.language === 'en' ? 1 : 0]}
/> </Button>
</Navbar.Brand> </Navbar.Item>
<Navbar.Menu> );
<Navbar.Container position="end">
{this.renderButtonNavs()} NavItems.push(
</Navbar.Container> this.props.isTabletSized ? renderToggleLanguageButton() : renderToggleLanguage(),
</Navbar.Menu> <Navbar.Item href="#">
</Navbar> <Button style={{ paddingVertical: '0.1em' }} fullwidth color={'light'}>
); {ButtonNavs[7].name}
} </Button>
</Navbar.Item>
);
return NavItems;
};
render() {
const { open } = this.state;
return (
<Navbar fixed={'top'} transparent={true} active={open} style={{ padding: '0.5rem 2rem' }}>
<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.renderButtonNavs()}</Navbar.Container>
</Navbar.Menu>
</Navbar>
);
}
} }
const mapDispatchToProps = { const mapDispatchToProps = {
setLanguage setLanguage,
}; };
const mapStateToProps = state => ({ language: state.localeReducer.language }); const mapStateToProps = state => ({ language: state.localeReducer.language });
const Header = WindowDimensions(HeaderComponent);
export default connect( export default connect(
mapStateToProps, mapStateToProps,
mapDispatchToProps mapDispatchToProps
)(HeaderComponent); )(Header);
src/components/Home/About.js
import React from "react"; import React from 'react';
import WindowDimensions from "components/utils/WindowDimension"; import WindowDimensions from '../../utils/WindowDimension';
import { FormattedMessage } from "react-intl"; import { FormattedMessage } from 'react-intl';
const About = ({ isMobileSized }) => { const About = ({ isMobileSized }) => {
return ( return (
<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">
> {isMobileSized ? null : <div style={{ flex: 1 }} />}
{isMobileSized ? null : <div style={{ flex: 1 }} />}
<div <div
style={{ style={{
flex: 1, flex: 1,
padding: isMobileSized ? "10px 20px 80px" : "60", padding: isMobileSized ? '10px 20px 80px' : '60',
display: "flex", display: 'flex',
flexDirection: "column", flexDirection: 'column',
justifyContent: "center" justifyContent: 'center',
}} }}>
> <h1 className="title">
<h1 className="title"> <FormattedMessage id="About.Title" />
<FormattedMessage id="About.Title" /> </h1>
</h1> <p className="descriptionStyle" style={{ margin: '50px 0' }}>
<p className="descriptionStyle" style={{ margin: "50px 0" }}> <FormattedMessage id="About.Descrip1" />
<FormattedMessage id="About.Descrip1" /> </p>
</p> <p className="descriptionStyle">
<p className="descriptionStyle"> <FormattedMessage id="About.Descrip2" />
<FormattedMessage id="About.Descrip2" /> </p>
</p> </div>
</div> </div>
</div> );
);
}; };
export default WindowDimensions(About); export default WindowDimensions(About);
src/components/Home/Banner.js
import React from "react"; import React from 'react';
export default class Banner extends React.Component { export default class Banner extends React.Component {
render() { render() {
return ( return (
<> <>
<div <div
className="section" className="section"
style={{ style={{
background: "linear-gradient(to right bottom, #194db7, #3fd4e6)" background: 'linear-gradient(to right bottom, #194db7, #3fd4e6)',
}} }}>
> <div className="content-width">
<div className="content-width"> <div className="banner-text-container">
<div className="banner-text-container"> <h1 className="banner-title">NEXPIE IOT Platform</h1>
<h1 className="banner-title">NEXPIE IOT Platform</h1> <div className="banner-descrip-wrapper">
<div className="banner-descrip-wrapper"> <h2>CONNECT</h2>
<h2>CONNECT</h2> <h2>EVERYTHING !</h2>
<h2>EVERYTHING !</h2> </div>
</div> </div>
</div> </div>
</div> </div>
</div> </>
</> );
); }
}
} }
src/components/Home/Features.js
import React from "react"; import React from 'react';
import { FormattedMessage } from "react-intl"; import { FormattedMessage } from 'react-intl';
const feature = [ const feature = [
{ {
title: <FormattedMessage id="Monitor.Title" />, title: <FormattedMessage id="Monitor.Title" />,
description: <FormattedMessage id="Monitor.Descrip" /> description: <FormattedMessage id="Monitor.Descrip" />,
}, },
{ {
title: <FormattedMessage id="Trigger.Title" />, title: <FormattedMessage id="Trigger.Title" />,
description: <FormattedMessage id="Trigger.Descrip" /> description: <FormattedMessage id="Trigger.Descrip" />,
}, },
{ {
title: <FormattedMessage id="Control.Title" />, title: <FormattedMessage id="Control.Title" />,
description: <FormattedMessage id="Control.Descrip" /> description: <FormattedMessage id="Control.Descrip" />,
}, },
{ {
title: <FormattedMessage id="Hook.Title" />, title: <FormattedMessage id="Hook.Title" />,
description: <FormattedMessage id="Hook.Descrip" /> description: <FormattedMessage id="Hook.Descrip" />,
}, },
{ {
title: <FormattedMessage id="Storage.Title" />, title: <FormattedMessage id="Storage.Title" />,
description: <FormattedMessage id="Storage.Descrip" /> description: <FormattedMessage id="Storage.Descrip" />,
} },
]; ];
const Card = props => { const Card = props => {
return ( return (
<div className="feature-card row"> <div className="feature-card row">
<div className="feature-img"> <div className="feature-img">
<figure className="image is-64x64"> <figure className="image is-64x64">
<img alt="" src="https://bulma.io/images/placeholders/64x64.png" /> <img alt="" src="https://bulma.io/images/placeholders/64x64.png" />
</figure> </figure>
</div> </div>
<div className="feature-text-wrapper"> <div className="feature-text-wrapper">
<h1 className="feature-title">{props.title}</h1> <h1 className="feature-title">{props.title}</h1>
<p className="feature-descrip">{props.description}</p> <p className="feature-descrip">{props.description}</p>
</div> </div>
</div> </div>
); );
}; };
export default class Features extends React.Component { export default class Features extends React.Component {
render() { render() {
const oddItem = feature.length % 2; const oddItem = feature.length % 2;
return ( return (
<div <div
className="section content-width" className="section content-width"
style={{ style={{
flexDirection: "column", flexDirection: 'column',
alignItems: "center", alignItems: 'center',
justifyContent: "space-evenly", justifyContent: 'space-evenly',
paddingBottom: "60px" paddingBottom: '60px',
}} }}>
> <h1 className="title">
<h1 className="title"> <FormattedMessage id="BottomNav.Features" />
<FormattedMessage id="BottomNav.Features" /> </h1>
</h1> <p className="descriptionStyle" style={{ textAlign: 'center', maxWidth: 1140 }}>
<p <FormattedMessage id="Feature.Descrip" />
className="descriptionStyle" </p>
style={{ textAlign: "center", maxWidth: 1140 }} <div className="feature-container">
> {feature.map((item, index) => (
<FormattedMessage id="Feature.Descrip" /> <Card key={index} title={item.title} description={item.description} />
</p> ))}
<div className="feature-container"> {oddItem === 1 ? <div className="feature-card-hidden" /> : <></>}
{feature.map((item, index) => ( </div>
<Card </div>
key={index} );
title={item.title} }
description={item.description}
/>
))}
{oddItem === 1 ? <div className="feature-card-hidden" /> : <></>}
</div>
</div>
);
}
} }
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"; import OwlCarousel from 'react-owl-carousel';
const options = { const options = {
center: true, center: true,
responsiveClass: true, responsiveClass: true,
startPosition: 1, startPosition: 1,
responsive: { responsive: {
0: { 0: {
items: 1, items: 1,
loop: true loop: true,
}, },
768: { 768: {
items: 2 items: 2,
}, },
992: { 992: {
items: 3 items: 3,
} },
} },
}; };
const Card = () => { const Card = () => {
return ( return (
<div className="package-card"> <div className="package-card">
<div className="text-wrapper"> <div className="text-wrapper">
<h1 className="plan-title">Standard Plan</h1> <h1 className="plan-title">Standard Plan</h1>
<p className="plan-descrip">This is standard hositng plan</p> <p className="plan-descrip">This is standard hositng plan</p>
</div> </div>
<div className="price-wrapper"> <div className="price-wrapper">
<div className="price"> <div className="price">
<h1>$3</h1> <h1>$3</h1>
.99 .99
</div> </div>
<p>/mo</p> <p>/mo</p>
</div> </div>
<div className="package-details"> <div className="package-details">
<div className="package-detail"> <div className="package-detail">
<p> Space</p> <p> Space</p>
<p>30GB</p> <p>30GB</p>
</div> </div>
<div className="package-detail"> <div className="package-detail">
<p> FTP User</p> <p> FTP User</p>
<p>50</p> <p>50</p>
</div> </div>
<div className="package-detail"> <div className="package-detail">
<p> Databases</p> <p> Databases</p>
<p>50</p> <p>50</p>
</div> </div>
<div className="package-detail"> <div className="package-detail">
<p> Adons Domain</p> <p> Adons Domain</p>
<p>5</p> <p>5</p>
</div> </div>
</div> </div>
<div className="btn-wrapper"> <div className="btn-wrapper">
<div>Choose plan</div> <div>Choose plan</div>
</div> </div>
</div> </div>
); );
}; };
export default class Packages extends React.Component { export default class Packages extends React.Component {
state = { state = {
activeTab: "tab1" activeTab: 'tab1',
}; };
render() { render() {
return ( return (
<div <div
className="section content-width" className="section content-width"
style={{ style={{
flexDirection: "column", flexDirection: 'column',
alignItems: "center", alignItems: 'center',
justifyContent: "space-evenly", justifyContent: 'space-evenly',
paddingBottom: "60px", paddingBottom: '60px',
overflow: "hidden" overflow: 'hidden',
}} }}>
> <h1 className="title">
<h1 className="title"> <FormattedMessage id="Packages.Title" />
<FormattedMessage id="Packages.Title" /> </h1>
</h1> <div className="tab-container">
<div className="tab-container"> <div
<div onClick={() => {
onClick={() => { this.setState({
this.setState({ activeTab: 'tab1',
activeTab: "tab1" });
}); }}
}} className={this.state.activeTab === 'tab1' ? 'active tab' : 'tab'}>
className={this.state.activeTab === "tab1" ? "active tab" : "tab"} Public Platform (sharing resources)
> </div>
Public Platform (sharing resources) <div
</div> onClick={() => {
<div this.setState({
onClick={() => { activeTab: 'tab2',
this.setState({ });
activeTab: "tab2" }}
}); className={this.state.activeTab === 'tab2' ? 'active tab' : 'tab'}>
}} Private Platform (dedicated resources)
className={this.state.activeTab === "tab2" ? "active tab" : "tab"} </div>
> </div>
Private Platform (dedicated resources) <div>
</div> <OwlCarousel className="owl-theme" {...options}>
</div> {this.state.activeTab === 'tab1' &&
<div> [1, 2, 3].map((item, index) => (
<OwlCarousel className="owl-theme" {...options}> <div className="item center">
{this.state.activeTab === "tab1" && <Card />
[1, 2, 3].map((item, index) => ( </div>
<div className="item center"> ))}
<Card /> {this.state.activeTab === 'tab2' && (
</div> <div className="row">
))} {[1, 2, 3].map((item, index) => (
{this.state.activeTab === "tab2" && ( <Card />
<div className="row"> ))}
{[1, 2, 3].map((item, index) => ( </div>
<Card /> )}
))} </OwlCarousel>
</div> </div>
)} </div>
</OwlCarousel> );
</div> }
</div>
);
}
} }
src/components/Home/Services.js
import React from "react"; import React from 'react';
import { FormattedMessage } from "react-intl"; import { FormattedMessage } from 'react-intl';
const Card = () => { const Card = () => {
return ( return (
<div className="service-card"> <div className="service-card">
<div className="img-wrapper"> <div className="img-wrapper">
<figure className="image is-128x128"> <figure className="image is-128x128">
<img alt="" src="https://bulma.io/images/placeholders/128x128.png" /> <img alt="" src="https://bulma.io/images/placeholders/128x128.png" />
</figure> </figure>
</div> </div>
<div className="service-wrapper"> <div className="service-wrapper">
<h1 className="service-title">Connectivity</h1> <h1 className="service-title">Connectivity</h1>
<p className="service-description"> <p className="service-description">Connecting your device with NEXPIE IoT platform.</p>
Connecting your device with NEXPIE IoT platform. </div>
</p> </div>
</div> );
</div>
);
}; };
export default class Services extends React.Component { export default class Services extends React.Component {
render() { render() {
return ( return (
<div <div
className="section content-width" className="section content-width"
style={{ style={{
flexDirection: "column", flexDirection: 'column',
alignItems: "center", alignItems: 'center',
justifyContent: "space-evenly", justifyContent: 'space-evenly',
paddingBottom: "60px", paddingBottom: '60px',
overflow: "hidden" overflow: 'hidden',
}} }}>
> <h1 className="title">
<h1 className="title"> <FormattedMessage id="Services.Title" />
<FormattedMessage id="Services.Title" /> </h1>
</h1> <p className="descriptionStyle" style={{ textAlign: 'center', maxWidth: 1140 }}>
<p NEXPIE provide the Internet of Things (IoT) technology tools for helping your organization to
className="descriptionStyle" achieve the most benefit in Commercial Marketing.
style={{ textAlign: "center", maxWidth: 1140 }} </p>
> <div className="row">
NEXPIE provide the Internet of Things (IoT) technology tools for {[1, 2, 3].map((item, index) => (
helping your organization to achieve the most benefit in Commercial <Card key={index} />
Marketing. ))}
</p> </div>
<div className="row"> </div>
{[1, 2, 3].map((item, index) => ( );
<Card key={index} /> }
))}
</div>
</div>
);
}
} }
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"; // import { hidden } from 'ansi-colors';
const Card = () => { const Card = () => {
return ( return (
<div className="why-card"> <div className="why-card">
<figure className="image is-128x128"> <figure className="image is-128x128">
<img <img className="is-rounded" alt="" src="https://bulma.io/images/placeholders/128x128.png" />
className="is-rounded" </figure>
alt="" <h1 className="why-title">Connectivity</h1>
src="https://bulma.io/images/placeholders/128x128.png" <p className="why-description" style={{ textAlign: 'center' }}>
/> Connecting your device with NEXPIE IoT platform.
</figure> </p>
<h1 className="why-title">Connectivity</h1> </div>
<p className="why-description" style={{ textAlign: "center" }}> );
Connecting your device with NEXPIE IoT platform.
</p>
</div>
);
}; };
export default class WhyUs extends React.Component { export default class WhyUs extends React.Component {
render() { render() {
return ( return (
<div <div
className="section content-width" className="section content-width"
style={{ style={{
flexDirection: "column", flexDirection: 'column',
alignItems: "center", alignItems: 'center',
justifyContent: "space-evenly", justifyContent: 'space-evenly',
paddingBottom: "60px", paddingBottom: '60px',
overflow: "hidden" overflow: 'hidden',
}} }}>
> <h1 className="title">
<h1 className="title"> <FormattedMessage id="Why.Title" />
<FormattedMessage id="Why.Title" /> </h1>
</h1> <p className="descriptionStyle" style={{ textAlign: 'center', maxWidth: 1140 }}>
<p <FormattedMessage id="Why.Descrip" />
className="descriptionStyle" </p>
style={{ textAlign: "center", maxWidth: 1140 }} <div className="row">
> <div className="why-bg" />
<FormattedMessage id="Why.Descrip" /> {[1, 2, 3].map((item, index) => (
</p> <Card key={index} />
<div className="row"> ))}
<div className="why-bg" /> </div>
{[1, 2, 3].map((item, index) => ( </div>
<Card key={index} /> );
))} }
</div>
</div>
);
}
} }
src/components/Navbar.js
...@@ -9,15 +9,15 @@ export default class NavbarComponent extends Component { ...@@ -9,15 +9,15 @@ export default class NavbarComponent extends Component {
<Navbar fixed={'top'} style={{ backgroundColor: '#f8f8f8', padding: '0px 4%' }}> <Navbar fixed={'top'} style={{ backgroundColor: '#f8f8f8', padding: '0px 4%' }}>
<IconContext.Provider value={{ color: '#999999' }}> <IconContext.Provider value={{ color: '#999999' }}>
<Navbar.Container> <Navbar.Container>
<Navbar.Item href='#' renderAs='span'> <Navbar.Item href="#" renderAs="span">
<FiMapPin /> <FiMapPin />
<Text>Thai Summit Tower 14th Floor</Text> <Text>Thai Summit Tower 14th Floor</Text>
</Navbar.Item> </Navbar.Item>
<Navbar.Item href='#' renderAs='span'> <Navbar.Item href="#" renderAs="span">
<FiSmartphone /> <FiSmartphone />
<Text>+6661-421-1289</Text> <Text>+6661-421-1289</Text>
</Navbar.Item> </Navbar.Item>
<Navbar.Item href='#' renderAs='span'> <Navbar.Item href="#" renderAs="span">
<FiMail /> <FiMail />
<Text>contact@nexpie.com</Text> <Text>contact@nexpie.com</Text>
</Navbar.Item> </Navbar.Item>
...@@ -66,7 +66,7 @@ class CustomControls extends Component { ...@@ -66,7 +66,7 @@ class CustomControls extends Component {
onClick: () => scrollToSlide(i), onClick: () => scrollToSlide(i),
}; };
slidesNumbers.push( slidesNumbers.push(
<button type='button' {...buttonProps}> <button type="button" {...buttonProps}>
{i + 1} {i + 1}
</button> </button>
); );
...@@ -80,11 +80,11 @@ class CustomControls extends Component { ...@@ -80,11 +80,11 @@ class CustomControls extends Component {
return ( return (
<div className={className} style={style}> <div className={className} style={style}>
<button type='button' disabled={currentSlideIndex === 0} onClick={this.props.onPrev}> <button type="button" disabled={currentSlideIndex === 0} onClick={this.props.onPrev}>
previous previous
</button> </button>
{this.renderSlidesNumbers(currentSlideIndex)} {this.renderSlidesNumbers(currentSlideIndex)}
<button type='button' disabled={currentSlideIndex === slidesCount - 1} onClick={this.props.onNext}> <button type="button" disabled={currentSlideIndex === slidesCount - 1} onClick={this.props.onNext}>
next next
</button> </button>
</div> </div>
......
src/components/SimpleSlider.js
import React from "react"; import React from 'react';
import ReactDOM from "react-dom"; import OwlCarousel from 'react-owl-carousel';
import OwlCarousel from "react-owl-carousel";
const options = { const options = {
items: 4 items: 4,
}; };
class SimpleSlider extends React.Component { class SimpleSlider extends React.Component {
render() { render() {
return ( return (
<OwlCarousel className="owl-theme" loop margin={10} nav {...options}> <OwlCarousel className="owl-theme" loop margin={10} nav {...options}>
<div class="item"> <div class="item">
<img src="1.jpg" /> <img src="1.jpg" alt="img1" />
</div> </div>
<div class="item"> <div class="item">
<img src="2.jpg" /> <img src="2.jpg" alt="img2" />
</div> </div>
<div class="item"> <div class="item">
<img src="3.jpg" /> <img src="3.jpg" alt="img3" />
</div> </div>
<div class="item"> <div class="item">
<img src="4.jpg" /> <img src="4.jpg" alt="img4" />
</div> </div>
<div class="item"> <div class="item">
<img src="5.jpg" /> <img src="5.jpg" alt="img5" />
</div> </div>
</OwlCarousel> </OwlCarousel>
); );
} }
} }
export default SimpleSlider; export default SimpleSlider;
src/pages/Homepage.js
import React, { Component } from "react"; import React, { Component } from 'react';
import Banner from "../components/Home/Banner"; import Banner from '../components/Home/Banner';
import About from "../components/Home/About"; import About from '../components/Home/About';
import { Scroller, Section } from "react-fully-scrolled"; import WhyUs from 'components/Home/WhyUs';
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 '../utils/WindowDimension';
import WindowDimension from "../components/utils/WindowDimension"; import SimpleSlider from 'components/SimpleSlider';
import SimpleSlider from "components/SimpleSlider"; import 'owl.carousel/dist/assets/owl.carousel.css';
import "owl.carousel/dist/assets/owl.carousel.css"; import 'owl.carousel/dist/assets/owl.theme.default.css';
import "owl.carousel/dist/assets/owl.theme.default.css"; import { Fullpage, Slide } from 'fullpage-react';
class Homepage extends Component { const fullPageOptions = {
constructor(props) { scrollSensitivity: 0,
super(props); touchSensitivity: 0,
this.fullPageRef = React.createRef(); scrollSpeed: 375,
} hideScrollBars: false,
enableArrowKeys: true,
};
const baseStyle = {
alignItems: 'center',
display: 'flex',
justifyContent: 'center',
};
onControlsClick = () => { const slides = [
this.fullPageRef.current.scrollToSlide(1); <Slide style={{ ...baseStyle }}>
}; <Banner />
</Slide>,
<Slide style={{ ...baseStyle }}>
<About />
</Slide>,
<Slide style={{ ...baseStyle }}>
<WhyUs />
</Slide>,
<Slide style={{ ...baseStyle }}>
<Services />
</Slide>,
<Slide style={{ ...baseStyle }}>
<Features />
</Slide>,
<Slide style={{ ...baseStyle }}>
<Packages />
</Slide>,
];
fullPageOptions.slides = slides;
class Homepage extends Component {
constructor(props) {
super(props);
this.fullPageRef = React.createRef();
}
render() { onControlsClick = () => {
const baseStyle = { this.fullPageRef.current.scrollToSlide(1);
display: "flex", };
justifyContent: "stretch"
};
return ( render() {
<div> return (
{this.props.windowWidth <= 768 ? ( <>
<> {this.props.windowWidth <= 768 ? (
<Banner /> <>
<About /> <Banner />
<WhyUs /> <About />
<Services /> <WhyUs />
<Features /> <Services />
<Packages /> <Features />
</> <Packages />
) : ( </>
<Scroller ) : (
ref={this.fullPageRef} <Fullpage ref={this.fullPageRef} {...fullPageOptions} />
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 WindowDimension(Homepage); export default WindowDimension(Homepage);
src/pages/HomepageV2.js 0 → 100644
import React, { Component } from 'react';
import Banner from '../components/Home/Banner';
import About from '../components/Home/About';
import { Scroller, Section } from 'react-fully-scrolled';
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 '../utils/WindowDimension';
import SimpleSlider from 'components/SimpleSlider';
import 'owl.carousel/dist/assets/owl.carousel.css';
import 'owl.carousel/dist/assets/owl.theme.default.css';
import { FullPage, Slide } from 'react-full-page';
class Homepage extends Component {
constructor(props) {
super(props);
this.fullPageRef = React.createRef();
}
onControlsClick = () => {
this.fullPageRef.current.scrollToSlide(1);
};
render() {
const baseStyle = {
alignItems: 'center',
display: 'flex',
justifyContent: 'center',
};
return (
<>
{this.props.windowWidth <= 768 ? (
<>
<Banner />
<About />
<WhyUs />
<Services />
<Features />
<Packages />
</>
) : (
<FullPage ref={this.fullPageRef}>
<Slide style={{ ...baseStyle }}>
<Banner />
</Slide>
<Slide style={{ ...baseStyle }}>
<About />
</Slide>
<Slide style={{ ...baseStyle }}>
<WhyUs />
</Slide>
<Slide style={{ ...baseStyle }}>
<Services />
</Slide>
<Slide style={{ ...baseStyle }}>
<Features />
</Slide>
<Slide style={{ ...baseStyle }}>
<Packages />
</Slide>
</FullPage>
)}
</>
);
}
}
export default WindowDimension(Homepage);
src/pages/Homepage_backup.js 0 → 100644
import React, { Component } from 'react';
import Banner from '../components/Home/Banner';
import About from '../components/Home/About';
import { Scroller, Section } from 'react-fully-scrolled';
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 '../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) {
super(props);
this.fullPageRef = React.createRef();
}
onControlsClick = () => {
this.fullPageRef.current.scrollToSlide(1);
};
render() {
const baseStyle = {
display: 'flex',
justifyContent: 'stretch',
};
return (
<div>
{this.props.windowWidth <= 768 ? (
<>
<Banner />
<About />
<WhyUs />
<Services />
<Features />
<Packages />
</>
) : (
<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 WindowDimension(Homepage);
src/scss/style.scss
@import "~react-bulma-components/src/index.sass"; @import '~react-bulma-components/src/index.sass';
@import "_variables.scss"; @import '_variables.scss';
// @import '../../node_modules/bulma/bulma.sass'; // @import '../../node_modules/bulma/bulma.sass';
// @import '../../node_modules/bulma/sass/utilities/_all.sass'; // @import '../../node_modules/bulma/sass/utilities/_all.sass';
// @import '../../node_modules/bulma/sass/base/_all.sass'; // @import '../../node_modules/bulma/sass/base/_all.sass';
...@@ -8,358 +8,377 @@ ...@@ -8,358 +8,377 @@
// @import '../../node_modules/bulma/sass/elements/title.sass'; // @import '../../node_modules/bulma/sass/elements/title.sass';
// @import '../../node_modules/bulma/sass/form/_all.sass'; // @import '../../node_modules/bulma/sass/form/_all.sass';
body { body {
font-family: "Kanit", sans-serif; font-family: 'Kanit', sans-serif;
} }
// ::-webkit-scrollbar {
// display: none;
// }
.dropdown-menu { .dropdown-menu {
min-width: 5rem; min-width: 5rem;
} }
.button.is-white { .button.is-white {
background-color: $white; background-color: $white;
border-color: transparent; border-color: transparent;
color: $grey; color: $grey;
} }
.section { .section {
width: 100vw; width: 100vw;
min-height: 100vh; min-height: 100vh;
height: 100%; height: 100%;
display: flex; display: flex;
justify-content: center; justify-content: center;
} }
.content-width { .content-width {
width: 1396px; width: 1396px;
max-width: 100%; max-width: 100%;
margin: 0 auto; margin: 0 auto;
position: relative; position: relative;
padding: 0 15px; padding: 0 15px;
} }
.descriptionStyle { .descriptionStyle {
font-size: 22px; font-size: 22px;
color: $grey; color: $grey;
font-weight: 100; font-weight: 100;
} }
.title { .title {
font-size: 35px; font-size: 35px;
color: $primary; color: $primary;
} }
.banner-text-container { .banner-text-container {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
margin-top: 50px; margin-top: 50px;
.banner-title { .banner-title {
font-size: 72px; font-size: 72px;
color: $white; color: $white;
} }
.banner-descrip-wrapper { .banner-descrip-wrapper {
@extend .row; @extend .row;
justify-content: start !important; justify-content: start !important;
font-size: 60px; font-size: 60px;
:first-child { :first-child {
color: #ffcc01; color: #ffcc01;
margin-right: 15px; margin-right: 15px;
} }
:nth-child(2) { :nth-child(2) {
color: $white; color: $white;
} }
} }
} }
.why-card { .why-card {
max-width: 300px; max-width: 300px;
min-width: 245px; min-width: 245px;
height: 360px; height: 360px;
border-radius: 6px; border-radius: 6px;
box-shadow: 0 52px 40px 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;
padding: 40px; padding: 40px;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
justify-content: space-evenly; justify-content: space-evenly;
align-items: center; align-items: center;
.why-title { .why-title {
font-size: 24px; font-size: 24px;
color: $grey; color: $grey;
} }
.why-description { .why-description {
font-size: 18px; font-size: 18px;
color: $lightgrey; color: $lightgrey;
} }
} }
.service-card { .service-card {
max-width: 300px; max-width: 300px;
min-width: 265px; min-width: 265px;
height: 399px; height: 399px;
border-radius: 6px; border-radius: 6px;
box-shadow: 0 52px 40px 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;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
overflow: hidden; overflow: hidden;
&:first-child { &:first-child {
background-color: #42b3e5; background-color: #42b3e5;
} }
&:nth-child(2) { &:nth-child(2) {
background-color: #0384ce; background-color: #0384ce;
} }
&:nth-child(3) { &:nth-child(3) {
background-color: #3156a3; background-color: #3156a3;
} }
.img-wrapper { .img-wrapper {
background-color: $white; background-color: $white;
width: 100%; width: 100%;
height: 100%; height: 100%;
margin: 60 0; margin: 60 0;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
} }
.service-wrapper { .service-wrapper {
width: 100%; width: 100%;
max-height: 170px; max-height: 170px;
color: $white; color: $white;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
padding: 30px 40px 40px 40px; padding: 30px 40px 40px 40px;
.service-title { .service-title {
font-size: 24px; font-size: 24px;
font-weight: 500; font-weight: 500;
} }
.service-description { .service-description {
font-size: 18px; font-size: 18px;
text-align: center; text-align: center;
font-weight: 100; font-weight: 100;
} }
} }
} }
.why-bg { .why-bg {
width: 85%; width: 85%;
height: 180px; height: 180px;
border-radius: 6px; border-radius: 6px;
background-image: linear-gradient(276deg, #3473bf, #0891df); background-image: linear-gradient(276deg, #3473bf, #0891df);
position: absolute; position: absolute;
} }
.feature-container { .feature-container {
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
justify-content: center; justify-content: center;
.feature-card-hidden { .feature-card-hidden {
width: 40%; width: 40%;
height: 130px; height: 130px;
margin: 0 35px 20px 35px; margin: 0 35px 20px 35px;
} }
.feature-card { .feature-card {
width: 40%; width: 40%;
height: 130px; height: 130px;
margin: 0 35px 20px 35px; margin: 0 35px 20px 35px;
border-radius: 6px; border-radius: 6px;
border: solid 1px rgba(66, 179, 229, 0.35); border: solid 1px rgba(66, 179, 229, 0.35);
background-color: rgba(66, 179, 229, 0.1); background-color: rgba(66, 179, 229, 0.1);
padding: 10px; padding: 10px;
.feature-img { .feature-img {
@extend .center; @extend .center;
.image { .image {
margin: 10px; margin: 10px;
} }
} }
.feature-text-wrapper { .feature-text-wrapper {
padding: 10px 20px 20px 20px; padding: 10px 20px 20px 20px;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
justify-content: center; justify-content: center;
max-width: 400px; max-width: 400px;
.feature-title { .feature-title {
font-size: 22px; font-size: 22px;
letter-spacing: 1px; letter-spacing: 1px;
-webkit-background-clip: text; -webkit-background-clip: text;
background-clip: text; background-clip: text;
-webkit-text-fill-color: transparent; -webkit-text-fill-color: transparent;
background-image: linear-gradient(277deg, #3156a3, #3984dd); background-image: linear-gradient(277deg, #3156a3, #3984dd);
} }
.feature-descrip { .feature-descrip {
color: #777777; color: #777777;
display: block; /* Fallback for non-webkit */ display: block; /* Fallback for non-webkit */
display: -webkit-box; display: -webkit-box;
max-width: 400px; max-width: 400px;
height: 4; /* Fallback for non-webkit */ height: 4; /* Fallback for non-webkit */
margin: 0 auto; margin: 0 auto;
font-size: 18px; font-size: 18px;
line-height: 1.33; line-height: 1.33;
-webkit-line-clamp: 4; -webkit-line-clamp: 4;
-webkit-box-orient: vertical; -webkit-box-orient: vertical;
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
} }
} }
} }
} }
.tab-container { .tab-container {
@extend .row; @extend .row;
.tab { .tab {
font-size: 18px; font-size: 18px;
line-height: 1.56; line-height: 1.56;
text-align: center; text-align: center;
color: #4a4a4a; color: #4a4a4a;
padding: 0 0 10px 0; padding: 0 0 10px 0;
margin: 0 20px; margin: 0 20px;
cursor: pointer; cursor: pointer;
} }
.active { .active {
color: #05366c; color: #05366c;
border-bottom: 1px solid #05366c; border-bottom: 1px solid #05366c;
} }
} }
.package-card { .package-card {
width: 300px; width: 300px;
height: 450px; height: 450px;
border-radius: 6px; border-radius: 6px;
box-shadow: 0 52px 40px 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;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
justify-content: space-between; justify-content: space-between;
margin: 0 20px; margin: 0 20px;
.text-wrapper { .text-wrapper {
color: #757575; color: #757575;
.plan-title { .plan-title {
font-size: 24px; font-size: 24px;
font-weight: bold; font-weight: bold;
text-align: center; text-align: center;
} }
.plan-descrip { .plan-descrip {
font-size: 13px; font-size: 13px;
text-align: center; text-align: center;
} }
} }
.price-wrapper { .price-wrapper {
width: 120px; width: 120px;
height: 120px; height: 120px;
background-image: linear-gradient(306deg, #3473bf, #0891df); background-image: linear-gradient(306deg, #3473bf, #0891df);
border-radius: 100px; border-radius: 100px;
@extend .center; @extend .center;
flex-direction: column; flex-direction: column;
color: $white; color: $white;
align-self: center; align-self: center;
.price { .price {
@extend .row; @extend .row;
font-weight: bold; font-weight: bold;
font-size: 20px; font-size: 20px;
align-items: baseline; align-items: baseline;
h1 { h1 {
font-size: 45px; font-size: 45px;
} }
} }
} }
.package-details { .package-details {
font-size: 14px; font-size: 14px;
color: #757575; color: #757575;
.package-detail { .package-detail {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
} }
} }
.btn-wrapper { .btn-wrapper {
width: 250px; width: 250px;
height: 54px; height: 54px;
border-radius: 6px; border-radius: 6px;
background-image: linear-gradient(277deg, #3473bf, #0891df); background-image: linear-gradient(277deg, #3473bf, #0891df);
align-self: center; align-self: center;
@extend .center; @extend .center;
color: $white; color: $white;
cursor: pointer; cursor: pointer;
div { div {
font-size: 18px; font-size: 18px;
font-weight: bold; font-weight: bold;
text-align: center; text-align: center;
} }
} }
&:hover { &:hover {
background-image: linear-gradient(317deg, #3473bf, #0891df); background-image: linear-gradient(317deg, #3473bf, #0891df);
.text-wrapper { .text-wrapper {
color: $white; color: $white;
} }
.price-wrapper, .price-wrapper,
.btn-wrapper { .btn-wrapper {
color: #757575; color: #757575;
background-image: none; background-image: none;
background-color: $white; background-color: $white;
} }
.package-details { .package-details {
color: $white; color: $white;
} }
} }
} }
.owl-carousel .owl-stage-outer { .owl-carousel .owl-stage-outer {
overflow: visible; overflow: visible;
} }
.center { .center {
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
} }
.row { .row {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
justify-content: space-evenly; justify-content: space-evenly;
} }
@media screen and (max-width: 1087px) { @media screen and (max-width: 1087px) {
.navbar-menu { .navbar-menu {
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: 992px) {
} }
@media screen and (max-width: 768px) { @media screen and (max-width: 768px) {
.descriptionStyle { .descriptionStyle {
font-size: 15px; font-size: 15px;
} }
.title { .title {
font-size: 24px; font-size: 24px;
} }
.feature-container .feature-card-hidden { .feature-container .feature-card-hidden {
display: none; display: none;
} }
.feature-container { .feature-container {
.feature-card { .feature-card {
width: 90%; width: 90%;
&:first-child { &:first-child {
margin-top: 30px; margin-top: 30px;
} }
.feature-text-wrapper { .feature-text-wrapper {
.feature-title { .feature-title {
font-size: 16px; font-size: 16px;
} }
.feature-descrip { .feature-descrip {
font-size: 12px; font-size: 12px;
} }
} }
} }
} }
.banner-text-container { .banner-text-container {
align-items: center; align-items: center;
.banner-title { .banner-title {
font-size: 30px; font-size: 30px;
} }
.banner-descrip-wrapper { .banner-descrip-wrapper {
font-size: 24px; font-size: 24px;
margin-top: 30px; margin-top: 30px;
} }
} }
.tab-container .tab { .tab-container .tab {
font-size: 12px; font-size: 12px;
} }
}
.navbar-item {
padding: 0.5rem 0.15rem;
} }
// @media screen and (min-width: 1023px) {
// .navbar-burger {
// margin-left: auto;
// }
// }
// .navbar-burger {
// margin-left: 0;
// }
// .dropdown-item { // .dropdown-item {
// display: 'flex'; // display: 'flex';
// flex: 1; // flex: 1;
......
src/serviceWorker.js
...@@ -11,125 +11,118 @@ ...@@ -11,125 +11,118 @@
// opt-in, read https://bit.ly/CRA-PWA // opt-in, read https://bit.ly/CRA-PWA
const isLocalhost = Boolean( const isLocalhost = Boolean(
window.location.hostname === 'localhost' || window.location.hostname === 'localhost' ||
// [::1] is the IPv6 localhost address. // [::1] is the IPv6 localhost address.
window.location.hostname === '[::1]' || window.location.hostname === '[::1]' ||
// 127.0.0.1/8 is considered localhost for IPv4. // 127.0.0.1/8 is considered localhost for IPv4.
window.location.hostname.match( window.location.hostname.match(/^127(?:\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3}$/)
/^127(?:\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3}$/
)
); );
export function register(config) { export function register(config) {
if (process.env.NODE_ENV === 'production' && 'serviceWorker' in navigator) { if (process.env.NODE_ENV === 'production' && 'serviceWorker' in navigator) {
// The URL constructor is available in all browsers that support SW. // The URL constructor is available in all browsers that support SW.
const publicUrl = new URL(process.env.PUBLIC_URL, window.location.href); const publicUrl = new URL(process.env.PUBLIC_URL, window.location.href);
if (publicUrl.origin !== window.location.origin) { if (publicUrl.origin !== window.location.origin) {
// Our service worker won't work if PUBLIC_URL is on a different origin // Our service worker won't work if PUBLIC_URL is on a different origin
// from what our page is served on. This might happen if a CDN is used to // from what our page is served on. This might happen if a CDN is used to
// serve assets; see https://github.com/facebook/create-react-app/issues/2374 // serve assets; see https://github.com/facebook/create-react-app/issues/2374
return; return;
} }
window.addEventListener('load', () => { window.addEventListener('load', () => {
const swUrl = `${process.env.PUBLIC_URL}/service-worker.js`; const swUrl = `${process.env.PUBLIC_URL}/service-worker.js`;
if (isLocalhost) { if (isLocalhost) {
// This is running on localhost. Let's check if a service worker still exists or not. // This is running on localhost. Let's check if a service worker still exists or not.
checkValidServiceWorker(swUrl, config); checkValidServiceWorker(swUrl, config);
// Add some additional logging to localhost, pointing developers to the // Add some additional logging to localhost, pointing developers to the
// service worker/PWA documentation. // service worker/PWA documentation.
navigator.serviceWorker.ready.then(() => { navigator.serviceWorker.ready.then(() => {
console.log( console.log(
'This web app is being served cache-first by a service ' + 'This web app is being served cache-first by a service ' +
'worker. To learn more, visit https://bit.ly/CRA-PWA' 'worker. To learn more, visit https://bit.ly/CRA-PWA'
); );
}); });
} else { } else {
// Is not localhost. Just register service worker // Is not localhost. Just register service worker
registerValidSW(swUrl, config); registerValidSW(swUrl, config);
} }
}); });
} }
} }
function registerValidSW(swUrl, config) { function registerValidSW(swUrl, config) {
navigator.serviceWorker navigator.serviceWorker
.register(swUrl) .register(swUrl)
.then(registration => { .then(registration => {
registration.onupdatefound = () => { registration.onupdatefound = () => {
const installingWorker = registration.installing; const installingWorker = registration.installing;
if (installingWorker == null) { if (installingWorker == null) {
return; return;
} }
installingWorker.onstatechange = () => { installingWorker.onstatechange = () => {
if (installingWorker.state === 'installed') { if (installingWorker.state === 'installed') {
if (navigator.serviceWorker.controller) { if (navigator.serviceWorker.controller) {
// At this point, the updated precached content has been fetched, // At this point, the updated precached content has been fetched,
// but the previous service worker will still serve the older // but the previous service worker will still serve the older
// content until all client tabs are closed. // content until all client tabs are closed.
console.log( console.log(
'New content is available and will be used when all ' + 'New content is available and will be used when all ' +
'tabs for this page are closed. See https://bit.ly/CRA-PWA.' 'tabs for this page are closed. See https://bit.ly/CRA-PWA.'
); );
// Execute callback // Execute callback
if (config && config.onUpdate) { if (config && config.onUpdate) {
config.onUpdate(registration); config.onUpdate(registration);
} }
} else { } else {
// At this point, everything has been precached. // At this point, everything has been precached.
// It's the perfect time to display a // It's the perfect time to display a
// "Content is cached for offline use." message. // "Content is cached for offline use." message.
console.log('Content is cached for offline use.'); console.log('Content is cached for offline use.');
// Execute callback // Execute callback
if (config && config.onSuccess) { if (config && config.onSuccess) {
config.onSuccess(registration); config.onSuccess(registration);
} }
} }
} }
}; };
}; };
}) })
.catch(error => { .catch(error => {
console.error('Error during service worker registration:', error); console.error('Error during service worker registration:', error);
}); });
} }
function checkValidServiceWorker(swUrl, config) { function checkValidServiceWorker(swUrl, config) {
// Check if the service worker can be found. If it can't reload the page. // Check if the service worker can be found. If it can't reload the page.
fetch(swUrl) fetch(swUrl)
.then(response => { .then(response => {
// Ensure service worker exists, and that we really are getting a JS file. // Ensure service worker exists, and that we really are getting a JS file.
const contentType = response.headers.get('content-type'); const contentType = response.headers.get('content-type');
if ( if (response.status === 404 || (contentType != null && contentType.indexOf('javascript') === -1)) {
response.status === 404 || // No service worker found. Probably a different app. Reload the page.
(contentType != null && contentType.indexOf('javascript') === -1) navigator.serviceWorker.ready.then(registration => {
) { registration.unregister().then(() => {
// No service worker found. Probably a different app. Reload the page. window.location.reload();
navigator.serviceWorker.ready.then(registration => { });
registration.unregister().then(() => { });
window.location.reload(); } else {
}); // Service worker found. Proceed as normal.
}); registerValidSW(swUrl, config);
} else { }
// Service worker found. Proceed as normal. })
registerValidSW(swUrl, config); .catch(() => {
} console.log('No internet connection found. App is running in offline mode.');
}) });
.catch(() => {
console.log(
'No internet connection found. App is running in offline mode.'
);
});
} }
export function unregister() { export function unregister() {
if ('serviceWorker' in navigator) { if ('serviceWorker' in navigator) {
navigator.serviceWorker.ready.then(registration => { navigator.serviceWorker.ready.then(registration => {
registration.unregister(); registration.unregister();
}); });
} }
} }
src/components/utils/WindowDimension.js → src/utils/WindowDimension.js
import React, { Component } from "react"; import React, { Component } from 'react';
export default function WindowDimensions(WrappedComponent) { export default function WindowDimensions(WrappedComponent) {
return class extends Component { return class extends Component {
state = { width: 0, height: 0 }; state = { width: 0, height: 0 };
componentDidMount() { componentDidMount() {
this.updateWindowDimensions(); this.updateWindowDimensions();
window.addEventListener("resize", this.updateWindowDimensions); window.addEventListener('resize', this.updateWindowDimensions);
} }
componentWillUnmount() { componentWillUnmount() {
window.removeEventListener("resize", this.updateWindowDimensions); window.removeEventListener('resize', this.updateWindowDimensions);
} }
updateWindowDimensions = () => { updateWindowDimensions = () => {
this.setState({ width: window.innerWidth, height: window.innerHeight }); this.setState({ width: window.innerWidth, height: window.innerHeight });
}; };
render() { render() {
return ( return (
<WrappedComponent <WrappedComponent
{...this.props} {...this.props}
windowWidth={this.state.width} windowWidth={this.state.width}
windowHeight={this.state.height} windowHeight={this.state.height}
isMobileSized={this.state.width < 770} isMobileSized={this.state.width <= 769}
/> isTabletSized={this.state.width <= 1024}
); />
} );
}; }
};
} }
yarn.lock
...@@ -928,7 +928,7 @@ ...@@ -928,7 +928,7 @@
dependencies: dependencies:
regenerator-runtime "^0.13.2" regenerator-runtime "^0.13.2"
"@babel/runtime@^7.1.2", "@babel/runtime@^7.4.0", "@babel/runtime@^7.4.5": "@babel/runtime@^7.1.2", "@babel/runtime@^7.2.0", "@babel/runtime@^7.4.0", "@babel/runtime@^7.4.5":
version "7.5.5" version "7.5.5"
resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.5.5.tgz#74fba56d35efbeca444091c7850ccd494fd2f132" resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.5.5.tgz#74fba56d35efbeca444091c7850ccd494fd2f132"
integrity sha512-28QvEGyQyNkB0/m2B4FU7IEZGK2NUrcMtT6BZEFALTguLk+AUT6ofsHtPk5QyjAdUkpMJ+/Em+quwz4HOt30AQ== integrity sha512-28QvEGyQyNkB0/m2B4FU7IEZGK2NUrcMtT6BZEFALTguLk+AUT6ofsHtPk5QyjAdUkpMJ+/Em+quwz4HOt30AQ==
...@@ -4394,6 +4394,15 @@ fstream@^1.0.0, fstream@^1.0.12: ...@@ -4394,6 +4394,15 @@ fstream@^1.0.0, fstream@^1.0.12:
mkdirp ">=0.5 0" mkdirp ">=0.5 0"
rimraf "2" rimraf "2"
fullpage-react@^3.1.0:
version "3.1.0"
resolved "https://registry.yarnpkg.com/fullpage-react/-/fullpage-react-3.1.0.tgz#1727b61ed57a3822ff41e5c5e1eb7f7b1a3e19c4"
integrity sha512-GG3OxtaVx1ripZPcExIrnVjhoSfU0MlI2pQTKngtV9qed+bRYQTMaQ/LIYNljNwY9JPK1o4WugXpOvzQ2Hun6g==
dependencies:
react-fns "^1.4.0"
scroll-swipe "0.0.17"
window-or-global "^1.0.1"
function-bind@^1.1.1: function-bind@^1.1.1:
version "1.1.1" version "1.1.1"
resolved "https://registry.yarnpkg.com/function-bind/-/function-bind-1.1.1.tgz#a56899d3ea3c9bab874bb9773b7c5ede92f4895d" resolved "https://registry.yarnpkg.com/function-bind/-/function-bind-1.1.1.tgz#a56899d3ea3c9bab874bb9773b7c5ede92f4895d"
...@@ -6026,6 +6035,13 @@ json-stringify-safe@~5.0.1: ...@@ -6026,6 +6035,13 @@ json-stringify-safe@~5.0.1:
resolved "https://registry.yarnpkg.com/json-stringify-safe/-/json-stringify-safe-5.0.1.tgz#1296a2d58fd45f19a0f6ce01d65701e2c735b6eb" resolved "https://registry.yarnpkg.com/json-stringify-safe/-/json-stringify-safe-5.0.1.tgz#1296a2d58fd45f19a0f6ce01d65701e2c735b6eb"
integrity sha1-Epai1Y/UXxmg9s4B1lcB4sc1tus= integrity sha1-Epai1Y/UXxmg9s4B1lcB4sc1tus=
json2mq@^0.2.0:
version "0.2.0"
resolved "https://registry.yarnpkg.com/json2mq/-/json2mq-0.2.0.tgz#b637bd3ba9eabe122c83e9720483aeb10d2c904a"
integrity sha1-tje9O6nqvhIsg+lyBIOusQ0skEo=
dependencies:
string-convert "^0.2.0"
json3@^3.3.2: json3@^3.3.2:
version "3.3.2" version "3.3.2"
resolved "https://registry.yarnpkg.com/json3/-/json3-3.3.2.tgz#3c0434743df93e2f5c42aee7b19bcb483575f4e1" resolved "https://registry.yarnpkg.com/json3/-/json3-3.3.2.tgz#3c0434743df93e2f5c42aee7b19bcb483575f4e1"
...@@ -8331,6 +8347,11 @@ qs@6.5.2, qs@~6.5.2: ...@@ -8331,6 +8347,11 @@ qs@6.5.2, qs@~6.5.2:
resolved "https://registry.yarnpkg.com/qs/-/qs-6.5.2.tgz#cb3ae806e8740444584ef154ce8ee98d403f3e36" resolved "https://registry.yarnpkg.com/qs/-/qs-6.5.2.tgz#cb3ae806e8740444584ef154ce8ee98d403f3e36"
integrity sha512-N5ZAX4/LxJmF+7wN74pUD6qAh9/wnvdQcjq9TZjevvXzSUo7bfmw91saqMjzGS2xq91/odN2dW/WOl7qQHNDGA== integrity sha512-N5ZAX4/LxJmF+7wN74pUD6qAh9/wnvdQcjq9TZjevvXzSUo7bfmw91saqMjzGS2xq91/odN2dW/WOl7qQHNDGA==
qs@^6.5.1:
version "6.7.0"
resolved "https://registry.yarnpkg.com/qs/-/qs-6.7.0.tgz#41dc1a015e3d581f1621776be31afb2876a9b1bc"
integrity sha512-VCdBRNFTX1fyE7Nb6FYoURo/SPe62QCaAyzJvUjwRaIsc+NePBEniHlvxFmmX56+HZphIGtV0XeCirBtpDrTyQ==
querystring-es3@^0.2.0: querystring-es3@^0.2.0:
version "0.2.1" version "0.2.1"
resolved "https://registry.yarnpkg.com/querystring-es3/-/querystring-es3-0.2.1.tgz#9ec61f79049875707d69414596fd907a4d711e73" resolved "https://registry.yarnpkg.com/querystring-es3/-/querystring-es3-0.2.1.tgz#9ec61f79049875707d69414596fd907a4d711e73"
...@@ -8474,6 +8495,14 @@ react-error-overlay@^5.1.6: ...@@ -8474,6 +8495,14 @@ react-error-overlay@^5.1.6:
resolved "https://registry.yarnpkg.com/react-error-overlay/-/react-error-overlay-5.1.6.tgz#0cd73407c5d141f9638ae1e0c63e7b2bf7e9929d" resolved "https://registry.yarnpkg.com/react-error-overlay/-/react-error-overlay-5.1.6.tgz#0cd73407c5d141f9638ae1e0c63e7b2bf7e9929d"
integrity sha512-X1Y+0jR47ImDVr54Ab6V9eGk0Hnu7fVWGeHQSOXHf/C2pF9c6uy3gef8QUeuUiWlNb0i08InPSE5a/KJzNzw1Q== integrity sha512-X1Y+0jR47ImDVr54Ab6V9eGk0Hnu7fVWGeHQSOXHf/C2pF9c6uy3gef8QUeuUiWlNb0i08InPSE5a/KJzNzw1Q==
react-fns@^1.4.0:
version "1.4.0"
resolved "https://registry.yarnpkg.com/react-fns/-/react-fns-1.4.0.tgz#7b74017f9850849560dfe98f98bba3f7948495b5"
integrity sha512-Cchvz3d6Hh9Ho8SPQOU3/HDeiL/D/QaHozs0X0lePOI2yPoT15GFEVUbz3RHoDsnyUp8HA5A7HAKEPx3nggs8w==
dependencies:
qs "^6.5.1"
react-media "^1.6.1"
react-full-page@^0.1.7: react-full-page@^0.1.7:
version "0.1.7" version "0.1.7"
resolved "https://registry.yarnpkg.com/react-full-page/-/react-full-page-0.1.7.tgz#bfe8c04c07c2668d70f7399d6641aedae81baa8e" resolved "https://registry.yarnpkg.com/react-full-page/-/react-full-page-0.1.7.tgz#bfe8c04c07c2668d70f7399d6641aedae81baa8e"
...@@ -8516,6 +8545,16 @@ react-is@^16.6.0, react-is@^16.7.0, react-is@^16.8.1, react-is@^16.8.4, react-is ...@@ -8516,6 +8545,16 @@ react-is@^16.6.0, react-is@^16.7.0, react-is@^16.8.1, react-is@^16.8.4, react-is
resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.8.6.tgz#5bbc1e2d29141c9fbdfed456343fe2bc430a6a16" resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.8.6.tgz#5bbc1e2d29141c9fbdfed456343fe2bc430a6a16"
integrity sha512-aUk3bHfZ2bRSVFFbbeVS4i+lNPZr3/WM5jT2J5omUVV1zzcs1nAaf3l51ctA5FFvCRbhrH0bdAsRRQddFJZPtA== integrity sha512-aUk3bHfZ2bRSVFFbbeVS4i+lNPZr3/WM5jT2J5omUVV1zzcs1nAaf3l51ctA5FFvCRbhrH0bdAsRRQddFJZPtA==
react-media@^1.6.1:
version "1.9.2"
resolved "https://registry.yarnpkg.com/react-media/-/react-media-1.9.2.tgz#423ee12f952e1d69f1b994a58d3cbed21a92b370"
integrity sha512-JUYECMcJIm0V61LSVKd1e+II4ZTYO0GuR7xtlvKETlmThZ416BqZjZdJ1uGqgmMAGFeJ3TG4TX/3Kg4qbR3EJw==
dependencies:
"@babel/runtime" "^7.2.0"
invariant "^2.2.2"
json2mq "^0.2.0"
prop-types "^15.5.10"
react-owl-carousel@^2.3.1: react-owl-carousel@^2.3.1:
version "2.3.1" version "2.3.1"
resolved "https://registry.yarnpkg.com/react-owl-carousel/-/react-owl-carousel-2.3.1.tgz#5b8e7459289e29e89d4d6cf359ddf05edf050b5f" resolved "https://registry.yarnpkg.com/react-owl-carousel/-/react-owl-carousel-2.3.1.tgz#5b8e7459289e29e89d4d6cf359ddf05edf050b5f"
...@@ -9159,6 +9198,11 @@ schema-utils@^1.0.0: ...@@ -9159,6 +9198,11 @@ schema-utils@^1.0.0:
ajv-errors "^1.0.0" ajv-errors "^1.0.0"
ajv-keywords "^3.1.0" ajv-keywords "^3.1.0"
scroll-swipe@0.0.17:
version "0.0.17"
resolved "https://registry.yarnpkg.com/scroll-swipe/-/scroll-swipe-0.0.17.tgz#31bc1cb74f174a3d596a9a942a05075de54e4285"
integrity sha512-qflUt5hxgFGzZpUoHyrDsXA3nBFEy9yOeDTlg7x826owdEDGlJqIqdjyNuxtCNRHr/Ute8AQ6NdCRw4j3hOqvA==
scss-tokenizer@^0.2.3: scss-tokenizer@^0.2.3:
version "0.2.3" version "0.2.3"
resolved "https://registry.yarnpkg.com/scss-tokenizer/-/scss-tokenizer-0.2.3.tgz#8eb06db9a9723333824d3f5530641149847ce5d1" resolved "https://registry.yarnpkg.com/scss-tokenizer/-/scss-tokenizer-0.2.3.tgz#8eb06db9a9723333824d3f5530641149847ce5d1"
...@@ -9627,6 +9671,11 @@ stream-shift@^1.0.0: ...@@ -9627,6 +9671,11 @@ stream-shift@^1.0.0:
resolved "https://registry.yarnpkg.com/stream-shift/-/stream-shift-1.0.0.tgz#d5c752825e5367e786f78e18e445ea223a155952" resolved "https://registry.yarnpkg.com/stream-shift/-/stream-shift-1.0.0.tgz#d5c752825e5367e786f78e18e445ea223a155952"
integrity sha1-1cdSgl5TZ+eG944Y5EXqIjoVWVI= integrity sha1-1cdSgl5TZ+eG944Y5EXqIjoVWVI=
string-convert@^0.2.0:
version "0.2.1"
resolved "https://registry.yarnpkg.com/string-convert/-/string-convert-0.2.1.tgz#6982cc3049fbb4cd85f8b24568b9d9bf39eeff97"
integrity sha1-aYLMMEn7tM2F+LJFaLnZvznu/5c=
string-length@^2.0.0: string-length@^2.0.0:
version "2.0.0" version "2.0.0"
resolved "https://registry.yarnpkg.com/string-length/-/string-length-2.0.0.tgz#d40dbb686a3ace960c1cffca562bf2c45f8363ed" resolved "https://registry.yarnpkg.com/string-length/-/string-length-2.0.0.tgz#d40dbb686a3ace960c1cffca562bf2c45f8363ed"
...@@ -10592,6 +10641,11 @@ wide-align@^1.1.0: ...@@ -10592,6 +10641,11 @@ wide-align@^1.1.0:
dependencies: dependencies:
string-width "^1.0.2 || 2" string-width "^1.0.2 || 2"
window-or-global@^1.0.1:
version "1.0.1"
resolved "https://registry.yarnpkg.com/window-or-global/-/window-or-global-1.0.1.tgz#dbe45ba2a291aabc56d62cf66c45b7fa322946de"
integrity sha1-2+RboqKRqrxW1iz2bEW3+jIpRt4=
wordwrap@~0.0.2: wordwrap@~0.0.2:
version "0.0.3" version "0.0.3"
resolved "https://registry.yarnpkg.com/wordwrap/-/wordwrap-0.0.3.tgz#a3d5da6cd5c0bc0008d37234bbaf1bed63059107" resolved "https://registry.yarnpkg.com/wordwrap/-/wordwrap-0.0.3.tgz#a3d5da6cd5c0bc0008d37234bbaf1bed63059107"
......
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