Add the Access advanced features. section to the Cross Stage FDM

- Add data for the new section
- Loop over that data to create the cards
- Add the icon illustration SVGs for each card
- Style it all up
- Add the new section to the view specs

app/assets/stylesheets/utilities.scss

@@ -307,6 +307,12 @@ to @gitlab/ui by https://gitlab.com/gitlab-org/gitlab-ui/-/issues/1709
   }
 }
 
+.gl-lg-grid-template-columns-4 {
+  @include media-breakpoint-up(lg) {
+    grid-template-columns: repeat(4, 1fr);
+  }
+}
+
 .gl-gap-6 {
   gap: $gl-spacing-scale-6;
 }

ee/app/assets/images/illustrations/agile.svg

+<svg width="72" height="72" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M11.826 52.02A29 29 0 0 1 25.417 9" stroke="#6E49CB" stroke-width="4" stroke-linecap="round"/><path d="M56 65h12" stroke="#6E49CB" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/><path d="m64 60 5 5-5 5M38 12l-5-5 5-5" stroke="#6E49CB" stroke-width="4" stroke-linecap="round"/><path d="M36 7a29 29 0 0 1 0 58" stroke="#6E49CB" stroke-width="4" stroke-linecap="round"/><path d="M12 65h24" stroke="#6E49CB" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/><path fill="#FF9769" stroke="#6E49CB" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" d="M2 60h10v10H2z"/><circle cx="36" cy="36" r="12.4" fill="#4BEACC" stroke="#6E49CB" stroke-width="4" stroke-linecap="round"/><path d="M31.908 35.66a1 1 0 0 0-1.416 1.413l1.416-1.412Zm2.115 3.54-.708.706a1 1 0 0 0 1.417 0l-.709-.706Zm7.485-6.094a1 1 0 0 0-1.416-1.412l1.416 1.412Zm-11.016 3.967 2.823 2.833 1.417-1.412-2.824-2.833-1.416 1.412Zm4.24 2.833 6.776-6.8-1.416-1.412-6.777 6.8 1.417 1.412Z" fill="#6E49CB"/></svg>
\ No newline at end of file

ee/app/assets/images/illustrations/chart-bar.svg

+<svg width="72" height="72" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill="#FFC46C" d="M51 24h14v39H51z"/><path d="M65 63V24H51v39h6" stroke="#6E49CB" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/><path fill="#FF908D" d="M29 9h14v54H29z"/><path d="M43 63H29V9h14v46" stroke="#6E49CB" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/><path fill="#E5E0FC" d="M7 33h14v30H7z"/><path d="M21 63V33H7v30h6" stroke="#6E49CB" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/></svg>
\ No newline at end of file

ee/app/assets/images/illustrations/chart-line.svg

+<svg width="72" height="72" fill="none" xmlns="http://www.w3.org/2000/svg"><circle cx="69" cy="47" r="3" fill="#6E49CB"/><path d="m36 62 33-15" stroke="#6E49CB" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/><circle cx="36" cy="62" r="3" fill="#6E49CB"/><path d="M36 62 3 67" stroke="#6E49CB" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/><circle cx="3" cy="67" r="3" fill="#6E49CB"/><circle cx="69" cy="24" r="3" fill="#FF675F"/><path d="M69 24 36 51" stroke="#FF675F" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/><circle cx="36" cy="51" r="3" fill="#FF675F"/><path d="m3 53 33-2" stroke="#FF675F" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/><circle cx="3" cy="53" r="3" fill="#FF675F"/><circle cx="69" cy="5" r="3" fill="#FF9769"/><path d="M69 5 36 17" stroke="#FF9769" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/><circle cx="36" cy="17" r="3" fill="#FF9769"/><path d="M36 17 3 42" stroke="#FF9769" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/><circle cx="3" cy="42" r="3" fill="#FF9769"/></svg>
\ No newline at end of file

ee/app/assets/images/illustrations/cloud-check.svg

