Skip to content

L
landingPage-Nexpie
Commit 97ddb8c4 by Chaiwith Santaweesuk
Options

update

parent 7b2957ce
Showing with 283 additions and 174 deletions
.firebase/hosting.YnVpbGQ.cache
asset-manifest.json,1567210277475,be391ac8c1943a33dd3653f5d7dadd68ed31817c529df857d46a144f8ad1780f asset-manifest.json,1567427519624,f9f9e5e7d95f0591d0e6906e513eb86ddb10e83a419216197065ea35fb46097a
precache-manifest.8db55c3c6077e06c6fab4b1b294670e1.js,1567210277475,43036a61e407c4bcd27f80fd5a14f962bf1dfff4c5c282b472a1efa6173cf09d
index.html,1567210277475,d08a233106d8b4573b2e3f3da5dae5f95acc84c0f13120f1dc16dc8deff92b58
service-worker.js,1567210277475,f934bcb8bce6666a99aebed6236a1f93e9e857495ff2a01975d4860fc050e9bb
manifest.json,1565083503843,6aaf3d87dd9bb1e96f9c691c50d0ed378ed98a120a76dea78291281834cd36e9
static/css/main.9930f115.chunk.css,1567210277476,8ee822e71b710e91573d4419d3f69a5c7685426ec2ff4f04b56c68383b0afc76
favicon.ico,1565083503842,b72f7455f00e4e58792d2bca892abb068e2213838c0316d6b7a0d6d16acd1955 favicon.ico,1565083503842,b72f7455f00e4e58792d2bca892abb068e2213838c0316d6b7a0d6d16acd1955
static/css/main.9930f115.chunk.css.map,1567210277496,61ab1241e53dacd19cbcef462e4793867a34548c892d517b302c41d0a3f73ac1 index.html,1567427519624,9100ddb9b50ed6c25fc3826482ee8a9721c89a6c276ff825fe839ac67719cef7
static/js/runtime~main.a8a9905a.js,1567210277496,e1af5f94fdd13901b2e433d0d7607e27c01458151c35b1fe4b7feda2a32b7aa9 precache-manifest.31c1b4643321e69bd38c73a8de855a0d.js,1567427519624,fa951d87dbe6c34f9214e791af0ed3358e84462cb2089c5b6f8061b7f2b41c2f
static/js/runtime~main.a8a9905a.js.map,1567210277497,c337bf8b58896da637a6e50ab8cfc779eb1ec42c55f8ec429030a03454a549db service-worker.js,1567427519624,efe0caac1fbb33e20b45205a96165a292319127df2ae82d91d0e3bbb44cbab32
static/js/main.e854660d.chunk.js,1567210277495,551fd1223dd3e7ead4db642a30e1d106bb1c5d83a0365435dd9320cfc7e335a3 static/css/main.70881fd1.chunk.css.map,1567427519646,2a834525e26af6649b00c704004606786f306f24fdbd8b462859c08378fdc650
static/js/main.e854660d.chunk.js.map,1567210277496,39ab4b76b77a74a9dd6de2ff04d0a758f7f027f5cb0f095163e5429950f86d39 manifest.json,1565083503843,6aaf3d87dd9bb1e96f9c691c50d0ed378ed98a120a76dea78291281834cd36e9
static/css/2.95c77804.chunk.css,1567210277496,ffe8b1fdb8aecf00c15b57bf087a4977fa8da87295f66226e306e8c65cce5bec static/css/main.70881fd1.chunk.css,1567427519626,ddcf27a28c503799657815bfafb492d56807fa8a6725f352d251cb89579a7040
static/css/2.95c77804.chunk.css.map,1567210277497,65a22ad666a0a19ae893c15c376f12f96e79aceab966e913e85bca7a6248ffc5 static/js/main.584ecc4e.chunk.js,1567427519626,94f1d09887166a254bf1939ff1acb142b1d3c3a75d8ef4a5a49f113f05231045
static/js/2.ec5ab0ff.chunk.js,1567210277497,6ba321b6af8b9ca55125f5f2edc2c6189e1f1bdf887ddaf5f0036acbb6fbfdb3 static/js/runtime~main.a8a9905a.js,1567427519648,e1af5f94fdd13901b2e433d0d7607e27c01458151c35b1fe4b7feda2a32b7aa9
static/js/2.ec5ab0ff.chunk.js.map,1567210277497,4b94ad7340d5c25b3ae9610ee8f087fbb4bec1805773aa1a8763be3c75fed444 static/js/runtime~main.a8a9905a.js.map,1567427519648,c337bf8b58896da637a6e50ab8cfc779eb1ec42c55f8ec429030a03454a549db
static/js/main.584ecc4e.chunk.js.map,1567427519646,6782ccfaf6b1a3e849164f51e2fcc1047deb8ea607035e9d5605bf7532e12c0d
static/css/2.655cd109.chunk.css,1567427519646,b9381307d281dd581b7e8e40fa46f5dc5f129dceb138844f58205737d3b8b156
static/css/2.655cd109.chunk.css.map,1567427519647,c5e0c12c108d428b20ea3a6e39bf4d5e1f10006f035e8cb3ade2d9d843334742
static/js/2.1a3fd4c2.chunk.js,1567427519648,b5b52eff5015e551b302084887912f1e01e0c71a3d4afc2f27a9595349ce937c
static/js/2.1a3fd4c2.chunk.js.map,1567427519647,c11a22832416c4fca8b09716dbec209d856a2a9edd92e1ea0872e0e0622d0097
public/index.html
...@@ -41,7 +41,7 @@ ...@@ -41,7 +41,7 @@
--> -->
</body> </body>
<footer> <footer>
<script src="jquery.min.js"></script> <!-- <script src="jquery.min.js"></script> -->
<!-- <script src="owlcarousel/owl.carousel.min.js"></script> --> <!-- <script src="owlcarousel/owl.carousel.min.js"></script> -->
</footer> </footer>
</html> </html>
src/components/Header.js
...@@ -33,7 +33,7 @@ class HeaderComponent extends Component { ...@@ -33,7 +33,7 @@ class HeaderComponent extends Component {
let NavItems = []; let NavItems = [];
NavItems = ButtonNavs.filter(ButtonNav => ButtonNav.index <= 5).map((firstSection, index) => { NavItems = ButtonNavs.filter(ButtonNav => ButtonNav.index <= 5).map((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 ? 'menu-nexpie' : 'white'}> */} {/* <Button fullwidth color={index === activeIndex ? 'menu-nexpie' : 'white'}> */}
...@@ -95,9 +95,9 @@ class HeaderComponent extends Component { ...@@ -95,9 +95,9 @@ class HeaderComponent extends Component {
); );
NavItems.push( NavItems.push(
this.props.isTabletSized ? renderToggleLanguageButton() : renderToggleLanguage(), this.props.isMobileSized ? renderToggleLanguageButton() : renderToggleLanguage(),
<Navbar.Item key={`Button${7}`} href="#"> <Navbar.Item key={`Button${7}`} href="#">
<Button style={{ paddingVertical: '0.1em'}} fullwidth color={'blue-nexpie'}> <Button style={{ paddingVertical: '0.1em'}} fullwidth className='is-blue-nexpie'>
{ButtonNavs[3].name} {ButtonNavs[3].name}
</Button> </Button>
</Navbar.Item> </Navbar.Item>
......
src/components/Home/Features.js
...@@ -55,6 +55,7 @@ export default class Features extends React.Component { ...@@ -55,6 +55,7 @@ export default class Features extends React.Component {
<p className="descriptionStyle" style={{ textAlign: 'center', maxWidth: 1140 }}> <p className="descriptionStyle" style={{ textAlign: 'center', maxWidth: 1140 }}>
<FormattedMessage id="Feature.Descrip" /> <FormattedMessage id="Feature.Descrip" />
</p> </p>
<br></br>
<div className="feature-container"> <div className="feature-container">
{feature.map((item, index) => ( {feature.map((item, index) => (
<Card key={index} title={item.title} description={item.description} /> <Card key={index} title={item.title} description={item.description} />
......
src/components/Home/Footer.js
...@@ -30,13 +30,61 @@ const Footer = ({ isMobileSized }) => { ...@@ -30,13 +30,61 @@ const Footer = ({ isMobileSized }) => {
padding: '45px', padding: '45px',
borderRadius: '0px 0px 6px 6px', borderRadius: '0px 0px 6px 6px',
}}> }}>
<Columns> {isMobileSized ? <Columns>
<div className="column is-2">
<div className="icons">
<FaMapMarkerAlt
style={{
height: '60%',
width: '60%',
color: '#063e66',
}}
/>
</div>
</div>
<div className="column is-4">
<p className="footer-title">
<FormattedMessage id="Footer.Location" />
</p>
</div>
<div className="column is-2">
<div className="icons">
<FaEnvelope
style={{
height: '60%',
width: '60%',
color: '#063e66',
}}
/>
</div>
</div>
<div className="column is-4">
<p className="footer-title"><FormattedMessage id="Footer.Email" /></p>
<p className="footer-description">contact@nexpie.com</p>
</div>
<div className="column is-2">
<div className="icons">
<IoIosCall
style={{
height: '60%',
width: '60%',
color: '#063e66',
}}
/>
</div>
</div>
<div className="column is-4">
<p className="footer-title"><FormattedMessage id="Footer.Callus" /></p>
<p className="footer-description">+6661-421-1289</p>
</div>
</Columns> : <Columns>
<div className="column is-1"> <div className="column is-1">
<div className="icons"> <div className="icons">
<FaMapMarkerAlt <FaMapMarkerAlt
style={{ style={{
height: '33px', height: '60%',
width: '33px', width: '60%',
color: '#063e66', color: '#063e66',
}} }}
/> />
...@@ -52,8 +100,8 @@ const Footer = ({ isMobileSized }) => { ...@@ -52,8 +100,8 @@ const Footer = ({ isMobileSized }) => {
<div className="icons"> <div className="icons">
<FaEnvelope <FaEnvelope
style={{ style={{
height: '33px', height: '60%',
width: '33px', width: '60%',
color: '#063e66', color: '#063e66',
}} }}
/> />
...@@ -63,13 +111,12 @@ const Footer = ({ isMobileSized }) => { ...@@ -63,13 +111,12 @@ const Footer = ({ isMobileSized }) => {
<p className="footer-title"><FormattedMessage id="Footer.Email" /></p> <p className="footer-title"><FormattedMessage id="Footer.Email" /></p>
<p className="footer-description">contact@nexpie.com</p> <p className="footer-description">contact@nexpie.com</p>
</div> </div>
<div className="column is-1"> <div className="column is-1">
<div className="icons"> <div className="icons">
<IoIosCall <IoIosCall
style={{ style={{
height: '33px', height: '60%',
width: '33px', width: '60%',
color: '#063e66', color: '#063e66',
}} }}
/> />
...@@ -79,14 +126,13 @@ const Footer = ({ isMobileSized }) => { ...@@ -79,14 +126,13 @@ const Footer = ({ isMobileSized }) => {
<p className="footer-title"><FormattedMessage id="Footer.Callus" /></p> <p className="footer-title"><FormattedMessage id="Footer.Callus" /></p>
<p className="footer-description">+6661-421-1289</p> <p className="footer-description">+6661-421-1289</p>
</div> </div>
</Columns> </Columns>}
</div> </div>
<Columns <Columns
style={{ style={{
padding: '20px 0px', padding: '20px 0px',
}}> }}>
{isMobileSized ? <div className="column">Privacy Policy | Terms of Use</div>: null} {isMobileSized ? <div className="column">Privacy Policy | Terms of Use</div> : null}
<div className="column">Copyright © 2018-2019 Created by NEXPIE Co., Ltd.</div> <div className="column">Copyright © 2018-2019 Created by NEXPIE Co., Ltd.</div>
{isMobileSized ? null : <div className="column" style={{ textAlign: "right" }}>Privacy Policy | Terms of Use</div>} {isMobileSized ? null : <div className="column" style={{ textAlign: "right" }}>Privacy Policy | Terms of Use</div>}
</Columns> </Columns>
......
src/components/Home/Packages.js
...@@ -29,27 +29,30 @@ const package_public = [ ...@@ -29,27 +29,30 @@ const package_public = [
descrip: <FormattedMessage id="Standard.Descrip" />, descrip: <FormattedMessage id="Standard.Descrip" />,
price: 290, price: 290,
devices: 10, devices: 10,
transfer: '262,200', transfer: '10,000,000',
datapoint: '1,048,600', datapoint: '2,000,000',
backgroundColor:"#42b3e5" readwrite: '500,000',
backgroundColor: "#42b3e5"
}, },
{ {
title: <FormattedMessage id="Startup.Title" />, title: <FormattedMessage id="Startup.Title" />,
descrip: <FormattedMessage id="Startup.Descrip" />, descrip: <FormattedMessage id="Startup.Descrip" />,
price: '1,900', price: '1,900',
devices: 100, devices: 100,
transfer: '1,835,000', transfer: '200,000,000',
datapoint: '7,340,000', datapoint: '60,000,000',
backgroundColor:"#0384ce" readwrite: '10,000,000',
backgroundColor: "#0384ce"
}, },
{ {
title: <FormattedMessage id="Business.Title" />, title: <FormattedMessage id="Business.Title" />,
descrip: <FormattedMessage id="Business.Descrip" />, descrip: <FormattedMessage id="Business.Descrip" />,
price: '2,500', price: '7,900',
devices: 150, devices: 500,
transfer: '2,621,500', transfer: '5,000,000,000',
datapoint: '10,485,800', datapoint: '600,000,000',
backgroundColor:"#3156a3" readwrite: '90,000,000',
backgroundColor: "#3156a3"
}, },
]; ];
...@@ -61,21 +64,41 @@ const Card = props => { ...@@ -61,21 +64,41 @@ const Card = props => {
{/* <p className="plan-descrip">{props.descrip}</p> */} {/* <p className="plan-descrip">{props.descrip}</p> */}
{/* <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" style={{backgroundColor:props.background_Color}}> <div className="price-wrapper" style={{ backgroundColor: props.background_Color }}>
<div className="price"><h1>{props.price}</h1></div> <div className="price"><h1>{props.price}</h1></div>
<p><FormattedMessage id="Price.Money" /></p> <p><FormattedMessage id="Price.Money" /></p>
</div> </div>
<div className="package-details"> <div className="package-details">
<div className="package-detail"> <div className="package-detail">
<p>{props.devices} <FormattedMessage id="Price.Device.End" /></p> {/* <p>{props.devices} </p> */}
<div className="columns is-mobile" style={{marginBottom:0,marginTop:0}}>
<div className="column is-7" style={{padding:0}}><p style={{textAlign:'right',fontWeight:600,color: props.background_Color}}>{props.devices}</p></div>
<div className="column is-5" style={{padding:0}}><p style={{textAlign:'left',paddingLeft:'10px'}}><FormattedMessage id="Price.Device.End" /></p></div>
</div>
<hr className="new" />
</div>
<div className="package-detail">
{/* <p>{props.transfer} <FormattedMessage id="Price.Transfer.End" /></p> */}
<div className="columns is-mobile" style={{marginBottom:0,marginTop:0}}>
<div className="column is-7" style={{padding:0}}><p style={{textAlign:'right',fontWeight:600,color: props.background_Color}}>{props.transfer}</p></div>
<div className="column is-5" style={{padding:0}}><p style={{textAlign:'left',paddingLeft:'10px'}}><FormattedMessage id="Price.Transfer.End" /></p></div>
</div>
<hr className="new" /> <hr className="new" />
</div> </div>
<div className="package-detail"> <div className="package-detail">
<p>{props.transfer} <FormattedMessage id="Price.Transfer.End" /></p> {/* <p>{props.datapoint} <FormattedMessage id="Price.Datapoint.End" /></p> */}
<div className="columns is-mobile" style={{marginBottom:0,marginTop:0}}>
<div className="column is-7" style={{padding:0}}><p style={{textAlign:'right',fontWeight:600,color: props.background_Color}}>{props.datapoint}</p></div>
<div className="column is-5" style={{padding:0}}><p style={{textAlign:'left',paddingLeft:'10px'}}><FormattedMessage id="Price.Datapoint.End" /></p></div>
</div>
<hr className="new" /> <hr className="new" />
</div> </div>
<div className="package-detail"> <div className="package-detail">
<p>{props.datapoint} <FormattedMessage id="Price.Datapoint.End" /></p> {/* <p>{props.readwrite} <FormattedMessage id="Price.Readwrite.End" /></p> */}
<div className="columns is-mobile" style={{marginBottom:0,marginTop:0}}>
<div className="column is-7" style={{padding:0}}><p style={{textAlign:'right',fontWeight:600,color: props.background_Color}}>{props.readwrite}</p></div>
<div className="column is-5" style={{padding:0}}><p style={{textAlign:'left',paddingLeft:'10px'}}><FormattedMessage id="Price.Readwrite.End" /></p></div>
</div>
<hr className="new" /> <hr className="new" />
</div> </div>
</div> </div>
...@@ -102,21 +125,25 @@ const Packages = ({ isMobileSized }) => { ...@@ -102,21 +125,25 @@ const Packages = ({ isMobileSized }) => {
</h1> </h1>
<div className="feature-container"> <div className="feature-container">
<div className="package-details" style={{ paddingTop: '234px' }}> <div className="package-details" style={{ paddingTop: '234px' }}>
<div className="package-detail"> <div className="package-detail">
<p><FormattedMessage id="Price.Device.Start"/></p> <p style={{fontWeight:500}}><FormattedMessage id="Price.Device.Start" /></p>
<hr className="new" /> <hr className="new" />
</div> </div>
<div className="package-detail"> <div className="package-detail">
<p><FormattedMessage id="Price.Transfer.Start"/></p> <p style={{fontWeight:500}}><FormattedMessage id="Price.Transfer.Start" /></p>
<hr className="new" /> <hr className="new" />
</div> </div>
<div className="package-detail"> <div className="package-detail">
<p><FormattedMessage id="Price.Datapoint.Start"/></p> <p style={{fontWeight:500}}><FormattedMessage id="Price.Datapoint.Start" /></p>
<hr className="new" /> <hr className="new" />
</div>
</div> </div>
<div className="package-detail">
<p style={{fontWeight:500}}><FormattedMessage id="Price.Readwrite.Start" /></p>
<hr className="new" />
</div>
</div>
{package_public.map((item, index) => ( {package_public.map((item, index) => (
<Card <Card
...@@ -128,6 +155,7 @@ const Packages = ({ isMobileSized }) => { ...@@ -128,6 +155,7 @@ const Packages = ({ isMobileSized }) => {
devices={item.devices} devices={item.devices}
transfer={item.transfer} transfer={item.transfer}
datapoint={item.datapoint} datapoint={item.datapoint}
readwrite={item.readwrite}
background_Color={item.backgroundColor} background_Color={item.backgroundColor}
/> />
))} ))}
......
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 = (props) => {
return ( return (
<div className="service-card"> <div className="service-card">
<div className="img-wrapper"> <div className="img-wrapper">
...@@ -10,27 +10,27 @@ const Card = () => { ...@@ -10,27 +10,27 @@ const Card = () => {
</figure> </figure>
</div> </div>
<div className="service-wrapper"> <div className="service-wrapper">
<h1 className="service-title">Connectivity</h1> <h1 className="service-title">{props.title}</h1>
<p className="service-description">Connecting your device with NEXPIE IoT Platform.</p> <p className="service-description">{props.description}</p>
</div> </div>
</div> </div>
); );
}; };
// const service = [ const service = [
// { {
// title: <FormattedMessage id="Standard.Title" />, title: <FormattedMessage id="Connectivity.Title" />,
// description: <FormattedMessage id="Standard.Title" /> description: <FormattedMessage id="Connectivity.Descrip" />
// }, },
// { {
// title: <FormattedMessage id="Standard.Title" />, title: <FormattedMessage id="Management.Title" />,
// description: <FormattedMessage id="Standard.Title" /> description: <FormattedMessage id="Management.Descrip" />
// }, },
// { {
// title: <FormattedMessage id="Standard.Title" />, title: <FormattedMessage id="Datacollection.Title" />,
// description: <FormattedMessage id="Standard.Title" /> description: <FormattedMessage id="Datacollection.Descrip" />
// }, },
// ]; ];
export default class Services extends React.Component { export default class Services extends React.Component {
render() { render() {
...@@ -52,8 +52,11 @@ export default class Services extends React.Component { ...@@ -52,8 +52,11 @@ export default class Services extends React.Component {
achieve the most benefit in Commercial Marketing. achieve the most benefit in Commercial Marketing.
</p> </p>
<div className="service-container"> <div className="service-container">
{[1, 2, 3].map((item, index) => ( {service.map((item, index) => (
<Card key={index} /> <Card
key={index}
title={item.title}
description={item.description} />
))} ))}
</div> </div>
</div> </div>
......
src/components/Home/WhyUs.js
...@@ -49,7 +49,8 @@ const WhyUs = ({ isMobileSized }) => { ...@@ -49,7 +49,8 @@ const WhyUs = ({ isMobileSized }) => {
<p className="descriptionStyle" style={{ textAlign: 'center', maxWidth: 1140 }}> <p className="descriptionStyle" style={{ textAlign: 'center', maxWidth: 1140 }}>
<FormattedMessage id="Why.Descrip" /> <FormattedMessage id="Why.Descrip" />
</p> </p>
{isMobileSized ? <br></br>: null} {/* {isMobileSized ? <br></br>: null} */}
<br></br>
<div className="why-container"> <div className="why-container">
<div className="why-bg" /> <div className="why-bg" />
{why.map((item, index) => ( {why.map((item, index) => (
......
src/components/Navbar.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 { IconContext } from 'react-icons'; // import { IconContext } from 'react-icons';
import { FiMapPin, FiSmartphone, FiMail } from 'react-icons/fi'; // import { FiMapPin, FiSmartphone, FiMail } from 'react-icons/fi';
export default class NavbarComponent extends Component { // // export default class NavbarComponent extends Component {
render() { // // render() {
return ( // // return (
<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>
</Navbar.Container> // // </Navbar.Container>
</IconContext.Provider> // // </IconContext.Provider>
</Navbar> // // </Navbar>
); // // );
} // // }
} // // }
const Text = ({ children }) => <p style={{ marginLeft: 10, color: '#999999' }}>{children}</p>; // const Text = ({ children }) => <p style={{ marginLeft: 10, color: '#999999' }}>{children}</p>;
import React, { Component } from 'react'; // import React, { Component } from 'react';
import PropTypes from 'prop-types'; // import PropTypes from 'prop-types';
import { FullPage, Slide } from 'react-full-page'; // // import { FullPage, Slide } from 'react-full-page';
class CustomControls extends Component { // class CustomControls extends Component {
static propTypes = { // static propTypes = {
className: PropTypes.string, // className: PropTypes.string,
getCurrentSlideIndex: PropTypes.func.isRequired, // getCurrentSlideIndex: PropTypes.func.isRequired,
onNext: PropTypes.func.isRequired, // onNext: PropTypes.func.isRequired,
onPrev: PropTypes.func.isRequired, // onPrev: PropTypes.func.isRequired,
scrollToSlide: PropTypes.func.isRequired, // scrollToSlide: PropTypes.func.isRequired,
slidesCount: PropTypes.number.isRequired, // slidesCount: PropTypes.number.isRequired,
style: PropTypes.object, // style: PropTypes.object,
}; // };
static defaultProps = { // static defaultProps = {
className: 'full-page-controls', // className: 'full-page-controls',
style: { // style: {
left: '50%', // left: '50%',
paddingTop: '10px', // paddingTop: '10px',
position: 'fixed', // position: 'fixed',
transform: 'translateX(-50%)', // transform: 'translateX(-50%)',
}, // },
}; // };
renderSlidesNumbers(currentSlideIndex) { // renderSlidesNumbers(currentSlideIndex) {
const { slidesCount, scrollToSlide } = this.props; // const { slidesCount, scrollToSlide } = this.props;
const slidesNumbers = []; // const slidesNumbers = [];
for (let i = 0; i < slidesCount; i++) { // for (let i = 0; i < slidesCount; i++) {
const buttonProps = { // const buttonProps = {
disabled: currentSlideIndex === i, // disabled: currentSlideIndex === i,
key: i, // key: i,
onClick: () => scrollToSlide(i), // onClick: () => scrollToSlide(i),
}; // };
slidesNumbers.push( // slidesNumbers.push(
<button type="button" {...buttonProps}> // <button type="button" {...buttonProps}>
{i + 1} // {i + 1}
</button> // </button>
); // );
} // }
return slidesNumbers; // return slidesNumbers;
} // }
render() { // render() {
const { getCurrentSlideIndex, slidesCount, style, className } = this.props; // const { getCurrentSlideIndex, slidesCount, style, className } = this.props;
const currentSlideIndex = getCurrentSlideIndex(); // const currentSlideIndex = getCurrentSlideIndex();
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/scss/style.scss
...@@ -91,10 +91,11 @@ body { ...@@ -91,10 +91,11 @@ body {
min-width: 245px; min-width: 245px;
height: 400px; height: 400px;
border-radius: 6px; border-radius: 6px;
box-shadow: 0 52px 40px 0 rgba(0, 0, 0, 0.09); box-shadow: 0 30px 40px 0 rgba(0, 0, 0, 0.09);
border: solid 1px #f0f0f0;
background-color: $white; background-color: $white;
margin: 30px; margin: 30px;
z-index: 1; z-index: 20;
padding: 20px; padding: 20px;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
...@@ -121,8 +122,8 @@ body { ...@@ -121,8 +122,8 @@ body {
min-width: 245px; min-width: 245px;
height: 400px; height: 400px;
border-radius: 6px; border-radius: 6px;
box-shadow: 0 52px 40px 0 rgba(0, 0, 0, 0.09); box-shadow: 0 30px 40px 0 rgba(0, 0, 0, 0.09);
border: solid 0.5px #f0f0f0; border: solid 1px #f0f0f0;
background-color: $white; background-color: $white;
margin: 30px; margin: 30px;
display: flex; display: flex;
...@@ -251,11 +252,12 @@ body { ...@@ -251,11 +252,12 @@ body {
} }
} }
.package-card { .package-card {
z-index: 20;
width: 250px; width: 250px;
//height: 400px; //height: 400px;
border-radius: 6px; border-radius: 6px;
box-shadow: 0 52px 40px 0 rgba(0, 0, 0, 0.09); box-shadow: 0 30px 40px 0 rgba(0, 0, 0, 0.09);
border: solid 0.5px #f0f0f0; border: solid 1px #f0f0f0;
background-image: $white; background-image: $white;
padding: 0px 0px 0px 0px; padding: 0px 0px 0px 0px;
display: flex; display: flex;
...@@ -305,6 +307,11 @@ body { ...@@ -305,6 +307,11 @@ body {
//display: flex; //display: flex;
//justify-content: space-between; //justify-content: space-between;
text-align: center; text-align: center;
.column {
span {
text-align: left;
}
}
} }
} }
......
src/translations/en.json
...@@ -19,6 +19,13 @@ ...@@ -19,6 +19,13 @@
"Integrations.Title":"Integrations", "Integrations.Title":"Integrations",
"Integrations.Descrip":"Easily integrate to any protocols, connectivity types and 3rd party integration by provides APIs.", "Integrations.Descrip":"Easily integrate to any protocols, connectivity types and 3rd party integration by provides APIs.",
"Services.Title": "Our Services", "Services.Title": "Our Services",
"Services.Descrip": "บริการของเรา",
"Connectivity.Title": "Connectivity",
"Connectivity.Descrip": "We support many protocols for choose to connect your device with NEXPIE IoT Platform",
"Management.Title": "IoT Management",
"Management.Descrip": "Provide data visualization dashboard and IoT management tools for your smart business",
"Datacollection.Title": "Data Collection",
"Datacollection.Descrip": "Real-time collecting your data and storage with trusted cloud server",
"Feature.Descrip": "The majority of NEXPIE functionality that helps to develop your connected devices and smart things.", "Feature.Descrip": "The majority of NEXPIE functionality that helps to develop your connected devices and smart things.",
"Features.Title": "Features", "Features.Title": "Features",
"Monitor.Title": "Monitoring", "Monitor.Title": "Monitoring",
...@@ -41,10 +48,12 @@ ...@@ -41,10 +48,12 @@
"Price.Money":"Baht/Month", "Price.Money":"Baht/Month",
"Price.Device.Start":"Connecting limit up to", "Price.Device.Start":"Connecting limit up to",
"Price.Device.End":"Devices", "Price.Device.End":"Devices",
"Price.Transfer.Start":"Transfer data up to", "Price.Transfer.Start":"Real Time Message",
"Price.Transfer.End":"Messages", "Price.Transfer.End":"Messages",
"Price.Datapoint.Start":"Data Point Read/Write", "Price.Datapoint.Start":"Data storage",
"Price.Datapoint.End":"Points", "Price.Datapoint.End":"Points",
"Price.Readwrite.Start":"Data Point Read/Write",
"Price.Readwrite.End":"Times",
"Contact.Title":"Ready to get started ?", "Contact.Title":"Ready to get started ?",
"Contact.Descrip":"Connecting everything - everywhere with IoT platform to improve your business productive and efficiency.", "Contact.Descrip":"Connecting everything - everywhere with IoT platform to improve your business productive and efficiency.",
"Footer.Location":"NEXPIE Co. Ltd. | Thai Summit Tower, 14th floor, 1768 New Petchaburi Road, Khwaeng Bang Kapi, Khet Huay Kwang, Bangkok 10310 Thailand", "Footer.Location":"NEXPIE Co. Ltd. | Thai Summit Tower, 14th floor, 1768 New Petchaburi Road, Khwaeng Bang Kapi, Khet Huay Kwang, Bangkok 10310 Thailand",
......
src/translations/th.json
...@@ -19,6 +19,13 @@ ...@@ -19,6 +19,13 @@
"Integrations.Title":"อินทิเกรต", "Integrations.Title":"อินทิเกรต",
"Integrations.Descrip":"การทำงานร่วมกับทุกโปรโตคอลและ 3rd party ได้อย่างง่ายดาย โดยจัดเตรียม APIs สำหรับการผสานรวมธุรกิจของคุณ", "Integrations.Descrip":"การทำงานร่วมกับทุกโปรโตคอลและ 3rd party ได้อย่างง่ายดาย โดยจัดเตรียม APIs สำหรับการผสานรวมธุรกิจของคุณ",
"Services.Title": "บริการของเรา", "Services.Title": "บริการของเรา",
"Services.Descrip": "บริการของเรา",
"Connectivity.Title": "บริการการเชื่อมต่อ",
"Connectivity.Descrip": "เชื่อมต่ออุปกรณของคุณกับ NEXPIE IoT Platform",
"Management.Title": "บริการระบบจัดการ IoT",
"Management.Descrip": "การแสดงค่าข้อมูล และการควบคุมอุปกรณ์ IoT",
"Datacollection.Title": "บริการจัดเก็บข้อมูล",
"Datacollection.Descrip": "การรวบรวมค่าข้อมูล และจัดเก็บข้อมูลแบบเรียลไทม์",
"Feature.Descrip": "ฟังก์ชั่นหลักของ NEXPIE คือการช่วยในการพัฒนาอุปกรณ์ และ smart things ของคุณ", "Feature.Descrip": "ฟังก์ชั่นหลักของ NEXPIE คือการช่วยในการพัฒนาอุปกรณ์ และ smart things ของคุณ",
"Features.Title": "จุดเด่น", "Features.Title": "จุดเด่น",
"Monitor.Title": "การติดตามตรวจสอบ", "Monitor.Title": "การติดตามตรวจสอบ",
...@@ -40,8 +47,10 @@ ...@@ -40,8 +47,10 @@
"Price.Device.End":"อุปกรณ์", "Price.Device.End":"อุปกรณ์",
"Price.Transfer.Start":"การรับ-ส่งข้อมูลได้ถึง", "Price.Transfer.Start":"การรับ-ส่งข้อมูลได้ถึง",
"Price.Transfer.End":"ข้อความ", "Price.Transfer.End":"ข้อความ",
"Price.Datapoint.Start":"การอ่านและเก็บค่าข้อมูลได้ถึง", "Price.Datapoint.Start":"เก็บข้อมูล",
"Price.Datapoint.End":"จุด", "Price.Datapoint.End":"จุด",
"Price.Readwrite.Start":"การอ่านและเก็บค่าข้อมูลได้ถึง",
"Price.Readwrite.End":"ครั้ง",
"Contact.Title":"พร้อมหรือยัง ?", "Contact.Title":"พร้อมหรือยัง ?",
"Contact.Descrip":"เชื่อมต่อทุกสิ่ง - ทุกที่ด้วยแพลตฟอร์ม IoT เพื่อปรับปรุงประสิทธิภาพการทำงานและประสิทธิภาพของธุรกิจของคุณ", "Contact.Descrip":"เชื่อมต่อทุกสิ่ง - ทุกที่ด้วยแพลตฟอร์ม IoT เพื่อปรับปรุงประสิทธิภาพการทำงานและประสิทธิภาพของธุรกิจของคุณ",
"Footer.Location":"บริษัท เน็กซ์พาย จำกัด | ไทยซัมมิท ทาวเวอร์ ชั้น 14, 1768 ถนนเพชรบุรีตัดใหม่ แขวงบางกะปิ เขตห้วยขวาง กรุงเทพมหานคร 10310", "Footer.Location":"บริษัท เน็กซ์พาย จำกัด | ไทยซัมมิท ทาวเวอร์ ชั้น 14, 1768 ถนนเพชรบุรีตัดใหม่ แขวงบางกะปิ เขตห้วยขวาง กรุงเทพมหานคร 10310",
......
src/utils/WindowDimension.js
...@@ -6,14 +6,19 @@ export default function WindowDimensions(WrappedComponent) { ...@@ -6,14 +6,19 @@ export default function WindowDimensions(WrappedComponent) {
componentDidMount() { componentDidMount() {
this.updateWindowDimensions(); this.updateWindowDimensions();
console.log("componentDidMount")
console.log(window.innerWidth)
window.addEventListener('resize', this.updateWindowDimensions); window.addEventListener('resize', this.updateWindowDimensions);
} }
componentWillUnmount() { componentWillUnmount() {
console.log("componentWillUnmount")
console.log(window.innerWidth)
window.removeEventListener('resize', this.updateWindowDimensions); window.removeEventListener('resize', this.updateWindowDimensions);
} }
updateWindowDimensions = () => { updateWindowDimensions = () => {
console.log(window.innerWidth)
this.setState({ width: window.innerWidth, height: window.innerHeight }); this.setState({ width: window.innerWidth, height: window.innerHeight });
}; };
...@@ -23,8 +28,8 @@ export default function WindowDimensions(WrappedComponent) { ...@@ -23,8 +28,8 @@ export default function WindowDimensions(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 <= 769} isMobileSized={this.state.width <= 420}
isTabletSized={this.state.width <= 1024} isTabletSized={this.state.width <= 768}
/> />
); );
} }
......
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