Top class resturant website
Generated Prompt
## APPLICATION OVERVIEW This project is a landing page for a top-class restaurant collection website designed to impress potential customers. The focus is on a clean, minimalist design that showcases the restaurant offerings with organic animations, ensuring that the website feels unique and not AI-generated. The website will serve as a marketing tool to attract and convert visitors into customers. ## CORE FEATURES 1. **Hero Section**: A visually striking hero section featuring high-quality images of the restaurant, accompanied by a captivating tagline and a clear call-to-action (CTA) button. 2. **Menu Showcase**: A dedicated area to display the menu items with appealing visuals and descriptions, allowing users to explore offerings easily. 3. **About Us**: A section that narrates the story of the restaurant, highlighting its unique aspects and values to create a personal connection with visitors. 4. **Testimonials**: A section featuring customer reviews and testimonials to build trust and credibility, encouraging potential customers to visit. 5. **Contact Information**: Clear and accessible contact details, including an embedded Google Map for location and a simple contact form for inquiries. 6. **Newsletter Signup**: A compact form for users to subscribe to updates and promotions, helping to build a customer base. ## 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 should follow a single-column structure with a clear visual hierarchy, utilizing sections for the hero, features, testimonials, and contact information, ensuring easy navigation and readability. ## TECHNICAL REQUIREMENTS - **Framework**: React with TypeScript - **Styling**: Tailwind CSS - **UI Components**: shadcn/ui - **State Management**: Not required for this static landing page ## IMPLEMENTATION STEPS 1. **Setup the Project**: - Initialize a new React project with TypeScript. - Install Tailwind CSS and configure it for the project. - Set up shadcn/ui for UI components. 2. **Create the Main Layout**: - Develop the layout structure using a single-column format. - Implement a responsive design to ensure compatibility across devices. 3. **Build the Hero Section**: - Add a full-width image background with a tagline and CTA button. - Style using Tailwind CSS for spacing and typography. 4. **Design the Menu Showcase**: - Create a grid layout for displaying menu items with images and descriptions. - Ensure the section is visually appealing and easy to navigate. 5. **Develop the About Us Section**: - Write compelling content that reflects the restaurant's identity. - Use engaging typography and spacing for readability. 6. **Add Testimonials**: - Integrate customer testimonials with a carousel or grid layout. - Use visual elements to highlight quotes and customer names. 7. **Implement Contact Information**: - Embed a Google Map for location with contact details and a simple inquiry form. - Style the contact form using Tailwind CSS. 8. **Create the Newsletter Signup**: - Design a simple and effective signup form that captures user emails. - Connect the form to a mailing list service or database. 9. **Finalize Aesthetics**: - Review the entire design for consistency in typography, color, and spacing. - Add subtle animations to enhance user experience without overwhelming. ## USER EXPERIENCE Key interactions will include clicking on the CTA button in the hero section, navigating through the menu showcase, reading testimonials, and filling out the contact form. The minimalist design will ensure that users can easily find information and enjoy a seamless experience. Responsive design will allow for usability across various devices, enhancing engagement and potential conversions.
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!
