Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
This project is a web application designed to allow users to upload a file and an image, generating a profile picture ring that promotes awareness for ME/CFS (Myalgic Encephalomyelitis/Chronic Fatigue Syndrome). The application will feature a sleek and minimalist design, ensuring a user-friendly experience while effectively communicating the intended message.

## CORE FEATURES
1. **Image Upload**: Users can upload a profile picture from their device, which will serve as the base for the awareness ring.
2. **File Upload**: Users can upload an accompanying file (such as a description or personal story) that may be displayed with the generated image.
3. **Custom Ring Design**: A unique ring design tailored for ME/CFS awareness that aligns with modern design standards will be applied to the uploaded image.
4. **Download Option**: Users can download the generated image with the ring for use on social media or other platforms.
5. **Social Sharing**: Integration with social media platforms to easily share the generated image and raise awareness.
6. **Information Section**: A section providing information about ME/CFS, including resources and links to support organizations.

## 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 centered hero section for uploading images, a preview area for the generated image, and a fixed footer for additional information and social sharing options.

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

## IMPLEMENTATION STEPS
1. **Set Up the React Project**: Initialize a new React project using Create React App with TypeScript.
2. **Install Dependencies**: Install Tailwind CSS and shadcn/ui components for styling and UI components.
3. **Create Image Upload Component**: Develop a component to handle file uploads and preview the uploaded image.
4. **Implement Ring Design Logic**: Create a function to apply the custom ME/CFS ring design to the uploaded image.
5. **Add Download Functionality**: Implement a feature that allows users to download the generated image with the ring.
6. **Develop Social Sharing Feature**: Integrate social media sharing buttons to enable users to share their generated images.
7. **Create Information Section**: Design an information area that provides context about ME/CFS and links to resources.
8. **Testing and Debugging**: Conduct thorough testing to ensure all functionalities work as intended and fix any bugs.

## USER EXPERIENCE
Users will begin by navigating to the application, where they will find a clean and welcoming interface. They will upload their image and file, then see a real-time preview of their image with the ME/CFS awareness ring applied. Users can easily download their image or share it directly to social media, all while having access to informative content about ME/CFS. The minimalist design ensures that the focus remains on the user’s content and the awareness message being promoted.