Maak een moderne website voor een cafetaria genaamd “Chef Zuidhorn”.
Generated Prompt
## APPLICATION OVERVIEW Create a modern landing page for "Chef Zuidhorn," a cafeteria that emphasizes professional design, mobile-friendliness, and clear customer interaction for ordering food and contacting the establishment. The website will provide an engaging user experience with a focus on quick ordering and showcasing popular menu items. ## CORE FEATURES 1. **Hero Section**: A prominent hero section featuring the text "Lekker en snel eten in Zuidhorn" with a large background image of food and a clear "Bestel nu" button linking to the ordering page. 2. **Popular Dishes Showcase**: A section displaying popular menu items such as Broodje Beenham, Patat Shoarma, and Milkshakes with corresponding images to entice customers. 3. **Work with Us Page**: Information about job opportunities at Chef Zuidhorn, including a submission form for applicants to upload their CV and contact information. 4. **Menu Overview**: A simplified menu section categorizing items like Patat, Snacks, and Dranken, with images and a prominent ordering button. 5. **Contact Information**: A dedicated contact section featuring a Google Maps integration, address, phone number, email, and links to social media profiles for easy customer outreach. 6. **Customer Reviews**: A section showcasing customer ratings and testimonials to build trust and encourage 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 be structured with a clear header, hero section, followed by sections for popular dishes, work opportunities, menu, contact information, and customer reviews, ensuring smooth navigation and a cohesive flow. ## TECHNICAL REQUIREMENTS - **Framework**: React with TypeScript. - **Styling**: Tailwind CSS. - **UI Components**: shadcn/ui. - **State Management**: Not specified, 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, although this is primarily a single-page layout. 5. **Design Layout**: Create a responsive layout using Tailwind CSS classes, focusing on 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 land on a visually appealing hero section with a strong call-to-action to order food. They can scroll down to view popular dishes and easily navigate to the work opportunities section to apply. The menu will be straightforward, allowing customers to quickly find what they want. The contact section will provide all necessary information for reaching out, with social media links facilitating further engagement. The overall experience will prioritize simplicity and efficiency in ordering food online.
Loved by thousands of makers from
From early prototypes to real products, they started here.







































Generate optimized prompts for your vibe coding projects
Generate prompt
Enter a brief description of the app you want to build and get an optimized prompt
Review and use your prompt
Review (and edit if necessary) the generated prompt, then copy it or open it directly in your chosen platform
Get inspired with new ideas
Get AI-generated suggestions to expand your product with features that will surprise your users
Frequently Asked Questions
Everything you need to know about creating better prompts for your Lovable projects
Still have questions?
Can't find what you're looking for? We're here to help!
