Skip to content

L
landingPage-Nexpie
Commit 5a02e150 by Chaiwith Santaweesuk
Options

update

parent bb215ea3
Showing with 395 additions and 355 deletions
.firebase/hosting.YnVpbGQ.cache 0 → 100644
asset-manifest.json,1565695593697,7325eaff1ecd7661f192650db0ea691f5e4704be945f758c8b0a112053dc49be
index.html,1565695593697,e3314e7cf9daa1b4729c1923cc57628e8513e6aedd71f8e06294c9c9ee0617cb
manifest.json,1565083503843,6aaf3d87dd9bb1e96f9c691c50d0ed378ed98a120a76dea78291281834cd36e9
favicon.ico,1565083503842,b72f7455f00e4e58792d2bca892abb068e2213838c0316d6b7a0d6d16acd1955
precache-manifest.39f1ec858ae187d2503a3ee3587db165.js,1565695593697,79c5f740e50d54e8e5b02ad64971de79aae39b094a16f12dfa0b5c2d171bc9cf
service-worker.js,1565695593697,4bca5d2df5275c4a4267c1656362e7aef1ec91ba6ced233941b494bab82579f3
static/css/main.0d9f49bf.chunk.css,1565695593698,ef66b111b80cdb58e24272c846aca8208ee81c7e68f547b561d1f7c008fae094
static/js/main.8bc63245.chunk.js,1565695593700,a3cbfde8197ce0113c41fecd1fb9acee6051f28242c378a3df0c1c50f4c9084d
static/js/runtime~main.a8a9905a.js,1565695593714,e1af5f94fdd13901b2e433d0d7607e27c01458151c35b1fe4b7feda2a32b7aa9
static/js/runtime~main.a8a9905a.js.map,1565695593714,c337bf8b58896da637a6e50ab8cfc779eb1ec42c55f8ec429030a03454a549db
static/css/main.0d9f49bf.chunk.css.map,1565695593712,06a95f2acf98dd19f945abffa745cbf984cbac1493af0d433f6c3c285d3b6a57
static/js/main.8bc63245.chunk.js.map,1565695593714,5c7cbb49cd730d4a7874dc4be7f287e1ddefc1b846feb21afa713f72e87ac770
static/css/2.5aec162f.chunk.css,1565695593711,8383e9bf19b19ec879e362484ac8a165120490778495b9099842e50e7f906ec0
static/css/2.5aec162f.chunk.css.map,1565695593710,8da2f9401adb11c1e32c1f4a0b469c4b1965cda45cf9be25716462a90fe6bc8c
static/js/2.9838828f.chunk.js,1565695593717,efba1b01ed6f4bbfd4f81c6c684f451d4e6f9259320bf4cefb4b5e4e1364ad19
static/js/2.9838828f.chunk.js.map,1565695593716,e8e2ae222f85803cd7f0ea648e649acdb75fe8c3ba7668c012e40b981cd9ab4d
.firebaserc 0 → 100644
{
"projects": {
"default": "demox-92c6d"
}
}
firebase.json 0 → 100644
{
"hosting": {
"public": "build",
"ignore": [
"firebase.json",
"**/.*",
"**/node_modules/**"
],
"rewrites": [
{
"source": "**",
"destination": "/index.html"
}
]
}
}
public/index.html
...@@ -3,10 +3,7 @@ ...@@ -3,10 +3,7 @@
<head> <head>
<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 <link href="https://fonts.googleapis.com/css?family=Mitr&display=swap" rel="stylesheet">
href="https://fonts.googleapis.com/css?family=Kanit:300,400,500,700&display=swap&subset=thai"
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>
......
src/components/Header.js
...@@ -97,7 +97,7 @@ class HeaderComponent extends Component { ...@@ -97,7 +97,7 @@ 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={'light'}>
{ButtonNavs[7].name} {ButtonNavs[7].name}
</Button> </Button>
</Navbar.Item> </Navbar.Item>
......
src/components/Home/Banner.js
...@@ -6,7 +6,7 @@ export default class Banner extends React.Component { ...@@ -6,7 +6,7 @@ export default class Banner extends React.Component {
<div className="section " style={{ background: 'linear-gradient(to right bottom, #194db7, #3fd4e6)' }}> <div className="section " style={{ background: 'linear-gradient(to right bottom, #194db7, #3fd4e6)' }}>
<div className="content-width"> <div className="content-width">
<div className="banner-text-container"> <div className="banner-text-container">
<h1 className="banner-title">NEXPIE IOT Platform</h1> <h1 className="banner-title">NEXPIE IoT Platform</h1>
<div className="banner-descrip-wrapper"> <div className="banner-descrip-wrapper">
<h2>CONNECT</h2> <h2>CONNECT</h2>
<h2>EVERYTHING !</h2> <h2>EVERYTHING !</h2>
......
src/components/Home/Services.js
...@@ -11,7 +11,7 @@ const Card = () => { ...@@ -11,7 +11,7 @@ const Card = () => {
</div> </div>
<div className="service-wrapper"> <div className="service-wrapper">
<h1 className="service-title">Connectivity</h1> <h1 className="service-title">Connectivity</h1>
<p className="service-description">Connecting your device with NEXPIE IoT platform.</p> <p className="service-description">Connecting your device with NEXPIE IoT Platform.</p>
</div> </div>
</div> </div>
); );
......
src/components/Home/WhyUs.js
...@@ -10,7 +10,7 @@ const Card = () => { ...@@ -10,7 +10,7 @@ const Card = () => {
</figure> </figure>
<h1 className="why-title">Connectivity</h1> <h1 className="why-title">Connectivity</h1>
<p className="why-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>
); );
......
src/scss/_variables.scss
...@@ -4,3 +4,4 @@ $lightprimary: #0384ce; ...@@ -4,3 +4,4 @@ $lightprimary: #0384ce;
$grey: #4a4a4a; $grey: #4a4a4a;
$lightgrey: #858585; $lightgrey: #858585;
$white: #ffffff; $white: #ffffff;
$size-text-header:20px;
src/scss/style.scss
@import '~react-bulma-components/src/index.sass'; @import "~react-bulma-components/src/index.sass";
@import '_variables.scss'; @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';
...@@ -7,405 +7,410 @@ ...@@ -7,405 +7,410 @@
// @import '../../node_modules/bulma/sass/elements/container.sass'; // @import '../../node_modules/bulma/sass/elements/container.sass';
// @import '../../node_modules/bulma/sass/elements/title.sass'; // @import '../../node_modules/bulma/sass/elements/title.sass';
// @import '../../node_modules/bulma/sass/form/_all.sass'; // @import '../../node_modules/bulma/sass/form/_all.sass';
body { body {
font-family: 'Kanit', sans-serif; font-family: "Mitr", sans-serif;
} }
::-webkit-scrollbar { ::-webkit-scrollbar {
display: none; display: none;
} }
.dropdown-menu { .dropdown-menu {
min-width: 5rem; min-width: 5rem;
} }
.button.is-white { .button.is-white {
background-color: $white; background-color: $white;
border-color: transparent; border-color: transparent;
color: $grey; color: $grey;
} }
.section { .section {
width: 100vw; width: 100vw;
min-height: 100vh; min-height: 100vh;
height: 100%; height: 100%;
display: flex; display: flex;
justify-content: center; justify-content: center;
} }
.content-width { .content-width {
width: 1396px; width: 1396px;
max-width: 100%; max-width: 100%;
margin: 0 auto; margin: 0 auto;
position: relative; position: relative;
padding: 0 15px; padding: 0 15px;
} }
.descriptionStyle { .descriptionStyle {
font-size: 22px; font-size: 18px;
color: $grey; color: $grey;
font-weight: 100; font-weight: normal;
} }
.title { .title {
font-size: 35px; font-size: $size-text-header;
color: $primary; color: $primary;
} }
.banner-text-container { .banner-text-container {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
margin-top: 50px; margin-top: 50px;
.banner-title { .banner-title {
font-size: 72px; font-size: 72px;
color: $white; color: $white;
} }
.banner-descrip-wrapper { .banner-descrip-wrapper {
@extend .row; @extend .row;
justify-content: start !important; justify-content: start !important;
font-size: 60px; font-size: 60px;
:first-child { :first-child {
color: #ffcc01; color: #ffcc01;
margin-right: 15px; margin-right: 15px;
} }
:nth-child(2) { :nth-child(2) {
color: $white; color: $white;
} }
} }
} }
.why-card { .why-card {
max-width: 300px; max-width: 300px;
min-width: 245px; min-width: 245px;
height: 360px; height: 360px;
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);
background-color: $white; background-color: $white;
margin: 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;
.why-title { .why-title {
font-size: 24px; font-size: 22px;
color: $grey; color: $grey;
} }
.why-description { .why-description {
font-size: 18px; font-size: 16px;
color: $lightgrey; color: $lightgrey;
} }
} }
.service-card { .service-card {
max-width: 300px; max-width: 300px;
min-width: 265px; min-width: 265px;
height: 399px; height: 399px;
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-color: $white; background-color: $white;
margin: 30px; margin: 30px;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
overflow: hidden; overflow: hidden;
&:first-child { &:first-child {
background-color: #42b3e5; background-color: #42b3e5;
} }
&:nth-child(2) { &:nth-child(2) {
background-color: #0384ce; background-color: #0384ce;
} }
&:nth-child(3) { &:nth-child(3) {
background-color: #3156a3; background-color: #3156a3;
} }
.img-wrapper { .img-wrapper {
background-color: $white; background-color: $white;
width: 100%; width: 100%;
height: 100%; height: 100%;
margin: 60 0; margin: 60 0;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
} }
.service-wrapper { .service-wrapper {
width: 100%; width: 100%;
max-height: 200px;
max-height: 170px; color: $white;
color: $white; display: flex;
display: flex; flex-direction: column;
flex-direction: column; align-items: center;
align-items: center; justify-content: space-between;
justify-content: space-between; padding: 15px 20px 20px 20px;
padding: 30px 40px 40px 40px; .service-title {
.service-title { font-size: 22px;
font-size: 24px; font-weight: 500;
font-weight: 500; }
} .service-description {
.service-description { font-size: 16px;
font-size: 18px; text-align: center;
text-align: center; font-weight: 100;
font-weight: 100; }
} }
}
} }
.why-bg { .why-bg {
width: 85%; width: 85%;
height: 180px; height: 180px;
border-radius: 6px; border-radius: 6px;
background-image: linear-gradient(276deg, #3473bf, #0891df); position: absolute;
position: absolute; background-image: linear-gradient(276deg, #3473bf, #42b3e5);
} }
.feature-container { .feature-container {
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
justify-content: center; justify-content: center;
.feature-card-hidden { .feature-card-hidden {
width: 40%; width: 40%;
height: 130px; height: 130px;
margin: 0 35px 20px 35px; margin: 0 35px 20px 35px;
} }
.feature-card { .feature-card {
width: 40%; width: 40%;
height: 130px; height: 130px;
margin: 0 35px 20px 35px; margin: 0 35px 20px 35px;
border-radius: 6px; border-radius: 6px;
border: solid 1px rgba(66, 179, 229, 0.35); border: solid 1px rgba(66, 179, 229, 0.35);
background-color: rgba(66, 179, 229, 0.1); background-color: rgba(66, 179, 229, 0.1);
padding: 10px; padding: 10px;
.feature-img { .feature-img {
@extend .center; @extend .center;
.image { .image {
margin: 10px; margin: 10px;
} }
} }
.feature-text-wrapper { .feature-text-wrapper {
padding: 10px 20px 20px 20px; padding: 10px 20px 20px 20px;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
justify-content: center; justify-content: center;
max-width: 400px; max-width: 400px;
.feature-title { .feature-title {
font-size: 22px; font-size: 22px;
letter-spacing: 1px; letter-spacing: 1px;
-webkit-background-clip: text; -webkit-background-clip: text;
background-clip: text; background-clip: text;
-webkit-text-fill-color: transparent; -webkit-text-fill-color: transparent;
background-image: linear-gradient(277deg, #3156a3, #3984dd); background-image: linear-gradient(277deg, #3156a3, #3984dd);
} }
.feature-descrip { .feature-descrip {
color: #777777; color: #777777;
display: block; /* Fallback for non-webkit */ display: block; /* Fallback for non-webkit */
display: -webkit-box; display: -webkit-box;
max-width: 400px; max-width: 400px;
height: 4; /* Fallback for non-webkit */ height: 4; /* Fallback for non-webkit */
margin: 0 auto; margin: 0 auto;
font-size: 18px; font-size: 16px;
line-height: 1.33; line-height: 1.33;
-webkit-line-clamp: 4; -webkit-line-clamp: 4;
-webkit-box-orient: vertical; -webkit-box-orient: vertical;
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
} }
} }
} }
} }
.tab-container { .tab-container {
@extend .row; @extend .row;
.tab { .tab {
font-size: 18px; font-size: 18px;
line-height: 1.56; line-height: 1.56;
text-align: center; text-align: center;
color: #4a4a4a; color: #4a4a4a;
padding: 0 0 10px 0; padding: 0 0 10px 0;
margin: 0 20px; margin: 0 20px;
cursor: pointer; cursor: pointer;
} }
.active { .active {
color: #05366c; color: #05366c;
border-bottom: 1px solid #05366c; border-bottom: 1px solid #05366c;
} }
} }
.package-card { .package-card {
width: 300px; width: 300px;
height: 450px; height: 450px;
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: 35px; padding: 35px;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
justify-content: space-between; justify-content: space-between;
margin: 0 20px; margin: 0 20px;
.text-wrapper { .text-wrapper {
color: #757575; color: #757575;
.plan-title { .plan-title {
font-size: 24px; font-size: 22px;
font-weight: bold; font-weight: bold;
text-align: center; text-align: center;
} }
.plan-descrip { .plan-descrip {
font-size: 13px; font-size: 13px;
text-align: center; text-align: center;
} }
} }
.price-wrapper { .price-wrapper {
width: 120px; width: 120px;
height: 120px; height: 120px;
background-image: linear-gradient(306deg, #3473bf, #0891df); background-image: linear-gradient(306deg, #3473bf, #0891df);
border-radius: 100px; border-radius: 100px;
@extend .center; @extend .center;
flex-direction: column; flex-direction: column;
color: $white; color: $white;
align-self: center; align-self: center;
.price { .price {
@extend .row; @extend .row;
font-weight: bold; font-weight: bold;
font-size: 20px; font-size: 20px;
align-items: baseline; align-items: baseline;
h1 { h1 {
font-size: 45px; font-size: 45px;
} }
} }
} }
.package-details { .package-details {
font-size: 14px; font-size: 14px;
color: #757575; color: #757575;
.package-detail { .package-detail {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
} }
} }
.btn-wrapper { .btn-wrapper {
width: 250px; width: 250px;
height: 54px; height: 54px;
border-radius: 6px; border-radius: 6px;
background-image: linear-gradient(277deg, #3473bf, #0891df); background-image: linear-gradient(277deg, #3473bf, #0891df);
align-self: center; align-self: center;
@extend .center; @extend .center;
color: $white; color: $white;
cursor: pointer; cursor: pointer;
div { div {
font-size: 18px; font-size: 18px;
font-weight: bold; font-weight: bold;
text-align: center; text-align: center;
} }
} }
&:hover { &:hover {
background-image: linear-gradient(317deg, #3473bf, #0891df); background-image: linear-gradient(317deg, #3473bf, #0891df);
.text-wrapper { .text-wrapper {
color: $white; color: $white;
} }
.price-wrapper, .price-wrapper,
.btn-wrapper { .btn-wrapper {
color: #757575; color: #757575;
background-image: none; background-image: none;
background-color: $white; background-color: $white;
} }
.package-details { .package-details {
color: $white; color: $white;
} }
} }
} }
.owl-carousel .owl-stage-outer { .owl-carousel .owl-stage-outer {
overflow: visible; overflow: visible;
} }
.center { .center {
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
} }
.row { .row {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
justify-content: space-evenly; 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);
} }
} }
@media screen and (max-width: 992px) { @media screen and (max-width: 992px) {
} }
@media screen and (max-width: 768px) { @media screen and (max-width: 768px) {
.descriptionStyle { .descriptionStyle {
font-size: 15px; font-size: 15px;
} }
.title { .title {
font-size: 24px; font-size: 24px;
} }
.feature-container .feature-card-hidden { .feature-container .feature-card-hidden {
display: none; display: none;
} }
.feature-container { .feature-container {
.feature-card { .feature-card {
width: 90%; width: 90%;
&:first-child { &:first-child {
margin-top: 30px; margin-top: 30px;
} }
.feature-text-wrapper { .feature-text-wrapper {
.feature-title { .feature-title {
font-size: 16px; font-size: 16px;
} }
.feature-descrip { .feature-descrip {
font-size: 12px; font-size: 12px;
} }
} }
} }
} }
.banner-text-container { .banner-text-container {
align-items: center; align-items: center;
.banner-title { .banner-title {
font-size: 30px; font-size: 30px;
} }
.banner-descrip-wrapper { .banner-descrip-wrapper {
font-size: 24px; font-size: 24px;
margin-top: 30px; margin-top: 30px;
} }
} }
.tab-container .tab { .tab-container .tab {
font-size: 12px; font-size: 12px;
} }
} }
.navbar-item { .navbar-item {
padding: 0.5rem 0.15rem; padding: 0.5rem 0.15rem;
font-family: "Mitr", sans-serif !important;
}
span{
font-family: "Mitr", sans-serif !important;
} }
.bullet-navs { .bullet-navs {
outline: none; outline: none;
position: fixed; position: fixed;
border: none; border: none;
cursor: pointer; cursor: pointer;
transition: all 0.3s; transition: all 0.3s;
.bullet { .bullet {
border-radius: 100%; border-radius: 100%;
width: 4px; width: 4px;
height: 4px; height: 4px;
transition: all 0.3s; transition: all 0.3s;
&:hover { &:hover {
width: 10px; width: 10px;
height: 10px; height: 10px;
} }
} }
&:hover { &:hover {
.bullet { .bullet {
width: 10px; width: 10px;
height: 10px; height: 10px;
transition: all 0.3s; transition: all 0.3s;
&:hover { &:hover {
width: 10px; width: 10px;
height: 10px; height: 10px;
} }
} }
} }
} }
.bullet-navs-container { .bullet-navs-container {
display: flex; display: flex;
flex: 1; flex: 1;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
width: 20px; width: 20px;
height: 16px; height: 16px;
} }
// @media screen and (min-width: 1023px) { // @media screen and (min-width: 1023px) {
......
src/translations/en.json
...@@ -7,8 +7,8 @@ ...@@ -7,8 +7,8 @@
"BottomNav.Packages": "PACKAGES", "BottomNav.Packages": "PACKAGES",
"GoToDashboard": "GO TO DASHBOARD", "GoToDashboard": "GO TO DASHBOARD",
"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.",
"About.Descrip2": "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.", "About.Descrip2": "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.",
"Why.Title": "Why choose NEXPIE", "Why.Title": "Why choose NEXPIE",
"Why.Descrip": "NEXPIE provide the Internet of Things (IoT) technology tools for helping your organization to achieve the most benefit in Commercial Marketing.", "Why.Descrip": "NEXPIE provide the Internet of Things (IoT) technology tools for helping your organization to achieve the most benefit in Commercial Marketing.",
......
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