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(
-        child: ListView(
-          physics: const ClampingScrollPhysics(),
-          children: [
-            size.width > 1000
-                ? _DesktopBody(child: child)
-                : _MobileBody(child: child),
-          ],
-        ),
-      ),
+      body: size.width > 900
+          ? _DesktopBody(child: child)
+          : _MobileBody(child: child),
     );
   }
 }
 
 class _MobileBody extends StatelessWidget {
   final Widget child;
-
-  const _MobileBody({super.key, required this.child});
+  const _MobileBody({required this.child});
 
   @override
   Widget build(BuildContext context) {
-    return Container(
-      color: Colors.white,
-      child: Column(
-        crossAxisAlignment: CrossAxisAlignment.start,
-        children: [
-          const SizedBox(height: 20),
-          const CustomTitle(),
-          SizedBox(width: double.infinity, height: 420, child: child),
-          const SizedBox(
-            width: double.infinity,
-            height: 400,
-            child: BackgroundAuth(),
-          )
-        ],
-      ),
+    return Column(
+      children: [
+        // Gradient header with logo
+        Container(
+          width: double.infinity,
+          padding: const EdgeInsets.symmetric(vertical: 36),
+          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({super.key, required this.child});
+  const _DesktopBody({required this.child});
 
   @override
   Widget build(BuildContext context) {
     final size = MediaQuery.of(context).size;
-
-    return Container(
-      width: size.width,
-      height: size.height,
-      color: Colors.white,
-      child: Row(
-        children: [
-          const Expanded(child: BackgroundAuth()),
-
-          // View container
-          Container(
-            width: 600,
-            height: double.infinity,
+    return Row(
+      children: [
+        // Left gradient panel
+        const SizedBox(width: 420, child: BackgroundAuth()),
+        // Right form panel
+        Expanded(
+          child: Container(
+            height: size.height,
             color: Colors.white,
-            child: Column(
-              children: [
-                const SizedBox(height: 20),
-                const CustomTitle(),
-                const SizedBox(height: 50),
-                Expanded(child: child),
-              ],
-            ),
+            child: Center(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,
-      child: Container(
-        constraints: const BoxConstraints(maxWidth: 400),
-        child: const Center(
-          child: Padding(
-            padding: EdgeInsets.symmetric(horizontal: 30),
-            child: Image(
-              image: AssetImage('prosapp-logo.png'),
+      decoration: const BoxDecoration(
+        gradient: LinearGradient(
+          begin: Alignment.topCenter,
+          end: Alignment.bottomCenter,
+          colors: [Color(0xFF42A4EF), Color(0xFF1565C0)],
+        ),
+      ),
+      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({
-    super.key,
-  });
+  const CustomTitle({super.key});
 
   @override
   Widget build(BuildContext context) {
-    return Container(
-      padding: const EdgeInsets.symmetric(horizontal: 20),
-      child: Column(
-        crossAxisAlignment: CrossAxisAlignment.center,
-        children: [
-          const SizedBox(height: 100), // Añade espacio arriba
-          Image.asset(
-            'logo.png',
-            width: 60,
-            height: 60,
+    return Column(
+      children: [
+        const SizedBox(height: 40),
+        Image.network(
+          'https://prosapp.co/img/logo_prosapp.png',
+          height: 52,
+          fit: BoxFit.contain,
+          errorBuilder: (_, __, ___) => const Text(
+            'ProsApp',
+            style: TextStyle(fontSize: 28, fontWeight: FontWeight.bold, color: Color(0xFF42A4EF)),
           ),
-          const SizedBox(height: 40), // Mantiene el espacio entre el logo y el texto
-          FittedBox(
-            fit: BoxFit.contain,
-            child: Text(
-              "Iniciar sesión",
-              style: GoogleFonts.montserratAlternates(
-                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),
+      ],
     );
   }
 }