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-contact/.babelrc

@@ -0,0 +1,12 @@
+{
+  "presets": [
+    [
+      "@nx/react/babel",
+      {
+        "runtime": "automatic",
+        "useBuiltIns": "usage"
+      }
+    ]
+  ],
+  "plugins": []
+}

nx-dev/ui-contact/.eslintrc.json

@@ -0,0 +1,18 @@
+{
+  "extends": ["plugin:@nx/react", "../../.eslintrc.json"],
+  "ignorePatterns": ["!**/*"],
+  "overrides": [
+    {
+      "files": ["*.ts", "*.tsx", "*.js", "*.jsx"],
+      "rules": {}
+    },
+    {
+      "files": ["*.ts", "*.tsx"],
+      "rules": {}
+    },
+    {
+      "files": ["*.js", "*.jsx"],
+      "rules": {}
+    }
+  ]
+}

nx-dev/ui-contact/README.md

@@ -0,0 +1,7 @@
+# nx-dev-ui-contact
+
+This library was generated with [Nx](https://nx.dev).
+
+## Running unit tests
+
+Run `nx test nx-dev-ui-contact` to execute the unit tests via [Jest](https://jestjs.io).

nx-dev/ui-contact/jest.config.ts

@@ -0,0 +1,10 @@
+/* eslint-disable */
+export default {
+  displayName: 'nx-dev-ui-contact',
+  transform: {
+    '^.+\\.[tj]sx?$': 'babel-jest',
+  },
+  moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx'],
+  coverageDirectory: '../../coverage/nx-dev/ui-contact',
+  preset: '../../jest.preset.js',
+};

nx-dev/ui-contact/project.json

@@ -0,0 +1,11 @@
+{
+  "name": "nx-dev-ui-contact",
+  "$schema": "../../node_modules/nx/schemas/project-schema.json",
+  "sourceRoot": "nx-dev/ui-contact/src",
+  "projectType": "library",
+  "tags": ["scope:nx-dev", "type:ui"],
+  "targets": {
+    "lint": {},
+    "test": {}
+  }
+}

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

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

nx-dev/ui-contact/src/lib/contact-links.tsx

@@ -0,0 +1,178 @@
+import {
+  AcademicCapIcon,
+  BuildingOffice2Icon,
+  EnvelopeIcon,
+} from '@heroicons/react/24/solid';
+import {
+  ArrowUpRightIcon,
+  ChevronRightIcon,
+} from '@heroicons/react/24/outline';
+import Link from 'next/link';
+
+export function ContactLinks(): JSX.Element {
+  return (
+    <article id="contact-links" className="mx-auto max-w-7xl px-6 lg:px-8">
+      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-12 lg:gap-8">
+        <div>
+          <div className="flex items-center gap-2">
+            <svg
+              aria-hidden="true"
+              fill="currentColor"
+              className="h-4 w-4"
+              role="img"
+              viewBox="0 0 24 24"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <title>GitHub</title>
+              <path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12" />
+            </svg>
+            <h4 className="text-lg text-slate-700 dark:text-slate-300 font-medium">
+              Contribute on GitHub
+            </h4>
+          </div>
+          <p className="mt-2">
+            Fill a bug report or want to contribute to the OSS products.
+          </p>
+          <a
+            href="https://github.com/nrwl/nx"
+            rel="noreferrer"
+            target="_blank"
+            title="Nx GitHub"
+            className="mt-2 text-sm text-slate-500 hover:text-slate-800 dark:hover:text-slate-400 transition flex items-center gap-2"
+          >
+            <span>Contribute on GitHub</span>
+            <ArrowUpRightIcon aria-hidden="true" className="w-3 h-3" />
+          </a>
+        </div>
+        <div>
+          <div className="flex items-center gap-2">
+            <svg
+              aria-hidden="true"
+              fill="currentColor"
+              className="h-4 w-4"
+              role="img"
+              viewBox="0 0 24 24"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <title>YouTube</title>
+              <path d="M23.498 6.186a3.016 3.016 0 0 0-2.122-2.136C19.505 3.545 12 3.545 12 3.545s-7.505 0-9.377.505A3.017 3.017 0 0 0 .502 6.186C0 8.07 0 12 0 12s0 3.93.502 5.814a3.016 3.016 0 0 0 2.122 2.136c1.871.505 9.376.505 9.376.505s7.505 0 9.377-.505a3.015 3.015 0 0 0 2.122-2.136C24 15.93 24 12 24 12s0-3.93-.502-5.814zM9.545 15.568V8.432L15.818 12l-6.273 3.568z" />
+            </svg>
+            <h4 className="text-lg text-slate-700 dark:text-slate-300 font-medium">
+              Livestreams on Youtube
+            </h4>
+          </div>
+          <p className="mt-2">
+            Get access to live Q&A sessions, podcasts and tutorials.
+          </p>
+          <a
+            href="https://www.youtube.com/@NxDevtools/videos?utm_source=nx.dev"
+            rel="noreferrer"
+            target="_blank"
+            title="Nx Youtube channel"
+            className="mt-2 text-sm text-slate-500 hover:text-slate-800 transition dark:hover:text-slate-400 flex items-center gap-2"
+          >
+            <span>Join the Nx Youtube channel</span>
+            <ArrowUpRightIcon aria-hidden="true" className="w-3 h-3" />
+          </a>
+        </div>
+        <div>
+          <div className="flex items-center gap-2">
+            <svg
+              aria-hidden="true"
+              fill="currentColor"
+              className="h-4 w-4"
+              role="img"
+              viewBox="0 0 24 24"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <title>X</title>
+              <path d="M18.901 1.153h3.68l-8.04 9.19L24 22.846h-7.406l-5.8-7.584-6.638 7.584H.474l8.6-9.83L0 1.154h7.594l5.243 6.932ZM17.61 20.644h2.039L6.486 3.24H4.298Z" />
+            </svg>
+            <h4 className="text-lg text-slate-700 dark:text-slate-300 font-medium">
+              Follow us on X
+            </h4>
+          </div>
+          <p className="mt-2">
+            Stay up to date on everything about Nx like news, conferences,
+            features, releases and more.
+          </p>
+          <a
+            href="https://go.nx.dev/community"
+            rel="noreferrer"
+            target="_blank"
+            title="Nx Official X account"
+            className="mt-2 text-sm text-slate-500 hover:text-slate-800 transition dark:hover:text-slate-400 flex items-center gap-2"
+          >
+            <span>
+              Follow <span className="font-medium">@nxdevtools</span>
+            </span>
+            <ArrowUpRightIcon aria-hidden="true" className="w-3 h-3" />
+          </a>
+        </div>
+        <div>
+          <div className="flex items-center gap-2">
+            <EnvelopeIcon aria-hidden="true" className="w-4 h-4" />
+            <h4 className="text-lg text-slate-700 dark:text-slate-300 font-medium">
+              Nx monthly newsletter
+            </h4>
+          </div>
+          <p className="mt-2">
+            News about Nx releases, features, new plugins, resources straight to
+            your inbox.
+          </p>
+          <a
+            href="https://go.nx.dev/community"
+            rel="noreferrer"
+            target="_blank"
+            title="Nx monthly newsletter"
+            className="mt-2 text-sm text-slate-500 hover:text-slate-800 transition dark:hover:text-slate-400 flex items-center gap-2"
+          >
+            <span>Subscribe to Nx newsletter</span>
+            <ArrowUpRightIcon aria-hidden="true" className="w-3 h-3" />
+          </a>
+        </div>
+        <div>
+          <div className="flex items-center gap-2">
+            <AcademicCapIcon aria-hidden="true" className="h-4 w-4" />
+            <h4 className="text-lg text-slate-700 dark:text-slate-300 font-medium">
+              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 text-sm text-slate-500 hover:text-slate-800 transition dark:hover:text-slate-400 flex items-center gap-2"
+          >
+            <span>Nx docs</span>
+            <ChevronRightIcon aria-hidden="true" className="w-3 h-3" />
+          </Link>
+        </div>
+        <div>
+          <div className="flex items-center gap-2">
+            <BuildingOffice2Icon aria-hidden="true" className="h-4 w-4" />
+            <h4 className="text-lg text-slate-700 dark:text-slate-300 font-medium">
+              Company
+            </h4>
+          </div>
+          <p className="mt-2">
+            Get to know the team behind Nx, Nx Cloud, Lerna and many other open
+            source projects.
+          </p>
+          <a
+            href="https://go.nx.dev/community"
+            rel="noreferrer"
+            target="_blank"
+            title="Nx the company"
+            className="mt-2 text-sm text-slate-500 hover:text-slate-800 transition dark:hover:text-slate-400 flex items-center gap-2"
+          >
+            <span>Nx the company</span>
+            <ArrowUpRightIcon aria-hidden="true" className="w-3 h-3" />
+          </a>
+        </div>
+      </div>
+    </article>
+  );
+}