Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
This project aims to create a fun, interactive website for kids and teens that features engaging tools like "What My Bed Tells About Me" and "What Is Your Lucky Number". The site will focus on providing a simple, entertaining user experience while generating traffic and revenue through advertisements.

## CORE FEATURES
1. **What My Bed Tells About Me**: Users can upload a picture of their bed, triggering an animation that analyzes the image and presents a fun, fortune-telling style text interpretation.
2. **Lucky Number Generator**: Users think of a number, and the application provides a whimsical interpretation or significance of that number.
3. **Animated Feedback**: Incorporate GIFs and animations that enhance the fun and engaging aspect of the tools.
4. **User-Friendly Interface**: Minimalist design with easy navigation to ensure a seamless experience for kids and teens.
5. **Social Sharing Options**: Allow users to share their results on social media platforms to increase traffic and engagement.
6. **Advertisement Integration**: Strategically place ads that are child-friendly and non-intrusive to generate revenue.

## 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 will consist of a hero section at the top, followed by feature sections for each tool, a social sharing area, and a footer for contact information and additional links.

## TECHNICAL REQUIREMENTS
- **Framework**: React with TypeScript.
- **Styling**: Tailwind CSS.
- **UI Components**: shadcn/ui.
- **State Management**: React Context API or Zustand for state management as needed.

## IMPLEMENTATION STEPS
1. **Set up the project**: Initialize a new React project with TypeScript and install Tailwind CSS.
2. **Create the main layout**: Implement a responsive layout using Tailwind CSS, including a hero section, feature sections, and a footer.
3. **Develop core features**: 
   - Implement the "What My Bed Tells About Me" feature with image upload and animation effects.
   - Create the "Lucky Number Generator" feature that takes user input and displays results.
4. **Add animations and GIFs**: Use CSS animations and integrate GIFs to enhance the interactivity and fun elements of the site.
5. **Implement social sharing**: Integrate social media sharing buttons to allow users to share their results.
6. **Set up advertisement placements**: Identify key areas for ad placements that are child-friendly and do not disrupt user experience.
7. **Test the application**: Ensure all features are working correctly and the design is responsive on various devices.
8. **Deploy the application**: Use a platform like Vercel or Netlify to host the application for public access.

## USER EXPERIENCE
The user journey begins at the hero section, where they are immediately greeted with a fun and inviting interface. They can easily navigate to the interactive tools, with clear instructions and engaging animations leading them through the process. Each feature provides instant feedback, enhancing enjoyment and encouraging sharing, while the minimalist design ensures a focus on content without distractions. Responsive design ensures accessibility across devices, maintaining a seamless experience for all users.