Skip to content

L
landingPage-Nexpie
Commit 36b5e8ab by Tonk
Options

add feature section, update style

parent 58a55251
Showing with 323 additions and 76 deletions
public/index.html
......@@ -7,6 +7,8 @@
href="https://fonts.googleapis.com/css?family=Kanit:300,400,500,700&display=swap&subset=thai"
rel="stylesheet"
/>
<link rel="stylesheet" href="owlcarousel/owl.carousel.min.css" />
<link rel="stylesheet" href="owlcarousel/owl.theme.default.min.css" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" />
......@@ -40,4 +42,8 @@
To create a production bundle, use `npm run build` or `yarn build`.
-->
</body>
<footer>
<script src="jquery.min.js"></script>
<script src="owlcarousel/owl.carousel.min.js"></script>
</footer>
</html>
src/components/Home/Banner.js
......@@ -3,35 +3,37 @@ import React from "react";
export default class Banner extends React.Component {
render() {
return (
<div
className="section"
style={{
background: "linear-gradient(to right bottom, #194db7, #3fd4e6)"
}}
>
<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="section"
style={{
background: "linear-gradient(to right bottom, #194db7, #3fd4e6)"
}}
>
<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>
</div>
</div>
</div>
</>
);
}
}
src/components/Home/Features.js 0 → 100644
import React from "react";
const feature = [
{
title: "MONITORING",
description: "Visualize your device and sensor data real-time"
},
{
title: "TRIGGER",
description: "Event that happen via Device data changed"
},
{
title: "CONTROLLING",
description: "Controlling how device works via Cloud Platform."
},
{
title: "HOOK",
description:
"Get automation works according to condition setting of Trigger"
},
{
title: "DATA STORAGE",
description: "Collecting data from your device and sensor to data storage."
}
];
const Card = props => {
return (
<div className="feature-card row">
<div className="feature-img">
<figure className="image is-64x64">
<img alt="" src="https://bulma.io/images/placeholders/64x64.png" />
</figure>
</div>
<div className="feature-text-wrapper">
<h1 className="feature-title">{props.title}</h1>
<p className="feature-descrip">{props.description}</p>
</div>
</div>
);
};
export default class Features extends React.Component {
render() {
const oddItem = feature.length % 2;
return (
<div
className="section content-width"
style={{
flexDirection: "column",
alignItems: "center",
justifyContent: "space-evenly",
paddingBottom: "60px"
}}
>
<h1 className="title">Features</h1>
<p
className="descriptionStyle"
style={{ textAlign: "center", maxWidth: 1140 }}
>
The majority of NEXPIE functionality that helps to develop your
connected devices and smart things.
</p>
<div className="feature-container">
{feature.map((item, index) => (
<Card
key={index}
title={item.title}
description={item.description}
/>
))}
{oddItem === 1 ? <div className="hidden-feature" /> : <></>}
</div>
</div>
);
}
}
src/components/Home/Services.js 0 → 100644
import React from "react";
const Card = () => {
return (
<div className="service-card">
<div className="img-wrapper">
<figure className="image is-128x128">
<img alt="" src="https://bulma.io/images/placeholders/128x128.png" />
</figure>
</div>
<div className="service-wrapper">
<h1 className="service-title">Connectivity</h1>
<p className="service-description">
Connecting your device with NEXPIE IoT platform.
</p>
</div>
</div>
);
};
export default class Services extends React.Component {
render() {
return (
<div
className="section content-width"
style={{
flexDirection: "column",
alignItems: "center",
justifyContent: "space-evenly",
paddingBottom: "60px"
}}
>
<h1 className="title">Our Services</h1>
<p
className="descriptionStyle"
style={{ textAlign: "center", maxWidth: 1140 }}
>
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">
{[1, 2, 3].map((item, index) => (
<Card key={index} />
))}
</div>
</div>
);
}
}
src/components/Home/WhyUs.js
import React from "react";
import WindowDimensions from "components/utils/WindowDimension";
const Card = () => {
return (
......@@ -7,42 +6,45 @@ const Card = () => {
<figure className="image is-128x128">
<img
className="is-rounded"
alt=""
src="https://bulma.io/images/placeholders/128x128.png"
/>
</figure>
<h1 className="title">Connectivity</h1>
<p className="description" style={{ textAlign: "center" }}>
<h1 className="why-title">Connectivity</h1>
<p className="why-description" style={{ textAlign: "center" }}>
Connecting your device with NEXPIE IoT platform.
</p>
</div>
);
};
const WhyUS = ({ isMobileSized }) => {
return (
<div
className="section content-width"
style={{
flexDirection: "column",
alignItems: "center",
justifyContent: "space-evenly"
}}
>
<h1 className="title">Why choose NEXPIE </h1>
<p
className="descriptionStyle"
style={{ textAlign: "center", maxWidth: 1140 }}
export default class WhyUs extends React.Component {
render() {
return (
<div
className="section content-width"
style={{
flexDirection: "column",
alignItems: "center",
justifyContent: "space-evenly",
paddingBottom: "60px"
}}
>
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="why-bg" />
{[1, 2, 3].map((item, index) => (
<Card />
))}
<h1 className="title">Why choose NEXPIE </h1>
<p
className="descriptionStyle"
style={{ textAlign: "center", maxWidth: 1140 }}
>
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="why-bg" />
{[1, 2, 3].map((item, index) => (
<Card key={index} />
))}
</div>
</div>
</div>
);
};
export default WindowDimensions(WhyUS);
);
}
}
src/pages/Homepage.js
......@@ -3,6 +3,8 @@ import Banner from "../components/Home/Banner";
import About from "../components/Home/About";
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";
class Homepage extends Component {
constructor(props) {
......@@ -41,19 +43,24 @@ class Homepage extends Component {
</Section>
<Section
style={{
...baseStyle,
background: "#00c4ff"
...baseStyle
}}
>
<WhyUs />
</Section>
<Section
style={{
...baseStyle,
background: "#d52685"
...baseStyle
}}
>
<Services />
</Section>
<Section
style={{
...baseStyle
}}
>
<h1>4</h1>
<Features />
</Section>
</Scroller>
</div>
......
src/scss/style.scss
......@@ -20,9 +20,8 @@ body {
color: $grey;
}
.section {
padding: 20px;
width: 100%;
height: 91%;
width: 100vw;
height: 100vh;
display: flex;
justify-content: center;
}
......@@ -43,40 +42,144 @@ body {
color: $primary;
}
.why-card {
max-width: 348px;
height: 399px;
max-width: 300px;
min-width: 245px;
height: 360px;
border-radius: 6px;
box-shadow: 0 52px 85px 0 rgba(0, 0, 0, 0.09);
background-color: $white;
margin: 30px 30px;
margin: 30px;
z-index: 1;
padding: 40px;
display: flex;
flex-direction: column;
justify-content: space-evenly;
align-items: center;
&.title {
font-size: 20px;
.why-title {
font-size: 24px;
color: $grey;
}
&.description {
font-size: 16px;
.why-description {
font-size: 18px;
color: $lightgrey;
}
}
.row {
.service-card {
max-width: 348px;
min-width: 265px;
height: 399px;
border-radius: 6px;
box-shadow: 0 52px 85px 0 rgba(0, 0, 0, 0.09);
border: solid 0.5px #f0f0f0;
background-color: $white;
margin: 30px;
display: flex;
flex-direction: row;
justify-content: space-evenly;
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: 100%;
margin: 60 0;
display: flex;
align-items: center;
justify-content: center;
}
.service-wrapper {
width: 100%;
max-height: 170px;
color: $white;
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-between;
padding: 30px 40px 40px 40px;
.service-title {
font-size: 24px;
font-weight: 500;
}
.service-description {
font-size: 18px;
text-align: center;
font-weight: 100;
}
}
}
.why-bg {
width: 93%;
width: 85%;
height: 180px;
border-radius: 6px;
background-image: linear-gradient(276deg, #3473bf, #0891df);
position: absolute;
}
.feature-container {
display: flex;
flex-wrap: wrap;
justify-content: center;
.hidden-feature {
width: 40%;
height: 130px;
margin: 0 35px 20px 35px;
}
.feature-card {
width: 40%;
height: 130px;
border-radius: 6px;
border: solid 1px rgba(66, 179, 229, 0.35);
background-color: rgba(66, 179, 229, 0.1);
margin: 0 35px 20px 35px;
padding: 10px;
.feature-img {
@extend .center;
.image {
margin: 10px;
}
}
.feature-text-wrapper {
padding: 10px 20px 20px 20px;
display: flex;
flex-direction: column;
justify-content: center;
max-width: 400px;
.feature-title {
font-size: 22px;
letter-spacing: 1px;
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
background-image: linear-gradient(277deg, #3156a3, #3984dd);
}
.feature-descrip {
font-size: 18px;
line-height: 1.33;
color: #777777;
}
}
}
}
.center {
display: flex;
align-items: center;
justify-content: center;
}
.row {
display: flex;
flex-direction: row;
justify-content: space-evenly;
}
@media screen and (max-width: 1087px) {
.navbar-menu {
box-shadow: 0 8px 16px rgba(10, 10, 10, 0);
......@@ -87,6 +190,10 @@ body {
.descriptionStyle {
font-size: 18px;
}
.feature-container .feature-card,
.hidden-feature {
width: 90%;
}
}
// .dropdown-item {
// display: 'flex';
......
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