Merge pull request #299 from topcoder-platform/TCA-413_learn-homepage-header

TCA-458 learn homepage header

Author: vas3a

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

@@ -19,7 +19,7 @@
             }
         }
     }
-    
+
     &-inner {
         padding: calc($space-xxxxl + $space-sm) 0 $space-lg;
         @include contentWidth;
@@ -47,13 +47,13 @@
             flex-direction: column;
         }
     }
-    
+
     &-card-col {
         flex: 0 0 auto;
     }
-    
+
     &-text {
         @extend .body-medium-normal;
-        margin-top: $space-xxl;
+        margin-top: $space-sm;
     }
 }

src-ts/tools/learn/learn-lib/wave-hero/WaveHero.tsx

@@ -7,7 +7,7 @@ interface WaveHeroProps {
     children?: ReactNode
     text: string
     theme?: 'light'
-    title: string
+    title: ReactNode
 }
 
 const WaveHero: FC<WaveHeroProps> = (props: WaveHeroProps) => {

src-ts/tools/learn/welcome/WelcomePage.module.scss

@@ -1,10 +1,15 @@
 @import '../../../lib/styles/includes';
 
 .hero-wrap {
+    svg:global(.tca-logo) {
+        margin-bottom: $space-xxl;
+        max-width: calc(100% - 70px);
+    }
+
     :global(.hero-card-col) {
         width: 43.5%;
         max-width: 600px;
-        
+
         @include ltemd {
             width: 100%;
             max-width: none;
@@ -15,7 +20,7 @@
 .courses-section {
     padding: $space-xxxxl 0;
     position: relative;
-    
+
     @include ltemd {
         padding-top: $space-xxl;
     }
@@ -38,12 +43,12 @@
     @include ltelg {
         grid-template-columns: repeat(2, 1fr);
     }
-    
+
     @media (max-width: 576px) {
         grid-template-columns: repeat(1, 1fr);
     }
-    
+
     @include ltemd {
         margin-top: $space-xxl;
     }
-}
+}

src-ts/tools/learn/welcome/WelcomePage.tsx

@@ -13,6 +13,7 @@ import {
 
 import { CoursesCard } from './courses-card'
 import { ProgressBlock } from './progress-block'
+import { ReactComponent as TcAcademyFullLogoSvg } from './tca-full-logo.svg'
 import styles from './WelcomePage.module.scss'
 
 const WelcomePage: FC<{}> = () => {
@@ -30,7 +31,12 @@ const WelcomePage: FC<{}> = () => {
                 <Portal portalId='page-subheader-portal-el'>
                     <div className={styles['hero-wrap']}>
                         <WaveHero
-                            title='Welcome to Topcoder ACADEMY'
+                            title={(
+                                <>
+                                    <TcAcademyFullLogoSvg className='tca-logo' />
+                                    Welcome!
+                                </>
+                            )}
                             text={`
                                 The Topcoder Academy will provide you with learning opportunities
                                 in the form of guided learning paths.