Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
The "Extensivo 1.0" web application is a minimalist, interactive platform that requires users to log in with a key for access. The application allows the admin to generate time-limited keys (1 day, 7 days, 30 days) for clients, providing access to various features. It is designed to be engaging with a focus on real-time functionality, leveraging cloud capabilities to ensure that keys are activated instantly upon creation.

## CORE FEATURES
1. **User Authentication**: A secure login screen that requires users to enter their unique key to access the application.
2. **Key Management**: Admin functionality to create and manage access keys with different expiration durations (1 day, 7 days, 30 days).
3. **Real-time Updates**: All interactions, including key validation and feature access, occur in real-time, enhancing user experience.
4. **Feature Activation**: Users can activate specific features depending on their access level, controlled by the keys they possess.
5. **Dopamine-Driven Animations**: Engaging animations and effects that create a dynamic experience, encouraging user interaction.
6. **Purchase Flow**: A seamless process for users to purchase new keys once their current key expires.

## 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**: A clean, single-column layout with a prominent login screen at the top, followed by a dashboard that displays available features and a purchase button for new keys.

## TECHNICAL REQUIREMENTS
- **Framework**: React with TypeScript.
- **Styling**: Tailwind CSS.
- **UI Components**: shadcn/ui.
- **State Management**: React Context API or Redux (as needed).

## IMPLEMENTATION STEPS
1. **Set Up Project**: Initialize a new React project using Create React App with TypeScript.
2. **Install Dependencies**: Add Tailwind CSS and shadcn/ui components to the project.
3. **Create Login Component**: Develop a user-friendly login form that takes the key as input.
4. **Implement Key Management**: Build admin functionalities to generate and manage keys, using cloud functions for real-time updates.
5. **Develop Feature Dashboard**: Create a dashboard that displays available features based on user access.
6. **Add Animation and Effects**: Integrate animations for buttons and interactions to enhance user engagement.
7. **Testing**: Conduct thorough testing to ensure real-time functionalities work correctly and the user experience is seamless.

## USER EXPERIENCE
Users will start by accessing the login screen where they input their unique key. Successful login will redirect them to their personalized dashboard, showcasing the features they can access. Admins will have a dedicated interface to manage keys, ensuring that the process of generating new keys is instantaneous. Throughout the application, visually appealing animations and effects will enhance interactions, keeping users engaged and satisfied with their experience.