docs(nx-dev): update remote cache page (#30902)

Updates texts and remote cache UI with "recommended" label.

nx-dev/ui-enterprise/src/lib/security/ci-access.tsx

@@ -54,7 +54,7 @@ export function CiAccess(): ReactElement {
                     aria-hidden="true"
                     className="absolute left-1 top-1 h-5 w-5"
                   />
-                  Rotate tokens weekly (or as often as needed)
+                  Rotate tokens as needed
                 </span>
               </li>
               <li className="relative pl-9">

nx-dev/ui-enterprise/src/lib/security/why-ci-security-matters.tsx

@@ -29,8 +29,8 @@ export function WhyCiSecurityMatters(): ReactElement {
               Why CI Security Matters
             </SectionHeading>
             <SectionHeading as="p" variant="subtitle" className="mt-6">
-              CI pipelines are a growing target – and your cache is a critical
+              CI pipelines are often an overlooked threat – and your cache is a
-              entry point.
+              critical entry point.
             </SectionHeading>
 
             <SectionDescription as="p" className="mt-6">

nx-dev/ui-remote-cache/src/lib/faq.tsx

@@ -75,6 +75,29 @@ export function Faq(): ReactElement {
         </p>
       ),
     },
+    {
+      question: 'Is my self-hosted cache setup secure enough?',
+      answerJson:
+        'Most self-hosted cache setups offer basic functionality but lack critical security features. Without enforced input validation, branch isolation, and real-time access control, self-hosted caches are vulnerable to cache poisoning, where compromised or unverified artifacts can silently pollute your builds. We recommend using Nx Cloud, which provides infrastructure-level protections, making it a safer choice for organizations in highly regulated industries.',
+      answerUi: (
+        <p>
+          Most self-hosted cache setups offer basic functionality but lack
+          critical security features. Without enforced input validation, branch
+          isolation, and real-time access control, self-hosted caches are
+          vulnerable to cache poisoning, where compromised or unverified
+          artifacts can silently pollute your builds. We recommend using Nx
+          Cloud, which provides infrastructure-level protections, making it a
+          safer choice for organizations in highly regulated industries.{' '}
+          <Link
+            href="/enterprise/security"
+            title="Learn more"
+            className="font-semibold"
+          >
+            Learn more here.
+          </Link>
+        </p>
+      ),
+    },
     {
       question:
         'What security measures does Nx Cloud offer beyond the official plugins and third party plugins?',

nx-dev/ui-remote-cache/src/lib/remote-cache-solutions.tsx

@@ -1,10 +1,12 @@
 'use client';
 import { ReactElement } from 'react';
-import { CheckCircleIcon } from '@heroicons/react/24/solid';
+import {
+  CheckCircleIcon,
+  ExclamationCircleIcon,
+} from '@heroicons/react/24/solid';
 import { ButtonLink, SectionHeading } from '@nx/nx-dev/ui-common';
 import { sendCustomEvent } from '@nx/nx-dev/feature-analytics';
 import Link from 'next/link';
-import { ExclamationCircleIcon } from '@heroicons/react/24/outline';
 
 export function RemoteCacheSolutions(): ReactElement {
   return (
@@ -22,15 +24,17 @@ export function RemoteCacheSolutions(): ReactElement {
           <div className="-mt-16 grid max-w-full grid-cols-1 gap-12 sm:mx-auto lg:mt-0 lg:grid-cols-3 xl:-mx-4">
             {/* NX CLOUD */}
             <div>
-              <div className="rounded-xl border border-slate-200 bg-white p-8 dark:border-slate-800 dark:bg-slate-950">
+              <div className="relative rounded-xl border-2 border-blue-500 bg-white p-8 dark:border-sky-500 dark:bg-slate-950">
+                <span className="absolute left-1/2 top-0 inline-flex -translate-x-1/2 -translate-y-6 transform items-center rounded-t-md bg-blue-500 px-2 py-1 text-xs font-medium text-white ring-1 ring-inset">
+                  Recommended
+                </span>
                 <div className="flex items-center gap-x-2">
                   <h4 className="text-xl font-semibold leading-8 text-slate-950 dark:text-white">
-                    Managed remote cache
+                    Nx Cloud remote cache
                   </h4>
                 </div>
                 <p className="mt-2 text-sm">
-                  Easiest setup, high performance, secure, fully managed by Nx
+                  Easiest setup, high performance, secure, fully managed by Nx.
-                  Cloud.
                 </p>
                 <div className="my-8">
                   <ButtonLink
@@ -78,6 +82,23 @@ export function RemoteCacheSolutions(): ReactElement {
                       )
                     </span>
                   </li>
+                  <li className="flex items-start justify-start gap-x-2 py-2.5">
+                    <CheckCircleIcon
+                      aria-hidden="true"
+                      className="h-6 w-5 flex-none text-blue-600 dark:text-sky-500"
+                    />
+                    <span>
+                      SOC-2 compliant (
+                      <a
+                        href="https://security.nx.app/"
+                        title="Check our SOC 2 security report"
+                        className="font-semibold underline"
+                      >
+                        view report
+                      </a>
+                      )
+                    </span>
+                  </li>
                   <li className="flex items-start justify-start gap-x-2 py-2.5">
                     <CheckCircleIcon
                       aria-hidden="true"
@@ -111,23 +132,6 @@ export function RemoteCacheSolutions(): ReactElement {
                       Enterprise grade access management and key revocation
                     </span>
                   </li>
-                  <li className="flex items-start justify-start gap-x-2 py-2.5">
-                    <CheckCircleIcon
-                      aria-hidden="true"
-                      className="h-6 w-5 flex-none text-blue-600 dark:text-sky-500"
-                    />
-                    <span>
-                      SOC-2 compliant (
-                      <a
-                        href="https://security.nx.app/"
-                        title="Check our SOC 2 security report"
-                        className="font-semibold underline"
-                      >
-                        view report
-                      </a>
-                      )
-                    </span>
-                  </li>
                   <li className="flex items-start justify-start gap-x-2 py-2.5">
                     <CheckCircleIcon
                       aria-hidden="true"
@@ -158,8 +162,8 @@ export function RemoteCacheSolutions(): ReactElement {
                   </h4>
                 </div>
                 <p className="mt-2 text-sm">
-                  Dedicated NPM packages for major storage providers, Nx
+                  Dedicated NPM packages for major storage providers, maintained
-                  managed.
+                  by Nx.
                 </p>
                 <div className="my-8">
                   <ButtonLink
@@ -191,7 +195,7 @@ export function RemoteCacheSolutions(): ReactElement {
                   <li className="flex items-start justify-start gap-x-2 py-2.5">
                     <ExclamationCircleIcon
                       aria-hidden="true"
-                      className="h-6 w-5 flex-none text-blue-600 dark:text-sky-500"
+                      className="h-6 w-5 flex-none text-yellow-600 dark:text-yellow-500"
                     />
                     <span>
                       Not recommended for organizations requiring HIPAA or SOC-2