{% extends "layout.html" %}

{% block title %}
    Welcome
{% endblock %}

{% block main %}
<section>
  <h1 id="header-main">Welcome to Total Expense!</h1><br>
  <h3>Your personal money saving assistant</h3><br>
</section>

<section>
  <div id="CarouselWelcome" class="carousel carousel-dark slide" data-bs-ride="carousel">
    <div class="carousel-indicators">
      <button type="button" data-bs-target="#CarouselWelcome" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
      <button type="button" data-bs-target="#CarouselWelcome" data-bs-slide-to="1" aria-label="Slide 2"></button>
      <button type="button" data-bs-target="#CarouselWelcome" data-bs-slide-to="2" aria-label="Slide 3"></button>
      <button type="button" data-bs-target="#CarouselWelcome" data-bs-slide-to="3" aria-label="Slide 4"></button>
    </div>
    <div class="carousel-inner">
      <div class="carousel-item active" data-bs-interval="5000">
        <img src="/static/couple_piggy.png" class="border border-secondary rounded" alt="...">
        <div class="carousel-caption d-none d-md-block">
          <h5 style="color: #910700;">Take charge of your savings with our digital financial helper!</h5>
          <p style="color: #910700;" class="carousel-text">Create an account today and leave debts behind forever.</p>
        </div>
      </div>
      <div class="carousel-item" data-bs-interval="5000">
        <img src="/static/happy_piggy.png" class="border border-secondary rounded carousel-img" alt="...">
        <div class="carousel-caption d-none d-md-block">
          <h5 style="color: #15627d;">Keep your piggy bank - and yourself - happy!</h5>
          <p style="color: #15627d" class="carousel-text">Even small change can make a big change.</p>
        </div>
      </div>
      <div class="carousel-item" data-bs-interval="5000">
        <img src="/static/piggy_categories.png" class="border border-secondary rounded carousel-img" alt="...">
        <div class="carousel-caption d-none d-md-block">
          <h5 style="color: white;">Use personalized spending categories!</h5>
          <p style="color: white;" class="carousel-text">Keep detailed track of your individual spending habits.</p>
        </div>
      </div>
      <div class="carousel-item" data-bs-interval="5000">
        <img src="/static/piggy_house.png" class="border border-secondary rounded carousel-img" alt="...">
        <div class="carousel-caption d-none d-md-block">
          <h5 style="color: #fae682;">Fulfill your dreams!</h5>
          <p style="color: #fae682;" class="carousel-text">Start saving today and achieve your financial goals tomorrow.</p>
        </div>
      </div>
    </div>
    <button class="carousel-control-prev" type="button" data-bs-target="#CarouselWelcome" data-bs-slide="prev">
      <span class="carousel-control-prev-icon" aria-hidden="true"></span>
      <span class="visually-hidden">Previous</span>
    </button>
    <button class="carousel-control-next" type="button" data-bs-target="#CarouselWelcome" data-bs-slide="next">
      <span class="carousel-control-next-icon" aria-hidden="true"></span>
      <span class="visually-hidden">Next</span>
    </button>
  </div>
</section>

<section>
  <div class="row align-items-start row-cols-2" style="margin-top: 60px;">
    <div class="col card border-dark mb-3" style="background-color: #d1e7dd;">
      <article id="text-welcome">
        <p style="margin-top: 10px;">Are you tired of relying on financial experts? You do not know how to finance your big dreams but you want to make a change?<br></p>
        <p>Then you have come to the right place: here you can easily keep track of your spending habits and monitor your individual budget.<br></p>
        <p>And a special highlight to meet your online shopping needs: we will help you to find the best deals!<br></p>
        <p>This way you will never run the risk of spending more than you can afford.<br></p>
        <p>Instead, you can build financial funds step by step, coming closer to fulfilling your dreams!<br></p>
        <p>So what are you waiting for? Sign up today and create your account! It is <u>totally free</u>!</p>
      </article>
    </div>

    <div class="col card border-dark mb-3" style="background-color: #d1e7dd; margin-top: 50px;">
      <ul>
        <li class="text-bullet">Create a free account!</li>
        <li class="text-bullet">Set your personal budget!</li>
        <li class="text-bullet">Track your every expense!</li>
        <li class="text-bullet">Review your spending history in detail!</li>
        <li class="text-bullet">Find the cheapest online deals!</li>
      </ul>
    </div>
  </div>
</section>
{% endblock %}