Update modules/ui/views/landing_view.py

modules/ui/views/landing_view.py

@@ -22,118 +22,134 @@ def get_asset_path(filename, asset_type='img_logo'):
     return str(asset_path)
 
 def create_landing_view():
-    """Crea la vista de landing con header y distribución 25-75"""
+    """Crea la vista de landing con tres columnas y header"""
     # Para el logo
     logo_path = get_asset_path('Logo_300x300.png', 'img_logo')
+    # Para iconos de social media.
+    social_icon_path = get_asset_path('twitter.png', 'img_social-media')
     
     with gr.Blocks(
         css="""
-            /* Variables de color corporativo */
-            :root {
-                --color-primary: rgb(174, 0, 37);    /* Rojo corporativo */
-                --color-secondary: rgb(7, 60, 99);   /* Azul corporativo */
-            }
-
-            /* Estilos del header */
-            #header-logo {
-                text-align: center;
-                padding: 2rem 0;
-                margin-bottom: 2rem;
-            }
-            #header-logo img {
-                max-width: 200px;
-                height: auto;
-            }
-
-            /* Contenedor principal */
-            .container {
-                max-width: 1400px;
-                margin: 0 auto;
-                padding: 0 1rem;
-            }
-
-            /* Estilos de formularios */
-            .gr-form {
-                border: 1px solid #e0e0e0;
-                padding: 20px;
-                border-radius: 8px;
-                background-color: #ffffff;
-                box-shadow: 0 2px 4px rgba(0,0,0,0.1);
-            }
-
-            /* Estilos de botones */
-            .primary-btn {
-                background-color: var(--color-primary) !important;
-                color: white !important;
-            }
-            .secondary-btn {
-                background-color: var(--color-secondary) !important;
-                color: white !important;
-            }
-
-            /* Tabs personalizados */
-            .tabs {
-                border-bottom-color: var(--color-secondary);
-            }
-            .tab-selected {
-                color: var(--color-primary) !important;
-                border-color: var(--color-primary) !important;
-            }
+            #header-logo {text-align: center; padding: 2rem 0;}
+            #header-logo img {max-width: 200px; height: auto;}
+            .container {max-width: 1200px; margin: 0 auto;}
+            .gr-form {border: 1px solid #e0e0e0; padding: 20px; border-radius: 8px;}
         """
     ) as view:
         # Header con logo
         with gr.Column(elem_id="header-logo"):
-            gr.Image(
-                value=logo_path,
-                label=None,
-                show_label=False,
-                container=False,
-                height=200
-            )
+            gr.HTML("""
+                <div>
+                    <img src="/logo.png" alt="AIdeaText Logo"/>
+                </div>
+                <h1 style="margin-top: 1rem;">Bienvenido a AIdeaText</h1>
+            """)
         
         with gr.Row(elem_classes="container"):
-            # Primera columna - Tabs de Login y Registro (25%)
-            with gr.Column(scale=1):  # scale=1 de 4 = 25%
+            # Primera columna - Tabs de Login y Registro (50%)
+            with gr.Column(scale=1):
                 with gr.Tabs() as tabs:
                     # Tab de Login
                     with gr.TabItem("Iniciar Sesión", elem_classes="gr-form"):
-                        with gr.Column():
-                            username = gr.Textbox(
-                                label="Usuario",
-                                placeholder="Ingrese su usuario"
-                            )
-                            password = gr.Textbox(
-                                label="Contraseña",
-                                type="password",
-                                placeholder="Ingrese su contraseña"
-                            )
                             login_button = gr.Button(
                                 "Ingresar",
                                 variant="primary",
-                                elem_classes="primary-btn"
+                                scale=0
                             )
                             login_message = gr.Markdown()
 
