Skip to content

L
landingPage-Nexpie
Commit d2a4610d by Phisek
Options

Redesign Packages

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