Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
This project involves creating a web application designed to serve as an interactive guideline for employees, facilitating the presentation of Asana's features. The application will embody Apple’s UI/UX principles, emphasizing clarity, logic, and a smooth user experience, ensuring that information is presented in an engaging and straightforward manner.

## CORE FEATURES
1. **Interactive Guidelines**: A dynamic section that allows employees to explore different features of Asana with explanations, images, and examples, enhancing understanding.
2. **Search Functionality**: An intuitive search bar to help users quickly locate specific guidelines or features based on keywords.
3. **User Feedback System**: A mechanism for employees to submit feedback or suggestions, fostering a collaborative environment and continuous improvement.
4. **Resource Library**: A repository of additional materials such as videos, articles, and FAQs to support the guidelines and enhance user learning.
5. **Progress Tracker**: A feature for users to track their learning journey and mark guidelines as read, promoting engagement and accountability.

## 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 structure will follow a single-page application design, featuring a top navigation bar, a hero section for the welcome message, followed by sections for guidelines, feedback, and resources, with a footer for additional links and contact information.

## TECHNICAL REQUIREMENTS
- **Framework**: React with TypeScript
- **Styling**: Tailwind CSS
- **UI Components**: shadcn/ui
- **State Management**: Use React's built-in state management or Context API as needed for managing user interactions and feedback.

## IMPLEMENTATION STEPS
1. **Set Up the Project**: Initialize a new React project with TypeScript and install Tailwind CSS and required UI components.
2. **Create the Layout**: Develop the main layout with a responsive navigation bar, hero section, and guidelines area using Tailwind CSS for styling.
3. **Implement Core Features**: 
   - Build the interactive guidelines section with components that display features dynamically.
   - Integrate the search functionality to filter guidelines based on user input.
   - Develop the feedback system with forms that capture user suggestions.
   - Create the resource library to house external links and materials.
   - Implement the progress tracker to allow users to mark guidelines as complete.
4. **Optimize User Experience**: Ensure all components are responsive and accessible, testing across different devices and screen sizes.
5. **Conduct User Testing**: Gather feedback from a small group of employees to refine the application before a wider rollout.

## USER EXPERIENCE
The application will guide users through a seamless experience, starting from a welcoming hero section that introduces the guidelines. Employees will interact with the guidelines through a clean interface, utilizing the search bar to quickly find specific features. The feedback system will encourage users to share their thoughts, fostering an inclusive atmosphere. Clear navigation and visual cues will enhance usability, ensuring users can easily access resources and track their learning progress. The overall experience will reflect Apple’s commitment to simplicity and clarity, making the guideline engaging and informative.