Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
Create a visually striking landing page for "Shoronpo," a ramen shop with two locations in Sants and Gràcia. The primary purpose of the website is to showcase the restaurant's menu, highlight the ambiance through captivating photos, and facilitate reservations through integration with The Fork.

## CORE FEATURES
1. **Hero Section**: A stunning hero image showcasing the restaurant's interior or signature ramen dish, accompanied by a catchy tagline and a prominent call-to-action (CTA) button for reservations.
2. **Menu Display**: An interactive section that presents the ramen menu with enticing images and descriptions for each dish, allowing users to browse easily.
3. **Gallery**: A visually appealing gallery showcasing high-quality images of the restaurant's ambiance and food, enticing visitors to experience Shoronpo.
4. **Reservation Integration**: A seamless reservation system linked to The Fork, enabling users to book tables directly from the website.
5. **Location Information**: Clear details about both establishments, including addresses, contact information, and embedded Google Maps for easy navigation.
6. **Contact Form**: A simple contact form for inquiries, allowing users to reach out with questions or comments.

## DESIGN SPECIFICATIONS
- **Visual Style**: Minimalist - Clean, simple design with plenty of white space to enhance readability and focus on key elements.
- **Color Mode**: Light theme with dark text on light backgrounds for clarity and visual comfort.
- **Layout**: A single-page layout divided into sections for the hero, menu, gallery, reservation, and contact information, with smooth scrolling for easy navigation.
- **Typography**: Use modern sans-serif fonts for headings (e.g., 'Poppins') and a clean serif font for body text (e.g., 'Merriweather') to create a contemporary yet approachable feel.

## TECHNICAL REQUIREMENTS
- **Framework**: React with TypeScript for a robust and scalable application.
- **Styling**: Tailwind CSS for responsive design and rapid development.
- **UI Components**: Utilize shadcn/ui for pre-built, customizable UI components that align with the minimalist aesthetic.
- **State Management**: Use React Context API to manage state, if necessary, for handling reservations and user interactions.

## IMPLEMENTATION STEPS
1. **Set Up Project**: Create a new React project using Create React App with TypeScript.
2. **Install Dependencies**: Install Tailwind CSS and shadcn/ui components.
3. **Build Layout**: Implement the main layout structure with sections for the hero, menu, gallery, reservations, and contact.
4. **Design Hero Section**: Add a hero image, tagline, and reservation button.
5. **Create Menu Component**: Design a menu component that fetches and displays ramen items with images and descriptions.
6. **Develop Gallery**: Create a gallery section with image thumbnails that expand on click.
7. **Integrate The Fork**: Set up the reservation feature using The Fork's API for seamless booking.
8. **Implement Location and Contact**: Add sections for location information and a contact form.
9. **Responsive Design**: Ensure the website is fully responsive across devices and screen sizes.
10. **Testing and Deployment**: Test the application for usability and bugs, then deploy to a hosting platform.

## USER EXPERIENCE
Visitors will be greeted with a visually stunning hero image that immediately captures the essence of Shoronpo. They can easily navigate the menu, view appetizing images, and quickly make reservations with a few clicks. The layout is designed for intuitive scrolling, ensuring users can find information effortlessly, whether they are on mobile or desktop devices. The contact form provides a straightforward way for users to connect with the restaurant, enhancing overall engagement.