Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
This project is a heartwarming, one-page website designed as a Valentine's Day surprise for a girlfriend. The website features a scrolling layout that presents a series of romantic messages and interactive elements, culminating in a heartfelt declaration of love. It is designed to be simple yet visually appealing, creating an emotional experience for the user.

## CORE FEATURES
1. **Hero Section**: A warm greeting that says "Happy Valentine's Day, Maya", prominently displayed at the top with an inviting background.
2. **Valentine's Question**: An interactive section that poses the question, "Will you be my Valentine?" with simple "Yes" and "No" buttons for engagement.
3. **Personal Note**: A text area where the user can write a personalized note to express their feelings.
4. **Photo Gallery**: A section for uploading and displaying cherished pictures that represent their relationship.
5. **Love Cards**: Interactive cards with reasons why the user loves their girlfriend. Clicking on a card reveals the reason behind it.
6. **Final Message**: A heartfelt closing statement that reads "Together Forever" at the bottom, reinforcing the theme of love and commitment.

## DESIGN SPECIFICATIONS
- **Visual Style**: Minimalist - A clean, simple design with ample white space, focusing on a light color palette with light pinks and purples to convey warmth and affection.
- **Color Mode**: Light theme with soft pastel colors, dark text on light backgrounds for readability.
- **Layout**: A vertical scroll layout with each core feature stacked sequentially. Each section should have clear visual separation with ample padding.
- **Typography**: Use a combination of serif fonts for headings (e.g., Playfair Display) to add elegance and sans-serif fonts for body text (e.g., Open Sans) for clarity and modernity.

## TECHNICAL REQUIREMENTS
- **Framework**: React with TypeScript
- **Styling**: Tailwind CSS for utility-first styling
- **UI Components**: Utilize shadcn/ui for pre-built UI components to simplify design and ensure responsiveness.
- **State Management**: React’s built-in state management for handling user interactions.

## IMPLEMENTATION STEPS
1. **Set Up React Environment**: Initialize a new React project with TypeScript and install Tailwind CSS.
2. **Create Layout Components**: Build individual components for each section (Hero, Question, Note, Photo Gallery, Love Cards, Final Message).
3. **Design Styles**: Apply Tailwind CSS classes to style each component according to the specified visual style and color palette.
4. **Implement Interactivity**: 
   - Set up state management to handle user inputs for the question and personal note.
   - Create a photo upload functionality using file input and display images in the photo gallery.
   - Develop the love cards with click events that reveal the reasons.
5. **Responsive Design**: Ensure all components are responsive and look good on mobile devices.
6. **Testing**: Conduct user testing to ensure the interactive elements function as intended and the overall user experience is seamless.

## USER EXPERIENCE
The user will encounter a delightful scrolling journey beginning with a warm greeting, leading to an interactive question that invites engagement. They will be able to express their feelings through a personal note and share memories via photos. The interactive love cards add an element of surprise and joy, while the concluding message reinforces the sentiment of love. The design emphasizes ease of use and emotional connection, making the experience special and memorable.