Continuous onboarding 1A

app/assets/images/learn_gitlab/section_deploy.svg

+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="35px" height="34px" viewBox="0 0 35 34" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 64 (93537) - https://sketch.com -->
+    <title>Group</title>
+    <desc>Created with Sketch.</desc>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Artboard" transform="translate(-463.000000, -393.000000)">
+            <g id="Group" transform="translate(463.000000, 393.000000)">
+                <path d="M19.3557,25.2338 C17.7369,25.9233 16.1619,26.1062 14.5861,25.6013 C13.996,26.033 13.2711,26.2395 12.5422,26.1834 C11.8132,26.1273 11.1284,25.8124 10.6114,25.2955 L8.75506,23.4392 C8.19927,22.8833 7.87849,22.1351 7.8591,21.3493 C7.83972,20.5635 8.12323,19.8003 8.65094,19.2177 C8.34425,17.8947 8.46763,16.5564 8.93356,15.1901 L6.183,14.1287 C5.81926,13.9884 5.49427,13.7633 5.23503,13.472 C4.9758,13.1808 4.7898,12.832 4.69251,12.4544 C4.59521,12.0769 4.58942,11.6816 4.67562,11.3013 C4.76182,10.9211 4.93753,10.5669 5.18813,10.2682 L8.79006,5.9759 C9.11841,5.5846 9.56087,5.3057 10.0555,5.1782 C10.5502,5.0508 11.0724,5.0811 11.5489,5.265 L15.0686,6.6234 C15.4064,6.2747 15.7529,5.9234 16.1073,5.5691 C19.6177,2.05856 24.1782,0.20312 29.7892,0.00275 C29.9524,-0.00304 30.1159,0.00032 30.2787,0.01281 C32.6881,0.19656 34.4919,2.29918 34.3077,4.7085 C33.8986,10.0569 31.957,14.4687 28.4824,17.9429 C28.2408,18.1846 27.9986,18.4257 27.7557,18.6661 L29.1763,22.3463 C29.3602,22.8229 29.3905,23.345 29.263,23.8397 C29.1355,24.3344 28.8566,24.7768 28.4653,25.1052 L24.1734,28.7071 C23.8748,28.9578 23.5206,29.1336 23.1403,29.2198 C22.76,29.3061 22.3646,29.3003 21.987,29.203 C21.6094,29.1057 21.2605,28.9197 20.9692,28.6604 C20.678,28.4011 20.4528,28.0761 20.3125,27.7122 L19.3557,25.2338 Z M9.32819,13.455 L13.8808,8.0291 L10.8962,6.8772 C10.7601,6.8247 10.611,6.816 10.4697,6.8524 C10.3284,6.8888 10.2021,6.9685 10.1082,7.0802 L6.50631,11.3725 C6.43473,11.4578 6.38455,11.559 6.35993,11.6677 C6.33532,11.7763 6.33699,11.8893 6.3648,11.9971 C6.39261,12.105 6.44576,12.2046 6.51983,12.2878 C6.59391,12.371 6.68676,12.4353 6.79069,12.4754 L9.32819,13.455 Z M20.9858,24.5675 L21.9654,27.105 C22.0055,27.2089 22.0699,27.3017 22.1531,27.3757 C22.2363,27.4498 22.336,27.5029 22.4438,27.5306 C22.5517,27.5584 22.6646,27.56 22.7732,27.5354 C22.8818,27.5107 22.983,27.4605 23.0683,27.3889 L27.3602,23.7874 C27.4721,23.6936 27.5518,23.5672 27.5883,23.4259 C27.6248,23.2845 27.6162,23.1353 27.5636,22.9991 L26.4117,20.0144 L20.9858,24.5675 Z M12.3714,22.1057 C16.2,25.9347 19.3999,24.55 27.2442,16.7056 C30.4161,13.5337 32.1845,9.5162 32.5621,4.5751 C32.5903,4.2067 32.5404,3.83648 32.4156,3.4887 C32.2909,3.14091 32.0942,2.82338 31.8383,2.55685 C31.5825,2.29033 31.2732,2.08082 30.9308,1.94203 C30.5884,1.80323 30.2205,1.73829 29.8513,1.75143 C24.6687,1.9365 20.5312,3.62 17.3449,6.8063 C9.89431,14.2569 8.41381,18.1481 12.3714,22.1057 Z" id="Shape" fill="#6E49CB"></path>
+                <path d="M22.9861,11.6834 C23.148,11.8489 23.341,11.9806 23.5541,12.071 C23.7672,12.1613 23.9962,12.2085 24.2276,12.2098236 C24.4591,12.211 24.6885,12.1664 24.9026,12.0784 C25.1166,11.9904 25.3111,11.8608 25.4748,11.6971 C25.6384,11.5334 25.768,11.3389 25.856,11.1248 C25.9439,10.9107 25.9885,10.6813 25.9872276,10.4499 C25.9859,10.2184 25.9387,9.9895 25.8483,9.7764 C25.7579,9.5633 25.6262,9.3703 25.4606,9.2085 C25.1325,8.8803 24.6873,8.6959 24.2232,8.6959 C23.759,8.6959 23.3139,8.8803 22.9857,9.2085 C22.6575,9.5367 22.4731,9.9818 22.4731,10.446 C22.4731,10.9101 22.6575,11.3552 22.9857,11.6834 L22.9861,11.6834 Z M21.748,12.9211 C21.423,12.5961 21.1651,12.2102 20.9892,11.7855 C20.8133,11.3608 20.7228,10.9056 20.7228,10.446 C20.7228,9.9863 20.8133,9.5311 20.9892,9.1064 C21.1651,8.6817 21.423,8.2958 21.748,7.9708 C22.0731,7.6458 22.4589,7.3879 22.8836,7.212 C23.3083,7.0361 23.7635,6.9456 24.2232,6.9456 C24.6829,6.9456 25.138,7.0361 25.5627,7.212 C25.9874,7.3879 26.3733,7.6458 26.6983,7.9708 C27.3482,8.6285 27.7113,9.5166 27.708615,10.4412 C27.7058,11.3658 27.3373,12.2517 26.6836,12.9055 C26.0298,13.5593 25.1439,13.9278 24.2194,13.9307161 C23.2948,13.9335 22.4067,13.5704 21.7489,12.9207 L21.748,12.9211 Z" id="Shape" fill="#C2B7E6" fill-rule="nonzero"></path>
+                <path d="M6.58996,23.1303 C6.754,23.2943 6.84615,23.5169 6.84615,23.7489 C6.84615,23.9809 6.754,24.2034 6.58996,24.3675 L1.64009,29.3165 C1.5594,29.4001 1.46287,29.4668 1.35614,29.5127 C1.2494,29.5586 1.13459,29.5828 1.01841,29.5838391 C0.902228,29.5849 0.787001,29.5628 0.679451,29.5188 C0.571902,29.4749 0.474183,29.4099 0.391998,29.3278 C0.309813,29.2457 0.244808,29.148 0.200774,29.0405 C0.15674,28.933 0.13456,28.8177 0.135497628,28.7016 C0.136497,28.5854 0.160594,28.4706 0.206414,28.3638 C0.252233,28.257 0.318858,28.1604 0.4024,28.0797 L5.35228,23.1298 C5.43353,23.0485 5.53001,22.984 5.63619,22.9401 C5.74237,22.8961 5.85618,22.8734 5.97112,22.8734 C6.08606,22.8734 6.19987,22.8961 6.30605,22.9401 C6.41223,22.984 6.50871,23.0485 6.58996,23.1298 L6.58996,23.1303 Z M10.9208,27.4611 C11.0848,27.6252 11.177,27.8477 11.177,28.0797 C11.177,28.3117 11.0848,28.5342 10.9208,28.6983 L7.20859,32.4105 C7.12735,32.4918 7.0309,32.5562 6.92474,32.6002 C6.81859,32.6442 6.70481,32.6669 6.5899,32.6669 C6.47499,32.6669 6.3612,32.6443 6.25503,32.6004 C6.14886,32.5564 6.05239,32.492 5.97112,32.4107 C5.88985,32.3295 5.82538,32.233 5.78139,32.1269 C5.7374,32.0207 5.71471999,31.9069 5.71471999,31.792 C5.71471999,31.6771 5.73731,31.5633 5.78127,31.4572 C5.82522,31.351 5.88966,31.2545 5.9709,31.1733 L9.68353,27.4611 C9.84761,27.297 10.0701,27.2049 10.3022,27.2049 C10.5342,27.2049 10.7567,27.297 10.9208,27.4611 L10.9208,27.4611 Z" id="Shape" fill="#E0DBF2"></path>
+                <path d="M8.75534,25.2954 C8.91937,25.4595 9.01152,25.682 9.01152,25.914 C9.01152,26.1461 8.91937,26.3686 8.75534,26.5327 L1.94959,33.3389 C1.78546,33.503 1.56286,33.5952 1.33074,33.5952 C1.09863,33.5952 0.876027,33.503 0.7119,33.3389 C0.547772,33.1747 0.455566,32.9521 0.455566,32.72 C0.455566,32.4879 0.547772,32.2653 0.7119,32.1012 L7.51809,25.2959 C7.68217,25.1318 7.90469,25.0397 8.13671,25.0397 C8.36873,25.0397 8.59125,25.1318 8.75534,25.2959 L8.75534,25.2954 Z" id="Path" fill="#C2B7E6"></path>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file

