Skip to content

L
landingPage-Nexpie
Commit 01b0eae6 by Tonk
Options

add packages section

parent 92b41acc
Showing with 263 additions and 29 deletions
src/components/Home/Banner.js
......@@ -11,25 +11,12 @@ export default class Banner extends React.Component {
}}
>
<div className="content-width">
<h1
style={{
fontSize: 72,
color: "#fff",
fontWeight: 500
}}
>
NEXPIE IOT Platform
</h1>
<div
style={{
display: "flex",
flexDirection: "row",
fontSize: 60,
fontWeight: "normal"
}}
>
<h2 style={{ color: "#ffcc01", marginRight: 20 }}>CONNECT</h2>
<h2 style={{ color: "#fff" }}>EVERYTHING !</h2>
<div className="banner-text-container">
<h1 className="banner-title">NEXPIE IOT Platform</h1>
<div className="banner-descrip-wrapper">
<h2>CONNECT</h2>
<h2>EVERYTHING !</h2>
</div>
</div>
</div>
</div>
......
src/components/Home/Features.js
......@@ -67,7 +67,7 @@ export default class Features extends React.Component {
description={item.description}
/>
))}
{oddItem === 1 ? <div className="feature-card-wrapper" /> : <></>}
{oddItem === 1 ? <div className="feature-card-hidden" /> : <></>}
</div>
</div>
);
......
src/components/Home/Packages.js 0 → 100644
import React from "react";
import { FormattedMessage } from "react-intl";
const Card = () => {
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>
</div>
<div className="price-wrapper">
<div className="price">
<h1>$3</h1>
.99
</div>
<p>/mo</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>
</div>
<div className="package-detail">
<p> Databases</p>
<p>50</p>
</div>
<div className="package-detail">
<p> Adons Domain</p>
<p>5</p>
</div>
</div>
<div className="btn-wrapper">
<div>Choose plan</div>
</div>
</div>
);
};
export default class Packages extends React.Component {
state = {
activeTab: "tab1"
};
render() {
return (
<div
className="section content-width"
style={{
flexDirection: "column",
alignItems: "center",
justifyContent: "space-evenly",
paddingBottom: "60px"
}}
>
<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>
{this.state.activeTab === "tab1" && (
<div className="row">
{[1, 2, 3].map((item, index) => (
<Card />
))}
</div>
)}
{this.state.activeTab === "tab2" && (
<div className="row">
{[1, 2, 3].map((item, index) => (
<Card />
))}
</div>
)}
</div>
</div>
);
}
}
src/pages/Homepage.js
......@@ -5,6 +5,7 @@ import { Scroller, Section } from "react-fully-scrolled";
import WhyUs from "components/Home/WhyUs";
import Services from "components/Home/Services";
import Features from "components/Home/Features";
import Packages from "components/Home/Packages";
class Homepage extends Component {
constructor(props) {
......@@ -62,6 +63,13 @@ class Homepage extends Component {
>
<Features />
</Section>
<Section
style={{
...baseStyle
}}
>
<Packages />
</Section>
</Scroller>
</div>
);
......
src/scss/style.scss
......@@ -41,6 +41,27 @@ body {
font-size: 35px;
color: $primary;
}
.banner-text-container {
display: flex;
flex-direction: column;
margin-top: 50px;
.banner-title {
font-size: 72px;
color: $white;
}
.banner-descrip-wrapper {
@extend .row;
justify-content: start !important;
font-size: 60px;
:first-child {
color: #ffcc01;
margin-right: 15px;
}
:nth-child(2) {
color: $white;
}
}
}
.why-card {
max-width: 300px;
min-width: 245px;
......@@ -66,7 +87,7 @@ body {
}
.service-card {
max-width: 348px;
max-width: 300px;
min-width: 265px;
height: 399px;
border-radius: 6px;
......@@ -128,13 +149,15 @@ body {
display: flex;
flex-wrap: wrap;
justify-content: center;
.feature-card-wrapper {
.feature-card-hidden {
width: 40%;
height: 130px;
margin: 0 35px 20px 35px;
}
.feature-card {
@extend .feature-card-wrapper;
width: 40%;
height: 130px;
margin: 0 35px 20px 35px;
border-radius: 6px;
border: solid 1px rgba(66, 179, 229, 0.35);
background-color: rgba(66, 179, 229, 0.1);
......@@ -168,6 +191,104 @@ body {
}
}
}
.tab-container {
@extend .row;
.tab {
font-size: 18px;
line-height: 1.56;
text-align: center;
color: #4a4a4a;
padding: 0 0 10px 0;
margin: 0 20px;
cursor: pointer;
}
.active {
color: #05366c;
border-bottom: 1px solid #05366c;
}
}
.package-card {
width: 300px;
height: 450px;
border-radius: 6px;
box-shadow: 0 52px 85px 0 rgba(0, 0, 0, 0.09);
border: solid 0.5px #f0f0f0;
background-image: $white;
padding: 35px;
display: flex;
flex-direction: column;
justify-content: space-between;
margin: 0 20px;
.text-wrapper {
color: #757575;
.plan-title {
font-size: 24px;
font-weight: bold;
text-align: center;
}
.plan-descrip {
font-size: 13px;
text-align: center;
}
}
.price-wrapper {
width: 120px;
height: 120px;
background-image: linear-gradient(306deg, #3473bf, #0891df);
border-radius: 100px;
@extend .center;
flex-direction: column;
color: $white;
align-self: center;
.price {
@extend .row;
font-weight: bold;
font-size: 20px;
align-items: baseline;
h1 {
font-size: 45px;
}
}
}
.package-details {
font-size: 14px;
color: #757575;
.package-detail {
display: flex;
justify-content: space-between;
}
}
.btn-wrapper {
width: 250px;
height: 54px;
border-radius: 6px;
background-image: linear-gradient(277deg, #3473bf, #0891df);
align-self: center;
@extend .center;
color: $white;
cursor: pointer;
div {
font-size: 18px;
font-weight: bold;
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;
}
}
}
.center {
display: flex;
align-items: center;
......@@ -188,17 +309,32 @@ body {
.descriptionStyle {
font-size: 18px;
}
.feature-container .feature-card-wrapper {
.feature-container .feature-card {
width: 90%;
&:first-child {
margin-top: 30px;
}
}
.feature-container .feature-card .feature-img {
.feature-container .feature-card .feature-img,
.feature-card-hidden {
display: none;
}
.feature-container .feature-card {
&:first-child {
.feature-container .feature-card-hidden {
display: none;
}
.banner-text-container {
align-items: center;
.banner-title {
font-size: 30px;
}
.banner-descrip-wrapper {
font-size: 24px;
margin-top: 30px;
}
}
.tab-container .tab {
font-size: 12px;
}
}
// .dropdown-item {
// display: 'flex';
......
src/translations/en.json
......@@ -23,5 +23,6 @@
"Hook.Title": "HOOK",
"Hook.Descrip": "Get automation works according to condition setting of Trigger",
"Storage.Title": "DATA STORAGE",
"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"
}
src/translations/th.json
......@@ -23,5 +23,6 @@
"Hook.Title": "HOOK",
"Hook.Descrip": "ทำงานอัตโนมัติตามการเงื่อนไขของตัวกระตุ้นที่ได้ตั้งค่าไว้",
"Storage.Title": "การจัดเก็บข้อมูล",
"Storage.Descrip": "รวบรวมข้อมูลจากอุปกรณ์และเซ็นเซอร์ของคุณไปยังที่จัดเก็บข้อมูล"
"Storage.Descrip": "รวบรวมข้อมูลจากอุปกรณ์และเซ็นเซอร์ของคุณไปยังที่จัดเก็บข้อมูล",
"Packages.Title": "แพ็คเกจ"
}
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