Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
Esta aplicación es una interfaz web interactiva que permite a los usuarios cambiar entre un modo claro y oscuro de forma sencilla. La funcionalidad principal incluye un botón en el menú que, al ser presionado, alterna entre los dos modos de visualización, asegurando que el logo también cambie de color para complementar el tema seleccionado. El modo predeterminado de la aplicación será el tema claro.

## CORE FEATURES
1. **Cambio de Modo**: Un botón en el menú que permite a los usuarios alternar entre el modo claro y oscuro, con un cambio visual inmediato en la interfaz.
2. **Logo Dinámico**: El logo de la aplicación cambiará entre un diseño oscuro y uno claro dependiendo del modo seleccionado, asegurando la coherencia visual.
3. **Diseño Responsivo**: La interfaz se adaptará a diferentes tamaños de pantalla, proporcionando una experiencia de usuario fluida en dispositivos móviles y de escritorio.
4. **Interacción Intuitiva**: UI simple y clara que permite a los usuarios entender rápidamente cómo cambiar entre modos sin confusiones.
5. **Accesibilidad**: La aplicación será diseñada con consideraciones de accesibilidad para asegurar que todos los usuarios puedan interactuar con ella sin dificultades.

## DESIGN SPECIFICATIONS
- **Visual Style**: minimalist - Clean, simple design with plenty of white space, minimal color palette, and focus on typography
- **Color Mode**: Light theme with dark text on light backgrounds
- **Primary Color**: #1978E5 (accent for buttons, links, highlights)
- **Typography**: Use Inter from Google Fonts for headings, Inter for body text and UI elements
- **Border Radius**: 8px (moderately rounded) for buttons, cards, and inputs
- **Layout**: La estructura principal incluirá un encabezado con el logo y el botón de cambio de modo, seguido de contenido principal que puede incluir textos e imágenes, todo organizado en un diseño de columnas que se adapta a pantallas más pequeñas.

## TECHNICAL REQUIREMENTS
- **Framework**: React con TypeScript
- **Styling**: Tailwind CSS
- **UI Components**: shadcn/ui
- **State Management**: Context API o Redux si se requiere un manejo más complejo del estado

## IMPLEMENTATION STEPS
1. Configurar el proyecto utilizando Create React App con TypeScript.
2. Instalar Tailwind CSS y configurarlo en el proyecto.
3. Crear los componentes principales: `Header`, `MainContent`, y `Footer`.
4. Implementar el botón de cambio de modo en el componente `Header`.
5. Añadir lógica para alternar entre los modos claro y oscuro usando el Context API para manejar el estado global.
6. Asegurarse de que el logo cambie de color de acuerdo al modo seleccionado.
7. Probar la aplicación en dispositivos móviles y de escritorio para verificar la responsividad.
8. Implementar pruebas de accesibilidad para asegurar que todos los usuarios puedan interactuar con la aplicación.

## USER EXPERIENCE
La interacción del usuario comenzará con una interfaz clara en modo claro. Al hacer clic en el botón de cambio de modo, la interfaz se transformará sin problemas a modo oscuro, cambiando también el logo para mantener la coherencia visual. Los usuarios podrán navegar fácilmente por el contenido, que estará bien organizado y adaptado a diferentes tamaños de pantalla, asegurando una experiencia fluida y agradable.