Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
Refugio de Mascotas is a web application designed to facilitate the adoption of pets by providing a user-friendly interface for browsing available pets. The app serves as a platform where users can easily view and manage pet listings, ensuring a seamless experience for both potential adopters and administrators.

## CORE FEATURES
1. **Pet Listings**: Display a comprehensive list of pets, including their photos, types, names, ages, and availability status (Available or Adopted).
2. **Admin Functionality**: Allow administrators to add new pets to the list, ensuring that the database is up to date and reflects current adoption statuses.
3. **User Accessibility**: Provide a publicly accessible interface that allows all users to view the pet listings without needing an account.
4. **Real-Time Availability**: Maintain and update the availability status of each pet, ensuring users receive the most accurate information regarding adoption options.
5. **Search and Filter Options**: Enable users to search for pets by type, age, or availability to streamline the browsing experience.

## DESIGN SPECIFICATIONS
- **Visual Style**: Minimalist with a clean and simple design that emphasizes white space, allowing the content to stand out. The overall aesthetic should be friendly and welcoming, with vibrant color accents to draw attention to key elements.
- **Color Mode**: A light theme featuring dark text on light backgrounds, enhancing readability and creating a cheerful atmosphere.
- **Layout**: A grid-based layout that showcases pet listings effectively, with ample spacing between items to avoid clutter. Each pet card should be clearly defined, allowing users to quickly scan through options.
- **Typography**: Use a playful, rounded font for headings to convey a fun and approachable vibe, while maintaining a clean sans-serif font for body text to ensure clarity and legibility. Establish a clear hierarchy with larger headings and consistent sizing for body text.

## TECHNICAL REQUIREMENTS
- **Framework**: React with TypeScript for building a dynamic and type-safe application.
- **Styling**: Tailwind CSS for streamlined, utility-first styling that aligns with the minimalist design principles.
- **UI Components**: Utilize shadcn/ui for pre-built components that maintain consistency and quality across the application.
- **State Management**: Consider using React's Context API or a state management library like Redux if complex state management becomes necessary.

## IMPLEMENTATION STEPS
1. **Set Up Project**: Initialize a new React project with TypeScript and install Tailwind CSS and shadcn/ui.
2. **Create Core Components**: Develop components for pet cards, pet list, and admin control panel.
3. **Design Layout**: Implement the grid layout using Tailwind CSS classes for responsive design.
4. **Integrate State Management**: Implement context or state management for handling pet data and availability status.
5. **Build Admin Functionality**: Create a secure area for administrators to add and update pet listings, including form validation.
6. **Test Features**: Conduct thorough testing of all functionalities to ensure a smooth user experience and fix any bugs.
7. **Deploy Application**: Deploy the application to a web server, ensuring it is accessible to users.

## USER EXPERIENCE
The user journey begins with landing on the homepage, where they can see a clean grid of pet listings. Each pet card prominently displays an image, name, type, age, and availability. Users can click on a pet card for more details or utilize the search and filter features to find specific types of pets. The admin can log in to manage listings easily, while the overall design ensures that every interaction is intuitive and engaging, promoting a vibrant community around pet adoption.