add packages section

src/components/Home/Banner.js

@@ -11,25 +11,12 @@ export default class Banner extends React.Component {
           }}
           }}
         >
         >
           <div className="content-width">
           <div className="content-width">
-            <h1
-              style={{
-                fontSize: 72,
-                color: "#fff",
-                fontWeight: 500
-              }}
-            >
-              NEXPIE IOT Platform
-            </h1>
-            <div
-              style={{
-                display: "flex",
-                flexDirection: "row",
-                fontSize: 60,
-                fontWeight: "normal"
-              }}
-            >
-              <h2 style={{ color: "#ffcc01", marginRight: 20 }}>CONNECT</h2>
-              <h2 style={{ color: "#fff" }}>EVERYTHING !</h2>
+            <div className="banner-text-container">
+              <h1 className="banner-title">NEXPIE IOT Platform</h1>
+              <div className="banner-descrip-wrapper">
+                <h2>CONNECT</h2>
+                <h2>EVERYTHING !</h2>
+              </div>
             </div>
             </div>
           </div>
           </div>
         </div>
         </div>

src/components/Home/Features.js

@@ -67,7 +67,7 @@ export default class Features extends React.Component {
               description={item.description}
               description={item.description}
             />
             />
           ))}
           ))}
-          {oddItem === 1 ? <div className="feature-card-wrapper" /> : <></>}
+          {oddItem === 1 ? <div className="feature-card-hidden" /> : <></>}
         </div>
         </div>
       </div>
       </div>
     );
     );

src/components/Home/Packages.js

+import React from "react";
+import { FormattedMessage } from "react-intl";
+const Card = () => {
+  return (
+    <div className="package-card">
+      <div className="text-wrapper">
+        <h1 className="plan-title">Standard Plan</h1>
+        <p className="plan-descrip">This is standard hositng plan</p>
+      </div>
+      <div className="price-wrapper">
+        <div className="price">
+          <h1>$3</h1>
+          .99
+        </div>
+        <p>/mo</p>
+      </div>
+      <div className="package-details">
+        <div className="package-detail">
+          <p> Space</p>
+          <p>30GB</p>
+        </div>
+        <div className="package-detail">
+          <p> FTP User</p>
+          <p>50</p>
+        </div>
+        <div className="package-detail">
+          <p> Databases</p>
+          <p>50</p>
+        </div>
+        <div className="package-detail">
+          <p> Adons Domain</p>
+          <p>5</p>
+        </div>
+      </div>
+      <div className="btn-wrapper">
+        <div>Choose plan</div>
+      </div>
+    </div>
+  );
+};
+export default class Packages extends React.Component {
+  state = {
+    activeTab: "tab1"
+  };
+
+  render() {
+    return (
+      <div
+        className="section content-width"
+        style={{
+          flexDirection: "column",
+          alignItems: "center",
+          justifyContent: "space-evenly",
+          paddingBottom: "60px"
+        }}
+      >
+        <h1 className="title">
+          <FormattedMessage id="Packages.Title" />
+        </h1>
+        <div className="tab-container">
+          <div
+            onClick={() => {
+              this.setState({
+                activeTab: "tab1"
+              });
+            }}
+            className={this.state.activeTab === "tab1" ? "active tab" : "tab"}
+          >
+            Public Platform (sharing resources)
+          </div>
+          <div
+            onClick={() => {
+              this.setState({
+                activeTab: "tab2"
+              });
+            }}
+            className={this.state.activeTab === "tab2" ? "active tab" : "tab"}
+          >
+            Private Platform (dedicated resources)
+          </div>
+        </div>
+        <div>
+          {this.state.activeTab === "tab1" && (
+            <div className="row">
+              {[1, 2, 3].map((item, index) => (
+                <Card />
+              ))}
+            </div>
+          )}
+          {this.state.activeTab === "tab2" && (
+            <div className="row">
+              {[1, 2, 3].map((item, index) => (
+                <Card />
+              ))}
+            </div>
+          )}
+        </div>
+      </div>
+    );
+  }
+}

src/pages/Homepage.js

@@ -5,6 +5,7 @@ import { Scroller, Section } from "react-fully-scrolled";
 import WhyUs from "components/Home/WhyUs";
 import WhyUs from "components/Home/WhyUs";
 import Services from "components/Home/Services";
 import Services from "components/Home/Services";
 import Features from "components/Home/Features";
 import Features from "components/Home/Features";
