feat(auth): enhance sign-in page layout and theme toggle functionality

- Updated the SignIn component to improve layout and styling, ensuring better visual alignment.
- Added responsive visibility for the ThemeToggleSwitch in the SigninWithPassword component.
- Refactored the Signin component to include the ThemeToggleSwitch for better user experience.
- Improved code organization by separating theme toggle logic and ensuring consistent styling across components.

src/app/auth/sign-in/page.tsx

@@ -10,7 +10,7 @@ export default function SignIn() {
     <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="shadow-theme-xs 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 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/components/Auth/Signin/index.tsx

@@ -1,14 +1,20 @@
 "use client";
 import { Logo } from "@/components/logo";
+import { ThemeToggleSwitch } from "@/components/Layouts/header/theme-toggle";
 import SigninWithPassword from "../SigninWithPassword";
 
 export default function Signin() {
   return (
     <div>
       <div className="mb-8 mt-4 flex flex-col items-center justify-center gap-3 text-center">
+        <div className="flex w-full flex-col items-center gap-4 max-sm:gap-3 sm:w-auto">
+          <div className="flex w-full justify-end sm:hidden">
+            <ThemeToggleSwitch />
+          </div>
           <div className="rounded-2xl border border-stroke/70 bg-white/80 p-3 dark:border-dark-3 dark:bg-dark-2/70">
             <Logo />
           </div>
+        </div>
         <div>
           <h1 className="text-2xl font-semibold text-dark dark:text-white">
             Welcome back

src/components/Auth/SigninWithPassword.tsx

@@ -35,7 +35,7 @@ export default function SigninWithPassword() {
   };
   return (
     <form onSubmit={handleSubmit(onSubmit)} className="mt-5">
-      <div className="absolute right-0 top-7">
+      <div className="absolute right-0 top-7 hidden sm:block">
         <ThemeToggleSwitch />
       </div>
       <InputGroup

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

@@ -14,7 +14,11 @@ const THEMES = [
   },
 ];
 
-export function ThemeToggleSwitch() {
+type ThemeToggleSwitchProps = {
+  className?: string;
+};
+
+export function ThemeToggleSwitch({ className }: ThemeToggleSwitchProps) {
   const { setTheme, theme } = useTheme();
   const [mounted, setMounted] = useState(false);
   const [isTransitioning, setIsTransitioning] = useState(false);
@@ -84,7 +88,10 @@ export function ThemeToggleSwitch() {
         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"
+      className={cn(
+        "group relative shrink-0 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",
+        className,
+      )}
       type="button"
     >
       <span className="sr-only">