{% extends 'base.html.twig' %}

{% block stylesheets %}
    <link rel="stylesheet" href="{{ asset('css/homepage/homepage.css') }}">
{% endblock %}

{% block body %}
    <div id ="homepage">
        <section id="scene" data-pointer-events="true" data-x-origin="0.5" data-y-origin="0.5" data-scalar-y="75.0" data-scalar-x="25.0" data-friction-x="0.05" data-friction-y="0.05">
            <div id="video-container">
                <video id="video-panel" playsinline autoplay muted loop>
                    <source src="{{ asset('assets/homepage/video/video.mp4') }}" type="video/mp4">
                </video>
            </div>
            <div id="logo"><img src="{{ asset('assets/homepage/logo/logo.png') }}"></div>
            <div id="about" onclick="openAbout()">ABOUT</div>
            <div id="about-panel" onclick="closeAbout()">
                <div id="about-info">
                    <img src="{{ asset('assets/gallery/about/bio.png') }}">
                </div>
            </div>
            <div id="contact" onclick="openContact()">CONTACT</div>
            <div id="contact-panel" onclick="closeContact()">
                <div id="contact-info">
                    <div>Cluj-Napoca</div>
                    <div>Romania</div>
                    <div>+40 743 817 652</div>
                    <div><a href="mailto:Izvorcollective@outlook.com">studio@izvor.co</a></div>
                    <div><a href="https://www.instagram.com/rehydrateregularly">Instagram</a></div>
                    <div><a href="https://www.facebook.com/rehydrateregularly/">Facebook</a></div>
                </div>
            </div>
            <div id="work" onclick="openWork()">WORK</div>
            <div id="work-panel" onclick="closeWork()">
                <div class="layer main" data-depth="1.0">
                    <div class="col">
                        <a href="{{ path('into-the-night') }}">
                            <div class="hover">
                                <div class="pad align-bottom">
                                    <h2>Into The Night</h2>
                                </div>
                            </div>
                            <div class="bg-img" style="background-image:url({{ asset('assets/gallery/thumbnails/into-the-night-thumbnail.jpg') }})"></div>
                        </a>
                    </div>
                    <div class="col">
                        <a href="{{ path('rehydrate-regularly') }}">
                            <div class="hover">
                                <div class="pad align-bottom">
                                    <h2>Rehydrate Regularly</h2>
                                </div>
                            </div>
                            <div class="bg-img" style="background-image:url({{ asset('assets/gallery/thumbnails/rehydrate-regularly-thumbnail.jpg') }})"></div>
                        </a>
                    </div>
                    <div class="col">
                        <a href="{{ path('corporate-design') }}">
                            <div class="hover">
                                <div class="pad align-bottom">
                                    <h2>Corporate Design & Illustration</h2>
                                </div>
                            </div>
                            <div class="bg-img" style="background-image:url({{ asset('assets/gallery/thumbnails/corporate-design-thumbnail.jpg') }})"></div>
                        </a>
                    </div>
                    <div class="col">
                        <a href="{{ path('elso') }}">
                            <div class="hover">
                                <div class="pad align-bottom">
                                    <h2>Elso</h2>
                                </div>
                            </div>
                            <div class="bg-img" style="background-image:url({{ asset('assets/gallery/thumbnails/elso-thumbnail.jpg') }})"></div>
                        </a>
                    </div>
                    <div class="col">
                        <a href="{{ path('vartofit') }}">
                            <div class="hover">
                                <div class="pad align-bottom">
                                    <h2>Vartofit</h2>
                                </div>
                            </div>
                            <div class="bg-img" style="background-image:url({{ asset('assets/gallery/thumbnails/vartofit-thumbnail.jpg') }})"></div>
                        </a>
                    </div>
                    <div class="col">
                        <a href="{{ path('oddo-desk') }}">
                            <div class="hover">
                                <div class="pad align-bottom">
                                    <h2>ODDO Desk</h2>
                                </div>
                            </div>
                            <div class="bg-img" style="background-image:url({{ asset('assets/gallery/thumbnails/oddo-desk-thumbnail.jpg') }})"></div>
                        </a>
                    </div>
                    <div class="col">
                        <a href="{{ path('logofolio') }}">
                            <div class="hover">
                                <div class="pad align-bottom">
                                    <h2>Logofolio</h2>
                                </div>
                            </div>
                            <div class="bg-img" style="background-image:url({{ asset('assets/gallery/thumbnails/logofolio-thumbnail.jpg') }})"></div>
                        </a>
                    </div>
                    <div class="col">
                        <a href="{{ path('illustration') }}">
                            <div class="hover">
                                <div class="pad align-bottom">
                                    <h2>Illustration</h2>
                                </div>
                            </div>
                            <div class="bg-img" style="background-image:url({{ asset('assets/gallery/thumbnails/illustration-thumbnail.jpg') }})"></div>
                        </a>
                    </div>
                    <div class="col">
                        <a href="{{ path('authentic-spirit') }}">
                            <div class="hover">
                                <div class="pad align-bottom">
                                    <h2>Authentic Spirit</h2>
                                </div>
                            </div>
                            <div class="bg-img" style="background-image:url({{ asset('assets/gallery/thumbnails/authentic-spirit-thumbnail.jpg') }})"></div>
                        </a>
                    </div>
                </div>
            </div>
        </section>
    </div>
{% endblock %}