@omega.js/web 0.1.0

package/themes/base/_layouts/frontend/pages/team/member.html

@@ -0,0 +1,125 @@
+---
+layout: frontend/core/base
+---
+
+<!-- ═══ Member — portrait split ═══ -->
+<section class="omega-dotgrid" data-omega-dotfield>
+  <div class="container">
+    {%- capture member_name -%}{%- omega_member resolved.member.id, "name" -%}{%- endcapture -%}
+    {%- assign first_name = member_name | split: ' ' | first -%}
+
+    <!-- Mono breadcrumb -->
+    <div class="omega-post-card__eyebrow mb-4" data-omega-reveal>
+      <a href="/team">Team</a>
+      <span>/</span>
+      <span>{{ member_name }}</span>
+    </div>
+
+    <div class="omega-duo" style="--omega-duo-cols: 4fr 8fr;">
+      <!-- Portrait panel + facts -->
+      <div class="omega-duo__aside" data-omega-reveal>
+        <div class="omega-person mb-4">
+          <span class="omega-person__portrait">
+            {%- omega_member resolved.member.id, "image-tag", class="" -%}
+          </span>
+        </div>
+
+        {% if resolved.member.location or resolved.member.joined %}
+          <div class="omega-rowlist">
+            {% iftruthy resolved.member.location %}
+              <div class="omega-rowlist__item">
+                <span>{{ resolved.member.location }}</span>
+                <span class="omega-rowlist__meta">Location</span>
+              </div>
+            {% endiftruthy %}
+            {% iftruthy resolved.member.joined %}
+              <div class="omega-rowlist__item">
+                <span>{{ resolved.member.joined | date: "%B %Y" }}</span>
+                <span class="omega-rowlist__meta">Joined</span>
+              </div>
+            {% endiftruthy %}
+          </div>
+        {% endif %}
+      </div>
+
+      <!-- Identity + bio -->
+      <div data-omega-reveal-stagger="80">
+        <h1 class="omega-display omega-display--page" data-omega-reveal>{{ member_name }}</h1>
+
+        <div class="d-flex align-items-center gap-3 flex-wrap mt-2 mb-4" data-omega-reveal>
+          <span class="omega-micro">{{ resolved.member.position }}</span>
+          {% iftruthy resolved.member.links %}
+            <span class="d-inline-flex gap-2">
+              {% for link in resolved.member.links %}
+                {% assign link_icon = link.id %}
+                {% if link.id == "website" %}{% assign link_icon = "globe" %}{% endif %}
+                <a href="{{ link.url }}" class="omega-icon-link" target="_blank" rel="nofollow noopener" title="{{ link.title }}">
+                  <i class="fa-solid fa-{{ link_icon }} fa-sm"></i>
+                </a>
+              {% endfor %}
+            </span>
+          {% endiftruthy %}
+        </div>
+
+        {% iftruthy resolved.member.description %}
+          <p class="omega-statement mb-4" data-omega-reveal>{{ resolved.member.description }}</p>
+        {% endiftruthy %}
+
+        {% if resolved.member.skills or resolved.member.hobbies %}
+          <div class="omega-chip-cloud justify-content-start mb-4" data-omega-reveal>
+            {% for skill in resolved.member.skills %}
+              <span class="omega-chip">{{ skill }}</span>
+            {% endfor %}
+            {% for hobby in resolved.member.hobbies %}
+              <span class="omega-chip omega-chip--accent">{{ hobby }}</span>
+            {% endfor %}
+          </div>
+        {% endif %}
+
+        <div class="omega-prose" data-omega-reveal>
+          {{ content | omega_content_format }}
+        </div>
+      </div>
+    </div>
+  </div>
+</section>
+
+<!-- ═══ The rest of the team ═══ -->
+{% assign _others_count = 0 %}
+{% for other in site.team %}
+  {% unless other.url == page.url %}{% assign _others_count = _others_count | plus: 1 %}{% endunless %}
+{% endfor %}
+{% if _others_count > 0 %}
+  <section class="pt-0">
+    <div class="container">
+      <div class="d-flex align-items-center justify-content-between flex-wrap gap-2 mb-4" data-omega-reveal>
+        <h2 class="omega-panel-head justify-content-start h5 mb-0">More of the team</h2>
+        <a href="/team" class="text-decoration-none small">
+          Everyone
+          <i class="fa-solid fa-arrow-right fa-xs ms-1"></i>
+        </a>
+      </div>
+
+      <div class="row g-4" data-omega-reveal-stagger="70">
+        {% assign _shown = 0 %}
+        {% for other in site.team %}
+          {% if other.url == page.url or _shown >= 4 %}{% continue %}{% endif %}
+          {% assign _shown = _shown | plus: 1 %}
+          <div class="col-lg-3 col-md-4 col-6" data-omega-reveal>
+            <div class="omega-person">
+              <a href="{{ other.url }}" class="omega-person__portrait">
+                {%- omega_member other.id, "image-tag", class="" -%}
+              </a>
+              <div class="omega-person__body">
+                <h3 class="omega-person__name">
+                  <a href="{{ other.url }}">{%- omega_member other.id, "name" -%}</a>
+                </h3>
+                <span class="omega-micro omega-person__role">{{ other.member.position }}</span>
+              </div>
+            </div>
+          </div>
+        {% endfor %}
+      </div>
+    </div>
+  </section>
+{% endif %}

