> ## Documentation Index
> Fetch the complete documentation index at: https://directdoc.hotellinkage.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Booking rooms

# Room Selection

Display available rooms and rates for guests to choose from. This is the first step where booking decisions are made.

<Note>
  🏨 **Step 1 of 3** | **Component:** `<rates>` | **URL:** `/booking-rooms`
</Note>

## What Guests See

<CardGroup cols={3}>
  <Card title="Room Gallery" icon="images" color="#0ea5e9">
    Photos and virtual tours of each room type
  </Card>

  <Card title="Rates & Availability" icon="tag" color="#10b981">
    Real-time pricing with available dates
  </Card>

  <Card title="Amenities" icon="star" color="#8b5cf6">
    Features, services, and room details
  </Card>
</CardGroup>

## Basic Implementation

```html theme={null}
<div data-mirai-component="rates"></div>
```

## Complete Page Template

<Accordion title="View full HTML template">
  ```html theme={null}
  <!DOCTYPE html>
  <html>
  <head>
      <title>Select Your Room</title>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <meta name="robots" content="noindex, nofollow" />
      <link rel="stylesheet" href="https://static.mirai.com/core/index.css" type="text/css" media="all" />
  </head>
  <body>
      <div data-mirai-id="YOUR_HOTEL_ID"></div>
      <div data-mirai-component="rates"></div>
      <script type="module" defer src="https://static.mirai.com/core/index.js" 
              data-cookieconsent="necessary"></script>
  </body>
  </html>
  ```
</Accordion>

<Warning>
  ⚠️ **Important:** Use this component on a dedicated page without additional content. Adding headers, footers, or other elements may affect functionality.
</Warning>

## Page Requirements

| Requirement | Value                | Purpose                   |
| ----------- | -------------------- | ------------------------- |
| URL         | `/booking-rooms`     | Standard booking flow URL |
| Meta robots | `noindex, nofollow`  | Prevent search indexing   |
| Viewport    | `width=device-width` | Mobile responsiveness     |
| Component   | `<rates>` only       | Clean, focused experience |

***

<Info>
  **Next Step →** [Proceed to Checkout](/booking-process/booking-checkout)
</Info>
