💄 style: create signin button and refine the navbar layouts

shared/widgets/navbar/components/Navbar.tsx

@@ -1,18 +1,24 @@
 "use client";
 import Image from "next/image";
 import NavigationLink from "./NavigationLink";
+import SignIn from "./SignIn";
 
 const Navbar = () => {
   return (
-    <div className="absolute z-10 top-0 w-full h-16 flex items-center">
-      <Image
-        src="/logo/astofo-long.png"
-        alt="Astofo Logo"
-        width={120}
-        height={0}
-        draggable={false}
-      />
-      <NavigationLink />
+    <div className="absolute z-10 top-0 w-full h-16 flex items-center justify-between">
+      <div className="flex items-center">
+        <Image
+          src="/logo/astofo-long.png"
+          alt="Astofo Logo"
+          width={120}
+          height={0}
+          draggable={false}
+        />
+        <NavigationLink />
+      </div>
+      <div>
+        <SignIn />
+      </div>
     </div>
   );
 };

shared/widgets/navbar/components/SignIn.tsx

@@ -0,0 +1,15 @@
+import { Button } from "@/shared/libs/shadcn/ui/button";
+import { LogIn } from "lucide-react";
+
+const SignIn = () => {
+  return (
+    <div>
+      <Button className="cursor-pointer">
+        <LogIn />
+        Sign In
+      </Button>
+    </div>
+  );
+};
+
+export default SignIn;