Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
The application is a web app designed for CENTRAL LLANTERA, a tire workshop management system. Its main purpose is to provide an organized platform for tracking tire brands, sizes, and locations within the workshop. Users will be able to upload images of tire labels, find tire details through a search function, and manage inventory efficiently.

## CORE FEATURES
1. **Tire Inventory Management**: Users can add, edit, and manage tire entries including brand, size, location, and images of tire labels.
2. **Search Functionality**: A powerful search bar that allows users to filter tires by brand and size, displaying relevant results quickly.
3. **Brand Sections**: Each tire brand (e.g., Goodride, Goodyear, Sumitomo) will have a dedicated section that expands with a visual effect when clicked, showcasing available tire models.
4. **Responsive Design**: The application will be fully responsive, ensuring accessibility on various devices without the need for mobile data.
5. **Dark/Light Mode Toggle**: Users can switch between dark and light themes, which will save their preferences for future visits.
6. **Detailed Tire View**: Upon selecting a tire, users can view detailed information including brand, size, image of the label, and its exact location in the workshop.

## 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**: A grid layout for displaying tire brands, with expandable sections for each brand that reveal the respective tire models. A sidebar for navigation and a search bar prominently featured at the top.

## TECHNICAL REQUIREMENTS
- **Framework**: React with TypeScript
- **Styling**: Tailwind CSS
- **UI Components**: shadcn/ui
- **State Management**: React Context API or Redux for managing application state if necessary.

## IMPLEMENTATION STEPS
1. **Set Up Project**: Initialize a new React project with TypeScript and install necessary dependencies including Tailwind CSS and shadcn/ui.
2. **Create Main Components**: Develop components for the header (search bar), footer, brand sections, tire cards, and detailed view modal.
3. **Implement Routing**: Use React Router for managing navigation between the main dashboard and detailed views.
4. **Set Up State Management**: Implement state management to handle tire data and user preferences for light/dark mode.
5. **Design UI**: Apply Tailwind CSS for styling components as per design specifications, ensuring responsiveness.
6. **Integrate Functionality**: Add functionality for adding/editing tires, search functionality, and toggle for theme switching.
7. **Testing**: Conduct thorough testing to ensure all features work as intended across different devices and screen sizes.
8. **Deployment**: Deploy the application on a suitable hosting platform, ensuring accessibility without the need for mobile data.

## USER EXPERIENCE
Users will start on the main dashboard where they can see a grid of tire brands. By clicking on a brand, they can expand to see available models with a smooth animation. The search functionality allows users to filter tires quickly. Each tire card will display essential details, and clicking on it will open a detailed view in a modal. Users can easily toggle between light and dark themes, enhancing their experience based on preference. The minimalist design ensures that users focus on the content without distractions.