Content Genius - Copy this React, Tailwind Component to your project
"Crea el frontend de una aplicación web llamada ContentGenius, que permite a los usuarios generar contenido para redes sociales (LinkedIn y X) con ayuda de la IA, programar publicaciones y gestionar su historial. Diseño: Estilo profesional pero llamativo, que capture la atención del usuario. Diseño minimalista y moderno, con una paleta de colores que transmita confianza y profesionalismo (puedes usar tonos de azul, gris y blanco, con un color de acento como el verde o el naranja). Tipografía limpia y legible, que se adapte bien a la web (por ejemplo, Poppins u Open Sans). Uso de elementos visuales que comuniquen la idea de la aplicación, como iconos relacionados con las redes sociales, la inteligencia artificial y la programación. Interfaz intuitiva y fácil de usar, que guíe al usuario a través de las diferentes funcionalidades. Funcionalidades: Página principal: Navbar con el logo de ContentGenius, botones para "Registrarse" e "Iniciar sesión" y un enlace al logo que redirija a la página principal. HeroSection con un título principal, un subtítulo y un botón "Empezar ahora" que lleve a la sección de registro/inicio de sesión. Sección de características con descripciones de las funcionalidades principales. Sección de beneficios. Página de registro/inicio de sesión: Formularios de registro e inicio de sesión con campos para nombre de usuario, correo electrónico y contraseña. Enlaces para cambiar entre registro e inicio de sesión. Dashboard (página principal del usuario): Navbar con la opción de "Cerrar sesión". Pestañas para "LinkedIn" y "X (Twitter)". Dentro de cada pestaña: CrearPublicacionForm para crear nuevas publicaciones, con campos para la red social, el contenido, la fecha de programación y el prompt para la IA. PostPreview que muestre la previsualización de la próxima publicación con un temporizador, y botones para "Editar", "Cancelar" y "Publicar ahora". PostHistory que muestre el historial de publicaciones con la opción de limpiar el historial. Settings con opciones para configurar las cuentas de redes sociales y personalizar el prompt de la IA. Código: Usa React como framework para el frontend. Implementa la navegación entre páginas con react router dom. Usa Material UI para los componentes de la interfaz de usuario. Asegúrate de que el código sea limpio, legible y bien organizado. Consideraciones: El backend de la aplicación ya está desarrollado con Node.js y Express.js, y usa MongoDB como base de datos. La autenticación se maneja con tokens JWT. El frontend debe enviar peticiones al backend para obtener y guardar datos, y para autenticar al usuario.