package/themes/base/_layouts/frontend/pages/updates/index.html

@@ -0,0 +1,119 @@
+---
+layout: frontend/core/base
+
+# ═══ /updates — reimagined 2026-07-16: a version TIMELINE (hairline spine,
+# version nodes, latest release featured) instead of a stack of identical
+# cards. Data: site.updates (update.version/title/date/summary/highlights).
+
+# Hero Section
+hero:
+  headline: "What changed, and"
+  headline_accent: "when"
+  subheadline: "Every release, its reasons, and the fine print. Newest first."
+
+# Updates Section
+updates:
+  empty_message: "No releases yet. The first one will land right here."
+  view_details: "Read the release notes"
+  latest_badge: "Latest"
+---
+
+<!-- ═══ Masthead ═══ -->
+{% comment %} #467 (after #749): this masthead IS the page's first viewport, so
+the band paints with the document — data-omega-first-paint on the section, no
+stagger container, and the masthead cluster on its first_paint switch. The
+bands below keep the reveal lane. {% endcomment %}
+<section class="omega-dotgrid pb-4" data-omega-first-paint data-omega-dotfield>
+  <div class="container">
+    {% component "heading/masthead", eyebrow: "Changelog", headline: resolved.hero.headline, headline_accent: resolved.hero.headline_accent, sub: resolved.hero.subheadline, first_paint: true %}
+  </div>
+</section>
+
+<!-- ═══ The timeline ═══ -->
+<section class="pt-2">
+  <div class="container">
+    <div class="row justify-content-center">
+      <div class="col-lg-9 col-xl-8">
+        {% if site.updates %}
+          {% assign updates = site.updates | sort: 'update.date' | reverse %}
+        {% else %}
+          {% assign updates = nil %}
+        {% endif %}
+
+        {% if updates and updates.size > 0 %}
+          <div class="omega-timeline" id="updates-list">
+            {% for item in updates %}
+              {% if item.draft and jekyll.environment == 'production' %}
+                {% continue %}
+              {% endif %}
+
+              <article class="omega-timeline__entry {% if forloop.first %}omega-timeline__entry--latest{% endif %}" data-omega-reveal>
+                <div class="omega-timeline__node" aria-hidden="true">
+                  <span class="omega-timeline__dot"></span>
+                </div>
+
+                <div class="omega-timeline__meta">
+                  <span class="omega-timeline__version font-monospace">v{{ item.update.version }}</span>
+                  {% if forloop.first %}
+                    <span class="omega-status omega-status--ok"><span class="omega-dot omega-dot--ok"></span>{{ resolved.updates.latest_badge }}</span>
+                  {% endif %}
+                  <time class="omega-quiet small" datetime="{{ item.update.date | date: '%Y-%m-%d' }}">{{ item.update.date | date: "%b %d, %Y" }}</time>
+                </div>
+
+                <div class="omega-timeline__body">
+                  <h2 class="omega-timeline__title">
+                    <a href="{{ item.url }}" class="stretched-link">
+                      {% iftruthy item.update.title %}{{ item.update.title }}{% endiftruthy %}
+                      {% iffalsy item.update.title %}Version {{ item.update.version }}{% endiffalsy %}
+                    </a>
+                  </h2>
+
+                  {% iftruthy item.update.summary %}
+                    <p class="omega-timeline__summary omega-quiet">{{ item.update.summary }}</p>
+                  {% endiftruthy %}
+
+                  {% iftruthy item.update.highlights %}
+                    <div class="d-flex flex-wrap gap-2 mt-2">
+                      {% for highlight in item.update.highlights %}
+                        <span class="omega-chip">{{ highlight.text }}</span>
+                      {% endfor %}
+                    </div>
+                  {% endiftruthy %}
+
+                  <span class="omega-timeline__more small">
+                    {{ resolved.updates.view_details }}
+                    <i class="fa-solid fa-arrow-right fa-xs ms-1"></i>
+                  </span>
+                </div>
+              </article>
+            {% endfor %}
+          </div>
+        {% else %}
+          <div class="omega-status-empty" data-omega-reveal>
+            <span class="omega-dot"></span>
+            <span>{{ resolved.updates.empty_message }}</span>
+          </div>
+        {% endif %}
+      </div>
+    </div>
+  </div>
+</section>
+
+<!-- ═══ Cross-links ═══ -->
+<section class="pt-0">
+  <div class="container">
+    <div class="d-flex justify-content-center align-items-center gap-3 omega-quiet small flex-wrap" data-omega-reveal>
+      <a href="/status" class="text-decoration-none">
+        <i class="fa-solid fa-signal fa-xs me-1"></i>
+        System status
+      </a>
+      <span>•</span>
+      <a href="/blog" class="text-decoration-none">
+        <i class="fa-solid fa-newspaper fa-xs me-1"></i>
+        The blog
+      </a>
+    </div>
+  </div>
+</section>
+
+{{ content | omega_content_format }}

