Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
This web application is a personal record tracker designed for runners, enabling users to save their name, location, bio, and running personal records for various distances. The application emphasizes a clean, intuitive interface for users to manage their running achievements and profile easily.

## CORE FEATURES
1. **User Profile Management**: Users can save their name, location, and a brief bio (limited to 150 characters).
2. **Personal Record Tracking**: Users can input and save their running personal records for various distances in HH:MM:SS format.
3. **Race/Event Details**: For each personal record, users can add details about the race or location and the date it occurred, using a date picker.
4. **Profile Picture Upload**: Users can upload and display a profile picture to personalize their profiles.
5. **Responsive Design**: The application will be fully responsive to ensure an optimal experience across mobile and desktop 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 will feature a top navigation bar for profile access, a hero section for user statistics, and sections for entering personal records and profile management.

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

## IMPLEMENTATION STEPS
1. **Set Up the Project**:
   - Initialize a new React project using Create React App with TypeScript.
   - Install Tailwind CSS and set up the configuration file.
   - Install shadcn/ui for UI components.

2. **Create User Profile Components**:
   - Build a form component for user name, location, and bio input.
   - Implement profile picture upload functionality.

3. **Set Up Personal Record Tracking**:
   - Create a component for adding personal records with fields for distance, time, race/location, and date picker.
   - Implement validation for the bio length and time format.

4. **Build Responsive Layout**:
   - Use Tailwind CSS for styling and ensure components are responsive.
   - Test the layout on various screen sizes.

5. **Implement State Management**:
   - Use React Context API to manage user profile and personal records.
   - Ensure that data persists as users navigate between components.

6. **Testing & Optimization**:
   - Conduct usability tests to ensure a smooth user experience.
   - Optimize application performance for fast load times.

## USER EXPERIENCE
Users will interact with the application primarily through a seamless form interface for entering their personal records and profile details. Upon signing in, users will see their profile summary and can easily navigate to add new records or update their information. The application will provide real-time feedback for input validation and a visually appealing display of their running achievements. The responsive design will ensure that users have a consistent experience whether they are on a mobile device or a desktop.