2.1 Technical Requirements

Performance

• all of the pages are interactive in less than 2 seconds
• websites achieve over 80% in all Lighthouse categories

Security

• websites have SSL
• SQL injection is not possible
• used libraries are up-to-date
• spam is prevented on all forms
• email address are not included in html
• all relevant XSS cross-site scripting protection headers are enabled
• production doesn’t include any links to test or staging environment

Browser Support

The sites support the last two versions of major browsers:

• Chrome
• Safari
• Firefox
• Edge

Accessibility

All sites meet WCAG AA standards for accessibility.

2.2 Theming

The frontend is designed to be used by multiple brands. They share the same layouts and components, but each brand has a unique visual theme. The theme defines colors, typography, and border radii that align with the brand’s identity.

All theme and brand-specific values are implemented as CSS variables.

Theme primitives

Brand-specific

Each brand theme is built from a small set of theme-specific primitives:

• Two base colors. Other surface/text/border/overlay colors are derived from these.
• Typography choices. Each theme defines its own font family and font weights.
• Border radius. Each theme defines its own radius scale.

Shared

• Font sizes
• Spacings
• All colors except 2 base colors
• Shadows
• Breakpoints
• Grid system

Colors

Colors are grouped based on purpose into:

• Text on surfaces (backgrounds)
• Text on media (images/videos)
• Surfaces
• Borders
• Overlays

Typography

Only Google Fonts are used to ensure optimal performance and reliability. Each theme defines its own font family and weights, but all themes share the same font size scale.

2.3 Spacing and Sizing

The spacing and sizing system defines consistent space and dimensions across all components and layouts. It uses CSS variables that automatically scale from desktop to mobile, ensuring consistency and responsive behavior across all brands.

Soft Scale

Used for ~90% of spacing needs. Values decrease gradually (linearly) from desktop to mobile.

Primary use: Gaps, margins, paddings, and sizing for icons, badges, and small images.

Hard Scale

Values decrease by half for more dramatic scaling. Used for main section DIVs and specific cases requiring sharper reduction.

Primary use: Section-level spacing and containers.

Variable Scale

Custom scaling for contexts where flex direction changes and spacing needs may vary (increase, decrease, or stay the same).

Primary use: Gaps that transition from horizontal to vertical layouts.

To Zero Scale

Desktop values reduce to zero on mobile to maximize space.

Primary use: Decorative paddings and offsets that can be removed on mobile.

From Zero Scale

Zero on desktop, scales up on mobile (inverse of To Zero Scale).

Primary use: Spacing that’s only needed on mobile devices.

Site-Specific Variables

Certain values are brand-specific (Collegium, Mondial) for grid and navigation spacing:

Site-specific variables:

• --navi-offset: Navigation offset (varies by breakpoint)
• --navi-banner-offset: Navigation offset with announcement banner (varies by breakpoint)

2.4 Internationalization (i18n)

CMT sites styles allows for each site to be multilanguge. The frontent i18n is handled by Hugo, Decap handles CMS translations. Both content and template strings can be translated and edited. user selects the preferred language via a language switcher component. The default language is set in the site config file (hugo.toml).

When enabling i18n for a site, the client defines which language is the default.

2.5 3rd-Party Services

A list of third-party services used across CMT sites, including content management, hosting, media delivery, and analytics.

2.6 Cookies and Data Management

Cookie Consent Management

Consent tool will be chosen by CMT, PM helps with implementation.

Responsibility: Cookie handling and configuration is the client’s responsibility.

Implementation support: The PM team provides technical assistance with chosen tool integration and implementation.

Cookie Sources

PM does not implement any cookies for website development purposes. All cookies on the site originate exclusively from third-party services added by GTM (analytics, marketing tools, embeds, etc.).

Google Tag Manager (GTM)

• PM integrates GTM into the site
• Client provides the GTM container ID

Cloudflare Forms

Form submissions are processed through Cloudflare static forms and stored in Cloudflare’s system. Cloudflare acts as a data processor for all submitted form data.

Client responsibilities:

• Ensure GDPR-compliant data processing agreement with PM

PM responsibility:

• Technical integration
• Manage form submissions via Cloudflare account

Privacy Policy

The client is responsible for maintaining their own privacy policy.

2.7 Creating a New Site

To create a new site, follow these steps:

Client defines these:

• Site name
• Theme primitives (base colors, typography choices, border radius)
• Content structure (types of pages, content fields, etc.)
• domain name
• list of languages and the default language
• define which footer to use

Developer Setup Steps

1. Configuration Files

Add brand to deployment:

