feat(nx-dev): powerpack landing page

nx-dev/nx-dev/app/powerpack/page.tsx

@@ -0,0 +1,60 @@
+import {
+  CustomCacheStorage,
+  CodeOwners,
+  Conformance,
+  Hero,
+  PowerPackProcess,
+} from '@nx/nx-dev/ui-powerpack';
+
+import { CallToAction, DefaultLayout } from '@nx/nx-dev/ui-common';
+
+import type { Metadata } from 'next';
+
+export const metadata: Metadata = {
+  title: 'Nx PowerPack',
+  description:
+    'Nx PowerPack is a suite of advanced tools designed for enterprise use cases.',
+  openGraph: {
+    url: 'https://nx.dev/powerpack',
+    title: 'Nx PowerPack',
+    description:
+      'Nx PowerPack is a suite of advanced tools designed for enterprise use cases.',
+    images: [
+      {
+        url: 'https://nx.dev/socials/nx-powerpack-media.png',
+        width: 800,
+        height: 421,
+        alt: 'Nx PowerPack: Advanced tools for enterprises',
+        type: 'image/jpeg',
+      },
+    ],
+    siteName: 'NxDev',
+    type: 'website',
+  },
+};
+
+export default function NxPowerPackPage(): JSX.Element {
+  return (
+    <DefaultLayout>
+      <Hero />
+
+      <div className="mt-32 scroll-mt-32 lg:mt-56" id="features">
+        <CustomCacheStorage />
+      </div>
+      <div className="mt-32 lg:mt-56">
+        <CodeOwners />
+      </div>
+      <div className="mt-32 lg:mt-56">
+        <Conformance />
+      </div>
+
+      <div className="mt-32 lg:mt-56">
+        <PowerPackProcess />
+        {/* <CallToAction
+          mainActionTitle="Get started with Nx PowerPack"
+          mainActionLink="/docs/powerpack/getting-started"
+        /> */}
+      </div>
+    </DefaultLayout>
+  );
+}

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

@@ -27,7 +27,7 @@ export { resourceMenuItems } from './lib/headers/menu-items';
 export { solutionsMenuItems } from './lib/headers/menu-items';
 export { eventItems } from './lib/headers/menu-items';
 export { learnItems } from './lib/headers/menu-items';
-export { plans } from './lib/headers/menu-items';
+export { solutions as plans } from './lib/headers/menu-items';
 export { featuresItems } from './lib/headers/menu-items';
 export { DefaultMenuItem } from './lib/headers/default-menu-item';
 export { MobileMenuItem } from './lib/headers/mobile-menu-item';

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

@@ -14,7 +14,7 @@ import {
   eventItems,
   featuresItems,
   learnItems,
-  plans,
+  solutions,
   resourceMenuItems,
   solutionsMenuItems,
 } from './menu-items';
