{% extends 'base.html.twig' %}
{% block body %}
<!-- ======= Hero Section ======= -->
<section id="hero">
<div class="hero-container">
<div id="heroCarousel" data-bs-interval="5000" class="carousel slide carousel-fade" data-bs-ride="carousel">
<ol class="carousel-indicators" id="hero-carousel-indicators"></ol>
<div class="carousel-inner" role="listbox">
<!-- Slide 1 -->
<div class="carousel-item active" style="background-image: url(assets/img/slide/slide-1.jpg)">
<div class="carousel-container">
<div class="carousel-content">
<h2 class="animate__animated animate__fadeInDown">Willkommen bei <span>HEY:LOTTE!</span></h2>
<p class="animate__animated animate__fadeInUp">Du bist auf der Suche nach einer Möglichkeit mit einem digitalen Karteikasten eine Sprache zu lernen? Dann bist du bei uns genau richtig. Aus einem eigenem Bedarf entstand diese Plattform.</p>
</div>
</div>
</div>
<!-- Slide 2 -->
<div class="carousel-item" style="background-image: url(assets/img/slide/slide-2.jpg)">
<div class="carousel-container">
<div class="carousel-content">
<h2 class="animate__animated fanimate__adeInDown">Einfache und bewährte <span>Lernmethode</span</span></h2>
<p class="animate__animated animate__fadeInUp">Erfahre mehr über unsere simple aber erfolgreiche 4-stufige Lernmethode, die du anwenden kannst aber nicht musst.</p>
<a href="" class="btn-get-started animate__animated animate__fadeInUp">Zeige mehr</a>
</div>
</div>
</div>
<!-- Slide 3 -->
<div class="carousel-item" style="background-image: url(assets/img/slide/slide-3.jpg)">
<div class="carousel-container">
<div class="carousel-content">
<h2 class="animate__animated animate__fadeInDown">Werde Teil der <span>Lern-Community</span></h2>
<p class="animate__animated animate__fadeInUp">Warum alles selber machen? Abboniere andere oder teile deine Karteikarten mit unserer Community. </p>
<a href="" class="btn-get-started animate__animated animate__fadeInUp">Zeige mehr</a>
</div>
</div>
</div>
</div>
<a class="carousel-control-prev" href="#heroCarousel" role="button" data-bs-slide="prev">
<span class="carousel-control-prev-icon bi bi-chevron-left" aria-hidden="true"></span>
</a>
<a class="carousel-control-next" href="#heroCarousel" role="button" data-bs-slide="next">
<span class="carousel-control-next-icon bi bi-chevron-right" aria-hidden="true"></span>
</a>
</div>
</div>
</section><!-- End Hero -->
<main id="main">
<!-- ======= Featured Section ======= -->
<section id="featured" class="featured">
<div class="container">
<div class="row">
<div class="col-lg-4">
<div class="icon-box">
<i class="bi bi-card-checklist"></i>
<h3><a href="">Sprachen lernen</a></h3>
<p>Sprache und damit Vokabeln lernen, das gehört einfach zusammen. Erstelle digitale Karteikästen und lerne jeden Tag.</p>
</div>
</div>
<div class="col-lg-4 mt-4 mt-lg-0">
<div class="icon-box">
<i class="bi bi-bar-chart"></i>
<h3><a href="">Lernmethode</a></h3>
<p>Wir bieten dir eine 3-stufige Lernmethode, die insgesamt nie mehr als 10 Minuten deiner täglichen Zeit in Anspruch nehmen sollte.</p>
</div>
</div>
<div class="col-lg-4 mt-4 mt-lg-0">
<div class="icon-box">
<i class="bi bi-binoculars"></i>
<h3><a href="">Community</a></h3>
<p>Partizipiere von anderen oder stelle deine Karteikarten anderen zur Verfügung. Die Lern-Community macht's möglich.</p>
</div>
</div>
</div>
</div>
</section><!-- End Featured Section -->
<!-- ======= About Section ======= -->
<section id="about" class="about">
<div class="container">
<div class="row">
<div class="col-lg-6">
<img src="assets/img/about.jpg" class="img-fluid" alt="">
</div>
<div class="col-lg-6 pt-4 pt-lg-0 content">
<h3>Voluptatem dignissimos provident quasi corporis voluptates sit assumenda.</h3>
<p class="fst-italic">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
magna aliqua.
</p>
<ul>
<li><i class="bi bi-check-circle"></i> Ullamco laboris nisi ut aliquip ex ea commodo consequat.</li>
<li><i class="bi bi-check-circle"></i> Duis aute irure dolor in reprehenderit in voluptate velit.</li>
<li><i class="bi bi-check-circle"></i> Ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate trideta storacalaperda mastiro dolore eu fugiat nulla pariatur.</li>
</ul>
<p>
Ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate
velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
culpa qui officia deserunt mollit anim id est laborum
</p>
</div>
</div>
</div>
</section><!-- End About Section -->
</main><!-- End #main -->
{% endblock %}