Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
Vital Quest is an engaging web application designed for 3rd ESO students, focusing on promoting healthy lifestyle habits through a gamified experience. The platform allows students to complete challenges related to physical activity, nutrition, hydration, and overall well-being, unlocking collectible cards and progressing through levels as they achieve their goals.

## CORE FEATURES
1. **User Profiles**: Create and manage player profiles displaying avatars, levels, XP, completed challenges, and earned badges.
2. **Progress Dashboard**: A visually appealing progress panel showing current level, XP, completed challenges, and overall progress percentage.
3. **Challenge Map**: A dynamic display of 10 progressive challenges, where students can see their next unlocked challenge and its details (title, description, difficulty, icon, reward).
4. **Collectible Cards**: A collection feature showcasing collectible cards that represent healthy habits, each with unique attributes like rarity and motivational descriptions.
5. **Gamified Interface**: Modern, interactive UI elements that create an immersive gaming experience, with visual feedback through animations and hover effects.
6. **Editable Challenges**: An admin feature that allows easy editing and updating of challenges, keeping content fresh and relevant.

## 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 central content area for the dashboard and challenges, and sidebars for additional options or achievements.

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

## IMPLEMENTATION STEPS
1. **Set up the 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 component library.
3. **Create the main structure**: Develop the main components including Header, Dashboard, Challenge Map, and Profile sections.
4. **Implement user profiles**: Create a user profile component that displays avatar, level, XP, and progress.
5. **Design the progress dashboard**: Develop a visually appealing progress dashboard with dynamic updates based on user activity.
6. **Build the challenge map**: Create a grid or pathway layout displaying the challenges, with conditional rendering for unlocked and locked states.
7. **Integrate collectible cards**: Develop a component to showcase collectible cards, ensuring they have unique designs based on rarity.
8. **Add interactivity**: Utilize React state and effects to handle user interactions, such as completing challenges and updating progress.
9. **Test responsiveness**: Ensure that the design is responsive across different devices and resolutions.
10. **Deploy the application**: Choose a hosting platform (like Vercel or Netlify) for deployment.

## USER EXPERIENCE
Users will start on the landing page where they can log in or create an account. Once logged in, they will be greeted by their personalized dashboard displaying their progress. Users can navigate to the challenge map to view and select challenges to complete, check their progress through the dashboard, and manage their collectible cards. The interface will provide a seamless experience with engaging animations and clear visual feedback, encouraging students to complete challenges and adopt healthier habits.

This comprehensive prompt will enable the development of a visually appealing and functionally rich web application that resonates with the target audience of adolescents aged 14-15, aligning with the educational goals of Vital Quest.