Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
This application is a web app designed to create interactive video content that showcases the features and functionalities of an application in a full horizontal format. Users will be able to click through various elements in the video, simulating real app interactions while delivering informative commentary on each part of the application.

## CORE FEATURES
1. **Interactive Video Playback**: Users can interact with the video by clicking on various app elements, which will provide feedback or additional information.
2. **Full Horizontal Display**: The video is optimized for horizontal viewing, ensuring that all app features are displayed effectively within the frame.
3. **Overlay Text Descriptions**: Informative text overlays will guide users through the app features, providing context and enhancing understanding.
4. **User Engagement Metrics**: Track user interactions and engagement levels during the video playback to gather insights for further improvements.
5. **Responsive Design**: The application will be fully responsive, ensuring a seamless experience on various devices, particularly focusing on desktop and tablet views.

## 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 feature a top navigation bar, a large video display area for the interactive content, and sections for text descriptions and user engagement metrics below the video.

## TECHNICAL REQUIREMENTS
- **Framework**: React with TypeScript
- **Styling**: Tailwind CSS
- **UI Components**: shadcn/ui
- **State Management**: React context or Redux (if needed for tracking user interactions)

## IMPLEMENTATION STEPS
1. **Set Up Development Environment**: Initialize a new React project with TypeScript and install necessary dependencies like Tailwind CSS and shadcn/ui.
2. **Design the Layout**: Create a responsive layout using Tailwind CSS based on the design specifications, ensuring the video area is prominent.
3. **Implement Video Functionality**: Integrate a video player that supports interactive elements, allowing clicks to trigger responses.
4. **Add Text Overlays**: Develop a component for displaying text descriptions that overlay on the video at relevant times.
5. **Implement User Metrics Tracking**: Set up analytics to capture user interactions with the video elements.
6. **Test Responsiveness**: Ensure the application is fully responsive across different devices and screen sizes. Make adjustments as necessary.
7. **Deploy**: Prepare the application for deployment, ensuring all features work seamlessly before going live.

## USER EXPERIENCE
Users will embark on an engaging journey as they watch the interactive video. They can click on various app elements, which will trigger informative overlays that explain the functionality and provide context. The intuitive design and clear navigation will enhance the overall user experience, making it easy for viewers to engage with the content and understand the app's features effectively. The responsive design ensures that users have a consistent experience whether they are on a desktop or tablet, maintaining the focus on the app’s functionalities.