Create ui.py

modules/ui/ui.py

@@ -0,0 +1,480 @@
+import streamlit as st
+from PIL import Image
+import base64
+from streamlit_player import st_player
+import logging
+
+# Configurar logger
+logging.basicConfig(level=logging.INFO)
+logger = logging.getLogger(__name__)
+
+def show_new_landing(lang_code, landing_t):
+    """
+    Nueva landing page optimizada para conversión
+    """
+    
+    # ============================================
+    # 1. HEADER CON LOGOS Y SELECTOR IDIOMA
+    # ============================================
+    show_header(landing_t)
+    
+    # ============================================
+    # 2. HERO SECTION - HEADLINE IMPACTANTE
+    # ============================================
+    show_hero_section(lang_code)
+    
+    # ============================================
+    # 3. CUADRÍCULA 2x2 PRINCIPAL
+    # ============================================
+    show_main_grid(lang_code, landing_t)
+    
+    # ============================================
+    # 4. CARRUSEL DE EVENTOS (FULL WIDTH)
+    # ============================================
+    show_events_carousel()
+    
+    # ============================================
+    # 5. FOOTER
+    # ============================================
+    show_footer()
+
+# ============================================
+# COMPONENTE 1: HEADER CON LOGOS
+# ============================================
+def show_header(landing_t):
+    """Header con logos y selector de idioma"""
+    
+    # Estilos CSS personalizados
+    st.markdown("""
+    <style>
+    .logo-grid {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        flex-wrap: wrap;
+        gap: 15px;
+        padding: 10px 0;
+        border-bottom: 1px solid #e0e0e0;
+        margin-bottom: 20px;
+    }
+    .logo-item {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+    }
+    .logo-caption {
+        font-size: 0.7em;
+        color: #666;
+        margin-top: 2px;
+        text-align: center;
+    }
+    .language-selector {
+        min-width: 150px;
+    }
+    </style>
+    """, unsafe_allow_html=True)
+    
+    # Header en 5 columnas
+    col1, col2, col3, col4, col5 = st.columns([1.5, 1.5, 2, 2, 1.5])
+    
+    with col1:
+        # Logo AIdeaText
+        st.markdown("""
+        <div class="logo-item">
+            <img src="https://huggingface.co/spaces/AIdeaText/v5Prod/resolve/main/assets/img/AIdeaText_Logo_vectores.png" 
+                 width="80">
+            <div class="logo-caption">AIdeaText</div>
+        </div>
+        """, unsafe_allow_html=True)
+        
+    with col2:
+        # Logo ALPHA
+        st.markdown("""
+        <div class="logo-item">
+            <img src="https://huggingface.co/spaces/AIdeaText/v5Prod/resolve/main/assets/img/ALPHA_Startup%20Badges.png" 
+                 width="80">
+            <div class="logo-caption">ALPHA Startup</div>
+        </div>
+        """, unsafe_allow_html=True)
+    
+    with col3:
+        # Logo NVIDIA
+        st.markdown("""
+        <div class="logo-item">
+            <img src="https://huggingface.co/spaces/AIdeaText/v5Prod/resolve/main/assets/img/socialmedia/nvidia/nvidia-inception-program-badge-rgb-for-screen.png" 
+                 width="180">
+            <div class="logo-caption">NVIDIA Inception Program</div>
+        </div>
+        """, unsafe_allow_html=True)
+    
+    with col4:
+        # Logo F6S
+        st.markdown("""
+        <div class="logo-item">
+            <img src="https://huggingface.co/spaces/AIdeaText/v5Prod/resolve/main/assets/img/socialmedia/F6/F6S_Top_Company_EdTech_27.png" 
+                 width="180">
+            <div class="logo-caption">Top EdTech Company</div>
+        </div>
+        """, unsafe_allow_html=True)
+    
+    with col5:
+        # Selector de idioma
+        languages = {'Español': 'es', 'English': 'en', 'Français': 'fr', 'Português': 'pt'}
+        
+        st.markdown('<div class="language-selector">', unsafe_allow_html=True)
+        selected_lang = st.selectbox(
+            "🌐",
+            list(languages.keys()),
+            index=list(languages.values()).index(st.session_state.get('lang_code', 'es')),
+            label_visibility="collapsed"
+        )
+        st.markdown('</div>', unsafe_allow_html=True)
+        
+        new_lang_code = languages[selected_lang]
+        if st.session_state.get('lang_code', 'es') != new_lang_code:
+            st.session_state.lang_code = new_lang_code
+            st.rerun()
+
+# ============================================
+# COMPONENTE 2: HERO SECTION
+# ============================================
+def show_hero_section(lang_code):
+    """Sección hero con headline impactante"""
+    
+    # Headlines en diferentes idiomas
+    headlines = {
+        'es': {
+            'title': '🚀 Primer sistema de medición de desarrollo cognitivo',
+            'subtitle': 'Basado en procesamiento avanzado del lenguaje natural',
+            'tagline': 'No evaluamos lo que escribes. Visualizamos cómo piensas.'
+        },
+        'en': {
+            'title': '🚀 First cognitive development measurement system',
+            'subtitle': 'Based on advanced natural language processing',
+            'tagline': "We don't evaluate what you write. We visualize how you think."
+        },
+        'fr': {
+            'title': '🚀 Premier système de mesure du développement cognitif',
+            'subtitle': 'Basé sur le traitement avancé du langage naturel',
+            'tagline': "Nous n'évaluons pas ce que vous écrivez. Nous visualisons comment vous pensez."
+        },
+        'pt': {
+            'title': '🚀 Primeiro sistema de medição do desenvolvimento cognitivo',
+            'subtitle': 'Baseado em processamento avançado de linguagem natural',
+            'tagline': 'Não avaliamos o que você escreve. Visualizamos como você pensa.'
+        }
+    }
+    
+    headline = headlines.get(lang_code, headlines['es'])
+    
+    st.markdown(f"""
+    <div style='
+        background: linear-gradient(135deg, #1E3A8A 0%, #3730A3 100%);
+        padding: 40px 20px;
+        border-radius: 15px;
+        color: white;
+        margin: 20px 0 30px 0;
+        text-align: center;
+        box-shadow: 0 10px 30px rgba(30, 58, 138, 0.2);
+    '>
+        <h1 style='
+            font-size: 2.5em;
+            margin-bottom: 15px;
+            font-weight: 800;
+        '>
+            {headline['title']}
+        </h1>
+        
+        <h2 style='
+            font-size: 1.3em;
+            opacity: 0.95;
+            margin-bottom: 20px;
+            font-weight: 400;
+        '>
+            {headline['subtitle']}
+        </h2>
+        
+        <div style='
+            display: inline-block;
+            background: rgba(255, 255, 255, 0.15);
+            padding: 12px 25px;
+            border-radius: 50px;
+            backdrop-filter: blur(10px);
+            border: 1px solid rgba(255, 255, 255, 0.2);
+            margin: 15px 0;
+        '>
+            <strong>✨ {headline['tagline']}</strong>
+        </div>
+        
+        <div style='
+            display: flex;
+            justify-content: center;
+            gap: 20px;
+            margin-top: 30px;
+            flex-wrap: wrap;
+        '>
+            <div style='text-align: center;'>
+                <div style='font-size: 2em;'>🏆</div>
+                <div><strong>Competimos por</strong></div>
+                <div style='font-size: 1.2em;'>$950K USD</div>
+            </div>
+            
+            <div style='text-align: center;'>
+                <div style='font-size: 2em;'>🧠</div>
+                <div><strong>Tecnología</strong></div>
+                <div style='font-size: 1.2em;'>Grafos Semánticos</div>
+            </div>
+            
+            <div style='text-align: center;'>
+                <div style='font-size: 2em;'>🚀</div>
+                <div><strong>Validado por</strong></div>
+                <div style='font-size: 1.2em;'>NVIDIA</div>
+            </div>
+        </div>
+    </div>
+    """, unsafe_allow_html=True)
+
+# ============================================
+# COMPONENTE 3: CUADRÍCULA 2x2 PRINCIPAL
+# ============================================
+def show_main_grid(lang_code, landing_t):
+    """Cuadrícula principal 2x2"""
+    
+    # Contenedor principal
+    st.markdown("<div style='margin: 30px 0;'>", unsafe_allow_html=True)
+    
+    # FILA 1: Formulario + Competencias
+    col_form, col_comp = st.columns([1, 1])
+    
+    with col_form:
+        # CARD 1: FORMULARIO
+        with st.container(border=True, height=350):
+            st.markdown("### ✨ Accede Gratis")
+            
+            # Tabs para login/registro
+            tab1, tab2 = st.tabs(["📝 Registrarse", "🔐 Iniciar Sesión"])
+            
+            with tab1:
+                show_register_form(landing_t)
+            
+            with tab2:
+                show_login_form(landing_t)
+    
+    with col_comp:
+        # CARD 2: COMPETENCIAS
+        with st.container(border=True, height=350):
+            st.markdown("### 🏆 Competimos por $950K USD")
+            
+            # Lista de competencias
+            competitions = [
+                {"name": "Learning Tools Competition", "amount": "$600K", "status": "✅ Fase II"},
+                {"name": "NVIDIA Inception", "amount": "$250K", "status": "💰 Capital Ventures"},
+                {"name": "Kaggle/Google", "amount": "$100K", "status": "🤖 Modelos Explicables"},
+            ]
+            
+            for comp in competitions:
+                with st.expander(f"{comp['name']} - {comp['amount']}"):
+                    st.markdown(f"""
+                    **Estado:** {comp['status']}
+                    
+                    *¿Quieres probar la tecnología que compite?*
+                    """)
+                    
+            if st.button("🎯 Ser Beta Tester", use_container_width=True):
+                st.session_state.show_beta_form = True
+                st.rerun()
+    
+    # FILA 2: Video + Alianzas
+    col_video, col_alliances = st.columns([1, 1])
+    
+    with col_video:
+        # CARD 3: VIDEO PRINCIPAL
+        with st.container(border=True, height=350):
+            st.markdown("### 🎬 Demo en 30 Segundos")
+            
+            # Player de video
+            try:
+                st_player(
+                    "https://youtu.be/hXnwUvN1Q9Q",
+                    height=200,
+                    playing=False,
+                    controls=True,
+                    light=True
+                )
+            except:
+                st.image("https://via.placeholder.com/400x200?text=Demo+Video", use_column_width=True)
+            
+            st.markdown("""
+            ---
+            **¿Qué verás?**
+            • Visualización de Grafos de Razonamiento
+            • Análisis en tiempo real
+            • Progreso cognitivo mapeado
+            """)
+    
+    with col_alliances:
+        # CARD 4: ALIANZAS
+        with st.container(border=True, height=350):
+            st.markdown("### 🤝 Validado por Líderes")
+            
+            # Grid de logos de aliados
+            cols = st.columns(4)
+            with cols[0]:
+                st.image("https://huggingface.co/spaces/AIdeaText/v5Prod/resolve/main/assets/img/socialmedia/nvidia/nvidia-inception-program-badge-rgb-for-screen.png", 
+                        width=70)
+                st.caption("NVIDIA")
+            
+            with cols[1]:
+                st.image("https://huggingface.co/spaces/AIdeaText/v5Prod/resolve/main/assets/img/ALPHA_Startup%20Badges.png",
+                        width=70)
+                st.caption("ALPHA")
+            
+            with cols[2]:
+                st.image("https://huggingface.co/spaces/AIdeaText/v5Prod/resolve/main/assets/img/socialmedia/F6/F6S_Top_Company_EdTech_27.png",
+                        width=70)
+                st.caption("F6S")
+            
+            with cols[3]:
+                st.image("https://via.placeholder.com/70x70/4F46E5/FFFFFF?text=incMTY",
+                        width=70)
+                st.caption("incMTY")
+            
+            st.markdown("""
+            ---
+            **Alianzas Estratégicas:**
+            • NVIDIA Inception: Deep Tech
+            • ALPHA Startup: Validación mercado  
+            • F6S: Top 27 EdTech global
+            • incMTY: Aceleración México
+            """)
+
+# ============================================
+# COMPONENTES DE FORMULARIOS
+# ============================================
+def show_register_form(landing_t):
+    """Formulario de registro simplificado"""
+    
+    email = st.text_input("📧 Correo institucional", key="reg_email_new")
+    nombre = st.text_input("👤 Nombre completo", key="reg_name_new")
+    
+    # Botón de registro
+    if st.button("🚀 Obtener Acceso Gratis", type="primary", use_container_width=True):
+        if email and nombre:
+            # Aquí iría la lógica de registro
+            st.success("¡Pronto recibirás acceso a la beta!")
+        else:
+            st.warning("Por favor completa todos los campos")
+    
+    # Info adicional
+    st.markdown("""
+    <div style='font-size: 0.8em; color: #666; margin-top: 10px;'>
+    ✅ 30 días gratis<br>
+    ✅ Sin tarjeta de crédito<br>
+    ✅ Acceso inmediato a beta
+    </div>
+    """, unsafe_allow_html=True)
+
+def show_login_form(landing_t):
+    """Formulario de login"""
+    
+    username = st.text_input("👤 Usuario/Email", key="login_user_new")
+    password = st.text_input("🔒 Contraseña", type="password", key="login_pass_new")
+    
+    if st.button("Ingresar", use_container_width=True):
+        # Aquí iría la lógica de login
+        st.info("Función de login en desarrollo")
+
+# ============================================
+# COMPONENTE 4: CARRUSEL DE EVENTOS
+# ============================================
+def show_events_carousel():
+    """Carrusel de eventos en full width"""
+    
+    st.markdown("---")
+    st.markdown("### 📅 Eventos y Reconocimientos")
+    
+    # Usar el carrusel existente o crear uno simplificado
+    try:
+        # Importar el carrusel existente
+        from .ui import show_carousel
+        show_carousel()
+    except:
+        # Carrusel simplificado de respaldo
+        eventos = [
+            {"titulo": "WebSummit Rio 2025", "lugar": "Rio de Janeiro, Brasil", "fecha": "Abril 2025"},
+            {"titulo": "PyCon 2024", "lugar": "Medellín, Colombia", "fecha": "Junio 2024"},
+            {"titulo": "Maker Faire 2024", "lugar": "Ciudad de México", "fecha": "Octubre 2024"},
+        ]
+        
+        cols = st.columns(3)
+        for idx, evento in enumerate(eventos):
+            with cols[idx]:
+                with st.container(border=True):
+                    st.markdown(f"#### {evento['titulo']}")
+                    st.markdown(f"📍 **{evento['lugar']}**")
+                    st.markdown(f"📅 {evento['fecha']}")
+                    st.markdown("*Presentación y showcase*")
+
+# ============================================
+# COMPONENTE 5: FOOTER
+# ============================================
+def show_footer():
+    """Footer de la página"""
+    
+    st.markdown("---")
+    
+    col1, col2, col3 = st.columns(3)
+    
+    with col1:
+        st.markdown("""
+        **📧 Contacto**
+        
+        contacto@aideatext.ai
+        +51 123 456 789
+        """)
+    
+    with col2:
+        st.markdown("""
+        **🔗 Enlaces**
+        
+        [GitHub](https://github.com/AIdeaText)  
+        [LinkedIn](https://linkedin.com/company/aideatext)
+        [Twitter](https://twitter.com/AIdeaText)
+        """)
+    
+    with col3:
+        st.markdown("""
+        **⚖️ Legal**
+        
+        © 2025 AIdeaText. Todos los derechos reservados.
+        
+        NVIDIA y el logo de NVIDIA son marcas registradas de NVIDIA Corporation.
+        """)
+    
+    st.markdown("---")
+    st.markdown("<div style='text-align: center; color: #666; font-size: 0.8em;'>🚀 Transformando cómo el mundo mide el pensamiento</div>", 
+                unsafe_allow_html=True)
+
+# ============================================
+# FUNCIÓN PRINCIPAL PARA REEMPLAZAR LA ACTUAL
+# ============================================
+def main_new_landing():
+    """Función principal de la nueva landing page"""
+    
+    # Inicializar estado si no existe
+    if 'lang_code' not in st.session_state:
+        st.session_state.lang_code = 'es'
+    
+    # Obtener traducciones (usar el sistema existente)
+    from translations import get_landing_translations
+    landing_t = get_landing_translations(st.session_state.lang_code)
+    
+    # Mostrar la nueva landing
+    show_new_landing(st.session_state.lang_code, landing_t)
+
+# Exportar la función principal
+__all__ = ['main_new_landing', 'show_new_landing']
+
+if __name__ == "__main__":
+    main_new_landing()