From 34f0b499faac3316392513cb16789619088081f5 Mon Sep 17 00:00:00 2001 From: David Young Date: Mon, 5 Oct 2026 06:13:52 -0600 Subject: [PATCH] move to top banner --- README.md | 81 +- content/_index.md | 56 + hugo.toml | 18 + layouts/_default/baseof.html | 35 +- layouts/_default/legal.html | 12 +- layouts/_default/sign-in.html | 6 +- layouts/apps/single.html | 10 +- layouts/partials/footer.html | 58 +- layouts/partials/head.html | 4 +- layouts/partials/header.html | 112 +- layouts/partials/section-id.html | 4 +- layouts/partials/sections/banner.html | 14 + layouts/partials/sections/cards.html | 22 + layouts/partials/sections/ctas.html | 11 +- layouts/partials/sections/final-cta.html | 10 +- layouts/partials/sections/hero.html | 25 +- layouts/partials/sections/layers.html | 2 +- layouts/partials/sections/logos.html | 24 + layouts/partials/sections/news.html | 20 + layouts/partials/sections/wrapper.html | 4 +- public/about/index.html | 994 +++------- public/ai-privacy-advantage/index.html | 961 +++------- public/baserow/index.html | 927 +++------- public/bookstack/index.html | 927 +++------- public/calcom/index.html | 927 +++------- public/castopod/index.html | 927 +++------- public/collabora-draw/index.html | 927 +++------- public/collabora-presentation/index.html | 927 +++------- public/collabora-spreadsheets/index.html | 927 +++------- public/collabora-writer/index.html | 927 +++------- public/css/style.css | 1619 +++++++++-------- public/discourse/index.html | 927 +++------- public/docuseal/index.html | 927 +++------- public/element/index.html | 927 +++------- public/email-server/index.html | 927 +++------- public/espocrm/index.html | 927 +++------- public/freescout/index.html | 927 +++------- public/gitea/index.html | 927 +++------- public/headscale/index.html | 927 +++------- public/immich/index.html | 927 +++------- public/index.html | 1541 ++++++++-------- public/jitsi/index.html | 927 +++------- public/kimai/index.html | 927 +++------- public/listmonk/index.html | 927 +++------- public/matomo/index.html | 927 +++------- public/mautic/index.html | 927 +++------- public/n8n/index.html | 927 +++------- public/nextcloud/index.html | 927 +++------- public/plane/index.html | 927 +++------- public/plausible-analytics/index.html | 927 +++------- public/pricing/index.html | 977 +++------- public/privacy-policy/index.html | 909 +++------ public/product/agent-sandbox/index.html | 986 +++------- public/product/data-controls/index.html | 964 +++------- public/product/federated-core/index.html | 979 +++------- public/product/index.html | 973 +++------- public/product/software-library/index.html | 988 +++------- public/roundcube/index.html | 927 +++------- public/sign-in/index.html | 901 +++------ public/solutions/ai-for-your-apps/index.html | 1014 +++-------- .../apps-and-ai-development/index.html | 1005 +++------- public/solutions/full-stack/index.html | 1005 +++------- public/solutions/index.html | 981 +++------- public/solutions/open-source-apps/index.html | 1005 +++------- public/start-now/index.html | 958 +++------- public/terms-and-conditions/index.html | 909 +++------ public/vaultwarden/index.html | 927 +++------- public/woocommerce-ecommerce/index.html | 927 +++------- public/wordpress/index.html | 927 +++------- static/css/style.css | 1619 +++++++++-------- 70 files changed, 13429 insertions(+), 36197 deletions(-) create mode 100644 layouts/partials/sections/banner.html create mode 100644 layouts/partials/sections/cards.html create mode 100644 layouts/partials/sections/logos.html create mode 100644 layouts/partials/sections/news.html diff --git a/README.md b/README.md index c9e1c4f..199fa35 100644 --- a/README.md +++ b/README.md @@ -1,18 +1,17 @@ # 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. +[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). Tested on v0.123.7. +- [Hugo](https://gohugo.io/) (extended version), recent enough to have `hugo.Data`. Tested on v0.167.0. ## Running it locally @@ -48,13 +47,13 @@ partial in `layouts/partials/sections/`. 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. +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) @@ -82,11 +81,15 @@ New section types: - `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 + 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`. @@ -104,14 +107,15 @@ Some pages are long-form Markdown rather than a `sections:` list: 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 app logo 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. +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 @@ -156,9 +160,9 @@ layouts/ product/list.html Product overview (renders sections) partials/ head.html, footer.html - header.html The rail (nav, actions, "On this page") + 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 shared by sections and the rail index + section-id.html Anchor id for each section sections/*.html One partial per section type static/ css/style.css The whole design system @@ -167,17 +171,20 @@ 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`. +- **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` (`--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. + `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 highlights the current "On this page" entry. Without it everything - still shows; the mobile menu, FAQ, and app directory use native `
`. + 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 `
`. diff --git a/content/_index.md b/content/_index.md index 8964f96..a508f80 100644 --- a/content/_index.md +++ b/content/_index.md @@ -65,6 +65,15 @@ sections: body: | Federated Computer is built in layers, so you can start with just the apps, add AI when you're ready, or take everything, agents included. Start in the foothills and work your way to the top of the mountain. + - type: logos + source: "apps" + kicker: "Software Library" + headline: "Runs the Apps Your Team Already Knows" + ctas: + - label: "Browse All 100+ Apps →" + url: "/product/software-library/" + style: text + - type: layers tinted: true kicker: "The Federated Advantage" @@ -120,6 +129,20 @@ sections: url: "/solutions/#compare" style: text + - type: cards + kicker: "Why Federated" + headline: "Built by People Who Answer the Phone" + lede: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua." + items: + - title: "Real human support" + body: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio praesent libero, sed cursus ante dapibus diam." + - title: "Unlimited users" + body: "Sed nisi nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum, praesent mauris fusce nec tellus." + - title: "Free 7-day trial" + body: "Mauris massa vestibulum lacinia arcu eget nulla. Class aptent taciti sociosqu ad litora torquent per conubia nostra." + - title: "Single-tenant by design" + body: "Curabitur sodales ligula in libero. Sed dignissim lacinia nunc, curabitur tortor pellentesque nibh aenean quam." + - type: text bordered: true kicker: "The Architecture" @@ -176,6 +199,16 @@ sections: label: "Try the full calculator" url: "/pricing/#savings" + - type: banner + badge: "News" + kicker: "Announcement" + headline: "Lorem ipsum dolor sit amet, consectetur adipiscing elit" + body: "Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris." + ctas: + - label: "Read the announcement" + url: "#" + style: primary + - type: text bordered: true kicker: "Our Team" @@ -187,6 +220,29 @@ sections: url: "/about/" style: text + - type: news + kicker: "Updates" + headline: "What's New at Federated" + items: + - tag: "Blog" + date: "Sep 2026" + title: "Lorem ipsum dolor sit amet, consectetur adipiscing elit" + - tag: "Video" + date: "Sep 2026" + title: "Sed do eiusmod tempor incididunt ut labore et dolore magna" + - tag: "Event" + date: "Aug 2026" + title: "Ut enim ad minim veniam, quis nostrud exercitation ullamco" + - tag: "Blog" + date: "Aug 2026" + title: "Duis aute irure dolor in reprehenderit in voluptate velit" + - tag: "Release" + date: "Jul 2026" + title: "Excepteur sint occaecat cupidatat non proident, sunt in culpa" + - tag: "Video" + date: "Jul 2026" + title: "Nemo enim ipsam voluptatem quia voluptas sit aspernatur" + - type: final-cta dark: true headline: "Save money. Keep your data. Get AI that actually works for you." diff --git a/hugo.toml b/hugo.toml index 09e9283..abbfd7a 100644 --- a/hugo.toml +++ b/hugo.toml @@ -53,39 +53,57 @@ disableKinds = ["taxonomy", "term", "RSS", "sitemap", "robotsTXT", "404"] name = "Open-Source Apps" url = "/solutions/open-source-apps/" weight = 10 + [menu.solutions.params] + desc = "For teams leaving Google Workspace or Microsoft 365" [[menu.solutions]] name = "Apps + AI Development" url = "/solutions/apps-and-ai-development/" weight = 20 + [menu.solutions.params] + desc = "Build AI on your own business data" [[menu.solutions]] name = "AI for Your Own Apps" url = "/solutions/ai-for-your-apps/" weight = 30 + [menu.solutions.params] + desc = "Connect the open-source apps you already host" [[menu.solutions]] name = "The Full Stack" url = "/solutions/full-stack/" weight = 40 + [menu.solutions.params] + desc = "Apps, AI development, and agents that do real work" [[menu.solutions]] name = "Compare All Four" url = "/solutions/#compare" weight = 50 + [menu.solutions.params] + desc = "See all four paths side by side" [[menu.product]] name = "Federated Core" url = "/product/federated-core/" weight = 10 + [menu.product.params] + desc = "Provisioning, storage, backup, federated learning" [[menu.product]] name = "Software Library" url = "/product/software-library/" weight = 20 + [menu.product.params] + desc = "100+ AI-ready open-source apps" [[menu.product]] name = "Agent Sandbox" url = "/product/agent-sandbox/" weight = 30 + [menu.product.params] + desc = "High-density, instant-wake AI agents" [[menu.product]] name = "Data & Controls" url = "/product/data-controls/" weight = 40 + [menu.product.params] + desc = "Version control, testing, and monitoring" [[menu.footer_solutions]] name = "Open-Source Apps" diff --git a/layouts/_default/baseof.html b/layouts/_default/baseof.html index 6724c0b..2ae2c8a 100644 --- a/layouts/_default/baseof.html +++ b/layouts/_default/baseof.html @@ -5,18 +5,20 @@ -
- {{ partial "header.html" . }} -
- {{ block "main" . }}{{ end }} - {{ partial "footer.html" . }} -
-
+ {{ partial "header.html" . }} +
+ {{ block "main" . }}{{ end }} +
+ {{ partial "footer.html" . }} + + @@ -916,7 +401,8 @@
- +
+ @@ -925,6 +411,369 @@
+ +
+ + + + + + +
+
+ + + + +
+

Software Library

+

Runs the Apps Your Team Already Knows

+ +
+ + + + + +
+ + + + + + Browse All 100+ Apps + + +
+ +
@@ -933,7 +782,8 @@
- +
+
@@ -953,7 +803,7 @@ Federated Core The foundation — provisioning, storage, backup, and federated learning, so your business can train AI on your own data without sending it anywhere. - + Learn more @@ -965,7 +815,7 @@ Software Library 100+ open-source apps — Nextcloud, Discourse, EspoCRM, and more — every one AI-ready out of the box. - + Learn more @@ -977,7 +827,7 @@ Agent Sandbox High-density, instant-wake AI agents that do real work — safely isolated, just for you. - + Learn more @@ -989,13 +839,14 @@ Data & Controls The DevOps layer that lets your team (or your AI) ship, test, and monitor code automatically. - + Learn more +
@@ -1004,7 +855,8 @@
- +
+ @@ -1242,6 +1094,73 @@
+ +
+ + + + + + +
+
+ + + + +
+

Why Federated

+

Built by People Who Answer the Phone

+

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

+
+ + +
    + +
  • + +
    + +

    Real human support

    +

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio praesent libero, sed cursus ante dapibus diam.

    + +
    +
    • + +
  • + +
    + +

    Unlimited users

    +

    Sed nisi nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum, praesent mauris fusce nec tellus.

    + +
    +
    • + +
  • + +
    + +

    Free 7-day trial

    +

    Mauris massa vestibulum lacinia arcu eget nulla. Class aptent taciti sociosqu ad litora torquent per conubia nostra.

    + +
    +
    • + +
  • + +
    + +

    Single-tenant by design

    +

    Curabitur sodales ligula in libero. Sed dignissim lacinia nunc, curabitur tortor pellentesque nibh aenean quam.

    + +
    +
    • + +
+ + +
@@ -1250,7 +1169,8 @@
- +
+
@@ -1274,6 +1194,7 @@
+
@@ -1282,7 +1203,8 @@
- +
+ @@ -1341,6 +1263,7 @@ +
@@ -1349,7 +1272,8 @@
- +
+ @@ -1639,6 +1563,38 @@ +
+
+ + + + + + +
+
+ + + + +
@@ -1647,7 +1603,8 @@
- +
+
@@ -1671,6 +1628,81 @@
+
+
+ + + + + + +
+
+ + + + +
+

Updates

+

What’s New at Federated

+ +
+ + + + + +
@@ -1678,18 +1710,18 @@ -