index.html

---
layout: default
className: home
---

<section class="hero" id="hero">
  <div class="container">
    <div class="row justify-content-center">
      <div class="col-lg-8">
        <h1>{{ site.data.homepage.hero.title }}</h1>
      </div>
    </div>
    <div class="row justify-content-center">
      <div class="col-lg-9">
        <p>{{ site.data.homepage.hero.content }}</p>
      </div>
    </div>
    <div class="row justify-content-center">
      <div class="col-lg-6">
        <div class="buttons">
          {% for link in site.data.homepage.hero.links %}
            <a
              class="btn btn-outline-primary"
              href="{{ link.url }}"
              target="_blank"
              rel="noopener noreferrer"
            >
              <span>{{ link.title }}</span>
            </a>
          {% endfor %}
        </div>
      </div>
    </div>
  </div>
</section>

<section class="info" id="why">
  <div class="container">
    <div class="row">
      <div class="col-lg-4">
        <h2>{{ site.data.homepage.why.title }}</h2>
      </div>
      <div class="col-lg-8">
        <p>{{ site.data.homepage.why.content | newline_to_br }}</p>
      </div>
    </div>
  </div>
</section>

<section class="options" id="options">
  <div class="container">
    <div class="row options__heading">
      <div class="col-lg-6">
        <h2>{{ site.data.homepage.options.title }}</h2>
      </div>
      <div class="col-lg-9">
        <p>{{ site.data.homepage.options.content | newline_to_pr }}</p>
      </div>
    </div>
    {% include homepage/options-tabs.html %}
    {% include homepage/options-accordion.html %}
  </div>
</section>

<section class="features" id="benefits">
  <div class="container">
    <div class="row justify-content-center">
      <div class="col-lg-8 features--heading">
        <h2>{{ site.data.homepage.benefits.title }}</h2>
      </div>
    </div>

    <div class="row">
      {% for benefit in site.data.homepage.benefits.list %}
      <div class="col-lg-4 d-flex mb-2 mb-lg-4">
        <div class="card card-simple">
          <div class="card-body">
            <h4>{{ benefit.title }}</h4>
            <div class="content">
              <p>{{ benefit.content | newline_to_br }}</p>
            </div>
          </div>
        </div>
      </div>
      {% endfor %}
    </div>
    {% if site.data.homepage.benefits.cta %}
    <div class="row justify-content-center">
      <div class="col-lg-4 text-center">
        <a
          class="btn btn-outline-primary"
          href="{{ site.data.homepage.benefits.cta.url }}"
          target="_blank"
          rel="noopener noreferrer"
        >
          <span>{{ site.data.homepage.benefits.cta.title }}</span>
        </a>
      </div>
    </div>
    {% endif %}
  </div>
</section>

<section class="info" id="usage">
  <div class="container">
    <div class="row justify-content-center">
      <div class="col-lg-4">
        <h2>{{ site.data.homepage.usage.title }}</h2>
      </div>
      <div class="col-lg-6 offset-lg-1 d-flex flex-column">
        {% for item in site.data.homepage.usage.list %}
          <h4>{{ item.title }}</h4>
          <p>{{ item.content | newline_to_br }}</p>
        {% endfor %}
      </div>
    </div>
  </div>
</section>

<section class="posts" id="blog">
  <div class="container">
    <div class="row justify-content-center">
      <div class="col-lg-8 text-center">
        <h2>Latest From Kaskada</h2>
      </div>
    </div>

    <div class="row">
      {% for post in site.posts limit: 3 %}
        <div class="col-lg-4 d-flex mb-4">
          <a  href="{{ post.url | relative_url }}" class="card card-link card--post">
            <div class="card-body">
              <h4>{{ post.title | escape }}</h4>
              <h5>
                {% if post.author %}
                  <span>by {{ post.author }} · </span>
                {% endif %}
                <span>{{ post.date | date: "%b %-d, %Y" }}</span>
              </h5>

              <span class="btn btn-link">Read More</span>
            </div>
          </a>
        </div>
      {% endfor %}
    </div>

    <div class="row justify-content-center mt-5">
        <div class="col-lg-6 text-center">
            <a
            class="btn btn-outline-primary"
            href="{{ "/blog" | relative_url }}"
          >
            View All
          </a>
        </div>
    </div>
  </div>
</section>

{% if site.events != empty %}
<section class="posts" id="events">
  <div class="container">
    <div class="row justify-content-center">
      <div class="col-lg-8 text-center">
        <h2>Events</h2>
      </div>
    </div>

    <div class="row">
      {% for event in site.events limit: 3 %}
      <div class="col-lg-4 d-flex mb-4">
        <a href="{{ event.url | relative_url }}" class="card card-link card--event">
          <div class="card-body">
            <div class="card--event-details">
              <span>{{ event.date | date: "%b %-d, %Y" }}</span>
              {% if event.location %}<span>{{ event.location }}</span>{% endif %}
            </div>
            <h4>
              {{ event.title }}
            </h4>

            <span class="btn btn-link">Register Now</span>
          </div>
        </a>
      </div>
      {% endfor %}
    </div>

    <div class="row justify-content-center mt-5">
        <div class="col-lg-6 text-center">
            <a
            class="btn btn-outline-primary"
            href="{{ "/events" | relative_url }}"
          >
            View All
          </a>
        </div>
    </div>
  </div>
</section>
{% endif %}