Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
This project is a landing page designed for selling vegetables, inspired by a clean and minimalist aesthetic reminiscent of Apple's ecosystem. The website will feature a user-friendly interface that emphasizes simplicity, allowing users to easily navigate through various vegetable offerings and filters, all while maintaining a visually appealing layout.

## CORE FEATURES
1. **Hero Section**: A visually striking introduction showcasing fresh vegetables with a clear call-to-action button for users to explore products.
2. **Product Listings**: A grid layout displaying various vegetables with images, descriptions, and prices.
3. **Filters**: Interactive filters to help users sort vegetables by categories, freshness, and pricing.
4. **About Us Section**: Brief information about the brand, its mission, and the sourcing of vegetables to establish trust with customers.
5. **Contact Form**: A simple contact form allowing users to reach out for inquiries or feedback.
6. **Testimonials**: Section displaying customer reviews to build credibility and encourage new customers.

## 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 consists of a full-width hero section at the top, followed by a grid layout for product listings, filters on the side, and separate sections for About Us, Testimonials, and Contact Form.

## TECHNICAL REQUIREMENTS
- **Framework**: React with TypeScript.
- **Styling**: Tailwind CSS.
- **UI Components**: shadcn/ui.
- **State Management**: Not specified, but consider using React Context API for managing state if necessary.

## IMPLEMENTATION STEPS
1. **Set Up the Project**: Initialize a new React project using Create React App with TypeScript.
2. **Install Dependencies**: Install Tailwind CSS and shadcn/ui for styling.
3. **Create Components**:
   - Build the Hero section component with a background image and call-to-action button.
   - Create a ProductList component to display the grid of vegetable items.
   - Develop a Filter component that allows users to select different categories.
   - Add About Us and Testimonials sections as separate components.
   - Implement a Contact Form using controlled components for easier data handling.
4. **Styling**: Use Tailwind CSS for styling components according to the design specifications.
5. **Responsive Design**: Ensure the layout adapts well on various devices, using Tailwind's responsive utilities.
6. **Testing**: Conduct user testing to gather feedback and make adjustments as needed.

## USER EXPERIENCE
Users will land on a clean, visually appealing hero section that immediately presents the brand's offerings. They can quickly navigate through the product listings, utilizing filters to refine their search. The About Us section builds a narrative around the brand, while testimonials enhance trust. The contact form is straightforward, allowing for easy communication. The overall experience focuses on simplicity, ensuring users can find and purchase vegetables with minimal friction.