feat(nx-dev): add new Contact pages

This commit adds a new 'Contact' section to the website. It includes various subpages designed to assist and guide users looking to get in touch. Users can now seek help through a convenient form, connect with the team in multiple ways, or reach out to the sales team directly.

nx-dev/nx-dev/pages/_app.tsx

@@ -112,6 +112,13 @@ export default function CustomApp({
         strategy="afterInteractive"
         src="https://js.hs-scripts.com/2757427.js"
       />
+      {/* HubSpot FORMS Embed Code */}
+      <Script
+        type="text/javascript"
+        id="hs-forms-script-loader"
+        strategy="afterInteractive"
+        src="//js.hsforms.net/forms/v2.js"
+      />
       {/* Hotjar Analytics */}
       <Script
         id="hotjar-script-loader"

nx-dev/nx-dev/pages/contact/index.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 { ContactLinks, HowCanWeHelp } from '@nx/nx-dev/ui-contact';
+
+export function Contact(): JSX.Element {
+  const router = useRouter();
+
+  return (
+    <>
+      <NextSeo
+        title="Contact us"
+        description="There are many ways you can connect with the open-source Nx community. Let's connect together!"
+        openGraph={{
+          url: 'https://nx.dev' + router.asPath,
+          title: 'Contact us',
+          description:
+            "There are many ways you can connect with the open-source Nx community. Let's connect together!",
+          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>
+          <HowCanWeHelp />
+        </div>
+        <div className="mt-32">
+          <ContactLinks />
+        </div>
+      </main>
+      <Footer />
+    </>
+  );
+}
+
+export default Contact;

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

@@ -0,0 +1,43 @@
+import { useRouter } from 'next/router';
+import { NextSeo } from 'next-seo';
+import { Footer, Header } from '@nx/nx-dev/ui-common';
+import { TalkToOurSalesTeam } from '@nx/nx-dev/ui-contact';
+
+export function ContactSales(): JSX.Element {
+  const router = useRouter();
+
+  return (
+    <>
+      <NextSeo
+        title="Talk to our Sales team"
+        description="We’re here to help you find the right plan and pricing for your company constraints and requirements. We will talk about how Nx Cloud Enterprise works 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 company constraints and requirements. We will talk about how Nx Cloud Enterprise works for your organization.',
+          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>
+          <TalkToOurSalesTeam />
+        </div>
+      </main>
+      <Footer />
+    </>
+  );
+}
+
+export default ContactSales;

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

@@ -10,7 +10,6 @@ export * from './lib/nx-cloud-icon';
 export * from './lib/footer';
 export * from './lib/sidebar-container';
 export * from './lib/sidebar';
-export * from './lib/nx-users-showcase';
 export * from './lib/plugin-card';
 export * from './lib/testimonial-card';
 export * from './lib/typography';

nx-dev/ui-common/src/lib/documentation-header.tsx

@@ -252,8 +252,7 @@ export function DocumentationHeader({
               {/*</span>*/}Launch Nx
             </Link>
             <Link
-              href="https://nx.app/enterprise?utm_source=nx.dev&utm_medium=header-menu"
-              target="_blank"
+              href="/contact"
               title="Contact us"
               className="hidden px-3 py-2 font-medium leading-tight hover:text-blue-500 dark:text-slate-200 dark:hover:text-sky-500 md:inline-flex"
             >

nx-dev/ui-common/src/lib/header.tsx

@@ -20,11 +20,6 @@ export function Header(): JSX.Element {
       description: 'Learn how to efficiently use Nx on CI',
       href: '/ci/intro/ci-with-nx',
     },
-    // {
-    //   name: 'Concepts',
-    //   description: 'What to know more about how Nx is working?',
-    //   href: '/concepts',
-    // },
     {
       name: 'Features',
       description:
@@ -84,7 +79,7 @@ export function Header(): JSX.Element {
     {
       name: 'Contact us',
       description: 'Give us a call!',
-      href: 'https://nx.app/enterprise?utm_source=nx.dev&utm_medium=header-menu',
+      href: '/contact',
     },
   ];
 
@@ -197,14 +192,13 @@ export function Header(): JSX.Element {
               {/*  <span className="relative inline-flex h-3 w-3 rounded-full bg-blue-500 dark:bg-sky-500" />*/}
               {/*</span>*/}Launch Nx
             </Link>
-            <a
-              href="https://nx.app/enterprise?utm_source=nx.dev&utm_medium=header-menu"
-              target="_blank"
+            <Link
+              href="/contact"
               title="Contact us"
               className="hidden px-3 py-2 font-medium leading-tight hover:text-blue-500 dark:text-slate-200 dark:hover:text-sky-500 md:inline-flex"
             >
               Contact us
-            </a>
+            </Link>
           </nav>
         </div>
         <div className="flex-shrink-0 text-sm">