{{! Section: Technologies }}
<section id="section-technologies" class="bg-gray-100 py-10 md:py-12 lg:py-14 xl:py-16">
  <div class="container">

    {{! Logos }}
    <ul class="flex flex-wrap lg:justify-between">
      {{#each landing.technologies}}
      <li class="basis-1/2 sm:basis-1/3 md:basis-1/5 flex items-center justify-center min-h-[80px] lg:min-h-[120px]">
        <img class="grayscale hover:grayscale-0 opacity-30 transition-all hover:opacity-100 px-4" src="{{img}}" alt="{{title}}" />
      </li>
      {{/each}}
    </ul>
    {{! Logos / End }}
  </div>
</section>
{{! Section: Technologies / End }}

{{! Section: Previews }}
<section id="section-demo-pages" class="py-20 sm:py-28 md:py-36 lg:py-40 xl:py-[180px]">
  <div class="container">

    {{! Previews }}
    <ul class="flex flex-col gap-y-16 sm:gap-y-20 lg:gap-y-28 xl:gap-y-[180px]">
      {{#each landing.previews}}
        <li class="grid grid-cols-12 gap-x-4 group gap-y-10">

          <figure class="col-span-full md:col-span-7 md:group-even:order-2 lg:group-even:pl-[84px]">
            <div class="relative aspect-square w-[90%] sm:w-[400px] md:w-[340px] lg:w-[420px] xl:w-[600px] group-even:ml-auto mx-auto md:mx-0">
              <a href="{{link}}" target="_blank">
                <div
                  class="absolute top-0 group-odd:left-0 aspect-[5/6] w-[83.33%] group-even:right-0 {{#ifequal color "primary"}} bg-primary {{/ifequal}} {{#ifequal color "secondary"}} bg-secondary {{/ifequal}} {{#ifequal color "tertiary"}} bg-tertiary {{/ifequal}} {{#ifequal color "quaternary"}} bg-quaternary {{/ifequal}}"
                >
                </div>
                <img
                  class="rellax top-0 sm:top-0 xl:top-0 aspect-[500/478] max-w-full group-odd:left-5 lg:group-odd:left-10 xl:group-odd:left-[100px] group-even:right-5 lg:group-even:right-10 xl:group-even:right-[100px] shadow-4xl absolute"
                  src="{{preview}}"
                  alt="{{title}}"
                  data-rellax-xs-speed="0.3"
                  data-rellax-mobile-speed="0.7"
                  data-rellax-speed="1"
                  data-rellax-percentage="1"
                />
              </a>
            </div>
          </figure>

          <div class="col-span-full md:col-span-5 md:group-even:order-1">

            {{! Heading }}
            <div class="mb-4 md:mb-5 md:pt-4 lg:mb-8 lg:pt-7 xl:mb-16 xl:pt-14">
              <div class="mb-1 uppercase text-gray-300 text-base lg:text-lg font-heading xl:mb-5">Demo Pages</div>
              <h2 class="text-accent text-2xl leading-none sm:text-3xl sm:leading-none md:text-3xl md:leading-none lg:text-4xl lg:leading-none xl:text-[52px] tracking-tighter font-bold font-heading">
                <span>{{title}}</span>
                <span>{{subtitle}}</span>
              </h2>
            </div>
            {{! Heading / End }}

            {{! Description }}
            <div class="mb-5 md:mb-7 lg:mb-12 xl:mb-[72px]">
              {{desc}}
            </div>
            {{! Description / End }}

            {{! Button }}
            <a class="inline-flex font-heading font-bold uppercase leading-none text-white text-sm px-10 py-5 {{#ifequal color "primary" }} bg-primary {{/ifequal}} {{#ifequal color "secondary" }} bg-secondary {{/ifequal}} {{#ifequal color "tertiary" }} bg-tertiary {{/ifequal}} {{#ifequal color "quaternary" }} bg-quaternary {{/ifequal}} hover:bg-accent hover:text-white transition-colors" href="{{link}}" target="_blank">Go to demo!</a>
            {{! Button / End }}
          </div>
        </li>
      {{/each}}
    </ul>
    {{! Previews / End }}
  </div>
</section>
{{! Section: Previews / End }}

{{! Section: Features }}
<section
  id="section-features"
  class="bg-gray-900 py-20 text-gray-300 sm:py-28 md:py-32 lg:py-40 xl:py-44"
>
  <div class="container">

    {{! Section Heading }}
    <div
      class="mb-20 flex flex-col items-center sm:mb-28 md:mb-32 lg:mb-40 xl:mb-44"
    >
      <div class="font-light uppercase text-gray-300">Valkivid Template</div>
      <h2
        class="font-heading font-bold leading-tight text-white text-4xl md:text-5xl xl:text-[52px]"
      >Template Features</h2>
    </div>
    {{! Section Heading / End }}

    {{! Features List }}
    <ul class="grid grid-cols-12 gap-x-4 gap-y-20">
      {{#each landing.features}}
        <li
          class="col-span-full flex flex-col items-center gap-y-7 md:col-span-6 lg:col-span-4"
        >
          <div class="mb-2 h-8 flex items-center justify-center">
            {{#ifequal icon.symbol "tailwindcss"}}
              <svg xmlns="http://www.w3.org/2000/svg" class="w-8 aspect-[54/33] fill-primary" viewBox="0 0 54 33">
                 <path fill-rule="evenodd" d="M27 0c-7.2 0-11.7 3.6-13.5 10.8 2.7-3.6 5.85-4.95 9.45-4.05 2.054.513 3.522 2.004 5.147 3.653C30.744 13.09 33.808 16.2 40.5 16.2c7.2 0 11.7-3.6 13.5-10.8-2.7 3.6-5.85 4.95-9.45 4.05-2.054-.513-3.522-2.004-5.147-3.653C36.756 3.11 33.692 0 27 0zM13.5 16.2C6.3 16.2 1.8 19.8 0 27c2.7-3.6 5.85-4.95 9.45-4.05 2.054.514 3.522 2.004 5.147 3.653C17.244 29.29 20.308 32.4 27 32.4c7.2 0 11.7-3.6 13.5-10.8-2.7 3.6-5.85 4.95-9.45 4.05-2.054-.513-3.522-2.004-5.147-3.653C23.256 19.31 20.192 16.2 13.5 16.2z" clip-rule="evenodd"/>
              </svg>
            {{else}}
              <svg role="img" class="fill-transparent h-8 w-8 {{#ifequal icon.color "primary"}} stroke-primary {{else}} stroke-secondary {{/ifequal}}">
                <use
                  xlink:href="{{root}}assets/img/landing/sprite.svg#{{icon.symbol}}"
                ></use>
              </svg>
            {{/ifequal}}
          </div>
          <h3 class="font-heading text-2.5xl lg:text-[32px] font-bold text-white">
            {{title}}
          </h3>
          <div class="text-center text-base leading-[26px] px-1 [&_a]:text-primary hover:[&_a]:text-white [&_a]:transition-colors">{{{desc}}}</div>
        </li>
      {{/each}}
    </ul>
    {{! Features List / End }}

  </div>
</section>
{{! Section: Features / End }}

{{! Section: CTA }}
<section id="section-cta" class="py-20 sm:py-28 md:py-36 lg:py-40 xl:py-[180px]">
  <div class="mx-auto max-w-2xl text-center px-6">
    <h2 class="font-heading font-bold leading-tight text-accent text-4xl md:text-5xl">Download It Now and Start Making a Difference!</h2>
    <p class="mx-auto mt-6 max-w-xl text-lg leading-8">Buy the template to save time and effort while ensuring a professional and consistent design for your project.</p>
    <div class="mt-10 flex items-center justify-center gap-x-6">
      {{! Button }}
      <a class="inline-flex font-heading font-bold uppercase leading-none text-white text-sm px-10 py-5 bg-primary hover:bg-accent hover:text-white transition-colors" href="{{landing.purchase}}" target="_blank">Download It Now!</a>
      {{! Button / End }}
    </div>
  </div>
</section>
{{! Section: CTA / End }}