<section class="relative grid pt-60 laptop:pt-[7.5rem]" id="sun-inside">
  <div class=" w-full overflow-hidden min-h-screen">
    <div class="absolute min-h-screen h-full left-0 top-0 w-full">
      <div class="relative w-full overflow-hidden h-full overflow-hidden">
        <div
          class="h-full"
          data-animation="parallax"
          data-speed="3"
          data-start="top bottom+=100"
          data-end="bottom top-=100"
        >
          <picture class="w-full h-auto flex min-h-screen h-full" style="--aspect: 1"
            ><img
              class="block w-full object-cover min-h-screen h-full"
              src="{{ section.settings.bgimg | img_url:'' }}"
              alt="{{ section.settings.bgimg.alt }}"
              width="2880"
              height="2880"
              draggable="false"
          ></picture>
        </div>
      </div>
    </div>
    <div class="min-h-screen text-cream overflow-hidden">
      <div class="py-10 relative">
        <div
          class="overflow-hidden whitespace-nowrap w-full uppercase font-medium text-[5rem] leading-none md:text-[14rem] laptop:text-[24rem] gap-x-[0.5em] flex laptop:leading-[0.8]"
          data-animation="marquee"
          data-start="top bottom"
          data-end="+=200%"
        >
          <div class="flex" data-marquee="0">{{ section.settings.marquee }}&nbsp;</div>
          <div class="flex" data-marquee="1">{{ section.settings.marquee }}&nbsp;</div>
        </div>
        <span
          class="h-1 absolute left-0 top-0 w-full bg-current opacity-20"
        ></span
        ><span
          class="h-1 absolute left-0 bottom-0 w-full bg-current opacity-20"
        ></span>
      </div>
      <div class="relative">

        {% for block in section.blocks %}
        {% case block.type %}
        {% when 'text_item' %}
        <div
          class="container pt-40 pb-100 md:pt-50 laptop:pb-200 border-b border-cream border-opacity-20 md:grid md:grid-cols-12 md:gap-x-18"
        >
          <h4 class=" hidden md:block md:col-span-4" data-animation="moveUp">{{ block.settings.xuhao }}</h4>
          <h4 class="max-w-[23rem] md:max-w-[40rem] md:col-span-4" data-animation="split">
            {{ block.settings.title }}
          </h4>
          <div class="max-w-[28.5rem] md:col-span-4" data-animation="moveUp">
            <p>
              {{ block.settings.text }}
            </p>
          </div>
        </div>

          
        {% when 'card_item' %}

        <div
          class="container pt-40 pb-100 md:pt-50 laptop:pb-250 md:grid md:grid-cols-12 md:gap-x-18"
        >
          <div class="mb-20 md:mb-0 uppercase md:col-span-4" data-animation="moveUp">
            <h4>
              {{ block.settings.heading }}
            </h4>
          </div>
          <div class="grid gap-y-20 md:grid-cols-8 md:gap-x-18 md:col-span-8">
            <div class="grid md:col-span-4" data-animation="moveUp" data-no-fade="">
              <div
                class="flex flex-col relative w-full  bottom-0 right-0 bg-bronze bg-opacity-10 backdrop-blur-lg rounded overflow-hidden p-20"
              >
                <div class="mb-20 md:mb-35">
                  <div class="custom-icon custom-icon--large">
                    <img
                      class="w-full h-full object-contain"
                      src="{{ block.settings.icon1 | img_url:'' }}"
                      alt="{{ block.settings.icon1.alt }}"
                    >
                  </div>
                </div>
                <h3 class="h4 mb-10">{{ block.settings.title1 }}</h3>
                <div
                  class="max-w-[21rem] md:max-w-[30rem] md:pr-0 reset-last laptop:pb-6"
                >
                  {{ block.settings.text1 }}
                </div>
                
                {% comment %}
                  <div class="pt-20 mt-auto flex-shrink-0">
                  <div>
                    <a
                      class="inline-flex items-center link link--underline"
                      href=""
                      target="_blank"
                      ><span>Learn More</span
                      ><span
                        class="ml-5 w-[0.9em] h-[0.9em] relative top-[0.1em] inline-block align-baseline"
                      >
                        <svg
                          class="svgi"
                        >
                          <use xlink:href="#svg-plus"></use>
                        </svg></span
                    ></a>
                  </div>
                </div>
                {% endcomment %}
       
              </div>
            </div>
            <div class="grid md:col-span-4" data-animation="moveUp" data-no-fade="">
              <div
                class="flex flex-col relative w-full  bottom-0 right-0 bg-bronze bg-opacity-10 backdrop-blur-lg rounded overflow-hidden p-20"
              >
                <div class="mb-20 md:mb-35">
                  <div class="custom-icon custom-icon--large">
                    <img
                      class="w-full h-full object-contain"
                      src="{{ block.settings.icon2 | img_url:'' }}"
                      alt="{{ block.settings.icon2.alt }}"
                    >
                  </div>
                </div>
                <h3 class="h4 mb-10">{{ block.settings.title2 }}</h3>
                <div
                  class="max-w-[21rem] md:max-w-[30rem] md:pr-0 reset-last laptop:pb-6"
                >
                  {{ block.settings.text2 }}
                </div>
              </div>
            </div>
          </div>
        </div>
          
        {% endcase %}
        {% endfor %}

      </div>
    </div>
  </div>
</section>

{% schema %}
{
  "name": "LP 8",
  "blocks": [
    {
      "type": "text_item",
      "name": "text item",
      "settings": [
        {
          "type": "text",
          "id": "xuhao",
          "label": "序号"
        },       
        {
          "type": "textarea",
          "id": "title",
          "label": "title"
        },        
        {
          "type": "textarea",
          "id": "text",
          "label": "text"
        }
      ]
    },    
    {
      "type": "card_item",
      "name": "card item",
      "settings": [
        {
          "type": "text",
          "id": "heading",
          "label": "heading"
        }, 
        {
          "type": "header",
          "content": "icon card 1"
        },        
        {
          "type": "image_picker",
          "id": "icon1",
          "label": "icon 1"
        },        
        {
          "type": "textarea",
          "id": "title1",
          "label": "title 1"
        },        
        {
          "type": "textarea",
          "id": "text1",
          "label": "text 1"
        },
        {
          "type": "header",
          "content": "icon card 2"
        },        
        {
          "type": "image_picker",
          "id": "icon2",
          "label": "icon 2"
        },        
        {
          "type": "textarea",
          "id": "title2",
          "label": "title 2"
        },        
        {
          "type": "textarea",
          "id": "text2",
          "label": "text 2"
        }        
      ]
    }    
  ],
  "settings": [
    {
      "type": "text",
      "id": "marquee",
      "label": "marquee"
    },   
    {
      "type": "image_picker",
      "id": "bgimg",
      "label": "bg img"
    }  
  ],
  "presets": [{"name": "LP 8"}]
}
{% endschema %}
