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