A Hugo template for the Federated Computer site, laid out like 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 (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

Create content/your-page.md with a sections: list in the front matter, following the patterns already in content/*.md.
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.
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>.