• .github/workflows/deploy.yml - Add to BRANDS env var
• README.md - Add URLs and commands
• package.json - Add dev:{brand} and build:{brand} scripts
• bin/build.sh - Add to validation regex + Turbo site ID
• bin/dev.js - Add to allowed sites

Hugo config:

• config/{brand}/hugo.toml - Site config with params, social links, module mounts
• config/{brand}/menus.json - Navigation structure (main, cta, relatedbrands)

CMS config:

• static/admin/config.{brand}.yaml - Decap CMS collections

2. Brand Styling

File: assets/{brand}/styles/_brand-theme.scss

Define CSS variables for:

• Brand colors (primary, secondary with 100/120 variants)
• Accented colors (text, surfaces, borders)
• Font families (display, heading, title, body, label, supporting, button)
• Font weights for each family

3. Content & Data Files

Content:

• content/{brand}/_index.{lang}.md - Homepage for each language

Data files in data/{brand}/:

Translations:

• i18n/{lang}.toml - UI strings for new languages (see existing files for required keys)

4. Static Assets

Directory: static/{brand}/

• favicon.png - Site favicon

5. Decap Turbo

1. Log in to Decap Turbo dashboard
2. Add new site with project name: cmt-{brand}
3. Get the Turbo Site ID from dashboard
4. Add ID to bin/build.sh in resolve_turbo_site_id() function:

   {brand})
     TURBO_SITE_ID="your-turbo-site-id-here"
     ;;
   

6. Cloudflare Deployment

1. Create Pages project: cmt-{brand}
2. Connect to GitHub repository
3. Add required environment variables:
   • HUGO_VERSION (e.g., 0.154.5)
   • NODE_VERSION (e.g., 20)
   • …
4. Disable automatic deployments - we use GitHub Actions for builds instead

Timeline

The deadline for creating a new site is 5 working days since the client provides all necessary inputs defined above. The client must inform the contractor 2 weeks in advance about the intention to create a new site.

2.8 CMS

The project uses Decap CMS as the content management system. We subscribe to Decap Turbo upgrade.

There is no centralized CMS that allows editing multiple sites simultaneously. Each site’s content is managed through its own dedicated CMS interface.

User Roles and Permissions

The CMS implements a role-based access control system with different permission levels:

• Admin - Full access to all collections and CMS settings
• Editor roles - Limited access based on specific collection permissions

Editor roles are configured to allow access only to designated collections, ensuring content editors can modify only the content areas relevant to their responsibilities.

Role definitions and permissions are determined by the PM, Poslovni mediji.

Note: User roles will be configured after all brands included in the first contract are set up and deployed.

SEO

Global settings:

• Favicon
• Site title
• Site title suffix (added to subpages)
• Site description
• Site OG image

Page settings:

• Page title
• Page description
• Slug
• Page image

Page OG settings:

• OG title
• OG description
• OG image

Each setting overrides the corresponding parent setting.

Example: if OG image and Page image fields are not set, Site OG image is displayed for that page i nthe og:image tag. If page image is added, og:image tag is the page image. If field OG image is set, tag og:image displays OG image.

2.9 Forms

Basic forms

They can be constructed via the CMS without the need for developers to set them up.

Fields in basic forms can include:

• Text input
• Email input
• Textarea
• Dropdown of text options
• Checkbox group
• Radio button group

Text paragraphs and headings can be added between fields.

A basic form will include a submit button, a success message, and an error message.

CMS editor will be able to set recipient email addresses for form submissions.

Complex forms

A developer sets up the form and configures strings to be editable in the CMS.

For example: contact form is hardocded and documented on Contact Form page.

Processing form submissions

We have 2 options. Both use Cloudflare Pages Functions for the server-side handler, but they differ in portability and vendor coupling.

Option A: Cloudflare Static Forms Plugin (CF-specific)

What it is: A Pages Plugin that intercepts forms with the data-static-form-name attribute, parses the submission, and calls a respondWith handler in a Function.

Pros:

• Fast setup for basic forms (no custom routing)
• Works well for simple email forwarding
• Officially supported and production-ready (last updated Sep 15, 2025)

Cons:

• Cloudflare-only (not portable to Netlify/Statichost)
• Still requires a Function to send email and handle validation
• Less flexible for future integrations

Best for:

• Simple forms that will stay on Cloudflare Pages

Option B: Custom Function + Brevo API/SMTP (Portable)

What it is: A custom endpoint (e.g. /api/forms/submit) that accepts form posts, validates them, and sends email via Brevo (API or SMTP).

Pros:

• Low vendor lock-in (easy to move to Netlify, Vercel, or a custom server)
• Full control over validation, rate limiting, and spam protection
• Easy to extend for future booking API integration
• Email deliverability and GDPR tooling via Brevo

