Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
This project is a web application designed to provide a comprehensive resource for microphone configurations (e.g., HyperX, Razer) and mixers (e.g., GoXLR, Voicemeeter). It serves as a hub for users to explore, share, and access information related to audio equipment, aiming to create a moddish experience that is engaging and easy to navigate.

## CORE FEATURES
1. **Product Configurator**: Users can select their microphone or mixer and view recommended settings, compatibility information, and user reviews.
2. **Resource Library**: A collection of articles, videos, and guides related to audio setups, optimization, and troubleshooting.
3. **User Community Forum**: A space for users to discuss their setups, share tips, and ask questions.
4. **Comparison Tool**: Users can compare different microphones and mixers side-by-side to help decide which equipment suits their needs best.
5. **Featured Resources**: Highlighted articles or videos that provide valuable insights or updates in the audio equipment space.

## 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 structure will include a hero section at the top, followed by a features section, community forum highlights, resource library, and a call-to-action at the bottom.

## TECHNICAL REQUIREMENTS
- **Framework**: React with TypeScript.
- **Styling**: Tailwind CSS.
- **UI Components**: shadcn/ui.
- **State Management**: React Context API for handling global state.

## IMPLEMENTATION STEPS
1. **Set Up the Project**: Create a new React application using Create React App with TypeScript template.
2. **Install Dependencies**: Add Tailwind CSS and shadcn/ui to the project.
3. **Design the Layout**: Create the main layout structure with a responsive design using Tailwind CSS utility classes.
4. **Implement Core Features**: Begin developing the Product Configurator, Resource Library, User Community Forum, and Comparison Tool components.
5. **Set Up State Management**: Utilize React Context API to manage state for user preferences and configurations.
6. **Create API Integrations**: If necessary, integrate any external APIs for product information and user-generated content.
7. **Test Across Devices**: Ensure the app is responsive and functional across various devices and screen sizes.
8. **Deploy the Application**: Use platforms like Vercel or Netlify for deployment.

## USER EXPERIENCE
Users will land on a clean, minimalist homepage where they can easily navigate through various sections. The hero section will introduce the application, while the Product Configurator will allow users to quickly find information on their chosen equipment. The Resource Library and Community Forum will offer valuable insights and foster interaction among users. A straightforward navigation bar will enhance accessibility, while consistent design elements will provide a cohesive user experience throughout the application.