Top Navigation Bar

<BbCard class="w-full rounded-none border-x-0 border-t-0">
    <div class="flex items-center justify-between px-6 py-3">
        @* Left section *@
        <div class="flex items-center gap-6">
            <a href="#" class="flex items-center gap-2 font-bold text-foreground hover:text-foreground/80 transition-colors">
                <!-- hexagon icon SVG -->
                Acme Inc
            </a>

            <BbNavigationMenu>
                <BbNavigationMenuList>
                    <BbNavigationMenuItem Value="products">
                        <BbNavigationMenuTrigger>Products</BbNavigationMenuTrigger>
                        <BbNavigationMenuContent>
                            <div class="grid gap-3 p-4 w-[500px] grid-cols-2">
                                <a href="#" class="flex items-start gap-3 rounded-md p-3 hover:bg-muted transition-colors">
                                    <!-- bar-chart-3 icon SVG -->
                                    <div>
                                        <div class="text-sm font-medium">Analytics</div>
                                        <p class="text-xs text-muted-foreground">Track your metrics and KPIs</p>
                                    </div>
                                </a>
                                <a href="#" class="flex items-start gap-3 rounded-md p-3 hover:bg-muted transition-colors">
                                    <!-- zap icon SVG -->
                                    <div>
                                        <div class="text-sm font-medium">Automation</div>
                                        <p class="text-xs text-muted-foreground">Streamline your workflows</p>
                                    </div>
                                </a>
                                <a href="#" class="flex items-start gap-3 rounded-md p-3 hover:bg-muted transition-colors">
                                    <!-- shield icon SVG -->
                                    <div>
                                        <div class="text-sm font-medium">Security</div>
                                        <p class="text-xs text-muted-foreground">Protect your data and users</p>
                                    </div>
                                </a>
                                <a href="#" class="flex items-start gap-3 rounded-md p-3 hover:bg-muted transition-colors">
                                    <!-- puzzle icon SVG -->
                                    <div>
                                        <div class="text-sm font-medium">Integrations</div>
                                        <p class="text-xs text-muted-foreground">Connect with your favorite tools</p>
                                    </div>
                                </a>
                            </div>
                        </BbNavigationMenuContent>
                    </BbNavigationMenuItem>

                    <BbNavigationMenuItem Value="solutions">
                        <BbNavigationMenuTrigger>Solutions</BbNavigationMenuTrigger>
                        <BbNavigationMenuContent>
                            <div class="grid gap-1 p-4 w-[280px]">
                                <a href="#" class="block rounded-md p-3 hover:bg-muted transition-colors">
                                    <div class="text-sm font-medium">Enterprise</div>
                                    <p class="text-xs text-muted-foreground">Solutions for large organizations</p>
                                </a>
                                <a href="#" class="block rounded-md p-3 hover:bg-muted transition-colors">
                                    <div class="text-sm font-medium">Startups</div>
                                    <p class="text-xs text-muted-foreground">Move fast and ship with confidence</p>
                                </a>
                                <a href="#" class="block rounded-md p-3 hover:bg-muted transition-colors">
                                    <div class="text-sm font-medium">Developers</div>
                                    <p class="text-xs text-muted-foreground">Tools and resources for builders</p>
                                </a>
                            </div>
                        </BbNavigationMenuContent>
                    </BbNavigationMenuItem>

                    <BbNavigationMenuItem>
                        <BbNavigationMenuLink Href="#">Pricing</BbNavigationMenuLink>
                    </BbNavigationMenuItem>
                </BbNavigationMenuList>
            </BbNavigationMenu>
        </div>

        @* Right section *@
        <div class="flex items-center gap-3">
            <div class="relative">
                <!-- search icon SVG -->
                <BbInput type="text" placeholder="Search..." class="w-40 pl-8 h-9" />
            </div>

            <BbButton Variant="ButtonVariant.Ghost" Size="ButtonSize.Icon">
                <!-- bell icon SVG -->
            </BbButton>

            <BbAvatar>
                <BbAvatarFallback>JD</BbAvatarFallback>
            </BbAvatar>
        </div>
    </div>
</BbCard>