🚩 (login) create login page

widgets/login/card.tsx

@@ -1,32 +0,0 @@
-"use client";
-
-import React from "react";
-import { Button, Card, Divider, input, Input } from "@heroui/react";
-
-const LoginCard = () => {
-  return (
-    <Card className="px-8 py-12">
-      <h1 className="text-3xl font-light text-center">Welcome Back</h1>
-      <Input
-        className="w-[420px] mt-8"
-        label="Email"
-        type="email"
-        variant="bordered"
-        classNames={{
-          input: "text-md font-light pt-4",
-          inputWrapper: "flex gap-10",
-        }}
-      />
-      <Button className="mt-4" color="primary">
-        Sign In
-      </Button>
-      <div className="flex w-full items-center mt-6">
-        <Divider className="flex-1" />
-        <span className="px-2 text-neutral-500 text-sm">or</span>
-        <Divider className="flex-1" />
-      </div>
-    </Card>
-  );
-};
-
-export default LoginCard;

widgets/login/loginCard/ContinueWithProviders.tsx

@@ -0,0 +1,29 @@
+import { Button } from "@heroui/react";
+import { Icon } from "@iconify/react";
+import React from "react";
+
+const ContinueWithProviders = () => {
+  return (
+    <div className="w-full flex flex-col gap-2 mt-4">
+      <Button
+        className="w-full hover:bg-neutral-800"
+        variant="bordered"
+        startContent={<Icon icon="logos:google-icon" />}
+      >
+        Continue with Google
+      </Button>
+      <Button
+        className="w-full hover:bg-neutral-800"
+        variant="bordered"
+        startContent={<Icon icon="logos:discord-icon" />}
+      >
+        Continue with Discord
+      </Button>
+      <Button className="w-full" variant="ghost" isDisabled>
+        Other login options will come soon
+      </Button>
+    </div>
+  );
+};
+
+export default ContinueWithProviders;

widgets/login/loginCard/EmailForm.tsx

@@ -0,0 +1,25 @@
+import { Button, Form, Input } from "@heroui/react";
+import React from "react";
+
+const EmailForm = () => {
+  return (
+    // Form component to handle email input
+    <Form className="mt-12 sm:mt-8">
+      <Input
+        className="w-full sm:w-[420px] "
+        label="Email"
+        type="email"
+        variant="bordered"
+        classNames={{
+          input: "text-md font-light pt-4",
+          inputWrapper: "flex gap-10",
+        }}
+      />
+      <Button className="mt-2 w-full" color="primary">
+        Continue
+      </Button>
+    </Form>
+  );
+};
+
+export default EmailForm;

widgets/login/loginCard/Index.tsx

@@ -0,0 +1,37 @@
+"use client";
+
+import { Card, Divider, Link } from "@heroui/react";
+import React from "react";
+import EmailForm from "./EmailForm";
+import ContinueWithProviders from "./ContinueWithProviders";
+
+const LoginCard = () => {
+  return (
+    <Card className="px-6 sm:px-8 py-12 sm:py-8 h-screen sm:h-auto w-screen sm:w-auto">
+      <h1 className="text-3xl font-light text-center">Welcome Back</h1>
+
+      {/* Email form */}
+      <EmailForm />
+
+      {/* Sign up link */}
+      <p className="text-center text-neutral-300 text-sm font-light mt-5">
+        Don't have an account?{" "}
+        <Link className="text-sm font-medium" href="/sign-up">
+          Sign Up
+        </Link>
+      </p>
+
+      {/* Divider between email form and third-party login options */}
+      <div className="flex w-full items-center mt-4">
+        <Divider className="flex-1" />
+        <span className="px-2 text-neutral-500 text-sm">or</span>
+        <Divider className="flex-1" />
+      </div>
+
+      {/* Buttons for third-party login options */}
+      <ContinueWithProviders />
+    </Card>
+  );
+};
+
+export default LoginCard;