{% extends "base.html.twig" %}
{% block title %} PartyGuru {% endblock %}
{% block stylesheets %}
<link rel="stylesheet" href="{{ asset("css/index.css") }}">
{% endblock %}
{% block body %}
    <main style="background-image: url({{ asset("img/WallpaperDog-20497496.jpg") }})">

        {% include "global_elements/nav.html.twig" %}

        <div class="container">
            <div class="slogan text-center mt-5">
                <h1 class="text-light bg-dark p-5">Werde deine nächste Party!</h1>
                <div id="party-imgs" data-bs-interval="3500" class="carousel slide mt-5" data-bs-ride="carousel">
                    <div class="carousel-inner">
                        <div class="carousel-item active">
                            <img src="https://content.sightseeing-kontor.de/images/29/partytour-cool-junge-leute.jpg"
                                 class="d-block w-100" alt="...">
                        </div>
                        <div class="carousel-item">
                            <img src="https://www.br.de/radio/bayern2/sendungen/zuendfunk/party-corona-spanien-konzert-100~_v-img__16__9__l_-1dc0e8f74459dd04c91a0d45af4972b9069f1135.jpg?version=b7b06"
                                 class="d-block w-100" alt="...">
                        </div>
                        <div class="carousel-item">
                            <img src="https://media.istockphoto.com/photos/nicelooking-attractive-gorgeous-glamorous-elegant-stylish-cheerful-picture-id1165055006?k=20&m=1165055006&s=612x612&w=0&h=OD4-_BceL_R2eaaBzDQrXNIyydwYXOJX-m-0z12z17s="
                                 class="d-block w-100" alt="...">
                        </div>
                    </div>
                </div>
            </div>
        </div>

    </main>
    <section class="pt-5 pb-5 d-flex align-items-center" id="idea">
        <div class="container">
            <div class="row">
                <div class="col-3 text-center">
                    <h2 class="text-light bg-dark d-inline-block p-3">Idee</h2>
                </div>
                <div class="col-9">
                    <p class="text-justify">
                        Oftmals fällt es schwer, eine Party mit den zutreffenden Informationen zu finden, ohne
                        aufwendige
                        Recherche zu betreiben. Aus diesem Grund haben wir PartyGuru entwickelt. Mit diesem Programm
                        sollen alle anstehenden Veranstaltungen, im öffentlichen sowie im privaten Rahmen, in einem von
                        dir
                        festgelegtem Umkreis für dich angezeigt werden.
                        <br>
                        <br>
                        Neben großen Festivals und Partys kannst Du auch nur für Dich und Deine Freunde die perfekte
                        Party
                        über unsere Webseite mit Überblick ganz einfach erstellen. Du kannst eine Gästeliste mit
                        Teilnehmeranzahl hinzufügen, Adresse und Location angebe und gewünschte Informationen angeben
                        (Beginn, Ende, Motto, Musikgenre…). Außerdem kannst du sehen, wer deiner Party bereits zugesagt
                        hat.
                    </p>

                    <img src="{{ asset("img/idea.jpg") }}" class="w-100 mt-5">
                </div>
            </div>
        </div>

    </section>

    <section class="pt-5 pb-5 bg-dark  d-flex align-items-center" id="about">
        <div class="container">
            <div class="row">
                <div class="col-9 text-light">
                    <p class="text-justify">
                        Wir sind ein junges Entwicklerteam aus Deutschland bestehend aus drei Mitgliedler und haben es
                        uns
                        zur
                        Aufgabe gemacht, euch das Feierngehen zu erleichtern. Zusammen kamen wir auf die Idee für das
                        Konzept von PartyGuru wobei Jette und Nina für die Darstellung und das Design zuständig waren
                        und
                        Anton das Programmieren der Webseite übernommen hat.
                    </p>
                    <h3 class="mt-5">Das Team</h3>

                    <div class="mt-5">

                        <div class="member text-center">
                            <div class="img-wrapper" style="background-image: url({{ asset("img/Anton.jpeg") }})"></div>
                            <p class="mt-3 text-secondary text-center">Entwickler</p>
                            <a href="https://www.instagram.com/anton.hfe/" target="_blank"><i class="fab fa-instagram"></i></a>
                        </div>

                        <div class="text-center member">
                            <div class="img-wrapper" style="background-image: url({{ asset("img/Quanki.jpeg") }})"></div>
                            <p class="mt-3 text-secondary text-center">Design/Konzept/Süß</p>
                            <a href="https://www.instagram.com/jette.sn/" target="_blank"><i class="fab fa-instagram"></i></a>


                        </div>

                        <div class="text-center member">
                            <div class="img-wrapper" style="background-image: url({{ asset("img/Nöne.jpeg") }})"></div>
                            <p class="mt-3 text-secondary text-center">Design/Konzept</p>
                            <a href="https://www.instagram.com/n_i_na__/" target="_blank"><i class="fab fa-instagram"></i></a>


                        </div>

                    </div>


                </div>
                <div class="col-3 text-center">
                    <h2 class="text-dark bg-light d-inline-block p-3">Über uns</h2>
                </div>
            </div>
        </div>

    </section>


    {% include "global_elements/footer.html.twig" %}
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"
            integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p"
            crossorigin="anonymous"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

    <script type="text/javascript">

    </script>
{% endblock %}