Skip to content

L
landingPage-Nexpie
Commit 7aec3190 by Chaiwith Santaweesuk
Options

update

parent b0f44ed9
Showing with 183 additions and 78 deletions
public/index.html
......@@ -44,7 +44,7 @@
<!-- <script src="jquery.min.js"></script> -->
<!-- <script src="owlcarousel/owl.carousel.min.js"></script> -->
</footer>
<script>
<!-- <script>
$(document).ready(function(){
$(window).scroll(function() { // check if scroll event happened
if ($(document).scrollTop() > 100) { // check if user scrolled more than 50 from top of the browser window
......@@ -57,5 +57,5 @@
console.log($(document).scrollTop())
});
});
</script>
</script> -->
</html>
src/components/Home/Footer.js
......@@ -23,12 +23,11 @@ const Footer = ({ isMobileSized }) => {
className="footer container"
style={{
// backgroundColor: '#0384ce',
backgroundImage: 'linear-gradient(276deg, #42b3e5, #3473bf)',
flexDirection: 'column',
backgroundImage: 'linear-gradient(to left, #007ee5, #04bdf8 76%, #05d5ff)', flexDirection: 'column',
alignItems: 'center',
justifyContent: 'center',
padding: '45px',
borderRadius: '0px 0px 6px 6px',
// borderRadius: '0px 0px 6px 6px',
}}>
{isMobileSized ? <Columns>
<div className="column is-2">
......@@ -130,7 +129,8 @@ const Footer = ({ isMobileSized }) => {
</div>
<Columns
style={{
padding: '20px 0px',
// padding: '20px 0px',
padding: '20px 2.5rem 20px 2.5rem'
}}>
{isMobileSized ? <div className="column">Privacy Policy | Terms of Use</div> : null}
<div className="column">Copyright © 2018-2019 Created by NEXPIE Co., Ltd.</div>
......
src/components/Home/Packages.js
import React from 'react';
import { FormattedMessage } from 'react-intl';
import WindowDimensions from '../../utils/WindowDimension';
import cloud01 from 'assets/Cloud01.png';
import cloud02 from 'assets/Cloud02.png';
import cloud03 from 'assets/Cloud03.png';
// import OwlCarousel from 'react-owl-carousel';
// import Columns from 'react-bulma-components/lib/components/columns';
// import Table from 'react-bulma-components/lib/components/table';
......@@ -25,34 +27,34 @@ import WindowDimensions from '../../utils/WindowDimension';
const package_public = [
{
title: <FormattedMessage id="Standard.Title" />,
descrip: <FormattedMessage id="Standard.Descrip" />,
title: <FormattedMessage id="Startup.Title" />,
descrip: <FormattedMessage id="Startup.Descrip" />,
price: 290,
devices: 10,
transfer: '10,000,000',
datapoint: '2,000,000',
readwrite: '500,000',
backgroundColor: "#42b3e5"
imgcloud: cloud01
},
{
title: <FormattedMessage id="Startup.Title" />,
descrip: <FormattedMessage id="Startup.Descrip" />,
title: <FormattedMessage id="Growth.Title" />,
descrip: <FormattedMessage id="Growth.Descrip" />,
price: '1,900',
devices: 100,
transfer: '200,000,000',
datapoint: '60,000,000',
readwrite: '10,000,000',
backgroundColor: "#0384ce"
imgcloud: cloud02
},
{
title: <FormattedMessage id="Business.Title" />,
descrip: <FormattedMessage id="Business.Descrip" />,
title: <FormattedMessage id="Scale.Title" />,
descrip: <FormattedMessage id="Scale.Descrip" />,
price: '7,900',
devices: 500,
transfer: '5,000,000,000',
datapoint: '600,000,000',
readwrite: '90,000,000',
backgroundColor: "#3156a3"
imgcloud: cloud03
},
];
......@@ -61,50 +63,61 @@ const Card = props => {
<div className="package-card">
<div className="text-wrapper">
<h1 className="plan-title">{props.title}</h1>
{/* <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="img-wrapper">
{/* <figure className="image is-120x120"> */}
<img alt="" className="is-rounded" src={props.imgcloud} height="120px" />
{/* </figure> */}
</div>
<div className="price-wrapper">
<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} </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 className="package-detail tb-background">
<div className="columns is-mobile" style={{ marginBottom: 0, marginTop: 0 }}>
<div className="column is-7" style={{ padding: 0 }}><p style={{ textAlign: 'right', fontWeight: 700 }}>{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" />
{/* <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 className="columns is-mobile" style={{ marginBottom: 0, marginTop: 0 }}>
<div className="column is-7" style={{ padding: 0 }}><p style={{ textAlign: 'right', fontWeight: 700 }}>{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>
<hr className="new" />
<div className="package-detail tb-background">
<div className="columns is-mobile" style={{ marginBottom: 0, marginTop: 0 }}>
<div className="column is-7" style={{ padding: 0 }}><p style={{ textAlign: 'right', fontWeight: 700 }}>{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> */}
<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 className="columns is-mobile" style={{ marginBottom: 0, marginTop: 0 }}>
<div className="column is-7" style={{ padding: 0 }}><p style={{ textAlign: 'right', fontWeight: 600 }}>{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>
<hr className="new" />
<div className="package-detail tb-background">
<div className="columns is-mobile" style={{ marginBottom: 0, marginTop: 0 }}>
<div className="column is-7" style={{ padding: 0 }}><p style={{ textAlign: 'right', fontWeight: 600 }}>{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.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 className="columns is-mobile" style={{ marginBottom: 0, marginTop: 0 }}>
<div className="column is-7" style={{ padding: 0 }}><p style={{ textAlign: 'right', fontWeight: 600 }}>{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 className="btn-wrapper">
<div>ORDER NOW</div>
</div> */}
</div>
);
};
......@@ -119,32 +132,39 @@ const Packages = ({ isMobileSized }) => {
justifyContent: 'space-evenly',
paddingBottom: '60px',
overflow: 'hidden',
backgroundColor:'#F3F9FD'
}}>
<h1 className="title">
<FormattedMessage id="Packages.Title" />
</h1>
<div className="feature-container">
<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 className="package-details" style={{ paddingTop: '306px' }}>
<div className="package-detail" style={{ padding: "10px 0px" }}>
<p style={{ color: '#757575' }}><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 className="package-detail" style={{ padding: "10px 0px" }}>
<p style={{ color: '#757575' }}><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 className="package-detail" style={{ padding: "10px 0px" }}>
<p style={{ color: '#757575' }}><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 className="package-detail" style={{ padding: "10px 0px" }}>
<p style={{ color: '#757575' }}><FormattedMessage id="Price.Readwrite.Start" /></p>
{/* <hr className="new" /> */}
</div>
<div className="package-detail" style={{ padding: "10px 0px" }}>
<p style={{ color: '#757575' }}><FormattedMessage id="Price.Datapoint.Start" /></p>
{/* <hr className="new" /> */}
</div>
<div className="package-detail" style={{ padding: "10px 0px" }}>
<p style={{ color: '#757575' }}><FormattedMessage id="Price.Readwrite.Start" /></p>
{/* <hr className="new" /> */}
</div>
</div>
{package_public.map((item, index) => (
<Card
key={index}
......@@ -156,7 +176,7 @@ const Packages = ({ isMobileSized }) => {
transfer={item.transfer}
datapoint={item.datapoint}
readwrite={item.readwrite}
background_Color={item.backgroundColor}
imgcloud={item.imgcloud}
/>
))}
</div>
......
src/scss/style.scss
......@@ -253,6 +253,34 @@ body {
border-bottom: 1px solid #05366c;
}
}
.package-card:hover {
border-radius: 6px;
box-shadow: 0 10px 25px 0 rgba(3, 132, 206, 0.28), 0 2px 24px 0 rgba(0, 0, 0, 0.02);
&:nth-child(2) {
.text-wrapper {
border-top-left-radius:6px;
border-top-right-radius:6px;
color: #fff;
background-color: #42b3e5;
}
}
&:nth-child(3) {
.text-wrapper {
border-top-left-radius:6px;
border-top-right-radius:6px;
color: #fff;
background-color: #0384ce;
}
}
&:nth-child(4) {
.text-wrapper {
border-top-left-radius:6px;
border-top-right-radius:6px;
color: #fff;
background-color: #3156a3;
}
}
}
.package-card {
z-index: 20;
width: 250px;
......@@ -261,17 +289,47 @@ body {
box-shadow: 0 30px 40px 0 rgba(0, 0, 0, 0.09);
border: solid 1px #f0f0f0;
background-image: $white;
background-color: #fff;
padding: 0px 0px 0px 0px;
display: flex;
flex-direction: column;
justify-content: space-between;
margin: 30px 20px;
// &:nth-child(2) {
// .img-wrapper{
// img{border-style: solid;
// border-width: 7px;
// border-color: #D7F4FE;}
// }
// }
// &:nth-child(3) {
// .img-wrapper{
// img{border-style: solid;
// border-width: 7px;
// border-color: #9ED6F1;}
// }
// }
// &:nth-child(4) {
// .img-wrapper{
// img{border-style: solid;
// border-width: 7px;
// border-color: #AAC9E5;}
// }
// }
.img-wrapper {
padding: 15px 15px 0 15px;
display: block;
margin-left: auto;
margin-right: auto;
height: 135px;
width: 150px;
}
.text-wrapper {
color: #757575;
padding: 20px;
padding: 10px 15px;
.plan-title {
font-size: 22px;
font-weight: 500;
font-size: 20px;
font-weight: 800;
text-align: center;
}
.plan-descrip {
......@@ -280,10 +338,24 @@ body {
font-weight: normal;
}
}
&:nth-child(2) {
.price-wrapper {
color: #42b3e5;
}
}
&:nth-child(3) {
.price-wrapper {
color: #0384ce;
}
}
&:nth-child(4) {
.price-wrapper {
color: #3156a3;
}
}
.price-wrapper {
width: 100%;
height: 110px;
height: 90px;
// background-image: linear-gradient(306deg, #3473bf, #0891df);
// border-radius: 6px;
@extend .center;
......@@ -292,22 +364,31 @@ body {
align-self: center;
.price {
@extend .row;
font-weight: normal;
// font-weight: bolder;
font-size: 3em;
align-items: baseline;
// h1 {
// font-size: 45px;
// }
h1 {
font-weight: 800;
line-height: 50px;
}
}
p {
line-height: 15px;
span {
font-size: 12px;
line-height: 15px;
}
}
}
.package-details {
padding: 20px;
padding: 0px 0px 10px 0px;
font-size: 14px;
color: #757575;
.package-detail {
//display: flex;
//justify-content: space-between;
padding: 10px;
text-align: center;
.column {
span {
......@@ -315,6 +396,9 @@ body {
}
}
}
.tb-background{
background-color: rgba(0, 126, 229, 0.12);
}
}
.btn-wrapper {
......@@ -502,7 +586,7 @@ body {
}
.FooterStyle {
padding: 0rem 2.5rem 0rem 2.5rem;
// padding: 0rem 2.5rem 0rem 2.5rem;
font-size: 14px;
color: $white;
font-weight: normal;
......@@ -552,6 +636,7 @@ hr.new {
text-transform: uppercase;
}
html.has-navbar-fixed-top, body.has-navbar-fixed-top{
padding-top : 0px;
html.has-navbar-fixed-top,
body.has-navbar-fixed-top {
padding-top: 0px;
}
src/translations/en.json
......@@ -38,13 +38,13 @@
"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",
"Standard.Title":"Standard",
"Standard.Descrip":"This is standard hosting plan",
"Startup.Title":"Startup",
"Packages.Title": "PACKAGES",
"Startup.Title":"STARTUP",
"Startup.Descrip":"This is standard hosting plan",
"Business.Title":"Business",
"Business.Descrip":"This is standard hosting plan",
"Growth.Title":"GROWTH",
"Growth.Descrip":"This is standard hosting plan",
"Scale.Title":"SCALE",
"Scale.Descrip":"This is standard hosting plan",
"Price.Money":"Baht/Month",
"Price.Device.Start":"Connecting limit up to",
"Price.Device.End":"Devices",
......
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