function MobileMenu() {
  const [open, setOpen] = useState(false);
  return (
    <Sheet open={open} onOpenChange={setOpen}>
      <SheetTrigger asChild>
        <Button
          className="md:hidden bg-blue-800 hover:bg-blue-600 ml-auto"
          aria-label="Toggle menu"
        >
          <Menu className="h-6 w-6 text-white" />
        </Button>
      </SheetTrigger>
      <SheetContent side="top">
        <Separator className="my-4 mt-8" />
        <nav className="flex flex-col gap-4 mt-8">
          <ul className="flex flex-col space-y-4">
            {navigationLinks.map((link) => (
              <li key={link.label}>
                <Link
                  href={link.href}
                  className="block text-xl text-gray-600 hover:text-blue-600 transition-colors text-center"
                  onClick={() => setOpen(false)}
                >
                  {link.label}
                </Link>
              </li>
            ))}
            <Separator className="my-4" />
            <li className="pt-4">
              <Link href="#pricing">
                <Button
                  variant="default"
                  aria-label="Try for free"
                  className="bg-blue-800 text-white hover:bg-blue-600 px-4 py-4 rounded w-full text-lg"
                >
                  Try For Free
                </Button>
              </Link>
            </li>
          </ul>
        </nav>
      </SheetContent>
    </Sheet>
  );
}

Simplify Messaging
Empower Systems
Integrate Seamlessly