Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
This application is a high-end web app designed as a sleek, minimalist menu website. Its main purpose is to provide users with an elegant and straightforward interface to view menu options and contact information. The focus is on a clean landing page that enhances user engagement through simplicity and usability.

## CORE FEATURES
1. **Menu Display**: A visually appealing section showcasing the available menu options, organized in a clear and concise manner.
2. **Contact Us**: A straightforward contact form that allows users to reach out for inquiries, reservations, or feedback.
3. **About Us**: A brief section providing information about the establishment, enhancing the connection with potential customers.
4. **Reservation Link**: A call-to-action button leading users to a reservation system or third-party booking service.
5. **Responsive Design**: Optimized for various devices, ensuring a seamless experience on desktops, tablets, and mobile phones.

## DESIGN SPECIFICATIONS
- **Visual Style**: Minimalist design featuring ample white space, a clean layout, and a focus on typography to promote legibility and a premium feel.
- **Color Mode**: Light theme with dark text on light backgrounds, creating a soft contrast that is easy on the eyes.
- **Layout**: 
  - A full-width header with a centered logo and navigation links.
  - A hero section with a large, inviting image or simple graphic representing the brand.
  - Below the hero section, a grid or list display for the menu options.
  - A footer containing contact information, social media links, and the contact form.
- **Typography**: 
  - Primary Font: Sans-serif font (e.g., Helvetica or Arial) for clarity.
  - Font Sizes: 
    - Large headings (h1, h2) for titles.
    - Body text with a comfortable reading size (e.g., 16px) for descriptions.
    - Consistent line spacing for improved readability.

## TECHNICAL REQUIREMENTS
- **Framework**: React with TypeScript for type safety and component-based architecture.
- **Styling**: Tailwind CSS for utility-first styling and responsive design.
- **UI Components**: Utilize shadcn/ui for pre-designed components that fit the minimalist aesthetic.
- **State Management**: Context API or a lightweight state management library if needed for managing app state.

## IMPLEMENTATION STEPS
1. **Set Up the Project**: Initialize a new React project with TypeScript and install Tailwind CSS.
2. **Create Core Components**:
   - Develop the Header component with navigation links (Menu, Contact Us, About Us, Reservation).
   - Design the Hero section with a prominent image or graphic.
   - Build the Menu component to display menu items using a grid or list format.
   - Implement the Contact Us form with input fields for name, email, and message.
   - Create the Footer component for additional links and contact information.
3. **Apply Styling**: Use Tailwind CSS classes to implement the minimalist design, ensuring ample white space and a clean layout.
4. **Add Responsive Design**: Utilize Tailwind’s responsive utilities to ensure the app functions well on various devices.
5. **Implement Navigation**: Set up routing for navigation between the menu and contact sections.
6. **Test the Application**: Conduct thorough testing to ensure functionality across different devices and browsers.

## USER EXPERIENCE
The user journey starts from the landing page, where they are welcomed by a striking hero section. Users can easily navigate through the menu options, with a simple click leading them to detailed descriptions. The contact form is intuitive, allowing for quick inquiries. The overall design promotes exploration, with minimal distractions, ensuring that users can focus on the content presented. Responsive design ensures that the experience is consistent, regardless of the device used.