Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
This web application is an interactive romantic card designed to engage users with four distinct buttons. Each button, when clicked, reveals a different theme or set of information, enhancing the romantic experience through fascinating facts and heartfelt messages.

## CORE FEATURES
1. **Timão Button**: A button that, when clicked, reveals a delightful message or a short romantic note, keeping the experience light and joyful.
2. **Playa Button**: This button opens up a visual representation of a beach scene and can include soothing sounds of waves, creating a serene ambiance.
3. **Aliens Button**: Upon clicking, this button provides five fascinating facts about extraterrestrials, aiming to spark curiosity and wonder in a fun, lighthearted manner.
4. **Amor Button**: This button displays a series of romantic phrases in Portuguese, such as:
   - "Me gustas por lo maravillosa que eres."
   - "Me gustas por esa manera linda al hablar siempre conmigo."
   - "Me gustas porque eres todo lo que deseo en una mujer."
   - "Me gustas por darme la oportunidad de conocerte."
   - "Gracias por quererme conocer."

## DESIGN SPECIFICATIONS
- **Visual Style**: Minimalist - Focus on a clean, simple design that incorporates ample white space and a minimal color palette to maintain a romantic and serene atmosphere.
- **Color Mode**: Light theme with dark text on light backgrounds to enhance readability and comfort.
- **Layout**: The layout consists of a central interactive card with four buttons evenly spaced below it, allowing for easy navigation. Each button has a hover effect to enhance interactivity.
- **Typography**: Utilize a modern sans-serif font for clarity and elegance. The hierarchy should prioritize the romantic messages and facts, with larger headings for titles and smaller text for details.

## TECHNICAL REQUIREMENTS
- **Framework**: React with TypeScript for type safety and component-based architecture.
- **Styling**: Tailwind CSS for utility-first styling that simplifies design and responsiveness.
- **UI Components**: Use shadcn/ui for pre-designed components that maintain the minimalist aesthetic.
- **State Management**: Utilize React's built-in state management for handling button interactions and displaying content dynamically.

## IMPLEMENTATION STEPS
1. **Set Up the React Environment**: Initialize a new React project using Create React App with TypeScript.
2. **Install Dependencies**: Install Tailwind CSS and shadcn/ui for styling and UI components.
3. **Create a Main Component**: Develop a main component that houses the interactive card and buttons.
4. **Button Functionality**: Implement click handlers for each button to display the respective content (messages, facts, etc.).
5. **Styling Components**: Use Tailwind CSS to style the buttons and text, ensuring a minimalist and cohesive look.
6. **Responsive Design**: Ensure the layout adjusts for different screen sizes, providing a seamless experience on both desktop and mobile devices.
7. **Testing and Debugging**: Conduct thorough testing to ensure all buttons function correctly and the user experience is smooth.

## USER EXPERIENCE
Users will be greeted with a beautifully designed interactive card featuring four buttons. Each button will provide distinct content that enhances the romantic theme. When a user clicks on a button, it smoothly transitions to reveal the relevant content, ensuring an engaging and enjoyable experience. The minimalist design allows users to focus on the messages and facts without distraction, creating a heartfelt interaction.