fix(nx-dev): Update Hubspot style and add CTA on sales page

nrwl · Jan 9, 2025 · f06fc5b · f06fc5b
1 parent 26b8f88
commit f06fc5b
Show file tree

Hide file tree

Showing 5 changed files with 32 additions and 17 deletions.
diff --git a/nx-dev/nx-dev/pages/whitepaper-fast-ci.tsx b/nx-dev/nx-dev/pages/whitepaper-fast-ci.tsx
@@ -62,8 +62,8 @@ export function WhitePaperFastCI(): JSX.Element {
                   Up to 70% Faster Builds for Monorepos
                 </SectionHeading>
               </div>
-              <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">
+              <div className="mx-auto mt-16 flex max-w-5xl flex-col gap-12 md:flex-row lg:gap-8">
+                <section className="mt-4 flex-1">
                   <p className="text-lg leading-relaxed">
                     The world’s moving fast, and getting products to market
                     feels like a race that keeps speeding up. Monorepos are
@@ -123,7 +123,7 @@ export function WhitePaperFastCI(): JSX.Element {
                   <div className="py-10">
                     <a
                       target="_blank"
-                      className="mt-4 text-lg font-bold leading-relaxed hover:underline"
+                      className="mt-4 text-lg font-bold leading-relaxed underline"
                       href="/assets/enterprise/Fast-CI-Whitepaper.pdf"
                     >
                       View whitepaper
@@ -212,7 +212,7 @@ export function WhitePaperFastCI(): JSX.Element {
                     </div>
                   </div>
                 </section>
-                <section className="rounded-xl border border-slate-200 bg-white p-8 dark:border-slate-800/40">
+                <section className="flex-1 rounded-xl border border-slate-200 bg-white p-8 md:self-start dark:border-slate-800/40">
                   <HubspotForm
                     region="na1"
                     portalId="2757427"

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
@@ -21,8 +21,8 @@ export function TalkToOurEngineeringTeam(): ReactElement {
             Talk to our engineering team
           </SectionHeading>
         </div>
-        <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">
+        <div className="mx-auto mt-16 flex max-w-5xl flex-col gap-12 md:flex-row lg:gap-8">
+          <section className="mt-4 flex-1">
             <p className="text-lg leading-relaxed">
               Contact our Developer Productivity Engineers for demos,
               onboarding, and product questions. Share your requirements and
@@ -118,7 +118,7 @@ export function TalkToOurEngineeringTeam(): ReactElement {
               </div>
             </div>
           </section>
-          <section className="rounded-xl border border-slate-200 bg-white p-8 dark:border-slate-800/40">
+          <section className="flex-1 self-start rounded-xl border border-slate-200 bg-white p-8 dark:border-slate-800/40">
             <HubspotForm
               region="na1"
               portalId="2757427"

diff --git a/nx-dev/ui-contact/src/lib/talk-to-our-team.tsx b/nx-dev/ui-contact/src/lib/talk-to-our-team.tsx
@@ -1,3 +1,4 @@
+import Link from 'next/link';
 import { SectionHeading, HubspotForm } from '@nx/nx-dev/ui-common';
 import { ReactElement } from 'react';
 import {
@@ -11,6 +12,7 @@ import {
   StorybookIcon,
   VmwareIcon,
 } from '@nx/nx-dev/ui-icons';
+import { sendCustomEvent } from '@nx/nx-dev/feature-analytics';
 
 export function TalkToOurTeam(): ReactElement {
   return (
@@ -21,8 +23,8 @@ export function TalkToOurTeam(): ReactElement {
             Talk to our team
           </SectionHeading>
         </div>
-        <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">
+        <div className="mx-auto mt-16 flex max-w-5xl flex-col gap-12 md:flex-row lg:gap-8">
+          <section className="mt-4 flex-1">
             <p className="text-lg leading-relaxed">
               Whether you’re scaling your team, optimizing CI pipelines, or
               exploring the full potential of Nx, we’re here to help. Reach out
@@ -122,7 +124,7 @@ export function TalkToOurTeam(): ReactElement {
               </div>
             </div>
           </section>
-          <section className="rounded-xl border border-slate-200 bg-white p-8 dark:border-slate-800/40">
+          <section className="w-full flex-1 rounded-xl border border-slate-200 bg-white p-8 md:self-start dark:border-slate-800/40">
             <HubspotForm
               region="na1"
               portalId="2757427"
@@ -132,6 +134,19 @@ export function TalkToOurTeam(): ReactElement {
             />
           </section>
         </div>
+        <p className="mt-6 text-center italic">
+          <Link
+            href="/enterprise/trial"
+            title="Talk to the team"
+            className="font-semibold underline"
+            prefetch={false}
+            onClick={() =>
+              sendCustomEvent('contact-team', 'talk-to-out-team-cta', 'contact')
+            }
+          >
+            Reach out to our team
+          </Link>{' '}
+        </p>
       </div>
     </section>
   );

diff --git a/nx-dev/ui-enterprise/src/lib/trial-nx-enterprise.tsx b/nx-dev/ui-enterprise/src/lib/trial-nx-enterprise.tsx
@@ -22,8 +22,8 @@ export function TrialNxEnterprise(): ReactElement {
             Nx Enterprise
           </SectionHeading>
         </div>
-        <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">
+        <div className="mx-auto mt-16 flex max-w-5xl flex-col gap-12 md:flex-row lg:gap-8">
+          <section className="mt-4 flex-1">
             <p className="text-lg leading-relaxed">
               Unlock the full potential of Nx Enterprise with a hands-on guided
               trial. Experience how our tools and expert support can transform
@@ -72,7 +72,7 @@ export function TrialNxEnterprise(): ReactElement {
             <div className="py-10">
               <a
                 target="_blank"
-                className="mt-4 text-lg font-bold leading-relaxed hover:underline"
+                className="mt-4 text-lg font-bold leading-relaxed underline"
                 href="/assets/enterprise/Nx-Enterprise-POV.pdf"
               >
                 View PDF
@@ -162,7 +162,7 @@ export function TrialNxEnterprise(): ReactElement {
               </div>
             </div>
           </section>
-          <section className="rounded-xl border border-slate-200 bg-white p-8 dark:border-slate-800/40">
+          <section className="flex-1 rounded-xl border border-slate-200 bg-white p-8 md:self-start dark:border-slate-800/40">
             <HubspotForm
               region="na1"
               portalId="2757427"

diff --git a/nx-dev/ui-powerpack/src/lib/trial-nx-powerpack.tsx b/nx-dev/ui-powerpack/src/lib/trial-nx-powerpack.tsx
@@ -22,8 +22,8 @@ export function TrialNxPowerpack(): ReactElement {
             Nx Powerpack
           </SectionHeading>
         </div>
-        <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">
+        <div className="mx-auto mt-16 flex max-w-5xl flex-col gap-12 md:flex-row lg:gap-8">
+          <section className="mt-4 flex-1">
             <p className="text-lg leading-relaxed">
               Experience faster, more secure caching for your monorepo. Nx
               Powerpack helps you streamline builds and testing, enabling your
@@ -161,7 +161,7 @@ export function TrialNxPowerpack(): ReactElement {
               </div>
             </div>
           </section>
-          <section className="rounded-xl border border-slate-200 bg-white p-8 dark:border-slate-800/40">
+          <section className="flex-1 rounded-xl border border-slate-200 bg-white p-8 md:self-start dark:border-slate-800/40">
             <HubspotForm
               region="na1"
               portalId="2757427"