-                    # [Tab de Registro igual pero con los nuevos estilos...]
+                    # Tab de Registro
+                    with gr.TabItem("Solicitud de Acceso", elem_classes="gr-form"):
+                        with gr.Column():
+                            name = gr.Textbox(
+                                label="Nombre Completo",
+                                placeholder="Ej: Juan Pérez"
+                            )
+                            email = gr.Textbox(
+                                label="Correo Electrónico",
+                                placeholder="[email protected]"
+                            )
+                            institution = gr.Textbox(
+                                label="Institución",
+                                placeholder="Universidad, Colegio, Empresa, etc."
+                            )
+                            role = gr.Dropdown(
+                                choices=[
+                                    "Estudiante",
+                                    "Profesor",
+                                    "Investigador",
+                                    "Otro"
+                                ],
+                                label="Rol",
+                                value="Estudiante"
+                            )
+                            reason = gr.TextArea(
+                                label="¿Por qué te interesa usar AIdeaText?",
+                                placeholder="Describe brevemente tu interés en la plataforma...",
+                                lines=4
+                            )
+                            register_button = gr.Button(
+                                "Enviar Solicitud",
+                                variant="secondary",
+                                scale=0
+                            )
+                            register_message = gr.Markdown()
+
+                            def handle_registration(name, email, institution, role, reason):
+                                try:
+                                    if not all([name, email, institution, role, reason]):
+                                        return gr.Markdown("❌ Todos los campos son obligatorios")
+                                    
+                                    if "@" not in email or "." not in email:
+                                        return gr.Markdown("❌ El correo electrónico no es válido")
+
+                                    success = store_application_request(
+                                        name=name,
+                                        email=email,
+                                        institution=institution,
+                                        current_role=role,
+                                        desired_role=role,
+                                        reason=reason
+                                    )
 
-            # Segunda columna - Videos (75%)
-            with gr.Column(scale=3):  # scale=3 de 4 = 75%
+                                    if success:
+                                        return gr.Markdown("✅ Solicitud enviada correctamente. Te contactaremos pronto.")
+                                    else:
+                                        return gr.Markdown("❌ Error al enviar la solicitud. Por favor, intenta nuevamente.")
+
+                                except Exception as e:
+                                    return gr.Markdown(f"❌ Error: {str(e)}")
+
+                            register_button.click(
+                                fn=handle_registration,
+                                inputs=[name, email, institution, role, reason],
+                                outputs=register_message
+                            )
+            
+            # Segunda columna - Videos (50%)
+            with gr.Column(scale=1):
                 with gr.Tabs():
                     with gr.TabItem("Introducción"):
-                        # Contenedor para imágenes/videos con mejor estilo
-                        with gr.Box():
-                            gr.Markdown("""
-                            ### ¿Qué es AIdeaText?
-                            AIdeaText es una avanzada aplicación web diseñada para mejorar 
-                            las habilidades de redacción y comprensión lectora a través 
-                            del análisis visual de textos potenciado por distintas tecnologías 
-                            de inteligencia artificial.
-                            """)
-                            # Aquí puedes agregar imágenes o videos con mejor diseño
-
-                    # [Resto de los tabs con el mismo estilo...]
+                        gr.Markdown("""
+                        ### ¿Qué es AIdeaText?
+                        AIdeaText es una avanzada aplicación web diseñada para mejorar las habilidades de redacción 
+                        y comprensión lectora a través del análisis visual de textos potenciado por distintas tecnologías 
+                        de inteligencia artificial.
+                        """)
+                    
+                    with gr.TabItem("Tutorial"):
+                        gr.Markdown("""
+                        ### Cómo usar AIdeaText
+                        Aprende a utilizar todas las funcionalidades de AIdeaText
+                        para mejorar tu escritura académica.
+                        """)
+                        
+                    with gr.TabItem("Ejemplos"):
+                        gr.Markdown("""
+                        ### Ejemplos de Uso
+                        Mira ejemplos prácticos de cómo AIdeaText puede ayudarte
+                        en tus tareas de escritura.
+                        """)
 
     # Mantener la funcionalidad de navegación existente
-    start_button = gr.Button(visible=False)
-    
-    return view, login_button
+    start_button = gr.Button(visible=False)