From f8633d3b70707603270fecdf88e63173224c766c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Miroslav=20Jona=C5=A1?= <meeroslav@users.noreply.github.com>
Date: Fri, 3 Dec 2021 23:45:14 +0100
Subject: [PATCH] feat(nxdev): make headline features more readable (#7891)

---
 nx-dev/nx-dev/pages/index.tsx | 31 +++++++++++++++++++++++++------
 1 file changed, 25 insertions(+), 6 deletions(-)

diff --git a/nx-dev/nx-dev/pages/index.tsx b/nx-dev/nx-dev/pages/index.tsx
index 4403470ddd..e8027bcdfd 100644
--- a/nx-dev/nx-dev/pages/index.tsx
+++ b/nx-dev/nx-dev/pages/index.tsx
@@ -90,13 +90,32 @@ export function Index() {
                     Build Framework
                   </h1>
                   <h2 className="text-2xl font-medium mb-1">
-                    Nx helps architect, test, and build at any scale:
+                    Nx helps <b>architect</b>, <b>test</b>, and <b>build</b> at
+                    any scale:
                   </h2>
-                  <p className="max-w-screen-lg text-lg font-medium mb-10 sm:mb-11">
-                    integrations with modern frameworks, distributed task
-                    execution, computation caching, smart rebuilds of affected
-                    projects, powerful code generators, editor support, GitHub
-                    apps, and more.
+                  <p className="max-w-screen-lg text-lg font-medium mb-10 sm:mb-11 flex flex-wrap">
+                    <span className="rounded px-1 mr-1 mb-1 text-white bg-blue-nx-base">
+                      integrations with modern frameworks
+                    </span>
+                    <span className="rounded px-1 mr-1 mb-1 text-white bg-blue-nx-base">
+                      computation caching
+                    </span>
+                    <span className="rounded px-1 mr-1 mb-1 text-white bg-blue-nx-base">
+                      smart rebuilds of affected projects
+                    </span>
+                    <span className="rounded px-1 mr-1 mb-1 text-white bg-blue-nx-base">
+                      distributed task execution
+                    </span>
+                    <span className="rounded px-1 mr-1 mb-1 text-white bg-blue-nx-base">
+                      powerful code generators
+                    </span>
+                    <span className="rounded px-1 mr-1 mb-1 text-white bg-blue-nx-base">
+                      editor support
+                    </span>
+                    <span className="rounded px-1 mr-1 mb-1 text-white bg-blue-nx-base">
+                      GitHub apps
+                    </span>
+                    and more.
                   </p>
 
                   <div className="flex flex-wrap space-y-4 sm:space-y-0 sm:space-x-4 text-center">