Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
This project is a web application designed to create an engaging and interactive experience centered around a powerful football shot featuring a main character in an Argentina jersey. The application aims to showcase a dramatic scene where the character uses his "dragon power" to call upon the football from a team of 11 Brazilian players, enhancing the storytelling through visual and interactive elements.

## CORE FEATURES
1. **Hero Animation**: An engaging introduction with an animated hero section that displays the main character in action, showcasing the "dragon power" as he summons the football.
2. **Character Showcase**: A dedicated section highlighting the main character and his abilities, with animated illustrations and descriptions of his power.
3. **Brazilian Team Interaction**: Interactive elements allowing users to click on each of the 11 Brazilian players, revealing stats or fun facts about them.
4. **Power Meter**: A visual representation of the "dragon power" that fills up as users interact with the application, encouraging engagement and exploration.
5. **Call to Action**: A prominent section encouraging users to share their favorite football moments or join a community, fostering user interaction and community building.

## 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**: A single-column layout for simplicity, with a hero section on top followed by sections for character showcase, Brazilian team interaction, and the power meter, ensuring a clean flow of content.

## TECHNICAL REQUIREMENTS
- **Framework**: React with TypeScript.
- **Styling**: Tailwind CSS.
- **UI Components**: shadcn/ui.
- **State Management**: Redux or Context API for managing the power meter state.

## IMPLEMENTATION STEPS
1. **Set Up the Project**:
   - Initialize a new React project using Create React App with TypeScript.
   - Install Tailwind CSS and configure it for your project.

2. **Create the Layout**:
   - Design the main layout using Tailwind CSS, including a header, hero section, and content sections.
   - Implement a responsive design to ensure usability across devices.

3. **Build Core Features**:
   - Develop the hero animation using CSS animations or a library like Framer Motion.
   - Create the character showcase component with animated illustrations.
   - Implement the interactive Brazilian team section, allowing user interactions.
   - Develop the power meter component with dynamic updates based on user interactions.

4. **Integrate Design Specifications**:
   - Apply the specified typography and color scheme throughout the application.
   - Ensure all buttons, cards, and inputs follow the 8px border radius guideline.

5. **Add Call to Action**:
   - Create a section that encourages user engagement, such as a form for sharing experiences.

6. **Test and Optimize**:
   - Conduct thorough testing to ensure all interactions work smoothly.
   - Optimize for performance and ensure a fast load time.

## USER EXPERIENCE
Users will begin their journey with a captivating hero animation that sets the tone for the application. As they scroll down, they will encounter a visually appealing character showcase that draws them into the narrative. Interactive elements featuring the Brazilian players will keep users engaged, allowing them to explore stats and facts at their leisure. The power meter will provide a gamified experience, encouraging users to interact and discover more about the character's abilities. Finally, the call to action will invite users to share their football stories, creating a sense of community within the app.