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/ui-elements/button.tsx

@@ -1,13 +1,17 @@
+"use client";
+
 import { cva, VariantProps } from "class-variance-authority";
-import type { HTMLAttributes } from "react";
+import { useState } from "react";
+import type { ButtonHTMLAttributes, CSSProperties, ReactNode } from "react";
 
 const buttonVariants = cva(
-  "inline-flex items-center justify-center gap-2.5 text-center font-medium hover:bg-opacity-90 font-medium transition focus:outline-none",
+  "relative isolate inline-flex items-center justify-center gap-2.5 overflow-hidden text-center font-medium hover:bg-opacity-90 transition focus:outline-none",
   {
     variants: {
       variant: {
         primary: "bg-primary text-white",
         green: "bg-green text-white",
+        error: "bg-error text-white",
         dark: "bg-dark text-white dark:bg-white/10",
         outlinePrimary:
           "border border-primary hover:bg-primary/10 text-primary",
@@ -33,11 +37,10 @@ const buttonVariants = cva(
   },
 );
 
-type ButtonProps = HTMLAttributes<HTMLButtonElement> &
+type ButtonProps = ButtonHTMLAttributes<HTMLButtonElement> &
   VariantProps<typeof buttonVariants> & {
-    label: string;
-    icon?: React.ReactNode;
-    type?: "button" | "submit" | "reset";
+    label: ReactNode;
+    icon?: ReactNode;
   };
 
 export function Button({
@@ -49,13 +52,59 @@ export function Button({
   className,
   ...props
 }: ButtonProps) {
+  const [mousePosition, setMousePosition] = useState({ x: 0, y: 0 });
+  const [isHovered, setIsHovered] = useState(false);
+
+  const spotlightStyle = {
+    "--spotlight-x": `${mousePosition.x}px`,
+    "--spotlight-y": `${mousePosition.y}px`,
+    background:
+      "radial-gradient(130px circle at var(--spotlight-x) var(--spotlight-y), rgba(255, 255, 255, 0.95), transparent 70%)",
+    WebkitMask:
+      "linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0)",
+    WebkitMaskComposite: "xor",
+    maskComposite: "exclude",
+  } as CSSProperties;
+
+  const handleMouseMove = (event: React.MouseEvent<HTMLButtonElement>) => {
+    const rect = event.currentTarget.getBoundingClientRect();
+    setMousePosition({
+      x: event.clientX - rect.left,
+      y: event.clientY - rect.top,
+    });
+    props.onMouseMove?.(event);
+  };
+
+  const handleMouseEnter = (event: React.MouseEvent<HTMLButtonElement>) => {
+    setIsHovered(true);
+    props.onMouseEnter?.(event);
+  };
+
+  const handleMouseLeave = (event: React.MouseEvent<HTMLButtonElement>) => {
+    setIsHovered(false);
+    props.onMouseLeave?.(event);
+  };
+
   return (
     <button
       className={buttonVariants({ variant, shape, size, className })}
+      onMouseEnter={handleMouseEnter}
+      onMouseLeave={handleMouseLeave}
+      onMouseMove={handleMouseMove}
       {...props}
     >
-      {icon && <span>{icon}</span>}
-      {label}
+      <span
+        aria-hidden="true"
+        className="pointer-events-none absolute inset-0 z-0 rounded-[inherit] p-px transition-opacity duration-300"
+        style={{
+          ...spotlightStyle,
+          opacity: isHovered ? 1 : 0,
+        }}
+      />
+      <span className="relative z-10 inline-flex items-center gap-2.5">
+        {icon && <span>{icon}</span>}
+        {label}
+      </span>
     </button>
   );
 }