feat: [UEPR-90] Added new section to the ideas page

scratchfoundation · Nov 1, 2024 · c270466 · c270466
1 parent a906ade
commit c270466
Show file tree

Hide file tree

Showing 8 changed files with 351 additions and 381 deletions.
diff --git a/src/_colors.scss b/src/_colors.scss
@@ -59,6 +59,7 @@ $active-dark-gray: hsla(0, 0%, 0%, .2);
 $box-shadow-gray: hsla(0, 0%, 0%, .25);
 $box-shadow-light-gray: hsla(0, 0%, 0%, .15);
 $overlay-gray: hsla(0, 0%, 0%, .75);
+$gray-50: hsla(226, 15%, 97%, 1);
 $transparent-light-blue: rgba(229, 240, 254, 0);
 
 /* Typography Colors */

diff --git a/src/views/ideas/ideas.jsx b/src/views/ideas/ideas.jsx
diff --git a/src/views/ideas/ideas.scss b/src/views/ideas/ideas.scss
@@ -17,127 +17,133 @@ $base-bg: $ui-white;
     background: bottom left url("/images/ideas/left-juice.png") no-repeat;
 }
 
-.ttt-section {
-    display: flex;
-    margin: 0 auto;
-    text-align: center;
-    justify-content: center;
-    flex-wrap: wrap;
-    align-items: center;
-}
-
-.tips-divider {
-    border-top: 1px solid $ui-gray;
-    width: 100%;
-}
-
-.tips-banner-image {
-    max-width: calc(100% - 2rem);
-}
-
-.banner-button {
-    background-color: $ui-white;
-    color: $ui-aqua;
-    font-size: 1rem;
-
-    img {
-        margin-right: 1rem;
-        height: 1.5rem;
-        vertical-align: middle;
-    }
-
-    a {
-        color: $ui-white;
-    }
-
-    span {
-      vertical-align: middle;
+.tips {
+    .inner {
+        display: flex;
+        flex-direction: column;
+        gap: 0.75rem;
+
+        .tips-section {
+            display: flex;
+            justify-content: space-between;
+
+            .tip {
+                display: flex;
+                flex-direction: column;
+
+                .tips-img {
+                    width: $cols3;
+                    height: 10rem;
+                }
+            }
+        }
     }
 }
 
-.ideas-button {
-    margin-right: .75rem;
-    background-color: $ui-purple-dark;
-    color: $ui-white;
-    font-size: 1rem;
+.physical-ideas {
+    .inner {
+        display: flex;
+        flex-direction: column;
+        gap: 1.5rem;
 
-    img {
-        margin-right: 1rem;
-        height: 1.5rem;
-        vertical-align: middle;
-    }
+        .physical-ideas-section {
+            justify-content: space-between;
+            align-items: flex-start;
+            gap: 1.5rem;
+
+            .physical-idea {
+                display: flex;
+                flex-direction: row;
+                gap: 1.5rem;
+                text-align: start;
+
+                .makey-makey-img {
+                    height: 6.5rem;
+                }
+
+                .micro-bit {
+                    height: 8.5rem;
+                }
+
+                .physical-idea-description {
+                    display: flex;
+                    flex-direction: column;
+                    justify-content: space-between;
+                    align-items: flex-start;
+
+                    p {
+                        margin: 0;
+                        font-size: 1rem;
+                        font-weight: 400;
+                        line-height: 1.5rem;
+                    }
+
+                    .tips-button {
+                        width: auto;
+                        padding: 0.75rem;
+                    }
+                }
+            }
 
-    a {
-        color: $ui-white;
-    }
+            .physical-idea:first-child {
+                flex: 1.5;
+            }
 
-    span {
-      vertical-align: middle;
+            .physical-idea:last-child {
+                flex: 2;
+            }
+        }
     }
 }
 
-.wide-button {
-    width: 100%;
-}
-
-.ideas-all-cards {
-    padding: 5rem 0 !important;
-}
-
-.ideas-starter {
-    padding: 5rem 0 !important;
-}
-
-.tips-getting-started {
-    background-color: $ui-light-gray;
-    padding-top: 2.5rem;
+.tips, .physical-ideas {
+    display: flex;
+    justify-content: center;
+    padding: 3rem 0;
+    background-color: $gray-50;
 }
 
-.tips-left {
-    justify-content: flex-start;
-}
+.gray-area {
+    background-color: $ui-gray;
 
-.ideas-image {
-    margin-right: 2rem;
-}
+    .tips-info-section {
+        padding: 2.5rem 0;
+        width: 100%;
+        flex-wrap: nowrap;
 
-.tips-activity-guides {
-    background-color: $ui-light-gray;
-    padding-bottom: 2rem;
-}
+        .tips-info-body {
+            text-align: left;
+        }
+    }
 
-.purchase-button {
-    img {
-        margin-right: 0;
-        margin-left: .75rem;
-        width: 1rem;
-        vertical-align: baseline;
+    img.tips-icon {
+        height: 1.75rem;
     }
 }
 
-.tips-info-section {
-    padding: 2.5rem 0;
-    width: 100%;
-    flex-wrap: nowrap;
+.section-header {
+    font-size: 2rem;
+    font-family: "Helvetica Neue", "Helvetica", Arial, sans-serif;
+    font-weight: 700;
 }
 
-.tips-info-body {
-    text-align: left;
-}
+.tips-button {
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+    align-items: center;
+    gap: 0.5rem;
+
+    font-family: "Helvetica Neue", "Helvetica", Arial, sans-serif;
+    font-weight: 700;
+    line-height: 1.25rem;
 
-.tips-cards-buttons {
-    a {
-        white-space: normal;
-    }
-}
+    width: 100%;
+    padding: 0.5rem 0;
 
-.gray-area {
-    background-color: $ui-gray;
+    border-radius: 4px;
 }
 
-img.tips-icon {
-    height: 1.75rem;
-}
 //4 columns
 @media #{$small} {
 
@@ -151,14 +157,7 @@ img.tips-icon {
         }
     }
 
-    .ttt-head {
-
-        p {
-            max-width: $cols4;
-        }
-    }
-
-    //put the image first if in 4-column
+    // put the image first if in 4-column
     .tips-info-body {
         max-width: $cols4;
         text-align: center;
@@ -187,19 +186,6 @@ img.tips-icon {
         }
     }
 
-    .ttt-head {
-        p {
-            max-width: $cols6;
-        }
-    }
-
-    .tips-info-body.tips-illustration {
-        order: -1;
-        img {
-            width: $cols4;
-        }
-    }
-
     .tips-info-body {
         max-width: $cols4;
         text-align: center;
@@ -219,21 +205,21 @@ img.tips-icon {
         }
     }
 
-    .ttt-head {
-        p {
-            max-width: $cols6;
-        }
+    .tips-info-body {
+        max-width: $cols4;
     }
+}
 
-    .tips-info-section {
-        &.mod-align-top {
-            align-items: flex-start;
+@media #{$intermediate-and-smaller}{
+    .physical-ideas {
+        .inner {
+            .physical-ideas-section {
+                .physical-idea:first-child {
+                    flex: 2;
+                }
+            }
         }
     }
-
-    .tips-info-body {
-        max-width: $cols4;
-    }
 }
 
 // 12 columns
@@ -248,12 +234,6 @@ img.tips-icon {
         }
     }
 
-    .ttt-head {
-        p {
-            max-width: $cols8;
-        }
-    }
-
     .tips-info-section {
         &.mod-align-top {
             align-items: flex-start;

diff --git a/src/views/ideas/l10n-static.json b/src/views/ideas/l10n-static.json
@@ -2,6 +2,8 @@
     "cards.scratch-cards-allLink": "https://resources.scratch.mit.edu/www/cards/en/scratch-cards-all.pdf",
     "cards.name-cardsLink": "https://resources.scratch.mit.edu/www/cards/en/name-cards.pdf",
     "cards.animation-cardsLink": "https://resources.scratch.mit.edu/www/cards/en/animation-cards.pdf",
+    "cards.microbit-cardsLink": "https://resources.scratch.mit.edu/www/cards/en/microbit-cards.pdf",
+    "cards.makeymakey-cardsLink": "https://resources.scratch.mit.edu/www/cards/en/makeymakey-cards.pdf",
     "cards.music-cardsLink": "https://resources.scratch.mit.edu/www/cards/en/music-cards.pdf",
     "cards.story-cardsLink": "https://resources.scratch.mit.edu/www/cards/en/story-cards.pdf",
     "cards.chase-cardsLink": "https://resources.scratch.mit.edu/www/cards/en/chase-cards.pdf",

diff --git a/src/views/ideas/l10n.json b/src/views/ideas/l10n.json
@@ -4,7 +4,11 @@
     "ideas.headerButtonMessage": "Choose a tutorial",
     "ideas.gettingStartedTitle": "Getting Started",
     "ideas.gettingStartedText": "New to Scratch? Try the Getting Started tutorial.",
+    "ideas.startHereText": "New to Scratch? Stay here!",
+    "ideas.gettingStartedButtonText": "Try Getting Started Tutorial",
+    "ideas.seeTutorialsLibraryButtonText": "See Tutorials Library",
     "ideas.gettingStartedImageDescription": "An illustrated boy plants his flag on top of a freshly painted mountaintop.",
+    "ideas.seeTutorialsLibraryImageDescription": "An illustration of three tutorial thumbnails.",
     "ideas.tryIt": "Try it!",
     "ideas.activityGuidesTitle": "Activity Guides",
     "ideas.activityGuidesText": "What do you want to make with Scratch? For each activity, you can try the Tutorial, download a set of Coding Cards, or view the Educator Guide.",
@@ -37,6 +41,11 @@
     "ideas.tryTheTutorial": "Try the tutorial",
     "ideas.codingCards": "Coding Cards",
     "ideas.educatorGuide": "Educator Guide",
+    "ideas.physicalPlayIdeas": "Physical Play Ideas",
+    "ideas.microBitHeader": "Have a micro:bit?",
+    "ideas.microBitBody": "Connect your Scratch project to the real world.",
+    "ideas.makeyMakeyHeader": "Have a MakeyMakey?",
+    "ideas.makeyMakeyBody": "Turn anything into a key that connects with your Scratch project!",
     "ideas.desktopEditorHeader": "Scratch App Download",
     "ideas.desktopEditorBody": "To create projects without an Internet connection, you can <a href=\"/download\">download the Scratch app</a>.",
     "ideas.desktopEditorBodyHTML": "To create projects without an Internet connection, you can <a>download the Scratch app</a>.",

diff --git a/static/images/ideas/make-board.svg b/static/images/ideas/make-board.svg
diff --git a/static/images/ideas/micro-bit.png b/static/images/ideas/micro-bit.png
diff --git a/static/images/ideas/see-tutorials-library.png b/static/images/ideas/see-tutorials-library.png