diff --git a/src/_colors.scss b/src/_colors.scss index 5f6e4fd6f..618200b01 100644 --- a/src/_colors.scss +++ b/src/_colors.scss @@ -33,6 +33,7 @@ $ui-cyan-blue: hsla(194, 73%, 36%, 1); //#19809F /* Using www naming convention for now, should be consistent with gui */ $ui-aqua: hsla(144, 45%, 36%, 1); $ui-aqua-dark: darken($ui-aqua, 10%); +$ui-purple-light: hsla(260, 100%, 88%, 1); // #DACEF3 $ui-purple: hsla(260, 100%, 70%, 1); // #9966FF Looks Primary $ui-purple-dark: hsla(260, 60%, 60%, 1); // #855CD6 Looks Secondary $ui-purple-darker: hsla(260, 46%, 54%, 1); diff --git a/src/views/ideas/ideas.jsx b/src/views/ideas/ideas.jsx index 41214dfb4..c2098e5da 100644 --- a/src/views/ideas/ideas.jsx +++ b/src/views/ideas/ideas.jsx @@ -3,7 +3,6 @@ const React = require('react'); const Button = require('../../components/forms/button.jsx'); const FlexRow = require('../../components/flex-row/flex-row.jsx'); -const TitleBanner = require('../../components/title-banner/title-banner.jsx'); const Page = require('../../components/page/www/page.jsx'); const render = require('../../lib/render.jsx'); @@ -91,26 +90,21 @@ const Ideas = () => { return (
- -
- {intl.formatMessage({id: -

- -

- - - + {intl.formatMessage({id: +
+
+
- +

+ {chunks}}} + /> +

+
diff --git a/src/views/ideas/ideas.scss b/src/views/ideas/ideas.scss index 8354e8354..0781b98b0 100644 --- a/src/views/ideas/ideas.scss +++ b/src/views/ideas/ideas.scss @@ -9,12 +9,40 @@ $base-bg: $ui-white; } .banner-wrapper { - background: $ui-aqua bottom right url("/images/ideas/right-juice.png") no-repeat; -} + display: flex; + flex-wrap: wrap; + justify-content: center; + align-items: center; + gap: 2rem; + padding: 3rem 0; + background-color: $ui-aqua; -.ideas-banner { - margin-bottom: 0; - background: bottom left url("/images/ideas/left-juice.png") no-repeat; + .banner-description { + display: flex; + flex-direction: column; + text-align: start; + max-width: 27rem; + + .title { + font-size: 2rem; + font-weight: 700; + line-height: 2.5rem; + color: $ui-white; + } + + p { + font-size: 1rem; + font-weight: 400; + line-height: 1.5rem; + color: $ui-white; + + a { + font-weight: 700; + text-decoration: underline; + color: $ui-purple-light; + } + } + } } .tips { @@ -148,29 +176,16 @@ $base-bg: $ui-white; //4 columns @media #{$small} { - - .title-banner { - &.masthead { - padding-bottom: 1.25rem; - - p { - max-width: $cols4; - } + .banner-wrapper { + img { + display: none; } } - - // put the image first if in 4-column + .tips-info-body { max-width: $cols4; text-align: center; - &.tips-illustration { - order: -1; - img { - width: $cols4; - } - } - .button { width: 100%; } @@ -179,34 +194,14 @@ $base-bg: $ui-white; //6 columns @media #{$medium} { - .title-banner { - &.masthead { - - p { - max-width: $cols6; - } - } - } - .tips-info-body { max-width: $cols4; text-align: center; } } - //8 columns @media #{$intermediate} { - .title-banner { - &.masthead { - padding-bottom: 2rem; - - p { - max-width: $cols6; - } - } - } - .tips-info-body { max-width: $cols4; } @@ -226,16 +221,6 @@ $base-bg: $ui-white; // 12 columns @media #{$big} { - .title-banner { - &.masthead { - padding-bottom: 1.25rem; - - p { - max-width: $cols8; - } - } - } - .tips-info-section { &.mod-align-top { align-items: flex-start; diff --git a/src/views/ideas/l10n.json b/src/views/ideas/l10n.json index fb5965869..1c1038a82 100644 --- a/src/views/ideas/l10n.json +++ b/src/views/ideas/l10n.json @@ -1,6 +1,7 @@ { - "ideas.headerMessage": "What will you create?", - "ideas.headerImageDescription": "Outlandish creations from pixelated unicorns to drumbeat waveforms to levitating tacos to buckets of rainbows.", + "ideas.headerTitle": "Looking for a project idea?", + "ideas.headerDescription": "Try Scratch’s Project Idea Generator! Pick as many ideas as you’d like. Mix and match ideas! Remix your own idea generator! The possibilities are endless.", + "ideas.headerImageDescription": "Scratch cat holding a lightning bulb and a block", "ideas.headerButtonMessage": "Choose a tutorial", "ideas.startHereText": "New to Scratch? Start here!", "ideas.gettingStartedButtonText": "Try Getting Started Tutorial", diff --git a/static/images/ideas/banner.svg b/static/images/ideas/banner.svg new file mode 100644 index 000000000..7756da540 --- /dev/null +++ b/static/images/ideas/banner.svg @@ -0,0 +1,19 @@ + + + + + + + + + + + + + + + + + + +