Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
This application is a web dashboard designed to enhance user experience by fixing overlapping elements and uneven card layouts. The primary goal is to create a clean and organized interface that promotes usability and accessibility through a minimalist approach.

## CORE FEATURES
1. **Dashboard Overview**: A central hub displaying key metrics and summaries, allowing users to quickly assess important information at a glance.
2. **Responsive Card Layout**: A grid of cards that adjusts dynamically based on screen size, ensuring a consistent appearance without overlapping elements.
3. **User Interaction Feedback**: Subtle animations and visual cues for user actions (e.g., hover effects, button presses) to enhance engagement and clarity.
4. **Settings Panel**: A dedicated area for users to customize their experience, including theme adjustments and layout preferences.
5. **Notifications System**: A clean, unobtrusive notification area that informs users of updates without disrupting their workflow.
6. **Search Functionality**: An intuitive search bar that allows users to quickly find specific items or information within the dashboard.

## DESIGN SPECIFICATIONS
- **Visual Style**: Minimalist - The design prioritizes clean lines, ample white space, and a simple aesthetic with a focus on typography to enhance readability.
- **Color Mode**: Light theme with dark text on light backgrounds to ensure high contrast and easy readability.
- **Layout**: A responsive grid layout that adapts to various screen sizes, featuring uniform card sizes with consistent padding and margins to prevent overlaps.
- **Typography**: Use a sans-serif font like 'Montserrat' for headers and 'Open Sans' for body text, with a clear hierarchy (e.g., larger font sizes for titles, medium for subtitles, and standard for body text).

## TECHNICAL REQUIREMENTS
- **Framework**: React with TypeScript to ensure type safety and maintainable code structure.
- **Styling**: Tailwind CSS for utility-first styling that allows for rapid component development and customization.
- **UI Components**: Utilize shadcn/ui for ready-made, accessible UI components that align with the minimalist design ethos.
- **State Management**: Use React Context API or Zustand for efficient state management without unnecessary complexity.

## IMPLEMENTATION STEPS
1. **Set Up Project**: Initialize a new React project with TypeScript and integrate Tailwind CSS for styling.
2. **Create Layout Structure**: Design the main dashboard layout using a responsive grid system, ensuring that all cards are evenly spaced and aligned.
3. **Develop Core Features**:
   - Implement the dashboard overview component.
   - Create the responsive card layout with sample data.
   - Build the settings panel and integrate user preferences.
   - Set up the notifications system with customizable alerts.
   - Add the search functionality to filter through dashboard items.
4. **Style Components**: Apply Tailwind CSS classes to achieve the minimalist aesthetic, focusing on typography and spacing.
5. **Test Responsiveness**: Ensure the application functions seamlessly across various devices and screen sizes, adjusting layouts as necessary.
6. **Gather User Feedback**: Conduct user testing to gather insights on usability and make necessary adjustments based on feedback.

## USER EXPERIENCE
Users will interact with the dashboard by navigating through a clean interface, where they can easily view metrics and access different features. The responsive design ensures a smooth experience on both desktop and mobile devices. Notifications and settings are easily accessible, and the search functionality allows for quick retrieval of needed information, all while maintaining a focus on simplicity and clarity.