From 42686db303493deb6cea853752559cb1ad4d736d Mon Sep 17 00:00:00 2001
From: Mrugesh Mohapatra <1884376+raisedadead@users.noreply.github.com>
Date: Thu, 13 Aug 2020 16:03:03 +0530
Subject: [PATCH] feat: update learn intro (#39393)

* feat: update learn into

* fix: make text more readable

* fix: adjust global font smoothing

Co-authored-by: Ahmad Abdolsaheb <ahmad.abdolsaheb@gmail.com>
---
 client/src/components/Intro/index.js     | 71 ++++++++++++++++++------
 client/src/components/Intro/intro.css    | 13 +++++
 client/src/components/layouts/global.css |  1 +
 cypress/integration/learn/index.js       |  2 +-
 4 files changed, 70 insertions(+), 17 deletions(-)

diff --git a/client/src/components/Intro/index.js b/client/src/components/Intro/index.js
index 4187db4444..5e64011150 100644
--- a/client/src/components/Intro/index.js
+++ b/client/src/components/Intro/index.js
@@ -99,27 +99,66 @@ function Intro({
   } else {
     return (
       <>
-        <Row>
+        <Row className='intro-description'>
           <Col sm={10} smOffset={1} xs={12}>
             <Spacer />
             <h1 className='big-heading text-center'>
-              Welcome to freeCodeCamp.org
+              Welcome to freeCodeCamp's curriculum.
             </h1>
+          </Col>
+          <Col md={8} mdOffset={2} sm={10} smOffset={1} xs={12}>
+            <Spacer size={2} />
+            <strong>Please slow down and read this.</strong>
             <Spacer />
-            <h2 className='medium-heading'>Learn to code at home.</h2>
-            <h2 className='medium-heading'>Build projects.</h2>
-            <h2 className='medium-heading'>Earn certifications.</h2>
-            <h2 className='medium-heading'>
-              Since 2014, more than 40,000 freeCodeCamp.org graduates have
-              gotten jobs at tech companies including:
-            </h2>
-            <div className='logo-row'>
-              <h2 className='medium-heading'>Apple</h2>
-              <h2 className='medium-heading'>Google</h2>
-              <h2 className='medium-heading'>Amazon</h2>
-              <h2 className='medium-heading'>Microsoft</h2>
-              <h2 className='medium-heading'>Spotify</h2>
-            </div>
+            <p>
+              freeCodeCamp is a proven path to your first software developer
+              job.
+            </p>
+            <p>
+              More than 40,000 people have gotten developer jobs after
+              completing this – including at big companies like Google and
+              Microsoft.
+            </p>
+            <p>
+              If you are new to programming, we recommend you start at the
+              beginning and earn these certifications in order.
+            </p>
+            <p>
+              To earn each certification, build its 5 required projects and get
+              all their tests to pass.
+            </p>
+            <p>
+              You can add these certifications to your résumé or LinkedIn. But
+              more important than the certifications is the practice you get
+              along the way.
+            </p>
+            <p>If you feel overwhelmed, that is normal. Programming is hard.</p>
+            <p>Practice is the key. Practice, practice, practice.</p>
+            <p>
+              And this curriculum will give you thousands of hours of hands-on
+              programming practice.
+            </p>
+            <p>
+              And if you want to learn more math and computer science theory, we
+              also have thousands of hours of video courses on{' '}
+              <Link className='inline' to='https://youtube.com/freecodecamp'>
+                freeCodeCamp's YouTube channel
+              </Link>
+              .
+            </p>
+            <p>
+              If you want to get a developer job or freelance clients,
+              programming skills will be just part of the puzzle. You also need
+              to build your personal network and your reputation as a developer.
+            </p>
+            <p>
+              You can do this on Twitter and GitHub, and also on{' '}
+              <Link className='inline' to='/forum'>
+                the freeCodeCamp forum
+              </Link>
+              .
+            </p>
+            <p>Happy coding.</p>
             <Spacer />
           </Col>
 
diff --git a/client/src/components/Intro/intro.css b/client/src/components/Intro/intro.css
index 763dc10583..4868c53ff1 100644
--- a/client/src/components/Intro/intro.css
+++ b/client/src/components/Intro/intro.css
@@ -46,3 +46,16 @@
 .quote-author {
   font-style: normal;
 }
+
+.intro-description strong,
+.intro-description p {
+  font-family: 'Lato', sans-serif;
+  font-size: 1rem;
+}
+
+@media (min-width: 500px) {
+  .intro-description strong,
+  .intro-description p {
+    font-size: 1.22rem;
+  }
+}
diff --git a/client/src/components/layouts/global.css b/client/src/components/layouts/global.css
index d11d720d2d..b64835343c 100644
--- a/client/src/components/layouts/global.css
+++ b/client/src/components/layouts/global.css
@@ -1,5 +1,6 @@
 html {
   font-size: 18px;
+  -webkit-font-smoothing: antialiased;
 }
 
 body {
diff --git a/cypress/integration/learn/index.js b/cypress/integration/learn/index.js
index 306d2f674a..498ae0c9ab 100644
--- a/cypress/integration/learn/index.js
+++ b/cypress/integration/learn/index.js
@@ -32,7 +32,7 @@ describe('Learn Landing page', function() {
   it('Has the correct heading for an unauthenticated User', () => {
     cy.visit(locations.index);
 
-    cy.contains('h1', 'Welcome to freeCodeCamp.org');
+    cy.contains('h1', "Welcome to freeCodeCamp's curriculum.");
   });
 
   it('renders a curriuculum map', () => {