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/components/Layouts/sidebar/index.tsx

@@ -59,7 +59,7 @@ export function Sidebar() {
 
       <aside
         className={cn(
-          "shrink-0 overflow-hidden border-r border-gray-200 bg-white transition-[width] duration-200 ease-linear dark:border-gray-800 dark:bg-gray-dark",
+          "shrink-0 overflow-hidden border-r border-stroke/70 bg-gradient-to-b from-white via-white to-primary/[0.03] shadow-[8px_0_30px_-24px_rgba(16,24,40,0.35)] transition-[width] duration-200 ease-linear dark:border-dark-3 dark:from-gray-dark dark:via-gray-dark dark:to-primary/[0.08]",
           isMobile
             ? cn("fixed bottom-0 top-0", isOpen ? "z-50" : "z-20")
             : "sticky top-0 h-screen",
@@ -73,15 +73,17 @@ export function Sidebar() {
       >
         <div
           className={cn(
-            "flex h-full flex-col py-10",
+            "relative flex h-full flex-col py-10",
             isCollapsed ? "items-center px-2" : "pl-[25px] pr-[7px]",
           )}
         >
+          <div className="pointer-events-none absolute -left-16 top-16 h-36 w-36 rounded-full bg-primary/10 blur-3xl dark:bg-primary/20" />
+          <div className="pointer-events-none absolute -right-16 bottom-10 h-36 w-36 rounded-full bg-purple-500/10 blur-3xl dark:bg-purple-500/20" />
           <div className={cn("relative", isCollapsed ? "px-0" : "pr-4.5")}>
             <Link
               href={"/"}
               onClick={() => isMobile && isOpen && toggleSidebar()}
-              className="px-0 py-2.5 min-[850px]:py-0"
+              className="inline-flex rounded-xl px-1 py-2.5 transition hover:bg-gray-2/70 min-[850px]:py-0 dark:hover:bg-white/[0.06]"
             >
               {isCollapsed ? (
                 <Image
@@ -98,7 +100,7 @@ export function Sidebar() {
             {isMobile && isOpen && (
               <button
                 onClick={toggleSidebar}
-                className="absolute left-3/4 right-4.5 top-1/2 -translate-y-1/2 text-right"
+                className="absolute left-3/4 right-4.5 top-1/2 -translate-y-1/2 rounded-lg p-1 text-right text-dark-4 transition hover:bg-gray-2/70 hover:text-dark dark:text-dark-6 dark:hover:bg-white/[0.08] dark:hover:text-white"
               >
                 <span className="sr-only">Close Menu</span>
 
@@ -116,7 +118,7 @@ export function Sidebar() {
             {NAV_DATA.map((section) => (
               <div key={section.label} className="mb-6">
                 {!isCollapsed && (
-                  <h2 className="mb-5 text-sm font-medium text-dark-4 dark:text-dark-6">
+                  <h2 className="mb-4 px-2 text-[11px] font-semibold uppercase tracking-[0.12em] text-dark-5 dark:text-dark-6">
                     {section.label}
                   </h2>
                 )}
@@ -241,7 +243,7 @@ export function Sidebar() {
           {isCollapsed && (
             <button
               onClick={toggleSidebar}
-              className="mt-4 rounded-lg p-2 text-dark-4 transition-colors hover:bg-gray-100 dark:text-dark-6 dark:hover:bg-[#FFFFFF1A]"
+              className="mt-4 rounded-xl border border-stroke/70 bg-white/80 p-2 text-dark-4 shadow-theme-xs transition-all hover:-translate-y-0.5 hover:border-primary/30 hover:text-primary dark:border-dark-3 dark:bg-dark-2 dark:text-dark-6 dark:hover:bg-white/[0.08] dark:hover:text-white"
               aria-label="Expand sidebar"
             >
               <MenuExpandIcon className="size-6" />

src/components/Layouts/sidebar/menu-item.tsx

@@ -4,16 +4,16 @@ import Link from "next/link";
 import { useSidebarContext } from "./sidebar-context";
 
 const menuItemBaseStyles = cva(
-  "rounded-lg px-3.5 font-medium text-dark-4 transition-all duration-200 dark:text-dark-6",
+  "rounded-xl border border-transparent px-3.5 font-semibold text-dark-4 shadow-[inset_0_0_0_1px_transparent] transition-all duration-200 dark:text-dark-6",
   {
     variants: {
       isActive: {
-        true: "bg-[rgba(87,80,241,0.07)] text-primary hover:bg-[rgba(87,80,241,0.07)] dark:bg-[#FFFFFF1A] dark:text-white",
+        true: "border-primary/20 bg-gradient-to-r from-primary/[0.14] to-primary/[0.05] text-primary shadow-theme-xs hover:from-primary/[0.16] hover:to-primary/[0.08] dark:border-primary/30 dark:from-primary/[0.28] dark:to-primary/[0.12] dark:text-white",
         false:
-          "hover:bg-gray-100 hover:text-dark hover:dark:bg-[#FFFFFF1A] hover:dark:text-white",
+          "hover:-translate-y-0.5 hover:border-stroke/80 hover:bg-white/80 hover:text-dark hover:shadow-theme-xs dark:hover:border-dark-3 dark:hover:bg-white/[0.08] dark:hover:text-white",
       },
       isCollapsed: {
-        true: "px-2 justify-center",
+        true: "justify-center px-2",
         false: "",
       },
     },
@@ -45,7 +45,7 @@ export function MenuItem(
           menuItemBaseStyles({
             isActive: props.isActive,
             isCollapsed: props.isCollapsed,
-            className: "relative block py-2",
+            className: "relative block py-2.5",
           }),
           props.className,
         )}