Update modules/ui/views/landing_view.py

modules/ui/views/landing_view.py

@@ -23,18 +23,63 @@ def get_asset_path(filename, asset_type='img_logo'):
     return str(asset_path)
 
 def create_landing_view():
-    """Crea la vista de landing con tres columnas y header"""
+    """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')
-    # 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;}
+            /* 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
@@ -46,11 +91,10 @@ def create_landing_view():
                 container=False,
                 height=200
             )
-            #gr.Markdown("# Bienvenido a AIdeaText")
         
         with gr.Row(elem_classes="container"):
-            # Primera columna - Tabs de Login y Registro (50%)
-            with gr.Column(scale=1):
+            # 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"):
@@ -67,11 +111,11 @@ def create_landing_view():
                             login_button = gr.Button(
                                 "Ingresar",
                                 variant="primary",
-                                scale=0
+                                elem_classes="primary-btn"
                             )
                             login_message = gr.Markdown()
 
-                    # Tab de Registro
+                    # Tab de Registro #####################################################################
                     with gr.TabItem("Solicitud de Acceso", elem_classes="gr-form"):
                         with gr.Column():
                             name = gr.Textbox(
@@ -139,16 +183,20 @@ def create_landing_view():
                                 outputs=register_message
                             )
             
-            # Segunda columna - Videos (50%)
-            with gr.Column(scale=1):
+            # Segunda columna - Videos (75%)
+            with gr.Column(scale=3):  # scale=3 de 4 = 75%
                 with gr.Tabs():
                     with gr.TabItem("Introducción"):
-                        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.
-                        """)
+                        # 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ñ
                     
                     with gr.TabItem("Tutorial"):
                         gr.Markdown("""