move to top banner

layouts/partials/sections/banner.html

@@ -0,0 +1,14 @@
+{{/*
+  An announcement banner: a dark rounded plate with an optional `badge`
+  (short label on the left), `kicker`, `headline`, `body`, and `ctas`.
+*/}}
+{{ $s := . }}
+<div class="banner">
+  {{ with $s.badge }}<div class="banner-badge"><span>{{ . }}</span></div>{{ end }}
+  <div class="banner-copy">
+    {{ with $s.kicker }}<p class="eyebrow">{{ . }}</p>{{ end }}
+    {{ with $s.headline }}<h2 class="banner-title">{{ . | markdownify }}</h2>{{ end }}
+    {{ with $s.body }}<p class="banner-text">{{ . | markdownify }}</p>{{ end }}
+  </div>
+  {{ if $s.ctas }}<div class="actions">{{ partial "sections/ctas.html" $s.ctas }}</div>{{ end }}
+</div>

layouts/partials/sections/cards.html

@@ -0,0 +1,22 @@
+{{/*
+  A grid of cards: `items`, each with `title`, `body`, optional `label`
+  (a small tag above the title), `image`, and `link` (+ `linktext`).
+  Without an image, `visual: true` draws a gradient panel in its place.
+*/}}
+{{ $s := . }}
+{{ partial "sections/head.html" $s }}
+<ul class="card-grid{{ with $s.columns }} cols-{{ . }}{{ end }}">
+  {{ range $i, $c := $s.items }}
+  <li class="card{{ if or $c.image $s.visual }} has-visual{{ end }}">
+    {{ with $c.image }}<img class="card-visual" src="{{ . | relURL }}" alt="" loading="lazy">
+    {{ else }}{{ if $s.visual }}<span class="card-visual card-art" style="--i:{{ $i }}" aria-hidden="true"></span>{{ end }}{{ end }}
+    <div class="card-body">
+      {{ with $c.label }}<span class="card-label">{{ . }}</span>{{ end }}
+      <h3 class="card-title">{{ $c.title | markdownify }}</h3>
+      {{ with $c.body }}<p class="card-text">{{ . | markdownify }}</p>{{ end }}
+      {{ with $c.link }}<a class="more card-link" href="{{ . | relURL }}">{{ replaceRE `\s*[→↗]\s*$` "" ($c.linktext | default "Learn more") }}<span class="arrow" aria-hidden="true">→</span></a>{{ end }}
+    </div>
+  </li>
+  {{ end }}
+</ul>
+{{ if $s.ctas }}<div class="cta-row">{{ partial "sections/ctas.html" $s.ctas }}</div>{{ end }}

layouts/partials/sections/ctas.html

@@ -1,7 +1,7 @@
 {{/*
-  Buttons. `primary` is the solid blue button with a leading arrow tile,
-  `ghost` the pale blue secondary with corner ticks, `text` a quiet link
-  with an arrow. Any trailing "→" in a label is dropped — the arrow is drawn.
+  Buttons. `primary` is the solid lime button, `ghost` the outlined
+  secondary, `text` a quiet link with an arrow. Any trailing "→" in a
+  label is dropped — the arrow is drawn.
 */}}
 {{ range . }}
   {{ $label := replaceRE `\s*[→↗]\s*$` "" .label }}
@@ -12,9 +12,6 @@
   {{ else if eq .style "text" }}
     <a href="{{ $href }}" class="more">{{ $label }}<span class="arrow" aria-hidden="true">{{ if $external }}↗{{ else }}→{{ end }}</span></a>
   {{ else }}
-    <a href="{{ $href }}" class="btn btn-primary">
-      <span class="btn-tile" aria-hidden="true"><svg viewBox="0 0 16 16" width="14" height="14" fill="none"><path d="M3 8h9M8.5 4.5 12 8l-3.5 3.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="square"/></svg></span>
-      <span class="btn-label">{{ $label }}</span>
-    </a>
+    <a href="{{ $href }}" class="btn btn-primary">{{ $label }}<span class="arrow" aria-hidden="true">{{ if $external }}↗{{ else }}→{{ end }}</span></a>
   {{ end }}
 {{ end }}

