Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
WikiCards is a web application designed for users to collect cards based on randomly generated Wikipedia articles. Users can open virtual card packs that reveal artistic cards focused on the theme of pointillism, enhancing their knowledge of art history while enjoying an interactive experience.

## CORE FEATURES
1. **Card Pack Opening**: Users can open card packs that contain 3 to 6 cards, revealed through an engaging animation.
2. **Thematic Collection**: Cards are categorized by art themes, allowing users to collect and organize them in a digital album.
3. **Interactive Animations**: Each card reveal includes an interactive animation to enhance user engagement.
4. **Digital Album**: Users can view and manage their collected cards in a themed digital album.
5. **Search Functionality**: Users can search and filter cards based on different criteria, such as theme or artist.
6. **User Profiles**: Users create profiles to track their collections and progress.

## 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 central card opening area, a sidebar for navigation to the digital album and search functionality, and a top header for user profile access.

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

## IMPLEMENTATION STEPS
1. **Set Up Development Environment**: Initialize a new React project with TypeScript and install Tailwind CSS.
2. **Create Project Structure**: Organize components, pages, and assets directories.
3. **Develop Core Components**:
   - Card component to display individual cards.
   - Pack component for opening card packs with animation.
   - Album component for displaying collected cards.
4. **Implement Routing**: Use React Router to navigate between the main interface and the digital album.
5. **Add State Management**: Set up Redux for managing user profiles and card collections.
6. **Create Animations**: Use CSS or a library like Framer Motion for card opening animations.
7. **Integrate API**: Fetch data from Wikipedia to populate cards (consider caching for performance).
8. **Design UI with Tailwind CSS**: Apply minimalist design principles with Tailwind classes.
9. **Testing**: Conduct user testing to refine interactions and ensure responsiveness.

## USER EXPERIENCE
Upon launching the application, users will be greeted with a visually appealing home screen featuring a prominent card pack opening button. When clicked, an animation will play, revealing the cards. Users can navigate to their digital album to view collected cards and can use the search functionality to explore different themes. The layout will be responsive, ensuring a seamless experience across devices. Users will have profiles to track their collections and engage with the app regularly.