Cons:

• More setup and maintenance than the plugin
• More expensive if using Brevo API for high volume (SMTP is cheaper but less feature-rich)

Best for:

• Forms that may evolve (auto-response, integrations, advanced logic)
• Minimal friction if hosting changes

Recommendation

Use Option B (Custom Function + Brevo API/SMTP).

• It minimizes vendor lock-in while still working on Cloudflare today.
• It keeps GDPR-sensitive data flow under your control.
• It supports future integrations without re-architecture.

2.10 Phase 2

Some features are drawn in Figma but are not part of the original contract. These are potential features that may be added in a future phase, but are not currently planned for development.

• Dark mode
• Advanced animations
• Pages for guides
• Video background support for hero components (in addition to images)

3.1 Header

The Header component provides site navigation and branding. Shows brand logo, website switcher dropdown, main navigation menu with dropdown submenus, optional CTA button, and responsive mobile hamburger menu. Main navigation supports up to 2 levels of navigation (main items + one level of submenus/dropdowns).

Properties

Responsive (Variant)

Value	Example
Desktop
Mobile

Components

3.2 Navi Section

Main navigation bar container for site header. Contains brand logo, website switcher dropdown (optional), horizontal navigation menu (optional), and CTA buttons (optional). Features responsive design with hamburger menu on mobile.

Functional Documentation

Properties

Responsive (Variant)

Value	Example
Desktop
Mobile

3.3 Navi Announcement Strip

A site-wide horizontal banner displayed above the main navigation for announcements or promotional messages. Features scrolling text on mobile and optional CTA button. Text has a 100 character limit to remain on a single line within the desktop container. Same banner appears across all pages.

Functional Documentation

Properties

Responsive (Variant)

Value	Example
Desktop
Mobile

3.4 Footer

Multi-column footer section with site branding, navigation links, support information, and related site logos. Adapts across different brand sites (Collegium, Mondial, Collegium CRO, Cooltura) and responsive breakpoints.

Functional Documentation

Properties

Responsive (Variant)

Value	Example
Desktop
Mobile

3.5 Breadcrumbs

Breadcrumbs provide navigation path showing the user's location within the site hierarchy. Displays page ancestors separated by chevron icons with interactive links to parent pages.

Properties

Layout

Value	Example
Default

State (Variant)

Value	Example
Default
Hover
Hover

3.6 Button

The button component is the primary call-to-action element used throughout the site. It can navigate to internal pages, external pages, anchor links on the same page, or trigger actions such as form submissions. For buttons with icons, editor can select icon from a predefined list of available icons.

Properties

State (Variant)

Value	Example
Default
Hover and Active
Focused
Loading
Disabled

Appearance (Variant)

Value	Example
Filled
Outlined
Text

Icon placement (Variant)

Value	Example
Both sides
Right side
No icons
Icon only

Size (Variant)

Value	Example
Large
Medium

Special (Variant)

Value	Example
Play button

3.7 Current Experiences and Events A

Section displaying two content categories - "Aktualna doživetja" (Current Experiences) and "Aktualni dogodki" (Current Events). The experiences section shows product/travel listings with background images, dates, titles, pricing, and inventory badges (Novo/Razprodano). The events section displays event cards with background images, dates, titles, and venue information. Both sections include horizontal scrolling with pagination dots and navigation arrows.

Functional Documentation

Properties

Responsive (Variant)

Value	Example
Desktop
Mobile

3.8 Gallery

Gallery preview with image grid and optional video embed (YouTube or Cloudinary-hosted). Shows 3-4 preview images with plus N button indicating additional images. Video section has play button overlay. Opens full gallery lightbox or video player on click.

Functional Documentation

Properties

Responsive (Variant)

Value	Example
Desktop
Mobile

3.9 Independant Site Footer

Footer component for independent brand sites (e.g., Balkan Wave). Contains brand logo, company name, and multiple link columns organized by category. Features responsive layout with columns stacking vertically on mobile.<br><br>*Note: Check with Damir where this footer is used (product single for BW?).

Functional Documentation

Properties

Responsive (Variant)

Value	Example
Desktop
Mobile

3.10 Social Media Carousel

A full-width section showcasing actual social media posts in a horizontal scrolling carousel, with heading, social media icon buttons, and post preview cards with video/image content. Used to display recent social media activity and encourage users to follow brand's social channels.

Functional Documentation

Properties

Responsive (Variant)

Value	Example
Desktop
Mobile

3.11 Product Text Offer

A comprehensive product offer section displaying included items, upgrades, exclusions, and optional package cards with legal disclaimers. Used for detailed product breakdowns and travel packages.

