Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
The project is a web application designed as a webshop that allows users to sell websites in the Dutch language. The platform will provide a user-friendly interface for potential customers to browse, select, and purchase website templates or services.

## CORE FEATURES
1. **Homepage**: A visually appealing landing section that highlights the unique selling points of the webshop, showcasing featured websites and promotions.
2. **Product Listings**: A catalog of available websites with filtering options (e.g., categories, price range) to help users easily find what they're looking for.
3. **Product Details Page**: A dedicated page for each website, providing detailed descriptions, features, previews, and customer reviews.
4. **Shopping Cart**: Users can add multiple websites to their cart, view their selections, and proceed to checkout seamlessly.
5. **Checkout Process**: A secure and straightforward checkout process that includes payment options and user registration (if necessary).
6. **Contact & Support**: A section for users to reach out with inquiries and support requests, enhancing customer service.

## 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 should feature a top navigation bar, a hero section with a prominent call to action, followed by product listings in a grid format, and a footer with contact information and links.

## TECHNICAL REQUIREMENTS
- **Framework**: React with TypeScript
- **Styling**: Tailwind CSS
- **UI Components**: shadcn/ui
- **State Management**: Redux or Context API for managing cart state (as needed)

## IMPLEMENTATION STEPS
1. **Set Up Project**: Initialize a new React project with TypeScript using Create React App or another preferred setup.
2. **Install Dependencies**: Install Tailwind CSS, shadcn/ui components, and any state management libraries (e.g., Redux).
3. **Design Structure**: Create components for the Header, Footer, Product Listings, Product Details, and Shopping Cart using Tailwind CSS for styling.
4. **Implement Routing**: Set up React Router to handle navigation between the homepage, product listings, product details, and checkout pages.
5. **Develop Core Features**: 
   - Populate the product listings with sample data.
   - Set up the shopping cart functionality, allowing users to add or remove products.
   - Create the checkout page with form validation for payment details.
6. **Enhance User Experience**: Implement responsive design using utility classes from Tailwind CSS to ensure compatibility across devices.

## USER EXPERIENCE
Users will start on the homepage, drawn in by the hero section's call to action. They can navigate to product listings, filter options, and view detailed pages for each product. The shopping cart will be accessible from any page, allowing users to review their selections easily. The checkout process will be straightforward, ensuring a smooth transaction experience. Customer support options will be readily available, fostering trust and engagement.