Refactor login and register page designs

src/components/RegisterUserForm.tsx

@@ -44,13 +44,9 @@ const RegisterUserForm: FC = () => {
     }
   };
   return (
-    <form
-      className="form-control w-full space-y-5"
-      noValidate
-      onSubmit={handleSubmit(onSubmit)}
-    >
-      <div>
-        <div className="flex flex-col lg:flex-row lg:space-x-3">
+    <form className="form-control w-full" noValidate onSubmit={handleSubmit(onSubmit)}>
+      <div className="space-y-5">
+        <div className="flex flex-col lg:flex-row lg:space-x-5">
           <div className="lg:w-[50%]">
             <FormInfo>
               <FormLabel htmlFor="firstName">First name</FormLabel>
@@ -63,7 +59,7 @@ const RegisterUserForm: FC = () => {
                 type="text"
                 formValidationSchema={register('firstName')}
                 error={!!errors.firstName}
-                placeholder="first name"
+                placeholder="John"
               />
             </FormSegment>
           </div>
@@ -80,13 +76,13 @@ const RegisterUserForm: FC = () => {
                 type="text"
                 formValidationSchema={register('lastName')}
                 error={!!errors.lastName}
-                placeholder="last name"
+                placeholder="Doe"
               />
             </FormSegment>
           </div>
         </div>
 
-        <div className="flex flex-col lg:flex-row lg:space-x-3">
+        <div className="flex flex-col lg:flex-row lg:space-x-5">
           <div className="lg:w-[50%]">
             <FormInfo>
               <FormLabel htmlFor="email">email</FormLabel>
@@ -99,7 +95,7 @@ const RegisterUserForm: FC = () => {
                 type="email"
                 formValidationSchema={register('email')}
                 error={!!errors.email}
-                placeholder="email"
+                placeholder="john.doe@example.com"
               />
             </FormSegment>
           </div>
@@ -115,13 +111,13 @@ const RegisterUserForm: FC = () => {
                 type="text"
                 formValidationSchema={register('username')}
                 error={!!errors.username}
-                placeholder="username"
+                placeholder="johndoe"
               />
             </FormSegment>
           </div>
         </div>
 
-        <div className="flex flex-col lg:flex-row lg:space-x-3">
+        <div className="flex flex-col lg:flex-row lg:space-x-5">
           <div className="lg:w-[50%]">
             <FormInfo>
               <FormLabel htmlFor="password">password</FormLabel>
@@ -155,6 +151,7 @@ const RegisterUserForm: FC = () => {
             </FormSegment>
           </div>
         </div>
+        <div>
           <FormInfo>
             <FormLabel htmlFor="dateOfBirth">Date of birth</FormLabel>
             <FormError>{errors.dateOfBirth?.message}</FormError>
@@ -169,12 +166,13 @@ const RegisterUserForm: FC = () => {
               placeholder="date of birth"
             />
           </FormSegment>
-        <div className="mt-6 w-full">
+        </div>
+      </div>
+      <div className="mt-10">
         <Button type="submit" isSubmitting={formState.isSubmitting}>
           Register User
         </Button>
       </div>
-      </div>
     </form>
   );
 };

src/pages/index.tsx

@@ -49,8 +49,8 @@ const Home: NextPage = () => {
           className="pointer-events-none absolute h-full w-full object-cover mix-blend-overlay"
         />
         <div className="relative flex w-9/12 flex-col space-y-3 text-base-content">
-          <h1 className="text-8xl font-extrabold">The Biergarten App</h1>
-          <p className="text-3xl font-bold">{description}</p>
+          <h1 className="text-5xl font-extrabold lg:text-8xl">The Biergarten App</h1>
+          <p className="font-bold lg:text-3xl">{description}</p>
         </div>
       </div>
     </>

src/pages/login/index.tsx

@@ -28,7 +28,7 @@ const LoginPage: NextPage = () => {
         />
 
         <div className="relative flex w-9/12 flex-col items-center text-center text-base-content lg:w-6/12">
-          <div className="flex w-full flex-col items-center space-y-2 text-center">
+          <div className="mb-8 flex w-full flex-col items-center space-y-2 text-center">
             <FaUserCircle className="text-6xl text-primary-content" />
             <h1 className="text-6xl font-extrabold">Login</h1>
           </div>

src/pages/register/index.tsx

@@ -1,10 +1,11 @@
 import RegisterUserForm from '@/components/RegisterUserForm';
-import FormPageLayout from '@/components/ui/forms/FormPageLayout';
 
 import useRedirectWhenLoggedIn from '@/hooks/auth/useRedirectIfLoggedIn';
 import { NextPage } from 'next';
+import { CldImage } from 'next-cloudinary';
 import Head from 'next/head';
-import { BiUser } from 'react-icons/bi';
+
+import { FaUserCircle } from 'react-icons/fa';
 
 const RegisterUserPage: NextPage = () => {
   useRedirectWhenLoggedIn();
@@ -15,14 +16,26 @@ const RegisterUserPage: NextPage = () => {
         <title>Register User</title>
         <meta name="description" content="Register a new user" />
       </Head>
-      <FormPageLayout
-        headingText="Register User"
-        headingIcon={BiUser}
-        backLink="/"
-        backLinkText="Back to home"
-      >
+
+      <div className="relative flex min-h-dvh w-full flex-col items-center justify-center bg-base-300">
+        <CldImage
+          src="https://res.cloudinary.com/dxie9b7na/image/upload/v1701056793/cloudinary-images/pexels-elevate-1267700_jrno3s.jpg"
+          alt="Login Image"
+          width={5000}
+          height={5000}
+          className="pointer-events-none absolute h-full w-full object-cover mix-blend-overlay"
+        />
+
+        <div className="relative flex w-10/12 flex-col items-center pb-20 text-center text-base-content lg:w-6/12">
+          <div className="mb-8 mt-20 flex w-full flex-col items-center space-y-2 text-center">
+            <FaUserCircle className="text-6xl text-primary-content" />
+            <h1 className="text-6xl font-extrabold">Register</h1>
+          </div>
+          <div className="w-full">
             <RegisterUserForm />
-      </FormPageLayout>
+          </div>
+        </div>
+      </div>
     </>
   );
 };