ui improvements

pages/forgot.tsx

@@ -39,20 +39,21 @@ export default function Forgot() {
 
   return (
     <>
+      <Image
+        src="/linkwarden.png"
+        width={1694}
+        height={483}
+        alt="Linkwarden"
+        className="h-12 w-fit mx-auto mt-10"
+      />
       <div className="p-2 mt-10 mx-auto flex flex-col gap-3 justify-between sm:w-[28rem] w-80 bg-slate-50 rounded-md border border-sky-100">
-        <div className="flex flex-col gap-2 sm:flex-row justify-between items-center mb-5">
-          <Image
-            src="/linkwarden.png"
-            width={1694}
-            height={483}
-            alt="Linkwarden"
-            className="h-12 w-fit"
-          />
-          <div className="text-center sm:text-right">
-            <p className="text-3xl text-sky-500">Password Reset</p>
-          </div>
-        </div>
-
+        <p className="text-xl text-sky-500 w-fit font-bold">Fogot Password?</p>
+        <p className="text-md text-gray-500 mt-1">
+          Enter your Email so we can send you a link to recover your account.
+        </p>
+        <p className="text-md text-gray-500 mt-1">
+          Make sure to change your password in the profile settings afterwards.
+        </p>
         <div>
           <p className="text-sm text-sky-500 w-fit font-semibold mb-1">Email</p>
 
@@ -63,10 +64,6 @@ export default function Forgot() {
             onChange={(e) => setForm({ ...form, email: e.target.value })}
             className="w-full rounded-md p-2 mx-auto border-sky-100 border-solid border outline-none focus:border-sky-500 duration-100"
           />
-          <p className="text-md text-gray-500 mt-1">
-            Make sure to change your password in the profile settings
-            afterwards.
-          </p>
         </div>
 
         <SubmitButton
@@ -81,6 +78,9 @@ export default function Forgot() {
           </Link>
         </div>
       </div>
+      <p className="text-center text-xs text-gray-500 my-10">
+        © {new Date().getFullYear()} Linkwarden. All rights reserved.{" "}
+      </p>
     </>
   );
 }