Add recommendations announcement

Author: marcellamaki

contentcuration/contentcuration/frontend/channelList/views/Channel/StudioChannelsPage/index.vue

@@ -1,6 +1,36 @@
 <template>
 
   <div class="channels-page">
+    <div
+      class="recommendations-announcement"
+      :style="{
+        backgroundColor: $themePalette.blue.v_100,
+      }"
+    >
+      <div
+        class="recommendations-announcement-icon-wrapper"
+        :style="{
+          backgroundColor: $themePalette.blue.v_200,
+        }"
+      >
+        <KIcon
+          icon="library"
+          class="recommendations-announcement-icon"
+          :color="$themePalette.white"
+          :style="{
+            backgroundColor: $themePalette.blue.v_400,
+          }"
+        />
+      </div>
+      <div>
+        <h2>
+          {{ $tr('trySearchRecommendationsHeader') }}
+        </h2>
+        <p>
+          {{ $tr('trySearchRecommendationsText') }}
+        </p>
+      </div>
+    </div>
     <StudioRaisedBox
       v-if="invitations.length"
       class="invitations"
@@ -119,6 +149,9 @@
     $trs: {
       noChannelsFound: 'No channels found',
       invitations: 'You have {count, plural,\n =1 {# invitation}\n other {# invitations}}',
+      trySearchRecommendationsHeader: "Try our new 'Recommendations' feature!",
+      trySearchRecommendationsText:
+        "Based on the title and descriptions of your folders, we'll suggest content from the Kolibri Library. Choose 'Import from channels' in any channel folder to see your recommendations.",
     },
   };
 
@@ -129,6 +162,7 @@
 
   .channels-page {
     padding-bottom: 24px;
+    margin: auto;
   }
 
   .channels,
@@ -149,4 +183,35 @@
     margin-top: 16px;
   }
 
+  .recommendations-announcement {
+    display: flex;
+    gap: 20px;
+    align-items: flex-start;
+    max-width: 900px;
+    padding: 20px;
+    margin: auto;
+    border-radius: 4px;
+
+    .recommendations-announcement-icon-wrapper {
+      display: flex;
+      flex-shrink: 0;
+      align-items: center;
+      justify-content: center;
+      width: 96px;
+      height: 96px;
+      border-radius: 2px;
+
+      .recommendations-announcement-icon {
+        width: 40px;
+        height: 40px;
+        padding: 6px;
+        border-radius: 50%;
+      }
+    }
+
+    h2 {
+      font-size: 18px;
+    }
+  }
+
 </style>