diff --git a/nx-dev/nx-dev/pages/nxcloud.tsx b/nx-dev/nx-dev/pages/nx-cloud.tsx
similarity index 94%
rename from nx-dev/nx-dev/pages/nxcloud.tsx
rename to nx-dev/nx-dev/pages/nx-cloud.tsx
index e123b04371a223..638701bea68dc5 100644
--- a/nx-dev/nx-dev/pages/nxcloud.tsx
+++ b/nx-dev/nx-dev/pages/nx-cloud.tsx
@@ -13,7 +13,7 @@ import {
   CallToAction,
 } from '@nx/nx-dev/ui-cloud';
 
-export default function NxCloud() {
+export function NxCloud(): JSX.Element {
   const router = useRouter();
 
   return (
@@ -41,10 +41,9 @@ export default function NxCloud() {
         }}
       />
       <Layout>
-        <div>
-          <Hero />
-          <TrustedBy />
-        </div>
+        <Hero />
+        <TrustedBy />
+
         <div className="mt-32 lg:mt-56">
           <FasterAndCheaper />
         </div>
@@ -70,3 +69,5 @@ export default function NxCloud() {
     </>
   );
 }
+
+export default NxCloud;
diff --git a/nx-dev/nx-dev/redirect-rules.js b/nx-dev/nx-dev/redirect-rules.js
index 1c264c7c104397..4fa4abf19b8a63 100644
--- a/nx-dev/nx-dev/redirect-rules.js
+++ b/nx-dev/nx-dev/redirect-rules.js
@@ -478,7 +478,6 @@ const nxCloudUrls = {
   '/ci': '/ci/intro/ci-with-nx',
   '/concepts/more-concepts/illustrated-dte':
     '/ci/concepts/parallelization-distribution',
-  '/nx-cloud/:path*': '/ci/:path*',
   '/core-features/:path*': '/features/:path*',
   '/ci/recipes/set-up/connect-to-cloud': '/ci/intro/connect-to-cloud',
 };
diff --git a/nx-dev/nx-dev/tailwind.config.js b/nx-dev/nx-dev/tailwind.config.js
index 9304f5a1b5e606..a0e1912b0ce099 100644
--- a/nx-dev/nx-dev/tailwind.config.js
+++ b/nx-dev/nx-dev/tailwind.config.js
@@ -4,6 +4,10 @@ const path = require('path');
 const { createGlobPatternsForDependencies } = require('@nx/next/tailwind');
 const plugin = require('tailwindcss/plugin');
 
+const {
+  default: flattenColorPalette,
+} = require('tailwindcss/lib/util/flattenColorPalette');
+
 if (!createGlobPatternsForDependencies(__dirname).length)
   throw Error('GRAPH ISSUE: No dependency found when many are expected.');
 
@@ -24,6 +28,18 @@ const FlipAnimation = plugin(function ({ addUtilities }) {
   });
 });
 
+// This plugin adds each Tailwind color as a global CSS variable, e.g. var(--gray-200).
+function addVariablesForColors({ addBase, theme }) {
+  let allColors = flattenColorPalette(theme('colors'));
+  let newVars = Object.fromEntries(
+    Object.entries(allColors).map(([key, val]) => [`--${key}`, val])
+  );
+
+  addBase({
+    ':root': newVars,
+  });
+}
+
 module.exports = {
   experimental: {
     optimizeUniversalDefaults: true,
@@ -61,5 +77,6 @@ module.exports = {
     require('@tailwindcss/typography'),
     require('@tailwindcss/forms'),
     FlipAnimation,
+    addVariablesForColors,
   ],
 };
diff --git a/nx-dev/ui-cloud/src/lib/hero.tsx b/nx-dev/ui-cloud/src/lib/hero.tsx
index ecc792d730eaa8..049f7bfa5affad 100644
--- a/nx-dev/ui-cloud/src/lib/hero.tsx
+++ b/nx-dev/ui-cloud/src/lib/hero.tsx
@@ -6,6 +6,8 @@ import { ComponentProps, Fragment, useState } from 'react';
 import { ButtonLink } from '@nx/nx-dev/ui-common';
 import { SectionHeading } from './elements/section-tags';
 import { MovingBorder } from './elements/moving-border';
+import Link from 'next/link';
+import Image from 'next/image';
 
 export function Hero(): JSX.Element {
   const [isOpen, setIsOpen] = useState(false);
@@ -32,10 +34,19 @@ export function Hero(): JSX.Element {
           >
             Get started
           </ButtonLink>
+          <ButtonLink
+            href="/ci/intro/ci-with-nx"
+            title="Learn More"
+            variant="secondary"
+            size="default"
+          >
+            Learn More
+          </ButtonLink>
           <a
             href="https://staging.nx.app/orgs/62d013d4d26f260059f7765e/workspaces/62d013ea0852fe0a2df74438/overview"
             target="_blank"
             rel="noreferrer"
+            title="Live demo"
             className="group text-sm font-semibold leading-6 text-slate-950 dark:text-white"
           >
             Live demo{' '}
@@ -57,7 +68,7 @@ export function Hero(): JSX.Element {
               </MovingBorder>
             </div>
             <picture className="relative flex h-full w-full items-center justify-center overflow-hidden rounded-xl border border-slate-100 bg-slate-50 antialiased backdrop-blur-xl dark:border-slate-900 dark:bg-slate-900/[0.8]">
-              <img
+              <Image
                 src="/images/cloud/nrwl-ocean.avif"
                 alt="App screenshot: overview"
                 width={2550}
diff --git a/nx-dev/ui-cloud/src/lib/statistics.tsx b/nx-dev/ui-cloud/src/lib/statistics.tsx
index c896913c094221..845dba97e91230 100644
--- a/nx-dev/ui-cloud/src/lib/statistics.tsx
+++ b/nx-dev/ui-cloud/src/lib/statistics.tsx
@@ -45,10 +45,12 @@ function fetchTimeSaved(): Promise<{
         }>
     )
     .catch(() => ({
+      // TODO: Remove this mock data once the API is ready.
+      // Below is the latest data as of 2024-07-08.
       date: new Date(),
-      last7days: Math.round(Math.random() * 1000000000),
-      last30days: Math.round(Math.random() * 100000000000),
-      sinceStart: Math.round(Math.random() * 10000000000000),
+      last7days: 184326783183,
+      last30days: 853784967976,
+      sinceStart: 27250634509494,
     }));
 }