Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
Green Bite is a web application designed to connect urban consumers with fresh microgreens, tackling the issue of nutrient loss in vegetables. The platform focuses on delivering health and convenience by providing easy access to nutrient-rich produce without compromising quality.

## CORE FEATURES
1. **Home Page**: A welcoming introduction to Green Bite, featuring a brief overview of the benefits of microgreens and an engaging visual layout that highlights key messages.
2. **About Us Section**: Information on the mission and vision of Green Bite, emphasizing the importance of nutrition and sustainable practices in urban living.
3. **Microgreens Catalog**: A visually appealing display of available microgreens with high-quality images and descriptions, showcasing their nutritional benefits and uses.
4. **Recipe Ideas**: A curated section offering healthy recipes that incorporate microgreens, encouraging users to experiment and enjoy their flavors.
5. **Educational Resources**: Articles and tips on the health benefits of microgreens and ways to incorporate them into daily meals, fostering a knowledgeable community.
6. **Contact Us Form**: A simple form for users to reach out with inquiries or feedback, enhancing customer engagement.

## DESIGN SPECIFICATIONS
- **Visual Style**: Minimalist design featuring clean lines, ample white space, and a focus on typography to ensure clarity and ease of reading.
- **Color Mode**: A light theme with dark text on light backgrounds to maintain a bright and inviting atmosphere.
- **Layout**: A structured layout with a top navigation bar, a hero section for the home page, followed by content sections that stack vertically for easy scrolling and accessibility on various devices.
- **Typography**: Use a sans-serif font for body text (e.g., Helvetica or Arial) for readability, with larger, bold headings to create a clear hierarchy and guide users through the content.

## TECHNICAL REQUIREMENTS
- **Framework**: React with TypeScript
- **Styling**: Tailwind CSS for rapid and responsive design implementation
- **UI Components**: Utilize shadcn/ui for pre-built components to expedite development
- **State Management**: Implement React's Context API for managing global state (if needed)

## IMPLEMENTATION STEPS
1. **Set Up Project**: Initialize a new React project using Create React App with TypeScript template.
2. **Install Dependencies**: Install Tailwind CSS and shadcn/ui components to streamline styling and UI development.
3. **Create Folder Structure**: Organize components, pages, and assets for easy navigation within the project (e.g., /components, /pages, /assets).
4. **Build Home Page**: Design the home page with the hero section, introducing Green Bite and its mission, using Tailwind CSS for styling.
5. **Develop Core Features**: Create components for the About Us section, Microgreens Catalog, Recipe Ideas, Educational Resources, and Contact Us Form, ensuring each follows the minimalist aesthetic.
6. **Implement Routing**: Use React Router to manage navigation between different sections of the application.
7. **Responsive Design**: Test and adjust styles to ensure the application looks great on various devices with different screen sizes.
8. **Final Testing and Deployment**: Conduct thorough testing for functionality and user experience before deploying the application.

## USER EXPERIENCE
The user experience is designed to be intuitive and engaging. Users will be greeted with a clean and inviting home page that emphasizes the health benefits of microgreens. They can easily navigate through sections to learn more about the products, explore recipes, and access educational content. The contact form will facilitate direct communication, allowing users to provide feedback and inquiries, thereby fostering a sense of community and connection with the brand. Responsive design will ensure that users can enjoy a seamless experience on both desktop and mobile devices.