Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
This project aims to create a web application that serves as a catalog to showcase your company and products to clients. The app will support multiple languages, including Spanish, Catalan, English, and German, providing an accessible platform for a diverse customer base.

## CORE FEATURES
1. **Product Listings**: Display a comprehensive catalog of products with images, descriptions, and specifications.
2. **Multi-language Support**: Enable users to switch between Spanish, Catalan, English, and German seamlessly.
3. **Search Functionality**: Allow users to search for specific products easily via a search bar.
4. **Contact Form**: Provide a simple form for inquiries and feedback, integrating with your business email.
5. **About Us Section**: Present information about the company, including its mission, vision, and values.
6. **Responsive Design**: Ensure the application is fully responsive, providing an optimal viewing experience across 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 consist of a top navigation bar, a hero section featuring the company’s tagline and a call-to-action button, followed by product listings in a grid format. The footer will include contact information and social media links.

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

## IMPLEMENTATION STEPS
1. Set up a new React project with TypeScript using Create React App.
2. Install Tailwind CSS and configure it to work with the project.
3. Create the main layout components: Header, Hero, ProductList, AboutUs, and Footer.
4. Implement language switching functionality using React Context API.
5. Style the components using Tailwind CSS with the specified design specifications.
6. Populate the ProductList component with product data, ensuring it is dynamically rendered.
7. Create a responsive layout that adjusts for mobile and desktop views.
8. Implement the contact form and ensure it integrates with your preferred email service for inquiries.

## USER EXPERIENCE
Users will land on a clean, visually appealing homepage featuring the company’s branding and a clear call-to-action. They can effortlessly navigate through product listings, utilize the search bar to find specific items, and switch languages as needed. The contact form will be easily accessible, encouraging user engagement and feedback. Overall, the app will prioritize a smooth and intuitive user journey, enhancing interaction with your brand.