feat: redesign auth layout and login view with ProsApp logo

- auth_layout: gradient header (mobile) / split panel (desktop)
- background_auth: gradient blue with network logo, tagline and feature list
- custom_title: network logo replacing local asset
- login_view: consistent UI matching phone_login_view (inputs, buttons,
  links to register/phone login, brand colors)

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

lib/ui/layouts/auth/auth_layout.dart

@@ -1,6 +1,4 @@
 import 'package:flutter/material.dart';
-
-import 'package:prosapp_web_app/ui/layouts/auth/widgets/custom_title.dart';
 import 'package:prosapp_web_app/ui/layouts/auth/widgets/background_auth.dart';
 
 class AuthLayout extends StatelessWidget {
@@ -10,81 +8,83 @@ class AuthLayout extends StatelessWidget {
   @override
   Widget build(BuildContext context) {
     final size = MediaQuery.of(context).size;
-
     return Scaffold(
-      body: Scrollbar(
+      body: size.width > 900
-        child: ListView(
-          physics: const ClampingScrollPhysics(),
-          children: [
-            size.width > 1000
           ? _DesktopBody(child: child)
           : _MobileBody(child: child),
-          ],
-        ),
-      ),
     );
   }
 }
 
 class _MobileBody extends StatelessWidget {
   final Widget child;
-
+  const _MobileBody({required this.child});
-  const _MobileBody({super.key, required this.child});
 
   @override
   Widget build(BuildContext context) {
-    return Container(
+    return Column(
-      color: Colors.white,
-      child: Column(
-        crossAxisAlignment: CrossAxisAlignment.start,
       children: [
-          const SizedBox(height: 20),
+        // Gradient header with logo
-          const CustomTitle(),
+        Container(
-          SizedBox(width: double.infinity, height: 420, child: child),
-          const SizedBox(
           width: double.infinity,
-            height: 400,
+          padding: const EdgeInsets.symmetric(vertical: 36),
-            child: BackgroundAuth(),
+          decoration: const BoxDecoration(
-          )
+            gradient: LinearGradient(
+              begin: Alignment.topCenter,
+              end: Alignment.bottomCenter,
+              colors: [Color(0xFF42A4EF), Color(0xFF1565C0)],
+            ),
+            borderRadius: BorderRadius.only(
+              bottomLeft: Radius.circular(32),
+              bottomRight: Radius.circular(32),
+            ),
+          ),
+          child: Column(
+            children: [
+              Image.network(
+                'https://prosapp.co/img/logo_prosapp.png',
+                height: 52,
+                color: Colors.white,
+                colorBlendMode: BlendMode.srcATop,
+                errorBuilder: (_, __, ___) => const Text(
+                  'ProsApp',
+                  style: TextStyle(fontSize: 28, fontWeight: FontWeight.bold, color: Colors.white),
+                ),
+              ),
+              const SizedBox(height: 8),
+              const Text(
+                'Conecta con los mejores profesionales',
+                style: TextStyle(color: Colors.white70, fontSize: 13),
+              ),
             ],
           ),
+        ),
+        Expanded(child: SingleChildScrollView(child: child)),
+      ],
     );
   }
 }
 
 class _DesktopBody extends StatelessWidget {
   final Widget child;
-
+  const _DesktopBody({required this.child});
-  const _DesktopBody({super.key, required this.child});
 
   @override
   Widget build(BuildContext context) {
     final size = MediaQuery.of(context).size;
-
+    return Row(
-    return Container(
+      children: [
-      width: size.width,
+        // Left gradient panel
+        const SizedBox(width: 420, child: BackgroundAuth()),
+        // Right form panel
+        Expanded(
+          child: Container(
             height: size.height,
             color: Colors.white,
-      child: Row(
+            child: Center(child: child),
-        children: [
-          const Expanded(child: BackgroundAuth()),
-
-          // View container
-          Container(
-            width: 600,
-            height: double.infinity,
-            color: Colors.white,
-            child: Column(
-              children: [
-                const SizedBox(height: 20),
-                const CustomTitle(),
-                const SizedBox(height: 50),
-                Expanded(child: child),
-              ],
           ),
         ),
       ],
-      ),
     );
   }
 }

lib/ui/layouts/auth/widgets/background_auth.dart

@@ -6,18 +6,58 @@ class BackgroundAuth extends StatelessWidget {
   @override
   Widget build(BuildContext context) {
     return Container(
-      color: Colors.blue,
+      decoration: const BoxDecoration(
-      child: Container(
+        gradient: LinearGradient(
-        constraints: const BoxConstraints(maxWidth: 400),
+          begin: Alignment.topCenter,
-        child: const Center(
+          end: Alignment.bottomCenter,
-          child: Padding(
+          colors: [Color(0xFF42A4EF), Color(0xFF1565C0)],
-            padding: EdgeInsets.symmetric(horizontal: 30),
-            child: Image(
-              image: AssetImage('prosapp-logo.png'),
         ),
       ),
+      child: Column(
+        mainAxisAlignment: MainAxisAlignment.center,
+        children: [
+          Image.network(
+            'https://prosapp.co/img/logo_prosapp.png',
+            width: 180,
+            color: Colors.white,
+            colorBlendMode: BlendMode.srcATop,
+            errorBuilder: (_, __, ___) => const Text(
+              'ProsApp',
+              style: TextStyle(fontSize: 36, fontWeight: FontWeight.bold, color: Colors.white),
             ),
           ),
+          const SizedBox(height: 24),
+          const Text(
+            'Conecta con los mejores\nprofesionales',
+            textAlign: TextAlign.center,
+            style: TextStyle(color: Colors.white70, fontSize: 16, height: 1.5),
+          ),
+          const SizedBox(height: 48),
+          _FeatureItem(icon: Icons.verified_user_outlined, text: 'Profesionales verificados'),
+          const SizedBox(height: 12),
+          _FeatureItem(icon: Icons.star_outline, text: 'Calificaciones reales'),
+          const SizedBox(height: 12),
+          _FeatureItem(icon: Icons.chat_bubble_outline, text: 'Chat directo'),
+        ],
+      ),
+    );
+  }
+}
+
+class _FeatureItem extends StatelessWidget {
+  final IconData icon;
+  final String text;
+  const _FeatureItem({required this.icon, required this.text});
+
+  @override
+  Widget build(BuildContext context) {
+    return Row(
+      mainAxisSize: MainAxisSize.min,
+      children: [
+        Icon(icon, color: Colors.white70, size: 18),
+        const SizedBox(width: 8),
+        Text(text, style: const TextStyle(color: Colors.white70, fontSize: 14)),
+      ],
     );
   }
 }

lib/ui/layouts/auth/widgets/custom_title.dart

@@ -1,38 +1,29 @@
 import 'package:flutter/material.dart';
-import 'package:google_fonts/google_fonts.dart';
 
 class CustomTitle extends StatelessWidget {
-  const CustomTitle({
+  const CustomTitle({super.key});
-    super.key,
-  });
 
   @override
   Widget build(BuildContext context) {
-    return Container(
+    return Column(
-      padding: const EdgeInsets.symmetric(horizontal: 20),
-      child: Column(
-        crossAxisAlignment: CrossAxisAlignment.center,
       children: [
-          const SizedBox(height: 100), // Añade espacio arriba
+        const SizedBox(height: 40),
-          Image.asset(
+        Image.network(
-            'logo.png',
+          'https://prosapp.co/img/logo_prosapp.png',
-            width: 60,
+          height: 52,
-            height: 60,
-          ),
-          const SizedBox(height: 40), // Mantiene el espacio entre el logo y el texto
-          FittedBox(
           fit: BoxFit.contain,
-            child: Text(
+          errorBuilder: (_, __, ___) => const Text(
-              "Iniciar sesión",
+            'ProsApp',
-              style: GoogleFonts.montserratAlternates(
+            style: TextStyle(fontSize: 28, fontWeight: FontWeight.bold, color: Color(0xFF42A4EF)),
-                fontSize: 30,
-                color: Colors.black,
-                fontWeight: FontWeight.bold,
           ),
         ),
-          )
+        const SizedBox(height: 8),
+        const Text(
+          'Conecta con los mejores profesionales',
+          style: TextStyle(color: Colors.grey, fontSize: 13),
+        ),
+        const SizedBox(height: 32),
       ],
-      ),
     );
   }
 }

lib/ui/views/login_view.dart

@@ -1,11 +1,8 @@
+import 'package:email_validator/email_validator.dart';
+import 'package:flutter/material.dart';
 import 'package:prosapp_web_app/providers/auth_provider.dart';
 import 'package:prosapp_web_app/providers/login_form_provider.dart';
 import 'package:prosapp_web_app/router/router.dart';
-import 'package:prosapp_web_app/ui/buttons/custom_outlined_button.dart';
-import 'package:prosapp_web_app/ui/buttons/link_text.dart';
-import 'package:prosapp_web_app/ui/inputs/custom_inputs.dart';
-import 'package:email_validator/email_validator.dart';
-import 'package:flutter/material.dart';
 import 'package:provider/provider.dart';
 
 class LoginView extends StatelessWidget {
@@ -18,89 +15,111 @@ class LoginView extends StatelessWidget {
     return ChangeNotifierProvider(
       create: (_) => LoginFormProvider(),
       child: Builder(builder: (context) {
-        final loginFormProvider =
+        final loginFormProvider = Provider.of<LoginFormProvider>(context, listen: false);
-            Provider.of<LoginFormProvider>(context, listen: false);
 
-        return Container(
+        return Center(
-          margin: const EdgeInsets.only(top: 100),
-          padding: const EdgeInsets.symmetric(horizontal: 20),
-          child: Center(
           child: ConstrainedBox(
-              constraints: const BoxConstraints(maxWidth: 370),
+            constraints: const BoxConstraints(maxWidth: 400),
+            child: SingleChildScrollView(
+              padding: const EdgeInsets.symmetric(horizontal: 28, vertical: 16),
               child: Form(
                 autovalidateMode: AutovalidateMode.onUserInteraction,
                 key: loginFormProvider.formKey,
                 child: Column(
+                  crossAxisAlignment: CrossAxisAlignment.start,
                   children: [
+                    const Text('Iniciar sesión',
+                        style: TextStyle(fontSize: 22, fontWeight: FontWeight.bold)),
+                    const SizedBox(height: 4),
+                    const Text('Ingresa con tu cuenta de email',
+                        style: TextStyle(color: Colors.grey, fontSize: 13)),
+                    const SizedBox(height: 28),
+
                     // Email
                     TextFormField(
-                      onFieldSubmitted: (_) =>
+                      keyboardType: TextInputType.emailAddress,
-                          onFormSubmit(loginFormProvider, authProvider),
+                      onFieldSubmitted: (_) => _submit(loginFormProvider, authProvider),
-                      validator: (value) {
+                      validator: (v) => EmailValidator.validate(v ?? '') ? null : 'Email no válido',
-                        if (!EmailValidator.validate(value ?? '')) {
+                      onChanged: (v) => loginFormProvider.email = v,
-                          return 'Email no válido';
+                      decoration: _inputDecoration('Email', 'correo@ejemplo.com', Icons.email_outlined),
-                        }
-                        return null;
-                      },
-                      onChanged: (value) => loginFormProvider.email = value,
-                      decoration: CustomInputs.loginInputDecoration(
-                        hint: 'Ingresa tu correo',
-                        label: 'Email',
-                        icon: Icons.email_outlined,
                     ),
-                    ),
+                    const SizedBox(height: 16),
-
-                    const SizedBox(height: 20),
 
                     // Password
                     TextFormField(
-                      onFieldSubmitted: (_) =>
-                          onFormSubmit(loginFormProvider, authProvider),
-                      validator: (value) {
-                        if (value == null || value.isEmpty) {
-                          return "Ingresa tu contraseña";
-                        }
-
-                        if (value.length < 8) {
-                          return "La contraseña debe tener al menos 8 caracteres";
-                        }
-
-                        return null; // Válido
-                      },
-                      onChanged: (value) => loginFormProvider.password = value,
                       obscureText: true,
-                      decoration: CustomInputs.loginInputDecoration(
+                      onFieldSubmitted: (_) => _submit(loginFormProvider, authProvider),
-                        hint: 'Ingresa tu contraseña',
+                      validator: (v) {
-                        label: 'Contraseña',
+                        if (v == null || v.isEmpty) return 'Ingresa tu contraseña';
-                        icon: Icons.lock_outline,
+                        if (v.length < 6) return 'Mínimo 6 caracteres';
+                        return null;
+                      },
+                      onChanged: (v) => loginFormProvider.password = v,
+                      decoration: _inputDecoration('Contraseña', '••••••••', Icons.lock_outline),
+                    ),
+                    const SizedBox(height: 24),
+
+                    SizedBox(
+                      width: double.infinity,
+                      child: ElevatedButton(
+                        onPressed: () => _submit(loginFormProvider, authProvider),
+                        style: ElevatedButton.styleFrom(
+                          backgroundColor: const Color(0xFF42A4EF),
+                          foregroundColor: Colors.white,
+                          padding: const EdgeInsets.symmetric(vertical: 16),
+                          shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(10)),
+                          elevation: 0,
+                        ),
+                        child: const Text('Ingresar',
+                            style: TextStyle(fontSize: 15, fontWeight: FontWeight.w600)),
                       ),
                     ),
+                    const SizedBox(height: 24),
 
-                    const SizedBox(height: 20),
+                    Row(children: const [
+                      Expanded(child: Divider()),
+                      Padding(
+                          padding: EdgeInsets.symmetric(horizontal: 12),
+                          child: Text('o', style: TextStyle(color: Colors.grey))),
+                      Expanded(child: Divider()),
+                    ]),
+                    const SizedBox(height: 16),
 
-                    CustomOutlinedButton(
+                    SizedBox(
+                      width: double.infinity,
+                      child: OutlinedButton.icon(
                         onPressed: () =>
-                          onFormSubmit(loginFormProvider, authProvider),
+                            Navigator.pushReplacementNamed(context, Flurorouter.phoneLoginRoute),
-                      text: "Ingresar",
+                        icon: const Icon(Icons.phone_android, color: Color(0xFF42A4EF)),
-                      color: Colors.blue,
+                        label: const Text('Ingresar con celular',
+                            style: TextStyle(color: Color(0xFF42A4EF), fontWeight: FontWeight.w600)),
+                        style: OutlinedButton.styleFrom(
+                          padding: const EdgeInsets.symmetric(vertical: 14),
+                          shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(10)),
+                          side: const BorderSide(color: Color(0xFF42A4EF)),
                         ),
-                    const SizedBox(height: 20),
-
-                    LinkText(
-                      text: "Nueva cuenta",
-                      onPressed: () {
-                        Navigator.pushReplacementNamed(
-                            context, Flurorouter.registerRoute);
-                      },
                       ),
-                    const SizedBox(height: 5),
+                    ),
+                    const SizedBox(height: 12),
 
-                    LinkText(
+                    Center(
-                      text: "Entrar con celular",
+                      child: TextButton(
-                      onPressed: () {
+                        onPressed: () =>
-                        Navigator.pushReplacementNamed(
+                            Navigator.pushReplacementNamed(context, Flurorouter.registerRoute),
-                            context, Flurorouter.phoneLoginRoute);
+                        child: RichText(
-                      },
+                          text: const TextSpan(
+                            style: TextStyle(color: Colors.grey, fontSize: 13),
+                            children: [
+                              TextSpan(text: '¿No tienes cuenta? '),
+                              TextSpan(
+                                text: 'Regístrate',
+                                style: TextStyle(
+                                    color: Color(0xFF42A4EF), fontWeight: FontWeight.w600),
+                              ),
+                            ],
+                          ),
+                        ),
+                      ),
                     ),
                   ],
                 ),
@@ -112,14 +131,32 @@ class LoginView extends StatelessWidget {
     );
   }
 
-  void onFormSubmit(
+  InputDecoration _inputDecoration(String label, String hint, IconData icon) {
-      LoginFormProvider loginFormProvider, AuthProvider authProvider) async {
+    return InputDecoration(
-    final isValid = loginFormProvider.validateForm();
+      labelText: label,
-    if (isValid) {
+      hintText: hint,
-      await authProvider.login(
+      prefixIcon: Icon(icon, color: const Color(0xFF42A4EF)),
-        loginFormProvider.email,
+      filled: true,
-        loginFormProvider.password,
+      fillColor: const Color(0xFFF5F8FF),
+      border: OutlineInputBorder(borderRadius: BorderRadius.circular(10), borderSide: BorderSide.none),
+      enabledBorder: OutlineInputBorder(
+          borderRadius: BorderRadius.circular(10),
+          borderSide: const BorderSide(color: Color(0xFFE0E7FF))),
+      focusedBorder: OutlineInputBorder(
+          borderRadius: BorderRadius.circular(10),
+          borderSide: const BorderSide(color: Color(0xFF42A4EF), width: 2)),
+      errorBorder: OutlineInputBorder(
+          borderRadius: BorderRadius.circular(10),
+          borderSide: const BorderSide(color: Colors.red)),
+      focusedErrorBorder: OutlineInputBorder(
+          borderRadius: BorderRadius.circular(10),
+          borderSide: const BorderSide(color: Colors.red, width: 2)),
     );
   }
+
+  void _submit(LoginFormProvider form, AuthProvider auth) async {
+    if (form.validateForm()) {
+      await auth.login(form.email, form.password);
+    }
   }
 }