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 @@
<head>
<meta charset="utf-8" />
<link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico" />
<link
href="https://fonts.googleapis.com/css?family=Kanit:300,400,500,700&display=swap&subset=thai"
rel="stylesheet"
/>
<link href="https://fonts.googleapis.com/css?family=Mitr&display=swap" rel="stylesheet">
<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>
......
src/components/Header.js
......@@ -97,7 +97,7 @@ 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'}>
<Button style={{ paddingVertical: '0.1em'}} fullwidth color={'light'}>
{ButtonNavs[7].name}
</Button>
</Navbar.Item>
......
src/components/Home/Banner.js
......@@ -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="content-width">
<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">
<h2>CONNECT</h2>
<h2>EVERYTHING !</h2>
......
src/components/Home/Services.js
......@@ -11,7 +11,7 @@ const Card = () => {
</div>
<div className="service-wrapper">
<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>
);
......
src/components/Home/WhyUs.js
......@@ -10,7 +10,7 @@ const Card = () => {
</figure>
<h1 className="why-title">Connectivity</h1>
<p className="why-description" style={{ textAlign: 'center' }}>
Connecting your device with NEXPIE IoT platform.
Connecting your device with NEXPIE IoT Platform.
</p>
</div>
);
......
src/scss/_variables.scss
......@@ -4,3 +4,4 @@ $lightprimary: #0384ce;
$grey: #4a4a4a;
$lightgrey: #858585;
$white: #ffffff;
$size-text-header:20px;
src/scss/style.scss
@import '~react-bulma-components/src/index.sass';
@import '_variables.scss';
@import "~react-bulma-components/src/index.sass";
@import "_variables.scss";
// @import '../../node_modules/bulma/bulma.sass';
// @import '../../node_modules/bulma/sass/utilities/_all.sass';
// @import '../../node_modules/bulma/sass/base/_all.sass';
......@@ -7,405 +7,410 @@
// @import '../../node_modules/bulma/sass/elements/container.sass';
// @import '../../node_modules/bulma/sass/elements/title.sass';
// @import '../../node_modules/bulma/sass/form/_all.sass';
body {
font-family: 'Kanit', sans-serif;
font-family: "Mitr", sans-serif;
}
::-webkit-scrollbar {
display: none;
display: none;
}
.dropdown-menu {
min-width: 5rem;
min-width: 5rem;
}
.button.is-white {
background-color: $white;
border-color: transparent;
color: $grey;
background-color: $white;
border-color: transparent;
color: $grey;
}
.section {
width: 100vw;
min-height: 100vh;
height: 100%;
display: flex;
justify-content: center;
width: 100vw;
min-height: 100vh;
height: 100%;
display: flex;
justify-content: center;
}
.content-width {
width: 1396px;
max-width: 100%;
margin: 0 auto;
position: relative;
padding: 0 15px;
width: 1396px;
max-width: 100%;
margin: 0 auto;
position: relative;
padding: 0 15px;
}
.descriptionStyle {
font-size: 22px;
color: $grey;
font-weight: 100;
font-size: 18px;
color: $grey;
font-weight: normal;
}
.title {
font-size: 35px;
color: $primary;
font-size: $size-text-header;
color: $primary;
}
.banner-text-container {
display: flex;
flex-direction: column;
margin-top: 50px;
.banner-title {
font-size: 72px;
color: $white;
}
.banner-descrip-wrapper {
@extend .row;
justify-content: start !important;
font-size: 60px;
:first-child {
color: #ffcc01;
margin-right: 15px;
}
:nth-child(2) {
color: $white;
}
}
display: flex;
flex-direction: column;
margin-top: 50px;
.banner-title {
font-size: 72px;
color: $white;
}
.banner-descrip-wrapper {
@extend .row;
justify-content: start !important;
font-size: 60px;
:first-child {
color: #ffcc01;
margin-right: 15px;
}
:nth-child(2) {
color: $white;
}
}
}
.why-card {
max-width: 300px;
min-width: 245px;
height: 360px;
border-radius: 6px;
box-shadow: 0 52px 40px 0 rgba(0, 0, 0, 0.09);
background-color: $white;
margin: 30px;
z-index: 1;
padding: 40px;
display: flex;
flex-direction: column;
justify-content: space-evenly;
align-items: center;
.why-title {
font-size: 24px;
color: $grey;
}
.why-description {
font-size: 18px;
color: $lightgrey;
}
max-width: 300px;
min-width: 245px;
height: 360px;
border-radius: 6px;
box-shadow: 0 52px 40px 0 rgba(0, 0, 0, 0.09);
background-color: $white;
margin: 30px;
z-index: 1;
padding: 40px;
display: flex;
flex-direction: column;
justify-content: space-evenly;
align-items: center;
.why-title {
font-size: 22px;
color: $grey;
}
.why-description {
font-size: 16px;
color: $lightgrey;
}
}
.service-card {
max-width: 300px;
min-width: 265px;
height: 399px;
border-radius: 6px;
box-shadow: 0 52px 40px 0 rgba(0, 0, 0, 0.09);
border: solid 0.5px #f0f0f0;
background-color: $white;
margin: 30px;
display: flex;
flex-direction: column;
align-items: center;
overflow: hidden;
&:first-child {
background-color: #42b3e5;
}
&:nth-child(2) {
background-color: #0384ce;
}
&:nth-child(3) {
background-color: #3156a3;
}
.img-wrapper {
background-color: $white;
width: 100%;
height: 100%;
margin: 60 0;
display: flex;
align-items: center;
justify-content: center;
}
.service-wrapper {
width: 100%;
max-height: 170px;
color: $white;
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-between;
padding: 30px 40px 40px 40px;
.service-title {
font-size: 24px;
font-weight: 500;
}
.service-description {
font-size: 18px;
text-align: center;
font-weight: 100;
}
}
max-width: 300px;
min-width: 265px;
height: 399px;
border-radius: 6px;
box-shadow: 0 52px 40px 0 rgba(0, 0, 0, 0.09);
border: solid 0.5px #f0f0f0;
background-color: $white;
margin: 30px;
display: flex;
flex-direction: column;
align-items: center;
overflow: hidden;
&:first-child {
background-color: #42b3e5;
}
&:nth-child(2) {
background-color: #0384ce;
}
&:nth-child(3) {
background-color: #3156a3;
}
.img-wrapper {
background-color: $white;
width: 100%;
height: 100%;
margin: 60 0;
display: flex;
align-items: center;
justify-content: center;
}
.service-wrapper {
width: 100%;
max-height: 200px;
color: $white;
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-between;
padding: 15px 20px 20px 20px;
.service-title {
font-size: 22px;
font-weight: 500;
}
.service-description {
font-size: 16px;
text-align: center;
font-weight: 100;
}
}
}
.why-bg {
width: 85%;
height: 180px;
border-radius: 6px;
background-image: linear-gradient(276deg, #3473bf, #0891df);
position: absolute;
width: 85%;
height: 180px;
border-radius: 6px;
position: absolute;
background-image: linear-gradient(276deg, #3473bf, #42b3e5);
}
.feature-container {
display: flex;
flex-wrap: wrap;
justify-content: center;
.feature-card-hidden {
width: 40%;
height: 130px;
margin: 0 35px 20px 35px;
}
.feature-card {
width: 40%;
height: 130px;
margin: 0 35px 20px 35px;
border-radius: 6px;
border: solid 1px rgba(66, 179, 229, 0.35);
background-color: rgba(66, 179, 229, 0.1);
padding: 10px;
.feature-img {
@extend .center;
.image {
margin: 10px;
}
}
.feature-text-wrapper {
padding: 10px 20px 20px 20px;
display: flex;
flex-direction: column;
justify-content: center;
max-width: 400px;
display: flex;
flex-wrap: wrap;
justify-content: center;
.feature-card-hidden {
width: 40%;
height: 130px;
margin: 0 35px 20px 35px;
}
.feature-card {
width: 40%;
height: 130px;
margin: 0 35px 20px 35px;
border-radius: 6px;
border: solid 1px rgba(66, 179, 229, 0.35);
background-color: rgba(66, 179, 229, 0.1);
padding: 10px;
.feature-img {
@extend .center;
.image {
margin: 10px;
}
}
.feature-text-wrapper {
padding: 10px 20px 20px 20px;
display: flex;
flex-direction: column;
justify-content: center;
max-width: 400px;
.feature-title {
font-size: 22px;
letter-spacing: 1px;
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
background-image: linear-gradient(277deg, #3156a3, #3984dd);
}
.feature-descrip {
color: #777777;
display: block; /* Fallback for non-webkit */
display: -webkit-box;
max-width: 400px;
height: 4; /* Fallback for non-webkit */
margin: 0 auto;
font-size: 18px;
line-height: 1.33;
-webkit-line-clamp: 4;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
}
}
}
.feature-title {
font-size: 22px;
letter-spacing: 1px;
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
background-image: linear-gradient(277deg, #3156a3, #3984dd);
}
.feature-descrip {
color: #777777;
display: block; /* Fallback for non-webkit */
display: -webkit-box;
max-width: 400px;
height: 4; /* Fallback for non-webkit */
margin: 0 auto;
font-size: 16px;
line-height: 1.33;
-webkit-line-clamp: 4;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
}
}
}
}
.tab-container {
@extend .row;
.tab {
font-size: 18px;
line-height: 1.56;
text-align: center;
color: #4a4a4a;
padding: 0 0 10px 0;
margin: 0 20px;
cursor: pointer;
}
.active {
color: #05366c;
border-bottom: 1px solid #05366c;
}
@extend .row;
.tab {
font-size: 18px;
line-height: 1.56;
text-align: center;
color: #4a4a4a;
padding: 0 0 10px 0;
margin: 0 20px;
cursor: pointer;
}
.active {
color: #05366c;
border-bottom: 1px solid #05366c;
}
}
.package-card {
width: 300px;
height: 450px;
border-radius: 6px;
box-shadow: 0 52px 40px 0 rgba(0, 0, 0, 0.09);
border: solid 0.5px #f0f0f0;
background-image: $white;
padding: 35px;
display: flex;
flex-direction: column;
justify-content: space-between;
margin: 0 20px;
.text-wrapper {
color: #757575;
.plan-title {
font-size: 24px;
font-weight: bold;
text-align: center;
}
.plan-descrip {
font-size: 13px;
text-align: center;
}
}
.price-wrapper {
width: 120px;
height: 120px;
background-image: linear-gradient(306deg, #3473bf, #0891df);
border-radius: 100px;
@extend .center;
flex-direction: column;
color: $white;
align-self: center;
.price {
@extend .row;
font-weight: bold;
font-size: 20px;
align-items: baseline;
h1 {
font-size: 45px;
}
}
}
.package-details {
font-size: 14px;
color: #757575;
.package-detail {
display: flex;
justify-content: space-between;
}
}
.btn-wrapper {
width: 250px;
height: 54px;
border-radius: 6px;
background-image: linear-gradient(277deg, #3473bf, #0891df);
align-self: center;
@extend .center;
color: $white;
cursor: pointer;
div {
font-size: 18px;
font-weight: bold;
text-align: center;
}
}
&:hover {
background-image: linear-gradient(317deg, #3473bf, #0891df);
.text-wrapper {
color: $white;
}
.price-wrapper,
.btn-wrapper {
color: #757575;
background-image: none;
background-color: $white;
}
.package-details {
color: $white;
}
}
width: 300px;
height: 450px;
border-radius: 6px;
box-shadow: 0 52px 40px 0 rgba(0, 0, 0, 0.09);
border: solid 0.5px #f0f0f0;
background-image: $white;
padding: 35px;
display: flex;
flex-direction: column;
justify-content: space-between;
margin: 0 20px;
.text-wrapper {
color: #757575;
.plan-title {
font-size: 22px;
font-weight: bold;
text-align: center;
}
.plan-descrip {
font-size: 13px;
text-align: center;
}
}
.price-wrapper {
width: 120px;
height: 120px;
background-image: linear-gradient(306deg, #3473bf, #0891df);
border-radius: 100px;
@extend .center;
flex-direction: column;
color: $white;
align-self: center;
.price {
@extend .row;
font-weight: bold;
font-size: 20px;
align-items: baseline;
h1 {
font-size: 45px;
}
}
}
.package-details {
font-size: 14px;
color: #757575;
.package-detail {
display: flex;
justify-content: space-between;
}
}
.btn-wrapper {
width: 250px;
height: 54px;
border-radius: 6px;
background-image: linear-gradient(277deg, #3473bf, #0891df);
align-self: center;
@extend .center;
color: $white;
cursor: pointer;
div {
font-size: 18px;
font-weight: bold;
text-align: center;
}
}
&:hover {
background-image: linear-gradient(317deg, #3473bf, #0891df);
.text-wrapper {
color: $white;
}
.price-wrapper,
.btn-wrapper {
color: #757575;
background-image: none;
background-color: $white;
}
.package-details {
color: $white;
}
}
}
.owl-carousel .owl-stage-outer {
overflow: visible;
overflow: visible;
}
.center {
display: flex;
align-items: center;
justify-content: center;
display: flex;
align-items: center;
justify-content: center;
}
.row {
display: flex;
flex-direction: row;
justify-content: space-evenly;
display: flex;
flex-direction: row;
justify-content: space-evenly;
}
@media screen and (max-width: 1087px) {
.navbar-menu {
box-shadow: 0 8px 16px rgba(10, 10, 10, 0);
}
.navbar-menu {
box-shadow: 0 8px 16px rgba(10, 10, 10, 0);
}
}
@media screen and (max-width: 992px) {
}
@media screen and (max-width: 768px) {
.descriptionStyle {
font-size: 15px;
}
.title {
font-size: 24px;
}
.feature-container .feature-card-hidden {
display: none;
}
.feature-container {
.feature-card {
width: 90%;
&:first-child {
margin-top: 30px;
}
.feature-text-wrapper {
.feature-title {
font-size: 16px;
}
.feature-descrip {
font-size: 12px;
}
}
}
}
.banner-text-container {
align-items: center;
.banner-title {
font-size: 30px;
}
.banner-descrip-wrapper {
font-size: 24px;
margin-top: 30px;
}
}
.tab-container .tab {
font-size: 12px;
}
.descriptionStyle {
font-size: 15px;
}
.title {
font-size: 24px;
}
.feature-container .feature-card-hidden {
display: none;
}
.feature-container {
.feature-card {
width: 90%;
&:first-child {
margin-top: 30px;
}
.feature-text-wrapper {
.feature-title {
font-size: 16px;
}
.feature-descrip {
font-size: 12px;
}
}
}
}
.banner-text-container {
align-items: center;
.banner-title {
font-size: 30px;
}
.banner-descrip-wrapper {
font-size: 24px;
margin-top: 30px;
}
}
.tab-container .tab {
font-size: 12px;
}
}
.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 {
outline: none;
position: fixed;
border: none;
cursor: pointer;
transition: all 0.3s;
.bullet {
border-radius: 100%;
width: 4px;
height: 4px;
transition: all 0.3s;
&:hover {
width: 10px;
height: 10px;
}
}
&:hover {
.bullet {
width: 10px;
height: 10px;
transition: all 0.3s;
&:hover {
width: 10px;
height: 10px;
}
}
}
outline: none;
position: fixed;
border: none;
cursor: pointer;
transition: all 0.3s;
.bullet {
border-radius: 100%;
width: 4px;
height: 4px;
transition: all 0.3s;
&:hover {
width: 10px;
height: 10px;
}
}
&:hover {
.bullet {
width: 10px;
height: 10px;
transition: all 0.3s;
&:hover {
width: 10px;
height: 10px;
}
}
}
}
.bullet-navs-container {
display: flex;
flex: 1;
align-items: center;
justify-content: center;
width: 20px;
height: 16px;
display: flex;
flex: 1;
align-items: center;
justify-content: center;
width: 20px;
height: 16px;
}
// @media screen and (min-width: 1023px) {
......
src/translations/en.json
......@@ -7,8 +7,8 @@
"BottomNav.Packages": "PACKAGES",
"GoToDashboard": "GO TO DASHBOARD",
"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.",
"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.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.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