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

@@ -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>
+            <p>
-            <h2 className='medium-heading'>Build projects.</h2>
+              freeCodeCamp is a proven path to your first software developer
-            <h2 className='medium-heading'>Earn certifications.</h2>
+              job.
-            <h2 className='medium-heading'>
+            </p>
-              Since 2014, more than 40,000 freeCodeCamp.org graduates have
+            <p>
-              gotten jobs at tech companies including:
+              More than 40,000 people have gotten developer jobs after
-            </h2>
+              completing this – including at big companies like Google and
-            <div className='logo-row'>
+              Microsoft.
-              <h2 className='medium-heading'>Apple</h2>
+            </p>
-              <h2 className='medium-heading'>Google</h2>
+            <p>
-              <h2 className='medium-heading'>Amazon</h2>
+              If you are new to programming, we recommend you start at the
-              <h2 className='medium-heading'>Microsoft</h2>
+              beginning and earn these certifications in order.
-              <h2 className='medium-heading'>Spotify</h2>
+            </p>
-            </div>
+            <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>
 

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;
+  }
+}

client/src/components/layouts/global.css

@@ -1,5 +1,6 @@
 html {
   font-size: 18px;
+  -webkit-font-smoothing: antialiased;
 }
 
 body {

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', () => {