Functional Documentation

Properties

Responsive (Variant)

Value	Example
Desktop
Mobile

3.12 Anchor Link Group

A horizontal group of clickable cards displaying statistics with numbers, descriptions, and anchor arrows. Used for quick navigation to different page sections with visual statistics.

Functional Documentation

Properties

Responsive (Variant)

Value	Example
Desktop
Mobile

3.13 Anchor Cards

The Anchor Cards displays a grid of clickable feature cards with icons, titles, descriptions, and call-to-action buttons. Includes optional heading and body text. Cards display key benefits or selling points in a visually organized layout.

Functional Documentation

Properties

Responsive (Variant)

Value	Example
Desktop
Mobile

3.14 Anchor Link Navigation

The Anchor Link Navigation component displays a navigation menu with links to different sections within the same page. Shows section links that smooth scroll to corresponding content when clicked.

Functional Documentation

Properties

Responsive (Variant)

Value	Example
Desktop
Mobile

3.15 Contact Form

The Contact Form component provides a form for visitors to submit inquiries or messages. Includes configurable input fields (such as name, email, phone, subject, message, etc.) with validation and feedback messages on submission. Form submissions are handled using Cloudflare Pages static forms plugin.

Functional Documentation

Properties

Responsive (Variant)

Value	Example
Desktop
Mobile

3.16 Content Popover

A modal overlay component designed to display detailed information across various content types. Features a semi-transparent backdrop with a centered white card containing title, optional tag badge, a single image or multiple images (image carousel) with navigation, and rich text content. Responsive design with mobile-optimized layout. To simplify the handoff of information across the many different content types the client wants to present, such as: - Product CTA box explanations - Product events and activities - Product artists and guests - Product venues - Product offer items - Product optional packages A single Content Popover component was created that can handle all of these use cases with consistent interaction patterns and responsive behavior.

Functional Documentation

Properties

Responsive (Variant)

Value	Example
Desktop
Mobile

3.17 CTA Box

The CTA Box component displays a sticky call-to-action box with promotional content and action buttons. Appears on product hero and overlays the next module on the right side while scrolling.

Functional Documentation

Properties

State (Variant)

Value	Example
Default

3.18 Current Experiences and Events B

The Current Experiences and Events component displays a curated list or grid of ongoing and upcoming experiences and events. Shows key information like dates, titles, and brief descriptions with links to detailed pages.

Functional Documentation

Properties

Responsive (Variant)

Value	Example
Desktop
Mobile

3.19 Ecommerce Product Hero

Full-screen hero section with image background, countdown timer, event title and metadata, and integrated CTA box with pricing and booking options.

Functional Documentation

Properties

Responsive (Variant)

Value	Example
Desktop
Mobile

3.20 Experience Archive Categories

The Experience Archive Categories component displays category filters or navigation for browsing experiences. Shows category names with counts and links to filtered views.

Functional Documentation

Properties

Responsive (Variant)

Value	Example
Desktop
Mobile

3.21 General FAQ

The General FAQ component displays frequently asked questions in an expandable accordion format. Shows list of questions that expand to reveal answers when clicked.

Functional Documentation

Properties

Responsive (Variant)

Value	Example
Desktop
Mobile

3.22 Graduation Experience Terms Archive

The Graduation Experience Terms Archive component displays available graduation experience dates or terms. Shows schedule information with booking availability and pricing details.

Functional Documentation

Properties

Responsive (Variant)

Value	Example
Desktop
Mobile

3.23 Guide List

The Guide List component displays a structured list or grid of guides, articles, or resources. Shows preview cards with title, excerpt, and link to external social media content (Instagram or LinkedIn).

Functional Documentation

Properties

Responsive (Variant)

Value	Example
Desktop
Mobile

3.24 Help Center Contact

Contact options section displaying support availability, contact methods (email, WhatsApp, phone), and office visit information. Includes title, description text, and multiple call-to-action buttons.

Functional Documentation

Properties

Responsive (Variant)

Value	Example
Desktop
Mobile

3.25 Help Center Group

Help center archive page with accordion-based FAQ groups displaying categorized help topics. Optionally includes tab filters at the top to switch between trip types. Each group has expandable category titles containing question lists.

Functional Documentation

Properties

Responsive (Variant)

Value	Example
Desktop and mobile

Is opened (Boolean)

Value	Example
False
True

3.26 Icon Boxes

The Icon Boxes component displays a grid of numbered icon-based process steps. Shows the booking flow steps (choose, upgrade, pay, enjoy) with optional CTA button.

Functional Documentation

Properties

