chore(social): login page design

omsimos · Aug 14, 2024 · c81445f · c81445f
1 parent 028648a
commit c81445f
Showing 1 changed file with 22 additions and 15 deletions.
diff --git a/apps/social/src/app/(authentication)/login/page.tsx b/apps/social/src/app/(authentication)/login/page.tsx
@@ -45,25 +45,32 @@ export default async function Login() {
   }
 
   return (
-    <section className="max-w-lg md:max-w-md container mt-24 min-h-screen">
+    <section className="container pt-16 lg:pt-20 flex flex-col items-center">
       <BrowserWarning />
-
-      <div className="mb-6">
-        <h2 className="text-2xl tracking-tight font-semibold">
-          Umamin Account
-        </h2>
-        <p className="text-sm text-muted-foreground">
-          Proceed with your Umamin v2.0 profile
+      <div className="border-b-2 border-muted border-dashed pb-5 mb-10 sm:text-center inline-block">
+        <h1 className="font-bold md:text-6xl text-[10vw] leading-none dark:bg-gradient-to-b from-foreground dark:to-zinc-400 bg-clip-text bg-zinc-800 text-transparent tracking-tighter text-nowrap">
+          Umamin Social
+        </h1>
+        <p className="text-muted-foreground md:text-lg mt-2">
+          The <span className="text-foreground font-medium">Umamin v2.0</span>{" "}
+          Next generation open-source social platform
         </p>
       </div>
 
-      <LoginForm />
-
-      <div className="mt-4 text-center text-sm w-full">
-        Don&apos;t have an account?{" "}
-        <Link href="/register" className="underline">
-          Sign up
-        </Link>
+      <div className="max-w-md w-full mx-auto">
+        <div className="mb-6">
+          <h2 className="text-2xl tracking-tight font-semibold">Account</h2>
+          <p className="text-sm text-muted-foreground">
+            Proceed with your Umamin v2.0 profile
+          </p>
+        </div>
+        <LoginForm />
+        <div className="mt-4 text-center text-sm w-full">
+          Don&apos;t have an account?{" "}
+          <Link href="/register" className="underline">
+            Sign up
+          </Link>
+        </div>
       </div>
     </section>
   );