update Navigation

* removed unused title component I made

* nav position fix

* added navigation, sorted a-z, blank navigation

* fixed mobile navigation, fixed wordbreak issue on inscription page causing mobile layout issue.

* fuxed build

* copy change, added back in all products grid, adjust mobile menu, fixed some spelling.

* made mobile nav scrollable

* fixed renamed page hero header link /programs-and-tools.

* fixed mobile menu /programs-and-tools

---------

Co-authored-by: MarkSackerberg <93528482+MarkSackerberg@users.noreply.github.com>

markdoc/tags.js

@@ -13,6 +13,7 @@ import {
 } from '@/components/diagrams'
 import {Seperator} from '@/components/Seperator'
 import { MarkdocGrid as ProductGrid } from '@/components/products/Grid'
+import { MarkdocGrid as AllProductsGrid } from '@/components/products/GridAllProducts'
 
 const tags = {
   callout: {
@@ -60,6 +61,10 @@ const tags = {
     selfClosing: true,
     render: ProductGrid,
   },
+  'all-product-grid': {
+    selfClosing: true,
+    render: AllProductsGrid,
+  },
   totem: {
     render: Totem,
   },

src/components/Header.jsx

@@ -10,6 +10,7 @@ import { Logo, LogoWithName } from '@/components/products/Logo'
 import { Sections } from '@/components/products/Sections'
 import { SwitcherDialog } from '@/components/products/SwitcherDialog'
 import { SwitcherPopover } from '@/components/products/SwitcherPopover'
+import NavList from './NavList'
 
 export function Header({ page }) {
   let [isScrolled, setIsScrolled] = useState(false)
@@ -28,9 +29,9 @@ export function Header({ page }) {
   return (
     <header
       className={clsx(
-        'sticky top-0 z-50 bg-white shadow-md shadow-slate-900/5 transition duration-500 dark:shadow-none',
+        'sticky top-0 z-50 bg-white shadow-md shadow-neutral-900/5 transition duration-500 dark:shadow-none',
         isScrolled
-          ? 'dark:bg-slate-900/95 dark:backdrop-blur dark:[@supports(backdrop-filter:blur(0))]:bg-slate-900/75'
+          ? 'dark:bg-neutral-900/95 dark:backdrop-blur dark:[@supports(backdrop-filter:blur(0))]:bg-neutral-900/75'
           : 'dark:bg-transparent'
       )}
     >
@@ -40,15 +41,11 @@ export function Header({ page }) {
         </div>
         <div className="relative flex flex-grow basis-0 items-center">
           <div className="hidden flex-col lg:flex">
-            <SwitcherPopover>
-              <Popover.Button className="-mx-4 -my-2 rounded-lg px-4 py-2">
-                <Logo product={page.product} className="h-8 w-8 sm:hidden" />
-                <LogoWithName
-                  product={page.product}
-                  className="hidden sm:flex"
-                />
-              </Popover.Button>
-            </SwitcherPopover>
+            <Link href={`/${page.product.path}`}>
+              <Logo product={page.product} className="h-8 w-8 sm:hidden" />
+              <LogoWithName product={page.product} className="hidden sm:flex" />
+              {console.log(page.product)}
+            </Link>
           </div>
           <div className="flex flex-col lg:hidden">
             <SwitcherDialog>
@@ -67,10 +64,13 @@ export function Header({ page }) {
             </SwitcherDialog>
           </div>
         </div>
-        <div className="-my-5 mr-6 sm:mr-8 lg:mr-0">
-          <Search />
-        </div>
-        <div className="relative flex basis-0 justify-end gap-6 sm:gap-8 lg:flex-grow">
+
+        <NavList />
+
+        <div className="relative flex basis-0 items-center justify-end gap-6 sm:gap-8 lg:flex-grow">
+          <div className="-my-5 mr-6 sm:mr-8 lg:mr-0">
+            <Search />
+          </div>
           <ThemeSelector className="relative z-10" />
           <Link
             href={page.product.github}

src/components/Hero.jsx

@@ -29,7 +29,7 @@ export function Hero({
   }
 
   return (
-    <div className="overflow-hidden bg-slate-900 dark:-mb-32 dark:mt-[-7rem] dark:pb-32 dark:pt-[7rem] dark:lg:mt-[-7.25rem] dark:lg:pt-[7.25rem]">
+    <div className="overflow-hidden bg-neutral-900 dark:-mb-32 dark:mt-[-7rem] dark:pb-32 dark:pt-[7rem] dark:lg:mt-[-7.25rem] dark:lg:pt-[7.25rem]">
       <div className="py-16 sm:px-2 lg:relative lg:px-0 lg:py-20">
         <div
           className={clsx(

src/components/Layout.jsx

@@ -64,7 +64,7 @@ export function Layout({ children, page }) {
                 )}
               </header>
             )}
-            <Prose>{children}</Prose>
+            <Prose className="break-words">{children}</Prose>
           </article>
           <dl className="mt-12 flex border-t border-slate-200 pt-6 dark:border-slate-800">
             {page.activeSection?.previousPage && (

src/components/MobileNavigation.jsx

@@ -6,6 +6,7 @@ import { Dialog } from '@headlessui/react'
 import { LogoWithName } from '@/components/products/Logo'
 import { Navigation } from '@/components/Navigation'
 import { Sections } from '@/components/products/Sections'
+import { ComputerDesktopIcon } from '@heroicons/react/24/outline'
 
 function MenuIcon(props) {
   return (
@@ -70,10 +71,10 @@ export function MobileNavigation({ page }) {
       <Dialog
         open={isOpen}
         onClose={setIsOpen}
-        className="fixed inset-0 z-50 flex items-start overflow-y-auto bg-slate-900/50 pr-10 backdrop-blur lg:hidden"
+        className="fixed inset-0 z-50 flex items-start overflow-y-auto bg-netural-900/50 pr-10 backdrop-blur lg:hidden"
         aria-label="Navigation"
       >
-        <Dialog.Panel className="min-h-full w-full max-w-sm bg-white px-4 pb-12 pt-5 dark:bg-slate-900 sm:px-6">
+        <Dialog.Panel className="min-h-full w-full max-w-sm bg-white px-4 pb-12 pt-5 dark:bg-neutral-900 border-r border-slate-600 sm:px-6">
           <div className="flex items-center">
             <button
               type="button"
@@ -86,9 +87,16 @@ export function MobileNavigation({ page }) {
               <LogoWithName product={page.product} />
             </Link>
           </div>
+          {page.product.name != 'Metaplex' && 
+          <>
+          <Link href="/programs-and-tools" className="mt-12 flex items-center gap-2 text-slate-900 dark:text-white">
+            <ComputerDesktopIcon height={20} /> Programs and Tools
+          </Link>
+          </>
+          }
           {page.product.sections && page.product.sections.length > 1 && (
             <Sections
-              className="-ml-2 mt-12 flex flex-col gap-2"
+              className="-ml-2 mt-6 flex flex-col gap-2"
               sections={page.product.sections}
               activeSectionId={page.activeSection?.id}
             />

src/components/NavList.jsx

@@ -0,0 +1,38 @@
+import { Popover } from '@headlessui/react'
+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']
+
+const NavList = () => {
+
+  const [active, setActive] = useState();
+
+
+  return (
+    <div className="hidden cursor-pointer  gap-8 lg:flex">
+      {menuItems.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" />
+                <LogoWithName
+                  product={page.product}
+                  className="hidden sm:flex"
+                /> */}
+                </Popover.Button>
+              </SwitcherPopover>
+            </div>
+          </>
+        )
+      })}
+    </div>
+  )
+}
+
+export default NavList

src/components/Navigation.jsx

@@ -17,21 +17,22 @@ export function Navigation({ product, navigation, className }) {
               role="list"
               className="mt-2 space-y-2 border-l border-slate-100 dark:border-slate-800 lg:mt-4 lg:space-y-4 lg:border-slate-200"
             >
-              {section.links.map((link) => (
-                <li key={`${link.title}-${link.href}`} className="relative">
-                  <Link
-                    href={link.href}
-                    className={clsx(
-                      'block w-full pl-3.5 before:pointer-events-none before:absolute before:-left-[2px] before:top-1/2 before:h-4 before:w-[3px] before:-translate-y-1/2 before:rounded',
-                      link.href === router.pathname
-                        ? 'font-semibold text-accent-500 before:bg-accent-500'
-                        : 'text-slate-500 before:hidden before:bg-slate-300 hover:text-slate-600 hover:before:block dark:text-slate-400 dark:before:bg-slate-700 dark:hover:text-slate-300'
-                    )}
-                  >
-                    {link.title}
-                  </Link>
-                </li>
-              ))}
+              {section.links
+                .map((link) => (
+                  <li key={`${link.title}-${link.href}`} className="relative">
+                    <Link
+                      href={link.href}
+                      className={clsx(
+                        'block w-full pl-3.5 before:pointer-events-none before:absolute before:-left-[2px] before:top-1/2 before:h-4 before:w-[3px] before:-translate-y-1/2 before:rounded',
+                        link.href === router.pathname
+                          ? 'font-semibold text-accent-500 before:bg-accent-500'
+                          : 'text-slate-500 before:hidden before:bg-slate-300 hover:text-slate-600 hover:before:block dark:text-slate-400 dark:before:bg-slate-700 dark:hover:text-slate-300'
+                      )}
+                    >
+                      {link.title}
+                    </Link>
+                  </li>
+                ))}
             </ul>
           </li>
         ))}

src/components/Search.jsx

@@ -46,11 +46,11 @@ export function Search() {
     <>
       <button
         type="button"
-        className="group flex h-6 w-6 items-center justify-center sm:justify-start lg:h-auto lg:flex-none lg:rounded-lg lg:py-2.5 lg:pl-4 lg:pr-3.5 lg:text-sm lg:ring-1 lg:ring-slate-200 lg:hover:ring-slate-300 dark:lg:bg-slate-800/75 dark:lg:ring-inset dark:lg:ring-white/5 dark:lg:hover:bg-slate-700/40 dark:lg:hover:ring-slate-500 lg:w-96"
+        className='flex justify-center items-center'
         onClick={onOpen}
       >
-        <SearchIcon className="h-5 w-5 flex-none fill-slate-400 group-hover:fill-slate-500 dark:fill-slate-500 lg:group-hover:fill-slate-400" />
-        <span className="sr-only lg:not-sr-only lg:ml-2 lg:text-slate-500 lg:dark:text-slate-400">
+        <SearchIcon className="h-7 w-7 flex-none fill-slate-400 group-hover:fill-slate-500 dark:fill-slate-500 lg:group-hover:fill-slate-400" />
+        {/* <span className="sr-only lg:not-sr-only lg:ml-2 lg:text-slate-500 lg:dark:text-slate-400">
           Search docs
         </span>
         {modifierKey && (
@@ -58,7 +58,7 @@ export function Search() {
             <kbd className="font-sans">{modifierKey}</kbd>
             <kbd className="font-sans">K</kbd>
           </kbd>
-        )}
+        )} */}
       </button>
       {isOpen &&
         createPortal(

src/components/products/Grid.jsx

@@ -3,13 +3,20 @@ import { LogoWithName } from './Logo'
 import { products as allProducts } from './index'
 import Link from 'next/link'
 
-export function Grid({ onClick, withoutFallback, className, ...props }) {
-  const products = withoutFallback
-    ? allProducts.filter((product) => !product.isFallbackProduct)
-    : allProducts
-
+export function Grid({
+  onClick,
+  withoutFallback,
+  className,
+  menuItem,
+  ...props
+}) {
+  console.log('menuItem', menuItem)
+  const products =  allProducts.filter(
+        (product) => menuItem === product.navigationMenuCatergory
+      )
+    
   return (
-    <ul className={clsx(['grid gap-3', className])} {...props}>
+    <ul className={clsx(['grid grid-flow-row gap-3', className])} {...props}>
       {products.map((product) => (
         <li key={product.path}>
           <Link

src/components/products/GridAllProducts.jsx

@@ -0,0 +1,42 @@
+import clsx from 'clsx'
+import { LogoWithName } from './Logo'
+import { products as allProducts } 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>
+  )
+}
+
+export function MarkdocGrid() {
+  return (
+    <div className="not-prose">
+      <Grid
+        className="relative md:grid-flow-col md:grid-cols-2 md:grid-rows-4"
+        withoutFallback
+      />
+    </div>
+  )
+}

src/components/products/MobileAppGrid.jsx

@@ -0,0 +1,60 @@
+import clsx from 'clsx'
+import { LogoWithName } from './Logo'
+import { products as allProducts } from './index'
+import Link from 'next/link'
+import { Grid } from './Grid'
+
+export function MobileAppGrid({
+  onClick,
+  withoutFallback,
+  className,
+  menuItem,
+  ...props
+}) {
+  console.log('menuItem', menuItem)
+  const products = allProducts
+
+  const hub = products.find((product) => product.name === 'Metaplex')
+
+  return (
+    <ul className={clsx(['grid grid-flow-row gap-5', className])} {...props}>
+      <li key={hub.path}>
+        <Link
+          href={`/${hub.path}`}
+          className="block rounded-lg p-3 hover:bg-slate-50 hover:dark:bg-slate-700 sticky"
+          onClick={onClick}
+        >
+          <LogoWithName product={hub}></LogoWithName>
+        </Link>
+        <hr />
+      </li>
+      
+    <div className='overflow-y-auto'>
+      {products
+        .filter((product) => product.name != 'Metaplex')
+        .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>
+        ))}
+        </div>
+    </ul>
+  )
+}
+
+export function MarkdocGrid() {
+  return (
+    <div className="not-prose">
+      <Grid
+        className="relative md:grid-flow-col md:grid-cols-2 md:grid-rows-4"
+        withoutFallback
+      />
+    </div>
+  )
+}

src/components/products/SwitcherDialog.jsx

@@ -1,6 +1,6 @@
-import { useState } from 'react'
 import { Dialog } from '@headlessui/react'
-import { Grid } from '@/components/products/Grid'
+import { useState } from 'react'
+import { MobileAppGrid } from './MobileAppGrid'
 
 export function SwitcherDialog({ children, props }) {
   let [isOpen, setIsOpen] = useState(false)
@@ -16,18 +16,28 @@ export function SwitcherDialog({ children, props }) {
       >
         {/* The backdrop, rendered as a fixed sibling to the panel container */}
         <div
-          className="fixed inset-0 bg-slate-900/50 backdrop-blur"
+          className="fixed inset-0 bg-neutral-900/50 backdrop-blur"
           aria-hidden="true"
         />
 
         {/* Full-screen scrollable container */}
-        <div className="fixed inset-x-0 bottom-0 overflow-y-auto sm:inset-0">
+        <div className=" fixed max-h-screen h-full inset-x-0 top-0
+        l-0">
           {/* Container to center the panel */}
-          <div className="flex min-h-full items-center justify-center p-4">
+          <div className="relative flex max-h-[95vh]  p-4">
             {/* The actual dialog panel  */}
-            <Dialog.Panel className="mx-auto w-full rounded-xl bg-white p-4 shadow-xl ring-1 ring-black ring-opacity-5 dark:border dark:border-slate-600 dark:bg-slate-800 sm:w-auto">
-              <Grid
-                className="relative sm:grid-flow-col sm:grid-cols-2 sm:grid-rows-4"
+            <Dialog.Panel className="relative mx-auto w-full rounded-xl bg-white p-4 shadow-xl ring-1 ring-black ring-opacity-5 dark:border dark:border-slate-600 dark:bg-neutral-900 overflow-auto">
+              <div
+                className="absolute right-5 z-50 text-black hover:cursor-pointer dark:text-white"
+                onClick={(e) => {
+                  e.stopPropagation, setIsOpen(false)
+                }}
+              >
+                
+              </div>
+
+              <MobileAppGrid
+                className="relative grid-rows-1"
                 onClick={() => setIsOpen(false)}
               />
             </Dialog.Panel>

src/components/products/SwitcherPopover.jsx

@@ -1,29 +1,35 @@
 import { Grid } from '@/components/products/Grid'
 import { Popover, Transition } from '@headlessui/react'
 
-export function SwitcherPopover({ children, props }) {
+export function SwitcherPopover({ children, menuItem, ...props }) {
+  console.log('menuItem', menuItem)
   return (
-    <Popover className="relative" {...props}>
+    <Popover {...props}>
       {children}
-      <Transition
+      {/* <Transition
         enter="transition ease-out duration-200"
         enterFrom="opacity-0 translate-y-1"
         enterTo="opacity-100 translate-y-0"
         leave="transition ease-in duration-150"
         leaveFrom="opacity-100 translate-y-0"
         leaveTo="opacity-0 translate-y-1"
-      >
-        <Popover.Panel className="absolute z-10 mt-4 w-max">
-          {({ close }) => (
-            <div className="overflow-hidden rounded-lg bg-white p-4 shadow-xl ring-1 ring-black ring-opacity-5 dark:border dark:border-slate-600 dark:bg-slate-800">
+      > */}
+      <Popover.Panel className="absolute z-10 m-auto mt-4 ">
+        {({ close }) => (
+          <div className="fixed left-0 w-full">
+            <div
+              className="m-auto w-full max-w-[600px]  overflow-hidden  rounded-lg bg-white p-4 shadow-xl ring-1 ring-black ring-opacity-5 dark:border dark:border-slate-600 dark:bg-neutral-900"
+            >
               <Grid
-                className="relative md:grid-flow-col md:grid-cols-2 md:grid-rows-4"
+                className="relative md:grid-flow-row md:grid-cols-2"
                 onClick={close}
+                menuItem={menuItem}
               />
             </div>
-          )}
-        </Popover.Panel>
-      </Transition>
+          </div>
+        )}
+      </Popover.Panel>
+      {/* </Transition> */}
     </Popover>
   )
 }

src/components/products/amman/index.js

@@ -13,6 +13,7 @@ export const amman = {
   description:
     'A local validator toolkit for testing Solana programs and applications.',
   path: 'amman',
+  navigationMenuCatergory: 'Dev Tools',
   logo: Logo,
   github: 'https://github.com/metaplex-foundation/amman',
   className: 'accent-sky',

src/components/products/bubblegum/index.js

@@ -12,6 +12,7 @@ export const bubblegum = {
   headline: 'Compressed NFTs',
   description: 'NFTs that scale to new orders of magnitude.',
   path: 'bubblegum',
+  navigationMenuCatergory: 'Create',
   logo: Logo,
   github: 'https://github.com/metaplex-foundation/mpl-bubblegum',
   className: 'accent-green',

src/components/products/candyMachine/index.js

@@ -11,6 +11,7 @@ export const candyMachine = {
   name: 'Candy Machine',
   headline: 'NFT launchpad',
   description: 'Launch your next NFT collection on Solana.',
+  navigationMenuCatergory: 'Commerce',
   path: 'candy-machine',
   logo: Logo,
   github: 'https://github.com/metaplex-foundation/mpl-candy-machine',

src/components/products/das-api/index.js

@@ -15,6 +15,7 @@ export const das = {
   path: 'das-api',
   logo: Logo,
   github: 'https://github.com/metaplex-foundation/digital-asset-standard-api',
+  navigationMenuCatergory: 'Dev Tools',
   className: 'accent-sky',
   heroes: [{ path: '/das-api', component: Hero }],
   sections: [

src/components/products/fusion/index.js

@@ -11,6 +11,7 @@ export const fusion = {
   name: 'Fusion',
   headline: 'NFTs inside NFTs',
   description: 'Create composable NFTs.',
+  navigationMenuCatergory: 'Utility',
   path: 'fusion',
   logo: Logo,
   github: 'https://github.com/metaplex-foundation/mpl-trifle',

src/components/products/global/Hero.jsx

@@ -5,7 +5,7 @@ export function Hero({ page }) {
     <BaseHero
       page={page}
       title="Developer Hub"
-      primaryCta={{ title: 'Browse our Products', href: '/products' }}
+      primaryCta={{ title: 'Browse our Products', href: '/programs-and-tools' }}
       light2Off
       light3Off
     ></BaseHero>

src/components/products/global/index.js

@@ -17,10 +17,10 @@ export const global = {
       ...documentationSection(''),
       navigation: [
         {
-          title: 'Introduction',
+          title: 'Overview',
           links: [
-            { title: 'Overview', href: '/' },
-            { title: 'Our products', href: '/products' },
+            { title: 'Introduction', href: '/' },
+            { title: 'Programs and Tools', href: '/programs-and-tools' },
           ],
         },
         {

src/components/products/hydra/index.js

@@ -11,7 +11,9 @@ export const hydra = {
   name: 'Hydra',
   headline: 'Fanout wallets',
   description: 'Create shared wallets, split between multiple shareholders.',
+  navigationMenuCatergory: 'Hydra',
   path: 'hydra',
+  navigationMenuCatergory: 'Utility',
   logo: Logo,
   github: 'https://github.com/metaplex-foundation/mpl-hydra',
   className: 'accent-amber',

src/components/products/index.js

@@ -25,4 +25,4 @@ export const products = [
   umi,
   amman,
   das
-]
+].sort((a, b) => a.name.localeCompare(b.name))

src/components/products/inscription/index.js

@@ -1,8 +1,6 @@
 import {
-  changelogSection,
   documentationSection,
-  recipesSection,
-  referencesSection,
+  referencesSection
 } from '@/shared/sections'
 import { Hero } from './Hero'
 import { Logo } from './Logo'
@@ -13,6 +11,7 @@ export const inscription = {
   description: 'Inscribe Data to Solana state.',
   path: 'inscription',
   logo: Logo,
+  navigationMenuCatergory: 'Create',
   github: 'https://github.com/metaplex-foundation/mpl-inscription',
   className: 'accent-pink',
   heroes: [{ path: '/inscription', component: Hero }],

src/components/products/tokenAuthRules/index.js

@@ -11,6 +11,7 @@ export const tokenAuthRules = {
   name: 'Token Auth Rules',
   headline: 'NFT permissions',
   description: 'Design custom authorization rules for your NFTs.',
+  navigationMenuCatergory: 'Create',
   path: 'token-auth-rules',
   logo: Logo,
   github: 'https://github.com/metaplex-foundation/mpl-token-auth-rules',
@@ -24,14 +25,23 @@ export const tokenAuthRules = {
           title: 'Introduction',
           links: [
             { title: 'Overview', href: '/token-auth-rules' },
-            { title: 'Metaplex Rule Sets', href: '/token-auth-rules/mplx-rule-sets' },
+            {
+              title: 'Metaplex Rule Sets',
+              href: '/token-auth-rules/mplx-rule-sets',
+            },
           ],
         },
         {
           title: 'Features',
           links: [
-            { title: 'Create or Update Rule Sets', href: '/token-auth-rules/create-or-update' },
-            { title: 'Validating with a Rule Set', href: '/token-auth-rules/validate' },
+            {
+              title: 'Create or Update Rule Sets',
+              href: '/token-auth-rules/create-or-update',
+            },
+            {
+              title: 'Validating with a Rule Set',
+              href: '/token-auth-rules/validate',
+            },
           ],
         },
         {
@@ -89,7 +99,7 @@ export const tokenAuthRules = {
           links: [
             { title: 'Rule Set Buffers', href: '/token-auth-rules/buffers' },
           ],
-        }
+        },
       ],
     },
     { ...referencesSection('token-auth-rules') },

src/components/products/tokenMetadata/index.js

@@ -11,6 +11,7 @@ export const tokenMetadata = {
   name: 'Token Metadata',
   headline: 'Digital ownership standard',
   description: 'The NFT standard on Solana.',
+  navigationMenuCatergory: 'Create',
   path: 'token-metadata',
   logo: Logo,
   github: 'https://github.com/metaplex-foundation/mpl-token-metadata',

src/components/products/toolbox/index.js

@@ -11,6 +11,7 @@ export const toolbox = {
   name: 'Toolbox',
   headline: 'Core programs',
   description: 'A collection of core programs for your applications.',
+  navigationMenuCatergory: 'Dev Tools',
   path: 'toolbox',
   logo: Logo,
   github: 'https://github.com/metaplex-foundation/mpl-toolbox',

src/pages/_document.jsx

@@ -65,7 +65,7 @@ export default function Document() {
         <meta name="msapplication-TileColor" content="#00aba9" />
         <meta name="theme-color" content="#ffffff" />
       </Head>
-      <body className="bg-white dark:bg-slate-900">
+      <body className="bg-white dark:bg-neutral-900">
         <Main />
         <NextScript />
       </body>

src/pages/developer-tools.md

@@ -6,10 +6,10 @@ description: An overview of Metaplex's developer tools.
 
 On top of on-chain programs, Metaplex offers a variety of developer tools that can be used to create and maintain your own Solana programs.
 
-- [**Umi**](https://github.com/metaplex-foundation/umi): A JavaScript framework to build Solana clients.
+- [**Umi**](/umi): A JavaScript framework to build Solana clients.
 - [**Kinobi**](https://github.com/metaplex-foundation/kinobi): A superset of the IDL spec that allows us to generate program clients.
 - [**Shank**](https://github.com/metaplex-foundation/shank): A set of macros that help vanilla Solana program generate IDLs.
-- [**Amman**](https://github.com/metaplex-foundation/amman): A library that helps set up local validators for development.
+- [**Amman**](/amman): A library that helps set up local validators for development.
 - [**Solana Project Template**](https://github.com/metaplex-foundation/solana-project-template): A GitHub template for vanilla Solana programs and their clients.
 - [**Action**](https://github.com/metaplex-foundation/actions): A set of useful GitHub Actions for Solana devs.
 - [**Rust Bin**](https://github.com/metaplex-foundation/rustbin): A library that syncs a local Rust binary with a crate's dependencies.

src/pages/index.md

@@ -1,33 +1,10 @@
 ---
-title: Metaplex developer hub
+title: Introduction
 metaTitle: Metaplex Developer Hub
 description: One place for all Metaplex developer resources.
 ---
 
-Welcome to the Metaplex developer hub. You'll find comprehensive guides, recipes and API references to help you build inspiring projects with Metaplex's products.
+The Metaplex Protocol is a decentralized platform built on the Solana blockchain, designed to facilitate the creation, sale, and management of digital assets, primarily NFTs (Non-Fungible Tokens). It offers tools and standards for artists, creators, and brands to launch their own NFT projects and storefronts with minimal technical effort, enabling direct engagement with their audience. Metaplex aims to democratize access to digital commerce by providing a scalable, efficient, and user-friendly ecosystem for the NFT community.
 
-## Introduction
+In the list below, you can find and explore most of the programs and tools that are part of the Metaplex protocol and developer platform. We're excited to see what you build with Metaplex, if you have questions please reach out on our [discord!](https://discord.com/invite/metaplex)!
 
-Metaplex Studios, ecosystem, and community have been moving quickly to support the thousands of developer teams and creators looking to launch their NFT projects on Solana. In response to feedback, we've created tools like our [Candy Machine v3™](/candy-machine/), to help mint and sell thousands of NFTs for NFT collections and/or common profile picture projects you all know and love. We've also been hard at work creating primitives, recipes, and extensible storefronts that developers and creators alike can use.
-
-We're excited to see what you build with Metaplex, if you have questions please reach out on our [discord!](https://discord.com/invite/metaplex)
-
-## What is Solana?
-
-Metaplex is built on [Solana](https://crypto-wikipedia.com/what-is-solana-sol/) not only because of scalability, but also because Solana has many other great features, including ["Proof of History"](https://solana.com/news/proof-of-history---a-clock-for-blockchain). Solana has a great reputation to launch NFTs in part because of the work of the Metaplex team. Initially a Solana initiative, we were spun out in order to achieve our goal of creating a best-in-class NFT creator experience.
-
-## What is Metaplex?
-
-Metaplex is a collection of tools, smart contracts, and more designed to make the process of creating and launching NFTs easier. While initially focused on supporting the needs of the arts and entertainment industry our plans extend far beyond that to all use cases where an NFT may add value.
-
-In the list below, you can find and explore most of the products that are part of the Metaplex ecosystem.
-
-{% product-grid /%}
-
-## What's next for Metaplex?
-
-The Metaplex ecosystem just celebrated its first year exploring the incredible possibilities of NFTs in partnership with the community: 15M NFTs minted, and $3B in value to creators across primary and secondary sales. We are dedicated to enhancing the protocol as a continued source of support, respect and opportunity to garner value for independent builders. If you want to help us on our mission, [join the team](https://apply.workable.com/metaplex-studios/).
-
-## Thank you and stay in touch!
-
-This project wouldn't exist without you. We are thankful you're using Metaplex tools and want to make them better for you! Please reach out on [discord](https://discord.com/invite/metaplex) if you have any questions, or better yet, [open a pull request](https://github.com/metaplex-foundation/metaplex/)!

src/pages/products.md → src/pages/programs-and-tools.md

@@ -4,6 +4,4 @@ metaTitle: Metaplex products
 description: An overview of all Metaplex products.
 ---
 
-_Detailed overview coming soon..._
-
-{% product-grid /%}
+{% all-product-grid /%}

src/pages/token-metadata/token-standard.md

@@ -10,7 +10,7 @@ An example is something the community is calling a "semi-fungible token", an SPL
 
 The consensus seems to be that these should be stored in wallets in the same view as standard NFTs, or in their own view but separate from "standard" fungible SPL tokens. These tokens are becoming popular in gaming contexts to support fungible items such as a kind of sword or a piece of wood, etc. but which are in a different league from typical fungible SPL tokens such as USDC.
 
-## The Token Standard field
+## [The Token Standard field](/token-metadata/token-standard#the-token-standard-field)
 
 In order to support this particular use-case but also to make the standard broad enough to allow expansion to other token types in the future, we keep track of the token's fungibility using the `Token Standard` enum on the Metadata account. This field maps to a particular JSON standard and is used to objectively differentiate token types.