Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
Create a modern, responsive single-page website for "Chattogram Chinese Hotel" that serves as a digital presence for the hotel, showcasing its features, amenities, and contact information. The website will aim to provide a welcoming and premium experience for potential guests, emphasizing its family-friendly atmosphere and 24/7 availability.

## CORE FEATURES
1. **Hero Section**: A bold headline with a welcoming message, a subtitle emphasizing 24/7 service, and dual CTAs for booking and exploring dining options.
2. **About & Features Section**: Key hotel details highlighting 24/7 availability, high ratings, and a family-friendly environment.
3. **Services/Amenities Cards**: Clean, minimalist cards displaying luxury rooms, in-house dining options, and round-the-clock service.
4. **Contact & Location Info**: Clear display of the hotel address, contact information, and an embedded map, along with an operational status badge.
5. **Sticky Navigation Bar**: Smooth scrolling links to different sections of the page for improved user navigation.
6. **Responsive Design**: Mobile-first layout to ensure accessibility across devices.

## 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 be a single-column format with a sticky navigation bar at the top, followed by a full-width hero section, followed by vertically stacked sections for features, services, and contact information.

## TECHNICAL REQUIREMENTS
- **Framework**: React with TypeScript
- **Styling**: Tailwind CSS
- **UI Components**: shadcn/ui
- **State Management**: Not required for this project as data handling is internal with basic JavaScript placeholders.

## IMPLEMENTATION STEPS
1. **Setup Project**: Initialize a new React project with TypeScript and install Tailwind CSS.
2. **Create Layout Structure**: Build a responsive layout with a sticky navigation bar and sections for Hero, About & Features, Services, and Contact.
3. **Design Hero Section**: Implement the hero section with a headline, a subtitle, and two CTA buttons styled with the primary color and rounded corners.
4. **Add About & Features Section**: Add the description of the hotel detailing key features, utilizing the specified typography and styles.
5. **Create Services/Amenities Cards**: Design minimalist cards for each service/amenity with hover effects and spacing adjustments.
6. **Implement Contact & Location Info**: Include the address, placeholders for phone and email, and a mock Google Map display using a simple iframe.
7. **Responsive Testing**: Ensure the website is fully responsive, testing on various devices and screen sizes.
8. **JavaScript Functionality**: Implement basic JavaScript for form actions and smooth scrolling navigation.

## USER EXPERIENCE
Users will be greeted with a warm and inviting hero section that immediately conveys the hotel's welcoming atmosphere. Navigation will be intuitive with a sticky bar allowing users to easily access different sections. The minimalist design ensures focus on essential information, while responsive layouts guarantee a seamless experience on both desktop and mobile devices. Users can quickly find contact details and service offerings, making it easy to book their stay or explore dining options.