Skip to content

L
landingPage-Nexpie
Commit 11cad4e4 by Chaiwith Santaweesuk
Options

update

parent d2a4610d
Showing with 101 additions and 61 deletions
public/index.html
......@@ -4,8 +4,8 @@
<meta charset="utf-8" />
<link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico" />
<link href="https://fonts.googleapis.com/css?family=Mitr:300&display=swap" rel="stylesheet">
<link rel="stylesheet" href="owlcarousel/owl.carousel.min.css" />
<link rel="stylesheet" href="owlcarousel/owl.theme.default.min.css" />
<!-- <link rel="stylesheet" href="owlcarousel/owl.carousel.min.css" /> -->
<!-- <link rel="stylesheet" href="owlcarousel/owl.theme.default.min.css" /> -->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" />
......@@ -42,6 +42,6 @@
</body>
<footer>
<script src="jquery.min.js"></script>
<script src="owlcarousel/owl.carousel.min.js"></script>
<!-- <script src="owlcarousel/owl.carousel.min.js"></script> -->
</footer>
</html>
src/_variables.sass
$primary: #42b3e5;
$light: #f2f2f2
$lightprimary: #0384ce;
$light: #f2f2f2;
$dropdown-item-active-color: #ffffff;
$dropdown-item-active-background-color: $primary;
......
src/components/Header.js
......@@ -14,10 +14,10 @@ import WindowDimensions from '../utils/WindowDimension';
const ButtonNavs = [
{ index: 0, name: <FormattedMessage id="BottomNav.Home" /> },
{ index: 1, name: <FormattedMessage id="BottomNav.Docs" /> },
{ index: 2, name: <FormattedMessage id="BottomNav.Features" /> },
{ index: 3, name: <FormattedMessage id="BottomNav.Benefits" /> },
{ index: 4, name: <FormattedMessage id="BottomNav.Customer" /> },
{ index: 5, name: <FormattedMessage id="BottomNav.Packages" /> },
// { index: 2, name: <FormattedMessage id="BottomNav.Features" /> },
// { index: 3, name: <FormattedMessage id="BottomNav.Benefits" /> },
// { index: 4, name: <FormattedMessage id="BottomNav.Customer" /> },
// { index: 5, name: <FormattedMessage id="BottomNav.Packages" /> },
{ index: 6, name: ['EN', 'TH'] },
{ index: 7, name: <FormattedMessage id="GoToDashboard" /> },
];
......@@ -36,7 +36,7 @@ class HeaderComponent extends Component {
const { activeIndex } = this.state;
return (
<Navbar.Item key={`Button${index}`} renderAs="a" href="#">
<Button fullwidth color={index === activeIndex ? 'primary' : 'white'}>
<Button fullwidth color={index === activeIndex ? 'menu-nexpie' : 'white'}>
{firstSection.name}
</Button>
</Navbar.Item>
......@@ -61,11 +61,11 @@ class HeaderComponent extends Component {
}}>
<Dropdown.Item value="en">
<Flag nation="gb" />
{ButtonNavs[6].name[0]}
{ButtonNavs[2].name[0]}
</Dropdown.Item>
<Dropdown.Item value="th">
<Flag nation="th" />
{ButtonNavs[6].name[1]}
{ButtonNavs[2].name[1]}
</Dropdown.Item>
</Dropdown>
</Navbar.Item>
......@@ -88,7 +88,7 @@ class HeaderComponent extends Component {
this.props.setLanguage(this.props.language === 'en' ? 'th' : 'en');
}}>
<Flag nation={this.props.language === 'en' ? 'th' : 'gb'} style={{ marginBottom: 0 }} />
{ButtonNavs[6].name[this.props.language === 'en' ? 1 : 0]}
{ButtonNavs[2].name[this.props.language === 'en' ? 1 : 0]}
</Button>
</Navbar.Item>
);
......@@ -96,8 +96,8 @@ class HeaderComponent extends Component {
NavItems.push(
this.props.isTabletSized ? renderToggleLanguageButton() : renderToggleLanguage(),
<Navbar.Item key={`Button${7}`} href="#">
<Button style={{ paddingVertical: '0.1em'}} fullwidth color={'light'}>
{ButtonNavs[7].name}
<Button style={{ paddingVertical: '0.1em'}} fullwidth color={'blue-nexpie'}>
{ButtonNavs[3].name}
</Button>
</Navbar.Item>
);
......
src/components/Home/Footer.js
......@@ -22,11 +22,12 @@ const Footer = ({ isMobileSized }) => {
<div
className="footer container"
style={{
backgroundColor: '#0384ce',
// backgroundColor: '#0384ce',
backgroundImage: 'linear-gradient(276deg, #42b3e5, #3473bf)',
flexDirection: 'column',
alignItems: 'center',
justifyContent: 'center',
padding: '60px',
padding: '45px',
borderRadius: '0px 0px 6px 6px',
}}>
<Columns>
......
src/components/Home/Packages.js
......@@ -31,6 +31,7 @@ const package_public = [
devices: 10,
transfer: '262,200',
datapoint: '1,048,600',
backgroundColor:"#42b3e5"
},
{
title: <FormattedMessage id="Startup.Title" />,
......@@ -39,6 +40,7 @@ const package_public = [
devices: 100,
transfer: '1,835,000',
datapoint: '7,340,000',
backgroundColor:"#0384ce"
},
{
title: <FormattedMessage id="Business.Title" />,
......@@ -47,6 +49,7 @@ const package_public = [
devices: 150,
transfer: '2,621,500',
datapoint: '10,485,800',
backgroundColor:"#3156a3"
},
];
......@@ -55,10 +58,10 @@ const Card = props => {
<div className="package-card">
<div className="text-wrapper">
<h1 className="plan-title">{props.title}</h1>
<p className="plan-descrip">{props.descrip}</p>
{/* <p className="plan-descrip">{props.descrip}</p> */}
{/* <p className="plan-descrip">This is standard hositng plan</p> */}
</div>
<div className="price-wrapper">
<div className="price-wrapper" style={{backgroundColor:props.background_Color}}>
<div className="price"><h1>{props.price}</h1></div>
<p><FormattedMessage id="Price.Money" /></p>
</div>
......@@ -76,9 +79,9 @@ const Card = props => {
<hr className="new" />
</div>
</div>
<div className="btn-wrapper">
{/* <div className="btn-wrapper">
<div>ORDER NOW</div>
</div>
</div> */}
</div>
);
};
......@@ -99,8 +102,7 @@ const Packages = ({ isMobileSized }) => {
</h1>
<div className="feature-container">
<div className="package-details" style={{ paddingTop: '270px' }}>
<div className="package-details" style={{ paddingTop: '234px' }}>
<div className="package-detail">
<p><FormattedMessage id="Price.Device.Start"/></p>
<hr className="new" />
......@@ -116,8 +118,9 @@ const Packages = ({ isMobileSized }) => {
</div>
{package_public.map(item => (
{package_public.map((item, index) => (
<Card
key={index}
title={item.title}
descrip={item.descrip}
money={item.money}
......@@ -125,6 +128,7 @@ const Packages = ({ isMobileSized }) => {
devices={item.devices}
transfer={item.transfer}
datapoint={item.datapoint}
background_Color={item.backgroundColor}
/>
))}
</div>
......
src/scss/style.scss
......@@ -28,7 +28,7 @@ body {
.button.is-white {
background-color: $white;
border-color: transparent;
color: $grey;
color: #666;
}
.section {
width: 100vw;
......@@ -251,13 +251,13 @@ body {
}
}
.package-card {
width: 300px;
width: 250px;
//height: 400px;
border-radius: 6px;
box-shadow: 0 52px 40px 0 rgba(0, 0, 0, 0.09);
border: solid 0.5px #f0f0f0;
background-image: $white;
padding: 20px 0px 40px 0px;
padding: 0px 0px 0px 0px;
display: flex;
flex-direction: column;
justify-content: space-between;
......@@ -280,8 +280,8 @@ body {
.price-wrapper {
width: 100%;
height: 110px;
background-image: linear-gradient(306deg, #3473bf, #0891df);
border-radius: 6px;
// background-image: linear-gradient(306deg, #3473bf, #0891df);
// border-radius: 6px;
@extend .center;
flex-direction: column;
color: $white;
......@@ -297,16 +297,14 @@ body {
}
}
.package-details {
padding: 20px;
font-size: 12px;
font-size: 14px;
color: #757575;
.package-detail {
//display: flex;
//justify-content: space-between;
text-align: center;
}
}
......@@ -319,7 +317,7 @@ body {
@extend .center;
color: $white;
cursor: pointer;
div {
font-size: 14px;
font-weight: normal;
......@@ -413,11 +411,12 @@ body {
// font-family: "Noto Sans Thai", sans-serif;
.button {
// font-family: "Noto Sans Thai", sans-serif;
font-size: 16px;
border-radius: 25px;
font-size: 18px;
font-weight: bold;
font-style: normal;
span {
font-size: 16px;
font-size: 18px;
font-weight: bold;
font-style: normal;
}
......@@ -490,33 +489,31 @@ body {
/////////
.footer-description {
font-size: 22px;
font-weight: bold;
}
.footer-title {
color: $white;
font-size: 14px;
font-weight: normal;
}
.footer-description {
font-size: 22px;
font-weight: bold;
}
.footer-title {
color: $white;
font-size: 14px;
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;
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: 14px;
......@@ -525,7 +522,44 @@ body {
}
hr.new {
border-top: 1px dashed #ddd;;
border-top: 1px dashed #ddd;
margin: 1rem 0;
}
.is-blue-nexpie {
background-color: #0384ce;
border-color: transparent;
color: #fff;
}
.is-blue-nexpie.is-hovered,
.button.is-blue-nexpie:hover {
background-color: #37aee3;
border-color: transparent;
color: #fff;
}
.is-white.is-hovered,
.button.is-white:hover {
background-color: #37aee3;
border-color: transparent;
color: #fff;
}
.button {
height: 40px;
}
.is-menu-nexpie {
border-color: transparent;
color: #0384ce;
}
.is-menu-nexpie.is-hovered,
.button.is-menu-nexpie:hover {
background-color: #37aee3;
border-color: transparent;
color: #fff;
}
.button {
height: 40px;
text-transform: uppercase;
}
src/translations/en.json
{
"BottomNav.Home": "Home",
"BottomNav.Docs": "Docs",
"BottomNav.Docs": "Documents",
"BottomNav.Features": "Features",
"BottomNav.Benefits": "Benefits",
"BottomNav.Customer": "Customers",
"BottomNav.Packages": "Packages",
"GoToDashboard": "console",
"GoToDashboard": "Go To Portal",
"connect": "Connect",
"About.Title": "About Nexpie IoT Platform",
"About.Descrip1": "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.",
......
src/translations/th.json
{
"BottomNav.Home": "หน้าหลัก",
"BottomNav.Docs": "เอกสาร",
"BottomNav.Docs": "คู่มือการใช้งาน",
"BottomNav.Features": "จุดเด่น",
"BottomNav.Benefits": "สิทธิประโยชน์",
"BottomNav.Customer": "ลูกค้า",
......
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