Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
This project is a web application designed to create a fun and engaging experience for proposing marriage. The application presents a cute, bubbly interface that allows the user to ask their girlfriend to marry them with two options: "Yes" and "No". Each time "No" is selected, the proposal evolves humorously, encouraging a positive response in a playful manner.

## CORE FEATURES
1. **Interactive Proposal**: A central feature where the user can propose with a "Yes" or "No" option, with the proposal format changing dynamically based on the user's response.
2. **Humorous Responses**: Each time "No" is clicked, the application generates increasingly funny and creative ways to ask her to say "Yes".
3. **Dynamic Button Animation**: After five "No" clicks, the buttons shift positions, adding a playful element to the interaction.
4. **Simple User Interface**: A clean and minimalist layout that focuses on the proposal text, ensuring the user experience is straightforward and engaging.
5. **Responsive Design**: The application will be fully responsive, ensuring it works well on 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 layout will feature a central proposal text area, with the "Yes" and "No" buttons below the proposal. The buttons will be spaced evenly, with ample white space surrounding them to enhance focus and usability.

## TECHNICAL REQUIREMENTS
- **Framework**: React with TypeScript.
- **Styling**: Tailwind CSS.
- **UI Components**: shadcn/ui for consistent and modern UI elements.
- **State Management**: React's built-in state management will be used to handle the proposal responses and button states.

## IMPLEMENTATION STEPS
1. **Set Up Project**: Initialize a new React project with TypeScript and install Tailwind CSS for styling.
2. **Create Components**: Develop the main components:
   - Proposal Component: Displays the proposal text and handles the logic for changing the proposal on "No" clicks.
   - Button Component: A reusable button component that accepts props for text and click handlers.
3. **Implement State Management**: Use React hooks to manage state for the proposal text and count of "No" clicks.
4. **Design Layout**: Utilize Tailwind CSS to style the components according to the design specifications, ensuring the layout is responsive.
5. **Add Animations**: Implement animations for the button shift after five "No" clicks to enhance user experience.
6. **Test Responsiveness**: Ensure the application is fully responsive on various devices and screen sizes.

## USER EXPERIENCE
The user experience will be engaging and playful. Upon visiting the site, the user sees a cheerful proposal message with clear "Yes" and "No" buttons. Clicking "Yes" can trigger a celebratory animation or message. When "No" is clicked, the message updates humorously, maintaining a light-hearted tone. After five attempts, the button positions shift, adding an element of surprise and fun, encouraging the user to continue engaging with the proposal in a creative way. The overall experience is designed to be memorable and enjoyable, making the proposal a unique event.