app/assets/images/learn_gitlab/section_plan.svg

+<svg width="40" height="40" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M3.343 6c.82 0 1.516.145 1.968.34.198.085.315.165.375.218v31.441a1.45 1.45 0 01-.375.218c-.452.195-1.148.34-1.968.34-.82 0-1.516-.145-1.968-.34A1.45 1.45 0 011 37.999V6.558c.06-.053.177-.133.375-.218C1.827 6.145 2.523 6 3.343 6z" fill="#EFEDF8" stroke="#6E49CB" stroke-width="2"/><path fill-rule="evenodd" clip-rule="evenodd" d="M6.686 6.41l21.724 6.692c2.085.642 2.122 1.774.095 2.523L6.686 23.69V6.412z" fill="#6E49CB"/></svg>
\ No newline at end of file

app/assets/images/learn_gitlab/section_workspace.svg

+<svg width="40" height="40" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M14.544 6.44C14.816 5.58 15.581 5 16.442 5h1.116c.861 0 1.626.58 1.898 1.44l1.05 3.32c.744.238 1.456.55 2.13.93l2.974-1.566c.77-.405 1.7-.247 2.309.394l.79.832c.608.64.76 1.62.374 2.43l-1.486 3.131c.359.71.656 1.46.882 2.243l3.153 1.106c.817.287 1.368 1.091 1.368 1.998v1.176c0 .906-.55 1.71-1.368 1.998l-3.153 1.106a12.936 12.936 0 01-.882 2.242l1.486 3.131c.385.81.234 1.79-.374 2.43l-.79.832c-.609.641-1.539.8-2.309.395l-2.973-1.566c-.675.379-1.387.692-2.13.93l-1.051 3.32c-.272.86-1.037 1.44-1.898 1.44h-1.116c-.861 0-1.626-.58-1.898-1.44l-1.05-3.32a11.604 11.604 0 01-2.13-.93L8.39 34.569c-.77.406-1.7.247-2.309-.395l-.79-.831a2.189 2.189 0 01-.374-2.43l1.487-3.131c-.36-.71-.657-1.46-.883-2.243l-3.153-1.106C1.55 24.145 1 23.34 1 22.434v-1.176c0-.906.55-1.711 1.368-1.998l3.153-1.106c.226-.783.523-1.533.883-2.243l-1.487-3.13a2.19 2.19 0 01.374-2.431l.79-.832c.609-.64 1.539-.8 2.309-.394l2.973 1.565a11.599 11.599 0 012.13-.93l1.051-3.32zM17 30.269c4.418 0 8-3.771 8-8.423s-3.582-8.423-8-8.423-8 3.771-8 8.423 3.582 8.423 8 8.423z" fill="#EFEDF8" stroke="#6E49CB" stroke-width="2"/><path d="M17 27.11c2.762 0 5-2.357 5-5.264 0-2.908-2.238-5.265-5-5.265-2.76 0-5 2.357-5 5.265 0 2.907 2.24 5.264 5 5.264z" stroke="#6E49CB" stroke-linecap="round"/></svg>
\ No newline at end of file

