Commit 1e381e72 by Tonk

fix header bug, add about section

parent 036ebefc
...@@ -88,7 +88,7 @@ class HeaderComponent extends Component { ...@@ -88,7 +88,7 @@ class HeaderComponent extends Component {
const { open } = this.state; const { open } = this.state;
return ( return (
<Navbar <Navbar
fixed={"top"} // fixed={"top"}
transparent={true} transparent={true}
active={open} active={open}
style={{ padding: "0.5rem 2rem" }} style={{ padding: "0.5rem 2rem" }}
......
import React from "react"; import React from "react";
import WindowDimensions from "components/utils/WindowDimension";
export default class About extends React.Component { const About = ({ isMobileSized }) => {
render() { return (
return ( <div
<> style={{
<div>test</div> display: "flex",
</> flexDirection: isMobileSized ? "column" : "row",
); height: "90%"
} }}
} className="content-width section"
>
{isMobileSized ? null : <div style={{ flex: 1 }} />}
<div
style={{
flex: 1,
padding: isMobileSized ? "10px 20px" : "60",
display: "flex",
flexDirection: "column",
justifyContent: "space-evenly"
}}
>
<h1 className="title">About Nexpie IOT Platform</h1>
<p className="descriptionStyle">
Connecting everything - everywhere with IoT platform to improve your
business productive and efficiency for creates best opportunities to
your organization in new Technology era unlike anything before.
</p>
<p className="descriptionStyle">
NEXPIE IoT Platform provides tools and software libraries that
accelerates the IoT development process, so developers can spend more
time innovating and less time worrying about administration of
back-end servers and data storage.
</p>
</div>
</div>
);
};
export default WindowDimensions(About);
import React from "react"; import React from "react";
import { FormattedMessage } from "react-intl";
export default class Banner extends React.Component { export default class Banner extends React.Component {
render() { render() {
...@@ -10,7 +9,7 @@ export default class Banner extends React.Component { ...@@ -10,7 +9,7 @@ export default class Banner extends React.Component {
background: "linear-gradient(to right bottom, #194db7, #3fd4e6)" background: "linear-gradient(to right bottom, #194db7, #3fd4e6)"
}} }}
> >
<div style={{ marginTop: 60 }}> <div className="content-width">
<h1 <h1
style={{ style={{
fontSize: 72, fontSize: 72,
......
import React, { Component } from "react";
export default function WindowDimensions(WrappedComponent) {
return class extends Component {
state = { width: 0, height: 0 };
componentDidMount() {
this.updateWindowDimensions();
window.addEventListener("resize", this.updateWindowDimensions);
}
componentWillUnmount() {
window.removeEventListener("resize", this.updateWindowDimensions);
}
updateWindowDimensions = () => {
this.setState({ width: window.innerWidth, height: window.innerHeight });
};
render() {
return (
<WrappedComponent
{...this.props}
windowWidth={this.state.width}
windowHeight={this.state.height}
isMobileSized={this.state.width < 770}
/>
);
}
};
}
import React, { Component } from "react"; import React, { Component } from "react";
import { FullPage, Slide } from "react-full-page";
import Banner from "../components/Home/Banner"; 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";
...@@ -16,9 +15,7 @@ class Homepage extends Component { ...@@ -16,9 +15,7 @@ class Homepage extends Component {
render() { render() {
const baseStyle = { const baseStyle = {
// alignItems: 'center',
display: "flex", display: "flex",
justifyContent: "stretch" justifyContent: "stretch"
}; };
......
// color
$primary: #05366c;
$lightprimary: #0384ce;
$grey: #4a4a4a;
$white: #ffffff;
@import "~react-bulma-components/src/index.sass"; @import "~react-bulma-components/src/index.sass";
@import "_variables.scss";
// @import '../../node_modules/bulma/bulma.sass'; // @import '../../node_modules/bulma/bulma.sass';
// @import '../../node_modules/bulma/sass/utilities/_all.sass'; // @import '../../node_modules/bulma/sass/utilities/_all.sass';
// @import '../../node_modules/bulma/sass/base/_all.sass'; // @import '../../node_modules/bulma/sass/base/_all.sass';
...@@ -15,16 +15,31 @@ body { ...@@ -15,16 +15,31 @@ body {
} }
.button.is-white { .button.is-white {
background-color: white; background-color: $white;
border-color: transparent; border-color: transparent;
color: #4a4a4a; color: $grey;
} }
.section { .section {
padding: 20px; padding: 20px;
width: 100%; width: 100%;
height: 100%; height: 100%;
display: "flex"; display: "flex";
justify-content: "stretch"; justify-content: "center";
}
.content-width {
width: 1396px;
max-width: 100%;
margin: 0 auto;
position: relative;
padding: 0 15px;
}
.descriptionStyle {
font-size: 22px;
color: $grey;
}
.title {
font-size: 35px;
color: $primary;
} }
@media screen and (max-width: 1087px) { @media screen and (max-width: 1087px) {
...@@ -32,6 +47,12 @@ body { ...@@ -32,6 +47,12 @@ body {
box-shadow: 0 8px 16px rgba(10, 10, 10, 0); box-shadow: 0 8px 16px rgba(10, 10, 10, 0);
} }
} }
@media screen and (max-width: 768px) {
.descriptionStyle {
font-size: 18px;
}
}
// .dropdown-item { // .dropdown-item {
// display: 'flex'; // display: 'flex';
// flex: 1; // flex: 1;
......
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