replace single illustration with multiple ones. Fonts will match the system's

9 files changed, 38 insertions, 2 deletions

diff --git a/doc/user/project/pages/img/fork_deploy_visit.png b/doc/user/project/pages/img/fork_deploy_visit.png
deleted file mode 100644
index f9d77b9793a..00000000000
--- a/doc/user/project/pages/img/fork_deploy_visit.png
+++ /dev/null
diff --git a/doc/user/project/pages/img/icons/click.png b/doc/user/project/pages/img/icons/click.png
new file mode 100644
index 00000000000..daaf760ec08
--- /dev/null
+++ b/doc/user/project/pages/img/icons/click.png
diff --git a/doc/user/project/pages/img/icons/cogs.png b/doc/user/project/pages/img/icons/cogs.png
new file mode 100644
index 00000000000..a12da1b5e8c
--- /dev/null
+++ b/doc/user/project/pages/img/icons/cogs.png
diff --git a/doc/user/project/pages/img/icons/fork.png b/doc/user/project/pages/img/icons/fork.png
new file mode 100644
index 00000000000..e2c9577e7ce
--- /dev/null
+++ b/doc/user/project/pages/img/icons/fork.png
diff --git a/doc/user/project/pages/img/icons/free.png b/doc/user/project/pages/img/icons/free.png
new file mode 100644
index 00000000000..3b8f8f6863e
--- /dev/null
+++ b/doc/user/project/pages/img/icons/free.png
diff --git a/doc/user/project/pages/img/icons/lock.png b/doc/user/project/pages/img/icons/lock.png
new file mode 100644
index 00000000000..1c1f0b4457b
--- /dev/null
+++ b/doc/user/project/pages/img/icons/lock.png
diff --git a/doc/user/project/pages/img/icons/monitor.png b/doc/user/project/pages/img/icons/monitor.png
new file mode 100644
index 00000000000..7b99d430eef
--- /dev/null
+++ b/doc/user/project/pages/img/icons/monitor.png
diff --git a/doc/user/project/pages/img/icons/terminal.png b/doc/user/project/pages/img/icons/terminal.png
new file mode 100644
index 00000000000..ab5ae11310c
--- /dev/null
+++ b/doc/user/project/pages/img/icons/terminal.png
diff --git a/doc/user/project/pages/index.md b/doc/user/project/pages/index.md
index eb714fb7e6f..c1fdf4945e6 100644
--- a/doc/user/project/pages/index.md
+++ b/doc/user/project/pages/index.md
@@ -11,6 +11,27 @@ You can use it either for personal or business websites, such as
 portfolios, documentation, manifestos, and business presentations,
 and attribute any license to your content.
 
+<table class="borderless-table center fixed-table">
+  <tr>
+    <td><img src="img/icons/monitor.png" alt="Websites" class="image-noshadow"></td>
+    <td><strong>></strong></td>
+    <td><img src="img/icons/cogs.png" alt="SSGs" class="image-noshadow"></td>
+    <td><strong>></strong></td>
+    <td><img src="img/icons/lock.png" alt="Secure your website" class="image-noshadow"></td>
+    <td><strong>></strong></td>
+    <td><img src="img/icons/free.png" alt="Pages is free" class="image-noshadow"></td>
+  </tr>
+  <tr>
+    <td><em>Create websites for your projects, groups, or user account</em></td>
+    <td></td>
+    <td><em>Use any static website generator or plain HTML</em></td>
+    <td></td>
+    <td><em>Connect your custom domain(s) and TLS certificates</em></td>
+    <td></td>
+    <td><em>Host on GitLab.com for free, or on your own GitLab instance</em></td>
+  </tr>
+</table>
+
 Pages is available for free for all GitLab.com users as well as for self-managed
 instances (GitLab Core, Starter, Premium, and Ultimate).
 
@@ -18,7 +39,7 @@ instances (GitLab Core, Starter, Premium, and Ultimate).
 
 <div class="row">
 <div class="col-md-9">
-<p style="margin-top: 20px;">
+<p style="margin-top: 18px;">
 To publish a website with Pages, you can use any Static Site Generator (SSG),
 such as Jekyll, Hugo, Middleman, Harp, Hexo, and Brunch, just to name a few. You can also
 publish any website written directly in plain HTML, CSS, and JavaScript.</p>
@@ -67,7 +88,22 @@ on **Run pipeline** so that GitLab CI/CD will build and deploy your site to the
 1. Once the pipeline has finished successfully, find the link to visit your website from your
    project's **Settings > Pages**.
 
-<img src="img/fork_deploy_visit.png" alt="Minimum steps to get started with Pages" class="image-noshadow middle display-block half-width">
+<table class="borderless-table center fixed-table middle width-70">
+  <tr>
+    <td><img src="img/icons/fork.png" alt="Fork" class="image-noshadow"></td>
+    <td><strong>></strong></td>
+    <td><img src="img/icons/terminal.png" alt="Deploy" class="image-noshadow"></td>
+    <td><strong>></strong></td>
+    <td><img src="img/icons/click.png" alt="Visit" class="image-noshadow"></td>
+  </tr>
+  <tr>
+    <td><em>Fork an example project</em></td>
+    <td></td>
+    <td><em>Deploy your website</em></td>
+    <td></td>
+    <td><em>Visit your website's URL</em></td>
+  </tr>
+</table>
 
 Your website will be then publicly available, and you can modify your files
 as you wish. For every modification pushed to your repository, GitLab CI/CD will run