Lovable Prompt Creator - AI Prompt Generator

`code``code`## APPLICATION OVERVIEW
Create a high-impact landing page for an innovative tech product: the "SoundMind Pro" AI headphones. This landing page will showcase the product's features, encourage pre-orders, and provide a visually appealing experience that communicates the advanced technology behind the product.

## CORE FEATURES
1. **Hero Section**: A full-width hero section featuring a looping background video showcasing the headphones with a dark overlay that includes a bold title and a prominent call-to-action (CTA) button.
2. **Technical Specifications**: A grid layout (2x3) displaying key technical specifications of the SoundMind Pro headphones to highlight their innovative features.
3. **Competitor Comparison Table**: A clear and concise table comparing SoundMind Pro to its competitors, emphasizing its unique selling points.
4. **Interactive Product Gallery**: An engaging gallery showcasing the headphones from different angles and in various color options, allowing users to explore the product visually.
5. **Technology Section**: An animated section that reveals the advanced technology behind the headphones, using sleek animations to maintain user interest.
6. **Pre-order Form**: A user-friendly pre-order form that includes a color selector and quantity input, making the purchasing process straightforward.
7. **Social Proof Counter**: An animated counter displaying "100k+ pre-orders" to build trust and credibility with potential customers.

## DESIGN SPECIFICATIONS
- **Visual Style**: Minimalist design with a focus on clean lines, ample white space, and limited color palette to enhance readability and focus on product features.
- **Color Mode**: Dark mode by default, with accents in gold (#FFD700) to create a striking contrast and a premium feel.
- **Layout**: The main layout will follow a vertical structure, starting with the hero section, followed by specifications, comparison, gallery, technology, pre-order form, and social proof, ensuring a smooth flow for users.
- **Typography**: Modern, futuristic typography that aligns with the tech theme, utilizing a hierarchy to differentiate headings, subheadings, and body text.

## TECHNICAL REQUIREMENTS
- **Framework**: React with TypeScript for robust and scalable development.
- **Styling**: Tailwind CSS for efficient styling and responsiveness.
- **UI Components**: Utilize shadcn/ui for pre-built components that align with the design specifications.
- **State Management**: Consider using React's Context API or Zustand for managing state if needed for the pre-order form interactions.

## IMPLEMENTATION STEPS
1. **Set Up Project**: Initialize a new React project using Create React App with TypeScript support.
2. **Install Dependencies**: Install Tailwind CSS and shadcn/ui components. Set up Tailwind configuration for dark mode.
3. **Create Hero Section**: Implement the hero section with a video background, dark overlay, title, and CTA using Tailwind classes for styling.
4. **Develop Technical Specifications Section**: Create a 2x3 grid layout for displaying technical specifications, using responsive design techniques.
5. **Build Competitor Comparison Table**: Design and implement a table to compare SoundMind Pro with competitors, ensuring clear and concise information presentation.
6. **Implement Interactive Product Gallery**: Create a gallery component that allows users to click through different angles and color options of the headphones.
7. **Design Technology Section**: Implement animated reveal effects for the technology section, utilizing CSS animations or libraries as needed.
8. **Create Pre-order Form**: Develop a form component that includes color selection and quantity input, integrating validation for a smooth user experience.
9. **Add Social Proof Counter**: Implement the animated counter feature, ensuring it draws attention without being intrusive.

## USER EXPERIENCE
The landing page will provide a seamless journey for visitors, starting from the eye-catching hero section that immediately communicates the product's value. Users will easily navigate through the technical specifications, comparisons, and interactive elements. The pre-order form will be straightforward, enhancing the likelihood of conversions. The animated elements will keep users engaged while the social proof counter will build trust, encouraging them to make a purchase. The responsive design will ensure a great experience across devices.