# Federated Computer — Hugo Site

A Hugo template for the Federated Computer site, laid out like
[supermemory.ai](https://supermemory.ai): a sticky left rail (logo, the
site's pages, Start Now / Sign In, and an "On this page" index of the
current page's sections) beside a single narrow reading column. White
page, near-black ink, one electric blue (`#0562ef`), hairline rules,
square corners, no shadows. The product's four layers
(Federated Core → Software Library → Agent Sandbox → Data & Controls)
recur as stacked bars — in the blue hero "field", the layer-fit panels,
and the closing call to action.

## Requirements

- [Hugo](https://gohugo.io/) (extended version). Tested on v0.123.7.

## Running it locally

```
hugo server
```

Then open http://localhost:1313/.

## Building for production

```
hugo --minify
```

Output goes to `public/`.

## How pages are built

Every page's content lives in its front matter as a `sections:` list —
each section has a `type` (e.g. `hero`, `text`, `layers`, `stats`, `quote`,
`table`, `checklist`, `features`, `steps`, `faq`, `callout`, `founder`,
`diagram`, `final-cta`, `divider`, `paths`, `matrix`, `split`, `app-directory`, `pricing`, `savings`) plus whatever fields that type needs.
`layouts/partials/render-sections.html` loops the list and hands each
section to its matching partial in `layouts/partials/sections/`.

This keeps content and layout separate: to change copy, edit the
`content/*.md` files; to change how a section type looks, edit the one
partial in `layouts/partials/sections/`.

### Common section options

Any section can take:
- `id: "some-id"` — anchor for links (e.g. `/start-now/#pricing`). Without
  one, the id is made from `toc`, `kicker`, or `headline`.
- `toc: "Short label"` — the label for the rail's "On this page" index
  (defaults to the kicker, then the headline). Sections without any of
  these, plus `hero`, `divider`, and `final-cta`, are left out of the index.

Every section opens on a hairline rule, so the older `bordered`, `tinted`,
and `dark` options are accepted but no longer change the look. `final-cta`
always renders as the dark closing plate.

### Customer paths (Solutions)

The site speaks to four customer types, each with its own page under
`content/solutions/`, plus an overview with a side-by-side comparison:

| Page | Customer | Layers |
| --- | --- | --- |
| `open-source-apps.md` | Wants open-source apps only | Core, Library |
| `apps-and-ai-development.md` | Wants the apps plus AI development | Core, Library, Data & Controls |
| `ai-for-your-apps.md` | Wants Federated AI on open-source apps they host themselves | Core, Data & Controls (Library: their own) |
| `full-stack.md` | Wants apps, AI development, and to run agents on Federated | All four |

Which layers a path uses is set with a `fit` map, e.g.
`fit: { core: "yes", library: "own", sandbox: "no", controls: "yes" }`.
States are `yes` (Included), `own` (Your own), and `no` (Add anytime).
Layer names, order, and links come from `data/layers.yaml`.

New section types:
- `paths` — list of customer paths, each with its layer fit (home, Solutions). `strip: true` pins a four-layer strip above the list that lights up the hovered path's layers — and the rows of any `layers` section on the page (mouse devices only)
- `matrix` — capability-by-path comparison table; cells take `yes` / `own` / `no` or free text
- `split` — two titled columns of short lists
- `app-directory` — browsable app catalog; `categories`, each with a `name` and a list of `apps` (`name`, optional `description`, optional `url` which renders a "Learn more." link). Renders as collapsible `<details>` groups, no JS (Software Library)
- `pricing` — plan groups behind a CSS-only switch (e.g. "You host" / "We host"; up to four). `groups`, each with a `label`, optional `id` (so `/pricing/#hosted` opens that tab) and `lede`, plus any of: `tiers` (`name`, `price`, `unit`, `note`, `intro`, `features`), `includes` (`headline`, `items`, `note`), `addons` (`headline`, `lede`, `items` of `name`/`price`/`unit`/`body`), `apps` (`headline`, `lede`, `items` of `name`/`category`/`body`/`price`), and `ctas` (Pricing)
- `savings` — a bar comparison (`bars`: `name`, `amount`, `highlight`) and a savings calculator (`apps`: `name`, `cost`, `perSeat`, `selected`; compared with `federatedAnnual`) (Pricing)
- `stats` values that start with a number ("80%+", "100+") count up when scrolled into view
- `quote` takes one `text`/`cite`, or several as `items`. With `cards: true`, items render as a two-column testimonial grid: `text`, `name`, optional `role` and `photo` (initials show when there's no photo). Customer headshots live in `static/images/customers/` (home page). `savings:` adds a compact savings calculator below the quotes: it picks the named `apps` (and ticks `selected`) out of the `savings` section on the page at `from` (e.g. `/pricing`), so app prices live in one place; `more` links to the full calculator
- `app-directory` items can also take `page:` — the app's own page on this site
- `hero` accepts `log:` — a list of lines (`tag` + `text`; `think: true` for a greyed reasoning step with a spinner and a pause; `done: true` to close the run) typed out in a fixed-height console window that scrolls like a terminal, as an agent's activity log (home page). Without JS or with reduced motion, all lines show at once. `logTitle` sets the window's title; `logImage` puts a photo behind the console in place of the blue field (home: Pikes Peak, `static/images/hero-pikes-peak.jpg`), and `logCaption` adds a small credit in its corner
- `hero` accepts `fit:` to show the layer panel under the actions (in place
  of the blue field); `bars: false` drops the field; `compact: true` makes
  the field shorter

Every section type now renders `kicker`, `headline`, and an optional `lede`
through `partials/sections/head.html`.

### App pages and legal pages

Some pages are long-form Markdown rather than a `sections:` list:
- `content/apps/*.md` — one page per app, rendered by `layouts/apps/single.html`.
  Front matter holds the facts (`eyebrow`, `headline`, `dek`, `replaces`, `plans`,
  `price`, `projectUrl`); each sets `url:` to keep the old site's address
  (e.g. `/jitsi/`). Screenshots live in `static/images/apps/`.
- `privacy-policy.md` and `terms-and-conditions.md` use `layout: "legal"`
  (`layouts/_default/legal.html`), with `effective:` for the date.

Site-wide links live in `hugo.toml`: `params.demoUrl` (the booking page),
`params.supportUrl` (the help portal), and the `footer_social` / `footer_legal` menus.

### The "Apps + AI" wall

The rail ends with a slowly scrolling grid of app tiles, pinned to the bottom
of the column on screens wider than 1000px and taller than 720px. Tiles come
from `data/app_wall.yaml` (`name`, `url`, optional `icon`). Icons are symbols
in the sprite `static/images/app-icons.svg` (from Simple Icons, CC0; DocuSeal
from its own repo). A tile without an `icon` shows its first letter. The
scroll pauses on hover and focus, and stops for reduced motion.

### Adding a new page

1. Create `content/your-page.md` with a `sections:` list in the front
   matter, following the patterns already in `content/*.md`.
2. It will render through `layouts/_default/single.html` automatically,
   which just runs `render-sections.html`. Add a link to it in
   `hugo.toml`'s `[[menu.main]]` (give it `[menu.main.params] dropdown = "menu-name"`
   to render a dropdown from another menu) (and `footer_*` menus) if it should
   appear in nav.
3. If a page needs a layout the section system doesn't cover — like
   `sign-in.md`, which uses a real `<form>` — set `layout: "your-layout"`
   in its front matter and add `layouts/_default/your-layout.html`.

## Structure

```
content/
  _index.md                  Home
  product/
    _index.md                Product overview
    federated-core.md
    software-library.md
    agent-sandbox.md
    data-controls.md
  solutions/
    _index.md                Solutions overview + comparison matrix
    open-source-apps.md
    apps-and-ai-development.md
    ai-for-your-apps.md
    full-stack.md
  ai-privacy-advantage.md
  pricing.md
  start-now.md
  about.md
  sign-in.md
layouts/
  _default/baseof.html       Base HTML shell
  _default/single.html       Generic page (renders sections)
  _default/sign-in.html      Sign-in form page
  index.html                 Home page (renders sections)
  product/list.html          Product overview (renders sections)
  partials/
    head.html, footer.html
    header.html              The rail (nav, actions, "On this page")
    render-sections.html     Dispatches each section to its partial
    section-id.html          Anchor id shared by sections and the rail index
    sections/*.html          One partial per section type
static/
  css/style.css              The whole design system
hugo.toml                    Site config + nav/footer menus
```

## Design notes

- **Layout:** `.page` is a two-column grid — the rail (`layouts/partials/header.html`)
  and the column (`main.col`, which also holds the footer). Below 1000px the
  rail becomes a one-line top bar with a Menu toggle.
- **Type:** Geist (reading) and Geist Mono (caps labels, numbers, buttons),
  loaded from Google Fonts in `layouts/partials/head.html`.
- **Color tokens** are CSS custom properties at the top of
  `static/css/style.css` (`--ink`, `--ink-68`, `--rule`, `--paper`,
  `--blue`, etc.) — change the palette there and it cascades everywhere.
- **Buttons:** CTA `style: primary` is the solid blue button with an arrow
  tile, `ghost` the pale blue one with corner ticks, `text` a quiet link.
  A trailing `→` in a label is dropped; the arrow is drawn for you.
- **JS is optional.** A small inline script in `baseof.html` fades sections
  in and highlights the current "On this page" entry. Without it everything
  still shows; the mobile menu, FAQ, and app directory use native `<details>`.