Upload 10 files

app.py

@@ -366,3 +366,34 @@ if prompt := st.chat_input('Describe tu producto/servicio y audiencia objetivo..
         st.session_state.gemini_history,
         f'data/{st.session_state.chat_id}-gemini_messages',
     )
+# Título y subtítulo más compactos
+st.markdown("""
+    <div style='text-align: center; padding: 1rem 0;'>
+        <h1 style='font-size: 24px; margin-bottom: 0.5rem;'>💎 RoboCopy PUV Creator</h1>
+        <p style='font-size: 16px; color: #666;'>By aimoneyget.com</p>
+        <p style='font-size: 14px; background-color: #f0f2f6; padding: 8px; border-radius: 5px; margin-top: 10px;'>
+            🎯 Experto en crear Propuestas de Valor Únicas que convierten audiencia en clientes
+        </p>
+    </div>
+""", unsafe_allow_html=True)
+
+# Contenedor para los ejemplos en forma de botones
+st.markdown("""
+<div style='display: flex; gap: 10px; flex-wrap: wrap; margin: 20px 0;'>
+""", unsafe_allow_html=True)
+
+# Ejemplos clickeables relacionados con PUVs
+ejemplos = [
+    {"texto": "¿Cuál es la mejor fórmula para mi PUV? 🤔", "prompt": "Ayúdame a elegir la mejor fórmula para mi Propuesta de Valor Única"},
+    {"texto": "¿Cómo hacer mi PUV más impactante? 💫", "prompt": "Dame consejos para hacer mi Propuesta de Valor más persuasiva y memorable"},
+    {"texto": "Necesito una PUV para mi servicio...", "prompt": "Ayúdame a crear una Propuesta de Valor para mi servicio de coaching"},
+    {"texto": "¿Ejemplos de PUVs efectivas? 🎯", "prompt": "Muéstrame ejemplos de Propuestas de Valor exitosas en mi industria"}
+]
+
+# Crear los botones de ejemplo
+cols = st.columns(4)
+for idx, ejemplo in enumerate(ejemplos):
+    with cols[idx]:
+        if st.button(ejemplo["texto"], key=f"ejemplo_{idx}", help=ejemplo["prompt"]):
+            st.session_state.prompt = ejemplo["prompt"]
+            st.experimental_rerun()

static/css/style.css

@@ -3,4 +3,46 @@
     color: #4ECDC4 !important;  /* Color turquesa con !important para forzar el estilo */
     font-weight: bold;
     font-size: 2em;  /* Tamaño más grande para destacar */
+}
+
+/* Estilos para los botones de ejemplo */
+.stButton > button {
+    width: 100%;
+    min-height: 80px;
+    white-space: normal;
+    padding: 10px;
+    background-color: #f8f9fa;
+    border: 1px solid #dee2e6;
+    border-radius: 8px;
+    font-size: 14px;
+    color: #495057;
+    text-align: left;
+    margin: 5px 0;
+    transition: all 0.3s ease;
+}
+
+.stButton > button:hover {
+    background-color: #e9ecef;
+    border-color: #4ECDC4;
+    transform: translateY(-2px);
+    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
+}
+
+/* Ajustes para el contenedor principal */
+.main .block-container {
+    padding-top: 2rem;
+    max-width: 1000px;
+}
+
+/* Estilos para títulos más compactos */
+h1 {
+    font-size: 24px !important;
+    margin-bottom: 0.5rem !important;
+    color: #2C3E50;
+}
+
+.subtitle {
+    font-size: 16px;
+    color: #666;
+    margin-bottom: 1rem;
 }