Booking Page Design Spec

Context

The Holli Hemlock site needs a Booking page where potential clients can submit inquiries and browse available acts. The form handler is TBD — the form will be wired up later. Acts should be a content-managed collection (markdown with front matter) consistent with how performances, media, and photos are managed.

Acts Collection

Directory: /acts/

Directory data file: /acts/acts.json

{
  "tags": "act",
  "permalink": false,
  "order": 100,
  "bannerImage": "",
  "description": ""
}

• permalink: false — acts don't generate their own pages; they only render on the booking page.
• order defaults to 100 so new acts sort to the end unless explicitly ordered.
• tags: "act" registers the collection tag for Eleventy.

Individual act file example: /acts/what-makes-a-broken-man.md

---
title: "What Makes a Broken Man?"
bannerImage: "/assets/images/what-makes-a-broken-man.jpg"
tags:
  - transgender
  - unfolding
  - identity
order: 1
description: "Our next performer bloomed into herself on stage..."
---

Note: The tags field here serves double duty — the directory data file uses "tags": "act" for the Eleventy collection, while the per-file tags list holds thematic tags for display. We'll use a separate front matter field themes (list of strings) for the display tags, and reserve tags for the Eleventy collection. Updated example:

Corrected directory data file: /acts/acts.json

{
  "tags": "act",
  "permalink": false,
  "order": 100,
  "bannerImage": "",
  "themes": [],
  "description": ""
}

Corrected act file example: /acts/what-makes-a-broken-man.md

---
title: "What Makes a Broken Man?"
bannerImage: "/assets/images/what-makes-a-broken-man.jpg"
themes:
  - transgender
  - unfolding
  - identity
order: 1
description: "Our next performer bloomed into herself on stage..."
---

Eleventy collection (in .eleventy.js):

eleventyConfig.addCollection("allActs", function(collectionApi) {
  return collectionApi.getFilteredByTag("act").sort((a, b) => {
    return (a.data.order || 100) - (b.data.order || 100);
  });
});

Migration: Move data from _data/acts/what-makes-a-broken-man.json into the new markdown collection format. Delete the old JSON file and _data/acts/ directory if no other files depend on it.

Booking Page

File: /booking.njk

Front matter:

---
layout: layouts/base.njk
title: Booking
---

Structure (top to bottom):

Section 1: Booking Inquiry Form

• Heading: "Book Holli Hemlock" (or similar, in Lancelot font)
• Short intro paragraph
• Form fields:
  • Name (text input, required)
  • Email (email input, required)
  • Message (textarea, required)
• Submit button
• <form action="#" method="POST"> — placeholder action, with an HTML comment noting this needs a handler

Section 2: Acts Showcase

• Heading: "Our Acts" (in Lancelot font)
• Full-width banner cards rendered from collections.allActs
• Each card:
  • bannerImage as CSS background-image (not an <img> tag, since it's decorative/background)
  • Dark gradient overlay (linear-gradient(transparent, rgba(0,0,0,0.85))) from bottom
  • Title overlaid at bottom-left in Lancelot font
  • Theme pills as small rounded badges using --accent (purple) and --teal colors
  • Description text below the themes

Styling (additions to bundle.css)

Form Styles

• .booking-form container with max-width for readability
• Input/textarea: dark background (#1a1a1a), --text color, 1px solid #333 border, --accent border on focus
• Submit button: --accent background, white text, hover state using --accent-hover
• Montserrat font for all form elements

Act Card Styles

• .act-card: full-width, relative positioning, border-radius, overflow hidden
• .act-card-image: background-size cover, background-position center, min-height ~250px (adjust for mobile)
• .act-card-overlay: absolute positioned gradient overlay at bottom
• .act-card-title: Lancelot font, white text
• .act-card-themes: flex-wrap container for theme pills
• .theme-pill: small rounded badges, alternating --accent/--teal background tints
• .act-card-description: --text color, smaller font size
• Responsive: cards maintain aspect ratio on mobile, text sizes scale down

Navigation Update

File: _includes/partials/nav.njk

Add <a href="/booking/">Booking</a> after the Gallery link, before the Instagram icon.

Verification

1. Run yarn build (or npx @11ty/eleventy) — confirm no build errors
2. Run yarn start (or npx @11ty/eleventy --serve) — open in browser
3. Verify:
   • "Booking" appears in nav on all pages
   • /booking/ page loads with form and acts list
   • Form fields render and are styled consistently with the dark theme
   • Act cards display with banner image, gradient overlay, title, theme pills, and description
   • Cards are full-width and responsive on mobile viewport
   • Adding a new .md file to /acts/ with the correct front matter adds a new card
   • Changing order values reorders the cards