refactor(auth, layouts): enhance UI components for improved aesthetics and usability

- Updated SignIn and Profile components with new background styles and layout adjustments for a more modern look.
- Refined button styles in GoogleSigninButton and SigninWithPassword for better user interaction feedback.
- Enhanced InputGroup and Select components with improved styling and error handling for a more consistent user experience.
- Adjusted Sidebar and Header components for better responsiveness and visual appeal.
- Implemented spotlight effect in UserInfo dropdown for a more engaging user interface.

src/app/profile/page.tsx

@@ -14,17 +14,20 @@ export default function Page() {
   const hasProfileImage = data?.profile_image && !imageError;
 
   return (
-    <div className="mx-auto w-full max-w-4xl rounded-lg bg-white p-6 shadow-default dark:bg-gray-dark">
-      <div className="relative h-48 w-full rounded-t-lg bg-gray-200 dark:bg-gray-700">
+    <div className="relative mx-auto w-full max-w-4xl overflow-hidden rounded-2xl border border-stroke/70 bg-gradient-to-br from-white via-white to-primary/[0.03] p-6 dark:border-dark-3 dark:from-gray-dark dark:via-gray-dark dark:to-primary/[0.08]">
+      <div className="pointer-events-none absolute -right-16 -top-16 h-40 w-40 rounded-full bg-primary/10 blur-3xl dark:bg-primary/20" />
+      <div className="pointer-events-none absolute -bottom-16 -left-16 h-40 w-40 rounded-full bg-purple-500/10 blur-3xl dark:bg-purple-500/20" />
+      <div className="relative h-52 w-full rounded-2xl border border-stroke/70 bg-gray-200 dark:border-dark-3 dark:bg-gray-700">
         <Image
           src={"/images/cover/cover-01.png"}
           alt="Cover"
           layout="fill"
           objectFit="cover"
-          className="rounded-t-lg"
+          className="rounded-2xl"
         />
+        <div className="absolute inset-0 bg-gradient-to-t from-black/25 via-black/10 to-transparent" />
         <div className="absolute bottom-0 left-1/2 -translate-x-1/2 translate-y-1/2 transform">
-          <div className="relative flex h-32 w-32 items-center justify-center overflow-hidden rounded-full border-4 border-white bg-gray-200 dark:border-gray-dark dark:bg-gray-700">
+          <div className="relative flex h-32 w-32 items-center justify-center overflow-hidden rounded-full border-4 border-white bg-gray-200 shadow-theme-xs dark:border-gray-dark dark:bg-gray-700">
             {hasProfileImage ? (
               <Image
                 onError={() => setImageError(true)}
@@ -42,47 +45,63 @@ export default function Page() {
       </div>
 
       <div className="mt-16 text-center">
-        <h1 className="text-2xl font-bold text-dark dark:text-white">
+        <h1 className="text-2xl font-semibold text-dark dark:text-white">
           {data?.full_name}
         </h1>
-        <p className="text-sm text-gray-500 dark:text-gray-400">
+        <p className="mt-1 text-sm text-gray-500 dark:text-gray-400">
           @{data?.username}
         </p>
       </div>
 
-      <div className="mt-6 border-t border-stroke pt-6 dark:border-stroke-dark">
+      <div className="mt-8 rounded-xl border border-stroke/70 bg-white/70 p-5 backdrop-blur-sm dark:border-dark-3 dark:bg-dark-2/40">
         <h2 className="mb-4 text-lg font-semibold text-dark dark:text-white">
           User Information
         </h2>
         <div className="grid grid-cols-1 gap-4 md:grid-cols-2">
-          <div>
-            <p className="font-medium text-dark dark:text-white">Email</p>
-            <p className="text-gray-600 dark:text-gray-300">{data?.email}</p>
+          <div className="rounded-lg bg-gray-1/70 px-4 py-3 dark:bg-dark-3/40">
+            <p className="text-xs font-semibold uppercase tracking-wide text-dark-5">
+              Email
+            </p>
+            <p className="mt-1 text-sm font-medium text-gray-700 dark:text-gray-300">
+              {data?.email}
+            </p>
           </div>
-          <div>
-            <p className="font-medium text-dark dark:text-white">Phone</p>
-            <p className="text-gray-600 dark:text-gray-300">
+          <div className="rounded-lg bg-gray-1/70 px-4 py-3 dark:bg-dark-3/40">
+            <p className="text-xs font-semibold uppercase tracking-wide text-dark-5">
+              Phone
+            </p>
+            <p className="mt-1 text-sm font-medium text-gray-700 dark:text-gray-300">
               {data?.phone ? formatPhoneNumber(data?.phone) : "-"}
             </p>
           </div>
-          <div>
-            <p className="font-medium text-dark dark:text-white">Department</p>
-            <p className="text-gray-600 dark:text-gray-300">
+          <div className="rounded-lg bg-gray-1/70 px-4 py-3 dark:bg-dark-3/40">
+            <p className="text-xs font-semibold uppercase tracking-wide text-dark-5">
+              Department
+            </p>
+            <p className="mt-1 text-sm font-medium text-gray-700 dark:text-gray-300">
               {data?.department}
             </p>
           </div>
-          <div>
-            <p className="font-medium text-dark dark:text-white">Position</p>
-            <p className="text-gray-600 dark:text-gray-300">{data?.position}</p>
+          <div className="rounded-lg bg-gray-1/70 px-4 py-3 dark:bg-dark-3/40">
+            <p className="text-xs font-semibold uppercase tracking-wide text-dark-5">
+              Position
+            </p>
+            <p className="mt-1 text-sm font-medium text-gray-700 dark:text-gray-300">
+              {data?.position}
+            </p>
           </div>
-          <div>
-            <p className="font-medium text-dark dark:text-white">Role</p>
-            <p className="capitalize text-gray-600 dark:text-gray-300">
+          <div className="rounded-lg bg-gray-1/70 px-4 py-3 dark:bg-dark-3/40">
+            <p className="text-xs font-semibold uppercase tracking-wide text-dark-5">
+              Role
+            </p>
+            <p className="mt-1 text-sm font-medium capitalize text-gray-700 dark:text-gray-300">
               {data?.role}
             </p>
           </div>
-          <div>
-            <p className="font-medium text-dark dark:text-white">Status</p>
+          <div className="rounded-lg bg-gray-1/70 px-4 py-3 dark:bg-dark-3/40">
+            <p className="text-xs font-semibold uppercase tracking-wide text-dark-5">
+              Status
+            </p>
             <div className="w-fit">
               <Status status={data?.status ?? ""}>{data?.status ?? "-"}</Status>
             </div>
@@ -90,13 +109,15 @@ export default function Page() {
         </div>
       </div>
 
-      <div className="mt-6 border-t border-stroke pt-6 dark:border-stroke-dark">
+      <div className="mt-6 rounded-xl border border-stroke/70 bg-white/70 p-5 backdrop-blur-sm dark:border-dark-3 dark:bg-dark-2/40">
         <h2 className="mb-4 text-lg font-semibold text-dark dark:text-white">
           Account Details
         </h2>
         <div className="grid grid-cols-1 gap-4 md:grid-cols-2">
-          <div>
-            <p className="font-medium text-dark dark:text-white">Verified</p>
+          <div className="rounded-lg bg-gray-1/70 px-4 py-3 dark:bg-dark-3/40">
+            <p className="text-xs font-semibold uppercase tracking-wide text-dark-5">
+              Verified
+            </p>
             <div className="w-fit">
               <Status status={data?.is_verified ? "success" : "warning"}>
                 {data?.is_verified ? (
@@ -107,17 +128,19 @@ export default function Page() {
               </Status>
             </div>
           </div>
-          <div>
-            <p className="font-medium text-dark dark:text-white">Last Login</p>
-            <p className="text-gray-600 dark:text-gray-300">
+          <div className="rounded-lg bg-gray-1/70 px-4 py-3 dark:bg-dark-3/40">
+            <p className="text-xs font-semibold uppercase tracking-wide text-dark-5">
+              Last Login
+            </p>
+            <p className="mt-1 text-sm font-medium text-gray-700 dark:text-gray-300">
               {unixToDate({ unix: data?.last_login_at ?? 0, hasTime: true })}
             </p>
           </div>
-          <div>
-            <p className="font-medium text-dark dark:text-white">
+          <div className="rounded-lg bg-gray-1/70 px-4 py-3 dark:bg-dark-3/40">
+            <p className="text-xs font-semibold uppercase tracking-wide text-dark-5">
               Member Since
             </p>
-            <p className="text-gray-600 dark:text-gray-300">
+            <p className="mt-1 text-sm font-medium text-gray-700 dark:text-gray-300">
               {unixToDate({ unix: data?.created_at ?? 0, hasTime: true })}
             </p>
           </div>