feat(nx-dev): add contact us button on hero home page

nrwl · Feb 15, 2024 · 2feb64b · 2feb64b
1 parent 88d346c
commit 2feb64b
Show file tree

Hide file tree

Showing 3 changed files with 15 additions and 34 deletions.
diff --git a/nx-dev/ui-common/src/lib/documentation-header.tsx b/nx-dev/ui-common/src/lib/documentation-header.tsx
@@ -254,10 +254,10 @@ export function DocumentationHeader({
             <a
               href="https://nx.app/enterprise?utm_source=nx.dev&utm_medium=header-menu"
               target="_blank"
-              title="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
+              Contact us
             </a>
           </nav>
         </div>

diff --git a/nx-dev/ui-common/src/lib/header.tsx b/nx-dev/ui-common/src/lib/header.tsx
@@ -82,9 +82,9 @@ export function Header(): JSX.Element {
       href: '/launch-nx',
     },
     {
-      name: 'Nx Enterprise',
-      description: 'Need help?',
-      href: 'https://nx.app/enterprise?utm_source=nx.dev',
+      name: 'Contact us',
+      description: 'Give us a call!',
+      href: 'https://nx.app/enterprise?utm_source=nx.dev&utm_medium=header-menu',
     },
   ];
 
@@ -200,10 +200,10 @@ export function Header(): JSX.Element {
             <a
               href="https://nx.app/enterprise?utm_source=nx.dev&utm_medium=header-menu"
               target="_blank"
-              title="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
+              Contact us
             </a>
           </nav>
         </div>

diff --git a/nx-dev/ui-home/src/lib/hero.tsx b/nx-dev/ui-home/src/lib/hero.tsx
@@ -4,10 +4,7 @@ import {
   ClipboardDocumentIcon,
 } from '@heroicons/react/24/outline';
 import { ButtonLink } from '@nx/nx-dev/ui-common';
-import Link from 'next/link';
-import React, { Fragment, useEffect, useState } from 'react';
-// @ts-ignore
-import { CopyToClipboard } from 'react-copy-to-clipboard';
+import { Fragment, useEffect, useState } from 'react';
 import { Transition } from '@headlessui/react';
 import { cx } from '@nx/nx-dev/ui-primitives';
 
@@ -153,30 +150,14 @@ export function Hero(): JSX.Element {
               Get started
             </ButtonLink>
 
-            <CopyToClipboard
-              text="npx create-nx-workspace@latest"
-              onCopy={() => {
-                setCopied(true);
-              }}
+            <ButtonLink
+              href="https://nx.app/enterprise?utm_source=nx.dev&utm_medium=hero"
+              variant="secondary"
+              size="large"
+              title="Contact us"
             >
-              <button
-                title="Create an Nx workspace"
-                className="group relative flex w-full items-center rounded-lg border border-slate-200 bg-white py-2 px-2 sm:px-6 text-sm sm:text-lg font-semibold leading-6 transition hover:bg-slate-100 focus:ring-2 focus:ring-offset-2 focus:ring-offset-white dark:border-slate-700 dark:bg-slate-800 dark:text-white dark:hover:bg-slate-700 sm:w-auto"
-              >
-                <span className="absolute top-1 right-1 flex opacity-0 transition-opacity group-hover:opacity-100">
-                  {copied ? (
-                    <ClipboardDocumentCheckIcon className="h-4 w-4" />
-                  ) : (
-                    <ClipboardDocumentIcon className="h-4 w-4" />
-                  )}
-                </span>
-                <ChevronRightIcon
-                  aria-hidden="true"
-                  className="font-input-mono sm:mr-2 h-5 w-5 text-blue-500 dark:text-sky-500"
-                />
-                npx create-nx-workspace
-              </button>
-            </CopyToClipboard>
+              Contact us
+            </ButtonLink>
           </div>
           <div className="mt-4 flex gap-2 text-md items-center justify-center italic">
             Built with