Skip to content

L
landingPage-Nexpie
Commit 164c9cb2 by Chaiwith Santaweesuk
Options

update

parent 176f3da7
Showing with 234 additions and 167 deletions
.firebase/hosting.YnVpbGQ.cache
asset-manifest.json,1566397838677,fac032716dfc5905bd57d44c4797179ae047b1a8f2c66bfda8991a79f57b4fae
precache-manifest.1c089e883279ab5ebdab5090bf99b46f.js,1566397838677,532051a569c9ec1c730e5afca495158c0ee42d9b2e30bcafeebc3793e7d78dd2
asset-manifest.json,1566489464892,d917d8ca82da1bf89c18f662af00857807a77793e28197dd94143f359212b61b
favicon.ico,1565083503842,b72f7455f00e4e58792d2bca892abb068e2213838c0316d6b7a0d6d16acd1955
index.html,1566397838677,d1ed9f00f7419552c8ef96783ae0d64f9eacb777c327d7dc59d071cb90ee17f1
service-worker.js,1566397838677,feeb6d2013d3d6c48f9f3f2abfa1426d12922fdaab7bba855592ff91fad79ee6
static/css/main.d33ffe92.chunk.css.map,1566397838691,88913f181baaf89708b488f267fc88759c709cccd8df0ec531d9b8639f5457c5
static/css/main.d33ffe92.chunk.css,1566397838678,2c0b300c9f2407b54ad3d9b5b3eb10ce05ce2ac285ef485183953323ec2458db
precache-manifest.51a4ad7a1128a896b69ad5eb00dc99a8.js,1566489464892,27accb0375209814b829c08aa5b6e68855ef99492b4002d5e6d6c367938f81d4
index.html,1566489464892,46fb4d6f374ca452cfa5d1bf2fe1a13244fec6082f3f5636d44578f8f6bda44f
service-worker.js,1566489464892,38b8ca9bb235c3529147d79832e4f86f9aad7e831a904bddaf5750cd8b99f72b
manifest.json,1565083503843,6aaf3d87dd9bb1e96f9c691c50d0ed378ed98a120a76dea78291281834cd36e9
static/js/main.18e900b3.chunk.js,1566397838680,1b49e42dbfd9ba792e9f46bab50330ff4dcfcbb6082a292dabd43c3c37315775
static/js/runtime~main.a8a9905a.js,1566397838690,e1af5f94fdd13901b2e433d0d7607e27c01458151c35b1fe4b7feda2a32b7aa9
static/js/runtime~main.a8a9905a.js.map,1566397838691,c337bf8b58896da637a6e50ab8cfc779eb1ec42c55f8ec429030a03454a549db
static/js/main.18e900b3.chunk.js.map,1566397838691,eded39458abf4a56454ea5ef74cb04458e54c1d6a29dcd89f79113a0114b5ce7
static/css/2.5aec162f.chunk.css,1566397838691,8383e9bf19b19ec879e362484ac8a165120490778495b9099842e50e7f906ec0
static/css/2.5aec162f.chunk.css.map,1566397838691,8da2f9401adb11c1e32c1f4a0b469c4b1965cda45cf9be25716462a90fe6bc8c
static/js/2.9838828f.chunk.js,1566397838691,efba1b01ed6f4bbfd4f81c6c684f451d4e6f9259320bf4cefb4b5e4e1364ad19
static/js/2.9838828f.chunk.js.map,1566397838692,e8e2ae222f85803cd7f0ea648e649acdb75fe8c3ba7668c012e40b981cd9ab4d
static/css/main.65ea563f.chunk.css,1566489464893,27a59a4b69f523546d3790722dab40480363b49fef5776d22b76980c4b79e83f
static/js/main.91ea0398.chunk.js,1566489464897,7f11c5c3fc7ae3457f04b550bbb1f889b587936b63d734eb03e4054b296dccf0
static/js/runtime~main.a8a9905a.js,1566489464907,e1af5f94fdd13901b2e433d0d7607e27c01458151c35b1fe4b7feda2a32b7aa9
static/css/main.65ea563f.chunk.css.map,1566489464908,bba9107485cc3bc08d5909bbdefc8f0a05c6193c1122f955a38263d8a4de12ca
static/js/runtime~main.a8a9905a.js.map,1566489464907,c337bf8b58896da637a6e50ab8cfc779eb1ec42c55f8ec429030a03454a549db
static/js/main.91ea0398.chunk.js.map,1566489464908,87c7df425aa4798795effc5955e8bd37fa495fe8720cd9f86b70f88856e90cf1
static/css/2.94588ff4.chunk.css,1566489464906,f70230d94bf22a50b4fc79cd51b1446c998f750f12586220e4bd24393c010e76
static/css/2.94588ff4.chunk.css.map,1566489464907,6c497bce27c3a962b7f278d80e59d365c1d76286d5683e6fa4dde85970612a5a
static/js/2.a8a8668a.chunk.js,1566489464906,13bf28a502da5f889c3fb652c52e7e367dca7e5dcc1de09f59baf52ab70d5111
static/js/2.a8a8668a.chunk.js.map,1566489464907,4f9e550321484ab329ca8bae90d2225fe7d882e9231caf3da2792ce98dff7d1a
public/index.html
......@@ -24,7 +24,7 @@
work correctly both with client-side routing and a non-root public URL.
Learn how to configure a non-root public URL by running `npm run build`.
-->
<title>React App</title>
<title>NEXPIE IoT Platform</title>
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
......
src/components/Home/Packages.js
import React from 'react';
import { FormattedMessage } from 'react-intl';
import OwlCarousel from 'react-owl-carousel';
import Columns from 'react-bulma-components/lib/components/columns';
import Table from 'react-bulma-components/lib/components/table';
const options = {
center: true,
responsiveClass: true,
......@@ -17,41 +19,61 @@ const options = {
},
},
};
const Card = () => {
const package_public = [
{
title: <FormattedMessage id="Standard.Title" />,
price: 290,
devices: 10,
transfer: "262,200",
datapoint: "1,048,600",
},
{
title: <FormattedMessage id="Startup.Title" />,
price: "1,900",
devices: 100,
transfer: "1,835,000",
datapoint: "7,340,000",
},
{
title: <FormattedMessage id="Business.Title" />,
price: "2,500",
devices: 150,
transfer: "2,621,500",
datapoint: "10,485,800",
}
];
const Card = (props) => {
return (
<div className="package-card">
<div className="text-wrapper">
<h1 className="plan-title">Standard Plan</h1>
<p className="plan-descrip">This is standard hositng plan</p>
<h1 className="plan-title">{props.title}</h1>
{/* <p className="plan-descrip">This is standard hositng plan</p> */}
</div>
<div className="price-wrapper">
<div className="price">
<h1>$3</h1>
.99
<h1>{props.price}</h1>
</div>
<p>/mo</p>
<p><FormattedMessage id="Price.Money"/></p>
</div>
<div className="package-details">
<div className="package-detail">
<p> Space</p>
<p>30GB</p>
</div>
<div className="package-detail">
<p> FTP User</p>
<p>50</p>
<p> <FormattedMessage id="Price.Device.Start"/></p>
<p>{props.devices} <FormattedMessage id="Price.Device.End"/></p>
</div>
<div className="package-detail">
<p> Databases</p>
<p>50</p>
<p> <FormattedMessage id="Price.Transfer.Start"/></p>
<p>{props.transfer} <FormattedMessage id="Price.Transfer.End"/></p>
</div>
<div className="package-detail">
<p> Adons Domain</p>
<p>5</p>
<p> <FormattedMessage id="Price.Datapoint.Start"/></p>
<p>{props.datapoint} <FormattedMessage id="Price.Datapoint.End"/></p>
</div>
</div>
<div className="btn-wrapper">
{/* <div className="btn-wrapper">
<div>Choose plan</div>
</div>
</div> */}
</div>
);
};
......@@ -94,22 +116,18 @@ export default class Packages extends React.Component {
Private Platform (dedicated resources)
</div>
</div>
<div>
<OwlCarousel className="owl-theme" {...options}>
{this.state.activeTab === 'tab1' &&
[1, 2, 3].map((item, index) => (
<div key={item + index} className="item center">
<Card />
</div>
<div className="feature-container">
{this.state.activeTab === 'tab1' &&
package_public.map((item, index) => (
<Card key={index} title={item.title} money={item.money} price={item.price} devices={item.devices} transfer={item.transfer} datapoint={item.datapoint} />
))}
{this.state.activeTab === 'tab2' && (
<div className="row">
{[1, 2, 3].map((item, index) => (
<Card key={item + index} />
))}
{this.state.activeTab === 'tab2' && (
<div className="row">
{[1, 2, 3].map((item, index) => (
<Card key={item + index} />
))}
</div>
)}
</OwlCarousel>
</div>
)}
</div>
</div>
);
......
src/components/Home/Services.js
......@@ -35,7 +35,7 @@ export default class Services extends React.Component {
NEXPIE provide the Internet of Things (IoT) technology tools for helping your organization to
achieve the most benefit in Commercial Marketing.
</p>
<div className="row">
<div className="service-container">
{[1, 2, 3].map((item, index) => (
<Card key={index} />
))}
......
src/components/Home/WhyUs.js
import React from 'react';
import { FormattedMessage } from 'react-intl';
import WindowDimensions from '../../utils/WindowDimension';
// import { hidden } from 'ansi-colors';
const Card = () => {
......@@ -15,31 +16,33 @@ const Card = () => {
</div>
);
};
export default class WhyUs extends React.Component {
render() {
return (
<div
className="section content-width"
style={{
flexDirection: 'column',
alignItems: 'center',
justifyContent: 'space-evenly',
paddingBottom: '60px',
overflow: 'hidden',
}}>
<h1 className="title">
<FormattedMessage id="Why.Title" />
</h1>
<p className="descriptionStyle" style={{ textAlign: 'center', maxWidth: 1140 }}>
<FormattedMessage id="Why.Descrip" />
</p>
<div className="row">
<div className="why-bg" />
{[1, 2, 3].map((item, index) => (
<Card key={index} />
))}
</div>
const WhyUs = ({ isMobileSized }) => {
return (
<div
className="section content-width"
style={{
flexDirection: 'column',
alignItems: 'center',
justifyContent: 'space-evenly',
paddingBottom: '60px',
overflow: 'hidden',
}}>
<h1 className="title">
<FormattedMessage id="Why.Title" />
</h1>
<p className="descriptionStyle" style={{ textAlign: 'center', maxWidth: 1140 }}>
<FormattedMessage id="Why.Descrip" />
</p>
{isMobileSized ? <br></br>: null}
<div className="why-container">
<div className="why-bg" />
{[1, 2, 3].map((item, index) => (
<Card key={index} />
))}
</div>
);
}
</div>
);
}
export default WindowDimensions(WhyUs);
\ No newline at end of file
src/scss/style.scss
......@@ -9,14 +9,17 @@
// @import '../../node_modules/bulma/sass/form/_all.sass';
body {
font-family: -apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen-Sans,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,Helvetica,"\30D2\30E9\30AE\30CE\89D2\30B4 Pro W3",Hiragino Kaku Gothic Pro,"\30E1\30A4\30EA\30AA",Meiryo,"\FF2D\FF33 \FF30\30B4\30B7\30C3\30AF",Arial,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol;
font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen-Sans, Ubuntu, Cantarell, Fira Sans,
Droid Sans, Helvetica Neue, Helvetica, "\30D2\30E9\30AE\30CE\89D2\30B4 Pro W3", Hiragino Kaku Gothic Pro,
"\30E1\30A4\30EA\30AA", Meiryo, "\FF2D\FF33 \FF30\30B4\30B7\30C3\30AF", Arial, sans-serif, Apple Color Emoji,
Segoe UI Emoji, Segoe UI Symbol;
font-size: 16px;
// //font-weight: 200;
}
::-webkit-scrollbar {
display: none;
}
// ::-webkit-scrollbar {
// display: none;
// }
.dropdown-menu {
min-width: 5rem;
......@@ -42,7 +45,7 @@ body {
padding: 0 15px;
}
.descriptionStyle {
font-size: 14px;
font-size: 16px;
color: $grey;
font-weight: normal;
}
......@@ -52,7 +55,7 @@ body {
font-weight: 500;
}
.dropdown-item{
.dropdown-item {
font-size: 16px;
font-weight: bold;
}
......@@ -79,80 +82,89 @@ body {
}
}
}
.why-card {
max-width: 300px;
min-width: 245px;
height: 360px;
border-radius: 6px;
box-shadow: 0 52px 40px 0 rgba(0, 0, 0, 0.09);
background-color: $white;
margin: 30px;
z-index: 1;
padding: 40px;
.why-container {
display: flex;
flex-direction: column;
justify-content: space-evenly;
align-items: center;
.why-title {
font-size: 22px;
color: $grey;
font-weight: 500;
}
.why-description {
font-size: 14px;
font-weight: normal;
color: $lightgrey;
}
}
.service-card {
max-width: 300px;
min-width: 265px;
height: 399px;
border-radius: 6px;
box-shadow: 0 52px 40px 0 rgba(0, 0, 0, 0.09);
border: solid 0.5px #f0f0f0;
background-color: $white;
margin: 30px;
display: flex;
flex-direction: column;
align-items: center;
overflow: hidden;
&:first-child {
background-color: #42b3e5;
}
&:nth-child(2) {
background-color: #0384ce;
}
&:nth-child(3) {
background-color: #3156a3;
}
.img-wrapper {
flex-wrap: wrap;
justify-content: center;
.why-card {
max-width: 300px;
min-width: 245px;
height: 400px;
border-radius: 6px;
box-shadow: 0 52px 40px 0 rgba(0, 0, 0, 0.09);
background-color: $white;
width: 100%;
height: 100%;
margin: 60 0;
display: flex;
align-items: center;
justify-content: center;
}
.service-wrapper {
width: 100%;
max-height: 200px;
color: $white;
margin: 30px;
z-index: 1;
padding: 20px;
display: flex;
flex-direction: column;
justify-content: space-evenly;
align-items: center;
justify-content: space-between;
padding: 15px 20px 20px 20px;
.service-title {
.why-title {
font-size: 22px;
color: $grey;
font-weight: 500;
}
.service-description {
font-size: 14px;
text-align: center;
.why-description {
font-size: 16px;
font-weight: normal;
color: $lightgrey;
}
}
}
.service-container {
display: flex;
flex-wrap: wrap;
justify-content: center;
.service-card {
max-width: 300px;
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;
background-color: $white;
margin: 30px;
display: flex;
flex-direction: column;
align-items: center;
overflow: hidden;
&:first-child {
background-color: #42b3e5;
}
&:nth-child(2) {
background-color: #0384ce;
}
&:nth-child(3) {
background-color: #3156a3;
}
.img-wrapper {
background-color: $white;
width: 100%;
height: 70%;
margin: 60 0;
display: flex;
align-items: center;
justify-content: center;
}
.service-wrapper {
width: 100%;
max-height: 200px;
color: $white;
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-between;
padding: 20px;
.service-title {
font-size: 22px;
font-weight: 500;
}
.service-description {
font-size: 16px;
text-align: center;
font-weight: normal;
}
}
}
}
......@@ -179,20 +191,21 @@ body {
border-radius: 6px;
border: solid 1px rgba(66, 179, 229, 0.35);
background-color: rgba(66, 179, 229, 0.1);
padding: 10px;
padding: 20px;
.feature-img {
width: 20%;
@extend .center;
.image {
margin: 10px;
}
}
.feature-text-wrapper {
padding: 10px 20px 20px 20px;
padding: 4px 0px 0px 20px;
display: flex;
flex-direction: column;
justify-content: center;
// justify-content: center;
max-width: 400px;
width: 80%;
.feature-title {
font-size: 22px;
font-weight: 500;
......@@ -208,8 +221,8 @@ body {
display: -webkit-box;
max-width: 400px;
height: 4; /* Fallback for non-webkit */
margin: 0 auto;
font-size: 14px;
// margin: 0 auto;
font-size: 16px;
font-weight: normal;
// line-height: 1.33;
-webkit-line-clamp: 4;
......@@ -239,12 +252,12 @@ body {
}
.package-card {
width: 300px;
height: 450px;
height: 400px;
border-radius: 6px;
box-shadow: 0 52px 40px 0 rgba(0, 0, 0, 0.09);
border: solid 0.5px #f0f0f0;
background-image: $white;
padding: 35px;
padding: 20px 0px 20px 0px;
display: flex;
flex-direction: column;
justify-content: space-between;
......@@ -257,14 +270,14 @@ body {
text-align: center;
}
.plan-descrip {
font-size: 14px;
font-size: 16px;
text-align: center;
font-weight: normal;
}
}
.price-wrapper {
width: 120px;
height: 120px;
width: 180px;
height: 180px;
background-image: linear-gradient(306deg, #3473bf, #0891df);
border-radius: 100px;
@extend .center;
......@@ -274,7 +287,7 @@ body {
.price {
@extend .row;
font-weight: normal;
font-size: 22px;
font-size: 3em;
align-items: baseline;
// h1 {
// font-size: 45px;
......@@ -282,7 +295,8 @@ body {
}
}
.package-details {
font-size: 14px;
padding: 20px;
font-size: 12px;
color: #757575;
.package-detail {
display: flex;
......@@ -343,7 +357,7 @@ body {
@media screen and (max-width: 768px) {
.descriptionStyle {
font-size: 14px;
font-size: 16px;
}
.title {
font-size: 28px;
......@@ -382,12 +396,19 @@ body {
}
}
.navbar {
box-shadow: 0 1px 5px 0 rgba(0, 0, 0, 0.05);
}
.navbar-item {
padding: 0.5rem 0.15rem;
// font-family: "Noto Sans Thai", sans-serif;
.button {
font-family: "Noto Sans Thai", sans-serif;
span{
// font-family: "Noto Sans Thai", sans-serif;
font-size: 16px;
font-weight: bold;
font-style: normal;
span {
font-size: 16px;
font-weight: bold;
font-style: normal;
......@@ -395,8 +416,6 @@ body {
}
}
.bullet-navs {
outline: none;
position: fixed;
......@@ -454,3 +473,9 @@ body {
// @import '~bulma/sass/components/navbar.sass';
// @import '../../node_modules/bulma/sass/layout/hero.sass';
// @import '../../node_modules/bulma/sass/layout/section.sass';
.navbar-burger span {
left: calc(50% - 10px);
width: 20px;
height: 3px;
}
src/translations/en.json
......@@ -25,5 +25,15 @@
"Hook.Descrip": "Get automation works according to condition setting of Trigger",
"Storage.Title": "Datastorage",
"Storage.Descrip": "Collecting data from your device and sensor to data storage.",
"Packages.Title": "Packages"
"Packages.Title": "Packages",
"Standard.Title":"Standard",
"Startup.Title":"Startup",
"Business.Title":"Business",
"Price.Money":"Baht/Month",
"Price.Device.Start":"Connecting limit up to",
"Price.Device.End":"Devices",
"Price.Transfer.Start":"Transfer data up to",
"Price.Transfer.End":"Messages",
"Price.Datapoint.Start":"Data Point Read/Write",
"Price.Datapoint.End":"Points"
}
src/translations/th.json
......@@ -21,9 +21,19 @@
"Trigger.Descrip": "เหตุการณ์ที่เกิดขึ้นเมื่อข้อมูลของอุปกรณ์มีการเปลี่ยนแปลง",
"Control.Title": "การควบคุม",
"Control.Descrip": "การควบคุมการทำงานของอุปกรณ์ผ่าน Cloud Platform",
"Hook.Title": "HOOK",
"Hook.Title": "ฮุก",
"Hook.Descrip": "ทำงานอัตโนมัติตามการเงื่อนไขของตัวกระตุ้นที่ได้ตั้งค่าไว้",
"Storage.Title": "การจัดเก็บข้อมูล",
"Storage.Descrip": "รวบรวมข้อมูลจากอุปกรณ์และเซ็นเซอร์ของคุณไปยังที่จัดเก็บข้อมูล",
"Packages.Title": "แพ็คเกจ"
"Packages.Title": "แพ็คเกจ",
"Standard.Title":"เริ่มต้น",
"Startup.Title":"สตาร์ทอัพ",
"Business.Title":"องค์กร",
"Price.Money":"บาท/เดือน",
"Price.Device.Start":"การเชื่อมต่อได้ถึง",
"Price.Device.End":"อุปกรณ์",
"Price.Transfer.Start":"การรับ-ส่งข้อมูลได้ถึง",
"Price.Transfer.End":"ข้อความ",
"Price.Datapoint.Start":"การอ่านและเก็บค่าข้อมูลได้ถึง",
"Price.Datapoint.End":"จุด"
}
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