Lovable Prompt Creator - AI Prompt Generator

# PROMPT FOR LOVABLE

## APPLICATION OVERVIEW
Create a web application for Mikito's Alimentos, an Amazon-based food industry and distributor. The primary purpose of this application is to serve as a fully functional e-commerce platform where customers can easily browse, purchase, and manage food products while reflecting the brand's deep connection to Amazonian culture and values.

## CORE FEATURES
1. **Homepage**: A visually appealing landing page that highlights featured products, promotions, and key brand messages with clear calls to action for user registration and shopping.

2. **Product Catalog**: An organized layout that allows users to filter and search for products by category, with clear images, descriptions, and prices.

3. **Product Detail Page**: A dedicated page for each product that includes high-quality images, details, pricing, and an option to add to the cart.

4. **User Account Management**: A user-friendly portal for customers to create accounts, log in, view past orders, and manage personal information.

5. **Shopping Cart and Checkout**: A streamlined shopping cart experience that allows users to modify cart items, view totals, and complete purchases with multiple payment options.

6. **Recipe Section**: A dedicated area featuring recipes that utilize Mikito's products, encouraging users to purchase ingredients directly through the site.

## DESIGN SPECIFICATIONS
- **Visual Style**: Modern and organic, incorporating elements that reflect the Amazonian aesthetic without resorting to clichés. Use rich, deep greens inspired by the Amazon rainforest, complemented by natural earth tones and vibrant accents that evoke tropical fruits.
  
- **Color Mode**: Light theme with dark text on light backgrounds, ensuring high readability and accessibility. Primary colors include:
  - **Forest Green**: #2E5D34 (for headers, footers, and accents)
  - **Sunshine Yellow**: #FFC107 (for call-to-action buttons and highlights)
  - **Earth Brown**: #8B4513 (for backgrounds and secondary elements)
  - **Off-White**: #F8F8F8 (for main content areas)

- **Layout**: 
  - Header: Fixed navigation bar with logo and search functionality.
  - Main Content: Grid layout for product listings and recipe sections, with ample white space for a clean look.
  - Footer: Includes important links, social media icons, and contact information, with a background that ties in the deep green.

- **Typography**: 
  - **Primary Font**: Montserrat (for headings and calls to action)
  - **Secondary Font**: Open Sans (for body text and product descriptions)
  - Ensure text hierarchy is clear, with larger, bolder fonts for headings and a readable size for body text.

## TECHNICAL REQUIREMENTS
- **Framework**: React with TypeScript
- **Styling**: Tailwind CSS for utility-first styling and responsive design
- **UI Components**: Use shadcn/ui for consistent and accessible UI components
- **State Management**: Utilize React Context API for managing global state across the application

## IMPLEMENTATION STEPS
1. **Set Up Project Environment**:
   - Initialize a new React project with TypeScript using Create React App.
   - Install Tailwind CSS and any necessary dependencies.

2. **Create Folder Structure**:
   - Organize components, pages, and assets such as images and styles.

3. **Implement Core Features**:
   - Build the Header component with logo, search bar, and navigation links.
   - Develop the Homepage component to feature highlighted products and promotional sections.
   - Create the Product Catalog and Product Detail components, ensuring they are responsive and visually appealing.
   - Set up User Account Management features, including login and registration forms.
   - Develop the Shopping Cart and Checkout flow with payment integration.
   - Implement the Recipe Section, linking products to relevant ingredients.

4. **Design and Style Components**:
   - Apply Tailwind CSS classes to all components, following the established design specifications.

5. **Ensure Responsive Design**:
   - Test the application on various screen sizes and devices, making adjustments as necessary.

6. **Conduct User Testing**:
   - Gather feedback from potential users on navigation and overall experience to identify areas for improvement.

## USER EXPERIENCE
The application should provide a seamless experience from the moment users land on the homepage. They should easily navigate through categories, view product details, and complete purchases without confusion. The design should evoke a sense of connection to the Amazon, enhancing the shopping experience with vibrant imagery and meaningful content that reflects local culture. Users should feel confident in their ability to engage with the brand, knowing that Mikito's values quality, authenticity, and a strong connection to the Amazon region.