Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
This project involves creating a web application that simulates a mobile app experience for fitness and health management. The purpose is to gather user feedback on various features before the final mobile app development. The application will allow users to explore features like calorie tracking, diet plans, exercise recommendations, and more, all while collecting their feedback interactively.

## CORE FEATURES
1. **Calorie Calculator**: Users can input their dietary preferences to calculate daily calorie needs based on personal goals.
2. **Diet Plans & Recommendations**: Customized meal plans and dietary suggestions tailored to user goals (weight loss, muscle gain, etc.).
3. **Exercise Tracking**: Users can log exercises, track progress, and receive recommendations based on their fitness level.
4. **Daily Tracking**: Monitor daily calorie intake and macros through a user-friendly interface.
5. **Initial User Setup**: Users can provide initial information (name, weight, height, goals) to tailor the experience.
6. **Virtual Assistant**: An interactive assistant to guide users through their fitness journey, including reminders for diet, exercise, and hydration.

## 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 hero section at the top, followed by feature cards displayed in a grid format. A sample mobile screen will be positioned on the right side for users to interact with. A feedback section will encourage users to provide their thoughts on each feature.

## TECHNICAL REQUIREMENTS
- **Framework**: React with TypeScript
- **Styling**: Tailwind CSS
- **UI Components**: shadcn/ui
- **State Management**: React Context API (for managing user preferences and feedback)

## IMPLEMENTATION STEPS
1. **Set Up Project**: Initialize a new React project with TypeScript and install necessary dependencies (React, Tailwind CSS, shadcn/ui).
2. **Create Layout**: Design the main layout with a header, hero section, feature cards, feedback section, and sample mobile screen.
3. **Develop Core Features**: Implement each core feature with interactive elements, ensuring smooth transitions and user-friendly interfaces.
4. **Feedback Mechanism**: Add a feedback form that allows users to provide comments or suggestions on each feature, using bullet points for ease of use.
5. **Testing**: Conduct user testing sessions to gather feedback on usability and feature effectiveness.
6. **Iterate Based on Feedback**: Adjust features and layout based on user feedback to enhance the overall experience.

## USER EXPERIENCE
Users will experience a smooth and interactive interface that mimics a mobile app within the web environment. They will be able to navigate through various features seamlessly, providing feedback via a simple form with bullet points for quick suggestions. The design will focus on minimal distraction, allowing users to concentrate on the features and their input. Each interaction will be designed to feel intuitive, with clear calls to action guiding users through their feedback journey.