Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
This project is a landing page designed as a wedding invitation website that allows users to create and share "Save the Date" notices. The site will feature interactive buttons that reveal additional information with animations in the background, providing an engaging experience for visitors.

## CORE FEATURES
1. **Hero Section**: A captivating hero section with the wedding couple's names and the event date, featuring an animated background and a prominent "Save the Date" button.
2. **Interactive Buttons**: Buttons that reveal details such as venue, RSVP options, and registry information with smooth animations.
3. **Countdown Timer**: A countdown timer that displays the time remaining until the wedding date, enhancing anticipation for the event.
4. **Gallery Section**: A minimalist gallery showcasing pre-wedding photos of the couple, allowing guests to connect with their journey.
5. **Contact Information**: A dedicated section where guests can send inquiries or RSVP directly through an integrated form.
6. **Social Media Links**: Links to the couple's social media profiles for guests to stay updated.

## 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 be a single-page scrolling experience, with sections stacked vertically. The hero section will be followed by the features, gallery, and contact sections, maintaining a clear flow and visual hierarchy.

## TECHNICAL REQUIREMENTS
- **Framework**: React with TypeScript
- **Styling**: Tailwind CSS
- **UI Components**: shadcn/ui
- **State Management**: Not required for this simple application, but can be integrated if necessary for managing the countdown timer or form submissions.

## IMPLEMENTATION STEPS
1. **Set Up the Project**: Initialize a new React project using Create React App with TypeScript template.
2. **Install Dependencies**: Install Tailwind CSS and shadcn/ui for styling and components.
3. **Create the Layout**: Set up the main structure of the landing page with sections for the hero, features, gallery, and contact.
4. **Implement the Hero Section**: Design the hero section with a background animation and a "Save the Date" button that triggers additional content display.
5. **Develop Interactive Buttons**: Create buttons that reveal information using CSS transitions and animations.
6. **Add Countdown Timer**: Implement a countdown timer component that calculates and displays the remaining time until the wedding date.
7. **Build the Gallery**: Create a simple image gallery using Tailwind CSS for styling.
8. **Set Up the Contact Form**: Develop a form for RSVPs and inquiries, ensuring it is user-friendly and straightforward.
9. **Optimize for Mobile**: Ensure the design is responsive and looks good on various devices by using Tailwind's responsive utilities.
10. **Conduct Testing**: Test the interactive elements and overall user experience to ensure smooth functionality.

## USER EXPERIENCE
Users will arrive at a visually appealing landing page that immediately captures their attention with a stunning hero section. They will interact with buttons that smoothly reveal more details, enhancing the excitement surrounding the wedding. The countdown timer adds urgency, while the gallery provides a personal touch. The contact form allows for easy communication, making it convenient for guests to RSVP or ask questions. Overall, the experience is designed to be intuitive, engaging, and reflective of the couple's unique story.