Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
This project involves creating a minimalist landing page for a music website. The main purpose is to showcase music content, engage visitors with featured tracks and artists, and encourage them to explore more through clear calls to action.

## CORE FEATURES
1. **Hero Section**: A prominent feature at the top of the page showcasing a catchy tagline and a call-to-action button that invites users to listen to the latest music or explore the site.
2. **Featured Music**: A section that highlights popular tracks or albums with album covers, artist names, and direct links to listen or purchase.
3. **About Section**: A brief overview of the website’s mission, focusing on music discovery and community engagement.
4. **Testimonials**: A section displaying quotes or feedback from users or artists who have benefited from the site, enhancing credibility.
5. **Contact Information**: Easy access for users to reach out for collaborations, inquiries, or feedback through a simple contact form.

## 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 that flows vertically, with sections stacked one after the other—hero, featured music, about, testimonials, and contact.

## TECHNICAL REQUIREMENTS
- **Framework**: React with TypeScript
- **Styling**: Tailwind CSS
- **UI Components**: shadcn/ui
- **State Management**: Not necessary for a simple landing page, but could be included for future enhancements.

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

2. **Create the Layout**:
   - Implement a responsive layout structure using Tailwind CSS classes.
   - Ensure that the layout adapts well to different screen sizes.

3. **Add Components**:
   - Develop the Hero section with a background image or color, catchy tagline, and call-to-action button styled with the primary color.
   - Create the Featured Music section, utilizing cards to display tracks and albums.
   - Write the About section with a brief description and style it with the specified typography.
   - Integrate the Testimonials section, using a simple carousel or grid layout.
   - Implement the Contact section with a form that captures user inquiries.

4. **Styling**:
   - Use Tailwind CSS to apply the specified colors, typography, and border radius across all components.
   - Ensure consistency in spacing and alignment throughout the design.

5. **Testing and Optimization**:
   - Test responsiveness on various devices and browsers.
   - Optimize images and assets for faster load times.

## USER EXPERIENCE
Users will first encounter an engaging hero section that captures their attention, followed by a seamless transition into featured music that encourages exploration. The about section provides context, while testimonials build trust. Finally, the contact form allows for user engagement, ensuring a smooth and inviting user experience throughout the landing page.