Home Banner

{% comment %}
	Displays a banner on the homepage or other landing pages.

	Inputs:
		section_class - an optional classname to apply to the section, typically used for setting the color scheme. Defaults to 'text-bg-primary'
		section_id - an optional id to apply to the section
		min_height - defines the banner min height
		img_preset_banner_bg - The image preset to use for the banner image

	Custom Fields:
		homebanner_pretitle - text, optional
		homebanner_title - text, required
		homebanner_intro_text - html, optional
		homebanner_image - optional
		homebanner_cta_buttons (text, url) - optional, no more than 2

	Outputs:
		section_rendered - true when this section outputs markup, false otherwise
{% endcomment -%}
{%- var section_id = section_id %}{% unless section_id is_valid %}{% id set section_id = prefix:"Home_Banner_Section_" %}{% endunless -%}

<section id="{{section_id}}" class="{{section_class | default: 'text-bg-primary'}} d-flex align-items-center position-relative" style="min-height: {{min_height | default:"600px"}}">
	{%- comment %} Overlay {% endcomment -%}
	<div class="bg-dark position-absolute top-0 start-0 end-0 bottom-0 opacity-75"></div>
	{%- comment %} Content {% endcomment -%}
	<div class="container position-relative py-5">
		<div class="row">
			<div class="col-lg-8 px-3">
				{%- if entity.homebanner_pretitle.is_valid -%}
					<p class="text-white fs-5 mb-4 fw-normal">{{ entity.homebanner_pretitle }}</p>
				{%- endif -%}
				{%- include '/common/_title_with_subtitle.liquid' title:entity.homebanner_title subtitle:entity.homebanner_intro_text title_div:false title_classname:'text-white text-uppercase mb-4 lh-2 display-5 fw-bold' subtitle_classname:'text-white fs-5 mb-5 lh-2' -%}
				{%- if entity.homebanner_cta_buttons.is_valid -%}
					<div class="d-grid gap-3 d-md-flex">
						{%- for button in entity.homebanner_cta_buttons -%}
							<a href="{{button.url.value}}" class="btn btn-{% cycle 'homebannerbtns':'light', 'outline-light' %} px-4 py-3 fw-semibold text-uppercase rounded-0 text-decoration-none">{{button.text}}</a>
						{%- endfor -%}
					</div>
				{%- endif -%}
			</div>
		</div>
	</div>
</section>

{%- if entity.homebanner_image.is_valid -%}
	{%- add_stylesheet inline -%}
		#{{section_id}} {
			background-image: url("{% image_url = entity.homebanner_image preset:'webp' preset:img_preset_banner_bg %}");
			background-size: cover;
			background-position: center;
			background-repeat: no-repeat;
		}
	{%- end_stylesheet -%}
{%- endif -%}
{%- set section_rendered = true -%}

[
  {
    "Type": "group",
    "Fields": [
      {
        "Type": "text",
        "FieldID": "homebanner_pretitle",
        "Label": "Pre Title"
      },
      {
        "Type": "text",
        "IsRequired": true,
        "FieldID": "homebanner_title",
        "Label": "Banner Title"
      },
      {
        "Type": "html",
        "FieldID": "homebanner_intro_text",
        "Label": "Banner Intro Text"
      },
      {
        "Type": "group",
        "Fields": [
          {
            "Type": "image",
            "FieldID": "homebanner_image",
            "Label": "Image"
          },
          {
            "Type": "fieldset",
            "Fields": [
              {
                "Type": "text",
                "DefaultValue": "See More",
                "FieldID": "text",
                "Label": "Text",
                "IsRequired": true
              },
              {
                "Type": "url",
                "FieldID": "url",
                "Label": "URL",
                "IsRequired": true
              }
            ],
            "AllowMultiple": true,
            "InitCollapsed": false,
            "Validators": [
              {
                "Type": "maxitems",
                "Value": 2,
                "Message": "You may not add more than 2 buttons"
              }
            ],
            "FieldID": "homebanner_cta_buttons",
            "Label": "Banner CTA Buttons"
          }
        ],
        "Label": "Banner Section Settings"
      }
    ],
    "Label": "Banner Section"
  }
]