Has CTA Button (Variant)

Value	Example
With CTA
Without CTA

Responsive (Variant)

Value	Example
Desktop
Mobile

3.27 Image and Text

The Image and Text component combines image content with structured text content. It displays optional kicker, headline, body paragraph, optional button and optional bulleted list with icons. Images can be static or animated sequences.

Functional Documentation

Properties

Responsive (Variant)

Value	Example
Desktop
Mobile

Layout (Variant)

Value	Example
Default
White BG + button
Image on right

3.28 Image Box Accordion Grid

The Image Box Accordion Grid displays a grid of partner or accreditation logos with expandable accordion items. Each item contains a logo image, title, truncated description, and expand button. The component includes an title, heading, and introductory text.

Functional Documentation

Properties

Responsive (Variant)

Value	Example
Desktop
Mobile

3.29 Image Cards

The Image Cards component displays a grid of image-based cards with section title and optional description at the top. Each card contains an image, title, and arrow button. <br>The designer needs to ensure that the background of the image in that area supports sufficient contrast so that text can be overlaid on the image.

Functional Documentation

Properties

Responsive (Variant)

Value	Example
Desktop
Mobile

3.30 Image Cards Hero

The Image Cards Hero component displays large image-based cards in a hero section. Features prominent images with overlaid text and call-to-action elements.

Functional Documentation

Properties

Responsive (Variant)

Value	Example
Desktop
Mobile

3.31 Image with Icon Box Grid

The Image with Icon Box Grid component displays a grid of icon boxes with optional featured image. Image can be positioned at the top, center, or omitted entirely, with icon boxes arranged in a grid layout.

Functional Documentation

Properties

Responsive (Variant)

Value	Example
Desktop
Mobile

Layout

Value	Example
Image top
Image center
No image

3.32 Language Selector

A dropdown popover component that allows users to select their preferred language for viewing the website. Displays available language options with flag icons and language names. Appears in the header as a button showing current language and a globe icon.

Functional Documentation

Properties

Responsive (Variant)

Value	Example
Desktop
Mobile

Popover (Variant)

Value	Example
Other languages

3.33 Large Intro Text

Displays large introductory text with optional small title above. Uses large typography for emphasis.

Functional Documentation

Properties

Responsive (Variant)

Value	Example
Desktop
Mobile

3.34 Logos

The Logos component displays a grid or row of partner, sponsor, or certification logos. Shows brand logos with optional links to partner websites.

Functional Documentation

Properties

Responsive (Variant)

Value	Example
Desktop
Mobile

3.35 Navigation Link Group

The Navigation Link Group component displays a grouped set of related navigation links. Used as part of the header navigation to organize links by category or topic.

Functional Documentation

Properties

Responsive (Variant)

Value	Example
Desktop
Mobile

3.36 Product Additional Information

The Product Additional Information component displays supplementary details about a product or experience. Shows organized content sections with headings and descriptions for terms, policies, requirements, etc.

Functional Documentation

Properties

Responsive (Variant)

Value	Example
Desktop
Mobile

3.37 Product Archive

The Product Archive component displays a list or grid of products or experiences. Shows product cards with images, titles, key information, and links to detail pages.

Functional Documentation

Properties

Responsive (Variant)

Value	Example
Desktop
Mobile

3.38 Product Banner

The Product Banner component displays a compact label showing product classification or category information. Features a rounded container with title text and optional status indicators, separated by a horizontal divider line.

Functional Documentation

Properties

Responsive

Value	Example
Desktop
Mobile

3.39 Product Booking Items Archive

The Product Booking Items Archive component displays a list or grid of available booking items for a product. Shows individual booking options with dates, availability, and selection controls.

Functional Documentation

Properties

Responsive (Variant)

Value	Example
Desktop
Mobile

3.40 Product Booking Offer

The Product Booking Offer component displays pricing and booking options for a product or experience. Shows package options with pricing, inclusions, and booking buttons.

Functional Documentation

Properties

Responsive (Variant)

Value	Example
Desktop
Mobile

Layout

Value	Example
Collegium
Mondial

3.41 Product Hero

The Product Hero component displays a hero section for product or experience detail pages. Features large image with product title, key information, and booking call-to-action.<br><br>*Note: Design version has been updated in Figma. Need to verify with Damir which version is correct. TBD

Functional Documentation

Properties

Responsive (Variant)

Value	Example
Desktop
Mobile

3.42 Product Hero Slider

The Product Hero Slider displays a rotating carousel of hero images or content at the top of product pages. Features navigation controls and automatic progression through slides.

Functional Documentation

Properties

Responsive (Variant)

Value	Example
Desktop
Mobile

