{{ 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 button-shadow"
                        href="{{ .Site.Params.Content.ButtonURL}}">{{ .Site.Params.Content.ButtonCaption | markdownify
                        }}</a></p>
            </div>
        </div>
    </div>
</section>
{{ with .Site.Params.quote }}
<section class="quote-section">
    {{ range . }}
    <blockquote>
        <h3>{{ .quoteText }}</h3>
        <p>- {{ .quoteBy }}</p>
    </blockquote>
    {{ end }}
</section>
{{ end }}
<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 button-shadow">{{ .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 }}