Add learn section

locales/en/app.json

@@ -11,6 +11,11 @@
       "architectureDescription": "Lorem ipsum dolor sit amet consectetur, adipisicing elit. Repellendus totam quasi dolorem nesciunt laboriosam ratione debitis pariatur maiores. Vitae ipsa itaque odit! Officiis omnis totam iste cupiditate temporibus dolore delectus.",
       "communityTitle": "Qiskit community",
       "communityDescription": "Welcome Qiskitters to the Qiskit community! We are committed to making quantum computing for everyone. We love our community and we we want to hear from you. There are various ways to stay informed, contribute, and collaborate on Qiskit.",
+      "learnTitle": "Learn",
+      "learnDescription": "Use Qiskit to learn about the future of computing.",
+      "learnTutorialsButton": "Qiskit tutorials",
+      "learnDocumentationButton": "Qiskit documentation",
+      "learnAltImage": "Screenshot of the Qiskit tutorials",
       "ibmQExperienceTitle": "Don't know quantum circuits?",
       "ibmQExperienceDescription": "Learn about basics of quantum computing and visually create quantum programs using IBM Q Experience.",
       "ibmQExperienceButton": "Go to IBM Q Experience",

src/components/page-home.js

@@ -140,10 +140,12 @@ class PageHome extends localize(i18next)(PageViewElement) {
           margin-left: .5em;
         }
 
+        .learn .description,
         .imb-q-experience .description {
           margin-bottom: 2em;
         }
 
+        .learn .image img,
         .imb-q-experience .image img {
           max-width: 100%;
         }
@@ -236,16 +238,19 @@ class PageHome extends localize(i18next)(PageViewElement) {
             margin: 0;
           }
 
+          .learn,
           .imb-q-experience {
             flex-direction: row;
           }
 
+          .learn .description,
           .imb-q-experience .description {
             margin-bottom: 0;
             flex: 3;
             margin-right: 2em;
           }
 
+          .learn .image,
           .imb-q-experience .image {
             flex: 2;
           }
@@ -294,6 +299,35 @@ class PageHome extends localize(i18next)(PageViewElement) {
         </div>
       </section>
 
+      <section class="learn colored">
+        <div class="limited-width">
+          <div class="description">
+            <h3>${i18next.t('pages.home.learnTitle')}</h3>
+            <p>${i18next.t('pages.home.learnDescription')}</p>
+            <!-- TODO: Update buttons -->
+            <a
+                href="https://nbviewer.jupyter.org/github/QISKit/qiskit-tutorial/blob/master/index.ipynb"
+                title="${i18next.t('pages.home.learnTutorialsButton')}"
+                target="_blank"
+                rel="noopener"
+                tabindex="-1">
+              <button>${i18next.t('pages.home.learnTutorialsButton')}</button>
+            </a>
+            <a
+                href="/documentation/"
+                title="${i18next.t('pages.home.learnDocumentationButton')}"
+                target="_blank"
+                rel="noopener"
+                tabindex="-1">
+              <button>${i18next.t('pages.home.learnDocumentationButton')}</button>
+            </a>
+          </div>
+          <div class="image">
+            <img src="images/qiskit-learn.png" alt="${i18next.t('pages.home.learnAltImage')}">
+          </div>
+        </div>
+      </section>
+
       <section class="community">
         <div class="limited-width">
           <div class="description">