Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
This project is a web application designed for 3rd-year ESO students to foster healthy lifestyle habits through a gamified platform. The application features progressive challenges, collectible rewards, and a user-friendly interface, making it engaging and intuitive for adolescents aged 14-15.

## CORE FEATURES
1. **Landing Page**: A dynamic landing page featuring a powerful title, motivational introduction, "Start Challenges" button, and a visual progress bar that encourages users to engage with the platform.

2. **Progressive Challenge System**: A set of 10 challenges that unlock progressively. The first challenge is available at the start, while the others remain visually locked until completed. Each challenge includes a title, description, difficulty, icon, reward, and a completion button.

3. **Collectible Cards System**: Completing challenges unlocks collectible digital cards related to healthy habits. Users can view their collection with card illustrations, names, rarity, motivational descriptions, and health categories.

4. **User Profile**: A personalized user interface displaying the student's name, avatar, level, completed challenges, progress percentage, and card collection statistics.

5. **Visual Aesthetic**: A modern, vibrant design with dark backgrounds or modern gradients, incorporating soft shadows and microanimations to create a lively and youthful vibe.

6. **Gamification Elements**: The application utilizes game mechanics such as progress bars and collectible rewards to maintain motivation and encourage physical activity.

## 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 layout will feature a responsive grid system that organizes content into sections, ensuring clarity and ease of navigation. Cards and buttons will be strategically placed to enhance user interaction and engagement.

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

## IMPLEMENTATION STEPS
1. **Set Up the Project**: Initialize a new React project with TypeScript and install Tailwind CSS and shadcn/ui.
2. **Create Components**: Develop the landing page, challenge system, collectible cards, and user profile components.
3. **Implement Routing**: Use React Router to manage navigation between different sections of the application.
4. **Design User Interface**: Apply Tailwind CSS styles to create a minimalist aesthetic that aligns with the design specifications.
5. **Add State Management**: Implement Redux or Context API to manage the state for challenges, user profiles, and collectible cards.
6. **Test User Interactions**: Ensure that all features, such as unlocking challenges and collecting cards, work as intended and provide a smooth user experience.
7. **Optimize for Responsiveness**: Make sure the layout is responsive and accessible on various devices.

## USER EXPERIENCE
The application will provide a straightforward and engaging experience, allowing students to navigate easily between challenges, track their progress, and view collectible cards. Users will feel a sense of achievement as they complete challenges and unlock new cards, fostering motivation to maintain healthy habits. The design and navigation will cater specifically to the target audience, ensuring a fun and immersive learning environment.