Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
Lyacafeshop is a modern and responsive landing page for a cozy café, designed to attract customers with its aesthetic, minimalist approach. It serves as an online presence for the café, showcasing its menu, inviting users to place orders via WhatsApp, and providing essential information about the café.

## CORE FEATURES
1. **Header/Navbar**: A clean navigation bar featuring the café logo and menu options (Home, Menu, About, Contact).
2. **Hero Section**: A welcoming message with a subtitle that invites users to enjoy delicious coffee and food, accompanied by a prominent call-to-action button to order via WhatsApp.
3. **Menu Cafe**: Display of five main menu items in card format, including images, names, and prices for easy browsing.
4. **About Section**: A brief description highlighting Lyacafeshop as a cozy place for relaxing, studying, and socializing.
5. **Contact Section**: Information about the café's address, opening hours, and an active WhatsApp button for easy communication.
6. **Footer**: Contains copyright information and links to social media profiles.

## 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 main layout consists of a top navigation bar, followed by a hero section, a menu section displaying items in cards, an about section, a contact section, and a footer.

## TECHNICAL REQUIREMENTS
- **Framework**: React with TypeScript.
- **Styling**: Tailwind CSS.
- **UI Components**: shadcn/ui.
- **State Management**: Not specified, but can be integrated as needed.

## IMPLEMENTATION STEPS
1. **Setup Project**: Initialize a new React project with TypeScript and install Tailwind CSS.
2. **Create Layout Components**: Develop reusable components for the header, hero section, menu items (cards), about section, contact section, and footer.
3. **Implement Navigation**: Set up routing for the navigation menu to scroll to respective sections on the page.
4. **Design Hero Section**: Style the hero section with welcoming text and a call-to-action button, linking it to the WhatsApp integration.
5. **Develop Menu Section**: Create cards for each menu item using Tailwind CSS, ensuring responsiveness and clear pricing.
6. **Build About Section**: Add a short description of the café, emphasizing its cozy atmosphere.
7. **Setup Contact Information**: Include a contact section with address, opening hours, and a WhatsApp button linking to the specified number.
8. **Implement Footer**: Add copyright details and social media links.
9. **Add Animations**: Implement simple fade-in animations for various sections to enhance user engagement.
10. **Testing and Optimization**: Ensure mobile-friendliness and test across devices for responsiveness.

## USER EXPERIENCE
Users will land on a clean and inviting page where they can easily navigate through the café's offerings. The hero section captures attention, leading them to explore the menu. The clear call-to-action facilitates immediate ordering through WhatsApp. The overall design prioritizes user interactions with a focus on simplicity and ease of access to information, ensuring a smooth and enjoyable experience.