+<svg width="72" height="72" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M7.792 29.417c0 8.608 7 15.587 15.634 15.587h40.065c2.006 0 3.912-.43 5.629-1.204-2.33 4.203-6.823 7.2-11.981 7.2H17.075C8.44 51 1.44 44.022 1.44 35.413c0-6.093 3.507-11.52 8.619-14.084a15.479 15.479 0 0 0-2.267 8.088Z" fill="#AC7FFF" fill-opacity=".24"/><path d="M25 50.999h31.705a12.96 12.96 0 0 0 5.274-1.063 13.105 13.105 0 0 0 4.418-3.1 13.337 13.337 0 0 0 2.823-4.64 13.489 13.489 0 0 0-.694-10.65 13.266 13.266 0 0 0-3.399-4.222 13.038 13.038 0 0 0-4.782-2.484 12.921 12.921 0 0 0-5.363-.328 17.704 17.704 0 0 0-4.725-11.036c-2.806-3-6.564-4.9-10.614-5.365a17.117 17.117 0 0 0-11.525 2.823 17.559 17.559 0 0 0-7.035 9.686 15.212 15.212 0 0 0-3.87-.502c-1.998 0-3.977.4-5.822 1.176a15.198 15.198 0 0 0-4.935 3.347 15.457 15.457 0 0 0-3.298 5.009 15.641 15.641 0 0 0 0 11.817 15.458 15.458 0 0 0 3.298 5.01 15.2 15.2 0 0 0 4.935 3.346c1.742.733 3.726 1.135 5.609 1.177" stroke="#6E49CB" stroke-width="4" stroke-linecap="round"/><circle cx="36" cy="51" r="12" fill="#4BEACC" stroke="#6E49CB" stroke-width="4" stroke-linecap="round"/><path d="M32.042 50.65a1 1 0 0 0-1.417 1.412l1.417-1.411Zm2.036 3.461-.708.706a1 1 0 0 0 1.417 0l-.709-.706Zm7.297-5.905a1 1 0 1 0-1.417-1.412l1.417 1.412Zm-10.75 3.856 2.745 2.755 1.417-1.412-2.745-2.754-1.417 1.411Zm4.162 2.755 6.588-6.611-1.417-1.412-6.588 6.611 1.417 1.412Z" fill="#6E49CB"/></svg>
\ No newline at end of file

ee/app/assets/images/illustrations/epic.svg

+<svg width="72" height="72" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M16 54h40v4a4 4 0 0 1-4 4H20a4 4 0 0 1-4-4v-4Z" fill="#6E49CB" fill-opacity=".24"/><path d="M9 46h54v5a3 3 0 0 1-3 3H13a4 4 0 0 1-4-4v-4Z" fill="#AC7FFF" fill-opacity=".24"/><path d="M63 56a2 2 0 1 0 0-4v4ZM7 46v4h4v-4H7Zm6 10h50v-4H13v4Zm-6-6a6 6 0 0 0 6 6v-4a2 2 0 0 1-2-2H7Z" fill="#6E49CB"/><path d="M16 54v4a4 4 0 0 0 4 4h32a4 4 0 0 0 4-4v-4M13.34 14.003l.642-1.542A4 4 0 0 1 17.674 10h35.66a4 4 0 0 1 3.692 2.461l11.666 28C69.79 43.096 67.854 46 65 46H6.008c-2.854 0-4.79-2.904-3.692-5.538l7.69-18.46" stroke="#6E49CB" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/></svg>
\ No newline at end of file

ee/app/assets/images/illustrations/magnifying-glass.svg

