Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
This project will be a web application focused on creating and displaying a collection of 10 modern digital badges representing various civic roles. Each badge will feature intricate designs including shields, wreaths, and banners, with clear central symbols for roles such as "Civico," "Iniziato," "Reporter," and others. The badges will be visually appealing for use on social networks, emphasizing a vibrant and metallic aesthetic with a slight 3D effect.

## CORE FEATURES
1. **Badge Gallery**: A visually engaging display of all 10 digital badges, allowing users to view and select badges for more details.
2. **Role Descriptions**: Each badge will have a dedicated section explaining the significance and role associated with the badge.
3. **Download Options**: Users can download badges in various formats (PNG, SVG) for use on social media.
4. **Share Functionality**: Integrated sharing options for users to easily post badges on their social networks.
5. **Responsive Design**: The application will be fully responsive, ensuring a seamless experience across various devices.

## 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 consist of a hero section featuring the title and introduction to the badges, followed by the badge gallery with grid layout, and a footer with contact information and social media links.

## TECHNICAL REQUIREMENTS
- **Framework**: React with TypeScript
- **Styling**: Tailwind CSS
- **UI Components**: shadcn/ui
- **State Management**: Use React Context API or Zustand for state management as needed.

## IMPLEMENTATION STEPS
1. **Set Up Project**: Initialize a new React project with TypeScript and configure Tailwind CSS.
2. **Create Components**: Develop individual components for the badge gallery, badge cards, and role description sections.
3. **Design Layout**: Implement the overall layout using Tailwind CSS for styling, ensuring responsiveness.
4. **Add Functionality**: Integrate logic for downloading badges and sharing options.
5. **Test Responsiveness**: Verify the application works seamlessly on devices of varying sizes.
6. **Deploy**: Prepare the application for deployment on a suitable platform (e.g., Vercel, Netlify).

## USER EXPERIENCE
Users will experience a clean interface where they can easily navigate through the badge collection. The interactive elements, such as hover effects on badges and clear calls to action for downloading and sharing, will enhance engagement. The application will be optimized for fast loading times and smooth transitions, ensuring a pleasant user journey through the digital badge showcase.