`sections/new-arrivals-banner.liquid`

56 lines
{%- comment -%}
  New Arrivals banner — full-width statement banner over high-end imagery,
  links to the New Arrivals collection. Editable via settings; ships with a
  luxe fallback image (Maya Romanoff glass-bead).
{%- endcomment -%}
{%- liquid
  assign rid = section.id
  assign fb = 'https://cdn.shopify.com/s/files/1/0015/4117/7456/files/mr-abh-1177-Maya_Romanoff_3.jpg'
  assign bg = fb
  if section.settings.image != blank
    assign bg = section.settings.image | image_url: width: 2400
  endif
-%}
<style>
  .na-{{ rid }}{ position:relative; min-height:{{ section.settings.height }}px; display:flex; flex-direction:column;
    align-items:center; justify-content:center; text-align:center; gap:16px; padding:64px 24px;
    background:url('{{ bg }}') center/cover no-repeat; isolation:isolate; }
  .na-{{ rid }}::before{ content:""; position:absolute; inset:0; z-index:-1; background:{{ section.settings.veil }}; }
  .na-{{ rid }} .ey{ font-size:13px; letter-spacing:4px; font-weight:600; color:{{ section.settings.accent }}; margin:0; }
  .na-{{ rid }} h2{ font-family:'Playfair Display',Georgia,serif; font-weight:700; font-size:clamp(34px,5vw,64px);
    line-height:1.04; color:{{ section.settings.text_color }}; margin:0; max-width:760px; }
  .na-{{ rid }} p{ color:{{ section.settings.text_color }}; opacity:.9; font-size:16px; max-width:520px; margin:0; }
  .na-{{ rid }} .cta{ margin-top:8px; display:inline-block; background:{{ section.settings.cta_bg }}; color:{{ section.settings.cta_text }};
    border-radius:999px; padding:15px 34px; font-size:13px; font-weight:600; letter-spacing:1.5px; text-decoration:none; }
  @media(max-width:749px){ .na-{{ rid }}{ min-height:{{ section.settings.height | times: 0.72 | round }}px; padding:48px 20px; } }
</style>
<a class="na-{{ rid }}" href="{{ section.settings.cta_link | default: '/collections/new-arrivals' }}" style="text-decoration:none;">
  {%- if section.settings.eyebrow != blank -%}<span class="ey">{{ section.settings.eyebrow }}</span>{%- endif -%}
  <h2>{{ section.settings.heading }}</h2>
  {%- if section.settings.subheading != blank -%}<p>{{ section.settings.subheading }}</p>{%- endif -%}
  {%- if section.settings.cta_label != blank -%}<span class="cta">{{ section.settings.cta_label }}</span>{%- endif -%}
</a>

{% schema %}
{
  "name": "New Arrivals Banner",
  "tag": "section",
  "class": "section-new-arrivals-banner",
  "settings": [
    { "type": "image_picker", "id": "image", "label": "Background image (high-end line only)" },
    { "type": "range", "id": "height", "min": 300, "max": 640, "step": 20, "unit": "px", "label": "Height", "default": 460 },
    { "type": "text", "id": "eyebrow", "label": "Eyebrow", "default": "JUST IN" },
    { "type": "text", "id": "heading", "label": "Heading", "default": "New Arrivals" },
    { "type": "text", "id": "subheading", "label": "Subheading", "default": "The season's latest luxury walls & fabrics." },
    { "type": "text", "id": "cta_label", "label": "Button label", "default": "SHOP NEW ARRIVALS" },
    { "type": "url", "id": "cta_link", "label": "Button link" },
    { "type": "color", "id": "text_color", "label": "Text color", "default": "#ffffff" },
    { "type": "color", "id": "accent", "label": "Eyebrow accent", "default": "#e4c88a" },
    { "type": "color_background", "id": "veil", "label": "Image veil (legibility)", "default": "linear-gradient(rgba(30,25,18,.35),rgba(30,25,18,.62))" },
    { "type": "color", "id": "cta_bg", "label": "Button background", "default": "#ffffff" },
    { "type": "color", "id": "cta_text", "label": "Button text", "default": "#26241f" }
  ],
  "presets": [ { "name": "New Arrivals Banner" } ]
}
{% endschema %}