Frontend Website

This document describes the Frontend Website system of the Hotelaro codebase. It covers the structure, theming, customization, and main public-facing features of the website as seen by hotel guests and visitors. This includes the Moonlit theme, the website builder, and the main public pages (such as rooms, restaurant, blog, and activities).

Scope:

The public website and its theming system
The website builder for customizing appearance and content
The structure and code locations for public pages

Not covered here:

Backend administration (see Administration System)
Restaurant/POS system (see Restaurant & POS System)
Booking engine and calendar (see Core Booking System)

Purpose and Scope

The Frontend Website is the public-facing entry point for hotel guests and visitors. It provides:

A customizable, theme-driven website (primarily the "Moonlit" theme)
Public pages for rooms, activities, restaurant, blog, and more
Integration with the booking engine for room search and reservations
A website builder interface for hotel admins to customize content and appearance

System Overview

The Frontend Website is a modular, theme-based system. The main theme is "Moonlit", which provides a set of components and page templates. The website builder allows admins to select layouts, edit content, and adjust theme settings.

Diagram: "Frontend Website High-Level Structure"

Theme System

The theme system is responsible for the look and feel of the public website. The main theme, "Moonlit", is implemented as a set of PHP view components, CSS, and assets.

Theme selection and customization is managed via the website builder.
Theme files are located under inc/themes/frontend/Moonlit/Views/.
CSS and assets are in inc/themes/frontend/Moonlit/assets/ and website_assets/css/style.css.

Key Theme Components

Component Type	Example File Path	Description
Header	components/header/header-1.php	Main navigation and branding
Hero/Banner	components/hero/home/home-1.php	Homepage banner/slider
Footer	components/footer/footer-1.php	Footer area
Room Cards	components/rooms/room-1.php	Room listing cards
Gallery	components/gallery/gallery-1.php	Image gallery section

Diagram: "Theme System and Code Entities"

Website Builder

The Website Builder allows hotel admins to customize the public website without editing code. It provides:

Theme selection (e.g., Moonlit)
Section and component selection (header, hero, about, facilities, etc.)
Content editing (text, images, links)
Color and branding adjustments

Key Features

Sidebar navigation for selecting sections to edit
Collapsible panels for editing section-specific settings
Image upload and preview for logos and banners
Live preview of changes before publishing

Diagram: "Website Builder UI to Code Mapping"

Public Pages

The public website includes several main pages, each implemented as a PHP view under the theme directory. These pages are:

Page Type	Example File Path	Description
Home	Index/index-1.php, Index/index-3.php	Main landing page
About	Pages/about.php	About the hotel
Activities	Pages/activities.php	Activities and experiences
Restaurant	Pages/resturant.php	Restaurant info and gallery
Blog	Pages/blog.php	Blog articles and news
Room Listings	Pages/room-one.php, Pages/room-two.php, etc.	Room types and details
Room Details	Pages/room-details-1.php, Pages/room-details-2.php	Detailed room info

Each page is composed of reusable components (header, hero, sections, footer) and can be customized via the website builder.

Room Search and Booking Integration

The frontend website integrates with the booking engine to allow guests to:

Search for available rooms by date, number of guests, etc.
View room details and amenities
Initiate the booking process

Room search forms and booking widgets are implemented as components and included in room listing and detail pages.

CSS and Styling

Styling for the frontend website is managed through:

website_assets/css/style.css (main theme styles)
assets/css/style.css (shared/global styles)

These files define typography, color schemes, layout, and responsive behavior.

Component and Page Composition

The frontend website is built from modular components, which are included in page templates. For example, the home page (Index/index-1.php) includes:

Header (components/header/header-1.php)
Hero/banner (components/hero/home/home-1.php)
About section (components/about/about-1.php)
Facilities (components/facilities/facilities-1.php)
Room cards (components/rooms/room-1.php)
Testimonials, gallery, footer, etc.

This modular approach allows for easy customization and extension.

Bridging Diagram: "Public Page Names to Code Files"

Summary

The Frontend Website system provides a modular, theme-driven, and customizable public website for hotels using the Hotelaro platform. It is built on reusable PHP components, a flexible website builder, and integrates with the booking engine for real-time room availability and reservations.

For more details on theme customization, see Theme System.

For a breakdown of public pages, see Public Pages.

For website builder internals, see Website Builder.