diff --git a/src-ts/tools/learn/learn-lib/wave-hero/WaveHero.module.scss b/src-ts/tools/learn/learn-lib/wave-hero/WaveHero.module.scss index 7fb19c5aa..9deca454d 100755 --- a/src-ts/tools/learn/learn-lib/wave-hero/WaveHero.module.scss +++ b/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; } -} +} \ No newline at end of file diff --git a/src-ts/tools/learn/learn-lib/wave-hero/learn-welcome-banner-img-mobile.png b/src-ts/tools/learn/learn-lib/wave-hero/learn-welcome-banner-img-mobile.png new file mode 100644 index 000000000..f5709a310 Binary files /dev/null and b/src-ts/tools/learn/learn-lib/wave-hero/learn-welcome-banner-img-mobile.png differ diff --git a/src-ts/tools/learn/learn-lib/wave-hero/learn-welcome-banner-img.png b/src-ts/tools/learn/learn-lib/wave-hero/learn-welcome-banner-img.png new file mode 100644 index 000000000..94b9ca048 Binary files /dev/null and b/src-ts/tools/learn/learn-lib/wave-hero/learn-welcome-banner-img.png differ diff --git a/src-ts/tools/learn/learn-lib/wave-hero/learn-welcome-bg-curve-white.png b/src-ts/tools/learn/learn-lib/wave-hero/learn-welcome-bg-curve-white.png old mode 100755 new mode 100644 index 2ee6f0cba..39bffbff9 Binary files a/src-ts/tools/learn/learn-lib/wave-hero/learn-welcome-bg-curve-white.png and b/src-ts/tools/learn/learn-lib/wave-hero/learn-welcome-bg-curve-white.png differ diff --git a/src-ts/tools/learn/learn-lib/wave-hero/learn-welcome-bg-curve.png b/src-ts/tools/learn/learn-lib/wave-hero/learn-welcome-bg-curve.png old mode 100755 new mode 100644 index 1ec6f751d..39bffbff9 Binary files a/src-ts/tools/learn/learn-lib/wave-hero/learn-welcome-bg-curve.png and b/src-ts/tools/learn/learn-lib/wave-hero/learn-welcome-bg-curve.png differ diff --git a/src-ts/tools/learn/welcome/WelcomePage.tsx b/src-ts/tools/learn/welcome/WelcomePage.tsx index 723fdc458..59f9df91e 100644 --- a/src-ts/tools/learn/welcome/WelcomePage.tsx +++ b/src-ts/tools/learn/welcome/WelcomePage.tsx @@ -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 = () => {