Merge branch…

Merge branch '2581-follow-up-from-resolve-auto-generate-product-pages-from-categories-yml' into 'master'

Resolve "Follow-up from "Resolve "Auto-generate product pages from categories.yml"""

Closes #2581

See merge request !13755

data/categories.yml

@@ -12,6 +12,13 @@ administration:
 project_management:
   name: "Project Management"
   description: "Do more than manage and maintain lists of issues. Quickly set the status, assignee or milestone for multiple issues at the same time or easily filter them on any properties. See milestones and issues across projects."
+  link: https://gitlab.com/users/sign_in
+  link_description: "Sign up for GitLab.com"
+  body: |
+      ## Product manager and deveoper collaboration
+
+      Using the same tool for issue tracking and version control means you can seemlessly collaborate accross teams without the need to juggle logging in to multipl tools. All your state is in one place with a single conversation accross your software develoment lifecycle.
+
   stage: plan
 portfolio_management:
   name: "Portfolio Management"
@@ -57,7 +64,7 @@ chatops:
 apm:
   name: "Application Performance Monitoring (APM)"
   description: "Monitor the performance and status of your applications. GitLab Application Performance Monitoring makes it possible to measure a wide variety of statistics, visualized in graphs and dashboards. Infrastructure monitoring includes public and private whitebox infrastructure monitoring and also blackbox infrastructure monitoring. Network, System, and Application logs are processed, stored, and searched for investigating errors and incidents such as application activity, spam events, transient errors, system and network authentication events, security events, and more."
-  stage: monitor 
+  stage: monitor
 infrastructure_monitoring:
   name: "Infrastructure Monitoring"
   stage: monitor
@@ -67,4 +74,4 @@ application_security_testing:
   stage: secure
 license_management:
   name: "License Management"
-  stage: secure
\ No newline at end of file
+  stage: secure

source/product/index.html.haml

@@ -21,7 +21,7 @@ extra_css:
   .content.grid-layout.grid-layout2
     - data.categories.each do |key, category|
       .grid-item.flex-container.flex-column.flex-start
-        .flex-container.align-center.full-width
+        %a.category-title.flex-container.align-center.full-width{ href: "/product/#{key.gsub('_', '-').downcase}" }
           %img.category-logo{ src: "/images/comparison/gitlab-logo.svg", alt: "GitLab logo svg" }
           %h3.margin0
             = category.name

source/product/template.html.erb

@@ -14,6 +14,9 @@ extra_css:
     <% if category.description %>
       <p><%= category.description %></p>
     <% end %>
+    <% if category.link %>
+      <a href="<%= category.link %>" class="btn cta-btn orange"><%= category.link_description %></a>
+    <% end %>
   </div>
 </div>
 <div class="gitlab-content-container">

source/stylesheets/product.css.scss

 @import "vendor/bootstrap/bootstrap/variables";
 @import "variables";
 
+.category-title {
+  color: inherit;
+  text-decoration: none;
+
+  &:hover,
+  &:focus,
+  &:active {
+    color: inherit;
+    text-decoration: none;
+    opacity: .8;
+  }
+
+}
+
 .category-logo {
   height: 36px;
   margin-right: 16px;