Added textboxes & buttons to the Login page

src/pages/Login/Login.jsx

@@ -8,6 +8,18 @@ const Login = () => {
                     <img src="/logo.png" alt="logo" />
                     <h1>QuickByte</h1>
                 </div>
+                <div className="login-body">
+                    <div className="login-group">
+                        <label htmlFor="username">Benutzername</label>
+                        <input type="text" name="username" id="username" />
+                    </div>
+                    <div className="login-group">
+                        <label htmlFor="password">Passwort</label>
+                        <input type="password" name="password" id="password" />
+                    </div>
+                    <a href="/forgot-password" className="text-right">Passwort vergessen?</a>
+                    <button className="btn btn-primary">Anmelden</button>
+                </div>
             </div>
         </div>
     )

src/pages/Login/styles.sass

@@ -10,16 +10,16 @@
 .login-container
   display: flex
   flex-direction: column
-  align-items: center
   justify-content: center
   background-color: $background-opacity
   backdrop-filter: blur(5rem)
   border: 1px solid #515663
   border-radius: 10px
-  padding: 1rem 3rem
+  padding: 1rem 2rem
 
 .login-header
   display: flex
+  padding: 0 2rem
   gap: 1rem
   align-items: center
 
@@ -34,3 +34,50 @@
 .login-header h1
   margin: 0
   font-weight: 700
+
+.login-body
+  display: flex
+  flex-direction: column
+  gap: 1rem
+  margin-top: 1rem
+  max-width: 20rem
+
+.btn
+  display: flex
+  justify-content: center
+  align-items: center
+  padding: 0.5rem 1rem
+  border-radius: 0.5rem
+  background-color: $primary
+  color: $black
+  font-size: 16pt
+  font-weight: 700
+  cursor: pointer
+  border: none
+
+.login-body .text-right
+  text-align: right
+  text-decoration: none
+  color: $gray
+  font-weight: 700
+
+.login-group
+  display: flex
+  flex-direction: column
+  gap: 0.5rem
+
+.login-group label
+  color: $white
+
+.login-group input
+  padding: 0.5rem 1rem
+  border-radius: 0.5rem
+  background-color: $background-opacity
+  color: $white
+  border: 2px solid #515663
+  font-size: 18pt
+  width: auto
+
+.login-group input:focus
+  outline: none
+  border: 2px solid $primary