Update modules/ui/views/landing_view.py

modules/ui/views/landing_view.py

@@ -1,99 +1,145 @@
 # modules/ui/views/landing_view.py
 import gradio as gr
+import os
+from pathlib import Path
 from ...database.sql_db import store_application_request
 from datetime import datetime
 import uuid
 
+def get_asset_path(filename, asset_type='img_logo'):
+    """
+    Obtiene la ruta completa de un asset
+    
+    Args:
+        filename (str): Nombre del archivo
+        asset_type (str): Tipo de asset ('img_logo', 'img_social-media', etc.)
+    
+    Returns:
+        str: Ruta completa al asset
+    """
+    current_dir = Path(__file__).parent.parent  # sube a /modules/ui
+    asset_path = current_dir / 'assets' / asset_type / filename
+    return str(asset_path)
+
 def create_landing_view():
-    """Crea la vista de landing con tres columnas"""
-    with gr.Blocks() as view:
-        gr.Markdown("# Bienvenido a AIdeaText")
+    """Crea la vista de landing con tres columnas y header"""
+    # Para el logo
+    logo_path = get_asset_path('logo.png', 'img_logo')
+    # Para iconos de social media.
+    social_icon_path = get_asset_path('twitter.png', 'img_social-media')
+    
+    with gr.Blocks(
+        css="""
+            #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=100
+            )
+            gr.Markdown("# Bienvenido a AIdeaText")
         
-        with gr.Row():
-            # Primera columna - Login (25%)
+        with gr.Row(elem_classes="container"):
+            # Primera columna - Tabs de Login y Registro (50%)
             with gr.Column(scale=1):
-                gr.Markdown("### Iniciar Sesión")
-                username = gr.Textbox(label="Usuario")
-                password = gr.Textbox(label="Contraseña", type="password")
-                login_button = gr.Button("Ingresar", variant="primary")
-                login_message = gr.Markdown()
-            
-            # Segunda columna - Registro (25%)
-            with gr.Column(scale=1):
-                gr.Markdown("### Solicitud de Acceso")
-                
-                # Campos del formulario
-                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"
-                )
-                register_message = gr.Markdown()
+                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",
+                                scale=0
+                            )
+                            login_message = gr.Markdown()
 
-                def handle_registration(name, email, institution, role, reason):
-                    try:
-                        # Validaciones básicas
-                        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")
+                    # 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()
 
-                        # Crear y almacenar la solicitud
-                        success = store_application_request(
-                            name=name,
-                            email=email,
-                            institution=institution,
-                            current_role=role,  # Campo en la base de datos
-                            desired_role=role,   # Campo en la base de datos
-                            reason=reason
-                        )
+                            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")
 
-                        if success:
-                            return gr.Markdown("✅ Solicitud enviada correctamente. Te contactaremos pronto.")
-                        else:
-                            return gr.Markdown("❌ Error al enviar la solicitud. Por favor, intenta nuevamente.")
+                                    success = store_application_request(
+                                        name=name,
+                                        email=email,
+                                        institution=institution,
+                                        current_role=role,
+                                        desired_role=role,
+                                        reason=reason
+                                    )
 
-                    except Exception as e:
-                        return gr.Markdown(f"❌ Error: {str(e)}")
+                                    if success:
+                                        return gr.Markdown("✅ Solicitud enviada correctamente. Te contactaremos pronto.")
+                                    else:
+                                        return gr.Markdown("❌ Error al enviar la solicitud. Por favor, intenta nuevamente.")
 
-                # Conectar el evento del botón
-                register_button.click(
-                    fn=handle_registration,
-                    inputs=[name, email, institution, role, reason],
-                    outputs=register_message
-                )
+                                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
+                            )
             
-            # Tercera columna - Videos (50%)
-            with gr.Column(scale=2):
-                gr.Markdown("### Videos Tutoriales")
+            # Segunda columna - Videos (50%)
+            with gr.Column(scale=1):
                 with gr.Tabs():
                     with gr.TabItem("Introducción"):
                         gr.Markdown("""