Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
The project is a web application focused on creating visually stunning team standings widgets for a sports website. The application will feature around 20 unique widgets, each designed to display team standings in an interactive and engaging manner, utilizing bright colors, bold animations, and AI-era visual effects.

## CORE FEATURES
1. **Dynamic Team Standings**: Display real-time updates of team rankings, utilizing APIs to fetch and present data dynamically.
2. **Widget Customization**: Allow users to customize widget appearances, such as colors and layouts, to fit their website’s theme.
3. **Animation Effects**: Incorporate bold animations for transitions and updates to enhance user engagement with the standings.
4. **Responsive Design**: Ensure all widgets are mobile-friendly and maintain functionality across different device sizes.
5. **Analytics Dashboard**: Provide insights on user interactions with the widgets, helping website owners understand engagement levels.
6. **User Feedback System**: Enable users to submit feedback on widget performance and suggestions for improvements.

## 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 grid system for widget placement, with a header for navigation and a footer for additional links and information.

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

## IMPLEMENTATION STEPS
1. **Set Up Project**: Initialize a new React project with TypeScript and install necessary packages including Tailwind CSS and shadcn/ui.
2. **Create Widget Components**: Design and create individual widget components for displaying team standings, utilizing props for customization.
3. **Implement Dynamic Data Fetching**: Set up API calls to fetch real-time standings data and integrate it into the widget components.
4. **Add Animation Effects**: Use CSS animations and React Transition Group to add engaging transition effects on data updates.
5. **Design Responsive Layout**: Utilize Tailwind CSS to ensure that all widgets are responsive and adapt to various screen sizes.
6. **Develop Analytics Dashboard**: Create a simple dashboard to display analytics regarding widget usage and user interactions.
7. **User Feedback Feature**: Implement a form for users to submit feedback, and store responses in a simple backend or service.

## USER EXPERIENCE
Users will interact with the widgets by customizing their appearance via an intuitive interface. The real-time updates will keep users engaged, while the animations will provide a visual appeal. The analytics dashboard will help website owners understand how users interact with the widgets, and the feedback system will allow for continuous improvement based on user suggestions. The overall experience will focus on simplicity and ease of use, ensuring that users can quickly find the information they need.