Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
This project involves creating a web application that integrates with Moodle 4.5.10, utilizing the Boost and Boost Union themes. The application will feature interactive icons that trigger modals and provide a link, designed to enhance user engagement and facilitate access to educational resources. The layout will be modern, minimalist, responsive, and user-friendly to ensure an optimal experience on various devices.

## CORE FEATURES
1. **Interactive Icons**: Three icons will be displayed prominently, with the first two opening modals and the third linking to a podcast.
2. **Modals**: Custom modals for "Ruta de aprendizaje" and "Finalización" that provide relevant information when the corresponding icons are clicked.
3. **Responsive Design**: The application will be fully responsive, adapting seamlessly to different screen sizes and devices.
4. **Accessibility**: Icons will feature alternative text for better accessibility, ensuring that users can understand their purpose through screen readers.
5. **Minimalist Aesthetic**: The design will focus on a clean layout with ample white space, enhancing readability and user interaction.

## 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 central header section with an image, followed by a row of horizontally aligned icons, and modals centered on the screen when activated.

## TECHNICAL REQUIREMENTS
- **Framework**: React with TypeScript
- **Styling**: Tailwind CSS
- **UI Components**: shadcn/ui
- **State Management**: React Context API for managing modal states

## IMPLEMENTATION STEPS
1. **Set Up Project**: Initialize a new React project using Create React App with TypeScript template.
2. **Install Dependencies**: Add Tailwind CSS and shadcn/ui for styling and UI components.
3. **Create Components**: Develop functional components for icons, modals, and the main layout.
4. **Implement Modals**: Use state management to control the visibility of modals when icons are clicked.
5. **Style Components**: Apply Tailwind CSS classes to create a minimalist design, ensuring the primary color is used where appropriate.
6. **Ensure Responsiveness**: Test the application across different devices to confirm responsive behavior.
7. **Accessibility Features**: Add alternative text to all icons for accessibility compliance.

## USER EXPERIENCE
Users will interact with the application primarily through the icons displayed. Hovering over the icons will reveal tooltips with descriptive text. Clicking on the first two icons will open modals containing relevant content, while the third icon provides a direct link to the podcast. The overall focus will be on creating an intuitive navigation experience with minimal distractions, allowing users to easily access educational resources.

This prompt outlines the requirements for a functional and aesthetically pleasing web application that aligns with the user's vision for integrating Moodle with a modern interface.