Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
Create a comprehensive, fully responsive landing page for **Grub Monkeys New BEL Road Diner**, a burger joint in Bengaluru. This landing page will channel the essence of 1960s American diner culture while adhering to the minimalist design principles of the Swiss International Typographic Style. The objective is to capture attention, convey information effectively, and encourage users to engage through a clear call-to-action.

## CORE FEATURES
1. **Hero Section**: An eye-catching, full-viewport hero area with bold typography and a clear introduction to the diner.
2. **Menu Showcase**: A visually appealing display of menu items with descriptions and pricing, allowing users to explore offerings easily.
3. **About Section**: A narrative-driven section detailing the diner's story, enhancing the emotional connection with visitors.
4. **Gallery**: A film strip-style gallery showcasing images of the diner and its food, providing a visual taste of the experience.
5. **Contact Information**: Clear location, hours of operation, and contact details to facilitate easy customer engagement.
6. **Call to Action (CTA)**: Prominent buttons encouraging users to order online or view the full menu.

## 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 structured grid system, with sections clearly defined by horizontal rules and background patterns. The hero section will dominate the top, followed by the menu, about, gallery, and contact sections.

## TECHNICAL REQUIREMENTS
- **Framework**: React with TypeScript.
- **Styling**: Tailwind CSS.
- **UI Components**: shadcn/ui.
- **State Management**: Not required for a static landing page but can be implemented if necessary for future dynamic features.

## IMPLEMENTATION STEPS
1. **Set Up Project**: Initialize a new React project with TypeScript and install Tailwind CSS along with shadcn/ui.
2. **Create Layout Structure**: Define the main layout with a grid system in Tailwind CSS, ensuring each section adheres to the design specifications.
3. **Implement Hero Section**: Create the hero section with bold typography using Inter font. Add background patterns and implement call-to-action buttons.
4. **Build Menu Section**: Develop the menu showcase with cards that include pricing and descriptions, ensuring the layout remains consistent with the grid system.
5. **Design About Section**: Write the narrative for the diner and format it using the specified typography styles.
6. **Develop Gallery Section**: Implement a horizontal scrolling gallery that showcases images of the diner, using CSS for transitions and hover effects.
7. **Add Contact Section**: Include clear information on how to visit or contact the diner, with clickable elements styled accordingly.
8. **Optimize for Responsiveness**: Ensure the entire landing page is mobile-friendly and looks great on all screen sizes by testing and adjusting breakpoints as necessary.
9. **Accessibility Compliance**: Integrate accessibility features, such as focus states and keyboard navigability, to enhance user experience for all visitors.

## USER EXPERIENCE
Visitors will land on a visually striking hero section that immediately conveys the essence of Grub Monkeys. They can easily navigate through the menu, explore the diner's story, and view enticing images of the food. Each section will flow seamlessly, with clear calls to action that guide users to order or learn more. The minimalist design will ensure that the content is easy to digest, making the experience enjoyable and engaging.