CSS styling for login page and register page

app/(auth)/login/page.js

@@ -61,6 +61,9 @@ export default function Login() {
 
   return (
     <div className="auth-page">
+      {/* Decorative square */}
+      <div className="decorative-square"></div>
+
       <div className="auth-container">
         <div className="auth-card">
           <h2>Login to Treasure Hunt</h2>
@@ -143,6 +146,29 @@ export default function Login() {
           margin-bottom: 10px;
           font-size: 0.875rem;
         }
+        .decorative-square {
+          position: absolute;
+          top: calc(50% - 265px);
+          left: calc(50% - 250px);
+          width: 150px;
+          height: 150px;
+          background-image: url("/images/parrot.svg");
+          background-size: contain;
+          background-repeat: no-repeat;
+          background-position: center;
+          border-radius: 4px;
+          z-index: 2;
+        }
+        .auth-page {
+          display: flex;
+          flex-direction: column;
+          min-height: 100vh;
+          background-color: #f4e9dc;
+          background-image: url("/images/decor.svg");
+          background-size: auto 100%;
+          background-repeat: repeat-x;
+          background-position: center;
+        }
       `}</style>
     </div>
   );

app/(auth)/register/page.js

@@ -63,13 +63,12 @@ export default function Register() {
 
   return (
     <div className="auth-page">
-      <div className="page-header">
+      {/* Decorative square */}
-        <div className="page-title">Register</div>
+      <div className="decorative-square"></div>
-        <div className="placeholder"></div>
-      </div>
 
       <div className="auth-container">
         <div className="auth-card">
+          <h2>Register for Treasure Hunt</h2>
           <div className="input-container">
             <input
               type="text"
@@ -112,6 +111,11 @@ export default function Register() {
           align-items: center;
           height: 100vh;
           overflow: hidden;
+          background-image: url("/images/decor.svg");
+          background-size: auto 100%;
+          background-repeat: repeat-x;
+          background-position: center;
+          background-color: #f4e9dc;
         }
         .auth-container {
           display: flex;
@@ -124,11 +128,10 @@ export default function Register() {
           box-sizing: border-box;
         }
         .auth-card {
-          width: 100%;
-          padding: 20px;
-          box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
-          border-radius: 8px;
           background-color: #fff;
+          padding: 20px;
+          border-radius: 8px;
+          box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
         }
         .input-container {
           margin-bottom: 10px;
@@ -143,16 +146,39 @@ export default function Register() {
           width: 100%;
           padding: 10px;
           margin-top: 10px;
-          background-color: #68543c; /* Updated brown color */
+          background-color: #68543c; /* Dark brown */
           color: white;
+          font-size: 16px;
           border: none;
           border-radius: 4px;
           cursor: pointer;
-          text-align: center;
+          transition: background-color 0.3s;
+        }
+        .auth-button:hover {
+          background-color: #53402d; /* Darker brown on hover */
+        }
+        .auth-button:disabled {
+          background-color: #cccccc;
+          cursor: not-allowed;
         }
         .error-message {
-          color: red;
+          color: #e53935;
           margin-top: 10px;
+          margin-bottom: 10px;
+          font-size: 0.875rem;
+        }
+        .decorative-square {
+          position: absolute;
+          top: calc(50% - 240px);
+          left: calc(50% + 95px);
+          width: 150px;
+          height: 150px;
+          background-image: url("/images/pirate-hat.svg");
+          background-size: contain;
+          background-repeat: no-repeat;
+          background-position: center;
+          border-radius: 4px;
+          z-index: 2;
         }
       `}</style>
     </div>