prompts.txt

Prompt para Generación de WebApp Full-Stack "Human Core" A - Action (Acción): Generar el código completo para una aplicación web full-stack, responsiva y moderna que sirva como sitio web informativo y de contacto para una consultora basada en la metodología "Human Core (Revisada)". S - Steps (Pasos):  * Diseño de Arquitectura: Estructurar la aplicación en secciones claras: Inicio (presentación), Nuestra Metodología (detalles de Human Core Revisada, incluyendo DEH y HCAI), Servicios (descripción detallada de cada oferta), Contacto.  * Desarrollo Frontend (React):    * Crear componentes reutilizables para secciones, tarjetas de servicio, formulario de contacto, etc.    * Implementar un diseño limpio, profesional, cálido y centrado en el humano, utilizando Tailwind CSS para todo el estilizado.    * Asegurar la responsividad completa (mobile-first approach).    * Utilizar lucide-react para iconos apropiados.    * Usar el hook useState para manejar el estado del formulario de contacto.    * Implementar navegación simple entre secciones (simulada con estado o componentes condicionales, sin react-router-dom).  * Desarrollo Backend (Simulado/Básico):    * Para este prompt, simular la lógica del backend para el formulario de contacto. En un entorno real, se necesitaría un servidor (Node.js, Python, etc.) y una base de datos o servicio de email. Dentro del código React, simular el envío del formulario mostrando un mensaje de éxito/error.  * Integración y Contenido:    * Poblar cada sección con el contenido relevante de la metodología "Human Core (Revisada)" proporcionada anteriormente (principios, fases, enfoque en coaching, DEH, HCAI).    * Detallar claramente cada uno de los servicios ofrecidos en la sección correspondiente.    * Incluir un formulario de contacto funcional (Nombre, Email, Mensaje) en la sección de Contacto, con manejo básico de estado y validación simple en el frontend.    * Añadir un pie de página simple con información de copyright y quizás enlaces a redes sociales (placeholders).  * Calidad del Código:    * Escribir código limpio, bien comentado (en inglés para el código, español para el contenido visible si es necesario) y siguiendo las mejores prácticas de React y Tailwind.    * Asegurar que la aplicación sea autocontenida y ejecutable. P - Person (Rol Experto): Actúa como un Desarrollador Full-Stack Senior con experiencia específica en:  * React y ecosistema moderno (Hooks, Functional Components).  * Tailwind CSS y diseño responsivo avanzado.  * UX/UI con enfoque en diseño centrado en el humano, accesible y estéticamente agradable.  * Comprensión de filosofías de coaching y metodologías de desarrollo humano (como DEH).  * Principios de desarrollo de IA ética y responsable (HCAI).  * Creación de aplicaciones web informativas para consultorías o servicios profesionales. E - Examples (Ejemplos):  * Diseño: Paleta de colores cálida pero profesional (ej. tonos tierra suaves, azules apagados, naranjas quemados como acento), tipografía legible y moderna (ej. Inter), uso generoso de espacio en blanco, imágenes o gráficos abstractos/humanos que evoquen conexión y reflexión. Evitar estética corporativa fría o excesivamente tecnológica.  * Componente de Servicio: Una tarjeta con icono, título del servicio (ej. "Coaching Sistémico Organizacional"), breve descripción y quizás un botón "Saber Más" (que podría llevar a una sección detallada o simplemente estar ahí por diseño).  * Sección Metodología: Usar títulos claros, párrafos concisos, listas para los principios/fases. Considerar un diagrama simple (representado con HTML/CSS/SVG si es posible) para ilustrar las fases o la matriz DEH.  * Formulario de Contacto: Campos claros, etiquetas visibles, botón de envío distintivo, mensajes de feedback claros (ej. "Mensaje enviado con éxito", "Por favor, completa todos los campos"). C - Context (Contexto): El objetivo es crear el sitio web principal para una consultora innovadora que aplica la metodología "Human Core (Revisada)". El sitio debe comunicar eficazmente la profundidad y el enfoque único de esta metodología (radicalmente humana, integrando coaching, DEH, HCAI) y sus servicios asociados. Debe atraer a clientes potenciales (individuos, líderes, organizaciones, comunidades) que buscan un enfoque transformador y ético. La web es la principal carta de presentación digital. C - Constraints (Restricciones):  * Tecnología: React (Functional Components, Hooks), Tailwind CSS. Sin librerías de enrutamiento externas (react-router-dom). Simular navegación con estado local.  * Full-Stack: Simular el backend del formulario de contacto en el frontend (mostrar mensaje de éxito/error).  * Responsividad: Obligatoria y fluida en todos los dispositivos (móvil, tablet, desktop).  * Contenido: Utilizar la información de la metodología "Human Core (Revisada)" previamente definida. El texto visible debe estar en español.  * Estilo: Adherirse estrictamente a Tailwind CSS para estilos. Sin CSS externo o inline styles (excepto donde sea absolutamente inevitable).  * Código: Completo, autocontenido en un solo bloque, bien comentado (comentarios en inglés). Exportar App como default.  * NO usar ReactDOM.render().  * NO usar placeholders genéricos como ... en el código. T - Template (Plantilla de Salida Esperada): Un único bloque de código React (.jsx o .tsx) que contenga todos los componentes necesarios (App, Header, Footer, Home, Methodology, Services, Contact, ServiceCard, etc.) y estilos definidos con Tailwind CSS. El componente principal App debe gestionar la navegación/visualización de las diferentes secciones. // Plantilla básica esperada (solo estructura, no contenido completo) import React, { useState } from 'react'; // Importar iconos de lucide-react  // Componente para Tarjeta de Servicio const ServiceCard = ({ icon, title, description }) => {   // JSX con Tailwind };  // Componente para Sección de Inicio const HomeSection = () => {   // JSX con Tailwind };  // Componente para Sección de Metodología const MethodologySection = () => {   // JSX con Tailwind, explicando Human Core Revisada, DEH, HCAI };  // Componente para Sección de Servicios const ServicesSection = () => {   // JSX con Tailwind, usando ServiceCard   const services = [     // ... lista de servicios detallados   ];   return (     // ... mapeo de servicios a ServiceCard   ); };  // Componente para Sección de Contacto const ContactSection = () => {   const [formData, setFormData] = useState({ name: '', email: '', message: '' });   const [formStatus, setFormStatus] = useState(''); // '', 'sending', 'success', 'error'    const handleChange = (e) => { /* ... */ };   const handleSubmit = (e) => {     e.preventDefault();     setFormStatus('sending');     // Simulación de envío     setTimeout(() => {       // Lógica simple de éxito/error simulada       if (formData.name && formData.email && formData.message) {         setFormStatus('success');         setFormData({ name: '', email: '', message: '' }); // Reset form       } else {         setFormStatus('error');       }     }, 1500);   };    return (     // JSX con Tailwind para el formulario y mensajes de estado   ); };  // Componente Principal const App = () => {   const [currentPage, setCurrentPage] = useState('home'); // 'home', 'methodology', 'services', 'contact'    const renderPage = () => {     switch (currentPage) {       case 'methodology': return <MethodologySection />;       case 'services': return <ServicesSection />;       case 'contact': return <ContactSection />;       case 'home':       default: return <HomeSection />;     }   };    return (     <div className="min-h-screen flex flex-col font-sans bg-gray-50 text-gray-800">       {/* Header/Navbar con Tailwind */}       <header className="...">         <nav>           {/* Botones para cambiar currentPage */}         </nav>       </header>        {/* Contenido Principal */}       <main className="flex-grow container mx-auto px-4 py-8">         {renderPage()}       </main>        {/* Footer con Tailwind */}       <footer className="...">         {/* Copyright, etc. */}       </footer>     </div>   ); };  export default App;   Este prompt detalla todos los requisitos para que una IA genere el código de la aplicación web que necesitas, siguiendo la estructura ASPECCT.
quita la palabra revisada y cambia el icono en la cabecera por otro mejorado