> ## 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.

# Introduction

# Booking Process

Transform searches into confirmed bookings with our streamlined three-step process. Each step uses a dedicated component on its own page for a focused, conversion-optimized experience.

<Note>
  ⚡ **Quick Overview:** 3 steps • 3 pages • 3 components • Zero distractions
</Note>

## How It Works

<Steps>
  <Step title="Search">
    Guest uses `<finder>` to check availability
  </Step>

  <Step title="Book">
    Complete the 3-step booking flow
  </Step>

  <Step title="Confirm">
    Receive instant booking confirmation
  </Step>
</Steps>

## The Booking Flow

<CardGroup cols={3}>
  <Card title="1. Room Selection" icon="bed" color="#0ea5e9" href="/booking-process/booking-rooms">
    Browse and choose from available rooms
  </Card>

  <Card title="2. Checkout" icon="credit-card" color="#10b981" href="/booking-process/booking-checkout">
    Enter guest details and payment
  </Card>

  <Card title="3. Confirmation" icon="thumbs-up" color="#8b5cf6" href="/booking-process/booking-confirmation">
    View booking details and reference
  </Card>
</CardGroup>

## Technical Setup

| Step | Page URL                |   Component  | Purpose                 |
| :--: | ----------------------- | :----------: | ----------------------- |
|  1️⃣ | `/booking-rooms`        |   `<rates>`  | Display available rooms |
|  2️⃣ | `/booking-checkout`     | `<checkout>` | Process payment         |
|  3️⃣ | `/booking-confirmation` |  `<booking>` | Show confirmation       |

<Warning>
  💡 **Best Practice:** Keep each page dedicated to its component only. No headers, footers, or additional content that might distract from conversion.
</Warning>

***

<Info>
  **Ready to start?** → [Set up Room Selection](/booking-process/booking-rooms)
</Info>