Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
Create a modern landing page for "Chef Zuidhorn," a cafeteria that focuses on providing a professional design and mobile-friendly interface for customers to order food and contact the establishment. The website aims to deliver an engaging user experience that emphasizes quick ordering and showcases popular menu items, enhancing customer interaction.

## CORE FEATURES
1. **Hero Section**: A prominent hero section showcasing the text "Lekker en snel eten in Zuidhorn" with an eye-catching background image of food and a clear "Bestel nu" button linking to the ordering page.
2. **Popular Dishes Showcase**: A section displaying enticing images and descriptions of popular menu items such as Broodje Beenham, Patat Shoarma, and Milkshakes.
3. **Work with Us Page**: A dedicated area providing information about job opportunities at Chef Zuidhorn, including a submission form for applicants to upload their CV and contact details.
4. **Menu Overview**: A simplified menu section categorizing items into Patat, Snacks, and Dranken, featuring images and a prominent ordering button.
5. **Contact Information**: A section with integrated Google Maps, displaying the address, phone number, email, and social media links to facilitate easy customer outreach.
6. **Customer Reviews**: A space dedicated to showcasing customer ratings and testimonials, aimed at building trust and encouraging new customer engagement.

## 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 include a clear header, followed by a hero section, a showcase of popular dishes, work opportunities, menu, contact information, and customer reviews, ensuring smooth navigation and cohesive flow.

## TECHNICAL REQUIREMENTS
- **Framework**: React with TypeScript.
- **Styling**: Tailwind CSS.
- **UI Components**: shadcn/ui.
- **State Management**: Consider using React Context or Zustand if needed for managing form states.

## IMPLEMENTATION STEPS
1. **Set Up Project**: Initialize a new React project using Create React App with TypeScript.
2. **Install Dependencies**: Install Tailwind CSS and shadcn/ui for styling and UI components.
3. **Create Components**: Develop separate components for the header, hero section, popular dishes, work opportunities, menu, contact information, and reviews.
4. **Implement Routing**: Use React Router to manage navigation between sections if needed, primarily focusing on a single-page layout.
5. **Design Layout**: Create a responsive layout using Tailwind CSS classes, emphasizing a mobile-first design.
6. **Add Forms**: Implement the job application form with validation and submission handling to send data to the specified email.
7. **Integrate Google Maps**: Utilize Google Maps API to embed the location of Chef Zuidhorn in the contact section.
8. **Optimize Performance**: Ensure fast loading times by optimizing images and reducing unnecessary scripts.

## USER EXPERIENCE
Users will arrive at a visually appealing hero section with a strong call-to-action to order food. They can easily scroll down to view popular dishes and navigate to the work opportunities section to apply. The menu will be straightforward, allowing customers to quickly find their desired items. The contact section will provide all necessary information for reaching out, with social media links facilitating further engagement. The overall experience prioritizes simplicity and efficiency in ordering food online.