Lovable Prompt Creator - AI Prompt Generator

PROJECT SETUP
Initialize a new React project with TypeScript. Use Create React App or Vite for setup. The project structure should follow a modular approach, organizing components, assets, and utility functions effectively. Suggested file organization:

```
/src
  /components
    /AdminPanel
    /Blog
    /Product
    /Header
    /Footer
  /pages
    /Home
    /ProductDetail
    /BlogDetail
  /hooks
  /context
  /utils
  /styles
  App.tsx
  index.tsx
```

DESIGN REQUIREMENTS
- 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

CORE COMPONENTS
1. **Header**: Navigation bar with links to Home, Blog, and Admin Panel. Includes language switcher.
2. **Footer**: Contains copyright information and links to privacy policy and terms of service.
3. **ProductCard**: Displays individual product information, including title, price, and a button to purchase.
4. **BlogPost**: Renders individual blog articles with titles, content, and SEO details.
5. **AdminPanel**: Interface for managing products and translations, including forms for product entry and SEO optimization.
6. **LanguageSwitcher**: Component to toggle between available languages.

IMPLEMENTATION APPROACH
1. **Setup Project**: 
   - Run `npx create-react-app my-app --template typescript` or use Vite.
   - Install Tailwind CSS and set it up following the official documentation.
   - Install shadcn/ui for UI components.

2. **Create Components**: 
   - Develop reusable components for Header, Footer, ProductCard, and BlogPost.
   - Example for ProductCard:

```tsx
import React from 'react';

interface ProductCardProps {
  title: string;
  price: string;
  onPurchase: () => void;
}

const ProductCard: React.FC<ProductCardProps> = ({ title, price, onPurchase }) => {
  return (
    <div className="border rounded-8 bg-white shadow-md p-4">
      <h2 className="font-bold text-lg">{title}</h2>
      <p className="text-gray-700">{price}</p>
      <button className="bg-[#1978E5] text-white rounded-8 px-4 py-2" onClick={onPurchase}>
        Purchase
      </button>
    </div>
  );
};

export default ProductCard;
```

3. **Implement Routing**: 
   - Use React Router to set up routes for Home, ProductDetail, and BlogDetail pages.

4. **Design Admin Panel**: 
   - Create forms for adding/editing products and managing translations.

5. **Integrate Multilingual Support**: 
   - Use i18next with react-i18next for handling translations.

6. **SEO Configurations**: 
   - Implement React Helmet to manage meta tags based on content.

7. **Testing**: 
   - Write unit tests for components and integration tests for user flows using libraries like Jest and React Testing Library.

ARCHITECTURE CONSIDERATIONS
- Use a component-based architecture to promote reusability and maintainability.
- Implement state management using Context API or Redux to handle user sessions, product listings, and language preferences.

ERROR HANDLING
- Implement error boundaries for React components to catch JavaScript errors in the component tree.
- Provide user feedback for failed actions, such as product purchases or form submissions.

TESTING STRATEGY
- Write unit tests for each component using Jest and React Testing Library.
- Perform end-to-end testing using Cypress to ensure the application functions correctly across various user scenarios.

This prompt provides a detailed framework for building the web application, ensuring adherence to best practices and clear implementation steps suitable for Cursor.