feat: update solutions menu with WAF and Hashicorp pages (#40)

* feat: updated menu items

* feat: added menu items for mobile

* fix: styles, added full url and set external field true

* fix: font color and font size

Author: anshpayal

src/components/nav/DrawerNav.tsx

@@ -48,7 +48,9 @@ const DrawerNav = ({ isDrawerOpen }: Props) => {
           <div className="sub-menu">
             <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</SubLink>
             <SubLink href="https://traefik.io/solutions/api-management/">API Management</SubLink>
+            <SubLink href="https://traefik.io/solutions/waf/">Web Application Firewall</SubLink>
             <SubLink href="https://traefik.io/solutions/api-gateway/">API Gateway</SubLink>
           </div>
         </div>

src/components/nav/MainNav.tsx

@@ -25,6 +25,8 @@ import { ReactComponent as CommunityIcon } from '../../images/menu_icons_communi
 import { ReactComponent as ProxyIcon } from '../../images/menu_icons_traefik_proxy.svg'
 import { ReactComponent as EnterpriseIcon } from '../../images/menu_icons_traefik_enterprise.svg'
 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 PostCard from './PostCard'
 
 const Wrapper = styled(Flex)`
@@ -137,6 +139,20 @@ const MainNav = () => {
                   description: 'Centralize security and routing in a single entry point for microservices deployments.',
                   icon: <APIManagementIcon />,
                 },
+                {
+                  title: 'Web Application Firewall',
+                  url: 'https://traefik.io/solutions/waf/',
+                  external: true,
+                  description: 'Protect your APIs from threats with speed and efficiency',
+                  icon: <WafIcon />,
+                },
+                {
+                  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 />,
+                },
               ]}
               bgImage={'https://traefik.io/images/site-nav/[email protected]'}
             />