Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
Borges Porcelanas is an e-commerce website designed to sell refined white porcelain items, including dinner sets and individual pieces. The site aims to attract customers looking to decorate their homes with elegant porcelain, providing a seamless shopping experience integrated with Shopify for a complete online store functionality.

## CORE FEATURES
1. **Hero Section**: An eye-catching hero banner showcasing featured porcelain products with a clear call-to-action (CTA) to shop now.
2. **Product Catalog**: A cleanly organized grid layout displaying various porcelain items, with filtering options for dinner sets and individual pieces.
3. **Product Details Page**: Each product will have its own detailed page with high-quality images, descriptions, pricing, and an “Add to Cart” button.
4. **Custom Orders**: An option for customers to customize their porcelain pieces, allowing them to select designs, engravings, and other personalized features.
5. **Shopping Cart & Checkout**: A straightforward cart interface that leads to a Shopify-integrated checkout process, ensuring secure transactions.
6. **Contact Section**: A simple contact form for inquiries or custom requests, along with social media links for customer engagement.

## 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 prominent hero section, a product catalog displayed 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**: React Context API for managing cart state and user preferences

## IMPLEMENTATION STEPS
1. **Set Up Project**: Initialize a new React project with TypeScript and Tailwind CSS.
2. **Install Dependencies**: Add necessary libraries, including shadcn/ui for UI components and Shopify's API for e-commerce functionality.
3. **Create Components**:
   - Develop the Header component with navigation links.
   - Build the Hero section with a large background image and CTA.
   - Design Product Card components to display items in the catalog.
   - Create a Product Detail page with dynamic routing based on product ID.
4. **Integrate Shopify**: Set up Shopify integration to handle product data and checkout process.
5. **Implement Custom Order Feature**: Create a form for users to submit their custom orders, ensuring all inputs are validated.
6. **Set Up the Shopping Cart**: Use the React Context API to manage cart state and display items in the cart.
7. **Develop the Contact Section**: Build a simple contact form that submits inquiries via email or a third-party service.

## USER EXPERIENCE
The user journey begins on the landing page, where they are greeted by a visually appealing hero section. From there, users can easily browse through the product catalog, view detailed product information, and add items to their cart. The checkout process is streamlined through Shopify, ensuring a secure and efficient transaction. Additionally, users can reach out for custom orders or inquiries via the contact form, enhancing customer support and engagement. The minimalist design and responsive layout ensure an optimal experience across devices.