# Federated Computer — Hugo Site

A Hugo template for the Federated Computer site, laid out like
[nebius.com](https://nebius.com): a sticky dark navy top bar with dropdown
menus, a full-bleed navy hero (copy left, a visual right), then full-width
bands that alternate white and light grey inside a centered 1280px
container. Big, tight Inter headlines, rounded filled cards, a lime primary
button (`#e0ff4f`) and a violet accent (`#614efa`). Stats, the closing call
to action, and the footer return to navy. Copy still to be written is
filled with "lorem ipsum".

## Requirements

- [Hugo](https://gohugo.io/) (extended version), recent enough to have `hugo.Data`. Tested on v0.167.0.

## 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`.

Sections alternate white and grey bands automatically (cards inside take
the opposite tone), so the older `bordered`, `tinted`, and `dark` options
are accepted but no longer change the look. `stats` always renders as a
navy band; `final-cta` always renders as the navy closing band. A `text`
section with a heading puts it on the left and the copy on the right; one
without a heading renders as a large statement.

### 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
- `logos` — a logo wall. `source: "apps"` fills it from `data/app_wall.yaml` (home); otherwise `items` of `name` + optional `url`
- `cards` — a grid of rounded cards: `items` with `title`, `body`, optional `label`, `image`, `link`/`linktext`; `visual: true` draws a gradient panel where there's no image; `columns: 2` or `3` fixes the grid
- `news` — "What's new" cards: `items` with `tag` (Blog, Video, Event…), `title`, `date`, `url`, optional `image` (home; lorem ipsum for now)
- `banner` — an announcement plate: `badge`, `kicker`, `headline`, `body`, `ctas` (home; lorem ipsum for now)
- `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. A photo set with `logImage` sits behind the whole hero band

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 app logo wall

The home page's `logos` section draws its tiles 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.

Dropdown entries in the top bar can carry a one-line description:
`[menu.product.params] desc = "..."` in `hugo.toml`.

### 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 top bar (nav with dropdowns, actions, mobile menu)
    render-sections.html     Dispatches each section to its partial
    section-id.html          Anchor id for each section
    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:** a sticky top bar (`layouts/partials/header.html`), then
  `main`, then the footer — all full width. Content sits in `.wrap`
  (max 1280px, centered). Below 1080px the nav folds into a Menu toggle.
- **Type:** Inter (headlines and reading) and JetBrains Mono (small caps
  labels and numbers), loaded from Google Fonts in `layouts/partials/head.html`.
- **Color tokens** are CSS custom properties at the top of
  `static/css/style.css` (`--navy-deep`, `--lime`, `--violet`, `--paper`,
  `--ink`, `--rule`, etc.) — change the palette there and it cascades
  everywhere. Each section sets `--section-bg` and `--surface` (the card
  tone), which flip on alternating bands.
- **Buttons:** CTA `style: primary` is the solid lime button (navy on white
  bands), `ghost` the outlined one, `text` a violet 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 darkens the top bar on scroll. Without it everything still shows;
  the dropdowns are CSS (hover and focus), and the mobile menu, FAQ, and
  app directory use native `<details>`.