{% extends "base.html" %}

{% block content %}
<div class="container mt-5">
    <div class="px-4 py-4 my-5 text-center">
      <h1 class="display-5 fw-bold">Morning Bytes</h1>
      <div class="col-lg-6 mx-auto">
        <p class="lead mb-4">Education to your inbox.</p>
        {% if not session["logged_in"] %}
        <div class="d-grid gap-2 d-sm-flex justify-content-sm-center">            
            <a href="/login" class="btn btn-outline-secondary btn-lg px-4">Login</a>
            <a href="/signup" type="button" class="btn btn-primary btn-lg px-4 gap-3">Sign up</a>
        {% endif %}
        </div>
      </div>
    </div>

    <div class="row g-4 py-4 row-cols-1 row-cols-lg-3">
      <div class="feature col text-center">
        <i class="fad fa-envelope text-primary" style="font-size: 5rem"></i>
        <h2>Quizzes to your inbox!</h2>
        <p>Paragraph of text beneath the heading to explain the heading. We'll add onto it with another sentence and probably just keep going until we run out of words.</p>
      </div>
      <div class="feature col text-center">
        <i class="fad fa-check-square text-primary" style="font-size: 5rem"></i>
        <h2>Effective with all subjects!</h2>
        <p>Paragraph of text beneath the heading to explain the heading. We'll add onto it with another sentence and probably just keep going until we run out of words.</p>
      </div>
      <div class="feature col text-center">
        <i class="fad fa-chart-line text-primary" style="font-size: 5rem"></i>
        <h2>Proven results!</h2>
        <p>Paragraph of text beneath the heading to explain the heading. We'll add onto it with another sentence and probably just keep going until we run out of words.</p>
      </div>
    </div>
  </div>
{% endblock %}