{% extends 'layout.html.twig' %}
{% block title %}{{ parent() }} - Rundgang{% endblock %}
{% block javascript %}
{{ parent() }}
{{ encore_entry_script_tags('frontend_tour') }}
{% endblock %}
{% block content %}
<section class="section is-medium">
<picture>
<source srcset="{{ asset('build/images/frontend/tour/vr-brille-cover-1920.webp') }}" type="image/webp">
<img src="{{ asset('build/images/frontend/tour/vr-brille-cover-1920.png') }}" alt="VR-Brille">
</picture>
<div class="container">
<div class="columns">
<div class="column is-8 is-offset-2 has-text-centered">
<p class="h2">
Wir schicken Sie aufs Dach!
</p>
<h1 class="h1">
Höhenangst?
</h1>
<p class="p">
Erleben Sie die PV-Anlage mal ganz aus der Nähe. Mit unserem interessanten 360° Rundgang können Sie sich ganz in Ruhe umsehen.
</p>
</div>
</div>
</div>
</section>
<section class="section is-medium has-background-black has-text-centered has-text-white">
<div class="container">
<div id="reorder" class="columns is-multiline is-mobile is-8 is-variable is-align-content-stretch">
<div class="column">
<div style="border: 1px solid white; padding: 2rem; height: 100%;">
<span class="icon is-large mb-6">
<i class="fas fa-3x fa-solar-panel"></i>
</span>
<h3>Module</h3>
<p class="p">
Die Photovoltaik-Module haben wir auf einem klassischen Einfamilienhaus platziert.
</p>
</div>
</div>
<div class="column is-flex is-flex-direction-column is-flex-wrap-wrap is-justify-content-center is-align-content-center">
<img class="mb-5" src="{{ asset('build/images/frontend/tour/360grad.svg') }}" alt="" style="width: 50%; margin-left: auto; margin-right: auto;">
<div class="dropdown is-hoverable" style="width: 75%;">
<div class="dropdown-trigger" style="width: 100%;">
<button class="button is-medium is-rounded is-primary" aria-haspopup="true" aria-controls="dropdown-menu" style="width: 100%;">
<span>Tour Starten</span>
<span class="icon is-small">
<i class="fas fa-angle-down" aria-hidden="true"></i>
</span>
</button>
</div>
<div class="dropdown-menu" id="dropdown-menu" role="menu" style="width: 75%; margin-left: 12.5%;">
<div class="dropdown-content">
<a class="dropdown-item modal-button" data-target="photo_sphere_viewer_modules" aria-haspopup="true" style="padding-right: 1rem;">
Dach
</a>
<a class="dropdown-item modal-button" data-target="photo_sphere_viewer_inverter" aria-haspopup="true" style="padding-right: 1rem;">
Hauswirtschaftsraum
</a>
</div>
</div>
</div>
</div>
<div class="column">
<div style="border: 1px solid white; padding: 2rem; height: 100%;">
<span class="icon is-large mb-6">
<i class="fas fa-3x fa-box"></i>
</span>
<h3>Wechselrichter</h3>
<p class="p">
Der Wechselrichter hängt in unserem Beispiel in einem Hauswirtschaftsraum.
</p>
</div>
</div>
</div>
</div>
</section>
<section id="vr_glasses" class="section is-medium has-background-white">
<div class="container">
<div class="columns is-desktop is-vcentered">
<div class="column is-full is-5-desktop is-4-widescreen has-text-centered-touch">
<p class="h2">
Holen Sie sich das komplette Erlebnis!
</p>
<h1 class="h1">
Mit VR-Brille
</h1>
<p class="p">
In unserem Showroom können Sie mithilfe einer Virtual-Reality-Brille auf ein Dach steigen.
</p>
<h1 class="h2 mt-6">
<span class="icon has-text-primary">
<i class="fas fa-star"></i>
</span>
Neueste VR-Technik
</h1>
<p class="p">
Gestochen scharfe 4K Bilder für ein intensives und reales VR-Erlebnis.
</p>
<h1 class="h2">
<span class="icon has-text-primary">
<i class="fas fa-star"></i>
</span>
Kostenlose Führung
</h1>
<p class="p">
In unserer Ausstellung erhalten Sie eine tolle Einführung in das Thema Photovoltaik!
</p>
</div>
<div class="column is-10-mobile is-offset-1-mobile is-8-tablet is-offset-2-tablet is-7-desktop is-offset-0-desktop is-8-widescreen">
<picture>
<source srcset="{{ asset('build/images/frontend/tour/vr-brille-1920.webp') }}" type="image/webp">
<img src="{{ asset('build/images/frontend/tour/vr-brille-1920.png') }}" alt="VR-Brille">
</picture>
</div>
</div>
</div>
</section>
{% include 'frontend/_sections/_showroom.html.twig' %}
{% include 'frontend/_sections/_customer_request_tool_teaser.html.twig' %}
{% endblock %}
{% block modals %}
{{ parent() }}
{# photo sphere viewer #}
{% embed "_components/_modal.html.twig" with {'modal_id': 'photo_sphere_viewer_modules'} %}
{% block modal_content %}
<div id="viewer_modules" style="width: 50vw; height: 75vh;"></div>
{% endblock %}
{% endembed %}
{% embed "_components/_modal.html.twig" with {'modal_id': 'photo_sphere_viewer_inverter'} %}
{% block modal_content %}
<div id="viewer_inverter" style="width: 50vw; height: 75vh;"></div>
{% endblock %}
{% endembed %}
{% endblock %}