✨ create new login page

create all UI components on the login page, including the header, login form, and OAuth selection

features/auth/ui/OAuthProviders.tsx

@@ -0,0 +1,45 @@
+import { Button } from "@heroui/react";
+import { Icon } from "@iconify/react";
+import React from "react";
+
+const OAuthProviders = () => {
+  // set to true if there are other providers coming soon
+  const comingSoonProviders: boolean = true;
+
+  // Provider for third-party auth
+  const oAuthProviders = [
+    {
+      name: "Google",
+      icon: "logos:google-icon",
+    },
+    {
+      name: "Discord",
+      icon: "logos:discord-icon",
+    },
+  ];
+
+  return (
+    <div className="w-full flex flex-col gap-2 mt-4">
+      {oAuthProviders.map((provider, index) => {
+        return (
+          <Button
+            key={index}
+            className="w-full hover:bg-neutral-800"
+            variant="bordered"
+            startContent={<Icon icon={provider.icon} />}
+          >
+            Continue with {provider.name}
+          </Button>
+        );
+      })}
+
+      {comingSoonProviders && (
+        <Button className="w-full" variant="ghost" isDisabled>
+          Other login options will come soon
+        </Button>
+      )}
+    </div>
+  );
+};
+
+export default OAuthProviders;