Skip to content

L
landingPage-Nexpie
Commit d2a4610d by Phisek
Options

Redesign Packages

parent 2472f715
Showing with 119 additions and 104 deletions
src/components/Home/Packages.js
import React from 'react'; import React from 'react';
import { FormattedMessage } from 'react-intl'; import { FormattedMessage } from 'react-intl';
import WindowDimensions from '../../utils/WindowDimension';
// import OwlCarousel from 'react-owl-carousel'; // import OwlCarousel from 'react-owl-carousel';
// import Columns from 'react-bulma-components/lib/components/columns'; // import Columns from 'react-bulma-components/lib/components/columns';
// import Table from 'react-bulma-components/lib/components/table'; // import Table from 'react-bulma-components/lib/components/table';
...@@ -24,114 +26,110 @@ import { FormattedMessage } from 'react-intl'; ...@@ -24,114 +26,110 @@ import { FormattedMessage } from 'react-intl';
const package_public = [ const package_public = [
{ {
title: <FormattedMessage id="Standard.Title" />, title: <FormattedMessage id="Standard.Title" />,
descrip: <FormattedMessage id="Standard.Descrip" />,
price: 290, price: 290,
devices: 10, devices: 10,
transfer: "262,200", transfer: '262,200',
datapoint: "1,048,600", datapoint: '1,048,600',
}, },
{ {
title: <FormattedMessage id="Startup.Title" />, title: <FormattedMessage id="Startup.Title" />,
price: "1,900", descrip: <FormattedMessage id="Startup.Descrip" />,
price: '1,900',
devices: 100, devices: 100,
transfer: "1,835,000", transfer: '1,835,000',
datapoint: "7,340,000", datapoint: '7,340,000',
}, },
{ {
title: <FormattedMessage id="Business.Title" />, title: <FormattedMessage id="Business.Title" />,
price: "2,500", descrip: <FormattedMessage id="Business.Descrip" />,
price: '2,500',
devices: 150, devices: 150,
transfer: "2,621,500", transfer: '2,621,500',
datapoint: "10,485,800", datapoint: '10,485,800',
} },
]; ];
const Card = (props) => { const Card = props => {
return ( return (
<div className="package-card"> <div className="package-card">
<div className="text-wrapper"> <div className="text-wrapper">
<h1 className="plan-title">{props.title}</h1> <h1 className="plan-title">{props.title}</h1>
<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"> <div className="price-wrapper">
<div className="price"> <div className="price"><h1>{props.price}</h1></div>
<h1>{props.price}</h1> <p><FormattedMessage id="Price.Money" /></p>
</div>
<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> <FormattedMessage id="Price.Device.Start"/></p> <p>{props.devices} <FormattedMessage id="Price.Device.End" /></p>
<p>{props.devices} <FormattedMessage id="Price.Device.End"/></p> <hr className="new" />
</div> </div>
<div className="package-detail"> <div className="package-detail">
<p> <FormattedMessage id="Price.Transfer.Start"/></p> <p>{props.transfer} <FormattedMessage id="Price.Transfer.End" /></p>
<p>{props.transfer} <FormattedMessage id="Price.Transfer.End"/></p> <hr className="new" />
</div> </div>
<div className="package-detail"> <div className="package-detail">
<p> <FormattedMessage id="Price.Datapoint.Start"/></p> <p>{props.datapoint} <FormattedMessage id="Price.Datapoint.End" /></p>
<p>{props.datapoint} <FormattedMessage id="Price.Datapoint.End"/></p> <hr className="new" />
</div> </div>
</div> </div>
{/* <div className="btn-wrapper"> <div className="btn-wrapper">
<div>Choose plan</div> <div>ORDER NOW</div>
</div> */} </div>
</div> </div>
); );
}; };
export default class Packages extends React.Component { const Packages = ({ isMobileSized }) => {
state = { return (
activeTab: 'tab1', <div
}; className="section content-width"
style={{
flexDirection: 'column',
alignItems: 'center',
justifyContent: 'space-evenly',
paddingBottom: '60px',
overflow: 'hidden',
}}>
<h1 className="title">
<FormattedMessage id="Packages.Title" />
</h1>
render() { <div className="feature-container">
return (
<div <div className="package-details" style={{ paddingTop: '270px' }}>
className="section content-width" <div className="package-detail">
style={{ <p><FormattedMessage id="Price.Device.Start"/></p>
flexDirection: 'column', <hr className="new" />
alignItems: 'center',
justifyContent: 'space-evenly',
paddingBottom: '60px',
overflow: 'hidden',
}}>
<h1 className="title">
<FormattedMessage id="Packages.Title" />
</h1>
<div className="tab-container">
<div
onClick={() => {
this.setState({
activeTab: 'tab1',
});
}}
className={this.state.activeTab === 'tab1' ? 'active tab' : 'tab'}>
Public Platform (sharing resources)
</div>
<div
onClick={() => {
this.setState({
activeTab: 'tab2',
});
}}
className={this.state.activeTab === 'tab2' ? 'active tab' : 'tab'}>
Private Platform (dedicated resources)
</div>
</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} />
))}
</div> </div>
)} <div className="package-detail">
</div> <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>
{package_public.map(item => (
<Card
title={item.title}
descrip={item.descrip}
money={item.money}
price={item.price}
devices={item.devices}
transfer={item.transfer}
datapoint={item.datapoint}
/>
))}
</div> </div>
); </div>
} );
} };
export default WindowDimensions(Packages);
src/scss/style.scss
...@@ -252,18 +252,19 @@ body { ...@@ -252,18 +252,19 @@ body {
} }
.package-card { .package-card {
width: 300px; width: 300px;
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 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: 20px 0px 20px 0px; padding: 20px 0px 40px 0px;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
justify-content: space-between; justify-content: space-between;
margin: 30px 20px; margin: 30px 20px;
.text-wrapper { .text-wrapper {
color: #757575; color: #757575;
padding: 20px;
.plan-title { .plan-title {
font-size: 22px; font-size: 22px;
font-weight: 500; font-weight: 500;
...@@ -275,11 +276,12 @@ body { ...@@ -275,11 +276,12 @@ body {
font-weight: normal; font-weight: normal;
} }
} }
.price-wrapper { .price-wrapper {
width: 150px; width: 100%;
height: 150px; height: 110px;
background-image: linear-gradient(306deg, #3473bf, #0891df); background-image: linear-gradient(306deg, #3473bf, #0891df);
border-radius: 100px; border-radius: 6px;
@extend .center; @extend .center;
flex-direction: column; flex-direction: column;
color: $white; color: $white;
...@@ -294,45 +296,51 @@ body { ...@@ -294,45 +296,51 @@ body {
// } // }
} }
} }
.package-details { .package-details {
padding: 20px; padding: 20px;
font-size: 12px; font-size: 12px;
color: #757575; color: #757575;
.package-detail { .package-detail {
display: flex; //display: flex;
justify-content: space-between; //justify-content: space-between;
text-align: center;
} }
} }
.btn-wrapper { .btn-wrapper {
width: 250px; width: 200px;
height: 54px; height: 39px;
border-radius: 6px; border-radius: 50px;
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: 16px; font-size: 14px;
font-weight: bold; font-weight: normal;
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;
...@@ -515,3 +523,9 @@ body { ...@@ -515,3 +523,9 @@ body {
color: $white; color: $white;
font-weight: normal; font-weight: normal;
} }
hr.new {
border-top: 1px dashed #ddd;;
}
src/translations/en.json
...@@ -32,9 +32,12 @@ ...@@ -32,9 +32,12 @@
"Storage.Title": "Datastorage", "Storage.Title": "Datastorage",
"Storage.Descrip": "Collecting data from your device and sensor to data storage.", "Storage.Descrip": "Collecting data from your device and sensor to data storage.",
"Packages.Title": "Packages", "Packages.Title": "Packages",
"Standard.Title":"Standard", "Standard.Title":"Standard Plan",
"Standard.Descrip":"This is standard hosting plan",
"Startup.Title":"Startup", "Startup.Title":"Startup",
"Startup.Descrip":"This is standard hosting plan",
"Business.Title":"Business", "Business.Title":"Business",
"Business.Descrip":"This is standard hosting plan",
"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",
......
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