small design adjustments

pages/index.tsx

@@ -203,7 +203,7 @@ export default function Index({
                 as={Link}
                 href="/contact-sales"
               >
-                Book a demo today
+                Book a demo
               </Button>
             </div>
           }

pages/pricing.tsx

@@ -191,7 +191,7 @@ export default function Pricing({
               href="/contact-sales"
               className="mt-xlarge w-fit"
             >
-              Book a demo today
+              Book a demo
             </Button>
           </StandardPageWidth>
         </div>

pages/products/[product].tsx

@@ -34,7 +34,7 @@ export default function Product({
             href="/contact-sales"
             className=" w-fit"
           >
-            Book a demo today
+            Book a demo
           </Button>
         }
       />

src/components/NavigationDesktop.tsx

@@ -4,8 +4,6 @@ import { ColorModeProvider } from '@pluralsh/design-system'
 
 import { type NavData, useNavData } from '@src/contexts/NavDataContext'
 
-import { ProductTopNavMenu } from './menu/ProductNav'
-import { SolutionTopNavMenu } from './menu/SolutionNav'
 import { TopNavMenu } from './menu/TopNavMenu'
 import { MainLink } from './Navigation'
 
@@ -37,34 +35,28 @@ export function NavigationDesktop({ logoRef }) {
   return (
     <ColorModeProvider mode="dark">
       <div className="hidden gap-xsmall lg:flex">
-        {flatNav?.map((navItem, i) => {
+        {flatNav?.map((navItem) => {
           if (navItem?.mobile_only) {
             return null
           }
           if (navItem?.subnav) {
-            if (!i) {
-              return (
-                <ProductTopNavMenu
-                  key={navItem.id}
-                  navItem={navItem}
-                  left={logoLeft}
-                />
-              )
-            }
-            if (i === 1) {
-              return (
-                <SolutionTopNavMenu
-                  key={navItem.id}
-                  navItem={navItem}
-                  left={logoLeft}
-                />
-              )
-            }
+            const kind =
+              navItem.link?.title === 'Product'
+                ? 'product'
+                : navItem.link?.title === 'Solutions'
+                  ? 'solution'
+                  : 'default'
 
             return (
               <TopNavMenu
                 key={navItem.id}
+                kind={kind}
                 navItem={navItem}
+                left={
+                  kind === 'product' || kind === 'solution'
+                    ? logoLeft
+                    : undefined
+                }
               />
             )
           }

src/components/PageHeader.tsx

@@ -111,7 +111,7 @@ export function PageHeader({
               primary
               fontFamily={theme.fontFamilies.sans}
             >
-              Book a demo today
+              Book a demo
             </Button>
           </div>
           {/* <SearchButton /> */}

src/components/menu/Menu.tsx

@@ -28,7 +28,6 @@ import {
 import styled from 'styled-components'
 
 import { MainLinkBase } from '../Navigation'
-import { ResponsiveText } from '../Typography'
 
 import { PopoverMenu } from './PopoverMenu'
 
@@ -37,11 +36,12 @@ type Placement = 'left' | 'right'
 export type ItemRendererProps<T extends object> = {
   item: Node<T>
   state: TreeState<T>
+  kind?: MenuButtonProps<T>['kind']
 }
 
 type ItemRenderer<T extends object> = (p: ItemRendererProps<T>) => JSX.Element
 
-interface MenuButtonProps<T extends { render?: FunctionComponent }>
+export interface MenuButtonProps<T extends { render?: FunctionComponent }>
   extends AriaMenuProps<T>,
     MenuTriggerProps {
   itemRenderer?: ItemRenderer<T>
@@ -51,6 +51,8 @@ interface MenuButtonProps<T extends { render?: FunctionComponent }>
   maxHeight?: number | string
   className?: string
   dropdownProps?: Parameters<typeof useFloatingDropdown>[0]
+  kind?: 'product' | 'default' | 'solution'
+  left?: number
 }
 
 function MainLinkTriggerUnstyled({
@@ -107,10 +109,7 @@ export function MenuButton<T extends object>({
   kind = 'default',
   left,
   ...props
-}: MenuButtonProps<T> & {
-  kind?: 'product' | 'default' | 'solution'
-  left?: number
-}) {
+}: MenuButtonProps<T>) {
   // Create state based on the incoming props
   const triggerState = useMenuTriggerState(props)
 
@@ -198,10 +197,14 @@ function MenuDropdown<T extends object>({
     >
       <DropdownCard>
         <div className={kind === 'product' ? 'p-xlarge' : ''}>
+          {kind === 'product' && (
+            <MenuCategoryLabel>Platform features</MenuCategoryLabel>
+          )}
           <ul className={kind === 'product' ? 'grid grid-cols-2' : ''}>
             {[...state.collection].map((item) => (
               <ItemRenderer
                 key={item.key}
+                kind={kind}
                 item={item}
                 state={state}
               />
@@ -254,18 +257,12 @@ function SolutionNavDropdown<T extends object>({
         <div className="p-xlarge">
           {Object.keys(itemByCategory).map((category) => (
             <div key={category}>
-              <ResponsiveText
-                as="h2"
-                textStyles={{ '': 'mLabel' }}
-                color="text-light"
-                className="mb-xsmall ml-xxsmall uppercase"
-              >
-                {category}
-              </ResponsiveText>
+              <MenuCategoryLabel>{category}</MenuCategoryLabel>
               <ul>
                 {itemByCategory[category].map((item) => (
                   <ItemRenderer
                     key={item.key}
+                    kind="solution"
                     item={item}
                     state={state}
                   />
@@ -316,3 +313,10 @@ export function MenuItem<T extends object>({
     </li>
   )
 }
+
+const MenuCategoryLabel = styled.h2(({ theme }) => ({
+  ...theme.partials.marketingText.label,
+  color: theme.colors['text-light'],
+  marginBottom: theme.spacing.xsmall,
+  marginLeft: theme.spacing.xxsmall,
+}))