+<svg width="72" height="72" fill="none" xmlns="http://www.w3.org/2000/svg"><g clip-path="url(#magnifying-glass__a)"><path d="m48 55 7-7 12.5 12.5a4.95 4.95 0 1 1-7 7L48 55Z" fill="#6E49CB" fill-opacity=".24"/><path d="m48 55 7-7 13.5 13.5a4.95 4.95 0 0 1 0 7v0a4.95 4.95 0 0 1-7 0L53 60m-8-15 6 6" stroke="#6E49CB" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/><circle cx="27" cy="27" r="25" stroke="#6E49CB" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/><circle cx="27" cy="27" r="20" fill="#18A3FF" fill-opacity=".24"/><path d="m21 22 6-6m5 6 4-4M20 34l8-8" stroke="#6E49CB" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></g><defs><clipPath id="magnifying-glass__a"><path fill="#fff" d="M0 0h72v72H0z"/></clipPath></defs></svg>
\ No newline at end of file

ee/app/assets/images/illustrations/merge-request.svg

+<svg width="72" height="72" fill="none" xmlns="http://www.w3.org/2000/svg"><g clip-path="url(#merge-request__a)" stroke="#6E49CB" stroke-width="4"><circle cx="60" cy="60" r="10" fill="#18A3FF"/><path d="M60 50V25c0-6.627-5.373-12-12-12h-9"/><path d="m45 5-8.5 8.5L45 22" stroke-linecap="round"/><path d="M22 60c0 5.523-4.477 10-10 10S2 65.523 2 60s4.477-10 10-10 10 4.477 10 10Z" fill="#6E49CB" fill-opacity=".24"/><path d="M12 22v28"/><circle cx="12" cy="12" r="10" fill="#6E49CB" fill-opacity=".24"/></g><defs><clipPath id="merge-request__a"><path fill="#fff" d="M0 0h72v72H0z"/></clipPath></defs></svg>
\ No newline at end of file

ee/app/assets/images/illustrations/shield-check.svg

+<svg width="72" height="72" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M61 42V11c-10 0-18-2-25-9-7 7-15 9-25 9v31c0 21 25 28 25 28s25-7 25-28Z" stroke="#6E49CB" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/><circle cx="36" cy="36" r="12" fill="#4BEACC" stroke="#6E49CB" stroke-width="4" stroke-linecap="round"/><path d="M32.042 35.65a1 1 0 0 0-1.417 1.412l1.417-1.411Zm2.036 3.461-.708.706a1 1 0 0 0 1.417 0l-.709-.706Zm7.297-5.905a1 1 0 1 0-1.417-1.412l1.417 1.412Zm-10.75 3.856 2.745 2.755 1.417-1.412-2.745-2.754-1.417 1.411Zm4.162 2.755 6.588-6.611-1.417-1.412-6.588 6.611 1.417 1.412Z" fill="#6E49CB"/></svg>
\ No newline at end of file

ee/app/assets/images/illustrations/user.svg

+<svg width="73" height="73" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M62 60.5C55.555 66.974 46.513 71 36.5 71 26.488 71 17.445 66.974 11 60.5 17.445 54.026 26.488 50 36.5 50c10.013 0 19.055 4.026 25.5 10.5Z" fill="#AC7FFF" stroke="#6E49CB" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/><circle cx="37" cy="32" r="10" fill="#AC7FFF" stroke="#6E49CB" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/><path d="M6.202 53a34.5 34.5 0 1 1 60.593.006" stroke="#6E49CB" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/></svg>
\ No newline at end of file

ee/app/helpers/groups/feature_discovery_moments_helper.rb

@@ -17,6 +17,61 @@ module Groups
       }
     end
 