@@ -431,7 +431,7 @@ export function Header(): JSX.Element {
                                   />
                                 </Disclosure.Button>
                                 <Disclosure.Panel as="ul" className="space-y-1">
-                                  {plans.map((item) => (
+                                  {solutions.map((item) => (
                                     <MobileMenuItem
                                       key={item.name}
                                       item={item}

nx-dev/ui-common/src/lib/headers/menu-items.ts

@@ -103,7 +103,7 @@ export const featuresItems: MenuItem[] = [
     isHighlight: true,
   },
 ];
-export const plans: MenuItem[] = [
+export const solutions: MenuItem[] = [
   {
     name: 'Nx Cloud',
     description:
@@ -113,6 +113,15 @@ export const plans: MenuItem[] = [
     isNew: false,
     isHighlight: false,
   },
+  {
+    name: 'Nx Powerpack',
+    description:
+      'Supercharge Nx with enterprise features such as custom remote caching, ownership tools, and more!',
+    href: '/powerpack',
+    icon: null,
+    isNew: false,
+    isHighlight: false,
+  },
   {
     name: 'Nx Enterprise',
     description:
@@ -261,7 +270,7 @@ export const companyItems: MenuItem[] = [
   },
 ];
 export const solutionsMenuItems = {
-  'Helping you grow': plans,
+  'Helping you grow': solutions,
   // 'Use cases': useCaseItems
 };
 export const resourceMenuItems = {

nx-dev/ui-powerpack/.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-powerpack/README.md

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

nx-dev/ui-powerpack/project.json

@@ -0,0 +1,9 @@
+{
+  "name": "ui-powerpack",
+  "$schema": "../../node_modules/nx/schemas/project-schema.json",
+  "sourceRoot": "nx-dev/ui-powerpack/src",
+  "projectType": "library",
+  "tags": [],
+  "// targets": "to see all targets run: nx show project ui-powerpack --web",
+  "targets": {}
+}

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

@@ -0,0 +1,9 @@
+// Use this file to export React client components (e.g. those with 'use client' directive) or other non-server utilities
+
+export * from './lib/hero';
+export * from './lib/layout';
+export * from './lib/custom-cache-storage';
+export * from './lib/code-owners';
+export * from './lib/conformance';
+export * from './lib/power-pack-process';
+export * from './lib/powerpack-pricing';

nx-dev/ui-powerpack/src/lib/code-owners.tsx

@@ -0,0 +1,47 @@
+'use client';
+
+import {
+  ButtonLink,
+  SectionHeading,
+  Strong,
+  TextLink,
+} from '@nx/nx-dev/ui-common';
+
+export function CodeOwners(): JSX.Element {
+  return (
+    <article className="mx-auto max-w-7xl px-6 lg:px-8">
+      <div className="max-w-5xl">
+        <SectionHeading
+          as="h2"
+          variant="title"
+          id="codeowners-on-steroids"
+          className="scroll-mt-24"
+        >
+          CodeOwners for monorepos
+        </SectionHeading>
+        <SectionHeading as="p" variant="subtitle" className="mt-6">
+          Define and manage ownership where it matters—
+          <Strong>at the project level</Strong>. Common VCS providers require
+          folder-based ownership definitions, though. Nx Powerpack CodeOwners
+          bridges this gap by{' '}
+          <Strong>
+            automatically tracking changes and syncing ownership data
+          </Strong>{' '}
+          with GitHub, GitLab, or Bitbucket-specific CODEOWNERS files. This
+          ensures clear responsibilities and enables efficient collaboration
+          across large-scale projects.
+        </SectionHeading>
+        <div className="mt-10 flex gap-x-6">
+          <ButtonLink
+            href="/some-docs-page"
+            title="Learn more about CodeOwners"
+            variant="primary"
+            size="large"
+          >
+            Learn more about CodeOwners
+          </ButtonLink>
+        </div>
+      </div>
+    </article>
+  );
+}

nx-dev/ui-powerpack/src/lib/conformance.tsx

@@ -0,0 +1,51 @@
+import {
+  ButtonLink,
+  SectionHeading,
+  Strong,
+  TextLink,
+} from '@nx/nx-dev/ui-common';
+
+export function Conformance(): JSX.Element {
+  return (
+    <article className="mx-auto max-w-7xl px-6 lg:px-8">
+      <div className="max-w-5xl">
+        <SectionHeading
+          as="h2"
+          variant="title"
+          id="codeowners-on-steroids"
+          className="scroll-mt-24"
+        >
+          Scale more confidently with workspace conformance
+        </SectionHeading>
+        <SectionHeading as="p" variant="subtitle" className="mt-6">
+          Ensuring consistent code quality and long-term maintainability across
+          large teams is critical. Nx Powerpack allows you to{' '}
+          <Strong>
+            define and run conformance rules throughout your workspace
+          </Strong>
+          , leveraging built-in rules or{' '}
+          <Strong>
+            creating your own to ensure compliance with organizational
+            standards.
+          </Strong>{' '}
+          With Nx Cloud Enterprise Edition, you can{' '}
+          <Strong>
+            upload your custom rules to your Nx Cloud organization
+          </Strong>{' '}
+          and automatically enforce them across multiple repositories and
+          workspaces, regardless of the tech stack.
+        </SectionHeading>
+        <div className="mt-10 flex gap-x-6">
+          <ButtonLink
+            href="/some-docs-page"
+            title="Learn how to set up conformance rules"
+            variant="primary"
+            size="large"
+          >
+            Learn how to use conformance rules
+          </ButtonLink>
+        </div>
+      </div>
+    </article>
+  );
+}

nx-dev/ui-powerpack/src/lib/custom-cache-storage.tsx

@@ -0,0 +1,38 @@
+'use client';
+
+import { ButtonLink, SectionHeading, Strong } from '@nx/nx-dev/ui-common';
+
+export function CustomCacheStorage(): JSX.Element {
+  return (
+    <article className="mx-auto max-w-7xl px-6 lg:px-8">
+      <div className="max-w-5xl">
+        <SectionHeading
+          as="h2"
+          variant="title"
+          id="custom-cache-storage"
+          className="scroll-mt-24"
+        >
+          Custom Remote Cache Storage
+        </SectionHeading>
+        <SectionHeading as="p" variant="subtitle" className="mt-6">
+          Enjoy the{' '}
+          <Strong>flexibility of managing your remote cache location</Strong> on
+          S3 or custom network drives. With Nx Powerpack's custom remote caching
+          feature, you can configure Nx to write cache data directly to your own
+          AWS S3 buckets or network drives, whether your infrastructure is
+          already in place or you need more control over your caching location.
+        </SectionHeading>
+        <div className="mt-10 flex gap-x-6">
+          <ButtonLink
+            href="/powerpack?utm_source=powerpack&utm_medium=website&utm_campaign=powerpack_links&utm_content=cta_custom_cache_storage"
+            title="Learn more about Nx Powerpack"
+            variant="primary"
+            size="large"
+          >
+            Learn more about Custom Cache Storage
+          </ButtonLink>
+        </div>
+      </div>
+    </article>
+  );
+}

nx-dev/ui-powerpack/src/lib/hero.tsx

@@ -0,0 +1,40 @@
+'use client';
+import { SectionHeading } from '@nx/nx-dev/ui-common';
+import { PowerpackPricing } from './powerpack-pricing';
+
+export function Hero(): JSX.Element {
+  return (
+    <section className="mx-auto max-w-7xl px-6 py-16 lg:px-8">
+      <div className="grid grid-cols-1 gap-8 lg:grid-cols-3">
+        <div className="lg:col-span-2">
+          <div className="mb-4">
+            <SectionHeading
+              as="h1"
+              variant="display"
+              className="text-4xl sm:text-5xl md:text-6xl"
+            >
+              Nx Powerpack
+            </SectionHeading>
+          </div>
+          <SectionHeading as="h2" variant="subtitle" className="mb-8">
+            Enterprise-grade features for your Nx workspace
+          </SectionHeading>
+          <SectionHeading
+            as="p"
+            variant="subtitle"
+            className="mx-auto mt-6 max-w-4xl"
+          >
+            Nx Powerpack is a suite of paid extensions for Nx specifically
+            designed for enterprises. Built and supported by the Nx core team,
+            Powerpack provides flexibility of choice with custom cache locations
+            and features designed to enhance maintainability and scale
+            development, ensuring your teams can operate efficiently at scale.
+          </SectionHeading>
+        </div>
+        <div className="lg:col-span-1">
+          <PowerpackPricing />
+        </div>
+      </div>
+    </section>
+  );
+}

nx-dev/ui-powerpack/src/lib/layout.tsx

@@ -0,0 +1,25 @@
+export function Layout({
+  children,
+}: {
+  children: React.ReactNode;
+}): JSX.Element {
+  return (
+    <div>
+      <div className="relative isolate pt-14">
+        <div
+          className="absolute inset-x-0 -top-40 -z-10 h-full transform-gpu overflow-hidden blur-3xl sm:-top-80"
+          aria-hidden="true"
+        >
+          <div
+            className="relative left-[calc(50%-11rem)] aspect-[1155/678] w-[36.125rem] -translate-x-1/2 rotate-[30deg] bg-gradient-to-tr from-[#ff80b5] to-[#9089fc] opacity-20 sm:left-[calc(50%-30rem)] sm:w-[72.1875rem]"
+            style={{
+              clipPath:
+                'polygon(74.1% 44.1%, 100% 61.6%, 97.5% 26.9%, 85.5% 0.1%, 80.7% 2%, 72.5% 32.5%, 60.2% 62.4%, 52.4% 68.1%, 47.5% 58.3%, 45.2% 34.5%, 27.5% 76.7%, 0.1% 64.9%, 17.9% 100%, 27.6% 76.8%, 76.1% 97.7%, 74.1% 44.1%)',
+            }}
+          />
+        </div>
+        <main className="py-24 sm:py-32">{children}</main>
+      </div>
+    </div>
+  );
+}