@omega.js/extension 0.1.0

package/dist/assets/themes/base/_sections/marketing/hero/section.html

@@ -0,0 +1,349 @@
+{% comment %} ── Hero demo capture (input/form/video/custom — optional conversion module) {% endcomment %}
+{% assign demo = args.demo %}
+{% assign hero_demo_on = false %}
+{% if demo.enabled or args.demo_html != blank %}{% assign hero_demo_on = true %}{% endif %}
+{% comment %} demo.placement: side (legacy parity) — the demo sits BESIDE the copy
+instead of centred under the CTAs; anything else keeps the centred stack. {% endcomment %}
+{% assign hero_demo_side = false %}
+{% if hero_demo_on and demo.placement == "side" %}{% assign hero_demo_side = true %}{% endif %}
+{% comment %} A video demo IS the hero visual in EVERY placement (#486) — the
+centred product frame never stacks under one either. {% endcomment %}
+{% assign hero_demo_video = false %}
+{% if demo.enabled and demo.type == "video" %}{% assign hero_demo_video = true %}{% endif %}
+{% capture hero_demo_content %}
+  {% if demo.type == "input" %}
+    <div class="card {{ demo.options.class | default: 'mw-md' }} mx-auto">
+      <div class="card-body p-3">
+        <form id="hero-demo-form" class="d-flex flex-column flex-sm-row justify-content-center gap-2" {% iftruthy demo.options.redirect %}data-redirect="{{ demo.options.redirect }}"{% endiftruthy %} data-form-state="initializing" onsubmit="return false">
+          <input
+            type="{{ demo.options.input_type | default: 'text' }}"
+            name="{{ demo.options.name | default: 'input' }}"
+            class="form-control form-control-lg"
+            placeholder="{{ demo.options.placeholder }}"
+            {% iftruthy demo.options.required %}required{% endiftruthy %}
+          >
+          {% assign demo_btn_class = demo.options.button.class | default: "btn-adaptive" %}
+          <button type="submit" class="btn {{ demo_btn_class }} btn-lg text-nowrap flex-shrink-0">
+            {% iftruthy demo.options.button.icon %}
+              <i class="fa-solid fa-{{ demo.options.button.icon }} me-2"></i>
+            {% endiftruthy %}
+            {{ demo.options.button.text }}
+          </button>
+        </form>
+      </div>
+    </div>
+  {% elsif demo.type == "form" %}
+    <div class="card {% if demo.options.class %}{{ demo.options.class }}{% endif %} mx-auto">
+      <div class="card-body p-3">
+        <form id="hero-demo-form" {% iftruthy demo.options.redirect %}data-redirect="{{ demo.options.redirect }}"{% endiftruthy %} data-form-state="initializing" onsubmit="return false">
+          <div class="row g-3 text-start">
+            {% for field in demo.options.fields %}
+              {% assign field_size = field.size | default: "half" %}
+              <div class="col-12 {% if field_size == 'half' %}col-sm-6{% endif %}">
+                <label for="hero-demo-{{ field.name }}" class="form-label d-flex align-items-center mb-2">
+                  {% iftruthy field.icon %}
+                    <i class="fa-solid fa-{{ field.icon }} me-2"></i>
+                  {% endiftruthy %}
+                  {{ field.label | default: field.placeholder | default: field.name }}
+                  {% iftruthy field.required %}<span class="text-danger ms-1" aria-hidden="true">*</span>{% endiftruthy %}
+                </label>
+                {% if field.type == "select" %}
+                  <select
+                    id="hero-demo-{{ field.name }}"
+                    name="{{ field.name }}"
+                    class="form-select form-select-lg"
+                    {% iftruthy field.required %}required{% endiftruthy %}
+                  >
+                    <option value="" disabled selected>{{ field.placeholder }}</option>
+                    {% for option in field.options %}
+                      <option value="{{ option.value }}">{{ option.label }}</option>
+                    {% endfor %}
+                  </select>
+                {% elsif field.type == "textarea" %}
+                  <textarea
+                    id="hero-demo-{{ field.name }}"
+                    name="{{ field.name }}"
+                    class="form-control form-control-lg"
+                    placeholder="{{ field.placeholder }}"
+                    rows="{{ field.rows | default: 3 }}"
+                    {% iftruthy field.required %}required{% endiftruthy %}
+                  ></textarea>
+                {% else %}
+                  <input
+                    id="hero-demo-{{ field.name }}"
+                    type="{{ field.type | default: 'text' }}"
+                    name="{{ field.name }}"
+                    class="form-control form-control-lg"
+                    placeholder="{{ field.placeholder }}"
+                    {% iftruthy field.required %}required{% endiftruthy %}
+                  >
+                {% endif %}
+              </div>
+            {% endfor %}
+            {% assign form_btn_class = demo.options.button.class | default: "btn-adaptive" %}
+            <div class="col-12 {% unless demo.options.button.full_width %}col-sm-auto{% endunless %}">
+              <button type="submit" class="btn {{ form_btn_class }} btn-lg w-100">
+                {% iftruthy demo.options.button.icon %}
+                  <i class="fa-solid fa-{{ demo.options.button.icon }} me-2"></i>
+                {% endiftruthy %}
+                {{ demo.options.button.text }}
+              </button>
+            </div>
+          </div>
+        </form>
+      </div>
+    </div>
+  {% elsif demo.type == "video" %}
+    {% comment %} Legacy parity: the player rides omega_video, so the file
+    lazy-loads like every other media on the page. Autoplay is ALWAYS muted —
+    a hero never makes sound nobody asked for — and controls stay on unless
+    the author turns them off, so an unauthored video plays only on click.
+    The flag rides as a STRING both ways: a bare variable holding false/nil
+    falls back to its own literal name at the call site (template-kit's
+    preferLiteral lane), which would mute every video. {% endcomment %}
+    {% if demo.options.autoplay or demo.options.muted %}{% assign video_muted = "true" %}{% else %}{% assign video_muted = "false" %}{% endif %}
+    <div class="{% unless hero_demo_side %}mx-auto {% endunless %}{{ demo.options.class }}">
+      <div class="card overflow-hidden">
+        <div class="ratio ratio-16x9">
+          {% omega_video demo.options.src, class="w-100 d-block object-fit-cover border-0", controls=demo.options.controls, loop=demo.options.loop, autoplay=demo.options.autoplay, muted=video_muted, playsinline="true", preload="metadata", poster=demo.options.poster %}
+        </div>
+      </div>
+    </div>
+  {% elsif demo.type == "custom" %}
+    {% comment %} Two ways to fill the custom slot. `demo.name` names a
+    consumer's own animation folder (#441: src/_hero/<name>/, whose style.scss
+    and script.js ride the section asset lanes); `demo.options.content` is
+    finished markup authored at the call site. A named folder wins — it is the
+    more specific answer, and authoring both means one of them is a leftover. {% endcomment %}
+    <div id="hero-demo-custom" class="mx-auto {{ demo.options.class }}">
+      {% if demo.name %}
+        {% hero_animation demo.name %}
+      {% else %}
+        {{ demo.options.content }}
+      {% endif %}
+    </div>
+  {% endif %}
+
+  {% iftruthy demo.options.subtext %}
+    <p class="omega-hero__meta justify-content-center mt-3 mb-0">{{ demo.options.subtext }}</p>
+  {% endiftruthy %}
+{% endcapture %}
+
+{% comment %} ── The copy cluster (badge → display → sub → CTAs → meta), captured so
+the side placement can set it BESIDE the demo; the centred default renders it
+in place, unchanged. {% endcomment %}
+{% capture hero_copy %}
+    {% comment %} #513: the optional breadcrumb trail — ordered crumbs above the
+    headline cluster, the LAST one the current page and never a link. Inline
+    list items, so the trail inherits the hero's own alignment (centred by
+    default, start in the side placement) with no new CSS. Authors keep it
+    consistent with the BreadcrumbList JSON-LD foot.html emits; this arg is the
+    on-page trail only and generates none of it. {% endcomment %}
+    {% if args.breadcrumb and args.breadcrumb.size > 0 %}
+      <nav class="small text-muted mb-3" aria-label="Breadcrumb" data-omega-reveal>
+        <ol class="list-unstyled mb-0">
+          {% for crumb in args.breadcrumb %}
+            <li class="d-inline">
+              {% if forloop.last %}
+                <span aria-current="page">{{ crumb.label }}</span>
+              {% elsif crumb.href %}
+                <a href="{{ crumb.href }}">{{ crumb.label }}</a>
+              {% else %}
+                <span>{{ crumb.label }}</span>
+              {% endif %}
+              {% unless forloop.last %}<span class="mx-1" aria-hidden="true">›</span>{% endunless %}
+            </li>
+          {% endfor %}
+        </ol>
+      </nav>
+    {% endif %}
+
+    {% iftruthy args.badge.text %}
+      {% if args.badge.href %}
+        <a class="omega-hero__badge" href="{{ args.badge.href }}" data-omega-reveal>
+          <span class="omega-dot"></span>
+          {{ args.badge.text }}
+          <i class="fa-solid fa-arrow-right fa-xs"></i>
+        </a>
+      {% else %}
+        <div data-omega-reveal>
+          <span class="omega-hero__badge">
+            <span class="omega-dot"></span>
+            {{ args.badge.text }}
+          </span>
+        </div>
+      {% endif %}
+    {% endiftruthy %}
+
+    {% comment %} #500: the headline's LEVEL is an arg. A page composing the
+    band twice (#496's below-fold dashboard demo) would otherwise ship two h1s
+    — the checklist's one-h1 rule. The classes never change with it: the skin
+    styles .omega-display--hero, not the tag. {% endcomment %}
+    {% assign heading_level = args.heading_level | default: 1 %}
+    <h{{ heading_level }} class="omega-display omega-display--hero" data-omega-reveal>
+      {{ args.headline }}<br>
+      {% comment %} An authored accent wins: the theme's default rotating words
+      survive the deep merge, so a page that writes only headline_accent would
+      otherwise author dead text. {% endcomment %}
+      {% if args.headline_accent != blank %}
+        <em>{{ args.headline_accent }}</em>
+      {% elsif args.rotating and args.rotating.size > 0 %}
+        <span class="omega-hero__rotator" data-omega-rotate="2600">
+          {%- for word in args.rotating -%}
+            <span>{{ word }}</span>
+          {%- endfor -%}
+        </span>
+      {% endif %}
+    </h{{ heading_level }}>
+
+    {% iftruthy args.description %}
+      <p class="omega-hero__sub" data-omega-reveal>{{ args.description }}</p>
+    {% endiftruthy %}
+
+    {% comment %} An authored button class replaces the default; an authored icon
+    leads the label and takes the arrow nudge's place (legacy parity — a button
+    carries ONE glyph). No icon, no class = today's render. {% endcomment %}
+    {% assign primary_btn_class = args.primary_button.class | default: "btn-adaptive" %}
+    {% assign secondary_btn_class = args.secondary_button.class | default: "btn-outline-adaptive" %}
+    <div class="omega-hero__ctas" data-omega-reveal>
+      {% if args.primary_button.enabled != false and args.primary_button.text %}
+        <a href="{{ args.primary_button.href }}" class="btn {{ primary_btn_class }} btn-lg{% iffalsy args.primary_button.icon %} omega-hover-nudge{% endiffalsy %}">
+          {% iftruthy args.primary_button.icon %}<i class="fa-solid fa-{{ args.primary_button.icon }} me-2"></i>{% endiftruthy %}
+          {{ args.primary_button.text }}
+          {% iffalsy args.primary_button.icon %}<span class="omega-nudge ms-2"><i class="fa-solid fa-arrow-right fa-sm"></i></span>{% endiffalsy %}
+        </a>
+      {% endif %}
+      {% iftruthy args.command %}
+        <a href="{{ args.command_href | default: '/download' }}" class="btn btn-cmd btn-lg">
+          <span class="omega-cmd-prompt">$</span>{{ args.command | escape_once }}
+        </a>
+      {% endiftruthy %}
+      {% if args.secondary_button.enabled != false and args.secondary_button.text %}
+        <a href="{{ args.secondary_button.href }}" class="btn {{ secondary_btn_class }} btn-lg{% iffalsy args.secondary_button.icon %} omega-hover-nudge{% endiffalsy %}">
+          {% iftruthy args.secondary_button.icon %}<i class="fa-solid fa-{{ args.secondary_button.icon }} me-2"></i>{% endiftruthy %}
+          {{ args.secondary_button.text }}
+          {% iffalsy args.secondary_button.icon %}<span class="omega-nudge ms-2"><i class="fa-solid fa-arrow-right fa-sm"></i></span>{% endiffalsy %}
+        </a>
+      {% endif %}
+    </div>
+
+    {% if args.meta and args.meta.size > 0 %}
+      <div class="omega-hero__meta" data-omega-reveal>
+        {% for item in args.meta %}
+          <span><i class="fa-solid fa-check text-success fa-xs me-1"></i>{{ item }}</span>
+        {% endfor %}
+      </div>
+    {% endif %}
+{% endcapture %}
+
+{% comment %} ── The demo module — a slot's finished markup wins over the typed lanes {% endcomment %}
+{% capture hero_demo_module %}{% if args.demo_html != blank %}{{ args.demo_html }}{% else %}{{ hero_demo_content }}{% endif %}{% endcapture %}
+
+{% comment %} #763: the hero IS the first viewport, so data-omega-first-paint on
+the band starts its reveals AT PARSE TIME: the head's inline starter sees the
+band the moment the parser hands it over, waits one frame and stamps
+data-omega-inview itself, mirroring the stagger below. The copy therefore fades
+in on the design's own rhythm without waiting for first-paint.js to download and
+its observer to fire — that wait is what put ~2.0s on the playground homepage's
+2,588ms mobile LCP (#749, the element is p.omega-hero__sub). The attribute
+carries the same treatment to markup the template never sees, the demo slots a
+consumer authors. {% endcomment %}
+<!-- ═══ Hero ═══ -->
+<section class="omega-hero omega-dotgrid{% if hero_demo_side %} omega-hero--side{% endif %}" data-omega-first-paint data-omega-dotfield>
+  <div class="container" data-omega-reveal-stagger="40">
+    {% if hero_demo_side %}
+      <div class="omega-hero__split">
+        <div class="omega-hero__copy">{{ hero_copy }}</div>
+        <div class="omega-hero__demo" data-omega-reveal="right">
+          {{ hero_demo_module }}
+        </div>
+      </div>
+    {% else %}
+      {{ hero_copy }}
+      {% if hero_demo_on %}
+        <div class="mt-4" data-omega-reveal>
+          {{ hero_demo_module }}
+        </div>
+      {% endif %}
+    {% endif %}
+
+    {% if args.cards and args.cards.size > 0 %}
+      <div class="omega-hero__cards" data-omega-reveal>
+        {% for card in args.cards %}
+          <div class="omega-hero__card">
+            {% iftruthy card.icon %}
+              <span class="omega-hero__card-ico"><i class="fa-solid fa-{{ card.icon }}"></i></span>
+            {% endiftruthy %}
+            {%- comment %} A value is TEXT, never markup (#580). {% endcomment -%}
+            <span class="omega-hero__card-num">{{ card.number | escape_once }}</span>
+            <span class="omega-hero__card-label">{{ card.label }}</span>
+          </div>
+        {% endfor %}
+      </div>
+    {% endif %}
+
+    {% comment %} #496: a side demo IS the hero visual — the centred frame never
+    renders beside it, authored on or not. #486 extends the same doctrine to a
+    VIDEO demo in any placement: a frame stacked under a centred video is two
+    visuals for one hero. The dashboard mock earns its own band below when a
+    page still wants it (a second section instance). {% endcomment %}
+    {% if args.frame.enabled != false and hero_demo_side == false and hero_demo_video == false %}
+      <!-- Floating product frame (pure-CSS product mock; ambient float + tilt) -->
+      <div class="omega-hero__frame omega-float" data-omega-reveal="scale" aria-hidden="true">
+        <div class="omega-hero__frame-inner">
+          <div class="omega-mock">
+            <div class="omega-mock__topbar">
+              <span class="omega-mock__dots"><span></span><span></span><span></span></span>
+              <span>{{ args.frame.title }}</span>
+              <span class="omega-status omega-status--ok ms-auto"><span class="omega-dot omega-dot--ok"></span>Production</span>
+            </div>
+            <div class="omega-mock__body">
+              <div class="omega-mock__side">
+                <div class="omega-mock__side-item active"><span class="omega-mock__side-ico"></span>Overview</div>
+                <div class="omega-mock__side-item"><span class="omega-mock__side-ico"></span>Analytics</div>
+                <div class="omega-mock__side-item"><span class="omega-mock__side-ico"></span>Deploys</div>
+                <div class="omega-mock__side-item"><span class="omega-mock__side-ico"></span>Domains</div>
+                <div class="omega-mock__side-item"><span class="omega-mock__side-ico"></span>Settings</div>
+              </div>
+              <div class="omega-mock__main">
+                <div class="omega-mock__tiles">
+                  <div class="omega-mock__tile">
+                    <div class="omega-mock__tile-label">Requests</div>
+                    <div class="omega-mock__tile-value">128.4k</div>
+                    <div class="omega-mock__tile-delta">▲ 12.4%</div>
+                  </div>
+                  <div class="omega-mock__tile">
+                    <div class="omega-mock__tile-label">Active users</div>
+                    <div class="omega-mock__tile-value">8,912</div>
+                    <div class="omega-mock__tile-delta">▲ 3.1%</div>
+                  </div>
+                  <div class="omega-mock__tile">
+                    <div class="omega-mock__tile-label">p95 latency</div>
+                    <div class="omega-mock__tile-value">142ms</div>
+                    <div class="omega-mock__tile-delta">▼ 8ms</div>
+                  </div>
+                </div>
+                <div class="omega-mock__chart">
+                  <svg viewBox="0 0 560 150" preserveAspectRatio="none" role="img" aria-hidden="true">
+                    <defs>
+                      <linearGradient id="omega-hero-fade" x1="0" y1="0" x2="0" y2="1">
+                        <stop offset="0" stop-color="currentColor" stop-opacity="0.16"/>
+                        <stop offset="1" stop-color="currentColor" stop-opacity="0"/>
+                      </linearGradient>
+                    </defs>
+                    <line x1="0" y1="40" x2="560" y2="40" style="stroke: var(--omega-line);" stroke-width="1"/>
+                    <line x1="0" y1="85" x2="560" y2="85" style="stroke: var(--omega-line);" stroke-width="1"/>
+                    <line x1="0" y1="130" x2="560" y2="130" style="stroke: var(--omega-line);" stroke-width="1"/>
+                    <path d="M0,112 C40,104 70,92 110,96 C150,100 180,74 220,70 C260,66 290,80 330,64 C370,48 400,54 440,40 C480,28 520,34 560,22 L560,150 L0,150 Z" fill="url(#omega-hero-fade)"/>
+                    <path d="M0,120 C48,116 84,108 124,110 C164,112 204,96 244,94 C284,92 316,98 356,88 C396,80 436,84 476,72 C516,62 536,60 560,52" fill="none" style="stroke: var(--omega-chart-2);" stroke-width="1.5" stroke-dasharray="4 5"/>
+                    <path d="M0,112 C40,104 70,92 110,96 C150,100 180,74 220,70 C260,66 290,80 330,64 C370,48 400,54 440,40 C480,28 520,34 560,22" fill="none" stroke="currentColor" stroke-width="2"/>
+                  </svg>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    {% endif %}
+  </div>
+</section>