package/themes/base/_layouts/frontend/pages/updates/update.html

@@ -0,0 +1,118 @@
+---
+layout: frontend/core/cover
+
+# Update Section
+update:
+  version: null
+  title: null
+  date: null
+  summary: null
+  highlights: []
+  type: "release"  # release, hotfix, security, maintenance
+
+# Navigation
+navigation:
+  back_text: "All updates"
+  back_url: "/updates"
+---
+
+<!-- Hero Section -->
+<section class="update-hero omega-dotgrid py-5" data-omega-dotfield>
+  <div class="container">
+    <div class="row justify-content-center">
+      <div class="col-lg-10" data-omega-reveal>
+        <!-- Mono breadcrumb -->
+        <div class="omega-post-card__eyebrow mb-4">
+          <a href="{{ resolved.navigation.back_url }}">{{ resolved.navigation.back_text }}</a>
+          <span>/</span>
+          <span>v{{ resolved.update.version }}</span>
+        </div>
+
+        <!-- Update Header -->
+        <div class="card update-header-card">
+          <div class="card-body p-4">
+            <div class="d-flex align-items-start gap-3 flex-wrap">
+              <span class="omega-icon-chip omega-icon-chip--neutral omega-icon-chip--lg flex-shrink-0">
+                {% if resolved.update.type == "security" %}
+                  <i class="fa-solid fa-shield-halved fa-lg"></i>
+                {% elsif resolved.update.type == "hotfix" %}
+                  <i class="fa-solid fa-bug fa-lg"></i>
+                {% elsif resolved.update.type == "maintenance" %}
+                  <i class="fa-solid fa-wrench fa-lg"></i>
+                {% else %}
+                  <i class="fa-solid fa-rocket fa-lg"></i>
+                {% endif %}
+              </span>
+              <div class="flex-grow-1">
+                <div class="d-flex align-items-center gap-2 mb-1 flex-wrap">
+                  <h1 class="omega-display omega-display--section mb-0">Version {{ resolved.update.version }}</h1>
+                  {% if resolved.update.type == "security" %}
+                    <span class="omega-status omega-status--danger"><span class="omega-dot omega-dot--danger"></span>Security</span>
+                  {% elsif resolved.update.type == "hotfix" %}
+                    <span class="omega-status omega-status--warn"><span class="omega-dot omega-dot--warn"></span>Hotfix</span>
+                  {% elsif resolved.update.type == "maintenance" %}
+                    <span class="omega-status"><span class="omega-dot"></span>Maintenance</span>
+                  {% else %}
+                    <span class="omega-chip omega-chip--accent">Release</span>
+                  {% endif %}
+                </div>
+                {% iftruthy resolved.update.title %}
+                  <p class="fs-5 text-muted mb-2">{{ resolved.update.title }}</p>
+                {% endiftruthy %}
+                <div class="text-muted small">
+                  <i class="fa-solid fa-calendar me-1"></i>
+                  {{ resolved.update.date | date: "%B %d, %Y" }}
+                </div>
+              </div>
+            </div>
+
+            {% iftruthy resolved.update.highlights %}
+              <div class="mt-4 pt-3 hairline-top">
+                <div class="d-flex flex-wrap gap-2">
+                  {% for highlight in resolved.update.highlights %}
+                    <span class="omega-chip">
+                      {{ highlight.text }}
+                    </span>
+                  {% endfor %}
+                </div>
+              </div>
+            {% endiftruthy %}
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</section>
+
+<!-- Update Content Section -->
+<section class="py-5">
+  <div class="container">
+    <div class="row justify-content-center">
+      <div class="col-lg-10">
+        <div class="update-content omega-prose" data-omega-reveal>
+          {{ content | omega_content_format }}
+        </div>
+      </div>
+    </div>
+  </div>
+</section>
+
+<!-- Navigation Section -->
+<section class="py-5 pt-0">
+  <div class="container">
+    <div class="row justify-content-center">
+      <div class="col-lg-10">
+        <div class="d-flex justify-content-between align-items-center flex-wrap gap-3" data-omega-reveal>
+          <a href="{{ resolved.navigation.back_url }}" class="text-decoration-none">
+            <i class="fa-solid fa-arrow-left me-1"></i>
+            {{ resolved.navigation.back_text }}
+          </a>
+          <a href="/status" class="text-decoration-none">
+            View system status
+            <i class="fa-solid fa-arrow-right ms-1"></i>
+          </a>
+        </div>
+      </div>
+    </div>
+  </div>
+</section>