Type (Variant)

Value	Example
Collegium Experience
Mondial Destination

Components

Banner

Each hero slide can optionally include a banner object. When present, the slider renders the product-hero-slider-banner partial inside the banner slot.

Translated UI strings

The banner step labels and CTA label are translated via i18n:

• higher-occupancy
• higher-price
• check-occupancy

3.43 Product Overview

Comprehensive product overview section displaying title, expandable description, anchor navigation cards, selling points with images, what's included list, and gallery preview. Desktop layout uses two-column structure.

Functional Documentation

Properties

Responsive (Variant)

Value	Example
Desktop
Mobile

3.44 Product Program

The Product Program component displays detailed itinerary or schedule for an experience or trip. Shows day-by-day breakdown with activities, timings, and descriptions.

Functional Documentation

Properties

Responsive (Variant)

Value	Example
Desktop
Mobile

3.45 Product Template FAQ

The Product Template FAQ component displays frequently asked questions specific to a product or experience type. Shows accordion-style Q&A list with expandable answers.

Functional Documentation

Properties

Responsive (Variant)

Value	Example
Desktop
Mobile

3.46 Social Media Cards

The Social Media Cards component displays embedded social media posts or links to social media profiles. Shows cards with social media platform branding, content previews, and links to full posts.

Functional Documentation

Properties

Responsive (Variant)

Value	Example
Desktop
Mobile

3.47 Stats

The Stats component displays key statistics and metrics in a grid layout. Each stat contains a large number or value, label, and descriptive text. The component arranges stats in a horizontal row on desktop and stacks them vertically on mobile.

Functional Documentation

Properties

Responsive (Variant)

Value	Example
Desktop
Mobile

3.48 Sub Page Hero

The Sub Page Hero Section displays a hero banner at the top of subpages with breadcrumb navigation and large heading text. Features full-width background image with gradient overlay and centered text card with brand-colored bottom border.

Functional Documentation

Properties

Responsive (Variant)

Value	Example
Desktop
Mobile

3.49 Tertiary Hero

The Tertiary Hero component displays a simplified hero section for tertiary or detail pages. Features minimal design with heading and breadcrumb navigation.

Functional Documentation

Properties

Responsive (Variant)

Value	Example
Desktop
Mobile

3.50 Text Columns

The Text Columns displays text content in a two-column layout on desktop and single-column layout on mobile. The left column contains a heading and body text, while the right column contains additional body text and an optional button.

Functional Documentation

Properties

Responsive (Variant)

Value	Example
Desktop
Mobile

3.51 Why Cards

Section with heading and list of benefit cards alongside video player. Desktop shows sticky video on left with scrolling cards on right. Mobile stacks vertically. Video can be YouTube embed or self-hosted (Cloudinary).

Functional Documentation

Properties

Responsive (Variant)

Value	Example
Desktop
Mobile

4.1 Home

Primary landing page layout featuring hero section with brand showcase and modular content areas. Supports three hero variants (product slider, image cards, or tertiary hero) with flexible content modules below for experiences, features, and social proof.

Components

4.2 Default List

Default layout for list/archive pages displaying filterable content collections. Used for experience archives, blog posts, event listings, and other content categories.

Components

4.3 Contact

Dedicated layout for contact pages featuring header, tertiary hero, contact form and footer. Designed for help and support pages where users can submit inquiries. Simple structure focuses on form submission without additional content modules.

Components

4.4 Default Single

Default layout for content pages. Customizable with shortcodes and modules. Content can be added via Hugo's .Content variable or through modular components. Example usage includes About Us, landing pages, explanation pages, etc.

Components

4.5 Guides List

Layout for guides listing page with hero section, icon boxes explaining guide selection, and filterable guide list. Displays guide cards with profile images, names, and action buttons.

Components

4.6 Help List

Help center layout with hero section, categorized help topics, and contact options. Displays accordion-style help categories with contact methods including email, WhatsApp, and phone support.

Components

4.7 Product List

E-commerce product archive layout displaying booking items with filtering, search, and detailed product cards. Used for villa rentals, accommodation listings, and similar bookable products.

Components

4.8 Product Single

E-commerce product detail page layout with hero, sticky CTA box, product overview, program details, booking offers, and FAQ sections. Used for travel packages, experiences, and events.

Components

4.9 Occupancy List

Occupancy tracking layout displaying available spots and booking deadlines for graduation trips and group travel experiences. Shows real-time capacity information organized by date groups.

Components

5.1 Booking API Reference

The Booking API (Azure Functions) handles all dynamic booking operations including cart management, checkout, payment processing, and order placement.