+    def cross_stage_fdm_highlighted_features
+      [
+        {
+          icon_name: 'epic',
+          title: s_('InProductMarketing|Epics'),
+          desc: s_('InProductMarketing|Make it easier to collaborate on high-level ideas by grouping related issues in an epic.')
+        },
+        {
+          icon_name: 'agile',
+          title: s_('InProductMarketing|Roadmaps'),
+          desc: s_('InProductMarketing|Visualize your epics and milestones in a timeline.')
+        },
+        {
+          icon_name: 'agile',
+          title: s_('InProductMarketing|Scoped labels'),
+          desc: s_('InProductMarketing|Create well-defined workflows by using scoped labels on issues, merge requests, and epics. Labels with the same scope cannot be used together, which prevents conflicts.')
+        },
+        {
+          icon_name: 'chart-line',
+          title: s_('InProductMarketing|Burn up/down charts'),
+          desc: s_('InProductMarketing|Track completed issues in a chart, so you can see how a milestone is progressing at a glance.')
+        },
+        {
+          icon_name: 'merge-request',
+          title: s_('InProductMarketing|Merge request approval rule'),
+          desc: s_('InProductMarketing|Keep your code quality high by defining who should approve merge requests and how many approvals are required.')
+        },
+        {
+          icon_name: 'user',
+          title: s_('InProductMarketing|Code owners'),
+          desc: s_('InProductMarketing|Define who owns specific files or directories, so the right reviewers are suggested when a merge request introduces changes to those files.')
+        },
+        {
+          icon_name: 'chart-bar',
+          title: s_('InProductMarketing|Code review analytics'),
+          desc: s_('InProductMarketing|Find and fix bottlenecks in your code review process by understanding how long open merge requests have been in review.')
+        },
+        {
+          icon_name: 'magnifying-glass',
+          title: s_('InProductMarketing|Multiple required approvers'),
+          desc: s_("InProductMarketing|Require multiple approvers on a merge request, so you know it's in good shape before it's merged.")
+        },
+        {
+          icon_name: 'shield-check',
+          title: s_('InProductMarketing|Dependency scanning'),
+          desc: s_('InProductMarketing|Find out if your external libraries are safe. Run dependency scanning jobs that check for known vulnerabilities in your external libraries.')
+        },
+        {
+          icon_name: 'cloud-check',
+          title: s_('InProductMarketing|Dynamic application security testing'),
+          desc: s_('InProductMarketing|Protect your web application by using DAST to examine for vulnerabilities in deployed environments.')
+        }
+      ]
+    end
+
     def cross_stage_fdm_value_statements
       [
         {

ee/app/views/groups/feature_discovery_moments/advanced_features_dashboard.html.haml

@@ -18,6 +18,20 @@
     - image_alt = s_('InProductMarketing|Collaboration across stages in GitLab')
     = image_tag 'marketing/gitlab-enterprise-header-flow-desktop.png', alt: image_alt, title: image_alt, class: 'gl-w-full'
 
+.gl-mb-8.gl-md-mb-12
+  %h3.gl-mt-0.gl-mb-5.gl-md-mb-6= s_('InProductMarketing|Access advanced features.')
+
+  .gl-display-grid.gl-sm-grid-template-columns-2.gl-md-grid-template-columns-3.gl-lg-grid-template-columns-4.gl-gap-6
+    - cross_stage_fdm_highlighted_features.each do |value|
+      .gl-card.gl-max-w-50.gl-rounded-lg
+        .gl-card-body
+          .gl-w-7.gl-h-7= image_tag("illustrations/#{value[:icon_name]}.svg", class: 'gl-w-full')
+          %h4.gl-mb-3.gl-font-base.gl-line-height-20= value[:title]
+          %p.gl-font-sm.gl-text-gray-700.gl-line-height-20= value[:desc]
+
+    %p.gl-display-none.gl-md-display-block.gl-align-self-center.gl-mb-0.gl-font-sm.gl-text-gray-700.gl-align-self-center
+      = s_('InProductMarketing|And many more...')
+
 .gl-mb-8.gl-md-mb-12
   %h3.gl-mt-0.gl-mb-5.gl-md-mb-6= s_('InProductMarketing|Speed. Efficiency. Trust.')
 

ee/spec/helpers/groups/feature_discovery_moments_helper_spec.rb

@@ -61,6 +61,18 @@ RSpec.describe Groups::FeatureDiscoveryMomentsHelper do
     it { is_expected.to eq({ glm_source: 'gitlab.com', glm_content: 'cross_stage_fdm' }) }
   end
 
+  describe '#cross_stage_fdm_highlighted_features' do
+    it 'provides a collection of data in the expected structure' do
+      expect(helper.cross_stage_fdm_highlighted_features).to all(
+        match(
+          icon_name: an_instance_of(String),
+          title: an_instance_of(String),
+          desc: an_instance_of(String)
+        )
+      )
+    end
+  end
+
   describe '#cross_stage_fdm_value_statements' do
     it 'provides a collection of data in the expected structure' do
       expect(helper.cross_stage_fdm_value_statements).to all(

ee/spec/views/groups/feature_discovery_moments/advanced_features_dashboard.html.haml_spec.rb

@@ -16,6 +16,7 @@ RSpec.describe 'groups/feature_discovery_moments/advanced_features_dashboard.htm
   subject { rendered }
 
   it { is_expected.to have_content(s_('InProductMarketing|Discover Premium & Ultimate.')) }
+  it { is_expected.to have_content(s_('InProductMarketing|Access advanced features.')) }
   it { is_expected.to have_content(s_('InProductMarketing|Speed. Efficiency. Trust.')) }
 
   it 'renders the start a trial CTA', :aggregate_failures do

locale/gitlab.pot

@@ -18629,12 +18629,18 @@ msgstr ""
 msgid "InProductMarketing|Access advanced features, build more efficiently, strengthen security and compliance."
 msgstr ""
 
+msgid "InProductMarketing|Access advanced features."
+msgstr ""
+
 msgid "InProductMarketing|Actually, GitLab makes the team work (better)"
 msgstr ""
 
 msgid "InProductMarketing|And finally %{deploy_link} a Python application."
 msgstr ""
 
+msgid "InProductMarketing|And many more..."
+msgstr ""
+
 msgid "InProductMarketing|Are your runners ready?"
 msgstr ""
 
@@ -18656,15 +18662,24 @@ msgstr ""
 msgid "InProductMarketing|Break down silos to coordinate seamlessly across development, operations, and security with a consistent experience across the development lifecycle."
 msgstr ""
 
+msgid "InProductMarketing|Burn up/down charts"
+msgstr ""
+
 msgid "InProductMarketing|By enabling code owners and required merge approvals the right person will review the right MR. This is a win-win: cleaner code and a more efficient review process."
 msgstr ""
 
 msgid "InProductMarketing|Click on the number below that corresponds with your answer — 1 being very difficult, 5 being very easy."
 msgstr ""
 
+msgid "InProductMarketing|Code owners"
+msgstr ""
+
 msgid "InProductMarketing|Code owners and required merge approvals are part of the paid tiers of GitLab. You can start a free 30-day trial of GitLab Ultimate and enable these features in less than 5 minutes with no credit card required."
 msgstr ""
 
+msgid "InProductMarketing|Code review analytics"
+msgstr ""
+
 msgid "InProductMarketing|Collaboration across stages in GitLab"
 msgstr ""
 
@@ -18680,12 +18695,21 @@ msgstr ""
 msgid "InProductMarketing|Create a project in GitLab in 5 minutes"
 msgstr ""
 
+msgid "InProductMarketing|Create well-defined workflows by using scoped labels on issues, merge requests, and epics. Labels with the same scope cannot be used together, which prevents conflicts."
+msgstr ""
+
 msgid "InProductMarketing|Create your first project!"
 msgstr ""
 
+msgid "InProductMarketing|Define who owns specific files or directories, so the right reviewers are suggested when a merge request introduces changes to those files."
+msgstr ""
+
 msgid "InProductMarketing|Deliver Better Products Faster"
 msgstr ""
 
+msgid "InProductMarketing|Dependency scanning"
+msgstr ""
+
 msgid "InProductMarketing|Did you know teams that use GitLab are far more efficient?"
 msgstr ""
 
@@ -18707,9 +18731,15 @@ msgstr ""
 msgid "InProductMarketing|Do you have a teammate who would be perfect for this task?"
 msgstr ""
 
+msgid "InProductMarketing|Dynamic application security testing"
+msgstr ""
+
 msgid "InProductMarketing|Easy"
 msgstr ""
 
+msgid "InProductMarketing|Epics"
+msgstr ""
+
 msgid "InProductMarketing|Expand your DevOps journey with a free GitLab trial"
 msgstr ""
 
@@ -18731,9 +18761,15 @@ msgstr ""
 msgid "InProductMarketing|Feel the need for speed?"
 msgstr ""
 
+msgid "InProductMarketing|Find and fix bottlenecks in your code review process by understanding how long open merge requests have been in review."
+msgstr ""
+
 msgid "InProductMarketing|Find out how your teams are really doing"
 msgstr ""
 
+msgid "InProductMarketing|Find out if your external libraries are safe. Run dependency scanning jobs that check for known vulnerabilities in your external libraries."
+msgstr ""
+
 msgid "InProductMarketing|Follow our steps"
 msgstr ""
 
@@ -18863,24 +18899,36 @@ msgstr ""
 msgid "InProductMarketing|It's also possible to simply %{external_repo_link} in order to take advantage of GitLab's CI/CD."
 msgstr ""
 
+msgid "InProductMarketing|Keep your code quality high by defining who should approve merge requests and how many approvals are required."
+msgstr ""
+
 msgid "InProductMarketing|Launch GitLab CI/CD in 20 minutes or less"
 msgstr ""
 
 msgid "InProductMarketing|Lower cost of development"
 msgstr ""
 
+msgid "InProductMarketing|Make it easier to collaborate on high-level ideas by grouping related issues in an epic."
+msgstr ""
+
 msgid "InProductMarketing|Making the switch? It's easier than you think to import your projects into GitLab. Move %{github_link}, or import something %{bitbucket_link}."
 msgstr ""
 
 msgid "InProductMarketing|Master the art of importing!"
 msgstr ""
 
+msgid "InProductMarketing|Merge request approval rule"
+msgstr ""
+
 msgid "InProductMarketing|Move on to easily creating a Pages website %{ci_template_link}"
 msgstr ""
 
 msgid "InProductMarketing|Multiple owners, confusing workstreams? We've got you covered"
 msgstr ""
 
+msgid "InProductMarketing|Multiple required approvers"
+msgstr ""
+
 msgid "InProductMarketing|Need an alternative to importing?"
 msgstr ""
 
@@ -18893,12 +18941,24 @@ msgstr ""
 msgid "InProductMarketing|Our tool brings all the things together"
 msgstr ""
 
+msgid "InProductMarketing|Protect your web application by using DAST to examine for vulnerabilities in deployed environments."
+msgstr ""
+
 msgid "InProductMarketing|Rapid development, simplified"
 msgstr ""
 
 msgid "InProductMarketing|Reduce Security & Compliance Risk"
 msgstr ""
 
+msgid "InProductMarketing|Require multiple approvers on a merge request, so you know it's in good shape before it's merged."
+msgstr ""
+
+msgid "InProductMarketing|Roadmaps"
+msgstr ""
+
+msgid "InProductMarketing|Scoped labels"
+msgstr ""
+
 msgid "InProductMarketing|Security that's integrated into your development lifecycle"
 msgstr ""
 
@@ -18986,6 +19046,9 @@ msgstr ""
 msgid "InProductMarketing|To understand and get the most out of GitLab, start at the beginning and %{project_link}. In GitLab, repositories are part of a project, so after you've created your project you can go ahead and %{repo_link}."
 msgstr ""
 
+msgid "InProductMarketing|Track completed issues in a chart, so you can see how a milestone is progressing at a glance."
+msgstr ""
+
 msgid "InProductMarketing|Try GitLab Ultimate for free"
 msgstr ""
 
@@ -19022,6 +19085,9 @@ msgstr ""
 msgid "InProductMarketing|Very easy"
 msgstr ""
 
+msgid "InProductMarketing|Visualize your epics and milestones in a timeline."
+msgstr ""
+
 msgid "InProductMarketing|Want to host GitLab on your servers?"
 msgstr ""