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/auth/sign-in/page.tsx

@@ -7,8 +7,10 @@ export const metadata: Metadata = {
 
 export default function SignIn() {
   return (
-    <div className="flex min-h-svh w-full flex-col items-center justify-center px-4 py-8 sm:px-6 sm:py-10">
-      <div className="shadow-3xl m-auto flex w-full max-w-[26rem] flex-col items-center justify-center rounded-2xl bg-white px-4 dark:bg-gray-dark dark:shadow-card sm:max-w-md sm:px-8 md:max-w-lg lg:max-w-xl xl:w-4/12 xl:max-w-none">
+    <div className="relative flex min-h-svh w-full flex-col items-center justify-center overflow-hidden bg-gray-1/40 px-4 py-8 dark:bg-dark sm:px-6 sm:py-10">
+      <div className="pointer-events-none absolute -top-24 left-1/2 h-64 w-64 -translate-x-1/2 rounded-full bg-primary/10 blur-3xl dark:bg-primary/20" />
+      <div className="pointer-events-none absolute -bottom-24 right-10 h-64 w-64 rounded-full bg-purple-500/10 blur-3xl dark:bg-purple-500/20" />
+      <div className="m-auto flex w-full max-w-[26rem] flex-col items-center justify-center rounded-2xl border border-stroke/70 bg-white/95 px-4 shadow-theme-xs backdrop-blur-sm dark:border-dark-3 dark:bg-gray-dark/95 sm:max-w-md sm:px-8 md:max-w-lg lg:max-w-xl xl:w-4/12 xl:max-w-none">
         <div className="relative flex w-full flex-wrap items-center justify-center">
           <div className="w-full">
             <div className="w-full p-4 sm:p-12.5 xl:p-15">

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>