:remove:

pages/index/About.js

@@ -105,9 +105,6 @@ const About = () => {
                                 <div className="detail-content">
                                     <img className="" src="/static/testcoverAbout.jpg" />
                                     <div className="data-detail-content">
-                                        <div className="title-content">
-                                            <h6> </h6>
-                                        </div>
                                         {
                                             data.map((item, index) => (
                                                 <div className="title-content " key={index}>

pages/index/Allowance.js

@@ -10,9 +10,9 @@ const Allowance = () => {
 
     const [data, setData] = useState([
         {
-            title: "ระดับเริ่มต้น (Aging society)",
-            text: "สังคมที่มีประชากรอายุ 60 ปีขึ้นไปมากกว่าร้อยละ 10 ของประชากรทั้งประเทศ",
-            subtext: "หรือมีประชากรอายุตั้งแต่ 65 ปีมากกว่าร้อยละ 7 ของประชากรทั้งประเทศ"
+            title: "เบี้ยยังชีพผู้สูงอายุ คือ",
+            text: "เป็นสวัสดิการขั้นพื้นฐานที่ภาครัฐจัดสรรไว้ให้กับผู้สูงอายุซึ่งหมายถึง บุคคลที่มีอายุ 60 ปีขึ้นไป ",
+            subtext: "เพื่อเป็นเงินช่วยเหลือ และแบ่งเบาภาระค่าใช้จ่ายการดำรงชีวิตในแต่ละเดือน"
         },
         {
             title: "ระดับสมบูรณ์ (Aged society)",
@@ -55,7 +55,7 @@ const Allowance = () => {
                 <link rel='icon' href='/static/logomain.svg' />
             </Head>
             <NavBar name="main" tab={isSmallScreen ? homeMin : home} confirm={onConfirm} />
-            <div className="warp-about">
+            <div className="warp-allowance-page">
                 <div className="page-content">
                     {
                         isSmallScreen ?
@@ -94,8 +94,8 @@ const Allowance = () => {
                                             data.map((item, index) => (
                                                 <div className="title-content" key={index}>
                                                     <h6 className="header-title-content">{item.title}</h6>
-                                                    <h6>{item.text}</h6>
-                                                    <h6>{item.subtext}</h6>
+                                                    <h6 className="sub-title-content">{item.text}</h6>
+                                                    <h6 className="sub-title-content">{item.subtext}</h6>
                                                 </div>
                                             ))
                                         }

styles/base.scss

@@ -8,6 +8,7 @@
 
 //Index
 @import './index/society.scss';
+@import './index/allowance.scss';
 
 //Main
 @import "./main.scss";

styles/index/allowance.scss

@@ -0,0 +1,88 @@
+.warp-allowance-page {
+    .page-content {
+      padding-top: 3rem;
+
+      .container-fluid {
+        display: flex;
+        flex-direction: column;
+        .head-content {
+          h1.name-header {
+            font-family: $font-header;
+          }
+
+          .title-about {
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            h6 {
+              margin-top: 0.5rem;
+              color: $font-text-sub;
+              font-style: italic;
+            }
+          }
+        }
+        .detail-content {
+          display: flex;
+          justify-content: center;
+          align-items: center;
+          margin: 2rem 3rem;
+
+          @media (max-width: 575.98px) {
+            flex-direction: column;
+          }
+          img {
+            height: 20rem;
+            margin-right: 1rem;
+            @media (max-width: 575.98px) {
+              margin-right: 0;
+              height: 18rem;
+            }
+          }
+
+          .data-detail-content {
+            margin-left: 2rem;
+            display: flex;
+            flex-direction: column;
+
+            @media (max-width: 575.98px) {
+              margin-top: 1rem;
+            }
+
+            .title-content {
+              padding: 0 3rem;
+              margin-bottom: 1rem;
+
+              @media (max-width: 768px) {
+                padding: 0;
+              }
+
+              .header-title-content {
+                font-weight: bold !important;
+              }
+
+              .sub-title-content {
+                margin-left: 1rem;
+              }
+
+              h6 {
+                text-align: start;
+                opacity: 0.8;
+                margin-bottom: 0.5rem !important;
+                font-weight: lighter;
+              }
+            }
+            .more-content {
+              padding: 0 3rem;
+              display: flex;
+
+              h6 {
+                margin-top: 1rem;
+                font-weight: bold;
+                text-align: center;
+              }
+            }
+          }
+        }
+      }
+    }
+  }