Back to templates

Booking Template Next.js

Booking Template Next.js

Booking Template — Page Structure

Your main pages:

  • Home

  • Destinations

  • Hotels

  • Flights

  • Booking

  • Login

  • Sign Up

Each page uses shared components.

Global Reusable Components (Used Everywhere)

These should be built once.

Layout

  • Navbar (responsive menu, mobile drawer)

  • Footer

  • Container (max width + padding)

  • Section wrapper (spacing)

UI

  • Button (primary, outline)

  • Input

  • Select / dropdown

  • Card

  • Badge

  • Modal

  • Loader / skeleton

These create consistency.

Page Component Breakdown

Home Page

Purpose: marketing + discovery

Components:

  • Hero section

  • Search bar (destination / date / guests)

  • Services grid

  • Featured destinations

  • Booking steps

  • Testimonials

  • Newsletter

Reusable pieces:

  • DestinationCard

  • ServiceCard

  • SectionHeader

Destinations Page

Purpose: explore locations

Components:

  • Filters (country, price, duration)

  • Destination grid

  • Pagination / infinite scroll

  • Map preview (optional)

Reusable:

  • FilterBar

  • DestinationCard

Hotels Page

Purpose: list properties

Components:

  • Search + filters

  • HotelCard list

  • Price range slider

  • Rating filter

  • Sorting

Reusable:

  • ListingCard pattern

  • Filter sidebar

Flights Page

Purpose: search flights

Components:

  • Flight search form

  • Result list

  • Airline badge

  • Time timeline

  • Price comparison

Reusable:

  • SearchForm

  • ResultItem

Booking Page

Purpose: checkout flow

Components:

  • Selected item summary

  • Traveler form

  • Date selection

  • Payment section

  • Booking confirmation

Reusable:

  • Stepper

  • Form sections

  • SummaryCard

Login / Sign Up

Purpose: authentication

Components:

  • Auth form

  • Social login buttons

  • Password input

  • Validation messages

Reusable:

  • AuthCard

  • FormField

Responsive Behavior (Important)

Every major component should support:

  • Mobile stacked layout

  • Tablet grid

  • Desktop multi-column

Examples:

  • Navbar → hamburger menu

  • Filters → drawer on mobile

  • Cards → 1 / 2 / 3 columns

  • Booking → stepper vertical on mobile

Clean Component Philosophy

Separate into layers:

Pages → business flow

Sections → page blocks

UI → reusable primitives

So:

pages/
sections/
components/ui/

This keeps code scalable.

Key Idea

Your booking app is basically:

Discovery → Listing → Details → Booking → Account

Design components around that flow.