Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
This project is a modern, mobile-first three-page website for a fast-casual dining brand, inspired by a minimalist aesthetic emphasizing high-quality imagery and bold messaging. The primary purpose is to showcase the brand's commitment to real ingredients, local sourcing, and sustainability while providing easy access to the menu and contact information.

## CORE FEATURES
1. **Home Page**: Engaging hero section with a cinematic image and a strong headline to convey the brand's values. Includes a primary CTA button ("Order Now") and a secondary button ("Explore Menu").
2. **Value Proposition Section**: A three-column layout highlighting key values: "Sustainability," "Local Farms," and "Fresh Daily," with compelling visuals and concise text.
3. **Menu Grid Page**: A grid layout displaying food categories (Burritos, Bowls, Tacos, Salads) with interactive "Food Cards" that feature high-resolution images, calorie counts, and a hover effect revealing a "Customize" button.
4. **Filter Toggle**: An interactive filter at the top of the menu page to sort items by dietary preferences (e.g., Vegan, High Protein, Under 600 Cal).
5. **Contact & Locations Page**: A split-screen layout with a "Store Finder" search bar on one side and a sleek contact form on the other for inquiries.
6. **Universal Footer**: A consistent footer across all pages containing social media links (Instagram, TikTok), a rewards program link, and copyright information.

## DESIGN SPECIFICATIONS
- **Visual Style**: Minimalist - Emphasizes clean, simple design with ample white space, a limited color palette, and a focus on typography.
- **Color Mode**: Light theme with dark text on light backgrounds, using Deep Crimson (#A81612), Off-White/Parchment (#F9F7F2), and Charcoal (#1A1A1A).
- **Layout**: 
  - **Home Page**: Hero section at the top, followed by the Value Proposition in three columns.
  - **Menu Page**: Grid layout for food categories, with filter options at the top.
  - **Contact Page**: Split-screen with search functionality on the left and a contact form on the right.
- **Typography**: Use a modern sans-serif font for headings and body text. Ensure clear hierarchy with larger font sizes for headings and consistent spacing.

## TECHNICAL REQUIREMENTS
- **Framework**: React with TypeScript
- **Styling**: Tailwind CSS for responsive design and utility-first styling.
- **UI Components**: Utilize shadcn/ui for buttons and input components.
- **State Management**: Consider using React Context or a state management library if needed for managing state across components.

## IMPLEMENTATION STEPS
1. **Set Up the Project**: Initialize a new React project with TypeScript and install Tailwind CSS and shadcn/ui.
2. **Create Home Page**: Build the hero section with a background image, headline text, and CTAs. Implement the Value Proposition section.
3. **Develop Menu Page**: Create the grid layout for food categories and implement the Food Card component with hover effects and calorie counts.
4. **Implement Filter Functionality**: Add the filter toggle to allow users to sort menu items based on dietary preferences.
5. **Design Contact & Locations Page**: Build the split-screen layout with a store finder search bar and a contact form.
6. **Add Universal Footer**: Create a footer component that includes social media links and a rewards program link, ensuring it appears on all pages.
7. **Responsive Design Testing**: Ensure all components are fully responsive and test across different devices and screen sizes.

## USER EXPERIENCE
Key user interactions include clicking the "Order Now" button to initiate the ordering process, exploring the menu through the grid layout, and using the filter toggle to customize their dining choices. The contact form provides a straightforward way for users to reach out for inquiries or feedback, enhancing overall engagement with the brand. The minimalist design and high-quality imagery create a delightful browsing experience that aligns with the brand's values.