docs(site-builder): add 5-article Site Builder section (Beta)

Adds /whp/site-builder/ with overview, getting-started, blocks-and-pages,
styling, and publishing. Wired as a 'Site Builder' sidebar group with a
Beta badge.

- Captured real screenshots via the demo account through a redaction
  step (server names, domain, demo-user all swapped for placeholders)
- New beta-callout partial shared across all 5 articles
- capture-site-builder.ts is local-only (uses tools/screenshots/.env
  for demo creds, never runs in CI)

src/content/docs/whp/site-builder/blocks-and-pages.mdx

@@ -0,0 +1,116 @@
+---
+title: Blocks & pages
+description: The Site Builder block library, plus how to add pages and edit the shared header and footer.
+sidebar:
+  order: 3
+---
+
+import { Aside } from '@astrojs/starlight/components';
+import Beta from '~/content/partials/beta-callout.mdx';
+import Support from '~/content/partials/support-link.mdx';
+
+<Beta />
+
+## The block library
+
+The **Blocks** panel on the left of the editor groups every available content block into five collapsible categories. Drag any block onto the canvas to add it.
+
+![Blocks panel showing the Sections category open](~/assets/screenshots/whp/whp-site-builder-blocks.png)
+
+### Basic
+
+Building-block primitives for any page:
+
+- **Heading** — H1–H6, with the size set from the inline toolbar.
+- **Text** — paragraph copy. Supports bold, italic, links, and lists.
+- **Button** — call-to-action with label, link, and style.
+- **Logo** — drop in your site logo from Assets.
+- **Menu** — the site's main navigation (most commonly placed in the Header).
+- **Footer** — quick footer wrapper (or use the dedicated Footer editor; see below).
+- **Divider** — horizontal rule.
+- **Spacer** — adjustable vertical whitespace.
+- **Icon** — pick from a built-in icon set.
+- **Star Rating** — five-star widget for reviews.
+- **Social Links** — links to your social profiles with icons.
+- **HTML** — drop in raw HTML when nothing else fits.
+
+### Layout
+
+Structural blocks that hold other blocks:
+
+- **Section** — a full-width strip of the page.
+- **Container** — a centered, max-width wrapper.
+- **1 / 2 / 3 / 4 / 5 / 6 Columns** — pre-set column rows.
+- **Sidebar Left / Right** — content area with a sidebar.
+
+### Sections
+
+Pre-composed page sections — Hero, Features, CTA, Accordion, Tabs, Pricing, Gallery, Countdown, and more. Drop one in and edit the placeholder content.
+
+### Media
+
+Image, video, audio, and gallery blocks. Uploaded files live in the **Assets** panel and can be re-used across pages.
+
+### Forms
+
+Contact form, newsletter signup, and similar input blocks.
+
+<Aside type="tip">
+  Selecting any block on the canvas swaps the right-hand panel from **Styles** to **Block settings**, so you can edit its content, colour, padding, and link target without leaving the editor.
+</Aside>
+
+## Editing blocks
+
+Click a block on the canvas to select it. From there:
+
+- **Inline toolbar** — quick text formatting (bold, italic, link, alignment).
+- **Right panel** — block-specific settings (colour, padding, link, size, alt text, etc.).
+- **Layers panel** (left) — see the block tree, drag to re-parent or re-order.
+
+To delete a block, select it and press **Delete** on your keyboard, or use the trash control in the inline toolbar.
+
+## Pages
+
+Most templates ship as multi-page sites. Manage pages from the **Pages** tab.
+
+![Pages panel with Edit Header / Edit Footer + page list](~/assets/screenshots/whp/whp-site-builder-pages.png)
+
+The **PAGES** list shows every page on the site, with its path (e.g. `Home /index`). The currently-edited page is highlighted.
+
+### Add a page
+
+1. In the Pages tab, click **+ Add Page**.
+2. Give the page a name (used in navigation) and confirm the slug (used in the URL).
+3. The new page opens, empty, ready for blocks.
+
+### Edit the shared header
+
+The **Edit Header** button at the top of the Pages tab opens the header in isolation. Whatever you put there appears on every page. The same applies to **Edit Footer**.
+
+This is the right place to drop your Menu, Logo, and Social Links blocks — once, instead of once per page.
+
+### Reorder or delete pages
+
+Click a page in the list to edit it. The menu beside the page name lets you rename, change the slug, duplicate, or delete. Deleting a page removes it from the site on the next publish.
+
+<Aside type="caution">
+  Renaming a slug changes the URL. If the page is already published and indexed, set up a redirect (or hold off until you can update inbound links).
+</Aside>
+
+## Layers panel
+
+The **Layers** tab on the left shows the block tree for the current page — useful when blocks are nested inside containers and clicking on the canvas keeps selecting the wrong level. Click any layer to select that block; drag a layer to re-parent it.
+
+## Assets panel
+
+The **Assets** tab is where uploaded images, videos, and other media live. Drag an image directly from this panel into an image block, or use the **Upload** button to add new files.
+
+## Related
+
+- [Getting started](/whp/site-builder/getting-started/)
+- [Styling your site](/whp/site-builder/styling/)
+- [Publishing & code injection](/whp/site-builder/publishing/)
+
+## Still stuck?
+
+<Support />