modules/ui/views/landing_view.py

# 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 header y distribución 25-75"""
    # Para el logo
    logo_path = get_asset_path('Logo_300x300.png', 'img_logo')
    
    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;
            }
        """
    ) 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
            )
        
        with gr.Row(elem_classes="container"):
            # Primera columna - Tabs de Login y Registro (25%)
            with gr.Column(scale=1):  # scale=1 de 4 = 25%
                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"
                            )
                            login_message = gr.Markdown()

                    # [Tab de Registro igual pero con los nuevos estilos...]

            # Segunda columna - Videos (75%)
            with gr.Column(scale=3):  # scale=3 de 4 = 75%
                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...]

    # Mantener la funcionalidad de navegación existente
    start_button = gr.Button(visible=False)
    
    return view, login_button