Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
This project is a landing page focused on selling music-related products to businesses. It will serve as a marketing site with essential sections like home, store, support, and about us, designed to provide a seamless user experience and encourage conversions through a clean, minimalist aesthetic.

## CORE FEATURES
1. **Hero Section**: A visually appealing introduction that captures the essence of the brand and highlights key products or services.
2. **Product Store**: A section displaying available music products with images, descriptions, and pricing, allowing users to easily browse and select items.
3. **Shopping Cart**: An integrated cart functionality for users to add, remove, and review items before purchase.
4. **Support Section**: A dedicated area for customer inquiries and support resources, including FAQs and contact forms.
5. **About Us**: A brief overview of the company, its mission, and values to build trust and rapport with potential customers.
6. **Call-to-Action (CTA)**: Strategically placed CTAs throughout the page to encourage users to shop or contact the company.

## 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 layout should be structured with a prominent hero section at the top, followed by the product store, support section, and about us, all easily navigable through a fixed header.

## TECHNICAL REQUIREMENTS
- **Framework**: React with TypeScript
- **Styling**: Tailwind CSS
- **UI Components**: shadcn/ui
- **State Management**: Use React's Context API for managing cart state.

## IMPLEMENTATION STEPS
1. **Set Up Project**: Initialize a new React project with TypeScript and install Tailwind CSS and shadcn/ui.
2. **Create Layout Components**: Develop the main layout components including Header, Footer, and Main Content Area.
3. **Design Hero Section**: Implement the hero section using Tailwind CSS for styling, ensuring it adheres to the minimalist design principles.
4. **Build Product Store**: Create a dynamic product list that fetches product data and displays it within the store section.
5. **Implement Shopping Cart**: Develop the cart functionality, including add/remove item features and a summary view.
6. **Set Up Support and About Us Sections**: Create the support and about us sections with appropriate content and forms.
7. **Integrate Call-to-Action Buttons**: Ensure CTAs are strategically placed and function correctly, linking to relevant sections.
8. **Test Responsiveness**: Conduct thorough testing to ensure a responsive design across various device sizes.

## USER EXPERIENCE
Users will interact with a clean and intuitive interface. They will be greeted by a captivating hero section, easily browse products in the store, and can add items to their cart seamlessly. The support section will provide quick access to assistance, while the about us page will foster trust. Clear navigation and prominent CTAs will guide users towards making purchases with minimal friction, ensuring an enjoyable shopping experience.