update docs site content

Author: ethanshar

uilib-docs/src/images/examples/accessibility.gif

@@ -7,6 +7,7 @@ import mainLogo from '../images/logo_big.png';
 import datePicker from '../images/examples/datepicker.png';
 import actionSheet from '../images/examples/actionSheet.png';
 import rtl from '../images/examples/rtl.png';
+import accessibility from '../images/examples/accessibility.gif';
 
 const IndexPage = props => {
   return (
@@ -125,7 +126,7 @@ class MyScreen extends Component {
 
 const NativeSection = () => {
   return (
-    <div className="native-section">
+    <div className="components-section">
       <h2>Over than 60 Beautiful Components</h2>
       <p>
         Basic components like <b>Button</b>, <b>Avatar</b> and <b>Card</b> and more sophisticated ones like <b>Hints</b>
@@ -148,9 +149,10 @@ const OthersSection = () => {
     <div className="support-section">
       <div>
         <h2>RTL and Accessibility in Mind</h2>
-        <p>We provide full out-of-the-box support to RTL and Accessibility</p>
+        <p>We provide a full, out-of-the-box support to RTL and Accessibility</p>
       </div>
       <div>
+        <img src={accessibility} height="500"/>
         <img src={rtl} height="500"/>
       </div>
     </div>

uilib-docs/src/pages/index.js

@@ -72,32 +72,43 @@
     }
   }
 
-  .native-section {
+  .components-section {
     padding: 40px;
     text-align: center;
-
+    background-color: $dark80;
+    margin-top: 20px;
+    
     > .image-examples {
       display: flex;
       justify-content: space-evenly;
-
+      
       img {
         height: 500px;
       }
     }
   }
-
+  
   .support-section {
     display: flex;
-    padding: 40px;
-    background: $dark20;
+    flex-direction: column;
+    align-items: center;
+    text-align: center;
+    background: $blue10;
     color: $white;
+    // width: 60vw;
+    // margin: 0 auto;
+    margin-top: 20px;
+    padding: 40px;
 
     > div:first-child {
-      width: 25%;
+      // width: 25%;
     }
 
     > div:nth-child(2) {
-      padding-left: 20px;
+
+      img {
+        margin-right: 20px;
+      }
     }
   }