style(auth): match register page design with welcome and login UI

app/(auth)/register/page.tsx

@@ -9,6 +9,8 @@ import Link from "next/link";
 import { useState } from "react";
 import { useRouter } from "next/navigation";
 import { registerUser } from "@/lib/services/auth.service";
+import { Loader2, UserPlus } from "lucide-react";
+import { JSX } from "react/jsx-runtime";
 
 /**
  * Renders the registration page featuring a sign-up form, error feedback,
@@ -16,7 +18,7 @@ import { registerUser } from "@/lib/services/auth.service";
  *
  * @returns {JSX.Element} The rendered registration page component.
  */
-export default function RegisterPage() {
+export default function RegisterPage(): JSX.Element {
   const [error, setError] = useState<string | null>(null);
   const [loading, setLoading] = useState(false);
   const router = useRouter();
@@ -26,9 +28,13 @@ export default function RegisterPage() {
    * and navigates to summary page on successful registration.
    *
    * @async
+   * @function handleSubmit
    * @param {React.SubmitEvent<HTMLFormElement>} event - The form submission event.
+   * @returns {Promise<void>} Resolves when registration handling completes.
    */
-  async function handleSubmit(event: React.SubmitEvent<HTMLFormElement>) {
+  async function handleSubmit(
+    event: React.SubmitEvent<HTMLFormElement>,
+  ): Promise<void> {
     event.preventDefault();
     setError(null);
     setLoading(true);
@@ -47,14 +53,33 @@ export default function RegisterPage() {
   }
 
   return (
-    <div className="flex h-dvh w-full items-center justify-center">
+    <div className="relative min-h-dvh w-full flex flex-col items-center justify-center p-4 overflow-x-hidden bg-background text-foreground selection:bg-primary selection:text-background">
-      <div className="w-full max-w-sm p-6 space-y-6 border border-border rounded-xl bg-card backdrop-blur-md">
+      {/* Background Ambient Glow */}
-        <div className="space-y-2 text-center">
+      <div
-          <h1 className="text-2xl font-bold tracking-tight">
+        aria-hidden="true"
+        className="pointer-events-none absolute inset-x-0 -top-20 sm:-top-32 -z-10 transform-gpu overflow-hidden blur-2xl sm:blur-3xl"
+      >
+        <div
+          className="relative left-[calc(50%-10rem)] aspect-1155/678 w-[20rem] sm:w-50rem -translate-x-1/2 rotate-30deg bg-linear-to-tr from-accent to-primary opacity-20 sm:opacity-15"
+          style={{
+            clipPath:
+              "polygon(74.1% 44.1%, 100% 61.6%, 97.5% 26.9%, 85.5% 0.1%, 80.7% 2%, 72.5% 32.5%, 60.2% 62.4%, 52.4% 68.1%, 47.5% 58.3%, 45.2% 34.5%, 27.5% 76.7%, 0.1% 64.9%, 17.9% 100%, 27.6% 76.8%, 76.1% 97.7%, 74.1% 44.1%)",
+          }}
+        />
+      </div>
+
+      {/* Registration Card Container */}
+      <div className="w-full max-w-sm p-6 sm:p-8 space-y-6 border border-border rounded-2xl bg-card/80 backdrop-blur-md shadow-xl">
+        <div className="space-y-1.5 text-center">
+          <h1 className="text-2xl font-extrabold tracking-tight">
             Create an Account
           </h1>
-          <p className="text-sm text-foreground-muted">
+          <p className="text-xs sm:text-sm text-foreground-muted">
-            Get started with your Flowstate Workspace.
+            Get started with your{" "}
+            <span className="bg-linear-to-r from-primary to-accent bg-clip-text font-semibold text-transparent">
+              Flowstate
+            </span>{" "}
+            workspace.
           </p>
         </div>
 
@@ -68,60 +93,123 @@ export default function RegisterPage() {
         )}
 
         <form onSubmit={handleSubmit} className="space-y-4">
-          <div className="grid grid-cols-2 gap-2">
+          <div className="grid grid-cols-2 gap-2.5">
+            <div className="space-y-1">
+              <label
+                htmlFor="firstName"
+                className="block text-xs font-medium text-foreground-muted"
+              >
+                First Name*
+              </label>
               <input
+                id="firstName"
                 name="firstName"
                 type="text"
-              placeholder="First Name*"
+                placeholder="John"
                 maxLength={50}
                 required
-              className="w-full px-3 py-2 text-sm rounded-lg border border-border bg-background focus:outline-none focus:border-foreground"
+                className="w-full px-3.5 py-2.5 text-sm rounded-lg border border-border bg-background/50 text-foreground placeholder:text-foreground-muted/50 focus:outline-none focus:border-primary focus:ring-1 focus:ring-primary transition-colors"
-            />
-            <input
-              name="lastName"
-              type="text"
-              placeholder="Last Name*"
-              maxLength={50}
-              required
-              className="w-full px-3 py-2 text-sm rounded-lg border border-border bg-background focus:outline-none focus:border-foreground"
               />
             </div>
+
+            <div className="space-y-1">
+              <label
+                htmlFor="lastName"
+                className="block text-xs font-medium text-foreground-muted"
+              >
+                Last Name*
+              </label>
               <input
+                id="lastName"
+                name="lastName"
+                type="text"
+                placeholder="Doe"
+                maxLength={50}
+                required
+                className="w-full px-3.5 py-2.5 text-sm rounded-lg border border-border bg-background/50 text-foreground placeholder:text-foreground-muted/50 focus:outline-none focus:border-primary focus:ring-1 focus:ring-primary transition-colors"
+              />
+            </div>
+          </div>
+
+          <div className="space-y-1">
+            <label
+              htmlFor="email"
+              className="block text-xs font-medium text-foreground-muted"
+            >
+              Email Address*
+            </label>
+            <input
+              id="email"
               name="email"
               type="email"
-            placeholder="Email*"
+              placeholder="name@example.com"
               maxLength={255}
               required
-            className="w-full px-3 py-2 text-sm rounded-lg border border-border bg-background focus:outline-none focus:border-foreground"
+              className="w-full px-3.5 py-2.5 text-sm rounded-lg border border-border bg-background/50 text-foreground placeholder:text-foreground-muted/50 focus:outline-none focus:border-primary focus:ring-1 focus:ring-primary transition-colors"
             />
+          </div>
+
+          <div className="space-y-1">
+            <label
+              htmlFor="password"
+              className="block text-xs font-medium text-foreground-muted"
+            >
+              Password*
+            </label>
             <input
+              id="password"
               name="password"
               type="password"
-            placeholder="Password*"
+              placeholder="••••••••••••"
               maxLength={72}
               required
-            className="w-full px-3 py-2 text-sm rounded-lg border border-border bg-background focus:outline-none focus:border-foreground"
+              className="w-full px-3.5 py-2.5 text-sm rounded-lg border border-border bg-background/50 text-foreground placeholder:text-foreground-muted/50 focus:outline-none focus:border-primary focus:ring-1 focus:ring-primary transition-colors"
             />
+          </div>
+
+          <div className="space-y-1">
+            <label
+              htmlFor="confirmPassword"
+              className="block text-xs font-medium text-foreground-muted"
+            >
+              Confirm Password*
+            </label>
             <input
+              id="confirmPassword"
               name="confirmPassword"
               type="password"
-            placeholder="Confirm Password*"
+              placeholder="••••••••••••"
               maxLength={72}
               required
-            className="w-full px-3 py-2 text-sm rounded-lg border border-border bg-background focus:outline-none focus:border-foreground"
+              className="w-full px-3.5 py-2.5 text-sm rounded-lg border border-border bg-background/50 text-foreground placeholder:text-foreground-muted/50 focus:outline-none focus:border-primary focus:ring-1 focus:ring-primary transition-colors"
             />
+          </div>
+
           <button
             type="submit"
             disabled={loading}
-            className="w-full py-2 text-sm font-medium rounded-lg bg-foreground text-background hover:opacity-70 transition-opacity disabled:opacity-20 cursor-pointer disabled:cursor-auto"
+            className="w-full py-2.5 px-4 text-sm font-semibold rounded-lg bg-primary text-background shadow-md hover:bg-primary-hover transition-colors duration-200 disabled:opacity-50 flex items-center justify-center gap-2 cursor-pointer disabled:cursor-not-allowed pt-2"
           >
-            {loading ? "Being created..." : "Sign Up"}
+            {loading ? (
+              <>
+                <Loader2 className="w-4 h-4 animate-spin" />
+                Creating account...
+              </>
+            ) : (
+              <>
+                <UserPlus className="w-4 h-4" />
+                Sign Up
+              </>
+            )}
           </button>
         </form>
 
-        <div className="text-center text-xs text-foreground-muted">
+        <div className="text-center text-xs text-foreground-muted pt-1">
           Already have an account?{" "}
-          <Link href="/login" className="text-foreground hover:underline">
+          <Link
+            href="/login"
+            className="font-medium text-foreground hover:text-primary transition-colors hover:underline"
+          >
             Sign In
           </Link>
         </div>