diff --git a/src/components/nav/DrawerNav.tsx b/src/components/nav/DrawerNav.tsx index d6fd034..4706093 100644 --- a/src/components/nav/DrawerNav.tsx +++ b/src/components/nav/DrawerNav.tsx @@ -44,8 +44,9 @@ const DrawerNav = ({ isDrawerOpen }: Props) => {
Traefik Proxy Traefik Hub API Gateway - Traefik Enterprise Traefik Hub API Management + AI Gateway + API Mocking
@@ -112,6 +113,25 @@ const DrawerNav = ({ isDrawerOpen }: Props) => { +
toggleMenu(e)}> + + Compare + + + + +
+ vs Kong Konnect + vs AWS API Gateway + vs Azure APIM + vs NGINX + vs Solo.io Gloo Gateway + vs Tyk + vs Gravitee + vs Envoy Gateway +
+
+
Pricing diff --git a/src/components/nav/MainNav.tsx b/src/components/nav/MainNav.tsx index 1b5e5bb..cbadde7 100644 --- a/src/components/nav/MainNav.tsx +++ b/src/components/nav/MainNav.tsx @@ -5,10 +5,15 @@ import NavItem from './NavItem' import Product from './Product' import * as MenuColumn from './MenuColumn' import useGetLastPost from 'hooks/use-get-last-post' +import { ReactComponent as IconKubernetes } from '../../images/IconKubernetes.svg' +import { ReactComponent as IconDockerSwarm } from '../../images/IconDockerSwarm.svg' +import { ReactComponent as IconApiGovernance } from '../../images/IconApiGovernance.svg' +import { ReactComponent as IconsApiMocks } from '../../images/IconsApiMocks.svg' +import { ReactComponent as IconAiGateway } from '../../images/IconAiGateway.svg' +import { ReactComponent as IconWaf } from '../../images/IconWaf.svg' import { ReactComponent as TraefikHubIcon } from '../../images/Traefikhub.svg' import { ReactComponent as TraefikIcon } from '../../images/Traefik-Hub.svg' import { ReactComponent as TraefikProxyIcon } from '../../images/TraefikProxy.svg' -import { ReactComponent as TraefikEnterpriseIcon } from '../../images/TraefikEnterprise.svg' import { ReactComponent as ApiGatewayIcon } from '../../images/APIGateway.svg' import { ReactComponent as ApiGovernanceIcon } from '../../images/APIGovernance.svg' import { ReactComponent as ApiMockingIcon } from '../../images/APIMocking.svg' @@ -31,6 +36,7 @@ import { ReactComponent as WafIcon } from '../../images/menu_icons_waf.svg' import { ReactComponent as HashicorpIcon } from '../../images/menu_icons_hashicorp.svg' import { ReactComponent as AiGatewayIcon } from '../../images/menu_icons_ai_gateway.svg' import PostCard from './PostCard' +import NavHeader from './NavHeader' const Wrapper = styled(Flex)` display: none; @@ -48,59 +54,85 @@ const MainNav = () => { {/* Products */} - - , - }, - ]} - bgImage={'https://traefik.io/images/site-nav/PatternBG-3@3x.png'} - /> - , - }, - { - title: 'Traefik Enterprise', - url: 'https://traefik.io/traefik-enterprise/', - external: true, - description: 'Standalone General-Purpose API Gateway', - icon: , - }, - ]} - bgImage={'https://traefik.io/images/site-nav/PatternBG-1@3x.png'} - /> - , - }, - ]} - bgImage={'https://traefik.io/images/site-nav/PatternBG-2@3x.png'} - /> + + + + , + }, + ]} + subLinks={[ + { + title: 'Kubernetes Ingress', + external: true, + icon: , + url: 'https://traefik.io/solutions/kubernetes-ingress/', + }, + { + title: 'Docker Swarm Ingress', + external: true, + icon: , + url: 'https://traefik.io/solutions/docker-swarm-ingress/', + }, + ]} + /> + , + }, + ]} + subLinks={[ + { + title: 'Web Application Firewall', + external: true, + icon: , + url: 'https://traefik.io/solutions/waf/', + }, + { + title: 'AI Gateway', + external: true, + icon: , + url: 'https://traefik.io/solutions/ai-gateway/', + }, + ]} + /> + , + }, + ]} + subLinks={[ + { + title: 'API Governance', + external: true, + icon: , + url: 'https://traefik.io/solutions/api-governance/', + }, + { + title: 'API Mocking', + external: true, + icon: , + url: 'https://traefik.io/solutions/api-mocking/', + }, + ]} + /> + @@ -183,7 +215,8 @@ const MainNav = () => { title: 'Runtime API Governance', url: 'https://traefik.io/solutions/api-governance/', external: true, - description: 'Enforce critical runtime API policies for secure, reliable, and compliant API management.', + description: + 'Enforce critical runtime API policies for secure, reliable, and compliant API management.', icon: , badge: 'New!', }, @@ -264,6 +297,41 @@ const MainNav = () => { + + + + + + + + + + + + + + + {/* Pricing */} diff --git a/src/components/nav/MenuColumn.tsx b/src/components/nav/MenuColumn.tsx index a9c9a34..605505b 100644 --- a/src/components/nav/MenuColumn.tsx +++ b/src/components/nav/MenuColumn.tsx @@ -1,7 +1,8 @@ import React from 'react' import styled from 'styled-components' import Link from 'components/Link' -import { Box, Text, theme } from '@containous/faency' +import { Box, Text } from '@containous/faency' +import { ReactComponent as ArrowRight } from '../../images/arrow-right.svg' const Links = styled.ul` list-style: none; @@ -21,16 +22,28 @@ const Links = styled.ul` font-size: 16px; line-height: 1.38; font-weight: 500; - color: ${theme.colors.dark}; + color: #354757; text-decoration: none; + svg { + color: #677581; + } + + i svg { + opacity: 0; + transition: opacity 0.2s ease-in-out; + } + &:hover { - color: #1f56d6; + color: #000; text-decoration: none; - p:first-of-type { - color: #1f56d6; - text-decoration: none; + svg { + color: #000; + } + + i svg { + opacity: 1; } span: { @@ -60,11 +73,11 @@ export const Column: React.FC = ({ title, children }) => ( @@ -87,7 +100,7 @@ export const Item: React.FC = ({ href, external, title, log {external ? ( {logo ? ( - + {logo} {title} @@ -97,6 +110,9 @@ export const Item: React.FC = ({ href, external, title, log ) : ( title )} + + + ) : ( diff --git a/src/components/nav/NavHeader.tsx b/src/components/nav/NavHeader.tsx new file mode 100644 index 0000000..b45dd82 --- /dev/null +++ b/src/components/nav/NavHeader.tsx @@ -0,0 +1,36 @@ +import styled from 'styled-components' + +type Props = { + title: string + bgImage?: string +} + +const NavHeader = (props: Props) => { + return ( + + {props.title} + + + ) +} + +export default NavHeader + +const Wrapper = styled.div` + padding: 24px 24px 18px; + font-size: 20px; + font-weight: 500; + line-height: 1.1; + color: #03192d; + border-bottom: solid 1px #9aa3ab33; + position: relative; +` diff --git a/src/components/nav/NavItem.tsx b/src/components/nav/NavItem.tsx index 7a3a10f..0cba546 100644 --- a/src/components/nav/NavItem.tsx +++ b/src/components/nav/NavItem.tsx @@ -102,7 +102,7 @@ const Menu = styled(Box)` const MenuInner = styled(Box)` background: ${theme.colors.menuBg}; - border-radius: 8px; + border-radius: 16px; box-shadow: 0 11px 15px -7px rgba(0, 0, 0, 0.2), 0 9px 46px 8px rgba(0, 0, 0, 0.12), 0 24px 38px 3px rgba(0, 0, 0, 0.14); overflow: hidden; diff --git a/src/components/nav/Product.tsx b/src/components/nav/Product.tsx index 45897bb..fecdb4b 100644 --- a/src/components/nav/Product.tsx +++ b/src/components/nav/Product.tsx @@ -4,60 +4,73 @@ import { Box, Text, Heading } from '@containous/faency' import Link from 'components/Link' type NavProductProps = { - title: string + title?: string description?: string links?: { title: string url: string icon: any description: string - tagColor?: string - tag?: string external: boolean badge?: string }[] - bgImage: string + subLinks?: { + title: string + url: string + icon: ReactNode + external: boolean + badge?: string + }[] + bgImage?: string } type NavbarLinkProps = { url: string external: boolean children: ReactNode + styles?: any } -const Product = ({ bgImage, title, description, links }: NavProductProps) => ( - - - - {title} - - - {description} - +const Product = ({ bgImage, title, description, links, subLinks = [] }: NavProductProps) => ( + + {bgImage && ( + + )} + {title && ( + + {title} + + )} + {description && ( + + {description} + + )} {links && links.map((link) => ( @@ -67,7 +80,6 @@ const Product = ({ bgImage, title, description, links }: NavProductProps) => (
{link.title} - {link.tag && {link.tag}} {link.badge && {link.badge}} {link.description} @@ -76,20 +88,36 @@ const Product = ({ bgImage, title, description, links }: NavProductProps) => ( ))} + {subLinks.length ? ( + + {subLinks.map((link) => ( +
  • + +
    {link.icon}
    +
    + {link.title} +
    +     +
    • + ))} +     + ) : null} ) -const NavbarLink: React.FC = ({ children, external, url }) => { +const NavbarLink: React.FC = ({ children, external, url, styles }) => { + const style = styles ? { ...styles } : { textDecoration: 'none', padding: '8px', borderRadius: '8px' } + if (external) { return ( - + {children} ) } return ( - + {children} ) @@ -98,7 +126,7 @@ const NavbarLink: React.FC = ({ children, external, url }) => { const Links = styled.ul` list-style: none; padding: 0; - margin: 16px 0 0; + margin: 0; position: relative; margin li { padding: 0; @@ -123,6 +151,36 @@ const Links = styled.ul` } } ` + +const SubLinks = styled.ul` + list-style: none; + padding: 0; + padding-left: 56px; + margin: 8px 0 0; + position: relative; + + li + li { + margin-top: 8px; + } + + svg { + width: 20px; + height: 20px; + } + + a { + font-size: 14px; + font-weight: 400; + gap: 8px; + line-height: 1.43; + color: #354757; + + &:hover { + font-weight: 600; + } + } +` + const NavLinkIcon = styled.div` margin-right: 16px; flex-shrink: 0; @@ -160,17 +218,4 @@ const NavLinkDescription = styled.span` color: '#4e5e6c'; ` -const NavLinkTag = styled.div<{ tagColor?: string }>` - font-size: 11px; - font-weight: 500; - line-height: normal; - height: 16px; - border-radius: 2px; - color: ${({ tagColor }) => tagColor || '#7f8c2b'}; - margin-left: 8px; - padding: 1px 3px 1px; - border: solid 1px ${({ tagColor }) => (tagColor ? 'rgba(177, 64, 245, 0.5)' : 'rgba(127, 140, 43, 0.5)')}; - background-color: ${({ tagColor }) => (tagColor ? 'rgba(177, 64, 245, 0.15)' : 'rgba(127, 140, 43, 0.15)')}; -` - export default Product diff --git a/src/images/IconAiGateway.svg b/src/images/IconAiGateway.svg new file mode 100644 index 0000000..7433154 --- /dev/null +++ b/src/images/IconAiGateway.svg @@ -0,0 +1,43 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/src/images/IconApiGovernance.svg b/src/images/IconApiGovernance.svg new file mode 100644 index 0000000..4adf0fc --- /dev/null +++ b/src/images/IconApiGovernance.svg @@ -0,0 +1,32 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/src/images/IconDockerSwarm.svg b/src/images/IconDockerSwarm.svg new file mode 100644 index 0000000..8f03c4a --- /dev/null +++ b/src/images/IconDockerSwarm.svg @@ -0,0 +1,22 @@ + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/src/images/IconKubernetes.svg b/src/images/IconKubernetes.svg new file mode 100644 index 0000000..6c4267a --- /dev/null +++ b/src/images/IconKubernetes.svg @@ -0,0 +1,50 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/src/images/IconWaf.svg b/src/images/IconWaf.svg new file mode 100644 index 0000000..6eebd68 --- /dev/null +++ b/src/images/IconWaf.svg @@ -0,0 +1,65 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/src/images/IconsApiMocks.svg b/src/images/IconsApiMocks.svg new file mode 100644 index 0000000..905f50e --- /dev/null +++ b/src/images/IconsApiMocks.svg @@ -0,0 +1,31 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/src/images/arrow-right.svg b/src/images/arrow-right.svg new file mode 100644 index 0000000..907ac0b --- /dev/null +++ b/src/images/arrow-right.svg @@ -0,0 +1,6 @@ + + + + + + \ No newline at end of file diff --git a/src/images/menu_icons_academy.svg b/src/images/menu_icons_academy.svg index 9733d9e..5ddc193 100644 --- a/src/images/menu_icons_academy.svg +++ b/src/images/menu_icons_academy.svg @@ -1,3 +1,5 @@ - - + + \ No newline at end of file diff --git a/src/images/menu_icons_blog.svg b/src/images/menu_icons_blog.svg index c50b993..c66e64e 100644 --- a/src/images/menu_icons_blog.svg +++ b/src/images/menu_icons_blog.svg @@ -1,3 +1,5 @@ - - + + \ No newline at end of file diff --git a/src/images/menu_icons_community.svg b/src/images/menu_icons_community.svg index 04b94ab..902ffd7 100644 --- a/src/images/menu_icons_community.svg +++ b/src/images/menu_icons_community.svg @@ -1,7 +1,10 @@ - - - - + + + + - + \ No newline at end of file diff --git a/src/images/menu_icons_events.svg b/src/images/menu_icons_events.svg index 95bc2d2..a0b2bb9 100644 --- a/src/images/menu_icons_events.svg +++ b/src/images/menu_icons_events.svg @@ -1,3 +1,5 @@ - - + + \ No newline at end of file diff --git a/src/images/menu_icons_forum.svg b/src/images/menu_icons_forum.svg index 94a45f3..118f042 100644 --- a/src/images/menu_icons_forum.svg +++ b/src/images/menu_icons_forum.svg @@ -1,3 +1,5 @@ - - + + \ No newline at end of file diff --git a/src/images/menu_icons_list.svg b/src/images/menu_icons_list.svg index 4f269c2..bc564ad 100644 --- a/src/images/menu_icons_list.svg +++ b/src/images/menu_icons_list.svg @@ -1,3 +1,5 @@ - - + + \ No newline at end of file diff --git a/src/images/menu_icons_plugin.svg b/src/images/menu_icons_plugin.svg index 1c593b1..f82871c 100644 --- a/src/images/menu_icons_plugin.svg +++ b/src/images/menu_icons_plugin.svg @@ -1,3 +1,5 @@ - - + + \ No newline at end of file diff --git a/src/images/menu_icons_resources.svg b/src/images/menu_icons_resources.svg index 1ff55cd..976518f 100644 --- a/src/images/menu_icons_resources.svg +++ b/src/images/menu_icons_resources.svg @@ -1,3 +1,5 @@ - - + + \ No newline at end of file diff --git a/src/images/menu_icons_star.svg b/src/images/menu_icons_star.svg index 3f3373d..241a915 100644 --- a/src/images/menu_icons_star.svg +++ b/src/images/menu_icons_star.svg @@ -1,3 +1,5 @@ - - + + \ No newline at end of file diff --git a/src/images/menu_icons_traefik_enterprise.svg b/src/images/menu_icons_traefik_enterprise.svg index 705de02..04667f0 100644 --- a/src/images/menu_icons_traefik_enterprise.svg +++ b/src/images/menu_icons_traefik_enterprise.svg @@ -1,11 +1,14 @@ - + - + - + - + - + \ No newline at end of file diff --git a/src/images/menu_icons_traefik_hub.svg b/src/images/menu_icons_traefik_hub.svg index 23de5d6..0ca77da 100644 --- a/src/images/menu_icons_traefik_hub.svg +++ b/src/images/menu_icons_traefik_hub.svg @@ -1,11 +1,14 @@ - + - + - + - + - + \ No newline at end of file diff --git a/src/images/menu_icons_traefik_proxy.svg b/src/images/menu_icons_traefik_proxy.svg index 8ee6f3c..2460d8e 100644 --- a/src/images/menu_icons_traefik_proxy.svg +++ b/src/images/menu_icons_traefik_proxy.svg @@ -1,11 +1,14 @@ - + - + - + - + - + \ No newline at end of file