layouts/partials/sections/final-cta.html

@@ -1,6 +1,10 @@
 {{ $s := . }}
 <aside class="cta" data-reveal>
-  <h2 class="cta-title">{{ $s.headline | markdownify }}</h2>
-  {{ with $s.body }}<p class="cta-text">{{ . | markdownify }}</p>{{ end }}
-  {{ if $s.ctas }}<div class="actions">{{ partial "sections/ctas.html" $s.ctas }}</div>{{ end }}
+  <div class="wrap cta-inner">
+    <div class="cta-copy">
+      <h2 class="cta-title">{{ $s.headline | markdownify }}</h2>
+      {{ with $s.body }}<p class="cta-text">{{ . | markdownify }}</p>{{ end }}
+    </div>
+    {{ if $s.ctas }}<div class="actions">{{ partial "sections/ctas.html" $s.ctas }}</div>{{ end }}
+  </div>
 </aside>

layouts/partials/sections/hero.html

@@ -1,26 +1,30 @@
 {{/*
-  The opening of every page: an optional note (the eyebrow), the statement,
-  the dek, the actions — then either the layer panel (when `fit:` is set)
-  or the field, a blue plate with the platform's four layers drawn as bars.
-  `bars: false` drops the field.
+  The opening of every page: a full-bleed dark band. On the left, an
+  optional note (the eyebrow), the statement, the dek, the actions; on the
+  right, the agent log (when `log:` is set), the layer panel (when `fit:`
+  is set), or the field — the platform's four layers drawn as bars.
+  `bars: false` drops the field. `logImage` sets a photo behind the whole band.
 */}}
 {{ $s := . }}
-<header class="hero{{ if $s.compact }} hero-compact{{ end }}">
+{{ $visual := or $s.log $s.fit (ne $s.bars false) }}
+<header class="hero{{ if $s.compact }} hero-compact{{ end }}{{ if $visual }} has-visual{{ end }}{{ if $s.logImage }} has-image{{ end }}">
+  {{ with $s.logImage }}<img class="hero-bg" src="{{ . | relURL }}" alt="" fetchpriority="high">{{ end }}
+  <div class="wrap hero-grid">
+  <div class="hero-copy">
   {{ with $s.eyebrow }}<p class="note" data-reveal><span class="note-live" aria-hidden="true"></span><span class="note-text">{{ . }}</span></p>{{ end }}
   <h1 class="statement" data-reveal style="--d:80ms">{{ $s.title | markdownify }}</h1>
   {{ with $s.subhead }}<p class="dek" data-reveal style="--d:140ms">{{ . | markdownify }}</p>{{ end }}
   {{ if $s.ctas }}<div class="actions" data-reveal style="--d:200ms">{{ partial "sections/ctas.html" $s.ctas }}</div>{{ end }}
+  </div>
 
   {{ with $s.log }}
     {{/*
       An agent's activity log, typed out line by line (see the script below).
       Lines take `tag` + `text`; `think: true` marks a reasoning step (greyed,
       with a pause); `done: true` closes the run. The window keeps a fixed
-      height and scrolls as lines arrive. `logImage` swaps the blue field for
-      a photo; `logCaption` credits it.
+      height and scrolls as lines arrive. `logCaption` credits the photo.
     */}}
-    <figure class="hero-field hero-log{{ if $s.logImage }} has-image{{ end }}" data-reveal style="--d:260ms">
-      {{ with $s.logImage }}<img class="log-bg" src="{{ . | relURL }}" alt="" fetchpriority="high">{{ end }}
+    <figure class="hero-log" data-reveal style="--d:260ms">
       <div class="log-window">
         <div class="log-bar">
           <span class="log-title">{{ $s.logTitle | default "agent · your-company.federated.computer" }}</span>
@@ -37,7 +41,6 @@
         </ol>
         </div>
       </div>
