Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
This project focuses on creating a captivating landing page experience for a birthday celebration website. The main purpose is to engage users with a playful "fake glitch" effect that transitions into a warm and inviting reveal, setting a positive tone for the rest of the birthday experience.

## CORE FEATURES
1. **Glitch Introduction**: A short, engaging animation that starts with a dark screen and features subtle glitch effects accompanied by typewriter-style text to build suspense.
2. **Warm Reveal Transition**: The glitch effect smoothly fades out, transitioning the background to warm pastel colors while displaying heartfelt messages.
3. **Call to Action Button**: A prominent, animated button invites users to start their birthday adventure with celebratory animations like confetti or floating hearts.
4. **Sound Effects**: Optional sound effects enhance the experience: a subtle glitch sound during the intro and a cheerful sound upon the reveal.
5. **Mobile Responsiveness**: The design ensures that the experience is mobile-friendly, providing a seamless interface across 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 main layout consists of a full-screen introduction with the glitch effect, followed by a warm reveal section, and a prominent call-to-action button centered on the page.

## TECHNICAL REQUIREMENTS
- **Framework**: React with TypeScript
- **Styling**: Tailwind CSS
- **UI Components**: shadcn/ui
- **State Management**: [None required for this simple landing page]

## IMPLEMENTATION STEPS
1. **Set Up Project**: Initialize a new React project with TypeScript and install Tailwind CSS.
2. **Create Layout**: Design the main layout structure using a full-screen div for the glitch intro and a subsequent div for the warm reveal.
3. **Implement Glitch Effect**: Use CSS animations to create the glitch effect, including flickering and distortion lines during the introduction.
4. **Text Animation**: Implement typewriter or glitch-style text animation for displaying messages during the glitch phase.
5. **Transition to Reveal**: Create a smooth transition effect using CSS to fade out the glitch and reveal the warm pastel background and new text.
6. **Add Call to Action**: Design a large button that animates with soft celebratory effects and links to the next part of the birthday experience.
7. **Incorporate Sound Effects**: Add optional sound effects that play during the glitch and reveal phases using an audio library.
8. **Test Responsiveness**: Ensure the design is mobile-friendly and performs well on various devices.

## USER EXPERIENCE
The user will start with a dark screen where the glitch animation creates intrigue. As the glitch fades away, users will be greeted with warm messages that evoke positive emotions. The transition leads to a clear call-to-action button inviting them to continue their birthday adventure, with subtle sound effects enhancing the overall experience. The simple, minimalist design ensures that users are not overwhelmed and can focus on the joyous occasion being celebrated.

This structure provides a comprehensive plan to create a fun and engaging landing page that aligns with the user's vision.