🚩 (login) create login page

app/(clear)/login/page.tsx

@@ -1,14 +1,19 @@
-import LoginCard from "@/widgets/login/card";
+import LoginCard from "@/widgets/login/loginCard/Index";
 import React from "react";
 
 const page = () => {
   return (
+    <>
+      {/* Fixed background overlay */}
       <div className="relative w-screen h-screen bg-red-500 bg-[url('/assets/pages/login/a78h12j89a01n.jpg')] bg-cover bg-center">
+        {/* Fixed background overlay */}
         <div className="fixed z-0 w-screen h-screen backdrop-blur-xl bg-black bg-opacity-70" />
+        {/* Login card centered on the screen */}
         <div className="fixed z-10 w-screen h-screen flex justify-center items-center">
           <LoginCard />
         </div>
       </div>
+    </>
   );
 };
 

bun.lock

@@ -5,6 +5,7 @@
       "name": "frontend",
       "dependencies": {
         "@heroui/react": "^2.7.11",
+        "@iconify/react": "^6.0.0",
         "commitizen": "^4.3.1",
         "cz-emoji": "^1.3.2-canary.2",
         "framer-motion": "^12.23.3",
@@ -238,6 +239,10 @@
 
     "@humanwhocodes/retry": ["@humanwhocodes/retry@0.4.3", "", {}, "sha512-bV0Tgo9K4hfPCek+aMAn81RppFKv2ySDQeMoSZuvTASywNTnVJCArCZE2FWqpvIatKu7VMRLWlR1EazvVhDyhQ=="],
 
+    "@iconify/react": ["@iconify/react@6.0.0", "", { "dependencies": { "@iconify/types": "^2.0.0" }, "peerDependencies": { "react": ">=16" } }, "sha512-eqNscABVZS8eCpZLU/L5F5UokMS9mnCf56iS1nM9YYHdH8ZxqZL9zyjSwW60IOQFsXZkilbBiv+1paMXBhSQnw=="],
+
+    "@iconify/types": ["@iconify/types@2.0.0", "", {}, "sha512-+wluvCrRhXrhyOmRDJ3q8mux9JkKy5SJ/v8ol2tu4FVjyYvtEzkc/3pK15ET6RKg4b4w4BmTk1+gsCUhf21Ykg=="],
+
     "@img/sharp-darwin-arm64": ["@img/sharp-darwin-arm64@0.34.3", "", { "optionalDependencies": { "@img/sharp-libvips-darwin-arm64": "1.2.0" }, "os": "darwin", "cpu": "arm64" }, "sha512-ryFMfvxxpQRsgZJqBd4wsttYQbCxsJksrv9Lw/v798JcQ8+w84mBWuXwl+TT0WJ/WrYOLaYpwQXi3sA9nTIaIg=="],
 
     "@img/sharp-darwin-x64": ["@img/sharp-darwin-x64@0.34.3", "", { "optionalDependencies": { "@img/sharp-libvips-darwin-x64": "1.2.0" }, "os": "darwin", "cpu": "x64" }, "sha512-yHpJYynROAj12TA6qil58hmPmAwxKKC7reUqtGLzsOHfP7/rniNGTL8tjWX6L3CTV4+5P4ypcS7Pp+7OB+8ihA=="],

package.json

@@ -12,6 +12,7 @@
   },
   "dependencies": {
     "@heroui/react": "^2.7.11",
+    "@iconify/react": "^6.0.0",
     "commitizen": "^4.3.1",
     "cz-emoji": "^1.3.2-canary.2",
     "framer-motion": "^12.23.3",

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;