feat: added labeled input and texbox stying

src/app/globals.css

@@ -21,6 +21,10 @@
   --danger-100: rgba(220, 38, 38, 1);
 
   --button-text-size: 18px;
+
+  --textbox-50: rgb(204, 204, 204, 0.5);
+  --textbox-75: rgb(204, 204, 204, 0.75);
+  --textbox-100: rgb(204, 204, 204, 1);
 }
 
 @media (prefers-color-scheme: dark) {

src/app/login/login.module.css

@@ -0,0 +1,14 @@
+/* /home/max/Git/MeetUp/src/app/login/login.module.css */
+.loginContainer {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  min-height: 100vh;
+  gap: 1.5rem;
+  padding: 2rem;
+}
+
+.loginContainer h1 {
+  margin-bottom: 1rem;
+}

src/app/login/page.tsx

@@ -1,17 +1,36 @@
+// /home/max/Git/MeetUp/src/app/login/page.tsx
 import { auth } from '@/auth';
+import LabeledInput from '@/components/labeled-input';
 import Login from '@/components/user/login-button';
 import { redirect } from 'next/navigation';
 
+import style from './login.module.css';
+
+import '@/app/globals.css';
+
 export default async function LoginPage() {
   const session = await auth();
 
   if (session?.user) {
-    redirect('/');
+    redirect('/home');
   }
 
   return (
-    <div>
+    <div className={style.loginContainer}>
       <h1>Login</h1>
+
+      <LabeledInput
+        type='email'
+        size='login'
+        label='E-Mail'
+        placeholder='Enter your E-Mail'
+      />
+      <LabeledInput
+        type='password'
+        size='login'
+        label='Password'
+        placeholder='Enter your Password'
+      />
       <Login provider='authentik' providerDisplayName='SSO' />
     </div>
   );