Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
The project "Diagnóstico de Marca 4E™" is a minimalist landing page designed to provide founders with an interactive experience to assess their brand through the 4E methodology. The platform will allow users to answer questions about their brand and receive personalized insights, aiming to clarify their branding needs and prepare them for potential future projects.

## CORE FEATURES
1. **Landing Page**: A clean and inviting entry point that communicates the purpose and benefits of the 4E methodology.
2. **Data Capture**: A form to collect basic user information including name, email, and project details.
3. **Diagnostic Questionnaire**: A structured questionnaire divided into four modules corresponding to the 4E dimensions: Esencia, Estructura, Expresión, and Experiencia.
4. **Progress Saving**: Automatically save user progress to allow them to return and complete the questionnaire at their convenience.
5. **Result Calculation**: Provide users with a preliminary assessment based on their responses, highlighting areas that need attention.
6. **Personalized Report**: Display a customized report on-screen, summarizing findings and offering initial recommendations.

## 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**: The main layout will consist of a hero section with a brief introduction, followed by the data capture form, the questionnaire split into four sections, a progress bar, and the results display area.

## TECHNICAL REQUIREMENTS
- **Framework**: React with TypeScript
- **Styling**: Tailwind CSS
- **UI Components**: shadcn/ui
- **State Management**: Use Context API for managing user data and questionnaire state.

## IMPLEMENTATION STEPS
1. **Set Up Environment**: Initialize a new React project with TypeScript and install Tailwind CSS.
2. **Create Components**: Develop the main components including the landing page, data capture form, questionnaire, progress tracker, and results display.
3. **Implement Routing**: Use React Router to manage navigation within the landing page.
4. **Design Forms**: Create the data capture form and the questionnaire modules, ensuring they adhere to the design specifications.
5. **Save User Progress**: Implement local storage or a similar method to save user progress as they complete the questionnaire.
6. **Calculate Results**: Develop logic to analyze questionnaire responses and generate a personalized report.
7. **Display Results**: Create the UI for displaying the results and initial recommendations to the user.
8. **Testing**: Conduct thorough testing to ensure functionality and user experience are smooth and intuitive.

## USER EXPERIENCE
Users will arrive at the landing page via various channels like Instagram or newsletters. They will understand the process and estimated time required for completion. After entering their name and email, users will provide basic project information and proceed to the questionnaire. They will see their progress as they answer questions, receive insights related to each of the 4E dimensions, and obtain a summary of key recommendations, with options to receive their report via email or explore further services.