feat: update navigation links and add new cta Air-Gapped API Management

src/components/nav/DrawerNav.tsx

@@ -75,14 +75,15 @@ const DrawerNav = ({ isDrawerOpen }: Props) => {
             </SubLink>
             <SubLink href="https://traefik.io/solutions/api-gateway/">Modern API Gateway</SubLink>
             <SubLink href="https://traefik.io/solutions/api-mocking/">
-              API Mocking <Badge>New!</Badge>
+              API Mocking
             </SubLink>
             <SubLink href="https://traefik.io/solutions/api-management/">GitOps-Driven API Management</SubLink>
+            <SubLink href="https://traefik.io/solutions/air-gapped-ai-and-api-management/">Air-Gapped API Management <Badge>New!</Badge></SubLink>
             <SubLink href="https://traefik.io/solutions/waf/">
               Web Application Firewall <Badge>New!</Badge>
             </SubLink>
             <SubLink href="https://traefik.io/solutions/api-governance/">
-              Runtime API Governance <Badge>New!</Badge>
+              Runtime API Governance
             </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>
@@ -91,9 +92,9 @@ const DrawerNav = ({ isDrawerOpen }: Props) => {
             </SubLink>
             <SubLink href="https://traefik.io/solutions/hashicorp-and-traefik/">Traefik & HashiCorp</SubLink>
             <SubLink href="https://traefik.io/solutions/microsoft-and-traefik/">
-              Traefik & Microsoft <Badge>New!</Badge>
+              Traefik & Microsoft 
             </SubLink>
-            <SubLink href="https://traefik.io/solutions/nutanix-and-traefik/">Traefik & Nutanix</SubLink>
+            <SubLink href="https://traefik.io/solutions/nutanix-and-traefik/">Traefik & Nutanix <Badge>New!</Badge></SubLink>
             <SubLink href="https://traefik.io/solutions/oracle-and-traefik/">Traefik & Oracle OCI</SubLink>
           </div>
         </div>

src/components/nav/MainNav.tsx

@@ -16,6 +16,7 @@ import { ReactComponent as TraefikIcon } from '../../images/Traefik-Hub.svg'
 import { ReactComponent as TraefikProxyIcon } from '../../images/TraefikProxy.svg'
 import { ReactComponent as ApiGatewayIcon } from '../../images/APIGateway.svg'
 import { ReactComponent as ApiGovernanceIcon } from '../../images/APIGovernance.svg'
+import { ReactComponent as OfflineApim } from '../../images/OfflineApim.svg'
 import { ReactComponent as ApiMockingIcon } from '../../images/APIMocking.svg'
 import { ReactComponent as APIManagementIcon } from '../../images/APIManagement.svg'
 import { ReactComponent as NginxIcon } from '../../images/Nginx.svg'
@@ -133,6 +134,12 @@ const MainNav = () => {
                     icon: <IconApiGovernance />,
                     url: 'https://traefik.io/solutions/api-governance/',
                   },
+                  {
+                    title: 'Air-Gapped APIM',
+                    external: true,
+                    icon: <OfflineApim />,
+                    url: 'https://traefik.io/solutions/air-gapped-ai-and-api-management/',
+                  },
                   {
                     title: 'API Mocking',
                     external: true,
@@ -150,9 +157,9 @@ const MainNav = () => {
           <Grid
             sx={{
               maxWidth: '1368px',
-              gap: '24px',
+              gap: '20px',
               paddingLeft: '16px',
-              gridTemplateColumns: 'repeat(3, 312px) 344px',
+              gridTemplateColumns: 'repeat(2, 312px) 324px 344px',
             }}
           >
             <Product
@@ -179,6 +186,7 @@ const MainNav = () => {
                   external: true,
                   description: 'Don’t wait for the next vulnerability. Migrate now!',
                   icon: <NginxIcon />,
+                  badge: 'New!',
                 },
               ]}
             />
@@ -191,7 +199,7 @@ const MainNav = () => {
                   url: 'https://traefik.io/solutions/api-gateway/',
                   external: true,
                   description: 'Centralize security and routing in a single entry point for microservices deployments.',
-                  icon: <APIManagementIcon />,
+                  icon: <ApiGatewayIcon />,
                 },
                 {
                   title: 'Web Application Firewall',
@@ -221,7 +229,7 @@ const MainNav = () => {
                   url: 'https://traefik.io/solutions/api-management/',
                   external: true,
                   description: 'Simplifies and Accelerates API lifecycle management.',
-                  icon: <ApiGatewayIcon />,
+                  icon: <APIManagementIcon />,
                 },
                 {
                   title: 'Runtime API Governance',
@@ -230,15 +238,23 @@ const MainNav = () => {
                   description:
                     'Enforce critical runtime API policies for secure, reliable, and compliant API management.',
                   icon: <ApiGovernanceIcon />,
+                },
+                {
+                  title: 'Air-Gapped API Management',
+                  url: 'https://traefik.io/solutions/air-gapped-ai-and-api-management/',
+                  external: true,
+                  description:
+                    'Air-gapped AI & API Platform with Policy-as-Code & Zero-Egress Ops.',
+                  icon: <OfflineApim />,
                   badge: 'New!',
+                  largeText: true
                 },
                 {
                   title: 'API Mocking',
                   url: 'https://traefik.io/solutions/api-mocking/',
                   external: true,
                   description: 'Create, publish, and consume mock APIs with production-like UX and SLAs.',
                   icon: <ApiMockingIcon />,
-                  badge: 'New!',
                 },
               ]}
             />
@@ -259,12 +275,12 @@ const MainNav = () => {
                   external: true,
                   description: 'Run your APIs and AI across any infrastructure, any Kubernetes.',
                   icon: <MicrosoftIcon />,
-                  badge: 'New!',
                 },
                 {
                   title: 'Traefik & Nutanix',
                   url: 'https://traefik.io/solutions/nutanix-and-traefik/',
                   external: true,
+                  badge: 'New!',
                   description: 'Unified Ingress for VMs and Containers',
                   icon: <NutanixIcon />,
                 },

src/components/nav/Product.tsx

@@ -14,6 +14,7 @@ type NavProductProps = {
     description: string
     external: boolean
     badge?: string
+    largeText?: boolean
   }[]
   subLinks?: {
     title: string
@@ -85,7 +86,7 @@ const Product = ({ bgImage, title, description, padding, links, colors = {}, sub
             <NavbarLink external={link.external} url={link.url}>
               <NavLinkIcon>{link.icon}</NavLinkIcon>
               <div>
-                <NavLinkTitle color={colors.heading}>
+                <NavLinkTitle largeText={link.largeText} color={colors.heading}>
                   <span>{link.title}</span>
                   {link.badge && <NavLinkBadge>{link.badge}</NavLinkBadge>}
                 </NavLinkTitle>
@@ -207,18 +208,23 @@ const NavLinkBadge = styled.p`
   margin: 0 0 0 8px;
 `
 
-const NavLinkTitle = styled.div<{ color?: string }>`
+const NavLinkTitle = styled.div<{ color?: string; largeText?: boolean }>`
   display: flex;
-  gap: 2px;
   align-items: center;
   font-size: 16px;
   line-height: 1.38;
   font-weight: 500;
   color: ${(props) => props.color || '#03192d'};
+  white-space: ${(props) => (props.largeText ? 'nowrap' : 'normal')};
+  gap: ${(props) => (props.largeText ? '5px' : '2px')};
+
+  ${NavLinkBadge} {
+    ${(props) => (props.largeText ? 'margin: 0' : '')};
+  }
 `
 
 const NavLinkDescription = styled.span<{ color?: string }>`
-  font-size: 13px;
+  font-size: 14px;
   line-height: 1.14;
   display: block;
   font-weight: 400;