Update modules/ui/views/landing_view.py

modules/ui/views/landing_view.py

@@ -27,61 +27,107 @@ def create_landing_view():
     # 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:
+    # Definir los estilos como una cadena separada para mejor manejo
+    custom_css = """
+        /* Reset y variables */
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+        }
+        
+        /* Variables de color corporativo */
+        :root {
+            --color-primary: rgb(174, 0, 37);
+            --color-secondary: rgb(7, 60, 99);
+            --color-background: #ffffff;
+            --color-border: #e0e0e0;
+        }
+        
+        /* Layout principal */
+        #header-logo {
+            text-align: center;
+            padding: 2rem 0;
+            margin-bottom: 2rem;
+            background-color: var(--color-background);
+        }
+        
+        #header-logo img {
+            max-width: 200px;
+            height: auto;
+            display: block;
+            margin: 0 auto;
+        }
+        
+        .container {
+            max-width: 1400px;
+            margin: 0 auto;
+            padding: 0 2rem;
+        }
+        
+        /* Formularios */
+        .gr-form {
+            border: 1px solid var(--color-border);
+            padding: 1.5rem;
+            border-radius: 8px;
+            background-color: var(--color-background);
+            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
+            margin-bottom: 1rem;
+        }
+        
+        /* Botones */
+        .primary-btn {
+            background-color: var(--color-primary) !important;
+            color: white !important;
+            border: none !important;
+            padding: 0.5rem 1rem !important;
+            border-radius: 4px !important;
+            cursor: pointer !important;
+            transition: opacity 0.3s ease !important;
+        }
+        
+        .primary-btn:hover {
+            opacity: 0.9 !important;
+        }
+        
+        .secondary-btn {
+            background-color: var(--color-secondary) !important;
+            color: white !important;
+            border: none !important;
+            padding: 0.5rem 1rem !important;
+            border-radius: 4px !important;
+            cursor: pointer !important;
+            transition: opacity 0.3s ease !important;
+        }
+        
+        .secondary-btn:hover {
+            opacity: 0.9 !important;
+        }
+        
+        /* Tabs */
+        .tabs {
+            border-bottom: 2px solid var(--color-secondary) !important;
+            margin-bottom: 1rem !important;
+        }
+        
+        .tab-selected {
+            color: var(--color-primary) !important;
+            border-bottom: 2px solid var(--color-primary) !important;
+            font-weight: bold !important;
+        }
+        
+        /* Contenido multimedia */
+        .media-box {
+            padding: 1.5rem;
+            background-color: var(--color-background);
+            border-radius: 8px;
+            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
+        }
+    """
+    
+    with gr.Blocks(css=custom_css) as view:
+        # El resto del código permanece igual pero con algunas modificaciones en las clases
+        
         # Header con logo
         with gr.Column(elem_id="header-logo"):
             gr.Image(
@@ -93,8 +139,8 @@ def create_landing_view():
             )
         
         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 (25%)
+            with gr.Column(scale=1):
                 with gr.Tabs() as tabs:
                     # Tab de Login
                     with gr.TabItem("Iniciar Sesión", elem_classes="gr-form"):
@@ -183,12 +229,11 @@ def create_landing_view():
                                 outputs=register_message
                             )
             
-            # Segunda columna - Videos (75%)
-            with gr.Column(scale=3):  # scale=3 de 4 = 75%
-                with gr.Tabs():
+            # Segunda columna (75%)
+            with gr.Column(scale=3):
+                with gr.Tabs(elem_classes="content-tabs"):
                     with gr.TabItem("Introducción"):
-                        # Contenedor para imágenes/videos con mejor estilo
-                        with gr.Box():
+                        with gr.Box(elem_classes="media-box"):
                             gr.Markdown("""
                             ### ¿Qué es AIdeaText?
                             AIdeaText es una avanzada aplicación web diseñada para mejorar