From a8266edf6a2e99dba310e1d1b56a4373a7a56f0c Mon Sep 17 00:00:00 2001
From: chornos13 <chornos13@hotmail.com>
Date: Tue, 9 Feb 2021 10:10:53 +0700
Subject: [PATCH] feat(what-will-learn): add typescript and responsive layout

---
 src/views/Home/partials/WhatWillLearn.tsx | 15 ++++++++++++---
 1 file changed, 12 insertions(+), 3 deletions(-)

diff --git a/src/views/Home/partials/WhatWillLearn.tsx b/src/views/Home/partials/WhatWillLearn.tsx
index ec722b2..08777af 100644
--- a/src/views/Home/partials/WhatWillLearn.tsx
+++ b/src/views/Home/partials/WhatWillLearn.tsx
@@ -28,6 +28,15 @@ const dataLearnItems: LearnItemProps[] = [
       'you need for production: hybrid static & server rendering, TypeScript support, ' +
       'smart bundling, route pre-fetching, and more. No config needed.',
   },
+  {
+    urlTitleIcon:
+      'https://www.typescriptlang.org/favicon-32x32.png?v=8944a05a8b601855de116c8a56d3b3ae',
+    title: 'TypeScript',
+    urlDocumentation: 'https://www.typescriptlang.org/',
+    children:
+      'Typed JavaScript at Any Scale. TypeScript extends JavaScript by adding types. ' +
+      'By understanding JavaScript, TypeScript saves you time catching errors and providing fixes before you run code',
+  },
   {
     urlTitleIcon:
       'https://gw.alipayobjects.com/zos/rmsportal/rlpTLlbMzTNYuZGGCVYM.png',
@@ -160,13 +169,13 @@ function WhatWillLearn() {
         <Title size={30}>What will you learn?</Title>
       </Col>
       <Col xs={24}>
-        <Row gutter={[20, 20]}>
+        <Row gutter={[20, 20]} justify={'center'}>
           <Col xs={24}>
             <Title noMargin>Library</Title>
           </Col>
-          {dataLearnItems.map((learnItem, key) => {
+          {dataLearnItems.map((learnItem, index) => {
             return (
-              <Col xs={12} key={key}>
+              <Col xs={24} md={12} key={index}>
                 <LearnItem {...learnItem} />
               </Col>
             )