From d9ed207905f129559ee3f244647b4099fb3cfed5 Mon Sep 17 00:00:00 2001
From: Mauricio Siu <siumauricio@icloud.com>
Date: Wed, 11 Mar 2026 11:28:28 -0600
Subject: [PATCH] feat: enhance Header component with improved navigation links

- Updated the MobileNavigation to include new links for Application Deployment and Databases, enhancing feature visibility.
- Replaced the static Features link with a NavigationMenuTrigger for better organization and user interaction.
- Added descriptive content for the new navigation items to improve user experience.
---
 apps/website/components/Header.tsx | 35 +++++++++++++++---------------
 1 file changed, 17 insertions(+), 18 deletions(-)

diff --git a/apps/website/components/Header.tsx b/apps/website/components/Header.tsx
index d45f29d..d144a35 100644
--- a/apps/website/components/Header.tsx
+++ b/apps/website/components/Header.tsx
@@ -107,7 +107,12 @@ function MobileNavigation() {
 						as="div"
 						className="absolute inset-x-0 top-full mt-4 flex origin-top flex-col rounded-2xl border border-border bg-background p-4 text-lg tracking-tight text-primary shadow-xl ring-1 ring-border/5"
 					>
-						<MobileNavLink href="/#features">Features</MobileNavLink>
+						<p className="px-2 py-1 text-xs font-semibold uppercase text-muted-foreground">
+							Features
+						</p>
+						<MobileNavLink href="/features/application-deployment-platform">Application Deployment</MobileNavLink>
+						<MobileNavLink href="/features/database-management-tool">Databases</MobileNavLink>
+						<hr className="m-2 border-border" />
 						<MobileNavLink href="/pricing">Pricing</MobileNavLink>
 						<hr className="m-2 border-border" />
 						<p className="px-2 py-1 text-xs font-semibold uppercase text-muted-foreground">
@@ -205,23 +210,17 @@ export function Header() {
 							<NavigationMenu>
 								<NavigationMenuList>
 									<NavigationMenuItem>
-										<NavigationMenuLink
-											asChild
-											className={navigationMenuTriggerStyle()}
-										>
-											<Link
-												href="/#features"
-												onClick={() =>
-													trackGAEvent({
-														action: "Nav Link Clicked",
-														category: "Navigation",
-														label: "/#features",
-													})
-												}
-											>
-												Features
-											</Link>
-										</NavigationMenuLink>
+										<NavigationMenuTrigger>Features</NavigationMenuTrigger>
+										<NavigationMenuContent>
+											<ul className="grid w-[200px] gap-1 p-2">
+												<ListItem href="/features/application-deployment-platform" title="Application Deployment">
+													Deploy and manage applications with ease
+												</ListItem>
+												<ListItem href="/features/database-management-tool" title="Databases">
+													Manage your databases effortlessly
+												</ListItem>
+											</ul>
+										</NavigationMenuContent>
 									</NavigationMenuItem>
 
 									<NavigationMenuItem>