Merge pull request #467 from topcoder-platform/TCA-881

TCA-881 modify jumbo to match design -> TCA-701

Author: kkartunov

src-ts/tools/learn/learn-lib/wave-hero/WaveHero.module.scss

@@ -3,32 +3,34 @@
 
 .hero {
     &-wrap {
-        background: url('./learn-welcome-bg-curve.png') repeat-x center bottom , $tc-grad15;
-        background-size: 1440px 40px, auto;
+        background: url('./learn-welcome-bg-curve.png') repeat-x center bottom, url('./learn-welcome-banner-img.png') no-repeat center, $tc-grad15;
         overflow: hidden;
-        padding-bottom: 40px;
+        padding-bottom: 100px;
+
         @include ltelg {
             background-size: 100vw $space-lg, auto;
-            padding-bottom: $space-lg;
+            padding-bottom: $space-mx;
         }
+
         &:global(.light) {
-            background: url('./learn-welcome-bg-curve-white.png') repeat-x center bottom , $tc-grad15;
-            background-size: 1440px 40px, auto;
+            background: url('./learn-welcome-bg-curve-white.png') repeat-x center bottom / 100vw, url('./learn-welcome-banner-img.png') no-repeat center, $tc-grad15;
+
             @include ltelg {
-                background-size: 100vw $space-lg, auto;
+                background: url('./learn-welcome-bg-curve-white.png') repeat-x center bottom / 100vw, url('./learn-welcome-banner-img-mobile.png') no-repeat top, $tc-grad15;
             }
         }
     }
 
     &-inner {
-        padding: calc($space-xxxxl + $space-sm) 0 $space-lg;
+        padding: calc($space-mx * 2) 0 $space-lg;
         @include contentWidth;
 
         @include ltelg {
             padding-bottom: $space-mx;
         }
+
         @include ltemd {
-            padding-top: $space-xxl;
+            padding-top: calc($space-mx * 4);
             padding-bottom: $space-xxl;
         }
     }
@@ -39,9 +41,21 @@
 
         color: $tc-white;
 
+        h1 {
+            font-size: 80px;
+            line-height: 72px;
+            margin-bottom: $space-xxxxl;
+
+            @include ltemd {
+                font-size: 42px;
+                line-height: 40px;
+            }
+        }
+
         @include ltelg {
             gap: $space-mx;
         }
+
         @include ltemd {
             gap: $space-xxl;
             flex-direction: column;
@@ -53,7 +67,8 @@
     }
 
     &-text {
-        @extend .body-medium-normal;
+        @extend .body-large;
         margin-top: $space-sm;
+        max-width: 910px;
     }
-}
+}

src-ts/tools/learn/learn-lib/wave-hero/learn-welcome-banner-img-mobile.png

@@ -15,10 +15,8 @@ import {
 import '../../../lib/styles/index.scss'
 
 import { AvailableCoursesList } from './available-courses-list'
-import { ProgressBlock } from './progress-block'
 import { WhatTCACanDo } from './what-tca-cando'
 import { TCCertifications } from './tc-certifications'
-import { ReactComponent as TcAcademyFullLogoSvg } from './tca-full-logo.svg'
 import styles from './WelcomePage.module.scss'
 
 const WelcomePage: FC = () => {
@@ -40,10 +38,7 @@ const WelcomePage: FC = () => {
                     <div className={styles['hero-wrap']}>
                         <WaveHero
                             title={(
-                                <>
-                                    <TcAcademyFullLogoSvg className='tca-logo' />
-                                    Welcome!
-                                </>
+                                <>Topcoder Academy</>
                             )}
                             text={`
                                 The Topcoder Academy will provide you with learning opportunities
@@ -52,14 +47,7 @@ const WelcomePage: FC = () => {
                                 prepare you to earn on the Topcoder platform.
                             `}
                             theme='light'
-                        >
-                            <ProgressBlock
-                                allCertifications={allCertsData.certifications}
-                                userCompletedCertifications={userCertsData.completed}
-                                userInProgressCertifications={userCertsData.inProgress}
-                                ready={coursesReady}
-                            />
-                        </WaveHero>
+                        />
                     </div>
                 </Portal>
 

src-ts/tools/learn/learn-lib/wave-hero/learn-welcome-banner-img.png

@@ -1 +1,3 @@
+// Deprecated components
+// TODO: remove it at some point if not needed somewhere else...
 export { default as ProgressBlock } from './ProgressBlock'