Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
The Governance Models web application is designed to facilitate the digital creation, editing, and management of Governance Model Canvases specifically for Living Labs and Positive and Clean Energy Districts (PCEDs). It guides users through a structured, step-by-step governance design process, ensuring clarity and effectiveness in governance model development.

## CORE FEATURES
1. **Welcome Page**: Introduces the application with the title “Governance Models – Step by Step” and provides a concise explanation of governance models and their significance, along with a brief overview of the five-step journey users will undertake.

2. **Project Access**: Users can create a new project (new canvas) or access existing projects using a unique access code. Each project is securely saved and can be reopened for further editing.

3. **Create New Project**: Users are prompted to enter a project name (mandatory) before proceeding to setup their governance canvas.

4. **Canvas Setup Options**: Users can choose to start from a blank Governance Model Canvas or select from predefined templates based on various governance models, such as Full Public Board and Community-Based Governance.

5. **Governance Template Recommendation**: A short questionnaire (3-5 questions) gathers information about leadership type, decision-making approach, and citizen involvement to recommend the most suitable governance template, along with a brief explanation of the recommendation.

6. **Governance Model Canvas Editor**: An interactive and editable canvas allows users to define aspects like Lab Objectives, Decision-Making, Leadership, and more. Users can edit text, save changes, and benefit from autosave functionality.

## DESIGN SPECIFICATIONS
- **Visual Style**: Minimalist design featuring a clean and simple aesthetic with ample white space, ensuring focus on content and usability.
- **Color Mode**: Light theme with dark text on light backgrounds to enhance readability and reduce eye strain.
- **Layout**: A straightforward single-column layout for primary navigation, with a sidebar for project management tasks. Sections are clearly defined, with ample spacing between elements for clarity.
- **Typography**: Use of sans-serif fonts (e.g., Open Sans or Helvetica) for body text to enhance legibility, with larger, bold headings for clear hierarchy. Consistent font sizes and weights to maintain visual coherence.

## TECHNICAL REQUIREMENTS
- **Framework**: React with TypeScript to ensure type safety and component reusability.
- **Styling**: Tailwind CSS for rapid, responsive design and easy customization.
- **UI Components**: Utilize shadcn/ui for consistent UI elements and user interactions.
- **State Management**: Use a context API or Redux as needed for managing application state across components.

## IMPLEMENTATION STEPS
1. **Set Up Project**: Initialize a new React project using Create React App with TypeScript.
2. **Install Dependencies**: Add Tailwind CSS and shadcn/ui to the project for styling and UI components.
3. **Create Structure**: Develop the main components for the Welcome Page, Project Access, New Project Creation, Canvas Setup, Questionnaire, and Canvas Editor.
4. **Implement Routing**: Use React Router for navigation between different sections of the application.
5. **Develop Features**: Code the core features, ensuring each is connected appropriately (e.g., saving projects and loading them via access codes).
6. **Integrate Autosave**: Implement autosave functionality for the canvas to enhance user experience and data retention.
7. **Test Responsiveness**: Ensure the application is fully responsive across different devices and screen sizes.
8. **Finalize Design**: Polish the UI based on user testing feedback, focusing on clarity, usability, and visual appeal.

## USER EXPERIENCE
Users will begin at the Welcome Page, where they will be oriented to the governance design process. They can easily navigate to create or access projects, guided by clear prompts and simple navigation. The canvas editor will allow users to interactively manage their governance models, with autosave ensuring their work is never lost. The questionnaire will personalize their experience by recommending the most suitable templates based on their responses, enhancing the relevance of their governance model.