path: root/_layouts/index.liquid


                
<!DOCTYPE html>
<html lang="en">
  <head>
    <title>{{ page.title }}</title>
    <link rel="stylesheet" href="/styles/index.css" />
    {% include "meta.liquid" %}
  </head>

  <body class="has-navbar-fixed-top is-size-4-desktop">
    {% include "nav.liquid" %}

    <!-- title, slogan, phone -->
    <section class="section has-text-right has-banner">
      <div class="banner">
        <div class="container">
          <h1 class="title is-2 has-text-shadow">
            CARPENTER TUTORING
          </h1>
          <h2 class="subtitle is-3 has-text-shadow">
            <b>Discovering <em>your</em> path to success</b>
          </h2>
          <div class="buttons is-right">
            <a
              class="button is-large is-rounded is-link"
              href="tel:1-757-335-7555"
            >
              Call (757) 335-7555
            </a>
            <a class="button is-large is-rounded is-primary" href="#contact">
              Contact me by email
            </a>
          </div>
        </div>
      </div>
    </section>

    <!-- intro blurb, portrait -->
    <section class="section quiet">
      <div class="container">
        <div class="columns">
          <div class="column">
            <!-- intro blurb -->
            <div class="content">
              <h2 class="subtitle is-3 has-text-shadow">
                {{ site.data.content.blurb.first }}
              </h2>
              {% for line in site.data.content.blurb offset:1 %}
              <p>{{ line }}</p>
              {% endfor %}
            </div>
            <figure class="image is-200x200">
              <picture>
                <source srcset="/assets/signature.webp" type="image/webp" />
                <source srcset="/assets/signature.png" type="image/png" />
                <img src="/assets/signature.png" />
              </picture>
            </figure>
          </div>
          <div class="column is-one-third">
            <div class="box">
              <figure class="image">
                <picture>
                  <source srcset="/assets/amy.webp" type="image/webp" />
                  <source srcset="/assets/amy.png" type="image/png" />
                  <img src="/assets/amy.png" />
                </picture>
              </figure>
            </div>
          </div>
        </div>
      </div>
    </section>

    <!-- offerings -->
    <section class="section" id="offerings">
      <div class="container">
        <div class="columns is-multiline is-centered">
          {% for offering in site.data.offerings %}
          <div class="column is-3">
            <div
              id="offering-{{ offering.id }}"
              class="box offering {{ offering.color }}"
              onclick="showOffering(this)"
            >
              <div class="content has-text-centered">
                <p>
                  <em>{{ offering.name }}</em>
                </p>
                <p>
                  {{ offering.highlight }}
                </p>
                <p>
                  <em><u>Learn more...</u></em>
                </p>
              </div>
            </div>
          </div>
          {% endfor %}
        </div>
      </div>
    </section>

    <!-- pricing table -->
    <section class="section" id="pricing">
      <div class="container">
        {% include "pricing-table.liquid" %}
      </div>
    </section>

    <!-- offering modal (hidden by default) -->
    {% for offering in site.data.offerings %}
    <div id="offering-{{ offering.id }}-modal" class="modal fadeIn">
      <div class="modal-background" onclick="hideOffering(this)"></div>
      <div class="modal-content">
        <div class="box offering {{ offering.color }}">
          <div class="content">
            {{ offering.description }}
          </div>
        </div>
      </div>
      <button
        class="modal-close is-large"
        onclick="hideOffering(this)"
      ></button>
    </div>
    {% endfor %}

    <!-- about pic and text -->
    <section class="section quiet" id="about">
      <div class="container">
        <div class="content">
          <figure class="image is-256x256" style="float: right;">
            <picture>
              <source srcset="/assets/logo.webp" type="image/webp" />
              <source srcset="/assets/logo.png" type="image/png" />
              <img src="/assets/logo.png" />
            </picture>
          </figure>
          <h2 class="subtitle is-3 has-text-shadow">
            {{ site.data.content.about.first }}
          </h2>

          {% for line in site.data.content.about offset:1 %}
          <p>{{ line }}</p>
          {% endfor %}
        </div>
      </div>
    </section>

    <!-- contact box, additional contact and tutoring info -->
    <section class="section" id="contact">
      <div class="container">
        <div class="columns">
          <div class="column is-one-third">
            <div class="box">
              {% include "contact-form.liquid" %}
            </div>
          </div>

          <div class="column">
            <div class="box">
              <div class="content">
                <ul>
                  {% for line in site.data.content.policies %}
                  <li>{{ line }}</li>
                  {% endfor %}
                </ul>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>

    {% include "footer.liquid" %}

    <script src="/scripts/iconify.min.js" type="text/javascript"></script>
    <script src="/scripts/index.js" type="text/javascript"></script>
    <script src="/scripts/smtp.js" type="text/javascript"></script>
  </body>
</html>