Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
This project is a web application designed as a showcase for semi-jewelry products. The main purpose is to present the jewelry catalog in a user-friendly manner, allowing customers to browse through different categories of pieces without displaying pricing information.

## CORE FEATURES
1. **Product Categories**: Display categories of semi-jewelry similar to those on the reference site, allowing users to easily navigate through different types of products.
2. **Product Gallery**: A visually appealing gallery that showcases images of the jewelry pieces with detailed descriptions for each item.
3. **Search Functionality**: Enable users to search for specific products or categories to enhance the browsing experience.
4. **Responsive Design**: Ensure the application is fully responsive, providing a seamless experience across devices (desktop, tablet, mobile).
5. **User-Friendly Interface**: A clean and intuitive interface that emphasizes ease of use and accessibility.
6. **Image Zoom Feature**: Allow users to click on product images to view larger versions, enhancing the visual experience.

## 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 for categories, a hero section displaying featured products, followed by a grid layout for the product gallery.

## TECHNICAL REQUIREMENTS
- **Framework**: React with TypeScript
- **Styling**: Tailwind CSS
- **UI Components**: shadcn/ui
- **State Management**: React Context API or Zustand (if required for state management)

## IMPLEMENTATION STEPS
1. **Setup Environment**: Initialize a new React project with TypeScript and install required dependencies (React, Tailwind CSS, shadcn/ui).
2. **Create Layout Components**: Develop the main layout components including Navbar, Hero Section, and Product Gallery.
3. **Implement Routing**: If needed, set up routing for product categories using React Router.
4. **Fetch Product Data**: Utilize the data from the provided catalog to populate the product information, ensuring no pricing details are included.
5. **Build Product Gallery**: Create a grid layout for displaying product images and descriptions, incorporating an image zoom feature.
6. **Add Search Functionality**: Implement a search bar to filter products by name or category.
7. **Responsive Design**: Test and optimize the application for various screen sizes to ensure a responsive user experience.
8. **Final Testing**: Conduct thorough testing to ensure all features work correctly and the app is user-friendly.

## USER EXPERIENCE
Users will first encounter a clean landing page with a hero section showcasing featured jewelry pieces. From there, they can navigate through various product categories using the top navigation bar. Each category will lead to a gallery where users can view product images and descriptions. The search functionality will allow for quick access to specific items, while the responsive design ensures that the application is accessible on all devices, providing a seamless shopping experience.