Skip to content

L
landingPage-Nexpie
Commit 36b5e8ab by Tonk
Options

add feature section, update style

parent 58a55251
Showing with 277 additions and 30 deletions
public/index.html
...@@ -7,6 +7,8 @@ ...@@ -7,6 +7,8 @@
href="https://fonts.googleapis.com/css?family=Kanit:300,400,500,700&display=swap&subset=thai" href="https://fonts.googleapis.com/css?family=Kanit:300,400,500,700&display=swap&subset=thai"
rel="stylesheet" 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="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" /> <meta name="theme-color" content="#000000" />
...@@ -40,4 +42,8 @@ ...@@ -40,4 +42,8 @@
To create a production bundle, use `npm run build` or `yarn build`. To create a production bundle, use `npm run build` or `yarn build`.
--> -->
</body> </body>
<footer>
<script src="jquery.min.js"></script>
<script src="owlcarousel/owl.carousel.min.js"></script>
</footer>
</html> </html>
src/components/Home/Banner.js
...@@ -3,6 +3,7 @@ import React from "react"; ...@@ -3,6 +3,7 @@ import React from "react";
export default class Banner extends React.Component { export default class Banner extends React.Component {
render() { render() {
return ( return (
<>
<div <div
className="section" className="section"
style={{ style={{
...@@ -32,6 +33,7 @@ export default class Banner extends React.Component { ...@@ -32,6 +33,7 @@ export default class Banner extends React.Component {
</div> </div>
</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 React from "react";
import WindowDimensions from "components/utils/WindowDimension";
const Card = () => { const Card = () => {
return ( return (
...@@ -7,24 +6,27 @@ const Card = () => { ...@@ -7,24 +6,27 @@ const Card = () => {
<figure className="image is-128x128"> <figure className="image is-128x128">
<img <img
className="is-rounded" className="is-rounded"
alt=""
src="https://bulma.io/images/placeholders/128x128.png" src="https://bulma.io/images/placeholders/128x128.png"
/> />
</figure> </figure>
<h1 className="title">Connectivity</h1> <h1 className="why-title">Connectivity</h1>
<p className="description" style={{ textAlign: "center" }}> <p className="why-description" style={{ textAlign: "center" }}>
Connecting your device with NEXPIE IoT platform. Connecting your device with NEXPIE IoT platform.
</p> </p>
</div> </div>
); );
}; };
const WhyUS = ({ isMobileSized }) => { export default class WhyUs extends React.Component {
render() {
return ( return (
<div <div
className="section content-width" className="section content-width"
style={{ style={{
flexDirection: "column", flexDirection: "column",
alignItems: "center", alignItems: "center",
justifyContent: "space-evenly" justifyContent: "space-evenly",
paddingBottom: "60px"
}} }}
> >
<h1 className="title">Why choose NEXPIE </h1> <h1 className="title">Why choose NEXPIE </h1>
...@@ -32,17 +34,17 @@ const WhyUS = ({ isMobileSized }) => { ...@@ -32,17 +34,17 @@ const WhyUS = ({ isMobileSized }) => {
className="descriptionStyle" className="descriptionStyle"
style={{ textAlign: "center", maxWidth: 1140 }} style={{ textAlign: "center", maxWidth: 1140 }}
> >
NEXPIE provide the Internet of Things (IoT) technology tools for helping NEXPIE provide the Internet of Things (IoT) technology tools for
your organization to achieve the most benefit in Commercial Marketing. helping your organization to achieve the most benefit in Commercial
Marketing.
</p> </p>
<div className="row"> <div className="row">
<div className="why-bg" /> <div className="why-bg" />
{[1, 2, 3].map((item, index) => ( {[1, 2, 3].map((item, index) => (
<Card /> <Card key={index} />
))} ))}
</div> </div>
</div> </div>
); );
}; }
}
export default WindowDimensions(WhyUS);
src/pages/Homepage.js
...@@ -3,6 +3,8 @@ import Banner from "../components/Home/Banner"; ...@@ -3,6 +3,8 @@ import Banner from "../components/Home/Banner";
import About from "../components/Home/About"; import About from "../components/Home/About";
import { Scroller, Section } from "react-fully-scrolled"; import { Scroller, Section } from "react-fully-scrolled";
import WhyUs from "components/Home/WhyUs"; import WhyUs from "components/Home/WhyUs";
import Services from "components/Home/Services";
import Features from "components/Home/Features";
class Homepage extends Component { class Homepage extends Component {
constructor(props) { constructor(props) {
...@@ -41,19 +43,24 @@ class Homepage extends Component { ...@@ -41,19 +43,24 @@ class Homepage extends Component {
</Section> </Section>
<Section <Section
style={{ style={{
...baseStyle, ...baseStyle
background: "#00c4ff"
}} }}
> >
<WhyUs /> <WhyUs />
</Section> </Section>
<Section <Section
style={{ style={{
...baseStyle, ...baseStyle
background: "#d52685" }}
>
<Services />
</Section>
<Section
style={{
...baseStyle
}} }}
> >
<h1>4</h1> <Features />
</Section> </Section>
</Scroller> </Scroller>
</div> </div>
......
src/scss/style.scss
...@@ -20,9 +20,8 @@ body { ...@@ -20,9 +20,8 @@ body {
color: $grey; color: $grey;
} }
.section { .section {
padding: 20px; width: 100vw;
width: 100%; height: 100vh;
height: 91%;
display: flex; display: flex;
justify-content: center; justify-content: center;
} }
...@@ -43,40 +42,144 @@ body { ...@@ -43,40 +42,144 @@ body {
color: $primary; color: $primary;
} }
.why-card { .why-card {
max-width: 348px; max-width: 300px;
height: 399px; min-width: 245px;
height: 360px;
border-radius: 6px; border-radius: 6px;
box-shadow: 0 52px 85px 0 rgba(0, 0, 0, 0.09); box-shadow: 0 52px 85px 0 rgba(0, 0, 0, 0.09);
background-color: $white; background-color: $white;
margin: 30px 30px; margin: 30px;
z-index: 1; z-index: 1;
padding: 40px; padding: 40px;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
justify-content: space-evenly; justify-content: space-evenly;
align-items: center; align-items: center;
&.title { .why-title {
font-size: 20px; font-size: 24px;
color: $grey; color: $grey;
} }
&.description { .why-description {
font-size: 16px; font-size: 18px;
color: $lightgrey; 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; display: flex;
flex-direction: row; flex-direction: column;
justify-content: space-evenly; 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 { .why-bg {
width: 93%; width: 85%;
height: 180px; height: 180px;
border-radius: 6px; border-radius: 6px;
background-image: linear-gradient(276deg, #3473bf, #0891df); background-image: linear-gradient(276deg, #3473bf, #0891df);
position: absolute; 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) { @media screen and (max-width: 1087px) {
.navbar-menu { .navbar-menu {
box-shadow: 0 8px 16px rgba(10, 10, 10, 0); box-shadow: 0 8px 16px rgba(10, 10, 10, 0);
...@@ -87,6 +190,10 @@ body { ...@@ -87,6 +190,10 @@ body {
.descriptionStyle { .descriptionStyle {
font-size: 18px; font-size: 18px;
} }
.feature-container .feature-card,
.hidden-feature {
width: 90%;
}
} }
// .dropdown-item { // .dropdown-item {
// display: 'flex'; // 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