Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
This application is a B2B sales platform designed to serve as a portfolio with the functionality to place orders directly within the app. It will house a database of 10 products, allowing businesses to showcase their offerings and facilitate easy transactions.

## CORE FEATURES
1. **Product Portfolio**: A comprehensive display of 10 products, including images, descriptions, and pricing information.
2. **Order Placement**: Users can select products and place orders directly through the application with a streamlined checkout process.
3. **User Authentication**: Secure login for users to manage their profiles and order history.
4. **Contact Form**: A simple form for inquiries or support, allowing users to reach out to the sales team easily.
5. **Responsive Design**: The application will be fully responsive, ensuring an optimal experience on both desktop and mobile devices.

## 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 feature a top navigation bar, a hero section for highlighting the portfolio, a grid display for products, and a footer with contact information.

## TECHNICAL REQUIREMENTS
- Framework: React with TypeScript
- Styling: Tailwind CSS
- UI Components: shadcn/ui
- State Management: React Context API for managing user sessions and product data

## IMPLEMENTATION STEPS
1. **Set up the Development Environment**:
   - Initialize a new React project with TypeScript using Create React App.
   - Install Tailwind CSS and configure it in the project.
   - Add shadcn/ui for UI components.

2. **Create the Main Layout**:
   - Build a responsive navigation bar with links to the home, product portfolio, and contact sections.
   - Design the hero section with a brief introduction and call-to-action (CTA) button leading to the product portfolio.

3. **Develop the Product Portfolio**:
   - Create a Product component to display individual product details.
   - Utilize a state management solution to handle the product data (10 products) and render them in a grid layout.

4. **Implement Order Placement Functionality**:
   - Develop a modal or dedicated page for order placement that collects user data and processes orders.
   - Integrate a simple form for users to fill out when placing an order.

5. **Add User Authentication**:
   - Set up user authentication using context to manage user sessions.
   - Create login and registration components for user access.

6. **Build the Contact Form**:
   - Design and implement a contact form in the footer for user inquiries.
   - Ensure form validation and user feedback upon submission.

7. **Testing and Optimization**:
   - Test the application across different devices and browsers for responsiveness.
   - Optimize performance and ensure accessibility standards are met.

## USER EXPERIENCE
Users will experience a seamless journey from landing on the homepage to browsing the product portfolio and placing orders. The minimalist design focuses on usability, ensuring that users can navigate easily without distractions. The responsive layout adapts to various devices, providing a consistent experience whether on desktop or mobile. The authentication process is straightforward, allowing users to quickly log in or register, enhancing their engagement with the app.