+import Packages from "components/Home/Packages";
 
 
 class Homepage extends Component {
 class Homepage extends Component {
   constructor(props) {
   constructor(props) {
@@ -62,6 +63,13 @@ class Homepage extends Component {
           >
           >
             <Features />
             <Features />
           </Section>
           </Section>
+          <Section
+            style={{
+              ...baseStyle
+            }}
+          >
+            <Packages />
+          </Section>
         </Scroller>
         </Scroller>
       </div>
       </div>
     );
     );

src/scss/style.scss

@@ -41,6 +41,27 @@ body {
   font-size: 35px;
   font-size: 35px;
   color: $primary;
   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;
+    }
+  }
+}
 .why-card {
 .why-card {
   max-width: 300px;
   max-width: 300px;
   min-width: 245px;
   min-width: 245px;
@@ -66,7 +87,7 @@ body {
 }
 }
 
 
 .service-card {
 .service-card {
-  max-width: 348px;
+  max-width: 300px;
   min-width: 265px;
   min-width: 265px;
   height: 399px;
   height: 399px;
   border-radius: 6px;
   border-radius: 6px;
@@ -128,13 +149,15 @@ body {
   display: flex;
   display: flex;
   flex-wrap: wrap;
   flex-wrap: wrap;
   justify-content: center;
   justify-content: center;
-  .feature-card-wrapper {
+  .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 {
-    @extend .feature-card-wrapper;
+    width: 40%;
+    height: 130px;
+    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);
@@ -168,6 +191,104 @@ body {
     }
     }
   }
   }
 }
 }
+.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;
+  }
+}
+.package-card {
+  width: 300px;
+  height: 450px;
+  border-radius: 6px;
+  box-shadow: 0 52px 85px 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;
+    }
+  }
+}
 .center {
 .center {
   display: flex;
   display: flex;
   align-items: center;
   align-items: center;
@@ -188,17 +309,32 @@ body {
   .descriptionStyle {
   .descriptionStyle {
     font-size: 18px;
     font-size: 18px;
   }
   }
-  .feature-container .feature-card-wrapper {
+  .feature-container .feature-card {
     width: 90%;
     width: 90%;
+    &:first-child {
+      margin-top: 30px;
+    }
   }
   }
-  .feature-container .feature-card .feature-img {
+  .feature-container .feature-card .feature-img,
+  .feature-card-hidden {
     display: none;
     display: none;
   }
   }
-  .feature-container .feature-card {
-    &:first-child {
+  .feature-container .feature-card-hidden {
+    display: none;
+  }
+  .banner-text-container {
+    align-items: center;
+    .banner-title {
+      font-size: 30px;
+    }
+    .banner-descrip-wrapper {
+      font-size: 24px;
       margin-top: 30px;
       margin-top: 30px;
     }
     }
   }
   }
+  .tab-container .tab {
+    font-size: 12px;
+  }
 }
 }
 // .dropdown-item {
 // .dropdown-item {
 // 	display: 'flex';
 // 	display: 'flex';

src/translations/en.json

@@ -23,5 +23,6 @@
   "Hook.Title": "HOOK",
   "Hook.Title": "HOOK",
   "Hook.Descrip": "Get automation works according to condition setting of Trigger",
   "Hook.Descrip": "Get automation works according to condition setting of Trigger",
   "Storage.Title": "DATA STORAGE",
   "Storage.Title": "DATA STORAGE",
-  "Storage.Descrip": "Collecting data from your device and sensor to data storage."
+  "Storage.Descrip": "Collecting data from your device and sensor to data storage.",
+  "Packages.Title": "Packages"
 }
 }

src/translations/th.json

@@ -23,5 +23,6 @@
   "Hook.Title": "HOOK",
   "Hook.Title": "HOOK",
   "Hook.Descrip": "ทำงานอัตโนมัติตามการเงื่อนไขของตัวกระตุ้นที่ได้ตั้งค่าไว้",
   "Hook.Descrip": "ทำงานอัตโนมัติตามการเงื่อนไขของตัวกระตุ้นที่ได้ตั้งค่าไว้",
   "Storage.Title": "การจัดเก็บข้อมูล",
   "Storage.Title": "การจัดเก็บข้อมูล",
-  "Storage.Descrip": "รวบรวมข้อมูลจากอุปกรณ์และเซ็นเซอร์ของคุณไปยังที่จัดเก็บข้อมูล"
+  "Storage.Descrip": "รวบรวมข้อมูลจากอุปกรณ์และเซ็นเซอร์ของคุณไปยังที่จัดเก็บข้อมูล",
+  "Packages.Title": "แพ็คเกจ"
 }
 }