package/themes/base/_sections/about/hero/section.html

@@ -0,0 +1,68 @@
+{% capture facts_rail %}
+  {% for stat in args.facts %}
+    <div class="omega-facts__item">
+      <span class="omega-micro omega-facts__label">{{ stat.label }}</span>
+      {%- comment %} A value is TEXT, never markup (#580). {% endcomment -%}
+      <span class="omega-facts__value omega-facts__value--num" data-omega-countup>{{ stat.number | escape_once }}</span>
+    </div>
+  {% endfor %}
+{% endcapture %}
+{% comment %} The stats band head (legacy parity): the rail's own
+superheadline/headline/subheadline, rendered only when a composition authors
+them — an unauthored rail is the bare grid it has always been. {% endcomment %}
+{% capture facts_head %}
+  {% component "heading/section-head", superheadline: args.facts_head.superheadline.text, headline: args.facts_head.headline, headline_accent: args.facts_head.headline_accent, sub: args.facts_head.subheadline %}
+{% endcapture %}
+{% assign facts_head = facts_head | strip %}
+{% comment %} #467 (after #749): about/hero IS the about page's first viewport,
+so the whole band paints with the document — data-omega-first-paint on the
+section, and no reveal attributes or stagger container inside it. The bands
+below keep the scroll lane. {% endcomment %}
+<section class="omega-dotgrid{% if args.image != blank %} omega-photo-lead-band{% endif %}" data-omega-first-paint data-omega-dotfield>
+  <div class="container">
+    {% if args.image != blank %}
+      <!-- Photo lead: the picture opens the page, the words ride it -->
+      <figure class="omega-photo-lead">
+        <img class="omega-photo-lead__img" src="{{ args.placeholder }}" data-lazy="@src {{ args.image }}" alt="{{ args.image_alt }}"/>
+        <figcaption class="omega-photo-lead__words">
+          {% component "heading/masthead", eyebrow: args.superheadline.text | default: args.eyebrow, headline: args.headline, headline_accent: args.headline_accent, sub: args.description, sub_class: "omega-photo-lead__sub", first_paint: true %}
+        </figcaption>
+      </figure>
+
+      {% if args.facts %}
+        {% iftruthy facts_head %}
+          <div class="omega-section-head mt-5">
+            {{ facts_head }}
+          </div>
+        {% endiftruthy %}
+        <div class="omega-facts omega-photo-lead__facts" style="--omega-facts-cols: 4;">
+          {{ facts_rail }}
+        </div>
+      {% endif %}
+    {% else %}
+      <div class="omega-hero-split">
+        <div>
+          {% component "heading/masthead", eyebrow: args.superheadline.text | default: args.eyebrow, headline: args.headline, headline_accent: args.headline_accent, sub: args.description, first_paint: true %}
+        </div>
+
+        {% if args.facts %}
+          {% iftruthy facts_head %}
+            <div>
+              <div class="omega-section-head mb-4">
+                {{ facts_head }}
+              </div>
+              <div class="omega-facts" style="--omega-facts-cols: 2;">
+                {{ facts_rail }}
+              </div>
+            </div>
+          {% endiftruthy %}
+          {% iffalsy facts_head %}
+            <div class="omega-facts" style="--omega-facts-cols: 2;">
+              {{ facts_rail }}
+            </div>
+          {% endiffalsy %}
+        {% endif %}
+      </div>
+    {% endif %}
+  </div>
+</section>

package/themes/base/_sections/about/hero/section.json5

@@ -0,0 +1,58 @@
+{
+  description: 'About hero — the dotgrid statement with the facts rail: masthead heading on the left, a 2-col count-up facts grid on the right. Supply image: and the band flips to the PHOTO LEAD: the picture opens the page, the masthead rides it on a scrim, and the facts run as a 4-col rail beneath. No image = the statement layout, unchanged. The layout bridges the page\'s hero words via data: and the facts rail via facts:. Author facts_head (superheadline/headline/subheadline) and the rail gains the stats band\'s own head; leave it unset and the rail renders bare, exactly as before.',
+
+  args: {
+    eyebrow: 'string', // masthead eyebrow fallback; a superheadline.text arg (legacy key) wins over it
+    superheadline: 'object', // { text } — legacy hero key, kept for the resolved bridge
+    headline: 'string',
+    headline_accent: 'string',
+    description: 'string',
+    facts: 'array', // [{ label, number }] — the right-rail count-up grid; absent = statement only
+    facts_head: 'object', // { superheadline: { text }, headline, headline_accent, subheadline } — the stats band's own head above the rail (legacy parity); unauthored = the bare rail
+    image: 'string', // the lead photo; unset = the statement layout (no frame, no hole)
+    image_alt: 'string', // what the photo SHOWS — content imagery, never decoration
+    placeholder: 'string', // first-paint img src swapped by the lazy loader
+  },
+
+  defaults: {
+    eyebrow: 'About {{ resolved.config.brand.name }}',
+    superheadline: {},
+    // No head copy here: the band head is the PAGE's words, and an
+    // unauthored rail must render exactly as it always has.
+    facts_head: { superheadline: {} },
+    headline: 'We make complex things <em>feel simple</em>',
+    headline_accent: '',
+    description: 'The people and stubborn opinions behind {{ resolved.config.brand.name }}.',
+    image: '',
+    image_alt: '',
+    placeholder: '{{ site.omega.placeholder.src }}',
+  },
+
+  demo: [
+    { label: 'Statement only' },
+    {
+      label: 'With facts rail',
+      args: {
+        facts: [
+          { number: '2017', label: 'Founded' },
+          { number: '50+', label: 'Team members' },
+          { number: '1M+', label: 'Happy customers' },
+          { number: '120+', label: 'Countries' },
+        ],
+      },
+    },
+    {
+      label: 'Photo lead',
+      args: {
+        image: '/assets/images/core/placeholder/photo-1.jpg',
+        image_alt: 'Placeholder artwork in warm amber tones',
+        facts: [
+          { number: '2017', label: 'Founded' },
+          { number: '50+', label: 'Team members' },
+          { number: '1M+', label: 'Happy customers' },
+          { number: '120+', label: 'Countries' },
+        ],
+      },
+    },
+  ],
+}

package/themes/base/_sections/about/letter/section.html

@@ -0,0 +1,60 @@
+{%- comment %} The aside earns its column: it renders only when it has
+something to SAY — the ops feed's items, or the aside photo. An emptied feed
+is no feed, so the frame, the chip and the label go with it and the letter
+runs the container's full width. {% endcomment -%}
+{% assign has_feed = false %}
+{% if args.feed_items and args.feed_items.size > 0 %}{% assign has_feed = true %}{% endif %}
+{% assign has_aside = has_feed %}
+{% if args.image != blank %}{% assign has_aside = true %}{% endif %}
+{% capture letter %}
+      <div data-omega-reveal-stagger="120">
+        <div data-omega-reveal>
+          <span class="omega-micro d-block mb-3">{{ args.mission.title }}</span>
+          <p class="omega-statement">{{ args.mission.description }}</p>
+        </div>
+        <hr class="my-4">
+        <div data-omega-reveal>
+          <span class="omega-micro d-block mb-3">{{ args.vision.title }}</span>
+          <p class="omega-statement">{{ args.vision.description }}</p>
+        </div>
+      </div>
+{% endcapture %}
+<section>
+  <div class="container">
+    {% if has_aside %}
+    <div class="omega-duo">
+      <div class="omega-duo__aside" data-omega-reveal>
+        <span class="omega-micro">{{ args.aside_label }}</span>
+
+        {% if args.image != blank %}
+          <figure class="omega-aside-photo" data-omega-reveal>
+            <img src="{{ args.placeholder }}" data-lazy="@src {{ args.image }}" alt="{{ args.image_alt }}"/>
+          </figure>
+        {% endif %}
+
+        {% if has_feed %}
+          <!-- A living ops feed, not a paragraph -->
+          <div class="omega-object position-relative pe-4 mt-4 d-none d-lg-block">
+            <div class="omega-fragment pb-5">
+              <span class="omega-micro omega-fragment__label">{{ args.feed_label }}</span>
+              {% for item in args.feed_items %}
+                <div class="omega-fragment__msg">
+                  <span class="omega-fragment__msg-mark"><i class="fa-solid fa-{{ item.icon }} fa-xs"></i></span>
+                  <span>{{ item.text }}</span>
+                </div>
+              {% endfor %}
+            </div>
+            <div class="omega-fragment-chip omega-float position-absolute bottom-0 end-0 translate-middle-y">
+              <span class="omega-dot omega-status--ok"></span>
+              {{ args.feed_status }}
+            </div>
+          </div>
+        {% endif %}
+      </div>
+{{ letter }}
+    </div>
+    {% else %}
+{{ letter }}
+    {% endif %}
+  </div>
+</section>

package/themes/base/_sections/about/letter/section.json5

@@ -0,0 +1,56 @@
+{
+  description: 'About letter — mission & vision as editorial statements beside the living ops-feed aside (theme flavor markup). Supply image: and a photo sits at the top of the aside, so the statements read beside a picture instead of a wall. Supply feed_items:/feed_status: and the brand\'s real ops feed replaces the placeholder one. Empty feed_items: and the feed is GONE — frame, chip and label with it; with no photo either, the aside itself goes and the letter runs full width. The layout bridges mission:/vision: objects from the page, and honors the page\'s letter: false kill switch.',
+
+  args: {
+    aside_label: 'string',
+    feed_label: 'string',
+    feed_items: 'array', // [{ icon, text }] — the ops feed's messages; text carries markup. Empty = no feed, and no aside unless a photo holds it
+    feed_status: 'string', // the chip riding the foot of the feed
+    mission: 'object', // { title, description }
+    vision: 'object', // { title, description }
+    image: 'string', // aside photo; unset = no frame, the aside as it was
+    image_alt: 'string', // what the photo SHOWS — content imagery, never decoration
+    placeholder: 'string', // first-paint img src swapped by the lazy loader
+  },
+
+  defaults: {
+    aside_label: 'Why we exist',
+    feed_label: 'This week at {{ resolved.config.brand.name }}',
+    // Placeholder copy, the photo-band way: the demo feed ships so the aside
+    // reads as a living one, and a brand's own items REPLACE it wholesale.
+    feed_items: [
+      { icon: 'rocket', text: '<strong>v2.4</strong> shipped to production' },
+      { icon: 'user-plus', text: 'Two new faces on support' },
+      { icon: 'quote-left', text: '"Best tool we\'ve adopted this year"' },
+    ],
+    feed_status: 'All systems go',
+    mission: {
+      title: 'Our mission',
+      description: 'To empower individuals and businesses with technology that <em>simplifies</em> complex challenges and unlocks new possibilities for growth.',
+    },
+    vision: {
+      title: 'Our vision',
+      description: 'A world where powerful tools feel effortless, where anyone can build, launch, and grow without wrestling the machinery. That\'s the product we <em>refuse to stop</em> working toward.',
+    },
+    image: '',
+    image_alt: '',
+    placeholder: '{{ site.omega.placeholder.src }}',
+  },
+
+  demo: [
+    { label: 'Default letter' },
+    {
+      label: 'With the aside photo',
+      args: {
+        image: '/assets/images/core/placeholder/photo-3.jpg',
+        image_alt: 'Placeholder artwork in soft green tones',
+      },
+    },
+    {
+      label: 'No feed — the full-width letter',
+      args: {
+        feed_items: [],
+      },
+    },
+  ],
+}

package/themes/base/_sections/about/photo-band/section.html

@@ -0,0 +1,24 @@
+{% if args.items and args.items.size > 0 %}
+  <section class="pt-0">
+    <div class="container">
+      <div class="omega-photo-band" data-omega-reveal-stagger="90">
+        {% for photo in args.items %}
+          {% if photo.wide %}
+            <div class="omega-photo-band__tile omega-photo-band__tile--wide lazy-loading" data-lazy="@bg {{ photo.src | omega_append_param: 'w', 1600 }}" role="img" aria-label="{{ photo.alt }}" data-omega-reveal>
+              {% iftruthy photo.caption %}<span class="omega-photo-band__caption">{{ photo.caption }}</span>{% endiftruthy %}
+            </div>
+          {% else %}
+            <figure class="omega-photo-band__tile" data-omega-reveal>
+              <img
+                src="{{ args.placeholder }}"
+                data-lazy="@srcset {{ photo.src | omega_append_param: 'w', 640 }} 640w, {{ photo.src | omega_append_param: 'w', 1080 }} 1080w"
+                sizes="(min-width: 992px) 40vw, 100vw"
+                alt="{{ photo.alt }}"/>
+              {% iftruthy photo.caption %}<figcaption class="omega-photo-band__caption">{{ photo.caption }}</figcaption>{% endiftruthy %}
+            </figure>
+          {% endif %}
+        {% endfor %}
+      </div>
+    </div>
+  </section>
+{% endif %}

package/themes/base/_sections/about/photo-band/section.json5

@@ -0,0 +1,23 @@
+{
+  description: 'About photo band — life in pictures: wide tiles span the grid via @bg lazy-load, stills ride responsive @srcset. Empty items suppresses the band (the layout call also honors the page\'s gallery: false kill switch).',
+
+  args: {
+    items: 'array', // [{ src, alt, caption?, wide? }]
+    placeholder: 'string', // first-paint img src swapped by the lazy loader
+  },
+
+  defaults: {
+    placeholder: '{{ site.omega.placeholder.src }}',
+    // The framework never loads an external image at runtime: the default
+    // band rides the placeholder set shipped in core/images/placeholder.
+    items: [
+      { src: '/assets/images/core/placeholder/photo-1.jpg', alt: 'Placeholder artwork in warm amber tones', caption: 'Shipping week, every week', wide: true },
+      { src: '/assets/images/core/placeholder/photo-2.jpg', alt: 'Placeholder artwork in cool blue tones', caption: 'Pairing beats meetings' },
+      { src: '/assets/images/core/placeholder/photo-3.jpg', alt: 'Placeholder artwork in soft green tones', caption: 'Plans in pencil' },
+    ],
+  },
+
+  demo: [
+    { label: 'Default band' },
+  ],
+}