Skip to content

L
landingPage-Nexpie
Commit bc654fd5 by Phisek
Options

Add Contact , Footer

parent 164c9cb2
Showing with 195 additions and 2 deletions
src/components/Home/Contact.js 0 → 100644
import React, { Component } from 'react';
import { FormattedMessage } from 'react-intl';
export class Contact extends Component {
render() {
return (
<div>
<div
// className="section content-width"
style={{
backgroundColor: '#f2f2f2',
flexDirection: 'column',
alignItems: 'center',
justifyContent: 'center',
//paddingTop: '30px',
}}>
<div className="content-wrapper">
<div className="columns is-vcentered">
<div className="column is-6">
<div className="">
<img
className="is-rounded"
alt=""
src="http://bulma.io/images/placeholders/1280x960.png"
/>
</div>
</div>
<div className="column is-6" style={{ padding: '50px' }}>
<div className="side-feature-content">
<h1 style={{ fontSize: '40px', fontWeight: '600' }}>
<FormattedMessage id="Contact.Title" />
</h1>
<p className="descriptionStyle" style={{ margin: '50px 0' }}>
<FormattedMessage id="Contact.Descrip" />
</p>
<button className="button is-link">Get Started</button>
</div>
</div>
</div>
</div>
</div>
</div>
);
}
}
export default Contact;
src/components/Home/Footer.js 0 → 100644
import React, { Component } from 'react';
import { FaMapMarkerAlt, FaEnvelope } from 'react-icons/fa';
import { IoIosCall } from 'react-icons/io';
export class Footer extends Component {
render() {
return (
<div>
<footer>
<div className="container">
<div
className="FooterStyle"
style={{
backgroundColor: '#2e3034',
flexDirection: 'column',
alignItems: 'center',
justifyContent: 'center',
}}>
<div
className="footer container"
style={{
backgroundColor: '#0384ce',
flexDirection: 'column',
alignItems: 'center',
justifyContent: 'center',
padding: '60px',
borderRadius: '0px 0px 6px 6px',
}}>
<div
className="columns"
//is-multiline is-centered
>
<div className="column is-1">
<div className="icons">
<FaMapMarkerAlt
style={{
height: '33px',
width: '33px',
color: '#063e66',
}}
/>
</div>
</div>
<div className="column is-3">
<p className="footer-title">
NEXPIE Co. Ltd. | ไทยซัมมิท ทาวเวอร์ <br /> (Thai Summit Tower) <br />
ชั้น 14, 1768 ถนนเพชรบุรี แขวงบางกะปิ
เขตห้วยขวาง กรุงเทพมหานคร 10310
</p>
</div>
<div className="column is-1">
<div className="icons">
<FaEnvelope
style={{
height: '33px',
width: '33px',
color: '#063e66',
}}
/>
</div>
</div>
<div className="column is-3">
<p className="footer-title">Send an Email</p>
<p className="footer-description">contact@nexpie.com</p>
</div>
<div className="column is-1">
<div className="icons">
<IoIosCall
style={{
height: '33px',
width: '33px',
color: '#063e66',
}}
/>
</div>
</div>
<div className="column is-3">
<p className="footer-title">Call Us</p>
<p className="footer-description">+6661-421-1289</p>
</div>
</div>
</div>
<p
style={{
padding: '20px',
}}>
Copyright © 2018-2019 Created by NEXPIE Co., Ltd.
</p>
</div>
</div>
</footer>
</div>
);
}
}
export default Footer;
src/pages/Homepage.js
...@@ -10,6 +10,9 @@ import WindowDimension from '../utils/WindowDimension'; ...@@ -10,6 +10,9 @@ import WindowDimension from '../utils/WindowDimension';
import 'owl.carousel/dist/assets/owl.carousel.css'; import 'owl.carousel/dist/assets/owl.carousel.css';
import 'owl.carousel/dist/assets/owl.theme.default.css'; import 'owl.carousel/dist/assets/owl.theme.default.css';
import { Fullpage, Slide } from 'fullpage-react'; import { Fullpage, Slide } from 'fullpage-react';
import Contact from 'components/Home/Contact';
import Footer from 'components/Home/Footer';
// import { FiChevronUp } from 'react-icons/fi'; // import { FiChevronUp } from 'react-icons/fi';
const { changeFullpageSlide } = Fullpage; const { changeFullpageSlide } = Fullpage;
...@@ -115,6 +118,8 @@ class Homepage extends Component { ...@@ -115,6 +118,8 @@ class Homepage extends Component {
<Services /> <Services />
<Features /> <Features />
<Packages /> <Packages />
<Contact />
<Footer />
</> </>
); );
} }
......
src/scss/style.scss
...@@ -479,3 +479,39 @@ body { ...@@ -479,3 +479,39 @@ body {
width: 20px; width: 20px;
height: 3px; height: 3px;
} }
/////////
.footer-description {
font-size: 24px;
font-weight: bold;
}
.footer-title {
color: $white;
font-size: 16px;
font-weight: normal;
}
.icons {
position: relative;
height: 54px;
width: 54px;
background: #FFF;
border-radius: 50%;
margin: 0 auto;
display: -ms-flexbox;
display: flex;
-ms-flex-pack: center;
justify-content: center;
-ms-flex-align: center;
align-items: center;
}
.FooterStyle {
padding: 0rem 2.5rem 0rem 2.5rem;
font-size: 16px;
color: $white;
font-weight: normal;
}
src/translations/en.json
...@@ -35,5 +35,7 @@ ...@@ -35,5 +35,7 @@
"Price.Transfer.Start":"Transfer data up to", "Price.Transfer.Start":"Transfer data up to",
"Price.Transfer.End":"Messages", "Price.Transfer.End":"Messages",
"Price.Datapoint.Start":"Data Point Read/Write", "Price.Datapoint.Start":"Data Point Read/Write",
"Price.Datapoint.End":"Points" "Price.Datapoint.End":"Points",
"Contact.Title":"Ready to get started ?",
"Contact.Descrip":"Connecting everything - everywhere with IoT platform to improve your business productive and efficiency."
} }
src/translations/th.json
...@@ -35,5 +35,7 @@ ...@@ -35,5 +35,7 @@
"Price.Transfer.Start":"การรับ-ส่งข้อมูลได้ถึง", "Price.Transfer.Start":"การรับ-ส่งข้อมูลได้ถึง",
"Price.Transfer.End":"ข้อความ", "Price.Transfer.End":"ข้อความ",
"Price.Datapoint.Start":"การอ่านและเก็บค่าข้อมูลได้ถึง", "Price.Datapoint.Start":"การอ่านและเก็บค่าข้อมูลได้ถึง",
"Price.Datapoint.End":"จุด" "Price.Datapoint.End":"จุด",
"Contact.Title":"Ready to get started ?",
"Contact.Descrip":"Connecting everything - everywhere with IoT platform to improve your business productive and efficiency."
} }
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