191 lines
10 KiB
Markdown
191 lines
10 KiB
Markdown
# 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>`.
|