Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
This project involves creating a sleek landing page for Odd Cafe, a coffee shop located in Makati. The primary goal is to provide essential information about the cafe, including its menu, reviews, location, and hours of operation, while maintaining a minimalist aesthetic that emphasizes user experience and visual appeal.

## CORE FEATURES
1. **Hero Section**: A visually striking hero section showcasing the cafe's branding, inviting visitors to explore more.
2. **Menu Display**: An interactive menu that highlights popular items with brief descriptions and appealing images.
3. **Reviews Section**: A section displaying customer reviews and ratings to build trust and showcase the cafe's reputation.
4. **Location Map**: An embedded map feature that provides directions to the cafe.
5. **Contact Information**: Clear and accessible contact details, including hours of operation and social media links.
6. **Call-to-Action (CTA)**: Strategically placed buttons encouraging visitors to visit the cafe or explore the menu further.

## 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**: A single-page layout with sections for the hero, menu, reviews, location, and contact information arranged vertically for easy navigation.

## TECHNICAL REQUIREMENTS
- **Framework**: React with TypeScript
- **Styling**: Tailwind CSS
- **UI Components**: shadcn/ui
- **State Management**: Not necessary for this landing page, but consider using Context API for any stateful components if needed.

## IMPLEMENTATION STEPS
1. **Set Up Project**: Initialize a new React project with TypeScript and install Tailwind CSS.
2. **Create Layout Components**: Build reusable components for the hero section, menu items, reviews, map, and contact.
3. **Implement Navigation**: Add smooth scrolling navigation links to each section for a seamless user experience.
4. **Style Components**: Apply Tailwind CSS classes to achieve the minimalist design as per the specifications.
5. **Integrate Maps**: Use a mapping library (e.g., Google Maps API) to embed the location of Odd Cafe.
6. **Test Responsiveness**: Ensure the design is fully responsive across different devices and screen sizes.
7. **Deploy**: Deploy the landing page using a suitable platform like Vercel or Netlify.

## USER EXPERIENCE
Key user interactions will include scrolling through sections to learn about the cafe, clicking on menu items for more details, viewing customer reviews, and using the embedded map to find directions. The CTA buttons will encourage further engagement, enhancing the overall experience and driving foot traffic to Odd Cafe. The minimalist design will ensure that users can easily find the information they need without distraction.