Use Zudoku button styling for header Login/Sign Up, rename Sign in to Login

src/components/HeadNavigation.tsx

@@ -1,22 +1,15 @@
 import React from "react";
+import { Button } from "zudoku/components";
 
-// Styled to match the Zuplo marketing site navbar (~/zuplo/www):
-// a pink "Login" text link plus a dark rounded "Sign Up" pill button.
 export const HeadNavigation = () => {
   return (
-    <div className="flex items-center gap-4 mr-2">
-      <a
-        className="hidden items-center text-sm font-semibold text-pink-500 transition-colors hover:text-pink-400 sm:flex"
-        href="https://portal.zuplo.com"
-      >
-        Login
-      </a>
-      <a
-        className="flex h-8 w-fit items-center justify-center rounded-full border border-white/[0.12] bg-[hsl(231_18%_15.3%)] px-4 text-sm font-normal text-white shadow-[inset_0_1px_2px_rgba(255,255,255,0.25),0_3px_3px_-1.5px_rgba(16,24,40,0.06),0_1px_1px_rgba(16,24,40,0.08)] transition-all ease-out hover:bg-[hsl(231_18%_20%)] active:scale-95"
-        href="https://zuplo.com/signup"
-      >
-        Sign Up
-      </a>
+    <div className="flex gap-2 mr-2">
+      <Button variant="ghost" asChild>
+        <a href="https://portal.zuplo.com/">Login</a>
+      </Button>
+      <Button asChild>
+        <a href="https://portal.zuplo.com/signup">Start for Free</a>
+      </Button>
     </div>
   );
 };