Tweak sublanding page design (#17977)

Author: rachmari

data/ui.yml

@@ -143,11 +143,12 @@ product_landing:
 product_sublanding:
   start: Start
   start_path: Start path
-  learning_paths: Learning paths
+  learning_paths: '{{ allProducts[currentProduct].name }} learning paths'
   learning_paths_desc: Learning paths are a collection of guides that help you master a particular subject.
+  guides: '{{ allProducts[currentProduct].name }} guides'
   more_guides: more guides
   load_more: Load more guides
-  all_guides: All Guides
+  all_guides: 'All {{ allProducts[currentProduct].name }} guides'
   no_result: Sorry, there is no guide that match your filter.
   filters:
     type: Type

includes/liquid-tags/link-as-article-card.html

@@ -6,7 +6,7 @@ <h4 class="h4 text-gray-dark mb-1">{{ title }}</h4>
     {% if topics.length %}
       <div>
         {% for topic in topics %}
-          <span class="IssueLabel bg-gradient--purple-pink text-white mr-1">{{ topic }}</span>
+          <span class="IssueLabel bg-gradient--pink-blue text-white mr-1">{{ topic }}</span>
         {% endfor %}
       </div>
     {% endif %}

layouts/product-sublanding.html

@@ -15,9 +15,9 @@
         <div class="container-xl px-3 px-md-6 pt-3 pb-2">
           <header class="d-flex gutter mb-6">
             <div class="col-12">
-              <span class="text-mono text-gray">{% include breadcrumbs %}</span>
-              <h1 class="my-3 font-mktg">{{ page.shortTitle }}</h1>
-              <div class="lead-mktg text-gray">{{ page.intro }}</div>
+              <span class="text-mono text-gray text-uppercase">{% include breadcrumbs %}</span>
+              <h1 class="my-3 font-mktg">{% data ui.product_sublanding.guides %}</h1>
+              <div class="lead-mktg text-gray f4 description-text">{{ page.intro }}</div>
             </div>
           </header>
 
@@ -26,7 +26,7 @@ <h1 class="my-3 font-mktg">{{ page.shortTitle }}</h1>
             {% assign featuredTrack = page.learningTracks[0] %}
             <ul class="list-style-none d-flex flex-nowrap overflow-x-scroll px-2 feature-track">
               <li class="px-2 d-flex flex-shrink-0">
-                <div class="d-inline-block Box p-5 bg-gradient--blue-purple text-white">
+                <div class="d-inline-block Box p-5 bg-gradient--blue-pink text-white">
                   <div class="circle text-white d-inline-flex" style="border: 2px white solid;">{% octicon "star-fill" height="24" class="v-align-middle m-2"%}</div>
                   <h3 class="font-mktg h3-mktg my-4">{{ featuredTrack.title }}</h3>
                   <div class="lead-mktg text-white f5 my-4">{{ featuredTrack.description }}</div>
@@ -40,8 +40,8 @@ <h3 class="font-mktg h3-mktg my-4">{{ featuredTrack.title }}</h3>
                 <li class="px-2 d-flex flex-shrink-0">
                   <a href="{{ guide.href }}?learn={{ featuredTrack.trackName }}" class="d-inline-block Box p-5 bg-white border-gray no-underline">
                     <div class="d-flex flex-justify-between flex-items-center">
-                      <div class="circle bg-white text-blue border-gradient--purple-pink d-inline-flex">
-                        <span class="m-2 f2 lh-condensed-ultra text-center text-bold text-gradient--blue-purple" style="width: 24px; height: 24px;">{{ forloop.index }}</span>
+                      <div class="circle bg-white text-blue border-gradient--pink-blue-dark d-inline-flex">
+                        <span class="m-2 f2 lh-condensed-ultra text-center text-bold step-circle-text" style="width: 24px; height: 24px;">{{ forloop.index }}</span>
                       </div>
                       <div class="text-gray-light h6 text-uppercase">{{ guideTypes[guide.page.type] }}</div>
                     </div>
@@ -57,14 +57,14 @@ <h3 class="font-mktg h3-mktg my-4 text-gray-dark">{{ guide.title }}</h3>
 
           <div class="border-top py-6">
             <h2 class="mb-3 font-mktg">{% data ui.product_sublanding.learning_paths %}</h2>
-            <div class="lead-mktg text-gray f4">{% data ui.product_sublanding.learning_paths_desc %}</div>
+            <div class="lead-mktg text-gray f4 description-text">{% data ui.product_sublanding.learning_paths_desc %}</div>
 
             <!-- Learning tracks -->
             <div class="d-flex flex-wrap flex-items-start my-5 gutter">
               {% for track in page.learningTracks offset:1 %}
                 <div class="my-3 px-4 col-12 col-md-6 learning-track">
                   <div class="Box js-show-more-container d-flex flex-column">
-                    <div class="Box-header bg-gradient--purple-pink p-4 d-flex flex-1 flex-items-start flex-wrap">
+                    <div class="Box-header bg-gradient--blue-pink p-4 d-flex flex-1 flex-items-start flex-wrap">
                       <div class="d-flex flex-auto flex-items-start col-8 col-md-12 col-xl-8">
                         <div class="my-xl-0 mr-xl-3">
                           <h5 class="mb-3 text-white font-mktg h3-mktg ">
@@ -82,7 +82,7 @@ <h5 class="mb-3 text-white font-mktg h3-mktg ">
                       {% for guide in track.guides %}
                         <a class="Box-row d-flex flex-items-center text-gray-dark no-underline js-show-more-item {% if forloop.index > 4 %}d-none{% endif %}" href="{{ guide.href }}?learn={{ track.trackName }}">
                           <div class="circle bg-gray d-inline-flex mr-4">
-                            <span class="m-2 f3 lh-condensed-ultra text-center text-bold text-gradient--purple-pink" style="min-width: 20px; height: 20px;">{{ forloop.index }}</span>
+                            <span class="m-2 f3 lh-condensed-ultra text-center text-bold step-circle-text" style="min-width: 20px; height: 20px;">{{ forloop.index }}</span>
                           </div>
                           <h5 class="flex-auto pr-2">{{ guide.title }}</h5>
                           <div class="text-gray-light h6 text-uppercase">{{ guideTypes[guide.page.type] }}</div>

stylesheets/gradient.scss

@@ -12,8 +12,9 @@ $gradients: (
   "-blue-green": linear-gradient(-70deg, #2188ff 0%, #01a49e 100%),
   "-red-orange": linear-gradient(-70deg, #ed4e50 0%, #f06f00 100%),
   "-blue-purple": linear-gradient(-70deg, #2188ff 0%, #804eda 100%),
-  "-pink-blue": linear-gradient(-70deg, #db469f 0%, #2188ff 100%),
-  "-pink-blue-dark": linear-gradient(-70deg, #e577b4 0%, #64acff 100%)
+  "-pink-blue": linear-gradient(90deg, #D047A5 -50%, #0C69F9 150%),
+  "-pink-blue-dark": linear-gradient(-70deg, #e577b4 0%, #64acff 100%),
+  "-blue-pink": linear-gradient(-70deg, #0C69F9 0%, #D047A5 100%)
 ) !default;
 
 @mixin bg-gradient($parent, $gradient) {

stylesheets/product-sublanding.scss

@@ -10,6 +10,22 @@
   }
 }
 
+.learning-track-container {
+  width: 440px;
+}
+
+.step-circle-text {
+  color: #7952AF;
+}
+.description-text {
+  opacity: 0.7;
+  line-height: 1.8em;
+}
+.uppercase-category-text {
+  letter-spacing: 0.08em;
+  font-size: 0.8em;
+}
+
 @mixin truncate($maxLine) {
   .truncate-overflow-#{$maxLine} {
     display: -webkit-box;