app/assets/javascripts/pages/projects/learn_gitlab/components/learn_gitlab_a.vue

 <script>
-import { GlLink } from '@gitlab/ui';
-import { ACTION_LABELS } from '../constants';
+import { GlProgressBar, GlSprintf } from '@gitlab/ui';
+import { s__ } from '~/locale';
+import { ACTION_LABELS, ACTION_SECTIONS } from '../constants';
+import LearnGitlabSectionCard from './learn_gitlab_section_card.vue';
 
 export default {
-  components: { GlLink },
+  components: { GlProgressBar, GlSprintf, LearnGitlabSectionCard },
   i18n: {
-    ACTION_LABELS,
+    title: s__('LearnGitLab|Learn GitLab'),
+    description: s__(
+      'LearnGitLab|Ready to get started with GitLab? Follow these steps to set up your workspace, plan and commit changes, and deploy your project.',
+    ),
+    percentageCompleted: s__(`LearnGitLab|%{percentage}%{percentSymbol} completed`),
   },
   props: {
     actions: {
@@ -13,15 +19,49 @@ export default {
       type: Object,
     },
   },
+  maxValue: Object.keys(ACTION_LABELS).length,
+  sections: Object.keys(ACTION_SECTIONS),
+  computed: {
+    progressValue() {
+      return Object.values(this.actions).filter((a) => a.completed).length;
+    },
+    progressPercentage() {
+      return Math.round((this.progressValue / this.$options.maxValue) * 100);
+    },
+  },
+  methods: {
+    actionsFor(section) {
+      const actions = Object.fromEntries(
+        Object.entries(this.actions).filter(
+          ([action]) => ACTION_LABELS[action].section === section,
+        ),
+      );
+      return actions;
+    },
+  },
 };
 </script>
 <template>
-  <ul>
-    <li v-for="(value, action) in actions" :key="action">
-      <span v-if="value.completed">{{ $options.i18n.ACTION_LABELS[action].title }}</span>
-      <span v-else>
-        <gl-link :href="value.url">{{ $options.i18n.ACTION_LABELS[action].title }}</gl-link>
-      </span>
-    </li>
-  </ul>
+  <div>
+    <div class="row">
+      <div class="gl-mb-7 gl-ml-5">
+        <h1 class="gl-font-size-h1">{{ $options.i18n.title }}</h1>
+        <p class="gl-text-gray-700 gl-mb-0">{{ $options.i18n.description }}</p>
+      </div>
+    </div>
+    <div class="gl-mb-3">
+      <p class="gl-text-gray-500 gl-mb-2" data-testid="completion-percentage">
+        <gl-sprintf :message="$options.i18n.percentageCompleted">
+          <template #percentage>{{ progressPercentage }}</template>
+          <template #percentSymbol>%</template>
+        </gl-sprintf>
+      </p>
+      <gl-progress-bar :value="progressValue" :max="$options.maxValue" />
+    </div>
+    <div class="row row-cols-1 row-cols-md-3 gl-mt-5">
+      <div v-for="section in $options.sections" :key="section" class="col gl-mb-6">
+        <learn-gitlab-section-card :section="section" :actions="actionsFor(section)" />
+      </div>
+    </div>
+  </div>
 </template>

app/assets/javascripts/pages/projects/learn_gitlab/components/learn_gitlab_b.vue

 <script>
 import { GlProgressBar, GlSprintf } from '@gitlab/ui';
+import { pick } from 'lodash';
 import { s__ } from '~/locale';
 import { ACTION_LABELS } from '../constants';
 import LearnGitlabInfoCard from './learn_gitlab_info_card.vue';
@@ -42,7 +43,7 @@ export default {
     infoProps(action) {
       return {
         ...this.actions[action],
-        ...ACTION_LABELS[action],
+        ...pick(ACTION_LABELS[action], ['title', 'actionLabel', 'description', 'trialRequired']),
       };
     },
     progressValue() {

app/assets/javascripts/pages/projects/learn_gitlab/components/learn_gitlab_section_card.vue

+<script>
+import { GlCard } from '@gitlab/ui';
+import { imagePath } from '~/lib/utils/common_utils';
+import { ACTION_LABELS, ACTION_SECTIONS } from '../constants';
+
+import LearnGitlabSectionLink from './learn_gitlab_section_link.vue';
+
+export default {
+  name: 'LearnGitlabSectionCard',
+  components: { GlCard, LearnGitlabSectionLink },
+  i18n: {
+    ...ACTION_SECTIONS,
+  },
+  props: {
+    section: {
+      required: true,
+      type: String,
+    },
+    actions: {
+      required: true,
+      type: Object,
+    },
+  },
+  computed: {
+    sortedActions() {
+      return Object.entries(this.actions).sort(
+        (a1, a2) => ACTION_LABELS[a1[0]].position - ACTION_LABELS[a2[0]].position,
+      );
+    },
+  },
+  methods: {
+    svg(section) {
+      return imagePath(`learn_gitlab/section_${section}.svg`);
+    },
+  },
+};
+</script>
+<template>
+  <gl-card class="gl-pt-0 learn-gitlab-section-card">
+    <div class="learn-gitlab-section-card-header">
+      <img :src="svg(section)" />
+      <h2 class="gl-font-lg gl-mb-3">{{ $options.i18n[section].title }}</h2>
+      <p class="gl-text-gray-700 gl-mb-6">{{ $options.i18n[section].description }}</p>
+    </div>
+    <learn-gitlab-section-link
+      v-for="[action, value] in sortedActions"
+      :key="action"
+      :action="action"
+      :value="value"
+    />
+  </gl-card>
+</template>

app/assets/javascripts/pages/projects/learn_gitlab/components/learn_gitlab_section_link.vue

+<script>
+import { GlLink, GlIcon } from '@gitlab/ui';
+import { s__ } from '~/locale';
+import { ACTION_LABELS } from '../constants';
+
+export default {
+  name: 'LearnGitlabSectionLink',
+  components: { GlLink, GlIcon },
+  i18n: {
+    ACTION_LABELS,
+    trialOnly: s__('LearnGitlab|Trial only'),
+  },
+  props: {
+    action: {
+      required: true,
+      type: String,
+    },
+    value: {
+      required: true,
+      type: Object,
+    },
+  },
+  computed: {
+    trialOnly() {
+      return ACTION_LABELS[this.action].trialRequired;
+    },
+  },
+};
+</script>
+<template>
+  <div class="gl-mb-4">
+    <span v-if="value.completed" class="gl-text-green-500">
+      <gl-icon name="check-circle-filled" :size="16" data-testid="completed-icon" />
+      {{ $options.i18n.ACTION_LABELS[action].title }}
+    </span>
+    <span v-else>
+      <gl-link :href="value.url">{{ $options.i18n.ACTION_LABELS[action].title }}</gl-link>
+    </span>
+    <span v-if="trialOnly" class="gl-font-style-italic gl-text-gray-500" data-testid="trial-only">
+      - {{ $options.i18n.trialOnly }}
+    </span>
+  </div>
+</template>

app/assets/javascripts/pages/projects/learn_gitlab/constants/index.js

@@ -5,6 +5,8 @@ export const ACTION_LABELS = {
     title: s__('LearnGitLab|Create or import a repository'),
     actionLabel: s__('LearnGitLab|Create or import a repository'),
     description: s__('LearnGitLab|Create or import your first repository into your new project.'),
+    section: 'workspace',
+    position: 1,
   },
   userAdded: {
     title: s__('LearnGitLab|Invite your colleagues'),
@@ -12,16 +14,22 @@ export const ACTION_LABELS = {
     description: s__(
       'LearnGitLab|GitLab works best as a team. Invite your colleague to enjoy all features.',
     ),
+    section: 'workspace',
+    position: 0,
   },
   pipelineCreated: {
     title: s__('LearnGitLab|Set up CI/CD'),
     actionLabel: s__('LearnGitLab|Set-up CI/CD'),
     description: s__('LearnGitLab|Save time by automating your integration and deployment tasks.'),
+    section: 'workspace',
+    position: 2,
   },
   trialStarted: {
     title: s__('LearnGitLab|Start a free Ultimate trial'),
     actionLabel: s__('LearnGitLab|Try GitLab Ultimate for free'),
     description: s__('LearnGitLab|Try all GitLab features for 30 days, no credit card required.'),
+    section: 'workspace',
+    position: 3,
   },
   codeOwnersEnabled: {
     title: s__('LearnGitLab|Add code owners'),
@@ -30,21 +38,50 @@ export const ACTION_LABELS = {
       'LearnGitLab|Prevent unexpected changes to important assets by assigning ownership of files and paths.',
     ),
     trialRequired: true,
+    section: 'workspace',
+    position: 4,
   },
   requiredMrApprovalsEnabled: {
     title: s__('LearnGitLab|Add merge request approval'),
     actionLabel: s__('LearnGitLab|Enable require merge approvals'),
     description: s__('LearnGitLab|Route code reviews to the right reviewers, every time.'),
     trialRequired: true,
+    section: 'workspace',
+    position: 5,
   },
   mergeRequestCreated: {
     title: s__('LearnGitLab|Submit a merge request'),
     actionLabel: s__('LearnGitLab|Submit a merge request (MR)'),
     description: s__('LearnGitLab|Review and edit proposed changes to source code.'),
+    section: 'plan',
+    position: 1,
   },
   securityScanEnabled: {
-    title: s__('LearnGitLab|Run a security scan'),
-    actionLabel: s__('LearnGitLab|Run a Security scan'),
+    title: s__('LearnGitLab|Run a Security scan using CI/CD'),
+    actionLabel: s__('LearnGitLab|Run a Security scan using CI/CD'),
     description: s__('LearnGitLab|Scan your code to uncover vulnerabilities before deploying.'),
+    section: 'deploy',
+    position: 1,
+  },
+};
+
+export const ACTION_SECTIONS = {
+  workspace: {
+    title: s__('LearnGitLab|Set up your workspace'),
+    description: s__(
+      "LearnGitLab|Complete these tasks first so you can enjoy GitLab's features to their fullest:",
+    ),
+  },
+  plan: {
+    title: s__('LearnGitLab|Plan and execute'),
+    description: s__(
+      'LearnGitLab|Create a workflow for your new workspace, and learn how GitLab features work together:',
+    ),
+  },
+  deploy: {
+    title: s__('LearnGitLab|Deploy'),
+    description: s__(
+      'LearnGitLab|Use your new GitLab workflow to deploy your application, monitor its health, and keep it secure:',
+    ),
   },
 };

app/assets/stylesheets/page_bundles/learn_gitlab.scss

 .learn-gitlab-info-card-content {
   height: 200px;
 }
+
+.learn-gitlab-section-card {
+  height: 400px;
+}
+
+.learn-gitlab-section-card-header {
+  height: 165px;
+}

locale/gitlab.pot

@@ -18424,10 +18424,7 @@ msgstr ""
 msgid "LearnGitLab|Route code reviews to the right reviewers, every time."
 msgstr ""
 
-msgid "LearnGitLab|Run a Security scan"
-msgstr ""
-
-msgid "LearnGitLab|Run a security scan"
+msgid "LearnGitLab|Run a Security scan using CI/CD"
 msgstr ""
 
 msgid "LearnGitLab|Save time by automating your integration and deployment tasks."
@@ -18463,6 +18460,9 @@ msgstr ""
 msgid "LearnGitLab|Use your new GitLab workflow to deploy your application, monitor its health, and keep it secure:"
 msgstr ""
 
+msgid "LearnGitlab|Trial only"
+msgstr ""
+
 msgid "Leave"
 msgstr ""
 

spec/frontend/pages/projects/learn_gitlab/components/__snapshots__/learn_gitlab_a_spec.js.snap

 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Learn GitLab Design A should render the loading state 1`] = `
-<ul>
-  <li>
-    <span>
-      Create or import a repository
-    </span>
-  </li>
-  <li>
-    <span>
-      Invite your colleagues
-    </span>
-  </li>
-  <li>
-    <span>
-      <gl-link-stub
-        href="http://example.com/"
+exports[`Learn GitLab Design A renders correctly 1`] = `
+<div>
+  <div
+    class="row"
+  >
+    <div
+      class="gl-mb-7 gl-ml-5"
+    >
+      <h1
+        class="gl-font-size-h1"
       >
-        Set up CI/CD
-      </gl-link-stub>
-    </span>
-  </li>
-  <li>
-    <span>
-      <gl-link-stub
-        href="http://example.com/"
+        Learn GitLab
+      </h1>
+       
+      <p
+        class="gl-text-gray-700 gl-mb-0"
       >
-        Start a free Ultimate trial
-      </gl-link-stub>
-    </span>
-  </li>
-  <li>
-    <span>
-      <gl-link-stub
-        href="http://example.com/"
+        Ready to get started with GitLab? Follow these steps to set up your workspace, plan and commit changes, and deploy your project.
+      </p>
+    </div>
+  </div>
+   
+  <div
+    class="gl-mb-3"
+  >
+    <p
+      class="gl-text-gray-500 gl-mb-2"
+      data-testid="completion-percentage"
+    >
+      25% completed
+    </p>
+     
+    <div
+      class="progress"
+      max="8"
+      value="2"
+    >
+      <div
+        aria-valuemax="8"
+        aria-valuemin="0"
+        aria-valuenow="2"
+        class="progress-bar"
+        role="progressbar"
+        style="width: 25%;"
       >
-        Add code owners
-      </gl-link-stub>
-    </span>
-  </li>
-  <li>
-    <span>
-      <gl-link-stub
-        href="http://example.com/"
+        <!---->
+      </div>
+    </div>
+  </div>
+   
+  <div
+    class="row row-cols-1 row-cols-md-3 gl-mt-5"
+  >
+    <div
+      class="col gl-mb-6"
+    >
+      <div
+        class="gl-card gl-pt-0 learn-gitlab-section-card"
       >
-        Add merge request approval
-      </gl-link-stub>
-    </span>
-  </li>
-  <li>
-    <span>
-      <gl-link-stub
-        href="http://example.com/"
+        <!---->
+         
+        <div
+          class="gl-card-body"
+        >
+          <div
+            class="learn-gitlab-section-card-header"
+          >
+            <img
+              src="/assets/learn_gitlab/section_workspace.svg"
+            />
+             
+            <h2
+              class="gl-font-lg gl-mb-3"
+            >
+              Set up your workspace
+            </h2>
+             
+            <p
+              class="gl-text-gray-700 gl-mb-6"
+            >
+              Complete these tasks first so you can enjoy GitLab's features to their fullest:
+            </p>
+          </div>
+           
+          <div
+            class="gl-mb-4"
+          >
+            <span
+              class="gl-text-green-500"
+            >
+              <svg
+                aria-hidden="true"
+                class="gl-icon s16"
+                data-testid="completed-icon"
+              >
+                <use
+                  href="#check-circle-filled"
+                />
+              </svg>
+              
+    Invite your colleagues
+  
+            </span>
+             
+            <!---->
+          </div>
+          <div
+            class="gl-mb-4"
+          >
+            <span
+              class="gl-text-green-500"
+            >
+              <svg
+                aria-hidden="true"
+                class="gl-icon s16"
+                data-testid="completed-icon"
+              >
+                <use
+                  href="#check-circle-filled"
+                />
+              </svg>
+              
+    Create or import a repository
+  
+            </span>
+             
+            <!---->
+          </div>
+          <div
+            class="gl-mb-4"
+          >
+            <span>
+              <a
+                class="gl-link"
+                href="http://example.com/"
+              >
+                Set up CI/CD
+              </a>
+            </span>
+             
+            <!---->
+          </div>
+          <div
+            class="gl-mb-4"
+          >
+            <span>
+              <a
+                class="gl-link"
+                href="http://example.com/"
+              >
+                Start a free Ultimate trial
+              </a>
+            </span>
+             
+            <!---->
+          </div>
+          <div
+            class="gl-mb-4"
+          >
+            <span>
+              <a
+                class="gl-link"
+                href="http://example.com/"
+              >
+                Add code owners
+              </a>
+            </span>
+             
+            <span
+              class="gl-font-style-italic gl-text-gray-500"
+              data-testid="trial-only"
+            >
+              
+    - Trial only
+  
+            </span>
+          </div>
+          <div
+            class="gl-mb-4"
+          >
+            <span>
+              <a
+                class="gl-link"
+                href="http://example.com/"
+              >
+                Add merge request approval
+              </a>
+            </span>
+             
+            <span
+              class="gl-font-style-italic gl-text-gray-500"
+              data-testid="trial-only"
+            >
+              
+    - Trial only
+  
+            </span>
+          </div>
+        </div>
+         
+        <!---->
+      </div>
+    </div>
+    <div
+      class="col gl-mb-6"
+    >
+      <div
+        class="gl-card gl-pt-0 learn-gitlab-section-card"
       >
-        Submit a merge request
-      </gl-link-stub>
-    </span>
-  </li>
-  <li>
-    <span>
-      <gl-link-stub
-        href="http://example.com/"
+        <!---->
+         
+        <div
+          class="gl-card-body"
+        >
+          <div
+            class="learn-gitlab-section-card-header"
+          >
+            <img
+              src="/assets/learn_gitlab/section_plan.svg"
+            />
+             
+            <h2
+              class="gl-font-lg gl-mb-3"
+            >
+              Plan and execute
+            </h2>
+             
+            <p
+              class="gl-text-gray-700 gl-mb-6"
+            >
+              Create a workflow for your new workspace, and learn how GitLab features work together:
+            </p>
+          </div>
+           
+          <div
+            class="gl-mb-4"
+          >
+            <span>
+              <a
+                class="gl-link"
+                href="http://example.com/"
+              >
+                Submit a merge request
+              </a>
+            </span>
+             
+            <!---->
+          </div>
+        </div>
+         
+        <!---->
+      </div>
+    </div>
+    <div
+      class="col gl-mb-6"
+    >
+      <div
+        class="gl-card gl-pt-0 learn-gitlab-section-card"
       >
-        Run a security scan
-      </gl-link-stub>
-    </span>
-  </li>
-</ul>
+        <!---->
+         
+        <div
+          class="gl-card-body"
+        >
+          <div
+            class="learn-gitlab-section-card-header"
+          >
+            <img
+              src="/assets/learn_gitlab/section_deploy.svg"
+            />
+             
+            <h2
+              class="gl-font-lg gl-mb-3"
+            >
+              Deploy
+            </h2>
+             
+            <p
+              class="gl-text-gray-700 gl-mb-6"
+            >
+              Use your new GitLab workflow to deploy your application, monitor its health, and keep it secure:
+            </p>
+          </div>
+           
+          <div
+            class="gl-mb-4"
+          >
+            <span>
+              <a
+                class="gl-link"
+                href="http://example.com/"
+              >
+                Run a Security scan using CI/CD
+              </a>
+            </span>
+             
+            <!---->
+          </div>
+        </div>
+         
+        <!---->
+      </div>
+    </div>
+  </div>
+</div>
 `;

spec/frontend/pages/projects/learn_gitlab/components/__snapshots__/learn_gitlab_b_spec.js.snap

@@ -491,7 +491,7 @@ exports[`Learn GitLab Design B renders correctly 1`] = `
             />
              
             <h6>
-              Run a security scan
+              Run a Security scan using CI/CD
             </h6>
              
             <p
@@ -506,7 +506,7 @@ exports[`Learn GitLab Design B renders correctly 1`] = `
               rel="noopener noreferrer"
               target="_blank"
             >
-              Run a Security scan
+              Run a Security scan using CI/CD
             </a>
           </div>
         </div>

spec/frontend/pages/projects/learn_gitlab/components/__snapshots__/learn_gitlab_section_card_spec.js.snap

+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Learn GitLab Section Card renders correctly 1`] = `
+<gl-card-stub
+  bodyclass=""
+  class="gl-pt-0 learn-gitlab-section-card"
+  footerclass=""
+  headerclass=""
+>
+  <div
+    class="learn-gitlab-section-card-header"
+  >
+    <img
+      src="/assets/learn_gitlab/section_workspace.svg"
+    />
+     
+    <h2
+      class="gl-font-lg gl-mb-3"
+    >
+      Set up your workspace
+    </h2>
+     
+    <p
+      class="gl-text-gray-700 gl-mb-6"
+    >
+      Complete these tasks first so you can enjoy GitLab's features to their fullest:
+    </p>
+  </div>
+   
+  <learn-gitlab-section-link-stub
+    action="userAdded"
+    value="[object Object]"
+  />
+  <learn-gitlab-section-link-stub
+    action="gitWrite"
+    value="[object Object]"
+  />
+  <learn-gitlab-section-link-stub
+    action="mergeRequestCreated"
+    value="[object Object]"
+  />
+  <learn-gitlab-section-link-stub
+    action="securityScanEnabled"
+    value="[object Object]"
+  />
+  <learn-gitlab-section-link-stub
+    action="pipelineCreated"
+    value="[object Object]"
+  />
+  <learn-gitlab-section-link-stub
+    action="trialStarted"
+    value="[object Object]"
+  />
+  <learn-gitlab-section-link-stub
+    action="codeOwnersEnabled"
+    value="[object Object]"
+  />
+  <learn-gitlab-section-link-stub
+    action="requiredMrApprovalsEnabled"
+    value="[object Object]"
+  />
+</gl-card-stub>
+`;

spec/frontend/pages/projects/learn_gitlab/components/learn_gitlab_a_spec.js

-import { shallowMount } from '@vue/test-utils';
+import { GlProgressBar } from '@gitlab/ui';
+import { mount } from '@vue/test-utils';
 import LearnGitlabA from '~/pages/projects/learn_gitlab/components/learn_gitlab_a.vue';
 import { testActions } from './mock_data';
 
 describe('Learn GitLab Design A', () => {
   let wrapper;
 
+  const createWrapper = () => {
+    wrapper = mount(LearnGitlabA, { propsData: { actions: testActions } });
+  };
+
+  beforeEach(() => {
+    createWrapper();
+  });
+
   afterEach(() => {
     wrapper.destroy();
     wrapper = null;
   });
 
-  const createWrapper = () => {
-    wrapper = shallowMount(LearnGitlabA, { propsData: { actions: testActions } });
-  };
+  it('renders correctly', () => {
+    expect(wrapper.element).toMatchSnapshot();
+  });
 
-  it('should render the loading state', () => {
-    createWrapper();
+  it('renders the progress percentage', () => {
+    const text = wrapper.find('[data-testid="completion-percentage"]').text();
 
-    expect(wrapper.element).toMatchSnapshot();
+    expect(text).toEqual('25% completed');
+  });
+
+  it('renders the progress bar with correct values', () => {
+    const progressBar = wrapper.find(GlProgressBar);
+
+    expect(progressBar.attributes('value')).toBe('2');
+    expect(progressBar.attributes('max')).toBe('8');
   });
 });

spec/frontend/pages/projects/learn_gitlab/components/learn_gitlab_section_card_spec.js

+import { shallowMount } from '@vue/test-utils';
+import LearnGitlabSectionCard from '~/pages/projects/learn_gitlab/components/learn_gitlab_section_card.vue';
+import { testActions } from './mock_data';
+
+const defaultSection = 'workspace';
+
+describe('Learn GitLab Section Card', () => {
+  let wrapper;
+
+  afterEach(() => {
+    wrapper.destroy();
+    wrapper = null;
+  });
+
+  const createWrapper = () => {
+    wrapper = shallowMount(LearnGitlabSectionCard, {
+      propsData: { section: defaultSection, actions: testActions },
+    });
+  };
+
+  it('renders correctly', () => {
+    createWrapper({ completed: false });
+
+    expect(wrapper.element).toMatchSnapshot();
+  });
+});

spec/frontend/pages/projects/learn_gitlab/components/learn_gitlab_section_link_spec.js

+import { shallowMount } from '@vue/test-utils';
+import LearnGitlabSectionLink from '~/pages/projects/learn_gitlab/components/learn_gitlab_section_link.vue';
+
+const defaultAction = 'gitWrite';
+const defaultProps = {
+  title: 'Create Repository',
+  description: 'Some description',
+  url: 'https://example.com',
+  completed: false,
+};
+
+describe('Learn GitLab Section Link', () => {
+  let wrapper;
+
+  afterEach(() => {
+    wrapper.destroy();
+    wrapper = null;
+  });
+
+  const createWrapper = (action = defaultAction, props = {}) => {
+    wrapper = shallowMount(LearnGitlabSectionLink, {
+      propsData: { action, value: { ...defaultProps, ...props } },
+    });
+  };
+
+  it('renders no icon when not completed', () => {
+    createWrapper(undefined, { completed: false });
+
+    expect(wrapper.find('[data-testid="completed-icon"]').exists()).toBe(false);
+  });
+
+  it('renders the completion icon when completed', () => {
+    createWrapper(undefined, { completed: true });
+
+    expect(wrapper.find('[data-testid="completed-icon"]').exists()).toBe(true);
+  });
+
+  it('renders no trial only when it is not required', () => {
+    createWrapper();
+
+    expect(wrapper.find('[data-testid="trial-only"]').exists()).toBe(false);
+  });
+
+  it('renders trial only when trial is required', () => {
+    createWrapper('codeOwnersEnabled');
+
+    expect(wrapper.find('[data-testid="trial-only"]').exists()).toBe(true);
+  });
+});