Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
This project involves creating a web application focused on enhancing the visual details of product pages and user accounts, particularly for mobile users, to improve conversions and reduce visual clutter. The application will feature a minimalist design to provide a clean and user-friendly experience.

## CORE FEATURES
1. **Responsive Product Detail Pages**: Showcase product images, descriptions, and specifications in a clear and organized manner to facilitate user decisions.
2. **User Account Management**: Allow users to view and edit their account information seamlessly, ensuring a straightforward interaction process.
3. **Search Functionality**: Enable users to quickly find products or account details through a simplified search interface.
4. **Mobile Optimization**: Design all components to be fully responsive, ensuring an optimal experience on mobile devices.
5. **Conversion-Focused CTAs**: Strategically place call-to-action buttons throughout the application to guide users towards purchase or account actions.

## 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 top navigation bar, a hero section for featured products, product detail sections, and a user account area, all organized vertically for easy scrolling on mobile devices.

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

## IMPLEMENTATION STEPS
1. **Set up the React project**: Initialize a new React application using Create React App with TypeScript.
2. **Install required dependencies**: Add Tailwind CSS and shadcn/ui by following their installation guides.
3. **Create the main layout structure**: Develop the layout with a header, main content area, and footer, ensuring responsiveness using Tailwind CSS classes.
4. **Design product detail components**: Create reusable components for displaying product information, ensuring they adhere to the minimalist design principles.
5. **Implement user account features**: Develop user account management components, allowing for profile viewing and editing.
6. **Add search functionality**: Integrate a simple search bar to filter products based on user input.
7. **Test responsiveness**: Ensure all components are fully responsive, especially on mobile devices, and adjust styles as necessary.
8. **Deploy the application**: Use a hosting service like Vercel or Netlify for deployment.

## USER EXPERIENCE
Users will interact with the application through a clean interface where they can easily navigate between product details and their account settings. The responsive design allows for smooth transitions on mobile devices, with clearly defined buttons and CTAs guiding them towards making purchases or managing their accounts. The minimalist aesthetic reduces distractions, enhancing focus on the products and account features.