for dev branch

src/app/[locale]/layout.tsx

@@ -12,6 +12,7 @@ import { ReactNode } from 'react';
 import { setRequestLocale } from 'next-intl/server';
 import QueryProvider from '@/shared/config/react-query/QueryProvider';
 import Script from 'next/script';
+import Provider from '@/features/providers/provider';
 
 export const metadata: Metadata = {
   title: PRODUCT_INFO.name,
@@ -48,9 +49,11 @@ export default async function RootLayout({ children, params }: Props) {
             disableTransitionOnChange
           >
             <QueryProvider>
+              <Provider>
                 <Navbar />
                 {children}
                 <Footer />
+              </Provider>
             </QueryProvider>
           </ThemeProvider>
         </NextIntlClientProvider>

src/features/auth/login/lib/formatPhone.ts

@@ -1,4 +1,4 @@
-export const formatPhone = (value: string) => {
+const formatPhone = (value: string) => {
   if (value.length <= 2) return value;
   if (value.length <= 5) return `${value.slice(0, 2)} ${value.slice(2)}`;
   if (value.length <= 7)
@@ -9,5 +9,6 @@ export const formatPhone = (value: string) => {
   )} ${value.slice(7)}`;
 };
 
-export const normalizeDigits = (value: string) =>
+const normalizeDigits = (value: string) => value.replace(/\D/g, '').slice(0, 9);
-  value.replace(/\D/g, '').slice(0, 9);
+
+export { formatPhone, normalizeDigits };

src/features/auth/login/lib/index.ts

@@ -1 +1,4 @@
 // Ushbu fayl loyiha structurasi uchun qo'shilgan. O'chirib tashlasangiz bo'ladi
+export * from './togle';
+export * from './useLoginForm';
+export * from './formatPhone';

src/features/auth/login/model/index.ts

@@ -1 +1 @@
-export { RegisterModal } from './model';
+export { AuthModals } from './model';

src/features/auth/login/model/model.tsx

@@ -1,5 +1,14 @@
-function RegisterModal() {
+'use client';
-  return <div></div>;
+import { AnimatePresence } from 'framer-motion';
+import LoginForm from '../ui/form';
+import { useLoginModal } from '../lib/togle';
+function AuthModals() {
+  const openLoginModal = useLoginModal((state) => state.openLoginModal);
+  return (
+    <div>
+      <AnimatePresence>{openLoginModal && <LoginForm />}</AnimatePresence>
+    </div>
+  );
 }
 
-export { RegisterModal };
+export { AuthModals };

src/features/auth/login/ui/form.tsx

@@ -10,37 +10,49 @@ import { useLoginForm } from '../lib/useLoginForm';
 import { Label } from '@/shared/ui/label';
 import { X } from 'lucide-react';
 import { useLoginModal } from '../lib/togle';
-
+import { MotionWrapper } from './motion';
-// ============================= //
 
 export default function LoginForm() {
   const t = useTranslations();
   const [isFocused, setIsFocused] = useState(false);
 
-  // ========== Handlers ========== //
+  const { phone, setPhone, submit, error, loading } = useLoginForm();
+  const toggleLoginModal = useLoginModal((state) => state.toggleLoginModal);
 
   const handlePhoneChange = useCallback(
     (e: React.ChangeEvent<HTMLInputElement>) => {
       setPhone(normalizeDigits(e.target.value));
     },
-    [],
+    [setPhone],
   );
 
-  // ============================== //
-
-  const { phone, setPhone, submit, error, loading } = useLoginForm();
-  const toggleLoginModal = useLoginModal((state) => state.toggleLoginModal);
-
   return (
-    <div>
+    <>
-      <header className="w-full " onClick={toggleLoginModal}>
+      {/* Backdrop */}
-        <X />
+      <div
-      </header>
+        className="fixed inset-0 z-10 bg-black/40 backdrop-blur-sm"
+        onClick={toggleLoginModal}
+      />
+
+      {/* Modal */}
+      <div className="fixed inset-0 z-20 flex items-center justify-center pointer-events-none">
+        <MotionWrapper>
+          <div className="pointer-events-auto bg-background rounded-2xl shadow-2xl p-8 w-full max-w-sm mx-4">
+            {/* Close button */}
+            <div className="flex justify-end mb-4">
+              <button
+                onClick={toggleLoginModal}
+                className="p-1 rounded-full hover:bg-muted transition-colors"
+              >
+                <X className="h-5 w-5 text-muted-foreground" />
+              </button>
+            </div>
+
             <form onSubmit={submit} className="space-y-6 text-center">
               {/* PHONE FIELD */}
               <div className="space-y-2">
                 <Label htmlFor="phone" className="text-sm font-medium">
-            {t('auth.login_phone')}
+                  Telefon raqam
                 </Label>
 
                 <div
@@ -66,15 +78,13 @@ export default function LoginForm() {
                   />
                 </div>
 
-          {/* Helper text */}
                 <div className="flex justify-between items-center px-1">
                   <p className="text-xs text-muted-foreground">
                     {phone.length > 0 &&
                       t('auth.entered_digits', { count: phone.length })}
                   </p>
-
                   {phone.length === 9 && (
-              <span className="text-xs text-green-600 font-medium slide-in-from-right-2">
+                    <span className="text-xs text-green-600 font-medium">
                       ✓ {t('auth.full')}
                     </span>
                   )}
@@ -82,7 +92,7 @@ export default function LoginForm() {
               </div>
 
               {error && (
-          <div className="text-sm text-destructive bg-destructive/10 p-3 rounded-md border border-destructive/20 animate-in">
+                <div className="text-sm text-destructive bg-destructive/10 p-3 rounded-md border border-destructive/20">
                   {error}
                 </div>
               )}
@@ -98,7 +108,7 @@ export default function LoginForm() {
                     {t('auth.otp_sending')}
                   </span>
                 ) : (
-            t('auth.otp')
+                  <p>Kirish</p>
                 )}
               </Button>
 
@@ -109,11 +119,14 @@ export default function LoginForm() {
                 </div>
                 <div className="relative flex justify-center text-xs uppercase">
                   <span className="bg-background px-2 text-muted-foreground">
-              {t('auth.or_continue')}
+                    Ro&lsquo;yhatdan o&lsquo;tish
                   </span>
                 </div>
               </div>
             </form>
           </div>
+        </MotionWrapper>
+      </div>
+    </>
   );
 }

src/features/auth/login/ui/motion.tsx

@@ -6,9 +6,10 @@ import { ReactNode } from 'react';
 function MotionWrapper({ children }: { children: ReactNode }) {
   return (
     <motion.div
-      initial={{ opacity: 0, x: -50 }}
+      initial={{ opacity: 0, scale: 0.95, y: 10 }}
-      animate={{ opacity: 1, x: 0 }}
+      animate={{ opacity: 1, scale: 1, y: 0 }}
-      transition={{ duration: 0.5 }}
+      exit={{ opacity: 0, scale: 0.95, y: 10 }}
+      transition={{ duration: 0.2, ease: 'easeOut' }}
     >
       {children}
     </motion.div>

src/features/providers/provider.tsx

@@ -0,0 +1,11 @@
+import React from 'react';
+import { AuthModals } from '../auth/login/model';
+
+export default function Provider({ children }: { children: React.ReactNode }) {
+  return (
+    <div>
+      <AuthModals />
+      {children}
+    </div>
+  );
+}

src/widgets/navbar/ui/authButtons.tsx

@@ -46,7 +46,7 @@ function AuthButtons() {
       <div className="lg:flex hidden">
         <ChangeLang />
       </div>
-      <Button asChild variant="outline" onClick={toggleLoginModal}>
+      <Button variant="outline" onClick={() => toggleLoginModal()}>
         <Link href={auth.login.url}>{auth.login.title}</Link>
       </Button>
       <Button asChild>