{% extends 'main_base.html.twig' %}
{% block title %}AAA{% endblock %}
{% block description %}AAA{% endblock %}
{% block pageMeta %}{% endblock %}
{% block content %}
    {% block container %}
        <div class="home__wrapper">
            <video class="video-Box animate__zoomIn" muted="">
                <source src="{{ asset('assets/main/videos/canavar_VP9.webm') }}" type="video/mp4">
            </video>

            <div class="TextMainContainer">
                <div class="rectangleContainer">
                    <div class="text-BoxContainer animate__backInDown">
                        <div class="Text-Box">
                            <p>
                                <span class="textDactilo"><strong> Hallo, ich bin Tiichi, dein Lernbegleiter! </strong> Der Lernstoff der Fächer ist thematisch in einzelnen Broschüren gegliedert. So hilf ich dir dein Wissen gezielt zu fördern.</span><span
                                        class="typed-cursor typed-cursor--blink" aria-hidden="true"></span>
                            </p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    {% endblock %}
{% endblock %}
{% block pageScript %}
    <script src="https://cdn.jsdelivr.net/npm/gsap@3.12.5/dist/gsap.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/gsap@3.12.5/dist/ScrollTrigger.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/gsap@3.12.5/dist/ScrollToPlugin.min.js"></script>
    <script src="{{ asset('assets/main/js/index.js') }}"></script>
    <script src="{{ asset('assets/main/js/all.min.js') }}"></script>
    <script src="{{ asset('assets/main/js/bootstrap.min.js') }}"></script>
    <script src="{{ asset('assets/main/js/typed.js') }}"></script>
    <script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>
    <script>
        // Video Play
        setTimeout(function () {
            document.querySelector(".video-Box").play();
        }, 900);

        // Video Block

        setTimeout(function () {
            $(".video-Box").css({"display": "block"});
        }, 1200);

        // next btn
        /* setTimeout(function () {
            $(".Next").css({ "opacity": "1", "transition": "1.2s", "pointer-events": "all" });
        }, 4000); */

        // typewriter
        setTimeout(function () {
            $(".text-BoxContainer").css({"display": "block"});
            var typed2 = new Typed('.textDactilo', {
                strings: ['<strong> Hallo, ich bin Tiichi, dein Lernbegleiter! </strong> Der Lernstoff der Fächer ist thematisch in einzelnen Broschüren gegliedert. So hilf ich dir dein Wissen gezielt zu fördern.'],
                typeSpeed: 15,
                backSpeed: 0,
                fadeOut: true,
            });
        }, 3000);
    </script>
{% endblock %}