feat(nx-dev): add support section on contact page

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.
nrwl · Aug 14, 2024 · 9e7f465 · 9e7f465
1 parent 6d83ae2
commit 9e7f465
Show file tree

Hide file tree

Showing 4 changed files with 57 additions and 36 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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