Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
This project involves implementing the Bento Grid style into an existing web application while maintaining the current functionality. The goal is to create a visually appealing, minimalist interface that enhances user experience without altering the underlying features.

## CORE FEATURES
1. **Responsive Bento Grid Layout**: The application will utilize a flexible grid system that allows for dynamic content arrangement, ensuring optimal viewing on all devices.
2. **Minimalist Design**: A clean, simple interface that utilizes ample white space and a minimal color palette to enhance readability and focus on essential functionalities.
3. **User-Friendly Navigation**: Intuitive navigation components that guide users through the application seamlessly, ensuring they can easily access all features.
4. **Interactive Elements**: Buttons, cards, and inputs designed with a moderate border radius to create a cohesive and modern aesthetic.
5. **Dark Text on Light Backgrounds**: Ensures high contrast for text readability, improving overall accessibility for users.

## 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 layout will consist of a responsive grid that adapts to the screen size, with cards and content blocks organized in a visually appealing manner.

## TECHNICAL REQUIREMENTS
- **Framework**: React with TypeScript.
- **Styling**: Tailwind CSS.
- **UI Components**: shadcn/ui.
- **State Management**: React Context API or any preferred state management library.

## IMPLEMENTATION STEPS
1. **Set Up Project Structure**: Initialize a new React project with TypeScript and integrate Tailwind CSS for styling.
2. **Install Necessary Dependencies**: Include shadcn/ui components for UI elements and any state management libraries needed.
3. **Create the Bento Grid Layout**: Implement a responsive grid layout using Tailwind CSS classes that adjust based on screen size.
4. **Design UI Components**: Develop buttons, cards, and other UI elements using the specified border radius and primary color.
5. **Integrate Typography**: Include the Inter font from Google Fonts and apply it across all headings and body text.
6. **Implement Accessibility Features**: Ensure all elements are accessible and follow best practices for usability.
7. **Testing and Optimization**: Conduct thorough testing across different devices and browsers to ensure a consistent experience.

## USER EXPERIENCE
Key user interactions will revolve around navigating through the Bento Grid. Users can easily click on various cards and buttons, which will direct them to the corresponding functionalities. The minimalist design will promote a seamless flow, allowing users to focus on content without distraction. The responsive layout will ensure that the experience is optimized for both mobile and desktop users, maintaining usability across platforms.