Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
This project is a premium hotel landing page designed to attract potential guests and showcase the hotel's offerings. The site features a captivating video background and a modern, minimalist aesthetic that emphasizes clean design and user-friendly navigation.

## CORE FEATURES
1. **Hero Section**: A visually striking hero section with an autoplay video background, showcasing the hotel's luxurious environment and compelling branding.
2. **Navigation Bar**: A responsive menu that adapts to different screen sizes, featuring links to key sections such as Start, Story, Rates, Benefits, and FAQ, enhancing user accessibility.
3. **Call-to-Action Buttons**: Prominently displayed buttons ("Discover" and "Book Now") that guide users towards making reservations or learning more about the hotel.
4. **Responsive Design**: A layout that ensures an optimal viewing experience across devices, maintaining functionality and aesthetic appeal on mobile and desktop.
5. **Typography**: Clean typography using the Inter font that enhances readability and aligns with the minimalist design ethos.

## 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 an outer container with a minimum height of the screen, a hero section with a video background, a content wrapper for alignment, and a main content area that centers the hero content and call-to-action buttons.

## TECHNICAL REQUIREMENTS
- **Framework**: React with TypeScript
- **Styling**: Tailwind CSS
- **UI Components**: shadcn/ui
- **State Management**: UseState hook for mobile menu toggle

## IMPLEMENTATION STEPS
1. **Setup Project**: Initialize a new React project with TypeScript and install Tailwind CSS.
2. **Create Hero Section**: Implement the hero section with a video background, ensuring it covers the entire viewport (100vh) and is set to autoplay, muted, and loop.
3. **Build Navigation Bar**: Develop a responsive navigation bar using Tailwind CSS classes, ensuring mobile compatibility with a hamburger menu.
4. **Design Call-to-Action Buttons**: Style the "Discover" and "Book Now" buttons with the specified colors, border radius, and hover effects.
5. **Typography Setup**: Import Inter font from Google Fonts and apply it across the entire application, ensuring proper weight usage.
6. **Responsive Adjustments**: Apply responsive design principles to ensure the layout adapts seamlessly across various screen sizes.

## USER EXPERIENCE
The user experience focuses on smooth interactions with visually appealing elements. Users will be greeted by a stunning video background that immediately immerses them in the hotel's atmosphere. The navigation bar allows users to explore different sections effortlessly, while the call-to-action buttons guide them towards making reservations or discovering more about the hotel's offerings. The clean and modern design ensures that the content is easily digestible, enhancing the overall user experience.