Merge branch 'fix-sdlc-soon-links' into 'master'

Change link color, link to direction pages, only soon should be a link

See merge request gitlab-com/www-gitlab-com!15989

source/includes/home/sdlc.html.haml

@@ -24,7 +24,9 @@
             %img.gitlab-logo{ src: "/images/devops-tools/gitlab-logo.svg" }
             %p.font-bold
               Since
-              #{stage.established}:
+              #{stage.established}
+              %br
+              we've built:
             - category_keys_active = data.categories.keys.keep_if { |k| data.categories[k].stage == stage_key && data.categories[k].available && data.categories[k].available <= Date.today}
             - category_keys_upcoming = data.categories.keys.keep_if { |k| data.categories[k].stage == stage_key && data.categories[k].available && data.categories[k].available >= Date.today}
             - category_keys_active.each do |key|
@@ -34,12 +36,12 @@
             .future-categories
               %p.font-bold
                 Coming
-                %a.font-bold{ href: "#{stage.roadmap}", target: "_blank" }
-                  soon:
+                = succeed ':' do
+                  %a.font-bold{ href: "#{stage.vision}", target: "_blank" } soon
               - category_keys_upcoming.each do |key|
                 %p
                   - url = data.categories[key].alt_link ? data.categories[key].alt_link : "/product/#{key.tr('_', '-').downcase}/"
-                  %a.future-category{ href: "#{url}" } #{data.categories[key].name}
+                  %a.future-category{ href: "#{url}", target: "_blank" } #{data.categories[key].name}
       %tr.separate-application-row
         - Gitlab::Homepage::Stage.all!.each do |stage|

source/stylesheets/_base.scss

@@ -1676,14 +1676,6 @@ iframe {
     flex-direction: column;
     align-items: center;
     text-align: center;
-
-    .future-category {
-      color: $color-gray;
-
-      &:hover {
-        color: $color-primary;
-      }
-    }
   }
   .year-established {