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/conditional-layout.tsx

@@ -18,7 +18,7 @@ function MainLayout({ children }: PropsWithChildren) {
       {isMobile && <div className="w-[70px] shrink-0" />}
       <div className="flex min-h-0 min-w-0 flex-1 flex-col bg-gray-2 dark:bg-[#020d1a]">
         <Header />
-        <main className="isolate flex min-h-0 flex-1 flex-col mx-auto w-full max-w-screen-2xl overflow-hidden p-4 md:p-6 2xl:px-10 2xl:py-4">
+        <main className="mx-auto isolate flex min-h-0 w-full max-w-screen-2xl flex-1 flex-col overflow-hidden px-3 py-4 md:px-4 md:py-6 2xl:px-6 2xl:py-4">
           {children}
         </main>
       </div>

src/components/Layouts/header/index.tsx

@@ -6,9 +6,9 @@ import { UserInfo } from "./user-info";
 
 export function Header() {
   return (
-    <header className="sticky top-0 z-30 flex shrink-0 items-center justify-between border-b border-stroke bg-white px-4 py-2.5 shadow-1 dark:border-stroke-dark dark:bg-gray-dark md:px-5 2xl:px-10">
+    <header className="sticky top-0 z-30 flex shrink-0 items-center justify-between border-b border-stroke/70 bg-white/90 px-4 py-2.5 backdrop-blur-md dark:border-dark-3 dark:bg-gray-dark/85 md:px-5 2xl:px-10">
       <div className="max-xl:hidden">
-        <h1 className="text-heading-6 font-bold leading-tight text-dark dark:text-white">
+        <h1 className="text-heading-6 font-semibold leading-tight text-dark dark:text-white">
           Opportunity Lens
         </h1>
       </div>

src/components/Layouts/header/notification/index.tsx

@@ -49,7 +49,7 @@ export function Notification() {
         }}
       >
         <DropdownTrigger
-          className="grid size-12 place-items-center rounded-full border bg-gray-2 text-dark outline-none hover:text-primary focus-visible:border-primary focus-visible:text-primary dark:border-dark-4 dark:bg-dark-3 dark:text-white dark:focus-visible:border-primary"
+          className="grid size-12 place-items-center rounded-full border border-stroke/70 bg-white/75 text-dark shadow-theme-xs backdrop-blur-md outline-none transition-colors hover:text-primary focus-visible:border-primary focus-visible:text-primary dark:border-dark-3 dark:bg-dark-2/75 dark:text-white dark:focus-visible:border-primary"
           aria-label="View Notifications"
         >
           <span className="relative">
@@ -68,13 +68,13 @@ export function Notification() {
 
         <DropdownContent
           align={isMobile ? "end" : "center"}
-          className="w-[15rem] max-w-[calc(100vw-1rem)] min-[360px]:w-[16rem] min-[390px]:w-[17rem] min-[430px]:w-[18rem] sm:w-[22rem] border border-stroke bg-white px-2.5 py-3 shadow-md sm:px-3.5 dark:border-dark-3 dark:bg-gray-dark"
+          className="w-[15rem] max-w-[calc(100vw-1rem)] min-[360px]:w-[16rem] min-[390px]:w-[17rem] min-[430px]:w-[18rem] rounded-2xl border border-stroke/70 bg-white/95 px-2.5 py-3 shadow-theme-xs backdrop-blur-md sm:w-[22rem] sm:px-3.5 dark:border-dark-3 dark:bg-gray-dark/95"
         >
           <div className="mb-1 flex flex-wrap items-center justify-between gap-2 px-1 py-1.5 sm:px-2">
-            <span className="text-base font-medium text-dark sm:text-lg dark:text-white">
+            <span className="text-base font-semibold text-dark sm:text-lg dark:text-white">
               Notifications
             </span>
-            <span className="shrink-0 rounded-md bg-primary px-[9px] py-0.5 text-xs font-medium text-white">
+            <span className="shrink-0 rounded-full border border-white/35 bg-gradient-to-br from-primary/85 to-primary/70 px-[9px] py-0.5 text-xs font-semibold text-white shadow-theme-xs dark:border-white/20">
               {unreadNotificationCount} new
             </span>
           </div>
@@ -87,7 +87,7 @@ export function Notification() {
           <Link
             href="/notification-history"
             onClick={() => setIsOpen(false)}
-            className="block rounded-lg border border-primary p-2 text-center text-sm font-medium tracking-wide text-primary outline-none transition-colors hover:bg-blue-light-5 focus:bg-blue-light-5 focus:text-primary focus-visible:border-primary dark:border-dark-3 dark:text-dark-6 dark:hover:border-dark-5 dark:hover:bg-dark-3 dark:hover:text-dark-7 dark:focus-visible:border-dark-5 dark:focus-visible:bg-dark-3 dark:focus-visible:text-dark-7"
+            className="block rounded-xl border border-primary/40 bg-white/70 p-2 text-center text-sm font-semibold tracking-wide text-primary outline-none transition-colors hover:bg-primary/10 focus:bg-primary/10 focus:text-primary focus-visible:border-primary dark:border-dark-3 dark:bg-dark-2/70 dark:text-dark-6 dark:hover:border-dark-5 dark:hover:bg-dark-3 dark:hover:text-dark-7 dark:focus-visible:border-dark-5 dark:focus-visible:bg-dark-3 dark:focus-visible:text-dark-7"
           >
             See all notifications
           </Link>

src/components/Layouts/header/theme-toggle/index.tsx

@@ -17,38 +17,87 @@ const THEMES = [
 export function ThemeToggleSwitch() {
   const { setTheme, theme } = useTheme();
   const [mounted, setMounted] = useState(false);
+  const [isTransitioning, setIsTransitioning] = useState(false);
+  const isDarkTheme = theme === "dark";
 
   useEffect(() => {
     setMounted(true);
   }, []);
 
+  useEffect(() => {
+    if (!isTransitioning) return;
+
+    const transitionTimer = window.setTimeout(() => {
+      setIsTransitioning(false);
+    }, 650);
+
+    return () => window.clearTimeout(transitionTimer);
+  }, [isTransitioning]);
+
   if (!mounted) {
     return null;
   }
 
   return (
     <button
-      onClick={() => setTheme(theme === "light" ? "dark" : "light")}
-      className="group rounded-full bg-gray-3 p-[5px] text-[#111928] outline-1 outline-primary focus-visible:outline dark:bg-[#020D1A] dark:text-current"
+      onClick={() => {
+        setIsTransitioning(true);
+        setTheme(isDarkTheme ? "light" : "dark");
+      }}
+      className="group relative overflow-hidden rounded-full border border-stroke/70 bg-white/75 p-[5px] text-[#111928] shadow-theme-xs backdrop-blur-md outline-1 outline-primary transition-[color,border-color,background-color,box-shadow] duration-500 ease-out focus-visible:outline dark:border-dark-3 dark:bg-[#020D1A]/75 dark:text-current"
       type="button"
     >
       <span className="sr-only">
-        Switch to {theme === "light" ? "dark" : "light"} mode
+        Switch to {isDarkTheme ? "light" : "dark"} mode
       </span>
 
+      <span
+        aria-hidden
+        className={cn(
+          "pointer-events-none absolute inset-0 rounded-full bg-[radial-gradient(circle_at_20%_20%,rgba(99,102,241,0.24),transparent_50%),radial-gradient(circle_at_80%_80%,rgba(20,184,166,0.2),transparent_45%)] opacity-0 transition-opacity duration-500",
+          isTransitioning && "opacity-100",
+          isDarkTheme &&
+            "bg-[radial-gradient(circle_at_20%_20%,rgba(59,130,246,0.2),transparent_50%),radial-gradient(circle_at_80%_80%,rgba(129,140,248,0.25),transparent_45%)]",
+        )}
+      />
+
       <span aria-hidden className="relative flex gap-2.5">
         {/* Indicator */}
-        <span className="absolute size-[38px] rounded-full border border-gray-200 bg-white transition-all dark:translate-x-[48px] dark:border-none dark:bg-dark-2 dark:group-hover:bg-dark-3" />
+        <span
+          className={cn(
+            "absolute size-[38px] rounded-full border border-gray-200 bg-white transition-[transform,background-color,border-color,box-shadow] duration-500 ease-[cubic-bezier(0.2,0.8,0.2,1)] motion-reduce:transition-none",
+            "shadow-[0_8px_24px_rgba(15,23,42,0.1)] dark:border-dark-3 dark:bg-dark-2 dark:group-hover:bg-dark-3",
+            isDarkTheme
+              ? "translate-x-[48px] shadow-[0_0_0_1px_rgba(99,102,241,0.25),0_10px_24px_rgba(30,41,59,0.45)]"
+              : "translate-x-0",
+            isTransitioning && "scale-[1.06]",
+          )}
+        />
 
         {THEMES.map(({ name, Icon }) => (
           <span
             key={name}
             className={cn(
-              "relative grid size-[38px] place-items-center rounded-full",
+              "relative grid size-[38px] place-items-center rounded-full transition-transform duration-500 ease-out motion-reduce:transition-none",
               name === "dark" && "dark:text-white",
+              name === "light"
+                ? isDarkTheme
+                  ? "scale-75 -rotate-45 opacity-60"
+                  : "scale-100 rotate-0 opacity-100"
+                : isDarkTheme
+                  ? "scale-100 rotate-0 opacity-100"
+                  : "scale-75 rotate-45 opacity-60",
             )}
           >
-            <Icon />
+            <Icon
+              className={cn(
+                "transition-all duration-500 ease-out motion-reduce:transition-none",
+                name === "light"
+                  ? "text-amber-500 drop-shadow-[0_0_10px_rgba(245,158,11,0.35)]"
+                  : "text-indigo-300 drop-shadow-[0_0_10px_rgba(129,140,248,0.35)]",
+                isTransitioning && "animate-[spin_700ms_cubic-bezier(0.2,0.8,0.2,1)]",
+              )}
+            />
           </span>
         ))}
       </span>

src/components/Layouts/header/user-info/index.tsx

@@ -12,19 +12,52 @@ import { truncateString } from "@/utils/shared";
 import Image from "next/image";
 import Link from "next/link";
 import { useState } from "react";
+import type { CSSProperties } from "react";
 import { LogOutIcon, SettingsIcon, UserIcon } from "./icons";
 
 export function UserInfo() {
   const [isOpen, setIsOpen] = useState(false);
+  const [mousePosition, setMousePosition] = useState({ x: 0, y: 0 });
+  const [isHovered, setIsHovered] = useState(false);
   const { logout, user } = useUser();
 
+  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;
+
   return (
     <Dropdown isOpen={isOpen} setIsOpen={setIsOpen}>
-      <DropdownTrigger className="rounded align-middle outline-none ring-primary ring-offset-2 focus-visible:ring-1 dark:ring-offset-gray-dark">
+      <DropdownTrigger
+        className="relative isolate overflow-hidden rounded-xl border border-stroke/70 bg-white/70 px-2.5 py-1.5 align-middle shadow-theme-xs backdrop-blur-md outline-none ring-primary ring-offset-2 transition-colors focus-visible:ring-1 dark:border-dark-3 dark:bg-dark-2/70 dark:ring-offset-gray-dark"
+        onMouseEnter={() => setIsHovered(true)}
+        onMouseLeave={() => setIsHovered(false)}
+        onMouseMove={(event) => {
+          const rect = event.currentTarget.getBoundingClientRect();
+          setMousePosition({
+            x: event.clientX - rect.left,
+            y: event.clientY - rect.top,
+          });
+        }}
+      >
+        <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="sr-only">My Account</span>
 
-        <figure className="flex items-center gap-3">
-          <div className="rounded-full bg-gray-3 p-3.5 dark:bg-dark-3">
+        <figure className="relative z-10 flex items-center gap-3">
+          <div className="rounded-full border border-stroke/70 bg-gray-3/80 p-3.5 dark:border-dark-3 dark:bg-dark-3">
             <UserIcon />
           </div>
 
@@ -44,7 +77,7 @@ export function UserInfo() {
       </DropdownTrigger>
 
       <DropdownContent
-        className="border border-stroke bg-white shadow-md dark:border-dark-3 dark:bg-gray-dark min-[230px]:min-w-[17.5rem]"
+        className="min-[230px]:min-w-[17.5rem] rounded-2xl border border-stroke/70 bg-white/95 shadow-theme-xs backdrop-blur-md dark:border-dark-3 dark:bg-gray-dark/95"
         align="end"
       >
         <h2 className="sr-only">User information</h2>
@@ -53,7 +86,7 @@ export function UserInfo() {
           {user?.profile_image ? (
             <Image
               src={user.profile_image}
-              className="size-12"
+              className="size-12 rounded-full border border-stroke/70 dark:border-dark-3"
               unoptimized
               alt={`Avatar for ${user.full_name}`}
               role="presentation"
@@ -61,7 +94,7 @@ export function UserInfo() {
               height={200}
             />
           ) : (
-            <div className="rounded-full bg-gray-3 p-4 dark:bg-gray-7">
+            <div className="rounded-full border border-stroke/70 bg-gray-3 p-4 dark:border-dark-3 dark:bg-gray-7">
               <UserIcon width={30} height={30} />
             </div>
           )}
@@ -83,7 +116,7 @@ export function UserInfo() {
           <Link
             href={"/profile"}
             onClick={() => setIsOpen(false)}
-            className="flex w-full items-center gap-2.5 rounded-lg px-2.5 py-[9px] hover:bg-gray-2 hover:text-dark dark:hover:bg-dark-3 dark:hover:text-white"
+            className="flex w-full items-center gap-2.5 rounded-xl px-2.5 py-[9px] transition-colors hover:bg-gray-2/80 hover:text-dark dark:hover:bg-dark-3 dark:hover:text-white"
           >
             <UserIcon />
 
@@ -93,7 +126,7 @@ export function UserInfo() {
           <Link
             href={"/pages/settings"}
             onClick={() => setIsOpen(false)}
-            className="flex w-full items-center gap-2.5 rounded-lg px-2.5 py-[9px] hover:bg-gray-2 hover:text-dark dark:hover:bg-dark-3 dark:hover:text-white"
+            className="flex w-full items-center gap-2.5 rounded-xl px-2.5 py-[9px] transition-colors hover:bg-gray-2/80 hover:text-dark dark:hover:bg-dark-3 dark:hover:text-white"
           >
             <SettingsIcon />
 
@@ -107,7 +140,7 @@ export function UserInfo() {
 
         <div className="p-2 text-base text-[#4B5563] dark:text-dark-6">
           <button
-            className="flex w-full items-center gap-2.5 rounded-lg px-2.5 py-[9px] hover:bg-gray-2 hover:text-dark dark:hover:bg-dark-3 dark:hover:text-white"
+            className="flex w-full items-center gap-2.5 rounded-xl px-2.5 py-[9px] transition-colors hover:bg-gray-2/80 hover:text-dark dark:hover:bg-dark-3 dark:hover:text-white"
             onClick={() => {
               setIsOpen(false);
               logout();

src/components/Layouts/showcase-section.tsx

@@ -9,9 +9,11 @@ type PropsType = {
 
 export function ShowcaseSection({ title, children, className }: PropsType) {
   return (
-    <div className="rounded-[10px] bg-white shadow-1 dark:bg-gray-dark dark:shadow-card">
+    <div className="relative overflow-hidden rounded-2xl border border-stroke/70 bg-gradient-to-br from-white via-white to-primary/[0.03] shadow-theme-xs dark:border-dark-3 dark:from-gray-dark dark:via-gray-dark dark:to-primary/[0.08]">
+      <div className="pointer-events-none absolute -right-12 -top-12 h-32 w-32 rounded-full bg-primary/10 blur-3xl dark:bg-primary/20" />
+      <div className="pointer-events-none absolute -bottom-12 -left-12 h-32 w-32 rounded-full bg-purple-500/10 blur-3xl dark:bg-purple-500/20" />
       {title && (
-        <h2 className="border-b border-stroke px-4 py-4 font-medium text-dark dark:border-dark-3 dark:text-white sm:px-6 xl:px-7.5">
+        <h2 className="border-b border-stroke/70 bg-white/70 px-4 py-4 text-base font-semibold text-dark backdrop-blur-sm dark:border-dark-3 dark:bg-dark-2/40 dark:text-white sm:px-6 xl:px-7.5">
           {title}
         </h2>
       )}

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,
         )}