Hero Banner

<section class="sl-hero" style="position:relative;min-height:clamp(380px,55vw,560px);display:flex;align-items:center;justify-content:center;overflow:hidden;color:#fff;font-family:inherit;text-align:{{ section.settings.text_align | default: 'center' }};">
  <img src="{{ section.settings.image | image_url: width: 1800 | default: 'https://picsum.photos/seed/hero-banner/1800/900' }}" alt="{{ section.settings.image_alt | default: section.settings.heading }}" loading="eager" fetchpriority="high" style="position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;" />
  <div aria-hidden="true" style="position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,{{ section.settings.overlay_opacity | default: 0.2 }}),rgba(0,0,0,{{ section.settings.overlay_opacity | default: 0.2 | plus: 0.2 }}));z-index:1;"></div>
  <div style="position:relative;z-index:2;max-width:780px;padding:clamp(40px,8vw,96px) clamp(1rem,3vw,2rem);display:flex;flex-direction:column;gap:1rem;align-items:{% if section.settings.text_align == 'left' %}flex-start{% else %}center{% endif %};">
    {%- if section.settings.eyebrow != blank -%}
      <span style="display:inline-block;padding:.3rem .75rem;background:var(--sl-accent,#0a5cff);color:#fff;font-size:.75rem;letter-spacing:.12em;text-transform:uppercase;border-radius:.25rem;font-weight:700;">{{ section.settings.eyebrow }}</span>
    {%- endif -%}
    <h1 style="font-size:clamp(2rem,5vw,3.75rem);margin:0;font-family:inherit;line-height:1.1;text-shadow:0 2px 20px rgba(0,0,0,.25);">{{ section.settings.heading }}</h1>
    {%- if section.settings.subheading != blank -%}
      <p style="font-size:clamp(1rem,2vw,1.25rem);margin:0;max-width:620px;opacity:.95;font-family:inherit;line-height:1.5;">{{ section.settings.subheading }}</p>
    {%- endif -%}
    <div style="display:flex;flex-wrap:wrap;gap:.75rem;margin-top:.5rem;justify-content:{% if section.settings.text_align == 'left' %}flex-start{% else %}center{% endif %};">
      {%- if section.settings.cta_text != blank -%}
        <a href="{{ section.settings.cta_link | default: '#' }}" style="display:inline-block;padding:.9rem 1.75rem;background:var(--sl-accent,#0a5cff);color:#fff;border-radius:.375rem;text-decoration:none;font-family:inherit;font-weight:700;font-size:1rem;">{{ section.settings.cta_text }}</a>
      {%- endif -%}
      {%- if section.settings.cta_secondary_text != blank -%}
        <a href="{{ section.settings.cta_secondary_link | default: '#' }}" style="display:inline-block;padding:.9rem 1.75rem;background:rgba(255,255,255,.1);color:#fff;border:1px solid rgba(255,255,255,.55);border-radius:.375rem;text-decoration:none;font-family:inherit;font-weight:600;backdrop-filter:blur(4px);">{{ section.settings.cta_secondary_text }}</a>
      {%- endif -%}
    </div>
  </div>
</section>
{% schema %}
{
  "name": "Hero Banner",
  "settings": [
    { "type": "text", "id": "eyebrow", "label": "Eyebrow", "default": "New season" },
    { "type": "text", "id": "heading", "label": "Heading", "default": "Built for the everyday adventure" },
    { "type": "textarea", "id": "subheading", "label": "Subheading", "default": "Timeless pieces crafted from durable fabrics. Free shipping and easy returns on every order." },
    { "type": "image_picker", "id": "image", "label": "Background image" },
    { "type": "text", "id": "image_alt", "label": "Image alt text", "default": "Hero background image" },
    { "type": "range", "id": "overlay_opacity", "label": "Overlay opacity", "min": 0, "max": 0.7, "step": 0.05, "default": 0.25 },
    { "type": "select", "id": "text_align", "label": "Text alignment", "options": [ { "value": "center", "label": "Center" }, { "value": "left", "label": "Left" } ], "default": "center" },
    { "type": "text", "id": "cta_text", "label": "Primary button text", "default": "Shop new arrivals" },
    { "type": "url", "id": "cta_link", "label": "Primary button link" },
    { "type": "text", "id": "cta_secondary_text", "label": "Secondary button text", "default": "Our story" },
    { "type": "url", "id": "cta_secondary_link", "label": "Secondary button link" }
  ],
  "presets": [{ "name": "Hero Banner" }]
}
{% endschema %}