{{ 'section-banner-v4.css' | asset_url | stylesheet_tag }}

<div {% render 'section-attr' %}>
  {% render 'section-bg-image' %}
  <xo-container>
    <div class='banner-v41'>
      <div class='banner-v41__icon'>
        {% if section.settings.svg %}
          {{ section.settings.svg }}
        {% endif %}
        {% if section.settings.icon %}
          {% render 'image', image: section.settings.icon %}
        {% endif %}
      </div>
      <a href='{{ section.settings.link }}'>
        <h3 class='banner-v41__title'>{{ section.settings.title }}</h3>
      </a>
      <div class='banner-v41__description'>
        {{ section.settings.description }}
      </div>
    </div>
  </xo-container>
</div>

{% schema %}
{
  "name": "t:sections.banner_v4.name",
  "tag": "section",
  "class": "section",
  "settings": [
    {
      "type": "html",
      "id": "svg",
      "label": "t:sections.banner_v4.settings.svg.label",
      "default": "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"70\" height=\"70\" viewbox=\"0 0 50 50\" fill=\"none\">\n  <g clip-path=\"url(#clip0_11_25)\">\n    <path d=\"M34.375 0H15.625C6.99687 0 0 6.99687 0 15.625V34.375C0 43.0031 6.99687 50 15.625 50H34.375C43.0031 50 50 43.0031 50 34.375V15.625C50 6.99687 43.0031 0 34.375 0ZM45.3125 34.375C45.3125 40.4062 40.4062 45.3125 34.375 45.3125H15.625C9.59375 45.3125 4.6875 40.4062 4.6875 34.375V15.625C4.6875 9.59375 9.59375 4.6875 15.625 4.6875H34.375C40.4062 4.6875 45.3125 9.59375 45.3125 15.625V34.375Z\" fill=\"url(#paint0_linear_11_25)\"></path>\n    <path d=\"M25 12.5C18.0969 12.5 12.5 18.0969 12.5 25C12.5 31.9031 18.0969 37.5 25 37.5C31.9031 37.5 37.5 31.9031 37.5 25C37.5 18.0969 31.9031 12.5 25 12.5ZM25 32.8125C20.6937 32.8125 17.1875 29.3063 17.1875 25C17.1875 20.6906 20.6937 17.1875 25 17.1875C29.3063 17.1875 32.8125 20.6906 32.8125 25C32.8125 29.3063 29.3063 32.8125 25 32.8125Z\" fill=\"url(#paint1_linear_11_25)\"></path>\n    <path d=\"M38.4375 13.2281C39.3574 13.2281 40.1031 12.4824 40.1031 11.5625C40.1031 10.6426 39.3574 9.89685 38.4375 9.89685C37.5176 9.89685 36.7719 10.6426 36.7719 11.5625C36.7719 12.4824 37.5176 13.2281 38.4375 13.2281Z\" fill=\"url(#paint2_linear_11_25)\"></path>\n  </g>\n  <defs>\n    <lineargradient id=\"paint0_linear_11_25\" x1=\"4.57703\" y1=\"45.4233\" x2=\"45.423\" y2=\"4.57672\" gradientunits=\"userSpaceOnUse\">\n      <stop stop-color=\"#FFC107\"></stop>\n      <stop offset=\"0.507\" stop-color=\"#F44336\"></stop>\n      <stop offset=\"0.99\" stop-color=\"#9C27B0\"></stop>\n    </lineargradient>\n    <lineargradient id=\"paint1_linear_11_25\" x1=\"16.1614\" y1=\"33.8386\" x2=\"33.8386\" y2=\"16.1614\" gradientunits=\"userSpaceOnUse\">\n      <stop stop-color=\"#FFC107\"></stop>\n      <stop offset=\"0.507\" stop-color=\"#F44336\"></stop>\n      <stop offset=\"0.99\" stop-color=\"#9C27B0\"></stop>\n    </lineargradient>\n    <lineargradient id=\"paint2_linear_11_25\" x1=\"37.2598\" y1=\"12.7404\" x2=\"39.6152\" y2=\"10.3848\" gradientunits=\"userSpaceOnUse\">\n      <stop stop-color=\"#FFC107\"></stop>\n      <stop offset=\"0.507\" stop-color=\"#F44336\"></stop>\n      <stop offset=\"0.99\" stop-color=\"#9C27B0\"></stop>\n    </lineargradient>\n    <clippath id=\"clip0_11_25\">\n      <rect width=\"50\" height=\"50\" fill=\"white\"></rect>\n    </clippath>\n  </defs>\n</svg>"
    },
    {
      "type": "image_picker",
      "id": "icon",
      "label": "t:sections.banner_v4.settings.icon.label"
    },
    {
      "type": "text",
      "id": "title",
      "label": "t:sections.banner_v4.settings.title.label",
      "default": "Shoppable Instagram"
    },
    {
      "type": "text",
      "id": "description",
      "label": "t:sections.banner_v4.settings.description.label",
      "default": "Create Shoppable Instagram Galleries by tagging products on Instagram images & embed it anywhere. Create multiple Instagram galleries."
    },
    {
      "type": "url",
      "id": "link",
      "label": "t:sections.banner_v4.settings.link.label",
      "default": "/collections/all"
    },
    {
      "type": "header",
      "content": "t:sections.all.heading.content"
    },
    {
      "type": "color_scheme",
      "id": "color_scheme",
      "label": "t:sections.all.color_scheme.label"
    },
    {
      "type": "select",
      "id": "background_type",
      "label": "t:sections.all.background_type.label",
      "options": [
        {
          "value": "color",
          "label": "t:sections.all.background_type.option__1.label"
        },
        {
          "value": "gradient",
          "label": "t:sections.all.background_type.option__2.label"
        },
        {
          "value": "image",
          "label": "t:sections.all.background_type.option__3.label"
        },
        {
          "value": "video",
          "label": "t:sections.all.background_type.option__4.label"
        }
      ],
      "default": "color"
    },
    {
      "type": "color",
      "id": "background_color",
      "label": "t:sections.all.background_color.label",
      "alpha": true,
      "visible_if": "{{ section.settings.background_type == 'color' }}"
    },
    {
      "type": "color_background",
      "id": "background_gradient",
      "label": "t:sections.all.background_gradient.label",
      "visible_if": "{{ section.settings.background_type == 'gradient' }}"
    },
    {
      "type": "image_picker",
      "id": "background_image_desktop",
      "label": "t:sections.all.background_image_desktop.label",
      "visible_if": "{{ section.settings.background_type == 'image' }}"
    },
    {
      "type": "image_picker",
      "id": "background_image_mobile",
      "label": "t:sections.all.background_image_mobile.label",
      "visible_if": "{{ section.settings.background_type == 'image' }}"
    },
    {
      "type": "checkbox",
      "id": "use_parallax",
      "label": "t:sections.all.use_parallax.label",
      "default": true,
      "visible_if": "{{ section.settings.background_type == 'image' }}"
    },
    {
      "type": "select",
      "id": "background_image_animation",
      "label": "t:sections.all.animation.label",
      "options": [
        {
          "value": "none",
          "label": "t:sections.all.animation.option__0.label"
        },
        {
          "value": "fade",
          "label": "t:sections.all.animation.option__1.label"
        },
        {
          "value": "fade-up",
          "label": "t:sections.all.animation.option__2.label"
        },
        {
          "value": "fade-down",
          "label": "t:sections.all.animation.option__3.label"
        },
        {
          "value": "fade-left",
          "label": "t:sections.all.animation.option__4.label"
        },
        {
          "value": "fade-right",
          "label": "t:sections.all.animation.option__5.label"
        },
        {
          "value": "zoom-in",
          "label": "t:sections.all.animation.option__6.label"
        },
        {
          "value": "zoom-out",
          "label": "t:sections.all.animation.option__7.label"
        },
        {
          "value": "rotate-left-up",
          "label": "t:sections.all.animation.option__8.label"
        },
        {
          "value": "rotate-right-up",
          "label": "t:sections.all.animation.option__9.label"
        },
        {
          "value": "snake-up",
          "label": "t:sections.all.animation.option__10.label"
        },
        {
          "value": "snake-down",
          "label": "t:sections.all.animation.option__11.label"
        },
        {
          "value": "snake-left",
          "label": "t:sections.all.animation.option__12.label"
        },
        {
          "value": "snake-right",
          "label": "t:sections.all.animation.option__13.label"
        },
        {
          "value": "3d-up",
          "label": "t:sections.all.animation.option__14.label"
        }
      ],
      "default": "none",
      "visible_if": "{{ section.settings.background_type == 'image' }}"
    },
    {
      "type": "textarea",
      "id": "background_video_url",
      "label": "t:sections.all.background_video_url.label",
      "visible_if": "{{ section.settings.background_type == 'video' }}"
    },
    {
      "type": "select",
      "id": "background_video_animation",
      "label": "t:sections.all.animation.label",
      "options": [
        {
          "value": "none",
          "label": "t:sections.all.animation.option__0.label"
        },
        {
          "value": "fade",
          "label": "t:sections.all.animation.option__1.label"
        },
        {
          "value": "fade-up",
          "label": "t:sections.all.animation.option__2.label"
        },
        {
          "value": "fade-down",
          "label": "t:sections.all.animation.option__3.label"
        },
        {
          "value": "fade-left",
          "label": "t:sections.all.animation.option__4.label"
        },
        {
          "value": "fade-right",
          "label": "t:sections.all.animation.option__5.label"
        },
        {
          "value": "zoom-in",
          "label": "t:sections.all.animation.option__6.label"
        },
        {
          "value": "zoom-out",
          "label": "t:sections.all.animation.option__7.label"
        },
        {
          "value": "rotate-left-up",
          "label": "t:sections.all.animation.option__8.label"
        },
        {
          "value": "rotate-right-up",
          "label": "t:sections.all.animation.option__9.label"
        },
        {
          "value": "snake-up",
          "label": "t:sections.all.animation.option__10.label"
        },
        {
          "value": "snake-down",
          "label": "t:sections.all.animation.option__11.label"
        },
        {
          "value": "snake-left",
          "label": "t:sections.all.animation.option__12.label"
        },
        {
          "value": "snake-right",
          "label": "t:sections.all.animation.option__13.label"
        },
        {
          "value": "3d-up",
          "label": "t:sections.all.animation.option__14.label"
        }
      ],
      "default": "none",
      "visible_if": "{{ section.settings.background_type == 'video' }}"
    },
    {
      "type": "color",
      "id": "background_overlay",
      "label": "t:sections.all.background_overlay.label",
      "alpha": true,
      "visible_if": "{{ section.settings.background_type == 'image' or section.settings.background_type == 'video' }}"
    },
    {
      "type": "number",
      "id": "background_margin",
      "label": "t:sections.all.background_margin.label",
      "default": 0
    },
    {
      "type": "number",
      "id": "padding_top",
      "label": "t:sections.all.padding_top.label",
      "default": 50
    },
    {
      "type": "number",
      "id": "padding_bottom",
      "label": "t:sections.all.padding_bottom.label",
      "default": 50
    }
  ],
  "presets": [
    {
      "name": "t:sections.banner_v4.presets.name"
    }
  ]
}
{% endschema %}
