Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
This project is an interactive procrastination web application designed to engage users and help them overcome procrastination through unique design and AI coaching. The app features an inviting interface with a prominent call-to-action button and a premium offering for users seeking more comprehensive guidance.

## CORE FEATURES
1. **AI Coach**: Positioned above the "EMPEZAR AHORA" button, the AI coach provides users with tips and motivation to start their tasks.
2. **Premium Notification**: A small, elegant text stating "⚡ Próximamente en versión premium" is included alongside the AI coach to inform users of upcoming premium features.
3. **Fixed Sales Banner**: At the bottom of the page, a persistent banner with a light gray background encourages users to explore a full anti-procrastination guide with a clear call-to-action button.
4. **Guided Experience**: Users can start their journey with an intuitive onboarding process that introduces them to the app's features and how to use them effectively.
5. **Responsive Design**: The application adapts seamlessly to various screen sizes, ensuring a consistent user experience 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 features a hero section with the AI coach and call-to-action button, followed by a sales banner fixed at the bottom, ensuring visibility while users scroll through the content.

## TECHNICAL REQUIREMENTS
- **Framework**: React with TypeScript.
- **Styling**: Tailwind CSS.
- **UI Components**: shadcn/ui.
- **State Management**: Redux or Context API for managing user states if needed.

## IMPLEMENTATION STEPS
1. **Set Up Project**: Initialize a new React project with TypeScript using Create React App.
2. **Install Dependencies**: Add Tailwind CSS and any necessary UI component libraries (shadcn/ui).
3. **Structure Layout**: Create the main layout with a hero section and fixed sales banner using Tailwind’s utility classes for styling.
4. **Implement AI Coach Component**: Develop the AI coach component that includes the motivational text and premium notification.
5. **Add Call-to-Action Button**: Implement the "EMPEZAR AHORA" button and link it to the starting experience of the app.
6. **Create Sales Banner**: Design and implement the fixed sales banner with a link to the anti-procrastination guide URL.
7. **Make It Responsive**: Ensure the application is responsive using Tailwind’s responsive utilities.
8. **Test Functionality**: Conduct thorough testing of the app across various devices and browsers to ensure a seamless user experience.

## USER EXPERIENCE
Users will be greeted by a clean and minimalist interface where they can easily locate the AI coach and the "EMPEZAR AHORA" button. As they scroll, the fixed sales banner will remain visible, prompting them to explore further. The overall experience will focus on user engagement and encouragement, utilizing the AI coach to keep users motivated and informed about premium offerings. The intuitive layout and clear calls-to-action will guide users seamlessly through their journey to overcome procrastination.