<section class="py-32 lg:py-64">
  <div class="container">
    <div class="text-5xl text-center">{{ section.settings.title | upcase }}</div>
  </div>
</section>

{% schema %}
  {
    "name": "Hero",
    "tag": "section",
    "class": "section",
    "disabled_on": {
      "groups": ["header", "footer"]
    },
    "settings": [
      {
        "type": "header",
        "content": "Content"
      },
      {
        "type": "text",
        "id": "title",
        "label": "Title",
        "default": "Welcome, home!"
      },
      {
        "type": "header",
        "content": "Settings"
      },
      {
        "type": "select",
        "id": "width",
        "label": "Section Width",
        "options": [
          {
            "value": "",
            "label": "Full Width"
          }, {
            "value": "mx-auto max-w-[1450px]",
            "label": "Page Width"
          }
        ],
        "default": ""
      }, {
        "type": "select",
        "id": "padding_top",
        "label": "Padding top",
        "options": [
          {
            "value": "none",
            "label": "None"
          }, {
            "value": "sm",
            "label": "Small"
          }, {
            "value": "base",
            "label": "Normal"
          }, {
            "value": "lg",
            "label": "Large"
          }
        ],
        "default": "base"
      }, {
        "type": "select",
        "label": "Padding bottom",
        "id": "padding_bottom",
        "options": [
          {
            "value": "none",
            "label": "None"
          }, {
            "value": "sm",
            "label": "Small"
          }, {
            "value": "base",
            "label": "Normal"
          }, {
            "value": "lg",
            "label": "Large"
          }
        ],
        "default": "base"
      }
    ],
    "presets": [
      {
        "name": "Hero",
        "settings": {
          "title": "Welcome, home!"
        }
      }
    ]
  }
{% endschema %}