-      {{ with $s.logCaption }}<figcaption class="log-caption">{{ . }}</figcaption>{{ end }}
     </figure>
     <script>
       (function () {
@@ -106,4 +109,6 @@
     {{ end }}
   {{ end }}
   {{ end }}
+  </div>
+  {{ with $s.logCaption }}<p class="hero-caption">{{ . }}</p>{{ end }}
 </header>

layouts/partials/sections/layers.html

@@ -10,7 +10,7 @@
         <span class="entry-title">{{ $item.title }}</span>
         <span class="entry-text">{{ $item.body | markdownify }}</span>
       </span>
-      <span class="entry-go">{{ with $item.linktext }}{{ replaceRE `\s*[→↗]\s*$` "" . }}{{ end }}<span class="arrow" aria-hidden="true">→</span></span>
+      <span class="entry-go">{{ replaceRE `\s*[→↗]\s*$` "" ($item.linktext | default "Learn more") }}<span class="arrow" aria-hidden="true">→</span></span>
     </a>
   </li>
   {{ end }}

layouts/partials/sections/logos.html

@@ -0,0 +1,24 @@
+{{/*
+  A logo wall. `source: "apps"` fills it from data/app_wall.yaml (icons from
+  the sprite at images/app-icons.svg; a tile without an icon shows its first
+  letter). Otherwise `items`, each a `name` and optional `url`, render as
+  wordmarks.
+*/}}
+{{ $s := . }}
+{{ partial "sections/head.html" $s }}
+{{ $sprite := "images/app-icons.svg" | relURL }}
+{{ $items := cond (eq $s.source "apps") hugo.Data.app_wall ($s.items | default slice) }}
+<ul class="logo-wall">
+  {{ range $items }}
+  <li>
+    {{ if .url }}<a class="logo-tile" href="{{ .url | relURL }}">{{ else }}<span class="logo-tile">{{ end }}
+      {{ if eq $s.source "apps" }}
+        {{ with .icon }}<svg class="logo-icon" aria-hidden="true"><use href="{{ $sprite }}#{{ . }}"></use></svg>
+        {{ else }}<span class="logo-icon logo-letter" aria-hidden="true">{{ substr .name 0 1 }}</span>{{ end }}
+      {{ end }}
+      <span class="logo-name">{{ .name }}</span>
+    {{ if .url }}</a>{{ else }}</span>{{ end }}
+  </li>
+  {{ end }}
+</ul>
+{{ if $s.ctas }}<div class="cta-row">{{ partial "sections/ctas.html" $s.ctas }}</div>{{ end }}

layouts/partials/sections/news.html

@@ -0,0 +1,20 @@
+{{/*
+  "What's new": a grid of linked cards. `items`, each with `tag` (e.g.
+  Blog, Video, Event), `title`, optional `date`, `url`, and `image`
+  (a gradient panel shows without one).
+*/}}
+{{ $s := . }}
+{{ partial "sections/head.html" $s }}
+<ul class="news-grid">
+  {{ range $i, $n := $s.items }}
+  <li>
+    <a class="news-card" href="{{ $n.url | default "#" | relURL }}">
+      {{ with $n.image }}<img class="news-visual" src="{{ . | relURL }}" alt="" loading="lazy">
+      {{ else }}<span class="news-visual card-art" style="--i:{{ $i }}" aria-hidden="true">{{ if eq $n.tag "Video" }}<span class="news-play"></span>{{ end }}</span>{{ end }}
+      <span class="news-meta">{{ with $n.tag }}<span class="news-tag">{{ . }}</span>{{ end }}{{ with $n.date }}<span class="news-date">{{ . }}</span>{{ end }}</span>
+      <span class="news-title">{{ $n.title }}</span>
+    </a>
+  </li>
+  {{ end }}
+</ul>
+{{ if $s.ctas }}<div class="cta-row">{{ partial "sections/ctas.html" $s.ctas }}</div>{{ end }}

layouts/partials/sections/wrapper.html

@@ -1,5 +1,7 @@
 {{ $s := . }}
 {{ $id := partial "section-id.html" $s }}
 <section class="section section-{{ $s.type }}"{{ with $id }} id="{{ . }}"{{ end }} data-reveal>
-  {{ partial (printf "sections/%s.html" $s.type) $s }}
+  <div class="wrap">
+    {{ partial (printf "sections/%s.html" $s.type) $s }}
+  </div>
 </section>