Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
The project is a landing page for Agropecuária e Pet Shop Zanquim, designed to showcase their pet shop offerings. The site will serve as a quick and practical product showcase, allowing users to easily navigate the available products and learn about the services offered by the pet shop. The design will feature playful animal paw prints in the background, creating an engaging and thematic user experience.

## CORE FEATURES
1. **Hero Section**: A prominent header with a captivating image and tagline that introduces Agropecuária e Pet Shop Zanquim, along with a call-to-action (CTA) button directing users to view products.
2. **Product Showcase**: A visually appealing display of products with images, descriptions, and prices, allowing users to easily browse offerings.
3. **Quick Add/Remove Functionality**: An intuitive user interface for quickly adding or removing products, enhancing the user experience.
4. **Testimonials Section**: A section dedicated to customer reviews and testimonials to build trust and credibility with potential customers.
5. **Contact Information**: A simple contact form or details for users to reach out for inquiries, ensuring easy communication with the business.

## 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 layout will follow a single-column format, emphasizing vertical scrolling. Each section will be clearly defined with adequate spacing, featuring full-width images for the hero and product showcase, and a grid layout for product listings.

## TECHNICAL REQUIREMENTS
- **Framework**: React with TypeScript
- **Styling**: Tailwind CSS
- **UI Components**: shadcn/ui
- **State Management**: Use React's context API or a state management library like Redux if needed for product management.

## IMPLEMENTATION STEPS
1. **Set Up the Project**: Initialize a new React project using Create React App with TypeScript.
2. **Install Dependencies**: Add Tailwind CSS and shadcn/ui for styling components.
3. **Create Main Components**:
   - Build the Hero Section with a background image featuring the brand colors.
   - Develop the Product Showcase component with a grid layout for displaying products.
   - Implement the Testimonials Section to feature customer feedback.
   - Create the Contact Information section with a simple form.
4. **Style Components**: Use Tailwind CSS classes to apply the specified design specifications, ensuring a minimalist aesthetic.
5. **Implement Add/Remove Functionality**: Use React state to manage the product list and allow for quick modifications.
6. **Test Responsiveness**: Ensure all components are responsive and adjust gracefully across various devices.

## USER EXPERIENCE
The user journey begins at the hero section, where they are greeted with a welcoming message and a visual representation of the brand. Users can smoothly scroll down to explore the product showcase, where they can view and interact with products. Testimonials will provide social proof, encouraging visitors to trust the brand. The contact section will be easily accessible for inquiries, promoting further engagement with potential customers. Overall, the design will prioritize simplicity and ease of navigation, ensuring a pleasant experience for users.