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