From 541079427324c05bc682f06b7b95eb68e721d8b4 Mon Sep 17 00:00:00 2001
From: Benjamin Cabanes <3447705+bcabanes@users.noreply.github.com>
Date: Wed, 14 Aug 2024 17:00:37 -0400
Subject: [PATCH] feat(nx-dev): add support section on contact page (#27437)

Simplify imports and content descriptions for engineering contact page. Added new Nx Cloud support section and adjusted links and icons in the contact links component for consistency.
---
 nx-dev/nx-dev/pages/contact/engineering.tsx   |  9 ++--
 nx-dev/ui-contact/src/lib/contact-links.tsx   | 50 +++++++++----------
 nx-dev/ui-contact/src/lib/how-can-we-help.tsx | 30 ++++++++++-
 .../src/lib/talk-to-our-engineering-team.tsx  |  4 +-
 4 files changed, 57 insertions(+), 36 deletions(-)

diff --git a/nx-dev/nx-dev/pages/contact/engineering.tsx b/nx-dev/nx-dev/pages/contact/engineering.tsx
index 387fa02cc717f..bc1ba0e5450e6 100644
--- a/nx-dev/nx-dev/pages/contact/engineering.tsx
+++ b/nx-dev/nx-dev/pages/contact/engineering.tsx
@@ -1,10 +1,7 @@
 import { useRouter } from 'next/router';
 import { NextSeo } from 'next-seo';
 import { Footer, Header } from '@nx/nx-dev/ui-common';
-import {
-  TalkToOurEngineeringTeam,
-  TalkToOurSalesTeam,
-} from '@nx/nx-dev/ui-contact';
+import { TalkToOurEngineeringTeam } from '@nx/nx-dev/ui-contact';
 
 export function EngineeringTeam(): JSX.Element {
   const router = useRouter();
@@ -13,12 +10,12 @@ export function EngineeringTeam(): JSX.Element {
     <>
       <NextSeo
         title="Talk to our Developer Productivity Engineers"
-        description="Contact our Developer Productivity Engineers for demos, onboarding assistance, and technical support. Share your requirements and challenges with us, and we will help you utilize Nx Enterprise to enhance your organization's product development."
+        description="Contact our Developer Productivity Engineers for demos, onboarding, and product questions. Share your requirements and challenges with us, and we will help you utilize Nx Enterprise to enhance your organization's product development."
         openGraph={{
           url: 'https://nx.dev' + router.asPath,
           title: 'Talk to our Developer Productivity Engineers',
           description:
-            "Contact our Developer Productivity Engineers for demos, onboarding assistance, and technical support. Share your requirements and challenges with us, and we will help you utilize Nx Enterprise to enhance your organization's product development.",
+            "Contact our Developer Productivity Engineers for demos, onboarding, and product questions. Share your requirements and challenges with us, and we will help you utilize Nx Enterprise to enhance your organization's product development.",
           images: [
             {
               url: 'https://nx.dev/socials/nx-media.png',
diff --git a/nx-dev/ui-contact/src/lib/contact-links.tsx b/nx-dev/ui-contact/src/lib/contact-links.tsx
index 800099e708473..fd7265c8bb366 100644
--- a/nx-dev/ui-contact/src/lib/contact-links.tsx
+++ b/nx-dev/ui-contact/src/lib/contact-links.tsx
@@ -44,6 +44,26 @@ export function ContactLinks(): JSX.Element {
             <ArrowUpRightIcon aria-hidden="true" className="h-3 w-3" />
           </a>
         </div>
+        <div>
+          <div className="flex items-center gap-2">
+            <AcademicCapIcon aria-hidden="true" className="h-4 w-4" />
+            <h4 className="text-lg font-medium text-slate-700 dark:text-slate-300">
+              Documentation
+            </h4>
+          </div>
+          <p className="mt-2">
+            Get an overview of Nx's features, integrations, and how to use them.
+          </p>
+          <Link
+            href="/getting-started/intro"
+            title="Nx documentation"
+            className="mt-2 flex items-center gap-2 text-sm text-slate-500 transition hover:text-slate-800 dark:hover:text-slate-400"
+            prefetch={false}
+          >
+            <span>Nx docs</span>
+            <ChevronRightIcon aria-hidden="true" className="h-3 w-3" />
+          </Link>
+        </div>
         <div>
           <div className="flex items-center gap-2">
             <svg
@@ -131,26 +151,6 @@ export function ContactLinks(): JSX.Element {
             <ArrowUpRightIcon aria-hidden="true" className="h-3 w-3" />
           </a>
         </div>
-        <div>
-          <div className="flex items-center gap-2">
-            <AcademicCapIcon aria-hidden="true" className="h-4 w-4" />
-            <h4 className="text-lg font-medium text-slate-700 dark:text-slate-300">
-              Documentation
-            </h4>
-          </div>
-          <p className="mt-2">
-            Get an overview of Nx's features, integrations, and how to use them.
-          </p>
-          <Link
-            href="/getting-started/intro"
-            title="Nx documentation"
-            className="mt-2 flex items-center gap-2 text-sm text-slate-500 transition hover:text-slate-800 dark:hover:text-slate-400"
-            prefetch={false}
-          >
-            <span>Nx docs</span>
-            <ChevronRightIcon aria-hidden="true" className="h-3 w-3" />
-          </Link>
-        </div>
         <div>
           <div className="flex items-center gap-2">
             <BuildingOffice2Icon aria-hidden="true" className="h-4 w-4" />
@@ -162,16 +162,14 @@ export function ContactLinks(): JSX.Element {
             Get to know the team behind Nx, Nx Cloud, Lerna and many other open
             source projects.
           </p>
-          <a
-            href="https://nx.app/company?utm_source=nx.dev"
-            rel="noreferrer"
-            target="_blank"
+          <Link
+            href="/company"
             title="Nx the company"
             className="mt-2 flex items-center gap-2 text-sm text-slate-500 transition hover:text-slate-800 dark:hover:text-slate-400"
           >
             <span>Nx the company</span>
-            <ArrowUpRightIcon aria-hidden="true" className="h-3 w-3" />
-          </a>
+            <ChevronRightIcon aria-hidden="true" className="h-3 w-3" />
+          </Link>
         </div>
       </div>
     </article>
diff --git a/nx-dev/ui-contact/src/lib/how-can-we-help.tsx b/nx-dev/ui-contact/src/lib/how-can-we-help.tsx
index 786173b4c5463..5f4a136c9f7ea 100644
--- a/nx-dev/ui-contact/src/lib/how-can-we-help.tsx
+++ b/nx-dev/ui-contact/src/lib/how-can-we-help.tsx
@@ -4,6 +4,7 @@ import {
   ChatBubbleLeftRightIcon,
   ChevronRightIcon,
 } from '@heroicons/react/24/outline';
+import { NxCloudIcon } from '@nx/nx-dev/ui-icons';
 
 export function HowCanWeHelp(): JSX.Element {
   return (
@@ -51,7 +52,7 @@ export function HowCanWeHelp(): JSX.Element {
             </div>
             <p className="mt-4">
               Contact our developer productivity engineers for demos, onboarding
-              assistance, and technical product questions.
+              and product questions.
             </p>
             <ButtonLink
               href="/contact/engineering"
@@ -63,7 +64,7 @@ export function HowCanWeHelp(): JSX.Element {
               Reach out to engineers
             </ButtonLink>
           </section>
-          <section className="rounded-xl border border-slate-200 bg-slate-50/20 p-8 md:col-span-2 dark:border-slate-800/40 dark:bg-slate-800/60">
+          <section className="rounded-xl border border-slate-200 bg-slate-50/20 p-8 dark:border-slate-800/40 dark:bg-slate-800/60">
             <div className="flex items-center gap-2">
               <ChatBubbleLeftRightIcon
                 aria-hidden="true"
@@ -91,6 +92,31 @@ export function HowCanWeHelp(): JSX.Element {
               <ArrowUpRightIcon aria-hidden="true" className="h-3 w-3" />
             </ButtonLink>
           </section>
+          <section className="rounded-xl border border-slate-200 bg-slate-50/20 p-8 dark:border-slate-800/40 dark:bg-slate-800/60">
+            <div className="flex items-center gap-2">
+              <NxCloudIcon aria-hidden="true" className="h-5 w-5 shrink-0" />
+              <h3 className="text-lg font-medium text-slate-700 dark:text-slate-300">
+                Nx Cloud support
+              </h3>
+            </div>
+            <p className="mt-4">
+              If you have questions about using Nx Cloud, need help connecting
+              your repository, or have questions about billing, log in to your
+              account and contact support.
+            </p>
+            <ButtonLink
+              href="https://cloud.nx.app"
+              variant="secondary"
+              size="default"
+              title="Sign in to Nx Cloud"
+              target="_blank"
+              rel="nofollow"
+              className="mt-6"
+            >
+              <span>Sign in to Nx Cloud</span>
+              <ArrowUpRightIcon aria-hidden="true" className="h-3 w-3" />
+            </ButtonLink>
+          </section>
         </div>
       </div>
     </section>
diff --git a/nx-dev/ui-contact/src/lib/talk-to-our-engineering-team.tsx b/nx-dev/ui-contact/src/lib/talk-to-our-engineering-team.tsx
index 50722feedc3f1..38c19106fefa6 100644
--- a/nx-dev/ui-contact/src/lib/talk-to-our-engineering-team.tsx
+++ b/nx-dev/ui-contact/src/lib/talk-to-our-engineering-team.tsx
@@ -13,8 +13,8 @@ export function TalkToOurEngineeringTeam(): JSX.Element {
         <div className="mx-auto mt-16 grid max-w-5xl grid-cols-1 gap-12 md:grid-cols-2 lg:gap-8">
           <section className="mt-4">
             <p className="text-lg leading-relaxed">
-              Contact our Developer Productivity Engineers for demos, onboarding
-              assistance, and technical support. Share your requirements and
+              Contact our Developer Productivity Engineers for demos,
+              onboarding, and product questions. Share your requirements and
               challenges with us, and{' '}
               <span className="font-medium">
                 we will help you utilize Nx Enterprise to enhance your