For static program catalog data (build-time only), see the Programs Index API.

Overview

The Booking API provides endpoints for:

• Cart operations - Add/remove services and cross-sale products
• Checkout - Calculate totals, fees, taxes, and installments
• Coupons - Add and remove discount codes
• Orders & Payments - Place orders and handle payment initialization
• Data lookups - Get packages, products, accommodation, and cross-sale items

All endpoints require programId (and often bookingId or serviceId) to operate on specific program bookings.

Base URLs

• Main repository: https://github.com/poslovnimediji/cmt-booking/, api directory
• Production (Azure): https://cmt-booking.azurewebsites.net/api/
• Development (Azure): https://cmt-booking-develop.azurewebsites.net/api/
• Local: http://localhost:7071/api/

Authentication

All endpoints are configured with anonymous access (auth_level=ANONYMOUS). If an external gateway enforces auth, that is outside this codebase.

Content Type

• Request bodies are JSON (application/json) for POST endpoints.
• Most responses are JSON with a shared envelope (see below).

Response Envelope

Most endpoints return:

{
  "success": true,
  "data": <payload>
}

On error (500):

{
  "success": false,
  "error": "<message>"
}

Notes:

• GET /sync-all returns a plain text response ("sync successful") and does not use the JSON envelope.
• Some response payloads are passed through from Salesforce retdata and are not fully described here.

Endpoint Index

Endpoints

GET /keep-warm

Returns a successful response with an empty array.

Response data:

• []

GET /sync-all

Forces cache refresh of active programs.

Response:

• Plain text "sync successful" (not JSON).

GET /packages

Lists packages for a program and date range. Proxies to Salesforce checkavailability.

Query parameters:

• programId (string, required)
• channelId (string, required)
• arrival (string, required) - start date
• departure (string, required) - end date

Response data:

• Array of packages (retdata.wpackages from Salesforce).

GET /products

Returns cached products for a program element.

Query parameters:

• programId (string, required)
• programElement (string, required)

Response data:

• Array of products (cached JSON), or empty array if not found.

GET /accommodation

Returns cached accommodation details plus computed units for the date range.

Query parameters:

• programId (string, required)
• programElement (string, required)
• accommodationSlug (string, required)
• arrival (string, optional) - defaults to program defaultArrivalDate
• departure (string, optional) - defaults to program defaultDepartureDate

Response data:

• Accommodation object from cache with added units field.

GET /cross-sale

Returns cached cross-sale products for a program element and package.

Query parameters:

• programId (string, required)
• programElement (string, required)
• packageId (string, required)

Response data:

• Array of products (base + extension) from cache.

DELETE /cart

Empties the cart in Salesforce for a booking.

Query parameters:

• bookingId (string, required)
• programId (string, required)

Response data:

• null

POST /cart/main

Adds a main service to the cart.

Request body:

• programId (string, required)
• serviceId (string, required)
• arrival (string, required)
• departure (string, required)
• guests (number, required)
• quantity (number, required)
• bookingId (string, optional)
• timeSlotId (string, optional)
• extras (array, optional)
  • Each item:
    • serviceId (string, required)
    • timeSlotId (string, required)

Response data:

• bookingId (string)
• total (number)
• bookingServices (array) - Salesforce retdata.wmservices

POST /cart/cross-sale

Adds a cross-sale service to the cart.

Request body:

• programId (string, required)
• bookingId (string, required)
• serviceId (string, required)
• timeSlotId (string, required)
• guests (number, required)

Response data:

• bookingServiceId (string)
• total (number)

DELETE /cart/cross-sale

Removes a cross-sale service from the cart.

Query parameters:

• bookingServiceId (string, required)
• bookingId (string, required)
• programId (string, required)

Response data:

• total (number)

GET /checkout

Proceeds to checkout and returns totals, fees, installments, and coupons.

Query parameters:

• bookingId (string, required)
• programId (string, required)
• paymentType (string, optional) - defaults to Bank transfer
• cardType (string, optional) - used when paymentType is a card
• insurance (string, optional) - true or false (default false)

Response data:

• total (number)
• bookingFee (number)
• serviceFee (number)
• touristTax (number)
• installments (array)
• insurancePrice (number)
• coupons (array)
• debug (object) - raw Salesforce retdata

POST /coupon

Adds a coupon to the booking.

Request body:

• programId (string, required)
• couponCode (string, required)
• bookingId (string, required)

Response data:

• {}

DELETE /coupon

Removes a coupon from the booking.

Query parameters:

• programId (string, required)
• bookingId (string, required)
• couponCode (string, required)

Response data:

• {}

POST /order

