Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
This project involves designing a web application for a premium Habit Tracker app that features two beautifully crafted iOS-native mobile screens. The app focuses on helping users create and track their habits using modern design principles, emphasizing aesthetics, emotional connection, and a clean user experience.

## CORE FEATURES
1. **Habit Tracking Home Screen**: Displays all habits with an elegant header, profile avatar, and a progress summary card. Features habit cards showing emoji/icon, title, current streak, completion percentage, and a mini yearly heatmap preview.
  
2. **Create Habit Screen**: A modal sheet for users to create new habits, featuring a habit name input, emoji/icon picker, frequency selector, reminder time picker, and goal selection cards.

3. **Heatmap Visualization**: Provides a visually satisfying representation of habit completion, using modern soft rounded squares and smooth color intensity transitions.

4. **Floating Add Button**: A glassmorphism-styled button that allows users to quickly add new habits.

5. **Responsive Design**: Ensures that the application is fully responsive and provides an excellent user experience across different devices.

## 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 includes a spacious header with a greeting, a card layout for habits, and a modal for creating habits, all structured to enhance the visual hierarchy and user experience.

## TECHNICAL REQUIREMENTS
- **Framework**: React with TypeScript.
- **Styling**: Tailwind CSS.
- **UI Components**: shadcn/ui.
- **State Management**: React Context API or Zustand for managing application state.

## IMPLEMENTATION STEPS
1. **Setup the Project**: Initialize a new React project with TypeScript, install Tailwind CSS, and set up shadcn/ui for UI components.
2. **Create the Habit Tracking Home Screen**: Develop the layout including the elegant header, profile avatar, progress summary card, and habit cards using Tailwind CSS for styling.
3. **Implement the Heatmap Visualization**: Design the heatmap component with rounded squares and smooth transitions, ensuring it blends seamlessly into the UI.
4. **Develop the Create Habit Screen**: Create the modal sheet to include input fields, emoji picker, frequency selector, and save button, adhering to iOS design standards.
5. **Add the Floating Add Button**: Implement the glassmorphism button that allows users to add new habits easily.
6. **Ensure Responsiveness**: Test and refine the application to ensure a smooth experience on various screen sizes.

## USER EXPERIENCE
Users will be greeted with a calming and luxurious interface on the Habit Tracking Home Screen, where they can view and interact with their habits through visually appealing cards. The Create Habit Screen will provide a streamlined experience for adding new habits, featuring intuitive input fields and selectors. The use of soft gradients, rounded corners, and subtle shadows will enhance the overall emotional connection with the app, making the habit tracking process feel rewarding and engaging. 

This application aims to provide a high-end, polished experience that resonates with users’ wellness goals while maintaining simplicity and elegance throughout the design.