feat(nx-dev): add engineering team contact page (#26293)

nx-dev/nx-dev/pages/contact/engineering.tsx

@@ -0,0 +1,46 @@
+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';
+
+export function EngineeringTeam(): JSX.Element {
+  const router = useRouter();
+
+  return (
+    <>
+      <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."
+        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.",
+          images: [
+            {
+              url: 'https://nx.dev/socials/nx-media.png',
+              width: 800,
+              height: 421,
+              alt: 'Nx: Smart Monorepos · Fast CI',
+              type: 'image/jpeg',
+            },
+          ],
+          siteName: 'NxDev',
+          type: 'website',
+        }}
+      />
+      <Header />
+      <main id="main" role="main" className="py-24 lg:py-32">
+        <div>
+          <TalkToOurEngineeringTeam />
+        </div>
+      </main>
+      <Footer />
+    </>
+  );
+}
+
+export default EngineeringTeam;

nx-dev/nx-dev/pages/contact/sales.tsx

@@ -10,12 +10,12 @@ export function ContactSales(): JSX.Element {
     <>
       <NextSeo
         title="Talk to our Sales team"
-        description="We’re here to help you find the right plan and pricing for your requirements. We can talk about how Nx Cloud Enterprise helps you drive better business outcomes."
+        description="We’re here to help you find the right plan and pricing for your needs and discuss how Nx Cloud Enterprise can drive better business outcomes for your organization."
         openGraph={{
           url: 'https://nx.dev' + router.asPath,
           title: 'Talk to our Sales team',
           description:
-            'We’re here to help you find the right plan and pricing for your requirements. We can talk about how Nx Cloud Enterprise helps you drive better business outcomes.',
+            'We’re here to help you find the right plan and pricing for your needs and discuss how Nx Cloud Enterprise can drive better business outcomes for your organization.',
           images: [
             {
               url: 'https://nx.dev/socials/nx-media.png',

nx-dev/ui-contact/src/index.ts

@@ -1,3 +1,4 @@
 export * from './lib/contact-links';
 export * from './lib/how-can-we-help';
 export * from './lib/talk-to-our-sales-team';
+export * from './lib/talk-to-our-engineering-team';

nx-dev/ui-contact/src/lib/how-can-we-help.tsx

@@ -2,7 +2,7 @@ import { ButtonLink, SectionHeading } from '@nx/nx-dev/ui-common';
 import {
   ArrowUpRightIcon,
   ChatBubbleLeftRightIcon,
-  UsersIcon,
+  ChevronRightIcon,
 } from '@heroicons/react/24/outline';
 
 export function HowCanWeHelp(): JSX.Element {
@@ -14,53 +14,82 @@ export function HowCanWeHelp(): JSX.Element {
             How can we help?
           </SectionHeading>
         </div>
-        <div className="mx-auto mt-16 grid max-w-5xl grid-cols-1 gap-6 md:grid-cols-2 lg:gap-8">
+        <div className="mx-auto mt-16 grid max-w-5xl grid-cols-1 gap-4 md:grid-cols-2">
           <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
+              <ChevronRightIcon
                 aria-hidden="true"
                 className="h-5 w-5 shrink-0"
               />
-              <h3 className="text-lg font-medium text-slate-700 dark:text-slate-300">
-                Question about Nx
+              <h3 className="text-xl font-medium text-slate-700 dark:text-slate-300">
+                Sales
               </h3>
             </div>
             <p className="mt-4">
-              Ask a question, receive guidance, share ideas or simply leave
-              feedback about our products on the Discord channel.
+              Contact our sales team to discuss plans, expected usage,
+              certifications, organization constraints, and get the best pricing
+              for your team.
             </p>
             <ButtonLink
-              href="https://go.nx.dev/community"
-              variant="secondary"
+              href="/contact/sales"
+              variant="primary"
               size="default"
-              title="Join the community"
-              target="_blank"
-              rel="nofollow"
+              title="Talk to our sales team"
               className="mt-6"
             >
-              <span>Ask questions on Discord</span>
-              <ArrowUpRightIcon aria-hidden="true" className="h-3 w-3" />
+              Reach out to sales
             </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">
-              <UsersIcon aria-hidden="true" className="h-5 w-5 shrink-0" />
+              <ChevronRightIcon
+                aria-hidden="true"
+                className="h-5 w-5 shrink-0"
+              />
               <h3 className="text-xl font-medium text-slate-700 dark:text-slate-300">
-                Get in touch with our sales team
+                Engineers
               </h3>
             </div>
             <p className="mt-4">
-              Contact our sales and support teams for demos, onboarding
-              assistance, pricing or product questions.
+              Contact our developer productivity engineers team for demos,
+              onboarding assistance, and technical product questions.
             </p>
             <ButtonLink
-              href="/contact/sales"
+              href="/contact/engineering"
               variant="primary"
               size="default"
-              title="Talk to our sales team"
+              title="Talk to our engineering team"
               className="mt-6"
             >
-              Contact sales
+              Reach out to engineers
+            </ButtonLink>
+          </section>
+          <section className="col-span-2 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"
+                className="h-5 w-5 shrink-0"
+              />
+              <h3 className="text-lg font-medium text-slate-700 dark:text-slate-300">
+                Question about Nx
+              </h3>
+            </div>
+            <p className="mt-4">
+              Ask a question, receive guidance, share ideas or simply leave
+              feedback about our products on the Discord channel. A vibrant
+              community of Nx users will be able to help you.
+            </p>
+            <ButtonLink
+              href="https://go.nx.dev/community"
+              variant="secondary"
+              size="default"
+              title="Join the community"
+              target="_blank"
+              rel="nofollow"
+              className="mt-6"
+            >
+              <span>Ask questions on Discord</span>
+              <ArrowUpRightIcon aria-hidden="true" className="h-3 w-3" />
             </ButtonLink>
           </section>
         </div>