Places an order and handles payment initialization or finalization. When paymentMethod is not Bank transfer, this flow may return a payment URL for the next step.

Request body:

• orderData (object, required) - Salesforce payload for placing order
• paymentMethod (string, required) - Bank transfer, creditcard, or other supported values
• paymentToken (string, optional) - returned from Saferpay initialization
• bookingNumber (string, optional) - required when continuing a payment
• installmentId (string, optional) - required when continuing a payment
• installmentAmount (number, optional) - required for card/PayPal flow
• cardType (string, optional) - required for creditcard
• returnUrl (string, optional) - used for payment redirect
• locale (string, optional) - used for payment page

Response data (one of):

• bookingNumber (string) - when order is finalized or bank transfer
• bookingNumber, installmentId, paymentToken, paymentUrl - when payment page is initialized

Known Gaps

Some field types and allowed enum values are defined by upstream Salesforce or Saferpay APIs and are not validated in this app. If you need strict schemas, confirm the upstream contracts for retdata shapes and supported paymentMethod or cardType values.

5.2 Programs Index API (Netlify)

The Programs Index API provides a static catalog of all programs and their elements.

For runtime booking operations, see the Booking API Reference.

Overview

The Programs Index API serves a cached, read-only JSON index of:

• All active programs with their metadata
• Program elements (accommodation types, packages, etc.) within each program
• Cross-sale product mappings
• Default booking dates and constraints

Base URLs

• Development/Staging: https://develop--cmt-booking.netlify.app/api/
• Repository: https://github.com/poslovnimediji/cmt-booking/, www directory (Netlify deployment)

Environment Variables

Set the following environment variables for the Hugo build:

# fetch program data
BOOKING_PROGRAMS_URL=https://develop--cmt-booking.netlify.app/api/programs/index.json

# Enable build-time product fetching from the Booking API (Azure Functions):
BOOKING_API_URL=https://cmt-booking-develop.azurewebsites.net/api/

Variables are loaded from .env during the build process (see bin/build.sh).

Endpoint: GET /api/programs/index.json

Description

Returns a complete index of all programs and their program elements. This is a static JSON file endpoint designed for build-time consumption.

Usage in Hugo

The Hugo build process fetches this endpoint via the layouts/partials/get-booking-programs.html partial:

1. Hugo calls resources.GetRemote to fetch the URL
2. The response is unmarshaled into a data structure
3. The data is cached using partialCached to avoid refetching
4. Individual program pages match their programId front matter against this index
5. Program details are rendered directly into the HTML during build

Response

Content-Type: application/json

Format: Plain JSON array (not wrapped in success envelope)

Example Response:

[
  {
    "programId": "a1mQx000002frf7IAA",
    "title": "@bw - Balkan Wave 2026",
    "link": "/balkan-wave2026/",
    "channelId": "p8fdirzhf7cu8qbzdqo6x4qda5nxzant",
    "defaultGuests": 2,
    "maxGuests": 12,
    "unitSelection": "auto",
    "defaultArrivalDate": "2026-07-09",
    "defaultDepartureDate": "2026-07-12",
    "lockDates": true,
    "minArrivalDate": "2026-07-05",
    "maxDepartureDate": "2026-07-12",
    "bookingFeeName": "Booking fee",
    "touristTaxName": "Tourist tax:",
    "programElements": [
      {
        "slug": "3_night_packages",
        "title": "3-DAY PACKAGES",
        "type": "Accommodation services",
        "subtype": ["apartments"],
        "icon": "bed",
        "crossSale": ["a1nQx00000fLLUyIAO", "a1nQx00000fLH9fIAG"]
      },
      {
        "slug": "4_night_packages",
        "title": "4-DAY PACKAGES",
        "type": "Accommodation services",
        "subtype": ["hotels"],
        "icon": "bed",
        "crossSale": ["a1nQx00000fLLUyIAO", "a1nQx00000fLH9fIAG", "a1nQx00000fL7dFIAS"]
      },
      {
        "slug": "7_night_packages",
        "title": "7-DAY PACKAGES",
        "type": "Accommodation services",
        "subtype": ["hotels"],
        "icon": "bed",
        "crossSale": ["a1nQx00000fLLUyIAO", "a1nQx00000fLH9fIAG", "a1nQx00000fL7dFIAS", "a1nQx00000fLOFpIAO"]
      }
    ]
  }
]

Response Fields

Program Object

Program Element Object

Integration with cmt-sites

Program pages define their program ID in front matter:

---
title: Balkan Wave
programId: a1mQx000002frf7IAA
start_date: 2026-07-12T00:00:00Z
end_date: 2026-07-18T00:00:00Z
price: 145
---