Update modules/ui/views/landing_view.py

modules/ui/views/landing_view.py

@@ -22,70 +22,21 @@ def get_asset_path(filename, asset_type='img_logo'):
     asset_path = current_dir / 'assets' / asset_type / filename
     return str(asset_path)
 
-    custom_css = """
-        /* Variables de color corporativo */
-        :root {
-            --color-primary: rgb(174, 0, 37);    /* Rojo corporativo */
-            --color-secondary: rgb(7, 60, 99);   /* Azul corporativo */
-            --color-background: #ffffff;
-            --color-border: #e0e0e0;
-        }
-        
-        /* Sobreescribir los estilos por defecto de Gradio */
-        .dark button.primary-btn,
-        button.primary-btn {
-            background-color: var(--color-primary) !important;
-            border-color: var(--color-primary) !important;
-            color: white !important;
-        }
-        
-        .dark button.secondary-btn,
-        button.secondary-btn {
-            background-color: var(--color-secondary) !important;
-            border-color: var(--color-secondary) !important;
-            color: white !important;
-        }
-    
-        /* Sobreescribir los estilos de los tabs */
-        .tabs.svelte-1g805jl .tabitem.svelte-1g805jl.selected {
-            color: var(--color-primary) !important;
-            border-color: var(--color-primary) !important;
-        }
-    
-        .tabs.svelte-1g805jl {
-            border-bottom-color: var(--color-secondary) !important;
-        }
-    
-        /* Asegurar que los botones mantengan los colores al hacer hover */
-        .dark button.primary-btn:hover,
-        button.primary-btn:hover {
-            background-color: rgb(144, 0, 27) !important;  /* Versión más oscura del rojo */
-            border-color: rgb(144, 0, 27) !important;
-        }
-    
-        .dark button.secondary-btn:hover,
-        button.secondary-btn:hover {
-            background-color: rgb(5, 40, 79) !important;  /* Versión más oscura del azul */
-            border-color: rgb(5, 40, 79) !important;
-        }
-    """
-    
-    # En los botones, asegúrate de que las clases se apliquen correctamente
-    login_button = gr.Button(
-        "Ingresar",
-        elem_classes="primary-btn",
-        variant="primary"
-    )
-    
-    register_button = gr.Button(
-        "Enviar Solicitud",
-        elem_classes="secondary-btn",
-        variant="secondary"
-    )
+def create_landing_view():
+    """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=custom_css) as view:
-        # El resto del código permanece igual pero con algunas modificaciones en las clases
-        
+    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(
@@ -95,9 +46,10 @@ def get_asset_path(filename, asset_type='img_logo'):
                 container=False,
                 height=200
             )
+            #gr.Markdown("# Bienvenido a AIdeaText")
         
         with gr.Row(elem_classes="container"):
-            # Primera columna (25%)
+            # Primera columna - Tabs de Login y Registro (50%)
             with gr.Column(scale=1):
                 with gr.Tabs() as tabs:
                     # Tab de Login
@@ -115,11 +67,11 @@ def get_asset_path(filename, asset_type='img_logo'):
                             login_button = gr.Button(
                                 "Ingresar",
                                 variant="primary",
-                                elem_classes="primary-btn"
+                                scale=0
                             )
                             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(
@@ -187,36 +139,30 @@ def get_asset_path(filename, asset_type='img_logo'):
                                 outputs=register_message
                             )
             
-            # Segunda columna (75%)
-            with gr.Column(scale=3):
-                with gr.Tabs(elem_classes="content-tabs"):
+            # Segunda columna - Videos (50%)
+            with gr.Column(scale=1):
+                with gr.Tabs():
                     with gr.TabItem("Introducción"):
-                        # Reemplazar gr.Box con gr.Column
-                        with gr.Column(elem_classes="media-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
+                        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"):
-                        with gr.Column(elem_classes="media-box"):
-                            gr.Markdown("""
-                            ### Cómo usar AIdeaText
-                            Aprende a utilizar todas las funcionalidades de AIdeaText
-                            para mejorar tu escritura académica.
-                            """)
+                        gr.Markdown("""
+                        ### Cómo usar AIdeaText
+                        Aprende a utilizar todas las funcionalidades de AIdeaText
+                        para mejorar tu escritura académica.
+                        """)
                         
                     with gr.TabItem("Ejemplos"):
-                        with gr.Column(elem_classes="media-box"):
-                            gr.Markdown("""
-                            ### Ejemplos de Uso
-                            Mira ejemplos prácticos de cómo AIdeaText puede ayudarte
-                            en tus tareas de escritura.
-                            """)
+                        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)