{{ define "main" }}
  <section class="hero">
    <div class="container">
      <div class="hero-inner">
        <div class="hero-copy">
          <h1 class="hero-title h2-mobile mt-0 is-revealing">
            {{ .Site.Params.Content.LeadTitle | markdownify }}
          </h1>
          <p class="hero-paragraph is-revealing">
            {{ .Site.Params.Content.LeadDescription | markdownify }}
          </p>
          <p class="hero-cta is-revealing">
            <a
              class="button button-primary"
              href="{{ .Site.Params.Content.ButtonURL }}"
              >{{ .Site.Params.Content.ButtonCaption | markdownify }}</a
            >
          </p>
        </div>
      </div>
    </div>
  </section>
  <section class="sold-section">
    {{ range site.Params.sold }}
      {{ range .Icon }}
        <a>
          <img class="sold-image {{ .CSS }}" src="{{ .LogoURL }}" />
        </a>
      {{ end }}
    {{ end }}
  </section>
  <section class="features section">
    <div class="container">
      <div class="features-inner section-inner">
        <div class="features-wrap">
          {{ range site.Params.feature }}
            <div class="feature is-revealing feature-inner">
              <img class="feature-icon" src="{{ .FeatureImage }}" />
              <div class="feature-description">
                <h4 class="feature-title h3-mobile">{{ .FeatureTitle }}</h4>
                <p class="text-sm">{{ .FeatureDescription }}</p>
              </div>
            </div>
          {{ end }}
        </div>
      </div>
    </div>
  </section>
  <section class="pricing section">
    <div class="container">
      <div class="pricing-inner section-inner has-top-divider">
        <h2 id="pricing" class="section-title mt-0 text-center">Pricing</h2>
        {{ with index site.Params.pricing 0 }}
          <div class="pricing-table-inner">
            <div class="font-color-dark pricing-table-header is-revealing">
              <div class="pricing-table-title mt-12 mb-8">
                {{ .PricingTitle }}
              </div>
              <div class="pricing-table-collection">
                <div class="pricing-table-price">
                  <span style="font-size: 16px;" class="font-color-dark"
                    >{{ .PricingDesc }}</span
                  >
                </div>
                <a
                  href="{{ .ButtonURL }}"
                  style="margin-top:15px;"
                  class="button button-primary-dark"
                  >{{ .ButtonText }}</a
                >
              </div>
            </div>
            <ul class="pricing-table-features list-reset text-xs">
              {{ range .Features }}
                <li class="is-revealing">
                  <span class="list-icon">
                    <svg
                      width="16"
                      height="16"
                      xmlns="http://www.w3.org/2000/svg"
                    >
                      <path
                        fill="#5FFAD0"
                        fill-rule="nonzero"
                        d="M5.6 8.4L1.6 6 0 7.6 5.6 14 16 3.6 14.4 2z"
                      />
                    </svg>
                  </span>
                  <span class="font-color-dark">{{ .Description }}</span>
                </li>
              {{ end }}
            </ul>
          </div>
        {{ end }}
      </div>
    </div>
  </section>
{{ end }}