update translation

src/components/Home/About.js

 import React from "react";
 import WindowDimensions from "components/utils/WindowDimension";
+import { FormattedMessage } from "react-intl";
 
 const About = ({ isMobileSized }) => {
   return (
@@ -22,17 +23,14 @@ const About = ({ isMobileSized }) => {
           justifyContent: "space-evenly"
         }}
       >
-        <h1 className="title">About Nexpie IOT Platform</h1>
+        <h1 className="title">
+          <FormattedMessage id="About.Title" />
+        </h1>
         <p className="descriptionStyle">
-          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.
+          <FormattedMessage id="About.Descrip1" />
         </p>
         <p className="descriptionStyle">
-          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.
+          <FormattedMessage id="About.Descrip2" />
         </p>
       </div>
     </div>

src/components/Home/Features.js

 import React from "react";
+import { FormattedMessage } from "react-intl";
 const feature = [
   {
-    title: "MONITORING",
-    description: "Visualize your device and sensor data real-time"
+    title: <FormattedMessage id="Monitor.Title" />,
+    description: <FormattedMessage id="Monitor.Descrip" />
   },
   {
-    title: "TRIGGER",
-    description: "Event that happen via Device data changed"
+    title: <FormattedMessage id="Trigger.Title" />,
+    description: <FormattedMessage id="Trigger.Descrip" />
   },
   {
-    title: "CONTROLLING",
-    description: "Controlling how device works via Cloud Platform."
+    title: <FormattedMessage id="Control.Title" />,
+    description: <FormattedMessage id="Control.Descrip" />
   },
   {
-    title: "HOOK",
-    description:
-      "Get automation works according to condition setting of Trigger"
+    title: <FormattedMessage id="Hook.Title" />,
+    description: <FormattedMessage id="Hook.Descrip" />
   },
   {
-    title: "DATA STORAGE",
-    description: "Collecting data from your device and sensor to data storage."
+    title: <FormattedMessage id="Storage.Title" />,
+    description: <FormattedMessage id="Storage.Descrip" />
   }
 ];
 const Card = props => {
@@ -50,13 +50,14 @@ export default class Features extends React.Component {
           paddingBottom: "60px"
         }}
       >
-        <h1 className="title">Features</h1>
+        <h1 className="title">
+          <FormattedMessage id="BottomNav.Features" />
+        </h1>
         <p
           className="descriptionStyle"
           style={{ textAlign: "center", maxWidth: 1140 }}
         >
-          The majority of NEXPIE functionality that helps to develop your
-          connected devices and smart things.
+          <FormattedMessage id="Feature.Descrip" />
         </p>
         <div className="feature-container">
           {feature.map((item, index) => (
@@ -66,7 +67,7 @@ export default class Features extends React.Component {
               description={item.description}
             />
           ))}
-          {oddItem === 1 ? <div className="hidden-feature" /> : <></>}
+          {oddItem === 1 ? <div className="feature-card-wrapper" /> : <></>}
         </div>
       </div>
     );

src/components/Home/Services.js

 import React from "react";
+import { FormattedMessage } from "react-intl";
 
 const Card = () => {
   return (
@@ -29,7 +30,9 @@ export default class Services extends React.Component {
           paddingBottom: "60px"
         }}
       >
-        <h1 className="title">Our Services</h1>
+        <h1 className="title">
+          <FormattedMessage id="Services.Title" />
+        </h1>
         <p
           className="descriptionStyle"
           style={{ textAlign: "center", maxWidth: 1140 }}

src/components/Home/WhyUs.js

 import React from "react";
+import { FormattedMessage } from "react-intl";
 
 const Card = () => {
   return (
@@ -29,14 +30,14 @@ export default class WhyUs extends React.Component {
           paddingBottom: "60px"
         }}
       >
-        <h1 className="title">Why choose NEXPIE </h1>
+        <h1 className="title">
+          <FormattedMessage id="Why.Title" />
+        </h1>
         <p
           className="descriptionStyle"
           style={{ textAlign: "center", maxWidth: 1140 }}
         >
-          NEXPIE provide the Internet of Things (IoT) technology tools for
-          helping your organization to achieve the most benefit in Commercial
-          Marketing.
+          <FormattedMessage id="Why.Descrip" />
         </p>
         <div className="row">
           <div className="why-bg" />

src/scss/style.scss

@@ -128,18 +128,16 @@ body {
   display: flex;
   flex-wrap: wrap;
   justify-content: center;
-  .hidden-feature {
+  .feature-card-wrapper {
     width: 40%;
     height: 130px;
     margin: 0 35px 20px 35px;
   }
   .feature-card {
-    width: 40%;
-    height: 130px;
+    @extend .feature-card-wrapper;
     border-radius: 6px;
     border: solid 1px rgba(66, 179, 229, 0.35);
     background-color: rgba(66, 179, 229, 0.1);
-    margin: 0 35px 20px 35px;
     padding: 10px;
     .feature-img {
       @extend .center;
@@ -190,10 +188,17 @@ body {
   .descriptionStyle {
     font-size: 18px;
   }
-  .feature-container .feature-card,
-  .hidden-feature {
+  .feature-container .feature-card-wrapper {
     width: 90%;
   }
+  .feature-container .feature-card .feature-img {
+    display: none;
+  }
+  .feature-container .feature-card {
+    &:first-child {
+      margin-top: 30px;
+    }
+  }
 }
 // .dropdown-item {
 // 	display: 'flex';

src/translations/en.json

@@ -6,5 +6,22 @@
   "BottomNav.Customer": "CUSTOMER",
   "BottomNav.Packages": "PACKAGES",
   "GoToDashboard": "GO TO DASHBOARD",
-  "connect": "CONNECT"
+  "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.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.",
+  "Services.Title": "Our Services",
+  "Feature.Descrip": "The majority of NEXPIE functionality that helps to develop your connected devices and smart things.",
+  "Monitor.Title": "MONITORING",
+  "Monitor.Descrip": "Visualize your device and sensor data real-time",
+  "Trigger.Title": "TRIGGER",
+  "Trigger.Descrip": "Event that happen via Device data changed",
+  "Control.Title": "CONTROLLING",
+  "Control.Descrip": "Controlling how device works via Cloud Platform.",
+  "Hook.Title": "HOOK",
+  "Hook.Descrip": "Get automation works according to condition setting of Trigger",
+  "Storage.Title": "DATA STORAGE",
+  "Storage.Descrip": "Collecting data from your device and sensor to data storage."
 }

src/translations/th.json

@@ -6,5 +6,22 @@
   "BottomNav.Customer": "ลูกค้า",
   "BottomNav.Packages": "แพ็คเกจ",
   "GoToDashboard": "ไปที่หน้าควบคุม",
-  "connect": "เชื่อมต่อ"
+  "connect": "เชื่อมต่อ",
+  "About.Title": "เกี่ยวกับแพลตฟอร์ม Nexpie IOT",
+  "About.Descrip1": "เชื่อมต่อทุกสิ่ง - ทุกที่ด้วยแพลตฟอร์ม IoT เพื่อปรับปรุงประสิทธิภาพการทำงานและประสิทธิภาพของธุรกิจของคุณ สร้างโอกาสที่ดีที่สุดให้กับองค์กรของคุณในยุคเทคโนโลยีใหม่ๆ ที่ไม่เหมือนที่ใด",
+  "About.Descrip2": "แพลตฟอร์ม NEXPIE IoT มีเครื่องมือและไลบรารีซอฟต์แวร์ที่เร่งกระบวนการพัฒนา IoT เพื่อให้นักพัฒนาสามารถใช้เวลาในการคิดค้นและใช้เวลาน้อยลงโดยไม่ต้องกังวลเกี่ยวกับการดูแลเซิร์ฟเวอร์แบ็คเอนด์และที่จัดเก็บข้อมูล",
+  "Why.Title": "ทำไมต้องเลือก NEXPIE",
+  "Why.Descrip": "NEXPIE มอบเครื่องมือ Internet of Things(IoT) เพื่อช่วยให้องค์กรของคุณได้รับประโยชน์สูงสุดในด้านการตลาดเชิงพาณิชย์",
+  "Services.Title": "บริการของเรา",
+  "Feature.Descrip": "ฟังก์ชั่นหลักของ NEXPIE คือการช่วยในการพัฒนาอุปกรณ์ และ smart things ของคุณ",
+  "Monitor.Title": "การติดตามตรวจสอบ",
+  "Monitor.Descrip": "ตรวจสอบอุปกรณ์และข้อมูลเซ็นเซอร์ของคุณได้แบบ real-time",
+  "Trigger.Title": "ตัวกระตุ้น",
+  "Trigger.Descrip": "เหตุการณ์ที่เกิดขึ้นเมื่อข้อมูลของอุปกรณ์มีการเปลี่ยนแปลง",
+  "Control.Title": "การควบคุม",
+  "Control.Descrip": "การควบคุมการทำงานของอุปกรณ์ผ่าน Cloud Platform",
+  "Hook.Title": "HOOK",
+  "Hook.Descrip": "ทำงานอัตโนมัติตามการเงื่อนไขของตัวกระตุ้นที่ได้ตั้งค่าไว้",
+  "Storage.Title": "การจัดเก็บข้อมูล",
+  "Storage.Descrip": "รวบรวมข้อมูลจากอุปกรณ์และเซ็นเซอร์ของคุณไปยังที่จัดเก็บข้อมูล"
 }