feat: nav update for nutanix-x-traefik page (#50)

* feat: nav update for nutanix-x-traefik page

* fix: order of nutanix page in nav

Author: harshad-tahiliani

src/components/nav/DrawerNav.tsx

@@ -86,8 +86,9 @@ const DrawerNav = ({ isDrawerOpen }: Props) => {
             </SubLink>
             <SubLink href="https://traefik.io/solutions/kubernetes-ingress/">Kubernetes Ingress</SubLink>
             <SubLink href="https://traefik.io/solutions/docker-swarm-ingress/">Docker Swarm Ingress</SubLink>
-            <SubLink href="https://traefik.io/solutions/hashicorp-and-traefik/">
-              Traefik & HashiCrop <Badge>New!</Badge>
+            <SubLink href="https://traefik.io/solutions/hashicorp-and-traefik/">Traefik & HashiCorp</SubLink>
+            <SubLink href="https://traefik.io/solutions/nutanix-and-traefik/">
+              Traefik & Nutanix <Badge>New!</Badge>
             </SubLink>
           </div>
         </div>

src/components/nav/Header.tsx

@@ -152,7 +152,6 @@ const Header = ({ product }: { product?: string }) => {
               alignItems: 'center',
               justifyContent: 'space-between',
               height: '100%',
-              position: 'relative',
               width: '100%',
               maxWidth: '1274px',
               padding: ['0 20px', '0 25px'],

src/components/nav/MainNav.tsx

@@ -34,6 +34,7 @@ import { ReactComponent as EnterpriseIcon } from '../../images/menu_icons_traefi
 import { ReactComponent as HubIcon } from '../../images/menu_icons_traefik_hub.svg'
 import { ReactComponent as WafIcon } from '../../images/menu_icons_waf.svg'
 import { ReactComponent as HashicorpIcon } from '../../images/menu_icons_hashicorp.svg'
+import { ReactComponent as NutanixIcon } from '../../images/menu_icons_nutanix.svg'
 import { ReactComponent as AiGatewayIcon } from '../../images/menu_icons_ai_gateway.svg'
 import PostCard from './PostCard'
 import NavHeader from './NavHeader'
@@ -53,8 +54,12 @@ const MainNav = () => {
     <Wrapper as="nav" style={{ height: '100%', alignItems: 'center', marginLeft: '65px' }} aria-label="Main menu">
       <Flex as="ul" sx={{ height: '100%', alignItems: 'center', p: 0, m: 0, listStyle: 'none' }}>
         {/* Products */}
-        <NavItem name="Products" hasSubmenu position={{ marginLeft: '-15%' }}>
-          <Grid sx={{ gridTemplateColumns: '1fr', maxWidth: '1160px' }}>
+        <NavItem
+          name="Products"
+          hasSubmenu
+          position={{ left: '50%', transform: 'translateX(-50%)', width: '100%', maxWidth: '1050px' }}
+        >
+          <Grid>
             <NavHeader title="Traefik Runtime Platform" />
             <Grid sx={{ gridTemplateColumns: '1fr 1fr 1fr' }}>
               <Product
@@ -140,12 +145,15 @@ const MainNav = () => {
         <NavItem name="Solutions" hasSubmenu position={{ marginLeft: '-25%' }} heighlight={true}>
           <Grid
             sx={{
-              display: 'grid',
-              gridTemplateColumns: 'repeat(3, 360px)',
+              maxWidth: '1353px',
+              gap: '24px',
+              padding: '0 16px',
+              gridTemplateColumns: 'repeat(4, 1fr)',
             }}
           >
             <Product
               title="Application Proxy"
+              padding="24px 0"
               links={[
                 {
                   title: 'Kubernetes Ingress',
@@ -162,10 +170,10 @@ const MainNav = () => {
                   icon: <DockerSwarmIcon />,
                 },
               ]}
-              bgImage={'https://traefik.io/images/site-nav/[email protected]'}
             />
             <Product
               title="API Gateway"
+              padding="24px 0"
               links={[
                 {
                   title: 'Modern API Gateway',
@@ -182,14 +190,7 @@ const MainNav = () => {
                   icon: <WafIcon />,
                   badge: 'New!',
                 },
-                {
-                  title: 'Traefik & HashiCorp',
-                  url: 'https://traefik.io/solutions/hashicorp-and-traefik/',
-                  external: true,
-                  description: 'A comprehensive and powerful API Gateway for HashiCorp stack.',
-                  icon: <HashicorpIcon />,
-                  badge: 'New!',
-                },
+
                 {
                   title: 'AI Gateway',
                   url: 'https://traefik.io/solutions/ai-gateway/',
@@ -199,10 +200,10 @@ const MainNav = () => {
                   badge: 'New!',
                 },
               ]}
-              bgImage={'https://traefik.io/images/site-nav/[email protected]'}
             />
             <Product
               title="API Management"
+              padding="24px 0"
               links={[
                 {
                   title: 'GitOps-Driven API Management',
@@ -229,13 +230,37 @@ const MainNav = () => {
                   badge: 'New!',
                 },
               ]}
-              bgImage={'https://traefik.io/images/site-nav/[email protected]'}
+            />
+            <Product
+              title="BETTER TOGETHER"
+              padding="24px 0"
+              links={[
+                {
+                  title: 'Traefik & HashiCorp',
+                  url: 'https://traefik.io/solutions/hashicorp-and-traefik/',
+                  external: true,
+                  description: 'A comprehensive and powerful API Gateway for HashiCorp stack.',
+                  icon: <HashicorpIcon />,
+                },
+                {
+                  title: 'Traefik & Nutanix',
+                  url: 'https://traefik.io/solutions/nutanix-and-traefik/',
+                  external: true,
+                  description: 'A comprehensive and powerful API Gateway for HashiCorp stack.',
+                  icon: <NutanixIcon />,
+                  badge: 'New!',
+                },
+              ]}
             />
           </Grid>
         </NavItem>
 
         {/* Learn */}
-        <NavItem name="Learn" hasSubmenu position={{ right: '25px' }}>
+        <NavItem
+          name="Learn"
+          hasSubmenu
+          position={{ width: '100%', maxWidth: '1192px', left: '50%', transform: 'translateX(-50%)' }}
+        >
           <Grid sx={{ gridTemplateColumns: 'auto auto auto 288px', p: '24px', gap: '93px', lineHeight: 1.6 }}>
             <MenuColumn.Column title="Learn">
               <MenuColumn.Item title="Blog" logo={<BlogIcon />} href="https://traefik.io/blog/" external />

src/components/nav/NavItem.tsx

@@ -97,7 +97,7 @@ const Menu = styled(Box)`
   margin: 0;
   display: none;
   background: transparent;
-  padding-top: 16px;
+  padding-top: 8px;
 `
 
 const MenuInner = styled(Box)`

src/components/nav/Product.tsx

@@ -6,6 +6,7 @@ import Link from 'components/Link'
 type NavProductProps = {
   title?: string
   description?: string
+  padding?: string
   links?: {
     title: string
     url: string
@@ -31,8 +32,8 @@ type NavbarLinkProps = {
   styles?: any
 }
 
-const Product = ({ bgImage, title, description, links, subLinks = [] }: NavProductProps) => (
-  <Box sx={{ p: title ? '24px' : '16px 16px 48px', backgroundColor: '#fff', position: 'relative' }}>
+const Product = ({ bgImage, title, description, padding, links, subLinks = [] }: NavProductProps) => (
+  <Box sx={{ p: padding ? padding : title ? '24px' : '16px 16px 48px', backgroundColor: '#fff', position: 'relative' }}>
     {bgImage && (
       <img
         src={bgImage}