Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
Create a modern dark-mode mobile AI chat application that emphasizes a clean, minimal, and premium aesthetic inspired by leading designs in the industry. The app will provide users with an intuitive interface for engaging with AI-driven chat capabilities, allowing them to perform tasks like web searches, image creation, and document management.

## CORE FEATURES
1. **Home Screen**: A visually engaging home screen featuring a greeting message and centered feature buttons for easy navigation.
2. **Input Area**: A prominent input box for users to ask questions, equipped with attachment and microphone buttons for enhanced interaction.
3. **Side Menu (Drawer)**: A slide-in menu providing access to recent chats, tools, and upgrade options, ensuring easy navigation and functionality.
4. **Feature Buttons**: Glassmorphism style buttons for seamless user interaction with features like web search, image creation, and AI documents.
5. **Profile Management**: User profile access through a circular avatar for personalized experience and settings.
6. **Upgrade Card**: A compelling call-to-action for users to upgrade to premium features, enhancing productivity.

## DESIGN SPECIFICATIONS
- **Visual Style**: Minimalist with a focus on high contrast and premium SaaS aesthetics. The design utilizes smooth rounded corners and soft shadows to create a modern look.
- **Color Mode**: Dark theme with full black background (#000000) and subtle gray accents, allowing for a comfortable user experience in low-light conditions.
- **Layout**: The main layout consists of a full-screen home interface with a centered greeting and feature buttons, a bottom input area for user queries, and a left-side drawer for additional navigation options.
- **Typography**: Use clean sans-serif fonts such as Inter or SF Pro, maintaining a strong hierarchy with clear text differentiation for headings and body text.

## TECHNICAL REQUIREMENTS
- **Framework**: React with TypeScript for robust application structure and type safety.
- **Styling**: Tailwind CSS for utility-first styling, ensuring responsiveness and maintainability.
- **UI Components**: Utilize shadcn/ui components for consistent and customizable UI elements.
- **State Management**: Consider using Context API or Zustand for state management where necessary.

## IMPLEMENTATION STEPS
1. **Set Up Project**: Initialize a new React project with TypeScript and install Tailwind CSS.
2. **Create Home Screen Component**: Design the home screen with greeting text and feature buttons, ensuring proper alignment and spacing.
3. **Build Input Area**: Implement the input box with attachment and microphone buttons, ensuring a floating appearance with inner shadows.
4. **Develop Side Menu (Drawer)**: Create a slide-in drawer component with navigation items and an upgrade card at the bottom.
5. **Implement State Management**: Set up state management for handling user interactions, chat history, and settings.
6. **Responsive Design**: Ensure the application is mobile-first and adapts seamlessly to various screen sizes.

## USER EXPERIENCE
Users will begin their interaction on the home screen, greeted with a personalized message. They can easily navigate through the feature buttons to initiate a web search, create an image, or access AI documents. The input area allows for quick queries, and the side menu provides additional functionality without cluttering the main interface. The design ensures a fluid experience with smooth transitions and clear visual hierarchy, enhancing user engagement and satisfaction.