Merge pull request #8985 from MiroslavDionisiev/UEPR-121

feat: [UEPR-121] add new banner with link to ideas project

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);

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 (
         <div>
             <div className="banner-wrapper">
-                <TitleBanner className="masthead ideas-banner">
-                    <div className="title-banner-p">
-                        <img
-                            alt={intl.formatMessage({id: 'ideas.headerImageDescription'})}
-                            src="/images/ideas/masthead-illustration.svg"
-                        />
-                        <h1 className="title-banner-h1">
-                            <FormattedMessage id="ideas.headerMessage" />
-                        </h1>
-                        <a href="/projects/editor/?tutorial=all">
-                            <Button className="banner-button">
-                                <img
-                                    alt=""
-                                    src="/images/ideas/bulb-yellow-icon.svg"
-                                />
-                                <FormattedMessage id="ideas.headerButtonMessage" />
-                            </Button>
-                        </a>
+                <img
+                    alt={intl.formatMessage({id: 'ideas.headerImageDescription'})}
+                    src="/images/ideas/banner.svg"
+                />
+                <div className="banner-description">
+                    <div className="title">
+                        <FormattedMessage id="ideas.headerTitle" />
                     </div>
-                </TitleBanner>
+                    <p>
+                        <FormattedMessage
+                            id="ideas.headerDescription"
+                            values={{a: chunks => <a href="https://scratch.mit.edu/projects/1093752362/">{chunks}</a>}}
+                        />
+                    </p>
+                </div>
             </div>
             <div className="tips">
                 <div className="inner">

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;

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! <a>Remix your own</a> 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",