Cleaning up the grid by splitting it into sections.

package.json

@@ -39,5 +39,6 @@
     "prettier": "^2.8.7",
     "prettier-plugin-tailwindcss": "^0.2.6",
     "sharp": "^0.32.0"
-  }
+  },
+  "packageManager": "pnpm@9.1.4+sha512.9df9cf27c91715646c7d675d1c9c8e41f6fce88246f1318c1aa6a1ed1aeb3c4f032fcdf4ba63cc69c4fe6d634279176b5358727d8f2cc1e65b65f43ce2f8bfb0"
 }

src/components/NavList.jsx

@@ -3,30 +3,30 @@ import { useState } from 'react'
 import { Logo, LogoWithName } from './products/Logo'
 import { SwitcherDialog } from './products/SwitcherDialog'
 import { SwitcherPopover } from './products/SwitcherPopover'
-
-const menuItems = ['Create', 'Commerce', 'Utility', 'Dev Tools']
+import { productCategories } from './products/index'
 
 const NavList = () => {
-
-  const [active, setActive] = useState();
-
+  const [active, setActive] = useState()
 
   return (
     <div className="hidden cursor-pointer  gap-8 lg:flex">
-      {menuItems.map((item, index) => {
+      {productCategories.map((item, index) => {
         return (
-            <div className="hidden flex-col lg:flex" key={index}>
-              <SwitcherPopover menuItem={menuItems[index]}>
-                <Popover.Button className="-mx-4 -my-2 rounded-lg px-4 py-2 text-black dark:text-white" onClick={() => setActive(index)}>
-                  {item}
-                  {/* <Logo product={page.product} className="h-8 w-8 sm:hidden" />
+          <div className="hidden flex-col lg:flex" key={index}>
+            <SwitcherPopover menuItem={productCategories[index]}>
+              <Popover.Button
+                className="-mx-4 -my-2 rounded-lg px-4 py-2 text-black dark:text-white"
+                onClick={() => setActive(index)}
+              >
+                {item}
+                {/* <Logo product={page.product} className="h-8 w-8 sm:hidden" />
                 <LogoWithName
                   product={page.product}
                   className="hidden sm:flex"
                 /> */}
-                </Popover.Button>
-              </SwitcherPopover>
-            </div>
+              </Popover.Button>
+            </SwitcherPopover>
+          </div>
         )
       })}
     </div>

src/components/products/Grid.jsx

@@ -3,18 +3,16 @@ import { LogoWithName } from './Logo'
 import { products as allProducts } from './index'
 import Link from 'next/link'
 
-export function Grid({
-  onClick,
-  withoutFallback,
-  className,
-  menuItem,
-  ...props
-}) {
+export function Grid({ onClick, withoutFallback, menuItem, ...props }) {
   console.log('menuItem', menuItem)
-  const products =  allProducts.filter(
-        (product) => menuItem === product.navigationMenuCatergory
-      )
-    
+  const products = allProducts.filter(
+    (product) => menuItem === product.navigationMenuCatergory
+  )
+
+  const className = `relative md:grid-flow-col md:grid-cols-3 md:grid-rows-${Math.ceil(
+    products.length / 3
+  )}`
+
   return (
     <ul className={clsx(['grid grid-flow-row gap-3', className])} {...props}>
       {products.map((product) => (

src/components/products/GridAllProducts.jsx

@@ -1,42 +1,26 @@
 import clsx from 'clsx'
 import { LogoWithName } from './Logo'
-import { products as allProducts } from './index'
+import { products as allProducts, productCategories } from './index'
 import Link from 'next/link'
-
-export function Grid({
-  onClick,
-  withoutFallback,
-  className,
-  menuItem,
-  ...props
-}) {
-  console.log('menuItem', menuItem)
-  const products =  allProducts
-    
-  return (
-    <ul className={clsx(['grid grid-flow-row gap-3', className])} {...props}>
-      {products.map((product) => (
-        <li key={product.path}>
-          <Link
-            href={`/${product.path}`}
-            className="block rounded-lg p-3 hover:bg-slate-50 hover:dark:bg-slate-700"
-            onClick={onClick}
-          >
-            <LogoWithName product={product}></LogoWithName>
-          </Link>
-        </li>
-      ))}
-    </ul>
-  )
-}
+import { Grid } from './Grid'
 
 export function MarkdocGrid() {
   return (
     <div className="not-prose">
-      <Grid
-        className="relative md:grid-flow-col md:grid-cols-3 md:grid-rows-5"
-        withoutFallback
-      />
+      {productCategories.map((item, index) => {
+        return (
+          <>
+            <h2 key={index} className="mb-4 mt-8 text-2xl font-bold">
+              {productCategories[index]}
+            </h2>
+            <Grid
+              key={index}
+              withoutFallback
+              menuItem={productCategories[index]}
+            />
+          </>
+        )
+      })}
     </div>
   )
 }

src/components/products/index.js

@@ -15,6 +15,7 @@ import { coreCandyMachine } from './coreCandyMachine'
 import { legacyDocumentation } from './legacyDocumentation'
 import { sugar } from './sugar'
 
+export const productCategories = ['Create', 'Commerce', 'Utility', 'Dev Tools']
 
 export const products = [
   global,

src/pages/programs-and-tools.md

@@ -1,7 +1,7 @@
 ---
-title: Metaplex products
-metaTitle: Metaplex products
-description: An overview of all Metaplex products.
+title: Metaplex Programs and Tools
+metaTitle: Metaplex Programs and Tools
+description: An overview of all Metaplex Programs and Tools.
 ---
 
 {% all-product-grid /%}