Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
This project is a premium landing page for New's Coffee, designed to showcase a coffee and snacking venue in Roubaix. The primary goal is to increase online orders via Uber Eats and customer calls, targeting local clients, students, and coffee enthusiasts aged 18-40. 

## CORE FEATURES
- **Immersive Single Page:** A visually captivating single-page layout with modern animations to engage visitors.
- **Interactive Menu:** Categories for breakfast, meals, burgers, and drinks, allowing users to easily navigate through options.
- **Main CTA Button:** Prominently displayed "Commander sur Uber Eats" button encouraging users to place their orders.
- **Call Button:** Direct "Appeler" button for quick customer inquiries and orders over the phone.
- **Customer Reviews Section:** A dedicated area showcasing customer testimonials to build trust and encourage new visitors.
- **Operating Hours and Location:** An integrated Google Maps section displaying the café's hours and location with automatic open/closed detection.

## 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 feature a hero section, followed by the interactive menu, customer reviews, and contact information, all designed to maintain a cohesive and elegant flow.

## TECHNICAL REQUIREMENTS
- **Framework:** React with TypeScript.
- **Styling:** Tailwind CSS.
- **UI Components:** shadcn/ui.
- **State Management:** Not specified; consider using React Context for global state if needed.

## IMPLEMENTATION STEPS
1. **Set Up Project Environment:**
   - Initialize a new React project with TypeScript.
   - Install Tailwind CSS and configure it for the project.
   - Install necessary UI components from shadcn/ui.

2. **Create Layout Structure:**
   - Develop the layout with a hero section at the top, followed by the interactive menu, testimonials, and contact details.
   - Ensure responsiveness by using Tailwind’s utility classes.

3. **Implement Key Features:**
   - Create an interactive menu with categories that can be filtered or selected.
   - Add a sticky CTA button for Uber Eats that remains visible as users scroll.
   - Integrate Google Maps for location and operating hours, with functionality to detect open/closed status.

4. **Add Animations:**
   - Implement smooth animations using Framer Motion for the page elements, including scroll-triggered animations and hover effects.

5. **Testing and Optimization:**
   - Conduct user testing to ensure smooth navigation and functionality.
   - Optimize loading times and responsiveness across various devices.

## USER EXPERIENCE
Visitors will be greeted with a stunning hero section that captures the essence of New's Coffee. As they scroll down, they'll encounter an interactive menu that entices them with various offerings. The CTA buttons for Uber Eats and calling will be easily accessible, ensuring a seamless ordering experience. Customer reviews will provide social proof, while the Google Maps integration will help users find the café effortlessly. The entire experience will be designed to feel premium, warm, and inviting, encouraging users to engage further and make orders.